/*
Theme Name: SRP-Theme
Author: Jan Pferdmenges, KP&Z Werbeagentur GmbH
Author URI: http://www.kp-z.de/team.php
Description: Template für Stadtraumprojekt Architekten, Münster
Version: 2.0.11
License: commercial
*/

/* FARBEN

orange      #e53f17
Text		#707070	

*/

:root {
	--color-red: #e53f17;
	--color-text: #444;
    --color-grau: #d0d0d0;
    --color-bg-hell: #f0f0f0;
	--padding: calc(var(--unit) * 2);
	--me-color: cornflowerblue;
}


/* noto-sans-100 - 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: 200;
  src: url('fonts/noto-sans-v39-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-500 - 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: 500;
  src: url('fonts/noto-sans-v39-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-700 - 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: 700;
  src: url('fonts/noto-sans-v39-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {padding: 0; margin:0; font-size: 16px; background: white;  height: 100%;}
/*body {padding: 0; margin:0;font-family: 'Hind', sans-serif; font-weight: 300; font-size: 16px; line-height: 1.6em; overflow-x: hidden; color: var(--color-text);}*/
/*body {padding: 0; margin:0;font-family: "Sarabun", sans-serif; font-weight: 100; font-size: 16px; line-height: 1.6em; overflow-x: hidden; color: var(--color-text);}*/
body {padding: 0; margin:0;font-family: "Noto Sans", sans-serif; font-optical-sizing: auto; font-style: normal;   font-variation-settings: "wdth" 100; font-weight: 200; font-size: 16px; line-height: 1.6em; overflow-x: hidden; color: var(--color-text);}
section {padding: 75px 0;}
h1 {margin-bottom: 1.6rem; padding-left: 20px; position: relative; font-weight: 500;}
h1::before {content: ' '; display: block; position: absolute; width: 12px; height: 12px; left: 0; top: 7px; background-color: var(--color-red); }
h2 {font-size: 1.6rem; font-weight: 200; margin-bottom: 30px; line-height: 1.1em;}
h3, .h3 {font-size: 1.3rem; font-weight: 200;}
h3+h6 {font-size: 1rem; font-weight: 700; margin-top: -0.2rem; margin-bottom: 2rem;}
h5 {margin-top:2rem;}
a {color:var(--color-text); text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--color-red);}
.h3 { text-decoration: none; }
a:hover {color:var(--color-red);}


/*
**		TopBar und Primary Navigation
*/

header {min-height: 65px; position: relative;}
#Topbar {height: 90px; position: absolute; top: 0; left:0; width: 100%; background-color: white; padding: 0 15px;z-index: 5; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
.frontpage #Topbar {height: 120px; position: absolute; top: 0; left:0; width: 100%; background-color: white; padding: 0 15px;z-index: 5; background: linear-gradient(180deg, rgba(255,255,255,1) 10%, rgba(255,255,255,0.5) 66%, rgba(255,255,255,0) 100%);}
#Topbar > div {display: flex; align-items: center; flex-direction: column;}
#Topbar nav.desktopMenu {display: none; margin-top: 10px;}
#Topbar nav.desktopMenu > div > ul {display: flex; list-style: none; padding:0;}
#Topbar nav.desktopMenu > div > ul > li {display: block; padding-right: 13px; padding-left: 15px; position: relative; transition-duration: 300ms; padding-bottom: 10px;}
#Topbar nav.desktopMenu > div > ul > li::before {content: ' '; display: block; position: absolute; top: 6px; left:0; height: 9px; width: 9px; background-color: transparent;}
#Topbar nav.desktopMenu > div > ul > li > a {color: var(--color-text); font-size: 18px; font-weight: 700; text-decoration: none; letter-spacing: 0.05em;}
#Topbar nav.desktopMenu > div > ul > li > ul {background-color: white; padding: 5px 0; position: absolute; list-style: none; border: 1px solid #eee; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; left: -1px; top: 35px; display: none;}
#Topbar nav.desktopMenu > div > ul > li:hover > ul {display: block;}
#Topbar nav.desktopMenu > div > ul > li > ul > li {padding: 4px 20px; transition: 300ms;}
#Topbar nav.desktopMenu > div > ul > li > ul > li > a {text-decoration: none;}
#Topbar nav.desktopMenu > div > ul > li > ul > li.current_page_item > a {color: var(--color-red);}
#Topbar nav.desktopMenu > div > ul > li > ul > li:hover {background-color: var(--color-red);}
#Topbar nav.desktopMenu > div > ul > li > ul > li:hover > a {color: white;}
#Topbar nav.desktopMenu > div > ul > li.current_page_item::before, #Topbar nav.desktopMenu > div > ul > li.current-menu-parent::before{ background-color: var(--color-red);}
#Topbar nav.desktopMenu > div > ul > li:hover::before { background-color: var(--color-red);}
nav.mobileMenu {position: fixed; left:0; top: 0px;padding: 15px; width: 300px; min-height: calc(100vh - 0px); border-right: solid 1px #C0C0C0; z-index: 4; background-color: white; transition-duration: 300ms; transform: translateX(-100%); display: flex; justify-content: center; align-items: center;}
nav.mobileMenu > div > ul {padding: 0; text-align: center; list-style: none;}
nav.mobileMenu > div > ul > li:not(:first-child) {margin-top: 30px;}
nav.mobileMenu > div > ul > li > a {text-transform: uppercase; color: var(--color-text); text-decoration: none; display: inline-block; position: relative;}
nav.mobileMenu > div > ul > li.menu-item-has-children > a { padding-left: 6px;}
nav.mobileMenu > div > ul > li.menu-item-has-children > a::before { content: ''; display: block; width:11px; height: 11px; background-image: url("img/menu_pfeil2.svg"); background-size: cover; position: absolute; left: -10px; top: 6px; transition: 300ms;}
nav.mobileMenu > div > ul > li.current_page_item > a, nav.mobileMenu > div > ul > li.current-menu-parent > a { color: var(--color-red);}
nav.mobileMenu > div > ul > li.openMenu > a::before { transform: rotate(90deg);}
nav.mobileMenu > div > ul > li > ul {  list-style: none; padding:0; transition: 300ms; display:none; overflow: hidden;}
nav.mobileMenu > div > ul > li > ul > li {margin-top:10px; }
nav.mobileMenu > div > ul > li > ul > li > a {text-decoration: none; }
nav.mobileMenu > div > ul > li > ul > li.current_page_item > a { color: var(--color-red);}
#MenuCheckbox {display: none;}
#MenuCheckbox:checked ~ nav.mobileMenu {transform: translateX(0);}
#MenuIcon img {width: 40px; height: auto; transition: 300ms; position: absolute; transform: translateX(-50%); }
#MenuIcon img:last-child {opacity: 0; }
#MenuIcon.openMenu img:first-child {opacity: 0;}
#MenuIcon.openMenu img:last-child {opacity: 1;}
#MenuIcon {padding-top: 10px; position: relative; height: 40px; display: inline-block;}
#Logo {display: block; margin-top: 10px;}
#Logo > img {width: 160px; height: auto;}

#HeaderBild > img {width: 100%; height: 100vh; object-fit: cover; display: block;}
#HeaderBild #Scrollpfeil {position: absolute; left:50%; bottom: 50px; transform: translateX(-50%); width: 50px; height: auto; opacity: 0; transition-duration: 300ms; -webkit-filter: drop-shadow(0px 0px 3px #222); filter: drop-shadow(0px 0px 3px #222); z-index: 10;}
#HeaderBild:hover #Scrollpfeil { opacity: 1; cursor: pointer;}
#HeaderBildSmall > img {width: 100%; height: auto; display: block;}


/*
**		SLIDER
*/

#HeaderBild > div.slider {height: 100vh; width: 100%; overflow: hidden; position: relative;}
#HeaderBild > div.slider > ul {height: 100%; position: relative; width: 100%; overflow: hidden; list-style: none; padding:0; margin:0; overflow: hidden;}
#HeaderBild > div.slider > ul > li {height: 100%; width: 100%; width: calc(100% + 10px); display: block; position: absolute; transition-duration: 2000ms; border-left: 10px white solid; transform: translateX(100%); z-index: 0; overflow: hidden;}
#HeaderBild > div.slider > ul > li > span{height: 100%; width: 100%; display: block; background-position: center center; background-size: cover; background-color: #d0d0d0; background-repeat: no-repeat; transition-duration: 2000ms; transform: translateX(-80vw);}
#HeaderBild > div.slider > ul > li.aktuell {transform: translateX(-10px); z-index:2; }
#HeaderBild > div.slider > ul > li.aktuell > span {transform: translateX(0); transition-duration: 2000ms;}
#HeaderBild > div.slider > ul > li.aktuell.slideOut {transform: translateX(-100%); z-index:1; }
#HeaderBild > div.slider > ul > li.noTransition {transition-duration: 0ms!important; dispay:none;}
#HeaderBild > div.slider > ul > li.aktuell.slideOut > span {transform: translateX(80vw); }

#HeaderBild > div.slider > div.sliderPunkte { position: absolute; right: 15px; bottom: 15px; z-index: 4; display: none;}
#HeaderBild > div.slider > div.sliderPunkte > span{ margin-left: 15px; margin-bottom:2px; display: inline-block; width: 12px; height: 12px; background-color: var(--color-grau); border: 2px solid white; transition: 300ms; }
#HeaderBild > div.slider > div.sliderPunkte > span.active{ background-color: var(--color-red); width: 16px; height: 16px; margin-bottom:0;}

#HeaderBild > div.slider > ul > li > div {width: 90%; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding: 15px; text-align: center; background-color: rgba(255,255,255,0.85); border-radius: 15px 15px 0 0;}

/*
#HeaderBild > div.slider {height: 100vh; width: 100%; overflow: hidden; position: relative;}
#HeaderBild > div.slider > ul {height: 100%; position: relative; width: 1000%; overflow: hidden; list-style: none; padding:0; margin:0;}
#HeaderBild > div.slider > ul.transition {transition-duration: 1000ms;}
#HeaderBild > div.slider > ul > li {height: 100%; width: 10%; display: inline-block; position: relative;background-position: center center; background-size: cover; background-color: #d0d0d0;}
#HeaderBild > div.slider > ul > li > div {width: 90%; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding: 15px; text-align: center; background-color: rgba(255,255,255,0.85); border-radius: 15px 15px 0 0;}
#HeaderBild > div.slider > ul > li > img.landscape {width: 100%; height: 100%; object-fit: cover;}
#HeaderBild > div.slider > ul > li > img.portrait {width: 100%; height: 100%; object-fit: contain;}

#HeaderBild > div.slider > div.sliderPunkte { position: absolute; right: 15px; bottom: 15px;}
#HeaderBild > div.slider > div.sliderPunkte > span{ margin-left: 15px; margin-bottom:2px; display: inline-block; width: 12px; height: 12px; background-color: var(--color-grau); border: 2px solid white; transition: 300ms; }
#HeaderBild > div.slider > div.sliderPunkte > span.active{ background-color: var(--color-red); width: 16px; height: 16px; margin-bottom:0;}
*/

.alternativeHeader img {display: block; width: 100%; height: auto; padding-top: 90px;}


/*
**		Projekte Übersicht
*/


.jhpMasonryContent2Column {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jhpMasonryContent3Column {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.jhpMasonryContent4Column {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; }

.jhpMasonryContent2Column > div > div {display: none; }
.jhpMasonryContent3Column > div > div {display: none; }
.jhpMasonryContent4Column > div > div {display: none; }

.jhpMasonryContent2Column > div.spalte1 {grid-column: 1; }
.jhpMasonryContent2Column > div.spalte2 {grid-column: 2; }


.jhpMasonryItem {margin-bottom: 10px; position: relative; transition: opacity 500ms; display: block; color: var(--color-text); overflow: hidden;}
.jhpMasonryItem > img {display: block; width: 100%; height:auto; transition-duration: 1000ms;}
.jhpMasonryItem:hover > img {transform: scale(1.2);}
.jhpMasonryItem.jhpMasonryHidden {opacity: 0;}
.jhpMasonryItem > .beschreibung {opacity: 0; transition: 1000ms; position: absolute; top:0; left:0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; color: white; z-index: 1;}
.jhpMasonryItem > .beschreibung::before {content: ''; opacity: 0.7; position: absolute; top:0; left:0; width: 100%; height: 100%; background-color: black; z-index: -1;}
.jhpMasonryItem:hover > .beschreibung {opacity: 1;}
.jhpMasonryItem > .beschreibung > .projektName {padding: 15px; height: 100%; align-content: center; text-align: center; }

/*
**		Footer
*/

footer {background-color: #c0c0c0; font-size: 16px; line-height: 1.5em; background-image: url("img/bg-footer-small.jpg"); background-size: cover; background-position: center; }

footer > div.container {display: grid; grid-gap: 15px; padding: 75px 15px;}
footer .footerLogo {display: none;}
footer .footerAdresse1, footer .footerAdresse2, footer div.telefon, footer div.fax, footer div.email {padding-left: 25px; position: relative;}
footer .footerAdresse1>div::before, footer .footerAdresse2>div::before, footer div.telefon::before, footer div.email::before, footer div.fax::before {content: ' '; position: absolute; left:0; top: 2px; display: block; width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat; background-position: left center;}
footer .footerAdresse1>div::before, footer .footerAdresse2>div::before {background-image: url("img/iconMap.svg");}
footer div.telefon::before {background-image: url("img/iconPhone.svg");}
footer div.fax::before {background-image: url("img/iconFax.svg");}
footer div.email::before {background-image: url("img/iconEmail.svg");top: 3px;}
footer .footerKontakt1, footer .footerKontakt2 {margin-bottom: 30px;}
footer .footerMenu { display: flex; flex-direction: column; justify-content: space-between;}
footer .footerMenu .footerSocial {display: inline-block; margin-top: 30px;}
footer .footerMenu .footerSocial a {display: inline-block; margin-right: 15px;}
footer .footerMenu .footerSocial a:last-child {margin-right: 0;}
footer .footerMenu .footerSocial a img {display: block; width: 25px; height: 25px; object-fit: contain; transition-duration: 300ms;}
footer .footerMenu .footerSocial a:hover img {transform: scale(1.2);}

footer .kpzBar {background-color: #202020; font-size: 12px;color: #505050; line-height: 12px; padding: 5px 0; margin-top: -20px;}
footer .kpzBar a {color: #505050; text-decoration: underline; text-decoration-style: dotted; transition-duration: 300ms;}
footer .kpzBar a:hover {color: #C0C0C0;}

footer .menu {padding: 0;list-style: none;}
footer .menu > li {padding: 8px 0;}
footer .menu > li > a {color: var(--color-text); text-transform: uppercase; text-decoration: none;}



/*
**		Projekt Seite
*/

.weitereProjekte {display: flex; flex-wrap: wrap;}
.weitereProjekte > a{width: 47.5%; display: block; position: relative; margin-right: 5%; margin-bottom: 50px; overflow: hidden;}
.weitereProjekte > a:nth-child(2n){margin-right: 0;}
.weitereProjekte > a > div:first-child {position: absolute; width: 100%; height: 100%; top:0; left:0; z-index: 1;  color: white; padding: 10px; display: flex; justify-content: center; align-items: center; text-align: center; opacity: 0; transition-duration: 500ms;}
.weitereProjekte > a > div:first-child::before {position: absolute; width: 100%; height: 100%; top:0; left:0; z-index: -1; background-color: black; opacity: 0.7; content: '';}
.weitereProjekte > a:hover > div:first-child { opacity: 1;}
.weitereProjekte > a > div:last-child {margin-top: 75%; color: forestgreen;}
.weitereProjekte > a > img {width: 100%; height: 100%; object-fit: cover; position: absolute; top:0; left:0; transition-duration: 500ms; }
.weitereProjekte > a:hover > img {transform: scale(1.2);}

.projekt .wp-block-image > img {width: 100%; height: auto;}
.projekt .wp-block-table > table {width: 100%; border: 1px solid var(--color-text); line-height: 1.3rem;}
.projekt .wp-block-table > table tr > td {padding: 5px; vertical-align: top;}
.projekt .wp-block-table > table tr > td:first-child {padding-left: 10px;}
.projekt .wp-block-table > table tr > td:last-child {padding-right: 10px;}


/*
**		Aktuelles
*/


.aktuelles img.wp-post-image { width: 100%; height: auto;}

.aktuellesHeader h1 {padding-top: 0; margin-top: 30px;}



.aktuellesElement {margin-bottom: 75px; display: flex; flex-direction: column; color: var(--color-text);}
.aktuellesElement:last-child {margin-bottom: 0;}
.aktuellesElement:hover > div:first-child{ transform: scale(1.05);}
.aktuellesElement > div:first-child {aspect-ratio: 1/1; transition-duration: 300ms;}
.aktuellesElement > div:first-child img {aspect-ratio: 1/1; object-fit: cover; width: 100%; height:auto;display: block;}
.aktuellesElement > div:first-child a {display: block;}
.aktuellesElement > div:last-child {padding: 15px 0; box-sizing: border-box;}
.aktuellesElement > div:last-child a.h3 {padding-bottom: 15px; display: block;   font-size: 1.2rem; line-height: 1.5rem;}

.aktuellesElement .h3 {color: var(--color-red); margin-top: 20px;}
.aktuellesElement .moreInfo {display: flex; justify-content: space-between;}
.aktuellesElement .moreInfo > a {color: var(--color-red);}
.aktuellesElement .moreInfo > div {font-size: 12px;}



/*
**		Team
*/

.teamSpalten {display: grid; grid-template-columns: 1fr; grid-gap: 10px;}

.teamMember {width: 100%; aspect-ratio: 1/1; position: relative; z-index: 1; overflow: hidden;}
.teamMember a {color: white;}
.teamMember:hover .teamMemberBack, .teamMember.active .teamMemberBack  { opacity: 1; }
.teamMember:hover .teamMemberFront, .teamMember.active .teamMemberFront  {transform: scale(1.1);}
.teamMemberKarte {width:100%; aspect-ratio: 1/1;}
.teamMemberFront {width:100%; aspect-ratio: 1/1; z-index: 1; transition: 1000ms;}
.teamMemberFront img {width:100%; height: 100%; object-fit: cover; display: block;}
.teamMemberBack {width: 100%; height: 100%; background-color: transparent; color: white; padding: 15px; text-align: center; display: flex; flex-direction: column; justify-content: center; position: absolute; opacity: 0; transition: 1000ms; z-index: 1;}
.teamMemberBack::before {content: ''; width: 100%; height: 100%; background-color: black; position: absolute; z-index: -1; left:0; top: 0; opacity: 0.7;}
.teamMemberBack > *:last-child {margin-bottom: 0;}
.teamMemberBack > div:first-child {margin-bottom: 20px;}
.teamMemberName {font-weight: 700; font-size: 1.3rem;}
.teamMemberBezeichnung {font-size: 0.85rem;}



/*
**		Stellenangebote
*/

.stellenangebotElement {margin-top: 50px; margin-bottom: 50px;}
.stellenangebotElement h3 {color: var(--color-red); font-size: 1rem; text-transform: uppercase; font-weight: 700; margin-top: 20px;}
.stellenangebotElement .wp-block-image img {height: auto;}

ul.jobs {margin-top: 20px;}
ul.jobs > li > a {color: var(--color-red); font-weight: 700; font-size: 1.2rem;}
ul.jobs.srp > li::before {top: 7px;}



/*
**		Standorte
*/

#Map {height: 400px;}
#Map > div {height: 100%;}


/*
**		Kontaktformular
*/

.inputFeld {margin-bottom: 20px; position: relative; border-bottom: 1px solid var(--color-text); padding: 8px 0px 0 0px;}
.inputFeld.activeInput {border-bottom-color:  var(--color-red);}
.inputFeld label {position:absolute; top: 10px; color: #c0c0c0; left: 1px; transition-duration: 300ms;}
.inputFeld.filled label {position:absolute; top: -8px; font-size: 12px;}
.inputFeld input, .inputFeld textarea {width: 100%; outline: none; font-family: 'Hind', sans-serif; border: none; color: var(--color-text); padding-bottom: 0;}
.inputFeld.activeInput input, .inputFeld.activeInput textarea {color: var(--color-red);}
.inputFeld textarea {height: 150px;}

.checkbox {margin-bottom: 20px;}

.checkbox label {padding-left: 30px; position: relative;}
.checkbox label::before {content: url("img/checkboxOff.png"); position: absolute; left: 0; top: 2px;}
.checkbox input {display: none;}
.checkbox input:checked ~ label::before {content: url("img/checkboxOn.png");}

input[type=submit] {border-radius: 5px; background-color: transparent; border: 1px solid var(--color-text); font-family: 'Hind', sans-serif; display: inline-block; color: var(--color-red); padding: 2px 15px 0 15px; transition-duration: 300ms;}
input[type=submit]:hover {background-color: var(--color-red); border-color: var(--color-red); color: white; transform: translateY(-2px);}

.errorBox {background-color: var(--color-red); color: white; padding: 15px; margin-bottom: 20px; border-radius: 15px;}
.infoBox {color: var(--color-red); padding: 15px; margin-bottom: 20px; border: 1px solid var(--color-red);border-radius: 15px;}
.error {padding-left: 40px; color: var(--color-red); position: relative; padding-top: 3px; margin-top:30px;}
.error::before {content: url("img/fehler.png"); position: absolute; left:0;top:0;}

/*
**		Cookie-Banner
*/

#JhpCookieBanner {position: fixed; bottom:0;  z-index: 10; display: flex; justify-content: center; width: 100%;}
#JhpCookieBanner > div {width: 90%; max-width: 1030px; background-color: rgba(0,0,0,0.6); color: white; border-radius: 8px 8px 0 0; padding: 5px 10px 5px 10px; display:flex; justify-content: space-between; font-size:0.75rem; line-height: 1.1em; flex-direction: column; align-items: center; transition: 300ms;}
#JhpCookieBanner > div > div:first-child {padding-top: 2px;}
#JhpCookieBanner > div:hover {background-color: rgba(0,0,0,0.9); }
#JhpCookieBanner .cookieButton {margin: 8px; display: inline-block; border: 1px solid white; padding: 5px 12px 2px 12px; border-radius: 5px; cursor: pointer; transition-duration: 300ms; color: white;}
#JhpCookieBanner .cookieButton:hover {background-color: var(--color-red); border-color: var(--color-red);}
#JhpCookieBanner a {color: white;}



/*
**		weitere Elemente
*/

.bgLightGrey {background-color: #f0f0f0;}
.bgRed {background-color: var(--color-red); color: white;}
.textRed {color: var(--color-red);}
.textBig {font-size: 1.5em;}
.textFat {font-weight: 700;}
.minHeight100 {min-height: 80vh; min-height: calc(100vh - 230px); }
img.fullWidth, .fullWidth > img {width: 100%; height: auto;}
a.button {border-radius: 5px; background-color: transparent; border: 1px solid var(--color-text); font-family: 'Hind', sans-serif; display: inline-block; color: var(--color-red); padding: 2px 15px 0 15px; transition-duration: 300ms;}
a.button:hover {background-color: var(--color-red); border-color: var(--color-red); color: white; transform: translateY(-2px);}
a.button:hover {background-color: var(--color-red); border-color: var(--color-red); color: white; transform: translateY(-2px);}
ul.vita { list-style: none; padding: 0;}
ul.vita > li:not(:first-child) { margin-top: 8px;}

ul.srp {list-style: none; }
ul.srp > li { position: relative;  margin-bottom: 12px; }
ul.srp > li::before {display: block; width: 10px; height: 10px; background-color: var(--color-red); position: absolute;  left: -20px; top:8px; content: ' ';}
ul.srp.big > li { font-size: 1.3rem;  margin-bottom: 12px; line-height: 1.5em; }
ul.srp.big > li::before {display: block; width: 15px; height: 15px; left: -28px; top:8px; content: ' ';}
.small_leer {display: inline-block; width: 0.15rem;}
.noTopPadding {padding-top:0;}
span.srp1 {text-transform: lowercase; }
span.srp2 {text-transform: lowercase; font-weight: 700;}
span.srp3 {text-transform: lowercase; color:var(--color-red);}
span.sr1 {color:#ffc100;color:#E1AA00; text-transform: lowercase; font-weight: 700;}
span.sr2 {text-transform: lowercase; font-weight: 700;}
.theContent p { text-align: justify;}
.googleMapsLink  a {cursor: pointer!important;}
.googleMapsLink img {width: 70%!important; height: auto; max-width: 240px; padding-top: 1rem; cursor: pointer;}
.theContent *.bigRed {font-size: 2rem; fonts-weight: 700; line-height: 1.2em; text-align: left; color: var(--color-red);}

.frontPageTopline {padding-bottom: 10px; padding-left: 20px;}

.wpgmza-gdpr-compliance {display: flex; padding: 15px; background-color: var(--color-bg-hell); background-image: url("img/bg_maps.jpg"); justify-content: center; flex-direction: column; height: 400px; text-align: center;}
.wpgmza-gdpr-compliance p {text-align: center; font-size: 0.8rem;}
.wpgmza-gdpr-compliance button {display: inline-block; color: white; background-color: var(--color-red); padding: 5px 10px; border:none; border-radius: 15px; transition-duration: 300ms;}
.wpgmza-gdpr-compliance button:hover {transform: scale(1.05); }
.wpgmza-centered { text-align: center!important; margin-top: 15px;}
.h1subline {margin-top: -30px; margin-bottom: 32px;}

.iconBox {text-align: center; margin-top: 50px;}
.iconBox p {text-align: center;}
.bgRed h3 {text-align: center; font-size: 1.5rem; margin-bottom: 30px; margin-top: 30px;}
.iconBox figure > img {width: 150px; height: 150px; object-fit: contain; object-position: center;}

div.wp-block-cp-timeline-content-timeline-block .cool-vertical-timeline-body .timeline-content div.story-time > p {font-weight: 500; color: var(--color-red); font-size: 1.2rem!important; padding-top: 30px;}
.cool-vertical-timeline-body.ctlb-wrapper .timeline-content.icon-false .timeline-block-icon svg {fill: var(--color-red)!important;}
.cool-vertical-timeline-body.alternating-sided .timeline-content .position-right .story-details::before, .cool-vertical-timeline-body.both-sided .timeline-content .position-right .story-details::before, .cool-vertical-timeline-body.one-sided.left .timeline-content .story-details::before { border-right: 15px solid var(--color-red)!important; }
.cool-vertical-timeline-body.alternating-sided .timeline-content .position-right .story-details, .cool-vertical-timeline-body.both-sided .timeline-content .position-right .story-details, .cool-vertical-timeline-body.one-sided.left .timeline-content .story-details { border-left: 4px solid var(--color-red); }
.cool-vertical-timeline-body.alternating-sided .timeline-content .position-left .story-details, .cool-vertical-timeline-body.both-sided .timeline-content .position-left .story-details, .cool-vertical-timeline-body.one-sided.right .timeline-content .story-details { border-right: 4px solid var(--color-red); }





@media (min-width: 576px) {
    
    .weitereProjekte > a{width: 30%; }
    .weitereProjekte > a:nth-child(2n){margin-right: 5%;}
    .weitereProjekte > a:nth-child(3n){margin-right: 0;}
	
    .jhpMasonryContent {display: none;}
    .jhpMasonryContent2Column > div > div {display: block;}

    #JhpCookieBanner > div {flex-direction: row; align-items: center; }
    #JhpCookieBanner .cookieButton {margin: 0 0 0 15px; }


}

@media (min-width: 768px) {
    h1 {padding-left: 25px; padding-top:0; margin-bottom: 50px; font-size: 1.8rem;}
    h1::before {left: 0; top: 7px; width: 12px; height: 12px;}
	h3 {font-size: 1.3rem;}
    section {padding: 100px 0;}
    footer > div.container {grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; grid-gap: 30px; padding: 100px 15px;}
    footer .footerLogo {display: block; grid-column: 1; grid-row: 3;}
    footer .footerAdresse1  {grid-column: 1; grid-row: 1;}
    footer .footerKontakt1  {grid-column: 2; grid-row: 1;}
    footer .footerAdresse2  {grid-column: 1; grid-row: 2;}
    footer .footerKontakt2  {grid-column: 2; grid-row: 2;}
    footer .footerMenu  {grid-column: 2; grid-row: 3;}
    footer .footerKontakt1, footer .footerKontakt2 {margin-bottom: 30px;}
    footer .footerLogo img {width: 200px; height: auto;}
    .aktuellesElement > div:first-child { align-self: center; width: 60%; margin-bottom: -300px; z-index: 1;}
    .aktuellesElement > div:last-child {aspect-ratio: 1/1; padding: 330px 15px 15px 15px; border: 1px solid var(--color-red);  }
    .aktuellesElement > div:last-child a.h3 {padding-bottom: 15px; display: block;  font-size: 1.5rem; line-height: 1.2em;}

    .aktuellesHeader {position: relative; margin-bottom: 50px;}
    .aktuellesHeader h1 {padding-top: 0;  padding-left: 25px; margin: 0;}
    .aktuellesHeader > div:first-child { width: 45%; position: absolute; z-index: 1;right: 0; top: 50%; transform: translateY(-50%);}
    .aktuellesHeader > div:last-child { width: 67%; aspect-ratio: 1/1; border: 1px solid var(--color-red); padding: 20px 100px 20px 20px; display: flex; align-items: center;}

    .teamSpalten {grid-template-columns: 1fr 1fr;}
    .frontPageTopline {padding-left: 25px;}
    .h1subline {margin-top: -50px; margin-bottom: 50px; padding-left: 65px;}
    
    .wpgmza-gdpr-compliance p {font-size: 1rem;}
    .wpgmza-gdpr-compliance button {padding: 8px 25px;}

    div.wp-block-cp-timeline-content-timeline-block .cool-vertical-timeline-body .timeline-content div.story-time > p {font-size: 1.5rem!important; padding-top: 7px;}
    div.wp-block-cp-timeline-content-timeline-block .cool-vertical-timeline-body .timeline-content .position-right div.story-time > p {text-align: right;}

    #Map {height: 600px;}

}

@media (min-width: 992px) {
	#Topbar nav.desktopMenu {display: block; }
	nav.mobileMenu, #MenuIcon {display: none;}
    
    h1 {font-size: 1.8rem; font-weight: 500;}

	footer .kpzLink {text-align: right; }
	footer .menu {flex-direction: column; justify-content: left;  align-items: flex-end; margin-bottom: 0;}
	footer .menu > li {padding: 0 0 15px 0;}
	.jhpTabs .tabBar .tab {margin-right: 45px; }
	#Topbar nav.desktopMenu {margin-top: 10px;}
	#Topbar nav.desktopMenu > div > ul {margin-bottom: 15px;}
	#Logo > img {width: 200px; }
	.stellenangebotElement h3 {margin-top: 0; }
	#HeaderBild > div.slider > ul > li > div {width: 960px; }

    footer {background-image: url("img/bg-footer-large.jpg");}
    footer > div.container {grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto;}
    footer .footerLogo {grid-column: 1; grid-row: 1;}
    footer .footerAdresse1  {grid-column: 2; grid-row: 1;}
    footer .footerKontakt1  {grid-column: 3; grid-row: 1;}
    footer .footerAdresse2  {grid-column: 2; grid-row: 2;}
    footer .footerKontakt2  {grid-column: 3; grid-row: 2;}
    footer .footerMenu  {grid-column: 1; grid-row: 2;}
    footer .footerKontakt1, footer .footerKontakt2 {margin-bottom: 10px;}
    footer .footerLogo img {width: 200px; height: auto;}
    
    .teamSpalten {grid-template-columns: 1fr 1fr 1fr;}

    .aktuellesElement {flex-direction: row;}
    .aktuellesElement > div:first-child { align-self: unset; width: 100%; margin-bottom: 0;flex-basis: 50%;}
    .aktuellesElement:nth-child(odd) > div:first-child { order: 3;}
    .aktuellesElement:nth-child(odd) > div:last-child {border-right: none;}
    .aktuellesElement:nth-child(even) > div:last-child {border-left: none;}
    .aktuellesElement > div:last-child {aspect-ratio: 1/1;;padding: 25px; width: 100%; flex-basis: 50%; display: flex; justify-content: center; flex-direction: column;}

    .aktuellesHeader h1 {padding-top: 0; margin: 0;}
    .aktuellesHeader > div:first-child { width: 50%; }
    .aktuellesHeader > div:last-child { width: 65%; padding-right: 160px;}
    .aktuellesHeader {margin-bottom: 100px;}

    .jhpMasonryContent2Column > div > div {display: none;}
    .jhpMasonryContent3Column > div > div {display: block;}

    .frontPageTopline {font-size: 1.2rem; padding-bottom: 10px;}
    .wpgmza-gdpr-compliance {display: flex; padding: 15px; background-color: var(--color-bg-hell); justify-content: center; flex-direction: column; height: 400px;}
    #Map {height: 500px;}
    .spalten2 {column-count: 2; column-gap: 30px; orphans: 2; widows: 2;}
    
}

@media (min-width: 1200px) {
	html, body {font-size: 18px; line-height: 1.6em;}
    h1 {padding-left: 30px; padding-top:0; font-size: 2rem; margin-bottom: 60px;}
    h1::before {top: 10px;}
    h2 {margin-top: 1.6rem; margin-bottom: 1rem;}
	.bgRed h3 {ext-align: center; font-size: 32px; margin-bottom: 50px; margin-top: 30px;}
	.stellenangebotElement h3 {font-size: 18px; }
	#HeaderBild > div.slider > ul > li > div {width: 1140px; }
	#Logo > img {width: 240px; }
    #Topbar nav.desktopMenu > div > ul > li {padding-right: 20px; }
    #Topbar nav.desktopMenu > div > ul > li::before {top: 8px;}

    section {padding: 125px 0;}

    footer > div.container {grid-template-columns: 1fr auto 1fr 1fr; grid-template-rows: auto auto; padding: 125px 15px;}
    footer .footerLogo {grid-column: 1; grid-row: 1/3;}
    footer .footerAdresse1  {grid-column: 2; grid-row: 1;}
    footer .footerKontakt1  {grid-column: 3; grid-row: 1;}
    footer .footerAdresse2  {grid-column: 2; grid-row: 2;}
    footer .footerKontakt2  {grid-column: 3; grid-row: 2;}
    footer .footerMenu  {grid-column: 4; grid-row: 1/3; text-align: right;}
    footer .footerKontakt1, footer .footerKontakt2 {margin-bottom: 0;}
    footer .footerLogo img {width: 200px; height: auto;}
    footer .menu > li {padding: 4px 0;}

    .aktuellesHeader > div:first-child { width: 48%; }
    .aktuellesHeader > div:last-child { width: 62%; padding-right: 135px;}
    .aktuellesHeader {margin-bottom: 150px;}
    
    .theContent *.bigRed {font-size: 2.5rem;}
    .h1subline {margin-top: -60px; margin-bottom: 60px;}
	 ul.srp.big > li::before {display: block; width: 15px; height: 15px; left: -28px; top:10px; content: ' ';}

    .frontPageTopline {padding-left: 30px;}

    #Map {height: 600px;}
}

@media (min-width: 1400px) {
	html, body {font-size: 18px; line-height: 1.6em;}
	.stellenangebotElement h3 {font-size: 18px; }
	#HeaderBild > div.slider > ul > li > div {width: 1140px; }

    .teamSpalten {grid-template-columns: 1fr 1fr 1fr 1fr;}

    .aktuellesElement > div:last-child {padding: 30px;}
    .aktuellesHeader > div:last-child { padding: 30px 160px 30px 30px; }

    .jhpMasonryContent3Column > div > div { display: none;}
    .jhpMasonryContent4Column > div > div { display: block;}


}