/*
Theme Name:  Wattenberg (Child von Twenty Twenty-Five)
Theme URI:   https://wattenberg.com
Description: Child-Theme für den Relaunch von wattenberg.com. Enthält das
             Designsystem (Farben, Typografie, Abstände) in theme.json sowie
             wiederverwendbare Muster für Trenner, Buttons, CTA und Hinweise.
             Gestaltung überwiegend Off-White/Blauschwarz mit Gold als dezenter
             dritter Markenfarbe. Schriften selbst gehostet.
Author:      Oliver Wattenberg
Template:    twentytwentyfive
Version:     0.2.2
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wattenberg
*/

/* ==========================================================================
   Dieses Stylesheet enthält NUR, was sich nicht in theme.json abbilden lässt.
   Farben, Schriften, Größen und Abstände stehen ausschließlich in theme.json.
   Wer hier etwas ändert, das dort hingehört, bricht das Designsystem.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Trenner-Motiv
   Zwei Varianten, wie im Designsystem festgelegt:
   .wb-teiler--abschnitt  eine Raute   → unter jeder H2
   .wb-teiler--seite      drei Rauten  → unter der H1 einer Seite
   Gezeichnet als Inline-SVG in den Mustern; hier nur Größe und Ausrichtung.
   -------------------------------------------------------------------------- */

.wb-teiler {
	display: block;
	margin-block: var(--wp--preset--spacing--30);
	line-height: 0;
}

.wb-teiler svg {
	display: block;
	width: 100%;
	max-width: 300px;
	height: auto;
	color: var(--wp--preset--color--accent-light);
}

.wb-teiler--seite svg {
	max-width: 340px;
}

.wb-teiler.has-text-align-center svg,
.wb-teiler--zentriert svg {
	margin-inline: auto;
}


/* --------------------------------------------------------------------------
   2. Fokus-Sichtbarkeit
   Pflicht für Barrierefreiheit und in theme.json nicht vollständig abbildbar.
   -------------------------------------------------------------------------- */

:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-strong);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Kein Fokusring bei reiner Maus-Interaktion, aber immer bei Tastatur. */
:where(a, button, summary):focus:not(:focus-visible) {
	outline: none;
}


/* --------------------------------------------------------------------------
   2b. Hero mit fließendem Bildübergang
   Auf Wunsch: Das Foto nimmt die rechte Seite dominant ein und läuft an seiner
   linken Kante weich in die Grundfläche aus. Umgesetzt mit mask-image, damit
   der Übergang unabhängig von der Hintergrundfarbe funktioniert und kein
   Verlauf über das Bild gelegt werden muss.
   -------------------------------------------------------------------------- */

/* WICHTIG — kein vw und keine negativen Margins.
   Frühere Fassung nutzte `margin-right: calc(50% - 50vw)`, um aus der
   Inhaltsbreite herauszubrechen. Das erzeugt auf dem Desktop einen
   horizontalen Überlauf: `vw` zählt die Breite der vertikalen Scrollbar mit,
   `%` nicht — das Bild ragte um die halbe Scrollbar-Breite hinaus.
   Jetzt ist der Rahmen vollbreit und sein linkes Padding richtet den Text an
   der Inhaltsspalte aus. Auf einem vollbreiten Block schließt 100% die
   Scrollbar aus, ein Überlauf ist damit ausgeschlossen. */

.wb-hero-abschnitt {
	/* Dezente Linksverschiebung auf dem Desktop. Verschiebt Text- UND
	   Bildspalte gemeinsam, weil beide im selben Raster liegen. Rechts bleibt
	   0, damit das Bild bis an den Fensterrand läuft. Die Untergrenze ist der
	   normale Seitenrand — dadurch kann kein Überlauf entstehen. */
	--wb--hero-links: 30px;

	width: 100%;
	max-width: 100%;
	padding-left: max(
		var(--wp--preset--spacing--30),
		calc(
			(100% - var(--wp--style--global--wide-size, 1200px)) / 2
			- var(--wb--hero-links)
		)
	);
	padding-right: 0;
}

.wb-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-height: min(82svh, 760px);
	width: 100%;
	max-width: 100%;
}

.wb-hero__text {
	position: relative;
	z-index: 1;
	min-width: 0;
	max-width: 100%;
	padding-block: var(--wp--preset--spacing--40);
}

.wb-hero__text > * {
	max-width: 100%;
}

.wb-hero__bild {
	position: relative;
	align-self: stretch;
	min-width: 0;
	min-height: min(60svh, 620px);
}

.wb-hero__bild img,
.wb-hero__bild .wp-block-image,
.wb-hero__bild figure {
	margin: 0;
	height: 100%;
}

.wb-hero__bild img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: 60% center;
	border-radius: 0;

	/* Weicher Auslauf nach links und ganz leicht nach unten. */
	-webkit-mask-image:
		linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 12%, #000 34%),
		linear-gradient(to bottom, #000 82%, transparent 100%);
	mask-image:
		linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 12%, #000 34%),
		linear-gradient(to bottom, #000 82%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* Mobil: einspaltig, Bild unter dem Text, Auslauf oben statt links.
   Beidseitiger Innenabstand von 22 px, wie für die mobile Fassung festgelegt. */
@media (max-width: 781px) {
	.wb-hero-abschnitt {
		padding-left: 22px;
		padding-right: 22px;
	}
	.wb-hero {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		gap: var(--wp--preset--spacing--30);
	}
	.wb-hero__text {
		padding-block: 0;
	}
	.wb-hero__bild {
		min-height: 0;
	}
	.wb-hero__bild img {
		aspect-ratio: 4 / 3;
		height: auto;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%);
		mask-image: linear-gradient(to bottom, transparent 0%, #000 18%);
	}
	.wp-block-button__link,
	.wp-element-button {
		width: 100%;
		max-width: 100%;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   2d. Schutz gegen horizontalen Überlauf
   Behebt Ursachen, nicht Symptome — deshalb kein pauschales overflow-x:hidden.
   -------------------------------------------------------------------------- */

img, svg, video, iframe {
	max-width: 100%;
}

p, summary, a {
	overflow-wrap: break-word;
}

/* Überschriften brechen nicht innerhalb eines Wortes. Ohne diese Regel
   schiebt `break-word` bei einem knapp zu breiten Wort einen einzelnen
   Buchstaben in die nächste Zeile — aufgefallen an „Datenschutzerklärung".
   Mit EB Garamond passt die längste Überschrift in die Inhaltsbreite:
   gemessen 9,09 em, also 545 px bei 60 px Schriftgrad gegenüber 664 px
   verfügbarer Breite. */
h1, h2, h3 {
	overflow-wrap: normal;
}

/* `1fr` entspricht `minmax(auto, 1fr)` und kann durch langen Inhalt breiter
   werden als die Spalte. Flex-Spalten brauchen dafür min-width: 0. */
.wp-block-columns > .wp-block-column {
	min-width: 0;
}


/* --------------------------------------------------------------------------
   2e. Über mich — Abweichungen zum Startseiten-Hero
   Nur zwei Kleinigkeiten: Der Bildausschnitt sitzt mittiger, weil das Motiv
   quadratisch ist, und die Nachweise sind bewusst zurückhaltend.
   -------------------------------------------------------------------------- */

.wb-um-hero .wb-hero__bild img {
	object-position: 52% center;
}

@media (max-width: 781px) {
	.wb-um-hero .wb-hero__bild img {
		aspect-ratio: 1 / 1;
	}
}

/* Die Nachweise stehen direkt sichtbar auf der Seite, nicht mehr hinter
   einem Aufklapper. Deshalb dürfen sie die volle Spaltenbreite nutzen; die
   Graustufen halten sie trotzdem zurückhaltend. */
.wb-um-nachweise img {
	max-width: 100%;
	filter: grayscale(1);
	opacity: 0.9;
}

.wb-um-nachweise figcaption {
	margin-top: 0.6em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-soft);
}


/* --------------------------------------------------------------------------
   2f. Erfahrungen — Briefgalerie und Bewertungen
   Nur Layout. Farben, Schriften und Abstände kommen aus theme.json.
   -------------------------------------------------------------------------- */

.wb-briefe {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	align-items: start;
}

@media (min-width: 900px)  { .wb-briefe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .wb-briefe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.wb-brief { min-width: 0; }

.wb-brief__blaetter { display: grid; gap: var(--wp--preset--spacing--20); }
.wb-brief--mehrseitig .wb-brief__blaetter { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.wb-brief__blaetter figure { margin: 0; }

.wb-brief__blaetter img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-top: 1px solid var(--wp--preset--color--accent-light);
	padding-top: var(--wp--preset--spacing--20);
}

.wb-brief__blaetter + * { margin-top: var(--wp--preset--spacing--20); }

.wb-brief__text { border: 0; padding: 0; }
.wb-brief__text summary {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--accent-strong);
	min-height: 0;
}
.wb-brief__text > :not(summary) {
	padding-left: var(--wp--preset--spacing--20);
	border-left: 1px solid var(--wp--preset--color--accent-light);
	max-width: 60ch;
}

.wb-bewertungen {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
}
@media (min-width: 900px) { .wb-bewertungen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.wb-bewertung {
	min-width: 0;
	border-top: 1px solid var(--wp--preset--color--accent-light);
	padding-top: var(--wp--preset--spacing--30);
}
.wb-bewertung p { max-width: 52ch; }

.wb-sterne { display: inline-flex; gap: 3px; margin-bottom: var(--wp--preset--spacing--20); }
.wb-sterne svg {
	width: 16px;
	height: 16px;
	fill: var(--wp--preset--color--accent);
	display: block;
}

.wb-einordnung { max-width: 70ch; }


/* --------------------------------------------------------------------------
   2g. Kontaktformular
   Nur Layout und Zustände. Farben, Schriften und Abstände aus theme.json.
   Der Honeypot ist für Menschen unsichtbar, aber nicht display:none — sonst
   ignorieren manche Bots ihn.
   -------------------------------------------------------------------------- */

.wb-form {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	max-width: 34rem;
}

.wb-form label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	margin-bottom: 0.4em;
}

.wb-form__opt { color: var(--wp--preset--color--contrast-soft); }

.wb-form input,
.wb-form textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--accent-light);
	border-radius: 2px;
	padding: 0.7em 0.8em;
	min-height: 48px;
}

.wb-form textarea {
	min-height: 9em;
	resize: vertical;
	line-height: 1.6;
}

.wb-form input:focus-visible,
.wb-form textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-strong);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--accent-strong);
}

.wb-form__hilfe {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-soft);
	margin: 0.4em 0 0;
}

.wb-honig {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 479px) {
	.wb-form { max-width: 100%; }
	.wb-form button { width: 100%; }
}


/* --------------------------------------------------------------------------
   2c. Kopfzeile: das freigestellte Logo
   Die Höhe steuert die Größe, die Breite folgt automatisch — dadurch kann das
   Seitenverhältnis nie verzerren. Unter 480 px zeigt das Muster über <picture>
   nur das runde Symbol; dann greift die quadratische Regel weiter unten.
   Quelldateien: assets/logo/, freigestellt aus dem Original in /Logo.
   -------------------------------------------------------------------------- */

.wb-marke {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 0;
	flex: none;
}

.wb-marke picture,
.wb-marke img {
	display: block;
}

.wb-marke img {
	/* Höhe führt, Breite folgt: kein Verzerren, kein Beschnitt. */
	height: clamp(38px, 3.6vw, 54px);
	width: auto;
	max-width: 100%;
	/* Sicherheitsnetz: Sollte max-width je greifen, wird das Bild im Kasten
	   eingepasst statt gestaucht — eiförmige Symbole sind damit unmöglich. */
	object-fit: contain;
	border-radius: 0;
	box-shadow: none;
}

/* Symbolfassung ist quadratisch — etwas kleiner, damit sie optisch gleich
   schwer wirkt wie das breite Gesamtlogo. */
@media (max-width: 479px) {
	.wb-marke img {
		height: 42px;
		width: 42px;
	}
}

/* Der Kopfzeile Luft geben und der Navigation den Vorrang beim Umbruch. */
.wb-marke { margin-right: var(--wp--preset--spacing--20); }

/* Symbolfassung nur in der Kopfzeile erzwingen, nicht in der Fußzeile. */
@media (max-width: 479px) {
	.wb-kopf .wb-marke img { height: 42px; width: 42px; }
}

/* --- Fußzeile ---
   Hier war die Verzerrung: feste Höhe zusammen mit max-width:100% in einer
   schmalen Spalte staucht die Breite, während die Höhe bleibt — das runde
   Symbol wird dadurch eiförmig. Deshalb hier ausschließlich die Höhe setzen,
   Breite auf auto und keine Breitenbegrenzung. Die Markenspalte bekommt
   zusätzlich etwas mehr Raum, damit das Logo auch bei 900 px Fensterbreite
   vollständig hineinpasst (233 px Spalte für 223 px Logo). */
.wb-fuss .wb-marke {
	margin-right: 0;
}

.wb-fuss .wb-marke img {
	height: 44px;
	width: auto;
	max-width: none;
}

/* Die Breite der Markenspalte steht im Markup der Fußzeile (30 %).
   `.wp-block-columns` ist in WordPress Flexbox, nicht Grid — eine Regel mit
   grid-template-columns hätte hier keine Wirkung. */


/* --------------------------------------------------------------------------
   3. Kopfzeile: Telefon-Symbol nur auf kleinen Bildschirmen
   Entschieden: kein Sticky-CTA, stattdessen mobil ein tel:-Link im Header.
   -------------------------------------------------------------------------- */

.wb-tel {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: var(--wp--preset--color--accent-strong);
	text-decoration: none;
}

.wb-tel svg {
	width: 22px;
	height: 22px;
}

@media (max-width: 781px) {
	.wb-tel { display: inline-flex; }
}


/* --------------------------------------------------------------------------
   4. Hilfsklassen
   -------------------------------------------------------------------------- */

.wb-nur-mobil    { display: none; }
.wb-nur-desktop  { display: revert; }

@media (max-width: 781px) {
	.wb-nur-mobil   { display: revert; }
	.wb-nur-desktop { display: none; }
}

/* Zeilenlänge im Lauftext begrenzen (max. ca. 70 Zeichen). */
.wb-lesebreite { max-width: 64ch; }

/* Feine goldene Trennlinie zwischen Karten, statt Rahmen und Schatten. */
.wb-linie-oben {
	border-top: 1px solid var(--wp--preset--color--accent-light);
	padding-top: var(--wp--preset--spacing--30);
}


/* --------------------------------------------------------------------------
   5. Bilder: harte Kanten, keine Schatten
   Designregel — bewusst als Absicherung, falls im Editor etwas gesetzt wird.
   -------------------------------------------------------------------------- */

.wp-block-image img,
.wp-block-post-featured-image img {
	border-radius: 0;
	box-shadow: none;
}

/* Seitenverhältnis der beiden Porträts sichern.

   Ursache der Verzerrung: Die Bilder der Startseite liegen in
   wp:html-Blöcken, weil <picture> in einem core/image-Block ungültige
   Blockauszeichnung wäre. Damit enthält die Seite keinen core/image-Block —
   und WordPress lädt dessen Stilvorlage nur, wenn der Block vorkommt. Die
   Regel `.wp-block-image img { height: auto }` fehlt deshalb, die Attribute
   width und height wirken als Präsentationshinweis weiter, die Spalte
   begrenzt die Breite, die Höhe bleibt beim Pixelwert stehen. Am 31.08.2026
   auf der Staging-Seite bei beiden Porträts sichtbar.

   BEWUSST NICHT als allgemeine Regel für `.wp-block-image img`: Diese hätte
   dieselbe Spezifität wie `.wb-hero__bild img` (je eine Klasse, ein
   Element), stünde in der Datei aber weiter unten — und hätte dem Hero sein
   `height: 100%` und damit den formatfüllenden Beschnitt genommen. Deshalb
   ausschließlich über die eigene Klasse.

   `height: auto` ist die richtige Wahl, weil den Spalten keine Höhe
   vorgegeben ist — das Bild behält sein Quadrat. `object-fit` und
   `object-position` greifen erst dort, wo die Höhe tatsächlich begrenzt
   wird: im FAQ unter 900 px (Abschnitt 7d). Dann wird beschnitten statt
   gestaucht, und der Ausschnitt bleibt auf dem Gesicht. */
.wb-portrait {
	margin: 0;
}

.wb-portrait picture {
	display: block;
}

.wb-portrait img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: cover;
	object-position: center 25%;
}


/* --------------------------------------------------------------------------
   6. FAQ-Akkordeon (core/details)
   -------------------------------------------------------------------------- */

.wp-block-details {
	border-top: 1px solid var(--wp--preset--color--accent-light);
	padding-block: var(--wp--preset--spacing--30);
}

.wp-block-details summary {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	min-height: 48px;
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.wp-block-details summary::marker,
.wp-block-details summary::-webkit-details-marker {
	color: var(--wp--preset--color--accent);
}

.wp-block-details > :not(summary) {
	margin-top: var(--wp--preset--spacing--20);
	max-width: 64ch;
}


/* --------------------------------------------------------------------------
   7. FAQ-Teaser-Liste (nur Startseite)
   Auf der Startseite stehen die Fragen ohne Antworten und führen zur
   FAQ-Seite. Das vollständige Akkordeon gibt es nur dort.
   -------------------------------------------------------------------------- */

.wb-faq-liste p {
	margin: 0;
}

.wb-faq-liste a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	min-height: 48px;
	padding-block: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--accent-light);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wb-faq-liste p:first-child a {
	border-top: 1px solid var(--wp--preset--color--accent-light);
}

.wb-faq-liste a::after {
	content: "→";
	flex: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 400;
	color: var(--wp--preset--color--accent);
}

.wb-faq-liste a:hover,
.wb-faq-liste a:focus-visible {
	color: var(--wp--preset--color--accent-hover);
	text-decoration: underline;
}

.wb-faq-liste a:hover::after {
	color: var(--wp--preset--color--accent-hover);
}


/* --------------------------------------------------------------------------
   7b. FAQ-Seite: Akkordeon und Übersicht

   Bewusst sparsam. Das Akkordeon ist der WordPress-Block „Details" und
   behält sein natürliches Erscheinungsbild; ergänzt wird nur, was für die
   Sprungziele nötig ist.
   -------------------------------------------------------------------------- */

/* Ohne diesen Abstand verschwindet die angesprungene Frage hinter der
   Kopfzeile, sobald sie fixiert dargestellt wird. */
.wb-faq-eintrag {
	scroll-margin-top: 96px;
}

/* Das FAQ stapelt bereits ab 900 px, nicht erst ab den 781 px, die
   WordPress für Spaltenblöcke vorsieht. Im Band dazwischen war die
   Fragenspalte nur rund 330 px breit — zu schmal für die Fragezeilen.

   `.wp-block-columns` ist Flexbox. Gestapelt wird daher wie im Kern über
   flex-wrap und flex-basis, nicht über grid-template-columns. Die eigene
   Klasse begrenzt die Regel auf das FAQ; alle anderen Spaltenblöcke der
   Website behalten ihr Verhalten. */
@media (max-width: 900px) {
	.wb-faq-zwei {
		flex-wrap: wrap;
	}

	.wb-faq-zwei > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* Das Porträt soll auf schmalen Bildschirmen nicht die halbe
	   Bildschirmhöhe einnehmen, bevor die erste Frage sichtbar wird. */
	.wb-faq-zwei > .wp-block-column:first-child img {
		max-height: 46vh;
		width: 100%;
		object-fit: cover;
		object-position: center 30%;
	}
}

.wb-faq-uebersicht li {
	margin-bottom: 0.4em;
}


/* --------------------------------------------------------------------------
   7c. Aktiver Menuepunkt

   WordPress setzt auf dem Link der aktuellen Seite `aria-current="page"` und
   die Klasse `current-menu-item`. Beides wird hier nur mit einer feinen
   goldenen Linie unterlegt - keine Fettung, keine Farbaenderung.
   -------------------------------------------------------------------------- */

.wp-block-navigation a[aria-current="page"],
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current_page_item > a {
	border-bottom: 1px solid var(--wp--preset--color--accent);
	padding-bottom: 2px;
}


/* --------------------------------------------------------------------------
   8. Hinweis-Kasten
   Ruhig gesetzt, kein Warnkasten.
   -------------------------------------------------------------------------- */

.wb-hinweis {
	border-left: 2px solid var(--wp--preset--color--accent);
}


/* --------------------------------------------------------------------------
   9. Bewegungsreduzierung respektieren
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* --------------------------------------------------------------------------
   10. Mobiler Feinschliff (nur bis 479 px)

   Greift ausschliesslich ueber die Abstands-Token, damit ein einziger Ort
   alle Sektionsabstaende steuert: Sektionspolster, Hero, Rasterabstaende,
   der Abstand zwischen Portrait und Text sowie die Fusszeile beziehen sich
   alle auf spacing-40 und spacing-50.

   Desktop bleibt unberuehrt: spacing-50 haelt bis 800 px Fensterbreite
   ohnehin seinen Mindestwert von 4rem, die Query endet aber schon bei
   479 px.
   -------------------------------------------------------------------------- */

@media (max-width: 479px) {
	:root {
		--wp--preset--spacing--50: 2.25rem;   /* statt 4rem — 64 px auf 36 px */
		--wp--preset--spacing--40: 1.5rem;    /* statt 2rem — 32 px auf 24 px */
	}

	/* Sprungziele nicht unter der fixierten Kopfzeile verstecken. */
	section[id], details[id], h2[id], h3[id] {
		scroll-margin-top: 5.5rem;
	}
}

/* --------------------------------------------------------------------------
   11. Kopfzeile bleibt beim Scrollen sichtbar

   Die Vorschau hat das seit Beginn: `.kopf { position: sticky; top: 0 }`.
   Im Theme fehlte es. Die Werte hier sind daher übernommen, nicht neu
   gewählt — Grundfläche als Hintergrund, dekorative Goldhaarlinie, z-index 10.

   WARUM NICHT `.wb-kopf`:
   Die Vorlagen binden den Kopf mit `tagName: header` ein, und die Gruppe in
   parts/header.html ist ebenfalls ein `header`. Ausgeliefert wird deshalb

       <div class="wp-site-blocks">
         <header class="wp-block-template-part">        ← hier muss sticky hin
           <header class="wp-block-group alignfull wb-kopf">

   `sticky` auf `.wb-kopf` wäre wirkungslos, weil ihr umgebender Block der
   äußere `header` ist und genau so hoch wie sie selbst. Nur der äußere
   Wrapper liegt direkt in `.wp-site-blocks` und hat Laufweg.

   Ein pauschales `overflow-x: hidden` gibt es im Theme bewusst nicht
   (Abschnitt 2d) — es würde `sticky` aushebeln. Das mobile Overlay-Menü der
   Navigation arbeitet mit z-index 100000 und liegt damit weiter darüber.

   Der Hintergrund ist die Grundfläche, also dieselbe Farbe, die ohnehin
   hinter dem Kopf liegt. Er ist nötig, damit Inhalt beim Scrollen nicht
   durchscheint.
   -------------------------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 10;
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--accent-light);
}

/* Angemeldete Ansicht: Die Adminleiste steht auf dem Desktop fest oben und
   würde die Kopfzeile überdecken. Unter 600 px scrollt sie mit und braucht
   keinen Versatz. Betrifft ausschließlich eingeloggte Redaktion. */
.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

/* Sprungziele: Ohne Versatz landet ein Anker hinter der Kopfzeile. Die Höhe
   ergibt sich aus deren Polsterung — spacing-30 oben und unten — plus der
   Logohöhe clamp(38px, 3.6vw, 54px), zusammen etwa 80 bis 112 px.

   Diese Regel steht bewusst am Dateiende und ersetzt damit die beiden
   früheren Festwerte: 96 px für `.wb-faq-eintrag` (Abschnitt 7b) und
   5,5rem unter 479 px (Abschnitt 10). Ein Ort, ein Wert. */
:root {
	--wb--kopf-hoehe: clamp(80px, 7vw, 112px);
}

section[id],
details[id],
h2[id],
h3[id],
.wb-faq-eintrag {
	scroll-margin-top: calc(var(--wb--kopf-hoehe) + var(--wp--preset--spacing--20));
}