/*
Description: Responsives Coding fuer defakto.org
Autor: Ralph Segert
Relaunch: August 2024
Update: - 
Autor URI: https://segert.net
*/

/* - Globale Variablen: Deklarationen  */

:root {
  --step--2: clamp(0.72rem, 0.7994rem + -0.0907vw, 0.7813rem);
  --step--1: clamp(0.9rem, 0.9486rem + -0.0556vw, 0.9375rem);
  --step-0: clamp(1.125rem, 1.125rem + 0vw, 1.125rem);
  --step-1: clamp(1.35rem, 1.3333rem + 0.0833vw, 1.4063rem);
  --step-2: clamp(1.495rem, 1.4541rem + 0.2046vw, 1.6331rem);
  --step-3: clamp(1.9438rem, 1.8686rem + 0.3759vw, 2.1975rem);
  --step-4: clamp(2.3325rem, 2.2097rem + 0.6139vw, 2.7469rem);
  
  --opensans-regular: 'OpenSans Regular', sans-serif;
  --opensans-light: 'OpenSans Light', sans-serif; 
  --opensans-semibold: 'OpenSans SemiBold', sans-serif;
  --opensans-bold: 'OpenSans Bold', sans-serif;
  
  --ease-03: a 0.3s ease;
  --ease-05: border-radius 0.5s ease;
  --ease-shadow: box-shadow 0.5s ease;
  
  --ease-03-0: a 0 ease;
  --ease-05-0: border-radius 0 ease;
  
  --bgcolor: #000;
  
  --maxwidth: 1600px;
}


/* Resets */

* {
margin: 0;
padding: 0;
word-break: break-word;
overflow-wrap: break-word;
}

* {
	 box-sizing: border-box;
}

*, *::before, *::after {
box-sizing: border-box; 
}


body {
  margin: 0;
  font-size: 16px;
  background: var(--bgcolor);
  font-family: var(--opensans-light);
}

table {
	 border-collapse: collapse;
	 border-spacing: 0;
}
th, td {
	 text-align: left;
	 vertical-align: top;
}

img, fieldset { 
  border: 0; 
}

strong {
	font-family: var(--opensans-semibold);
}

a {
	border: 0;
	text-decoration: none;
	transition: transform 0.3s ease;
}

.hinweis {
	background:#fff;
	color:#000;
	padding:3em 0;
	height:80px;
	margin-left:100px;
	margin-right:100px;
	text-align:center;
	line-height:34px;
}

.hinweis a {
	color:#c00;
}




.contentteam a, .contentteam a:visited { 
	color: #fff;
}

.content .contentteam a:hover { 
	border: 0;
	text-decoration: none;
}

.content .card-text:hover { 
	text-decoration: none;
	color: #ccc;
}



.content h3 a, .content h3 a:visited {
  color:#3baa36;
}

.abschnitt5 p a, .abschnitt5 p a:visited {
  color: #2000ce;
  border-bottom: 1px #fff solid;
}



.abschnitt a:hover, .abschnitt5 p a:hover {
  color: #3baa36;
  border-bottom: 1px #fff solid;
}

.cf::after {
  content: " ";
  display: block;
  clear: both; 
}

.visually-hidden {
	 position: absolute;
	 width: 1px;
	 height: 1px;
	 margin: -1px;
	 padding: 0;
	 overflow: hidden;
	 clip: rect(0, 0, 0, 0);
	 border: 0;
}



/* TYPOGRAFIE */



/* KACHELN */



/* Flip-Container */
.flip {
  height: 230px;
  width: 100%; 
  perspective: 1500px;
  position: relative;
  cursor: pointer;
}

/* Dreh-Container */
.turnaround {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.4s;
  transform-style: preserve-3d;
}

/* Dreh-Effekt auf Hover */
.flip:hover .turnaround {
  transform: rotateY(180deg);
}

/* Vorder- und Rückseite */
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  color: white; 
}

.front {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  z-index: 20;
  font-size: 1.7em;
  letter-spacing: 0;
  background-color: #3AAA35;
  background-size: cover; 
  background-position: center;
  backface-visibility: hidden; 
  position: absolute;
  width: 100%;
  height: 100%;
}


/* Extraklassen für spezifische Hintergrundbilder */
.front-presse {
  background-image: url('https://defakto.org/images/hm-presse.png');
}

.front-engagement {
  background-image: url('https://defakto.org/images/hm-engagement.webp');
}

.front-premieren {
  background-image: url('https://defakto.org/images/hm-premieren.webp');
}


.front-presse-sw {
  background-image: url('https://defakto.org/images/hm-presse-sw.webp');
}

.front-engagement-sw {
  background-image: url('https://defakto.org/images/hm-engagement-sw.webp');
}

.front-premieren-sw {
  background-image: url('https://defakto.org/images/hm-premieren-sw.webp');
}

.front-team-sw, .front-standorte-sw, .front-konzepte-sw {
 background-color: #282828;
}

.back {
  flex-direction: column;
  transform: rotateY(180deg);
  z-index: 10;
  backface-visibility: visible;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: #282828; 
}
  

.flip:hover .front {
  opacity: 0;
  transition: 400ms; 
}

.flip .front {
  transition: 400ms;
}


.noflip {
transform: none;
 transform-style: flat;
}

.noflip:hover .front {
opacity: .6;
}

.noflip:hover .front-premieren, 
.noflip:hover .front-engagement, 
.noflip:hover .front-presse, 
.noflip:hover .front-solution, 
.noflip:hover .front-standorte,
.noflip:hover .front-team,
.noflip:hover .front-konzepte {
  opacity: 1;
}


.front p {
  padding-bottom: 32px;
}

.back h2 {
  text-align: center;
  font-size: 1.8em;
  letter-spacing: 1px;
  color: #aaa;
  padding-bottom: 2%;
}


.back p {
  font-family: var(--opensans-regular);
  line-height: 1.7em;
  font-size: 1.2em;
  letter-spacing: 1px;
  text-align: center;
  color: #aaa;
  padding: 0 8% 0 8%;
}

.textklein p {
	font-size: 1em;
	letter-spacing: 0;
	line-height: 1.6em;
}


/* Haupt-Flex-Container */
.flex-container {
  font-family: var(--opensans-light);
  display: flex;
  flex-wrap: wrap; 
  max-width: 1232px;
  margin: 0 auto;
  padding-top: 30px;
}

/* Flex-Container für große Kacheln */
.large-tiles {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

/* Flex-Container für kleine Kacheln */
.small-tiles {
  display: flex;
  flex-direction: column; 
}

.tile {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  color: white;
  height: 230px; 
  text-align: center;
}

.leer {
  background-color: #3AAA35; 
}

.large {
  display: flex;
  width: 31.2%;
  min-width: 200px;
  margin: 0 2.1% 22px 0;
}

.large img {
  width: 100%;
  height: auto;
}

.small {
  display: flex;
  font-size: 1.4em;
  min-width: 200px;
  margin-bottom: 22px;
  background-color: #282828;
  padding-bottom: 33px;
}

.small:hover {
  background-color: #1B1B1D;
  transition: ease-in .3s;
}

.grey {
  background-color: #282828;
}

.green {
  background-color: #3AAA35;
}

.green:hover 
 {
  background-color: #3AAA35;
}


/* CONTENTBEREICHE */

.contentteam figure {
	width: 34%;
	height: auto;
	float:left;
	margin: 12px 20px 2px 0;
	padding:0;
}


/* Flex-Container für die Unterseite */

.unterseite {
  display: flex;
  flex-direction: column;

}

/* Obere Kachelreihe für Logo, Premieren und Standorte */

.unterseite .top-row {
  display: flex;
  width: 100%;
  max-width: 1032px;
}

/* Content und Spalten */

.content-and-columns {
  display: flex;
  width: 100%;
}

/* Linke Kachelreihe */

.unterseite .left-column {
  display: flex;
  min-width: 26.18%;
  flex-direction: column;
  margin-right: 22px;
}

.left-column .large {
  width: 100%;
  min-width: 200px;

  margin: 0 2.1% 22px 0;
}

/* Inhaltsbereich in der Mitte */

.unterseite .content {
  width: 62.9%; 
  min-width: 400px;
  background-color: #fff;
  margin-right: 22px;
}

/* Rechte Kachelreihe */

.unterseite .small-tiles {
  display: flex;
  flex-direction: column;
  width: 200px;
}

.unterseite .tile.small {
  height: 197px; 
  margin-bottom: 22px;
}


.content {
  width: 100%;
  max-width: 810px;
}

.contentstart {
  width: 100%;
  max-width: 1010px;
}


/* Teamcards Styling */

.teamcards {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* Links ausgerichtet */
  width: 100%;

}

.card {
  width: 33.333333%;
  text-align: left;
}

.card img {
  width: 99%;
  height: auto;
  height: 248px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  transition: filter 0.5s ease, opacity 0.5s ease;
object-fit: cover;
}

.content .contentteam img:hover { 
	opacity: .7;
	
}


.card-text {
  display: flex;
  height: 50px;
  justify-content: center;
  align-items: center;
  font-family: var(--opensans-light);
  font-size: .9em;
  color: #fff;
  background-color: #333;
  margin-top: -3px;
  border-right: 2px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  transition: color 0.5s ease; /* Weicher Übergang für die Textfarbe */
}

.card img:last-of-type {
	border-right: 0;
}


.teamcards .card:nth-child(3n) .card-text {
  border-right: 1px solid #ccc; 
  margin-left: -1px;
}


/* Hover-Effekt für Bild und Text: Beides beeinflusst das andere */
.card:hover img {
  filter: sepia(100%); /* Sepia-Effekt beim Hover */
  opacity: 0.7; /* Bildtransparenz */
}

.card:hover .card-text {
  color: #45D83E; /* Textfarbe ändert sich beim Hover über die Karte */
}

.card-text:hover {
  color: #45D83E; /* Textfarbe ändert sich auch, wenn man direkt über den Text fährt */
}

.card img:hover {
  filter: sepia(100%); /* Sepia-Effekt, wenn man über das Bild fährt */
}


/* Flex-Container für Slider */

.slidercard {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: #3AAA35; 
   color: #fff; 
   padding: 8% 9% 8% 9%;
   margin-right: 1px;
   margin-left: 1px;	
   font-size: 1.05em;
   min-height: 180px;
}

.cardsolution {
  
}

.details .slidercard p {
	line-height: 1.8em;
}

.details .cardsolution p {
	line-height: 1.6em;
}

.details  .cardintro {
	font-weight: bold;
	line-height: 1.8em;
	font-size: 1em;
}

.arabic {
	align-items: flex-end;
	justify-content: flex-end;
	text-align: right;
}

.buttoncenter {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	margin-block-start: 3%;
	margin-block-end: 4%;
	 
}

.button2 {
  border-radius: 0;
  border-style: solid;
  border-width: 0;
  cursor: pointer;
  margin: 0 1px 0 1px;
  position: relative;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  padding: .7rem 4rem .75rem 4rem;
  font-size: 1rem;
  background-color: #008CBA;
  border-color: #007095;
  color: #fff;
  transition: background-color 300ms ease-out;
  outline: none; /* Entfernt die Standardumrandung bei Fokus */
	 user-select: none; /* Verhindert das Auswählen und Bearbeiten des Textes */
}

.button2.secondary {
  background-color: #e7e7e7;
  border-color: #b9b9b9;
  color: #333;
}




/* Flex-Container für Slider */

.slider-start {
  display: flex; 
  width: 100%; 
}

/* Bilder im Slider */

.slider-start img {
  width: 100%; 
  height: auto; 
}


.sublinestart p {
  font-size: .9em;
  letter-spacing: 1px;
  color: #aaa;
  margin-block-start: 4%;
  margin-block-end: 8%;
}

.sublines {
	text-align: right;
}

.sublinestart a {
  color: #fff;
  text-decoration: none;
}

.partner {
  margin-top: 1%;
  margin-block-end: 12%;
  padding-top: 2%;
  padding-right: 7%;
  text-align: left;
  
}

.partner .azav img {
  width:11%;height:auto;margin-left:3%;}
  
.partner .tatu img {width:16.5%;height:auto;margin-left:1%;}

.partner .help2 img {width:21.5%;height:auto;margin-left:1%;}

.partner .help3 img {width:12%;height:auto;margin-left:1%;}

.partner .txt img {
  width:16%;height:auto;margin-left:3%;}



.contentheader{
display: flex;
flex-direction: column;
justify-content: center;
  border:solid 1px #fff;
  min-height:168px;
  background-color:#3baa36;

}
  
  .h1header {
	 font-size:2.2em;
	 color:#fff;
	 text-align:center;
	 font-weight:normal;
  }
  
  .jobheader {
		margin-block-start: 4%;
	 }
	 
	 
  .h1premiere{font-size:1.8em;margin:7% 12% 2% 12%;line-height:1.6em;}
  
  .pheader{font-size:1.3em;color:#fff;text-align:center;}
  
  .pheaderemail {
	  margin-block-start: 1%;
	  font-size:1em;
	  color:#fff;
	  text-align:center;
  }

	.pheaderemail a, .pheaderemail a:visited {
		  color: #fff;
		  text-decoration: none;
	  } 
	  
	.pheaderemail a:hover {
		  color: #eee;
		  text-decoration: auto;
	  } 
	  
	    
  .pheaderemail2 {
	  font-size:1em;
	  color:#fff;
	  text-align:center; 
	  margin-top: 2.5%;
	  margin-bottom:5%;
  }
  
  #accordion {
    float: left;width:100%;
  }
  
  .accordion-header {
    padding-top: 1%;
    padding-bottom: 1%;
    cursor: pointer;
    border: solid 1px #fff;
    border-top: 0;
    background: #ddd;
    text-align: left;
    font-family: 'OpenSans-Regular', Helvetica, Arial, sans-serif;
  }
  
  .accordion-header:hover {
    background: #444;
    transition: .8s;
  }
  
  .accordion-header:hover h2 {
    color:#fff;transition:.4s;
    
  }
  

  
  .unterzeile {
    display: block; 
    margin-left: 12.5%; 
    margin-top: 1%;
  }
  
  .focus, .focus h2{color:#fff;background:#444;}
  
  .focus h2:before{content:"–";font-size:1.2em;padding:0 5% 0 5.3%;}
  
  .focus h2 span{display:none;}
  
  .accordion-content{display:none;z-index:1;text-align:center;}
  
  .h2{font-size:.9em;color:#444;font-weight:normal;padding:3% 5% 2% 4%;}
  
  .h3{font-size:1.1em;color:#3baa36;text-align:center;padding:5.5% 0 1% 0;}
  
  .projekttyp{font-size:.9em;}
  
  .pkurzinfo{font-size:1em;color:#333;text-align:center;line-height:1.8em;}
  
  .openpfeil{color:#fff;padding:0 5% 0 5%;font-size:1.2em;}
  
  .pagination{font-family:'OpenSans-Light', Helvetica, Arial, sans-serif;text-align:center;padding:8% 3% 9% 3%;font-size:1em;color:#fff;background-color:#3baa36;border:1px solid #fff;border-top:0;}
  
  .zaehler{font-family:'OpenSans-Light', Helvetica, Arial, sans-serif;text-align:center;padding:4.5% 3% 5% 3%;margin-top: 73px;font-size:1em;color:#fff;background-color:#333;border:1px solid #fff;}
  
  .zaehlerp {font-family:'OpenSans-Light', Helvetica, Arial, sans-serif;text-align:center;padding:4% 3% 0% 3%;font-size:.97em;color:#fff;}
  
  
  .pagination a{color:#fff;border:1px solid #fff; padding:2px 9px 2px 9px; margin:0 5px 0 5px;}
  
  .pagination a:hover{color:#000;border:1px solid #000;transition:.4s;}
  
  .pagi2 {padding:6% 3% 6% 3%;border-top:13%;}
  
  #accordion .button{width:28%;margin:2% 36% 6% 36%;border:1px solid #fff;box-shadow:4px 4px 0 #ccc;}
  
  #accordion .button a{width:100%;text-align:center;background-color:#3baa36;color:#fff;font-size:1em;display:block;padding:4% 0 5% 0;transition:.4s;border-bottom:0;}
  
  #accordion .button a:hover{background-color:#444;color:#fff;}
  
  .standortdetails{float:left;width:100%;padding-top:5%;}
  
  .standortdetails img{border:solid 1px #fff;margin-right:-1px;margin-bottom:-1px;}
  
  .abschnitt, .abschnitt2, .abschnitt3, .abschnitt5, .abschnitt7 {
	  padding-right:9%;
	  padding-left:10%;
  }
  
.abschnitt5 {
		 min-height: 560px;
	 }

.abschnittaktuell {
      min-height: auto;
    }  
  
  .standortdetails h2, .standortdetails h3{line-height:1.5em;font-size:1.2em;color:#3baa36;padding-bottom:2.5%;padding-top:5%;}
  
  .standortdetails p, .standortdetails ul{font-size:.9em;line-height:2em;}
  
  .standortdetails ul{list-style-type:square;}
  
  .abschnitt ul, .abschnitt ol, .abschnitt3 ul{padding-left:4%;}
  
  .abschnitt p, .abschnitt7 p {
	  padding-top: 1%;
	  padding-bottom: 1%;
  }
  
  .abschnitt ul, .abschnitt ol{padding-top:1%;padding-bottom:1%;}
  
  .abschnitt li{padding-top:1%;padding-bottom:2%;line-height:1.6em;}
  
  .abschnitt .untertitel{font-size:.8em;margin-top:-16px;}
  .abschnitt .bildstandort img{width:100%;}
  .abschnitt img{padding-top:3%;}
  .abschnitt2{padding-bottom:9%;}
  .abschnitt7{padding-bottom:9%;}
  .abschnitt2 h2{padding-bottom:4%;}
  .abschnitt2 ul{list-style-type:none;padding-left:.5%;}
  .abschnitt2 li{line-height:1.8em;}
  .abschnitt2 b{float:left;width:40%;font-weight:normal;color:#555;}
  
  .abschnitt2 span {
    float:left;
    width:60%;
    padding-bottom:2%;
    padding-left: 3%;
  }
  
  .abschnitt3{padding-top:5%;background-color:#dcdcdc;border:1px solid #fff;}
  .abschnitt3 h3{text-align:center;padding:5% 2% 4% 0;}
  .abschnitt3 ul{padding-top:2%;padding-bottom:10%;}
  .abschnitt3 li{padding-right:8%;padding-bottom:3%;}
  .premierehead{border:1px solid #fff;margin-bottom:-1px;background-color:#fff;padding-bottom:6%;}
  .premierehead h1{padding:7% 11% 8% 12%;background-color:#3baa36;color:#fff;line-height:1.8em;text-align:center;font-size:1.4em;margin:0 0 2% 0;}
  .premierehead h3{padding:5% 11% 3% 12%;}
  .premierehead p{padding:0 11% 2% 12%;}
  .premiere{padding:3% 11% 8% 12%;background-color:#fdfdfd;border:1px solid #fff;margin-bottom:-1px;}
  .standortdetails .h2plakat{line-height:1.5em;font-size:1.5em;color:#3baa36;padding-bottom:2.5%;padding-top:10%;text-align:center;}
  
  .backindex {
	  display: flex;
	  justify-content: center;
	  padding: 5% 5% 6% 5%;
	  font-size: 1.2em;
	  color: #fff;
	  background-color: #3baa36;
	  border: 1px solid #fff;
	  border-top: 0;
	  margin-top: auto;
  }
  
  .backindex a {
	  color:#fff;
  }
  
  .backindex a:hover {
	  color:#000;
	  transition:.4s;
  }
  
  .abschnitt ol li {font-size: .9em; line-height: 1.8em;}
  
  .thumbs {
  margin-top:-30px;
  }
  
  .thumbs img {
  width: 49.75%;
  }
  
  .thumbplakat {
  margin-top:7%;
	 }
	 
  .thumbplakat img {
  width: 49.75%;
  }
  
  .plakat {
  text-align: center;
  }
  .plakat img {
  width: 70%;
  height: auto;
  }
  
  .details {
  float:left;
  width:100%;
  padding-top:8%;
  }
  
  .detailsteam {
	display: flex;
	flex-direction: column;
	margin-top: auto;
	min-height: 770px;
	width: 100%;
	height: auto;
	 }
  
  .details img{padding-top:3%;}
  .details h2, .details h3{line-height:1.5em;font-size:1.2em;color:#3baa36;padding-bottom:2%;padding-top:3%;}
  .details h3{padding-top:6%;}
  .content .abschnitt7 h3, .content .abschnitt h3{padding-top:2%;}
  .details .pl a{border: 0;color:#3BAA36;}
  
  .details .pl{padding-top:14%;}
  
  .details .pl:first-of-type{padding-top:4%;}
  .content .abschnitt7 h2{font-size:1.2em;padding-top:6%;padding-bottom:0;}
  
  .content .abschnitt7 img, .content .abschnitt img{padding: 2% 0 4% 0; width:100%; height:auto;}
  
  .content .abschnitt h4{font-size:1em;padding-top:4%;padding-bottom:4%}
  
  
  
  .details p, .details ul{font-size:.9em;line-height:2em;}
  .details ul{list-style-type:square;}
  .details .abschnitt{padding-bottom:9%;}
  .abschnitt4{padding-top:8%;}
  .abschnitt4:first-of-type{padding-top:4%;}
  
  .abschnitt4 .button{width:40%;margin:5% 30% 4% 30%;border:1px solid #fff;box-shadow:4px 4px 0 #ccc;}
  .abschnitt4 .button a{width:100%;text-align:center;background-color:#3baa36;color:#fff;font-size:1em;display:block;padding:4% 0 5% 0;transition:.4s;border-bottom:0;}
  .abschnitt4 .button a:hover{background-color:#444;color:#fff;}
  
  .abschnittaktuell .button{width:40%;margin:5% 30% 4% 30%;border:1px solid #fff;box-shadow:4px 4px 0 #ccc;}
  .abschnittaktuell .button a{width:100%;text-align:center;background-color:#3baa36;color:#fff;font-size:1em;display:block;padding:4% 0 5% 0;transition:.4s;border-bottom:0;}
  .abschnittaktuell .button a:hover{background-color:#444;color:#fff;}
  
  .details .h2leitung{margin-top:6%;font-size:1.8em;}
  .abschnitt5{padding-top:2%;padding-bottom:7%;}
  .abschnitt5:first-of-type{padding-top:1%;}
  .abschnitt5 h2 a{border:0;}
  
  .abschnitt5 .infoline {
  font-size: 75%;
  color: #333;
  letter-spacing: .5px;
  padding: 1% 0 3.5% 0;
  }
  .abschnitt5 .infoline a {
  border-bottom: 0;
  }
  .abschnitt5 img {
  width: 100%;
  height: auto;
  }

  .abschnitt5 p {
	 padding-bottom: 1%;
	 }
	   
  .abschnitt6{text-align:center;padding:5% 0 5% 0;font-size:1.2em;color:#fff;background-color:#3baa36;border:1px solid #fff;border-top:0;margin-top:11%;}
  .abschnitt6 a{color:#fff;}
  .abschnitt6 a:hover{color:#000;transition:.4s;}
  
  
  .navaktuell {
    border-right: 1px solid #fff;}
    
  .navaktuell a {
    float :left;
    text-align: center;
    padding: 25px 0 25px 0;
    width: 33.333333333%;
    background-color: #333;
    color: #fff;
    border-bottom: 0;
  }

  .navaktuell2er a {
    width: 50%;
  }  
  
  .navaktuell a:nth-of-type(1) {
    border-left: 1px solid #fff;
  }
  
  .navaktuell:nth-child(1) a {
    border-right: 0px solid #fff;
  }
  
  .navaktuell a:hover {
    background-color: #3aa935;
    color: #fff;transition:.4s;
    border-bottom: 0;
  }
  
  .navaktuell .aktiv {
    background-color: #3aa935;

  }
  
  .navaktuell .aktiv:hover {
    color: #fff;
    border-bottom: 0;
  }
  
  .navstandorte {float:left;width:100%;border-top: 1px solid #999;margin-bottom:1px;
    
  }
  
  .navteams a {
	  width:33.33333333%;
  }
  
  .abschnitt-aktuell{padding-top:1%;min-height:258px;}
  .abschnitt5 h2 a{color:#3aa935;transition:.3s;}
  .abschnitt5 h2 a:hover{border:0;color:#000;}

legend{padding-top:8%;font-size:1.4em;padding-bottom:6%;font-weight:bold;color:#3baa36;}
  label{font-size:1em;width:32%;float:left;margin:1% 0 2% 0;}
  .content form p{width:100%;font-size:.8em;line-height:1.8em;float:right;}
  .content form p label{font-size:1.2em;}
  .content form .pAuswahl{font-size:1.2em;margin-top:3%;margin-bottom:2%;}
  .content form .pTextarea{margin-top:4%;}
  .textfeld{border:1px solid #3baa36;font-size:1em;padding:1%;width:55%;box-shadow:#ddd 1px 1px 1px;}
  .content .radiob{float:left;height:23px;margin:0 3% 7% 1%;}
  .content select{margin-top:.5%;border:1px solid #3baa36;font-size:1.1em;box-shadow:#ddd 1px 1px 1px;}
  .content textarea{margin-top:1%;border:1px solid #3baa36;font-size:1em;padding:1%;width:55%;box-shadow:#ddd 1px 1px 1px;height:100px;}
  
  .sendbutton {
	  padding:2.5% 5% 2.5% 5%;
	  border:1px solid #fff
	  ;color:#fff;
	  font-size:1.3em;
	  letter-spacing:1px;
	  background-color:#3baa36;
	  letter-spacing:1px;
	  width:57%
	  ;box-shadow:#aaa 1px 1px 1px
	  ;cursor:pointer;margin:2% 0 5% 0;
  }
  
  .sendbutton:hover {
	  color: #fff;
	  background-color: #4e4d4d;
	  border: 1px double #3baa36;
	  transition: 0.4s;
  }
  
  .suchbereich{border-right:1px solid #fff;border-left:1px solid #fff;text-align:center;padding:7% 0 6% 0;background-color:#282828;}
  .linieunten{border-bottom:1px solid #ccc;}
  .sb2{border-top:1px solid #fff;}
  
  .suchergebnis h2{padding:10% 8% 8% 6%;text-align:center;font-weight:400;color:#41a93e;}
  .suchergebnis a{border-bottom:0;}
  .suchergebnis ul{padding:0 8% 12% 19%;}
  .suchergebnis p{padding:0 6% 12% 6%;text-align:center;}
  .suchergebnis small{color:#555;}
  .suchergebnis li{list-style-type:square;color:#41a93e;padding-bottom:5%;line-height:1.5em;}
  
  .ergebnis2 ul {padding:8% 8% 8% 12%;}
  
  .suchbereich label{display:none;}
  .suchbutton{border:0px solid #fff;padding:1.5% 0 1.8% 0;border-radius:4px;color:#fff;background-color:#41a93e;font-size:1em;width:18%;cursor:pointer;}
  .suchfeld{width:57%;padding:1.8% 2% 1.8% 2%;font-size:.8em;border:0px solid #41a93e;background-color:#fff;margin-right:1%;}
  .cf:after{content:"";display:table;clear:both;}
  
  .check {
  margin: 0 2% 0 1%;
  }


/* Resets */

.nopadding {
	padding-top: 0
}


/* Responsives Verhalten */


/* Media Query für Viewport-Breite von 800px */

@media (max-width: 800px) {
  
  .textklein p {
    font-size: .8em;
    line-height: 1.3em;
  }
  
  .large {
	 display: flex;
	 width: 31.9333333%;
	 min-width: auto;
	 margin: 0 2.1% 2.1% 0;
  }
  
  .large:last-of-type {
	 margin-right: 0;
  }
  
  /* Linke Kachelreihe */
  .unterseite .left-column {
	 width: 100%;
  }
  
  
  .unterseite .content-and-columns {
	 flex-direction: column;
  }

  .unterseite .content {
	 order: -3;
	 width: 100%; 
	 margin: 0 2.1% 2.1% 0;
  }

  .unterseite .top-row {
	 order: -1; 
	 width: 100%;
  }

  .unterseite .small-tiles {
	 order: 3; 
	 width: 100%; 
  }
  
  
}


@media (max-width: 640px) {
  
 .textklein p {
  font-size: 1em;
  line-height: 1.6em;
}
  
.front-premieren {
  background-repeat: no-repeat;
  background-position: 90%;
}

.front-premieren-sw {
  background-repeat: no-repeat;
  background-position: 90%;
}

.front-presse {
  background-repeat: no-repeat;
  background-position: 90%;
}

.front-presse-sw {
  background-repeat: no-repeat;
  background-position: 90%;
}

.front-engagement {
  background-repeat: no-repeat;
  background-position: 94%;
}

.front-engagement-sw {
  background-repeat: no-repeat;
  background-position: 94%;
}


.unterseite .left-column {
    display: flex;
    flex-direction: row;
    width: 100%;
    order: 1;
    flex: auto;
}
  
.navteams {
  border-bottom: 1px solid #fff;
  margin-bottom: 5px;
  border-right: 0;
}

.navaktuell {
  border-right: 0;
  width: 100%;
}

.navaktuell a {
    font-size: .85em;
    padding: 25px 5px 25px 5px;
    border-bottom: 1px solid #fff;
}
  
.navaktuell a:nth-of-type(1) {
  border-left: 0;
}

.navaktuell:nth-child(1) a {
  border-right: 0;
}

.navaktuell a:hover {
  transition: 0;
}


.abschnitt5 {
   min-height: auto;
 }

.card {
  width: 50%;
  text-align: left;
  }

.card img {
  width: 100%;
  height: 190px;
  transition: none;
  border: 0;
  }
  
.card img:last-of-type {
    border: 0;
  }
  
.card-text {
  font-size: .85em;
  border: 0;
  border-bottom: 1px solid #fff;
  margin-top: -5px;
} 

.teamcards .card img:nth-child(1n) {
  border-right: 1px solid #fff; 
  margin-left: 0;
}

.teamcards .card:nth-child(1n) .card-text {
  border-right: 1px solid #fff; 
  margin-left: 0;
}

  .flex-container {
	 display: flex;
	 flex-direction: column; 
	 padding: 0;
  }
  
  .unterseite .content {
   width: 100%; 
   min-width: auto;
   margin: 0;
  }
  
  .large-tiles {
	 display: flex;
	 width: 100%;
	 order: 1;
	 flex: auto;
  }
  
  .small-tiles {
	 display: flex;
	 order: 3;
  }
  
.contentheader {
  width: 99.8%;
  border-left: 0;
  border-right: 0;
  padding-left: 4%;
  padding-right: 4%;
}

.contentstart {
  order: 2;
}

.contentstart2 {
  order: 4;
}

.slider-start {
  margin-bottom: 22px;
}

.large {
	 display: flex;
	 width: 100%;
	 margin: 0 0 22px 0;
  }

.unterseite .top-row .large-tiles {
   margin-top: 12px;
  }
  
.unterseite .top-row .large {
   display: flex;
   width: 31.1%;
   min-width: auto;
   height: 112px;
   margin: 0 0 12px 12px;
  }
  
.unterseite .left-column .large {
   display: flex;
   width: 45.6%;
   min-width: auto;
   height: 190px;
   margin: 3% 0 3% 3%;
  }



.unterseite .small-tiles {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  }

.unterseite .small-tiles a {
  display: flex;
  width: 45.6%;
  margin: 0 0 0 3%;
  flex-direction: row;
  }  
  
  
.unterseite a .small {
   font-size: .9em;
   padding-bottom: 20px;
  }
    
.unterseite .top-row .large:first-of-type {
   margin-left: 0;
  }
    
.unterseite .top-row .flip {
   height: 178px;
}



.unterseite .left-column .flip {
   height: 200px;
}
  
.unterseite .top-row .front, .unterseite .left-column .front {
  font-size: .9em;
}

.unterseite .top-row .front p {
  padding-bottom: 10px;
}
.unterseite .left-column .front p {
  padding-bottom: 20px;
}

.unterseite .left-column {
    min-width: 322px;
    margin-top: 22px;
}
    
  .large img {
	 width: 100%;
	 height: auto;
  }
  
  .small {
	 display: flex;
	 width: 100%;
	 font-size: 1.4em;
	 min-width: auto;
	 height: 197px; 
	 margin-bottom: 22px;
	 background-color: #282828;
	 padding-bottom: 33px;
  }

.thumbplakat img {
      width: 49.6%;
      margin-bottom: -5px;
  }
  
.h1header {
  font-size: 1.8em;
  margin-bottom: 4%;
}

.pheader {
    font-size: 1.1em;
    color: #fff;
    text-align: center;
}
  
.sublinestart p {
      text-align: center;
      margin-block-start: 8%;
      margin-block-end: 8%;
      padding: 2% 4% 6% 4%;
      font-size: .9em;
      line-height: 2em;
  }
  
.backindex {
      font-size: 1em;
  }
  
.partner {
      margin-block-end: 28%;
      padding: 2% 4% 8% 4%;
      text-align: center;
  }
  
.h2 {
      font-size: .85em;
      padding: 3% 5% 2% 4%;
  }
  
.unterzeile {
    display: block; 
    margin-left: 14%; 
    margin-top: 2%;
  }
  
.zaehlerp {
  font-size: .85em;
}

.abschnitt4 .button {
width: 80%;
margin: 5% 10% 4% 10%;
border: 1px solid #fff;
box-shadow: 4px 4px 0 #ccc;
}

#accordion .button {
    width: 60%;
    margin: 2% 20% 6% 20%;
}

#accordion .button a {
    font-size: .9em;
    padding: 3% 0 4% 0;
}
  
.leer {
	display: none;
  }
  
}



/* -- STARTSEITE  */