:root {
--main-padding: 10vw;
--space-padding: 5vw;		
--font-size-body: clamp(16px, 19px, 20px);
--radius:30px;
--font-size-h1: clamp(1.6rem, 4vw, 4rem);
--font-size-h2: clamp(1.5rem, 3vw, 3.5rem);
--font-size-h3: clamp(1.8rem, 2.5vw, 3rem);
--font-size-h4: clamp(1.7rem, 2vw, 2.5rem);
--font-size-h5: clamp(1.6rem, 1.8vw, 2rem);
--font-size-h6: clamp(1.5rem, 1.5vw, 2rem);	
--swiper-pagination-color:var(--farbe-1) !important;	
--swiper-navigation-color:var(--farbe-1) !important;	
--swiper-theme-color:var(--farbe-1) !important;	
--fancybox-zIndex: 99999 !important;
--navbar-height:120px;
--swiper-pagination-bullet-size: 15px !important;
}	

	
@media only screen and (max-width: 767px) {
	:root {
	--main-padding: 5vw;	
	--navbar-height:100px;	
		--space-padding: 10vw;		
	}
}
@media only screen and (min-width: 780px) and (max-width: 1080px) {	
	:root {
	--main-padding: 6vw;
	}
}

html { font-size: var(--font-size-body); }

body {
	background: var(--body-background);
	margin:0;
	padding: 0;
	font-size: 21px;
	width: 100vw !important;
	max-width: 100vw !important;
	color: var(--text-farbe);
	font-family: "avenir-next-lt-pro", sans-serif;
font-weight: 400;
font-style: normal;
}

* {
	text-decoration: none
}

p {
	padding:0;
	margin: 0;
		font-family: "avenir-next-lt-pro", sans-serif;
font-weight: 400;
font-style: normal;
	line-height: 1.9em;
	color: rgba(var(--text-farbe), 1);
	font-size: var(--font-size-body);
}
b, strong {
	font-weight: 800;
}

ol {
	padding-left: 0;
	margin: 0;
	padding-top:15px;
}
ol li {
	list-style: none;
	padding:5px;
	font-weight: 200 !important;
}

ol li::before {
    font-family: "Font Awesome 6 Free";
    content: "\f00c"; 
    font-weight: 900;
    padding-right: 10px;
}

h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0;
	color: var(--text-farbe);
	line-height: 1.1em;
	font-family: "avenir-next-lt-pro", sans-serif;
font-weight: 600;
font-style: normal;
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }



#gallery {
	display: none !important;
}

a {
color: rgba(var(--color-1), 1);
}

p a {
	text-decoration: underline;
}


/* Content */

.container {
	max-width: 100%;
	height: auto;
	padding-left:var(--main-padding);
	padding-right:var(--main-padding);
	overflow: hidden;
}


/* Navigation Bar */
.navbar {
	position: fixed;
	width: 100vw;
	z-index: 9999;
	background: transparent;
	height: var(--navbar-height);
}

.navbar::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 25%, rgba(255, 255, 255, 0) 100%);
    opacity: 1;
	z-index: -1;
}

body.menuopen .navbar::after {
	display: none;
}

.navbar-inner {
	width: calc(100vw - var(--main-padding) * 2);
	padding-left: var(--main-padding);
	padding-right: var(--main-padding);
	display: flex;
	justify-content: space-between; /* Updated this line */
	align-items: center;
	height: 100%;
}
.navbar-logo {
	display: flex;
	align-items: center;
}
.navbar-logo a {
	display: flex;
	align-items: center;
}
.navbar-logo svg {
	width: 200px;
	height: auto;
	transition: width 0.5s, fill 0.5s ease;
}
.navbar-logo svg g path {
	transition: fill 0.5s ease;
}

@media (max-width: 768px) {
	.navbar-logo svg {
	width: 150px;
}
}

.navbar-links {
  display: flex;
  list-style-type: none;
  margin-left: auto;
}

.navbar-links ul {
  display: flex;
}

.navbar-links li {
  padding: 0 15px;
  list-style: none;
  position: relative;
}

.navbar-links li a {
	color: #fff;
	text-decoration: none;
	font-size: 20px;
	font-weight: 400;
	position: relative;
	transition: color 0.3s ease-in-out;
	text-transform: uppercase;
}
.navbar-links li:hover a {
	color: var(--farbe-3);
}

body.scrolling .navbar-links li a {
	color:var(--farbe-1);
}

.navbar-links li:hover a::after {
	width: 90%;
	left: 5%;
}
.navbar-links .sub-menu li a::after {
	display: none;
}

/* Animation für aktiven Link */
.navbar-links li.current_page_item a {
  font-weight: 500;
  position: relative;
}

.navbar-links li.current_page_item a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background-color: rgba(var(--farbe-1), 1);
}


/* Leichtes Fade-in beim Hover */
.navbar-links li:hover a {
  transition: color 0.3s ease-in-out;
}

.navbar-links .button a,
.navbar-links .button:hover a{
	background: var(--farbe-1);
	padding:0px 15px;
	color:#fff !important;
	font-weight: 600 !important;
	display: flex;
	align-items: center;
    justify-content: center;
	padding-bottom: 2px !important;
	transition: all 0.3s ease-in-out;
	border-radius: var(--radius);
	height: 40px;
}
.navbar-links .button:hover a{
	color:#FFF !important;
	font-weight: 600 !important;
	background: var(--farbe-3);
}
.navbar-links .menu {
	display: flex;
	align-items: center;
}

.navbar-actions {
  display: flex;
  align-items: center;
}
.navbar-actions a svg , .navbar-actions svg {
	width: auto;
	height: 20px;
	fill:#FFF;
}
.icon-placeholder {
  width: 22px;
  height: auto;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
	padding-top:5px;
}
.navbar {
  transition: background 0.4s ease;
}
body.scrolling .navbar {
	background: rgba(255,255,255,1);
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
body.blank_header .navbar::after,
body.scrolling .navbar::after{
	display: none;
}
.navbar::after {
	display: none;
}


/* Layover */


#layover {
	position: fixed;
	width: calc(100vw - var(--main-padding) - var(--main-padding));
	height: calc(100vh - 150px);
	background: var(--burger-menu-background);
	z-index: -1;
	padding-top: 150px !important;
	padding-left: var(--main-padding);
	padding-right: var(--main-padding);
	top: -150%; 
	transition: top 0.8s, z-index 0.5s;
	color:#FFF;
	text-transform: none;
}

#layover a {
	color:var(--farbe-2);
	transition: color 0.9s;
}

#layover p {
	color:var(--farbe-2) !important;
}

#layover .inner {
	 display: flex;
    flex-direction: column;
	align-items: flex-start;
	height: calc(100vh - 100px);
}

#layover .inner .item {
	text-align: left;
	font-size:3.5vh;
	color:var(--farbe-2);
}

#layover .inner .item:nth-child(2) {
	text-align: left;
	font-size:4.5vh;
}

#layover .inner .item:last-child {
	font-size:2.5vh;
	text-align: left;
	margin-top: auto; 
	padding-bottom: 250px;
	transition: padding-bottom 0.3s;
}

body.scrolling #layover .inner .item:last-child {
	padding-bottom: 50px;
}

#layover .inner ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#layover .inner ul li {
	line-height: 1.8em;
}
#layover .inner ul li:hover a {
	color:var(--text-farbe);
}





	#layover	{
	padding-top:100px;
	height: calc(100vh - 100px);
	}

	#layover .inner {
		grid-template-columns: 1fr;
	}

	#layover .inner .item {
		text-align: left;
		font-size:2.5vh;
	}
	#layover .inner .item:last-child {
		font-size:2vh;
	}
	#layover .inner .item a::after, #layover .inner .item a::before {
		display: none !important;
	}	


@media (min-width: 780px) {
	#layover .wpml-ls {
		display: none;
	}
	
	
}

@media (max-width: 780px) {
	
	
	
	body.scrolling #layover .inner {
	height: calc(100vh - 173px) !important;
}
	
	#layover {
    padding-top: 173px;
	}

}


body.menuopen #layover {
	top: 0;
	z-index: 10;
}


#burger-icon {
    width: 150px;
    height: auto;
    display: inline-block;
    text-align: center;
	cursor: pointer;
	display: none;
}
@media only screen and (max-width: 767px) {
	#burger-icon {
    width: 80px;
		display: block;
	}
}


#burger-icon .dots-container {
    display: flex;
    justify-content: center;
    transition: all 0.3s ease; /* Übergangseffekt hinzugefügt */
}

#burger-icon .dot {
    width: 10px;
    height: 10px;
    background: var(--farbe-1);
    margin: 3px;
    border-radius: 100%;
    transition: background 0.3s ease, transform 0.3s ease;
}

body.home #burger-icon .menu_name {
    font-size: 16px;
	color:#fff;
}
#burger-icon .menu_name {
    font-size: 16px;
	color:var(--farbe-1);;
}


body.scrolling #burger-icon .menu_name {
    font-size: 16px;
	color:var(--farbe-1);
}

#burger-icon .dot:nth-child(1) {
    background: var(--farbe-2);
    transform: scale(1.2);
}

#burger-icon .dot:nth-child(2) {
    background: var(--farbe-1);
    transition-delay: 120ms;
    transform: scale(1.2);
}

#burger-icon .dot:nth-child(3) {
    background: var(--farbe-2);
    transition-delay: 240ms;
    transform: scale(1.2);
}


/* CTA */
a.cta {
  display: inline-flex;            /* flex statt inline-block */
  align-items: center;             /* vertikal zentrieren */
  justify-content: center;         /* horizontal zentrieren */
  padding: 20px 40px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  border: 2px solid var(--farbe-1);
  background: transparent;
  font-family: inherit;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  

  line-height: 1;                  /* verhindert zusätzliche Höhe */
}


/* optional: leicht goldener Verlauf im Text */
a.cta {
  color:var(--farbe-1);
}

/* Hover-Effekt – Button füllt sich mit Gold */
a.cta:hover {
background:var(--farbe-2);
	border-color:var(--farbe-2);
}



/* Body */

body.blank_header .main {
	padding-top:calc(var(--navbar-height) + 0px);
}



@media only screen and (max-width: 767px) {
	.navbar-links {
		display: none;
	}
}







/* Footer */



.footer a {
	color:#262626 !important;
}

.footer {
  position: relative;
  display: grid;
 grid-template-columns: repeat(4, 1fr);
  padding: 50px var(--main-padding) 40px;
  background:var(--farbe-1);
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
  gap: 50px;
  margin-top: 0;
	color:#fff;
}

.footer-column {
  position: relative;
  z-index: 2;
  padding-bottom: 0;
}

.footer-column.kontakt svg,
.footer-column.kontakt img{
	width: 50%;
	height: auto;
	padding-bottom: 20px;
}





.footer-column.end svg {
	height: 200px;
}

.footer-column.end a {
	color:#fff;
}

.footer-column.first {
  line-height: 1.5em;
  text-align: left;
  color: #262626;
}

.footer-column.kontakt {
  line-height: 1.5em;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}


.footer-column.kontakt h6{
	padding-bottom: 20px;
}
.footer-column.kontakt h6,
.footer-column.kontakt p {
  color: #262626;
}
.footer-column.kontakt h6 {
	font-size: 40px !important;
}


.footer-column h6{
	font-size: 20px;
	color:var(--farbe-2);
}

.footer-column.kontakt p {
  width: 70%;
}

.footer .kontakt_data {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.footer .kontakt_data .kontakt_col {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  color: #fff;
	font-weight: 400;
	font-size: 16px !important;
}

.footer .kontakt_data .kontakt_col svg {
  width: auto;
  fill: var(--farbe-2);
  height: 30px;
}

.footer-column p, .footer-column {
	font-size: 16px !important;
}

.opening p {
	margin-top:10px;
	line-height: 1.9em;
}

.footer-column .menu {
	list-style: none;
	color:#FFf;
	
}
.footer-column  ul.menu {
	margin: 0 !important;
	padding: 0 !important;
	margin-top:10px !important;
}
.footer-column  ul.menu li a {
	color:#FFF !important;
	line-height: 1.9em;
	font-weight: 400;
}

.footer .button {
	background: var(--farbe-2);
	color:var(--farbe-1) !important;
}


.footer .inner-footer {
  background: transparent;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  position: absolute;
  pointer-events: none;
  overflow: hidden;
}

.footer .footer-column.end svg .cls-2,
.footer .footer-column.end svg .cls-1{
	fill:#262626 !important;
}

@media only screen and (max-width: 767px) {
	.footer .footer-column.end svg {
	width: 270px;
	height: auto;
}
	.footer-column.end {
		flex-direction: column !important;
	}
}



.footer p {
	line-height: 1.6em !important;
	color:#FFF !important;
}


.footer-column-full {
  grid-column: 1 / -1;
  width: 100%;
  text-align: center;
  color: #fff;
  z-index: 2;
	background: #fff;
	height: 1px;
	opacity: 0.5;
}
.footer-column.end {
  grid-column: 1 / -1;
  width: 100%;
  text-align: center;
  color: #262626;
  z-index: 2;
	display: flex;
    flex-direction: row-reverse;
	justify-content: space-between;
	font-size: 16px !important;
}

.footer-column.end p {
	font-size: 16px !important;
}

/* Social Icons */
.footer .social-icons {
  display: flex;
  gap: 15px;
  justify-content: flex-start;
  align-items: center;
  padding-top: 20px;
}

.footer .social-icons a {
  display: inline-block;
  width: 40px;
  height: 40px;
}

.footer .social-icons a svg {
  width: 100%;
  height: 100%;
  fill: var(--farbe-2);
  transition: transform 0.3s ease;
}

.footer .social-icons a svg path {
  transition: fill 0.3s ease;
}

.footer .social-icons a:hover svg {
  transform: scale(1.2);
}




/* Footer Menu */


.menu-socket-menu-container {
    text-align: left;
}

.menu-socket-menu-container ul {
    list-style: none; 
    padding: 0;
    margin: 0;
	padding-bottom: 5px;
	text-align: center;
}

.menu-socket-menu-container ul li {
    display: inline;
    margin-right: 10px; 
}

.menu-socket-menu-container ul li a {
    text-decoration: none; 
    color: inherit;
	font-size: 16px;
	font-weight: 400;
}

.menu-socket-menu-container ul li:not(:last-child)::after {
    content: " ";
    margin-left: 10px; 
}

@media only screen and (max-width: 767px) {
	 .menu-socket-menu-container {
        text-align: center;
    }

    .menu-socket-menu-container ul {
       display: flex;
        align-items: center;
        justify-content: center;
    }

    .menu-socket-menu-container ul li {
        display: block; 
        margin: 5px 0; 
    }

    .menu-socket-menu-container ul li:not(:last-child)::after {
        content: ""; 
    }
	
	
	.footer {
     grid-template-columns: 100%;
	}
	
	.footer-column.kontakt p {
    width: 100%;
}
	
	.footer form.wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: calc(100% - var(--main-padding) * 1);
}
	
	.footer-column.first {
    text-align: center;
}
	.footer .social-icons {
    justify-content: center;
    align-items: center;
}
	.footer-column.first, .footer-column.end {
    text-align: center;
}
	
}



/* Formular */

:root {
	--form-bg: 227,227,227;
	--form-color: 0,0,0;
}

.contactformsection {
	padding-top:var(--space-padding);
	padding-bottom:var(--space-padding);
}
form.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
	width: calc(100% - 0px);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: calc(100% - 40px);
  padding: 14px 20px;
  background: rgba(var(--form-bg), 1);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  resize: vertical;
  margin-bottom: 8px;
	font-family: inherit !important;
}

.wpcf7-list-item {
	margin-left:0px;
	font-size: 15px;
	line-height: 1.5em;
}

.wpcf7-form textarea {
  min-height: 100px;
}

.wpcf7-form p.small {
	font-size: 13px;
	line-height: 1.6em;
}
.wpcf7-form p.small a {
	color:var(--farbe-1);;
	text-decoration: underline;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color:  rgba(var(--form-color), 1);
}

.wpcf7-form input[type="submit"] {
  background: var(--farbe-1);
  color: #fff;
  font-weight: bold;
  padding: 14px 24px;
  border: none;
 border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s ease;width: 100%;
}

.wpcf7-form input[type="submit"]:hover {
  background: rgba(var(--form-bg), 1);
  color: #262626;
}


.contactform-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}

.contactform-text {
  flex: 1 1 45%;
}

.contactform {
  flex: 1 1 45%;
}

.contactform-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}
.contactform-grid.text-left {
  flex-direction: row;
}

.contactform-grid.text-right {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 767px) {
	form.wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: calc(100% - var(--main-padding) * 1);
}
	  .contactform-grid {
    flex-direction: column;
  }
}



body.menuopen #burger-icon .menu_name,
body.menuopen #burger-icon .dot:nth-child(2),
body.menuopen #burger-icon .dot:nth-child(3) {
    display: none !important;
}

body.menuopen #burger-icon .dots-container {
    justify-content: center;
    transition: all 0.3s ease; /* Übergangseffekt hinzugefügt */
}

body.menuopen #burger-icon .dots-container .dot {
    width: 40px;
    height: 40px;
    background: #FFF; 
    transform: scale(1);
    transition: all 0.3s ease;
}

body.menuopen #burger-icon:hover .dots-container .dot {
    background: #FFF;
	color: #000;
}

body.menuopen #burger-icon .dots-container .dot:nth-child(1) {
    transform: translate(0, 0);
}

body.menuopen #burger-icon .dots-container .dot:nth-child(2) {
    transform: translate(10px, -10px);
}

body.menuopen #burger-icon .dots-container .dot:nth-child(3) {
    transform: translate(40px, -40px);
}

body.menuopen #burger-icon .dot:nth-child(1)::after {
    content: '×';
    position: absolute;
    z-index: 2;
    color: #000;
    font-size: 34px;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    top: 50%;
    left: 50%;
    transform: translate(-49%, -50%); 
}

body.menuopen #burger-icon:hover .dot:nth-child(1)::after {
	color:#000;
}



a.button {
	padding: 14px 28px;
	border-radius: 50px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	display: inline-block;
	background: var(--farbe-1);
	color: #fff;
	margin-top:20px;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

a.button:hover {
	

	transform: translateY(-3px);
	box-shadow: rgba(0, 0, 0, 0.3) 0px 12px 30px;
}




/* Sub Menu */


/* Basis */

.menu > li {
    position: relative;
}
.menu > li > a {
    position: relative;
}

.menu > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0%;
    height: 2px;
    background: #000;
    transition: width 0.3s;
}

.menu > li:hover > a::after {
    width: 100%;
}





/* Submenu */
.menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;

    background: #fff;
    padding: 10px 0;
    min-width: 200px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition: all 0.2s ease;

    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
	display: block;

}

/* Öffnen */
.menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Items untereinander */
.menu .sub-menu li {
    display: block;
}

/* Links */
.menu .sub-menu a {
    display: block;
    padding: 10px 15px;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
}

/* Hover */
.menu .sub-menu a:hover {
    color: #000;
	font-weight: 400;
}


/* NETKIN CUStoM */


/* === Timeline: vertikal, Text abwechselnd links/rechts === */
.timelinesection .timeline {
	display: block;
	position: relative;
	margin-top: 60px;
	counter-reset: step;
}


/* === Gefße-Seite: Mietgefße-Slider  ganzes Gefß sichtbar statt abgeschnitten === */
.pagename-gefaesse .party-mask-top,
.pagename-gefaesse .party-mask-image {
	  height: clamp(360px, 40vw, 520px);

}
.pagename-gefaesse .party-mask-image img {
	  object-fit: contain;
	  background-color: #ffffff;
	  transform: none;
}
.pagename-gefaesse .party-mask-card:hover .party-mask-image img {
	  transform: scale(1.03);
}
.pagename-gefaesse .party-mask-bottom {
	  margin-top: 10px;
}
@media (max-width: 767px) {
	  .pagename-gefaesse .party-mask-top,
	.pagename-gefaesse .party-mask-image {
		    height: clamp(320px, 95vw, 440px);
	}
	.pagename-gefaesse .party-mask-bottom {
		    margin-top: 10px;
	}
}

.timelinesection .timeline::before { display: none; }


/* === Branchen-Boxen: Referenzfotos als Vorschaubild statt Icon === */
.boxen-wrapper .box-icon img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 10px;
}

.timelinesection .timeline-item {
	position: relative;
	z-index: 1;
	width: 50%;
	box-sizing: border-box;
	padding: 0 70px 60px 0;
	text-align: right;
	flex: none;
}

.timelinesection .timeline-item:nth-child(even) {
	margin-left: 50%;
	padding: 0 0 60px 70px;
	text-align: left;
}

.timelinesection .timeline-item:last-child { padding-bottom: 0; }

/* Verbindungslinie zwischen den Punkten */
.timelinesection .timeline-item::before {
	content: "";
	position: absolute;
	top: 35px;
	bottom: -35px;
	right: -1px;
	left: auto;
	width: 2px;
	background: var(--farbe-2);
	z-index: 0;
}

.timelinesection .timeline-item:nth-child(even)::before {
	right: auto;
	left: -1px;
}

.timelinesection .timeline-item:last-child::before { display: none; }

/* Kreis mittig auf der Linie */
.timelinesection .timeline-dot {
	position: absolute;
	top: 0;
	right: -35px;
	left: auto;
	margin: 0;
	width: 70px;
	height: 70px;
	z-index: 2;
}

.timelinesection .timeline-item:nth-child(even) .timeline-dot {
	right: auto;
	left: -35px;
}

.timelinesection .timeline-item h3,
.timelinesection .timeline-item h5 {
	margin-top: 0;
	margin-bottom: 10px;
}

/* Mobil: einspaltig, alles links */
@media (max-width: 900px) {
	.timelinesection .timeline-item,
	.timelinesection .timeline-item:nth-child(even) {
		width: 100%;
		margin-left: 0;
		padding: 0 0 50px 100px;
		text-align: left;
	}

	.timelinesection .timeline-item::before,
	.timelinesection .timeline-item:nth-child(even)::before {
		left: 34px;
		right: auto;
		bottom: -30px;
	}

	.timelinesection .timeline-item:last-child { padding-bottom: 0; }

	.timelinesection .timeline-dot,
	.timelinesection .timeline-item:nth-child(even) .timeline-dot {
		left: 0;
		right: auto;
	}
}


/* ==========================================================================
   Footer – 3-Spalten-Layout, responsiv  (08/2026)
   Zum Zurückdrehen einfach diesen Block löschen.
   ========================================================================== */

.footer {
	grid-template-columns: 1.4fr 1fr 1.1fr;
	column-gap: 56px;
	row-gap: 44px;
	padding: 80px var(--main-padding) 28px;
	align-items: start;
	grid-template-rows: min-content auto min-content min-content;
}

/* 4 Inhaltsblöcke → 3 Spalten (Kontakt + Öffnungszeiten teilen sich Spalte 3) */
.footer > .footer-column:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.footer > .footer-column:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
.footer > .footer-column:nth-child(3) { grid-column: 3; grid-row: 1; }
.footer > .footer-column:nth-child(4) { grid-column: 3; grid-row: 2; }
.footer > .footer-column-full         { grid-column: 1 / -1; grid-row: 3; }
.footer > .footer-column.end          { grid-column: 1 / -1; grid-row: 4; }

.footer a { color: #fff !important; }

/* Spaltenüberschriften */
.footer .footer-column h6 {
	position: relative;
	margin: 0 0 20px;
	padding-bottom: 12px;
	font-size: 15px !important;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--farbe-2);
}
.footer .footer-column h6::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 2px;
	background: var(--farbe-3);
}

/* Spalte 1: Logo, Claim, Standorte, Social */
.footer .footer-column.kontakt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 24px;
}
.footer .footer-column.kontakt > * { margin: 0; }

/* Footer-Logo: img-Quelle im Template zeigt auf localhost:8888 und ist kaputt */
.footer .footer-column.kontakt > a {
	display: block;
	width: 172px;
	max-width: 55%;
	aspect-ratio: 359 / 191;
	background: url(/wp-content/uploads/2026/04/hydroplan-footer.png) left center / contain no-repeat;
}
.footer .footer-column.kontakt > a img { display: none; }

.footer .footer-claim {
	max-width: 36ch;
	font-size: 16px !important;
	line-height: 1.65 !important;
	opacity: .92;
}

.footer .footer-standorte {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 28px;
	width: 100%;
}
.footer .footer-standort {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 15px;
	line-height: 1.5;
}
.footer .fs-city {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--farbe-3);
	margin-bottom: 2px;
}
.footer .fs-adr { opacity: .82; }
.footer a.fs-tel { font-weight: 500; text-decoration: none; transition: color .2s ease; }
.footer a.fs-tel:hover { color: var(--farbe-3) !important; }

.footer .footer-legal {
	max-width: 48ch;
	font-size: 13px !important;
	line-height: 1.55 !important;
	opacity: .6;
}

/* Spalte 2: Leistungs-Menü */
.footer .footer-column:not(.end) ul.menu { display: grid; gap: 11px; margin-top: 0 !important; }
.footer .footer-column:not(.end) ul.menu li { margin: 0; }
.footer .footer-column:not(.end) ul.menu li a {
	display: inline-block;
	line-height: 1.4 !important;
	transition: color .2s ease, transform .2s ease;
}
.footer .footer-column:not(.end) ul.menu li a:hover {
	color: var(--farbe-3) !important;
	transform: translateX(4px);
}

/* Spalte 3: Kontakt + Öffnungszeiten */
.footer .kontakt_data { gap: 14px; margin-top: 0; }
.footer .kontakt_data .kontakt_col { gap: 12px; align-items: center; font-size: 16px !important; }
.footer .kontakt_data .kontakt_col svg { height: 22px; flex: 0 0 auto; }

.footer .footer-column.opening p { margin-top: 0; font-size: 16px !important; line-height: 1.75 !important; }
.footer .footer-column.opening .button {
	margin-top: 18px;
	display: inline-block;
	padding: 13px 26px;
	border-radius: 999px;
	font-weight: 600;
	transition: transform .2s ease, box-shadow .2s ease;
}
.footer .footer-column.opening .button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

/* Social Icons */
.footer .social-icons { padding-top: 0; gap: 12px; }
.footer .social-icons a:hover svg { transform: scale(1.12); }
.footer .social-icons a:hover svg path,
.footer .social-icons a:hover svg circle { fill: var(--farbe-3); }

/* Trennlinie & Fußzeile */
.footer .footer-column-full { margin-top: 12px; opacity: .22; }
.footer .footer-column.end { align-items: center; gap: 14px 28px; flex-wrap: wrap; padding-top: 4px; }
.footer .footer-column.end p { margin: 0; opacity: .7; }
.footer .footer-column.end a { opacity: .82; transition: opacity .2s ease, color .2s ease; }
.footer .footer-column.end a:hover { opacity: 1; color: var(--farbe-3) !important; }
.footer .menu-socket-menu-container ul { padding-bottom: 0; }

/* Responsive */
@media only screen and (max-width: 1200px) {
	.footer { grid-template-columns: 1.3fr 1fr 1fr; column-gap: 40px; }
}

@media only screen and (max-width: 991px) {
	.footer {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 40px;
		row-gap: 40px;
		padding-top: 64px;
		grid-template-rows: none;
	}
	.footer > .footer-column:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
	.footer > .footer-column:nth-child(2) { grid-column: 1; grid-row: 2; }
	.footer > .footer-column:nth-child(3) { grid-column: 2; grid-row: 2; }
	.footer > .footer-column:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
	.footer > .footer-column-full         { grid-row: 4; }
	.footer > .footer-column.end          { grid-row: 5; }
	.footer .footer-claim { max-width: 60ch; }
	.footer .footer-standorte { max-width: 620px; }
}

@media only screen and (max-width: 767px) {
	.footer {
		grid-template-columns: 100%;
		row-gap: 34px;
		grid-template-rows: none;
		padding: 56px var(--main-padding) 24px;
		text-align: left;
	}
	.footer > .footer-column:nth-child(1),
	.footer > .footer-column:nth-child(2),
	.footer > .footer-column:nth-child(3),
	.footer > .footer-column:nth-child(4),
	.footer > .footer-column-full,
	.footer > .footer-column.end { grid-column: 1; grid-row: auto; }
	.footer .footer-column.kontakt { align-items: flex-start; gap: 20px; }
	.footer .footer-column.kontakt > a { width: 150px; max-width: 45%; }
	.footer .social-icons { justify-content: flex-start; }
	.footer .footer-standorte { grid-template-columns: 1fr; gap: 16px; }
	.footer .footer-column.end { flex-direction: column-reverse; align-items: flex-start; text-align: left; gap: 12px; }
	.footer .menu-socket-menu-container, .footer .menu-socket-menu-container ul { text-align: left; }
	.footer .menu-socket-menu-container ul { display: flex; gap: 18px; flex-wrap: wrap; }
}


/* Socket-Menü in der Fußzeile horizontal halten */
.footer .footer-column.end .menu-socket-menu-container { flex: 0 0 auto; }
.footer .footer-column.end ul.menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0 !important;
	padding-bottom: 0;
}
.footer .footer-column.end ul.menu li { display: inline-block; margin: 0; }
.footer .footer-column.end ul.menu li:not(:last-child)::after { content: none; }
.footer .footer-column.end p { flex: 1 1 auto; }
@media only screen and (max-width: 767px) {
	.footer .footer-column.end ul.menu { justify-content: flex-start; }
}




/* === Mooswand-Slider (feiern-section): responsive Optimierung === */
/* Fix: Beschreibungstext wurde durch feste Hoehen abgeschnitten */

.feiern-slider .swiper-slide { height: auto; }

.party-mask-card {
  height: 100%;
  overflow: visible;
}

.party-mask-bottom {
  height: auto;
  min-height: 120px;
  flex: 1 1 auto;
  box-sizing: border-box;
  padding: clamp(18px, 1.8vw, 25px) clamp(16px, 1.6vw, 20px);
}

.party-mask-bottom h3 {
  font-size: clamp(22px, 2.4vw, 35px) !important;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.party-mask-bottom p {
  font-size: clamp(0.9rem, 1.05vw, 0.95rem);
  line-height: 1.55;
  overflow-wrap: break-word;
}

.party-mask-top,
.party-mask-image { height: clamp(300px, 30vw, 450px); }

.feiern-container { gap: clamp(24px, 4vw, 60px); }

@media (max-width: 1024px) {
  .feiern-text p { padding-left: 0; }
}

@media (max-width: 767px) {
  .party-mask-top,
  .party-mask-image { height: clamp(300px, 110vw, 480px); }
  .party-mask-bottom { min-height: 0; }
  .party-mask-bottom h3 { font-size: clamp(22px, 6.5vw, 30px) !important; }
  .party-mask-bottom p { font-size: 1rem; }
}

/* Textcollage-Sektion: mehr Innenabstand oben
   (Theme nutzt .collage { padding-top: var(--spacer-padding) },
   die Variable war bisher nirgends definiert -> 0) */
:root { --spacer-padding: 80px; }
@media (max-width: 768px) {
  :root { --spacer-padding: 40px; }
}


/* Aktuelles-Ueberschrift auf Hoehe von Oeffnungszeiten ausrichten */
.footer .footer-column:nth-child(2) h6:nth-of-type(2) {
  margin-top: 45px;
}


/* ==== Blog-Archiv: Kachel-Layout (bestehende Karten-Klassen des Themes) ==== */
.blog-archive {
	padding-top: 160px;
	padding-bottom: 4rem;
}
.blog-archive h1 {
	color: var(--farbe-1);
	margin-bottom: 0.5rem;
}
.blog-archive .boxen-wrapper {
	margin: 2.5rem 0 0;
}
.blog-archive .boxen-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 30px !important;
}
.blog-archive .box-item {
	background: #fff;
	border-radius: var(--radius, 30px);
	box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 9px -2px;
	overflow: hidden;
	transition: 0.3s;
	padding: 0;
	height: auto;
}
.blog-archive .box-item:hover {
	transform: translateY(-4px);
	box-shadow: rgba(0, 0, 0, 0.28) 0px 14px 28px -10px;
}
.blog-archive .box-item > a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 20px;
	color: inherit;
	text-decoration: none;
}
.blog-archive .box-icon {
	position: relative;
	margin: -20px -20px 1rem;
}
.blog-archive .box-icon img {
	display: block;
	width: 100%;
	height: 210px;
	object-fit: cover;
	border-radius: 0;
}
.blog-card-date {
	position: absolute;
	bottom: 12px;
	left: 12px;
	background: rgba(255,255,255,0.92);
	color: var(--farbe-1);
	font-size: 12px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 50px;
	letter-spacing: 0.02em;
}
.blog-archive .box-headline {
	margin: 0 0 0.75rem;
	font-size: 19px;
	color: #1d1d1d;
}
.blog-archive .box-text {
	flex-grow: 1;
	font-size: 15px;
	line-height: 1.5;
	color: #444;
}
.blog-archive .box-text p {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.blog-card-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 1rem;
	color: var(--farbe-1);
	font-weight: 600;
	font-size: 14px;
	transition: gap 0.25s ease;
}
.blog-archive .box-item:hover .blog-card-more {
	gap: 14px;
}

@media (max-width: 1024px) {
	.blog-archive .boxen-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 600px) {
	.blog-archive .boxen-grid {
		grid-template-columns: 1fr !important;
	}
	.blog-archive {
		padding-top: 130px;
	}
}

/* ==== Einzelner Blogartikel: Titel/Meta/Bild werden im Beitragsinhalt gepflegt ==== */
.single-post .main {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 160px;
	padding-bottom: 4rem;
	font-size: 17px;
	line-height: 1.75;
	color: #333;
}
.single-post .main p {
	margin-bottom: 1.5rem;
}
.blog-article-title {
	color: #1d1d1d;
	font-size: 38px;
	margin: 0 0 0.5rem;
	line-height: 1.2;
}
.blog-article-meta {
	color: var(--farbe-1);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 2rem !important;
}
.blog-article-image img {
	width: 100%;
	height: auto;
	border-radius: var(--radius, 30px);
	display: block;
}
.blog-article-image {
	margin-bottom: 1.5rem !important;
}
.blog-back-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 1rem;
	color: var(--farbe-1) !important;
	font-weight: 600;
	text-decoration: none !important;
}
.blog-back-link:hover {
	text-decoration: underline !important;
}

@media (max-width: 600px) {
	.single-post .main {
		padding-top: 130px;
	}
	.blog-article-title {
		font-size: 28px;
	}
}


/* === Hydropflanzen-Seite: KPM Text + Multislider neben "Was sind Hydropflanzen?" === */
/* Bilder im Slider immer vollstndig (nicht beschnitten) anzeigen */
.pagename-hydropflanzen .uploadSwiper .swiper-slide img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}
/* Ungenutzten Logo-Slider-Bereich (Platzhaltertext) ausblenden, da hier keine Partnerlogos gepflegt werden */
.pagename-hydropflanzen .bottom-holder {
	  display: none !important;
}

}
}

/* === HYDROPFLANZEN-SLIDER-FIX-V2: fixed-size, non-overflowing slider box, no dark gradient === */
.pagename-hydropflanzen .top-holder .image-holder {
  aspect-ratio: unset !important;
  width: 340px !important;
  height: 460px !important;
  max-width: 90% !important;
  margin: 20px auto !important;
  overflow: hidden !important;
  background: #fff !important;
}
.pagename-hydropflanzen .uploadSwiper .swiper-slide::after {
  display: none !important;
}


/* === HYDROPFLANZEN-SLIDER-FIX-V3 (appended cleanly at end) === */
.pagename-hydropflanzen .top-holder .image-holder {
  aspect-ratio: unset !important;
  width: 340px !important;
  height: 460px !important;
  max-width: 90% !important;
  margin: 20px auto !important;
  overflow: hidden !important;
  background: #ffffff !important;
}


/* === HYDROPFLANZEN-SLIDER-FIX-V4: center plant image inside the box (was left-anchored) === */
.pagename-hydropflanzen .uploadSwiper .swiper-slide img {
  object-position: center center !important;
}


/* === Referenzen Hotellerie/Gastronomie: Pflanzenbilder komplett sichtbar === */
body.page-id-1319 .boxen-wrapper .box-icon:has(img) {
	background-color: #eeeeec;
	border-radius: 10px;
	overflow: hidden;
}
body.page-id-1319 .boxen-wrapper .box-icon img {
	height: clamp(300px, 32vw, 400px);
	object-fit: contain;
	background-color: transparent;
	mix-blend-mode: multiply;
}


/* === Referenzen (alle Unterseiten): Pflanzenbilder komplett sichtbar === */
body.page-id-1327 .boxen-wrapper .box-icon:has(img),
body.page-id-1325 .boxen-wrapper .box-icon:has(img),
body.page-id-1326 .boxen-wrapper .box-icon:has(img),
body.page-id-1322 .boxen-wrapper .box-icon:has(img),
body.page-id-1323 .boxen-wrapper .box-icon:has(img),
body.page-id-1321 .boxen-wrapper .box-icon:has(img),
body.page-id-1324 .boxen-wrapper .box-icon:has(img) {
	background-color: #eeeeec;
	border-radius: 10px;
	overflow: hidden;
}
body.page-id-1327 .boxen-wrapper .box-icon img,
body.page-id-1325 .boxen-wrapper .box-icon img,
body.page-id-1326 .boxen-wrapper .box-icon img,
body.page-id-1322 .boxen-wrapper .box-icon img,
body.page-id-1323 .boxen-wrapper .box-icon img,
body.page-id-1321 .boxen-wrapper .box-icon img,
body.page-id-1324 .boxen-wrapper .box-icon img {
	height: clamp(300px, 32vw, 400px);
	object-fit: contain;
	background-color: transparent;
	mix-blend-mode: multiply;
}

/* Blogartikel: H2 Zwischenueberschriften verkleinern */
.single-post h2 {
	font-size: clamp(24px, 1vw + 20px, 32px);
}

/* Blogartikel: H3 Zwischenueberschriften verkleinern (analog zu H2) */
.single-post h3 {
	font-size: clamp(20px, 1vw + 16px, 26px);
}

/* Blogartikel: doppelte vw-Innenabstaende (.container in .container) fressen Textbreite auf breiten Bildschirmen, Text nutzt volle 800px-Spalte */
.single-post .main .container {
	padding-left: 0 !important;
	padding-right: 0 !important;
}


/* === Vergleichstabelle (Hydrokultur vs. Erdkultur) - Fix: im Beitrag war das CSS durch <br>-Tags kaputt === */
.hydroplan-vergleichstabelle {
	overflow-x: auto;
	margin: 1.5em 0;
}
.hydroplan-vergleichstabelle table {
	border-collapse: collapse;
	width: 100%;
}
.hydroplan-vergleichstabelle th,
.hydroplan-vergleichstabelle td {
	border: 1px solid #ddd;
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
}
.hydroplan-vergleichstabelle thead th {
	background: #f5f5f5;
	font-weight: 600;
	border-bottom: 2px solid #ccc;
}
.hydroplan-vergleichstabelle tbody tr:nth-child(even) {
	background: #fafafa;
}


/* === Footer: Copyright-Zeile links ausrichten (wie rechte Nav an der Kante) === */
.footer-column.end p {
	text-align: left;
}


/* === Pflanzenkatalog-Box (nur Startseite): Box selbst schmaler + kein toter Raum === */
body.pagename-startseite .bigimage-text {
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 48px !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 48px !important;
}
body.pagename-startseite .bigimage-text .image {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 0 !important;
}
body.pagename-startseite .bigimage-text .image-holder {
  width: 260px !important;
  max-width: 260px !important;
  height: auto !important;
  aspect-ratio: 400 / 536 !important;
}
body.pagename-startseite .bigimage-text .image-holder img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
body.pagename-startseite .bigimage-text .details {
  flex: 1 1 auto !important;
  max-width: 420px !important;
  padding: 0 !important;
}
@media (max-width: 767px) {
  body.pagename-startseite .bigimage-text {
    flex-direction: column;
    max-width: 100% !important;
    padding: 32px !important;
    gap: 24px !important;
  }
  body.pagename-startseite .bigimage-text .image-holder {
    width: 55% !important;
    max-width: 200px !important;
  }
  body.pagename-startseite .bigimage-text .details {
    max-width: 100% !important;
  }
}

/* === Pflanzenkatalog-Box (nur Startseite): kleinen "Katalog Download"-Link/Button oberhalb des Bildes ausblenden === */
body.pagename-startseite .bigimage-text .js-lead-gate-trigger {
  display: none !important;
}


/* === FAQ-Seite: Akkordeon-Breite auf 50% === */
.pagename-faq .faq-grid.no-image {
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767px) {
  .pagename-faq .faq-grid.no-image {
    max-width: 100%;
  }
}


/* ==========================================================================
   Hydroplan Floating CTA ("Beratung anfragen") — Button + Modal
   ========================================================================== */

.hp-cta-button {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 0;
	background: #079236;
	color: #fff;
	border: none;
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba(7, 146, 54, 0.35);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.hp-cta-button:hover,
.hp-cta-button:focus-visible {
	background: #046323;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(4, 99, 35, 0.4);
}

.hp-cta-button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.hp-cta-button__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
}

.hp-cta-button__icon i {
	font-size: 34px;
	line-height: 1;
	color: #fff;
}

.hp-cta-button__icon-stack {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.hp-cta-button__icon-stack .fa-clipboard-list {
	font-size: 22px;
	line-height: 1;
}

.hp-cta-button__icon-accent {
	position: absolute;
	right: -6px;
	bottom: -6px;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	color: #079236;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #079236;
}

.hp-cta-button__text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 600px) {
	.hp-cta-button {
		right: 14px;
		bottom: 14px;
		width: 52px;
		height: 52px;
		min-width: 44px;
		min-height: 44px;
	}
}

/* Modal
   ========================================================================== */

.hp-cta-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.hp-cta-modal[hidden] {
	display: none;
}

.hp-cta-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 30, 15, 0.55);
}

.hp-cta-modal__dialog {
	position: relative;
	background: #fff;
	border-radius: 16px;
	max-width: 760px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.hp-cta-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 50%;
	color: #333;
	cursor: pointer;
	z-index: 2;
}

.hp-cta-modal__close:hover,
.hp-cta-modal__close:focus-visible {
	background: rgba(0, 0, 0, 0.06);
}

.hp-cta-modal__grid {
	display: grid;
	grid-template-columns: 240px 1fr;
}

.hp-cta-modal__advisor {
	background: #f2f8f3;
	padding: 32px 24px;
	text-align: center;
	border-radius: 16px 0 0 16px;
}

.hp-cta-modal__advisor-photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 16px;
	display: block;
}

.hp-cta-modal__advisor-photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #079236;
	color: #fff;
}

.hp-cta-modal__advisor-photo--placeholder svg {
	width: 40px;
	height: 40px;
}

.hp-cta-modal__advisor-name {
	font-weight: 700;
	font-size: 17px;
	margin: 0 0 8px;
	color: #1a1a1a;
}

.hp-cta-modal__advisor-text {
	font-size: 14px;
	line-height: 1.5;
	color: #4a4a4a;
	margin: 0 0 16px;
}

.hp-cta-modal__advisor-hint {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 13px;
	color: #046323;
	font-weight: 600;
	margin: 0;
}

.hp-cta-modal__form-wrap {
	padding: 32px 28px;
}

.hp-cta-modal__title {
	font-size: 22px;
	margin: 0 0 8px;
	color: #1a1a1a;
	padding-right: 30px;
}

.hp-cta-modal__subtitle {
	font-size: 14px;
	color: #6a6a6a;
	margin: 0 0 20px;
}

.hp-cta-modal__feedback {
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 14px;
	margin-bottom: 16px;
}

.hp-cta-modal__feedback--success {
	background: #eaf7ec;
	color: #046323;
}

.hp-cta-modal__feedback--error {
	background: #fdecec;
	color: #b3261e;
}

.hp-cta-form__row {
	margin-bottom: 14px;
	display: flex;
	flex-direction: column;
}

.hp-cta-form__row label {
	font-size: 13px;
	font-weight: 600;
	color: #2a2a2a;
	margin-bottom: 5px;
}

.hp-cta-form__row input[type="text"],
.hp-cta-form__row input[type="email"],
.hp-cta-form__row input[type="tel"],
.hp-cta-form__row select,
.hp-cta-form__row textarea {
	padding: 10px 12px;
	border: 1px solid #d5d5d5;
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	width: 100%;
	box-sizing: border-box;
}

.hp-cta-form__row input:focus-visible,
.hp-cta-form__row select:focus-visible,
.hp-cta-form__row textarea:focus-visible {
	outline: 2px solid #079236;
	outline-offset: 1px;
	border-color: #079236;
}

.hp-cta-form__row input[aria-invalid="true"],
.hp-cta-form__row select[aria-invalid="true"] {
	border-color: #b3261e;
}

.hp-cta-form__row--hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.hp-cta-form__row--checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
	flex-wrap: wrap;
}

.hp-cta-form__row--checkbox input {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.hp-cta-form__row--checkbox label {
	font-size: 13px;
	font-weight: 400;
	margin-bottom: 0;
}

.hp-cta-form__error {
	display: block;
	font-size: 12px;
	color: #b3261e;
	margin-top: 4px;
}

.hp-cta-form__submit {
	width: 100%;
	padding: 14px 20px;
	background: #079236;
	color: #fff;
	border: none;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	margin-top: 8px;
	transition: background-color 0.2s ease;
}

.hp-cta-form__submit:hover,
.hp-cta-form__submit:focus-visible {
	background: #046323;
}

.hp-cta-form__submit:disabled,
.hp-cta-form__submit.is-loading {
	opacity: 0.7;
	cursor: default;
}

body.hp-scroll-locked {
	overflow: hidden;
}

@media (max-width: 720px) {
	.hp-cta-modal__grid {
		grid-template-columns: 1fr;
	}

	.hp-cta-modal__advisor {
		border-radius: 16px 16px 0 0;
		padding: 24px;
	}

	.hp-cta-modal__form-wrap {
		padding: 24px 20px;
	}

	.hp-cta-modal__dialog {
		max-height: 95vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hp-cta-button {
		transition: none;
	}

	.hp-cta-button:hover,
	.hp-cta-button:focus-visible {
		transform: none;
	}
}


/* === Hydropflanzen-Seite: Produktbild-Slider (.uploadSwiper) - ganzes Foto sichtbar statt abgeschnitten (05.09.2026) === */
body.page-id-1159 .uploadSwiper.swiper .swiper-slide {
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-id-1159 .uploadSwiper.swiper .swiper-slide img {
  width: auto !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: contain !important;
}
@media (max-width: 767px) {
  body.page-id-1159 .uploadSwiper.swiper .swiper-slide {
    height: 340px;
  }
}


/* "Was sind Hydropflanzen"-Bildbox (uploadSwiper, Seite hydropflanzen): hochkant statt breitem 16:9-Crop, kein Ueberstand mehr ueber den Spaltenrand */
body.page-id-1159 .top-holder .image-holder {
	aspect-ratio: 4 / 5;
	margin-right: 0;
	overflow: hidden;
}
body.page-id-1159 .top-holder .image-holder .uploadSwiper,
body.page-id-1159 .top-holder .image-holder .swiper-wrapper,
body.page-id-1159 .top-holder .image-holder .swiper-slide {
	height: 100% !important;
}
body.page-id-1159 .uploadSwiper.swiper .swiper-slide img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}
@media only screen and (max-width: 767px) {
	body.page-id-1159 .top-holder .image-holder {
		aspect-ratio: 4 / 5;
	}
}


/* Leerer Logo-Slider (Seite hydropflanzen) ohne Inhalte ausblenden, statt "Keine Logos im Slider vorhanden." anzuzeigen */
body.page-id-1159 .bottom-holder {
	display: none !important;
}


/* === Hydropflanzen-Seite: Bilder-Collage (KPM: Text + Bildergalerie) ersetzt alten Multislider === */
body.page-id-1159 .textbildergalerie .collage {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  aspect-ratio: 3 / 2;
  gap: 14px;
}
body.page-id-1159 .textbildergalerie .collage img {
  border-radius: 16px;
  transition: transform 0.35s ease;
}
body.page-id-1159 .textbildergalerie .collage img:hover {
  transform: scale(1.04);
}
@media (max-width: 900px) {
  body.page-id-1159 .textbildergalerie .collage {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    aspect-ratio: 2 / 3;
    gap: 10px;
  }
}
@media (max-width: 480px) {
  body.page-id-1159 .textbildergalerie .collage img {
    border-radius: 12px;
  }
}

/* === Hydropflanzen-Seite: Bilder-Collage als einzeilig durchlaufendes Karussell === */
body.page-id-1159 .textbildergalerie .image-container-full {
  overflow: hidden;
  height: 195px;
}
body.page-id-1159 .textbildergalerie .collage {
  display: flex;
  aspect-ratio: unset;
  width: max-content;
  gap: 14px;
  --carousel-shift: -36%;
  animation: hydroplanCollageCarousel 20s ease-in-out infinite alternate;
}
body.page-id-1159 .textbildergalerie .collage:hover {
  animation-play-state: paused;
}
body.page-id-1159 .textbildergalerie .collage img {
  width: 160px;
  height: 195px;
  flex: 0 0 auto;
  aspect-ratio: 160 / 195;
}
@keyframes hydroplanCollageCarousel {
  from { transform: translateX(0); }
  to { transform: translateX(var(--carousel-shift)); }
}
@media (max-width: 768px) {
  body.page-id-1159 .textbildergalerie .collage {
    aspect-ratio: unset;
    gap: 12px;
    --carousel-shift: -30%;
  }
  body.page-id-1159 .textbildergalerie .collage img {
    width: 140px;
    height: 170px;
  }
  body.page-id-1159 .textbildergalerie .image-container-full {
    height: 170px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-id-1159 .textbildergalerie .collage {
    animation: none;
  }
}


/* ==========================================================================
   Header: Telefonnummern Standort Köln & Düsseldorf (oberhalb Hauptmenü)
   Desktop: nicht klickbar | Mobil: klickbar | Burgermenü: Pill-Buttons
   ========================================================================== */
:root {
	--topbar-height: 34px;
}

.header-phones {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	height: var(--topbar-height);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
	padding: 0 var(--main-padding);
	background: var(--farbe-1);
}

.header-phones .header-phone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	line-height: 1;
	pointer-events: none;
	cursor: default;
}

.header-phones .header-phone i {
	font-size: 12px;
}

.navbar {
	top: var(--topbar-height);
}

body.blank_header .main {
	padding-top: calc(var(--navbar-height) + var(--topbar-height));
}

body.menuopen .header-phones {
	display: none;
}

@media only screen and (max-width: 767px) {
	:root {
		--topbar-height: 54px;
	}
	.header-phones {
		flex-direction: row;
		align-items: flex-end;
		justify-content: center;
		gap: 25px;
		padding: 6px 5vw;
	}
	.header-phones .header-phone {
		font-size: 12px;
		pointer-events: auto;
		cursor: pointer;
	}
}

/* Burgermenü (mobil): Telefonnummern als Pill-Buttons mit Orange-Hover */
#layover .layover-phones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 10px;
}

#layover .phone-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	border-radius: 999px;
	border: 1px solid #fff;
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

#layover .phone-pill:hover {
	background-color: var(--farbe-3);
	border-color: var(--farbe-3);
	color: #fff;
}


/* Admin-Bar Offset für eingeloggte Nutzer */
body.admin-bar .header-phones {
	top: 32px;
}
body.admin-bar .navbar {
	top: calc(32px + var(--topbar-height));
}
@media screen and (max-width: 782px) {
	body.admin-bar .header-phones {
		top: 46px;
	}
	body.admin-bar .navbar {
		top: calc(46px + var(--topbar-height));
	}
}


/* ==========================================================================
   Hauptmenü: Chevron-Indikator bei Menüpunkten mit Untermenü
   ========================================================================== */
.navbar-links li.menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.navbar-links li.menu-item-has-children > a::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f078";
	font-size: 10px;
	order: 2;
	transition: transform 0.25s ease;
}
.navbar-links li.menu-item-has-children:hover > a::before {
	transform: rotate(180deg);
}


/* === Anpassung 06.09.2026 (überarbeitet): Header-Telefonleiste ohne grünen Balken, Icon wie im Footer,
   Nummern unterstrichen, Farbe folgt jetzt exakt dem Hauptmenü (weiß oben / grün beim Scrollen),
   Hintergrund der Telefonleiste matcht die weiße Navbar beim Scrollen (kein Spalt mehr) === */
.header-phones {
	background: transparent;
}

body.scrolling .header-phones {
	background: rgb(255, 255, 255);
}

.header-phones .header-phone {
	color: #fff;
	padding-bottom: 4px;
	border-bottom: 1px solid currentColor;
	transition: color 0.3s ease-in-out;
}

body.scrolling .header-phones .header-phone {
	color: var(--farbe-1);
}

.header-phones .header-phone i {
	display: inline-block;
	width: 14px;
	height: 14px;
	font-size: 0;
	line-height: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22m29.393%2023.36c-.874-.733-6-3.979-6.852-3.83-.4.071-.706.412-1.525%201.389a11.687%2011.687%200%200%201%20-1.244%201.347%2010.757%2010.757%200%200%201%20-2.374-.88%2014.7%2014.7%200%200%201%20-6.784-6.786%2010.757%2010.757%200%200%201%20-.88-2.374%2011.687%2011.687%200%200%201%201.347-1.244c.976-.819%201.318-1.123%201.389-1.525.149-.854-3.1-5.978-3.83-6.852-.306-.362-.584-.605-.94-.605-1.032%200-5.7%205.772-5.7%206.52%200%20.061.1%206.07%207.689%2013.791%207.721%207.589%2013.73%207.689%2013.791%207.689.748%200%206.52-4.668%206.52-5.7%200-.356-.243-.634-.607-.94z%22%2F%3E%3Cpath%20d%3D%22m23%2015h2a8.009%208.009%200%200%200%20-8-8v2a6.006%206.006%200%200%201%206%206z%22%2F%3E%3Cpath%20d%3D%22m28%2015h2a13.015%2013.015%200%200%200%20-13-13v2a11.013%2011.013%200%200%201%2011%2011z%22%2F%3E%3C%2Fsvg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22m29.393%2023.36c-.874-.733-6-3.979-6.852-3.83-.4.071-.706.412-1.525%201.389a11.687%2011.687%200%200%201%20-1.244%201.347%2010.757%2010.757%200%200%201%20-2.374-.88%2014.7%2014.7%200%200%201%20-6.784-6.786%2010.757%2010.757%200%200%201%20-.88-2.374%2011.687%2011.687%200%200%201%201.347-1.244c.976-.819%201.318-1.123%201.389-1.525.149-.854-3.1-5.978-3.83-6.852-.306-.362-.584-.605-.94-.605-1.032%200-5.7%205.772-5.7%206.52%200%20.061.1%206.07%207.689%2013.791%207.721%207.589%2013.73%207.689%2013.791%207.689.748%200%206.52-4.668%206.52-5.7%200-.356-.243-.634-.607-.94z%22%2F%3E%3Cpath%20d%3D%22m23%2015h2a8.009%208.009%200%200%200%20-8-8v2a6.006%206.006%200%200%201%206%206z%22%2F%3E%3Cpath%20d%3D%22m28%2015h2a13.015%2013.015%200%200%200%20-13-13v2a11.013%2011.013%200%200%201%2011%2011z%22%2F%3E%3C%2Fsvg%3E");
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

.header-phones .header-phone i::before {
	content: none;
}


/* === Header-Telefonnummern (Koeln/Duesseldorf) vertikal zentrieren, Topbar kompakter === */
:root {
	--topbar-height: 26px;
}
.header-phones .header-phone {
	padding: 1px 0;
}


/* === Navbar (Logo/Menue) naeher an Telefonnummern-Zeile heranholen === */
@media (min-width: 768px) {
	:root {
		--navbar-height: 110px;
	}
	.navbar-logo svg {
		width: 170px;
	}
}


/* === Startseite: Zahlen-Badges entfernen (Blog-Karten + Full-Service im Detail) === */
body.page-id-823 .cpt-item.cat-startseite .cpt-image .number {
    display: none !important;
}
body.page-id-823 .container.faq.new-faq .faq-number {
    display: none !important;
}


/* Startseite: Zahlen-Badges entfernen (Blog-Karten + Full-Service im Detail) */
body.page-id-823 .cpt-item.cat-startseite .cpt-image .number { display: none !important; }
body.page-id-823 .container.faq.new-faq .faq-number { display: none !important; }

body.page-id-823 .cpt-grid.cols-3 .cpt-item .cpt-image .number { display: none !important; }


/* Startseite: Boxen-Icons verkleinern (max 80x80px) und oben links platzieren */
body.page-id-823 .boxen-wrapper .box-icon img {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    margin: 0 !important;
}


/* Startseite: Pflanzenkatalog-Box - "Katalog Download"-Button ueber dem Bild entfernen */
body.page-id-823 .bigimage-text .image .image-holder > a {
    display: none !important;
}

/* Pflanzenkatalog-Box Redesign: Box um 20% vergroessert (60% -> 72%), Katalog-Bild verkleinert (contain statt cover, mit Weissraum), Abstaende ausbalanciert */
@media (min-width: 768px) {
    body.page-id-823 .container.bigimagetext .bigimage-text {
        width: 72% !important;
        margin: 0 auto !important;
    }
    body.page-id-823 .container.bigimagetext .bigimage-text .image {
        flex: 0 0 42% !important;
        padding: 44px !important;
        box-sizing: border-box !important;
        background: #f6f8f6 !important;
    }
    body.page-id-823 .container.bigimagetext .bigimage-text .details {
        flex: 0 0 calc(58% - 88px) !important;
        padding: 44px !important;
    }
}
body.page-id-823 .bigimage-text .image .image-holder img {
    object-fit: contain !important;
    border-radius: 12px !important;
}
body.page-id-823 .container.bigimagetext .bigimage-text .details .text-infos {
    width: 100% !important;
}
body.page-id-823 .bigimage-text .details h4 {
    font-size: 32px !important;
    margin-bottom: 14px !important;
}
body.page-id-823 .bigimage-text .details .text-infos > p:first-of-type {
    margin-bottom: 22px !important;
}
body.page-id-823 .bigimage-text .details .text-infos > ol {
    margin-bottom: 26px !important;
}
body.page-id-823 .bigimage-text .details .text-infos > ol li {
    margin-bottom: 8px !important;
}
body.page-id-823 .bigimage-text .details .text-infos > ol li:last-child {
    margin-bottom: 0 !important;
}


/* Startseite: "Pflanzenauswahl"-Boxen (4er-Portfolio-Grid) - Datum/Lesezeit ausblenden, Platz fuer Kurztext-Auszug */
body.page-id-823 .cpt-grid.cols-4 .cpt-item.cat-startseite .meta {
    display: none !important;
}
body.page-id-823 .cpt-grid.cols-4 .cpt-item.cat-startseite h3 {
    margin-top: 6px !important;
}
body.page-id-823 .cpt-grid.cols-4 .cpt-item.cat-startseite .cpt-excerpt {
    font-size: 15px;
    line-height: 1.6;
    color: #5a5a5a;
    margin: 12px 0 20px 0;
}

/* === Fix: Floating "Beratung anfragen" Button verdeckt Datenschutz-Link im Footer === */
.footer > .footer-column.end {
    padding-bottom: 100px;
}


/* === Hydropflanzen-Seite: individuelle Box-Icons (Warum Hydropflanzen im Buero) auf 50px verkleinern, oben-links === */
body.page-id-1159 .boxen-grid .box-icon img {
	width: 50px !important;
	height: 50px !important;
	object-fit: contain !important;
	border-radius: 0 !important;
	margin: 0 !important;
}


/* === Hydropflanzen-Seite: "Welche Hydropflanzen können Sie mieten?" auf 2x2-Grid erzwingen (4 Mieten-Posts, 2 oben/2 unten, responsiv wie gehabt) === */
body.page-id-1159 .cpt-grid.cols-4 {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* === Hydropflanzen-Seite: Datum/Lesezeit + Weiterlesen-Button in den 4 Mieten-Karten ausblenden, Teaser-Text stylen === */
body.page-id-1159 .cpt-grid .cpt-item.cat-mieten .meta,
body.page-id-1159 .cpt-grid .cpt-item.cat-mieten a.btn {
  display: none !important;
}
body.page-id-1159 .cpt-grid .cpt-item.cat-mieten .cpt-excerpt {
  font-size: 15px;
  color: #5a5a5a;
  line-height: 1.6;
  margin: 10px 0 0;
}
/* Mooswand: Anwendungsbeispiele-Slider - Bilder fuellen die Slide-Box korrekt (a-Wrapper hatte keine feste Breite/Hoehe, dadurch verzerrte/ueberlaufende Bilder) */
body.page-id-1123 .galerieSwiper .swiper-wrapper a { width: 100%; height: 100%; }


/* === Seite /konzepte/ (page-id-1792): Referenzen-Grid Weiterlesen-Buttons ausblenden === */
body.page-id-1792 .cpt-grid .cpt-content a.btn { display: none; }


/* Seite konzepte page-id-1792: Weiterlesen-Buttons im Referenzen-Grid ausblenden */
body.page-id-1792 .cpt-grid .cpt-content a.btn { display: none; }


/* Seite konzepte page-id-1792: Datum/Lesezeit im Referenzen-Grid ausblenden + Teaser-CTA-Link stylen */
body.page-id-1792 .cpt-grid .meta { display: none; }
body.page-id-1792 .cpt-grid .cpt-excerpt { margin-top: 6px; }
body.page-id-1792 .cpt-grid .cpt-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--farbe-1, #036323); font-weight: 600; text-decoration: none; }
body.page-id-1792 .cpt-grid .cpt-cta:hover { text-decoration: underline; }


/* Seite pflanzenservice page-id-1634: Ueberschrift im neuen KPM-Parallax-Modul weiss statt Standard-Textfarbe */
body.page-id-1634 .parallax h2, body.page-id-1634 .parallax h3 { color: #fff; }

/* Konzepte-Seite: CTA-Links in Referenzen-Grid entfernen */
body.page-id-1792 .cpt-grid .cpt-cta { display: none; }


/* === Typische Herausforderungen: Tulpen-Icon durch gruenen Haken ersetzen === */
body.page-id-1319 .boxen-wrapper .box-icon:has(svg) svg,
body.page-id-1327 .boxen-wrapper .box-icon:has(svg) svg,
body.page-id-1325 .boxen-wrapper .box-icon:has(svg) svg,
body.page-id-1326 .boxen-wrapper .box-icon:has(svg) svg,
body.page-id-1322 .boxen-wrapper .box-icon:has(svg) svg,
body.page-id-1323 .boxen-wrapper .box-icon:has(svg) svg,
body.page-id-1321 .boxen-wrapper .box-icon:has(svg) svg,
body.page-id-1324 .boxen-wrapper .box-icon:has(svg) svg {
	display: none;
}
body.page-id-1319 .boxen-wrapper .box-icon:has(svg)::before,
body.page-id-1327 .boxen-wrapper .box-icon:has(svg)::before,
body.page-id-1325 .boxen-wrapper .box-icon:has(svg)::before,
body.page-id-1326 .boxen-wrapper .box-icon:has(svg)::before,
body.page-id-1322 .boxen-wrapper .box-icon:has(svg)::before,
body.page-id-1323 .boxen-wrapper .box-icon:has(svg)::before,
body.page-id-1321 .boxen-wrapper .box-icon:has(svg)::before,
body.page-id-1324 .boxen-wrapper .box-icon:has(svg)::before {
	content: '';
	display: inline-block;
	width: 30px;
	height: 30px;
	background-color: var(--farbe-1);
	-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

/* === USP-Icons "Warum Unternehmen im Rheinland uns beauftragen": Icon-Kreise 20% kleiner === */
#usp-warum-beauftragen .icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
}
#usp-warum-beauftragen .icon svg {
    width: 48px;
    height: 48px;
}


/* === Fix: horizontaler Mini-Scroll (Theme nutzt 100vw statt 100%, das zaehlt die Scrollbar-Breite mit) === */
html, body {
	overflow-x: hidden;
}


/* === Google-Profil-Links in Karten-Tooltips klickbar machen === */
/* Leaflet setzt .leaflet-tooltip standardmaessig auf pointer-events:none (nur Hover-Label gedacht), dadurch waren die eingebauten Google-Maps-Links in den Standort-Karten (Startseite) nicht klickbar. */
.leaflet-tooltip a {
    pointer-events: auto;
}


/* === Konzepte-Seite: Mietpflanzen-Portfolio-Grid ohne Titel-Verlinkung === */
body.page-id-1792 .cpt-grid .cpt-item.cat-mieten h3 a { pointer-events: none; cursor: default; }


/* Fix: Tablet-Navigationsluecke 768-1050px - Hauptnav (inkl. Kontakt-Button) wurde abgeschnitten, keine Hamburger-Alternative in diesem Breitenbereich */
@media (min-width: 768px) and (max-width: 1050px) {
  .navbar-links { display: none !important; }
  #burger-icon { display: block !important; width: 80px !important; }
}

/* Fix: Mobiles Menue-Overlay (#layover, z-index 10) lag hinter dem fixierten Header (nav.navbar, z-index 9999) - oberster Menuepunkt war dadurch nicht klickbar */
#layover { z-index: 10000 !important; }


/* Nutzerwunsch: Adresse im mobilen Aufklappmenue entfernt + Zeilenabstand der Menuepunkte leicht vergroessert */
#layover .inner > .item:nth-of-type(2) { display: none; }
#layover ul.menu > li { padding: 8px 0; }


/* Korrektur: Schliessen-Button (X) im Header war durch #layover-z-index-Fix verdeckt - Header bleibt oben, Menuepunkte stattdessen per Abstand aus der Kopfzeile geschoben */
#layover { z-index: 9998 !important; }
#layover .inner { padding-top: 140px !important; }


/* Nutzerwunsch: Chevron-Icon bei Mietpflanzen + Ueber uns im mobilen Menue, damit Aufklappbarkeit erkennbar ist (analog Desktop-Nav) */
#layover .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 10px; }
#layover .menu-item-has-children > a::after { font-family: "Font Awesome 6 Free"; font-weight: 900; content: ""; font-size: 14px; transition: transform 0.25s; }
#layover .menu-item-has-children.active > a::after { transform: rotate(180deg); }


/* Korrektur: Chevron wurde von anderer Regel ueberschrieben (display:none) - mit !important erzwungen */
#layover .menu-item-has-children > a::after { display: inline-block !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; content: "" !important; font-size: 14px !important; transition: transform 0.25s !important; }
#layover .menu-item-has-children.active > a::after { transform: rotate(180deg) !important; }


/* Korrektur 2: vorhandene Theme-Regel '#layover .inner .item a::after{display:none!important}' hat hoehere Spezifitaet als meine erste Chevron-Regel - jetzt mit gleich hoher Spezifitaet ueberschrieben */
#layover .inner .item .menu-item-has-children > a::after { display: inline-block !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; content: "" !important; font-size: 14px !important; margin-left: 8px !important; transition: transform 0.25s !important; }
#layover .inner .item .menu-item-has-children.active > a::after { transform: rotate(180deg) !important; }


/* Korrektur 3: generische Theme-Regel '.menu > li > a::after' (Hover-Underline-Effekt) setzte position:absolute/left:0/bottom:-5px ohne !important - da meine Regel 'position' nicht explizit setzte, gewann trotzdem diese fremde Regel je Eigenschaft. Jetzt alle betroffenen Properties explizit ueberschrieben */
#layover .inner .item .menu-item-has-children > a::after { position: static !important; left: auto !important; bottom: auto !important; top: auto !important; width: auto !important; height: auto !important; background: none !important; margin-left: 8px !important; }

/* === Mobiles Aufklappmenu: Untermenu schiebt Punkte herunter statt sie zu ueberdecken === */
#layover .menu .sub-menu {
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.3s ease !important;
}
#layover .menu-item-has-children.active > .sub-menu {
  max-height: 400px !important;
}
#layover .menu .sub-menu li {
  padding: 0 !important;
}
#layover .menu .sub-menu a {
  display: block !important;
  padding: 8px 0 8px 24px !important;
  color: #fff !important;
  font-size: 0.92em !important;
  opacity: 0.85 !important;
  white-space: normal !important;
}
#layover .menu .sub-menu a:hover {
  opacity: 1 !important;
}


/* === Mobiles Menue: Hover-Hintergrund (helles Gruen aus Farbpalette --farbe-2) fuer bessere Usability === */
#layover .menu > li > a {
  padding: 6px 14px !important;
  margin: -6px -14px !important;
  border-radius: 8px !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}
#layover .menu > li > a:hover,
#layover .menu > li > a:focus-visible {
  background-color: #e4eee8 !important;
  color: #036323 !important;
}
#layover .menu .sub-menu a {
  border-radius: 6px !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}
#layover .menu .sub-menu a:hover,
#layover .menu .sub-menu a:focus-visible {
  background-color: #e4eee8 !important;
  color: #036323 !important;
  opacity: 1 !important;
}


/* === Mobiles Menue etwas hoeher/kompakter platzieren, damit Rufnummern + aufgeklappte Punkte sichtbar bleiben === */
#layover .inner {
  padding-top: 112px !important;
}
#layover .inner .item.layover-phones {
  margin-top: 20px !important;
}
#layover,
#layover .inner {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}


/* === Footer: Spalten-Ueberschriften (h4) - Farbe+Groesse korrigiert (22.09.) === */
.footer .footer-column h4 {
	position: relative;
	margin: 0 0 20px;
	padding-bottom: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--farbe-2) !important;
	font-size: 15px !important;
}
.footer .footer-column h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 2px;
	background: var(--farbe-3);
}

.footer .footer-column:nth-child(2) h4:nth-of-type(2) {
	margin-top: 45px;
}




.leaflet-container a {
    color: var(--text-farbe) !important;
}

body.menuopen .navbar-logo svg * {
	fill:#FFF;
}