@import url('https://fonts.googleapis.com/css?family=Oswald:400,700|Ubuntu');


header, nav, section, article, aside, footer {display:block;}

* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; padding:0; margin:0;}


body {font-family: 'Ubuntu', sans-serif; font-size:1.2em; background: #fff url("gelb.gif") repeat-x top; }

h1, h2 {font-family: 'Oswald', sans-serif; letter-spacing:1px; line-height:120%;}

h1 {text-transform: uppercase; font-size:5.4em; margin-top: -0px;}

h2 {font-size:2.2em; margin-top:40px;text-transform: uppercase; margin-bottom: 40px; font-weight:400; line-height:140%; font-size:2.4rem;}

#scrollBox {overflow-y: scroll; scroll-behavior: smooth; height:800px;}

p {margin:4px 0 20px 0; line-height:160%; font-size:1.1em;}

a {color: #000; padding:2px; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s;}
a:hover {color: #fff; background: #000;}

a:hover.ohne  {border:none;color: #fff; background: transparent;}


#wrap {padding-top:100px; }

i {font-size:0.5em;}

section div {clear: both;}
.gelb {border-top:solid 160px yellow;}

.randOben {border-top: 14px #fff solid;}

#arbeiten div.gelb img {width:64%; float:right;}
#arbeiten div.gelb .text {width:30%; float:left; margin-top:-50px; margin-left:30px; text-align: right;}

  #arbeiten div.gelb:nth-child(odd) img {width:64%; float:left;}
  #arbeiten div.gelb:nth-child(odd) .text {width:30%; float:right; margin-top:-50px; margin-right:30px;}

small {font-style: italic; display:block;}

address {line-height:30px; font-style: normal;}
address a {color:white;}
address a:hover {color:yellow;}

footer {background :#000; padding-bottom: 40px; max-width: 800px; margin:0 auto;}

ul {padding:30px 0; margin: 50px 0;}

section {background-color: #fff; min-height:300px;}

div.inhalt {max-width: 960px; margin:0px auto 20px auto;}

img.logo {max-width:200px; width:20%; min-width:50px;} 

#arbeiten div.gelb img.pfeil {width:50px;}
#arbeiten div.gelb img.pfeil:hover {cursor:pointer;}

.aufwaerts {text-align: right; margin-top:-44px;}
.aufwaertsLi {text-align: left; margin:10px;}

a.formLink {color:yellow; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s;}
a:hover.formLink {background-color:#fff; color:#000;}


.portrait {width: 200px;}

.formAbsatz {margin:30px 0 6px 0;}

div#kopfKram {padding:220px 0px 0 0;  max-width:1480px;}

div#wrap {text-align: left; margin:40px auto 0 auto; max-width:1480px;}

#sm {text-align: center; background-color:yellow; padding:20px 0; font-size: 0.7em;}

.inhalt img {max-width: 900px;}
section#was {background-color: #000; border:solid 1px transparent;}
section#was li {list-style-type: none;}
section#was li span {background-color:#fff; padding:3px 50px 5px 4px; margin:10px 0 20px 0px; display:inline-block; font-weight:bold; font-size:3em;}

section#startText div.inhalt {padding-bottom:0px;}


/*--- slideshow ---*/
  .container {
      width: 100%;
      height: 580px;
      position: relative;

    }

    .container .other-content {
      position: absolute;
      top: 0px;
      right: 10%;
      z-index: 2;
        text-align:right;
        width:100%;

    }

    .container .slide {
      z-index: 1;
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      height: 100%;
      transition: opacity 1s ease-in-out;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0;
    }

    .container .slide.show {
      opacity: 1;
    }


/*---- POPUP ----*/
.simplePopup {
  display: none;
  position: fixed;
  border: 4px solid #000;
  background: #fff;
  z-index: 3;
  color:#000;
  padding: 12px;
  width: 70%;
  min-width: 70%;
}

.simplePopupClose {
  float: right;
  cursor: pointer;
  margin-left: 10px;
  margin-bottom: 10px;
}

.simplePopupBackground {
  display: none;
  background: #000;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
/* -------------------------------- */


/*---------------- FORMULAR */
section#formular {background-color: #000; color:#fff; font-size: 0.9em; margin-top:0px;}

#formWrap { max-width: 800px; margin:0 auto; display:block; padding-top:40px;}
label span {display:none;}
input, select {width:100%;}

/* remove standard-styles */
input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border:none;
  border-radius: 0;
  font-size: 1em;
  width: 100%
} 

/* graceful degradation for ie8 */
input[type='checkbox'],
input[type='radio'] {
  width:auto;
  float:left;
  margin-right: .75em;
  background:transparent;
  border:none;
}

input[type='checkbox']:checked,
input[type='checkbox']:not(:checked),
input[type='radio']:checked,
input[type='radio']:not(:checked) {
  background: transparent;
  position: relative;
  visibility: hidden;
  margin:0;
  padding:0;
}

input[type='checkbox'] + label,
input[type='radio'] + label {
  cursor: pointer;
}

input, select, textarea {
   padding: 2px 16px; 
   height: 50px; 
   font-size: 0.7em;
   outline: none;
   margin:10px 0px;
   background-color:#141415;
   color:#fff;
   border:solid 1px #fff;
   letter-spacing:2px;
}

input[type='checkbox']:checked + label::before,
input[type='checkbox']:not(:checked) + label::before,
input[type='radio']:checked + label::before,
input[type='radio']:not(:checked) + label::before {
    content:' ';
    display:inline-block;
    width: 17px;
    height:17px;
    position: relative;
	top:4px;
    border: 1px solid #bbb;
    background: white;
    margin-right: 1em;

    box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
	margin-bottom: 0px;
}

input[type=radio]:checked + label::before,
input[type=radio]:not(:checked) + label::before {
  border-radius: 30px;
}

input[type='checkbox']:hover  + label::before,
input[type='radio']:hover  + label::before {
  background:#ddd;
  box-shadow: inset 0 0 0 2px white;
}

input[type='checkbox']:checked  + label::before,
input[type='radio']:checked  + label::before {
  background:yellow;
  box-shadow: inset 0 0 0 2px white;
}

textarea {
   padding: 20px; 
   font-size: 0.6em;
   outline: none;
   margin:10px 0;
   color:#fff;
   border:solid 1px #fff;
   letter-spacing:2px;
	width:100%;
	height:200px;
	    resize: none;
}


	

button.btn {border:solid 1px #fff; padding:5px 20px; text-transform: uppercase; cursor: pointer; background-color: #000; color:#fff;}
button:hover.btn {background-color: yellow; color: #000;}

#checker div {font-size: 0.9em; margin-bottom: 12px;}

/* ##################################################### mobil klein */

	@media (max-width: 640px){
		
		body {font-family: 'Ubuntu', sans-serif; font-size:1.2em;}
        
         .container {
      width: 100%;
      height: 180px;
      position: relative;

    }

    .container .other-content {
      position: relative;
      top: 20px;
      right: 20px;
      z-index:20;
        text-align:right;
        width:100%;
padding-bottom:20px!important;
    }
		
		.other-content img {width:60px;}

div#kopfKram {padding:0 0px 0 0;}
		
	div#wrap {margin:20px auto 0 auto; width:100%; padding:0px;}		
		#inhalt {padding:20px!important;}
		
	div#kopfKram {background-repeat: no-repeat; background-position: left 0px; padding:0px 0px 0 0;}
		
	h1 {text-transform: uppercase; font-size:2em; letter-spacing: 0px; margin-left: 10px; margin-bottom:10px; margin-top: 0px;}
	h2 {letter-spacing: 0px; font-size:1.2em; margin-top:20px;}
		
		p {margin-bottom:20px!important; font-size:0.8em;}
		address {margin:40px 0 20px 0;}
		
	#was ul {margin:30px 10px; padding:0px 0;}
	#was li span {padding:5px;  margin:0px 10px 0px 10px; font-size: 1em;}
		
		section {padding:0px; min-height:auto;}
		section#was {width:100%;}
		
		section#was li span {background-color:#fff; padding:0px 0px 0px 0px; margin:0px 10px 0px 0px; display:inline-block; font-weight:bold; font-size:1em;}
		section#was li {margin-bottom:10px;}
		
		img {width:100%;}
		img.portrait {width:150px;}
		
		.aufwaerts, .aufwaertsLi {display: none;}
		
		section p, section ul, section h2, section h3 {margin:0 10px;}
				section#formular {padding:0 20px;}
section#formular p {margin:0 0;}
		
		section#startText h2 {padding-bottom:10px;}

		
		div.inhalt {max-width: 1000px; margin:0 auto;}

		div.gelb {background-image: none; padding:0px 0 0px 0px;}
        
        .gelb, .gelbLi {border-top:solid 60px yellow;}

#arbeiten div.gelb img,  #arbeiten div.gelb:nth-child(odd) img {width:100%; float:none;}
#arbeiten div.gelb .text,   #arbeiten div.gelb:nth-child(odd) .text {width:94%; float:none; margin: 10px;}



		section#formular p.formAbsatz {margin:30px 0 16px 0; font-size:18px;}
		
		input[type='checkbox']:checked + label::before,
input[type='checkbox']:not(:checked) + label::before,
input[type='radio']:checked + label::before,
input[type='radio']:not(:checked) + label::before {

    width: 23px;
    height: 23px;

}

		

		
}