/* =========================================================================
       assistic.de — Homepage (Rebrand 2026-07-18: Ink + Lime + Geist)
       Tiefer Redesign: Layout · Fonts · Design. Kühles Off-White · Ink · Lime-Akzent.
       Display + Body/UI = Geist durchgehend.
       Token-Namen kompatibel (Alt-Inline-Styles adoptieren neue Werte).
       ========================================================================= */

    :root {
      /* ---------- Palette (kühles Off-White · Ink · Lime) ---------- */
      --color-primary: #1B1F24; --color-primary-hover: #0F1216;
      --color-primary-deep: #0B0D10; --color-primary-line: #2A2E33;
      --color-primary-soft: #E9EBEE; --color-primary-tint: #D5D9DE;
      --color-accent: #B6FF2E; --color-accent-hover: #A4EE1C; --color-accent-bright: #CBFF5E;
      --color-accent-soft: #EEFBD6; --color-accent-tint: #DDF6B0;
      --color-on-accent: #14231E;
      --color-bg: #F4F5F4; --color-surface: #FFFFFF; --color-surface-alt: #ECEEEC; --color-surface-warm: #F0F1F0;
      --color-text: #1B1F24; --color-text-muted: #565B62; --color-text-subtle: #8A9099;
      --color-text-inverse: #F7F8F7; --color-text-on-dark-muted: #A2A8AE;
      --color-border: #E3E5E3; --color-border-strong: #D2D4D2; --color-divider: #EBECEA;
      --color-success: #2F7D5B;

      /* ---------- Type ---------- */
      --font-display: 'Geist', 'Inter', Arial, Helvetica, sans-serif;
      --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
      --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

      /* ---------- Radii (ruhiger, editorialer — weniger „App-rund") ---------- */
      --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 26px;
      --radius-pill: 999px;

      /* ---------- Shadows — warm, weich, sparsam ---------- */
      --shadow-sm: 0 1px 2px rgba(25,35,31,0.05), 0 1px 3px rgba(25,35,31,0.04);
      --shadow-md: 0 12px 28px -14px rgba(25,35,31,0.18), 0 4px 10px -6px rgba(25,35,31,0.08);
      --shadow-lg: 0 30px 60px -28px rgba(11, 13, 16,0.40), 0 10px 24px -14px rgba(25,35,31,0.12);
      --shadow-xl: 0 50px 100px -40px rgba(11, 13, 16,0.55);
      --shadow-accent: 0 22px 46px -20px rgba(150, 220, 20,0.45);
      --shadow-focus: 0 0 0 3px rgba(27, 31, 36,0.22);

      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
      --duration-base: 220ms;
      --container: 1200px;
      --gutter: clamp(20px, 5vw, 56px);
      --sv: clamp(80px, 10vw, 132px);
    }

    /* ---------- Reset & base ---------- */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
    body {
      font-family: var(--font-sans); font-weight: 400; line-height: 1.6;
      color: var(--color-text); background: var(--color-bg);
      font-optical-sizing: auto;
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility; overflow-x: hidden; position: relative;
    }
    /* Feinkörnige Papier-Textur (Tiefe ohne Bild) */
    body::before {
      content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    }
    body > * { position: relative; z-index: 1; }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    ::selection { background: var(--color-accent-tint); color: var(--color-text); }
    .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

    /* ---------- Typography (Sans-forward: Geist trägt H1/H2 — clean, confident,
       Stripe/Mistral-Liga. Kursive Akzentwörter (h1 em/i, h2 em/i unten) bleiben
       Geist Italic in Ink — kein Farb-/Font-Wechsel mehr.) ---------- */
    h1, .t-display {
      font-family: var(--font-sans); font-weight: 700;
      font-size: clamp(2.75rem, 1.2rem + 6vw, 4.6rem);
      line-height: 1.03; letter-spacing: -0.028em; color: var(--color-text);
    }
    h2 {
      font-family: var(--font-sans); font-weight: 700;
      font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.75rem);
      line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text);
    }
    h1 em, h1 i, h2 em, h2 i {
      font-family: var(--font-display); font-optical-sizing: auto;
      font-style: italic; font-weight: 480; color: var(--color-text);
    }
    h3 {
      font-family: var(--font-sans); font-weight: 600; font-size: 1.22rem;
      line-height: 1.28; letter-spacing: -0.01em; color: var(--color-text);
    }
    h4 { font-family: var(--font-sans); font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--color-text); }
    p { color: var(--color-text); }

    /* ---------- Editorial kicker (Eyebrow als feine Index-Zeile) ---------- */
    .eyebrow {
      display: inline-flex; align-items: center; gap: 11px;
      font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
      letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text);
      margin-bottom: 22px;
    }
    .eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.7; }

    /* ---------- Buttons: Basis kommt aus assets/site.css (.btn/.btn-primary/
       .btn-secondary) — hier nur die Dark-Background-Variante (Hero/CTA/is-dark). */
    .hero .btn-secondary, .cta-section .btn-secondary, .is-dark .btn-secondary { color: var(--color-text-inverse); border-color: rgba(255,255,255,0.3); }
    .hero .btn-secondary:hover, .cta-section .btn-secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.65); }
    :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

    /* ======================= HEADER + NAV =======================
       Struktur/Verhalten kommt aus assets/site.css (.site-header, .nav-dropdown*,
       .nav-toggle) — hier bewusst nichts mehr dupliziert. */

    /* ======================= TRUST BANNER =======================
       Regeln liegen jetzt im Fundament (assets/site.css) — geteilte Komponente auf jeder Seite. */

    /* ======================= HERO ======================= */
    /* Der Hero füllt genau eine Bildschirmhöhe (abzüglich Header + Trust-Leiste). Ohne das
       endete er auf einer beliebigen Höhe und ein Streifen der weißen Folgesektion blitzte
       unten durch — das las sich wie ein Fehler statt wie eine Kante. svh statt vh wegen
       der ein-/ausfahrenden Adressleiste auf dem Handy. */
    .hero {
      position: relative; background: var(--color-primary-deep); color: var(--color-text-inverse);
      min-height: calc(100svh - 110px); /* Header (73px) + Trust-Leiste (44px) = 117px Versatz.
         Bewusst nur 110px abgezogen: lieber ein paar Pixel zu hoch (Hero reicht minimal unter die
         Falz) als zu niedrig — zu niedrig zeigt den weißen Streifen der Folgesektion. */
      display: flex; align-items: center;
      padding: clamp(56px, 7vw, 88px) 0; overflow: hidden; isolation: isolate;
    }
    .hero::before {
      content: ""; position: absolute; inset: 0; z-index: -2;
      background:
        radial-gradient(900px 580px at 82% 4%, rgba(180, 255, 46,0.24), transparent 58%),
        radial-gradient(760px 640px at 2% 98%, rgba(42, 46, 51,0.6), transparent 60%),
        linear-gradient(177deg, var(--color-primary-hover) 0%, var(--color-primary-deep) 100%);
    }
    /* feines Hairline-Raster im Hero (editorial) */
    .hero::after {
      content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.4;
      background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
      background-size: 64px 64px;
      -webkit-mask-image: radial-gradient(1000px 560px at 68% 22%, #000, transparent 76%);
      mask-image: radial-gradient(1000px 560px at 68% 22%, #000, transparent 76%);
    }
    /* Zentrierter, symmetrischer Hero. Vorher: linksbündige Textspalte in einem vollbreiten
       dunklen Band — dadurch tote Fläche rechts. Zentriert gibt es kein leeres Halb. */
    .hero__inner { max-width: 900px; text-align: center; }
    .hero .eyebrow { color: var(--color-accent-bright); margin-bottom: 18px; justify-content: center; }
    /* text-wrap: balance verhindert Waisen-Zeilen ("abholt." allein) auf Tablet-Breiten. */
    .hero h1 { color: #fff; font-size: clamp(2.5rem, 1rem + 4.6vw, 3.9rem); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; max-width: 20ch; margin-inline: auto; }
    .hero h1 em { color: var(--color-text-inverse); }
    .hero__lead { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.24rem); line-height: 1.6; color: var(--color-text-on-dark-muted); max-width: 34rem; margin: 24px auto 32px; text-wrap: pretty; }
    .hero__cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; justify-content: center; }
    .hero__trust { display: flex; flex-wrap: wrap; gap: 12px 26px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); justify-content: center; max-width: 40rem; margin-inline: auto; }
    .hero__trust .trust-item { color: var(--color-text-on-dark-muted); font-size: 0.84rem; }
    .hero__trust .trust-item svg { width: 16px; height: 16px; stroke: var(--color-accent-bright); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

    /* ======================= SECTIONS (editorial) ======================= */
    .section { padding: var(--sv) 0; position: relative; }

    /* ---------- BAND-SYSTEM (Redesign 2026-07-14) ----------
       Jede Sektion ist ein vollbreites Band mit EIGENEM, explizitem Hintergrund —
       nie transparent/geerbt von body (sonst verschwimmt --color-bg mit
       --color-surface-alt zu "creme auf creme"). Zwei Nachbarn nie derselbe Klasse.
       Helle Bänder bekommen oben+unten eine Hairline, damit die Kante beim Scrollen
       sichtbar ist. Innerhalb eines Bands bekommen Karten/Panels jeweils den
       GEGENSÄTZLICHEN Ton (weißes Band -> cremefarbene Karte, cremefarbenes Band ->
       weiße Karte), damit Karten nie mit ihrem Band verschmelzen. */
    .band-white, .band-cream { position: relative; }
    .band-white::before, .band-white::after,
    .band-cream::before, .band-cream::after {
      content: ""; position: absolute; left: var(--gutter); right: var(--gutter); height: 1px;
      background: var(--color-border);
    }
    .band-white::before, .band-cream::before { top: 0; }
    .band-white::after, .band-cream::after { bottom: 0; }
    .band-white { background: var(--color-surface); }
    .band-cream { background: var(--color-surface-alt); }
    /* Editorialer, LINKSbündiger Sektions-Kopf mit großzügiger Spalte */
    .section-head { max-width: 760px; margin-bottom: clamp(44px, 5vw, 68px); }
    .section-head p, .section-head .t-lead { font-size: 1.16rem; line-height: 1.58; color: var(--color-text-muted); margin-top: 20px; max-width: 46ch; }
    /* „quiet" Kopf bleibt zentriert + kleiner (stützende Abschnitte) */
    .section-head--quiet { text-align: center; margin-inline: auto; }
    .section-head--quiet .eyebrow { justify-content: center; }

    /* ---------- Prinzipien-Spec-Strip (Mono-Label + fetter Wert, direkt unter dem Hero) ----------
       Schmales Band statt vollem Section-Padding — der Scan-Gewinn, nicht ein weiterer Textblock. */
    .section.spec-strip-section { padding: clamp(26px, 3.4vw, 40px) 0; }
    .spec-strip { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); }
    .spec-strip__item { padding: 4px 22px; border-right: 1px solid var(--color-border); }
    .spec-strip__item:first-child { padding-left: 0; }
    .spec-strip__item:last-child { border-right: none; padding-right: 0; }
    .spec-strip__label { display: block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: 7px; }
    .spec-strip__value { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 1.18rem; letter-spacing: -0.01em; color: var(--color-text); }
    @media (max-width: 760px) {
      .spec-strip { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
      .spec-strip__item { padding: 0 18px 18px 0; border-right: 1px solid var(--color-border); }
      .spec-strip__item:nth-child(2n) { border-right: none; padding-right: 0; }
      .spec-strip__item:nth-child(2n+1) { padding-left: 0; }
      .spec-strip__item:last-child { grid-column: 1 / -1; padding-bottom: 0; }
    }

    /* ---------- Mini-Chip (kleines Mono-Label, ink-neutral, kein Lime) ----------
       Wiederverwendbar überall, wo ein Schlagwort einen Absatz ersetzt/ergänzt
       (Mechanismus-Schritte, Nutzen-Karten). */
    .mini-chip { display: inline-block; margin: 0 0 12px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary); }

    /* ---------- Cards (taktil, hairline-first) ---------- */
    .card {
      background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
      padding: 32px; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base);
    }
    .card.is-hoverable:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
    .icon-wrap { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 13px; background: var(--color-primary-soft); color: var(--color-primary); margin-bottom: 22px; }
    .icon-wrap svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    .whom-card h3 { margin-bottom: 10px; }
    .whom-card p { color: var(--color-text-muted); font-size: 0.97rem; line-height: 1.6; }
    .whom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

    /* ---------- Problem (einspaltiger, zentrierter Kopf + volle Breite Reihe,
       Redesign 2026-07-14 — vorher: 2-Spalter mit leerer Spalte unter dem
       sticky-Kopf, ~400px Loch. Jetzt: keine tote Spalte mehr möglich. ---------- */
    .problem-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--color-border); }
    .problem-col { padding: 32px 30px; border-right: 1px solid var(--color-divider); }
    .problem-col:last-child { border-right: none; padding-right: 0; }
    .problem-col:first-child { padding-left: 0; }
    .problem-no { display: block; font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500; color: var(--color-text-subtle); margin-bottom: 16px; }
    .problem-col h3 { margin-bottom: 8px; }
    .problem-col p { color: var(--color-text-muted); font-size: 0.98rem; line-height: 1.6; }

    /* ---------- Problem-Visual (Redesign 2026-07-23): Text | gedimmtes Kartei-Kartenfeld,
       Bildsprache aus dem Werbespot (assistic-video StyleProofV5: gedämpfte Kunden-
       karten-Silhouetten, eine Karte hervorgehoben). Rotation liegt auf der INNEREN
       .problem-card, nicht auf dem direkten [data-stagger]-Kind (.problem-card-pos) —
       sonst kollidiert sie mit dessen Eintritts-transform (translateY), das die
       generische Stagger-Regel in polish.css setzt/zurücksetzt. ---------- */
    .problem-inner { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
    /* iris-Politur 23.07.: section-head ist global zentriert (site.css) — im
       asymmetrischen problem-Grid muss die ganze Kopfgruppe links buendig sein. */
    .problem-inner .section-head { text-align: left; margin: 0; max-width: none; }
    .problem-inner .section-head p { margin-left: 0; margin-right: 0; }
    .problem-cards { position: relative; height: clamp(220px, 24vw, 300px); }
    .problem-card-pos { position: absolute; width: clamp(150px, 17vw, 196px); }
    .problem-card-pos:nth-child(1) { top: 2%; left: 0; }
    .problem-card-pos:nth-child(2) { top: 48%; left: 48%; }
    .problem-card-pos:nth-child(3) { top: 62%; left: 6%; }
    .problem-card-pos--focus { top: 16%; left: 30%; z-index: 2; }
    .problem-card { position: relative; padding: 16px 18px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface-alt); box-shadow: var(--shadow-sm); opacity: 0.55; }
    .problem-card-pos:nth-child(1) .problem-card { transform: rotate(-7deg); }
    .problem-card-pos:nth-child(2) .problem-card { transform: rotate(4deg); }
    .problem-card-pos:nth-child(3) .problem-card { transform: rotate(-4deg); }
    .problem-card--focus { transform: rotate(-2deg); opacity: 1; background: var(--color-surface); border-color: var(--color-border-strong); box-shadow: var(--shadow-lg); }
    .problem-card--focus::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 2px; border-radius: 2px; background: var(--color-accent); }
    .problem-card__chip { position: absolute; top: 14px; right: 14px; width: 30px; height: 10px; border-radius: 5px; background: var(--color-primary-soft); }
    .problem-card__line { display: block; height: 7px; border-radius: 4px; background: var(--color-text-subtle); opacity: 0.45; }
    .problem-card__line + .problem-card__line { margin-top: 9px; }
    .problem-card--focus .problem-card__line { opacity: 0.6; }
    @media (max-width: 700px) { .problem-cards { height: clamp(180px, 56vw, 260px); } }

    /* ---------- Kataster (Asset-Sektion) ---------- */
    .kataster-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 60px); }
    /* Zweispalter: links die Asset-Punkte, rechts der Beispiel-Blick ins Kataster.
       Unter 940px stapeln — das Beispiel-Panel rutscht dann unter die Punkte. */
    .kataster-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(36px, 5vw, 64px); align-items: start; }
    @media (max-width: 940px) { .kataster-grid { grid-template-columns: 1fr; } }
    .kat-demo { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
    .kat-demo__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 22px; background: var(--color-primary); color: #fff; }
    .kat-demo__top strong { font-size: 0.95rem; font-weight: 600; }
    .kat-demo__top span { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.8); }
    .kat-demo__media img { display: block; width: 100%; height: auto; }
    .kat-demo__foot { padding: 14px 22px; border-top: 1px solid var(--color-border); background: var(--color-surface-alt); font-size: 0.82rem; color: var(--color-text-subtle); }
    .kataster-lead { font-size: 1.16rem; line-height: 1.6; color: var(--color-text-muted); margin: 20px 0 16px; }
    .kataster-body { font-size: 1.06rem; line-height: 1.66; color: var(--color-text-muted); max-width: 60ch; }
    .kataster-body strong { color: var(--color-text); font-weight: 600; }
    .asset-list { list-style: none; max-width: 640px; }
    .asset-item { padding: 22px 0 22px 26px; border-left: 2px solid var(--color-accent-tint); position: relative; }
    .asset-item + .asset-item { margin-top: 2px; }
    .asset-item::before { content: ""; position: absolute; left: -2px; top: 30px; width: 2px; height: 22px; background: var(--color-accent); }
    .asset-item h3 { margin-bottom: 6px; }
    .asset-item p { color: var(--color-text-muted); font-size: 0.98rem; line-height: 1.6; }

    /* ---------- Mechanismus-Grid (Schritte links, Beispiel-Karte rechts) ----------
       Vorher hing die .record-card als schmaler, zentrierter Block einsam unter den
       3 nebeneinander liegenden Schritten (viel Weißraum links/rechts). Jetzt: 2-Spalter —
       .steps wird links vertikal gelistet (01→02→03 untereinander), die Karte sitzt rechts,
       vertikal zentriert. .steps/.step-card bleiben die gemeinsame Basis-Klasse (auch auf
       chatbot/websites/website-referenz 3-spaltig genutzt) — hier nur innerhalb von
       .mechanismus-grid überschrieben, andere Seiten bleiben unberührt. */
    .mechanismus-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(40px, 5vw, 72px); align-items: center; }
    .mechanismus-grid .steps { grid-template-columns: 1fr; border-top: none; }
    .mechanismus-grid .steps::after { display: none; } /* Ablaufline war ein Effekt für die 3-Spalten-Trennlinie, hier vertikal gestapelt ohne Entsprechung */
    .mechanismus-grid .step-card { border-right: none; border-top: 1px solid var(--color-divider); padding: 22px 0; }
    .mechanismus-grid .step-card:first-child { border-top: none; padding-top: 0; }
    .mechanismus-grid .step-card:last-child { padding-bottom: 0; }
    .mechanismus-grid .step-card h3 { min-height: 0; }
    .mechanismus-record { width: 100%; }
    @media (max-width: 900px) { .mechanismus-grid { grid-template-columns: 1fr; gap: clamp(32px, 6vw, 44px); } }

    /* ---------- Mechanismus-Outro (Wertschöpfung geschützt, kleiner gesetzt) ---------- */
    .mechanismus-outro { margin-top: clamp(32px, 4vw, 48px); padding-top: 26px; border-top: 1px solid var(--color-divider); max-width: 56ch; font-size: 0.94rem; line-height: 1.65; color: var(--color-text-subtle); font-style: italic; }

    /* ---------- Naming-Beat (Produktname „Loop", kompakte Zäsur zwischen Kataster
       und DIY-Band — analog zu .spiegel: ruhig, kein Nachfolge-Abstand. Die Wortmarke
       „Loop" selbst bleibt strikt Ink/Geist, kein Lime, kein Italic-Akzent. Die
       ∞-Mark darüber ist die bewusste 3. Lime-Stelle der Seite (Produkt-Signatur,
       kein Dekor) — deshalb als feiner Outline-Strich statt Fläche gehalten, damit
       der gefüllte CTA weiter das dominante Lime-Signal bleibt. ---------- */
    .naming-beat { padding: clamp(56px, 7vw, 92px) 0; }
    .naming-beat .section-head { margin-bottom: 0; max-width: 640px; }
    .naming-word { display: block; font-family: var(--font-sans); font-weight: 800; font-size: clamp(3.1rem, 1.5rem + 7vw, 5.4rem); line-height: 1; letter-spacing: -0.035em; color: var(--color-text); }
    .naming-tagline { margin-top: 14px; font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); letter-spacing: -0.01em; color: var(--color-text); }

    /* ---------- Loop-Kreislauf-Diagramm (Redesign 2026-07-23) ----------
       Ersetzt die reine Fließtext-Wand unter "Wir schließen den Kreis": 4 Stationen
       auf einem Ring (Kunde → wird still → Brief → kommt zurück), Ring + Stationen
       rasten beim Scrollen ein, ein kleiner Punkt läuft danach dezent weiter — zeigt,
       dass der Kreislauf sich wiederholt, statt ihn nur zu behaupten. Stationen per
       klassischem "Uhrzeiger"-Trick positioniert: rotate(--a) verschiebt den Winkel,
       translateY(-r) schiebt nach außen, rotate(-a) dreht das Label wieder gerade.
       prefers-reduced-motion greift über den globalen Blanket weiter oben (animation/
       transition: none) — der Punkt bleibt dann einfach auf der ersten Station stehen. */
    /* iris-Politur 23.07.: Header wirkte vom Body abgekoppelt — Abstand gestrafft. */
    .loop-cycle { display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; margin-top: clamp(28px, 4vw, 44px); }
    .loop-cycle__diagram { position: relative; --r: clamp(88px, 10vw, 118px); width: calc(var(--r) * 2 + 92px); height: calc(var(--r) * 2 + 92px); margin: 0 auto; }
    .loop-cycle__ring { position: absolute; inset: 0; margin: auto; width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; border: 1.5px dashed var(--color-border-strong); }
    .loop-cycle__text--solo { max-width: 560px; margin: clamp(20px, 3vw, 32px) auto 0; text-align: center; }
    .loop-cycle__stations { position: absolute; inset: 0; }
    .loop-cycle__station { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 7px; transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); }
    .loop-cycle__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-primary); }
    .loop-cycle__label { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; color: var(--color-text-muted); background: var(--color-surface); padding: 2px 7px; border-radius: var(--radius-pill); }
    /* Der wandernde Punkt: ein 0×0-"Arm" rotiert kontinuierlich, der Punkt sitzt per
       negativem Margin am Radius — verlässlicher als offset-path (dessen Prozent-Basis
       je nach Browser uneindeutig ist) und exakt derselbe Trick wie bei den Stationen. */
    .loop-cycle__traveler-arm { position: absolute; top: 50%; left: 50%; width: 0; height: 0; animation: loop-travel 9s linear infinite; }
    .loop-cycle__traveler-dot { position: absolute; top: 0; left: 0; width: 9px; height: 9px; margin: calc(var(--r) * -1) 0 0 -4.5px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 5px var(--color-accent-soft); }
    @keyframes loop-travel { to { transform: rotate(360deg); } }
    .loop-cycle__text { color: var(--color-text-muted); font-size: 1.06rem; line-height: 1.66; max-width: 46ch; }
    .loop-cycle__text strong { color: var(--color-text); font-weight: 600; }
    @media (max-width: 760px) { .loop-cycle { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

    /* ---- Loop-Mark (Redesign 2026-07-23, ersetzt die alte dünne Freihand-∞-Linie):
       eine exakt parametrisierte Lemniskate von Gerono (x=a·cos t, y=a·sin t·cos t),
       kein handgezeichneter Pfad mehr — deshalb symmetrisch und ruhig statt schief.
       Gradient läuft Ink → Lime: die bewusste 3. Lime-Stelle der Seite (neben CTA +
       Hero-Unterstrich, s. Kommentar oben am Naming-Beat). Draw-on beim Reinscrollen
       via pathLength-Trick (kein JS zum Messen nötig). Ohne .js-reveal (=
       reduced-motion/kein IO) ist die Mark sofort fertig gezeichnet. ---- */
    .naming-mark { width: clamp(110px, 12vw, 150px); margin: 0 auto 26px; }
    .naming-mark__traveler { fill: var(--color-accent-bright); }
    @media (prefers-reduced-motion: reduce) { .naming-mark__traveler { display: none; } }
    .naming-mark__svg { display: block; width: 100%; height: auto; overflow: visible; }
    .naming-mark__path { fill: none; stroke: url(#loop-mark-grad); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
    .loop-mark__stop--ink { stop-color: var(--color-primary); }
    .loop-mark__stop--lime { stop-color: var(--color-accent); }
    .loop-mark__stop--lime-bright { stop-color: var(--color-accent-bright); }
    body.js-reveal .naming-mark__path { stroke-dasharray: 100; stroke-dashoffset: 100; }
    body.js-reveal .naming-beat .reveal.is-visible .naming-mark__path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-out); }

    /* ---------- DIY-Konter (dunkles Ink-Vollbreiten-Band, die Zäsur) ---------- */
    .diy-band { background: var(--color-primary-deep); color: var(--color-text-inverse); position: relative; isolation: isolate; overflow: hidden; }
    .diy-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(720px 420px at 88% 0%, rgba(180, 255, 46,0.16), transparent 60%); }
    /* Kontrast-Fix: die Basis-.eyebrow-Farbe (Ink) ist auf dem fast-schwarzen Band
       praktisch unlesbar (~1:1). Scope auf .diy-band, damit helle Bänder unberührt
       bleiben — analog zum bestehenden Muster bei .hero/.cta-section. ~17:1 gegen
       --color-primary-deep. */
    .diy-band .eyebrow { color: var(--color-accent-bright); }
    .diy-inner { max-width: 800px; }
    .diy-band h2 { color: #fff; max-width: 18ch; }
    .diy-body { margin-top: clamp(28px, 4vw, 40px); }
    .diy-body p { font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.3rem); line-height: 1.68; color: var(--color-text-on-dark-muted); margin-bottom: 0; max-width: 56ch; }
    .diy-kicker { font-family: var(--font-display); font-style: italic; font-weight: 480; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.7rem); line-height: 1.42; color: var(--color-text-inverse); max-width: 46ch; margin-top: 36px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.16); }

    /* ---------- "Die Wand" (DIY-Band): Hürden als Icon-Chips statt Prosa-Absatz ---------- */
    .wall-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: clamp(28px, 4vw, 40px) 0; }
    .wall-chip { display: flex; flex-direction: column; gap: 12px; padding: 20px 18px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-md); }
    .wall-chip svg { width: 22px; height: 22px; fill: none; stroke: var(--color-accent-bright); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .wall-chip span { font-family: var(--font-sans); font-weight: 600; font-size: 0.92rem; line-height: 1.35; color: var(--color-text-inverse); }
    @media (max-width: 700px) { .wall-grid { grid-template-columns: repeat(2, 1fr); } }

    /* ---------- Risk-Reversal (persönliche Zusage, keine Karten) ---------- */
    /* Zweispaltig: freigestelltes Handy LINKS | Text RECHTS (Abwechslung zur Mechanismus-Sektion darüber) —
       keine umschließende Karte (nur das Gerät). Handy steht im DOM hinter dem Text → order:-1 holt es nach links. */
    .risk-panel { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
    .risk-panel .freigabe-shot { order: -1; }
    /* Alles linksbündig auf EINE Kante (Kicker, Headline, Liste) — die Signatur rechts ist der
       einzige bewusste Bruch, wie unter einem Brief. Vorher: vier verschiedene Ausrichtungen. */
    .risk-panel h2 { margin-bottom: clamp(32px, 4vw, 44px); max-width: 20ch; text-wrap: balance; }
    .commit-list { list-style: none; display: flex; flex-direction: column; gap: 24px; }
    .commit-list li { display: flex; align-items: flex-start; gap: 14px; }
    .commit-list svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 3px; fill: none; stroke: var(--color-success); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    .commit-list strong { display: block; font-size: 1rem; font-weight: 600; color: var(--color-text); margin-bottom: 3px; }
    .commit-list span { display: block; color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.58; }

    /* ---------- Freigabe-Screenshot (echtes Produktbild, Geräterahmen im Bild
       enthalten — daher keine eigene Karten-Umrandung, nur Schlagschatten). ---------- */
    .freigabe-shot { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
    /* Freigestelltes Handy (transparenter PNG/WebP): Silhouetten-Schatten via drop-shadow (folgt dem Gerät, kein Rechteck). */
    .freigabe-shot img { display: block; width: 100%; max-width: 340px; height: auto; filter: drop-shadow(0 30px 46px rgba(20, 33, 30, 0.22)); }
    @media (max-width: 900px) { .risk-panel { grid-template-columns: 1fr; gap: clamp(32px, 6vw, 44px); } .risk-panel .freigabe-shot { order: 0; } .risk-text .commit-list { max-width: 46ch; } }
    .freigabe-shot__caption { margin-top: 16px; max-width: 44ch; font-size: 0.88rem; color: var(--color-text-subtle); }

    /* ---------- Portal-Vorschau (echter Dashboard-Nachbau: ampel-chip, Checkliste,
       home-check-mark aus assistic/backend/admin/frontend/dashboard.html + admin.css).
       Eigenständiges Band (dritter Ton neben band-white/-cream), weil Nachbarn laut
       Band-System oben nie dieselbe Klasse teilen dürfen. ---------- */
    .portal-preview { background: var(--color-bg); }
    .portal-preview::before, .portal-preview::after {
      content: ""; position: absolute; left: var(--gutter); right: var(--gutter); height: 1px;
      background: var(--color-border);
    }
    .portal-preview::before { top: 0; }
    .portal-preview::after { bottom: 0; }
    .portal-preview__inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
    .portal-preview__text h2 { margin-bottom: 18px; max-width: 20ch; text-wrap: balance; }
    .portal-preview__text p { color: var(--color-text-muted); font-size: 1.06rem; line-height: 1.66; max-width: 44ch; }
    @media (max-width: 900px) { .portal-preview__inner { grid-template-columns: 1fr; } }

    /* ---------- Screen-Loop (echtes Portal-Footage, Redesign 2026-07-23) ----------
       Gleiche "Produkt-Fenster"-Optik + Klassennamen wie die Dashboard-Loops auf
       /chatbot (chatbot.css .feature-loop) — bewusst wiederverwendet statt neu
       erfunden, beide Seiten laden ihr eigenes Stylesheet, keine Kollision. Hier nur
       EIN Loop (echtes Screencast der Portal-Übersicht, s. figcaption), volle Breite
       unter der PortalPreview statt eines Grids — bestätigt den Hand-Nachbau direkt
       darüber, ohne ihn zu verdoppeln. Video-Quelle wird erst per JS gesetzt, sobald
       die Karte in den Viewport scrollt (page-scripts in index.astro). */
    .feature-loop { margin: 0; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-md); }
    .feature-loop__bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--color-primary); color: rgba(255,255,255,0.82); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
    .feature-loop__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; }
    .feature-loop__video { display: block; width: 100%; height: auto; aspect-ratio: 960 / 600; background: var(--color-surface-alt); object-fit: cover; }
    .feature-loop figcaption { padding: 14px 18px 18px; font-size: 0.9rem; line-height: 1.55; color: var(--color-text-muted); }
    .feature-loop figcaption strong { color: var(--color-text); }
    .portal-preview__loop { margin-top: clamp(28px, 4vw, 40px); grid-column: 1 / -1; max-width: 720px; margin-inline: auto; position: relative; }
    /* Weicher Ausblendrand statt hartem Schnitt: das Screencast scrollt kontinuierlich,
       die Unterkante trifft je nach Loop-Position mitten in eine Zeile (iris-Befund
       23.07.). Als Overlay über der fertig geklippten Karte (nicht als Maske auf dem
       Video) — wirkt so auch mobil hinter dem Zoom-Transform unverändert am unteren
       Kartenrand. Fade zu Weiß (= Kartenhintergrund), ohne das Video neu zu rendern. */
    .portal-preview__loop::after {
      content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 18%;
      background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--color-surface) 92%);
      border-radius: 0 0 var(--radius-xl) var(--radius-xl); pointer-events: none;
    }
    /* Mobil: gezoomter Ausschnitt statt Ganzansicht — bei Kartenbreite <400px ist die
       volle Dashboard-Seite unlesbar klein (iris-Befund 23.07.). Skaliert das Video
       innerhalb des überlaufgeklippten Rahmens hoch und zentriert oben, zeigt also
       einen lesbaren Ausschnitt statt der geschrumpften Ganzansicht. */
    @media (max-width: 640px) {
      .portal-preview__loop .feature-loop__video {
        transform: scale(1.45); transform-origin: top center;
      }
    }

    /* Karte: gleiche Bauweise wie .kat-demo (Ink-Kopf, weißer Körper) — bewusst
       wiederverwendet statt neu erfunden. */
    .portal-demo {
      background: var(--color-surface); border: 1px solid var(--color-border);
      border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden;
      /* Echte Admin-Ampel-Tokens (assistic/backend/admin/frontend/assets/admin.css),
         lokal gehalten statt in die globalen Marketing-Tokens gemischt. */
      --pd-success: #16A34A; --pd-success-soft: #DCFCE7;
      --pd-warning: #D97706; --pd-warning-soft: #FEF3C7;
    }
    .portal-demo__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; background: var(--color-primary); color: #fff; }
    .portal-demo__brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 0.95rem; }
    .portal-demo__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; }
    .portal-demo__badge { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.78); }

    .portal-demo__tiles { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-divider); }
    .portal-demo__tile { background: var(--color-surface); padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
    .portal-demo__tile-label { font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted); }
    @media (max-width: 520px) { .portal-demo__tiles { grid-template-columns: 1fr; } }

    /* Ampel-Chip: 1:1-Nachbau der echten Klasse aus admin.css (Zustands-Semantik,
       nie der Marken-Akzent Lime — dieselbe Disziplin gilt hier). */
    .portal-demo .ampel-chip { display: inline-flex; align-items: center; gap: 0.35rem; width: fit-content; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em; padding: 0.24rem 0.65rem; border-radius: var(--radius-pill); }
    .portal-demo .ampel-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .portal-demo .ampel-chip--on { background: var(--pd-success-soft); color: #15803D; }
    .portal-demo .ampel-chip--on .ampel-chip-dot { background: var(--pd-success); }
    .portal-demo .ampel-chip--wait { background: var(--pd-warning-soft); color: #92400E; }
    .portal-demo .ampel-chip--wait .ampel-chip-dot { background: var(--pd-warning); }
    .portal-demo .ampel-chip--neutral { background: var(--color-surface-alt); color: var(--color-text); }
    .portal-demo .ampel-chip--neutral .ampel-chip-dot { background: var(--color-text-subtle); }

    .portal-demo__checklist { list-style: none; padding: 6px 22px 20px; }
    .portal-demo__check { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); font-size: 0.9rem; color: var(--color-text); }
    .portal-demo__check:last-child { border-bottom: none; }
    .portal-demo__check.is-done { color: var(--color-text-muted); }
    .portal-demo__check .home-check-mark { flex-shrink: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; background: var(--color-surface-alt); color: transparent; }
    .portal-demo__check.is-done .home-check-mark { background: var(--pd-success-soft); color: #15803D; }

    /* ---------- Services-Strip (Sekundär-Content, kompakt statt Karten) ---------- */
    /* Weiße Karten-Fläche + weiche Elevation → hebt den Strip klarer von der cremefarbenen Sektion ab (mehr Kontrast). */
    .services-strip { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md); overflow: hidden; }
    .service-item { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px; border-right: 1px solid var(--color-border); transition: background var(--duration-base); }
    .service-item:last-child { border-right: none; }
    .service-item:hover { background: var(--color-surface-warm); }
    .service-item__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--color-accent-soft); color: var(--color-text); }
    .service-item__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .service-item__title { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 1.02rem; color: var(--color-text); margin-bottom: 4px; }
    .service-item__lead { display: block; font-size: 0.88rem; line-height: 1.5; color: var(--color-text-muted); }
    .service-item__link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--color-primary); margin-top: auto; padding-top: 6px; }
    .service-item__link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-base); }
    .service-item:hover .service-item__link svg { transform: translateX(3px); }
    .service-item.is-highlight { background: var(--color-primary); border-right-color: var(--color-primary-line); }
    .service-item.is-highlight:hover { background: var(--color-primary-hover); }
    .service-item.is-highlight .service-item__title { color: #fff; }
    .service-item.is-highlight .service-item__lead { color: var(--color-text-on-dark-muted); }
    .service-item.is-highlight .service-item__link { color: #fff; }
    .service-item.is-highlight .service-item__icon { background: rgba(255,255,255,0.14); color: #fff; }
    .service-item .pop { position: absolute; top: 16px; right: 16px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent); }

    /* ---------- EU-Karte: Bild-Caption (editorial Figure-Label) ---------- */

    /* ---------- Split (Spotlight) ---------- */
    .split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 74px); align-items: center; }
    .split__text p { color: var(--color-text-muted); font-size: 1.06rem; line-height: 1.66; margin-bottom: 26px; }
    .tag-row { display: flex; flex-wrap: wrap; gap: 10px; }
    .tag { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 500; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); }
    .tag svg { width: 16px; height: 16px; fill: none; stroke: var(--color-text); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
    .example-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .example-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 26px; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
    .example-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
    .example-card .icon-wrap { width: 44px; height: 44px; margin-bottom: 16px; background: var(--color-accent-soft); color: var(--color-text); }
    .example-card .icon-wrap svg { width: 21px; height: 21px; }
    .example-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
    .example-card p { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.55; margin-bottom: 18px; }
    .ex-flow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; color: var(--color-primary); padding-top: 16px; border-top: 1px solid var(--color-divider); width: 100%; }
    .ex-flow .from { color: var(--color-text-subtle); text-decoration: line-through; font-weight: 400; }
    .ex-flow svg { width: 16px; height: 16px; fill: none; stroke: var(--color-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    /* ---------- Steps (editorial: große Geist-Ziffern + Hairline-Faden) ---------- */
    .steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--color-border); }
    .step-card { position: relative; padding: 34px 32px 34px 32px; border-right: 1px solid var(--color-divider); }
    .step-card:last-child { border-right: none; }
    .step-card:first-child { padding-left: 0; }
    .step-no { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--color-text); margin-bottom: 18px; letter-spacing: -0.01em; }
    /* Feste Kopfhöhe: sonst startet der Fließtext je nach Umbruch der Überschrift
       auf drei verschiedenen Höhen und die Trennlinien zeigen die Löcher. */
    .step-card h3 { margin-bottom: 10px; min-height: 2.6em; }
    @media (max-width: 860px) { .step-card h3 { min-height: 0; } }
    .step-card p { color: var(--color-text-muted); font-size: 0.96rem; line-height: 1.6; }

    /* ======================= EU-Karte ======================= */
    /* Hintergrund kommt vom Band-System (.band-white auf der Sektion). */
    /* ---------- Datenhoheit: "Die Reise deiner Daten" ----------
       Vorher: beiges Kartenbild auf beigem Grund (kein Kontrast) + statische Deko.
       Jetzt: dunkles Ink-Panel wie der Hero, Lime-Route, die sich zeichnet,
       Liste und Karte gekoppelt. */
    .eu-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 5vw, 68px); align-items: center; }
    @media (max-width: 900px) { .eu-inner { grid-template-columns: 1fr; } }

    .eu-stage { position: relative; background: var(--color-primary-deep); border-radius: var(--radius-xl); padding: clamp(20px, 2.6vw, 28px); box-shadow: var(--shadow-lg); overflow: hidden; }
    .eu-stage::before { content: ""; position: absolute; inset: 0; z-index: 0;
      background: radial-gradient(520px 320px at 78% 6%, rgba(180, 255, 46,0.18), transparent 62%); }
    .eu-stage > * { position: relative; z-index: 1; }
    .eu-stage__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
    .eu-stage__kicker { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-bright); }
    .eu-stage__count { font-family: var(--font-mono); font-size: 0.72rem; color: rgba(255,255,255,0.45); }
    .eu-stage__count b { color: #fff; font-weight: 600; }
    .eu-stage__bar { height: 2px; border-radius: 2px; background: rgba(255,255,255,0.12); overflow: hidden; margin-top: 6px; }
    .eu-stage__bar span { display: block; height: 100%; width: 33.33%; background: var(--color-accent); border-radius: 2px; transition: width .5s var(--ease-out); }

    .eu-map { width: 100%; height: auto; }
    .eu-country { fill: rgba(236,238,236,0.10); stroke: rgba(255,255,255,0.20); stroke-width: 1; transition: fill .35s var(--ease-out); }
    .eu-country.is-active { fill: rgba(236,238,236,0.20); }

    /* pathLength=1 -> die Route lässt sich unabhängig von ihrer echten Länge "zeichnen" */
    .eu-route { fill: none; stroke: var(--color-accent-bright); stroke-width: 1.6; stroke-linecap: round;
      stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1s var(--ease-out), opacity .3s; }
    .eu-route.is-drawn { stroke-dashoffset: 0; opacity: 0.9; }

    .eu-pin { cursor: pointer; }
    .eu-pin .head { fill: var(--color-accent); stroke: rgba(255,255,255,0.85); stroke-width: 1; transition: fill .25s; }
    .eu-pin .dot { fill: #fff; }
    .eu-pin .pulse { fill: var(--color-accent-bright); opacity: 0; transform-origin: 12px 21px; }
    .eu-pin.is-active .head { fill: var(--color-accent-bright); }
    .eu-pin.is-active .pulse { animation: pin-pulse 1.8s ease-out infinite; }
    @keyframes pin-pulse { 0% { opacity: 0.45; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.6); } }

    /* Labels: gedämpft sichtbar, die aktive Station tritt hervor. Halo in Panel-Farbe. */
    .eu-tip { opacity: 0.45; transition: opacity .3s; }
    .eu-tip.is-active { opacity: 1; }
    .eu-tip-t, .eu-tip-s { paint-order: stroke; stroke: var(--color-primary-deep); stroke-width: 3.5px; stroke-linejoin: round; }
    .eu-tip-t { font-family: var(--font-sans); font-size: 9.5px; font-weight: 600; fill: #fff; }
    .eu-tip-s { font-family: var(--font-sans); font-size: 7.5px; fill: rgba(255,255,255,0.62); }
    @media (max-width: 640px) { .eu-tip { display: none; } } /* zu eng — die Liste trägt die Info */

    .eu-text h2 { margin-bottom: 18px; }
    .eu-text > p { color: var(--color-text-muted); font-size: 1.06rem; margin-bottom: 26px; }
    .eu-steps { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }

    /* Echte Buttons: klickbar UND per Tastatur bedienbar (vorher nur Hover -> auf dem Handy tot). */
    .eu-step { display: flex; gap: 14px; width: 100%; text-align: left; padding: 15px 16px; border-radius: var(--radius-md);
      border: 1px solid var(--color-border); background: var(--color-surface); cursor: pointer; font: inherit;
      transition: border-color .2s, background .2s, transform .2s var(--ease-out); }
    .eu-step:hover { border-color: var(--color-border-strong); transform: translateX(2px); }
    .eu-step:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
    .eu-step[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); }
    .eu-step__no { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted);
      background: var(--color-surface-alt); border: 1px solid var(--color-border); transition: background .2s, color .2s, border-color .2s; }
    .eu-step[aria-pressed="true"] .eu-step__no { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
    .eu-step__body { display: block; }
    .eu-step__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 3px; }
    .eu-step__head strong { font-size: 1.02rem; color: var(--color-text); }
    .eu-step__chip { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
      padding: 3px 8px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary); }
    .eu-step__desc { display: block; font-size: 0.92rem; line-height: 1.55; color: var(--color-text-muted); }
    .eu-foot { font-size: 0.9rem; line-height: 1.6; color: var(--color-text-subtle); }
    .eu-foot a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }

    /* ======================= ABOUT (editorial portrait) ======================= */
    /* Hintergrund kommt vom Band-System (.band-cream auf der Sektion). */
    .about-inner { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
    .about-inner > div:first-child { max-width: 400px; }
    .about-photo { width: 100%; height: auto; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); object-fit: cover; object-position: center 30%; aspect-ratio: 4/5; }
    .about-text h2 { margin-bottom: 22px; }
    .about-text p { color: var(--color-text-muted); font-size: 1.1rem; line-height: 1.74; }
    .about-text .eyebrow { margin-bottom: 24px; }

    /* ======================= REGION IMAGE ======================= */
    .region-img { width: 100%; height: clamp(220px, 32vw, 420px); object-fit: cover; }

    /* ======================= FAQ ======================= */
    .faq { max-width: 820px; }
    .faq-item { border-bottom: 1px solid var(--color-border); }
    .faq-item:first-child { border-top: 1px solid var(--color-border); }
    .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 26px 4px; cursor: pointer; list-style: none; font-family: var(--font-sans); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; color: var(--color-text); }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item .chev { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: var(--color-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-base); }
    .faq-item[open] .chev { transform: rotate(180deg); }
    .faq-item .answer { padding: 0 4px 26px; color: var(--color-text-muted); font-size: 1.01rem; line-height: 1.7; max-width: 64ch; }
    .faq-item .answer a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }

    /* ======================= CTA =======================
       Redesign 2026-07-14: kein schwebender abgerundeter Kasten mehr — die ganze
       Sektion IST das dunkle Band (wie .diy-band), volle Breite, kein Radius. */
    .cta-section {
      /* max-width/padding/border-radius explizit resettet: assets/site.css definiert
         .cta-section anderswo als schwebende, radius-abgerundete Karte (für andere
         Seiten) — hier soll die ganze Sektion das volle Band sein, kein Kasten. */
      position: relative; overflow: hidden; isolation: isolate; max-width: none;
      margin-inline: 0; border-radius: 0; padding: var(--sv) 0;
      background: var(--color-primary-deep); color: var(--color-text-inverse); text-align: center;
    }
    .cta-section::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(640px 380px at 84% 0%, rgba(180, 255, 46,0.32), transparent 62%), radial-gradient(560px 440px at 8% 100%, rgba(42, 46, 51,0.6), transparent 60%); }
    .cta-inner { max-width: 640px; margin-inline: auto; }
    .cta-section .eyebrow { justify-content: center; color: var(--color-accent-bright); }
    .cta-section h2 { color: #fff; margin-bottom: 18px; }
    .cta-section h2 em { color: var(--color-text-inverse); }
    .cta-inner > p { color: var(--color-text-on-dark-muted); font-size: 1.14rem; max-width: 46ch; margin: 0 auto 34px; }
    .cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

    /* ======================= CONTACT ======================= */
    /* Hintergrund kommt jetzt vom Band-System (.band-white auf der Sektion). */
    .contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 64px); align-items: start; }
    .contact-info h2 { margin-bottom: 20px; }
    .contact-info p { color: var(--color-text-muted); font-size: 1.02rem; line-height: 1.65; margin-bottom: 14px; }
    .contact-links { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
    /* min-height 44px: Fingergröße — die Links waren nur 26px hoch und auf dem Handy kaum zu treffen. */
    .contact-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 500; color: var(--color-primary); }
    .contact-link svg { width: 20px; height: 20px; fill: none; stroke: var(--color-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .contact-link:hover { color: var(--color-primary-hover); }
    .contact-form { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 34px; box-shadow: var(--shadow-sm); }
    .form-group { margin-bottom: 18px; }
    .form-group label { display: block; font-size: 0.88rem; font-weight: 500; margin-bottom: 8px; color: var(--color-text); }
    .form-group label span { color: var(--color-primary); }
    .contact-form input, .contact-form textarea { width: 100%; padding: 13px 15px; font-family: inherit; font-size: 1rem; /* >=16px: verhindert iOS-Auto-Zoom beim Fokus */ border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-warm); color: var(--color-text); transition: border-color .18s, box-shadow .18s, background .18s; }
    .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--color-primary); background: #fff; box-shadow: var(--shadow-focus); }
    .contact-form textarea { min-height: 120px; resize: vertical; }
    .form-hint { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 18px; }
    .form-submit { width: 100%; }

    /* ======================= FOOTER =======================
       Kommt aus assets/site.css (.site-footer*, dunkles Ink-Bookend). */

    /* ======================= BACK TO TOP ======================= */
    .back-to-top { position: fixed; bottom: 26px; left: 26px; z-index: 90; width: 46px; height: 46px; border-radius: 50%; background: var(--color-primary); color: #fff; border: none; cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, visibility .25s, transform .25s, background .2s; }
    .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
    .back-to-top:hover { background: var(--color-primary-hover); }
    .back-to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

    /* ======================= REVEAL =======================
       .reveal-Basis kommt aus assets/site.css (body.js-reveal .reveal); JS ebenfalls
       gemeinsam (assets/site.js). Hier nur der globale Reduced-Motion-Blanket-Fallback. */
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

    /* ======================= RESPONSIVE ======================= */
    @media (max-width: 980px) {
      .whom-grid { grid-template-columns: 1fr 1fr; }
      .steps { grid-template-columns: 1fr; border-top: none; }
      .steps::after { display: none; } /* Verbindungslinie ist ein Desktop-Grid-Effekt — im Stapel gibt's nichts zu verbinden */
      .step-card { border-right: none; border-top: 1px solid var(--color-divider); padding: 28px 0; }
      .step-card:first-child { padding-left: 0; }
      .split, .eu-inner, .about-inner, .contact-inner, .problem-inner { grid-template-columns: 1fr; }
      .about-inner > div:first-child { max-width: 440px; }
      .about-photo { aspect-ratio: 4/3.2; }
      .problem-row { grid-template-columns: 1fr; border-top: none; }
      .problem-col { border-right: none; border-top: 1px solid var(--color-divider); padding: 26px 0; }
      .problem-col:first-child { border-top: none; padding-top: 0; }
      .problem-col:last-child { padding-bottom: 0; }
    }
    @media (max-width: 700px) {
      .whom-grid, .example-grid { grid-template-columns: 1fr; }
      .section-head p { font-size: 1.06rem; }
      .services-strip { grid-template-columns: 1fr; }
      .service-item { border-right: none; border-bottom: 1px solid var(--color-border); }
      .service-item:last-child { border-bottom: none; }
    }
    @media (max-width: 400px) {
      .btn { width: 100%; }
      .hero__cta-row .btn, .cta-row .btn { width: 100%; }
    }


    /* Mobile-Feinschliff: Hero-Headline auf schmalen Screens kontrollieren. */
    @media (max-width: 600px) {
      /* Auf schmalen Screens den Hero NICHT auf volle Höhe zwingen — sonst
         zentriert der Flex-Container den kurzen Inhalt mit großem Leerraum oben
         (iris @390px: ~500px tote Fläche). Content-getrieben statt 100svh. */
      .hero { min-height: auto; padding-block: clamp(40px, 9vw, 64px); }
      .hero h1 { font-size: clamp(2.3rem, 8vw + 0.3rem, 3rem); }
      .hero__lead { font-size: 1.05rem; }
      /* Der Strich vor der Eyebrow hängt allein in der Luft, sobald der Text
         zweizeilig umbricht — auf schmalen Screens deshalb weg. */
      .hero .eyebrow::before { display: none; }
      .hero .eyebrow { gap: 0; }
    }

    /* ======================= BENEFIT-SEKTION „Das bringt es dir" =======================
       v3-Nutzenmotive (Marge · Reserve · Betriebswert · Revier). Weißes Band → cremefarbene
       Karten (Kontrast zum Band), feiner Lime-Akzent oben (bindet ans Akzentsystem). */
    .benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .benefit-card {
      position: relative; background: var(--color-surface-alt);
      border: 1px solid var(--color-border); border-radius: var(--radius-lg);
      padding: 34px 32px 32px; overflow: hidden;
    }
    .benefit-card::before { content: ""; position: absolute; top: 0; left: 32px; width: 34px; height: 2px; background: var(--color-accent); }
    .benefit-card__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--color-primary-soft); color: var(--color-primary); margin-bottom: 18px; }
    .benefit-card__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .benefit-card h3 { margin-bottom: 12px; }
    .benefit-card p { color: var(--color-text-muted); font-size: 0.99rem; line-height: 1.62; }
    @media (max-width: 760px) { .benefits-grid { grid-template-columns: 1fr; } }

    /* ======================= SPIEGEL-INTERSTITIAL =======================
       Der eine Spiegel-Satz (ex „Du kennst das Muster"): bewusst KOMPAKTE Zäsur
       statt leeres Band. Weniger vertikales Padding, kein Nach-Abstand (nichts
       folgt), enger gesetzt. */
    .spiegel { padding: clamp(60px, 8vw, 96px) 0; }
    .spiegel .section-head { margin-bottom: 0; max-width: 46rem; }
    .spiegel h2 { font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.5rem); text-wrap: balance; }
    .spiegel .section-head p { margin-top: 18px; max-width: 42ch; margin-inline: auto; text-wrap: pretty; }