/* ==========================================================================
   IMBIZZA — Design System
   Gipfeldesign · 2026
   Reihenfolge: Fonts › Tokens › Reset › Typografie › Layout › Komponenten
   ========================================================================== */

/* --- Schriften (lokal gehostet, DSGVO-konform) ---------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Flächen */
  --ink-900: #101010;
  --ink-800: #171717;
  --ink-700: #242424;
  --ink-600: #2f2f2f;
  --ink-500: #3d3d3d;
  /* Rahmen von Bedienelementen: hell genug für WCAG 1.4.11 (3:1) */
  --ctrl-line: #7a7468;
  --ctrl-line-light: #8b8477;
  --cream:   #f5f1e8;
  --cream-2: #ebe5d7;
  --cream-3: #ddd5c2;
  --white:   #ffffff;

  /* Akzent */
  --ochre:      #d6a51d;
  --ochre-hi:   #f2be22;
  --ochre-deep: #7a5a05;   /* Ockerton mit AA-Kontrast auf hellem Grund */

  /* Text */
  --tx-on-dark:      #f5f1e8;
  --tx-on-dark-soft: #d2ccbf;
  --tx-on-dark-mute: #a09a8e;
  --tx-on-light:      #171717;
  --tx-on-light-mute: #635e52;

  /* Zustände */
  --ok:    #4f9d5d;
  --warn:  #d6a51d;
  --error: #e2604a;

  /* Raster */
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* Rhythmus */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: clamp(3.5rem, 8vw, 6.5rem);

  /* Form */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;

  /* Bewegung */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur:  .42s;
  --dur-fast: .18s;

  --header-h: 66px;
  --shadow-drawer: -18px 0 60px rgba(0,0,0,.5);
}

@media (min-width: 60rem) { :root { --header-h: 80px; } }

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
/* Sprungziele dürfen nicht unter der Kopfzeile verschwinden. Auf der
   Speisekarte klebt zusätzlich die Kategorienleiste darunter. */
[data-menuroot] { --sticky-extra: 60px; }
section[id], div[id], [data-orderhost] {
  scroll-margin-top: calc(var(--header-h) + var(--sticky-extra, 0px) + 14px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tx-on-dark);
  background: var(--ink-800);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

[hidden] { display: none !important; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 3px solid var(--ochre-hi);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 200;
  background: var(--ochre-hi); color: var(--ink-800);
  padding: .75rem 1.25rem; font-weight: 600; border-radius: var(--r-md);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: .75rem; }

.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --- Typografie ----------------------------------------------------------- */
.display, h1, h2, h3, .h1, .h2, .h3 {
  font-family: 'Archivo', 'Archivo Narrow', Impact, system-ui, sans-serif;
  font-weight: 800;
  font-stretch: 82%;
  line-height: .96;
  letter-spacing: -.015em;
  text-transform: uppercase;
  text-wrap: balance;
}

.h-hero  { font-size: clamp(2.9rem, 10.5vw, 6.5rem); font-stretch: 78%; letter-spacing: -.022em; }
.h-sect  { font-size: clamp(1.95rem, 5.4vw, 3.4rem); }
.h-sub   { font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-stretch: 88%; letter-spacing: -.008em; }
.h-item  { font-size: clamp(1.05rem, 2.1vw, 1.3rem); font-stretch: 90%; letter-spacing: -.005em; line-height: 1.05; }

.lead {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  color: var(--tx-on-dark-mute);
  max-width: 46ch;
}
.small { font-size: .875rem; line-height: 1.5; }
/* Kontextabhängige Zurücknahme: derselbe Klassenname funktioniert auf dunklem
   und hellem Grund, ohne dass irgendwo eine Farbe fest verdrahtet wird. */
.muted { color: var(--tx-on-dark-mute); }
.on-light .muted { color: var(--tx-on-light-mute); }
.accent { color: var(--ochre); }
.on-light .accent { color: var(--ochre-deep); }
.micro { font-size: .78rem; line-height: 1.45; }

/* Rubrik mit Klammer-Motiv aus dem Logo */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  /* In Grid-Containern würde die Rubrik sonst auf volle Spaltenbreite gedehnt. */
  width: fit-content; justify-self: start; align-self: start;
  font-family: 'Instrument Sans', sans-serif;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--ochre);
}
/* Kurzer Strich statt der Klammern aus dem Logo. */
.eyebrow::before {
  content: ''; flex: none; width: 26px; height: 2px;
  background: currentColor;
}
/* Die Ziffer bewusst in Grau statt in abgeschwächtem Ocker – halbtransparentes
   Ocker fällt unter den Kontrastwert von 4,5:1. */
.eyebrow .num { font-variant-numeric: tabular-nums; color: var(--tx-on-dark-mute); }

.on-light .eyebrow { color: var(--ochre-deep); }
.on-light .eyebrow .num { color: var(--tx-on-light-mute); }

.price {
  font-family: 'Archivo', sans-serif;
  font-weight: 700; font-stretch: 88%;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* --- Layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s9); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.on-dark  { background: var(--ink-800); color: var(--tx-on-dark); }
.on-dark-2 { background: var(--ink-700); color: var(--tx-on-dark); }
.on-light { background: var(--cream);   color: var(--tx-on-light); }
.on-light .lead { color: var(--tx-on-light-mute); }
.on-light .small-mute { color: var(--tx-on-light-mute); }

.sect-head { display: grid; gap: var(--s4); margin-bottom: var(--s7); max-width: 60ch; }
.sect-head--split {
  max-width: none;
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .sect-head--split { grid-template-columns: minmax(0,1fr) auto; align-items: end; }
  .sect-head--split .sect-head__aside { justify-self: end; }
}

/* Ockerne Trennlinie als wiederkehrendes Detail */
.rule {
  height: 2px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--ochre) 0 12%, currentColor 12% 12.5%, transparent 12.5%);
  opacity: .28;
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ochre-hi);
  --btn-tx: var(--ink-800);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .8rem 1.4rem;
  background: var(--btn-bg); color: var(--btn-tx);
  font-weight: 600; font-size: .95rem; letter-spacing: .005em;
  border-radius: var(--r-md); border: 2px solid var(--btn-bg);
  text-decoration: none; text-align: center;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn:hover { --btn-bg: var(--ochre); }
.btn:active { transform: translateY(1px) scale(.995); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn--ghost {
  --btn-bg: transparent; --btn-tx: var(--tx-on-dark);
  border-color: var(--ink-500);
}
.btn--ghost:hover { --btn-bg: transparent; border-color: var(--ochre); color: var(--ochre-hi); }
.on-light .btn--ghost { --btn-tx: var(--tx-on-light); border-color: var(--cream-3); }
.on-light .btn--ghost:hover { border-color: var(--ochre-deep); color: var(--ochre-deep); }

.btn--outline { --btn-bg: transparent; --btn-tx: var(--ochre-hi); border-color: var(--ochre); }
.btn--outline:hover { --btn-bg: var(--ochre-hi); --btn-tx: var(--ink-800); }

.btn--lg { min-height: 56px; padding: 1rem 1.9rem; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn--sm { min-height: 40px; padding: .5rem 1rem; font-size: .875rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; text-decoration: none;
  color: var(--ochre-hi);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.link-arrow:hover { border-color: currentColor; gap: .75rem; }
.on-light .link-arrow { color: var(--ochre-deep); }
.link-arrow svg { flex: none; }

/* --- Header --------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(16,16,16,.94);
  border-bottom: 1px solid var(--ink-600);
  backdrop-filter: saturate(140%) blur(8px);
}
.hdr__in {
  height: var(--header-h);
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem);
}
.hdr__logo { display: flex; align-items: center; flex: none; text-decoration: none; }
.hdr__logo img { width: clamp(118px, 17vw, 156px); height: auto; }

.hdr__nav { display: none; margin-inline-start: auto; }
@media (min-width: 62rem) { .hdr__nav { display: flex; gap: 1.75rem; align-items: center; } }
.hdr__nav a {
  text-decoration: none; font-weight: 500; font-size: .95rem;
  color: var(--tx-on-dark); padding: .4rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.hdr__nav a:hover { color: var(--ochre-hi); }
.hdr__nav a[aria-current="page"] { border-color: var(--ochre); color: var(--ochre-hi); }

.hdr__act { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
@media (min-width: 62rem) { .hdr__act { margin-inline-start: 0; } }

/* Anrufen ist auf dem Handy die wichtigste Handlung und bleibt deshalb immer
   sichtbar – klein als Symbolknopf, ab Tablet mit ausgeschriebener Nummer. */
.hdr__tel {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; flex: none;
  border: 1px solid var(--ink-500); border-radius: var(--r-md);
  text-decoration: none; font-weight: 600; font-size: .95rem;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.hdr__tel:hover { color: var(--ochre-hi); border-color: var(--ochre); }
.hdr__tel span { display: none; }
@media (min-width: 46rem) {
  .hdr__tel {
    display: inline-flex; align-items: center; gap: .5rem;
    width: auto; height: auto; min-height: 46px; padding: .5rem .85rem;
  }
  .hdr__tel span { display: inline; }
}

.hdr__cta { display: none; }
@media (min-width: 74rem) { .hdr__cta { display: inline-flex; } }

/* Warenkorb-Knopf */
.cart-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r-md);
  border: 1px solid var(--ink-500);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.cart-btn:hover { border-color: var(--ochre); }
.cart-btn__count {
  position: absolute; top: -6px; inset-inline-end: -6px;
  min-width: 21px; height: 21px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--ochre-hi); color: var(--ink-800);
  font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  border-radius: 11px;
  transform: scale(0); transition: transform .26s var(--ease);
}
.cart-btn__count.is-on { transform: scale(1); }
.cart-btn.is-bumped { animation: bump .38s var(--ease); }
@keyframes bump { 30% { transform: scale(1.13); } 100% { transform: scale(1); } }

.burger {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--r-md);
  border: 1px solid var(--ink-500);
}
@media (min-width: 62rem) { .burger { display: none; } }
.burger span, .burger span::before, .burger span::after {
  content: ''; display: block; width: 19px; height: 2px;
  background: var(--tx-on-dark); border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.burger span::before { transform: translateY(-6px); }
.burger span::after  { transform: translateY(4px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

/* Mobile Menü */
.mnav {
  position: fixed; inset: var(--header-h) 0 auto 0; z-index: 88;
  background: var(--ink-900); border-bottom: 1px solid var(--ink-600);
  padding: var(--s5) var(--gutter) var(--s6);
  display: grid; gap: .25rem;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility var(--dur);
}
.mnav.is-open { transform: none; opacity: 1; visibility: visible; }
.mnav a {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 84%;
  text-transform: uppercase; font-size: 1.6rem; letter-spacing: -.01em;
  text-decoration: none; padding: .6rem 0;
  border-bottom: 1px solid var(--ink-700);
}
.mnav a:last-of-type { border-bottom: 0; }
.mnav .btn { margin-top: var(--s4); }
@media (min-width: 62rem) { .mnav { display: none; } }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ink-900);
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3.5rem, 9vw, 7rem);
  min-height: min(84svh, 720px);
  display: grid; align-items: center;
}

/* Hintergrundvideo.
   Der Text steht links, das Motiv liegt rechts im Bild — deshalb rückt der
   Ausschnitt auf schmalen Schirmen nach rechts, damit Spieß und Dürüm sichtbar
   bleiben und hinter der Schrift ruhige Fläche entsteht. */
.hero__bg { position: absolute; inset: 0; z-index: -1; background: var(--ink-900); }
.hero__video {
  width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%;
  display: block;
}
@media (min-width: 60rem) {
  .hero__video { object-position: 60% 50%; }
}

/* Abdunklung. Drei Lagen: links kräftig für die Schrift, unten der Übergang
   in den nächsten Abschnitt, dazu eine gleichmäßige Grundabdunklung.
   Sie hält den Kontrast der Überschrift auch über den hellsten Flammen. */
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(16,16,16,.97) 0%, rgba(16,16,16,.94) 30%,
                    rgba(16,16,16,.86) 50%, rgba(16,16,16,.5) 66%,
                    rgba(16,16,16,.3) 82%, rgba(16,16,16,.45) 100%),
    linear-gradient(to top, var(--ink-900) 2%, rgba(16,16,16,0) 30%),
    rgba(16,16,16,.34);
}
@media (max-width: 60rem) {
  .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(16,16,16,.96) 0%, rgba(16,16,16,.93) 24%,
                      rgba(16,16,16,.84) 48%, rgba(16,16,16,.5) 72%, var(--ink-900) 99%),
      rgba(16,16,16,.3);
  }
}

/* Knopf zum Anhalten und Starten des Hintergrundvideos.
   Er liegt außerhalb von .hero__bg, weil der Bereich aria-hidden ist und
   ein bedienbares Element darin für Vorlesegeräte nicht erreichbar wäre.
   Sichtbar bleibt er dezent; steht das Video, tritt er hervor. */
.hero__vidbtn {
  position: absolute; z-index: 3;
  /* Oben rechts, direkt unter der Kopfzeile: dort ist der Bereich immer im
     Blick, auch wenn der Hero höher ist als der Bildschirm. */
  inset-block-start: .9rem; inset-inline-end: .9rem;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--ctrl-line); border-radius: 50%;
  background: rgba(16,16,16,.7); color: var(--tx-on-dark);
  opacity: .55;
  transition: opacity var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.hero__vidbtn:hover,
.hero__vidbtn:focus-visible { opacity: 1; border-color: var(--ochre); color: var(--ochre-hi); }
/* Steht das Video, ist der Knopf das Angebot, es zu starten — dann fällt er auf. */
.hero__vidbtn:not(.is-playing) { opacity: 1; border-color: var(--ochre); color: var(--ochre-hi); }
.hero__vidbtn .i-pause { display: none; }
.hero__vidbtn.is-playing .i-pause { display: block; }
.hero__vidbtn.is-playing .i-play { display: none; }
.hero__vidbtn__icons { display: grid; place-items: center; }
@media (min-width: 60rem) {
  .hero__vidbtn { inset-block-start: 1.3rem; inset-inline-end: 1.3rem; }
}

/* dezente Ockerglut, kein Verlaufs-Blob */
.hero::before {
  content: ''; position: absolute; inset: auto -10% -40% 25%;
  height: 70%; z-index: -1;
  background: radial-gradient(60% 60% at 50% 50%, rgba(214,165,29,.16), transparent 70%);
  pointer-events: none;
}
/* Zweite Ausprägung: Kopf der Speisekarte. Gleiche Bühne, weniger Höhe, und
   der Inhalt beginnt oben statt mittig. */
.hero--sub {
  min-height: 0;
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
  align-items: start;
}
.hero--sub .wrap { position: relative; }
.hero--sub .hero__video { object-position: 50% 46%; }
.hero--sub .lead { color: var(--tx-on-dark); }
/* Auf breiten Schirmen reicht die Überschrift weiter nach rechts als auf der
   Startseite, deshalb hält die Abdunklung dort länger durch. */
@media (min-width: 60rem) {
  .hero--sub .hero__scrim {
    background:
      linear-gradient(100deg, rgba(16,16,16,.97) 0%, rgba(16,16,16,.95) 34%,
                      rgba(16,16,16,.9) 52%, rgba(16,16,16,.56) 70%,
                      rgba(16,16,16,.34) 86%, rgba(16,16,16,.5) 100%),
      linear-gradient(to top, var(--ink-900) 2%, rgba(16,16,16,0) 30%),
      rgba(16,16,16,.34);
  }
}

.hero__grid { position: relative; display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 60rem) {
  .hero__grid > .enter { max-width: 46rem; }
}
@media (min-width: 60rem) {
  .hero__grid { gap: var(--s7); }
}
.hero h1 { margin-block: var(--s4) var(--s5); }
/* Über bewegtem Bild braucht der Fließtext den vollen Hellwert, sonst reicht
   der Kontrast über den hellsten Einzelbildern nicht. */
.hero .lead { color: var(--tx-on-dark); max-width: 46ch; }
.hero h1 .accent { color: var(--ochre-hi); display: block; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--s6); }


/* --- Kategorien ----------------------------------------------------------- */
/* Spaltenzahl folgt der Anzahl der Kategorien (derzeit sieben), damit unten
   keine angebrochene Zeile mit einer einzelnen Kachel stehen bleibt. */
.cats {
  display: grid; gap: clamp(.6rem, 1.4vw, .9rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 34rem) { .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 50rem) { .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .cats { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

.cat {
  position: relative; display: grid; align-content: end; gap: .1rem;
  min-height: clamp(126px, 17vw, 168px);
  padding: var(--s4);
  border: 1px solid var(--ink-600); border-radius: var(--r-md);
  background: var(--ink-700);
  text-decoration: none; overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cat:hover { border-color: var(--ochre); transform: translateY(-2px); }
.cat img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .48;
  transition: opacity var(--dur) var(--ease), transform .6s var(--ease);
}
.cat:hover img { opacity: .6; transform: scale(1.045); }
/* Der Verlauf muss auch unter hellen Motiven tragen (Pommes, Burger auf Weiß),
   sonst verschwindet die Beschriftung. Deshalb unten fast deckend. */
.cat::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(16,16,16,.30) 0%,
    rgba(16,16,16,.62) 45%,
    rgba(16,16,16,.94) 82%);
}
.cat__name { text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.cat > * { position: relative; z-index: 1; }
.cat__name { font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 86%;
  text-transform: uppercase; font-size: clamp(.95rem, 1.7vw, 1.1rem); line-height: 1.05; }
.cat__meta { font-size: .76rem; color: #c3bdb1; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.cat--soon { opacity: .72; }
.cat--soon .cat__meta { color: var(--ochre); }

/* --- Produktkarten (Startseite, Auswahl) ---------------------------------- */
.picks {
  display: grid; gap: clamp(.85rem, 1.8vw, 1.35rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.pick {
  display: flex; flex-direction: column;
  background: var(--ink-700);
  border: 1px solid var(--ink-600); border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease);
}
.pick:hover { border-color: var(--ink-500); }
.pick__media { position: relative; aspect-ratio: 3 / 2; background: var(--ink-900); overflow: hidden; }
.pick__media picture { display: block; width: 100%; height: 100%; }
.pick__media img { width: 100%; height: 100%; object-fit: cover; }
.pick__body { display: flex; flex-direction: column; gap: .4rem; padding: var(--s4); flex: 1; }
.pick__desc { font-size: .84rem; color: var(--tx-on-dark-mute); flex: 1; }
.pick__foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .3rem; }
.pick__price { font-size: 1.16rem; }

/* --- Ablauf (3 Schritte) -------------------------------------------------- */
.steps { display: grid; gap: var(--s5); counter-reset: step; }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }
.step { position: relative; padding-top: var(--s5); border-top: 2px solid var(--cream-3); }
.on-dark .step { border-top-color: var(--ink-600); }
.step__n {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 76%;
  font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: .9;
  color: var(--ochre-deep); display: block; margin-bottom: .5rem;
}
.on-dark .step__n { color: var(--ochre); }
.step h3 { margin-bottom: .4rem; }
.step p { font-size: .95rem; color: var(--tx-on-light-mute); }
.on-dark .step p { color: var(--tx-on-dark-mute); }

/* --- Ablauf in drei Schritten (Kopf der Speisekarte) -----------------------
   Eine Linie, drei Haltepunkte. Sie zeichnet sich einmal beim Laden, danach
   steht sie still. Kein Dauerbetrieb, keine Wiederholung beim Scrollen. */
.flow {
  --flow-gap: 1.4rem;              /* Abstand zwischen den Schritten */
  --flow-mark: 44px;               /* Durchmesser der Kreise */
  list-style: none; margin: var(--s6) 0 0; padding: 0;
  display: grid; gap: var(--flow-gap);
  position: relative; max-width: 62rem;
}
@media (min-width: 46rem) {
  .flow { --flow-gap: var(--s6); grid-template-columns: repeat(3, 1fr); }
}

/* Auf dem Handy steht der Kreis links, der Text rechts daneben: eine ruhige
   Spalte statt eines Zickzacks aus Kreis, Ziffer, Titel und Text. */
.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--flow-mark) 1fr;
  column-gap: .95rem; row-gap: .1rem;
  align-items: start;
}
@media (min-width: 46rem) {
  .flow__step {
    grid-template-columns: 1fr;
    row-gap: .35rem;
    justify-items: start;
  }
}

/* Verbindung zwischen den Haltepunkten: auf dem Handy senkrecht durch die
   Kreismitte, ab Tablet waagrecht. */
.flow__step::before {
  content: ''; position: absolute; z-index: 0;
  background: linear-gradient(to bottom, var(--ochre), rgba(214,165,29,.25));
  inset-inline-start: calc(var(--flow-mark) / 2 - 1px);
  inset-block-start: var(--flow-mark);
  width: 2px;
  height: calc(100% - var(--flow-mark) + var(--flow-gap));
  transform-origin: top;
}
.flow__step:last-child::before { display: none; }
@media (min-width: 46rem) {
  .flow__step::before {
    background: linear-gradient(to right, var(--ochre), rgba(214,165,29,.25));
    inset-inline-start: var(--flow-mark);
    inset-block-start: calc(var(--flow-mark) / 2 - 1px);
    width: calc(100% - var(--flow-mark) + var(--flow-gap)); height: 2px;
    transform-origin: left;
  }
}

.flow__mark {
  position: relative; z-index: 1;
  grid-column: 1; grid-row: 1 / span 2; align-self: start;
  display: grid; place-items: center;
  width: var(--flow-mark); height: var(--flow-mark); flex: none;
  border: 2px solid var(--ochre); border-radius: 50%;
  background: var(--ink-900); color: var(--ochre-hi);
}
/* Auf dem Handy tragen Linie und Kreise die Reihenfolge schon. Die Ziffer wäre
   dort ein drittes Element je Zeile — sie entfällt, das beruhigt die Spalte. */
.flow__no { display: none; }
@media (min-width: 46rem) { .flow__no { display: block; } }
.flow__no {
  grid-column: 2; grid-row: 1;
  font-family: 'Instrument Sans', sans-serif;
  font-size: .7rem; font-weight: 700; letter-spacing: .18em;
  color: var(--ochre); padding-top: .25rem;
}
.flow__title {
  grid-column: 2; grid-row: 1;
  display: block;
  font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 84%;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.1;
  text-transform: uppercase; letter-spacing: -.005em;
  color: var(--tx-on-dark);
}
.flow__text {
  grid-column: 2; grid-row: 2;
  font-size: .93rem; line-height: 1.5; color: var(--tx-on-dark-soft);
  max-width: 34ch; margin-top: .2rem;
}
/* Über bewegtem Bild reicht der gedämpfte Ton nicht, dort steht der Text hell. */
.hero .flow__text { color: var(--tx-on-dark); }
@media (min-width: 46rem) {
  .flow__mark  { grid-column: 1; grid-row: auto; }
  .flow__no    { grid-column: 1; grid-row: auto; padding-top: .55rem; }
  .flow__title { grid-column: 1; grid-row: auto; }
  .flow__text  { grid-column: 1; grid-row: auto; }
}

/* Hinweisbanner Rückruf */
.callout {
  display: flex; gap: var(--s4); align-items: flex-start;
  padding: clamp(1.1rem, 2.6vw, 1.65rem);
  border: 2px solid var(--ink-800); border-radius: var(--r-md);
  background: var(--ochre-hi); color: var(--ink-800);
}
.callout svg { flex: none; margin-top: 3px; }
.callout strong { display: block; font-weight: 700; }
.callout p { font-size: .95rem; margin-top: .2rem; }

/* --- Qualität / Marke ----------------------------------------------------- */
.pillars { display: grid; gap: var(--s5); }
@media (min-width: 46rem) { .pillars { grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s7); } }
@media (min-width: 68rem) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar h3 { margin-bottom: .45rem; }
.pillar p { font-size: .93rem; color: var(--tx-on-light-mute); }
.pillar__bar { width: 34px; height: 3px; background: var(--ochre); margin-bottom: var(--s4); }

/* --- Info / Öffnungszeiten / Karte ---------------------------------------- */
.infogrid { display: grid; gap: var(--s6); }
@media (min-width: 58rem) { .infogrid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--s7); } }

.datalist { display: grid; gap: 0; }
.datalist__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .62rem 0; border-bottom: 1px solid var(--ink-600);
  font-size: .95rem;
}
.on-light .datalist__row { border-bottom-color: var(--cream-3); }
.datalist__row:last-child { border-bottom: 0; }
.datalist__row dt { color: var(--tx-on-dark-mute); }
.on-light .datalist__row dt { color: var(--tx-on-light-mute); }
.datalist__row dd { font-variant-numeric: tabular-nums; text-align: end; }
.datalist__row.is-today dd, .datalist__row.is-today dt { color: var(--ochre); font-weight: 600; }
.on-light .datalist__row.is-today dd, .on-light .datalist__row.is-today dt { color: var(--ochre-deep); }

.status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 600;
  padding: .4rem .8rem; border-radius: var(--r-sm);
  border: 1px solid currentColor;
}
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.status--open   { color: var(--ok); }
.status--closed { color: var(--tx-on-dark-mute); }
.on-light .status--closed { color: var(--tx-on-light-mute); }

/* Karten-Platzhalter vor Einwilligung */
.mapbox {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--ink-600); background: var(--ink-700);
  min-height: 340px;
}
.on-light .mapbox { border-color: var(--cream-3); background: var(--cream-2); }
.mapbox iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; }
.mapbox__ph {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: start;
  gap: .85rem; padding: clamp(1.25rem, 4vw, 2.25rem);
  background-image:
    linear-gradient(rgba(23,23,23,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,23,23,.05) 1px, transparent 1px);
  background-size: 26px 26px;
}
.on-dark .mapbox__ph {
  background-image:
    linear-gradient(rgba(245,241,232,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,241,232,.045) 1px, transparent 1px);
}
.mapbox__ph .micro { max-width: 46ch; color: var(--tx-on-light-mute); }
.on-dark .mapbox__ph .micro { color: var(--tx-on-dark-mute); }
.mapbox__acts { display: flex; flex-wrap: wrap; gap: .6rem; }

/* --- Formulare ------------------------------------------------------------ */
.form { display: grid; gap: var(--s4); }
.field { display: grid; gap: .4rem; }
/* Feldbeschriftungen: versal und klein. Ankreuzfelder sind ausgenommen –
   ihr Text ist ein ganzer Satz und muss normal gesetzt bleiben. */
.field > label:not(.check), .fieldset__legend {
  font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tx-on-dark-mute);
}
.on-light .field > label:not(.check), .on-light .fieldset__legend { color: var(--tx-on-light-mute); }
.field .req { color: var(--ochre); }
.on-light .field .req { color: var(--ochre-deep); }

.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: .7rem .9rem;
  background: var(--ink-900); color: var(--tx-on-dark);
  border: 1px solid var(--ctrl-line); border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.on-light .input, .on-light .select, .on-light .textarea {
  background: var(--white); color: var(--tx-on-light); border-color: var(--ctrl-line-light);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--tx-on-dark-mute); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--ochre); }
.textarea { min-height: 118px; resize: vertical; line-height: 1.55; }
.input::placeholder, .textarea::placeholder { color: #6c675d; }
.on-light .input::placeholder, .on-light .textarea::placeholder { color: #9a9384; }

.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: var(--error);
}
.err {
  display: none; font-size: .82rem; color: var(--error); font-weight: 500;
}
.err::before { content: '▲ '; font-size: .7em; vertical-align: 1px; }
.err.is-on { display: block; }

.grid-2 { display: grid; gap: var(--s4); }
@media (min-width: 34rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.check {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
  font-size: .89rem; line-height: 1.5; cursor: pointer;
}
.check input[type="checkbox"], .check input[type="radio"],
.opt input[type="checkbox"], .opt input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; margin-top: 1px; flex: none;
  border: 2px solid var(--ctrl-line); border-radius: var(--r-sm);
  background: var(--ink-900); cursor: pointer;
  display: grid; place-content: center;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.on-light .check input { background: var(--white); border-color: var(--ctrl-line-light); }
.check input[type="radio"], .opt input[type="radio"] { border-radius: 50%; }
.check input::before, .opt input::before {
  content: ''; width: 10px; height: 10px; transform: scale(0);
  background: var(--ink-800); border-radius: 1px;
  transition: transform var(--dur-fast) var(--ease);
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 18%, 84% 4%, 38% 68%);
}
.check input[type="radio"]::before, .opt input[type="radio"]::before {
  border-radius: 50%; clip-path: none; width: 9px; height: 9px;
}
.check input:checked, .opt input:checked { background: var(--ochre-hi); border-color: var(--ochre-hi); }
.check input:checked::before, .opt input:checked::before { transform: scale(1); }
.check input[aria-invalid="true"] { border-color: var(--error); }
.check a { color: var(--ochre-hi); }
.on-light .check a { color: var(--ochre-deep); }

.fieldset { border: 0; padding: 0; display: grid; gap: .55rem; }
.form-note {
  font-size: .8rem; color: var(--tx-on-dark-mute); line-height: 1.5;
}
.on-light .form-note { color: var(--tx-on-light-mute); }

/* Honeypot */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

.formmsg {
  display: none; gap: .7rem; align-items: flex-start;
  padding: .9rem 1.05rem; border-radius: var(--r-md);
  font-size: .92rem; line-height: 1.5;
  border: 1px solid currentColor;
}
.formmsg.is-on { display: flex; }
.formmsg--ok  { color: var(--ok); }
.formmsg--err { color: var(--error); }

/* --- Footer --------------------------------------------------------------- */
.ftr { background: var(--ink-900); border-top: 1px solid var(--ink-600); }
.ftr__grid {
  display: grid; gap: var(--s6);
  padding-block: var(--s8) var(--s6);
}
@media (min-width: 46rem) { .ftr__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .ftr__grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: var(--s7); } }
.ftr__logo img { width: 168px; margin-bottom: var(--s4); }
.ftr h2 {
  font-size: .78rem; letter-spacing: .16em; font-stretch: 100%; font-weight: 700;
  font-family: 'Instrument Sans', sans-serif; color: var(--ochre);
  margin-bottom: var(--s4);
}
.ftr a { text-decoration: none; }
.ftr__list { display: grid; gap: .55rem; font-size: .93rem; color: var(--tx-on-dark-mute); }
.ftr__list a { border-bottom: 1px solid transparent; }
.ftr__list a:hover { color: var(--ochre-hi); border-color: currentColor; }
.ftr__bottom {
  display: flex; flex-wrap: wrap; gap: .85rem 1.5rem; justify-content: space-between;
  padding-block: var(--s5); border-top: 1px solid var(--ink-700);
  font-size: .82rem; color: var(--tx-on-dark-mute);
}
.ftr__legal { display: flex; flex-wrap: wrap; gap: .85rem 1.4rem; }
.ftr__legal a:hover, .ftr__legal button:hover { color: var(--ochre-hi); }
.ftr__legal button { font-size: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* --- Cookie-Banner -------------------------------------------------------- */
/* visibility (nicht nur transform) sorgt dafür, dass der geschlossene Dialog
   nicht mehr per Tabulator erreichbar ist. */
.cc {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 120;
  padding: var(--gutter);
  transform: translateY(110%); visibility: hidden;
  transition: transform .5s var(--ease), visibility .5s;
}
.cc.is-on { transform: none; visibility: visible; }
.cc__panel {
  max-width: 720px; margin-inline: auto;
  background: var(--ink-900); color: var(--tx-on-dark);
  border: 1px solid var(--ink-500); border-top: 3px solid var(--ochre);
  border-radius: var(--r-lg);
  padding: clamp(1.15rem, 3vw, 1.6rem);
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.cc h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.cc p { font-size: .89rem; color: var(--tx-on-dark-mute); line-height: 1.55; }
.cc__acts { display: grid; gap: .6rem; margin-top: var(--s5); }
@media (min-width: 34rem) { .cc__acts { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.cc__detail { display: grid; gap: .9rem; margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--ink-700); }
.cc__opt { display: grid; grid-template-columns: auto 1fr; gap: .8rem; }
.cc__opt p { font-size: .82rem; margin-top: .15rem; }
.cc__opt strong { font-size: .93rem; }

/* Weicht der mobilen Warenkorbleiste aus, statt sie zu überdecken. */
.cc-fab {
  position: fixed; inset-inline-start: 12px; z-index: 110;
  bottom: calc(12px + var(--cartbar-h, 0px));
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--ink-900); color: var(--tx-on-dark-mute);
  border: 1px solid var(--ink-500); border-radius: 50%;
  transition: bottom var(--dur) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.cc-fab:hover { color: var(--ochre-hi); border-color: var(--ochre); }

/* --- Speisekarte: Kategorienavigation ------------------------------------- */
.menubar {
  position: sticky; top: var(--header-h); z-index: 70;
  /* Sie hängt an der Kopfzeile: schrumpft die beim Scrollen, rückt die Leiste
     um denselben Betrag nach; weicht die Kopfzeile ganz aus, rutscht die Leiste
     an den oberen Rand. Verschoben wird per transform, damit sich der Abstand
     im gleichen Takt bewegt und dazwischen kein Spalt aufblitzt. */
  transition: transform .42s var(--ease);
  background: rgba(16,16,16,.96);
  border-bottom: 1px solid var(--ink-600);
  backdrop-filter: saturate(140%) blur(8px);
}
.menubar__in { display: flex; align-items: center; gap: .75rem; padding-block: .7rem; }
.chips {
  display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding-block: 2px; flex: 1;
  scroll-snap-type: x proximity;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: center; min-height: 42px;
  padding: .45rem .95rem; white-space: nowrap;
  font-size: .9rem; font-weight: 600;
  color: var(--tx-on-dark-mute);
  border: 1px solid var(--ink-500); border-radius: var(--r-md);
  background: transparent; text-decoration: none;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.chip:hover { color: var(--tx-on-dark); border-color: var(--ink-500); }
.chip[aria-current="true"], .chip.is-active {
  color: var(--ink-800); background: var(--ochre-hi); border-color: var(--ochre-hi);
}
.searchbox { position: relative; flex: none; width: min(230px, 42vw); display: none; }
@media (min-width: 48rem) { .searchbox { display: block; } }
.searchbox .input { min-height: 42px; padding-inline-start: 2.3rem; font-size: .9rem; }
.searchbox svg { position: absolute; inset-inline-start: .72rem; top: 50%; transform: translateY(-50%); color: var(--tx-on-dark-mute); pointer-events: none; }

/* --- Speisekarte: Produktzeilen ------------------------------------------- */
.menugroup + .menugroup { margin-top: var(--s8); }
.menugroup__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: var(--s3); margin-bottom: var(--s5);
  border-bottom: 2px solid var(--ink-600);
}
.menugroup__note { font-size: .84rem; color: var(--tx-on-dark-mute); }

.items { display: grid; gap: .7rem; }
@media (min-width: 56rem) { .items { grid-template-columns: 1fr 1fr; gap: .85rem; } }

.item {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s4);
  padding: var(--s3);
  background: var(--ink-700); border: 1px solid var(--ink-600); border-radius: var(--r-lg);
  transition: border-color var(--dur-fast) var(--ease);
}
@media (min-width: 30rem) { .item { grid-template-columns: 124px minmax(0, 1fr); gap: var(--s4); padding: var(--s4); } }
.item:hover { border-color: var(--ink-500); }
.item__media {
  aspect-ratio: 3 / 2; border-radius: var(--r-md); overflow: hidden;
  background: var(--ink-900); position: relative;
}
.item__media img { width: 100%; height: 100%; object-fit: cover; }
.item__media--empty { display: grid; place-items: center; color: var(--ink-500); }
.item__body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.item__top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.item__name { min-width: 0; overflow-wrap: anywhere; }
.item__price { font-size: 1.06rem; white-space: nowrap; }
.item__desc {
  font-size: .84rem; line-height: 1.45; color: var(--tx-on-dark-mute);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.item__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .5rem; }
.item__alg {
  font-size: .72rem; color: var(--tx-on-dark-mute);
  border: 1px solid var(--ink-500); border-radius: var(--r-sm);
  padding: .12rem .4rem; letter-spacing: .04em;
}
/* Gestrichelter Rahmen statt Transparenz: Deckkraft würde den Textkontrast
   unter den geforderten Wert drücken. */
.item.is-placeholder { border-style: dashed; border-color: var(--ink-500); }
.tag-soon {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ochre);
  border: 1px solid currentColor; border-radius: var(--r-sm); padding: .1rem .4rem;
}

.add-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-height: 40px; min-width: 40px; padding: .4rem .85rem;
  background: var(--ochre-hi); color: var(--ink-800);
  font-weight: 700; font-size: .85rem; border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.add-btn:hover { background: var(--ochre); }
.add-btn:active { transform: scale(.96); }
.add-btn.is-done { background: var(--ok); color: var(--white); }

.noresult { padding: var(--s7) 0; text-align: center; color: var(--tx-on-dark-mute); }

/* --- Modal / Bottom-Sheet (Produktoptionen) ------------------------------- */
.ovl {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(8,8,8,.72);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.ovl.is-on { opacity: 1; visibility: visible; }

.sheet {
  position: fixed; z-index: 140; background: var(--ink-800);
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), visibility var(--dur);
  visibility: hidden;
}
.sheet.is-on { visibility: visible; transform: none; }

/* Produkt-Sheet: unten auf Mobil, zentriert auf Desktop */
.sheet--product {
  inset-inline: 0; bottom: 0; max-height: 92dvh;
  border-top: 3px solid var(--ochre);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  transform: translateY(100%);
}
@media (min-width: 46rem) {
  .sheet--product {
    inset: 50% auto auto 50%; bottom: auto;
    width: min(600px, 92vw); max-height: 88vh;
    border: 1px solid var(--ink-500); border-top: 3px solid var(--ochre);
    border-radius: var(--r-lg);
    transform: translate(-50%, -46%) scale(.98); opacity: 0;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility var(--dur);
  }
  .sheet--product.is-on { transform: translate(-50%, -50%); opacity: 1; }
}

/* Warenkorb-Drawer */
.sheet--cart {
  inset-block: 0; inset-inline-end: 0;
  width: min(430px, 100vw);
  border-inline-start: 1px solid var(--ink-500);
  transform: translateX(100%);
  box-shadow: var(--shadow-drawer);
}

.sheet__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--ink-600); flex: none;
}
.sheet__body {
  overflow-y: auto; padding: var(--s5); flex: 1 1 auto; min-height: 0;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.sheet__foot {
  position: relative;
  padding: var(--s4) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ink-600); flex: none; background: var(--ink-900);
}
/* Weicher Auslauf über der Fußzeile: zeigt, dass unten noch etwas kommt. */
.sheet__foot::before {
  content: ''; position: absolute; inset-inline: 0; bottom: 100%; height: 26px;
  background: linear-gradient(to top, var(--ink-800), rgba(23,23,23,0));
  pointer-events: none;
}
.sheet__close {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border: 1px solid var(--ink-500); border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sheet__close:hover { border-color: var(--ochre); color: var(--ochre-hi); }

/* Bild bleibt appetitlich, nimmt aber nur einen Streifen ein. Der Platz gehört
   den Auswahlmöglichkeiten, nicht dem Foto. */
.sheet__media {
  position: relative; aspect-ratio: 16 / 6; max-block-size: min(24vh, 170px);
  background: var(--ink-900); flex: none; overflow: hidden;
}
.sheet__media picture { position: absolute; inset: 0; display: block; }
.sheet__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
}
.sheet__media::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 45%;
  background: linear-gradient(to top, var(--ink-800), rgba(23,23,23,0));
  pointer-events: none;
}

.sheet__desc { color: var(--tx-on-dark-soft); margin-bottom: 1.35rem; }

/* --- Auswahlgruppen im Produkt-Sheet -------------------------------------- */
.optgroup {
  border: 0; margin: 0; padding: 0; min-width: 0;
  display: grid; gap: .5rem;
}
.optgroup + .optgroup {
  margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--ink-600);
}
.optgroup__legend { display: block; width: 100%; padding: 0; }
.optgroup__legendrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  font-size: .84rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tx-on-dark);
}
.optgroup__req {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ochre-hi); flex: none;
}
.optgroup__req--opt { color: var(--tx-on-dark-mute); font-weight: 600; }
.optgroup__hint { font-size: .82rem; color: var(--tx-on-dark-mute); margin-top: -.15rem; }
.optgroup__list { display: grid; gap: .4rem; }
@media (min-width: 26rem) {
  .optgroup__list--split { grid-template-columns: 1fr 1fr; }
}

.opt {
  display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center;
  min-height: 52px; padding: .5rem .85rem;
  background: var(--ink-700); border: 1px solid var(--ink-600); border-radius: var(--r-md);
  font-size: .95rem; line-height: 1.35; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .opt:hover { background: var(--ink-600); border-color: var(--ink-500); }
}
.opt.is-sel { background: rgba(214,165,29,.13); border-color: var(--ochre); }
.opt:focus-within { border-color: var(--ochre-hi); }
.opt input:focus-visible { outline: 2px solid var(--ochre-hi); outline-offset: 3px; }
.opt__name { color: var(--tx-on-dark); overflow-wrap: anywhere; }
.opt__plus {
  font-size: .85rem; font-weight: 600; color: var(--ochre-hi);
  font-variant-numeric: tabular-nums; flex: none;
}

.sheet__extra { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--ink-600); }
.sheet__alg { color: var(--tx-on-dark-mute); margin-top: 1rem; }

/* Fußzeile: auf dem Handy gestapelt, ab Tablet eine Zeile. Das gibt der
   Auswahl darüber spürbar mehr Platz. */
.sheet__actions {
  display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center;
}
.sheet__sum { display: grid; justify-items: end; line-height: 1.25; }
.sheet__sum .micro { color: var(--tx-on-dark-mute); }
.sheet__sum .price { font-size: 1.2rem; }
.sheet__add { grid-column: 1 / -1; width: 100%; }
@media (min-width: 30rem) {
  .sheet__actions { grid-template-columns: auto 1fr auto; }
  .sheet__add { grid-column: auto; width: auto; min-width: 240px; }
}

/* Mengensteuerung */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--ctrl-line); border-radius: var(--r-md); }
.qty button {
  width: 42px; height: 42px; display: grid; place-items: center;
  color: var(--tx-on-dark); font-size: 1.1rem; line-height: 1;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.qty button:hover:not([disabled]) { color: var(--ochre-hi); }
.qty button[disabled] { opacity: .35; cursor: not-allowed; }
.qty output { min-width: 34px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.qty--sm button { width: 34px; height: 34px; font-size: 1rem; }
.qty--sm output { min-width: 26px; font-size: .9rem; }

/* --- Warenkorb-Zeilen ----------------------------------------------------- */
.cartline { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; padding-block: var(--s4); border-bottom: 1px solid var(--ink-600); }
.cartline:first-child { padding-top: 0; }
.cartline__name { font-weight: 600; font-size: .96rem; overflow-wrap: anywhere; }
.cartline__opts { font-size: .8rem; color: var(--tx-on-dark-mute); margin-top: .2rem; }
.cartline__note { font-size: .8rem; color: var(--ochre); margin-top: .2rem; }
.cartline__price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.cartline__ctrl { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.cartline__rm {
  font-size: .82rem; color: var(--tx-on-dark-mute); text-decoration: underline; text-underline-offset: 3px;
  padding: .35rem 0; min-height: 34px;
}
.cartline__rm:hover { color: var(--error); }

.totals { display: grid; gap: .4rem; margin-bottom: var(--s4); }
.totals__row { display: flex; justify-content: space-between; font-size: .92rem; color: var(--tx-on-dark-mute); }
.totals__row--sum { font-size: 1.16rem; color: var(--tx-on-dark); font-weight: 700; padding-top: .5rem; border-top: 1px solid var(--ink-600); }
.totals__row--sum span:last-child { font-family: 'Archivo', sans-serif; font-stretch: 88%; font-variant-numeric: tabular-nums; }

.cart-empty { display: grid; gap: var(--s4); place-items: start; padding-block: var(--s6); color: var(--tx-on-dark-mute); }

.paynote {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .8rem; line-height: 1.45; color: var(--tx-on-dark-mute);
  margin-bottom: var(--s4);
}
.paynote svg { flex: none; margin-top: 2px; color: var(--ochre); }

/* Mobile Warenkorbleiste */
.cartbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 80;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: var(--ink-900); border-top: 1px solid var(--ink-600);
  transform: translateY(120%); transition: transform var(--dur) var(--ease);
}
.cartbar.is-on { transform: none; }
/* Höhe der Leiste als Variable, damit Cookie-Knopf und Fußbereich Platz lassen */
body.has-cartbar { --cartbar-h: 78px; }
body.has-cartbar .ftr { padding-bottom: var(--cartbar-h); }
@media (min-width: 62rem) {
  .cartbar { display: none; }
  body.has-cartbar { --cartbar-h: 0px; }
  body.has-cartbar .ftr { padding-bottom: 0; }
}
.cartbar .btn { width: 100%; justify-content: space-between; }
.cartbar .btn span:last-child { font-variant-numeric: tabular-nums; }

/* --- Bestellformular / Erfolg --------------------------------------------- */
.orderpanel { display: grid; gap: var(--s5); }
.summary-line { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; padding-block: .3rem; }
.summary-line span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary-line--rabatt { color: var(--ochre-deep); font-weight: 600; }

/* --- Gutschein ------------------------------------------------------------ */
.voucher {
  display: grid; gap: .5rem;
  padding-top: var(--s4); border-top: 1px solid var(--cream-3);
}
.voucher__label {
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tx-on-light-mute);
}
.voucher__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.voucher__row .input { flex: 1 1 11rem; min-width: 0; text-transform: uppercase; }
.voucher__row .input::placeholder { text-transform: none; }
.voucher__row .btn { flex: none; }
.voucher__status { font-size: .85rem; line-height: 1.45; color: var(--tx-on-light-mute); }
.voucher__status:empty { display: none; }
.voucher__status.is-err { color: var(--error); font-weight: 500; }
.voucher__status.is-hint { color: var(--ochre-deep); }
.voucher__done {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  padding: .7rem .9rem; border: 1px solid var(--ochre);
  border-inline-start: 3px solid var(--ochre); border-radius: var(--r-md);
  background: rgba(214,165,29,.12);
}
.voucher__done strong { display: block; font-size: .95rem; }
.voucher__done .micro { display: block; color: var(--tx-on-light-mute); }
.voucher__rm {
  flex: none; font-size: .82rem; text-decoration: underline;
  text-underline-offset: 3px; color: var(--tx-on-light-mute);
}
.voucher__rm:hover { color: var(--tx-on-light); }

.totals__row--rabatt { color: var(--ochre-hi); font-weight: 600; }
.totals__row--hint { font-size: .8rem; }

.success { display: grid; gap: var(--s5); justify-items: start; max-width: 56ch; }
.success__badge {
  display: grid; place-items: center; width: 62px; height: 62px;
  border-radius: 50%; background: var(--ok); color: var(--white);
}
.success__no {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 88%;
  font-size: 1.2rem; letter-spacing: .04em;
  border: 2px dashed var(--ink-500); border-radius: var(--r-md);
  padding: .6rem 1rem;
}

/* --- Bewegung: Reveal ----------------------------------------------------- */
.rv { opacity: 0; transform: translateY(16px); }
.rv.is-in {
  opacity: 1; transform: none;
  transition: opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay: var(--rv-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* --- Rechtstexte ---------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin-top: var(--s7); margin-bottom: var(--s4); }
.prose h3 { font-size: 1.08rem; margin-top: var(--s5); margin-bottom: .5rem; }
.prose p, .prose li { font-size: .95rem; line-height: 1.68; color: var(--tx-on-light-mute); }
.prose p + p { margin-top: .85rem; }
.prose ul { list-style: none; display: grid; gap: .45rem; margin-top: .7rem; }
.prose ul li { padding-inline-start: 1.1rem; position: relative; }
.prose ul li::before { content: ''; position: absolute; inset-inline-start: 0; top: .62em; width: 6px; height: 2px; background: var(--ochre-deep); }
.prose a { color: var(--ochre-deep); text-underline-offset: 3px; }
.prose .datablock { display: grid; gap: .35rem; margin-top: .7rem; }
.prose .datablock p + p { margin-top: 0; }
.todo {
  display: inline-block; background: #fff4cc; color: #6b4e00;
  border: 1px dashed #c9a227; border-radius: var(--r-sm);
  padding: .1rem .45rem; font-size: .82rem; font-weight: 600;
}

/* --- Druck ---------------------------------------------------------------- */
@media print {
  .hdr, .ftr, .cc, .cc-fab, .cartbar, .sheet, .ovl, .menubar { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   BEWEGUNG
   Grundsatz: Bewegung erklärt etwas oder bestätigt eine Handlung. Sie ist
   kurz, sie beginnt schnell und sie läuft nie im Dauerbetrieb. Alles hier
   wird von der Regel für "Bewegung reduzieren" am Ende der Datei abgeschaltet.
   ========================================================================== */

/* --- Auftritt beim Laden ---------------------------------------------------
   Nur im ersten Bildschirm. Alles weiter unten übernimmt der Reveal-Beobachter. */
@keyframes imb-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes imb-rise-line {
  from { transform: translateY(104%); }
  to   { transform: translateY(0); }
}
@keyframes imb-art {
  from { opacity: 0; transform: translateY(30px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes imb-glow {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: none; }
}

.enter > * { animation: imb-rise .78s var(--ease) both; }
.enter > *:nth-child(1) { animation-delay: .06s; }
.enter > *:nth-child(2) { animation-delay: .10s; }
.enter > *:nth-child(3) { animation-delay: .30s; }
.enter > *:nth-child(4) { animation-delay: .40s; }
.enter > *:nth-child(5) { animation-delay: .48s; }
/* Die Überschrift wird nicht zusätzlich als Ganzes bewegt – ihre Zeilen
   bringen ihre eigene Animation mit, sonst überlagern sich beide. */
.enter > .h-hero, .enter > .h-sect { animation: none; }

/* Zeilenweiser Aufbau der Überschrift: jede Zeile schiebt sich hinter einer
   Kante hervor. Das gibt dem Namenszug Gewicht, ohne Effekthascherei. */
.line { display: block; overflow: hidden; padding-bottom: .04em; }
.line > span { display: block; animation: imb-rise-line .92s var(--ease) both; }
.line:nth-child(1) > span { animation-delay: .14s; }
.line:nth-child(2) > span { animation-delay: .22s; }
.line:nth-child(3) > span { animation-delay: .30s; }

.hero::before { animation: imb-glow 1.6s var(--ease) .4s both; }
.hero__bg { animation: imb-fade-in 1.4s var(--ease) both; }
@keyframes imb-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* --- Ablauf: Linie zeichnen, Haltepunkte setzen --------------------------- */
.enter > .flow { animation: none; }
.flow__step { animation: imb-rise .7s var(--ease) both; }
.flow__step:nth-child(1) { animation-delay: .46s; }
.flow__step:nth-child(2) { animation-delay: .60s; }
.flow__step:nth-child(3) { animation-delay: .74s; }

.flow__step::before { animation: imb-line .7s var(--ease) both; }
.flow__step:nth-child(1)::before { animation-delay: .60s; }
.flow__step:nth-child(2)::before { animation-delay: .74s; }

.flow__mark { animation: imb-pop .6s var(--ease) both; }
.flow__step:nth-child(1) .flow__mark { animation-delay: .52s; }
.flow__step:nth-child(2) .flow__mark { animation-delay: .66s; }
.flow__step:nth-child(3) .flow__mark { animation-delay: .80s; }

@keyframes imb-line {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@media (min-width: 46rem) {
  @keyframes imb-line {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}
@keyframes imb-pop {
  from { transform: scale(.55); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}

/* --- Kopfzeile -------------------------------------------------------------
   Beim Scrollen wird sie flacher; wer nach unten liest, bekommt sie aus dem
   Weg geräumt und beim Zurückscrollen sofort wieder. */
.hdr {
  transition: transform .42s var(--ease),
              background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.hdr__in { transition: height .3s var(--ease); }
.hdr.is-scrolled {
  background: rgba(16, 16, 16, .97);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .38);
}
.hdr.is-scrolled .hdr__in { height: calc(var(--header-h) - 10px); }
.hdr.is-hidden { transform: translateY(-102%); }
.hdr__logo img { transition: height .3s var(--ease); }

/* Die klebende Kategorienleiste wandert mit, wenn die Kopfzeile verschwindet. */
.menubar { transition: top .42s var(--ease); }
body.hdr-scrolled .menubar { transform: translateY(-10px); }
body.hdr-hidden  .menubar { transform: translateY(calc(-1 * var(--header-h))); }

/* --- Reveal beim Scrollen --------------------------------------------------
   Grundvariante liegt weiter oben (.rv). Hier die Sonderformen. */

/* Bilder ziehen sich beim Erscheinen leicht zusammen statt einfach aufzublenden. */
.rv .cat img,
.rv .pick__media img,
.rv.pick .pick__media img { transition: transform .9s var(--ease), opacity var(--dur) var(--ease); }
.rv:not(.is-in) .cat img,
.rv:not(.is-in) .pick__media img { transform: scale(1.07); }

/* Trennlinie zieht sich auf */
.rule { transform-origin: left center; }
.rv .rule, .rule.rv { transform: scaleX(0); transition: transform 1s var(--ease); }
.rv.is-in .rule, .rule.rv.is-in { transform: scaleX(1); }

/* Ziffern der Ablaufschritte kommen hinter einer Kante hervor */
.step__n { display: block; overflow: hidden; }
.step__n > span { display: block; transform: translateY(102%); transition: transform .8s var(--ease); }
.rv.is-in .step__n > span { transform: none; }

/* --- Hover und Zustände ---------------------------------------------------- */
.pick { transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.pick:hover { transform: translateY(-3px); border-color: var(--ink-500); }
.pick__media img { transition: transform .6s var(--ease); }
.pick:hover .pick__media img { transform: scale(1.045); }

.item { transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.item:hover { transform: translateY(-2px); }
.item__media img { transition: transform .6s var(--ease); }
.item:hover .item__media img { transform: scale(1.06); }

/* Leichter Lichtstreifen über den Hauptknopf. Einmalig beim Überfahren. */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.32) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .62s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn--ghost::after, .btn--outline::after { display: none; }

.chip { transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
                    background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.chip:active { transform: scale(.97); }

/* --- Bestätigung beim Hinzufügen ------------------------------------------- */
@keyframes imb-ring {
  from { box-shadow: 0 0 0 0 rgba(242, 190, 34, .55); }
  to   { box-shadow: 0 0 0 14px rgba(242, 190, 34, 0); }
}
.cart-btn.is-bumped { animation: bump .38s var(--ease); }
.cart-btn.is-bumped::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  animation: imb-ring .7s var(--ease);
  pointer-events: none;
}
.add-btn { transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.add-btn.is-done { animation: bump .34s var(--ease); }

/* Summe blitzt kurz auf, wenn sie sich ändert */
@keyframes imb-flash {
  0%   { color: var(--ochre-hi); }
  100% { color: inherit; }
}
.is-changed { animation: imb-flash .7s var(--ease); }

/* --- Overlays ------------------------------------------------------------- */
.sheet__body > * { animation: imb-rise .5s var(--ease) both; }
.sheet__body > *:nth-child(2) { animation-delay: .04s; }
.sheet__body > *:nth-child(3) { animation-delay: .08s; }
.sheet__body > *:nth-child(4) { animation-delay: .12s; }

/* --- Abschaltung ----------------------------------------------------------
   Wer im Betriebssystem "Bewegung reduzieren" gewählt hat, bekommt die Seite
   vollständig, aber ohne jede Animation. */
@media (prefers-reduced-motion: reduce) {
  .enter > *,
  .line > span,
  .hero__bg,
  .hero::before,
  .sheet__body > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .step__n > span { transform: none !important; }
  .flow__step, .flow__step::before, .flow__mark {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .rule.rv, .rv .rule { transform: none !important; }
  .rv:not(.is-in) .cat img,
  .rv:not(.is-in) .pick__media img { transform: none !important; }
  .hdr.is-hidden { transform: none !important; }
  .menubar { transition: none !important; }
  .btn::after { display: none !important; }
}