/* ── Farben ────────────────────────────────────────────
   Grün und Rosa kommen von Katharina (Karteikarte, 11.09.2026):
   Grün rgb(143,193,177) = #8FC1B1, Rosa rgb(211,172,174) = #D3ACAE,
   (Das Grün hat Katharina am 14.09.2026 auf #8FC1B1 korrigiert — vorher
   stand hier #6EB4A6. Alle Schriftfarben darauf wurden nachgerechnet und
   sind seitdem sogar kontrastreicher, nichts musste nachgezogen werden.)
   dazu mit Kuli ein zweites, helleres Rosa rgb(225,189,190) = #E1BDBE.

   Beide Originaltöne sind zu hell für Schrift auf hellem Grund
   (Kontrast 2,3 und 2,0 — nötig sind 4,5). Sie stehen deshalb dort,
   wo sie als FLÄCHE wirken: Logo-Kreis, Handy-Leiste, Ränder, Kästen.
   Für Überschriften, Knöpfe und kleine Zeilen gibt es dunklere
   Geschwister derselben Farbe — gleicher Farbton, gleiche Sättigung,
   nur dunkler, bis der Kontrast stimmt (7,3 / 10,4 / 4,5).
   Wer einen Wert ändert: Kontrast nachrechnen, nicht schätzen.   */
:root{
  --salbei:#8FC1B1; --salbei-tief:#417E72; --gruen:#2F5B53; --gruen-tief:#23433C;
  --mint:#8FC1B1; --gold:#BFA063;
  --hell:#C9E3DE; --creme:#F7F4ED; --creme-2:#EFE9E0; --papier:#FBFAF5;
  --rose:#D3ACAE; --rose-tief:#A5585C; --rose-hell:#EDDEDE; --altrosa:#E1BDBE;
  /* 16.09.2026, Darius: Das Salbei aus „Was jetzt Saison hat" soll auf ALLEN
     gruenen Flaechen stehen — Kopfband, Knoepfe, Bestellseite, Fuss. Weiss
     darauf kommt nur auf 2,3, deshalb steht auf Salbei immer diese dunkle
     Tinte (Kontrast 6,1). --salbei-dunkel ist der Hover-Ton. */
  --mint-tinte:#1E3A34; --salbei-dunkel:#7BB4A2;
  /* Rosa Akzent auf Salbei: --rose-tief kaeme nur auf 2,7, dieses dunklere
     Rosa auf 5,0 (Bestellseite: kleine Versalzeilen wie „Auswaehlen"). */
  --rose-auf-mint:#6E3538;
  /* Aus der Rosentapete im Gastraum abgenommen. */
  --tapete:#E7CFC8; --tapete-tief:#DDBEB6;
  --tinte:#26302A; --grau:#616A64;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Manrope',-apple-system,'Segoe UI',sans-serif;
  --rand:1px solid rgba(47,91,83,.14);
  /* Feine Trennlinie. Stand bis 15.09.2026 nur in todo-bauen.py, auf den
     Gaesteseiten war var(--linie) deshalb leer: Die Linie im Zeitstrahl
     war unsichtbar und der Rahmen um die Karte fiel weg. */
  --linie:rgba(47,91,83,.15);
  --mass:1180px;
;
  /* Rundung, eine Stelle für alles (13.09.2026). Vorher waren die
     Gästeseiten fast eckig (3 px) und das Bestellformular rund (22 px) —
     zwei Handschriften auf einer Seite. Knöpfe bleiben ganz rund, das
     ist das Erkennungszeichen. */
  --rund:10px;        /* Karten, Bilder, große Flächen */
  --rund-klein:8px;   /* Eingabefelder, kleine Kästen */
  --rund-gross:14px   /* Blöcke im Bestellformular */}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--sans);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
/* Das <picture> um ein Bild darf im Aufbau nicht mitzählen — sonst greifen
   Regeln wie .bildslot img{height:100%} ins Leere. display:contents lässt
   den Kasten verschwinden, das Bild bleibt direktes Kind der Kachel. */
picture{display:contents}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--rose-tief);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--mass);margin:0 auto;padding:0 28px}
@media(max-width:640px){.wrap{padding:0 20px}}

h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-.005em;margin:0;line-height:1.12}
h2,h1.wie-h2{font-size:clamp(32px,5.2vw,54px);color:var(--gruen)}
h3{font-size:clamp(21px,2.6vw,26px);font-weight:400;color:var(--gruen)}
p{margin:0 0 1.1em}
.lead{font-size:clamp(17px,2vw,20px);color:var(--grau);line-height:1.72}

.label{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.22em;
       text-transform:uppercase;color:var(--rose-tief);margin:0 0 14px}
.label.auf-dunkel{color:var(--rose-hell)}
.bestellen .label.auf-dunkel{color:var(--rose-auf-mint)}

/* Sprung zum Inhalt: für Menschen, die mit der Tastatur oder einem
   Vorleser arbeiten. Unsichtbar, bis er den Fokus bekommt — dann sitzt
   er oben links über allem. */
.zum-inhalt{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--salbei);color:var(--mint-tinte);padding:12px 20px;
  border-radius:0 0 10px 0;font-size:14.5px;font-weight:600;text-decoration:none}
.zum-inhalt:focus{left:0}

/* ── Ornament ─────────────────────────────────────────── */
.zier{display:block;margin:0 auto;width:150px;height:auto;opacity:.9}
.zier-klein{width:78px}

/* ── Kopfleiste ───────────────────────────────────────── */
.info-band{background:var(--salbei);color:var(--mint-tinte);font-size:12.5px;letter-spacing:.03em}
.info-band .wrap{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;
                 justify-content:center;padding-top:9px;padding-bottom:9px}
/* Tippziel: die Telefonnummer im Band war 23 Pixel hoch — am Handy zu wenig.
   Das Band bleibt gleich hoch, der antippbare Bereich waechst nach oben und unten. */
.info-band a{text-decoration:none;border-bottom:1px solid rgba(30,58,52,.3);
  padding:9px 2px 2px;margin:-9px 0 -1px}
.info-band a:hover{border-bottom-color:var(--rose-tief)}
/* Hinweisband für besondere Tage — Text kommt aus den Einstellungen der
   Verwaltung, erscheint nur, wenn dort der Schalter gesetzt ist. */
.sonderhinweis{background:var(--rose);color:#3A1F21;font-size:13.5px;font-weight:600;
  text-align:center;line-height:1.45}
.sonderhinweis .wrap{padding-top:9px;padding-bottom:9px}
.status{display:inline-flex;align-items:center;gap:7px;font-weight:600}
/* Der Punkt stand in Salbei — auf dem Salbei-Band unsichtbar. Jetzt dunkelgruen. */
.punkt{width:7px;height:7px;border-radius:50%;background:#2F5B53;box-shadow:0 0 0 3px rgba(47,91,83,.2)}
.punkt.zu{background:#A5585C;box-shadow:0 0 0 3px rgba(165,88,92,.22)}

header{position:sticky;top:0;z-index:60;background:rgba(251,250,245,.93);
       backdrop-filter:blur(14px);border-bottom:var(--rand)}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:20px;
      padding-top:13px;padding-bottom:13px}
.marke{display:flex;align-items:center;gap:13px;text-decoration:none;flex-shrink:0}
.marke img{width:52px;height:52px;object-fit:contain;background:var(--salbei);
           border-radius:50%;padding:4px;box-shadow:0 1px 3px rgba(38,48,42,.16)}
.marke-text{line-height:1.15}
.marke-text b{display:block;font-family:var(--serif);font-size:24px;font-weight:500;color:var(--gruen)}
.marke-text span{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--rose-tief);font-weight:700}
/* Nur das Hauptmenü im Kopf — nicht jedes <nav>. Vorher traf die Regel auch die
   Sprungleiste der Speisekarte: am Handy war die damit unsichtbar (opacity 0,
   position absolute). Gefunden bei der Durchsicht am 11.09.2026. */
#hauptmenue{display:flex;align-items:center;gap:30px}
#hauptmenue a{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--tinte);
      padding:5px 0;border-bottom:1.5px solid transparent;transition:border-color .2s,color .2s}
#hauptmenue a:hover{color:var(--gruen);border-bottom-color:var(--rose)}
/* Der Bestell-Knopf im Menü: #hauptmenue a ist spezifischer als .knopf und
   nahm ihm Schriftfarbe, Polster und Gewicht weg — am Rechner war aus dem
   Knopf ein nacktes Rechteck geworden (11.09.2026, erst mit frischem
   Stylesheet gesehen). Deshalb hier alles ausdrücklich. */
#hauptmenue a.knopf{color:var(--mint-tinte);border-bottom:none;padding:13px 26px;font-weight:600}
#hauptmenue a.knopf:hover{color:var(--mint-tinte);background:var(--salbei-dunkel)}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;
       background:var(--salbei);color:var(--mint-tinte);text-decoration:none;
       padding:13px 26px;border-radius:999px;font-size:14.5px;font-weight:600;
       letter-spacing:.01em;border:none;cursor:pointer;transition:background .2s,transform .15s;
       font-family:var(--sans)}
.knopf:hover{background:var(--salbei-dunkel);transform:translateY(-1px)}
.knopf.hell{background:var(--papier);color:var(--gruen)}
.knopf.hell:hover{background:#fff}
.knopf.linie{background:transparent;color:var(--papier);box-shadow:inset 0 0 0 1.5px rgba(251,250,245,.55)}
.knopf.linie:hover{background:rgba(251,250,245,.12)}
.knopf.gross{padding:17px 38px;font-size:16px}
.burger{display:none;background:none;border:none;padding:9px;cursor:pointer}
.burger span{display:block;width:23px;height:1.8px;background:var(--gruen);margin:5px 0;
             border-radius:2px;transition:.25s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}
@media(max-width:900px){
  .burger{display:block}
  #hauptmenue{position:absolute;top:100%;left:0;right:0;padding:18px 26px 28px;
      background:var(--papier);flex-direction:column;align-items:stretch;gap:0;
      transform:translateY(-10px);opacity:0;visibility:hidden;pointer-events:none;
      transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .22s,visibility .28s;
      box-shadow:0 24px 40px -24px rgba(38,48,42,.4);border-bottom:var(--rand);
      max-height:calc(100dvh - 100%);overflow-y:auto}
  #hauptmenue.offen{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
  #hauptmenue a{padding:15px 0;border-bottom:var(--rand);font-size:17px}
  #hauptmenue .knopf{margin-top:20px;border-bottom:none;justify-content:center}
}

/* ── Bühne ────────────────────────────────────────────── */
.buehne{background:
    linear-gradient(180deg,rgba(35,67,60,.90),rgba(43,79,71,.74) 44%,rgba(35,67,60,.93)),
    url("bilder/raum-hell-buehne.jpg") center 38%/cover no-repeat,var(--gruen-tief);
  color:var(--papier);position:relative;overflow:hidden;
        padding:clamp(64px,10vw,110px) 0 clamp(72px,11vw,120px);text-align:center}
.buehne::before,.buehne::after{content:"";position:absolute;width:520px;height:520px;
  border-radius:50%;background:radial-gradient(circle,rgba(211,172,174,.19),transparent 68%);
  pointer-events:none}
.buehne::before{top:-190px;left:-170px}
.buehne::after{bottom:-230px;right:-160px}
.buehne .wrap{position:relative;z-index:1}
.buehne-logo{width:clamp(158px,22vw,215px);margin:0 auto 34px;filter:drop-shadow(0 3px 14px rgba(38,48,42,.14))}
.buehne h1{font-size:clamp(40px,7.4vw,80px);font-weight:300;color:var(--papier);
           margin-bottom:22px;letter-spacing:-.015em}
.buehne h1 em{font-style:italic;font-weight:300;color:var(--rose-hell)}
.buehne p{max-width:610px;margin:0 auto 38px;font-size:clamp(16px,2vw,19.5px);
          color:rgba(251,250,245,.9);line-height:1.68}
.knopfreihe{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.seit{display:inline-flex;align-items:center;gap:14px;margin-bottom:26px;
      font-size:11px;letter-spacing:.28em;text-transform:uppercase;
      color:rgba(251,250,245,.72);font-weight:600}
/* 14.10.2026 auf Wunsch von Katharina: keine Striche mehr neben
   „Traditions-Konditorei“ (am Rechner stand einer dahinter, am Handy
   links und rechts — beide weg, damit es überall gleich aussieht). */
.seit::before,.seit::after{content:none;display:none}
/* 15.10.2026: Unter 1000 px liegen „Zur Karte“ und „Im Café reservieren“
   auf dem dunkelgrünen Bild. Der rosa Fokusrahmen (--rose-tief) kam dort
   nur auf 1,2–2,2:1 — wer mit der Tab-Taste kam, sah kaum, wo er steht
   (nötig 3:1). Hier deshalb ein heller Rahmen: mindestens 6:1 zum Bild.
   Ab 1000 px steht die Bühne auf Creme, dort bleibt das Rosa (4,6). */
@media(max-width:999px){.buehne :focus-visible{outline-color:var(--papier)}}
/* Zeitpläne (15.10.2026): Sind beide großen Knöpfe abgeschaltet, ist die
   Knopfreihe weg (hidden). Dann soll auch der Abstand unter dem Text nicht
   als leere Fläche stehen bleiben — am Rechner säße der Text sonst nicht
   mehr mittig neben dem Foto. Klasse setzt seite.js (buehneStellen). */
.buehne.ohne-knoepfe .wrap > p:last-of-type{margin-bottom:0}

/* ── Titelbild ─────────────────────────────────────────
   Am Handy bleibt es wie gehabt: Foto ganzflächig, Text darauf.
   Ab 1000px wird daraus zwei Spalten — Text links auf Creme, das Foto
   rechts in voller Farbe ohne Schleier. Der weiche Übergang nach unten
   ist raus; im geteilten Kopf endet unten nichts Dunkles mehr, und am
   Handy war er ausdrücklich nicht gewünscht. */
.buehne-foto{display:none}
@media(min-width:1000px){
  .buehne{background:var(--creme);color:var(--tinte);text-align:left;
    padding:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;
    min-height:min(80vh,680px)}
  .buehne::before,.buehne::after{display:none}
  .buehne .wrap{max-width:none;margin:0;padding:clamp(40px,4vw,66px) clamp(34px,4.5vw,72px)}
  .buehne-logo{width:clamp(118px,10vw,158px);margin:0 0 26px;filter:none}
  .buehne .seit{color:var(--rose-tief)}
  .buehne h1{color:var(--gruen)}
  .buehne h1 em{color:var(--rose-tief)}
  .buehne p{color:var(--grau);margin:0 0 34px;max-width:470px}
  .buehne .knopfreihe{justify-content:flex-start}
  .buehne .knopf.hell{background:var(--salbei);color:var(--mint-tinte)}
  .buehne .knopf.hell:hover{background:var(--salbei-dunkel)}
  .buehne .knopf.linie{color:var(--gruen);box-shadow:inset 0 0 0 1.5px rgba(47,91,83,.45)}
  .buehne .knopf.linie:hover{background:var(--salbei);color:var(--mint-tinte)}
  .buehne-foto{display:block;align-self:stretch;min-height:100%;
    background:url("bilder/raum-hell.jpg") center 38%/cover no-repeat}
}

/* ── Abschnitte ───────────────────────────────────────── */
section{padding:clamp(60px,8.5vw,104px) 0}
/* Der Kopf klebt oben und ist rund 86 px hoch. Ohne diese Zeile rutscht die
   Vorzeile jedes Abschnitts beim Sprung unter den Kopf. */
section[id]{scroll-margin-top:92px}
.mitte{text-align:center;max-width:660px;margin:0 auto clamp(38px,5vw,58px)}
.creme{background:var(--creme)}
.creme-2{background:var(--creme-2)}

/* ── Saison ───────────────────────────────────────────── */
/* Saison-Band (18.09.2026): Kacheln in Reihen zu dritt, bei genau vier zu
   viert; eine angebrochene letzte Reihe steht mittig (5 = 3 + 2 mittig,
   6 = 3 + 3, 7 = 4 + 3 mittig). Tablet zu zweit, Handy einzeln. */
.saison-gitter{display:flex;flex-wrap:wrap;justify-content:center;gap:26px}
.saison-gitter .stueck{flex:0 1 calc((100% - 52px) / 3);min-width:0}
/* Vierer-Reihen nur am Rechner (15.10.2026): ohne die Medienabfrage schlug
   diese Regel (Spezifitaet 0,5,0) die Tablet-/Handy-Regeln unten (0,4,0) –
   bei genau 4 Kacheln standen am Handy 4 Spalten zu je ~60 px. */
@media(min-width:901px){
  .saison-gitter:has(> .stueck:nth-child(4):last-child) .stueck,
  .saison-gitter:has(> .stueck:nth-child(7)) .stueck{flex-basis:calc((100% - 78px) / 4)}
}
@media(max-width:900px){
  .saison-gitter .stueck,.saison-gitter:has(> .stueck:nth-child(4)) .stueck{flex-basis:calc((100% - 26px) / 2)}
}
@media(max-width:560px){
  .saison-gitter .stueck,.saison-gitter:has(> .stueck:nth-child(4)) .stueck{flex-basis:100%}
}
.stueck{background:var(--papier);border:var(--rand);border-radius:var(--rund);overflow:hidden;
        display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.stueck:hover{transform:translateY(-4px);box-shadow:0 18px 34px -22px rgba(38,48,42,.34)}
.bildslot{aspect-ratio:4/3;overflow:hidden;background:
   linear-gradient(135deg,var(--rose-hell) 0%,var(--hell) 100%);
   display:grid;place-items:center;position:relative}
.bildslot svg{width:64px;height:64px;opacity:.42}
.bildslot img,.portraet img{width:100%;height:100%;object-fit:cover;display:block}
.bildslot.gefuellt span,.portraet.gefuellt span{display:none}
.bildslot.gefuellt,.portraet.gefuellt{background:var(--hell)}
.bildslot span{position:absolute;bottom:12px;left:0;right:0;text-align:center;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gruen);
  opacity:.55;font-weight:700}
.stueck-text{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.stueck-text .marke-saison{align-self:flex-start}
.stueck-text h3{margin-bottom:7px}
.stueck-text p{font-size:14.5px;color:var(--grau);margin:0}
/* Ganze Kachel klickbar (16.09.2026): Zeiger auf Auslage-Stuecken und
   Sortiment-Kacheln; der kleine Link unter dem Auslage-Text ist das Ziel. */
.saison-gitter .stueck,.sortiment .karte{cursor:pointer}
.saison-gitter .stueck.ohne-link{cursor:default}
/* Gegenstück für Sortiment-Kacheln ohne Knopf (15.10.2026, z. B. „Kuchen &
   Torten“ mit Weiterleitung „keine“): keine Hand und kein Aufhellen beim
   Drüberfahren — ein Klick führt ja nirgends hin. Klasse setzt seite.js. */
.sortiment .karte.ohne-link{cursor:default}
.sortiment .karte.ohne-link:hover{background:var(--papier)}
.stueck-link{display:inline-block;margin-top:auto;padding-top:14px;align-self:flex-start;font-size:13.5px;font-weight:600;color:var(--rose-tief);text-decoration:none;letter-spacing:.02em}
.stueck-link::after{content:"\2192";margin-left:5px;transition:transform .2s;display:inline-block}
.stueck:hover .stueck-link::after{transform:translateX(3px)}
.stueck-link:hover{text-decoration:underline}
.marke-saison{display:inline-block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--rose-tief);background:var(--rose-hell);
  padding:4px 10px;border-radius:999px;margin-bottom:11px}
/* Vierer-Reihen bündig (15.10.2026): Im 4er-Raster ist der Text nur 142–212 px
   breit. Dort wurde „Germknödeltörtchen“ (26 px Schrift = 213 px) von
   .stueck{overflow:hidden} abgeschnitten, und die Titel einer Reihe standen
   auf zwei Höhen, weil die Marke mal ein-, mal zweizeilig ist. Darum hier:
   - Marke in eine eigene Zeile mit fester Mindesthöhe für zwei Marken-Zeilen
     (2 × 17,3 px + 8 px Innenabstand + 11 px Abstand ≈ 54 px), unten bündig
     am Titel – so beginnen alle Titel auf gleicher Höhe, egal wie lang der
     Marken-Text aus der Verwaltung ist.
   - Titel etwas kleiner (20–24 px), damit er ab ~1000 px einzeilig passt;
     darunter trennt er mit Bindestrich (lang="de"). Mindestens 5 Buchstaben
     je Teil, sonst trennt Chrome „Germknödeltört-chen“ statt „Germknödel-
     törtchen“. overflow-wrap ist der Notanker, falls ein Browser nicht trennt.
   - Link als Grid-Kind links ausrichten (sonst würde er volle Breite). */
@media(min-width:901px){
  :is(.saison-gitter:has(> .stueck:nth-child(4):last-child),.saison-gitter:has(> .stueck:nth-child(7))) .stueck-text{
    display:grid;grid-template-rows:minmax(54px,auto) auto auto 1fr}
  :is(.saison-gitter:has(> .stueck:nth-child(4):last-child),.saison-gitter:has(> .stueck:nth-child(7))) .marke-saison{
    grid-row:1;align-self:end;justify-self:start;max-width:100%;
    -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:auto 5 5;overflow-wrap:break-word}
  :is(.saison-gitter:has(> .stueck:nth-child(4):last-child),.saison-gitter:has(> .stueck:nth-child(7))) .stueck-text h3{
    grid-row:2;font-size:clamp(20px,3vw - 10px,24px);
    -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:auto 5 5;overflow-wrap:break-word}
  :is(.saison-gitter:has(> .stueck:nth-child(4):last-child),.saison-gitter:has(> .stueck:nth-child(7))) .stueck-text p{grid-row:3}
  :is(.saison-gitter:has(> .stueck:nth-child(4):last-child),.saison-gitter:has(> .stueck:nth-child(7))) .stueck-link{grid-row:4;justify-self:start}
}

/* ── Sortiment ────────────────────────────────────────── */
.sortiment{display:grid;gap:1px;background:rgba(47,91,83,.13);
           grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
           border:1px solid rgba(47,91,83,.13)}
.karte{background:var(--papier);padding:38px 32px 40px;transition:background .25s;
  display:flex;flex-direction:column}
/* „Zur Karte"-Knoepfe in den Kacheln (16.09.2026). margin-top:auto drueckt sie
   in allen vier Kacheln auf eine Hoehe, egal wie lang der Text darueber ist.
   .gedaempft = Ziel noch in Arbeit (Kuchenkarte, Eiskarte). */
.karte .knopf.klein{margin-top:auto;align-self:flex-start}
.knopf.klein{padding:10px 20px;font-size:13.5px}
.knopf.gedaempft{background:rgba(143,193,177,.32);color:var(--gruen)}
.knopf.gedaempft:hover{background:rgba(143,193,177,.5)}
.knopf small{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.8;font-weight:700}
.karte:hover{background:#fff}
.karte-num{font-family:var(--serif);font-size:34px;color:#BA7C7F;line-height:1;
           display:block;margin-bottom:16px;font-weight:300}
.karte h3{margin-bottom:11px}
.karte p{font-size:15px;color:var(--grau);margin:0 0 16px}
.karte ul{list-style:none;padding:0;margin:0;font-size:14.5px;color:var(--tinte)}
.karte li{padding:7px 0;border-top:1px dashed rgba(47,91,83,.16)}
.karte li:first-child{border-top:none}

/* ── Bestellen ────────────────────────────────────────── */
.bestellen{background:var(--salbei);color:var(--mint-tinte);position:relative;overflow:hidden}
/* 15.10.2026: Der rosa Lichtkreis saß mit der Mitte genau auf der Unterkante
   und wurde dort waagrecht abgeschnitten. Weil der Fuß darunter dasselbe
   Salbei hat, sah man auf /torte-bestellen eine harte Kante (360 und
   1440 px). Jetzt sitzt er höher und läuft nach unten weich aus: Die Maske
   macht ihn zur Unterkante hin ganz durchsichtig, es bleibt nichts zum
   Abschneiden. Die 150px der Maske gehören zu bottom:-150px — nur
   zusammen ändern. */
.bestellen::after{content:"";position:absolute;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(211,172,174,.15),transparent 66%);
  bottom:-150px;left:-180px;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,transparent 150px,#000 330px);
  mask-image:linear-gradient(to top,transparent 150px,#000 330px)}
.bestellen .wrap{position:relative;z-index:1}
.bestellen h2,.bestellen h1.wie-h2{color:var(--mint-tinte)}
.bestellen .lead{color:rgba(30,58,52,.85)}
.formular{background:rgba(251,250,245,.055);border:1px solid rgba(251,250,245,.17);
          border-radius:var(--rund);padding:clamp(26px,4vw,40px);margin-top:0}
.feldreihe{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.feld{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
/* display:flex schlägt das hidden-Attribut — ohne diese Zeile bleibt ein
   ausgeblendetes Feld sichtbar. Genau das ist beim Geschmacksfeld passiert. */
.feld[hidden]{display:none}
.feld label{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
            color:rgba(30,58,52,.92)}
.feld input,.feld select,.feld textarea{
  background:rgba(251,250,245,.94);border:1px solid transparent;border-radius:var(--rund);
  padding:13px 15px;font-family:var(--sans);font-size:15.5px;color:var(--tinte);width:100%}
.feld textarea{min-height:118px;resize:vertical}
/* 15.10.2026: Platzhalter (z. B. „z. B. 12“) standen im Browser-Grau #757575
   — auf dem Feld nur 4,3:1. --grau kommt auf 5,2, bleibt aber erkennbar
   heller als eine echte Eingabe. */
.bestellen .feld ::placeholder{color:var(--grau);opacity:1}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--rose);outline:none;
  box-shadow:0 0 0 3px rgba(211,172,174,.3)}
/* Der Pflicht-Stern: Rosa auf dem Formulargrün kam nur auf 3,0 — und im
   markierten Einwilligungskasten auf 2,5. Papier schafft überall über 4,5. */
.pflicht{color:var(--mint-tinte)}
/* 15.10.2026: .84 kam auf Salbei nur auf 4,4 — .88 sind 4,8:1. */
.hinweis{font-size:13px;color:rgba(30,58,52,.88);margin:0}
/* Satz unter der Sortiment-Überschrift — kommt aus der Verwaltung, leer = weg. */
#sortiment-hinweis{margin:14px 0 0}
#sortiment-hinweis[hidden]{display:none}
/* Einwilligungstexte, auch der nach Art. 9 DSGVO für die Allergieangaben.
   Bei .82 kamen sie auf dem rosa Kasten nur auf 3,9. Eine Einwilligung,
   die man mühsam entziffern muss, ist keine informierte Einwilligung. */
.zustimmung{display:flex;gap:12px;align-items:flex-start;margin:6px 0 24px;
            font-size:13.5px;color:rgba(30,58,52,.95);line-height:1.55}
.zustimmung input{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--rose-tief)}
.zustimmung a{color:var(--mint-tinte);text-decoration:underline;text-underline-offset:2px}
.merkzettel{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
            margin:34px 0 0;padding:0;list-style:none}
.merkzettel li{background:rgba(251,250,245,.07);border-left:2px solid var(--rose);
               padding:15px 18px;font-size:14px;color:rgba(30,58,52,.88);line-height:1.5}
.merkzettel b{display:block;color:var(--mint-tinte);font-size:12px;letter-spacing:.14em;
              text-transform:uppercase;margin-bottom:5px;font-weight:700}

/* ── Wunschtorte und Hochzeit: Auswahlknöpfe (16.09.2026) ──────
   Die Fragen aus Katharinas Tortenheft stehen als Knopfgruppen auf dem
   Salbei der Bestellseite. Ausgewählt = Papier mit rosa Ring, damit man
   es auch ohne Farbunterschied erkennt (wichtig bei Farbenblindheit).
   Die Knöpfe sind echte <button aria-pressed>, kein CSS-Trick mit
   versteckten Häkchen — dadurch liest jeder Vorleser den Zustand vor. */
.wunsch-block{margin:0 0 clamp(20px,2.6vw,28px)}
/* 15.10.2026: Die Fragen sind jetzt h2 statt h4 (unter der h1 auf
   /torte-bestellen sprang die Gliederung um zwei Stufen). letter-spacing
   erbt wie früher die h4 — sonst zöge die allgemeine h2-Regel sie enger. */
.wunsch-titel{font-family:var(--serif);font-weight:400;font-size:19px;
  color:var(--mint-tinte);margin:0 0 10px;line-height:1.3;letter-spacing:inherit}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  border:0;cursor:pointer;border-radius:14px;padding:10px 15px;
  background:rgba(251,250,245,.5);color:var(--mint-tinte);
  box-shadow:inset 0 0 0 1px rgba(30,58,52,.14);
  font:600 14px/1.25 var(--sans);text-align:left;
  transition:background .18s,box-shadow .18s}
/* 15.10.2026: opacity .72 = 4,3:1 auf dem Knopf, .8 = 5,2:1. */
.chip small{font-weight:500;font-size:11.5px;opacity:.8;letter-spacing:.01em}
.chip:hover{background:rgba(251,250,245,.75)}
.chip[aria-pressed=true]{background:var(--papier);
  box-shadow:inset 0 0 0 2px var(--rose-tief)}
.chip:focus-visible{outline:2px solid var(--rose-tief);outline-offset:2px}
/* 15.10.2026: .78 = 3,9:1 auf Salbei, zu blass für 13 px — .88 = 4,8:1.
   Darin steht der Mandel-Hinweis, der muss lesbar sein. */
.chip-notiz{margin:10px 0 0;font-size:13px;line-height:1.55;
  color:rgba(30,58,52,.88);max-width:640px}
.chip-notiz a{color:var(--mint-tinte);text-decoration:underline;text-underline-offset:2px}
.chip-notiz b{color:var(--mint-tinte)}
.feld.schmal{max-width:360px}
/* Inspirationsbilder im Bestellformular (16.09.2026). */
.bild-feld{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bild-waehlen{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
  border-radius:999px;padding:11px 20px;background:var(--papier);color:var(--mint-tinte);
  font:600 14px var(--sans);transition:background .18s}
.bild-waehlen svg{width:17px;height:17px}
.bild-waehlen:hover{background:#fff}
.bild-waehlen[disabled]{opacity:.5;cursor:default}
/* 15.10.2026: .8 = 4,1:1 auf Salbei, .88 = 4,8:1. */
.bild-stand{font-size:13px;color:rgba(30,58,52,.88)}
.bild-stand.schiefgelaufen{color:#6E3538;font-weight:600;max-width:420px;line-height:1.5}
.bild-vorschau{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 0}
.bild-vorschau:empty{margin:0}
.bild-kachel{position:relative;margin:0;width:104px;height:104px;border-radius:12px;
  overflow:hidden;background:var(--papier);box-shadow:0 2px 10px rgba(38,48,42,.14)}
.bild-kachel img{width:100%;height:100%;object-fit:cover;display:block}
.bild-weg{position:absolute;top:4px;right:4px;width:26px;height:26px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(30,58,52,.72);color:var(--papier);
  font:700 17px/1 var(--sans);display:grid;place-items:center}
.bild-weg:hover{background:rgba(30,58,52,.9)}
.feld.schmal[hidden]{display:none}

/* ── Zeitstrahl auf „Seit 1887" (15.09.2026, neu geordnet am 15.10.2026) ──
   Am Handy eine Spalte, die Linie links. Ab 1000 px ist jede Station eine
   Reihe: Text auf der einen, Bilder auf der anderen Seite der Linie, im
   Wechsel (:nth-child — darum ist jede Station genau ein <li>).
   15.10.2026, Katharina: „dass alle Fotos ungefähr die gleiche Größe haben“.
   Darum hat jetzt JEDES Bild einer Station dasselbe Format: quer 4:3 oder
   hoch 3:4 (data-format an der Station), der Rest wird sauber abgeschnitten
   (object-fit:cover — für sie ausdrücklich in Ordnung). Zwei Bilder stehen
   gleich groß nebeneinander, ein drittes gleich groß mittig darunter, ein
   einzelnes etwas größer, aber nicht mehr bildschirmbreit. Die Station
   „Heute“ mit eigener Sonderform ist auf ihren Wunsch weggefallen.
   Die Aufnahmen liegen in einem weißen Rahmen wie ein aufgelegter Abzug. */
.zeitstrahl{list-style:none;margin:clamp(30px,4vw,48px) auto 0;padding:0;
  max-width:760px;position:relative}
.zeitstrahl::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;
  width:1px;background:var(--linie)}
.zs-punkt{position:relative;padding:0 0 clamp(34px,4vw,46px) clamp(30px,4vw,40px)}
.zs-punkt::before{content:"";position:absolute;left:0;top:14px;width:15px;height:15px;
  border-radius:50%;background:var(--papier);box-shadow:inset 0 0 0 2px var(--salbei)}
.zs-punkt:last-child{padding-bottom:0}
/* .zs-text .zs-jahr und nicht nur .zs-jahr: Die Jahreszahl ist ein <p>, und
   .zs-text p steht weiter unten — mit gleicher Spezifitaet gewinnt die spaetere
   Regel. Am 15.09.2026 stand die Jahreszahl deshalb erst in 15 px da. */
.zs-text .zs-jahr{margin:0 0 3px;font-family:var(--serif);font-weight:400;
  font-size:clamp(23px,4.4vw,33px);line-height:1.08;letter-spacing:-.01em;
  color:var(--rose-tief)}
.zs-text h3{font-family:var(--sans);font-weight:700;font-size:12px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gruen);
  margin:0 0 10px;line-height:1.45}
.zs-text p{margin:0;color:var(--grau);line-height:1.7;font-size:15px}
.zs-text .zs-link{margin-top:12px}
.zs-link a{color:var(--rose-tief);font-weight:600;font-size:14px;text-decoration:none;
  border-bottom:1px solid rgba(169,94,98,.35);padding-bottom:1px}
.zs-link a:hover{border-bottom-color:var(--rose-tief)}
.zs-bilder{margin:16px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;max-width:460px}
.zs-bilder[data-anzahl="1"]{grid-template-columns:minmax(0,1fr);max-width:340px}
.zs-punkt[data-format="hoch"] .zs-bilder[data-anzahl="1"]{max-width:250px}
.zs-bilder[data-anzahl="3"] figure:nth-child(3){grid-column:1 / -1;justify-self:center;
  width:calc(50% - 6px)}
.zs-bilder figure{margin:0;background:#fff;padding:8px 8px 10px;border-radius:3px;
  box-shadow:0 3px 14px rgba(38,48,42,.10)}
.zs-bilder img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:1px}
.zs-punkt[data-format="hoch"] .zs-bilder img{aspect-ratio:3/4}

@media(min-width:1000px){
  .zeitstrahl{max-width:1120px;display:flex;flex-direction:column;
    gap:clamp(46px,5vw,72px)}
  /* Die Linie läuft in der Mitte und wird unten weich ausgeblendet. */
  .zeitstrahl::before{left:50%;transform:translateX(-50%);top:0;bottom:0;
    background:linear-gradient(to bottom,var(--linie) 0,
      var(--linie) calc(100% - 90px),rgba(47,91,83,0) 100%)}
  .zs-punkt{display:grid;grid-template-columns:1fr 1fr;column-gap:78px;
    align-items:center;padding:0;width:auto}
  .zs-punkt::before{left:50%;top:50%;transform:translate(-50%,-50%)}
  /* grid-row:1 ist Pflicht: Ohne sie rutscht bei den geraden Stationen das
     Bild in eine zweite Reihe (gemessen am 15.09.2026). */
  .zs-text{max-width:450px;grid-row:1}
  .zs-bilder{margin:0;grid-row:1;width:100%;max-width:521px}
  .zs-bilder[data-anzahl="1"]{max-width:330px}
  .zs-punkt[data-format="hoch"] .zs-bilder[data-anzahl="1"]{max-width:254px}
  /* Ungerade Station: Text links vom Strich, Bilder rechts. */
  .zs-punkt:nth-child(odd) .zs-text{grid-column:1;justify-self:end;text-align:right}
  .zs-punkt:nth-child(odd) .zs-bilder{grid-column:2;justify-self:start}
  /* Gerade Station: Bilder links, Text rechts. */
  .zs-punkt:nth-child(even) .zs-text{grid-column:2;justify-self:start;text-align:left}
  .zs-punkt:nth-child(even) .zs-bilder{grid-column:1;justify-self:end}
}

/* Einstieg auf „Seit 1887“: der Gruß zwischen Zitat und Name (15.10.2026). */
.geschichte-gruss{margin:-4px 0 8px;padding-left:24px;color:var(--grau);font-size:16px}
#geschichte [hidden],#zeitstrahl [hidden]{display:none}

/* ── Karte auf der Finden-Seite (15.09.2026) ───────────
   Vor dem Klick ist die Fläche ein ruhiger Kasten mit Nadel und
   Adresse, danach liegt die Leaflet-Karte darin. Gleiche Höhe in
   beiden Zuständen, damit beim Laden nichts springt. */
.karte-ort{margin-top:24px}
.karte-flaeche{height:280px;border-radius:14px;overflow:hidden;
  background:var(--creme);border:1px solid var(--linie);position:relative}
.karte-start{position:absolute;inset:0;width:100%;border:none;background:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  font:inherit;color:var(--gruen);cursor:pointer;padding:20px;text-align:center}
.karte-start:hover{background:rgba(143,193,177,.12)}
.karte-start svg{width:34px;height:34px}
.karte-start b{display:block;font-size:15px;margin-bottom:3px}
.karte-start span{font-size:13.5px;color:var(--grau);line-height:1.5}
.karte-start[disabled]{cursor:default}
.karte-wege{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:12px}
.karte-fussnote{margin:0;font-size:12px;line-height:1.5;color:var(--grau);flex:1 1 220px}
.knopf-klein{padding:10px 18px;font-size:13.5px}
.knopf-klein svg{width:16px;height:16px}
/* Leaflet bringt eigene Schrift und eigene Rundungen mit. */
.leaflet-container{font-family:var(--sans);font-size:13px;background:var(--creme)}
.leaflet-popup-content{font-size:13.5px;line-height:1.55;margin:11px 14px}
.leaflet-popup-content b{font-family:var(--serif);font-weight:400;font-size:16px}
.karte-nadel svg{width:34px;height:34px;fill:var(--gruen);
  filter:drop-shadow(0 2px 3px rgba(38,48,42,.35))}

/* ── Bestellungen ausgesetzt (15.09.2026) ──────────────
   Steht im dunkelgrünen Bestellbereich, deshalb helle Schrift und
   der helle Knopf; der zweite bekommt nur einen Rand, damit die
   beiden Wege nicht gleich laut sind. */
.bestell-aus{max-width:620px;margin:0 auto;text-align:center}
.bestell-aus-text{font-family:var(--serif);font-size:clamp(19px,2.4vw,24px);
  line-height:1.45;color:var(--mint-tinte);margin:0 0 18px}
.bestell-aus-lead{font-size:15px;color:rgba(30,58,52,.85);margin:0 0 26px}
.bestell-aus-wege{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
/* 15.10.2026: Die Adresszeile kam mit .75 auf dem Salbei nur auf 3,7:1 —
   zu blass für 14-px-Schrift (nötig 4,5). Mit .9 wie die Links im Fuß:
   5,0, auch über dem rosa Lichtkreis noch 5,0. */
.bestell-aus-fuss{margin:26px 0 0;font-size:14px;color:rgba(30,58,52,.9)}
.knopf-rand{background:none;color:var(--mint-tinte);box-shadow:inset 0 0 0 1px rgba(30,58,52,.5)}
.knopf-rand:hover{background:rgba(30,58,52,.08)}

/* ── Geschichte ───────────────────────────────────────── */
.geschichte{display:grid;gap:clamp(34px,5vw,64px);align-items:center;
            grid-template-columns:1fr 1fr}
@media(max-width:860px){.geschichte{grid-template-columns:1fr}}
.portraet{aspect-ratio:4/5;background:linear-gradient(150deg,var(--hell),var(--rose-hell));
          display:grid;place-items:center;position:relative;border-radius:var(--rund)}
.portraet svg{width:88px;height:88px;opacity:.4}
.portraet span{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gruen);opacity:.6;font-weight:700}
figure.portraet{margin:0;overflow:hidden}
.portraet figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;
  background:linear-gradient(180deg,transparent,rgba(35,67,60,.72));color:var(--papier);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;text-align:center}
.portraet.gefuellt img{width:100%;height:100%;object-fit:cover;display:block}
.zitat{font-family:var(--serif);font-size:clamp(23px,3.1vw,31px);font-style:italic;
       font-weight:300;color:var(--gruen);line-height:1.4;margin:28px 0 14px;
       padding-left:22px;border-left:2px solid var(--rose)}
.zitat-quelle{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
              color:var(--grau);font-weight:600;padding-left:24px}

/* ── Termine ──────────────────────────────────────────── */
.termin{display:flex;gap:26px;align-items:center;background:var(--papier);
        border:var(--rand);border-radius:var(--rund);padding:26px 30px;flex-wrap:wrap}
.datum{text-align:center;flex-shrink:0;min-width:76px}
.datum b{display:block;font-family:var(--serif);font-size:42px;font-weight:400;
         color:var(--gruen);line-height:1}
.datum span{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
            color:var(--rose-tief);font-weight:700;margin-top:5px}
.termin-text{flex:1;min-width:200px}
.termin-text h3{margin-bottom:5px}
.termin-text p{margin:0;font-size:14.5px;color:var(--grau)}

/* ── Finden ───────────────────────────────────────────── */
.aussenband{margin:0 0 clamp(34px,5vw,54px);border-radius:var(--rund);overflow:hidden;
  box-shadow:0 22px 44px -30px rgba(38,48,42,.5)}
.aussenband img{width:100%;height:clamp(210px,32vw,380px);object-fit:cover;display:block}
.finden{display:grid;gap:clamp(30px,4.5vw,54px);grid-template-columns:1.05fr 1fr}
@media(max-width:860px){.finden{grid-template-columns:1fr}}
.daten{list-style:none;padding:0;margin:26px 0 0}
.daten li{display:flex;gap:18px;padding:17px 0;border-top:var(--rand)}
.daten li:first-child{border-top:none;padding-top:0}
.daten svg{width:21px;height:21px;flex-shrink:0;color:var(--rose-tief);margin-top:2px}
.daten b{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
         color:var(--grau);font-weight:700;margin-bottom:4px}
.daten a{color:var(--gruen);text-decoration:none;border-bottom:1px solid rgba(47,91,83,.28)}
.daten a:hover{border-bottom-color:var(--rose-tief)}
.zeiten{background:var(--papier);border:var(--rand);border-radius:var(--rund);padding:30px 32px}
.zeiten h3{margin-bottom:20px}
.zeit-zeile{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
            border-top:1px dashed rgba(47,91,83,.16);font-size:15px}
.zeit-zeile:first-of-type{border-top:none}
.zeit-zeile.heute{font-weight:700;color:var(--gruen)}
.zeit-zeile.heute::after{content:"heute";font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;background:var(--rose-hell);color:var(--rose-tief);
  padding:3px 9px;border-radius:999px;align-self:center;order:1}
/* 15.10.2026: Das Abzeichen ist ein drittes Flex-Teil. Mit space-between
   rutschte die Uhrzeit von heute dadurch in die Mitte und brach am Handy
   um („9:00 –“ / „18:00“). Jetzt sitzt das Abzeichen direkt hinter dem Tag,
   die Uhrzeit bleibt am Stück und steht per margin-left:auto rechtsbündig
   wie bei den anderen Tagen. Reicht die Breite selbst dafür nicht (unter
   ~360 px), rutscht sie ganz, rechtsbündig, in eine zweite Zeile. */
.zeit-zeile.heute{flex-wrap:wrap;gap:2px 8px}
.zeit-zeile.heute span:last-child{order:2;margin-left:auto;white-space:nowrap}
.anfahrt{margin-top:26px;padding-top:24px;border-top:var(--rand);font-size:14.5px;color:var(--grau)}
.anfahrt b{color:var(--tinte);display:block;margin-bottom:8px;font-size:11px;
           letter-spacing:.18em;text-transform:uppercase}

/* ── Fuß ──────────────────────────────────────────────── */
footer{background:var(--salbei);color:rgba(30,58,52,.85);padding:56px 0 30px;font-size:14px}
/* Der Fuß stand linksbündig und ließ rechts eine Lücke. Jetzt sitzen die
   vier Spalten als Block in der Mitte, jede für sich zentriert. Flexbox
   statt Grid, weil die Spalten dabei nur so breit werden, wie ihr Inhalt
   braucht — ein Grid mit 1fr würde sie wieder auseinanderziehen. */
/* align-items:center — die vier Spalten sind verschieden hoch (Seiten hat
   sechs Zeilen, Kontakt drei). Ohne diese Zeile haengen alle oben und der
   Fuss wirkt unten ausgefranst; jetzt liegen sie auf einer gemeinsamen
   Mittelachse. */
.fuss-gitter{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
             gap:34px clamp(30px,5vw,72px);text-align:center;
             padding-bottom:34px;border-bottom:1px solid rgba(30,58,52,.14)}
.fuss-gitter > div{min-width:170px}
/* "Seiten" hat sechs Eintraege und war doppelt so hoch wie der Rest; darum
   stehen sie in zwei Spalten. align-items:stretch (14.09.2026) macht alle
   vier Spalten gleich hoch, dadurch beginnt jede oben und die vier
   Ueberschriften stehen auf EINER Linie - vorher waren die Spalten mittig
   ausgerichtet und die kurze erste Spalte sass tiefer. Stretch und nicht
   flex-start, weil die Trennstriche unten mit top:50% in der Spalte sitzen:
   nur bei gleicher Spaltenhoehe liegen auch sie auf einer Linie. Dazwischen
   duenne Trennstriche, feste Hoehe (nicht Spaltenhoehe, sonst waeren sie
   verschieden lang). Sobald die Spalten umbrechen, sind die Striche weg -
   sonst staenden sie quer im gestapelten Fuss. */
.fuss-gitter > div:last-child{min-width:240px}
.fuss-gitter > div:last-child ul{columns:2;column-gap:30px}
.fuss-gitter > div + div{position:relative}
.fuss-gitter > div + div::before{content:'';position:absolute;
  left:calc(clamp(30px,5vw,72px) / -2);top:50%;transform:translateY(-50%);
  width:1px;height:96px;background:rgba(30,58,52,.18)}
/* 1120 und nicht 1040: gemessen bricht die Reihe schon bei rund 1096 px
   Fensterbreite um. Bei 1040 haetten die Striche zwischen 1041 und 1096
   quer im umgebrochenen Fuss gestanden. */
@media(max-width:1120px){.fuss-gitter > div + div::before{display:none}}
/* 15.10.2026: Die Spaltentitel sind jetzt h2 statt h4 (Gliederung sprang
   von h1/h2 auf h4). Die allgemeine h2-Regel oben würde sie riesig, dünn und
   eng setzen — darum hier alles, was sie verstellt, ausdrücklich zurück:
   line-height und letter-spacing erbt der Titel wie früher die h4 vom Fuß. */
footer .fuss-titel{font-family:var(--serif);font-size:19px;font-weight:400;color:var(--mint-tinte);margin:0 0 14px;
  line-height:inherit;letter-spacing:inherit}
/* 15.10.2026: Fuß-Links und ©-Zeile standen auf Deckkraft .82 bzw. .72 —
   auf Salbei nur 4,3 und 3,5 (nötig 4,5). Jetzt überall .9 = 5,0:1.
   Bewusst nicht volle Tinte (6,1): dann wäre der Fuß so laut wie die
   Überschriften, und der Hover-Ton --gruen-tief (5,4) wäre heller als
   der Normalzustand. Die Werte unten und bei :visited gehören dazu. */
footer a{color:rgba(30,58,52,.9);text-decoration:none}
/* Tippziele: die Fußzeilen-Links waren 19 px hoch, am Handy zu knapp. */
footer ul a,.fuss-unten nav a{display:inline-block;padding:4px 0}
footer a:hover{color:var(--gruen-tief);text-decoration:underline;text-underline-offset:3px}
footer ul{list-style:none;padding:0;margin:0}
footer li{padding:5px 0}
.fuss-unten{display:flex;justify-content:center;align-items:center;gap:10px 26px;flex-wrap:wrap;
            padding-top:24px;font-size:12.5px;color:rgba(30,58,52,.9);text-align:center}
.fuss-unten nav{display:flex;gap:20px;position:static;transform:none;padding:0;
                background:none;flex-direction:row;box-shadow:none;border:none}
/* Impressum und Datenschutz waren 21 Pixel hohe Tippziele. */
.fuss-unten nav a{font-size:12.5px;border:none;padding:9px 4px;margin:-9px -4px;
  color:rgba(30,58,52,.9)}

/* ── Sortimentbilder ──────────────────────────────────── */
@media(min-width:900px){.sortiment{grid-template-columns:1fr 1fr}}
/* Bildrahmen fuellen (20.09.2026, Darius: „die oberen Kanten sind
   verschoben"). bauen.py und seite.js verpacken jedes Bild in <picture> —
   damit ist das <picture> das Gitterkind, nicht das <img>. height:100% am
   Bild lief deshalb ins Leere: Jedes Bild behielt sein eigenes
   Seitenverhaeltnis, die Rahmen waren unterschiedlich hoch und die Kanten
   standen versetzt. Die Zeile hier gibt dem <picture> die volle Flaeche,
   object-fit:cover am Bild schneidet den Rest sauber ab. */
.bildslot > picture,.karte-bild > picture,.torte-bild > picture,.portraet > picture{
  display:block;position:absolute;inset:0}
/* Dasselbe fuer Fotos aus der Verwaltung: Die kommen ohne <picture> als
   schlichtes <img>. Im Raster (display:grid) greift height:100% nicht, das
   Bild nahm seine eigene Hoehe (Hochformat = viel zu hoch) und wurde oben
   abgeschnitten — der in der Verwaltung gewaehlte Ausschnitt (object-position)
   wirkte dadurch nicht. Absolut gesetzt fuellt es genau den Rahmen. */
.bildslot > img,.karte-bild > img,.torte-bild > img,.portraet > img{
  position:absolute;inset:0}
/* 3/2 statt 16/9: Die Kachelfotos sind im Original 3/2 — so wird fast nichts
   weggeschnitten und die Bilder stehen etwas grosszuegiger. */
.karte-bild{aspect-ratio:3/2;overflow:hidden;margin:-38px -32px 26px;position:relative;
  background:linear-gradient(135deg,var(--rose-hell) 0%,var(--hell) 100%);
  display:grid;place-items:center;overflow:hidden}
.karte-bild.gefuellt{background:var(--hell)}
.karte-bild img{width:100%;height:100%;object-fit:cover;display:block}
.karte-bild span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gruen);opacity:.55;font-weight:700}

/* ── Speisekarte ──────────────────────────────────────── */
/* Aufbau nach dem Vorbild boheme-schwabing.de: große Überschrift in
   Versalien, darunter die Sprungleiste, dann zwei Spalten. Pro Position
   der Name in Versalien in der Akzentfarbe, darunter die Beschreibung
   und darunter der Preis, alles mittig. Farben bleiben Grün und Rosé —
   das Muster ist von dort, die Handschrift von hier. */

.karte-titelband{text-align:center;margin:0 0 clamp(26px,4vw,40px);
  scroll-margin-top:96px}
/* Der Abstand gilt für alle vier Reiter-Adressen (#kuchenkarte,
   #fruehstueckskarte, #mittagskarte, #eiskarte): seite.js (ausAdresse)
   scrollt dann zu diesem Band, sonst läge es unter der Kopfleiste (16.09.).
   15.10.2026: Darum trägt kein Element eine dieser Adressen als id — der
   Kuchen-Block hieß „kuchenkarte“, der Browser sprang nach dem Skript noch
   selbst dorthin, und die Reiter rutschten unter die Kopfleiste. */
.karte-titelband h2,.karte-titelband h1.wie-h2{font-family:var(--sans);font-weight:800;
  font-size:clamp(27px,5vw,44px);letter-spacing:.02em;text-transform:uppercase;
  color:var(--rose-tief);margin:0 0 18px;line-height:1.1}

.karte-sprung{display:flex;flex-wrap:wrap;justify-content:center;
  gap:6px 4px;max-width:820px;margin:0 auto;font-size:13.5px;line-height:1.7}
.karte-sprung a{color:var(--grau);text-decoration:underline;
  text-underline-offset:3px;padding:0 7px;white-space:nowrap}
.karte-sprung a:hover{color:var(--rose-tief)}
.karte-sprung span{color:var(--linie);user-select:none;align-self:center}
/* 15.10.2026: align-self — am Handy haben die Links 11 px Polsterung
   (pointer:coarse), der Strich nicht; er stand deshalb oben über der
   Schriftlinie. zeilenende setzt seite.js (sprungZeilen) an Striche,
   bei denen die Zeile umbricht — sonst hing einer allein am Zeilenende.
   visibility statt display, damit sich der Umbruch nicht verschiebt. */
.karte-sprung span.zeilenende{visibility:hidden}
.karte-sprung[hidden],.karte-sprung a[hidden],.karte-sprung span[hidden]{display:none}

.karte-gruppe{margin:0 0 clamp(44px,6vw,74px);scroll-margin-top:96px}
.karte-gruppe + .karte-gruppe{padding-top:clamp(38px,5vw,58px);
  border-top:1px solid rgba(169,94,98,.26)}
.karte-titel{font-family:var(--sans);font-weight:800;text-align:center;
  font-size:clamp(20px,3vw,28px);letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinte);margin:0 0 clamp(26px,3.4vw,38px);line-height:1.2}
/* Der Satz über einem Abschnitt. Seit dem 14.09.2026 stehen dort auch
   die Aufpreise aus der gedruckten Karte — drei Sätze am Stück. Ohne
   Breitenbegrenzung liefe das über die volle Fensterbreite. */
.karte-hinweis{text-align:center;margin:-20px auto 30px;font-size:13px;
  letter-spacing:.04em;color:var(--grau);max-width:660px;line-height:1.65}

.karte-liste{display:grid;grid-template-columns:1fr;
  gap:clamp(26px,3.4vw,40px) clamp(32px,5vw,80px);
  max-width:940px;margin:0 auto}
@media(min-width:760px){.karte-liste{grid-template-columns:1fr 1fr}}

.speise{text-align:center}
/* 15.10.2026: Auf /karte sind die Gerichte h3 statt h4 (bauen.py,
   hochstufen — sonst sprang die Gliederung von h1 auf h3). Die Klasse
   wie-h4 hält sie hier und in den knapp-Regeln unten gleich: ohne sie
   bekämen sie die Serifenschrift der allgemeinen h3-Regel. */
.speise h4,.speise .wie-h4{font-family:var(--sans);font-weight:700;font-size:14px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--rose-tief);
  margin:0 0 7px;line-height:1.35}
.speise p{margin:0;color:var(--tinte);font-size:14.5px;line-height:1.6;opacity:.88}
.speise-preis{display:block;margin-top:8px;font-weight:700;font-size:15.5px;
  color:var(--tinte)}
.speise-mass{display:block;margin-top:6px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grau)}

/* Abschnitte ohne Beschreibungen (Getränke): Name links, Preis rechts,
   dazwischen eine Punktlinie — wie auf einer gedruckten Karte. Vorher
   standen die Posten zentriert im Flussumbruch, das ergab je nach
   Namenslänge ein ausgefranstes Dreieck (Darius, 16.09.: „soll das ein
   Herz sein?"). Zwei Spalten ab 760 px, darunter eine. */
.karte-liste.knapp{display:grid;grid-template-columns:1fr;
  gap:9px clamp(32px,5vw,72px);max-width:900px}
@media(min-width:760px){.karte-liste.knapp{grid-template-columns:1fr 1fr}}
/* 15.10.2026: Brach ein langer Name um (am Handy z. B. „Tafelwasser still /
   Sprudel 0,2 l"), stand der Preis neben Zeile 1 und von der Punktlinie blieb
   nur ein Stummel rechts unter Zeile 2. Jetzt zieht der Name die Punkte selbst
   hinter seinem letzten Wort her (h4::after), und Name und Preis teilen sich
   die Schriftlinie der LETZTEN Zeile (last baseline; ohne Unterstützung gilt
   die erste wie bisher). Einzeilige Posten sehen pixelgleich aus wie vorher. */
.karte-liste.knapp .speise{display:grid;grid-template-columns:1fr auto;
  column-gap:10px;align-items:baseline;align-items:last baseline;align-content:start;text-align:left}
/* align-content:start: Die Kacheln einer Reihe sind gleich hoch. Ohne die Zeile
   dehnt sich die erste Zeile des Nachbarn mit und die Punktlinie rutscht
   unter den Namen (gesehen am 16.09. bei Himbeer Eistee neben Maracuja). */
/* padding-right 24px = früher 14 px Mindest-Punktlinie + 10 px Lücke: Namen
   brechen bei genau derselben Länge um wie vorher. overflow schneidet die
   überlange Punktlinie am Spaltenrand ab (clip, weil hidden einen Scrollbereich
   machen würde; hidden nur für alte Browser). */
.karte-liste.knapp .speise h4,.karte-liste.knapp .speise .wie-h4{margin:0;grid-column:1;grid-row:1;line-height:1.4;
  padding-right:24px;overflow:hidden;overflow:clip}
/* Netto 0 px breit (100vw Linie, dieselbe Strecke als negativer Rand zurück),
   darum rutscht sie nie in eine eigene Zeile. -2.07px legt sie gemessen genau
   dorthin, wo die alte Linie lag (knapp unter der Schriftlinie). */
.karte-liste.knapp .speise h4::after,.karte-liste.knapp .speise .wie-h4::after{content:"";display:inline-block;width:100vw;height:0;
  margin:0 calc(-100vw - 10px) 0 10px;vertical-align:-2.07px;
  border-bottom:1px dotted rgba(169,94,98,.45)}
.karte-liste.knapp .speise-preis{grid-column:2;grid-row:1;margin:0;white-space:nowrap}
/* Eine kurze Beschreibung (z. B. „Ingwer, Karotte, Apfel, Orange") steht
   darunter über die ganze Breite. */
.karte-liste.knapp .speise p{grid-column:1 / -1;grid-row:2;margin:1px 0 0;font-size:13px;opacity:.8}
.karte-liste.knapp .speise-mass{grid-column:1 / -1;grid-row:3;margin:2px 0 0}

.karte-fuss{text-align:center;max-width:620px;margin:0 auto;
  font-size:13.5px;line-height:1.65;color:var(--grau)}
/* Vier Karten wie die vier Kacheln (16.09.2026, Darius): Jeder Abschnitt,
   jeder Sprungeintrag und jeder feste Block traegt data-karte = kuchen |
   fruehstueck | mittag | eis. #karte-inhalt.zeigt-<karte> (seite.js) blendet
   alles aus, was nicht zu dieser Karte gehoert. Ohne JavaScript steht alles
   untereinander. */
.karte-block{margin:0 0 clamp(44px,6vw,74px);scroll-margin-top:96px;
  padding-top:clamp(38px,5vw,58px);border-top:1px solid rgba(169,94,98,.26)}
.karte-block .karte-hinweis{margin-top:-14px;font-size:14.5px}
.karte-block .karte-hinweis b{color:var(--tinte)}
/* .erster = steht direkt unter den Reitern: keine Trennlinie, weniger Luft. */
.karte-block.erster{border-top:none;padding:clamp(10px,2vw,20px) 0 0}
.karte-block.erster .karte-hinweis{font-size:15.5px;max-width:560px}
#karte-inhalt.zeigt-kuchen [data-karte]:not([data-karte="kuchen"]):not(.reiter),
#karte-inhalt.zeigt-fruehstueck [data-karte]:not([data-karte="fruehstueck"]):not(.reiter),
#karte-inhalt.zeigt-mittag [data-karte]:not([data-karte="mittag"]):not(.reiter),
#karte-inhalt.zeigt-eis [data-karte]:not([data-karte="eis"]):not(.reiter){display:none}
/* Eissaison: ausserhalb (.eis-aus) sind die Eis-Abschnitte weg, nur der
   Kasten #eiskarte-aus steht da (seite.js nimmt ihm das hidden). */
#karte-inhalt.eis-aus .karte-gruppe[data-karte="eis"],
#karte-inhalt.zeigt-eis.eis-aus .karte-fuss{display:none}
/* Sprungleiste im Eis-Reiter ausserhalb der Saison weg (15.10.2026):
   dort stehen nur „Eisbecher | Eisgetränke“, deren Ziele oben ausgeblendet
   sind — ein Klick täte nichts. Per CSS, weil saisonStellen() auch ohne
   sprungStellen() läuft (Einstellungen kommen später) und so nichts verpasst. */
#karte-inhalt.zeigt-eis.eis-aus .karte-sprung{display:none}
/* Zeitpläne (15.10.2026): Sind alle vier Karten ausgeblendet, setzt
   seite.js .karten-aus — dann bleiben nur Überschrift und der Satz
   .karte-leer („Unsere Karte wird gerade überarbeitet …“) statt leerer
   Reiter. Einzelne ausgeblendete Reiter tragen hidden. */
#karte-inhalt.karten-aus [data-karte]:not(.reiter),
#karte-inhalt.karten-aus .karten-reiter,
#karte-inhalt.karten-aus .karte-sprung,
#karte-inhalt.karten-aus .karte-fuss{display:none}
.karte-leer{margin:0 auto clamp(20px,3vw,34px);font-size:15.5px;max-width:560px}
.karte-eis-wege{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.karten-reiter{margin:0 0 22px}


/* Die Reiter stammen aus der alten PDF-Fassung der Karte.
   Sie werden nicht mehr benutzt, bleiben aber stehen, falls die
   PDF-Fassung je zurueckkommt. */
.karten-reiter{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.reiter{font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer;
  padding:11px 22px;border-radius:999px;border:1px solid rgba(47,91,83,.22);
  background:var(--papier);color:var(--gruen);transition:background .2s,color .2s,border-color .2s}
.reiter:hover{border-color:var(--rose-tief)}
.reiter.aktiv{background:var(--salbei);color:var(--mint-tinte);border-color:var(--salbei)}
/* Vier Reiter am Handy (16.09.2026): zwei Reihen zu zweit statt drei und
   einer. Steht bewusst HINTER der display:flex-Regel darueber. */
@media(max-width:520px){
  .karten-reiter{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .reiter{padding:11px 8px;font-size:13.5px}
}
.karten-buehne{border:var(--rand);border-radius:var(--rund);background:var(--papier);overflow:hidden}
.karten-buehne object{display:block;width:100%;height:min(78vh,880px);border:0;background:var(--hell)}
.karten-notfall{display:none;padding:44px 28px;text-align:center}
.karten-notfall svg{width:52px;height:52px;color:var(--rose-tief);opacity:.7;margin:0 auto 16px;display:block}
.karten-notfall p{margin:0 0 20px;color:var(--grau);font-size:15px}
@media(max-width:820px){
  .karten-buehne object{display:none}
  .karten-notfall{display:block}
  .karten-fuss{display:none}
}
.karten-fuss{display:flex;justify-content:center;margin-top:18px}
.karten-fuss a{font-size:13.5px;color:var(--gruen);text-decoration:none;
  border-bottom:1px solid rgba(47,91,83,.3);padding-bottom:2px}
.karten-fuss a:hover{border-bottom-color:var(--rose-tief)}

/* ── Torte bestellen: Wahlleiste oben, dann ein Bereich ── */
.wahlleiste-reihe{display:flex;justify-content:center;margin-bottom:clamp(22px,3vw,32px)}
.wahlleiste{display:inline-flex;gap:4px;padding:5px;border-radius:999px;
  background:rgba(251,250,245,.42);border:1px solid rgba(30,58,52,.14);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);max-width:100%}
.wahl{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:none;cursor:pointer;border-radius:999px;padding:12px clamp(16px,2.4vw,28px);
  /* 15.10.2026: inaktive Reiter .72 = 4,1:1 auf der hellen Leiste, .8 = 5,0.
     Hover bleibt volle Tinte, der Unterschied ist weiter sichtbar. */
  background:transparent;color:rgba(30,58,52,.8);font-family:var(--sans);
  font-size:clamp(13px,1.5vw,14.5px);font-weight:600;letter-spacing:.01em;
  white-space:nowrap;transition:background .22s,color .22s}
.wahl svg{width:18px;height:18px;flex-shrink:0}
.wahl:hover{color:var(--mint-tinte)}
.wahl.aktiv{background:var(--papier);color:var(--gruen-tief);
  box-shadow:0 2px 10px -3px rgba(0,0,0,.18)}
.wahl:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
/* 14.10.2026: Am Handy passten die drei Knöpfe nicht nebeneinander —
   „Hochzeitstorte“ ragte rechts aus dem Bild und war nicht zu erreichen.
   Darunter jetzt drei gleich breite Felder, Symbol über dem Text. */
@media(max-width:540px){
  .wahlleiste{display:grid;grid-template-columns:repeat(3,1fr);width:100%;
    border-radius:18px}
  .wahl{flex-direction:column;gap:5px;padding:10px 6px;border-radius:14px;
    white-space:normal;text-align:center;line-height:1.25;font-size:12.5px}
  .wahl svg{width:17px;height:17px}
}
.feld-inhalt{min-width:0;margin-bottom:clamp(24px,3.4vw,34px)}
.feld-inhalt[hidden]{display:none}
/* 15.10.2026: .7 kam auf Salbei nur auf 3,3:1 — .88 sind 4,8. */
.feld-text{font-size:14.5px;color:rgba(30,58,52,.88);margin-bottom:18px;
  max-width:620px;line-height:1.6}
.karussell{position:relative;display:flex;align-items:center;gap:10px;min-width:0}
.pfeil{flex-shrink:0;width:40px;height:40px;border-radius:50%;cursor:pointer;
  background:rgba(251,250,245,.1);border:1px solid rgba(251,250,245,.24);
  color:var(--mint-tinte);display:grid;place-items:center;transition:background .2s,opacity .2s}
.pfeil svg{width:19px;height:19px}
.pfeil:hover{background:var(--rose);border-color:var(--rose)}
.pfeil[disabled]{opacity:.28;cursor:default}
.pfeil[disabled]:hover{background:rgba(251,250,245,.1);border-color:rgba(30,58,52,.24)}
/* Passt alles ins Bild, braucht es keine Pfeile. */
.karussell.ohne-pfeile .pfeil{display:none}
/* Zwei Torten übereinander, dann die nächsten zwei daneben. */
.torten-bahn{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
  grid-auto-columns:clamp(150px,20%,205px);gap:12px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding:3px 1px 6px;flex:1;min-width:0}
.torten-bahn::-webkit-scrollbar{display:none}
.torten-bahn:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:4px}
.torten-bahn .torte{scroll-snap-align:start;min-width:0}
/* Passen alle Torten nebeneinander, klebte die Bahn links und rechts blieb
   eine große Leerfläche. In dem Fall mittig setzen. */
.karussell.ohne-pfeile .torten-bahn{justify-content:center}
.torten-hinweis{text-align:center;margin:0 auto 14px}

/* ── Zwei Schritte: erst die Torte, dann die Fragen ────────────── */
.schritt[hidden]{display:none}
.weiter-reihe{display:flex;justify-content:center;margin-top:clamp(26px,3.5vw,38px)}
/* Grau, solange nichts gewaehlt ist. Rosa, sobald es weitergehen kann. */
.knopf-weiter{display:inline-flex;align-items:center;gap:10px;border:0;cursor:not-allowed;
  font:600 15px/1 var(--sans);letter-spacing:.01em;padding:17px 34px;border-radius:999px;
  background:rgba(251,250,245,.13);color:rgba(30,58,52,.72);
  transition:background .18s,color .18s,box-shadow .18s,transform .12s}
.knopf-weiter svg{width:17px;height:17px;flex-shrink:0}
/* Das Rosa kommt von der Rosentapete im Café: der helle Grund, auf dem die
   Rosen liegen. Dunkelgrüne Schrift darauf — dasselbe Gegenspiel wie im Raum,
   wo die Tapete vor der salbeigrünen Wand steht. Deckt sich mit dem
   Markenrosa NCS S 2010-Y90R. */
.knopf-weiter.bereit{cursor:pointer;background:var(--tapete);color:var(--gruen-tief);
  box-shadow:0 8px 26px -12px rgba(0,0,0,.55)}
.knopf-weiter.bereit:hover{background:var(--tapete-tief);color:var(--gruen-tief);transform:translateY(-1px)}
.knopf-weiter.bereit:active{transform:translateY(0)}
.knopf-weiter:focus-visible{outline:2px solid var(--rose-tief);outline-offset:3px}

/* Der schmale Streifen, der die Auswahl ersetzt, sobald es weitergeht. */
/* In Schritt 2 ersetzt diese Zeile die grosse Ueberschrift. Der Gast hat die
   Einleitung dort laengst gelesen und schon gewaehlt — sie kostet nur Hoehe. */
.kopf-klein{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.4vw,32px);
  color:var(--mint-tinte);text-align:center;margin:0 auto clamp(22px,3vw,30px);max-width:640px}
.kopf-klein[hidden]{display:none}
.gewaehlt-streifen{display:flex;align-items:center;gap:16px;max-width:640px;
  margin:0 auto clamp(28px,4vw,40px);padding:12px 14px 12px 12px;border-radius:999px;
  background:rgba(251,250,245,.08);border:1px solid rgba(251,250,245,.16)}
.gewaehlt-streifen[hidden]{display:none}
.gewaehlt-streifen .bild{width:52px;height:52px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:rgba(251,250,245,.12)}
.gewaehlt-streifen .bild img{width:100%;height:100%;object-fit:cover;display:block}
.gewaehlt-streifen .bild.leer{display:flex;align-items:center;justify-content:center;color:var(--rose)}
.gewaehlt-streifen .bild.leer svg{width:24px;height:24px}
.gewaehlt-streifen .wer{flex:1;min-width:0;line-height:1.35}
.gewaehlt-streifen .wer small{display:block;font:700 10.5px/1 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--rose-auf-mint);margin-bottom:5px}
.gewaehlt-streifen .wer b{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--mint-tinte);
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gewaehlt-streifen button{flex-shrink:0;border:1px solid rgba(251,250,245,.28);background:transparent;
  color:var(--mint-tinte);font:600 12.5px/1 var(--sans);padding:10px 17px;border-radius:999px;cursor:pointer}
.gewaehlt-streifen button:hover{background:rgba(251,250,245,.14)}

/* Schritt 2: die Fragen in drei ruhigen Bloecken statt einer langen Liste. */
.danke{max-width:640px;margin:0 auto;text-align:center;padding:clamp(30px,4vw,44px) clamp(22px,3vw,32px);
  background:rgba(251,250,245,.09);border:1px solid rgba(251,250,245,.22);border-radius:var(--rund-gross)}
.danke[hidden]{display:none}
.danke-bild{display:flex;align-items:center;justify-content:center;width:60px;height:60px;
  margin:0 auto 18px;border-radius:50%;background:var(--tapete);color:var(--gruen-tief)}
.danke-bild svg{width:27px;height:27px}
.danke h3{font-family:var(--serif);font-weight:400;font-size:clamp(23px,3vw,30px);
  color:var(--mint-tinte);margin:0 0 12px}
/* 15.10.2026: .82 kam auf 4,46 — knapp unter 4,5. .88 = 5,1:1. */
.danke p{color:rgba(30,58,52,.88);font-size:15px;line-height:1.65;margin:0 0 24px}
.danke .knopf{margin:0 auto}
.absenden{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.absenden .hinweis{max-width:420px}
.antwort{margin:0 0 20px;padding:15px 18px;border-radius:var(--rund);font-size:14.5px;line-height:1.55}
.antwort[hidden]{display:none}
.antwort.warnung{background:rgba(211,172,174,.16);border:1px solid var(--rose);color:var(--rose-auf-mint)}
.antwort.info{background:rgba(251,250,245,.09);border:1px solid rgba(251,250,245,.24);
  color:rgba(30,58,52,.92)}
/* Fehlt ein Haken, faellt die ganze Zeile auf — ein roter Rahmen um ein
   18-Pixel-Kaestchen sieht sonst niemand. */
.zustimmung.fehlt{background:rgba(211,172,174,.14);border:1px solid var(--rose);
  border-radius:var(--rund-klein);padding:12px 14px}
.formular.schritt{background:transparent;border:0;padding:0;
  max-width:640px;margin-left:auto;margin-right:auto}
/* Bei 640 px Breite waeren drei Felder nebeneinander zu eng gerechnet und
   wuerden umbrechen. Innerhalb der Bloecke darf eine Spalte schmaler sein. */
.block .feldreihe{grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:16px;
  /* Eine Beschriftung bricht auf zwei Zeilen um, die anderen nicht. Ohne
     das hier stuenden die Felder darunter auf verschiedenen Hoehen. */
  align-items:end}
.block .feld input,.block .feld select,.block .feld textarea{border-radius:var(--rund-klein)}
.block{background:rgba(251,250,245,.09);border:1px solid rgba(251,250,245,.22);
  border-radius:var(--rund-gross);padding:clamp(22px,3vw,30px);margin-bottom:16px}
.block > .block-titel{display:flex;align-items:baseline;gap:11px;margin-bottom:18px}
/* 15.10.2026: Das helle Rosa hatte auf dem Block 1,1:1 — die Nummer war
   praktisch unsichtbar. Das dunkle Rosa für Salbei kommt auf 5,0 (große
   Schrift braucht 3). Es bleibt ein rosa Akzent wie „Auswählen“. */
.block-titel .zahl{font-family:var(--serif);font-size:26px;line-height:1;color:var(--rose-auf-mint);
  min-width:26px}
.block-titel .wort{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--mint-tinte)}
.block-titel .dazu{font-size:13px;color:rgba(30,58,52,.86);margin-left:auto;text-align:right}
@media(max-width:560px){.block-titel .dazu{display:none}}
@media(max-width:900px){.torten-bahn{grid-auto-columns:clamp(150px,40vw,192px)}}
/* Am Handy fraßen die beiden Pfeile 100 der 390 Pixel, die zweite Kachel war
   abgeschnitten. Dort wischt man ohnehin — die Pfeile gehen weg, die Bahn
   bekommt die volle Breite und zeigt zwei Kacheln plus einen Anschnitt
   der dritten, damit man sieht, dass es weitergeht. */
@media(max-width:600px){
  .karussell .pfeil{display:none}
  .karussell{gap:0}
  .torten-bahn{grid-auto-columns:calc((100% - 12px) / 2 - 14px);padding:3px 0 6px}
}
.torte{padding:0;border:1px solid rgba(251,250,245,.17);border-radius:var(--rund);overflow:hidden;
  background:rgba(251,250,245,.055);cursor:pointer;text-align:left;font-family:var(--sans);
  display:flex;flex-direction:column;transition:border-color .2s,background .2s,transform .2s}
.torte:hover{border-color:var(--rose);background:rgba(251,250,245,.1);transform:translateY(-3px)}
.torte-bild{aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;position:relative;
  background:linear-gradient(135deg,rgba(237,222,222,.3),rgba(201,227,222,.22))}
.torte-bild img{width:100%;height:100%;object-fit:cover;display:block}
.torte-bild i{font-style:normal;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(47,91,83,.62);font-weight:700}
.torte-text{padding:13px 15px 15px;flex:1;display:flex;flex-direction:column}
.torte-name{display:block;font-family:var(--serif);font-size:18px;color:var(--mint-tinte);line-height:1.25}
.torte-wahl{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rose-auf-mint);font-weight:700;margin-top:auto;padding-top:9px}
.torte[aria-pressed=true]{border-color:var(--rose);background:rgba(211,172,174,.18)}
.torte[aria-pressed=true] .torte-wahl::before{content:"✓ "}
/* Express — als Knopf gebaut, technisch ein Häkchen */
.express{margin:0 0 22px}
.express input{position:absolute;opacity:0;width:1px;height:1px}
.express label{display:flex;gap:14px;align-items:flex-start;cursor:pointer;
  /* Kein eigener Hintergrund: der Kasten sitzt schon in einem Kasten.
     Der rosa Rand allein reicht, um ihn abzusetzen. */
  background:transparent;border:1px solid rgba(211,172,174,.45);
  border-radius:var(--rund);padding:16px 18px;transition:border-color .2s,background .2s}
.express label:hover{border-color:var(--rose)}
.express input:focus-visible + label{outline:2px solid var(--rose);outline-offset:2px}
.express input:checked + label{border-color:var(--rose);background:rgba(211,172,174,.17)}
.express .kaestchen{flex-shrink:0;width:20px;height:20px;border-radius:5px;margin-top:1px;
  border:1.5px solid rgba(251,250,245,.5);display:grid;place-items:center;font-size:12px;
  color:var(--gruen-tief);font-weight:700;line-height:1}
.express input:checked + label .kaestchen{background:var(--rose);border-color:var(--rose)}
.express input:checked + label .kaestchen::after{content:"✓"}
.express b{display:block;color:var(--mint-tinte);font-size:16px;font-family:var(--serif);
  font-weight:400;margin-bottom:3px}
.express b .blitz{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-family:var(--sans);font-weight:700;color:var(--rose-auf-mint);margin-right:9px}
.express span.text{display:block;font-size:13.5px;line-height:1.55;color:rgba(30,58,52,.72)}
.torte-gewaehlt[hidden]{display:none}
.torte-gewaehlt{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:rgba(211,172,174,.18);border:1px solid var(--rose);border-radius:999px;
  padding:11px 12px 11px 22px;margin:0 0 22px;font-size:14.5px;color:var(--mint-tinte)}
.torte-gewaehlt button{background:rgba(251,250,245,.15);border:none;cursor:pointer;
  color:var(--mint-tinte);font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:8px 15px;border-radius:999px}
.torte-gewaehlt button:hover{background:rgba(251,250,245,.28)}

/* Verstecktes bleibt versteckt. Ohne !important gewinnt jede eigene
   display-Regel gegen das hidden-Merkmal — ein in der Verwaltung
   geleertes Feld stuende dann als leere Zeile da. */
[hidden]{display:none !important}

/* ── Reservieren ──────────────────────────────────────── */
.res-reihe{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));
  max-width:760px;margin-inline:auto}
.res-karte{display:block;background:var(--papier);border:var(--rand);border-radius:var(--rund);
  padding:28px 30px;text-decoration:none;color:var(--tinte);
  transition:transform .22s,box-shadow .22s,border-color .22s}
a.res-karte:hover{transform:translateY(-3px);border-color:var(--rose-tief);
  box-shadow:0 18px 34px -24px rgba(38,48,42,.34)}
.res-karte svg{width:26px;height:26px;color:var(--rose-tief);display:block;margin-bottom:16px}
.res-karte b{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grau);font-weight:700;margin-bottom:8px}
.res-karte strong{display:block;font-family:var(--serif);font-size:25px;font-weight:400;
  color:var(--gruen);line-height:1.2;margin-bottom:9px}
.res-karte em{font-style:normal;font-size:13.5px;color:var(--grau);line-height:1.55;display:block}
.res-karte.fehlt{background:var(--rose-hell);border-color:var(--rose)}
.res-karte.fehlt strong{color:#703B3E}
.res-karte.fehlt b,.res-karte.fehlt em{color:#545D56}
.res-notiz{margin:26px auto 0;max-width:660px;text-align:center;font-size:14.5px;
  color:var(--grau);line-height:1.65}

.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.zustimmung.gesundheit{background:rgba(211,172,174,.16);border:1px solid rgba(211,172,174,.5);
  border-radius:var(--rund);padding:15px 18px;margin:0 0 22px}
.zustimmung.gesundheit[hidden]{display:none}

.platzhalter-hinweis{background:var(--altrosa);color:#703B3E;text-align:center;
  padding:11px 20px;font-size:13px;font-weight:600;letter-spacing:.02em}

/* Verbindlichkeit: steht ueber dem Absenden-Knopf, damit niemand glaubt,
   mit dem Abschicken sei die Torte schon bestellt. */
.verbindlichkeit{margin:26px 0 0;padding:15px 18px;border-left:3px solid var(--rose);
  background:rgba(251,250,245,.07);border-radius:0 4px 4px 0;
  font-size:14px;line-height:1.65;color:var(--mint-tinte);opacity:.9}
.verbindlichkeit b{display:block;margin-bottom:4px;font-weight:600;opacity:1}
.feld-notiz{display:block;margin:0;font-size:12px;line-height:1.45;
  color:rgba(30,58,52,.86)}
/* Datum und Uhrzeit: das kleine Kalender-/Uhr-Symbol ist von Haus aus dunkel
   und waere auf dem dunklen Formular unsichtbar. */
.feld input[type=date],.feld input[type=time]{color-scheme:dark}

/* ── Saison-Band in Katharinas Grün ────────────────────
   Ihre beiden Töne standen bis hierher nur auf Rändern und
   im Logo-Ring — technisch drin, praktisch unsichtbar.
   Hier bekommt ihr Grün eine ganze Fläche.

   Auf dem Grün gilt eine andere Rechnung als auf Papier:
   --grau käme auf 1,86 und --rose-tief auf 1,96. Deshalb
   steht hier alles in dunklem Tannengrün (5,1) oder Tinte
   (5,7), und die Saison-Marker tragen ihr Rosa mit einem
   dunklen Rosenholz darauf (5,3). Wer hier Farben tauscht:
   nachrechnen.                                            */
#saison{background:var(--salbei)}
#saison h2,#saison h1.wie-h2,#saison h3,#saison .label{color:#1E3A34}
#saison .lead,#saison .stueck-text p{color:var(--tinte)}
#saison .stueck-text p{opacity:.82}
#saison .marke-saison{background:var(--rose);color:#5E3033}
#saison .zier path[stroke]{stroke:#1E3A34}
/* Die Bluete aus dem Logo ueber „Gerade in der Auslage" (16.09.2026). */
.zier-bluete{display:block;width:clamp(180px,24vw,250px);height:auto;margin:0 auto}
.saison-fussnote{text-align:center;margin:26px 0 0;font-size:13px;color:#213F39}

/* ── Drucken ───────────────────────────────────────────
   Vor allem für die Speisekarte: Katharina oder ein Gast druckt sie aus,
   und dann sollen nicht Menü, Fußzeile und dunkle Flächen mitkommen.
   Schwarz auf Weiß, zwei Spalten bleiben, Adresse und Telefon stehen
   einmal oben. */
@media print {
  header, footer, .info-band, .sonderhinweis, .zum-inhalt,
  .karte-sprung, .bestellen, #reservieren, .karussell, .knopf,
  .knopfreihe, .fuss-sozial { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .wrap { max-width: none; padding: 0 }
  section, .creme, #saison { background: #fff !important; padding: 0 !important; box-shadow: none !important }
  h1, h2, h3, h4, .karte-titel { color: #000 !important; break-after: avoid }
  .speise, .karte-gruppe, .stueck { break-inside: avoid; box-shadow: none !important; border-color: #ccc !important }
  .speise-preis, .speise-mass, .karte-num, p, li { color: #000 !important }
  a { text-decoration: none; color: #000 !important }
  img { max-width: 40mm }
  /* Kopfzeile beim Drucken: Name und Adresse, damit das Blatt zuzuordnen ist */
  main::before {
    content: "Café Kustermann · Lindwurmstraße 36 · 80337 München · 089 720 15285 · cafekustermann.de";
    display: block; font-size: 9pt; letter-spacing: .04em;
    border-bottom: 1px solid #999; padding-bottom: 6pt; margin-bottom: 14pt;
  }
}

/* ── Fehlerseite (404) ─────────────────────────────────
   Eine eigene Seite statt der englischen von Firebase. Ein Gast, der
   sich vertippt, soll sofort einen Weg zurück sehen — und die
   Telefonnummer, falls er etwas wollte. */
.fehlerseite{padding-top:clamp(70px,11vw,130px);padding-bottom:clamp(70px,11vw,130px);
  background:var(--creme)}
/* .knopf.linie ist für den dunklen Grund gemacht (weiße Linie, weiße
   Schrift). Auf der hellen Fehlerseite war er dadurch praktisch
   unsichtbar — hier bekommt er die dunkle Fassung. */
.fehlerseite .knopf.linie{color:var(--gruen);box-shadow:inset 0 0 0 1.5px rgba(47,91,83,.45)}
.fehlerseite .knopf.linie:hover{background:rgba(47,91,83,.07);box-shadow:inset 0 0 0 1.5px var(--gruen)}
.fehler-hilfe{margin:34px 0 0;font-size:14.5px;line-height:1.9;color:var(--grau)}
.fehler-hilfe a{color:var(--gruen);text-underline-offset:3px}

/* ── Vorlaufzeit ───────────────────────────────────────
   Steht direkt unter dem Wunschtermin und sagt, was für DIESE
   Torte gilt — nicht was allgemein gilt. Vorher stand hier ein
   Kasten mit allen drei Fristen; den musste sich jeder selbst
   zuordnen. Wird der Termin zu früh gewählt, färbt sich der
   Hinweis (Klasse warnt).
   Keine opacity: das hat schon zweimal einen nachgerechneten
   Kontrast wieder kaputt gemacht. */
.vorlauf{grid-column:1/-1;margin:2px 0 0;font-size:13px;line-height:1.5;
  color:rgba(30,58,52,.88)}
.vorlauf a{color:var(--mint-tinte);text-decoration:underline;text-underline-offset:2px}
.vorlauf.warnt{padding:10px 12px;border-radius:var(--rund-klein);
  background:rgba(211,172,174,.18);box-shadow:inset 0 0 0 1px var(--rose);
  color:var(--mint-tinte)}
.zeit-fussnote{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--grau)}

/* Besuchte Links: ohne eigene Regel entscheidet der Browser, und beim
   Messen kam ein besuchter Fußzeilen-Link auf 3,8 statt 5,2 heraus.
   Hier war es ein Messartefakt — Chrome behält den :visited-Stil beim
   Austausch der Datei bei. Die Regel steht trotzdem: sie kostet nichts
   und nimmt dem Browser die Entscheidung ab. */
a:visited{color:inherit}
/* 15.10.2026: gleich wie unbesucht (.9) — vorher .72 = 3,5:1. */
footer a:visited,.fuss-unten nav a:visited{color:rgba(30,58,52,.9)}
.res-karte:visited{color:inherit}
/* 15.10.2026: Die Sprungleiste hatte hier auch inherit — besuchte
   Abschnitte wurden dunkel (Tinte), die übrigen blieben grau, die
   Leiste war zweifarbig. Besucht heißt hier nichts: alle gleich grau,
   Hover wie unbesucht rosé (muss nach :visited stehen, sonst gewinnt
   das Grau). */
.karte-sprung a:visited{color:var(--grau)}
.karte-sprung a:visited:hover{color:var(--rose-tief)}

/* ── Instagram und Facebook ────────────────────────────
   Helle Pillen auf dem dunklen Grün, wie in Darius' Vorlage.
   Beides sind normale Links, keine eingebetteten Bausteine —
   es entsteht erst eine Verbindung zu Meta, wenn jemand
   draufklickt. So steht es auch in der Datenschutzerklärung. */
.fuss-sozial{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:26px 0 4px}
.fuss-sozial a{display:inline-flex;align-items:center;gap:10px;
  background:var(--papier);color:var(--gruen-tief);text-decoration:none;
  font-size:15px;font-weight:600;letter-spacing:.01em;
  padding:11px 24px 11px 20px;border-radius:999px;
  transition:transform .16s,background .16s}
.fuss-sozial a:visited{color:var(--gruen-tief)}
.fuss-sozial a:hover{background:#fff;transform:translateY(-2px)}
.fuss-sozial svg{width:21px;height:21px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* Das Facebook-Zeichen ist eine Fläche, keine Strichzeichnung — als
   Kontur gemalt wurde daraus ein Kringel, in dem man nichts erkennt. */
.fuss-sozial svg.voll{fill:currentColor;stroke:none}
@media(max-width:420px){.fuss-sozial a{flex:1 1 100%;justify-content:center}}

/* ── Bühnenbild in modern (13.09.2026) ───────────────────────
   Zwei verschiedene Fassungen, weil das Foto zweierlei tut:
   Unter 1000px liegt es hinter einem grünen Verlauf, der es zu 74 bis 93
   Prozent zudeckt — dort reicht die kleine, sparsame Fassung (900 Pixel).
   Ab 1000px steht es rechts in voller Farbe — dort die scharfe (1200).
   Wer WebP kann, bekommt beides noch einmal deutlich leichter.
   Das @supports ist nötig, weil ein Browser, der image-set nicht kennt,
   sonst die ganze Zeile verwürfe — und die Bühne stünde ohne Bild da. */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .buehne{background:
    linear-gradient(180deg,rgba(35,67,60,.90),rgba(43,79,71,.74) 44%,rgba(35,67,60,.93)),
    image-set(url("bilder/webp/raum-hell-buehne-900.webp") type("image/webp"))
      center 38%/cover no-repeat,var(--gruen-tief)}
  @media(min-width:1000px){
    .buehne{background:var(--creme)}
    .buehne-foto{background:
      image-set(url("bilder/webp/raum-hell-1200.webp") type("image/webp"))
        center 38%/cover no-repeat}
  }
}

/* ── Tippziele am Handy (13.09.2026) ──────────────────────
   Am Telefon nachgemessen (390 px): die Sprungmarken über der Speisekarte
   waren 23 px hoch — das ist unter dem Mindestmaß der Barrierefreiheits-
   Richtlinie (24 px) und mit dem Daumen kaum zu treffen. Die Links unter
   „Finden & Kontakt“ lagen bei 24. Beides sind die wichtigsten Knöpfe der
   jeweiligen Seite: die Sprungmarken sind die Navigation der Karte, und
   „Route öffnen“, Telefon und Mail sind das, wofür die Finden-Seite da ist.

   Nur für Geräte, die mit dem Finger bedient werden (pointer:coarse) —
   am Rechner bleibt das Layout unverändert. Die Fläche wächst nach innen
   über Polsterung, der negative Rand hält den optischen Abstand gleich,
   damit nichts auseinanderrutscht. */
@media(pointer:coarse){
  .karte-sprung{gap:2px 0}
  .karte-sprung a{padding:11px 9px}
  .info-band a{padding:13px 2px 12px;margin:-13px 0 -12px}
  .daten a{display:inline-block;padding:10px 0;margin:-10px 0}
  /* Der Menüknopf war 41x43 — in der Verwaltung sind es seit heute 44.
     Die Polsterung wächst, die drei Striche bleiben, wo sie sind. */
  .burger{padding:11px 10px}
  /* 15.10.2026: Die Fuß-Links (Telefon, Mail, Instagram, Seiten) waren
     31 px hoch, „Karte“ nur 35 breit. Mit 9 px Polsterung sind es 41 px —
     genau der Zeilenabstand der Liste, mehr ginge nur auf Kosten des
     Nachbarlinks. Der Rand -5 px hält die Zeile bei 31 px, darum rückt
     nichts; seitlich 8 px mehr, damit kurze Wörter breit genug sind. */
  footer ul a{padding:9px 8px;margin:-5px -8px}
  /* Impressum und Datenschutz: 39 → 45 px. Oben nur 10 px, weil am
     schmalen Handy die ©-Zeile 10 px darüber steht; unten ist Platz. */
  .fuss-unten nav a{padding:10px 6px 14px;margin:-10px -6px -14px}
}

/* ── Impressionen: laufendes Band (14.09.2026) ────────────
   Zwei Reihen, die gegeneinander wandern. Die Bilderliste steht
   zweimal im Quelltext; die Reihe wandert um genau die halbe
   Breite, dann springt sie zurück — für das Auge endlos.

   Angehalten wird beim Zeigen mit der Maus, beim Tastatur-Fokus
   und wenn das Band gar nicht im Bild ist (seite.js setzt dafür
   .laeuft). Wer im System weniger Bewegung eingestellt hat, sieht
   das Band stehen und kann es seitlich schieben.

   Platzhalter statt Skelett: Der Kasten hat von Anfang an seine
   Größe (aspect-ratio) und die Cremefarbe des Hauses. Das Bild
   blendet sich beim Laden weich ein. Ein blinkendes Skelett würde
   hier nur Rechenzeit kosten — der Abschnitt liegt ganz unten, die
   Bilder sind da, bevor jemand hinsieht. */
.impressionen{padding:clamp(56px,7vw,92px) 0 clamp(48px,6vw,76px);background:var(--creme)}
.impressionen .mitte{margin-bottom:clamp(30px,4vw,44px)}
.imp-band{overflow:hidden}
.imp-lauf{display:flex;gap:14px;width:max-content;margin-bottom:14px}
.imp-lauf.zurueck{margin-bottom:0}
.imp-band.laeuft .imp-lauf{animation:imp-links 70s linear infinite}
.imp-band.laeuft .imp-lauf.zurueck{animation-name:imp-rechts;animation-duration:86s}
.imp-band:hover .imp-lauf,
.imp-band:focus-within .imp-lauf{animation-play-state:paused}
.imp-bild{margin:0;flex:none;width:clamp(124px,13vw,180px);aspect-ratio:3/4;
  border-radius:var(--rund);overflow:hidden;background:var(--hell)}
.imp-bild img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .5s ease}
.imp-bild img.da{opacity:1}
@keyframes imp-links{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes imp-rechts{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* Ohne Bewegungswunsch: stehendes Band, das man selbst schieben kann. */
@media(prefers-reduced-motion:reduce){
  .imp-band.laeuft .imp-lauf,
  .imp-band.laeuft .imp-lauf.zurueck{animation:none}
  .imp-lauf{overflow-x:auto;width:auto;scrollbar-width:thin}
}
/* Ohne JavaScript läuft nichts — dann wenigstens schiebbar. */
.imp-band:not(.laeuft) .imp-lauf{overflow-x:auto;width:auto}
/* 15.10.2026: Knopf zum Anhalten (WCAG 2.2.2, Stufe A). Zeigen mit der
   Maus reicht nicht: am Handy gibt es kein Zeigen, und die Bilder sind
   nicht fokussierbar. seite.js setzt den Knopf rechts unter das Band.
   Dezent als Linienknopf; gedrückt grün gefüllt, damit man sieht, dass
   er wirkt. 44 px hoch, damit er sich am Handy sicher treffen lässt.
   Die Regel für .angehalten muss NACH .laeuft stehen — dessen
   animation-Kurzform setzt den Pausenzustand sonst wieder auf „läuft“. */
.imp-steuer{display:flex;justify-content:flex-end;margin-top:16px}
.imp-halt{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;
  border:none;border-radius:999px;background:transparent;color:var(--gruen);
  box-shadow:inset 0 0 0 1px rgba(47,91,83,.45);font:600 13.5px/1.2 var(--sans);
  letter-spacing:.01em;cursor:pointer;transition:background .2s,color .2s}
.imp-halt:hover{background:rgba(47,91,83,.07)}
.imp-halt svg{width:14px;height:14px;fill:currentColor;flex:none}
.imp-halt[aria-pressed="true"]{background:var(--gruen);color:var(--papier);box-shadow:none}
.imp-halt[aria-pressed="true"]:hover{background:var(--gruen-tief)}
.imp-band.angehalten .imp-lauf{animation-play-state:paused}
/* Wer weniger Bewegung eingestellt hat, sieht das Band ohnehin stehen. */
@media(prefers-reduced-motion:reduce){.imp-steuer{display:none}}
@media print{.impressionen{display:none}}

/* 14.10.2026: Auf sehr schmalen Handys (320 px, z. B. iPhone SE der ersten
   Generation) stand der Menüknopf ein paar Pixel über den Rand hinaus und die
   Seite ließ sich seitlich verschieben. Logo und Schriftzug etwas kleiner. */
@media(max-width:350px){
  .kopf{gap:8px}
  .marke{gap:9px}
  .marke img{width:44px;height:44px}
  .marke-text b{font-size:21px}
  .marke-text span{letter-spacing:.16em}
}


/* 15.10.2026: „Torte bestellen“ nur, wenn die Bestellung eingeschaltet ist.
   seite.js setzt <html class="bestellung-an">, sobald die Einstellungen da
   sind und die Bestellung nicht ausgeschaltet ist (auch wenn die Datenbank
   nicht antwortet — ein Ausfall soll den Bestellweg nicht zumachen).
   Ohne die Klasse bleibt alles mit .nur-bestellung unsichtbar; so blitzt der
   Knopf nicht kurz auf, wenn die Bestellung aus ist. */
html:not(.bestellung-an) .nur-bestellung{display:none!important}
html.bestellung-an .nur-ohne-bestellung{display:none!important}

/* 15.10.2026: Tastatur-Fokus auf Salbei. Der Fokusrahmen oben
   (:focus-visible, --rose-tief) kam auf dem Salbei #8FC1B1 nur auf
   2,5:1 — nötig sind 3:1 (WCAG 1.4.11). Wer mit der Tab-Taste durch
   Kopfband, Fuß oder Bestellseite ging, sah kaum, wo er gerade steht.
   Auf diesen Flächen steht der Rahmen deshalb im dunklen Rosa, das es für
   Schrift auf Salbei schon gibt (--rose-auf-mint): 4,7 zum Salbei, 4,0 zum
   Hover-Salbei, 9,0 zu den hellen Pillen und Knöpfen darauf. Es bleibt ein
   rosa Rahmen wie überall sonst, nur dunkler; Breite und Abstand bleiben.
   Das Saison-Band braucht das nicht: Dort liegen die Links auf den hellen
   Kacheln, und --rose-tief kommt auf Papier auf 4,8. */
.info-band :focus-visible,footer :focus-visible,.bestellen :focus-visible{
  outline-color:var(--rose-auf-mint)}
/* Der Sprung-Link sitzt ganz oben links: Sein Rahmen lag halb außerhalb
   des Bildes und halb auf dem Salbei-Kopfband. Nach innen gezogen ist er
   rundum zu sehen (auf dem eigenen Salbei: 4,7). */
.zum-inhalt:focus-visible{outline-color:var(--rose-auf-mint);outline-offset:-5px}
/* Die Eingabefelder der Bestellseite zeigen den Fokus als Rand, nicht als
   outline. Ihr helles Rosa kam auf 1,9 zum Feld und 1,0 zum Salbei — also
   gar nicht zu sehen. Jetzt ein 2-px-Rand im dunklen Rosa (8,7 zum Feld). */
.bestellen .feld input:focus,.bestellen .feld select:focus,
.bestellen .feld textarea:focus{border-color:var(--rose-auf-mint);
  box-shadow:0 0 0 1px var(--rose-auf-mint)}

/* ── Dunkler Modus (19.10.2026) ───────────────────────────
   Darius: Steht das Handy oder der Rechner auf dunkel, soll die Seite
   von selbst dunkel sein — kein Umschaltknopf. Bild dafür: abends im
   Café. Tiefes Grün-Schwarz statt Papier, cremefarbene Schrift, Salbei
   und Rosa bleiben als Akzente erkennbar.

   Was hier steht, gilt NUR im Dunkeln und NUR auf den Gästeseiten:
   - screen: Beim Drucken bleibt es hell (Druckregeln oben).
   - data-dunkel: setzt bauen.py (RAHMEN) an <html>. Die Verwaltung,
     /todo und der Impressionen-Entwurf laden dieselbe stil.css, haben
     das Merkmal aber nicht — sie bleiben hell, wie Darius es will.
   - :where() davor zählt nicht zur Spezifität. Jede Regel hier ist
     damit genau so stark wie die helle, die sie ersetzt, und gewinnt
     nur, weil sie weiter unten steht. So schlägt sie keine Zustände
     (Hover, gedrückt, Bühne am Rechner) aus Versehen tot.
   Der helle Modus ist davon nicht berührt: Keine Zeile oberhalb dieses
   Blocks wurde geändert.

   Aufbau: erst die Variablen (die meisten Farben laufen darüber), dann
   die Stellen mit fest eingetragenen Farben, in der Reihenfolge der
   Datei. Alle Kontraste nachgemessen am 19.10.2026 im Browser (Text
   ≥ 4,5:1, große Schrift ≥ 3:1, Fokusrahmen und Feldränder ≥ 3:1).
   Wer hier eine Farbe ändert: nachmessen, nicht schätzen.          */
@media screen and (prefers-color-scheme:dark){
:root[data-dunkel]{
  /* Formularfelder, Auswahllisten und Rollbalken des Browsers dunkel. */
  color-scheme:dark;
  /* Flächen: Papier wird zum Grund, Creme zur etwas helleren Bahn. */
  --papier:#141C19; --creme:#18221E; --creme-2:#1D2924;
  /* Platzhalter hinter Bildern — sonst blitzt beim Laden Hellblau auf. */
  --hell:#22312C; --rose-hell:#3B2A2C; --altrosa:#4A3134;
  /* Schrift: Creme 13,5:1, gedämpft 8,5:1 auf dem Grund. */
  --tinte:#E8E2D6; --grau:#AEB8B1;
  /* Überschriften und Links in hellem Salbei (10,6:1), Rosa-Akzent
     hell statt tief (8,9:1; auf Karten 7,5). Bewusst kräftiger als ein
     blasses Rosé, sonst liest es sich nachts als Weiß. --rose-tief ist
     auch die Fokusfarbe. */
  --gruen:#A9D3C5; --rose-tief:#EAA9AD;
  --rand:1px solid rgba(232,226,214,.12); --linie:rgba(232,226,214,.12);
  /* Neu, nur hier: Karten heben sich als hellere Fläche ab (im Dunkeln
     kommt Höhe von Helligkeit, nicht von Schatten). Die großen
     Salbei-Flächen werden dunkles Salbeigrün — ein volles Salbei-Band
     würde nachts blenden. */
  --nacht-karte:#1F2B26; --nacht-karte-hover:#26342E;
  --nacht-salbei:#24453D; --nacht-rosa:#EFB3B7;
  /* --salbei, --salbei-dunkel, --mint-tinte, --gruen-tief, --tapete und
     --rose-auf-mint bleiben: Salbei-Knöpfe, Logo-Kreis und rosa Knöpfe
     sind auch im Dunkeln hell und brauchen ihre dunkle Schrift. */
}

/* Die vier Salbei-Flächen: dunkles Salbeigrün. Darin wird die „Tinte
   auf Salbei“ zu Creme (8,2:1) und das dunkle Rosa zu hellem (5,9:1) —
   über die Variablen, damit jede Regel darin von selbst stimmt. */
:where([data-dunkel]) .info-band,:where([data-dunkel]) #saison,
:where([data-dunkel]) .bestellen,:where([data-dunkel]) footer{
  background:var(--nacht-salbei);--mint-tinte:#E8E2D6;--rose-auf-mint:var(--nacht-rosa)}
/* …außer in den Salbei-Knöpfen und -Reitern: Die bleiben hell, darauf
   gehört die dunkle Tinte (6,1:1). */
:where([data-dunkel]) .knopf,:where([data-dunkel]) .reiter{--mint-tinte:#1E3A34}

/* Kopfband, Hinweisband, Kopf */
:where([data-dunkel]) .info-band a{border-bottom-color:rgba(232,226,214,.35)}
:where([data-dunkel]) .sonderhinweis{background:var(--altrosa);color:#F3E4E4}
/* Der Öffnungs-Punkt war dunkelgrün auf Salbei — auf dem dunklen Band
   wäre er weg. Jetzt hell: Salbei (5,2:1), geschlossen Rosa (4,7:1). */
:where([data-dunkel]) .punkt{background:var(--salbei);box-shadow:0 0 0 3px rgba(143,193,177,.22)}
:where([data-dunkel]) .punkt.zu{background:#E39A9E;box-shadow:0 0 0 3px rgba(227,154,158,.22)}
:where([data-dunkel]) header{background:rgba(20,28,25,.93)}
@media(max-width:900px){
  :where([data-dunkel]) #hauptmenue{box-shadow:0 24px 40px -24px rgba(0,0,0,.7)}
}

/* Knöpfe. „hell“ bleibt hell (Papier, dunkelgrüne Schrift) — er steht am
   Handy auf dem dunklen Bühnenfoto und auf der Bestellfläche, beides ist
   ohnehin dunkel. „linie“ ist für dunklen Grund gemacht und bleibt weiß. */
:where([data-dunkel]) .knopf.hell{background:#FBFAF5;color:#2F5B53}
:where([data-dunkel]) .knopf.linie{color:#FBFAF5}
/* Besuchte Links: a:visited{color:inherit} (unten in der Datei) schlägt
   .knopf — die Schrift erbt dann die Farbe der Umgebung. Im Hellen ist
   das dunkle Tinte und fällt nicht auf, im Dunkeln wäre es Creme auf
   Salbei (2:1). Gesehen am 19.10.2026 an „Zur Wochenkarte“. */
:where([data-dunkel]) .knopf:not(.hell):not(.linie):not(.knopf-rand):not(.gedaempft):visited,
:where([data-dunkel]) .zum-inhalt:visited{color:var(--mint-tinte)}
/* Gedämpfter Knopf („in Arbeit“): weniger Salbei, hellere Schrift (7,3:1). */
:where([data-dunkel]) .knopf.gedaempft{background:rgba(143,193,177,.2);color:#CFE6DD}
:where([data-dunkel]) .knopf.gedaempft:hover{background:rgba(143,193,177,.3)}

/* Bühne am Handy: liegt auf dem dunkelgrün verschleierten Foto und ist
   damit schon „dunkel“ — Schrift bleibt wörtlich wie im Hellen. Nur bis
   999 px: Ab 1000 px steht die Bühne auf Creme, dort greifen die
   Variablen (Überschrift Salbei, Fließtext gedämpft). */
@media(max-width:999px){
  :where([data-dunkel]) .buehne,:where([data-dunkel]) .buehne h1{color:#FBFAF5}
  :where([data-dunkel]) .buehne h1 em{color:#EDDEDE}
  :where([data-dunkel]) .buehne :focus-visible{outline-color:#FBFAF5}
}
@media(min-width:1000px){
  :where([data-dunkel]) .buehne .knopf.linie{box-shadow:inset 0 0 0 1.5px rgba(169,211,197,.55)}
}

/* Karten und Kacheln: eine Stufe heller als der Grund. */
:where([data-dunkel]) .stueck,:where([data-dunkel]) .karte,
:where([data-dunkel]) .termin,:where([data-dunkel]) .zeiten,
:where([data-dunkel]) .res-karte,:where([data-dunkel]) .reiter,
:where([data-dunkel]) .karten-buehne,
:where([data-dunkel]) .sortiment .karte.ohne-link:hover{background:var(--nacht-karte)}
:where([data-dunkel]) .karte:hover{background:var(--nacht-karte-hover)}
:where([data-dunkel]) .stueck:hover{box-shadow:0 18px 34px -22px rgba(0,0,0,.7)}
:where([data-dunkel]) .sortiment{background:rgba(232,226,214,.1);border-color:rgba(232,226,214,.1)}
:where([data-dunkel]) .karte-num{color:#DDA5A8}
:where([data-dunkel]) .karte li{border-top-color:rgba(232,226,214,.14)}

/* Bestellseite (Pause-Ansicht und Formular). Halbdurchsichtige Tinte
   wird halbdurchsichtige Creme mit derselben Deckkraft — gemessen
   überall über 4,5:1. */
:where([data-dunkel]) .bestellen .lead,
:where([data-dunkel]) .bestell-aus-lead{color:rgba(232,226,214,.85)}
:where([data-dunkel]) .feld label,:where([data-dunkel]) .antwort.info{color:rgba(232,226,214,.92)}
:where([data-dunkel]) .zustimmung{color:rgba(232,226,214,.95)}
:where([data-dunkel]) .hinweis,:where([data-dunkel]) .merkzettel li,
:where([data-dunkel]) .chip-notiz,:where([data-dunkel]) .bild-stand,
:where([data-dunkel]) .feld-text,:where([data-dunkel]) .danke p,
:where([data-dunkel]) .vorlauf{color:rgba(232,226,214,.88)}
:where([data-dunkel]) .bestell-aus-fuss{color:rgba(232,226,214,.9)}
:where([data-dunkel]) .block-titel .dazu,:where([data-dunkel]) .feld-notiz{color:rgba(232,226,214,.86)}
:where([data-dunkel]) .express span.text{color:rgba(232,226,214,.78)}
:where([data-dunkel]) .bild-stand.schiefgelaufen{color:var(--nacht-rosa)}
/* Warnhinweis liegt auf rosa getöntem Kasten: helleres Rosa (5,5:1). */
:where([data-dunkel]) .antwort.warnung{color:#F4CCCE}
/* Eingabefelder: dunkel wie der Grund, mit festem Rand — 3,3:1 zur
   Bestellfläche, damit man das Feld findet. Fokus: helles Rosa. */
:where([data-dunkel]) .feld input,:where([data-dunkel]) .feld select,
:where([data-dunkel]) .feld textarea{background:#141C19;border-color:#8A928C}
/* Auswahlknöpfe: hell durchscheinend statt Papier-Weiß. Die gewählte
   Torten-Art (Wahlleiste) wird ein Salbei-Knopf wie der aktive Reiter
   der Speisekarte — ein dunkler Knopf auf dunkler Leiste fiele nicht auf. */
:where([data-dunkel]) .chip{background:rgba(232,226,214,.07);box-shadow:inset 0 0 0 1px rgba(232,226,214,.3)}
:where([data-dunkel]) .chip:hover{background:rgba(232,226,214,.14)}
:where([data-dunkel]) .chip[aria-pressed=true]{background:var(--papier);box-shadow:inset 0 0 0 2px var(--rose-tief)}
:where([data-dunkel]) .bild-waehlen:hover{background:var(--nacht-karte)}
:where([data-dunkel]) .bild-weg{color:#FBFAF5}
:where([data-dunkel]) .knopf-rand{color:#E8E2D6;box-shadow:inset 0 0 0 1px rgba(232,226,214,.5)}
:where([data-dunkel]) .knopf-rand:hover{background:rgba(232,226,214,.08)}
:where([data-dunkel]) .wahlleiste{background:rgba(20,28,25,.35);border-color:rgba(232,226,214,.16)}
:where([data-dunkel]) .wahl{color:rgba(232,226,214,.82)}
:where([data-dunkel]) .wahl.aktiv{background:var(--salbei);color:#1E3A34}
:where([data-dunkel]) .pfeil:hover{color:#1E3A34}
:where([data-dunkel]) .pfeil[disabled]:hover{border-color:rgba(232,226,214,.24)}
:where([data-dunkel]) .knopf-weiter{color:rgba(232,226,214,.85)}
:where([data-dunkel]) .torte-bild i{color:rgba(169,211,197,.7)}

/* Zeitstrahl: Die alten Fotos bleiben „aufgelegte Abzüge“, der Rahmen
   ist aber gedämpftes Creme statt Reinweiß — nachts blendet Weiß. */
:where([data-dunkel]) .zs-link a{border-bottom-color:rgba(227,180,182,.4)}
:where([data-dunkel]) .zs-bilder figure{background:#E6E0D4;box-shadow:0 3px 14px rgba(0,0,0,.35)}

/* Karte (Finden): Die Nadel liegt auf dem hellen Stadtplan und bleibt
   dunkelgrün. Die Kacheln leicht gedämpft, Straßennamen bleiben lesbar. */
:where([data-dunkel]) .karte-nadel svg{fill:#2F5B53}
:where([data-dunkel]) .leaflet-tile-pane{filter:brightness(.9)}

/* Geschichte, Finden */
:where([data-dunkel]) .portraet figcaption{color:#FBFAF5}
:where([data-dunkel]) .daten a{border-bottom-color:rgba(169,211,197,.35)}
:where([data-dunkel]) .zeit-zeile{border-top-color:rgba(232,226,214,.14)}

/* Fuß: dunkles Salbei (oben), Schrift Creme mit den Deckkräften von
   vorher. Hover wird heller statt dunkler. */
:where([data-dunkel]) footer{color:rgba(232,226,214,.85)}
:where([data-dunkel]) .fuss-gitter{border-bottom-color:rgba(232,226,214,.14)}
:where([data-dunkel]) .fuss-gitter > div + div::before{background:rgba(232,226,214,.18)}
:where([data-dunkel]) footer a,:where([data-dunkel]) .fuss-unten,
:where([data-dunkel]) .fuss-unten nav a,:where([data-dunkel]) footer a:visited,
:where([data-dunkel]) .fuss-unten nav a:visited{color:rgba(232,226,214,.9)}
:where([data-dunkel]) footer a:hover{color:#FBFAF5}
:where([data-dunkel]) .fuss-sozial a:hover{color:var(--gruen-tief)}
/* Instagram und Facebook bleiben helle Pillen auf dem Grün — so war es
   gedacht. Creme statt Papier, damit sie nicht grell sind. */
:where([data-dunkel]) .fuss-sozial a{background:#E8E2D6}
:where([data-dunkel]) .fuss-sozial a:hover{background:#FBFAF5}

/* Speisekarte: rosa Trennlinien und Punktlinien heller. */
:where([data-dunkel]) .karte-gruppe + .karte-gruppe,
:where([data-dunkel]) .karte-block{border-top-color:rgba(227,180,182,.22)}
:where([data-dunkel]) .karte-liste.knapp .speise h4::after,
:where([data-dunkel]) .karte-liste.knapp .speise .wie-h4::after{border-bottom-color:rgba(227,180,182,.4)}
:where([data-dunkel]) .reiter{border-color:rgba(232,226,214,.3)}
:where([data-dunkel]) .reiter.aktiv{border-color:var(--salbei)}
:where([data-dunkel]) .karten-fuss a{border-bottom-color:rgba(169,211,197,.35)}

/* Reservieren: fehlende Angabe als dunkles Rosa mit heller Schrift. */
:where([data-dunkel]) .res-karte.fehlt strong{color:#EDC4C6}
:where([data-dunkel]) .res-karte.fehlt b,:where([data-dunkel]) .res-karte.fehlt em{color:#C9C0BF}
:where([data-dunkel]) .platzhalter-hinweis{color:#F3E4E4}

/* Saison-Band: dunkles Salbei (oben). Überschrift Creme, die Vorzeile
   wieder im Haus-Rosa (5,9:1 — auf hellem Salbei ging das nicht). */
:where([data-dunkel]) #saison h2,:where([data-dunkel]) #saison h1.wie-h2{color:#E8E2D6}
:where([data-dunkel]) #saison .label{color:var(--nacht-rosa)}
:where([data-dunkel]) #saison h3{color:var(--gruen)}
:where([data-dunkel]) #saison .marke-saison{background:var(--rose-hell);color:var(--rose-tief)}
:where([data-dunkel]) #saison .zier path[stroke]{stroke:#E8E2D6}
:where([data-dunkel]) .saison-fussnote{color:rgba(232,226,214,.85)}

/* Fehlerseite und Impressionen: Linienknöpfe mit hellem Rand. */
:where([data-dunkel]) .fehlerseite .knopf.linie,
:where([data-dunkel]) .imp-halt{box-shadow:inset 0 0 0 1.5px rgba(169,211,197,.55)}
:where([data-dunkel]) .fehlerseite .knopf.linie:hover{background:rgba(169,211,197,.1);box-shadow:inset 0 0 0 1.5px var(--gruen)}
:where([data-dunkel]) .imp-halt:hover{background:rgba(169,211,197,.1)}
:where([data-dunkel]) .imp-halt[aria-pressed="true"]{box-shadow:none}
:where([data-dunkel]) .imp-halt[aria-pressed="true"]:hover{background:var(--salbei)}
}