@charset "utf-8";
/* CSS Document */

/*Fragen, Vorläufiges, Arbeitsversion-------------------------*/
.work{color:#F60; font-style:italic;}

* {
margin: 0;	padding: 0;
border: 0 none;
vertical-align: baseline;
}

html {
height: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

body {
min-height: 100%;
font-size: 100.01%;
overflow-y: scroll;
}

/* Mixins , behebt BUGs in den Browsern
=================================================== */
/*clearfix bewirkt bei floatenden Elementen in einer Box, dass diese korrekt in der Box stehen*/
.clearfix {*zoom: 1; }/*100%Darstellung f�r IE*/
.clearfix:before {display: table; content: ""; }
.clearfix:after {display: table; content: ""; clear: both; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  position: static;
  clip: auto;
  height: auto; width: auto; margin: 0;
  overflow: visible; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
  *:first-child + html .clearfix {zoom: 1; }
  *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

/* IE7 */
/* #Basic Styles
================================================== */
/* apply a natural box layout model to all elements */
html {
  background:#fff;
  margin: 0; padding: 0;
  height: 100%;
  font-size: 100.01%;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: #f3f5f6;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  background-color: #fff;
  margin: 0; padding: 0;
  font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 100.01%; color: #666;
  -webkit-font-smoothing: antialiased;
   /*Fix for webkit rendering*/
  -webkit-text-size-adjust: 100%;
   }

   /* Noto-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/noto-sans-v32-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body{
	width:100%; height:100%;
	font-family: Noto Sans, Verdana, Geneva, sans-serif;
	font-size: 100.01%; /* umgeht IE-Bug beim Skalieren der Schriftgröße */
	/*color:#434A50;*/
	color:#666;
	background-color:#fff;
  overflow-x: hidden;
}


/* #Typography
================================================== */
h1, h2, h3, h4, h5, h6 { font-weight:bold; line-height:1.7em; text-rendering: optimizelegibility;/*optimiert die Lesbarkeit, wird aber nur von Gecko-Engines und Web-Kit Browsern unterstützt*/ }

h1{padding-bottom:20px; font-size: 20px; font-weight:normal; line-height:normal; color:#8e3458;}/*header-text Firma*/
h2.name{font-size: 20px; font-weight:normal; margin:10px 0 5px 0; color:#8e3458;}/*header-text Name*/
h2{font-size: 20px; font-weight:normal; margin:20px 0 5px 0; color:#8e3458;}
h3{font-size: 14px; padding:10px 0 5px 0;}
h4{font-size: 14px; padding-bottom:5px; color:#666;}


ul, ol {margin:0; padding:0; list-style:none;}

ul li{font-size:14px; list-style:none;  line-height:1.7em;}

p{font-size: 14px; line-height: 1.7em; padding-bottom:10px;}

b, strong { font-weight: bold; }
em {font-style: italic; }

br{margin:0; padding:0;}


/*Klassen------------------------------------------------*/
.small {font-size: small; font-weight:normal; }
.normal{font-weight:normal;}
.space{letter-spacing:0.125em;}

li.quad{ padding-left:20px; background-image:url(picts/quad.png); background-position:0 7px; background-repeat:no-repeat;}

li.line, p.line{ padding-left:15px; background-image:url(picts/line.png); background-position:0 9px; background-repeat:no-repeat;}


.antifloat{clear:both;}
.bordernone{border:none;}
.nobr{white-space: nowrap;}/*kein Umbruch, indexseite*/

/*Telefonnummer: kein Umbruch
span.fon {white-space: nowrap;}*/

/*für die E-Mail Adressen um @ zu verstecken*/
noscript span {display:none}




/*Grafiken----------------------------------*/
img {
 display:block;
 /*max-width: 100%; auf kleineren Displays wird das Bild, wenn es zu gro� ist, verkleinert*/
 height: auto;
 border: 0;
 -ms-interpolation-mode: bicubic;/*Art der Berechnung beim Skalieren f�r IE7*/
}


/*NAVIGATION allgemein----------------------------------------------------------------------*/
a {display:block; color:#666; text-decoration: none; }/*grau*/
a:hover, a:focus, a:active {text-decoration:none; color:#8e3458;}/*violett*/

a.active{text-decoration:none; color:#932c54;}

a.textlink{display:inline; text-decoration:underline; color:#8e3458;}
a.textlink:hover{color:#999;}

/*Telefonnummern*/
a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:focus,
a[href^="tel"]:hover  {
	display:inline; text-decoration: underline;  color:#8e3458 !important;
}


/*--------------------------------------------------------------------------------------*/


/*Html5 für IE7 + 8*/
header, nav, section, aside, footer, figure, figcaption{
  display: block;
}

#wrapper{
	margin: 0 auto; margin-top:0;
  padding:0;
	background-color:transparent;
  background-image:url(picts/start.jpg); background-position:top center; background-repeat:no-repeat;
  /*border:1px solid blue;*/
}

.menu-btn{display:none;}/*Hamburgermenü am PC unsichtbar*/


/*HAUPTMENÜ----------------------------------------------*/

.nav-left{background-transparent;}

.nav-left ul{margin:0 auto; margin-top:70px; text-align:right;}

.nav-left ul li{margin-bottom:4px; margin-right:0px; padding: 2px; padding-right:20px; color:#999; font-weight:bold; background-color: #e2e0d4;}

.nav-left ul li.btn-home{margin-bottom:60px; background-color: #fff;}
.nav-left ul li.btn-kontakt{margin-top:60px; background-color: #fff;}

.nav-left ul li a{font-weight:normal;}

.nav-left .mobil{display:none;}/*Die Footerlinks sind im Menü nicht sichtbar*/




/*BOX FÜR DIE SPALTEN---------------------------------------------------------------*/

.container{margin:0 auto; margin-top:40px; width:980px;}

/*Spalten*/
.left-column{float:left; width:185px; background-color:transparent;}

.center-column{float:left; width:780px; padding-left:30px; min-height:400px;}
section [role="content"]{margin-top:65px; padding:0px 90px 90px 0px;}

.center-column .headline{padding-bottom:20px;}/*Überschrift*/

/*-------------------------------------------------------------*/
header{margin:0 auto; max-width:980px;}

.header-text{margin-left:-60px; margin-top:20px; color:#8e3458; text-align:center;}
.header-text h1, .header-text h2, .header-text p{color:#8e3458; line-height:1.7em;}
.header-text h1{font-size:36px; padding-bottom:10px; line-height:1.0em;}
h2.name{font-size: 20px; font-weight:normal; margin:0px 0 5px 0; color:#8e3458;}/*header-text Name*/

.btn-englisch{position:relative; float:right; top:20px; right:20px; padding:0 15px 1px 15px; font-weight:bold; background:#cb9392;}
.btn-englisch{color:#8e3458;}
.btn-englisch a{color:#8e3458;}



/*Profil---------------------*/
.pict-profil{float:right; margin:-30px 10px 0 10px; border:2px solid #E0DCCF;}

.zeile{clear:left;  margin-bottom:5px; font-size:14px;}
.linke-spalte{float:left; width:65px; color:#8e3458;font-weight:bold; text-align:right;}
.rechte-spalte{margin-left:75px; }
.rechte-spalte p, .linke-spalte p{padding-bottom:5px; line-height:normal; }
/*-------------------------*/


.footer{ position:absolute; bottom: 0; padding:5px 0 0px 0; margin-bottom:0; width:100%; background-color:#e2e0d4;}
.footer p {text-align:center;line-height:normal;margin:5px 0 0px 0;}
.footer .item{border-right:2px solid #fff; padding:0px 35px 0px 35px; }
.footer a{display:inline;}


/* #Media Queries
================================================== */
/* Galaxy  Fold: zugeklappt hat es eine Breite von 280px*/
@media screen and (min-width: 280px) and (max-width: 319px){
    #wrapper{
    width:100%;
    margin:0; padding:0; margin-top:50px;
    background-image:url(picts/start.jpg); background-position:top center; background-repeat:no-repeat;

  }
/*--------------------*/
header{margin:0 auto;  width:100%;}
/*Name, Firma, Tel, Mail im Header*/
.header-text{margin:0 auto; margin-top:-30px; padding:0 10px 0 10px; max-width:100%; color:#8e3458; text-align:center;}
.header-text h1, .header-text h2, .header-text p{color:#8e3458; line-height:1.7em;}
.header-text h1{font-size:26px; padding-bottom:10px; line-height:1.0em;}
/*.umbruch{display:block;}*/

.btn-englisch{clear:right; float:left; top:-65px; left:20px; right:0;}

/*SPALTEN*/
.container{margin:0 auto; margin-top:0px; width:100%;}

.center-column{float:left; width:100%; margin-top:0px; padding-left:0px; padding-right:0px;/*max-width:736px;*/ min-height:400px;/*border-left:1px solid #662D43;*/}
.center-column .headline{padding-bottom:5px;}

section [role="content"]{float:left; width:100%; margin:0 0 30px 0; padding:0px 10px 30px 10px;}
section [role="content"] h2, section [role="content"] h3, section [role="content"] h4{padding-left:0; margin-left:0;}
section [role="content"] p{margin-left:0;}
section [role="content"] h2.dot{padding-left:20px; background-position:left 7px;}
/*---------------------------*/

/*.untertitel{white-space: nowrap;}Startseite*/

/*Die Menüs sind mit diesem Button (Hamburgermenü) ein- und ausblendbar*/
.menu-btn {display:block; position:relative; margin-top:70px; right:10px; padding:0px 20px 0px 0; width:100%; z-index:6; }

.menu-btn a{padding:5px 40px 5px 35px; color:#FFF; background-image:url(picts/pict_menue.png); background-position: right; background-repeat:no-repeat; background-color:transparent;}
.menu-btn a:focus{ background-color:transparent;}

/*Linkes Menü bei kleinem Display als Hamburgermenü-----------------------------------------*/
.nav-left{display:none; position:relative; width:100%; top:2px; background-color:#fff;}

.nav-left ul{margin:0 0 0 0; padding:0; margin-top:-30px; width:100%; height:auto; text-align:left; background-color:transparent;}
.nav-left ul li{min-width:320px !important; height:36px; padding:5px 0px 5px 20px ; margin:0; margin-bottom:4px; background-color:#E0DCCF;}

.nav-left ul li.btn-home{margin-bottom:4px; background-color: #E0DCCF;}
.nav-left ul li.btn-kontakt{margin-top:0px; background-color: #E0DCCF;}

.nav-left ul li.mobil{display:block; width:100%; height:36px; padding:5px 0px 5px 20px ; margin-bottom:4px; background-color:#E0DCCF; }/*Footerlinks im Hamburgermenü sichtbar*/


#menu-open:target .nav-left{display:block;}

.menu-btn a.open{display:block; }
.menu-btn a.close{display:none;}

#menu-open:target .menu-btn a.open{display:none;}
#menu-open:target .menu-btn a.close{display:block; background-image:url(picts/menu_open_pfeil.png); background-position:right; background-repeat:no-repeat;}
#menu-open:target .menu-btn a.close{/*margin-top:-330px;*/}/*Menübutton Pfeil springt nach oben - Problem:geht das Menü weiter unten auf, wird am I-Phone nicht das ganze Menü dargestellt*/
/*--------------------------*/

/*Profil*/
.pict-profil{clear:right; position:relative; margin:0 auto; left:0px; width:260px; border:none;  }/*bild soll mittig erscheinen*/
.pict-profil img{clear:right; position:relative; margin:0 auto; border:2px solid #E0DCCF;}/*bild soll mittig erscheinen*/
.zeile1{margin-top:200px;  }/*Nur erste Zeile*/
.linke-spalte{float:left; width:65px; color:#8e3458;font-weight:bold; text-align:right;}
.rechte-spalte{margin-left:70px; }
/*-------------------------*/

.footer{ display:none;}

/*-----------------------------------------------------------------------------------*/

}

@media screen and (min-width: 300px) and (max-width: 319px){
.menu-btn {display:block; position:relative; margin-top:100px; right:10px; padding:0px 20px 0px 0; width:100%; z-index:6; }
.btn-englisch{ top:-70px; }
}

/* @media screen and (min-width:320px) and (max-width: 760px)- Smartphones*/
@media screen and (min-width: 320px) and (max-width: 47.5em){
  /*Zum testen, wer da wackelt!
  * {
      border: 1px solid red !important;
  }*/

  #wrapper{
    width:100%;
    margin:0; padding:0;
  }
/*--------------------*/
header{margin:0 auto;  width:100%;}
/*Name, Firma, Tel, Mail im Header*/
.header-text{margin:0 auto; margin-top:20px; padding:0 10px 0 10px; max-width:100%; color:#8e3458; text-align:center;}
.header-text h1, .header-text h2, .header-text p{color:#8e3458; line-height:1.7em;}
.header-text h1{font-size:26px; padding-bottom:10px; line-height:1.0em;}
.umbruch{display:block;}

.btn-englisch{clear:right; float:left; top:-70px; left:20px; right:0;}

/*SPALTEN*/
.container{margin:0 auto; margin-top:0px; width:100%;}

.center-column{float:left; width:100%; padding-left:10px; padding-right:10px;/*max-width:736px;*/ min-height:400px; /*border-left:1px solid #662D43;*/}
.center-column .headline{padding-bottom:5px;}

section [role="content"]{float:left; width:100%; margin:0px 0 30px 0; padding:0px 10px 30px 10px;}
section [role="content"] h2, section [role="content"] h3, section [role="content"] h4{padding-left:0; margin-left:0;}
section [role="content"] p{margin-left:0;}
section [role="content"] h2.dot{padding-left:20px; background-position:left 7px;}
/*---------------------------*/

.untertitel{white-space: nowrap;}/*Startseite*/

/*Die Menüs sind mit diesem Button (Hamburgermenü) ein- und ausblendbar*/
/*.menu-btn {display:block; position:relative; top:70px; right:10px; padding:0px 20px 0px 0; z-index:6; }*/

.menu-btn a{padding:5px 40px 5px 35px; color:#FFF; background-image:url(picts/pict_menue.png); background-position: right; background-repeat:no-repeat; background-color:transparent;}
.menu-btn a:focus{ background-color:transparent;}

/*Linkes Menü bei kleinem Display als Hamburgermenü-----------------------------------------*/
.nav-left{display:none; position:relative; width:100%; top:2px; background-color:#fff;}
.nav-left ul{margin:-30px 0 0 0; padding:0;  width:100%; height:auto; text-align:left; background-color:transparent;}

.nav-left ul li{width:100%; min-width:400px; height:36px; padding:5px 0px 5px 20px ; margin-bottom:4px; background-color:#E0DCCF;}

.nav-left ul li.btn-home{margin-bottom:4px; background-color: #E0DCCF;}
.nav-left ul li.btn-kontakt{margin-top:0px; background-color: #E0DCCF;}

.nav-left ul li.mobil{display:block; width:100%; height:36px; padding:5px 0px 5px 20px ; margin-bottom:4px; background-color:#E0DCCF; }/*Footerlinks im Hamburgermenü sichtbar*/


/*Die Menüs sind mit diesem Button (Hamburgermenü) ein- und ausblendbar*/
.menu-btn {display:block; position:relative; margin-top:70px; right:10px; padding:0px 20px 0px 0; width:100%; z-index:6; }



#menu-open:target .nav-left{display:block;}

.menu-btn a.open{display:block; }
.menu-btn a.close{display:none;}

#menu-open:target .menu-btn a.open{display:none;}
#menu-open:target .menu-btn a.close{display:block; background-image:url(picts/menu_open_pfeil.png); background-position:right; background-repeat:no-repeat;}
/*#menu-open:target .menu-btn a.close{margin-top:-290px;}Menübutton Pfeil springt nach oben - Problem:geht das Menü weiter unten auf, wird am I-Phone nicht das ganze Menü dargestellt*/
/*--------------------------*/

/*Profil*/
.pict-profil{clear:right; position:relative; left:0px; margin-top:0; border:none;  }/*bild soll mittig erscheinen*/
.pict-profil img{clear:right; position:relative; margin:0 auto; border:2px solid #E0DCCF;}/*bild soll mittig erscheinen*/
/*.zeile1{margin-top:200px;  }Nur erste Zeile*/


.footer{ display:none;}

/*-----------------------------------------------------------------------------------*/

}

@media screen and (min-width: 320px) and (max-width: 321px){
.menu-btn {display:block; position:relative; margin-top:60px; right:10px; padding:0px 20px 0px 0; width:100%; z-index:6; }
.btn-englisch{ top:-80px; }
  }

/*  Tablets*/
@media screen and (min-width: 580px) and (max-width: 599px){
.btn-englisch{ top:-70px; }
}

@media screen and (min-width: 600px) and (max-width: 767px){
.btn-englisch{ top:0px; }
.menu-btn {display:block; position:relative; top:50px; right:10px; padding:0px 20px 0px 0; z-index:6; }
.left-column{float:left; width:150px; background-color:transparent;}
.center-column{float:left; width:618px; padding-top:40px; padding-left:30px; padding-right:0; min-height:400px;}

}
@media screen and (min-width: 761px) and (max-width: 767px){
.menu-btn {display:none;}
}

/* @media screen and (min-width:768px) and (max-width: 944px)- Tablets*/
@media screen and (min-width: 768px) and (max-width: 944px){

.btn-englisch{ top:20px; }

/*SPALTEN---------------------------------------------------------------*/
.container{margin:0 auto; margin-top:40px; width:100%;}
/*Spalten*/
.left-column{float:left; width:150px; background-color:transparent;}
.center-column{float:left; width:618px; padding-top:40px; padding-left:30px; padding-right:0; min-height:400px;}
section [role="content"]{float:left; width:100%; margin:0 0 30px 0; padding:0px 30px 30px 0px;}

/*Profil*/
.pict-profil{clear:right; position:relative; margin:-30px 10px 0 10px ;}

.footer{ position:absolute; bottom: 0; padding:5px 0 0px 0; margin-bottom:0; width:100%; background-color:#e2e0d4;}
.footer p {text-align:center;line-height:normal;margin:5px 0 0px 0;}
.footer .item{border-right:2px solid #fff; padding:0px 35px 0px 35px; }
.footer a{display:inline;}
}