/*
Theme Name: DEGUSTO
Theme URI: https://degusto-feinkost.de
Description: FSE-Block-Theme fuer DEGUSTO Restobar & Feinkost, Freiburg. Mediterran, ruhig, bildgetrieben — Designsystem "Maison".
Author: myKaiserstuhl GmbH
Version: 0.64.7
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: degusto
*/

/* ================================================================
   Basis-Styles. Design-Tokens kommen aus theme.json (--wp--preset--*
   und --wp--custom--*). Nur was der Block-Editor nicht abbildet,
   gehoert hierher: Layout-Helfer, Kopf, Fuss, Fokus-States (BFSG).

   HINWEIS 1: Nach dem Anlegen/Aendern von Patterns die "Version:"
   oben UND DEGUSTO_THEME_VERSION in functions.php hochzaehlen,
   sonst cacht WordPress die alte Pattern-Liste.

   HINWEIS 2: theme.json erzeugt seine Regeln als
   :root :where(h1, h2, …) — Spezifitaet 0,1,0. Eine einzelne Klasse
   ist damit gleichauf und gewinnt nur ueber die Ladereihenfolge.
   Ueberschriften-Abweichungen deshalb immer mit zwei Selektoren
   schreiben (.foot .foot__titel statt .foot__titel).
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

/* Die Sektionen bringen ihre Abstaende selbst mit (Kapitel stossen randlos
   aneinander). Deshalb kein globaler Blockabstand zwischen Kopf, Inhalt und
   Fuss — sonst steht ueber dem Hero ein heller Streifen.

   KORREKTUR 13.08.2026: Hier stand '> * + *'. Damit blieb ausgerechnet das
   ERSTE Kind unberuehrt, und WordPress' eigene Regel
   ':where(.wp-site-blocks) > * { margin-block-start: 24px }' griff dort
   weiter. Das Kopf-Template ist zwar 0 px hoch (Sprunglink absolut, Kopf
   fest), sein Aussenabstand schob aber die ganze Seite um 24 px nach unten —
   der Hero begann nicht am oberen Rand. Gemessen am Staging: header.top = 24.
   Der Selektor ohne '+' fasst auch das erste Kind. */
.wp-site-blocks { overflow-x: clip; }
.wp-site-blocks > * { margin-block-start: 0; }

/* Dasselbe eine Ebene tiefer, und das war die eigentliche Ursache:
   WordPress legt seinen Blockabstand (--wp--style--block-gap, hier 24 px)
   auf jedes Kind einer Flow-Gruppe ab dem zweiten. In <main> sind das
   unsere Sektionen. Zwei Folgen, beide am 13.08.2026 gemessen:

   Der Hero ist die zweite Kindposition (davor steht ein <style>-Element,
   das WordPress selbst einfuegt) und bekam dadurch 24 px Aussenabstand.
   Der faellt bei einem randlosen Element nicht als Luecke an, sondern
   klappt nach oben durch bis zum <body> — die ganze Seite stand 24 px zu
   tief, das Hero-Bild begann nicht am oberen Rand.

   Zwischen allen weiteren Sektionen zog derselbe Abstand einen 24 px
   hohen Streifen in der Grundfarbe ein. Zwischen zwei hellen Sektionen
   faellt das nicht auf, ueber dem dunklen Balken schon.

   Beschraenkt auf <section> und das Laufband: Redaktionelle Inhalte auf
   den Rechtstextseiten liegen in wp-block-post-content und behalten
   ihren Blockabstand.

   Das ':root' davor ist kein Zierrat, sondern noetig. WordPress' Regel
   lautet ':root :where(.is-layout-flow) > *' und wiegt damit 0,1,0 —
   ':where()' zaehlt null, ':root' aber als Pseudoklasse. Ein blosses
   'main > section' wiegt 0,0,2 und verliert, obwohl es spezifischer
   aussieht. Mit ':root' sind es 0,1,2. Der erste Anlauf ohne den Zusatz
   blieb wirkungslos; nachgewiesen ueber die vom Browser gemeldeten
   Treffer (CSS.getMatchedStylesForNode), nicht durch Ausprobieren. */
:root main > section,
:root main > .marquee { margin-block-start: 0; }

/* Sichtbarer Fokus fuer Tastaturnutzer (WCAG 2.4.7 / BFSG) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Skip-Link */
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--section);
	padding: 0.75rem 1.25rem; border-radius: 0 0 3px 0;
}
.skip-link:focus { left: 0; }

/* Nur fuer Screenreader.
   Gebraucht ab dem 18.08.2026 fuer die Social-Icons im Fuss: Ein Link, dessen
   einziger Inhalt ein SVG ist, hat fuer eine Sprachausgabe keinen Namen
   (WCAG 1.1.1 und 2.4.4). Bewusst NICHT display:none — das nimmt das Element
   auch der Sprachausgabe weg. Auch kein width/height 0 mit overflow:hidden,
   weil manche Ausgaben den Text dann zusammenziehen; deshalb der 1px-Ausschnitt
   samt white-space:nowrap. */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; white-space: nowrap;
	clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* ================================================================
   Wiederkehrende Bausteine des Maison-Systems
   ================================================================ */

.kicker {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--kicker);
	text-transform: uppercase;
}

/* Markenname DEGUSTO immer versal und gesperrt */
/* DEGUSTO im Fliesstext.

   02.09.2026 (Sophia, Mail „AW: Webseite - Part 4"): „Wieso wird DEGUSTO mit
   leerzeichen geschrieben?" — die Sperrung stand auf 0.14em und liess den
   Namen mitten im Satz als „D E G U S T O" lesen. Sie ist auf 0.04em zurueck:
   genug, damit Versalien nicht kleben, zu wenig, um als Leerzeichen zu wirken.

   In Kickern gilt weiter deren eigene Sperrung (0.26em) — dort ist die
   Sperrung das Gestaltungsmittel der Zeile und nicht die des Namens. Ohne
   diese Regel waere der Markenname enger gesetzt als die Zeile um ihn herum. */
.brand { letter-spacing: var(--wp--custom--tracking--brand); }
.kicker .brand { letter-spacing: inherit; }

.btn {
	display: inline-flex; align-items: center; gap: 0.6em;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.82rem; font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--button);
	text-transform: uppercase;
	padding: 1.05em 1.9em;
	border-radius: var(--wp--custom--radius);
	transition: background 0.5s var(--wp--custom--ease-out),
	            color 0.5s var(--wp--custom--ease-out),
	            transform 0.5s var(--wp--custom--ease-out),
	            box-shadow 0.5s var(--wp--custom--ease-out);
}
.btn--gold {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
}
.btn--gold:hover {
	background: var(--wp--preset--color--accent-light);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px -12px rgba(176, 136, 62, 0.6);
}

/* ================================================================
   Kopf
   Ueber dem Hero transparent mit beigem Logo; ab 70 % Viewport-Scroll
   dunkler Grund mit beigem Logo und goldener Haarlinie (.is-scrolled aus
   frontend.js). Bis zum 17.08.2026 war dieser Zustand hell.
   ================================================================ */

.hdr {
	position: fixed; inset: 0 0 auto 0; z-index: 60;
	display: flex; align-items: center; justify-content: space-between;
	padding: 1.5rem var(--wp--custom--gutter);
	transition: background 0.6s var(--wp--custom--ease),
	            padding 0.6s var(--wp--custom--ease),
	            box-shadow 0.6s var(--wp--custom--ease);
}

/* 44 -> 54 px (Sophia im Termin vom 28.08.2026): „ein bisschen groesser …
   dass man so ein bisschen mehr Restobar und Feinkost lesen kann". Der
   Zusatz unter dem Schriftzug ist der Grund — er traegt die Wiedererkennung
   und war bei 44 px kaum zu entziffern. „Muss nicht arg viel groesser
   werden", deshalb 54 und nicht mehr; der Kopf waechst damit von 92 auf
   102 px. */
.hdr__logo { height: 54px; position: relative; display: block; transition: height 0.6s var(--wp--custom--ease); }
.hdr__logo-img { height: 100%; width: auto; transition: opacity 0.5s var(--wp--custom--ease); }
.hdr__logo .lg-beige { position: absolute; inset: 0; opacity: 1; }
.hdr__logo .lg-black { opacity: 0; }

.hdr__nav { display: flex; align-items: center; gap: 2.4rem; }
.hdr__nav .navlink {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem; font-weight: 400;
	letter-spacing: var(--wp--custom--tracking--nav);
	text-transform: uppercase;
	color: var(--wp--preset--color--section);
	position: relative; padding: 0.3em 0;
	transition: color 0.5s var(--wp--custom--ease);
}
.hdr__nav .navlink::after {
	content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0); transform-origin: left;
	transition: transform 0.5s var(--wp--custom--ease-out);
}
.hdr__nav .navlink:hover::after,
.hdr__nav .navlink[aria-current="page"]::after { transform: scaleX(1); }

.hdr__lang {
	font-size: 0.72rem; letter-spacing: 0.12em;
	color: var(--wp--preset--color--section); opacity: 0.7;
	transition: color 0.5s var(--wp--custom--ease);
}

/* Der Kopf-CTA ueber dem Hero.
   Der Entwurf setzt hier beigen Text auf die Goldflaeche — gemessen sind das
   2,72:1 und damit unter WCAG 1.4.3 AA (4,5:1). Statt der Flaeche die Farbe
   zu nehmen (dann verschwindet der Knopf im Hero-Bild), traegt er jetzt
   dieselbe dunkle Schrift wie jeder andere Gold-Button: 5,10:1. Optisch ist
   das der geringste Eingriff, weil ab dem Scrollen ohnehin diese Kombination
   erscheint — der Knopf wechselt jetzt schlicht nicht mehr die Textfarbe. */
.hdr__cta { color: var(--wp--preset--color--primary); }

/* DER GESCROLLTE KOPF IST DUNKEL (Kundenwunsch, ueber Jakob am 17.08.2026).
   Sophia hatte den hellen Streifen markiert und gefragt, ob er dunkel wird.

   Vorher stand hier `rgba(246, 239, 230, 0.94)` mit schwarzem Logo. Der
   Wechsel hell/dunkel beim Scrollen entfaellt damit: Der Kopf sieht ueber dem
   Hero und darunter gleich aus, nur kompakter und mit Grund.

   DIE HAARLINIE UNTEN IST NICHT DEKORATION. Ueber den hellen Sektionen setzt
   sich ein dunkler Kopf von selbst ab. Ueber den dunklen — dem Tagesbogen ab
   der Golden Hour, den Balken, den Sub-Heros — hat er fast denselben Ton wie
   der Inhalt darunter, und die Kante verschwindet. Die goldene Linie haelt
   ihn dort sichtbar, ohne auf hellem Grund aufzufallen.

   Gemessen auf #18201C: Beige #F2E9DE 14,2:1, Gold-Knopf mit dunkler Schrift
   unveraendert 5,10:1. Beides ueber WCAG AA. */
.hdr.is-scrolled {
	background: rgba(24, 32, 28, 0.94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	padding: 0.85rem var(--wp--custom--gutter);
	box-shadow: 0 1px 0 rgba(176, 136, 62, 0.45);
}
/* Beim Scrollen bleibt der Abstand zur Ausgangsgroesse derselbe wie vorher. */
.hdr.is-scrolled .hdr__logo { height: 44px; }
/* Das beige Logo bleibt stehen — genau wie ueber dem Hero. */
.hdr.is-scrolled .lg-beige { opacity: 1; }
.hdr.is-scrolled .lg-black { opacity: 0; }
.hdr.is-scrolled .navlink,
.hdr.is-scrolled .hdr__lang { color: var(--wp--preset--color--section); }
.hdr.is-scrolled .hdr__cta {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
}

/* Burger — erst unter 900 px sichtbar */
.burger { display: none; width: 34px; height: 34px; position: relative; z-index: 61; }
.burger__box { display: block; position: absolute; inset: 0; }
.burger__line,
.burger__line::before,
.burger__line::after {
	content: ""; position: absolute; left: 5px; width: 24px; height: 1px;
	background: var(--wp--preset--color--section);
	transition: background 0.5s var(--wp--custom--ease);
}
.burger__line { top: 50%; }
.burger__line::before { top: -7px; left: 0; }
.burger__line::after { top: 7px; left: 0; }
/* Der Burger behaelt seine beigen Striche — der Kopf ist jetzt auch im
   gescrollten Zustand dunkel, schwarze Striche waeren darauf unsichtbar. */
.hdr.is-scrolled .burger__line,
.hdr.is-scrolled .burger__line::before,
.hdr.is-scrolled .burger__line::after { background: var(--wp--preset--color--section); }

/* Mobilmenue — Vollbild, dunkel, Serifen-Links.
   Geschlossen: aus dem Bild geschoben UND per visibility/inert aus der
   Tastatur- und Screenreader-Reihenfolge genommen. Kein hidden-Attribut,
   das wuerde die Einblend-Bewegung verhindern. */
.mnav {
	position: fixed; inset: 0; z-index: 80;
	background: var(--wp--preset--color--primary);
	display: flex; flex-direction: column; justify-content: center;
	padding: var(--wp--custom--gutter);
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform 0.7s var(--wp--custom--ease), visibility 0s linear 0.7s;
}
.mnav.is-open {
	transform: none;
	visibility: visible;
	transition: transform 0.7s var(--wp--custom--ease), visibility 0s;
}
.mnav__inner { display: flex; flex-direction: column; align-items: flex-start; }
.mnav__link {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--section);
	font-size: 2.2rem; padding: 0.5rem 0;
}
.mnav__link:hover { color: var(--wp--preset--color--accent-light); }
.mnav__cta { margin-top: 1.5rem; }
.mnav__close {
	position: absolute; top: 1.5rem; right: var(--wp--custom--gutter);
	color: var(--wp--preset--color--section); font-size: 2rem; line-height: 1;
}

/* ----------------------------------------------------------------
   Sektions-Grundgeruest
   Sektionen sind randlos, der Inhalt zentriert sich innen.
   ---------------------------------------------------------------- */

.sec { padding-block: var(--wp--preset--spacing--sektion); }

.wrap {
	width: min(100% - 2 * var(--wp--custom--gutter), 1300px);
	margin-inline: auto;
}
.wrap-wide {
	width: min(100% - 2 * var(--wp--custom--gutter), 1560px);
	margin-inline: auto;
}

/* ----------------------------------------------------------------
   Scroll-Reveal
   Elemente steigen beim Eintritt in den Viewport ein (frontend.js).

   WICHTIG: .reveal setzt ausschliesslich opacity und transform. Ein
   Element, das zusaetzlich eine eigene Deckkraft braucht (Grossziffern,
   Krone), darf dafuer NICHT opacity nutzen — .reveal.is-in wuerde sie
   ueberschreiben. In den Entwuerfen ist genau das passiert: alle
   Grossziffern stehen faktisch auf voller Deckkraft statt auf 25–30 %.
   Loesung hier: solche Elemente bekommen ihre Abstufung ueber die
   Farbe (rgba) statt ueber opacity.
   ---------------------------------------------------------------- */

.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1s var(--wp--custom--ease-out),
	            transform 1s var(--wp--custom--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.09s; }
.reveal.d2 { transition-delay: 0.18s; }
.reveal.d3 { transition-delay: 0.27s; }
.reveal.d4 { transition-delay: 0.36s; }

/* Ohne JavaScript und im Still-Modus bleibt nichts unsichtbar. */
.no-js .reveal,
.is-still .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ================================================================
   Startseite — Hero
   Drei Bilder im Ken-Burns-Zyklus, Text unten links.
   ================================================================ */

.hero {
	position: relative;
	height: 100svh;
	min-height: 600px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}

.hero__media { position: absolute; inset: 0; z-index: 0; background: var(--wp--preset--color--primary-deep); }
.hero__layer {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0;
	will-change: opacity, transform;
	animation: degusto-kenburns 27s infinite;
}
.hero__layer--2 { animation-delay: -9s; }
.hero__layer--3 { animation-delay: -18s; }

@keyframes degusto-kenburns {
	0%   { opacity: 0; transform: scale(1.04); }
	7%   { opacity: 1; }
	33%  { opacity: 1; }
	41%  { opacity: 0; }
	100% { opacity: 0; transform: scale(1.13); }
}

.hero__scrim { position: absolute; inset: 0; z-index: 1; background: var(--wp--custom--scrim--hero); }

.hero__inner {
	position: relative; z-index: 2; width: 100%;
	padding: 0 var(--wp--custom--gutter) clamp(3rem, 7vh, 6rem);
}

.hero .hero__kicker {
	color: var(--wp--preset--color--accent-light);
	margin: 0 0 1.5rem;
	opacity: 0;
	animation: degusto-rise 1.1s 0.3s var(--wp--custom--ease-out) forwards;
}

.hero .hero__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--hero);
	line-height: var(--wp--custom--leading--hero);
	letter-spacing: var(--wp--custom--tracking--display);
	color: var(--wp--preset--color--section);
	max-width: 16ch;
	margin: 0;
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.28);
}
.hero__title .ln {
	display: block;
	opacity: 0;
	transform: translateY(40px);
	animation: degusto-rise 1.2s var(--wp--custom--ease-out) forwards;
}
.hero__title .ln:nth-child(1) { animation-delay: 0.45s; }
.hero__title .ln:nth-child(2) { animation-delay: 0.62s; }

.hero .hero__sub {
	margin: 2rem 0 0;
	max-width: 46ch;
	color: rgba(242, 233, 222, 0.9);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--lead);
	opacity: 0;
	animation: degusto-rise 1.2s 0.85s var(--wp--custom--ease-out) forwards;
}

@keyframes degusto-rise { to { opacity: 1; transform: none; } }

.hero .hero__cue {
	position: absolute; z-index: 2; left: 50%; bottom: 1.6rem;
	transform: translateX(-50%);
	margin: 0;
	color: var(--wp--preset--color--section);
	font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
	opacity: 0.8;
	display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.hero__cue-bar {
	width: 1px; height: 44px;
	background: linear-gradient(var(--wp--preset--color--section), transparent);
	animation: degusto-cue 2.4s var(--wp--custom--ease) infinite;
}
@keyframes degusto-cue {
	0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
	50%      { transform: scaleY(1);   opacity: 0.9; }
}

/* ================================================================
   Startseite — Philosophie
   ================================================================ */

.philo { text-align: center; }

/* Die Krone traegt ihre Abstufung als eigene opacity. Das geht hier nur,
   weil .reveal am Bild selbst sitzt und beide Werte zusammenfallen (0.9
   waere sonst von .reveal.is-in auf 1 gezogen worden). Sichtbar ist der
   Unterschied bei einem Bild ohnehin kaum — die Regel steht beim Reveal. */
.philo__krone {
	height: 46px; width: auto;
	margin: 0 auto 2.4rem;
	opacity: 0.9;
}
.philo .philo__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.08;
	max-width: 18ch;
	margin: 0 auto 2rem;
}
/* Der Werbesatz des Hauses (Sophia, 29.08.2026). Er steht zwischen
   Ueberschrift und Absatz und muss beide tragen, ohne der Ueberschrift den
   Rang abzulaufen: Serife wie sie, aber kursiv, kleiner und im gedeckten
   Gold — auf hellem Beige ist das `accent-text`, nicht das Marken-Gold. */
.philo .philo__claim {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.15rem, 1.7vw, 1.45rem);
	line-height: 1.35;
	color: var(--wp--preset--color--accent-text);
	max-width: 34ch;
	margin: -0.8rem auto 2.2rem;
}
.philo .philo__text {
	max-width: 60ch;
	margin: 0 auto;
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
}
.philo .philo__saeulen {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 0.4rem 2.5rem;
	margin: 3rem 0 0;
	color: var(--wp--preset--color--primary);
}
/* Seit dem 29.08.2026 sind die vier Standbeine Links auf ihre Seiten. Sie
   behalten das Aussehen der Serienzeile — die Haarlinie kommt erst beim
   Ueberfahren, wie bei `.tlink` ueberall sonst. Zielgroesse ueber das
   Innenabstands-Polster, nicht ueber die Schriftgroesse (WCAG 2.5.8). */
.philo__saeulen a {
	display: inline-block;
	padding: 0.25em 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.35rem;
	letter-spacing: 0.02em;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s var(--wp--custom--ease-out),
	            color 0.3s var(--wp--custom--ease-out);
}
.philo__saeulen a:hover,
.philo__saeulen a:focus-visible {
	color: var(--wp--preset--color--accent-text);
	border-bottom-color: var(--wp--preset--color--accent-text);
}
.philo__saeulen i { color: var(--wp--preset--color--accent-text); font-style: normal; }

/* ================================================================
   Startseite — Kapitelpaar 01 / 02

   Die Deckkraft der Gold-Grossziffern haengt an einer Variablen und wird
   ueber die FARBE gesetzt, nicht ueber opacity — sonst zoege .reveal.is-in
   sie auf 1 (der Fehler aus den Entwuerfen). Stand: volle Deckkraft, wie
   die Kundin sie in allen drei freigegebenen Entwuerfen gesehen hat; die
   blasse Variante ist ein Wert entfernt (Entscheid Jakob offen).

   Zwei Goldwerte, weil WCAG 1.4.3 zwei Schwellen kennt: Das Marken-Gold
   #B0883E erreicht auf hellem Beige nur 2,4–2,9:1 und traegt dort weder
   die 4,5:1 fuer normalen noch die 3:1 fuer grossen Text. Auf dunklem
   Grund liegt es bei 5,1:1 und bleibt unveraendert.
     Grossziffern/Uhrzeiten (>= 24px) → accent-large #9D7937 = 3,0:1
     Kicker und Kleintext            → accent-text  #795E2B = 4,6:1
   ================================================================ */

:root { --degusto-ziffer-alpha: 1; }

.kapitel__ziffer,
.balken__ziffer {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.8rem, 5.5vw, 5rem);
	line-height: 1;
	margin: 0 0 1rem;
}
/* 01 steht auf hellem Beige, 02 im dunklen Balken. */
.kapitel__ziffer { color: rgba(157, 121, 55, var(--degusto-ziffer-alpha)); }
.balken__ziffer { color: rgba(176, 136, 62, var(--degusto-ziffer-alpha)); }

.tlink {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.82rem; font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--button);
	text-transform: uppercase;
	padding-bottom: 0.35em;
	position: relative;
}
.tlink::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
	background: currentColor;
	transform: scaleX(1); transform-origin: right;
	transition: transform 0.6s var(--wp--custom--ease-out);
}
.tlink:hover::after { transform: scaleX(0); }
.tlink__pfeil { display: inline-block; transition: transform 0.5s var(--wp--custom--ease-out); }
.tlink:hover .tlink__pfeil { transform: translateX(6px); }

/* --- 01: Bild links, Text rechts --- */
.kapitel {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 5.5rem);
}
/* Gespiegelt: Text links, Bild rechts — die schmalere Spalte traegt den Text. */
.kapitel--gespiegelt { grid-template-columns: 0.85fr 1.15fr; }

.kapitel__bild {
	position: relative; overflow: hidden;
	border-radius: var(--wp--custom--radius);
	aspect-ratio: 4 / 5;
	margin: 0;
}
.kapitel__bild img {
	width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.02);
	transition: transform 1.4s var(--wp--custom--ease-out);
}
.kapitel__bild:hover img { transform: scale(1.07); }

.kapitel .kapitel__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.3rem; }
.kapitel .kapitel__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.08;
	margin: 0 0 1.6rem;
}
.kapitel .kapitel__absatz {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--body);
	max-width: 44ch;
	margin: 0 0 2rem;
}

/* --- 02: der dunkle Balken, randlos --- */
.balken {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 78vh;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--section);
}
.balken__text {
	display: flex; flex-direction: column;
	justify-content: center; align-items: flex-start;
	padding: var(--wp--preset--spacing--balken);
}
.balken .balken__kicker { color: var(--wp--preset--color--accent-light); margin: 0 0 1.2rem; }
.balken .balken__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	margin: 0 0 1.6rem;
}
.balken .balken__absatz {
	color: var(--wp--custom--on-dark--text);
	font-size: var(--wp--preset--font-size--body);
	max-width: 42ch;
	margin: 0 0 2rem;
}
.balken__bild { position: relative; overflow: hidden; }
.balken__bild img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.03);
	transition: transform 1.6s var(--wp--custom--ease-out);
}
.balken:hover .balken__bild img { transform: scale(1.08); }

/* ================================================================
   Startseite — Genuss zum Mitnehmen (zwei Karten)
   ================================================================ */

.welten__kopf {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 2rem; flex-wrap: wrap;
	margin-bottom: 3.2rem;
}
.welten .welten__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1rem; }
.welten .welten__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.05;
	margin: 0;
}
.welten .welten__lead {
	max-width: 34ch; margin: 0;
	color: var(--wp--preset--color--primary-soft);
}

.welten__grid {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 1.6vw, 1.6rem);
}
.welt {
	position: relative; overflow: hidden;
	border-radius: var(--wp--custom--radius);
	aspect-ratio: 16 / 11;
	display: flex; align-items: flex-end;
	color: var(--wp--preset--color--section);
	isolation: isolate;
}
.welt__bg {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.03);
	transition: transform 1.5s var(--wp--custom--ease-out);
}
.welt::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--wp--custom--scrim--card);
}
.welt:hover .welt__bg,
.welt:focus-visible .welt__bg { transform: scale(1.09); }

.welt__body { display: block; padding: clamp(1.4rem, 2.5vw, 2.4rem); width: 100%; }
.welt__titel {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.7rem, 2.6vw, 2.4rem);
	line-height: var(--wp--custom--leading--display);
}
.welt__text {
	display: block;
	font-size: 0.95rem; font-weight: 300;
	color: rgba(242, 233, 222, 0.85);
	max-width: 34ch;
	max-height: 0; opacity: 0; overflow: hidden;
	transition: max-height 0.7s var(--wp--custom--ease-out),
	            opacity 0.7s var(--wp--custom--ease-out),
	            margin-top 0.7s var(--wp--custom--ease-out);
}
.welt:hover .welt__text,
.welt:focus-visible .welt__text { max-height: 8rem; opacity: 1; margin-top: 0.7rem; }
.welt__mehr {
	display: inline-block; margin-top: 1rem;
	font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--wp--preset--color--accent-light);
}

/* ================================================================
   Startseite — Atmosphäre (Parallax)
   ================================================================ */

.atmo {
	position: relative;
	min-height: 76vh;
	display: flex; align-items: center; justify-content: center;
	text-align: center;
	color: var(--wp--preset--color--section);
	overflow: hidden;
}
.atmo__bg {
	position: absolute; inset: -12% 0; z-index: 0;
	background-size: cover; background-position: center;
	will-change: transform;
}
.atmo::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: rgba(14, 19, 13, 0.56);
}
.atmo .atmo__zitat {
	position: relative; z-index: 2;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.7rem, 4vw, 3.4rem);
	line-height: var(--wp--custom--leading--quote);
	max-width: 20ch;
	margin: 0;
	padding: 0 var(--wp--custom--gutter);
}

/* ================================================================
   Startseite — Gutschein (dunkel)
   ================================================================ */

.gutschein {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--section);
}
.gutschein__inner {
	display: grid; grid-template-columns: 1fr 1fr;
	align-items: center; gap: clamp(2rem, 5vw, 5rem);
}
.gutschein__bild {
	overflow: hidden; border-radius: var(--wp--custom--radius);
	aspect-ratio: 5 / 4; margin: 0;
}
.gutschein__bild img {
	width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.02);
	transition: transform 1.4s var(--wp--custom--ease-out);
}
.gutschein:hover .gutschein__bild img { transform: scale(1.07); }
.gutschein .gutschein__kicker { color: var(--wp--preset--color--accent-light); margin: 0 0 1.3rem; }
.gutschein .gutschein__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.08;
	margin: 0 0 1.5rem;
}
.gutschein .gutschein__absatz {
	color: rgba(242, 233, 222, 0.82);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--lead);
	max-width: 40ch;
	margin: 0 0 2.2rem;
}

/* ================================================================
   Startseite — Reservierung
   ================================================================ */

.reservierung { text-align: center; }
.reservierung .reservierung__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.4rem; }
.reservierung .reservierung__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--hero);
	line-height: var(--wp--custom--leading--hero);
	max-width: 16ch;
	margin: 0 auto 2.6rem;
}
.reservierung .reservierung__meta {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 0.6rem 2.4rem;
	margin: 3rem 0 0;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.92rem; letter-spacing: 0.02em;
}
.reservierung__meta b { font-weight: 500; color: var(--wp--preset--color--primary); }
.reservierung__meta a:hover { color: var(--wp--preset--color--accent); }

/* ================================================================
   Startseite — Laufband
   ================================================================ */

.marquee {
	border-block: 1px solid var(--wp--preset--color--hairline);
	overflow: hidden;
	padding-block: 1.5rem;
}
/* Das Laufband lief nicht durch, sondern hatte ein sichtbares Ende. Zwei
   Ursachen, beide am 13.08.2026 am Staging gemessen:

   Erstens der Abstand ZWISCHEN den beiden Haelften. Der Zug war 1846 px
   breit (2 x 903 px Inhalt plus 40 px Abstand), verschoben wurde um -50 %,
   also 923 px. Eine Haelfte misst aber 943 px — bei jedem Durchlauf sprang
   das Band um die halbe Luecke. Der Abstand gehoert deshalb IN die Haelfte
   (padding-right) und nicht zwischen die Haelften (gap).

   Zweitens die Laenge. Nach der Verschiebung blieben rechts nur noch 923 px
   Inhalt stehen — auf einem 1440-px-Fenster also 517 px leere Flaeche. Eine
   Haelfte muss breiter sein als das Fenster. Der Text steht jetzt dreimal je
   Haelfte, das sind 2829 px und traegt bis zu sehr breiten Bildschirmen. */
.marquee__zeile {
	display: flex; gap: 0;
	white-space: nowrap; width: max-content;
	animation: degusto-marquee 34s linear infinite;
}
.marquee__teil {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem; letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary-soft);
	display: flex; align-items: center; gap: 2.5rem;
	padding-right: 2.5rem;
}
.marquee__teil img { height: 20px; width: auto; opacity: 0.75; }
@keyframes degusto-marquee { to { transform: translateX(-50%); } }

/* ================================================================
   Unterseiten — Sub-Hero
   Niedriger als der Startseiten-Hero, ein Standbild statt Ken-Burns.
   ================================================================ */

.shero {
	position: relative;
	height: 72svh; min-height: 520px;
	overflow: hidden;
	display: flex; align-items: flex-end;
}
.shero__media { position: absolute; inset: 0; background: var(--wp--preset--color--primary-deep); }
.shero__media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.06);
	animation: degusto-shero 2.2s var(--wp--custom--ease-out) forwards;
}
@keyframes degusto-shero { to { transform: scale(1); } }

/* Zwei Verläufe übereinander.
   Der senkrechte aus dem Entwurf trägt Hochformat-Motive, deren untere Hälfte
   ohnehin dunkler ist. Bei einem hellen Querformat — auf der Catering-Seite
   die getragene Antipasti-Platte über heller Tischplatte — verschwindet der
   goldene Kicker darin. Der zweite Verlauf dunkelt nur die linke Textspalte
   ab und läuft zur Bildmitte aus; auf den bereits abgenommenen Sub-Heroes von
   Restobar und Feinkost ist er kaum wahrnehmbar. */
.shero__scrim {
	position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(16, 22, 15, 0.42) 0%, rgba(16, 22, 15, 0.12) 38%, rgba(16, 22, 15, 0) 62%),
		var(--wp--custom--scrim--sub);
}
/* Für helle Motive. Der Verlauf oben ist für die dunklen Innenraumbilder
   gerechnet; auf einem Foto mit Tageslicht und hellem Haar steht die weiße
   Überschrift stellenweise auf fast weißem Grund. Hier deshalb kräftiger und
   weiter nach rechts reichend — das Bild bleibt erkennbar, der Text lesbar.
   Gesetzt wird die Klasse am Baustein (siehe inc/bausteine.php), nicht an der
   Seite: Sie beschreibt das Motiv, nicht den Ort. */
.shero--hell .shero__scrim {
	background:
		linear-gradient(90deg, rgba(16, 22, 15, 0.72) 0%, rgba(16, 22, 15, 0.46) 42%, rgba(16, 22, 15, 0.12) 78%),
		linear-gradient(180deg, rgba(16, 22, 15, 0.34) 0%, rgba(16, 22, 15, 0.10) 45%, rgba(16, 22, 15, 0.42) 100%);
}
.shero__inner {
	position: relative; z-index: 2; width: 100%;
	padding: 0 var(--wp--custom--gutter) clamp(2.6rem, 6vh, 5rem);
	color: var(--wp--preset--color--section);
}
.shero .shero__kicker {
	color: var(--wp--preset--color--accent-light);
	margin: 0 0 1.3rem;
	opacity: 0;
	animation: degusto-rise 1s 0.25s var(--wp--custom--ease-out) forwards;
}
.shero .shero__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(2.6rem, 6vw, 5.6rem);
	line-height: 1.04;
	max-width: 18ch;
	margin: 0;
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.28);
	opacity: 0; transform: translateY(36px);
	animation: degusto-rise 1.15s 0.4s var(--wp--custom--ease-out) forwards;
}
.shero .shero__sub {
	margin: 1.6rem 0 0;
	max-width: 44ch;
	color: rgba(242, 233, 222, 0.9);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--lead);
	opacity: 0;
	animation: degusto-rise 1.15s 0.6s var(--wp--custom--ease-out) forwards;
}

/* ================================================================
   Unterseiten — Intro und Band
   ================================================================ */

.intro { text-align: center; }
.intro__krone { height: 42px; width: auto; margin: 0 auto 2.2rem; opacity: 0.9; }
.intro .intro__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.08;
	margin: 0 auto 1.8rem;
}
.intro .intro__text {
	max-width: 58ch; margin: 0 auto;
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
}

/* Woerterbuch-Eintrag (Restobar). Uebernimmt Krone, Tinos-Grossschrift und
   Haarlinie aus dem Intro, damit die Seite ihre Sprache behaelt — der Eintrag
   steht dort, wo bis zum 18.08.2026 das Intro stand, und ersetzt es. */
.definition { text-align: center; }
.definition__krone { height: 42px; width: auto; margin: 0 auto 2.2rem; opacity: 0.9; }
.definition .definition__wort {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.08;
	margin: 0 0 0.9rem;
}
.definition__trenn {
	color: var(--wp--preset--color--accent-large);
	font-weight: 300;
	padding-inline: 0.05em;
}
.definition .definition__lemma {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--kicker);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-text);
	margin: 0 0 2.4rem;
}
/* IPA bleibt klein und ungesperrt — siehe Kommentar an degusto_definition(). */
.definition__lemma i { text-transform: none; letter-spacing: 0; }
.definition .definition__text {
	max-width: 58ch; margin: 0 auto;
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
}
.definition .definition__syn {
	max-width: 42ch;
	margin: 2.4rem auto 0;
	padding-top: 1.6rem;
	border-top: 1px solid var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--primary-soft);
	font-weight: 300;
}
.definition__syn .kicker {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--accent-text);
}

.band {
	background: var(--wp--preset--color--section-deep);
	border-block: 1px solid var(--wp--preset--color--hairline);
	text-align: center;
	padding-block: clamp(3rem, 6vw, 4.5rem);
}
.band .band__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1rem; }
.band .band__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: 1.12;
	max-width: 26ch;
	margin: 0 auto 1rem;
}
.band .band__text {
	color: var(--wp--preset--color--primary-soft);
	font-weight: 300;
	max-width: 52ch; margin: 0 auto;
}

/* ================================================================
   Restobar — Tageszeiten-Kapitel
   Drei Kapitel wechseln Grund und Bildseite: hell, zweite Beige-Stufe,
   dunkler Balken. Daraus entsteht der Bogen von 9 bis 18 Uhr.
   ================================================================ */

.tag {
	display: grid; grid-template-columns: 1fr 1fr;
	min-height: 72vh;
}
.tag__bild { position: relative; overflow: hidden; }
.tag__bild img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.03);
	transition: transform 1.6s var(--wp--custom--ease-out);
}
.tag:hover .tag__bild img { transform: scale(1.08); }

.tag__text {
	display: flex; flex-direction: column;
	justify-content: center; align-items: flex-start;
	padding: var(--wp--preset--spacing--balken);
}
.tag__zeit {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.6rem, 5vw, 4.6rem);
	line-height: 1;
	/* Morgen und Mittag stehen auf Beige, der Abend im dunklen Balken. */
	color: rgba(157, 121, 55, var(--degusto-ziffer-alpha));
	margin: 0 0 1rem;
}
/* Tageszeit statt Uhrzeit: „zum Sonnenuntergang" braucht in der vollen
   Display-Größe zwei Zeilen und wiegt dann schwerer als die Überschrift
   darunter. Eine Stufe kleiner, damit die Rangfolge stimmt. Die Grenze
   zieht die Ziffer, nicht die Länge — siehe patterns/page-restobar.php. */
.tag .tag__zeit--wort {
	font-size: clamp(1.7rem, 3vw, 2.7rem);
	line-height: 1.08;
}
.tag .tag__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.2rem; }
.tag .tag__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	margin: 0 0 1.5rem;
}
.tag .tag__absatz {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--body);
	max-width: 40ch;
	margin: 0;
}

.tag--gespiegelt .tag__bild { order: 2; }
.tag--mittel { background: var(--wp--preset--color--section-deep); }
.tag--dunkel {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--section);
}
/* Die letzte Stufe des Tagesbogens. Seit dem 16.08.2026 sind alle sieben
   Stationen dasselbe Kapitel, und die Reihe braucht dafür einen Ton unter
   dem dunklen Balken — sonst enden Golden Hour, Abendessen und Late Night
   auf demselben Grund und der Bogen läuft am Ende flach aus. */
.tag--nacht {
	background: var(--wp--preset--color--primary-deep);
	color: var(--wp--preset--color--section);
}
.tag--dunkel .tag__kicker,
.tag--nacht .tag__kicker { color: var(--wp--preset--color--accent-light); }
.tag--dunkel .tag__zeit,
.tag--nacht .tag__zeit { color: rgba(176, 136, 62, var(--degusto-ziffer-alpha)); }
.tag--dunkel .tag__absatz,
.tag--nacht .tag__absatz { color: var(--wp--custom--on-dark--text); }

/* ================================================================
   Restobar — Karten als gestaltete Cover

   FALLE: Die Hintergrundbilder brauchen die eigene Klasse .cover__bg.
   Ein Selektor auf .cover img wuerde auch die Krone absolut setzen und
   Bildfragmente am Kachelrand erzeugen (Fund vom 22.07.).
   ================================================================ */

.karten__kopf { text-align: center; margin-bottom: 3.2rem; }
.karten .karten__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.karten .karten__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	margin: 0;
}
.karten__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 1.6vw, 1.6rem); }

.cover {
	position: relative; overflow: hidden;
	border-radius: var(--wp--custom--radius);
	aspect-ratio: 4 / 5;
	display: flex; flex-direction: column;
	align-items: center; justify-content: flex-end;
	text-align: center;
	color: var(--wp--preset--color--section);
	isolation: isolate;
	padding: clamp(1.8rem, 3vw, 3rem);
}
.cover__bg {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.03);
	transition: transform 1.5s var(--wp--custom--ease-out);
}
.cover::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--wp--custom--scrim--cover);
}
/* Ohne hinterlegtes PDF ist die Kachel kein Link — dann darf sie auch nicht
   wie einer wirken: kein Zeigefinger, keine Bewegung beim Überfahren. */
.cover--ohne-ziel { cursor: default; }
.cover--ohne-ziel .cover__mehr { opacity: 0.75; }

.cover:hover .cover__bg,
.cover:focus-visible .cover__bg { transform: scale(1.09); }

.cover__krone { height: 34px; width: auto; margin-bottom: 1rem; opacity: 0.95; }
.cover__titel {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.8rem, 2.6vw, 2.5rem);
	letter-spacing: 0.02em;
	line-height: var(--wp--custom--leading--display);
}
.cover__text {
	display: block;
	font-weight: 300; font-size: 0.95rem;
	color: rgba(242, 233, 222, 0.85);
	max-width: 30ch; margin-top: 0.5rem;
}
.cover__mehr {
	display: inline-block; margin-top: 1.2rem;
	font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--wp--preset--color--accent-light);
}
.karten .karten__notiz {
	text-align: center; margin: 2rem 0 0;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.92rem; font-weight: 300;
}

/* --- Getraenke: Text statt Kachel (18.08.2026) ---
   Wein- und Getraenkekarte sind ausgeblendet; an ihrer Stelle steht eine
   Auskunft. Bewusst NICHT als vierte Kachel gestaltet — eine Kachel in dieser
   Reihe sieht aus wie ein Dokument, und jeder wuerde daraufklicken. */
.karten__getraenke {
	margin: clamp(2.4rem, 4.5vw, 3.4rem) auto 0;
	max-width: 64ch; text-align: center;
	padding-top: clamp(1.8rem, 3.5vw, 2.6rem);
	border-top: 1px solid var(--wp--preset--color--hairline);
}
.karten .karten__getraenke-titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
	line-height: var(--wp--custom--leading--display);
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.7rem;
}
.karten__getraenke-text {
	margin: 0; color: var(--wp--preset--color--primary-soft);
	font-size: 0.98rem; line-height: 1.7;
}

/* --- Getraenke: drei Bilder unter der Auskunft (01.09.2026) ---
   Sophias Bildsatz aus „Webseite - Part 3". Die Reihe steht NEBEN dem
   Textblock und nicht darin: .karten__getraenke ist auf 64ch begrenzt, drei
   Kacheln brauchen mehr Platz.

   BEWUSST OHNE UMBRUCHREGEL. Die Kacheln tragen keinen Text, sie duerfen
   deshalb auch auf 360 px schmal sein (rund 100 px je Bild). Wer hier doch
   eine Media Query ergaenzt, setzt sie hinter diese Regel — eine Media Query
   erhoeht die Spezifitaet nicht (siehe Abschnitt „Umbrueche"). */
.getraenke__bilder {
	list-style: none; padding: 0;
	margin: clamp(1.5rem, 3vw, 2.2rem) auto 0;
	max-width: 46rem;
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(0.6rem, 1.5vw, 1rem);
}
.getraenke__bilder li { margin: 0; }
.getraenke__bilder img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 3 / 4; object-fit: cover;
	border-radius: var(--wp--custom--radius);
}

/* ================================================================
   Feinkost — Balken und Abschluss

   Das Sortimentsraster (.sortiment__grid) ist am 14.08.2026 entfallen,
   samt seiner Regel hier und der Umschaltung in der 900er-Abfrage: Die
   Kundin will die Auflösung des Sortiments nicht mehr, die Klasse steht
   in keinem Pattern mehr. Was die Seite stattdessen zeigt, steht im
   Abschnitt FEINKOST am Dateiende.
   ================================================================ */

/* An der Stelle der Grossziffer steht auf der Feinkost-Seite Text. */
.balken__marke {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.4rem, 4.6vw, 4.2rem);
	line-height: 1;
	letter-spacing: 0.04em;
	color: rgba(176, 136, 62, var(--degusto-ziffer-alpha));
	margin: 0 0 1rem;
}

/* Feinkost — Abschluss mit zwei Handlungen */
.mitnehmen { text-align: center; }
/* Seit dem 10.09.2026 mit Bild: das Antipasti-Brett, das an der Theke
   entsteht — Sophias Foto „für meine letzte Lücke bei Feinkost ganz unten".
   Breit und flach, damit der Abschluss ein Abschluss bleibt und nicht zur
   zweiten Bildsektion wird; auf dem Telefon hoeher, sonst bliebe vom Brett
   ein Streifen. */
.mitnehmen__bild { margin: 0 auto clamp(2.4rem, 4.5vw, 3.6rem); }
.mitnehmen__bild img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 21 / 9; object-fit: cover; object-position: center 45%;
	border-radius: var(--wp--custom--radius);
}
@media (max-width: 700px) {
	.mitnehmen__bild img { aspect-ratio: 4 / 3; }
}
.mitnehmen .mitnehmen__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.3rem; }
.mitnehmen .mitnehmen__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.08;
	max-width: 22ch; margin: 0 auto 1.6rem;
}
.mitnehmen .mitnehmen__text {
	color: var(--wp--preset--color--primary-soft);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--lead);
	max-width: 52ch; margin: 0 auto 2.4rem;
}
.mitnehmen__reihe { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin: 0; }

.btn--umriss {
	border: 1px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.btn--umriss:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--section);
	transform: translateY(-2px);
}

/* ================================================================
   Fuss
   ================================================================ */

.foot {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--section);
	padding: clamp(3.5rem, 7vw, 6rem) var(--wp--custom--gutter) 2.5rem;
}
.foot__grid {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem;
	max-width: 1300px; margin-inline: auto;
}
.foot__logo { height: 56px; width: auto; margin-bottom: 1.4rem; }
.foot .foot__marke p {
	color: var(--wp--custom--on-dark--text-soft);
	font-size: 0.9rem; font-weight: 300; max-width: 34ch; margin: 0;
}
.foot .foot__titel {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.74rem; font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--foot-heading);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-light);
	margin: 0 0 1.2rem;
	line-height: 1.4;
}
.foot__link {
	display: block;
	color: var(--wp--custom--on-dark--text);
	font-size: 0.94rem; padding: 0.32em 0;
	transition: color 0.4s var(--wp--custom--ease);
}
.foot__link:hover,
.foot__link[aria-current="page"] { color: var(--wp--preset--color--accent-light); }

.foot__bot {
	max-width: 1300px; margin: 3.5rem auto 0; padding-top: 1.8rem;
	border-top: 1px solid var(--wp--preset--color--hairline-light);
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
	color: var(--wp--custom--on-dark--muted); font-size: 0.8rem;
}
.foot__bot p { margin: 0; }
/* Rechts, auch wenn links keine Sprachliste steht (ausgeblendet seit 11.09.2026). */
.foot__bot .foot__copy { margin-left: auto; }
/* Sprachliste im Fuss. Seit dem 18.08.2026 eine echte Liste statt einer
   Folge von <span> — sie kann jetzt Links tragen (WPML). Die Aufzaehlung
   bleibt unsichtbar, damit sich am Aussehen nichts aendert. */
.foot__lang {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 0 1.1rem;
}
.foot__lang span,
.foot__lang a { letter-spacing: 0.08em; }
.foot__lang a {
	color: inherit;
	transition: color 0.4s var(--wp--custom--ease);
}
.foot__lang a:hover,
.foot__lang a:focus-visible { color: var(--wp--preset--color--accent-light); }
.foot__lang .is-aktiv { color: var(--wp--preset--color--accent-light); font-weight: 500; }

/* Der Umschalter im Kopf: nur die Kenner, in der Zeile neben dem Menue.
   Bleibt unsichtbar, solange es nur eine Sprache gibt — dort steht dann
   weiter das schlichte .hdr__lang. */
.hdr__lang--liste {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: 0.55rem;
}
.hdr__lang--liste a { color: inherit; transition: color 0.4s var(--wp--custom--ease); }
.hdr__lang--liste a:hover,
.hdr__lang--liste a:focus-visible { color: var(--wp--preset--color--accent-light); }
.hdr__lang--liste [aria-current="true"] { color: var(--wp--preset--color--accent-light); }

/* --- Social-Kanaele in der Markenspalte (18.08.2026) ---
   Die Zielflaeche ist 44 x 44 px, obwohl das Icon nur 20 px misst: Auf dem
   Telefon wird das mit dem Daumen getroffen (WCAG 2.5.5). Der negative
   Aussenabstand links haelt das erste Icon trotz seines Innenabstands in der
   Flucht des Textes darueber. */
.foot__social {
	list-style: none; margin: 1.6rem 0 0 -0.7rem; padding: 0;
	display: flex; gap: 0.2rem;
}
.foot__social-link {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	color: var(--wp--custom--on-dark--text);
	transition: color 0.4s var(--wp--custom--ease);
}
.foot__social-link:hover,
.foot__social-link:focus-visible { color: var(--wp--preset--color--accent-light); }
.foot__social-icon { display: block; }

/* ================================================================
   Umbrueche — Werte aus dem freigegebenen Entwurf
   ================================================================ */

/* Der Kopf schaltet frueher um als der Rest des Layouts.
   Grund (gemessen 15.08.2026): Mit den beiden neuen Menuepunkten
   "Veranstaltungen" und "Geschenkideen" braucht die Navigation 1014 px. Bei
   900 px Umschaltpunkt stand sie zwischen 901 und 1024 px ueber den rechten
   Rand hinaus — auf jeder der dreizehn Seiten. Die uebrigen Regeln der
   900er-Schwelle bleiben unberuehrt; nur Navigation und Burger wechseln
   frueher. Bei 1440 px, der abgenommenen Breite, aendert sich nichts.

   Falls das Menue weiter waechst: hier nachziehen, nicht die Abstaende
   zusammendruecken — der Kopf traegt die Wortabstaende des Entwurfs. */
@media (max-width: 1100px) {
	.hdr__nav { display: none; }
	.burger { display: block; }
	/* Der Burger ist ab hier das einzige Bedienelement des Kopfes und wird
	   auch mit Maus angetippt — deshalb die volle Zielgroesse, nicht erst
	   auf Touchgeraeten. */
	.burger { width: 44px; height: 44px; margin-right: -0.5rem; }
	.burger__line { left: 10px; }
}

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

	.kapitel { grid-template-columns: 1fr; gap: 2rem; }
	.kapitel--gespiegelt .kapitel__text { order: 0; }
	.kapitel__bild { aspect-ratio: 3 / 2; }

	.balken { grid-template-columns: 1fr; }
	.balken__bild { order: -1; min-height: 56vh; }

	.welten__grid { grid-template-columns: 1fr; }
	/* Auf Touch-Geraeten gibt es kein Ueberfahren — Beschreibung dauerhaft zeigen. */
	.welt__text { max-height: 8rem; opacity: 1; margin-top: 0.7rem; }
	/* Weil die Beschreibung hier dauerhaft steht, braucht die Kachel mehr
	   Textraum als am Desktop — der Verlauf des Entwurfs wird erst ab 30 %
	   Hoehe dunkel und laesst Titel und Text sonst im hellen Bildbereich
	   stehen (auf dem Mobil-Frame vom 04.08. deutlich zu sehen). */
	.welt::after {
		background: linear-gradient(180deg,
			rgba(16, 22, 15, 0) 8%,
			rgba(16, 22, 15, 0.55) 45%,
			rgba(16, 22, 15, 0.92) 100%);
	}

	.gutschein__inner { grid-template-columns: 1fr; }

	.atmo__bg { background-attachment: scroll; }

	/* Unterseiten: Bild immer zuerst, damit der Tagesbogen lesbar bleibt. */
	.tag, .tag--gespiegelt { grid-template-columns: 1fr; }
	.tag__bild { order: -1 !important; min-height: 52vh; }
	/* .karten__grid: der Umbruch steht im Abschnitt „Restobar — Umbrueche".
	   Hier waere er wirkungslos, weil das Sechser-Raster weiter unten steht. */
}

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

	/* Der Tagesbogen lebt vom Wechsel Bild/Text. Auf schmalen Geräten stapeln
	   sich beide, und ein halber Bildschirm Bild vor jedem Absatz macht die
	   Seite unnötig lang — deshalb dort flacher. */
	.tag__bild { min-height: 42vh !important; }
	.balken__bild { min-height: 44vh; }
}

/* ================================================================
   Catering

   Baut auf den vorhandenen Formen auf: Sub-Hero und Intro wie Restobar
   und Feinkost, der Anlässe-Block ist der bekannte dunkle Balken mit
   einer Liste statt eines Absatzes. Eigen sind nur die drei Versprechen
   und die beiden Aufstellungen.

   Preise stehen bewusst nicht im Markup (siehe patterns/page-catering.php).
   `.pos__preis` und die Preisspalten sind trotzdem gestaltet, damit die
   Zahlen später ohne weiteren Eingriff erscheinen können.
   ================================================================ */

/* --- Die drei Versprechen --- */
.versprechen__grid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
}
.vsp__nr {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.4rem; line-height: 1;
	color: var(--wp--preset--color--accent-large);
	margin: 0 0 1rem;
}
.versprechen .vsp__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.4rem, 2vw, 1.75rem);
	line-height: 1.15;
	margin: 0 0 0.9rem;
}
/* Die kurze Zeile ist der Wortlaut des Flyers, der ausführliche Satz darunter
   die Ausformulierung für die Website. */
.vsp__kurz {
	color: var(--wp--preset--color--accent-text);
	font-size: 0.95rem; font-style: italic;
	margin: 0 0 0.7rem; max-width: 34ch;
}
.vsp__text {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--body);
	margin: 0; max-width: 34ch;
}

/* --- Das Paket --- */
.paket__kopf { text-align: center; margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.paket .paket__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }

/* KICKER UND UEBERSCHRIFT GETAUSCHT (Sophia, 04.09.2026): Der Name des
   Pakets steht jetzt gross, die Anzahl der Teile klein darunter. Begruendung
   im Pattern. `.brand` behaelt seine eigene Sperrung — in einer Ueberschrift
   dieser Groesse traegt sie, anders als im Fliesstext, wo DEGUSTO am
   02.09. von 0.14em auf 0.04em zurueckgenommen werden musste. */
.paket .paket__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	max-width: 22ch; margin: 0 auto 0.6rem;
}
.paket__unterzeile {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--kicker);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-text);
	margin: 0 auto 1.4rem;
}
.paket__lead {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
	max-width: 56ch; margin: 0 auto;
}

/* DREI STATT ZWEI SPALTEN (Sophia, 04.09.2026): „Können die drei auch kleiner
   und nebeneiner platziert werden?" Bei zwei Spalten standen Canapés und
   Spieße oben und die Grissini allein darunter — im Raster liest sich das wie
   ein Nachtrag, nicht wie der dritte von drei gleichrangigen Teilen. Die
   Wahl (Salate oder Quiche) hat mit `.paket__wahlblock` ihr eigenes Raster
   und bleibt zweispaltig; das ist ihr Punkt vom 03.09. („Hier wird nicht
   klar, dass es Salat oder Quiche ist") und bleibt unberuehrt. */
.paket__liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.4vw, 2.4rem); }

/* Drei Spalten erst ab 1100 px. Gemessen mit `pruefe-responsive.js`: Bei
   901 bis 1024 px sind die Kacheln 259 px breit, und die Zutatenzeile der
   Canapés („Parmaschinken, Serranoschinken, Fenchelsalami, …") laeuft dort
   auf 1,7 Woerter je Zeile — drei Zeilen Flatterrand fuer eine Aufzaehlung.
   Dazwischen zwei Spalten waeren keine Loesung: Dann steht Grissini wieder
   allein, und genau das war Sophias Einwand.
   Diese Regel steht bewusst DIREKT hinter der Basisregel und nicht unten im
   Sammelblock „Umbrueche" — eine Media Query erhoeht die Spezifitaet nicht,
   und der Block bei Zeile 1865 wuerde sie schlagen (siehe bauplan.md). */
@media (max-width: 1099px) {
	.paket__liste { grid-template-columns: 1fr 1fr; }
}

/* --- Preis und Bilder am Paket (16.08.2026) --- */

/* Der Preis stand bis heute nirgends auf der Seite, und „pro Person" nur
   klein an jedem einzelnen Baustein. Beides gehört nach oben: Wer wissen
   will, was das Paket kostet, soll nicht vier Kacheln absuchen. */
.paket__preis {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	line-height: 1;
	color: var(--wp--preset--color--accent-text);
	margin: 0 0 1rem;
}
.paket__preis-je {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--kicker);
	text-transform: uppercase;
	vertical-align: middle;
	margin-left: 0.5rem;
	color: var(--wp--preset--color--primary-soft);
}

.pos__bild {
	display: block;
	width: 100%; height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin-bottom: 1.2rem;
}
/* Für Grissini gibt es im ganzen Bestand keine Aufnahme. Statt die Kachel
   kürzer stehen zu lassen als ihre Nachbarin, hält die Krone die Höhe —
   dieselbe Lösung wie in den Bestellformularen. Kommt ein Foto, verschwindet
   der Platzhalter von selbst. */
.pos--ohne-bild::before {
	content: "";
	display: block;
	aspect-ratio: 16 / 9;
	margin-bottom: 1.2rem;
	background:
		url("assets/img/brand/krone-beige.png") center / 74px no-repeat,
		var(--wp--preset--color--section-deep);
	opacity: 0.55;
}
.pos {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: 1.5rem;
}
.pos__kopf {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 1rem; margin-bottom: 1rem;
}
.paket .pos__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.3rem, 1.8vw, 1.6rem);
	line-height: 1.1;
	margin: 0;
}
.pos__menge {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--kicker);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-text);
	margin: 0; white-space: nowrap;
}
.pos__zeilen { list-style: none; margin: 0; padding: 0; }
.pos__zeilen li {
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.95rem; line-height: 1.55;
	padding: 0.28em 0 0.28em 1.1em; position: relative;
}
.pos__zeilen li::before {
	content: "·"; position: absolute; left: 0;
	color: var(--wp--preset--color--accent-large);
}
/* Die Wahl zwischen Salat und Quiche (18.08.2026). Zwischen Aufzaehlung und
   Preis, mit goldener Haarlinie links — sie ist eine Abweichung von der
   Liste darueber und soll auch so aussehen. */
.pos__wahl {
	margin: 1rem 0 0;
	padding: 0.7em 0 0.7em 1em;
	border-left: 2px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	font-size: 0.92rem; line-height: 1.55;
}

.pos__preis {
	display: block; margin-top: 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
	color: var(--wp--preset--color--accent-large);
}
.paket__notiz {
	margin: clamp(2.4rem, 4vw, 3.4rem) auto 0;
	max-width: 62ch; text-align: center;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.95rem; line-height: 1.6;
}

/* --- Anlässe: der dunkle Balken mit Liste statt Absatz --- */
.anlaesse__liste { list-style: none; margin: 0; padding: 0; max-width: 44ch; }
.anlaesse__liste li {
	padding: 0.85em 0;
	border-top: 1px solid var(--wp--preset--color--hairline-light);
}
.anlaesse__liste li:last-child { border-bottom: 1px solid var(--wp--preset--color--hairline-light); }
.anlaesse__titel {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.2rem; line-height: 1.2;
	color: var(--wp--preset--color--section);
}
.anlaesse__text {
	display: block; margin-top: 0.3rem;
	color: var(--wp--custom--on-dark--text);
	font-size: 0.92rem; line-height: 1.5;
}

/* ================================================================
   Restobar — Erlebnisraum (18.08.2026, anstelle des Specials-Bands)
   ================================================================
   Baut auf .balken auf und uebernimmt dessen Raster, Farben und
   Bildverhalten. Eigen sind nur die Liste der Anlaesse, der Knopf und die
   Notiz zur Gruppengroesse. */
.erlebnis__liste { list-style: none; margin: 0 0 2rem; padding: 0; max-width: 44ch; }
.erlebnis__liste li {
	padding: 0.8em 0;
	border-top: 1px solid var(--wp--preset--color--hairline-light);
}
.erlebnis__liste li:last-child { border-bottom: 1px solid var(--wp--preset--color--hairline-light); }
.erlebnis__titel {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem; line-height: 1.2;
	color: var(--wp--preset--color--section);
}
.erlebnis__text {
	display: block; margin-top: 0.28rem;
	color: var(--wp--custom--on-dark--text);
	font-size: 0.9rem; line-height: 1.5;
}
.erlebnis__aktion { margin: 0; }
/* Steht UNTER dem Knopf, weil sie eine Einschraenkung ist und keine
   Einladung. Ueber dem Knopf gelesen bremst sie, darunter beantwortet sie
   die Frage, die sich beim Klicken stellt. */
.erlebnis__notiz {
	margin: 1.4rem 0 0; max-width: 42ch;
	color: var(--wp--custom--on-dark--muted);
	font-size: 0.87rem; line-height: 1.6;
}
/* Die Galerie erscheint erst, wenn Bilder gepflegt sind — bis dahin steht
   das Regelwerk hier, ohne dass eine leere Flaeche entsteht. */
/* DIE BILDER VERGANGENER FEIERN — EINE VOLLE REIHE UNTER DEM BALKEN (Jakob,
   10.09.2026: „gut, aber viel zu klein. Die kann keiner sehen."). Vorher
   standen sie als drei Kacheln von 134 px in der Textspalte. Jetzt nehmen sie
   als dritte Rasterzeile die ganze Breite des Balkens ein, drei nebeneinander,
   jede rund 420 px breit auf 1440. Der Umbruch steht direkt hier, nicht im
   Sammelblock (siehe bauplan.md). */
.erlebnis__reihe {
	grid-column: 1 / -1;
	/* Oben ein eigener, kleinerer Abstand: Die Reihe liegt direkt unter dem
	   grossen Bild der rechten Spalte, ohne Luft klebte sie daran. */
	padding: clamp(1.2rem, 2.5vw, 2rem) var(--wp--preset--spacing--balken) var(--wp--preset--spacing--balken);
}
.erlebnis__galerie {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(0.8rem, 1.6vw, 1.4rem);
}
.erlebnis__galerie img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--wp--custom--radius);
}
@media (max-width: 700px) {
	.erlebnis__galerie { grid-template-columns: 1fr; }
}

/* --- Platten und Einzelpositionen --- */
.platten { background: var(--wp--preset--color--section-deep); }
.platten__kopf { text-align: center; margin-bottom: clamp(2.6rem, 5vw, 3.6rem); }
.platten .platten__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.platten .platten__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	margin: 0 auto 1.3rem;
}
.platten__lead {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
	max-width: 54ch; margin: 0 auto;
}
.platten__spalten { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
/* Drei Spalten seit dem 11.09.2026 (der suesse Abschluss ist dazugekommen).
   Zwischen 900 und 1099 px zwei Spalten, darunter greift der Sammelumbruch
   weiter unten (eine Spalte). */
@media (max-width: 1099px) {
	.platten__spalten { grid-template-columns: 1fr 1fr; }
}
/* „Dazu kommt": Glaeser, Personal, Anlieferung — schlichte Zeilen ohne Link,
   mit Einheit hinter dem Betrag. */
.platten__dazu { max-width: 60ch; margin: clamp(2.4rem, 4vw, 3.4rem) auto 0; }
.platten__name--still { color: var(--wp--preset--color--primary); }
.platten__betrag { display: inline-flex; align-items: baseline; gap: 0.5em; white-space: nowrap; }
.platten__einheit {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem; color: var(--wp--preset--color--primary-soft);
}
.platten__flyer { text-align: center; margin: 1.8rem 0 0; }
/* Betraege in den Listen: 18 px Text, also accent-text statt accent-large —
   das Gold fuer grosse Schrift liegt hier bei 3,0:1 (gemessen 11.09.2026,
   pruefe-seiten.js, 20 Stellen), accent-text ueber 4,5:1. */
.platten__liste .pos__preis {
	margin-top: 0; font-size: 1.15rem;
	color: var(--wp--preset--color--accent-text);
}
.platten .platten__untertitel {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--kicker);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-text);
	margin: 0 0 1.4rem;
}
.platten__liste { list-style: none; margin: 0; padding: 0; }
.platten__liste li {
	padding: 0.95em 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
	display: grid; grid-template-columns: 1fr auto; column-gap: 1.4rem;
	align-items: baseline;
}
.platten__liste li:last-child { border-bottom: 1px solid var(--wp--preset--color--hairline); }
.platten__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem; line-height: 1.25;
	color: var(--wp--preset--color--primary);
}
/* JEDE POSITION IST EIN LINK ZUM BESTELLFORMULAR (Sophia, 10.09.2026).
   Zurueckhaltend gesetzt: Farbe und Schrift des Namens bleiben, ein kleiner
   Pfeil sagt, dass es weitergeht, die Unterstreichung kommt erst beim Zeigen.
   Der Fokusrahmen nutzt accent-text — das Marken-Gold liegt auf dem hellen
   Grund unter den 3:1, die WCAG 1.4.11 fuer Bedienelemente verlangt. */
.platten__link {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 0.22em;
	/* Der Link selbst ist mindestens 24 px hoch (WCAG 2.5.8): ein Innenabstand,
	   den ein gleich grosser negativer Aussenabstand optisch wieder aufhebt.
	   pruefe-seiten.js misst das Element, nicht sein Pseudo-Element — die
	   Zeilenflaeche unten kommt fuer den Finger noch dazu (10.09.2026). */
	display: inline-block;
	padding: 0.4em 0;
	margin: -0.4em 0;
}
/* Die ganze Zeile ist die Trefferflaeche, nicht nur die 20 px hohe
   Beschriftung — dieselbe Technik wie bei .trm__link auf Veranstaltungen.
   Gemessen am 10.09.2026: der Text allein blieb unter den 44 px, die auf
   Touch spuerbar sind; die Zeile ist rund 50 px hoch. */
.platten__liste li { position: relative; }
.platten__link::before { content: ""; position: absolute; inset: 0; }
.platten__link::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.45em;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8em;
	color: var(--wp--preset--color--accent-text);
	transition: transform 0.4s var(--wp--custom--ease-out);
}
.platten__liste li:hover .platten__link,
.platten__link:focus-visible { text-decoration: underline; }
.platten__liste li:hover .platten__link::after,
.platten__link:focus-visible::after { transform: translateX(4px); }
.platten__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-text);
	outline-offset: 3px;
}
.platten__beschreibung {
	grid-column: 1 / 2;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.9rem; margin-top: 0.25rem;
}
.platten__liste .pos__preis {
	grid-column: 2 / 3; grid-row: 1 / 2;
	margin: 0; font-size: 1.15rem;
}

/* --- Anfrage: Abschluss der Seite --- */
.anfrage { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--section); text-align: center; }
.anfrage .anfrage__kicker { color: var(--wp--preset--color--accent-light); margin: 0 0 1.3rem; }
.anfrage .anfrage__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.08;
	max-width: 20ch; margin: 0 auto 1.5rem;
}
.anfrage__text {
	color: var(--wp--custom--on-dark--text);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
	max-width: 52ch; margin: 0 auto 2.4rem;
}
.anfrage__aktion { margin: 0; }
.anfrage .anfrage__meta {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 0.6rem 2.4rem;
	margin: 3rem 0 0;
	color: var(--wp--custom--on-dark--text);
	font-size: 0.92rem; letter-spacing: 0.02em;
}
.anfrage__meta b { font-weight: 500; color: var(--wp--preset--color--section); }
.anfrage__meta a { display: inline-block; padding: 0.2em 0; }
.anfrage__meta a:hover { color: var(--wp--preset--color--accent-light); }

/* --- Die Weiche im Catering (Kundentermin 13.08.2026) --- */

/* Zwei Wege nebeneinander: „Sie wissen, was Sie möchten" gegen „Sie sind
   noch unsicher". Bewusst zwei GLEICH schwere Karten und kein Haupt- mit
   Nebenknopf — beide Anlässe sind gleich viel wert, und wer unsicher ist,
   soll den zweiten Weg nicht als Notausgang lesen.

   Haarlinie statt Kasten, wie überall im Maison-System. Auf dem dunklen
   Grund der Anfrage-Sektion ist es die helle Haarlinie.

   Die Weiche steht nur auf der Seite, wenn es BEIDE Formulare gibt (siehe
   patterns/page-catering.php). Solange das Bestellformular fehlt, greift
   nichts davon. */
.weiche {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(1.8rem, 4vw, 3.4rem);
	text-align: left;
	max-width: 56rem; margin: 0 auto 3rem;
}
.weiche__weg {
	display: flex; flex-direction: column;
	border-top: 1px solid var(--wp--preset--color--hairline-light);
	padding-top: 1.5rem;
	color: inherit;
}
.weiche .weiche__kicker { color: var(--wp--preset--color--accent-light); margin: 0 0 1rem; }
.weiche__titel {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.35rem, 2vw, 1.7rem);
	line-height: 1.12;
	margin: 0 0 0.8rem;
}
.weiche__text {
	color: var(--wp--custom--on-dark--text);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 300;
	margin: 0 0 1.3rem;
}
.weiche__mehr {
	margin-top: auto;
	color: var(--wp--preset--color--accent-light);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--kicker);
	text-transform: uppercase;
}
/* Die ganze Karte ist der Anfasser, nicht nur die Zeile unten. Der Pfeil
   rückt beim Zeigen nach, damit die Bewegung von der Karte ausgeht. */
.weiche__weg:hover .weiche__mehr span { padding-left: 0.3em; }
.weiche__mehr span { transition: padding-left 0.3s var(--wp--custom--ease-out); }

@media (max-width: 720px) {
	.weiche { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* Bild ueber jedem der drei Bausteine (Sophia, 03.09.2026: „mit Bilder:").
   Es sitzt vor der Ziffer, damit die Reihenfolge im Quelltext der optischen
   entspricht — Bild, Nummer, Titel. */
.vsp__bild { margin: 0 0 1.4rem; }
.vsp__bild img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 3 / 2; object-fit: cover;
	border-radius: var(--wp--custom--radius);
}

/* Der „oder"-Trenner zwischen Salaten und Quiche (Sophia, 03.09.2026:
   „könnte das so dargestellt werden wie im Flyer?"). Er sitzt als eigene
   Zeile im Raster und traegt eine Haarlinie links und rechts. */
/* Salate ODER Quiche: zwei gleichwertige Kacheln mit dem Wort dazwischen,
   wie im Flyer. Die erste Fassung hatte einen Trenner ueber die volle Breite
   und die Quiche darunter — im Raster las sich das wie ein fuenfter
   Baustein statt wie eine Alternative (Jakob, 03.09.2026). */
.paket__wahlblock {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	gap: clamp(1.2rem, 3vw, 2.4rem);
	margin-top: clamp(2rem, 4vw, 3rem);
}
.paket__oder {
	align-self: center;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--wp--preset--color--accent-text);
	white-space: nowrap;
}

/* Ihre Zeile ueber den vier Teilen. */
.paket__vorschlag {
	text-align: center;
	margin: 0 auto clamp(2rem, 4vw, 3rem);
	max-width: 46ch;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.05rem, 1.7vw, 1.3rem);
	line-height: 1.4;
	color: var(--wp--preset--color--primary);
}

/* Der Einleitungssatz aus dem Flyer, ueber den Sorten. */
.pos__lead {
	margin: 0 0 0.9rem;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.95rem; line-height: 1.6;
	font-style: italic;
}

/* ================================================================
   Catering — Umbrueche
   ================================================================ */

/* Der Umbruch steht hier und nicht im Sammelblock weiter oben:
   dort stuende er VOR den Basisregeln dieses Abschnitts und wuerde
   von ihnen ueberschrieben — Media Queries erhoehen die Spezifitaet
   nicht. Genau daran hingen die mehrspaltigen Layouts auf dem
   Telefon (gemessen 28.08.2026). Siehe auch „Restobar — Umbrueche".
   */

@media (max-width: 900px) {
	.versprechen__grid { grid-template-columns: 1fr; gap: 2.2rem; }
	/* Einspaltig ist das Bild ueber die ganze Breite zu hoch — flacher. */
	.vsp__bild img { aspect-ratio: 21 / 9; }
	/* Die Wahl untereinander, das „oder" als Zeile mit Haarlinien. */
	.paket__wahlblock { grid-template-columns: 1fr; }
	.paket__oder {
		display: flex; align-items: center; gap: 1.1rem;
		margin: 0.4rem 0;
	}
	.paket__oder::before,
	.paket__oder::after {
		content: ""; flex: 1 1 auto;
		height: 1px; background: var(--wp--preset--color--hairline);
	}
	.paket__liste { grid-template-columns: 1fr; }
	.platten__spalten { grid-template-columns: 1fr; }
	.anlaesse .balken__bild { min-height: 48vh; }
}

/* ================================================================
   Dienste Dritter (Zwei-Klick) und der Reservierungs-Dialog

   Der Vorschalter ist kein Warnschild, sondern Teil der Seite: dieselbe
   Haarlinie, dieselbe Schrift, derselbe Knopf wie ueberall. Nur so klickt
   ihn jemand auch an.
   ================================================================ */

.dienst { width: 100%; }
.dienst__vorschalt {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius);
	padding: clamp(1.5rem, 4vw, 2.6rem);
	text-align: center;
	background: var(--wp--preset--color--section);
}
.dienst__hinweis {
	margin: 0 auto 1.6rem;
	max-width: 46ch;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.95rem; line-height: 1.65;
}
.dienst__aktion { margin: 0; }
.dienst__fuss {
	margin: 1.4rem 0 0;
	font-size: 0.82rem;
	color: var(--wp--preset--color--primary-soft);
}
.dienst__fuss a { border-bottom: 1px solid var(--wp--preset--color--accent); }

/* Ohne JavaScript koennte der Knopf nichts tun. Sichtbar ist er deshalb
   erst, wenn das Skript ihn uebernommen hat (Klasse dienst--bereit);
   vorher steht an seiner Stelle der gewoehnliche Link zum Anbieter. */
.dienst__start { display: none; }
.dienst--bereit .dienst__start { display: inline-flex; }
.dienst--bereit .dienst__ersatz { display: none; }

.dienst__buehne { width: 100%; }
.dienst__buehne iframe { width: 100%; border: 0; display: block; }

/* Der Gutscheinshop hat keine eigene Inhaltshoehe — er fuellt jede Hoehe,
   die man ihm gibt (gemessen am 13.08.2026: 2600 px Fenster ergaben
   2600 px Inhalt). Feste Pixelwerte sind hier also Willkuer und erzeugen
   entweder Gedraenge oder tote Flaeche. Die Hoehe haengt deshalb am
   Fenster; laenger als der Schirm wird der Shop nie, und was nicht
   hineinpasst, scrollt im Rahmen. */
.dienst--gutschein .dienst__buehne iframe {
	height: clamp(520px, 82svh, 900px);
}

/* Das OpenTable-Widget steckt in einem eigenen Rahmen-Dokument und kann
   seine Hoehe nicht nach aussen melden. Der Wert ist gemessen am Standard-
   Widget (Datum, Uhrzeit, Personenzahl, Knopf) mit etwas Luft nach unten.
   Falls das Widget in echt hoeher ausfaellt, hier nachziehen — es scrollt
   sonst im Rahmen, statt abgeschnitten zu werden.

   BREITE STATT ZENTRIERUNG (Jakob, 07.09.2026: „Kannst du das iFrame hier
   mittig setzen?"). Das Widget selbst steht in seinem Dokument linksbuendig,
   und daran kommt von aussen niemand heran — es ist eine fremde Seite, kein
   Element dieser Website. Zentrieren laesst sich deshalb nur der RAHMEN:
   Er war 496 px breit, das Widget darin rund 190 px, der Rest leere Flaeche
   rechts. Jetzt ist der Rahmen so breit wie sein Inhalt und steht mittig.

   240 px ist gemessen, nicht geschaetzt: Bei dieser Breite rendert
   OpenTable dieselbe Ansicht wie bei 496 px, nur ohne den toten Raum.
   `min(100%, …)` haelt es auf schmalen Schirmen bei voller Breite. Wer den
   Wert aendert, oeffnet den Dialog und sieht nach — faellt der Rahmen zu
   schmal aus, bricht das Widget seine Zeilen um. */
.dienst--reservierung .dienst__buehne iframe {
	height: 340px;
	width: min(100%, 240px);
	margin-inline: auto;
}

/* --- Reservierungs-Dialog --- */
.rsv {
	width: min(560px, calc(100vw - 2rem));
	max-height: min(90svh, 780px);
	padding: 0;
	border: 0; border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--section);
	color: var(--wp--preset--color--primary);
	box-shadow: 0 40px 90px -30px rgba(16, 22, 15, 0.55);
	overflow: auto;
}
.rsv::backdrop { background: rgba(16, 22, 15, 0.72); }
.rsv__kopf {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem clamp(1.25rem, 4vw, 2rem) 1rem;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.rsv__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-s);
	margin: 0;
}
.rsv__schliessen {
	background: none; border: 0; cursor: pointer;
	font-size: 1.8rem; line-height: 1;
	color: var(--wp--preset--color--primary-soft);
	/* Klickflaeche auf 44 px, ohne das Zeichen zu vergroessern. */
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	margin: -0.5rem -0.75rem -0.5rem 0;
	transition: color 0.4s var(--wp--custom--ease);
}
.rsv__schliessen:hover { color: var(--wp--preset--color--primary); }
.rsv__inhalt { padding: clamp(1.25rem, 4vw, 2rem); }
/* Im Dialog traegt der Rahmen schon die Umrandung — der Vorschalter
   braucht dann keine zweite. */
.rsv .dienst__vorschalt { border: 0; padding: 0; background: transparent; }
/* Das Widget steht mittig im Dialog und nicht linksbuendig: Es ist der
   einzige Inhalt, und die Standardbreite von OpenTable ist schmaler als
   der Dialog. */
.rsv .dienst__buehne { display: flex; justify-content: center; }
.rsv .dienst__buehne iframe { max-width: 100%; }
.rsv__fuss {
	margin: 0;
	padding: 0 clamp(1.25rem, 4vw, 2rem) 1.5rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--primary-soft);
}
.rsv__fuss a { border-bottom: 1px solid var(--wp--preset--color--accent); }

/* ================================================================
   Formulare (Fluent Forms)

   Die drei Anfrageformulare stehen ausnahmslos in der dunklen
   Anfrage-Sektion. Alle Farben hier gehen deshalb von dunklem Grund aus;
   fuer ein Formular auf Beige braeuchte es eine eigene Abwandlung.

   Fluent Forms bringt sein eigenes Aussehen mit: weisse Eingabekaesten,
   blauer Knopf, rotes Pflichtsternchen. Hier wird daraus die Formsprache
   des Hauses — Haarlinien statt Kaesten, Jost in Versalien als
   Beschriftung, Gold als einzige Farbe.

   ZWEI STELLEN BRAUCHEN ERHOEHTE SPEZIFITAET. Fluent Forms schreibt beim
   Rendern einen eigenen style-Block ins Dokument, der HINTER allen
   Stylesheets steht. Er wiegt 0,3,1 (Knopf) bzw. 0,4,2 (Sternchen); eine
   normal geschriebene Regel kommt dagegen nie an. Beide Faelle sind unten
   einzeln begruendet.
   ================================================================ */

.formular { max-width: 44rem; margin: 2.6rem auto 0; text-align: left; }

/* Die Auswahlfelder und das Kaestchen sind Betriebssystem-Bauteile. Ohne
   diese Zeile zeichnet der Browser sie hell und die aufgeklappte Liste
   kommt in dunkler Schrift auf dunklem Grund. */
.formular { color-scheme: dark; }

.formular__hinweis {
	color: var(--wp--custom--on-dark--muted);
	font-size: 0.88rem; line-height: 1.6;
	margin: 0 0 2rem;
}

.formular .fluentform { margin: 0; }
.formular .fluentform .ff-el-group { margin-bottom: 1.7rem; }

/* Beschriftungen im Kicker-Duktus: Jost, klein, versal, gesperrt. */
.formular .fluentform .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem; font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--kicker);
	text-transform: uppercase;
	color: var(--wp--custom--on-dark--text);
	margin: 0;
}

/* Haarlinie statt Kasten. Der Wert der Linie ist bewusst heller als die
   Haarlinie der Seite: Ein Eingabefeld ist ein Bedienelement und braucht
   nach WCAG 1.4.11 mindestens 3:1 gegen den Grund. Mit .45 Deckkraft
   liegt die Linie bei 3,8:1, mit dem dunklen Haarlinien-Token waeren es
   1,7:1 gewesen. */
/* FELDER DEUTLICHER (Sophia, 04.09.2026): „können die Felder etwas heller
   sein? sodass man besser sieht was ausgefüllt werden muss /kann?" — in ihrem
   Screenshot hat sie schwarze Kästen um Vorname, Nachname und das Textfeld
   gemalt.

   Kästen bekommt sie trotzdem nicht: Das Maison-System arbeitet auf allen
   Seiten mit Haarlinien statt Rahmen, und ein umrandetes Formular auf einer
   Seite ohne einen einzigen Rahmen sähe eingesetzt aus. Stattdessen zwei
   Eingriffe, die dasselbe leisten — die Linie von 0.45 auf 0.72 verstärkt,
   und das Feld bekommt eine eigene, kaum sichtbare Fläche. Damit hat es einen
   Anfang und ein Ende, ohne dass eine neue Formsprache entsteht. */
.formular .fluentform .ff-el-form-control {
	width: 100%;
	background: rgba(242, 233, 222, 0.055);
	border: 0;
	border-bottom: 1px solid rgba(242, 233, 222, 0.72);
	border-radius: 0;
	padding: 0.8rem 0.7rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem; font-weight: 300;
	color: var(--wp--preset--color--section);
	box-shadow: none;
	transition: border-color 0.4s var(--wp--custom--ease-out);
}
.formular .fluentform .ff-el-form-control::placeholder {
	color: var(--wp--custom--on-dark--text-soft);
	opacity: 1;
}
.formular .fluentform .ff-el-form-control:focus,
.formular .fluentform .ff-el-form-control:focus-visible {
	border-bottom-color: var(--wp--preset--color--accent);
	box-shadow: none;
	outline: none;
}
/* Der sichtbare Fokus darf nicht allein an der Linienfarbe haengen —
   Farbe ist nach WCAG 1.4.1 nie das einzige Mittel. Deshalb zusaetzlich
   eine zweite, dickere Linie. */
.formular .fluentform .ff-el-form-control:focus-visible { border-bottom-width: 2px; padding-bottom: calc(0.8rem - 1px); }

.formular .fluentform textarea.ff-el-form-control { min-height: 8.5rem; resize: vertical; }
.formular .fluentform select.ff-el-form-control { padding-right: 1.5rem; }

/* Vor- und Nachname stehen nebeneinander; auf dem Handy untereinander. */
.formular .fluentform .ff-t-container { display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
.formular .fluentform .ff-t-cell { flex: 1 1 12rem; }

/* Hilfetexte gehoeren zur Beschriftung, nicht zum Feld — sie stehen darum
   in derselben Leserichtung und ruhiger als der eingegebene Text. */
.formular .fluentform .ff-el-help-message {
	color: var(--wp--custom--on-dark--muted);
	font-size: 0.85rem; line-height: 1.55;
	margin: 0.4rem 0 0;
}

/* Fluent Forms stellt Hilfetexte in der Voreinstellung als Sprechblase am
   Fragezeichen dar (helpMessagePlacement "with_label"). Das ist eine
   schlechte Loesung: Der Text erscheint nur bei Zeigerkontakt und das
   Symbol ist ein winziges Ziel. Die Formulardefinition steht deshalb in
   'tools/formulare-bauen.py' inzwischen auf "under_input" — bis zum
   naechsten Import bleibt das Symbol und wird hier wenigstens in die
   Zeile der Beschriftung gesetzt und eingefaerbt. */
.formular .fluentform .ff-el-input--label { display: flex; align-items: center; gap: 0.5rem; }
.formular .fluentform .ff-el-tooltip svg { fill: var(--wp--preset--color--accent-light); }

/* Einwilligung. Das Kaestchen mass in der Voreinstellung 13 x 13 Pixel und
   lag damit deutlich unter den geforderten 24 — ausgerechnet beim einzigen
   Pflichtfeld, das man anklicken muss. */
.formular .fluentform .ff-el-form-check-input[type="checkbox"],
.formular .fluentform .ff_tc_checkbox input[type="checkbox"] {
	width: 1.5rem; height: 1.5rem;
	margin: 0.1rem 0 0;
	accent-color: var(--wp--preset--color--accent);
	flex: 0 0 auto;
}
/* Die Einwilligung baut Fluent Forms als TABELLE: Die Beschriftung steht auf
   display:table-row, das Kaestchen in einer table-cell. Gemessen am laufenden
   Staging am 12.08.2026 — die Regel des Plugins gewinnt gegen ein hier
   gesetztes flex. In einem Tabellenkasten wirkt weder 'gap' noch ein
   seitliches 'margin'; das Kaestchen klebte dadurch am Text. Padding an der
   Zelle wirkt und ist der kleinere Eingriff, als das Layout umzubiegen. */
.formular .fluentform .ff_tc_checkbox { padding-right: 0.85rem; vertical-align: top; }
.formular .fluentform .ff_t_c { vertical-align: top; }

.formular .fluentform .ff-el-form-check-label { display: flex; align-items: flex-start; gap: 0.75rem; }

.formular .fluentform .ff-el-form-check-label,
.formular .fluentform .ff_tc_label {
	color: var(--wp--custom--on-dark--text);
	font-size: 0.92rem; line-height: 1.6;
	text-transform: none; letter-spacing: 0;
	font-weight: 300;
}
.formular .fluentform .ff_tc_content,
.formular .fluentform .ff-el-tc p { margin: 0; }
.formular .fluentform .ff_tc_content a,
.formular .fluentform .ff-el-form-check a {
	color: var(--wp--preset--color--accent-light);
	border-bottom: 1px solid currentColor;
}

/* Fehlermeldungen. Das Rot des Plugins (#f00 auf dunklem Grund) liegt bei
   2,7:1 und ist damit unter der Schwelle; dieser Ton kommt auf 8,4:1. */
.formular .fluentform .error,
.formular .fluentform .error-text,
.formular .fluentform .text-danger,
.formular .fluentform .ff-el-is-error .text-danger {
	color: #E8A79C;
	font-size: 0.86rem; line-height: 1.5;
	margin-top: 0.4rem;
}
.formular .fluentform .ff-el-is-error .ff-el-form-control { border-bottom-color: #E8A79C; }

/* Der Bestaetigungstext nach dem Absenden. Er tritt an die Stelle des
   Formulars und muss deshalb fuer sich stehen koennen. */
.formular .ff-message-success {
	border: 0; border-left: 2px solid var(--wp--preset--color--accent);
	background: transparent;
	padding: 0.2rem 0 0.2rem 1.4rem;
	color: var(--wp--preset--color--section);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
}
.formular .ff-message-success strong { font-weight: 500; }

/* Der Absende-Knopf im Maison-Look. Die naechste Regel wiederholt das mit
   hoeherer Spezifitaet — siehe die Begruendung darunter. */
.formular .fluentform .ff-btn-submit {
	display: inline-flex; align-items: center; gap: 0.6em;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.82rem; font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--button);
	text-transform: uppercase;
	padding: 1.05em 1.9em;
	border: 0; border-radius: var(--wp--custom--radius);
	cursor: pointer;
	transition: background 0.5s var(--wp--custom--ease-out),
	            transform 0.5s var(--wp--custom--ease-out),
	            box-shadow 0.5s var(--wp--custom--ease-out);
}

/* Fluent Forms setzt den Knopf im eigenen style-Block auf
   form.fluent_form_13 .ff-btn-submit:not(.ff_btn_no_style) — 0,3,1 und
   hinter allen Stylesheets. Die Regel darueber wiegt 0,3,0 und kaeme nie
   an; diese hier liegt mit 0,4,1 darueber. Schrift bleibt dunkel auf Gold
   (5,1:1); Weiss auf Gold waere 2,3:1. */
.formular form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
}
.formular form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):hover {
	background-color: var(--wp--preset--color--accent-light);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px -12px rgba(176, 136, 62, 0.6);
}

/* Das Pflichtsternchen sitzt auf demselben Element wie die Beschriftung.
   Die Regel des Plugins
   .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after
   wiegt 0,4,2 — diese liegt mit 0,5,2 darueber. Beide Stellungen abgedeckt,
   falls die Einstellung im Backend einmal wechselt. */
.formular .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.formular .fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label::before {
	color: var(--wp--preset--color--accent-light);
}

@media (max-width: 600px) {
	.formular { margin-top: 2rem; }
	.formular .fluentform .ff-btn-submit { width: 100%; justify-content: center; }
}

/* ================================================================
   Das mehrstufige Bestellformular (Catering, ab 16.08.2026)

   Der Block darüber ist für DUNKLEN Grund und einspaltige Formulare
   geschrieben. Das Bestellformular steht auf hellem Beige und trägt
   Produktspalten — deshalb hier ein eigener Satz Regeln statt
   Ausnahmen im bestehenden Block.

   Alles, was mit .ff- beginnt, gehört Fluent Forms. Die Klassen sind
   am laufenden System ausgelesen, nicht geraten.
   ================================================================ */

.bestellung { background: var(--wp--preset--color--section); }
.gespraech { background: var(--wp--preset--color--section-deep); }

.bestellung__kopf { text-align: center; max-width: 44rem; margin: 0 auto; }
.bestellung .bestellung__kicker,
.gespraech .bestellung__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.bestellung .bestellung__titel,
.gespraech .bestellung__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	margin: 0 0 1.3rem;
}
.bestellung__lead {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
	margin: 0;
}

/* Breiter als die Anfrageformulare: Zwei Produktspalten nebeneinander
   brauchen den Platz, sonst steht das Bild über zwei Zeilen Text. */
.formular--breit { max-width: 60rem; }

/* Der helle Grund kehrt jede Farbannahme des dunklen Blocks um. */
.bestellung .formular,
.gespraech .formular { color-scheme: light; }
.bestellung .formular__hinweis,
.gespraech .formular__hinweis { color: var(--wp--preset--color--primary-soft); }
.bestellung .formular .fluentform .ff-el-input--label label,
.gespraech .formular .fluentform .ff-el-input--label label {
	color: var(--wp--preset--color--primary);
}
/* FELDER DEUTLICHER, HELLE FASSUNG (Sophia, 04.09.2026): „können die Felder
   etwas heller sein? sodass man besser sieht was ausgefüllt werden muss
   /kann?" — in ihrem Screenshot vom Bestellformular hat sie schwarze Kästen
   um Vorname, Nachname und das Textfeld gemalt.

   HIER sitzt die Änderung, nicht in der Basisregel weiter oben. Die gilt für
   die dunklen Formularsektionen und arbeitet mit hellem Beige auf dunklem
   Grund; das Bestellformular steht auf `--section` (#F2E9DE) und wird von
   diesem Block überschrieben. Beim ersten Versuch am 05.09. ist genau das
   passiert: die Basisregel geändert, am Bestellformular blieb alles wie es
   war — gemessen `background: rgba(0,0,0,0)` und `hairline` als Linie.

   Kästen bekommt sie trotzdem nicht: Das Maison-System arbeitet auf allen
   Seiten mit Haarlinien statt Rahmen. Stattdessen eine kaum sichtbare Fläche
   und eine kräftigere Unterkante — das Feld hat damit einen Anfang und ein
   Ende, ohne dass eine neue Formsprache entsteht. Die Farbe ist das
   Dunkel-Olive der Marke mit sehr niedriger Deckkraft, nicht Grau. */
.bestellung .formular .fluentform .ff-el-form-control,
.gespraech .formular .fluentform .ff-el-form-control {
	background: rgba(24, 32, 28, 0.04);
	color: var(--wp--preset--color--primary);
	border-bottom-color: rgba(24, 32, 28, 0.38);
}
.bestellung .formular .fluentform .ff-el-form-control::placeholder,
.gespraech .formular .fluentform .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--primary-soft);
	opacity: 0.6;
}
.bestellung .formular .fluentform .ff-el-help-message,
.gespraech .formular .fluentform .ff-el-help-message {
	color: var(--wp--preset--color--primary-soft);
}
.bestellung .formular .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.gespraech .formular .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	color: var(--wp--preset--color--accent-text);
}
/* Die Einwilligung erbt sonst die Farben des dunklen Blocks und steht mit
   1,09:1 auf hellem Beige — praktisch unlesbar (Prüflauf 16.08.2026). Der
   Link kam auf 1,88:1. Beides sind Werte, bei denen ein Rechtstext seinen
   Zweck verfehlt: Eine Einwilligung, deren Text niemand lesen kann, ist nach
   Art. 7 Abs. 2 DSGVO nicht transparent. */
.bestellung .formular .fluentform .ff-el-form-check-label,
.bestellung .formular .fluentform .ff_tc_label,
.gespraech .formular .fluentform .ff-el-form-check-label,
.gespraech .formular .fluentform .ff_tc_label {
	color: var(--wp--preset--color--primary-soft);
}
.bestellung .formular .fluentform .ff_tc_content a,
.bestellung .formular .fluentform .ff-el-form-check a,
.gespraech .formular .fluentform .ff_tc_content a,
.gespraech .formular .fluentform .ff-el-form-check a {
	color: var(--wp--preset--color--accent-text);
}
/* Fehlermeldungen: Der helle Ton des dunklen Blocks (#E8A79C) liegt hier bei
   2,1:1. Dieser kommt auf 5,2:1 gegen das helle Beige. */
.bestellung .formular .fluentform .error,
.bestellung .formular .fluentform .error-text,
.bestellung .formular .fluentform .text-danger,
.gespraech .formular .fluentform .error,
.gespraech .formular .fluentform .error-text,
.gespraech .formular .fluentform .text-danger { color: #9B3A2A; }
.bestellung .formular .fluentform .ff-el-is-error .ff-el-form-control,
.gespraech .formular .fluentform .ff-el-is-error .ff-el-form-control { border-bottom-color: #9B3A2A; }

/* --- Der Schrittkopf --- */

.bestellung .ff-step-header {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* ACHTUNG, DIE BEIDEN SIND VERTAUSCHT, ALS MAN DENKT (am laufenden System
   nachgesehen, 16.08.2026): `.ff-el-progress-title` enthält ALLE fünf
   Schritt-Titel am Stück und wird vom Plugin im Balken-Modus selbst
   ausgeblendet. Der lesbare Text „Schritt 2 von 5 – Das Paket" steht in
   `.ff-el-progress-status`. Wer sich auf die Namen verlässt, blendet den
   einen aus und stylt den anderen ins Leere. */
.bestellung .ff-el-progress-status {
	position: static;
	display: block;
	width: auto;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--kicker);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-text);
	background: none;
	text-align: left;
	margin: 0 0 0.9rem;
}
/* Haarlinie statt Balkenkasten — dieselbe Sprache wie überall sonst. */
.bestellung .ff-el-progress {
	background: var(--wp--preset--color--hairline);
	height: 2px;
	border-radius: 0;
	overflow: visible;
}
/* Das Blau des Plugins wäre der einzige blaue Punkt der ganzen Website. */
.bestellung .ff-el-progress-bar {
	background: var(--wp--preset--color--accent);
	height: 2px;
	border-radius: 0;
	transition: width 0.5s var(--wp--custom--ease-out);
}
/* Im Balken steckt ein <span> mit der Prozentzahl. Auf 2 px Höhe steht sie
   halb außerhalb und sagt dasselbe wie „Schritt 1 von 5" darüber. Sie wird
   ausgeblendet, nicht entfernt — Fluent Forms schreibt sie bei jedem
   Schrittwechsel neu, und ein leerer Knoten käme sofort zurück. */
.bestellung .ff-el-progress-bar > span { display: none; }

/* --- Zurück und Weiter --- */

.bestellung .ff-btn-next,
.bestellung .ff-btn-prev {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--kicker);
	text-transform: uppercase;
	border-radius: 0;
	padding: 0.9em 1.8em;
	box-shadow: none;
}
.bestellung .ff-btn-next {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--accent);
}
.bestellung .ff-btn-next:hover { background: transparent; color: var(--wp--preset--color--accent-text); }
/* Zurück tritt bewusst zurück: Es ist der seltenere Weg. */
.bestellung .ff-btn-prev {
	background: transparent;
	color: var(--wp--preset--color--primary-soft);
	border: 1px solid var(--wp--preset--color--hairline);
}
.bestellung .ff-btn-prev:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary); }

/* --- Die Produktspalten --- */

/* WORDPRESS' BLOCKABSTAND, ZUM ZWEITEN MAL (vgl. bauplan.md, 13.08.2026).
   Fluent Forms setzt seinen Spalten `flex-basis: 50%` als Inline-Stil und
   rechnet mit genau 100 % Gesamtbreite. Der Blockabstand des Editors legt auf
   denselben Flex-Container einen `column-gap` von 1,6 rem — 50 % + 50 % +
   1,6 rem passen nicht in eine Zeile, und weil `flex-wrap: wrap` gilt, bricht
   die zweite Spalte kommentarlos unter die erste. Beide Produkte standen
   dadurch über die volle Breite untereinander statt nebeneinander.

   Der Abstand kommt deshalb über Innenabstand statt über gap: `box-sizing:
   border-box` sorgt dafür, dass er in den 50 % bleibt. Ein !important ist
   nötig, weil gegen einen Inline-Stil keine gewöhnliche Regel ankommt. */
.bestellung .ff-t-container { column-gap: 0 !important; }
.bestellung .ff_columns_total_2 > .ff-t-cell:first-child { padding-right: 1.1rem; }
.bestellung .ff_columns_total_2 > .ff-t-cell:last-child { padding-left: 1.1rem; }

.dg-schritt {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 300;
	max-width: 52ch;
	margin: 0 0 2.2rem;
}
/* Der Vorbestellungs-Hinweis ueber den Panettone-Kacheln (18.08.2026).
   Dieselbe goldene Haarlinie wie auf der Geschenkideen-Seite, damit Formular
   und Seite dieselbe Sprache sprechen. Ab Oktober faellt er weg — dann ist er
   auch aus tools/formulare-bauen.py zu nehmen und neu zu importieren. */
.dg-schritt--merk {
	padding: 0.9em 0 0.9em 1.1em;
	border-left: 2px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	font-weight: 400;
}
.dg-schritt--merk strong { font-weight: 500; }

.dg-prod { margin-bottom: 0.9rem; }
.dg-prod__bild {
	display: block;
	width: 100%; height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin-bottom: 0.9rem;
}
/* Für drei Produkte gibt es noch kein Foto (Grissini, Oliven im Glas,
   Platte Tomate/Mozzarella). Ohne Ersatz rutscht ihre Spalte nach
   oben, und die beiden Mengenfelder einer Zeile stehen versetzt — es sieht
   aus, als hätte jemand etwas vergessen.

   Statt einer leeren Fläche steht dort die Krone auf dunklem Beige: dieselbe
   Form wie auf den Karten-Kacheln der Restobar. Rein dekorativ und per
   ::before erzeugt, also ohne Eingriff ins Formular — das liegt in der
   Datenbank und müsste sonst neu importiert werden. Sobald ein Foto
   nachgeliefert wird, verschwindet der Platzhalter von selbst. */
.dg-prod:not(:has(.dg-prod__bild))::before {
	content: "";
	display: block;
	aspect-ratio: 16 / 9;
	margin-bottom: 0.9rem;
	background:
		url("assets/img/brand/krone-beige.png") center / 74px no-repeat,
		var(--wp--preset--color--section-deep);
	opacity: 0.55;
}
.dg-prod__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	line-height: 1.2;
	margin: 0 0 0.4rem;
}
.dg-prod__text {
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.92rem; line-height: 1.5;
	margin: 0;
}

/* Steht ein Produkt ALLEIN in seiner Zeile, füllte seine Kachel bisher die
   ganze Breite und war damit doppelt so groß wie die vier Platten darüber —
   das liest sich wie ein hervorgehobenes Angebot, obwohl es keines ist
   (Jakob, 12.09.2026: „Fischvariation bitte kleiner darstellen"). Sie bekommt
   jetzt die Breite einer Kachel aus einer zweispaltigen Zeile. Das greift
   ebenso beim Tiramisu und beim Panettoncino Cioccolato, die aus demselben
   Grund allein stehen. Auf dem Telefon bleibt es wie es war: Dort steht
   ohnehin alles untereinander und jedes Bild nutzt die volle Breite. */
@media (min-width: 601px) {
	.bestellung .ff_columns_total_1 .dg-prod { max-width: 50%; }
}
/* Das Mengenfeld ist schmal — eine Zahl braucht keine volle Spaltenbreite,
   und ein Feld über 400 px lädt zum Hineinschreiben von Sätzen ein. */
.bestellung .formular .fluentform input[type="number"] { max-width: 7rem; }

/* Die vier Bausteine des Pakets. */
.dg-paket {
	border-top: 1px solid var(--wp--preset--color--hairline);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	padding: 1.6rem 0;
	margin-bottom: 2.2rem;
}
.dg-paket p {
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.94rem; line-height: 1.6;
	margin: 0 0 1rem;
}
.dg-paket p:last-child { margin-bottom: 0; }
.dg-paket strong {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 1.08rem;
	color: var(--wp--preset--color--primary);
}
.dg-paket__mit { font-style: italic; }

@media (max-width: 700px) {
	/* Gestapelt braucht es keinen seitlichen Innenabstand mehr — sonst
	   steht das Formular schmaler als der Rest der Seite. */
	.bestellung .ff_columns_total_2 > .ff-t-cell:first-child,
	.bestellung .ff_columns_total_2 > .ff-t-cell:last-child { padding: 0; }

	/* Erst diese Zeile stapelt wirklich. Fluent Forms schreibt an jede Zelle
	   `flex-basis: 50%` als INLINE-Stil; dagegen kommt nur !important an —
	   dieselbe Ursache wie beim column-gap weiter oben. Ohne sie standen zwei
	   Produktkacheln mit Bild auf dem Telefon in 172-px-Spalten nebeneinander,
	   mit versetzten Hoehen und ineinanderlaufenden Titeln. Die Regel darueber
	   (Innenabstand weg, weil gestapelt) setzte das Stapeln schon voraus, es
	   fand aber nie statt. Gemessen am laufenden System 28.08.2026. */
	.bestellung .ff-t-cell {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}
	.bestellung .ff-t-cell { margin-bottom: 1.8rem; }
	.dg-prod__bild { aspect-ratio: 3 / 2; }
}

/* ================================================================
   Kooperation

   Die fünf Argumente stehen untereinander statt im Raster: Sie sind
   ungleich lang, und im Raster hinge die Zeile mit dem kürzesten Text
   allein in der Fläche. Die Ziffer läuft mit.
   ================================================================ */

.argumente__kopf { text-align: center; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.argumente .argumente__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.argumente .argumente__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	margin: 0 auto;
}
.argumente__liste { max-width: 52rem; margin-inline: auto; }
.arg {
	display: grid; grid-template-columns: auto 1fr; gap: 1.6rem;
	align-items: start;
	padding: 1.8rem 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
}
.arg:last-child { border-bottom: 1px solid var(--wp--preset--color--hairline); }
.arg__nr {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem; line-height: 1.2;
	color: var(--wp--preset--color--accent-large);
	margin: 0; min-width: 2.2ch;
}
.argumente .arg__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.3rem, 1.9vw, 1.6rem);
	line-height: 1.15;
	margin: 0 0 0.7rem;
}
.arg__text {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.65;
	margin: 0; max-width: 60ch;
}

/* --- Konzept: die vier Bausteine --- */
.konzept__kopf { text-align: center; margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.konzept .konzept__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.konzept .konzept__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	margin: 0 auto 1.3rem;
}
.konzept__lead {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
	max-width: 56ch; margin: 0 auto;
}
.konzept__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.6rem, 3vw, 2.6rem); }
.bst { border-top: 1px solid var(--wp--preset--color--hairline); padding-top: 1.3rem; }
.bst__nr {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem; line-height: 1.2;
	color: var(--wp--preset--color--accent-large);
	margin: 0 0 0.7rem;
}
.konzept .bst__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.2rem, 1.7vw, 1.45rem);
	line-height: 1.15;
	margin: 0 0 0.7rem;
}
.bst__text {
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.98rem; line-height: 1.6;
	margin: 0;
}

/* Die fuenf Werte als Zeile. Sie stehen unter einer Haarlinie und mittig —
   ein Schlusssatz zum Konzept, keine sechste Kachel. */
.konzept__werte {
	margin-top: clamp(2.6rem, 5vw, 3.8rem);
	padding-top: clamp(1.8rem, 3vw, 2.4rem);
	border-top: 1px solid var(--wp--preset--color--hairline);
	text-align: center;
}
.konzept .konzept__werte-kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1rem; }
.werte__zeile {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	line-height: 1.5;
	color: var(--wp--preset--color--primary);
}
.werte__trenn { color: var(--wp--preset--color--accent-large); margin-inline: 0.5em; }

/* --- Handbuch --- */
/* Der Text steht in 46ch und fuellt seine Spalte nicht aus; ohne die
   breitere Bildspalte entsteht in der Mitte ein Streifen Leerraum, der
   die Sektion auseinanderzieht (gemessen 1440 px, 03.09.2026). */
.handbuch__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.handbuch .handbuch__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.handbuch .handbuch__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	margin: 0 0 1.5rem;
}
.handbuch__absatz {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	max-width: 46ch; margin: 0 0 1.8rem;
}
.handbuch__liste { list-style: none; margin: 0 0 1.6rem; padding: 0; max-width: 46ch; }
.handbuch__liste li {
	position: relative;
	padding: 0.75rem 0 0.75rem 1.6rem;
	border-top: 1px solid var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--primary);
	font-size: 0.98rem; line-height: 1.5;
}
.handbuch__liste li:last-child { border-bottom: 1px solid var(--wp--preset--color--hairline); }
.handbuch__liste li::before {
	content: "";
	position: absolute; left: 0; top: 1.35em;
	width: 0.6rem; height: 1px;
	background: var(--wp--preset--color--accent-large);
}
.handbuch__notiz {
	margin: 0;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.9rem; line-height: 1.6;
	max-width: 44ch;
}
.handbuch__bild { margin: 0; overflow: hidden; border-radius: var(--wp--custom--radius); }
.handbuch__bild img { display: block; width: 100%; height: auto; }

/* --- Marke und Auftritt --- */
.marke { background: var(--wp--preset--color--section-deep); }
.marke__kopf { text-align: center; margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.marke .marke__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.marke .marke__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	margin: 0 auto 1.3rem;
}
.marke__lead {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
	max-width: 54ch; margin: 0 auto;
}
.marke__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.8rem, 4vw, 3.4rem); }
.marke__block { border-top: 1px solid var(--wp--preset--color--hairline); padding-top: 1.4rem; }
.marke .marke__block-titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.3rem, 1.9vw, 1.6rem);
	line-height: 1.15;
	margin: 0 0 0.8rem;
}
.marke__text {
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.98rem; line-height: 1.6;
	margin: 0;
}

/* Die Farbreihe: Punkt und Name nebeneinander, zwei Spalten. Der Punkt
   traegt eine Haarlinie, sonst verschwindet Hell-Beige im Grund. */
.marke__farben {
	list-style: none; margin: 1.4rem 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.55rem 1rem;
}
.marke__farbe { display: flex; align-items: center; gap: 0.55rem; }
.marke__punkt {
	flex: 0 0 auto;
	width: 1.15rem; height: 1.15rem;
	border-radius: 50%;
	background: var(--farbe, transparent);
	box-shadow: inset 0 0 0 1px rgba(24, 32, 28, 0.18);
}
.marke__farbname {
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.86rem; line-height: 1.3;
}
.marke__aktion { margin: 1.4rem 0 0; }

/* --- Standorte: Groessen und Studien --- */
.standorte__kopf { text-align: center; margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.standorte .standorte__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.standorte .standorte__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	margin: 0 auto 1.3rem;
}
.standorte__lead {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
	max-width: 54ch; margin: 0 auto;
}
.groessen { max-width: 52rem; margin-inline: auto; }
.groesse {
	display: grid; grid-template-columns: auto 1fr; gap: 1.6rem;
	align-items: baseline;
	padding: 1.5rem 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
}
.groesse:last-child { border-bottom: 1px solid var(--wp--preset--color--hairline); }
.groesse__kuerzel {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.8rem; line-height: 1;
	color: var(--wp--preset--color--accent-large);
	margin: 0; min-width: 1.6ch;
}
.standorte .groesse__flaeche {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.2rem, 1.7vw, 1.45rem);
	line-height: 1.15;
	margin: 0 0 0.5rem;
}
.groesse__text {
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.98rem; line-height: 1.6;
	margin: 0; max-width: 58ch;
}
.standorte__notiz {
	max-width: 52rem; margin: 1.2rem auto 0;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.88rem; line-height: 1.6;
}

.standorte__grid {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.6rem, 3vw, 2.6rem);
	margin-top: clamp(2.6rem, 5vw, 4rem);
}
.studie { margin: 0; }
.studie__bild {
	display: block; width: 100%; height: auto;
	aspect-ratio: 3 / 2; object-fit: cover;
	border-radius: var(--wp--custom--radius);
}
.studie__inhalt { display: block; padding-top: 1rem; }
.studie__titel {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.1rem, 1.6vw, 1.3rem);
	line-height: 1.2;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.4rem;
}
.studie__text {
	display: block;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.95rem; line-height: 1.6;
	margin-bottom: 0.55rem;
}
/* Der KI-Hinweis steht bewusst in der Bildunterschrift und nicht im
   Kleingedruckten am Seitenfuss: Wer das Bild ansieht, muss ihn lesen. */
.studie__hinweis {
	display: block;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.8rem; line-height: 1.5;
	letter-spacing: 0.02em;
}

/* --- Ansprechpartner --- */
.personen { background: var(--wp--preset--color--section-deep); }
.personen__kopf { text-align: center; margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.personen .personen__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.personen .personen__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	margin: 0 auto;
}
.personen__grid {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.8rem, 4vw, 3.4rem);
	max-width: 56rem; margin-inline: auto;
}
.person { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 2.5vw, 1.8rem); align-items: center; }
.person__bild {
	display: block;
	width: clamp(88px, 12vw, 132px); height: auto;
	aspect-ratio: 1 / 1; object-fit: cover;
	border-radius: 50%;
}
.personen .person__rolle { color: var(--wp--preset--color--accent-text); margin: 0 0 0.5rem; }
.personen .person__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.2rem, 1.7vw, 1.45rem);
	line-height: 1.15;
	margin: 0 0 0.5rem;
}
.person__text {
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.95rem; line-height: 1.6;
	margin: 0;
}
.personen__fuss {
	text-align: center;
	margin: clamp(2.2rem, 4vw, 3rem) auto 0;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.95rem;
}

/* ================================================================
   Kooperation — Umbrueche
   ================================================================ */

/* Der Umbruch steht hier und nicht im Sammelblock weiter oben:
   dort stuende er VOR den Basisregeln dieses Abschnitts und wuerde
   von ihnen ueberschrieben — Media Queries erhoehen die Spezifitaet
   nicht. Genau daran hingen die mehrspaltigen Layouts auf dem
   Telefon (gemessen 28.08.2026). Siehe auch „Restobar — Umbrueche".
   */

@media (max-width: 1100px) {
	/* Vier Bausteine nebeneinander ergeben auf dem Tablet Spalten von rund
	   150 px — zwei Reihen zu zweit lesen sich dort besser. */
	.konzept__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.arg { grid-template-columns: 1fr; gap: 0.6rem; }
	.kooperation-balken .balken__bild { min-height: 46vh; }
	.handbuch__grid { grid-template-columns: 1fr; gap: 2rem; }
	.handbuch__bild { order: -1; }
	.marke__grid { grid-template-columns: 1fr; gap: 1.8rem; }
	.standorte__grid { grid-template-columns: 1fr; }
	.personen__grid { grid-template-columns: 1fr; gap: 1.8rem; }
}

@media (max-width: 560px) {
	.konzept__grid { grid-template-columns: 1fr; gap: 1.4rem; }
	.groesse { grid-template-columns: 1fr; gap: 0.5rem; }
	.groesse__kuerzel { font-size: 1.4rem; }
	/* Auf dem Telefon steht das Portraet ueber dem Text: nebeneinander
	   blieben fuer den Namen keine 20 Zeichen. */
	.person { grid-template-columns: 1fr; gap: 1rem; }
	.marke__farben { grid-template-columns: 1fr; }
}

/* ================================================================
   Über uns

   Vier Bausteine: die Geschichte als Text-Bild-Paar, die Manufaktur im
   bekannten dunklen Balken, die Herkunft als Dreierreihe, Karriere als
   Bild-Text-Paar mit umgekehrter Leserichtung.
   ================================================================ */

.geschichte__kopf { text-align: center; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.geschichte .geschichte__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.geschichte .geschichte__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	margin: 0 auto;
}
.geschichte__grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.geschichte__text p {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	max-width: 46ch;
	margin: 0 0 1.2rem;
}
.geschichte__text p:last-child { margin-bottom: 0; }
.geschichte__bild { margin: 0; }
.geschichte__bild img { width: 100%; height: auto; border-radius: var(--wp--custom--radius); }
.geschichte__bild figcaption {
	margin-top: 0.9rem;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.88rem;
}

/* --- Herkunft --- */
.herkunft { background: var(--wp--preset--color--section-deep); }
.herkunft__kopf { text-align: center; margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.herkunft .herkunft__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.herkunft .herkunft__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	margin: 0 auto 1.3rem;
}
.herkunft__lead {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
	max-width: 54ch; margin: 0 auto;
}
.herkunft__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.8rem, 4vw, 3.4rem); }
.herkunft__block { border-top: 1px solid var(--wp--preset--color--hairline); padding-top: 1.4rem; }
.herkunft .herkunft__ort {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.3rem, 1.9vw, 1.6rem);
	line-height: 1.15;
	margin: 0 0 0.8rem;
}
.herkunft__text {
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.98rem; line-height: 1.6;
	margin: 0;
}

/* --- Karriere --- */
.karriere__grid { display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.karriere__bild { margin: 0; overflow: hidden; border-radius: var(--wp--custom--radius); }
.karriere__bild img { width: 100%; height: auto; }
/* Peters Video (11.09.2026): Hochformat, deshalb schmaler als die Spalte und
   mittig; laeuft erst auf Klick, mit Ton. Die Rundung sitzt am Video, nicht
   an der Figur, damit die Unterschrift nicht mit abgeschnitten wird. */
.karriere__video { overflow: visible; border-radius: 0; max-width: 22rem; margin: 0 auto; }
.karriere__clip {
	display: block; width: 100%; height: auto;
	aspect-ratio: 9 / 16; background: #000;
	border-radius: var(--wp--custom--radius);
}
.karriere__unterschrift {
	margin: 0.8rem 0 0;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.9rem; line-height: 1.5;
}
.karriere .karriere__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.karriere .karriere__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	margin: 0 0 1.5rem;
}
.karriere__absatz {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	max-width: 44ch; margin: 0 0 1.2rem;
}
.karriere__aktion { margin: 1.8rem 0 1.1rem; }
.karriere__meta { margin: 0; color: var(--wp--preset--color--primary-soft); font-size: 0.92rem; }
.karriere__meta a { display: inline-block; padding: 0.2em 0; border-bottom: 1px solid var(--wp--preset--color--hairline); }
.karriere__meta a:hover { color: var(--wp--preset--color--accent-text); }

/* ================================================================
   Ueber uns — Umbrueche
   ================================================================ */

/* Der Umbruch steht hier und nicht im Sammelblock weiter oben:
   dort stuende er VOR den Basisregeln dieses Abschnitts und wuerde
   von ihnen ueberschrieben — Media Queries erhoehen die Spezifitaet
   nicht. Genau daran hingen die mehrspaltigen Layouts auf dem
   Telefon (gemessen 28.08.2026). Siehe auch „Restobar — Umbrueche".
   */

@media (max-width: 900px) {
	.geschichte__grid { grid-template-columns: 1fr; }
	.herkunft__grid { grid-template-columns: 1fr; gap: 1.8rem; }
	.karriere__grid { grid-template-columns: 1fr; }
	/* Bild zuerst, damit der Abschnitt nicht als Textwand beginnt. */
	.karriere__bild { order: -1; }
	.manufaktur-balken .balken__bild { min-height: 46vh; }
}

/* ================================================================
   Kontakt

   Drei Bausteine: die Wege zu uns als Raster, die Öffnungszeiten als
   echte Beschreibungsliste (dt/dd — die Zuordnung Tag zu Uhrzeit ist
   Semantik, kein Layout), und die Anfahrt als Bild-Text-Paar.
   ================================================================ */

.wege__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.8rem, 4vw, 3.4rem); }
.weg {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: 1.5rem;
}
.wege .weg__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.35rem, 2vw, 1.7rem);
	line-height: 1.12;
	margin: 0 0 0.8rem;
}
.weg__text {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--body);
	margin: 0 0 1.3rem; max-width: 36ch;
}

/* --- Öffnungszeiten --- */
.zeiten { background: var(--wp--preset--color--section-deep); }
.zeiten__kopf { text-align: center; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.zeiten .zeiten__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.zeiten .zeiten__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	margin: 0 auto 1.3rem;
}
.zeiten__lead {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
	max-width: 52ch; margin: 0 auto;
}
.zeiten__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); max-width: 58rem; margin-inline: auto; }
.zeiten .zeiten__bereich {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--kicker);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-text);
	margin: 0 0 1.2rem;
}
.zeiten__liste { margin: 0; }
.zeiten__zeile {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 1.5rem; padding: 0.85em 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
}
.zeiten__zeile:last-child { border-bottom: 1px solid var(--wp--preset--color--hairline); }
.zeiten__zeile dt { color: var(--wp--preset--color--primary-soft); font-size: 0.98rem; }
.zeiten__zeile dd {
	margin: 0; white-space: nowrap;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	color: var(--wp--preset--color--primary);
}

/* --- Anfahrt --- */
.anfahrt__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.anfahrt__bild { overflow: hidden; border-radius: var(--wp--custom--radius); }
.anfahrt__bild img { width: 100%; height: auto; }
.anfahrt .anfahrt__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.anfahrt .anfahrt__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	margin: 0 0 1.5rem;
}
.anfahrt__adresse {
	font-style: normal;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.2rem; line-height: 1.55;
	color: var(--wp--preset--color--primary);
	margin: 0 0 1.4rem;
}
.anfahrt__absatz {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--body);
	max-width: 40ch; margin: 0 0 1.8rem;
}
.anfahrt__meta {
	display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 0;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.92rem;
}
.anfahrt__meta a { display: inline-block; padding: 0.2em 0; }
.anfahrt__meta a:hover { color: var(--wp--preset--color--accent-text); }

/* ================================================================
/* ================================================================
   Kontakt — Umbrueche
   ================================================================ */

/* Der Umbruch steht hier und nicht im Sammelblock weiter oben:
   dort stuende er VOR den Basisregeln dieses Abschnitts und wuerde
   von ihnen ueberschrieben — Media Queries erhoehen die Spezifitaet
   nicht. Genau daran hingen die mehrspaltigen Layouts auf dem
   Telefon (gemessen 28.08.2026). Siehe auch „Restobar — Umbrueche".

   Die Zeiten-Liste lief bei zwei Spalten rechts aus dem Bild.
   */

@media (max-width: 900px) {
	.wege__grid { grid-template-columns: 1fr; }
	.zeiten__grid { grid-template-columns: 1fr; gap: 2.4rem; }
	/* Bild zuerst — die Fassade ist der Wiedererkennungswert, nicht der Text. */
	.anfahrt__grid { grid-template-columns: 1fr; }
	.anfahrt__bild { order: -1; }
}

   Platzhalter für Seiten, die noch nicht gebaut sind

   Nimmt die Form des Intros auf, damit die Vorschau nicht wie eine
   Fehlerseite wirkt. Wird von 'inc/leere-seiten.php' eingesetzt und
   verschwindet, sobald die Seite ein eigenes Pattern hat.
   ================================================================ */

.inarbeit { text-align: center; padding-block: var(--wp--preset--spacing--sektion); }
.inarbeit__krone { height: 42px; width: auto; margin: 0 auto 2.2rem; opacity: 0.9; }
.inarbeit .inarbeit__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.2rem; }
.inarbeit .inarbeit__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.08;
	margin: 0 auto 1.6rem;
}
.inarbeit .inarbeit__text {
	max-width: 52ch; margin: 0 auto 2.4rem;
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
}
.inarbeit__aktion { margin: 0; }

/* ================================================================
   Zielgrößen auf Touch-Geräten

   WCAG 2.5.8 (AA) verlangt 24 x 24 px; das hält das Layout überall ein.
   Auf Zeigegeräten ohne feine Steuerung sind 44 px aus 2.5.5 (AAA) aber
   spürbar besser zu treffen, deshalb dort aufgefüttert. Die Vergrößerung
   läuft über Innenabstand, nicht über Schriftgröße — das Schriftbild des
   freigegebenen Entwurfs bleibt damit unverändert.
   ================================================================ */

/* Die Kontaktzeile der Reservierung enthält die einzigen Ziele, die auch am
   Desktop unter 24 px lagen (Telefon und E-Mail, je 22 px hoch). */
.reservierung__meta a { display: inline-block; padding: 0.2em 0; }

@media (pointer: coarse), (max-width: 900px) {
	.foot__link { padding: 0.62em 0; min-height: 44px; display: flex; align-items: center; }
	/* Die Box wächst, das Zeichen bleibt 24px breit — sonst wandern die drei
	   Striche aus der Mitte (sie hängen an einem festen left-Wert). */
	.burger { width: 44px; height: 44px; margin-right: -0.5rem; }
	.burger__line { left: 10px; }
	.tlink { padding-top: 0.6em; padding-bottom: 0.95em; }
	.reservierung__meta a { display: inline-block; padding: 0.6em 0; }
}

/* ================================================================
   Still-Modus (?still=1) — nur fuer den Design-Abgleich.
   Haelt jede Bewegung an und setzt animierte Elemente auf ihren
   sichtbaren Endzustand, damit Screenshots reproduzierbar sind.
   ================================================================ */

.is-still .hero__layer { animation: none !important; opacity: 0 !important; transform: none !important; }
.is-still .hero__layer--1 { opacity: 1 !important; }
.is-still .hero .hero__kicker,
.is-still .hero .hero__sub,
.is-still .hero__title .ln { animation: none !important; opacity: 1 !important; transform: none !important; }
.is-still .hero__cue { display: none !important; }
.is-still .hdr { position: absolute !important; }
.is-still .marquee__zeile { animation: none !important; }
.is-still .shero__media img { animation: none !important; transform: none !important; }
.is-still .shero .shero__kicker,
.is-still .shero .shero__titel,
.is-still .shero .shero__sub { animation: none !important; opacity: 1 !important; transform: none !important; }
/* Der Parallax-Hintergrund bleibt in Ruhelage, sonst haengt der Ausschnitt
   von der Scrollposition beim Aufnehmen ab. */
.is-still .atmo__bg { transform: none !important; }

/* Reduzierte Bewegung respektieren.
   Wichtig: Die pauschale Verkuerzung allein genuegt nicht. Elemente, die ihren
   sichtbaren Zustand erst per Animation erreichen, muessen hier ausdruecklich
   sichtbar gesetzt werden — sonst bleibt der Hero schwarz und die Textzeilen
   unsichtbar, weil die Ken-Burns-Animation ohne "forwards" bei opacity:0 endet. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	html { scroll-behavior: auto; }

	.hero__layer { opacity: 0 !important; transform: none !important; }
	.hero__layer--1 { opacity: 1 !important; }
	.hero .hero__kicker,
	.hero .hero__sub,
	.hero__title .ln { opacity: 1 !important; transform: none !important; }
	.hero__cue-bar { opacity: 0.6 !important; transform: none !important; }
}

/* ==========================================================================
   ARBEITSBEREICHE 14.08.2026 — je Seite ein eigener Abschnitt.
   Vier Bau-Vorgänge laufen parallel; jeder schreibt AUSSCHLIESSLICH in seinen
   eigenen Abschnitt unten, damit sich die Änderungen nicht gegenseitig
   überschreiben. Nach dem Zusammenführen dürfen die Abschnitte an ihren
   fachlich richtigen Platz oben wandern.
   ========================================================================== */

/* --- ABSCHNITT VERANSTALTUNGEN — Anfang --- */

/* ================================================================
   Veranstaltungen — Terminliste, Popup, wiederkehrende Formate

   Die Übersicht bleibt bewusst kompakt: Datum, Titel, gegebenenfalls
   Uhrzeit und ein kleines Bild. Alles Weitere steht im Popup. Deshalb
   ist die Liste typografisch gebaut — Haarlinien statt Kästen, wie im
   ganzen Maison-System.

   FARBEN. Auf hellem Beige trägt das Marken-Gold #B0883E keinen Text
   (2,4–2,9:1). Hier gilt deshalb dieselbe Zweiteilung wie im übrigen
   Theme: accent-large #9D7937 nur für die Datumszeile, die überall
   mindestens 24 px groß ist (3,5:1 auf base, ausreichend für großen
   Text), accent-text #795E2B für alles Kleine (5,3:1 auf base).
   Im dunklen Balken bleibt es bei accent-light.
   ================================================================ */

.termine__kopf { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.termine .termine__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1rem; }
.termine__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: 1.12;
	max-width: 20ch;
	margin: 0;
}

.termine__liste { list-style: none; margin: 0; padding: 0; }

/* Eine Zeile je Termin: Datum, Inhalt, Hinweis auf die Einzelheiten.
   Die Spaltenbreite ist fest, damit die Datumsspalte über alle Zeilen
   auf derselben Kante steht — jedes <li> ist ein eigenes Raster. */
.trm {
	position: relative;
	display: grid;
	grid-template-columns: 10.5rem 1fr auto;
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: center;
	padding: clamp(1.3rem, 2.4vw, 2rem) 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
}
.termine__liste li:last-child { border-bottom: 1px solid var(--wp--preset--color--hairline); }

.trm__datum { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; }
.trm__tag {
	font-family: var(--wp--preset--font-family--display);
	/* Unterste Stufe 1,5rem = 24 px — ab dort gilt großer Text (WCAG 1.4.3),
	   und nur deshalb darf hier accent-large stehen. */
	font-size: clamp(1.5rem, 2.2vw, 2.1rem);
	line-height: 1;
	white-space: nowrap;
	color: var(--wp--preset--color--accent-large);
}
/* Termine über einen Monatswechsel tragen die längere Schreibweise
   ("30.9.–1.10.") und bekommen dafür die kleinere Stufe. */
.trm__datum--lang .trm__tag { font-size: 1.5rem; }
.trm__monat {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.86rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--primary);
}
.trm__wochentag {
	font-size: 0.82rem;
	color: var(--wp--preset--color--primary-soft);
}

.trm__haupt { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.5rem); }
.trm__bild {
	flex: none;
	width: 112px; height: 84px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius);
}
.trm__inhalt { min-width: 0; }
.trm__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-s);
	line-height: 1.15;
	margin: 0;
}
/* Die ganze Zeile ist anklickbar, die Linkbeschriftung bleibt trotzdem der
   Name des Termins — im Screenreader-Linkverzeichnis steht damit die
   Veranstaltung und nicht sechsmal "Einzelheiten". */
.trm__link { display: inline-block; }
.trm__link::after { content: ""; position: absolute; inset: 0; }
/* Fokusrahmen auf hellem Beige: Das Marken-Gold liegt dort bei 2,7–2,9:1 und
   verfehlt die 3:1, die WCAG 1.4.11 für Bedienelemente verlangt. accent-text
   erreicht 4,1:1 auf base und 3,9:1 auf section. Gilt für alle Bedienelemente
   dieses Abschnitts — der Schließen-Knopf des Popups bekommt beim Öffnen als
   erstes den Fokus, dort fällt es sofort auf. */
.trm__link:focus-visible,
.evd__schliessen:focus-visible,
.evd__zu:focus-visible,
.evd__text a:focus-visible,
.eigenanlass__meta a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-text);
	outline-offset: 3px;
}
.trm__zeit {
	margin: 0.35rem 0 0;
	font-size: 0.92rem;
	color: var(--wp--preset--color--primary-soft);
}

.trm__mehr {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--button);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--accent-text);
	transition: color 0.4s var(--wp--custom--ease);
}
.trm__pfeil {
	display: inline-block; margin-left: 0.4em;
	transition: transform 0.4s var(--wp--custom--ease-out);
}
.trm:hover .trm__titel { text-decoration: underline; text-underline-offset: 0.22em; }
.trm:hover .trm__pfeil { transform: translateX(4px); }

.termine__notiz,
.termine__leer {
	margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.92rem;
}
/* Ohne Termin steht hier ein Satz statt einer leeren Fläche — zwischen zwei
   Haarlinien, damit die Sektion ihre Form behält. */
.termine__leer {
	margin: 0;
	padding: clamp(2rem, 4vw, 3rem) 0;
	border-block: 1px solid var(--wp--preset--color--hairline);
	max-width: 56ch;
	font-size: var(--wp--preset--font-size--body);
}

/* ----------------------------------------------------------------
   Das Popup je Termin

   Zwei Wege, ein Kasten. Ohne JavaScript öffnet .evd:target die Schicht
   über den Anker; mit JavaScript hängt veranstaltungen.js den Kasten in
   ein echtes <dialog> um. Alles Sichtbare hängt deshalb an .evd__box und
   funktioniert in beiden Fällen; die beiden Hüllen positionieren nur.
   ---------------------------------------------------------------- */

.evd { display: none; }
.evd:target {
	display: grid;
	position: fixed; inset: 0; z-index: 90;
	overflow: auto;
	padding: clamp(1rem, 4vw, 2.5rem);
	background: rgba(16, 22, 15, 0.72);
}
/* margin:auto statt place-items:center — zentriert ebenso, schneidet einen
   zu hohen Kasten aber nicht oben ab. */
.evd:target .evd__box { margin: auto; }

.evd-dialog {
	width: min(680px, calc(100vw - 2rem));
	padding: 0; border: 0;
	background: transparent;
	overflow: visible;
}
.evd-dialog::backdrop { background: rgba(16, 22, 15, 0.72); }

.evd__box {
	width: min(680px, 100%);
	max-height: min(88svh, 820px);
	overflow: auto;
	background: var(--wp--preset--color--section);
	color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 40px 90px -30px rgba(16, 22, 15, 0.55);
}
.evd-dialog .evd__box { width: 100%; }

.evd__kopf {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 1rem;
	padding: clamp(1.4rem, 4vw, 2rem) clamp(1.25rem, 4vw, 2rem) 1rem;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.evd .evd__datum { color: var(--wp--preset--color--accent-text); margin: 0 0 0.7rem; }
.evd__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-s);
	line-height: 1.15;
	margin: 0;
}
.evd__schliessen {
	flex: none;
	/* Klickfläche 44 px, ohne das Zeichen zu vergrößern — wie im
	   Reservierungs-Dialog. */
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	margin: -0.6rem -0.75rem 0 0;
	font-size: 1.8rem; line-height: 1;
	color: var(--wp--preset--color--primary-soft);
	transition: color 0.4s var(--wp--custom--ease);
}
.evd__schliessen:hover { color: var(--wp--preset--color--primary); }

.evd__inhalt { padding: clamp(1.25rem, 4vw, 2rem); }
.evd__bild {
	display: block;
	width: 100%; height: auto;
	max-height: 46svh;
	object-fit: cover;
	border-radius: var(--wp--custom--radius);
	margin: 0 0 1.6rem;
}

/* Uhrzeit und Ort als zweispaltige Datenliste, Beschriftung in Jost-Versalien. */
.evd__daten {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 0.5rem 1rem;
	margin: 0 0 1.6rem;
	padding: 0 0 1.4rem;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.evd__daten dt {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--kicker);
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-soft);
	padding-top: 0.22em;
}
.evd__daten dd { margin: 0; }

.evd__text { color: var(--wp--preset--color--primary-soft); }
.evd__text p { margin: 0 0 0.9em; }
.evd__text p:last-child { margin-bottom: 0; }
.evd__text ul,
.evd__text ol { margin: 0 0 0.9em; padding-left: 1.2em; }
.evd__text li { margin-bottom: 0.3em; }
.evd__text a { border-bottom: 1px solid var(--wp--preset--color--accent); }
.evd__text strong,
.evd__text b { font-weight: 500; color: var(--wp--preset--color--primary); }

.evd__galerie {
	list-style: none; margin: 1.6rem 0 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.6rem;
}
.evd__galerie img {
	display: block;
	width: 100%; aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius);
}

.evd__aktion { margin: 1.8rem 0 0; }

.evd__fuss {
	margin: 0;
	padding: 0 clamp(1.25rem, 4vw, 2rem) clamp(1.4rem, 4vw, 1.8rem);
	font-size: 0.9rem;
	color: var(--wp--preset--color--primary-soft);
}
/* Klickfläche auf mindestens 24 px bringen (WCAG 2.5.8), ohne die Schrift zu
   vergrößern — dieselbe Lösung wie bei den Fußzeilen-Links der Startseite. */
.evd__zu { display: inline-block; padding: 0.3em 0; border-bottom: 1px solid var(--wp--preset--color--accent); }

/* ----------------------------------------------------------------
   Wiederkehrende Formate im dunklen Balken
   ---------------------------------------------------------------- */

.formate__liste { list-style: none; margin: 0; padding: 0; max-width: 46ch; }
.formate__liste li {
	padding: 1em 0;
	border-top: 1px solid var(--wp--preset--color--hairline-light);
}
.formate__liste li:last-child { border-bottom: 1px solid var(--wp--preset--color--hairline-light); }
.formate__rhythmus {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--kicker);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-light);
	margin-bottom: 0.45rem;
}
.formate__titel {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem; line-height: 1.2;
	color: var(--wp--preset--color--section);
}
.formate__text {
	display: block; margin-top: 0.35rem;
	color: var(--wp--custom--on-dark--text);
	font-size: 0.92rem; line-height: 1.5;
}

/* ----------------------------------------------------------------
   Abschluss: der eigene Anlass führt zur Catering-Seite
   ---------------------------------------------------------------- */

.eigenanlass {
	background: var(--wp--preset--color--section-deep);
	border-block: 1px solid var(--wp--preset--color--hairline);
	text-align: center;
}
.eigenanlass .eigenanlass__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.3rem; }
.eigenanlass__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: 1.1;
	max-width: 18ch;
	margin: 0 auto 1.4rem;
}
.eigenanlass__text {
	color: var(--wp--preset--color--primary-soft);
	font-weight: 300;
	max-width: 52ch;
	margin: 0 auto 2.4rem;
}
.eigenanlass__aktion { margin: 0; }
.eigenanlass__meta {
	margin: 1.6rem 0 0;
	font-size: 0.92rem;
	color: var(--wp--preset--color--primary-soft);
}
.eigenanlass__meta a { display: inline-block; padding: 0.3em 0; border-bottom: 1px solid var(--wp--preset--color--accent); }

/* ----------------------------------------------------------------
   Schmale Ansichten
   ---------------------------------------------------------------- */

@media (max-width: 760px) {
	.trm {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 0.8rem;
	}
	/* Das Datum legt sich in eine Zeile, statt eine leere Spalte zu halten. */
	.trm__datum { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0.15rem 0.6rem; }
	.trm__bild { width: 84px; height: 64px; }
	.trm__mehr { justify-self: start; }

	.evd__daten { grid-template-columns: 1fr; gap: 0.15rem; }
	.evd__daten dd { margin-bottom: 0.7rem; }
	.evd__daten dd:last-child { margin-bottom: 0; }
	.evd__galerie { grid-template-columns: repeat(2, 1fr); }
}

/* Im Still-Modus des Abgleichs bleibt nichts halb eingeblendet. */
.is-still .trm__pfeil { transform: none !important; }

/* --- ABSCHNITT VERANSTALTUNGEN — Ende --- */

/* --- ABSCHNITT GESCHENKIDEEN — Anfang --- */

/* ================================================================
   Geschenkideen

   Baut auf den vorhandenen Formen auf: Sub-Hero und Intro wie überall,
   das Band und die dunkle Anfrage-Sektion unverändert. Eigen sind nur
   drei Dinge — die Panorama-Figur mit der gepackten Box, die drei
   Box-Karten und die Aufstellung für Tüten, Wein und Panettone.

   ALLE GOLDTÖNE AUF HELL SIND `accent-text` (#795E2B), nicht
   `accent-large`. Gemessen: accent-large liefert auf der zweiten
   Beige-Stufe nur 3,01:1 und trägt damit ausschließlich Schrift ab
   24 px. Die Beträge stehen aber bei 24 px und darunter, und ob ein
   späterer Betrag zwei- oder dreistellig ist, entscheidet die Pflege —
   eine Farbe, die von der Schriftgröße abhängt, wäre hier eine Falle.
   accent-text trägt mit 5,34:1 (Grund) und 4,55:1 (zweite Stufe) in
   jeder Größe.

   Alle Klassen sind mit `gsk` vorangestellt, weil am selben Tag drei
   weitere Seiten gebaut werden.
   ================================================================ */

.gsk__kopf { text-align: center; margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.gsk__kopf .gsk__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.gsk__kopf .gsk__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	max-width: 22ch; margin: 0 auto 1.4rem;
}
.gsk__lead {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
	max-width: 56ch; margin: 0 auto;
}

/* --- Die Figur mit der gepackten Box ---
   Das Motiv ist ein Panorama (1759 × 706). Es steht deshalb in der
   Breite des Inhalts und behält sein Seitenverhältnis, statt in einen
   randlosen Balken gezwungen zu werden: Dort bliebe auf einem
   390-px-Handy ein Viertel der Bildbreite übrig, und der Rest des
   Motivs — Grissini links, Olivenöl rechts — fiele aus dem Bild. */
.gsk__figur { margin: 0 0 clamp(2.6rem, 5vw, 4rem); }
/* Hochformat-Variante (18.08.2026): Sophias gestapelte Boxen sind 2:3. Ueber
   die volle Inhaltsbreite waeren das rund 2000 Pixel Hoehe — die drei Karten
   lagen dann weit unter dem Falz. Begrenzt auf gut eine halbe Bildschirmhoehe
   und mittig. */
.gsk__figur--hoch { text-align: center; }
.gsk__figur--hoch img {
	width: auto; max-width: min(100%, 460px);
	max-height: 62svh; margin-inline: auto;
}
.gsk__figur img { width: 100%; height: auto; border-radius: var(--wp--custom--radius); }
.gsk__figur figcaption {
	margin-top: 0.9rem; text-align: center;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.88rem;
}

/* --- Die drei Box-Karten --- */
.gsk__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 3rem); }
.gsk-karte {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: 1.5rem;
}
/* Nur vorhanden, wenn die Pflege ein Bild hinterlegt hat. Fester
   Ausschnitt, damit drei Karten nebeneinander nicht auseinanderlaufen,
   sobald jemand ein Hochformat hochlädt. */
.gsk-karte__bild {
	width: 100%; height: auto;
	aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--wp--custom--radius);
	margin-bottom: 1.3rem;
}
.gsk-karte__kopf {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 1rem; margin-bottom: 1rem;
}
.gsk-karte .gsk-karte__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.3rem, 1.8vw, 1.6rem);
	line-height: 1.1;
	margin: 0;
}
/* Das Wort vor dem Betrag steht bewusst da: Die belegte Quelle nennt
   „Wert", nicht „Preis". Solange das nicht geklärt ist, sagt die Seite
   genau das — und die Pflege kann das Wort in einem Zug ändern. */
.gsk-karte__betrag {
	margin: 0; text-align: right; white-space: nowrap;
	display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem;
}
.gsk-karte__wort {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--kicker);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-text);
}
.gsk-karte__zahl {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem; line-height: 1;
	color: var(--wp--preset--color--accent-text);
}
.gsk-karte__inhalt { list-style: none; margin: 0; padding: 0; }
.gsk-karte__inhalt li {
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.95rem; line-height: 1.55;
	padding: 0.28em 0 0.28em 1.1em; position: relative;
}
.gsk-karte__inhalt li::before {
	content: "·"; position: absolute; left: 0;
	color: var(--wp--preset--color--accent-text);
}

.gsk__notiz {
	margin: clamp(2.4rem, 4vw, 3.4rem) auto 0;
	max-width: 62ch; text-align: center;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.95rem; line-height: 1.6;
}
/* Seit dem 11.09.2026 stehen unter den drei Boxen zwei Absaetze statt der
   Inhaltslisten in den Karten: der Flyer-Absatz (was in den Boxen liegt) und
   Sophias Hinweis, dass die Zusammenstellung variieren kann. Der
   Steuer-Satz rueckt danach naeher heran. */
.gsk__beschreibung {
	margin: clamp(2.4rem, 4vw, 3.4rem) auto 0;
	max-width: 62ch; text-align: center;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--body); line-height: 1.7;
}
.gsk__variiert {
	margin: 1.1rem auto 0;
	max-width: 62ch; text-align: center;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.95rem; line-height: 1.6;
}
.gsk__beschreibung + .gsk__notiz,
.gsk__variiert + .gsk__notiz { margin-top: 1.1rem; }

/* --- Individuelle Boxen: der Weg ins Gespräch ---
   Kein zweites Formular, sondern ein abgesetzter Kasten direkt unter den drei
   fertigen Boxen (Sophia, 18.08.2026). Er steht bewusst zwischen Haarlinien
   statt in einem Rahmen — ein Kasten mit Rand wäre im Maison-System ein
   Fremdkörper, und die Sektion darunter beginnt ohnehin mit neuer Farbe. */
.gsk-indiv {
	margin: clamp(2.6rem, 5vw, 4rem) auto 0;
	max-width: 56ch; text-align: center;
	padding: clamp(1.8rem, 3.5vw, 2.6rem) 0 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
}
.gsk-indiv .gsk-indiv__titel {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
	line-height: var(--wp--custom--leading--display);
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.7rem;
}
.gsk-indiv__text {
	margin: 0; color: var(--wp--preset--color--primary-soft);
	font-size: 0.98rem; line-height: 1.65;
}
.gsk-indiv__aktion { margin: 1.4rem 0 0; }

/* --- Tüten, Wein und Panettone --- */
.gsk-mehr { background: var(--wp--preset--color--section-deep); }

/* Vorbestellung: der Hinweis, unter dem die Panettone-Preise stehen.
   Goldene Haarlinie links statt eines gelben Kastens — er muss auffallen,
   ohne aus dem System zu fallen. */
.gsk-mehr__vormerk {
	margin: 1.4rem 0 0;
	padding: 0.85em 0 0.85em 1.1em;
	border-left: 2px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	font-size: 0.95rem; line-height: 1.6;
}
/* Gleich breite Spalten seit dem 03.09.2026 (Jakob: „Es sollte das gleiche
   Format haben, wie links."). Bei 1.1fr / 1fr war das linke Bild sichtbar
   groesser als das rechte, obwohl beide dasselbe Seitenverhaeltnis tragen. */
.gsk-mehr__spalten { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
/* Der Panettone-Film (11.09.2026): mittig unter beiden Spalten, im
   Hochformat, laeuft erst auf Klick. Ein hochgeladenes Querformat bleibt
   dank contain ganz sichtbar. */
.gsk-film { margin: clamp(2.8rem, 5vw, 4rem) auto 0; max-width: 21rem; text-align: center; }
.gsk-film__clip {
	display: block; width: 100%; height: auto;
	aspect-ratio: 9 / 16; object-fit: contain; background: #000;
	border-radius: var(--wp--custom--radius);
}
.gsk-film__text {
	margin: 0.9rem auto 0; max-width: 34ch;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.92rem; line-height: 1.55;
}
/* Gruppenbild ueber der Liste, seit 03.09.2026 (Sophias Tuetenfoto). Es steht
   zwischen Ueberschrift und Posten und traegt dieselbe Rundung wie die
   Produktkacheln. */
.gsk-mehr__bild { margin: 0 0 1.4rem; }
.gsk-mehr__bild img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 3 / 2; object-fit: cover;
	border-radius: var(--wp--custom--radius);
}
.gsk-mehr .gsk-mehr__untertitel {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--kicker);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-text);
	margin: 0 0 1.4rem;
}
.gsk-liste { list-style: none; margin: 0; padding: 0; }
.gsk-liste li {
	padding: 0.95em 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
	display: grid; grid-template-columns: 1fr auto; column-gap: 1.4rem;
	align-items: baseline;
}
.gsk-liste li:last-child { border-bottom: 1px solid var(--wp--preset--color--hairline); }
.gsk-liste__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem; line-height: 1.25;
	color: var(--wp--preset--color--primary);
}
.gsk-liste__betrag {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem; line-height: 1.25; white-space: nowrap;
	color: var(--wp--preset--color--accent-text);
}
.gsk-liste__inhalt {
	grid-column: 1 / -1;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.9rem; margin-top: 0.25rem;
}
/* Die Bildspalte entsteht erst, wenn wirklich ein Bild da ist — ohne
   Eintrag bleibt die Zeile eine reine Textzeile ohne Leerspalte. */
.gsk-liste li.gsk-liste__mit-bild { grid-template-columns: 96px 1fr auto; }
.gsk-liste__bild {
	grid-column: 1; grid-row: 1 / -1; align-self: center;
	width: 96px; height: 96px; object-fit: cover;
	border-radius: var(--wp--custom--radius);
}
.gsk-liste__mit-bild .gsk-liste__inhalt { grid-column: 2 / -1; }
.gsk-mehr__notiz {
	margin: 1.4rem 0 0;
	max-width: 48ch;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.9rem; line-height: 1.6;
}

/* --- Band: der Querverweis auf den Gutschein --- */
.gsk__bandlink { margin: 1.8rem 0 0; }

/* --- Anfrage: was wir brauchen ---
   Steht nur im Rückfall ohne Formular. Dann ist diese Liste die einzige
   Stelle, an der der Gast erfährt, was in die Nachricht gehört. */
.gsk__brauchen {
	list-style: none; margin: 0 auto 2.4rem; padding: 0;
	max-width: 34rem; text-align: left;
}
.gsk__brauchen li {
	position: relative;
	padding: 0.8em 0 0.8em 1.4em;
	border-top: 1px solid var(--wp--preset--color--hairline-light);
	color: var(--wp--custom--on-dark--text);
	font-size: 0.95rem; line-height: 1.55;
}
.gsk__brauchen li:last-child { border-bottom: 1px solid var(--wp--preset--color--hairline-light); }
.gsk__brauchen li::before {
	content: "·"; position: absolute; left: 0;
	color: var(--wp--preset--color--accent-light);
}

@media (max-width: 900px) {
	.gsk__raster { grid-template-columns: 1fr; gap: 2.2rem; }
	.gsk-mehr__spalten { grid-template-columns: 1fr; gap: 2.8rem; }
	/* Ein Hochkant-Handy zeigt vom Panorama sonst eine sehr flache Zeile —
	   im Fluss der Seite ist das in Ordnung, ein fester Ausschnitt wäre es
	   nicht. Deshalb bleibt hier nur der Abstand kleiner. */
	.gsk__figur { margin-bottom: 2.4rem; }
}

@media (max-width: 560px) {
	.gsk-karte__kopf { flex-wrap: wrap; gap: 0.4rem 1rem; }
	.gsk-karte__betrag { align-items: flex-start; text-align: left; }
	.gsk-liste li.gsk-liste__mit-bild { grid-template-columns: 72px 1fr auto; }
	.gsk-liste__bild { width: 72px; height: 72px; }
}

/* --- ABSCHNITT GESCHENKIDEEN — Ende --- */

/* --- ABSCHNITT RESTOBAR — Anfang --- */

/* ================================================================
   Restobar — der Tagesbogen in sieben Stationen

   ENTFALLEN AM 16.08.2026: die schmalen Zwischenstationen (.stat).

   Vom 15. bis zum 16.08. waren nur die drei Mahlzeiten ein Kapitel,
   die vier Zwischenmomente standen als schmales Textband dazwischen —
   ein Versuch, die Seite kurz zu halten. Der Kunde wollte durchgehend
   dieselbe Form. Alle sieben Stationen sind jetzt .tag; die rund
   sechzig Zeilen für .stat sind ersatzlos gestrichen, damit niemand
   sie in einem halben Jahr für eine noch benutzte Form hält.

   Der Bogen entsteht seitdem allein aus .tag: Bildseite wechselt bei
   jedem Kapitel (siehe .tag--gespiegelt), der Grund wird Station um
   Station dunkler bis .tag--nacht. Beides steht oben im .tag-Block.
   ================================================================ */

/* ================================================================
   Restobar — fünf Karten statt zwei

   Drei Speisekarten in der ersten Reihe, die beiden Getränkekarten
   darunter. Ein Sechser-Raster trägt beide Reihen randbündig: dreimal
   zwei Spalten, dann zweimal drei. Die breiten Kacheln bekommen ein
   liegendes Format, sonst würden sie bei 4:5 fast achthundert Pixel
   hoch.

   Die Regeln stehen hier statt oben bei .karten__grid, weil dieser
   Abschnitt später in der Datei liegt und damit gewinnt — die
   abgenommenen Regeln bleiben unangetastet. Der Umbruch bei 900 px
   muss deshalb hier wiederholt werden; er steht oben VOR diesen Zeilen
   und würde sonst nicht mehr greifen.
   ================================================================ */

.karten__grid { grid-template-columns: repeat(6, 1fr); }
.karten__grid > * { grid-column: span 2; }
.karten__grid > .cover--breit { grid-column: span 3; }
.cover--breit { aspect-ratio: 16 / 10; }

/* ================================================================
   Restobar — das Karten-Fenster

   Ein <dialog> für alle fünf Kacheln, gefüllt wird es beim Klick.
   Fokusfang, Escape und die Sperre des Hintergrunds übernimmt der
   Browser — dasselbe Muster wie beim Reservierungs-Dialog.

   'margin: auto' ist hier kein Zierrat: Das Fenster steht im Markup
   innerhalb von <main>, und WordPress legt auf jedes Kind einer
   Flow-Gruppe seinen Blockabstand ab. Ohne die eigene Angabe gewinnt
   dieses 'margin-block-start: 24px' gegen die Browser-Vorgabe
   'margin: auto' und schiebt das geöffnete Fenster aus der Mitte nach
   oben.
   ================================================================ */

.ktdlg {
	width: min(760px, calc(100vw - 2rem));
	height: min(92svh, 960px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--section);
	color: var(--wp--preset--color--primary);
	box-shadow: 0 40px 90px -30px rgba(16, 22, 15, 0.55);
	overflow: hidden;
}
/* Die doppelseitig gedruckte Getränkekarte liegt quer. Im hochkanten
   Fenster stünden ihre zwei Seiten nebeneinander und wären unlesbar
   klein (Hinweis Sophia, 13.08.2026). */
.ktdlg--quer {
	width: min(1120px, calc(100vw - 2rem));
	height: min(88svh, 820px);
}
.ktdlg[open] { display: flex; flex-direction: column; }
.ktdlg::backdrop { background: rgba(16, 22, 15, 0.72); }

.ktdlg__kopf {
	flex: 0 0 auto;
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem clamp(1.25rem, 4vw, 2rem) 1rem;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.ktdlg .ktdlg__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-s);
	margin: 0;
}
.ktdlg__schliessen {
	background: none; border: 0; cursor: pointer;
	font-size: 1.8rem; line-height: 1;
	color: var(--wp--preset--color--primary-soft);
	/* Klickfläche auf 44 px, ohne das Zeichen zu vergrößern. */
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	margin: -0.5rem -0.75rem -0.5rem 0;
	transition: color 0.4s var(--wp--custom--ease);
}
.ktdlg__schliessen:hover { color: var(--wp--preset--color--primary); }

/* Die Bühne füllt, was zwischen Kopf und Fuß übrig bleibt. 'min-height: 0'
   ist nötig, sonst wächst ein Flex-Kind nie unter seine Inhaltshöhe und
   der Rahmen schiebt den Fuß aus dem Fenster. */
.ktdlg__buehne {
	flex: 1 1 auto;
	min-height: 0;
	background: var(--wp--preset--color--section-deep);
}
.ktdlg__buehne iframe {
	width: 100%; height: 100%;
	border: 0; display: block;
}

.ktdlg__fuss {
	flex: 0 0 auto;
	margin: 0;
	padding: 0.9rem clamp(1.25rem, 4vw, 2rem) 1.1rem;
	border-top: 1px solid var(--wp--preset--color--hairline);
	display: flex; flex-wrap: wrap; align-items: baseline;
	gap: 0.2rem 1.2rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--primary-soft);
}
/* Unterstrichen statt mit Rahmenlinie: Das Polster bringt die
   Klickfläche auf über 24 px (WCAG 2.5.8), eine border-bottom stünde
   dann weit unter der Schrift. */
.ktdlg__direkt {
	display: inline-block;
	padding-block: 0.5rem;
	color: var(--wp--preset--color--accent-text);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}
.ktdlg__direkt:hover { color: var(--wp--preset--color--primary); }
.ktdlg__hinweis:empty { display: none; }

/* ================================================================
   Restobar — Umbrüche
   ================================================================ */

@media (max-width: 900px) {
	/* Der Umbruch von oben, hier wiederholt — siehe die Anmerkung am
	   Karten-Raster. Ohne diese drei Zeilen stünden auf dem Telefon
	   weiter sechs Rasterspalten. */
	.karten__grid { grid-template-columns: 1fr; }
	.karten__grid > *,
	.karten__grid > .cover--breit { grid-column: auto; }
}

/* --- ABSCHNITT RESTOBAR — Ende --- */

/* --- ABSCHNITT FEINKOST — Anfang --- */

/* ================================================================
   Feinkost — Neuausrichtung 14.08.2026

   Die Seite loest nicht mehr das Sortiment auf, sondern zeigt die
   Verbindung: im Restaurant probieren, danach mitnehmen. Dafuer sind
   drei Formen dazugekommen, alle aus dem bestehenden Maison-System
   abgeleitet, damit die abgenommene Formsprache unveraendert bleibt:

     .verbindung — die drei Schritte, je mit Haarlinie oben und
                   Grossziffer (Zaehlform wie .versprechen auf Catering,
                   Haarlinie wie .pos)
     .auswahl    — die Top-Produkte samt Regal-Liste und Notiz
     .pkachel    — Produktkachel mit Bild OBEN und Text darunter.
                   Bewusst NICHT die Ueberlagerung von .welt: Genau die
                   war das aufgeloeste Sortimentsraster, und die Kachel
                   soll nicht so aussehen wie das, was ersetzt wurde.
     .regal      — die knappe Aufzaehlung darunter, Zeilen zwischen
                   Haarlinien wie .platten__liste auf Catering.

   Zu den Namen: Der Abschnitt hiess zuerst .weg und .top. Beides war
   falsch. .weg gibt es bereits auf der Kontaktseite („die Wege zu uns"),
   die Regel dort haette dieser Sektion eine Haarlinie verpasst und
   umgekehrt haetten die vier Kontaktkarten hier den Beige-Grund bekommen.
   Und .top ist als Name so allgemein, dass die naechste Hilfsklasse
   darueber stolpert. Vor dem Anlegen einer Sektionsklasse deshalb im
   ganzen Stylesheet nachsehen, nicht nur im eigenen Abschnitt.

   Kontraste gemessen (WCAG AA):
     accent-text  #795E2B auf section  #F2E9DE  5,07:1
     accent-text  #795E2B auf base     #F6EFE6  5,34:1
     accent-large #9D7937 auf section  #F2E9DE  3,35:1  (nur ab 24 px)
     accent-large #9D7937 auf base     #F6EFE6  3,52:1  (nur ab 24 px)
     primary-soft #4C5349 auf section  #F2E9DE  6,62:1
     primary-soft #4C5349 auf base     #F6EFE6  6,97:1
     accent       #B0883E auf primary  #18201C  5,10:1
   ================================================================ */

/* --- Die Verbindung: probieren, fragen, mitnehmen --- */
.verbindung { background: var(--wp--preset--color--section); }
.verbindung__kopf { text-align: center; margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.verbindung .verbindung__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.verbindung .verbindung__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	max-width: 20ch; margin: 0 auto 1.3rem;
}
.verbindung__lead {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
	max-width: 56ch; margin: 0 auto;
}

.verbindung__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
}
.schritt {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: 1.6rem;
}
/* Bild je Schritt, seit 02.09.2026 (Sophia, Part 5: „mehr mit bilder
   arbeiten??"). Es steht unter der Haarlinie und ueber der Ziffer: Die
   Haarlinie bleibt der Trenner der Spalte, das Bild fuehrt in den Schritt
   hinein. 3:2 quer, damit die drei Spalten gleich hoch beginnen — die
   Quelldateien sind teils hoch, teils quer aufgenommen. */
.schritt__bild { margin: 0 0 1.4rem; }
.schritt__bild img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 3 / 2; object-fit: cover;
	border-radius: var(--wp--custom--radius);
}
/* 38 px — damit gilt fuer das Gold die AA-Grenze fuer grosse Schrift (3:1).
   Die Ziffer ist zusaetzlich aria-hidden, weil <ol> die Reihenfolge bereits
   ansagt; sie ist Gestaltung, keine Information. */
.schritt__nr {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.4rem; line-height: 1;
	color: var(--wp--preset--color--accent-large);
	margin: 0 0 0.9rem;
}
.verbindung .schritt__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.4rem, 2vw, 1.75rem);
	line-height: 1.15;
	margin: 0 0 0.8rem;
}
.schritt__text {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--body);
	max-width: 34ch; margin: 0;
}

/* --- Top-Produkte --- */
.auswahl__kopf { text-align: center; margin-bottom: clamp(2.6rem, 5vw, 3.6rem); }
.auswahl .auswahl__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.auswahl .auswahl__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	max-width: 22ch; margin: 0 auto 1.3rem;
}
.auswahl__lead {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
	max-width: 54ch; margin: 0 auto;
}

.auswahl__grid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.4rem, 2.6vw, 2.4rem);
}
.pkachel { display: flex; flex-direction: column; }
.pkachel__bild {
	margin: 0 0 1.4rem;
	overflow: hidden;
	border-radius: var(--wp--custom--radius);
	aspect-ratio: 3 / 2;
}
.pkachel__bild img {
	display: block; width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 1.4s var(--wp--custom--ease-out);
}
.pkachel:hover .pkachel__bild img { transform: scale(1.07); }
.auswahl .pkachel__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.3rem, 1.9vw, 1.6rem);
	line-height: 1.15;
	margin: 0 0 0.7rem;
}
.pkachel__text {
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.95rem; line-height: 1.55;
	max-width: 36ch; margin: 0;
}

/* --- Und im Regal: die knappe Aufzaehlung --- */
.regal {
	margin-top: clamp(3rem, 6vw, 5rem);
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: clamp(2.2rem, 4vw, 3rem);
}
.auswahl .regal__ueber {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-s);
	line-height: 1.1;
	/* 10.09.2026 (Sophia): Die Ueberschrift stand zentriert ueber Bild UND
	   Texten und gehoerte zu keinem von beiden — „Entweder hier buendig zum
	   Bild oder hier zum Text". Jetzt linksbuendig ueber den drei Texten;
	   die Spalte weist ihr das Raster darunter zu. */
	text-align: left;
	margin: 0;
}
.regal__spalten {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.6rem, 4vw, 3.5rem);
}
/* BILD NEBEN DEN SPALTEN, seit 03.09.2026 (Sophia: „Hier gerne mehr mit
   Bilder Arbeiten"). Der Block wird zweispaltig — Bild links, die drei
   Texte rechts untereinander. Das ist dasselbe Verhaeltnis wie auf der
   Folie ihrer Praesentation, aus der auch der Text stammt.

   Die Umstellung der Spalten auf eine Reihe steht hier und nicht in einer
   Media Query: Sie gilt ab 901 px, und darunter greifen die beiden
   bestehenden Abfragen am Dateiende (zwei Spalten ab 900, eine ab 560).
   Eine Media Query erhoeht die Spezifitaet nicht — sie muss deshalb spaeter
   im Stylesheet stehen als diese Regel, und das tut sie. */
.regal {
	display: grid;
	grid-template-columns: 0.75fr 1.25fr;
	grid-template-rows: auto 1fr;
	gap: clamp(1.2rem, 2vw, 1.8rem) clamp(1.8rem, 4vw, 3.4rem);
	align-items: start;
}
/* Ueberschrift und Texte teilen sich die rechte Spalte, das Bild haengt links
   ueber beide Zeilen — so steht „Und im Regal" genau ueber „Unter eigenem
   Etikett" (Sophia, 10.09.2026). */
.regal__ueber { grid-column: 2; grid-row: 1; }
.regal__bild { margin: 0; grid-column: 1; grid-row: 1 / 3; }
.regal__spalten { grid-column: 2; grid-row: 2; }
.regal__bild img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 2 / 3; object-fit: cover;
	border-radius: var(--wp--custom--radius);
}
.regal__spalten { grid-template-columns: 1fr; }
.auswahl .regal__titel {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--kicker);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-text);
	margin: 0 0 1.1rem;
}
/* Seit 03.09.2026 steht in jeder Regalspalte ein Absatz statt einer
   Produktliste (Sophia: „Lieber allgemeiner halten"). Die Haarlinie bleibt
   als Trenner unter der Ueberschrift — sie hielt die Spalten vorher zusammen
   und tut es weiter, jetzt nur noch einmal statt je Zeile. */
.regal__text {
	margin: 0;
	padding-top: 0.9em;
	border-top: 1px solid var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.95rem; line-height: 1.55;
}

/* Die einzige Preisangabe der Seite. Steht bewusst als Notiz und nicht in
   der Liste — es ist ein Gericht der Restobar, kein Regalprodukt, und es
   gibt es erst ab Herbst wieder. */
.auswahl__notiz {
	margin: clamp(2.4rem, 4vw, 3.4rem) auto 0;
	max-width: 58ch; text-align: center;
	color: var(--wp--preset--color--accent-text);
	font-size: 0.98rem; line-height: 1.6;
}

@media (max-width: 900px) {
	.verbindung__grid { grid-template-columns: 1fr; gap: 2.2rem; }
	.auswahl__grid { grid-template-columns: 1fr; gap: 2.6rem; }
	/* Gestapelt steht die Kachel ueber die volle Breite — im Hochformat
	   waere das ein halber Bildschirm Bild vor drei Zeilen Text. */
	.pkachel__bild { aspect-ratio: 16 / 10; }
	/* Bild oben, Texte darunter — nebeneinander bliebe fuer beides zu wenig.
	   Die festen Zellen von oben werden hier aufgehoben, sonst laege das Bild
	   in einer Spalte, die es nicht mehr gibt. */
	/* Zeilenabstand wieder auf das alte Mass: Gestapelt gleitet jeder Block
	   beim Einblenden 24 px von unten herein; bei 19 px Abstand ueberlappt er
	   dabei kurz den Block darueber (pruefe-responsive.js, 10.09.2026, 360 px). */
	.regal { grid-template-columns: 1fr; grid-template-rows: none; row-gap: clamp(1.8rem, 4vw, 3.4rem); }
	.regal__ueber, .regal__bild, .regal__spalten { grid-column: auto; grid-row: auto; }
	.regal__spalten { grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; }
}

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

/* --- ABSCHNITT FEINKOST — Ende --- */

/* --- ABSCHNITT SCHLICHTE SEITEN — Anfang --- */

/* ================================================================
   Seiten ohne Hero (Rechtstexte, 404, Suche)

   Diese Seiten laufen über templates/page.html und haben keinen
   Sub-Hero. Zwei Dinge gehen dadurch schief, beide am 16.08.2026 auf
   der Seite Barrierefreiheit gefunden:

   1. Der Kopf ist über dem Hero transparent mit beigem Logo und
      wechselt erst ab 70 % Viewport-Scroll auf hellen Grund. Ohne Hero
      steht er beige auf beige — die Navigation ist unsichtbar, das
      Logo ebenso. Er startet hier deshalb sofort im hellen Zustand.
   2. Die Typografie des Themes ist auf Marketingseiten gerechnet:
      H1 bis 4,4 rem, H2 bis 3,2 rem, Fließtext über 1300 px Breite.
      Ein Rechtstext wird so zur Plakatwand, und eine Zeile mit über
      90 Zeichen liest niemand gern. Beides eine Stufe zurück.

   DIE BEDINGUNG WAR ZUERST FALSCH GEZOGEN (korrigiert 16.08.2026).
   Sie fragte in functions.php, ob es zum Slug ein eigenes Template
   gibt — und traf damit auch die Startseite, die über front-page.html
   läuft. Der Kopf bekam dort seinen hellen Grund und legte sich als
   Balken über den Hero, statt darin zu verschwinden.

   Jetzt fragt die Bedingung genau das, worum es geht: Steht auf dieser
   Seite überhaupt ein Hero? `:has()` prüft das am fertigen Dokument
   und braucht dazu weder eine Seitenliste noch einen Template-Namen.
   Eine neue Seite mit Hero ist damit von selbst richtig, eine ohne
   ebenso.
   ================================================================ */

/* Kurzschreibweise für „diese Seite hat keinen Hero". Beide Klassen
   müssen genannt werden: .hero ist der Startseiten-Hero, .shero der
   der Unterseiten. */

/* --- Der Kopf --- */

body:not(:has(.hero, .shero)) .hdr {
	background: rgba(246, 239, 230, 0.94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 1px 0 var(--wp--preset--color--hairline);
}
body:not(:has(.hero, .shero)) .hdr .lg-beige { opacity: 0; }
body:not(:has(.hero, .shero)) .hdr .lg-black { opacity: 1; }
body:not(:has(.hero, .shero)) .hdr .navlink,
body:not(:has(.hero, .shero)) .hdr .hdr__lang { color: var(--wp--preset--color--primary); }
body:not(:has(.hero, .shero)) .hdr .hdr__cta {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
}
body:not(:has(.hero, .shero)) .hdr .burger__line,
body:not(:has(.hero, .shero)) .hdr .burger__line::before,
body:not(:has(.hero, .shero)) .hdr .burger__line::after { background: var(--wp--preset--color--primary); }

/* --- Die Textspalte --- */

/* Die Lesebreite. Rund 68 Zeichen bei 1 rem Fließtext.

   ACHTUNG, NICHT IN ch: `ch` rechnet gegen die Schriftgröße des eigenen
   Elements. Am Titel mit seinen 70 px werden aus 68ch dann 2394 px —
   die Begrenzung greift dort einfach nicht, und der Titel steht in
   voller Breite links neben dem zentrierten Text. Ein Wert in rem hängt
   an der Wurzel und gilt für beide gleich.

   Und OHNE `>`: Der Titel ist kein direktes Kind von <main>, sondern
   steckt eine Ebene tiefer in der Layout-Gruppe. */
body:not(:has(.hero, .shero)) {
	--dg-lesebreite: 36rem;
}
body:not(:has(.hero, .shero)) main .wp-block-post-title,
body:not(:has(.hero, .shero)) main .wp-block-post-content {
	max-width: var(--dg-lesebreite);
	margin-inline: auto;
}

/* Die Spezifität ist nötig: WordPress hängt dem Titel die Klasse
   `.has-heading-l-font-size` an, und die schlägt eine einfache Regel. */
body:not(:has(.hero, .shero)) main .wp-block-post-title.has-heading-l-font-size,
body:not(:has(.hero, .shero)) main .wp-block-post-title {
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	line-height: 1.08;
	margin-bottom: 1.6rem;
}
body:not(:has(.hero, .shero)) main h2 {
	font-size: clamp(1.5rem, 2.4vw, 2.05rem);
	line-height: 1.14;
	margin-top: 2.8rem; margin-bottom: 0.9rem;
}
body:not(:has(.hero, .shero)) main h3 {
	font-size: clamp(1.15rem, 1.6vw, 1.4rem);
	line-height: 1.2;
	margin-top: 2rem; margin-bottom: 0.7rem;
}
body:not(:has(.hero, .shero)) main p,
body:not(:has(.hero, .shero)) main li {
	font-size: 1rem;
	line-height: 1.72;
	color: var(--wp--preset--color--primary-soft);
}
body:not(:has(.hero, .shero)) main li { margin-bottom: 0.5rem; }
body:not(:has(.hero, .shero)) main ul,
body:not(:has(.hero, .shero)) main ol { margin-bottom: 1.6rem; }

/* --- ABSCHNITT SCHLICHTE SEITEN — Ende --- */

/* ================================================================
   Mitlaufende Sprungmarke
   Catering und Geschenkideen zum Bestellformular, Restobar zur
   Reservierung. Sie erscheint nach dem Hero und geht wieder weg,
   sobald das Ziel im Bild ist — ein Knopf, der neben dem Formular
   weiterschwebt, verdeckt es nur.

   Der Grundzustand ist SICHTBAR. Erst die Klasse `js` am <html>
   (gesetzt in functions.php, noch im head) uebergibt die Steuerung
   an frontend.js. Ohne Skript bleibt der Knopf also stehen und
   funktioniert als gewoehnlicher Ankerlink.
   ================================================================ */
.sprung {
	position: fixed;
	right: clamp(16px, 3vw, 32px);
	bottom: clamp(16px, 3vw, 32px);
	left: auto;
	z-index: 60;
	transition: opacity 0.45s var(--wp--custom--ease-out),
	            transform 0.45s var(--wp--custom--ease-out);
}

/* Mit JavaScript zunaechst weg — der Beobachter entscheidet. */
.js .sprung {
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	pointer-events: none;
}
.js .sprung.is-da {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

.sprung__knopf {
	/* Ueber 44 px hoch (WCAG 2.5.5) — auf dem Telefon Daumenziel. */
	min-height: 48px;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
	text-decoration: none;
}
.sprung__pfeil {
	display: inline-block;
	transition: transform 0.5s var(--wp--custom--ease-out);
}
.sprung__knopf:hover .sprung__pfeil { transform: translateY(3px); }

/* Auf dem Telefon ueber die volle Breite: Dort ist der Weg zum
   Formular am laengsten, und ein kleiner Knopf in der Ecke wird
   beim Scrollen mit dem Daumen verdeckt. */
@media (max-width: 600px) {
	.sprung {
		right: 16px;
		left: 16px;
		bottom: 16px;
	}
	.sprung__knopf {
		width: 100%;
		justify-content: center;
	}
}

/* Der Knopf bleibt, nur die Bewegung geht. */
@media (prefers-reduced-motion: reduce) {
	.sprung { transition: none; }
	.js .sprung { transform: none; }
	.sprung__knopf:hover .sprung__pfeil { transform: none; }
}

/* Im Still-Modus stoert er den Abgleich — dort liegt er ueber der
   Seite und taucht auf jedem Vollseiten-Screenshot auf. */
body.is-still .sprung { display: none; }

/* Mehrwertsteuer-Hinweis unter Platten und Einzelposten (18.08.2026).
   Erscheint nur, wenn dort wirklich Preise gepflegt sind. */
.platten__notiz {
	margin: clamp(2rem, 3.5vw, 2.8rem) 0 0;
	text-align: center;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.9rem;
}

/* ================================================================
   Kooperation — die Mappe als eingebettetes PDF (18.08.2026)
   ================================================================
   Die Buehne steht auf 3:2 und damit nahe an einer Querformat-Folie.
   Ein festes Seitenverhaeltnis statt einer festen Hoehe: Sonst ist die
   Mappe auf einem 27-Zoll-Bildschirm ein Briefmarkenfenster.

   Ohne Rahmen (Telefon, Tablet, kein JavaScript) nimmt der Behaelter
   keinen Platz ein — dort traegt der Knopf darunter die Sache allein. */
.mappe { background: var(--wp--preset--color--section-deep); }
.mappe__kopf { text-align: center; margin-bottom: clamp(2.2rem, 4vw, 3rem); }
.mappe .mappe__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.mappe .mappe__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: var(--wp--custom--leading--display);
	color: var(--wp--preset--color--primary);
	margin: 0 0 1rem;
}
.mappe__lead {
	max-width: 56ch; margin: 0 auto;
	color: var(--wp--preset--color--primary-soft);
	font-size: 1rem; line-height: 1.7;
}
.mappe__buehne:empty { display: none; }
.mappe__buehne {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
}
.mappe__buehne iframe {
	position: absolute; inset: 0;
	width: 100%; height: 100%; border: 0;
}
.mappe__fuss {
	display: flex; align-items: center; justify-content: center;
	flex-wrap: wrap; gap: 0.9rem 1.4rem;
	margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
}
.mappe__knopf { min-height: 48px; }
.mappe__umfang {
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.88rem;
}

/* ================================================================
   Hinweis-Fenster unten rechts (Startseite) — 18.08.2026
   ================================================================
   Ersetzt das Specials-Band, das am Ende der Restobar-Seite stand.
   Bewusst KEIN modales Fenster: Es verdeckt nichts und verlangt keine
   Handlung. Gebaut wird es in theme/inc/hinweis.php, gepflegt unter
   DEGUSTO Inhalte → Hinweis-Fenster.

   Die Sprungmarke sitzt an derselben Stelle (unten rechts, z-index 60).
   Das ist kein Konflikt: Der Hinweis erscheint nur auf der Startseite,
   die Sprungmarke nur auf Catering, Geschenkideen und Restobar. Sollte
   das jemals zusammenfallen, liegt der Hinweis eine Stufe hoeher und
   ist der Kasten, den man wegklickt. */
.hnw {
	position: fixed;
	right: clamp(16px, 3vw, 32px);
	bottom: clamp(16px, 3vw, 32px);
	z-index: 70;
	width: min(340px, calc(100vw - 32px));
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 24px 60px -20px rgba(16, 22, 15, 0.45);
	overflow: hidden;
	/* Bis das Skript uebernimmt: unsichtbar und nicht anklickbar. Ohne
	   JavaScript bleibt es dabei — ein Kasten, der sich nicht schliessen
	   laesst, waere schlimmer als gar keiner. */
	opacity: 0;
	transform: translateY(14px);
	pointer-events: none;
	transition: opacity 0.4s var(--wp--custom--ease-out),
	            transform 0.4s var(--wp--custom--ease-out);
}
.hnw.is-da { opacity: 1; transform: none; pointer-events: auto; }

/* Am Fuss tritt der Kasten zurueck — er liegt dort sonst ueber der rechten
   Fussspalte und verdeckt Impressum, Datenschutz und die
   Barrierefreiheitserklaerung (gemessen 28.08.2026, jede Breite ab 601 px).
   Steht NACH `.is-da`, sonst gewinnt die Klasse von oben. Wer wieder
   hochrollt, bekommt den Hinweis zurueck; die Merkung bleibt unberuehrt. */
.hnw.is-da.is-am-fuss {
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
}

.hnw__bild {
	display: block; width: 100%; height: auto;
	aspect-ratio: 16 / 9; object-fit: cover;
}

/* Der Schliessknopf.

   ZIELFLAECHE 44 x 44, SICHTBARER KREIS 34 (WCAG 2.5.5). Der Knopf selbst
   ist durchsichtig und nur so gross, wie der Daumen ihn braucht; den Kreis
   traegt das <span> darin. Ein 34-px-Knopf waere auf dem Telefon zu klein
   gewesen, ein 44-px-Kreis in der Ecke eines schmalen Kastens zu wuchtig.

   Der Kreis ist dunkel, weil der Knopf UEBER dem Bild liegt — auf einem
   hellen Motiv waere ein blosses Kreuz nicht zu sehen. */
.hnw__zu {
	position: absolute; top: 2px; right: 2px; z-index: 2;
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	background: none; border: 0; padding: 0; cursor: pointer;
	color: var(--wp--preset--color--section);
}
.hnw__zu > span {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	background: rgba(16, 22, 15, 0.55);
	border-radius: 50%;
	font-size: 1.35rem; line-height: 1;
	transition: background 0.3s var(--wp--custom--ease);
}
.hnw__zu:hover > span,
.hnw__zu:focus-visible > span { background: rgba(16, 22, 15, 0.8); }
/* Ohne Bild sitzt das Kreuz auf hellem Beige — dort passt der dunkle
   Kreis nicht, und noetig ist er auch nicht. */
.hnw:not(:has(.hnw__bild)) .hnw__zu { color: var(--wp--preset--color--primary-soft); }
.hnw:not(:has(.hnw__bild)) .hnw__zu > span { background: none; }
.hnw:not(:has(.hnw__bild)) .hnw__zu:hover { color: var(--wp--preset--color--primary); }
.hnw:not(:has(.hnw__bild)) .hnw__zu:hover > span,
.hnw:not(:has(.hnw__bild)) .hnw__zu:focus-visible > span { background: none; }

.hnw__inhalt { padding: 1.3rem 1.4rem 1.5rem; }
.hnw .hnw__kicker {
	color: var(--wp--preset--color--accent-text);
	margin: 0 0 0.6rem;
}
.hnw__titel {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.28rem; line-height: 1.15;
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.5rem;
}
.hnw__text {
	margin: 0;
	color: var(--wp--preset--color--primary-soft);
	font-size: 0.92rem; line-height: 1.6;
}
.hnw__aktion { margin: 1.15rem 0 0; }
.hnw__knopf { min-height: 44px; }

/* Auf dem Telefon ueber die volle Breite und ohne Bild-Grossformat:
   Ein 16:9-Motiv frisst dort die halbe Hoehe des Kastens. */
@media (max-width: 600px) {
	.hnw {
		right: 12px; left: 12px; bottom: 12px;
		width: auto;
	}
	.hnw__bild { aspect-ratio: 21 / 9; }
	.hnw__inhalt { padding: 1.1rem 1.2rem 1.3rem; }
}

/* Wer weniger Bewegung will, bekommt den Kasten ohne Gleiten —
   aber er bekommt ihn. */
@media (prefers-reduced-motion: reduce) {
	.hnw { transition: opacity 0.2s linear; transform: none; }
	.hnw.is-da { transform: none; }
}

/* ================================================================
   Sub-Hero mit Video (10.09.2026)
   ================================================================

   Sophia moechte das Video von Peters Abend „als Headliner" auf der
   Veranstaltungsseite. Der Baustein (inc/bausteine.php) legt es ueber das
   Bild; das Bild bleibt darunter liegen und traegt, solange das Video
   laedt, wenn es fehlt oder wenn jemand weniger Bewegung will. Der Knopf
   unten rechts haelt es an (WCAG 2.2.2: Bewegtes ueber fuenf Sekunden
   muss sich anhalten lassen). */
.shero__video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	background: transparent;
}
/* Querfassung eines Hochformat-Films (11.09.2026): ein Querausschnitt je
   Einstellung über die ganze Breite (Jakob: „im Hintergrund, nicht als
   kleines 9:16 rechts"). Die Datei ist 2:1; cover schneidet auf den üblichen
   Desktop-Formaten oben und unten gleichmäßig — deshalb keine eigene
   object-position. Die Klasse bleibt als Haken für spätere Fassungen. */
/* Auf dem Telefon füllt der Film den ganzen Seitenkopf, und die Szenen
   wechseln alle ein bis zwei Sekunden — darunter der weiße Weinkühler, auf
   dem die weiße Überschrift sonst kaum steht (gemessen 11.09.2026). Deshalb
   ist der Textbereich unten dunkler als bei einem ruhigen Foto; das obere
   Drittel bleibt hell. Gleiche Bedingung wie die Hochformat-Quelle. */
@media (orientation: portrait), (max-width: 900px) {
	.shero--video .shero__scrim {
		background:
			linear-gradient(90deg, rgba(16, 22, 15, 0.30) 0%, rgba(16, 22, 15, 0.08) 70%),
			linear-gradient(180deg, rgba(16, 22, 15, 0.40) 0%, rgba(16, 22, 15, 0.12) 32%, rgba(16, 22, 15, 0.58) 58%, rgba(16, 22, 15, 0.82) 100%);
	}
}
.shero__pause {
	position: absolute; right: var(--wp--custom--gutter); bottom: clamp(1.2rem, 3vh, 2rem);
	z-index: 3;
	display: inline-flex; align-items: center; gap: 0.55em;
	min-height: 44px; padding: 0.55em 1em;
	border: 1px solid rgba(242, 233, 222, 0.55);
	border-radius: 999px;
	background: rgba(16, 22, 15, 0.55);
	color: var(--wp--preset--color--section);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.74rem; font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--button);
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.3s var(--wp--custom--ease), border-color 0.3s var(--wp--custom--ease);
}
.shero__pause:hover { background: rgba(16, 22, 15, 0.78); border-color: rgba(242, 233, 222, 0.9); }
.shero__pause:focus-visible { outline: 2px solid var(--wp--preset--color--section); outline-offset: 3px; }
/* Das Zeichen: zwei Balken (laeuft) oder ein Dreieck (angehalten), rein aus
   Raendern gebaut — kein Icon-Font, keine Grafik. */
.shero__pause-zeichen {
	display: inline-block; width: 10px; height: 12px;
	border-left: 3px solid currentColor; border-right: 3px solid currentColor;
	box-sizing: border-box;
}
.shero--angehalten .shero__pause-zeichen {
	width: 0; height: 0;
	border-left: 10px solid currentColor; border-right: 0;
	border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
/* Angehalten bleibt das letzte Bild des Videos stehen — bewusst, damit die
   Seite nicht springt. */
@media (max-width: 600px) {
	.shero__pause { bottom: 0.9rem; }
	.shero__pause-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.shero__pause { min-width: 44px; justify-content: center; padding: 0.55em 0.8em; }
}
@media (prefers-reduced-motion: reduce) {
	/* frontend.js entfernt das Video vor dem Laden; falls das Skript
	   ausbleibt, faengt diese Regel wenigstens die Darstellung ab. */
	.shero__video, .shero__pause { display: none; }
}

/* ================================================================
   Veranstaltungen — Untertitel und Rueckblick (10.09.2026)
   ================================================================ */

/* Eine Zeile unter dem Titel: „Italien im Glas", „Daydrinking". Sophia hat
   sie in ihren Screenshot direkt neben den Titel geschrieben; in der Liste
   steht sie darunter, weil der Titel dort die volle Breite braucht. */
.trm__unter {
	margin: 0.3rem 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.94rem; font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--accent-text);
}
.trm__unter + .trm__zeit { margin-top: 0.25rem; }
.evd__unter {
	margin: 0.45rem 0 0;
	font-size: 0.98rem; font-weight: 500;
	color: var(--wp--preset--color--accent-text);
}

/* Rueckblick: Bilder zum Durchblaettern — ein waagerechtes Band mit
   Einrastpunkten. Es laeuft ueber die volle Breite, die erste Kachel beginnt
   am Seitenrand; die Knoepfe blaettern um eine Kachel (frontend.js). Ohne
   JavaScript bleibt das Band von Hand verschiebbar, die Knoepfe sind dann
   weg. Der Umbruch steht direkt hier und nicht im Sammelblock „Umbrueche"
   (siehe bauplan.md). */
.rueckblick { background: var(--wp--preset--color--section); overflow: hidden; }
.rueckblick__kopf { text-align: center; max-width: 44rem; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.rueckblick .rueckblick__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.rueckblick .rueckblick__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	margin: 0 0 1rem;
}
.rueckblick__text {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
	margin: 0;
}
.rueckblick__band { position: relative; }
.rueckblick__liste {
	list-style: none; margin: 0;
	padding: 0 var(--wp--custom--gutter);
	display: flex; gap: clamp(0.8rem, 1.6vw, 1.4rem);
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--wp--custom--gutter);
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--accent-text) transparent;
	-webkit-overflow-scrolling: touch;
}
.rueckblick__liste:focus-visible { outline: 2px solid var(--wp--preset--color--accent-text); outline-offset: 4px; }
.rueckblick__bild {
	flex: 0 0 clamp(240px, 30vw, 460px);
	scroll-snap-align: start;
	margin: 0;
}
.rueckblick__bild img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--wp--custom--radius);
}
.rueckblick__nav {
	display: flex; justify-content: center; gap: 0.8rem;
	margin-top: clamp(1.2rem, 2.5vw, 2rem);
}
.rueckblick__knopf {
	width: 46px; height: 46px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--wp--preset--color--accent-text);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--accent-text);
	font-size: 1.1rem; line-height: 1;
	cursor: pointer;
	transition: background 0.3s var(--wp--custom--ease), color 0.3s var(--wp--custom--ease);
}
.rueckblick__knopf:hover { background: var(--wp--preset--color--accent-text); color: var(--wp--preset--color--section); }
.rueckblick__knopf:focus-visible { outline: 2px solid var(--wp--preset--color--accent-text); outline-offset: 3px; }
/* Ohne JavaScript gibt es nichts, was die Knoepfe tun koennten. */
html:not(.js) .rueckblick__nav { display: none; }
@media (max-width: 600px) {
	.rueckblick__bild { flex-basis: 78vw; }
}
@media (prefers-reduced-motion: reduce) {
	.rueckblick__liste { scroll-behavior: auto; }
}

/* ================================================================
   Catering — „Vor Ort" (07.09.2026)
   ================================================================

   Sophias eigener Vorschlag vom 04.09.: „dann könnten wir unten so paar
   Bilder zeigen, wie es aussehen könnte vor Ort." Drei Aufnahmen aus ihren
   Mails, klein nebeneinander — bewusst NICHT als Vollbild-Band. Der Versuch
   vom 05.09. mit einem einzelnen Foto auf 76 vh musste wieder heraus; ein
   Schnappschuss trägt diese Fläche nicht, drei kleine tragen sie zusammen.

   Der Umbruch steht direkt hier und nicht im Sammelblock „Umbrueche" weiter
   unten — eine Media Query erhöht die Spezifität nicht, und eine spätere
   Basisregel würde sie schlagen (siehe bauplan.md). */
.vorort { background: var(--wp--preset--color--section); }
.vorort__kopf { text-align: center; max-width: 44rem; margin: 0 auto clamp(2.2rem, 4vw, 3.4rem); }
.vorort .vorort__kicker { color: var(--wp--preset--color--accent-text); margin: 0 0 1.1rem; }
.vorort .vorort__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.06;
	margin: 0 0 1rem;
}
.vorort__text {
	color: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
	margin: 0;
}
.vorort__reihe {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2vw, 1.8rem);
}
.vorort__bild { margin: 0; }
.vorort__bild img {
	display: block;
	width: 100%; height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
@media (max-width: 700px) {
	.vorort__reihe { grid-template-columns: 1fr; gap: 1.4rem; }
}
