/*
Theme Name: Adler Inneringen
Theme URI: https://adler-inneringen.de
Author: Storzum Labs
Author URI: https://storzum-labs.com
Description: Child-Theme für den Gasthof Adler in Inneringen. Setzt das CI des Hauses (Albgrün, Adlergold, Instrument Serif, Archivo) als Design-Konfiguration in theme.json um. Aufgebaut auf Twenty Twenty-Five.
Template: twentytwentyfive
Version: 0.31.2
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: adler-inneringen
Update URI: false
Tags: full-site-editing, block-patterns
*/

/*
 * Gestaltung gehört in theme.json, nicht hierher.
 * Diese Datei enthält nur, was sich in theme.json nicht ausdrücken lässt.
 *
 * Der Tag "accessibility-ready" ist bewusst NICHT gesetzt: er ist ein
 * geprüftes Siegel des WordPress-Verzeichnisses, kein Selbstattest.
 */

/* Sprungmarke zum Inhalt — sichtbar, sobald sie den Fokus bekommt.
   Der Kern gibt .skip-link.screen-reader-text:focus aus (Spezifität 0-3-0);
   eine Regel auf .skip-link:focus (0-2-0) käme nie zum Zug. */
.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--kalkweiss);
	color: var(--wp--preset--color--tinte);
	outline: 2px solid var(--wp--preset--color--adlergold);
	outline-offset: 2px;
}

/* Nur für Hilfstechnik sichtbar.
   WordPress liefert .screen-reader-text im Block-Theme NICHT mit — der Kern
   druckt allein .skip-link.screen-reader-text. Ohne diese Regel wird jede so
   ausgezeichnete Überschrift ganz normal angezeigt. */
.screen-reader-text:not(:focus):not(:active) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Bewusst gekennzeichnete Platzhalterflächen im Aufbau.
   Vor dem Livegang müssen alle .adler-platzhalter verschwunden sein. */
.adler-platzhalter {
	border: 1px dashed var(--wp--preset--color--stein);
	color: var(--wp--preset--color--stein-tief);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 8rem;
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
	padding: var(--wp--preset--spacing--50);
}

/* Reduzierte Bewegung respektieren. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	html {
		scroll-behavior: auto !important;
	}
}

/* Kursive Passage in Displayzeilen — der Goldakzent.
   Grundfall ist heller Grund: Gold tief bringt dort 5,50:1.
   Der Kalkweiß-Grund kommt aus theme.json und trägt KEINE has-*-Klasse —
   eine Regel, die auf .has-kalkweiss-background-color zielt, greift nie.

   Auf grünem Grund schaltet die Regel darunter auf Gold hell: 4,89:1 gegen
   Albgrün #2C3B31, ebenfalls über der 4,5:1-Schwelle für Fließtext, und
   Überschriften gelten ohnehin als Großschrift (Schwelle 3:1).

   h3 ist seit dem 5. September mit dabei. Vorher endete die Regel bei h2,
   und die Überschriften in den Karten auf /gutscheine und /jobs hätten den
   Akzent gar nicht tragen können. */
h1 em,
h2 em,
h3 em {
	color: var(--wp--preset--color--gold-tief);
	font-style: italic;
}

.has-albgruen-background-color :is(h1, h2, h3) em,
.has-albgruen-tief-background-color :is(h1, h2, h3) em {
	color: var(--wp--preset--color--gold-hell);
}

/* Eyebrow-Zeile über der Displayzeile.
   War früher ein <h6> — das brach die Überschriftenfolge (h6 vor h1).
   Jetzt ein Absatz, der die Optik des h6-Presets selbst mitbringt. */
.adler-eyebrow {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	margin-bottom: var(--wp--preset--spacing--50);
}

.adler-eyebrow::before {
	content: "";
	display: inline-block;
	width: 2.25rem;
	height: 1px;
	margin-right: 0.9rem;
	vertical-align: middle;
	background: currentColor;
}

/* Kennzeichnung von Bildflächen, die noch fehlen. */
.adler-platzhalter-chip {
	display: inline-block;
	border: 1px dashed currentColor;
	border-radius: 999px;
	padding: 0.35rem 0.9rem;
	margin-bottom: var(--wp--preset--spacing--70);
	opacity: 0.75;
}

/* Sicherheitsnetz für Links auf dunklem Grund.
   Gemessen: Gold tief auf Albgrün 1,91:1 und auf Albgrün tief 2,40:1 —
   beides deutlich unter WCAG AA. Gold hell erreicht 4,89:1 bzw. 6,15:1.
   Gilt für alle künftigen dunklen Abschnitte. */
.has-albgruen-background-color a:where(:not(.wp-element-button)),
.has-albgruen-tief-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--gold-hell);
}

.has-albgruen-background-color a:where(:not(.wp-element-button)):hover,
.has-albgruen-tief-background-color a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--kalkweiss);
}

/* Fokusring auf dunklem Grund: Adlergold liegt dort bei 3,09:1 und damit
   nur knapp über der Schwelle. Gold hell bringt 4,89:1 bzw. 6,15:1. */
.has-albgruen-background-color :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.has-albgruen-tief-background-color :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--gold-hell);
}

/* Der Gold-hell-Button im Hero hätte sonst Ring und Fläche in derselben Farbe. */
.has-albgruen-background-color .has-gold-hell-background-color:focus-visible {
	outline-color: var(--wp--preset--color--albgruen-tief);
}

/* Displayzeilen gleichmäßig umbrechen lassen, statt harte <br> zu setzen.
   balance nur für die großen Zeilen — Chromium schaltet es ab 6 Zeilen
   ohnehin ab; für alles andere ist pretty die bessere Wahl. */
h1,
h2 {
	text-wrap: balance;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
	/* Paket DO: nur Wörter ab 12 Zeichen trennen, je Seite mindestens 5
	   ("Bu-chungen", "Kü-chenzeiten" bleiben ganz). */
	hyphenate-limit-chars: 12 5 5;
}

/* Paket AW: "Tapetenwechsel" ist 5,33 × Schriftgröße breit, die Zeile im
   Hero unter 333 px nur Fensterbreite − 88 px. Mit 44 px brach Chrome bei
   320 px mitten im Wort ohne Strich. 12,5vw passt bis 264 px. Obergrenze
   ist das Preset selbst, ab 373 px und auf dem Desktop ändert sich nichts.
   !important, weil der Kern .has-*-font-size mit !important ausgibt
   (class-wp-theme-json.php, compute_preset_classes).
   Historisch: gerechnet fuer die alte H1 "Tapetenwechsel". Seit Paket AP
   lautet die H1 "Grüß Gott im Adler."; die laengsten Woerter "Adler" und
   "Gruess" passen mit Reserve (Abnahme AP: 320/375 px kein Wortbruch, kein
   Ueberlauf). Bei neuem Wortlaut der H1 neu rechnen. */
.adler-hero h1.has-display-font-size {
	font-size: clamp(2rem, 12.5vw, var(--wp--preset--font-size--display)) !important;
}

h3,
h4 {
	text-wrap: pretty;
}

/* Der Adler als Wasserzeichen auf allen gruenen Flaechen — Seitenkopf,
   Aufforderungsblöcke im Inhalt, Fussbereich.

   Bewusst an .wp-block-group gebunden und nicht an die Farbklasse allein:
   has-albgruen-background-color traegt auch der gruene Kopfknopf
   im Kopfbereich, der kein Wasserzeichen bekommen soll.

   Das Bild liegt im Theme und nicht in der Mediathek, damit die Regel
   nicht bricht, wenn dort jemand aufraeumt. Der Hero der Startseite
   bringt sein eigenes Bild als Inline-Stil mit und bleibt unberuehrt —
   Inline schlaegt Stylesheet. */
.wp-block-group.has-albgruen-background-color,
.wp-block-group.has-albgruen-tief-background-color {
	background-image: url("assets/img/adler-wasserzeichen.png");
	background-repeat: no-repeat;
	/* Angeschnitten und aus der Textspalte heraus nach rechts unten:
	   in voller Blockhoehe stand der Adler sonst mitten hinter der
	   Anschrift und las sich als Motiv statt als Wasserzeichen. */
	background-position: right -2.5rem bottom -2rem;
	background-size: auto 72%;
}

/* Paket BH: Der Hero der Startseite steht auf reinem Albgruen, ohne Foto
   und ohne Decke (Entscheidung Patrick, 28.09.). Es bleibt allein das
   Wasserzeichen, unten rechts angeschnitten.

   Groesse: Das Wasserzeichen darf das Rechteck des Leitsatzes nicht
   beruehren, sonst sinkt Gold hell dort unter 3:1. Zwei Wege, der groessere
   gilt, gedeckelt auf die frueheren 46 Prozent:
   - unter dem Leitsatz: Bildhoehe hoechstens Innenabstand unten + 1,5rem
     Anschnitt, Breite = Hoehe x 534/480 (Seitenverhaeltnis der Datei);
   - rechts neben dem Leitsatz: Breite hoechstens Heldbreite + 1,5rem
     Anschnitt - Innenabstand links - 52rem Inhaltsbreite.
   Auf schmalen Bildschirmen greift der erste Weg, ab etwa 1100 px der zweite.

   Die Regel steht NACH der allgemeinen Wasserzeichen-Regel (beide 0-2-0,
   die Reihenfolge entscheidet). Wer Innenabstand, Inhaltsbreite oder
   Leitsatz im Template aendert, rechnet hier neu. */
.wp-block-group.adler-hero {
	background-color: var(--wp--preset--color--albgruen);
	background-image: url("assets/img/adler-wasserzeichen.png");
	background-repeat: no-repeat;
	background-position: right -1.5rem bottom -1.5rem;
	background-size: min(46%, max(
		calc((var(--wp--preset--spacing--100) + 1.5rem) * 1.1125),
		calc(100% + 1.5rem - clamp(1.25rem, 6vw, 3rem) - 52rem)
	)) auto;
}


/* Paket DE (28.09.2026): Die Regeln des alten Kopfs (Menue-Overlay des Kerns,
   Kopfnavigation CC, Kopfknoepfe AN, Umbruch unter 50em) sind entfallen. Der
   neue Kopf steht in parts/header.html, seine Regeln in assets/css/gestaltung.css.
   Alte Fassung: git show 3466ed9:theme/style.css. */

/* Umschalter hell/dunkel (Paket CJ, D-020 b). Ohne Skript und im Druck
   ausgeblendet; die Automatik (prefers-color-scheme) greift trotzdem.
   Die Farben fuer den Dunkelmodus stehen in assets/css/dunkel.css. */
.adler-farbmodus {
	display: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--stein);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--tinte);
	cursor: pointer;
}

.js .adler-farbmodus {
	display: inline-flex;
}

.adler-farbmodus:focus-visible {
	outline: 2px solid var(--wp--preset--color--adlergold);
	outline-offset: 2px;
}

.adler-farbmodus .adler-sonne,
.wp-block-site-logo img.adler-logo-dunkel {
	display: none;
}


@media print {
	.js .adler-farbmodus {
		display: none;
	}
}


/* Paket AM · Fester Kopf.

   Am <header> selbst, nicht an der inneren Gruppe: deren Elternelement ist
   genau so hoch wie sie, sticky haette keinen Weg (gemessen 24.09.2026). Das
   Elternelement des <header> ist .wp-site-blocks und reicht ueber die ganze
   Seite; kein Vorfahre setzt overflow, transform oder contain.

   Nur ab 500 px Fensterhoehe: auf dem Handy quer (812 x 375) waeren es
   158 px, also 42 % des Bildschirms.

   z-index 100 liegt unter dem Menue-Overlay des Kerns (100000).

   Bewusst nicht: Schrumpfen beim Scrollen (Hoehenwechsel eines festen Kopfs
   flackert ohne overflow-anchor am Elternelement, und das ist hier die ganze
   Seite), Schatten, JavaScript. */
:root {
	--adler-kopfhoehe: 92px;
}

@media (max-width: 50em) {
	:root {
		--adler-kopfhoehe: 136px;
	}
}

@media (max-width: 30em) {
	:root {
		--adler-kopfhoehe: 121px;
	}
}

@media (min-height: 500px) {
	header.wp-block-template-part {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 100;
	}

	html {
		/* Sprungmarken und Tastaturfokus landen unter dem Kopf, nicht dahinter
		   (WCAG 2.2, Erfolgskriterium 2.4.11). Paket DK: samt Adminleiste, unter der
		   der Kopf klebt (0 ohne Anmeldung). */
		scroll-padding-top: calc(var(--adler-kopfhoehe) + var(--wp-admin--admin-bar--height, 0px) + 0.5rem);
	}

	/* Die Kehrseite: Fuer das scroll-padding liegen auch die Bedienelemente
	   im Kopf selbst "unter dem Kopf". Schliesst sich das Menue-Overlay,
	   gibt der Kern den Fokus an den Menueknopf zurueck, und der Browser
	   scrollte ihn "ins Bild" — gemessen bei 375 x 812 von 1800 auf 1363 px.
	   Die negative scroll-margin zieht genau diesen Abstand wieder ab; im
	   festen Kopf sind die Elemente ohnehin immer zu sehen. */
	header.wp-block-template-part a,
	header.wp-block-template-part button {
		scroll-margin-top: calc(-1 * (var(--adler-kopfhoehe) + var(--wp-admin--admin-bar--height, 0px) + 0.5rem));
	}
}

/* Bis 600 px ist die Adminleiste position:absolute und scrollt mit, dort also
   direkt oben kleben. Zwischen 601 und 782 px steht sie fest und ist 46 px
   hoch — das liefert --wp-admin--admin-bar--height von selbst. */
@media (max-width: 600px) {
	.admin-bar header.wp-block-template-part {
		top: 0;
	}
}

/* Linkspalten im Fußbereich: mit <br> getrennte Links liegen bei 15 px
   Schriftgröße und Zeilenhöhe 1,65 nur 24,75 px auseinander. */
.adler-linkliste a {
	display: inline-block;
	padding-block: 0.35rem;
}

/* Der Widerrufsknopf nach § 356a BGB, Pflicht seit dem 19.06.2026.

   Das Gesetz verlangt, dass die Widerrufsfunktion ständig verfügbar und
   hervorgehoben platziert ist. Steht sie in der Fußzeile, muss sie sich durch
   besondere Maßnahmen — ausdrücklich genannt: Farbwahl oder Kontraste — von
   den übrigen Fußzeilenlinks abheben.

   Deshalb drei Unterschiede zur Linkliste darüber: eigene Zeile, Rahmen statt
   bloßer Text, und Kalkweiß statt des Goldtons der anderen Links. Gemessen auf
   Albgrün-tief: Kalkweiß 13,2:1, Gold-hell 6,2:1 — die beiden sind in Helligkeit
   wie in Farbton klar auseinanderzuhalten.

   Die Regel greift .wp-block-group mit, weil die Gruppe ihre Linkfarbe über
   .wp-elements-1 a setzt (0-1-1). Mit 0-2-1 gewinnen wir unabhängig von der
   Reihenfolge der Stylesheets. */
.wp-block-group .adler-widerruf {
	margin-top: var(--wp--preset--spacing--40);
}

.wp-block-group .adler-widerruf a {
	display: inline-block;
	padding: 0.5rem 1.15rem;
	border: 1px solid var(--wp--preset--color--kalkweiss);
	border-radius: 2px;
	color: var(--wp--preset--color--kalkweiss);
	text-decoration: none;
}

.wp-block-group .adler-widerruf a:hover,
.wp-block-group .adler-widerruf a:focus-visible {
	background-color: var(--wp--preset--color--kalkweiss);
	color: var(--wp--preset--color--albgruen-tief);
}

/* Gefuellte und umrissene Knoepfe muessen gleich hoch sein — sie stehen
   ueberall nebeneinander.

   Zwei Ursachen, nacheinander gefunden. Erstens gibt der Kern dem
   Outline-Knopf eigenes Padding (Spezifität 0-2-0) und schlägt damit die
   Buttonregel aus theme.json: gemessen 42 gegen 49 px.

   Zweitens blieb danach ein Rest von 2 px, und der kam vom Rahmen — der
   Umriss-Knopf trägt oben und unten 0,8 px, der gefüllte gar keinen.
   Gemessen 42 gegen 44 px, nebeneinander sichtbar versetzt.

   Lösung ohne magische Zahl: BEIDE bekommen denselben 1-px-Rahmen, beim
   gefüllten unsichtbar. Das Polster wird um genau diese 1 px verringert,
   damit die Höhe bleibt, wie sie war. Ergebnis: alle Knöpfe der Website
   sind 42 px hoch, gleich welchen Stils. */
.wp-block-button > .wp-block-button__link {
	border: 1px solid transparent;
	padding-top: calc(0.85em - 1px);
	padding-bottom: calc(0.85em - 1px);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid currentColor;
	padding-top: calc(0.85em - 1px);
	padding-bottom: calc(0.85em - 1px);
	padding-left: calc(1.6em - 1px);
	padding-right: calc(1.6em - 1px);
}

/* Umrissknopf im Gutschein-Shortcode (Paket BX, D-017 a).

   Gemessen am 26.09.2026 auf elf Seiten: 22 Umrissknoepfe, 21 davon
   durchsichtig wie vorgesehen. Nur "Anrufen" auf /gutscheine/ war gefuellt.
   Der Knopf kommt als HTML aus theme/inc/gutschein.php, nicht als Block.
   Deshalb laedt die Umrissregel des Kerns dort vor der globalen Knopfregel,
   und bei gleicher Spezifitaet (beide :where) gewinnt die spaetere.
   Die Regel gilt nur hier, der Grund ist kalkweiss. Tinte auf Kalkweiss
   15,7:1 (WCAG-Formel gerechnet). */
.adler-gutschein-knoepfe .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
	color: var(--wp--preset--color--tinte);
}

/* Zwei Knöpfe nebeneinander, gleich breit — ohne dass sie sich über die
   ganze Spalte ziehen.

   Ein Raster mit gleichen Spalten (1fr) und width:fit-content löst das:
   die Gruppe schrumpft auf ihren Inhalt, die Spalten teilen sich diese
   Breite gleichmäßig. Mit flex ginge es nicht — flex:1 zöge die Knöpfe
   auf die volle Spaltenbreite auseinander.

   Bewusst nur an dieser einen Gruppe: im Hero standen bis Paket BU
   "Zimmer online buchen" und "Zur Küche" nebeneinander, und ein 209 px
   breites "Zur Küche" sähe verloren aus. Seit BU: "Zimmer buchen" und
   "Zur Speisekarte".

   Die Klasse steht zusammen mit .wp-block-buttons, und das ist kein
   Schmuck: WordPress liefert im Seitenkopf die Regel "body .is-layout-flex"
   mit. Die hat 0-1-1 und schlägt eine Klasse allein (0-1-0), gleich in
   welcher Reihenfolge die Dateien geladen werden — gemessen, die Gruppe
   blieb display:flex und die gleiche Breite war reiner Zufall der
   Wortlängen. Mit zwei Klassen (0-2-0) greift die Regel. */
.wp-block-buttons.adler-knoepfe-gleich {
	display: grid;
	/* Untereinander als Grundfall — nebeneinander wären die beiden auf dem
	   Handy je 155 px schmal, und beide Beschriftungen brächen um. */
	grid-auto-flow: row;
	width: fit-content;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 30em) {
	.wp-block-buttons.adler-knoepfe-gleich {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}
}

.adler-knoepfe-gleich .wp-block-button__link {
	width: 100%;
	text-align: center;
}

/* Die Faktenleiste stapelt im Kern erst unter 782 px — darüber stehen vier
   Spalten zu je rund 124 px, in denen die Zeilen der Leiste mehrfach
   umbrechen. (Die Regel entstand an einer Zeile zum Frühstück, die es nicht
   mehr gibt; das Frühstück kostet 10,00 € je Person zusätzlich.)

   Zweispaltig umbrechen. Das !important ist nötig: Der Kern setzt ab 782 px
   ".wp-block-columns { flex-wrap: nowrap !important }". Ohne es griff hier
   nur die Spaltenbreite, und die vier Spalten standen weiter nebeneinander,
   gemessen bei 900 px je 148 px breit (24.09.2026). */
@media (min-width: 48.9em) and (max-width: 62em) {
	.adler-faktenleiste .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.adler-faktenleiste .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--70) / 2) !important;
		flex-grow: 0;
	}
}

/* ==========================================================================
   Ab Fassung 0.4.0 — Bausteine fuer die Unterseiten
   ========================================================================== */

/* Seitenkopf jeder Unterseite.
   Dieselben mitwachsenden Seitenpolster wie im Hero der Startseite: bei
   festen 3 rem blieben auf 360 px nur 216 px Textbreite uebrig. */
.adler-seitenkopf {
	padding-left: clamp(1.25rem, 6vw, 3rem);
	padding-right: clamp(1.25rem, 6vw, 3rem);
}

/* Inhalt direkt unter dem Seitenkopf: am Handy 3 rem statt 4 rem Abstand
   oben (Paket BV Rest, D-018 a). Gemessen 26.09.2026 auf /speisekarte/ bei
   320 x 640: Mit dem Knopfpaar ganz vorn lag "Anrufen" bei 662 px, Soll
   <= 656. Der Abstand steht als Inline-Stil in templates/page.html, deshalb
   !important. */
@media (max-width: 30em) {
	.adler-seitenkopf + .wp-block-group.alignwide {
		padding-top: var(--wp--preset--spacing--70) !important;
	}
}

/* --------------------------------------------------------------------------
   Platzhalter — muessen als Platzhalter zu erkennen sein, nicht als Gestaltung
   -------------------------------------------------------------------------- */

/* Bildflaeche, die noch auf ein echtes Foto wartet.
   Gestrichelt, mit Beschriftung, welches Motiv hier hingehoert.
   Kontraste gerechnet (WCAG-Formel, nicht geschaetzt):
   Text Stein tief auf Sand 4,98:1 — AA fuer Fliesstext erfuellt.
   Rahmen Stein tief auf Sand 4,98:1 — Nicht-Text-Schwelle 3:1 deutlich erfuellt.
   Stein waere auf Sand nur 2,89:1 gewesen und faellt deshalb aus. */
.adler-bildplatzhalter {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	aspect-ratio: 3 / 2;
	padding: var(--wp--preset--spacing--50);
	/* Ohne border-box zaehlt die Kernregel max-width nur den Inhalt: Polster
	   und Rahmen kommen obendrauf, und die Flaeche stand 788 statt 736 px
	   breit — 26 px links und rechts aus der Textspalte heraus. Solange die
	   Textspalte selbst die Breite vorgab, fiel das nicht auf; seit der
	   Inhaltsbereich fuer die zweispaltige Speisekarte breiter sein darf,
	   schon. */
	box-sizing: border-box;
	border: 2px dashed var(--wp--preset--color--stein-tief);
	background-color: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--stein-tief);
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.adler-bildplatzhalter--breit { aspect-ratio: 16 / 9; }
.adler-bildplatzhalter--panorama { aspect-ratio: 21 / 9; }
.adler-bildplatzhalter--hoch { aspect-ratio: 3 / 4; }
.adler-bildplatzhalter--quadrat { aspect-ratio: 1 / 1; }

/* Die Zeile "Bildplatzhalter" ueber der Motivbeschreibung. */
.adler-bildplatzhalter::before {
	content: "Bildplatzhalter";
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}

/* Auf dunklem Grund kehrt sich die Farbgebung um.
   Gerechnet: Stein hell auf Albgruen 5,29:1 und auf Albgruen tief 6,65:1;
   der Rahmen in Stein kommt auf 3,22:1 gegen Albgruen. Alle ueber Schwelle. */
.has-albgruen-background-color .adler-bildplatzhalter,
.has-albgruen-tief-background-color .adler-bildplatzhalter {
	background-color: transparent;
	border-color: var(--wp--preset--color--stein);
	color: var(--wp--preset--color--stein-hell);
}

/* Das Bildband unter dem Hero traegt die Startseite optisch mit. Es steht mit
   21:9 sehr breit; auf dem Handy bliebe davon nur ein Streifen uebrig, deshalb
   dort ein ruhigeres Verhaeltnis. Das !important ueberschreibt das aspect-ratio,
   das der Bildblock als Inline-Stil selbst setzt — an den kommt man sonst nicht
   heran, ohne den Block im Editor anzufassen. */
@media (max-width: 599px) {

	.adler-bildband img {
		aspect-ratio: 3 / 2 !important;
	}
}

/* Hinweisleiste: gilt nur, solange die Seite intern ist. */
.adler-vorschauhinweis {
	background-color: var(--wp--preset--color--gold-tief);
	color: var(--wp--preset--color--kalkweiss);
	text-align: center;
	padding: 0.55rem var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Wiederkehrende Bausteine der Unterseiten
   -------------------------------------------------------------------------- */

/* Ausstattungs- und Faktenlisten ohne Aufzaehlungspunkte, dafuer mit
   goldenem Haken. list-style-position mitgesetzt, sonst rutscht der
   Marker bei mehrzeiligen Eintraegen unter den Text. */
.adler-hakenliste {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.adler-hakenliste li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: var(--wp--preset--spacing--30);
}

.adler-hakenliste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.85rem;
	height: 1px;
	background-color: var(--wp--preset--color--gold-tief);
}

.has-albgruen-background-color .adler-hakenliste li::before,
.has-albgruen-tief-background-color .adler-hakenliste li::before {
	background-color: var(--wp--preset--color--gold-hell);
}

/* Zeitentafel: zweispaltig, Tag links, Zeit rechts, mit feiner Trennlinie.
   Bewusst kein <table> — es sind Paare, keine Datenmatrix. */
.adler-zeiten p {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	padding-block: 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--stein);
	margin-block: 0;
}

.adler-zeiten p:last-child {
	border-bottom: 0;
}

.adler-zeiten strong {
	font-weight: 600;
}

/* Speisekarte: Name und Preis in einer Zeile, Beschreibung darunter.
   Aufgebaut wie .adler-zeiten, aber mit eigener Klasse — dort traegt jedes
   <p> eine Trennlinie, hier darf die Beschreibung keine bekommen. */
.adler-gericht {
	padding-block-end: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--stein);
}

.adler-gericht + .adler-gericht {
	margin-block-start: var(--wp--preset--spacing--40);
}

.adler-gericht p {
	margin-block: 0;
}

.adler-gericht__kopf {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	font-weight: 600;
}

.adler-gericht__preis {
	white-space: nowrap;
}

/* Spezifitaet 0-2-1, weil ".adler-gericht p" oben schon 0-1-1 hat. */
.adler-gericht p.adler-gericht__text {
	margin-block-start: 0.2rem;
	color: var(--wp--preset--color--stein-tief);
	font-weight: 400;
}

/* Die Speisekarte ist mit 43 Gerichten der laengste Inhalt der Seite. Auf dem
   Handy ist eine Spalte richtig; am Notebook stand sie in derselben schmalen
   Textspalte und zwang zu weitem Scrollen, obwohl links und rechts Platz war.

   Ab 64rem laeuft der Gerichteteil deshalb zweispaltig ueber die breite
   Spalte (76rem statt 46rem). Der Vorspann, der Hinweis zu Allergenen und der
   gruene Kasten mit den Kuechenzeiten bleiben einspaltig — sie sind Fliesstext
   und keine Liste.

   Zwei Bruchregeln halten den Satz sauber: kein Gericht darf zwischen Name und
   Beschreibung umbrechen, und keine Ueberschrift darf als letzte Zeile einer
   Spalte stehenbleiben. */
@media (min-width: 64em) {
	.adler-speisekarte {
		column-count: 2;
		column-gap: var(--wp--preset--spacing--80);
		/* Dieselbe Haarlinie in Stein, die schon jedes Gericht nach unten
		   abschliesst — die Trennung zwischen den Spalten liest sich damit als
		   Teil desselben Rasters und nicht als neues Gestaltungsmittel.
		   column-rule liegt mittig im Zwischenraum und nimmt keine Breite weg,
		   die Spalten bleiben also 572 px. */
		column-rule: 1px solid var(--wp--preset--color--stein);
	}

	.adler-speisekarte > * {
		break-inside: avoid;
	}

	.adler-speisekarte > h2 {
		break-after: avoid;
	}
}

/* Unterhalb der zweispaltigen Ansicht zurueck in die Textspalte.

   Die Gruppe traegt alignwide, damit sie oben ueberhaupt breit werden darf.
   Ohne diese Regel gilt das aber auch dazwischen: bei 1000 px Fenster stand
   die Karte einspaltig auf 937 px Breite — laengere Zeilen als der Fliesstext
   daneben und unangenehm zu lesen.

   Spezifitaet 0-2-0, weil die Kernregel ".is-layout-constrained > .alignwide"
   mit 0-1-0 sonst gewinnt. */
@media (max-width: 63.9375em) {
	.entry-content .adler-speisekarte {
		max-width: var(--wp--style--global--content-size);
	}
}

/* Zeitstrahl der Hausgeschichte.

   Vorher stand jede Jahreszahl als gewoehnliche Ueberschrift im Text und die
   Seite las sich als Folge gleichrangiger Abschnitte. Jetzt traegt eine Linie
   die Jahre, ein goldener Punkt markiert jede Station.

   Die Jahreszahl steht bewusst INNERHALB des h2 und nicht als eigener Absatz
   darueber: wer mit Screenreader von Ueberschrift zu Ueberschrift springt,
   hoert sonst "Der Anfang" ohne das Jahr. display:block gibt ihr trotzdem
   eine eigene Zeile.

   Gold tief #7F5A20 auf Kalkweiss #F4F1EA ergibt 5,50:1 (WCAG-Formel
   gerechnet, nicht geschaetzt) — AA fuer Fliesstext erfuellt, und der Punkt
   liegt weit ueber der Nicht-Text-Schwelle von 3:1. */
.adler-zeitstrahl {
	/* Mitwachsend statt fest: 32 px Einzug sind am Notebook richtig, ziehen
	   den Text auf dem Handy aber sichtbar aus der Spalte — gemessen 295 statt
	   327 px neben Absaetzen ohne Zeitstrahl. Bei 375 px greift jetzt die
	   Untergrenze von 24 px, ab rund 800 px die Obergrenze von 32 px. */
	--zeitstrahl-einzug: clamp(1.5rem, 4vw, 2rem);
	position: relative;
	padding-left: var(--zeitstrahl-einzug);
}

.adler-zeitstrahl::before {
	content: "";
	position: absolute;
	left: 0;
	/* Oben am ersten Punkt ansetzen, unten am letzten enden — sonst ragt die
	   Linie ueber die Stationen hinaus. */
	top: 0.55rem;
	bottom: 0;
	width: 1px;
	background-color: var(--wp--preset--color--stein);
}

.adler-zeitstrahl__kopf {
	position: relative;
}

.adler-zeitstrahl__kopf::before {
	content: "";
	position: absolute;
	/* Der Punkt sitzt mittig auf der Linie: halbe Punktbreite nach links. */
	left: calc(var(--zeitstrahl-einzug) * -1 - 4px);
	/* Auf die Mitte der Jahreszeile ausgerichtet: die liegt bei 8,4 px,
	   der Punkt mit 4 px Versatz und 9 px Hoehe bei 8,5 px. */
	top: 0.25rem;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--gold-tief);
}

.adler-zeitstrahl__jahr {
	display: block;
	margin-bottom: 0.15rem;
	color: var(--wp--preset--color--gold-tief);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	/* Deutlich weniger Laufweite als bei .adler-eyebrow: dort sperrt 0.26em
	   Versalien auf, hier wuerden Ziffern damit auseinanderfallen. */
	letter-spacing: 0.1em;
	line-height: 1.3;
}

/* Die Urkunde der Hotelklassifizierung.

   Der Scan ist ein weisses Blatt mit hellblauem Rand und wuerde auf dem
   Kalkweiss der Seite ausfransen — die Kante braucht eine Linie. Dieselbe
   Haarlinie in Stein wie bei den Gerichten und zwischen den Spalten.

   Die Urkunde hoch 1077 x 1525 px; in der schmalen Spalte laeuft sie sonst
   ueber die ganze Texthoehe. max-height haelt sie auf Augenmass, ohne das
   Seitenverhaeltnis anzutasten. */
.adler-urkunde img {
	border: 1px solid var(--wp--preset--color--stein);
	background-color: #fff;
}

.adler-urkunde figcaption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--stein-tief);
}

/* Die Zeile "Minijob · Zeiten nach Absprache" unter der Stellenbezeichnung.
   Sie beantwortet die erste Frage, die jemand an eine Stellenanzeige hat, und
   soll deshalb vor dem Beschreibungstext gelesen werden — dieselbe goldene
   Auszeichnung wie die Jahreszahlen im Zeitstrahl.

   Die Klasse ist zugleich der Anker fuer inc/seo.php: dort wird die Zeile aus
   der Beschreibung herausgehalten und als eigene Angabe gefuehrt. */
.adler-stelle__art {
	margin-top: 0.25rem;
	margin-bottom: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--gold-tief);
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 600;
	letter-spacing: 0.06em;
}

.adler-stelle h3 {
	margin-bottom: 0;
}

/* Die Knopfgruppe der Gutscheinseite kommt aus einem Shortcode und nicht aus
   dem Blockeditor. Der Kern haengt den Blockgruppen sonst eigene
   Layoutklassen an; fehlen die, ist die Gruppe ein gewoehnlicher Block —
   gemessen standen die beiden Knoepfe auf dem Handy mit 0 px Luft
   aufeinander und sahen aus, als ueberlappten sie.

   Die Regel steht hier zusaetzlich zu den Layoutklassen im Shortcode, damit
   der Abstand auch dann sitzt, wenn der Kern seine Klassennamen aendert. */
.adler-gutschein-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
}

/* Ankuendigung des kommenden Online-Verkaufs.

   Absichtlich eine Flaeche und kein Knopf: ein Knopf, der nichts tut, ist ein
   Versprechen, das beim ersten Klick bricht. Der funktionierende Weg steht
   unmittelbar darunter.

   Kontraste gerechnet (WCAG-Formel): Gold tief #7F5A20 auf Sand #E9E4D8
   ergibt 4,89:1 — AA fuer Fliesstext. Die Marke "Neu, in Kürze" setzt
   Kalkweiss auf Gold tief, das sind 5,50:1. */
.adler-bald {
	/* Kommt aus einem Shortcode und ist ein <aside>, also kein Block — der
	   Kern gibt ihm deshalb kein border-box mit. Ohne diese Zeile kaemen
	   Polster und Rahmen auf die Breite obendrauf: gemessen 802 statt 736 px,
	   also 33 px links und rechts aus der Textspalte heraus. */
	box-sizing: border-box;
	margin-block: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--gold-hell);
	background-color: var(--wp--preset--color--sand);
}

.adler-bald__marke {
	display: inline-block;
	margin: 0;
	padding: 0.3em 0.9em;
	border-radius: 999px;
	background-color: var(--wp--preset--color--gold-tief);
	color: var(--wp--preset--color--kalkweiss);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.adler-bald__titel {
	margin-block: var(--wp--preset--spacing--40) 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--gold-tief);
}

.adler-bald__text {
	margin-block: var(--wp--preset--spacing--30) 0;
}

/* Karten fuer Zimmerarten, Ausflugsziele, Angebote. */
.adler-karte {
	border: 1px solid var(--wp--preset--color--stein);
	padding: var(--wp--preset--spacing--60);
	height: 100%;
}

/* Ein Kasten, der eine Ansage macht: Betriebsferien, Ruhetag, Hinweis. */
.adler-notiz {
	border-left: 3px solid var(--wp--preset--color--gold-tief);
	background-color: var(--wp--preset--color--sand);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.has-albgruen-background-color .adler-notiz,
.has-albgruen-tief-background-color .adler-notiz {
	background-color: transparent;
	border-left-color: var(--wp--preset--color--gold-hell);
}

/* Chat und Karte laden erst auf Klick. Der Hinweis darunter nennt den
   Empfaenger der Verbindung und bleibt dauerhaft stehen — deshalb bewusst
   kein .adler-platzhalter, der vor dem Livegang verschwinden muss. */
.adler-klick-lader {
	margin-block: var(--wp--preset--spacing--50);
}

.adler-klick-lader p {
	color: var(--wp--preset--color--stein-tief);
	margin-block-start: var(--wp--preset--spacing--30);
}

.adler-klick-lader iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* Hier stand bis zum 5. September 2026 die Regel .adler-extern::after, die
   ausgehenden Links einen kleinen Pfeil ↗ anhängte.

   Sie ist entfallen, weil der Pfeil auf Wunsch von allen Knöpfen genommen
   wurde und danach kein einziges Vorkommen mehr übrig war. Gedacht war sie
   für Links im Fließtext — dort ist sie nie zum Einsatz gekommen, sie hing
   ausschließlich an Knöpfen.

   Zu wissen: die Knöpfe zum Buchungssystem und zur Karte öffnen weiterhin
   einen neuen Tab, ohne dass es noch angekündigt wird. Das verletzt die
   AA-Stufe nicht — der Hinweis auf einen Kontextwechsel ist eine
   AAA-Anforderung — ist aber ein bewusster Verzicht.

   Soll der Pfeil je zurück, gehört die Regel hierher und die Klasse
   adler-extern an die betreffenden Links. */

/* Lange Fliesstexte der Rechtsseiten etwas ruhiger setzen. */
.adler-rechtstext h2 {
	margin-top: var(--wp--preset--spacing--80);
}

.adler-rechtstext h3 {
	margin-top: var(--wp--preset--spacing--60);
}

/* Paket AZ: In /datenschutz stehen die Code-Kennung
   WOOCOMMERCE_CHECKOUT_IS_CUSTOMER_DATA_DIRTY (~381 px) und die Adresse
   www.paypal.com/de/webapps/mpp/ua/privacy-full (~332 px) ohne jede
   Umbruchstelle. Die Textspalte ist bei 320 px nur 272 px breit, die Seite
   lief bis 411 px quer ueber (WCAG 1.4.10). break-word bricht nur ein Wort,
   das sonst ueber die Zeile ragt; jede andere Zeile bleibt, wie sie ist.
   Nicht "anywhere": das senkt auch die Mindestbreite (min-content) in
   Tabellen und Flex-Elementen und koennte Spaltenbreiten auf dem Desktop
   verschieben. Die Eigenschaft vererbt sich auf code, a, li und h3;
   h1/h2 haben sie schon. Rechtstext bleibt unberuehrt, nur Darstellung. */
.adler-rechtstext {
	overflow-wrap: break-word;
}

/* Paket BA: Unter 360 px passen die laengsten Woerter der Rechtsseiten nicht
   in die Zeile (gemessen bei 34 px: "Geschaeftsbedingungen" 255,55 px und
   "Datenschutzerklaerung" 250,14 px in 232 px Inhalt; H2
   "Verbraucherstreitbeilegung" 303,28 px in 272 px). Bei 30 px: 225,5 px,
   220,7 px und 267,6 px. Nur die Schriftgroesse, keine Silbentrennung; ab
   360 px unveraendert. Der Seitentitel steht ausserhalb von
   .adler-rechtstext und traegt .has-xx-large-font-size mit !important aus
   dem Kern; deshalb hier !important und die Seiten-ID am body. Seiten:
   4109 Impressum, 4110 Datenschutz, 4112 AGB, 4347 Widerrufsbelehrung,
   4326 Vertrag widerrufen. */
@media (max-width: 359px) {
	body.page-id-4109 h1.wp-block-post-title,
	body.page-id-4110 h1.wp-block-post-title,
	body.page-id-4112 h1.wp-block-post-title,
	body.page-id-4347 h1.wp-block-post-title,
	body.page-id-4326 h1.wp-block-post-title {
		font-size: 30px !important;
	}

	.adler-rechtstext h2 {
		font-size: 30px;
	}
}

/* ==========================================================================
   Kontaktformular
   ========================================================================== */

/* Contact Form 7 bringt fuer Felder und Button keine eigenen Stile mit.
   Ohne diese Regeln steht im Formular die Browser-Vorgabe: Arial 13 px,
   Inset-Rahmen, Nachrichtenfeld in Monospace, Absenden-Button grau. Die
   Werte hier stammen aus denselben Tokens wie theme.json, damit Formular
   und Blockbuttons nicht auseinanderlaufen. */
.wpcf7-form {
	max-width: 38rem;
}

.wpcf7-form label {
	display: block;
	font-weight: 600;
}

/* Paket DN: Knoepfe und Felder erben Schrift und Farbe. Die Browser-Vorgabe
   (Arial 13 px, Schwarz) stand sonst in jedem Element ohne eigene Regel —
   gemessen an der Bildmarke der Zimmergalerie und am Auswahlfeld des
   Kontaktformulars. Haken und Optionsfelder in Albgruen, im Dunkelmodus in
   Kalkweiss (--adler-gruen-text aus gestaltung.css). */
button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--adler-gruen-text, var(--wp--preset--color--albgruen));
}

.wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	display: block;
	width: 100%;
	/* Ohne border-box ragen die Felder um ihren Innenabstand aus der
	   Formularbreite heraus — gemessen 642 px in einem 608-px-Container. */
	box-sizing: border-box;
	margin-top: var(--wp--preset--spacing--20);
	padding: 0.7em 0.9em;
	border: 1px solid var(--wp--preset--color--stein);
	border-radius: 4px;
	background-color: var(--wp--preset--color--kalkweiss);
	color: var(--wp--preset--color--tinte);
	font-family: inherit;
	font-size: inherit;
	line-height: 1.5;
}

.wpcf7-form textarea {
	min-height: 9rem;
	resize: vertical;
}

/* Einwilligungshaken gehoeren neben den Text, nicht darueber — und der
   Satz daneben ist Fliesstext, keine Feldbeschriftung. */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.wpcf7-form .wpcf7-acceptance label {
	display: flex;
	gap: 0.6em;
	align-items: flex-start;
	font-weight: 400;
}

.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
	flex: none;
	margin-top: 0.3em;
}

/* CF7 rendert ein <input type="submit">, das die Blockregeln fuer
   .wp-element-button nicht erreicht — deshalb hier dieselben Werte
   noch einmal von Hand. */
.wpcf7-form input[type="submit"] {
	background-color: var(--wp--preset--color--albgruen);
	color: var(--wp--preset--color--kalkweiss);
	border: 0;
	border-radius: 999px;
	padding: 0.85em 1.6em;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.02em;
	cursor: pointer;
}

.wpcf7-form input[type="submit"]:hover {
	background-color: var(--wp--preset--color--albgruen-tief);
}

/* Paket AO · Leitsatz "Familie Metzger · seit 1935" (patterns/leitsatz.php).

   So steht er auf dem Wappen am Wirtshausschild. Er erscheint als Text, nie
   als Bild, und genau zweimal: im Hero der Startseite und im Fussbereich.

   Die Farbe haengt am Grund, nicht am Block, damit ein und dasselbe Muster
   auf beiden Flaechen stimmt:
   - heller Grund: Gold tief, 5,50:1 auf Kalkweiss
   - Albgruen: Gold hell, 4,89:1
   - Albgruen tief (Fuss): Gold hell, 6,15:1

   Hero: seit Paket BH reines Albgruen ohne Foto, das Wasserzeichen liegt
   neben oder unter dem Leitsatz, nie dahinter: Gold hell 4,89:1. Wer
   Wasserzeichen oder Leitsatz verschiebt, prueft die Ueberlappung neu.
   Der Leitsatz steht in x-large, fluid 26–36 px, und darf im Hero
   nicht kleiner werden. Im Fuss steht er auf reinem Albgruen tief und darf
   mit large (18–23 px) kleiner sein. */
.adler-leitsatz {
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-style: italic;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	color: var(--wp--preset--color--gold-tief);
}

.has-albgruen-background-color .adler-leitsatz,
.has-albgruen-tief-background-color .adler-leitsatz {
	color: var(--wp--preset--color--gold-hell);
}

.adler-hero .adler-leitsatz {
	margin-top: var(--wp--preset--spacing--60);
}

footer.wp-block-template-part .adler-leitsatz {
	font-size: var(--wp--preset--font-size--large);
	text-align: center;
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Paket AR · Ranke (patterns/ranke.php, Zeichnung assets/img/ranke.svg).

   Das einzige Ornament: die Ranke des Wirtshausschilds als feine Linie in
   Adlergold. 3,39:1 auf Kalkweiss, 3,09:1 auf Albgruen — fuer eine Grafik
   reicht 3:1 (WCAG 1.4.11), und als reiner Schmuck ist sie ohnehin
   aria-hidden. Hoechstens einmal je Seite, als Abschnittstrenner. */
.adler-ranke {
	color: var(--wp--preset--color--adlergold);
	margin-bottom: var(--wp--preset--spacing--50);
	line-height: 0;
}

.adler-ranke svg {
	display: block;
	width: 18rem;
	max-width: 100%;
	height: auto;
	/* Linksbuendig wie Kicker und Ueberschrift darunter. */
	margin-inline: 0;
}

/* Paket DV: Ersatzschriften mit den Maßen der Webschriften. Bis Instrument
   Serif und Archivo geladen sind, zeigt der Browser Times New Roman bzw.
   Arial, auf Breite und Ober-/Unterlänge der Webschrift gebracht; der Kopf
   der Speisekarte bricht dann schon vorher so um wie danach. Werte gemessen
   in Chromium (Canvas measureText, deutscher Mustertext, 29.09.2026). Ohne
   die lokalen Schriften (Android) greift wie bisher serif/sans-serif. */
@font-face {
	font-family: "Instrument Serif Ersatz";
	font-style: normal;
	font-weight: 400;
	src: local("Times New Roman"), local("TimesNewRomanPSMT");
	size-adjust: 82.57%;
	ascent-override: 119.91%;
	descent-override: 37.55%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Instrument Serif Ersatz";
	font-style: italic;
	font-weight: 400;
	src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT");
	size-adjust: 87.33%;
	ascent-override: 113.36%;
	descent-override: 35.5%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Archivo Ersatz";
	font-style: normal;
	font-weight: 400;
	src: local("Arial"), local("ArialMT");
	size-adjust: 98.71%;
	ascent-override: 89.15%;
	descent-override: 21.28%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Archivo Ersatz";
	font-style: normal;
	font-weight: 500;
	src: local("Arial"), local("ArialMT");
	size-adjust: 100.31%;
	ascent-override: 87.73%;
	descent-override: 20.93%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Archivo Ersatz";
	font-style: normal;
	font-weight: 600;
	src: local("Arial Bold"), local("Arial-BoldMT");
	size-adjust: 95.72%;
	ascent-override: 91.93%;
	descent-override: 21.94%;
	line-gap-override: 0%;
}

/* Die Stapel kommen aus der Schriftbibliothek ("Instrument Serif", serif);
   hier nur die Ersatzschrift dazwischen. Die globalen Stile stehen im HTML
   teils nach diesem Stylesheet; :root:root gewinnt deshalb über die
   Spezifität, nicht über die Reihenfolge. */
:root:root {
	--wp--preset--font-family--instrument-serif: "Instrument Serif", "Instrument Serif Ersatz", serif;
	--wp--preset--font-family--archivo: Archivo, "Archivo Ersatz", sans-serif;
}

/* Paket EF: <picture> um Bilder mit AVIF-Quelle (inc/performance.php) soll
   das Layout nicht berühren; das <img> verhält sich wie ohne Hülle. */
picture.adler-avif {
	display: contents;
}