@charset "utf-8";

@font-face {
  font-display: swap;
  font-family: 'Clarity City';
  font-style: normal;
  font-weight: 400;
  src: url('../webfonts/clarity-city-v3-latin-300.woff2') format('woff2'); 
}

@font-face {
  font-display: swap;
  font-family: 'Clarity City';
  font-style: italic;
  font-weight: 400;
  src: url('../webfonts/clarity-city-v3-latin-300.woff2') format('woff2'); 
}

@font-face {
  font-display: swap;
  font-family: 'Clarity City';
  font-style: normal;
  font-weight: 700;
  src: url('../webfonts/clarity-city-v3-latin-500.woff2') format('woff2'); 
}

@font-face {
  font-display: swap;
  font-family: 'Clarity City';
  font-style: italic;
  font-weight: 700;
  src: url('../webfonts/clarity-city-v3-latin-500italic.woff2') format('woff2'); 
}

@font-face {
  font-display: swap;
  font-family: 'Michroma';
  font-style: normal;
  font-weight: 400;
  src: url('../webfonts/michroma-v21-latin-regular.woff2') format('woff2'); 
}

html { 
	margin: 0px;
	min-height: 100%;
}
 
:focus {
	 outline:0; 
	 -moz-outline:0; 
} 

img {
	vertical-align: middle;
	width: 100%;
}

span,div {
	zoom: 1;
}			   

input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

a {
	zoom: 1;
	color: inherit;
}
	
a img {
	border-width: 0px;
}	   

a:hover  {
	color: inherit;
}

button { 
	appearance: none;
	border: none; 
	background: transparent; 
	color: inherit; 
	font: inherit; 
	padding: 0; 
 	cursor: pointer;
}

form {
	margin: 0px;
	padding: 0px;
}
	
sup { 
	vertical-align: baseline;
	position: relative;
	top: -0.5em;
	font-size: 70%;
}

ul {
	padding-left: 1.5em;
}

body {	 
	position: relative;
	margin: 0;
	padding: 0px;
	-webkit-text-size-adjust: none;
	font-family: "Clarity City", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
	background-color: white;
	color: #777777;
	height: 100%;
	overflow-x: hidden;
}	 

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/**** HEADER ****/

header {
	position: fixed;
	z-index: 999;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 96px;
	background-color: white;
	box-shadow: 0 5px 10px 0 rgba(50, 50, 50, 0.06);
}

header .logo {
	position: absolute;
	left: 42px;
	top: 2px;
	display: inline-block;
	width: 210px;
}	

header .mainmenu {
	position: absolute;
	right: 50px;
	top: 36px;
}

header .mainmenu ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

header .mainmenu .entry {
	position: relative;
	display: inline-block;
	margin-left: 30px;
	font-family: "Michroma",sans-serif;
	letter-spacing: 0.05em;
	font-size: 13px;
	line-height: 1;
	text-transform: uppercase;
	padding-bottom: 43px;
}

header .mainmenu .entry a { text-decoration: none; }
header .mainmenu .entry a:hover { color: #8fc685; }

header .submenu {
	position: absolute;
	left: -21px;
	top: 55px;
	background-color: white;
	border: 1px solid #e9e9e9;
	border-top: none;
	display: none;
}

header .mainmenu .entry:hover .submenu { display: block; }

header .submenu .subentry {
	display: block; 
	border-top: 1px solid #e9e9e9;
	padding: 13px 20px;
	white-space: nowrap;
	font-size: 0.9em;
}

/**** MOBILE MENU ****/

.mobilemenu-open { 
	position: absolute;
	right: 40px;
	top: 32px;
	width: 26px;
	height: 26px; 
	display: none; 
}

.mobilemenu-container {
	display: none;
}

.mobilemenu {
	display: none;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	height: 100%;
	background-color: white;
	padding: 80px 20px;
}

.mobilemenu .inner {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.mobilemenu ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	font-family: "Michroma",sans-serif;
	letter-spacing: 0.05em;
	font-size: 22px;
	line-height: 1.8;
	text-transform: uppercase;
}

.mobilemenu ul li a { text-decoration: none; }

.mobilemenu .open-submenu { display: inline-block; vertical-align: bottom; width: 1.5em; margin-left: 0em; margin-right: -1.5em; margin-bottom: -0.2em;}

.mobilemenu .submenu { padding-bottom: 10px; display: none; }

.mobilemenu .submenu .subentry {
	font-size: 0.6em;
	line-height: 1.1;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}


.mobilemenu .mobilemenu-close { 
	position: absolute;
	right: 42px;
	top: 26px;
	font-size: 28px;
	font-weight: bold;
}


/**** MAIN ****/

.main {
	position: relative;
	padding-top: 96px;
}


/**** IMAGE HEADER ****/

.image-header { position: relative; }

.image-header .headline {
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-family: "Michroma",sans-serif;
	font-size: 60px;
	font-weight: 700;
    font-synthesis: weight;
	letter-spacing: 0.05em;
	color: white;
}

.image-header .headline .small { font-size: 0.3em; margin-bottom: 0.5em; }

.image-header { height: 40vw; }
.image-header .slider { position: relative; width: 100%; height: 100%; }
.image-header .slider .entry {  display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.image-header .slider .entry:first-child { display: block; }

.image-header .slider .entry img { width: 100% !important; height: 100% !important; object-fit: cover; filter: brightness(0.85); }

.image-header .slidebutton { color: white; position: absolute; z-index: 20; top: 0; width: 50px; height: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; opacity: 0; transition: opacity 0.5s; }
.image-header .slidebutton:hover { opacity: 1; }
.image-header .slidebutton svg { width: 50%; }
.image-header .slidebutton.slide-left { left: 0; background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.2) 100%); padding-right: 20px; }
.image-header .slidebutton.slide-right { right: 0; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.2) 100%); padding-left: 20px; }

.image-header .slidedots { position: absolute; z-index: 20; bottom: 1vw; left: 25%; width: 50%; text-align: center; }
.image-header .slidedots .dot { display: inline-block; width: 8px; height: 8px; background-color: transparent; border-radius: 50%; border: 1.5px solid white; margin-left: 3px; margin-right: 3px; cursor: pointer; }
.image-header .slidedots .dot.sel { background-color: white; } 

.image-header .slider .entry .headline .logo-icon { display: inline-block; width: 150px !important; height: auto !important; object-fit: contain; filter: none; margin-top: 10px;}


/**** CONTENT ****/

.greyblock { 
	border-top: 1px solid #e9e9e9;
    background: #f9f8f8;
    border-bottom: 1px solid #e9e9e9; 
}

.greenblock { 
    background: #8fc685;
	color: white;
}

.textcontent { padding-left: 50px; padding-right: 50px; max-width: 1100px; margin: auto; }

.textcontent h1 { 
	font-family: "Michroma",sans-serif;
	letter-spacing: 0.03em;
	font-size: 24.2px;
	line-height: 1.3;
	text-transform: uppercase;
	margin-top: 1.2em;
	margin-bottom: 1.2em;
	color: #8fc685;
}

.textcontent h2 { 
	font-family: "Michroma",sans-serif;
	letter-spacing: 0.03em;
	font-size: 17px;
	line-height: 1.3;
	text-transform: uppercase;
	margin-top: 1.5em;
	margin-bottom: 1.2em;
	color: #8fc685;
}

.textcontent h3 { 
	font-family: "Michroma",sans-serif;
	letter-spacing: 0.03em;
	font-size: 13px;
	line-height: 1.3;
	text-transform: uppercase;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

.textcontent p { max-width: 980px; }

.textcontent li { margin-bottom: 0.3em; }

.textcontent .image {
	float: right;
	width: 48%;
	margin-left: 4%;
	margin-top: 0.5em;
}

.textcontent .image.wide { width: 65%; }

.textcontent .image img { margin-top: 0.5em; margin-bottom: 0.5em; }

.textcontent hr { clear: both; border: none; border-bottom: 1px solid #e9e9e9; padding-top: 1em; }

.intro .textcontent { padding-top: 8px; padding-bottom: 28px; }
.intro .textcontent h1 { margin-bottom: 0.7em; }
.intro .textcontent p { margin-top: 0.6em; margin-bottom: 0.6em; }
.intro .textcontent a { text-decoration: none; }
.intro .textcontent a:hover { text-decoration: underline; }
.mainblock .textcontent { padding-top: 30px; padding-bottom: 60px; }
.mainblock .textcontent a { text-decoration: none; color: #8fc685;}
.mainblock .textcontent a:hover { text-decoration: underline; }

.kennzahlen { display: flex; padding-top: 11px; padding-bottom: 16px; }
.kennzahlen .entry { flex: 0 0 33.33%; text-align: center; }
.kennzahlen .entry .zahl { font-size: 36px; font-weight: bold; }
	
.fachgebiete .grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; margin-top: 50px; margin-bottom: 70px;  }
.fachgebiete .grid .entry {  }
.fachgebiete .grid .entry .gridimage { display: block; text-decoration: none; position: relative; border: 1px solid #e9e9e9; overflow: hidden;}
.fachgebiete .grid .entry .gridimage img { transform: scale(1); transition: transform 800ms ease; }
.fachgebiete .grid .entry .gridimage:hover img { transform: scale(1.1); transition: transform 1000ms ease; } 
.fachgebiete .grid .entry .gridimage h2 { 
	box-sizing: border-box; 
	width: 100%; 
	position: absolute; 
	bottom: 0; 
	left: 0; 	
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.7) 100%); 
	margin: 0; 
	color: white; 
	padding: 15px 10px 5px 10px; 
	font-size: 17px;
}
.fachgebiete .grid .entry .gridcaption { font-size: 0.9em; padding: 10px; }
.fachgebiete .grid .entry .gridcaption p { margin: 0; }

/**** REFERENZEN ****/

.referenzen {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: #777;
    font-size: 0.9em;
    line-height: 1.3;
	margin-top: 25px;
}

.referenzen th:nth-child(1), .referenzen td:nth-child(1) { width: 10%; }
.referenzen th:nth-child(2), .referenzen td:nth-child(2) { width: 50%; }
.referenzen th:nth-child(3), .referenzen td:nth-child(3) { width: 20%; }
.referenzen th:nth-child(4), .referenzen td:nth-child(4) { width: 20%; }

.referenzen thead {
    background: #91c486;
}

.referenzen th {
    padding: 8px 12px;
    text-align: left;
	font-size: 0.85em;
    font-weight: 400;
	color: white; 
}

.referenzen td {
    padding: 8px 12px;
    vertical-align: middle;
}

.referenzen tbody tr:nth-child(odd) {
    background: #f4f3f3;
}

.referenzen tbody tr:nth-child(even) {
    background: #fff;
}

/**** AKKORDEON ****/

.akkordeon-element {
	clear: both;
	padding-top: 1.5em;
}

.akkordeon-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
	width: 100%;
	background-color: #8fc685; 
	color: white;
	padding: 10px 10px 10px 20px; 
}

.akkordeon-element.collapsed .akkordeon-head { 	background-color: #e9e9e9; color: #777777; }
.akkordeon-element.collapsed .akkordeon-head:hover { background-color: #8fc685; color: white; }

.akkordeon-head h2 { margin: 0; color: inherit; text-transform: none; }

.akkordeon-head .expand { font-size: 36px; line-height: 0.5; display: none; }
.akkordeon-head .collapse { font-size: 36px; line-height: 0.5; margin-top: -0.1em; }

.akkordeon-element.collapsed .akkordeon-head .expand { display: block; }
.akkordeon-element.collapsed .akkordeon-head .collapse { display: none; }

.akkordeon-body .inner { padding: 20px; }

.akkordeon-body .image { padding-bottom: 3em; }

.gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 1.5em; margin-bottom: 2em; }

/**** FOOTER ****/

footer {
	font-family: "Michroma",sans-serif;
	letter-spacing: 0.025em;
	font-size: 13.8px;
	line-height: 1.7;
	clear: both;
}

footer .adressblock {
	height: 240px;
	display: flex; 
	color: #bbbbbb;
	align-items: center;
}

footer .adressblock .textcontent {
	display: flex; 
	align-items: flex-start;
    justify-content: space-between;
	width: 100%;
}
footer .adressblock .textcontent .left { text-align: left; text-transform: uppercase;}
footer .adressblock .textcontent .center { text-align: center; }
footer .adressblock .textcontent .right { text-align: right; text-transform: uppercase;}

footer .adressblock .zt-logo { display: block; width: 130px; height: auto; margin: auto; margin-bottom: 16px; }

footer .adressblock a { text-decoration: none; }
footer .adressblock a:hover { color: #777777; }

footer .blackblock {
	height: 96px;
	position: relative;
	background-color: #222222;
	color: #d0d0d0;
	display: flex; 
	align-items: center;
    justify-content: center;
	width: 100%;
}

footer .blackblock a { text-decoration: none; }
footer .blackblock a:hover { color: white; }

footer .blackblock .trenner { display: inline-block; margin-left: 8px; margin-right: 8px; }

/**** SMALL SCREENS ****/

@media only screen and (max-width: 1200px) {	
	.fachgebiete .grid .entry .gridimage h2 { font-size: 1.37vw; }
}

@media only screen and (max-width: 1000px) {	
	header .mainmenu { display: none; }
	.mobilemenu-open { display: block; }
	.mobilemenu-container { display: block; }
	.image-header .headline { font-size: 46px; }
	.image-header .slidedots .dot { width: 6px; height: 6px; margin-left: 2px; margin-right: 2px; border: 1px solid white; }
	footer .adressblock { height: auto; padding-top: 30px; padding-bottom: 30px; }
	footer .adressblock .textcontent { flex-wrap: wrap; }
	footer .adressblock .textcontent .center { order: 3; flex: 0 0 100%; padding-top: 30px;}

}

@media only screen and (max-width: 860px) {	
	header { height: 75px; }
	header .logo { left: 24px; width: 160px; }	
	.mobilemenu-open { right: 30px; top: 24px; }
	.mobilemenu .mobilemenu-close { right: 32px; top: 17px; }
	.main { padding-top: 75px; }
	.image-header { height: 350px; }
	.image-header .headline { font-size: 5.8vw; }
	.image-header .slider .entry .headline .logo-icon { width: 112px !important; }
	.textcontent { padding-left: 30px; padding-right: 30px; }
	.fachgebiete .grid { grid-template-columns: repeat(2,1fr); gap: 3vw;  }
	.fachgebiete .grid .entry .gridimage h2 { font-size: 2vw;}
	.akkordeon-head { padding-left: 15px; }
	.akkordeon-body .inner { padding-left: 15px; padding-right: 15px; }
	.gallery { grid-template-columns: repeat(2,1fr); gap: 1.2vw; }
	footer .blackblock { flex-wrap: wrap; height: 60px; padding-top: 30px; padding-bottom: 30px; }
	footer .blackblock .copyright { flex: 0 0 100%; text-align: center; }
	footer .blackblock .trenner-1 { display: none; }
}

@media only screen and (max-width: 700px) {
	.kennzahlen { flex-direction: column; gap: 15px; }
	.kennzahlen .entry { flex: 0 0 100%; text-align: center; }
}

@media only screen and (max-width: 640px) {
	.textcontent h1 { font-size: 20px;  }
	.textcontent h2 { font-size: 15px;  }
	.textcontent .image { float: none; width: 100%; margin-left: 0; padding-bottom: 0.5em;}
	.intro .textcontent h1 { margin-bottom: 0.8em; }
	.referenzen-container { max-width: 100%; overflow-x: auto; 	-ms-overflow-style: none; scrollbar-width: none; }
	.referenzen-container::-webkit-scrollbar { display: none; }
	.referenzen { font-size: 12px; min-width: 500px;  }
	footer .adressblock .textcontent .left { flex: 0 0 100%; text-align: center; }
	footer .adressblock .textcontent .right { flex: 0 0 100%; text-align: center; padding-top: 15px; }
}	

@media only screen and (max-width: 460px) {
	header .logo { left: 14px; }	
	.mobilemenu-open { right: 20px; }
	.mobilemenu ul { font-size: 19px; }
	.mobilemenu .mobilemenu-close { right: 22px; }
	.textcontent { padding-left: 20px; padding-right: 20px; }
	.textcontent h1 { font-size: 18px;  }
	.textcontent h2 { font-size: 13px;  }
	.fachgebiete .grid { grid-template-columns: 1fr; gap: 3vw;  }
	.fachgebiete .grid .entry .gridimage h2 { font-size: 4vw;}
	footer { font-size: 12px; }
	.akkordeon-body .inner { padding-left: 5px; padding-right: 5px; }
	.gallery { grid-template-columns: 1fr; gap: 1.2vw; }
	footer .adressblock .zt-logo { width: 100px; }
}