/* =========================================================
   Editorial Warm Minimal — Tokens
   Genau ein Akzent. Kein Reinweiss, kein Reinschwarz.
   ========================================================= */

:root {
  /* --- Farbe --- */
  --paper:       #FAF7F2;
  /* Nur für die Kartenflächen: die Gerichtfotos sind auf Reinweiss
     freigestellt, die Fläche darunter muss dieselbe sein. */
  --weiss:       #FFFFFF;
  --sand:        #DDD5CA;
  --greige:      #B9AEA2;
  --ink:         #2B2621;
  --muted:       #6E655B;
  --line:        #CFC6BA;
  --petrol:      #1D4E49;
  --petrol-dark: #123330;
  --petrol-tint: #E2E8E5;
  --error:       #8A2B22;

  /* --- Schrift --- */
  --font-display: 'League Spartan', 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* Groessen skalieren zwischen 360px und 1440px Viewport */
  --t-h1:    clamp(2.25rem, 1.30rem + 4.22vw, 4.25rem);   /* 36 → 68 */
  --t-h2:    clamp(1.50rem, 1.14rem + 1.58vw, 2.50rem);   /* 24 → 40 */
  --t-h3:    1rem;                                         /* 16 */
  --t-body:  0.9375rem;                                    /* 15 */
  --t-lead:  clamp(1rem, 0.98rem + 0.09vw, 1.0625rem);     /* 16 → 17 */
  --t-label: 0.6875rem;                                    /* 11 */
  --t-btn:   0.75rem;                                      /* 12 */
  --t-small: 0.8125rem;                                    /* 13 — Minimum */

  /* Gewicht der Überschriften. League Spartan ist eine variable Schrift und
     trägt die ganze Achse von 100 bis 900 — eine Zahl hier ändert alle
     Überschriften auf allen Seiten. */
  --w-display: 600;

  /* --- Raum --- */
  --space-section: clamp(5rem, 3.10rem + 8.44vw, 9.375rem); /* 80 → 150 */
  --space-block:   clamp(2.5rem, 1.79rem + 3.16vw, 4rem);   /* 40 → 64 */
  --gutter:        clamp(1.25rem, 0.54rem + 3.16vw, 2.75rem);
  --measure:       min(65ch, 100%);

  /* Drei Breiten, nicht eine: Kacheln brauchen Fläche, Lesetext braucht
     Begrenzung, eine einzelne Aussage braucht Ruhe. */
  /* In rem, damit sie mit der Grundschrift mitwachsen (siehe site.css).
     Bei 16px Grundschrift sind das 1360 / 1080 / 820 Pixel. */
  --shell:      85rem;     /* breit  — Raster, Leisten, Bildreihen */
  --shell-text: 67.5rem;   /* mittel — Lesetext, Formulare, zwei Spalten */
  --shell-eng:  51.25rem;  /* schmal — eine Aussage, ein Aufruf */

  /* --- Form --- */
  /* Höhe der Kopfzeile. Steht hier, weil der Vollbild-Kopf der
     Tischdekoration sie abziehen muss: Kopfzeile plus Kopf ergeben
     zusammen genau ein Fenster. */
  --kopf-hoehe: 4.75rem;

  --radius: 2px;
  /* Die Trennlinie: Abschnittskanten, Tabellenzeilen, Fusszeile. Sie soll
     leise bleiben — sie trennt, sie bedient nichts. */
  --hairline: 0.5px solid var(--line);
  /* Die Kante von Bedienelementen: Eingabefelder, Wahlmarken, Filterknöpfe.
     Sie muss laut genug sein, um als Element erkannt zu werden — 3:1 nach
     WCAG 1.4.11. Mit --line waren es 1,58:1 auf Papier und 1,16:1 auf Sand;
     von allen Hausfarben besteht nur --muted die Prüfung auf jeder Fläche
     (3,93 bis 5,71). Getrennt von --hairline, damit das Verschärfen der
     Bedienkante nicht jede Trennlinie der Seite mitzieht. */
  --kante-bedienung: 1px solid var(--muted);

  /* --- Bewegung --- */
  --enter: 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================
   Editorial Warm Minimal — Basis
   ========================================================= */

@font-face {
  font-family: 'League Spartan';
  src: url('/fonts/league-spartan-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'League Spartan';
  src: url('/fonts/league-spartan-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-latin-ext.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
/* `hidden` muss stärker sein als jede Klasse, die display setzt. Sonst bleibt
   ein verstecktes Element liegen — und eine Fläche wie die Bildansicht schluckt
   unsichtbar alle Klicks der Seite. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, picture, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* --- Grundfläche --- */
/* Oberhalb von 1440 px wächst die Grundschrift mit — und mit ihr alles, was in
   rem gerechnet ist: Schriftgrössen, Abstände, die drei Satzbreiten. Ohne das
   liegt auf einem 4K-Schirm eine kleine Insel Inhalt in sehr viel Leere,
   während die randlosen Bilder ins Riesenhafte wachsen.
   Gerechnet wird in rem, nicht in px: so bleibt die Schriftgrösse aus den
   Browsereinstellungen erhalten. */
html { font-size: clamp(1rem, 0.775rem + 0.25vw, 1.375rem); }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* =========================================================
   Typografie
   ========================================================= */

h1, .t-h1 {
  font-family: var(--font-display);
  /* wie bei h2: nach dem Platz, nicht nach dem Fenster */
  font-size: min(var(--t-h1), max(1.9rem, 6.4cqi));
  font-weight: var(--w-display);
  line-height: 1.08;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-wrap: balance;
}
h2, .t-h2 {
  font-family: var(--font-display);
  /* Nach dem Platz, nicht nach dem Fenster: `cqi` ist ein Prozent der Breite
     des umgebenden Kastens (siehe `container-type` weiter unten). Ein langes
     Wort wie „Grössenordnung" wird damit in einer schmalen Spalte kleiner
     gesetzt, statt sie zu sprengen. Die Fenstergrösse bleibt die Obergrenze. */
  font-size: min(var(--t-h2), max(1.25rem, 6.4cqi));
  font-weight: var(--w-display);
  line-height: 1.16;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-wrap: balance;
}
h3, .t-h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Die Kästen, in denen Überschriften stehen, werden zum Bezug für `cqi`.
   Ohne diese Angabe rechnet `cqi` gegen das Fenster — dann wäre nichts
   gewonnen. */
/* `.held__text` fehlt hier mit Absicht: `container-type` erzwingt Layout-
   Containment, und ein Container kann kein Subgrid sein — die vier
   gemeinsamen Zeilen des Doppelkopfs würden auseinanderlaufen. Dort richtet
   sich die Schrift weiter nach dem Fenster. */
.split__text, .stack, .kunden__text,
.hero:not(.hero--text-only) .hero__text,
.grid > .col-4, .grid > .col-5, .grid > .col-6, .grid > .col-7 {
  container-type: inline-size;
}
/* Ausgenommen der Textkopf: Seine Spalte ist inhaltsbestimmt, mit Containment
   fiele sie auf null. Platz hat die Überschrift dort ohnehin. */

.t-lead {
  font-size: var(--t-lead);
  line-height: 1.8;
  color: var(--ink);
  max-width: var(--measure);
}
.t-label {
  font-family: var(--font-text);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--fg-2, var(--muted));
  display: block;
}
p { max-width: var(--measure); }
p + p { margin-top: 1.15em; }
.t-muted { color: var(--fg-2, var(--muted)); }

.t-small { font-size: var(--t-small); line-height: 1.7; }

/* Fliesstext-Links */
.prose a, .link {
  color: var(--petrol);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 0.5px;
  transition: color 160ms ease-out;
}
.prose a:hover, .link:hover { color: var(--petrol-dark); }

/* Nur für Vorlesegeräte und Suchmaschinen.

   Nicht `display: none` und nicht `visibility: hidden` — beides nimmt den
   Text auch aus dem Vorlesebaum. Diese Fassung schiebt ihn aus dem Bild und
   lässt ihn ansonsten stehen. Verwendet, wo eine Überschrift gebraucht wird,
   aber keine zu sehen sein soll. */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Fokus */
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* =========================================================
   Layout
   ========================================================= */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--mittel, .shell--text { max-width: var(--shell-text); }
.shell--schmal { max-width: var(--shell-eng); }

.section {
  --fg-2: var(--muted);
  /* Die eigene Grundfarbe als Variable: Elemente, die eine Linie unterbrechen
     müssen (etwa die Ziffern der Schrittfolge), brauchen sie als Hintergrund. */
  --grund: var(--paper);
  padding-block: var(--space-section);
  background: var(--grund);
  position: relative;
}
.section--weiss  { --grund: var(--weiss); }
.section--sand   { --grund: var(--sand);        --fg-2: var(--ink); }
/* Auf den getönten Flächen ist das gedämpfte Braungrau zu schwach: auf Sand
   kommt es auf 3,9:1, auf dem kühlen Tint auf 4,6:1 — zu wenig für Fliesstext
   in 15 Pixeln. Beide Flächen führen den zweiten Ton deshalb in Tinte
   (10,3:1 und 12,1:1). Auf Papier bleibt das Braungrau, dort trägt es. */
.section--tint   { --grund: var(--petrol-tint); --fg-2: var(--ink); }
.section--petrol { --grund: var(--petrol); color: var(--paper); --fg-2: var(--petrol-tint); }
.section--petrol .t-lead { color: var(--paper); }
.section--flush  { padding-block: 0; }
.section--tight  { padding-block: calc(var(--space-section) * 0.6); }

/* Asymmetrische Raster */
.grid { display: grid; gap: var(--space-block) var(--gutter); }
.grid--12 { grid-template-columns: repeat(12, 1fr); }

/* grid-column-end statt grid-column, damit sich .col-* und .start-* nicht aufheben */
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-12 { grid-column-end: span 12; }
.start-2 { grid-column-start: 2; }
.start-6 { grid-column-start: 6; }
.start-7 { grid-column-start: 7; }

hr, .rule {
  border: 0;
  border-top: var(--hairline);
  margin-block: var(--space-block);
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--t-btn);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 1.15em 1.9em;
  border-radius: var(--radius);
  border: 0.5px solid var(--petrol);
  background: var(--petrol);
  color: var(--paper);
  cursor: pointer;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out;
}
.btn:hover { background: var(--petrol-dark); border-color: var(--petrol-dark); }

.btn--ghost {
  background: transparent;
  color: var(--petrol);
  border-color: var(--line);
}
.btn--ghost:hover { background: transparent; color: var(--petrol-dark); border-color: var(--petrol); }

.section--petrol .btn {
  background: var(--paper); color: var(--petrol); border-color: var(--paper);
}
.section--petrol .btn:hover { background: var(--petrol-tint); border-color: var(--petrol-tint); }
.section--petrol .btn--ghost {
  background: transparent; color: var(--paper); border-color: rgba(250, 247, 242, 0.45);
}
.section--petrol .btn--ghost:hover { border-color: var(--paper); background: transparent; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }

/* Textlink mit Pfeil */
.arrow {
  display: inline-flex; align-items: baseline; gap: 0.55em;
  font-family: var(--font-display);
  font-size: var(--t-btn);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--petrol);
  padding-block: 0.35em;
  transition: color 160ms ease-out;
}
.arrow::after { content: '\2192'; font-family: var(--font-text); letter-spacing: 0; }
.arrow:hover { color: var(--petrol-dark); }
.section--petrol .arrow { color: var(--paper); }

/* =========================================================
   Kopfzeile
   ========================================================= */

.skip {
  position: absolute; left: -9999px;
  background: var(--petrol); color: var(--paper);
  padding: 0.9em 1.4em; z-index: 100;
  font-family: var(--font-display); font-size: var(--t-btn);
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { left: var(--gutter); top: 0.75rem; }

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: var(--hairline);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gutter);
  min-height: var(--kopf-hoehe);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.125rem; font-weight: 400;
  letter-spacing: 0.26em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  white-space: nowrap;
}
.wordmark img { width: 2.25rem; height: 2.25rem; border-radius: 50%; }
.wordmark:hover { color: var(--petrol); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 2rem); }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 2rem); }
/* „Anlässe" ist ein <button>, alle anderen Einträge sind <a>. Beide teilen
   sich diese Regel, aber `padding: 0.4em 0` wirkte nur bei einem von
   beiden: Bei einem <a> mit `display: inline` zählt senkrechte Polsterung
   nicht zur Zeilenhöhe, beim <button> — von Haus aus inline-block — schon.

   Gemessen: alle Links 27,2 Pixel hoch, der Knopf 35,3. Mit
   `align-items: center` auf der Liste drückte ihn das um ein halbes Pixel
   aus der Grundlinie, und die Zeile wirkte unruhig, ohne dass man den Grund
   sah.

   `inline-block` für beide macht die Kästen gleich. Damit stimmen Höhe und
   Grundlinie überein, und die Polsterung vergrössert bei beiden die Fläche,
   die sich anklicken lässt. */
.nav__link, .nav__toggle {
  display: inline-block;
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
  background: none; border: 0; padding: 0.4em 0; cursor: pointer;
  white-space: nowrap;
  transition: color 160ms ease-out;
}
.nav__link:hover, .nav__toggle:hover, .nav__link[aria-current='page'] { color: var(--petrol); }
.nav__link[aria-current='page'] { text-decoration: underline; text-underline-offset: 0.4em; text-decoration-thickness: 0.5px; }

.nav__group { position: relative; }
.nav__toggle::after { content: '\00a0\002B'; font-size: 0.85em; color: var(--muted); }
.nav__group[data-open='true'] .nav__toggle::after { content: '\00a0\2212'; }
.nav__panel {
  display: none;
  position: absolute; top: calc(100% + 0.9rem); left: -1.25rem;
  min-width: 15rem;

  background: var(--paper);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
}
.nav__group[data-open='true'] .nav__panel { display: block; }
.nav__group[data-open='true'] .nav__panel--breit { display: grid; }
.nav__panel a {
  display: block; padding: 0.5em 0;
  font-size: var(--t-small); text-decoration: none; color: var(--ink);
}
.nav__panel a:hover { color: var(--petrol); }
.nav__gruppe { display: block; margin-bottom: 0.5rem; color: var(--greige); white-space: nowrap; }
/* Mehrere Gruppen stehen nebeneinander; jede bleibt für sich. Das `display`
   steht nur in der geöffneten Fassung — sonst überschriebe es das `none`. */
.nav__panel--breit { grid-auto-flow: column; gap: 0 2.75rem; align-items: start; min-width: 0; }

/* Der Knopf im Kopf darf weder umbrechen noch schrumpfen: Er trägt zwei
   Wörter, und zwei Wörter sind eine Zeile. Platz macht die Liste daneben. */
.nav__cta { margin-left: 0.5rem; flex: none; white-space: nowrap; }
.nav__list { min-width: 0; }
.nav__burger { display: none; }

/* =========================================================
   Hero
   ========================================================= */

.hero { border-bottom: var(--hairline); }
.hero__grid {
  display: grid;
  grid-template-columns: 6fr 7fr;
  align-items: stretch;
  min-height: clamp(30rem, 34rem + 12vw, 46rem);
}
.hero__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-section) var(--gutter) var(--space-section) 0;
  padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
}
.hero__eyebrow { margin-bottom: 1.6rem; }
.hero h1 { margin-bottom: 1.6rem; }
.hero__lead { margin-bottom: 2.4rem; }
.hero__media { position: relative; overflow: hidden; background: var(--greige); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero--text-only .hero__grid { grid-template-columns: 1fr; min-height: 0; }
.hero--text-only .hero__text {
  padding-inline: 0;
  max-width: var(--shell-text);
  margin-inline: auto;
  padding-block: var(--space-section);
}

/* =========================================================
   Split — Bild und Text asymmetrisch
   ========================================================= */

.split { display: grid; gap: var(--space-block) var(--gutter); align-items: center; }
.split--7-5 { grid-template-columns: 7fr 5fr; }
.split--5-7 { grid-template-columns: 5fr 7fr; }
.split__text { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.split__text > * { margin: 0; }
.split__media { background: var(--greige); overflow: hidden; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__media--tall img { aspect-ratio: 3 / 4; }
.split__media--square img { aspect-ratio: 1 / 1; }

/* Bildband über die volle Breite */
.band { display: grid; gap: 2px; grid-auto-flow: column; grid-auto-columns: 1fr; }
/* Der Deckel greift erst auf sehr breiten Schirmen: dort würde das Seitenverhältnis
   sonst Kacheln von über 1200 Pixel Höhe ergeben. In rem, damit er mit der
   Grundschrift mitwächst. */
.band img { width: 100%; aspect-ratio: 3 / 4; max-height: 34rem; object-fit: cover; background: var(--greige); }

/* =========================================================
   Karten, Listen, Raster
   ========================================================= */

.stack { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.stack--tight { gap: 0.85rem; }

.items { display: grid; gap: var(--space-block) var(--gutter); }
.items--2 { grid-template-columns: repeat(2, 1fr); }
.items--3 { grid-template-columns: repeat(3, 1fr); }
.items--4 { grid-template-columns: repeat(4, 1fr); }

.item { display: flex; flex-direction: column; gap: 0.9rem; }
.item h3 { color: var(--ink); }
.item p { color: var(--fg-2, var(--muted)); }
.item__num {
  font-family: var(--font-display);
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.22em; color: var(--petrol);
  padding-bottom: 0.9rem; border-bottom: var(--hairline);
  margin-bottom: 0.4rem;
}
.item__media { background: var(--greige); overflow: hidden; margin-bottom: 0.4rem; }
.item__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Merkmalsliste mit Haarlinie */
.deflist { display: grid; gap: 0; width: 100%; }
.deflist__row {
  display: grid; grid-template-columns: 4fr 8fr; gap: var(--gutter);
  padding-block: 1.6rem; border-top: var(--hairline);
}
.deflist__row:last-child { border-bottom: var(--hairline); }
.deflist__row p { color: var(--fg-2, var(--muted)); }

/* Bulletliste.
   Der Gedankenstrich hängt links außerhalb des Textblocks, gesetzt über
   padding und ein absolutes ::before. Früher stand hier ein Zwei-Spalten-Grid;
   das zerlegte jedes <li>, das außer Text noch Auszeichnung enthielt (<b>, <a>),
   in mehrere Grid-Items — das zweite fiel in die 1.4em schmale Spalte und brach
   Wort für Wort um. Derselbe Aufbau gilt für .qa__body, .prose und .koll__liste. */
.bullets { display: grid; gap: 0.7rem; max-width: var(--measure); }
.bullets li { position: relative; padding-left: 1.4em; color: var(--fg-2, var(--muted)); }
.bullets li::before { content: '\2014'; position: absolute; left: 0; color: var(--petrol); }

/* =========================================================
   Galerie
   ========================================================= */

.gallery { display: grid; gap: var(--gutter); grid-template-columns: repeat(3, 1fr); }
.gallery--4 { grid-template-columns: repeat(4, 1fr); }
.gallery figure { display: flex; flex-direction: column; gap: 0.85rem; }
.gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--greige); }
.gallery figcaption {
  font-size: var(--t-small); line-height: 1.6; color: var(--fg-2, var(--muted));
}
.gallery figcaption b { font-weight: 400; color: var(--ink); display: block; }

/* Dichtes Mosaik ohne Beschriftung */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.mosaic img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--greige); }
.mosaic--3 { grid-template-columns: repeat(3, 1fr); }
.mosaic--5 { grid-template-columns: repeat(5, 1fr); }

/* Speisekarte: Bild über Name */
.dishes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-block) var(--gutter); }
.dish { display: flex; flex-direction: column; gap: 0.9rem; }
.dish img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  /* Die Gerichtsfotos sind auf Reinweiss freigestellt. Multiply legt sie auf die
     Papierfläche, damit kein weisses Rechteck stehen bleibt. */
  mix-blend-mode: multiply;
}
.dish__gang {
  font-size: var(--t-small); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-2, var(--muted)); margin-bottom: -0.45rem;
}
.dish__name {
  font-family: var(--font-display); font-size: var(--t-h3); font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.35;
}
.dish__note { font-size: var(--t-small); color: var(--fg-2, var(--muted)); line-height: 1.7; }

/* =========================================================
   Zeichen im Abschlussabschnitt
   ========================================================= */

.cta__mark { width: clamp(7rem, 10vw, 10rem); height: auto; margin-bottom: 1rem; }

/* =========================================================
   Bewertungen
   ========================================================= */

.reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.review {
  padding: var(--space-block) var(--gutter) var(--space-block) 0;
  border-top: var(--hairline);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.review blockquote { font-size: var(--t-lead); line-height: 1.8; max-width: var(--measure); }
.review__meta { font-size: var(--t-small); color: var(--fg-2, var(--muted)); }
.stars { color: var(--petrol); letter-spacing: 0.2em; font-size: var(--t-small); }
.score {
  font-family: var(--font-display); font-weight: 300; line-height: 1;
  font-size: clamp(3rem, 2.3rem + 3vw, 4.5rem); letter-spacing: 0.04em;
}

/* =========================================================
   FAQ
   ========================================================= */

.faq { display: grid; gap: 0; }
.faq__filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-block); }
/* Steht neben dem Suchfeld und ist dasselbe: ein Bedienelement. Mit
   --hairline waren es 1,58:1 — neben einem Feld mit 5,35:1 sah der Knopf
   aus, als wäre er abgeschaltet. */
.faq__filter {
  font-family: var(--font-text); font-size: var(--t-small);
  padding: 0.6em 1.1em; border: var(--kante-bedienung); border-radius: var(--radius);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.faq__filter:hover { color: var(--petrol); border-color: var(--petrol); }
.faq__filter[aria-pressed='true'] { color: var(--petrol); border-color: var(--petrol); }

.qa { border-top: var(--hairline); }
.qa:last-of-type { border-bottom: var(--hairline); }
.qa[hidden] { display: none; }
.qa > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--gutter);
  padding-block: 1.5rem; cursor: pointer; list-style: none;
  font-size: var(--t-lead); line-height: 1.6;
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::after { content: '\002B'; color: var(--petrol); font-size: 1.1em; line-height: 1; }
.qa[open] > summary::after { content: '\2212'; }
.qa > summary:hover { color: var(--petrol); }
.qa__body { padding-bottom: 1.9rem; max-width: var(--measure); color: var(--fg-2, var(--muted)); }
.qa__body ul { display: grid; gap: 0.55rem; margin-top: 0.9rem; }
.qa__body li { position: relative; padding-left: 1.4em; }
.qa__body li::before { content: '\2014'; position: absolute; left: 0; color: var(--petrol); }
.qa__body b { font-weight: 400; color: var(--ink); }

/* =========================================================
   Kontaktblock und Fusszeile
   ========================================================= */

.contact-lines { display: grid; gap: 0.35rem; font-size: var(--t-lead); line-height: 1.7; }
.contact-lines a { color: var(--petrol); text-decoration: none; }
.contact-lines a:hover { color: var(--petrol-dark); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 0.5px; }

.colophon {
  background: var(--paper);
  border-top: var(--hairline);
  padding-block: var(--space-block) 2.5rem;
}

/* Die Marke schliesst die Seite ab: Wortmarke, Claim gross, ein Satz dazu. */
.kolophon__marke {
  display: grid; gap: 0.9rem; justify-items: start;
  padding-bottom: var(--space-block);
  max-width: 46ch;
}
/* Marke im Fuss: dasselbe Zeichen wie im Kopf, nur grösser gesetzt —
   der Fuss ist der Ort, an dem die Seite ihren Namen noch einmal nennt. */
.kolophon__logo {
  display: inline-flex; align-items: center; gap: 0.85rem;
  text-decoration: none;
}
.kolophon__logo img { width: 3.25rem; height: 3.25rem; border-radius: 50%; }
.kolophon__wortmarke {
  font-family: var(--font-display); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted);
  transition: color 160ms ease-out;
}
.kolophon__logo:hover .kolophon__wortmarke,
.kolophon__logo:focus-visible .kolophon__wortmarke { color: var(--petrol); }
.colophon .kolophon__claim {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.75rem);
  letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.1;
  color: var(--ink);
}

/* Register: erreichbar, Seiten, Anlässe, Haus */
.kolophon__grid {
  display: grid; grid-template-columns: 4fr 3fr 3fr 3fr;
  gap: var(--space-block) var(--gutter);
  padding-top: var(--space-block);
  border-top: var(--hairline);
}
.kolophon__spalte { display: grid; gap: 0.85rem; align-content: start; min-width: 0; }
.kolophon__spalte h2 {
  font-size: var(--t-h3); font-weight: 400; letter-spacing: 0.12em;
  margin-bottom: 0.15rem;
}
.kolophon__zweit { margin-top: 1.5rem; }
.colophon ul { display: grid; gap: 0.6rem; }
.colophon a { font-size: var(--t-small); text-decoration: none; color: var(--muted); }
.colophon a:hover { color: var(--petrol); }
.colophon p { color: var(--muted); }

.colophon a.kolophon__tel {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);
  letter-spacing: 0.06em; color: var(--ink); line-height: 1;
}
.colophon a.kolophon__tel:hover { color: var(--petrol); }
.kolophon__mails { gap: 1rem; }
.kolophon__mails li { display: grid; gap: 0.15rem; }
.colophon .kolophon__mails a { font-size: var(--t-body); color: var(--ink); }
.colophon .kolophon__mails a:hover { color: var(--petrol); }
.colophon .arrow { font-size: var(--t-btn); color: var(--petrol); }

/* Der Hinweis zu den Bildern. 0,75 rem sind bei der Grundschrift von 16 px
   genau 9 pt — in rem gerechnet, damit er auf grossen Schirmen mitwächst. */
.kolophon__hinweis {
  margin-top: var(--space-block); padding-top: 1.75rem; border-top: var(--hairline);
  font-size: 0.75rem; line-height: 1.75; color: var(--muted);
  max-width: 78ch;
}
.kolophon__hinweis + .colophon__base { margin-top: 1.75rem; border-top: 0; padding-top: 0; }

.colophon__base {
  margin-top: var(--space-block); padding-top: 1.75rem; border-top: var(--hairline);
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between;
  align-items: center;
  font-size: var(--t-small); color: var(--muted);
}

/* =========================================================
   Bewegung
   ========================================================= */

.js-anim .enter { opacity: 0; transform: translateY(18px); }
.js-anim .enter.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--enter), transform var(--enter);
}
@media (prefers-reduced-motion: reduce) {
  .js-anim .enter, .js-anim .enter.is-in { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* =========================================================
   Umbrüche
   ========================================================= */

@media (max-width: 1080px) {
  .items--4 { grid-template-columns: repeat(2, 1fr); }
  .dishes   { grid-template-columns: repeat(3, 1fr); }
  .gallery--4 { grid-template-columns: repeat(3, 1fr); }
  .kolophon__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  /* Alles, was von freier Bildfläche lebt, stapelt */
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__text { padding: var(--space-section) var(--gutter); }
  .hero--text-only .hero__text { padding-inline: var(--gutter); }
  .hero__media { aspect-ratio: 4 / 3; }

  .split--7-5, .split--5-7 { grid-template-columns: 1fr; }
  .split__media { order: -1; }
  .split--media-last .split__media { order: 0; }

  .items--3, .items--2 { grid-template-columns: repeat(2, 1fr); }
  .gallery, .gallery--4 { grid-template-columns: repeat(2, 1fr); }
  .dishes { grid-template-columns: repeat(2, 1fr); }
  .mosaic, .mosaic--5 { grid-template-columns: repeat(3, 1fr); }
  .reviews { grid-template-columns: 1fr; }
  .review { padding-right: 0; }
  .deflist__row { grid-template-columns: 1fr; gap: 0.75rem; }
  .band { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); }

  /* Spannweite zurücksetzen, nicht die Kurzform benutzen: `grid-column: 1 / -1`
     würde zusammen mit dem folgenden `grid-column-start: auto` ein Element
     mit Ende -1 und freiem Anfang ergeben — das schrumpft auf eine Spalte. */
  .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column-end: span 12; }
  .start-2, .start-6, .start-7 { grid-column-start: auto; }

  /* Navigation als Panel unter der Kopfzeile */
  .nav { display: none; }
  .nav__burger {
    display: inline-flex; align-items: center; gap: 0.6em;
    background: none; border: 0; cursor: pointer; padding: 0.5em 0;
    font-family: var(--font-display); font-size: var(--t-btn);
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
  }
  .masthead[data-open='true'] .nav {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper);
    border-bottom: var(--hairline);
    padding: 0.5rem var(--gutter) 2rem;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
  }
  .masthead[data-open='true'] .nav__list { display: block; }
  .masthead[data-open='true'] .nav__list > li { border-top: var(--hairline); }
  .masthead[data-open='true'] .nav__list > li:first-child { border-top: 0; }
  .masthead[data-open='true'] .nav__cta {
    display: block; margin: 1.5rem 0 0; width: 100%; text-align: center;
  }
  .nav__list > li > .nav__link, .nav__toggle {
    display: block; width: 100%; text-align: left; padding-block: 1rem;
    font-size: var(--t-lead);
  }
  .nav__group { position: static; }
  .nav__panel { position: static; border: 0; padding: 0 0 1rem 1.25rem; min-width: 0; }
  .nav__panel a { padding-block: 0.65em; }
}

@media (max-width: 600px) {
  .items--3, .items--2 { grid-template-columns: 1fr; }
  .gallery, .gallery--4 { grid-template-columns: repeat(2, 1fr); }
  .dishes { grid-template-columns: repeat(2, 1fr); }
  .mosaic, .mosaic--5 { grid-template-columns: repeat(2, 1fr); }
  .kolophon__grid { grid-template-columns: 1fr; }
  .band { grid-template-columns: 1fr; }
  .btn { width: 100%; text-align: center; }
  .btn-row { gap: 0.75rem; }
  .btn-row .btn { width: auto; flex: 1 1 14rem; }
}

@media (max-width: 400px) {
  .gallery, .gallery--4, .dishes { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: repeat(2, 1fr); }
}

@media print {
  .masthead, .nav, .skip { display: none; }
  body { background: #fff; }
}

/* =========================================================
   Fliesstext-Seiten (Rechtstexte)
   ========================================================= */

.prose h2 { font-size: var(--t-h2); margin-top: var(--space-block); margin-bottom: 1.2rem; }
.prose h3 { margin-top: 2.75rem; margin-bottom: 0.9rem; }
.prose h4 {
  font-family: var(--font-text); font-size: var(--t-body); font-weight: 500;
  letter-spacing: 0.02em; text-transform: none;
  margin-top: 2rem; margin-bottom: 0.5rem; color: var(--ink);
}
.prose p { color: var(--muted); margin-bottom: 1.1em; }
.prose > *:first-child { margin-top: 0; }
.prose ul { display: grid; gap: 0.55rem; margin: 0 0 1.4em; max-width: var(--measure); }
.prose li { position: relative; padding-left: 1.4em; color: var(--muted); }
.prose li::before { content: '\2014'; position: absolute; left: 0; color: var(--petrol); }
.prose a { overflow-wrap: anywhere; }

/* =========================================================
   Eingebetteter Anfrage-Assistent
   ========================================================= */

.embed { width: 100%; border: var(--hairline); border-radius: var(--radius); background: var(--paper); }
/* Die Fassung über die ganze Sektionsbreite. Kein Rahmen: Der eingebettete
   Funnel begrenzt seinen Inhalt selbst auf 680 Pixel — ein Rahmen um die
   volle Breite fasste vor allem den Leerraum daneben ein. Der Bundsteg
   bleibt, sonst klebt das Formular am Handy am Rand. */
.section--flush-x > .embed--voll { padding-inline: var(--gutter); }
.embed--voll { border: 0; border-radius: 0; background: transparent; }
.embed iframe { display: block; width: 100%; min-height: 78vh; border: 0; }
.embed__fallback { padding: clamp(2rem, 5vw, 4rem); display: grid; gap: 1.5rem; justify-items: start; }

/* =========================================================
   Tischdekoration — Kollektionsraster
   ========================================================= */

/* Kopf: links das Farbwort und der Name, rechts der Text. Die Kante zwischen
   beiden liegt bei sieben Zwölfteln, damit der Name Luft hat und der Text
   trotzdem eine lesbare Breite behält. */
.koll__kopf {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: var(--space-block) var(--gutter);
  margin-bottom: var(--space-block);
}
.koll__kopf h2 { margin-top: 1.2rem; }
.koll__kopftext p { color: var(--fg-2, var(--muted)); }
.koll__kopftext .t-lead { color: var(--ink); margin-bottom: 1.15em; }
.koll__passt { margin-top: 1.6rem; padding-top: 1.1rem; border-top: var(--hairline); }

/* Zwei Spalten, die rechte beginnt tiefer. Der Versatz kommt allein aus
   diesem Abstand — die Bilder behalten ihr eigenes Seitenverhältnis, sonst
   wäre der Rhythmus wieder gleichmässig. */
.koll__raster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: start; }
.koll__spalte { display: grid; gap: var(--space-block); align-content: start; }
.koll__spalte--versetzt { padding-top: clamp(3rem, 8vw, 8rem); }

.koll__bild { margin: 0; overflow: hidden; background: var(--sand); }
.koll__bild img { display: block; width: 100%; height: auto; }

/* Die Insel steht zwischen zwei Bildern und darf keine Kachel sein: kein
   Rahmen, keine Fläche — nur eine Haarlinie oben, damit sie nicht schwebt. */
.koll__insel {
  display: grid; gap: 1.4rem; justify-items: start;
  padding-top: 1.6rem; border-top: var(--hairline);
  max-width: 34rem;
}
.koll__liste { list-style: none; display: grid; gap: 0.55rem; margin: 0; padding: 0; }
.koll__liste li {
  position: relative; padding-left: 1.4em;
  font-size: var(--t-small); line-height: 1.7; color: var(--fg-2, var(--muted));
}
.koll__liste li::before { content: '\2014'; position: absolute; left: 0; color: var(--petrol); }
.koll__preis { display: grid; gap: 0.3rem; margin: 0; }
.koll__preis-zahl {
  font-family: var(--font-display); font-size: var(--t-h2); font-weight: var(--w-display);
  line-height: 1.1; color: var(--ink);
}

@media (max-width: 860px) {
  .koll__kopf { grid-template-columns: 1fr; gap: 1.6rem; }
  .koll__kopf h2 { margin-top: 0.8rem; }
  .koll__raster { grid-template-columns: 1fr; }
  .koll__spalte--versetzt { padding-top: 0; }
  .koll__spalte { gap: var(--space-block); }
}

/* =========================================================
   Editorial Warm Minimal — die bewegliche Schicht

   Regeln wie im Rest der Seite: Haarlinien statt Rahmen, ein Akzent,
   Radius 2px, keine Schlagschatten. Bewegung nur, wo sie etwas erklärt.
   ========================================================= */

/* ---------------------------------------------------------
   Lesefortschritt unter der Kopfzeile
   --------------------------------------------------------- */
.fortschritt {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 60; pointer-events: none;
}
.fortschritt span {
  display: block; height: 100%; width: 0;
  background: var(--petrol);
  transform-origin: left center;
}
.no-js .fortschritt { display: none; }

/* Kopfzeile verdichtet sich beim Scrollen */
.masthead { transition: box-shadow 200ms ease-out; }
.masthead__inner { transition: min-height 220ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.masthead[data-eng='true'] .masthead__inner { min-height: 3.75rem; }
.masthead[data-eng='true'] .wordmark img { width: 1.9rem; height: 1.9rem; transition: width 220ms, height 220ms; }

/* ---------------------------------------------------------
   Kapitelspalte am rechten Rand
   --------------------------------------------------------- */
.kapitel {
  position: fixed; right: clamp(0.75rem, 1.6vw, 1.75rem); top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
  flex-direction: column; gap: 0.15rem;
  padding: 0.6rem 0;
}
.kapitel--an { display: flex; }
.kapitel__punkt {
  position: relative;
  display: flex; align-items: center; justify-content: flex-end;
  background: none; border: 0; padding: 0.32rem 0; cursor: pointer;
  color: var(--muted); text-align: right;
}
/* Der Name liegt in Ruhe hinter dem Strich und tritt erst beim Zeigen hervor —
   als Zettel auf Papier, damit er nichts überdeckt. Absolut gesetzt, weil er
   sonst den Knopf so breit machen würde wie sich selbst: der läge dann
   unsichtbar über dem Seiteninhalt und finge dessen Klicks ab. */
.kapitel__wort {
  position: absolute; right: calc(100% + 0.7rem); top: 50%;
  font-family: var(--font-text); font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  background: var(--paper); border: 0.5px solid var(--line);
  border-radius: var(--radius); padding: 0.4em 0.75em;
  opacity: 0; transform: translateY(-50%) translateX(0.5rem); pointer-events: none;
  transition: opacity 220ms ease-out, transform 220ms ease-out, color 160ms;
}
.kapitel__strich {
  display: block; width: 1.15rem; height: 1px; flex: none;
  background: var(--line);
  transition: width 220ms cubic-bezier(0.22,0.61,0.36,1), background-color 200ms;
}
/* Nur der Name, auf den gezeigt wird — alle gleichzeitig würden sich
   gegenseitig überdecken, die Zettel sind höher als der Abstand der Striche. */
.kapitel__punkt:hover .kapitel__wort,
.kapitel__punkt:focus-visible .kapitel__wort {
  opacity: 1; transform: translateY(-50%);
  color: var(--petrol); border-color: var(--petrol);
}
.kapitel__punkt:hover .kapitel__strich { background: var(--ink); width: 1.6rem; }
.kapitel__punkt[aria-current='true'] .kapitel__strich { background: var(--petrol); width: 2.2rem; }

/* Auf getönten Flächen bleibt die Spalte lesbar */
.kapitel[data-auf='petrol'] .kapitel__strich { background: rgba(250,247,242,0.4); }
.kapitel[data-auf='petrol'] .kapitel__punkt { color: var(--petrol-tint); }
.kapitel[data-auf='petrol'] .kapitel__punkt[aria-current='true'] .kapitel__strich,
.kapitel[data-auf='petrol'] .kapitel__punkt:hover .kapitel__strich { background: var(--paper); }

@media (max-width: 1200px) { .kapitel--an { display: none; } }

/* ---------------------------------------------------------
   Einblenden: die Kinder folgen nacheinander
   --------------------------------------------------------- */
.js-anim .enter--stagger.is-in > * { animation: auftauchen var(--enter) both; }
.js-anim .enter--stagger.is-in > *:nth-child(2) { animation-delay: 70ms; }
.js-anim .enter--stagger.is-in > *:nth-child(3) { animation-delay: 140ms; }
.js-anim .enter--stagger.is-in > *:nth-child(4) { animation-delay: 210ms; }
.js-anim .enter--stagger.is-in > *:nth-child(5) { animation-delay: 280ms; }
.js-anim .enter--stagger.is-in > *:nth-child(6) { animation-delay: 350ms; }
.js-anim .enter--stagger.is-in > *:nth-child(n+7) { animation-delay: 420ms; }
@keyframes auftauchen {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Bilder kommen aus einer Spur Nähe */
.js-anim .split__media.enter img,
.js-anim .item__media img { transition: transform 900ms cubic-bezier(0.22,0.61,0.36,1); }
.js-anim .split__media.enter:not(.is-in) img { transform: scale(1.04); }

/* Kopfbild: das <picture> muss die Fläche selbst füllen */
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media picture img { width: 100%; height: 100%; object-fit: cover; }
.js-anim .hero__media img { transition: transform 1200ms cubic-bezier(0.22,0.61,0.36,1); }

/* ---------------------------------------------------------
   Bildband: Beschriftung beim Zeigen
   --------------------------------------------------------- */
.band__bild { position: relative; overflow: hidden; }

/* ---------------------------------------------------------
   Bilder gross ansehen
   --------------------------------------------------------- */
[data-schau] { cursor: zoom-in; }
.lupe {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(18, 51, 48, 0.94);
  display: grid; grid-template-rows: auto 1fr auto;
  opacity: 0; transition: opacity 220ms ease-out;
}
.lupe[data-offen='true'] { opacity: 1; }
.lupe:not([data-offen='true']) { pointer-events: none; }
.lupe__kopf, .lupe__fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gutter); padding: 1.1rem var(--gutter);
  color: var(--petrol-tint); font-size: var(--t-small);
}
.lupe__buehne { display: grid; place-items: center; padding: 0 var(--gutter); min-height: 0; }
.lupe__buehne img {
  max-width: min(1100px, 100%); max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  opacity: 0; transform: scale(0.99);
  transition: opacity 240ms ease-out, transform 240ms ease-out;
}
.lupe__buehne img.is-da { opacity: 1; transform: none; }
.lupe__text { max-width: 60ch; line-height: 1.6; color: var(--petrol-tint); }
.lupe__zaehler { font-family: var(--font-display); letter-spacing: 0.16em; }
.lupe__knopf {
  background: none; border: 0.5px solid rgba(250,247,242,0.35); color: var(--paper);
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius);
  cursor: pointer; font-size: 1rem; line-height: 1; flex: none;
  transition: border-color 160ms, background-color 160ms;
}
.lupe__knopf:hover { border-color: var(--paper); background: rgba(250,247,242,0.08); }
.lupe__nav { display: flex; gap: 0.5rem; }
body[data-lupe='true'] { overflow: hidden; }

/* ---------------------------------------------------------
   Formfelder — Grundlage für alle Rechner und den Assistenten
   --------------------------------------------------------- */
.feld { display: block; border: 0; padding: 0; margin: 0 0 1.9rem; min-width: 0; }
.feld:last-child { margin-bottom: 0; }
.feld > .t-label, .feld > legend { margin-bottom: 0.9rem; padding: 0; }
.feld__zeile { display: flex; align-items: center; gap: 1.25rem; }
.feld__wert {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 300;
  letter-spacing: 0.04em; min-width: 4.5ch; text-align: right; line-height: 1;
  white-space: nowrap; flex: none;
}
.feld__hinweis { margin-top: 0.75rem; }
.feld__pflicht {
  font-size: var(--t-label); letter-spacing: 0.14em; color: var(--muted);
  border-bottom: var(--hairline);
}
.feld__fehler { margin-top: 0.5rem; font-size: var(--t-small); color: var(--error); }
/* Eingabefelder: gerahmt.

   Bis August 2026 stand hier eine einzelne Haarlinie unten in --line. Das
   waren 1,58:1 auf Papier und 1,16:1 auf Sand — vorgeschrieben sind 3:1 für
   Bedienelemente. Auf einer Sandfläche war das Feld schlicht nicht zu sehen.

   Eine Füllung hätte das nicht gerettet: Weiss auf Papier sind 1,07:1. Es
   muss die Kante sein, und von allen Hausfarben besteht nur --muted die
   Prüfung auf jeder Fläche (3,93 bis 5,71). Deshalb bleibt der Grund
   durchsichtig und die Kante trägt allein — die Flächen der Seite bleiben
   ruhig, und es entsteht kein Kasten, der lauter ist als alles um ihn herum.

   Der Rahmen ist derselbe wie bei .wahlkarte und den Filterknöpfen:
   Haarlinie, zwei Pixel Radius, Petrol beim Aktivieren. Das Eingabefeld war
   das einzige Bedienelement, das diese Behandlung nie bekommen hat. */
.feld--eingabe input, .feld textarea, .feld--suche input {
  width: 100%;
  background: transparent;
  color: var(--ink);
  border: var(--kante-bedienung);
  border-radius: var(--radius);
  padding: 0.78em 0.9em;
  font-size: var(--t-lead);
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}
.feld--eingabe input:focus, .feld textarea:focus, .feld--suche input:focus {
  outline: none;
  border-color: var(--petrol);
  /* Ein dünner Hof statt einer dickeren Kante: Die Kante zu verdoppeln
     würde das Feld um zwei Pixel wachsen lassen und die Zeile verschieben. */
  box-shadow: 0 0 0 3px rgba(29, 78, 73, 0.14);
}
.feld--eingabe input:focus-visible, .feld textarea:focus-visible, .feld--suche input:focus-visible {
  outline: 2px solid var(--petrol); outline-offset: 3px;
}
.feld textarea { resize: vertical; line-height: 1.7; font-size: var(--t-body); }
/* Der Platzhalter stand in --greige: 2,04:1 auf Papier, 1,50:1 auf Sand.
   Er trägt eine Angabe, also gilt für ihn derselbe Mindestkontrast wie für
   den übrigen Text. */
.feld input::placeholder, .feld textarea::placeholder { color: var(--muted); }
.feld input[aria-invalid='true'], .feld textarea[aria-invalid='true'] { border-color: var(--error); }
.feld input[aria-invalid='true']:focus, .feld textarea[aria-invalid='true']:focus {
  box-shadow: 0 0 0 3px rgba(138, 43, 34, 0.14);
}

/* Schieberegler */
input[type='range'] {
  -webkit-appearance: none; appearance: none;
  width: 100%; background: transparent; cursor: pointer; margin: 0;
  height: 1.5rem;
}
/* Die Spur stand in --line: 1,58:1 auf Papier, 1,16:1 auf Sand. Der Griff
   ist in Petrol gut zu sehen, die Spur war es nicht — und ohne sichtbare
   Spur weiss niemand, wie weit sich der Griff schieben lässt. Haarlinie
   bleibt Haarlinie, nur in der Farbe, die trägt. */
input[type='range']::-webkit-slider-runnable-track {
  height: 1px; background: var(--muted); border-radius: 0;
}
input[type='range']::-moz-range-track { height: 1px; background: var(--muted); }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.1rem; height: 1.1rem; margin-top: -0.55rem;
  border-radius: 50%; background: var(--petrol); border: 0;
  transition: transform 140ms ease-out;
}
input[type='range']::-moz-range-thumb {
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--petrol); border: 0;
}
input[type='range']:hover::-webkit-slider-thumb { transform: scale(1.15); }
input[type='range']:focus-visible { outline: 2px solid var(--petrol); outline-offset: 6px; border-radius: var(--radius); }

/* Wahlmarken */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
/* Dieselbe Ursache wie bei den Eingabefeldern: Die Kante stand in --line
   (1,58:1 auf Papier) und auf getönten Flächen in --greige (1,50:1 auf
   Sand). Eine nicht gewählte Marke war damit kaum als Knopf zu erkennen —
   und auf den Rechnerseiten sind diese Marken die eigentliche Eingabe.
   Volle Haarlinie statt halber, Farbe wie beim Feld. */
.chip span {
  display: inline-block; padding: 0.62em 1.1em;
  border: var(--kante-bedienung); border-radius: var(--radius);
  font-size: var(--t-small); line-height: 1.3; color: var(--muted);
  transition: color 160ms ease-out, border-color 160ms ease-out, background-color 160ms ease-out;
  cursor: pointer;
}
.chip--klein span { padding: 0.5em 0.9em; }
.chip input:hover + span { color: var(--petrol); border-color: var(--petrol); }
.chip input:checked + span { color: var(--paper); background: var(--petrol); border-color: var(--petrol); }
.chip input:focus-visible + span { outline: 2px solid var(--petrol); outline-offset: 3px; }

/* Auf Sand und Tint stand hier --greige — 1,50 beziehungsweise 1,75:1.
   Beide Flächen führen jetzt dieselbe Kante wie Papier; auf Sand sind das
   3,93:1, auf Tint 4,60:1. */
.section--sand .chip span, .section--tint .chip span { border-color: var(--muted); }
.section--petrol .chip span { border-color: rgba(250,247,242,0.35); color: var(--petrol-tint); }
.section--petrol .chip input:checked + span { background: var(--paper); color: var(--petrol); border-color: var(--paper); }

/* ---------------------------------------------------------
   Rechner
   --------------------------------------------------------- */
.rechner {
  display: grid; grid-template-columns: 6fr 5fr; gap: var(--space-block) calc(var(--gutter) * 2);
  align-items: start;
}
.rechner__regler { min-width: 0; }
.rechner__blatt {
  border: 0.5px solid var(--line); border-radius: var(--radius);
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start;
  position: sticky; top: 6.5rem;
}
.section--tint .rechner__blatt, .section--sand .rechner__blatt { border-color: transparent; }
.rechner__summe {
  font-family: var(--font-display); font-weight: 300; line-height: 1;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); letter-spacing: 0.03em;
  margin: 0;
}
.rechner__bis {
  font-family: var(--font-text); font-size: var(--t-small);
  letter-spacing: 0.08em; color: var(--muted); padding-inline: 0.2em;
}
.rechner__zeilen { display: grid; gap: 0; width: 100%; margin: 0; }
.rechner__zeilen > div {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem;
  padding-block: 0.7rem; border-top: var(--hairline);
  font-size: var(--t-small); line-height: 1.5;
}
.rechner__zeilen dt { color: var(--muted); }
.rechner__zeilen dd { margin: 0; text-align: right; }
/* Auf schmalen Schirmen stehen Regler und Blatt untereinander. Nebeneinander
   bleiben sonst zwei Spalten von je gut zehn Zeichen übrig, in denen jede
   Zeile siebenmal umbricht. Gilt für alle Rechner der Seite. */
@media (max-width: 860px) {
  .rechner { grid-template-columns: 1fr; gap: var(--space-block); }
  .rechner__blatt { position: static; }
}
.zahl-wechsel { animation: zahlwechsel 420ms ease-out; }
@keyframes zahlwechsel { from { opacity: 0.35; } to { opacity: 1; } }

/* ---------------------------------------------------------
   Schrittfolge
   --------------------------------------------------------- */
.stepper {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gutter);
  position: relative; counter-reset: schritt;
}
.stepper--3 { grid-template-columns: repeat(3, 1fr); }
.stepper--4 { grid-template-columns: repeat(4, 1fr); }
.stepper--5 { grid-template-columns: repeat(5, 1fr); }
/* Die Ziffern sitzen als Stationen auf der Linie, und jede Station zieht ihre
   eigene Verbindung zur nächsten. Vorher lief eine durchgehende Linie über die
   ganze Breite und die Ziffer stand am rechten Ende ihrer Spalte — also direkt
   neben der nächsten Station, wo sie niemandem gehörte. Hinter der letzten
   Station hört die Linie jetzt auf. */
.step { display: flex; flex-direction: column; gap: 0.8rem; padding-top: 2.2rem; position: relative; }
.step::before, .step::after {
  content: ''; position: absolute; top: 0; left: 0; height: 1px;
}
.step::before { right: calc(-1 * var(--gutter)); background: var(--line); }
.step::after {
  width: 0; background: var(--petrol);
  transition: width 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.step.is-erreicht::after { width: calc(100% + var(--gutter)); }
.step:last-child::before, .step:last-child::after { display: none; }
.step__num {
  position: absolute; top: 0; left: 0; transform: translateY(-50%);
  /* Der Grund der Fläche unterbricht die Linie — die Ziffer steht darauf,
     nicht daneben. */
  background: var(--grund); padding-right: 1.15em;
  font-family: var(--font-display); font-size: var(--t-btn); font-weight: 500;
  letter-spacing: 0.2em; line-height: 1;
  /* Stand in Greige auf Sand — rund 1,8:1 und damit unlesbar. Die Ziffern
     „01, 02, 03" nummerieren die Schritte, sind also eine Angabe wie jede
     andere. Muted allein genügt nicht: auf Sand sind das 4,0:1, knapp unter
     der Grenze. Deshalb dieselbe Regel wie im übrigen Haus — `--fg-2` wird
     von der getönten Fläche gesetzt und ist dort Ink, auf Papier Muted.
     Zurück tritt die Ziffer über Grösse und Sperrung, nicht über Blässe. */
  color: var(--fg-2, var(--muted));
  transition: color 400ms ease-out;
}
.step.is-erreicht .step__num { color: var(--petrol); }
.step__media { overflow: hidden; background: var(--greige); margin-bottom: 0.3rem; }
.step__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.step__title { color: var(--ink); }
.step__body { color: var(--fg-2, var(--muted)); font-size: var(--t-body); }
.step__more { margin-top: 0.2rem; }
.step__more > summary {
  list-style: none; cursor: pointer;
  font-family: var(--font-display); font-size: var(--t-btn); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--petrol);
  display: inline-flex; align-items: baseline; gap: 0.5em;
  padding-block: 0.4em;
  transition: color 160ms ease-out;
}
.step__more > summary::-webkit-details-marker { display: none; }
.step__more > summary::after { content: '\002B'; font-family: var(--font-text); }
.step__more[open] > summary::after { content: '\2212'; }
.step__more > summary:hover { color: var(--petrol-dark); }
.step__inner { padding-top: 0.4rem; }
.step__inner p { font-size: var(--t-small); color: var(--fg-2, var(--muted)); line-height: 1.7; }
.step__inner .bullets { margin-top: 0.7rem; }
.step__inner .bullets li { font-size: var(--t-small); }
.js-anim .step__more[open] .step__inner { animation: auftauchen 380ms both; }

/* ---------------------------------------------------------
   Auswahlhilfe
   --------------------------------------------------------- */
.wahl { display: grid; gap: var(--space-block); }
.wahl__fragen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.wahl__karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.wahlkarte {
  position: relative; display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start;
  border: 0.5px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  background: transparent;
  transition: border-color 260ms ease-out, background-color 260ms ease-out, opacity 260ms ease-out;
}
.wahlkarte p { color: var(--fg-2, var(--muted)); font-size: var(--t-body); }
.wahlkarte__preis { font-family: var(--font-display); letter-spacing: 0.06em; color: var(--ink) !important; }
.wahlkarte__marke {
  position: absolute; top: -0.62rem; left: clamp(1.4rem, 2.5vw, 2rem);
  background: var(--petrol); color: var(--paper);
  font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.35em 0.8em; border-radius: var(--radius);
}
.wahlkarte[data-treffer='ja'] { border-color: var(--petrol); background: var(--paper); }
.wahlkarte[data-treffer='nein'] { opacity: 0.5; }
.wahl__unklar { margin-top: -1rem; }

/* ---------------------------------------------------------
   Bewertungen als Leiste
   --------------------------------------------------------- */
.stars--gross { display: block; margin-top: 0.6rem; letter-spacing: 0.28em; font-size: 0.9rem; }
.rail { position: relative; }
.rail__spur {
  /* Zwei Stimmen im Blick, der Rest wartet rechts. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 50%;
  gap: 0; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  border-top: var(--hairline);
}
.rail__spur::-webkit-scrollbar { display: none; }
.rail .review {
  scroll-snap-align: start; border-top: 0;
  padding: var(--space-block) var(--gutter) var(--space-block) 0;
  min-width: 0;
}
.rail .review + .review { border-left: var(--hairline); padding-left: var(--gutter); }
.rail__steuer {
  display: flex; align-items: center; gap: 1.1rem;
  padding-top: 1.5rem; border-top: var(--hairline);
}
.rail__knopf {
  width: 2.6rem; height: 2.6rem; border-radius: var(--radius);
  border: 0.5px solid var(--line); background: transparent; color: var(--petrol);
  cursor: pointer; line-height: 1; font-size: 0.95rem;
  transition: border-color 160ms, color 160ms, opacity 160ms;
}
.rail__knopf:hover:not(:disabled) { border-color: var(--petrol); }
.rail__knopf:disabled { opacity: 0.3; cursor: default; }
.rail__stand {
  font-family: var(--font-display); font-size: var(--t-btn);
  letter-spacing: 0.16em; color: var(--muted);
}
.no-js .rail__steuer { display: none; }

/* ---------------------------------------------------------
   Fragen: Suche, Zähler, Treffer
   --------------------------------------------------------- */
/* Die Suche braucht das Skript. Sie stand deshalb mit `hidden` im
   Dokument und wurde nachträglich eingeblendet — das schob den ganzen
   Abschnitt um fünfundachtzig Pixel nach unten, gemessene 0,115 CLS auf
   der Startseite. Jetzt steht sie von Anfang an da und verschwindet nur,
   wenn kein Skript läuft. Die Klasse `no-js` nimmt ein Skript im Kopf der
   Seite weg, also noch vor dem ersten Bild — es entsteht kein Sprung.
   Dieselbe Mechanik wie bei .fortschritt und .rail__steuer. */
.no-js .faq__suche { display: none; }
.faq__suche {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--gutter); margin-bottom: 1.6rem;
}
.feld--suche { flex: 1 1 22rem; max-width: 32rem; margin: 0; }
.feld--suche .t-label { display: block; margin-bottom: 0.4rem; }
.faq__stand {
  font-family: var(--font-display); font-size: var(--t-btn);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; padding-bottom: 0.7em;
}
/* Die Zahl stand in Greige auf Papier — rund 2:1 Kontrast, bei elf Pixeln
   nicht mehr lesbar und der einzige verbliebene Verstoss der Startseite.
   Sie trägt eine echte Angabe („44 Fragen"), also gilt für sie derselbe
   Mindestkontrast wie für den Rest. Zurückgenommen bleibt sie durch Grösse
   und Sperrung, nicht durch Blässe. */
.filter__zahl {
  font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--muted);
  margin-left: 0.6em;
}
.faq__filter[aria-pressed='true'] .filter__zahl { color: var(--petrol); }
.faq__filter[hidden] { display: none; }
.qa mark { background: var(--petrol-tint); color: var(--ink); padding: 0 0.15em; }
.qa__anker { margin-top: 1.2rem; font-size: var(--t-small); }
.qa__anker a { color: var(--muted); text-decoration: none; }
.qa__anker a::before { content: '\00a7\00a0'; }
.qa__anker a:hover { color: var(--petrol); }
.qa:target > summary { color: var(--petrol); }
.qa:target { scroll-margin-top: 7rem; }
.faq__leer, .filter__leer { margin-top: 2rem; color: var(--muted); font-size: var(--t-lead); }

/* Filterleiste über Bildern */
.filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-block); }
/* Wie .faq__filter — siehe dort. */
.filter__btn {
  font-family: var(--font-text); font-size: var(--t-small);
  padding: 0.6em 1.1em; border: var(--kante-bedienung); border-radius: var(--radius);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.filter__btn:hover { color: var(--petrol); border-color: var(--petrol); }
.filter__btn[aria-pressed='true'] { color: var(--petrol); border-color: var(--petrol); }
.filter__btn[aria-pressed='true'] .filter__zahl { color: var(--petrol); }
.mosaic__bild { margin: 0; transition: opacity 300ms ease-out; }
.mosaic__bild[hidden] { display: none; }

.dish { position: relative; }
.status {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.status::before {
  content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--greige);
}
.status[data-offen='true'] { color: var(--petrol); }
.status[data-offen='true']::before { background: var(--petrol); }

/* ---------------------------------------------------------
   Umbrüche
   --------------------------------------------------------- */
@media (max-width: 1080px) {
  .rail__spur { grid-auto-columns: 60%; }
  .stepper { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-block); }
  .stepper::before, .stepper::after { display: none; }
  .step { border-top: var(--hairline); padding-top: 2.2rem; }
  .step::before, .step::after { display: none; }
  .wahl__fragen, .wahl__karten { grid-template-columns: 1fr; }
  .wahl__fragen { gap: 0; }
}

@media (max-width: 860px) {
  .rail__spur { grid-auto-columns: 86%; }
  .rail .review + .review { padding-left: var(--gutter); }
  .faq__suche { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  .faq__stand { padding-bottom: 0; }
  .feld--suche { max-width: none; }
  .lupe__text { display: none; }
}

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

@media (prefers-reduced-motion: reduce) {
  .js-anim .enter--stagger.is-in > *,
  .js-anim .assi__schritt:not([hidden]),
  .js-anim .assi__liste > div,
  .js-anim .step__more[open] .step__inner { animation: none !important; }
  .js-anim .split__media.enter:not(.is-in) img { transform: none; }
}

@media print {
.js-anim .hero__media img { transform: scale(1.045); }
.js-anim .hero__media.is-da img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .hero__media img { transform: none; }
}

/* Bild in der Auswahlkarte */
.wahlkarte__media { width: calc(100% + 2 * clamp(1.4rem, 2.5vw, 2rem)); margin: calc(-1 * clamp(1.4rem, 2.5vw, 2rem)) calc(-1 * clamp(1.4rem, 2.5vw, 2rem)) 0.4rem; overflow: hidden; background: var(--greige); }
.wahlkarte__media img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; }

/* ---------------------------------------------------------
   Aufklappbares Kleingedrucktes in Merkmalslisten
   --------------------------------------------------------- */
.mehr { margin-top: 0.9rem; }
.mehr > summary {
  list-style: none; cursor: pointer;
  font-family: var(--font-display); font-size: var(--t-btn); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--petrol);
  display: inline-flex; align-items: baseline; gap: 0.5em; padding-block: 0.35em;
  transition: color 160ms ease-out;
}
.mehr > summary::-webkit-details-marker { display: none; }
.mehr > summary::after { content: '\002B'; font-family: var(--font-text); }
.mehr[open] > summary::after { content: '\2212'; }
.mehr > summary:hover { color: var(--petrol-dark); }
.mehr__inner { padding-top: 0.5rem; }
.mehr__inner p { font-size: var(--t-small); line-height: 1.7; }
.js-anim .mehr[open] .mehr__inner { animation: auftauchen 380ms both; }
.section--sand .mehr > summary, .section--tint .mehr > summary { color: var(--petrol); }

/* Sprungziele bleiben unter der klebenden Kopfzeile sichtbar */
section[id], .prose h2, .prose h3, .qa[id], [id]:target { scroll-margin-top: 5.5rem; }

/* Lange deutsche Komposita — „Datenschutzerklärung“ in Versalien — sind
   breiter als ein schmales Fenster. Rastfelder dürfen schrumpfen, Wörter
   dürfen notfalls umbrechen. */
.hero__grid > *, .grid > *, .split > *, .items > *, .stepper > * { min-width: 0; }
.hero--text-only .hero__text { max-width: min(var(--shell-text), 100%); }

/* ---------------------------------------------------------
   Kennungen der Sektionen — erscheinen nur mit ?ids in der Adresse
   --------------------------------------------------------- */
.js-kennungen section[data-teil] {
  position: relative;
  outline: 0.5px dashed rgba(29, 78, 73, 0.3); outline-offset: -1px;
}
.kennung {
  position: absolute; top: 0; left: 0; z-index: 60;
  border: 0; cursor: pointer;
  font-family: var(--font-text); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
  padding: 0.4rem 0.6rem;
  background: var(--petrol); color: var(--paper);
}
.kennung:hover { background: var(--ink); }

/* ---------------------------------------------------------
   Kundenwand — die Logos stehen, der Text hält sie zusammen
   --------------------------------------------------------- */
.kunden {
  display: grid; grid-template-columns: 4fr 8fr;
  gap: var(--space-block) calc(var(--gutter) * 2); align-items: start;
}
.kunden__text { display: flex; flex-direction: column; gap: 1.3rem; align-items: flex-start; }
.kunden__text h2 { margin-top: -0.3rem; }

/* Ein Raster aus Haarlinien, wie ein Registerblatt. Jede Zelle ist gleich
   hoch; das Logo sitzt mittig darin. */
.marken {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 0; padding: 0; list-style: none;
  column-gap: calc(var(--gutter) * 1.5);
  border-bottom: var(--hairline);
}
.marke {
  display: grid; place-items: center;
  min-height: 8rem; padding: 1rem 0;
  border-top: var(--hairline);
}
/* `multiply` lässt den weissen Kasten, den viele Logodateien mitbringen, im
   Sandton verschwinden — ohne dass die Dateien angefasst werden müssen. */
.marke__logo {
  width: auto; height: auto; object-fit: contain;
  mix-blend-mode: multiply;
  /* Die Dateien kommen aus fünfzehn Häusern und sind entsprechend
     unterschiedlich abgestimmt. Eine Spur Kontrast und kein Farbrest bringt
     sie auf einen Ton, ohne eine einzige Datei anzufassen. */
  filter: grayscale(1) contrast(1.12);
}
.marke--breit .marke__logo { max-width: 94%; max-height: 2.5rem; }
.marke--wort  .marke__logo { max-width: 84%; max-height: 3.1rem; }
.marke--block .marke__logo { max-width: 64%; max-height: 4.4rem; }
.marke--hoch  .marke__logo { max-width: 50%; max-height: 5.4rem; }

/* Das Siegel kommt von aussen und bringt eigene Farben und Schriften mit. Es
   steht deshalb unter dem Text, abgesetzt durch eine Haarlinie, statt sich
   zwischen die Zeilen des Hauses zu drängen. Die Höhe ist reserviert (104 px,
   das Mass des Widgets), damit beim Nachladen nichts springt — auch dann
   nicht, wenn es gar nicht kommt. */
.kunden__siegel {
  width: 100%; min-height: 104px;
  margin-top: 0.6rem; padding-top: 1.4rem;
  border-top: var(--hairline);
}
.kunden__siegel .trustlocal-widget { display: block; }

@media (max-width: 1080px) {
  .kunden { grid-template-columns: 1fr; }
  .kunden__siegel { min-height: 0; }
}

@media (max-width: 600px) {
  .marken { grid-template-columns: repeat(2, 1fr); }
  .marke { min-height: 6.5rem; }
}

/* =========================================================
   Dramaturgie: Kopf, Erzählblock, Grossbild, Karussell, Saison
   ========================================================= */

/* --- Medien wachsen beim Scrollen ----------------------------------
   Der eine Kniff, der lange Seiten lebendig macht. Entscheidend ist, dass
   das Wachsen an der Scrollposition hängt und nicht einmal auslöst: das
   Bild atmet mit, solange es durchs Bild zieht, und steht erst still, wenn
   es oben angekommen ist.

   Wo der Browser Scroll-Zeitleisten kennt, macht er das selbst. Wo nicht,
   bleibt das einmalige Wachsen beim Eintreten — sichtbar weniger, aber
   nicht kaputt. */
/* Der Rahmen bleibt durchsichtig: sonst blitzt seine Füllung als Streifen
   rings um das noch verkleinerte Bild hervor. */
.medium { background: transparent; }
.js-anim .medium img { transition: transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.js-anim .medium.enter:not(.is-in) img { transform: scale(0.93); }

@supports (animation-timeline: view()) {
  @keyframes mitwachsen {
    from { transform: scale(0.90); }
    to   { transform: scale(1); }
  }
  /* Die Zeitleiste bekommt einen Namen und hängt am Rahmen, nicht am Bild.
     `view()` am Bild selbst greift ins Leere: der Rahmen schneidet mit
     `overflow: hidden`, gilt damit als eigener Scrollbehälter — und der
     scrollt nie. */
  .js-anim .medium {
    view-timeline-name: --mitwachsen;
    view-timeline-axis: block;
  }
  .js-anim .medium img {
    /* Einzelangaben, nicht die Kurzform: `animation:` würde die Dauer auf 0s
       setzen, und dann stünde die Bewegung sofort am Ende. Bei einer
       Scroll-Zeitleiste muss die Dauer `auto` bleiben. */
    animation-name: mitwachsen;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --mitwachsen;
    animation-range: cover 0% cover 45%;
    transition: none;
  }
  .js-anim .medium.enter:not(.is-in) img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .medium.enter:not(.is-in) img { transform: none; }
  .js-anim .medium img { animation: none; transition: none; }
}

/* --- Kopf aus zwei Flächen ----------------------------------------- */
.hero--doppel {
  --held-zeile: 1.4rem;                       /* Abstand zwischen den Zeilen */
  --held-boden: clamp(2.5rem, 4vw, 4rem);     /* Luft unter der letzten Zeile */
  /* Aussenrand des Kopfes: derselbe, den der Satzspiegel auf der übrigen
     Seite hält. Links wie rechts, damit der Kopf zur Seite darunter passt
     und nicht nur zu sich selbst. */
  --held-rand: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
  display: grid; grid-template-columns: 7fr 5fr; gap: 2px;
  min-height: clamp(30rem, 76vh, 50rem);
  border-bottom: 0;
  background: var(--greige);
}
.held { position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.held__bild { position: absolute; inset: 0; }
.held__bild picture { display: block; width: 100%; height: 100%; }
.held__bild img { width: 100%; height: 100%; object-fit: cover; }
/* Zwei Verläufe statt einem: der senkrechte trägt die Schrift, der waagerechte
   legt sich nur über die Seite, auf der sie steht. Zusammen halten sie den
   Kontrast dort, wo Buchstaben liegen — und lassen das Motiv dort frei, wo
   keine stehen. Ein einziger, flächiger Verlauf hatte beide Bilder in eine
   petrolfarbene Wand verwandelt; von einem Buffet war nichts mehr zu sehen. */
.held::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(18, 51, 48, 0.52) 0%,
      rgba(18, 51, 48, 0.32) 38%,
      rgba(18, 51, 48, 0.12) 70%,
      rgba(18, 51, 48, 0) 100%),
    linear-gradient(to top,
      rgba(18, 51, 48, 0.80) 0%,
      rgba(18, 51, 48, 0.64) 34%,
      rgba(18, 51, 48, 0.38) 64%,
      rgba(18, 51, 48, 0.12) 88%,
      rgba(18, 51, 48, 0.02) 100%);
}
/* Die schmale Fläche trägt mehr Text als die breite — Zahl, Zeile und den
   Stimmen-Ticker. Ihr Verlauf reicht deshalb höher hinauf, sonst steht die
   Überzeile auf einer hellen Stelle des Motivs. */
.held--klein::after {
  background:
    /* Der äussere Rand bleibt eine Spur dunkler: dort liegt ab 1200 px die
       Kapitelspalte, deren helle Striche sonst auf hellem Motiv verschwinden. */
    linear-gradient(to left,
      rgba(18, 51, 48, 0.26) 0%,
      rgba(18, 51, 48, 0) 16%),
    linear-gradient(to right,
      rgba(18, 51, 48, 0.52) 0%,
      rgba(18, 51, 48, 0.30) 42%,
      rgba(18, 51, 48, 0.10) 78%,
      rgba(18, 51, 48, 0.04) 100%),
    linear-gradient(to top,
      rgba(18, 51, 48, 0.84) 0%,
      rgba(18, 51, 48, 0.70) 40%,
      rgba(18, 51, 48, 0.48) 68%,
      rgba(18, 51, 48, 0.24) 88%,
      rgba(18, 51, 48, 0.08) 100%);
}
.held__text {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--held-zeile, 1.4rem);
  padding: var(--gutter);
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
  color: var(--paper);
  width: 100%;
}
.held--gross .held__text {
  padding-left: var(--held-rand);
  padding-right: clamp(var(--gutter), 4vw, 4rem);
}
/* Rechts derselbe Rand wie links: der Kopf sitzt dann mittig im Satzspiegel,
   nicht bündig zum Fensterrand. */
.held--klein .held__text { padding-right: var(--held-rand); }
.held .t-label { color: var(--petrol-tint); }
/* Die Schlagzeile richtet sich nach ihrer Spalte, nicht nach dem Fenster:
   „Eventmanagement" ist ein Wort von fünfzehn Zeichen und lief unterhalb von
   1300 px über die Kante in die Fläche daneben, wo es abgeschnitten wurde.
   `cqi` braucht dafür einen Bezugskasten — und der muss die Spaltenbreite
   annehmen (`stretch`), sonst fiele er mit dem Containment auf null. */
.held__ansage { justify-self: stretch; width: 100%; container-type: inline-size; }
.held h1 {
  color: var(--paper); max-width: min(100%, 26ch);
  font-size: min(var(--t-h1), max(1.9rem, 9cqi));
  line-height: 1.02; letter-spacing: 0.06em;
  /* Im Doppelkopf setzt der Zeilenabstand des Rasters die Abstände. Der
     Aussenabstand aus `.hero h1` machte die Zeile 26 px höher als ihren
     Inhalt — links unsichtbar, rechts als Loch neben der Note. */
  margin-bottom: 0;
}
.held .t-lead { color: var(--paper); max-width: 46ch; }
.held__titel {
  font-family: var(--font-display); font-weight: var(--w-display);
  font-size: var(--t-h2); line-height: 1.16; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--paper); max-width: min(100%, 22ch);
}
/* Die Note als ein Block: die Zahl gross, daneben Sterne und Anzahl. So
   belegt sie eine Zeile — wie die Schlagzeile in der Fläche daneben — statt
   zwei. Der Strich darunter liegt auf der Höhe, auf der links der Fliesstext
   beginnt. */
.bewertung {
  display: flex; align-items: flex-end; gap: clamp(0.9rem, 1.4vw, 1.75rem);
  width: 100%; max-width: 42ch;
  padding-bottom: var(--held-zeile);
  border-bottom: 0.5px solid rgba(250, 247, 242, 0.28);
  /* Bezug für die Zahl: ihre eigene Spalte. Zulässig, weil die Breite hier
     aus `width`/`max-width` kommt und nicht aus dem Inhalt. */
  container-type: inline-size;
}
/* Im Zeilenraster füllt der Notenblock seine Zeile aus: die Note sitzt unten,
   der Strich liegt auf der Zeilenkante — genau dort, wo gegenüber der
   Fliesstext beginnt. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 861px) {
    .bewertung { align-self: stretch; }
  }
}

.bewertung__text {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding-bottom: 0.5rem;
}
.bewertung .stars { color: var(--petrol-tint); font-size: var(--t-body); }
.bewertung__wert {
  /* Die Zeile unter den Sternen ist Beiwerk, keine Überschrift: sie bleibt
     mittelschwer, damit die Zahl daneben die Wucht behält. */
  font-family: var(--font-display); font-weight: 500; line-height: 1.25;
  font-size: var(--t-lead); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper);
}
/* Die Note war grösser gesetzt als die Schlagzeile daneben — eine fremde
   Zahl lauter als die eigene Ansage. Sie bleibt der Anker der rechten
   Fläche, bleibt aber unter der Überschrift und wächst mit ihrer Spalte. */
.held__zahl {
  font-family: var(--font-display); font-weight: var(--w-display); line-height: 0.82;
  font-size: min(4.75rem, max(2.75rem, 17cqi)); letter-spacing: 0.02em;
  color: var(--paper);
}
/* Knöpfe auf dunklem Grund wie in den Petrolflächen */
/* Knopfzeile und Eckdaten bilden zusammen die letzte Zeile des Rasters —
   ein fünftes Kind würde die Zeilenzuordnung verschieben. */
.held__handlung { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.held__hinweis {
  font-size: var(--t-small); line-height: 1.6; letter-spacing: 0.04em;
  color: rgba(250, 247, 242, 0.8);
  text-wrap: balance; max-width: 46ch;
}
.held .btn { background: var(--paper); color: var(--petrol); border-color: var(--paper); }
.held .btn:hover { background: var(--petrol-tint); border-color: var(--petrol-tint); }
.held .btn--ghost { background: transparent; color: var(--paper); border-color: rgba(250, 247, 242, 0.45); }
.held .btn--ghost:hover { background: transparent; border-color: var(--paper); }
.held .arrow { color: var(--paper); }
.js-anim .held__bild img { transform: scale(1.045); transition: transform 1400ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.js-anim .hero--doppel.is-da .held__bild img { transform: none; }

/* --- Stimmen im Kopf: ein Zitat nach dem anderen -------------------
   Alle Zitate liegen im selben Rasterfeld übereinander, deshalb ist der
   Ticker so hoch wie das längste Zitat und nicht so hoch wie acht.
   Ohne Skript stehen sie untereinander in einem Kasten, der scrollt. */
.stimmen { width: 100%; max-width: 42ch; display: grid; gap: var(--held-zeile, 1.4rem); }
.stimmen__spur { display: grid; list-style: none; margin: 0; padding: 0; }
.stimme {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem;
  opacity: 0; visibility: hidden;
  transform: translateY(0.4rem);
  transition: opacity 520ms ease-out, transform 520ms ease-out, visibility 0s linear 520ms;
}
.stimme[data-an="true"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 520ms ease-out, transform 520ms ease-out, visibility 0s;
}
.stimme blockquote {
  margin: 0; color: var(--paper);
  font-family: var(--font-text); font-size: var(--t-body); line-height: 1.75;
}
.stimme__wer {
  font-size: var(--t-small); letter-spacing: 0.04em;
  color: rgba(250, 247, 242, 0.72);
}

.stimmen__steuer { display: flex; align-items: center; gap: 0.9rem; }
.stimmen__halt {
  flex: none; width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center;
  border: 0.5px solid rgba(250, 247, 242, 0.45); border-radius: 50%;
  background: transparent; color: var(--paper); cursor: pointer;
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
}
.stimmen__halt:hover { border-color: var(--paper); background: rgba(250, 247, 242, 0.12); }
.stimmen__halt svg { width: 0.55rem; height: 0.55rem; fill: currentColor; display: block; }
.stimmen__punkte { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.stimmen__punkt {
  display: block; width: 1.1rem; padding: 0.7rem 0;
  border: 0; background: transparent; cursor: pointer;
}
.stimmen__punkt::before {
  content: ''; display: block; height: 1px;
  background: rgba(250, 247, 242, 0.4);
  transition: background-color 200ms ease-out;
}
.stimmen__punkt[aria-current="true"]::before { background: var(--paper); }
.stimmen__punkt:hover::before { background: rgba(250, 247, 242, 0.8); }

/* Vier Zeilen für beide Hälften: Überzeile, Aussage, Fliesstext, Handlung.
   Die Zeilen gehören der Sektion; beide Textspalten klinken sich mit
   `subgrid` in dieselben Zeilen ein. Dadurch beginnt jede Zeile links wie
   rechts auf derselben Höhe — unabhängig davon, wie hoch ihr Inhalt ist.
   Ohne `subgrid` (oder unter 861 px) bleibt es beim gestapelten Satz. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 861px) {
    .hero--doppel {
      grid-template-rows: 1fr auto auto auto auto calc(var(--held-boden) - var(--held-zeile));
      row-gap: var(--held-zeile);
    }
    .held { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; }
    .held__text {
      display: grid; grid-template-rows: subgrid; grid-row: 2 / 6;
      justify-items: start; align-items: start;
      padding-top: 0; padding-bottom: 0;
    }
    .stimmen { grid-row: span 2; grid-template-rows: subgrid; }
    /* Die Bedienung ist niedriger als die Knopfzeile gegenüber; sie sitzt
       mittig in ihrer Zeile, damit die Grundlinie unten stimmt. */
    .stimmen__steuer { align-self: center; }
  }
}

/* Ohne Skript: alle Stimmen untereinander, der Kasten begrenzt die Höhe.
   Knapp gehalten — die Zeile, die er belegt, teilt er sich mit dem Fliesstext
   der Fläche daneben; je höher der Kasten, desto grösser die Lücke dort. */
.no-js .stimmen__spur {
  gap: 1.4rem; max-block-size: 11rem; overflow-y: auto;
  padding-right: 0.6rem;
}
.no-js .stimme { grid-area: auto; opacity: 1; visibility: visible; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .stimme { transition: none; transform: none; }
}

/* --- Erzählblock: der Text bleibt stehen --------------------------- */
.erzaehlung { display: grid; gap: var(--space-block); }
.etappe { display: grid; grid-template-columns: 4fr 8fr; gap: var(--space-block) calc(var(--gutter) * 2); align-items: start; }
.etappe__text {
  /* Mittig zum Bild ausgerichtet; klebt zusätzlich, falls der Text auf
     kleinen Fenstern höher wird als das Bild. */
  position: sticky; top: 8.5rem; align-self: center;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem;
}
.etappe__marke { color: var(--petrol); }
.etappe__text p { color: var(--fg-2, var(--muted)); }
.etappe__medien { display: grid; gap: var(--gutter); min-width: 0; }
.etappe__bild { margin: 0; overflow: hidden; background: var(--greige); }
.etappe__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* Nachweis unter dem Bild: welcher Ort dort zu sehen ist. */
.etappe__ort { margin-top: 0.7rem; }
.etappe__ort a { color: var(--petrol); text-underline-offset: 0.25em; }
/* --- Grossbild mit Satz -------------------------------------------- */
.grossbild { position: relative; margin: 0; overflow: hidden; background: var(--greige); }
.grossbild img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 21 / 9; max-height: 42rem; }
.grossbild__text {
  position: absolute; inset: auto 0 0 0;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  color: var(--paper);
  background: linear-gradient(to top, rgba(18, 51, 48, 0.88) 0%, rgba(18, 51, 48, 0.45) 55%, rgba(18, 51, 48, 0) 100%);
}
.grossbild__text .t-label { color: var(--petrol-tint); margin-bottom: 1.2rem; }
.grossbild blockquote {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.5rem, 0.9rem + 2.4vw, 3rem);
  line-height: 1.18; letter-spacing: 0.05em; text-transform: uppercase;
  max-width: 22ch; text-wrap: balance;
}
.grossbild .t-small { display: block; margin-top: 1.2rem; color: var(--petrol-tint); }

/* --- Wahl im Rechner: Form und Schalter ---------------------------- */
/* Drei Formen nebeneinander, als Reiter gesetzt statt als Radiokreise —
   sichtbar bleibt das Verhalten eines Radiofelds, samt Tastaturbedienung. */
.wahl__option {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7rem 1.1rem; cursor: pointer;
  border: 0.5px solid var(--line); background: transparent;
  font-family: var(--font-display); font-size: var(--t-btn); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  transition: color 160ms ease-out, border-color 160ms ease-out, background 160ms ease-out;
}
.wahl__option + .wahl__option { margin-left: -0.5px; }
.wahl__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.wahl__option:hover { color: var(--ink); }
.wahl__option:has(input:checked) { background: var(--petrol); border-color: var(--petrol); color: var(--paper); }
.wahl__option:has(input:focus-visible) { outline: 2px solid var(--petrol); outline-offset: 2px; }
.wahl__schalter {
  display: inline-flex; align-items: center; gap: 0.7rem; cursor: pointer;
  font-size: var(--t-body); color: var(--ink);
}
.wahl__schalter input { width: 1.05rem; height: 1.05rem; accent-color: var(--petrol); }
/* Die drei Formen bilden zusammen eine Leiste. */
.feld .wahl { display: flex; flex-wrap: wrap; gap: 0; }

/* --- Bildstrecke: Kostprobe statt Archiv ---------------------------- */
/* Die Leiste sitzt unter dem Raster und trägt dieselben Knöpfe wie das
   Karussell — wer dort geblättert hat, kennt sie hier wieder. */
.strecke__leiste {
  display: flex; align-items: center; gap: 1.25rem;
  margin-top: var(--space-block); padding-top: 1.4rem; border-top: var(--hairline);
}
/* Stand nach links, die beiden Pfeile bleiben rechts beieinander — sonst
   stünden sie an den Enden einer sehr breiten Zeile und gehörten optisch
   nicht mehr zusammen. */
.strecke__leiste .rail__stand { order: -1; margin-right: auto; }

/* --- Besichtigungsbogen -------------------------------------------- */
/* Eine Liste, die wie ein abgehakter Bogen liest: Marke, Nummer, Sache —
   und rechts, was es kostet, wenn die Antwort fehlt. */
.bogen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: bogen; }
.bogen__zeile {
  display: grid; grid-template-columns: 2.2rem 3rem 1fr 22rem;
  gap: 0 var(--gutter); align-items: start;
  padding: 1.9rem 0; border-top: var(--hairline);
}
.bogen__zeile:last-child { border-bottom: var(--hairline); }
.bogen__marke {
  width: 1.15rem; height: 1.15rem; margin-top: 0.2rem;
  border: 0.5px solid var(--greige); display: block; position: relative;
}
/* Häkchen aus zwei Rändern — kein Bild, kein Zeichensatz. */
.bogen__marke i {
  position: absolute; left: 0.28rem; top: 0.05rem;
  width: 0.36rem; height: 0.62rem;
  border: solid var(--petrol); border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
  opacity: 0; transition: opacity 300ms ease-out;
}
.bogen__zeile:hover .bogen__marke i,
.is-in .bogen__marke i { opacity: 1; }
/* Die Ziffer trägt dieselbe Farbe wie das Häkchen — und liest sich auf Sand
   mit 6,5:1, während Greige dort auf 1,5:1 käme und praktisch verschwände. */
.bogen__nr {
  font-family: var(--font-display); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.2em; color: var(--petrol); line-height: 1.9;
}
.bogen__sache h3 {
  font-family: var(--font-display); font-size: var(--t-h3); font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 0.6rem;
}
.bogen__sache p { color: var(--fg-2, var(--muted)); }
/* Die Folge steht abgesetzt: eigene Fläche, eigene Farbe, eigener Ton. */
.bogen__folge {
  background: var(--grund); border-left: 2px solid var(--petrol);
  padding: 0.1rem 0 0.1rem 1.1rem; margin: 0;
  font-size: var(--t-small); line-height: 1.7; color: var(--ink); max-width: none;
}
.bogen__folge .t-label { color: var(--petrol); margin-bottom: 0.35rem; }
.bogen__fuss { margin-top: var(--space-block); }
@media (max-width: 1080px) {
  .bogen__zeile { grid-template-columns: 2.2rem 3rem 1fr; }
  .bogen__folge { grid-column: 3; margin-top: 1.1rem; }
}
@media (max-width: 600px) {
  .bogen__zeile { grid-template-columns: 1.8rem 1fr; gap: 0 0.9rem; }
  .bogen__nr { display: none; }
  .bogen__folge { grid-column: 2; }
}

/* --- Video mit Klick zum Laden ------------------------------------- */
/* Die Bühne hält das Seitenverhältnis, bevor und nachdem der Rahmen von
   YouTube eingesetzt ist — dadurch springt beim Klick nichts. */
.video { margin: 0; display: grid; gap: 0.9rem; }
/* Randlos: der Film füllt die Sektion über die ganze Fensterbreite; der
   Deckel hält ihn auf sehr breiten Schirmen in erträglicher Höhe.

   Der Rahmen ist absichtlich grösser gerechnet als die Fläche und wird
   zusätzlich leicht vergrössert: Titelzeile und Steuerung von YouTube
   liegen damit ausserhalb des Ausschnitts. Weil 100vw × 56.25vw immer
   16:9 ergibt und die Bühne nie höher als 56.25vw ist, deckt der Rahmen
   die Fläche in jedem Fenster vollständig ab. */
.video--voll { gap: 0; }
.video--voll .video__buehne { width: 100%; aspect-ratio: auto; height: min(56.25vw, 88vh); }
.video--voll .video__buehne iframe {
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw; max-width: none;
  transform: translate(-50%, -50%) scale(1.12);
  pointer-events: none;
}
/* Am Telefon wäre ein 16:9-Streifen nur ein Band von zwei Fingern Höhe.
   Dort bekommt die Fläche Höhe, und der Rahmen wächst mit, damit er sie
   weiter vollständig deckt — beschnitten wird links und rechts. */
@media (max-width: 600px) {
  .video--voll .video__buehne { height: 48vh; }
  .video--voll .video__buehne iframe { width: calc(48vh * 16 / 9); height: 48vh; }
}
.video__buehne {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--greige);
}
.video__buehne img, .video__buehne iframe {
  display: block; width: 100%; height: 100%; border: 0;
}
.video__buehne img { object-fit: cover; }
.video__start { position: absolute; inset: 0; display: block; text-decoration: none; color: inherit; }
/* Aufforderung als Leiste in der unteren Ecke statt als Knopf in der Mitte:
   die Mitte gehört dem Bild. Das Dreieck steht aus Rändern, kein Bild,
   kein Zeichensatz, nichts, was nachgeladen werden müsste. */
.video__cue {
  position: absolute; left: 0; bottom: 0;
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.75rem 1.2rem;
  background: rgba(18, 51, 48, 0.82);
  transition: background 200ms ease-out;
}
.video__knopf {
  position: relative; width: 1.6rem; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(250, 247, 242, 0.5); flex: none;
}
.video__knopf::after {
  content: ''; position: absolute; left: 56%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 0.3em 0 0.3em 0.5em;
  border-color: transparent transparent transparent var(--paper);
}
.video__label {
  font-family: var(--font-display); font-size: var(--t-label);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper);
}
.video__start:hover .video__cue,
.video__start:focus-visible .video__cue { background: var(--petrol); }
/* Der Tonschalter liegt über dem laufenden Rahmen — oben rechts, damit er
   der Steuerleiste von YouTube am unteren Rand nicht in die Quere kommt. */
.video__ton {
  position: absolute; right: 0; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 1rem; border: 0;
  font-family: var(--font-display); font-size: var(--t-label);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper); background: rgba(18, 51, 48, 0.82); cursor: pointer;
  transition: background 200ms ease-out;
}
.video__ton:hover, .video__ton:focus-visible { background: var(--petrol); }
.video__fuss a { color: var(--petrol); text-underline-offset: 0.25em; }
@media (prefers-reduced-motion: reduce) {
  .video__cue { transition: none; }
}

/* --- Karussell aus Bildkarten -------------------------------------- */
.rail--karten .rail__spur { grid-auto-columns: 24%; border-top: 0; gap: var(--gutter); }
.karte {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.9rem;
  text-decoration: none; color: inherit; min-width: 0;
}
.karte__bild { display: block; overflow: hidden; background: var(--greige); }
.karte__bild img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.karte__titel {
  font-family: var(--font-display); font-size: var(--t-h3); font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.35;
  display: flex; align-items: baseline; gap: 0.5em;
  transition: color 160ms ease-out;
}
.karte__titel::after { content: '\2192'; font-family: var(--font-text); letter-spacing: 0; color: var(--petrol); }
.karte__note { font-size: var(--t-small); color: var(--fg-2, var(--muted)); }
.karte:hover .karte__titel { color: var(--petrol); }
.js-anim .karte__bild img { transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.karte:hover .karte__bild img { transform: scale(1.04); }

/* --- Bildsätze im Wechsel ------------------------------------------ */
.gruppe__titel {
  font-family: var(--font-display); font-size: var(--t-h3); font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: var(--space-block); color: var(--muted);
}
.gruppe[hidden] { display: none; }
/* Alle Gerichtfotos sind auf Reinweiss freigestellt — auch die 134 des
   Portfolios, bei denen der Weisspunkt beim Import gesetzt wurde. Deshalb
   genügt eine weisse Fläche und `multiply` für jeden Satz. */
.dishes--klein { grid-template-columns: repeat(4, 1fr); }
/* Im Wechsel steht der Name kleiner als auf der Speisekarte selbst. */
.dishes--klein .dish__name { font-size: var(--t-small); letter-spacing: 0.1em; }

/* Dieselbe Mechanik trägt auf den Anlass-Seiten die vier Tischdekorationen.
   Deren Aufnahmen sind keine freigestellten Gerichte, sondern ganze Räume:
   kein Multiply, beschnitten statt eingepasst. */
.dishes--tafel .dish img {
  mix-blend-mode: normal; object-fit: cover; aspect-ratio: 4 / 3;
  background: var(--greige); border-radius: var(--radius);
}

/* Mit Skript trägt die Wahlleiste die Beschriftung, die Zwischentitel
   entfallen — sichtbar. Aus dem Dokument dürfen sie nicht verschwinden:
   sie sind die Zwischenstufe zwischen dem H2 des Abschnitts und den
   Gerichtnamen. Mit `display: none` sprang die Gliederung von H2 auf H4,
   und Vorlesegeräte verloren die Reihenfolge. Deshalb bleiben sie stehen
   und werden nur aus dem Bild geschoben. */
.js-gruppenwahl .gruppe__titel {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .etappe { grid-template-columns: 1fr; gap: var(--space-block); }
  .etappe__text { position: static; }
  .erzaehlung { gap: var(--space-block); }
  .rail--karten .rail__spur { grid-auto-columns: 40%; }
  .dishes--klein { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 860px) {
  .hero--doppel { grid-template-columns: 1fr; min-height: 0; }
  .held { min-height: clamp(26rem, 68vh, 34rem); }
  .held--gross .held__text { padding-inline: var(--gutter); }
  /* Untereinander steht die Schrift über die ganze Breite — der waagerechte
     Verlauf hilft dann nicht mehr, also trägt der senkrechte allein. */
  .held::after, .held--klein::after {
    background: linear-gradient(to top,
      rgba(18, 51, 48, 0.90) 0%,
      rgba(18, 51, 48, 0.76) 34%,
      rgba(18, 51, 48, 0.48) 64%,
      rgba(18, 51, 48, 0.18) 88%,
      rgba(18, 51, 48, 0.04) 100%);
  }
  .grossbild img { aspect-ratio: 4 / 3; }
  .rail--karten .rail__spur { grid-auto-columns: 62%; }
  .dishes--klein { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .rail--karten .rail__spur { grid-auto-columns: 78%; }
  .dishes--klein { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------
   Bildreihe: eingefasste Kacheln, Beschriftung darunter
   --------------------------------------------------------- */
.reihe__kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--gutter); margin-bottom: var(--space-block);
}
.reihe__kopf h2 { margin-top: 1.2rem; }
.reihe__kopf p { margin-top: 0.9rem; }
/* Die erste Kachel nimmt vierzig Prozent, die drei anderen teilen sich den
   Rest. Die Höhe ist fest statt aus dem Seitenverhältnis abgeleitet, damit
   alle vier auf einer Linie stehen. */
.reihe {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--gutter);
}
.reihe__kachel { margin: 0; display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.reihe__bild { display: block; overflow: hidden; }
.reihe__bild img {
  width: 100%; height: clamp(20rem, 40vw, 38rem);
  object-fit: cover; object-position: center;
}
.reihe__kachel figcaption { display: grid; gap: 0.3rem; }
.reihe__titel {
  font-family: var(--font-display); font-size: var(--t-h3); font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.35;
  color: var(--ink);
}
.reihe__note { font-size: var(--t-small); line-height: 1.6; color: var(--fg-2, var(--muted)); }

@media (max-width: 1080px) {
  .reihe { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-block); }
  .reihe__bild img { height: clamp(18rem, 34vw, 26rem); }
}

@media (max-width: 600px) {
  .reihe { grid-template-columns: 1fr; }
  .reihe__kopf { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
}
.reihe__link { display: flex; flex-direction: column; gap: 0.9rem; text-decoration: none; color: inherit; }
.reihe__link .reihe__titel { display: flex; align-items: baseline; gap: 0.5em; transition: color 160ms ease-out; }
.reihe__link .reihe__titel::after { content: '\2192'; font-family: var(--font-text); letter-spacing: 0; color: var(--petrol); }
.reihe__link:hover .reihe__titel { color: var(--petrol); }
.js-anim .reihe__link .reihe__bild img { transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1); }

/* ---------------------------------------------------------
   Doppelporträt der Leitung
   --------------------------------------------------------- */
.portraet { margin: 0; display: grid; gap: 0; }
.portraet__satz { margin-top: 1.15em; color: var(--fg-2, var(--muted)); }
.portraet__bild { display: block; overflow: hidden; }
.portraet__bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 40%; }
/* Zwei Namensblöcke, jeder ungefähr unter seiner Person: die linke Person
   sitzt bei rund einem Drittel der Breite, die rechte bei rund zwei Dritteln. */
.portraet__namen {
  display: grid; grid-template-columns: 2fr 1fr;
  gap: var(--gutter);
  margin-top: 1.6rem; padding-top: 1.5rem; border-top: var(--hairline);
}
.portraet__person { display: grid; gap: 0.35rem; align-content: start; }
.portraet__name {
  font-family: var(--font-display); font-size: var(--t-h3); font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.3; color: var(--ink);
}
.portraet__namen .t-label { color: var(--muted); }

@media (max-width: 860px) {
  .portraet__bild img { aspect-ratio: 4 / 3; }
  .portraet__namen { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* ---------------------------------------------------------
   Kamerafahrt im Kopf der Tischdekoration

   Fünf Bilder liegen übereinander. Jedes ist für ein Fünftel der Runde zu
   sehen, blendet in das nächste über und fährt währenddessen langsam über
   die Tafel — deshalb zwei Animationen je Ebene: eine für die Blende, eine
   für die Fahrt. Beide haben dieselbe Dauer, damit die Bewegung genau in
   der Sichtbarkeit liegt und das Bild stillsteht, solange es unsichtbar ist.

   Kein Video, kein Skript. Wer Bewegung abbestellt hat, sieht das erste
   Bild — und nur dieses.
   --------------------------------------------------------- */

.hero--flug {
  position: relative; isolation: isolate; overflow: hidden;
  /* Vollbild: Kopfzeile und Kopf ergeben zusammen ein Fenster. `svh` misst
     ohne die ein- und ausfahrenden Leisten mobiler Browser, `vh` bleibt als
     Rückfall für Browser, die es nicht kennen. Die Untergrenze fängt sehr
     flache Fenster ab — im Querformat eines Telefons bliebe sonst kein Platz
     für die Schrift. */
  min-height: max(28rem, calc(100vh - var(--kopf-hoehe)));
  min-height: max(28rem, calc(100svh - var(--kopf-hoehe)));
  display: grid; align-items: end;
  background: var(--petrol-dark);
}
.flug { position: absolute; inset: 0; z-index: 0; }
.flug__ebene { position: absolute; inset: 0; opacity: 0; }
.flug__ebene img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* Ohne Animation — etwa in einem Browser ohne CSS-Animationen — bliebe alles
   unsichtbar. Deshalb steht die erste Ebene grundsätzlich offen; die
   Animation überschreibt das nur, während sie läuft. */
.flug__ebene:first-child { opacity: 1; }

/* Beide Animationen laufen gleich lang und gleich versetzt: die Blende auf
   der Ebene, die Fahrt auf dem Bild darin. Der Vorlauf von -0.6s sorgt
   dafür, dass die erste Ebene sofort offen steht statt einzublenden. */
.flug__ebene,
.flug__ebene img {
  animation-duration: calc(var(--ebenen, 5) * 6s);
  animation-delay: calc(var(--n) * 6s - 0.6s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.flug__ebene { animation-name: flugBlende; }

.flug__ebene:nth-child(1) img { animation-name: flugRuhe; }
.flug__ebene:nth-child(2) img { animation-name: flugRechts; }
.flug__ebene:nth-child(3) img { animation-name: flugLinks; }
.flug__ebene:nth-child(4) img { animation-name: flugNah; }
.flug__ebene:nth-child(5) img { animation-name: flugWeit; }

@keyframes flugBlende {
  0%   { opacity: 0; }
  2%   { opacity: 1; }
  20%  { opacity: 1; }
  22%  { opacity: 0; }
  100% { opacity: 0; }
}
/* Die Reserve für die Fahrt steckt im Massstab: bei 1.12 stehen sechs
   Prozent je Seite über, verschoben werden höchstens dreieinhalb. */
@keyframes flugRuhe {
  0%   { transform: scale(1.14); }
  25%  { transform: scale(1.02); }
  100% { transform: scale(1.02); }
}
@keyframes flugRechts {
  0%   { transform: scale(1.20) translate3d(-3.5%, 0, 0); }
  25%  { transform: scale(1.12) translate3d(3.5%, 0, 0); }
  100% { transform: scale(1.12) translate3d(3.5%, 0, 0); }
}
@keyframes flugLinks {
  0%   { transform: scale(1.20) translate3d(3.5%, 0, 0); }
  25%  { transform: scale(1.12) translate3d(-3.5%, 0, 0); }
  100% { transform: scale(1.12) translate3d(-3.5%, 0, 0); }
}
@keyframes flugNah {
  0%   { transform: scale(1.06) translate3d(0, 2.5%, 0); }
  25%  { transform: scale(1.22) translate3d(0, -2.5%, 0); }
  100% { transform: scale(1.22) translate3d(0, -2.5%, 0); }
}
@keyframes flugWeit {
  0%   { transform: scale(1.24); }
  25%  { transform: scale(1.06); }
  100% { transform: scale(1.06); }
}

/* Der Text steht im Bild und braucht Grund unter sich. Zwei Verläufe: einer
   von unten für die Zeile, einer von links für die Spalte. */
.flug::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(18, 51, 48, 0.94) 0%, rgba(18, 51, 48, 0.72) 26%, rgba(18, 51, 48, 0.28) 52%, rgba(18, 51, 48, 0) 80%),
    linear-gradient(to right, rgba(18, 51, 48, 0.62) 0%, rgba(18, 51, 48, 0.18) 42%, rgba(18, 51, 48, 0) 66%);
}
.flug__vordergrund {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding: var(--space-section) var(--gutter) clamp(2.5rem, 5vw, 4.5rem);
}
.flug__text { display: flex; flex-direction: column; align-items: flex-start; color: var(--paper); max-width: 46rem; }
.flug__text .t-label { color: var(--petrol-tint); margin-bottom: 1.4rem; }
.flug__text h1 { color: var(--paper); margin-bottom: 1.4rem; }
.flug__text .t-lead { color: rgba(250, 247, 242, 0.95); margin-bottom: 2.2rem; }
.flug__text .btn { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.flug__text .btn:hover { background: var(--petrol-tint); border-color: var(--petrol-tint); }
.flug__text .btn--ghost { background: transparent; color: var(--paper); border-color: rgba(250, 247, 242, 0.45); }
.flug__text .btn--ghost:hover { background: rgba(250, 247, 242, 0.1); border-color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .flug__ebene { animation: none; opacity: 0; }
  .flug__ebene:first-child { opacity: 1; }
  .flug__ebene img { animation: none; transform: none; }
}