/*!
Theme Name: SVS
Theme URI: http://underscores.me/
Author: webfeeling
Author URI: https://www.webfeeling.at
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: svs
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

SVS is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Custom Fonts */
@font-face {
	font-family: 'Block T Heavy';
	src: url('./fonts/block_t_heavy.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/* ---------------------------------------------------------
   SVS Additions: Hero/Swiper + Accordion
--------------------------------------------------------- */

/* Header Section */
.section-header { 
	position: relative; 
	height: 100vh;
	max-height: 690px;
	min-height: 600px;
	margin: 0px;
	padding: 0px;
}

/* Header Gradient Overlay for Menu Readability */
.section-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 200px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
	z-index: 5;
	pointer-events: none;
}

/* Header Navigation Pills */
.header-navigation {
	position: absolute;
	top: 37px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	width: 100%;
	padding: 0 20px;
}

.nav-pills {
	display: flex;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap;
}

.nav-pill,
.nav-pill:visited {
	color: #fff !important;
	padding: 2px 24px;
	border-radius: 25px;
	text-decoration: none;
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 14px;
	line-height: 35px;
	text-align: center;
	text-transform: uppercase;
	border: 2px solid #fff !important;
}

.nav-pill:hover {
	background: #fff;
	color: #5CB77A !important;
	cursor: pointer;
}

/* Hero Slider Container */
.hero-slider-container {
	position: relative;
	width: 100%;
	height: 100%;
}

/* Swiper hero */
.gallery-slider.swiper { 
	width: 100%; 
	height: 100%; 
}

.gallery-slider .swiper-wrapper, 
.gallery-slider .swiper-slide { 
	height: 100%; 
}

.gallery-slider img, 
.gallery-slider .hero-video {
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
	display: block;
}

.swiper-button-prev, 
.swiper-button-next {
	width: 50px;
	height: 50px;
	background-size: 24px 24px;
	background-repeat: no-repeat;
	background-position: center;
	color: transparent;
}

.swiper-button-prev {
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="19" height="40" viewBox="0 0 19 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 2L3 20.2L17 38.4" stroke="white" stroke-width="4.2" stroke-linejoin="round"/></svg>');
}

.swiper-button-next {
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="19" height="40" viewBox="0 0 19 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 38.4L16 20.2L2 1.99999" stroke="white" stroke-width="4.2" stroke-linejoin="round"/></svg>');
}

.swiper-button-prev:after,
.swiper-button-next:after {
	display: none;
}

.swiper-pagination-bullet { 
	background: rgba(255,255,255,.7); 
	width: 12px;
	height: 12px;
}

.swiper-pagination-bullet-active { 
	background: #5CB77A; 
}

/* Central SVS Logo */
.central-logo {
	position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translate(-50%, 0px);
    z-index: 5;
	width: 204px;
	height: 204px;
}

.logo-circle img {
	width: 100%;
	height: 100%;
}

.logo-circle svg {
	width: 120px;
	height: 120px;
}

/* Responsive Header */
@media (max-width: 768px) {
	.section-header {
		min-height: 500px;
	}
	
	.header-navigation {
		top: 20px;
		padding: 0 15px;
	}
	
	.nav-pills {
		gap: 8px;
	}
	
	.nav-pill {
		padding: 8px 16px;
		font-size: 12px;
	}
	
	.logo-circle svg {
		width: 100px;
		height: 100px;
	}
	
	.swiper-button-prev,
	.swiper-button-next {
		width: 40px;
		height: 40px;
	}
}

/* Accordion */
.accordion-header {
  width: 100%; text-align: left; background: none; border: 0; padding: 1rem 0;
  font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
}
.accordion-header::after {
  content: '\25BC'; transition: transform .2s ease; font-size: .9em; margin-left: 1rem;
}
.accordion-header[aria-expanded="true"]::after { transform: rotate(0deg); }
.accordion-body { padding: 0 0 1rem 0; }

body .gform-theme--foundation .gfield--width-full {
	grid-column: span 4;
}

body .gfield_html {
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}

/* ---------------------------------------------------------
   SVS Designsystem (Colors, Typography, Spacing, Buttons)
   Werte sind Näherungen, können leicht angepasst werden.
--------------------------------------------------------- */
:root{
  /* Farben (approx. aus Figma Preview) */
  --svs-green: #0F7A5A;         /* Primärgrün */
  --svs-green-dark: #0A5B44;    /* Dunkleres Grün */
  --svs-green-light: #E6F3EE;   /* Hellgrün für Flächen */
  --svs-black: #1B1B1B;
  --svs-gray-700: #4B4B4B;
  --svs-gray-400: #9CA3AF;
  --svs-gray-200: #E5E7EB;
  --svs-white: #FFFFFF;

  /* Typo */
  --svs-font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --svs-font-display: "Bebas Neue", Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; /* Platzhalter Display-Font */

  /* Scale */
  --svs-space-0: 0;
  --svs-space-1: .5rem;
  --svs-space-2: .75rem;
  --svs-space-3: 1rem;
  --svs-space-4: 1.5rem;
  --svs-space-5: 2rem;
  --svs-space-6: 3rem;
  --svs-space-7: 4rem;
  --svs-radius: 10px;
}

/* Body/Typo */
body{ 
	color: var(--svs-black); 
	font-family: 'Inter', var(--svs-font-body); 
	font-weight: 500;
	font-size: 16px;
	line-height: 1.56; /* 25px/16px = 1.56 */
	letter-spacing: 0;
}
h1,h2,h3{ color: var(--svs-black); margin: var(--svs-space-4) 0 var(--svs-space-2); line-height: 1.1; }
h1{ font-family: var(--svs-font-display); font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: .5px; }
h2{ font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
h3{ font-size: clamp(1.25rem, 2.4vw, 1.5rem); }
p{ margin: 0 0 var(--svs-space-3); color: var(--svs-gray-700); }


/* Container & Sektionen */
.wrapper{ max-width: 1440px; margin: 0 auto; padding: 0 20px; }
.container{ width: min(1200px, 92vw); margin: 0 auto; }
section{ padding: var(--svs-space-6) 0; }
.section-vorteile{ background: var(--svs-green-light); }
.section-projektablauf{ background: #29795A; color: var(--svs-white); }
.section-projektablauf h2, .section-projektablauf p{ color: var(--svs-white); }


.section-hero {
	text-align: center;
	padding: 120px 0px 70px 0px;
}

	.section-hero .wrapper {
		max-width: 1160px;
	}	

	.section-hero h1 {
		font-family: 'Block T Heavy', sans-serif;
		font-weight: 800;
		font-style: normal;
		font-size: 90px;
		line-height: 80px;
		letter-spacing: 0px;
		text-transform: uppercase;
		color: #5CB77A;
		margin: 0 0px 28px 0px;
	}

	.section-hero .teaser {
		max-width: 750px;
		margin: 0 auto;
		margin-bottom: 40px;	
		font-size: 22px;
		line-height: 32px;
	}

	.section-hero .region-btn{
		font-weight: 800;
		font-size: 14px;
		line-height: 35px;
		letter-spacing: 0px;
		text-align: center;
		text-transform: uppercase;
		padding: 9px 20px;
	}

.section-faq {
	background: #29795A;
	color: var(--svs-white);
	padding: 93px 0px 103px 0px;
}

	.section-faq .wrapper {
		max-width: 1235px;
	}

.section-faq h2 {
	font-family: 'Block T Heavy', sans-serif;
	font-weight: 800;
	font-style: normal;
	font-size: 33px;
	line-height: 40px;
	letter-spacing: 0px;
	color: #fff;
	margin: 0px;
}

.section-faq p.teaser {
	font-weight: 600;
	font-size: 28px;
	line-height: 40px;
	letter-spacing: 0px;
	color: #fff;
	margin-bottom: 60px;
}

/* FAQ Accordion Styling */
.section-faq .accordion {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 40px;
}

@media (min-width: 769px) {
	.section-faq .accordion {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 49px;
	}
	
	.section-faq .accordion-column {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 13px;
	}
}

.section-faq .accordion-item {
	background: #5CB77A;
	border-radius: 16px;
	overflow: hidden;
}

.section-faq .accordion-header {
	width: 100%;
	background: none;
	border: none;
	padding: 21px 28px 21px 28px;
	text-align: left;
	color: white;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.4;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;

	font-weight: 700;
	font-size: 18px;
	line-height: 25px;
	letter-spacing: 0px;
}

.section-faq .accordion-header:after {
	content: '';
	width: 20px;
	height: 20px;
	background: url('img/arrFaqAkkordeonDown.svg') no-repeat center;
	background-size: contain;
	transition: all 0.3s ease;
	flex-shrink: 0;
	margin-left: 15px;
	position: absolute;
	right: 28px;
	top: 23px;
}

.section-faq .accordion-header[aria-expanded="true"]:after {
	background-image: url('img/arrFaqAkkordeonRight.svg');
}

.section-faq .accordion-body {
	padding: 0 30px 30px 30px;
	color: white;
	font-size: 16px;
	line-height: 1.6;
	display: none;

}

	.section-faq .accordion-body p {
		color: #fff;
	}

	.section-faq ul {
		margin-left: 20px;
		padding-left: 0px;
	}

.section-faq .accordion-body:not([hidden]) {
	display: block;
}

/* Ansprechpartner Section */
.section-ansprechpartner {
	padding: 109px 0 96px 0;
	background: #fff;
}

	.section-ansprechpartner .wrapper {
		max-width: 1235px;
	}

.ansprechpartner-layout {
	display: flex;
	gap: 50px;
	align-items: flex-start;
}

.ansprechpartner-left {
	flex: 1;
}

.ansprechpartner-left h2 {
	font-family: 'Block T Heavy', sans-serif;
	font-weight: 800;
	font-style: Heavy;
	font-size: 90px;
	line-height: 80px;
	letter-spacing: 0%;
	text-transform: uppercase;
	color: #5CB77A;
	margin: 0 0 40px 0;
	max-width: 852px;
	
	/* Bessere Silbentrennung */
	hyphens: none;         /* moderne Browser */
  -webkit-hyphens: none; /* Safari, ältere WebKit */
  -moz-hyphens: none;    /* Firefox */
  word-break: normal;    /* kein erzwungener Umbruch mitten im Wort */
  overflow-wrap: normal; /* auch kein automatisches Umbrechen */
  white-space: normal; 
}

.region-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.region-btn {
	background: #fff;
	color: #5CB77A !important;
	border: 2px solid #5CB77A;
	border-radius: 25px;
	padding: 12px 24px;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	text-decoration: none;
}	

.region-btn:hover,
.region-btn.active {
	background: #5CB77A;
	color: #fff !important;
	border: 2px solid #5CB77A;
}

.ansprechpartner-right {
	flex: 0 0 400px;
	max-width: 400px;
}


	.contact-info h3 {
		font-family: 'Inter', sans-serif;
		font-weight: 500;
		font-size: 28px;
		line-height: 10px;
		letter-spacing: 0px;
	}


.contact-card {
	display: none;
}

.contact-card.active {
	display: block;
}

.contact-card .contact-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 28px;
	background: #e9ecef;
}

.contact-card .contact-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.avatar-placeholder {
	width: 100%;
	height: 100%;
	background: url('img/icoPotrait.svg') no-repeat center;
	background-size: contain;
	
}

.contact-card h3 {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 20px;
	color: #333;
	margin: 0 0 15px 0;
	line-height: 28px;
}

.contact-details {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 25px;
	letter-spacing: 0px;
	margin-bottom: 20px;
}

.contact-email {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 25px;
	letter-spacing: 0px;
	color: #000;
	text-decoration: none;
	background: url('img/icoMail.svg') no-repeat left center;
	background-size: 23px 16px;
	padding-left: 32px;
	transition: all 0.3s ease;
}

.contact-email:hover {
	color: #5CB77A;
	background: url('img/icoMailGreen.svg') no-repeat left center;
	background-size: 23px 16px;
}

@media (max-width: 768px) {
	.ansprechpartner-layout {
		flex-direction: column;
		gap: 40px;
	}
	
	.ansprechpartner-left h2 {
		font-size: 38px;
		line-height: 33px;
		max-width: none;
		margin-bottom: 20px;
		text-align: center;
	}

	.ansprechpartner-right {
		width: 100%;
		text-align: center;
	}

	.contact-card .contact-avatar {
		margin: 0 auto 20px auto;
	}

	.ansprechpartner-right {
		flex: none;
	}
	
	.region-buttons {
		justify-content: center;
	}
}

/* Voraussetzungen Section */
.section-voraussetzungen {
	padding: 80px 0;
	background: #fff;
}

.section-voraussetzungen .wrapper {
	max-width: 1235px;
}

.section-voraussetzungen h2 {
	font-family: 'Block T Heavy', sans-serif;
	font-weight: 800;
	font-style: normal;
	font-size: 33px;
	line-height: 40px;
	letter-spacing: 0px;
	color: #565650;
	margin: 0px;
}

.section-voraussetzungen p.teaser {
	font-weight: 600;
	font-size: 28px;
	line-height: 40px;
	letter-spacing: 0px;
	color: #565650;
	margin-bottom: 70px;
}

	.boxen-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
		max-width: 1061px;
		margin: 0 auto 60px auto;
	}

.box {
	background: #fff;
	border-radius: 15px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
}

.box:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.box img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	object-position: center;
	border-top-right-radius: 15px;
	border-top-left-radius: 15px;
}

.box .text {
	padding: 28px;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: #333;
	text-align: center;
}

.box::after {
	content: "";
	position: absolute;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 60px;
	background: #5CB77A url('img/icoCheck.svg') no-repeat center center;
	background-size: 35px 25px;
	border-radius: 50%;
	z-index: 10;
}

@media (max-width: 992px) {
	.boxen-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
		margin-bottom: 50px;
	}
	
	.section-voraussetzungen h2 {
		font-size: 28px;
		line-height: 34px;
	}
	
	.section-voraussetzungen p {
		font-size: 22px;
		line-height: 32px;
	}
}

@media (max-width: 768px) {
	.boxen-grid {
		grid-template-columns: 1fr;
		gap: 30px;
		max-width: 400px;
		margin-bottom: 50px;
	}
	
	.section-voraussetzungen {
		padding: 60px 0;
	}
	
	.section-voraussetzungen h2 {
		font-size: 24px;
		line-height: 30px;
		margin-bottom: 15px;
	}
	
	.section-voraussetzungen p {
		font-size: 18px;
		line-height: 26px;
		margin-bottom: 0px;
	}
	
	.box img {
		height: 180px;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
	}
	
	.box .text {
		padding: 25px;
		padding-bottom: 50px;
		font-size: 15px;
	}
	
	.box::after {
		width: 50px;
		height: 50px;
		background-size: 28px 20px;
		bottom: -25px;
	}
}

.section-image {
	padding: 0px 0;
}

.section-image img {
	display: block;
}


/* Vorteile Section */
.section-vorteile {
	padding: 80px 0 0 0;
	background: #F5F5F5;
}

.section-vorteile .wrapper {
	max-width: 1235px;
}

.section-vorteile h2 {
	font-family: 'Block T Heavy', sans-serif;
	font-weight: 800;
	font-style: normal;
	font-size: 33px;
	line-height: 40px;
	letter-spacing: 0px;
	color: #565650;
	margin: 0px;
	text-align: left;
}

.section-vorteile p.teaser {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 28px;
	line-height: 40px;
	letter-spacing: 0px;
	color: #565650;
	margin: 0 0 0px 0;
	text-align: left;
}

.vorteile-container {
	position: relative;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	min-height: 900px;
	padding: 80px 20px 40px 20px;
}

.central-image {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	max-width: 700px;
	width: 700px;
}

.central-image img {
	width: 100%;
	height: auto;
	display: block;
}

.bubbles-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.bubble {
	position: absolute;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	box-sizing: border-box;
	transition: transform 0.3s ease;
	z-index: 3;
	opacity: 0;
	transform: scale(0);
	animation-fill-mode: forwards;
}

.bubble:hover {
	transform: scale(1.05);
}

/* Bubble Animation Classes */
.bubble.animate {
	animation: bubblePopIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
	opacity: 1;
	transform: scale(1);
}

@keyframes bubblePopIn {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.bubble-green {
	background: #5CB77A;
	color: white;
	width: 100px;
	height: 100px;
}

/* Desktop bubble sizes (1195px+) */
.bubble-green.has-text {
  width: 180px;
  height: 180px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bubble-gray {
	background: #D3D3CF;
	color: #565650;
	width: 180px;
	height: 180px;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.bubble-icon {
	margin-bottom: 8px;
	font-size: 28px;
	opacity: 0.9;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.bubble-icon img {
	width: 60px	;
	height: auto;
	object-fit: contain;
}

.bubble-green .bubble-icon img {
	display: none !important;
}

.bubble-green-1 .bubble-icon img,
.bubble-green-2 .bubble-icon img,
.bubble-green-3 .bubble-icon img {
	display: block !important;
}

/* Gray bubbles: make icons green */
.bubble-gray .bubble-icon img {
	filter: brightness(0) saturate(100%) invert(64%) sepia(45%) saturate(1347%) hue-rotate(88deg) brightness(94%) contrast(87%);
}

.bubble-green .bubble-icon img {
	width: 56px;
	height: auto;
	/* Ensure black-stroked SVGs display as white on green background */
	filter: brightness(0) invert(1);
}

.bubble-icon.bubble-gray {
	margin-bottom: 10px;
}

.bubble-green .bubble-icon { margin-bottom: 0px; }
.bubble-green.has-text .bubble-icon { margin-bottom: 8px; }

.bubble-icon .dashicons {
	font-size: 28px;
	width: 28px;
	height: 28px;
	line-height: 1;
}

.bubble-text {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0;
  text-align: center;
  word-wrap: break-word;
  hyphens: auto;
  margin: 0;
  display: block;

  hyphens: none;         /* moderne Browser */
  -webkit-hyphens: none; /* Safari, ältere WebKit */
  -moz-hyphens: none;    /* Firefox */
  word-break: normal;    /* kein erzwungener Umbruch mitten im Wort */
  overflow-wrap: normal; /* auch kein automatisches Umbrechen */
  white-space: normal; 
}

.bubble-gray.large-content .bubble-text,
.bubble-green.has-text.large-content .bubble-text {
  font-size: 16px;
  line-height: 25px;
}

.bubble-gray.extra-large-content .bubble-text,
.bubble-green.has-text.extra-large-content .bubble-text {
  font-size: 16px;
  line-height: 25px;
}

/* Bubble positioning - will be overridden by JavaScript for optimal spacing */
.bubble {
	position: absolute;
	transition: all 0.3s ease;
	
}

.bubble.positioned {
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	animation: gentleFloat 4s ease-in-out infinite;
}

/* Enhanced floating animation for bubbles */
@keyframes gentleFloat {
	0%, 100% {
		transform: translate(-50%, -50%) translateY(0px) rotate(0deg);
	}
	25% {
		transform: translate(-50%, -50%) translateY(-8px) rotate(1.5deg);
	}
	50% {
		transform: translate(-50%, -50%) translateY(0px) rotate(0deg);
	}
	75% {
		transform: translate(-50%, -50%) translateY(8px) rotate(-1.5deg);
	}
}

/* Staggered animation delays for natural movement */
.bubble-1 { animation-delay: 0s; }
.bubble-2 { animation-delay: 0.5s; }
.bubble-3 { animation-delay: 1s; }
.bubble-4 { animation-delay: 1.5s; }
.bubble-5 { animation-delay: 2s; }
.bubble-6 { animation-delay: 2.5s; }
.bubble-7 { animation-delay: 3s; }
.bubble-8 { animation-delay: 3.5s; }
.bubble-9 { animation-delay: 4s; }
.bubble-10 { animation-delay: 4.5s; }

/* Green bubbles with different timing */
.bubble-green-1 { animation: gentleFloat 4.2s ease-in-out infinite; animation-delay: 0.8s; }
.bubble-green-2 { animation: gentleFloat 4.8s ease-in-out infinite; animation-delay: 1.3s; }
.bubble-green-3 { animation: gentleFloat 3.8s ease-in-out infinite; animation-delay: 2.1s; }
.bubble-green-4 { animation: gentleFloat 4.5s ease-in-out infinite; animation-delay: 0.3s; }
.bubble-green-5 { animation: gentleFloat 4.1s ease-in-out infinite; animation-delay: 1.8s; }

/* Fixed CSS positioning for bubbles */
.bubble-1 { top: 60%;
    left: 0%; width: 170px; height: 170px; }
.bubble-2 { top: 8%; left: 48%; transform: translateX(-50%); width: 170px; height: 170px; }
.bubble-3 {     top: 8%;
    right: 10%; width: 190px; height: 190px; }
.bubble-4 { top: 32%; left: 8%; width: 170px; height: 170px; }
.bubble-5 { top: 32%; right: 0%; width: 200px; height: 200px; }
.bubble-6 {     top: 2%;
    left: 11%; width: 225px; height: 225px; }
.bubble-7 { top: 65%; right: 2%; width: 250px; height: 250px; }
.bubble-8 { top: 24%;
    left: 30%; width: 235px; height: 235px; }
.bubble-9 { top: 25%; right: 25%; width: 200px; height: 200px; }
.bubble-10 { top: 55%; left: 48%; transform: translateX(-50%); width: 200px; height: 200px; }

/* Green decorative bubbles positioning */
.bubble-green-1 { top: 9%; left: 35%; }
.bubble-green-2 { top: 44%;
    right: 20%; }
.bubble-green-3 { top: 27%;
    left: 0%; }



/* Mobile and Desktop Layout Control */
.desktop-layout {
	display: block;
}

.mobile-layout {
	display: none;
}

/* Static Bubbles Container */
.static-bubbles-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	margin: 20px 0 30px 0;
	min-height: 100px;
	position: relative;
}

.static-bubble {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: #5CB77A;
	position: relative;
	animation: float 3s ease-in-out infinite;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 15px rgba(92, 183, 122, 0.3);
}

.static-bubble .dashicons {
	color: white;
	font-size: 32px;
	width: 32px;
	height: 32px;
}

.static-bubble-1 {
	animation-delay: 0s;
	transform: translateY(-10px);
}

.static-bubble-2 {
	animation-delay: 0.5s;
	background: #5CB77A;
	transform: translateY(10px);
}

.static-bubble-3 {
	animation-delay: 1s;
	background: #5CB77A;
	transform: translateY(-5px);
}

@keyframes float {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-8px); }
}

/* Mobile Central Image */
.mobile-central-image {
	text-align: center;
	margin: 20px 0 40px 0;
	max-width: 280px;
	margin-left: auto;
	margin-right: auto;
}

.mobile-central-image img {
	width: 100%;
	height: auto;
	max-width: 280px;
}

/* Vorteile Slider Styles */
.vorteile-slider {
	max-width: 100%;
	margin: 0 auto;
	padding: 0 50px;
	position: relative;
}

.vorteil-card {
	background: #fff;
	border-radius: 15px;
	padding: 25px 20px;
	text-align: center;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	min-height: 160px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0 10px;
}

.vorteil-icon {
	margin-bottom: 15px;
	font-size: 28px;
	color: #5CB77A;
	line-height: 1;
}

.vorteil-icon .dashicons {
	font-size: 28px;
	width: 28px;
	height: 28px;
	line-height: 1;
}

.vorteil-text {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: #333;
	text-align: center;
}

/* Slider Navigation */
.vorteile-slider .swiper-button-prev,
.vorteile-slider .swiper-button-next {
	width: 40px;
	height: 40px;
	margin-top: -20px;
	color: #5CB77A;
	background: none;
	border-radius: 50%;
	box-shadow: none;
}

.vorteile-slider .swiper-button-prev {
	left: 10px;
}

.vorteile-slider .swiper-button-next {
	right: 10px;
}

.vorteile-slider .swiper-button-prev:after,
.vorteile-slider .swiper-button-next:after {
	font-size: 16px;
	font-weight: bold;
}


@media (max-width: 768px) {
	.section-vorteile {
		padding: 60px 0;
	}
	
	.section-vorteile h2 {
		font-size: 28px;
		line-height: 34px;
		margin-bottom: 15px;
		text-align: center;
	}
	
	.section-vorteile p.teaser {
		font-size: 22px;
		line-height: 32px;
		margin-bottom: 40px;
		text-align: center;
	}
	
	/* Hide desktop layout on mobile */
	.desktop-layout {
		display: none;
	}
	
	/* Show mobile layout on mobile */
	.mobile-layout {
		display: block;
	}
	
	.static-bubbles-container {
		display: none;
	}

	.section-hero {
		padding-bottom: 0px;
	}

	.section-vorteile .wrapper {
		padding: 0px;
	}
	
	.static-bubble {
		width: 83px;
		height: 83px;
		margin: 0 auto;
	}

	.mobile-central-image {
		margin: 0px;
		max-width: none;
	}

	.mobile-central-image img {
		max-width: none;
	}

	.static-bubble-1 {
		left: 10px;
	}

	.static-bubble-2 {
		left: -70px;
		margin-top: -20px;
	}

	.static-bubble-3 {
		left: 40px;
		margin-top: -20px;
	}

	.bubble-icon img {
		width: 45px;
	}

	.bubble-icon {
		margin-bottom: 0px;
	}
	
	.vorteil-card {
		background: white;
		border-radius: 15px;
		padding: 20px 45px;
		border: none;
		box-shadow: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		justify-content: center;
		margin: 0 10px;
		min-height: 0px;
		background: none;
	}

	.vorteile-slider {
		position: relative;
		background: #F5F5F5;
	}
	
	.vorteile-slider .swiper-wrapper {
		padding: 0px;
		background: #F5F5F5;
	}
	
	/* Vorteile slider navigation buttons */
	.vorteile-slider .swiper-button-prev,
	.vorteile-slider .swiper-button-next {
		width: 44px;
		height: 44px;
		margin-top: -22px;
		background: none;
		border-radius: 50%;
		box-shadow: none;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}
	
	
	.vorteile-slider .swiper-button-prev img,
	.vorteile-slider .swiper-button-next img {
		width: 24px;
		height: 24px;
		filter: brightness(0) saturate(100%) invert(64%) sepia(45%) saturate(1347%) hue-rotate(88deg) brightness(94%) contrast(87%);
	}
	
	.vorteile-slider .swiper-button-prev {
		left: 10px;
	}
	
	.vorteile-slider .swiper-button-next {
		right: 10px;
	}
	
	.vorteile-slider .swiper-button-prev::after,
	.vorteile-slider .swiper-button-next::after {
		display: none;
	}
	
	.vorteile-slider .swiper-button-prev {
		left: 10px;
	}
	
	.vorteile-slider .swiper-button-next {
		right: 10px;
	}
	
	.vorteile-slider .swiper-button-prev:after,
	.vorteile-slider .swiper-button-next:after {
		font-size: 14px;
		font-weight: bold;
	}
		
	
	.vorteil-icon {
		font-size: 40px;
		margin-bottom: 15px;
		color: #4CAF50;
	}
	
	.vorteil-icon .dashicons {
		font-size: 28px;
		width: 28px;
		height: 28px;
	}
	
	.vorteil-text {
		font-size: 14px;
		line-height: 20px;
		color: #333;
		font-weight: 500;
	}
}

/* Themenmodule Section */
.section-themenmodule {
	padding: 80px 0;
}

	.section-themenmodule .wrapper {
		max-width: 1235px;
	}

	.section-themenmodule h2 {
		font-family: 'Block T Heavy', sans-serif;
		font-weight: 800;
		font-style: normal;
		font-size: 33px;
		line-height: 40px;
		letter-spacing: 0px;
		color: #565650;
		margin: 0px;
	}

	.section-themenmodule p.teaser {
		font-weight: 600;
		font-size: 28px;
		line-height: 40px;
		letter-spacing: 0px;
		color: #565650;
		margin-bottom: 60px;
	}

.section-themenmodule .accordion {
	max-width: 1016px;
	margin: 0 auto;
}

.section-themenmodule .accordion-item {
	border-bottom: 2px solid #D3D3CF;
}

.section-themenmodule .accordion-header {
	width: 100%;
	background: white;
	border: none;
	padding: 25px 30px 25px 0px;
	text-align: left;
	cursor: pointer;
	font-family: 'Block T Heavy', sans-serif;
	font-weight: 900;
	font-size: 18px;
	line-height: 24px;
	color: #5CB77A;
	text-transform: uppercase;
	letter-spacing: 1px;
	display: flex;
	align-items: center;
	position: relative;
	transition: all 0.3s ease;
	justify-content: left;

	font-weight: 800;
	font-size: 35px;
	line-height: 35px;
	letter-spacing: 0px;
	text-transform: uppercase;
	padding-right: 55px;
}

.section-themenmodule .accordion-header::before {
	content: counter(accordion-counter);
	counter-increment: accordion-counter;
	font-family: 'Block T Heavy', sans-serif;
	font-weight: 900;
	font-size: 80px;
	line-height: 80px;
	line-height: 1;
	color: #5CB77A;
	margin-right: 25px;
	min-width: 60px;
	text-align: center;
}

.section-themenmodule .accordion-header::after {
	content: "";
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background: url('img/icoArrowDropdown.svg') no-repeat center center;
	background-size: contain;
	transition: transform 0.3s ease;
}

.section-themenmodule .accordion-header[aria-expanded="true"]::after {
	transform: translateY(0%) rotate(-90deg);
}

.section-themenmodule .accordion-header[aria-expanded="true"] {
	padding-bottom: 0px;
}

.section-themenmodule .accordion-body {
	padding: 0px 120px 30px 85px;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #333;
}

.section-themenmodule .accordion-body p {
	margin-bottom: 10px;
}

.section-themenmodule .accordion {
	counter-reset: accordion-counter;
}

.schwerpunktmodul {
	font-weight: 500;
	font-size: 20px;
	line-height: 25px;
	letter-spacing: 0px;
}

.schwerpunktmodul-label {
	font-family: 'Block T Heavy', sans-serif;
    font-weight: 800;
	font-size: 22px;
	line-height: 25px;
	letter-spacing: 0%;

}

@media (max-width: 768px) {
	.section-themenmodule {
		padding: 60px 0;
	}
	
	.section-themenmodule h2 {
		font-size: 28px;
		line-height: 34px;
		margin-bottom: 5px;
	}
	
	.section-themenmodule p.teaser {
		font-size: 16px;
		line-height: 24px;
		margin-bottom: 40px;
		font-weight: 600;
		font-size: 16px;
		line-height: 23px;
		letter-spacing: 0px;
	}
	
	.section-themenmodule .accordion-header {
		padding: 12px 50px 12px 0px;
		font-size: 16px;
		line-height: 22px;

		font-weight: 800;
		font-size: 20px;
		line-height: 24px;
		letter-spacing: 0px;
		text-transform: uppercase;

	}
	
	.section-themenmodule .accordion-header::before {
		font-size: 36px;
		margin-right: 5px;
		min-width: 40px;
	}
	
	.section-themenmodule .accordion-header::after {
		right: 0px;
		width: 18px;
		height: 18px;
	}
	
	.section-themenmodule .accordion-body {
		padding: 0 25px 25px 70px;
		font-size: 14px;
		line-height: 22px;
		font-weight: 500;
	}
}

/* Teilnehmer Section */
.section-teilnehmer {
	padding: 80px 0 0 0;
	background: #f8f9fa;
}

/* Desktop styles - ensure they don't get overridden */
@media (min-width: 769px) {
	.section-teilnehmer {
		background: #f8f9fa !important;
	}
}

	.section-teilnehmer h2 {
		font-family: 'Block T Heavy', sans-serif;
		font-weight: 800;
		font-style: normal;
		font-size: 33px;
		line-height: 40px;
		letter-spacing: 0px;
		color: #565650;
		margin: 0px;
	}

	.section-teilnehmer p.teaser {
		font-weight: 600;
		font-size: 28px;
		line-height: 40px;
		letter-spacing: 0px;
		color: #565650;
		margin-bottom: 60px;
	}

.teilnehmer-layout {
	display: flex;
	gap: 60px;
	align-items: stretch;
	min-height: 500px;
}

.teilnehmer-left {
	flex: 0 0 50%;
	max-width: 50%;
	padding-left: 106px;
}

.teilnehmer-left .subtitle {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.4;
	color: #666;
	margin: 0 0 40px 0;
}

.testimonials {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-bottom: 47px;
}

.testimonial-group {
	display: none;
	flex-direction: column;
	gap: 0px;
}

.testimonial-group.active {
	display: flex;
}

.testimonial-card {
	display: flex;
	align-items: flex-start;
	gap: 35px;
	padding-bottom: 50px;
	margin-bottom: 38px;
	border-bottom: 1px solid #e0e0e0;
}

.testimonial-card:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.testimonial-icon {
	flex: 0 0 84px;
	width: 84px;
	height: 84px;
	background: #DEDEDC;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.testimonial-icon img {
	width: 56px;
	height: auto;
}

.icon-placeholder {
	font-size: 24px;
	color: #5CB77A;
}

.testimonial-content {
	flex: 1;
}

/* Schwerpunktmodul */
.schwerpunktmodul {
	margin-top: 10px;
	padding: 0;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.schwerpunktmodul-label {
	color: #5CB77A;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.schwerpunktmodul-text {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #565650;
}

.testimonial-card h3 {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 25px;
	letter-spacing: 0%;
	margin: 0px 0px 5px 0px;
}

.testimonial-text {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 25px;
	letter-spacing: 0px;
}

.testimonial-text p {
	margin: 0;
}

.teilnehmer-right {
	flex: 0 0 540px;
	position: relative;
	display: flex;
	flex-direction: column;
}

.family-buttons {
	display: flex;
	gap: 15px;
	margin-bottom: 50px;
	justify-content: center;
}

.family-btn {
	background: #fff;
	color: #5CB77A;
	border: 2px solid #5CB77A;
	border-radius: 25px;
	padding: 12px 24px;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
}

.family-btn:hover,
.family-btn.active {
	background: #5CB77A;
	color: #fff;
	border: 2px solid #5CB77A;
}

.family-images {
	position: relative;
	width: 100%;
	flex: 1;
	min-height: 400px;
	overflow: hidden;
	align-self: stretch;
}

.family-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.family-image.active {
	opacity: 1;
}

.family-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Tablet and smaller desktop breakpoints */
@media (max-width: 1194px) {
	.teilnehmer-left {
		flex: 0 0 60%;
		max-width: 60%;
	}
	
	.teilnehmer-right {
		flex: 0 0 40%;
	}
}

@media (max-width: 992px) {
	.teilnehmer-layout {
		gap: 40px;
	}
	
	.teilnehmer-left {
		flex: 0 0 58%;
		max-width: 58%;
	}
	
	.teilnehmer-right {
		flex: 0 0 42%;
	}
}

/* Mobile styles */
@media (max-width: 768px) {
	.teilnehmer-layout {
		flex-direction: column;
		gap: 40px;
		align-items: stretch;
		min-height: auto;
	}
	
	.teilnehmer-left {
		flex: none;
		max-width: none;
		margin-bottom: 0px;
	}
	
	.section-teilnehmer h2 {
		font-size: 28px;
		line-height: 34px;
	}
	
	.section-teilnehmer p.teaser {
		font-size: 16px;
		line-height: 23px;
		margin-bottom: 0px;
	}
	
	.teilnehmer-right {
		flex: none;
	}
	
	.family-buttons {
		justify-content: center;
		margin-bottom: 30px;
	}
	
	.family-images {
		height: 300px;
		min-height: 300px;
		flex: none;
	}
}

/* ---------------------------------------------------------
   Section Projektablauf (Interactive Timeline)
--------------------------------------------------------- */

.section-projektablauf {
	background: #29795A;
	padding: 50px 0;
	color: white;
}

.section-projektablauf .wrapper {
	max-width: 100%;
	padding: 0 5%;
	position: relative;
}

.section-projektablauf .projektablauf-intro {
	font-weight: 500;
    font-size: 23px;
    line-height: 32px;
    color: #fff;
    max-width: 500px;
    right: 7%;
    left: auto;
    position: absolute;
}

.projektablauf-intro h2 {
	font-family: 'Block T Heavy';
	font-weight: 800;
	font-size: 90px;
	line-height: 80px;
	letter-spacing: 0%;
	text-align: center;
	text-transform: uppercase;

}

.projektablauf-intro .teaser {
	font-weight: 500;
	font-size: 23px;
	line-height: 32px;
	letter-spacing: 0px;
	text-align: center;
}

.projektablauf-container {
    position: relative;
    width: 100%;
    min-height: 100% !important;
    display: block;
	padding-bottom: 75px;
}

.timeline-map {
    position: relative;
    width: 100%;
    height: 100%;
}

.timeline-svg-wrapper {
    position: relative;
}


.timeline-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.svg-object {
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.timeline-svg svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Desktop/Mobile SVG Display Control */
.desktop-svg {
    display: block !important;
    width: 100%;
    height: 500px;
    min-height: 400px;
}

.mobile-svg {
    display: none !important;
}

.mobile-svg svg {
    width: 100%;
    height: auto;
    max-height: 100vh;
}

/* Mobile SVG Override */
@media (max-width: 768px) {
    .timeline-map {
        display: block !important;
    }
    
    .timeline-svg.desktop-svg {
        display: none !important;
    }
    
    .timeline-svg.mobile-svg {
		display: block !important;
        width: calc(100% + 40px);
        height: auto;
        min-height: 600px;
        margin-left: -20px;
    }
    
    .mobile-svg {
        display: block !important;
    }
    
    .mobile-svg svg {
        width: 100%;
        height: auto;
        display: block;
    }
}

.timeline-svg-fallback {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* SVG Pin Styling */
.timeline-svg path.st48 {
  fill: #f7cd00 !important;
  opacity: 1 !important;
  display: block !important;
}

.timeline-svg path.st48.active {
  filter: drop-shadow(0 0 10px #ffd700) !important;
}
.timeline-svg .st48 {
	cursor: pointer;
	transition: all 0.3s ease;
}

.timeline-svg .st48:hover {
	filter: drop-shadow(0 0 8px rgba(255, 165, 0, 0.6));
}

.timeline-svg .st48.active-pin {
	filter: drop-shadow(0 0 12px rgba(255, 107, 53, 0.8));
}

/* Timeline Pin Styles */
.timeline-pin {
	cursor: pointer;
	transition: all 0.3s ease;
}

.timeline-pin:hover circle {
	fill: #FFA500;
	filter: drop-shadow(0 0 8px rgba(255, 165, 0, 0.6));
}

.timeline-pin.active circle {
	fill: #E55A2B;
}

/* Remove focus outline for SVG elements */
.st48:focus,
.st30:focus {
	outline: none;
}

/* Active Pin State */
.timeline-pin.active path {
	fill: #FF6B35;
	stroke: #E55A2B;
}

.timeline-pin.active circle {
	fill: #E55A2B;
}



/* Dynamic Text Box */
.timeline-textbox {
	position: absolute;
	bottom: 10px;
	left: 5%;
	width: 40%;
	max-width: 500px;
	padding: 35px;
	background: #5CB77A80;
	border-radius: 15px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
	color: white;
	z-index: 10;
	transition: all 0.3s ease;
	min-height: 120px;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: 0px;
}

.timeline-textbox .textbox-content h3 {
	margin: 0 0 15px 0;
	font-family: 'Block T Heavy', sans-serif;
	font-weight: 800;
	font-style: Heavy;
	font-size: 30px;
	line-height: 40px;
	letter-spacing: 0%;
	text-transform: uppercase;
	color: #fff;
}

/* Responsive Design */
@media (max-width: 768px) {
	.section-projektablauf {
		padding: 60px 0;
	}



	.section-faq .accordion-header:after {
		right: 15px;
		top: 13px;
	}
	
	.section-projektablauf h2 {
		font-size: 28px;
		line-height: 34px;
		text-align: center;
		margin-bottom: 15px;
	}
	
	.section-projektablauf p.teaser {
		font-size: 16px;
		line-height: 24px;
		text-align: center;
		margin: 0 auto 40px auto;
	}
	
	.projektablauf-container {
		height: 350px;
		max-width: 100%;
	}
	
	.timeline-textbox {
		position: static;
		width: 100%;
		margin-top: 20px;
	}
	

}

#colophon {
	border-top: 1px solid #565650;
	background: #fff;
	color: #565650;
	text-align: center;	
	padding: 23px 0px;
}

	#colophon .site-info {
		font-weight: 500;
		font-style: Italic;
		font-size: 16px;
		line-height: 25px;
		letter-spacing: 0px;
		text-align: center;
	}


/* Buttons */
.btn{
  display:inline-block; background: var(--svs-green); color: var(--svs-white);
  padding: .85rem 1.25rem; border-radius: var(--svs-radius); text-decoration: none; font-weight: 700;
  box-shadow: 0 6px 0 0 rgba(0,0,0,.12); transition: transform .05s ease, box-shadow .05s ease, background .2s ease;
}
.btn:hover{ background: var(--svs-green-dark); }
.btn:active{ transform: translateY(2px); box-shadow: 0 4px 0 0 rgba(0,0,0,.14); }

/* Karten/Grids */
.vorteile-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--svs-space-4); }
@media (min-width: 900px){ .vorteile-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.vorteil{ text-align:center; padding: var(--svs-space-3); }
.vorteil .icon{ display:block; width:64px; height:64px; margin: 0 auto var(--svs-space-2); }

.teilnehmer-grid{ display:grid; gap: var(--svs-space-4); grid-template-columns: repeat(1,1fr); }
@media (min-width: 700px){ .teilnehmer-grid{ grid-template-columns: repeat(3,1fr); } }
.card{ background: var(--svs-white); border-radius: var(--svs-radius); overflow:hidden; box-shadow: 0 10px 24px rgba(0,0,0,.07); }
.card img{ width:100%; height:auto; display:block; }
.card h3{ margin: var(--svs-space-3); }
.card .text{ margin: 0 var(--svs-space-3) var(--svs-space-4); }

/* Ansprechpartner */
.ansprechpartner-grid{ display:grid; gap: var(--svs-space-4); grid-template-columns: repeat(1,1fr); }
@media (min-width: 900px){ .ansprechpartner-grid{ grid-template-columns: repeat(3,1fr); } }
.kontakt-box{ background: var(--svs-green-light); border: 1px solid var(--svs-gray-200); padding: var(--svs-space-4); border-radius: var(--svs-radius); }
.kontakt-box a{ color: var(--svs-green-dark); font-weight: 700; }


/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

body {
	font-family: Inter;
	font-weight: 500;
	font-style: Medium;
	font-size: 16px;
	line-height: 25px;
	letter-spacing: 0%;
}

.wrapper {
	max-width: 1440px;
	margin: 0 auto;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0px;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* ---------------------------------------------------------
   Mobile Navigation
--------------------------------------------------------- */

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
	display: none;
	position: absolute;
	top: 20px;
	left: 30px;
	z-index: 1001;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 18px;
}

.mobile-menu-toggle span {
	display: block;
	height: 3px;
	width: 100%;
	background: white;
	border-radius: 3px;
}

.mobile-menu-toggle.active span:nth-child(1) {
	transform: rotate(45deg) translate(3px, 3px);
}

.mobile-menu-toggle.active span:nth-child(2) {
	opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
	transform: rotate(-45deg) translate(4px, -3px);
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
	display: none;
	position: fixed;
	top: -20px;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(255, 255, 255, 0.98);
	z-index: 9999999;
	backdrop-filter: blur(10px);
}

.mobile-nav-overlay.active {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.mobile-nav-close {
	position: absolute;
	top: 20px;
	left: 30px;
	background: none;
	border: none;
	cursor: pointer;
	width: 30px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.mobile-nav-close img {
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.mobile-nav-pills {
	display: flex;
	flex-direction: column;
	gap: 15px;
	align-items: center;
	padding-top: 50px;
	margin-top: 50px;
}

.mobile-nav-pills .nav-pill {
	color: #666 !important;
	border-radius: 25px;
	border: 2px solid #565650 !important;
	text-decoration: none;
	font-weight: 800;
	font-size: 12.6px;
	line-height: 31.5px;
	letter-spacing: 0px;
	text-align: center;
	text-transform: uppercase;
	background: white;
	padding: 0px 25px;

}

.mobile-nav-pills .nav-pill:hover,
.mobile-nav-pills .nav-pill:focus {
	background: #29795A;
	color: white;
	border-color: #29795A;
}

.mobile-nav-pills .nav-pill.active {
	background: #29795A;
	color: white;
	border-color: #29795A;
}

.mobile-nav-image {
	margin-top: 40px;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	display: flex;
	justify-content: center;
	align-items: center;
}

.mobile-nav-image img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Desktop Navigation - Hide on Mobile */
.desktop-nav {
	display: flex;
}

/* Hide mobile slider on desktop */
.mobile-slider.swiper,
.voraussetzungen-slider.swiper {
	display: none;
}

.timeline-textbox-close,
.mobile-only {
	display: none;
}

/* Mobile Responsive Breakpoints */
@media (max-width: 768px) {


	.timeline-textbox-close,
	.mobile-only {
		display: block;
	}
	.section-teilnehmer {
		background-color: #F5F5F5;
	}

	.section-teilnehmer .teilnehmer-left {
		padding-left: 0px;
		padding-right: 0px;
		text-align: left;
	}

	.section-faq .accordion-header {
		font-size: 16px;
		line-height: 22px;
		padding: 11px 65px 11px 13px;
	}

	.section-faq .accordion-item {
		margin-bottom: 7px
	}

	.section-faq .accordion {
		gap: 0px;
	}

	.section-vorteile {
		background-color: #fff;
	}

	.hero-slider-container {
		height: 454px;
	}

	.section-hero .teaser {
		padding: 0px 10%;	
	}

	.section-header {
		height: auto;
		min-height: 0px;
	}

	.central-logo {
		width: 124px;
		height: 124px;
	}

	.section-hero h1 {
		font-size: 38px;
		line-height: 33px;
	}

	.mobile-menu-toggle {
		display: flex;
	}
	
	.desktop-nav {
		display: none;
	}
	
	.header-navigation {
		position: relative;
	}
	
	/* Mobile Section Adjustments */
	.section-projektablauf {
		padding: 40px 0;
	}
	
	.section-projektablauf .projektablauf-intro h2 {
		font-size: 60px;
		line-height: 55px;
		margin-bottom: 20px;
		font-family: 'Block T Heavy';
		font-weight: 400;
		font-style: Regular;
		font-size: 38px;
		line-height: 33px;
		letter-spacing: 0;
		text-align: center;
		text-transform: uppercase;

	}

	.projektablauf-intro .mobile-only {
		font-family: 'Block T Heavy';
		font-weight: 400;
		font-style: Regular;
		font-size: 22px;
			line-height: 26px;
			letter-spacing: 0;
			text-align: center;
	}
	
	.section-projektablauf .projektablauf-intro {
		font-size: 18px;
		line-height: 26px;
		padding: 0 20px;
		margin-bottom: 30px;
		position: static;
	}
	
	.projektablauf-container {
		width: 100%;
		height: auto;
		min-height: auto;
	}
	
	.timeline-textbox {
		bottom: 20px;
		left: 20px;
		right: 20px;
		width: auto;
		min-height: auto;
		padding: 20px;
	}
	
	.timeline-textbox .textbox-content h3 {
		font-size: 20px;
		line-height: 28px;
		margin-bottom: 10px;
	}
	
	/* Pin interaction animations */
	.timeline-textbox.fade-out {
		opacity: 0.3;
		transform: translateY(-5px);
	}

	.timeline-textbox.fade-in {
		opacity: 1;
		transform: translateY(0);
	}

	.timeline-textbox.updating {
		position: relative;
		overflow: hidden;
	}

	.timeline-textbox.updating::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
		animation: shimmer 1s ease-in-out;
	}

	@keyframes shimmer {
		0% { left: -100%; }
		100% { left: 100%; }
	}

	/* SVG pin styles */
	.timeline-svg svg path.active,
	.timeline-svg svg circle.active {
		filter: drop-shadow(0 0 15px #ffd700) !important;
	}

	.timeline-svg svg path[data-step],
	.timeline-svg svg circle[data-step] {
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.timeline-svg svg path[data-step]:hover,
	.timeline-svg svg circle[data-step]:hover {
		filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
	}

	/* Keep orange squares (.st30) visible but non-interactive */
	.timeline-svg svg .st30 {
		cursor: default !important;
		pointer-events: none !important;
	}
	
	/* Mobile Vorteile Section */
	.section-vorteile {
		padding: 40px 0 0 0;
	}
	
	.section-vorteile h2 {
		font-size: 28px;
		line-height: 34px;
		margin-bottom: 15px;
	}
	
	.section-vorteile .teaser {
		font-size: 16px;
		line-height: 24px;
		margin-bottom: 30px;
	}
	
	.vorteile-container {
		flex-direction: column;
		gap: 30px;
	}
	
	.central-image {
		order: 2;
		max-width: 200px;
		margin: 0 auto;
	}
	
	.bubbles-container {
		order: 1;
		grid-template-columns: 1fr;
		gap: 15px;
		justify-items: center;
	}
	
	.bubble {
		max-width: 280px;
		padding: 15px;
	}
	
	/* Mobile Themenmodule Section */
	.section-themenmodule {
		padding: 40px 0;
	}
	
	.section-themenmodule h2 {
		font-size: 28px;
		line-height: 34px;
		margin-bottom: 5px;
	}
	
	/* Mobile Voraussetzungen Section */
	.section-voraussetzungen {
		padding: 40px 0 20px 0;
		background-color: #F5F5F5;
	}
	
	.section-voraussetzungen h2 {
		font-size: 28px;
		line-height: 34px;
		margin-bottom: 5px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.section-voraussetzungen p.teaser {
		padding-left: 20px;
		padding-right: 20px;
		font-weight: 600;
		font-size: 16px;
		line-height: 23px;
		letter-spacing: 0px;
	}
	
	/* Mobile section-image styling */
	.section-image img {
		min-height: 225px;
		object-fit: cover;
		object-position: center;
	}
	
	/* Hide desktop grid on mobile */
	.desktop-grid {
		display: none;
	}
	
	/* Show mobile slider */
	.mobile-slider {
		display: block;
		position: relative;
		padding: 0 60px;
		overflow: visible;
	}
	
	/* Show voraussetzungen slider on mobile */
	.voraussetzungen-slider.swiper {
		display: block;
		position: relative;
		padding: 0 60px;
		overflow: hidden;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
	
	
	/* Voraussetzungen mobile slider navigation */
	.voraussetzungen-slider .swiper-button-prev,
	.voraussetzungen-slider .swiper-button-next {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
		z-index: 10;
		cursor: pointer;
		background: none;
		border: none;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.voraussetzungen-slider .swiper-button-prev {
		left: 10px;
	}
	
	.voraussetzungen-slider .swiper-button-next {
		right: 10px;
	}
	
	.voraussetzungen-slider .swiper-button-prev img,
	.voraussetzungen-slider .swiper-button-next img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	
	.voraussetzungen-slider .swiper-button-prev:after,
	.voraussetzungen-slider .swiper-button-next:after {
		display: none;
	}
	
	.voraussetzungen-slider {
		padding-bottom: 50px;
	}
	
	.voraussetzungen-slider .swiper-slide {
		width: 100% !important;
		flex-shrink: 0 !important;
		padding: 10px 0px 0px 0px;
		box-sizing: border-box;
		min-width: 0;
	}

	.voraussetzungen-slider.swiper {
		padding-bottom: 30px;
	}

	.section-voraussetzungen .wrapper {
		padding-left: 0px;
		padding-right: 0px;
	}
	
	.voraussetzungen-slider .box {
		width: 90%;
		height: auto;
		margin: 0 auto;
		padding: 0px;
		box-sizing: border-box;
		max-width: 100%;
	}
	
	
	.voraussetzungen-slider .swiper-pagination {
		bottom: 10px;
	}
	
	.voraussetzungen-slider .swiper-pagination-bullet {
		background: #29795A;
		opacity: 0.3;
	}
	
	.voraussetzungen-slider .swiper-pagination-bullet-active {
		opacity: 1;
	}
	
	/* Mobile Ansprechpartner Section */
	.section-ansprechpartner {
		padding: 50px 0;
	}
	
	.ansprechpartner-layout {
		flex-direction: column;
		gap: 30px;
	}
	
	.region-buttons {
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
	}
	
	.region-btn {
		font-size: 14px;
		padding: 8px 16px;
	}
	
	/* Mobile FAQ Section */
	.section-faq {
		padding: 40px 0;
	}
	
	.section-faq h2 {
		font-size: 22px;
		line-height: 26px;
		letter-spacing: 0px;
		margin-bottom: 5px;
	}

	.section-faq .accordion-body {
		padding: 0px 15px;
		font-size: 14px;
		line-height: 22px;
	}

	.section-faq p.teaser {
		font-size: 16px;
		line-height: 23px;
		margin-bottom: 35px;
	}

	#colophon .site-info {
		font-size: 12px;
		line-height: 25px;
	}
	
	.accordion {
		flex-direction: column;
	}
	
	.accordion-column {
		width: 100%;
	}
	
	/* Mobile Teilnehmer Section */
	.section-teilnehmer {
		padding: 40px 0 25px 0;
	}
	
	.teilnehmer-layout {
		display: flex;
		flex-direction: column;
		gap: 0px
	}
	
	/* Mobile order: 1. Title and teaser first */
	.teilnehmer-left {
		order: 1;
		margin-bottom: 30px;
		width: 100%;
		max-width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}
	
	.teilnehmer-left h2 {
		margin-bottom: 5px;
		font-size: 28px;
		line-height: 34px;
		text-align: left;
	}
	
	.teilnehmer-left .teaser {
		text-align: left;
		margin-bottom: 0px;
		font-size: 16px;
		line-height: 24px;
	}
	
	/* Mobile order: 2. Testimonials second */
	.testimonials {
		order: 2;
		margin-top: 20px;
		margin-bottom: 30px;
	}
	
	.teilnehmer-right {
		order: 3;
		display: flex;
		flex-direction: column;
		gap: 0px;
		width: 100%;
		position: relative;
		left: 0;
		margin: 0;
		padding: 0px;
	}
	
	/* Mobile order: 3. Family buttons third */
	.family-buttons {
		order: 1;
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
		margin-bottom: 30px;
	}
	
	/* Mobile order: 4. Family images fourth */
	.family-images {
		order: 2;
		text-align: center;
		margin-bottom: 18px;
		margin-left: -20px;
		margin-right: -20px;
		width: calc(100% + 40px);
	}
	
	.family-btn {
		font-size: 14px;
		padding: 8px 16px;
	}
	
	.family-image {
		max-width: 100%;
		margin: 0 auto;
		height: auto;
		border-radius: 0px;
		overflow: hidden;
	}
	
	/* Mobile Testimonials Slider */
	.testimonials-slider {
		order: 3;
		margin-top: 20px;
		padding-bottom: 50px;
		width: 100%;
		overflow: visible;
		position: relative;
		padding: 0 40px;
		margin-left: -20px;
		margin-right: -20px;
	}
	
	.testimonials-slider .swiper-wrapper {
		display: flex;
		transition-property: transform;
		box-sizing: content-box;
	}
	
	.testimonials-slider .swiper-slide {
		flex-shrink: 0;
		width: 100%;
		height: auto;
		position: relative;
		transition-property: transform;
		display: flex;
		justify-content: center;
	}
	
	.testimonials-slider .testimonial-group {
		display: block !important;
	}
	
	.testimonials-slider .testimonial-card {
		width: 70%;
		max-width: 300px;
		margin: 0 auto;
		padding: 20px 15px;
		border-radius: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 15px;
		background: none;
		box-shadow: none;
	}
	
	.testimonials-slider .testimonial-card .testimonial-image {
		order: 1;
		margin-bottom: 15px;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		overflow: hidden;
	}
	
	.testimonials-slider .testimonial-card .testimonial-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.testimonials-slider .testimonial-card .testimonial-content {
		order: 2;
		width: 100%;
	}
	
	.testimonials-slider .testimonial-card .testimonial-content h3 {
		font-size: 16px;
		margin-bottom: 8px;
		color: #2c3e50;
		font-weight: 600;
		line-height: 1.3;
	}
	
	.testimonials-slider .testimonial-card .testimonial-text {
		font-size: 13px;
		line-height: 18px;
		color: #6c757d;
		margin: 0;
	}
	
	/* Navigation arrows */
	.testimonials-slider .swiper-button-prev,
	.testimonials-slider .swiper-button-next {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
		z-index: 10;
		cursor: pointer;
		background: none;
		border: none;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.testimonials-slider .swiper-button-prev {
		left: -10px;
		top: 65%;
	}
	
	.testimonials-slider .swiper-button-next {
		right: -10px;
		top: 65%;
	}
	
	.testimonials-slider .swiper-button-prev img,
	.testimonials-slider .swiper-button-next img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	
	.testimonials-slider .swiper-button-prev:after,
	.testimonials-slider .swiper-button-next:after {
		display: none;
	}
	
	/* Schwerpunktmodul slide styling for mobile */
	.testimonials-slider .schwerpunkt-slide {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px;
	}
	
	.testimonials-slider .schwerpunkt-slide .schwerpunktmodul {
		width: 70%;
		margin: 0 auto;
		text-align: center;
		translate: -20px;
	}
	
	.testimonials-slider .schwerpunkt-slide .schwerpunktmodul-label {
		display: block;
		font-family: 'Inter', sans-serif;
		font-weight: 700;
		font-size: 12px;
		color: #5CB77A;
		letter-spacing: 1px;
		margin-bottom: 8px;
		text-transform: uppercase;
	}
	
	.testimonials-slider .schwerpunkt-slide .schwerpunktmodul-text {
		font-family: 'Inter', sans-serif;
		font-weight: 600;
		font-size: 16px;
		line-height: 1.4;
		color: #2c3e50;
	}
	
	/* Mobile Projektablauf Section */
	.section-projektablauf {
		padding: 40px 0;
	}
	
	.section-projektablauf .wrapper {
		width: 100%;
		margin-left: 0;
		padding: 0 20px;
		display: block;
		flex-direction: column;
	}
	
	.projektablauf-intro {
		margin-bottom: 30px;
		padding: 0;
		order: -1;
	}
	
	.projektablauf-intro h2 {
		font-size: 28px;
		line-height: 34px;
		color: white;
		margin-bottom: 15px;
	}
	
	.projektablauf-intro .teaser {
		font-size: 16px;
		line-height: 24px;
		color: rgba(255, 255, 255, 0.9);
	}
	
	.projektablauf-container {
		height: auto;
		min-height: 400px;
		order: 1;
	}
	
	.timeline-textbox {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		padding: 20px;
		background: #5CB77A;
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
		transform: translateY(100%);
		transition: transform 0.3s ease;
		z-index: 1000;
		margin: 0;
		border-radius: 0px;
	}
	
	.timeline-textbox.active {
		transform: translateY(0);
	}
	
	.timeline-textbox-close {
		position: absolute;
		top: 15px;
		right: 15px;
		width: 32px;
		height: 32px;
		background: transparent;
		border: none;
		border-radius: 50%;
		color: white;
		font-size: 18px;
		font-weight: bold;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s ease;
		z-index: 10;
	}
	
	.timeline-textbox h3 {
		color: white;
		font-size: 18px;
		margin-bottom: 10px;
		line-height: 1.3;
		font-weight: 700;
	}
	
	.timeline-textbox p {
		color: white;
		font-size: 14px;
		line-height: 20px;
		margin: 0;
	}
}

/* ===============================================
   KONTAKT SECTION
   =============================================== */

.section-kontakt {
	background: #fff;
	padding: 80px 0;
	color: #565650;
	position: relative;
}

	.section-kontakt .wrapper {
		max-width: 1235px;
	}

.section-kontakt h2 {
	font-family: 'Block T Heavy', sans-serif;
	font-weight: 800;
	font-style: normal;
	font-size: 90px;
	line-height: 80px;
	letter-spacing: 0%;
	text-transform: uppercase;
	text-align: left;
	color: #5CB77A;
	margin: 0 0 50px 0;
}

.section-kontakt .teaser {
	text-align: center;
	font-size: 18px;
	color: #565650;
	margin-bottom: 50px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.kontakt-form-container {
	max-width: 1061px;
	margin: 0 auto;
	background: transparent;
	padding: 0;
}

/* Gravity Forms Styling */
.kontakt-form-container .gform_wrapper {
	margin: 0;
}

.kontakt-form-container .gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: auto;
	gap: 50px 20px;
	margin-bottom: 40px;
}

.gform-theme--foundation .gfield input.large {
	border: 3px solid #5CB77A;
	border-radius: 8px;
	padding: 0 17px;
	background: #F5F5F5;
	font-weight: 600;
	font-size: 16px;
	line-height: 47px;
	letter-spacing: 0px;
	height: 47px;
	box-sizing: border-box;
}

/* Erste Zeile: 4 Spalten */
.kontakt-form-container .gfield:nth-child(1),
.kontakt-form-container .gfield:nth-child(2),
.kontakt-form-container .gfield:nth-child(3),
.kontakt-form-container .gfield:nth-child(4) {
	grid-column: span 1;
	grid-row: 1;
}

/* Zweite Zeile: Bundesland (2 Spalten), Überschrift (1), Tageszeit (1) */
.kontakt-form-container .gfield:nth-child(5) {
	grid-column: 1 / 3;
	grid-row: 2;
}

.kontakt-form-container .gfield:nth-child(6) {
	grid-column: 3;
	grid-row: 2;
}

/* Wochentage unter der Überschrift im selben Spalten-Track */
.kontakt-form-container .gfield:nth-child(7) {
	grid-column: 4;
	grid-row: 2;
}

/* Wochentage Liste vertikal, volle Breite innerhalb der Spalte */
.kontakt-form-container .gfield:nth-child(7) .gfield_checkbox {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Tageszeit Label anzeigen */
.kontakt-form-container .gfield:nth-child(8) .gfield_label {
	display: block;
}

/* Tageszeit (Feld 8) – Radio-Gruppe vertikal */
.kontakt-form-container .gfield:nth-child(8) .gfield_radio {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: stretch;
	width: 100%;
}

/* Jede Option volle Breite */
.kontakt-form-container .gfield:nth-child(8) .gfield_radio .gchoice {
	display: block;
	width: 100%;
}

/* Tageszeit: Radio-Inputs verstecken */
.kontakt-form-container .gfield:nth-child(8) .gfield_radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* Tageszeit: Label als volle Breite mit Quadrat rechts */
.kontakt-form-container .gfield:nth-child(8) .gfield_radio label {
	width: 100%;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	border: 2px solid #4CAF50;
	border-radius: 12px;
	background: #fff;
	color: #4CAF50;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
	box-sizing: border-box;
	margin: 0;
}

.kontakt-form-container .gfield:nth-child(8) .gfield_radio label:hover {
	border-color: #45a049;
}

/* Quadrat rechts */
.kontakt-form-container .gfield:nth-child(8) .gfield_radio label::after {
	content: '';
	width: 36px;
	height: 36px;
	border: 3px solid #5CB77A;
	border-radius: 8px;
	background: #fff;
	display: grid;
	place-items: center;
}

/* X einblenden bei Auswahl (adjacent + general sibling für unterschiedliche Markups) */
.kontakt-form-container .gfield:nth-child(8) .gfield_radio input[type="radio"]:checked + label::after,
.kontakt-form-container .gfield:nth-child(8) .gfield_radio input[type="radio"]:checked ~ label::after {
	content: '✕';
	color: #5CB77A;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

/* Weitere Felder - volle Breite */
.kontakt-form-container .gfield:nth-child(n+9) {
	grid-column: 1 / -1;
}

.kontakt-form-container .gfield {
	margin: 0;
}

.kontakt-form-container .gfield_label {
	color: #565650;
	font-weight: 600;
	margin-bottom: 8px;
	display: block;
	font-size: 16px;
	font-weight: 500;
}

.kontakt-form-container input[type="text"],
.kontakt-form-container input[type="email"],
.kontakt-form-container input[type="tel"],
.kontakt-form-container select,
.kontakt-form-container textarea {
	width: 100%;
	padding: 15px 20px;
	border: 2px solid #4CAF50;
	border-radius: 8px;
	background: #fff;
	color: #565650;
	font-size: 16px;
	transition: all 0.3s ease;
	box-sizing: border-box;
}

.kontakt-form-container input[type="text"]::placeholder,
.kontakt-form-container input[type="email"]::placeholder,
.kontakt-form-container input[type="tel"]::placeholder,
.kontakt-form-container textarea::placeholder {
	font-weight: 700;
	font-style: normal;
	font-size: 12px;
	line-height: 12px;
	letter-spacing: 0.1em;	
	text-transform: uppercase;
	color: #5CB77A;
}

.kontakt-form-container input[type="text"]:focus,
.kontakt-form-container input[type="email"]:focus,
.kontakt-form-container input[type="tel"]:focus,
.kontakt-form-container select:focus,
.kontakt-form-container textarea:focus {
	outline: none;
	border-color: #45a049;
	box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

/* Bundesländer und Wochentage Styling */
.kontakt-form-container .gfield_checkbox .gchoice,
.kontakt-form-container .gfield_radio .gchoice {
	margin: 8px 8px 8px 0;
	display: block;
}

.kontakt-form-container .gfield_checkbox input[type="checkbox"],
.kontakt-form-container .gfield_radio input[type="radio"] {
	display: none;
}

.kontakt-form-container .gform-theme--framework .gfield--type-choice .gchoice {
	display: block;
	margin: 0;
}

.kontakt-form-container .gfield_checkbox label,
.kontakt-form-container .gfield_radio label {
	border: 3px solid #5CB77A;
	border-radius: 8px;
	padding: 11px 17px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	width: 100%;
	font-weight: 600;
	font-size: 16px;
	line-height: 25px;
	letter-spacing: 0px;
	text-align: left;
	min-width: 80px;
	box-sizing: border-box;
	margin: 0;
	color: #fff;
	background: #5CB77A;
	height: 47px;
}

.kontakt-form-container .gfield_checkbox input[type="checkbox"]:checked + label,
.kontakt-form-container .gfield_radio input[type="radio"]:checked + label {
	background: #f8f8f8;
	border-color: #45a049;
	color: #5CB77A;
}

.kontakt-form-container .gfield_checkbox label:hover,
.kontakt-form-container .gfield_radio label:hover {
	background: #f8f8f8;
	border-color: #45a049;
	color: #5CB77A;
}

/* Submit Button */
.kontakt-form-container .gform_footer {
	text-align: right;
	margin-top: 30px;
	justify-content: center;
}

.kontakt-form-container #gform_submit_button_1 {
	background: #F5F5F5;
	color: #5CB77A;
	border: 3px solid #5CB77A;
	padding: 8px 40px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	height: 47px;
	line-height: 25px;
	letter-spacing: 0px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
}

.kontakt-form-container #gform_submit_button_1:hover {
	background: #45a049;
	border-color: #45a049;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
	color: #fff;
}

/* Footer */
.kontakt-footer {
	text-align: center;
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid #e0e0e0;
}

.kontakt-footer p {
	color: #999;
	font-size: 14px;
	margin: 0;
	font-weight: 500;
	letter-spacing: 1px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.section-kontakt {
		padding: 40px 0;
	}

	.kontakt-form-container .gfield {
		margin-bottom: 15px;
	}
	
	.section-kontakt h2 {
		font-size: 36px;
		margin-bottom: 15px;
		line-height: 1;
	}
	
	.kontakt-form-container {
		padding: 0px;
		margin: 0 0px;
	}
	
	.kontakt-form-container .gform_wrapper .gform_fields {
		grid-template-columns: 1fr;
		gap: 15px;
	}
	
	.kontakt-form-container .gfield_checkbox label,
	.kontakt-form-container .gfield_radio label {
		display: block;
		margin-bottom: 10px;
		text-align: center;
	}

	.kontakt-form-container .gform_wrapper .gform_fields {
		display: block;
	}
}

/* Video Lightbox Styles */
.video-container {
	position: relative;
	display: block;
	cursor: pointer;
}

.video-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 125px;
	height: 125px;
	background: rgba(76, 175, 80, 0.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	z-index: 2;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.video-play-button:hover {
	background: rgba(76, 175, 80, 1);
	transform: translate(-50%, -50%) scale(1.1);
	box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}

.video-play-button::after {
	content: '';
	width: 0;
	height: 0;
	border-left: 30px solid white;
	border-top: 18px solid transparent;
	border-bottom: 18px solid transparent;
	margin-left: 6px;
}

.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	z-index: 1;
}

.video-container:hover .video-overlay {
	background: rgba(0, 0, 0, 0.2);
}

/* Lightbox Modal */
.video-lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	z-index: 9999;
	backdrop-filter: blur(5px);
}

.video-lightbox.active {
	display: flex;
	align-items: center;
	justify-content: center;
}

.video-lightbox-content {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	width: 100%;
	height: auto;
}

.video-lightbox video {
	width: 100%;
	height: auto;
	max-height: 90vh;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.video-lightbox-close {
	position: absolute;
	top: -50px;
	right: 0;
	background: none;
	border: none;
	color: white;
	font-size: 30px;
	cursor: pointer;
	padding: 10px;
	transition: all 0.3s ease;
	z-index: 10000;
}

.video-lightbox-close:hover {
	color: #4CAF50;
	transform: scale(1.1);
}

/* Mobile Responsive for Video */
@media (max-width: 768px) {
	.video-play-button {
		width: 60px;
		height: 60px;
	}
	
	.video-play-button::after {
		border-left: 15px solid white;
		border-top: 9px solid transparent;
		border-bottom: 9px solid transparent;
		margin-left: 3px;
	}
	
	.video-lightbox-content {
		max-width: 95vw;
		max-height: 85vh;
	}
	
	.video-lightbox-close {
		top: -40px;
		font-size: 24px;
	}
}


@media (max-width: 1194px) {
	.vorteile-container {
		max-width: 1000px;
		min-height: 800px;
		padding: 60px 20px 30px 20px;
	}
	
	.central-image {
		max-width: 320px;
		width: 320px;
	}
	
	.bubble-green {
		width: 130px;
		height: 130px;
	}
	
	/* Tablet bubble sizes (769px - 1194px) */
	.bubble-green.has-text {
		width: 150px;
		height: 150px;
	}
	
	.bubble-gray {
		width: 150px;
		height: 150px;
	}
	
	.bubble-text {
		font-size: 14px;
		line-height: 20px;
	}
	
	/* Tablet positioning */
	.bubble-1 { top: 60%;
		left: 0%; width: 200px; height: 200px; }
	.bubble-2 { top: 8%; left: 48%; transform: translateX(-50%); width: 200px; height: 200px; }
	.bubble-3 {     top: 8%;
		right: 10%; width: 200px; height: 200px; }
	.bubble-4 { top: 32%; left: 8%; width: 200px; height: 200px; }
	.bubble-5 { top: 32%; right: 0%; width: 200px; height: 200px; }
	.bubble-6 {     top: 2%;
		left: 11%; width: 225px; height: 225px; }
	.bubble-7 { top: 65%; right: 2%; width: 225px; height: 225px; }
	.bubble-8 { top: 35%;
		left: 35%; width: 225px; height: 225px; }
	.bubble-9 { top: 25%; right: 25%; width: 200px; height: 200px; }
	.bubble-10 { top: 55%; left: 48%; transform: translateX(-50%); width: 200px; height: 200px; }
	
	/* Green decorative bubbles positioning */
	.bubble-green-1 { top: 9%; left: 35%; width: 100px; height: 100px;	}
	.bubble-green-2 { top: 44%;
		right: 20%; width: 100px; height: 100px; }
	.bubble-green-3 { top: 56%;
        left: 25%; width: 100px; height: 100px; }
}

/* Mobile bubble sizes (up to 768px) */
@media (max-width: 768px) {


	
	.bubble-green.has-text {
		width: 120px;
		height: 120px;
		padding: 15px;
	}

	.static-bubbles-container {
		display: block;
		margin: 0px
	}
	
	.section-vorteile h2,
	.section-vorteile .teaser {
		display: none;
	}

	.bubble-gray {
		width: 120px;
		height: 120px;
		padding: 15px;
	}
	
	.bubble-text {
		font-size: 14px;
		line-height: 20px;
	}
}