/* =========================================================================
   Alkozei Sanitärservice — Gestaltung
   =========================================================================

   Haltung
   -------
   Hell, luftig, freundlich. Der Betrieb baut Bäder und Heizungen für Familien,
   nicht für Rechenzentren — die Seite soll nach Tageslicht aussehen und nicht
   nach Maschinenraum.

   Große Weißräume, weiche Radien, wenige und sehr flache Schatten statt harter
   Linien. Getragen wird das von einer geometrischen Schrift (Poppins) in den
   Überschriften; der Fließtext bleibt bei Inter, weil lange deutsche Wörter
   darin schmaler und ruhiger laufen.

   Farbe wird gespart: Rot ist der eine warme Akzent, Blau und Gelb ordnen die
   Bereiche zu. Große Farbflächen gibt es nur an zwei Stellen der Seite.

   Gliederung
     01  Grundlagen
     02  Raster und Abschnitte
     03  Schaltflächen
     04  Kopf und Navigation
     05  Fuß
     06  Blocks
     07  Formulare
     08  Hilfsmittel
   ========================================================================= */


/* == 01  Grundlagen ====================================================== */

/* Schriften aus dem eigenen Verzeichnis — kein Google-Aufruf, siehe
   theme_enqueue.php. Inter trägt den Fließtext, Poppins die Überschriften.
   Je Schnitt zwei Ausschnitte: „latin“ deckt Deutsch samt Umlauten und ß ab,
   „latin-ext“ lädt der Browser nur bei Bedarf nach. */
@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	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: 'Inter';
	src: url('../fonts/inter-variable-ext.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
	               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;
}

@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-400-ext.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-600-ext.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700-ext.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }

:root {
	/* Marke, unverändert aus der Logodatei */
	--rot: #EE2444;
	--blau: #4498D8;
	--gelb: #FBC325;

	/* Abgedunkelte Zweitfassungen — die Originaltöne tragen auf Weiß keinen Text.
	   Rot #EE2444 = 4,2:1, Blau #4498D8 = 3,1:1. Beides zu wenig für AA. */
	--rot-text: #C81834;
	--blau-text: #1F6FAF;
	--gelb-text: #8A6206;

	/* Grundfläche.
	   Das Papier ist minimal warm gehalten — reines Weiß wirkt neben dem tiefen
	   Anthrazit hart und klinisch. Karten und Zellen bleiben reinweiß und heben
	   sich dadurch von selbst ab, ganz ohne Schatten. */
	--tinte: #14161A;
	--tinte-2: #1D2026;
	--tinte-3: #2A2F37;
	--papier: #FFFFFF;
	--papier-grund: #FBFAF8;
	--papier-2: #F3F1ED;
	--papier-3: #E9E6E1;

	--linie: #E3E6EA;
	--linie-stark: #C4CAD2;
	--linie-tinte: rgba(255, 255, 255, .14);

	--text: #2B3038;
	--text-leise: #6C737D;
	--text-stark: var(--tinte);

	/* Maße */
	--breite: 1240px;
	--breite-schmal: 760px;
	--luft: clamp(1.25rem, 5vw, 4rem);
	--abstand: clamp(4rem, 9vw, 8rem);

	/* Radien. Großzügig, aber nicht verspielt: die Kachel bleibt eine Kachel. */
	--radius: 14px;
	--radius-klein: 10px;
	--radius-gross: 22px;

	/* Schatten. Sehr flach und weit — sie sollen Tiefe andeuten, nicht
	   Gegenstände über die Seite schweben lassen. */
	--schatten-1: 0 1px 2px rgba(20, 22, 26, .04), 0 6px 20px rgba(20, 22, 26, .05);
	--schatten-2: 0 2px 4px rgba(20, 22, 26, .04), 0 16px 44px rgba(20, 22, 26, .09);

	/* Bewegung */
	--zeit: .2s;
	--kurve: cubic-bezier(.2, .6, .2, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--text);
	background: var(--papier-grund);
	font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Überschriften: eng gesetzt, tief gestellt. Die Größe macht die Wirkung,
   nicht die Verzierung. */
h1, h2, h3, h4 {
	margin: 0 0 .5em;
	/* Poppins ist geometrisch gebaut und verträgt deutlich weniger negative
	   Laufweite als Inter — zu eng gesetzt kleben die runden Formen. */
	font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--text-stark);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.12;
	text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); letter-spacing: -.01em; line-height: 1.25; }
h4 { font-size: 1.05rem; letter-spacing: -.01em; }

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

a {
	color: var(--blau-text);
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	transition: color var(--zeit) var(--kurve);
}

a:hover { color: var(--rot-text); }

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

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

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .3em; }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: 640; color: var(--text-stark); }

hr { border: 0; border-top: 1px solid var(--linie); margin: 2.5rem 0; }
address { font-style: normal; }

.lead {
	font-size: clamp(1.1rem, 1.5vw, 1.3rem);
	line-height: 1.5;
	color: var(--text-leise);
}

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

.icon {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

/* Technische Beschriftung: das wiederkehrende Kleinteil der Seite.
   Versal, weit gesperrt, mit vorangestellter Nummer wie in einer Stückliste. */
.label,
.kicker {
	display: flex;
	align-items: baseline;
	gap: .7rem;
	margin: 0 0 1.4rem;
	font-family: 'Poppins', sans-serif;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rot-text);
	font-variant-numeric: tabular-nums;
}

.kicker::before {
	content: attr(data-nr);
	color: var(--rot);
	font-weight: 700;
}

/* Ohne Nummer bleibt ein kurzer Strich als Marke. */
.kicker:not([data-nr])::before {
	content: '';
	width: 1.5rem;
	height: 1px;
	background: var(--rot);
	align-self: center;
}


/* == 02  Raster und Abschnitte =========================================== */

.container {
	width: 100%;
	max-width: var(--breite);
	margin-inline: auto;
	padding-inline: var(--luft);
}

.container--schmal { max-width: var(--breite-schmal); }

.section { padding-block: var(--abstand); }
.section--eng { padding-block: calc(var(--abstand) * .5); }
.section--leise { background: var(--papier-2); }

.section--tief {
	background: var(--tinte);
	color: rgba(255, 255, 255, .72);
}

.section--tief h2,
.section--tief h3 { color: #fff; }
.section--tief .kicker { color: rgba(255, 255, 255, .5); }

/* Signalfläche.
   Einmal pro Seite, nie zweimal: eine volle Fläche im Gelb des Logos, darauf
   nur Anthrazit. Sie ist der eine Punkt, an dem die Seite die Stimme hebt —
   deshalb trägt sie einen Satz und keine Aufzählung. */
.section--gelb {
	background: var(--gelb);
	color: var(--tinte);
}

.section--gelb h2,
.section--gelb h3,
.section--gelb strong { color: var(--tinte); }

.section--gelb .kicker { color: rgba(20, 22, 26, .6); }
.section--gelb .kicker::before { background: var(--tinte); color: var(--tinte); }

.section--gelb .rte { font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.25; font-weight: 620; letter-spacing: -.025em; }
.section--gelb .rte p { color: var(--tinte); }
.section--gelb .rte a { color: var(--tinte); }

.section--gelb .fact { background: rgba(255, 255, 255, .35); border-color: rgba(20, 22, 26, .12); }
.section--gelb .facts__grid { background: transparent; }
.section--gelb .fact__value { color: var(--tinte); }
.section--gelb .fact__label { color: rgba(20, 22, 26, .68); }
.section--gelb .fact__icon { color: var(--tinte); }

/* Der Abschnittskopf steht links und schmal — Fließtext über 46rem liest
   niemand gern, und die freie Fläche rechts gibt der Seite Luft. */
.section-head {
	max-width: 46rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head--center {
	margin-inline: auto;
	text-align: center;
}

.section-head--center .kicker { justify-content: center; }

/* Kopf, der nur aus der Beschriftung besteht — etwa über der Signalfläche. */
.section-head--nur-label { margin-bottom: 1.5rem; }

.section-head__text {
	margin-top: 1.1rem;
	max-width: 42rem;
	font-size: 1.1rem;
	color: var(--text-leise);
}

.section-head--center .section-head__text { margin-inline: auto; }

/* Feines Korn auf den dunklen Flächen.
 *
 * Eine große Fläche in einem einzigen Farbwert wirkt am Bildschirm tot und
 * zeigt auf schwachen Panels Streifen. Ein kaum sichtbares Rauschen bricht
 * beides. Es liegt als erzeugte Grafik in der Datei — keine zusätzliche
 * Anfrage, wenige hundert Byte. */
.hero::after,
.cta::after,
.section--tief::after,
.site-footer::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .32;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

.section--tief,
.site-footer { position: relative; isolation: isolate; }

/* Der dreifarbige Strich aus dem Logo. Er trennt die großen Teile der Seite
   und ist das einzige rein dekorative Element, das bleiben darf — weil er aus
   der Marke stammt und nicht aus dem Baukasten. */
.logo-band {
	display: flex;
	height: 5px;
	overflow: hidden;
}

.logo-band span { flex: 1; }
.logo-band span:nth-child(1) { background: var(--rot); }
.logo-band span:nth-child(2) { background: var(--blau); }
.logo-band span:nth-child(3) { background: var(--gelb); }


/* == 03  Schaltflächen =================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: 1rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--radius-klein);
	font-family: 'Poppins', sans-serif;
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--zeit) var(--kurve),
	            color var(--zeit) var(--kurve),
	            border-color var(--zeit) var(--kurve);
}

.btn--accent {
	background: var(--rot-text);
	border-color: var(--rot-text);
	color: #fff;
}

.btn--accent:hover { background: var(--tinte); border-color: var(--tinte); color: #fff; }

.btn--primary {
	background: var(--tinte);
	border-color: var(--tinte);
	color: #fff;
}

.btn--primary:hover { background: var(--rot-text); border-color: var(--rot-text); color: #fff; }

.btn--ghost {
	background: transparent;
	border-color: var(--linie-stark);
	color: var(--text-stark);
}

.btn--ghost:hover { border-color: var(--tinte); background: var(--tinte); color: #fff; }

.btn--hell {
	background: #fff;
	border-color: #fff;
	color: var(--tinte);
}

.btn--hell:hover { background: var(--gelb); border-color: var(--gelb); color: var(--tinte); }

.btn--rand-hell {
	background: transparent;
	border-color: rgba(255, 255, 255, .35);
	color: #fff;
}

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

.btn-gruppe {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 1.9rem;
}

/* Textverweis mit Pfeil */
.pfeil-link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-weight: 620;
	font-size: .92rem;
	text-decoration: none;
}

.pfeil-link::after {
	content: '→';
	transition: transform var(--zeit) var(--kurve);
}

.pfeil-link:hover::after { transform: translateX(4px); }


/* == 04  Kopf ============================================================ */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: .8rem 1.25rem;
	background: var(--rot-text);
	color: #fff;
	font-weight: 620;
}

.skip-link:focus { left: 1rem; top: 1rem; color: #fff; }

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--papier);
	border-bottom: 1px solid var(--linie);
}

/* Servicezeile */
.topbar {
	background: var(--tinte);
	color: rgba(255, 255, 255, .62);
	font-size: .76rem;
	letter-spacing: .04em;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 2.35rem;
}

.topbar__claim {
	margin: 0;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 620;
	color: rgba(255, 255, 255, .5);
}

.topbar__contact { display: flex; align-items: center; gap: 1.75rem; }

.topbar__link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.topbar__link:hover { color: #fff; }
.topbar__link .icon { width: .9em; height: .9em; color: var(--gelb); }

/* Markenblock */
.masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 4.75rem;
}

.brand {
	display: flex;
	align-items: center;
	gap: .7rem;
	flex: none;
	text-decoration: none;
	color: inherit;
}

.brand__mark {
	width: auto;
	height: clamp(2.25rem, 4vw, 2.85rem);
	flex: none;
}

.brand__type { display: grid; gap: .15rem; }

.brand__name {
	font-size: clamp(1.1rem, 1.7vw, 1.3rem);
	font-weight: 780;
	letter-spacing: .14em;
	line-height: 1;
	color: var(--tinte);
}

.brand__claim {
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .13em;
	line-height: 1.2;
	color: var(--text-leise);
	text-transform: uppercase;
}

@media (max-width: 460px) {
	.brand__claim { display: none; }
}

.main-nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2rem);
	margin-left: auto;
}

.main-nav__list,
.main-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 1.8vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-nav li { margin: 0; position: relative; }

.main-nav a {
	display: inline-block;
	padding: .3rem 0;
	color: var(--text-stark);
	font-size: .87rem;
	font-weight: 580;
	letter-spacing: .01em;
	text-decoration: none;
	position: relative;
	white-space: nowrap;
}

.main-nav a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -.1rem;
	width: 100%;
	height: 2px;
	background: var(--rot);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--zeit) var(--kurve);
}

.main-nav a:hover::after,
.main-nav .current-menu-item > a::after,
.main-nav .current_page_item > a::after { transform: scaleX(1); }

.main-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 15rem;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: .4rem 0;
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	box-shadow: var(--schatten-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--zeit) var(--kurve), transform var(--zeit) var(--kurve), visibility var(--zeit);
}

.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.main-nav .sub-menu a { display: block; padding: .5rem 1rem; font-weight: 500; }
.main-nav .sub-menu a::after { display: none; }
.main-nav .sub-menu a:hover { background: var(--papier-2); }

/* flex-shrink abschalten: sonst quetscht die Zeile die Schaltfläche zusammen,
   bis die Beschriftung über den Rand steht. */
.main-nav__actions { display: flex; align-items: center; gap: .6rem; flex: none; }
.main-nav__actions .btn { flex: none; white-space: nowrap; padding: .8rem 1.2rem; font-size: .82rem; }

/* Die Nummer steht schon in der Servicezeile — im Kopf wäre sie doppelt.
   Zwei Klassen, damit die Regel gegen .btn gewinnt. */
.main-nav .main-nav__phone { display: none; }

.nav-toggle {
	display: none;
	align-items: center;
	gap: .55rem;
	padding: .6rem .85rem;
	background: transparent;
	border: 1px solid var(--linie-stark);
	border-radius: var(--radius-klein);
	font-family: 'Poppins', sans-serif;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-stark);
	cursor: pointer;
}

.nav-toggle__bars { display: grid; gap: 4px; width: 17px; }

.nav-toggle__bars span {
	display: block;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--zeit) var(--kurve), opacity var(--zeit) var(--kurve);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1060px) {

	.topbar__link--mail,
	.topbar__link--place { display: none; }

	.nav-toggle { display: inline-flex; }

	.main-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(23rem, 90vw);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 5.5rem 1.75rem 2rem;
		background: var(--papier);
		border-left: 1px solid var(--linie);
		transform: translateX(100%);
		transition: transform .32s var(--kurve);
		overflow-y: auto;
	}

	.main-nav.ist-offen { transform: translateX(0); }

	.main-nav__list,
	.main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }

	.main-nav li { border-bottom: 1px solid var(--linie); }

	.main-nav a { padding: 1rem 0; font-size: 1.05rem; font-weight: 620; }
	.main-nav a::after { display: none; }

	.main-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		padding: 0 0 .5rem .9rem;
		min-width: 0;
	}

	.main-nav .sub-menu li { border: 0; }
	.main-nav .sub-menu a { padding: .5rem 0; }

	.main-nav__actions { flex-direction: column; align-items: stretch; margin-top: 1.5rem; }
	.main-nav .main-nav__phone { display: inline-flex; }

	body.nav-offen { overflow: hidden; }

	.nav-schleier {
		position: fixed;
		inset: 0;
		z-index: 99;
		background: rgba(20, 22, 26, .5);
		opacity: 0;
		transition: opacity var(--zeit) var(--kurve);
	}

	.nav-schleier.ist-sichtbar { opacity: 1; }
}


/* == 05  Fuß ============================================================= */

.site-footer {
	background: var(--tinte);
	color: rgba(255, 255, 255, .6);
	font-size: .92rem;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 1.1fr .85fr 1.15fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-block: clamp(3.5rem, 6vw, 5rem);
}

@media (max-width: 1000px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px)  { .site-footer__grid { grid-template-columns: 1fr; } }

.brand--fuss { margin-bottom: 1.1rem; }
.brand--fuss .brand__name { color: #fff; }
.brand--fuss .brand__claim { color: rgba(255, 255, 255, .45); }

.site-footer__role {
	margin: 0 0 1rem;
	font-size: .7rem;
	font-weight: 640;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gelb);
}

.site-footer__note {
	color: rgba(255, 255, 255, .5);
	font-size: .88rem;
	max-width: 26rem;
}

.site-footer__title {
	margin: 0 0 1.2rem;
	font-size: .7rem;
	font-weight: 640;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .95);
}

.site-footer__address {
	display: grid;
	gap: .15rem;
	margin-bottom: 1.15rem;
	line-height: 1.5;
}

.site-footer__hint { color: rgba(255, 255, 255, .38); font-size: .82em; }

.site-footer__lines { margin: 0; }

.site-footer__lines > div { display: flex; gap: .8rem; margin-bottom: .2rem; }

.site-footer__lines dt {
	width: .9rem;
	color: rgba(255, 255, 255, .35);
	font-weight: 620;
	flex: none;
}

.site-footer__lines dd { margin: 0; font-variant-numeric: tabular-nums; }

.site-footer a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.site-footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }

.site-footer__hours { margin: 0 0 1.35rem; }

.site-footer__hours > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: .75rem;
	padding: .4rem 0;
	border-bottom: 1px solid var(--linie-tinte);
}

.site-footer__hours dt { color: rgba(255, 255, 255, .6); }

.site-footer__hours dd {
	margin: 0;
	color: #fff;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Notfallhinweis: eine Zeile, die nicht in Stücke bricht. */
.site-footer__emergency {
	display: block;
	margin: 0;
	padding: .85rem 1rem;
	background: rgba(238, 36, 68, .12);
	border-left: 2px solid var(--rot);
	font-size: .85rem;
	line-height: 1.5;
}

.site-footer__emergency .icon {
	color: var(--rot);
	display: inline-block;
	vertical-align: -.15em;
	margin-right: .35rem;
}

.site-footer__emergency a {
	color: #fff;
	font-weight: 640;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.site-footer__bar { border-top: 1px solid var(--linie-tinte); font-size: .8rem; }

.site-footer__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-block: 1.15rem;
}

.site-footer__copy { margin: 0; color: rgba(255, 255, 255, .38); }

.site-footer__legal { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.site-footer__legal li { margin: 0; }

.to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 90;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--rot-text);
	color: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: var(--schatten-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--zeit) var(--kurve), transform var(--zeit) var(--kurve),
	            visibility var(--zeit), background var(--zeit) var(--kurve);
}

.to-top.ist-sichtbar { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--tinte); color: #fff; }
.to-top .icon { width: 1.1rem; height: 1.1rem; }


/* == 06  Blocks ========================================================== */

/* --- Kopfbereich der Startseite -----------------------------------------
   Ohne Foto als Bühne. Das Zeichen aus dem Logo steht groß und beschnitten
   im Anschnitt, die Schrift trägt die Fläche. Ein Foto kann zugeschaltet
   werden; es liegt dann als stark abgedunkelte Struktur darunter. */

/* Der Kopf ist hell. Das Foto trägt die ganze Fläche, der Text steht links
   in Tinte auf der hellen Wand — kein dunkler Schleier über dem Bild, weil
   genau der die Seite schwer macht. Ein weicher weißer Verlauf von links
   sichert nur den Kontrast, falls das Bild einmal getauscht wird. */
.hero {
	position: relative;
	background: var(--papier);
	color: var(--text);
	overflow: hidden;
	isolation: isolate;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
}

/* Der Verlauf hält den Text lesbar, ohne das Bild abzudunkeln. */
.hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		rgba(255, 255, 255, .97) 0%,
		rgba(255, 255, 255, .92) 34%,
		rgba(255, 255, 255, .55) 56%,
		rgba(255, 255, 255, 0) 78%);
}

@media (max-width: 900px) {
	.hero__media::after {
		background: linear-gradient(180deg,
			rgba(255, 255, 255, .95) 0%,
			rgba(255, 255, 255, .88) 48%,
			rgba(255, 255, 255, .55) 100%);
	}
}

/* Das Zeichen, groß im Anschnitt rechts. */
/* Das Zeichen bleibt als ganz leiser Wasserzeichen-Abdruck. */
.hero::before {
	content: '';
	position: absolute;
	z-index: 1;
	right: 4%;
	bottom: -12%;
	width: min(34vw, 380px);
	aspect-ratio: 266.5 / 258;
	background: var(--hero-mark) center / contain no-repeat;
	opacity: .08;
	pointer-events: none;
}

@media (max-width: 900px) {
	.hero::before { display: none; }
}

/* Der Kopf sitzt auf derselben Fluchtlinie wie das Logo darüber.
   Die Breite wird an den Textzeilen begrenzt, nicht am Container — sonst
   zentriert sich der ganze Block und rückt von der linken Kante ab. */
.hero__inner {
	position: relative;
	display: grid;
	justify-items: start;
	gap: 1.9rem;
	padding-block: clamp(4rem, 11vw, 9rem);
}

.hero__title { max-width: 17ch; }
.hero__text { max-width: 38ch; }

.hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	align-self: start;
	padding: .5rem 1rem;
	background: var(--papier);
	border-radius: 100px;
	box-shadow: var(--schatten-1);
	font-family: 'Poppins', sans-serif;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-stark);
}

.hero__kicker .icon { color: var(--rot); }

.hero__title {
	margin: 0;
	color: var(--text-stark);
	font-size: clamp(2.3rem, 5.4vw, 4.4rem);
	font-weight: 600;
	letter-spacing: -.025em;
	line-height: 1.08;
}

.hero__title em {
	font-style: normal;
	color: var(--rot-text);
}

.hero__text {
	margin: 0;
	font-size: clamp(1.02rem, 1.35vw, 1.18rem);
	line-height: 1.6;
	color: var(--text-leise);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Datenleiste: drei Aussagen, durch Haarlinien getrennt. */
.hero__bar {
	position: relative;
	z-index: 2;
	background: var(--papier-2);
	border-top: 1px solid var(--linie);
}

.hero__bar-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0;
}

.hero__fact {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: 1.25rem 0 1.25rem 1.75rem;
	border-left: 1px solid var(--linie);
	font-size: .9rem;
	color: var(--text-leise);
}

.hero__fact:first-child { padding-left: 0; border-left: 0; }
.hero__fact .icon { color: var(--rot); width: 1.15em; height: 1.15em; }
.hero__fact strong { color: var(--text-stark); font-weight: 600; }

@media (max-width: 640px) {
	.hero__fact { padding-left: 0; border-left: 0; border-top: 1px solid var(--linie); }
	.hero__fact:first-child { border-top: 0; }
}

/* --- Kopfbereich der Unterseiten --- */
.page-header {
	position: relative;
	background: var(--papier-2);
	color: var(--text);
	overflow: hidden;
	isolation: isolate;
}

.page-header--plain {
	background: var(--papier-2);
	color: var(--text);
	padding-block: clamp(2.5rem, 6vw, 4rem);
	border-bottom: 1px solid var(--linie);
}

.page-header--plain .page-header__title { color: var(--text-stark); }

.page-header__media { position: absolute; inset: 0; z-index: -1; }

.page-header__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
}

.page-header__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		rgba(255, 255, 255, .96) 0%,
		rgba(255, 255, 255, .9) 38%,
		rgba(255, 255, 255, .5) 62%,
		rgba(255, 255, 255, .05) 85%);
}

@media (max-width: 900px) {
	.page-header__media::after {
		background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.75) 100%);
	}
}

.page-header__inner {
	position: relative;
	padding-block: clamp(3rem, 7vw, 5.5rem);
}

.page-header__title { max-width: 20ch; }

.page-header__kicker {
	margin: 0 0 1rem;
	font-family: 'Poppins', sans-serif;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rot-text);
}

.page-header__title {
	margin: 0;
	color: var(--text-stark);
	font-size: clamp(2rem, 4.2vw, 3.2rem);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.1;
}

.page-header__text {
	margin: 1.2rem 0 0;
	max-width: 36rem;
	font-size: clamp(1rem, 1.35vw, 1.15rem);
	color: var(--text-leise);
}

.breadcrumb {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-leise);
}

.breadcrumb li { margin: 0; display: flex; gap: .5rem; align-items: center; }
.breadcrumb li + li::before { content: '/'; color: var(--linie-stark); }
.breadcrumb a { color: var(--text-leise); text-decoration: none; }
.breadcrumb a:hover { color: var(--rot-text); }

/* --- Leistungen ---------------------------------------------------------
   Ein Raster aus Zellen, die sich eine Haarlinie teilen — wie eine Tabelle.
   Keine schwebenden Karten. Die Farbe des Bereichs steht als Strich oben. */

.services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
	gap: 1.15rem;
}

.service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	padding: 1.9rem 1.75rem 1.75rem;
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: transform var(--zeit) var(--kurve),
	            box-shadow var(--zeit) var(--kurve),
	            border-color var(--zeit) var(--kurve);
}

/* Der farbige Streifen fährt beim Überfahren von links ein und ordnet die
   Kachel ihrem Bereich zu — Rot Wärme, Blau Wasser, Gelb Sonne. */
.service-card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--karte-farbe, var(--blau));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--kurve);
}

.service-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--schatten-2);
	border-color: transparent;
}

.service-card:hover::before { transform: scaleX(1); }

/* Laufende Nummer wie in einer Stückliste. */
.service-card__nr {
	font-size: .7rem;
	font-weight: 680;
	letter-spacing: .16em;
	color: var(--text-leise);
	font-variant-numeric: tabular-nums;
}

.service-card__icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: .3rem;
	border-radius: var(--radius-klein);
	background: color-mix(in srgb, var(--karte-farbe, var(--blau)) 11%, transparent);
	color: var(--karte-farbe, var(--blau));
}

.service-card__icon .icon { width: 1.7rem; height: 1.7rem; stroke-width: 1.4; }

.service-card__title { margin: 0; font-size: 1.22rem; }

.service-card__text {
	margin: 0;
	font-size: .93rem;
	line-height: 1.55;
	color: var(--text-leise);
	flex: 1;
}

.service-card__more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: .5rem;
	font-size: .82rem;
	font-weight: 640;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-stark);
}

.service-card__more::after { content: '→'; transition: transform var(--zeit) var(--kurve); }
.service-card:hover .service-card__more::after { transform: translateX(4px); }

.service-card__neu {
	position: absolute;
	top: 1.4rem;
	right: 1.4rem;
	padding: .25rem .6rem;
	background: var(--gelb);
	color: var(--tinte);
	border-radius: 100px;
	font-family: 'Poppins', sans-serif;
	font-size: .64rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* --- Fließtext --- */
.text-block__inner { max-width: 44rem; }
.text-block--breit .text-block__inner { max-width: none; }

.text-block--zwei .text-block__inner {
	max-width: none;
	columns: 2;
	column-gap: 4rem;
}

@media (max-width: 780px) { .text-block--zwei .text-block__inner { columns: 1; } }

.rte h2 { margin-top: 2.5rem; }
.rte h3 { margin-top: 2rem; }
.rte h2:first-child, .rte h3:first-child { margin-top: 0; }

.rte ul { list-style: none; padding-left: 0; }

.rte ul li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: .45rem;
}

/* Ein kurzer Strich statt eines Punktes — passt zur technischen Anmutung. */
.rte ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .78em;
	width: .7rem;
	height: 1px;
	background: var(--linie-stark);
}

.rte ol { padding-left: 1.3rem; }
.rte ol li::marker { color: var(--rot); font-weight: 680; font-variant-numeric: tabular-nums; }

.rte blockquote {
	margin: 1.75rem 0;
	padding: .25rem 0 .25rem 1.5rem;
	border-left: 2px solid var(--gelb);
	font-size: 1.05rem;
	color: var(--text-stark);
}

.rte a { font-weight: 560; }

.rte table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.rte th, .rte td { padding: .7rem .9rem; border-bottom: 1px solid var(--linie); text-align: left; }
.rte th { font-weight: 640; color: var(--text-stark); }

/* --- Bild neben Text ---
   Das Bild bekommt einen festen Rahmen und bleibt klein — 5 von 12 Spalten.
   Der Text hat Vorrang. */
.split {
	display: grid;
	grid-template-columns: 5fr 7fr;
	align-items: start;
	gap: clamp(2rem, 5vw, 5rem);
}

.split--gedreht { grid-template-columns: 7fr 5fr; }
.split--gedreht .split__media { order: 2; }

@media (max-width: 900px) {
	.split, .split--gedreht { grid-template-columns: 1fr; }
	.split--gedreht .split__media { order: 0; }
}

.split__media {
	position: relative;
	margin: 0;
	border-radius: var(--radius-gross);
	overflow: hidden;
	background: var(--papier-3);
}

.split__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.split__media--hoch img { aspect-ratio: 3 / 4; }

.split__content h2 { margin-bottom: 1rem; }
.split__content .rte { font-size: 1.02rem; }

/* --- Schritte ---
   Fünf Spalten, durch Haarlinien getrennt, mit großer Nummer. */
.steps__list {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.steps__list { grid-template-columns: repeat(5, 1fr); }
	.steps--vier .steps__list { grid-template-columns: repeat(4, 1fr); }
	.steps--drei .steps__list { grid-template-columns: repeat(3, 1fr); }
}

.step {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	margin: 0;
	padding: 1.75rem 1.5rem;
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
}

.step__num {
	font-size: 2rem;
	font-weight: 760;
	line-height: 1;
	letter-spacing: -.05em;
	color: var(--linie-stark);
	font-variant-numeric: tabular-nums;
}

.step:nth-child(1) .step__num { color: var(--rot); }
.step:nth-child(2) .step__num { color: var(--blau); }
.step:nth-child(3) .step__num { color: var(--gelb); }

.step__title { margin: 0; font-size: 1.02rem; }
.step__text { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--text-leise); }

/* --- Zahlen --- */
.facts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1rem;
}

.fact {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	padding: 1.9rem 1.6rem;
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
}

.fact__icon { color: var(--rot); margin-bottom: .35rem; }
.fact__icon .icon { width: 1.5rem; height: 1.5rem; }

.fact__value {
	font-size: clamp(1.7rem, 2.6vw, 2.3rem);
	font-weight: 740;
	line-height: 1;
	color: var(--text-stark);
	letter-spacing: -.04em;
	font-variant-numeric: tabular-nums;
}

.fact__label { font-size: .88rem; line-height: 1.45; color: var(--text-leise); }

.section--tief .facts__grid { background: transparent; }
.section--tief .fact { background: rgba(255, 255, 255, .05); border-color: var(--linie-tinte); }
.section--tief .fact__value { color: #fff; }
.section--tief .fact__label { color: rgba(255, 255, 255, .55); }
.section--tief .fact__icon { color: var(--gelb); }

/* --- Galerie ---
   Strenges Raster, harte Kanten, keine Rundungen. */
.gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1rem;
}

.gallery__item {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--papier-3);
	cursor: zoom-in;
}

.gallery__item img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform .5s var(--kurve);
}

.gallery--quer .gallery__item img { aspect-ratio: 4 / 3; }

.gallery__item:hover img { transform: scale(1.04); }

.gallery__caption {
	position: absolute;
	inset: auto 0 0;
	padding: 2.5rem .9rem .8rem;
	background: linear-gradient(to top, rgba(20, 22, 26, .85), transparent);
	color: #fff;
	font-size: .8rem;
	opacity: 0;
	transition: opacity var(--zeit) var(--kurve);
}

.gallery__item:hover .gallery__caption,
.gallery__item:focus-within .gallery__caption { opacity: 1; }

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(20, 22, 26, .96);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--zeit) var(--kurve), visibility var(--zeit);
}

.lightbox.ist-offen { opacity: 1; visibility: visible; }

.lightbox__img {
	max-width: min(100%, 1100px);
	max-height: 82vh;
	width: auto;
	object-fit: contain;
}

.lightbox__caption { margin-top: 1rem; color: rgba(255, 255, 255, .6); font-size: .85rem; text-align: center; }

.lightbox__close,
.lightbox__nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .25);
	color: #fff;
	font-size: 1.25rem;
	cursor: pointer;
	transition: background var(--zeit) var(--kurve);
}

.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, .12); }

.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__nav--prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1.25rem; top: 50%; transform: translateY(-50%); }

/* --- Ausklappbares --- */
.accordion { display: grid; gap: .75rem; }

.accordion__item {
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow var(--zeit) var(--kurve);
}

.accordion__item[open] { box-shadow: var(--schatten-1); }

.accordion__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	font-size: 1.08rem;
	font-weight: 620;
	letter-spacing: -.01em;
	color: var(--text-stark);
	cursor: pointer;
	list-style: none;
}

.accordion__head::-webkit-details-marker { display: none; }
.accordion__head:hover { color: var(--rot-text); }

.accordion__sign { position: relative; flex: none; width: 1rem; height: 1rem; }

.accordion__sign::before,
.accordion__sign::after {
	content: '';
	position: absolute;
	inset: 50% 0 auto;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--zeit) var(--kurve);
}

.accordion__sign::after { transform: rotate(90deg); }
.accordion__item[open] .accordion__sign::after { transform: rotate(0); }

.accordion__body { padding: 0 1.5rem 1.5rem; color: var(--text-leise); }

/* --- Pellets-Umrechner --- */
.pellets {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

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

.pellets__panel {
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	background: var(--papier);
	overflow: hidden;
	box-shadow: var(--schatten-1);
}

.pellets__input {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: 1.5rem;
	border-bottom: 1px solid var(--linie);
	font-size: .9rem;
	color: var(--text-leise);
}

.pellets__input label { flex: 1; }

.pellets__input input {
	width: 7.5rem;
	padding: .65rem .8rem;
	font-family: inherit;
	font-size: 1.1rem;
	font-weight: 660;
	font-variant-numeric: tabular-nums;
	color: var(--text-stark);
	border: 1px solid var(--linie-stark);
	border-radius: var(--radius-klein);
	background: var(--papier);
	text-align: right;
}

.pellets__input input:focus-visible { border-color: var(--tinte); outline-offset: 0; }

.pellets__results { display: grid; }

.pellets__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 1.5rem;
	border-bottom: 1px solid var(--linie);
}

.pellets__label { font-size: .9rem; color: var(--text-leise); }

.pellets__value {
	font-size: 1.6rem;
	font-weight: 740;
	letter-spacing: -.03em;
	color: var(--text-stark);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pellets__hint { padding: 1.1rem 1.5rem; font-size: .82rem; line-height: 1.5; color: var(--text-leise); }

/* --- Personen --- */
.team__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.15rem;
}

.person {
	display: flex;
	flex-direction: column;
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow var(--zeit) var(--kurve);
}

.person:hover { box-shadow: var(--schatten-2); }

.person__photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 20%;
	background: var(--papier-3);
}

.person__body { padding: 1.4rem 1.5rem 1.6rem; }

.person__role {
	margin: 0 0 .4rem;
	font-size: .68rem;
	font-weight: 660;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--rot);
}

.person__name { margin: 0 0 .5rem; font-size: 1.18rem; }
.person__text { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--text-leise); }

/* --- Partner --- */
.partners__tabs { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 2.5rem; border-bottom: 1px solid var(--linie); }

.partners__tab {
	padding: .7rem 1.25rem;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font-family: inherit;
	font-size: .8rem;
	font-weight: 640;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-leise);
	cursor: pointer;
	transition: color var(--zeit) var(--kurve), border-color var(--zeit) var(--kurve);
}

.partners__tab:first-child { padding-left: 0; }
.partners__tab:hover { color: var(--text-stark); }

.partners__tab[aria-selected='true'] { color: var(--text-stark); border-bottom-color: var(--rot); }

.partners__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: .75rem;
}

.partners__panel[hidden] { display: none; }

.partner {
	display: grid;
	place-items: center;
	padding: 1.5rem 1.25rem;
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--radius-klein);
	min-height: 6rem;
	transition: box-shadow var(--zeit) var(--kurve);
}

.partner:hover { box-shadow: var(--schatten-1); }

/* Die Herstellerlogos kommen in vielen Farben und Qualitäten. Entsättigt
   stehen sie ruhig nebeneinander und drängen sich nicht vor die eigene Marke;
   nebenbei fällt so nicht auf, dass die Vorlagen unterschiedlich gut sind. */
.partner img {
	max-width: 100%;
	max-height: 2.75rem;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .55;
	transition: filter var(--zeit) var(--kurve), opacity var(--zeit) var(--kurve);
}

.partner:hover img { filter: grayscale(0); opacity: 1; }

.partners__note { margin-top: 1.25rem; font-size: .88rem; color: var(--text-leise); }

/* --- Zeichen und Mitgliedschaften --- */
.badges__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1.15rem;
}

.badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 1.1rem;
	padding: 2rem 1.35rem;
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	text-align: center;
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--zeit) var(--kurve);
}

a.badge:hover { box-shadow: var(--schatten-2); }

.badge__img {
	height: 4rem;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	flex: none;
	filter: grayscale(1);
	opacity: .8;
	transition: filter var(--zeit) var(--kurve), opacity var(--zeit) var(--kurve);
}

a.badge:hover .badge__img { filter: grayscale(0); opacity: 1; }

/* Ein Zeichen ohne Bild soll die Reihe nicht aus der Flucht bringen:
   an der Stelle des Bildes steht dann ein Strich in Markenfarbe. */
.badge:not(:has(.badge__img))::before {
	content: '';
	display: block;
	width: 2.5rem;
	height: 4rem;
	border-bottom: 3px solid var(--gelb);
	flex: none;
}

.badge__label {
	font-size: .88rem;
	font-weight: 560;
	line-height: 1.45;
	color: var(--text-leise);
	text-decoration: none;
	margin-top: auto;
}

/* --- Stellen --- */
.jobs__list { display: grid; gap: .85rem; }

.job {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1.5rem 1.75rem;
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	transition: box-shadow var(--zeit) var(--kurve);
}

.job:hover { box-shadow: var(--schatten-1); }

.job__title { margin: 0 0 .25rem; font-size: 1.15rem; }
.job__meta { margin: 0; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); }

/* --- Handlungsaufruf ---
   Voll in Tinte, mit dem dreifarbigen Strich als Abschluss. */
.cta {
	position: relative;
	background: var(--tinte);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.cta::before {
	content: '';
	position: absolute;
	z-index: -1;
	left: -6%;
	bottom: -60%;
	width: min(40vw, 460px);
	aspect-ratio: 266.5 / 258;
	background: var(--hero-mark) center / contain no-repeat;
	opacity: .08;
	pointer-events: none;
}

.cta__inner {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2.5rem;
	padding-block: clamp(3rem, 7vw, 5rem);
}

.cta__content { max-width: 40rem; }

.cta__title {
	margin: 0 0 .8rem;
	color: #fff;
	font-size: clamp(1.7rem, 3.4vw, 2.7rem);
	font-weight: 720;
	letter-spacing: -.035em;
	line-height: 1.05;
}

.cta__text { margin: 0; color: rgba(255, 255, 255, .65); font-size: 1.05rem; }

.cta__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* --- Karte --- */
.map {
	display: grid;
	grid-template-columns: 5fr 7fr;
	border: 1px solid var(--linie);
	border-radius: var(--radius-gross);
	overflow: hidden;
}

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

.map__info { padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--papier); }

.map__adr { display: grid; gap: 1.75rem; }

.map__ort h3 {
	margin: 0 0 .4rem;
	font-size: .72rem;
	font-weight: 660;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--rot-text);
}

.map__ort p { margin: 0; color: var(--text); font-size: 1rem; line-height: 1.55; }

.map__frame { position: relative; min-height: 24rem; background: var(--papier-3); border-left: 1px solid var(--linie); }
.map__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 900px) { .map__frame { border-left: 0; border-top: 1px solid var(--linie); } }

.map__consent {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 2rem;
	text-align: center;
	background: var(--papier-2);
}

.map__consent-inner { max-width: 26rem; }
.map__consent h3 { margin: 0 0 .7rem; font-size: 1.15rem; }
.map__consent p { margin: 0 0 1.4rem; font-size: .9rem; line-height: 1.55; color: var(--text-leise); }

/* --- Rechtstexte --- */
.legal { max-width: 50rem; color: var(--text); }

.legal h2 {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--linie);
	font-size: 1.35rem;
}

.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { margin-top: 1.75rem; font-size: 1.05rem; }
.legal p, .legal li { font-size: .97rem; }

.legal__toc {
	margin-bottom: 3rem;
	padding: 1.75rem;
	background: var(--papier-2);
	border-radius: var(--radius);
}

.legal__toc h2 {
	margin: 0 0 .9rem;
	padding: 0;
	border: 0;
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-leise);
}

.legal__toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2.5rem; }
@media (max-width: 640px) { .legal__toc ol { columns: 1; } }
.legal__toc li { font-size: .9rem; margin-bottom: .3rem; }

/* --- Verweiskarten (404) --- */
.link-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.link-card {
	display: grid;
	gap: .4rem;
	padding: 1.75rem 1.5rem;
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--zeit) var(--kurve);
}

.link-card:hover { box-shadow: var(--schatten-2); }
.link-card__title { font-weight: 660; color: var(--text-stark); }
.link-card__text { font-size: .9rem; color: var(--text-leise); }

/* --- Teaser --- */
.teaser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 2rem; }
.teaser__media { display: block; overflow: hidden; margin-bottom: 1rem; }
.teaser__title { font-size: 1.2rem; margin-bottom: .4rem; }
.teaser__title a { text-decoration: none; }
.teaser__text { font-size: .92rem; color: var(--text-leise); }


/* == 07  Formulare ======================================================= */

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.25rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.feld { display: grid; gap: .45rem; }
.feld--voll { grid-column: 1 / -1; }

.feld > label,
.feld__label {
	font-size: .72rem;
	font-weight: 640;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-leise);
}

.feld__pflicht { color: var(--rot); }

.feld input[type='text'],
.feld input[type='email'],
.feld input[type='tel'],
.feld input[type='number'],
.feld select,
.feld textarea {
	width: 100%;
	padding: .8rem .9rem;
	font-family: inherit;
	font-size: .97rem;
	color: var(--text);
	background: var(--papier);
	border: 1px solid var(--linie-stark);
	border-radius: var(--radius-klein);
	transition: border-color var(--zeit) var(--kurve), box-shadow var(--zeit) var(--kurve);
}

.feld textarea { min-height: 8rem; resize: vertical; }

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
	outline: none;
	border-color: var(--rot);
	box-shadow: 0 0 0 3px rgba(238, 36, 68, .12);
}

.feld input:user-invalid,
.feld select:user-invalid { border-color: var(--rot); }

.feld select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236C737D' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .9rem center;
	padding-right: 2.4rem;
}

.wahl-gruppe { display: flex; flex-wrap: wrap; gap: .5rem; }

.wahl { position: relative; display: inline-flex; }
.wahl input { position: absolute; opacity: 0; width: 0; height: 0; }

.wahl span {
	display: inline-flex;
	align-items: center;
	padding: .55rem .9rem;
	background: var(--papier);
	border: 1px solid var(--linie-stark);
	border-radius: 100px;
	font-size: .88rem;
	cursor: pointer;
	transition: all var(--zeit) var(--kurve);
}

.wahl input:checked + span {
	background: color-mix(in srgb, var(--rot) 10%, var(--papier));
	border-color: var(--rot);
	color: var(--rot-text);
	font-weight: 600;
}

.wahl input:focus-visible + span { outline: 2px solid var(--tinte); outline-offset: 2px; }

.zustimmung {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	font-size: .88rem;
	color: var(--text-leise);
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

.zustimmung input[type='checkbox'] {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: .15rem;
	accent-color: var(--tinte);
}

/* Honigtopf: für Menschen unsichtbar, aber nicht display:none —
   manche Bots ignorieren ausgeblendete Felder. */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
	margin-top: 1.25rem;
	padding: .9rem 1.1rem;
	border-radius: var(--radius-klein);
	font-size: .93rem;
	display: none;
}

.form-status.ist-sichtbar { display: block; }
.form-status--ok { background: var(--papier-2); border-left: 2px solid var(--blau); color: var(--text-stark); }
.form-status--fehler { background: var(--papier-2); border-left: 2px solid var(--rot); color: var(--rot-text); }

.form-karte {
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--radius-gross);
	box-shadow: var(--schatten-1);
}

.form-karte--leise { background: var(--papier); box-shadow: none; }
.form-karte h3 { margin-bottom: .5rem; }

.kontakt-raster {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}

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

button[disabled] { opacity: .5; cursor: not-allowed; }


/* == 08  Hilfsmittel ===================================================== */

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

.page-content > *:last-child { margin-bottom: 0; }

/* Einblenden beim Scrollen.
 *
 * Der Ausgangszustand steht hinter .js — die Klasse setzt das Skript selbst,
 * bevor gezeichnet wird. Bleibt das Skript aus, greift die Regel nie und der
 * Inhalt steht einfach da. Ohne diese Bedingung wäre die halbe Seite leer. */
.js .reveal {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .55s var(--kurve), transform .55s var(--kurve);
}

.js .reveal.ist-sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {

	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.js .reveal { opacity: 1; transform: none; }
}

@media print {

	.site-header, .site-footer__grid, .to-top, .cta, .btn, .map__frame { display: none !important; }

	.js .reveal { opacity: 1; transform: none; }

	body { font-size: 11pt; color: #000; }
	.hero, .page-header { background: none; color: #000; }
	.hero::before, .cta::before { display: none; }
	.hero__title, .page-header__title { color: #000; }
	a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}