/* Gänsenator - ein Stylesheet für alle Seiten.
   Regel (Dennis Hentschel, 26.10.2026): genau diese eine Datei, und jeder Wert kommt aus den Tokens unten. Kein Hardcoding in den
   Regeln darunter: keine Farbe, kein Radius, keine Schrift, keine Schattierung, kein Abstand und keine Dauer außerhalb von :root.
   Die Tokens der CI-Guideline v0.3 (Kapitel 14) stehen vollständig im ersten Block; die Blöcke danach leiten Werte daraus ab. Farben mit
   Transparenz entstehen mit color-mix() aus den Tokens, nicht aus eigenen Zahlen. Eine neue Seite hängt nur diese Datei ein.
   Schrift: Barlow 400 und 800 (OFL, selbst gehostet, Lizenztext neben der Datei). */

:root {
  /* --- CI-Tokens (Guideline v0.3, Kapitel 14) --- */
  --gold: #D5AC69;
  --gold-hell: #E2B956;
  --rot: #A31113;
  --rot-hover: #BC1A1E;
  --rot-claim: #D2262E;
  --schnabel: #D6753C;
  --burgund: #580109;
  --grund: #0B0807;
  --karte: #17120F;
  --karte-hoch: #221A15;
  --haarlinie: #3A2F27;
  --rand: #8A8076;
  --text-leise: #9C938B;
  --silber: #E9E6E1;
  --erfolg: #6BBF8A;
  --gefahr: #F0646A;
  --radius: 6px;
  --radius-rund: 50%;
  --radius-pille: 999px;            /* Sekundär-Button als Pille, sparsam und vorläufig (Guideline, Kapitel 6 und 7); alles Flächige hat --radius */
  --schatten-karte: 0 18px 40px rgba(0, 0, 0, .55);
  --glut: 0 0 0 1px rgba(213, 172, 105, .45), 0 10px 30px rgba(213, 172, 105, .14);
  --font-head: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;

  /* --- abgeleitet: Form --- */
  --radius-klein: calc(var(--radius) / 2);

  /* --- Schriftgrößen (Skala der Guideline, Kapitel 5) --- */
  --schrift-text: 18px;
  --schrift-label: 15px;
  --schrift-klein: 13px;
  --schrift-claim: clamp(24px, 3.4vw, 34px);
  --schrift-h1: clamp(40px, 6vw, 56px);
  --schrift-h2: 30px;
  --schrift-h3: 20px;
  --schrift-button: 17px;
  --zeile-text: 1.6;

  /* --- Abstände und Maße --- */
  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 28px;
  --abstand-6: 36px;
  --ziel: 44px;                     /* Bedienfläche mindestens 44 px (Guideline, Kapitel 4) */
  --ziel-klein: 40px;               /* Herkunftsvermerk */
  --box: 20px;
  --box-haken: 10px;
  --bild-max: 940px;
  --text-breite: 44rem;

  --abstand-7: 18px;
  --abstand-8: 20px;
  --abstand-9: 26px;
  --silben: 8 4 4;                  /* Silbentrennung im Fließtext: Wörter ab 8 Buchstaben, mindestens 4 davor und danach */
  --text-oben: clamp(20px, 5vh, 56px);
  --szene-oben: 3vh;
  --szene-unten: 4vh;
  --claim-zug: clamp(-56px, -6vh, -18px);
  --claim-zug-schmal: 6px;

  /* --- Zeilenhöhen und Laufweiten --- */
  --zeile-titel: 1;
  --zeile-claim: 1.05;
  --zeile-h2: 1.1;
  --zeile-h3: 1.2;
  --zeile-label: 1.3;
  --spur-claim: .1em;
  --spur-claim-schmal: .08em;
  --spur-klein: .02em;
  --spur-button: .08em;
  --spur-h1: .01em;
  --unterstrich-abstand: 4px;
  --unterstrich-abstand-text: 3px;

  /* --- Fokus (WCAG 2.4.7, 2.4.11) --- */
  --fokus-breite: 3px;
  --fokus-abstand: 2px;
  --fokus-farbe: var(--gold-hell);

  /* --- Linien --- */
  --linie: 1px;
  --linie-stark: 2px;

  /* --- Bewegung (Glanz und Glut laufen je einmal und kürzer als 5 Sekunden, WCAG 2.2.2) --- */
  --dauer-glanz: 1.5s;
  --verzug-glanz: 1.1s;
  --dauer-glut: 4.4s;
  --verzug-glut: 3.2s;
  --dauer-ein: 2.4s;
  --dauer-kurz: .15s;
  --dauer-aufbau: .25s;             /* Abholung zum gewählten Tag erscheint */
  --glut-ruhe: .32;
  --glut-1: .62;                    /* Stufen des einmaligen Flackerns der Glut */
  --glut-2: .38;
  --glut-3: .88;
  --glut-4: .34;
  --glut-5: .70;
  --glut-links: 95%;                /* Anteil der Schnabelfarbe in der Glut des linken und des rechten Glases */
  --glut-rechts: 75%;
  --glanz-anteil: 72%;             /* Anteil Silber im Glanzstreifen */

  /* --- Dampf: die Farben liest dampf.js aus diesen Werten --- */
  --dampf-warm: color-mix(in srgb, var(--schnabel) 55%, var(--silber));
  --dampf-hell: var(--silber);
  --dampf-saum: color-mix(in srgb, var(--text-leise) 70%, var(--gold));

  /* --- Telefon: Platz unter dem Bild für Claim, Status, Hinweis und Fußzeile (hochkant) bzw. für die Fußzeile (quer); Mindestbreite des Bildes --- */
  --rest-hoch: 296px;
  --rest-quer: 132px;
  --text-spalte: 18rem;             /* Spalte für Claim, Status und Hinweis neben dem Bild (Telefon quer) */
  --bild-min: 82vw;
  --tippen: color-mix(in srgb, var(--gold) 22%, transparent);
  --spur-label: .16em;

  /* --- Bildabhängige Maße (Ausschnitt 1000 x 1150, breiter Zuschnitt; Lage der Gläser und des Bratens in Anteilen des Bildes) --- */
  --bild-format: 0.870;
  --bild-anteil: 70;                /* Anteil der Fensterhöhe, den das Bild höchstens einnimmt (in vh) */
  --lx: 41.4%; --rx: 53.3%; --ly: 31%; --gx: 3.2%; --gy: 2.8%;
  --duft-unten: 27%;
  --duft-ausdehnung: 36%;

  /* --- Licht hinter dem Kopf und Glanz in den Gläsern --- */
  --licht-form: 60% 46% at 50% 40%;
  --licht-anteil: 10%;
  --licht-aus: 72%;
  --glanz-winkel: 105deg;
  --glanz-halb: .7%;
  --glanz-streifen: 500% 100%;
  --glanz-von: 56%;
  --glanz-bis: 44%;
  --herkunft-linie: 55%;

  /* --- Shop (Bestellung, Verwaltung, Küche): Layout-Vorgaben der Guideline Kapitel 6, Skala Kapitel 5, Komponenten Kapitel 7 --- */
  --weiss: #FFFFFF;                 /* Schrift auf dem Primär-Button und im Abschlussband (Guideline Kapitel 6 und 7) */
  --inhalt-breite: 1120px;
  --seitenrand: 20px;
  --abstand-bereich: clamp(56px, 9vw, 112px);
  --schrift-lead: 20px;
  --schrift-h2-shop: clamp(30px, 4.6vw, 48px);
  --schrift-preis: clamp(30px, 3.6vw, 40px);
  --schrift-chip: 17px;
  --schrift-band: clamp(24px, 3.6vw, 36px);
  --schrift-nummer: clamp(28px, 4vw, 40px);
  --schrift-start: clamp(48px, 14vw, 88px);   /* Datum des Saisonstarts im Hero, am Telefon untereinander */
  --schrift-start-quer: 72px;                  /* dasselbe quer ab 700 px: die Saison-Zeile bleibt am Desktop (1440 x 900) über dem Rand */
  --knopf-ziel: 52px;               /* Primär-Button und Mengenfeld: größer als die Mindestfläche --ziel */
  --knopf-polster: 28px;
  --menge-feld: 64px;
  --chip-breite: 9.25rem;
  --kalender-breite: 26rem;        /* Abholtage: zwei Wochenenden je Zeile, am Telefon volle Breite */
  --datum-ziel: 52px;
  --punkt: 6px;
  --karte-polster: clamp(20px, 3vw, 32px);
  --spalte-schmal: 40rem;
  --schritt-kreis: 34px;
  --rand-gold: color-mix(in srgb, var(--gold) 55%, transparent);
  --gold-tief: color-mix(in srgb, var(--gold) 72%, var(--grund));     /* Metallgold des Saisonstarts: Schatten (Lichtkante --gold-hell) */
  --glanz-streifen-start: 300% 100%;  /* Glanz über dem Datum: Streifen in der Mitte eines dreifach breiten Bildes, läuft von links nach rechts */
  --start-glanz-rand: 46%;
  --start-glanz-von: 100%;
  --start-glanz-bis: 0%;
  --verzug-start: .8s;
  --grund-hinweis: color-mix(in srgb, var(--schnabel) 14%, var(--karte));
  --grund-fehler: color-mix(in srgb, var(--gefahr) 16%, var(--karte));
  --grund-erfolg: color-mix(in srgb, var(--erfolg) 14%, var(--karte));
  --haken-lang: 12px;
  --haken-kurz: 6px;
  --haken-dreh: -45deg;
  --deckkraft-gesperrt: .62;
  --zeile-tabelle: 1.35;
  --spalte-schritt: 14rem;
  --spalte-kennzahl: 12rem;
  --spalte-kasse: 22rem;
  --zettel-breite: 21rem;           /* Küchenzettel: zwei Spalten auf dem Tablet hochkant */
  --aktion-breite: 13.5rem;        /* beide Knöpfe im Hero gleich breit */
  --abstand-bereich-schmal: clamp(28px, 4vw, 56px);
}

@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-latin-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--grund);
  color: var(--silber);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: var(--tippen);
}

a, label, input { touch-action: manipulation; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font: 400 var(--schrift-text) / var(--zeile-text) var(--font-body);
  font-synthesis: none;
  /* ein Hauch Gold hinter dem Kopf, wie das Licht des Baums im Entwurf; die Gans läuft in den Grund aus */
  background: radial-gradient(var(--licht-form), color-mix(in srgb, var(--gold) var(--licht-anteil), transparent), transparent var(--licht-aus)), var(--grund);
}

.szene {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(var(--abstand-4), var(--szene-oben), var(--abstand-6)) var(--abstand-4) clamp(var(--abstand-2), var(--szene-unten), var(--abstand-6));
  text-align: center;
}

/* Überschrift nur für Vorlesehilfen und Suchmaschinen; sichtbar ist der Titel im Bild */
.nur-lesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Bild: Breite folgt der Höhe des Fensters, damit Titel, Gans und Claim zusammen in einen Bildschirm passen */
.gans {
  --b: min(100vw, var(--bild-max), calc(var(--bild-anteil) * 1vh * var(--bild-format)));
  --b: min(100vw, var(--bild-max), calc(var(--bild-anteil) * 1svh * var(--bild-format)));
  position: relative;
  width: var(--b);
  margin: 0;
}

.gans picture, .gans img { display: block; width: 100%; height: auto; }

/* Spiegelung in den Brillengläsern: Maske = Umriss der Gläser. Glanz und Glut laufen je einmal (Tokens oben):
   danach steht die Glut ruhig. */
.brille {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: url("../img/brille-breit.png") center / 100% 100% no-repeat;
          mask: url("../img/brille-breit.png") center / 100% 100% no-repeat;
}

.brille::before,
.brille::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
}

/* Glanz: schmaler Streifen, läuft einmal von links nach rechts über die Gläser */
.brille::before {
  background: linear-gradient(var(--glanz-winkel), transparent calc(50% - var(--glanz-halb)), color-mix(in srgb, var(--silber) var(--glanz-anteil), transparent) 50%, transparent calc(50% + var(--glanz-halb))) var(--glanz-von) 0 / var(--glanz-streifen) no-repeat;
  animation: gleiten var(--dauer-glanz) ease-in-out var(--verzug-glanz) 1 both;
}

/* Glut: warme Spiegelung unten links in jedem Glas, die Mitte der Gläser steht in --lx, --rx, --ly */
.brille::after {
  background:
    radial-gradient(ellipse var(--gx) var(--gy) at var(--lx) var(--ly), color-mix(in srgb, var(--schnabel) var(--glut-links), transparent), transparent),
    radial-gradient(ellipse var(--gx) var(--gy) at var(--rx) var(--ly), color-mix(in srgb, var(--schnabel) var(--glut-rechts), transparent), transparent);
  opacity: var(--glut-ruhe);
  animation: flackern var(--dauer-glut) ease-in-out var(--verzug-glut) 1 both;
}

/* Weg des Streifens nur über die Gläser (Anfang etwas links davon, Ende etwas rechts davon) */
@keyframes gleiten {
  from { background-position: var(--glanz-von) 0; }
  to   { background-position: var(--glanz-bis) 0; }
}

@keyframes flackern {
  0%, 100% { opacity: var(--glut-ruhe); }
  17%      { opacity: var(--glut-1); }
  33%      { opacity: var(--glut-2); }
  48%      { opacity: var(--glut-3); }
  66%      { opacity: var(--glut-4); }
  83%      { opacity: var(--glut-5); }
}

/* Aromaduft: Dampf steigt aus dem Braten auf (assets/js/dampf.js, WebGL; Farben aus --dampf-warm, --dampf-hell und --dampf-saum). Die Fläche beginnt
   knapp unter der Oberkante des Bratens, damit der Dampf aus der Haut wächst. Ohne Skript, bei reduzierter Bewegung und nach dem
   Schalter in der Fußzeile gibt es ihn nicht (WCAG 2.2.2). */
.duft {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--duft-unten);
  height: var(--duft-ausdehnung);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dauer-ein) ease-out;
  color: var(--dampf-hell);
  border: 0 solid var(--dampf-warm);
  border-bottom-color: var(--dampf-saum);
}

.duft.an { opacity: 1; }

.duft canvas { display: block; width: 100%; height: 100%; }

/* Claim sitzt im auslaufenden Teil des Bildes; Rot nur ab 24 px (CI), Barlow ExtraBold in Versalien (ohne ß) */
.claim {
  position: relative;
  z-index: 2;
  margin: var(--claim-zug) 0 0;
  font: 800 var(--schrift-claim) / var(--zeile-claim) var(--font-head);
  letter-spacing: var(--spur-claim);
  text-indent: var(--spur-claim);
  text-transform: uppercase;
  color: var(--rot-claim);
}

.status {
  margin: var(--abstand-3) 0 0;
  max-width: 32ch;
  color: var(--text-leise);
}

/* Kennzeichnung des KI-Bildes: klein und leise, Kontrast bleibt 6,62:1 (Text leise auf dem Grund) */
.kredit {
  margin: var(--abstand-4) 0 0;
  font-size: var(--schrift-klein);
  letter-spacing: var(--spur-klein);
  color: var(--text-leise);
}

/* Fußzeile: Rechtliches und Schalter für die Animation mittig, der Herkunftsvermerk ganz unten, klein und leise (Rand-Ton, 5,16:1).
   Bedienflächen mindestens --ziel hoch; ab 701 px stehen Links und Schalter in einer Zeile. */
.footer {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: var(--abstand-5);
  padding: var(--abstand-1) var(--abstand-4) var(--abstand-1);
  font-size: var(--schrift-klein);
  line-height: var(--zeile-label);
  letter-spacing: var(--spur-label);
  text-transform: uppercase;
  color: var(--text-leise);
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel);
  padding: 0 var(--abstand-2);
  color: var(--text-leise);
  text-decoration: none;
  text-decoration-thickness: var(--linie);
  text-underline-offset: var(--unterstrich-abstand);
}

.footer .unten { flex: 0 0 100%; display: flex; justify-content: center; }

/* der Herkunftsvermerk bleibt kleingeschrieben (Adresse) und unterstrichen, leiser als die Links darüber */
.footer .herkunft {
  min-height: var(--ziel-klein);
  letter-spacing: var(--spur-klein);
  text-transform: none;
  color: var(--rand);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--rand) var(--herkunft-linie), transparent);
}

.footer a:focus-visible { text-decoration: underline; }

@media (hover: hover) {
  .footer a:hover { color: var(--silber); text-decoration: underline; text-decoration-thickness: var(--linie-stark); }
  .footer .herkunft:hover { color: var(--text-leise); }
}

.ruhe {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  min-height: var(--ziel);
  padding: 0 var(--abstand-2);
  cursor: pointer;
}

/* eigenes Kästchen: helle Umrandung (6,62:1 auf dem Grund), goldener Haken-Block im angehakten Zustand */
.ruhe input {
  -webkit-appearance: none;
          appearance: none;
  display: inline-grid;
  place-content: center;
  width: var(--box);
  height: var(--box);
  margin: 0;
  border: var(--linie-stark) solid var(--text-leise);
  border-radius: var(--radius-klein);
  background: transparent;
  cursor: pointer;
}

.ruhe input::after {
  content: "";
  width: var(--box-haken);
  height: var(--box-haken);
  border-radius: calc(var(--radius-klein) / 2);
  background: var(--gold);
  transform: scale(0);
  transition: transform var(--dauer-kurz) ease-out;
}

.ruhe input:checked::after { transform: scale(1); }

/* angehalten: der Duft verschwindet ganz (ein eingefrorener Dunst sähe wie ein Fehler aus) */
body:has(#ruhe:checked) .duft { display: none; }
body:has(#ruhe:checked) .brille::before { display: none; }
body:has(#ruhe:checked) .brille::after { animation: none; opacity: var(--glut-ruhe); }

.ruhe:focus-within,
a:focus-visible {
  outline: var(--fokus-breite) solid var(--fokus-farbe);
  outline-offset: var(--fokus-abstand);
}

/* Textseiten (Impressum und Datenschutz): linksbündig, eine Spalte */
.text {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--text-breite);
  margin: 0 auto;
  padding: var(--text-oben) var(--abstand-8) var(--abstand-5);
  overflow-wrap: break-word;
  hyphens: auto;
  hyphenate-limit-chars: var(--silben);
}

/* Pille: der Sekundär-Button der Guideline (transparent, Goldrand, beim Überfahren und Antippen Goldfläche mit dunkler Schrift).
   Auf der Textseite gibt es genau eine: den Weg zurück zur Startseite. Die endgültige Form von Links, Pillen und Buttons wird beim Bau
   der richtigen Seite entschieden (Dennis Hentschel, 26.10.2026). */
.text .pille {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel);
  padding: 0 var(--abstand-4);
  border: var(--linie-stark) solid var(--gold);
  border-radius: var(--radius-pille);
  font: 800 var(--schrift-button) / var(--zeile-titel) var(--font-head);
  letter-spacing: var(--spur-button);
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: background-color var(--dauer-kurz) ease-out, color var(--dauer-kurz) ease-out;
}

.text .pille:active { background: var(--gold); color: var(--grund); }

@media (hover: hover) {
  .text .pille:hover { background: var(--gold); color: var(--grund); }
}

.text .startlink { margin-bottom: var(--abstand-3); }

.text h1 {
  margin: 0 0 var(--abstand-2);
  font: 800 var(--schrift-h1) / var(--zeile-titel) var(--font-head);
  letter-spacing: var(--spur-h1);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--silber);
}

/* Sprunglinks zu den beiden Abschnitten: ruhige Textlinks in Gold in einer Zeile */
.text .sprung { display: flex; flex-wrap: wrap; column-gap: var(--abstand-5); margin-bottom: var(--abstand-2); }

.text .sprung a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel);
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: var(--linie);
  text-underline-offset: var(--unterstrich-abstand);
}

.text section { margin-top: var(--abstand-6); padding-top: var(--abstand-2); border-top: var(--linie) solid var(--haarlinie); }

.text h2 {
  margin: var(--abstand-8) 0 var(--abstand-1);
  font: 800 var(--schrift-h2) / var(--zeile-h2) var(--font-head);
  color: var(--silber);
}

.text h3 {
  margin: var(--abstand-9) 0 var(--abstand-1);
  font: 800 var(--schrift-h3) / var(--zeile-h3) var(--font-head);
  color: var(--gold);
}

.text p { margin: 0 0 var(--abstand-3); }

.text a { color: var(--silber); text-underline-offset: var(--unterstrich-abstand-text); }

/* Links im Satz: die Trefferfläche reicht über die Zeile hinaus (Antippen am Telefon), ohne den Zeilenabstand zu ändern */
.text p a { padding-block: var(--abstand-2); }

/* ===================================================================================================================
   Shop: Startseite mit Bestellung, Rückkehrseiten, Verwaltung und Küche. Komponenten nach Guideline Kapitel 7; die endgültige Form
   von Links, Pillen und Buttons legt Dennis Hentschel noch fest (26.10.2026). Bis dahin: Primär-Button und Chips mit --radius,
   höchstens eine Pille je Bereich, Sprung- und Fußzeilenlinks als Textlinks.
   =================================================================================================================== */

/* Sprungmarke für Tastatur und Vorlesehilfen: unsichtbar, bis sie den Fokus hat */
.sprung-inhalt {
  position: absolute;
  left: var(--abstand-4);
  top: calc(var(--ziel) * -2);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel);
  padding: 0 var(--abstand-4);
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--grund);
  font-weight: 800;
  text-decoration: none;
}

.sprung-inhalt:focus-visible { top: var(--abstand-4); }

body.shop main { flex: 1 0 auto; }

/* Hero der Startseite: Satz unter dem Claim, Knopf und Textlink, Saisonzeile */
.lead {
  margin: var(--abstand-3) 0 0;
  max-width: 30ch;
  font-size: var(--schrift-lead);
  line-height: var(--zeile-label);
  text-wrap: balance;
  color: var(--silber);
}

.aktion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--abstand-3) var(--abstand-5);
  margin: var(--abstand-5) 0 0;
}

.aktion .btn { min-width: var(--aktion-breite); }

/* Saisonstart (Dennis Hentschel, 27.10.2026: „Das bitte mehr Prime“): Kicker in Gold, das Datum groß in Metallgold, ein Glanz läuft
   einmal darüber (wie über die Brille, danach Ruhe; aus bei reduzierter Bewegung und mit „Animation anhalten“), darunter Uhrzeit und
   wie lange noch. Die Karte trägt die Glut der Auswahl. */
.start {
  display: grid;
  justify-items: center;
  gap: var(--abstand-1);
  margin: var(--abstand-5) 0 0;
  padding: var(--abstand-4) var(--abstand-6);
  border: var(--linie) solid var(--rand-gold);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--karte) 85%, transparent);
  box-shadow: var(--glut);
  text-align: center;
}

.start p { margin: 0; }
.start-kicker { font-size: var(--schrift-klein); line-height: var(--zeile-label); letter-spacing: var(--spur-label); text-transform: uppercase; color: var(--gold); }

.start-datum { font: 800 var(--schrift-start) / var(--zeile-titel) var(--font-head); font-variant-numeric: tabular-nums; color: var(--gold); }

/* Metallgold: senkrechter Verlauf von der Lichtkante in den Schatten, darüber ein schmaler Glanzstreifen, der einmal durchläuft;
   ohne Textverlauf im Browser bleibt das flache Gold */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .start-datum {
    background:
      linear-gradient(var(--glanz-winkel), transparent var(--start-glanz-rand), var(--silber) 50%, transparent calc(100% - var(--start-glanz-rand))) var(--start-glanz-bis) 0 / var(--glanz-streifen-start) no-repeat,
      linear-gradient(to bottom, var(--gold-hell), var(--gold) 45%, var(--gold-tief));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gleiten-start var(--dauer-glanz) ease-in-out var(--verzug-start) 1 both;
  }
}

@keyframes gleiten-start {
  from { background-position: var(--start-glanz-von) 0, 0 0; }
  to   { background-position: var(--start-glanz-bis) 0, 0 0; }
}

body:has(#ruhe:checked) .start-datum { animation: none; }
.start-zeit { color: var(--silber); }
.start-rest { margin-top: var(--abstand-1); font-size: var(--schrift-klein); line-height: var(--zeile-label); color: var(--text-leise); }

/* ab mittlerer Breite quer: Datum links, getrennt durch eine goldene Haarlinie, rechts Kicker, Uhrzeit und Rest - so bleibt die Karte
   flach genug, dass die Saison-Zeile am Desktop über dem Rand steht */
@media (min-width: 700px) {
  .start { grid-template-columns: auto auto; justify-content: center; justify-items: start; column-gap: var(--abstand-5); padding-block: var(--abstand-3); text-align: left; }
  .start-datum { grid-column: 1; grid-row: 1 / span 3; align-self: center; padding-right: var(--abstand-5); border-right: var(--linie) solid var(--rand-gold); font-size: var(--schrift-start-quer); }
  .start-kicker, .start-zeit, .start-rest { grid-column: 2; }
}

.hinweis-hero {
  margin: var(--abstand-5) 0 0;
  max-width: 34ch;
  padding: var(--abstand-3) var(--abstand-4);
  border: var(--linie) solid var(--rand-gold);
  border-radius: var(--radius);
  color: var(--silber);
  text-wrap: balance;
}

.saison {
  margin: var(--abstand-4) 0 0;
  font-size: var(--schrift-klein);
  line-height: var(--zeile-label);
  letter-spacing: var(--spur-label);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--gold);
}

/* Buttons (Guideline Kapitel 7): Primär rot mit weißer Schrift; Hover und Antippen wechseln die Fläche, der Fokus zeigt den Ring */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--knopf-ziel);
  padding: 0 var(--knopf-polster);
  border: var(--linie-stark) solid transparent;
  border-radius: var(--radius);
  font: 800 var(--schrift-button) / var(--zeile-titel) var(--font-head);
  letter-spacing: var(--spur-button);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dauer-kurz) ease-out, color var(--dauer-kurz) ease-out;
}

.btn--primary { background: var(--rot); color: var(--weiss); }
/* Sekundär (Guideline Kapitel 7): transparent mit Goldrand, beim Überfahren und Antippen Goldfläche mit dunkler Schrift; vorerst mit
   demselben Radius wie der Primär-Button, damit das Paar im Hero gleich aussieht (Form noch offen, Dennis Hentschel) */
.btn--ghost { border-color: var(--gold); background: transparent; color: var(--gold); }
.btn--ghost:active { background: var(--gold); color: var(--grund); }
.btn--primary:active { background: var(--rot-hover); }
.btn--breit { width: 100%; }

.btn[disabled], .btn[aria-busy="true"] { cursor: not-allowed; opacity: var(--deckkraft-gesperrt); }

@media (hover: hover) {
  .btn--primary:hover { background: var(--rot-hover); }
  .btn--ghost:hover { background: var(--gold); color: var(--grund); }
  .btn[disabled]:hover { background: var(--rot); }
}

.btn:focus-visible,
.menge input:focus-visible,
.menge-knopf:focus-visible,
.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible,
summary:focus-visible,
.chip:has(input:focus-visible) {
  outline: var(--fokus-breite) solid var(--fokus-farbe);
  outline-offset: var(--fokus-abstand);
}

/* Textlink in Gold mit Unterstrich (Sprunglinks, "So läuft es") */
.textlink {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel);
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: var(--linie);
  text-underline-offset: var(--unterstrich-abstand);
}

@media (hover: hover) {
  .textlink:hover { color: var(--gold-hell); text-decoration-thickness: var(--linie-stark); }
}

/* Bereiche unter dem Hero */
.bereich {
  width: 100%;
  max-width: var(--inhalt-breite);
  margin: 0 auto;
  padding: var(--abstand-bereich) var(--seitenrand) 0;
}

.bereich h2 {
  margin: 0 0 var(--abstand-5);
  font: 800 var(--schrift-h2-shop) / var(--zeile-h2) var(--font-head);
  letter-spacing: var(--spur-h1);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--silber);
}

/* Meldungen: Hinweis (Schnabel), Fehler (Gefahr), Erfolg; nie nur Farbe, immer mit Text */
.meldung {
  margin: 0 0 var(--abstand-5);
  padding: var(--abstand-3) var(--abstand-4);
  border-left: var(--fokus-breite) solid var(--schnabel);
  border-radius: var(--radius);
  background: var(--grund-hinweis);
  color: var(--silber);
}

.meldung--fehler { border-left-color: var(--gefahr); background: var(--grund-fehler); }
.meldung--erfolg { border-left-color: var(--erfolg); background: var(--grund-erfolg); }

/* Bestellformular in drei Schritten */
.bestellung { display: grid; gap: var(--abstand-6); }

.schritt { min-width: 0; margin: 0; padding: 0; border: 0; }

.schritt legend,
.schritt-titel {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  margin: 0 0 var(--abstand-4);
  padding: 0;
  font: 800 var(--schrift-h3) / var(--zeile-h3) var(--font-head);
  color: var(--silber);
}

.schritt-nr {
  display: inline-grid;
  place-content: center;
  width: var(--schritt-kreis);
  height: var(--schritt-kreis);
  border: var(--linie-stark) solid var(--gold);
  border-radius: var(--radius-rund);
  font-size: var(--schrift-label);
  color: var(--gold);
}

.hilfe { margin: 0 0 var(--abstand-4); max-width: var(--spalte-schmal); color: var(--text-leise); }
.kasse .hilfe { margin: var(--abstand-4) 0 0; }

/* Honigtopf: für Menschen unsichtbar und nicht erreichbar */
.falle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Produktkarte (Guideline Kapitel 7): Karte mit feiner Randlinie, Preis in Gold; der Klassiker (erstes Produkt, die Gans) mit goldenem
   Rahmen, weitere Produkte mit Abstand darunter */
.karte {
  padding: var(--karte-polster);
  border: var(--linie) solid var(--haarlinie);
  border-radius: var(--radius);
  background: var(--karte);
  box-shadow: var(--schatten-karte);
}

.produkt { max-width: var(--spalte-schmal); }
.produkt:first-of-type { border-color: var(--rand-gold); }
.produkt + .produkt { margin-top: var(--abstand-4); }

.produkt-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--abstand-2) var(--abstand-4);
}

.produkt h3 {
  margin: 0;
  font: 800 var(--schrift-h2) / var(--zeile-h2) var(--font-head);
  color: var(--silber);
  text-wrap: balance;
}

.preis {
  margin: 0;
  font: 800 var(--schrift-preis) / var(--zeile-titel) var(--font-head);
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  white-space: nowrap;
}

.personen {
  margin: var(--abstand-2) 0 0;
  font-size: var(--schrift-klein);
  letter-spacing: var(--spur-label);
  text-transform: uppercase;
  color: var(--gold);
}

.fakten { margin: var(--abstand-4) 0 0; padding: 0 0 0 var(--abstand-8); color: var(--silber); }
.fakten li { margin: 0 0 var(--abstand-1); }
.fakten li::marker { color: var(--gold); }
.dazu { margin: var(--abstand-3) 0 0; color: var(--silber); }

/* Aufklappliste (Allergene, Fragen): Karte hoch beim Öffnen */
details {
  margin: var(--abstand-4) 0 0;
  border: var(--linie) solid var(--haarlinie);
  border-radius: var(--radius);
}

details[open] { background: var(--karte-hoch); }

summary {
  display: flex;
  align-items: center;
  min-height: var(--ziel);
  padding: 0 var(--abstand-4);
  cursor: pointer;
  color: var(--silber);
  font-weight: 800;
}

summary::marker { color: var(--gold); }
details > p { margin: 0; padding: 0 var(--abstand-4) var(--abstand-3); color: var(--silber); }
details > p:last-child { padding-bottom: var(--abstand-4); }

/* Menge: Zahlenfeld mit Knöpfen minus und plus (die Knöpfe schaltet shop.js frei; ohne Skript bleibt das Zahlenfeld) */
.menge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-3) var(--abstand-4); margin: var(--abstand-5) 0 0; }
.menge > label { color: var(--text-leise); }
.menge-feld { display: inline-flex; align-items: center; gap: var(--abstand-2); }

.menge input {
  width: var(--menge-feld);
  min-height: var(--knopf-ziel);
  border: var(--linie) solid var(--rand);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--silber);
  font: 800 var(--schrift-chip) / var(--zeile-titel) var(--font-head);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.menge input { -moz-appearance: textfield; appearance: textfield; }
.menge input::-webkit-inner-spin-button,
.menge input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.menge-knopf {
  width: var(--knopf-ziel);
  height: var(--knopf-ziel);
  border: var(--linie-stark) solid var(--gold);
  border-radius: var(--radius);
  background: transparent;
  color: var(--gold);
  font: 800 var(--schrift-h3) / var(--zeile-titel) var(--font-head);
  cursor: pointer;
}

.menge-knopf:active { background: var(--gold); color: var(--grund); }

@media (hover: hover) {
  .menge-knopf:hover { background: var(--gold); color: var(--grund); }
}

.menge-knopf[disabled] { opacity: var(--deckkraft-gesperrt); cursor: not-allowed; }

/* Abholtage: erst der Tag, dann die Uhrzeit (Dennis Hentschel, 26.10.2026: „nimmt viel Platz ein“, „erstmal Datum wählen, dann kommt
   darunter Uhrzeit … es baut sich auf“). Nach Monaten, darin je Abholwochenende eine Gruppe aus Kacheln mit Wochentag und Tageszahl, zwei
   Gruppen je Zeile; hat eine Woche mehr als drei Abholtage, steht jede Gruppe in einer eigenen Zeile. Nach der Wahl erscheint unter dem
   Kalender die Abholung mit Uhrzeit, Ort und, wenn es knapp wird, den Restplätzen. Auswahl wie die Chips der Guideline (Kapitel 7): Rand Gold,
   Karte hoch, Glut; wenige Plätze: Punkt in der Hinweisfarbe; ausgebucht: leise und durchgestrichen; zu spät: blass. Den vollen Text
   („Samstag, 14.11.2026, ab 15:00 Uhr: noch 3 frei“) bekommen Vorlesehilfen je Kachel. */
.kalender { display: grid; gap: var(--abstand-4); max-width: var(--kalender-breite); }
.monat { display: grid; gap: var(--abstand-2); }
.monat-name { margin: 0; font-size: var(--schrift-klein); line-height: var(--zeile-label); letter-spacing: var(--spur-label); text-transform: uppercase; color: var(--gold); }
.monat-tage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-2) var(--abstand-3); }
.woche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abstand-1); }
.kalender--1 .woche { grid-template-columns: minmax(0, 1fr); }
.kalender--2 .woche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kalender--4 .woche { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kalender--5 .woche { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kalender--6 .woche { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kalender--7 .woche { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kalender--4 .monat-tage, .kalender--5 .monat-tage, .kalender--6 .monat-tage, .kalender--7 .monat-tage { grid-template-columns: minmax(0, 1fr); }

.datum {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: var(--datum-ziel);
  border: var(--linie) solid var(--haarlinie);
  border-radius: var(--radius);
  background: var(--karte);
  color: var(--silber);
  cursor: pointer;
  transition: border-color var(--dauer-kurz) ease-out;
}

.datum input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.datum-wt { font-size: var(--schrift-klein); line-height: var(--zeile-label); color: var(--text-leise); }
.datum-nr { font: 800 var(--schrift-chip) / var(--zeile-titel) var(--font-head); font-variant-numeric: tabular-nums; }
.datum--vorbei { border-color: transparent; background: transparent; color: var(--haarlinie); cursor: default; }
.datum--vorbei .datum-wt { color: inherit; }

@media (hover: hover) {
  label.datum:hover { border-color: var(--gold); }
}

.datum:has(input:checked) { border-color: var(--gold); background: var(--karte-hoch); box-shadow: var(--glut); color: var(--gold); }
.datum:has(input:checked) .datum-wt { color: var(--silber); }
.datum:has(input:focus-visible) { outline: var(--fokus-breite) solid var(--fokus-farbe); outline-offset: var(--fokus-abstand); }
.datum:has(input:disabled) { cursor: not-allowed; }
.datum:has(input:disabled) input { cursor: not-allowed; }
.datum:has(input:disabled):not(.datum--voll) .datum-nr { color: var(--text-leise); }
.datum--voll { background: transparent; }
.datum--voll .datum-nr { color: var(--text-leise); text-decoration: line-through; }

/* wenige Plätze frei: Punkt oben rechts in der Kachel, wie in der Legende */
.datum--knapp::after, .legende-punkt {
  content: "";
  display: inline-block;
  width: var(--punkt);
  height: var(--punkt);
  border-radius: var(--radius-rund);
  background: var(--schnabel);
}

.datum--knapp::after { position: absolute; top: var(--abstand-1); right: var(--abstand-1); }

.legende { margin: var(--abstand-3) 0 0; font-size: var(--schrift-klein); color: var(--text-leise); }
.legende-voll { text-decoration: line-through; }

/* die Abholung zum gewählten Tag: baut sich unter dem Kalender auf, die Uhrzeit ist das Neue und steht groß */
.abholung {
  max-width: var(--kalender-breite);
  margin: var(--abstand-4) 0 0;
  padding: var(--abstand-3) var(--abstand-4);
  border: var(--linie) solid var(--haarlinie);
  border-left-color: var(--gold);
  border-radius: var(--radius);
  background: var(--karte);
}

.abholung:not([hidden]) { animation: aufbauen var(--dauer-aufbau) ease-out both; }
.abholung p { margin: 0; }
.abholung-tag { font-size: var(--schrift-klein); line-height: var(--zeile-label); color: var(--text-leise); }
.abholung-zeit { margin-top: var(--abstand-1); font: 800 var(--schrift-h3) / var(--zeile-h3) var(--font-head); color: var(--gold); }
.abholung p.abholung-ort { margin-top: var(--abstand-1); font-size: var(--schrift-klein); line-height: var(--zeile-label); color: var(--silber); }

@keyframes aufbauen {
  from { opacity: 0; transform: translateY(var(--abstand-2)); }
  to { opacity: 1; transform: none; }
}

/* Summe und Kasse: eigene Karte mit der Auswahl in Worten */
.kasse { max-width: var(--spalte-schmal); }
.auswahl { margin: 0 0 var(--abstand-3); color: var(--silber); }

.summe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 var(--abstand-4);
  padding: var(--abstand-3) 0;
  border-top: var(--linie) solid var(--haarlinie);
  color: var(--text-leise);
}

.summe strong { font: 800 var(--schrift-preis) / var(--zeile-titel) var(--font-head); font-variant-numeric: tabular-nums; color: var(--gold); }

/* breite Fenster: Produkt und Abholtag links, Summe und Kasse rechts und beim Scrollen sichtbar */
@media (min-width: 960px) {
  .bestellung { grid-template-columns: minmax(0, 1fr) var(--spalte-kasse); align-items: start; column-gap: var(--abstand-bereich-schmal); }
  .bestellung > .schritt:not(.kasse) { grid-column: 1; }
  .bestellung > .kasse { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: var(--abstand-5); }
  .produkt { max-width: none; }
}

/* So läuft es: echte Reihenfolge, deshalb nummeriert */
.schritte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--spalte-schritt), 1fr));
  gap: var(--abstand-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

.schritte li { counter-increment: schritt; display: grid; gap: var(--abstand-2); align-content: start; }

.schritte li::before {
  content: counter(schritt);
  display: inline-grid;
  place-content: center;
  width: var(--schritt-kreis);
  height: var(--schritt-kreis);
  border: var(--linie-stark) solid var(--gold);
  border-radius: var(--radius-rund);
  font-weight: 800;
  color: var(--gold);
}

.schritte strong { font: 800 var(--schrift-h3) / var(--zeile-h3) var(--font-head); color: var(--silber); }
.schritte span { color: var(--text-leise); }

.fragen details { max-width: var(--spalte-schmal); }

/* Abschlussband (Guideline Kapitel 6): rote Fläche, weißer Schlusssatz direkt vor der Fußzeile; Mischschreibung wegen "genießen" */
.band {
  margin: var(--abstand-bereich) 0 0;
  padding: var(--abstand-6) var(--seitenrand);
  background: var(--rot);
  text-align: center;
}

.band p {
  margin: 0 auto;
  max-width: 28ch;
  font: 800 var(--schrift-band) / var(--zeile-h2) var(--font-head);
  text-wrap: balance;
  color: var(--weiss);
}

body.shop .footer { padding-top: var(--abstand-4); }

/* Rückkehrseiten (Danke, Abbruch, Fehler, Vorschau): mittig, eine Pille zurück */
.text--mitte { text-align: center; }
.text--mitte p { margin-left: auto; margin-right: auto; max-width: var(--spalte-schmal); }
.claim--klein { margin: 0 0 var(--abstand-5); }

.nummer { color: var(--text-leise); }
.nummer strong { display: block; font: 800 var(--schrift-nummer) / var(--zeile-titel) var(--font-head); letter-spacing: var(--spur-button); color: var(--gold); }

.pille {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel);
  padding: 0 var(--abstand-4);
  border: var(--linie-stark) solid var(--gold);
  border-radius: var(--radius-pille);
  font: 800 var(--schrift-button) / var(--zeile-titel) var(--font-head);
  letter-spacing: var(--spur-button);
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: background-color var(--dauer-kurz) ease-out, color var(--dauer-kurz) ease-out;
}

.pille:active { background: var(--gold); color: var(--grund); }

@media (hover: hover) {
  .pille:hover { background: var(--gold); color: var(--grund); }
}

.pille:focus-visible { outline: var(--fokus-breite) solid var(--fokus-farbe); outline-offset: var(--fokus-abstand); }

/* Formulare der Verwaltung, der Küche und der Vorschau */
.formular { display: grid; gap: var(--abstand-4); max-width: var(--spalte-schmal); margin: var(--abstand-5) auto 0; text-align: left; }
.formular--zeile { display: flex; flex-wrap: wrap; align-items: end; gap: var(--abstand-3); margin: 0; max-width: none; }

.feld { display: grid; gap: var(--abstand-1); color: var(--text-leise); }

.feld input, .feld select, .feld textarea {
  min-height: var(--ziel);
  padding: 0 var(--abstand-3);
  border: var(--linie) solid var(--rand);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--silber);
  font: 400 var(--schrift-text) / var(--zeile-label) var(--font-body);
}

.feld textarea { min-height: calc(var(--ziel) * 2); padding: var(--abstand-2) var(--abstand-3); }
.feld--kurz input { width: var(--chip-breite); }
.haken { display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: var(--ziel); color: var(--silber); }

/* Verwaltung und Küche: ruhige Arbeitsflächen mit Tabellen */
.arbeit {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--inhalt-breite);
  margin: 0 auto;
  padding: var(--abstand-5) var(--seitenrand) var(--abstand-6);
}

.arbeit .formular { margin-left: 0; margin-right: 0; }
.arbeit h1 { margin: 0 0 var(--abstand-4); font: 800 var(--schrift-h2) / var(--zeile-h2) var(--font-head); color: var(--silber); }
.arbeit h2 { margin: var(--abstand-6) 0 var(--abstand-3); font: 800 var(--schrift-h3) / var(--zeile-h3) var(--font-head); color: var(--gold); }
.arbeit p { margin: 0 0 var(--abstand-3); }
.arbeit a { color: var(--gold); text-underline-offset: var(--unterstrich-abstand-text); }

.leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2) var(--abstand-5);
  padding: var(--abstand-2) var(--seitenrand);
  border-bottom: var(--linie) solid var(--haarlinie);
  background: var(--karte);
}

.leiste .marke { font: 800 var(--schrift-label) / var(--zeile-titel) var(--font-head); letter-spacing: var(--spur-label); text-transform: uppercase; color: var(--gold); }
.leiste nav { display: flex; flex-wrap: wrap; gap: 0 var(--abstand-4); }
.leiste a { display: inline-flex; align-items: center; min-height: var(--ziel); color: var(--silber); text-decoration: none; }
.leiste a[aria-current="page"] { color: var(--gold); text-decoration: underline; text-underline-offset: var(--unterstrich-abstand); }
.leiste form { margin-left: auto; }
.leiste button { min-height: var(--ziel); border: 0; background: transparent; color: var(--text-leise); font: inherit; cursor: pointer; text-decoration: underline; }

.tabelle-rahmen { overflow-x: auto; border: var(--linie) solid var(--haarlinie); border-radius: var(--radius); }

.tabelle { width: 100%; border-collapse: collapse; font-size: var(--schrift-label); line-height: var(--zeile-tabelle); }
.tabelle th, .tabelle td { padding: var(--abstand-2) var(--abstand-3); border-bottom: var(--linie) solid var(--haarlinie); text-align: left; vertical-align: top; }
.tabelle th { font-weight: 800; letter-spacing: var(--spur-klein); color: var(--text-leise); white-space: nowrap; }
.tabelle td.zahl, .tabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle tr:last-child td { border-bottom: 0; }
/* Links in Tabellen: Trefferfläche über die Zeile hinaus (mindestens 24 px, WCAG 2.5.8) */
.tabelle a { display: inline-block; padding-block: var(--abstand-1); }
.haken input { width: var(--box); height: var(--box); margin: 0; accent-color: var(--gold); }

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--spalte-kennzahl), 1fr)); gap: var(--abstand-3); margin: 0 0 var(--abstand-4); }
.kennzahl { padding: var(--abstand-3) var(--abstand-4); border: var(--linie) solid var(--haarlinie); border-radius: var(--radius); background: var(--karte); }
.kennzahl strong { display: block; font: 800 var(--schrift-h2) / var(--zeile-titel) var(--font-head); font-variant-numeric: tabular-nums; color: var(--gold); }
.kennzahl span { color: var(--text-leise); font-size: var(--schrift-klein); }

.marke-status { display: inline-block; padding: 0 var(--abstand-2); border: var(--linie) solid var(--haarlinie); border-radius: var(--radius); font-size: var(--schrift-klein); white-space: nowrap; }
.marke-status--gut { border-color: var(--erfolg); color: var(--erfolg); }
.marke-status--warn { border-color: var(--schnabel); color: var(--schnabel); }
.marke-status--schlecht { border-color: var(--gefahr); color: var(--gefahr); }

.knopf-klein {
  min-height: var(--ziel);
  padding: 0 var(--abstand-4);
  border: var(--linie-stark) solid var(--gold);
  border-radius: var(--radius);
  background: transparent;
  color: var(--gold);
  font: 800 var(--schrift-label) / var(--zeile-titel) var(--font-head);
  letter-spacing: var(--spur-klein);
  cursor: pointer;
}

.knopf-klein:active, .knopf-klein[aria-pressed="true"], .knopf-klein[aria-current="page"] { background: var(--gold); color: var(--grund); }
a.knopf-klein { display: inline-flex; align-items: center; text-decoration: none; }

@media (hover: hover) {
  .knopf-klein:hover { background: var(--gold); color: var(--grund); }
}

.knopf-klein:focus-visible { outline: var(--fokus-breite) solid var(--fokus-farbe); outline-offset: var(--fokus-abstand); }

.geheim { padding: var(--abstand-3) var(--abstand-4); border: var(--linie-stark) dashed var(--gold); border-radius: var(--radius); overflow-wrap: anywhere; }
.geheim code { font-size: var(--schrift-label); color: var(--silber); }

/* Küchenzettel: große Flächen für das Tablet, Bestellnummer groß */
.zettel-tage { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: 0 0 var(--abstand-5); }
.zettel-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--zettel-breite), 1fr)); gap: var(--abstand-3); margin: 0; padding: 0; list-style: none; }
.zettel-stand { display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-5); margin: 0 0 var(--abstand-4); color: var(--text-leise); }
.zettel-stand strong { color: var(--silber); }
.zettel { display: grid; gap: var(--abstand-3); padding: var(--abstand-4); border: var(--linie) solid var(--haarlinie); border-radius: var(--radius); background: var(--karte); }
.zettel--fertig { border-color: var(--erfolg); }
.zettel--abgeholt { opacity: var(--deckkraft-gesperrt); }
.zettel-nr { font: 800 var(--schrift-h2) / var(--zeile-titel) var(--font-head); letter-spacing: var(--spur-button); color: var(--gold); }
.zettel-was { font-size: var(--schrift-lead); color: var(--silber); }
/* vier Statusknöpfe gleich breit, zwei mal zwei: auf dem Tablet ohne einzelnen Nachzügler in der zweiten Zeile */
.zettel-aktionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-2); }

/* schmale Fenster: Bildausschnitt 780 x 834 und angepasste Lage von Gläsern und Braten (var() gilt nicht in Medienabfragen,
   die Grenze 700 px steht deshalb hier und in index.html bei den Bildquellen) */
@media (max-width: 700px) {
  :root { --bild-format: 0.935; --ly: 33.3%; --gx: 3.6%; --gy: 3.4%; --duft-unten: 22%; }
  /* Telefon hochkant: das Bild bekommt die Höhe, die nach Abzug von Text und Fußzeile bleibt, nie weniger als --bild-min der Breite */
  .gans {
    --b: min(100vw, var(--bild-max), max(calc((100svh - var(--rest-hoch)) * var(--bild-format)), var(--bild-min)));
  }
  .brille {
    -webkit-mask-image: url("../img/brille-schmal.png");
            mask-image: url("../img/brille-schmal.png");
  }
  .claim { margin-top: var(--claim-zug-schmal); letter-spacing: var(--spur-claim-schmal); text-indent: var(--spur-claim-schmal); }
  /* Saisonzeile am Telefon in zwei Zeilen statt mit Trennpunkt am Zeilenanfang */
  .saison span { display: block; }
  .saison .trenner { display: none; }
}

@media (min-width: 701px) {
  .footer { column-gap: var(--abstand-5); }
}

@media (min-width: 768px) {
  :root { --seitenrand: 32px; }
}

/* Telefon quer: Bild links, Claim, Status und Hinweis rechts daneben, damit nichts scrollen muss */
@media (orientation: landscape) and (max-height: 520px) {
  .szene {
    display: grid;
    grid-template-columns: auto minmax(0, var(--text-spalte));
    grid-template-rows: 1fr auto auto auto 1fr;
    justify-content: center;
    align-items: center;
    column-gap: var(--abstand-6);
  }
  .gans {
    grid-column: 1;
    grid-row: 1 / -1;
    --b: min(100vw, var(--bild-max), calc((100svh - var(--rest-quer)) * var(--bild-format)));
  }
  .claim, .status, .kredit { grid-column: 2; justify-self: center; margin-top: 0; }
  .claim { grid-row: 2; }
  .status { grid-row: 3; margin-top: var(--abstand-3); }
  .kredit { grid-row: 4; margin-top: var(--abstand-4); }
}

@media (prefers-reduced-motion: reduce) {
  .brille::before { display: none; }
  .brille::after  { animation: none; opacity: var(--glut-ruhe); }
  .duft { display: none; }
  .abholung:not([hidden]) { animation: none; }
  .start-datum { animation: none; }
}