/* ============================================================
   fruchtfleisch — Demo von siteupgra.de
   Eigene Welt: Clash Display + Space Mono, fünf Sortenfarbwelten.
   Scroll-Fortschritt kommt als --p (0–1) vom Motor (main.js).
   ============================================================ */

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

:root{
  --papier:#f4efe7;
  --ink:#171310;
  --nacht:#0d0b09;
  --weiss:#faf7f2;
  --font-display:'Clash Display', 'Avenir Next', sans-serif;
  --font-mono:'Space Mono', 'Courier New', monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --kopf-h:3.6rem;
}

html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--nacht);
  color:var(--ink);
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }

/* Filmkorn über der ganzen Seite — nimmt Flächen die digitale Glätte.
   Fixe, statische Ebene (billig), unter der Kopfzeile (z 100). */
body::after{
  content:""; position:fixed; inset:0; z-index:95; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay;
}
::selection{ background:#f5c400; color:var(--ink); }
:focus-visible{ outline:2px solid currentColor; outline-offset:4px; border-radius:2px; }

/* Skip-Link (Bach-Standard) */
.sprung{
  position:fixed; top:-4rem; left:1rem; z-index:200;
  background:var(--ink); color:var(--papier);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em;
  padding:.7rem 1.1rem; border-radius:999px; text-decoration:none;
  transition:top .3s var(--ease);
}
.sprung:focus-visible{ top:1rem; }

/* ---------- Kopfzeile: liest auf Hell UND Dunkel (Differenz-Trick) ---------- */
.kopf{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--kopf-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(1.2rem, 4vw, 3rem);
  mix-blend-mode:difference; color:#fff;
  pointer-events:none;
}
.kopf__marke{
  pointer-events:auto;
  display:inline-flex; align-items:center; min-height:44px; /* Tippfläche */
  font-weight:600; font-size:1.15rem; letter-spacing:.01em;
  color:#fff; text-decoration:none;
}
.kopf__marke:hover{ opacity:.85; }
.kopf__demo{
  pointer-events:auto;
  display:inline-flex; align-items:center; min-height:44px; /* Tippfläche */
  color:#fff; text-decoration:none;
  font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.22em; text-transform:lowercase;
  opacity:.85;
}
.kopf__demo:hover{ opacity:1; }

/* ============================================================
   EMPFANG — Fächer + Riesen-Wortmarke
   ============================================================ */
.empfang{ height:190svh; background:var(--papier); position:relative; }
.empfang__pin{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center;
}
.empfang__kicker{
  margin:calc(var(--kopf-h) + 4.5svh) 0 0;
  font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.16em; text-transform:lowercase;
  color:rgba(23,19,16,.62);
}
.geist{
  position:absolute; left:50%; top:31%;
  /* rutscht mit dem Fächer nach unten durch — Wort und Flaschen als EINE Bewegung */
  transform:translate(-50%,-50%) translateY(calc(var(--p, 0) * 78svh)) scaleX(calc(1 + var(--p, 0)*.1));
  font-weight:620; font-size:min(15vw, 15rem);
  letter-spacing:-.02em; line-height:1; white-space:nowrap;
  user-select:none;
  overflow:hidden;
  /* Saft fließt PERMANENT durchs Wort: Endlos-Förderband statt Hin-und-her —
     Kachel endet mit der Startfarbe und wird um exakt eine Kachelbreite
     verschoben (Position-x −200 % bei Größe 200 %) → nahtlos, nie stehend */
  color:rgba(24,19,15,.08); /* Rückfall ohne background-clip:text */
  background:linear-gradient(90deg,
    #f5c400, #46a85c, #8c56cf, #e23b50, #e08a1e, #f5c400);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:geist-welle 10s linear infinite;
}
@keyframes geist-welle{
  from{ background-position-x:0%; }
  to{ background-position-x:-200%; }
}
.geist__zeile{ display:inline; }
/* Lade-Choreografie: die Wortmarke steigt Buchstabe für Buchstabe */
.geist span{
  display:inline-block;
  animation:geist-steigen .9s var(--ease) backwards;
  animation-delay:calc(.15s + var(--gi) * 45ms);
}
@keyframes geist-steigen{
  from{ transform:translateY(112%); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

/* Sortenfarb-Lichter: fünf weiche Farbpfützen treiben wie Licht durch Saft
   übers Papier (reine Verläufe, kein blur-Filter — billig auf jedem Gerät) */
.auren{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:calc(1 - var(--p, 0) * .9);
}
.auren i{
  position:absolute; left:var(--ax); top:var(--ay);
  width:46svh; height:46svh; margin:-23svh 0 0 -23svh;
  border-radius:50%;
  background:radial-gradient(closest-side, var(--ac), transparent 72%);
  opacity:.13;
  animation:aura-treiben 21s ease-in-out infinite alternate;
  animation-delay:var(--ad);
}
@keyframes aura-treiben{
  0%{ transform:translate(0, 0) scale(1); }
  50%{ transform:translate(6svh, -4svh) scale(1.12); }
  100%{ transform:translate(-5svh, 5svh) scale(.94); }
}
.faecher{
  position:absolute; bottom:9svh; left:50%; width:0;
  height:calc(clamp(72px, 10.5vw, 136px) * 2.93);
  /* beim Rausscrollen wachsen die Flaschen dem ersten Blatt entgegen,
     statt klein zusammenzuschnurren */
  transform-origin:50% 100%;
  transform:scale(calc(1 + var(--p, 0) * 1.3));
}
.fl{
  position:absolute; bottom:0; left:0;
  width:clamp(72px, 10.5vw, 136px);
  transform-origin:50% 96%;
  transform:
    translateX(calc(-50% + var(--tx) * (1 - var(--p, 0) * .92)))
    rotate(calc(var(--rot) * (1 - var(--p, 0) * .92)))
    translateY(calc(var(--p, 0) * 5svh));
  z-index:1;
  filter:drop-shadow(0 26px 22px rgba(23,19,16,.18));
}
/* Auffächern beim Laden: startet gestapelt, öffnet gestaffelt.
   Der Endzustand entspricht dem Basis-Transform bei --p:0 —
   die Animation übergibt nahtlos an den Scroll-Motor. */
@keyframes auffaechern{
  from{
    transform:translateX(-50%) rotate(0deg) translateY(0);
  }
  to{
    transform:
      translateX(calc(-50% + var(--tx) * (1 - var(--p, 0) * .92)))
      rotate(calc(var(--rot) * (1 - var(--p, 0) * .92)))
      translateY(calc(var(--p, 0) * 5svh));
  }
}
.fl:nth-child(2), .fl:nth-child(4){ z-index:2; }
.fl--mitte{ z-index:3; }
/* Heben liegt auf dem GANZEN Link (Bild + Etikett) — als eigenständige
   translate-Eigenschaft parallel zu Auffächer-Animation und Scroll-Transform */
.fl{
  animation:auffaechern 1.15s var(--ease) backwards,
            fl-heben 7.5s ease-in-out infinite;
  animation-delay:calc(var(--i) * 95ms), calc(2.4s + var(--i) * .3s);
}
@keyframes fl-heben{
  0%, 9%, 100%{ translate:0 0; }
  4.5%{ translate:0 -3%; }
}
.fl img{ transition:transform .5s var(--ease); }
.fl:hover img, .fl:focus-visible img{ transform:translateY(-2.5%) scale(1.02); }
/* Sortenname im Fächer — dieselbe Typografie wie die Blatt-Headline
   (Clash Display, fett, kleingeschrieben) → Wiedererkennung Glas ↔ Blatt.
   Größe relativ zur Flaschenbreite: so groß, wie das Glas es hergibt. */
.fl__marke, .fl__etikett{
  position:absolute; bottom:calc(6.5% + 10px); left:50%; /* 10px Richtung Deckel (Chris, 19.08.) */
  writing-mode:vertical-rl; rotate:180deg;
  font-family:var(--font-display); font-weight:620;
  font-size:calc(clamp(72px, 10.5vw, 136px) * .145);
  letter-spacing:-.01em; line-height:1; text-transform:lowercase;
  pointer-events:none;
}
/* Achtung: rotate:180deg kehrt die Verschiebung um — Vorzeichen sind daher
   gespiegelt, damit die Marke wie in der Karte LINKS steht. */
.fl__marke{ transform:translateX(calc(-50% + .62em)); }
.fl__etikett{ transform:translateX(calc(-50% - .62em)); }
/* Schwarzblende: nimmt Hero am Ende weich auf — kein harter Papier→Nacht-Schnitt.
   Sie hebt erst spät an (ab p ≈ .55) und ist bei p = 1 voll geschlossen. */
.empfang__blende{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:var(--nacht);
  /* dunkelt nur AB, nie zu: Deckel bei .82, damit Flaschen und Wort bis zum
     Schnitt durchschimmern und das erste Blatt in ein lebendiges Bild fährt.
     Steigt spät (ab p ≈ .7) und erreicht die Endstärke exakt am Übergang. */
  opacity:calc(clamp(0, calc((var(--p, 0) - .7) / .3), 1) * .82);
}
.empfang__hinweis{
  position:absolute; bottom:3.2svh; left:50%;
  transform:translateX(-50%);
  margin:0; white-space:nowrap;
  font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.2em; text-transform:lowercase;
  color:rgba(23,19,16,.68);
  opacity:calc(1 - var(--p, 0) * 2.4);
}

/* Umbrüche, die nur am Handy gelten */
.nur-handy{ display:none; }
@media (max-width:759px){ .nur-handy{ display:inline; } .nur-desktop{ display:none; } }

/* Nur für Vorleseprogramme sichtbar */
.nur-sr{
  position:absolute; width:1px; height:1px; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* ============================================================
   SORTEN-BLÄTTER — gemeinsame Bühne
   ============================================================ */
.blatt{
  height:280svh; position:relative;
  /* Phasen aus dem Scroll-Fortschritt */
  --p1:clamp(0, calc(var(--p, 0) / .42), 1);
  --p2:clamp(0, calc((var(--p, 0) - .34) / .28), 1);
  --p3:clamp(0, calc((var(--p, 0) - .6) / .3), 1);
}
.blatt__pin{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0, 1.02fr) minmax(0, 1fr);
  align-items:center;
  column-gap:3vw;
  padding-inline:clamp(1.2rem, 6vw, 7rem);
  background:var(--s-tief);
}

/* Sortenfarben — je Blatt fünf Töne (--s-glut = tiefe Glut-Stufe für Typo-Schattierung) */
.blatt[data-sorte="sonnenstich"]{ --s:#f5c400; --s-tief:#201603; --s-hell:#ffe9ac; --s-text:#241a04; --s-glut:#d96a00; }
.blatt[data-sorte="gruenzeug"]  { --s:#46a85c; --s-tief:#071a0e; --s-hell:#d8f0dc; --s-text:#062310; --s-glut:#1d7a3c; }
.blatt[data-sorte="blaumacher"] { --s:#8c56cf; --s-tief:#150b20; --s-hell:#e9dcf7; --s-text:#1d0a31; --s-glut:#5b2f9e; }
.blatt[data-sorte="rotlicht"]   { --s:#e23b50; --s-tief:#20060b; --s-hell:#fadde1; --s-text:#33060e; --s-glut:#99182e; }
.blatt[data-sorte="goldrausch"] { --s:#e08a1e; --s-tief:#211403; --s-hell:#f7e3c2; --s-text:#2a1a05; --s-glut:#a35708; }

/* Beschriftung AUF dem Glas: helle Säfte tragen dunkle Schrift, dunkle Säfte
   helle — wie bei echten Etiketten. Gemessen (WCAG gegen den echten Saft):
   sonnenstich weiß 2,7 → dunkel 7,2 · grünzeug weiß 3,7 → dunkel 5,3 ·
   blaumacher 12,7 · rotlicht 10,8 · goldrausch 4,7 → weiß bleibt. */
.blatt, .fl{
  --glas-schrift:rgba(255,255,255,.94);
  --glas-stark:#fff;
  --glas-schatten:0 1px 10px rgba(0,0,0,.6), 0 0 3px rgba(0,0,0,.45);
  --glas-linie:rgba(255,255,255,.5);
}
.blatt[data-sorte="sonnenstich"], .fl[data-sorte="sonnenstich"],
.blatt[data-sorte="gruenzeug"],   .fl[data-sorte="gruenzeug"]{
  --glas-schrift:rgba(16,12,3,.92);
  --glas-stark:#0d0a02;
  --glas-schatten:0 1px 7px rgba(255,255,255,.42);
  --glas-linie:rgba(16,12,3,.45);
}

/* Bühnen-Licht — je Sorte eine EIGENE Licht-Architektur auf fast-schwarzem Grund.
   Dunkles Gelb ist optisch Braun — deshalb bleibt der Grund tief und das Licht
   sitzt gerichtet (Sonne/Blätterdach/Nebel/Kegel/Schein), nie als Vollflächen-Wash. */
.blatt[data-sorte="sonnenstich"] .blatt__pin{   /* „Aufgang": Sonne von unten */
  background:
    radial-gradient(30% 22% at 26% 78%, rgba(255,199,64,.30), transparent 70%),
    radial-gradient(85% 40% at 32% 98%, rgba(224,122,26,.22), transparent 75%),
    linear-gradient(180deg, #090603 0%, #140d04 58%, #2a1a06 100%);
}
.blatt[data-sorte="gruenzeug"] .blatt__pin{     /* „Wachstum": Licht fällt durchs Blätterdach */
  background:
    radial-gradient(38% 46% at 29% 0%, rgba(126,208,143,.22), transparent 74%),
    linear-gradient(180deg, #0e2013 0%, #081409 55%, #040905 100%);
}
.blatt[data-sorte="blaumacher"] .blatt__pin{    /* „Schwerelos": zwei träge Nebel-Inseln */
  background:
    radial-gradient(30% 36% at 72% 20%, rgba(140,86,207,.20), transparent 72%),
    radial-gradient(38% 32% at 20% 74%, rgba(86,108,216,.16), transparent 72%),
    linear-gradient(180deg, #0e0718 0%, #140a20 55%, #080411 100%);
}
.blatt[data-sorte="rotlicht"] .blatt__pin{      /* „Puls": harter Lichtkegel von oben */
  background:
    radial-gradient(24% 58% at 27% 0%, rgba(226,59,80,.30), transparent 74%),
    radial-gradient(40% 22% at 27% 90%, rgba(226,59,80,.12), transparent 70%),
    linear-gradient(180deg, #1c0409 0%, #100306 55%, #080204 100%);
}
.blatt[data-sorte="goldrausch"] .blatt__pin{    /* „Kippung": diagonaler Goldschein */
  background:
    linear-gradient(112deg, transparent 40%, rgba(224,138,30,.16) 54%, transparent 70%),
    radial-gradient(40% 32% at 70% 62%, rgba(224,138,30,.20), transparent 72%),
    linear-gradient(180deg, #140c03 0%, #1c1204 55%, #0c0702 100%);
}

/* Video-Ebene (Video wird vom Motor eingehängt; bis dahin trägt die
   CSS-Lichtarchitektur der Bühne — kein Platzhalter-Poster mehr) */
.blatt__video{ position:absolute; inset:0; z-index:0; }
.blatt__video video{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s ease;
  /* Grading: das Video ist Atmosphäre, nicht Hauptdarsteller —
     abgedunkelt bleibt die Bühne dunkel und Flasche + Text führen */
  filter:brightness(.58) saturate(.92);
}
.blatt.an .blatt__video video{ opacity:1; }
/* Lese-Schutz über der Text-Spalte — blendet nur MIT dem Video ein */
.blatt__video::before{
  content:""; position:absolute; inset:0; z-index:1;
  opacity:0; transition:opacity .9s ease;
  background:linear-gradient(90deg, transparent 44%, rgba(0,0,0,.5) 80%);
}
.blatt.an .blatt__video::before{ opacity:1; }
/* Vignette + Bodenschatten: rahmt die Bühne UND das echte Video */
.blatt__video::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(125% 95% at 50% 42%, transparent 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(0deg, rgba(0,0,0,.42), transparent 30%);
}

/* Flaschen-Bühne: Foto + Beschriftung skalieren als EINE Einheit (cqw) */
.buehne{
  position:relative; z-index:3;
  height:min(76svh, 105vw);
  /* Seitenverhältnis der echten Master-Flasche (683×2000) */
  aspect-ratio:683 / 2000;
  justify-self:center;
  container-type:inline-size;
  transform:translateY(calc((1 - var(--p1)) * 46svh));
  /* „Atmen" im Stillstand: die unabhängige translate-Eigenschaft wird
     animiert und legt sich ÜBER die Scroll-transform — kein Konflikt */
  animation:buehne-atmen 7s ease-in-out infinite alternate;
}
@keyframes buehne-atmen{
  from{ translate:0 .55svh; }
  to{ translate:0 -.6svh; }
}
.blatt[data-sorte="gruenzeug"]  .buehne{ animation-delay:-1.7s; }
.blatt[data-sorte="blaumacher"] .buehne{ animation-delay:-3.1s; }
.blatt[data-sorte="rotlicht"]   .buehne{ animation-delay:-4.6s; }
.blatt[data-sorte="goldrausch"] .buehne{ animation-delay:-5.9s; }
.flasche{ width:100%; height:100%; filter:drop-shadow(0 34px 34px rgba(0,0,0,.45)); }
.buehne__marke{
  position:absolute; left:calc(50% - 11.5cqw); bottom:10%;
  writing-mode:vertical-rl; rotate:180deg;
  font-family:var(--font-display);
  font-weight:600; font-size:10cqw; letter-spacing:.02em;
  line-height:1; /* wie die Sorte — sonst ist die Zeile breiter und überlappt */
  pointer-events:none;
}

/* ---- Etikett-System: gilt für Fächer UND Bühne, auf jeder Flasche gleich ----
   Die MARKE trägt immer die Fünf-Farben-Palette (wie das Riesenwort im Hero
   und das durst? am Schluss), die SORTE immer Weiß. Nur die Zutaten-Skala
   folgt weiter dem Saft — dort geht Lesbarkeit vor. */
.fl__marke, .buehne__marke{
  color:#f5c400; /* Rückfall ohne background-clip:text */
  background:linear-gradient(180deg, #f5c400, #46a85c, #8c56cf, #e23b50, #e08a1e);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.fl__etikett, .buehne__sorte{
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.6), 0 0 14px rgba(0,0,0,.4);
}
.buehne__sorte{
  position:absolute; left:calc(50% + 1.5cqw); bottom:10%;
  writing-mode:vertical-rl; rotate:180deg;
  /* wie die Blatt-Headline: Clash Display, fett — Glas und Blatt sprechen eine Sprache */
  font-family:var(--font-display); font-weight:620; font-size:10cqw;
  letter-spacing:-.01em; line-height:1; text-transform:lowercase;
  pointer-events:none;
}
/* Zutaten-Skala AUF dem Glas */
.skala{ position:absolute; inset:0; }
.zeile{
  position:absolute; left:26cqw; right:15cqw;
  min-height:44px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:1cqw;
  padding:0 0 .35rem;
  background:none; border:0 solid transparent;
  border-bottom:1px solid var(--glas-linie);
  font-family:var(--font-mono); font-size:4.1cqw;
  letter-spacing:.08em; text-transform:lowercase;
  white-space:nowrap;
  color:var(--glas-schrift);
  text-shadow:var(--glas-schatten);
  cursor:pointer;
  opacity:var(--zp, 1);
  transform:translateX(calc((1 - var(--zp, 1)) * 2.5rem));
  --zp:clamp(0, calc(var(--p2) * 3 - var(--z)), 1);
}
.zeile:hover, .zeile:focus-visible, .zeile[aria-pressed="true"]{
  border-bottom-color:var(--glas-stark);
  color:var(--glas-stark);
}
.zeile__wert{ opacity:.72; font-size:3.3cqw; }
.zeile[aria-pressed="true"] .zeile__wert{
  opacity:1; font-weight:700; color:var(--glas-stark); font-size:4.2cqw;
}

/* Text-Spalte */
.copy{ position:relative; z-index:4; max-width:36rem; }
.copy__kicker{
  margin:0 0 1rem;
  font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.16em; text-transform:lowercase;
  color:var(--s-hell); /* Rückfall für Browser ohne color-mix */
  color:color-mix(in srgb, var(--s-hell) 85%, transparent);
  opacity:var(--p1);
  transform:translateY(calc((1 - var(--p1)) * 1.4rem));
}
.copy__titel{
  margin:0 0 1.2rem;
  width:max-content; max-width:none;
  font-weight:600; font-size:clamp(3.2rem, 7.4vw, 7.6rem);
  line-height:.95; letter-spacing:-.02em; text-transform:lowercase;
  /* Licht im Buchstaben statt flacher Farbfläche: hell oben → Glut unten */
  color:var(--s); /* Rückfall ohne background-clip:text */
  background:linear-gradient(180deg, var(--s-hell) 2%, var(--s) 52%, var(--s-glut) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 12px 46px rgba(0,0,0,.35));
  filter:drop-shadow(0 12px 46px color-mix(in srgb, var(--s) 28%, transparent));
  opacity:var(--p1);
  transform:translateY(calc((1 - var(--p1)) * 2.6rem));
}
/* Mobil-Umbruch der Sprüche: am Desktop wirkungslos */
.copy__satz .mob{ display:none; }
.copy__satz{
  margin:0 0 2rem;
  /* Größe an die Textspalte gekoppelt, damit die Sätze EINZEILIG bleiben
     (Teiler aus der längsten Zeile gemessen: „Draußen grau? …aus der Flasche.") */
  font-size:clamp(1rem, 1.34vw, 1.55rem); font-weight:450;
  color:rgba(250,247,242,.93);
  max-width:none;
  opacity:var(--p2);
  transform:translateY(calc((1 - var(--p2)) * 1.6rem));
}

/* Aufklapper (Details direkt auf dem Blatt — kein Seitenwechsel) */
.aufklapper{
  opacity:var(--p2);
  transform:translateY(calc((1 - var(--p2)) * 1.2rem));
}
/* Offen: volle Deckkraft — Rest-Transparenz würde das ganze Panel
   (samt Boden-Blatt auf Mobil) durchscheinend machen */
.aufklapper[open]{ opacity:1; transform:none; }
/* Zutaten-Knopf = MESS-STRICH: dieselbe Sprache wie die Zutaten-Skala auf dem
   Glas (Text links, Zeichen rechts, feine Sortenfarb-Linie darunter) — keine
   generische Kapsel. Der Winkel ist aus CSS gezeichnet, nicht aus der Schrift. */
.aufklapper summary{
  list-style:none;
  display:inline-flex; align-items:flex-end; justify-content:space-between; gap:2.5rem;
  width:min(24rem, 100%);
  font-family:var(--font-mono); font-size:1.05rem;
  letter-spacing:.06em; text-transform:lowercase;
  color:var(--s-hell);
  border:0;
  border-bottom:1px solid var(--s); /* Rückfall für Browser ohne color-mix */
  border-bottom-color:color-mix(in srgb, var(--s) 60%, transparent);
  border-radius:0; padding:.7rem 0 .5rem; min-height:44px; /* Tippfläche */
  cursor:pointer; user-select:none;
  transition:color .3s ease, border-bottom-color .3s ease;
}
.aufklapper summary::-webkit-details-marker{ display:none; }
.aufklapper summary::after{
  content:""; flex:0 0 auto; align-self:center;
  width:.5em; height:.5em; margin-bottom:.18em;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .35s var(--ease);
}
.aufklapper[open] summary::after{ transform:rotate(-135deg); margin-bottom:-.12em; }
.aufklapper summary:hover, .aufklapper summary:focus-visible{
  color:#fff; border-bottom-color:var(--s-hell);
}
.aufklapper[open] summary{ border-bottom-color:var(--s-hell); }
/* Der Fokusring liegt AUSSERHALB der Pille auf dem dunklen Fond — er braucht
   im offenen Zustand die helle Farbe, nicht das fast schwarze currentColor */
.aufklapper[open] summary:focus-visible{ outline-color:var(--s-hell); }
.aufklapper__inhalt{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease);
}
.aufklapper[open] .aufklapper__inhalt{ grid-template-rows:1fr; }
.aufklapper__innen{ overflow:hidden; min-height:0; }
.anteile{
  list-style:none; margin:1.3rem 0 0; padding:0;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em;
  color:rgba(250,247,242,.88);
}
.anteile li{
  display:flex; justify-content:space-between; gap:2rem;
  padding:.42rem 0;
  border-bottom:1px solid rgba(250,247,242,.16);
}
.anteile b{ color:var(--s-hell); font-weight:700; }
.naehrwerte{
  width:100%; margin:1.2rem 0 0; border-collapse:collapse;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em;
  color:rgba(250,247,242,.82);
}
.naehrwerte caption{
  text-align:left; padding-bottom:.5rem;
  color:var(--s-hell); /* Rückfall für Browser ohne color-mix */
  color:color-mix(in srgb, var(--s-hell) 80%, transparent);
  font-size:.66rem; letter-spacing:.14em; text-transform:lowercase;
}
.naehrwerte td, .naehrwerte th{
  padding:.3rem 0; border-bottom:1px solid rgba(250,247,242,.12);
  font-weight:400; text-align:left;
}
.naehrwerte td:last-child{ text-align:right; color:rgba(250,247,242,.92); }
.aufklapper__meta{
  margin:1.1rem 0 0;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em;
  /* KEIN lowercase: die Groß-/Kleinschreibung ist Chris' Satz-Entscheidung
     (FSK / OHNE / ALTA), 19.08. */
  color:rgba(250,247,242,.62);
}
.schliessen{ display:none; }

/* Offen: nur der Aufklapper-Inhalt scrollt — Titel und Satz bleiben stehen */
.aufklapper[open] .aufklapper__innen{
  max-height:min(46svh, 460px); overflow-y:auto;
  overscroll-behavior:contain; scrollbar-width:thin;
  padding-right:.5rem;
}

/* ============================================================
   SIGNATUREN — jede Sorte bewegt sich anders
   ============================================================ */

/* 01 sonnenstich — „Aufgang": die Sonne steigt hinter der Flasche auf */
.glow{
  position:absolute; z-index:1; left:4%; top:auto; bottom:-18%;
  width:74svh; height:74svh; border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,214,92,.42) 0%, rgba(255,157,26,.16) 42%, transparent 65%);
  transform:translateY(calc((1 - var(--p1)) * 22svh)) scale(calc(.55 + var(--p1) * .5));
  opacity:calc(.2 + var(--p1) * .7);
  pointer-events:none;
}
/* Die Flasche steigt der Sonne entgegen: nach dem Einflug weiter sanft
   aufwärts über den ganzen Pin, beim Einflug leicht geneigt → aufrichtend */
.blatt[data-sorte="sonnenstich"] .buehne{
  transform:translateY(calc((1 - var(--p1)) * 46svh - var(--p, 0) * 9svh))
            rotate(calc((1 - var(--p1)) * -5deg))
            scale(calc(.97 + var(--p, 0) * .05));
}

/* 02 grünzeug — „Wachstum": alles wächst von unten, Stängel zeichnet sich */
.wachsen{
  display:contents;
}
.blatt[data-sorte="gruenzeug"] .buehne{
  clip-path:inset(calc((1 - var(--p1)) * 100%) 0 0 0);
  transform-origin:50% 100%;
  /* wächst nach dem Freilegen weiter: langsames Größerwerden vom Boden aus */
  transform:translateY(calc((1 - var(--p1)) * 10svh))
            scale(calc(.90 + var(--p, 0) * .10))
            rotate(calc(sin(calc(var(--p, 0) * 2.6rad)) * 1.3deg));
}
.stengel{
  position:absolute; z-index:1; left:27.5%; bottom:0;
  width:2px; height:72svh;
  background:linear-gradient(0deg, color-mix(in srgb, var(--s-hell) 55%, transparent), transparent);
  transform-origin:bottom;
  transform:scaleY(var(--p2));
  pointer-events:none;
}

/* 03 blaumacher — „Schwerelos": träges Treiben auf Sinusbahnen */
.blatt[data-sorte="blaumacher"]{
  --p1:clamp(0, calc(var(--p, 0) / .58), 1);
}
.blatt[data-sorte="blaumacher"] .buehne{
  rotate:calc(sin(calc(var(--p, 0) * 6.3rad)) * 2.4deg);
  transform:translateY(calc((1 - var(--p1)) * 46svh + sin(calc(var(--p, 0) * 4.4rad)) * 2svh));
}
.blatt[data-sorte="blaumacher"] .copy__titel{
  transform:translateY(calc((1 - var(--p1)) * 2.6rem))
            translateX(calc(sin(calc(var(--p, 0) * 3.1rad)) * .8rem));
}

/* 04 rotlicht — „Puls": harte Zustandssprünge + Licht-Blitz */
.blatt[data-sorte="rotlicht"]{
  --hitA:clamp(0, calc((var(--p, 0) - .16) * 18), 1);
  --hitB:clamp(0, calc((var(--p, 0) - .34) * 18), 1);
  --hitC:clamp(0, calc((var(--p, 0) - .5) * 18), 1);
}
.blitz{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--s) 55%, transparent), transparent 70%);
  opacity:calc(
    max(0, 1 - abs(calc(var(--p, 0) - .21)) * 22) * .55 +
    max(0, 1 - abs(calc(var(--p, 0) - .39)) * 22) * .4
  );
}
.blatt[data-sorte="rotlicht"] .copy__titel{
  opacity:var(--hitA);
  transform:translateX(calc((1 - var(--hitA)) * -3rem));
}
/* Herzschlag: an jeder Blitz-Schwelle bekommt die Flasche einen Puls-Stoß
   (hit·(1−hit) ergibt einen Buckel um die Schwelle, danach wieder Ruhe) */
.blatt[data-sorte="rotlicht"] .buehne{
  transform:translateY(calc((1 - var(--p1)) * 46svh))
            scale(calc(1 + (
              var(--hitA) * (1 - var(--hitA)) +
              var(--hitB) * (1 - var(--hitB)) +
              var(--hitC) * (1 - var(--hitC))) * .16));
}

/* 05 goldrausch — „Kippung": Flasche neigt sich, Schimmer läuft.
   Die Kippung hängt an --kipp (eigene Variable), damit Reduced Motion sie
   dämpfen kann, OHNE die an --p2 hängenden Inhalte auszublenden. */
.blatt[data-sorte="goldrausch"]{ --kipp:var(--p2); }
.blatt[data-sorte="goldrausch"] .buehne{
  transform-origin:50% 94%;
  /* beim Kippen driftet die Flasche leicht zur Seite — wie zum Eingießen */
  transform:translateY(calc((1 - var(--p1)) * 46svh))
            translateX(calc(var(--kipp) * 3svh))
            rotate(calc(var(--kipp) * -9deg));
}
.blatt[data-sorte="goldrausch"] .copy__titel{
  background:linear-gradient(105deg,
    var(--s) 20%, #ffe9b8 38%, var(--s-hell) 50%, #ffe9b8 62%, var(--s) 80%);
  background-size:220% 100%;
  background-position:calc((1 - var(--p, 0)) * 180%) 0;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  text-shadow:none;
}

/* Abbinder: ab Tablet-Breite bricht NUR der gesetzte <br> — der Browser nie
   (bei 760px ist die längste Zeile ~460px breit, passt also immer) */
@media (min-width:760px){
  .abbinder__satz{ white-space:nowrap; }
}

/* Ab 1200px stehen die Sätze GESETZT einzeilig — kein Browser-Umbruch mehr
   (der bewusste Umbruch in 02 kommt als <br> aus dem HTML und gilt weiter) */
@media (min-width:1200px){
  .copy__satz{ white-space:nowrap; }
}

/* ============================================================
   LINKS-RECHTS-RHYTHMUS — 02 + 04 gespiegelt: Flasche rechts, Text links.
   Licht, Lese-Schutz und Stängel wandern mit. Nur ≥760px (mobil gestapelt).
   ============================================================ */
@media (min-width:760px){
  .blatt[data-sorte="gruenzeug"] .blatt__pin,
  .blatt[data-sorte="rotlicht"] .blatt__pin{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.02fr);
  }
  .blatt[data-sorte="gruenzeug"] .copy,
  .blatt[data-sorte="rotlicht"] .copy{ grid-column:1; grid-row:1; justify-self:end; }
  .blatt[data-sorte="gruenzeug"] .buehne,
  .blatt[data-sorte="rotlicht"] .buehne{ grid-column:2; grid-row:1; }
  .blatt[data-sorte="gruenzeug"] .blatt__pin{
    background:
      radial-gradient(38% 46% at 71% 0%, rgba(126,208,143,.22), transparent 74%),
      linear-gradient(180deg, #0e2013 0%, #081409 55%, #040905 100%);
  }
  .blatt[data-sorte="rotlicht"] .blatt__pin{
    background:
      radial-gradient(24% 58% at 73% 0%, rgba(226,59,80,.30), transparent 74%),
      radial-gradient(40% 22% at 73% 90%, rgba(226,59,80,.12), transparent 70%),
      linear-gradient(180deg, #1c0409 0%, #100306 55%, #080204 100%);
  }
  .blatt[data-sorte="gruenzeug"] .blatt__video::before,
  .blatt[data-sorte="rotlicht"] .blatt__video::before{
    background:linear-gradient(270deg, transparent 44%, rgba(0,0,0,.5) 80%);
  }
  .stengel{ left:auto; right:27.5%; }
}

/* ============================================================
   ANFRAGE-DECKEL — das Original-Anfragefenster der Hauptseite,
   im Vollbild-Rahmen direkt über der Demo (kein Seitenwechsel)
   ============================================================ */
.anfrage-deckel{
  position:fixed; inset:0; z-index:150;
  background:rgba(6, 5, 4, .6);
  opacity:0; transition:opacity .35s ease;
}
.anfrage-deckel.an{ opacity:1; }
.anfrage-rahmen{ width:100%; height:100%; border:0; display:block; }

/* ============================================================
   ABBINDER
   ============================================================ */
.abbinder{
  min-height:100svh; position:relative;
  display:flex; flex-direction:column; align-items:center;
  /* Gestaffelte Abstände statt Einheits-gap; die auto-Ränder von durst?
     und der Demo-Notiz teilen sich die freie Höhe: Hauptblock sitzt im
     optischen Zentrum, die Notiz ankert bewusst am unteren Rand */
  text-align:center;
  background:var(--nacht);
  padding:5rem clamp(1.2rem, 5vw, 4rem) 3rem;
}
.abbinder__riese{
  margin:auto 0 4rem; /* auto oben = Anteil der freien Höhe · 4rem setzt durst? deutlich ab */
  font-weight:620; font-size:clamp(4.5rem, 17vw, 15rem);
  line-height:.9; letter-spacing:-.02em; text-transform:lowercase;
  background:linear-gradient(100deg, #f5c400 4%, #46a85c 28%, #8c56cf 50%, #e23b50 72%, #e08a1e 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.abbinder__satz{
  margin:0 0 3.2rem; max-width:none;
  font-size:clamp(1.05rem, 1.5vw, 1.3rem);
  color:rgba(250,247,242,.92);
}
/* DER wichtigste Knopf: durst?-Typografie (Clash) auf gefüllter Pille, deren
   Farbe die FÜNF SORTEN nacheinander durchläuft — dieselbe Familie wie durst?,
   aber eine Farbe nach der anderen statt alle auf einmal. Dazu ruhiger Herzschlag.
   Schrift bleibt fast-schwarz: trägt auf allen fünf Tönen (≥ 4,4:1). */
.abbinder__anfrage{
  position:relative; margin:0 0 2rem;
  font-weight:620; font-size:clamp(1.7rem, 2.8vw, 2.3rem);
  letter-spacing:-.01em; text-transform:lowercase; text-decoration:none;
  line-height:1; padding:.8rem 2.6rem;
  background:#f5c400;
  color:#0d0b09; -webkit-text-fill-color:#0d0b09;
  border:1px solid transparent; border-radius:999px;
  animation:anfrage-pochen 2.6s ease-in-out infinite,
            anfrage-sorten 17s ease-in-out infinite;
  transition:filter .3s ease;
}
.abbinder__anfrage:hover, .abbinder__anfrage:focus-visible{ filter:brightness(1.12); }
@keyframes anfrage-pochen{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.04); }
}
/* jede Sorte hält kurz, dann weicher Übergang zur nächsten */
@keyframes anfrage-sorten{
  0%,  14%{ background-color:#f5c400; box-shadow:0 0 34px 0 rgba(245,196,0,.20); }
  20%, 34%{ background-color:#46a85c; box-shadow:0 0 34px 0 rgba(70,168,92,.20); }
  40%, 54%{ background-color:#8c56cf; box-shadow:0 0 34px 0 rgba(140,86,207,.24); }
  60%, 74%{ background-color:#e23b50; box-shadow:0 0 34px 0 rgba(226,59,80,.22); }
  80%, 94%{ background-color:#e08a1e; box-shadow:0 0 34px 0 rgba(224,138,30,.20); }
  100%    { background-color:#f5c400; box-shadow:0 0 34px 0 rgba(245,196,0,.20); }
}

.abbinder__cta{
  position:relative; margin:0;
  font-family:var(--font-mono); font-size:1rem;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--weiss); text-decoration:none;
  padding:1rem 1.5rem;
  transition:opacity .3s ease;
}
/* Lichtpool — wie der Showroom-Link der Startseite, auf Dunkel als Papier-Schein */
.abbinder__cta::before{
  content:""; position:absolute; inset:-1.3rem -3rem; z-index:-1; border-radius:999px;
  background:radial-gradient(ellipse at center, rgba(244,239,231,.11), transparent 72%);
}
/* ruhiger Unterstrich — wischt nur beim Draufzeigen ein */
.abbinder__cta::after{
  content:""; position:absolute; left:1.5rem; right:1.5rem; bottom:.55rem; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease-out;
}
.abbinder__cta:hover{ opacity:.6; }
.abbinder__cta:hover::after, .abbinder__cta:focus-visible::after{ transform:scaleX(1); }
.cta__welle span{ display:inline-block; }
.abbinder__hoch{
  position:relative;
  display:inline-flex; align-items:center; min-height:44px; /* Tippfläche */
  margin:1rem 0 0; padding:.35rem .4rem;
  font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.24em; text-transform:lowercase;
  color:rgba(250,247,242,.55); text-decoration:none;
  transition:color .3s ease;
}
.abbinder__hoch::after{
  content:""; position:absolute; left:.4rem; right:.4rem; bottom:.55rem; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease-out;
}
.abbinder__hoch:hover, .abbinder__hoch:focus-visible{ color:var(--weiss); }
.abbinder__hoch:hover::after, .abbinder__hoch:focus-visible::after{ transform:scaleX(1); }
.abbinder__ki{
  margin:auto 0 0; /* ankert den Schlussblock unten, deutlich über der Notiz */
  padding:.6rem 1.15rem;
  border:1px solid rgba(250,247,242,.3); border-radius:999px;
  font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.14em;
  color:rgba(250,247,242,.8);
}
.abbinder__klein{
  margin:1.5rem 0 0; max-width:44rem;
  font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.08em; line-height:1.8;
  color:rgba(250,247,242,.55);
}

/* ============================================================
   MOBIL (<760px): gleiche Bühne, kleinere Geometrie
   ============================================================ */
@media (max-width:759px){
  /* Mobil steht der ganze Text OBEN (Kicker · Titel · Spruch · Knopf) —
     der Lese-Schutz liegt darum oben und läuft zur Flasche hin aus.
     Unten bleibt eine leichte Abdunklung als Standfläche. */
  .blatt__video::before{
    background:
      linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.52) 30%, transparent 58%),
      linear-gradient(0deg, rgba(0,0,0,.34), transparent 26%);
  }
  .kopf__marke{ font-size:1rem; }
  .empfang__kicker{ text-align:center; padding-inline:1.2rem; }
  .geist{ top:34%; left:0; width:100%; transform:translateY(calc(-50% + var(--p, 0) * 78svh)) scaleX(calc(1 + var(--p, 0)*.1)); font-size:28vw; line-height:.95; text-align:center; white-space:normal; }
  .geist__zeile{ display:block; }
  .fl{ width:clamp(64px, 17.5vw, 92px); }
  .faecher{ bottom:10svh; height:calc(clamp(64px, 17.5vw, 92px) * 2.93); }
  .fl__marke, .fl__etikett{ font-size:calc(clamp(64px, 17.5vw, 92px) * .145); }
  .abbinder__cta{ font-size:.82rem; letter-spacing:.2em; padding:1rem .9rem; }
  .abbinder__ki{ line-height:1.7; }
  .abbinder__cta::after{ left:.9rem; right:.9rem; }

  /* Stängel-Linie mobil aus: die Flasche steht mittig, die Linie bliebe
     bei 27,5 % stehen und schnitte durch Text und Knopf */
  .stengel{ display:none; }

  .blatt__pin{
    grid-template-columns:1fr;
    /* Leseweg wie am Desktop: Kicker · Titel · Spruch · Knopf · Flasche (füllt) */
    grid-template-rows:auto auto auto auto minmax(0,1fr);
    align-items:start;
    padding:calc(var(--kopf-h) + 1.4svh) 1.25rem 2.6svh;
    row-gap:.6svh; column-gap:0;
  }
  .copy{ display:contents; }
  .copy__kicker{ order:1; margin:0; }
  .copy__titel{ order:2; font-size:clamp(2.6rem, 12vw, 3.6rem); margin:0; }
  /* Aufklapper sitzt mobil ZWISCHEN Spruch und Flasche — als klarer, gefüllter
     Sortenfarb-Knopf, damit er als Bedienelement sofort erkennbar ist */
  .aufklapper{ order:4; margin:calc(.6rem + 20px) 0 0; justify-self:center; } /* 20px tiefer (Chris, 19.08.) */
  .aufklapper summary{
    display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
    width:auto;
    font-size:.82rem; font-weight:700; letter-spacing:.08em;
    color:#fff; /* Chris' Wunsch 19.08. — vorher --s-text (fast-schwarz) */
    background:var(--s);
    border:1px solid var(--s); border-radius:999px;
    padding:.85rem 1.2rem;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
  }
  .aufklapper summary::after{ display:none; } /* Winkel ist Desktop-Sache */
  .aufklapper summary::before{
    content:"+"; display:inline-grid; place-items:center;
    width:1.2rem; height:1.2rem; border-radius:50%;
    background:rgba(0,0,0,.18); font-weight:700; font-size:.9rem; line-height:1;
  }
  .aufklapper[open] summary::before{ content:"–"; }
  .aufklapper summary:hover{ background:var(--s-hell); }
  .buehne{
    order:5; height:min(42svh, 104vw); justify-self:center; align-self:end;
    margin-top:2svh; margin-bottom:.5svh;
    transform:translateY(calc((1 - var(--p1)) * 30svh));
  }
  /* Der Spruch ist die Pointe der Sorte — er steht direkt unter dem Namen,
     nicht als Fußnote unter der Flasche (Christian, 19.08.). Zweizeilig mit
     GESETZTEM Umbruch (br.mob) an der Sinngrenze: drei Sprüche brechen am
     Punkt, die beiden anderen zwischen Aussage und Pointe. */
  .copy__satz{
    order:3; margin:.55rem 0 0; max-width:none;
    font-size:clamp(1.15rem, 5.1vw, 1.45rem); line-height:1.26;
    letter-spacing:-.005em;
    color:#fff;
    text-shadow:0 1px 12px rgba(0,0,0,.55);
  }
  .copy__satz .mob{ display:inline; }

  /* Sorten-Sonderwege folgen mobil demselben kürzeren Einfahrweg */
  .blatt[data-sorte="sonnenstich"] .buehne{
    transform:translateY(calc((1 - var(--p1)) * 30svh - var(--p, 0) * 3svh))
              rotate(calc((1 - var(--p1)) * -5deg))
              scale(calc(.97 + var(--p, 0) * .05));
  }
  .blatt[data-sorte="gruenzeug"] .buehne{
    transform:translateY(calc((1 - var(--p1)) * 8svh))
              scale(calc(.90 + var(--p, 0) * .10))
            rotate(calc(sin(calc(var(--p, 0) * 2.6rad)) * 1.3deg));
  }
  .blatt[data-sorte="rotlicht"] .buehne{
    transform:translateY(calc((1 - var(--p1)) * 30svh))
              scale(calc(1 + (
                var(--hitA) * (1 - var(--hitA)) +
                var(--hitB) * (1 - var(--hitB)) +
                var(--hitC) * (1 - var(--hitC))) * .16));
  }
  .blatt[data-sorte="goldrausch"] .buehne{
    transform:translateY(calc((1 - var(--p1)) * 30svh))
              translateX(calc(var(--kipp) * 3svh))
              rotate(calc(var(--kipp) * -9deg));
  }

  /* Skala mobil: lesbar — Zeilen laufen als Messlinien übers Glas hinaus */
  .zeile{ left:12cqw; right:6cqw; font-size:6.4cqw; letter-spacing:.02em; }
  .zeile__name{ overflow:hidden; text-overflow:ellipsis; min-width:0; }
  /* die längste Zutat („schw. johannisbeere") passt mit einen Hauch engerer Schrift ganz */
  .zeile[data-frucht="johannisbeere"],
  .zeile[data-frucht="johannisbeere-rot"]{ font-size:5.6cqw; letter-spacing:0; }
  .zeile__wert{ font-size:5.6cqw; flex-shrink:0; }
  .zeile[aria-pressed="true"] .zeile__wert{ font-size:6.4cqw; }
  /* Marke und Sorte gleich groß — am Desktop sind es ebenfalls beide 10cqw.
     Die alten ungleichen Werte stammten aus der Zeit vor dem Etikett-System. */
  .buehne__marke, .buehne__sorte{ font-size:11cqw; }
  /* am Handy etwas weiter auseinander — bei 11cqw blieben sonst nur 2px Luft */
  .buehne__marke{ left:calc(50% - 13cqw); }
  .buehne__sorte{ left:calc(50% + 2cqw); }

  /* Aufklapper wird unten zum Blatt-Panel */
  .aufklapper[open] .aufklapper__inhalt{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:block; grid-template-rows:none;
    background:var(--s-tief); /* Rückfall für Browser ohne color-mix */
    background:color-mix(in srgb, var(--s-tief) 94%, #000 6%);
    border-top:1px solid color-mix(in srgb, var(--s) 55%, transparent);
    border-radius:1.2rem 1.2rem 0 0;
    padding:1rem 1.3rem calc(1.6rem + env(safe-area-inset-bottom));
    max-height:72svh; overflow-y:auto; overscroll-behavior:contain;
    box-shadow:0 -18px 50px rgba(0,0,0,.5);
  }
  .aufklapper[open] .aufklapper__innen{ overflow:visible; max-height:none; padding-right:0; }
  .schliessen{
    display:block; margin:0 0 .4rem auto;
    background:none; border:0; cursor:pointer;
    font-family:var(--font-mono); font-size:.72rem;
    letter-spacing:.2em; text-transform:lowercase;
    color:var(--s-hell); padding:.8rem .2rem .8rem 1rem; min-height:44px; /* Tippfläche */
  }
}

/* Sehr schmale Geräte */
@media (max-width:359px){
  .fl{ width:clamp(56px, 17vw, 72px); }
  .faecher{ height:calc(clamp(56px, 17vw, 72px) * 2.93); }
  .zeile{ font-size:4.8cqw; }
}

/* ============================================================
   REDUCED MOTION — ruhig, ungepinnt, Endzustand steht
   ============================================================ */
/* Quer-Handys & sehr niedrige Fenster: der Empfang komponiert sich über
   die HÖHE (svh) statt über die Breite — sonst stapeln sich Wort und Fächer */
@media (max-height:540px){
  .geist{
    top:38%; left:50%; width:auto;
    transform:translate(-50%,-50%) translateY(calc(var(--p, 0) * 78svh)) scaleX(calc(1 + var(--p, 0)*.1));
    font-size:min(13vw, 24svh); white-space:nowrap; text-align:left;
  }
  .geist__zeile{ display:inline; }
  .fl{ width:clamp(44px, 15svh, 96px); }
  .faecher{ bottom:5svh; height:calc(clamp(44px, 15svh, 96px) * 2.93); }
  .empfang__hinweis{ bottom:1.4svh; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .empfang, .blatt{ height:auto; }
  .empfang__pin, .blatt__pin{ position:relative; height:100svh; }
  /* Blätter stehen im fertig komponierten Zustand — keine Bewegung */
  .blatt{ --p:.75; --p1:1; --p2:1; --p3:1; }
  .blatt[data-sorte="rotlicht"]{ --hitA:1; --hitB:1; --hitC:1; }
  .blatt[data-sorte="goldrausch"]{ --kipp:.3; }
  /* Fächer steht sofort offen, ohne Auffahr-Animation */
  .fl{ animation:none; }
  .empfang__blende{ display:none; }
  /* Auch Atmen, Buchstaben-Steigen, Farb-Welle und Farb-Lichter stehen still */
  .buehne, .geist, .geist span, .auren i,
  .abbinder__anfrage, .fl img{ animation:none; }
  .auren{ opacity:1; }
  .fl img, .aufklapper__inhalt, .blatt__video video,
  .abbinder__cta, .sprung{ transition:none !important; }
  .blitz{ opacity:0; }
}