/* ===========================================================================
   Miami Nice — Design-System nach CI (Visual Guidelines V.01) im Layout des
   Prototyps vom 22.08.2026 (docs/miami-nice-prototype_1.html; vom Kunden am
   19.09.2026 als Vorlage bestätigt). Farbwerte aus den Farbflächen des CI-PDFs
   gesampelt — docs/REQUIREMENTS.md §2.1 und der Audit-Bericht docs/CI-CHECK.md.
   Geprüft auf: 320 px → Tablet → Desktop → große Screens, Landscape, Fokus,
   prefers-reduced-motion, Touch-Ziele ≥44 px, kein Querscrollen.

   Aufbau:  1 Tokens · 2 Schriften · 3 Basis · 4 Fokus · 5 Layout & Typografie ·
            6 Kopfzeile · 7 Age-Gate · 8 Social-Leiste · 9 Mitmach-Fenster · 10 Intro ·
            11 Hero · 12 Fotoband · 13 Knöpfe & Chips · 14 Sorten-Karten · 15 Laufband ·
            16 Niced-Crew-Kasten · 17 Countdown-Band · 18 Events · 19 Niced Universe ·
            20 Vibe-Check · 21 Newsletter-Kasten · 22 Fußzeile · 23 Song-Schalter ·
            24 Landscape — danach die Bausteine der Unterseiten (Sorten-Detail,
            Kontakt, Rechtsseiten, Einwilligung, News/Fotos, Umfrage, Auswertung,
            Shop), unverändert seit R1.4–R9.
   Nur Tokens aus Abschnitt 1 — keine neuen Farbwerte in den Bausteinen; Alphas
   der CI-Farben (rgba) sind erlaubt.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------- */
:root {
  /* --- Primary (CI §2.1) --- */
  --sand:      #FFFBE8;   /* Sand — Seitenhintergrund */
  --ink:       #1F1F1F;   /* Off Black — Text, dunkle Flächen */
  --teal:      #54C3BC;   /* Retro Teal */
  --aqua:      #6FEBE4;   /* Aqua */
  --pink:      #FF6B96;   /* Pink — Flächen, Text auf Off Black */

  /* --- Secondary „Batch 01“ (CI §2.1) --- */
  --peach:     #FFC3A3;
  --purple:    #8C3375;
  --lemon:     #FFEA8A;
  --green:     #166762;
  --offwhite:  #FFFBF9;   /* Off-White (CI S. 11) — helle Kartenflächen */
  --mint:      var(--aqua);   /* Name im Prototyp — dieselbe CI-Farbe „Aqua“ */

  /* --- Abgeleitete Werte (kein CI-Original, aus der Palette gerechnet) ---
     --pink-text: Pink erreicht auf Sand nur 2,6:1 und ist damit als Kleintext
     nicht lesbar (WCAG AA / BFSG). Für Text auf hellem Grund deshalb ein
     abgedunkeltes Pink (gleicher Farbton, 5,7:1). Flächen bleiben --pink.
     → Designer bitte bestätigen oder korrigierten Wert liefern (docs/CI-CHECK.md). */
  --pink-text: #C4155E;
  --muted:     #5D584A;                  /* Off Black in Sand aufgehellt — Text 2. Ebene, 6,9:1 */
  --line:      #EEE5C8;                  /* Sand abgedunkelt — Trennlinien */
  --sand-soft: rgba(255, 251, 232, .82); /* Sand gedimmt — Text auf Off Black */

  /* --- Fokus --- */
  --focus:       var(--pink-text);   /* auf hellem Grund */
  --focus-light: var(--aqua);        /* auf dunklem Grund */

  /* --- Abstandsskala (4-px-Raster) — überall statt Einzelwerten benutzen --- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --section-y: clamp(3rem, 8vw, 5rem);     /* vertikaler Sektionsabstand (Prototyp: 80 px) */
  --gutter:    clamp(1rem, 4vw, 1.5rem);   /* seitlicher Innenabstand (Prototyp: 24 px) */

  --radius:    14px;
  --radius-lg: 24px;    /* Karten (Prototyp) */
  --radius-xl: 28px;    /* große Kästen (Prototyp) */
  --container: 1200px;
  --tap:       44px;                 /* Mindestgröße interaktiver Flächen */
  --logo-x:    .7em;                 /* Logo-Clearspace = 1 X (CI §2.3) */
  --shadow-card: 0 14px 28px rgba(31, 31, 31, .2);
  --shadow-soft: 0 1px 0 rgba(31, 31, 31, .06);

  /* --- Typografie ---
     Brand-Font PP Nikkei Journal ist noch nicht lizenziert (REQUIREMENTS §2.2),
     CI-Fallback ist Helvetica/Arial. Der Stack nennt die Brand-Font bereits —
     sobald der @font-face-Block unten aktiv ist, greift sie automatisch.
     Die Schreibschrift (Prototyp: Google-Font „Sacramento“) ist self-hosted. */
  --font-system: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-brand:  "PP Nikkei Journal", var(--font-system);
  --font:        var(--font-brand);
  --font-script: "Sacramento", "Brush Script MT", cursive;
}

/* Große Screens: Inhaltsbreite mitwachsen lassen, damit die Seite ab ~1600 px
   nicht als schmaler Streifen in der Mitte klebt. */
@media (min-width: 1600px) {
  :root { --container: 1320px; }
}

/* ---------------------------------------------------------------------------
   2. Schriften — EINZIGE Stelle, an der Schriften eingehängt werden.
   Nur self-hosted, niemals Google Fonts o. ä. (DSGVO: keine externen Requests).
   --------------------------------------------------------------------------- */
/* Schreibschrift des Prototyps (SIL OFL, public/assets/fonts/README.md) */
@font-face {
  font-family: "Sacramento";
  src: url("/assets/fonts/Sacramento-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Brand-Font: sobald die kommerzielle Web-Lizenz von PP Nikkei Journal (Pangram
   Pangram) vorliegt:
     1. woff2-Dateien nach  public/assets/fonts/  legen:
          PPNikkeiJournal-Light.woff2     (300)
          PPNikkeiJournal-Regular.woff2   (400)
     2. den folgenden Block auskommentieren — mehr ist nicht nötig. */
/*
@font-face {
  font-family: "PP Nikkei Journal";
  src: url("/assets/fonts/PPNikkeiJournal-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Nikkei Journal";
  src: url("/assets/fonts/PPNikkeiJournal-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

/* ---------------------------------------------------------------------------
   3. Reset & Basis — flacher Sandgrund wie im Prototyp
   --------------------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  /* Sicherheitsnetz gegen Querscrollen, zusammen mit <body> (s. dort); `clip` statt `hidden`,
     sonst verliert die Sticky-Kopfzeile ihre Haftung. Ersetzt nicht das Abschneiden an der Quelle
     (`.vibe-marquee-clip`, Fotoband): am Wurzelelement wirkt `clip` wie `hidden` für
     den Viewport — der Überstand bliebe scrollbar, iOS Safari ließe die Seite seitlich wackeln. */
  overflow-x: clip;
}

/* Sprungziele nicht unter der Sticky-Kopfzeile verschwinden lassen (/#sorten …): mindestens 96 px wie bisher, sonst die
   gemessene Kopfzeile (--header-h, §10 Intro) + Luft. */
[id] { scroll-margin-top: max(96px, calc(var(--header-h) + var(--space-3))); }
/* Weich gescrollt wird nur mit .smooth-scroll an <html> (Inline-Skript im <head> von layout/site.php): ohne #anker in der Adresse
   sofort, mit #anker erst nach „load“ bei der ersten Eingabe (pointerdown/keydown). So geht der Sprung beim Laden zum #anker — und
   jedes Nachjustieren des Browsers, solange die Seite lädt — ohne Animation (Go-live-Test 29.10.2026: WebKit/iPhone ließ die animierte
   Fahrt von einer Unterseite nach /#merch ~27 px zu weit laufen, Karte unter der Kopfzeile), Menü-Klicks auf derselben Seite und der
   Intro-Pfeil gleiten. Die Zwischenlösung `html:not(:focus-within)` nahm ihnen in Chromium die Animation (der Fokus verlässt den Link
   beim Sprung). Ohne JavaScript nie weich — der Sprung landet trotzdem richtig. „Bewegung reduzieren“: nie weich (s. unten). */
@media (prefers-reduced-motion: no-preference) { html.smooth-scroll { scroll-behavior: smooth; } }

body {
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.5;
  overflow-wrap: break-word;   /* lange deutsche Komposita brechen statt zu überlaufen */
  -webkit-font-smoothing: antialiased;
  background: var(--sand);
  /* Sicherheitsnetz Teil 2: am <body> (kein Wurzelelement) nimmt `clip` den Überstand der Kinder aus dem scrollbaren
     Bereich, ohne <body> zum Scrollcontainer zu machen — Sticky-Kopfzeile und Sprungziele bleiben am Viewport.
     Safari < 16 kennt `clip` nicht und ignoriert die Angabe (kein `hidden`: das machte <body> zum Scrollcontainer). */
  overflow-x: clip;
}
/* Solange Age-Gate oder Mitmach-Fenster offen sind: Seite dahinter nicht scrollen */
body.gate-open, body.modal-open { overflow: hidden; }

/* Bewegungsreduktion global: deckt auch Transitions und Smooth-Scroll ab. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

img, svg { max-width: 100%; height: auto; display: block; } /* height:auto: next/image setzt width/height-Attribute */
a { color: inherit; }
button { font-family: inherit; cursor: pointer; border: 0; }

/* ---------------------------------------------------------------------------
   4. Fokus — jedes interaktive Element bekommt einen sichtbaren Ring.
   --------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
/* auf dunklen Flächen heller Ring */
.age-gate :focus-visible,
.intro :focus-visible,
.social-rail :focus-visible,
.uni-partner :focus-visible,
.countdown :focus-visible { outline-color: var(--focus-light); }
/* auf Pink-/Teal-Flächen der Off-Black-Ring (bester Kontrast) */
.crew-box :focus-visible,
.newsletter-box :focus-visible,
.vibe-marquee-wrap :focus-visible { outline-color: var(--ink); }

@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; }
}

/* Sprunglink für Tastatur-/Screenreader-Nutzung */
.skip-link {
  position: absolute; left: var(--gutter); top: -6rem; z-index: 200;
  padding: .7em 1.2em;
  background: var(--ink); color: var(--sand);
  border-radius: 0 0 12px 12px;
  font-weight: 700; text-decoration: none;
  transition: top .15s;
}
.skip-link:focus-visible { top: 0; color: var(--sand); outline-color: var(--focus-light); }
.skip-link:hover { color: var(--sand); }

/* Nur für Screenreader (z. B. „Frage 2 von 5“ neben den Punkten) */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   5. Layout-Helfer & Typografie (Prototyp: Sektion = 1200 px, 80 px oben/unten)
   --------------------------------------------------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container.narrow { max-width: 780px; }
.centered { text-align: center; }

h1, h2, h3, h4 { font-weight: 900; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: break-word; }
/* Unterkante wie .hero-headline im Prototyp: Bei Zeilenhöhe .98 ragen Unterlängen (g, j, y) über die
   Box hinaus — ohne Abstand stieß die Überschrift an die Subline darunter (Kundenfeedback #5, Kontakt). */
h1 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: .98; letter-spacing: -.035em; margin-bottom: var(--space-4); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: var(--space-4); }
h3 { font-size: 1.25rem; }

.section { padding: var(--section-y) 0; }
/* Sektionen, deren Inhalt ein eigener farbiger Kasten ist: weniger Außenabstand, der
   Kasten grenzt sich schon durch Farbe und Radius ab und hat selbst Innenabstand. */
.section-boxed { padding: var(--space-6) 0; }
@media (max-width: 900px) { .section-boxed { padding: var(--space-5) 0; } }

.section-eyebrow, .section-overline {
  display: block; margin-bottom: 12px;
  font-size: .9rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--purple);
}
@media (max-width: 600px) { .section-eyebrow, .section-overline { font-size: .82rem; letter-spacing: .15em; } }
h2.section-title { margin: 0 0 16px; }
.section-sub { opacity: .75; max-width: 560px; margin: 0 0 44px; font-size: 1rem; }
.section-text { color: var(--muted); max-width: 44rem; margin-bottom: var(--space-4); }

/* Logo-Regeln (CI §2.3): nie verzerren (height:auto + contain), nie kippen, nie mehrfarbig. */
.hero-mark img, .intro-logo, .age-gate__sun, .mq-mark img { height: auto; object-fit: contain; }

/* ---------------------------------------------------------------------------
   6. Kopfzeile — zentrierte Linkzeile, sticky, kein Logo (die Marke sitzt im Hero).
   Kein Ausklappmenü: auf schmalen Bildschirmen wird die Zeile kleiner und bricht um.
   --------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 251, 232, .9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(31, 31, 31, .08);
}
.site-header nav {
  max-width: var(--container); margin: 0 auto; padding: 4px var(--gutter);
  display: flex; align-items: center; justify-content: center;
}
.nav-links {
  --nav-gap: 28px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--nav-gap);
  list-style: none; margin: 0; padding: 0;
  font-size: .85rem; font-weight: 600;
}
.nav-links a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  text-decoration: none; position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 8px; width: 0; height: 2px;
  background: var(--teal); transition: width .2s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
/* Ein Menüpunkt mehr („Merch“, 27.10.2026): die Lücken werden stufenweise schmaler, damit die Kopfzeile so viele Zeilen
   behält wie vorher (768–1440: eine, 320–414: zwei — auch nach dem Shop-Start mit „Shop“) */
@media (max-width: 900px) { .nav-links { --nav-gap: var(--space-4); } }
@media (max-width: 720px) {
  .nav-links { --nav-gap: var(--space-3); font-size: .78rem; }
  .site-header nav { padding: 0 var(--gutter); }
}
@media (max-width: 400px) { .nav-links { --nav-gap: var(--space-2); font-size: .72rem; } }

/* Shop-Symbol (R14.10, Kundenwunsch 29.10.2026): Einkaufstasche am rechten Ende der Kopfzeile, Tippfläche --tap, die Glyphe
   (24 px) ab 901 px auf der Linie des Seitenrands (--gutter), darunter ~14 px vom Rand. Nur mit .site-header--shop (= es gibt ein
   Symbol) — ohne bleibt alles wie oben. Die Zeilenzahl bleibt bei 320/390/768/1024/1280/1440 in Stufe 2/3 (Messung
   test-results/r14-2026-10-29/r14-10/; 390 px Stufe 1 wird zweizeilig, docs/PROJECT.md):
   · ab 721 px Raster [frei | Menü | Symbol]: das Menü steht mittig, solange rechts Platz ist, sonst rückt es nach links — nie
     unter das Symbol; bis 900 px dafür die Lücken eine Stufe schmaler (--space-3 statt --space-4).
   · bis 720 px (Menü in einer oder zwei Zeilen): Symbol oben rechts; ein unsichtbarer Platzhalter (float) kürzt nur die erste
     Menüzeile, die zweite behält die volle Breite. Die Punkte stehen dafür als Inline-Blöcke (gleiche Lücken, gleiche Umbrüche). */
.site-header--shop { --shop-inset: calc((var(--tap) - 24px) / 2); }
.site-header__shop {
  display: flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); border-radius: 50%;
  color: var(--ink); text-decoration: none;
  transition: background .2s ease;
}
.site-header__shop svg { width: 24px; height: 24px; }
.site-header__shop:hover { background: var(--pink); }
.site-header__shop:focus-visible { outline-offset: -3px; } /* Ring im Kreis — am Handy (oben bündig, 4 px vom Rand) bleibt er ganz im Bild */
@media (min-width: 721px) {
  .site-header--shop {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(var(--tap), 1fr); align-items: center;
    padding: 0 calc(var(--gutter) - var(--shop-inset));
  }
  .site-header--shop nav { grid-column: 2; margin: 0; padding: 4px var(--shop-inset); }
  .site-header--shop .site-header__shop { grid-column: 3; justify-self: end; }
}
@media (min-width: 721px) and (max-width: 900px) {
  .site-header--shop { padding: 0 var(--space-1); } /* Symbol 4 px vom Rand wie am Handy — Stufe 3 bleibt ab 721 px einzeilig */
  .site-header--shop .nav-links { --nav-gap: var(--space-3); }
}
@media (max-width: 720px) {
  /* Symbol 4 px vom Rand (Glyphe ~14 px), Platzhalter = was das Symbol über den Seitenrand hinaus braucht (32 px bei 320, 24 px ab 600) */
  .site-header--shop .site-header__shop { position: absolute; top: 0; right: var(--space-1); }
  .site-header--shop .nav-links { display: block; text-align: center; margin: 0 calc(var(--nav-gap) / -2); }
  .site-header--shop .nav-links li { display: inline-block; vertical-align: top; margin: 0 calc(var(--nav-gap) / 2); }
  .site-header--shop .nav-links::before { content: ""; float: right; width: calc(var(--tap) + var(--space-1) - var(--gutter)); height: var(--tap); }
}

/* ---------------------------------------------------------------------------
   7. Age-Gate — dunkler, weichgezeichneter Vorhang über der Seite (Prototyp),
   darin Retro-Sonne, Frage, Zeilen, das Geburtsdatum (R1.6) und der pinke Knopf.
   --------------------------------------------------------------------------- */
.age-gate {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 31, 31, .62); backdrop-filter: blur(3px);
  color: var(--sand); text-align: center;
  padding: var(--space-5);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 1; transition: opacity .25s;
}
.age-gate.closing { opacity: 0; pointer-events: none; }
.age-gate__card { max-width: 520px; width: 100%; margin: auto; text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }
.age-gate__sun {
  width: min(460px, 84vw); margin: 0 auto 28px;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .4));
}
.age-gate__card h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); margin: 0 0 12px; letter-spacing: -.02em; color: var(--sand); }
.age-gate__lines { margin: 0; opacity: .85; font-size: 1rem; }
.age-gate__lines span { display: block; line-height: 1.55; }
.age-gate__dob {
  display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: var(--space-2);
  max-width: 300px; margin: 30px auto 16px;
}
.age-gate__dob input {
  width: 100%; min-width: 0; min-height: var(--tap);
  padding: .7em .4em; text-align: center;
  font: inherit; font-size: 1.15rem; font-weight: 600;
  border: 1.5px solid rgba(255, 251, 232, .45); border-radius: 12px;
  background: rgba(255, 251, 232, .12); color: var(--sand); text-shadow: none;
}
.age-gate__dob input::placeholder { color: rgba(255, 251, 232, .55); }
.age-gate__dob input:focus { outline: 3px solid var(--aqua); outline-offset: 2px; border-color: var(--aqua); }
.age-gate__actions { margin: var(--space-4) 0 0; }
/* Meldung bleibt als Live-Region im DOM (role="alert"), nimmt leer aber keinen Platz. */
.age-gate__error { display: block; margin-top: var(--space-4); font-weight: 700; color: var(--lemon); text-shadow: none; }
.age-gate__error:empty { margin: 0; height: 0; }
.age-gate__legal { font-size: .72rem; line-height: 1.5; opacity: .6; margin: 30px auto 0; max-width: 400px; text-shadow: none; }
.age-gate__legal a { color: inherit; text-decoration: underline; }
.age-gate__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 var(--space-2);
  font: inherit; font-weight: 700; color: var(--sand);
  background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.age-gate__card h2:focus { outline: none; }
.age-gate__card h2:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   8. Social-Leiste — fest am rechten Rand, erscheint erst nach den Sorten
   (rendert nur, wenn in den Site-Einstellungen Profile gepflegt sind).
   --------------------------------------------------------------------------- */
.social-rail {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease;
}
.social-rail.visible { opacity: 1; visibility: visible; }
.social-rail-label {
  writing-mode: vertical-rl;
  font-size: .62rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink); opacity: .45; margin-bottom: 2px;
}
.social-rail-line { width: 1px; height: 26px; background: rgba(31, 31, 31, .25); margin-bottom: 4px; }
.social-rail-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--sand);
  transition: background .2s ease, transform .2s ease;
}
.social-rail-btn:hover { background: var(--pink); color: var(--ink); transform: scale(1.1); }
.social-rail-btn svg { width: 18px; height: 18px; }
@media (max-width: 1100px) { .social-rail { display: none; } }

/* ---------------------------------------------------------------------------
   9. Mitmach-Fenster „Post it, tag us, done“ (Niced Crew)
   --------------------------------------------------------------------------- */
.crew-modal {
  position: fixed; inset: 0; z-index: 998;
  background: rgba(31, 31, 31, .72); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  overflow-y: auto; overscroll-behavior: contain;
}
.crew-modal__card {
  background: var(--sand); color: var(--ink);
  border-radius: var(--radius-lg); max-width: 420px; width: 100%;
  padding: 36px 32px 28px; position: relative;
  max-height: 90vh; overflow-y: auto;
  animation: modalpop .22s ease-out;
}
@keyframes modalpop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.crew-modal__close {
  position: absolute; top: 6px; right: 8px;
  width: var(--tap); height: var(--tap);
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; font-size: 1.6rem; line-height: 1;
  color: var(--ink); opacity: .55; cursor: pointer;
}
.crew-modal__close:hover { opacity: 1; }
.crew-modal__card h3 { font-size: 1.5rem; margin: 2px 0 8px; letter-spacing: -.01em; }
.crew-modal__intro { opacity: .72; font-size: .88rem; margin: 0 0 24px; line-height: 1.5; }
.crew-modal__btns { display: flex; flex-direction: column; gap: 10px; }
.crew-modal__btn {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--tap); padding: 15px 18px; border-radius: var(--radius);
  text-decoration: none; transition: transform .2s ease;
}
.crew-modal__btn:hover { transform: translateY(-2px); }
.crew-modal__btn--instagram { background: var(--pink); color: var(--ink); }
.crew-modal__btn--tiktok { background: var(--ink); color: var(--sand); }
.crew-modal__btn--snapchat { background: var(--lemon); color: var(--ink); }
.crew-modal__btn--youtube { background: var(--aqua); color: var(--ink); }
.crew-modal__name { font-weight: 900; font-size: 1rem; }
.crew-modal__handle { font-size: .82rem; opacity: .7; }
.crew-modal__fine { font-size: .74rem; opacity: .7; margin: 20px 0 0; text-align: center; line-height: 1.7; }
.crew-hashtag {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--purple); font-weight: 800;
  border-bottom: 1px dashed rgba(140, 51, 117, .45);
}
.crew-hashtag:hover { border-bottom-style: solid; }

/* ---------------------------------------------------------------------------
   10. Intro — bildschirmfüllendes Video (unscharf als Fläche dahinter, scharf
   eingepasst davor), Wortmarke, drei Zeilen, Knopf, Scroll-Pfeil (R1.3: stumm,
   Ton nur auf Klick; bei „Bewegung reduzieren“ bleibt es beim Poster).
   --------------------------------------------------------------------------- */
/* Das Intro füllt den Bildschirm UNTER der klebenden Kopfzeile (Go-live-Test 29.10.2026: mit 100svh lag der untere Rand samt Pfeil
   „Rein ins Niced Universe“ und „Pause“/„Ton an“ unter dem Bildrand — 1280×800 y 762–817, iPhone 13 674–724 bei 664 px). --header-h =
   Höhe der Kopfzeile: gemessen vom Inline-Skript direkt hinter </header> (layout/site.php, ResizeObserver), als Stil an <html>. Die Werte
   hier gelten nur ohne JavaScript bzw. ohne Kopfzeile: ab 721 px eine Zeile (53 px), darunter bis zu zwei (89 px) — einzeilig ist sie
   dort 45 px hoch (Chromium 30.10.2026: 466–720 px in Stufe 1, 621–720 px in Stufe 2, 664–720 px in Stufe 3; ohne Skript wäre das Intro
   dann 44 px zu kurz).
   #hero landet nach dem Pfeil genau unter der Kopfzeile. */
:root { --header-h: 53px; }
@media (max-width: 720px) { :root { --header-h: 89px; } }
#hero { scroll-margin-top: var(--header-h); }
.intro {
  position: relative;
  width: 100%; height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); min-height: 560px;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.intro-video-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(40px) brightness(.55) saturate(1.15);
  transform: scale(1.2);
  z-index: 0; opacity: 0;
  animation: videoFadeIn 1.1s ease .1s forwards;
}
.intro-video__el {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  z-index: 1; opacity: 0;
  animation: videoFadeIn 1.1s ease .1s forwards;
}
@keyframes videoFadeIn { to { opacity: 1; } }
.intro-scrim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(31, 31, 31, .35) 0%, rgba(31, 31, 31, .15) 40%, rgba(31, 31, 31, .7) 100%);
}
.intro-content { position: relative; z-index: 3; text-align: center; color: var(--sand); transform: translateY(-48px); padding: 0 var(--gutter); }
/* Wortmarke, Zeilen, Knopf und Pfeil bleiben unsichtbar, bis das Intro „frei“ ist (.intro--go:
   gesetzt vom Client, sobald die Altersabfrage zu ist). Die Animationen entstehen erst mit der
   Klasse — ein Pausieren/Fortsetzen über die Altersabfrage hinweg ließ Chromium die Animation
   ohne Startzeit hängen (Beobachtung 20.09.2026). */
.intro-logo {
  width: min(460px, 84vw); margin: 0 auto;
  opacity: 0; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .45));
}
.intro--go .intro-logo { animation: logoOverlayFadeIn 1.4s ease .6s forwards; }
@keyframes logoOverlayFadeIn { to { opacity: 1; } }
/* Lesbarkeit der drei Zeilen über hellen Videobildern (Go-live 30.10.2026): weicher Off-Black-Schleier nur hinter dem Textblock
   (blendet mit den Zeilen ein, das Video bleibt drumherum und durchscheinend sichtbar) + Saum um die Buchstaben. Gemessen im Ring
   3 px um die Glyphen, 16 Videobilder + reines Sand/Weiß, iPhone 13 und 1280×800: groß/klein/Pink ≥ 3 / 4,5 / 3:1 — vorher bis 1,8 /
   1,7 / 1,3:1. Die Pink-Zeile ist mindestens 1,2rem (19,2 px, fett = große Schrift, 3:1); 1,1rem (17,6 px) wäre Kleintext (4,5:1). */
.intro-launch-line { position: relative; margin-top: 18px; color: var(--sand); opacity: 0; }
.intro-launch-line::before {
  content: ""; position: absolute; z-index: -1; inset: -44px -80px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(31, 31, 31, .72) 0%, rgba(31, 31, 31, .66) 62%, rgba(31, 31, 31, 0) 100%);
}
.intro--go .intro-launch-line { animation: introFadeUp .7s ease 1.6s forwards; }
.intro-line-big {
  display: block; font-weight: 900;
  font-size: clamp(1.5rem, 4.5vw, 2.4rem); letter-spacing: -.03em; line-height: 1;
  text-shadow: 0 0 2px rgba(31, 31, 31, .8), 0 0 12px rgba(31, 31, 31, .6);
}
.intro-line-small {
  display: block; margin-top: 10px; font-size: 1rem; font-weight: 600; opacity: .85;
  text-shadow: 0 0 2px rgba(31, 31, 31, .9), 0 0 6px rgba(31, 31, 31, .85), 0 0 14px rgba(31, 31, 31, .6);
}
.intro-line-punch {
  display: block; margin-top: 6px; font-weight: 900;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem); letter-spacing: -.02em; color: var(--pink);
  /* dunkler Saum um die Buchstaben (Pink selbst bleibt): gegen den Saum (Off Black) 6,1:1 */
  text-shadow: 0 0 1px rgba(31, 31, 31, 1), 0 0 2px rgba(31, 31, 31, 1), 0 0 4px rgba(31, 31, 31, 1),
    0 0 8px rgba(31, 31, 31, .9), 0 0 8px rgba(31, 31, 31, .9), 0 0 14px rgba(31, 31, 31, .7);
}
.intro-cta { margin-top: 22px; opacity: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.intro--go .intro-cta { animation: introFadeUp .6s ease 1.6s forwards; }
@keyframes introFadeUp { to { opacity: 1; transform: translateY(0) scale(1); } }
/* Eigene Variante für zentrierte Elemente (left:50% + translateX): die X-Verschiebung muss
   in jedem Frame erhalten bleiben, sonst springt es kurz zur Seite. */
@keyframes introFadeUpCentered { to { opacity: 1; transform: translate(-50%, 0); } }
.intro-scroll-cue {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-height: var(--tap); color: var(--sand); text-decoration: none; opacity: 0;
}
.intro--go .intro-scroll-cue { animation: introFadeUpCentered .6s ease 2.6s forwards, bounce 1.6s ease 3.2s infinite; }
.intro-scroll-cue span {
  font-weight: 900; font-size: clamp(.85rem, 2.6vw, 1.05rem); letter-spacing: -.01em; white-space: nowrap;
  /* Saum wie bei den Zeilen oben: der Pfeiltext steht am Desktop über dem unteren Videorand (über Weiß ≥ 4,5:1, Go-live 30.10.2026) */
  text-shadow: 0 0 2px rgba(31, 31, 31, .9), 0 0 8px rgba(31, 31, 31, .9), 0 0 8px rgba(31, 31, 31, .8), 0 2px 14px rgba(31, 31, 31, .6);
}
.intro-scroll-cue svg { width: 22px; height: 22px; }
/* Zu wenig Höhe für Logo, Zeilen, Knopf UND Pfeil (gemessen je Breite: sonst berührt/überdeckt der Pfeil den Knopf „Oder direkt
   zum Nachschub“ oder läge unter dem Bildrand, z. B. 1280×620, 600×700, 320×568, quer gehaltene Handys) — dann kein Pfeil; vorher lag
   er dort ohnehin unter dem Bildrand. Wischen/Scrollen geht immer. */
@media (min-width: 721px) and (max-height: 639px), (min-width: 601px) and (max-width: 720px) and (max-height: 659px), (min-width: 431px) and (max-width: 600px) and (max-height: 719px), (max-width: 430px) and (max-height: 599px) {
  .intro-scroll-cue { display: none; }
}
/* Schmal (bis 600 px): „Pause“/„Ton an“ (rechts unten) lägen unter dem mittigen Pfeil — der Pfeil steht darüber, der Abspiel-Knopf
   (Klick-Modus, „Bewegung reduzieren“) dafür unten, wo danach „Pause“/„Ton an“ erscheinen (beide sind nie gleichzeitig sichtbar). */
@media (max-width: 600px) {
  .intro-scroll-cue { bottom: calc(var(--space-3) + var(--tap) + var(--space-4)); }
  .intro .intro-video__play { bottom: var(--space-3); white-space: nowrap; } /* left: 50% ließ ihn sonst auf halbe Breite umbrechen (zwei Zeilen, höher) */
}
/* Desktop mit wenig Höhe (601 px breit und mehr, unter 760 px hoch; Prüfung 30.10.2026): der Abspiel-Knopf (Klick-Modus,
   „Bewegung reduzieren“) läge auf „Oder direkt zum Nachschub“ — bis zum Klick steht er dann auf dem Platz des Pfeils, der Pfeil
   ruht so lange (intro--wait setzt site.js, solange der Knopf sichtbar ist). */
@media (min-width: 601px) and (max-height: 759px) {
  .intro--wait .intro-scroll-cue { display: none; }
  .intro--wait .intro-video__play { bottom: 36px; }
}
@keyframes bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) {
  .intro-video-bg, .intro-video__el, .intro-logo, .intro-launch-line, .intro-cta, .intro-scroll-cue { opacity: 1; animation: none; transform: none; }
  .intro-scroll-cue { transform: translateX(-50%); }
}
/* Klick-Modus: bis zum Klick nur Poster + Abspiel-Knopf (Ton startet nie von selbst) */
.intro-video__play {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 4;
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap); padding: 0 var(--space-5) 0 var(--space-2);
  border: 0; border-radius: 100px; background: rgba(255, 251, 232, .93); color: var(--ink);
  font: inherit; font-weight: 700; cursor: pointer;
}
.intro-video__play:hover { background: var(--pink); }
.intro-video__play-icon { position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--pink); }
.intro-video__play-icon::before {
  content: ""; position: absolute; top: 50%; left: 56%; transform: translate(-50%, -50%);
  border-left: 11px solid var(--ink); border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
/* Kleine Steuerung unten rechts: Abspielen/Pause und „Ton an“ (R1.3) */
.intro-video__controls {
  position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 4;
  display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end;
}
.intro-video__ctrl {
  display: inline-flex; align-items: center;
  min-height: var(--tap); padding: 0 var(--space-4);
  border: 0; border-radius: 100px;
  background: rgba(255, 251, 232, .93); color: var(--ink);
  font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer;
}
.intro-video__ctrl:hover { background: var(--pink); }

/* ---------------------------------------------------------------------------
   11. Hero — links Marke + Headline + Text + Knopf, rechts die drei Dosen mit Fakten.
   --------------------------------------------------------------------------- */
.hero {
  max-width: var(--container); margin: 0 auto; padding: 26px var(--gutter) 30px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 56px);
  /* unten bündig: Knopf links und Fakten-Chips rechts enden auf gleicher Höhe */
  align-items: end;
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 22px; text-align: center; padding: 16px var(--gutter) 24px; align-items: stretch; }
}
.hero-mark {
  width: min(280px, 64vw); margin: 0 0 22px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.hero-mark-sun { width: 100%; } /* so breit wie der Schriftzug darunter (Kunde, 14.10.2026) */
.hero-mark-word { width: 100%; }
@media (max-width: 900px) { .hero-mark { margin: 0 auto 14px; width: min(230px, 58vw); } }
.hero-headline { margin: 0 0 14px; color: var(--ink); }
.hero-headline em { font-style: normal; color: var(--pink-text); } /* Kontrast (Go-live 29.10.2026): Pink auf Sand nur 2,6:1 — --pink-text 5,6:1 */
.hero-sub { font-size: 1.02rem; line-height: 1.5; margin: 0 0 22px; opacity: .75; max-width: 430px; }
@media (max-width: 900px) { .hero-sub { margin: 0 auto 18px; } }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 900px) { .hero-ctas { justify-content: center; } }
.hero-cans { text-align: center; }
.hero-can-photo {
  width: 100%; max-width: 520px; margin: 0 auto;
  filter: drop-shadow(0 18px 34px rgba(31, 31, 31, .22));
}
.hero-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.hero-facts li {
  background: var(--teal); color: var(--ink);
  font-size: .72rem; font-weight: 800; letter-spacing: .01em;
  padding: 7px 14px; border-radius: 100px;
  box-shadow: 0 3px 10px rgba(31, 31, 31, .1);
}
.hero-facts li.fact-germany {
  background: none; box-shadow: none; display: block; width: 100%;
  border-radius: 0; padding: 6px 8px 0;
  font-size: .78rem; font-weight: 600; line-height: 1.5; color: var(--muted); /* statt Deckkraft .7 — sonst „Made in Germany“ nur 3,6:1 */
}
.hero-facts li.fact-germany em { font-style: normal; color: var(--pink-text); font-weight: 900; }

/* ---------------------------------------------------------------------------
   12. Fotoband der Niced Crew (volle Breite, läuft; bei Berührung pausiert)
   --------------------------------------------------------------------------- */
.crew-river {
  position: relative; overflow: hidden;
  padding: 14px 0 10px; margin: 6px 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.crew-river-track { display: flex; width: max-content; gap: 18px; align-items: center; animation: riverScroll 42s linear infinite; }
.crew-river:hover .crew-river-track { animation-play-state: paused; }
.crew-river-item {
  width: 230px; flex-shrink: 0; aspect-ratio: 4 / 5;
  border-radius: 12px; overflow: hidden;
  border: 6px solid var(--sand);
  box-shadow: 0 14px 30px rgba(31, 31, 31, .2);
}
.crew-river-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crew-river-item:nth-child(4n+1) { transform: rotate(-2.5deg); }
.crew-river-item:nth-child(4n+2) { transform: rotate(1.8deg) translateY(-12px); }
.crew-river-item:nth-child(4n+3) { transform: rotate(-1.5deg) translateY(8px); }
.crew-river-item:nth-child(4n+4) { transform: rotate(2.6deg); }
@keyframes riverScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .crew-river-track { animation: none; } }
@media (max-width: 600px) { .crew-river-item { width: 160px; } }
.crew-river-note {
  text-align: center; font-size: 1.05rem; font-weight: 600; opacity: .8;
  max-width: 640px; margin: 22px auto 0; padding: 0 var(--gutter); line-height: 1.45;
}
@media (max-width: 600px) { .crew-river-note { font-size: .95rem; } }
.crew-river-cta { text-align: center; margin-top: 20px; padding: 0 var(--gutter); }

/* ---------------------------------------------------------------------------
   13. Knöpfe & Chips (Prototyp: Pille, 14/28 px, fett; Pink trägt Off Black — Sand auf
   Pink erreicht nur 2,6:1, docs/CI-CHECK.md)
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 14px 28px;
  border: 0; border-radius: 100px;
  background: var(--ink); color: var(--sand);
  font: inherit; font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .15s, color .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn--pink { background: var(--pink); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(31, 31, 31, .25); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--ghost-light { background: transparent; color: var(--sand); border: 1.5px solid rgba(255, 255, 255, .4); }
.btn--soon { background: rgba(31, 31, 31, .12); color: var(--muted); cursor: not-allowed; }
.btn--soon:hover { transform: none; }
.btn--sm { padding: .5em 1.3em; font-size: .9rem; }
.btn[disabled] { opacity: .7; cursor: progress; transform: none; }

.chip {
  display: inline-block; padding: 6px 14px;
  border-radius: 100px; font-size: .75rem; font-weight: 700;
  background: var(--aqua); color: var(--ink);
}
.chip--teal { background: var(--teal); }
.chip--lemon { background: var(--lemon); }
.chip--peach { background: var(--peach); }
.chip--age { background: var(--purple); color: var(--sand); }

/* ---------------------------------------------------------------------------
   14. Sorten-Karten — weiße Karte, freigestellte Dose, Name, zwei Zeilen, Vol.-Badge,
   Chips, Preisblock mit Pfand und Grundpreis, Knopf, 18+. Seit 27.10.2026 mit Name, Foto,
   Beschreibung und Preis aus Shopify (Shopify\FlavourCards); ohne Nährwerte.
   --------------------------------------------------------------------------- */
.flavour-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .flavour-grid { grid-template-columns: 1fr; } }
/* Abstände als margin-top (14px zwischen den Zeilen, 4px vor der zweiten Zeile, 12px im Kaufblock) statt gap: so gelten sie
   gleich in der Spalte (Ersatz ohne Subgrid) und im Subgrid unten, und eine Zeile, die keine Karte füllt, kostet keinen Platz. */
.flavour-card {
  background: var(--offwhite); color: var(--ink);
  border-radius: var(--radius-lg); padding: 28px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
}
.flavour-card > :is(.flavour-name, .flavour-text, .abv-badge, .flavour-specs, .flavour-buy, .age-badge) { margin-top: 14px; }
.flavour-card:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(31, 31, 31, .1); }
/* Ziel des Vibe-Check-Knopfs „Deine Dose ansehen“: kurz pink umrandet */
.flavour-card.card-highlight { box-shadow: 0 0 0 3px var(--pink), 0 16px 30px rgba(31, 31, 31, .14); }
.flavour-card__media { position: relative; }
.flavour-card__photo { display: block; text-decoration: none; }
/* „Ausverkauft“ wie im Shopify-Shop: Etikett oben links auf dem Foto (Shopify verkauft kein Gebinde) */
.flavour-badge {
  position: absolute; left: 0; top: 0;
  background: var(--ink); color: var(--sand); font-size: .72rem; font-weight: 800;
  padding: 4px 12px; border-radius: 100px; letter-spacing: .02em;
}
.can-photo {
  width: auto; height: 190px; margin: 0 auto 4px; display: block;
  filter: drop-shadow(0 12px 22px rgba(31, 31, 31, .2));
  transition: transform .35s cubic-bezier(.2, .9, .3, 1);
}
.flavour-card:hover .can-photo { transform: translateY(-8px) scale(1.04); }
.flavour-name { font-weight: 900; font-size: 1.3rem; text-align: center; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.flavour-name a { text-decoration: none; }
.flavour-name a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Beschreibung + zweite Zeile: ohne Subgrid ein Block, der den freien Platz nimmt — Badge, Chips, Preis und Knopf stehen
   dann wenigstens von unten bündig; mindestens drei Zeilen hoch wie bisher */
.flavour-text { flex: 1 0 auto; display: flex; flex-direction: column; min-height: calc(.9rem * 4.6); }
.flavour-desc, .flavour-line { font-size: .9rem; opacity: .75; text-align: center; margin: 0; }
.flavour-line { margin-top: 4px; font-weight: 600; opacity: .675; } /* .75 × .9 — wie bisher in der Beschreibung verschachtelt */
.abv-badge {
  align-self: center; font-weight: 900; font-size: .85rem;
  background: var(--ink); color: var(--sand); padding: 4px 12px; border-radius: 100px;
}
.flavour-specs {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-content: center;
  font-size: .68rem; font-weight: 700; min-height: 62px;
}
.spec { background: var(--sand); padding: 4px 10px; border-radius: 100px; }

.flavour-buy {
  padding-top: 16px;
  border-top: 1px solid rgba(31, 31, 31, .1);
  display: flex; flex-direction: column; align-items: center;
}
.flavour-buy > :is(.variants, .flavour-card__cta) { margin-top: 12px; }
.flavour-price { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.flavour-price .price { font-weight: 900; font-size: 1.6rem; letter-spacing: -.02em; }
.flavour-price .price-unit { font-size: .72rem; opacity: .7; }
/* Pflichtangaben (R2): Vorlage „Preis-Hinweis“ — Pfand als eigene, fette Angabe, nie in den Preis eingerechnet */
.flavour-price .price-note { font-size: .74rem; max-width: 34ch; }
.flavour-price .price-note > span { white-space: nowrap; } /* umbrechen nur zwischen den Angaben, nie mitten in „zzgl. 0,25 € Pfand“ */
.flavour-price .price-pfand { font-weight: 800; }
.flavour-price .price-base { font-size: .68rem; color: var(--muted); margin-top: 2px; }
.flavour-card .variants--compact { width: 100%; }
.flavour-card__cta { width: 100%; }
.age-badge { text-align: center; font-size: .65rem; font-weight: 700; opacity: .7; }
/* Alkoholfrei hat keinen 18+-Hinweis: leere Zeile gleicher Höhe (aria-hidden), damit jede Karte dieselben Zeilen hat */
.age-badge--none { visibility: hidden; }

/* Gleiche Höhen über die Karten einer Reihe (Nutzer 28.10.2026: „die ‚x % Vol.‘-Labels müssen auf derselben Höhe sein“):
   Jede Karte belegt zehn Zeilen des Rasters und übernimmt sie als Subgrid — Foto, Name, Beschreibung, zweite Zeile, Vol.-Badge,
   Chips, Preis, Gebinde (nur /shop), Knopf, 18+. Jede Zeile ist so hoch wie ihr höchster Inhalt in der Reihe; fehlt einer
   Karte ein Teil (z. B. keine zweite Zeile), bleibt seine Zeile frei statt die folgenden hochzuziehen. Gilt für Raster und
   Karussell (php.css), auf dem Handy untereinander je Karte für sich. Ohne Subgrid (Safari < 16, Chrome < 117) bleibt die
   Spalte oben: Badge, Chips, Preis und Knopf stehen von unten bündig. */
@supports (grid-template-rows: subgrid) {
  .flavour-grid { row-gap: 0; }
  .flavour-grid:not(.is-carousel) > .flavour-card:nth-child(n + 4) { margin-top: 24px; } /* zweite Reihe (mehr als drei Karten) */
  @media (max-width: 900px) { .flavour-grid:not(.is-carousel) > .flavour-card:nth-child(n + 2) { margin-top: 24px; } }
  .flavour-grid > .flavour-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 10; row-gap: 0; }
  .flavour-text { display: contents; }
  .flavour-card__media { grid-row: 1; }
  .flavour-name { grid-row: 2; }
  .flavour-desc { grid-row: 3; margin-top: 14px; }
  .flavour-line { grid-row: 4; }
  .abv-badge { grid-row: 5; align-self: start; justify-self: center; }
  .flavour-specs { grid-row: 6; }
  .flavour-buy { grid-row: 7 / span 3; display: grid; grid-template-rows: subgrid; row-gap: 0; justify-items: center; align-items: start; }
  .flavour-price { grid-row: 1; }
  .flavour-buy > .variants { grid-row: 2; }
  .flavour-card__cta { grid-row: 3; }
  .age-badge { grid-row: 10; }
}

/* ---------------------------------------------------------------------------
   15. Laufband — türkis, leicht gekippt: Text ✦ Schriftzug ✦ Wortmarke
   --------------------------------------------------------------------------- */
/* Das um -1,2° gedrehte, volle Breite messende Band ragt mit seinen Ecken ~0,6 px über beide Ränder. Ohne Hülle war das
   scrollbarer Überstand (scrollWidth 391 bei 390 px): `overflow-x: clip` am <html> schneidet nur die Darstellung ab, iOS Safari
   ließ die Seite trotzdem seitlich verschieben und zurückfedern (27.10.2026). Die Hülle schneidet nur waagrecht ab —
   `clip` statt `hidden`: senkrecht bleiben Kippung und Schatten sichtbar, kein eigener Scrollbereich, keine neue
   Formatierung (die Außenabstände des Bands fallen weiter durch die Hülle zusammen), Stapelung unverändert. */
.vibe-marquee-clip { overflow-x: clip; }
.vibe-marquee-wrap {
  background: var(--teal); overflow: hidden;
  padding: 16px 0; transform: rotate(-1.2deg);
  margin: 26px 0 46px; position: relative; z-index: 3;
  box-shadow: 0 8px 24px rgba(31, 31, 31, .18);
  --mq-bleed: 4px;
}
/* R14.9 (29.10.2026): Laufband „mit Bug beim Scrollen“. Ursache 1 (aus dem Prototyp): der Zug (4× Text·Schriftzug·Wortmarke,
   2425 px beim Standardtext) lief um -50 % = 1212 px — ab 1213 px Fensterbreite stand am Ende jedes Zyklus rechts leeres Türkis
   (1280: bis 67 px, 1536: bis 324 px, 1920: bis 707 px, dann Sprung zurück). Jetzt zwei gleiche Hälften, jede mindestens
   100vw + 8 px breit, das Band läuft in 52 s um genau eine Hälfte: nie leer, Naht unsichtbar. Tempo = Hälftenbreite / 52 s:
   beim Standardtext bis ~2417 px Fensterbreite 46,6 px/s wie bisher; ab dort (100vw + 8 px > 2425 px) streckt `space-around`
   die Abstände und das Band läuft schneller (2560: ~49, 3840: ~74 px/s); ein längerer CMS-Text macht die Hälfte breiter und das
   Band ebenfalls schneller, ein kürzerer langsamer. Ursache 2: Kippung zieht die Ecken ein — unten links/oben rechts fehlten
   ~0,8 px (bei 125/150 % Windows-Skalierung eine helle Haarlinie am Rand). Mit `clip` ragt das Band 4 px über beide Ränder; die
   Hülle schneidet es ab (kein Querscrollen). Ohne `clip` (Safari < 16) bleibt es bündig. (Ursache 3, fehlende Logos beim ersten
   Scrollen: `loading=lazy` aus der PHP-Fassung, der Prototyp hatte die Logos eingebettet — jetzt `eager`, landing.php.) */
@supports (overflow-x: clip) { .vibe-marquee-wrap { margin-inline: calc(-1 * var(--mq-bleed)); } }
.vibe-marquee-track { display: flex; align-items: center; white-space: nowrap; width: max-content; animation: marqueeScroll 52s linear infinite; }
.vibe-marquee-half { display: flex; align-items: center; flex: none; justify-content: space-around; min-width: calc(100vw + 2 * var(--mq-bleed)); }
.vibe-marquee-track span { font-weight: 900; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .02em; padding: 0 22px; color: var(--ink); }
/* Trennsterne in Lemon – setzt sich von Teal und Pink gleichermaßen ab */
.vibe-marquee-track span.dot { color: var(--lemon); padding: 0 22px; }
.mq-mark { display: flex; align-items: center; padding: 0 22px; }
.mq-mark img { height: 26px; width: auto; }
.mq-mark--mn img { height: 34px; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .vibe-marquee-track { animation: none; } }

/* ---------------------------------------------------------------------------
   16. Niced-Crew-Kasten (pink) mit Pinnwand
   --------------------------------------------------------------------------- */
.crew-box {
  background: var(--pink); color: var(--ink); border-radius: var(--radius-xl);
  padding: 44px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center;
}
@media (max-width: 900px) { .crew-box { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; } }
#nicedcrew .section-eyebrow { margin-bottom: 16px; }
.crew-box h2 { color: var(--ink); margin: 0; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.02; letter-spacing: -.035em; }
.crew-box-sub { margin: 18px 0 0; font-size: 1.05rem; opacity: .82; }
.crew-box-btn { margin-top: 26px; }
.crew-pinboard { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 420px; margin: 0 auto; width: 100%; }
.pin {
  aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; padding: 8px 8px 22px;
  background: var(--sand); box-shadow: 0 12px 26px rgba(31, 31, 31, .22);
  transition: transform .35s cubic-bezier(.2, .9, .3, 1);
}
/* Foto absolut in den Rahmen (8 px / unten 22 px): WebKit (iPhone) rechnete height: 100% gegen die ganze Kachel statt den
   Innenraum — das Foto lag über dem weißen Streifen und der Instagram-Name darauf (Go-live 29.10.2026) */
.pin img { position: absolute; top: 8px; left: 8px; width: calc(100% - 16px); height: calc(100% - 30px); object-fit: cover; display: block; border-radius: 2px; }
/* Instagram-Name auf dem weißen Rand (nur wenn im CMS gepflegt) — liegt genau im unteren Rand (8 px / 22 px wie .pin) */
.pin { position: relative; }
.pin-tag {
  position: absolute; left: 8px; right: 8px; bottom: 0; height: 22px;
  font-size: .72rem; font-weight: 800; line-height: 22px; letter-spacing: .01em; text-align: center; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Ein Foto mit Link ist ein <a> — gleiche Optik, Fokusring in Off Black auf dem pinken Kasten */
a.pin { display: block; color: inherit; text-decoration: none; }
a.pin:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.pin-a { transform: rotate(-4deg); }
.pin-b { transform: rotate(3deg) translateY(-10px); }
.pin-c { transform: rotate(2.5deg) translateY(8px); }
.pin:not(.pin-empty):hover { transform: rotate(0deg) scale(1.05); }
.pin-empty {
  transform: rotate(-2deg);
  background: transparent; border: 2.5px dashed rgba(31, 31, 31, .4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; box-shadow: none; padding: 0; color: inherit; font: inherit;
}
.pin-plus { font-size: 2.4rem; font-weight: 900; line-height: 1; color: var(--ink); } /* Kontrast auf Pink 6,1:1 (vorher Alpha .5/.6: 2,5/3,0:1) */
.pin-label { font-size: .78rem; font-weight: 800; color: var(--ink); letter-spacing: .02em; }
.pin-empty:hover { transform: rotate(0deg) scale(1.05); border-color: var(--ink); background: rgba(255, 251, 232, .4); }
.pin-empty:hover .pin-plus, .pin-empty:hover .pin-label { color: var(--ink); }
/* Wechselnde Pinnwand (site.js, nur bei mehr als drei Fotos): das alte Foto liegt kurz als Kopie genau auf dem neuen und
   blendet aus, der neue Name blendet ein — Rahmen, Neigung und Größe bleiben, nichts verschiebt sich */
.pin img.pin-ghost { position: absolute; top: 8px; left: 8px; width: calc(100% - 16px); height: calc(100% - 30px); }
.pin-ghost { pointer-events: none; animation: pinFadeOut .9s ease forwards; }
.pin-swap > .pin-tag:not(.pin-ghost) { animation: pinFadeIn .9s ease both; }
@keyframes pinFadeOut { to { opacity: 0; } }
@keyframes pinFadeIn { from { opacity: 0; } }
/* Knopf „Fotowechsel anhalten“ (WCAG 2.2.2): eigene Zeile unter den Rahmen, überdeckt kein Foto */
.crew-pin-pause { grid-column: 1 / -1; justify-self: center; gap: var(--space-2); margin-top: var(--space-1); }
.crew-pin-pause[hidden] { display: none; }
.crew-pin-pause[aria-pressed="true"] { border-color: var(--ink); }

/* ---------------------------------------------------------------------------
   17. Countdown-Band (Events) — „Nächster Stop“, vier Zähler in Aqua, Notiz
   --------------------------------------------------------------------------- */
.countdown-band {
  background: var(--sand); color: var(--ink);
  border: 1.5px solid rgba(31, 31, 31, .12); border-radius: 20px;
  padding: 22px 24px; margin: 0 auto 34px;
  display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap;
}
.countdown-band-label { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--purple); }
.countdown { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.countdown .unit { background: var(--aqua); color: var(--ink); border-radius: 12px; padding: 8px 14px; min-width: 66px; text-align: center; position: relative; }
.countdown .unit .num { font-size: 1.5rem; font-weight: 900; display: block; font-variant-numeric: tabular-nums; }
.countdown .unit .lbl { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } /* 4,96:1 auf Aqua (vorher Deckkraft .6: 3,9:1) */
.countdown .unit.pulse .num { animation: numPulse .4s ease; }
@keyframes numPulse { 0% { transform: scale(1); } 35% { transform: scale(1.18); color: var(--pink-text); } 100% { transform: scale(1); } }
.countdown-band-note { font-size: .74rem; color: var(--muted); }
.countdown-band-done { font-weight: 900; font-size: 1.1rem; }
@media (max-width: 700px) { .countdown-band { gap: 14px; } .countdown-band-note { display: none; } }
/* Bis 400 px (320/360/375): alle vier Zähler in EINER Zeile — vorher stand „Sek“ allein in Zeile 2 (Go-live 29.10.2026) */
@media (max-width: 400px) {
  .countdown-band { padding: var(--space-4) var(--space-3); }
  .countdown { flex-wrap: nowrap; gap: var(--space-2); width: 100%; }
  .countdown .unit { flex: 1 1 0; min-width: 0; padding: var(--space-2) var(--space-1); }
  .countdown .unit .num { font-size: 1.3rem; }
}

/* ---------------------------------------------------------------------------
   18. Events — Liste mit Datumsblock, Art-Tag; vergangene als Aufklapper mit Galerie
   --------------------------------------------------------------------------- */
.event-list { list-style: none; padding: 0; margin: 0; max-width: 820px; }
.event-item { display: flex; align-items: center; gap: 20px; padding: 18px 4px; border-bottom: 1px solid rgba(31, 31, 31, .12); }
.event-item:first-child { border-top: 1px solid rgba(31, 31, 31, .12); }
.event-date { flex-shrink: 0; width: 62px; text-align: center; line-height: 1.05; }
.event-day { display: block; font-weight: 900; font-size: 1.7rem; letter-spacing: -.03em; }
.event-mon { display: block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--purple); }
.event-year { display: block; font-size: .62rem; color: var(--muted); margin-top: 1px; } /* Kontrast (Go-live 29.10.2026): --muted statt Deckkraft */
.event-body { flex: 1; min-width: 0; }
.event-name { font-size: 1.05rem; font-weight: 900; letter-spacing: -.01em; margin: 0; }
.event-meta { font-size: .85rem; color: var(--muted); margin: 2px 0 0; }
.event-desc { margin: var(--space-1) 0 0; font-size: .92rem; }
.event-desc + .event-desc { margin-top: var(--space-3); } /* Leerzeile im CMS-Text = neuer Absatz (View::paragraphs, 29.10.2026) */
.event-link { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.event-tag { flex-shrink: 0; font-size: .66rem; font-weight: 800; letter-spacing: .04em; padding: 6px 13px; border-radius: 100px; background: rgba(31, 31, 31, .08); white-space: nowrap; }
.event-tag--own { background: var(--pink); color: var(--ink); }
.event-tag--guest { background: var(--aqua); color: var(--ink); }
/* Leerer Stand („Termin folgt“): nur der Strich als Datum ist blass, der CMS-Text bleibt lesbar (Audit F12, 25.10.2026) */
.event-item-placeholder .event-date { opacity: .45; }

.event-past { margin-top: 34px; max-width: 820px; }
.event-past-head { font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } /* Kontrast: --muted statt opacity .45 (2,8:1 → 6,9:1) */
.event-thumb {
  position: relative; flex-shrink: 0; width: 62px; height: 62px;
  border-radius: 10px; overflow: hidden; display: block;
  box-shadow: 0 4px 12px rgba(31, 31, 31, .16); transition: transform .3s ease;
}
.event-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-thumb-count {
  position: absolute; right: 3px; bottom: 3px;
  background: var(--ink); color: var(--sand);
  font-size: .58rem; font-weight: 900; line-height: 1; padding: 3px 5px; border-radius: 100px;
}
/* Vergangene Events: die ganze Zeile ist ein Aufklapper (<details>, ohne JavaScript) */
.event-past-item { display: block; padding: 0; }
.event-past-row {
  width: 100%; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left; list-style: none;
  display: flex; align-items: center; gap: 20px; padding: 12px 4px;
  /* „War schon“ gedämpft über die Textfarbe (--muted), nicht mehr über opacity .8 auf der ganzen Zeile — die drückte das Datum/den
     Ort auf 4,2:1 und „Eigenes Event“ auf 3,9:1 (Go-live-Test 29.10.2026, WCAG 1.4.3); Etiketten behalten ihre Farbe */
  color: var(--muted); transition: color .2s ease;
}
.event-past-row::-webkit-details-marker { display: none; }
.event-past-row:hover { color: var(--ink); }
.event-past-row:hover .event-thumb { transform: scale(1.06); }
.event-past-row .event-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.event-past-row .event-name { font-size: .92rem; font-weight: 700; }
.event-past-row .event-meta { font-size: .8rem; margin-top: 2px; }
.event-past-row .event-day { font-size: 1.1rem; }
.event-caret { flex-shrink: 0; font-size: 1.1rem; font-weight: 900; color: var(--muted); transition: transform .3s ease; } /* Aufklapp-Zeichen: --muted statt opacity .4 (1,9:1) */
.event-past-item[open] .event-caret { transform: rotate(45deg); }
.event-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 16px 82px; }
.event-gallery img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block; box-shadow: 0 4px 12px rgba(31, 31, 31, .14); }
/* Fotos (27.10.2026): jedes Foto ist ein Link aufs große Foto — mit JS öffnet er das Foto-Fenster (partials/photo-viewer.php) */
.event-photo { display: block; border-radius: 8px; cursor: zoom-in; }
.event-cover-link { cursor: zoom-in; }
@media (prefers-reduced-motion: no-preference) {
  .event-gallery img, .event-cover { transition: transform .3s ease; }
  .event-photo:hover img, .event-cover-link:hover .event-cover { transform: scale(1.03); }
}
/* Kommende Events mit Titelbild/Galerie: Zeile oben ausrichten, Bilder unter dem Text (Seitenverhältnis bleibt). Die Breite
   des Titelbilds folgt aus dem Seitenverhältnis (--ar aus width/height): höchstens 480 px breit und 420 px hoch — so steht der
   Platz fest, bevor das Bild geladen ist (vorher width/height:auto ⇒ 0 × 0 und ein Sprung um bis zu 420 px) */
.event-item--media { align-items: flex-start; }
.event-cover-link { display: block; width: min(100%, 480px, calc(420px * var(--ar, 1))); margin-top: var(--space-3); border-radius: var(--radius); }
.event-cover { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 4px 12px rgba(31, 31, 31, .16); }
.event-gallery--upcoming { margin: var(--space-3) 0 0; max-width: 480px; }
@media (max-width: 600px) {
  /* Kommende Events: Datum und Kennzeichen in einer Zeile, der Text darunter in voller Breite — gleich mit und ohne
     Bild (Kundenfeedback V2-12 / R12.6.4; vorher teilten sich Datum, Text und das nicht umbrechende Kennzeichen eine Zeile) */
  .event-item { gap: 10px 14px; flex-wrap: wrap; align-items: center; }
  .event-date { width: 52px; order: 1; }
  .event-tag { order: 2; margin-left: auto; }
  .event-body { order: 3; flex: 1 1 100%; min-width: 100%; }
  .event-item--media { align-items: center; }
  .event-item-placeholder { flex-wrap: nowrap; } /* ohne Kennzeichen: Strich und Text in einer Zeile */
  .event-item-placeholder .event-body { flex: 1 1 auto; min-width: 0; }
  .event-past-row { flex-wrap: nowrap; }
  /* „War schon“: die Reihenfolge oben gilt nur kommenden Events — sonst stand „+“ bzw. das Kennzeichen zwischen Bild und Titel */
  .event-past-row > .event-date, .event-past-row > .event-body, .event-past-row > .event-tag { order: 0; }
  .event-gallery { margin-left: 0; }
}
/* Monatsauswahl über den kommenden Events (R14.8, partials/events.php + site.js): Pillen wie .btn--ghost, der gewählte Monat in
   Off Black. Die Leiste wischt in sich (overflow-x), die Seite scrollt nie seitlich; Innenabstand = Platz für Fokusring und Hover,
   der negative Rand hält die Knöpfe bündig mit der Liste. Ohne JS bleibt sie verborgen ([hidden]) und alle Events stehen da. */
.event-months { max-width: 820px; margin: 0 0 var(--space-4); }
.event-months-text { font-size: .85rem; color: var(--muted); margin: 0; }
.event-months-bar {
  display: flex; gap: var(--space-2);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--space-2); scrollbar-width: thin;
  padding: var(--space-2); margin: 0 calc(-1 * var(--space-2));
}
.event-months-btn {
  position: relative; /* hält das .sr-only (absolut) in der Leiste — sonst ragt es über den Rand und die Seite scrollt seitlich (WebKit) */
  flex: 0 0 auto; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap); padding: 0 var(--space-4);
  border: 1.5px solid rgba(31, 31, 31, .25); border-radius: 100px;
  background: transparent; color: var(--ink);
  font: inherit; font-size: .9rem; font-weight: 700; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.event-months-btn:hover { border-color: var(--ink); }
.event-months-btn[aria-pressed="true"] { background: var(--ink); color: var(--sand); border-color: var(--ink); }
.event-months-count {
  min-width: 1.6em; padding: 0 var(--space-1); border-radius: 100px;
  background: var(--aqua); color: var(--ink); font-size: .72rem; font-weight: 800; line-height: 1.6; text-align: center;
}
.event-list > .event-item[hidden] { display: none; }
/* der erste sichtbare Eintrag bekommt die obere Linie (sonst trägt sie nur das erste Kind, das ausgeblendet sein kann) */
.event-list > .event-item.is-first-shown { border-top: 1px solid rgba(31, 31, 31, .12); }
@media (forced-colors: active) { .event-months-btn[aria-pressed="true"] { border: 3px solid Highlight; } }

/* ---------------------------------------------------------------------------
   19. Niced Universe — drei Karten (Lemon/Aqua/Peach) und die Partner-Karte (Purple)
   --------------------------------------------------------------------------- */
.universe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .universe-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.uni-card { border-radius: 22px; padding: 28px 24px; display: flex; flex-direction: column; box-shadow: 0 12px 28px rgba(31, 31, 31, .1); }
.uni-sound { background: var(--lemon); color: var(--ink); }
.uni-filter { background: var(--aqua); color: var(--ink); }
.uni-merch { background: var(--peach); color: var(--ink); }
.uni-tag { font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } /* ≥ 4,5:1 auf Lemon/Aqua/Peach (Go-live 29.10.2026, vorher Deckkraft .6) */
.uni-partner .uni-tag, .uni-partner .uni-placeholder { color: var(--sand-soft); } /* auf Purple 5,3:1 */
.uni-title { font-size: 1.25rem; font-weight: 900; letter-spacing: -.02em; margin: 0 0 8px; line-height: 1.15; min-height: 2.3em; }
.uni-text { font-size: .9rem; opacity: .75; margin: 0 0 18px; line-height: 1.45; min-height: 2.9em; }
.uni-link { display: inline-flex; align-items: center; min-height: var(--tap); margin-top: auto; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* Soundtrack: Play-Knopf + tanzende Balken (Balken stehen still, solange nichts läuft) */
.uni-player { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.uni-play {
  width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--pink); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; padding-left: 2px;
  border: 0; cursor: pointer;
}
.uni-play[disabled] { opacity: .45; cursor: not-allowed; }
.uni-bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; flex: 1; }
.uni-bars span { flex: 1; background: var(--green); border-radius: 2px; height: 55%; }
.uni-player.is-playing .uni-bars span { animation: soundBar 1.1s ease-in-out infinite; }
.uni-bars span:nth-child(1), .uni-bars span:nth-child(10) { animation-delay: 0s; }
.uni-bars span:nth-child(2), .uni-bars span:nth-child(9) { animation-delay: .12s; }
.uni-bars span:nth-child(3), .uni-bars span:nth-child(8) { animation-delay: .24s; }
.uni-bars span:nth-child(4), .uni-bars span:nth-child(7) { animation-delay: .36s; }
.uni-bars span:nth-child(5) { animation-delay: .48s; }
.uni-bars span:nth-child(6) { animation-delay: .6s; }
@keyframes soundBar { 0%, 100% { height: 22%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .uni-bars span { animation: none; height: 55%; } }
.uni-lyric { font-family: var(--font-script); font-size: 1.5rem; color: var(--purple); margin: 16px 0 0; line-height: 1.1; }

/* Filter: Vorschau als Farbverlauf mit Retro-Sonne aus reinem CSS */
.uni-filter-preview {
  margin-top: auto; height: 120px; border-radius: 14px; overflow: hidden; position: relative;
  background: linear-gradient(180deg, var(--peach) 0%, var(--pink) 100%);
}
.uni-filter-sun {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 110px; height: 55px; border-radius: 110px 110px 0 0;
  background: repeating-linear-gradient(180deg, var(--sand) 0 6px, transparent 6px 9px), var(--sand);
  opacity: .85;
}

/* Merch — die beiden Bilder (und der Knopf darunter) führen in den Shop, sobald es ihn gibt */
.uni-merch-imgs { display: flex; gap: 10px; margin-top: auto; }
.uni-merch-imgs img { width: 50%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; box-shadow: 0 6px 16px rgba(31, 31, 31, .16); transition: transform .2s ease; }
a.uni-merch-imgs { text-decoration: none; }
a.uni-merch-imgs:hover img { transform: translateY(-3px); }
.uni-cta { margin-top: 14px; align-self: flex-start; }
.uni-placeholder { display: inline-block; margin-top: 12px; font-size: .7rem; font-weight: 800; letter-spacing: .04em; color: var(--muted); }
a.uni-placeholder { min-height: var(--tap); display: inline-flex; align-items: center; opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* Partner-Karte: volle Breite unter den drei Karten */
.uni-partner {
  background: var(--purple); color: var(--sand);
  margin: 22px auto 0;
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 28px; align-items: center;
  padding: 32px;
}
@media (max-width: 900px) { .uni-partner { grid-template-columns: 1fr; gap: 20px; text-align: center; } }
.uni-partner .uni-title { font-size: 1.5rem; min-height: 0; }
.uni-partner .uni-text { min-height: 0; }
.uni-partner-cta { margin-top: 16px; }
/* Logo-Kasten: nur, wenn ein Partner-Logo gesetzt ist — einen leeren Platzhalter gibt es nicht mehr (27.10.2026) */
.uni-partner-slot {
  border: 2.5px dashed rgba(255, 251, 232, .4); border-radius: 14px;
  min-height: 110px; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.uni-partner-slot img { max-height: 110px; width: auto; }
/* Ohne Logo und ohne aktive Partner (Aufruf „Kooperieren?“): Text links, Knopf als zweite Spalte rechts daneben — keine leere
   Spalte; schmal (≤ 900 px) untereinander und zentriert wie die übrige Karte, der Abstand kommt dann aus dem gap */
.uni-partner--solo { grid-template-columns: minmax(0, 1fr) auto; }
.uni-partner--solo .uni-text { margin-bottom: 0; }
.uni-partner--solo .uni-partner-cta { margin-top: 0; }
@media (max-width: 900px) { .uni-partner--solo { grid-template-columns: minmax(0, 1fr); } }

/* Partner-Kachel (R12.9.3, seit 27.10.2026 statt des Logo-Bands): sobald Partner aktiv sind (CMS → Partner), zeigt die Karte je
   Partner eine Folie mit dessen Kennzeichen, Titel, Text, Knopf und Logo (Link auf die Website). Alle Folien liegen im selben
   Rasterfeld: die Kachel ist so hoch wie die höchste Folie, beim Wechsel springt nichts. Sichtbar ist nur die Folie ohne
   aria-hidden (der Server zeigt die erste, site.js wechselt bei mehreren alle 7 s) — Überblenden in .6 s, bei „Bewegung
   reduzieren“ ohne Blende. Die Folie selbst hat das Raster der Karte (Text links, Logo rechts; schmal untereinander, zentriert). */
.uni-partner--tile { grid-template-columns: minmax(0, 1fr); gap: 0; }
.partner-slide {
  grid-area: 1 / 1; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 28px; align-items: center;
  transition: opacity .6s ease, visibility 0s;
}
.partner-slide[aria-hidden="true"] { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
@media (prefers-reduced-motion: reduce) { .partner-slide, .partner-slide[aria-hidden="true"] { transition: none; } }
@media (max-width: 900px) { .partner-slide { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.partner-slide-copy { min-width: 0; }
.partner-slide-copy .uni-text { margin-bottom: 0; }
/* Logo auf hellem Feld (jedes Logo lesbar, auch dunkle), feste Höhe, Breite aus dem Seitenverhältnis (width/height am <img>) */
.partner-logo {
  justify-self: center; display: flex; align-items: center; justify-content: center; max-width: 100%;
  padding: var(--space-4); background: var(--offwhite); border-radius: var(--radius-lg);
  box-shadow: 0 6px 16px rgba(31, 31, 31, .22); transition: transform .2s ease;
}
.partner-logo img { height: 128px; width: auto; max-width: min(100%, 280px); object-fit: contain; }
@media (max-width: 900px) { .partner-logo img { height: 104px; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .partner-logo:hover { transform: translateY(-3px); } }

/* ---------------------------------------------------------------------------
   20. Vibe-Check — weiße Schale, Fortschrittsbalken, Fragen, Story-Card
   --------------------------------------------------------------------------- */
.quiz-shell { background: var(--offwhite); border-radius: var(--radius-xl); padding: 36px; max-width: 640px; margin: 0 auto; box-shadow: var(--shadow-soft); }
@media (max-width: 480px) { .quiz-shell { padding: 24px 18px; } }
.quiz-progress { display: flex; gap: 6px; margin-bottom: 28px; }
.quiz-dot { flex: 1; height: 5px; border-radius: 100px; background: rgba(31, 31, 31, .1); }
.quiz-dot.active { background: var(--pink); }
.quiz-dot.done { background: var(--teal); }
.quiz-q { font-weight: 900; font-size: 1.25rem; margin-bottom: 20px; }
.quiz-options { display: flex; flex-direction: column; gap: 12px; }
.quiz-opt {
  text-align: left; background: var(--sand); color: var(--ink); border-radius: 14px; padding: 16px 18px;
  min-height: var(--tap); font: inherit; font-size: .95rem; font-weight: 600;
  transition: background .15s ease, transform .1s ease;
}
.quiz-opt:focus-visible { background: var(--aqua); transform: translateX(4px); }
/* Hover nur mit Maus und erst nach einer echten Mausbewegung (site.js nimmt `is-fresh` weg): sonst trägt der neue Button
   unter dem unbewegten Zeiger bzw. dem letzten Tipp-Punkt sofort die Farbe (Kundenfeedback V2-11 / R12.7.4) */
@media (hover: hover) { .quiz-options:not(.is-fresh) .quiz-opt:hover { background: var(--aqua); transform: translateX(4px); } }
.quiz-result { text-align: center; }
.result-card-canvas { border-radius: 20px; margin: 0 auto 20px; box-shadow: 0 20px 40px rgba(31, 31, 31, .15); max-width: 320px; width: 100%; height: auto; }
.quiz-result__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }
.quiz-restart {
  background: none; border: 0; padding: 0 var(--space-2); min-height: var(--tap);
  font: inherit; font-size: .85rem; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* ---------------------------------------------------------------------------
   21. Newsletter-Kasten (türkis) — Prototyp-Text mit Social-Links oder das
   Anmeldeformular (R3), je nach Betriebsart im CMS. Off Black auf Teal.
   --------------------------------------------------------------------------- */
.newsletter-box { background: var(--teal); color: var(--ink); border-radius: var(--radius-xl); padding: 48px; text-align: center; }
@media (max-width: 600px) { .newsletter-box { padding: 32px 20px; } }
.newsletter-box .section-eyebrow { color: var(--ink); } /* Purple auf Teal nur 3,5:1 — Off Black 7,8:1 (Go-live 29.10.2026) */
.newsletter-box h2 { color: var(--ink); }
.nonewsletter-text { opacity: .78; max-width: 520px; margin: 14px auto 0; line-height: 1.6; }
.nonewsletter-punch { font-weight: 900; font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: -.03em; margin: 22px 0 0; color: var(--ink); }
.nonewsletter-fine { max-width: 460px; margin: 16px auto 0; font-size: .92rem; line-height: 1.55; } /* ohne Deckkraft .7 (4,2:1) — 7,8:1 */
.nonewsletter-links { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; font-weight: 800; font-size: .95rem; }
.nonewsletter-links a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink); text-decoration: none; border-bottom: 2px solid rgba(31, 31, 31, .3); }
.nonewsletter-links a:hover { border-bottom-color: var(--ink); }
.nonewsletter-links span { opacity: .4; }

/* Anmeldeformular (R3) im türkisen Kasten */

/* ---------------------------------------------------------------------------
   22. Fußzeile — klein, zentriert, wie im Prototyp; alle Pflichtseiten (R4) dabei
   --------------------------------------------------------------------------- */
.site-footer { padding: 48px var(--gutter) 40px; text-align: center; font-size: .8rem; color: var(--muted); }
/* Platz für den festen Song-Schalter (unten rechts, --tap hoch, --gutter Abstand): die letzte Zeile der Fußzeile endet darüber,
   statt unter dem Knopf zu verschwinden (iPhone 390/375, Go-live 29.10.2026) */
body:has(.song-toggle) .site-footer { padding-bottom: calc(var(--tap) + 2 * var(--gutter)); }
.site-footer p { margin: 0; }
.footer-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 4px; }
.site-footer .footer-row a,
.site-footer .footer-link {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 8px; margin: 0;
  color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 3px;
  background: none; border: 0; cursor: pointer;
}
.site-footer .footer-row a:hover, .site-footer .footer-link:hover { color: var(--ink); }
.site-footer .nav-links { font-size: inherit; font-weight: 600; gap: 0 4px; }
.site-footer .nav-links a::after { display: none; }
.site-footer .social-links { justify-content: center; gap: 0 4px; }
.site-footer .social-links a { border: 0; padding: 0 8px; color: var(--muted); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .social-links a:hover { background: none; color: var(--ink); }
.site-footer .footer-age { margin-top: 6px; color: var(--muted); }

/* ---------------------------------------------------------------------------
   23. Song-Schalter (R1.3) — auf allen Seiten unten rechts, unter Age-Gate/Fenster.
   --------------------------------------------------------------------------- */
.song-toggle {
  position: fixed; z-index: 60;
  right: var(--gutter); bottom: var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: var(--space-2);
  max-width: min(22rem, calc(100vw - 2 * var(--gutter)));
}
.song-toggle__btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap); padding: 0 var(--space-4);
  border: 2px solid var(--ink); border-radius: 100px;
  background: var(--sand); color: var(--ink);
  font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer;
  box-shadow: 0 8px 20px rgba(31, 31, 31, .18);
}
.song-toggle__btn:hover { background: var(--pink); }
.song-toggle__bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.song-toggle__bars i { display: block; width: 3px; height: 45%; border-radius: 2px; background: currentColor; }
.song-toggle__bars i:nth-child(2) { height: 100%; }
.song-toggle__bars i:nth-child(3) { height: 70%; }
@media (prefers-reduced-motion: no-preference) {
  .song-toggle__btn.is-playing .song-toggle__bars i { animation: song-eq .8s ease-in-out infinite alternate; }
  .song-toggle__btn.is-playing .song-toggle__bars i:nth-child(2) { animation-delay: .18s; }
  .song-toggle__btn.is-playing .song-toggle__bars i:nth-child(3) { animation-delay: .36s; }
  @keyframes song-eq { from { height: 30%; } to { height: 100%; } }
}
.song-toggle__credits {
  padding: .3em .7em; border-radius: 100px;
  background: var(--offwhite); border: 1px solid var(--line);
  color: var(--muted); font-size: .7rem;
}
@media (max-width: 640px) {
  .song-toggle__credits { display: none; }
  .song-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .song-toggle__btn { width: var(--tap); padding: 0; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   24. Landscape-Handys (wenig Höhe): Abstände zusammenziehen
   --------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --section-y: 2rem; }
  .intro { min-height: 100svh; }
  .intro-content { transform: translateY(-24px); }
  .age-gate__sun { width: min(260px, 50vw); margin-bottom: 12px; }
  .age-gate__dob { margin: 16px auto 10px; }
}

/* ---------------------------------------------------------------------------
   22. Content-Seiten (R1.4): /events, /kontakt, News — und die Produktseite im Shop
   Nutzt dieselben Karten/Chips/Buttons wie die Startseite — nur die
   seitenspezifischen Bausteine stehen hier. Ausschließlich Tokens.
   --------------------------------------------------------------------------- */

/* Weiterführender Link unter einer Sektion („Alle Termine ansehen“) */
.section-more { margin-top: var(--space-5); }
.section-more a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-weight: 700; color: var(--pink-text);
}

/* Zurück-Link über einer Unterseite (News-Beitrag) */
.breadcrumb { margin-bottom: var(--space-4); font-size: .9rem; }
.breadcrumb a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--muted); text-decoration: none; font-weight: 600;
}
.breadcrumb a:hover { color: var(--pink-text); }

/* --- Produktseite (Shop auf dieser Website) ------------------------------- */
.product {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--space-6) var(--space-7); align-items: start;
}
@media (max-width: 860px) { .product { grid-template-columns: minmax(0, 1fr); } }

.product__media {
  border-radius: var(--radius); overflow: hidden;
  background: var(--card-bg, var(--offwhite));
}
.product__media img { display: block; width: 100%; height: auto; }
.product--lemon       { --card-bg: var(--lemon); }
.product--peach       { --card-bg: var(--peach); }
.product--performance { --card-bg: var(--aqua); }

.product__body h1 { margin-bottom: var(--space-3); }
.product__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.chip--age { background: var(--purple); color: var(--sand); }
.product__desc { max-width: 44rem; margin-bottom: var(--space-5); }
.product__price { font-weight: 800; font-size: 1.35rem; }
.product__price small { display: block; font-size: .78rem; font-weight: 400; color: var(--muted); }
.btn--soon { background: rgba(31, 31, 31, .12); color: var(--ink); cursor: default; }
.btn--soon:hover { background: rgba(31, 31, 31, .12); color: var(--ink); transform: none; }

/* Breite Tabellen scrollen in sich selbst — die Seite scrollt nie quer */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Gebinde & Preise (R2) -------------------------------------------------
   Pflichtangaben: Produktpreis und Pfand getrennt (VerpackG/PfandV), Grundpreis €/l
   ohne Pfand (PAngV), „inkl. MwSt.“. Gerechnet wird in app/Lib/Pricing.php — hier
   steht nur Darstellung. Alle Werte kommen als fertige Texte an. */
.variants { list-style: none; margin: 0; padding: 0; }

/* Kompaktform auf den Sorten-Karten. Bewusst nur <span>-Elemente: die Karte auf der
   Startseite ist ein <button>, dort sind Block-Elemente nicht erlaubt. */
.variants--compact {
  display: grid; gap: var(--space-1);
  margin-top: var(--space-1); padding-top: var(--space-2);
  border-top: 1px solid rgba(31, 31, 31, .18);
  font-size: .78rem;
}
.variant-row { display: flex; gap: var(--space-3); justify-content: space-between; align-items: baseline; }
.variant-row__label { font-weight: 700; }
.variant-row__vol { display: block; font-weight: 400; opacity: .78; font-size: .72rem; }
.variant-row__price { font-weight: 800; text-align: right; white-space: nowrap; }
.variant-row__legal { display: block; font-weight: 400; opacity: .78; font-size: .7rem; white-space: normal; }

.btn--sm { padding: .5em 1.3em; font-size: .9rem; }
.btn--soon[disabled] { background: rgba(31, 31, 31, .12); color: var(--muted); cursor: not-allowed; transform: none; }

/* --- Social-Links (Site-Einstellungen) ------------------------------------- */
/* Pills mit Marken-Glyphe + Name (Glyphen seit 27.10.2026 aus partials/social-icon, Simple Icons; vorher kam nur der Name an). */
.social-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.social-links a {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap);
  padding: 0 var(--space-4); border-radius: 999px;
  border: 1.5px solid var(--ink); color: var(--ink);
  font-weight: 700; font-size: .9rem; text-decoration: none;
}
.social-links a:hover { background: var(--ink); color: var(--sand); }
.social-links svg { flex: none; }
.social-links--footer { margin-top: var(--space-1); }
.social-links--footer a { border-color: rgba(255, 251, 232, .45); color: var(--sand-soft); }
.social-links--footer a:hover { background: var(--pink); border-color: var(--pink); color: var(--ink); }

/* --- Kontaktseite ---------------------------------------------------------- */
.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-6); margin-top: var(--space-6);
}
.contact-block h2 {
  font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--space-3);
}
.contact-block address { font-style: normal; line-height: 1.7; }
.contact-block p a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink); font-weight: 700; }
.contact-block p a:hover { color: var(--pink-text); }
.contact-mail { font-weight: 700; overflow-wrap: anywhere; }
.contact-note { margin-top: var(--space-2); color: var(--muted); font-size: .9rem; }
.contact-foot { margin-top: var(--space-7); }

/* ---------------------------------------------------------------------------
   23. Rechtsseiten (R4): Impressum, Datenschutz, AGB, Widerruf, Versand & Zahlung
   Lange Fließtexte — Überschriften brauchen Luft nach oben, Platzhalter müssen
   auffallen (nichts darf unbemerkt unausgefüllt live gehen).
   --------------------------------------------------------------------------- */
.legal h2 { margin-top: var(--space-7); }
.legal h1 + .legal-hint { margin-top: var(--space-5); }
.legal code { font-size: .9em; overflow-wrap: anywhere; }
/* Platzhalter-Hinweis: bewusst auffällig gerahmt, damit er vor dem Go-live nicht übersehen wird */
.legal-hint {
  border: 2px dashed var(--purple); border-radius: var(--radius);
  padding: var(--space-4); margin-bottom: var(--space-5);
  font-size: .95rem; color: var(--ink);
}
.legal-hint strong { color: var(--purple); }
/* [PLATZHALTER]-Stellen im Fließtext heben sich vom Text ab (gleicher Ton wie der Kasten) */
.legal .section-text strong,
.legal .legal-list strong { color: var(--purple); }
.legal-note { display: inline-block; margin-top: var(--space-2); font-size: .85rem; color: var(--muted); }
.legal-list { margin: 0 0 var(--space-4) var(--space-5); color: var(--muted); }
.legal-list li { margin-bottom: var(--space-2); }
/* Muster-Widerrufsformular: als abgesetzter Block, damit es kopierbar bleibt */
.legal-form {
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  padding: var(--space-5); margin-bottom: var(--space-5);
  background: var(--offwhite);
}
.legal-form p { margin-bottom: var(--space-4); }
.legal-form p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   24. Einwilligungs-Dialog (R4) — erscheint nur, wenn ein einwilligungspflichtiger
   Dienst konfiguriert ist (docs/CONSENT.md). Bewusst NICHT modal: die Seite bleibt
   bedienbar, Wegdrücken ist keine Zustimmung. Liegt über der Kopfzeile (z-index 100 — am Handy
   verdeckte sie sonst Überschrift und Fokusziel), unter Crew-Fenster und Age-Gate (998/999; hinter dem
   Gate erscheint der Dialog gar nicht erst, site.js), über dem Song-Schalter — lässt ihn aber frei (s. u.).
   --------------------------------------------------------------------------- */
.consent {
  position: fixed; z-index: 150;
  left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center;
  --consent-gap: var(--gutter); --consent-below: var(--consent-gap);
  padding: var(--consent-gap) var(--consent-gap) var(--consent-below);
  pointer-events: none;   /* nur die Karte fängt Klicks — der Rest der Seite bleibt nutzbar */
}
/* Song-Schalter (R1.3) frei lassen (R14.4, WCAG 1.4.2): Läuft der Song, muss er sich auch bei offenem Banner stoppen lassen —
   die Karte endet über dem Schalter (Höhe --tap, Abstand --gutter), statt ihn auf dem Handy zu verdecken */
.song-toggle ~ .consent { --consent-below: calc(var(--gutter) + var(--tap) + var(--space-2)); }
.consent__card {
  pointer-events: auto;
  width: 100%; max-width: 44rem;
  max-height: calc(100dvh - var(--consent-gap) - var(--consent-below));
  display: flex; flex-direction: column; overflow: hidden;
  padding: clamp(1.1rem, 4vw, 1.8rem);
  background: var(--sand); color: var(--ink);
  border: 2px solid var(--ink); border-radius: calc(var(--radius) * 1.4);
  box-shadow: 0 18px 50px rgba(31, 31, 31, .35);
}
/* Texte scrollen, die Knöpfe bleiben immer sichtbar (R14.4: „Alle ablehnen“ und „Alle akzeptieren“ auf einer Ebene, auch am Handy) */
.consent__body { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: -4px; padding: 4px;
  /* Schatten unten, solange noch Text folgt (am Handy stehen die Kategorien oft darunter) — verschwindet am Ende */
  background: linear-gradient(transparent, var(--sand) 70%) bottom / 100% 2rem no-repeat local,
              radial-gradient(farthest-side at 50% 100%, rgba(31, 31, 31, .22), transparent) bottom / 100% .9rem no-repeat scroll; }
.consent__foot { flex: none; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.consent__title { font-size: clamp(1.2rem, 3.5vw, 1.6rem); margin-bottom: var(--space-2); }
.consent__title:focus { outline: none; }
.consent__title:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.consent__text { color: var(--muted); font-size: .95rem; margin-bottom: var(--space-4); }
.consent__cats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.consent__cat { border-top: 1px solid var(--line); padding-top: var(--space-3); }
.consent__row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); cursor: pointer; }
.consent__row input { width: 1.15rem; height: 1.15rem; accent-color: var(--purple); flex-shrink: 0; }
.consent__row input:disabled { cursor: default; }
.consent__label { font-weight: 700; }
.consent__always { font-size: .75rem; color: var(--muted); }
.consent__hint { margin: 0; padding-left: calc(1.15rem + var(--space-2)); color: var(--muted); font-size: .85rem; }
.consent__services { color: var(--ink); }
.consent__store { margin-top: var(--space-1); }
/* Gleichwertige Buttons (TDDDG): identische Klasse, identische Breite, keine Hervorhebung */
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.consent__btn { flex: 1 1 12rem; font-size: .95rem; }
.consent__legal { font-size: .8rem; color: var(--muted); }
.consent__legal a { color: var(--ink); text-decoration: underline; }
@media (max-width: 480px) {
  .consent { --consent-gap: var(--space-2); }
  .consent__btn { flex-basis: 100%; padding-block: 10px; }
}
/* Querformat am Handy (wenig Höhe): fester Fuß ließe kaum Text übrig. Die ganze Karte scrollt, die drei Knöpfe kleben in einer Reihe
   am unteren Kartenrand (immer sichtbar), die Zeile Datenschutz/Impressum kommt am Ende; der Song-Schalter bekommt rechts Platz statt unten */
@media (max-height: 520px) and (min-width: 481px) {
  .consent { --consent-gap: var(--space-2); }
  .song-toggle ~ .consent { --consent-below: var(--consent-gap); padding-right: calc(var(--gutter) + var(--tap) + var(--space-2)); }
  .consent__card { overflow-y: auto; overscroll-behavior: contain; padding-block: var(--space-3) 0; scroll-padding-bottom: 5rem; } /* Fokus nie unter der Knopfreihe */
  .consent__body { flex: none; overflow: visible; background: none; }
  .consent__foot { display: contents; }
  .consent__actions { position: sticky; bottom: 0; z-index: 1; flex-wrap: nowrap; margin: var(--space-3) 0 0; padding: var(--space-2) 0; background: var(--sand); border-top: 1px solid var(--line); }
  .consent__btn { flex: 1 1 0; min-width: 0; padding: 8px 12px; font-size: .9rem; }
  .consent__legal { margin: 0; padding: var(--space-2) 0 var(--space-3); }
  /* Song-Schalter im Querformat wie im Hochformat nur als Symbol (≤ 640 px) — so reicht rechts ein Streifen von --tap */
  .song-toggle__credits { display: none; }
  .song-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .song-toggle__btn { width: var(--tap); padding: 0; justify-content: center; }
}

/* Footer: „Cookie-Einstellungen“ (Button, kein Link — er öffnet den Dialog) + 18+-Zeile */
.footer-link {
  display: flex; align-items: center; min-height: var(--tap);
  padding: 0; border: 0; background: none;
  font: inherit; color: var(--sand-soft); text-align: left; cursor: pointer;
}
.footer-link:hover { color: var(--pink); }
.footer-age { color: var(--sand-soft); }

/* ---------------------------------------------------------------------------
   25. Optionale Module (OPT1): News/Blog (/news, /news/<slug>) und Fotos (/fotos).
   Beide erscheinen nur, wenn sie im CMS eingeschaltet sind — die Seiten nutzen sonst
   dieselben Bausteine wie der Rest (.section, .container, .chip, .btn).
   --------------------------------------------------------------------------- */

/* --- Übersicht /news --- */
.news-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-5); }
.news-card {
  display: grid; grid-template-columns: 260px 1fr; gap: var(--space-5);
  padding-bottom: var(--space-5); border-bottom: 1px solid var(--line);
}
.news-card:last-child { border-bottom: 0; padding-bottom: 0; }
.news-card__img { display: block; border-radius: var(--radius); overflow: hidden; background: var(--line); }
.news-card__img img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.news-card__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.news-card__date { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--purple); }
.news-card__title { font-size: clamp(1.15rem, 2.6vw, 1.5rem); margin: 0; }
.news-card__title a { color: inherit; text-decoration: none; }
.news-card__title a:hover { color: var(--pink-text); text-decoration: underline; text-underline-offset: .25em; }
.news-card__text { color: var(--muted); font-size: .95rem; margin: 0; }
.news-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.news-card__tags .chip { background: var(--line); }

/* Blättern (Seite 1, 2, …) — Touch-Ziele über .btn, die Positionsangabe bleibt Text */
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-7); }
.pagination__pos { color: var(--muted); font-size: .9rem; }

/* --- Beitrag /news/<slug> --- */
.article__meta { color: var(--muted); font-size: .9rem; margin: 0 0 var(--space-3); }
.article__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-5); }
.article__tags .chip { background: var(--line); }
.article__cover { margin: 0 0 var(--space-6); }
.article__cover img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.article__lead { font-size: 1.05rem; font-weight: 600; margin-bottom: var(--space-5); }

/* Fließtext aus dem CMS (Lexical). Bewusst schmal gehalten (~70 Zeichen je Zeile). */
.rich-text { max-width: 42rem; }
.rich-text > * + * { margin-top: var(--space-4); }
.rich-text h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin-top: var(--space-7); }
.rich-text h3 { font-size: clamp(1.1rem, 2.4vw, 1.3rem); margin-top: var(--space-6); }
.rich-text p { color: var(--ink); }
.rich-text a { color: var(--pink-text); text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
.rich-text ul, .rich-text ol { margin-left: var(--space-5); color: var(--ink); }
.rich-text li { margin-bottom: var(--space-2); }
.rich-text__figure { margin: var(--space-6) 0; }
.rich-text__figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.rich-text__figure figcaption,
.rich-text__file { margin-top: var(--space-2); color: var(--muted); font-size: .85rem; }

/* --- Fotogalerie /fotos ---
   „Masonry-artig“ über CSS-Spalten: die Bilder behalten ihr Seitenverhältnis (keine
   Beschneidung), die Höhe der Spalten gleicht sich von selbst aus. Kein JavaScript,
   kein Lightbox-Overlay — ein Klick öffnet nichts, was man wegklicken müsste. */
.photo-grid { columns: 3 260px; column-gap: var(--space-4); margin-top: var(--space-6); }
.photo-item { break-inside: avoid; margin: 0 0 var(--space-4); }
.photo-item img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.photo-item figcaption { margin-top: var(--space-2); color: var(--muted); font-size: .85rem; }
.photo-social { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.photo-social h2 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); margin-bottom: var(--space-2); }
.photo-social .section-text { max-width: 42rem; }

@media (max-width: 720px) {
  .news-card { grid-template-columns: 1fr; gap: var(--space-3); }
  .news-card__img img { aspect-ratio: 16 / 9; }
}
@media (max-width: 480px) {
  .photo-grid { columns: 1; }
  .pagination .btn { flex: 1 1 8rem; text-align: center; }
}

/* ---------------------------------------------------------------------------
   26. Dosen-Umfrage (R8): /s/<code> — die Seite hinter dem QR-Code auf der Dose.
   Mobil zuerst: Wer hier landet, hält ein Handy in der einen und eine Dose in der
   anderen Hand. Große Tippflächen (--tap), Auswahl statt Tastatur, ein Fokus, den
   man auch bei Sonne sieht. Nur Tokens aus Abschnitt 1, keine neuen Farbwerte.
   --------------------------------------------------------------------------- */
.survey h1 { margin-bottom: var(--space-3); }
.survey-age {
  border: 1.5px solid var(--purple); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5);
  font-size: .92rem; font-weight: 600; color: var(--purple);
}
.survey-form { margin-top: var(--space-5); }
.survey-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.survey-q, .survey-give {
  border: 0; border-top: 1px solid var(--line);
  margin: 0; padding: var(--space-5) 0 var(--space-4);
}
.survey-q legend, .survey-give legend {
  padding: 0; font-weight: 700; font-size: 1.02rem; line-height: 1.35;
}
.survey-q--error { border-left: 3px solid var(--purple); padding-left: var(--space-3); }
.survey-q__no { color: var(--muted); font-weight: 800; }
.survey-q__req { color: var(--pink-text); }
.survey-q__help { margin: var(--space-1) 0 var(--space-3); color: var(--muted); font-size: .88rem; }

/* Skala 1–5 und NPS 0–10: gleich breite Kacheln, die auch auf 320 px in eine Zeile passen */
.survey-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.survey-scale--wide { grid-template-columns: repeat(11, 1fr); gap: 4px; }
.survey-step {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: var(--tap); border: 1.5px solid var(--ink); border-radius: var(--radius);
  background: var(--offwhite); font-weight: 700; cursor: pointer;
}
.survey-scale--wide .survey-step { font-size: .82rem; border-radius: 8px; }
.survey-step input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.survey-step.is-on { background: var(--ink); color: var(--sand); }
.survey-step:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.survey-scale__ends {
  display: flex; justify-content: space-between; gap: var(--space-2);
  margin-top: var(--space-1); font-size: .78rem; color: var(--muted);
}

.survey-options { display: grid; gap: var(--space-2); }
.survey-option {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap); padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  background: var(--offwhite); cursor: pointer;
}
.survey-option input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--ink); flex: none; }
.survey-option.is-on { background: var(--lemon); }
.survey-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

.survey-plz, .survey-text {
  width: 100%; min-height: var(--tap); padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  background: var(--offwhite); font: inherit; color: var(--ink);
}
.survey-plz { max-width: 8rem; letter-spacing: .2em; }
.survey-text { resize: vertical; }
.survey-count { display: block; margin-top: var(--space-1); font-size: .78rem; color: var(--muted); text-align: right; }

.survey-give { background: transparent; }
.survey-prize { font-weight: 700; margin-bottom: var(--space-3); }
.survey-give__fields { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.survey-field { display: grid; gap: var(--space-1); }
.survey-field span { font-size: .85rem; font-weight: 600; }
.survey-field input {
  min-height: var(--tap); padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  background: var(--offwhite); font: inherit; color: var(--ink);
}
.survey-check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: .9rem; line-height: 1.45; cursor: pointer; }
.survey-check input { width: 1.15rem; height: 1.15rem; margin-top: .18em; accent-color: var(--ink); flex: none; }
.survey-check--error { outline: 3px solid var(--purple); outline-offset: 4px; border-radius: var(--radius); }

.survey-progress { margin: var(--space-5) 0 var(--space-3); font-size: .85rem; color: var(--muted); }
.survey-submit { width: 100%; justify-content: center; }
.survey-status { min-height: 1.4em; margin-top: var(--space-3); font-weight: 700; color: var(--purple); }
.survey-status:empty { min-height: 0; margin-top: 0; }
.survey-note { margin-top: var(--space-4); font-size: .82rem; color: var(--muted); }

@media (min-width: 560px) {
  .survey-submit { width: auto; }
  .survey-options { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------------
   27. Redaktions-Werkzeuge (R8): /admin-tools/survey — die Auswertung der
   Dosen-Umfrage. Bewusst nüchtern: Tabellen, Balken aus reinem CSS, keine
   Diagramm-Bibliothek. Sichtbar nur nach Anmeldung im CMS.
   --------------------------------------------------------------------------- */
.tools h2 { margin-top: var(--space-7); }
.tools-filter {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end;
  margin: var(--space-5) 0; padding: var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--offwhite);
}
.tools-filter label { display: grid; gap: var(--space-1); font-size: .8rem; font-weight: 600; }
.tools-filter select, .tools-filter input {
  min-height: var(--tap); padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  background: var(--sand); font: inherit; color: var(--ink);
}
.tools-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.tools-kpi { padding: var(--space-4); border-radius: var(--radius); background: var(--ink); color: var(--sand); }
.tools-kpi b { display: block; font-size: 1.7rem; letter-spacing: -.02em; }
.tools-kpi span { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }

.tools-scroll { overflow-x: auto; }
.tools-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tools-table th, .tools-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.tools-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.tools-questions { display: grid; gap: var(--space-5); }
.tools-question { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--offwhite); }
.tools-question h3 { font-size: 1.05rem; margin-bottom: var(--space-1); }
.tools-question__meta { font-size: .82rem; color: var(--muted); margin-bottom: var(--space-3); }
.tools-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.tools-bars li { display: grid; grid-template-columns: minmax(6rem, 12rem) 1fr auto; gap: var(--space-3); align-items: center; font-size: .85rem; }
.tools-bar__track { height: 12px; border-radius: 100px; background: var(--line); overflow: hidden; }
.tools-bar__fill { display: block; height: 100%; background: var(--teal); }
.tools-bar__value { color: var(--muted); white-space: nowrap; }
.tools-texts { margin: 0 0 0 var(--space-5); font-size: .9rem; }
.tools-texts li { margin-bottom: var(--space-2); }

.tools-actions { display: grid; gap: var(--space-4); margin: var(--space-5) 0; }
.tools-action { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--offwhite); }
.tools-action h3 { font-size: 1rem; margin-bottom: var(--space-1); }
.tools-action p { font-size: .85rem; color: var(--muted); margin-bottom: var(--space-3); }
.tools-action__row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; font-size: .85rem; font-weight: 600; }
.tools-action__row input { width: 5rem; min-height: var(--tap); padding: var(--space-2) var(--space-3); border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--sand); font: inherit; }
.tools-message { font-weight: 700; }
.tools-message--error { color: var(--purple); }
.tools-foot { margin-top: var(--space-7); font-size: .85rem; }

@media (min-width: 720px) {
  .tools-actions { grid-template-columns: 1fr 1fr; }
  .tools-message { grid-column: 1 / -1; }
}

/* --- Shop (R9: Demo-Shop mit Shopify-Storefront) ---------------------------- */
/* Nur Tokens von ganz oben — keine neuen Farben, keine Einzelfall-Abstände.
   Der Shop soll aussehen wie die Sorten-Seiten, nur mit Kauf-Elementen. */

.shop-demo {
  display: grid; gap: var(--space-1);
  margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-4);
  border: 1.5px dashed var(--ink); border-radius: var(--radius);
  background: var(--lemon); color: var(--ink); font-size: .9rem;
}
.shop-demo strong { font-size: .95rem; }

.shop-bar {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: space-between; align-items: center;
  margin-bottom: var(--space-4); font-size: .9rem;
}
.shop-bar a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.shop-bar a:hover { color: var(--pink-text); }
.shop-bar__cart { margin-left: auto; font-weight: 700; }

.shop-error {
  margin: var(--space-4) 0; padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--purple); border-radius: var(--radius);
  color: var(--purple); font-weight: 700; font-size: .9rem;
}

.shop-legal { margin-top: var(--space-5); color: var(--muted); font-size: .82rem; }
.shop-legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.shop-legal a:hover { color: var(--pink-text); }

.shop-age {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  margin-top: var(--space-5); padding: var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--offwhite); font-size: .88rem;
}

.shop-foot { margin-top: var(--space-4); font-size: .88rem; color: var(--muted); }
.shop-foot--demo { font-size: .82rem; }
.shop-foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Gebinde-Wähler + „In den Warenkorb“ (funktioniert ohne JavaScript) */
.shop-buy { margin-top: var(--space-5); }
.shop-buy__packs { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.shop-buy__packs legend {
  padding: 0; margin-bottom: var(--space-2);
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.shop-pack {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); min-height: var(--tap);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--offwhite); cursor: pointer;
}
.shop-pack:has(input:checked) { border-color: var(--ink); }
.shop-pack:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.shop-pack:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.shop-pack input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--pink-text); }
.shop-pack__body { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; flex: 1; }
.shop-pack__head strong { display: block; }
.shop-pack__vol { display: block; color: var(--muted); font-size: .82rem; }
.shop-pack__price { text-align: right; }
.shop-pack__price strong { display: block; font-size: 1.1rem; }
.shop-pack__pfand { display: block; font-size: .82rem; font-weight: 700; }
.shop-pack__meta { display: block; color: var(--muted); font-size: .78rem; }
.shop-pack__soon { flex-basis: 100%; color: var(--muted); font-size: .78rem; }

.shop-buy__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }
.shop-buy__actions label { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.shop-buy__actions input {
  width: 5rem; min-height: var(--tap); padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--sand); font: inherit;
}
.shop-buy__note { margin-top: var(--space-3); color: var(--muted); font-size: .85rem; }

/* Warenkorb */
.container--cart { max-width: 900px; }
.cart-lines { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.cart-line {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto auto;
  gap: var(--space-4); align-items: center;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--line);
}
.cart-line__img img { width: 88px; height: auto; border-radius: var(--radius); }
.cart-line__body { display: grid; gap: var(--space-1); }
.cart-line__body a { color: var(--ink); text-decoration: none; }
.cart-line__body a:hover { color: var(--pink-text); }
.cart-line__pack, .cart-line__unit { color: var(--muted); font-size: .85rem; }
.cart-line__qty { display: flex; gap: var(--space-2); align-items: center; }
.cart-line__qty label {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.cart-line__qty input {
  width: 4.5rem; min-height: var(--tap); padding: var(--space-2);
  border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--sand); font: inherit; text-align: center;
}
.cart-line__price { text-align: right; }
.cart-line__price strong { display: block; font-size: 1.1rem; }
.cart-line__pfand { display: block; font-size: .82rem; font-weight: 700; }
@media (max-width: 720px) {
  .cart-line { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "img body" "qty price"; }
  .cart-line__img { grid-area: img; }
  .cart-line__img img { width: 72px; }
  .cart-line__body { grid-area: body; }
  .cart-line__qty { grid-area: qty; }
  .cart-line__price { grid-area: price; }
}

.cart-totals { margin-top: var(--space-5); display: grid; gap: var(--space-2); }
.cart-totals > div { display: flex; justify-content: space-between; gap: var(--space-4); }
.cart-totals dt { color: var(--muted); }
.cart-totals dd { font-weight: 700; white-space: nowrap; }
.cart-totals__sum { padding-top: var(--space-3); border-top: 1.5px solid var(--ink); font-size: 1.2rem; }
.cart-totals__sum dt { color: var(--ink); font-weight: 700; }
.cart-totals__sum dd { font-size: 1.2rem; }
.cart-totals__note dt, .cart-totals__note dd { color: var(--muted); font-size: .85rem; font-weight: 400; }
.cart-vat { margin-top: var(--space-2); color: var(--muted); font-size: .85rem; text-align: right; }

.cart-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-5); }

/* Knopf, der wie ein Link aussieht (Formular-Aktionen ohne JavaScript) */
.linklike {
  border: 0; background: none; padding: 0; min-height: var(--tap);
  font: inherit; font-size: .85rem; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.linklike:hover { color: var(--pink-text); }