/*
Theme Name: Sale e Pepe
Description: Minimalistisches Block Theme für das italienische Restaurant Sale e Pepe. Ohne Build-Schritt, ohne Framework, ohne zusätzliche Plugins.
Author: Sale e Pepe
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sale-e-pepe
Tags: food-and-drink, one-column, full-site-editing, block-patterns, editor-style
*/

/* -------------------------------------------------------------------------
 * Farben, Schriften, Abstände und Layoutbreiten kommen aus theme.json.
 * Diese Datei enthält nur die Feinheiten, die sich dort nicht ausdrücken
 * lassen – im Wesentlichen Trennlinien, Flächentöne und Kleinschrift-Labels.
 *
 * Verfügbare Presets:
 *   --wp--preset--color--base      #FFFFFF
 *   --wp--preset--color--contrast  #202124
 *   --wp--preset--color--primary   #2E3235
 *   --wp--preset--color--accent    #AA5F46
 * ---------------------------------------------------------------------- */

:root {
	/* Aus der Grundpalette abgeleitete Linien und Tonwerte. */
	--sep-line: color-mix( in srgb, var( --wp--preset--color--primary ) 15%, var( --wp--preset--color--base ) );
	--sep-muted-text: color-mix( in srgb, var( --wp--preset--color--contrast ) 70%, var( --wp--preset--color--base ) );
}

:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 3px;
}

/* --- Kopfbereich ------------------------------------------------------ */

.site-header {
	border-bottom: 1px solid var( --sep-line );
}

.site-header__inner {
	min-height: 3.5rem;
}

.wp-block-navigation .wp-block-navigation-item__content {
	border-bottom: 1px solid transparent;
	padding-block: 0.25rem;
}

/* Optische statt geometrischer Ausrichtung: Der Site-Titel hat mit dem "p"
   eine Unterlänge, die Navigation steht in Versalien und hat keine. Bei
   gleicher Boxmitte sitzt die Navigation dadurch rund 2,5 px zu hoch.
   Der Wert in em, damit er mit der fließenden Schriftgröße mitskaliert.
   position:relative + top statt transform: ein transform auf diesem
   Element würde es zum containing block für das mobile Overlay-Menü
   machen (position:fixed), das dann nur noch 44×44px groß auf den
   Menü-Button zusammenschrumpft statt den ganzen Bildschirm zu füllen –
   im Browser nachgestellt und bestätigt. */
.site-header .wp-block-navigation {
	position: relative;
	top: 0.15em;
}

.wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	color: var( --wp--preset--color--accent );
	border-bottom-color: var( --wp--preset--color--accent );
}

/* --- Startseite ------------------------------------------------------- */

.hero {
	border-bottom: 1px solid var( --sep-line );
}

/* Hero mit Bild: die Trennlinie übernimmt das Bild selbst. */
.hero--bild {
	border-bottom: 0;
}

/* --- Hero-Überschrift ---------------------------------------------------
 * Zwei Zeilen, EINE Überschrift: der Name in der Auszeichnungsschrift,
 * darunter die Einordnung klein und gesperrt. Die zweite Zeile bekommt
 * bewusst dieselbe Behandlung wie `.site-footer__heading` und
 * `.info-grid__heading` (gesperrt, versalien, Grundschrift), damit die
 * Seite eine Handschrift behält statt einer dritten Sonderform.
 *
 * Weiß statt gedämpft, und das ist keine Geschmacksfrage: Auf der
 * Deckfläche (70 % #2E3235) trägt Weiß 5,02:1 – gerechnet gegen den
 * ungünstigsten Fall, ein völlig weißes Foto. Jede Abdunklung der Schrift
 * fiele unter die geforderten 4,5:1, sobald ein helles Bild einzieht.
 * Nachgerechnet in der H1-Prüfung, nicht geschätzt.
 * -------------------------------------------------------------------- */

.hero__titel {
	margin: 0 0 var( --wp--preset--spacing--40 );
	color: var( --wp--preset--color--base );
}

.hero__titel-name {
	display: block;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--x-large );
	line-height: 1.1;
}

.hero__titel-einordnung {
	display: block;
	margin-top: 0.4rem;
	font-family: var( --wp--preset--font-family--base );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	/* Verteilt den Text gleichmaessig auf die Zeilen, statt die erste bis
	   zum Rand zu fuellen. Ohne das bricht "Italienisches Restaurant in
	   Eschweiler" auf schmalen Geraeten hinter dem "in" um und laesst die
	   Praeposition allein am Zeilenende haengen. Browser ohne
	   Unterstuetzung brechen wie bisher um - kein Ausfall, nur kein
	   Gewinn. */
	text-wrap: balance;
}

/* --- Call to Action -----------------------------------------------------
 * Gemessene Kontraste gegen Weiß:
 *   Terrakotta #AA5F46 → 4,74:1 auf Weiß (erfüllt 4,5:1 auch als normale Schrift)
 *   Anthrazit  #2E3235 → 12,4:1  (reicht in jeder Größe)
 * Terrakotta bräuchte eigentlich die große Schriftstufe, um diesen Kontrast
 * zu erfüllen – bei gleicher Schriftgröße wie der WhatsApp-Button (siehe
 * unten) trägt stattdessen die deutlich fette Schrift (600) plus die
 * gefüllte Fläche die Lesbarkeit; Anthrazit hat ohnehin Kontrastreserve.
 *
 * Zwei gleich breite Spalten statt Flex: Der Betreiber will beide Buttons
 * exakt gleich breit, unabhängig vom (unterschiedlich langen) Text. Ein
 * CSS-Grid mit zwei `minmax(0, 1fr)`-Spalten erzwingt das strukturell –
 * die `0` als Minimum verhindert, dass eine Spalte durch ihren Inhalt über
 * ihren Anteil hinauswächst (ein bloßes `1fr` würde das zulassen).
 * `white-space: nowrap` verhindert einen Umbruch innerhalb einer
 * Beschriftung; die Spaltenbreite (`max-width` unten, ca. 40rem) ist so
 * gewählt, dass beide Texte plus Symbol hineinpassen (im Browser bei
 * 1280px und 390px nachgemessen, siehe Task-Report). Kein `transform`
 * hier: ein transform auf `.hero__cta` würde den Container zum containing
 * block für `position: fixed` machen – das hat im Projekt bereits das
 * mobile Overlay-Menü zerlegt (siehe Kommentar bei
 * `.site-header .wp-block-navigation` oben).
 *
 * Beide Buttons dieselbe (kleinere) Schriftstufe `medium`: Ursprünglich
 * hatte nur der WhatsApp-Button `medium`, der Reservieren-Button `large` –
 * dadurch war er trotz gleicher Breite spürbar höher (56,6px vs. 49,4px
 * bei 1280px, im Browser nachgemessen). Rückmeldung aus der Abnahme: nicht
 * den kleineren Button größer machen, sondern den großen kleiner – beide
 * wirkten besonders im Mobil-Layout (deckungsgleiche Spaltenbreite, aber
 * `large` skaliert bei schmalem Viewport kaum, siehe theme.json-Skala)
 * überdimensioniert. Mit gleicher Schriftstufe UND gleicher Polsterung
 * ergibt sich die gleiche Höhe von selbst, ganz ohne eine zusätzliche
 * `height`-Formel.
 *
 * `!important` auf `display`/`grid-template-columns`: Der wp:buttons-Block
 * hat von Haus aus (block.json-Default, unabhängig von den JSON-Attributen
 * im Pattern-Kommentar) einen Flex-Layout-Support, den WordPress serverseitig
 * per `render_block`-Filter als `is-layout-flex`-Klasse einsetzt – das ist
 * hier im Browser nachgemessen und lässt sich am Markup selbst nicht
 * abschalten. Die zugehörige Kernregel `body .is-layout-flex{display:flex}`
 * hat durch das Element `body` eine höhere Spezifität als ein einzelner
 * Klassenselektor wie `.hero__cta` – ohne `!important` würde unser Grid
 * also vom Kern-Flex überschrieben. -------------------------------------- */

.hero__cta {
	display: grid !important;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
	gap: var( --wp--preset--spacing--20 );
	max-width: 40rem;
	margin-top: var( --wp--preset--spacing--40 );
}

/* Unter ~34rem Spaltenbreite wird es für "Per WhatsApp reservieren" eng –
   dann lieber volle Breite je Zeile als eine gequetschte zweite Spalte. */
@media ( max-width: 34rem ) {
	.hero__cta {
		grid-template-columns: 1fr !important;
	}
}

.hero__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --wp--preset--spacing--20 );
	min-height: 48px;
	padding: 0.8rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 2px;
	font-family: var( --wp--preset--font-family--base );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 600;
	line-height: 1.2;
	color: var( --wp--preset--color--base );
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 120ms ease, border-color 120ms ease;
}

/* Auf kleinen Schirmen (dieselbe Schwelle wie die einspaltige Grid-Regel
   oben) zusätzlich knapper gepolstert: Auf dem iPhone-Format wirkten beide
   Buttons trotz kleinerer Schriftstufe noch üppig, weil `--font-size--medium`
   bei schmalem Viewport kaum unter seine 1rem-Untergrenze fällt (fluid
   zwischen 320px und 1280px, siehe theme.json) und die Polsterung dieselbe
   blieb wie auf dem Desktop. `min-height` sinkt auf die WCAG-Mindestgröße
   von 44px statt der überall sonst im Theme üblichen 48px (siehe
   `.wp-block-navigation__responsive-container-open/close` weiter unten) –
   kleiner sollte die Klickfläche nicht werden. */
@media ( max-width: 34rem ) {
	.hero__cta .wp-block-button__link {
		min-height: 44px;
		padding: 0.6rem 1.25rem;
	}
}

.cta--terrakotta .wp-block-button__link {
	background-color: var( --wp--preset--color--accent );
}

.cta--terrakotta .wp-block-button__link:focus-visible {
	background-color: var( --wp--preset--color--primary );
}

.cta--anthrazit .wp-block-button__link {
	background-color: var( --wp--preset--color--primary );
}

.cta--anthrazit .wp-block-button__link:focus-visible {
	background-color: var( --wp--preset--color--accent );
}

/* Der Farbwechsel beim Schweben gilt nur dort, wo ein Zeiger auch wirklich
   schweben kann. Auf Touch-Geräten merkt sich der Browser den zuletzt
   angetippten Knoten als :hover-Ziel und behält ihn, bis woanders getippt
   wird. Gemessen in der Touch-Emulation (390x844, (hover: none),
   (pointer: coarse)): Nach dem Antippen von "Tisch reservieren" stand der
   Hintergrund dauerhaft auf rgb(46,50,53) statt auf rgb(170,95,70)
   zurückzufallen. Mit Maus oder Trackpad greift (hover: hover), dort bleiben
   beide Schaltflächen unverändert.

   :focus-visible steht bewusst außerhalb der Abfrage: Der Tastaturfokus muss
   auch auf einem Touch-Gerät mit angeschlossener Tastatur sichtbar bleiben,
   und dort meldet der Browser ebenfalls (hover: none). Nach einem Tap setzt
   der Browser zwar :focus, aber nicht :focus-visible (gemessen: focus true,
   focus-visible false) – der Fokusring bleibt der Tastatur vorbehalten. */
@media ( hover: hover ) {
	.cta--terrakotta .wp-block-button__link:hover {
		background-color: var( --wp--preset--color--primary );
	}

	.cta--anthrazit .wp-block-button__link:hover {
		background-color: var( --wp--preset--color--accent );
	}
}

/* Symbol im Button, gemeinsam für Telefon- und Sprechblasen-Icon – beide
   sollen sich nicht auseinanderentwickeln können (gleiche Größe, gleicher
   Abstand zum Text, gleiche vertikale Ausrichtung über das Flex-Layout des
   Buttons oben). */
.cta__icon {
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
}

/* Der Besuchsblock traegt keine eigene Flaeche mehr, sondern wird durch eine
   feine Linie abgesetzt. Nach unten genuegt die Linie, die der Fussbereich
   ohnehin mitbringt - eine zweite daneben waere doppelt.
   Die fruehere graue Flaeche war aus dem Anthrazit gemischt und wirkte kuehl;
   auf Weiss erreichen die Terrakotta-Labels ausserdem 4,74:1 statt 4,42:1. */
.besuch-sektion {
	border-top: 1px solid var( --sep-line );
}

/* Kleinschrift-Labels über den Info-Spalten und im Footer. */
.info-grid__heading,
.site-footer__heading {
	font-family: var( --wp--preset--font-family--base );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent );
}

/* --- Anfahrt -----------------------------------------------------------
 * Die Skizze hat weder Rahmen noch eigenen Hintergrund, damit sie in der
 * Seitenfläche aufgeht statt sichtbar darauf zu liegen.
 * -------------------------------------------------------------------- */

.anfahrt__karte {
	/* border-box, weil sonst Rahmen und Polsterung auf width/aspect-ratio
	   aufaddieren. Dieses Theme hat keinen globalen box-sizing-Reset. */
	box-sizing: border-box;
	display: block;
	width: 100%;
	/* height: auto ist Pflicht, sobald das img-Element width- und height-
	   Attribute traegt (hier bewusst gesetzt, damit der Browser vor dem
	   Laden Platz reserviert). Das height-Attribut wirkt sonst wie eine
	   feste CSS-Hoehe; sind Breite UND Hoehe festgelegt, greift
	   aspect-ratio nicht mehr und das Bild rendert im HTML-Attribut-
	   Verhaeltnis statt im hier gewuenschten 4:3. */
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	margin-block: var( --wp--preset--spacing--30 );
}

.anfahrt__figure {
	margin: 0;
}

.anfahrt__caption {
	margin-top: var( --wp--preset--spacing--20 );
	font-size: var( --wp--preset--font-size--small );
	color: var( --sep-muted-text );
}

/* --- Galerie ---------------------------------------------------------- */

/* Einheitliches Format, damit Hoch- und Querformate die Reihen nicht zerreißen.
 *
 * Der Selektor greift JEDES Bild in der Galerie, nicht nur die mit der Klasse
 * `galerie__bild`. Die setzt das Importskript - ein Bild, das der Betreiber
 * im Seiteneditor hinzufügt, hat sie nicht. Vorher fiel ein solches Bild aus
 * dem Format: Ein Hochformat hätte die Reihe auseinandergezogen, und niemand
 * hätte erraten können, dass eine unsichtbare Klasse fehlt.
 *
 * `galerie__bild` bleibt am Markup, schadet nicht und macht im Editor
 * erkennbar, welche Bilder aus dem Import stammen - gebraucht wird sie hier
 * aber nicht mehr. */
.galerie figure.wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/* --- Fußbereich ------------------------------------------------------- */

/* Der Fußbereich bringt seine eigene obere Polsterung mit (spacing|50, im
   Browser 64px). Der Inhalt darüber bringt nochmal 64px untere mit – auf
   der Startseite über `.besuch-sektion`, auf allen anderen Seiten über die
   Polsterung des `main` in der jeweiligen Vorlage. Beide addieren sich:
   Vom letzten sichtbaren Text bis zur ersten Fußzeilen-Überschrift waren es
   dadurch 144px, zwischen zwei Abschnitten dagegen nur 80px. Gemessen im
   Browser, nicht geschätzt.

   Die untere Polsterung des Inhaltsbereichs entfällt deshalb; den Abstand
   zum Fußbereich stellt allein dessen obere Polsterung her. Damit ist der
   Übergang zum Fußbereich genauso weit wie der zwischen zwei Abschnitten.

   `!important` ist hier unvermeidbar und keine Bequemlichkeit: Die
   Polsterung steht als style-Attribut direkt im Element – der Block-Editor
   schreibt sie so –, und ein Inline-Stil schlägt jeden Selektor ohne
   `!important`.

   Der letzte Kindknoten wird mitgenommen, weil die beiden Quellen an
   verschiedenen Stellen sitzen: mal am `main` selbst, mal am letzten
   Abschnitt darin.

   Die dritte Zeile deckt den Seiteninhalt ab. Seit der Hero und der
   Besuchsblock im Seiteninhalt liegen statt in der Vorlage, schiebt sich
   `.wp-block-post-content` als Ebene dazwischen: `main > :last-child` trifft
   dann den Inhaltsbehälter, nicht mehr den letzten Abschnitt darin. Ohne
   diese Zeile stand unter dem Besuchsblock wieder die doppelte Polsterung –
   im Browser gemessen, 64px zu viel. */

main.wp-block-group,
main.wp-block-group > :last-child,
main.wp-block-group > .wp-block-post-content > :last-child {
	padding-bottom: 0 !important;
}

.site-footer {
	border-top: 1px solid var( --sep-line );
	/* Der Group-Block schreibt sein Polster als style-Attribut direkt ins HTML
	   (parts/footer.html), und ein Inline-Stil schlägt jede Stylesheet-Regel.
	   Deshalb `!important` - dasselbe Muster wie oben bei `.hero__cta`.
	   Fest waren es 4rem auf jeder Breite; jetzt wächst das Polster mit dem
	   Bildschirm mit, von 2rem auf dem Handy bis 4rem am Desktop. */
	padding-top: clamp( 2rem, 5vw, 4rem ) !important;
	padding-bottom: clamp( 2rem, 5vw, 4rem ) !important;
}

/* Der Fußbereich verhält sich auf allen Geräten gleich - bewusst KEINE
   Sonderbehandlung fürs Handy.

   Vorher gab es drei verschiedene Zustände: drei Spalten am Desktop, zwei
   auf dem iPad, eine auf dem Handy - und dazwischen ein unausgewogener
   Zwischenschritt, bei dem die dritte Spalte allein in der zweiten Reihe
   stand. Dazu ein Polster von 4rem, das auf JEDER Breite galt: gemessen
   447px Fußhöhe auf einem iPhone, also 53% des Bildschirms.

   Jetzt gibt es nur noch zwei Zustände, und die Abstände wachsen stufenlos
   mit der Bildschirmbreite statt an einer Bruchkante zu springen:

     unter 48rem   eine Spalte  (drei Spalten passen auf kein Handy)
     ab 48rem      drei Spalten (kein Zwei-Spalten-Zwischenschritt mehr)

   `clamp()` statt fester Werte, damit dieselbe Regel für Handy und Desktop
   gilt: 2rem Polster am unteren Ende, 4rem am oberen, dazwischen gleitend.
   Eine Regel, kein Bruch. */
.site-footer__inner.wp-block-columns {
	display: grid;
	/* Auf dem Handy stehen Anschrift und Öffnungszeiten NEBENEINANDER statt
	   untereinander - das spart eine ganze Blockhöhe. Möglich wurde das erst
	   durch die gekürzten Zeitangaben ("Di – Sa 18–23 Uhr"): ausgeschrieben
	   brachen sie in einer halbbreiten Spalte mehrfach um und hätten die
	   Ersparnis wieder aufgefressen.
	   Die Rechtslinks laufen darunter über die volle Breite - sie sind kurz
	   und ergäben als dritte Zelle nur eine fast leere Spalte. */
	grid-template-columns: 1fr 1fr;
	gap: clamp( 1.25rem, 3vw, 2rem );
}

.site-footer__inner.wp-block-columns > .wp-block-column:last-child {
	grid-column: 1 / -1;
}

/* Nicht drei GLEICHE Spalten: Die drei Blöcke haben sehr unterschiedlich
   lange Zeilen. Bei gleicher Breite bricht "Dienstag – Samstag: 18:00 –
   23:00 Uhr" schon auf einem 768px-iPad um und lässt "Uhr" allein in der
   nächsten Zeile stehen - genau der Effekt, vor dem der frühere Kommentar
   an dieser Stelle gewarnt hat. Die Öffnungszeiten bekommen deshalb mehr
   Platz, die kurzen Rechtslinks weniger. Im Browser nachgemessen. */
@media ( min-width: 48rem ) {
	.site-footer__inner.wp-block-columns {
		grid-template-columns: 1fr 1.5fr 0.9fr;
	}

	.site-footer__inner.wp-block-columns > .wp-block-column:last-child {
		grid-column: auto;
	}
}

.site-footer__inner.wp-block-columns > .wp-block-column {
	flex-basis: auto;
	width: auto;
}

/* Die Kleinschrift-Labels stehen dicht über ihrem Block, sonst reißt der
   Vorgabe-Abstand der Überschrift die drei Blöcke auseinander. */
.site-footer__heading {
	margin-top: 0;
	margin-bottom: 0.35rem;
}

.site-footer__inner .wp-block-column > p {
	margin-top: 0;
	margin-bottom: 0;
}

/* Impressum und Datenschutz nebeneinander statt untereinander - auf allen
   Geräten gleich, spart überall eine Zeile. Der Zeilenumbruch im Markup
   bleibt stehen und wird nur ausgeblendet; so bleibt die Quelle lesbar und
   ein Screenreader liest weiterhin zwei getrennte Links. Der Mittelpunkt
   ist reine Zierde. */
/* Öffnungszeiten in zwei Fassungen: ausgeschrieben ab Tablet, gekürzt auf
   dem Handy. Ausgeschrieben passen sie nicht in die halbbreite Handy-Spalte
   (gemessen: mehrfacher Umbruch), gekürzt wirken sie am Desktop unnötig
   knapp - deshalb je Größe die passende.

   Zwei Absätze statt vieler <span>-Schnipsel innerhalb eines Absatzes: Es
   unterscheiden sich Wochentage UND Uhrzeiten, das wären sechs Schnipsel
   pro Zeile und ein unlesbares Markup.

   `display: none` blendet für ALLE aus, auch für Vorleseprogramme - es wird
   also immer genau eine Fassung vorgelesen, nie beide. Das ist bewusst
   nicht `visually-hidden`: Ein für das Auge verstecktes Textduplikat wäre
   genau das, was die Prüfung im Projekt sonst anschlägt. */
.site-footer__zeiten--lang {
	display: none;
}

@media ( min-width: 48rem ) {
	.site-footer__zeiten--kurz {
		display: none;
	}

	.site-footer__zeiten--lang {
		display: block;
	}
}

.site-footer__rechtliches br {
	display: none;
}

.site-footer__rechtliches a:first-child::after {
	content: " · ";
	/* --sep-line ist eine Rahmenfarbe und auf Text praktisch unsichtbar.
	   Der Punkt nimmt deshalb die Textfarbe und wird nur abgeschwächt. */
	color: var( --wp--preset--color--primary );
	opacity: 0.45;
}

.site-footer a {
	color: var( --wp--preset--color--primary );
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
	color: var( --wp--preset--color--accent );
	text-decoration: underline;
}

/* --- Inhalt ----------------------------------------------------------- */

.page-title {
	margin-bottom: var( --wp--preset--spacing--40 );
}

/* Schmale Lesespalte linksbündig statt zentriert ------------------------
 * WordPress zentriert die Kinder eines `is-layout-constrained`-Containers
 * standardmäßig über eine Grundregel aus dem generierten `global-styles-
 * inline-css` (lädt vor dieser Datei):
 *
 *   .is-layout-constrained > :where(:not(.alignleft):not(.alignright)
 *   :not(.alignfull)) { max-width: var(--wp--style--global--content-size);
 *   margin-left: auto !important; margin-right: auto !important; }
 *
 * `main` (Seitentitel) und `.wp-block-post-content` (Fließtext) sind beide
 * `is-layout-constrained`-Container. Weil die schmale Lesespalte
 * (`content-size`, 46rem) enger ist als die breiten Elemente auf der Seite
 * (`wide-size`, 76rem – Kopfbereich-Logo, Fußbereich, `alignwide`-Titel),
 * landet ihre linke Kante bei zentrierter Ausrichtung rund 240px weiter
 * rechts als bei allem anderen (gemessen auf Impressum/Datenschutz,
 * siehe Task-Report). `alignwide` einfach zu setzen ist keine Lösung: Der
 * Text soll bei 46rem lesbarer Zeilenlänge bleiben (sonst ~130 statt 45–75
 * Zeichen pro Zeile), nur seine linke Kante soll mit den breiten Elementen
 * fluchten. Deshalb wird die Spalte nicht mehr zentriert, sondern an die
 * linke Kante der 76rem-Fläche gerückt – ihre Breite bleibt unverändert
 * (weiterhin über `max-width` aus der Grundregel oben).
 *
 * Nur `main` und `.wp-block-post-content`, nicht pauschal
 * `.is-layout-constrained`: Der Cover-Block im Hero nutzt ebenfalls
 * `layout:constrained`, seine Buttons (`.hero__cta`, siehe oben) sollen
 * weiter zentriert bleiben und sind von dieser Regel nicht betroffen.
 *
 * Spezifität statt Ladereihenfolge: `main.is-layout-constrained` (Typ +
 * Klasse) und `.wp-block-post-content.is-layout-constrained` (zwei
 * Klassen) sind beide spezifischer als die Grundregel oben (eine Klasse),
 * gewinnen also unabhängig von der Reihenfolge – trotzdem zusätzlich
 * `!important`, weil die überschriebene Eigenschaft selbst `!important`
 * gesetzt ist und sonst nichts dagegen ankäme. */
main.is-layout-constrained > :where( :not( .alignleft ):not( .alignright ):not( .alignfull ) ),
.wp-block-post-content.is-layout-constrained > :where( :not( .alignleft ):not( .alignright ):not( .alignfull ) ) {
	margin-left: max( 0px, calc( ( 100% - var( --wp--style--global--wide-size ) ) / 2 ) ) !important;
	margin-right: auto !important;
}

/* Abschnittsüberschriften in Rechtstexten (Impressum und Datenschutz):
   mehrere serifige 24px-Überschriften in Georgia dominieren den Text, den sie nur
   gliedern sollen ("so groß geschrieben", Rückmeldung des Betreibers).
   Deshalb hier bewusst von der globalen h2-Gestaltung (theme.json, Georgia,
   1,5rem, Anthrazit) abgewichen: Systemschrift knapp über Fließtextgröße,
   halbfett statt Groteske in Buchschrift, Terrakotta als Akzent statt
   Anthrazit. Der Abstand oben ist deutlich größer als unten, damit die
   Überschrift optisch zum folgenden Absatz gehört und den vorigen
   Abschnitt abschließt, statt mittig zwischen beiden zu schweben. */
.entry-content h2 {
	font-family: var( --wp--preset--font-family--base );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 600;
	color: var( --wp--preset--color--accent );
	margin-top: var( --wp--preset--spacing--50 );
	margin-bottom: var( --wp--preset--spacing--20 );
}

/* Absichtlich keine Ausnahme für die erste Überschrift eines Abschnitts
   direkt nach dem Seitentitel:
   WordPress' eigene Layout-Regel `:where(.is-layout-flow/-constrained) >
   :first-child { margin-block-start: 0 }` greift dort bereits – ihre
   Spezifität (zwei Pseudoklassen) schlägt unsere margin-top-Deklaration
   (eine Klasse, ein Element), das ist gewollt und im Browser nachgemessen:
   Der große Abstand erscheint nur zwischen zwei Abschnitten, nicht zwischen
   Seitentitel/Kartenrand und der ersten Überschrift. */

.entry-content img,
.wp-block-image img {
	display: block;
}

/* --- Responsive-Feinschliff -------------------------------------------- */

/* Seitenrand auf kleinen Schirmen verringern. theme.json setzt die
   Custom Properties über einen einfachen `body`-Selektor (Spezifität 0,0,1)
   im generierten global-styles-inline-css. Ein ebenso einfacher
   `body`-Selektor hier würde nur durch Ladereihenfolge gewinnen – riskant
   und schwer nachzuvollziehen. `html body` (Spezifität 0,0,2) gewinnt
   zuverlässig unabhängig von der Reihenfolge. Wirkung im Browser nachgemessen, siehe Task-Report. */
@media ( max-width: 48rem ) {
	html body {
		--wp--style--root--padding-left: 1.25rem;
		--wp--style--root--padding-right: 1.25rem;
	}
}

/* Bedienelemente auf mindestens 44px Höhe. border-box verhindert, dass
   Polsterung und Rahmen auf min-height aufaddieren; an genau diesem Fehler
   ist im Projekt bereits ein Button gescheitert.

   BEWUSST OHNE die Footer-Links (`.site-footer a`): Die 44px-Mindestgröße
   gilt für eigenständige Bedienelemente, nicht für Links innerhalb von
   Fließtext – WCAG 2.5.8 (Target Size Minimum) nimmt Textlinks im Fließtext
   ausdrücklich aus, genau weil das Vergrößern einzelner Wörter den
   Zeilenabstand des umgebenden Textes zerreißt. Genau das ist hier vorher
   passiert: `display:inline-flex` + `min-height:44px` machte "Impressum"
   und "Datenschutz" über doppelt so hoch wie ihre Zeile und riss dadurch
   die Absätze im Footer optisch auseinander (siehe Task-Report). Die
   Footer-Links behalten deshalb ihre natürliche Zeilenhöhe; nur die
   Navigation im Kopfbereich (eigenständige Klickflächen, kein Fließtext)
   bekommt weiterhin die Mindestgröße. */
.wp-block-navigation .wp-block-navigation-item__content {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Das Hamburger-Icon des mobilen Menüs rendert bei WordPress standardmäßig
   mit 24×24px – gemessen bei 390px Breite, kein Fund aus dem Brief.
   min-width ergänzt, weil der Button quadratisch bleiben soll. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
}