@font-face
{
font-family: 'Madave';
src: local('Madave'),url('MADAVE.TTF')
format('TrueType')
}

html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    font-family: Madave, Lucida Sans, Helvetica, Arial, Sans-Serif;
/*    font-family: Madave, Helvetica, Arial, Sans-Serif;	*/
}
/* ---- */
.l-box {
	padding: 1em;
}

/* text-farben */
body{color: #FFF;}
h1{color: #EAEAEA;}
h2{color: #D1CECE;}
.untertitel {color: #FFF; padding: 0; margin-top: 0; font-size: 1.4em;
       /* font-weight: lighter;     */
}
.pure-button {
    border-radius: 50px;
    font-variant: small-caps;
	/* text-transform: uppercase;*/
    font-weight: bold;
    font-size: 1.4em;
    text-align: center;
    width: 150px;
    /* padding: .5em 1em; FORM orig in responsive */
    padding: .1em 0.2em;
    /*margin: -0.1em;*/

}
.red{background-color: red;border: 2px solid red;}
.coral{background-color: coral;border: 2px solid coral;}
.orange{background-color:orange;border: 2px solid orange;}
/*.orange:hover {border: 1px solid #FFF;}*/
.yellow{background-color: yellow; color: saddlebrown;border: 2px solid yellow;}
.yellowgreen{background-color: darkkhaki; color: saddlebrown;border: 2px solid darkkhaki;}
.green{background-color: green;border: 2px solid green;}
.skyblue{background-color: skyblue;border: 2px solid skyblue;}
.dodgerblue{background-color: dodgerblue;border: 2px solid dodgerblue;}
.vio{background-color: blueviolet;border: 2px solid blueviolet;}
.pink{background-color: hotpink;border: 2px solid hotpink;}

.pure-button:hover {
		border: 2px solid floralwhite;
} 
/* damit buttons zentriert sind */
.pure-menu-link {
	text-align: center;
}
/* text unter formular eingerückt, solange breit */
.form-footer{
	margin-left: 0px;
}
/* text eingerückt und schmal, solange breit */
.text-wild-180{
	margin: 0px;
}
.text-wild-220{
	margin: 0px;
}
.text-wild-120{
	margin: 0px;
}
/* padding nur wenn nebeneinander */
.bilder-padding{
	padding-right: 0em;
}
.gal-pic {
    padding: 5px;
}
.gal-pic3{ padding-top: 110px;}
.gal-text{ padding-top: 110px; margin-top: -130px;}
.gal-pic4{ width: auto; height: auto;}
/*.gal-pic4{ width: 490px; height: 250px;}*/
.gal-pic10{ width: 215px; margin-left: 0px;}
/* formular-felder bei mobiler ansicht breiter */
.pure-form .pure-input-1-3 {
    width: 75%;
}
.pure-form .pure-input-1-2 {
    width: 75%;
}

.text-margin-left .text-margin-left-center {margin-left: 0px;}

.header {
    /* margin: 0 auto;  PQ ausklammern = links bündig */
	/* margin-left: 208px; PQ abstand links von logo zu menu NOW in personal.css */
    background-color: #2B2048;
     /* text-align: left; */
     padding: 0 2em; /*      padding: 2.5em 2em 0;  PQ */
	 margin-left: -40px;
     /*max-width: 980px;  /* orig. ohne width */
    /* margin-left: 120px; PQ falls links angetackert .. dann bündig, wenn menu ausgefahren */
	overflow-x: hidden; /* PQ 2019 */
	overflow-y: hidden;	
 }

.hintergrund-pic{background-image: url(../pics/Titel-Home-Part.jpg);}

.header-background {
    background-color: #2B2048;
    height: 240px;
} 
.header-sub {
    float:left;
    /*width: 3400px; /* PQ neu */
    height: 240px;
    /*padding-top: 1em; PQ */
	
 }
.header-sub2 {
    /*float:left;*/
    /*width: 600px;  PQ statt max KNO in personal.css */
	width: 380px; /* PQ statt max */
    height: 240px; 
	position:absolute; top: 0px; right: 0px; white-space: nowrap; /* PQ 2019 */
    /*display: inline-block;*/
 }
/*.header-sub3 {
	width: 0px;
    height: 240px;
}    KEINE FUNKTION?  */

    .header h1 {
        margin: 0.2em 0;
        font-size: 3em;
        font-weight: 300;
        color: #FFF; /* gesetzt, war ohne color */    
    }
     .header h2 {
        font-weight: 100;
        color: #FFF; /* #ccc; */
        padding: 0;
        margin-top: 0;
        font-size: 1.8em;
    }
     .subtit {
        color: #FFF;
        padding-left: 20px;
        padding-top: 80px;
        /*font-size: 1.4em;*/
       /* font-weight: lighter;     */
    }
.horizontal{
    clear:both;
    border-bottom: 5px solid #eee;
}

/* neu: 490px */
@media screen and (min-width: 30.625em) {
.form-footer{margin-left: 170px;}
.text-wild-180{margin: 0 80px 0 80px;}
.text-wild-220{margin: 0 120px 0 120px;}
.text-wild-120{margin: 0 60px 0 60px;}
.pure-form .pure-input-1-3 {
    width: 33%;
}
.pure-form .pure-input-1-2 {
    width: 50%;
}
}
/* 568px SM */
@media screen and (min-width: 35.5em) {
	/*.tabelle {width: 33em;}*/
.nobreak {min-width: 9.75em;
    display:inline-block;}
.header-sub2 {max-width: 380px; }
}
/* 768px MD */
@media screen and (min-width: 48em) {
		/*.tabelle {width: 44em;}*/
.bilder-padding{
	padding-right: 0.8em;
}
.text-wild-180{margin: 0 180px 0 180px;}
.text-wild-220{margin: 0 220px 0 220px;}
.text-wild-120{margin: 0 120px 0 120px;}
.header-sub2 {max-width: 480px; /*margin-left: -110px; ENTFERNT 2019 */}    
.gal-pic3{ padding-top: 0px;}
.gal-text{ padding-top: 0px;}
/*.gal-pic4{ width: 580px; height: 285px;}*/
.text-margin-left{margin-left: 150px;}
.gal-pic10{ width: 215px; margin-left: -67px;}
/* .header-sub2 {width: 550px; margin-left: -90px;} für 3 bilder => sub3, IM IE aber FALSCH */
.text-margin-left-center{margin-left: 40px;}
.header {margin-left: 0px;} /* 2019 wenn kleineres bild rutsch logo ganz nach links */
/* NEU 2019 scroolbar */
::-webkit-scrollbar{
	background-color:white;  	
	width:10px;
        height:10px;
	-webkit-box-shadow:2px 2px 6px rgba(0,0,0,.5) inset;
}
::-webkit-scrollbar-thumb{
        border-radius:5px;
	background-color:white;
	-webkit-box-shadow:2px 2px 6px rgba(0,0,0,.5),inset -2px 2px 2px rgba(204,204,204,0.1),inset 2px -2px 2px rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb:hover{
	background-color:#a2c437;
}
}
@media screen and (min-width: 56em) {
.header {margin-left: 40px;}/* 2019 logo frühzeitig nach links, da kleineres bild drüber rutscht  */
}
@media screen and (min-width: 63em) { /*PQ 2019 vorther nix */
.hintergrund-pic{background-image: url(../pics/Titel-Home-Part.jpg);}
.header {margin-left: 148px;} /* 2019 logo wieder mit anschluss an menu, da kleienres bild platz gibt */
 
}
/* 1024px LG */
@media screen and (min-width: 64em) { /* PQ 2019 vorther 64 em */
.tabelle {width: 100%;}
.header {margin-left: 48px;} /* 2019 logo nach links, da grosses bild drüber rutscht, : 148px bei 240px: 208px */
.header-sub2 {min-width: 550px; /*margin-left: -110px; ENTFERNT 2019 */} /* bild ist 600px */
.hintergrund-pic{background-image: url(../pics/Titel-Home.jpg);}   
/* .header-sub2 {width: 520px; margin-left: -60px;} alternative - teils besser */
.gal-pic4{ width: auto; height: auto;}
/*.gal-pic4{ width: 655px; height: 332px;}*/
/*.header-sub3 {width: 380px; display: table-cell;}  2019 KEINE FUNKTION?  */
}    
@media screen and (min-width: 70em) {
.header {margin-left: 148px;}/* 2019 neu logo anschluss an menu */
}
/* 1280px XL */
@media screen and (min-width: 80em) {
.header-sub2 {min-width: 600px; /*margin-left: -110px; ENTFERNT 2019 */}
.text-margin-left{margin-left: 150px;}
.text-margin-left-center{margin-left: auto;}
}
/* neu: 1680px XXL */
@media screen and (min-width: 105em) {
/*.header-sub3 {width: 580px; display: table-cell;}  2019 KEINE FUNKTION?  */
}
.eingabefeld1{background-color:#84429A;}
.eingabefeld2{background-color:#4A3878;}
.eingabefeld3{background-color:#FED451; color:#FFF;}
.eingabefeld4{background-color:#363636; color:#FFF;}