/* service.css – Rundum-Service (Rolle SERVICE, Welle F).
   Gilt für: /service.html (Klassen sv-*), den Showcase auf der Startseite (svx-*) und den Hinweis auf der Preisseite (sv-teaser*).
   Regeln:
   - Grundzustand = fertige, sichtbare Seite. Ohne JavaScript, bei "Bewegung reduzieren" und beim Drucken ist alles sofort da.
   - Einblenden nur, wenn js/service.js läuft (Attribute data-sv-wait / data-svx-arm, Klasse html.svjs) UND nur in
     @media (prefers-reduced-motion: no-preference). Jedes Element blendet höchstens einmal ein.
   - Scroll-gesteuert (animation-timeline) nur hinter @supports; ohne Unterstützung (z. B. Firefox) bleibt es statisch fertig
     bzw. läuft einmal zeitgesteuert (IntersectionObserver).
   - Animiert werden nur opacity und transform (Ausnahme: nichts). Dauer 160–600 ms, Szenen unter 5 s, keine Endlosschleifen.
   - Nur logische Eigenschaften (margin-inline, inset-inline-start …) → Arabisch (dir=rtl) spiegelt sich von selbst;
     Richtungsabhängige Bewegungen nutzen --sv-dir (1 / -1). */

:root{--sv-ease:cubic-bezier(.23,1,.32,1);--sv-dir:1;--svx-gap:8px;--svx-cm:8px}
[dir="rtl"]{--sv-dir:-1}

/* ===================================================================== gemeinsame Bausteine */
.sv-tag{display:inline-flex;align-items:center;flex:none;font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--amber);color:#1F1300;white-space:nowrap;line-height:1.3}
.sv-head{max-width:780px;margin-block-end:34px}
.sv-head h2{margin-block-end:12px}
.sv-head .lead{margin:0}
.sv-ck{flex:none;inline-size:26px;block-size:26px;border-radius:50%;display:grid;place-items:center;background:rgba(34,197,94,.16);color:#4ADE80;box-shadow:inset 0 0 0 1px rgba(34,197,94,.4)}
.sv-ck .ic{inline-size:15px;block-size:15px;stroke-width:2.4}
.sv-pside-note a,.sv-agb a,.sv-other a,.sv-privacy a,.sv-fallback a,.sv-tcard p a,.sv-teaser a:not(.btn){text-decoration:underline;text-underline-offset:3px}

/* ===================================================================== 1 Hero */
.sv-hero .hero-copy{min-inline-size:0}
@media(min-width:961px){.hero.night.sv-hero .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:52px}}
.sv-hero .lead{margin-block-end:22px}
.sv-quote{max-inline-size:540px;padding:18px 20px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(147,197,253,.28),0 24px 50px -30px rgba(0,0,0,.8)}
.sv-quote p{margin:0}
.sv-quote .sv-quote-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;color:#C7D2E5;font-size:1rem;line-height:1.35}
.sv-quote-now b{font-family:var(--display);font-size:clamp(2.3rem,5.2vw,3.1rem);font-weight:750;letter-spacing:-.04em;line-height:1;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-quote .sv-quote-then{margin-block-start:8px;font-size:1.08rem;color:#DCE6F5}
.sv-quote-then b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-quote .sv-quote-meta{margin-block-start:4px;font-size:.86rem;color:#A9B4C8}
.sv-quote .sv-noaktion,.sv-teaser-price .sv-noaktion{margin-block-start:4px;font-size:.84rem;color:#C7D2E5}
.sv-quote .sv-quote-budget{display:flex;gap:10px;align-items:flex-start;margin-block-start:14px;padding:10px 12px;border-radius:12px;background:rgba(245,158,11,.10);box-shadow:inset 0 0 0 1px rgba(245,158,11,.38);color:#FDE7B0;font-size:.9rem;line-height:1.45}
.sv-quote-budget .ic{inline-size:18px;block-size:18px;margin-block-start:2px;color:#FCD34D}
.sv-quote-budget b{color:#FFF3D6}
.sv-hero .actions{margin-block:22px 14px}
.sv-hero .pill .dot{animation:none} /* N18: kein box-shadow-Pulsieren (style.css „pulse“ malt die ganze Fläche neu) – der Punkt steht ruhig */
/* N17: kleine Handys – der Haupt-Knopf steht im ersten Bildschirm: Knöpfe direkt nach dem Einleitungstext, der Preisblock (mit
   Werbebudget-Hinweis und Aktionscode-Ausschluss) unmittelbar darunter. Nur die Anzeige-Reihenfolge: Im Quelltext (Vorlesen) steht
   der Preis weiter vor den Knöpfen, und der Preisblock hat keine Fokus-Ziele (Tab-Reihenfolge unverändert). */
@media(max-width:640px){
  .sv-hero .hero-copy{display:flex;flex-direction:column}
  .sv-hero .hero-copy > .pill{align-self:flex-start}
  .sv-hero .actions{order:1;margin-block:0 18px}
  .sv-hero .sv-quote{order:2}
  .sv-hero .hero-note{order:3}
}

/* Cockpit-Fenster (Beispiel) */
.sv-stage{position:relative;isolation:isolate;margin:0;min-inline-size:0;order:2}
.sv-stage::before{content:"";position:absolute;inset:-14% -10%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(59,130,246,.30),rgba(30,94,255,.08) 58%,transparent 78%)}
.sv-win{padding:14px;border-radius:22px;background:#0E1730;color:#E6EDF7;box-shadow:0 0 0 1px rgba(147,197,253,.28),0 0 0 7px rgba(255,255,255,.035),0 40px 90px -34px rgba(0,0,0,.85),0 0 90px -30px rgba(30,94,255,.55)}
.sv-win-bar{display:flex;align-items:center;gap:10px;padding:2px 4px 12px;font-size:.85rem}
.sv-win-bar b{font-weight:650;color:#fff;margin-inline-end:auto}
.sv-win-dots{display:flex;gap:6px}
.sv-win-dots i{inline-size:9px;block-size:9px;border-radius:50%;background:#2A3650}
.sv-brief{padding:16px;border-radius:16px;background:#111A2E;box-shadow:inset 0 0 0 1px #1E2A44}
.sv-brief-head{display:flex;gap:12px;align-items:center;margin-block-end:12px}
.sv-ava{flex:none;inline-size:44px;block-size:44px;border-radius:50%;background:#16213D;box-shadow:0 0 0 2px rgba(96,165,250,.45)}
.sv-brief-head p{margin:0;line-height:1.3;min-inline-size:0}
.sv-brief-head b{display:block;color:#fff;font-size:.98rem}
.sv-brief-head span{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;color:#8FA2C4}
.sv-lines{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sv-lines li{position:relative;overflow:hidden;overflow:clip;padding:9px 12px;border-radius:10px;background:#16213D;color:#DCE6F5;font-size:.9rem;line-height:1.4}
/* Blick in zwei weitere Bereiche des Cockpits (Leads-Pipeline, Empfehlung) – nur, was das Cockpit wirklich hat; kein Arbeitsstand */
.sv-peek{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sv-peek li{display:flex;gap:10px;align-items:center;min-inline-size:0;padding:12px;border-radius:14px;background:#111A2E;box-shadow:inset 0 0 0 1px #1E2A44}
.sv-peek p{margin:0;line-height:1.25;min-inline-size:0}
.sv-peek b{display:block;font-size:.82rem;color:#fff}
.sv-peek p span{display:block;font-size:.74rem;color:#8FA2C4}
.sv-pk{flex:none;inline-size:30px;block-size:30px;border-radius:9px;display:grid;place-items:center;background:rgba(96,165,250,.14);color:#93C5FD;box-shadow:inset 0 0 0 1px rgba(96,165,250,.38)}
.sv-pk .ic{inline-size:16px;block-size:16px}
.sv-stage figcaption{margin-block-start:14px;text-align:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:#9AA7BF}
@media(max-width:560px){.sv-peek{grid-template-columns:minmax(0,1fr)}.sv-win{padding:10px;border-radius:18px}.sv-brief{padding:12px}}

/* ===================================================================== 2 Paket */
.sv-group{margin-block-start:28px}
.sv-group-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px;font-size:1.12rem}
.sv-badge{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--signal);color:#fff;line-height:1.3}
.sv-badge-b{background:#E6EEFF;color:#1E40AF;box-shadow:inset 0 0 0 1px rgba(30,94,255,.25)}
.sv-badge-o{background:#FFF4DB;color:#8A3A0B;box-shadow:inset 0 0 0 1px rgba(245,158,11,.5)}
.sv-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sv-card{padding:24px;border-radius:20px;background:var(--paper-2);box-shadow:var(--shadow),var(--ring)}
.sv-card .itile{margin-block-end:16px}
.sv-card h4{margin:0 0 6px;font-size:1.06rem;letter-spacing:-.02em;line-height:1.25}
.sv-card p{margin:0;color:var(--muted);font-size:.95rem}
.sv-group-we .sv-card{color:#E6EDF7;background:radial-gradient(380px 200px at 100% 0%,rgba(30,94,255,.34),transparent 70%),linear-gradient(180deg,#132248,#0F1A33);box-shadow:0 24px 50px -28px rgba(15,35,90,.7),inset 0 0 0 1px rgba(96,150,255,.3)}
.sv-group-we .sv-card h4{color:#fff}
.sv-group-we .sv-card p{color:#B6C3DA}
.sv-group-we .itile{color:#8DB5FF;background:linear-gradient(180deg,#17223C,#111A2E);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(96,150,255,.22),0 8px 18px -10px rgba(30,94,255,.6)}
.sv-base{margin-block-start:24px;padding:24px;border-radius:20px;background:var(--paper-2);box-shadow:var(--ring)}
.sv-base h3{margin:0 0 12px;font-size:1.06rem}
.sv-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px}
/* Angaben, keine Knöpfe (Befund 25): kein Rahmen, kein Schatten, keine Pillenform */
.sv-chips li{display:inline-flex;align-items:center;gap:8px;padding:2px 0;font-size:.95rem;font-weight:600;color:var(--text)}
.sv-chips .ic{inline-size:17px;block-size:17px;color:var(--signal)}
.sv-team-line{margin:14px 0 0;max-inline-size:72ch;color:var(--muted);font-size:.95rem}
.sv-options{margin-block-start:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:center;padding:24px;border-radius:20px;border:1.5px dashed #E5B65A;background:#FFFCF5}
.sv-options h3{margin:12px 0 6px;font-size:1.1rem}
.sv-options p{margin:0 0 6px;color:var(--muted);font-size:.95rem}
.sv-options .sv-options-rule{margin:0;font-size:.88rem}
.sv-nets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sv-nets li{display:flex;align-items:center;gap:10px;padding:2px 0;font-weight:650;font-size:.95rem;white-space:nowrap}
.sv-nets li::before{content:"";flex:none;inline-size:8px;block-size:8px;border-radius:50%;background:#D69E2E}
.sv-demo-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:26px 0 0}
.sv-demo-line span{color:var(--muted);font-size:.9rem}
@media(max-width:860px){.sv-cards{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.sv-options{grid-template-columns:minmax(0,1fr)}.sv-nets{flex-direction:row;flex-wrap:wrap;gap:6px 20px}}
@media(max-width:480px){.sv-card,.sv-base,.sv-options{padding:20px 18px}}

/* ===================================================================== 3 Ein Tag im Service (lebende Zeitleiste) */
.sv-tl{position:relative}
.sv-tl-rail{position:absolute;inset-block:10px;inset-inline-start:15px;inline-size:2px;border-radius:2px;background:#22304F}
.sv-tl-rail i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#3B82F6,#60A5FA 62%,#34D399);transform-origin:50% 0}
.sv-tl-list{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.sv-tl-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 40px;align-items:center;padding-inline-start:54px}
.sv-tl-item::before,.sv-tl-item::after{content:"";position:absolute;inset-inline-start:8px;inset-block-start:4px;inline-size:16px;block-size:16px;border-radius:50%}
.sv-tl-item::before{background:#0B1220;box-shadow:inset 0 0 0 2px #3B5B9A}
.sv-tl-item::after{background:#60A5FA;box-shadow:0 0 0 5px rgba(96,165,250,.18),0 0 18px rgba(96,165,250,.55)}
.sv-tl-copy{align-self:start}
.sv-when{display:inline-block;margin-block-end:6px;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#7EAAFF}
.sv-tl-copy h3{margin:0 0 6px;color:#fff;font-size:1.2rem}
.sv-tl-copy p{margin:0;color:#A9B4C8;font-size:.96rem}
.sv-mini{padding:14px 16px;border-radius:16px;background:#111A2E;box-shadow:inset 0 0 0 1px #243150,0 20px 40px -30px rgba(0,0,0,.9)}
.sv-mini-top{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:.85rem}
.sv-mini-top b{margin-inline-end:auto;color:#fff}
.sv-amp{font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:rgba(245,158,11,.16);color:#FCD34D;line-height:1.3}
.sv-mini-lines{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sv-mini-lines li{padding:8px 10px;border-radius:9px;background:#16213D;color:#DCE6F5;font-size:.86rem;line-height:1.4}
.sv-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sv-rows li{display:flex;gap:10px;align-items:center;color:#DCE6F5;font-size:.88rem;line-height:1.35}
.sv-pipe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sv-pipe li{display:flex;flex-direction:column;gap:8px;min-block-size:92px;padding:8px;border-radius:10px;background:#0E1730;box-shadow:inset 0 0 0 1px #1E2A44;min-inline-size:0}
.sv-pipe li > span{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:#8FA2C4}
.sv-pipe .is-here{box-shadow:inset 0 0 0 1px rgba(96,165,250,.55)}
.sv-pipe-card{display:block;padding:8px;border-radius:8px;background:#1E5EFF;color:#fff;font-size:.78rem;font-weight:650;line-height:1.25;box-shadow:0 10px 20px -10px rgba(30,94,255,.9);overflow-wrap:break-word;hyphens:auto}
.sv-pipe-card small{display:block;font-weight:500;font-size:.7rem;opacity:.88}
.sv-tip{display:flex;gap:12px;align-items:flex-start;margin:0;color:#DCE6F5;font-size:.88rem}
.sv-tip-ic{flex:none;inline-size:32px;block-size:32px;border-radius:10px;display:grid;place-items:center;background:rgba(245,158,11,.14);color:#FCD34D}
.sv-tip-ic .ic{inline-size:17px;block-size:17px}
.sv-tip b{display:block;color:#fff}
.sv-tip b + span{display:block;color:#A9B4C8;font-size:.84rem}
/* Filmstreifen (Storyboard) – Bild für „Video in Arbeit“, bewusst ohne Play-Knopf und Abspielleiste (Befund 25) */
.sv-film{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:12px 8px;border-radius:10px;background:radial-gradient(circle,#2A3A5E 1.6px,transparent 2px) 0 3px/12px 6px repeat-x,radial-gradient(circle,#2A3A5E 1.6px,transparent 2px) 0 calc(100% - 3px)/12px 6px repeat-x,#0B1220}
.sv-frame{aspect-ratio:16/10;border-radius:4px;background:radial-gradient(60px 36px at 30% 40%,rgba(96,165,250,.55),transparent 70%),linear-gradient(135deg,#1C3266,#101C38)}
.sv-frame:nth-child(2){background:radial-gradient(60px 36px at 60% 55%,rgba(245,158,11,.45),transparent 70%),linear-gradient(135deg,#1C3266,#101C38)}
.sv-frame:nth-child(3){background:radial-gradient(60px 36px at 45% 35%,rgba(52,211,153,.4),transparent 70%),linear-gradient(135deg,#1C3266,#101C38)}
.sv-mini-foot{margin:10px 0 0;color:#A9B4C8;font-size:.82rem}
@media(max-width:520px){.sv-pipe li > span,.svx-col-h{font-size:.6rem;letter-spacing:0;text-transform:none}}
/* N13: Wörter nie mitten im Wort trennen (Arabisch: verbundene Schrift). Unter 480 px liegt die aktive Stufe über beiden Spalten. */
@media(max-width:480px){.sv-pipe{grid-template-columns:repeat(2,minmax(0,1fr))}.sv-pipe li{min-block-size:0}.sv-pipe .is-here{grid-column:1 / -1}}
/* N4: Karten „Unsere Arbeit“ (Website, Video-Kampagne) zeigen unsere Arbeit, keinen Bereich des Cockpits – ohne Fensterrahmen, gestrichelt */
.sv-mini-work{background:transparent;box-shadow:none;border:1px dashed #3A4A6E}
@media(max-width:820px){
  .sv-tl-item{grid-template-columns:minmax(0,1fr);padding-inline-start:42px}
  .sv-tl-rail{inset-inline-start:11px}
  .sv-tl-item::before,.sv-tl-item::after{inset-inline-start:4px}
}

/* ===================================================================== 4 Preis und Bedingungen */
.sv-pgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px;align-items:start}
.sv-pcard{position:relative;padding:30px;border-radius:24px;background:var(--paper-2);box-shadow:0 30px 60px -30px rgba(15,35,90,.45),0 0 0 2px var(--signal)}
.sv-pcard p{margin:0}
.sv-pcard .sv-pcard-name{font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.sv-pcard .sv-pcard-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-block-start:12px;color:var(--muted);line-height:1.35}
.sv-pcard-now b{font-family:var(--display);font-size:clamp(2.6rem,6vw,3.6rem);font-weight:750;letter-spacing:-.045em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-pcard .sv-pcard-then{margin-block-start:10px;font-size:1.15rem;color:var(--text)}
.sv-pcard-then b{font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-pcard-then span{color:var(--muted);font-size:.95rem;white-space:nowrap}
.sv-pcard .sv-pcard-tax{margin-block-start:6px;color:var(--muted);font-size:.9rem}
.sv-pcard .sv-noaktion{margin-block-start:4px;color:var(--text);font-size:.9rem}
.sv-pcard .sv-budget{display:flex;gap:12px;align-items:flex-start;margin-block-start:18px;padding:14px 16px;border-radius:14px;background:#FFFBEB;box-shadow:inset 0 0 0 1px #FDE68A;color:#78350F;font-size:.93rem;line-height:1.5}
.sv-budget-ic{flex:none;inline-size:32px;block-size:32px;border-radius:10px;display:grid;place-items:center;background:#FEF3C7;color:#B45309}
.sv-budget-ic .ic{inline-size:17px;block-size:17px}
.sv-pcard-btn{inline-size:100%;justify-content:center;margin-block-start:22px}
.sv-pcard .sv-pcard-sum{margin-block-start:14px;color:var(--muted);font-size:.84rem;line-height:1.55}
.sv-pside h3{margin:6px 0 14px;font-size:1.15rem}
.sv-terms{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sv-terms li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--paper-2);box-shadow:var(--ring);color:var(--muted);font-size:.94rem;line-height:1.5}
.sv-terms b{color:var(--text)}
.sv-ti{flex:none;inline-size:26px;block-size:26px;border-radius:50%;display:grid;place-items:center}
.sv-ti .ic{inline-size:15px;block-size:15px;stroke-width:2.4}
.sv-yes .sv-ti{background:rgba(22,163,74,.12);color:#15803D}
.sv-no .sv-ti{background:#EEF0F4;color:#5B6578}
.sv-agb{margin:16px 0 0;color:var(--muted);font-size:.92rem}
.sv-pside-note{margin:10px 0 0;color:var(--muted);font-size:.92rem}
@media(max-width:860px){.sv-pgrid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.sv-pcard{padding:22px 18px}}

/* ===================================================================== 5 Ablauf */
.sv-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sv-step{position:relative;padding:22px;border-radius:20px;background:var(--paper-2);box-shadow:var(--shadow),var(--ring)}
.sv-step-n{display:grid;place-items:center;inline-size:36px;block-size:36px;margin-block-end:14px;border-radius:12px;background:var(--ink);color:#fff;font-family:var(--display);font-weight:700}
.sv-step h3{margin:0 0 6px;font-size:1.05rem}
.sv-step p{margin:0;color:var(--muted);font-size:.93rem}
.sv-step:not(:last-child)::after{content:"";position:absolute;inset-block-start:39px;inset-inline-end:-16px;inline-size:16px;block-size:2px;background:#C9D2E3}
@media(max-width:900px){.sv-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.sv-step::after{display:none}}
@media(max-width:560px){.sv-steps{grid-template-columns:minmax(0,1fr)}}

/* ===================================================================== 6 Offen gesagt */
.sv-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sv-tcard{padding:24px;border-radius:20px;background:var(--paper-2);box-shadow:var(--shadow),var(--ring)}
.sv-tcard .itile{margin-block-end:14px}
.sv-tcard h3{margin:0 0 8px;font-size:1.08rem}
.sv-tcard p{margin:0;color:var(--muted);font-size:.95rem}
.sv-tcard .sv-tcard-links{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-block-start:12px}
.sv-tcard-links a{display:inline-flex;align-items:center;gap:8px;min-block-size:32px;color:var(--text);font-weight:600}
.sv-tcard-links .ic{inline-size:17px;block-size:17px;color:var(--signal)}
@media(max-width:900px){.sv-trust{grid-template-columns:minmax(0,1fr)}}

/* ===================================================================== 7 Fragen */
.sv-faq .wrap{max-inline-size:860px}
.sv-faq h2{margin-block-end:22px}
/* Befund 26: Zielfläche = ganze Zeile (≥ 48 px), nicht nur die Textzeile von 25 px */
.sv-faq details{padding:0}
.sv-faq summary{min-block-size:48px;align-items:center;gap:14px;padding:12px 18px;border-radius:inherit}
.sv-faq details p{margin:0;padding:0 18px 16px}

/* ===================================================================== 8 Anfrage */
/* Befund 19: Reihenfolge im HTML Überschrift → Formular → „Was danach passiert“. Breit: links Überschrift und Ablauf, rechts das
   Formular; schmal: eine Spalte in HTML-Reihenfolge – nach dem Sprung auf #anfrage steht sofort ein Eingabefeld im Bild. */
.sv-ask-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto 1fr;grid-template-areas:"copy form" "more form";column-gap:clamp(28px,5vw,64px);row-gap:0;align-items:start}
.sv-ask-copy{grid-area:copy}.sv-formbox{grid-area:form}.sv-ask-more{grid-area:more}
.sv-ask h2{color:#fff}
.sv-ask .lead{margin-block-end:24px}
.sv-next-h{margin:0 0 12px;color:#fff;font-size:1.05rem}
.sv-next{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sv-next li{display:flex;gap:12px;align-items:flex-start;color:#C7D2E5;font-size:.96rem}
.sv-next-n{flex:none;inline-size:28px;block-size:28px;border-radius:50%;display:grid;place-items:center;background:rgba(30,94,255,.2);color:#A8C3FF;font-weight:700;font-size:.85rem;box-shadow:inset 0 0 0 1px rgba(96,150,255,.4)}
.sv-other{margin:24px 0 0;padding-block-start:18px;border-block-start:1px solid #22304F;color:#A9B4C8;font-size:.92rem}
.sv-other a{color:#fff}
.sv-formbox{padding:clamp(20px,3.4vw,32px);border-radius:24px;background:var(--paper-2);color:var(--text);box-shadow:0 40px 80px -40px rgba(0,0,0,.8),0 0 0 1px rgba(147,197,253,.2)}
.sv-form .form-error{margin:0 0 14px}
.sv-field{margin-block-end:16px}
.sv-form .sv-field label{display:block;margin:0 0 6px;color:var(--text);font-size:.93rem;font-weight:650}
.sv-opt{font-weight:500;color:var(--muted)}
.sv-form input:not([type="hidden"]),.sv-form textarea{display:block;inline-size:100%;min-block-size:48px;padding:12px 14px;border:1px solid #8A93A6;border-radius:12px;background:#fff;color:var(--text);font:inherit;font-size:1rem;transition:border-color .16s ease,box-shadow .16s ease}
.sv-form textarea{min-block-size:112px;resize:vertical;line-height:1.5}
.sv-form input:not([type="hidden"]):focus,.sv-form textarea:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px rgba(30,94,255,.24)}
.sv-hint{margin:6px 0 0;color:var(--muted);font-size:.84rem}
.sv-err{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;color:#B42318;font-size:.9rem;font-weight:600;line-height:1.4}
.sv-err::before{content:"!";flex:none;display:grid;place-items:center;inline-size:18px;block-size:18px;margin-block-start:1px;border-radius:50%;background:#B42318;color:#fff;font-size:.72rem;font-weight:800;line-height:1}
.sv-err[hidden],.sv-sum[hidden]{display:none}
/* N16: Fehlerzustand mindestens so stark wie „.sv-form input:not([type=hidden])“ (sonst blau): roter Rand, beim Fokus roter Ring */
.sv-form input[aria-invalid="true"],.sv-form textarea[aria-invalid="true"]{border-color:#B42318;box-shadow:0 0 0 1px #B42318}
.sv-form input[aria-invalid="true"]:focus,.sv-form textarea[aria-invalid="true"]:focus{border-color:#B42318;box-shadow:0 0 0 1px #B42318,0 0 0 4px rgba(180,35,24,.26)}
.sv-sum{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;padding:12px 14px;border-radius:12px;background:#FEF3F2;box-shadow:inset 0 0 0 1px #FECDCA;color:#912018;font-size:.93rem;font-weight:600}
.sv-sum .ic{inline-size:18px;block-size:18px;margin-block-start:2px;stroke-width:2.4}
.sv-sum:focus{outline:2px solid #B42318;outline-offset:2px}
.sv-send{inline-size:100%;justify-content:center;margin-block-start:6px}
.sv-send[disabled]{opacity:.78;cursor:progress}
.sv-privacy,.sv-fallback{margin:12px 0 0;color:var(--muted);font-size:.84rem;line-height:1.55}
@media(max-width:900px){.sv-ask-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"copy" "form" "more";row-gap:24px}.sv-ask .lead{margin-block-end:0}}

/* ===================================================================== 9 Startseite: Showcase (svx) */
.svx{position:relative;isolation:isolate;overflow:hidden;overflow:clip;color:#E6EDF7;padding-block:clamp(56px,8vw,112px);background:radial-gradient(900px 560px at 84% 40%,rgba(30,94,255,.26),transparent 64%),radial-gradient(700px 420px at 4% 92%,rgba(96,165,250,.11),transparent 60%),linear-gradient(180deg,#0B1220 0%,#070D1C 100%)}
/* Die Aktionsfläche direkt danach bekommt denselben nahtlosen Übergang wie direkt nach dem Hero (style.css: .hero.night + .aktion-xl) */
.svx + .aktion-xl{background:radial-gradient(900px 520px at 86% 64%,rgba(30,94,255,.30),transparent 62%),radial-gradient(620px 300px at 4% 100%,rgba(96,165,250,.12),transparent 60%),linear-gradient(180deg,#070D1C 0%,#070D1C 100%)}
.svx-head{max-inline-size:860px;margin:0 auto 40px;text-align:center}
.svx-head .eyebrow{color:#7EAAFF}
.svx-head h2{margin:0;color:#fff;font-size:clamp(1.85rem,4.2vw,3rem);line-height:1.1}
.svx-head h2 span{color:#6EA8FF}
.svx-head .lead{margin:16px auto 0;max-inline-size:66ch;color:#AEB9CC}
.svx-scene{position:relative;isolation:isolate;margin:0}
.svx-scene::before{content:"";position:absolute;inset:-8% -6%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(59,130,246,.26),rgba(30,94,255,.07) 60%,transparent 80%)}
.svx-win{padding:14px;border-radius:26px;background:linear-gradient(180deg,#0F1A33,#0B1428);box-shadow:0 0 0 1px rgba(147,197,253,.24),0 0 0 8px rgba(255,255,255,.03),0 60px 120px -50px rgba(0,0,0,.9),0 0 120px -40px rgba(30,94,255,.55)}
.svx-bar{display:flex;align-items:center;gap:10px;padding:4px 6px 14px;font-size:.88rem}
.svx-bar b{margin-inline-end:auto;color:#fff;font-weight:650}
.svx-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"agent team" "agent social" "pipe pipe";gap:12px}
.svx-panel{position:relative;min-inline-size:0;padding:18px;border-radius:18px;background:#111A2E;box-shadow:inset 0 0 0 1px #1E2A44}
.svx-agent{grid-area:agent;display:flex;flex-direction:column}.svx-team{grid-area:team}.svx-pipe{grid-area:pipe}.svx-social{grid-area:social}
.svx-ph{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:.92rem}
.svx-ph b{margin-inline-end:auto;color:#fff;font-weight:650}
.svx-ic{flex:none;inline-size:32px;block-size:32px;border-radius:10px;display:grid;place-items:center;background:rgba(30,94,255,.18);color:#A8C3FF;box-shadow:inset 0 0 0 1px rgba(96,150,255,.3)}
.svx-ic .ic{inline-size:17px;block-size:17px}
.svx-ava{flex:none;inline-size:36px;block-size:36px;border-radius:50%;background:#16213D;box-shadow:0 0 0 2px rgba(96,165,250,.45)}
.svx-opt{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;color:#C7D2E5;box-shadow:inset 0 0 0 1px #3A4A6E;line-height:1.3}
/* Agent */
.svx-headline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;color:#fff;font-size:1.05rem;font-weight:650;line-height:1.3}
.svx-lines{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.svx-lines li{position:relative;overflow:hidden;overflow:clip;padding:10px 12px;border-radius:10px;background:#16213D;color:#DCE6F5;font-size:.92rem;line-height:1.4}
.svx-chat{display:grid;gap:8px;margin-block-start:auto;padding-block-start:14px;border-block-start:1px dashed #263556}
.svx-msg{max-inline-size:88%;margin:0;padding:9px 12px;border-radius:14px;font-size:.88rem;line-height:1.4}
.svx-me{justify-self:end;background:#1E5EFF;color:#fff;border-end-end-radius:4px}
.svx-ag{justify-self:start;display:flex;gap:8px;align-items:center;background:#16213D;color:#DCE6F5;border-end-start-radius:4px}
.svx-ag .ic{inline-size:16px;block-size:16px;color:#4ADE80;stroke-width:2.4}
.svx-note{margin:12px 0 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:#8FA2C4}
/* KI-Team */
.svx-team-txt{margin:0 0 14px;color:#C7D2E5;font-size:.92rem;line-height:1.45}
.svx-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;position:relative}
.svx-steps::before{content:"";position:absolute;inset-block:12px;inset-inline-start:11px;inline-size:2px;background:#22304F;border-radius:2px}
.svx-steps li{position:relative;display:flex;align-items:center;gap:12px;min-block-size:24px;color:#DCE6F5;font-size:.9rem;line-height:1.35}
.svx-dot{position:relative;flex:none;inline-size:24px;block-size:24px;border-radius:50%;background:#0B1220;box-shadow:inset 0 0 0 2px #3B5B9A}
.svx-dot::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#4ADE80;box-shadow:0 0 12px rgba(74,222,128,.7)}
.svx-think{display:inline-flex;gap:3px;margin-inline-start:6px;vertical-align:middle;opacity:0}
.svx-think b{inline-size:5px;block-size:5px;border-radius:50%;background:#93B4FF}
.svx-ok{display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;padding:7px 12px;border-radius:999px;background:rgba(34,197,94,.14);box-shadow:inset 0 0 0 1px rgba(34,197,94,.45);color:#86EFAC;font-size:.85rem;font-weight:650}
.svx-ok .ic{inline-size:16px;block-size:16px;stroke-width:2.4}
/* Pipeline */
.svx-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:var(--svx-gap);row-gap:8px}
.svx-col-h{grid-row:1;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:#8FA2C4}
.svx-col-h:nth-of-type(1),.svx-lane:nth-of-type(1),.svx-skel:nth-of-type(1){grid-column:1}
.svx-col-h:nth-of-type(2),.svx-lane:nth-of-type(2),.svx-skel:nth-of-type(2){grid-column:2}
.svx-col-h:nth-of-type(3),.svx-lane:nth-of-type(3),.svx-skel:nth-of-type(3){grid-column:3}
.svx-lane{grid-row:2 / 4;border-radius:10px;background:#0E1730;box-shadow:inset 0 0 0 1px #1E2A44}
.svx-skel{grid-row:3;display:grid;gap:6px;padding:0 8px 8px;align-content:start}
.svx-skel i{display:block;block-size:28px;border-radius:7px;background:#172340}
.svx-skel i:nth-child(2){opacity:.6}
.svx-card{grid-row:2;grid-column:3;z-index:1;margin:8px var(--svx-cm) 0;padding:9px 10px;border-radius:9px;background:#1E5EFF;color:#fff;font-size:.8rem;line-height:1.25;box-shadow:0 14px 26px -12px rgba(30,94,255,.95);overflow-wrap:break-word;hyphens:auto}
.svx-card b{display:block;font-weight:650}
.svx-card span{display:block;font-size:.72rem;opacity:.88}
/* Social */
.svx-nets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.svx-nets li{display:grid;gap:2px;align-content:start;min-inline-size:0;padding:12px;border-radius:12px;background:#0E1730;box-shadow:inset 0 0 0 1px #1E2A44}
/* Befund 27: Bezeichnung, Zahl, Einheit und Balken teilen sich die Zeilen aller drei Karten – die Zahlen stehen immer auf einer Linie */
@supports (grid-template-rows:subgrid){.svx-nets{grid-template-rows:auto auto auto auto}.svx-nets li{grid-row:span 4;grid-template-rows:subgrid;row-gap:2px}}
.svx-net{color:#8FA2C4;font-size:.74rem;overflow-wrap:anywhere}
.svx-num{color:#fff;font-family:var(--display);font-size:1.35rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.svx-unit{color:#A9B4C8;font-size:.72rem}
.svx-spark{display:flex;align-items:flex-end;gap:3px;block-size:30px;margin-block-start:8px}
.svx-spark i{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(180deg,#60A5FA,#1E5EFF);transform-origin:50% 100%}
.svx-spark i:nth-child(1){block-size:30%}.svx-spark i:nth-child(2){block-size:42%}.svx-spark i:nth-child(3){block-size:38%}
.svx-spark i:nth-child(4){block-size:58%}.svx-spark i:nth-child(5){block-size:70%}.svx-spark i:nth-child(6){block-size:88%}
.svx-scene figcaption{margin-block-start:16px;text-align:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:#9AA7BF}
/* Preis + Knöpfe */
.svx-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-block-start:40px;padding:22px 24px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));box-shadow:inset 0 0 0 1px rgba(147,197,253,.22)}
.svx-price{margin:0;color:#DCE6F5;font-size:1.05rem;line-height:1.45;max-inline-size:60ch}
.svx-price b{color:#fff;font-family:var(--display);font-size:1.3rem;font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.svx-price span{display:block;margin-block-start:4px;color:#A9B4C8;font-size:.86rem}
.svx-price .sv-noaktion{margin-block-start:2px;color:#C7D2E5}
.svx-actions{display:flex;flex-wrap:wrap;gap:12px}
.svx .btn.ghost{border-color:#2F3D5C;color:#E6EDF7}
@media(hover:hover) and (pointer:fine){.svx .btn.ghost:hover{border-color:#60A5FA}}
@media(max-width:900px){
  .svx-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"agent" "team" "social" "pipe"}
}
@media(max-width:560px){
  .svx-win{padding:10px;border-radius:20px}
  .svx-panel{padding:14px}
  .svx-nets{gap:6px}
  .svx-nets li{padding:10px 8px}
  .svx-num{font-size:1.12rem}
  .svx-foot{padding:18px 16px}
  .svx-actions,.svx-actions .btn{inline-size:100%}
  .svx-actions .btn{justify-content:center}
}
/* N13: Showcase-Pipeline am schmalen Handy – weniger Polster, damit „Beispiel“, „Exemple“, «استفسار» in eine Zeile passen
   (Karte wandert weiter genau um eine bzw. zwei Spalten: --svx-gap und --svx-cm stecken auch in @keyframes sv-move) */
@media(max-width:420px){
  .svx-win{padding:5px}
  .svx-pipe.svx-panel{padding:12px 8px}
  .svx-board{--svx-gap:6px;--svx-cm:4px}
  .svx-card{padding:7px 6px;font-size:.76rem}
}

/* ===================================================================== 10 Preisseite: Hinweis (sv-teaser) */
.sv-teaser{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px 40px;align-items:center;padding:clamp(22px,4vw,40px);border-radius:26px;color:#E6EDF7;background:radial-gradient(520px 260px at 100% 0%,rgba(30,94,255,.34),transparent 70%),linear-gradient(180deg,#132248,#0B1220);box-shadow:0 30px 70px -40px rgba(15,35,90,.8),inset 0 0 0 1px rgba(96,150,255,.28)}
.sv-teaser .eyebrow{color:#7EAAFF}
.sv-teaser h2{margin:0 0 10px;color:#fff;font-size:clamp(1.45rem,3vw,2rem)}
.sv-teaser-copy p{margin:0 0 20px;color:#B6C3DA}
.sv-teaser-price{padding:20px;border-radius:18px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(147,197,253,.24)}
.sv-teaser-price p{margin:0}
.sv-teaser-price .sv-teaser-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;color:#C7D2E5;line-height:1.35}
.sv-teaser-now b{color:#fff;font-family:var(--display);font-size:clamp(2rem,4vw,2.6rem);font-weight:750;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-teaser-price .sv-teaser-then{margin-block-start:8px;color:#DCE6F5;font-size:1.05rem}
.sv-teaser-then b{color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-teaser-price .sv-teaser-meta{margin-block-start:6px;color:#A9B4C8;font-size:.86rem}
.sv-teaser-price .sv-teaser-budget{margin-block-start:12px;padding:9px 12px;border-radius:12px;background:rgba(245,158,11,.10);box-shadow:inset 0 0 0 1px rgba(245,158,11,.38);color:#FDE7B0;font-size:.86rem;line-height:1.45}
@media(max-width:820px){.sv-teaser{grid-template-columns:minmax(0,1fr)}}

/* ===================================================================== 11 Handy-Leiste am Formular
   service.js setzt html.sv-ask-on, solange der Abschnitt #anfrage im Bild ist: Die Leiste („… anfragen“, ohne zu senden)
   verschwindet dort, damit sie den echten Absende-Knopf nie verdeckt. --rv-bottom bleibt dabei unverändert (N12): Sonst glitte der
   Chat-Knopf (chat.css, Übergang auf „bottom“) in den Formularbereich, verursachte Layout-Verschiebungen und läge über dem
   Absende-Knopf. Fokus-Ziele scrollen nie unter die Leiste (scroll-padding-bottom). */
html.sv-ask-on .sv-mcta.is-on{visibility:hidden;transform:translateY(110%)}
html:has(.sv-mcta){scroll-padding-bottom:calc(var(--rv-bottom,0px) + 12px)}

/* ===================================================================== Bewegung (nur als Zusatz) */
@keyframes sv-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sv-pop{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
@keyframes sv-wipe{from{transform:translateX(0)}to{transform:translateX(calc(var(--sv-dir) * 101%))}}
@keyframes sv-lit{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes sv-rail{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes sv-grow{from{transform:scaleY(.08)}to{transform:none}}
@keyframes sv-think{0%{opacity:0}12%{opacity:1}88%{opacity:1}100%{opacity:0}}
@keyframes sv-bob{0%,100%{transform:none}50%{transform:translateY(-3px)}}
@keyframes sv-move{
  0%,18%{transform:translateX(calc(var(--sv-dir) * (-200% - 2 * var(--svx-gap) - 4 * var(--svx-cm))))}
  42%,62%{transform:translateX(calc(var(--sv-dir) * (-100% - var(--svx-gap) - 2 * var(--svx-cm))))}
  86%,100%{transform:none}
}

@media (prefers-reduced-motion: no-preference){
  /* --- Einblenden beim Scrollen (service.js setzt data-sv-wait nur bei Elementen unterhalb des sichtbaren Bereichs) --- */
  [data-sv-reveal]{transition:opacity .36s var(--sv-ease),transform .42s var(--sv-ease);transition-delay:calc(var(--sv-i,0) * 50ms)}
  [data-sv-wait]{opacity:0;transform:translateY(14px)}
  /* main.js blendet details und .wa-card ein: auf diesen Seiten ruhiger (kurz, ohne Unschärfe) */
  .motion .sv-faq [data-reveal],.motion .sv-wa [data-reveal]{filter:none;transform:translateY(12px);transition:opacity .36s var(--sv-ease),transform .42s var(--sv-ease);transition-delay:calc(var(--i,0) * 40ms)}
  .motion .sv-faq [data-reveal].in,.motion .sv-wa [data-reveal].in{transform:none}

  /* --- Hero-Fenster: das Briefing schreibt sich einmal beim Laden (reines CSS, endet nach 3,4 s im fertigen Zustand) --- */
  .sv-lines li::after{content:"";position:absolute;inset:0;background:#16213D;box-shadow:inset 2px 0 0 #60A5FA;animation:sv-wipe .65s cubic-bezier(.45,0,.55,1) both}
  [dir="rtl"] .sv-lines li::after{box-shadow:inset -2px 0 0 #60A5FA}
  .sv-lines li:nth-child(1)::after{animation-delay:.45s}
  .sv-lines li:nth-child(2)::after{animation-delay:1.2s}
  .sv-lines li:nth-child(3)::after{animation-delay:1.95s}
  .sv-peek li{animation:sv-pop .32s var(--sv-ease) both}
  .sv-peek li:nth-child(1){animation-delay:2.7s}
  .sv-peek li:nth-child(2){animation-delay:2.85s}
  html.sv-ask-on .sv-mcta.is-on{transition:transform .35s var(--ease-drawer),visibility 0s .35s}

  /* --- Showcase, Weg A (ohne Scroll-Zeitleiste): einmal zeitgesteuert, sobald ein Feld sichtbar wird.
         service.js setzt data-svx-arm (Startzustand) und später .sv-play. Ohne data-svx-arm: keine Bewegung. --- */
  html.svjs [data-svx-arm] .svx-lines li::after{content:"";position:absolute;inset:0;background:#16213D;box-shadow:inset 2px 0 0 #60A5FA;animation:sv-wipe .6s cubic-bezier(.45,0,.55,1) both paused}
  html.svjs[dir="rtl"] [data-svx-arm] .svx-lines li::after{box-shadow:inset -2px 0 0 #60A5FA}
  html.svjs [data-svx-arm] .svx-lines li:nth-child(1)::after{animation-delay:.2s}
  html.svjs [data-svx-arm] .svx-lines li:nth-child(2)::after{animation-delay:.9s}
  html.svjs [data-svx-arm] .svx-lines li:nth-child(3)::after{animation-delay:1.6s}
  html.svjs [data-svx-arm] .svx-me{animation:sv-pop .34s var(--sv-ease) 2.3s both paused}
  html.svjs [data-svx-arm] .svx-ag{animation:sv-pop .34s var(--sv-ease) 2.8s both paused}
  html.svjs [data-svx-arm] .svx-dot::after{animation:sv-lit .3s var(--sv-ease) both paused}
  html.svjs [data-svx-arm] .svx-steps li:nth-child(1) .svx-dot::after{animation-delay:.35s}
  html.svjs [data-svx-arm] .svx-steps li:nth-child(2) .svx-dot::after{animation-delay:2s}
  html.svjs [data-svx-arm] .svx-steps li:nth-child(3) .svx-dot::after{animation-delay:2.35s}
  html.svjs [data-svx-arm] .svx-think{animation:sv-think 1.3s linear .7s both paused}
  html.svjs [data-svx-arm] .svx-think b{animation:sv-bob .45s ease-in-out .7s 3 paused}
  html.svjs [data-svx-arm] .svx-think b:nth-child(2){animation-delay:.8s}
  html.svjs [data-svx-arm] .svx-think b:nth-child(3){animation-delay:.9s}
  html.svjs [data-svx-arm] .svx-ok{animation:sv-pop .34s var(--sv-ease) 2.7s both paused}
  html.svjs [data-svx-arm] .svx-card{animation:sv-move 2.4s cubic-bezier(.65,0,.35,1) .3s both paused}
  html.svjs [data-svx-arm] .svx-spark i{animation:sv-grow .5s var(--sv-ease) both paused}
  html.svjs [data-svx-arm] .svx-spark i:nth-child(2){animation-delay:.05s}
  html.svjs [data-svx-arm] .svx-spark i:nth-child(3){animation-delay:.1s}
  html.svjs [data-svx-arm] .svx-spark i:nth-child(4){animation-delay:.15s}
  html.svjs [data-svx-arm] .svx-spark i:nth-child(5){animation-delay:.2s}
  html.svjs [data-svx-arm] .svx-spark i:nth-child(6){animation-delay:.25s}
  html.svjs [data-svx-arm].sv-play .svx-lines li::after,
  html.svjs [data-svx-arm].sv-play .svx-me,html.svjs [data-svx-arm].sv-play .svx-ag,
  html.svjs [data-svx-arm].sv-play .svx-dot::after,html.svjs [data-svx-arm].sv-play .svx-think,
  html.svjs [data-svx-arm].sv-play .svx-think b,html.svjs [data-svx-arm].sv-play .svx-ok,
  html.svjs [data-svx-arm].sv-play .svx-card,html.svjs [data-svx-arm].sv-play .svx-spark i{animation-play-state:running}
}

/* --- Scroll-gesteuert, nur wenn der Browser es kann (Chrome/Edge ab 115, Safari ab 26); sonst bleibt alles statisch fertig --- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* Zeitleiste: Die Linie füllt sich mit dem Scrollen, jeder Punkt leuchtet auf, wenn man ihn erreicht. */
    .sv-tl{view-timeline:--sv-tl block}
    .sv-tl-rail i{animation:sv-rail linear both;animation-timeline:--sv-tl;animation-range:entry 40% exit 55%}
    .sv-tl-item::after{animation:sv-lit linear both;animation-timeline:view();animation-range:entry 60% cover 50%}

    /* Showcase, Weg B: Jedes Element erzählt beim Hineinscrollen seinen Teil (eigene Ansichts-Zeitleiste je Element, nur mit
       service.js, Klasse html.svjs). Alles ist fertig, bevor das Element die Bildmitte erreicht, und bleibt beim Weiterscrollen fertig. */
    html.svjs .svx-lines li::after{content:"";position:absolute;inset:0;background:#16213D;box-shadow:inset 2px 0 0 #60A5FA;animation:sv-wipe linear both;animation-timeline:view();animation-range:cover 6% cover 22%}
    html.svjs[dir="rtl"] .svx-lines li::after{box-shadow:inset -2px 0 0 #60A5FA}
    html.svjs .svx-me{animation:sv-pop linear both;animation-timeline:view();animation-range:cover 10% cover 20%}
    html.svjs .svx-ag{animation:sv-pop linear both;animation-timeline:view();animation-range:cover 16% cover 26%}
    html.svjs .svx-dot::after{animation:sv-lit linear both;animation-timeline:view();animation-range:cover 8% cover 16%}
    html.svjs .svx-steps li:nth-child(2) .svx-dot::after,html.svjs .svx-steps li:nth-child(3) .svx-dot::after{animation-range:cover 20% cover 27%}
    html.svjs .svx-think{animation:sv-think linear both;animation-timeline:view();animation-range:cover 6% cover 22%}
    html.svjs .svx-ok{animation:sv-pop linear both;animation-timeline:view();animation-range:cover 18% cover 28%}
    html.svjs .svx-card{animation:sv-move linear both;animation-timeline:view();animation-range:cover 8% cover 34%}
    html.svjs .svx-spark i{animation:sv-grow linear both;animation-timeline:view();animation-range:cover 4% cover 20%}
  }
}

/* Drucken: immer alles sichtbar */
@media print{
  [data-sv-wait]{opacity:1!important;transform:none!important}
  .sv-lines li::after,.svx-lines li::after{display:none!important}
}

/* ===================================================================== RTL – arabische Seiten (/ar/; Rolle SERVICE Teil 2)
   Nur Regeln mit [dir="rtl"]; alles darüber gilt unverändert. Spiegelung und Bewegung sind oben schon logisch gelöst
   (inset-inline-*, --sv-dir). Hier nur, was Arabisch zusätzlich braucht:
   - Etiketten in Monospace, Versalien und Sperrung zerreißen die verbundene arabische Schrift → Schrift der Seite, kein
     Sperren, keine Versalien, etwas größer (Arabisch wirkt bei gleicher Größe kleiner).
   - Kompakte Zeilen in den Beispiel-Fenstern: rtl.css setzt p/li auf Zeilenhöhe 1.85 (Fließtext) → hier 1.6.
   - Feld "Website": Adresse von links nach rechts wie E-Mail und Telefon (rtl.css). */
[dir="rtl"] .sv-tag,[dir="rtl"] .sv-badge,[dir="rtl"] .sv-when,[dir="rtl"] .sv-amp,[dir="rtl"] .sv-pipe li > span,
[dir="rtl"] .sv-pcard .sv-pcard-name,[dir="rtl"] .svx-opt,[dir="rtl"] .svx-note,[dir="rtl"] .svx-col-h,
[dir="rtl"] .sv-brief-head span,[dir="rtl"] .sv-stage figcaption,[dir="rtl"] .svx-scene figcaption{font-family:var(--font);letter-spacing:0;text-transform:none}
[dir="rtl"] .sv-tag,[dir="rtl"] .sv-amp,[dir="rtl"] .svx-opt{font-size:.74rem;line-height:1.5;padding-block:1px}
[dir="rtl"] .sv-badge{font-size:.82rem;line-height:1.5;padding-block:2px}
[dir="rtl"] .sv-when{font-size:.86rem;font-weight:600}
[dir="rtl"] .sv-pipe li > span,[dir="rtl"] .svx-col-h{font-size:.74rem;line-height:1.4}
[dir="rtl"] .sv-pcard .sv-pcard-name{font-size:.95rem}
[dir="rtl"] .sv-brief-head span,[dir="rtl"] .svx-note{font-size:.8rem}
[dir="rtl"] .sv-stage figcaption,[dir="rtl"] .svx-scene figcaption{font-size:.82rem}
[dir="rtl"] .sv-lines li,[dir="rtl"] .sv-mini-lines li,[dir="rtl"] .sv-rows li,[dir="rtl"] .svx-lines li,[dir="rtl"] .svx-msg,
[dir="rtl"] .svx-steps li,[dir="rtl"] .sv-peek p,[dir="rtl"] .sv-brief-head p,[dir="rtl"] .svx-card,[dir="rtl"] .sv-pipe-card,
[dir="rtl"] .sv-tip,[dir="rtl"] .sv-mini-foot,[dir="rtl"] .svx-team-txt{line-height:1.6}
/* N13: Arabisch nie silbentrennen oder mitten im Wort umbrechen (verbundene Schrift) – Platz schafft das Layout oben */
[dir="rtl"] .sv-pipe-card,[dir="rtl"] .svx-card{hyphens:none;overflow-wrap:normal}
[dir="rtl"] .sv-form input[name="website"]{direction:ltr;text-align:end}
[dir="rtl"] .sv-wa bdi,[dir="rtl"] .sv-fallback bdi,[dir="rtl"] .sv-tcard-links bdi{white-space:nowrap}