@charset "UTF-8";
/* ==================================================================
   Malermeister Danz, Laatzen
   CI: Blau #005E8E · Limette #A4C417 (aus dem Logo entnommen)
   ================================================================== */

/* ---------- 1. Design-Token ------------------------------------- */
:root {
	--blau:          #005e8e;
	--blau-dunkel:   #00445f;
	--blau-tief:     #002b3d;
	--blau-hell:     #e6f1f7;
	--blau-hauch:    #f4f9fc;

	--gruen:         #a4c417;
	--gruen-dunkel:  #87a410;
	--gruen-hell:    #f2f7de;

	--text:          #1d2b33;
	--text-leicht:   #4d616d;
	--linie:         #dde5ea;
	--weiss:         #ffffff;
	--sand:          #f7f8f9;

	--schrift: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

	--radius:    14px;
	--radius-s:  8px;
	--radius-xl: 26px;

	--schatten:      0 2px 6px rgba(0, 47, 71, .06), 0 12px 28px rgba(0, 47, 71, .08);
	--schatten-hoch: 0 6px 14px rgba(0, 47, 71, .10), 0 26px 50px rgba(0, 47, 71, .16);

	/* Inhaltsbreiten: --breite für Raster und Bilder, --schmal für Fließtext.
	   Der Fließtext bleibt bewusst schmaler – lange Zeilen liest niemand gern. */
	--breite:  1360px;
	--schmal:  830px;
	--luft:    clamp(3.5rem, 7vw, 6.5rem);
}

/* ---------- 2. Grundlagen --------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

body {
	margin: 0;
	font-family: var(--schrift);
	font-size: clamp(1rem, .95rem + .28vw, 1.15rem);
	line-height: 1.7;
	color: var(--text);
	background: var(--weiss);
	overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
	margin: 0 0 .6em;
	line-height: 1.18;
	font-weight: 700;
	color: var(--blau-tief);
	letter-spacing: -.015em;
	text-wrap: balance;
	/* Lange deutsche Komposita dürfen umbrechen und getrennt werden – sonst
	   ragen Wörter wie „Datenschutzerklärung“ auf schmalen Geräten heraus. */
	overflow-wrap: break-word;
	hyphens: auto;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.7vw, 3.35rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gruen-dunkel); }

:focus-visible {
	outline: 3px solid var(--gruen);
	outline-offset: 3px;
	border-radius: 4px;
}

.wrap {
	width: min(100% - 4rem, var(--breite));
	margin-inline: auto;
}
.wrap--schmal { width: min(100% - 4rem, var(--schmal)); }

@media (max-width: 640px) {
	.wrap, .wrap--schmal { width: min(100% - 2.2rem, var(--breite)); }
	.wrap--schmal { width: min(100% - 2.2rem, var(--schmal)); }
}

.ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--blau); color: #fff; padding: .8rem 1.2rem;
}
.skip-link:focus { left: 0; }

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

/* ---------- 3. Buttons ------------------------------------------ */
.btn {
	display: inline-flex; align-items: center; gap: .55em;
	padding: .78em 1.5em;
	border: 2px solid transparent;
	border-radius: 999px;
	font-weight: 700;
	font-size: .98rem;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gruen  { background: var(--gruen); color: #14290b; box-shadow: 0 6px 18px rgba(164, 196, 23, .35); }
.btn--gruen:hover { background: var(--gruen-dunkel); color: #0e1c07; }

.btn--blau   { background: var(--blau); color: #fff; box-shadow: 0 6px 18px rgba(0, 94, 142, .3); }
.btn--blau:hover { background: var(--blau-dunkel); color: #fff; }

.btn--weiss  { background: #fff; color: var(--blau); }
.btn--weiss:hover { background: var(--blau-hell); color: var(--blau-dunkel); }

.btn--rand   { border-color: currentColor; color: var(--blau); }
.btn--rand:hover { background: var(--blau); color: #fff; border-color: var(--blau); }

.btn--rand-hell { border-color: rgba(255,255,255,.65); color: #fff; }
.btn--rand-hell:hover { background: #fff; color: var(--blau-tief); border-color: #fff; }

.btn--gross { padding: .95em 1.9em; font-size: 1.05rem; }

/* ---------- 4. Servicezeile ------------------------------------- */
.topbar {
	background: var(--blau-tief);
	color: #cfe2ec;
	font-size: .875rem;
}
.topbar__inner {
	display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
	align-items: center; justify-content: space-between;
	min-height: 42px; padding-block: .35rem;
}
.topbar__claim { margin: 0; }
.topbar__links {
	display: flex; flex-wrap: wrap; gap: .3rem 1.4rem;
	list-style: none; margin: 0; padding: 0;
}
.topbar__links a {
	display: inline-flex; align-items: center; gap: .45em;
	color: #cfe2ec; text-decoration: none;
}
.topbar__links a:hover { color: var(--gruen); }

/* ---------- 5. Kopf & Navigation -------------------------------- */
.kopf {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--linie);
}
.kopf.ist-gescrollt { box-shadow: 0 6px 20px rgba(0, 47, 71, .1); }

.kopf__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1.5rem; padding-block: .75rem;
}
.kopf__logo img { width: clamp(160px, 20vw, 215px); height: auto; }

/* Burger: Streifen + Wort "Menü" */
.burger {
	display: none;
	align-items: center; gap: .6rem;
	padding: .55rem .95rem .55rem .8rem;
	background: var(--blau);
	color: #fff;
	border: 0; border-radius: 999px;
	font: inherit; font-weight: 700; font-size: .95rem;
	cursor: pointer;
}
.burger__box { position: relative; width: 22px; height: 16px; flex: none; }
.burger__strich,
.burger__strich::before,
.burger__strich::after {
	position: absolute; left: 0;
	width: 22px; height: 2.5px;
	background: #fff; border-radius: 2px;
	transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.burger__strich          { top: 7px; }
.burger__strich::before  { content: ""; top: -7px; }
.burger__strich::after   { content: ""; top: 7px; }

.burger[aria-expanded="true"] .burger__strich          { transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__strich::before  { top: 0; opacity: 0; }
.burger[aria-expanded="true"] .burger__strich::after   { top: 0; transform: rotate(-90deg); }

.hauptnav { display: flex; align-items: center; gap: 1.6rem; }
.hauptnav__liste {
	display: flex; align-items: center; gap: .3rem;
	list-style: none; margin: 0; padding: 0;
}
.hauptnav__item { position: relative; }
.hauptnav__item > a {
	display: block;
	padding: .6rem .85rem;
	color: var(--text);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	border-radius: var(--radius-s);
}
.hauptnav__item > a:hover { background: var(--blau-hauch); color: var(--blau); }
.hauptnav__item > a[aria-current="page"] { color: var(--blau); }
.hauptnav__item > a[aria-current="page"]::after {
	content: ""; display: block; height: 3px; margin-top: .3rem;
	background: var(--gruen); border-radius: 2px;
}
.hauptnav__toggle { display: none; }

.untermenue {
	position: absolute; top: calc(100% + .5rem); left: 0;
	min-width: 230px; padding: .5rem;
	list-style: none; margin: 0;
	background: #fff;
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	box-shadow: var(--schatten-hoch);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.hauptnav__item.hat-unter:hover > .untermenue,
.hauptnav__item.hat-unter:focus-within > .untermenue {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.untermenue a {
	display: block; padding: .55rem .8rem;
	border-radius: var(--radius-s);
	color: var(--text); text-decoration: none; font-weight: 600;
}
.untermenue a:hover,
.untermenue a[aria-current="page"] { background: var(--blau-hauch); color: var(--blau); }

/* ---------- 6. Brotkrumen --------------------------------------- */
.krumen { background: var(--blau-hauch); border-bottom: 1px solid var(--linie); font-size: .875rem; }
.krumen ol {
	display: flex; flex-wrap: wrap; gap: .2rem .55rem;
	list-style: none; margin: 0; padding: .7rem 0;
	color: var(--text-leicht);
}
.krumen li + li::before { content: "›"; margin-right: .55rem; color: var(--blau); }
.krumen a { color: var(--text-leicht); text-decoration: none; }
.krumen a:hover { color: var(--blau); text-decoration: underline; }
.krumen [aria-current] { color: var(--blau); font-weight: 600; }

/* ---------- 7. Startseiten-Bühne -------------------------------- */
.buehne {
	position: relative;
	display: grid; align-items: center;
	min-height: clamp(480px, 74vh, 700px);
	padding-block: clamp(3rem, 8vw, 5.5rem);
	color: #fff;
	background: var(--blau-tief);
	overflow: hidden;
}

/* Bildwechsler: die Aufnahmen liegen übereinander und werden übergeblendet */
.buehne__bilder { position: absolute; inset: 0; }
.buehne__bild {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.1s ease;
}
.buehne__bild.ist-aktiv { opacity: 1; }
.buehne:not(.ohne-bewegung) .buehne__bild.ist-aktiv { animation: buehne-zoom 9s ease-out forwards; }
@keyframes buehne-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }

/* Abdunklung nur so stark, wie die Schrift es braucht – rechts bleibt das
   Bild weitgehend unverfälscht sichtbar. */
.buehne::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(100deg,
		rgba(0, 43, 61, .90) 0%,
		rgba(0, 43, 61, .78) 32%,
		rgba(0, 43, 61, .42) 62%,
		rgba(0, 43, 61, .18) 100%);
}
.buehne__inner { position: relative; z-index: 2; }
.buehne__text  { max-width: 48rem; }

.buehne__label {
	display: inline-flex; align-items: center; gap: .5rem;
	margin-bottom: 1.1rem; padding: .4rem 1rem;
	background: rgba(164, 196, 23, .2);
	border: 1px solid rgba(164, 196, 23, .6);
	border-radius: 999px;
	color: var(--gruen);
	font-size: .85rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.buehne h1 { color: #fff; margin-bottom: .5em; text-shadow: 0 2px 18px rgba(0, 20, 30, .45); }
.buehne h1 em { font-style: normal; color: var(--gruen); }
.buehne__vor {
	font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem);
	color: #e3eef4;
	max-width: 38rem;
	text-shadow: 0 1px 12px rgba(0, 20, 30, .4);
}
.buehne__aktionen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* Bedienung des Bildwechslers */
/* Ohne JavaScript wäre die Bedienung wirkungslos – dann bleibt sie verborgen
   und es steht schlicht das erste Bild. */
.buehne__steuerung { display: none; }
.js .buehne__steuerung {
	display: flex; align-items: center; gap: 1rem;
	margin-top: 2.4rem;
}
.buehne__pfeil {
	display: grid; place-items: center;
	width: 42px; height: 42px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.buehne__pfeil:hover { background: var(--gruen); color: #14290b; border-color: var(--gruen); transform: scale(1.07); }
.buehne__pfeil svg { width: 22px; height: 22px; }

.buehne__punkte { display: flex; align-items: center; gap: .55rem; }
.buehne__punkt {
	width: 11px; height: 11px; padding: 0;
	background: rgba(255, 255, 255, .38);
	border: 0; border-radius: 50%;
	cursor: pointer;
	transition: background-color .2s ease, width .25s ease;
}
.buehne__punkt:hover { background: rgba(255, 255, 255, .7); }
.buehne__punkt.ist-aktiv { background: var(--gruen); width: 30px; border-radius: 999px; }

.buehne__chamaeleon {
	position: absolute; right: -2%; bottom: -4%;
	width: min(44%, 480px);
	z-index: 1;
	filter: drop-shadow(0 22px 45px rgba(0, 0, 0, .45));
	animation: schweben 7s ease-in-out infinite;
}
@keyframes schweben {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-14px) rotate(-1.2deg); }
}

/* Vertrauensleiste unter der Bühne */
.vertrauen {
	background: var(--blau);
	color: #fff;
}
.vertrauen__liste {
	display: grid; grid-template-columns: repeat(4, 1fr);
	list-style: none; margin: 0; padding: 0;
	text-align: center;
}
.vertrauen__liste li { padding: 1.5rem .8rem; border-left: 1px solid rgba(255,255,255,.18); }
.vertrauen__liste li:first-child { border-left: 0; }
.vertrauen__zahl {
	display: block;
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
	font-weight: 800; line-height: 1.1;
	color: var(--gruen);
}
.vertrauen__wort { display: block; font-size: .92rem; color: #d3e6f1; }

/* ---------- 8. Abschnitte --------------------------------------- */
.abschnitt { padding-block: var(--luft); }
.abschnitt--hell  { background: var(--blau-hauch); }
.abschnitt--sand  { background: var(--sand); }
.abschnitt--eng   { padding-block: clamp(2.5rem, 5vw, 4rem); }

.kopfzeile { max-width: 52rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.kopfzeile--mitte { margin-inline: auto; text-align: center; }
.kopfzeile__auge {
	display: block; margin-bottom: .8rem;
	color: var(--gruen-dunkel);
	font-size: .85rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.kopfzeile p { color: var(--text-leicht); font-size: 1.08em; }

/* Textabschnitt über die volle Seitenbreite: Überschrift links, Fließtext
   rechts. So bleibt die Zeilenlänge angenehm kurz, ohne dass der Block als
   schmale Insel in viel leerem Raum steht. */
.textteil { display: grid; gap: 1.2rem; }
.textteil__kopf > *:last-child { margin-bottom: 0; }
.textteil__inhalt { max-width: 46rem; }

@media (min-width: 1000px) {
	.textteil {
		grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
		gap: clamp(2.5rem, 5vw, 5rem);
		align-items: start;
	}
	.textteil__kopf { position: sticky; top: 7rem; }
	.textteil--breit { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); }
	.textteil--breit .textteil__inhalt { max-width: none; }
}

.fliess > h2 { margin-top: 1.8em; }
.fliess > h2:first-child { margin-top: 0; }
.fliess > h3 { margin-top: 1.6em; }
.fliess ul, .fliess ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.fliess li { margin-bottom: .35em; }

/* Zweispalter Text + Bild */
.duo {
	display: grid; gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: 1fr 1fr;
	align-items: center;
}
.duo--schmal-bild { grid-template-columns: 1fr .8fr; }
.duo__bild { position: relative; }
.duo__bild img {
	width: 100%;
	max-height: 520px;
	object-fit: cover;
	border-radius: var(--radius-xl);
	box-shadow: var(--schatten-hoch);
}
.duo__bild--gerahmt::before {
	content: ""; position: absolute;
	inset: auto -18px -18px auto; width: 62%; height: 62%;
	background: var(--gruen); border-radius: var(--radius-xl); z-index: -1;
}
.duo--gedreht .duo__bild { order: -1; }

/* Zitat */
.zitat {
	margin: 2rem 0 0;
	padding: 1.4rem 0 1.4rem 1.6rem;
	border-left: 4px solid var(--gruen);
	font-size: 1.15em; font-style: italic; color: var(--blau-dunkel);
}
.zitat cite { display: block; margin-top: .6rem; font-size: .8em; font-style: normal; color: var(--text-leicht); }

/* ---------- 9. Karten ------------------------------------------- */
.karten {
	display: grid; gap: 1.6rem;
	grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr));
}
.karte {
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.karte:hover {
	transform: translateY(-6px);
	box-shadow: var(--schatten-hoch);
	border-color: transparent;
	color: inherit;
}
.karte__bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--blau-hell); }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.karte:hover .karte__bild img { transform: scale(1.06); }

.karte__inhalt { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.karte__claim {
	display: block; margin-bottom: .35rem;
	color: var(--gruen-dunkel); font-size: .82rem; font-weight: 800;
	letter-spacing: .07em; text-transform: uppercase;
}
.karte h3 { margin-bottom: .5rem; }
.karte p  { color: var(--text-leicht); font-size: .97rem; margin-bottom: 1.1rem; }
.karte__mehr {
	margin-top: auto;
	display: inline-flex; align-items: center; gap: .4em;
	color: var(--blau); font-weight: 700; font-size: .95rem;
}
.karte__mehr svg { transition: transform .22s ease; }
.karte:hover .karte__mehr svg { transform: translateX(4px); }

/* Merkmalskarten ohne Bild */
.merkmale { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.merkmal {
	padding: 1.7rem 1.6rem;
	background: #fff;
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	border-top: 4px solid var(--gruen);
}
.merkmal__ico {
	display: grid; place-items: center;
	width: 46px; height: 46px; margin-bottom: 1rem;
	background: var(--blau-hell); color: var(--blau);
	border-radius: 12px;
}
.merkmal__ico svg { width: 24px; height: 24px; }
.merkmal h3 { margin-bottom: .4rem; font-size: 1.12rem; }
.merkmal p  { color: var(--text-leicht); font-size: .97rem; }

/* Ablauf in Schritten */
.schritte { counter-reset: schritt; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.schritt { position: relative; padding: 1.6rem 1.5rem 1.5rem; background: #fff; border-radius: var(--radius); box-shadow: var(--schatten); }
.schritt::before {
	counter-increment: schritt; content: counter(schritt);
	display: grid; place-items: center;
	width: 42px; height: 42px; margin-bottom: .9rem;
	background: var(--blau); color: #fff;
	border-radius: 50%; font-weight: 800; font-size: 1.1rem;
}
.schritt h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.schritt p  { color: var(--text-leicht); font-size: .96rem; }

/* Häkchen-Listen */
.haken { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; gap: .55rem; }
.haken--zwei { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.haken li { position: relative; padding-left: 2rem; }
.haken li::before {
	content: ""; position: absolute; left: 0; top: .42em;
	width: 1.25rem; height: 1.25rem;
	background: var(--gruen);
	border-radius: 50%;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.haken li::after {
	content: ""; position: absolute; left: .33rem; top: .68em;
	width: .58rem; height: .3rem;
	border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff;
	transform: rotate(-45deg);
}

.leistungsliste { display: grid; gap: 1.6rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.leistungsliste h3 { font-size: 1.05rem; margin-bottom: .7rem; padding-bottom: .5rem; border-bottom: 2px solid var(--gruen-hell); }

/* ---------- 10. Vorher-Nachher-Regler --------------------------- */
/* Ein Vergleich pro Reihe – so werden die Bilder groß genug, um Details
   wirklich zu erkennen. Die Breite bleibt begrenzt, weil eine Bildhälfte
   im Original 500 Pixel breit ist und darüber hinaus sichtbar unscharf würde. */
.vn-raster {
	display: grid;
	gap: 2.6rem;
	grid-template-columns: 1fr;
	max-width: 760px;
	margin-inline: auto;
}

.vn {
	margin: 0;                 /* figure hat im Browser 40px Standardrand */
	background: #fff;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--schatten);
}
.vn__buehne {
	position: relative;
	aspect-ratio: 500 / 437;
	overflow: hidden;
	cursor: ew-resize;
	touch-action: pan-y;
	user-select: none;
	background: var(--blau-hell);
	--pos: 50%;
}
/* Beide Hälften stammen aus demselben Bild (1000×437, mittig geteilt) */
.vn__haelfte {
	position: absolute; inset: 0;
	background-repeat: no-repeat;
	background-size: 200% 100%;
	pointer-events: none;
}
.vn__vorher  { background-position: left  center; }
.vn__nachher { background-position: right center; clip-path: inset(0 0 0 var(--pos)); }

.vn__marke {
	position: absolute; top: .8rem;
	z-index: 3;
	padding: .28rem .75rem;
	border-radius: 999px;
	font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
	pointer-events: none;
	backdrop-filter: blur(3px);
}
.vn__marke--vorher  { left: .8rem;  background: rgba(0, 43, 61, .8); color: #fff; }
.vn__marke--nachher { right: .8rem; background: rgba(164, 196, 23, .92); color: #14290b; }

.vn__linie {
	position: absolute; top: 0; bottom: 0; left: var(--pos);
	width: 3px; margin-left: -1.5px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 43, 61, .2);
	z-index: 4;
	pointer-events: none;
}
.vn__griff {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	display: grid; place-items: center; gap: 0;
	width: 46px; height: 46px;
	background: #fff; color: var(--blau);
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 43, 61, .35);
}
.vn__griff svg { width: 26px; height: 26px; }

.vn__regler {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	margin: 0; padding: 0;
	opacity: 0;
	z-index: 5;
	cursor: ew-resize;
}
.vn__regler:focus-visible + .vn__linie .vn__griff { outline: 3px solid var(--gruen); outline-offset: 3px; }

.vn__text { padding: 1rem 1.3rem 1.25rem; }
.vn__text h3 { font-size: 1.05rem; margin-bottom: 0; }
.vn__text p  { color: var(--text-leicht); font-size: .93rem; margin-top: .25rem; }

/* Beschrifteter Knopf unter der Beschreibung – zeigt beide Zustände als ein
   Bild nebeneinander, weil der Regler immer nur eine Seite zeigen kann. */
.vn__lupe {
	display: inline-flex; align-items: center; gap: .55rem;
	margin-top: 1.1rem;
	padding: .62rem 1.25rem;
	background: var(--blau-hell); color: var(--blau);
	border: 0; border-radius: 999px;
	font: inherit; font-weight: 700; font-size: .93rem;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.vn__lupe:hover { background: var(--blau); color: #fff; transform: translateY(-2px); }
.vn__lupe svg { width: 19px; height: 19px; flex: none; }

/* Ab genug Breite liegt der Vergleich links, der Text rechts daneben. Das Bild
   bleibt bei höchstens 760 Pixeln – eine Bildhälfte misst im Original 500 Pixel
   und würde darüber hinaus sichtbar unscharf. */
@media (min-width: 1100px) {
	.vn-raster { max-width: none; gap: 3rem; }

	.vn {
		display: grid;
		grid-template-columns: minmax(0, 760px) minmax(0, 1fr);
		align-items: center;
	}
	.vn__text { padding: 2rem clamp(2rem, 3vw, 3rem); }
	.vn__text h3 { font-size: 1.4rem; margin-bottom: .5rem; }
	.vn__text p  { font-size: 1.02rem; }

	.vn__lupe { margin-top: 1.4rem; font-size: .97rem; white-space: nowrap; }
}

.vn-hinweis {
	display: inline-flex; align-items: center; gap: .5rem;
	margin-bottom: 2rem; padding: .6rem 1.1rem;
	background: var(--gruen-hell); color: #3f4d10;
	border-radius: 999px; font-size: .92rem; font-weight: 600;
}

/* ---------- 11. Galerie ----------------------------------------- */
/* Mindestbreite so gewählt, dass auf großen Schirmen höchstens drei Spalten
   entstehen – bei fünf Spalten werden die Vorschaubilder unbrauchbar klein. */
.galerie { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.galerie figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); background: #fff; }
.galerie img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s ease; }
.galerie figure:hover img { transform: scale(1.05); }
.galerie figcaption { padding: .7rem 1rem .9rem; font-size: .9rem; color: var(--text-leicht); }

/* ---------- 11b. Bilder vergrößern (Lightbox) ------------------- */
.zoombar { cursor: zoom-in; }

/* Lupensymbol als Hinweis, dass sich das Bild vergrößern lässt */
.hat-lupe { position: relative; }
.lupe-hinweis {
	position: absolute; right: .7rem; top: .7rem;
	z-index: 2;
	display: grid; place-items: center;
	width: 38px; height: 38px;
	background: rgba(0, 43, 61, .72);
	color: #fff;
	border-radius: 50%;
	opacity: 0;
	transform: scale(.85);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
	backdrop-filter: blur(3px);
}
.lupe-hinweis svg { width: 20px; height: 20px; fill: currentColor; }
.hat-lupe:hover .lupe-hinweis,
.zoombar:focus-visible ~ .lupe-hinweis { opacity: 1; transform: scale(1); }

/* Die Vollbildansicht selbst */
.lupe {
	position: fixed; inset: 0; z-index: 200;
	display: none;
	grid-template-rows: 1fr auto;
	padding: clamp(1rem, 3vw, 2.5rem);
	background: rgba(0, 23, 33, .94);
	backdrop-filter: blur(6px);
	/* Waagerechtes Wischen gehört uns (Blättern), Zoomen bleibt beim Browser */
	touch-action: pan-y pinch-zoom;
	-webkit-user-select: none;
	        user-select: none;
}
.lupe.ist-offen { display: grid; }
body.lupe-offen { overflow: hidden; }

.lupe__buehne {
	display: grid; place-items: center;
	min-height: 0;
	margin: 0;
}
.lupe__bild {
	max-width: 100%;
	max-height: calc(100vh - 11rem);
	width: auto;
	border-radius: var(--radius-s);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
	background: #0b1c25;
	-webkit-user-drag: none;
}
/* Wird bei jedem Bildwechsel neu gestartet – auch beim Wischen */
.lupe__bild.ist-neu { animation: lupe-auf .25s ease; }
@keyframes lupe-auf { from { opacity: 0; transform: scale(.97); } }

.lupe__text {
	margin: 1.1rem auto 0;
	max-width: 46rem;
	text-align: center;
	color: #dce9f0;
	font-size: .97rem;
}
.lupe__zaehler {
	display: block; margin-top: .35rem;
	color: #7fa0b1; font-size: .85rem;
}

.lupe button {
	position: absolute;
	display: grid; place-items: center;
	width: 48px; height: 48px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: 0; border-radius: 50%;
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease;
}
.lupe button:hover { background: var(--gruen); color: #14290b; transform: scale(1.06); }
.lupe button svg { width: 24px; height: 24px; fill: currentColor; }

.lupe__zu     { top: clamp(.8rem, 2vw, 1.6rem); right: clamp(.8rem, 2vw, 1.6rem); }
.lupe__zurueck{ left: clamp(.5rem, 2vw, 1.6rem);  top: 50%; transform: translateY(-50%); }
.lupe__weiter { right: clamp(.5rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); }
.lupe__zurueck:hover, .lupe__weiter:hover { transform: translateY(-50%) scale(1.06); }
.lupe[data-einzeln] .lupe__zurueck,
.lupe[data-einzeln] .lupe__weiter { display: none; }

@media (max-width: 720px) {
	.lupe__bild { max-height: calc(100vh - 13rem); }
	.lupe__zurueck, .lupe__weiter { top: auto; bottom: .6rem; transform: none; }
	.lupe__zurueck:hover, .lupe__weiter:hover { transform: scale(1.06); }
	.lupe__text { margin-bottom: 3.6rem; }
	.lupe-hinweis { opacity: 1; transform: scale(1); }   /* ohne Hover sichtbar lassen */
}

/* ---------- 11c. Rechtsseiten ----------------------------------- */
/* Impressum, Datenschutz und Haftungsausschluss sind Nachschlagetexte, keine
   Werbeseiten: ruhigere Überschriften, klare Gliederung, gut überfliegbar. */
.rechtstext { max-width: 46rem; }
.rechtstext > *:first-child { margin-top: 0; }
.rechtstext h2 {
	margin: 2.6em 0 .8em;
	padding-bottom: .5rem;
	font-size: clamp(1.15rem, 1.05rem + .35vw, 1.35rem);
	border-bottom: 2px solid var(--gruen-hell);
	scroll-margin-top: 7rem;
}
.rechtstext h3 {
	margin: 1.9em 0 .5em;
	font-size: 1.02rem;
	color: var(--blau);
}
.rechtstext p, .rechtstext li { font-size: .97rem; }
.rechtstext ul { margin: 0 0 1.2em; padding-left: 1.3em; }

/* Sprungmarken für den langen Datenschutztext */
.inhaltsverzeichnis {
	padding: 1.3rem 1.5rem;
	background: var(--blau-hauch);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
}
.inhaltsverzeichnis h2 {
	margin: 0 0 .7rem;
	padding: 0; border: 0;
	font-size: .82rem; font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--gruen-dunkel);
}
.inhaltsverzeichnis ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
.inhaltsverzeichnis a { color: var(--text); text-decoration: none; font-size: .95rem; }
.inhaltsverzeichnis a:hover { color: var(--blau); text-decoration: underline; }

/* Impressumsangaben als übersichtliche Kärtchen */
.angaben {
	display: grid; gap: 1.2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	margin-bottom: 2.5rem;
}
.angabe {
	padding: 1.4rem 1.5rem;
	background: #fff;
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	border-top: 3px solid var(--gruen);
}
.angabe h2 {
	margin: 0 0 .6rem; padding: 0; border: 0;
	font-size: .82rem; font-weight: 800;
	letter-spacing: .09em; text-transform: uppercase;
	color: var(--gruen-dunkel);
}
.angabe p { margin: 0; font-size: .97rem; line-height: 1.65; }
.angabe strong { color: var(--blau-tief); }

/* ---------- 12. Einwilligungs-Platzhalter (2-Klick) ------------- */
.zustimmung {
	position: relative;
	display: grid; place-items: center;
	padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
	text-align: center;
	background: var(--blau-tief) center/cover no-repeat;
	color: #fff;
	border-radius: var(--radius);
	overflow: hidden;
	min-height: 320px;
}
.zustimmung::before {
	content: ""; position: absolute; inset: 0;
	background: rgba(0, 43, 61, .78);
}
.zustimmung > * { position: relative; z-index: 1; }
.zustimmung h3 { color: #fff; margin-bottom: .4rem; }
.zustimmung p  { max-width: 34rem; color: #cfe2ec; font-size: .95rem; }
.zustimmung__rahmen { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); display: block; }
.zustimmung.ist-geladen { padding: 0; min-height: 0; background: none; }
.zustimmung.ist-geladen::before { display: none; }

/* Karten brauchen kein 16:9 – eine ruhige, flache Höhe reicht zur Orientierung */
.karte-einbettung .zustimmung__rahmen {
	aspect-ratio: auto;
	height: clamp(300px, 42vh, 440px);
}
.karte-einbettung .zustimmung { min-height: clamp(300px, 42vh, 440px); }

/* ---------- 13. Kontakt-Band ------------------------------------ */
.cta {
	position: relative;
	padding-block: clamp(3rem, 6vw, 4.5rem);
	background: linear-gradient(120deg, var(--blau) 0%, var(--blau-dunkel) 60%, var(--blau-tief) 100%);
	color: #fff;
	overflow: hidden;
}
.cta::before {
	content: ""; position: absolute; right: -80px; top: -80px;
	width: 320px; height: 320px; border-radius: 50%;
	background: rgba(164, 196, 23, .14);
}
.cta__inner {
	position: relative;
	display: grid; gap: 1.6rem 2.5rem;
	grid-template-columns: auto 1fr auto;
	align-items: center;
}
.cta__chamaeleon { width: 145px; }
.cta h2 { color: #fff; margin-bottom: .3em; }
.cta p  { color: #cfe2ec; max-width: 40rem; margin: 0; }
.cta__buttons { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- 14. Kontaktseite ------------------------------------ */
.kontaktkarten { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr)); }
.kontaktkarte {
	display: flex; flex-direction: column; gap: .35rem;
	padding: 1.7rem 1.6rem;
	background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
	text-decoration: none; color: inherit;
	transition: transform .2s ease, box-shadow .2s ease;
}
.kontaktkarte:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); color: inherit; }
.kontaktkarte__ico {
	display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: .6rem;
	background: var(--gruen); color: #14290b; border-radius: 12px;
}
.kontaktkarte__ico svg { width: 24px; height: 24px; }
.kontaktkarte__label { font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gruen-dunkel); }
.kontaktkarte strong { font-size: 1.15rem; color: var(--blau-tief); }
.kontaktkarte span.klein { font-size: .9rem; color: var(--text-leicht); }

.visitenkarte {
	display: grid; gap: 1.8rem;
	grid-template-columns: 190px 1fr;
	align-items: center;
	padding: clamp(1.5rem, 3vw, 2.2rem);
	background: #fff; border-radius: var(--radius-xl); box-shadow: var(--schatten-hoch);
}
.visitenkarte img { width: 100%; border-radius: var(--radius); }
.visitenkarte h2 { margin-bottom: .3rem; }
.visitenkarte__rolle { color: var(--gruen-dunkel); font-weight: 700; margin-bottom: .8rem; }

/* ---------- 15. Fuß --------------------------------------------- */
.fuss { background: var(--blau-tief); color: #b8d2df; font-size: .95rem; }
.fuss__raster {
	display: grid; gap: 2.2rem;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.fuss h2 { color: #fff; font-size: 1.05rem; margin-bottom: 1rem; }
.fuss__marke img { width: 190px; background: #fff; padding: .55rem .8rem; border-radius: var(--radius-s); margin-bottom: 1.1rem; }
.fuss__marke p { color: #9dbccc; font-size: .92rem; }
.fuss__siegel { display: flex; flex-wrap: wrap; gap: .5rem; }
.fuss__siegel span {
	padding: .3rem .8rem; border: 1px solid rgba(164, 196, 23, .5);
	border-radius: 999px; color: var(--gruen); font-size: .78rem; font-weight: 700;
}
.fuss address { font-style: normal; margin-bottom: 1rem; color: #d8e8f0; }
.fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fuss__liste a { color: #b8d2df; text-decoration: none; }
.fuss__liste a:hover { color: var(--gruen); text-decoration: underline; }
.fuss__hinweis { color: #74929f; font-size: .8rem; }

.fuss__unten { border-top: 1px solid rgba(255,255,255,.12); font-size: .875rem; }
.fuss__unten-inner {
	display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
	align-items: center; justify-content: space-between;
	padding-block: 1.1rem;
}
.fuss__unten p { margin: 0; color: #8fadbb; }
.fuss__unten ul { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; list-style: none; margin: 0; padding: 0; }
.fuss__unten a { color: #b8d2df; text-decoration: none; }
.fuss__unten a:hover { color: var(--gruen); text-decoration: underline; }

/* Fester Anrufbalken auf dem Handy */
.anrufbalken {
	display: none;
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	align-items: center; justify-content: center; gap: .6rem;
	padding: .85rem;
	background: var(--gruen); color: #14290b;
	font-weight: 800; text-decoration: none;
	box-shadow: 0 -4px 16px rgba(0, 43, 61, .2);
}

/* ---------- 16. Einblenden beim Scrollen ------------------------ */
/* Nur mit aktivem JavaScript verstecken – sonst bliebe der Inhalt unsichtbar. */
.js .auf {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s ease, transform .6s ease;
}
.js .auf.ist-sichtbar { opacity: 1; transform: none; }

/* ---------- 17. Responsive -------------------------------------- */
@media (max-width: 1080px) {
	.fuss__raster { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1100px) {
	.kopf__inner { flex-wrap: wrap; }
	.burger { display: inline-flex; }

	.hauptnav {
		display: none;
		width: 100%;
		flex-direction: column; align-items: stretch; gap: .5rem;
		padding: .5rem 0 1.2rem;
		border-top: 1px solid var(--linie);
		margin-top: .75rem;
	}
	.hauptnav.ist-offen { display: flex; animation: nav-auf .25s ease; }
	@keyframes nav-auf { from { opacity: 0; transform: translateY(-8px); } }

	.hauptnav__liste { flex-direction: column; align-items: stretch; gap: 0; }
	.hauptnav__item { border-bottom: 1px solid var(--linie); }
	.hauptnav__item > a { padding: .95rem .3rem; border-radius: 0; font-size: 1.05rem; }
	.hauptnav__item > a[aria-current="page"]::after { display: none; }
	.hauptnav__item > a[aria-current="page"] { color: var(--blau); }

	.hauptnav__item.hat-unter { display: grid; grid-template-columns: 1fr auto; align-items: center; }
	.hauptnav__toggle {
		display: grid; place-items: center;
		width: 44px; height: 44px;
		background: var(--blau-hauch); color: var(--blau);
		border: 0; border-radius: var(--radius-s); cursor: pointer;
	}
	.hauptnav__toggle svg { width: 22px; height: 22px; transition: transform .22s ease; }
	.hauptnav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

	.untermenue {
		position: static; grid-column: 1 / -1;
		min-width: 0; margin: 0 0 .7rem; padding: .25rem 0 .25rem .8rem;
		border: 0; border-left: 3px solid var(--gruen); border-radius: 0;
		box-shadow: none;
		opacity: 1; visibility: visible; transform: none;
		display: none;
	}
	/* Auf dem Handy steuert ausschließlich der Schalter das Untermenü,
	   nicht Hover oder Fokus – sonst überstimmt :focus-within den Zustand. */
	.hauptnav__item.hat-unter:hover > .untermenue,
	.hauptnav__item.hat-unter:focus-within > .untermenue { display: none; }
	.hauptnav .hauptnav__item.hat-unter > .untermenue.ist-offen { display: block; }

	.hauptnav__cta { justify-content: center; margin-top: .5rem; }

	.duo, .duo--schmal-bild { grid-template-columns: 1fr; }
	.duo--gedreht .duo__bild { order: 0; }

	.buehne__chamaeleon { width: 46%; right: -8%; bottom: -6%; opacity: .35; }
	.cta__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.cta__chamaeleon { display: none; }
	.cta p { margin-inline: auto; }
	.visitenkarte { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.visitenkarte img { max-width: 220px; }
}

@media (max-width: 720px) {
	html { scroll-padding-top: 76px; }
	.topbar__claim { display: none; }
	.topbar__inner { justify-content: center; }
	.vertrauen__liste { grid-template-columns: 1fr 1fr; }
	.vertrauen__liste li:nth-child(3) { border-left: 0; }
	.vertrauen__liste li:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.18); }
	.buehne { min-height: 0; text-align: left; }
	.buehne__chamaeleon { display: none; }
	.fuss__raster { grid-template-columns: 1fr; }
	.anrufbalken { display: flex; }
	body { padding-bottom: 58px; }
	.duo__bild--gerahmt::before { display: none; }
}

@media (max-width: 460px) {
	.topbar__links { font-size: .82rem; gap: .2rem .9rem; }
	.btn { width: 100%; justify-content: center; white-space: normal; }
	.buehne__aktionen { width: 100%; }
	.kontaktkarte .btn { width: auto; }
}

/* ---------- 18. Rücksicht & Druck ------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.js .auf { opacity: 1; transform: none; }
}

@media print {
	.topbar, .burger, .hauptnav, .anrufbalken, .cta, .zustimmung { display: none !important; }
	body { color: #000; }
	a::after { content: " (" attr(href) ")"; font-size: .8em; }
}