/* ============================================================
   NesilaX — Basis-Stylesheet
   Gilt für alle Seiten. Quelle: index.html (v2, 17.07.2026).
   Einbinden mit: <link rel="stylesheet" href="styles.css">
   ============================================================ */

  :root{
    /* ---------------------------------------------------------------
       HELLE FASSUNG, umgestellt am 13.08.2026.
       Alle Werte stammen aus dem Corporate Design, Abschnitt 2,
       Spalte "Light". Nichts davon ist erfunden.
       Die dunkle Fassung liegt vollständig unter
       Versionen/dunkel-2026-08-13/.

       Eine Abweichung vom CD, begründet:
       Das CD nennt --accent-ink #04141C als "Text auf Akzent".
       Gemessen ergibt das auf #0A7CA0 nur 3,92:1 und liegt damit
       unter der Lesbarkeitsschwelle von 4,5. Weiß erreicht 4,77:1.
       Deshalb steht hier Weiß. Bitte im CD nachziehen.
       --------------------------------------------------------------- */
    --bg:#F5F7FB; --card:#FFFFFF; --card-2:#EFF3F9; --card-hover:#EFF3F9;
    --line:#E1E7F0; --rail:#B9C4D3;
    --ink:#0F1626; --ink-strong:#05080F; --muted:#556278;
    --accent:#0A7CA0; --accent-2:#6B4CBE; --accent-soft:#DDF0F7;
    --accent-ink:#FFFFFF;

    /* ---------------------------------------------------------------
       AKZENT ALS SCHRIFT, ergaenzt am 14.08.2026 nach Messung.
       --accent ist eine FLAECHENFARBE. Als Schrift faellt sie durch:
         auf --bg      #F5F7FB : 4,45
         auf --card-2  #EFF3F9 : 4,28
         auf accent-soft #DDF0F7: 4,06
       Alle drei liegen unter 4,5. --accent-text #09708F schafft
       mindestens 4,80 auf jedem hellen Untergrund der Seite.
       Regel: Flaechen und Icons nutzen --accent, Schrift --accent-text.
       --------------------------------------------------------------- */
    --accent-text:#09708F;

    /* Sekundaertext auf den beiden dunklen Momenten. --muted ergibt dort
       nur 3,04, diese Variante 6,52. */
    --muted-deep:#8E99AE;
    --done:#2A8865; --pending:#A65E1A; --caution:#A6221A;
    --wvx-orange:#E07424;
    /* Die Hausfarbe ist eine Flaechenfarbe. Als Schrift auf --bg ergibt sie
       2,93 und ist damit unbrauchbar. Diese Variante erreicht 5,05. */
    --wvx-orange-text:#A8520F;

    /* Bewusst gesetzte dunkle Momente: Kopfzeile des Vergleichs und
       die linke Uhr. Auf einer hellen Seite sind zwei dunkle Blöcke
       ein Mittel, kein Bruch. */
    --deep:#0B1220; --deep-2:#010211;
    /* Palette der dunklen Uhr, am 14.08. aus harten Werten tokenisiert. */
    --deep-chip:#C9D2E1; --deep-ink:#E8ECF4; --deep-muted:#A7B1C4; --deep-dim:#5C6B85; --deep-alarm:#FF7B70;
    /* Rahmenfarbe fuer Bedienelemente, 3,04 auf hellem Grund. */
    --control-line:#7E90A8;

    /* Signature-Verlauf. Nur noch für Logo und Wortmarken-X. */
    --grad:linear-gradient(135deg,#3AC5EA 0%,#9A6BE8 100%);
    /* ---------------------------------------------------------------
       SCHRIFTLEITER, festgelegt am 14.08.2026.
       Vorher lagen 25 Einzelwerte im Stylesheet, darunter drei Groessen
       fuer dieselbe Rolle Vorspann und zwei fuer h3. Rollen benennen
       ihren Zweck, nicht ihren Wert. Wer eine neue Groesse braucht,
       ergaenzt hier eine Rolle statt einen Einzelwert zu setzen.
       Ausgenommen bleibt die Chat-Attrappe, sie folgt dem echten Widget.
       --------------------------------------------------------------- */
    --fs-display:clamp(30px,3.8vw,45px);
    --fs-headline:clamp(26px,3.2vw,37px);
    --fs-clock:clamp(54px,6.6vw,84px);
    --fs-numeral:40px;
    --fs-numeral-sm:32px;
    /* Ergebniszeile des Vergleichs, fluide zwischen numeral-sm und numeral. */
    --fs-result:clamp(32px,3.4vw,40px);
    --fs-title:18px;
    --fs-lead:clamp(16px,1.5vw,19px);
    --fs-body:16px;
    --fs-body-sm:15px;
    --fs-label:14px;
    --fs-caption:13px;
    /* Kleinstziffer im Schrittknoten, 21px-Kreis. */
    --fs-micro:11px;
    /* Markenlettering, eigene Rolle: das ist Logo, keine Textleiter. */
    --fs-wordmark:31px; --fs-wordmark-mark:28px;
    --fs-wordmark-sm:21px; --fs-wordmark-mark-sm:19px;
    --maxw:1140px;
    --font:"Segoe UI Variable Display","SF Pro Display",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  /* ---------------------------------------------------------------
     FORMENSYSTEM, festgelegt am 13.08.2026.
     Vorher lagen zwölf verschiedene Eckenradien im Stylesheet, das liest
     sich zufällig. Ab jetzt gelten drei Stufen plus Rund:
       Flächen und Karten .............. 16px
       Bedienelemente und Kleinteile .... 8px
       Kreise und Pillen ............... 50% bzw. 999px
     Ausgenommen ist die Chat-Attrappe: Sie bildet das echte Widget nach
     und übernimmt dessen Werte (12px Fläche, 4px Eingabefeld).
     --------------------------------------------------------------- */
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:88px}
  /* Sprungziele nicht unter den klebenden Kopf schieben. Kopf misst 73px,
     88px lassen 15px Luft. Der alte Wert 100 stammte aus einer 81px-Kopfzeile. */
  section[id],div[id]{scroll-margin-top:88px}
  /* overflow-x:hidden am 14.08.2026 entfernt. Es war eine Sperre gegen
     waagerechtes Scrollen und hat zugleich absolut gesetzte Ebenen
     beschnitten. Bei 360, 390, 520, 680, 820, 1000 und 1280px gemessen:
     kein Ueberlauf, kein ueberstehendes Element. Die Sperre war ein
     Pflaster fuer ein Problem, das es nicht mehr gibt. */
  body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  /* Verlaufsschrift auf Vollton umgestellt. Nur Logo und Wortmarken-X behalten
     den Signature-Verlauf, sonst ist die Seite frei davon. */
  .grad-text{color:var(--accent-text)}
  .kicker{color:var(--accent-text);font-weight:600;font-size:var(--fs-caption);letter-spacing:.09em;text-transform:uppercase;margin-bottom:13px}

  /* Buttons */
  .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:var(--fs-body-sm);padding:12px 22px;border-radius:8px;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;border:0}
  .btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 16px rgba(15,22,38,.16)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,22,38,.18)}
  /* Rahmen bewusst dunkler als --rail: B9C4D3 auf hellem Grund ergibt 1,65:1,
     Bedienelemente brauchen 3,0. #7E90A8 erreicht 3,04. */
  .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--control-line)}
  .btn-ghost:hover{background:var(--card-hover);border-color:var(--accent);color:var(--accent-text)}
  .btn-lg{padding:15px 30px;font-size:var(--fs-body);border-radius:8px}

  /* Header */
  header{position:sticky;top:0;z-index:50;background:rgba(245,247,251,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  /* 72px statt 80: Mit der 1px-Trennlinie darunter kam die Kopfzeile auf 81px
     und lag damit über dem Deckel von 80px. */
  .nav{display:flex;align-items:center;justify-content:space-between;height:72px}
  .brand{display:inline-flex;align-items:center;gap:13px;min-height:44px}
  .brand .mark{width:46px;height:46px;border-radius:8px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--fs-wordmark-mark);line-height:1;box-shadow:0 6px 18px rgba(15,22,38,.14)}
  .brand .wordmark{font-size:var(--fs-wordmark);font-weight:700;letter-spacing:-.025em;color:var(--ink-strong)}
  .brand .wordmark .x{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .brand.sm{gap:10px}
  .brand.sm .mark{width:32px;height:32px;font-size:var(--fs-wordmark-mark-sm);border-radius:8px;box-shadow:0 3px 9px rgba(15,22,38,.12)}
  .brand.sm .wordmark{font-size:var(--fs-wordmark-sm)}
  @media(max-width:520px){:root{--fs-wordmark:26px;--fs-wordmark-mark:24px}.brand .mark{width:40px;height:40px}}
  .nav-links{display:flex;gap:28px;align-items:center}
  .nav-links a{color:var(--muted);font-size:var(--fs-body-sm);transition:color .2s}
  .nav-links a:hover{color:var(--ink)}
  @media(max-width:840px){.nav-links a{display:none}}

  /* Hero */
  .hero{position:relative;padding:78px 0 66px;overflow:hidden}
  .hero::before{content:"";position:absolute;inset:0;z-index:0;background:var(--bg);pointer-events:none}
  /* oben bündig: Überschrift und Chat-Attrappe sollen auf derselben
     Höhe beginnen. Zentriert schob die Attrappe nach oben. */
  .hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-body-sm);font-weight:600;color:var(--accent-text);background:var(--accent-soft);border:1px solid var(--line);padding:9px 16px;border-radius:999px;margin-bottom:22px;letter-spacing:.01em}
  /* Der frühere grüne Punkt war reine Dekoration und zugleich eine zweite
     Akzentfarbe. Entfernt. Der grüne Punkt im Chat-Kopf bleibt, er zeigt
     einen echten Zustand (erreichbar) und ist Teil des Widget-Nachbaus. */
  .eyebrow .dot{display:none}
  h1{font-size:var(--fs-display);line-height:1.1;letter-spacing:-.02em;color:var(--ink-strong);font-weight:700;margin-bottom:20px}
  .hero p.lead{font-size:var(--fs-lead);color:var(--muted);max-width:52ch;margin-bottom:30px}
  .cta-row{display:flex;gap:13px;flex-wrap:wrap}
  /* minmax(0,1fr) statt 1fr: ein 1fr-Track schrumpft nicht unter die
     Mindestbreite seines Inhalts, die 400px breite Attrappe hätte den
     Track sonst aufgespreizt und wäre auf dem Handy angeschnitten. */
  @media(max-width:840px){.hero .wrap{grid-template-columns:minmax(0,1fr);gap:40px}.chat{margin-inline:auto}}

  /* ---------------------------------------------------------------
     Chat-Attrappe im Hero.
     Nachbau des echten Widgets, nicht eine erfundene Oberfläche.
     Werte am 13.08.2026 aus dem laufenden Widget gemessen:
       Fläche #ffffff · Text #1a1a1a · Rahmen #e5e5e7
       Kopf #0A7CA0 · Nutzerblase ebenfalls #0A7CA0 · Radius 12px · Arial
       Stand 13.08.: Seite auf hell umgestellt, deshalb im Snippet
       data-theme="light" und data-primary="#0A7CA0". Mit gesetztem
       data-primary nutzt das Widget eine einfarbige Nutzerblase statt
       des Standardverlaufs. Diese Attrappe bildet genau das nach.
       Nachrichtenfläche #f7f7f8 · Schatten 0 8px 32px rgba(0,0,0,.18)
     Die Attrappe ist deshalb hell, obwohl die Seite dunkel ist.
     Ändert sich das Widget-Theme, hier nachziehen.
     --------------------------------------------------------------- */
  .chat{--w-bg:#fff;--w-text:#1a1a1a;--w-line:#e5e5e7;--w-flat:#f7f7f8;--w-muted:#666;--w-primary:#0A7CA0;--w-user:#0A7CA0;
        background:var(--w-bg);color:var(--w-text);font-family:Arial,Helvetica,sans-serif;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 34px rgba(15,22,38,.12);width:min(400px,100%);margin-left:auto}
  .chat-head{background:var(--w-primary);color:#fff;padding:12px 16px}
  .chat-head .t{display:flex;align-items:center;gap:8px;font-size:16px;line-height:1.3}
  .chat-head .s{font-size:11px;opacity:.85;margin-top:2px}
  .chat-head .live{width:8px;height:8px;border-radius:50%;background:#22c55e;flex:none}
  .chat-note{background:var(--w-flat);color:var(--w-muted);font-size:11px;line-height:1.4;padding:8px 14px;border-bottom:1px solid var(--w-line);text-align:center}
  .chat-scroll{background:var(--w-flat);height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;overflow:hidden}
  .chat-meta{padding:0 0 2px}
  .chat-time,.chat-author{font-size:11px;color:var(--w-muted)}
  .chat-author{margin-top:6px}
  .chat-body{display:flex;flex-direction:column;gap:4px}
  .bub{max-width:80%;padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.4}
  .bub.bot{align-self:flex-start;background:var(--w-bg);border:1px solid var(--w-line);color:var(--w-text)}
  .bub.user{align-self:flex-end;background:var(--w-user);color:#fff;margin-top:6px}
  .bub .book{display:inline-block;margin-top:8px;font-weight:700;color:#fff;background:var(--w-user);padding:7px 13px;border-radius:8px;font-size:13px}
  .chat-input{display:flex;align-items:center;gap:8px;padding:10px;border-top:1px solid var(--w-line);background:var(--w-bg)}
  .chat-input .field{flex:1;color:var(--w-muted);font-size:14px;background:var(--w-bg);border:1px solid var(--w-line);border-radius:4px;padding:10px 12px}
  .chat-input .send{width:38px;height:38px;border-radius:50%;background:var(--w-user);display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
  /* Der Sendeknopf des Widgets nutzt einen gefüllten Papierflieger, keinen Strich-Pfeil.
     Die Regel muss spezifischer sein als .ico, das weiter oben fill:none setzt. */
  .chat-input .send .ico{width:17px;height:17px;fill:currentColor;stroke:none}
  .chat-foot{text-align:center;font-size:11px;color:var(--w-muted);padding:6px;background:var(--w-flat);border-top:1px solid var(--w-line)}
  .chat-foot b{color:var(--w-text);font-weight:700}
  /* typing indicator + bubble-in animation */
  .bub.typing{display:inline-flex;gap:5px;align-items:center;padding:12px 14px}
  .bub.typing span{width:6px;height:6px;border-radius:50%;background:var(--w-muted);animation:blink 1.2s infinite}
  .bub.typing span:nth-child(2){animation-delay:.18s}
  .bub.typing span:nth-child(3){animation-delay:.36s}
  @keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
  .bub.in{animation:pop .26s ease}
  @keyframes pop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
  /* Der Live-Launcher wird auf dieser Seite nicht mehr gerendert, das echte
     Widget bringt seinen eigenen mit. CSS am 13.08. entfernt. */
  /* Stats band */
  .stats{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  /* Vier gleich gewichtete Zahlen sagen nicht, welche zählt. Die erste
     bekommt deshalb eine eigene Fläche. Dunkle Schrift auf dem Verlauf,
     weiß wäre auf dem hellen Cyan nicht kontraststark genug. */
  .stats .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:0;padding:26px 24px;align-items:stretch}
  .stat{padding:8px 26px 8px 18px;display:flex;flex-direction:column;justify-content:center}
  /* .grad-text auf den Kennzahlen war wirkungslos, weil diese Regel spaeter
     steht und die Farbe ueberschrieb. Absicht im Markup, keine Wirkung auf
     dem Bildschirm. Aufgeloest: Die drei Begleitzahlen bleiben Tiefschwarz,
     die Leitkennzahl traegt ohnehin eine eigene Flaeche. */
  .stat .n{font-size:var(--fs-numeral-sm);font-weight:700;letter-spacing:-.02em;color:var(--ink-strong)}
  .stat .l{color:var(--muted);font-size:var(--fs-label);margin-top:4px;max-width:30ch}
  /* Rundum abgerundet und innerhalb des Rasters, nicht mehr an den linken
     Bandrand angeschnitten. Das Band bekommt dafür oben und unten Luft. */
  .stat-lead{background:var(--accent);color:var(--accent-ink);padding:28px 30px;margin-right:26px;border-radius:16px}
  .stat-lead .n{font-size:var(--fs-numeral);color:var(--accent-ink)}
  .stat-lead .l{color:var(--accent-ink);font-weight:500}
  @media(max-width:900px){
    .stats .wrap{grid-template-columns:1fr 1fr;padding:22px 24px;gap:18px 0}
    .stat{padding:6px 18px 6px 14px}
    .stat-lead{grid-column:1 / -1;margin:0 0 4px;border-radius:16px}
  }
  @media(max-width:520px){.stats .wrap{grid-template-columns:1fr}}

  /* --------------------------------------------------------------
     Vergleich als zwei Uhren, randlos.
     Karten mit Abstand drumherum schwächen einen Gegensatz ab,
     zwei Flächen bis zum Rand tragen ihn. Rechts der Signature-Verlauf
     mit dunkler Schrift: Weiß auf #3AC5EA erreicht die Lesbarkeitsschwelle
     nicht, dunkel auf dem Verlauf schon.
     -------------------------------------------------------------- */
  .clock-duo{display:grid;grid-template-columns:1fr 1fr;margin-top:8px}
  .cd-side{padding:56px 30px 60px}
  .cd-inner{max-width:530px}
  .cd-off{background:var(--deep);color:var(--deep-ink)}
  .cd-off .cd-inner{margin-left:auto;padding-right:30px}
  .cd-on{background:var(--accent);color:var(--accent-ink)}
  .cd-on .cd-inner{margin-right:auto;padding-left:30px}
  .cd-tag{font-size:var(--fs-caption);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .cd-off .cd-tag{color:var(--deep-alarm)}
  .cd-on .cd-tag{color:var(--accent-ink)}
  .cd-time{font-size:var(--fs-clock);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin-top:14px;font-variant-numeric:tabular-nums}
  .cd-off .cd-time{color:var(--deep-dim)}
  .cd-on .cd-time{color:var(--accent-ink)}
  .cd-note{font-size:var(--fs-body);margin-top:8px}
  .cd-off .cd-note{color:var(--deep-muted)}
  .cd-on .cd-note{color:var(--accent-ink)}
  
  
  /* Beide Seiten zeigen dieselben vier Stationen wie der Ablauf weiter unten.
     Links bleibt es nach der ersten stehen, rechts läuft die Kette durch.
     Gleiches Element, anderer Zustand: so ist der Vergleich lesbar. */
  .cd-chips{display:flex;flex-wrap:wrap;gap:7px;margin:26px 0 22px}
  .cd-off .cd-chips span{background:rgba(255,255,255,.10);color:var(--deep-chip);border:1px solid transparent}
  .cd-off .cd-chips span.aus{background:transparent;border:1px dashed rgba(255,123,112,.55);color:var(--muted-deep)}
  .cd-chips span{font-size:var(--fs-caption);font-weight:700;padding:6px 12px;border-radius:999px;background:rgba(1,2,17,.18);color:var(--accent-ink)}
  .cd-result{font-size:var(--fs-result);font-weight:800;letter-spacing:-.02em;line-height:1.1}
  .cd-off .cd-result{color:var(--deep-alarm)}
  .cd-on .cd-result{color:var(--accent-ink)}
  .cd-sub{font-size:var(--fs-body-sm);line-height:1.55;margin-top:10px;max-width:44ch}
  .cd-off .cd-sub{color:var(--muted-deep)}
  .cd-on .cd-sub{color:var(--accent-ink)}
  @media(max-width:820px){
    .clock-duo{grid-template-columns:1fr}
    .cd-side{padding:40px 24px 44px}
    .cd-inner{max-width:none;margin:0!important;padding:0!important}
  }
  @media(max-width:720px){.stats .wrap{grid-template-columns:1fr 1fr;gap:26px}}

  /* Section shell */
  section.block{padding:76px 0}
  /* Abschnittsrhythmus: jeder zweite Block bekommt eine eigene Fläche, sonst
     liest sich die Seite als ein einziger dunkler Streifen. Gleiche Themenfamilie,
     kein Moduswechsel. */
  .block.band{background:var(--card-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .head{margin-bottom:44px;max-width:640px}
  .head.center{margin-left:auto;margin-right:auto;text-align:center}
  h2{font-size:var(--fs-headline);line-height:1.15;letter-spacing:-.02em;color:var(--ink-strong);font-weight:700}
  .head p{color:var(--muted);font-size:var(--fs-lead);margin-top:13px}

  /* Ohne / Mit */
  /* Der frühere Vergleich mit Karten und Icon-Ablauf wurde am 13.08. durch
     die Uhren-Gegenüberstellung ersetzt. CSS dazu entfernt. */

  /* Feature cards */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 26px;transition:transform .2s,border-color .2s,background .2s}
  .card:hover{transform:translateY(-4px);border-color:rgba(10,124,160,.34);background:var(--card-hover)}
  /* 14.08.2026: Die 46px-Kachel über der Überschrift ist die verbreitetste
     Schablone generierter Feature-Karten. Der Behälter entfällt ersatzlos,
     das Icon steht jetzt frei im Fluss neben der Überschrift. */
  .card-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
  .card .ic{flex:none;width:26px;height:26px;color:var(--accent);line-height:0}
  .card .ic .ico{width:26px;height:26px}
  .card h3{font-size:var(--fs-title);color:var(--ink-strong);font-weight:650}
  .card p{color:var(--muted);font-size:var(--fs-body-sm)}
  @media(max-width:900px){.cards{grid-template-columns:1fr 1fr}}
  @media(max-width:600px){.cards{grid-template-columns:1fr}}

  /* Branchen (5 Karten) */
  .branchen{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
  .br{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 20px;transition:transform .2s,border-color .2s,background .2s}
  .br:hover{transform:translateY(-3px);border-color:rgba(10,124,160,.30);background:var(--card-hover)}
  .br .ic{color:var(--accent);margin-bottom:13px;line-height:0}
  /* Icons kommen aus dem gemeinsamen Sprite, nicht aus Emoji. */
  .ico{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
  .br h3{font-size:var(--fs-title);color:var(--ink-strong);font-weight:650;margin-bottom:12px}
  .br ul{list-style:none;display:grid;gap:8px}
  .br li{font-size:var(--fs-caption);color:var(--muted);display:flex;gap:8px}
  .br li::before{content:"✓";color:var(--accent-text);font-weight:700}
  @media(max-width:1000px){.branchen{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:680px){.branchen{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:460px){.branchen{grid-template-columns:1fr}}

  /* Steps */
  /* Ablauf als verbundene Schrittfolge, bewusst OHNE Karten.
     Kartengitter kommen auf dieser Seite bereits bei Funktionen, Branchen und
     Preisen vor. Vier Kartenreihen hintereinander lesen sich schablonenhaft. */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .step{position:relative}

  /* Kopf einer Station: Kreis mit Symbol, daneben die Linie zur nächsten
     Station mit Pfeilspitze. Die Linie liegt im Fluss, nicht absolut, damit
     sie auf jede Spaltenbreite passt. */
  .step-head{display:flex;align-items:center;gap:8px;margin-bottom:18px}
  .step-node{position:relative;flex:none;width:54px;height:54px;border-radius:50%;background:var(--accent-soft);border:1px solid rgba(10,124,160,.32);display:flex;align-items:center;justify-content:center;color:var(--accent)}
  .step-node .ico{width:24px;height:24px}
  .step-num{position:absolute;top:-3px;right:-3px;width:21px;height:21px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:var(--fs-micro);font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 0 3px var(--card-2)}
  .step-line{flex:1;display:flex;align-items:center;color:var(--accent);min-width:22px}
  .step-line::before{content:"";flex:1;height:2px;background:var(--accent);opacity:.28;border-radius:2px}
  .step-line .ico{flex:none;width:15px;height:15px;margin-left:-3px;stroke-width:2.4}
  .step-last .step-line{display:none}
  /* Die letzte Station ist das Ergebnis, kein weiterer Arbeitsschritt.
     Deshalb gefüllt statt umrissen. */
  .step-last .step-node{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
  .step-last .step-num{background:var(--card);color:var(--accent-text);box-shadow:0 0 0 2px var(--accent)}

  /* Die letzte Station steht ohne Linie, deshalb den Platz ausgleichen,
     damit alle vier Überschriften auf einer Höhe beginnen. */
  .step-last .step-head{min-height:54px}

  .step h3{font-size:var(--fs-title);color:var(--ink-strong);margin-bottom:7px;font-weight:650}
  .step p{color:var(--muted);font-size:var(--fs-label)}

  @media(max-width:820px){
    /* senkrechte Kette: Linie läuft unter dem Kreis nach unten */
    .steps{grid-template-columns:1fr;gap:0}
    .step{padding:0 0 26px 74px;min-height:76px}
    .step-head{position:absolute;left:0;top:0;margin:0;display:block}
    .step-line{position:absolute;left:26px;top:54px;bottom:-26px;width:2px;height:auto;flex:none;min-width:0;display:block}
    .step-line::before{position:absolute;inset:0;width:2px;height:auto}
    .step-line .ico{display:none}
    .step-last{padding-bottom:0}
    .step-last .step-head{min-height:0}
  }

  /* Referenzen (Logos) & Kundenstimmen — vorbereitet, später einblenden */
  .logos{display:flex;flex-wrap:wrap;gap:34px;justify-content:center;align-items:center;opacity:.8}
  .logos img{height:34px;filter:grayscale(1) brightness(1.7)}
  .testi{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .testi .t-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 24px}
  .testi .quote{color:var(--ink);font-size:var(--fs-body-sm);line-height:1.6}
  .testi .who{color:var(--muted);font-size:var(--fs-caption);margin-top:14px}
  @media(max-width:800px){.testi{grid-template-columns:1fr}}

  /* Preise */
  .price-card{background:var(--card);border:1px solid var(--rail);border-radius:16px;padding:36px 34px;max-width:560px;width:100%;box-shadow:0 12px 34px rgba(15,22,38,.10)}
  .price-card .amount{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
  .price-card .amount .big{font-size:var(--fs-numeral);font-weight:800;letter-spacing:-.02em}
  .price-card .amount .per{color:var(--muted);font-size:var(--fs-body)}
  .price-card .setup{color:var(--muted);font-size:var(--fs-body-sm)}
  .price-card .setup b{color:var(--ink)}
  .price-list{list-style:none;display:grid;gap:10px;margin:20px 0 0}
  .price-list li{display:flex;gap:10px;color:var(--ink);font-size:var(--fs-body-sm);line-height:1.45}
  .price-list li .ck{flex:none}
  .price-list li > span:last-child{flex:1;min-width:0}
  .price-list li .ck{color:var(--accent-text);font-weight:700;flex-shrink:0}
  .addons{border-top:1px solid var(--line);margin-top:20px;padding-top:16px;display:grid;gap:9px}
  .addons .row{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:var(--fs-label)}
  .addons .row b{color:var(--ink);white-space:nowrap}
  .price-note{text-align:center;color:var(--muted);font-size:var(--fs-caption);margin-top:22px}

  /* Drei-Pakete-Darstellung (ab 11.08.2026) */
  .pricing-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;justify-content:initial}
  .pricing-3 .price-card{max-width:none;padding:30px 26px;display:flex;flex-direction:column;position:relative}
  .pricing-3 .price-card .amount .big{font-size:var(--fs-numeral-sm)}
  .pricing-3 .price-list{flex:1}
  .price-card .tier{font-size:var(--fs-caption);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
  .price-card-featured{border:2px solid var(--accent);box-shadow:0 18px 44px rgba(15,22,38,.12)}
  .price-card-featured .tier{color:var(--accent-text)}
  .price-card .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--accent-ink);font-size:var(--fs-caption);font-weight:700;padding:5px 16px;border-radius:999px;white-space:nowrap}
  /* order:-1 entfernt am 14.08.2026. Es sortierte auf dem Handy zu
     149/99/299 um, waehrend die Ueberschrift "ab 99 Euro" verspricht.
     Die Empfehlung markieren jetzt Rahmen und Abzeichen allein. */
  @media(max-width:900px){ .pricing-3{grid-template-columns:1fr;gap:26px} }

  /* Trust */
  .trust-box{position:relative;overflow:hidden;background:var(--card);border:1px solid rgba(10,124,160,.32);border-radius:16px;padding:46px 44px;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
  /* 14.08.2026: 3px-Kantenstreifen entfernt. Der Block traegt seine Bedeutung
     ueber Ueberschrift und Inhalt, nicht ueber eine farbige Kante. */
  .trust-box ul{list-style:none;display:grid;gap:13px}
  .trust-box li{display:flex;gap:12px;align-items:flex-start;color:var(--ink);font-size:var(--fs-body-sm);line-height:1.5}
  .trust-box li .ck{flex:none}
  .trust-box li > span:last-child{flex:1;min-width:0}
  .trust-box li .ck{color:var(--accent-text);font-weight:700;flex-shrink:0}
  @media(max-width:820px){.trust-box{grid-template-columns:1fr;padding:32px 26px}}

  /* Final CTA */
  .final{text-align:center;position:relative;padding:90px 0}
  .final{background:var(--accent);color:var(--accent-ink)}
  .final::before{content:"";position:absolute;inset:0;background:var(--accent);pointer-events:none}
  /* Die frühere Zierlinie über dem Schlussband ist entfernt. Das Band setzt
     sich durch seine Farbe deutlich genug ab, die Linie war ein Strich zu viel. */
  .final .wrap{position:relative}
  .final p{font-size:var(--fs-lead);color:var(--accent-ink);max-width:50ch;margin:14px auto 32px}
  .final h2{color:var(--accent-ink)}
  .final .kicker{color:var(--accent-ink)}
  /* Auf dem Akzentband kehrt sich der Knopf um: sonst stünde Akzent auf
     Akzent und der Knopf wäre unsichtbar (Kontrast 1,0). */
  .final .btn-primary{background:#fff;color:var(--accent-text);box-shadow:0 8px 22px rgba(1,2,17,.34)}
  .final .btn-primary:hover{background:#F0F6F9}

  /* Footer */
  footer{border-top:1px solid var(--line);padding:42px 0 40px;color:var(--muted);font-size:var(--fs-label)}
  .foot{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:22px}
  /* 14.08.2026: Beruehrungsziele in der Fusszeile lagen bei 22px Hoehe.
     Empfohlen sind 44px. Ueber Innenabstand geloest, damit die Zeile
     optisch gleich bleibt. */
  .foot a{color:var(--muted);display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
  .foot a:hover{color:var(--ink)}
  .foot .endorse{font-size:var(--fs-caption);margin-top:6px} .foot .endorse b{color:var(--wvx-orange-text)}
  .foot .endorse a{display:inline;min-height:0;padding:0;text-decoration:none} .foot .endorse a:hover b{text-decoration:underline}
  .foot-links{display:flex;gap:22px;flex-wrap:wrap}

  /* ---------------------------------------------------------------
     TASTATURFOKUS, ergaenzt am 14.08.2026.
     Vorher enthielt das Stylesheet keine einzige :focus-Regel. Der
     Standardring des Browsers blieb zwar erhalten (outline:none stand
     nirgends), gehoerte aber keinem Designsystem an.
     --------------------------------------------------------------- */
  :where(a,button,input,select,textarea,[tabindex]):focus-visible{
    outline:2px solid var(--accent-text);
    outline-offset:3px;
    border-radius:8px;
  }
  /* Auf den dunklen Momenten den hellen Ring nutzen */
  .final :where(a,button):focus-visible,
  .cd-dark :where(a,button):focus-visible{outline-color:#FFFFFF}

  /* Browser-Oberflaechen aus der Palette bedienen statt Standard */
  ::selection{background:var(--accent-soft);color:var(--ink-strong)}

  /* AUSKOMMENTIERTE BLOECKE: .logos und .testi gehoeren zu den Referenz-
     und Kundenstimmen-Bloecken, die im HTML als Kommentar warten. Bewusst
     stehen gelassen, damit ein spaeteres Aktivieren nicht auf nacktes
     Markup trifft. Siehe den Offenheitsblock als aktuelle Antwort. */

  /* ---------------------------------------------------------------
     ABSCHLUSS, KOPF-AUFRUF, OFFENHEIT. Ergaenzt am 14.08.2026.
     --------------------------------------------------------------- */
  /* Skip-Link: das Ziel <main id="inhalt"> gab es seit heute frueh,
     den Weg dorthin nicht. */
  .skip-link{position:absolute;left:-9999px;top:0;z-index:100;
    background:var(--accent);color:var(--accent-ink);
    padding:12px 18px;border-radius:0 0 8px 0;font-weight:600}
  .skip-link:focus-visible{left:0}

  /* Zweiter und dritter Weg im Schlussband */
  /* Flexzeile statt Fliesstext: Mit 44px hohen Links brach die Zeile sonst
     so um, dass der Trennpunkt allein am Zeilenende stehen blieb. */
  .final-alt{margin-top:16px;font-size:var(--fs-body-sm);color:var(--accent-ink);
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 4px}
  /* Beruehrungsflaeche: die Links kamen auf 21px Hoehe. */
  .final-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px;
    display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  .final-alt .sep{opacity:.5;padding:0 4px}
  /* Bei Umbruch verschwindet der Trenner, statt allein stehen zu bleiben. */
  @media(max-width:620px){.final-alt{flex-direction:column;gap:0}.final-alt .sep{display:none}}

  /* Einrichtungsgebuehr in der Karte statt dahinter */
  .price-card .setup-fee{color:var(--muted);font-size:var(--fs-caption);margin-top:4px}
  .price-card .setup-fee b{color:var(--ink)}
  .pricing-reassure{text-align:center;color:var(--muted);font-size:var(--fs-caption);margin-top:20px;line-height:1.6}

  /* Offenheitsblock */
  .honest{max-width:62ch;margin:0 auto;text-align:center}
  .honest p{color:var(--muted);margin-top:14px}
  .honest-sig{font-size:var(--fs-caption);color:var(--muted);margin-top:20px}

  /* Sicherheitsabstand fuer die Teaser-Blase des echten Widgets.
     Sie liegt fix unten rechts und verdeckte die Mistral-Zeile im
     Vertrauensblock sowie Leistungszeilen der Preiskarten. */
  @media(min-width:900px){
    .trust-box{padding-bottom:96px}
    /* ENTFERNT 27.08.2026: .pricing-3 .price-card:last-child{padding-bottom:88px}
       Seit die Preiskarten einen Aufruf am Kartenfuss tragen, hob dieser
       Abstand den dritten Knopf um 58 px gegenueber den anderen beiden an
       (gemessen 31 / 32 / 89 px bei 1280 px). Die Teaser-Blase des Widgets
       liegt fix am Rand des Sichtfensters und kann ohnehin jede Karte
       ueberdecken, je nachdem wie weit gescrollt ist — der Abstand an genau
       einer Karte war dagegen kein Schutz. Fuer den Vertrauensblock bleibt
       er, dort steht die Mistral-Zeile immer an derselben Stelle. */
  }

  /* Etikett im Hero: Bei 360px bricht der Text auf drei Zeilen um und wird
     zu einer 68px hohen Pille. Eine Pille, die umbricht, ist keine Pille.
     Ab 520px abwaerts deshalb als schlichtes Etikett ohne Rundung. */
  @media(max-width:520px){
    .eyebrow{border-radius:8px;padding:8px 12px;font-size:var(--fs-label);
      align-self:start;text-align:left}
  }

  /* =====================================================================
     Aus index.html hierher verschoben am 27.08.2026. <style> ist
     Metadaten-Inhalt und gehoert in den <head>; im <body> ist es ein
     Validierungsfehler. Die Reihenfolge in der Kaskade bleibt gleich:
     index.html bindet nur diese Datei ein, und die Bloecke standen
     vorher als letzte im Dokument.
     ===================================================================== */

  /* --- Preise, Vergleichstabelle, Overlay --------------------------- */
  /* ---- Overlay ---------------------------------------------------
     Natives <dialog>: Fokusfalle, ESC und Inertisierung des
     Hintergrunds kommen vom Browser. Kein eigener Fokus-Code, der
     erfahrungsgemaess genau dort Fehler macht, wo niemand testet. */
  .cmp-dialog{
    /* 16px wie .price-card — der Dialog ist eine Flaeche derselben
       Familie, nicht ein Bedienelement. 8px waere der Knopf-Radius. */
    border:0; border-radius:16px; padding:26px 28px;
    max-width:900px; width:calc(100vw - 32px);
    max-height:calc(100vh - 64px);
    /* Ein natives <dialog> zentriert sich ueber margin:auto aus dem
       Browser-Stylesheet. Der globale Reset der Seite setzt Margins
       zurueck und nimmt ihm das — deshalb hier ausdruecklich. */
    margin:auto;
    background:var(--card); color:var(--ink);
    font-family:inherit;
    box-shadow:0 24px 64px rgba(15,22,38,.24);
  }
  .cmp-dialog::backdrop{background:rgba(11,18,32,.55)}
  .cmp-dialog-head{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:6px}
  .cmp-dialog-title{font-size:var(--fs-title); font-weight:650; color:var(--ink-strong); margin:0; line-height:1.3}
  .cmp-close{
    /* 44px: DESIGN.md verlangt null Beruehrungsziele darunter. */
    flex:none; width:44px; height:44px; border-radius:8px;
    border:1px solid var(--control-line); background:transparent;
    color:var(--ink); font-size:var(--fs-body-sm); line-height:1; cursor:pointer;
  }
  .cmp-close:hover{background:var(--card-hover); border-color:var(--accent); color:var(--accent-text)}

  /* Der Knopf sitzt am Kartenfuss: .price-card ist flex/column, die Liste
     nimmt mit flex:1 den Rest, der Knopf wird von margin-top:auto nach
     unten geschoben.
     KORREKTUR 27.08.2026: Hier stand, die drei Knoepfe stuenden damit
     buendig. Gemessen bei 1280 px waren es 31 / 32 / 89 px Abstand zum
     Kartenfuss — die dritte Karte trug in styles.css ein
     padding-bottom:88px. Das ist dort behoben, nicht hier. */
  .price-card .price-list{flex:1 1 auto; margin-bottom:22px}
  .price-cta{margin-top:auto; width:100%; justify-content:center}

  /* Start und Voll waren als reine Geisterknoepfe zu leise. Jetzt mit
     Akzentflaeche und Akzentrahmen — deutlich sichtbar, aber weiterhin
     schwaecher als der ausgefuellte Knopf der empfohlenen Karte. */
  /* Rahmen als inset-Schatten statt als border: .btn setzt border:0, ein
     echter Rahmen machte die beiden Geisterknoepfe 2 px hoeher als den
     ausgefuellten (gemessen 50 statt 48). */
  .price-cta.btn-ghost{
    background:var(--accent-soft);
    border:0;
    box-shadow:inset 0 0 0 1px var(--accent);
    color:var(--accent-text);
    font-weight:650;
  }
  .price-cta.btn-ghost:hover{
    background:var(--accent); color:var(--accent-ink);
    box-shadow:inset 0 0 0 1px var(--accent);
  }

  #cmpOpen{
    background:var(--accent-soft);
    border:1px solid var(--accent);
    color:var(--accent-text);
    font-weight:650;
    padding:14px 28px;
  }
  #cmpOpen:hover{background:var(--accent); color:var(--accent-ink)}

  .cmp-wrap{margin:18px auto 0; max-width:var(--maxw); overflow-x:auto}
  .cmp{width:100%; border-collapse:collapse; font-size:var(--fs-body-sm); min-width:640px}
  .cmp th, .cmp td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
  .cmp thead th{color:var(--ink-strong); font-weight:650; white-space:nowrap; border-bottom:2px solid var(--line)}
  .cmp thead th:first-child{color:var(--muted); font-weight:600}
  .cmp tbody th{font-weight:600; color:var(--ink); width:38%}
  .cmp tbody td{color:var(--ink); text-align:center; width:20.6%}
  .cmp-price{display:block; font-weight:600; color:var(--muted); font-size:var(--fs-body-sm); margin-top:3px}
  .cmp-hint{display:block; font-weight:400; color:var(--muted); line-height:1.45; margin-top:3px}
  .cmp-yes{color:var(--accent-text); font-weight:700}
  .cmp-no{color:var(--muted)}
  .cmp .is-featured{background:var(--accent-soft)}
  .cmp-row-setup th, .cmp-row-setup td{border-bottom:none}
  .cmp tbody tr:last-child th, .cmp tbody tr:last-child td{padding-bottom:0}
  /* Nur fuer Screenreader. Ersetzt aria-label an nackten <span>,
     das nicht zuverlaessig vorgelesen wird. */
  .cmp-vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
          overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

  /* Gemessen am 27.08.: bei 360 px ist der Container 313 px breit, die
     Tabelle 640 px. Keine Paketspalte war vollstaendig sichtbar, dazu zwei
     Scrollachsen. Darum unterhalb von 720 px gestapelte Bloecke statt
     Tabellenraster. Der Haltepunkt 720 existiert bereits in styles.css;
     DESIGN.md untersagt einen neuen. */
  @media(max-width:720px){
    .cmp-dialog{padding:20px 16px}
    .cmp-wrap{overflow-x:visible; margin-left:0; margin-right:0; padding:0}
    .cmp{min-width:0; display:block; font-size:var(--fs-body-sm)}
    .cmp thead{position:absolute; width:1px; height:1px; overflow:hidden;
               clip:rect(0 0 0 0); white-space:nowrap}
    .cmp tbody{display:block}
    .cmp tbody tr{display:block; border:1px solid var(--line);
                  border-radius:12px; padding:14px 16px; margin-bottom:12px}
    .cmp tbody th{display:block; width:auto; padding:0 0 10px;
                  border-bottom:1px solid var(--line); color:var(--ink-strong)}
    .cmp tbody td{display:flex; justify-content:space-between; align-items:baseline;
                  gap:16px; width:auto; text-align:right; padding:9px 0;
                  border-bottom:1px solid var(--line)}
    .cmp tbody td::before{content:attr(data-label); font-weight:600;
                          color:var(--muted); text-align:left; flex:none}
    .cmp tbody td:last-child{border-bottom:none; padding-bottom:0}
    .cmp tbody tr:last-child th{padding-bottom:10px}
    .cmp tbody tr:last-child td{padding-bottom:9px}
    .cmp tbody tr:last-child td:last-child{padding-bottom:0}
    /* Flaeche traegt gestapelt nicht mehr, die Hervorhebung wandert in die Beschriftung */
    .cmp .is-featured{background:transparent}
    .cmp tbody td.is-featured::before{color:var(--accent-text)}
    .cmp-row-setup th, .cmp-row-setup td{border-bottom:1px solid var(--line)}
    .cmp-row-setup td:last-child{border-bottom:none}
  }

  /* --- Einwilligung (Gate) ------------------------------------------ */
  .cgate{
    position:fixed; left:0; right:0; bottom:0; z-index:120;
    /* Bewusst nur Schatten, keine zusaetzliche Hairline: Die Leiste liegt
       ueber scrollendem Inhalt, die Erhebung traegt die Abgrenzung allein.
       Kante UND breiter Schatten zugleich wirken doppelt gemoppelt. */
    background:var(--card);
    box-shadow:0 -8px 32px rgba(15,22,38,.12);
    padding:22px 24px;
    /* Gemessen am 27.08.: aufgeklappt 803px in einem 740px-Fenster, Oberkante
       bei -63px, die Ueberschrift ausserhalb des Bildes. Weil der Kasten
       position:fixed ist, war der abgeschnittene Teil nicht erreichbar — eine
       Einwilligung, deren Text man nicht lesen kann, ist keine. Deshalb
       Hoehe deckeln und den Kasten selbst scrollen lassen. */
    max-height:85dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  /* Aeltere Browser ohne dvh: svh/vh als Rueckfall, in dieser Reihenfolge. */
  @supports not (max-height:1dvh){ .cgate{max-height:85vh} }

  /* Die feste Leiste verdeckte am Seitenende die Fusszeile. Gemessen waren
     alle vier Rechtslinks per Klick unerreichbar — ausgerechnet Impressum
     und Datenschutz, und ausgerechnet solange die Frage offen ist. Der
     Freiraum wird nur gesetzt, solange das Gate steht. */
  body.cgate-offen{padding-bottom:var(--cgate-hoehe, 260px)}
  .cgate[hidden]{display:none}
  .cgate-inner{max-width:var(--maxw); margin:0 auto}
  .cgate-title{font-size:var(--fs-title); font-weight:650; color:var(--ink-strong); margin:0 0 6px; line-height:1.3}
  .cgate-desc{font-size:var(--fs-body-sm); color:var(--muted); line-height:1.55; margin:0; max-width:76ch}
  .cgate-link{color:var(--accent-text); font-weight:600; text-decoration:underline; text-underline-offset:3px}
  .cgate-link:hover{color:var(--accent)}

  .cgate-options{margin:18px 0 4px; border-top:1px solid var(--line)}
  .cgate-options[hidden]{display:none}
  .cgate-row{display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:14px 0; border-bottom:1px solid var(--line)}
  .cgate-row-text{display:flex; flex-direction:column; gap:3px; min-width:0}
  .cgate-row-title{font-size:var(--fs-body-sm); font-weight:650; color:var(--ink)}
  .cgate-row-desc{font-size:var(--fs-body-sm); color:var(--muted); line-height:1.5}
  /* DESIGN.md: null Beruehrungsziele unter 44 px. Gemessen am 27.08. lagen
     die Knopfhoehen bei 43 px und das Kaestchen bei 18 px. Das Kaestchen
     selbst bleibt 18 px gross — die Beschriftung umschliesst es und traegt
     die Trefferflaeche. */
  .cgate-toggle{display:inline-flex; align-items:center; gap:9px; flex:none;
                min-height:44px; cursor:pointer}
  .cgate-toggle input{width:18px; height:18px; accent-color:var(--accent); cursor:pointer}
  .cgate-toggle.is-locked, .cgate-toggle.is-locked input{cursor:default}
  .cgate-state{font-size:var(--fs-body-sm); color:var(--muted); white-space:nowrap}

  .cgate-actions{display:flex; gap:13px; flex-wrap:wrap; margin-top:18px}
  .cgate-actions .btn{min-height:44px}
  .cgate-actions .btn[hidden]{display:none}

  @media(max-width:620px){
    .cgate{padding:18px 16px}
    .cgate-row{flex-direction:column; gap:8px}
    .cgate-actions .btn{flex:1 1 auto; justify-content:center}
  }

  /* --- Anfrage-Formular ---------------------------------------------
     Uebernimmt Rahmen, Radius und Schatten von .cmp-dialog; nur die
     Breite ist schmaler, weil ein Formular keine Tabelle ist. */
  .lead-dialog{max-width:620px}
  .lead-form{margin-top:14px}
  .lead-intro{font-size:var(--fs-body-sm); color:var(--muted); line-height:1.55; margin:0 0 18px}
  .lead-feld{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
  .lead-feld label{font-size:var(--fs-body-sm); font-weight:600; color:var(--ink)}
  .lead-pflicht{color:var(--accent-text)}
  .lead-optional{font-weight:400; color:var(--muted)}
  .lead-feld input, .lead-feld select, .lead-feld textarea{
    font:inherit; font-size:var(--fs-body-sm); color:var(--ink);
    background:var(--card); border:1px solid var(--control-line);
    border-radius:8px; padding:11px 13px; min-height:44px; width:100%}
  .lead-feld textarea{min-height:88px; resize:vertical}
  .lead-feld input:focus-visible, .lead-feld select:focus-visible, .lead-feld textarea:focus-visible{
    outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
  .lead-feld input[aria-invalid="true"]{border-color:var(--caution)}
  .lead-zwei{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  /* Koeder: nicht display:none, sonst fuellen manche Roboter ihn gerade deshalb */
  .lead-koeder{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
  /* Einwilligungskaestchen wie auf workvisionx.de. HubSpot erwartet den
     Wortlaut in legalConsentOptions, deshalb steht er auch im Skript. */
  .lead-consent{display:flex; align-items:flex-start; gap:10px; margin:4px 0 18px;
                font-size:var(--fs-caption); color:var(--muted); line-height:1.5;
                cursor:pointer; min-height:44px}
  .lead-consent input{flex:none; width:18px; height:18px; margin-top:2px;
                      accent-color:var(--accent); cursor:pointer}
  .lead-consent a{color:var(--accent-text); text-decoration:underline; text-underline-offset:3px}
  .lead-aktionen{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
  .lead-aktionen .btn{min-height:44px}
  .lead-mail[hidden]{display:none}
  .lead-status{font-size:var(--fs-body-sm); line-height:1.55; margin:14px 0 0; min-height:1px}
  .lead-status.ist-fehler{color:var(--caution)}
  .lead-status.ist-gut{color:var(--accent-text); font-weight:600}
  .lead-fertig{text-align:center; padding:12px 0 4px}
  .lead-fertig h4{font-size:var(--fs-title); color:var(--ink-strong); margin:0 0 8px}
  .lead-fertig p{font-size:var(--fs-body-sm); color:var(--muted); line-height:1.6; margin:0}

  @media(max-width:620px){
    .lead-zwei{grid-template-columns:1fr}
  }

  /* PILOT-STOERER im Hero (08.10.2026). Optik wie der Stoerer im Video:
     Signature-Verlauf als Ring, weisse Mitte, leicht schraeg. Desktop als
     runder Sticker auf der oberen Ecke des Chat-Nachbaus, mobil als Leiste
     ueber der Eyebrow, damit er nichts verdeckt. Ziel: #pilot. */
  .pilot-badge{position:absolute;top:-84px;right:-16px;z-index:3;width:138px;height:138px;border-radius:50%;padding:6px;background:var(--grad);box-shadow:0 12px 28px rgba(15,22,38,.18);transform:rotate(-10deg);text-decoration:none;transition:transform .2s}
  .pilot-badge:hover,.pilot-badge:focus-visible{transform:rotate(-10deg) scale(1.05)}
  .pilot-badge:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
  .pb-in{width:100%;height:100%;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:10px}
  .pb-1{font-size:16px;font-weight:800;line-height:1.1;color:var(--ink-strong)}
  .pb-2{font-size:13px;font-weight:700;line-height:1.15;color:var(--accent-2)}
  @media(max-width:840px){
    .pilot-badge{position:static;display:flex;width:fit-content;height:auto;border-radius:999px;padding:2px;transform:none;margin-bottom:14px;box-shadow:0 6px 16px rgba(15,22,38,.14)}
    .pilot-badge:hover,.pilot-badge:focus-visible{transform:none}
    .pb-in{width:auto;flex-direction:row;flex-wrap:wrap;justify-content:center;border-radius:999px;padding:8px 16px;gap:2px 10px}
    .pb-1,.pb-2{font-size:var(--fs-label);white-space:nowrap}
  }
  @media(min-width:841px){.hero{padding-top:100px}}
  @media(prefers-reduced-motion:reduce){.pilot-badge{transition:none}}

  /* PILOTPROGRAMM-Abschnitt (08.10.2026), zwischen Preisen und Schlussaufruf */
  .pilot-box{position:relative;overflow:hidden;background:var(--card);border:1px solid rgba(10,124,160,.32);border-radius:16px;padding:46px 44px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
  .pilot-lead{color:var(--muted);margin-top:13px;font-size:var(--fs-body)}
  .pilot-box ul{list-style:none;display:grid;gap:13px}
  .pilot-box li{display:flex;gap:12px;align-items:flex-start;color:var(--ink);font-size:var(--fs-body-sm);line-height:1.5}
  .pilot-box li .ck{flex:none;color:var(--accent-text);font-weight:700}
  .pilot-cta{margin-top:26px}
  .pilot-cta p{margin-top:12px;font-size:var(--fs-body-sm);color:var(--muted);line-height:1.55}
  .pilot-cta p a{color:var(--accent-text);font-weight:600}
  @media(max-width:820px){.pilot-box{grid-template-columns:1fr;padding:32px 26px}}
  .honest p a{color:var(--accent-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}

  /* ABLAUF-ANIMATION neben "Was ist NesilaX?" (14.10.2026, erzeugt mit build_flow.py)
     CI wie Abschnitt "Vier Schritte": .step-node-Optik, Nummernabzeichen, Linie mit Pfeil,
     Akzentfarbe statt Verlauf (Verlauf ist laut DESIGN.md Zahlen vorbehalten).
     Groessen in cqw, damit die Karte in jeder Breite gleich aussieht. */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .wi-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
  .wi-grid .head{margin-bottom:0}
  @media(max-width:900px){.wi-grid{grid-template-columns:1fr;gap:32px}}
  .flow{margin:0;container-type:inline-size}
  .fl{position:relative;aspect-ratio:16/11;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;font-family:var(--font);color:var(--ink)}
  .fl *{box-sizing:border-box}
  .fl-case{position:absolute;inset:0;opacity:0}

  /* Kette wie "Vier Schritte" */
  .fl-chain{position:absolute;left:4cqw;right:4cqw;top:4cqw;display:flex;align-items:flex-start}
  .fl-st{flex:none;width:14cqw;display:flex;flex-direction:column;align-items:center;text-align:center}
  .fl-node{position:relative;display:flex;align-items:center;justify-content:center;width:8.6cqw;height:8.6cqw;border-radius:50%;background:var(--accent-soft);border:1px solid rgba(10,124,160,.32);color:var(--accent)}
  .fl-node .ico{width:4cqw;height:4cqw}
  .fl-num{position:absolute;top:-.6cqw;right:-.6cqw;display:flex;align-items:center;justify-content:center;width:3.6cqw;height:3.6cqw;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:2cqw;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--card)}
  .fl-st em{display:block;margin-top:1.2cqw;font-style:normal;font-size:2.5cqw;font-weight:650;color:var(--muted);white-space:nowrap}
  .fl-ln{flex:1;display:flex;align-items:center;height:8.6cqw;color:var(--accent);margin:0 -2cqw}
  .fl-ln::before{content:"";flex:1;height:2px;background:var(--accent);opacity:.28;border-radius:2px}
  .fl-ln .ico{flex:none;width:2.6cqw;height:2.6cqw;margin-left:-.5cqw;stroke-width:2.4}

  /* Telefon mit Statuszeile */
  .fl-phone{position:absolute;left:5%;top:33%;width:29%;height:60%;border-radius:4cqw;background:#0F1626;padding:4cqw 1cqw 1cqw}
  .fl-time{position:absolute;left:0;right:0;top:1cqw;height:2.6cqw;text-align:center;font-size:2cqw;font-weight:700;color:#FFFFFF;font-variant-numeric:tabular-nums}
  .fl-time span{position:absolute;left:0;right:0}
  .fl-sc{position:absolute;left:1cqw;right:1cqw;top:4cqw;bottom:1cqw;border-radius:3cqw;background:#FFFFFF;overflow:hidden;display:flex;flex-direction:column;font-size:2cqw;line-height:1.3;opacity:0}
  .fl-bar{display:flex;align-items:center;gap:1.2cqw;padding:1.6cqw 2cqw 1.2cqw;font-weight:800;font-size:2.1cqw}
  .fl-bar b{flex:none;display:grid;place-items:center;width:3.4cqw;height:3.4cqw;border-radius:1cqw;color:#FFFFFF;font-size:2.2cqw}
  .fl-bar.fb b{background:#1877F2}
  .fl-bar.wa{background:#075E54;color:#FFFFFF}
  .fl-bar.wa b,.fl-bar.web b{border-radius:50%;background:var(--accent)}
  .fl-bar.web{background:var(--accent);color:#FFFFFF}
  .fl-bar.web b{background:#FFFFFF}
  .fl-bar.crm{background:var(--card-2)}
  .fl-bar.crm b.mail{background:var(--accent)}
  .fl-ad{margin:0 1.6cqw;padding:2cqw;height:42%;display:flex;align-items:flex-end;border-radius:2cqw;background:var(--accent);color:#FFFFFF;font-weight:800;font-size:2.5cqw;line-height:1.15}
  .fl-btn{margin:auto 1.6cqw 1.4cqw;padding:max(8px,1.4cqw);border-radius:8px;background:#1877F2;color:#FFFFFF;text-align:center;font-weight:800}
  .fl-lbl{margin:.6cqw 2cqw 0;font-size:1.6cqw;font-weight:700;color:var(--muted)}
  .fl-in{margin:.5cqw 2cqw 0;padding:max(8px,1.2cqw);border:1px solid var(--line);border-radius:8px}
  .fl-ok{display:flex;gap:1cqw;align-items:center;margin:1cqw 2cqw 0;font-size:1.8cqw}
  .fl-ok b{flex:none;display:grid;place-items:center;width:2.8cqw;height:2.8cqw;border-radius:.6cqw;background:#1877F2;color:#FFFFFF;font-size:2cqw}
  .fl-chat{flex:1;padding:1.6cqw;display:flex;flex-direction:column;gap:1.2cqw}
  .fl-chat.wa{background:#ECE5DD}
  .fl-chat.web{background:var(--bg)}
  .fl-msg{max-width:92%;padding:max(8px,1.2cqw) max(10px,1.4cqw);border-radius:8px}
  .fl-chat.wa .fl-msg.in{align-self:flex-start;background:#FFFFFF}
  .fl-chat.wa .fl-msg.out{align-self:flex-end;background:#DCF8C6}
  .fl-chat.web .fl-msg.in{align-self:flex-start;background:#FFFFFF;border:1px solid var(--line)}
  .fl-chat.web .fl-msg.out{align-self:flex-end;background:var(--accent);color:#FFFFFF}
  .fl-book{align-self:flex-start;padding:max(8px,1cqw) max(10px,1.4cqw);border-radius:8px;background:#FFFFFF;border:1px solid var(--accent);color:var(--accent-text);font-weight:800}
  .fl-ok-pill{align-self:center;padding:max(8px,1cqw) max(12px,1.8cqw);border-radius:999px;background:#E3F4EC;color:var(--done);font-weight:800}
  .fl-crm{padding:2cqw;display:flex;flex-direction:column;gap:1.2cqw}
  .fl-crm b{font-size:2.4cqw;color:var(--ink-strong)}
  .fl-crm span{padding-top:1cqw;border-top:1px solid var(--line);color:var(--ink)}
  .fl-crm .fl-cta{border-top:0;align-self:flex-start;padding:max(8px,1cqw) max(12px,1.8cqw);border-radius:999px;background:#E3F4EC;color:var(--done);font-weight:800}

  /* Erklaerung rechts */
  .fl-cap{position:absolute;left:41%;right:5%;top:40%;opacity:0}
  .fl-cap small{display:block;font-size:2.45cqw;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text)}
  .fl-cap strong{display:block;margin-top:1.2cqw;font-size:4.2cqw;line-height:1.12;font-weight:650;color:var(--ink-strong)}
  .fl-cap>span{display:block;margin-top:1.4cqw;font-size:2.8cqw;line-height:1.4;color:var(--muted)}
  .fl-tags{display:flex!important;flex-wrap:wrap;gap:1cqw}
  .fl-tags b{font-size:2.4cqw;font-weight:600;padding:.6cqw 1.6cqw;border-radius:999px;border:1px solid var(--line);color:var(--ink)}
  .fl-demo{position:absolute;left:5%;width:29%;bottom:1.4%;text-align:center;font-size:1.8cqw;color:var(--muted)}

  /* Schmale Breite (Handy) */
  @container (max-width:480px){
    .fl{aspect-ratio:1/0.95}
    .fl-chain{left:2cqw;right:2cqw}
    .fl-st{width:18cqw}
    .fl-node{width:10cqw;height:10cqw}
    .fl-node .ico{width:4.8cqw;height:4.8cqw}
    .fl-num{width:4.4cqw;height:4.4cqw;font-size:2.6cqw}
    .fl-st em{font-size:3cqw}
    .fl-ln{height:10cqw;margin:0 -3.5cqw}
    .fl-phone{top:30%;width:40%;height:65%}
    .fl-sc{font-size:2.8cqw}
    .fl-bar{font-size:2.8cqw}
    .fl-time{font-size:2.8cqw;top:1.2cqw;height:3.6cqw}
    .fl-sc{top:5.6cqw}
    .fl-lbl{font-size:2.4cqw}.fl-ok{font-size:2.5cqw}.fl-crm b{font-size:3.2cqw}
    .fl-cap{left:48%;right:4%;top:36%}
    .fl-cap small{font-size:3cqw}
    .fl-cap strong{font-size:5.6cqw}
    .fl-cap>span{font-size:3.8cqw}
    .fl-tags b{font-size:3.2cqw}
    .fl-demo{width:40%;font-size:2.6cqw}
  }
  @keyframes fl-case0{0.000%,55.533%{opacity:1}55.556%,100%{opacity:0}}
  .fl-case.c0{animation:fl-case0 45s linear infinite}
  @keyframes fl-case1{0%,55.533%{opacity:0}55.556%,99.978%{opacity:1}}
  .fl-case.c1{animation:fl-case1 45s linear infinite}
  @keyframes fl-a0{0%{opacity:0}0.889%,10.222%{opacity:1}11.111%,100%{opacity:0}}
  .fl-sc.a0,.fl-cap.a0{animation:fl-a0 45s linear infinite}
  @keyframes fl-na0{0%{background:#0A7CA0;border-color:#0A7CA0;color:#FFFFFF;opacity:1}0.000%,11.089%{background:#0A7CA0;border-color:#0A7CA0;color:#FFFFFF;opacity:1}11.111%,55.533%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:1}55.556%,100%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:.5}}
  @keyframes fl-ba0{0%{background:#0A7CA0;color:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF}0.000%,11.089%{background:#FFFFFF;color:#09708F;box-shadow:0 0 0 2px #0A7CA0}11.111%,100%{background:#0A7CA0;color:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF}}
  @keyframes fl-la0{0%{color:#556278}0.000%,11.089%{color:#05080F}11.111%,100%{color:#556278}}
  .fl-st.a0 .fl-node{animation:fl-na0 45s linear infinite}.fl-st.a0 .fl-num{animation:fl-ba0 45s linear infinite}.fl-st.a0 em{animation:fl-la0 45s linear infinite}
  @keyframes fl-a1{0%,11.111%{opacity:0}12.000%,21.333%{opacity:1}22.222%,100%{opacity:0}}
  .fl-sc.a1,.fl-cap.a1{animation:fl-a1 45s linear infinite}
  @keyframes fl-na1{0%,11.089%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:.5}11.111%,22.200%{background:#0A7CA0;border-color:#0A7CA0;color:#FFFFFF;opacity:1}22.222%,55.533%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:1}55.556%,100%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:.5}}
  @keyframes fl-ba1{0%,11.089%{background:#0A7CA0;color:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF}11.111%,22.200%{background:#FFFFFF;color:#09708F;box-shadow:0 0 0 2px #0A7CA0}22.222%,100%{background:#0A7CA0;color:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF}}
  @keyframes fl-la1{0%,11.089%{color:#556278}11.111%,22.200%{color:#05080F}22.222%,100%{color:#556278}}
  .fl-st.a1 .fl-node{animation:fl-na1 45s linear infinite}.fl-st.a1 .fl-num{animation:fl-ba1 45s linear infinite}.fl-st.a1 em{animation:fl-la1 45s linear infinite}
  @keyframes fl-a2{0%,22.222%{opacity:0}23.111%,32.444%{opacity:1}33.333%,100%{opacity:0}}
  .fl-sc.a2,.fl-cap.a2{animation:fl-a2 45s linear infinite}
  @keyframes fl-na2{0%,22.200%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:.5}22.222%,33.311%{background:#0A7CA0;border-color:#0A7CA0;color:#FFFFFF;opacity:1}33.333%,55.533%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:1}55.556%,100%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:.5}}
  @keyframes fl-ba2{0%,22.200%{background:#0A7CA0;color:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF}22.222%,33.311%{background:#FFFFFF;color:#09708F;box-shadow:0 0 0 2px #0A7CA0}33.333%,100%{background:#0A7CA0;color:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF}}
  @keyframes fl-la2{0%,22.200%{color:#556278}22.222%,33.311%{color:#05080F}33.333%,100%{color:#556278}}
  .fl-st.a2 .fl-node{animation:fl-na2 45s linear infinite}.fl-st.a2 .fl-num{animation:fl-ba2 45s linear infinite}.fl-st.a2 em{animation:fl-la2 45s linear infinite}
  @keyframes fl-a3{0%,33.333%{opacity:0}34.222%,43.556%{opacity:1}44.444%,100%{opacity:0}}
  .fl-sc.a3,.fl-cap.a3{animation:fl-a3 45s linear infinite}
  @keyframes fl-na3{0%,33.311%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:.5}33.333%,44.422%{background:#0A7CA0;border-color:#0A7CA0;color:#FFFFFF;opacity:1}44.444%,55.533%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:1}55.556%,100%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:.5}}
  @keyframes fl-ba3{0%,33.311%{background:#0A7CA0;color:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF}33.333%,44.422%{background:#FFFFFF;color:#09708F;box-shadow:0 0 0 2px #0A7CA0}44.444%,100%{background:#0A7CA0;color:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF}}
  @keyframes fl-la3{0%,33.311%{color:#556278}33.333%,44.422%{color:#05080F}44.444%,100%{color:#556278}}
  .fl-st.a3 .fl-node{animation:fl-na3 45s linear infinite}.fl-st.a3 .fl-num{animation:fl-ba3 45s linear infinite}.fl-st.a3 em{animation:fl-la3 45s linear infinite}
  @keyframes fl-a4{0%,44.444%{opacity:0}45.333%,54.667%{opacity:1}55.556%,100%{opacity:0}}
  .fl-sc.a4,.fl-cap.a4{animation:fl-a4 45s linear infinite}
  @keyframes fl-na4{0%,44.422%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:.5}44.444%,55.533%{background:#0A7CA0;border-color:#0A7CA0;color:#FFFFFF;opacity:1}55.556%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:1}55.556%,100%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:.5}}
  @keyframes fl-ba4{0%,44.422%{background:#0A7CA0;color:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF}44.444%,55.533%{background:#FFFFFF;color:#09708F;box-shadow:0 0 0 2px #0A7CA0}55.556%,100%{background:#0A7CA0;color:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF}}
  @keyframes fl-la4{0%,44.422%{color:#556278}44.444%,55.533%{color:#05080F}55.556%,100%{color:#556278}}
  .fl-st.a4 .fl-node{animation:fl-na4 45s linear infinite}.fl-st.a4 .fl-num{animation:fl-ba4 45s linear infinite}.fl-st.a4 em{animation:fl-la4 45s linear infinite}
  @keyframes fl-b0{0%,55.556%{opacity:0}56.444%,65.778%{opacity:1}66.667%,100%{opacity:0}}
  .fl-sc.b0,.fl-cap.b0{animation:fl-b0 45s linear infinite}
  @keyframes fl-nb0{0%,55.533%{background:#0A7CA0;border-color:#0A7CA0;color:#FFFFFF;opacity:1}55.556%,66.644%{background:#0A7CA0;border-color:#0A7CA0;color:#FFFFFF;opacity:1}66.667%,99.978%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:1}100%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:.5}}
  @keyframes fl-bb0{0%,55.533%{background:#0A7CA0;color:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF}55.556%,66.644%{background:#FFFFFF;color:#09708F;box-shadow:0 0 0 2px #0A7CA0}66.667%,100%{background:#0A7CA0;color:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF}}
  @keyframes fl-lb0{0%,55.533%{color:#556278}55.556%,66.644%{color:#05080F}66.667%,100%{color:#556278}}
  .fl-st.b0 .fl-node{animation:fl-nb0 45s linear infinite}.fl-st.b0 .fl-num{animation:fl-bb0 45s linear infinite}.fl-st.b0 em{animation:fl-lb0 45s linear infinite}
  @keyframes fl-b1{0%,66.667%{opacity:0}67.556%,76.889%{opacity:1}77.778%,100%{opacity:0}}
  .fl-sc.b1,.fl-cap.b1{animation:fl-b1 45s linear infinite}
  @keyframes fl-nb1{0%,66.644%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:.5}66.667%,77.756%{background:#0A7CA0;border-color:#0A7CA0;color:#FFFFFF;opacity:1}77.778%,99.978%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:1}100%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:.5}}
  @keyframes fl-bb1{0%,66.644%{background:#0A7CA0;color:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF}66.667%,77.756%{background:#FFFFFF;color:#09708F;box-shadow:0 0 0 2px #0A7CA0}77.778%,100%{background:#0A7CA0;color:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF}}
  @keyframes fl-lb1{0%,66.644%{color:#556278}66.667%,77.756%{color:#05080F}77.778%,100%{color:#556278}}
  .fl-st.b1 .fl-node{animation:fl-nb1 45s linear infinite}.fl-st.b1 .fl-num{animation:fl-bb1 45s linear infinite}.fl-st.b1 em{animation:fl-lb1 45s linear infinite}
  @keyframes fl-b2{0%,77.778%{opacity:0}78.667%,88.000%{opacity:1}88.889%,100%{opacity:0}}
  .fl-sc.b2,.fl-cap.b2{animation:fl-b2 45s linear infinite}
  @keyframes fl-nb2{0%,77.756%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:.5}77.778%,88.867%{background:#0A7CA0;border-color:#0A7CA0;color:#FFFFFF;opacity:1}88.889%,99.978%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:1}100%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:.5}}
  @keyframes fl-bb2{0%,77.756%{background:#0A7CA0;color:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF}77.778%,88.867%{background:#FFFFFF;color:#09708F;box-shadow:0 0 0 2px #0A7CA0}88.889%,100%{background:#0A7CA0;color:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF}}
  @keyframes fl-lb2{0%,77.756%{color:#556278}77.778%,88.867%{color:#05080F}88.889%,100%{color:#556278}}
  .fl-st.b2 .fl-node{animation:fl-nb2 45s linear infinite}.fl-st.b2 .fl-num{animation:fl-bb2 45s linear infinite}.fl-st.b2 em{animation:fl-lb2 45s linear infinite}
  @keyframes fl-b3{0%,88.889%{opacity:0}89.778%,99.111%{opacity:1}100.000%,100%{opacity:0}}
  .fl-sc.b3,.fl-cap.b3{animation:fl-b3 45s linear infinite}
  @keyframes fl-nb3{0%,88.867%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:.5}88.889%,99.978%{background:#0A7CA0;border-color:#0A7CA0;color:#FFFFFF;opacity:1}100.000%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:1}100%{background:#DDF0F7;border-color:rgba(10,124,160,.32);color:#0A7CA0;opacity:.5}}
  @keyframes fl-bb3{0%,88.867%{background:#0A7CA0;color:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF}88.889%,99.978%{background:#FFFFFF;color:#09708F;box-shadow:0 0 0 2px #0A7CA0}100.000%,100%{background:#0A7CA0;color:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF}}
  @keyframes fl-lb3{0%,88.867%{color:#556278}88.889%,99.978%{color:#05080F}100.000%,100%{color:#556278}}
  .fl-st.b3 .fl-node{animation:fl-nb3 45s linear infinite}.fl-st.b3 .fl-num{animation:fl-bb3 45s linear infinite}.fl-st.b3 em{animation:fl-lb3 45s linear infinite}
  @keyframes fl-late-a3{0%,26.667%{opacity:0}27.333%,100%{opacity:1}}
  .late-a3{animation:fl-late-a3 45s linear infinite}
  @keyframes fl-late-a4{0%,38.667%{opacity:0}39.333%,100%{opacity:1}}
  .late-a4{animation:fl-late-a4 45s linear infinite}
  @keyframes fl-late-b3{0%,80.444%{opacity:0}81.111%,100%{opacity:1}}
  .late-b3{animation:fl-late-b3 45s linear infinite}
  @keyframes fl-late-b3b{0%,83.556%{opacity:0}84.222%,100%{opacity:1}}
  .late-b3b{animation:fl-late-b3b 45s linear infinite}
  @keyframes fl-t1{0%,33.311%{opacity:1}33.333%,100%{opacity:0}}
  @keyframes fl-t2{0%,33.311%{opacity:0}33.333%,100%{opacity:1}}
  .fl-time .t1{animation:fl-t1 45s linear infinite}.fl-time .t2{animation:fl-t2 45s linear infinite}

  /* Bewegung reduziert: ruhiges Bild von Fall 1, Schritt 3 */
  @media(prefers-reduced-motion:reduce){
    .fl *,.fl{animation:none!important}
    .fl-case.c0,.fl-sc.a2,.fl-cap.a2,.fl-time .t1,.late-a3{opacity:1}
    .fl-time .t2{opacity:0}
    .fl-st.a2 .fl-node{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
    .fl-st.a2 .fl-num{background:var(--card);color:var(--accent-text);box-shadow:0 0 0 2px var(--accent)}
    .fl-st.a3 .fl-node,.fl-st.a4 .fl-node{opacity:.5}
  }