/* ============================================================
   ChiChi’s Magic Fries · Seiten-Stylesheet
   ============================================================
   Aufbau und Bewegung wie ihatematchabut (css/matcha.css): Apple-
   Event-Kachel, voller DDL-Stack aus /densch-shared/ddl/
   (ddl-typography, ddl-motion, ddl-landing). FARBEN UND SCHRIFTEN
   kommen aus der CI von ChiChi’s Magic Fries (Ansage Dennis
   06.11.2026), deshalb HELL statt dunkel:

     60 % Cremeweiß #F5F3EF   (Grund)
     30 % Mustard Gold #E0A106 (Band, Sterne, Magic-Trail)
     10 % Tomato Red #C8382B + Logo-Braun #3A2410 (Schrift, Linien)
     Magic Purple #3B1E5C / #5A2E8A NUR als Akzent für den
     Magic-Hintergrund, NIE als Fläche unter Text.

   Schriften: Titan One (Ersatz für Cooper Black, „MAGIC FRIES" und
   Überschriften), Lobster („ChiChi’s"), beide self-hosted in
   /densch-shared/fonts/. Fließtext bleibt die Hausschrift Urbanist
   (var(--ddl-font-sans); die CI nennt Poppins, Urbanist ist ihr
   geometrischer Zwilling und Hausregel).

   Kontraste (WCAG, gerechnet): Braun auf Creme 13:1, Rot auf Weiß
   5,7:1, Weiß auf Rot 5,7:1, Braun auf Gold 6,4:1. Gold auf Creme
   nur 2,1:1 → Gold NIE als Schriftfarbe, nur als Fläche/Stern/Linie.

   Regel 3: kein freies Easing, keine freien Dauern. Regel 1: die
   Sichtbarkeit von Scrub-Items gehört der Engine.
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
    --cmf-creme:       #F5F3EF;
    --cmf-weiss:       #FFFFFF;
    --cmf-gold:        #E0A106;
    --cmf-gold-hell:   #F3D27A;
    --cmf-rot:         #C8382B;
    --cmf-rot-dunkel:  #A72C21;
    --cmf-braun:       #3A2410;
    --cmf-lila:        #3B1E5C;
    --cmf-lila-hell:   #5A2E8A;

    --cmf-text:        var(--cmf-braun);
    --cmf-text-soft:   rgba(58, 36, 16, 0.78);
    --cmf-text-mute:   rgba(58, 36, 16, 0.6);
    --cmf-linie:       rgba(58, 36, 16, 0.12);
    --cmf-linie-stark: rgba(58, 36, 16, 0.28);

    --cmf-font-titel:  'Titan One', var(--ddl-font-sans, 'Century Gothic', system-ui, sans-serif);
    --cmf-font-schrift: 'Lobster', 'Brush Script MT', cursive;

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

    /* ── DDL-Brücke ───────────────────────────────────────── */
    --ddl-accent:          var(--cmf-rot);
    --ddl-accent-tint:     rgba(200, 56, 43, 0.1);
    --ddl-accent-glow:     rgba(224, 161, 6, 0.35);
    --ddl-text:            var(--cmf-text);
    --ddl-text-soft:       var(--cmf-text-soft);
    --ddl-text-muted:      var(--cmf-text-mute);
    --ddl-text-on-accent:  #FFFFFF;
    --ddl-bg-light:        var(--cmf-creme);
    --ddl-bg-card:         var(--cmf-weiss);
    --ddl-border:          var(--cmf-linie);
    --ddl-radius-pill:     980px;
    --ddl-radius-lg:       18px;
    --ddl-radius-md:       12px;
    --ddl-material-bg:     rgba(245, 243, 239, 0.8);
    --ddl-material-solid:  #F5F3EF;
    --ddl-material-edge:   rgba(58, 36, 16, 0.14);
    --accent:              var(--cmf-rot);

    color-scheme: light;
}

/* ── 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(--cmf-creme);
    color: var(--cmf-text);
    font-family: var(--ddl-font-sans, 'Century Gothic', 'Avenir Next', Avenir, system-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) */
img { max-width: 100%; height: auto; display: block; }

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

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

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

/* ── Typo-Bausteine ─────────────────────────────────────────── */
.cmf-eyebrow {
    font-size: 0.75rem;
    color: var(--cmf-rot);
    margin: 0 0 0.9rem;
}
/* Titan One hat nur EINEN Schnitt: font-weight bleibt 400, sonst
   fettet der Browser künstlich nach (faux bold). */
.cmf-display,
.cmf-titel {
    font-family: var(--cmf-font-titel);
    font-weight: 400;
    color: var(--cmf-braun);
    margin: 0;
    text-wrap: balance;
}
.cmf-display {
    font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
    letter-spacing: -0.01em;
    line-height: 1.02;
}
.cmf-titel {
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    letter-spacing: -0.005em;
    line-height: 1.08;
}
.cmf-lead {
    font-size: var(--ddl-fs-lead);
    line-height: 1.5;
    color: var(--cmf-text-soft);
    max-width: 44ch;
    margin: 1.25rem 0 0;
    text-wrap: pretty;
}
.cmf-lead--mitte { margin-inline: auto; }

/* ── Wortmarke (SSOT): „ChiChi’s" rot in Lobster, „Magic Fries"
   in Titan One. Nav, Hero und Fuß tragen dieselbe Klasse. ─── */
.cmf-wortmarke {
    display: inline-flex; align-items: baseline; gap: 0.3em;
    margin: 0; color: var(--cmf-braun); text-decoration: none;
    white-space: nowrap; line-height: 1;
}
.cmf-wortmarke span {
    font-family: var(--cmf-font-schrift); font-weight: 400;
    color: var(--cmf-rot); font-size: 1.12em;
}
.cmf-wortmarke em {
    font-family: var(--cmf-font-titel); font-weight: 400; font-style: normal;
    text-transform: uppercase; letter-spacing: 0.01em;
}

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

/* ════════════════════════════════════════════════════════════
   NAVIGATION · Material (DDL-Regel 9)
   ════════════════════════════════════════════════════════════ */
.cmf-nav { position: fixed; inset: 0 0 auto 0; z-index: 100; }
.cmf-nav__innen {
    max-width: var(--cmf-bahn); margin: 0 auto;
    padding: 0 var(--cmf-rand); height: 3.25rem;
    display: flex; align-items: center; gap: 1.5rem;
}
.cmf-nav__marke { font-size: 1.0625rem; margin-right: auto; align-items: center; }
/* Das C-Icon vor der Wortmarke (CI: funktioniert allein als Icon) */
.cmf-nav__c { width: 2.6rem; height: auto; margin-right: 0.1rem; }
.cmf-nav__links { display: flex; align-items: center; gap: 1.5rem; }
.cmf-nav__links a {
    font-size: 0.8125rem; font-weight: 600; color: var(--cmf-text-soft);
    text-decoration: none;
    transition: color var(--ddl-dur-ui) var(--ddl-ease);
}
.cmf-nav__links a:hover { color: var(--cmf-rot); }
@media (max-width: 53.75rem) {
    .cmf-nav__links { display: none; }
}
@media (max-width: 26.25rem) {
    .cmf-nav__innen { gap: 0.75rem; }
    .cmf-nav__marke { font-size: 0.9375rem; }
}

/* ── Knöpfe ─────────────────────────────────────────────────── */
.cmf-knopf {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    border: 1.5px solid transparent; border-radius: var(--ddl-radius-pill);
    font-weight: 700; 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);
}
.cmf-knopf--rot { background: var(--cmf-rot); color: #fff; }
.cmf-knopf--rot:hover { background: var(--cmf-rot-dunkel); box-shadow: 0 0.5rem 1.5rem rgba(200, 56, 43, 0.28); }
.cmf-knopf--geist { border-color: var(--cmf-linie-stark); color: var(--cmf-braun); }
.cmf-knopf--geist:hover { border-color: var(--cmf-braun); }
.cmf-knopf--klein { padding: 0.5rem 1rem; font-size: 0.8125rem; }

/* ════════════════════════════════════════════════════════════
   HERO · Event-Teaser (apple.com-Kachel, hell)
   ════════════════════════════════════════════════════════════ */
.cmf-hero {
    position: relative;
    min-height: 100svh;
    display: grid; place-items: center;
    padding: 4.5rem var(--cmf-rand) 2.5rem;
    overflow: clip; isolation: isolate;
    text-align: center;
    background: var(--cmf-creme);
}
.cmf-hero__grund { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Zwei warme Wolken (Gold), die per Parallax gegeneinander laufen */
.cmf-hero__wolke { position: absolute; border-radius: 50%; filter: blur(70px); }
.cmf-hero__wolke--a {
    width: 60vw; height: 60vw; left: -18vw; top: -22vw;
    background: radial-gradient(circle, rgba(224, 161, 6, 0.28), transparent 65%);
}
.cmf-hero__wolke--b {
    width: 70vw; height: 70vw; right: -24vw; bottom: -30vw;
    background: radial-gradient(circle, rgba(243, 210, 122, 0.45), transparent 65%);
}

/* Funkeln: sieben goldene Sterne (CI: „Sterne" in Mustard Gold).
   Reine Deko, [data-loop] pausiert offscreen, Reduced Motion stellt
   sie still. 4,8-s-Zyklus, gegeneinander versetzt. */
.cmf-funken { position: absolute; inset: 0; }
.cmf-funken i,
.cmf-stern {
    --g: 0.9rem;
    width: var(--g); height: var(--g);
    background: var(--cmf-gold);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.cmf-funken i {
    --x: 50%; --y: 50%;
    position: absolute; left: var(--x); top: var(--y);
    opacity: 0;
    animation: cmfFunkeln 4.8s ease-in-out infinite;
}
.cmf-funken i:nth-child(1) { --x: 12%; --y: 20%; animation-delay: -0.3s; }
.cmf-funken i:nth-child(2) { --x: 86%; --y: 16%; --g: 1.3rem; animation-delay: -1.9s; }
.cmf-funken i:nth-child(3) { --x: 7%;  --y: 66%; --g: 0.7rem; animation-delay: -3.1s; }
.cmf-funken i:nth-child(4) { --x: 92%; --y: 60%; animation-delay: -0.9s; }
.cmf-funken i:nth-child(5) { --x: 22%; --y: 90%; --g: 0.6rem; animation-delay: -2.6s; }
.cmf-funken i:nth-child(6) { --x: 76%; --y: 88%; --g: 1rem; animation-delay: -4.2s; }
.cmf-funken i:nth-child(7) { --x: 60%; --y: 8%;  --g: 0.65rem; animation-delay: -1.4s; }
@keyframes cmfFunkeln {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    45%      { opacity: 1; transform: scale(1) rotate(45deg); }
    60%      { opacity: 0.7; transform: scale(0.85) rotate(60deg); }
}

.cmf-hero__innen {
    position: relative; width: 100%; max-width: 46rem;
    display: flex; flex-direction: column; align-items: center;
}
.cmf-hero .cmf-eyebrow { margin-bottom: 0; }

/* ── Das Logo ────────────────────────────────────────────────
   CI: auf Creme/Weiß (der weiße Sticker-Rand steckt im Bild), Schutz-
   raum rundum ≥ Höhe des „M" in „MAGIC" (≈ 6 % der Logohöhe → der
   Abstand zu Eyebrow und Pille unten ist größer). Das Logo steht still;
   der goldene Schein dahinter atmet (Loop, Regel 7, [data-loop]
   pausiert offscreen). Größe so, dass Pille, Satz, Knöpfe und Countdown
   noch in EINE Fensterhöhe passen (gemessen 1440×900, 390×844). */
.cmf-hero__logo {
    position: relative; isolation: isolate;
    width: clamp(14rem, 34vw, 18rem);
    margin: 0.75rem 0 0;
}
.cmf-hero__logo::before {
    content: ''; position: absolute; z-index: -1; inset: 8% -14%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 161, 6, 0.38) 0%, rgba(243, 210, 122, 0.2) 40%, transparent 70%);
    filter: blur(24px);
    animation: cmfAtmen 8s ease-in-out infinite;
    pointer-events: none;
}
.cmf-hero__logo img {
    width: 100%;
    filter: drop-shadow(0 1rem 1.75rem rgba(58, 36, 16, 0.22));
}
@keyframes cmfAtmen {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.06); opacity: 0.75; }
}

.cmf-hero__badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin: 1rem 0 0; padding: 0.4rem 0.95rem 0.4rem 0.75rem;
    border: 1.5px solid var(--cmf-gold); border-radius: var(--ddl-radius-pill);
    background: var(--cmf-weiss);
    font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.01em; color: var(--cmf-braun);
}
.cmf-hero__badge i {
    width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none;
    background: var(--cmf-rot);
    box-shadow: 0 0 0 3px rgba(200, 56, 43, 0.2);
}
.cmf-hero__titel {
    margin: 0.9rem 0 0;
    font-family: var(--cmf-font-titel); font-weight: 400;
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
    line-height: 1.1; color: var(--cmf-braun);
}
.cmf-hero__sub {
    margin: 0.75rem auto 0; max-width: 34rem;
    font-size: var(--ddl-fs-lead); line-height: 1.45;
    color: var(--cmf-text-soft);
    text-wrap: pretty;
}
.cmf-hero__sub a { font-weight: 700; text-underline-offset: 0.2em; }
.cmf-hero__sub time { font-weight: 700; color: var(--cmf-braun); }
.cmf-hero__cta {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;
    margin-top: 1.5rem;
}
@media (max-width: 34rem) {
    .cmf-hero__sub { font-size: var(--ddl-fs-body); }
    .cmf-hero__cta { gap: 0.5rem; }
    .cmf-hero__cta .cmf-knopf { padding: 0.7rem 1.2rem; font-size: 0.875rem; }
}
/* Niedrige Fenster (1280×720): Marke eine Stufe kleiner, damit der
   Countdown in der Falz bleibt. Steht HINTER den Basisregeln. */
/* Gemessen 06.11.2026 auf 1280×720: ohne diesen Block lag die
   Countdown-Beschriftung ~60 px unter der Falz. */
@media (max-height: 47.5rem) {
    .cmf-hero { padding-top: 3.75rem; padding-bottom: 1.5rem; }
    .cmf-hero__logo { width: 12rem; margin-top: 0.5rem; }
    .cmf-hero__badge { margin-top: 0.75rem; }
    .cmf-hero__titel { margin-top: 0.6rem; font-size: 1.75rem; }
    .cmf-hero__cta { margin-top: 1.1rem; }
    .cmf-count { margin-top: 1rem; }
}

/* ── Countdown im goldenen Band ──────────────────────────────
   CI: Gold ist das „Band". REGEL 11 (Verwandlung): um 11:11 erscheint
   kein Banner, DIESES Element wird zur Ansage. Alle Zustände in
   derselben Rasterzelle, deshalb springt nichts. */
.cmf-count {
    display: grid; grid-template-areas: 'stapel';
    justify-items: center; align-items: center;
    margin-top: clamp(1.25rem, 3vw, 2rem);
    padding: 0.9rem clamp(1.25rem, 4vw, 2rem);
    border-radius: 1.25rem;
    background: var(--cmf-gold);
    box-shadow: 0 0.75rem 2rem rgba(224, 161, 6, 0.3);
    min-height: 5.25rem;
}
.cmf-count > * { grid-area: stapel; }
.cmf-count__uhr,
.cmf-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);
}
.cmf-count__wort {
    margin: 0;
    opacity: 0; transform: translateY(0.5rem) scale(0.96); filter: blur(6px);
    pointer-events: none;
    font-family: var(--cmf-font-titel); font-weight: 400;
    font-size: clamp(1.125rem, 0.9rem + 1.2vw, 1.5rem);
    line-height: 1.2; color: var(--cmf-braun);
}
.cmf-count__wort b { font-weight: inherit; color: var(--cmf-weiss); -webkit-text-stroke: 0.04em var(--cmf-braun); paint-order: stroke fill; }
.cmf-count[data-zustand='laeuft'] .cmf-count__uhr,
.cmf-count[data-zustand='vorbei'] .cmf-count__uhr {
    opacity: 0; transform: translateY(-0.5rem) scale(0.98); filter: blur(6px);
    pointer-events: none;
}
.cmf-count[data-zustand='laeuft'] .cmf-count__wort--laeuft,
.cmf-count[data-zustand='vorbei'] .cmf-count__wort--vorbei {
    opacity: 1; transform: none; filter: none; pointer-events: auto;
}
.cmf-count__uhr { display: flex; align-items: flex-start; gap: clamp(0.8rem, 3vw, 1.5rem); }
.cmf-count__feld { text-align: center; min-width: 3.2rem; }
/* Titan One hat keine Tabellenziffern: die feste Feldbreite hält
   die Uhr ruhig, wenn eine 1 auf eine 0 folgt. */
.cmf-count__zahl {
    display: block;
    font-family: var(--cmf-font-titel); font-weight: 400;
    font-size: clamp(1.625rem, 1rem + 2.6vw, 2.5rem);
    line-height: 1; color: var(--cmf-braun);
}
.cmf-count__zahl.is-frisch { animation: cmfSetzen var(--ddl-dur-ui) var(--ddl-ease); }
@keyframes cmfSetzen {
    from { transform: translateY(0.12em) scale(0.9); opacity: 0.35; }
    to   { transform: none; opacity: 1; }
}
.cmf-count__wort-klein {
    display: block; margin-top: 0.35rem;
    font-size: 0.625rem; font-weight: 700;
    letter-spacing: var(--ddl-track-caps); text-transform: uppercase;
    color: var(--cmf-braun);
}
.cmf-count__teiler {
    width: 1.5px; flex: none;
    height: clamp(1.625rem, 1rem + 2.6vw, 2.5rem);
    background: rgba(58, 36, 16, 0.3);
}

/* ── Scroll-Hinweis ─────────────────────────────────────────── */
.cmf-hero__pfeil {
    position: absolute; right: var(--cmf-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: var(--cmf-text-mute);
    text-decoration: none;
}
.cmf-hero__pfeil i {
    display: block; width: 1px; height: 3rem;
    background: linear-gradient(to bottom, rgba(58, 36, 16, 0.45), transparent);
}
@media (max-width: 53.75rem) { .cmf-hero__pfeil { display: none; } }

/* ════════════════════════════════════════════════════════════
   DIE IDEE · Text links, Pommes-Bühne rechts
   ════════════════════════════════════════════════════════════ */
.cmf-idee {
    display: grid; gap: clamp(2rem, 6vw, 4.5rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    perspective: 1400px;
}
@media (min-width: 56.25rem) {
    .cmf-idee { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.cmf-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(--cmf-linie); border: 1px solid var(--cmf-linie);
    border-radius: var(--ddl-radius-lg); overflow: hidden;
}
.cmf-fakten li {
    background: var(--cmf-weiss);
    padding: 1.1rem 1rem;
    display: flex; flex-direction: column; gap: 0.3rem;
}
.cmf-fakten b {
    font-family: var(--cmf-font-titel); font-weight: 400;
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem); line-height: 1;
    color: var(--cmf-rot);
}
.cmf-fakten span { font-size: 0.8125rem; color: var(--cmf-text-soft); }
@media (min-width: 30rem) {
    .cmf-fakten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Die Bühne ist ein „Magic-Hintergrund" (Lila als Akzent, kein Text
   darauf). Gold-Sterne funkeln, die Tüte schwebt. */
.cmf-idee__buehne {
    position: relative;
    border-radius: 1.75rem; overflow: hidden;
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(60% 50% at 50% 45%, rgba(224, 161, 6, 0.28), transparent 70%),
        radial-gradient(circle at 30% 25%, var(--cmf-lila-hell) 0%, var(--cmf-lila) 75%);
    box-shadow: 0 2.5rem 5rem rgba(59, 30, 92, 0.28);
    transform-style: preserve-3d;
    display: grid; place-items: center;
}
.cmf-idee__tuete {
    position: relative; width: 56%;
    animation: cmfSchweben 5.2s ease-in-out infinite alternate;
}
.cmf-idee__tuete svg {
    display: block; width: 100%; height: auto;
    filter: drop-shadow(0 1.5rem 2rem rgba(0, 0, 0, 0.4));
}
.cmf-idee__tuete .cmf-stern { position: absolute; animation: cmfFunkeln 4.8s ease-in-out infinite; }
.cmf-idee__tuete .cmf-stern:nth-of-type(1) { --g: 1.5rem; left: -16%; top: 6%; animation-delay: -0.6s; }
.cmf-idee__tuete .cmf-stern:nth-of-type(2) { --g: 1.1rem; right: -18%; top: 28%; animation-delay: -2.2s; }
.cmf-idee__tuete .cmf-stern:nth-of-type(3) { --g: 0.85rem; left: -8%; bottom: 12%; animation-delay: -3.7s; }
@keyframes cmfSchweben {
    from { transform: translateY(0) rotate(-2deg); }
    to   { transform: translateY(-4%) rotate(2deg); }
}

/* ════════════════════════════════════════════════════════════
   CHICHI · auf Gold (die 30-%-Fläche), Figur links, Text rechts
   ════════════════════════════════════════════════════════════
   Regel 1 strikt: Bild und Glow bekommen ihre Lage NUR über
   inset/position (die Engine schreibt style.transform inline);
   die Blase hat in CSS KEIN transform/opacity (tile-pop). */
.cmf-chichi .cmf-eyebrow { color: var(--cmf-braun); }
.cmf-chichi .cmf-lead { color: var(--cmf-braun); }
.cmf-chichi__bahn {
    display: grid; gap: clamp(2.5rem, 6vw, 5rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}
/* perspective HIER, nicht auf der Bahn: isolation:isolate flacht
   preserve-3d ab (gemessen bei ihatematchabut 07.09.). */
.cmf-chichi__figur {
    position: relative; margin: 0;
    width: 100%; max-width: 24rem; justify-self: center;
    perspective: 1400px; isolation: isolate;
}
.cmf-chichi__glow {
    position: absolute; inset: 10% -10% auto; aspect-ratio: 1;
    border-radius: 50%; z-index: 0; pointer-events: none;
    filter: blur(60px);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, transparent 68%);
}
.cmf-chichi__bild { position: relative; z-index: 1; }
/* NUR das Foto (direktes <picture> der Figur), nicht das C im Platzhalter */
.cmf-chichi__bild > picture img {
    width: 100%; border-radius: 1.5rem;
    border: 6px solid var(--cmf-weiss);
    box-shadow: 0 2rem 4rem rgba(58, 36, 16, 0.3);
}
/* «Platzhalter» bis das Foto da ist: das C-Icon auf Creme, 4:5,
   mit weißem Rand wie ein Sticker */
.cmf-chichi__platz {
    aspect-ratio: 4 / 5; border-radius: 1.5rem;
    display: grid; place-items: center;
    background: var(--cmf-creme);
    border: 6px solid var(--cmf-weiss);
    box-shadow: 0 2rem 4rem rgba(58, 36, 16, 0.3);
}
.cmf-chichi__platz img { width: 62%; margin-inline: auto; }
.cmf-chichi__blase {
    position: absolute; z-index: 2; top: 1.5rem;
    right: max(-0.5rem, calc(1.25rem - var(--cmf-rand)));
    margin: 0; padding: 0.75rem 1.1rem;
    border-radius: 1.25rem;
    background: var(--cmf-weiss);
    box-shadow: 0 1rem 2.5rem rgba(58, 36, 16, 0.25);
    font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.125rem); font-weight: 800;
    line-height: 1; color: var(--cmf-rot);
    transform-origin: 12% 100%;
}
.cmf-chichi__blase::after {
    content: ''; position: absolute; left: 1.1rem; bottom: -0.4rem;
    width: 0.8rem; height: 0.8rem; background: inherit;
    transform: rotate(45deg);
}
.cmf-chichi__text .cmf-lead { max-width: 40ch; }
.cmf-chichi__knopf { margin-top: 1.5rem; }
.cmf-chichi .cmf-knopf--geist { border-color: var(--cmf-braun); }
.cmf-chichi .cmf-knopf--geist:hover { background: var(--cmf-braun); color: var(--cmf-creme); }
@media (min-width: 56.25rem) {
    .cmf-chichi__bahn { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
@media (max-width: 56.24rem) {
    .cmf-chichi__figur { max-width: 20rem; }
}

/* ════════════════════════════════════════════════════════════
   DER LAUNCH · sechs Einsen
   ════════════════════════════════════════════════════════════ */
.cmf-launch { overflow: clip; }
.cmf-launch__zahl {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0 clamp(1rem, 4vw, 3rem);
    margin: 0 0 clamp(2rem, 5vw, 3rem);
    font-family: var(--cmf-font-titel); font-weight: 400;
    font-size: clamp(4rem, 1.5rem + 10vw, 10rem);
    line-height: 1;
}
.cmf-launch__zahl span { color: var(--cmf-rot); }
/* Die Uhrzeit wie „MAGIC FRIES": Papierweiß mit brauner Kontur */
.cmf-launch__zahl span + span {
    color: var(--cmf-weiss);
    -webkit-text-stroke: 0.05em var(--cmf-braun);
    paint-order: stroke fill;
    text-shadow: 0 0.05em 0 var(--cmf-braun);
}
.cmf-launch__cta {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;
    margin-top: 1.75rem;
}

/* ════════════════════════════════════════════════════════════
   WO
   ════════════════════════════════════════════════════════════ */
.cmf-wo__haus {
    position: relative; isolation: isolate;
    margin: 0 auto clamp(2.5rem, 6vw, 4rem);
    max-width: 64rem;
}
.cmf-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(224, 161, 6, 0.22) 0%, transparent 72%);
}
.cmf-wo__haus img { width: 100%; }
.cmf-wo {
    display: grid; gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 56.25rem) {
    .cmf-wo { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
}
.cmf-wo__karte {
    border: 1px solid var(--cmf-linie); border-radius: var(--ddl-radius-lg);
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--cmf-weiss);
    box-shadow: 0 1.5rem 3rem rgba(58, 36, 16, 0.08);
    transform-style: preserve-3d;
}
.cmf-wo__logo { width: 9rem; margin-bottom: 1.25rem; }
.cmf-wo__karte address {
    font-style: normal; color: var(--cmf-text-soft);
    font-size: var(--ddl-fs-small); line-height: 1.7;
}
.cmf-wo__karte address span { color: var(--cmf-rot); font-weight: 700; }
.cmf-wo__karte .cmf-knopf { margin-top: 1.25rem; }

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

/* ── Rechtstext-Seiten ──────────────────────────────────────── */
.cmf-recht { padding: 7.5rem 0 5rem; max-width: 48rem; }
.cmf-recht h1 {
    font-family: var(--cmf-font-titel); font-weight: 400;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
    line-height: 1.1; margin: 0 0 2rem;
}
.cmf-recht h2 {
    font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em;
    margin: 2.5rem 0 0.75rem;
}
.cmf-recht p, .cmf-recht li { color: var(--cmf-text-soft); font-size: var(--ddl-fs-small); }

/* ── Reduced Motion (Regel 8) ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cmf-hero__logo::before, .cmf-idee__tuete { animation: none; }
    .cmf-count__zahl.is-frisch { animation: none; }
    /* Sterne stehen still, aber sichtbar */
    .cmf-funken i, .cmf-idee__tuete .cmf-stern { animation: none; opacity: 0.85; }
}

/* ── Druck ──────────────────────────────────────────────────── */
@media print {
    .cmf-nav, .cmf-hero__pfeil, .cmf-funken, .cmf-idee__buehne,
    .cmf-chichi__glow, .cmf-chichi__blase { display: none; }
    body { background: #fff; }
}