/* =========================================================================
   Dens Vitalis Dentallabor — Gestaltung
   =========================================================================

   Haltung
   -------
   Modern, professionell, clean — so steht es im Briefing, und so ist die
   Seite gebaut: viel Weißraum, ruhige Flächen, weiche Radien, kaum Schatten.
   Das Labor arbeitet für Zahnarztpraxen; die Seite muss zuerst Vertrauen und
   Sorgfalt zeigen, nicht Aufmerksamkeit erzwingen.

   Getragen wird alles von einer einzigen Schrift: Mulish. Der bisherige
   Auftritt setzte sie (als „Muli“), und der Kunde wollte sie behalten. Sie
   läuft im Fließtext leicht (300) und in den Überschriften fest (700) — das
   genügt als Kontrast, eine zweite Schrift wäre nur Lärm.

   Farbe wird gespart. Blau ist die Marke und trägt jede Handlung; Gold aus
   dem Zeichen setzt die kleinen Akzente (Sprungmarken, Ziffern, Linien).
   Die Flächen sind weiß und ein kühles Hellgrau; eine warme Sandfläche
   kommt höchstens einmal je Seite vor.

   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. Mulish trägt die ganze Seite: es ist die Schrift des
   bisherigen Auftritts (dort als „Muli“ geladen), und der Kunde hat sie
   ausdrücklich behalten wollen. Zwei Ausschnitte: „latin“ deckt Deutsch samt
   Umlauten und ß ab, „latin-ext“ lädt der Browser nur bei Bedarf nach. */
@font-face {
	font-family: 'Mulish';
	src: url('../fonts/mulish-variable.woff2') format('woff2');
	font-weight: 300 800;
	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: 'Mulish';
	src: url('../fonts/mulish-variable-ext.woff2') format('woff2');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	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 {
	/* ------------------------------------------------------------------
	   Farbe.

	   Die Töne stammen aus dem Zeichen des Labors: ein tiefes Blau und ein
	   warmes Gold. Beide wurden aus der Logodatei gemessen (#005490 und
	   #CCA830); das Blau ist zugleich der Ton, in dem der bisherige Auftritt
	   seine Schaltflächen führte (#015696).

	   Der Kunde wünscht weiß, grau, blau, „eventuell braun“, helle und
	   homogene Farben. Das Gold aus dem Zeichen ist dieser warme Ton — es
	   bleibt sparsam eingesetzt: Sprungmarken, Ziffern, Trennlinien und eine
	   einzige Fläche je Seite.
	   ------------------------------------------------------------------ */

	/* Blau — die Marke. */
	--blau: #015696;
	--blau-hell: #2E7CB8;
	--blau-text: #015696;
	--blau-flaeche: #015696;
	--blau-tief: #013F6E;

	/* Gold — der warme Akzent aus dem Zeichen. Der reine Ton trägt auf Weiß
	   keinen Text (2,3:1); dafür steht die dunklere Fassung bereit. */
	--gold: #C9A233;
	--gold-text: #866713;
	--gold-tief: #A6841F;

	/* Sand — die einzige größere warme Fläche. Sie ist so hell, dass Text
	   in Tinte darauf ruhig steht. */
	--sand: #F3EDE1;
	--sand-tief: #E6DAC3;
	--sand-text: #6F5A32;

	/* Sehr helle Einfärbungen. */
	--wash-blau: #EAF2F9;
	--wash-gold: #FBF5E7;
	--wash-sand: #F7F3EA;

	/* Schiefer: die dunklen Bahnen (Menüband, Zahlen, Fuß) laufen in einem
	   tiefen Marineblau, nicht in Schwarz — es ist das Blau des Zeichens,
	   nur abgedunkelt. */
	--schiefer: #0E3050;
	--schiefer-2: #0A2540;

	/* Grundflächen. Die Seite steht auf Weiß; das Grau ist kühl gehalten,
	   damit es unter dem Blau nicht schmutzig wirkt. */
	--tinte: #14212E;
	--tinte-2: #1C2C3B;
	--tinte-3: #2A3B4C;
	--papier: #FFFFFF;
	--papier-grund: #F5F8FB;
	--papier-2: #EDF2F7;
	--papier-3: #E3EBF2;

	--linie: #DFE7EE;
	--linie-stark: #C2CEDA;
	--linie-tinte: rgba(255, 255, 255, .16);

	--text: #2E3944;
	--text-leise: #64717E;
	--text-stark: var(--tinte);

	/* Maße */
	--breite: 1240px;
	--breite-schmal: 760px;
	/* Abstand vom Fensterrand bis zur Rasterkante — daran hängen die Fotos,
	   die aus dem Raster heraus bis an den Rand laufen. */
	--rand: max(var(--luft), calc((100vw - 1240px) / 2 + var(--luft)));
	--luft: clamp(1.25rem, 4vw, 3.5rem);
	--abstand: clamp(3.75rem, 7vw, 7rem);

	/* Radien. Das Zeichen des Labors besteht aus zwei geschwungenen Linien —
	   ein Zahnumriss und ein Bogen. Die Seite nimmt das auf: großzügige
	   Rundungen an Flächen und Fotos, Kapselform an den kleinen Teilen. Harte
	   Ecken gibt es nur dort, wo eine Linie etwas trennt. */
	--radius-klein: 10px;
	--radius: 16px;
	--radius-gross: 24px;
	--radius-xl: 34px;
	--pill: 999px;

	/* Schatten. Weit und weich statt knapp und dunkel: eine Fläche soll auf
	   dem Papier zu liegen scheinen, nicht darüber zu schweben. */
	--schatten-1: 0 2px 6px rgba(20, 33, 46, .035);
	--schatten-2: 0 2px 8px rgba(20, 33, 46, .04), 0 18px 40px -24px rgba(20, 33, 46, .22);
	--schatten-schwebend: 0 4px 12px rgba(20, 33, 46, .05), 0 28px 60px -30px rgba(20, 33, 46, .28);

	/* Bewegung */
	--zeit: .22s;
	--kurve: cubic-bezier(.2, .7, .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: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.72;
	color: var(--text);
	background: var(--papier);
	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;
	/* Mulish ist humanistisch gebaut und verträgt eine spürbare negative
	   Laufweite, ohne dass die Formen zusammenlaufen. */
	font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--text-stark);
	font-weight: 700;
	letter-spacing: -.021em;
	line-height: 1.16;
	text-wrap: balance;
}

h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
h2 { font-size: clamp(1.65rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 1.4vw, 1.3rem); letter-spacing: -.018em; line-height: 1.3; }
/* h4 stand auf 1rem und war damit kleiner als der Fließtext daneben — das war
   keine Stufe, sondern ein Fehler. */
h4 { font-size: 1.0625rem; letter-spacing: -.01em; }

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

/* Deutsche Wörter sind lang: „Wasserinstallations-Meisterbetrieb“ sprengt
   jede schmale Spalte. In den Fließtexten wird deshalb getrennt — das setzt
   das lang-Attribut am <html> voraus, das WordPress selbst schreibt.
   Überschriften bleiben ungetrennt, dort sieht eine Trennung nach Panne aus. */
p, li, dd, figcaption {
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

h1, h2, h3, h4, .hero__title, .cta__title, .page-header__title { hyphens: manual; }

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

a:hover { color: var(--blau-tief); }

: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: 700; color: var(--text-stark); }

/* Auf den dunklen und farbigen Flächen erbt „strong“ die Schriftfarbe. Sonst
   zöge die Regel darüber die Tinte mit — auf Marineblau war der Titel der
   Kachel dadurch fast unlesbar. */
.section--tief strong,
.section--tief h2,
.section--tief h3,
.cta strong,
.site-footer strong { color: inherit; }

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

.lead {
	font-size: clamp(1.08rem, 1.35vw, 1.28rem);
	font-weight: 300;
	line-height: 1.6;
	color: var(--text-leise);
}

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

.icon {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-miterlimit: 2;
	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. */
/* Die kleine Beschriftung über einer Überschrift. Kein gefülltes Fähnchen,
   sondern ein Strich und ein Wort in Versalien — die ruhigere Form, und sie
   wiederholt den Goldton des Zeichens, ohne eine Fläche dafür zu brauchen. */
.label,
.kicker {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 1.05rem;
	padding: 0;
	background: none;
	border-radius: 0;
	font-family: 'Mulish', sans-serif;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--gold-text);
	font-variant-numeric: tabular-nums;
}

.kicker::before {
	content: '';
	width: 1.75rem;
	height: 2px;
	border-radius: 0;
	background: var(--gold);
	flex: none;
}

/* Die laufende Nummer, falls eine gepflegt ist, steht hinter dem Wort. */
.kicker[data-nr]::after {
	content: attr(data-nr);
	color: rgba(134, 103, 19, .55);
	font-weight: 700;
}

.section--tief .kicker { color: rgba(255, 255, 255, .85); }
.section--tief .kicker::before { background: var(--gold); }
.section--sand .kicker { color: var(--sand-text); }
.section--sand .kicker::before { background: var(--gold-tief); }


/* == 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) * .62); }
/* Der Betrieb wollte die getönten Bahnen neutral: „Die Hintergründe alle
   statt farbig in Hellgrau machen.“ */
.section--leise { background: var(--papier-grund); }

/* Die dunkle Fläche ist eine eingerückte Tafel mit runden Ecken, keine Bahn
   quer über die Seite: die Seite ist hell und weich gebaut, und eine harte
   Bahn wäre der einzige Bruch darin. */
.section--tief {
	background: none;
	padding-inline: var(--luft);
	color: rgba(255, 255, 255, .78);
}

.section--tief > .container {
	background: var(--schiefer);
	border-radius: var(--radius-xl);
	padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
}

.section--tief h2,
.section--tief h3 { color: #fff; }

/* Die Sandfläche.
   Einmal pro Seite, nie zweimal. Sie trägt einen einzigen Satz — den, der
   sonst in einem Absatz untergehen würde — groß und leicht gesetzt, wie ein
   Zitat. Deshalb steht darauf auch keine Aufzählung. */
.section--sand {
	position: relative;
	overflow: hidden;
	background: var(--sand);
	color: var(--tinte);
	padding-block: clamp(3rem, 6vw, 5.5rem);
	text-align: center;
}

/* Das Zeichen als sehr blasser Wasserzeichen-Abdruck. Es steht groß und weit
   rechts, wird vom Text nie berührt und ist bei genauem Hinsehen zu erkennen —
   mehr soll es nicht. */
.section--sand::before {
	content: '';
	position: absolute;
	top: 50%;
	right: -3.5rem;
	width: clamp(8rem, 14vw, 13rem);
	aspect-ratio: 478 / 453;
	transform: translateY(-50%) rotate(-8deg);
	background: url('../img/logo/mark.png') center / contain no-repeat;
	opacity: .1;
	pointer-events: none;
}

/* Der Satz liegt über dem Abdruck, nicht darunter. */
.section--sand > .container { position: relative; z-index: 1; }

@media (max-width: 1100px) {
	.section--sand::before { display: none; }
}



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


.section--sand .rte {
	max-width: 30ch;
	margin-inline: auto;
	font-size: clamp(1.35rem, 2.6vw, 2.15rem);
	line-height: 1.32;
	font-weight: 300;
	letter-spacing: -.022em;
	text-wrap: balance;
}
.section--sand .rte p { color: var(--tinte); }
.section--sand .rte a { color: var(--tinte); }

.section--sand .fact { background: rgba(255, 255, 255, .5); border-color: rgba(20, 22, 26, .1); box-shadow: none; }
.section--sand .facts__grid { background: transparent; }
.section--sand .fact__value { color: var(--tinte); }
.section--sand .fact__label { color: rgba(20, 22, 26, .68); }

/* Der Abschnittskopf ist zweispaltig: links die Überschrift, rechts der
   Einleitungssatz — beide unten bündig. Mittig gesetzte Köpfe über einem
   Raster sehen nach Baukasten aus; nebeneinander liest es sich wie eine
   aufgeschlagene Seite. Die Reihenfolge im Quelltext bleibt unverändert:
   Beschriftung, Überschrift, Text. */
.section-head {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	align-items: end;
	column-gap: clamp(1.5rem, 5vw, 4.5rem);
	row-gap: .35rem;
	margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.section-head .kicker { grid-column: 1; grid-row: 1; margin-bottom: .35rem; }
.section-head h2 { grid-column: 1; grid-row: 2; margin: 0; max-width: 24ch; }
.section-head__text { grid-column: 2; grid-row: 1 / span 2; align-self: end; }

@media (max-width: 860px) {
	.section-head { grid-template-columns: 1fr; }
	.section-head .kicker,
	.section-head h2,
	.section-head__text { grid-column: 1; grid-row: auto; }
	.section-head__text { margin-top: .9rem; }
}

.section-head--center {
	display: block;
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
}

.section-head--center h2 { max-width: none; }
.section-head--center .kicker { margin-inline: auto; }

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

/* Der Einleitungssatz bleibt bei rund 55 Zeichen je Zeile und läuft leicht:
   Mulish in 300 gibt dem Absatz Luft, ohne dünn zu wirken. */
.section-head__text {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(1.05rem, 1.25vw, 1.18rem);
	font-weight: 300;
	line-height: 1.62;
	color: var(--text-leise);
	hyphens: manual;
}

.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. */
.cta__inner::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");
}

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

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

/* Sachliche Schaltflächen mit leichter Rundung. Die ganz runde Kapsel war
   der auffälligste Bruch zum alten Auftritt und ist zurückgenommen. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: .95rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--radius-klein);
	font-family: 'Mulish', sans-serif;
	font-size: .92rem;
	font-weight: 700;
	letter-spacing: -.005em;
	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),
	            box-shadow var(--zeit) var(--kurve),
	            transform var(--zeit) var(--kurve);
}

.btn .icon { width: 1.05em; height: 1.05em; }

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

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

/* Schiefer statt Fast-Schwarz. Der Ton ist der des Menübands und damit der
   einzige dunkle Wert, den die Seite sonst führt; reines Anthrazit stand
   daneben wie ein Fremdkörper. */
.btn--primary {
	background: var(--schiefer);
	border-color: var(--schiefer);
	color: #fff;
}

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

/* Die zweite Schaltfläche trägt wieder einen Umriss statt eines Schattens. */
.btn--ghost {
	background: var(--papier);
	border-color: var(--linie-stark);
	color: var(--text-stark);
}

.btn--ghost:hover {
	background: var(--papier-2);
	border-color: var(--text-leise);
	color: var(--text-stark);
}

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

.btn--hell:hover { background: var(--papier-2); border-color: var(--papier-2); color: var(--schiefer); }

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

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

.btn--gross { padding: 1.2rem 2.2rem; font-size: 1rem; }

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

/* Im Formular sitzt die Schaltfläche dichter am letzten Feld. */
form .btn-gruppe { margin-top: 1.2rem; }

/* 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); }

/* Runder Pfeilknopf. Sitzt in Kacheln unten rechts und ersetzt dort die
   Textzeile „Mehr erfahren“. */
.rund-pfeil {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	flex: none;
	border-radius: 50%;
	background: var(--papier-2);
	color: var(--text-stark);
	font-size: 1rem;
	transition: background var(--zeit) var(--kurve),
	            color var(--zeit) var(--kurve),
	            transform var(--zeit) var(--kurve);
}


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

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

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

/* Der Kopf ist zweiteilig und durchgehend hell: oben Zeichen und
   Erreichbarkeit, darunter die Menüzeile, getrennt durch eine Haarlinie. Nach
   unten schließt eine weitere Haarlinie ab — mehr braucht es nicht, um den Kopf
   vom Inhalt zu trennen. Eine dunkle Bahn quer über die Seite wäre das
   lauteste Element des Auftritts; gewünscht sind helle, homogene Farben. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--papier);
	border-bottom: 1px solid var(--linie);
}

/* Servicezeile */


/* Markenzeile */
.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(2rem, 3.1vw, 2.5rem);
	flex: none;
}

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

.brand__name {
	font-family: 'Mulish', sans-serif;
	font-size: clamp(1.1rem, 1.5vw, 1.28rem);
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	color: var(--tinte);
}

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

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

.masthead__aktionen { display: flex; align-items: center; gap: .6rem; flex: none; }

.main-nav__phone {
	display: inline-flex;
	align-items: center;
	flex: none;
	flex-wrap: nowrap;
	gap: .5rem;
	padding: .7rem 1rem;
	background: var(--papier-2);
	color: var(--text-stark);
	font-family: 'Mulish', sans-serif;
	font-size: .9rem;
	font-weight: 620;
	text-decoration: none;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	transition: background var(--zeit) var(--kurve), color var(--zeit) var(--kurve);
}

.main-nav__phone:hover { background: var(--papier-3); color: var(--blau-tief); }

/* Erreichbarkeit rechts in der Logozeile. Sie hatte einmal eine eigene helle
   Bahn darüber und stand danach im Menüband; neben dem Logo war die Fläche
   ohnehin leer, und dort sucht man sie zuerst. */
.masthead__kontakt {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .3rem 1.4rem;
	margin-left: auto;
	font-size: .86rem;
	color: var(--text-leise);
}

.masthead__kontakt a,
.masthead__kontakt span {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.masthead__kontakt .icon {
	width: 1.05em;
	height: 1.05em;
	color: var(--blau);
}

/* Instagram. Der Kunde führt den Auftritt selbst und wünscht ihn im Kopf. */
.masthead__insta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	flex: none;
	border: 1px solid var(--linie);
	border-radius: var(--radius-klein);
	color: var(--blau);
	transition: background var(--zeit) var(--kurve), border-color var(--zeit) var(--kurve);
}

.masthead__insta .icon { width: 1.15rem; height: 1.15rem; }
.masthead__insta:hover { background: var(--wash-blau); border-color: var(--blau-hell); }

@media (max-width: 860px) { .masthead__termin { display: none; } }
@media (max-width: 640px) { .masthead__insta { display: none; } }

.masthead__kontakt a { color: inherit; text-decoration: none; }
.masthead__kontakt a:hover { color: var(--blau-text); text-decoration: underline; }

@media (max-width: 860px) { .masthead__kontakt--ort { display: none; } }
@media (max-width: 700px) { .masthead__kontakt--mail { display: none; } }
@media (max-width: 520px) { .masthead__kontakt { display: none; } }


/* Die Menüzeile. Hell wie der Rest des Kopfes; der aktuelle Punkt trägt einen
   goldenen Strich, keine Hinterlegung — die hätte die helle Bahn in Kästchen
   zerlegt. */
.navbar {
	background: var(--papier);
	border-top: 1px solid var(--linie);
}

.navbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

/* Der erste Eintrag hat eigenes Polster; ohne den Ausgleich stünde seine
   Schrift um genau dieses Maß rechts vom Zeichen darüber. */
.navbar__inner > .main-nav { margin-left: -1.05rem; }

.main-nav {
	display: flex;
	align-items: center;
	gap: 0;
}

.main-nav__list,
.main-nav ul {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.main-nav a:not(.btn):not(.main-nav__phone) {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 1.05rem;
	color: var(--text);
	font-family: 'Mulish', sans-serif;
	font-size: .775rem;
	font-weight: 700;
	letter-spacing: .105em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--zeit) var(--kurve);
}

.main-nav a:not(.btn):not(.main-nav__phone)::after {
	content: '';
	position: absolute;
	left: 1.05rem;
	right: 1.05rem;
	bottom: 0;
	height: 2px;
	background: var(--gold);
	transform: scaleX(0);
	transition: transform var(--zeit) var(--kurve);
}

.main-nav a:not(.btn):not(.main-nav__phone):hover { color: var(--blau-text); }
.main-nav a:not(.btn):not(.main-nav__phone):hover::after { transform: scaleX(1); }

.main-nav .current-menu-item > a:not(.btn),
.main-nav .current_page_item > a:not(.btn),
.main-nav .current-menu-ancestor > a:not(.btn),
.main-nav .current-page-ancestor > a:not(.btn) { color: var(--blau-text); }

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

/* Die Klappe: weiße Fläche mit Kontur, keine dunkle Schublade. */
.main-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 17rem;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: .4rem 0;
	background: var(--papier);
	border: 1px solid var(--linie);
	border-top: 0;
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--schatten-schwebend);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--zeit) var(--kurve), visibility var(--zeit);
	z-index: 10;
}

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

.main-nav .sub-menu a:not(.btn) {
	display: block;
	padding: .6rem 1.15rem;
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	white-space: normal;
	color: var(--text);
}

.main-nav .sub-menu a:not(.btn)::after { display: none; }
.main-nav .sub-menu a:hover { background: var(--papier-grund); color: var(--blau-text); }

/* Nummer und Anfrage stehen im Kopf; in der Zeile wären sie doppelt. */
.navbar .main-nav__actions { display: none; }

.nav-toggle {
	display: none;
	align-items: center;
	gap: .55rem;
	padding: .7rem 1rem;
	background: var(--papier);
	border: 1px solid var(--linie-stark);
	border-radius: var(--radius-klein);
	font-family: 'Mulish', sans-serif;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	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: 2px;
	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(6px) 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(-6px) rotate(-45deg); }

@media (max-width: 1180px) {

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

	/* Die Zeile fällt zusammen, die Navigation wird zur Schublade. */
	.navbar { background: none; border: 0; }
	.navbar__inner { padding: 0; min-height: 0; }
	.navbar__inner > .main-nav { margin-left: 0; }

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

	.main-nav.ist-offen { transform: translateX(0); box-shadow: var(--schatten-schwebend); }

	.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:not(.btn):not(.main-nav__phone) { padding: .9rem .25rem; font-size: .85rem; }
	.main-nav a:not(.btn):not(.main-nav__phone)::after { left: .25rem; right: auto; width: 1.5rem; }

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

	.main-nav .sub-menu li { border: 0; }
	.main-nav .sub-menu a { padding: .45rem .25rem; color: var(--text-leise); }

	.navbar .main-nav__actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: .6rem;
		margin-top: 1.5rem;
	}

	.navbar .main-nav__actions .main-nav__phone { justify-content: center; }
	.navbar .main-nav__actions .main-nav__phone span { display: inline; }
	.navbar .main-nav__actions .btn { justify-content: center; }

	body.nav-offen { overflow: hidden; }

	/* Der Schleier liegt unter dem Kopf: die Schublade steckt im Kopf, und der
	   Kopf bildet als sticky-Element einen eigenen Stapel. Läge der Schleier
	   darüber, würde er die Schublade mit abdunkeln. */
	.nav-schleier {
		position: fixed;
		inset: 0;
		z-index: 90;
		background: rgba(20, 33, 46, .45);
		opacity: 0;
		transition: opacity var(--zeit) var(--kurve);
	}

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


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

/* Heller Fuß. Eine dunkle Bahn über die ganze Breite wäre das schwerste
   Element der Seite; gewünscht sind helle, homogene Farben. Getragen wird der
   Fuß von einer Haarlinie oben und einer schmalen dunklen Schlusszeile unten —
   die gibt der Seite einen Boden, ohne sie zu beschweren. */
.site-footer {
	background: var(--papier-grund);
	color: var(--text-leise);
	border-top: 1px solid var(--linie);
	font-size: .92rem;
}

/* Das Korn gehört auf dunkle Flächen. */
.site-footer::after { display: none; }

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.35fr 1.05fr .9fr 1.1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-block: clamp(3rem, 5.5vw, 4.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 { display: block; margin-bottom: 1.25rem; }
.brand--fuss .brand__mark { height: clamp(2.1rem, 3.2vw, 2.6rem); }

.site-footer__note {
	color: var(--text-leise);
	font-size: .9rem;
	line-height: 1.6;
	max-width: 26rem;
}

/* Instagram im Fuß: der Kunde pflegt den Auftritt selbst, deshalb steht der
   Name der Seite daneben und nicht nur ein Zeichen. */
.site-footer__insta {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin-top: 1.2rem;
	padding: .5rem .95rem .5rem .75rem;
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--pill);
	font-size: .86rem;
	font-weight: 700;
}

.site-footer__insta .icon { width: 1.1rem; height: 1.1rem; color: var(--gold-tief); }
.site-footer__insta:hover { border-color: var(--blau-hell); text-decoration: none; color: var(--blau-text); }

.site-footer__title {
	margin: 0 0 1.2rem;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--text-stark);
}

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

.site-footer__hint { color: var(--text-leise); font-size: .82em; }

.site-footer__lines { margin: 0; }

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

.site-footer__lines dt {
	width: .9rem;
	color: var(--linie-stark);
	font-weight: 700;
	flex: none;
}

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

.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--blau-text); 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);
}

.site-footer__hours dt { color: var(--text-leise); }

.site-footer__hours dd {
	margin: 0;
	color: var(--text-stark);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	font-weight: 600;
}

.site-footer__emergency {
	display: block;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--text-leise);
}

.site-footer__emergency a { color: var(--blau-text); font-weight: 700; }

/* Die Schlusszeile: die einzige dunkle Fläche der Seite. */
.site-footer__bar {
	background: var(--schiefer);
	color: rgba(255, 255, 255, .62);
	font-size: .86rem;
	border-top: 0;
}

.site-footer__bar a { color: rgba(255, 255, 255, .8); }
.site-footer__bar a:hover { color: #fff; }

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

.site-footer__copy { margin: 0; }

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

.site-footer__legal li { margin: 0; }

/* Zurück nach oben */
.to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 80;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.9rem;
	height: 2.9rem;
	background: var(--papier);
	border: 1px solid var(--linie-stark);
	border-radius: 50%;
	color: var(--text-stark);
	box-shadow: var(--schatten-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(.5rem);
	transition: opacity var(--zeit) var(--kurve), transform var(--zeit) var(--kurve), visibility var(--zeit);
}

.to-top .icon { width: 1.2rem; height: 1.2rem; }
.to-top.ist-sichtbar { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--blau); color: var(--blau); }


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

/* --- Kopfbereich der Startseite -----------------------------------------
   Links die Aussage, rechts das Foto — und das Foto läuft nach rechts aus dem
   Bild heraus. Kein Schleier, keine schwebenden Kärtchen: Text und Bild teilen
   sich die Fläche, statt sich zu überlagern. Das Raster der linken Spalte
   bleibt bündig zum Zeichen im Kopf.

   Darunter die Schwerpunkte: drei Verweise in einer Zeile, durch Haarlinien
   getrennt. Farbe trägt dort nur das Zeichen — drei Farbflächen unter dem Kopf
   wären lauter als alles, was danach kommt. */
.hero {
	position: relative;
	background: var(--papier);
	color: var(--text);
	overflow: hidden;
	isolation: isolate;
}

.hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
	/* Links bündig zum Raster, rechts bis an den Rand des Fensters. Die erste
	   Zeile ist der Rückfall für Browser, die den zusammengesetzten Wert nicht
	   lesen — dann steht der Text eben mit festem Rand statt bündig. */
	padding-left: var(--luft);
	padding-left: max(var(--luft), calc((100% - var(--breite)) / 2 + var(--luft)));
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

@media (max-width: 980px) {
	.hero__inner {
		grid-template-columns: 1fr;
		gap: 2.25rem;
		padding-inline: var(--luft);
		padding-bottom: clamp(2rem, 5vw, 3rem);
	}
}

/* „justify-items: start“ lässt die Kinder in ihrer Inhaltsbreite stehen —
   damit die Schaltfläche nicht über die halbe Spalte läuft. Ohne die Deckelung
   auf 100 % würde derselbe Kniff am Telefon die Textspalte über den
   Bildschirmrand hinausschieben: „max-width: 48ch“ sind dort mehr Pixel, als
   das Gerät breit ist. */
.hero__content { display: grid; justify-items: start; gap: 1.15rem; }
.hero__content > * { max-width: 100%; }

.hero__title {
	margin: 0;
	max-width: min(18ch, 100%);
	color: var(--text-stark);
	font-size: clamp(2.1rem, 3.9vw, 3.15rem);
	font-weight: 700;
	letter-spacing: -.028em;
	line-height: 1.08;
	text-wrap: balance;
}

/* Der hervorgehobene Teil steht im Blau der Marke, im Fluss der Zeile. */
.hero__title em {
	font-style: normal;
	color: var(--blau);
}

.hero__text {
	margin: 0;
	max-width: min(48ch, 100%);
	font-size: clamp(1.05rem, 1.25vw, 1.18rem);
	line-height: 1.62;
	color: var(--text-leise);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8rem 1.6rem;
	margin-top: .5rem;
}

/* Der zweite Weg: ein Verweis mit Pfeil, keine zweite gefüllte Fläche. */
.hero__weiter {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--blau-text);
	text-decoration: none;
}

.hero__weiter span { text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; }
.hero__weiter .icon { width: 1.1em; height: 1.1em; flex: none; transition: transform var(--zeit) var(--kurve); }
.hero__weiter:hover { color: var(--blau-tief); }
.hero__weiter:hover .icon { transform: translateX(.22rem); }

@media (max-width: 460px) {
	.hero__actions { display: grid; width: 100%; justify-items: stretch; }
	.hero__actions .btn { justify-content: center; }
	.hero__weiter { justify-content: center; }
}

/* Merkmalleiste: drei Angaben, durch Haarlinien getrennt. */
.hero__fakten {
	display: grid;
	gap: 0;
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--linie);
	width: 100%;
	max-width: min(34rem, 100%);
}

.hero__fakten li {
	display: grid;
	grid-template-columns: 1.5rem 1fr;
	align-items: center;
	gap: .8rem;
	margin: 0;
	padding: .7rem 0;
	border-bottom: 1px solid var(--linie);
	font-size: .95rem;
	color: var(--text-leise);
}

.hero__fakten .icon { width: 1.5rem; height: 1.5rem; color: var(--blau); }
.hero__fakten strong { color: var(--text-stark); font-weight: 700; }

/* Das Foto. Links gerundet, rechts bündig mit dem Fensterrand. */
.hero__media {
	margin: 0;
	align-self: stretch;
	min-height: 100%;
}

.hero__media img {
	width: 100%;
	height: 100%;
	min-height: clamp(18rem, 32vw, 30rem);
	object-fit: cover;
	border-radius: var(--radius-xl) 0 0 var(--radius-xl);
	background: var(--papier-2);
}

@media (max-width: 980px) {
	.hero__media img {
		min-height: 0;
		aspect-ratio: 3 / 2;
		border-radius: var(--radius-gross);
	}
}

/* --- Schwerpunkte unter dem Kopf ---
   Drei weiche Flächen auf hellem Grund. Sie sitzen dort, wo der Blick nach der
   Überschrift hinfällt, und führen in die drei Bereiche, nach denen Praxen
   zuerst fragen. */
.hero__schwerpunkte {
	background: var(--papier-grund);
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.hero__schwerpunkte-raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(.75rem, 1.5vw, 1.15rem);
}

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

.schwerpunkt {
	display: flex;
	align-items: center;
	gap: .95rem;
	padding: 1.25rem clamp(1rem, 2vw, 1.5rem);
	background: var(--papier);
	border-radius: var(--radius-gross);
	color: inherit;
	text-decoration: none;
	transition: box-shadow .3s var(--kurve), transform .3s var(--kurve);
}

a.schwerpunkt:hover {
	color: inherit;
	box-shadow: var(--schatten-2);
	transform: translateY(-3px);
}

.schwerpunkt__zeichen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.4rem;
	height: 3.4rem;
	flex: none;
	border-radius: 50%;
	border: 0;
	background: var(--wash-blau);
	color: var(--blau);
}

.schwerpunkt__zeichen .icon { width: 2rem; height: 2rem; stroke-width: 1.85; }

.schwerpunkt--gold .schwerpunkt__zeichen { color: var(--gold-text); background: var(--wash-gold); }
.schwerpunkt--tief .schwerpunkt__zeichen { color: var(--schiefer); background: var(--papier-2); }
.schwerpunkt--sand .schwerpunkt__zeichen { color: var(--sand-text); background: var(--wash-sand); }

.schwerpunkt__text { display: grid; gap: .1rem; min-width: 0; }

.schwerpunkt__text strong {
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -.012em;
	line-height: 1.25;
	color: var(--text-stark);
}

.schwerpunkt__text > span {
	font-size: .88rem;
	line-height: 1.35;
	color: var(--text-leise);
}

/* Der Pfeil steht am rechten Rand und rückt beim Überfahren nach. */
a.schwerpunkt::after {
	content: '\2192';
	margin-left: auto;
	padding-left: .75rem;
	color: var(--text-leise);
	transition: transform var(--zeit) var(--kurve), color var(--zeit) var(--kurve);
}

a.schwerpunkt:hover::after { transform: translateX(4px); color: var(--blau); }


/* --- Kopfbereich der Unterseiten ---
   Eine hellblaue Fläche mit weichen Ecken, in der der Titel steht. Ein Foto
   kann rechts daneben liegen; es bleibt dann eine eigene runde Fläche und
   wird nicht mit Text überdeckt. */
.page-header {
	position: relative;
	background: var(--papier-grund);
	border-bottom: 1px solid var(--linie);
	overflow: hidden;
}

.page-header__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: center;
	padding-block: clamp(2rem, 3.6vw, 3rem);
}

.page-header--bild .page-header__inner {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

/* Wie im Kopf der Startseite läuft das Foto nach rechts aus dem Raster
   heraus. Damit tragen alle Seiten dieselbe Handschrift. */
@media (min-width: 861px) {
	.page-header--bild .page-header__inner {
		max-width: none;
		padding-left: var(--luft);
		padding-left: max(var(--luft), calc((100% - var(--breite)) / 2 + var(--luft)));
		padding-right: 0;
	}

	.page-header--bild .page-header__media {
		margin-right: -3.5rem;
		margin-right: calc(var(--rand) * -1);
		border-radius: var(--radius-xl) 0 0 var(--radius-xl);
	}
}

@media (max-width: 860px) {
	.page-header--bild .page-header__inner { grid-template-columns: 1fr; }
}

.page-header__media {
	position: relative;
	border-radius: var(--radius-gross);
	overflow: hidden;
}

.page-header__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center 55%;
}

.page-header__kicker {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 .95rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-family: 'Mulish', sans-serif;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--gold-text);
}

.page-header__kicker::before {
	content: '';
	width: 1.75rem;
	height: 2px;
	background: var(--gold);
	flex: none;
}

.page-header__title {
	margin: 0;
	max-width: 22ch;
	color: var(--text-stark);
	font-size: clamp(1.55rem, 2.4vw, 2rem);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.12;
}

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

/* Sprungmarken im Seitenkopf. Sie sehen aus wie eine Reihe Reiter und tragen
   den Leser zu dem Abschnitt, wegen dem er gekommen ist. */
.seiten-nav {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: 1.5rem;
}

.seiten-nav__eintrag {
	display: inline-flex;
	align-items: center;
	padding: .5rem 1rem;
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--pill);
	color: var(--text);
	font-size: .84rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--zeit) var(--kurve), color var(--zeit) var(--kurve), background var(--zeit) var(--kurve);
}

.seiten-nav__eintrag:hover {
	background: var(--wash-blau);
	border-color: var(--blau-hell);
	color: var(--blau-tief);
}

.breadcrumb {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin: 0 0 1.35rem;
	padding: 0;
	list-style: none;
	font-size: .78rem;
	color: var(--text-leise);
}

.breadcrumb li { margin: 0; display: flex; gap: .45rem; 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(--blau-tief); }

/* --- Leistungen ---------------------------------------------------------
   Weiche weiße Kacheln auf hellblauem Grund. Das Zeichen sitzt in einem runden
   Feld in der Farbe des Bereichs — Rot Wärme, Blau Wasser, Gelb Sonne — und
   färbt sich beim Überfahren voll ein. Rahmen gibt es keine mehr; getragen
   werden die Kacheln vom Schatten. */

/* Die Leistungen.
   Zwei Spalten, in jeder Zeile eine weiche weiße Fläche: Zeichen im Kreis,
   daneben Titel und ein Satz, rechts der Pfeil. Keine Konturen, keine harten
   Ecken — die Rundung kommt aus dem Zeichen des Labors, und der Schatten legt
   die Fläche nur auf das Papier, statt sie darüber schweben zu lassen. */
.services__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(.85rem, 1.6vw, 1.25rem);
}

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

.service-card {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	column-gap: 1.15rem;
	row-gap: .35rem;
	padding: 1.5rem 1.5rem 1.55rem 1.35rem;
	background: var(--papier);
	border: 0;
	border-radius: var(--radius-gross);
	box-shadow: var(--schatten-1);
	text-decoration: none;
	color: inherit;
	transition: box-shadow .3s var(--kurve), transform .3s var(--kurve);
}

.section--leise .service-card { box-shadow: none; }

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

.service-card__zeichen {
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.8rem;
	height: 3.8rem;
	flex: none;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: var(--papier-2);
	background: color-mix(in srgb, var(--karte-farbe, var(--blau)) 13%, #fff);
	color: var(--karte-farbe, var(--blau));
	transition: background var(--zeit) var(--kurve);
}

a.service-card:hover .service-card__zeichen {
	background: color-mix(in srgb, var(--karte-farbe, var(--blau)) 18%, #fff);
}

.service-card__zeichen .icon { width: 2.3rem; height: 2.3rem; stroke-width: 1.85; }

.service-card__title {
	grid-column: 2;
	position: relative;
	margin: 0;
	font-size: 1.12rem;
	letter-spacing: -.018em;
	line-height: 1.3;
}

.service-card__text {
	grid-column: 2;
	position: relative;
	margin: 0;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--text-leise);
}

/* Der Verweis ist nur noch der Pfeil am rechten Rand. Die Worte
   „Mehr erfahren“ bleiben im Quelltext stehen — Vorlesesoftware braucht sie,
   auf dem Bildschirm sagt der Pfeil dasselbe kürzer. */
.service-card__more {
	grid-column: 3;
	grid-row: 1 / span 2;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	margin: 0;
	padding: 0;
	font-size: 0;
	color: var(--linie-stark);
	transition: color var(--zeit) var(--kurve);
}

.service-card__more::after {
	content: '\2192';
	font-size: 1.1rem;
	transition: transform var(--zeit) var(--kurve);
}

a.service-card:hover .service-card__more { color: var(--karte-farbe, var(--blau)); }
a.service-card:hover .service-card__more::after { transform: translateX(4px); }

/* Das Kennzeichen „Neu“ sitzt in der oberen Ecke. In der Zeile hätte es den
   Titel nach unten geschoben und die Kacheln ungleich gemacht. */
.service-card__neu {
	position: absolute;
	top: .9rem;
	right: 1rem;
	padding: .25rem .6rem;
	background: var(--wash-gold);
	color: var(--gold-text);
	border-radius: var(--pill);
	font-family: 'Mulish', sans-serif;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

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

/* Zweispaltiger Satz: die Überschrift steht links und bleibt beim Scrollen
   stehen, der Text läuft rechts. Vorher lief eine schmale Textspalte am
   linken Rand herunter und die rechte Seitenhälfte blieb leer. */
@media (min-width: 1000px) {

	.text-block .container > .section-head + .text-block__inner,
	.text-block__satz {
		max-width: none;
	}

	.text-block--satz .container {
		display: grid;
		grid-template-columns: 5fr 7fr;
		gap: clamp(2rem, 5vw, 4.5rem);
		align-items: start;
	}

	.text-block--satz .section-head {
		position: sticky;
		top: 7rem;
		margin-bottom: 0;
	}

	.text-block--satz .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(--schiefer); 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(--sand);
	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. */
/* Mittig statt oben ausgerichtet: bei ungleich langen Spalten entsteht sonst
   unter der kürzeren ein auffälliges Loch. */
.split {
	display: grid;
	grid-template-columns: 5fr 7fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 4.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%;
	transition: transform .7s var(--kurve);
	/* 3:2 — das Format, in dem die Fotos aufbereitet sind. Ein anderer Rahmen
	   schnitte ihnen noch einmal die Seiten ab. */
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Hochformat, aber gedeckelt: ein 3:4-Bild über die halbe Spaltenbreite wurde
   fast 60 rem hoch und riss den Abschnitt auseinander. */
.split__media--hoch img { aspect-ratio: 3 / 4; max-height: 34rem; }

/* Ab Tafelbreite läuft das Foto aus dem Raster heraus bis an den Fensterrand.
   Es bekommt dadurch spürbar mehr Fläche, und die Seite hört auf, aus lauter
   gleich breiten Spalten zu bestehen. Gerundet wird nur die Seite, die im
   Bild bleibt. */
@media (min-width: 901px) {

	.split__media {
		margin-left: -3.5rem;
		margin-left: calc(var(--rand) * -1);
		border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
	}

	.split--gedreht .split__media {
		margin-left: 0;
		margin-right: -3.5rem;
		margin-right: calc(var(--rand) * -1);
		border-radius: var(--radius-xl) 0 0 var(--radius-xl);
	}

	/* Im Hochformat bleibt das Bild im Raster: randbündig wäre es riesig. */
	.split__media--hoch,
	.split--gedreht .split__media--hoch {
		margin-inline: 0;
		border-radius: var(--radius-gross);
	}
}

/* Ein Hauch Bewegung beim Überfahren — das Bild ist kein Verweis, deshalb
   bleibt es beim Andeuten. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.split:hover .split__media img { transform: scale(1.025); }
}

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

/* --- Schritte ---
   Ablaufleiste. Die Ziffern sitzen in runden Feldern und hängen an einer
   gestrichelten Linie; Kästen gibt es keine, weil die fünf Texte
   unterschiedlich lang sind und gleich hohe Kacheln zur Hälfte leer standen. */
.steps__list {
	position: relative;
	display: grid;
	gap: 1.75rem 1.5rem;
	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 {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

/* Die Linie läuft von Ziffer zu Ziffer und hört beim letzten Schritt auf. */
@media (min-width: 900px) {

	.step::after {
		content: '';
		position: absolute;
		top: 1.3rem;
		left: 3.2rem;
		right: -1.5rem;
		height: 2px;
		background-image: linear-gradient(to right, var(--linie-stark) 55%, transparent 0);
		background-size: 11px 2px;
		background-repeat: repeat-x;
	}

	.step:last-child::after { display: none; }
}

/* Weißes rundes Feld mit farbigem Ring — leicht statt schwer. */
.step__num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	margin-bottom: .7rem;
	background: var(--blau);
	border-radius: 50%;
	box-shadow: none;
	color: #fff;
	font-family: 'Mulish', sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Auf hellblauem Grund bleibt die Ziffer graphit: die Regel stammte aus der
   Fassung mit weißen Ziffernkreisen und ließ die Ziffern zuletzt leer
   erscheinen — weiße Schrift auf weißer Fläche. */

/* Am Telefon wird daraus eine senkrechte Leiste: die Ziffer sitzt links außen,
   Titel und Text rücken daneben, die gestrichelte Linie läuft dazwischen
   durch. Ohne den Einzug lief sie quer durch den Text. */
@media (max-width: 899px) {

	.steps__list { gap: 1.4rem; }

	.step { padding-left: 3.6rem; min-height: 2.6rem; }

	.step__num { position: absolute; left: 0; top: 0; margin-bottom: 0; }

	.step::after {
		content: '';
		position: absolute;
		left: 1.22rem;
		top: 3rem;
		bottom: -1.9rem;
		width: 2px;
		background-image: linear-gradient(to bottom, var(--linie-stark) 55%, transparent 0);
		background-size: 2px 11px;
		background-repeat: repeat-y;
	}

	.step:last-child::after { display: none; }
}

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

/* --- Zahlen --- */
/* Die Zahlenleiste. Keine Kästen mehr: Spalten, durch Haarlinien getrennt.
   Der Wert steht groß, die Erläuterung klein darunter — das liest sich in
   einer Zeile ab. */
.facts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0;
	border-top: 1px solid var(--linie);
}

.fact {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: 1.75rem clamp(1rem, 2vw, 1.9rem);
	background: none;
	border: 0;
	border-left: 1px solid var(--linie);
	border-bottom: 1px solid var(--linie);
	border-radius: 0;
	box-shadow: none;
}

.fact:first-child { border-left: 0; }

@media (max-width: 760px) { .fact { border-left: 0; } }

/* Das Zeichen über der Zahl — auf der dunklen Tafel im Gold des Zeichens. */
.fact__zeichen {
	display: inline-flex;
	margin-bottom: .55rem;
	color: var(--blau);
}

.fact__zeichen .icon { width: 2rem; height: 2rem; stroke-width: 1.85; }

.section--tief .fact__zeichen { color: var(--gold); }

.fact__value {
	font-family: 'Mulish', sans-serif;
	font-size: clamp(1.4rem, 1.9vw, 1.8rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--blau);
	letter-spacing: -.025em;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

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

/* Auf dunklem Grund kehren sich die Werte um. */
.section--tief .facts__grid { border-top-color: var(--linie-tinte); }
.section--tief .fact { border-color: var(--linie-tinte); background: none; }
.section--tief .fact__value { color: var(--gold); }
.section--tief .fact__label { color: rgba(255, 255, 255, .6); }

/* --- 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-gross);
	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 ---
   Zweispaltig ab 1000 px: die Überschrift steht links und bleibt stehen, die
   Fragen laufen rechts. Vorher stand eine 760 px schmale Spalte mittig und die
   Seite wirkte an dieser Stelle leer. */
.accordion-satz { display: grid; gap: 1.5rem; }

@media (min-width: 1000px) {

	.accordion-satz {
		grid-template-columns: 5fr 7fr;
		gap: clamp(2rem, 5vw, 4rem);
		align-items: start;
	}

	.accordion-satz > .section-head { position: sticky; top: 7rem; margin-bottom: 0; }
}

.accordion { display: grid; gap: .75rem; }

.accordion__item {
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	box-shadow: none;
	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(--blau-tief); }

.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: none;
}

.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;
	/* Der zweite Wert muss 1fr sein: mit einer festen Obergrenze rechnet
	   „auto-fit“ mit der Höchstbreite und stellt bei vier Personen nur drei
	   Kacheln nebeneinander — die vierte stand allein in der zweiten Reihe. */
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.15rem;
}

.person {
	display: flex;
	flex-direction: column;
	background: var(--papier);
	border: 0;
	border-radius: var(--radius-gross);
	box-shadow: none;
	overflow: hidden;
	transition: box-shadow var(--zeit) var(--kurve), transform var(--zeit) var(--kurve);
}

/* Ohne Kontur: die Kacheln stehen als weiße Flächen auf dem Hellgrau, wie die
   Leistungskacheln unter ihrem farbigen Strich. */
.person:hover { box-shadow: var(--schatten-2); transform: translateY(-2px); }

.person__photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	/* Bei nur zwei Personen wurde die Kachel sonst 54 rem hoch und das Foto
	   beherrschte die halbe Seite. */
	max-height: 24rem;
	object-fit: cover;
	object-position: center 20%;
	background: var(--papier-3);
}

.person__body { padding: 1.25rem 1.35rem 1.4rem; }

.person__role {
	margin: 0 0 .4rem;
	/* Zwei Zeilen bei der längsten Funktion — sonst rutscht ein Name in der
	   Reihe tiefer als die anderen. */
	min-height: 2.2em;
	font-size: .68rem;
	font-weight: 660;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--blau-text);
}

.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: .5rem; margin-bottom: 2.5rem; }

.partners__tab {
	padding: .65rem 1.2rem;
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--radius-klein);
	box-shadow: none;
	font-family: 'Mulish', sans-serif;
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--text);
	cursor: pointer;
	transition: color var(--zeit) var(--kurve), background var(--zeit) var(--kurve);
}

.partners__tab:hover { color: var(--blau-tief); }

.partners__tab[aria-selected='true'] { background: var(--schiefer); border-color: var(--schiefer); color: #fff; }

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

.partners__panel[hidden] { display: none; }

.partner {
	display: grid;
	place-items: center;
	padding: 1.6rem 1.25rem;
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	min-height: 6.5rem;
	transition: border-color var(--zeit) var(--kurve);
}

.partner:hover { border-color: var(--linie-stark); }

/* 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: .9rem;
	padding: 1.75rem 1.25rem;
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	box-shadow: none;
	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: auto;
	width: auto;
	max-width: 100%;
	max-height: 4rem;
	object-fit: contain;
	flex: none;
	filter: grayscale(1) brightness(.82);
	transition: filter var(--zeit) var(--kurve);
}

a.badge:hover .badge__img { filter: none; }

/* Ohne Bild trägt die Schrift das Zeichen allein: für den
   Gesellenprüfungsausschuss gibt es keine Vorlage. */
.badge:not(:has(.badge__img)) {
	align-items: flex-start;
	justify-content: center;
	text-align: left;
	padding: 1.5rem 1.5rem 1.6rem;
	gap: .5rem;
}

.badge:not(:has(.badge__img)) .badge__label {
	margin-top: 0;
	font-family: 'Mulish', sans-serif;
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.015em;
	color: var(--text-stark);
}

.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; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: .85rem; }

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

.job:hover { box-shadow: var(--schatten-2); border-color: var(--linie-stark); }

.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 ---
   Keine durchgehende dunkle Bahn mehr, sondern eine farbige Fläche mit weichen
   Ecken, die auf dem Papier liegt. Das Blau kommt aus dem Logo und ist die
   einzige große Farbfläche neben der gelben Signalfläche. */
.cta {
	position: relative;
	padding-block: 0 var(--abstand);
	padding-inline: var(--luft);
	background: var(--papier);
	color: var(--text);
}

/* Steht der Aufruf unter einer hellgrauen Bahn, bekommt er oben Luft. */
.section--leise + .cta,
.section--tief + .cta { padding-top: var(--abstand); }

.cta__inner {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2rem;
	width: 100%;
	max-width: var(--breite);
	margin-inline: auto;
	padding: clamp(2.25rem, 4.5vw, 3.75rem) clamp(1.75rem, 4vw, 3.5rem);
	background: var(--sand);
	border-radius: var(--radius-xl);
	box-shadow: none;
	color: var(--text);
	overflow: hidden;
}

/* Das Korn liegt nur auf dunklen Flächen. Auf Sand wäre es Schmutz. */
.cta__inner::after { display: none; }

/* Hier lag ein weicher Lichtschein in der Ecke. Er ließ die Bahn zweifarbig
   aussehen; gewünscht ist eine durchgehende Fläche im Blau des Logos. */

.cta__content { position: relative; max-width: 40rem; }

.cta__title {
	margin: 0 0 .7rem;
	max-width: 26ch;
	color: var(--text-stark);
	font-size: clamp(1.45rem, 2.2vw, 1.95rem);
	font-weight: 700;
	letter-spacing: -.024em;
	line-height: 1.15;
}

.cta__text { margin: 0; max-width: 52ch; color: var(--text-leise); font-size: 1.05rem; }

.cta__actions { position: relative; display: flex; flex-wrap: wrap; gap: .7rem; }

@media (max-width: 560px) {
	.cta__inner { display: grid; }
	.cta__actions { display: grid; grid-template-columns: 1fr; width: 100%; }
	.cta__actions .btn { width: 100%; }
}

/* --- Karte --- */
.map {
	display: grid;
	grid-template-columns: 5fr 7fr;
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	box-shadow: none;
	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(--blau-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);
}

/* Das Skript blendet die Schicht per hidden aus; ohne diese Zeile gewinnt
   das display: grid von oben und die Einwilligung bliebe stehen. */
.map__consent[hidden] { display: none; }

.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); }

.map__consent-fuss { margin: 1.2rem 0 0 !important; font-size: .82rem !important; }

/* Der Widerruf sitzt auf der geladenen Karte — oben rechts, weil unten links
   die Urheberangabe von OpenStreetMap steht, die nicht verdeckt werden darf. */
.map__widerruf {
	position: absolute;
	top: .75rem;
	right: .75rem;
	padding: .4rem .7rem;
	font-family: inherit;
	font-size: .78rem;
	line-height: 1.2;
	color: var(--text);
	background: var(--papier);
	border: 1px solid var(--linie-stark);
	border-radius: var(--radius-klein);
	cursor: pointer;
}

.map__widerruf:hover { background: var(--papier-2); }
.map__widerruf:focus-visible { outline: 2px solid var(--blau-flaeche); outline-offset: 2px; }

/* --- 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(--wash-blau);
	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.85rem 1.6rem;
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	box-shadow: none;
	text-decoration: none;
	color: inherit;
	transition: border-color var(--zeit) var(--kurve);
}

.link-card:hover { border-color: var(--linie-stark); }
.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); }


/* Das Zeichen in der Leistungskachel. Der Hintergrund ist die Kachelfarbe,
   auf zwölf Prozent heruntergemischt — so bleibt die Zuordnung sichtbar, ohne
   dass acht Farbflächen um Aufmerksamkeit streiten. */
.service-card__zeichen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	margin-bottom: 1.05rem;
	border-radius: var(--radius-klein);
	background: var(--papier-2);
	background: color-mix(in srgb, var(--karte-farbe) 12%, #fff);
	color: var(--karte-farbe);
}

.service-card__zeichen .icon { width: 1.4rem; height: 1.4rem; }


/* -- Leistungsliste ------------------------------------------------------ */

/* Die Liste mit Haken. Sie ist die Form, in der der bisherige Auftritt seine
   Leistungen führte, und die Form, in der Praxen sie vergleichen. */
.checkliste__raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.checkliste--drei .checkliste__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 820px) {
	.checkliste__raster,
	.checkliste--drei .checkliste__raster { grid-template-columns: 1fr; }
}

.checkliste__spalte {
	padding: clamp(1.4rem, 2.4vw, 2rem);
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--radius-gross);
}

.section--leise .checkliste__spalte { background: var(--papier); }

.checkliste__titel {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 0 0 1.1rem;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--linie);
	font-size: 1.1rem;
}

.checkliste__zeichen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	flex: none;
	border-radius: 50%;
	background: var(--wash-blau);
	color: var(--blau);
}

.checkliste__zeichen .icon { width: 1.8rem; height: 1.8rem; stroke-width: 1.8; }

.checkliste__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .55rem;
}

.checkliste__liste li {
	display: grid;
	grid-template-columns: 1.15rem 1fr;
	align-items: start;
	gap: .65rem;
	margin: 0;
	font-size: .98rem;
	line-height: 1.5;
}

.checkliste__liste .icon {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: .18rem;
	color: var(--gold);
	stroke-width: 2.2;
}

.checkliste__notiz {
	margin: 1.6rem 0 0;
	font-size: .92rem;
	color: var(--text-leise);
}


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

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

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

/* Beschriftungen in normaler Schreibweise: versal und gesperrt brauchte in
   einem Formular mit fünfzehn Feldern spürbar mehr Höhe und las sich lauter,
   als es der Sache angemessen ist. */
/* `.feld > p > label` steht hier mit drin, weil Contact Form 7 seine Vorlage
   durch wpautop schickt und dabei um jedes Feld einen Absatz legt. Ohne diesen
   Zusatz griff die Regel nur im eigenen Formular: mit Plugin standen die
   Beschriftungen in voller Fließtextgröße, und das Formular sah dadurch
   doppelt so schwer aus, wie es ist. */
.feld > label,
.feld > p > label,
.feld__label {
	font-size: .82rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text);
}

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

.feld input[type='text'],
.feld input[type='email'],
.feld input[type='tel'],
.feld input[type='number'],
.feld select,
.feld textarea {
	width: 100%;
	padding: .75rem .9rem;
	font-family: inherit;
	font-size: .95rem;
	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: 5rem; resize: vertical; }

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
	outline: none;
	background: var(--papier);
	border-color: var(--blau-flaeche);
	box-shadow: 0 0 0 3px rgba(0, 121, 176, .16);
}

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

.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: .5rem .9rem;
	background: var(--papier);
	border: 1px solid var(--linie-stark);
	border-radius: var(--pill);
	font-size: .86rem;
	cursor: pointer;
	transition: all var(--zeit) var(--kurve);
}

.wahl input:checked + span {
	background: var(--wash-blau);
	border-color: var(--blau-flaeche);
	color: var(--blau-tief);
	font-weight: 600;
}

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

.feld .zustimmung,
.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;
	font-size: .85rem;
}

.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: 1rem 1.25rem;
	border-radius: var(--radius);
	font-size: .93rem;
	display: none;
}

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

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

.form-karte h3 { margin-bottom: .5rem; }
.form-karte > p { margin-bottom: 1.5rem; font-size: .93rem; color: var(--text-leise); }

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

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

/* Freiwillige Angaben. Firma, Straße und Gebäude standen bisher mitten im
   Formular und ließen es doppelt so lang aussehen, wie es zum Absenden sein
   muss. Wer sie ausfüllen will, klappt sie auf. */
.form-extra {
	grid-column: 1 / -1;
	margin-top: .3rem;
	padding-top: 1rem;
	border-top: 1px solid var(--linie);
}

.form-extra > summary {
	font-size: .9rem;
	color: var(--blau-text);
	cursor: pointer;
	list-style: none;
}

.form-extra > summary::-webkit-details-marker { display: none; }
.form-extra > summary:hover { text-decoration: underline; }
.form-extra > summary:focus-visible { outline: 2px solid var(--blau-flaeche); outline-offset: 3px; }
.form-extra[open] > summary { margin-bottom: .9rem; }

/* Die rechte Spalte. Hier stand bis zuletzt ein zweites vollständiges
   Formular; wer die Seite aufrief, musste sich erst zwischen zwei Fragebögen
   entscheiden. Jetzt stehen dort die Wege, die keinen brauchen. */
.kontakt-spalte { display: grid; gap: 1rem; align-content: start; }

.kontakt-karte {
	padding: clamp(1.5rem, 2.4vw, 2rem);
	background: var(--papier);
	border: 0;
	border-radius: var(--radius-gross);
	box-shadow: var(--schatten-1);
}

.kontakt-karte h3 { margin: 0 0 .9rem; font-size: 1.05rem; }

.kontakt-tel {
	display: inline-block;
	font-family: 'Mulish', sans-serif;
	font-size: clamp(1.25rem, 2vw, 1.45rem);
	font-weight: 640;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--blau-text);
	text-decoration: none;
}

.kontakt-tel:hover { text-decoration: underline; }

.kontakt-zeile { margin: .45rem 0 0; font-size: .95rem; }
.kontakt-zeile a { color: var(--text); }

.kontakt-zeiten {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .3rem 1rem;
	margin: 1.1rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--linie);
	font-size: .9rem;
}

.kontakt-zeiten dt { color: var(--text-leise); }
.kontakt-zeiten dd { margin: 0; color: var(--text); }

.kontakt-zeile--leise {
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--linie);
	font-size: .9rem;
	line-height: 1.55;
	color: var(--text-leise);
}

/* Die Rückrufbitte ist der zweite Weg, nicht der gleichwertige — deshalb
   zugeklappt und vier Felder statt sieben. */
.rueckruf {
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
}

.rueckruf > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem clamp(1.4rem, 2.2vw, 1.9rem);
	font-size: .98rem;
	font-weight: 620;
	color: var(--blau-text);
	cursor: pointer;
	list-style: none;
}

.rueckruf > summary::-webkit-details-marker { display: none; }
.rueckruf > summary:hover { background: var(--papier-grund); }
.rueckruf > summary:focus-visible { outline: 2px solid var(--blau-flaeche); outline-offset: -2px; }

.rueckruf > summary::after {
	content: '';
	flex: none;
	width: .55rem;
	height: .55rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--zeit) var(--kurve);
}

.rueckruf[open] > summary::after { transform: translateY(2px) rotate(-135deg); }

.rueckruf__inhalt { padding: 0 clamp(1.4rem, 2.2vw, 1.9rem) clamp(1.4rem, 2.2vw, 1.9rem); }

.rueckruf__inhalt > p:first-child {
	margin: 0 0 1.1rem;
	font-size: .9rem;
	color: var(--text-leise);
}

/* In der schmalen Spalte stehen die Felder besser untereinander. */
.rueckruf__inhalt .form-grid { grid-template-columns: 1fr; }

@media (min-width: 941px) {
	.rueckruf__inhalt .form-grid { grid-template-columns: repeat(2, 1fr); }
}

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


/* --- Contact Form 7 ---
   Das Plugin bringt eigene Klassen mit. Sie werden hier auf die Gestaltung
   des Themes gezogen, damit die Formulare aussehen wie vorher: dieselben
   Felder, dieselbe Schaltfläche, nur ein anderer Unterbau. */

.wpcf7 form .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 1rem 1.25rem;
	border: 0;
	border-left: 3px solid var(--blau);
	background: var(--wash-blau);
	font-size: .93rem;
	color: var(--text-stark);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-left-color: var(--gold);
	background: var(--wash-gold);
	color: var(--gold-text);
}

/* Die Meldung unter einem Feld ist eine Fehlermeldung, kein Fließtext. */
.wpcf7-not-valid-tip {
	margin-top: .3rem;
	font-size: .82rem;
	color: var(--gold-text);
}

.wpcf7 .feld input.wpcf7-not-valid,
.wpcf7 .feld select.wpcf7-not-valid,
.wpcf7 .feld textarea.wpcf7-not-valid { border-color: var(--gold); }

/* Der Umbruch, den das Plugin um jedes Feld legt, darf die Breite nicht
   verlieren — sonst stehen die Eingaben halb so breit im Raster. Und er muss
   das Raster von `.feld` übernehmen, sonst kleben Beschriftung und Eingabe
   aneinander. */
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 .feld > p { display: grid; gap: .3rem; margin: 0; }

/* Auswahl der Leistungen: die Liste des Plugins auf unsere Kapseln ziehen. */
.wpcf7 .wahl-gruppe .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: .5rem; }
.wpcf7 .wahl-gruppe .wpcf7-list-item { margin: 0; }

.wpcf7 .wahl-gruppe .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .9rem;
	background: var(--papier);
	border: 1px solid var(--linie-stark);
	font-size: .86rem;
	cursor: pointer;
}

.wpcf7 .wahl-gruppe input[type='checkbox'] { accent-color: var(--blau-flaeche); }

/* Zustimmung: die Kästchen des Plugins sitzen in einem eigenen Umbruch. */
.wpcf7 .zustimmung .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.wpcf7 .zustimmung .wpcf7-list-item label { display: flex; align-items: flex-start; gap: .7rem; }

.wpcf7-spinner { margin: 0 0 0 .75rem; }

/* Das Plugin setzt bei Erfolg den Hinweis unter das Formular; der Platzhalter
   des eigenen Formulars bleibt dann leer und würde nur Luft erzeugen. */
.wpcf7 .form-status { display: none; }


/* Instagram in der Kontaktkarte. */
.kontakt-insta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.2rem;
	padding: .5rem .9rem .5rem .7rem;
	border: 1px solid var(--linie);
	border-radius: var(--pill);
	font-size: .88rem;
	font-weight: 620;
	text-decoration: none;
	color: var(--blau-text);
}

.kontakt-insta .icon { width: 1.1rem; height: 1.1rem; }
.kontakt-insta:hover { background: var(--wash-blau); border-color: var(--blau-hell); }

/* Ohne Kontaktspalte steht das Formular allein und bleibt lesbar schmal. */
.kontakt-raster--nur-formular { grid-template-columns: minmax(0, 46rem); }

/* Hinweis statt Formular — etwa, solange Contact Form 7 fehlt. */
.form-hinweis {
	padding: 1rem 1.2rem;
	background: var(--wash-blau);
	border-left: 3px solid var(--blau);
	border-radius: var(--radius-klein);
	font-size: .95rem;
}

/* Erläuterung unter einem Feld — etwa die Grenze der Dateigröße. */
.feld__hinweis {
	display: block;
	margin-top: .4rem;
	font-size: .82rem;
	color: var(--text-leise);
}


/* --- Cookie-Hinweis ------------------------------------------------------
   Der Balken kommt vom Plugin „Cookie Notice“; Farben und Text stehen in
   inc/provision.php. Hier wird nur die Schrift angeglichen und die Zeile so
   gesetzt, dass sie zum übrigen Auftritt passt. Die Ausrufezeichen sind nötig:
   das Plugin schreibt seine Werte in das style-Attribut. */
#cookie-notice {
	font-family: 'Mulish', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

#cookie-notice .cookie-notice-container {
	max-width: var(--breite);
	margin-inline: auto;
	padding: 1rem var(--luft);
	font-size: .88rem;
	line-height: 1.55;
}

#cookie-notice .cn-text-container { margin-right: 1rem; }

#cookie-notice a { color: #fff; text-decoration: underline; text-underline-offset: .2em; }

#cookie-notice .cn-button {
	border-radius: var(--radius-klein);
	padding: .6rem 1.25rem;
	font-family: 'Mulish', sans-serif !important;
	font-size: .85rem;
	font-weight: 700;
	color: var(--tinte) !important;
}

@media (max-width: 700px) {
	#cookie-notice .cookie-notice-container { padding-block: .85rem; }
	#cookie-notice .cn-text-container { display: block; margin: 0 0 .6rem; }
}


/* == 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; }
}