/* ============================================================
   Antalya Grill — Kundenseite
   Designkonzept: warmes Anthrazit + Safran/Paprika ("Grill & Gewürz")
   ============================================================ */

:root {
  /* Palette */
  --ink:        #1A1614;   /* warmes Fast-Schwarz, wie verkohltes Holz */
  --ink-soft:   #2B2420;
  --cream:      #FAF7F2;   /* Hintergrund */
  --card:       #FFFFFF;
  --saffron:    #E8A33D;   /* Hauptakzent — Gewürz, Wärme */
  --saffron-dk: #CC8A24;
  --paprika:    #C4452F;   /* Hitze, gegrilltes */
  --muted:      #8A7F76;
  --muted-2:    #B6ABA0;
  --line:       #EAE3D9;
  --ok:         #3E8E5A;

  /* Typo */
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;

  /* Maße */
  --maxw: 1080px;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 50px -22px rgba(26, 22, 20, 0.35);
  --shadow-sm: 0 6px 20px -10px rgba(26, 22, 20, 0.28);

  /* Vom Editor überschreibbar */
  --primary: var(--saffron);
  --accent: var(--paprika);

  /* ------------------------------------------------------------
     FARB-ROLLEN  (ab 1.5.1, Builder-Prüfung 1.4.2 Befund 3)

     Bis 1.5.0 hieß `--ink` zweierlei: „dunkle Fläche“ (Fuß, Toast,
     aktive Kategorie) UND „Schrift auf der Karte“. `--cream` war zugleich
     Seitenhintergrund und die Fläche, auf die helle Schrift gerechnet war.
     Wer im Site-Builder die dunkle Fläche schwarz und den Hintergrund
     dunkel stellte, bekam schwarze Schrift auf schwarzen Karten (Info-
     Leiste, PLZ-Fenster) – dasselbe Lehrgeld wie die Verwaltung in 0.9.2
     (siehe theme.css, „WAS SICH NICHT UMDREHT“).

     Jetzt hat jede Bedeutung einen eigenen Namen. Gesetzt werden sie von
     PageCore.farbRollen() aus den sechs Seitenfarben – mit WCAG-Kontrast:
     Ist die gewünschte Schriftfarbe auf ihrer Fläche nicht lesbar, nimmt
     die Rechnung die nächstbeste. Die Werte hier sind die Vorgabe (helles
     Standarddesign) und gelten, bis das Skript gelaufen ist.

     Zwei Familien, weil Seite und Karte verschieden hell sein dürfen
     (dunkle Seite, helle Karten): `-pg` für Schrift direkt auf der Seite,
     `-card` für Schrift auf Karten, Fenstern und Eingabefeldern. Welche
     gilt, entscheidet die Fläche (Regel „Karten-Flächen“ weiter unten) –
     `--ink`, `--ink-soft`, `--muted` und `--line` bleiben die Namen, die
     alle Regeln benutzen.
     ------------------------------------------------------------ */
  --dark:        #1A1614;   /* dunkle Fläche: Fuß, Toast, aktive Kategorie */
  --on-dark:     #FFFFFF;   /* Schrift darauf */
  --on-dark-soft:#CFC6BD;
  --on-primary:  #1A1614;   /* Schrift auf der Hauptfarbe (Knöpfe) */
  --on-accent:   #FFFFFF;
  --primary-text:#A86C12;   /* Hauptfarbe als SCHRIFT auf der Karte, lesbar */
  --ink-pg:      #1A1614;
  --soft-pg:     #2B2420;
  --muted-pg:    #6E645B;
  --line-pg:     #EAE3D9;
  --ink-card:    #1A1614;
  --soft-card:   #2B2420;
  --muted-card:  #6E645B;
  --line-card:   #EAE3D9;
  --subtle-card: #F6F2EC;   /* leichte Füllung IN einer Karte */
  --field-bg:    #FFFFFF;

  --ink: var(--ink-pg);
  --ink-soft: var(--soft-pg);
  --muted: var(--muted-pg);
  --line: var(--line-pg);
}

/* Karten-Flächen: Alles, was `--card` als Hintergrund hat, stellt die
   Schrift-Namen auf die Karten-Familie um. Die Regeln darunter bleiben
   unverändert (`color: var(--ink)`) – sie lesen einfach die Werte ihrer
   Fläche. */
.card, .modal__panel, .cart__head, .checkout__head, .summary,
.delcheck__inner, .orderbar__info, .orderbar__mode, .orderbar__check,
.plzask__panel, .mliste, .giftcard, .captcha, .preorder label,
.catnav__arrow, .toggle2 button, .closure, .consent__box, #paypalBox,
.section__head.has-bg,
.fld input, .fld textarea, .fld select, .voucher-row input, .delcheck__row input,
.orderbar__row input, .plzask__row input, .modal__note textarea, .captcha__in,
.preorder input[type="datetime-local"],
body[data-cats="tiles"] .catnav__item, body[data-cats="tiles"] .catnav__chip {
  --ink: var(--ink-card);
  --ink-soft: var(--soft-card);
  --muted: var(--muted-card);
  --line: var(--line-card);
  --paprika: var(--paprika-card, #C4452F);
}
/* Die Schriftfarbe selbst erbt der Kasten als FERTIGEN Wert vom <body>
   (Seiten-Familie) - umstellen muss man sie dort, wo Text ohne eigene Regel
   direkt im Kasten steht („Liefern wir zu dir?“, Fensterüberschrift). */
.orderbar__check, .orderbar__info, .plzask__panel, .consent__box, .closure,
.delcheck__inner, .modal__panel, .giftcard, .captcha, .preorder label, .summary,
#paypalBox {
  color: var(--ink-soft);
}
/* Eingabefelder ohne eigene Fläche nahmen das Weiß des Browsers - auf einer
   dunklen Karte ein greller Fleck mit schwarzer Schrift. */
.orderbar__row input, .plzask__row input, .captcha__in, .preorder input[type="datetime-local"] {
  background: var(--field-bg); color: var(--ink);
}
.orderbar__row input::placeholder, .plzask__row input::placeholder,
.fld input::placeholder, .fld textarea::placeholder, .voucher-row input::placeholder {
  color: var(--muted);
}
:root {
  /* Safran war in Rahmen und Markierungen fest verdrahtet. Ein Neon- oder
     Grün-Design bekam dort trotzdem Orange - jetzt folgt es der Hauptfarbe. */
  --mango: var(--primary);
  --paprika: var(--paprika-pg, #C4452F);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* hidden-Attribut muss immer gewinnen (sonst zeigt display:flex die Overlays) */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--cream);
  color: var(--ink-soft);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; }

.btn {
  border-radius: var(--btn-radius, 999px);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 1.5rem;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:active { transform: scale(0.97); }
.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 10px 24px -10px var(--primary);
}
/* Dunkler aus der EIGENEN Hauptfarbe – bis 1.5.0 stand hier fest Safran,
   ein pinker Knopf wurde beim Überfahren golden. */
.btn--primary:hover { background: color-mix(in srgb, var(--primary) 86%, #000); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn--ghost:hover { border-color: var(--ink); }
.btn--block { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }

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

/* ============================================================
   HERO  (Parallax)
   ============================================================ */
.hero {
  position: relative;
  min-height: var(--hero-h, 78vh);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--dark);
}
.hero__bg {
  position: absolute;
  inset: -12% 0 0 0;
  height: 120%;
  background:
    radial-gradient(120% 80% at 70% 10%, rgba(232,163,61,0.28), transparent 55%),
    radial-gradient(90% 70% at 20% 90%, rgba(196,69,47,0.30), transparent 55%),
    linear-gradient(160deg, #241d18 0%, #15110e 100%);
  will-change: transform;
}
/* Subtiles Rauch-/Korn-Muster über dem Verlauf */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(21,17,14,0.85) 0%, transparent 45%);
}
.topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
}
.topbar__brand {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
  letter-spacing: -0.02em;
}
.topbar__cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  color: #fff;
  transition: background 0.2s ease, transform 0.15s ease;
}
.topbar__cart:hover { background: rgba(255,255,255,0.22); }
.topbar__count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.topbar__count.is-visible { transform: scale(1); }

.hero__inner {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem) clamp(2rem, 6vw, 3.5rem);
  /* Titel links, Logo rechts daneben */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1rem, 4vw, 3rem);
}
.hero__text { min-width: 0; }
.hero__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: heroLogoIn 0.8s cubic-bezier(.22,.61,.36,1) 0.3s both;
}
.hero__logo img {
  height: clamp(70px, 14vw, 150px);
  width: auto;
  max-width: min(38vw, 260px);
  object-fit: contain;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.45));
}
@keyframes heroLogoIn {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
/* Auf schmalen Bildschirmen: Logo ueber den Titel, damit nichts gequetscht wird */
@media (max-width: 640px) {
  .hero__inner { flex-direction: column-reverse; align-items: flex-start; gap: 1rem; }
  .hero__logo img { height: clamp(56px, 18vw, 96px); max-width: 60vw; }
}
.hero__eyebrow {
  color: var(--primary);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 0.6rem;
  opacity: 0;
  animation: rise 0.7s ease 0.1s forwards;
}
.hero__title {
  font-family: var(--display);
  font-weight: 800;
  color: #fff;
  font-size: clamp(2.4rem, 8vw, var(--hero-title-max, 5rem));
  line-height: 0.98;
  letter-spacing: -0.03em;
  max-width: 12ch;
  /* Einblenden beim Laden. WICHTIG: Wenn eine Titel-Animation (anim-*) gesetzt
     ist, ueberschreibt DEREN animation-Property diese hier - darum darf der
     Sichtbarkeits-Zustand NICHT von dieser Animation abhaengen. Startwert daher
     opacity:1; die Einblend-Bewegung ist nur ein sanftes Extra. */
  opacity: 1;
  animation: rise 0.7s ease 0.22s both;
}
.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
  opacity: 0;
  animation: rise 0.7s ease 0.34s forwards;
}
.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
}
.hero__chip strong { color: var(--primary); font-weight: 700; }

/* Der Scroll-Hinweis (Maus-Symbol) ist in 0.8.5 ersatzlos entfallen -
   er hat auf Handys nichts erklärt und auf dem Desktop nur Platz gekostet. */

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   KOPFBEREICH AUS DEM SITE-BUILDER
   Das Aussehen der Bühne selbst steht in site.css - hier nur die
   Einbettung in die Seite.
   ============================================================ */
/* Über der Speisekarte, damit ein Aktions-Banner, das absichtlich über die
   Unterkante hinausragt, auch wirklich obenauf liegt statt darunter zu
   verschwinden. */
/* Der Kopfbereich muss ÜBER der Info-Leiste (z-index 5) liegen, damit ein
   absichtlich überstehendes Aktions-Banner obenauf sitzt statt darunter zu
   verschwinden. Die klebende Kategorie-Leiste (z-index 20) bleibt darüber –
   die soll ja beim Scrollen über den Kopfbereich gleiten. */
/* Der Abstand nach unten ist genau der Überstand, den sitecore.js gemeldet
   hat (0.9.1). Ein Banner, das über die Kante ragt, schiebt die Info-Leiste
   nach unten, statt sich darüberzulegen - vorher waren die Liefern/Abholen-
   Knöpfe dahinter verschwunden. */
.sitehost {
  position: relative;
  z-index: 15;
  margin-bottom: var(--stage-overhang, 0px);
}

/* ============================================================
   KATEGORIE-NAV (sticky)
   ============================================================ */
.catnav {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Schleier in der Seitenfarbe (ab 1.5.1) - bis 1.5.0 fest Creme: Auf
     einer dunklen Seite stand helle Schrift auf hellem Balken. */
  background: color-mix(in srgb, var(--seite-ton, var(--cream)) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
}
.catnav__arrow {
  flex: 0 0 auto;
  width: 34px; height: 34px; margin: 0 4px;
  border: 1.5px solid var(--line); border-radius: 50%;
  background: var(--card, #fff); color: var(--ink, #1a1614);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -6px rgba(0,0,0,.3); transition: .15s; z-index: 2;
}
.catnav__arrow:hover { background: var(--dark, #1a1614); color: var(--on-dark, #fff); transform: scale(1.06); }
.catnav__track {
  position: relative;              /* Anker der gleitenden Pille */
  flex: 1 1 auto;
  /* min-width: 0 ist hier kein Feinschliff, sondern die Reparatur eines
     handfesten Fehlers (0.9.1): Ein Flex-Element bekommt von sich aus
     `min-width: auto` und schrumpft dann nicht unter seine Inhaltsbreite.
     Bei der Darstellung "Kacheln" wird die Leiste zum Raster mit
     `overflow: visible` - und Chrome rechnete daraus auf einem 390 px
     breiten Handy eine Leiste von 1046 px. Die ganze Seite ließ sich
     656 px weit nach rechts schieben. */
  min-width: 0;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  scroll-behavior: smooth;
}
.catnav__track.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.catnav__track.is-dragging .catnav__item { pointer-events: none; }
.catnav__track::-webkit-scrollbar { display: none; }
.catnav__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--muted);
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}
.catnav__item:hover { color: var(--ink); }
.catnav__item.is-active { background: var(--dark); color: var(--on-dark); }

/* ============================================================
   MENÜ
   ============================================================ */
.menu {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2.5rem) 4rem;
}
.menu__loading { text-align: center; color: var(--muted); padding: 4rem 0; }

.section { scroll-margin-top: 80px; margin-bottom: 3rem; }
.section__head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
}
.section__icon { font-size: 1.6rem; }

/* ============================================================
   KATEGORIE MIT HINTERGRUNDBILD  (ab 0.9.5)

   Nur wirksam, wenn wirklich ein Bild eingestellt ist (.has-bg). Ohne Bild
   bleibt der Kopf genau so schlicht wie vorher — wer nichts einstellt, soll
   auch nichts Neues sehen.
   ============================================================ */
.section__head.has-bg {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 1.1rem 1.3rem;
  align-items: center;
  /* Ein heller Grund unter dem Bild: Bei durchscheinender Deckkraft steht die
     Überschrift sonst auf dem Seitenhintergrund, der auch dunkel sein kann. */
  background: var(--card, #fff);
}
.section__bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  /* Etwas Überstand: Der Weichzeichner zieht die Kanten nach innen und legt
     sonst einen hellen Saum frei. */
  transform: scale(1.06);
  pointer-events: none;
}
.section__headin {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}
/* Ohne Bild trägt der Kopf selbst das Flexbox-Verhalten — dann darf die
   innere Hülle nicht noch einmal einen Kasten aufmachen. */
.section__head:not(.has-bg) .section__headin {
  display: contents;
}
/* Ein hochgeladenes Symbol wird IMMER quadratisch beschnitten und an der
   Überschrift ausgerichtet. Sonst bestimmt die Bilddatei die Zeilenhöhe —
   und ein versehentlich hochgeladenes Panorama sprengt den Kopf. */
.section__iconimg {
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  object-fit: cover;
  border-radius: 8px;
}
.section__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  color: var(--ink);
  letter-spacing: -0.02em;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.card {
  position: relative;
  display: flex;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: left;
  width: 100%;
  transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease;
  /* Scroll-Reveal Startzustand */
  opacity: 0;
  transform: translateY(18px);
}
.card.is-in { opacity: 1; transform: translateY(0); }
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.card__media {
  flex: 0 0 92px;
  width: 92px; height: 92px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: linear-gradient(135deg, #f4ede2 0%, #e7d8c4 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Bezug für den KI-Hinweis (ab 1.3.0, Stile in site.css). */
.card__media { position: relative; }
.section__head.has-ki { position: relative; }
.card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.card__name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  display: flex; align-items: center; gap: 0.4rem;
}
.card__badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--paprika);
  background: rgba(196,69,47,0.1);
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
}
.card__desc {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0.3rem 0 0.6rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card__price { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.card__price small { font-weight: 500; color: var(--muted); font-size: 0.78rem; }
/* Alter Preis auf der Rückfall-Kachel (ab 0.9.5). em statt rem, damit er der
   Preisgröße folgt und nicht unabhängig davon davonläuft. */
.card__price-old {
  font-weight: 500;
  color: var(--muted);
  font-size: 0.8em;
  text-decoration: line-through;
  text-decoration-thickness: 0.08em;
}
.card__add {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 1.4rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: transform 0.15s ease, background 0.2s ease;
}
.card__add:hover { background: color-mix(in srgb, var(--primary) 86%, #000); transform: rotate(90deg); }
.card.is-out { opacity: 0.55; }
.card.is-out .card__add { background: var(--muted-2); pointer-events: none; }
.card__soldout {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--paprika);
}

/* ============================================================
   MODAL (Artikel + Text)
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(21,17,14,0.55);
  backdrop-filter: blur(3px);
  animation: fade 0.25s ease;
}
.modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  background: var(--card);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  animation: pop 0.3s cubic-bezier(.34,1.4,.64,1);
}
.modal__close {
  position: absolute;
  top: 0.8rem; right: 0.8rem;
  z-index: 3;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--card) 85%, transparent);
  backdrop-filter: blur(6px);
  font-size: 1.6rem;
  color: var(--ink);
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.modal__media {
  height: 200px;
  background: linear-gradient(135deg, #f4ede2 0%, #e7d8c4 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
  position: relative;
  flex: 0 0 auto;
}
.modal__media img { width: 100%; height: 100%; object-fit: cover; }
.modal__media .slides { width: 100%; height: 100%; position: relative; }
.modal__media .slides img {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 0.6s ease;
}
.modal__media .slides img.is-active { opacity: 1; }
.modal__body {
  padding: 1.4rem 1.5rem;
  overflow-y: auto;
  flex: 1;
}
.modal__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.modal__desc { color: var(--muted); margin-top: 0.4rem; }

/* ============================================================
   PREISZEILE IM ARTIKELFENSTER  (ab 0.9.5)

   Nur sichtbar, solange eine Aktion läuft. Sie wird umgebrochen statt
   abgeschnitten: Auf einem schmalen Handy sollen alter Preis, neuer Preis
   und das Aktions-Etikett untereinander rutschen dürfen — abschneiden
   hiesse hier, dem Kunden den Preis vorzuenthalten.
   ============================================================ */
.modal__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.modal__price-old {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 0.08em;
  font-size: 1rem;
}
.modal__price-new {
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--paprika, #c4452f);
  letter-spacing: -0.01em;
}
.modal__price-tag {
  background: rgba(196, 69, 47, 0.12);
  color: var(--paprika, #c4452f);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.modal__allergens {
  font-size: 0.78rem;
  /* --muted statt --muted-2 (ab 1.5.1): #B6ABA0 auf Weiß sind 2,1:1 -
     Allergene sind eine Pflichtangabe und müssen lesbar sein. */
  color: var(--muted);
  margin-top: 0.6rem;
}
/* „Dieses Angebot nutzt KI-Inhalte“ (ab 1.3.0) - ganz unten in der
   Detailansicht. Ruhig, aber lesbar: Es ist eine Pflichtangabe, keine
   Werbung, und darf deshalb weder schreien noch verschwinden. */
.modal__ki {
  display: flex; align-items: center; gap: .45rem;
  margin-top: 1.1rem; padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem; color: var(--muted);
}
.modal__ki::before {
  content: "KI"; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 800; color: #fff;
  background: rgba(20, 17, 15, .6);
}
.modal__ki:lang(en)::before { content: "AI"; }
.modal__options { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 1.3rem; }

.modal__note { margin-top: 1.3rem; }
.modal__note-label {
  display: block; font-weight: 600; font-size: 0.88rem;
  color: var(--ink); margin-bottom: 0.4rem;
}
.modal__note-label span { color: var(--muted); font-weight: 400; }
.modal__note textarea {
  width: 100%; min-height: 64px; resize: vertical;
  font-family: inherit; font-size: 0.92rem;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm, 12px);
  background: var(--card); color: var(--ink);
}
.modal__note textarea:focus { outline: none; border-color: var(--primary); }

.optgroup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.optgroup__name { font-weight: 700; color: var(--ink); }
.optgroup__req {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--paprika);
  background: rgba(196,69,47,0.1);
  padding: 0.12rem 0.5rem;
  border-radius: 6px;
}
.optgroup__opt {
  margin-top: 0.4rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  background: var(--subtle-card);
}
.opt {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 0.5rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.opt:hover { border-color: var(--muted-2); }
.opt.is-selected { border-color: var(--primary); background: rgba(232,163,61,0.08); }
.opt input { accent-color: var(--primary); width: 18px; height: 18px; }
.opt__label { flex: 1; font-weight: 500; color: var(--ink); }
.opt__price { color: var(--muted); font-size: 0.9rem; font-weight: 600; }
/* Ab 1.0.3: ausgeschaltete Auswahl (bleibt sichtbar, damit der Kunde weiß,
   dass es sie sonst gibt) und Custom-Auswahl mit erreichter Grenze. */
.opt.is-off { cursor: not-allowed; border-style: dashed; }
.opt.is-off .opt__label { color: var(--muted); text-decoration: line-through; }
.opt.is-off .opt__price { font-weight: 500; font-size: 0.8rem; }
.opt.is-capped { cursor: not-allowed; opacity: 0.55; }
.opt.is-capped:hover, .opt.is-off:hover { border-color: var(--line); }

.modal__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--line);
  background: var(--card);
}
.qty {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem;
}
.qty__btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 1.3rem;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: background 0.15s ease;
}
.qty__btn:hover { background: var(--subtle-card); }
.qty__val { min-width: 28px; text-align: center; font-weight: 700; }
.modal__add { flex: 1; }

/* Text-Modal (Rechtliches) */
.modal__panel--text { max-width: 600px; }
.modal--text .modal__panel { padding: 2rem; }
.modal--text h2 {
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--ink);
  margin-bottom: 1rem;
}
.modal__text { overflow-y: auto; white-space: pre-wrap; color: var(--ink-soft); }

/* ============================================================
   WARENKORB (Drawer)
   ============================================================ */
.cart, .checkout {
  position: fixed; inset: 0; z-index: 70;
}
.cart__backdrop, .checkout__backdrop {
  position: absolute; inset: 0;
  background: rgba(21,17,14,0.5);
  animation: fade 0.25s ease;
}
.cart__panel, .checkout__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  background: var(--seite-ton, var(--cream));
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px -20px rgba(0,0,0,0.4);
  animation: slidein 0.32s cubic-bezier(.22,1,.36,1);
}
@keyframes slidein { from { transform: translateX(100%); } to { transform: translateX(0); } }

.cart__head, .checkout__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.3rem 1.4rem;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.cart__head h2, .checkout__head h2 {
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--ink);
  flex: 1;
}
.cart__close, .checkout__close, .checkout__back {
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 1.5rem;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.cart__close:hover, .checkout__close:hover, .checkout__back:hover { background: var(--subtle-card); }
.checkout__back { font-size: 1.3rem; }

.cart__body, .checkout__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem 1.4rem;
}
.cart__empty {
  text-align: center;
  color: var(--muted);
  padding: 3rem 1rem;
}
.cart__empty span { font-size: 3rem; display: block; margin-bottom: 0.8rem; }

.citem {
  display: flex;
  gap: 0.8rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.citem__thumb {
  flex: 0 0 auto;
  width: 60px; height: 60px;
  border-radius: var(--radius-sm, 12px);
  overflow: hidden;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
}
.citem__thumb img { width: 100%; height: 100%; object-fit: cover; }
.citem__main { flex: 1; min-width: 0; }
.citem__name { font-weight: 700; color: var(--ink); }
.citem__opts { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; }
.citem__notewrap {
  display: flex; align-items: center; gap: 0.35rem;
  margin-top: 0.35rem;
}
.citem__noteicon { font-size: 0.82rem; opacity: 0.55; flex: 0 0 auto; }
.citem__noteinput {
  flex: 1; min-width: 0;
  border: none; border-bottom: 1px dashed var(--line);
  background: transparent;
  font-family: inherit; font-size: 0.8rem;
  color: var(--muted);
  padding: 0.15rem 0.1rem;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.citem__noteinput::placeholder { color: var(--muted); opacity: 0.75; }
.citem__noteinput:focus {
  outline: none; border-bottom-color: var(--primary); color: var(--ink);
}
.citem__noteinput.has-value { color: var(--primary-text-pg, var(--primary)); font-style: italic; }
.citem__bottom {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 0.5rem;
}
.citem__qty {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.15rem;
}
.citem__qty button {
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 1.1rem; color: var(--ink); line-height: 1;
}
.citem__qty button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.citem__qty span { min-width: 20px; text-align: center; font-weight: 700; font-size: 0.9rem; }
.citem__price { font-weight: 700; color: var(--ink); }
.citem__remove {
  font-size: 0.78rem; color: var(--paprika); font-weight: 600;
  margin-top: 0.3rem;
}

.cart__foot { flex: 0 0 auto; }
.checkout__body { padding-bottom: 2rem; }

.summary {
  background: var(--card);
  border-top: 1px solid var(--line);
  padding: 1.2rem 1.4rem;
}
.summary__row {
  display: flex; justify-content: space-between;
  color: var(--muted);
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
}
.summary__row--total {
  color: var(--ink);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0.6rem 0 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}
.summary__hint {
  font-size: 0.82rem;
  color: var(--paprika);
  background: rgba(196,69,47,0.08);
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.8rem;
}

/* ============================================================
   CHECKOUT — Formular
   ============================================================ */
.fld { margin-bottom: 1rem; }
.fld__label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.fld input, .fld textarea, .fld select {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  transition: border-color 0.15s ease;
}
.fld input:focus, .fld textarea:focus, .fld select:focus {
  outline: none; border-color: var(--primary);
}
.fld textarea { resize: vertical; min-height: 70px; }
.fld--row { display: flex; gap: 0.8rem; }
.fld--row > div { flex: 1; }

/* Ab 1.6.2: Lieferadresse mit Vorschlagslisten (Straße, Hausnummer).
   Die Liste liegt ÜBER dem Formular (absolut unter dem Feld), damit sich beim
   Tippen nichts verschiebt; Einträge mind. 44 px hoch (am Handy treffbar). */
.adr-feld { position: relative; }
.fld--row > .adr-kombi--nr { flex: 0 0 34%; min-width: 0; }
.adr-liste {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: 30; margin: 0; padding: 4px; list-style: none;
  max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--field-bg, #fff); color: var(--ink);
  border: 1.5px solid var(--primary); border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.adr-liste[hidden] { display: none; }
.adr-opt {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  min-height: 44px; padding: 6px 10px; border-radius: 6px; cursor: pointer;
  touch-action: manipulation;
}
.adr-opt:hover, .adr-opt.is-aktiv { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.adr-opt__name { font-weight: 600; }
.adr-opt__neben { font-size: .8rem; color: var(--muted); }
.adr-hinweis { font-size: .82rem; line-height: 1.35; margin-top: 4px; color: var(--muted); }
.adr-hinweis:empty { display: none; }
.adr-hinweis--fehler { color: var(--paprika, #C4452F); font-weight: 600; }
.adr-fehlt {
  margin-top: 4px; padding: 6px 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .85rem; color: var(--primary); text-decoration: underline;
  min-height: 32px;
}
.adr-fehlt[hidden], #cCityWahl[hidden], #cCity[hidden] { display: none; }

.toggle2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
}
.toggle2 button {
  padding: 1rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.toggle2 button.is-active {
  border-color: var(--primary);
  background: rgba(232,163,61,0.08);
}
.toggle2 .t2__title { font-weight: 700; color: var(--ink); display: block; }
.toggle2 .t2__sub { font-size: 0.8rem; color: var(--muted); }
.toggle2 button[disabled] { opacity: 0.4; cursor: not-allowed; }

.paylist { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.payopt {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.payopt.is-selected { border-color: var(--primary); }
.payopt__head {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  cursor: pointer;
}
.payopt__head input { accent-color: var(--primary); width: 18px; height: 18px; }
.payopt__icon { font-size: 1.3rem; }
.payopt__label { flex: 1; font-weight: 600; color: var(--ink); }
.payopt__extra {
  padding: 0 0.9rem;
  max-height: 0; overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
}
.payopt.is-selected .payopt__extra { max-height: 260px; padding: 0 0.9rem 0.9rem; }
.cashchips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cashchip {
  padding: 0.45rem 0.8rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem; font-weight: 600;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cashchip.is-active { border-color: var(--primary); background: rgba(232,163,61,0.1); }

.sectiontitle {
  font-weight: 700; color: var(--ink);
  margin: 1.2rem 0 0.6rem;
}

.paypal-note {
  font-size: 0.85rem; color: var(--muted);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 0.8rem;
}

/* Erfolgs-Screen */
.success {
  text-align: center;
  padding: 2rem 1rem;
}
.success__check {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  font-size: 2.6rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.2rem;
  animation: pop 0.4s cubic-bezier(.34,1.56,.64,1);
}
.success h2 { font-family: var(--display); color: var(--ink); font-size: 1.6rem; }
.success__id {
  font-weight: 700; color: var(--primary-text-pg, var(--primary));
  font-size: 1.2rem; margin: 0.6rem 0;
}
.success p { color: var(--muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--dark);
  color: var(--on-dark-soft);
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 2.5rem) 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  position: relative;
}
.footer__col h3 {
  font-family: var(--display);
  color: var(--on-dark); font-size: 1.4rem;
  margin-bottom: 0.6rem;
}
.footer__col h4 { color: var(--on-dark); margin-bottom: 0.7rem; font-size: 1rem; }
.footer__col p { font-size: 0.9rem; line-height: 1.7; }
.footer__hours { font-size: 0.88rem; }
.footer__hours .row {
  display: flex; justify-content: space-between;
  max-width: 220px; padding: 0.15rem 0;
}
.footer__hours .row.today { color: var(--primary-on-dark, var(--primary)); font-weight: 600; }
.footer__link {
  display: block;
  color: var(--on-dark-soft);
  font-size: 0.9rem;
  padding: 0.25rem 0;
  transition: color 0.15s ease;
}
.footer__link:hover { color: var(--primary-on-dark, var(--primary)); }
.footer__credit {
  grid-column: 1 / -1;
  border-top: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent);
  padding-top: 1.5rem;
  font-size: 0.82rem;
  color: var(--on-dark-soft);
  text-align: center;
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed;
  bottom: 1.5rem; left: 50%;
  transform: translate(-50%, 120%);
  z-index: 90;
  background: var(--dark);
  color: var(--on-dark);
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: transform 0.35s cubic-bezier(.22,1,.36,1);
}
.toast.is-visible { transform: translate(-50%, 0); }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 560px) {
  .hero { min-height: 70vh; }
  .grid { grid-template-columns: 1fr; }
  .card__media { flex-basis: 76px; width: 76px; height: 76px; }
  .fld--row { flex-direction: column; gap: 0; }
  /* ab 1.6.2: untereinander braucht die Hausnummer volle Breite (34 % wäre hier
     die HÖHE), und zwischen zwei Feldern etwas Luft */
  .fld--row > .adr-kombi--nr { flex: none; }
  .fld--row > div + div { margin-top: .7rem; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::after, *::before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card { opacity: 1; transform: none; }
  .hero__eyebrow, .hero__title, .hero__chips { opacity: 1; }
}

/* ============================================================
   ERWEITERUNGEN: Logo, Liefer-Check, FAB-Warenkorb, Scroll-Pfeil, Gutschein
   ============================================================ */

/* Logo im Header */
.topbar__brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.topbar__logo { height: 40px; width: auto; max-width: 160px; object-fit: contain; }

/* Liefer-Check-Leiste */
.delcheck {
  max-width: var(--maxw);
  margin: -2.6rem auto 0;
  position: relative;
  z-index: 15;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}
.delcheck__inner {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.delcheck__times { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.delcheck__time { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; color: var(--ink); font-weight: 500; }
.delcheck__time small { color: var(--muted); font-weight: 400; }
.delcheck__time b { color: var(--ink); }
.delcheck__form { display: flex; flex-direction: column; gap: 0.4rem; }
.delcheck__q { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.delcheck__row { display: flex; gap: 0.5rem; }
.delcheck__row input {
  width: 130px; font-family: inherit; font-size: 0.95rem;
  padding: 0.55rem 0.8rem; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); background: var(--card); color: var(--ink);
}
.delcheck__row input:focus { outline: none; border-color: var(--primary); }
.delcheck__result {
  margin-top: 0.6rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem; font-weight: 500;
}
.delcheck__result.ok { background: rgba(62,142,90,0.12); color: var(--ok); }
.delcheck__result.no { background: rgba(196,69,47,0.1); color: var(--paprika); }
.delcheck__result.info { background: var(--subtle-card); color: var(--muted); }

@media (max-width: 560px) {
  .delcheck { margin-top: -1.6rem; }
  .delcheck__inner { flex-direction: column; align-items: stretch; }
  .delcheck__row input { flex: 1; width: auto; }
}

/* Schwebender Warenkorb-Button (unten rechts) */
.fab-cart {
  position: fixed;
  bottom: 1.4rem; right: 1.4rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 60px;
  padding: 0 1.1rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 12px 30px -8px rgba(26,22,20,0.5);
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease, background 0.2s ease;
}
.fab-cart:hover { background: color-mix(in srgb, var(--primary) 86%, #000); transform: translateY(-2px); }
.fab-cart:active { transform: scale(0.96); }
.fab-cart svg { flex: 0 0 auto; }
.fab-cart__count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px;
  border: 2px solid var(--cream);
}
.fab-cart__total { font-weight: 700; font-size: 1rem; white-space: nowrap; }
.fab-cart.is-empty { background: var(--dark); color: var(--on-dark); }
.fab-cart.is-empty:hover { background: color-mix(in srgb, var(--dark) 85%, var(--on-dark)); }

/* Scroll-nach-oben-Pfeil (unten mittig) */
.to-top {
  position: fixed;
  bottom: 1.6rem; left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 49;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--dark);
  color: var(--on-dark);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
  pointer-events: none;
}
.to-top.is-visible { opacity: 0.92; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.to-top:hover { opacity: 1; background: color-mix(in srgb, var(--dark) 85%, var(--on-dark)); }

/* Gutschein-Box im Checkout */
.voucher-box { margin-bottom: 1rem; }
.voucher-row { display: flex; gap: 0.5rem; }
.voucher-row input {
  flex: 1; font-family: inherit; font-size: 1rem;
  padding: 0.7rem 0.9rem; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); background: var(--card); color: var(--ink);
  text-transform: uppercase;
}
.voucher-row input:focus { outline: none; border-color: var(--primary); }
.voucher-msg { margin-top: 0.5rem; font-size: 0.86rem; font-weight: 500; }
.voucher-msg.ok { color: var(--ok); }
.voucher-msg.no { color: var(--paprika); }
.voucher-applied {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(62,142,90,0.1);
  border: 1px solid rgba(62,142,90,0.3);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem; color: var(--ok); font-weight: 600;
}
.voucher-applied button { color: var(--paprika); font-size: 0.82rem; font-weight: 600; }
.summary__row--discount { color: var(--ok); }
/* Ab 1.4.2: mehrere Gutscheine als Chips. Umbruch erlaubt – am Handy stehen
   zwei Codes untereinander statt über den Rand zu laufen. */
.voucher-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.6rem; }
.voucher-chip {
  display: inline-flex; align-items: center; gap: 0.5rem; max-width: 100%;
  background: rgba(62,142,90,0.1); border: 1px solid rgba(62,142,90,0.3);
  border-radius: 999px; padding: 0.3rem 0.35rem 0.3rem 0.8rem;
  font-size: 0.88rem; color: var(--ok); font-weight: 600;
}
.voucher-chip__code { overflow-wrap: anywhere; }
.voucher-chip__art { color: var(--muted); font-weight: 500; font-size: 0.8rem; }
.voucher-chip__betrag { white-space: nowrap; }
.voucher-chip__weg {
  width: 1.7rem; height: 1.7rem; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center; font-size: 1.05rem; line-height: 1;
  color: var(--paprika); background: rgba(196,69,47,0.08);
}
.voucher-chip__weg:hover { background: rgba(196,69,47,0.18); }
.voucher-msg--info { color: var(--muted); }

/* Hinweis wenn Lieferung an Adresse nicht möglich */
.delivery-block {
  background: rgba(196,69,47,0.08);
  color: var(--paprika);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-size: 0.88rem;
  margin-bottom: 1rem;
}

/* -------------------- Sicherheitsfrage (Captcha) -------------------- */
.captcha {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--card, #fff); border: 1.5px solid var(--line, #ece5db);
  border-radius: 12px; padding: 0.7rem 0.85rem;
}
.captcha__q { font-weight: 700; white-space: nowrap; }
.captcha__in {
  flex: 1; min-width: 70px; padding: 0.55rem 0.7rem;
  border: 1.5px solid var(--line, #ece5db); border-radius: 9px;
  font-size: 1rem; text-align: center;
}
.captcha__in:focus { outline: none; border-color: var(--mango, #E8A33D); }
.captcha__new {
  border: 1.5px solid var(--line, #ece5db); background: transparent;
  border-radius: 9px; width: 38px; height: 38px; font-size: 1.05rem;
  cursor: pointer; color: var(--muted, #8a7f76); flex: 0 0 auto;
}
.captcha__new:hover { color: var(--ink, #1a1614); border-color: var(--ink, #1a1614); }
.captcha__hint { font-size: 0.8rem; color: var(--muted, #8a7f76); margin: 0.4rem 0 0; }

/* ==================== Aktions-Banner (Tagesangebote) ==================== */
.promobar { max-width: 1080px; margin: 14px auto 0; padding: 0 clamp(1rem, 4vw, 2.4rem);
  display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 6; }
.promocardc {
  position: relative; overflow: hidden; border-radius: 16px; color: #fff;
  background: linear-gradient(115deg, var(--paprika, #C4452F), var(--mango, #E8A33D) 85%);
  padding: 14px 18px; box-shadow: 0 14px 34px -14px rgba(196,69,47,.55);
  opacity: 0; transform: translateY(-10px); animation: promoIn .55s ease forwards;
}
@keyframes promoIn { to { opacity: 1; transform: none; } }
.promocardc::after {
  content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
  animation: promoShine 4.5s ease-in-out infinite;
}
@keyframes promoShine { 0%, 60% { left: -70%; } 100% { left: 130%; } }
.promocardc__title { font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.promocardc__title::before { content: "🎉"; animation: promoWiggle 2.4s ease-in-out infinite; }
@keyframes promoWiggle { 0%,86%,100% { transform: rotate(0); } 90% { transform: rotate(-14deg); } 94% { transform: rotate(12deg); } }
.promocardc__rules { margin-top: 5px; font-size: .86rem; opacity: .95; display: flex; flex-direction: column; gap: 2px; }

/* ==================== Event-Feed (Lower Thirds oben rechts) ==================== */
.eventfeed {
  position: fixed; top: 14px; right: 14px; z-index: 240;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none; max-width: min(320px, 86vw);
}
.evt {
  display: flex; align-items: center; gap: 10px;
  background: rgba(26,22,20,.92); color: #fff; backdrop-filter: blur(6px);
  border-radius: 12px; padding: 10px 14px; font-size: .88rem; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  border-left: 3px solid var(--mango, #E8A33D);
  transform: translateX(120%); opacity: 0;
  transition: transform .38s cubic-bezier(.21,1.02,.55,1), opacity .38s;
}
.evt.in { transform: translateX(0); opacity: 1; }
.evt.out { transform: translateX(120%); opacity: 0; }
.evt__icon { font-size: 1.1rem; }

/* ==================== Vorbestellung (Wunschzeit) ==================== */
.preorder { display: flex; flex-direction: column; gap: 8px; }
.preorder label { display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--card, #fff); border: 1.5px solid var(--line, #ece5db);
  border-radius: 12px; padding: 11px 13px; font-weight: 600; font-size: .92rem;
  transition: .15s; }
.preorder label:has(input:checked) { border-color: var(--mango, #E8A33D); background: color-mix(in srgb, var(--primary) 10%, var(--card)); }
.preorder input[type="datetime-local"] {
  margin-left: auto; border: 1.5px solid var(--line, #ece5db);
  border-radius: 8px; padding: 7px 9px; font-size: .9rem; font-family: inherit; }

/* "Bald wieder verfügbar" */
.card.is-out .card__soldout { color: var(--muted, #8a7f76); font-size: .78rem; font-weight: 700; }

/* Aktions-Zeilen in der Zusammenfassung */
.summary__row--promo span:first-child { color: var(--ok, #3E8E5A); font-weight: 600; }
.summary__gift { font-size: .85rem; color: var(--ok, #3E8E5A); font-weight: 600; padding: 2px 0; }

/* ---- Aktions-Banner: anpassbares Design (Groesse/Animation/Farben) ---- */
.promocardc {
  background: linear-gradient(115deg, var(--pb-from, #C4452F), var(--pb-to, #E8A33D) 85%);
  color: var(--pb-text, #fff);
}
.promocardc__title { font-size: 1.15rem; }
.promobar--sm .promocardc { padding: 10px 14px; }
.promobar--sm .promocardc__title { font-size: 0.95rem; }
.promobar--sm .promocardc__rules { font-size: 0.78rem; }
.promobar--lg .promocardc { padding: 20px 24px; border-radius: 20px; }
.promobar--lg .promocardc__title { font-size: 1.45rem; }
.promobar--lg .promocardc__rules { font-size: 0.98rem; margin-top: 8px; }
@keyframes promoPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}
.promocardc.pb-pulse { animation: promoIn .55s ease forwards, promoPulse 2.8s 1s ease-in-out infinite; }
.promocardc.pb-noshine::after { display: none; }
.promocardc.pb-noanim::after { display: none; }
.promocardc.pb-noanim .promocardc__title::before { animation: none; }

/* ==================== Info- & Bestell-Leiste (Kopf) ==================== */
.orderbar {
  max-width: 1080px; margin: 14px auto 0; position: relative; z-index: 5;
  padding: 0 clamp(1rem, 4vw, 2.4rem);
  display: flex; flex-direction: column; gap: 12px;
}
.orderbar__status {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  font-weight: 700; font-size: 0.9rem;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.4);
}
.orderbar__status .dot { width: 9px; height: 9px; border-radius: 50%; }
.orderbar__status.is-open { background: #e9f7ec; color: #1c7d43; }
.orderbar__status.is-open .dot { background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pulseDot 1.8s infinite; }
.orderbar__status.is-closed { background: #fdecea; color: #a3271a; }
.orderbar__status.is-closed .dot { background: #e0503a; }
@keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } }

.orderbar__info {
  display: flex; flex-wrap: wrap; gap: 10px;
  background: var(--card, #fff); border: 1px solid var(--line, #ece5db);
  border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 12px 34px -20px rgba(26,22,20,.4);
}
.orderbar__info:empty { display: none; }
.oinfo { display: inline-flex; align-items: center; gap: 9px; padding: 2px 6px; }
.oinfo:not(:last-child) { border-right: 1px solid var(--line, #ece5db); padding-right: 16px; }
.oinfo__ic { font-size: 1.35rem; line-height: 1; }
.oinfo small { display: block; font-size: 0.7rem; color: var(--muted, #8a7f76); text-transform: uppercase; letter-spacing: .4px; }
.oinfo b { display: block; font-size: 0.98rem; color: var(--ink, #1a1614); }

/* Verlauf aus Haupt- und Kartenfarbe (ab 1.5.1). Bis 1.5.0 fest Creme →
   Weiß: Auf einer dunklen Seite mit heller Schrift stand „Liefern wir zu
   dir?“ weiß auf Creme (Builder-Prüfung 1.4.2, Befund 3). */
.orderbar__check {
  background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 9%, var(--card)), var(--card));
  border: 1.5px solid var(--mango, #E8A33D); border-radius: 16px;
  padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  transition: box-shadow .2s, transform .2s;
}
.orderbar__check.is-done {
  border-color: #b6e2c1; background: linear-gradient(120deg, color-mix(in srgb, #3E8E5A 9%, var(--card)), var(--card));
}
.orderbar__check.is-done .orderbar__qsub { color: var(--ok-text, #1c7d43); }
.orderbar__check.nudge { animation: nudge .5s ease; box-shadow: 0 0 0 4px rgba(232,163,61,.25); }
@keyframes nudge { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.orderbar__q { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 180px; }
.orderbar__q b { font-size: 1rem; }
/* Normale Schriftfarbe statt Nebenschrift (ab 1.5.1): Der Kasten ist mit der
   Hauptfarbe getönt, die Nebenschrift ist auf die reine Karte gerechnet und
   landete dort bei 4,1-4,4:1 (gemessen an sechs Presets). */
.orderbar__qsub { font-size: 0.82rem; color: var(--ink-soft, #2B2420); }
.orderbar__row { display: flex; gap: 8px; }
.orderbar__row input {
  width: 130px; padding: 10px 13px; border: 1.5px solid var(--line, #ece5db);
  border-radius: 10px; font-size: 1rem;
}
.orderbar__row input:focus { outline: none; border-color: var(--mango, #E8A33D); }
.orderbar__result { flex-basis: 100%; font-size: 0.9rem; font-weight: 600; padding-top: 2px; }
.orderbar__result.ok { color: #1c7d43; }
.orderbar__result.no { color: #a3271a; }
.orderbar__result.info { color: var(--muted, #8a7f76); }

@media (max-width: 560px) {
  .promobar:not([hidden]) { margin-top: 12px; }
  .promobar[hidden] + .orderbar { margin-top: 12px; }
  .oinfo:not(:last-child) { border-right: 0; padding-right: 6px; }
  .orderbar__info { gap: 6px 14px; }
}

/* ==================== Titel-Animationen (Design-Panel) ==================== */
.hero__title.anim-float { animation: titleFloat 3.6s ease-in-out infinite; }
@keyframes titleFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.hero__title.anim-shimmer {
  color: #fff;   /* Fallback, falls background-clip nicht greift -> Titel bleibt sichtbar */
  animation: titleShimmer 3.2s linear infinite;
}
/* Nur wenn der Browser background-clip:text wirklich kann, den Text "durchsichtig"
   machen, damit der Farbverlauf sichtbar wird. Sonst bleibt es beim weissen Text. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title.anim-shimmer {
    background: linear-gradient(100deg,
      var(--title-shimmer-base, #fff) 30%,
      var(--title-shimmer-hi, #ffe6ad) 50%,
      var(--title-shimmer-base, #fff) 70%);
    background-size: 220% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
@keyframes titleShimmer { to { background-position: -220% center; } }

.hero__title.anim-glow { animation: titleGlow 2.6s ease-in-out infinite; }
@keyframes titleGlow {
  0%,100% { text-shadow: 0 0 6px rgba(255,255,255,.25), 0 2px 20px rgba(0,0,0,.35); }
  50% { text-shadow: 0 0 18px rgba(255,220,150,.85), 0 0 34px rgba(232,163,61,.55), 0 2px 20px rgba(0,0,0,.35); }
}

.hero__title.anim-fadein { animation: titleFade 1.1s cubic-bezier(.22,.61,.36,1) both; }
@keyframes titleFade { from { opacity: 0; transform: translateY(18px) scale(.96); letter-spacing: .1em; } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero__title[class*="anim-"] { animation: none !important; }
}

/* Vorbestell-Hinweise */
.preorder__note { font-size: 0.88rem; color: #a3271a; background: #fdecea;
  border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; }
.preorder__hint { font-size: 0.8rem; color: var(--muted, #8a7f76); margin: 8px 0 0; }


/* ---- Abstaende Hero -> Aktions-Banner -> Info-Leiste (keine Ueberlappung) ---- */
/* Bis 1.1.1 rutschte die Leiste hier 30 px (Handy 18 px) unter den Hero -
   als „schoener Uebergang“. Seit 0.9.1 liegt der Kopfbereich (.sitehost,
   z-index 15) aber UEBER der Leiste (z-index 5), damit ein Banner-Ueberstand
   obenauf sitzt. Die Ueberlappung verdeckte damit genau das Oeffnungs-Schild
   („Aktuell geschlossen · heute ab 12 Uhr“) - Kunden sahen nicht, dass zu
   ist (Befund Pilot, 17.10.2026). Jetzt ein normaler Abstand. */
.promobar[hidden] + .orderbar { margin-top: 16px; }
/* Mit Aktion: Banner und Leiste untereinander. Auch das Banner ueberlappte bis
   1.1.1 den Hero um 30 px - und lag dabei (z-index 6) ebenso unter ihm. */
.promobar:not([hidden]) { margin-top: 16px; }
.promobar:not([hidden]) + .orderbar { margin-top: 14px; }

/* ============ Urlaub / vorübergehend geschlossen (ab 0.9.9) ============ */
/* Die Überlappung des Hero (-30px) gilt nur, solange NICHTS zwischen Hero und
   Leiste steht. Läuft eine Schließung, übernimmt ihr Feld die Überlappung –
   sonst ragte die Bestell-Leiste 30 px in den Hinweis hinein.
   Diese beiden Regeln stehen absichtlich HINTER den obigen: Sie sind gleich
   spezifisch, es entscheidet also die Reihenfolge. */
.closure:not([hidden]) ~ .promobar { margin-top: 12px; }
.closure:not([hidden]) ~ .orderbar { margin-top: 14px; }

.closure {
  max-width: 1080px; margin: 16px auto 0; position: relative; z-index: 7;
  padding: 0 clamp(1rem, 4vw, 2.4rem);
  display: flex; gap: 14px; align-items: flex-start;
}
/* Der Kasten liegt als ::before darunter, damit die Innenabstände dieselben
   clamp()-Ränder benutzen wie Aktions-Banner und Bestell-Leiste. Sonst
   stünde er auf dem Handy einen Tick weiter außen als beide Nachbarn. */
.closure::before {
  content: ""; position: absolute; inset: 0 clamp(1rem, 4vw, 2.4rem);
  border-radius: 18px;
  background: var(--card, #fff);
  border: 1px solid color-mix(in srgb, var(--paprika, #C4452F) 32%, var(--line, #ece5db));
  box-shadow: 0 16px 40px -22px rgba(196,69,47,.55);
}
/* color-mix kennen ältere Browser nicht. Ohne diesen Rückfall bliebe der
   Rahmen ganz aus, und der Kasten schwebte ohne Kante auf der Seite. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .closure::before { border-color: rgba(196,69,47,.32); }
}
.closure > * { position: relative; }
.closure__ic { font-size: 2rem; line-height: 1.1; margin: 18px 0 18px 18px; }
.closure__tx { flex: 1; padding: 18px 18px 18px 0; min-width: 0; }
.closure__title {
  display: block; font-size: 1.05rem; font-weight: 800;
  color: var(--paprika, #C4452F);
}
/* pre-line: Der Betreiber tippt die Nachricht in ein mehrzeiliges Feld –
   seine Absätze sollen Absätze bleiben. */
.closure__msg {
  margin: .45rem 0 0; font-size: .95rem; line-height: 1.5;
  color: var(--ink-soft, #1a1614); white-space: pre-line;
}
.closure__back {
  margin: .55rem 0 0; font-size: .92rem; font-weight: 700;
  color: var(--muted, #8a7f76);
}
@media (max-width: 560px) {
  .closure { margin-top: 12px; }
  .closure__ic { font-size: 1.6rem; margin: 15px 0 15px 15px; }
  .closure__tx { padding: 15px 15px 15px 0; }
}

/* ==================== Geschenk-Auswahl im Checkout ==================== */
.giftsel { margin-bottom: 1rem; }
.giftsel__hint { font-size: .85rem; color: var(--muted, #8a7f76); margin: 0 0 .6rem; }
.giftsel__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.giftcard {
  position: relative; display: flex; align-items: center; gap: .6rem;
  border: 1.5px solid var(--line, #ece5db); border-radius: 12px; padding: .55rem;
  background: var(--card, #fff); cursor: pointer; text-align: left;
  font-family: inherit; transition: .15s;
}
.giftcard:hover { border-color: var(--mango, #E8A33D); transform: translateY(-1px); }
.giftcard.is-sel { border-color: var(--mango, #E8A33D); background: color-mix(in srgb, var(--primary) 10%, var(--card));
  box-shadow: 0 0 0 3px rgba(232,163,61,.18); }
.giftcard__img {
  width: 46px; height: 46px; border-radius: 9px; flex: 0 0 auto;
  background-size: cover; background-position: center; background-color: var(--bg, #faf7f2);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.giftcard__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.giftcard__name { font-weight: 700; font-size: .88rem; line-height: 1.25; }
.giftcard__opts { font-size: .72rem; color: var(--muted, #8a7f76); }
.giftcard__check {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800; color: #fff;
  background: var(--line, #ece5db); transition: .15s;
}
.giftcard.is-sel .giftcard__check { background: var(--mango, #E8A33D); }
.summary__gift--pick { color: var(--paprika, #C4452F); font-weight: 700; }

/* -------------------- PayPal-Bezahlfenster -------------------- */
#paypalBox { margin-top: 1rem; padding: 1rem; border: 1.5px solid color-mix(in srgb, #0070BA 25%, var(--card));
  border-radius: 12px; background: color-mix(in srgb, #0070BA 4%, var(--card)); }
#paypalButtons { margin-top: .5rem; min-height: 46px; }
.paypal-note { font-size: .86rem; color: var(--muted, #8a7f76); margin: 0 0 .4rem; line-height: 1.5; }
.paypal-err { color: var(--paprika, #C4452F); font-size: .88rem; font-weight: 600;
  margin: .6rem 0 0; }

/* -------------------- Lieferung/Abholung-Umschalter (Startseite) -------------------- */
.orderbar__mode { display: inline-flex; gap: 4px; padding: 4px;
  background: var(--card, #fff); border: 1.5px solid var(--line, #ece5db);
  border-radius: 999px; align-self: flex-start; box-shadow: 0 6px 18px -12px rgba(0,0,0,.3); }
.modebtn { border: 0; background: transparent; cursor: pointer;
  padding: 8px 18px; border-radius: 999px; font-family: inherit;
  font-size: .9rem; font-weight: 700; color: var(--muted, #8a7f76); transition: .15s; }
.modebtn:hover { color: var(--ink, #1a1614); }
/* Haupt- statt fester Safran-/Paprikafarbe (ab 1.5.1): Weiß auf Safran waren
   2:1, und ein Neon-Design bekam hier trotzdem Orange. */
.modebtn.is-active {
  /* Einfarbig: Die Schriftfarbe ist auf die Hauptfarbe gerechnet - ein
     Verlauf zur Zweitfarbe machte das Ende unlesbar (gemessen 3,2:1). */
  background: var(--primary);
  color: var(--on-primary); }

/* ==================== Hervorhebung: Beliebt & Aktion ==================== */
/* Badge-Reihe über dem Bild */
.card__badges {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 0.4rem;
}
.card__badge--feat {
  color: #7a4e00; background: linear-gradient(135deg, #ffe9b0, #ffcf66);
  box-shadow: 0 3px 10px -4px rgba(232,163,61,.7);
}
.card__badge--promo {
  color: #fff; background: linear-gradient(135deg, var(--paprika, #C4452F), #e2683f);
  box-shadow: 0 3px 10px -4px rgba(196,69,47,.7);
  text-transform: none; letter-spacing: .01em; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  animation: promoPulse 2.2s ease-in-out infinite;
}
@keyframes promoPulse {
  0%, 100% { box-shadow: 0 3px 10px -4px rgba(196,69,47,.7); transform: scale(1); }
  50% { box-shadow: 0 3px 16px -2px rgba(196,69,47,.95); transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .card__badge--promo { animation: none; }
}

/* Beliebte Artikel: warmer Rahmen + leichter Schimmer */
.card.is-feat {
  border-color: #f0c874;
  box-shadow: 0 8px 24px -14px rgba(232,163,61,.55);
}
.card.is-feat:hover { box-shadow: 0 14px 32px -14px rgba(232,163,61,.7); }

/* Aktions-Artikel: kräftiger Paprika-Rahmen, sticht hervor */
.card.is-promo {
  border-color: var(--paprika, #C4452F);
  box-shadow: 0 8px 24px -14px rgba(196,69,47,.55);
}
.card.is-promo::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  border: 2px solid var(--paprika, #C4452F); opacity: .35; pointer-events: none;
}
.card.is-promo:hover { box-shadow: 0 14px 32px -14px rgba(196,69,47,.75); }

/* Beliebt UND Aktion gleichzeitig: Aktion gewinnt beim Rahmen */
.card.is-promo.is-feat { border-color: var(--paprika, #C4452F); }

/* Wenn ein Bild da ist, etwas mehr Platz oben für die Badges */
.card__media { position: relative; }

/* Feld-Fehler (z. B. ungültige Telefonnummer) */
.fld--error { border-color: var(--paprika, #C4452F) !important;
  box-shadow: 0 0 0 3px rgba(196,69,47,.15) !important; }
.fld__err { display: block; margin-top: 4px; font-size: .8rem;
  color: var(--paprika, #C4452F); font-weight: 600; }

/* ============================================================
   DIE SEITE ALS GANZES (ab 0.8.7)

   Was hier steht, ist nur das Gerüst - die konkreten Werte setzt
   pagecore.js zur Laufzeit. Damit sieht die Vorschau im Site-Builder
   genauso aus wie die echte Seite.
   ============================================================ */
/* Eigene Stapelebene für die Seite. Nötig, damit die Bewegung mit z-index -1
   unten in DIESER Ebene landet und nicht hinter dem Seitenhintergrund
   verschwindet. */
.page-host { position: relative; isolation: isolate; }

/* Die Bewegung liegt HINTER allem und nimmt keine Klicks entgegen. */
.page-motion {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  transform: translateY(var(--page-parallax, 0));
}
/* Kein pauschales z-index für die Kinder!
   Ein "z-index: 1" auf alle direkten Kinder legt sie auf dieselbe Ebene, und
   der Kopfbereich (z-index 15) kann dann nicht mehr über die Bestellleiste
   (z-index 5) ragen - ein überstehendes Banner verschwand darunter. Die
   Bewegung liegt jetzt über ihr negatives z-index hinten, die gewachsene
   Reihenfolge der Seite bleibt unangetastet. */

/* -------------------- Anordnung der Artikel -------------------- */
body[data-layout="auto"] .grid--ic,
body[data-layout="auto"] .grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--page-min, 220px), 1fr));
  gap: var(--page-gap, 18px);
}
body[data-layout="columns"] .grid--ic,
body[data-layout="columns"] .grid {
  grid-template-columns: repeat(var(--page-cols, 4), 1fr);
  gap: var(--page-gap, 18px);
}
/* Auf schmalen Geräten kann eine feste Spaltenzahl nicht gelten - vier
   Spalten auf 390 px wären unlesbar. Ab hier entscheidet wieder der Platz. */
@media (max-width: 720px) {
  body[data-layout="columns"] .grid--ic,
  body[data-layout="columns"] .grid {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--page-min, 220px), 46vw), 1fr));
  }
}
body[data-layout="list"] .grid--ic,
body[data-layout="list"] .grid {
  grid-template-columns: 1fr;
  gap: calc(var(--page-gap, 18px) * .6);
}
body[data-layout="carousel"] .grid--ic,
body[data-layout="carousel"] .grid {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  gap: var(--page-gap, 18px); padding-bottom: .6rem;
}
body[data-layout="carousel"] .grid--ic > *,
body[data-layout="carousel"] .grid > * {
  flex: 0 0 var(--page-min, 220px); scroll-snap-align: start;
}
body[data-stretch="0"] .grid--ic { justify-content: start; }

/* -------------------- Kategorien --------------------

   ACHTUNG, hier lag ein stiller Fehler bis 0.9.0: Diese Regeln sprachen
   `.catnav__chip` an — gebaut hat shop.js aber `.catnav__item`. Die
   Darstellungen "Kacheln" und "Reiter" ließen sich einstellen und haben nie
   etwas bewirkt. Kein Fehler in der Konsole, nichts: einfach keine Wirkung.
   Beide Namen stehen jetzt nebeneinander, damit auch eine alte Seite mit
   fremden Klassennamen weiter funktioniert. */
body[data-cat-sticky="0"] .catnav { position: static; }
body[data-cat-icons="0"] .catnav__item span:first-child,
body[data-cat-icons="0"] .catnav__chip span:first-child,
body[data-cat-icons="0"] .section__icon { display: none; }

/* Kachel-Navigation statt Leiste */
body[data-cats="tiles"] .catnav__track {
  display: grid; grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, minmax(var(--cat-tile, 96px), 1fr));
  gap: .6rem; padding: .8rem 0; overflow: visible;
}
body[data-cats="tiles"] .catnav { position: static; background: none; border: 0; }
body[data-cats="tiles"] .catnav__arrow { display: none; }
body[data-cats="tiles"] .catnav__item,
body[data-cats="tiles"] .catnav__chip {
  flex-direction: column; gap: .3rem; height: auto;
  padding: .7rem .4rem; border-radius: var(--cat-radius, 14px);
  border: 1px solid var(--line); background: var(--card);
}
body[data-cats="tiles"] .catnav__item span:first-child,
body[data-cats="tiles"] .catnav__chip span:first-child { font-size: 1.6rem; }
body[data-cats="tiles"] .catnav__pill { display: none; }

/* Reiter */
body[data-cats="tabs"] .catnav__item,
body[data-cats="tabs"] .catnav__chip {
  border-radius: 0; border: 0; border-bottom: 2px solid transparent;
  background: none;
}
body[data-cats="tabs"] .catnav__item.is-active,
body[data-cats="tabs"] .catnav__chip.is-active {
  border-bottom-color: var(--primary); background: none; color: var(--ink);
}
body[data-cats="tabs"] .catnav__pill {
  border-radius: 0; height: 2px; top: auto; bottom: 0;
  background: var(--primary);
}

/* ============================================================
   DIE GLEITENDE PILLE  (ab 0.9.1)

   Der aktive Eintrag wird nicht mehr eingefärbt, sondern von einer Pille
   unterlegt, die zwischen den Einträgen wandert. Der Unterschied ist nicht
   Zierde: Eine Farbe, die springt, muss man suchen — eine Fläche, die
   hinüberfährt, nimmt den Blick mit.

   Sie liegt HINTER den Einträgen (z-index 0 gegen 1) und wird von
   shop.js positioniert. Ohne JavaScript bleibt sie unsichtbar, und die
   Einfärbung des aktiven Eintrags trägt allein — die Navigation
   funktioniert also auch dann.
   ============================================================ */
.catnav__pill {
  position: absolute; z-index: 0;
  /* BEFUND 0.9.5: Ohne diese beiden Zeilen sass die Pille um den
     Innenabstand der Leiste daneben — sichtbar als dunkler, runder Block,
     der zu keinem Eintrag gehoerte.

     Grund: Ein absolut positioniertes Element ohne `left`/`top` startet an
     seiner STATISCHEN Stelle, also hinter dem Innenabstand des Trackes
     (`padding: .7rem clamp(1rem,4vw,2.5rem)`). shop.js verschiebt es dann um
     `offsetLeft`/`offsetTop` des aktiven Eintrags — und die zaehlen denselben
     Innenabstand ein zweites Mal.

     Mit `left/top: 0` liegt der Nullpunkt auf der Polsterkante, und beide
     Seiten rechnen von derselben Kante aus. */
  left: 0; top: 0;
  border-radius: 999px;
  background: var(--dark, #1a1614);
  opacity: 0;
  transition: transform .28s cubic-bezier(.22,.61,.36,1),
              width .28s cubic-bezier(.22,.61,.36,1),
              height .28s cubic-bezier(.22,.61,.36,1),
              opacity .18s ease;
  pointer-events: none;
}
.catnav__pill.is-on { opacity: 1; }
.catnav__item { position: relative; z-index: 1; }
/* Mit Pille braucht der aktive Eintrag keine eigene Fläche mehr - nur die
   Schriftfarbe, die auf ihr lesbar ist. */
.catnav__track.has-pill .catnav__item.is-active { background: none; color: var(--on-dark, #fff); }
/* Bei „Reiter“ ist die Pille nur ein Strich, bei „Kacheln“ gar nicht da -
   dort stand der aktive Eintrag bis 1.5.0 weiß auf hellem Grund bzw. als
   durchsichtige Kachel (in test-1.5.1.js per Kontrastmessung gefunden). */
body[data-cats="tabs"] .catnav__track.has-pill .catnav__item.is-active { color: var(--ink); }
body[data-cats="tiles"] .catnav__track.has-pill .catnav__item.is-active {
  background: var(--dark); border-color: var(--dark); color: var(--on-dark);
}

@media (prefers-reduced-motion: reduce) {
  .catnav__pill { transition: opacity .18s ease; }
}

/* ============================================================
   NAVIGATION LINKS  (ab 0.9.1)

   Die Hülle ist normalerweise "durchsichtig" (display: contents) - die Seite
   sieht damit aus wie vor 0.9.1. Steht die Navigation links, wird sie zum
   Raster mit zwei Spalten.
   ============================================================ */
.shell { display: contents; }

body[data-cat-place="left"] .shell {
  display: grid;
  grid-template-columns: var(--catcol, 220px) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  align-items: start;
}
body[data-cat-place="left"] .catnav {
  position: sticky;
  top: 1rem;
  z-index: 20;
  display: block;
  background: none;
  backdrop-filter: none;
  border: 0;
  padding: .6rem 0;
  max-height: calc(100vh - 2rem);
  overflow: hidden;
}
body[data-cat-place="left"] .catnav__track {
  flex-direction: column;
  align-items: stretch;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: .25rem;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 3.2rem);
  cursor: default;
}
body[data-cat-place="left"] .catnav__item {
  justify-content: flex-start;
  text-align: left;
  padding: .55rem .9rem;
  border-radius: 10px;
}
body[data-cat-place="left"] .catnav__pill { border-radius: 10px; }
body[data-cat-place="left"] .catnav__arrow { display: none; }
body[data-cat-place="left"] .menu { max-width: none; margin: 0; padding: 0; }

/* Auf schmalen Geräten fällt "links" auf "oben" zurück. Eine Seitenspalte
   auf 390 px Breite ist keine Navigation, sondern ein Hindernis. */
@media (max-width: 760px) {
  body[data-cat-place="left"] .shell {
    display: contents;
  }
  body[data-cat-place="left"] .catnav {
    position: sticky; top: 0; display: flex;
    background: color-mix(in srgb, var(--seite-ton, var(--cream)) 90%, transparent); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    padding: 0; max-height: none;
  }
  body[data-cat-place="left"] .catnav__track {
    flex-direction: row; align-items: center;
    max-width: var(--maxw); margin: 0 auto;
    padding: .7rem clamp(1rem, 4vw, 2.5rem);
    gap: .5rem; overflow-x: auto; overflow-y: hidden; max-height: none;
  }
  body[data-cat-place="left"] .catnav__item { border-radius: 999px; }
  body[data-cat-place="left"] .catnav__pill { border-radius: 999px; }
  body[data-cat-place="left"] .menu {
    max-width: var(--maxw); margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2.5rem);
  }
}

/* Klappbereiche: die Überschrift bleibt, die Leiste verschwindet */
body[data-cats="accordion"] .catnav { display: none; }
body[data-cats="accordion"] .section__head { cursor: pointer; user-select: none; }
body[data-cats="accordion"] .section__head::after {
  content: "▾"; margin-left: auto; color: var(--muted); transition: transform .18s;
}
body[data-cats="accordion"] .section.is-closed .section__head::after { transform: rotate(-90deg); }
body[data-cats="accordion"] .section.is-closed .grid { display: none; }

/* ============ PLZ zuerst (ab 1.2.0) ============ */
/* Bestätigt: Das Tor wird zur einen Zeile „📍 Wir liefern nach 44892 · ändern“ */
.orderbar__done {
  flex-basis: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; font-weight: 700; color: #1c7d43;
}
.orderbar__change {
  background: none; border: 1px solid #b6e2c1; color: var(--ok-text, #1c7d43); border-radius: 999px;
  padding: 5px 12px; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer;
}
.orderbar__change:hover { background: color-mix(in srgb, #3E8E5A 14%, var(--card)); }
.oinfo--plz b { color: var(--ok-text, #1c7d43); }

/* Das Fenster, das beim ersten Artikel nach der PLZ fragt */
.plzask { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 18px; }
.plzask[hidden] { display: none; }
.plzask__backdrop { position: absolute; inset: 0; background: rgba(20,14,10,.55); backdrop-filter: blur(3px); }
.plzask__panel {
  position: relative; width: min(420px, 100%); background: var(--card, #fff); color: var(--ink, #1a1614);
  border-radius: 22px; padding: 26px 22px 20px; text-align: center;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); animation: plzIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes plzIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.plzask__close {
  position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 1.6rem;
  line-height: 1; color: var(--muted, #8a7f76); cursor: pointer; padding: 4px 8px;
}
.plzask__ic { font-size: 2.4rem; line-height: 1; margin-bottom: 6px; }
.plzask__panel h2 { margin: 0 0 6px; font-size: 1.3rem; }
.plzask__lead { margin: 0 0 16px; color: var(--muted, #8a7f76); font-size: 0.92rem; line-height: 1.45; }
.plzask__row { display: flex; gap: 8px; }
.plzask__row input {
  flex: 1; min-width: 0; padding: 13px 14px; font-size: 1.15rem; letter-spacing: 2px; text-align: center;
  border: 1.5px solid var(--line, #ece5db); border-radius: 12px; font-weight: 700;
}
.plzask__row input:focus { outline: none; border-color: var(--mango, #E8A33D); box-shadow: 0 0 0 4px rgba(232,163,61,.18); }
.plzask .orderbar__result { margin-top: 12px; text-align: left; }
.plzask__pickup {
  margin-top: 14px; background: none; border: 0; color: var(--muted, #8a7f76); font: inherit;
  font-size: 0.9rem; text-decoration: underline; cursor: pointer;
}
/* `hidden` muss gegen die display-Angaben oben gewinnen - sonst stünden
   Frage und Feld neben der Bestätigung (gemessen im ersten Prüflauf 1.2.0). */
.orderbar__done[hidden], .orderbar__q[hidden], .orderbar__row[hidden] { display: none !important; }

/* ============================================================
   HANDY-ANSICHT  (ab 1.2.1)

   Befund am Pilotladen (360 px, Fotos in tests/sunmi-blick.js):
     - je Artikel eine 430 px hohe Kachel, 23 000 px Speisekarte
     - Warenkorb-Knopf und Nach-oben-Pfeil lagen über Text und „+“
     - Infokasten 282 px hoch (fünf Zeilen untereinander)
   Alles hier gilt nur bis 600 px - darüber bleibt die Seite unverändert.
   ============================================================ */
.fab-cart__lbl { display: none; }

/* ---- Artikel als Zeilen ----
   Seit 1.5.1 in itemcard.css: Die Zeile ist die Handy-Fassung der Kachel
   und übernimmt deren Gestaltung (ItemCore.renderRow/rowStyle). Sie muss
   im Item-Builder genauso aussehen - der lädt shop.css nicht. */

@media (max-width: 600px) {
  /* ---- Abschnitte enger ---- */
  body.is-handyliste .section { margin-bottom: 1.6rem; }
  body.is-handyliste .section__head { margin-bottom: .7rem; }

  /* ---- Infokasten: zwei Spalten statt fünf Zeilen ---- */
  .orderbar__info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 12px 14px; }
  .oinfo { padding: 0; gap: 8px; align-items: flex-start; }
  .oinfo:not(:last-child) { border-right: 0; padding-right: 0; }
  .oinfo__ic { font-size: 1.1rem; margin-top: 2px; }
  .oinfo small { font-size: .64rem; }
  .oinfo b { font-size: .9rem; }

  /* ---- Warenkorb: leer unsichtbar, voll als Leiste über die ganze Breite ----
     Rund unten rechts lag er auf dem „+“ der Artikel; leer zeigt er nichts,
     was man braucht. Voll ist er DIE nächste Handlung - also groß. */
  .fab-cart.is-empty { display: none; }
  .fab-cart {
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    height: 56px; padding: 0 18px; gap: 12px; justify-content: flex-start;
    border-radius: 16px; font-size: 1rem;
  }
  .fab-cart__count { position: static; border: 0; background: rgba(0,0,0,.14); color: inherit; min-width: 28px; height: 28px; }
  .fab-cart__lbl { display: inline; font-weight: 800; flex: 1; text-align: left; }
  .fab-cart__total { font-weight: 800; }
  body.hat-warenkorb { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

  /* ---- Nach oben: am Handy übernimmt das die klebende Kategorie-Leiste.
     Mittig unten lag der Pfeil mitten im Text der Artikel. ---- */
  .to-top { display: none; }

  /* ---- Kategorie-Leiste: kompakter ---- */
  .catnav__track { padding: .55rem .8rem; gap: .35rem; scroll-padding: 0 .8rem; }
  .catnav__item { padding: .45rem .85rem; font-size: .88rem; }
  .catnav__arrow { display: none; }
}

/* ============================================================
   SCHRIFTEN, ÜBERSCHRIFTEN, EINBLENDEN  (ab 1.5.1)

   Gesetzt von PageCore.apply() aus design.page (Site-Builder, Ebene
   „Seite“). Ohne Einstellung greift keine dieser Regeln - eine Seite aus
   1.5.0 sieht unverändert aus.
   ============================================================ */
.section__title { font-weight: var(--heading-weight, 700); }
body[data-heading-case="upper"] .section__title,
body[data-heading-case="upper"] .modal__title,
body[data-heading-case="upper"] .cart__head h2,
body[data-heading-case="upper"] .checkout__head h2 { text-transform: uppercase; letter-spacing: .04em; }

/* Schmuck nur am schlichten Kopf - nicht, wenn der Category-Builder den Kopf
   baut oder die Kategorie ein eigenes Bild hat. */
body[data-heading-align="center"] .section__head:not(.has-bg):not(.section__head--gebaut) { justify-content: center; text-align: center; }
body[data-heading-deco="line"] .section__head:not(.has-bg):not(.section__head--gebaut)::after {
  content: ""; flex: 1 1 auto; height: 2px; align-self: center; min-width: 2rem;
  background: linear-gradient(90deg, var(--heading-accent), transparent);
}
body[data-heading-deco="line"][data-heading-align="center"] .section__head:not(.has-bg):not(.section__head--gebaut)::before {
  content: ""; flex: 1 1 auto; height: 2px; align-self: center; min-width: 2rem; order: -1;
  background: linear-gradient(270deg, var(--heading-accent), transparent);
}
body[data-heading-deco="underline"] .section__head:not(.has-bg):not(.section__head--gebaut) .section__title {
  text-decoration: underline; text-decoration-color: var(--heading-accent);
  text-decoration-thickness: .12em; text-underline-offset: .22em;
}
body[data-heading-deco="pill"] .section__head:not(.has-bg):not(.section__head--gebaut) .section__title {
  background: var(--heading-accent); color: var(--on-heading-accent);
  padding: .12em .7em .16em; border-radius: 999px; font-size: clamp(1.2rem, 3vw, 1.6rem);
}
body[data-heading-deco="bar"] .section__head:not(.has-bg):not(.section__head--gebaut) {
  border-left: 6px solid var(--heading-accent); padding-left: .8rem;
}
body[data-heading-deco="ornament"] .section__head:not(.has-bg):not(.section__head--gebaut) .section__title::before,
body[data-heading-deco="ornament"] .section__head:not(.has-bg):not(.section__head--gebaut) .section__title::after {
  content: "✦"; color: var(--heading-accent); font-size: .6em; vertical-align: .25em; margin: 0 .55em;
}

/* Einblenden beim Scrollen. Die Übergangsdauer steht am ZIELzustand
   (.is-in): Beim Wechsel einer Klasse nimmt der Browser die Übergänge des
   neuen Zustands. Beim Überfahren gilt die kurze Dauer, sonst höbe sich
   eine Kachel eine halbe Sekunde lang. */
body[data-reveal="none"] .card { opacity: 1; transform: none; }
body[data-reveal="fade"] .card:not(.is-in) { opacity: 0; transform: none; }
body[data-reveal="rise"] .card:not(.is-in) { opacity: 0; transform: translateY(42px); }
body[data-reveal="zoom"] .card:not(.is-in) { opacity: 0; transform: scale(.9); }
body[data-reveal="tilt"] .card:not(.is-in) { opacity: 0; transform: perspective(800px) rotateX(16deg) translateY(30px); transform-origin: 50% 100%; }
body[data-reveal="slide"] .card:not(.is-in) { opacity: 0; transform: translateX(-36px); }
body[data-reveal="blur"] .card:not(.is-in) { opacity: 0; transform: translateY(12px); filter: blur(8px); }
body[data-reveal="fade"] .card.is-in, body[data-reveal="rise"] .card.is-in,
body[data-reveal="zoom"] .card.is-in, body[data-reveal="tilt"] .card.is-in,
body[data-reveal="slide"] .card.is-in, body[data-reveal="blur"] .card.is-in {
  transition: opacity var(--reveal-dur, .6s) ease, transform var(--reveal-dur, .6s) cubic-bezier(.2,.75,.25,1),
              filter var(--reveal-dur, .6s) ease, box-shadow .22s ease, border-color .18s ease;
}
body[data-reveal] .card.is-in:hover { transition-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
  body[data-reveal] .card, body[data-reveal] .card:not(.is-in) { opacity: 1; transform: none; filter: none; transition: none; }
}