/* CI Farben */
:root {
	--base-ulight: #e4e4e3;
	--base-light: #333333;
	--base: #232423;
	--base-sdark: #1f1f1f;
	--base-dark: #171717;
	--primary: var(--gold-dark);
	--primary-medium: var(--gold);

	/* --primary-ulight: #fef0e5;
	--primary-light: #f4bd8c;
	--primary: #d87d0d;
	--primary-medium: #ac7013; */
	--gold-light: #fde5d3;
	--gold: #f7cca8;
	--gold-dark: #E08D3F;
	--team: #7D4DFF;
	--team-light: #c6a5ff;
	--team-medium: #b48bff;
	--team-dark: #5435a2;

	/* Fonts */
	--font-primary: 'Outfit', sans-serif;
	--font-heading: 'Outfit', serif;
}

.reveal-text .word {
	display: inline-block;
}

.reveal-text .line {
	overflow: hidden;
	display: block;
}

.site-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	padding-block: var(--space-m);
}

/* --- MOBILE ANPASSUNG (< 992px) --- */
@media (max-width: 992px) {
	.header-nav {
		position: fixed;
		top: 0;
		right: -100%;
		width: 100%;
		height: 100vh;
		background-color: var(--primary);
		z-index: 1500;
		transition: right 0.4s ease;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header-nav.is-active {
		right: 0;
	}

	.nav-list {
		flex-direction: column;
		align-items: center;
	}
}

/* Burger Menu Icon (Elegant) */
.menu-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px;
	z-index: 2000;
	display: none;
}

.burger-icon,
.burger-icon::before,
.burger-icon::after {
	width: 28px;
	height: 3px;
	background-color: var(--base-medium);
	display: block;
	transition: 28px;
}

.burger-icon {
	position: relative;
}

.burger-icon::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 0;
}

.burger-icon::after {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
}

.menu-toggle.is-active .burger-icon {
	background: transparent;
}

.menu-toggle.is-active .burger-icon::before {
	transform: rotate(45deg) translate(5px, 6px);
}

.menu-toggle.is-active .burger-icon::after {
	transform: rotate(-45deg) translate(5px, -6px);
}

/* =========================================
   MOBILE ANPASSUNG (< 992px)
   ========================================= */
@media (max-width: 992px) {
	.menu-toggle {
		display: flex !important;
	}

	/* Das mobile Menü-Overlay */
	.header-nav {
		position: fixed;
		top: 0;
		right: -100%;

		/* Versteckt */
		width: 100%;
		height: 100vh;
		background-color: var(--primary);

		/* Blaues Design */
		display: flex;
		align-items: center;
		justify-content: center;
		transition: right 0.4s cubic-bezier(0.77,0.2,0.05,1.0);
		z-index: 1500;
	}

	.header-nav.is-active {
		right: 0;
	}

	.nav-list {
		flex-direction: column;
		gap: var(--space-l);
	}

	/* Animation: Burger zu X */
	.menu-toggle.is-active .burger-icon {
		background: transparent;
	}

	.menu-toggle.is-active .burger-icon::before {
		transform: rotate(45deg) translate(5px, 6px);
	}

	.menu-toggle.is-active .burger-icon::after {
		transform: rotate(-45deg) translate(5px, -6px);
	}
}

@media (max-width:992px) {
	.nav-list a {
		font-size: var(--text-l);
	}
}

/* =========================================
BUTTONS
   ========================================= */
.btn--primary {
	background-color: transparent;
	border: 1px solid var(--primary-dark);
	color: var(--primary-dark);
	border-radius: var(--radius-pill);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 500;
	padding-inline: 4rem;
	min-width: 290px;
}

/* HOVER ZUSTAND */
.btn--primary:hover {
	background-color: var(--primary);
	color: var(--base);
	transform: translateY(-2px);
}

/* ACCESSIBILITY: Fokus-Zustand */
.btn--primary:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 4px;
}

.btn--base {
	background-color: transparent;
	border: 1px solid var(--base-medium);
	color: var(--base-medium);
	border-radius: var(--radius-pill);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-weight: 500;
	padding-inline: 4rem;
	max-width: 350px;
}

/* HOVER ZUSTAND */
.btn--base:hover {
	background-color: var(--base);
	color: var(--primary-dark);
	transform: translateY(-2px);
}

/* ACCESSIBILITY: Fokus-Zustand */
.btn--base:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 4px;
}

.btn-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	color: var(--base-medium);
	text-decoration: underline;
	text-underline-offset: 4px;
	font-weight: 500;
	cursor: pointer;
}

.btn-arrow::before {
	content: "";
	width: 1.4rem;
	height: 1.4rem;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 0.3s ease;
}

.btn-arrow:hover::before {
	transform: translateX(4px);
}

.btn--team {
	background-color: var(--team);
	border: 1px solid var(--team);
	color: var(--bw-100);
	border-radius: var(--radius-pill);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-weight: 500;
	padding-inline: 4rem;
}

/* HOVER ZUSTAND */
.btn--team:hover {
	background-color: var(--team-dark);
	color: var(--bw-100);
	transform: translateY(-2px);
}

/* ACCESSIBILITY: Fokus-Zustand */
.btn--team:focus-visible {
	outline: 2px solid var(--team);
	outline-offset: 4px;
}

.mobile-menu {
	background: var(--primary);
	position: fixed;
	z-index: 1000;
	width: 100%;
	height: 100vh;
	top: 0;
	transform: translateY(-100%);
	display: flex;
	flex-direction: column;
	padding: var(--space-m);
	align-items: center;
	justify-content: center;
}

.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: space-around;
	width: 30px;
	height: 24px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 1010;
}

.menu-line {
	width: 100%;
	height: 3px;
	background-color: var(--base-medium);
	transition: all 0.3s ease;
	display: block;
}

.mobile-nav-list {
	display: flex;
	list-style: none;
	gap: var(--space-s);
	flex-direction: column;
	align-items: center;
}

.mobile-nav-list a {
	color: var(--base-medium);
	text-decoration: none;
	font-family: ladolce-regular;
	font-size: var(--h1);
	white-space: nowrap;
	line-height: 1;
}

html.no-scroll,
body.no-scroll {
	overflow: hidden !important;
	height: 100% !important;
	position: relative;
}

/* Neue Elemente */
.hero-section {
	height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	padding-bottom: 0;
}

.hero-bg-img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	top: 0;
}

.hero-overlay {
	width: 100%;
	height: 100%;
	opacity: 0.55;
	background: #000;
	position: absolute;
	z-index: 0;
}

.hero-container {
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--space-s);
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.h1-base {
	background-image: linear-gradient(to right, var(--gold-dark), var(--gold));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
	font-weight: 900;
	font-size: calc(var(--h1) * 1.3);
	line-height: 0.8;
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	text-transform: uppercase;
}

@media (max-width:767px) {
	.h1-base {
		font-size: var(--h1);
	}
}

.h1-team {
	background-image: linear-gradient(to right, var(--team), var(--team-medium));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
	font-weight: 900;
	font-size: calc(var(--h1) * 1.3);
	line-height: 0.8;
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	text-transform: uppercase;
}

.hero-eyebrow {
	color: var(--bw-100);
	font-size: var(--text-l);
	text-transform: uppercase;
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
}

.intro-text {
	text-align: center;
	color: var(--bw-100);
	font-size: var(--text-m);
	line-height: 1.2;
	max-width: 65ch;
	font-weight: 200;
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
}

.intro-container {
	flex-direction: column;
	display: flex;
	align-items: center;
	row-gap: var(--space-m);
	margin-top: var(--space-m);
}

.intro-section {
	padding-top: (--space-m) !important;
	padding-bottom: var(--space-l);
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: var(--space-l);
	background-size: cover;
	background-image: url('../img/stimmraum_gradient.avif');
	background-attachment: fixed;
}

.intro-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--space-s);
}

.intro-card {
	border-radius: var(--radius-m);
	display: flex;
	flex-direction: column;
	align-items: center;
	background: rgba(38, 38, 38, 0.55);
	padding: var(--space-l) var(--space-m);
	row-gap: var(--space-m);
	justify-content: space-between;
}

.intro-list-element {
	list-style: none;
	color: var(--bw-100);
	font-size: var(--text-xl);
	font-weight: 700;
	text-align: center;
}

.hero-text {
	color: var(--bw-100);
	font-size: var(--text-l);
	font-weight: 500;
	line-height: 1.2;
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	max-width: 45ch;
}

.intro-headline {
	font-size: calc(var(--h2)*1.2);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	text-align: center;
	background-image: linear-gradient(to right, var(--gold-dark), var(--gold));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
	max-width: 22ch;
}

/* Stellt sicher, dass der Inhalt (Text, Buttons) ÜBER dem Overlay liegt */
.dark-overlay > * {
	position: relative;
	z-index: 2;
}

.intro-card-ul {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: auto;
	row-gap: 0.5rem;
}

.quote-section {
	min-height: 60vh;
	position: relative;

	/* Opacity hier entfernt, damit nicht alles blass wird */
	background: var(--primary);

	/* Ein dunkler Boden für das Bild */
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: var(--space-m);
	z-index: 2;
}

.img-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--base);
	opacity: 0.2;
	filter: grayscale(100%);
}

.quote-text {
	z-index: 3;
	color: var(--bw-100);
	font-size: calc(var(--h1)*1.3);
	font-family: 'TrashHand';
	text-align: center;
	max-width: 30ch;
	line-height: 1.1;
	font-weight: lighter;
}

.quote-author {
	z-index: 2;
	color: var(--bw-100);
	text-transform: uppercase;
	font-weight: 500;
	font-style: italic;
	border-bottom: 2px solid var(--gold);
	padding-bottom: 1rem;
}

.present-section {
	padding-bottom: 0;
	background: var(--base-sdark);
}

.present-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-m);
}

@media (max-width: 992px) {
	.present-container {
		grid-template-columns: 1fr;
	}
}

.h2-base {
	font-size: var(--h2);
	font-weight: 800;
	background-image: linear-gradient(to right,var(--gold-dark),var(--gold));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
	line-height: 1.2;
}

.present-content-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	row-gap: var(--space-xs);
}

@media (max-width: 992px) {
	.present-content-wrapper {
		order: -1;
	}
}

.text-base {
	color: var(--bw-100);
	font-size: var(--text-m);
	line-height: 1.4;
	text-align: left;
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
}

.service-hero {
	position: relative;
	padding-top: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	padding-bottom: 0;
	height: 100vh;
}

.list-element-base {
	color: var(--bw-100);
	font-weight: 400;
	text-align: left;
	max-width: 35ch;
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	line-height: 1.2;
}

.list-heading-base {
	color: var(--gold-light);
	display: inline-block;
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	font-size: var(--h4);
	text-align: center;
	max-width: 28ch;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.1;
	list-style: none;
}

.base-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
	gap: var(--space-s);
}

.base-card {
	border-radius: var(--radius-m);
	display: flex;
	flex-direction: column;
	align-items: center;
	background: rgba(45, 45, 45, 0.55);
	padding: var(--space-l) var(--space-m);
	row-gap: var(--space-m);
	position: relative;
	overflow: hidden;
	min-height: 55rem;
	justify-content: center;
}

.base-card-ul {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: auto;
	row-gap: 0.5rem;
}

.img-full-section {
	height: 68vh;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: var(--space-m);
}

.arrow-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: var(--space-m);
	align-items: center;
}

.arrow-container {
	/* Hier kannst du die Größe anpassen */
	margin: 20px auto;
}

.drawing-arrow {
	width: 14rem;
	height: auto;
	transform: rotate(15deg);
	display: block;
}

.drawing-arrow path {
	fill: var(--bw-100);

	/* Deine gewünschte Farbe für den Pfeil */
	/* Die Maske: Wir schieben ein unsichtbares Rechteck von links nach rechts */
	clip-path: inset(0 100% 0 0);

	/* Animation: 1.5 Sekunden Dauer, startet nach 0.5s Pause */
	animation: revealArrow 1s ease-in-out forwards;
	animation-delay: 0.5s;
}

@keyframes revealArrow {
	0% {
		clip-path: inset(0 100% 0 0);
	}

	100% {
		clip-path: inset(0 0 0 0);
	}
}

.arrow-text-right {
	color: var(--bw-100);
	font-size: var(--text-l);
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	line-height: 1.2;
	font-weight: 400;
	width: min(450px, 90%);
}

.card-quote {
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	color: var(--gold);
	font-weight: 500;
	max-width: 12ch;
	text-align: center;
	font-size: var(--h2);
	line-height: 1;
}

.quote-mark {
	color: #d4c89e;

	/* Die beige Farbe aus dem Bild */
	font-size: 6em;

	/* Doppelt so groß wie der normale Text */
	line-height: 0;

	/* Verhindert, dass die Zeile höher wird */
	vertical-align: -0.2em;

	/* Schiebt das untere Zeichen etwas tiefer */
}

.quote-graphic {
	position: absolute;
	top: 10%;
	right: 10%;
	width: 40%;
	opacity: .8;
}

.grid-card {
	/* border: solid 1px var(--primary); */
	border-radius: var(--radius-m);
	display: grid;
	flex-direction: column;
	align-items: center;
	background: var(--base);
	padding: var(--space-s);
	justify-content: space-between;
	grid-template-columns: 3fr 2fr;
	min-height: 50rem;
	overflow: hidden;
	position: relative;
}

@media (max-width: 992px) {
	.grid-card {
		grid-template-columns: 1fr;
	}
}

.grid-card-content {
	display: flex;
	flex-direction: column;
	row-gap: var(--space-m);
	padding: var(--space-l);
	align-items: flex-start;
}

.grid-card-img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	right: 0;
}

.grid-card-img-left {
	order: -1;
}

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

.card-align-top {
	justify-content: flex-start;
}

.text-lowercase {
	text-transform: none;
}

.width-m {
	width: 15ch;
}

.img-fixed {
	position: fixed;
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -2;
}

.list-element-base {
	list-style: none !important;
	position: relative;
	padding-left: 30px;
	margin-bottom: 10px;
	line-height: 1.4;
	display: block;
}

.list-element-base::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: -2px;
	color: var(--gold);
	font-weight: bold;
	font-size: 1.2em;
}

.about-content-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: var(--space-l);
	gap: var(--space-s);
}

.quote-s {
	font-family: 'TrashHand';
	font-size: var(--h1);
	line-height: 1.1;
	color: var(--gold-light);
}

.about-grid {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: var(--space-l);
	padding-top: var(--space-l);
	padding-bottom: var(--space-l);
}

.about-img {
	border-radius: 67% 33% 68% 32% / 30% 52% 48% 70%;
	aspect-ratio: 3/4;
	object-fit: cover;
	width: min(450px, 80%);
	border-right: 1rem solid var(--gold);
}

.text-left {
	text-align: left !important;
}

.h1-indent {
	display: block !important;
	text-align: left !important;
	padding-left: 5rem;
	text-indent: -5rem;
	margin-top: 0;
	margin-bottom: 0;
}

@media (max-width:767px) {
	.h1-indent {
		font-size: var(--h1);
		text-align: center;
	}
}

.cooperation-img {
	width: min(350px, 80%);
}

.cooperation-img-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.cooperation-text {
	font-size: var(--text-m);
	color: var(--bw-100);
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	width: 55ch;
}

.about-img-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/* Header */
/* =========================================
   HEADER & NAVIGATION (BW FRAMEWORK v2.0)
   ========================================= */

/* Accessibility: Skip-Link */
.skip-link {
	position: absolute;
	top: -10rem;
	left: 1rem;
	background: var(--color-primary);
	color: white;
	padding: 1rem;
	z-index: 2000;
	transition: top 0.3s;
}

.skip-link:focus {
	top: 1rem;
}

.site-header {
	width: 100%;

	/* position: sticky */
	top: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	padding: var(--space-s) var(--gutter);
	background: transparent;
	position: absolute;
}

/* Container sorgt für Logo links, Burger rechts */
.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.nav-list {
	display: flex;
	gap: var(--space-m);
	list-style: none;
	margin: 0;
	padding: 0 !important;
	align-items: center;
}

.nav-item {
	position: relative;
}

/* Dropdown Auslöser */
.dropdown-trigger {
	background: transparent;
	border: none;
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	font-size: var(--text-s);
	color: var(--bw-100);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.2rem 0;
	width: 100%;
	text-decoration: none;

	/* Wichtig für mobile Klickfläche */
	text-align: left;
	text-transform: uppercase;
	font-weight: 500;
}

@media (max-width:992px) {
	.dropdown-trigger {
		font-size: var(--text-l);
	}
}

/* 1. Dropdown Pfeile (Kontur & Größer) */
.chevron {
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -0.6rem;
	transition: transform 0.3s ease;
}

/* Desktop Dropdown Menü */
.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 18rem;
	background: var(--base);
	border: 1px solid var(--base-sdark);
	border-radius: var(--radius-s);
	min-width: 25rem;
	padding: var(--space-xs) !important;
	box-shadow: 0 10px 25px rgba(0,0,0,0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(1rem);
	transition: all 0.3s ease;
	z-index: 10;
	list-style: none;
}

.nav-item:nth-last-child(-n+2) .dropdown-menu {
	left: auto;
	right: 0;
}

/* Fix: Letzter Dropdown ragt nicht raus */
.nav-item:last-child .dropdown-menu {
	left: auto;
	right: 0;
}

/* Hover-Effekte Desktop */
@media (min-width: 993px) {
	.nav-item:hover .dropdown-menu,
	.nav-item:focus-within .dropdown-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.nav-item:hover .chevron {
		transform: rotate(225deg);
		margin-top: 0.4rem;
	}
}

.dropdown-menu a {
	display: block;
	padding: 1.2rem 1.6rem;
	text-decoration: none;
	list-style: none !important;
	color: var(--bw-100);
	font-size: var(--text-s);
	border-radius: var(--radius-s);
	text-align: left;
	line-height: 1.3;
}

@media (max-width:991px) {
	.dropdown-menu a {
		font-size: var(--text-m);
	}
}

.dropdown-menu a:hover {
	background-color: var(--primary);
}

/* Burger Button - IMMER RECHTS */
.menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 1rem;
	z-index: 1001;
	margin-left: auto;

	/* Pusht den Burger nach rechts */
}

.hamburger,
.hamburger::before,
.hamburger::after {
	display: block;
	width: 2.8rem;
	height: 2px;
	background: var(--bw-100);
	position: relative;
	transition: 0.3s;
}

.hamburger::before,
.hamburger::after {
	content: "";
	position: absolute;
	left: 0;
}

.hamburger::before {
	top: -8px;
}

.hamburger::after {
	bottom: 8px;
}

/* MOBILE NAVIGATION (Linksseitig rein, Burger rechts) */
@media (max-width: 992px) {
	.menu-toggle {
		display: block;
	}

	.nav-main {
		position: fixed;
		top: 0;
		left: -100%;

		/* Startet links außerhalb */
		width: 100%;
		height: 100vh;
		background: var(--base);
		padding: 10rem var(--gutter) 2rem;
		box-shadow: 10px 0 30px rgba(0,0,0,0.1);
		transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		overflow-y: auto;
	}

	.nav-main.is-active {
		left: 0 !important;
	}

	/* Menüpunkte linksbündig ausrichten */
	.nav-list {
		flex-direction: column;
		align-items: flex-start;

		/* Links ausrichten */
		gap: var(--space-s);
		width: 100%;
	}

	.nav-item {
		width: 100%;
	}

	.dropdown-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		display: none;

		/* Toggle via JS */
		padding-left: var(--space-m) !important;

		/* Einrückung für Hierarchie */
		width: 100%;
	}

	.nav-item.is-open .dropdown-menu {
		display: block;
	}

	.nav-item.is-open .chevron {
		transform: rotate(225deg);
	}

	/* Burger Animation */
	.menu-toggle[aria-expanded="true"] .hamburger {
		background: transparent;
	}

	.menu-toggle[aria-expanded="true"] .hamburger::before {
		transform: rotate(45deg);
		top: 0;
	}

	.menu-toggle[aria-expanded="true"] .hamburger::after {
		transform: rotate(-45deg);
		bottom: 0;
	}
}

.site-logo {
	width: 17rem;
}

.workshop-container {
	display: flex;
	flex-direction: column;
	row-gap: var(--space-m);
}

.quote-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: var(--space-m);
}

/* --- Footer Styles --- */
.site-footer {
	background-color: var(--base-dark);
	padding: 4rem var(--gutter) 1.5rem;
	border-top: 1px solid var(--base);
}

.footer-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 3rem 2rem;
	margin-bottom: 3rem;
}

.footer-logo {
	max-width: 180px;
	height: auto;
	display: block;
}

.footer-heading {
	font-size: var(--text-s);
	font-weight: 600;
	margin-bottom: 1.25rem;
	color: var(--gold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
}

.site-footer address {
	font-style: normal;
	font-size: var(--text-s);
	line-height: 1.7;
	color: #fff;
}

.site-footer address p {
	margin-top: 0;
	margin-bottom: 1rem;
}

.site-footer address a {
	color: #fff;
	text-decoration: none;
	transition: color 0.3s ease;
}

.site-footer address a:hover {
	color: #fff;
}

.footer-nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-nav-list li {
	margin-bottom: 0.75rem;
}

.footer-nav-list a {
	color: #fff !important;
	text-decoration: none;
	transition: color 0.3s ease;
	font-size: var(--text-s);
}

.footer-nav-list a:hover {
	color: #000;
}

.footer-bottom {
	text-align: center;
	padding-top: 2rem;
	border-top: 1px solid var(--base);
	color: #fff;
	font-size: var(--text-xs);
}

/* --- Responsive Anpassungen --- */
@media (max-width: 768px) {
	.site-footer {
		padding: 3rem 0 1.5rem;
	}

	.footer-inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		text-align: center;
	}

	.footer-logo {
		margin: 0 auto;
	}
}

.card-no-bg {
	background: transparent;
}

.img-width-m {
	width: min(300px, 80%);
}

.grid-card-img-wrapper {
	display: flex;
	justify-content: center;
}

/* Accordion */
/* Container-Styling */
.accordion-container {
	width: 100%;
	margin: 2rem 0;
	display: flex;
	flex-direction: column;
}

/* Das Details-Element */
.accordion-item {
	background: transparent;
	overflow: hidden;
	border-bottom: 1px solid var(--gold);
	transition: background-color 0.3s ease;
	padding: 0.7rem var(--space-xs);
}

.accordion-item:first-child {
	border-top: 1px solid var(--gold);
}

/* Der Header (Summary) */
.accordion-header {
	padding: 1.5rem 0;
	list-style: none;
	cursor: pointer;
	font-weight: 400;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--gold);
	user-select: none;
	font-size: var(--h3);
	outline: none;
	text-transform: uppercase;
}

/* Entfernt Standard-Pfeile */
.accordion-header::-webkit-details-marker {
	display: none;
}

/* Das Custom-Icon (Plus) */
.accordion-icon {
	width: 3rem;
	height: 3rem;
	color: var(--gold);
	position: relative;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
}

.accordion-icon::before,
.accordion-icon::after {
	content: "";
	position: absolute;
	background-color: currentColor;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.accordion-icon::before {
	width: 2.5rem;
	height: 2px;
}

.accordion-icon::after {
	width: 2px;
	height: 2.5rem;
}

/* Der Inhalt (Body) - Vorbereitet für GSAP */
.accordion-body {
	height: 0;
	overflow: hidden;
	opacity: 0;
	color: var(--gold-light);
	line-height: 1.6;
}

/* Plus dreht sich zum X wenn das Attribut 'open' vorhanden ist */
.accordion-item[open] .accordion-icon {
	transform: rotate(45deg);
}

/* Fallback für Browser ohne JS */
.accordion-item[open] .accordion-body {
	height: auto;
	opacity: 1;
	padding-bottom: 2rem;
}

.accordion-text {
	max-width: 85ch;
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
}

.special-border-img {
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 81% 19% 71% 29% / 45% 74% 25% 55%;
	max-width: 600px;
	width: 100%;
}

.accordion-content-headline {
	color: var(--gold);
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	font-size: var(--text-l);
	font-weight: 500;
}

/* Der äußere Container, der in deiner Section liegt */
.dual-image-group {
	width: 100%;
	padding: 2rem 0;
	display: flex;
	justify-content: center;
}

/* Der Wrapper, der die Größe der Gruppe definiert */
.dual-image-wrapper {
	position: relative;
	width: 100%;
	max-width: 550px;

	/* Hier steuerst du die Gesamtgröße */
	aspect-ratio: 3 / 4;

	/* Sorgt für festes Größenverhältnis */
}

/* Gemeinsames Styling für die Bild-Boxen */
.img-box {
	position: absolute;
	overflow: hidden;
}

.img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: var(--radius-l);
}

/* Positionierung Bild 1 (Hinten) */
.img-box.back {
	width: 70%;
	height: 70%;
	top: 0;
	left: 0;
	z-index: 1;
}

/* Positionierung Bild 2 (Vorne) */
.img-box.front {
	width: 70%;
	height: 70%;
	bottom: 0;
	right: 0;
	z-index: 2;
}

/* Responsive Anpassung für Mobile */
@media (max-width: 768px) {
	.dual-image-wrapper {
		aspect-ratio: auto;
		height: 400px;
	}
}

.img-card {
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.img-box-img {
	object-fit: cover;
	height: 100%;
	border-radius: var(--radius-l);
}

.subsites-hero {
	height: 70vh;
	padding-bottom: 0 !important;
}

.intro-card-img {
	aspect-ratio: 4/3;
	object-fit: cover;
	filter: saturate(65%);
}

.intro-img-card {
	border-radius: var(--radius-m);
	display: flex;
	flex-direction: column;
	align-items: center;
	background: rgba(38, 38, 38, 0.55);
	row-gap: var(--space-m);
	justify-content: flex-start;
}

.intro-img-card-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-left: var(--space-m);
	padding-right: var(--space-m);
	padding-bottom: var(--space-m);
	gap: var(--space-xs);
}

.grid-card-wrp {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
}

.arrow-wrp-left {
	max-width: 25ch;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--space-m);
}

.arrow-img {
	width: 100%;
	max-width: 100px;
}

.arrow-text-left {
	font-size: var(--h2);
	font-weight: 800;
	background-image: linear-gradient(to right,var(--gold-dark),var(--gold));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
	line-height: 1.2;
	width: 16ch;
}

.section-pad-0 {
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: var(--space-l);
	background-size: cover;
	background-image: url('../img/stimmraum_gradient.avif');
	background-attachment: fixed;
}

.base-box {
	width: 100%;
	background: var(--base);
	border-radius: var(--radius-m);
	padding-top: var(--space-l);
	padding-bottom: var(--space-l);
}

.workshop-card {
	list-style: none;
	display: grid;
	grid-template-columns: 2fr 3fr;
	grid-template-rows: auto;
	background: rgba(38, 38, 38, 0.55);
}

@media (max-width: 992px) {
	.workshop-card {
		display: flex;
		flex-direction: column;
	}
}

.workshop-content-wrapper {
	padding: var(--space-l) var(--space-m);
}

.workshop-img {
	height: 100%;
	object-fit: cover;
	object-position: center center;
	filter: saturate(65%);
}

.workshop-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
}

.workshop-wrapper li {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 992px) {
	.workshop-wrapper li {
		grid-template-columns: 2fr 3fr;

		/* Bild links (2fr), Text rechts (3fr) */
		align-items: center;
	}

	/* Jede zweite Card im Wrapper spiegeln */
	.workshop-wrapper li:nth-child(even) {
		direction: rtl;
	}

	/* Text-Inhalt wieder auf links-nach-rechts stellen */
	.workshop-wrapper li:nth-child(even) > * {
		direction: ltr;
	}
}

.workshop-img-wrapper {
	height: 100%;
}

.list-element-xl {
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	font-size: var(--h4);
	list-style: none;
	width: 100%;
	border-bottom: 1px solid var(--gold-light);
	padding-top: var(--space-xs);
	padding-bottom: var(--space-xs);
	color: var(--gold-light);
}

/* Das Haupt-Dialog-Element */
.modal-dialog {
	border: none;
	border-radius: 12px;
	padding: 0;
	max-width: 650px;
	width: 90%;
	box-shadow: 0 20px 40px rgba(0,0,0,0.3);
	overflow: hidden;
	background-color: var(--base);
}

/* Hintergrund-Abdunkelung (Backdrop) */
.modal-dialog::backdrop {
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(3px);
}

/* Wrapper für den inneren Inhalt */
.modal-content-wrapper {
	position: relative;
	padding: 2.5rem;
}

/* Schließen-Button (oben rechts) */
.modal-close-btn {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: transparent;
	border: none;
	font-size: 4rem;
	cursor: pointer;
	line-height: 1;
	padding: 0.25rem 0.5rem;
	color: var(--gold-light);
	transition: color 0.2s ease, transform 0.2s ease;
	z-index: 10;
}

/* Layout-Struktur im Modal */
.modal-body {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: center;
	padding-top: var(--space-m);
}

/* Überschrift im Modal */
.modal-body h2 {
	margin: 0;
	padding-right: 2rem;

	/* Platz für den Schließen-Button lassen */
	font-weight: 700;
}

/* Bild-Styling innerhalb des Modals */
.modal-inner-content img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-s);
	display: block;
	margin-bottom: 1.5rem;
	object-fit: cover;
}

/* Optionale Animation beim Öffnen */
.modal-dialog[open] {
	animation: modal-appear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-appear {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.95);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Fix für Scroll-Lock (optional, je nach Browser-Support für Dialog) */
body:has(dialog[open]) {
	overflow: hidden;
}

.text-bold {
	font-weight: 600;
}

/* Trust Section Styles (Referenzen & Stimmen) */
.trust-section {
    padding: 4rem 0;
    background-color: transparent;
}

.trust-heading {
    font-family: var(--font-heading, sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--gold-light, #d4af37);
    opacity: 0.8;
}

.trust-logos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-l);
    list-style: none;
    padding: 0;
    margin-top: var(--space-s);
    margin-bottom: var(--space-m);
}

.trust-logo-item {
    flex: 0 1 160px;
    display: flex;
    justify-content: center;
}

.trust-logo {
    max-width: 100%;
    filter: grayscale(1) brightness(0.8);
    transition: filter 0.3s ease;
    opacity: 0.9;
    max-height: 65px;
}

.trust-logo:hover {
    filter: grayscale(0) brightness(1);
    opacity: 1;
}

.testimonials-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.03);
    padding: var(--space-s);
    padding-bottom: var(--space-m);
    border-radius: var(--radius-m);
    margin: 0;
    display: flex;
    flex-direction: column;
}

.testimonial-quote p {
    font-size: var(--text-s);
    font-style: italic;
    color: #ffffff;
}

.testimonial-author {
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    color: var(--gold-light, #d4af37);
    margin-top: auto;
    text-align: center;
}

@media (max-width: 768px) {
    .trust-logos-grid {
        gap: 2rem;
    }

    .trust-logo-item {
        flex: 0 1 140px;
    }

    .testimonial-card {
        padding: 1.5rem;
    }
}

.testimonials-heading-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}