/*
 * KlarRein Services – Stylesheet
 * Farben und Schrift übernommen aus dem bisherigen Angebotsformular.
 */

/* Schrift liegt lokal im Ordner assets/schriften – nichts wird von Google geladen. */
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('schriften/outfit-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('schriften/outfit-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--dk: #2C5F6E;
	--dk2: #1E4554;
	--mt: #A0D4CF;
	--mt-bg: #EDF7F6;
	--mt-border: #C5E8E5;
	--text: #1A3540;
	--muted: #6B8E98;
	--border: #D8ECEB;
	--bg: #F4F9F9;
	--weiss: #ffffff;
	--stern: #E8A33D;
	--warn: #991B1B;
	--warn-bg: #FEF2F2;
	--warn-border: #FECACA;
	--ok: #12664A;
	--radius: 12px;
	--breite: 1180px;
	--schatten: 0 4px 32px rgba(44, 95, 110, .10), 0 1px 4px rgba(44, 95, 110, .06);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
	margin: 0;
	background: var(--weiss);
	color: var(--text);
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.02em;
	text-wrap: balance;
	margin: 0 0 .5em;
	color: var(--text);
}

h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; font-weight: 600; }

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

a { color: var(--dk); }
a:hover { text-decoration: none; }

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

:focus-visible { outline: 3px solid var(--dk); outline-offset: 2px; }

.sprung { position: absolute; left: -9999px; background: var(--dk); color: #fff; padding: 10px 16px; z-index: 10000; }
.sprung:focus { left: 8px; top: 8px; }

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 20px; }
.schmal { max-width: 780px; }
.gross { font-size: 1.06rem; color: var(--muted); }

/* -------------------------------------------------------------- Symbole */

.sym {
	display: inline-block;
	width: 1em;
	height: 1em;
	background: currentColor;
	flex: 0 0 auto;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain; mask-size: contain;
}

.sym--telefon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}

.sym--brief {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.sym--pin {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E");
}

.sym--uhr {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 10.6V6h-2v7.4l5 3 1-1.7-4-2.1z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 10.6V6h-2v7.4l5 3 1-1.7-4-2.1z'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------- Knöpfe */

.knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 26px;
	border: none;
	border-radius: 9px;
	background: var(--dk);
	color: #fff;
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(44, 95, 110, .28);
	transition: background .2s, transform .2s, box-shadow .2s;
}

.knopf:hover, .knopf:focus {
	background: var(--dk2);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(44, 95, 110, .36);
}

.knopf:disabled { background: var(--mt); box-shadow: none; cursor: not-allowed; transform: none; }

.knopf--ghost {
	background: transparent;
	color: var(--muted);
	border: 1.5px solid var(--border);
	box-shadow: none;
}

.knopf--ghost:hover, .knopf--ghost:focus {
	background: var(--mt-bg);
	border-color: var(--mt);
	color: var(--dk);
	box-shadow: none;
}

.knopf--gross { padding: 15px 32px; font-size: 1.02rem; }
.knopf--voll { width: 100%; }

/* ------------------------------------------------------- Kontaktleiste */

.kontaktleiste {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--dk2);
	color: #EAF5F4;
	font-size: .875rem;
}

.kontaktleiste__innen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	max-width: var(--breite);
	margin: 0 auto;
	padding: 8px 20px;
}

.kontaktleiste a { color: inherit; text-decoration: none; }
.kontaktleiste a:hover { text-decoration: underline; }

.kontaktleiste__links { display: flex; align-items: center; gap: 18px; min-width: 0; }
.kontaktleiste__rechts { display: flex; align-items: center; gap: 16px; min-width: 0; }

.leiste-eintrag { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }

.leiste-anruf {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--mt);
	color: #10333C !important;
	padding: 6px 15px;
	border-radius: 99px;
	font-weight: 600;
	white-space: nowrap;
}

.leiste-anruf:hover { background: #B6E0DC; text-decoration: none !important; }

.bewertung { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sterne { color: var(--stern); letter-spacing: 1px; }
.leiste-mail__kurz { display: none; }

/* ---------------------------------------------------------- Kopfzeile */

.kopfzeile { background: #fff; border-bottom: 1px solid var(--border); }

.kopfzeile__innen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: var(--breite);
	margin: 0 auto;
	padding: 14px 20px;
}

.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); }
.logo img { max-height: 54px; width: auto; display: block; }
.logo__text { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.logo__text span { color: var(--dk); }

.navigation { display: flex; align-items: center; gap: 26px; }

.navigation a {
	color: var(--text);
	text-decoration: none;
	font-size: .96rem;
	font-weight: 500;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
}

.navigation a:hover { color: var(--dk); border-bottom-color: var(--mt); }
.navigation a[aria-current="page"] { color: var(--dk); font-weight: 600; border-bottom-color: var(--dk); }
.navigation .knopf { color: #fff; border-bottom: 0; margin-left: 4px; }
.navigation .knopf:hover { color: #fff; }

/* Untermenü für Leistungen */
.nav-gruppe { position: relative; }

.nav-gruppe__liste {
	position: absolute;
	top: 100%;
	left: -14px;
	min-width: 250px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: var(--schatten);
	padding: 8px;
	display: none;
	z-index: 70;
}

.nav-gruppe:hover .nav-gruppe__liste,
.nav-gruppe:focus-within .nav-gruppe__liste { display: block; }

.nav-gruppe__liste a {
	display: block;
	padding: 8px 12px;
	border-radius: 7px;
	border-bottom: 0;
	font-size: .92rem;
}

.nav-gruppe__liste a:hover { background: var(--mt-bg); border-bottom: 0; }

/* Verschachteltes Untermenü, z. B. Gebäudereinigung > Treppenhausreinigung */
.nav-untergruppe { position: relative; }

.nav-untergruppe__ziel {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.nav-pfeil { font-size: .78rem; color: var(--muted); flex: 0 0 auto; }

.nav-untergruppe__liste {
	position: absolute;
	top: -8px;
	left: 100%;
	margin-left: 0;
	min-width: 230px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: var(--schatten);
	padding: 8px;
	display: none;
	z-index: 71;
}

.nav-untergruppe:hover .nav-untergruppe__liste,
.nav-untergruppe:focus-within .nav-untergruppe__liste { display: block; }

.nav-untergruppe__liste a {
	display: block;
	padding: 8px 12px;
	border-radius: 7px;
	border-bottom: 0;
	font-size: .92rem;
}

.nav-untergruppe__liste a:hover { background: var(--mt-bg); border-bottom: 0; }

.hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; }
.hamburger .bar { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; }
.nav-schalter { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* ------------------------------------------------------------- Bühne */

.buehne {
	position: relative;
	background: linear-gradient(135deg, var(--dk2) 0%, var(--dk) 45%, #3D7F8C 100%);
	color: #fff;
	border-bottom: 1px solid var(--border);
	overflow: hidden;
}

/* Sanfter Mint-Schimmer über dem Verlauf */
.buehne::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 88% 8%, rgba(160, 212, 207, .32) 0%, rgba(160, 212, 207, 0) 62%),
		radial-gradient(80% 70% at 0% 100%, rgba(30, 69, 84, .55) 0%, rgba(30, 69, 84, 0) 70%);
	pointer-events: none;
}

/* Liegt assets/hero.jpg vor, wird es hinter den Verlauf gelegt. */
.buehne__bild {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .3;
	mix-blend-mode: luminosity;
	pointer-events: none;
}

.buehne h1, .buehne .gross { color: #fff; }
.buehne .gross { color: #D5E9EA; }
.buehne .abzeichen { background: rgba(160, 212, 207, .18); border-color: rgba(160, 212, 207, .45); color: #C8ECE7; }
.buehne .vertrauen { color: #BFDCE0; }
.buehne .vertrauen li::before { color: var(--mt); }
.buehne .knopf { background: var(--mt); color: #10333C; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); }
.buehne .knopf:hover { background: #B6E0DC; color: #10333C; }
.buehne .knopf--ghost { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .38); }
.buehne .knopf--ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.buehne__innen { position: relative; }

/* Auf Rechtstexten und Unterseiten reicht ein heller Kopf. */
.buehne--hell {
	background: linear-gradient(180deg, var(--bg), #fff);
	color: var(--text);
}

.buehne--hell::before { display: none; }
.buehne--hell h1 { color: var(--text); }
.buehne--hell .gross { color: var(--muted); }

.buehne__innen {
	max-width: var(--breite);
	margin: 0 auto;
	padding: 56px 20px 50px;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
	gap: 40px;
	align-items: start;
}

.buehne__text { max-width: 42ch; }

.abzeichen {
	display: inline-block;
	background: var(--mt-bg);
	color: var(--dk);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 99px;
	margin-bottom: 16px;
	border: 1px solid var(--mt-border);
}

.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 18px; }

.vertrauen { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9rem; color: var(--muted); padding: 0; margin: 0; list-style: none; }
.vertrauen li { display: flex; align-items: center; gap: 7px; }
.vertrauen li::before { content: "✓"; color: var(--dk); font-weight: 700; }

.siegel-reihe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.siegel {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: #fff;
	border-radius: 10px;
	padding: 8px 14px;
	text-decoration: none;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}

.siegel:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .26); }

.siegel__marke { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }

.siegel__wert { font-size: .92rem; font-weight: 700; color: var(--dk2); display: flex; align-items: center; gap: 5px; }
.siegel__wert .sterne { font-size: .78rem; }

.siegel--wkdb .siegel__logo { height: 20px; width: auto; display: block; }

.siegel__anzahl { font-size: .74rem; font-weight: 500; color: var(--muted); }

.buehne__karte {
	background: #fff;
	border-radius: 16px;
	box-shadow: var(--schatten);
	padding: 26px 24px;
}

/* --------------------------------------------------------- Abschnitte */

.block { padding: 62px 0; }
.block--grau { background: var(--bg); }
.block--dunkel { background: var(--dk2); color: #EAF5F4; }
.block--dunkel h2, .block--dunkel h3 { color: #fff; }
.block--dunkel p { color: #C6DEE2; }

.block__kopf { max-width: 64ch; margin-bottom: 32px; }
.block__kopf--mitte { margin-left: auto; margin-right: auto; text-align: center; }
.block__kopf p { color: var(--muted); }

.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.karte {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 26px 24px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color .18s, box-shadow .18s, transform .18s;
}

a.karte:hover { border-color: var(--mt); box-shadow: var(--schatten); transform: translateY(-2px); }

.karte h3 { margin: 0; }
.karte p { color: var(--muted); font-size: .94rem; margin: 0; }
.karte__mehr { margin-top: auto; padding-top: 12px; font-weight: 600; color: var(--dk); font-size: .92rem; }

/* Karte mit Bild oben */
.karte__inhalt { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.karte--bild { padding: 0; overflow: hidden; }
.karte--bild .karte__inhalt { padding: 22px 24px 24px; }

.karte__foto {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	background: linear-gradient(135deg, var(--dk2), var(--dk));
}

.bild-block { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.bild-block img { border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 860px) {
	.bild-block { grid-template-columns: 1fr; gap: 24px; }
}

.karte__sym {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: var(--mt-bg);
	border: 1px solid var(--mt-border);
	color: var(--dk);
	display: grid;
	place-items: center;
	font-size: 20px;
	margin-bottom: 4px;
}

.hakenliste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 28px; }
.hakenliste li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.hakenliste li::before { content: "✓"; color: var(--dk); font-weight: 700; line-height: 1.6; }

.schritte-liste { list-style: none; counter-reset: sr; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.schritte-liste li { counter-increment: sr; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.schritte-liste li::before {
	content: counter(sr);
	display: grid; place-items: center;
	width: 34px; height: 34px; margin-bottom: 12px;
	border-radius: 50%; background: var(--dk); color: #fff; font-weight: 600; font-size: .95rem;
}
.schritte-liste h3 { font-size: 1.05rem; margin-bottom: .35em; }
.schritte-liste p { font-size: .94rem; color: var(--muted); margin: 0; }

/* --------------------------------------------- Google-Bewertungen */

.gb-inhalt {
	position: relative;
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 36px;
	align-items: center;
	margin-top: 30px;
	min-width: 0;
	max-width: 100%;
}

.gb-inhalt > * { min-width: 0; max-width: 100%; }

.gb-inhalt--einzeln { grid-template-columns: 1fr; justify-items: center; }
.gb-inhalt--einzeln .gb-summe { align-items: center; text-align: center; }

.gb-summe { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

.gb-summe__marke {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--muted);
}

.g-logo { width: 18px; height: 18px; flex: 0 0 auto; }

.gb-note { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 1.7rem; line-height: 1; }
.gb-note strong { font-weight: 700; }
.gb-note .sterne { font-size: 1.15rem; }
.gb-anzahl { font-size: .88rem; font-weight: 400; color: var(--muted); }

.gb-knopf {
	margin-top: 4px;
	display: inline-block;
	background: #1A73E8;
	color: #fff;
	text-decoration: none;
	font-size: .9rem;
	font-weight: 600;
	padding: 10px 24px;
	border-radius: 6px;
}

.gb-knopf:hover { background: #1557B0; color: #fff; }

.gb-lauf { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; max-width: 100%; }

.gb-spur {
	display: flex;
	gap: 18px;
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 6px 2px 14px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.gb-spur::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
	.gb-spur { scroll-behavior: auto; }
}

.gb-karte {
	flex: 0 0 clamp(255px, 27%, 310px);
	scroll-snap-align: start;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 3px 14px rgba(26, 53, 64, .10);
	padding: 20px 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gb-kopf { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }

.gb-avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 600;
	display: grid;
	place-items: center;
}

.gb-person { min-width: 0; }
.gb-name { margin: 0 0 2px; font-weight: 600; font-size: .95rem; }
.gb-person .sterne { font-size: .92rem; letter-spacing: 0; }
.gb-datum { margin: 2px 0 0; font-size: .82rem; color: var(--muted); font-style: italic; }

.gb-text { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--text); }

.gb-veroeffentlicht {
	margin: auto 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--border);
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .78rem;
	color: var(--muted);
}

.gb-pfeil {
	flex: 0 0 auto;
	width: 32px; height: 32px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--dk);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(26, 53, 64, .18);
}

.gb-pfeil:hover { background: #fff; }
.gb-pfeil[disabled] { opacity: .35; cursor: default; }

.gb-punkte { display: flex; justify-content: center; gap: 7px; margin-top: 6px; }

.gb-punkt {
	width: 7px; height: 7px;
	border: 0;
	padding: 0;
	border-radius: 50%;
	background: rgba(26, 53, 64, .22);
	cursor: pointer;
}

.gb-punkt.aktiv { background: var(--dk); }

.block--dunkel .gb-text, .block--dunkel .gb-name, .block--dunkel .gb-anzahl, .block--dunkel .gb-note, .block--dunkel .gb-summe__marke { color: var(--text); }
.block--dunkel .gb-pfeil { background: rgba(255, 255, 255, .92); }

@media (max-width: 860px) {
	.gb-inhalt { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
	.gb-inhalt .gb-summe { align-items: center; }
	.gb-karte { flex-basis: 82%; }
	.gb-pfeil { display: none; }
}

/* --------------------------------------------------------- Kontaktdaten */

.kontaktdaten { display: grid; gap: 22px; }
.kontaktposten { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; }

.kontaktposten__sym {
	width: 46px; height: 46px;
	border-radius: 10px;
	background: var(--mt-bg);
	border: 1px solid var(--mt-border);
	color: var(--dk);
	display: grid; place-items: center;
	font-size: 19px;
}

.kontaktposten h3 { margin: 0 0 3px; font-size: 1rem; }
.kontaktposten p, .kontaktposten a { margin: 0; color: var(--muted); font-size: .96rem; text-decoration: none; }
.kontaktposten a:hover { color: var(--dk); text-decoration: underline; }

.block--dunkel .kontaktposten__sym { background: rgba(160, 212, 207, .14); border-color: rgba(160, 212, 207, .3); color: var(--mt); }
.block--dunkel .kontaktposten p, .block--dunkel .kontaktposten a { color: #C6DEE2; }

.kontakt-raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: start; }

/* --------------------------------------------------------------- FAQ */

.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; padding: 0 22px; }
.faq summary { cursor: pointer; font-weight: 600; padding: 17px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--dk); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details > p { padding-bottom: 18px; color: var(--muted); margin: 0; }

/* ----------------------------------------------------------- Formulare */

.formular__titel { font-size: 1.2rem; margin-bottom: 4px; }
.formular__text { font-size: .92rem; color: var(--muted); margin-bottom: 20px; }

.feld { margin: 0 0 16px; }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.feld label, .feld-label {
	display: block;
	font-size: .84rem;
	font-weight: 500;
	color: var(--text);
	margin-bottom: 7px;
}

.feld input[type="text"], .feld input[type="tel"], .feld input[type="email"],
.feld input[type="number"], .feld select, .feld textarea {
	width: 100%;
	padding: 11px 15px;
	border: 1.5px solid #A9CCC8;
	border-radius: 9px;
	font-size: .92rem;
	font-family: inherit;
	color: var(--text);
	background: #fff;
	transition: border-color .18s, box-shadow .18s;
	-webkit-appearance: none;
	appearance: none;
}

.feld select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236B8E98' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 11px;
	padding-right: 36px;
}

.feld textarea { resize: vertical; }

.feld input:focus, .feld select:focus, .feld textarea:focus {
	outline: none;
	border-color: var(--dk);
	box-shadow: 0 0 0 3px rgba(44, 95, 110, .1);
}

.feld input::placeholder, .feld textarea::placeholder { color: #B0C8CE; }

.feld--fehler input, .feld--fehler select, .feld--fehler textarea { border-color: #DC7C6B; }
.feld__fehler { display: block; margin-top: 6px; color: var(--warn); font-size: .82rem; font-weight: 500; }

.feld--check label { display: flex; align-items: flex-start; gap: 10px; font-size: .85rem; font-weight: 400; color: var(--muted); line-height: 1.55; }
.feld--check input { width: 17px; height: 17px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--dk); }

.pflicht { color: var(--warn); }
.optional { font-weight: 400; color: var(--muted); }

.honigtopf { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form__status { margin: 12px 0 0; font-size: .9rem; font-weight: 500; min-height: 1em; }
.form__status--ok { color: var(--ok); }
.form__status--fehler { color: var(--warn); }

.formular__anruf { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: .9rem; color: var(--muted); }
.formular__anruf a { font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------- Angebots-Assistent */

.assistent { background: var(--bg); }
.assistent__karte { background: #fff; border-radius: 16px; box-shadow: var(--schatten); overflow: hidden; max-width: 780px; margin: 0 auto; }

.stufen { display: flex; align-items: flex-start; padding: 22px 40px; border-bottom: 1px solid var(--border); background: #FAFEFE; }
.stufe { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 64px; }
.stufe__strich { flex: 1; height: 2px; background: var(--border); margin-top: 17px; transition: background .4s; }
.stufe__strich.erledigt { background: var(--mt); }

.stufe__punkt {
	width: 36px; height: 36px; border-radius: 50%;
	border: 2px solid var(--border);
	display: flex; align-items: center; justify-content: center;
	font-size: .85rem; font-weight: 600; color: #9BB5BC;
	transition: all .3s;
}

.stufe__text { font-size: .72rem; font-weight: 500; color: #9BB5BC; transition: color .3s; }
.stufe.aktiv .stufe__punkt { border-color: var(--dk); background: var(--dk); color: #fff; box-shadow: 0 0 0 4px rgba(44, 95, 110, .12); }
.stufe.aktiv .stufe__text { color: var(--dk); font-weight: 600; }
.stufe.erledigt .stufe__punkt { border-color: var(--mt); background: var(--mt); color: #fff; }
.stufe.erledigt .stufe__text { color: var(--dk); }

.assistent__fehler {
	margin: 20px 36px 0;
	padding: 11px 16px;
	background: var(--warn-bg);
	border: 1px solid var(--warn-border);
	border-radius: 10px;
	color: var(--warn);
	font-size: .875rem;
	font-weight: 500;
	display: none;
}

.assistent__fehler.sichtbar { display: block; }

.stufe-inhalt { padding: 36px; }
.stufe-inhalt[hidden] { display: none; }
.stufe-inhalt h3 { font-size: 1.15rem; font-weight: 600; margin: 0 0 20px; }

.wahl-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 24px; }
.wahl-raster--3 { grid-template-columns: repeat(3, 1fr); }

.wahl { position: relative; }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.wahl label {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 16px;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	cursor: pointer;
	transition: all .18s ease;
	background: #fff;
	user-select: none;
	height: 100%;
}

.wahl label:hover { border-color: var(--mt); background: var(--mt-bg); }
.wahl input:checked + label { border-color: var(--dk); background: var(--mt-bg); box-shadow: 0 0 0 1px var(--dk) inset; }
.wahl input:focus-visible + label { outline: 3px solid var(--dk); outline-offset: 2px; }
.wahl input:checked + label .punkt { border-color: var(--dk); background: var(--dk); }
.wahl input:checked + label .punkt::after { opacity: 1; transform: scale(1); }

.punkt {
	width: 18px; height: 18px;
	border: 1.5px solid #C5D8DC; border-radius: 50%;
	flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	transition: all .18s;
}

.punkt::after { content: ''; width: 7px; height: 7px; background: #fff; border-radius: 50%; opacity: 0; transform: scale(0); transition: all .18s; }

.wahl label > span:last-child { display: block; min-width: 0; }
.wahl__titel { display: block; font-size: .875rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.wahl__text { display: block; font-size: .775rem; color: var(--muted); margin-top: 2px; line-height: 1.35; }

.assistent__knoepfe { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); gap: 12px; }

.assistent__fertig { display: none; padding: 60px 36px; text-align: center; }
.assistent__fertig.sichtbar { display: block; }

.fertig-zeichen {
	width: 64px; height: 64px; border-radius: 50%;
	background: var(--mt-bg); color: var(--dk);
	font-size: 1.6rem; font-weight: 700;
	border: 2px solid var(--mt);
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 24px;
}

.assistent__fertig h3 { font-size: 1.4rem; font-weight: 700; margin: 0 0 10px; }
.assistent__fertig p { color: var(--muted); font-size: .95rem; line-height: 1.7; max-width: 420px; margin: 0 auto; }

/* ------------------------------------------------- Reiter und Panel */

.reiter {
	position: fixed; top: 50%; left: 0; z-index: 70;
	transform: translateY(-50%);
	padding: 17px 10px;
	border: 0; border-radius: 0 10px 10px 0;
	background: var(--dk); color: #fff;
	font: inherit; font-size: .85rem; font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 18px rgba(44, 95, 110, .3);
}

.reiter span { writing-mode: vertical-rl; transform: rotate(180deg); }
.reiter:hover { background: var(--dk2); }

.panel { position: fixed; inset: 0; z-index: 90; display: flex; background: rgba(26, 53, 64, .5); }
.panel[hidden] { display: none; }

.panel__box {
	position: relative;
	width: 410px; max-width: 92vw; height: 100%;
	padding: 32px 26px;
	background: #fff;
	overflow-y: auto;
	box-shadow: 8px 0 40px rgba(0, 0, 0, .28);
	animation: hereinschieben .22s ease-out;
}

@keyframes hereinschieben { from { transform: translateX(-100%); } }
@keyframes hochschieben { from { transform: translateY(100%); } }

.panel__zu {
	position: absolute; top: 12px; right: 14px;
	width: 38px; height: 38px;
	border: 0; border-radius: 50%;
	background: transparent; color: var(--text);
	font-size: 26px; line-height: 1; cursor: pointer;
}

.panel__zu:hover { background: var(--mt-bg); }

.mobilleiste { display: none; }

/* ------------------------------------------------------- Cookie-Banner */

.zustimmung {
	position: fixed;
	left: 16px; right: 16px; bottom: 16px;
	z-index: 200;
	max-width: 560px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	box-shadow: 0 12px 42px rgba(26, 53, 64, .26);
	padding: 22px 24px;
}

.zustimmung[hidden] { display: none; }
.zustimmung h2 { font-size: 1.05rem; margin: 0 0 6px; }
.zustimmung p { font-size: .88rem; color: var(--muted); margin: 0 0 16px; }
.zustimmung__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.zustimmung__knoepfe .knopf { flex: 1 1 160px; font-size: .9rem; padding: 11px 18px; }

/* ------------------------------------------------------------ Fußzeile */

.fusszeile { background: var(--dk2); color: #D6E8EA; margin-top: 0; }

.fusszeile__innen {
	max-width: var(--breite); margin: 0 auto;
	padding: 52px 20px 34px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 34px;
}

.fusszeile h2 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(214, 232, 234, .6); margin-bottom: 1em; }
.fusszeile ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .93rem; }
.fusszeile a { color: inherit; text-decoration: none; }
.fusszeile a:hover { text-decoration: underline; }
.fusszeile p { font-size: .93rem; color: rgba(214, 232, 234, .8); }
.fusszeile .logo__text { color: #fff; }
.fusszeile .logo__text span { color: var(--mt); }
.fusszeile img { max-height: 46px; filter: brightness(0) invert(1); opacity: .92; }

.fusszeile__zeile { border-top: 1px solid rgba(255, 255, 255, .12); font-size: .86rem; color: rgba(214, 232, 234, .6); }
.fusszeile__zeile div { max-width: var(--breite); margin: 0 auto; padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.fusszeile__zeile button { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

/* --------------------------------------------------------- Rechtstexte */

.rechtstext { padding: 52px 0 24px; }
.rechtstext h2 { font-size: 1.25rem; margin-top: 1.7em; }
.rechtstext h3 { font-size: 1.05rem; margin-top: 1.4em; }
.rechtstext p, .rechtstext li { color: var(--muted); font-size: 1rem; }
.rechtstext .platzhalter { background: #FDF3D8; border-left: 3px solid #D9A521; padding: 2px 8px; color: #6B5410; font-weight: 600; }

/* ------------------------------------------------------------ Schmal */

@media (max-width: 980px) {
	.buehne__innen { grid-template-columns: 1fr; }
	.kontakt-raster { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
	body { font-size: 16px; }

	.hamburger { display: flex; }

	.navigation {
		display: none;
		order: 3;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-top: 10px;
	}

	.nav-schalter:checked ~ .navigation { display: flex; }

	.navigation > a, .nav-gruppe > a {
		padding: 12px 2px;
		border-bottom: 1px solid var(--border);
	}

	.navigation .knopf { margin-top: 12px; justify-content: center; }

	.nav-gruppe__liste { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 0 14px; min-width: 0; }
	.nav-gruppe__liste a { border-bottom: 1px solid var(--border); border-radius: 0; }

	.nav-untergruppe__liste { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 0 14px; min-width: 0; margin-left: 0; }
	.nav-untergruppe__liste a { border-bottom: 1px solid var(--border); border-radius: 0; }
	.nav-pfeil { display: none; }

	.kopfzeile__innen { flex-wrap: wrap; }

	.kontaktleiste__innen { flex-wrap: wrap; justify-content: center; gap: 6px 16px; padding: 7px 12px; }
	.kontaktleiste { font-size: .82rem; }
	.leiste-mail__lang { display: none; }
	.leiste-mail__kurz { display: inline; }
	.kontaktleiste__links .leiste-eintrag--adresse { display: none; }

	.reiter { display: none; }

	body { padding-bottom: 72px; }

	.mobilleiste {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
		display: flex; gap: 8px;
		padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, .97);
		border-top: 1px solid var(--border);
		box-shadow: 0 -4px 18px rgba(26, 53, 64, .12);
	}

	.mobilleiste .knopf { flex: 1 1 0; padding: 13px 10px; }

	.zustimmung { bottom: 78px; }

	.panel { align-items: flex-end; }
	.panel__box { width: 100%; max-width: 100%; height: auto; max-height: 88vh; border-radius: 16px 16px 0 0; animation-name: hochschieben; }

	.block { padding: 44px 0; }
	.stufen { padding: 18px 20px; }
	.stufe__text { display: none; }
	.stufe-inhalt { padding: 24px 20px; }
	.assistent__fehler { margin: 16px 20px 0; }
	.wahl-raster, .wahl-raster--3 { grid-template-columns: 1fr; }
	.feld-reihe { grid-template-columns: 1fr; }
}