/* ==========================================================================
   COLOURS by Danis — Bachstraße 25, 88214 Ravensburg
   Design-Tokens + Layout. Quelle der Wahrheit für Farben: :root
   Farbwerte gemessen aus Logo, Speisekarte und Social-Grafiken des Betriebs.
   ========================================================================== */

/* ---------- Schriften (lokal, DSGVO) -------------------------------------- */
/* Überschriften: Zodiak (Indian Type Foundry, ITF Free Font License 2.0 —
   assets/fonts/Zodiak-FFL.txt), Fassung „kräftig", gewählt von John am
   12.11.2026 statt Gloock. Nächste freie Entsprechung zur Schrift auf dem
   Instagram-Auftritt, kein bestätigter Treffer.
   h1/h2 = Black 900, h3 = Extrabold 800, alles Übrige = Regular 400.
   🔴 Lizenz: die woff2-Dateien bleiben unverändert — kein Subsetting, kein
   Umwandeln. Und NIE die Zodiak-Variable einbauen: die 'wght'-Werte in den
   font-variation-settings unten drückten sie auf 500/600, „kräftig" wäre weg.
   Kein Kursiv geladen; font-synthesis: none hält .gericht__name aufrecht. */
@font-face {
  font-family: 'Zodiak';
  src: url('fonts/Zodiak-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Zodiak';
  src: url('fonts/Zodiak-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Zodiak';
  src: url('fonts/Zodiak-Extrabold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Zodiak';
  src: url('fonts/Zodiak-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Tokens -------------------------------------------------------- */
:root {
  /* Marke */
  --color-primary:        #b48b50;   /* Gold — Logo, Speisekarten-Umschlag */
  --color-primary-light:  #d9b278;   /* aufgehelltes Gold für Text auf Dunkel */
  --color-primary-dark:   #906b39;   /* Menü-Überschriften der Karte — nur GROSS verwenden */
  --color-primary-text:   #7a5a2e;   /* dieselbe Familie, dunkler: für Kleintext und Links.
                                        #906b39 kommt auf Creme nur auf 4,6 und auf der
                                        hellbeigen Fläche auf 4,3 — unter dem AA-Wert 4,5. */
  --color-ray:            #f4bc72;   /* Strahlen im Siegel */
  --color-accent:         #d95a5c;   /* Terrakotta — Social-Grafiken */
  --color-accent-dark:    #a8393c;   /* auf Sand kam #b8474a nur auf 4,04 */

  /* Die Splitter des Mandalas. Sie standen bisher ausschließlich in den
     Grafiken — im Stylesheet kam kein einziger dieser Töne vor. Für ein Haus,
     das Colours heißt, war die Seite damit einfarbig gold.

     Gemessen auf Creme #fdf9f1: Blau 3,65 · Salbei 3,54 · Lavendel 3,10 ·
     Terrakotta 2,89 · Rosé 1,54. Alle unter 4,5, also NUR für Linien und
     Flächen — niemals für Text auf hellem Grund. Auf Espresso liegen
     dieselben Töne zwischen 5,09 und 12,09 und tragen dort auch Schrift. */
  --f-blau:      #5584c3;
  --f-salbei:    #6d8d66;
  --f-lavendel:  #9589ac;
  --f-rose:      #eac1cc;
  --f-terra:     #ec6c6c;

  /* Dunklere Geschwister, wenn dieselbe Farbe Text tragen muss.
     Auf Creme: Blau 6,71 · Salbei 5,75 · Lavendel 5,81 · Terrakotta 6,03. */
  --f-blau-text:     #39598c;
  --f-salbei-text:   #4a6b45;
  --f-lavendel-text: #6a5c7d;

  /* Flächen */
  --color-surface:        #fdf9f1;   /* Creme — Öffnungszeiten-Grafik */
  --color-surface-alt:    #efe1cb;   /* Sand — jetzt klar von Creme unterscheidbar */
  --color-espresso:       #130a09;   /* Logo-Hintergrund */
  --color-espresso-2:     #1e1310;

  /* Text */
  --color-ink:            #241811;
  --color-muted:          #6f6053;
  --color-ink-invers:     #f4ece0;
  --color-muted-invers:   #b3a292;

  /* Linien */
  --line:                 rgba(180,139,80,.28);
  --line-invers:          rgba(180,139,80,.30);

  /* Schriftgrößen — sechs Stufen für Fließtext und Bedienelemente.
     Vorher standen 14 verschiedene Größen auf der Seite. Ursache war nicht
     Absicht, sondern Drift: body lief auf 17 px, während jeder rem-Wert auf
     16 px rechnet — jedes "1rem" landete also eine Stufe neben dem geerbten
     Text. Display-Größen (h1/h2/h3) bleiben als clamp() darunter. */
  --t-xs:  .69rem;    /* 11 px — Marker, Bildunterschriften, Feld-Labels */
  --t-s:   .75rem;    /* 12 px — Augenbrauen, gesperrte Versalien */
  --t-sm:  .81rem;    /* 13 px — Buttons, Navigation, Meta */
  --t-m:   .94rem;    /* 15 px — Beschreibungen, Fußzeile */
  --t-l:   1.0625rem; /* 17 px — Fließtext */
  --t-xl:  1.25rem;   /* 20 px — Lead */

  /* Typo */
  --font-display: 'Zodiak', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Maße */
  --radius: 2px;
  --bogen: 999px 999px 6px 6px / 46% 46% 4px 4px;  /* Rundbogen wie die Türen im Haus */
  --wrap: 1220px;
  --pad: clamp(1.25rem, 5vw, 3rem);
  --sektion:      clamp(4.5rem, 9vw, 8.5rem);
  --sektion-eng:  clamp(3.2rem, 6vw, 5.5rem);
  --sektion-weit: clamp(5.5rem, 11vw, 10.5rem);
  /* Abstände 12.11.2026 (Johns Freigabe nach Vergleich): Auf Creme trennt nur der Abstand die Abschnitte,
     deshalb EIN Wert statt drei. Die drei Größen darüber gelten nur noch für dunkle Abschnitte. */
  --abschnitt:   clamp(6.5rem, 12vw, 11rem);   /* 104 Handy … 176 Rechner, zwischen hellen Abschnitten */
  --kopf-inhalt: clamp(2.5rem, 5vw, 4rem);     /* Überschriftenblock → Inhalt, 40 … 64 */
  --titel-text:  1.4rem;                       /* Überschrift → Einleitung, wie im Seitenkopf (22 px) */
  --ease: cubic-bezier(.22,.61,.36,1);
  --kopfhoehe: 122px;            /* wird von main.js §1b real gemessen */
}

/* ---------- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--t-l);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--color-espresso); color: var(--color-primary-light);
  padding: .8rem 1.2rem;
}
.skip:focus { left: 0; }

/* ---------- Bausteine ----------------------------------------------------- */
.wrap { width: min(var(--wrap), 100%); margin-inline: auto; padding-inline: var(--pad); }
.wrap--eng { width: min(880px, 100%); margin-inline: auto; padding-inline: var(--pad); }

.sektion { padding-block: var(--sektion); position: relative; }
.sektion--eng  { padding-block: var(--sektion-eng); }
.sektion--weit { padding-block: var(--sektion-weit); }
/* Helle Abschnitte: ein Abstand. Folgen zwei helle aufeinander, zählt er nur einmal — vorher addierten sich
   zwei Ränder aus drei Größen zu 172 bis 335 px (Rechner), gemessen 12.11.2026. Dunkle behalten ihre Ränder. */
main > .sektion:not(.sektion--dunkel) { padding-block: var(--abschnitt); }
main > :is(.sektion, .abschluss):not(.sektion--dunkel) + .sektion:not(.sektion--dunkel, .insta) { padding-top: 0; }
/* Ausnahme .insta: Sie trägt die Goldwelle als Hintergrundbild, die oben über die Fotos hinausläuft. Ohne eigenen
   oberen Rand schnitt der Abschnitt davor die Welle ab (John, 12.11.2026 abends, mit Referenzbild). Die Welle zählt
   hier wie Inhalt: Der Abschnitt davor behält seinen Rand (Abstand bis zur Welle), .insta ihren (Platz der Welle). */
/* Richtung 2 (12.11.2026, decisions/log.md): Abschnittsflächen nur Creme und Espresso. Espresso nur für den Kopf,
   die Fußzeile und höchstens EINEN dunklen Abschnitt je Seite. Sand und Gold nie als ganze Fläche — Gold bleibt für
   Knöpfe, Laufband, Linien und Schrift, Sand höchstens für kleine Kästen. */
.sektion--creme { background: var(--color-surface); }
.sektion--dunkel { background: var(--color-espresso); color: var(--color-ink-invers); }

/* Augenbraue — gesperrte Versalien wie auf der Karte */
.brow {
  font-family: var(--font-ui);
  font-size: var(--t-s);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--color-primary-text);
  margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: .8rem;
}
.brow::before {
  content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; flex: none;
}
.sektion--dunkel .brow,
.hero .brow, .seitenkopf .brow { color: var(--color-primary-light); }
.brow--mitte { justify-content: center; }
.brow--mitte::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; flex: none; }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.15rem, 6.6vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  font-variation-settings: 'opsz' 72, 'wght' 500;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.62rem, 4.2vw, 3.35rem);
  line-height: 1.24;
  letter-spacing: -.008em;
  font-variation-settings: 'opsz' 48, 'wght' 500;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.22rem, 2.2vw, 1.7rem);
  line-height: 1.26;
  font-variation-settings: 'opsz' 24, 'wght' 600;
}
.lead {
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.7;
  color: var(--color-muted);
  max-width: 58ch;
}
.sektion--dunkel .lead { color: var(--color-muted-invers); }
/* Überschrift → Einleitung überall wie im Seitenkopf. Vorher hatten Überschriften und .lead keinen Rand, und die
   Einleitung saß unter Abschnittsüberschriften mit 0 px direkt auf der Zeile (12.11.2026). */
:is(h2, .h2) + :is(.lead, .bewertung-lead, .allergen-vorsatz, p:not([class])) { margin-top: var(--titel-text); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.9rem;
  font-family: var(--font-ui);
  font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn--gold { background: var(--color-primary); color: var(--color-espresso); }
.btn--gold:hover { background: var(--color-ray); transform: translateY(-2px); }
.btn--linie { border-color: currentColor; color: inherit; background: transparent; }
.btn--linie:hover { background: currentColor; transform: translateY(-2px); }
.sektion--dunkel .btn--linie:hover, .hero .btn--linie:hover { color: var(--color-espresso); }
.btn--creme { background: var(--color-surface); color: var(--color-espresso); }
.btn--creme:hover { background: #fff; transform: translateY(-2px); }

/* Kopfblock einer Sektion */
.sektionskopf { max-width: 52ch; margin-bottom: var(--kopf-inhalt); }
.sektionskopf--eng { margin-bottom: var(--kopf-inhalt); }
.sektionskopf--breit { max-width: none; margin-bottom: var(--kopf-inhalt); }

/* kleine Abstands-Helfer (statt style-Attributen — erlaubt strenge CSP) */
.mitte { text-align: center; margin: 0; }
.abstand-oben { margin: 2.6rem 0 0; }
.abstand-oben-s { margin: 1.8rem 0 0; }
/* Der Helfer muss gegen spätere Bausteinregeln gewinnen: `.schritt__hilfe` (margin -.4rem) und
   `.feld-titel` (margin 0) stehen weiter unten und hoben ihn auf — in der Reservierung überdeckte
   so die letzte Reihe Uhrzeiten den Hinweis darunter, und „Personen" klebte an den Tagen
   (gefunden 12.11.2026). Doppelte Klasse = höhere Spezifität, und nur der obere Abstand. */
.abstand-oben-s.abstand-oben-s { margin-top: 1.8rem; }
.ohne-abstand { margin: 0; }

/* Strahlenkranz — Kernmotiv der Marke */
.sonne { color: var(--color-primary); opacity: .5; pointer-events: none; }
.sonne--dreh { animation: dreh 150s linear infinite; transform-origin: 50% 50%; }
@keyframes dreh { to { transform: rotate(360deg); } }

.trenner {
  display: flex; align-items: center; justify-content: center; gap: 1.4rem;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.trenner::before, .trenner::after {
  content: ""; height: 1px; flex: 1 1 auto; max-width: 220px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.trenner img, .trenner svg { width: 84px; height: auto; opacity: 1; }
.sektion--dunkel .trenner img { width: 108px; mix-blend-mode: screen; }

/* Farbtrenner — Splitter aus dem Logo-Mandala, in dessen gemessenen Farben.
   Das ist die einzige Stelle im Markenmaterial, an der überhaupt Farbe
   vorkommt; überall sonst ist alles Gold. Deshalb sparsam einsetzen. */
.farbtrenner {
  display: flex; justify-content: center;
  padding-block: clamp(1.2rem, 2.4vw, 2rem) clamp(1rem, 1.8vw, 1.6rem);
}
.farbtrenner img { width: min(440px, 66%); height: auto; mix-blend-mode: multiply; }
/* Auf dunklem Grund dreht sich der Modus um: screen laesst Schwarz
   verschwinden und nur die hellen Striche stehen. */
.sektion--dunkel .farbtrenner img { mix-blend-mode: screen; }

/* Bogenrahmen — Rundbögen im Haus */
.bogen {
  border-radius: var(--bogen);
  overflow: hidden;
  background: var(--color-surface-alt);
}
.bogen img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Kopfzeile
   ========================================================================== */
.kopfzone { position: fixed; inset: 0 0 auto 0; z-index: 60; }
.kopf {
  position: relative;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.kopf__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 84px;
}
.kopf.ist-gescrollt {
  background: rgba(19,10,9,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-invers);
}
/* Unterseiten: Kopf trägt sofort Fläche, weil kein dunkler Hero dahinterliegt */
.kopfzone--fest .kopf { background: var(--color-espresso); border-bottom-color: var(--line-invers); }

.marke { display: flex; align-items: center; gap: .85rem; text-decoration: none; flex: none; min-height: 44px; }
.marke img { width: 42px; height: 42px; }
.marke__text { display: flex; flex-direction: column; line-height: 1; }
.marke__name {
  font-family: var(--font-display);
  font-size: var(--t-xl); letter-spacing: .17em;
  color: var(--color-primary-light);
  font-variation-settings: 'opsz' 30, 'wght' 500;
}
.marke__sub {
  font-size: var(--t-xs); letter-spacing: .3em; text-transform: uppercase;
  color: var(--color-muted-invers); margin-top: .38rem;
}

.nav { display: flex; align-items: center; gap: 2.1rem; }
.nav a {
  text-decoration: none;
  font-size: var(--t-s); font-weight: 500; letter-spacing: .17em; text-transform: uppercase;
  color: var(--color-ink-invers);
  position: relative; padding-block: .4rem;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--color-primary); transition: width .35s var(--ease);
}
.nav a:hover { color: var(--color-primary-light); }
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav a[aria-current="page"] { color: var(--color-primary-light); }

.kopf__aktion { display: flex; align-items: center; gap: 1rem; }
.kopf__tel {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; font-size: var(--t-sm); font-weight: 500;
  color: var(--color-ink-invers); white-space: nowrap;
}
.kopf__tel:hover { color: var(--color-primary-light); }
.kopf .btn { padding: .72rem 1.35rem; font-size: var(--t-s); }

.burger {
  display: none;
  width: 46px; height: 46px; padding: 0;
  background: transparent; border: 1px solid var(--line-invers); border-radius: var(--radius);
  cursor: pointer; position: relative;
}
.burger span {
  position: absolute; left: 13px; width: 20px; height: 1.5px; background: var(--color-primary-light);
  transition: transform .35s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 22.5px; }
.burger span:nth-child(3) { top: 28px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobilnav {
  position: fixed; inset: 0; z-index: 55;
  background: var(--color-espresso);
  display: flex; flex-direction: column; justify-content: center; gap: .4rem;
  padding: 6rem var(--pad) 3rem;
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
  visibility: hidden;
}
.mobilnav.ist-offen { transform: translateY(0); visibility: visible; }
.mobilnav a {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  color: var(--color-ink-invers); text-decoration: none;
  padding-block: .5rem; border-bottom: 1px solid var(--line-invers);
  font-variation-settings: 'opsz' 40, 'wght' 500;
}
.mobilnav a:last-of-type { border-bottom: 0; }
.mobilnav__fuss { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.mobilnav__fuss a { font-family: var(--font-ui); font-size: var(--t-m); border: 0; padding: 0; letter-spacing: .05em; }
.mobilnav__fuss .btn { font-family: var(--font-ui); font-size: var(--t-s); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse 86% 66% at 50% 42%, #24160f 0%, #180d0b 46%, var(--color-espresso) 78%);
  color: var(--color-ink-invers);
  overflow: hidden;
  padding: calc(var(--kopfhoehe) + 3rem) 0 4rem;
  text-align: center;
}
/* Ruhiger Hero. Kein Foto, keine Strahlengrafik — der Espresso-Grund, das
   Mandala und der Name allein. Der Strahlenkranz als Hintergrundbild war zu
   laut; die Grafiksprache der Marke trägt weiter unten die Medaillons, die
   Trenner und die Goldfläche. */
.hero__inner { position: relative; }
.hero__logo {
  width: clamp(112px, 12vw, 168px); height: auto; margin: 0 auto 1.8rem;
}
/* Feine Goldlinie unter dem Namen — das einzige Ornament im Hero. Sie greift
   die Haarlinien der Augenbrauen auf, statt eine zweite Formsprache
   aufzumachen. */
.hero__wort { display: inline-block; max-width: 100%; }
.hero__wort::after {
  content: ""; display: block; width: min(210px, 60%); height: 1px;
  margin: clamp(1.6rem, 3vw, 2.4rem) auto 0;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

.hero__ort {
  font-size: var(--t-sm); letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-muted-invers); margin: 1.6rem 0 2.2rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* Fotos hinter dem Logo (Johns Entscheidung 11.11.2026, nach dem Prototyp). Logo, Augenbraue, Adresse, Geöffnet-Anzeige
   und Knöpfe bleiben vorn; die Fotos laufen nur dahinter. Eingesetzt von main.js §1c, das auch .hero--fotos setzt —
   ohne JS bleibt der Espresso-Grund wie zuvor, und dann gibt es auch keine Abdunklung.
   Schreibtisch (> 900 px): ein Foto füllt die Fläche, das nächste blendet über (Größe und Fahrt setzt das Skript).
   Handy (≤ 900 px): Filmstreifen, Fotos im Format 5:8 in voller Höhe, 14 s je Foto (6 Fotos = 84 s), endlos nach links. */
.hero__fotos, .hero__schleier { position: absolute; inset: 0; pointer-events: none; }
.hero__fotos { z-index: 0; overflow: hidden; }
.hero__schleier { z-index: 1; }
.hero__inner { z-index: 2; }
.hero__fotos--voll img { position: absolute; left: 0; top: 0; max-width: none; opacity: 0; transition: opacity 1.8s var(--ease); will-change: transform, opacity; }
.hero__fotos--voll img.an { opacity: 1; }
.hero__spur { position: absolute; top: 0; bottom: 0; left: 0; display: flex; animation: heroLauf 84s linear infinite; will-change: transform; }
/* Übergang „kurz weich“: jedes Foto schiebt sich 28 px über das vorige und blendet dort ein. Die Maske trägt nur das
   obere (rechte) Foto — bekämen beide eine, entstünde in der Fuge ein dunkles Band. Überlappung im margin, nicht im gap:
   so ist die doppelt gesetzte Reihe genau zwei gleiche Hälften lang, und der Umlauf bei −50 % springt nicht. */
.hero__spur img {
  flex: none; height: 100%; width: auto; max-width: none; aspect-ratio: 5 / 8; object-fit: cover; margin-left: -28px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px); mask-image: linear-gradient(90deg, transparent 0, #000 28px);
}
@keyframes heroLauf { to { transform: translateX(-50%); } }
.hero--fotos .hero__schleier {
  background:
    radial-gradient(ellipse 34% 46% at 50% 48%, rgba(19,10,9,.74), rgba(19,10,9,0)),
    linear-gradient(180deg, rgba(19,10,9,.84) 0%, rgba(19,10,9,.4) 24%, rgba(19,10,9,.44) 62%, rgba(19,10,9,.93) 100%);
}
@media (max-width: 900px) {
  .hero--fotos .hero__schleier {
    background:
      radial-gradient(ellipse 34% 50% at 50% 48%, rgba(19,10,9,.8), rgba(19,10,9,0)),
      linear-gradient(180deg, rgba(19,10,9,.86) 0%, rgba(19,10,9,.42) 24%, rgba(19,10,9,.48) 64%, rgba(19,10,9,.94) 100%);
  }
}
/* Auf Fotos braucht das Gold etwas Halt (wie im Prototyp). Der Schatten sitzt an der Überschrift, nicht am Logo-Bild:
   dessen Einlauf (logoEin) endet auf filter: blur(0) und hielte einen Schatten am Bild für immer überschrieben. */
.hero--fotos .hero__marke { filter: drop-shadow(0 4px 28px rgba(0,0,0,.6)); }
.hero--fotos .brow, .hero--fotos .hero__ort { text-shadow: 0 1px 14px rgba(0,0,0,.8); }
@media (prefers-reduced-motion: reduce) {
  .hero__spur { animation: none; }
  .hero__fotos--voll img { transition: none; }
}

/* Öffnungs-Status */
.status {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-bottom: 1.9rem;
  padding: .5rem 1.1rem;
  border: 1px solid var(--line-invers); border-radius: 999px;
  font-size: var(--t-s); letter-spacing: .08em;
  color: var(--color-ink-invers);
  background: rgba(19,10,9,.72);
  backdrop-filter: blur(3px);
}
.status__punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--color-muted-invers); flex: none; }
.status.ist-offen .status__punkt { background: #6fbf73; box-shadow: 0 0 0 4px rgba(111,191,115,.18); }
.status.ist-zu .status__punkt { background: var(--color-accent); box-shadow: 0 0 0 4px rgba(217,90,92,.18); }

/* Seitenkopf (Unterseiten) */
.seitenkopf {
  background: var(--color-espresso); color: var(--color-ink-invers);
  padding: calc(var(--kopfhoehe) + clamp(2.5rem, 5vw, 4.5rem)) 0 clamp(3.5rem, 7vw, 5.5rem);
  position: relative; overflow: hidden;
}
.seitenkopf__strahlen {
  position: absolute; right: -16%; top: -60%;
  width: min(760px, 90vw); aspect-ratio: 1;
  color: var(--color-primary); opacity: .22; pointer-events: none;
}
.seitenkopf .wrap { position: relative; z-index: 2; }
.seitenkopf h1 { max-width: 16ch; }
.seitenkopf .lead { margin-top: 1.4rem; }

/* ==========================================================================
   Laufband
   ========================================================================== */
.laufband {
  background: var(--color-primary);
  color: var(--color-espresso);
  padding: .95rem 0;
  overflow: hidden;
  border-block: 1px solid rgba(255,255,255,.12);
}
.laufband__spur { display: flex; width: max-content; animation: schieben 44s linear infinite; }
.laufband__spur > span {
  display: inline-flex; align-items: center; gap: 2.6rem;
  padding-right: 2.6rem;
  font-family: var(--font-ui); font-size: var(--t-s); font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase; white-space: nowrap;
}
.laufband__spur > span::after { content: "✦"; font-size: var(--t-xs); opacity: .7; letter-spacing: 0; }
@keyframes schieben { to { transform: translateX(-50%); } }

/* ==========================================================================
   Drei Rollen — Café / Bar / Restaurant
   ========================================================================== */
.rollen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.6rem); }
.rolle {
  position: relative;
  padding: clamp(2rem, 3.2vw, 2.9rem) clamp(1.4rem, 2.4vw, 2.1rem) clamp(2.2rem, 3.2vw, 2.9rem);
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.rolle:nth-child(2) { margin-top: clamp(0px, 2.6vw, 34px); }
/* Drei Spuren, drei Töne: Café, Bar und Restaurant tragen oben je einen
   Splitter des Mandalas. Die Karten sahen vorher aus wie Drillinge. */
.rolle::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--color-primary);
}
.rolle:nth-child(2)::after { background: var(--f-terra); }
.rolle:nth-child(3)::after { background: var(--f-blau); }
.rolle:hover { transform: translateY(-6px); box-shadow: 0 22px 50px -30px rgba(36,24,17,.5); }

/* Bildband unter den drei Rollen (Cocktails an der Bar, 03.11.2026) am 12.11.2026 entfernt —
   John: „passt an der Stelle null rein“. Das Foto bleibt auf „Das Haus“ und in der Instagram-Reihe. */
/* Die Embleme bringen Kranz und Rahmen selbst mit — kein CSS-Ring mehr. */
.rolle__motiv {
  width: 138px; height: 138px; margin-bottom: 1.5rem;
  display: grid; place-items: center;
}
/* Die Embleme kommen auf weißem Grund. `multiply` löscht das Weiß gegen die
   Creme-Fläche — sauberer als Freistellen, weil JPEG an feinen Linien sonst
   Farbsäume hinterlässt. */
.rolle__motiv img {
  width: 100%; height: auto;
  mix-blend-mode: multiply;
}
.rolle h3 { margin-bottom: .55rem; }
.rolle::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--color-primary), rgba(180,139,80,0));
  opacity: .7;
}
.rolle p { color: var(--color-muted); font-size: var(--t-m); margin: 0; }
/* NACH .rolle p, sonst gewinnt dessen höhere Spezifität (0,1,1 gegen 0,1,0).
   Genau daran hingen vorher die zweizeiligen Zeitangaben. */
.rolle .rolle__zeit {
  font-size: var(--t-s); letter-spacing: .13em; text-transform: uppercase;
  color: var(--color-primary-text); margin-bottom: .9rem;
}

/* ==========================================================================
   Split — Bild / Text
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--umgekehrt .split__bild { order: 2; }
.split__bild { position: relative; }
.split__bild img { width: 100%; height: auto; border-radius: var(--radius); }
.split__bild--bogen { border-radius: var(--bogen); overflow: hidden; }
.split__bild--bogen img { border-radius: 0; }
.split__bild--fuellt { aspect-ratio: 4 / 3; }
.split__bild--fuellt img { width: 100%; height: 100%; object-fit: cover; }
/* Leicht runde Ecken wie die Kacheln auf „Das Haus“ (Gastgeber-Foto, Johns Wunsch 11.11.). Am Rahmen, nicht am Bild:
   Beim Einblenden steht das Bild vergrößert (reveal--bild) — runde Ecken am Bild selbst wären dann eckig angeschnitten. */
.split__bild--rund { border-radius: 18px; overflow: hidden; }
.split__bild--rund img { border-radius: 0; }
.split__notiz {
  position: absolute; right: clamp(-1rem, -1.5vw, -2rem); bottom: -1.6rem;
  background: var(--color-espresso); color: var(--color-primary-light);
  padding: 1.1rem 1.5rem;
  font-family: var(--font-display);
  font-size: var(--t-l); line-height: 1.3;
  max-width: 15rem;
  border-radius: var(--radius);
}
.split__notiz small {
  display: block; font-family: var(--font-ui); font-size: var(--t-xs);
  letter-spacing: .22em; text-transform: uppercase; color: var(--color-muted-invers);
  margin-bottom: .4rem;
}
.split__text h2 { margin-bottom: 1.3rem; }
.split__text .btn { margin-top: .9rem; }

/* Zahlenreihe */
.fakten { display: grid; grid-template-columns: repeat(3, auto); justify-content: start;
          gap: clamp(1.4rem, 3.4vw, 3rem); margin: 2.2rem 0 1.6rem; }
.fakt__zahl {
  font-family: var(--font-display); font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1;
  color: var(--color-primary-dark);
  font-variation-settings: 'opsz' 40, 'wght' 500;
}
.sektion--dunkel .fakt__zahl { color: var(--color-primary-light); }
.fakt__text {
  font-size: var(--t-s); letter-spacing: .17em; text-transform: uppercase;
  color: var(--color-muted); margin-top: .5rem;
}
.sektion--dunkel .fakt__text { color: var(--color-muted-invers); }

/* ==========================================================================
   Karten-Auszug + Speisekarte
   ========================================================================== */
.karte-spalten {
  columns: 2;
  column-gap: clamp(2.5rem, 6vw, 5.5rem);
}
.karte-gruppe { break-inside: avoid; margin-bottom: 3.2rem; }
.karte-gruppe h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--color-primary-dark);
  margin-bottom: .3rem;
  font-variation-settings: 'opsz' 36, 'wght' 600;
}
.karte-gruppe__hinweis {
  font-size: var(--t-s); letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-muted); margin-bottom: 1.5rem;
}
/* Literangaben bleiben klein geschrieben — „0,3 L“ wäre schlicht falsch */
.karte-gruppe__hinweis--masse { text-transform: none; letter-spacing: .1em; font-size: var(--t-s); }
.karte-gruppe > ul { border-top: 1px solid var(--line); }

.gericht {
  display: grid; grid-template-columns: 1fr auto;
  gap: .2rem 1.5rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
}
.gericht__name {
  font-family: var(--font-display);
  font-size: var(--t-l);
  font-variation-settings: 'opsz' 18, 'wght' 600;
  color: var(--color-ink);
}
.gericht__preis {
  font-family: var(--font-display);
  font-size: var(--t-l); white-space: nowrap;
  font-variation-settings: 'opsz' 18, 'wght' 600;
  color: var(--color-primary-dark);
  text-align: right;
}
.gericht__preis span { display: inline-block; min-width: 2.9rem; text-align: right; }
.gericht__preis span + span { margin-left: .7rem; }
.gericht__text {
  grid-column: 1 / -1;
  font-family: var(--font-ui); font-style: normal;
  font-size: var(--t-m); line-height: 1.5;
  color: var(--color-muted);
}
.gericht--zeile { padding: .5rem 0; }
.gericht--zeile .gericht__name { font-size: var(--t-m); font-style: italic; font-variation-settings: 'opsz' 16, 'wght' 400; }

.marker {
  display: inline-block; margin-left: .45rem;
  font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #3f6338; vertical-align: .12em;
}
.marker--gf { color: var(--color-primary-text); }

.karte-notiz {
  font-family: var(--font-ui); font-style: normal;
  color: var(--color-muted); font-size: var(--t-m);
  margin-top: 1rem;
}

/* Kategorie-Leiste Speisekarte */
.kategorien {
  position: sticky; top: var(--kopfhoehe); z-index: 40;
  background: rgba(253,249,241,.95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-block: 1px solid var(--line);
}
.kategorien__spur {
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.kategorien__spur::-webkit-scrollbar { display: none; }
.kategorien a {
  flex: none; text-decoration: none;
  padding: 1.05rem 1.15rem;
  font-size: var(--t-s); font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-muted); white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.kategorien a:hover { color: var(--color-ink); }
.kategorien a.ist-aktiv { color: var(--color-primary-dark); border-bottom-color: var(--color-primary); }
/* Der Unterstrich der gewählten Kategorie wechselt die Farbe — acht
   Kategorien, fünf Splitter plus Gold. Die Schrift bleibt im dunklen Gold:
   Blau und Salbei kommen auf Creme nur auf 3,6 und wären als Text zu schwach. */
.kategorien a:nth-child(2).ist-aktiv { border-bottom-color: var(--f-terra); }
.kategorien a:nth-child(3).ist-aktiv { border-bottom-color: var(--f-blau); }
.kategorien a:nth-child(4).ist-aktiv { border-bottom-color: var(--f-salbei); }
.kategorien a:nth-child(5).ist-aktiv { border-bottom-color: var(--f-lavendel); }
.kategorien a:nth-child(6).ist-aktiv { border-bottom-color: var(--f-rose); }
.kategorien a:nth-child(7).ist-aktiv { border-bottom-color: var(--f-terra); }
.kategorien a:nth-child(8).ist-aktiv { border-bottom-color: var(--f-blau); }

.karte-block { padding-block: clamp(3rem, 6vw, 5rem); scroll-margin-top: calc(var(--kopfhoehe) + 58px); }
.karte-block:focus { outline: none; }
.karte-gruppe[hidden], .gericht[hidden] { display: none; }

/* ==========================================================================
   Anruf-Leiste (nur Handy)
   ========================================================================== */
.rufleiste { display: none; }
@media (max-width: 760px) {
  .rufleiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    /* AUS seit 13.11.2026 (John): „Tisch reservieren“ steht unten im Menü (.mobilnav__tisch), Anrufen nicht mehr als
       Leiste. Das Markup bleibt, weil das Tool und bearbeitung_pruefen daran hängen (Reservierung aus → ein Knopf). */
    display: none; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--line-invers);
    /* padding-bottom hält die Knöpfe über der Home-Leiste des iPhones */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .rufleiste__knopf {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 56px; text-decoration: none;
    font-family: var(--font-ui); font-size: var(--t-sm);
    letter-spacing: .12em; text-transform: uppercase;
  }
  .rufleiste__knopf--ruf { background: var(--color-espresso); color: var(--color-primary-light); }
  .rufleiste__knopf--tisch { background: var(--color-primary); color: var(--color-espresso); }
  .fuss { padding-bottom: 1.5rem; }
}

/* Gangleiste über der Küche — die obere der beiden Achsen. Wird von
   main.js §6b erzeugt und liegt deshalb nicht im Markup. Sie scrollt
   waagerecht wie die Kategorienleiste: acht Gänge passen auf dem Handy
   nicht nebeneinander, und umbrechen würde drei Zeilen kosten. */
.karte-gaenge {
  display: flex; gap: .3rem; margin-bottom: .8rem;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line);
}
.karte-gaenge::-webkit-scrollbar { display: none; }
.karte-gaenge__knopf {
  flex: none; background: none; border: 0; cursor: pointer;
  min-height: 44px; padding: .5rem .9rem;
  font-family: var(--font-ui); font-size: var(--t-sm);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-muted); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.karte-gaenge__knopf span { font-size: var(--t-xs); opacity: .7; letter-spacing: .04em; }
.karte-gaenge__knopf:hover { color: var(--color-ink); }
.karte-gaenge__knopf.ist-aktiv {
  color: var(--color-primary-dark); border-bottom-color: var(--color-primary);
}

/* Filterleiste über der Küche. Wird von main.js §6b erzeugt. */
.karte-filter {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-bottom: 1rem;
}
.karte-filter__knopf {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .55rem 1.1rem;
  background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-ui); font-size: var(--t-sm); letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-muted);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.karte-filter__knopf span {
  font-size: var(--t-xs); letter-spacing: .04em;
  color: var(--color-muted); opacity: .8;
}
.karte-filter__knopf:hover { color: var(--color-ink); border-color: var(--color-primary); }
.karte-filter__knopf.ist-aktiv {
  background: var(--color-espresso); border-color: var(--color-espresso);
  color: var(--color-ink-invers);
}
/* Vegetarisch und vegan tragen das Grün der Marke, nicht Espresso — die
   Farbe sagt hier etwas. Genutzt wird der dunkle Salbei: auf ihm steht
   Creme-Schrift bei 5,75, der helle Ton käme nur auf 3,5. */
.karte-filter__knopf[data-wert="vegetarisch"].ist-aktiv,
.karte-filter__knopf[data-wert="vegan"].ist-aktiv {
  background: var(--f-salbei-text); border-color: var(--f-salbei-text);
}
.karte-filter__knopf.ist-aktiv span { color: var(--color-primary-light); opacity: 1; }
/* Zählt, wie viel von der Karte übrig bleibt. Leer bei „Alles" — dann steht
   die Zeile nicht im Weg. */
.karte-filter__stand {
  min-height: 1.4em; margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
  font-size: var(--t-sm); color: var(--color-muted); letter-spacing: .04em;
}
.karte-block[hidden] { display: none; }

/* Weiter/Zurück unter jedem Kategorieblock. Wird von main.js §6 erzeugt und
   steht deshalb nicht im Markup. */
.karte-weiter {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between;
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line);
}
.karte-weiter__knopf {
  display: flex; flex-direction: column; gap: .2rem;
  min-height: 44px; justify-content: center;
  padding: .6rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--color-ink);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.karte-weiter__knopf:hover { border-color: var(--color-primary); background: var(--color-surface); }
.karte-weiter__knopf span {
  font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-muted);
}
.karte-weiter__knopf b {
  font-family: var(--font-display); font-size: var(--t-l); font-weight: 400;
  font-variation-settings: 'opsz' 20, 'wght' 450;
}
.karte-weiter__knopf--zurueck { text-align: left; }
/* Der Weiter-Knopf steht rechts, auch wenn kein Zurück daneben liegt. */
.karte-weiter__knopf--weiter { text-align: right; margin-left: auto; }
.karte-weiter__knopf--zurueck span::before { content: "\2190\00a0"; }
.karte-weiter__knopf--weiter span::after { content: "\00a0\2192"; }
.karte-block + .karte-block { border-top: 1px solid var(--line); }
.karte-block__kopf { margin-bottom: var(--kopf-inhalt); max-width: 62ch; }

/* Zwei Kategorien tragen ein eigenes Motiv — die Orangenscheibe bei den
   alkoholfreien Getränken, die Flasche bei den Weinen. Es steht rechts neben
   dem Kopf und nimmt keinen Platz aus dem Textfluss; auf schmalen Schirmen
   fällt es weg, weil dort jede Zeile Breite zählt. */
.karte-block--motiv { position: relative; }
.karte-block__motiv {
  position: absolute; top: clamp(2rem, 4vw, 3rem); right: 0;
  width: clamp(120px, 14vw, 190px);
  /* Höhe hart begrenzt: die Flasche ist hochformatig und lief sonst quer
     durch die Preisspalte. Mit `contain` bleibt sie im Rahmen, statt ihn
     zu sprengen. */
  max-height: 168px; height: auto; object-fit: contain; object-position: top right;
  opacity: .42; pointer-events: none;
}
/* Glas-Illustrationen (Set „Fancy Cocktails 01“, localvectorstudio.com) sind Vollfarbe Rot statt
   Goldlinie — bei .42 wurden sie rosa. Deshalb eigene Deckkraft. */
.karte-block__motiv--glas { opacity: .9; }
/* Weinflaschen (12.11.2026): Gold voll wie die Gläser des Bar-Stils, nicht blass wie die alte Linienzeichnung. */
.karte-block__motiv--gold { opacity: 1; }
.karte-notiz--quelle { font-size: var(--t-s); margin-top: .4rem; }
.karte-notiz--quelle a { color: inherit; }
@media (max-width: 900px) { .karte-block__motiv { display: none; } }
.karte-block__kopf h2 { margin-bottom: .6rem; }

/* Bar-Stil (12.11.2026, Johns Wahl „Fassung 3“): Cocktails & Spirituosen als ein Block, je Gruppe ein Glas,
   abwechselnd links/rechts, goldene Linie dazwischen. Gläser und Überschriften gold, Getränke dunkel — das helle
   Gold #b48b50 trägt nur Zeichnung und Linien, als Schrift wäre es auf Creme zu blass (2,96).
   Die Gläser sind Masken (assets/grafik/bar/): Die Farbe kommt von hier, nicht aus der Datei.
   Erzeugt von KARTE_PHP (Zweig $bar) in _werkzeug/bearbeitung.php — Markup dort und hier gleich halten. */
.karte-block--bar .karte-block__kopf { max-width: none; }   /* 62ch brach „Cocktails & Spirituosen“ in zwei Zeilen */
.karte-block--bar .karte-block__kopf h2 {
  color: var(--color-primary-dark); text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.02;
}
.karte-bar > .karte-gruppe {
  position: relative; margin: 0;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center;
  padding-block: clamp(2.5rem, 5vw, 3.8rem);
}
.karte-bar > .karte-gruppe:first-child { padding-top: 0; }
.karte-bar > .karte-gruppe + .karte-gruppe::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: var(--color-primary); opacity: .85;
}
/* Links/rechts setzt das Tool (data-seite) — gezählt werden nur Gruppen mit Glas. Ohne Glas steht die Liste links. */
.karte-bar > .karte-gruppe[data-seite="rechts"],
.karte-bar > .karte-gruppe:not([data-glas]) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.karte-bar > .karte-gruppe[data-seite="rechts"] .karte-gruppe__glas { grid-column: 2; grid-row: 1; }
.karte-bar > .karte-gruppe[data-seite="rechts"] .karte-gruppe__inhalt { grid-column: 1; grid-row: 1; }
.karte-gruppe__glas {
  display: block; justify-self: center; height: clamp(210px, 26vw, 330px);
  background: var(--color-primary);
  -webkit-mask: var(--b) center / contain no-repeat; mask: var(--b) center / contain no-repeat;
}
.glas--sour      { --b: url(grafik/bar/sour.webp);      aspect-ratio: 461 / 680; }
.glas--martini   { --b: url(grafik/bar/martini.webp);   aspect-ratio: 506 / 680; }
.glas--longdrink { --b: url(grafik/bar/longdrink.webp); aspect-ratio: 303 / 680; }
.glas--tumbler   { --b: url(grafik/bar/whisky.webp);    aspect-ratio: 571 / 680; }   /* Datei neu (Senft, 12.11.): altes Glas mit Halm nicht aus dem Cache */
.glas--zeste     { --b: url(grafik/bar/zeste.webp);     aspect-ratio: 654 / 680; }
.glas--schnaps   { --b: url(grafik/bar/obstbrand.webp); aspect-ratio: 240 / 680; }   /* Datei neu benannt: altes Bild nicht aus dem Cache */
.glas--mojito    { --b: url(grafik/bar/mojito.webp);    aspect-ratio: 579 / 680; }
.glas--bier      { --b: url(grafik/bar/bier.webp);      aspect-ratio: 371 / 680; }
.glas--weizen    { --b: url(grafik/bar/weizen.webp);    aspect-ratio: 265 / 680; }
.glas--spritz    { --b: url(grafik/bar/aperol.webp);    aspect-ratio: 304 / 680; }   /* Datei neu (Aperol, 12.11.): altes Set-Glas nicht aus dem Cache */
.glas--ballon    { --b: url(grafik/bar/ballon.webp);    aspect-ratio: 409 / 680; }
.glas--limo      { --b: url(grafik/bar/limo.webp);      aspect-ratio: 620 / 680; }
.glas--eisglas   { --b: url(grafik/bar/eisglas.webp);   aspect-ratio: 367 / 680; }
.glas--kaffee    { --b: url(grafik/bar/cappuccino.webp); aspect-ratio: 764 / 680; }   /* Datei neu: alte Linientasse nicht aus dem Cache */
.glas--cola      { --b: url(grafik/bar/cola.webp);      aspect-ratio: 203 / 680; }
.glas--eiskaffee { --b: url(grafik/bar/eiskaffee.webp); aspect-ratio: 293 / 680; }
.glas--tee       { --b: url(grafik/bar/tee.webp);       aspect-ratio: 834 / 680; }
.glas--tatar     { --b: url(grafik/bar/tatar.webp);     aspect-ratio: 462 / 320; }
.glas--suppe     { --b: url(grafik/bar/suppe.webp);     aspect-ratio: 324 / 320; }
.glas--burger    { --b: url(grafik/bar/burger.webp);    aspect-ratio: 354 / 320; }
.glas--pommes    { --b: url(grafik/bar/pommes.webp);    aspect-ratio: 457 / 320; }
.glas--creme     { --b: url(grafik/bar/creme.webp);     aspect-ratio: 426 / 320; }
/* Küche (12.11.2026): Zeichnung klein neben der Gruppenüberschrift, über der Linie der Liste — die zweispaltige
   Anordnung bleibt (John: „außer bei Weine und Küche“). Sitzt rechts über der Preisspalte, überdeckt keinen Preis. */
.karte-gruppe__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.karte-gruppe__kopf > div { min-width: 0; }
.karte-gruppe__kopf .karte-gruppe__glas { flex: none; height: clamp(84px, 8vw, 118px); justify-self: auto; margin-bottom: .55rem; }
.karte-gruppe__kopf .karte-gruppe__hinweis { margin-bottom: 1.1rem; }
.karte-bar h3 {
  color: var(--color-primary-dark); text-transform: uppercase; letter-spacing: .05em;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-variation-settings: normal; margin-bottom: 1.1rem;
}
/* Eine Gruppenmenge („2 cl“) steht hinter jedem Getränk (gericht__menge--gruppe) und oben `hidden`; zwei Mengen
   („0,3 l · 0,5 l“) stehen einmal unter der Überschrift, sonst wiederholte sich die Doppelangabe in jeder Zeile. */
.karte-bar .karte-gruppe__hinweis--masse { margin-top: -.5rem; }
.karte-bar .karte-gruppe__hinweis { margin-bottom: 1rem; }
/* Eine Zeile wie auf der Vorlage: NAME – PREIS | MENGE, Zusatz klein darunter. Der Name ist display: contents,
   damit Zusatz und Menge (stehen im Namen, s. barName) per `order` an ihren Platz rücken. */
.karte-bar .gericht {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .38em;
  padding: .55rem 0; border: 0;
  font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.15rem); letter-spacing: .06em; line-height: 1.3;
  color: var(--color-ink);
}
.karte-bar .gericht__name {
  display: contents; text-transform: uppercase;
  font: inherit; font-style: normal; font-variation-settings: normal; color: inherit;
}
.karte-bar .gericht__name .marker { order: 1; letter-spacing: .1em; }
.karte-bar .gericht__preis { order: 2; font: inherit; color: inherit; text-align: left; font-variation-settings: normal; }
.karte-bar .gericht__preis::before { content: "–\00a0"; }
.karte-bar .gericht__preis span { display: inline; min-width: 0; }
.karte-bar .gericht__preis span + span { margin-left: 0; }
.karte-bar .gericht__preis span + span::before { content: " / "; }
.karte-bar .gericht__menge { order: 3; white-space: nowrap; text-transform: none; }
.karte-bar .gericht__menge::before { content: "|\00a0"; }
.karte-bar .gericht__trenner { display: none; }
.karte-bar .gericht__zusatz, .karte-bar .gericht__text {
  order: 4; flex-basis: 100%; margin-top: .15rem;
  font-family: var(--font-ui); font-size: var(--t-s); letter-spacing: .02em; text-transform: none; line-height: 1.45;
  color: var(--color-muted);
}
.karte-bar .gericht__text { order: 5; grid-column: auto; }
.karte-bar .karte-notiz { margin-top: 1.2rem; }
@media (max-width: 720px) {
  .karte-bar > .karte-gruppe, .karte-bar > .karte-gruppe[data-seite="rechts"], .karte-bar > .karte-gruppe:not([data-glas]) { grid-template-columns: 1fr; gap: 1.2rem; padding-block: 2.4rem; }
  .karte-bar > .karte-gruppe:first-child { padding-top: 0; }
  .karte-bar > .karte-gruppe[data-seite="rechts"] .karte-gruppe__glas,
  .karte-bar > .karte-gruppe[data-seite="rechts"] .karte-gruppe__inhalt { grid-column: 1; grid-row: auto; }
  .karte-gruppe__glas { justify-self: start; height: 150px; }
}

/* Auszug auf der Startseite */
.auszug { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2.5rem, 6vw, 5rem); }

/* Eckfaecher — Ornament in dunklen Sektionen, angeschnitten */
/* Sektionen mit Eck-Ornament schneiden ab, was über ihre Kante hinausläuft. */
.sektion--dunkel { overflow: hidden; }


/* Das Farbband in der Haus-Sektion. Läuft oben rechts an und über den Rand
   hinaus — angeschnitten wirkt es wie ein Ausschnitt aus etwas Größerem,
   vollständig im Bild sähe es nach Aufkleber aus. */
.hausband {
  /* Sitzt bündig in der oberen rechten Ecke: das Band tritt an der Oberkante
     der Sektion ein und rechts wieder aus. `top: 0` und das `overflow: hidden`
     der Sektion halten es davon ab, in den Abschnitt darüber zu ragen.

     Die Vorlage liegt auf Schwarz, deshalb `screen`: schwarze Bildbereiche
     lassen den Grund unverändert durch, farbige bleiben stehen. Damit braucht
     es kein Freistellen — und genau daran ist die Fassung davor gescheitert.
     Die Vorlage lag dort auf Cremeweiß, und jeder Versuch, dieses Weiß
     herauszurechnen, hat die Spuren beschädigt.

     Als Hintergrund und nicht als Bildelement: es trägt keine Bedeutung,
     hat kein alt und soll im Vorlesegerät nicht auftauchen. Seit 26.08.2026
     wird es auch auf dem Handy angezeigt (Regel weiter unten), die 69 KB
     werden dort also geladen. */
  position: absolute; top: 0; right: 0;
  width: min(430px, 34%); aspect-ratio: 1; pointer-events: none;
  background: url("grafik/farbband-haus.webp") no-repeat top right / contain;
  mix-blend-mode: screen;
}
/* Auf dem Handy bleibt das Band in derselben absoluten Lage wie am Desktop —
   es schwebt in der oberen rechten Ecke und verschiebt nichts. Nur die Größe
   ist eine andere, und die ist gemessen, nicht geschätzt.

   Bei 390 px Breite (26.08.2026, gemessen über getClientRects):

     Augenbraue „Das Haus"     x  52..126   y  90..104
     Überschrift Zeile 1       x  20..369   y 120..159
     Überschrift Zeile 2       x  20..316   y 152..191
     Galerie beginnt                        y 228

   Die Überschrift reicht bis 369 von 390 px — rechts daneben ist kein Platz.
   Frei ist allein die Ecke oberhalb von y = 120. Da der Innenabstand der
   Sektion auf jedem Handy dieselben 88 px hat (`clamp` greift erst über
   800 px Breite), ist dieser freie Streifen geräteunabhängig etwa 118 px
   hoch. Deshalb ein fester Deckel von 112 px statt eines reinen Prozentwerts:
   auf einem breiten Handy würde ein Prozentwert mitwachsen und in die
   Überschrift laufen.

   Die 32 % greifen nur auf schmalen Geräten. Zum Vergleich: am Desktop sind
   es min(430px, 34%), bei 1440 px also 30 % der Breite — das Band ist auf dem
   Handy damit ungefähr gleich groß im Verhältnis wie am Desktop.

   Die Motive der Speisekarte und die Rosetten bleiben auf dem Handy weiterhin
   aus — die liegen mitten im Text, nicht daneben. */
@media (max-width: 760px) {
  .hausband { width: min(112px, 32%); }
}

/* ==========================================================================
   Galerie
   ========================================================================== */
.galerie {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.6rem, 1.2vw, 1rem);   /* dieselbe Lücke wie .haufen auf „Das Haus“ (12.11.2026) */
}
.galerie figure { margin: 0; overflow: hidden; border-radius: var(--radius); position: relative; }
.galerie img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.galerie figure:hover img { transform: scale(1.045); }
.galerie figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.2rem .95rem;
  font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(19,10,9,.82), transparent);
}
.g-a { grid-column: span 7; aspect-ratio: 4/3; }
.g-b { grid-column: span 5; aspect-ratio: 3/4; }
.g-c { grid-column: span 4; aspect-ratio: 3/4; }
.g-d { grid-column: span 4; aspect-ratio: 3/4; }
.g-e { grid-column: span 4; aspect-ratio: 3/4; }
.g-f { grid-column: span 12; aspect-ratio: 21/9; }
/* „Gastraum & Bar“ und „Bartheke“ gleich hoch (John, 12.11.2026 abends) — das ungleiche Paar wirkte unruhig. Die Bartheke
   übernimmt die Zeilenhöhe (4:3 von „Gastraum & Bar“). Ihr Foto liegt dafür absolut darin — sonst schiebt es mit seiner
   eigenen Höhe die Zeile auf, und die Bartheke endete 66 px tiefer. Der Spruch „Eat. Share. Drink. Repeat.“ stand vom
   12. auf den 13.11. in bzw. zwischen den Reihen und ist auf Johns Wort wieder raus (13.11.2026) — zwischen den Reihen
   gilt dieselbe Lücke wie überall in der Galerie. */
@media (min-width: 761px) {
  .g-b { aspect-ratio: auto; }
  .g-b img { position: absolute; inset: 0; }
}

/* Räume */
/* Räume & Eindrücke auf „Das Haus“ — ein Haufen Kacheln (Johns Wunsch 11.11.2026; vorher zwei Sektionen, die
   Raumkacheln .raeume/.raum und der Rundgang). Räume tragen Name und Text auf dem Bild, Eindrücke eine Unterschrift.
   Große und hohe Kacheln für die Räume (der Text braucht Platz), kleine für die Eindrücke. */
.haufen {
  display: grid; gap: clamp(.6rem, 1.2vw, 1rem);
  grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(170px, 16vw, 240px);
  grid-template-areas:
    "gast   gast   bar       kaffee"
    "gast   gast   bar       fassade"
    "winter kueche draussen  draussen"
    "winter cocktails draussen draussen";
}
.haufen__teil { position: relative; margin: 0; overflow: hidden; border-radius: 18px; background: var(--color-espresso); isolation: isolate; }
.haufen__teil--gast { grid-area: gast; } .haufen__teil--bar { grid-area: bar; } .haufen__teil--kaffee { grid-area: kaffee; }
.haufen__teil--fassade { grid-area: fassade; } .haufen__teil--winter { grid-area: winter; } .haufen__teil--kueche { grid-area: kueche; }
.haufen__teil--cocktails { grid-area: cocktails; } .haufen__teil--draussen { grid-area: draussen; }
.haufen__teil img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.haufen__teil::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(19,10,9,0) 30%, rgba(19,10,9,.86) 100%); }
.haufen__text, .haufen__teil figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(1rem, 1.8vw, 1.5rem); color: var(--color-ink-invers); }
.haufen__text h3 { color: var(--color-ink-invers); margin: 0 0 .45rem; }
.haufen__text p { margin: 0; max-width: 46ch; font-size: var(--t-s); line-height: 1.5; color: rgba(243, 234, 219, .86); }
.haufen__teil figcaption { font-size: var(--t-s); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
@media (hover: hover) { .haufen__teil:hover img { transform: scale(1.04); } }
@media (max-width: 900px) {
  .haufen {
    grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(150px, 30vw, 230px);
    grid-template-areas: "gast gast" "gast gast" "bar winter" "bar winter" "kaffee fassade" "draussen draussen" "draussen draussen" "kueche cocktails";
  }
}
@media (max-width: 560px) {   /* Raumtexte brauchen die volle Breite */
  .haufen {
    grid-auto-rows: 44vw;
    grid-template-areas: "gast gast" "gast gast" "bar bar" "bar bar" "kaffee fassade" "winter winter" "winter winter" "kueche cocktails" "draussen draussen" "draussen draussen";
  }
}

/* ==========================================================================
   Bewertung — Kopf wie bei Giuseppe (Abzeichen, Überschrift, Zeile, Karte mit
   Note), Gestalt in Colours. Note, Sterne und Anzahl pflegt Colours im Tool.
   ========================================================================== */
.bewertung-titel { text-align: center; max-width: 46rem; margin: 0 auto var(--kopf-inhalt); }
.bewertung-abzeichen {
  display: inline-block; margin-bottom: 1.1rem;
  border: 1px solid rgba(180, 139, 80, .45); border-radius: 999px;
  padding: .32rem 1.15rem;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-primary-text); background: rgba(180, 139, 80, .12);
}
.bewertung-titel h2 { margin: 0 0 .9rem; }
.bewertung-lead { margin: 0; font-size: var(--t-xl); color: var(--color-muted); font-weight: 300; }

.bewertung-kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem;
  max-width: 50rem; margin: 0 auto;   /* kompakter als bei Giuseppe (Johns Wunsch 11.11.2026) */
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(.9rem, 1.6vw, 1.2rem) clamp(1rem, 2.2vw, 1.8rem);
  box-shadow: 0 14px 32px -22px rgba(40, 24, 12, .32);
}
.bewertung-kopf__wert { display: flex; align-items: center; gap: 1.2rem; min-width: 0; }
/* Das Google-Zeichen bleibt im Original — vierfarbig, unverändert, lokal eingebettet, hier im weißen Kreis
   wie bei Giuseppe. Es ist der Herkunftsnachweis der Note, kein Schmuck. */
.bewertung-kopf__g {
  flex: none; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line);
}
.bewertung-kopf__g .g-zeichen { width: 24px; height: 24px; }
.g-zeichen { width: 18px; height: 18px; flex: none; display: block; }
.bewertung-kopf__zeile { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.bewertung-kopf__note {
  font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.3rem); line-height: 1;
  color: var(--color-ink);
  font-variation-settings: 'opsz' 48, 'wght' 600;
}
/* Gold wie die Sterne bei Giuseppe (Johns Wunsch 11.11.2026) — Colours-Gold aus dem Logo. */
.sterne { color: var(--color-primary); letter-spacing: .12em; font-size: 1.1rem; }
.bewertung-kopf__meta { display: block; margin-top: .25rem; font-size: var(--t-sm); color: var(--color-muted); letter-spacing: .03em; }
.bewertung-kopf__knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: .6rem 1.3rem; border: 1.5px solid var(--color-ink); border-radius: var(--radius);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-ink); text-decoration: none; background: transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.bewertung-kopf__knopf:hover, .bewertung-kopf__knopf:focus-visible { background: var(--color-ink); color: var(--color-surface); }
.bestaetigt__post { color: var(--color-accent-dark); font-weight: 600; }

/* ==========================================================================
   Bilder-Fächer auf „Das Haus“ (Johns Wunsch 11.11.2026, Vorlage „card-fan-carousel“). Bis zu sieben Karten stehen
   als Fächer, die mittlere vorn; Pfeile und Wischen blättern, die Maus spreizt den Fächer. Lage und Bewegung setzt
   main.js §9 (dort auch, warum ohne GSAP). Ohne JS: eine wischbare Reihe.
   ========================================================================== */
.faecher { --faecher-h: 38rem; --karte-b: 18rem; position: relative; }
.faecher__buehne { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem var(--gutter, 1.25rem) 1.5rem; }
.faecher__karte {
  flex: none; width: var(--karte-b); aspect-ratio: 2 / 3; margin: 0; overflow: hidden; scroll-snap-align: center;
  border-radius: 22px; background: var(--color-espresso); box-shadow: 0 26px 50px -26px rgba(40, 24, 12, .6);
}
.faecher__karte img { display: block; width: 100%; height: 100%; object-fit: cover; }
.faecher--an .faecher__buehne {
  display: block; position: relative; overflow: visible; padding: 0;
  height: min(var(--faecher-h), 70vh); max-width: 80rem; margin: 0 auto; touch-action: pan-y;
}
.faecher--an .faecher__karte {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(var(--karte-b), calc(70vh * .47)); opacity: 0; will-change: transform, opacity;
}
.faecher__steuerung { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: clamp(1rem, 2.5vw, 1.6rem); }
.faecher__steuerung[hidden] { display: none; }
.faecher__pfeil {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(144, 107, 57, .35); background: rgba(253, 249, 241, .7); color: var(--color-primary-text);
  transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out;
}
.faecher__pfeil svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.faecher__pfeil:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-espresso); }
.faecher__pfeil:focus-visible { outline: 2px solid var(--color-primary-text); outline-offset: 3px; }
.faecher__pfeil:active { transform: scale(.96); }
.faecher__punkte { display: flex; align-items: center; gap: .5rem; }
.faecher__punkte span { width: 8px; height: 8px; border-radius: 50%; background: rgba(122, 90, 46, .2); transition: background-color .3s ease-out, transform .3s ease-out; }
.faecher__punkte span.ist-aktiv { background: var(--color-primary); transform: scale(1.3); }
.faecher__stand { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* nur für Vorleseprogramme */
@media (max-width: 1023px) { .faecher { --faecher-h: 34rem; --karte-b: 16rem; } }
@media (max-width: 767px)  { .faecher { --faecher-h: 28rem; --karte-b: 13rem; } }
@media (max-width: 639px)  { .faecher { --faecher-h: 26rem; --karte-b: 12.2rem; } }
@media (max-width: 479px)  { .faecher { --faecher-h: 22rem; --karte-b: 10.3rem; } }
/* Im Seitenkopf von „Das Haus“ (seit 11.11.2026 abends): auf Espresso, unter Titel und Einleitung, am Schreibtisch
   etwas kompakter, damit der Kopf nicht zwei Bildschirme hoch wird. Die äußeren Karten schneidet der overflow des
   Seitenkopfs ab — seitlich scrollen kann so nichts. Die Höhenabstände rechnet main.js §9 aus der echten Bühnenhöhe. */
.seitenkopf .faecher { position: relative; z-index: 2; margin-top: clamp(.5rem, 2vw, 1.25rem); }   /* die Bühne hat oben schon Luft (Kartenbogen) */
@media (min-width: 1024px) { .seitenkopf .faecher { --faecher-h: 32rem; --karte-b: 15rem; } }
.seitenkopf .faecher__karte { box-shadow: 0 28px 60px -22px rgba(0, 0, 0, .75); }
.seitenkopf .faecher__pfeil { border-color: rgba(217, 178, 120, .4); background: rgba(19, 10, 9, .45); color: var(--color-primary-light); }
.seitenkopf .faecher__pfeil:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-espresso); }
.seitenkopf .faecher__pfeil:focus-visible { outline-color: var(--color-primary-light); }
.seitenkopf .faecher__punkte span { background: rgba(243, 234, 219, .22); }
.seitenkopf .faecher__punkte span.ist-aktiv { background: var(--color-primary); }

/* ==========================================================================
   Instagram — Kartenreihe wie bei zwetschke.de (Johns Wunsch 11.11.2026):
   Hochformat-Karten mit weißem Fuß (Datum, Pfeil nach außen, Instagram-Zeichen),
   die Reihe läuft endlos durch, dahinter eine langsam atmende Farbfläche.
   Die Karten stehen doppelt (Umlauf -50 %); die Kopie ist versteckt.
   ========================================================================== */
/* Hintergrund: goldene Wellenlinien (KI-Grafik, Johns Wahl 12.11.2026 aus vier Fassungen: „Grafik 1, etwas höher").
   Der Hintergrund der Datei ist auf reines Weiß gerechnet — multipliziert verschwindet er auf der Seitenfarbe.
   Deshalb darf das Bild nach oben rutschen (calc(50% - 6vw)), ohne dass unten eine Kante entsteht, und der Abschnitt
   hat genau die Farbe der Seite. Die bunte Farbfläche (::before, 11.11.) ist damit ersetzt. */
.insta {
  overflow: hidden;
  background: var(--color-surface) url("grafik/insta-welle.webp") 50% calc(50% - 6vw) / cover no-repeat;
  /* Zwei Größen: 1800 px für normale Bildschirme, die volle Auflösung (2752 px) für scharfe Bildschirme und Handys —
     bei 1800 px wurden die feinen Linien auf Johns Retina-Bildschirm sichtbar weich (12.11.2026). */
  background-image: -webkit-image-set(url("grafik/insta-welle.webp") 1x, url("grafik/insta-welle-2x.webp") 2x);
  background-image: image-set(url("grafik/insta-welle.webp") 1x, url("grafik/insta-welle-2x.webp") 2x);
  background-blend-mode: multiply;
}
.insta-zeichensatz { position: absolute; width: 0; height: 0; overflow: hidden; }
.insta-buehne { position: relative; padding-block: clamp(1.2rem, 3vw, 2.4rem); margin-top: calc(-1 * clamp(1rem, 3vw, 2.5rem)); }
.insta-reihe { position: relative; overflow: hidden; }
.insta-spur {
  --insta-k: clamp(230px, 22vw, 340px);
  list-style: none; margin: 0; padding: 0;
  display: flex; width: max-content;
  animation: instaLauf 70s linear infinite;
  will-change: transform;
}
.insta-spur > li { flex: none; margin-right: clamp(14px, 1.6vw, 30px); }   /* Abstand im margin, nicht im gap: sonst springt der Umlauf */
@keyframes instaLauf { to { transform: translateX(-50%); } }
.insta-reihe:hover .insta-spur, .insta-spur.haelt { animation-play-state: paused; }
/* Anhalten bei Fokus nur bei Tastaturbedienung. Mit :focus-within blieb die Reihe nach dem Vorschaufenster stehen:
   Beim Schließen geht der Fokus (richtig) zurück auf die Karte — und hielt die Reihe fest, bis man woanders hinklickte
   (John, 11.11.2026). Eigene Regel: kennt ein Browser :has() nicht, fiele sonst die ganze Liste darüber mit weg. */
.insta-spur:has(:focus-visible) { animation-play-state: paused; }

.insta-karte {
  display: block; width: var(--insta-k);
  background: #fff; color: var(--color-ink); text-decoration: none;
  border-radius: calc(var(--insta-k) * 30 / 280); overflow: hidden;
  box-shadow: 0 18px 36px -24px rgba(40, 24, 12, .45);
}
.insta-karte__bild { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-espresso); }
.insta-karte__bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .5s cubic-bezier(.22, 1, .36, 1); }
.insta-karte:hover .insta-karte__bild img, .insta-karte:focus-visible .insta-karte__bild img { scale: 1.05; }
.insta-karte__play {
  position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; translate: -50% -50%;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .45)); pointer-events: none;
}
.insta-karte__fuss {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  min-height: calc(var(--insta-k) * 42 / 280);
  padding: calc(var(--insta-k) * 9 / 280) calc(var(--insta-k) * 18 / 280) calc(var(--insta-k) * 13 / 280);
}
.insta-karte__datum { display: flex; align-items: center; gap: .4rem; font-size: max(12px, calc(var(--insta-k) * 11.5 / 280)); letter-spacing: .01em; }
.insta-karte__datum svg { width: 1.15em; height: 1.15em; flex: none; }
.insta-karte__datum .insta-karte__extern { width: .75em; height: .75em; }
.insta-karte__quelle { width: calc(var(--insta-k) * 18 / 280); height: calc(var(--insta-k) * 18 / 280); flex: none; }

.insta-fuss { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding-top: .5rem; }
.insta-tag { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); }
.insta-folgen {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 44px;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-ink); text-decoration: none;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}
.insta-folgen svg { width: 26px; height: 26px; }
.insta-folgen:hover { transform: translateY(-3px); }

/* Reel in der Karte: liegt über dem Vorschaubild, startet nur sichtbar (main.js §3d, sparsam). */
.insta-karte__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.insta-karte__video.laeuft { opacity: 1; }
.insta-karte__video.laeuft ~ .insta-karte__play { opacity: 0; }
.insta-karte__play { transition: opacity .3s; }

/* Vorschaufenster wie bei zwetschke: Medium oben, darunter Konto, Text, Datum, Link; Pfeile seitlich. */
body.fenster-offen { overflow: hidden; }
.insta-fenster { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; }
.insta-fenster[hidden] { display: none; }
.insta-fenster__grund { position: absolute; inset: 0; background: rgba(19, 10, 9, .78); backdrop-filter: blur(6px); }
.insta-fenster__kasten {
  position: relative; width: min(440px, 100%); max-height: calc(100dvh - 2rem);
  display: flex; flex-direction: column; background: #fff; color: #1b1512;
  border-radius: 26px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
}
/* Feste Höhe statt aspect-ratio: ein Hochkant-Bild dehnte den Bereich sonst über die Vorgabe, und der Text darunter
   (Konto, Datum) wurde weggequetscht — gemessen 11.11.2026. */
.insta-fenster__medium { position: relative; flex: none; background: #0d0d0d; height: min(56dvh, 550px); }
.insta-fenster__medium img, .insta-fenster__medium video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.insta-fenster__text { display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.3rem 1.1rem; flex: 1 1 auto; min-height: 0; overflow: auto; }
.insta-fenster__konto { display: flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; }
.insta-fenster__konto b { display: block; font-size: var(--t-m); font-weight: 700; line-height: 1.2; }
.insta-fenster__konto small { display: block; color: #6b625b; font-size: var(--t-sm); line-height: 1.3; }
.insta-fenster__konto svg { width: 26px; height: 26px; margin-left: auto; }
.insta-fenster__wort { margin: 0; white-space: pre-line; font-size: var(--t-m); line-height: 1.5; overflow: auto; max-height: 9.5em; }
.insta-fenster__wort:empty { display: none; }
.insta-fenster__fuss { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid #e6e1da; padding-top: .7rem; font-size: var(--t-sm); }
.insta-fenster__fuss span { display: inline-flex; align-items: center; gap: .4rem; }
.insta-fenster__fuss svg { width: 16px; height: 16px; }
.insta-fenster__fuss a { color: inherit; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; }
.insta-fenster__knopf {
  position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: #fff; color: #130a09; box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  font-size: 1.4rem; line-height: 1;
}
.insta-fenster__zu { top: .7rem; right: .7rem; width: 44px; height: 44px; }
.insta-fenster__ton { left: .7rem; bottom: .7rem; width: 44px; height: 44px; font-size: 1rem; }
.insta-fenster__ton[hidden] { display: none; }
.insta-fenster__zurueck, .insta-fenster__vor { top: 50%; translate: 0 -50%; }
.insta-fenster__zurueck { left: max(.5rem, calc(50% - 220px - 70px)); }
.insta-fenster__vor { right: max(.5rem, calc(50% - 220px - 70px)); }
@media (max-width: 560px) {
  .insta-fenster__zurueck, .insta-fenster__vor { top: auto; bottom: 1.2rem; translate: none; }
}

.nur-fuer-vorleser {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Die Stimmen laufen in drei Spalten senkrecht durch — Aufbau und Bewegung wie bei Giuseppe
   (giuseppe-ravensburg/assets/styles.css, .review-marquee), Gestalt in Colours. Jede Spalte trägt ihre
   Karten zweimal und verschiebt sich um genau -50 %; der Abstand steckt im padding-bottom der Spur und
   im gap, beide gleich groß, sonst springt der Umlauf. Die Laufzeit je Spalte setzt _werkzeug/stimmen.py
   (unterschiedlich lang, damit die Spalten nie im Gleichschritt laufen). */
.stimmen-wand {
  display: flex; justify-content: center; gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  max-height: 660px; overflow: hidden;
  /* oben und unten weich auslaufen — sonst schneidet die Kante mitten durch einen Satz */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.stimmen-band { display: contents; }   /* Schreibtisch: nur Hülle — am Handy das eine laufende Band (unten, max-width: 760px) */
.stimmen-spalte { flex: 0 1 360px; min-width: 0; }
.stimmen-spur {
  list-style: none; margin: 0; padding: 0 0 1.3rem;
  display: flex; flex-direction: column; gap: 1.3rem;
  animation: stimmenHoch 150s linear infinite;
  will-change: transform;
}
@keyframes stimmenHoch { to { transform: translateY(-50%); } }
/* Die mittlere Spalte läuft entgegen — nach unten (Johns Wunsch 11.11.2026). Gleiche Strecke rückwärts, deshalb
   bleibt der Umlauf nahtlos. Steht außerhalb des stimmen:dauer-Blocks, den stimmen.py überschreibt. */
.stimmen-spalte--2 .stimmen-spur { animation-direction: reverse; }
/* stimmen:dauer — von _werkzeug/stimmen.py geschrieben */
.stimmen-spalte--1 .stimmen-spur { animation-duration: 138s; }
.stimmen-spalte--2 .stimmen-spur { animation-duration: 174s; }
.stimmen-spalte--3 .stimmen-spur { animation-duration: 143s; }
.stimmen-band { animation-duration: 402s; }   /* Handy: alle Stimmen, Tempo von Spalte 1 */
/* /stimmen:dauer */
.stimmen-spalte:hover .stimmen-spur,
.stimmen-spur:focus-within,
.stimmen-spur.haelt { animation-play-state: paused; }

.stimme {
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.2vw, 1.8rem);
  display: flex; flex-direction: column; gap: .8rem;
  box-shadow: 0 8px 24px -14px rgba(40, 24, 12, .22);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.stimme:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -16px rgba(40, 24, 12, .3); }
/* Je Karte ein Splitter des Mandalas als Oberkante, im Fünfertakt — sortiert nur, trägt keinen Text. Die Farbe hängt an
   der Stimme (stimmen.py), nicht an der Position: Kopie und Original tragen dieselbe, sonst springt beim Umlauf jede
   sichtbare Kante auf eine andere Farbe (so war es bis 11.11. mit nth-child). */
.stimme--f1 { border-top: 3px solid var(--color-primary); }
.stimme--f2 { border-top: 3px solid var(--f-terra); }
.stimme--f3 { border-top: 3px solid var(--f-blau); }
.stimme--f4 { border-top: 3px solid var(--f-salbei); }
.stimme--f5 { border-top: 3px solid var(--f-lavendel); }
.stimme__sterne { margin: 0; color: var(--color-primary); letter-spacing: .14em; font-size: var(--t-m); }   /* gold wie im Kopf */
.stimme blockquote {
  margin: 0;
  font-family: var(--font-display); font-size: var(--t-m); line-height: 1.6;
  color: var(--color-ink);
  font-variation-settings: 'opsz' 20, 'wght' 400;
}
/* Fuß der Karte wie bei Giuseppe: Signet, Name, darunter Google · Monat. Das Signet trägt die
   Initiale statt des Profilbilds — fremde Fotos gehören uns nicht. */
.stimme__fuss { display: flex; align-items: center; gap: .8rem; margin-top: .3rem; }
.stimme__signet {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.05rem; line-height: 1;
  color: var(--color-surface);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3px var(--line);
}
.stimme__signet--1 { background: var(--color-primary-text); }
.stimme__signet--2 { background: var(--color-accent-dark); }
.stimme__signet--3 { background: var(--color-primary-dark); }
.stimme__wer { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.stimme__wer b { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--t-m); font-weight: 600; color: var(--color-ink); letter-spacing: .02em; }
.stimme__rolle { display: flex; align-items: center; gap: .35rem; font-size: var(--t-xs); letter-spacing: .03em; color: var(--color-muted); }
.g-zeichen--mini { width: 13px; height: 13px; }
/* Abzeichen nur bei denen, die Google wirklich als Local Guide führt. */
.guide-zeichen { width: 15px; height: 15px; flex: none; color: var(--color-primary); }


/* Ornamente aus dem Bestand: Rosette und Farbband. Beide waren gezeichnet,
   aber nirgends eingebunden. */
.sektion--rosette { position: relative; overflow: hidden; }
.rosette {
  position: absolute; top: -40px; right: -40px;
  width: min(260px, 34%); pointer-events: none;
  mix-blend-mode: screen; opacity: .7;
}
.rosette img { width: 100%; height: auto; }

/* Helle Fassung: auf Weiß gezeichnet, also `multiply` statt `screen`. */
.rosette--hell { mix-blend-mode: multiply; opacity: .5; top: clamp(2rem, 5vw, 4rem); right: clamp(1rem, 6vw, 5rem); width: min(190px, 26%); }
@media (max-width: 900px) { .rosette--hell { display: none; } }


/* ==========================================================================
   Häufige Fragen
   ========================================================================== */
.fragen { display: flex; flex-direction: column; }
.frage { border-bottom: 1px solid var(--line); }
.frage:first-child { border-top: 1px solid var(--line); }
.frage summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 1rem;
  min-height: 44px; padding: 1.15rem 0;
  font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.35;
  font-variation-settings: 'opsz' 24, 'wght' 450;
  color: var(--color-ink);
  transition: color .3s var(--ease);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover { color: var(--color-primary-dark); }
/* Das Kreuz dreht sich zum Minus — eine Bewegung, die sagt, was passiert. */
.frage summary::after {
  content: ""; flex: none; margin-left: auto;
  width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center/1px 100% no-repeat;
  color: var(--color-primary);
  transition: transform .35s var(--ease);
}
.frage[open] summary::after { transform: rotate(135deg); }
.frage__text {
  padding: 0 0 1.4rem; max-width: 68ch;
  color: var(--color-muted); font-size: var(--t-l); line-height: 1.7;
}
.frage__text p { margin: 0; }
/* Unter den Fragen zwei echte Wege statt Wörtern im Fließtext: die Nummer
   und der Weg zum Formular waren als Textlinks 19 px hoch und auf dem Handy
   nicht sicher zu treffen. */
.fragen__rest { font-size: var(--t-m); color: var(--color-muted); }
.fragen__rest p { margin: 0 0 1rem; }
.fragen__wege { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
@media (max-width: 560px) {
  .fragen__wege { flex-direction: column; align-items: stretch; }
  .fragen__wege .btn { width: 100%; }
}

/* ==========================================================================
   Öffnungszeiten
   ========================================================================== */
/* Liste und Kontaktkarte gleich hoch (John, 12.11.2026 abends) — vorher endete die Karte über der letzten Zeile */
.zeiten { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: stretch; }
.zeiten__liste { border-top: 1px solid var(--line-invers); margin: 0; }   /* ohne den Standardrand des dl, sonst steht die Karte oben und unten 17 px über */
.zeiten__zeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .92rem 0;
  border-bottom: 1px solid var(--line-invers);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  font-variation-settings: 'opsz' 20, 'wght' 500;
}
.zeiten__zeile dt { letter-spacing: .1em; text-transform: uppercase; font-size: var(--t-m); font-family: var(--font-ui); font-weight: 500; }
.zeiten__zeile dd { margin: 0; color: var(--color-primary-light); }
.zeiten__zeile.ist-heute { color: #fff; }
.zeiten__zeile.ist-heute dd { color: var(--color-ray); }
.zeiten__zeile.ist-heute dt::after {
  content: "heute"; margin-left: .7rem;
  font-family: var(--font-ui); font-size: var(--t-xs); letter-spacing: .18em;
  color: var(--color-espresso); background: var(--color-ray);
  padding: .15rem .5rem; border-radius: 2px; vertical-align: .12em;
}
.zeiten__ruhe { color: var(--color-muted-invers) !important; }

.kontaktkarte {
  border: 1px solid var(--line-invers);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3vw, 2.4rem);
  background: rgba(180,139,80,.06);
  display: flex; flex-direction: column; justify-content: center;   /* Inhalt mittig, seit die Karte so hoch ist wie die Liste */
}
.kontaktkarte > .status { align-self: flex-start; }
.kontaktkarte dl { margin: 0; }
/* Telefon und Instagram im Kontaktkasten waren 20 px hohe Textlinks. Auf der
   Kontaktseite sind das die beiden Wege nach draußen — die müssen sich mit
   dem Daumen treffen lassen. */
.kontaktkarte dd a { display: inline-flex; align-items: center; min-height: 44px; }
/* Die Zustimmung: das Kästchen selbst war 17 px. Getroffen wird zwar das
   ganze Label, sichtbar ankreuzen soll man es trotzdem können. */
.zustimmung input[type="checkbox"] { width: 22px; height: 22px; flex: none; }
.kontaktkarte dt {
  font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-primary-light); margin-bottom: .35rem;
}
.kontaktkarte dd { margin: 0 0 1.5rem; font-size: var(--t-m); }
.kontaktkarte dd:last-of-type { margin-bottom: 0; }
.kontaktkarte a:not(.btn) { color: var(--color-ink-invers); text-decoration: none; border-bottom: 1px solid var(--line-invers); }
.kontaktkarte a:not(.btn):hover { color: var(--color-primary-light); border-bottom-color: var(--color-primary); }

/* ==========================================================================
   Formular
   ========================================================================== */
.formular { display: grid; gap: 1.3rem; }
.feld { display: flex; flex-direction: column; gap: .45rem; }
.feld label {
  font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-muted); font-weight: 500;
}
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: var(--t-m);
  padding: .85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--color-ink);
  transition: border-color .3s var(--ease);
}
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--color-primary); }
.feld textarea { resize: vertical; min-height: 130px; }
/* Safari lässt ein <select> mit Systemdarstellung das `padding` oben einfach fallen — gemessen am
   07.11.2026: 24 px am Schreibtisch, 25 px auf dem iPhone, neben einem 54/56 px hohen Textfeld.
   Im Formular liest sich das wie ein Fehler, und mit dem Daumen trifft man es schlecht.
   ⚠️ `min-height` wirkt in Safari NICHT (bleibt bei 25 px) — nur eine feste `height` greift.
   ⚠️ Das ist KEINE Handy-Regel: Safari am Schreibtisch hat dasselbe. Chrome geht dadurch von
   50 auf 48 px, also 2 px kürzer — dafür sehen alle vier Browser gleich aus.
   Die Fassung ohne Systemdarstellung (`appearance: none` + eigener Pfeil) träfe die 56 px genau;
   John hat sie am 07.11.2026 nach einem Vergleichsbild gegen diese hier abgewogen und sich für
   die kleine Lösung entschieden. Wer das umstellt, stößt die Entscheidung um. */
.feld select { height: 48px; }
.feld-reihe { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem; }
.zustimmung { display: flex; gap: .8rem; align-items: flex-start; font-size: var(--t-sm); color: var(--color-muted); }
.zustimmung input { margin-top: .28rem; flex: none; width: 17px; height: 17px; accent-color: var(--color-primary); }
.zustimmung a { color: var(--color-primary-text); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }
.form-meldung {
  padding: 1rem 1.2rem; border-radius: var(--radius); font-size: var(--t-m);
  border: 1px solid var(--line); background: var(--color-surface-alt);
}
.form-meldung[hidden] { display: none; }

/* ==========================================================================
   Anfahrt
   ========================================================================== */
.anfahrt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.karte-platzhalter {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--color-surface-alt); padding: clamp(2rem, 4vw, 3rem);
  min-height: 260px; display: flex; flex-direction: column; justify-content: center; gap: 1rem;
  overflow: hidden;
}
.karte-platzhalter .sonne {
  position: absolute; right: -18%; top: -30%; width: 62%; opacity: .16;
}
.karte-platzhalter > * { position: relative; z-index: 2; }

.btn--espresso { background: var(--color-espresso); color: var(--color-primary-light); }
.btn--espresso:hover { background: #000; transform: translateY(-2px); }


/* ==========================================================================
   Karten-Auszug — drei Spuren statt zwei Spalten
   Küche, Bar und Café nebeneinander. Der Betrieb ist drei Betriebe; der
   Auszug soll das zeigen und nicht nur Vorspeisen aufzählen.
   ========================================================================== */
.kostprobe {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2.8rem);
  border-top: 1px solid rgba(19,10,9,.22);
  padding-top: clamp(1.4rem, 3vw, 2.4rem);
}
.kostprobe h3 { font-size: var(--t-xl); margin-bottom: .9rem; }
.kostprobe ul { display: grid; gap: .6rem; }
.kostprobe li {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem;
  font-size: var(--t-m); align-items: baseline;
}
.kostprobe li > span:last-child {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums lining-nums;
}
.kostprobe .marker { margin-left: .35rem; }

/* ==========================================================================
   Gastgeber — Kopf, dann Zeitleiste
   Erste Person: der Betrieb erzählt sich selbst, statt über sich zu reden.
   ========================================================================== */
.gastgeber__kopf { max-width: 58ch; margin-bottom: var(--kopf-inhalt); }
/* Kopf mit Bild daneben (John, 12.11.2026 abends): rechts neben „Am liebsten in die Mitte“ die Grafiken der
   Speisekarte im Wechsel. Nur ab 1025 px — darunter ist rechts kein Platz, und am Handy wurde die Startseite bewusst
   gekürzt. (Ein Gastgeber-Foto neben „Daniel und Daniella“ war als Vorschau gebaut und ist auf Johns Wort raus.) */
.kopf-duo__bild { display: none; }
@media (min-width: 1025px) {
  .kopf-duo {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: clamp(2.5rem, 5vw, 5rem); margin-bottom: var(--kopf-inhalt);
  }
  .kopf-duo > .sektionskopf { margin-bottom: 0; }
  .kopf-duo__bild { display: block; margin: 0; }
  /* Karussell: eine Grafik zur Zeit, alle vier Sekunden ein Wisch von rechts nach links (John, 12.11.2026 — die
     Überblendung davor „sah scheiße aus“). Die laufende Grafik schiebt sich links hinaus, die nächste kommt im selben
     Takt von rechts. Das Fenster ist breiter als die Grafik und läuft an den Seiten weich aus, damit nichts an einer
     unsichtbaren Kante abgeschnitten wirkt. */
  .kopf-duo--karte { align-items: center; }
  .kartenbild {
    --k: clamp(200px, 18vw, 250px);
    position: relative; justify-self: center; width: calc(var(--k) * 1.45); height: var(--k); overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  }
  /* Alle Grafiken im selben Quadrat (--k), alle um denselben Mittelpunkt. ⚠️ aspect-ratio: auto ist Pflicht: Die
     Klassen .glas--* bringen das Seitenverhältnis der Karte mit, und das gewinnt sonst — die Spritz-Grafik wurde
     300 × 671 px groß und lag über der Karte (John, 12.11.2026). */
  .kartenbild span {
    position: absolute; top: 0; left: calc(50% - var(--k) / 2); width: var(--k); height: var(--k); aspect-ratio: auto;
    background: var(--color-primary);
    -webkit-mask: var(--b) center / contain no-repeat; mask: var(--b) center / contain no-repeat;
    opacity: 0; animation: kartenbild 28s infinite;
  }
  .kartenbild span:nth-child(2) { animation-delay: 4s; }
  .kartenbild span:nth-child(3) { animation-delay: 8s; }
  .kartenbild span:nth-child(4) { animation-delay: 12s; }
  .kartenbild span:nth-child(5) { animation-delay: 16s; }
  .kartenbild span:nth-child(6) { animation-delay: 20s; }
  .kartenbild span:nth-child(7) { animation-delay: 24s; }
}
/* 28 s = 7 Grafiken × 4 s. Einlauf 0–3,5 % (≈ 1 s), stehen bis 14,3 % (= 4 s), Auslauf bis 17,8 % — genau dann läuft
   die nächste ein, so wandern beide wie ein Streifen. 130 % schiebt die Grafik ganz aus dem Fenster (1,45 × --k). */
@keyframes kartenbild {
  0%       { opacity: 1; transform: translateX(130%); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  3.5%     { opacity: 1; transform: translateX(0); }
  14.3%    { opacity: 1; transform: translateX(0); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  17.8%    { opacity: 1; transform: translateX(-130%); }
  17.9%, 100% { opacity: 0; transform: translateX(-130%); }
}
/* Ohne Bewegung: nur die erste Grafik, stehend (der Sammelblock unten setzt jede Animation auf null — dann wäre sonst
   keine mehr zu sehen, weil die Grundstellung unsichtbar ist) */
@media (prefers-reduced-motion: reduce) {
  .kartenbild span { animation: none !important; }
  .kartenbild span:first-child { opacity: 1; }
}
.gastgeber__wer {
  font-family: var(--font-ui); font-size: var(--t-sm);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-primary-text); margin: .9rem 0 1.2rem;
}
.zeitleiste {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.6vw, 2.2rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(1.4rem, 3vw, 2.4rem);
}
.etappe { position: relative; padding-top: 1.6rem; }
.etappe::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 34px; height: 3px; background: var(--color-primary);
}
/* Vier Etappen, vier Splitter — die Zeitleiste erzählt vier Schritte, und
   jeder bekommt seinen eigenen Ton statt viermal dasselbe Gold. */
.etappe:nth-child(2)::before { background: var(--f-terra); }
.etappe:nth-child(3)::before { background: var(--f-blau); }
.etappe:nth-child(4)::before { background: var(--f-salbei); }
.etappe__wann {
  font-family: var(--font-ui); font-size: var(--t-xs); letter-spacing: .24em;
  text-transform: uppercase; color: var(--color-primary-text); margin-bottom: .5rem;
}
.etappe h3 { font-size: clamp(1.15rem, 1.9vw, 1.5rem); margin-bottom: .4rem; }
.etappe p { font-size: var(--t-m); color: var(--color-muted); margin: 0; }

/* ==========================================================================
   Öffnungszeiten — der Zustand jetzt trägt die Sektion
   Die Uhrzeit steht als Überschrift, nicht in einer Tabellenzeile. Wer die
   Seite öffnet, will zuerst wissen: habt ihr auf.
   ========================================================================== */
.jetzt { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(2rem,6vw,5rem); align-items: center; }
.jetzt__gross {
  font-family: var(--font-display); font-size: clamp(2.1rem,5.2vw,4.1rem);
  line-height: 1.06; letter-spacing: -.015em; margin: 0;
  font-variation-settings: 'opsz' 72, 'wght' 500;
  text-wrap: balance;
}
.jetzt__gross em {
  font-style: normal; color: var(--color-primary-text);
  font-variant-numeric: tabular-nums lining-nums;
}
.jetzt__rest {
  font-family: var(--font-ui); font-size: var(--t-sm); letter-spacing: .2em;
  text-transform: uppercase; color: var(--color-muted); margin: 1.3rem 0 0;
}
.jetzt__kontakt { margin: 1.6rem 0 0; }
.jetzt__kontakt a { color: var(--color-ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.jetzt__kontakt a:hover { color: var(--color-primary-text); }
.jetzt__tel {
  font-family: var(--font-display); font-size: clamp(1.3rem,2.6vw,1.9rem);
  font-variant-numeric: tabular-nums lining-nums;
}
.jetzt__tel a { display: inline-flex; align-items: center; min-height: 48px; }

.woche { display: grid; gap: .3rem; }
.woche__zeile {
  display: grid; grid-template-columns: 4.5ch 1fr auto; gap: .8rem;
  align-items: baseline; font-size: var(--t-m); color: var(--color-muted);
}
.woche__zeile b {
  font-weight: 500; color: var(--color-ink); font-family: var(--font-ui);
  letter-spacing: .1em; text-transform: uppercase; font-size: var(--t-xs);
}
.woche__zeile span:last-child { font-variant-numeric: tabular-nums lining-nums; }
.woche__zeile.ist-heute, .woche__zeile.ist-heute b { color: var(--color-primary-text); }
.woche__strich { height: 1px; background: var(--line); transform: translateY(-.35em); }
/* Öffnungszeiten stehen seit 12.11.2026 auf Creme (Richtung 2). Kommt der Block wieder auf Dunkel, gelten diese: */
.sektion--dunkel .jetzt__gross em, .sektion--dunkel .woche__zeile.ist-heute, .sektion--dunkel .woche__zeile.ist-heute b,
.sektion--dunkel .jetzt__kontakt a:hover { color: var(--color-primary-light); }
.sektion--dunkel .jetzt__rest, .sektion--dunkel .woche__zeile { color: var(--color-muted-invers); }
.sektion--dunkel .jetzt__kontakt a, .sektion--dunkel .woche__zeile b { color: var(--color-ink-invers); }
.sektion--dunkel .jetzt__kontakt a { border-bottom-color: var(--line-invers); }
.sektion--dunkel .woche__strich { background: var(--line-invers); }

/* ==========================================================================
   Abschluss — der Umschlag mit dem echten Siegel
   Der nachgebaute Kontur-Schriftzug ist raus. Das Siegel gibt es als
   Originaldatei; ein Imitat daneben wäre schwächer.
   ========================================================================== */
.abschluss {
  background: var(--color-surface); color: var(--color-espresso); border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 5.5vw, 4.6rem);
  text-align: center;
}
/* Die Goldlinie oben ist der Trenner: über und unter ihr derselbe Abstand (12.11.2026) */
main > .sektion:not(.sektion--dunkel):has(+ .abschluss) { padding-bottom: clamp(3rem, 5.5vw, 4.6rem); }
/* Das Siegel steckt in zwei Bildern: der Schriftring dreht sich, das
   Signet in der Mitte bleibt stehen. Beide Bilder sind aus derselben
   Vorlage geschnitten, quadratisch und auf denselben Mittelpunkt entzerrt
   (24.08.2026) — nur dann läuft die Drehung rund statt zu eiern. */
.abschluss__siegel {
  position: relative; display: block;
  width: clamp(84px, 9vw, 116px); aspect-ratio: 1;
  margin: 0 auto clamp(1rem,2.2vw,1.6rem);
  mix-blend-mode: multiply;
}
.abschluss__siegel img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.abschluss .brow { color: rgba(19,10,9,.9); justify-content: center; }
.abschluss .brow::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; flex: none; }
.abschluss h2 { margin-bottom: .7rem; }
.abschluss .lead { color: rgba(19,10,9,.85); margin-inline: auto; margin-bottom: 1.8rem; }

@media (max-width: 900px) {
  .kostprobe { grid-template-columns: 1fr; gap: 1.6rem; }
  .zeitleiste { grid-template-columns: 1fr 1fr; }
  .jetzt { grid-template-columns: 1fr; gap: 2.2rem; }
}
@media (max-width: 560px) {
  .zeitleiste { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Fußzeile
   ========================================================================== */
.fuss {
  background: var(--color-espresso); color: var(--color-muted-invers);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
  border-top: 1px solid var(--line-invers);
}
.fuss__oben { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
.fuss__marke img { width: 132px; margin-bottom: 1.3rem; border-radius: 3px; }
.fuss__marke p { font-size: var(--t-m); max-width: 32ch; }
.fuss__titel {
  font-size: var(--t-xs); letter-spacing: .24em; text-transform: uppercase;
  color: var(--color-primary-light); margin: 0 0 1.1rem; font-weight: 500; font-family: var(--font-ui);
}
.fuss li { margin-bottom: .2rem; font-size: var(--t-m); }
/* Tippziele. Die Fußzeilen-Links lagen bei 18 px Höhe — auf dem Handy trifft
   man das nicht, und Telefon und Instagram sind hier die einzigen Wege
   nach draußen. 44 px ist die Untergrenze. */
.fuss a {
  text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.fuss a:hover { color: var(--color-primary-light); }
.fuss__unten {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.6rem;
  border-top: 1px solid var(--line-invers);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-size: var(--t-sm);
}
.fuss__unten nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
/* `min-height` allein tut bei einem inline-Element nichts — der Link blieb
   19 px hoch und war auf dem Handy kaum zu treffen. */
.fuss__unten a { display: inline-flex; align-items: center; min-height: 44px; }
/* „Erstellt von Kraftwerk Performance“ — setzt das Tool NUR im Livegang ein (bearbeitung.php, seiteBauen), nie im Entwurf */
.fuss__credit { margin: 0; display: flex; align-items: center; color: var(--color-muted-invers); }
.fuss__credit a { margin-left: .35em; color: inherit; text-decoration: underline; text-underline-offset: .2em; }
/* KP-Logo = brand-assets/KP-Logo-profile.svg unverändert (weiß auf schwarzem Quadrat, für runde Profilbilder gebaut):
   nur außen beschnitten, nie umgefärbt */
.fuss__credit-logo { width: 20px; height: 20px; border-radius: 50%; margin-right: .45em; flex: none; }

/* ==========================================================================
   Rechtstexte / Fließtext-Seiten
   ========================================================================== */
.text-seite { padding-block: clamp(3rem, 6vw, 5rem); }
.text-seite h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 2.4rem 0 .8rem; }
.text-seite h3 { font-size: var(--t-l); margin: 1.8rem 0 .5rem; }
.text-seite p, .text-seite li { color: var(--color-muted); font-size: var(--t-m); }
.text-seite ul { list-style: disc; padding-left: 1.3rem; margin-bottom: 1em; }
.text-seite a { color: var(--color-primary-text); }

.platzhalter {
  display: inline-block; padding: .1rem .45rem;
  background: rgba(217,90,92,.12); color: var(--color-accent-dark);
  border: 1px dashed rgba(217,90,92,.5); border-radius: 2px;
  font-size: .85em; letter-spacing: .04em;
}

/* ==========================================================================
   Reveal
   ========================================================================== */
/* ==========================================================================
   Bewegung
   Regeln, die für alles hier gelten:
   • Nur transform und opacity werden animiert. Alles andere zwingt den
     Browser zu Layout- oder Paint-Arbeit und ruckelt auf dem Handy.
   • Jede Bewegung hat einen Grund. Der Reveal führt den Blick, der
     Strahlenkranz dreht sich, weil er im Logo ein Kranz ist — Bewegung,
     die nichts erzählt, ist Ablenkung.
   • Alles endet in `prefers-reduced-motion` als Null.
   ========================================================================== */

/* Grundfall: leicht von unten einblenden. */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.reveal.ist-sichtbar { opacity: 1; transform: none; }

/* Überschriften ziehen wie ein Vorhang auf. Die Bodoni hat starken
   Strichkontrast — eine Maske von unten zeigt das, ein Fade nicht.

   Bewusst `mask` und nicht `clip-path`: ein geschlossener Vorhang per
   `clip-path: inset(105% …)` ergibt ein LEERES Ausschnitt-Rechteck. Der
   IntersectionObserver rechnet damit eine Schnittfläche von 0 und meldet
   das Element nie als sichtbar — der Vorhang bleibt dann für immer zu.
   Am 24.08.2026 im echten Chrome gemessen: Karten liefen ein, alle
   Überschriften blieben unsichtbar. Eine Maske ist reines Malen und
   ändert die Schnittfläche nicht.

   Die Maske sitzt 0,32em unter der Box, damit die Unterlängen von g/y/ß
   nicht abgeschnitten werden. */
/* Der Vorhang läuft über clip-path, nicht über mask-size. Beides sieht am
   Ende gleich aus, aber mask-size ist nicht kompositiert: der Browser muss
   die Maske in jedem einzelnen Frame neu rastern, und genau das ruckelt auf
   schwächerer Hardware. clip-path liegt auf dem Compositor.

   Die Werte links, rechts und unten sind bewusst negativ: die Schnittkante
   liegt außerhalb der Textfläche, sonst kappt sie die Unterlängen von g, y
   und ß und die Serifen am Zeilenanfang. */
.reveal--vorhang {
  opacity: 1; transform: none;
  /* Nicht inset(100%), sondern eine Haarlinie weniger. Ein Element, das
     clip-path auf null Fläche schneidet, meldet der IntersectionObserver als
     nicht sichtbar — der Reveal würde nie ausgelöst und die Überschrift bliebe
     für immer weg. Mit 1 px Restfläche bleibt das Element für den Beobachter
     existent; sehen kann man diesen Pixel nicht. */
  clip-path: inset(calc(100% - 1px) -6% -18% -6%);
  transition: clip-path .75s var(--ease);
  will-change: clip-path;
}
.reveal--vorhang.ist-sichtbar { clip-path: inset(-30% -6% -18% -6%); }
.reveal--vorhang.ist-fertig, .reveal--bild.ist-fertig { will-change: auto; }

/* Bilder: Vorhang plus minimaler Nachlauf im Bild selbst. Das Bild steht
   also schon, während der Ausschnitt noch wächst — wirkt wie eine
   Kamerafahrt statt wie ein Ein-Aus. Maske aus demselben Grund wie oben. */
.reveal--bild {
  opacity: 1; transform: none;
  clip-path: inset(0 0 calc(100% - 1px) 0);   /* 1 px Rest, Begründung oben */
  transition: clip-path 1.15s var(--ease);
  will-change: clip-path;
}
.reveal--bild.ist-sichtbar { clip-path: inset(0); }
.reveal--bild img, .reveal--bild picture {
  transform: scale(1.08);
  transition: transform 1.6s var(--ease);
}
.reveal--bild.ist-sichtbar img, .reveal--bild.ist-sichtbar picture { transform: scale(1); }

/* Zeilen einer Liste laufen nacheinander ein. */
.reveal--folge > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.reveal--folge.ist-sichtbar > * { opacity: 1; transform: none; }
.reveal--folge.ist-sichtbar > *:nth-child(1) { transition-delay: .00s; }
.reveal--folge.ist-sichtbar > *:nth-child(2) { transition-delay: .06s; }
.reveal--folge.ist-sichtbar > *:nth-child(3) { transition-delay: .12s; }
.reveal--folge.ist-sichtbar > *:nth-child(4) { transition-delay: .18s; }
.reveal--folge.ist-sichtbar > *:nth-child(5) { transition-delay: .24s; }
.reveal--folge.ist-sichtbar > *:nth-child(6) { transition-delay: .30s; }
.reveal--folge.ist-sichtbar > *:nth-child(7) { transition-delay: .36s; }

/* Der Goldstrich über jeder Etappe wächst von links. */
.etappe::before { transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.reveal--folge.ist-sichtbar .etappe::before { transform: scaleX(1); }
.reveal--folge.ist-sichtbar > *:nth-child(1) .etappe::before,
.reveal--folge.ist-sichtbar .etappe:nth-child(1)::before { transition-delay: .1s; }

/* Hero: gestaffelter Einlauf beim Laden, nicht beim Scrollen. */
.hero__logo, .hero .brow, .hero__wort, .hero__ort, .hero .status, .hero__cta {
  opacity: 0; transform: translateY(18px);
  animation: heroEin .6s var(--ease) forwards;
}
.hero__logo  { animation-delay: .05s; transform: translateY(0) scale(.86); }
.hero .brow  { animation-delay: .14s; }
.hero__wort  { animation-delay: .20s; }
.hero__ort   { animation-delay: .29s; }
.hero .status{ animation-delay: .35s; }
.hero__cta   { animation-delay: .41s; }
@keyframes heroEin { to { opacity: 1; transform: none; } }

/* Die Goldlinie unter dem Namen wächst aus der Mitte. */
.hero__wort::after { transform: scaleX(0); animation: linieEin .7s var(--ease) .5s forwards; }
@keyframes linieEin { to { transform: scaleX(1); } }

/* Medaillons: der Strahlenkranz dreht sich beim Überfahren. Er IST ein
   Kranz — das ist die einzige Drehung, die auf dieser Seite etwas bedeutet. */
.rolle__motiv img { transition: transform 1.4s var(--ease); }
/* 9 statt 28 Grad: bei 28 kippt das Emblem sichtbar weg, das liest sich
   als Fehler statt als Reaktion. */
.rolle:hover .rolle__motiv img, .rolle:focus-within .rolle__motiv img { transform: rotate(9deg); }

/* Karten heben leicht an — schon vorhanden, hier nur die Kurve vereinheitlicht. */
.rolle { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }

/* Laufband hält an, wenn man hinschaut. Ein Band, das man nicht lesen
   kann, ist Dekoration mit Textkosten. */
.laufband:hover .laufband__spur,
.laufband:focus-within .laufband__spur { animation-play-state: paused; }

/* Das Siegel im Abschluss dreht sich einmal sanft ein. */
.abschluss__siegel { transition: transform 1s var(--ease); transform: scale(.94); }
.abschluss__siegel.ist-sichtbar { transform: scale(1); }

/* Der Schriftring läuft langsam um das Signet. 34 s pro Runde — schnell
   genug, dass man die Bewegung sieht, langsam genug, dass sie beim Lesen
   nicht stört. Beim Überfahren hält er an, damit der Spruch lesbar ist. */
.siegel__ring { animation: siegelDreht 34s linear infinite; transform-origin: 50% 50%; }
@keyframes siegelDreht { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.abschluss__siegel:hover .siegel__ring { animation-play-state: paused; }

/* Galerie-Bilder ziehen beim Überfahren minimal an. */
.galerie figure img { transition: transform 1.2s var(--ease); }
.galerie figure:hover img { transform: scale(1.04); }

/* ==========================================================================
   Responsiv
   ========================================================================== */
@media (max-width: 1024px) {
  .nav, .kopf__tel { display: none; }
  .burger { display: block; }
  .rollen { grid-template-columns: 1fr; }
  .rolle:nth-child(2) { margin-top: 0; }
  .split, .anfahrt, .zeiten { grid-template-columns: 1fr; }
  .split--umgekehrt .split__bild { order: 0; }
  .split__notiz { position: static; margin-top: 1rem; max-width: none; }
  .stimmen-spalte--3 { display: none; }   /* wie bei Giuseppe: zwei Spalten */
  .fuss__oben { grid-template-columns: 1fr 1fr; }
  .fuss__marke { grid-column: 1 / -1; }
  .kategorien { top: var(--kopfhoehe); }
}
@media (max-width: 860px) {
  /* Der Kopf-CTA wandert ins Burger-Menü — sonst drängelt er den Burger raus */
  .kopf .btn { display: none; }
}

@media (max-width: 760px) {
  body { font-size: var(--t-m); }
  .brow { font-size: var(--t-xs); letter-spacing: .2em; gap: .6rem; }
  .brow::before, .brow--mitte::after { width: 22px; }
  .hero__ort { font-size: var(--t-s); letter-spacing: .13em; }
  .hero h1 { overflow-wrap: anywhere; }
  .rolle__zeit { letter-spacing: .12em; }
  .laufband__spur > span { letter-spacing: .22em; gap: 1.6rem; padding-right: 1.6rem; }
  .kategorien a { padding: .95rem .85rem; letter-spacing: .1em; }
  .fakten { grid-template-columns: repeat(2, auto); }
  .marke__name { font-size: var(--t-l); letter-spacing: .13em; }
  .marke__sub { font-size: var(--t-xs); letter-spacing: .22em; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .karte-spalten, .auszug { columns: 1; grid-template-columns: 1fr; }
  .galerie { grid-template-columns: repeat(6, 1fr); }
  .g-a, .g-f { grid-column: span 6; aspect-ratio: 4/3; }
  .g-b, .g-c, .g-d, .g-e { grid-column: span 3; aspect-ratio: 3/4; }
  .feld-reihe { grid-template-columns: 1fr; }
  .fuss__oben { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding: calc(var(--kopfhoehe) + 2.5rem) 0 4rem; }

  /* Speisekarte auf dem Handy: die Beschreibungen standen in kursiver Serife
     bei 15 px — auf Papier schön, auf einem Telefon mühsam. Hier aufrecht,
     etwas größer und mit mehr Zeilenabstand. */
  .gericht__text { font-style: normal; font-size: var(--t-l); line-height: 1.6; }
  /* Name und Preis rücken enger zusammen, damit lange Namen nicht gegen den
     Preis laufen; der Marker darf dabei in die nächste Zeile fallen. */
  .gericht { gap: .35rem .8rem; padding: 1.05rem 0; }
  .gericht__name { line-height: 1.35; }
  .marker { margin-left: .35rem; }

  /* Die Kategorien der Karte: größere Trefferfläche, weniger Sperrung. */
  .kategorien a { padding: 1.05rem .8rem; }

  /* Eine Spalte am Handy, wie bei Giuseppe — niedriger, damit die Wand nicht den ganzen Schirm füllt. Darin laufen
     ALLE Stimmen (Johns Wunsch 11.11.): Spalten und Spuren lösen sich auf (display: contents), ihre Karten werden
     Glieder des einen Bands. order stellt alle Originale vor alle Kopien — dieselbe Folge zweimal, also bleibt die
     Verschiebung um -50 % nahtlos. Laufzeit im stimmen:dauer-Block oben. */
  .stimmen-wand { max-height: 560px; }
  .stimmen-spalte, .stimmen-spur { display: contents; }
  .stimmen-spur { animation: none; }
  .stimmen-band {
    flex: 1 1 auto; min-width: 0;   /* so breit wie der Bewertungskopf darüber */
    display: flex; flex-direction: column; gap: 1.3rem; padding-bottom: 1.3rem;
    animation-name: stimmenHoch; animation-timing-function: linear; animation-iteration-count: infinite;
    will-change: transform;
  }
  .stimme { order: 1; }
  .stimme[aria-hidden="true"] { order: 2; }
  .stimmen-band:has(.haelt), .stimmen-band:focus-within { animation-play-state: paused; }   /* Finger drauf: main.js §3c */
  .bewertung-kopf__knopf { width: 100%; }
  .bewertung-kopf__g { width: 44px; height: 44px; }
}
/* Schmales Fenster mit Maus: Überfahren hält das Band an. Nur mit echtem Hover — am Handy bliebe :hover nach dem
   Antippen kleben, und das Band stünde, bis man woanders hintippt. */
@media (hover: hover) and (max-width: 760px) { .stimmen-band:hover { animation-play-state: paused; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal--vorhang, .reveal--bild, .reveal--folge > * {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  .hero__logo, .hero .brow, .hero__wort, .hero__ort, .hero .status, .hero__cta {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .hero__wort::after, .etappe::before { transform: none !important; animation: none !important; }
  .abschluss__siegel { transform: none !important; }
  .siegel__ring { animation: none !important; }
  /* Stehen die Spalten still, alle Karten untereinander zeigen — aber jede nur einmal (Giuseppe zeigt dann die Kopien mit). */
  .stimmen-spur, .stimmen-band { animation: none !important; }
  .stimmen-wand { max-height: none; -webkit-mask-image: none; mask-image: none; }
  .stimme[aria-hidden="true"] { display: none; }
  .insta-spur { animation: none !important; }
  .insta-reihe { overflow-x: auto; }
  .insta-spur > li[aria-hidden="true"] { display: none; }
}


@media print {
  .kopf, .mobilnav, .laufband, .hero__strahlen, .hero__fotos, .hero__schleier, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   ZUSATZ — Reservieren, Abholen, Gutscheine, Feiern, Betreiberansicht
   (29.09.2026). Eigener Block, damit er sich als Ganzes finden und bei
   Bedarf wieder entfernen lässt. Nur vorhandene Tokens; keine neue Farbe.
   Skript dazu: assets/zusatz.js.
   ========================================================================== */

/* Kopf: fünf Menüpunkte brauchen zwischen 1025 und 1280 px den Platz der
   Telefonnummer — die steht dort ohnehin im Knopf „Anrufen" der Seiten. */
/* Gemessen 29.09.2026: bei 1440 px brachen „Das Haus" und der Knopf um.
   Nie umbrechen; die Nummer weicht bis 1480 px, darunter bis 1180 px das
   ganze Menü ins Burger-Menü (die Nummer steht dort und in der Rufleiste). */
.nav a, .kopf .btn, .kopf__tel { white-space: nowrap; }
@media (max-width: 1480px) {
  .kopf__tel { display: none; }
  .nav { gap: 1.6rem; }
}
@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: block; }
}

/* ---------- Kacheln auf der Startseite ----------------------------------- */
.angebote { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.angebot {
  background: var(--color-surface); padding: clamp(1.6rem, 2.6vw, 2.2rem);
  display: flex; flex-direction: column; gap: .7rem; text-decoration: none;
  transition: background .35s var(--ease);
  position: relative;
}
.angebot:hover { background: #fff; }
.angebot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--f-blau); }
.angebot:nth-child(2)::before { background: var(--f-salbei); }
.angebot:nth-child(3)::before { background: var(--f-terra); }
.angebot:nth-child(4)::before { background: var(--f-lavendel); }
.angebot__nr { font-size: var(--t-xs); letter-spacing: .24em; text-transform: uppercase; color: var(--color-primary-text); }
.angebot h3 { color: var(--color-ink); }
.angebot p { margin: 0; color: var(--color-muted); font-size: var(--t-m); }
.angebot__weiter { margin-top: auto; padding-top: .6rem; font-size: var(--t-s); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary-text); }
.angebot__weiter::after { content: " →"; }
@media (max-width: 1024px) { .angebote { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .angebote { grid-template-columns: 1fr; } }

/* ---------- Schritte ------------------------------------------------------ */
.ablauf { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.schritt { border-top: 1px solid var(--line); padding-top: 1.6rem; margin-bottom: 2.4rem; }
.schritt__kopf { display: flex; align-items: baseline; gap: .9rem; margin-bottom: 1.1rem; }
.schritt__nr {
  font-family: var(--font-display); font-size: 1.4rem; color: var(--color-primary-dark);
  font-variation-settings: 'opsz' 24, 'wght' 600; flex: none;
}
.schritt__titel { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.5rem); font-variation-settings: 'opsz' 24, 'wght' 500; }
.schritt__hilfe { font-size: var(--t-sm); color: var(--color-muted); margin: -.4rem 0 1rem; }
.schritt[hidden] { display: none; }

/* ---------- Auswahl-Chips (Tage, Uhrzeiten, Beträge) --------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip {
  min-height: 44px; min-width: 44px; padding: .55rem 1rem;
  background: var(--color-surface); color: var(--color-ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: var(--t-sm); font-weight: 500; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.25;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.chip small { font-size: var(--t-xs); color: var(--color-muted); font-weight: 400; letter-spacing: .04em; }
.chip:hover:not(:disabled) { border-color: var(--color-primary); }
.chip.ist-aktiv { background: var(--color-espresso); color: var(--color-ink-invers); border-color: var(--color-espresso); }
.chip.ist-aktiv small { color: var(--color-muted-invers); }
.chip:disabled { cursor: not-allowed; color: #a79a8c; background: transparent; border-style: dashed; text-decoration: line-through; }
.chip--tag { min-width: 68px; }
.chips--zeiten .chip { min-width: 78px; }
.chips__leer { font-size: var(--t-m); color: var(--color-muted); margin: 0; }
/* Knopfreihen als gleich breites Raster statt Flattersatz (John, 12.11.2026 abends: „am Handy muss alles stimmen“).
   Vorher endete jede Zeile an einer anderen Stelle, und „150 €“ stand am Handy allein in der zweiten Zeile.
   Tage und Uhrzeiten: so viele gleich breite Spalten, wie passen (390 px: vier, Rechner: sieben) — auf allen Größen.
   Beträge: fünf gleich breite in einer Reihe (höchstens 88 px, am Handy füllen sie die Zeile).
   Sitzwunsch (drei Spalten, iPhone SE zwei) und Zustellung (zwei): nur am Handy als Raster — am Rechner stehen sie ohnehin in einer Reihe. */
.chips[data-tage], .chips--zeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.chips[data-betraege] { display: grid; grid-template-columns: repeat(5, minmax(0, 88px)); }
:is(.chips[data-tage], .chips--zeiten, .chips[data-betraege]) .chip { min-width: 0; padding-inline: .4rem; }
.chips--zeiten .chips__leer { grid-column: 1 / -1; }   /* „Wählen Sie oben zuerst einen Tag.“ über die ganze Breite */
@media (max-width: 560px) {
  /* drei Spalten, auf sehr schmalen Handys (iPhone SE) zwei — sonst passt „wetterabhängig“ nicht in den Knopf */
  .chips[data-bereiche] { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .chips[data-versand] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.chips[data-bereiche], .chips[data-versand]) .chip { min-width: 0; padding-inline: .4rem; }
}

/* ---------- Zähler −/+ --------------------------------------------------- */
.zaehler { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--color-surface); }
.zaehler button {
  width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  font-size: 1.25rem; color: var(--color-primary-text);
}
.zaehler button:hover:not(:disabled) { background: var(--color-surface-alt); }
.zaehler button:disabled { color: #c9bcad; cursor: not-allowed; }
.zaehler output { min-width: 2.6rem; text-align: center; font-weight: 600; font-size: var(--t-m); }

/* ---------- Seitenleiste mit Zusammenfassung ----------------------------- */
.zusammen {
  position: sticky; top: calc(var(--kopfhoehe) + 1.2rem);
  background: var(--color-espresso); color: var(--color-ink-invers);
  border-radius: var(--radius); padding: clamp(1.5rem, 2.6vw, 2.1rem);
}
.zusammen .brow { color: var(--color-primary-light); }
.zusammen h2, .zusammen h3 { color: var(--color-ink-invers); }
.zusammen dl { margin: 1rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.2rem; font-size: var(--t-m); }
.zusammen dt { color: var(--color-muted-invers); font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; padding-top: .2rem; }
.zusammen dd { margin: 0; }
.zusammen__summe { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line-invers); margin-top: 1.2rem; padding-top: 1rem; }
.zusammen__summe b { font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; color: var(--color-primary-light); font-variation-settings: 'opsz' 30, 'wght' 500; }
.zusammen .btn { width: 100%; margin-top: 1.3rem; }
.zusammen__hinweis { font-size: var(--t-xs); color: var(--color-muted-invers); margin: .9rem 0 0; letter-spacing: .03em; line-height: 1.55; }

/* ---------- Bestätigung --------------------------------------------------- */
.bestaetigt {
  border: 1px solid var(--line); border-top: 3px solid var(--f-salbei);
  background: #fff; border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.bestaetigt[hidden] { display: none; }
.bestaetigt__haken {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(109,141,102,.14); color: var(--f-salbei-text); font-size: 1.4rem; margin-bottom: 1rem;
}
.bestaetigt dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.4rem; margin: 1.2rem 0; font-size: var(--t-m); }
.bestaetigt dt { color: var(--color-muted); font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; padding-top: .2rem; }
.bestaetigt dd { margin: 0; }
.bestaetigt__nr { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .06em; color: var(--color-primary-dark); }
.vorschau-hinweis {
  font-size: var(--t-xs); color: var(--color-accent-dark); letter-spacing: .04em;
  border: 1px dashed rgba(217,90,92,.5); background: rgba(217,90,92,.07);
  padding: .55rem .8rem; border-radius: var(--radius); margin: 1rem 0 0;
}

/* ---------- Abholen: Gerichte ------------------------------------------- */
/* ---------- Gutschein --------------------------------------------------- */
.gutschein {
  position: relative; aspect-ratio: 1.72; width: 100%; max-width: 520px;
  border-radius: 10px; overflow: hidden; padding: clamp(1.1rem, 3.2vw, 1.8rem);
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 18px 40px -22px rgba(19,10,9,.55);
  transition: background .4s var(--ease), color .4s var(--ease);
}
.gutschein--gold { background: var(--color-primary); color: var(--color-espresso); }
.gutschein--espresso { background: radial-gradient(ellipse 90% 80% at 30% 20%, #2a1a12, var(--color-espresso) 70%); color: var(--color-ink-invers); box-shadow: inset 0 0 0 1px var(--color-primary), 0 18px 40px -22px rgba(19,10,9,.55); }
.gutschein--creme { background: var(--color-surface); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -22px rgba(19,10,9,.4); }
.gutschein__motiv { position: absolute; right: -8%; top: -18%; width: 62%; opacity: .9; pointer-events: none; }
.gutschein--gold .gutschein__motiv { mix-blend-mode: multiply; opacity: .35; }
.gutschein--espresso .gutschein__motiv { mix-blend-mode: screen; opacity: .8; }
.gutschein--creme .gutschein__motiv { mix-blend-mode: multiply; opacity: .95; }
.gutschein__oben, .gutschein__unten { position: relative; z-index: 1; }
.gutschein__marke { font-family: var(--font-display); letter-spacing: .2em; font-size: clamp(.95rem, 2.6vw, 1.2rem); font-variation-settings: 'opsz' 24, 'wght' 500; }
.gutschein__art { font-size: var(--t-xs); letter-spacing: .28em; text-transform: uppercase; opacity: .8; margin-top: .3rem; }
.gutschein__wert { font-family: var(--font-display); font-size: clamp(2.2rem, 8vw, 3.6rem); line-height: 1; font-variation-settings: 'opsz' 72, 'wght' 500; }
.gutschein__fuer { font-size: var(--t-sm); margin-top: .5rem; min-height: 1.3em; overflow-wrap: anywhere; }
.gutschein__gruss { font-family: var(--font-display); font-style: italic; font-size: var(--t-m); opacity: .88; margin-top: .25rem; min-height: 1.3em; overflow-wrap: anywhere; }
.gutschein__code { font-size: var(--t-xs); letter-spacing: .2em; opacity: .75; margin-top: .6rem; }
.motivwahl { display: flex; gap: .6rem; }
.motivwahl button {
  width: 54px; height: 36px; border-radius: 6px; cursor: pointer; border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}
.motivwahl button.ist-aktiv { border-color: var(--color-accent); }
.motivwahl__gold { background: var(--color-primary); }
.motivwahl__espresso { background: var(--color-espresso); }
.motivwahl__creme { background: var(--color-surface); }
.bezahlwege { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }
.bezahlwege .chip { width: 100%; min-height: 52px; }

/* ---------- Feiern: Pakete ---------------------------------------------- */















@media (max-width: 1024px) {

 .ablauf { grid-template-columns: 1fr; } .zusammen { position: static; } }
@media (max-width: 560px) {
 }

/* ---------- Betreiberansicht ------------------------------------------- */
.betrieb { background: #f6efe3; min-height: 100vh; }
.betrieb__kopf { background: var(--color-espresso); color: var(--color-ink-invers); padding: 1rem 0; border-bottom: 1px solid var(--line-invers); }
.betrieb__kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.betrieb__titel { display: flex; align-items: center; gap: .9rem; }
.betrieb__titel img { width: 38px; height: 38px; }
.betrieb__titel b { font-family: var(--font-display); color: var(--color-primary-light); letter-spacing: .16em; font-weight: 500; }
.betrieb__titel span { display: block; font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--color-muted-invers); }
.betrieb__datum { font-size: var(--t-sm); color: var(--color-muted-invers); }
.betrieb__reiter { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; padding: 1rem 0 0; }
.betrieb__reiter button {
  flex: none; min-height: 44px; padding: .5rem 1.1rem; border: 1px solid var(--line); background: var(--color-surface);
  border-radius: var(--radius); cursor: pointer; font-size: var(--t-sm); font-weight: 500;
}
.betrieb__reiter button.ist-aktiv { background: var(--color-espresso); color: var(--color-ink-invers); border-color: var(--color-espresso); }
.betrieb__reiter b { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; margin-left: .4rem; border-radius: 999px; background: var(--f-terra); color: #fff; font-size: var(--t-xs); padding: 0 .35rem; }
.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin: 1.2rem 0; }
.kennzahl { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.kennzahl span { display: block; font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--color-muted); }
.kennzahl b { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; margin-top: .2rem; }
.kennzahl small { color: var(--color-muted); font-size: var(--t-sm); }
.tafel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 2.2vw, 1.5rem); margin-bottom: 1rem; }
.tafel h2 { font-size: 1.35rem; margin-bottom: .8rem; }
.tafel[hidden] { display: none; }
.tafel__zweit { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; }
.zeilen { width: 100%; border-collapse: collapse; font-size: var(--t-m); }
.zeilen th { text-align: left; font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); font-weight: 500; padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
.zeilen td { padding: .6rem .5rem; border-bottom: 1px solid rgba(180,139,80,.16); vertical-align: top; }
.zeilen tr.ist-markiert td { background: rgba(180,139,80,.1); }
.zeilen .klein { font-size: var(--t-sm); color: var(--color-muted); }
.etikett { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: var(--t-xs); letter-spacing: .06em; font-weight: 600; white-space: nowrap; }
.etikett--neu { background: rgba(236,108,108,.15); color: var(--color-accent-dark); }
.tischplan { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.bereich { border: 1px dashed var(--line); border-radius: 6px; padding: .8rem; }
.bereich__name { font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 .6rem; }
.bereich__tische { display: flex; flex-wrap: wrap; gap: .5rem; }
.tisch {
  width: 64px; height: 64px; border-radius: 10px; border: 1px solid var(--line); background: var(--color-surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15;
  font-size: var(--t-xs); cursor: pointer; padding: 0;
}
.tisch--rund { border-radius: 50%; }
.tisch b { font-size: var(--t-sm); }
.tisch--reserviert { background: rgba(85,132,195,.13); border-color: rgba(85,132,195,.5); }
.tisch--besetzt { background: rgba(180,139,80,.22); border-color: var(--color-primary); }
.tisch.ist-gewaehlt { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.legende { display: flex; gap: 1rem; flex-wrap: wrap; font-size: var(--t-xs); color: var(--color-muted); margin-top: .8rem; }
.legende span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; border: 1px solid var(--line); background: var(--color-surface); }
.legende .l-res::before { background: rgba(85,132,195,.13); border-color: rgba(85,132,195,.5); }
.legende .l-bes::before { background: rgba(180,139,80,.22); border-color: var(--color-primary); }
.tischinfo { font-size: var(--t-m); margin: .9rem 0 0; min-height: 1.6em; }
.einloesen { display: flex; gap: .6rem; flex-wrap: wrap; }
.einloesen input { flex: 1 1 200px; font: inherit; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); text-transform: uppercase; letter-spacing: .12em; }
.einloesen__ergebnis { margin: .9rem 0 0; font-size: var(--t-m); }
@media (max-width: 900px) {
  .kennzahlen { grid-template-columns: 1fr 1fr; }
  .tafel__zweit, .tischplan { grid-template-columns: 1fr; }
  .zeilen .weg-mobil { display: none; }
}

/* Gutschein drucken: zusatz.js hängt eine Kopie der Karte als .druckbogen
   ans Ende von <body> und setzt die Klasse — gedruckt wird nur die Karte. */
.druckbogen { display: none; }
@media print {
  body.druck-nur-gutschein > *:not(.druckbogen) { display: none !important; }
  body.druck-nur-gutschein .druckbogen { display: block; padding: 12mm 0 0; }
  .druckbogen .gutschein { box-shadow: none; margin: 0 auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.druck-nur-gutschein { padding: 0 !important; background: #fff; }
}

/* Mobilmenü: acht Punkte statt vier — kleiner gesetzt und scrollbar, sonst
   fällt der untere Teil auf kleinen Handys aus dem Bild. */
.mobilnav { justify-content: flex-start; overflow-y: auto; padding-top: calc(var(--kopfhoehe) + 1rem); }
.mobilnav a { font-size: clamp(1.45rem, 6.2vw, 2.1rem); padding-block: .38rem; }

/* Felder auf dunklem Grund (Warenkorb-Spalte) */
.zusammen .feld label { color: var(--color-muted-invers); }
.zusammen .feld input, .zusammen .feld select, .zusammen .feld textarea {
  background: var(--color-espresso-2); color: var(--color-ink-invers); border-color: var(--line-invers);
}
.zusammen .zustimmung { color: var(--color-muted-invers); }
.zusammen .zustimmung a { color: var(--color-primary-light); }
.zusammen .chip { background: transparent; color: var(--color-ink-invers); border-color: var(--line-invers); }
.zusammen .chip.ist-aktiv { background: var(--color-primary); color: var(--color-espresso); border-color: var(--color-primary); }
.zusammen .form-meldung { background: var(--color-espresso-2); border-color: var(--line-invers); color: var(--color-ink-invers); }
.zusammen .vorschau-hinweis { color: #f2b3b4; border-color: rgba(236,108,108,.45); background: rgba(236,108,108,.08); }
.zusammen .formular { margin-top: 1.4rem; gap: 1rem; }
.zusammen__karte { margin-bottom: 1.4rem; }

/* Auswahlliste mit Radioknöpfen (Feier-Paket) */
.wahlliste { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; }
.wahlliste legend { font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted); font-weight: 500; margin-bottom: .45rem; padding: 0; }
.wahlliste label {
  display: flex; align-items: center; gap: .8rem; min-height: 48px; padding: .55rem .9rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--color-surface); cursor: pointer; font-size: var(--t-m);
}
.wahlliste label:has(input:checked) { border-color: var(--color-espresso); box-shadow: inset 0 0 0 1px var(--color-espresso); }
.wahlliste input { width: 18px; height: 18px; accent-color: var(--color-primary-dark); flex: none; }
.wahlliste small { margin-left: auto; color: var(--color-muted); white-space: nowrap; }
.feld-titel { font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted); font-weight: 500; margin: 0 0 .5rem; }
.zusammen .feld-titel { color: var(--color-muted-invers); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.hinweisband { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.hinweisband p { margin: 0; max-width: 60ch; }
.betrieb__h1 { margin: 0; font: inherit; }
.betrieb__h1 b, .betrieb__h1 span { display: block; }

.klein-rechtlich { font-size: var(--t-sm); color: var(--color-muted); margin: 1.4rem 0 2rem; }
.klein-rechtlich a { color: var(--color-primary-text); }
/* Nach dem Absenden springt die Seite zur Bestätigung — ohne Abstand lag
   deren Kopf unter der festen Kopfzeile. */
.bestaetigt, [data-bezahlen] { scroll-margin-top: calc(var(--kopfhoehe) + 1.2rem); }
/* Gutschein: auf schmalen Schirmen die Vorschau ÜBER das Formular — man soll
   sehen, was man gerade gestaltet. */
@media (max-width: 1024px) { .ablauf--vorschau-oben > aside { order: -1; } }

/* `hidden` muss immer gewinnen. `.ablauf` und `.formular` stehen auf
   display: grid, `.betrieb__reiter b` auf inline-grid — das schlägt das
   Browser-Standardblatt, und ein per Skript verstecktes Formular blieb über
   der Bestätigung stehen (gefunden im WebKit-Test, 29.09.2026). */
[hidden] { display: none !important; }
/* Die Bestätigung bekommt den Fokus (Screenreader lesen sie dann vor) —
   Safari malt dabei den roten Fokusring um den ganzen Kasten. Er ist kein
   Bedienelement, also ohne Ring. */
.bestaetigt:focus, .bestaetigt:focus-visible { outline: none; }

/* Sprungziele unter der festen Kopfzone (Korbleiste → #korb, Paketlinks → #anfrage). */
#korb, #anfrage { scroll-margin-top: calc(var(--kopfhoehe) + 1rem); }
/* Bezahlschritt: erst Bezahlart, dann EIN Knopf „Zahlungspflichtig bestellen" (§ 312j BGB). */
.bezahlen__mwst { font-size: var(--t-sm); color: var(--color-muted); margin: 1rem 0 .6rem; }
.zusammen .bezahlen__mwst { color: var(--color-muted-invers); }
.bezahlen__los { width: 100%; }
.bezahlen__los:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.zusammen__summe small { font-size: var(--t-xs); color: var(--color-muted-invers); letter-spacing: .04em; }
.mitte-links { margin: 0 0 1.2rem; }

/* ---------- Jobs, Allergene, Datenhinweis (29.09.2026, spät) ------------- */




.stelle__art { margin: 0; font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--color-primary-text); }


.stelle__los { margin-top: auto; padding-top: .6rem; font-size: var(--t-s); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary-text); min-height: 44px; display: inline-flex; align-items: center; }
.stelle__los::after { content: " →"; margin-left: .3rem; }
.weiter-liste { margin: 1rem 0 0; padding-left: 1.2rem; list-style: decimal; font-size: var(--t-m); display: grid; gap: .6rem; }
@media (max-width: 1024px) {
 }
.datenhinweis { font-size: var(--t-sm); color: var(--color-muted); margin: 0; }
.datenhinweis a { color: var(--color-primary-text); }
.zusammen .datenhinweis { color: var(--color-muted-invers); }
.zusammen .datenhinweis a, .zusammen__hinweis a { color: var(--color-primary-light); }
.wochenkarte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.wochenkarte__liste { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.wochenkarte__tag { background: var(--color-surface); display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 1rem; align-items: baseline; padding: .9rem 1.1rem; }
.wochenkarte__tag b { font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--color-primary-text); font-weight: 600; }
.wochenkarte__tag span { font-family: var(--font-display); font-size: 1.05rem; font-variation-settings: 'opsz' 18, 'wght' 600; }
.wochenkarte__tag small { display: block; font-family: var(--font-ui); font-size: var(--t-sm); color: var(--color-muted); font-weight: 400; }
.wochenkarte__tag em { font-style: normal; font-weight: 600; white-space: nowrap; }
@media (max-width: 760px) { .wochenkarte { grid-template-columns: 1fr; } .wochenkarte__tag { grid-template-columns: 1fr auto; } .wochenkarte__tag b { grid-column: 1 / -1; } }

/* ==========================================================================
   Überarbeitung nach Johns Durchsicht (29.09.2026, abends)
   ========================================================================== */

/* Kacheln „Mehr vom Colours" und Stellen: EINE Linie über alle Kacheln, aus
   den Farben der Mandala-Splitter, Gold überwiegt wie im Logo.
   Seit 11.11.2026 klar getrennte Farbstücke statt Verlauf: Jedes Stück hat
   genau eine Farbe, nichts geht in die nächste über — dieselbe Regel wie bei
   den neuen bunten Grafiken. Reihenfolge und Anteile wie beim früheren
   Verlauf; die Grenzen liegen dort, wo vorher die Farbpunkte saßen. */
.angebote { position: relative; }
.angebot::before, .stelle::before { display: none; }
.angebote::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; z-index: 1;
  background: linear-gradient(90deg,
    #c29b6a 0 16%,  #ec6c6c 16% 30%, #eac1cc 30% 42%, #c29b6a 42% 54%,
    #9589ac 54% 68%, #5584c3 68% 80%, #6d8d66 80% 91%, #c29b6a 91% 100%);
}



/* Fußzeile: die Seitenliste in zwei Spalten, auf dem Desktop engere Zeilen.
   Tippziele bleiben auf dem Handy bei 44 px. */
@media (min-width: 1025px) {
  .fuss { padding-block: 3.2rem 1.6rem; }
  .fuss__oben > div:nth-child(2) ul { columns: 2; column-gap: 2.4rem; }
  .fuss a { min-height: 32px; }
  .fuss li { break-inside: avoid; }
}

/* Haus: Gruß statt Zahlenreihe */
.gastgeber-gruss {
  font-family: var(--font-display); font-style: italic; font-size: 1.5rem;
  color: var(--color-primary-light); margin: 1.4rem 0 0; font-variation-settings: 'opsz' 30, 'wght' 400;
}


/* ---------- Feiern: Kopf mit Bild im Rundbogen und Farbbogen ------------ */
.feierkopf {
  position: relative; overflow: hidden; color: var(--color-ink-invers);
  background: radial-gradient(ellipse 80% 90% at 75% 40%, #2a1a12 0%, var(--color-espresso) 70%);
  padding: calc(var(--kopfhoehe) + clamp(2.5rem, 5vw, 4rem)) 0 clamp(3.5rem, 7vw, 5.5rem);
}
.feierkopf__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.feierkopf .brow { color: var(--color-primary-light); }
.feierkopf h1 { font-size: clamp(2.3rem, 5.4vw, 4.4rem); }
.feierkopf .lead { color: var(--color-muted-invers); margin-top: 1.3rem; }
.feierkopf .btn--linie { color: var(--color-ink-invers); }
.feierkopf .btn--linie:hover { color: var(--color-espresso); }
.feierkopf__bild { justify-self: end; width: min(420px, 100%); }
.feierkopf__bild img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--bogen); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
@media (max-width: 900px) {
  .feierkopf__inner { grid-template-columns: 1fr; }
  .feierkopf__bild { justify-self: start; width: min(300px, 80%); }
}
/* Kopf mit Foto NUR am Rechner (Kontakt, Jobs — 12.11.2026, John): Aufbau wie der frühere Feiern-Kopf
   (.feierkopf__inner, .feierkopf__bild — Text links, Rundbogen rechts). Unter 901 px kein Foto: Der Kopf bleibt wie
   vorher, samt drehender Sonne (die Handy-Regel von .feierkopf__bild greift dort nicht, weil das Bild aus ist).
   Das Foto lädt `lazy` — so holt ein Handy es gar nicht erst. */
.kopfbild--kontakt img { object-position: 50% 90%; }
.kopfbild--jobs img { object-position: 50% 50%; }
@media (min-width: 901px) {
  .seitenkopf--bild .seitenkopf__strahlen { display: none; }
  .seitenkopf--bild h1 { font-size: clamp(2.3rem, 5.4vw, 4.4rem); }   /* Größe des Feiern-Kopfs: die Textspalte ist schmaler */
}
@media (max-width: 900px) { .seitenkopf--bild .feierkopf__bild { display: none; } }

/* Anlässe: helle Karten, jede in einer Mandala-Farbe getönt */












.feier-schritte { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: var(--t-m); }
.feier-schritte li { display: inline-flex; align-items: center; gap: .6rem; }
.feier-schritte b {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-espresso); color: var(--color-primary-light); font-size: var(--t-sm);
}

/* ---------- Gutschein: wie der Kartenumschlag -------------------------- */
.gutschein { padding: 0; justify-content: space-between; font-family: var(--font-ui); }
.gutschein__wortmarke { display: block; width: 116%; max-width: none; margin: -9% -8% 0; opacity: 1; }
.gutschein--espresso .gutschein__wortmarke { opacity: .95; }
.gutschein__unten {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  padding: 0 clamp(1rem, 3vw, 1.5rem) clamp(.9rem, 2.6vw, 1.3rem);
}
.gutschein__art { font-size: var(--t-xs); letter-spacing: .32em; text-transform: uppercase; font-weight: 600; opacity: .9; }
.gutschein__wert {
  font-family: var(--font-ui); font-weight: 500; letter-spacing: -.02em; line-height: .9;
  font-size: clamp(2.2rem, 7vw, 3.2rem); white-space: nowrap; font-variation-settings: normal;
}
.gutschein__fuer { font-size: var(--t-sm); margin-top: .35rem; font-weight: 500; }
.gutschein__gruss { font-family: var(--font-ui); font-style: normal; font-size: var(--t-sm); opacity: .85; margin-top: .15rem; min-height: 0; }
.gutschein__code { font-size: var(--t-xs); letter-spacing: .14em; opacity: .8; margin-top: .4rem; min-height: 0; }
.gutschein__code:empty, .gutschein__gruss:empty, .gutschein__fuer:empty { display: none; }
/* Gruß höchstens zwei Zeilen wie auf dem PDF, und die Karte wächst mit, statt den Betrag abzuschneiden (Probe 12.11.2026).
   overflow: clip statt hidden — eine Box mit hidden ist ein Scroll-Container und wächst trotz aspect-ratio nicht mit dem
   Inhalt; clip schneidet Ecken und Motiv genauso. Ältere Safaris ohne clip behalten hidden. */
.gutschein { overflow: hidden; overflow: clip; }
.gutschein__gruss { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.gutschein--gold { background: var(--color-primary); color: var(--color-espresso); box-shadow: 0 18px 40px -22px rgba(19,10,9,.55); }
.gutschein--espresso { background: var(--color-espresso); color: var(--color-ink-invers); box-shadow: inset 0 0 0 1px rgba(180,139,80,.5), 0 18px 40px -22px rgba(19,10,9,.55); }
/* Korrektur: Deckkraft am Elternelement kapselt den Blend (README §2, Falle 1) —
   die Deckkraft sitzt deshalb am Bild selbst; der Bogen liegt unter dem Text. */
.feierkopf__text { text-shadow: 0 1px 18px rgba(19,10,9,.85); }
.gutschein__wortmarke { width: 94%; margin: 5% auto 0; }
@media (min-width: 1025px) {
  .fuss__oben > div:nth-child(2) ul { columns: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 2.4rem; }
  .fuss__oben > div:nth-child(2) li { margin: 0; }
}
.feierkopf .btn { text-shadow: none; }

/* Keine vom Browser errechnete Schein-Fette oder Schein-Kursive. Zodiak ist
   nur aufrecht geladen (400/700/800/900) — wo früher Bodoni kursiv stand,
   steht weiter aufrecht. Ein echtes Kursiv dazu ändert die Speisekarte: nur
   auf Johns Wort. (Bis 12.11.2026 Gloock, ein einziger Schnitt.) */
html { font-synthesis: none; }
.gericht--zeile .gericht__name { font-style: normal; }
.gastgeber-gruss { font-style: normal; }

/* ==========================================================================
   Text-Animationen, neu (29.09.2026, Ansage John): kein „Hologramm" mehr.
   Vorher liefen Überschriften per Ausschnitt von unten nach oben auf
   (.reveal--vorhang), alle übrigen Texte schwebten 16–22 px von unten ein.
   Jetzt: ruhiges Einblenden an Ort und Stelle, ohne Bewegung. Listen
   behalten die kleine Staffelung, der Hero blendet gestaffelt ein.
   Bilder (.reveal--bild) sind davon bewusst nicht betroffen.
   ========================================================================== */
.reveal, .reveal--vorhang {
  opacity: 0; transform: none; clip-path: none;
  transition: opacity 1s var(--ease);
  will-change: opacity;
}
.reveal.ist-sichtbar, .reveal--vorhang.ist-sichtbar { opacity: 1; clip-path: none; }
.reveal--vorhang.ist-fertig, .reveal.ist-fertig { will-change: auto; }
.reveal--folge > * { transform: none; transition: opacity .9s var(--ease); }
.hero .brow, .hero__wort, .hero__ort, .hero .status, .hero__cta { transform: none; }

/* ==========================================================================
   Echtes Logo überall (29.09.2026, Ansage John). Vorher: Signet mit
   nachgezeichnetem Mandala + „COLOURS" in unserer Schrift nachgesetzt.
   Seit 12.11.2026 Johns goldenes Logo (logo-gold-720/-400/-280.webp, aus
   seiner Datei freigestellt: ~/Kraftwerk/Kunden-und-Demos/Colours Danis/
   Logo gold 2026-11-12/). Nie nachbauen, nie Teile weglassen — auch der
   Vektor-Nachbau in _werkzeug/logo/ wird nicht eingebaut (Johns Ansage).
   ========================================================================== */
.kopf__inner { min-height: 92px; }
.marke { gap: 0; }
.marke__logo { width: auto; height: 76px; }
@media (max-width: 760px) { .kopf__inner { min-height: 78px; } .marke__logo { height: 62px; } }

.hero__marke { margin: 0; line-height: 0; }
.hero__marke img { width: clamp(230px, 27vw, 360px); height: auto; margin: 0 auto; }
.hero__wort::after { margin-top: clamp(1.2rem, 2.4vw, 1.8rem); }
.hero .brow--mitte { margin: clamp(1.2rem, 2.4vw, 1.6rem) 0 0; }
.hero .hero__ort { margin-top: 1rem; }
/* Der Einlauf gilt jetzt dem Logo — nichts steigt von unten, es blendet ein. */
.hero__wort { animation-delay: .1s; }

/* Startbild auf kurzen Handy-Bildschirmen (John, 13.11.2026): Gemessen im sichtbaren Bereich von Safari lagen die Knöpfe
   unter dem Rand — iPhone SE (375 × 548) beide, iPhone 13 (390 × 664) „Tisch reservieren“ knapp. Logo und Abstände rücken
   zusammen, bis beide Knöpfe zu sehen sind. Steht bewusst HIER, nach den Logo-Regeln: weiter oben gewönnen die. */
@media (max-width: 760px) and (max-height: 700px) {
  .hero { padding-top: calc(var(--kopfhoehe) + 1.25rem); padding-bottom: 2.5rem; }
  .hero__marke img { width: 200px; }
  .hero__wort::after { margin-top: 1rem; }
  .hero .brow--mitte { margin-top: 1rem; }
  .hero .hero__ort { margin: .7rem 0 1.4rem; }
}
@media (max-width: 760px) and (max-height: 600px) {
  .hero { padding-top: calc(var(--kopfhoehe) + .75rem); }
  .hero__marke img { width: 150px; }
  .hero__wort::after { margin-top: .7rem; }
  .hero .brow--mitte { margin-top: .7rem; }
  .hero .hero__ort { margin: .5rem 0 1rem; }
  .hero .status { margin-bottom: 1rem; }
}

.betrieb__logo { width: auto; height: 58px; }
.betrieb__titel { gap: .6rem; }

/* Gutschein: Gold bleibt die Fläche, das Original-Logo steht auf seinem
   eigenen Espresso-Grund oben — Gold auf Gold wäre unsichtbar. */
.gutschein__kopf { background: var(--color-espresso); display: grid; place-items: center; padding: 6% 0 5%; }
.gutschein__logo { width: 40%; height: auto; }
.gutschein--espresso .gutschein__kopf { background: transparent; }
.gutschein { aspect-ratio: 1.58; }
/* Gutschein, zweiter Anlauf: Gold als Rahmen und Fläche, das Logo auf einem
   eingesetzten Espresso-Feld — so bleibt Gold dominant (Johns Wunsch) und das
   Original-Logo steht auf seinem eigenen Grund. */
.gutschein--gold { padding: 4.5% 4.5% 0; }
.gutschein--gold .gutschein__kopf { border-radius: 6px; padding: 5% 0 4%; }
.gutschein__logo { width: 30%; }
.gutschein--gold .gutschein__unten { padding: 0 1% 4%; margin-top: auto; }
.gutschein--espresso { padding: 0; }
.gutschein--espresso .gutschein__unten { border-top: 1px solid rgba(180,139,80,.45); padding-top: 3.5%; }
.gutschein--espresso .gutschein__unten { padding: 3.5% 4.5% 5%; } .gutschein--espresso .gutschein__kopf { padding: 5% 0 3%; }
/* Logo in der Kopfzeile größer (Ansage John, 29.09.2026): Das Logo ist
   übereinander aufgebaut — Mandala, COLOURS, By Danis —, bei 76 px war der
   Schriftzug kaum zu lesen. */
.kopf__inner { min-height: 124px; }
.marke__logo { height: 108px; }
@media (max-width: 760px) { .kopf__inner { min-height: 96px; } .marke__logo { height: 82px; } }
.betrieb__logo { height: 72px; }
/* `.marke img { 42px }` weiter oben ist spezifischer als `.marke__logo` —
   deshalb blieb das Logo bei 42 px stehen, egal was hier stand. */
.marke .marke__logo { width: auto; height: 108px; }
@media (max-width: 760px) { .marke .marke__logo { height: 82px; } }
.betrieb__titel .betrieb__logo { width: auto; height: 72px; }
/* „Einen Ticken zu groß" (John, 29.09.2026): 108 → 92 px, Handy 82 → 70 px. */
.kopf__inner { min-height: 108px; }
.marke .marke__logo { height: 92px; }
@media (max-width: 760px) { .kopf__inner { min-height: 84px; } .marke .marke__logo { height: 70px; } }

/* Container-Muster der Website (Johns Referenz, 29.09.2026): die Kacheln aus
   „Mehr vom Colours". Gilt jetzt auch für Anlässe, Pakete und Stellen —
   ein Stil für alle Text-Container, keine Einzelanfertigungen mehr. */
.angebote--drei { grid-template-columns: repeat(3, 1fr); }
.angebot__liste { margin: .2rem 0 0; font-size: var(--t-m); color: var(--color-muted); }
.angebot__liste li { padding: .38rem 0; border-bottom: 1px solid rgba(180,139,80,.18); }
.angebot__liste li:last-child { border-bottom: 0; }
@media (max-width: 1024px) { .angebote--drei { grid-template-columns: 1fr; } }
/* „Mehr vom Colours“ auf den Startseiten: so viele Spalten wie Kacheln. In der Fassung mit Bearbeitungs-Tool fallen
   Reservieren und Feiern mit ihrem Schalter weg — feste drei Spalten ließen dann eine leere graue Zelle stehen. */
.angebote--wege { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
@media (max-width: 1024px) { .angebote--wege { grid-template-columns: 1fr; } }

/* ==========================================================================
   Umrandete Knöpfe beim Überfahren (Ansage John, 29.09.2026).
   Vorher `background: currentColor` — die Fläche nahm die SCHRIFTFARBE an,
   Schrift und Fläche waren identisch (gemessen: Kontrast 1,00 bei 13 von 49
   Knöpfen, auch „Tisch reservieren" im Hero). Jetzt feste Farbpaare.
   ========================================================================== */
.btn--linie:hover, .btn--linie:focus-visible {
  background: var(--color-espresso); color: var(--color-surface); border-color: var(--color-espresso);
}
/* Auf dunklem Grund: gold füllen, dunkle Schrift — wie der Hauptknopf. */
.sektion--dunkel .btn--linie:hover, .hero .btn--linie:hover, .feierkopf .btn--linie:hover,
.seitenkopf .btn--linie:hover, .zusammen .btn--linie:hover, .fuss .btn--linie:hover,
.mobilnav .btn--linie:hover, .betrieb__kopf .btn--linie:hover,
.sektion--dunkel .btn--linie:focus-visible, .hero .btn--linie:focus-visible, .feierkopf .btn--linie:focus-visible,
.seitenkopf .btn--linie:focus-visible, .zusammen .btn--linie:focus-visible {
  background: var(--color-primary); color: var(--color-espresso); border-color: var(--color-primary);
}
/* Goldener Knopf: beim Überfahren dunkler statt heller. Das helle #f4bc72
   verschwamm auf Sand/Creme (Fläche zu Umfeld 1,33). Dunkles Gold trägt auf
   hellem und dunklem Grund. */
.btn--gold:hover, .btn--gold:focus-visible { background: var(--color-primary-dark); color: var(--color-surface); }

/* ==========================================================================
   Neue Grafiken von John (29.09.2026): Rundbogen (Haus), Schleife
   (Gutscheine), Viertelbögen (Kontakt). Grund vor dem Einbau exakt auf
   Schwarz gezogen, dann `screen` — sonst bliebe ein Kasten stehen.
   ========================================================================== */
.seitenkopf__motiv {
  position: absolute; right: max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
  top: calc(var(--kopfhoehe) + 1rem); bottom: 1.5rem;
  width: min(34vw, 440px); display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 1;
}
.seitenkopf__motiv img { max-height: 100%; width: auto; max-width: 100%; mix-blend-mode: screen; }
@media (max-width: 900px) {
  .seitenkopf__motiv { width: 46vw; right: -6vw; opacity: .45; }
}
.sektion--ecke { overflow: hidden; }
.ecke-motiv {
  position: absolute; top: 0; right: 0; width: clamp(170px, 20vw, 290px);
  transform: scaleY(-1); pointer-events: none; z-index: 0;
}
.ecke-motiv img { width: 100%; height: auto; mix-blend-mode: screen; }
.sektion--ecke > .wrap { position: relative; z-index: 1; }
@media (max-width: 760px) { .ecke-motiv { width: 140px; opacity: .8; } }
/* Falle aus README §2: z-index, transform und opacity am RAHMEN kapseln den
   Blend — das Bild würde mit einem schwarzen Kasten erscheinen. Deshalb sitzen
   Spiegelung und Deckkraft am Bild selbst, der Rahmen bleibt ohne Stapelkontext. */
.seitenkopf__motiv { z-index: auto; opacity: 1; }
.ecke-motiv { transform: none; z-index: auto; opacity: 1; }
.ecke-motiv img { transform: scaleY(-1); }
@media (max-width: 900px) { .seitenkopf__motiv { opacity: 1; } .seitenkopf__motiv img { opacity: .45; } }
@media (max-width: 760px) { .ecke-motiv { opacity: 1; } .ecke-motiv img { opacity: .8; } }
/* Seitenköpfe mit eigener Grafik: Text bleibt links, Grafik rechts frei.
   Auf dem Handy lag die Grafik blass hinter dem Text — dort ausgeblendet. */
@media (min-width: 901px) {
  .seitenkopf:has(.seitenkopf__motiv) .wrap > * { max-width: calc(100% - min(34vw, 440px) - 3rem); }
  .seitenkopf:has(.seitenkopf__motiv) h1 { max-width: min(14ch, calc(100% - min(34vw, 440px) - 3rem)); }
}
@media (max-width: 900px) { .seitenkopf__motiv { display: none; } }

/* ==========================================================================
   Fehler aus dem Scan vom 29.09.2026 (15 Seiten × 5 Breiten, gemessen)
   ========================================================================== */
/* 404: `.text-seite a` ist spezifischer als `.btn--gold` und färbte die
   Knopfschrift goldbraun auf Gold (Kontrast 2,03). */
.text-seite a.btn--gold { color: var(--color-espresso); }
.text-seite a.btn--gold:hover { color: var(--color-surface); }
.text-seite a.btn--linie { color: var(--color-ink); }
.text-seite a.btn--linie:hover { color: var(--color-surface); }

/* Einleitung in den dunklen Seitenköpfen stand in der Schriftfarbe für
   HELLE Flächen (Kontrast 3,23, 7 Unterseiten). */
.seitenkopf .lead { color: var(--color-muted-invers); }
.seitenkopf .lead a { color: var(--color-primary-light); text-decoration: underline; text-underline-offset: .2em; }
.seitenkopf .lead a:hover { color: var(--color-ray); }

/* Kleine Zeile in Auswahl-Chips auf dunklem Grund („mit Pfand") */
.zusammen .chip small { color: var(--color-muted-invers); }
.zusammen .chip.ist-aktiv small { color: rgba(19,10,9,.78); }
/* Gesperrte Tage (Ruhetag/vorbei) etwas kräftiger — bleiben erkennbar gesperrt */
.chip:disabled { color: #857869; }

/* Tippziele am Handy: die Motivwahl war 36 px hoch */
.motivwahl button { width: 60px; height: 44px; }

/* Formularfelder dürfen schmaler werden als ihr längster Eintrag — sonst
   drückte „Egal — Hauptsache Colours" die Jobs-Seite bei 320 px über den Rand */
.feld, .feld-reihe > * { min-width: 0; }
.feld input, .feld select, .feld textarea { min-width: 0; max-width: 100%; }

/* Betreiberansicht bei 320 px: Kennzahlen untereinander statt nebeneinander */
@media (max-width: 420px) { .kennzahlen { grid-template-columns: 1fr; } }
.wege-liste a { display: inline-flex; align-items: center; min-height: 44px; }

/* ==========================================================================
   Funde Gegenleser, zweite Runde (29.09.2026)
   ========================================================================== */
/* `overflow-x: hidden` auf html/body machte body zum Scroll-Container —
   dadurch klebte nichts: Kategorieleiste, Warenkorb, Gutschein-Vorschau.
   `clip` schneidet genauso ab, ohne Scroll-Container zu sein. */
html, body { overflow-x: clip; }
/* Klebt die Seitenleiste, muss sie in den Bildschirm passen — der Warenkorb
   mit Formular ist länger; dann scrollt er in sich. */
@media (min-width: 1025px) {
  .zusammen { max-height: calc(100vh - var(--kopfhoehe) - 2.4rem); overflow-y: auto; overscroll-behavior: contain; }
}
/* Sprungziele nie unter der festen Kopfzone (#pakete, #bewerben, …) */
[id] { scroll-margin-top: calc(var(--kopfhoehe) + 1rem); }
/* Betreiberansicht: Hinweis stand in der Farbe für dunkle Flächen auf weißer Tafel */
.betrieb .zusammen__hinweis { color: var(--color-muted); }
/* Handymenü: unten kein Polster mehr — dort haftet seit 13.11.2026 der Knopf „Tisch reservieren“ (.mobilnav__tisch) */
.mobilnav { z-index: 58; padding-bottom: 0; }
/* „Tisch reservieren“ am unteren Rand des offenen Menüs, über die volle Breite wie vorher die Leiste. margin-top: auto
   schiebt ihn auf großen Handys nach unten, sticky hält ihn auf kleinen sichtbar, während das Menü scrollt. */
.mobilnav .mobilnav__tisch {
  position: sticky; bottom: 0; z-index: 1; flex: none;
  display: flex; align-items: center; justify-content: center;
  min-height: calc(56px + env(safe-area-inset-bottom, 0)); margin: auto calc(-1 * var(--pad)) 0;
  padding: 0 1rem env(safe-area-inset-bottom, 0); border: 0; border-radius: 0;
  font-family: var(--font-ui); font-size: var(--t-sm); letter-spacing: .12em; text-transform: uppercase;
  background: var(--color-primary); color: var(--color-espresso);
}
.mobilnav__fuss { margin-bottom: 1.5rem; }
/* Galerie am Handy: eine einzelne letzte Kachel füllt die Zeile */
@media (max-width: 760px) {
  .galerie > figure:last-child:nth-child(even) { grid-column: span 6; aspect-ratio: 4/3; }
}
/* Bilder behalten ihren eigenen Einlauf — die Text-Überschreibung (.reveal
   ohne Bewegung) traf wegen gleicher Spezifität auch .reveal--bild. */
.reveal.reveal--bild { opacity: 1; clip-path: inset(0 0 calc(100% - 1px) 0); transition: clip-path 1.15s var(--ease); }
.reveal.reveal--bild.ist-sichtbar { clip-path: inset(0); }
/* Englische Fußzeile: Hinweis unter der Liste */
.fuss__notiz { font-size: var(--t-sm); color: var(--color-muted-invers); margin: .8rem 0 0; }

/* Rundbogen im Haus-Kopf (Johns Wunsch, 30.09.2026): kommt von rechts aus
   dem Rand und läuft mit den Beinen bis auf die Trennlinie — als ginge er
   weiter, statt frei über der Linie zu schweben. Angeschnitten wird er vom
   overflow des Seitenkopfs, nicht vom Bild. */
.seitenkopf__motiv--rand {
  top: calc(var(--kopfhoehe) + 1.5rem); bottom: 0; right: 0;
  width: auto; display: block;
}
.seitenkopf__motiv--rand img {
  height: 100%; width: auto; max-width: none; max-height: none;
  transform: translateX(24%);
}
@media (min-width: 901px) {
  .seitenkopf:has(.seitenkopf__motiv--rand) .wrap > * { max-width: min(58%, 640px); }
  .seitenkopf:has(.seitenkopf__motiv--rand) h1 { max-width: min(58%, 14ch); }
}

/* ==========================================================================
   BEWEGUNG, zweite Fassung (30.09.2026, Auftrag John: „auf das nächste Level").
   Grundsatz: KEIN Text bewegt sich von unten, nichts wird „aufgezogen".
   Bewegung entsteht über Schärfe, Licht und Reihenfolge. Alles endet unter
   prefers-reduced-motion als Null (Block ganz unten).
   ========================================================================== */

/* ---- Überschriften: Wort für Wort scharfstellen (Wörter setzt main.js §3d) */
.wort {
  display: inline-block; opacity: 0; filter: blur(10px);
  transition: opacity .5s var(--ease), filter .65s var(--ease);
  transition-delay: calc(var(--i, 0) * 40ms + var(--start, 0ms));
}
.ist-sichtbar .wort, .ist-geladen .seitenkopf .wort, .ist-geladen .feierkopf .wort { opacity: 1; filter: blur(0); }

/* ---- Seitenköpfe: beim Laden in Folge — Augenbraue, Überschrift, Text, Grafik */
.seitenkopf .brow, .seitenkopf .lead, .seitenkopf .knopfreihe,
.feierkopf .brow, .feierkopf .lead, .feierkopf .knopfreihe, .feierkopf__bild {
  opacity: 0; transition: opacity .6s var(--ease), letter-spacing .9s var(--ease);
}
.seitenkopf .brow, .feierkopf .brow { letter-spacing: .6em; }
.seitenkopf h1, .feierkopf h1 { opacity: 0; }
.ist-geladen .seitenkopf h1, .ist-geladen .feierkopf h1 { opacity: 1; }
.ist-geladen .seitenkopf .brow, .ist-geladen .feierkopf .brow { opacity: 1; letter-spacing: .34em; }
.ist-geladen .seitenkopf .lead, .ist-geladen .feierkopf .lead { opacity: 1; transition-delay: .2s; }
.ist-geladen .seitenkopf .knopfreihe, .ist-geladen .feierkopf .knopfreihe { opacity: 1; transition-delay: .3s; }
.ist-geladen .feierkopf__bild { opacity: 1; transition-delay: .15s; transition-duration: 1s; }
.seitenkopf__motiv img, .ecke-motiv img { opacity: 0; scale: 1.05; transition: opacity 1s var(--ease), scale 1.4s var(--ease); }
.ist-geladen .seitenkopf__motiv img { opacity: 1; scale: 1; transition-delay: .1s; }
.ecke-motiv.ist-da img { opacity: 1; scale: 1; }

/* ---- Hero: Logo wird scharf, Goldlicht atmet, Augenbraue zieht zusammen */
.hero__wort { position: relative; isolation: isolate; }
.hero__wort::before {
  content: ""; position: absolute; left: 50%; top: 42%; width: 150%; aspect-ratio: 1;
  translate: -50% -50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(212,165,96,.22) 0%, rgba(180,139,80,.08) 38%, transparent 66%);
  animation: lichtAtmet 7s ease-in-out 1.2s infinite alternate both;
}
@keyframes lichtAtmet { from { opacity: .45; scale: .94; } to { opacity: 1; scale: 1.05; } }
.hero__marke img { animation: logoEin 1s var(--ease) .05s both; }
@keyframes logoEin { from { opacity: 0; filter: blur(14px); scale: .95; } to { opacity: 1; filter: blur(0); scale: 1; } }
.hero .brow { animation: browEin 1s var(--ease) .25s both; }
@keyframes browEin { from { opacity: 0; letter-spacing: .7em; } to { opacity: 1; letter-spacing: .34em; } }

/* ---- Bilder: weich einblenden und „setzen" statt aufziehen */
.reveal--bild, .reveal.reveal--bild { clip-path: none !important; opacity: 0; transition: opacity .8s var(--ease); }
.reveal--bild.ist-sichtbar, .reveal.reveal--bild.ist-sichtbar { opacity: 1; }
.reveal--bild img, .reveal--bild picture { transform: scale(1.07); transition: transform 2.2s var(--ease); }
.reveal--bild.ist-sichtbar img, .reveal--bild.ist-sichtbar picture { transform: scale(1); }

/* ---- Kacheln: Verlauf zeichnet sich von links, Kacheln nacheinander, Pfeil läuft */
.angebote::before { transform: scaleX(0); transform-origin: left center; transition: transform 1s var(--ease) .1s; }
.angebote.ist-sichtbar::before { transform: scaleX(1); }
.angebote > .angebot { opacity: 0; transition: opacity .6s var(--ease), background .35s var(--ease); }
.angebote.ist-sichtbar > .angebot { opacity: 1; }
.angebote.ist-sichtbar > .angebot:nth-child(2) { transition-delay: .12s, 0s; }
.angebote.ist-sichtbar > .angebot:nth-child(3) { transition-delay: .24s, 0s; }
.angebote.ist-sichtbar > .angebot:nth-child(4) { transition-delay: .36s, 0s; }
.angebot__weiter::after { display: inline-block; transition: transform .4s var(--ease); }
.angebot:hover .angebot__weiter::after { transform: translateX(5px); }
.angebot h3 { transition: color .35s var(--ease); }
.angebot:hover h3 { color: var(--color-primary-dark); }

/* ---- Knöpfe: Farbe füllt sich von links. Hover-Regeln weiter oben setzen
   `background` als Kurzform — deshalb hier mit !important festgezurrt. */
.btn {
  --btn-fuell: var(--color-primary-dark);
  background-image: linear-gradient(var(--btn-fuell), var(--btn-fuell)) !important;
  background-repeat: no-repeat !important; background-position: left center !important;
  background-size: 0% 100% !important;
  transition: background-size .55s var(--ease), color .35s var(--ease) .08s, border-color .35s var(--ease), transform .35s var(--ease) !important;
}
.btn:hover, .btn:focus-visible { background-size: 100% 100% !important; }
.btn--gold:hover, .btn--gold:focus-visible { background-color: var(--color-primary) !important; }
.btn--linie { --btn-fuell: var(--color-espresso); }
.btn--linie:hover, .btn--linie:focus-visible { background-color: transparent !important; }
.sektion--dunkel .btn--linie, .hero .btn--linie, .feierkopf .btn--linie, .seitenkopf .btn--linie,
.zusammen .btn--linie, .fuss .btn--linie, .mobilnav .btn--linie, .betrieb__kopf .btn--linie { --btn-fuell: var(--color-primary); }
.btn--espresso { --btn-fuell: #000; }
.btn--espresso:hover, .btn--espresso:focus-visible { background-color: var(--color-espresso) !important; }
.btn--creme { --btn-fuell: #fff; }
.btn--creme:hover, .btn--creme:focus-visible { background-color: var(--color-surface) !important; }
.btn:active { transform: translateY(0) scale(.98) !important; }
.btn:disabled, .btn:disabled:hover { background-size: 0% 100% !important; }

/* ---- Speisekarte: Kategorie und Filter blenden weich über */
.karte-block:not([hidden]) { animation: weichEin .55s var(--ease) both; }
.gericht:not([hidden]), .karte-gruppe:not([hidden]) { animation: weichEin .45s var(--ease) both; }
@keyframes weichEin { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }

/* ---- Formulare & Abläufe: Mikrobewegung */
.chip { transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease), transform .15s var(--ease); }
.chip:active:not(:disabled) { transform: scale(.95); }
.chips--zeiten .chip { animation: weichEin .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 22ms); }
.bestaetigt:not([hidden]) { animation: karteEin .7s var(--ease) both; }
@keyframes karteEin { from { opacity: 0; scale: .97; filter: blur(3px); } to { opacity: 1; scale: 1; filter: blur(0); } }
.bestaetigt:not([hidden]) .bestaetigt__haken { animation: hakenPop .7s cubic-bezier(.34,1.56,.64,1) .3s both; }
@keyframes hakenPop { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
.puls { animation: puls .8s var(--ease); }
@keyframes puls { 0% { color: inherit; } 30% { color: var(--color-ray); text-shadow: 0 0 18px rgba(244,188,114,.55); } 100% { text-shadow: none; } }
[data-bezahlen]:not([hidden]) { animation: weichEin .5s var(--ease) both; }

/* ---- Gutschein: Karte neigt sich mit der Maus (zusatz.js §C2), Lichtreflex */
.zusammen__karte { perspective: 900px; }
.gutschein { transform-style: preserve-3d; transition: transform .6s var(--ease), box-shadow .6s var(--ease); will-change: transform; }
.gutschein::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--glanz-x, 30%) var(--glanz-y, 20%), rgba(255,255,255,.28), transparent 45%);
  opacity: 0; transition: opacity .5s var(--ease); mix-blend-mode: soft-light;
}
.gutschein.ist-geneigt::after { opacity: 1; }
[data-g-wert].puls { display: inline-block; }

/* ---- Handymenü: Punkte erscheinen nacheinander */
.mobilnav.ist-offen > a { animation: weichEin .5s var(--ease) both; }
.mobilnav.ist-offen > a:nth-child(2) { animation-delay: .04s; } .mobilnav.ist-offen > a:nth-child(3) { animation-delay: .08s; }
.mobilnav.ist-offen > a:nth-child(4) { animation-delay: .12s; } .mobilnav.ist-offen > a:nth-child(5) { animation-delay: .16s; }
.mobilnav.ist-offen > a:nth-child(6) { animation-delay: .20s; } .mobilnav.ist-offen > a:nth-child(7) { animation-delay: .24s; }
.mobilnav.ist-offen > a:nth-child(8) { animation-delay: .28s; } .mobilnav.ist-offen > a:nth-child(9) { animation-delay: .32s; }

/* ---- Betreiberansicht: Reiter blenden über, Neues leuchtet, Eingang gleitet herein */
.tafel:not([hidden]) { animation: weichEin .45s var(--ease) both; }
.zeilen tr.ist-markiert td { animation: markiertLeuchtet 2.4s var(--ease) .4s both; }
@keyframes markiertLeuchtet { 0% { background: rgba(236,108,108,.28); } 100% { background: rgba(180,139,80,.1); } }
[data-eingang]:not([hidden]) { animation: eingang .7s cubic-bezier(.34,1.3,.64,1) both; }
@keyframes eingang { from { opacity: 0; translate: 0 -10px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
.betrieb__reiter b:not([hidden]) { animation: hakenPop .5s cubic-bezier(.34,1.56,.64,1) both; }
.tisch { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.tisch:hover { transform: scale(1.05); box-shadow: 0 6px 16px -8px rgba(19,10,9,.5); }

/* ---- Ruhe für alle, die weniger Bewegung eingestellt haben */
@media (prefers-reduced-motion: reduce) {
  .wort, .seitenkopf h1, .feierkopf h1, .seitenkopf .brow, .seitenkopf .lead, .seitenkopf .knopfreihe,
  .feierkopf .brow, .feierkopf .lead, .feierkopf .knopfreihe, .feierkopf__bild,
  .seitenkopf__motiv img, .ecke-motiv img, .angebote > .angebot, .reveal--bild, .reveal.reveal--bild {
    opacity: 1 !important; filter: none !important; scale: 1 !important; letter-spacing: normal;
  }
  .seitenkopf .brow, .feierkopf .brow { letter-spacing: .34em !important; }
  .angebote::before { transform: none !important; }
  .reveal--bild img, .reveal--bild picture { transform: none !important; }
  .hero__wort::before { animation: none !important; opacity: .7; }
  .hero__marke img, .hero .brow { animation: none !important; opacity: 1 !important; filter: none !important; }
  .gutschein { transform: none !important; }
}


/* ==========================================================================
   Karriere-Seite (30.09.2026): Stellen als Liste im Kachel-Muster, Filter,
   Vorteile. Ein Container-Muster für alles — Johns Vorgabe vom 29.09.
   ========================================================================== */
.stellenfilter { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .8rem 1.4rem; margin: 0 0 1.4rem; }
.stellenfilter__zahl { margin: 0; font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted); }

.angebote--stellen { grid-template-columns: 1fr; }
.angebot.stelle {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(1.4rem, 4vw, 3.2rem); row-gap: .2rem; align-items: start;
}
.stelle__kopf { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.stelle__kopf h3 { margin: 0; }
.stelle__fuss { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; gap: .9rem; }
.stelle__tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.stelle__tag {
  display: inline-block; padding: .3rem .75rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--t-xs); letter-spacing: .08em; color: var(--color-muted); background: rgba(255,255,255,.55);
}
.stelle__mehr { grid-column: 1 / -1; margin-top: .6rem; border-top: 1px solid rgba(180,139,80,.22); }
.stelle__mehr summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: .7rem;
  min-height: 44px; padding: .5rem 0;
  font-size: var(--t-s); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-primary-text);
}
.stelle__mehr summary::-webkit-details-marker { display: none; }
.stelle__mehr summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center/1px 100% no-repeat;
  transition: transform .35s var(--ease);
}
.stelle__mehr[open] summary::after { transform: rotate(45deg); }
.stelle__spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 2.4rem; padding: .4rem 0 .6rem; }
.stelle__spalten .feld-titel { color: var(--color-primary-text); }
.stellen__initiativ { margin: 1.4rem 0 0; color: var(--color-muted); }
.stellen__initiativ a { color: var(--color-primary-text); font-weight: 600; }

@media (max-width: 760px) {
  .angebot.stelle { grid-template-columns: 1fr; }
  .stelle__fuss { grid-column: 1; grid-row: auto; align-items: stretch; margin-top: .8rem; }
  .stelle__tags { justify-content: flex-start; }
  .stelle__fuss .btn { width: 100%; justify-content: center; }
  .stelle__mehr { grid-row: auto; }
  .stelle__spalten { grid-template-columns: 1fr; }
}

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

/* Tisch vergibt das Team, nicht der Gast (Termin 30.09.2026, Wunsch Daniella). */
.res-hinweis { margin: -.2rem 0 .9rem; font-size: var(--t-s); color: var(--color-muted); max-width: 52ch; }
.tisch-wahl {
  font: inherit; font-size: var(--t-s); color: var(--color-ink);
  min-height: 44px; max-width: 100%; padding: .35rem 1.9rem .35rem .6rem;
  border: 1px solid var(--line); border-radius: var(--radius); background-color: #fff;
}
.tisch-wahl--offen { border-color: var(--color-primary); color: var(--color-primary-text); font-weight: 600; }
.tisch-wahl:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tafel__zweit > * { min-width: 0; }
@media (max-width: 760px) {
  .tafel__zweit > div:first-child { overflow-x: auto; }
  .tisch-wahl { font-size: var(--t-sm); padding-right: 1.4rem; }
}
[data-res-liste] td .klein { margin-top: .2rem; }
.tisch-wahl { width: 100%; min-width: 5.2rem; }
@media (max-width: 900px) {
  .tisch-wahl { width: 100%; min-width: 5.6rem; }
  .zeilen td, .zeilen th { padding-left: .35rem; padding-right: .35rem; }
}
@media (max-width: 400px) {
  .zeilen td, .zeilen th { padding-left: .22rem; padding-right: .22rem; }
  .zeilen th { letter-spacing: .06em; }
  .tisch-wahl { min-width: 4.6rem; padding-left: .4rem; padding-right: 1.1rem; }
}

/* iPhone-Safari zoomt beim Antippen in jedes Feld unter 16 px hinein und bleibt
   vergrößert stehen — auf dem Handy wirkt das wie ein Fehler (Handy-Prüflauf
   30.09.2026: alle Felder standen auf 15 px). Nur auf Touch-Geräten, der Desktop
   bleibt unverändert. */
@media (pointer: coarse) {
  /* !important, weil `.feld select`, `.tisch-wahl` & Co. spezifischer sind — hier muss es überall gelten. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
}

/* ── Handy: was ein Finger nicht kann ──────────────────────────────────────────
   Gemessen am 04.11.2026 auf echten Motoren (Playwright: WebKit = iPhone-Safari,
   Chrome = Android), nicht angenommen.

   1) KLEBENDER HOVER. Ein Finger kann nicht schweben, also tut der Browser beim
      Antippen so — und lässt den Zustand danach stehen. Gemessen am Knopf
      „Zahlungspflichtig bestellen": Android-Chrome behielt `translateY(-2px)`
      auch nach dem Weiterscrollen, iPhone-Safari nicht. Hier wird nur die
      BEWEGUNG zurückgenommen; die Farbwechsel bleiben, weil ihr Rücksetzen die
      Ausgangswerte bräuchte und das die Regeln oben umbauen hieße.
      ⚠️ Wer eine neue `:hover`-Regel mit `transform` schreibt, trägt sie hier nach.
   2) GRAUER BLITZ beim Antippen — iOS und Android malen ein Rechteck über jedes
      angetippte Element mit Klick-Ziel. Das ist das lauteste „hier ist eine
      Website"-Signal, das es gibt. ⚠️ ABER: Er ist auf Touch-Geräten die EINZIGE
      Rückmeldung, solange ein Element kein eigenes `:active` hat. Hier haben nur
      `.btn` und `.chip` eines (Zeilen 2311/2321) — deshalb wird er auch nur dort
      abgeschaltet. Global entfernt fühlte sich jeder andere Tipp tot an.
   3) TIPPVERZÖGERUNG: ohne `touch-action: manipulation` wartet der Browser auf
      einen möglichen Doppeltipp, bevor er den Klick auslöst.
   4) LANGES DRÜCKEN markiert sonst die Beschriftung eines Knopfes wie Fließtext.
      Nur auf Bedienelemente — NIE auf den Rumpf: Adressen, Zeiten und Codes
      müssen sich kopieren lassen.                                              */
@media (hover: none) {
  .btn--gold:hover, .btn--linie:hover, .btn--creme:hover, .btn--espresso:hover,
  .rolle:hover, .tisch:hover,
  .galerie figure:hover img,
  .rolle:hover .rolle__motiv img, .angebot:hover .angebot__weiter::after { transform: none; }
}
.btn, .chip { -webkit-tap-highlight-color: transparent; }
a, button, summary, label, [role="button"], input[type="submit"] { touch-action: manipulation; }
button, summary, [role="button"], .btn, .karte-filter__knopf, .karte-gaenge__knopf {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

/* ── Allergene & Zusatzstoffe ──────────────────────────────────────────────────
   Eigene Namen mit `allergen-`-Vorsatz, KEIN `legende` — die Klasse gibt es schon
   (Betreiberansicht, Zeile 1788) und sie setzt farbige Kästchen vor jedes <span>.
   Mit ihr stünde vor jedem Buchstaben ein Farbfleck.                            */
.allergen-liste { display: grid; gap: .1rem; margin-top: 1.4rem; }
.allergen-zeile { display: flex; gap: 1rem; align-items: baseline;
  padding: .85rem .2rem; border-bottom: 1px solid rgba(180,139,80,.16); }
.allergen-zeile:last-child { border-bottom: 0; }
.allergen-kuerzel { flex: none; display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--color-primary);
  color: var(--color-primary-text); font-size: var(--t-sm); font-weight: 600; }
.allergen-kuerzel--klein { width: 1.7rem; height: 1.7rem; font-size: var(--t-xs); margin-right: .6rem; }
.allergen-name { margin: 0; font-weight: 600; }
.allergen-dazu { margin: .15rem 0 0; font-size: var(--t-sm); color: var(--color-muted); }
.allergen-zusatz { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .1rem; }
.allergen-zusatz li { display: flex; align-items: center;
  padding: .7rem .2rem; border-bottom: 1px solid rgba(180,139,80,.16); }
.allergen-zusatz li:last-child { border-bottom: 0; }
.allergen-vorsatz { color: var(--color-muted); font-size: var(--t-sm); margin: .3rem 0 0; }
.allergen-stand { font-size: var(--t-sm); color: var(--color-muted); margin-top: 1.8rem; }
.allergen-hinweis { border: 1px solid var(--color-primary); border-radius: var(--radius);
  padding: 1.3rem 1.4rem; margin-top: 1.4rem; background: var(--color-surface); }
.allergen-hinweis p { margin: 0 0 .6rem; }
.allergen-hinweis p:last-child { margin-bottom: 0; }
.allergen-tabelle { margin-top: 1.4rem; }
.zeilen--allergene th[scope="row"] { font-size: var(--t-m); text-transform: none;
  letter-spacing: 0; color: var(--color-ink); font-weight: 600; }
/* Auf dem Handy untereinander statt nebeneinander. Mit waagerechtem Schieben wurde die dritte
   Spalte am rechten Rand abgeschnitten — man KANN schieben, sieht es aber nicht, und ausgerechnet
   die Zusatzstoffe standen draussen (gemessen am 07.11.2026 auf dem iPhone). */
@media (max-width: 620px) {
  .zeilen--allergene thead { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .zeilen--allergene tr { display: block; padding: .9rem 0;
    border-bottom: 1px solid rgba(180,139,80,.16); }
  .zeilen--allergene tr:last-child { border-bottom: 0; }
  .zeilen--allergene th[scope="row"] { display: block; padding: 0 0 .35rem; border: 0; }
  .zeilen--allergene td { display: flex; gap: .6rem; padding: .15rem 0; border: 0;
    font-size: var(--t-sm); }
  .zeilen--allergene td::before { content: attr(data-spalte) ":"; flex: none;
    min-width: 7.5rem; color: var(--color-muted); }
}

/* Startseite am Handy (12.11.2026, freigegeben John nach Vergleich: ~/Kraftwerk/Kunden-und-Demos/Colours Danis/
   Startseite Handy kuerzen/). ①–⑥ bis 560 px, ⑦ Gästestimmen waagerecht und ⑧ Farbband bis 760 px. Rechner unverändert. */
@media (max-width: 560px) {

  /* ① Café · Restaurant · Bar: Zeichnung klein neben Titel und Uhrzeit, Text darunter über die volle Breite */
  .rollen { gap: .75rem; }
  .rolle {
    display: grid; grid-template-columns: 60px 1fr; column-gap: .95rem; align-items: center;
    padding: 1.1rem 1.15rem 1.25rem;
  }
  .rolle__motiv { width: 60px; height: 60px; margin: 0; grid-column: 1; grid-row: 1 / 3; }
  .rolle h3 { grid-column: 2; margin-bottom: .1rem; align-self: end; }
  .rolle .rolle__zeit { grid-column: 2; margin-bottom: 0; align-self: start; letter-spacing: .1em; }
  .rolle > p:last-child { grid-column: 1 / -1; margin-top: .75rem; }

  /* ② Daniel und Daniella: Zeitleiste am Handy weg — sie steht vollständig auf „Das Haus“, der Knopf führt hin */
  .zeitleiste { display: none; }

  /* ③ Reservieren, verschenken, feiern: Kacheln enger, nichts raus */
  .angebote--wege .angebot { padding: 1.05rem 1.15rem 1.1rem; gap: .3rem; }
  .angebote--wege .angebot__weiter { padding-top: .25rem; }

  /* ④ Galerie: Wischreihe statt fünf Bilder untereinander; das nächste Bild schaut an, damit man sieht, dass es weitergeht */
  .galerie {
    display: flex; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad);
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .galerie::-webkit-scrollbar { display: none; }
  .galerie figure { flex: 0 0 76%; aspect-ratio: 4 / 5; scroll-snap-align: start; }

  /* ⑤ Fußzeile: „Seiten“ und „Kontakt“ nebeneinander (gilt auf allen Seiten, Fußzeile ist überall gleich) */
  .fuss__oben { grid-template-columns: 1fr 1fr; column-gap: 1.2rem; row-gap: 2rem; }
  .fuss__marke { grid-column: 1 / -1; }

  /* ⑥ Abstände der Startseite etwas enger — seit 12.11.2026 abends nur noch für den dunklen Block. Die hellen
     Abschnitte folgen dem gemeinsamen Abstand (--abschnitt, zwischen zwei hellen nur einmal): Johns Freigabe nach
     dem Vergleich. Vorher addierten sich hier zwei enge Ränder zu 90–109 px, jetzt sind es überall 104. */
  body:has(.rollen) .sektion--dunkel                { padding-block: 3.4rem; }
  body:has(.rollen) .sektion--dunkel.sektion--weit  { padding-block: 3.9rem; }
}

/* ⑦ Gästestimmen am Handy waagerecht durchlaufen statt senkrecht (John, 12.11.2026). Dieselbe Mechanik wie bisher:
   alle Originale vor allen Kopien (order aus styles.css), Verschiebung um genau -50 % — dafür muss padding-right
   gleich dem gap sein, sonst springt der Umlauf. Laufzeit bleibt im stimmen:dauer-Block von stimmen.py. */
@media (max-width: 760px) {
  .stimmen-wand {
    display: block; max-height: none;
    margin-inline: calc(-1 * var(--pad));
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  }
  .stimmen-band {
    flex: none; width: max-content;
    flex-direction: row; align-items: stretch;
    gap: 1rem; padding-bottom: 0; padding-right: 1rem;
    animation-name: stimmenQuer;
  }
  .stimme { flex: 0 0 min(300px, 78vw); }
  /* gleich hohe Karten: lange Stimmen nach sechs Zeilen mit „…“ kürzen, sonst bestimmt die längste die Höhe */
  .stimme blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
}
@keyframes stimmenQuer { to { transform: translateX(-50%); } }
/* Ohne Bewegung (Bedienungshilfe): nichts läuft, die Karten lassen sich stattdessen wischen, jede nur einmal */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .stimmen-wand {
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-inline: var(--pad); scroll-padding-inline: var(--pad);
    -webkit-mask-image: none; mask-image: none;
  }
  .stimme { scroll-snap-align: start; }
}

/* ⑧ Farbband oben rechts in „Das Haus“ am Handy größer: 260 px statt 112 px (John, Stufe C). Es läuft über die
   Überschrift — gewollt. KEIN z-index auf .wrap: das macht einen eigenen Stapelkontext auf, und der Farbbogen unten in
   derselben Sektion (mix-blend-mode: screen) zeigt dann seinen schwarzen Kasten. Auf sehr schmalen Handys höchstens 68 %. */
@media (max-width: 760px) {
  .hausband { width: min(260px, 68vw); }
}