/* ============================================================
   I hate Matcha but… — Seiten-Stylesheet
   ============================================================
   Look: die densch-Welt (Apple-mäßig, dunkel, Inter) — geladen
   wird der volle DDL-Stack aus /densch-shared/ddl/:
     ddl-typography (Inter-Skala, Mono-Eyebrows)
     ddl-motion     (Scrub-Engine, Material, Parallax, Loops)
     ddl-landing    (Knöpfe/Karten/Eyebrow als Grundmuster)
   Diese Datei bringt NUR Farbe, Layout und die Bühnen (Hero,
   Zoom-Becher, Karten-Stapel, Welten-Split). Regel 3: kein
   freies Easing, keine freien Dauern — überall var(--ddl-ease)
   und --ddl-dur-*. Regel 1: die Sichtbarkeit von Scrub-Items
   gehört der Engine, hier steht dafür KEIN opacity/transform.

   Zwei scroll-gebundene Bühnen laufen ohne Seiten-JS:
   · Zoom-Becher: die Engine schreibt --scroll-progress an die
     Sektion, dieses CSS rechnet daraus --p und lässt den Becher
     wachsen und von unten nach oben erscheinen.
   · Karten-Stapel: [data-sticky-panel] bekommt --panel-progress,
     hier für den Abgang der Tafel genutzt (Regel 6).
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────────
   Matcha und Ube sind aus den Produktfotos gemessen (Matcha-
   Schicht ≈ #8FB65A, Ube-Schicht ≈ #9B6BE0), nicht geraten.
   Die Frucht-/Sirupfarben färben Chips, keine Flächen.       */
:root {
    --ihm-bg:          #0A0B0A;
    --ihm-bg-2:        #111311;
    --ihm-bg-3:        #171A17;

    --ihm-text:        #f5f5f7;
    --ihm-text-soft:   rgba(245, 245, 247, 0.72);
    --ihm-text-mute:   rgba(245, 245, 247, 0.5);
    --ihm-linie:       rgba(255, 255, 255, 0.08);
    --ihm-linie-stark: rgba(255, 255, 255, 0.2);

    --ihm-matcha:      #8FB65A;
    --ihm-matcha-hell: #C6E69A;
    --ihm-ube:         #9B6BE0;
    --ihm-ube-hell:    #CDB3F7;

    --ihm-erdbeer:     #F25C7A;
    --ihm-himbeer:     #D93A6E;
    --ihm-heidelbeer:  #5B5FC7;
    --ihm-mango:       #F5B233;
    --ihm-lavendel:    #B39CE8;
    --ihm-whitechoc:   #F3E7D3;
    --ihm-rose:        #F2A6BC;
    --ihm-hafer:       #E8D8B8;
    --ihm-kokos:       #F4F1EA;
    --ihm-kuh:         #FFFFFF;

    /* Hero-Verlauf: Matcha → Dämmerblau → Ube (Apple-Event-Kachel) */
    --ihm-hero-a:      #47733A;
    --ihm-hero-b:      #3C5B8A;
    --ihm-hero-c:      #46297F;

    --ihm-rand:        clamp(1.25rem, 5vw, 3rem);
    --ihm-bahn:        1120px;

    /* ── DDL-Brücke: die Standard-Bausteine (ddl-landing, ddl-forms-
       Tokens, Material) auf diese Marke binden ─────────────── */
    --ddl-accent:          var(--ihm-matcha);
    --ddl-accent-tint:     rgba(143, 182, 90, 0.14);
    --ddl-accent-glow:     rgba(143, 182, 90, 0.35);
    --ddl-text:            var(--ihm-text);
    --ddl-text-soft:       var(--ihm-text-soft);
    --ddl-text-muted:      var(--ihm-text-mute);
    --ddl-text-on-accent:  #0A0B0A;
    --ddl-bg-light:        var(--ihm-bg-2);
    --ddl-bg-card:         var(--ihm-bg-3);
    --ddl-border:          var(--ihm-linie);
    --ddl-radius-pill:     980px;
    --ddl-radius-lg:       18px;
    --ddl-radius-md:       12px;
    --ddl-material-bg:     rgba(10, 11, 10, 0.72);
    --ddl-material-solid:  #0A0B0A;
    --ddl-material-edge:   rgba(0, 0, 0, 0.55);
    --accent:              var(--ihm-matcha);

    color-scheme: dark;
}

/* ── Grundgerüst ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 4.5rem;
    -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--ihm-bg);
    color: var(--ihm-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: var(--ddl-fs-body);
    line-height: var(--ddl-lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

/* height:auto ist tragend (Lehre aus hardenberg): setzt das CSS nur
   die Breite, bleibt das height-Attribut als Darstellungshinweis
   wirksam und das Logo steht im falschen Seitenverhältnis. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--ihm-matcha-hell); }
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--ihm-matcha-hell);
    outline-offset: 3px;
    border-radius: 6px;
}

.ihm-skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--ihm-matcha-hell); color: var(--ihm-bg);
    padding: 0.75rem 1.25rem; font-weight: 700; text-decoration: none;
}
.ihm-skip:focus { left: 1rem; top: 1rem; }

.ihm-bahn { max-width: var(--ihm-bahn); margin: 0 auto; padding-inline: var(--ihm-rand); }

/* ── Typo-Bausteine (Skala aus ddl-typography.css) ────────── */
.ihm-eyebrow {
    /* Font, Gewicht, Versalien und Tracking kommen aus .ddl-eyebrow */
    font-size: 0.75rem;
    color: var(--ihm-matcha-hell);
    margin: 0 0 0.9rem;
}
.ihm-display {
    font-size: var(--ddl-fs-display);
    font-weight: 800;
    letter-spacing: var(--ddl-track-display);
    line-height: var(--ddl-lh-display);
    margin: 0;
    text-wrap: balance;
    /* Wie .brand-title auf dasdensch.de: Weiß, das nach unten ausläuft */
    background: linear-gradient(180deg, #f5f5f7 30%, #8a8a8f 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ihm-titel {
    font-size: var(--ddl-fs-title);
    font-weight: 800;
    letter-spacing: var(--ddl-track-title);
    line-height: var(--ddl-lh-title);
    margin: 0;
    text-wrap: balance;
}
.ihm-lead {
    font-size: var(--ddl-fs-lead);
    line-height: 1.5;
    color: var(--ihm-text-soft);
    max-width: 44ch;
    margin: 1.25rem 0 0;
    text-wrap: pretty;
}
.ihm-lead--mitte { margin-inline: auto; }

/* ── Wortmarke (SSOT) — Nav UND Sprechblase tragen dieselbe Klasse,
   der Verlauf auf „but…" steht genau einmal. ──────────────── */
.ihm-wortmarke {
    display: inline-flex; align-items: baseline; gap: 0.35em;
    font-weight: 800; letter-spacing: var(--ddl-track-tight);
    color: var(--ihm-text); text-decoration: none; margin: 0;
    white-space: nowrap;
}
.ihm-wortmarke em {
    font-style: normal;
    background: linear-gradient(90deg, var(--ihm-matcha-hell), var(--ihm-ube-hell));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Sektionen ──────────────────────────────────────────────── */
.ihm-sektion { padding: clamp(5rem, 10vw, 8rem) 0; position: relative; }
.ihm-sektion--tint { background: var(--ihm-bg-2); }
.ihm-sektion--linie { border-top: 1px solid var(--ihm-linie); }
.ihm-kopf { max-width: 44rem; }
.ihm-kopf--mitte { margin-inline: auto; text-align: center; }

/* ════════════════════════════════════════════════════════════
   NAVIGATION — Material (DDL-Regel 9)
   ════════════════════════════════════════════════════════════ */
.ihm-nav { position: fixed; inset: 0 0 auto 0; z-index: 100; }
.ihm-nav__innen {
    max-width: var(--ihm-bahn); margin: 0 auto;
    padding: 0 var(--ihm-rand); height: 3.25rem;
    display: flex; align-items: center; gap: 1.5rem;
}
.ihm-nav__marke { font-size: 1rem; margin-right: auto; }
.ihm-nav__links { display: flex; align-items: center; gap: 1.5rem; }
.ihm-nav__links a {
    font-size: 0.8125rem; font-weight: 500; color: var(--ihm-text-soft);
    text-decoration: none;
    transition: color var(--ddl-dur-ui) var(--ddl-ease);
}
.ihm-nav__links a:hover { color: var(--ihm-text); }
@media (max-width: 53.75rem) {
    .ihm-nav__links { display: none; }
}
@media (max-width: 26.25rem) {
    .ihm-nav__innen { gap: 0.75rem; }
    .ihm-nav__marke { font-size: 0.9375rem; }
}

/* ── Knöpfe ─────────────────────────────────────────────────── */
.ihm-knopf {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    border: 1px solid transparent; border-radius: var(--ddl-radius-pill);
    font-weight: 600; font-size: var(--ddl-fs-small); letter-spacing: -0.01em;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color var(--ddl-dur-ui) var(--ddl-ease),
                border-color var(--ddl-dur-ui) var(--ddl-ease),
                color var(--ddl-dur-ui) var(--ddl-ease),
                box-shadow var(--ddl-dur-ui) var(--ddl-ease);
}
/* Der weiße Knopf ist die Apple-Event-Geste: hell auf Farbe. */
.ihm-knopf--weiss { background: #fff; color: #111; }
.ihm-knopf--weiss:hover { box-shadow: 0 0.5rem 1.5rem rgba(255, 255, 255, 0.22); }
.ihm-knopf--geist { border-color: rgba(255, 255, 255, 0.35); color: var(--ihm-text); }
.ihm-knopf--geist:hover { border-color: #fff; }
.ihm-knopf--klein { padding: 0.5rem 1rem; font-size: 0.8125rem; }

/* ════════════════════════════════════════════════════════════
   HERO — Event-Teaser (apple.com-Kachel)
   ════════════════════════════════════════════════════════════ */
.ihm-hero {
    position: relative;
    min-height: 100svh;
    display: grid; place-items: center;
    padding: 4.5rem var(--ihm-rand) 2.5rem;
    overflow: clip; isolation: isolate;
    text-align: center;
    background: linear-gradient(165deg, var(--ihm-hero-a) 0%, var(--ihm-hero-b) 52%, var(--ihm-hero-c) 100%);
}
.ihm-hero__grund { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Zwei weiche Wolken, die per Parallax leicht gegeneinander laufen */
.ihm-hero__wolke {
    position: absolute; border-radius: 50%;
    filter: blur(60px);
}
.ihm-hero__wolke--a {
    width: 60vw; height: 60vw; left: -12vw; top: -18vw;
    background: radial-gradient(circle, rgba(198, 230, 154, 0.45), transparent 65%);
}
.ihm-hero__wolke--b {
    width: 70vw; height: 70vw; right: -20vw; bottom: -26vw;
    background: radial-gradient(circle, rgba(205, 179, 247, 0.5), transparent 65%);
}

.ihm-hero__innen {
    position: relative; width: 100%; max-width: 46rem;
    display: flex; flex-direction: column; align-items: center;
}
.ihm-hero .ihm-eyebrow { color: rgba(255, 255, 255, 0.72); margin-bottom: 0; }

/* Die leuchtende Marke. Glow + Ring sind Loops (Regel 7,
   [data-loop] pausiert offscreen), das Logo selbst steht still. */
/* Höhe ist knapp bemessen — gemessen auf 1440×900 und 390×844:
   Eyebrow, Marke, Titel, zwei Zeilen Subline, Knöpfe UND der
   Countdown müssen in EINE Fensterhöhe passen, sonst steht der
   Countdown unter der Falz und der Hero-Fade blendet ihn weg,
   bevor man ihn gelesen hat. */
.ihm-mark {
    position: relative;
    display: grid; place-items: center;
    width: 100%;
    min-height: clamp(10rem, 32vw, 15.5rem);
    margin: 0.25rem 0 0;
}
/* Glow und Ring liegen AUSSERHALB des Layouts (absolut, per `translate`
   zentriert — die eigene Eigenschaft, damit ihre transform-Animationen
   unberührt bleiben). Als Rasterkinder machten sie die Zeile 448 px
   hoch, die min-height der Marke war nie wirksam, und mit der Pille
   lief der Countdown auf 1440×900 aus der Falz (gemessen 07.09.). */
.ihm-mark__glow, .ihm-mark__ring {
    position: absolute; left: 50%; top: 50%;
    translate: -50% -50%;
}
.ihm-mark__glow {
    display: block;
    width: clamp(18rem, 54vw, 28rem); height: clamp(18rem, 54vw, 28rem);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.62) 0%,
        rgba(198, 230, 154, 0.32) 18%,
        rgba(205, 179, 247, 0.22) 38%,
        transparent 66%);
    /* 8-s-Zyklus hält Abstand zur vestibulär kritischen ~0,2-Hz-Zone */
    animation: ihmGlow 8s ease-in-out infinite;
    pointer-events: none;
}
.ihm-mark__ring {
    display: block;
    width: clamp(12.5rem, 38vw, 20rem); height: clamp(12.5rem, 38vw, 20rem);
    border-radius: 50%;
    background: conic-gradient(from 20deg,
        rgba(255, 255, 255, 0) 0deg,
        rgba(198, 230, 154, 0.55) 70deg,
        rgba(255, 255, 255, 0.15) 150deg,
        rgba(205, 179, 247, 0.6) 230deg,
        rgba(255, 210, 170, 0.35) 300deg,
        rgba(255, 255, 255, 0) 360deg);
    -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 66%, transparent 67%);
            mask: radial-gradient(circle, transparent 62%, #000 63%, #000 66%, transparent 67%);
    filter: blur(1.5px);
    animation: ihmRing 24s linear infinite;
    pointer-events: none;
}
@keyframes ihmGlow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.1); opacity: 0.72; }
}
@keyframes ihmRing { to { transform: rotate(360deg); } }

.ihm-mark__logo {
    position: relative;
    width: clamp(9rem, 26vw, 13.5rem);
    filter: drop-shadow(0 0 1.25rem rgba(255, 255, 255, 0.45))
            drop-shadow(0 0.25rem 1.5rem rgba(0, 0, 0, 0.25));
}
/* Niedrige Fenster (1280×720-Laptops): Marke und Logo eine Stufe
   kleiner, damit Pille, Titel, Knöpfe und Countdown in die Falz passen.
   Der Block steht HINTER den Basisregeln — gleiche Spezifität, die
   spätere Quelle gewinnt. */
@media (max-height: 47.5rem) {
    .ihm-mark { min-height: 11rem; }
    .ihm-mark__logo { width: 10rem; }
    .ihm-hero { padding-top: 4rem; }
}

/* Die Versprechen-Pille (wie .lp-hero-badge in ddl-landing, nur auf
   Farbe statt Karte). Kostet ~46 px Höhe — dafür sind Marke und
   Abstände darunter enger, damit der Countdown in der Falz bleibt. */
.ihm-hero__badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin: 0.75rem 0 0; padding: 0.4rem 0.9rem 0.4rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--ddl-radius-pill);
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; color: #fff;
}
.ihm-hero__badge i {
    width: 0.45rem; height: 0.45rem; border-radius: 50%; flex: none;
    background: var(--ihm-matcha-hell);
    box-shadow: 0 0 0 3px rgba(198, 230, 154, 0.3);
}
.ihm-hero__titel {
    margin: 0.75rem 0 0;
    font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
    font-weight: 700; letter-spacing: var(--ddl-track-title);
    line-height: 1.05; color: #fff;
}
.ihm-hero__sub {
    margin: 1rem auto 0; max-width: 34rem;
    font-size: var(--ddl-fs-lead); line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
    text-wrap: pretty;
}
.ihm-hero__sub time { font-weight: 600; color: #fff; white-space: nowrap; }
.ihm-hero__cta {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;
    margin-top: 1.5rem;
}
@media (max-width: 34rem) {
    .ihm-hero__sub { font-size: var(--ddl-fs-body); }
    .ihm-hero__cta { gap: 0.5rem; }
    .ihm-hero__cta .ihm-knopf { padding: 0.7rem 1.2rem; font-size: 0.875rem; }
}

/* ── Countdown ───────────────────────────────────────────────
   REGEL 11 (Verwandlung): Um 11 Uhr am 12.9. erscheint kein
   Banner — DIESES Element wird zur Ansage. Alle drei Zustände
   liegen in derselben Rasterzelle, deshalb springt nichts.  */
.ihm-count {
    display: grid; grid-template-areas: 'stapel';
    margin-top: clamp(1.25rem, 3vw, 2rem);
    justify-items: center;
}
.ihm-count > * { grid-area: stapel; }
.ihm-count__uhr,
.ihm-count__wort {
    transition: opacity var(--ddl-dur-morph) var(--ddl-ease),
                transform var(--ddl-dur-morph) var(--ddl-ease),
                filter var(--ddl-dur-morph) var(--ddl-ease);
}
.ihm-count__wort {
    align-self: center; margin: 0;
    opacity: 0; transform: translateY(0.5rem) scale(0.96); filter: blur(6px);
    pointer-events: none;
    font-weight: 700; font-size: clamp(1.25rem, 0.9rem + 1.6vw, 1.75rem);
    letter-spacing: var(--ddl-track-tight); line-height: 1.2; color: #fff;
}
.ihm-count__wort b { font-weight: inherit; color: var(--ihm-matcha-hell); }
.ihm-count[data-zustand='laeuft'] .ihm-count__uhr,
.ihm-count[data-zustand='vorbei'] .ihm-count__uhr {
    opacity: 0; transform: translateY(-0.5rem) scale(0.98); filter: blur(6px);
    pointer-events: none;
}
.ihm-count[data-zustand='laeuft'] .ihm-count__wort--laeuft,
.ihm-count[data-zustand='vorbei'] .ihm-count__wort--vorbei {
    opacity: 1; transform: none; filter: none; pointer-events: auto;
}
.ihm-count__uhr { display: flex; align-items: flex-start; gap: clamp(0.9rem, 3vw, 1.75rem); }
.ihm-count__feld { text-align: center; min-width: 3.2rem; }
.ihm-count__zahl {
    display: block;
    font-family: var(--ddl-font-mono); font-weight: 700;
    font-size: clamp(1.5rem, 1rem + 2.6vw, 2.5rem);
    line-height: 1; letter-spacing: -0.03em; color: #fff;
    font-variant-numeric: tabular-nums;
}
.ihm-count__zahl.is-frisch { animation: ihmSetzen var(--ddl-dur-ui) var(--ddl-ease); }
@keyframes ihmSetzen {
    from { transform: translateY(0.12em) scale(0.9); opacity: 0.35; }
    to   { transform: none; opacity: 1; }
}
.ihm-count__wort-klein {
    display: block; margin-top: 0.45rem;
    font-size: 0.625rem; font-weight: 600;
    letter-spacing: var(--ddl-track-caps); text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.ihm-count__teiler {
    width: 1px; flex: none;
    height: clamp(1.5rem, 1rem + 2.6vw, 2.5rem);
    background: rgba(255, 255, 255, 0.25);
}

/* ── Scroll-Hinweis ─────────────────────────────────────────── */
.ihm-hero__pfeil {
    position: absolute; right: var(--ihm-rand); bottom: 1.5rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    font-size: 0.625rem; letter-spacing: var(--ddl-track-caps);
    text-transform: uppercase; color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}
.ihm-hero__pfeil i {
    display: block; width: 1px; height: 3rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
}
@media (max-width: 53.75rem) { .ihm-hero__pfeil { display: none; } }

/* ════════════════════════════════════════════════════════════
   DIE IDEE — Text links, Ambient-Video rechts
   ════════════════════════════════════════════════════════════ */
.ihm-warum {
    display: grid; gap: clamp(2rem, 6vw, 4.5rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    perspective: 1400px;
}
@media (min-width: 56.25rem) {
    .ihm-warum { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.ihm-fakten {
    list-style: none; margin: clamp(2rem, 4vw, 2.75rem) 0 0; padding: 0;
    display: grid; gap: 1px;
    grid-template-columns: minmax(0, 1fr);
    max-width: 34rem;
    background: var(--ihm-linie); border: 1px solid var(--ihm-linie);
    border-radius: var(--ddl-radius-lg); overflow: hidden;
}
.ihm-fakten li {
    background: var(--ihm-bg);
    padding: 1.1rem 1rem;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.ihm-fakten b {
    font-family: var(--ddl-font-mono); font-weight: 700;
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(90deg, var(--ihm-matcha-hell), var(--ihm-ube-hell));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ihm-fakten span { font-size: 0.8125rem; color: var(--ihm-text-soft); }
@media (min-width: 30rem) {
    .ihm-fakten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ihm-warum__film {
    position: relative;
    border-radius: 1.5rem; overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--ihm-bg-3);
    box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
    transform-style: preserve-3d;
}
.ihm-warum__video {
    display: block; width: 100%; height: 100%;
    object-fit: cover;
}

/* ════════════════════════════════════════════════════════════
   DER DRINK — Scroll-Zoom
   ════════════════════════════════════════════════════════════
   Die Sektion ist 300vh hoch, die Bühne darin klebt eine
   Fensterhöhe lang. Die Engine liefert --scroll-progress über
   die GANZE Sektion (0 = kommt unten rein, 1 = oben raus); die
   gepinnte Strecke liegt bei 0,25…0,75 — daraus wird --p.
   Ohne JS (noscript) und bei Reduced Motion steht --p auf 1:
   ganzer Becher, alle drei Texte lesbar.                      */
.ihm-zoom {
    position: relative;
    height: 300vh;
    --p: clamp(0, calc((var(--scroll-progress, 0) - 0.25) / 0.5), 1);
    background: var(--ihm-bg);
}
.ihm-zoom__buehne {
    position: sticky; top: 0;
    height: 100svh; overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 4.5rem var(--ihm-rand) 1.5rem;
    max-width: var(--ihm-bahn); margin: 0 auto;
}
.ihm-zoom__kopf { text-align: center; }
.ihm-zoom__kopf .ihm-eyebrow { margin-bottom: 0.5rem; }
.ihm-zoom__kopf .ihm-titel { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); }

.ihm-zoom__glas { display: grid; place-items: center; min-height: 0; }
.ihm-zoom__glas picture { display: contents; }
/* Der Becher wächst und wird von unten nach oben freigegeben:
   Frucht (0…0,3), Milch (0,3…0,7), Matcha (0,7…0,92). Er startet
   NICHT bei null — die unteren 16 % (Becherboden mit Frucht) stehen
   schon, sonst ist die Bühne im ersten Viertel leer. clip-path an
   EINEM isolierten Element — die erlaubte Ausnahme aus Regel 2. */
.ihm-zoom__becher {
    width: min(46vw, 14rem); max-height: 100%; object-fit: contain;
    transform: scale(calc(0.72 + 0.28 * var(--p))) translateY(calc((1 - var(--p)) * 1.5rem));
    clip-path: inset(calc((1 - min(1, 0.16 + var(--p) / 0.92)) * 100%) 0 0 0);
    filter: drop-shadow(0 1.5rem 2.5rem rgba(0, 0, 0, 0.55));
    will-change: transform, clip-path;
}

/* Drei Texte in EINER Zelle, per --p überblendet. */
.ihm-zoom__texte { display: grid; grid-template-areas: 'stapel'; align-items: end; }
.ihm-zoom__text {
    grid-area: stapel; text-align: center;
    opacity: var(--o);
    transform: translateY(calc((1 - var(--o)) * 1rem));
}
.ihm-zoom__text--1 { --o: clamp(0, calc((0.34 - var(--p)) / 0.08), 1); }
.ihm-zoom__text--2 { --o: min(clamp(0, calc((var(--p) - 0.32) / 0.08), 1), clamp(0, calc((0.72 - var(--p)) / 0.08), 1)); }
.ihm-zoom__text--3 { --o: clamp(0, calc((var(--p) - 0.70) / 0.08), 1); }
.ihm-zoom__text .ihm-eyebrow { margin-bottom: 0.4rem; }
.ihm-zoom__text h3 {
    margin: 0; font-size: clamp(1.375rem, 1rem + 1.8vw, 2.25rem);
    font-weight: 800; letter-spacing: var(--ddl-track-title); line-height: 1.1;
}
.ihm-zoom__text p:last-child {
    margin: 0.5rem auto 0; max-width: 34ch;
    font-size: var(--ddl-fs-small); color: var(--ihm-text-soft);
}

@media (min-width: 56.25rem) {
    .ihm-zoom__buehne {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        column-gap: clamp(2rem, 6vw, 5rem);
        padding-top: 5.5rem;
    }
    .ihm-zoom__kopf { grid-column: 1 / -1; }
    .ihm-zoom__glas { grid-row: 2; }
    .ihm-zoom__becher { width: min(24vw, 17rem); }
    .ihm-zoom__texte { grid-row: 2; align-items: center; }
    .ihm-zoom__text { text-align: left; }
    .ihm-zoom__text p:last-child { margin-inline: 0; }
}

/* ════════════════════════════════════════════════════════════
   DIE FÜNF — Umschalter + fünf Becher
   ════════════════════════════════════════════════════════════ */
/* Segment-Umschalter: die Marke gleitet zum gewählten Knopf
   (Regel 11 — der Zustand wandert, er blinkt nicht) */
.ihm-seg {
    position: relative;
    display: inline-grid; grid-template-columns: 1fr 1fr;
    margin-top: 1.5rem; padding: 4px;
    border: 1px solid var(--ihm-linie-stark); border-radius: var(--ddl-radius-pill);
    background: rgba(255, 255, 255, 0.04);
}
.ihm-seg__marke {
    position: absolute; top: 4px; bottom: 4px; left: 4px;
    width: calc(50% - 4px); border-radius: var(--ddl-radius-pill);
    background: var(--ihm-matcha);
    transition: transform var(--ddl-dur-morph) var(--ddl-ease),
                background-color var(--ddl-dur-morph) var(--ddl-ease);
}
[data-basis='ube'] .ihm-seg__marke { transform: translateX(100%); background: var(--ihm-ube); }
.ihm-seg__knopf {
    position: relative; z-index: 1;
    appearance: none; border: 0; background: none; cursor: pointer;
    padding: 0.6rem 1.6rem; min-width: 7rem;
    font-family: inherit; font-size: var(--ddl-fs-small); font-weight: 700;
    color: var(--ihm-text-soft); border-radius: var(--ddl-radius-pill);
    transition: color var(--ddl-dur-ui) var(--ddl-ease);
}
.ihm-seg__knopf[aria-pressed='true'] { color: var(--ihm-bg); }

.ihm-drinks {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 56.25rem) {
    .ihm-drinks { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
}
.ihm-drink {
    text-align: center;
    padding: 1.25rem 0.75rem 1.5rem;
    border: 1px solid var(--ihm-linie); border-radius: var(--ddl-radius-lg);
    background: var(--ihm-bg-3);
    transform-style: preserve-3d;
}
/* Auf 390 px stehen zwei Karten je Reihe, die fünfte allein —
   die bekommt die ganze Breite, sonst hängt sie am linken Rand. */
@media (max-width: 56.24rem) {
    .ihm-drink:last-child { grid-column: 1 / -1; }
    .ihm-drink:last-child .ihm-drink__bild { max-width: 12rem; margin-inline: auto; }
}
.ihm-drink__bild {
    display: grid; grid-template-areas: 'stapel';
    margin-bottom: 1rem;
}
.ihm-drink__foto {
    grid-area: stapel;
    transition: opacity var(--ddl-dur-morph) var(--ddl-ease),
                transform var(--ddl-dur-morph) var(--ddl-ease);
}
.ihm-drink__foto img { width: 100%; }
[data-basis='matcha'] .ihm-drink__foto--ube,
[data-basis='ube'] .ihm-drink__foto--matcha {
    opacity: 0; transform: scale(0.94); pointer-events: none;
}
.ihm-drink h3 {
    margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em;
}
.ihm-drink p { margin: 0.35rem 0 0; font-size: 0.8125rem; color: var(--ihm-text-soft); }
.ihm-drinks__fuss {
    margin: 1.5rem 0 0; text-align: center;
    font-size: var(--ddl-fs-small); color: var(--ihm-text-mute);
}

/* ════════════════════════════════════════════════════════════
   ZUTATEN — Karten-Stapel ([data-sticky-section])
   ════════════════════════════════════════════════════════════
   Die Engine setzt position:sticky/top:0 auf jede Tafel und
   liefert --panel-progress (0…1), solange die NÄCHSTE Tafel sie
   überdeckt. Hier: Inhalt zieht sich nach oben zurück und dimmt
   — der Weg raus ist der Weg rein, nur rückwärts.           */
/* ⚠️ Geometrie, gemessen 07.09.2026: Die Engine rechnet den
   Fortschritt über (Containerhöhe − Fensterhöhe) und teilt ihn durch
   die Zahl der Tafeln. Damit Tafel i genau dann 0…1 zählt, wenn die
   NÄCHSTE sie überdeckt, muss der Container (N+1) Fensterhöhen hoch
   sein — sonst kommt jede Tafel schon halb gedimmt an (Tafel 04 war
   komplett grau). Deshalb ein Fensterhöhe Polster unten, das der
   negative Außenabstand sofort wieder hergibt: die Welten-Sektion
   schiebt sich über die letzte Tafel, so wie jede Tafel über ihre
   Vorgängerin. Die Welten-Sektion braucht dafür z-index über den
   klebenden (= positionierten) Tafeln. */
.ihm-stapel { position: relative; padding-bottom: 100svh; margin-bottom: -100svh; }
.ihm-tafel {
    min-height: 100svh;
    overflow: clip; isolation: isolate;
    /* opak, sonst scheint die vorige Tafel durch */
    background: var(--ihm-bg);
}
.ihm-tafel__innen {
    position: relative; z-index: 1; width: 100%;
    display: grid; gap: 1.5rem clamp(1.5rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 1fr);
    padding-top: 4.5rem; padding-bottom: 3rem;
    transform: translateY(calc(var(--panel-progress, 0) * -3rem));
    opacity: calc(1 - var(--panel-progress, 0) * 0.75);
    will-change: transform, opacity;
}
.ihm-tafel__nr {
    margin: 0 0 0.5rem;
    font-family: var(--ddl-font-mono); font-weight: 700;
    font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); line-height: 1;
    letter-spacing: -0.05em; color: rgba(255, 255, 255, 0.14);
}
.ihm-tafel__text .ihm-lead { max-width: 40ch; }
.ihm-tafel__text .ihm-chips { margin-top: 1.5rem; }
/* Zwei Becher, leicht versetzt — der zweite steht etwas tiefer
   und dahinter, damit die Reihe nicht wie ein Katalog wirkt.
   Auf schmalen Fenstern sind sie DEKO hinter dem Text (absolut,
   unten rechts angeschnitten): als Rasterzeile machten sie die
   Tafel höher als das Fenster, und eine klebende Tafel zeigt ihren
   unteren Teil dann nie — die Becher waren schlicht unsichtbar. */
.ihm-tafel__becher {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem; align-items: end;
    position: absolute; right: -8%; bottom: -6%; width: 62%; max-width: 20rem;
    z-index: -1; opacity: 0.6; pointer-events: none;
}
.ihm-tafel__becher img { filter: drop-shadow(0 1.25rem 2rem rgba(0, 0, 0, 0.55)); }
.ihm-tafel__becher img:last-child { transform: translateY(1.5rem) scale(0.92); opacity: 0.9; }
@media (min-width: 56.25rem) {
    .ihm-tafel__innen { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
    .ihm-tafel__becher {
        position: static; width: auto; max-width: 28rem; margin-inline: auto;
        z-index: auto; opacity: 1;
    }
}

/* Farbwolken je Tafel — aus den beiden Farben der Tafel
   (Basis: Matcha + Ube, Püree: Erdbeer + Mango, …) */
.ihm-tafel__blob {
    position: absolute; border-radius: 50%; z-index: 0;
    filter: blur(70px); pointer-events: none;
    transform: translateY(calc(var(--panel-progress, 0) * 6rem));
}
.ihm-tafel__blob--a { width: 46vw; height: 46vw; left: -14vw; top: 8vh; }
.ihm-tafel__blob--b { width: 54vw; height: 54vw; right: -18vw; bottom: -10vh; }
.ihm-tafel--basis .ihm-tafel__blob--a { background: rgba(143, 182, 90, 0.35); }
.ihm-tafel--basis .ihm-tafel__blob--b { background: rgba(155, 107, 224, 0.4); }
.ihm-tafel--puree .ihm-tafel__blob--a { background: rgba(242, 92, 122, 0.32); }
.ihm-tafel--puree .ihm-tafel__blob--b { background: rgba(245, 178, 51, 0.3); }
.ihm-tafel--sirup .ihm-tafel__blob--a { background: rgba(179, 156, 232, 0.35); }
.ihm-tafel--sirup .ihm-tafel__blob--b { background: rgba(242, 166, 188, 0.32); }
.ihm-tafel--milch .ihm-tafel__blob--a { background: rgba(232, 216, 184, 0.2); }
.ihm-tafel--milch .ihm-tafel__blob--b { background: rgba(255, 255, 255, 0.14); }

/* ── Chips — der Punkt trägt die Farbe der Zutat ──────────── */
.ihm-chips {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 0.6rem;
}
.ihm-chip {
    --chip: var(--ihm-text-mute);
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 1.1rem 0.7rem 0.9rem;
    border: 1px solid var(--ihm-linie-stark); border-radius: var(--ddl-radius-pill);
    background: rgba(255, 255, 255, 0.04);
    font-size: var(--ddl-fs-small); font-weight: 600; color: var(--ihm-text);
    letter-spacing: -0.01em;
}
.ihm-chip::before {
    content: ''; width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none;
    background: var(--chip);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip) 25%, transparent);
}
[data-farbe='matcha']     { --chip: var(--ihm-matcha); }
[data-farbe='ube']        { --chip: var(--ihm-ube); }
[data-farbe='erdbeer']    { --chip: var(--ihm-erdbeer); }
[data-farbe='himbeer']    { --chip: var(--ihm-himbeer); }
[data-farbe='heidelbeer'] { --chip: var(--ihm-heidelbeer); }
[data-farbe='mango']      { --chip: var(--ihm-mango); }
[data-farbe='lavendel']   { --chip: var(--ihm-lavendel); }
[data-farbe='whitechoc']  { --chip: var(--ihm-whitechoc); }
[data-farbe='rose']       { --chip: var(--ihm-rose); }
[data-farbe='hafer']      { --chip: var(--ihm-hafer); }
[data-farbe='kokos']      { --chip: var(--ihm-kokos); }
[data-farbe='kuh']        { --chip: var(--ihm-kuh); }

/* ════════════════════════════════════════════════════════════
   ZWEI WELTEN — Parallax-Split
   ════════════════════════════════════════════════════════════ */
.ihm-welten {
    display: grid; grid-template-columns: minmax(0, 1fr);
    /* über den klebenden Tafeln des Stapels (siehe .ihm-stapel) */
    position: relative; z-index: 2;
    background: var(--ihm-bg);
}
@media (min-width: 47.5rem) {
    .ihm-welten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ihm-welt {
    position: relative; overflow: clip; isolation: isolate;
    min-height: 70svh;
    display: flex; align-items: flex-end;
    padding: 3rem var(--ihm-rand);
}
/* Das Bild ist höher als sein Fenster — Platz für den Parallax-Weg */
.ihm-welt__bild { position: absolute; inset: -12% 0; z-index: -1; }
.ihm-welt__bild picture, .ihm-welt__bild img { width: 100%; height: 100%; }
/* Der Ausschnitt liegt tief: oben im Key-Visual steht das Logo,
   das im Halbfenster nur angeschnitten wäre — die Becher sind der
   Blickfang. Hochkant passt fast das ganze Bild, dort darf es
   höher sitzen. */
.ihm-welt__bild img { object-fit: cover; object-position: 50% 78%; }
@media (max-width: 47.49rem) {
    .ihm-welt__bild img { object-position: 50% 62%; }
}
.ihm-welt::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to top, rgba(10, 11, 10, 0.92) 0%, rgba(10, 11, 10, 0.45) 40%, rgba(10, 11, 10, 0.05) 70%);
}
.ihm-welt__text { position: relative; max-width: 26rem; }
.ihm-welt__text h2 {
    margin: 0; font-size: clamp(2.5rem, 2rem + 3vw, 4rem); font-weight: 800;
    letter-spacing: var(--ddl-track-display); line-height: 1; color: #fff;
}
.ihm-welt__text p:last-child { margin: 0.75rem 0 0; color: rgba(255, 255, 255, 0.85); font-size: var(--ddl-fs-body); }
.ihm-welt--ube .ihm-eyebrow { color: var(--ihm-ube-hell); }

/* ════════════════════════════════════════════════════════════
   WER — Editorial: Figur links, Text rechts
   ════════════════════════════════════════════════════════════
   Opak (--tint) und über den klebenden Tafeln: #welten ist auf
   Desktop nur 70svh hoch, der Stapel-Überhang (100svh, siehe
   .ihm-stapel) reicht 30svh darunter — diese Sektion schluckt ihn.
   Regel 1 strikt: Bild und Glow bekommen ihre Lage NUR über
   inset/position, nie über translate (die Engine schreibt
   style.transform inline); die Blase hat in CSS KEIN
   transform/opacity (tile-pop schreibt beides), nur den Ursprung.
   Basisregeln VOR den Media-Blöcken — bei gleicher Spezifität
   gewinnt die spätere Quelle. */
.ihm-wer { position: relative; z-index: 2; }
.ihm-wer__bahn {
    display: grid; gap: clamp(2.5rem, 6vw, 5rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}
/* Figur: kein eigener Besitzer — sie scrollt einfach mit. Nur ihre
   KINDER bewegen sich. perspective sitzt HIER, nicht auf der Bahn:
   isolation:isolate ist eine Gruppierungs-Eigenschaft und flacht jede
   3D-Kette ab — preserve-3d wäre tot, der tile-pop der Blase rotierte
   ohne Tiefe (gemessen 07.09.: Blase bei 60° 23,8 px = reine
   Projektion; mit perspective am figure 13,75 px). Die Isolation
   BLEIBT: sie hält den Stapelkontext Glow z0 / Bild z1 / Blase z2
   zusammen, und der Perspektiv-Ursprung liegt in der Figur, nicht in
   der Bahnmitte. */
.ihm-wer__figur {
    position: relative; margin: 0;
    width: 100%; max-width: 24rem; justify-self: center;
    perspective: 1400px; isolation: isolate;
}
/* Glow: Matcha→Ube-Schimmer hinter dem Oberkörper, gegenläufiges
   Parallax (−0,05) zur Figur (0,08) = Tiefe. will-change und der
   Reduced-Motion-Fall kommen aus ddl-motion.css ([data-parallax]). */
.ihm-wer__glow {
    position: absolute; inset: 14% -12% auto; aspect-ratio: 1;
    border-radius: 50%; z-index: 0; pointer-events: none;
    filter: blur(70px);
    background: radial-gradient(circle,
        rgba(143, 182, 90, 0.38) 0%,
        rgba(155, 107, 224, 0.18) 45%,
        transparent 68%);
}
/* Bild: freigestellte Figur, unten weich ins Dunkel (Fade ab 72 %) —
   versteckt den Hosensaum, wo die Maske am unsichersten ist, und
   verankert sie im Grund. KEIN drop-shadow: ein Filter auf einer
   880-px-Alphafigur wird bei Parallax je Frame neu gerastert. */
.ihm-wer__bild {
    position: relative; z-index: 1;
    -webkit-mask-image: linear-gradient(#000 72%, transparent 100%);
            mask-image: linear-gradient(#000 72%, transparent 100%);
}
.ihm-wer__bild img { width: 100%; }
/* Sprechblase: dunkle Karte mit Schwanz, oben rechts neben dem Kopf —
   dort, wo sie im Terminal-Bild eingebrannt war. transform-origin am
   Schwanz: sie wächst aus ihrem Ursprung (Regel 6, wie ein Popover). */
.ihm-wer__blase {
    position: absolute; z-index: 2; top: 0;
    /* 0,5 rem Überhang, wo Platz ist — aber nie näher als 1,25 rem an
       die Fensterkante (auf 390 px füllt die Figur die Bahn, der
       Überhang brach den 20-px-Seitenrand; gemessen 07.09.). */
    right: max(-0.5rem, calc(1.25rem - var(--ihm-rand)));
    padding: 0.8rem 1.15rem;
    border: 1px solid var(--ihm-linie-stark); border-radius: 1.25rem;
    background: var(--ihm-bg-3);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.5);
    font-size: clamp(1rem, 0.85rem + 0.8vw, 1.25rem); line-height: 1;
    transform-origin: 12% 100%;
}
.ihm-wer__blase::after {
    content: ''; position: absolute; left: 1.1rem; bottom: -0.45rem;
    width: 0.8rem; height: 0.8rem; background: inherit;
    border-right: 1px solid var(--ihm-linie-stark);
    border-bottom: 1px solid var(--ihm-linie-stark);
    transform: rotate(45deg);
}
.ihm-wer__text .ihm-lead { max-width: 40ch; }
.ihm-wer__knopf { margin-top: 1.5rem; }
@media (min-width: 56.25rem) {
    .ihm-wer__bahn { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
/* Schmal: DIESELBE Datei als 4:5-Brustbild (Kopf bis Hüfte samt
   Becher) — kein zweites Asset. */
@media (max-width: 56.24rem) {
    .ihm-wer__figur { max-width: 22rem; }
    .ihm-wer__bild { aspect-ratio: 4 / 5; overflow: hidden; }
    .ihm-wer__bild img { height: 100%; object-fit: cover; object-position: 50% 0; }
    .ihm-wer__glow { inset: 6% -12% auto; filter: blur(50px); }
}

/* ════════════════════════════════════════════════════════════
   WO
   ════════════════════════════════════════════════════════════ */
/* Die Fassade als Auftakt: helle Linienarchitektur auf dem dunklen
   Grund, darunter ein weicher Matcha→Ube-Schimmer (::before, nicht
   als filter — das Bild ist Scrub-Item, ein Filter würde bei jedem
   Frame neu gerastert). */
.ihm-wo__haus {
    position: relative; isolation: isolate;
    margin: 0 auto clamp(2.5rem, 6vw, 4rem);
    max-width: 64rem;
}
.ihm-wo__haus::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    left: 10%; right: 10%; top: 20%; bottom: -20%;
    border-radius: 50%; filter: blur(60px);
    background: radial-gradient(ellipse at center,
        rgba(143, 182, 90, 0.22) 0%, rgba(155, 107, 224, 0.14) 50%, transparent 72%);
}
.ihm-wo__haus img { width: 100%; }
.ihm-wo {
    display: grid; gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 56.25rem) {
    .ihm-wo { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
}
.ihm-wo__karte {
    border: 1px solid var(--ihm-linie); border-radius: var(--ddl-radius-lg);
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--ihm-bg-3);
    transform-style: preserve-3d;
}
.ihm-wo__logo { width: 9rem; margin-bottom: 1.25rem; opacity: 0.92; }
.ihm-wo__karte address {
    font-style: normal; color: var(--ihm-text-soft);
    font-size: var(--ddl-fs-small); line-height: 1.7;
}
.ihm-wo__karte address span { color: var(--ihm-matcha-hell); font-weight: 600; }
.ihm-wo__karte .ihm-knopf { margin-top: 1.25rem; }

/* ════════════════════════════════════════════════════════════
   FUSS
   ════════════════════════════════════════════════════════════ */
.ihm-fuss {
    border-top: 1px solid var(--ihm-linie);
    padding: clamp(3rem, 7vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
    background: var(--ihm-bg);
}
.ihm-fuss__oben { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 47.5rem) {
    .ihm-fuss__oben { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
}
.ihm-fuss h2 {
    margin: 0 0 0.9rem;
    font-size: 0.8125rem; font-weight: 600; color: var(--ihm-text);
}
.ihm-fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ihm-fuss a { color: var(--ihm-text-soft); text-decoration: none; font-size: 0.8125rem; }
.ihm-fuss a:hover { color: var(--ihm-text); }
.ihm-fuss__logo { width: 7rem; margin-bottom: 1rem; }
.ihm-fuss__satz { margin: 0; color: var(--ihm-text-soft); font-size: var(--ddl-fs-small); max-width: 34ch; }
.ihm-fuss__partner { margin: 1.5rem 0 0; }
.ihm-fuss__partner img { width: 8.5rem; opacity: 0.75; }
.ihm-fuss__unten {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-top: 1.5rem; border-top: 1px solid var(--ihm-linie);
    display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; align-items: center;
    font-size: 0.8125rem; color: var(--ihm-text-mute);
}
.ihm-fuss__unten p { margin: 0; margin-right: auto; }
.ihm-fuss__unten--solo { margin-top: 0; border-top: 0; }

/* ── Rechtstext-Seiten ──────────────────────────────────────── */
.ihm-recht { padding: 7.5rem 0 5rem; max-width: 48rem; }
.ihm-recht h1 {
    font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); font-weight: 800;
    letter-spacing: var(--ddl-track-title); line-height: 1.1; margin: 0 0 2rem;
}
.ihm-recht h2 {
    font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em;
    margin: 2.5rem 0 0.75rem;
}
.ihm-recht p, .ihm-recht li { color: var(--ihm-text-soft); font-size: var(--ddl-fs-small); }
.ihm-recht mark {
    background: rgba(198, 230, 154, 0.16); color: var(--ihm-matcha-hell);
    padding: 0.1em 0.35em; border-radius: 3px;
}

/* ── Reduced Motion (Regel 8) — Seiteneigene Keyframes und die
   CSS-gerechneten Bühnen stehen dann auf ihrem Endzustand. ── */
@media (prefers-reduced-motion: reduce) {
    .ihm-mark__glow, .ihm-mark__ring { animation: none; }
    .ihm-count__zahl.is-frisch { animation: none; }
    .ihm-zoom { --p: 1; }
    .ihm-zoom__becher { transform: none; clip-path: none; }
    .ihm-zoom__texte { gap: 1.5rem; grid-template-areas: none; }
    .ihm-zoom__text { grid-area: auto; opacity: 1; transform: none; }
    .ihm-tafel__innen, .ihm-tafel__blob { transform: none; opacity: 1; }
    /* [data-parallax]-Elemente stellt ddl-motion.css selbst still;
       hier nur, was die Engine nicht kennt: der Parallax-Weg des
       Welten-Bilds fällt weg, also auch der Überhang. */
    .ihm-welt__bild { inset: 0; }
}

/* ── Druck ──────────────────────────────────────────────────── */
@media print {
    .ihm-nav, .ihm-hero__pfeil, .ihm-mark__glow, .ihm-mark__ring, .ihm-warum__film,
    .ihm-wer__glow, .ihm-wer__blase { display: none; }
    body { background: #fff; color: #000; }
    .ihm-zoom { height: auto; }
    .ihm-zoom__buehne { position: static; height: auto; }
}