/* ============================================================================
 * Karriaro Mobile — Sprint 151: Greenfield Apple-Page-Rewrite
 *
 * KOMPLETTER NEUAUFBAU. Ersetzt 4738 Zeilen Sprint-91-bis-150.6-Stack durch
 * single-cascade Apple-Token-Architektur (~1100 Zeilen, <200 !important).
 *
 * Inhaber-Auftrag: „Du bist Chefdesigner von Apple und generierst die mobile
 * Variante der Webseite karriaro-webdesign.de. Ich habe jetzt die Faxen dicke.
 * Erstelle die gesamte mobile Version von neu."
 *
 * Editorial-Elemente (Folio-Numbering, Pentagram-Marginalia, Phyllotaxis-Siegel,
 * Pin-Spy, Stagger-Animation, [K]-Stempel) sind per User-Entscheidung radikal
 * entfernt — siehe scripts/build-mobile-pages.mjs Sprint-151-Mutations-Strip.
 *
 * Iframe-Boundary respektiert: .m-poster-frame / .m-poster-stage /
 * .m-poster-chrome bekommen NUR Layout-Properties (aspect-ratio, max-width).
 * Transform/Opacity sind JS-controlled (m-interactions.js mDemoSwiper-Funktion
 * Z. 233-391) und werden hier NICHT überschrieben.
 *
 * Cascade-Reihenfolge:
 *   tokens.css → karriaro-tools.css → Inter-Font → Critical-CSS-inline →
 *   PWA-Head → mobile-overrides.css (LAST = wins)
 * ============================================================================ */

/* ============================================================================
 * 1. APPLE-TOKEN-LAYER
 * ============================================================================ */
@media (max-width: 1023px) {
    :root {
        /* Color-System (iOS 17+ Marketing-Page-DNA) — Sprint 152 Contrast-Tune */
        --apple-ink: #000000;           /* primary text — User-Wunsch pure black */
        --apple-graphite: #5A5A5F;      /* secondary text — Sprint 152: 5.1:1 AAA-near */
        --apple-platinum: #6E6E73;      /* tertiary text — Sprint 152: 4.7:1 AA-konform */
        --apple-snow: #FFFFFF;          /* white surfaces */
        --apple-fog: #F5F5F7;           /* light-grey card-section bg */
        /* 2026-06-04 — iOS-System-Blau raus (klatschte gegen die warme Marke). Buttons/Focus/
           Border = Marken-Navy; Text-Links = warmer Gold-Text (--kr-link-warm), vom dunklen
           Fließtext unterscheidbar. */
        --apple-blue: #1A2E40;          /* Marken-Navy (Buttons/Focus/Border/Spinner) */
        --apple-blue-hover: #0F1F2E;    /* :active — dunkleres Navy */
        --kr-link-warm: #6E5F3F;        /* Text-Link-Akzent (AA 5.97:1 auf Creme) */
        --apple-hairline: rgba(0, 0, 0, 0.12);    /* Sprint 152: 0.08→0.12 WCAG-Divider */
        /* Sprint 152 — 3-Stufen-Card-Shadow-System */
        --apple-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
        --apple-shadow-card-hover: 0 12px 28px rgba(0, 0, 0, 0.12);
        --apple-shadow-card-active: 0 2px 4px rgba(0, 0, 0, 0.08);

        /* Font-Stack */
        --apple-font-display: -apple-system, BlinkMacSystemFont,
            'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif;
        --apple-font-text: -apple-system, BlinkMacSystemFont,
            'SF Pro Text', 'Inter', system-ui, sans-serif;

        /* Easing */
        --apple-ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
        --apple-ease-touch: cubic-bezier(0.4, 0, 0.2, 1);

        /* Spacing-Rhythm */
        --apple-section-pad-y: clamp(72px, 12svh, 96px);
        --apple-section-pad-x: 24px;
        --apple-card-pad: 24px;
        --apple-grid-gap: 16px;

        /* Radius */
        --apple-radius-card: 18px;
        --apple-radius-pill: 980px;
    }
}

/* ============================================================================
 * Sprint 152 — Skip-Link (WCAG 2.4.1 Bypass Blocks)
 * ============================================================================ */
@media (max-width: 1023px) {
    .skip-link {
        position: absolute;
        left: -9999px;
        top: 0;
        background: var(--apple-blue);
        color: #FFFFFF;
        padding: 12px 18px;
        z-index: 100;
        font-family: var(--apple-font-text);
        font-size: 15px;
        font-weight: 500;
        letter-spacing: -0.005em;
        border-radius: 0 0 8px 0;
        text-decoration: none;
    }
    .skip-link:focus {
        left: 0;
    }
}

/* ============================================================================
 * Sprint 152 Iframe-Network-Fallback ENTFERNT (Sprint 167).
 * Grund: User-Report "Vorschau lädt nicht" wurde fälschlicherweise gezeigt
 * weil Sprint 161 data-m-poster-src JS-Setup buggy war (Browser löst leeres
 * iframe-src auf parent-URL auf → JS Early-Return verhindert src-Setting).
 * Sprint 167 hat iframe-src nativ ins HTML gepackt — Fallback nicht mehr nötig.
 * Wenn iframe doch nicht lädt: leere Card statt verwirrender Fehlertext.
 * "Live ansehen ↗"-Link (Sprint 163) bleibt funktional.
 * ============================================================================ */

/* ============================================================================
 * 2. BASE-RESET (Mobile)
 * ============================================================================ */
@media (max-width: 1023px) {
    body {
        margin: 0;
        /* Backstop gegen horizontales „ins Leere wischen": dekorative Elemente
           (z. B. die skalierte Hero-Goldblüte) dürfen NIE die Seite breiter als
           den Viewport machen. `clip` statt `hidden` — bricht kein position:sticky
           (auf Mobile in Nutzung) und keinen verschachtelten Scroll (Demo-Swiper). */
        overflow-x: clip;
        background: var(--apple-snow);
        color: var(--apple-graphite);
        font-family: var(--apple-font-text);
        font-size: 17px;
        line-height: 1.47;
        letter-spacing: -0.005em;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    h1, h2, h3 {
        font-family: var(--apple-font-display);
        color: var(--apple-ink);
        margin: 0;
    }

    p {
        margin: 0;
    }

    a {
        color: var(--kr-link-warm);
        text-decoration: none;
    }

    button {
        font-family: inherit;
        cursor: pointer;
    }

    /* Tap-Highlight raus, Apple-Style */
    a, button {
        -webkit-tap-highlight-color: transparent;
    }

    /* Sprint 152 — :focus-visible Ring global (WCAG 2.4.7) für
       Bluetooth-Keyboard-User auf iPad/iPhone */
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
        outline: 2px solid var(--apple-blue);
        outline-offset: 2px;
        border-radius: 4px;
    }
    /* Pill-Buttons & Cards behalten Pill/Card-Radius beim Fokus */
    .btn:focus-visible,
    .m-hero-primary:focus-visible,
    button[type="submit"]:focus-visible {
        outline-offset: 3px;
        border-radius: var(--apple-radius-pill);
    }
    .m-persona-tile:focus-visible,
    .m-demo-swiper-card:focus-visible {
        border-radius: var(--apple-radius-card);
    }

    /* Desktop-only Hero-Elemente komplett verstecken */
    .hero-with-photo .hero-mockup-block,
    .hero-with-photo .mockup-features,
    .hero-with-photo .mockup-features-list,
    .hero-with-photo .marginalia,
    .hero-with-photo .hero-marginalia,
    .hero-with-photo .hero-portrait,
    .hero-with-photo picture {
        display: none !important;
    }

    /* Hero-Subline auf Mobile sichtbar: Wertversprechen „ein Unikat, das
       mitarbeitet" — steht über dem Demo-Tease (H1 → Subline → Demo-Tease).
       Gutter wie Eyebrow/Demo-Tease/Price (am Hero-Inner-Rand, 0 horizontal). */
    .hero-with-photo .subhead {
        display: block;
        margin: 6px 0 14px;
        max-width: none;
        font-size: 12.5px;
        line-height: 1.45;
        text-align: left;
        color: var(--color-graphite-soft);
    }

    /* Folio-Marker geleert in Sprint 151 — Element bleibt zu HTML-Konsistenz,
       wird aber nicht gerendert */
    .hero-folio-marker {
        display: none;
    }
}

/* ============================================================================
 * 3. LAYOUT-CONTAINER
 * ============================================================================ */
@media (max-width: 1023px) {
    section {
        padding: var(--apple-section-pad-y) var(--apple-section-pad-x);
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Section-Background alternierend: weiß / fog / weiß / fog / ... */
    section.m-demo-swiper-mobile,
    section.m-mag-tools,
    section.m-mag-siegel,
    #kontakt {
        background: var(--apple-fog);
    }
}

/* ============================================================================
 * 4. NAVIGATION + MOBILE-MENU
 * ============================================================================ */
@media (max-width: 1023px) {
    nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: rgba(255, 255, 255, 0.72);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        border-bottom: 1px solid var(--apple-hairline);
        z-index: 80; /* über .mobile-menu (z-index 70) → Burger/X bleibt tappbar, wenn Menü offen */
        display: flex;
        align-items: center;
        padding: 0 var(--apple-section-pad-x);
    }

    /* .inner war content-breit + margin:0 auto (Desktop-Apple-Pattern) → Logo+Burger
       zentriert. Auf Mobil volle Breite → space-between schiebt Logo ganz links,
       Burger ganz rechts (Kanten-Inset = Nav-Padding 24px). */
    nav .inner {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    nav .nav-inner,
    nav > .wrap {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    nav a.logo,
    nav .brand {
        color: var(--apple-ink);
        font-family: var(--apple-font-display);
        font-size: 19px;
        font-weight: 600;
        letter-spacing: -0.018em;
    }

    nav ul {
        display: none;
    }

    /* Hamburger-Toggle — Sprint 152: 48×48 Touch-Target (WCAG 2.5.5) */
    .menu-toggle {
        background: transparent;
        border: none;
        padding: 12px;
        min-width: 48px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--apple-ink);
        cursor: pointer;
    }

    /* Header reduziert auf Logo + Burger — „Erstgespräch" lebt im Menü + Hero/Kontakt */
    nav .cta { display: none; }

    /* Pull-Quote-Interlude nur Desktop — das Motto trägt auf Mobil die
       injizierte „№ 05 · Unser Versprechen"-Sektion (build-mobile-pages.mjs) */
    .kr-quote-hero { display: none; }

    /* ── Award-Menü „Dunkles Editorial-Drama" ──────────────────────────────
       Voll-immersives dunkles Navy-Takeover, das per Vorhang (clip-path) von
       oben aufzieht. Große Fraunces-Creme-Links mit Gold-Folio-Nummern,
       gestaffelt eingeblendet; Phyllotaxis-Gold-Siegel als Akzent. */
    .mobile-menu {
        position: fixed;
        inset: 0;
        z-index: 70;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: clamp(4px, 1.4vh, 14px);
        padding: 88px 32px 40px;
        background: linear-gradient(165deg, #16202C 0%, #111A24 100%);
        visibility: hidden;
        opacity: 0;
        clip-path: inset(0 0 100% 0);
        pointer-events: none;
        transition: clip-path 480ms cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 280ms ease,
                    visibility 480ms;
        counter-reset: mnav;
    }
    .mobile-menu.open,
    .mobile-menu.is-open {
        visibility: visible;
        opacity: 1;
        clip-path: inset(0 0 0 0);
        pointer-events: auto;
    }
    .mobile-menu a {
        position: relative;
        color: #F1EFE7;
        font-family: var(--apple-font-display); /* SF Pro — konsistent mit dem Hero (Founder-Wunsch) */
        font-size: clamp(32px, 8.4vw, 42px);
        font-weight: 400;
        line-height: 1.06;
        letter-spacing: -0.012em;
        padding: clamp(6px, 1.2vh, 12px) 0;
        border: none;
        counter-increment: mnav;
    }
    /* Gold-Folio-Nummer (№ 01 …) via CSS-Counter — kein HTML-Change */
    .mobile-menu a::before {
        content: "№ 0" counter(mnav);
        display: block;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.22em;
        color: #C9A24B;
        opacity: 0.92;
        margin-bottom: 3px;
    }
    /* „Erstgespräch" (letzter Link — :last-of-type, da das Siegel-Div das
       letzte Kind ist; Inline-Indigo wäre auf Navy unsichtbar) → Gold-CTA */
    .mobile-menu a:last-of-type {
        color: #C9A24B !important;
        font-style: italic;
    }
    .mobile-menu a:last-of-type::before { color: #F1EFE7; opacity: 0.6; }

    /* Gestaffelter Item-Reveal nach dem Vorhang */
    @keyframes m-menu-item-in {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: none; }
    }
    .mobile-menu.open a {
        animation: m-menu-item-in 540ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .mobile-menu.open a:nth-child(1) { animation-delay: 130ms; }
    .mobile-menu.open a:nth-child(2) { animation-delay: 200ms; }
    .mobile-menu.open a:nth-child(3) { animation-delay: 270ms; }
    .mobile-menu.open a:nth-child(4) { animation-delay: 340ms; }
    .mobile-menu.open a:nth-child(5) { animation-delay: 410ms; }

    /* Phyllotaxis-Gold-Siegel (per m-interactions.js eingehängt) */
    .m-menu-seal {
        position: absolute;
        bottom: 34px;
        right: 26px;
        width: 84px;
        height: 84px;
        color: rgba(241, 239, 231, 0.5);
        pointer-events: none;
        animation: m-menu-seal-pulse 8s ease-in-out infinite;
    }
    .m-menu-seal svg { display: block; width: 100%; height: 100%; }
    @keyframes m-menu-seal-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.95; } }

    /* Nav im offenen Zustand transparent + helle Marke/X auf dunklem Menü */
    body.m-menu-open nav {
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom-color: transparent;
    }
    body.m-menu-open .nav-logo,
    body.m-menu-open .nav-wordmark { color: #F1EFE7; }
    body.m-menu-open .menu-toggle span { background: #F1EFE7; }

    /* Scrim entfällt bei der dunklen Vollbild-Variante */
    .m-menu-scrim { display: none; }
}

/* ============================================================================
 * 5. HERO (§ 01)
 * ============================================================================ */
@media (max-width: 1023px) {
    /* Sprint 153 Alan-Dye: Padding-Top 104 → 64-80px für höhere Above-
       Fold-Density. CTA + Trust-List rücken näher an H1 — iPhone 15 Pro
       Hero füllt nun ~60% Above-Fold statt 45%. */
    .hero-with-photo {
        padding: clamp(66px, 9svh, 72px) var(--apple-section-pad-x) 48px;
        min-height: auto;
        background: var(--apple-snow);
        display: block;
        /* Gezielt: die Hero-Goldblüte (.hero-keim-bloom, width:124% + scale(1.5),
           bleibt via fill:both am Ende stehen) auf Viewport-Breite clippen. */
        overflow-x: clip;
    }

    .hero-with-photo .wrap,
    .hero-with-photo .hero-inner {
        max-width: 560px;
        margin: 0 auto;
        padding: 0;
    }

    /* Hero-Eyebrow — Apple-Tag-Pattern, klein über H1 */
    .hero-folio-eyebrow {
        font-family: var(--apple-font-text);
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--apple-graphite);
        margin: 0 0 8px;
        line-height: 1.2;
    }
    /* Hero-Eyebrow auf Mobile weggelassen (Founder 2026-06-26): H1 rückt nach oben. */
    .hero-with-photo .hero-folio-eyebrow { display: none; }

    /* Hero-H1 — Apple-Display, Sprint 153 Alan-Dye: clamp(48-56px / 13vw)
       respektiert kleine Viewports (iPhone SE 375px = ~49px statt 56px). */
    .hero-headline {
        /* V1 (2026-06-28, Founder-Wunsch „größer & besser"): Marken-Serif Fraunces,
           deutlich größer & dichter. Gold wandert vom dekorativen „I" auf den Begriff
           „KI-Zeitalter" (die Aussage führt). Blüten-Signatur verlässt die Headline
           (Nav-Logo trägt sie weiter). Bricht bewusst 3-zeilig mit „KI-Zeitalter." als
           goldenem Höhepunkt. !important gegen die Multi-Datei-Kaskade. */
        font-family: var(--font-display) !important;
        font-size: clamp(54px, 16.5vw, 72px) !important;
        font-weight: 500 !important;
        font-variation-settings: 'opsz' 144;
        line-height: 0.92 !important;
        letter-spacing: -0.035em !important;
        color: var(--apple-ink);
        margin: 0 0 16px;
    }
    .hero-headline .hero-h1-line {
        display: block;
        color: var(--apple-ink);
        font-weight: 500;
    }
    /* „fürs KI-Zeitalter." = goldener Höhepunkt (warmes Gold #6E5F3F, AA 5,97:1). */
    .hero-headline .hero-h1-line:last-child { color: #6E5F3F; }

    /* ── „Goldblüte öffnet sich → Headline wächst heraus" (Founder „echtes Wow", 2026-06-29).
       Reihenfolge umgedreht: ZUERST fächert die große Phyllotaxis-Goldblüte (Logo-DNA,
       84 Punkte) aus einem Saatkorn auf (golden-angle-gestaffelt), DARAUS keimt die
       Headline, dann birst die Blüte nach außen auf. „Aus einem Kern wächst alles". ── */
    .hero-headline--keim { position: relative; isolation: isolate; animation: none !important; }

    /* Headline wächst HERAUS (kräftiger Scale 0.55, erst NACHDEM die Blüte offen ist). */
    .hero-headline--keim .hero-h1-line {
        opacity: 0;
        transform-origin: 50% 50%;
        animation: hero-keim var(--t-5, 630ms) var(--ease-grow, cubic-bezier(.34, 1.56, .64, 1)) both;
        will-change: transform, opacity;
    }
    .hero-headline--keim .hero-h1-line:nth-child(2) { animation-delay: 320ms; }  /* Ihre Website */
    .hero-headline--keim .hero-h1-line:nth-child(3) { animation-delay: 520ms; }  /* fürs */
    .hero-headline--keim .hero-h1-line:nth-child(4) { animation-delay: 720ms; }  /* KI-Zeitalter */
    @keyframes hero-keim {
        from { opacity: 0; transform: scale(0.55); }
        to   { opacity: 1; transform: scale(1); }
    }

    /* Die große Goldblüte HINTER der Headline (z-index:-1, von isolation contained). */
    .hero-keim-bloom {
        position: absolute; left: 50%; top: 44%;
        width: 124%; height: 158%;
        transform: translate(-50%, -50%);
        z-index: -1; pointer-events: none;
    }
    /* PERFORMANCE: NUR EINE HTML-Ebene (.hkb-anim) animieren → GPU-composited, butterweich.
       Die 84 Punkte werden 1× gerastert und als Gruppe rotiert/skaliert/ausgeblendet
       (statt 84 SVG-Transforms = Mobile-Safari-Ruckeln). Eine Keyframe-Sequenz:
       öffnen (Spirale dreht auf) → offen halten (Headline wächst) → nach außen zerstreuen. */
    .hkb-anim {
        display: block; width: 100%; height: 100%;
        transform-origin: 50% 50%;
        will-change: transform, opacity;
        backface-visibility: hidden;
        animation: hero-bloom-life 2200ms both;
    }
    .hkb-anim svg { width: 100%; height: 100%; overflow: visible; display: block; }
    .hero-kbloom-dot { opacity: 1; }   /* statisch — die GRUPPE animiert, nicht die Punkte */
    @keyframes hero-bloom-life {
        0%   { transform: rotate(-30deg) scale(0.06); opacity: 0; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
        13%  { opacity: 1; }
        32%  { transform: rotate(0deg) scale(1);       opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .5, 1); }
        46%  { transform: rotate(0deg) scale(1);       opacity: 1; }
        100% { transform: rotate(6deg) scale(1.5);     opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
        .hero-headline--keim .hero-h1-line { opacity: 1; animation: none; transform: none; }
        .hero-keim-bloom { display: none; }
    }
    /* Eine echte Beispielseite (Browser-Frame) als Beweis im Hero, tappt zu #demos.
       (Founder 2026-06-25: Beispielseiten in den Hero; fokussiert = EINE Demo.) */
    .m-hero-demo-card { display: block; margin: 18px 0 2px; text-decoration: none; -webkit-tap-highlight-color: transparent; }
    .m-hero-demo-frame { border-radius: 14px; overflow: hidden; border: 1px solid rgba(20,32,43,.12); box-shadow: 0 16px 36px -20px rgba(20,40,60,.5); background: #fff; }
    .m-hero-demo-chrome { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #f4f3ef; border-bottom: 1px solid rgba(20,32,43,.08); }
    .m-hero-demo-chrome i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
    .m-hero-demo-chrome .dr { background: #E6675B; }
    .m-hero-demo-chrome .dy { background: #E7BE46; }
    .m-hero-demo-chrome .dg { background: #5CBE69; }
    .m-hero-demo-url { margin-left: 6px; font: 500 11px/1 var(--apple-font-text); letter-spacing: .02em; color: #525E6B; }
    .m-hero-demo-card img { display: block; width: 100%; height: 174px; object-fit: cover; object-position: top center; }
    .m-hero-demo-caption { display: block; margin-top: 10px; color: #6E5F3F; font: 500 12px/1.5 var(--apple-font-text); }
    .m-hero-demo-caption em { font-style: italic; }
    .m-hero-demo-arrow { font-style: normal; }
    /* Begleittexte kleiner (mehr Kontrast zur großen H1, Founder 2026-06-26). */
    .hero-with-photo .hero-audit-link { font-size: 12.5px !important; }

    /* Italic-Sub — Apple Sub-Display, graphite weight 500, non-italic */
    .hero-headline .hero-h1-line.m-hero-accent {
        font-family: var(--apple-font-display);
        font-size: clamp(22px, 5.5vw, 26px);
        line-height: 1.30;
        letter-spacing: -0.012em;
        font-weight: 500;
        font-style: normal;
        color: var(--apple-graphite);
        margin-top: 14px;
    }

    /* Demo-Tease-Bridge zu § 02 — Apple-Link-Pattern (blau, mit Pfeil) */
    .m-hero-demos-tease {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 8px 0 28px;
        color: #6E5F3F; /* warmes Gold-Text (AA 5,97:1) statt iOS-Blau — passt zur Palette */
        text-decoration: underline;
        text-decoration-color: rgba(110, 95, 63, 0.4);
        text-underline-offset: 4px;
        font-family: var(--apple-font-text);
        font-size: 17px;
        font-weight: 500;
        letter-spacing: -0.005em;
        line-height: 1.4;
    }
    .m-hero-demos-tease em {
        font-style: normal;
        font-weight: 500;
    }
    /* Sprint 153 Alan-Dye: Demo-Tease-Arrow als animiertes Asset
       (continuous bounce-Loop), nicht statischer UI-Chrome-Pfeil.
       Apple-iphone-15-pro „Scroll to explore" hat genau diesen Loop. */
    .m-hero-demos-tease-arrow {
        display: inline-block;
        animation: m-chevron-bounce 1.8s ease-in-out infinite;
    }
    .m-hero-demos-tease:hover .m-hero-demos-tease-arrow {
        transform: none;
    }
    @keyframes m-chevron-bounce {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(4px); }
    }

    /* Trust-List — Sprint 153 Alan-Dye: 3-Spalten-Grid statt vertikale
       Liste. Komprimiert ~164px vertikal auf ~80-90px horizontal →
       CTA rückt deutlich näher. Apple-iphone-15-pro „Key Features"-
       Pattern auf Mobile. */
    .m-hero-trust-list {
        list-style: none;
        padding: 0;
        margin: 0 0 32px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .m-hero-trust-list li {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        padding: 0;
        border-top: none;
    }
    .m-hero-trust-num {
        font-family: var(--apple-font-display);
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--apple-ink);
        line-height: 1.2;
    }
    .m-hero-trust-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }
    .m-hero-trust-body strong {
        font-family: var(--apple-font-text);
        font-size: 13px;
        font-weight: 600;
        color: var(--apple-ink);
        line-height: 1.3;
        letter-spacing: -0.005em;
    }
    .m-hero-trust-body small {
        font-family: var(--apple-font-text);
        font-size: 11px;
        font-weight: 400;
        color: var(--apple-graphite);
        line-height: 1.4;
    }

    /* Hero-CTA — Apple Pill-Button, System-Blue.
       Sprint 153 Alan-Dye: 48px → 44px (WCAG-Min), Tap-Feedback per
       Shadow-Lift statt Scale-Squash (Apple-Marketing-Standard für
       Depth-Feedback, kein Disney-Toy-Squash). */
    .m-hero-cta-bottom {
        margin: 0;
    }
    .hero-with-photo .btn,
    .m-hero-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--apple-blue);
        color: var(--apple-snow);
        font-family: var(--apple-font-text);
        font-size: 17px;
        font-weight: 400;
        letter-spacing: -0.01em;
        line-height: 1.18;
        padding: 14px 26px;
        border: none;
        border-radius: var(--apple-radius-pill);
        min-height: 44px;
        text-decoration: none;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        transition: background 200ms var(--apple-ease-touch),
                    box-shadow 120ms var(--apple-ease-touch);
    }
    .hero-with-photo .btn:active,
    .m-hero-primary:active {
        background: var(--apple-blue-hover);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
        transform: none;
    }

    /* Karriaro-Tool-Badge unter CTA verstecken (nur Desktop-Element) */
    .hero-with-photo .kr-tool-badge {
        display: none;
    }

    /* Sprint 156 — Founder-Trust-Strip Mobile (Authority + Compliance) */
    .hero-trust-strip {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 6px 10px;
        margin: 24px auto 0;
        padding-top: 18px;
        border-top: 1px solid var(--apple-hairline);
        font-family: var(--apple-font-text);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--apple-graphite);
        max-width: 320px;
        line-height: 1.6;
    }
    .hero-trust-strip a {
        color: var(--apple-ink);
        text-decoration: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        padding-bottom: 1px;
    }
    .hero-trust-strip .dot { opacity: 0.4; }
}

/* ============================================================================
 * 6. DEMO-SWIPER (§ 02) — iframe-Boundary respektiert
 * ============================================================================ */
@media (max-width: 1023px) {
    /* Sprint 162 — Compact Section-Header (Above-Card 188px → ~120px)
       für Full-Screen-Card-Above-Fold. */
    .m-demo-swiper-mobile {
        padding: clamp(48px, 8svh, 64px) 0;
        background: var(--apple-fog);
    }

    .m-demo-swiper-section-eyebrow {
        margin: 0 var(--apple-section-pad-x) 8px;
        font-family: var(--apple-font-text);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--apple-graphite);
    }
    .m-demo-swiper-section-title {
        margin: 0 var(--apple-section-pad-x) 12px;
        font-family: var(--apple-font-display);
        font-size: 28px;
        line-height: 1.12;
        letter-spacing: -0.02em;
        font-weight: 700;
        color: var(--apple-ink);
    }
    .m-demo-swiper-section-hint {
        margin: 0 var(--apple-section-pad-x) 20px;
        font-family: var(--apple-font-text);
        font-size: 13px;
        color: var(--apple-platinum);
    }

    /* Horizontal-Scroll-Rail */
    .m-demo-swiper-rail {
        display: flex;
        flex-direction: row;
        gap: 16px;
        padding: 0 var(--apple-section-pad-x);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .m-demo-swiper-rail::-webkit-scrollbar {
        display: none;
    }

    /* Sprint 162 — Full-Screen-Snap Cards (User-Wunsch "auf einen
       Bildschirm passen"). 94vw + scroll-snap-align center. */
    .m-demo-swiper-slide {
        flex: 0 0 auto;
        width: min(94vw, 480px);
        scroll-snap-align: center;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* Card-Container — Apple-Card-Style (white surface, soft shadow, 18px radius) */
    .m-demo-swiper-card,
    .m-demo-swiper-slide .m-poster {
        background: var(--apple-snow);
        border: none;
        border-radius: var(--apple-radius-card);
        box-shadow: var(--apple-shadow-card);
        overflow: hidden;
        cursor: pointer;
        padding: 0;
        display: block;
        width: 100%;
        text-align: left;
        transition: box-shadow 200ms var(--apple-ease-reveal),
                    transform 100ms var(--apple-ease-touch);
    }
    .m-demo-swiper-card:active,
    .m-demo-swiper-slide .m-poster:active {
        transform: scale(0.98);
        box-shadow: var(--apple-shadow-card-active);
    }

    /* macOS-Browser-Chrome-Header — Iframe-Boundary nur Layout/Color */
    .m-poster-chrome {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: rgba(0, 0, 0, 0.02);
        border-bottom: 1px solid var(--apple-hairline);
    }
    .m-poster-chrome-buttons {
        display: flex;
        gap: 6px;
    }
    .m-poster-chrome-btn {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        display: inline-block;
    }
    .m-poster-chrome-btn--close { background: #FF5F57; }
    .m-poster-chrome-btn--min   { background: #FEBC2E; }
    .m-poster-chrome-btn--max   { background: #28C840; }
    .m-poster-chrome-url {
        font-family: var(--apple-font-text);
        font-size: 11px;
        color: var(--apple-platinum);
        letter-spacing: -0.005em;
        flex: 1;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Handy-Vorschau: mobile Browser-Adressleiste (Schloss + Domain mittig,
       keine macOS-Ampel-Punkte) — signalisiert „Telefon-Browser". */
    .m-poster-chrome--phone {
        justify-content: center;
        gap: 6px;
        padding: 8px 14px;
    }
    .m-poster-chrome--phone .m-poster-chrome-url {
        flex: 0 1 auto;
    }
    .m-poster-chrome-lock {
        width: 11px;
        height: 11px;
        flex: none;
        color: var(--apple-platinum);
        opacity: 0.7;
    }

    /* Sprint 162 — Aspect-Ratio 4:3 für "monumentale" Card-Höhe
       (Multi-Designer-Konsens: Magazin-Style impact). iframe-Scaling
       passt sich automatisch an (m-interactions.js setIframeScale
       Formel: stage.clientWidth / 1280, neue Card 94vw → Scale ~0.288). */
    /* Handy-Vorschau: Hochkant-Stage (Telefon-Proportion) statt 4:3-Landscape. */
    .m-poster-stage {
        position: relative;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        background: var(--apple-fog);
    }
    .m-poster-frame {
        position: absolute;
        top: 0;
        left: 0;
        width: 402px;
        height: 860px;
        border: 0;
        transform-origin: top left;
        /* --m-iframe-scale wird via JS gesetzt (m-interactions.js
           setIframeScale, stage.clientWidth / 402). Fallback 0.9, damit bei
           JS-Aussetzer das mobile Hero-Topleft sichtbar bleibt
           (overflow:hidden clippt Überstand). */
        transform: scale(var(--m-iframe-scale, 0.9));
        pointer-events: none;
    }

    /* Meta-Footer unter Card */
    .m-demo-swiper-meta {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 0 4px;
    }
    .m-demo-swiper-eyebrow {
        font-family: var(--apple-font-text);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--apple-graphite);
    }
    .m-demo-swiper-title {
        font-family: var(--apple-font-display);
        font-size: 19px;
        font-weight: 600;
        letter-spacing: -0.018em;
        line-height: 1.25;
        color: var(--apple-ink);
        margin: 0;
    }
    .m-demo-swiper-persona-context {
        font-family: var(--apple-font-text);
        font-size: 14px;
        line-height: 1.43;
        color: var(--apple-graphite);
        margin: 4px 0 0;
    }
    .m-demo-swiper-cta {
        font-family: var(--apple-font-text);
        font-size: 14px;
        font-weight: 500;
        color: var(--kr-link-warm);
        margin-top: 6px;
    }

    /* Sprint 163 — Apple-Music/Health-Slider-Indicator-Pattern (User-Feedback
       "Dots wirken nicht Premium"). Statt Punkt-Cluster: 8 schlanke Linien,
       Active-Linie länger + dunkler. Editorial + premium. */
    .m-demo-swiper-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin: 28px auto 0;
        max-width: 320px;
    }
    .m-demo-swiper-dot {
        width: 24px;
        height: 44px;                                /* WCAG 2.5.5 Touch-Target bleibt */
        background: transparent;
        border: none;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: width 220ms var(--apple-ease-reveal);
    }
    .m-demo-swiper-dot::before {
        content: '';
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 1px;
        /* Sprint 230 — Gold-Familie wie der Desktop-Goldfaden (#C9A24B/#E3C173) */
        background: rgba(201, 162, 75, 0.34);
        transition: background 220ms var(--apple-ease-reveal),
                    height 220ms var(--apple-ease-reveal);
    }
    .m-demo-swiper-dot.is-active {
        width: 40px;
    }
    .m-demo-swiper-dot.is-active::before {
        background: linear-gradient(90deg, #C9A24B, #E3C173);
        height: 3px;
        border-radius: 1.5px;
    }
}

/* ============================================================================
 * 7. PERSONAS (§ 03) — Apple-Card-Grid
 * ============================================================================ */
@media (max-width: 1023px) {
    .m-mag-personas {
        background: var(--apple-snow);
    }

    .m-mag-personas .m-mag-eyebrow {
        font-family: var(--apple-font-text);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--apple-graphite);
        margin: 0 0 12px;
    }
    .m-mag-personas-title {
        font-family: var(--apple-font-display);
        font-size: 32px;
        line-height: 1.12;
        letter-spacing: -0.02em;
        font-weight: 700;
        color: var(--apple-ink);
        margin: 0 0 32px;
    }

    .m-mag-personas-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--apple-grid-gap);
    }

    .m-persona-tile {
        background: var(--apple-fog);
        border: none;
        border-radius: var(--apple-radius-card);
        padding: var(--apple-card-pad);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        text-align: left;
        cursor: pointer;
        transition: background 200ms var(--apple-ease-reveal),
                    transform 100ms var(--apple-ease-touch);
        text-decoration: none;
    }
    .m-persona-tile:active {
        transform: scale(0.98);
        background: #EBEBED;
        box-shadow: var(--apple-shadow-card-active);
    }

    .m-persona-icon {
        width: 32px;
        height: 32px;
        color: var(--kr-link-warm);
        margin-bottom: 4px;
    }
    .m-persona-name {
        font-family: var(--apple-font-text);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--apple-graphite);
    }
    .m-persona-headline {
        font-family: var(--apple-font-display);
        font-size: 17px;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -0.018em;
        color: var(--apple-ink);
    }
    .m-persona-body {
        font-family: var(--apple-font-text);
        font-size: 13px;
        font-weight: 400;
        line-height: 1.43;
        color: var(--apple-graphite);
    }

    .m-persona-tile--wide {
        grid-column: 1 / -1;
    }
}

/* ============================================================================
 * 8. TOOLS (§ 04) — Apple-Ordered-List
 * ============================================================================ */
@media (max-width: 1023px) {
    .m-mag-tools {
        background: var(--apple-fog);
    }

    .m-mag-tools .m-mag-eyebrow {
        font-family: var(--apple-font-text);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--apple-graphite);
        margin: 0 0 12px;
    }
    .m-mag-tools-title {
        font-family: var(--apple-font-display);
        font-size: 32px;
        line-height: 1.12;
        letter-spacing: -0.02em;
        font-weight: 700;
        color: var(--apple-ink);
        margin: 0 0 32px;
    }

    .m-mag-tools-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .m-mag-tools-list > li {
        background: var(--apple-snow);
        border: none;
        border-radius: var(--apple-radius-card);
        padding: var(--apple-card-pad);
        box-shadow: var(--apple-shadow-card);
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .m-mag-tool-num {
        font-family: var(--apple-font-text);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--apple-graphite);
    }
    .m-mag-tool-name {
        font-family: var(--apple-font-display);
        font-size: 19px;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -0.018em;
        color: var(--apple-ink);
    }
    .m-mag-tool-case {
        font-family: var(--apple-font-text);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.43;
        color: var(--apple-graphite);
        margin-top: 4px;
    }
    .m-mag-tools-more {
        font-family: var(--apple-font-text);
        font-size: 14px;
        font-style: italic;
        line-height: 1.5;
        color: var(--apple-graphite);
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid rgba(0,0,0,0.08);
    }
}

/* ============================================================================
 * 9. SIEGEL-STORY (§ 05) — Apple-Statement-Section
 * ============================================================================ */
@media (max-width: 1023px) {
    .m-mag-siegel {
        background: var(--apple-fog);
        text-align: center;
    }
    /* 2026-06-04 — bluehendes Phyllotaxis-Signatur-Siegel als Crest oben in der Sektion.
       color = Ton der Nicht-Gold-Punkte (Gold-Fibonacci sind #C9A24B). */
    .m-siegel-svg {
        display: block;
        width: 108px;
        height: 108px;
        margin: 0 auto 26px;
        color: #2A3340;
    }

    .m-siegel-eyebrow {
        font-family: var(--apple-font-text);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--apple-graphite);
        margin: 0 0 16px;
    }
    .m-siegel-title {
        font-family: var(--apple-font-display);
        font-size: 32px;
        line-height: 1.12;
        letter-spacing: -0.02em;
        font-weight: 700;
        color: var(--apple-ink);
        margin: 0 0 24px;
    }
    .m-siegel-title br {
        display: none;
    }
    .m-siegel-body {
        font-family: var(--apple-font-text);
        font-size: 17px;
        line-height: 1.47;
        color: var(--apple-graphite);
        max-width: 480px;
        margin: 0 auto 24px;
    }
    .m-siegel-link {
        font-family: var(--apple-font-text);
        font-size: 17px;
        font-weight: 500;
        color: var(--kr-link-warm);
    }
    .m-siegel-link:hover {
        text-decoration: underline;
    }
}

/* ============================================================================
 * 11. LIGHTHOUSE-PERFORMANCE (.kr-perf-section)
 * ============================================================================ */
@media (max-width: 1023px) {
    .kr-perf-section {
        background: var(--apple-snow);
        text-align: center;
    }
    .kr-perf-section .kr-eyebrow,
    .kr-perf-section .eyebrow {
        font-family: var(--apple-font-text);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--apple-graphite);
        margin: 0 0 16px;
    }
    .kr-perf-section h2,
    .kr-perf-section h1 {
        font-family: var(--apple-font-display);
        font-size: 32px;
        line-height: 1.12;
        letter-spacing: -0.02em;
        font-weight: 700;
        color: var(--apple-ink);
        margin: 0 0 24px;
    }
    .kr-perf-section p {
        font-family: var(--apple-font-text);
        font-size: 17px;
        line-height: 1.47;
        color: var(--apple-graphite);
        max-width: 480px;
        margin: 0 auto 24px;
    }
    .kr-perf-pill {
        display: inline-block;
        background: var(--apple-fog);
        color: var(--apple-ink);
        font-family: var(--apple-font-text);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: -0.005em;
        padding: 8px 16px;
        border-radius: var(--apple-radius-pill);
        margin: 4px;
    }
    .kr-perf-pill strong {
        color: var(--kr-link-warm);
        font-weight: 700;
    }
}

/* ============================================================================
 * 12. KONTAKT (§ 06) — Apple-Form-Style
 * ============================================================================ */
@media (max-width: 1023px) {
    #kontakt {
        background: var(--apple-fog);
    }

    #kontakt h1,
    #kontakt h2,
    .kr-letter-card h2 {
        font-family: var(--apple-font-display);
        font-size: 32px;
        line-height: 1.12;
        letter-spacing: -0.02em;
        font-weight: 700;
        color: var(--apple-ink);
        margin: 0 0 16px;
        text-align: center;
    }

    .kr-letter-card {
        background: var(--apple-snow);
        border-radius: var(--apple-radius-card);
        padding: var(--apple-card-pad);
        max-width: 560px;
        margin: 0 auto;
        box-shadow: var(--apple-shadow-card);
    }

    /* Letter-Card-Editorial-Elemente (Stempel, Signatur, Anrede) zurückhaltend */
    .kr-letter-card .stamp,
    .kr-letter-card .signature,
    .kr-letter-card .letter-date {
        display: none;
    }
    .kr-letter-card .greeting,
    .kr-letter-card .letter-body p {
        font-family: var(--apple-font-text);
        font-size: 17px;
        line-height: 1.47;
        color: var(--apple-graphite);
        margin: 0 0 16px;
    }

    #kontakt form,
    .kr-letter-form {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-top: 24px;
    }
    #kontakt label {
        font-family: var(--apple-font-text);
        font-size: 13px;
        font-weight: 600;
        color: var(--apple-graphite);
        display: block;
    }
    #kontakt input,
    #kontakt textarea,
    .kr-letter-form input,
    .kr-letter-form textarea {
        font-family: var(--apple-font-text);
        font-size: 17px;
        padding: 14px 16px;
        border: 1px solid var(--apple-hairline);
        border-radius: 12px;
        background: var(--apple-snow);
        color: var(--apple-ink);
        outline: none;
        transition: border-color 200ms var(--apple-ease-reveal);
        width: 100%;
        box-sizing: border-box;
    }
    #kontakt textarea,
    .kr-letter-form textarea {
        min-height: 120px;
        resize: vertical;
    }
    #kontakt input:focus,
    #kontakt textarea:focus,
    .kr-letter-form input:focus,
    .kr-letter-form textarea:focus {
        border-color: var(--kr-link-warm);
    }
    #kontakt button[type="submit"],
    .kr-letter-form button[type="submit"],
    #kontakt .submit-btn {
        background: var(--apple-blue);
        color: var(--apple-snow);
        font-family: var(--apple-font-text);
        font-size: 17px;
        font-weight: 400;
        letter-spacing: -0.01em;
        padding: 14px 22px;
        border: none;
        border-radius: var(--apple-radius-pill);
        min-height: 48px;
        cursor: pointer;
        transition: background 200ms var(--apple-ease-touch),
                    transform 100ms var(--apple-ease-touch);
        margin-top: 8px;
    }
    #kontakt button[type="submit"]:active,
    .kr-letter-form button[type="submit"]:active,
    #kontakt .submit-btn:active {
        background: var(--apple-blue-hover);
        transform: scale(0.96);
    }
    #kontakt label[for*="privacy"],
    #kontakt label.checkbox {
        font-family: var(--apple-font-text);
        font-size: 13px;
        color: var(--apple-graphite);
        line-height: 1.43;
    }
}

/* ============================================================================
 * 13. STICKY-CTA-BAR — disabled per Sprint 143, hidden komplett
 * ============================================================================ */
@media (max-width: 1023px) {
    .m-sticky-cta-bar,
    .kr-cta-float {
        display: none !important;
    }
}

/* ============================================================================
 * 14. SHEET-MODAL (Demo-Sheet, opens beim Tap auf Demo-Card)
 * ============================================================================ */
@media (max-width: 1023px) {
    .m-demo-sheet {
        position: fixed;
        inset: 0;
        z-index: 80;
        display: none;
        pointer-events: none;
    }
    .m-demo-sheet.is-open {
        display: block;
        pointer-events: auto;
    }

    .m-demo-sheet-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        transition: opacity 300ms var(--apple-ease-reveal);
    }
    .m-demo-sheet.is-open .m-demo-sheet-backdrop {
        opacity: 1;
    }

    /* VOLLBILD-Viewer: das Beispiel öffnet komplett (top:0 + bottom:0 füllt den
       fixed inset:0-Container), kein Sheet-Peek, keine runden Ecken — wirkt wie
       eine eigene Seite. Raus per „← Zurück". */
    .m-demo-sheet-panel {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--apple-snow);
        border-radius: 0;
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        transition: transform 360ms var(--apple-ease-reveal);
        overflow: hidden;
    }
    .m-demo-sheet.is-open .m-demo-sheet-panel {
        transform: translateY(0);
    }

    .m-demo-sheet-handle {
        width: 36px;
        height: 5px;
        background: rgba(0, 0, 0, 0.15);
        border-radius: 3px;
        margin: 8px auto 0;
    }

    .m-demo-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px var(--apple-section-pad-x);
        /* Notch/Statusbar-Abstand im Vollbild */
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
        border-bottom: 1px solid var(--apple-hairline);
    }
    /* „← Zurück"-Button — primärer Ausstieg aus dem Vollbild-Beispiel */
    .m-demo-sheet-back {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-height: 40px;
        padding: 8px 14px 8px 10px;
        border: 1px solid var(--apple-hairline);
        border-radius: 999px;
        background: var(--apple-snow);
        color: var(--apple-ink);
        font-family: var(--apple-font-text);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.18s ease;
    }
    .m-demo-sheet-back:active { background: var(--apple-fog); }
    .m-demo-sheet-back svg { width: 19px; height: 19px; flex: none; }
    .m-demo-sheet-head-text {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1px;
    }
    .m-demo-sheet-eyebrow {
        max-width: 100%;
        font-family: var(--apple-font-text);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--apple-graphite);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .m-demo-sheet-title {
        max-width: 100%;
        font-family: var(--apple-font-display);
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -0.018em;
        line-height: 1.2;
        color: var(--apple-ink);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .m-demo-sheet-close {
        background: var(--apple-fog);
        border: none;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--apple-ink);
        cursor: pointer;
    }
    .m-demo-sheet-close svg {
        width: 18px;
        height: 18px;
    }

    .m-demo-sheet-body {
        flex: 1 1 auto;
        min-height: 0;
        position: relative;
        overflow: hidden;
    }
    .m-demo-sheet-loader {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        background: var(--apple-snow);
        color: var(--apple-graphite);
        font-family: var(--apple-font-text);
        font-size: 14px;
        transition: opacity 240ms var(--apple-ease-reveal);
    }
    .m-demo-sheet-loader.is-hidden {
        opacity: 0;
        pointer-events: none;
    }
    .m-demo-sheet-spinner {
        width: 32px;
        height: 32px;
        border: 3px solid var(--apple-hairline);
        border-top-color: var(--kr-link-warm);
        border-radius: 50%;
        animation: m-spin 0.9s linear infinite;
    }
    @keyframes m-spin {
        to { transform: rotate(360deg); }
    }

    .m-demo-sheet-frame {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
    }

    /* Header-Actions: Icon-Button "In neuem Tab öffnen" + Schließen nebeneinander */
    .m-demo-sheet-head-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: none;
    }
    .m-demo-sheet-open-tab {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--apple-fog);
        color: var(--apple-ink);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .m-demo-sheet-open-tab svg {
        width: 17px;
        height: 17px;
    }

    /* Footer = Anfrage-Brücke (primär) + Galerie-Navigation (Zurück · Zähler · Weiter) */
    /* Footer = nur noch die Pagination, mittig (Anfrage-CTA wanderte nach oben) */
    .m-demo-sheet-foot {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        padding: 10px var(--apple-section-pad-x) calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--apple-hairline);
        background: var(--apple-snow);
    }
    /* Primärer Conversion-CTA — kompakte Pille oben rechts neben „← Zurück" */
    .m-demo-sheet-anfrage {
        flex: 0 1 auto;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 40px;
        padding: 9px 16px;
        border: none;
        border-radius: 999px;
        background: var(--apple-ink, #14202B);
        color: #fff;
        font-family: var(--apple-font-text);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.005em;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.18s ease, opacity 0.18s ease;
    }
    .m-demo-sheet-anfrage span {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .m-demo-sheet-anfrage:active {
        transform: scale(0.97);
        opacity: 0.92;
    }
    .m-demo-sheet-anfrage svg {
        width: 17px;
        height: 17px;
        flex: none;
    }
    /* Sehr schmale Phones (iPhone SE 1): „Zurück"-Text weg → nur ← Pfeil,
       damit der Anfrage-CTA garantiert passt. */
    @media (max-width: 359px) {
        .m-demo-sheet-back span { display: none; }
        .m-demo-sheet-back { padding: 8px 12px; }
    }
    .m-demo-sheet-nav-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    /* Icon-only Pagination (‹ ›) — kein „Zurück"-Wort mehr (kollidierte mit dem
       Vollbild-Zurück oben). Ruhig + kompakt. */
    .m-demo-sheet-nav {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid var(--apple-hairline);
        border-radius: 50%;
        background: var(--apple-snow);
        color: var(--apple-ink);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.18s ease, border-color 0.18s ease;
    }
    .m-demo-sheet-nav:active {
        background: var(--apple-fog);
    }
    .m-demo-sheet-nav svg {
        width: 18px;
        height: 18px;
        flex: none;
    }
    .m-demo-sheet-counter {
        flex: 1 1 auto;
        text-align: center;
        font-family: var(--apple-font-text);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--apple-graphite);
        white-space: nowrap;
    }

    /* Visuell versteckt, aber für Screenreader/aria-labelledby da (Sheet-Titel) */
    .m-sr-only {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Werkzeug-Held: kurze Hinweis-Pill UNTEN über der Demo (kollidiert nicht mehr
       mit der Demo-Kopfzeile), blendet nach 5 s automatisch aus. */
    .m-demo-sheet-toolhint {
        position: absolute;
        bottom: 14px;
        left: 50%;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        max-width: calc(100% - 28px);
        padding: 9px 15px;
        border: none;
        border-radius: 999px;
        background: rgba(20, 32, 43, 0.92);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        color: #fff;
        font-family: var(--apple-font-text);
        font-size: 13.5px;
        font-weight: 500;
        line-height: 1.2;
        box-shadow: 0 10px 28px rgba(16, 32, 44, 0.28);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        /* Start: leicht nach unten versetzt + transparent; .is-visible animiert ein */
        transform: translate(-50%, 8px);
        opacity: 0;
        transition: opacity 0.28s var(--apple-ease-reveal), transform 0.28s var(--apple-ease-reveal);
    }
    .m-demo-sheet-toolhint.is-visible {
        transform: translate(-50%, 0);
        opacity: 1;
    }
    .m-demo-sheet-toolhint[hidden] { display: none; }
    .m-demo-sheet-toolhint .m-toolhint-cog { width: 17px; height: 17px; flex: none; color: var(--apple-gold, #C9A24B); }
    .m-demo-sheet-toolhint .m-toolhint-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .m-demo-sheet-toolhint .m-toolhint-text strong { font-weight: 700; }
    .m-demo-sheet-toolhint .m-toolhint-arrow { width: 15px; height: 15px; flex: none; opacity: 0.85; }
    @media (prefers-reduced-motion: reduce) {
        .m-demo-sheet-toolhint { transition: none; }
    }

    /* Werkzeug-Badge auf der Demo-Karte (USP sichtbar machen) */
    .m-demo-tool-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        align-self: flex-start;
        margin: 2px 0 2px;
        padding: 5px 11px 5px 9px;
        border: 1px solid rgba(201, 162, 75, 0.45);
        border-radius: 999px;
        background: rgba(201, 162, 75, 0.12);
        color: var(--apple-ink, #14202B);
        font-family: var(--apple-font-text);
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.25;
    }
    .m-demo-tool-badge svg {
        width: 15px;
        height: 15px;
        flex: none;
        color: #9c7d2e;
    }
    .m-demo-tool-badge strong { font-weight: 700; }

    /* Schwebende Buttons (WhatsApp + Concierge "Fragen Sie uns") ausblenden,
       solange das Burger-Menü ODER das Demo-Sheet offen ist — sonst liegen sie
       (z-index ~2.1 Mrd.) ÜBER Menü/Sheet und verdecken Inhalte/Menüpunkte. */
    body.m-menu-open .whatsapp-fab,
    body.m-menu-open .krc-fab,
    body.m-demo-sheet-open .whatsapp-fab,
    body.m-demo-sheet-open .krc-fab {
        display: none !important;
    }
}

/* ============================================================================
 * 15. UTILITY-CLASSES (JS-Hooks)
 * ============================================================================ */
@media (max-width: 1023px) {
    /* Iframe-Load — JS (m-interactions.js Z. 284) setzt .is-loaded auf das
       <iframe>-Element selbst (frame.classList.add('is-loaded')), NICHT
       auf den .m-poster-Parent. Sprint-150.6-Selector-Pattern. */
    .m-poster-frame {
        opacity: 0;
        transition: opacity 240ms var(--apple-ease-reveal);
    }
    .m-poster-frame.is-loaded {
        opacity: 1;
    }
    /* Skeleton-Fallback (falls Markup vorhanden, JS triggert über iframe-
       Sibling-Class) */
    .m-poster-skeleton {
        position: absolute;
        inset: 0;
        background: var(--apple-fog);
        opacity: 1;
        transition: opacity 240ms var(--apple-ease-reveal);
        pointer-events: none;
    }
    .m-poster-frame.is-loaded ~ .m-poster-skeleton {
        opacity: 0;
    }

    /* Section-Reveal-State — Sprint 132-Pattern. Per Sprint 150.5 immer
       sichtbar (kein opacity:0-Initial mehr), .m-in-view bleibt als JS-Hook
       für eventuelle künftige Animations-Subtilität. */
    .m-mag-personas,
    .m-demo-swiper-mobile,
    .m-mag-siegel,
    #kontakt {
        opacity: 1;
    }
}

/* ============================================================================
 * 16. FOOTER
 * ============================================================================ */
@media (max-width: 1023px) {
    footer {
        background: var(--apple-snow);
        padding: 48px var(--apple-section-pad-x);
        font-family: var(--apple-font-text);
        font-size: 13px;
        color: var(--apple-graphite);
        border-top: 1px solid var(--apple-hairline);
    }
    footer a {
        color: var(--apple-graphite);
    }
    footer a:hover {
        color: var(--kr-link-warm);
    }
    footer ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 12px 24px;
    }
}

/* ============================================================================
 * 17. LIGHT-MODE-ONLY (Sprint 151.1)
 *
 * Apple-Marketing-Pages (apple.com/iphone-15-pro) sind IMMER weiß,
 * unabhängig vom System-Dark-Mode. User-Wunsch: kein Dark-Mode-Switch.
 * Defensive Color-Scheme-Pinning gegen iOS-User-Agent-Auto-Dark-Mode.
 * ============================================================================ */
@media (max-width: 1023px) {
    :root {
        color-scheme: light only;
    }
}

/* ============================================================================
 * 18. REDUCED-MOTION
 * ============================================================================ */
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}