/* محمصة الخاني — Stylesheet v21. Vertrag: docs/DESIGN.md
   Farben, Logo und Schriften der bisherigen Website (Entscheidung Ahmad, 2026-09-28): dunkles Braun
   als Grund, Gold für alles, was man antippt, Creme für Text und helle Abschnitte.
   Drei Schriften: Aref Ruqaa für arabische Titel (wie das Logo), Marcellus für lateinische Titel,
   IBM Plex Sans Arabic für Lesetext und Bedienelemente.
   Alle Richtungsangaben logisch (inline-start/end), damit AR (RTL) und EN (LTR) aus einer Datei laufen. */

@font-face {
  font-family: "Aref Ruqaa";
  src: url("/assets/fonts/aref-ruqaa-v26-arabic_latin-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* Ersatz, solange die Titelschriften laden. Die Systemschrift für Arabisch (Apple: Geeza Pro) läuft
   im Mittel 1,44-mal breiter als Aref Ruqaa (115 Titel, Chromium und WebKit), Times dagegen nur
   0,90-mal so breit wie Marcellus (131 Titel). Lange Titel brachen deshalb mit der Ersatzschrift
   anders um als danach, und die Seite sprang beim Schriftwechsel (Bewertungen: CLS 0,39 bei 768 px
   und 0,18 bei 1440 px, wenn die Schrift 1,5 s nach dem ersten Bild ankam). size-adjust gleicht
   die Laufweite an; 64 % ergab über 42 Messungen die kleinste Summe (69 %: 0,48, 64 %: 0,42,
   60 %: 0,42, ohne: 1,14). Greift nur, wo es die genannten Schriften gibt; sonst gilt weiter die
   Systemschrift. Prüfung: tools/qa/cls_late.cjs */
@font-face {
  font-family: "Ruqaa Ersatz";
  src: local("Geeza Pro Bold"), local("GeezaPro-Bold");
  font-weight: 700;
  size-adjust: 64%;
}
@font-face {
  font-family: "Marcellus Ersatz";
  src: local("Times"), local("Times New Roman"), local("TimesNewRomanPSMT");
  font-weight: 400;
  size-adjust: 112%;
  /* Nur lateinische Zeichen: Times New Roman enthält auch arabische und bekäme sie auf englischen
     Seiten sonst vor Aref Ruqaa, auf Dauer und in 112 % */
  unicode-range: U+0000-024F, U+2000-206F, U+20A0-20CF, U+2100-214F;
}
@font-face {
  font-family: "Marcellus";
  src: url("/assets/fonts/marcellus-v14-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Plex Arabic";
  src: url("/assets/fonts/ibm-plex-sans-arabic-v15-arabic_latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Plex Arabic";
  src: url("/assets/fonts/ibm-plex-sans-arabic-v15-arabic_latin-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Grund: dunkles Braun der bisherigen Website */
  --bg: #191110;
  --bg-2: #211611;
  --bg-3: #2B1D15;
  --bg-deep: #120C0A;
  --night: #0D0908;
  --line: rgba(201, 162, 75, .22);
  --line-strong: rgba(201, 162, 75, .55);
  /* Text: Creme */
  --fg: #F3EBDD;
  --fg-2: #CDBFA5;
  --fg-3: #A69880;
  /* Gold: Knöpfe, Linien, Ringe, Sterne, Symbole; hell für Schrift */
  --accent: #C9A24B;
  --accent-bright: #E5C87E;
  --accent-text: #E5C87E;
  /* Helle Flächen: Creme mit dunkler Tinte, Gold für Akzente darauf */
  --paper: #F3EBDD;
  --paper-2: #EADDC7;
  --paper-line: rgba(139, 107, 46, .25);
  --ink: #241A12;
  --ink-2: #5D4E3F;
  --accent-paper: #7A5A22;
  /* Neon: nur im Abendabschnitt */
  --neon: #EAF4FF;
  --neon-blue: #6F8FD8;

  /* Titel: arabisch Aref Ruqaa 700, lateinisch Marcellus 400 (html[lang="en"] dreht die Reihenfolge) */
  --display: "Aref Ruqaa", "Ruqaa Ersatz", "Marcellus", serif;
  --display-w: 700;
  --ui: "Plex Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.7rem, 1.5rem + 5vw, 5.4rem);
  --fs-h1: clamp(2.2rem, 1.3rem + 3.6vw, 3.9rem);
  --fs-h2: clamp(1.95rem, 1.2rem + 3vw, 3.2rem);
  /* Sechs Titelstufen. h3: Sortenname der Bühne, Zwischentitel. h4: Fach, Filiale, Kasten.
     h5: Karte, Frage, Spaltenkopf. Keine weiteren Titelgrößen daneben. */
  --fs-h3: clamp(1.6rem, 1.2rem + 1.3vw, 2.25rem);
  --fs-h4: clamp(1.4rem, 1.2rem + .6vw, 1.6rem);
  --fs-h5: clamp(1.25rem, 1.15rem + .3vw, 1.35rem);
  --fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-ui: 1rem;
  --fs-ui-small: .9375rem;

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1320px;
  --sec: clamp(64px, 3.5rem + 4vw, 112px);
  --r: 2px;
  --r-frame: 4px;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --hdr-h: 64px;
  --bar-h: calc(60px + env(safe-area-inset-bottom));
  /* Ein Hundertstel der sichtbaren Höhe. Browser ohne svh (Chrome bis 107, Safari bis 15.3) rechnen
     mit vh. Als Variable, weil eine zweite Angabe als Rückfall nicht greift, sobald die Angabe
     var() enthält: sie gilt dann erst beim Rechnen als ungültig, und die Breite fiel auf auto, die
     Schale auf 0 px (Code-Review v20, Nr. 9). */
  --svh: 1vh;
  /* Oberkante für alles, was unter der Kopfzeile klebt (Gruppenkopf, Film der Filialseite) */
  --stick: calc(var(--hdr-h) + 24px);
  color-scheme: dark;
}
@supports (height: 1svh) { :root { --svh: 1svh; } }
@media (min-width: 1024px) { :root { --hdr-h: 76px; } }
html[lang="en"] { --display: "Marcellus", "Marcellus Ersatz", "Aref Ruqaa", "Ruqaa Ersatz", serif; --display-w: 400; }
/* Aktionsleiste am Handy und in niedrigen Fenstern (Telefon quer: die Kopfzeile klebt dort nicht,
   ohne Leiste war beim Scrollen kein Kontaktknopf erreichbar; Nachprüfung v20, B2). In hohen
   Fenstern ab 768 px stehen WhatsApp und Anruf im Kopf, dort braucht die Leiste keinen Platz.
   --bar-h hängt an genau den Abfragen, die die Leiste ausblenden oder aus der Fixierung nehmen:
   vorher galt bei gebrochenen Maßen (Zoom 110 %: 767,3 px) keine der beiden Seiten, die Leiste
   stand da und hatte keinen Platz (Code-Review v20, Nr. 14). */
@media (min-width: 768px) and (min-height: 501px) { :root { --bar-h: 0px; } }
/* Sehr niedrige Fenster (starker Zoom, 320 × 256 px): Kopf und Leiste nicht fixieren, sonst
   verdecken sie die Hälfte des Bildes (Barrierefreiheitsprüfung v17, N6). Die Kopfzeile löst sich
   früher. Die Leiste bleibt bis hinab zu 240 px fixiert: ein Telefon quer zeigt mit Adressleiste
   nur etwa 280 bis 340 px (geschätzt, nicht an Geräten gemessen), und bei der früheren Grenze
   von 340 px war dort beim Scrollen kein Kontaktknopf erreichbar. 240 px lässt 40 px Abstand zur
   Schätzung (Code-Reviews v20, Nr. 10, und v20.3, Befund 9). Bei 320 × 256 px (Zoom 400 %) steht
   damit die Leiste fest (60 von 256 px), die Kopfzeile nicht. */
@media (max-height: 239.98px) { :root { --bar-h: 0px; } }

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hdr-h) + 16px);
  /* Fokus nie unter der fixierten Aktionsleiste (WCAG 2.4.11) */
  scroll-padding-bottom: calc(var(--bar-h) + 16px);
}
@media (max-height: 400.98px), (min-width: 560px) and (max-height: 500.98px) { html { scroll-padding-top: 16px; } :root { --stick: 24px; } }
@media (prefers-reduced-motion: no-preference) { html:not(.static) { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--fs-body)/1.9 var(--ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 1.2s var(--ease-out);
}
html[lang="en"] body { line-height: 1.7; }
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--bg-deep); }
p, li, dd, blockquote { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

:focus { outline: 2px solid var(--fg); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }
.paper :focus-visible, .paper:focus-visible { outline-color: var(--ink); }

.skip {
  position: absolute; inset-inline-start: 12px; top: -80px; z-index: 100;
  background: var(--fg); color: var(--ink); padding: 12px 18px; border-radius: var(--r);
  font: 600 var(--fs-ui)/1.2 var(--ui); transition: top .2s var(--ease-out);
}
.skip:focus { top: 12px; }
.nw { white-space: nowrap; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--sec); }
.sec--join { padding-top: 0; }

/* Symbole: 24er Raster, 1,6 px Strich, erben die Farbe. Zwei Größen: 18 px neben Text,
   20 px in Knöpfen, Leisten und neben Titeln */
.ico-line { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.ico-line svg { width: 18px; height: 18px; margin-top: .38em; color: var(--accent-text); }

/* Typografie ------------------------------------------------------------ */
.h2 { font: var(--display-w) var(--fs-h2)/1.35 var(--display); }
.h3 { font: var(--display-w) var(--fs-h3)/1.4 var(--display); }
/* Latein braucht engeren Durchschuss als Ruqaa mit seinen tiefen Unterlängen */
html[lang="en"] :is(h1, h2, h3, .h2, .h3, .stage-name, .menu-list b, .bin-h) { line-height: 1.15; letter-spacing: .005em; }
.lead { font-size: var(--fs-lead); line-height: 1.85; color: var(--fg-2); }
html[lang="en"] .lead { line-height: 1.6; }
.muted { color: var(--fg-3); }
.num { font-feature-settings: "lnum" 1; }
.sec-head { display: grid; gap: 14px; align-content: start; max-width: 46rem; margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head p { color: var(--fg-2); }

.tlink {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
  transition: text-decoration-color .2s var(--ease-out);
}
@media (hover: hover) { .tlink:hover { text-decoration-color: currentColor; } }
/* Einzeln stehende Textlinks (nicht im Satz): die Antippfläche reicht über die Zeile hinaus, bis
   sie 44 px hoch ist. Die Zeile selbst bleibt, wie sie ist (Designprüfung v20.2, N11). */
:is(.rating-src, .ig-line .tlink, .facts dd > .tlink, .branch-row h3 a, .br-card h2 a, .group-head h2 a) { position: relative; }
:is(.rating-src, .ig-line .tlink, .facts dd > .tlink, .branch-row h3 a, .br-card h2 a, .group-head h2 a)::after { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 44px; transform: translateY(-50%); }

/* Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: var(--r);
  font: 600 var(--fs-ui)/1.2 var(--ui);
  background: var(--accent); color: var(--bg);
  border: 1px solid var(--accent);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .16s var(--ease-out);
  cursor: pointer; text-align: center;
}
.btn svg { width: 20px; height: 20px; flex: none; }
/* „mehr"-Link mit Pfeil: eine Form für alle weiterführenden Links */
.more { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font: 600 var(--fs-ui-small)/1.3 var(--ui); color: var(--accent-text); }
.more svg { width: 18px; height: 18px; transition: transform .2s var(--ease-out); }
html[dir="rtl"] .more svg { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
  .more:hover span { text-decoration: underline; text-underline-offset: .3em; }
  .more:hover svg { transform: translateX(3px); }
  html[dir="rtl"] .more:hover svg { transform: scaleX(-1) translateX(3px); }
}
.sec--cream .more, .paper .more { color: var(--accent-paper); }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--accent-bright); border-color: var(--accent-bright); } }
.btn--line { background: transparent; color: var(--fg); border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .btn--line:hover { background: rgba(201, 162, 75, .1); border-color: var(--accent-bright); } }
.paper .btn { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.paper .btn--line, .sec--cream .btn--line { background: transparent; color: var(--ink); border-color: var(--accent-paper); }
@media (hover: hover) and (pointer: fine) {
  .paper .btn:hover { background: var(--bg-deep); border-color: var(--bg-deep); }
  .paper .btn--line:hover { background: transparent; border-color: var(--ink); }
}
/* Knopf mit Unterzeile („اتصل" + „الرقم الرئيسي"): die Unterzeile läuft über die ganze
   Knopfbreite, der Knopf bleibt so hoch wie die einzeiligen */
.btn--sub { flex-wrap: wrap; align-content: center; row-gap: 1px; }
.btn--sub small { flex-basis: 100%; font: 400 .875rem/1.15 var(--ui); color: var(--fg-3); white-space: nowrap; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* Druck: jeder Link gibt nach, auch ohne Knopfform (der Antipp-Schleier des Browsers ist aus) */
a:not(.btn):active, summary:active, .zoom-btn:active { opacity: .7; }
.sec-head .btns { margin-top: 8px; }

/* Kopfzeile --------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease-out), background-color 1.2s var(--ease-out);
}
/* Niedrige Fenster: die Kopfzeile klebt nicht, denn dort steht unten die Aktionsleiste. Bis
   400 px Höhe gilt das für jede Breite; zwischen 401 und 500 px nur ab 560 px Breite (Telefon
   quer, 932 × 430: dort klebten beide und nahmen zusammen 29 % der Höhe, Designprüfung v20.2,
   N9). Ein schmales Handy hochkant mit weniger als 501 px sichtbarer Höhe behält die klebende
   Kopfzeile: sonst wechselte sie beim Ein- und Ausfahren der Browserleisten (Code-Review v20.3,
   Befund 3). Dieselbe Abfrage steht in site.js (lowWindow).
   Nicht klebend, aber positioniert: mit static griff z-index nicht, das offene Menü lag über dem
   Menüknopf und ließ sich per Finger nicht mehr schließen (Nachprüfung v20, N1) */
@media (max-height: 400.98px), (min-width: 560px) and (max-height: 500.98px) { .hdr { position: relative; } }
/* Bei offenem Menü klebt sie auch dort: war die Seite ein Stück gescrollt, lag der Menüknopf halb
   über dem Rand und das Menü ließ sich schwer schließen (Designprüfung v20.3, G2) */
body.menu-open .hdr { position: sticky; }
.hdr.is-scrolled { border-bottom-color: var(--line); }
.hdr-in { display: flex; align-items: center; gap: 14px; min-height: var(--hdr-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; min-width: 0; }
.brand-seal { width: 44px; height: 44px; flex: none; }
@media (min-width: 1024px) { .brand-seal { width: 52px; height: 52px; } }
/* Der Name ist das Logo: immer Aref Ruqaa 700, auch auf englischen Seiten */
.brand-name { font: 700 var(--fs-h4)/1.2 "Aref Ruqaa", "Ruqaa Ersatz", serif; white-space: nowrap; letter-spacing: .01em; }
/* Unter 360 px passt der Name nicht neben Sprachlink und Menü (1.4.10). Er bleibt im Linknamen. */
@media (max-width: 359.98px) { .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.nav { margin-inline-start: auto; display: none; }
.nav ul { display: flex; gap: clamp(18px, 2vw, 32px); }
.nav a { position: relative; display: inline-block; padding: 10px 0; font: 400 var(--fs-ui)/1.4 var(--ui); color: var(--fg-2); transition: color .2s var(--ease-out); }
.nav a[aria-current] { color: var(--fg); }
.nav a[aria-current]::after { content: ""; position: absolute; inset-inline: 0; bottom: 2px; height: 2px; background: var(--accent); }
@media (hover: hover) { .nav a:hover { color: var(--fg); } }
.hdr-act { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
@media (min-width: 1024px) { .nav { display: block; } .hdr-act { margin-inline-start: 24px; } }
/* Sprachwahl: ruhiger Textlink mit Globus statt einer dritten Knopfform */
.lang {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 48px; min-height: 44px; padding: 0 8px;
  border-radius: var(--r); font: 600 var(--fs-ui-small)/1 var(--ui); color: var(--fg-2);
  transition: color .2s var(--ease-out);
}
.lang svg { width: 18px; height: 18px; color: var(--accent); }
@media (hover: hover) { .lang:hover { color: var(--fg); } }
/* Anruf und WhatsApp im Kopf ab 768 px; zwischen 1024 und 1279 px nur als Symbol (Name bleibt) */
.hdr-btn { display: none; min-height: 44px; padding: 0 14px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .16s var(--ease-out), opacity .25s var(--ease-out), visibility 0s; }
/* Seiten mit eigenen Kontaktknöpfen oben (Bühne, Produkt, Filiale): derselbe Knopf steht nicht
   zweimal im Bild. WhatsApp im Kopf wartet, bis die Knöpfe der Seite oben hinaus sind; der Anruf
   wartet nur dort, wo die Seite selbst einen Anrufknopf zeigt (cta-tel). */
/* Am Seitenende gilt dasselbe für beide Kopfknöpfe, solange WhatsApp oder Anruf in der Fußzeile
   zu sehen ist (bar-end): am Handy trat dort nur die Leiste zurück, ab 768 px standen Kopfknöpfe
   und Fußzeile über 400 px Scrollweg zugleich da (Designprüfung v20.3, H1). */
html.bar-wait .hdr-btn--wa, html.cta-tel.bar-wait .hdr-btn--tel, html.bar-end .hdr-btn { opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease-out), visibility 0s linear .25s; }
/* Hat ein Kopfknopf den Tastaturfokus, bleibt er stehen: sonst fiel der Fokus auf die Seite zurück,
   sobald der Knopf verschwand (Code-Review v20, Nr. 12). Als eigene Regel: Browser ohne
   :focus-visible (Safari bis 15.3) verwerfen nur sie; in der Warte-Regel selbst setzte die
   Pseudoklasse dort das ganze Warten außer Kraft (Code-Review v20.3, Befund 2). */
html:is(.bar-wait, .bar-end) .hdr .hdr-btn:focus-visible { opacity: 1; visibility: visible; transition: opacity .25s var(--ease-out), visibility 0s; }
/* Bei offenem Menü deckt es die Knöpfe der Seite zu: dann stehen beide Kopfknöpfe da */
html body.menu-open .hdr .hdr-btn { opacity: 1; visibility: visible; transition: opacity .25s var(--ease-out), visibility 0s; }
/* Bis site.js übernimmt (cta-js), bleiben Leiste und wartende Kopfknöpfe verborgen, damit sie beim
   Laden nicht aufblitzen. Lädt site.js gar nicht, erscheinen sie nach 8 s von selbst. */
@keyframes cta-late { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
html.cta-first:not(.cta-js) :is(.actbar, .hdr-btn--wa), html.cta-tel:not(.cta-js) .hdr-btn--tel { animation: cta-late .2s 8s both; }
@media (min-width: 768px) and (min-height: 501px) { .hdr-btn { display: inline-flex; } }
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .hdr-btn { width: 44px; padding: 0; }
  .hdr-btn-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.burger {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; margin-inline-end: -8px; background: none; border: 0; cursor: pointer; border-radius: var(--r);
}
.burger span { position: relative; width: 22px; height: 2px; background: var(--fg); transition: background-color .2s; }
.burger span::before, .burger span::after { content: ""; position: absolute; inset-inline: 0; height: 2px; background: var(--fg); transition: transform .28s var(--ease-out); }
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1024px) { .burger { display: none; } }

/* Siegel prägt sich einmal je Sitzung ein (Begrüßung ohne Vollbildschicht) */
@keyframes seal-press {
  0% { transform: scale(1.35) rotate(-14deg); opacity: 0; }
  55% { transform: scale(.94) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.greet .brand-seal { animation: seal-press .72s var(--ease-out) both; }

/* Vollbildmenü ------------------------------------------------------------ */
.menu {
  position: fixed; inset: 0; z-index: 35; overflow-y: auto; overscroll-behavior: contain;
  /* Fokus nie unter der Kopfzeile oder den klebenden Kontaktknöpfen */
  scroll-padding-block: calc(var(--hdr-h) + 16px) calc(92px + env(safe-area-inset-bottom));
  /* Der Abstand am Ende steht an der letzten Zeile (.menu-meta), nicht hier: Klebendes hält sich
     an den Innenabstand des Rollbereichs, die Kontaktknöpfe standen sonst 32 px über dem Rand */
  padding: calc(var(--hdr-h) + 24px) var(--gutter) 0;
  background: var(--bg);
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease-out), visibility 0s linear .25s;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .25s var(--ease-out), visibility 0s; }
.menu-list { display: grid; gap: 4px; max-width: 34rem; }
.menu-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.menu-list a[aria-current] b { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.menu-list b { font: var(--display-w) var(--fs-h2)/1.4 var(--display); }
.menu-list small { font: 400 var(--fs-ui-small)/1.4 var(--ui); color: var(--fg-3); }
.menu-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.menu-cats a { padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r); font: 400 var(--fs-ui-small)/1.3 var(--ui); }
/* Passt das Menü nicht in die Höhe, bleiben WhatsApp und Anruf am unteren Rand stehen (bei
   375 × 553 waren sie halb abgeschnitten, im Querformat unter dem Falz; Designprüfung v20.2, N11) */
.menu { --menu-bg: var(--bg); }
html.is-evening .menu { --menu-bg: var(--night); }
.menu-acts { position: sticky; bottom: 0; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; padding-block: 12px calc(12px + env(safe-area-inset-bottom)); background: var(--menu-bg); }
/* Was unter den Knöpfen durchläuft, blendet aus, statt an einer Kante abzubrechen */
.menu-acts::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: 16px; background: linear-gradient(to top, var(--menu-bg), transparent); pointer-events: none; }
.menu-acts .btn { padding: 0 10px; }
/* Ab 768 px stehen Anruf und WhatsApp im Kopf, auch über dem offenen Menü */
@media (min-width: 768px) and (min-height: 501px) { .menu-acts { display: none; } }
.menu-meta { margin-top: 10px; padding-bottom: calc(32px + env(safe-area-inset-bottom)); color: var(--fg-3); font: 400 var(--fs-ui-small)/1.5 var(--ui); }
@media (min-width: 768px) and (min-height: 501px) { .menu-meta { margin-top: 22px; } }
.menu-meta svg { margin-top: .1em; }
@media (min-width: 1024px) { .menu { display: none; } }
body.menu-open { overflow: hidden; }

/* Aktionsleiste: am Handy und in niedrigen Fenstern (Telefon quer). Mit JavaScript tritt sie
   zurück, solange ein eigener Kontaktknopf der Seite (Bühne, Produkt, Filiale) im Bild ist. */
.actbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--bg-2); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  transition: transform .32s var(--ease-out), visibility 0s, background-color 1.2s var(--ease-out);
}
html.bar-wait .actbar { transform: translateY(105%); visibility: hidden; transition: transform .32s var(--ease-out), visibility 0s linear .32s, background-color 1.2s var(--ease-out); }
.actbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 60px; padding: 6px 2px; font: 600 var(--fs-ui-small)/1.2 var(--ui); color: var(--fg); text-align: center; overflow-wrap: anywhere;
}
.actbar a + a { border-inline-start: 1px solid var(--line); }
/* Unter 360 px sind die vier Felder 80 px breit: «WhatsApp» hatte 3,7 px Luft (Designprüfung v20.4, G-3) */
@media (max-width: 359.98px) { .actbar a { font-size: .8125rem; } }
.actbar svg { width: 20px; height: 20px; }
.actbar a:active { background: var(--bg-3); }
@media (min-width: 768px) and (min-height: 501px) { .actbar { display: none; } }
/* Am Seitenende stehen dieselben vier Wege in der Fußzeile: die Leiste tritt zurück */
html.bar-end .actbar { transform: translateY(105%); visibility: hidden; transition: transform .32s var(--ease-out), visibility 0s linear .32s, background-color 1.2s var(--ease-out); }
body.menu-open .actbar { transform: translateY(105%); }
/* Sehr niedrige Fenster: die Leiste steht im Fluss am Seitenende und tritt nie zurück. Die Regel
   steht nach allen, die sie aufhebt (vorher überschrieb bar-end sie, die Leiste war unsichtbar
   und ließ 60 px leer; Code-Review v20, Nr. 13). */
@media (max-height: 239.98px) { .actbar { position: static; } html.bar-wait .actbar, html.bar-end .actbar, body.menu-open .actbar { transform: none; visibility: visible; } }
/* Hat ein Eintrag der Leiste den Tastaturfokus, bleibt sie stehen (wie die Knöpfe im Kopf) */
html.bar-wait .actbar:has(:focus-visible), html.bar-end .actbar:has(:focus-visible) { transform: none; visibility: visible; }

/* Tiefenfoto -------------------------------------------------------------- */
.spatial { position: relative; margin: 0; aspect-ratio: 1700 / 1900; touch-action: pan-y; }
.spatial picture, .spatial img { position: absolute; inset: 0; width: 100%; height: 100%; }
.spatial img { object-fit: contain; transition: opacity .35s var(--ease-out); }
.spatial-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.spatial.is-live img { opacity: 0; }
.spatial::before, .bin-bowl::before {
  /* Bodenschatten: zeigt, wo die Schale steht — die einzige Schattenfläche der Seite */
  content: ""; position: absolute; inset-inline: 13%; bottom: 3.6%; height: 8.5%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), rgba(0, 0, 0, .24) 60%, transparent);
  filter: blur(6px);
}
/* Einmaliger Hinweis am Touchgerät, als Zeile unter der Schale (keine Pille über der Ware) */
.drag-hint {
  position: absolute; inset-inline: 0; top: 100%; z-index: 2; margin-top: -4px; text-align: center;
  font: 400 var(--fs-ui-small)/1.3 var(--ui); color: var(--fg-3); pointer-events: none;
  opacity: 0; transition: opacity .4s var(--ease-out);
}
.drag-hint.is-on { opacity: 1; }

/* Startseite: Bühne ------------------------------------------------------ */
.stage { position: relative; padding-block: 6px clamp(48px, 6vw, 96px); overflow: clip; }
.stage-grid { display: grid; align-items: start; }
.stage-h1 { display: grid; gap: 0; }
/* Die Marke ist der Titel der Startseite, wie auf der bisherigen Website */
.stage-h1 .t1 { font: 700 var(--fs-hero)/1.3 "Aref Ruqaa", "Ruqaa Ersatz", serif; color: #FBF6EC; }
/* 6,4vw: „Alkhani Nuts" bleibt auch in der schmalen Spalte am Tablet in einer Zeile */
html[lang="en"] .stage-h1 .t1 { font: 400 clamp(2.5rem, 6.4vw, 4.9rem)/1.12 "Marcellus", "Marcellus Ersatz", serif; }
.stage-h1 .t2 { font: 400 var(--fs-lead)/1.6 var(--ui); color: var(--fg-2); }
/* Am Handy richtet sich die Schale nach der sichtbaren Höhe: Marke, Schale, Sorte und der
   Hauptknopf stehen im ersten Bildschirm, auch bei 375 × 553 oder 320 × 568 (Höhe mit
   Browserleisten). 357 px brauchen Kopfzeile, Titel, Sorte, Satz und Knopfreihe; englische
   Sortennamen haben bis 389 px Breite eine Zeile mehr. 1900/1700 = Seitenverhältnis der Schale.
   Der Unterschied der Sprachen steht in einer Variablen: als eigene Regel für html[lang="en"]
   schlug er jede Regel in den Medienabfragen darunter, und die englische Schale blieb in jeder
   Breite bei der Handy-Formel (140 statt 249 px im Querformat, 400 statt 576 px bei 1440 px;
   Code-Review v20, Nr. 3). */
.stage { --stage-rest: 357px; --stage-vw: 60vw; }
/* 58vw: mit der reservierten zweiten Namenszeile lag die Beschriftung der Musterreihe bei 360 × 640
   sonst 4 px unter dem Falz (Designprüfung v20.4, G-4) */
@media (max-width: 389.98px) { html[lang="en"] .stage { --stage-rest: 380px; --stage-vw: 58vw; } }
/* 26 px unter der Schale: dort steht beim ersten Besuch vier Sekunden lang der Hinweis zum
   Kippen. Bei 14 px stieß er an den Namen der Sorte (Designprüfung v20.2, N8); die 12 px sind in
   --stage-rest eingerechnet. */
.stage-fig { width: max(140px, min(var(--stage-vw), calc((100 * var(--svh) - var(--stage-rest)) * .8947), 400px)); margin-inline: auto; margin-block: 0 26px; }
.stage-now { margin-top: 0; }
/* Feste Höhen: der Sortenwechsel verschiebt Musterreihe und Knöpfe nicht */
.stage-name { font: var(--display-w) var(--fs-h3)/1.35 var(--display); color: var(--accent-bright); min-height: 1.35em; }
.stage-tag { margin-top: 4px; font-size: var(--fs-body); line-height: 1.6; color: var(--fg-2); max-width: 30rem; min-height: 3.2em; }
/* Arabische Sortennamen passen in jeder Breite in eine Zeile (gemessen 320–1500 px, hochkant und
   quer). Englische brauchen zwei Zeilen einspaltig bis 365 px und zweispaltig (ab 768 px, im
   Querformat des Telefons ab 560 px) bis 960 px; knapp einzeilig (unter 25 px Luft) sind sie bis
   390 px und bis 1060 px. Nur in diesen Bereichen ist die zweite Zeile reserviert, mit Abstand
   zur Messung, und zwar unter dem Namen. Vorher war sie überall und über dem Namen reserviert:
   zwischen Schale und Name stand eine leere Zeile (Designprüfung v20.3, M4). In v20.4 fehlte das
   Querformat 560–767 px: dort sprangen Knöpfe und Muster beim Sortenwechsel um 26 bis 52 px
   (Designprüfung v20.4, M-1). Prüfung: tools/qa/layout.cjs, 3b und 3c. */
@media (max-width: 389.98px), (min-width: 768px) and (max-width: 1099.98px), (min-width: 560px) and (max-width: 767.98px) and (max-height: 500.98px) { html[lang="en"] .stage-name { min-height: 2.35em; } }
/* Englische Sätze brauchen im schmalen Querformat drei Zeilen (gemessen 560–600 px) */
@media (min-width: 560px) and (max-width: 639.98px) and (max-height: 500.98px) { html[lang="en"] .stage-tag { min-height: 4.8em; } }
.stage-cat { margin-top: 12px; font: 400 var(--fs-ui-small)/1.5 var(--ui); color: var(--fg-3); }
/* Antippfläche der kleinen Textlinks unter Knopfreihen: mindestens 44 px hoch */
.stage-cat a, .more-cat a.tlink { display: inline-block; padding-block: 11px; }
@keyframes name-swap { from { opacity: .2; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.is-swapping [data-bind="name"], .is-swapping [data-bind="tag"] { animation: name-swap .3s var(--ease-out); }
/* Foto lädt noch: Name und Beschreibung wechseln erst mit dem Foto (Code-Nachprüfung N3) */
.stage-now[aria-busy="true"] { opacity: .55; transition: opacity .2s var(--ease-out); }
.stage-acts { margin-top: 16px; }
.stage-acts + .sw-box { margin-top: 22px; }
/* Ab 768 px zwei Spalten: Marke und Sorte an der Startkante, die Schale daneben. Am Tablet war
   die Bühne als einzige Fassung zentriert (Designprüfung v19, Befund 18). Dasselbe im Querformat
   eines Telefons: einspaltig blieb für die Schale dort nur 110 × 122 px. */
@media (min-width: 768px), (min-width: 560px) and (max-height: 500.98px) {
  .stage { padding-block: 24px clamp(48px, 6vw, 96px); }
  .stage-grid { grid-template-areas: "h1 fig" "copy fig"; column-gap: clamp(32px, 4vw, 72px); width: 100%; align-content: center; }
  .stage-h1 { grid-area: h1; align-self: end; gap: 4px; }
  /* Im Querformat eines Telefons begrenzt die Höhe die Schale */
  .stage-fig { grid-area: fig; align-self: center; justify-self: center; width: min(100%, calc((100 * var(--svh) - var(--hdr-h) - 48px) * .8947)); margin: 0; }
  /* Goldlinie trennt die Marke von dem, was gerade in der Schale liegt */
  .stage-copy { grid-area: copy; margin-top: 26px; padding-top: 6px; border-top: 1px solid var(--line); }
}
/* Niedriges Querformat: die Schale steht oben neben der Marke, nicht mittig unter dem Falz */
@media (min-width: 560px) and (max-height: 500.98px) {
  .stage { padding-block: 12px clamp(40px, 6vw, 72px); }
  .stage-fig { align-self: start; }
  .stage-copy { margin-top: 14px; }
}
@media (min-width: 1024px) {
  .stage { min-height: calc(100 * var(--svh) - var(--hdr-h)); display: flex; align-items: center; padding-block: 24px 32px; }
  .stage-fig { width: min(40vw, 600px); }
}
/* Erst ab 1310 px ist für den Satz nur eine Zeile reserviert (englisch braucht er bis 1040 px zwei,
   und die Musterreihe sprang beim Wechsel) */
@media (min-width: 1310px) {
  .stage-tag { min-height: 1.6em; }
}

/* Sortenmuster ------------------------------------------------------------ */
.sw-box { margin-top: 18px; }
/* Feste Zeilenhöhe: der eingeblendete Sortenname verschiebt die Musterreihe nicht */
.swatch-label { display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; min-height: 1.75em; font: 400 var(--fs-ui-small)/1.4 var(--ui); color: var(--fg-3); }
/* Die Beschriftung bricht nie um; wird es eng, kürzt der eingeblendete Sortenname */
.swatch-label > span:first-child { flex: none; white-space: nowrap; }
.sw-peek { color: var(--fg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.swatches {
  display: flex; gap: 12px; margin-top: 4px; padding: 9px 9px 12px;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 9px;
  margin-inline: -9px;
}
.swatches::-webkit-scrollbar { display: none; }
/* Bis 430 px passen 5,6 Muster in die Reihe: das sechste ist angeschnitten und zeigt, dass es
   weitergeht (bei 360 px passten genau fünf, Designprüfung v19, Befund 9). Von 431 bis 767 px
   bricht die Reihe um. 60 px = fünf Abstände zu 12 px; die Reihe beginnt an der Textkante und
   läuft bis zum Bildschirmrand. */
.stage { --sw: 54px; }
@media (max-width: 430.98px) {
  .stage { --sw: clamp(44px, calc((100vw - var(--gutter) - 60px) / 5.6), 60px); }
  /* Die Reihe läuft wie die Theke bis zum Bildschirmrand: das sechste Muster schneidet der Rand an */
  .stage .swatches { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}
@media (min-width: 1024px) { .stage { --sw: 58px; } }
/* Passen die acht Muster nicht in eine Zeile, stehen sie vier und vier (nicht 5 + 3, 6 + 2 oder
   7 + 1). Eine Zeile reicht einspaltig von 574 bis 767 px und zweispaltig ab 1310 px. */
@media (min-width: 431px) and (max-width: 573.98px), (min-width: 768px) and (max-width: 1309.98px), (min-width: 560px) and (max-height: 500.98px) {
  .stage .swatches { display: grid; grid-template-columns: repeat(4, var(--sw)); justify-content: start; overflow: visible; }
}
@media (min-width: 574px) { .stage .swatches { overflow: visible; } }
.sw {
  position: relative; flex: none; width: var(--sw, 54px); height: var(--sw, 54px); padding: 0; border: 0; border-radius: 50%;
  background: var(--bg-3); cursor: pointer; scroll-snap-align: start;
  transition: transform .18s var(--ease-out);
}
.sw img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sw::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid transparent; transition: border-color .2s var(--ease-out); }
.sw[aria-checked="true"]::after { border-color: var(--accent-text); }
.sw:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .sw:hover::after { border-color: var(--line-strong); } .sw[aria-checked="true"]:hover::after { border-color: var(--accent-text); } }
.sw:focus-visible { outline-offset: 6px; border-radius: 50%; }

/* Theke: sechs Schalen nebeneinander, jede schüttet sich beim Scrollen voll. Die Zeilen der
   Fächer (Schale, Name, Satz, Sorten, Link) stehen über alle Fächer auf einer Linie (subgrid). */
.bins {
  --bin-gap: 22px;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(64vw, 300px); grid-template-rows: repeat(5, auto);
  column-gap: var(--bin-gap);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 6px var(--gutter) 14px; margin-inline: calc(-1 * var(--gutter)); scroll-padding-inline: var(--gutter);
}
.bins::-webkit-scrollbar { display: none; }
@media (min-width: 560px) { .bins { grid-auto-columns: min(40vw, 300px); } }
/* 768–1023 px: 26vw zeigt immer dreieinhalb Fächer (bei 29vw standen genau drei da, und nichts
   verriet die übrigen). 1024–1279 px: drei und drei ohne Wischen, denn mit der Maus ließ sich die
   Reihe nicht bewegen (Nachprüfung v20, N2). Ab 1280 px sechs nebeneinander. */
@media (min-width: 768px) { .bins { grid-auto-columns: min(26vw, 300px); } }
@media (min-width: 1024px) {
  /* Zeile 6 ist der Abstand zwischen den beiden Reihen; die zweite Reihe beginnt in Zeile 7 */
  .bins { --bin-gap: 28px; position: relative; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto) clamp(40px, 5vw, 64px) repeat(5, auto); grid-auto-columns: auto; overflow: visible; padding: 6px 0 0; margin-inline: 0; }
  .bin:nth-child(n+4) { grid-row: 7 / span 5; }
  /* Kante des Tresens aus einem Stück je Reihe: sechs Stücke lagen bei einzelnen Breiten (1280,
     1313, 1371 px) um 1 px versetzt, weil jede Schale für sich rundet (N7). Die Linie hängt an der
     Zeile der Schalen, und die gibt es nur mit subgrid: ohne (Chrome bis 116, Safari bis 15) ist
     Zeile 1 ein Fünftel der Fachhöhe, und die Linie lief quer über jede Schale. Dort behält jede
     Schale ihr eigenes Stück, und die Fächer füllen die Breite, damit die Stücke aneinander
     stoßen (Code-Review v20, Nr. 4). */
  @supports (grid-template-rows: subgrid) {
    .bins { grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: space-between; }
    .bins .bin .bin-bowl::after { content: none; }
    .bins::before, .bins::after { content: ""; position: absolute; z-index: 1; grid-column: 1 / -1; inset-inline: 0; height: 1px; background: #7A6130; pointer-events: none; }
    /* Bezugsfläche ist die Zeile der Schalen. Anfang UND Ende nennen: ein offenes Ende (auto) reicht
       bei absolut gesetzten Kindern bis zum unteren Rand des Rasters */
    /* 11 px: Abstand unter der Schale (6) und der halbe Zeilenabstand des Fachs (5), die zur Zeile zählen */
    .bins::before { grid-row: 1 / 2; bottom: calc(3.6% + 11px); }
    .bins::after { grid-row: 7 / 8; bottom: calc(3.6% + 11px); }
  }
}
/* Ohne subgrid, drei und drei: das Stück der vierten Schale beginnt wie das der ersten an der Textkante */
@media (min-width: 1024px) and (max-width: 1279.98px) { .bin:nth-child(4) .bin-bowl::after { inset-inline-start: 9%; } }
@media (min-width: 1280px) {
  .bins { grid-template-columns: repeat(6, minmax(0, 1fr)); justify-content: normal; grid-template-rows: repeat(5, auto); }
  .bin:nth-child(n+4) { grid-row: span 5; }
  .bins::after { content: none; }
}
.bin { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 10px; align-content: start; scroll-snap-align: start; min-width: 0; }
/* Das Foto hat rechts und links 9 % Luft: die Schale rückt an die Textkante ihrer Spalte */
.bin-bowl { position: relative; margin: 0 0 6px; margin-inline: -9% 9%; aspect-ratio: 1700 / 1900; }
.bin-bowl picture, .bin-bowl img, .bin-bowl canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bin-bowl img { object-fit: contain; }
.bin-bowl img, .bin-bowl canvas { transform-origin: 50% 90%; transition: transform .3s var(--ease-out); }
.bin-bowl.is-pouring img { opacity: 0; }
/* Kante des Tresens: eine durchgehende Linie unter allen Schalen, von der ersten bis zur letzten
   Textkante. Deckende Farbe (Gold 55 % über dem Grund): die Stücke überlappen sich um 1 px, mit
   durchscheinender Farbe waren die Stöße heller. */
.bin-bowl::after { content: ""; position: absolute; bottom: 3.6%; inset-inline: calc(9% - var(--bin-gap) - 1px) -9%; height: 1px; background: #7A6130; }
.bin:first-child .bin-bowl::after { inset-inline-start: 9%; }
.bin-h { font: var(--display-w) var(--fs-h4)/1.4 var(--display); }
.bin-h a { display: inline-block; padding-block: 7px; margin-block: -7px; }
/* Englisch ist die Zeile niedriger (1,15 statt 1,4): mit 7 px waren es 39,8 statt 44 px */
html[lang="en"] .bin-h a { padding-block: 10px; margin-block: -10px; }
/* Die Schale gehört zum Link der Abteilung (vorher war nur der Name antippbar, 58 × 36 px) */
.bin-h a::after { content: ""; position: absolute; inset: 0 0 auto; aspect-ratio: 1700 / 1900; }
@media (hover: hover) and (pointer: fine) {
  .bin-h a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .25em; }
  .bin:has(.bin-h a:hover) .bin-bowl :is(img, canvas) { transform: scale(1.035); }
}
.bin:has(.bin-h a:active) .bin-bowl :is(img, canvas) { transform: scale(.98); transition-duration: .12s; }
.bin-tag { font-size: var(--fs-small); line-height: 1.6; color: var(--fg-3); }
.bin-items { display: grid; gap: 2px; align-content: start; }
.bin-items a { display: flex; align-items: center; gap: 10px; min-height: 44px; font: 400 var(--fs-ui-small)/1.3 var(--ui); color: var(--fg-2); }
.bin-items img { width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) { .bin-items a:hover { color: var(--fg); } }
.bin-all { justify-self: start; align-self: end; }

/* Einguss (Video) -------------------------------------------------------- */
.pour-grid { display: grid; gap: 28px; align-items: center; }
.frame { position: relative; overflow: hidden; border-radius: var(--r-frame); background: var(--bg-deep); }
.frame video, .frame img { width: 100%; height: 100%; object-fit: cover; }
.vid { position: absolute; inset: 0; }
.vid picture, .vid img, .vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid video { opacity: 0; transition: opacity .45s var(--ease-out); }
.vid.is-playing video { opacity: 1; }
/* Schleife (v22): am Ende eines Durchlaufs blendet der Clip aus, darunter steht sein erstes Bild,
   dann beginnt er neu. Steht nach .is-playing (gleiches Gewicht). */
.vid.is-fading video { opacity: 0; }
/* Tippen hält an und startet wieder (site.js) */
.vid--tap { cursor: pointer; }
/* Startbild des Rückzooms nur, solange der Clip gleich läuft; sonst bleibt das Endbild */
.vid-first { display: none; }
html.js-motion .vid:not(.is-still) .vid-first { display: block; }
.frame--tall { aspect-ratio: 4 / 5; }
.frame--story { aspect-ratio: 9 / 16; }
.pour-copy { display: grid; gap: 18px; max-width: 34rem; }
.pour-copy .h2 { max-width: 14ch; }

/* Abend / Neon: das Finale. Ab hier bleibt die Seite dunkel bis zur Fußzeile. */
.night { transition: background-color 1.2s var(--ease-out); }
.night-grid { display: grid; gap: 36px; align-items: center; }
.neon-frame { max-width: 460px; width: 100%; margin-inline: auto; }
.neon-frame .vid { filter: brightness(1); transition: filter 1.2s var(--ease-out); }
html.js-motion .neon-frame:not(.is-on) .vid { filter: brightness(.28) saturate(.6); }
.neon-frame.is-flicker .vid { animation: neon-flicker .9s steps(1, end) 1; }
@keyframes neon-flicker {
  0% { filter: brightness(.3) saturate(.6); } 12% { filter: brightness(.95); } 20% { filter: brightness(.35) saturate(.7); }
  34% { filter: brightness(1); } 44% { filter: brightness(.55); } 60%, 100% { filter: brightness(1); }
}
.night-copy { display: grid; gap: 18px; }
.night-copy .h2 { font: 700 var(--fs-hero)/1.3 "Aref Ruqaa", "Ruqaa Ersatz", serif; color: var(--neon); text-shadow: 0 0 .5em rgba(111, 143, 216, .45); }
html.is-evening body, html.is-evening .hdr, html.is-evening .menu { background-color: var(--night); }
html.is-evening .actbar { background-color: #150E0C; }
.night .branch-list, .night .branch-row { border-color: rgba(111, 143, 216, .28); }
.night .branch-row h3 a { text-decoration: underline; text-decoration-color: rgba(111, 143, 216, .55); text-underline-offset: .25em; transition: text-decoration-color .2s var(--ease-out); }
@media (hover: hover) { .night .branch-row h3 a:hover { text-decoration-color: var(--neon); } }
.night .ico-line svg { color: var(--neon-blue); }

/* Filialzeilen ----------------------------------------------------------- */
/* Höchstens 44rem: auf der Produktseite lief die Linie über 1296 px, der Knopf hing mitten in der Zeile */
.branch-list { display: grid; margin-top: 12px; border-top: 1px solid var(--line); max-width: 44rem; }
.br-info .branch-list { margin-top: 0; }
.br-info .lead { margin-top: 22px; max-width: 44rem; }
.branch-row { display: grid; gap: 10px; padding-block: 22px; border-bottom: 1px solid var(--line); }
.branch-row h3 { font: var(--display-w) var(--fs-h4)/1.4 var(--display); }
.branch-row h3 small { font: 400 var(--fs-ui-small)/1.5 var(--ui); color: var(--fg-3); margin-inline-start: 10px; }
@media (hover: hover) { .branch-row h3 a:hover { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .25em; } }
.branch-row address { font-style: normal; color: var(--fg-2); }
/* Die Schlusszeit ist das, wonach man sucht: nicht die kleinste graue Zeile */
.branch-when { font-size: var(--fs-small); line-height: 1.55; color: var(--fg); }
.branch-row .btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.branch-row .btns .btn { min-height: 52px; padding: 4px 8px; gap: 7px; }
/* gap: 7px oben setzte auch den Zeilenabstand: der Knopf mit Unterzeile war 53 statt 52 px hoch */
.branch-row .btns .btn--sub { row-gap: 1px; }
/* Bis 429 px steht die Karte über die volle Breite, WhatsApp und Anruf teilen sich die Zeile
   (wie auf der Produktseite: ein Knopf breit, zwei darunter). Drei nebeneinander waren bei 320 px
   je 88 px breit: «WhatsApp» lief 8 px über den Rand, «الخريطة» stieß an (Designprüfung v20.2, N6) */
@media (max-width: 429.98px) {
  .branch-row .btns:not(.btns--one) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .branch-row .btns:not(.btns--one) .btn:first-child { grid-column: 1 / -1; }
}
/* Dasselbe, wo die Spalte der Filialseite so schmal ist (Tablet, zweispaltig: 375 px bei 768 px
   Breite; «WhatsApp» hatte dort 7,7 px Luft). Browser ohne Container-Abfragen zeigen dort drei
   nebeneinander (Designprüfung v20.3, G1). */
.br-info { container-type: inline-size; }
@container (max-width: 389.98px) {
  .branch-row .btns:not(.btns--one) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .branch-row .btns:not(.btns--one) .btn:first-child { grid-column: 1 / -1; }
}
/* In Listen nur die Karte je Filiale; Anruf und WhatsApp stehen im Kopf bzw. in der Aktionsleiste */
.branch-row .btns--one { grid-template-columns: minmax(132px, max-content); }
.branch-row .btns--one .btn { padding-inline: 18px; }
/* Der Knopf steht beim Text, nicht am anderen Ende der Zeile (auf der Produktseite lagen über
   700 px dazwischen) */
@media (min-width: 560px) { .branch-row--list { grid-template-columns: minmax(0, 34rem) auto; justify-content: start; column-gap: 32px; align-items: center; } .branch-row .btns--one { margin-top: 0; } }
/* Quelle und Datum der Schlusszeiten, einmal unter der Liste */
.branch-src { margin-top: 14px; font: 400 var(--fs-ui-small)/1.6 var(--ui); color: var(--fg-3); max-width: 44rem; }

/* Belege ------------------------------------------------------------------ */
.rating { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.rating .big { font: var(--display-w) var(--fs-h1)/1.1 var(--display); color: var(--fg); }
.stars { display: inline-flex; gap: 3px; color: var(--accent-text); }
.stars svg { width: 18px; height: 18px; }
.rating-src { display: inline-block; padding-block: 5px; font: 400 var(--fs-ui-small)/1.5 var(--ui); color: var(--fg-3); }
.quotes { display: grid; gap: 22px; margin-top: 36px; }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.quote { display: grid; gap: 12px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); }
/* Kundenworte stehen in der Textschrift: die Titelschrift bleibt Titeln und Namen vorbehalten */
.quote blockquote { font: 400 var(--fs-lead)/1.85 var(--ui); color: var(--fg); }
html[lang="en"] .quote blockquote { line-height: 1.6; }
@media (min-width: 900px) { .quotes--all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quote .orig { font-size: var(--fs-small); color: var(--fg-3); }
.quote .orig [lang="ar"] { font-size: 1.1em; color: var(--fg-2); }
.quote figcaption { font: 400 var(--fs-ui-small)/1.5 var(--ui); color: var(--fg-3); }
.quote figcaption b { color: var(--fg-2); font-weight: 600; }
/* scroll-padding: ohne rastete der erste Clip 6 px neben der Textkante ein */
.reels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 12px; margin-top: 40px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding: 6px; margin-inline: -6px; scroll-padding-inline: 6px; }
.reels::-webkit-scrollbar { display: none; }
/* Theke am Handy: das Foto der Schale hat oben selbst Luft (Platz für den Haufen); mit dem vollen
   Abstand des Abschnittskopfs standen zwischen Text und Schalen rund 120 px leer (v22) */
@media (max-width: 559.98px) { .counter .sec-head { margin-bottom: 4px; } }
/* Am Handy gut anderthalb Clips im Bild: mit 150 px standen drei kleine nebeneinander (v22) */
@media (max-width: 559.98px) { .reels { grid-auto-columns: min(58vw, 250px); gap: 14px; } }
.reel { position: relative; display: block; scroll-snap-align: start; border-radius: var(--r-frame); overflow: hidden; background: var(--bg-deep); aspect-ratio: 9 / 16; }
.reel .vid { position: absolute; inset: 0; }
/* Kleines Instagram-Zeichen in der Ecke: der Clip öffnet das Konto (der Name steht einmal darunter) */
.reel-ig { position: absolute; top: 10px; inset-inline-end: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(18, 12, 10, .62); color: var(--fg); transition: background-color .2s var(--ease-out), color .2s var(--ease-out); }
.reel-ig svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .reel .vid { transition: transform .5s var(--ease-out); }
  .reel:hover .vid { transform: scale(1.03); }
  .reel:hover .reel-ig { background: var(--accent); color: var(--bg); }
}
@media (min-width: 900px) { .reels { grid-auto-columns: 1fr; overflow: visible; } }
.ig-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; color: var(--fg-2); }
.ig-line svg { width: 18px; height: 18px; flex: none; }

/* Fragen mit sichtbarer Antwort, je ein Symbol --------------------------- */
.qa { display: grid; gap: 26px 48px; }
/* Symbol ohne Kreis, auf der Höhe der Frage (gleiche Kreise um jedes Symbol wirken nach Vorlage) */
.qa-item { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 14px; align-items: start; }
/* Symbol auf der Mitte der ersten Fragezeile: (Zeilenhöhe − 20 px) / 2 */
.qa-item > svg { grid-row: span 2; width: 20px; height: 20px; margin-top: calc((var(--fs-h5) * 1.5 - 20px) / 2); color: var(--accent-text); }
html[lang="en"] .qa-item > svg { margin-top: calc((var(--fs-h5) * 1.15 - 20px) / 2); }
.qa-item h3 { font: var(--display-w) var(--fs-h5)/1.5 var(--display); }
.qa-item p { margin-top: 4px; color: var(--fg-2); max-width: 44rem; }
.sec-head + .qa { margin-top: 8px; }
@media (min-width: 900px) { .sec > .qa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qa-grid { display: grid; gap: 36px; }

/* Faktenbox ------------------------------------------------------------- */
.facts { border: 1px solid var(--line); border-radius: var(--r-frame); padding: clamp(20px, 3vw, 32px); }
.facts h2 { font: var(--display-w) var(--fs-h4)/1.4 var(--display); }
.facts .stamp { display: block; margin-top: 4px; font: 400 var(--fs-ui-small)/1.4 var(--ui); color: var(--fg-3); }
.facts dl { display: grid; gap: 14px; margin-top: 18px; }
.facts dl div { display: grid; gap: 2px; }
@media (min-width: 720px) { .facts dl div { grid-template-columns: 13rem minmax(0, 42rem); gap: 16px; } }
.facts dt { display: flex; align-items: center; gap: 8px; font: 400 var(--fs-ui-small)/1.5 var(--ui); color: var(--fg-3); }
.facts dt svg { width: 18px; height: 18px; flex: none; color: var(--accent-text); }
.facts dd { color: var(--fg); }
.facts details { margin-top: 14px; }
.facts summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 600 var(--fs-ui)/1.3 var(--ui); color: var(--fg); }
.facts summary::-webkit-details-marker { display: none; }
.facts summary::after { content: ""; width: 10px; height: 10px; margin-top: -5px; border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: rotate(45deg); transition: transform .25s var(--ease-out); }
.facts details[open] summary::after { margin-top: 5px; transform: rotate(-135deg); }
@media (hover: hover) { .facts summary:hover { color: var(--accent-bright); } }
/* Der Aufklapper sagt, was der nächste Druck tut */
.facts details:not([open]) .sum-close, .facts details[open] .sum-open { display: none; }
/* Eingeklappt: eine Zeile an der Textkante mit Haarlinie, kein Rahmen um leere Fläche (der Kasten
   war zu 11 % gefüllt). Der Rahmen gehört den Angaben, wenn sie offen sind. */
.facts--fold { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 22px 0 0; }
.facts--fold details { margin-top: 6px; }
.facts--fold dl { margin-top: 12px; max-width: 60rem; border: 1px solid var(--line); border-radius: var(--r-frame); padding: clamp(20px, 3vw, 32px); }
.sec--tail { padding-top: 0; }

/* Seitenkopf der Unterseiten ------------------------------------------- */
.page-head { padding-block: clamp(18px, 3vw, 52px) clamp(18px, 3vw, 36px); }
.page-head h1 { font: var(--display-w) var(--fs-h1)/1.35 var(--display); }
.page-head .lead { margin-top: 10px; max-width: 44rem; }
/* Immer eine Zeile: Brach die Brotkrume mit der Ersatzschrift in zwei Zeilen um und mit Plex in
   eine, sprang die ganze Seite 38 px nach oben (Layoutverschiebung 0,20 am gedrosselten Handy).
   Wird es eng, kürzt zuerst der Name der Seite: er steht als Titel direkt darunter. */
/* Über dem Inhalt darunter: die Schale der Produktseite ragt mit ihrem leeren Rand in die Zeile
   und fing am Tablet die Klicks auf das letzte Glied ab (Designprüfung v20.2, N7) */
.crumb { position: relative; z-index: 3; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; font: 400 var(--fs-ui-small)/1.3 var(--ui); color: var(--fg-3); margin-bottom: 12px; }
.crumb li { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; min-height: 32px; }
.crumb li::after { flex: none; }
.crumb a, .crumb li[aria-current] { display: block; min-width: 0; line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb li[aria-current] { flex-shrink: 20; }
.crumb a { color: var(--fg-2); }
@media (hover: hover) { .crumb a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: .3em; } }
/* Am Touchgerät (Tablet) sind die Glieder 44 px hoch; mit der Maus bleibt die Zeile bei 32 px */
@media (pointer: coarse) { .crumb li { min-height: 44px; } .crumb a, .crumb li[aria-current] { line-height: 44px; } }
/* Trenner ist Schmuck und wird nicht vorgelesen (zweite Angabe: Alternativtext leer) */
/* ‹ und › spiegelt der Browser in RTL von selbst: dasselbe Zeichen zeigt in beiden Sprachen in
   Leserichtung (vorher stand für Arabisch das Gegenzeichen da, und der Pfeil zeigte verkehrt) */
.crumb li:not(:last-child)::after { content: "›"; content: "›" / ""; margin-inline-start: 6px; color: var(--fg-3); }
/* Am Handy nur der Weg zurück: die übergeordnete Seite mit Pfeil. Die ganze Kette passte dort nur
   gekürzt in eine Zeile („Ho… › All produ… › …"); sie steht weiter im Markup für Suchmaschinen. */
@media (max-width: 560.98px) {
  .crumb li, .crumb li[aria-current] { display: none; }
  .crumb li:nth-last-child(2) { display: flex; min-height: 44px; }
  .crumb li:nth-last-child(2) a { line-height: 44px; }
  .crumb li:nth-last-child(2)::after { content: none; }
  /* Der Pfeil gehört zum Link (antippbar) und zeigt zurück, gegen die Leserichtung */
  .crumb li:nth-last-child(2) a::before { content: "‹"; content: "‹" / ""; margin-inline-end: 6px; color: var(--fg-3); }
}
.jump { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px; margin-inline: -4px; }
.jump::-webkit-scrollbar { display: none; }
.jump a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r); font: 400 var(--fs-ui-small)/1.3 var(--ui); }
.jump a[aria-current] { border-color: var(--accent-text); color: var(--fg); }
.jump a { transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .jump a:hover { border-color: var(--accent-bright); background: rgba(201, 162, 75, .1); } }
.group { padding-block: clamp(28px, 4vw, 56px); border-top: 1px solid var(--line); }
.page-head + .wrap .group:first-child { border-top: 0; padding-top: 4px; }
.group-head { display: grid; gap: 6px; align-content: start; margin-bottom: 20px; max-width: 44rem; }
.group-head p { color: var(--fg-2); font-size: var(--fs-small); line-height: 1.75; }
.group-head h2 a { display: inline-block; }
/* Ab 1024 px steht der Gruppenkopf neben seinen Karten und bleibt beim Scrollen stehen: so füllt
   auch eine Gruppe mit einer Karte ihre Zeile, und man weiß immer, in welcher Gruppe man ist */
@media (min-width: 1024px) {
  .group--side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  .group--side .group-head { position: sticky; top: var(--stick); margin-bottom: 0; }
}

/* Produktkarten ------------------------------------------------------------ */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
/* Bis 1023 px zwei Spalten: dreispaltig standen am Tablet einzelne Karten neben leeren Spalten */
@media (min-width: 768px) { .cards { gap: 44px 24px; } }
/* Ab 1024 px vier Spalten (verwandte Sorten: vier Karten, eine Zeile), neben dem Gruppenkopf drei */
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { position: relative; display: grid; gap: 6px; align-content: start; }
.fill { position: relative; aspect-ratio: 1400 / 1270; }
.fill img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; transition: transform .3s var(--ease-out); }
.fill::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--line); }
.card h3 { font: var(--display-w) var(--fs-h5)/1.45 var(--display); margin-top: 10px; }
.card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card p { font-size: var(--fs-small); color: var(--fg-3); line-height: 1.7; }
.card .alt-name { font-size: var(--fs-small); color: var(--fg-3); }
@media (hover: hover) and (pointer: fine) { .card:hover .fill img { transform: scale(1.035); } .card:hover h3 { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .3em; } }
.card:active .fill img { transform: scale(.98); transition-duration: .12s; }
/* Zwei Spalten, ungerade Zahl: die letzte Karte liegt quer über beide Spalten (Bild neben Text),
   statt allein neben einer leeren Hälfte zu stehen */
@media (max-width: 1023.98px) {
  .cards > .card:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr auto auto auto 1fr; column-gap: 16px; }
  .cards > .card:last-child:nth-child(odd) .fill { grid-area: 1 / 1 / -1 / 2; }
  .cards > .card:last-child:nth-child(odd) h3 { grid-area: 2 / 2; margin-top: 0; }
  .cards > .card:last-child:nth-child(odd) .alt-name { grid-area: 3 / 2; }
  .cards > .card:last-child:nth-child(odd) p { grid-area: 4 / 2; }
}
@media (min-width: 768px) and (max-width: 1023.98px) { .cards > .card:last-child:nth-child(odd) { column-gap: 24px; } }
/* Neben dem Gruppenkopf stehen drei Karten je Zeile. Bleiben in der letzten Zeile zwei übrig, teilen
   sie sich die Zeile; bliebe eine übrig, stehen die letzten vier zwei und zwei. Nur die einzige
   Sorte einer Gruppe liegt quer (Bild so breit wie eine Spalte, Text daneben, Name eine Stufe
   größer). Vorher lagen alle übrigen Karten quer: Seiten mit kleinen Gruppen bestanden nur aus
   Querkarten, und fast die halbe Breite blieb leer (Designprüfung v20.2, N3). Dieselbe Regel
   steht in tools/build_site.py (wide_cards) für die Bildgrößen. */
@media (min-width: 1024px) {
  .group--side .cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .group--side .cards > .card { grid-column: span 2; }
  .group--side .cards > .card:is(:nth-child(3n+1):nth-last-child(2), :nth-child(3n+2):last-child, :nth-child(3n+1):nth-last-child(4), :nth-child(3n+2):nth-last-child(3), :nth-child(3n):nth-last-child(2), :nth-child(3n+1):last-child:not(:only-child)) { grid-column: span 3; }
  .group--side .cards > .card:only-child { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr auto auto auto 1fr; column-gap: 24px; }
  .group--side .cards > .card:only-child .fill { grid-area: 1 / 1 / -1 / 2; }
  .group--side .cards > .card:only-child h3 { grid-area: 2 / 2 / 3 / -1; margin-top: 0; font-size: var(--fs-h4); }
  .group--side .cards > .card:only-child .alt-name { grid-area: 3 / 2 / 4 / -1; }
  .group--side .cards > .card:only-child p { grid-area: 4 / 2 / 5 / -1; max-width: 34rem; }
}

/* Produktseite ------------------------------------------------------------ */
.pdp { padding-block: clamp(12px, 2vw, 32px) var(--sec); }
/* Am Seitenende zählt ein Abstand, nicht zwei: der letzte Abschnitt der Produktseite und die
   letzte Gruppe der Sortimentsseite brachten ihren eigenen mit, vor der Fußzeile standen bis zu
   300 px leer (Designprüfung v20.3, M1) */
.pdp > .sec:last-child, .pad-end > .group:last-child { padding-bottom: 0; }
.pdp-grid { display: grid; gap: 12px; align-items: center; }
/* Unter der Schale bleibt Platz für den einmaligen Zieh-Hinweis (er stieß sonst an den Titel) */
/* Wie auf der Startseite: die Schale lässt dem Hauptknopf Platz im ersten Bildschirm */
.pdp-fig { width: max(150px, min(84vw, calc((100 * var(--svh) - 370px) * .8947), 480px)); margin-inline: auto; margin-top: -4%; margin-bottom: 20px; }
.pdp h1 { font: var(--display-w) var(--fs-h1)/1.35 var(--display); }
.pdp .syn { margin-top: 6px; color: var(--fg-3); font-size: var(--fs-small); }
.pdp .tag { margin-top: 12px; font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-2); max-width: 32rem; }
/* Nur die Knopfreihe der Produktbeschreibung: die Regel traf auch den Kartenknopf der Filialliste */
.pdp-copy .btns { margin-top: 24px; }
.pdp-copy .btns .btn { flex: 1 1 180px; }
.zoom-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; margin-inline-start: -4px; min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer; color: var(--fg-2); font: 400 var(--fs-ui-small)/1.3 var(--ui); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .35em; }
.zoom-btn svg { width: 18px; height: 18px; }
.zoom-btn { transition: color .2s var(--ease-out), text-decoration-color .2s var(--ease-out); }
@media (hover: hover) { .zoom-btn:hover { color: var(--fg); text-decoration-color: currentColor; } }
@media (min-width: 1024px) {
  .pdp-copy .btns .btn { flex: 0 0 auto; }
}
/* Kraftpapier: Produktdaten wie Tüte und Etikett ------------------------ */
.paper { background: var(--paper); color: var(--ink); border-radius: var(--r-frame); padding: clamp(22px, 4vw, 56px); }
.paper h2 { font: var(--display-w) var(--fs-h3)/1.4 var(--display); }
.paper h2::before { content: ""; display: block; width: 36px; height: 3px; margin-bottom: 14px; background: var(--accent-paper); }
.paper p { color: var(--ink-2); }
.paper .tlink { color: var(--ink); text-decoration-color: rgba(122, 90, 34, .5); }
@media (hover: hover) { .paper .tlink:hover, .sec--cream .tlink:hover { text-decoration-color: currentColor; } }
.spec { display: grid; gap: clamp(28px, 4vw, 48px); }
.spec-text { display: grid; gap: 22px; }
.spec-text h3 { font: var(--display-w) var(--fs-h5)/1.5 var(--display); color: var(--ink); }
.spec-text p { margin-top: 4px; }
.attrs { display: grid; gap: 0; border-top: 1px solid var(--paper-line); margin-top: 6px; }
.attrs div { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-bottom: 1px solid var(--paper-line); }
.attrs dt { color: var(--ink-2); font: 400 var(--fs-ui-small)/1.4 var(--ui); }
.attrs dd { font-weight: 600; }
.nutri caption, .nutri-h { text-align: start; font: var(--display-w) var(--fs-h5)/1.5 var(--display); padding-bottom: 10px; }
.nutri { width: 100%; border-collapse: collapse; font: 400 var(--fs-ui-small)/1.4 var(--ui); }
.nutri th, .nutri td { padding-block: 9px; border-bottom: 1px solid var(--paper-line); text-align: start; }
.nutri td { text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.nutri .sub th { padding-inline-start: 16px; font-weight: 400; color: var(--ink-2); }
.nutri-src { margin-top: 12px; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2); }

/* Filialen ----------------------------------------------------------------- */
.br-grid { display: grid; gap: 56px; }
.br-card { display: grid; gap: 14px; align-content: start; }
.br-card .frame { aspect-ratio: 4 / 5; margin-top: 8px; }
.br-card h2 { font: var(--display-w) var(--fs-h3)/1.4 var(--display); }
.br-page { --br-gap: clamp(32px, 5vw, 72px); display: grid; gap: var(--br-gap); }
.prose { display: grid; gap: 16px; max-width: 42rem; color: var(--fg-2); }
.prose h2 { font: var(--display-w) var(--fs-h3)/1.4 var(--display); color: var(--fg); margin-top: 18px; }

/* Über uns: Kapitel ----------------------------------------------------- */
.chapter { display: grid; gap: 28px; align-items: center; padding-block: clamp(36px, 5vw, 72px); }
.chapter + .chapter { border-top: 1px solid var(--line); }
.chapter .frame { aspect-ratio: 4 / 5; max-width: 460px; width: 100%; }
/* Die Schale steht so breit und an derselben Kante wie die Fotos der anderen Kapitel */
.chapter-fig { width: min(100%, 460px); margin-inline: 0; }
/* Jedes zweite Kapitel zeigt das Bild auf der anderen Seite. Die Spalten tauschen mit: sonst stand
   das Bild dort in der breiten Spalte und war größer als in den Kapiteln davor und danach. Bild und
   Text stehen je an ihrer Außenkante, so ist der Abstand dazwischen in jedem Kapitel gleich
   (vorher 110 gegen 164 px bei 1440 px; Designprüfung v20.5, N-3) */
@media (min-width: 768px) { .chapter:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } .chapter:nth-child(even) > :first-child { order: 2; justify-self: end; } .chapter:nth-child(odd) > .prose { justify-self: end; } }

/* Bewertungen -------------------------------------------------------------- */
.stars-only { margin-top: 40px; color: var(--fg-2); }

/* Lupe ------------------------------------------------------------------ */
.loupe { position: fixed; inset: 0; z-index: 60; margin: 0; padding: 0; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; background: var(--bg-deep); color: var(--fg); }
.loupe::backdrop { background: rgba(10, 14, 12, .8); }
.loupe-scroll { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; display: grid; place-items: center; }
.loupe-scroll:focus-visible { outline-offset: -4px; }
.loupe-scroll img { width: min(1700px, 200vw); max-width: none; height: auto; }
/* Knopf und Hinweis mit eigener Fläche: über dem Foto sonst unter 2:1 Kontrast */
.loupe-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); inset-inline-end: 12px; z-index: 2; background: var(--bg-deep); }
.loupe-hint {
  position: absolute; bottom: calc(16px + env(safe-area-inset-bottom)); inset-inline: 0; z-index: 2; width: fit-content; max-width: calc(100% - 32px); margin-inline: auto;
  padding: 8px 14px; border-radius: var(--r); background: rgba(19, 27, 23, .92); text-align: center;
  font: 400 var(--fs-ui-small)/1.4 var(--ui); color: var(--fg); pointer-events: none;
}

/* Fußzeile im Aufbau der bisherigen Website: dunkel, goldenes Emblem, drei Spalten mit gleich hohen
   Zeilen, runde Symbolknöpfe, Grundzeile mit dem lateinischen Namen in Marcellus. Der untere
   Innenabstand hält den Platz der Aktionsleiste frei. */
.ftr { background: var(--bg-2); color: var(--fg); border-top: 1px solid var(--line); padding-block: clamp(44px, 5vw, 80px) calc(22px + var(--bar-h)); transition: background-color 1.2s var(--ease-out); }
html.is-evening .ftr { background: var(--night); }
.ftr-grid { display: grid; gap: 28px; }
.ftr-brand img { width: 88px; height: 88px; }
.ftr h2 { font: var(--display-w) var(--fs-h5)/1.4 var(--display); color: var(--fg); margin-bottom: 8px; }
.ftr-list { display: grid; gap: 2px; }
.ftr-list a { display: flex; align-items: center; gap: 10px; min-height: 40px; font: 400 var(--fs-ui)/1.4 var(--ui); color: var(--fg-2); transition: color .2s var(--ease-out); }
.ftr-list svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.ftr-branch { align-items: flex-start !important; padding-block: 6px; }
.ftr-branch svg { margin-top: 3px; }
.ftr-branch span { display: grid; gap: 2px; }
.ftr-branch b { font-weight: 600; color: var(--fg); }
.ftr-branch small { font-size: var(--fs-ui-small); color: var(--fg-3); }
.ftr-list--pages { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
@media (hover: hover) { .ftr-list a:hover { color: var(--fg); } }
.ftr-round { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.ftr-round a { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--fg); transition: border-color .2s var(--ease-out), color .2s var(--ease-out), background-color .2s var(--ease-out); }
.ftr-round svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .ftr-round a:hover { border-color: var(--accent); color: var(--accent-bright); background: rgba(201, 162, 75, .08); } }
.ftr-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-top: 26px; font: 400 var(--fs-ui-small)/1.5 var(--ui); color: var(--fg-3); }
.ftr-mark { font: 400 .9rem/1.4 "Marcellus", serif; letter-spacing: .16em; color: var(--fg-3); }
@media (max-width: 599.98px) { .ftr-base { flex-direction: column; text-align: center; } }
@media (max-width: 1023.98px) { .ftr-list a { min-height: 44px; } }
/* Tablet: Emblem oben, darunter die drei Spalten (einspaltig war die Fußzeile 880 px hoch und halb leer) */
@media (min-width: 720px) and (max-width: 1023.98px) {
  .ftr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; align-items: start; }
  .ftr-brand { grid-column: 1 / -1; }
  .ftr-list--pages { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .ftr-grid { grid-template-columns: 160px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr); gap: 44px; align-items: start; }
  .ftr-brand img { width: 110px; height: 110px; }
  .ftr-list--pages { grid-template-columns: minmax(0, 1fr); }
}

/* Heller Abschnitt in Creme (Fragen), wie auf der bisherigen Website */
.sec--cream { background: var(--paper); color: var(--ink); }
.sec--cream .h2, .sec--cream h3 { color: var(--ink); }
.sec--cream .sec-head p, .sec--cream .qa-item p { color: var(--ink-2); }
.sec--cream .qa-item > svg { color: var(--accent-paper); }
.sec--cream .tlink { color: var(--ink); text-decoration-color: rgba(122, 90, 34, .55); }
.sec--cream .btn { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .sec--cream .btn:hover { background: var(--bg-deep); border-color: var(--bg-deep); } }
.sec--cream :focus-visible { outline-color: var(--ink); }

/* Seitenübergänge zwischen Liste und Produktseite (nur wo unterstützt) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
::view-transition-group(*) { animation-duration: .38s; animation-timing-function: var(--ease-in-out); }

/* Kontrastmodus (Windows): Striche und Auswahl mit Systemfarben ----------- */
@media (forced-colors: active) {
  .burger span, .burger span::before, .burger span::after { background: CanvasText; forced-color-adjust: none; }
  .burger[aria-expanded="true"] span { background: transparent; }
  .sw[aria-checked="true"]::after { border-color: Highlight; border-width: 3px; }
  .nav a[aria-current]::after { background: Highlight; }
  .paper h2::before { background: CanvasText; }
}

/* Reduzierte Bewegung und Standbild-Modus ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}
html.static *, html.static *::before, html.static *::after { animation: none !important; transition: none !important; }

/* Druck -------------------------------------------------------------------- */
@media print {
  .hdr, .menu, .actbar, .swatches, .reels, video, .spatial-canvas, .skip, .bin-bowl canvas { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .paper, .ftr, .sec--cream { border: 1px solid #999; background: #fff; }
}

/* kleine Abstandsregeln statt Inline-Styles (CSP style-src-attr 'none') */
.jump--head { margin-top: 20px; }
.pad-end { padding-bottom: var(--sec); }
.more-cat { margin-top: 20px; }
.frame--gap { margin-top: 32px; }
.sec-end { margin-top: 28px; }

/* Grid-Kinder dürfen schmaler werden als ihr Inhalt. Ohne das sprengt eine waagerecht
   scrollende Musterreihe (11 × 70 px) die Spalte — im RTL-Layout ohne sichtbaren Scrollbalken. */
.stage-grid, .pdp-grid, .night-grid, .pour-grid, .br-page, .qa-grid, .chapter, .spec, .br-grid { grid-template-columns: minmax(0, 1fr); }
.stage-grid > *, .pdp-grid > *, .night-grid > *, .pour-grid > *, .br-page > *, .qa-grid > *, .chapter > *, .spec > *, .br-grid > *, .ftr-grid > * { min-width: 0; }
@media (min-width: 900px) {
  .pour-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); }
  .spec { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .br-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}
/* Ab 768 px: einspaltig stand das Bild am Tablet 460 px breit an der Startkante, daneben 232 px leer (G7) */
@media (min-width: 768px) { .chapter { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); } }
@media (min-width: 768px), (min-width: 560px) and (max-height: 500.98px) {
  .stage-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
/* Produktseite ab 768 px zweispaltig wie die Bühne und die Filialseite: einspaltig war der
   Hauptknopf am Tablet bis 921 px breit (Designprüfung v20.3, M2) */
@media (min-width: 768px) {
  .pdp-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); }
  .pdp-fig { width: min(42vw, 600px); order: 2; margin-block: 0; }
  .pdp-copy { order: 1; }
}
/* Ab 1024 px höchstens 48 px: mit 5vw (72 px bei 1440 px) brachen drei lange englische Produktnamen
   um, und die Knopfreihe stand bis 1265 px zweireihig (Designprüfung v20.5, N-2) */
@media (min-width: 1024px) { .pdp-grid { gap: clamp(40px, 4vw, 48px); } }
/* Produktseite im Querformat des Telefons: Schale neben dem Text statt klein in einer leeren Zeile */
@media (min-width: 560px) and (max-width: 1023.98px) and (max-height: 500.98px) {
  .pdp-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
  .pdp-fig { order: 2; width: max(150px, min(100%, calc((100 * var(--svh) - 150px) * .8947))); margin-block: 0; }
  .pdp-copy { order: 1; }
}
/* Filialseite ab 768 px zweispaltig: einspaltig war das Video am Tablet 1229 px hoch (B6).
   Der Film (9:16) ist höchstens so breit, dass er unter der Kopfzeile ganz in die sichtbare Höhe
   passt: bei fester Spaltenbreite war er am Laptop höher als der Bildschirm (925 px bei 1440 × 900)
   und blieb, weil er klebt, unten auf Dauer abgeschnitten (Designprüfung v20.2, N2). */
@media (min-width: 768px) {
  .br-page { grid-template-columns: max(200px, min(calc((100% - var(--br-gap)) * .425), calc((100 * var(--svh) - var(--stick) - 24px - var(--bar-h)) * .5625))) minmax(0, 1fr); grid-template-areas: "video info" "video text"; align-items: start; row-gap: 8px; }
  .br-page > .frame { grid-area: video; }
  .br-info { grid-area: info; }
  .br-text { grid-area: text; }
}
@media (min-width: 1024px) {
  .night-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(48px, 6vw, 110px); }
  .qa-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; }
  /* Der Film im Abendabschnitt steht an der Textkante wie der Film der Filialseite (mittig in der
     Spalte war er bei 1440 px 27 px eingerückt; Designprüfung v20.3, G4) */
  .night-grid .neon-frame { margin-inline: 0 auto; }
}
/* Nur das Video der linken Spalte klebt; das Foto in der Textspalte verdeckte sonst den Link zur
   anderen Filiale (Barrierefreiheitsprüfung v17, N1). Es klebt nur in hohen Fenstern: in
   niedrigen (bis 500 px) steht unten die Aktionsleiste, und das Mindestmaß von 200 px machte den
   Film höher als den Platz darüber (Code-Review v20.3, Befund 6). */
@media (min-width: 1024px) and (min-height: 501px) { .br-page > .frame { position: sticky; top: var(--stick); } }

/* Handy: eine Hauptaktion über die volle Breite, die zwei Nebenwege teilen sich eine Zeile */
@media (max-width: 1023.98px) {
  .pdp-copy .btns .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; }
  .pdp-copy .btns .btn:first-child { flex-basis: 100%; }
  /* Die zwei Knöpfe der Bühne stehen nebeneinander, der Hauptknopf breiter. Er zeigt die kurze
     Beschriftung («اسأل عن السعر», das Symbol sagt WhatsApp); der Rest bleibt für Screenreader
     Teil des Namens. Untereinander nahmen die Knöpfe 116 px, und die Musterreihe lag am Handy
     ganz unter dem Falz (Designprüfung v20.2, N10). Die Beschriftung bricht nicht um: passen
     beide Knöpfe nicht in die Spalte (Querformat 568 × 320: 234 px), stehen sie untereinander. */
  .stage-acts .btn { flex: 1 1 auto; padding-inline: 12px; white-space: nowrap; }
  .stage-acts .btn:first-child { flex-grow: 1.8; }
  .stage-acts .lbl-rest { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* vt:start — erzeugt von tools/build_site.py, nicht von Hand ändern */
.vt-pistachio-kernels { view-transition-name: p-pistachio-kernels; }
.vt-pistachio-roasted { view-transition-name: p-pistachio-roasted; }
.vt-pistachio-salted { view-transition-name: p-pistachio-salted; }
.vt-cashew-glazed { view-transition-name: p-cashew-glazed; }
.vt-cashew-raw { view-transition-name: p-cashew-raw; }
.vt-cashew-hot { view-transition-name: p-cashew-hot; }
.vt-almond-roasted { view-transition-name: p-almond-roasted; }
.vt-almond-red { view-transition-name: p-almond-red; }
.vt-almond-smoked { view-transition-name: p-almond-smoked; }
.vt-hazelnut-roasted { view-transition-name: p-hazelnut-roasted; }
.vt-mixed-kernels { view-transition-name: p-mixed-kernels; }
.vt-mixed-nuts { view-transition-name: p-mixed-nuts; }
.vt-sunflower-striped { view-transition-name: p-sunflower-striped; }
.vt-pumpkin-white { view-transition-name: p-pumpkin-white; }
.vt-pepitas-green { view-transition-name: p-pepitas-green; }
.vt-watermelon-seeds { view-transition-name: p-watermelon-seeds; }
.vt-qudama-sugar { view-transition-name: p-qudama-sugar; }
.vt-chickpeas-yellow { view-transition-name: p-chickpeas-yellow; }
.vt-krikri { view-transition-name: p-krikri; }
.vt-peanut-wasabi { view-transition-name: p-peanut-wasabi; }
.vt-apricot-dried { view-transition-name: p-apricot-dried; }
.vt-raisins-golden { view-transition-name: p-raisins-golden; }
.vt-dragonfruit-dried { view-transition-name: p-dragonfruit-dried; }
.vt-lemon-dried { view-transition-name: p-lemon-dried; }
.vt-banana-chips { view-transition-name: p-banana-chips; }
.vt-goji { view-transition-name: p-goji; }
.vt-lokum-rose { view-transition-name: p-lokum-rose; }
.vt-dragees-chocolate { view-transition-name: p-dragees-chocolate; }
.vt-mlabbas-colored { view-transition-name: p-mlabbas-colored; }
.vt-marshmallow { view-transition-name: p-marshmallow; }
.vt-pretzels { view-transition-name: p-pretzels; }
.vt-corn-cones { view-transition-name: p-corn-cones; }
/* vt:end */

/* Bewegung am Handy (v22) ------------------------------------------------- */
/* site.js setzt html.mo unter 900 px Breite, nie bei reduzierter Bewegung und nie ohne JavaScript.
   Versteckt (.rv) ist nur, was beim Start unter dem Bildschirm lag; nach dem Erscheinen nimmt
   site.js die Klassen wieder weg. translate, scale und rotate als eigene Eigenschaften: transform
   bleibt für gedrückte Knöpfe und Karten frei. Browser ohne sie (Safari bis 14.0) blenden nur ein. */
.hdr-progress { position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
html[dir="rtl"] .hdr-progress { transform-origin: 100% 50%; }
@media (min-width: 900px) { .hdr-progress { display: none; } }
@media (max-width: 899.98px) {
  /* Titel: in Schreibrichtung. Der Rand nach oben und unten lässt den Schwüngen der Ruqaa Platz. */
  /* Der Ausschnitt liegt auf der Hülle (.ink, von site.js gesetzt), nie auf dem beobachteten
     Element selbst: sonst meldet es sich in Chromium nie als sichtbar. */
  html.mo .rv-ink > .ink { display: block; clip-path: inset(-.6em -.4em -.6em 100%); translate: 0 .18em; transition: clip-path .95s var(--ease-out), translate .95s var(--ease-out); }
  html.mo[dir="ltr"] .rv-ink > .ink { clip-path: inset(-.6em 100% -.6em -.4em); }
  html.mo .rv-ink.rv-in > .ink { clip-path: inset(-.6em -.4em -.6em -.4em); translate: 0 0; }
  /* Absätze, Knopfreihen, Papier */
  html.mo .rv-rise { opacity: 0; translate: 0 24px; transition: opacity .7s var(--ease-out), translate .8s var(--ease-out); }
  html.mo .rv-rise.rv-in { opacity: 1; translate: 0 0; }
  /* Zeilen einer Liste: von der Startkante, nacheinander (Verzögerung setzt site.js). Zur
     Startkante hin entsteht kein seitlicher Überlauf des Dokuments. */
  /* 16 px: weniger als der Seitenrand (mindestens 20 px), die versteckte Zeile bleibt im Bild */
  html.mo .rv-side { opacity: 0; translate: 16px 0; transition: opacity .6s var(--ease-out), translate .7s var(--ease-out); }
  html.mo[dir="ltr"] .rv-side { translate: -16px 0; }
  html.mo .rv-side.rv-in { opacity: 1; translate: 0 0; }
  /* Karten stellen sich auf, wie eine Schale, die auf den Tresen gesetzt wird */
  html.mo .rv-card { opacity: 0; transform: perspective(640px) rotateX(14deg) translateY(30px); transform-origin: 50% 100%; transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
  html.mo .rv-card.rv-in { opacity: 1; transform: none; }
  /* Fotos und Clips: Rollladen. Eine Blende in der Farbe des Rahmens fährt nach oben weg, das Bild
     erscheint von unten nach oben. Blende statt Ausschnitt: ein Ausschnitt auf <picture> (ein
     Zeilenelement) schnitte das Foto an, und der Clip läuft so schon, wenn die Blende aufgeht. */
  html.mo .rv-frame::after { content: ""; position: absolute; inset: -1px; z-index: 2; background: var(--bg-deep); transform-origin: 50% 0; transition: transform 1.1s var(--ease-in-out); }
  html.mo .rv-frame.rv-in::after { transform: scaleY(0); }
  /* Tiefe im Rahmen: das Bild ist ein Zehntel größer als sein Rahmen und wandert beim Scrollen */
  html.mo .mo-deep { scale: 1.1; }
  /* Bewertung: die Sterne setzen sich einer nach dem anderen */
  html.mo .rv-stars .big { opacity: 0; translate: 0 14px; transition: opacity .6s var(--ease-out), translate .7s var(--ease-out); }
  html.mo .rv-stars .stars svg { opacity: 0; scale: .3; transition: opacity .3s var(--ease-out), scale .55s cubic-bezier(.34, 1.4, .64, 1); }
  html.mo .rv-stars.rv-in .big { opacity: 1; translate: 0 0; }
  html.mo .rv-stars.rv-in .stars svg { opacity: 1; scale: 1; }
  html.mo .rv-stars.rv-in .stars svg:nth-child(1) { transition-delay: .15s; }
  html.mo .rv-stars.rv-in .stars svg:nth-child(2) { transition-delay: .24s; }
  html.mo .rv-stars.rv-in .stars svg:nth-child(3) { transition-delay: .33s; }
  html.mo .rv-stars.rv-in .stars svg:nth-child(4) { transition-delay: .42s; }
  html.mo .rv-stars.rv-in .stars svg:nth-child(5) { transition-delay: .51s; }
}
@media print {
  html.mo .rv, html.mo .rv * { opacity: 1 !important; clip-path: none !important; transform: none !important; translate: none !important; scale: none !important; }
}