/* automatisch gebaut von unterseiten.py, NICHT von Hand ändern. Quellen: kern2/basis.css, sektionen2/fuss/fuss.css, sektionen2/faq/faq.css, sektionen2/assistent/assistent.css, unterseiten/bausteine/bausteine.css, unterseiten/sektionen/sektionen.css, unterseiten/sektionen/sektionen-plus.css, unterseiten/sektionen/branche.css, unterseiten/sektionen/funktion.css
Gemeinsame Quellen beim Zusammensetzen auf die 8 Farben gefiltert (farbfilter, 18.10.2026). */
/* ===== kern2/basis.css ===== */
/* =====================================================================================================
SmartChat Startseite NEU (13.10.2026) — FUNDAMENT kern2/basis.css
Gilt für ALLES unter dem Hero (main.s2). Regelbuch: kern2/STIL.md. Hero/Leiste/Lader liegen unberührt in kern/.
Herkunft der Werte (1:1 aus dem echten SmartChat, nicht geschätzt):
Farben, Linien, Chips, Karten, Schatten ........ Dashboard frontend/index.html (:root, .chip, .card, .nc, .pl)
Knopf (schwarzer Verlauf + Glasglanz) .......... kern/style.css .btn-knopf.schwarz (= Knopf in der Leiste) + Onboarding .cta (14 px)
Felder, Abzeichen-Pille, Avatare ............... Onboarding frontend/onboarding-mobil/onboarding-mobil.css (.field, .users, .av)
WhatsApp-Vorschau .............................. Dashboard frontend/pages/pages.css (.wap, .wab, .wab.out, .bt)
Farbfeld (Kacheln) ............................. frontend/feld-1..3.png (= App-Farbfeld, hier als /m/feld-N.jpg)
Logo-Kugel ..................................... Ladeschleier kern/index.basis.html (gleiche Verläufe und gleicher Stern)
Regeln: alle Klassen beginnen mit s2-. Nur transform und opacity bewegen. Nichts hier darf die Leiste (z-index 20) überdecken.
===================================================================================================== */
:root{
/* ---------- Farben (nur diese) ---------- */
--s2-schwarz:#141414; /* App --ink: Überschriften, Knopf, wichtige Wörter */
--s2-tinte:#141414; /* App --ink2: Chip-Text, Text in Karten */
--s2-grau:#6e6e6b; /* App --grey: Fließtext */
--s2-grau-satz:#6e6e6b; /* zweiter, grauer Teil eines Satzes (schwarz/grau-Technik) */
--s2-grau-hell:#6e6e6b; /* Kleingedrucktes, Zeiten, Nummern */
--s2-linie:#e4e4e2; /* App --line: jede Linie, jeder Ring */
--s2-linie-stark:#e4e4e2; /* App --g300 */
--s2-flaeche:#f1f1f0; /* App --fill: Felder, Skelett-Balken */
--s2-flaeche-ruhig:#f1f1f0; /* ruhige Kachel ohne Bild */
--s2-weiss:#ffffff;
--s2-rot:#dc2626; /* nur Fehler */
--s2-ok-grund:#f1f1f0; --s2-ok-text:#141414; /* App .pl.ok */
--s2-warte-grund:#f1f1f0; --s2-warte-text:#6e6e6b; /* App .pl.wait */
/* WhatsApp (nur in WhatsApp-Bausteinen) */
--s2-wa-grund:#efeff2; /* App .wap */
--s2-wa-aus:#d9fdd3; /* App .wab.out */
--s2-wa-knopf:#1d6fcf; /* App .wab .bt */
--s2-wa-zeit:#8a8b93;
--s2-wa-gelesen:#53bdeb;
/* ---------- Schrift ---------- */
--s2-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
--s2-sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
/* ---------- Ecken ---------- */
--s2-r-knopf:14px; /* Knöpfe, Felder, App-Karten (Gründer 2.10.: überall 14 px) */
--s2-r-karte:14px; /* schwebende SmartChat-Karte */
--s2-r-kachel:32px; /* große Bildkachel, Menschenfoto (wie Hero-Ende und Onboarding-Farbfeld: 32) */
--s2-r-klein:10px; /* kleine Felder in Karten (Eckenregel: innen = außen minus Abstand) */
--s2-r-rund:999px; /* Chips, Abzeichen-Pillen, Avatare */
/* ---------- Schatten (neutral, nie bunt) ---------- */
--s2-schatten-ring:0 0 0 1px var(--s2-linie);
--s2-schatten-ruhig:0 0 0 1px var(--s2-linie),0 1px 2px rgba(20,20,20,.03),0 10px 30px rgba(20,20,20,.05); /* App .card */
--s2-schatten-schwebe:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(20,20,20,.05),0 2px 4px rgba(20,20,20,.04),0 24px 48px -22px rgba(20,20,20,.28); /* App .nc, tiefer */
--s2-schatten-tief:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(20,20,20,.05),0 4px 10px rgba(20,20,20,.05),0 50px 90px -40px rgba(20,20,20,.40);
/* ---------- Bewegung ---------- */
--s2-kurve:cubic-bezier(.23,1,.32,1); /* App --ease-out */
--s2-kurve-weich:cubic-bezier(.45,0,.2,1);
--s2-dauer:900ms;
/* ---------- Abstände und Breiten ---------- */
--s2-breite:1200px;
--s2-rand:clamp(20px,4.5vw,48px); /* Seitenrand: Handy 20, Desktop 48 */
--s2-luft:clamp(56px,7.2vw,108px); /* oben UND unten je Sektion: zwischen zwei Sektionen ~112 (Handy) bis ~208 (Desktop) */
--s2-kopf-abstand:clamp(44px,5.4vw,80px); /* Kopf (Chip+Titel+Text) bis Inhalt */
--s2-spalt:clamp(16px,1.7vw,24px); /* Abstand zwischen Kacheln */
--s2-leiste:88px; /* Höhe der festen Leiste oben (für Bühnen) */
}
/* ---------- Grund: gilt nur unter dem Hero ---------- */
.s2{display:block;background:var(--s2-weiss);color:var(--s2-schwarz);font-family:var(--s2-sans);-webkit-font-smoothing:antialiased;
line-height:1.5;overflow-x:clip} /* clip (nicht hidden), damit position:sticky der Bühnen weiter wirkt */
.s2 *,.s2 *::before,.s2 *::after{box-sizing:border-box}
.s2 :where(h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote,dl,dd){margin:0;padding:0}
.s2 :where(ul,ol){list-style:none}
.s2 :where(img,svg,video){display:block;max-width:100%}
.s2 :where(a){color:inherit;text-decoration:none}
.s2 :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.s2 em{font-family:var(--s2-serif);font-style:italic;font-weight:400}
body.s2-vorschau{margin:0;background:#fff}
/* ---------- Sektion und Rahmen ---------- */
.s2-sek{position:relative;padding-block:var(--s2-luft);background:var(--s2-weiss)}
.s2-sek.ohne-oben{padding-top:0}.s2-sek.ohne-unten{padding-bottom:0}
.s2-rahmen{width:100%;max-width:calc(var(--s2-breite) + 2 * var(--s2-rand));margin-inline:auto;padding-inline:var(--s2-rand)}
.s2-rahmen.weit{max-width:calc(1360px + 2 * var(--s2-rand))}
.s2-rahmen.schmal{max-width:calc(880px + 2 * var(--s2-rand))}
.s2-rahmen.text{max-width:calc(720px + 2 * var(--s2-rand))}
/* ---------- Schrift-Skala ---------- */
.s2-h2{font-family:var(--s2-serif);font-weight:400;color:var(--s2-schwarz);font-size:clamp(38px,4.3vw + 4px,66px);line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
.s2-h2.gross{font-size:clamp(44px,5.6vw + 2px,86px);line-height:1}
.s2-h2.klein{font-size:clamp(32px,3.2vw + 4px,50px)}
.s2-h3{font-family:var(--s2-serif);font-weight:400;color:var(--s2-schwarz);font-size:clamp(25px,1.5vw + 6px,30px);line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
.s2-h4{font-family:var(--s2-sans);font-weight:600;color:var(--s2-schwarz);font-size:17px;line-height:1.35;letter-spacing:-.005em}
.s2-text{font-size:clamp(16.5px,.35vw + 15px,17.5px);line-height:1.55;color:var(--s2-grau);max-width:56ch;text-wrap:pretty}
.s2-text.gross{font-size:clamp(18px,.6vw + 15.5px,21px);line-height:1.5}
.s2-text b,.s2-text strong{color:var(--s2-schwarz);font-weight:600}
.s2-klein{font-size:15px;line-height:1.5;color:var(--s2-grau)}
.s2-fein{font-size:13px;line-height:1.45;color:var(--s2-grau-hell)}
/* Satz schwarz, läuft grau weiter (Vorbild Corekit/Finexa) */
.s2-satz{font-family:var(--s2-serif);font-weight:400;font-size:clamp(30px,3.3vw + 6px,54px);line-height:1.12;letter-spacing:-.012em;color:var(--s2-schwarz);text-wrap:pretty}
.s2-satz .grau{color:var(--s2-grau-satz)}
.s2-satz .s2-im-satz{display:inline-block;vertical-align:-.1em;height:.86em;width:auto;margin:0 .04em;border-radius:.24em}
.s2-satz .s2-kugel.s2-im-satz{--g:.86em;width:.86em;border-radius:50%}
/* ---------- Kopf: Chip + Titel + Text ---------- */
.s2-kopf{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin-bottom:var(--s2-kopf-abstand)}
.s2-kopf>.s2-chip{margin-bottom:24px}
.s2-kopf>.s2-text{margin-top:20px}
.s2-kopf>.s2-knopfreihe{margin-top:32px}
.s2-kopf .s2-h2{max-width:18ch}
.s2-kopf.mittig{align-items:center;text-align:center}
.s2-kopf.mittig .s2-h2{margin-inline:auto}
.s2-kopf.mittig .s2-text{margin-inline:auto}
.s2-kopf.ohne-abstand{margin-bottom:0}
/* Titel links, Text rechts (ab 900 px) */
.s2-kopf.geteilt{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);align-items:end}
.s2-kopf.geteilt>.s2-chip{grid-column:1 / -1}
.s2-kopf.geteilt>.s2-text{margin-top:0;padding-bottom:.35em}
/* ---------- Chip (App .chip, 1:1) ---------- */
.s2-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px;border-radius:var(--s2-r-rund);font-size:13px;font-weight:600;line-height:1;
color:var(--s2-tinte);background:#fff;box-shadow:0 0 0 1px var(--s2-linie);white-space:nowrap}
.s2-chip .s2-ic{width:15px;height:15px}
.s2-chip .punkt{width:7px;height:7px;border-radius:50%;background:var(--s2-schwarz);flex:none}
.s2-chip .nr{color:var(--s2-grau-hell);font-variant-numeric:tabular-nums}
.s2-chip.dunkel{background:var(--s2-schwarz);color:#fff;box-shadow:none}
/* ---------- Symbole ---------- */
.s2-ic{width:20px;height:20px;flex:none;color:currentColor}
/* ---------- Knöpfe (wie der schwarze Knopf in der Leiste, Ecke 14 px) ---------- */
.s2-knopfreihe{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.s2-knopf{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;
height:48px;padding:0 24px;border-radius:var(--s2-r-knopf);font:600 15px/1 var(--s2-sans);white-space:nowrap;cursor:pointer;
color:#fff;background:#141414;
box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 0 0 1px #141414,0 1px 2px rgba(20,20,20,.14),0 8px 18px -10px rgba(20,20,20,.45);
transition:transform 150ms var(--s2-kurve),box-shadow 300ms var(--s2-kurve)}
.s2-knopf::before{content:"";position:absolute;left:1px;right:1px;top:1px;height:50%;z-index:-1;pointer-events:none;
border-radius:calc(var(--s2-r-knopf) - 1px) calc(var(--s2-r-knopf) - 1px) 10px 10px / calc(var(--s2-r-knopf) - 1px) calc(var(--s2-r-knopf) - 1px) 8px 8px;
background:none}
.s2-knopf:hover{transform:translateY(-1px)}
.s2-knopf:active{transform:scale(.97)}
.s2-knopf .s2-ic{width:17px;height:17px;transition:transform 300ms var(--s2-kurve)}
.s2-knopf:hover .s2-ic{transform:translateX(3px)}
.s2-knopf.gross{height:54px;padding:0 28px;font-size:16px}
.s2-knopf.hell{color:var(--s2-schwarz);background:#fff;box-shadow:0 0 0 1px var(--s2-linie),0 1px 2px rgba(20,20,20,.04),0 6px 16px -10px rgba(20,20,20,.18)}
.s2-knopf.hell::before{display:none}
.s2-knopf:focus-visible,.s2-link-pfeil:focus-visible{outline:2px solid var(--s2-schwarz);outline-offset:3px}
/* Textlink mit Pfeil */
.s2-link-pfeil{display:inline-flex;align-items:center;gap:7px;font:600 15px/1.3 var(--s2-sans);color:var(--s2-schwarz);
text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;text-decoration-color:var(--s2-linie-stark);transition:text-decoration-color 200ms}
.s2-link-pfeil .s2-ic{width:16px;height:16px;transition:transform 300ms var(--s2-kurve)}
.s2-link-pfeil:hover{text-decoration-color:var(--s2-schwarz)}
.s2-link-pfeil:hover .s2-ic{transform:translateX(3px)}
/* ---------- Kachel: weiches Farbfeld, glatt (Punktraster am 17.10.2026 entfernt) ----------
Bild wählen: Standard App-Farbfeld 1; .f2 .f3 andere Farbfelder; .b1 bis .b8 verwischte Blumenbilder; .ruhig ohne Bild (hellgrau).
Stärke: Standard = zart (Weißschleier 40 %); .klar = mehr Farbe; .hauch = fast weiß. */
.s2-kachel{--s2-bild:url(/m/feld-1.jpg);--s2-schleier:.4;--s2-punkt:rgba(255,255,255,.62);
position:relative;isolation:isolate;overflow:hidden;border-radius:var(--s2-r-kachel);background:#f3e7ee;min-height:240px}
.s2-kachel::before{content:"";position:absolute;inset:-14%;z-index:-2;pointer-events:none;
background:var(--s2-bild) var(--s2-bx,50%) var(--s2-by,50%)/cover no-repeat;transform:scale(1.02);
animation:s2-drift 26s ease-in-out infinite alternate;animation-play-state:paused}
.s2-kachel::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(rgba(255,255,255,var(--s2-schleier)),rgba(255,255,255,var(--s2-schleier)))}
/* 17.10.2026 (Gründer): Punktraster auf den Farbflächen entfernt, die Fläche bleibt glatt. --s2-punkt wird nicht mehr gezeichnet. */
.s2-kachel.s2-lebt::before{animation-play-state:running}
@keyframes s2-drift{0%{transform:translate3d(-3%,-2%,0) scale(1.04)}100%{transform:translate3d(3%,2.5%,0) scale(1.1)}}
.s2-kachel.f2{--s2-bild:url(/m/feld-2.jpg)}.s2-kachel.f3{--s2-bild:url(/m/feld-3.jpg)}
.s2-kachel.b1{--s2-bild:url(/bilder/bg/blume-1.jpg)}.s2-kachel.b2{--s2-bild:url(/bilder/bg/blume-2.jpg)}
.s2-kachel.b3{--s2-bild:url(/bilder/bg/blume-3.jpg)}.s2-kachel.b4{--s2-bild:url(/bilder/bg/blume-4.jpg)}
.s2-kachel.b5{--s2-bild:url(/bilder/bg/blume-5.jpg)}.s2-kachel.b6{--s2-bild:url(/bilder/bg/blume-6.jpg)}
.s2-kachel.b7{--s2-bild:url(/bilder/bg/blume-7.jpg)}.s2-kachel.b8{--s2-bild:url(/bilder/bg/blume-8.jpg)}
.s2-kachel.klar{--s2-schleier:.12}
.s2-kachel.hauch{--s2-schleier:.62}
.s2-kachel.ruhig{--s2-punkt:rgba(20,20,20,.075);--s2-schleier:0;background:var(--s2-flaeche-ruhig)}
.s2-kachel.ruhig::before{display:none}
.s2-kachel.ohne-punkte{--s2-punkt:transparent}
/* Inhalt der Kachel: Mitte, mit Luft. Seitenformat per .quer (16/10), .quadrat, .hoch (4/5) oder eigener min-height */
.s2-kachel-mitte{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(20px,3vw,40px)}
.s2-kachel.quer{aspect-ratio:16/10;min-height:0}.s2-kachel.quadrat{aspect-ratio:1/1;min-height:0}
.s2-kachel.hoch{aspect-ratio:4/5;min-height:0}.s2-kachel.breit{aspect-ratio:21/9;min-height:0}
/* ---------- Spalte unter einer Kachel: Kachel, dann Titel, dann Text (Vorbild Corekit/Cansaas) ---------- */
.s2-spalte{display:flex;flex-direction:column}
.s2-spalte>.s2-kachel,.s2-spalte>.s2-foto{margin-bottom:28px}
.s2-spalte>.s2-text,.s2-spalte>.s2-klein{margin-top:10px;max-width:40ch}
/* ---------- Karte: weißes SmartChat-Einzelteil, schwebt ---------- */
.s2-karte{position:relative;background:#fff;border-radius:var(--s2-r-karte);padding:16px 18px;box-shadow:var(--s2-schatten-schwebe);
color:var(--s2-schwarz);font-size:14px;line-height:1.45;text-align:left}
.s2-karte.tief{box-shadow:var(--s2-schatten-tief)}
.s2-karte.ruhig{box-shadow:var(--s2-schatten-ruhig)}
.s2-karte.pille{border-radius:var(--s2-r-rund);padding:10px 18px 10px 10px;display:inline-flex;align-items:center;gap:12px;background:#fff}
.s2-karte-kopf{display:flex;align-items:center;gap:12px}
.s2-karte-kopf>div{min-width:0}
.s2-karte-titel{display:block;font-size:14.5px;font-weight:600;line-height:19px;color:var(--s2-schwarz)}
.s2-karte-unter{display:block;font-size:13px;line-height:18px;color:var(--s2-grau);margin-top:1px}
.s2-karte-zeit{margin-left:auto;align-self:flex-start;margin-top:2px;font-size:11.5px;color:var(--s2-grau-hell);white-space:nowrap}
.s2-karte-liste{margin-top:12px;border-top:1px solid var(--s2-linie)}
.s2-karte-liste>li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--s2-linie);font-size:13.5px;color:var(--s2-tinte)}
.s2-karte-liste>li:last-child{border-bottom:0;padding-bottom:0}
.s2-karte-liste .rechts{margin-left:auto;color:var(--s2-grau-hell);font-size:12.5px}
.s2-skelett{display:block;height:9px;border-radius:6px;background:var(--s2-flaeche)}
.s2-skelett.kurz{width:46%}.s2-skelett.mittel{width:72%}
/* Status-Pille (App .pl) */
.s2-status{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:var(--s2-r-rund);font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;
background:#f1f1f0;color:var(--s2-tinte)}
.s2-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.s2-status.ok{background:var(--s2-ok-grund);color:var(--s2-ok-text)}
.s2-status.warte{background:var(--s2-warte-grund);color:var(--s2-warte-text)}
.s2-status.schwarz{background:var(--s2-schwarz);color:#fff}
/* Symbol-Kachel (App .tile): kleines Farbfeld mit weißem Symbol */
.s2-symbol{position:relative;isolation:isolate;overflow:hidden;width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;color:#fff;
background:#f1f1f0;box-shadow:0 0 0 1px rgba(255,255,255,.5) inset,0 6px 14px -8px rgba(20,20,20,.35)}
.s2-symbol .s2-ic{width:22px;height:22px}
.s2-symbol.hell{background:#fff;color:var(--s2-schwarz);box-shadow:0 0 0 1px var(--s2-linie),0 4px 10px -6px rgba(20,20,20,.18)}
.s2-symbol.schwarz{background:#141414;box-shadow:0 1px 0 rgba(255,255,255,.12) inset}
.s2-symbol.klein{width:34px;height:34px;border-radius:10px}.s2-symbol.klein .s2-ic{width:17px;height:17px}
.s2-symbol.rund{border-radius:50%}
/* Schwebe-Position: in .s2-kachel, .s2-foto oder .s2-buehne; Lage per style="left:..;top:.." */
.s2-schwebe{position:absolute;z-index:2}
.s2-schweben{animation:s2-schweben 7s ease-in-out infinite}
.s2-schweben.spaet{animation-delay:-3.5s}
@keyframes s2-schweben{0%,100%{translate:0 0}50%{translate:0 -7px}}
/* ---------- Abzeichen ---------- */
/* a) Pille (Onboarding .users.proofb) */
.s2-abzeichen{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px 0 12px;border-radius:var(--s2-r-rund);background:#fff;
box-shadow:0 0 0 1px #e4e4e2,0 8px 20px -14px rgba(20,20,20,.22);font-size:14px;line-height:1;color:var(--s2-grau);white-space:nowrap}
.s2-abzeichen b{color:var(--s2-schwarz);font-weight:600}
.s2-abzeichen .s2-ic{width:18px;height:18px;color:var(--s2-schwarz)}
.s2-abzeichen img{height:15px;width:auto;flex:none}
.s2-abzeichen .flagge{width:18px;height:12px;border-radius:2px;flex:none;background:#e4e4e2}
.s2-abzeichen.gross{height:48px;padding:0 20px 0 14px;font-size:15.5px;gap:11px}
.s2-abzeichen.gross .s2-ic{width:20px;height:20px}.s2-abzeichen.gross img{height:17px}
/* b) Siegel: rund, geprägt, leicht räumlich (Vorbild SOC2-Siegel). Bogentext unten per SVG textPath (siehe STIL.md) */
.s2-siegel{--g:148px;position:relative;width:var(--g);height:var(--g);flex:none;border-radius:50%;display:grid;place-items:center;text-align:center;
background:#fff;
box-shadow:0 0 0 1px #e4e4e2,0 1px 0 #fff inset,0 -10px 18px -8px rgba(20,20,20,.07) inset,0 2px 4px rgba(20,20,20,.05),0 22px 36px -20px rgba(20,20,20,.32)}
.s2-siegel::before{content:"";position:absolute;inset:9%;border-radius:50%;pointer-events:none;
box-shadow:0 0 0 1px rgba(20,20,20,.06),0 1px 0 rgba(255,255,255,.95),0 2px 5px rgba(20,20,20,.06) inset}
.s2-siegel::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
background:none}
.s2-siegel-mitte{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:-13%}
.s2-siegel-mitte .s2-ic{width:calc(var(--g) * .15);height:calc(var(--g) * .15);color:#6e6e6b}
.s2-siegel-mitte b{font-size:calc(var(--g) * .098);font-weight:600;letter-spacing:-.005em;color:#6e6e6b;line-height:1.12}
.s2-siegel-bogen{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.s2-siegel-bogen text{font:600 7.4px var(--s2-sans);letter-spacing:.24em;fill:#6e6e6b;text-transform:uppercase}
/* ---------- Logo-Kugel (SmartChat-Zeichen, vektor-genau wie im Ladeschleier) — sparsam, als Akzent ---------- */
.s2-kugel{--g:64px;position:relative;display:inline-block;vertical-align:middle;width:var(--g);height:var(--g);flex:none;border-radius:50%;overflow:hidden;
background:radial-gradient(30% 30% at 24% 12%,#F9D8EE 0%,rgba(249,216,238,0) 100%),
radial-gradient(42% 42% at 30% 92%,#F6D870 0%,rgba(246,216,112,0) 100%),
radial-gradient(50% 50% at 66% 86%,#F59A2C 0%,rgba(245,154,44,0) 100%),
radial-gradient(46% 46% at 10% 60%,#D8A6EA 0%,rgba(216,166,234,0) 100%),#F08EC6;
box-shadow:0 0 0 calc(var(--g) * .008) rgba(255,255,255,.55) inset,0 calc(var(--g) * .16) calc(var(--g) * .36) calc(var(--g) * -.12) rgba(20,20,20,.30)}
.s2-kugel::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23fff' transform='translate(50 50) scale(.48) translate(-50 -50)' d='M50 16C52.5 37 63 47.5 84 50C63 52.5 52.5 63 50 84C47.5 63 37 52.5 16 50C37 47.5 47.5 37 50 16Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.s2-kugel.glanz::before{content:"";position:absolute;inset:0;z-index:1;border-radius:50%;pointer-events:none;
background:radial-gradient(70% 46% at 32% 8%,rgba(255,255,255,.55),transparent 60%)}
/* ---------- Menschenfoto: groß, gerundet, Platz für schwebende Karten (Karten dürfen über den Rand ragen) ---------- */
.s2-foto{position:relative;display:block}
.s2-foto-bild{position:relative;overflow:hidden;border-radius:var(--s2-r-kachel);aspect-ratio:var(--s2-format,4/5);background:#f1f1f0}
.s2-foto-bild img{width:100%;height:100%;object-fit:cover;object-position:var(--s2-fx,50%) var(--s2-fy,40%);transform:scale(1.001)}
.s2-foto.quer{--s2-format:4/3}.s2-foto.breit{--s2-format:16/10}.s2-foto.quadrat{--s2-format:1/1}.s2-foto.hoch{--s2-format:3/4}
/* weicher Zoom beim Erscheinen */
html.s2-js:not(.s2-statisch) .s2-foto[data-rv] .s2-foto-bild img{transform:scale(1.08);transition:transform 1600ms var(--s2-kurve)}
html.s2-js .s2-foto[data-rv].s2-da .s2-foto-bild img{transform:scale(1.001)}
/* ---------- Gesichter-Stapel ---------- */
.s2-avatare{display:inline-flex;align-items:center;gap:12px;font-size:14px;color:var(--s2-grau);line-height:1.3}
.s2-avatare b{color:var(--s2-schwarz);font-weight:600}
.s2-avatare-bilder{display:flex;flex:none}
.s2-avatare-bilder img{width:var(--s2-av,34px);height:var(--s2-av,34px);border-radius:50%;object-fit:cover;object-position:50% 28%;margin-left:calc(var(--s2-av,34px) * -.27);
border:2px solid #fff;background:#f1f1f0;box-shadow:0 2px 6px -1px rgba(20,20,20,.22)}
.s2-avatare-bilder img:first-child{margin-left:0}
.s2-avatare.pille{height:44px;padding:0 16px 0 6px;border-radius:var(--s2-r-rund);background:#fff;box-shadow:0 0 0 1px #e4e4e2,0 8px 20px -14px rgba(20,20,20,.22)}
.s2-avatare.pille .s2-avatare-bilder{--s2-av:32px}
/* ---------- Text + Bild zweispaltig ---------- */
.s2-zeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,112px);align-items:center}
.s2-zeile.umgekehrt>:first-child{order:2}
.s2-zeile.text-schmal{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.s2-zeile-text{display:flex;flex-direction:column;align-items:flex-start}
.s2-zeile-text>.s2-chip{margin-bottom:24px}
.s2-zeile-text>.s2-text{margin-top:20px}
.s2-zeile-text>.s2-haken-liste{margin-top:28px}
.s2-zeile-text>.s2-knopfreihe{margin-top:36px}
/* ---------- Raster ---------- */
.s2-raster{display:grid;gap:var(--s2-spalt);grid-template-columns:repeat(var(--s2-sp,3),minmax(0,1fr))}
.s2-raster.zwei{--s2-sp:2}.s2-raster.drei{--s2-sp:3}.s2-raster.vier{--s2-sp:4}
.s2-raster.luftig{column-gap:clamp(20px,2.4vw,36px);row-gap:clamp(48px,5vw,72px)}
/* Bento: 12 Spalten */
.s2-bento{display:grid;gap:var(--s2-spalt);grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(var(--s2-bento-zeile,260px),auto)}
.s2-bento>*{grid-column:span 4;min-height:0}
.s2-bento>.s2-b3{grid-column:span 3}.s2-bento>.s2-b4{grid-column:span 4}.s2-bento>.s2-b5{grid-column:span 5}.s2-bento>.s2-b6{grid-column:span 6}
.s2-bento>.s2-b7{grid-column:span 7}.s2-bento>.s2-b8{grid-column:span 8}.s2-bento>.s2-b12{grid-column:span 12}
.s2-bento>.s2-hoch{grid-row:span 2}
.s2-bento .s2-kachel,.s2-bento .s2-foto-bild{min-height:0;height:100%}
.s2-bento .s2-foto{height:100%}.s2-bento .s2-foto-bild{aspect-ratio:auto}
/* Bento-Fläche mit Text (weiß mit Ring, Titel oben, Inhalt unten) */
.s2-feld{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(22px,2.4vw,32px);border-radius:var(--s2-r-kachel);
background:#fff;box-shadow:var(--s2-schatten-ruhig);overflow:hidden}
/* ---------- Haken-Liste ---------- */
.s2-haken-liste{display:flex;flex-direction:column;gap:14px}
.s2-haken-liste>li{position:relative;padding-left:34px;font-size:16.5px;line-height:1.5;color:var(--s2-grau)}
.s2-haken-liste>li b{color:var(--s2-schwarz);font-weight:600}
.s2-haken-liste>li::before{content:"";position:absolute;left:0;top:.18em;width:22px;height:22px;border-radius:50%;
background:var(--s2-schwarz) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.4l3.6 3.6 7.4-8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px 16px no-repeat}
/* ---------- Große Zahl ---------- */
.s2-zahl{font-family:var(--s2-serif);font-weight:400;font-size:clamp(56px,5.4vw + 6px,92px);line-height:.95;letter-spacing:-.02em;color:var(--s2-schwarz);font-variant-numeric:tabular-nums;white-space:nowrap}
.s2-zahl-text{margin-top:12px;font-size:15px;line-height:1.45;color:var(--s2-grau);max-width:30ch}
.s2-zahlen{display:grid;grid-template-columns:repeat(var(--s2-sp,3),minmax(0,1fr));border-top:1px solid var(--s2-linie)}
.s2-zahlen>*{padding:28px 28px 0 0}
.s2-zahlen>*+*{padding-left:28px;border-left:1px solid var(--s2-linie)}
/* ---------- Trenner ---------- */
.s2-trenner{height:1px;border:0;background:var(--s2-linie);margin:0}
/* ---------- Mauszeiger (animiert, wie im Vorbild) ----------
Weg: --s2-mx0/--s2-my0 (Start) und --s2-mx1/--s2-my1 (Ziel, dort klickt er). Dauer: --s2-mdauer. Läuft nur im Bild. */
.s2-maus{position:absolute;left:0;top:0;z-index:4;pointer-events:none;display:flex;align-items:flex-start;gap:2px;
transform:translate3d(var(--s2-mx0,0px),var(--s2-my0,0px),0);animation:s2-maus var(--s2-mdauer,6s) var(--s2-kurve-weich) infinite;animation-play-state:paused}
.s2-maus.s2-lebt{animation-play-state:running}
.s2-maus svg{width:22px;height:22px;flex:none;filter:drop-shadow(0 2px 3px rgba(20,20,20,.28));transform-origin:20% 15%;animation:s2-klick var(--s2-mdauer,6s) linear infinite;animation-play-state:inherit}
.s2-maus.s2-lebt svg{animation-play-state:running}
.s2-maus-name{margin-top:16px;padding:5px 10px;border-radius:var(--s2-r-rund);background:var(--s2-schwarz);color:#fff;font:600 12.5px/1 var(--s2-sans);white-space:nowrap;
box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 6px 14px -6px rgba(20,20,20,.5)}
@keyframes s2-maus{0%,10%{transform:translate3d(var(--s2-mx0,0px),var(--s2-my0,0px),0)}42%,78%{transform:translate3d(var(--s2-mx1,0px),var(--s2-my1,0px),0)}100%{transform:translate3d(var(--s2-mx0,0px),var(--s2-my0,0px),0)}}
@keyframes s2-klick{0%,46%{transform:scale(1)}49%{transform:scale(.82)}53%,100%{transform:scale(1)}}
/* ---------- Laufband (Logos, Integrationen). basis.js verdoppelt den Inhalt, läuft nur im Bild ---------- */
.s2-band{--s2-band-luecke:clamp(40px,5vw,72px);position:relative;overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.s2-band-spur{display:flex;align-items:center;width:max-content;animation:s2-band var(--s2-band-dauer,46s) linear infinite;animation-play-state:paused}
.s2-band-spur>*{flex:none;margin-right:var(--s2-band-luecke)}
.s2-band.s2-lebt .s2-band-spur{animation-play-state:running}
.s2-band.rueckwaerts .s2-band-spur{animation-direction:reverse}
@media (hover:hover){.s2-band:hover .s2-band-spur{animation-play-state:paused}}
@keyframes s2-band{to{transform:translate3d(-50%,0,0)}}
/* Firmenlogo (erfundene Namen, schwarz): Zeichen + Wort */
.s2-firma{display:inline-flex;align-items:center;gap:9px;height:44px;color:var(--s2-schwarz);opacity:.86;white-space:nowrap;font-size:21px;line-height:1}
.s2-firma svg{width:26px;height:26px;flex:none}
/* ---------- WhatsApp im echten Look (App-Vorschau .wap/.wab, 1:1) ---------- */
.s2-wa-handy{--s2-hb:300px;position:relative;width:var(--s2-hb);aspect-ratio:300/616;flex:none;border-radius:calc(var(--s2-hb) * .15);padding:calc(var(--s2-hb) * .033);
background:linear-gradient(180deg,#fdfdfe,#f3f3f6);box-shadow:0 0 0 1px #e3e3e8,0 1px 0 #fff inset,var(--s2-schatten-tief);font-size:14px}
.s2-wa-schirm{position:relative;height:100%;border-radius:calc(var(--s2-hb) * .12);overflow:hidden;background:var(--s2-wa-grund);display:flex;flex-direction:column;
box-shadow:0 0 0 1px rgba(20,20,20,.06)}
.s2-wa-schirm::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.5),transparent 40%);pointer-events:none} /* App .wap::before */
.s2-wa-insel{position:absolute;z-index:3;top:9px;left:50%;width:31%;height:22px;margin-left:-15.5%;border-radius:99px;background:#0d0d10}
.s2-wa-status{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;height:40px;padding:0 22px 0 26px;background:#fff;font:600 13px/1 var(--s2-sans);color:var(--s2-schwarz)}
.s2-wa-status i{display:block;width:44px;height:10px;background:radial-gradient(circle at 4px 5px,#0d0d10 2.6px,transparent 3px) 0 0/9px 10px repeat-x;opacity:.85}
.s2-wa-kopf{position:relative;z-index:2;display:flex;align-items:center;gap:9px;padding:6px 12px 10px 8px;background:#fff;border-bottom:1px solid #ececf0}
.s2-wa-kopf .s2-ic{width:20px;height:20px;color:var(--s2-wa-knopf)}
.s2-wa-kopf .s2-kugel,.s2-wa-kopf img{--g:34px;width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.s2-wa-kopf b{display:block;font-size:14px;font-weight:600;line-height:17px;color:var(--s2-schwarz)}
.s2-wa-kopf small{display:block;font-size:11.5px;line-height:15px;color:var(--s2-wa-zeit)}
.s2-wa-verlauf{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:12px 10px 14px;overflow:hidden}
.s2-wa-tag{align-self:center;margin-bottom:6px;padding:3px 12px;border-radius:99px;background:rgba(255,255,255,.78);font-size:11.5px;font-weight:600;color:var(--s2-grau);box-shadow:0 1px 1px rgba(0,0,0,.08)}
.s2-wa-blase{position:relative;align-self:flex-start;max-width:88%;background:#fff;border-radius:6px 16px 16px 16px;padding:5px;box-shadow:0 1px 1px rgba(0,0,0,.12);
font-size:14px;line-height:19px;color:var(--s2-schwarz);text-align:left}
.s2-wa-blase.aus{align-self:flex-end;background:var(--s2-wa-aus);border-radius:16px 6px 16px 16px}
.s2-wa-blase.frei{box-shadow:var(--s2-schatten-schwebe)} /* einzelne Blase frei auf einer Kachel */
.s2-wa-text{padding:4px 8px 2px;white-space:pre-line}
.s2-wa-text b{font-weight:700}
.s2-wa-fuss{display:flex;align-items:center;justify-content:flex-end;gap:3px;padding:0 8px 3px;font-size:11px;line-height:14px;color:var(--s2-wa-zeit)}
.s2-wa-fuss .s2-ic{width:16px;height:16px;color:var(--s2-wa-gelesen)}
.s2-wa-fuss .s2-ic.grau{color:var(--s2-wa-zeit)}
.s2-wa-hinweis{padding:2px 8px 4px;font-size:12px;line-height:16px;color:var(--s2-wa-zeit)}
.s2-wa-bild{height:var(--s2-wa-bildh,140px);border-radius:12px 12px 4px 4px;margin-bottom:4px;overflow:hidden;background:#f4e3e8}
.s2-wa-bild img{width:100%;height:100%;object-fit:cover}
.s2-wa-knopf{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;margin-top:4px;border-top:1px solid var(--s2-wa-grund);color:var(--s2-wa-knopf);font-weight:600;font-size:14px;line-height:1.2}
.s2-wa-knopf .s2-ic{width:16px;height:16px}
.s2-wa-tippt{align-self:flex-start;display:inline-flex;gap:4px;padding:12px 14px;background:#fff;border-radius:6px 16px 16px 16px;box-shadow:0 1px 1px rgba(0,0,0,.12)}
.s2-wa-tippt i{width:7px;height:7px;border-radius:50%;background:#b4b5bc;animation:s2-tippt 1.2s ease-in-out infinite}
.s2-wa-tippt i:nth-child(2){animation-delay:.15s}.s2-wa-tippt i:nth-child(3){animation-delay:.3s}
@keyframes s2-tippt{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-4px);opacity:1}}
.s2-wa-eingabe{position:relative;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 10px 12px;background:transparent}
.s2-wa-eingabe span{flex:1;height:38px;border-radius:99px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.08);display:flex;align-items:center;padding:0 14px;font-size:13.5px;color:#9a9ba3}
.s2-wa-eingabe i{width:38px;height:38px;border-radius:50%;background:#1f9d63;flex:none;display:grid;place-items:center;color:#fff}
.s2-wa-eingabe i .s2-ic{width:18px;height:18px}
/* ---------- 3D: leichte Kippung (data-kipp bewegt sie mit der Maus, nur Desktop) ---------- */
.s2-raum{perspective:1600px;perspective-origin:50% 40%}
.s2-kipp{transform:rotateX(var(--s2-kx,0deg)) rotateY(var(--s2-ky,0deg));transform-style:preserve-3d;transition:transform 900ms var(--s2-kurve);will-change:transform}
.s2-kipp.schraeg{--s2-kx0:9deg;--s2-ky0:-13deg;--s2-kx:9deg;--s2-ky:-13deg}
.s2-kipp.leicht{--s2-kx0:4deg;--s2-ky0:-6deg;--s2-kx:4deg;--s2-ky:-6deg}
.s2-tiefe-1{transform:translateZ(24px)}.s2-tiefe-2{transform:translateZ(48px)}.s2-tiefe-3{transform:translateZ(80px)}
/* ---------- Scroll-Bühne (nur Sektionen vier, ai, newsletter) ----------
basis.js setzt --p (0 bis 1) auf Bühne und Sektion, data-schritt (0, 1, 2 …) auf die Sektion und meldet das Ereignis "s2-schritt". */
.s2-buehne{--p:0;position:relative;height:calc(100vh + var(--s2-schritte,3) * var(--s2-weg,80vh))}
.s2-buehne-innen{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;padding-top:var(--s2-leiste)}
.s2-buehne-innen>.s2-rahmen{width:100%}
.s2-fortschritt{height:2px;border-radius:2px;background:var(--s2-linie);overflow:hidden}
.s2-fortschritt i{display:block;height:100%;background:var(--s2-schwarz);transform-origin:0 50%;transform:scaleX(var(--p,0))}
/* ---------- Erscheinen beim Scrollen (data-rv) ----------
data-rv weich hoch data-rv="links" / "rechts" seitlich data-rv="zoom" leicht größer werden
data-rv-gruppe Kinder kommen nacheinander (90 ms Abstand) Verzögerung einzeln: style="--s2-v:200ms" */
html.s2-js:not(.s2-statisch) [data-rv]{opacity:0;transform:translate3d(0,28px,0);
transition:opacity var(--s2-dauer) var(--s2-kurve),transform calc(var(--s2-dauer) + 200ms) var(--s2-kurve);transition-delay:var(--s2-v,0ms)}
html.s2-js:not(.s2-statisch) [data-rv="links"]{transform:translate3d(-40px,0,0)}
html.s2-js:not(.s2-statisch) [data-rv="rechts"]{transform:translate3d(40px,0,0)}
html.s2-js:not(.s2-statisch) [data-rv="zoom"]{transform:scale(.94)}
html.s2-js:not(.s2-statisch) [data-rv].s2-da{opacity:1;transform:none}
html.s2-js:not(.s2-statisch) [data-rv-gruppe]>*{opacity:0;transform:translate3d(0,24px,0);
transition:opacity var(--s2-dauer) var(--s2-kurve),transform calc(var(--s2-dauer) + 200ms) var(--s2-kurve);transition-delay:calc(var(--s2-i,0) * 90ms + var(--s2-v,0ms))}
html.s2-js:not(.s2-statisch) [data-rv-gruppe].s2-da>*{opacity:1;transform:none}
/* ---------- Belege (unsichtbar; sichtbar mit ?hinweise=1) ---------- */
.s2-beleg{display:none}
html.s2-hinweise .s2-beleg{display:inline-flex;align-items:center;gap:6px;margin:4px;padding:5px 10px;border-radius:999px;background:#f1f1f0;color:#dc2626;
font:600 11px/1.2 var(--s2-sans);letter-spacing:.01em;vertical-align:middle;text-shadow:none;white-space:normal;text-align:left;position:relative;z-index:6}
html.s2-hinweise .s2-beleg::before{content:"Beleg";padding:2px 6px;border-radius:99px;background:#dc2626;color:#fff;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase}
/* ---------- Endzustand für Bildschirmfotos (?statisch=1) und reduzierte Bewegung ---------- */
html.s2-statisch .s2 *,html.s2-statisch .s2 *::before,html.s2-statisch .s2 *::after{transition:none!important}
html.s2-statisch .s2-kachel::before,html.s2-statisch .s2-band-spur,html.s2-statisch .s2-schweben,html.s2-statisch .s2-wa-tippt i,html.s2-statisch .s2-maus svg{animation:none!important}
html.s2-statisch .s2-maus{animation:none!important;transform:translate3d(var(--s2-mx1,0px),var(--s2-my1,0px),0)}
html.s2-statisch .s2-buehne{height:auto;--p:1}
html.s2-statisch .s2-buehne-innen{position:relative;height:auto;overflow:visible;padding-top:0}
html.s2-statisch .s2-kipp{transition:none}
/* ---------- Tablet ---------- */
@media (max-width:1100px){
.s2-raster.vier{--s2-sp:2}
.s2-bento>.s2-b3{grid-column:span 6}
}
@media (max-width:900px){
:root{--s2-r-kachel:24px;--s2-leiste:76px}
.s2-zeile,.s2-zeile.text-schmal{grid-template-columns:minmax(0,1fr);gap:48px}
.s2-zeile.umgekehrt>:first-child{order:0}
.s2-raster.drei{--s2-sp:1}.s2-raster.zwei{--s2-sp:1}
.s2-raster.luftig{row-gap:56px}
.s2-kopf.geteilt{grid-template-columns:minmax(0,1fr)}
.s2-kopf.geteilt>.s2-text{margin-top:20px;padding-bottom:0}
.s2-bento{grid-template-columns:repeat(6,minmax(0,1fr));--s2-bento-zeile:220px}
.s2-bento>*,.s2-bento>.s2-b3,.s2-bento>.s2-b4,.s2-bento>.s2-b5,.s2-bento>.s2-b6,.s2-bento>.s2-b7,.s2-bento>.s2-b8,.s2-bento>.s2-b12{grid-column:span 6}
.s2-bento>.s2-hoch{grid-row:span 1}
.s2-zahlen{grid-template-columns:minmax(0,1fr)}
.s2-zahlen>*,.s2-zahlen>*+*{padding:24px 0;border-left:0;border-bottom:1px solid var(--s2-linie)}
}
/* ---------- Handy (390 px) ---------- */
@media (max-width:600px){
.s2-raster.vier{--s2-sp:1}
.s2-bento>.s2-halb{grid-column:span 3}
.s2-kopf>.s2-chip,.s2-zeile-text>.s2-chip{margin-bottom:20px}
.s2-knopfreihe{gap:10px}
.s2-knopf{height:48px;padding:0 22px}
.s2-knopf.gross{height:52px;padding:0 24px}
.s2-kachel{min-height:220px}
.s2-kachel.breit{aspect-ratio:4/3}
.s2-wa-handy{--s2-hb:min(282px,76vw)}
.s2-haken-liste>li{font-size:16px}
.s2-abzeichen{height:38px;font-size:13.5px}
.s2-siegel{--g:128px}
.s2-firma{font-size:19px}
.s2-kipp.schraeg{--s2-kx0:6deg;--s2-ky0:-8deg;--s2-kx:6deg;--s2-ky:-8deg}
}
@media (prefers-reduced-motion:reduce){
.s2-kachel::before,.s2-band-spur,.s2-schweben,.s2-maus,.s2-maus svg,.s2-wa-tippt i{animation:none!important}
}
/* ===== 15.10.2026 (Gründer): Version 2 = alles ohne Serifen (?v=2). Schalter setzt html[data-schrift="sans"]. Logo bleibt wie es ist. ===== */
html[data-schrift="sans"]{--serif:var(--sans);--s2-serif:var(--s2-sans)}
html[data-schrift="sans"] em,html[data-schrift="sans"] .s2 em{font-style:normal}
html[data-schrift="sans"] h1{font-weight:500;letter-spacing:-.035em}
html[data-schrift="sans"] h2,html[data-schrift="sans"] .s2-h2,html[data-schrift="sans"] .s2-h3,html[data-schrift="sans"] .s2-satz,
html[data-schrift="sans"] .s2-zahl,html[data-schrift="sans"] .s2-gs-satz{font-weight:600;letter-spacing:-.035em}
/* ===== 18.10.2026 HANDY (Gründer: "Handy komplett überarbeiten, flüssige Animationen wie am Desktop, nur fürs Handy gedacht").
Gilt nur bis 760 px, nur mit Bewegung (nicht im Endzustand ?statisch=1 und nicht bei reduzierter Bewegung). Desktop unverändert.
Wischbare Reihe: S2.wischReihe(el) setzt .s2-wisch, darunter Punkte (.s2-wisch-punkte). Ganze Breite, Karte rastet am linken Rand ein. ===== */
.s2-wisch-punkte{display:none}
@media (max-width:760px){
html.s2-js:not(.s2-statisch) .s2-wisch{display:flex!important;flex-wrap:nowrap;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;scroll-padding-inline:var(--s2-rand);padding-inline:var(--s2-rand);margin-inline:calc(-1 * var(--s2-rand));
scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
html.s2-js:not(.s2-statisch) .s2-wisch::-webkit-scrollbar{display:none}
html.s2-js:not(.s2-statisch) .s2-wisch>*{flex:0 0 var(--s2-wisch-b,84%);min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
html.s2-js:not(.s2-statisch) .s2-wisch::after{content:"";flex:0 0 1px}
html.s2-js:not(.s2-statisch) .s2-wisch+.s2-wisch-punkte{display:flex;justify-content:center;gap:2px;margin-top:14px}
.s2-wisch-punkte button{position:relative;width:26px;height:28px;padding:0;border:0;background:none;cursor:pointer}
.s2-wisch-punkte button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:99px;background:var(--s2-linie-stark);
transform:scaleX(1);transition:transform 450ms var(--s2-kurve),background-color 300ms var(--s2-kurve)}
.s2-wisch-punkte button.an::before{background:var(--s2-schwarz);transform:scaleX(2.6)}
}
/* 18.10.2026 Handy-Bugrunde 2 (Gründer: Schrift unter 14 px ist am Handy zu klein): Sektions-Marken (Chips) am Handy 14 px statt 13 px. Nur bis 760 px. */
@media (max-width:760px){.s2-chip{font-size:14px}}
/* ===== 02.11.2026 b (Gründer): ALLE TEXTE der Startseite mittig. Ausnahmen bleiben links: WhatsApp-Blasen, App-Bilder, Tabellen, Fuß. ===== */
#s2 .s2-sek .s2-kopf{align-items:center;text-align:center}
#s2 .s2-sek .s2-kopf .s2-h2,#s2 .s2-sek .s2-kopf .s2-text{margin-inline:auto}
#s2 .s2-sek .s2-h2,#s2 .s2-sek .s2-h3,#s2 .s2-sek .s2-h4,#s2 .s2-sek .s2-text,#s2 .s2-sek .s2-klein,#s2 .s2-sek .s2-fein,#s2 .s2-sek .s2-satz,
#s2 .s2-sek .s2-vl-label,#s2 .s2-sek .s2-vl-label *,#s2 .s2-sek .s2-news-titel,#s2 .s2-sek .s2-news-neu,#s2 .s2-sek .s2-link-pfeil,#s2 .s2-sek .s2-faq-q,#s2 .s2-sek .s2-faq-a,#s2 .s2-sek .s2-faq-a p{text-align:center}
#s2 .s2-sek .s2-link-pfeil,#s2 .s2-sek .s2-chip{margin-inline:auto}
#s2 .s2-sek .s2-knopfreihe{justify-content:center}
/* Chat-Blasen und App-Bilder bleiben wie sie sind */
#s2 .s2-vl-karte.text,#s2 .s2-vl-karte.text *,#s2 .s2-wa-text,#s2 .s2-wa-fuss,#s2 .s2-wa-knopf,#s2 .s2-ab-blase,#s2 .s2-ab-blase *,#s2 .s2-ds-pdf-fuss{text-align:left}
/* ===== 02.11.2026 b (Gründer): Mobil nur ruhige Animationen: Einblenden von unten mit kurzer Verzögerung, keine Pinning-/Overlay-Effekte ===== */
@media (max-width:760px){
html.s2-js:not(.s2-statisch) .s2-fe-handywort{will-change:auto}
html.s2-js:not(.s2-statisch) .s2-sek .s2-h2,html.s2-js:not(.s2-statisch) .s2-sek .s2-text,html.s2-js:not(.s2-statisch) .s2-sek .s2-vl-label{animation:s2MobilHoch .8s cubic-bezier(.22,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% entry 45%}
@keyframes s2MobilHoch{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
html.s2-js .s2-sek .s2-h2,html.s2-js .s2-sek .s2-text,html.s2-js .s2-sek .s2-vl-label{animation:none!important;opacity:1!important;transform:none!important}
}
/* 02.11.2026 c (Gründer): Panel in fenster wieder linksbündig */
#s2 .s2-fenster .s2-fe-links,#s2 .s2-fenster .s2-fe-text,#s2 .s2-fenster .s2-fe-titel,#s2 .s2-fenster .s2-fe-punkte,#s2 .s2-fenster .s2-fe-punkte *{text-align:left}
/* ===== 02.11.2026 f (Gründer): HANDY komplett überarbeitet. Nur bis 760 px (html.s2-statisch + s2-mob setzt basis.js): normaler gestapelter Fluss, keine Bühnen, ruhiges Einblenden von unten. Desktop unverändert. ===== */
@media (max-width:760px){
.s2-sek{padding-block:64px}
#s2 .s2-knopf,#s2 .btn-knopf,#s2 .s2-pv-knopf{min-height:44px}
#s2 .s2-kopf{margin-bottom:28px}
/* ablauf: Karten dichter */
#s2 .s2-ab{--ab-luecke:20px}
#s2 .s2-ds-mini{min-height:0;padding:20px 14px}
#s2 .s2-ds-fenster{gap:36px}
/* fenster: App-Bilder ganz zeigen */
.s2-fe-shot,.s2-fe-shot.ai{left:3%;top:5%;width:94%}
/* handys: untereinander, ganze Handys mit vollem Rahmen */
.s2-hy{gap:20px;max-width:none;display:grid;grid-template-columns:minmax(0,1fr)}
.s2-hy-karte,.s2-hy-karte.oben,.s2-hy-karte.unten{height:auto;padding:32px 0 36px;overflow:hidden}
.s2-hy-karte.oben .s2-hy-text{order:-1;margin:0;padding:0 24px}
.s2-hy-text,.s2-hy-karte.oben .s2-hy-text{padding:0 24px}
.s2-hy-handy,.s2-hy-karte.oben .s2-hy-handy{--hb:min(80vw,300px);margin-top:26px}
.s2-hy-meldung{top:60%;left:-6px;right:-6px}
/* branchen: Kacheln ruhig, nicht größer als 132x88 */
.s2-br-chip.s2-br-kachel{width:132px;height:88px}
/* footer: zwei Spalten */
.s2-fuss .s2-fuss-spalten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Einblenden von unten (basis.js setzt .s2-m und .s2-m-an) */
html.s2-mob .s2-m{opacity:0;transform:translate3d(0,22px,0);transition:opacity 600ms cubic-bezier(.22,.7,.2,1),transform 600ms cubic-bezier(.22,.7,.2,1)}
html.s2-mob .s2-m.s2-m-an{opacity:1;transform:none}
@media (max-width:760px){
html.s2-mob .s2-sek .s2-h2,html.s2-mob .s2-sek .s2-text,html.s2-mob .s2-sek .s2-vl-label{animation:none;opacity:1;transform:none}
}
/* ===== sektionen2/fuss/fuss.css ===== */
/* FUSS (13.10.2026): großer ruhiger Fuß, weiß, feine Linie oben, Wortmarke groß als Abschluss. Nur Variablen aus kern2/basis.css. */
.s2-fuss{border-top:1px solid var(--s2-linie);padding-bottom:clamp(28px,3vw,40px)}
.s2-fuss .s2-fuss-oben{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,5fr);gap:clamp(40px,5vw,80px);padding-top:clamp(8px,1.5vw,24px)}
.s2-fuss .s2-fuss-marke{display:flex;flex-direction:column;align-items:flex-start}
.s2-fuss .s2-fuss-kugel{--g:44px;margin-bottom:22px}
.s2-fuss .s2-fuss-satz{font-family:var(--s2-serif);font-size:26px;line-height:1.15;letter-spacing:-.01em;color:var(--s2-schwarz);max-width:19ch;margin-bottom:22px} /* 19.10.2026 Marke: 15ch -> 19ch, damit "WhatsApp-Marketing-" in eine Zeile passt */
/* Desktop: Spalten so breit wie ihr längster Eintrag, Luft gleichmäßig verteilt (kein Umbruch bei langen Einträgen) */
.s2-fuss .s2-fuss-spalten{display:grid;grid-template-columns:repeat(5,max-content);justify-content:space-between;gap:32px 24px}
.s2-fuss .s2-fuss-titel{font-family:var(--s2-sans);font-size:13px;font-weight:600;line-height:1.3;color:var(--s2-schwarz);margin-bottom:18px}
.s2-fuss .s2-fuss-spalte ul{display:flex;flex-direction:column;gap:12px}
.s2-fuss .s2-fuss-spalte a{display:inline-block;font-size:15px;line-height:1.4;color:var(--s2-grau);transition:color 200ms var(--s2-kurve)}
.s2-fuss .s2-fuss-spalte a:hover{color:var(--s2-schwarz)}
.s2-fuss .s2-fuss-spalte a:focus-visible{outline:2px solid var(--s2-schwarz);outline-offset:3px;border-radius:4px}
.s2-fuss .s2-fuss-abzeichen{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(64px,7vw,104px);padding-top:32px;border-top:1px solid var(--s2-linie)}
.s2-fuss .s2-fuss-wort{margin-top:clamp(64px,8vw,120px)}
/* Die SVG hat links und rechts je 3,125 % Leerraum (viewBox -135..3737, Glyphe gemessen). Bild um diesen Rand breiter und nach links
geschoben, damit die Schrift genau auf der Rasterkante sitzt (wie Spalten, Abzeichen und Fußzeile). */
.s2-fuss .s2-fuss-wort img{width:calc(100% / .9375);max-width:none;height:auto;margin-left:calc(-100% * .03125 / .9375)}
.s2-fuss .s2-fuss-unten{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:clamp(20px,2.4vw,32px);
font-size:13.5px;color:var(--s2-grau-hell)}
.s2-fuss .s2-fuss-sprache{display:inline-flex;align-items:center;gap:7px;color:var(--s2-tinte)}
.s2-fuss .s2-fuss-sprache .s2-ic{width:16px;height:16px}
@media (max-width:1100px){
.s2-fuss .s2-fuss-oben{grid-template-columns:minmax(0,1fr)}
.s2-fuss .s2-fuss-spalten{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch;column-gap:clamp(20px,2.4vw,36px);row-gap:44px}
}
@media (max-width:600px){
.s2-fuss .s2-fuss-spalten{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:40px}
.s2-fuss .s2-fuss-satz{font-size:24px}
.s2-fuss .s2-fuss-abzeichen{flex-direction:column;align-items:flex-start}
.s2-fuss .s2-fuss-abzeichen .s2-abzeichen{white-space:normal}
}
/* 18.10.2026: kleines WhatsApp-Newsletter-Feld im Fuß */
.s2-fuss .s2-fuss-wa{margin-top:28px;width:100%;max-width:300px}
.s2-fuss .s2-fuss-wa-titel{display:block;font-size:13px;font-weight:600;color:var(--s2-schwarz);margin-bottom:8px}
.s2-fuss .s2-fuss-wa-reihe{display:flex;gap:6px}
.s2-fuss .s2-fuss-wa input{flex:1;min-width:0;height:38px;border:1px solid #e4e4e2;border-radius:12px;padding:0 12px;font:inherit;font-size:13.5px;background:#fff;color:var(--s2-schwarz)}
.s2-fuss .s2-fuss-wa input:focus{outline:none;border-color:var(--s2-schwarz)}
.s2-fuss .s2-fuss-wa button{height:38px;border:0;border-radius:12px;padding:0 14px;background:var(--s2-schwarz);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.s2-fuss .s2-fuss-wa-fein{margin-top:7px;font-size:12px;line-height:1.4;color:var(--s2-grau)}
.s2-fuss .s2-fuss-wa-antwort{margin-top:4px;font-size:12px;color:var(--s2-schwarz)}
/* 18.10.2026 HANDY (Bugrunde): "Deutsch" lag ganz unten unter dem runden AI-Knopf, deshalb rechts Platz für den Knopf. Nur Handy. */
@media (max-width:760px){.s2-fuss .s2-fuss-unten{padding-right:66px}}
/* ===== 18.10.2026 Handy-Bugrunde 2 (nur bis 760 px, Desktop unverändert) =====
1) Nummernfeld im Fuß hatte 13,5 px Schrift: iPhone zoomt beim Antippen die ganze Seite heran. Jetzt 16 px, Feld und Knopf 44 px hoch (Fingergröße).
2) Die Zeile war auf 300 px begrenzt und endete mitten in der Spalte; am Handy volle Breite.
3) Lesetexte unter 14 px (Spaltentitel, Kleingedrucktes, Fußzeile) auf 14 px. */
@media (max-width:760px){
.s2-fuss .s2-fuss-wa{max-width:none}
.s2-fuss .s2-fuss-wa input{height:44px;font-size:16px}
.s2-fuss .s2-fuss-wa button{height:44px;padding:0 18px;font-size:14px}
.s2-fuss .s2-fuss-wa-titel,.s2-fuss .s2-fuss-titel,.s2-fuss .s2-fuss-wa-fein,.s2-fuss .s2-fuss-unten{font-size:14px}
}
/* 21.10.2026 (Gründer): Marken-Spalte, Abzeichen-Zeile und Fußzeile (© / Sprache) entfernt. Die fünf Link-Spalten stehen allein
und sind größer, damit sie die Rasterbreite von links bis rechts füllen. */
.s2-fuss .s2-fuss-oben{grid-template-columns:minmax(0,1fr);padding-top:clamp(28px,3.4vw,48px)}
.s2-fuss .s2-fuss-spalten{grid-template-columns:repeat(5,1fr);justify-content:stretch;gap:40px clamp(24px,3vw,56px)}
.s2-fuss .s2-fuss-titel{font-size:17px;margin-bottom:24px}
.s2-fuss .s2-fuss-spalte ul{gap:16px}
.s2-fuss .s2-fuss-spalte a{font-size:19px;line-height:1.35}
.s2-fuss .s2-fuss-wort{margin-top:clamp(56px,7vw,104px)}
@media (max-width:1100px){
.s2-fuss .s2-fuss-spalten{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:48px}
.s2-fuss .s2-fuss-spalte a{font-size:17px}
}
@media (max-width:600px){
.s2-fuss .s2-fuss-spalten{grid-template-columns:repeat(2,minmax(0,1fr))}
.s2-fuss .s2-fuss-titel{font-size:16px}
.s2-fuss .s2-fuss-spalte a{font-size:16px}
}
/* 21.10.2026 (Gründer): Fuß in SmartChat-Farben. Oben eine klare Linie zwischen weißer Seite und buntem Fuß (kein Übergang),
dort 100 % Bild; nach unten immer transparenter bis ganz unten 100 % transparent. Der Verlauf steckt IM Bild (footer-bg.jpg),
nicht in der CSS (Prüfer verbietet Verläufe in der CSS). Schrift in Weiß. */
.s2-fuss{border-top:1px solid var(--s2-linie);position:relative;color:#fff;background:#fff url(/s/fuss/footer-bg.jpg) center top/cover no-repeat;
padding-bottom:clamp(36px,4vw,56px)}
.s2-fuss .s2-fuss-oben{padding-top:clamp(40px,4.4vw,64px)}
.s2-fuss .s2-fuss-titel{color:#fff}
.s2-fuss .s2-fuss-spalte a{color:rgba(255,255,255,.94)}
.s2-fuss .s2-fuss-spalte a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.s2-fuss .s2-fuss-spalte a:focus-visible{outline-color:#fff}
/* 21.10.2026 (Gründer): unten KEIN Abstand zwischen Wortmarke und unterem Rand: die Schrift steht auf der untersten Linie.
Die SVG hat unter der Schrift 3,17 % (der Bildbreite) Leerraum; er wird weggenommen (3,17 % / 0,9375 = 3,38 % der Rasterbreite). */
.s2-fuss{padding-bottom:0;overflow:hidden}
.s2-fuss .s2-fuss-wort img{display:block;margin-bottom:-3.05%}
@media (max-width:760px){.s2-fuss .s2-fuss-unten{padding-right:0}}
/* ===== sektionen2/faq/faq.css ===== */
/* FAQ (13.10.2026, Feedback 17.10.: eine Spalte, 10 Fragen, schlichtes Akkordeon mit dünnen Linien, kein AI-Fragefeld).
Nur Variablen aus kern2/basis.css. Jede Regel beginnt mit .s2-faq. Sicherung: faq.css.vor-feedback-17-10 */
/* Eine Spalte, mittig */
.s2-faq .s2-faq-liste{max-width:820px;margin:0 auto;border-bottom:1px solid var(--s2-linie)}
/* Frage-Zeile: nur Linie oben, keine Karte */
.s2-faq .s2-faq-frage{border-top:1px solid var(--s2-linie)}
.s2-faq .s2-faq-frage>summary{display:flex;align-items:center;gap:20px;padding:26px 4px;cursor:pointer;list-style:none}
.s2-faq .s2-faq-frage>summary::-webkit-details-marker{display:none}
.s2-faq .s2-faq-frage>summary::marker{content:""}
.s2-faq .s2-faq-frage>summary:focus-visible{outline:2px solid var(--s2-schwarz);outline-offset:2px;border-radius:var(--s2-r-klein)}
.s2-faq .s2-faq-q{flex:1;min-width:0;font:600 18px/1.4 var(--s2-sans);color:var(--s2-schwarz);letter-spacing:-.005em;transition:color 200ms var(--s2-kurve)}
.s2-faq .s2-faq-frage>summary:hover .s2-faq-q{color:var(--s2-tinte)}
/* Plus wird zum Kreuz */
.s2-faq .s2-faq-plus{position:relative;flex:none;width:32px;height:32px;border-radius:var(--s2-r-rund);box-shadow:0 0 0 1px var(--s2-linie);
transition:transform 450ms var(--s2-kurve),background 300ms var(--s2-kurve)}
.s2-faq .s2-faq-plus::before,.s2-faq .s2-faq-plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;margin:-.8px 0 0 -6px;border-radius:2px;background:var(--s2-schwarz)}
.s2-faq .s2-faq-plus::after{transform:rotate(90deg)}
.s2-faq .s2-faq-frage[open]:not(.s2-faq-schliesst) .s2-faq-plus{transform:rotate(45deg);background:var(--s2-flaeche)}
.s2-faq .s2-faq-frage>summary:hover .s2-faq-plus{background:var(--s2-flaeche)}
/* Antwort */
.s2-faq .s2-faq-antwort{overflow:hidden}
.s2-faq .s2-faq-antwort-innen{padding:0 56px 28px 4px}
.s2-faq .s2-faq-antwort-innen p{max-width:64ch;font-size:16px;line-height:1.65;color:var(--s2-grau);text-wrap:pretty}
/* Unten */
.s2-faq .s2-faq-fuss{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:clamp(36px,4vw,56px)}
@media (max-width:640px){
.s2-faq .s2-faq-frage>summary{padding:20px 0;gap:14px}
.s2-faq .s2-faq-q{font-size:16.5px}
.s2-faq .s2-faq-antwort-innen{padding:0 0 22px}
.s2-faq .s2-faq-antwort-innen p{font-size:15.5px}
}
/* Tippfläche des Textlinks mindestens 44 px hoch (Kritik-Runde 13.10.) */
.s2-faq .s2-faq-fuss .s2-link-pfeil{position:relative}
.s2-faq .s2-faq-fuss .s2-link-pfeil::after{content:"";position:absolute;left:-8px;right:-8px;top:-12px;bottom:-12px}
/* 02.11.2026 e (Gründer): Fragen und Antworten linksbündig, Titel und Unterüberschrift bleiben mittig */
#s2 .s2-faq .s2-faq-q,#s2 .s2-faq .s2-faq-antwort,#s2 .s2-faq .s2-faq-antwort *{text-align:left}
/* ===== sektionen2/assistent/assistent.css ===== */
/* AI-Chat unten rechts "Frag SmartChat AI" (17.10.2026).
Bewusste Ausnahme von STIL.md (z-index max. 10): Der Gründer will den Knopf "immer, über allem". z-index 900 liegt über der Leiste (20),
aber unter dem Ladeschleier (1000), damit beim Laden nichts aufblitzt. Farben, Ecken, Schatten nur aus kern2/basis.css. */
.sc-ai{--sc-abstand:24px;--sc-knopf:60px;--sc-sys:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
position:fixed;z-index:900;right:calc(var(--sc-abstand) + env(safe-area-inset-right,0px));bottom:calc(var(--sc-abstand) + env(safe-area-inset-bottom,0px));
font-family:var(--sc-sys);color:var(--s2-schwarz,#141414);-webkit-font-smoothing:antialiased;line-height:1.45}
.sc-ai *,.sc-ai *::before,.sc-ai *::after{box-sizing:border-box}
.sc-ai [hidden]{display:none!important}
.sc-ai-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ---------- Knopf: weiß, 2 px schwarz, Stern im Verlauf ---------- */
.sc-ai-knopf{position:relative;display:grid;place-items:center;width:var(--sc-knopf);height:var(--sc-knopf);padding:0;margin:0;border-radius:50%;cursor:pointer;
background:#fff;border:2px solid #e4e4e2; /* 18.10. Gründer: Umrandung grau statt schwarz */color:var(--s2-schwarz,#141414);
box-shadow:0 2px 4px rgba(20,20,20,.06),0 14px 30px -12px rgba(20,20,20,.38);
transition:transform 260ms var(--s2-kurve,cubic-bezier(.23,1,.32,1)),box-shadow 260ms var(--s2-kurve,ease)}
.sc-ai-knopf:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 3px 6px rgba(20,20,20,.07),0 20px 38px -14px rgba(20,20,20,.42)}
.sc-ai-knopf:active{transform:scale(.96)}
.sc-ai-knopf:focus-visible{outline:3px solid var(--s2-schwarz,#141414);outline-offset:3px}
.sc-ai-stern{width:31px;height:31px;display:block;transition:transform 520ms var(--s2-kurve,ease),opacity 200ms ease}
.sc-ai-knopf:hover .sc-ai-stern{transform:rotate(45deg) scale(1.06)}
.sc-ai-x{position:absolute;width:22px;height:22px;opacity:0;transform:rotate(-45deg) scale(.6);transition:transform 320ms var(--s2-kurve,ease),opacity 200ms ease}
.sc-ai[data-zustand="offen"] .sc-ai-stern{opacity:0;transform:rotate(90deg) scale(.5)}
.sc-ai[data-zustand="offen"] .sc-ai-x{opacity:1;transform:none}
/* sanfter Hinweis beim ersten Erscheinen */
@keyframes sc-ai-rein{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
.sc-ai-knopf{animation:sc-ai-rein 600ms var(--s2-kurve,ease) both}
/* ---------- Fenster ---------- */
.sc-ai-fenster{position:absolute;right:0;bottom:calc(var(--sc-knopf) + 14px);display:flex;flex-direction:column;
width:380px;height:min(560px,calc(100vh - var(--sc-knopf) - 2 * var(--sc-abstand) - 40px));
background:#fff;border-radius:22px;overflow:hidden;
box-shadow:0 0 0 1px rgba(20,20,20,.08),0 4px 10px rgba(20,20,20,.05),0 40px 80px -30px rgba(20,20,20,.40);
transform-origin:calc(100% - 30px) calc(100% + 30px)}
.sc-ai-fenster.sc-ai-auf{animation:sc-ai-auf 340ms var(--s2-kurve,ease) both}
@keyframes sc-ai-auf{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.sc-ai-kopf{display:flex;align-items:center;gap:12px;padding:16px 12px 14px 18px;border-bottom:1px solid var(--s2-linie,#e4e4e2);flex:none}
.sc-ai-logo{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none;background:#fff;border:1.5px solid var(--s2-schwarz,#141414)}
.sc-ai-logo svg{width:20px;height:20px;display:block}
.sc-ai-kopftext{flex:1;min-width:0}
.sc-ai .sc-ai-titel{margin:0;font:400 25px/1.05 var(--s2-serif,"Instrument Serif",Georgia,serif);letter-spacing:-.005em;color:var(--s2-schwarz,#141414)}
.sc-ai .sc-ai-unter{margin:3px 0 0;font-size:12.5px;line-height:1.35;color:var(--s2-grau,#6e6e6b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-ai-ikon{display:grid;place-items:center;width:36px;height:36px;flex:none;padding:0;margin:0;border:0;border-radius:10px;background:none;color:var(--s2-tinte,#141414);cursor:pointer;
transition:background-color 160ms ease,color 160ms ease}
.sc-ai-ikon:hover{background:var(--s2-flaeche,#f1f1f0);color:var(--s2-schwarz,#141414)}
.sc-ai-ikon:focus-visible{outline:2px solid var(--s2-schwarz,#141414);outline-offset:1px}
.sc-ai-ikon svg{width:19px;height:19px}
/* ---------- Verlauf ---------- */
.sc-ai-verlauf{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px 10px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.sc-ai-verlauf:focus{outline:none}
.sc-ai-nachricht{max-width:88%;font-size:15px;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere}
.sc-ai-nachricht.ai{align-self:flex-start;color:var(--s2-tinte,#141414);background:var(--s2-flaeche,#f1f1f0);border-radius:16px 16px 16px 6px;padding:11px 14px}
.sc-ai-nachricht.nutzer{align-self:flex-end;color:#fff;background:#141414;border-radius:16px 16px 6px 16px;padding:10px 14px;white-space:pre-wrap}
.sc-ai-nachricht p,.sc-ai-nachricht ul,.sc-ai-nachricht ol{margin:0}
.sc-ai-nachricht p+p,.sc-ai-nachricht p+ul,.sc-ai-nachricht p+ol,.sc-ai-nachricht ul+p,.sc-ai-nachricht ol+p{margin-top:8px}
.sc-ai-nachricht ul,.sc-ai-nachricht ol{padding-left:20px}
.sc-ai-nachricht ul{list-style:disc}
.sc-ai-nachricht ol{list-style:decimal}
.sc-ai-nachricht li{margin:3px 0;padding-left:2px}
.sc-ai-nachricht b,.sc-ai-nachricht strong{color:var(--s2-schwarz,#141414);font-weight:650}
.sc-ai-nachricht a{color:var(--s2-schwarz,#141414);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.sc-ai-nachricht a:hover{text-decoration-thickness:2px}
/* Schreibmarke beim Streamen */
.sc-ai-nachricht.strom>:last-child::after{content:"";display:inline-block;width:7px;height:15px;margin-left:3px;vertical-align:-2px;border-radius:2px;background:var(--s2-schwarz,#141414);animation:sc-ai-marke 1s steps(2) infinite}
@keyframes sc-ai-marke{50%{opacity:0}}
/* drei Punkte, bis das erste Wort kommt */
.sc-ai-tippt{display:inline-flex;gap:5px;padding:4px 0}
.sc-ai-tippt i{width:7px;height:7px;border-radius:50%;background:var(--s2-grau-hell,#6e6e6b);animation:sc-ai-punkt 1.1s ease-in-out infinite}
.sc-ai-tippt i:nth-child(2){animation-delay:.15s}.sc-ai-tippt i:nth-child(3){animation-delay:.3s}
@keyframes sc-ai-punkt{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
/* Hinweis unter einer Antwort (Probe, abgeschnitten) und Fehler */
.sc-ai-hinweis{align-self:flex-start;max-width:88%;margin-top:-4px;font-size:12.5px;line-height:1.4;color:var(--s2-grau-hell,#6e6e6b)}
.sc-ai-fehler{align-self:stretch;display:flex;flex-direction:column;gap:9px;padding:12px 14px;border-radius:14px;font-size:14px;line-height:1.45;
color:var(--s2-schwarz,#141414);background:#fff;box-shadow:0 0 0 1px var(--s2-linie-stark,#e4e4e2)}
.sc-ai-fehler b{display:flex;align-items:center;gap:7px;color:var(--s2-rot,#dc2626);font-weight:650}
.sc-ai-fehler b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--s2-rot,#dc2626);flex:none}
.sc-ai-fehler span{color:var(--s2-tinte,#141414)}
.sc-ai-fehler button{align-self:flex-start}
/* Vorschläge (höchstens 3) */
.sc-ai-vorschlaege{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:2px}
.sc-ai-vorschlag,.sc-ai-fehler button{display:inline-flex;align-items:center;min-height:38px;padding:8px 14px;margin:0;border-radius:var(--s2-r-knopf,14px);cursor:pointer;text-align:left;
font:600 14px/1.25 var(--sc-sys);color:var(--s2-schwarz,#141414);background:#fff;border:0;
box-shadow:0 0 0 1px var(--s2-linie-stark,#e4e4e2),0 1px 2px rgba(20,20,20,.04);transition:box-shadow 160ms ease,transform 160ms ease}
.sc-ai-vorschlag:hover,.sc-ai-fehler button:hover{box-shadow:0 0 0 1.5px var(--s2-schwarz,#141414),0 4px 10px -6px rgba(20,20,20,.25);transform:translateY(-1px)}
.sc-ai-vorschlag:focus-visible,.sc-ai-fehler button:focus-visible{outline:2px solid var(--s2-schwarz,#141414);outline-offset:2px}
/* ---------- Eingabe ---------- */
.sc-ai-form{position:relative;display:flex;align-items:flex-end;gap:8px;margin:6px 12px 0;padding:6px 6px 6px 14px;border-radius:var(--s2-r-knopf,14px);flex:none;
background:#fff;box-shadow:0 0 0 1px var(--s2-linie-stark,#e4e4e2);transition:box-shadow 160ms ease}
.sc-ai-form:focus-within{box-shadow:0 0 0 1.5px var(--s2-schwarz,#141414)}
.sc-ai-eingabe{flex:1;min-width:0;min-height:36px;max-height:120px;resize:none;margin:0;padding:8px 0;border:0;outline:none;background:transparent;
font:400 16px/1.35 var(--sc-sys);color:var(--s2-schwarz,#141414)} /* 16 px: iPhone zoomt sonst beim Antippen */
.sc-ai-eingabe::placeholder{color:var(--s2-grau-hell,#6e6e6b)}
.sc-ai-senden{display:grid;place-items:center;width:38px;height:38px;flex:none;padding:0;margin:0;border:0;border-radius:11px;cursor:pointer;color:#fff;
background:#141414;box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 0 0 1px #141414;transition:opacity 160ms ease,transform 160ms ease}
.sc-ai-senden svg{width:19px;height:19px}
.sc-ai-senden:hover:not(:disabled){transform:translateY(-1px)}
.sc-ai-senden:disabled{opacity:.28;cursor:default}
.sc-ai-senden:focus-visible{outline:2px solid var(--s2-schwarz,#141414);outline-offset:2px}
.sc-ai .sc-ai-fein{margin:8px 16px 12px;font-size:11.5px;line-height:1.35;color:var(--s2-grau-hell,#6e6e6b);text-align:center;flex:none}
/* ---------- Handy: Fenster fast Vollbild, Knopf versteckt solange offen ---------- */
@media (max-width:600px){
.sc-ai{--sc-abstand:20px;--sc-knopf:58px}
.sc-ai-fenster{position:fixed;left:8px;right:8px;width:auto;
top:calc(var(--sc-vv-top,0px) + 8px + env(safe-area-inset-top,0px));
height:calc(var(--sc-vv-h,100dvh) - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));bottom:auto;border-radius:20px;transform-origin:50% 100%}
.sc-ai[data-zustand="offen"] .sc-ai-knopf{opacity:0;pointer-events:none;transform:scale(.8)}
.sc-ai-kopf{padding:14px 10px 12px 16px}
.sc-ai-nachricht{max-width:92%}
}
@media (max-height:520px) and (min-width:601px){
.sc-ai-fenster{height:calc(100vh - var(--sc-knopf) - 2 * var(--sc-abstand) - 24px)}
}
/* ---------- Ruhige Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
.sc-ai-knopf,.sc-ai-fenster.sc-ai-auf{animation:none}
.sc-ai-knopf,.sc-ai-stern,.sc-ai-x{transition:none}
.sc-ai-knopf:hover .sc-ai-stern{transform:none}
.sc-ai-tippt i,.sc-ai-nachricht.strom>:last-child::after{animation:none}
.sc-ai-verlauf{scroll-behavior:auto}
}
@media print{.sc-ai{display:none}}
/* 18.10.2026 HANDY: Knopf etwas kleiner und näher am Rand; gleitet beim Runterscrollen weg (assistent.js, Klasse .sc-ai-weg) */
@media (max-width:760px){
.sc-ai{--sc-abstand:14px;--sc-knopf:52px}
.sc-ai-knopf{transition:transform 260ms var(--s2-kurve,ease),box-shadow 260ms var(--s2-kurve,ease),translate 420ms var(--s2-kurve,ease),opacity 300ms ease}
.sc-ai.sc-ai-weg[data-zustand="zu"] .sc-ai-knopf{translate:0 calc(var(--sc-knopf) + 40px)}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.sc-ai-knopf{transition:none}}
/* ===== unterseiten/bausteine/bausteine.css ===== */
/* =====================================================================================================
UNTERSEITEN (18.10.2026) — bausteine.css
Wird von unterseiten.py HINTER kern2/basis.css, sektionen2/fuss/fuss.css, sektionen2/faq/faq.css und sektionen2/assistent/assistent.css
zu /u/unterseiten.css zusammengesetzt. Leiste: /style.css der Startseite (kern/style.css).
FARBEN WEG 18.10.2026 (Gründer: "zu bunt, zu viel Serif, Übersichten zu kompliziert"). Verbindlich für JEDE Unterseite:
1. Nur 8 Werte wie im SmartChat-Dashboard: #ffffff Weiß, #f1f1f0 Fläche, #e4e4e2 Kante, #6e6e6b Nebentext, #141414 Schwarz,
Haupt-Knopf schwarz (#141414), #dc2626 nur Fehler. Kein Gelb/Lila/Rosa/Pfirsich, keine Verläufe, keine Glows, keine bunten Flächen.
Ausnahmen: Logo-Kugel (.s2-kugel) und echtes WhatsApp-UI (Chatgrund, grüne Blase, Haken).
2. H1/H2 fette Sans (Instrument Sans 600), höchstens EIN Akzentwort in Instrument Serif kursiv (*Wort* in seite.json bzw. in h1/h2).
Kartentitel, Zwischentitel, Fließtext, Zitate, Zahlen: Sans. em im Fließtext = Sans kursiv.
3. Rundung 14 px für Karten, Knöpfe, Felder, Bildflächen (Pillen und Kreise ausgenommen). Innen = außen minus Abstand.
4. Weiß, viel Luft, mittig. Hubs = Trust-Chip + H1 + Satz + Suche + Karten (3 Spalten). Nichts sonst.
Alte Farbnamen (--s2u-pink, s2u-flaeche gelb …) gibt es noch, damit nichts bricht, sie sind aber alle neutral.
Der Prüfer (unterseiten-pruefen.py) meldet bunte Werte, Verläufe und Serif außerhalb von h1/h2-em als FEHLER.
Beispiel aller Bausteine: unterseiten/inhalte/_muster/ -> http://localhost:5396/_muster/
===================================================================================================== */
:root{
/* Altnamen (früher Markenfarben), seit 18.10.2026 neutral: "zart" = Fläche, "kräftig" = Kante */
--s2u-pink:#e4e4e2;--s2u-orange:#e4e4e2;--s2u-gelb:#e4e4e2;--s2u-flieder:#e4e4e2;
--s2u-pink-zart:#f1f1f0;--s2u-orange-zart:#f1f1f0;--s2u-gelb-zart:#f1f1f0;--s2u-flieder-zart:#f1f1f0;
--s2u-oben:calc(42px + 68px + clamp(28px,3.4vw,52px)); /* Leiste: top 42 + Höhe 68 (kern/style.css) + Luft */
--s2u-block:clamp(64px,7.4vw,112px); /* Abstand zwischen Bausteinen */
--s2u-lese:720px; /* Lesebreite Artikeltext (ca. 68 Zeichen) */
--s2u-akzent:"Instrument Serif",Georgia,serif; /* NUR für das eine kursive Akzentwort in h1/h2 */
}
/* Die 8 Dashboard-Werte auf allen Unterseiten (auch Fuß und AI-Chat). Startseite bleibt unberührt. */
body.s2u-seite{
--s2-schwarz:#141414;--s2-tinte:#141414;--s2-grau:#6e6e6b;--s2-grau-satz:#6e6e6b;--s2-grau-hell:#6e6e6b;
--s2-linie:#e4e4e2;--s2-linie-stark:#e4e4e2;--s2-flaeche:#f1f1f0;--s2-flaeche-ruhig:#f1f1f0;--s2-weiss:#ffffff;--s2-rot:#dc2626;
--s2-ok-grund:#f1f1f0;--s2-ok-text:#141414;--s2-warte-grund:#f1f1f0;--s2-warte-text:#6e6e6b;
--s2-r-kachel:14px;--s2-r-karte:14px;--s2-r-knopf:14px;--s2-r-klein:10px;
--s2-schatten-ring:0 0 0 1px #e4e4e2;
--s2-schatten-ruhig:0 0 0 1px #e4e4e2;
--s2-schatten-schwebe:0 0 0 1px #e4e4e2,0 12px 28px -18px rgba(20,20,20,.18);
--s2-schatten-tief:0 0 0 1px #e4e4e2,0 24px 48px -28px rgba(20,20,20,.22);
}
@media (max-width:820px){:root{--s2u-oben:calc(24px + 58px + 24px)}}
html{scroll-padding-top:120px}
body.s2u-seite{margin:0;background:#fff}
.s2u-sprung{position:absolute;left:12px;top:-60px;z-index:950;padding:10px 16px;border-radius:var(--s2-r-knopf);background:var(--s2-schwarz);color:#fff;font:600 14px/1 var(--s2-sans)}
.s2u-sprung:focus{top:12px}
/* Leiste auf Unterseiten: von Anfang an im Zustand "da"; aktueller Bereich etwas kräftiger */
/* clean 18.10.: kein Strich unter dem aktuellen Bereich (Gründer: "oben bei Funktionen kein Strich") */
.leiste .links a[aria-current="page"]{text-decoration:none}
.s2u{padding-top:var(--s2u-oben)}
.s2u-seite .s2-fuss{margin-top:clamp(40px,4vw,64px)}
/* ---------- Brotkrumen (clean 18.10.: standardmäßig unsichtbar, nur Schema; sichtbar nur mit "brotkrumen_sichtbar": true, klein, mittig, ohne Linie) ---------- */
.s2u-krumen{margin-top:clamp(16px,2vw,28px)}
.s2u-krumen ol{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 0;font-size:13px;line-height:1.4;color:var(--s2-grau-hell)}
.s2u-krumen li{display:inline-flex;align-items:center}
.s2u-krumen li+li::before{content:"/";margin:0 8px;color:var(--s2-linie-stark)}
.s2u-krumen a{color:var(--s2-grau-hell);transition:color 200ms var(--s2-kurve)}
.s2u-krumen a:hover{color:var(--s2-schwarz)}
.s2u-krumen [aria-current]{color:var(--s2-grau)}
/* ---------- Überschriften im Inhalt (auch ohne Klassen schön) ---------- */
/* Farben weg 18.10.: fette Sans, ein Akzentwort Serif kursiv (wie die alte Seite: "Ein System. *10 Funktionen.*") */
.s2 h1.s2u-h1{font-family:var(--s2-sans);font-weight:600;color:var(--s2-schwarz);text-shadow:none;font-size:clamp(40px,3.4vw + 14px,68px);line-height:1.06;letter-spacing:-.035em;text-wrap:balance;max-width:20ch}
.s2u-inhalt h2,.s2u-h2{font-family:var(--s2-sans);font-weight:600;color:var(--s2-schwarz);font-size:clamp(28px,1.5vw + 16px,42px);line-height:1.12;letter-spacing:-.03em;text-wrap:balance;max-width:22ch;scroll-margin-top:130px}
/* em: im Fließtext Sans kursiv, in h1/h2 das eine Serif-Akzentwort (kursiv, schwarz, leicht größer, damit es optisch gleich groß wirkt) */
.s2u-seite .s2 em{font-family:inherit;font-style:italic;font-weight:inherit}
.s2u-seite .s2 h1 em,.s2u-seite .s2 h2 em{font-family:var(--s2u-akzent);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.08em;line-height:.9;color:var(--s2-schwarz)}
.s2u-inhalt h3{font-family:var(--s2-sans);font-weight:600;color:var(--s2-schwarz);font-size:19px;line-height:1.35;letter-spacing:-.005em;scroll-margin-top:130px}
.s2u-inhalt h4{font-family:var(--s2-sans);font-weight:600;color:var(--s2-schwarz);font-size:16.5px;line-height:1.4}
.s2u-block>h2+p,.s2u-block>h2+.s2-text{margin-top:18px}
.s2u-block>h2+:not(p){margin-top:clamp(32px,3.6vw,48px)}
.s2u-block>p+:not(p){margin-top:clamp(32px,3.6vw,48px)}
.s2u-block>figure+figure,.s2u-block>.s2u-tabelle+figure,.s2u-block>figure+.s2u-tabelle{margin-top:clamp(28px,3.4vw,48px)}
/* Bugjagd 18.10.: nur Absätze OHNE eigene Klasse. Vorher überschrieb diese Regel Fußnoten (s2u-tabelle-fuss, s2u-en-unter …, sollten 13 px sein, waren 17,5 px) und Seiten-Klassen */
.s2u-block>p:not([class]){font-size:clamp(16.5px,.35vw + 15px,17.5px);line-height:1.6;color:var(--s2-grau);max-width:62ch}
.s2u-block>p+p{margin-top:14px}
.s2u-block>:not(p):not(h2):not(h3):not(h4)+p:not([class]){margin-top:clamp(24px,2.6vw,32px)} /* Bugjagd 18.10.: Satz unter Bildfläche/Tabelle klebte direkt daran */
.s2u-block>p b,.s2u-block>p strong{color:var(--s2-schwarz);font-weight:600}
.s2u-chip-oben{margin-bottom:22px}
/* ---------- Abstand zwischen Bausteinen ---------- */
.s2u-inhalt{margin-top:clamp(44px,5vw,72px)}
.s2u-inhalt>*+*{margin-top:var(--s2u-block)}
.s2u-inhalt>.s2u-dicht{margin-top:clamp(28px,3vw,40px)}
/* ---------- kopf-unterseite (clean 18.10.: immer mittig, große H1, ein Satz, höchstens ein Knopf; Bild/App darunter, groß) ---------- */
.s2u-kopf{display:flex;flex-direction:column;align-items:center;gap:clamp(44px,5vw,72px);margin-top:clamp(36px,5vw,84px);text-align:center}
.s2u-kopf-text{display:flex;flex-direction:column;align-items:center;max-width:980px}
.s2u-kopf-text>.s2-chip{margin-bottom:26px}
.s2u-kopf .s2u-h1{margin-inline:auto}
.s2u-kopf-unter{margin-top:26px;margin-inline:auto;font-size:clamp(18px,.7vw + 15px,22px);line-height:1.5;color:var(--s2-grau);max-width:44ch;text-wrap:balance}
.s2u-kopf-text>.s2-knopfreihe{margin-top:36px;justify-content:center}
.s2u-kopf-bild{position:relative;margin:0;width:100%;max-width:1080px}
.s2u-kopf-bild img{width:100%;height:auto;border-radius:var(--s2-r-kachel);background:var(--s2-flaeche);box-shadow:var(--s2-schatten-ring)}
.s2u-kopf-bild.s2u-app .s2u-flaeche{min-height:0;padding:clamp(28px,5vw,72px) clamp(16px,4vw,56px)}
/* ---------- zwei-spaltig: Text links, Bild/App-Ansicht rechts (clean 18.10., Detailseiten: jeder Abschnitt mit starkem Bild) ---------- */
.s2u-zwei{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
.s2u-zwei.links{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.s2u-zwei.links>:first-child{order:2}
.s2u-zwei-text>h2+p{margin-top:18px}
.s2u-zwei-text>p{font-size:clamp(16.5px,.35vw + 15px,17.5px);line-height:1.6;color:var(--s2-grau);max-width:52ch}
.s2u-zwei-text>p+p{margin-top:14px}
.s2u-zwei-text>p b,.s2u-zwei-text>p strong{color:var(--s2-schwarz);font-weight:600}
.s2u-zwei-text a:not(.s2-link-pfeil),.s2u-block>p a,.s2u-schritte p a,.s2u-tabelle-fuss a{color:var(--s2-schwarz);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--s2-linie-stark)}
.s2u-zwei-text>.s2-link-pfeil{margin-top:22px}
@media (max-width:900px){.s2u-zwei,.s2u-zwei.links{grid-template-columns:minmax(0,1fr)}.s2u-zwei.links>:first-child{order:0}}
/* ---------- Bildfläche (Grund für App-Ansicht, Video, Logo). Farben weg 18.10.: immer #f1f1f0, dunkel = #141414, weiss = weiß mit Kante ----------
Alte Farbnamen (pink, gelb, flieder, orange, ruhig, kraeftig) bleiben gültig, sind aber alle #f1f1f0. */
.s2u-flaeche,.s2u-flaeche.pink,.s2u-flaeche.orange,.s2u-flaeche.gelb,.s2u-flaeche.flieder,.s2u-flaeche.ruhig,
.s2u-flaeche.kraeftig{position:relative;border-radius:var(--s2-r-kachel);background:#f1f1f0;overflow:hidden}
.s2u-flaeche.weiss{background:#fff;box-shadow:inset 0 0 0 1px #e4e4e2}
.s2u-flaeche.dunkel{background:#141414}
/* ---------- antwort-box ---------- */
.s2u-antwort{position:relative;max-width:860px;padding:clamp(22px,2.6vw,32px) clamp(22px,2.8vw,36px) clamp(22px,2.6vw,32px) clamp(26px,3vw,40px);
border-radius:var(--s2-r-karte);background:#fff;box-shadow:var(--s2-schatten-ruhig)}
.s2u-antwort::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:#e4e4e2}
.s2u-antwort-titel{display:flex;align-items:center;gap:10px;margin-bottom:12px;font:600 13px/1.2 var(--s2-sans);color:var(--s2-tinte)}
.s2u-antwort-titel .s2-kugel{--g:20px;box-shadow:none}
.s2u-antwort p{font-size:clamp(17px,.4vw + 15.5px,19px);line-height:1.6;color:var(--s2-tinte);max-width:68ch;text-wrap:pretty}
.s2u-antwort p+p{margin-top:10px}
.s2u-antwort b,.s2u-antwort strong{color:var(--s2-schwarz);font-weight:600}
/* ---------- autor-und-datum (clean 18.10.: kleine graue Zeile "Stand: TT.MM.JJJJ" ganz unten, über dem Fuß) ---------- */
.s2u-autor{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13px;line-height:1.4;color:var(--s2-grau-hell)}
.s2u-autor b{color:var(--s2-grau);font-weight:600}
.s2u-autor a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--s2-linie-stark)}
.s2u-autor .s2u-punkt{width:3px;height:3px;border-radius:50%;background:var(--s2-linie-stark)}
.s2u-autor .s2-ic{width:15px;height:15px;color:var(--s2-grau-hell)}
.s2u-autor-zeile{display:inline-flex;align-items:center;gap:6px}
.s2u-stand{justify-content:center;text-align:center}
.s2u-inhalt>.s2u-stand{margin-top:clamp(64px,7vw,112px)}
/* ---------- inhaltsverzeichnis ---------- */
.s2u-toc{max-width:860px;padding:24px 28px;border-radius:var(--s2-r-karte);box-shadow:0 0 0 1px var(--s2-linie)}
.s2u-toc-titel{font:600 13px/1.2 var(--s2-sans);color:var(--s2-tinte);margin-bottom:14px}
.s2u-toc ol{counter-reset:toc;columns:2;column-gap:40px}
.s2u-toc li{counter-increment:toc;break-inside:avoid;padding:5px 0}
.s2u-toc a{display:inline-flex;gap:10px;font-size:15.5px;line-height:1.45;color:var(--s2-tinte);transition:color 200ms var(--s2-kurve)}
.s2u-toc a::before{content:counter(toc,decimal-leading-zero);font-variant-numeric:tabular-nums;color:var(--s2-grau-hell);font-size:13px;line-height:1.75}
.s2u-toc a:hover{color:var(--s2-schwarz);text-decoration:underline;text-underline-offset:4px}
/* ---------- Übersichtsseiten (Hub). Farben weg 18.10.2026, EXAKT wie die alte Live-Seite smartchat.marketing/funktionen/:
Trust-Chip, H1 (Sans + ein Serif-Akzentwort), ein grauer Satz, große Suchleiste mittig, ALLE Karten in 3 Spalten (Handy 1).
Karte: weiß, 1 px #e4e4e2, 14 px, viel Luft, Titel fett Sans schwarz, darunter eine graue Zeile.
Keine Filter-Chips, keine Gruppen-Überschriften, keine Symbole, keine Buchstaben-Kreise, kein "Alle x zeigen", kein Zähler. ---------- */
.s2u-trust{display:inline-flex;align-items:center;gap:10px;margin:0 0 26px;padding:6px 16px 6px 7px;border-radius:var(--s2-r-rund);background:#fff;
box-shadow:0 0 0 1px #e4e4e2;font-size:14px;line-height:1.3;color:#6e6e6b;text-align:left}
.s2u-trust b{color:#141414;font-weight:600}
.s2u-trust-bilder{display:flex;flex:none}
.s2u-trust-bilder i{display:block;width:26px;height:26px;margin-left:-8px;border-radius:50%;background:#f1f1f0;border:2px solid #fff;box-shadow:0 0 0 1px #e4e4e2} /* keine Gesichtsfotos (Gründer 18.10.) */
.s2u-trust-bilder i:first-child{margin-left:0}
.s2u-typ-hub .s2u-inhalt{margin-top:clamp(36px,3.6vw,52px)}
.s2u-nur-vorlesen,.s2u-hub-h2{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.s2u-raster-werkzeug{display:flex;justify-content:center;margin-bottom:clamp(40px,4.4vw,64px)}
.s2u-raster-werkzeug[hidden]{display:none}
.s2u-suche{position:relative;display:block;width:100%;max-width:640px}
.s2u-suche .s2-ic{position:absolute;left:24px;top:50%;width:20px;height:20px;margin-top:-10px;color:#6e6e6b;pointer-events:none}
.s2u-suche input{width:100%;height:62px;padding:0 24px 0 56px;border:1px solid #e4e4e2;border-radius:var(--s2-r-rund);background:#fff;box-shadow:none;font:inherit;font-size:17px;color:#141414;
-webkit-appearance:none;appearance:none;transition:border-color 200ms var(--s2-kurve)}
.s2u-suche input::placeholder{color:#6e6e6b}
.s2u-suche input:hover{border-color:#6e6e6b}
.s2u-suche input:focus{outline:none;border-color:#141414}
.s2u-suche input:focus-visible{outline:2px solid #141414;outline-offset:2px}
.s2u-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.s2u-karte{position:relative;display:flex;flex-direction:column;gap:8px;padding:28px 28px 30px;border-radius:var(--s2-r-karte);background:#fff;box-shadow:0 0 0 1px #e4e4e2;
transition:box-shadow 250ms var(--s2-kurve)}
.s2u-karte:has(a.s2u-karte-link):hover{box-shadow:0 0 0 1px #141414}
.s2u-karte[hidden]{display:none}
.s2u-inhalt .s2u-karte h3{font-family:var(--s2-sans);font-weight:600;font-size:18px;line-height:1.3;letter-spacing:-.012em;color:#141414;text-wrap:balance}
.s2u-karte p{font-size:15px;line-height:1.55;color:#6e6e6b;text-wrap:pretty}
.s2u-karte .s2u-karte-datum,.s2u-karte .s2u-karte-zusatz{font-size:13px;line-height:1.4;color:#6e6e6b}
.s2u-karte .s2u-karte-datum{margin-top:-4px}
.s2u-karte .s2u-karte-zusatz{margin-top:auto;padding-top:6px}
.s2u-karte a.s2u-karte-link::after{content:"";position:absolute;inset:0;border-radius:inherit} /* ganze Karte klickbar, ein Link */
.s2u-karte a.s2u-karte-link:focus-visible{outline:none}
.s2u-karte:has(a.s2u-karte-link:focus-visible){outline:2px solid #141414;outline-offset:3px}
.s2u-leer{padding:40px 0;font-size:16px;color:#6e6e6b;text-align:center}
.s2u-leer a{color:#141414;text-decoration:underline;text-underline-offset:4px}
/* ---------- schritte ---------- */
.s2u-schritte{display:grid;grid-template-columns:repeat(var(--s2u-sp,3),minmax(0,1fr));gap:clamp(20px,2.4vw,36px);counter-reset:schritt}
.s2u-schritte>li{counter-increment:schritt;position:relative;padding-top:28px;border-top:1px solid var(--s2-linie)}
.s2u-schritte>li::before{content:counter(schritt);display:grid;place-items:center;width:40px;height:40px;margin-bottom:22px;border-radius:50%;
font:600 16px/1 var(--s2-sans);color:#141414;background:#f1f1f0}
.s2u-schritte h3{margin-bottom:8px}
.s2u-schritte p{font-size:15.5px;line-height:1.55;color:var(--s2-grau);max-width:40ch}
.s2u-schritte.vier{--s2u-sp:4}.s2u-schritte.zwei{--s2u-sp:2}
/* ---------- vergleichstabelle (scrollt im Kasten, nie die Seite) ---------- */
.s2u-tabelle{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--s2-r-karte);box-shadow:0 0 0 1px var(--s2-linie)}
.s2u-tabelle table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.45;color:var(--s2-tinte)}
.s2u-tabelle th,.s2u-tabelle td{padding:15px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--s2-linie)}
.s2u-tabelle tr:last-child>*{border-bottom:0}
.s2u-tabelle thead th{font-weight:600;font-size:14px;color:var(--s2-schwarz);background:var(--s2-flaeche);white-space:nowrap}
.s2u-tabelle tbody th{font-weight:600;color:var(--s2-schwarz);position:sticky;left:0;background:#fff;min-width:150px}
.s2u-tabelle .s2u-wir{background:#f1f1f0}
.s2u-tabelle thead .s2u-wir{background:#e4e4e2}
.s2u-ja,.s2u-nein{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.s2u-ja::before,.s2u-nein::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background-position:center;background-repeat:no-repeat;background-size:12px}
.s2u-ja{color:var(--s2-schwarz)}
.s2u-ja::before{background-color:var(--s2-schwarz);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.s2u-nein{color:var(--s2-grau)}
.s2u-nein::before{background-color:var(--s2-flaeche);box-shadow:0 0 0 1px var(--s2-linie) inset;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%239a9ba3' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.s2u-tabelle-fuss{margin-top:12px;font-size:13px;line-height:1.5;color:var(--s2-grau-hell)}
/* Bugjagd 18.10. (F2): Tabelle in der halben Spalte von zwei-spaltig: keine 560 px Mindestbreite, Kopfzellen dürfen umbrechen */
.s2u-zwei .s2u-tabelle table{min-width:0}
.s2u-zwei .s2u-tabelle thead th{white-space:normal}
.s2u-zwei .s2u-tabelle tbody th{min-width:0}
/* Bugjagd 18.10. (B1): am Handy keine 560 px breite Tabelle im 350 px Kasten mehr. unterseiten.py setzt s2u-stapel + data-label (Spaltenkopf),
bis 640 px wird jede Zeile eine Karte: erste Zelle = Titel, darunter je Zelle der Spaltenkopf klein grau + Wert. */
@media (max-width:640px){
.s2u-tabelle.s2u-stapel{overflow:visible;border-radius:0;box-shadow:none}
.s2u-stapel table{min-width:0!important}
.s2u-stapel table,.s2u-stapel tbody,.s2u-stapel tr,.s2u-stapel tbody th,.s2u-stapel tbody td{display:block;width:auto}
.s2u-stapel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.s2u-stapel tbody tr{padding:18px 18px 20px;border-radius:var(--s2-r-karte);background:#fff;box-shadow:0 0 0 1px #e4e4e2}
.s2u-stapel tbody tr+tr{margin-top:12px}
.s2u-stapel tbody tr>*{position:static;min-width:0;padding:0;border:0;background:none;white-space:normal}
.s2u-stapel tbody tr>*+*{margin-top:12px}
.s2u-stapel tbody tr>:first-child{font-weight:600;font-size:16px;color:#141414}
.s2u-stapel tbody tr>td.s2u-wir{margin-inline:-10px;padding:8px 10px;border-radius:10px;background:#f1f1f0}
.s2u-stapel [data-label]::before{content:attr(data-label);display:block;margin-bottom:3px;font-size:12.5px;font-weight:600;line-height:1.3;color:#6e6e6b}
}
/* ---------- zitat ---------- */
.s2u-zitat{max-width:900px;margin:0}
.s2u-zitat blockquote{margin:0;font-family:var(--s2-sans);font-weight:500;font-size:clamp(22px,1.2vw + 15px,30px);line-height:1.35;letter-spacing:-.02em;color:#141414;text-wrap:pretty}
.s2u-zitat blockquote::before{content:"\201C";display:block;height:.5em;margin-bottom:.1em;font-size:2em;line-height:1;color:#e4e4e2}
.s2u-zitat figcaption{display:flex;flex-direction:column;gap:2px;margin-top:24px;font-size:15px;color:var(--s2-grau)}
.s2u-zitat figcaption b{color:var(--s2-schwarz);font-weight:600}
/* ---------- zahl-mit-quelle ---------- */
.s2u-zahlen{display:grid;grid-template-columns:repeat(var(--s2u-sp,3),minmax(0,1fr));gap:var(--s2-spalt)}
.s2u-zahl{display:flex;flex-direction:column;padding:clamp(22px,2.4vw,32px);border-radius:var(--s2-r-kachel);background:#f1f1f0}
.s2u-zahl-wert{font-family:var(--s2-sans);font-weight:600;font-size:clamp(44px,3vw + 14px,68px);line-height:1;letter-spacing:-.04em;color:var(--s2-schwarz);font-variant-numeric:tabular-nums}
.s2u-zahl-text{margin-top:14px;font-size:15.5px;line-height:1.5;color:#141414;max-width:32ch}
.s2u-zahl-quelle{margin-top:auto;padding-top:18px;font-size:12.5px;line-height:1.45;color:var(--s2-grau)}
.s2u-zahl-quelle a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--s2-linie-stark)}
/* ---------- app-ansicht (Bild oder HTML-Mock auf glatter Fläche) ---------- */
.s2u-app{margin:0}
.s2u-app .s2u-flaeche{display:grid;place-items:center;padding:clamp(24px,4vw,56px);min-height:280px}
.s2u-app .s2u-flaeche>img{width:100%;max-width:760px;height:auto;border-radius:10px;box-shadow:0 0 0 1px #e4e4e2;background:#fff} /* innen 10 = 14 außen minus Rand */
.s2u-app figcaption{margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--s2-grau-hell)}
.s2u-app-mock{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px}
/* Bugjagd 18.10.: App-Nachbau darf am Handy nicht breiter als die Fläche werden (/funktionen/segmente/ ragte 75 px über den Rand) */
.s2u-app .s2u-flaeche{grid-template-columns:minmax(0,1fr)}
.s2u-app-mock{min-width:0;max-width:100%}
.s2u-app-mock>*{min-width:0;max-width:100%}
.s2u-app-mock .s2-karte-liste>li{flex-wrap:wrap}
/* ---------- video-platzhalter ---------- */
.s2u-video{margin:0}
.s2u-video .s2u-flaeche{display:grid;place-items:center;aspect-ratio:16/9;width:100%}
.s2u-video-knopf{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #e4e4e2;color:#141414}
.s2u-video-knopf svg{width:30px;height:30px;margin-left:4px}
.s2u-video-hinweis{position:absolute;left:20px;bottom:18px;padding:7px 12px;border-radius:var(--s2-r-rund);background:#fff;font:600 12.5px/1 var(--s2-sans);color:#141414}
.s2u-video figcaption{margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--s2-grau-hell)}
/* ---------- cta-band (clean 18.10.: mittig, ruhig) ---------- */
.s2u-cta,.s2u-cta.pink,.s2u-cta.gelb,.s2u-cta.orange,.s2u-cta.flieder{display:flex;flex-direction:column;align-items:center;gap:28px;padding:clamp(44px,6vw,96px) clamp(24px,4vw,64px);border-radius:var(--s2-r-kachel);background:#f1f1f0;text-align:center}
.s2u-cta>div:first-child{display:flex;flex-direction:column;align-items:center}
.s2u-cta .s2u-cta-titel{font-family:var(--s2-sans);font-weight:600;font-size:clamp(30px,1.8vw + 16px,46px);line-height:1.1;letter-spacing:-.03em;color:#141414;max-width:20ch;text-wrap:balance}
.s2u-cta-text{margin-top:16px;font-size:17px;line-height:1.5;color:#6e6e6b;max-width:46ch;text-wrap:balance}
.s2u-cta .s2-knopfreihe{justify-content:center}
/* ---------- verwandte-seiten ---------- */
.s2u-verwandt-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s2-spalt);border-top:1px solid var(--s2-linie)}
.s2u-verwandt-liste li{border-bottom:1px solid var(--s2-linie)}
.s2u-verwandt-liste a{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 2px;height:100%}
.s2u-verwandt-liste b{display:block;font-size:16.5px;font-weight:600;line-height:1.35;color:var(--s2-schwarz)}
.s2u-verwandt-liste small{display:block;margin-top:4px;font-size:14px;line-height:1.45;color:var(--s2-grau)}
.s2u-verwandt-liste .s2-ic{width:18px;height:18px;margin-top:2px;color:var(--s2-schwarz);transition:transform 300ms var(--s2-kurve)}
.s2u-verwandt-liste a:hover .s2-ic{transform:translateX(3px)}
.s2u-verwandt-liste a:hover b{text-decoration:underline;text-underline-offset:4px}
/* ---------- faq (nutzt sektionen2/faq/faq.css über die Klasse s2-faq) ---------- */
.s2u-faq .s2-faq-liste{max-width:none;margin:0}
.s2u-faq h2{margin-bottom:clamp(28px,3vw,40px)}
/* ---------- artikel-text: Lesebreite, Zwischenüberschriften, Listen, Tabellen ---------- */
.s2u-artikel{max-width:var(--s2u-lese);color:var(--s2-tinte);font-size:clamp(17px,.3vw + 15.8px,18px);line-height:1.7}
.s2u-artikel>*+*{margin-top:1.05em}
.s2u-artikel h2{font-size:clamp(30px,1.6vw + 18px,42px);margin-top:1.9em;max-width:none}
.s2u-artikel h3{font-size:20px;margin-top:1.7em}
.s2u-artikel h2+*,.s2u-artikel h3+*{margin-top:.6em}
.s2u-artikel>:first-child{margin-top:0}
.s2u-artikel p{text-wrap:pretty}
.s2u-artikel b,.s2u-artikel strong{color:var(--s2-schwarz);font-weight:600}
.s2u-artikel a{color:var(--s2-schwarz);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--s2-linie-stark)}
.s2u-artikel a:hover{text-decoration-color:var(--s2-schwarz)}
.s2u-artikel ul,.s2u-artikel ol{padding-left:1.3em}
.s2u-artikel ul{list-style:disc}.s2u-artikel ol{list-style:decimal}
.s2u-artikel li+li{margin-top:.4em}
.s2u-artikel li::marker{color:var(--s2-grau-hell)}
.s2u-artikel blockquote{margin-left:0;padding:4px 0 4px 22px;border-left:3px solid #e4e4e2;color:#141414;font-family:var(--s2-sans);font-weight:500;font-size:1.15em;line-height:1.45}
.s2u-artikel figure{margin-inline:0}
.s2u-artikel img{width:100%;height:auto;border-radius:var(--s2-r-karte)}
.s2u-artikel figcaption{margin-top:10px;font-size:13.5px;color:var(--s2-grau-hell)}
.s2u-artikel table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.s2u-artikel .s2u-tabelle table{min-width:480px}
.s2u-artikel :not(.s2u-tabelle)>table{display:block;overflow-x:auto}
.s2u-artikel th,.s2u-artikel td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--s2-linie)}
.s2u-artikel thead th{font-weight:600;color:var(--s2-schwarz);background:var(--s2-flaeche)}
.s2u-artikel hr{height:1px;border:0;background:var(--s2-linie);margin:2.2em 0}
.s2u-artikel code{padding:2px 6px;border-radius:6px;background:var(--s2-flaeche);font-size:.9em}
.s2u-artikel .s2u-hinweis{padding:18px 22px;border-radius:var(--s2-r-karte);background:#f1f1f0;color:var(--s2-tinte);font-size:.94em}
/* ---------- Muster-Markierung (nur _muster) ---------- */
.s2u-muster-marke{display:inline-flex;align-items:center;height:26px;padding:0 10px;margin-bottom:10px;border-radius:var(--s2-r-rund);background:#141414;color:#fff;font:600 11.5px/1 var(--s2-sans);letter-spacing:.06em;text-transform:uppercase}
.s2u-muster-band{padding:12px 16px;margin-top:20px;border-radius:var(--s2-r-karte);background:#f1f1f0;font-size:14px;line-height:1.5;color:var(--s2-tinte);max-width:860px}
/* ---------- 404 ---------- */
.s2u-404-zahl{font-family:var(--s2-sans);font-weight:600;font-size:clamp(96px,12vw,180px);line-height:.9;color:#141414;letter-spacing:-.05em}
/* ---------- Gemeinsame Teile der Startseite auf Unterseiten neutral (Farben weg 18.10.2026). Startseite selbst bleibt unberührt. ---------- */
/* Leiste (kommt aus /style.css der Startseite): auf Unterseiten ohne bunten Schein unter "Kostenfrei starten", Schatten neutral */
.s2u-seite .leiste.da{border-color:#e4e4e2;box-shadow:0 8px 24px -14px rgba(20,20,20,.16)}
/* 18.10.2026 abends (Gründer): Knopf "Kostenfrei starten" in der Leiste wieder genau wie auf der Startseite (bunter Schein, Verlauf aus /style.css), keine Überschreibung mehr */
.s2u-seite .s2-knopf{background:#141414;box-shadow:none} /* Haupt-Knopf: schwarz, flach (Farbfilter entfernt den Verlauf) */
.s2u-seite .s2-knopf::before{display:none}
.s2u-seite .s2-knopf.hell{background:#fff;color:#141414;box-shadow:0 0 0 1px #e4e4e2}
.s2u-seite .s2-kachel{background:#f1f1f0}
.s2u-seite .s2-kachel::before,.s2u-seite .s2-kachel::after{display:none}
.s2u-seite .s2-symbol{background:#f1f1f0;color:#141414;box-shadow:none}
.s2u-seite .s2-symbol.hell{background:#fff;color:#141414;box-shadow:0 0 0 1px #e4e4e2}
.s2u-seite .s2-symbol.schwarz{background:#141414;color:#fff;box-shadow:none}
.s2u-seite .s2-status,.s2u-seite .s2-status.ok,.s2u-seite .s2-status.warte{background:#f1f1f0;color:#141414}
.s2u-seite .s2-status.warte{color:#6e6e6b}
.s2u-seite .s2-status.schwarz{background:#141414;color:#fff}
.s2u-seite .s2-abzeichen .flagge{display:none}
.s2u-seite .s2-siegel{background:#fff;box-shadow:0 0 0 1px #e4e4e2}
.s2u-seite .s2-siegel::before{box-shadow:0 0 0 1px #e4e4e2}
.s2u-seite .s2-karte{box-shadow:var(--s2-schatten-schwebe)}
.s2u-seite .s2-karte.pille{background:#fff}
.s2u-seite .s2-chip{color:#141414;box-shadow:0 0 0 1px #e4e4e2}
.s2u-seite .s2-h2,.s2u-seite .s2-h3,.s2u-seite .s2-satz,.s2u-seite .s2-zahl{font-family:var(--s2-sans);font-weight:600;letter-spacing:-.03em}
.s2u-seite .s2-fuss .s2-fuss-satz{font-family:var(--s2-sans);font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.02em}
.s2u-seite .sc-ai .sc-ai-titel{font-family:var(--s2-sans);font-weight:600;font-size:19px;line-height:1.2;letter-spacing:-.02em}
.s2u-seite .sc-ai-nachricht.nutzer,.s2u-seite .sc-ai-senden{background:#141414}
/* Bugjagd 18.10. (B2): am Handy verdeckt der AI-Chat-Knopf im ersten Bildschirm den Kopf (z. B. WhatsApp-Beispiel). Er kommt erst,
wenn gescrollt wurde (bausteine.js setzt html.s2u-ai-zeigen; kurze Seiten sofort). Offen bleibt er immer sichtbar. */
@media (max-width:640px){
html.s2-js .s2u-seite .sc-ai{transition:opacity 300ms var(--s2-kurve),transform 300ms var(--s2-kurve),visibility 0s linear 0s}
html.s2-js:not(.s2u-ai-zeigen) .s2u-seite .sc-ai[data-zustand="zu"]{opacity:0;visibility:hidden;transform:translateY(16px);pointer-events:none;
transition:opacity 200ms var(--s2-kurve),transform 200ms var(--s2-kurve),visibility 0s linear 200ms}
}
/* ---------- Tablet / Handy ---------- */
/* Bugjagd 18.10.: lange Wörter ("Geschäftsbedingungen", "Auftragsverarbeitungsvertrag") liefen am Handy links/rechts aus dem Bild.
Bis 900 px dürfen Überschriften lange Wörter (ab 12 Zeichen) trennen, im Notfall wird umbrochen. */
@media (max-width:900px){
.s2u h1,.s2u h2,.s2u h3,.s2u-karte h3{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:12 5 5;overflow-wrap:break-word}
.s2 h1.s2u-h1{max-width:100%}
}
@media (max-width:1100px){
.s2u-verwandt-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
.s2u-karten{grid-template-columns:repeat(2,minmax(0,1fr))}
.s2u-schritte.vier{--s2u-sp:2}
}
@media (max-width:900px){
.s2u-schritte,.s2u-schritte.vier,.s2u-schritte.zwei{--s2u-sp:1}
.s2u-zahlen{--s2u-sp:1}
.s2u-toc ol{columns:1}
}
@media (max-width:640px){
.s2u-karten,.s2u-verwandt-liste{grid-template-columns:minmax(0,1fr)}
.s2u-karten{gap:12px}
.s2u-karte{padding:22px 22px 24px;gap:6px}
.s2u-inhalt .s2u-karte h3{font-size:17px}
.s2u-karte p{font-size:14.5px}
.s2u-trust{font-size:12.5px;gap:7px;padding:4px 12px 4px 4px;margin-bottom:22px;white-space:nowrap}
.s2u-trust-bilder i{width:22px;height:22px;margin-left:-7px}
.s2u-suche input{height:56px;font-size:16px;padding-left:50px}
.s2u-suche .s2-ic{left:20px}
.s2u-toc{padding:20px}
.s2u-tabelle th,.s2u-tabelle td{padding:13px 14px}
.s2u-tabelle tbody th{min-width:120px}
.s2u-cta .s2-knopfreihe{width:100%}
.s2u-app .s2u-flaeche{min-height:0} /* Bugjagd 18.10.: flache Bildstreifen standen am Handy verloren in 280 px hoher Fläche */
}
/* 18.10.2026 Bugjagd FB1–FB3 (gemeinsam):
FB1 Nachbau-Fläche nimmt volle Breite, damit min()-Breiten greifen; FB2 Standard-Abstand für schlichte div-Stapel im Nachbau;
FB3 breite Tabellen zwischen 641 und 900 px dürfen umbrechen und schrumpfen. */
.s2u-flaeche>.s2u-app-mock{width:100%;min-width:0}
.s2u-app-mock>div:not([class]){display:flex;flex-direction:column;gap:12px}
@media (min-width:641px) and (max-width:900px){
.s2u-tabelle{min-width:0!important;width:100%}
.s2u-tabelle th,.s2u-tabelle td{white-space:normal;word-break:normal;overflow-wrap:anywhere;font-size:14px;padding-left:8px;padding-right:8px}
}
/* 18.10.2026 spät (Gründer: "bitte Titel überall Serif, das Sans gefällt mir überhaupt nicht"): H1/H2 und große Titel wieder in Instrument Serif wie auf der Startseite.
Kartentitel und Fließtext bleiben Sans. */
.s2 h1.s2u-h1,.s2u-inhalt h2,.s2u-h2,.s2u-cta .s2u-cta-titel,.s2u-seite .s2-h2,.s2u-zitat blockquote,.s2u-404-zahl{
font-family:"Instrument Serif",Georgia,serif!important;font-weight:400!important;letter-spacing:-.015em!important}
.s2 h1.s2u-h1{font-size:clamp(46px,4.3vw + 12px,80px);line-height:1.02}
.s2u-inhalt h2,.s2u-h2{font-size:clamp(34px,2.4vw + 16px,56px);line-height:1.05}
.s2u-seite .s2 h1 em,.s2u-seite .s2 h2 em{font-family:inherit;font-size:1em;line-height:inherit}
/* 19.10.2026: Gesichter im Chip "300+ Unternehmen" wie im Hero der Startseite */
.s2u-trust-bilder i{overflow:hidden}
.s2u-trust-bilder i img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 28%}
/* 19.10.2026 (Gründer): Übersichtsseiten: Unterzeile etwas kleiner, breiter (Zeile 1 endet nach "SmartChat"), weniger Abstand zur H1 */
.s2u-typ-hub .s2u-kopf-unter{margin-top:14px} /* Gründer 19.10.: Schrift wieder groß, nur Abstand bleibt kleiner */
/* 19.10.2026: Übersichten: H1 breiter, damit lange Überschriften (Funktionen) in 2 Zeilen passen */
.s2u-typ-hub .s2 h1.s2u-h1,.s2u-typ-hub h1.s2u-h1{max-width:min(100%,980px);margin-inline:auto}
/* SEO 19.10.: Chip "300+" steht jetzt unter der Unterzeile */
.s2u-kopf-unter + .s2u-trust{margin:22px 0 0}
/* ===== 19.10.2026 Gründer (sehr deutlich, website-popup + Statistiken): bei JEDER 2- oder mehrzeiligen Überschrift und Unterzeile auf ALLEN Unterseiten
sollen die Zeilen ca. gleich breit sein (nie fast alles in Zeile 1 und ein kurzer Rest in Zeile 2). Stufe 1: CSS text-wrap:balance für alle Titel und
Unterzeilen (schlägt das "pretty" aus kern2/basis.css für .s2-text). Stufe 2: bausteine.js "Zeilen ausgleichen" für Browser ohne balance (älteres Safari)
und Fälle, in denen balance nicht greift (z. B. nicht trennbare Wörter wie "WhatsApp-Popup" in .s2b-nw). Sicherung: bausteine.css.vor-balance-19-10 ===== */
body.s2u-seite :is(h1,h2,h3,h4,.s2-h2,.s2-h3,.s2-h4,.s2-text,.s2u-kopf-unter,.s2s-text,.s2u-cta-text,.s2b-hero-satz,.s2-kopf>p,.s2s-kopf p,.s2u-kopf-text>p){text-wrap:balance}
/* 20.10.2026 Gründer: "Mehr zu …"-Hinweise in Karten und Texten überall fett (unterseiten.py inline() setzt .s2-mehr). Sicherung: bausteine.css.vor-satz-fluss-20-10 */
body.s2u-seite :is(a.s2-mehr,.s2-mehr,.s2-mehr a){font-weight:600}
/* ===== unterseiten/sektionen/sektionen.css ===== */
/* =====================================================================================================
SEKTIONS-BIBLIOTHEK für Unterseiten (18.10.2026, Gründer: "jede Unterseite muss aussehen wie die Startseite")
Gilt nur für Seiten mit body.s2u-bib (seite.json "sektionen" oder "bibliothek": true). Alle Klassen beginnen mit s2s-.
Maße, Kurven, Schatten und Abläufe 1:1 aus der Startseite (versionen/aufbau-v2/sektionen2/): Feld+Reiter aus fenster.css, Linie+Karten aus ablauf.css,
Scroll-Geschichte aus siegel.css, Nachricht in Schichten aus vorlage.css, Kacheln aus handys.css, Tabelle aus preise.css, FAQ aus faq.css.
Farben nur die 8 Dashboard-Werte (#ffffff #f1f1f0 #e4e4e2 #6e6e6b #141414), WhatsApp-UI und Logo-Kugel wie auf der Startseite.
Überschriften fette Sans, ein *Wort* als Serif-Akzent (--s2u-akzent aus bausteine.css). Bewegt wird nur transform und opacity (sektionen.js, ein Takt).
===================================================================================================== */
/* ---------- Grundmaß: Abstände wie zwischen zwei Startseiten-Sektionen ---------- */
.s2u-bib .s2u-inhalt{margin-top:clamp(96px,10vw,168px)}
.s2u-bib .s2u-inhalt>*+*{margin-top:clamp(112px,12vw,196px)}
.s2u-bib .s2u-inhalt>.s2u-stand{margin-top:clamp(72px,7vw,112px)}
.s2u-bib .s2u-inhalt>.s2s-sek-satz+*,.s2u-bib .s2u-inhalt>*+.s2s-sek-satz{margin-top:clamp(96px,10vw,160px)}
.s2s a:not(.s2-knopf):not(.s2-link-pfeil){color:#141414;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#e4e4e2;transition:text-decoration-color 200ms}
.s2s a:not(.s2-knopf):not(.s2-link-pfeil):hover{text-decoration-color:#141414}
/* ---------- Seitenkopf (H1) wie der Hero: groß, mittig, kommt weich herein ---------- */
.s2u-bib .s2u-kopf{gap:clamp(52px,5.6vw,88px);margin-top:clamp(40px,5.4vw,92px)}
.s2u-bib .s2 h1.s2u-h1{font-size:clamp(44px,4.4vw + 14px,84px);line-height:1.02;letter-spacing:-.045em;max-width:17ch}
.s2u-bib .s2u-kopf-unter{font-size:clamp(18px,.55vw + 15.5px,21px);max-width:46ch}
.s2u-bib .s2u-trust .s2-kugel{display:block}
@keyframes s2sRein{from{opacity:0;transform:translate3d(0,26px,0)}}
@keyframes s2sRaus{from{opacity:0;transform:translate3d(0,48px,0) scale(.97)}}
html.s2-js:not(.s2-statisch) .s2u-bib .s2u-kopf-text>*{animation:s2sRein 1100ms var(--s2-kurve) both}
html.s2-js:not(.s2-statisch) .s2u-bib .s2u-kopf-text>:nth-child(2){animation-delay:80ms}
html.s2-js:not(.s2-statisch) .s2u-bib .s2u-kopf-text>:nth-child(3){animation-delay:160ms}
html.s2-js:not(.s2-statisch) .s2u-bib .s2u-kopf-text>:nth-child(4){animation-delay:240ms}
html.s2-js:not(.s2-statisch) .s2u-bib .s2u-kopf-text>:nth-child(5){animation-delay:320ms}
/* Kopf-Bild: echtes App-Bild im Feld der Startseite (fenster.css .s2-fe-panel), kippt beim Scrollen flach (sektionen.js, nur transform) */
.s2s-schau{position:relative;margin:0;width:100%;max-width:1200px;perspective:1800px;perspective-origin:50% 0}
.s2s-schau-fenster{border-radius:28px;background:#f1f1f0;box-shadow:0 0 0 1px #e4e4e2;padding:8px;transform-origin:50% 0;
box-shadow:0 0 0 1px #e4e4e2,0 50px 90px -50px rgba(20,20,20,.35)}
.s2s-schau-innen{border-radius:22px;background:#fff;box-shadow:0 0 0 1px #e4e4e2;padding:clamp(6px,.8vw,12px);overflow:hidden}
.s2s-schau-innen img{display:block;width:100%;height:auto;border-radius:14px}
.s2s-schau.mit-handy{padding-right:clamp(0px,6vw,90px)}
.s2s-schau-handy{position:absolute;right:0;bottom:-7%;width:clamp(118px,19%,230px);padding:6px;border-radius:30px;background:#141414;box-shadow:var(--s2-schatten-tief)}
.s2s-schau-handy img{display:block;width:100%;height:auto;border-radius:24px}
html.s2-js:not(.s2-statisch) .s2s-schau{animation:s2sRaus 1400ms var(--s2-kurve) 300ms both}
html.s2-js:not(.s2-statisch) .s2s-schau-handy{animation:s2sRein 1200ms var(--s2-kurve) 900ms both}
.s2s-schau.kippt .s2s-schau-fenster{will-change:transform}
/* ---------- Sektionskopf (Chip, H2, ein Satz) wie .s2-kopf der Startseite ---------- */
.s2s-kopf{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:clamp(44px,5vw,80px)}
.s2s-kopf.mittig{align-items:center;text-align:center}
.s2s-kopf>.s2-chip{margin-bottom:22px}
.s2u-bib .s2u-inhalt h2.s2s-h2{font-size:clamp(36px,3.3vw + 10px,62px);line-height:1.03;letter-spacing:-.042em;max-width:17ch}
.s2s-kopf.mittig .s2s-h2,.s2s-schluss .s2s-h2{margin-inline:auto}
@media (min-width:901px){.s2u-bib .s2u-inhalt .s2s-kopf.s2s-eine-zeile h2.s2s-h2{max-width:none;white-space:nowrap}
.s2s-zeile.s2s-zeile-breit{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} /* 20.10. Option "titel_eine_zeile" (Gründer /support/): Titel bleibt in der Textspalte */
.s2s-text{margin-top:20px;font-size:clamp(17px,.4vw + 15.5px,19px);line-height:1.55;color:#6e6e6b;max-width:54ch;text-wrap:pretty}
.s2s-text+.s2s-text{margin-top:12px}
.s2s-kopf.mittig .s2s-text{margin-inline:auto;text-wrap:balance}
.s2s-text b,.s2s p b{color:#141414;font-weight:600}
.s2s-fuss{margin-top:clamp(24px,2.6vw,36px);font-size:15px;line-height:1.55;color:#6e6e6b;max-width:72ch}
.s2s-fuss.mittig,.s2s-sek-drei .s2s-fuss{margin-inline:auto;text-align:center}
.s2s-notiz{margin-top:14px;font-size:13.5px;line-height:1.5;color:#6e6e6b}
/* ---------- Kachel: ruhige Fläche wie die Kacheln der Startseite, neutral ---------- */
.s2s-bildflaeche{margin:0}
.s2s-kachel{position:relative;isolation:isolate;display:grid;place-items:center;border-radius:var(--s2-r-kachel);background:#f1f1f0;
padding:clamp(28px,4vw,56px) clamp(18px,3.4vw,48px);min-height:clamp(300px,32vw,460px);overflow:hidden}
.hat-bild .s2s-kachel{padding:clamp(18px,3vw,44px)}
/* 20.10. Einzelteil "iphone" (Gründer /support/): iPhone-Fläche der Funktionsvorlage, Variablen sonst nur auf body.s2b-seite */
.s2s-iphone{--s2b-kurve:cubic-bezier(.23,1,.32,1);--s2b-feder:cubic-bezier(.34,1.56,.64,1);--s2b-ios:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Instrument Sans",system-ui,sans-serif}
.hat-iphone .s2s-kachel{padding:0;background:transparent;min-height:0;overflow:visible}
/* ---------- Einzelteile ---------- */
.s2s-shot{width:100%;border-radius:14px;overflow:hidden;background:#fff;
box-shadow:0 0 0 1px rgba(20,20,20,.08),0 2px 6px rgba(20,20,20,.06),0 30px 60px rgba(20,20,20,.16)}
.s2s-shot img{display:block;width:100%;height:auto}
.s2s-shot.frei{box-shadow:none;background:none;border-radius:0}
.s2s-handy{width:min(250px,72%);padding:7px;border-radius:36px;background:#141414;box-shadow:var(--s2-schatten-tief)}
.s2s-handy img{display:block;width:100%;height:auto;border-radius:29px}
.s2s-wa{display:flex;flex-direction:column;gap:10px;width:min(100%,340px)}
.s2s-wa .s2-wa-blase{margin:0;max-width:100%;box-shadow:var(--s2-schatten-schwebe)}
.s2s-wa .s2-wa-blase.aus{align-self:flex-end;max-width:86%}
.s2s-wa .s2-wa-bild img{display:block;width:100%;height:100%;object-fit:cover}
.s2s-wa-dok{display:flex;align-items:center;gap:10px;margin:2px 2px 4px;padding:12px;border-radius:10px;background:#f1f1f0;font-size:13.5px;font-weight:600;color:#141414}
.s2s-wa-dok .s2-ic{width:20px;height:20px}
.s2s-karten-stapel{display:flex;flex-direction:column;gap:12px;width:min(100%,340px)}
.s2s-karten-stapel .s2-karte{width:100%}
.s2s-karten-stapel .s2-status{margin-left:auto}
.s2s-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.s2s-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:var(--s2-r-rund);background:#fff;box-shadow:0 0 0 1px #e4e4e2;font:600 13px/1 var(--s2-sans);color:#141414;white-space:nowrap}
.s2s-chip .s2-ic{width:15px;height:15px}
.s2s-chips.klein{justify-content:flex-start;gap:6px;margin-top:14px}
.s2s-chips.klein .s2s-chip{height:28px;padding:0 11px;background:#f1f1f0;box-shadow:none;font-size:12.5px;color:#141414}
.s2s-liste{display:flex;align-items:center;justify-content:space-between;gap:18px;width:min(100%,380px);padding:16px 16px 16px 20px;border-radius:14px;background:#fff;box-shadow:var(--s2-schatten-ruhig)}
.s2s-liste ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.s2s-liste li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;color:#141414}
.s2s-liste .haken{width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;background:#141414;color:#fff}
.s2s-liste .haken .s2-ic{width:12px;height:12px}
.s2s-feld{display:flex;align-items:center;gap:10px;width:min(100%,400px);height:56px;padding:0 8px 0 16px;border-radius:14px;background:#fff;box-shadow:var(--s2-schatten-ruhig);font-size:15px;color:#141414}
.s2s-feld>.s2-ic{width:18px;height:18px;flex:none;color:#6e6e6b}
.s2s-tipp{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2s-tipp .z{opacity:1}
.s2s-strich{display:block;flex:none;width:2px;height:20px;margin-left:-6px;border-radius:2px;background:#141414;opacity:0}
.s2s-feld-senden{margin-left:auto;width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;background:#141414;color:#fff}
.s2s-feld-senden .s2-ic{width:17px;height:17px}
.s2s-knopf-teil{position:relative;display:inline-flex;padding:18px 34px 30px 0}
.s2s-maus{position:absolute;right:6px;bottom:4px;width:26px;height:26px;filter:drop-shadow(0 2px 3px rgba(20,20,20,.25))}
.s2s-qr{display:flex;flex-direction:column;align-items:center;gap:10px;width:212px;padding:22px 20px 20px;border-radius:14px;background:#fff;box-shadow:var(--s2-schatten-schwebe);text-align:center}
.s2s-qr-code{width:118px;height:118px;padding:10px;border-radius:12px;box-shadow:0 0 0 1px #e4e4e2}
.s2s-qr-code svg{display:block;width:100%;height:100%}
.s2s-qr b{font:600 17px/1.2 var(--s2-sans);color:#141414}
.s2s-qr small{font-size:12.5px;line-height:1.4;color:#6e6e6b}
.s2s-stapel{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
/* Einzelteile spielen, sobald ihre Fläche sichtbar wird (.an setzt sektionen.js; ohne JS / statisch: Endzustand) */
html.s2-js:not(.s2-statisch) .s2s-spielt:not(.an) :is(.s2-wa-blase,.s2-karte,.s2s-chip,.s2s-liste li,.s2s-qr,.s2s-feld,.s2s-knopf-teil .s2-knopf){opacity:0;transform:translate3d(0,14px,0) scale(.97)}
.s2s-spielt :is(.s2-wa-blase,.s2-karte,.s2s-chip,.s2s-liste li,.s2s-qr,.s2s-feld,.s2s-knopf-teil .s2-knopf){transition:opacity 700ms var(--s2-kurve),transform 900ms var(--s2-kurve);transition-delay:calc(var(--k,0) * 140ms + 120ms)}
html.s2-js:not(.s2-statisch) .s2s-spielt:not(.an) .s2s-tipp .z{opacity:0}
.s2s-spielt .s2s-tipp .z{transition:opacity 60ms linear;transition-delay:calc(var(--z,0) * 42ms + 500ms)}
html.s2-js:not(.s2-statisch) .s2s-spielt.an .s2s-strich{animation:s2sStrich 1s steps(1) 400ms infinite}
@keyframes s2sStrich{0%{opacity:1}50%{opacity:0}}
html.s2-js:not(.s2-statisch) .s2s-spielt:not(.an) .s2s-maus{opacity:0;transform:translate3d(46px,34px,0)}
.s2s-spielt .s2s-maus{transition:opacity 500ms var(--s2-kurve) 500ms,transform 1300ms cubic-bezier(.25,.8,.3,1) 500ms}
html.s2-js:not(.s2-statisch) .s2s-spielt.an .s2s-knopf-teil .s2-knopf{animation:s2sDruck 380ms 1700ms var(--s2-kurve) both}
@keyframes s2sDruck{50%{transform:scale(.94)}}
html.s2-js:not(.s2-statisch) .s2s-spielt.aus-sicht .s2s-strich{animation-play-state:paused}
/* ---------- zeile: Text links, App-Teil rechts ---------- */
.s2s-zeile{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(36px,6vw,96px);align-items:center}
.s2s-zeile.umgekehrt>.s2s-zeile-text{order:2}
.s2s-zeile-text>.s2s-kopf{margin-bottom:0}
.s2s-zeile-text>.s2-link-pfeil{margin-top:28px}
.s2s-punkte{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:20px}
.s2s-punkte li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start}
.s2s-punkte .s2-ic{width:20px;height:20px;margin-top:2px;color:#141414}
.s2s-punkte b{display:block;font:600 17px/1.3 var(--s2-sans);color:#141414}
.s2s-punkte p{margin:5px 0 0;font-size:15.5px;line-height:1.5;color:#6e6e6b;max-width:46ch}
/* ---------- schritte: Linie füllt sich, Karten abwechselnd (ablauf.css) ---------- */
.s2s-ab{position:relative;list-style:none;margin:0 auto;padding:0;max-width:1040px}
.s2s-ab-linie{position:absolute;left:50%;top:var(--ab-oben,40px);bottom:var(--ab-unten,40px);width:2px;margin-left:-1px;border-radius:2px;background:#e4e4e2;overflow:hidden}
.s2s-ab-fuell{position:absolute;inset:0;background:#141414;transform-origin:50% 0;transform:scaleY(0);will-change:transform}
html.s2-statisch .s2s-ab-fuell{transform:none}
.s2s-ab-schritt{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);align-items:center}
.s2s-ab-schritt+.s2s-ab-schritt{margin-top:clamp(-64px,-4vw,-24px)}
.s2s-ab-schritt.li .s2s-ab-karte{grid-column:1;grid-row:1}
.s2s-ab-schritt.re .s2s-ab-karte{grid-column:3;grid-row:1}
.s2s-ab-nr{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
background:#fff;color:#6e6e6b;box-shadow:0 0 0 1px #e4e4e2;font:600 14px/1 var(--s2-sans);transition:background 400ms var(--s2-kurve),color 400ms var(--s2-kurve),box-shadow 400ms var(--s2-kurve),transform 500ms var(--s2-kurve)}
.s2s-ab-schritt.an .s2s-ab-nr,html.s2-statisch .s2s-ab-nr{background:#141414;color:#fff;box-shadow:0 0 0 5px #fff,0 0 0 6px #e4e4e2;transform:scale(1.06)}
.s2s-ab-karte{display:flex;flex-direction:column;background:#fff;border-radius:var(--s2-r-kachel);box-shadow:var(--s2-schatten-ruhig);padding:26px 26px 24px;
transition:opacity 800ms var(--s2-kurve),transform 1000ms var(--s2-kurve)}
.s2u-inhalt .s2s-ab-karte h3{font:600 21px/1.25 var(--s2-sans);letter-spacing:-.01em;color:#141414}
.s2s-ab-karte>p{margin-top:8px;font-size:15.5px;line-height:1.55;color:#6e6e6b}
.s2s-ab-teil{display:flex;justify-content:center;margin-top:22px;padding:22px 16px;border-radius:calc(var(--s2-r-kachel) - 12px);background:#f1f1f0}
html.s2-js:not(.s2-statisch) .s2s-ab-schritt:not(.da) .s2s-ab-karte{opacity:0;transform:translate3d(-36px,14px,0)}
html.s2-js:not(.s2-statisch) .s2s-ab-schritt.re:not(.da) .s2s-ab-karte{transform:translate3d(36px,14px,0)}
/* ---------- reiter: Feld mit Reitern (fenster.css .s2-fe-panel) ---------- */
.s2s-rt{width:100%;border-radius:28px;background:#f1f1f0;box-shadow:0 0 0 1px #e4e4e2;padding:8px}
.s2s-rt-leiste{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:6px;padding:6px 6px 14px}
.s2s-reiter{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 12px;border:0;border-radius:14px;background:transparent;
font:500 15px/1 var(--s2-sans);color:#6e6e6b;cursor:pointer;transition:background 300ms var(--s2-kurve),color 300ms var(--s2-kurve),box-shadow 300ms var(--s2-kurve)}
.s2s-reiter .s2-ic{width:18px;height:18px}
.s2s-reiter:hover{color:#141414}
.s2s-reiter.an{background:#fff;color:#141414;box-shadow:0 0 0 1px #e4e4e2,0 1px 2px rgba(20,20,20,.04)}
.s2s-reiter:focus-visible{outline:2px solid #141414;outline-offset:2px}
.s2s-reiter .lauf{position:absolute;left:18px;right:18px;bottom:6px;height:2px;border-radius:2px;background:#141414;transform:scaleX(0);transform-origin:0 50%;opacity:0}
.s2s-reiter.an.lauft .lauf{opacity:.85;animation:s2sLauf var(--rt-takt,6s) linear forwards}
@keyframes s2sLauf{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.s2s-rt-koerper{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:12px;background:#fff;border-radius:22px;box-shadow:0 0 0 1px #e4e4e2;padding:12px}
.s2s-rt-links{position:relative;padding:28px 18px 18px 26px;display:grid;grid-template-rows:1fr auto;gap:28px;min-height:clamp(440px,52vh,520px)}
.s2s-rt-texte{display:grid}
.s2s-rt-text{grid-area:1 / 1;opacity:0;transform:translate3d(0,10px,0);pointer-events:none;transition:opacity 450ms var(--s2-kurve),transform 600ms var(--s2-kurve)}
.s2s-rt-text.an{opacity:1;transform:none;pointer-events:auto;transition-delay:120ms}
.s2u-inhalt .s2s-rt-text h3{font:600 clamp(26px,1.6vw + 8px,34px)/1.1 var(--s2-sans);letter-spacing:-.03em;color:#141414;max-width:16ch}
.s2s-rt-satz{margin-top:12px;font-size:15.5px;line-height:1.55;color:#6e6e6b}
.s2s-rt-text .s2s-punkte{margin-top:26px;gap:18px}
.s2s-rt-text .s2s-punkte b{font-weight:500}
.s2s-rt-text .s2s-punkte p{font-size:14.5px}
.s2s-rt-knopf{width:100%}
.s2s-rt-rechts{position:relative;border-radius:16px;background:#f1f1f0;overflow:hidden;min-height:0}
.s2s-rt-vs{position:absolute;inset:0;opacity:0;transform:translate3d(0,16px,0) scale(.985);pointer-events:none;transition:opacity 450ms var(--s2-kurve),transform 700ms var(--s2-kurve)}
.s2s-rt-vs.an{opacity:1;transform:none;transition-delay:100ms}
.s2s-rt-vs>.s2s-shot{position:absolute;left:7%;top:8%;width:132%}
.s2s-rt-vs>:not(.s2s-shot){position:absolute;inset:0;margin:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:28px}
/* ohne JS und im Endzustand: alle Reiter-Texte untereinander lesbar? Nein: erster Reiter sichtbar, die anderen bleiben im HTML (Suche liest sie). */
/* ---------- geschichte: Scroll-Geschichte (siegel.css) ---------- */
.s2s-gs-p{display:none}
.s2s-gs-buehne.s2-buehne{height:auto}
.s2s-gs-buehne>.s2-buehne-innen{position:relative;height:auto;overflow:visible;padding-top:0;display:block}
.s2s-gs-links>.s2s-kopf{margin-bottom:clamp(28px,3vw,44px)}
.s2s-gs-liste{list-style:none;margin:0;padding:0;display:grid;gap:56px}
.s2s-gs-punkt{display:grid;gap:22px}
.s2s-gs-wort{display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;align-items:start}
.s2s-gs-sym{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#141414;background:#fff;box-shadow:0 0 0 1px #e4e4e2}
.s2s-gs-sym .s2-ic{width:22px;height:22px}
.s2u-inhalt .s2s-gs-wort h3{margin-top:6px;font:600 clamp(23px,1vw + 14px,30px)/1.15 var(--s2-sans);letter-spacing:-.025em;color:#141414}
.s2s-gs-wort p{margin-top:8px;font-size:clamp(16px,.35vw + 14.5px,17.5px);line-height:1.55;color:#6e6e6b;max-width:42ch;text-wrap:pretty}
.s2s-gs-mini{display:grid;place-items:center;border-radius:var(--s2-r-kachel);background:#f1f1f0;padding:32px 16px;min-height:320px}
.s2s-gs-bild{display:flex;justify-content:center;width:min(400px,100%)}
.s2s-gs-bild>.s2s-shot{width:100%}
.s2s-gs-feld,.s2s-gs-takt{display:none}
@media (min-width:761px){
.s2s-gs-punkt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,88px);align-items:center}
.s2s-gs-mini{min-height:440px;padding:40px}
html.s2-js:not(.s2-statisch) .s2s-gs-buehne.s2-buehne{height:calc(100vh + var(--s2-schritte) * var(--s2-weg))}
html.s2-js:not(.s2-statisch) .s2s-gs-buehne>.s2-buehne-innen{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;padding-top:var(--s2-leiste)}
html.s2-js:not(.s2-statisch) .s2s-gs-zwei{--g:clamp(40px,5vw,88px);position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--g);align-items:center}
html.s2-js:not(.s2-statisch) .s2s-gs-feld{display:block;height:min(600px,calc(100svh - var(--s2-leiste) - 64px));min-height:440px;border-radius:var(--s2-r-kachel);background:#f1f1f0}
html.s2-js:not(.s2-statisch) .s2s-gs-liste{display:grid;gap:0;overflow:hidden;height:230px}
html.s2-js:not(.s2-statisch) .s2s-gs-punkt{grid-area:1/1;display:flex;align-items:center}
html.s2-js:not(.s2-statisch) .s2s-gs-wort{width:100%;will-change:transform,opacity}
html.s2-js:not(.s2-statisch) .s2s-gs-mini{position:absolute;z-index:1;top:0;bottom:0;right:0;width:calc((100% - var(--g)) / 2);min-height:0;padding:44px;
background:none;border-radius:0;pointer-events:none}
html.s2-js:not(.s2-statisch) .s2s-gs-bild{will-change:transform,opacity}
html.s2-js:not(.s2-statisch) .s2s-gs-punkt+.s2s-gs-punkt .s2s-gs-wort,html.s2-js:not(.s2-statisch) .s2s-gs-punkt+.s2s-gs-punkt .s2s-gs-bild{opacity:0}
html.s2-js:not(.s2-statisch) .s2s-gs-takt{display:flex;gap:8px;margin-top:18px}
.s2s-gs-takt i{display:block;width:44px;height:3px;border-radius:2px;background:#e4e4e2;overflow:hidden}
.s2s-gs-takt b{display:block;width:100%;height:100%;background:#141414;transform-origin:0 50%;transform:scaleX(0);will-change:transform}
}
@media (min-width:761px) and (max-height:760px){
html.s2-js:not(.s2-statisch) .s2s-gs-links .s2s-h2{font-size:clamp(32px,3vw + 4px,48px)}
html.s2-js:not(.s2-statisch) .s2s-gs-liste{height:200px}
}
/* Die Bühne liegt außerhalb des Abstands-Rasters: der Kopf der Sektion steht IN der Bühne */
.s2u-bib .s2u-inhalt>.s2s-sek-geschichte+*{margin-top:clamp(80px,9vw,140px)}
/* ---------- nachricht: WhatsApp-Nachricht zieht sich in Schichten auseinander (vorlage.css) ---------- */
.s2s-nl-buehne{position:relative;display:flex;justify-content:center}
.s2s-nl-stapel{--z:1;position:relative;width:min(100%,360px);display:flex;flex-direction:column}
.s2s-nl{position:relative}
.s2s-nl-karte{position:relative;z-index:1;background:#fff;box-shadow:0 0 0 1px #e4e4e2}
.s2s-nl-karte.kopf{border-radius:16px 16px 4px 4px;padding:6px 6px 0;overflow:hidden}
.s2s-nl-karte.kopf img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px 12px 4px 4px}
.s2s-nl-karte.kopf.leer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:16/9;padding:0;background:#f1f1f0;color:#6e6e6b;font-size:13px;font-weight:600}
.s2s-nl-karte.kopf.leer .s2-ic{width:26px;height:26px}
.s2s-nl-karte.text{border-radius:4px;padding:6px 6px 4px;font-size:14px;line-height:1.45;color:#141414}
.s2s-nl-karte.text .s2-wa-text{padding:6px 8px 2px}
.s2s-nl-karte.knopf{border-radius:4px 4px 16px 16px;display:flex;align-items:center;justify-content:center;gap:7px;padding:13px;font-weight:600;font-size:14.5px;color:var(--s2-wa-knopf)}
.s2s-nl-karte.knopf .s2-ic{width:16px;height:16px}
/* Auseinanderziehen: --z (0 = zusammen, 1 = auseinander) setzt sektionen.js am Stapel; nur transform/opacity */
.s2s-nl.l1{transform:translate3d(0,calc(var(--z) * -34px),0)}
.s2s-nl.l3{transform:translate3d(0,calc(var(--z) * 34px),0)}
.s2s-nl.l1 .s2s-nl-karte,.s2s-nl.l3 .s2s-nl-karte{box-shadow:0 0 0 1px #e4e4e2,0 24px 48px -26px rgba(20,20,20,calc(var(--z) * .35))}
.s2s-nl-linie{position:absolute;top:50%;height:1px;width:clamp(40px,7vw,110px);background:#141414;transform:scaleX(var(--z));opacity:var(--z)}
.s2s-nl.re .s2s-nl-linie{left:100%;transform-origin:0 50%}
.s2s-nl.li .s2s-nl-linie{right:100%;transform-origin:100% 50%}
.s2s-nl-linie::after{content:"";position:absolute;top:-3.5px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px #141414}
.s2s-nl.re .s2s-nl-linie::after{right:-4px}.s2s-nl.li .s2s-nl-linie::after{left:-4px}
.s2s-nl-label{position:absolute;top:50%;width:clamp(180px,20vw,260px);transform:translate3d(0,calc(-50% + (1 - var(--z)) * 12px),0);opacity:var(--z)}
.s2s-nl.re .s2s-nl-label{left:calc(100% + clamp(40px,7vw,110px) + 18px)}
.s2s-nl.li .s2s-nl-label{right:calc(100% + clamp(40px,7vw,110px) + 18px);text-align:right}
.s2u-inhalt .s2s-nl-label h3{font:600 clamp(22px,1vw + 12px,28px)/1.15 var(--s2-sans);letter-spacing:-.025em;color:#141414}
.s2s-nl-label p{margin-top:6px;font-size:14.5px;line-height:1.5;color:#6e6e6b}
html.s2-statisch .s2s-nl-stapel{--z:1}
/* ---------- drei: drei Kacheln (handys.css) ---------- */
.s2s-drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2-spalt)}
.s2s-drei-karte{display:flex;flex-direction:column;border-radius:var(--s2-r-kachel);background:#f1f1f0;overflow:hidden}
.s2s-drei-kopf{padding:30px 28px 6px;text-align:center;display:flex;flex-direction:column;align-items:center}
.s2u-inhalt .s2s-drei-kopf h3{font:600 clamp(22px,.8vw + 14px,27px)/1.15 var(--s2-sans);letter-spacing:-.025em;color:#141414}
.s2s-drei-kopf p{margin-top:8px;font-size:15px;line-height:1.5;color:#6e6e6b;max-width:34ch;text-wrap:balance}
.s2s-drei-kopf .s2s-chips.klein{justify-content:center}
.s2s-drei-kopf .s2s-chips.klein .s2s-chip{background:#fff}
.s2s-drei-bild{flex:1;display:flex;align-items:center;justify-content:center;padding:26px 20px 30px}
.s2s-drei-bild .s2s-wa{width:100%;max-width:320px}
.s2s-drei-bild .s2-wa-blase{font-size:13.5px}
/* ---------- satz: großer Satz, wird Wort für Wort schwarz (vorlage.css .s2-gs-satz) ---------- */
.s2s-satz{max-width:21ch;margin-inline:auto;text-align:center;font:600 clamp(32px,3.2vw + 10px,60px)/1.12 var(--s2-sans);letter-spacing:-.04em;color:#141414;text-wrap:balance}
.s2s-satz .w{opacity:1}
.s2s-satz .w em{font-family:var(--s2u-akzent);font-style:italic;font-weight:400;letter-spacing:-.01em}
html.s2-js:not(.s2-statisch) .s2s-satz.laeuft .w{opacity:.18}
.s2s-satz .w.grau{color:#6e6e6b}
/* ---------- tabelle (preise.css) ---------- */
.s2s-tabelle{max-width:1000px;margin:0 auto;overflow-x:auto;-webkit-overflow-scrolling:touch}
.s2s-tabelle table{width:100%;border-collapse:collapse;font-size:15.5px}
.s2s-tabelle th,.s2s-tabelle td{padding:18px 14px;text-align:center;border-bottom:1px solid #e4e4e2;color:#141414;vertical-align:middle}
.s2s-tabelle thead th{font:600 16px/1.3 var(--s2-sans);padding-bottom:20px;border-bottom:1px solid #141414}
.s2s-tabelle tbody th{text-align:left;font-weight:500;color:#6e6e6b;padding-left:4px}
.s2s-tabelle thead th:first-child{text-align:left;padding-left:4px;color:#6e6e6b;font-weight:500}
.s2s-tabelle td{font-weight:600}
.s2s-tabelle .hervor{background:#f1f1f0}
.s2s-tabelle thead .hervor{border-radius:14px 14px 0 0}
.s2s-tabelle tbody tr:last-child .hervor{border-radius:0 0 14px 14px}
.s2s-haken{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#141414;color:#fff}
.s2s-haken .s2-ic{width:13px;height:13px}
.s2s-strich-leer{color:#6e6e6b}
/* ---------- faq (faq.css) ---------- */
.s2s-sek-faq .s2s-faq-liste{max-width:820px;margin:0 auto}
/* ---------- abschluss ---------- */
.s2s-schluss{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(24px,4vw,48px) 0}
.s2s-schluss-kugel{margin-bottom:28px}
.s2s-schluss .s2s-text{margin-inline:auto;text-wrap:balance}
.s2s-schluss .s2-knopfreihe{margin-top:34px;justify-content:center}
/* ---------- Übersicht (Hub) im Startseiten-Look: Karten erscheinen weich, Spalte für Spalte ---------- */
.s2u-bib.s2u-typ-hub .s2u-inhalt{margin-top:clamp(40px,4vw,60px)}
.s2u-bib .s2u-raster-werkzeug{position:relative;z-index:2}
html.s2-js:not(.s2-statisch) .s2u-bib .s2u-raster-werkzeug{animation:s2sRein 1100ms var(--s2-kurve) 380ms both}
.s2u-bib .s2u-suche input{height:64px;box-shadow:0 1px 2px rgba(20,20,20,.04),0 18px 40px -24px rgba(20,20,20,.22)}
.s2u-bib .s2u-karte{transition:box-shadow 300ms var(--s2-kurve),transform 400ms var(--s2-kurve),opacity 800ms var(--s2-kurve)}
.s2u-bib .s2u-karte:hover{transform:translate3d(0,-3px,0);box-shadow:0 0 0 1px #e4e4e2,0 22px 44px -26px rgba(20,20,20,.28)}
html.s2-js:not(.s2-statisch) .s2u-bib .s2u-karte.s2s-wartet{opacity:0;transform:translate3d(0,22px,0)}
.s2u-bib .s2u-karte.s2s-kommt{transition:opacity 800ms var(--s2-kurve) var(--s2-v,0ms),transform 1000ms var(--s2-kurve) var(--s2-v,0ms),box-shadow 300ms var(--s2-kurve)}
/* ---------- Tablet ---------- */
@media (max-width:1100px){
.s2s-rt-koerper{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.s2s-reiter{font-size:14px;gap:8px}
.s2s-drei{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.s2s-nl-label{width:clamp(150px,18vw,220px)}
}
@media (max-width:900px){
.s2s-zeile{grid-template-columns:minmax(0,1fr)}
.s2s-zeile.umgekehrt>.s2s-zeile-text{order:0}
}
/* ---------- Handy ---------- */
@media (max-width:760px){
.s2u-bib .s2u-inhalt>*+*{margin-top:clamp(96px,24vw,128px)}
.s2u-bib .s2u-kopf{gap:44px}
.s2s-schau-fenster{border-radius:20px;padding:5px}
.s2s-schau-innen{border-radius:16px;padding:4px}
.s2s-schau-innen img{border-radius:12px}
.s2s-schau.mit-handy{padding-right:22%}
.s2s-schau-handy{width:30%;bottom:-12%;padding:4px;border-radius:20px}
.s2s-schau-handy img{border-radius:16px}
.s2s-kachel{min-height:260px;border-radius:24px}
/* schritte: Linie links, Karten rechts */
.s2s-ab-linie{left:18px}
.s2s-ab-schritt{grid-template-columns:36px minmax(0,1fr);column-gap:14px;align-items:start}
.s2s-ab-schritt+.s2s-ab-schritt{margin-top:28px}
.s2s-ab-schritt.li .s2s-ab-karte,.s2s-ab-schritt.re .s2s-ab-karte{grid-column:2}
.s2s-ab-nr{grid-column:1;margin-top:22px}
.s2s-ab-karte{padding:20px 18px 18px;border-radius:24px}
.s2u-inhalt .s2s-ab-karte h3{font-size:19px}
.s2s-ab-teil{border-radius:14px;padding:18px 12px}
html.s2-js:not(.s2-statisch) .s2s-ab-schritt:not(.da) .s2s-ab-karte,html.s2-js:not(.s2-statisch) .s2s-ab-schritt.re:not(.da) .s2s-ab-karte{transform:translate3d(0,18px,0)}
/* reiter: 2 x 2 Reiter, Bild unter dem Text */
.s2s-rt{border-radius:22px;padding:6px}
.s2s-rt-leiste{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px 4px 8px}
.s2s-reiter{height:44px;font-size:14px;gap:8px;padding:0 8px}
.s2s-reiter .lauf{left:14px;right:14px;bottom:5px}
.s2s-rt-koerper{grid-template-columns:minmax(0,1fr);padding:8px;border-radius:18px}
.s2s-rt-links{min-height:0;padding:18px 12px 8px;gap:24px}
.s2s-rt-rechts{min-height:300px;order:-1}
.s2s-rt-vs>.s2s-shot{left:5%;top:7%;width:170%}
.s2s-rt-knopf{display:none}
/* nachricht: Erklärungen unter jeder Schicht statt daneben */
.s2s-nl-stapel{width:min(100%,330px)}
.s2s-nl-linie{display:none}
.s2s-nl-label,.s2s-nl.re .s2s-nl-label,.s2s-nl.li .s2s-nl-label{position:relative;left:auto;right:auto;top:auto;width:auto;text-align:left;margin:16px 4px 22px;transform:none;opacity:1}
.s2s-nl.l1,.s2s-nl.l3{transform:none}
.s2s-nl.l2 .s2s-nl-karte.text{border-radius:16px}
.s2s-nl.l1 .s2s-nl-karte{border-radius:16px}
.s2s-nl.l3 .s2s-nl-karte{border-radius:16px}
/* drei: waagrecht wischen */
.s2s-drei{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--s2-rand));padding:4px var(--s2-rand) 8px;gap:12px}
.s2s-drei::-webkit-scrollbar{display:none}
.s2s-drei>.s2s-drei-karte{flex:none;width:min(86%,360px);scroll-snap-align:center}
.s2s-tabelle table{table-layout:fixed}
.s2s-tabelle th,.s2s-tabelle td{padding:12px 3px;font-size:12.5px;line-height:1.3;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.s2s-tabelle thead th{font-size:13px}
.s2s-tabelle tbody th,.s2s-tabelle thead th:first-child{width:28%;padding-left:0}
.s2s-haken{width:20px;height:20px}
}
@media (prefers-reduced-motion:reduce){.s2s *,.s2u-bib .s2u-kopf *{animation:none!important;transition:none!important}}
/* ===== 18.10.2026 HANDY mit Bewegung (nur bis 760 px, nicht im Endzustand ?statisch=1 / reduzierte Bewegung). Desktop unverändert. =====
reiter: Bilder gleiten seitlich, Punkte darunter, Wischen im Bild · geschichte: klebt kurz, Fläche oben, ein Punkt darunter (wie Startseite siegel)
nachricht: Schichten ziehen sich beim Scrollen auseinander, Punkt + Linie + Erklärung erscheinen · drei: Punkte unter der Reihe, aktive Karte groß */
.s2s-rt-punkte{display:none}
@media (max-width:760px){
html.s2-js:not(.s2-statisch) .s2s-rt-punkte{order:-1;display:flex;justify-content:center;gap:2px;margin:2px 0 -6px}
.s2s-rt-punkte button{position:relative;width:26px;height:28px;padding:0;border:0;background:none;cursor:pointer}
.s2s-rt-punkte button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:99px;background:#d6d6d3;
transition:transform 450ms var(--s2-kurve),background-color 300ms var(--s2-kurve)}
.s2s-rt-punkte button.an::before{background:#141414;transform:scaleX(2.6)}
html.s2-js:not(.s2-statisch) .s2s-rt-rechts{order:-2;touch-action:pan-y}
html.s2-js:not(.s2-statisch) .s2s-rt-vs{transform:translate3d(48px,0,0) scale(.97);transition:opacity 420ms var(--s2-kurve),transform 650ms var(--s2-kurve)}
html.s2-js:not(.s2-statisch) .s2s-rt-vs.vor{transform:translate3d(-48px,0,0) scale(.97)}
html.s2-js:not(.s2-statisch) .s2s-rt-vs.an{transform:none}
/* geschichte */
html.s2-js:not(.s2-statisch) .s2s-gs-buehne.gs-h.s2-buehne{height:calc(100vh + var(--s2-schritte) * 28vh);height:calc(100svh + var(--s2-schritte) * 28svh)}
html.s2-js:not(.s2-statisch) .s2s-gs-buehne.gs-h>.s2-buehne-innen{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:flex-start;
padding-top:calc(var(--s2-leiste) + 4px)}
html.s2-js:not(.s2-statisch) .s2s-gs-buehne.gs-h .s2s-gs-zwei{position:relative;width:100%;display:flex;flex-direction:column}
html.s2-js:not(.s2-statisch) .s2s-gs-buehne.gs-h .s2s-gs-links{display:contents}
html.s2-js:not(.s2-statisch) .s2s-gs-buehne.gs-h .s2s-gs-links>.s2s-kopf{order:1;margin-bottom:14px}
html.s2-js:not(.s2-statisch) .s2s-gs-buehne.gs-h .s2s-gs-links .s2s-h2{font-size:clamp(26px,7.6vw,32px)}
html.s2-js:not(.s2-statisch) .s2s-gs-buehne.gs-h .s2s-gs-links>.s2s-kopf p{font-size:15px;line-height:1.5}
html.s2-js:not(.s2-statisch) .s2s-gs-buehne.gs-h .s2s-gs-feld{order:2;display:block;height:clamp(170px,calc(100svh - 540px),320px);border-radius:24px;background:#f1f1f0}
html.s2-js:not(.s2-statisch) .s2s-gs-buehne.gs-h .s2s-gs-liste{order:3;display:grid;gap:0;overflow:hidden;height:160px;margin-top:16px}
html.s2-js:not(.s2-statisch) .s2s-gs-buehne.gs-h .s2s-gs-punkt{grid-area:1/1;display:block}
html.s2-js:not(.s2-statisch) .s2s-gs-buehne.gs-h .s2s-gs-wort{grid-template-columns:40px minmax(0,1fr);gap:14px;will-change:transform,opacity}
html.s2-js:not(.s2-statisch) .s2s-gs-buehne.gs-h .s2s-gs-sym{width:40px;height:40px}
html.s2-js:not(.s2-statisch) .s2u-inhalt .s2s-gs-buehne.gs-h .s2s-gs-wort h3{font-size:21px;margin-top:4px}
html.s2-js:not(.s2-statisch) .s2s-gs-buehne.gs-h .s2s-gs-wort p{font-size:15px;margin-top:5px}
html.s2-js:not(.s2-statisch) .s2s-gs-buehne.gs-h .s2s-gs-mini{position:absolute;z-index:1;left:0;right:0;top:var(--gs-fo,0px);height:var(--gs-fh,300px);min-height:0;padding:0;
display:grid;place-items:center;background:none;overflow:visible;pointer-events:none;border-radius:0}
html.s2-js:not(.s2-statisch) .s2s-gs-buehne.gs-h .s2s-gs-mini>.s2s-gs-bild{will-change:transform,opacity;zoom:var(--gs-sk,1)}
html.s2-js:not(.s2-statisch) .s2s-gs-buehne.gs-h .s2s-gs-punkt+.s2s-gs-punkt .s2s-gs-wort,
html.s2-js:not(.s2-statisch) .s2s-gs-buehne.gs-h .s2s-gs-punkt+.s2s-gs-punkt .s2s-gs-bild{opacity:0}
html.s2-js:not(.s2-statisch) .s2s-gs-buehne.gs-h .s2s-gs-takt{order:4;display:flex;gap:8px;margin-top:10px}
.s2s-gs-buehne.gs-h .s2s-gs-takt i{display:block;width:40px;height:3px;border-radius:2px;background:#e4e4e2;overflow:hidden}
.s2s-gs-buehne.gs-h .s2s-gs-takt b{display:block;width:100%;height:100%;background:#141414;transform-origin:0 50%;transform:scaleX(0);will-change:transform}
/* nachricht: Punkt am Kartenrand, Linie neben der Erklärung */
html.s2-js:not(.s2-statisch) .nl-h .s2s-nl{display:grid;grid-template-columns:18px 12px minmax(0,1fr);align-items:start}
html.s2-js:not(.s2-statisch) .nl-h .s2s-nl-karte{grid-column:1/-1;grid-row:1}
html.s2-js:not(.s2-statisch) .nl-h .s2s-nl-linie{display:block;position:relative;grid-column:2;grid-row:2;justify-self:center;left:auto;right:auto;top:auto;
width:1.5px;height:auto;align-self:stretch;margin:0 0 18px;transform-origin:50% 0}
html.s2-js:not(.s2-statisch) .nl-h .s2s-nl-linie::after{left:50%!important;right:auto!important;top:-4px;margin-left:-4px}
html.s2-js:not(.s2-statisch) .nl-h .s2s-nl-label,html.s2-js:not(.s2-statisch) .nl-h .s2s-nl.re .s2s-nl-label,html.s2-js:not(.s2-statisch) .nl-h .s2s-nl.li .s2s-nl-label{
grid-column:3;grid-row:2;margin:12px 0 22px 12px}
html.s2-js:not(.s2-statisch) .nl-h .s2s-nl .s2s-nl-karte{transition:border-radius 350ms var(--s2-kurve)}
html.s2-js:not(.s2-statisch) .nl-h:not(.nl-auf) .s2s-nl.l1 .s2s-nl-karte{border-radius:16px 16px 4px 4px}
html.s2-js:not(.s2-statisch) .nl-h:not(.nl-auf) .s2s-nl.l2 .s2s-nl-karte.text{border-radius:4px}
html.s2-js:not(.s2-statisch) .nl-h:not(.nl-auf) .s2s-nl.l3 .s2s-nl-karte{border-radius:4px 4px 16px 16px}
/* drei: aktive Karte groß, die anderen leicht kleiner */
html.s2-js:not(.s2-statisch) .s2s-drei.s2-wisch>.s2s-drei-karte{transition:transform 600ms var(--s2-kurve)}
html.s2-js:not(.s2-statisch) .s2s-drei.s2-wisch>.s2s-drei-karte:not(.s2-wisch-an){transform:scale(.96)}
}
/* ===== unterseiten/sektionen/sektionen-plus.css ===== */
/* =====================================================================================================
SEKTIONS-BIBLIOTHEK, Erweiterung "Muster 2" (18.10.2026 abends). Gilt für body.s2u-look2 (seite.json "look": 2) und die neuen Arten (Klassen s2p-).
Gründer: mehr Abstand, Serif-Überschriften wie die Startseite, mehr Farbe = bunte verwischte Startseiten-Kacheln (.s2-kachel aus kern2/basis.css,
Farbfeld/Blumen/verwischtes Themenfoto) mit App-Teilen darauf, Themenfotos ohne Personen, ruhige Bewegung (nur transform/opacity).
Seite bleibt weiß, Text schwarz/grau. Keine flachen bunten Flächen, keine Verläufe als Hintergrund.
===================================================================================================== */
/* ---------- Look 2: Schrift wie die Startseite (Instrument Serif, kursive Betonung) ---------- */
.s2u-look2 .s2 h1.s2u-h1{font-family:var(--s2-serif);font-weight:400;letter-spacing:-.02em;line-height:1;font-size:clamp(50px,5vw + 14px,96px);max-width:15ch}
.s2u-look2 .s2 h1 em,.s2u-look2 .s2 h2 em{font-family:var(--s2-serif);font-size:1em;line-height:inherit;letter-spacing:-.01em}
.s2u-look2 .s2u-inhalt h2.s2s-h2{font-family:var(--s2-serif);font-weight:400;letter-spacing:-.015em;line-height:1.04;font-size:clamp(40px,3.9vw + 8px,70px);max-width:16ch}
.s2u-look2 .s2u-inhalt :is(.s2s-ab-karte h3,.s2s-gs-wort h3,.s2s-drei-kopf h3,.s2p-fk-text h3,.s2p-zl-karte h3,.s2s-rt-text h3){font-family:var(--s2-serif);font-weight:400;letter-spacing:-.01em}
.s2u-look2 .s2s-punkte b{font-family:var(--s2-serif);font-weight:400;font-size:21px;letter-spacing:-.005em}
.s2u-look2 .s2s-text{max-width:52ch;line-height:1.6}
.s2u-look2 .s2-faq-q{font-family:var(--s2-serif);font-weight:400;font-size:clamp(20px,.8vw + 14px,25px)}
/* ---------- Look 2: mehr Luft (mindestens wie die Startseite) ---------- */
.s2u-look2 .s2u-inhalt{margin-top:clamp(120px,12vw,200px)}
.s2u-look2 .s2u-inhalt>*+*{margin-top:clamp(150px,15vw,250px)}
.s2u-look2 .s2u-inhalt>.s2s-sek-band,.s2u-look2 .s2u-inhalt>.s2s-sek-fotoband{margin-top:clamp(130px,13vw,220px)}
.s2u-look2 .s2s-kopf{margin-bottom:clamp(56px,6vw,96px)}
/* ---------- Bunte Kachel (Startseite) auf Unterseiten: Inhalt mittig, Foto-Grund weich verwischt ---------- */
.s2u-look2 .s2-kachel{border-radius:var(--s2-r-kachel);background:#f3e7ee}
.s2u-look2 .s2-kachel::before,.s2u-look2 .s2-kachel::after{display:block} /* bausteine.css schaltet die Kachel auf Unterseiten grau, Look 2 holt sie zurück */
.s2-kachel.weich::before{filter:blur(26px) saturate(1.25)}
.s2-kachel.weich{--s2-schleier:.30}
.s2p-kachel-mitte{position:relative;display:grid;place-items:center;width:100%;height:100%;padding:clamp(28px,4vw,60px) clamp(18px,3.4vw,48px)}
/* ---------- feld: Text links, bunte Kachel rechts ---------- */
.s2p-feld{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,120px);align-items:center}
.s2p-feld.umgekehrt>.s2s-zeile-text{order:2}
.s2p-feld .s2s-zeile-text>.s2s-kopf{margin-bottom:0}
.s2p-feld .s2s-zeile-text>.s2-link-pfeil{margin-top:30px}
.s2p-feld-bild{position:relative;margin:0}
.s2p-feld-bild>.s2-kachel{display:grid;min-height:clamp(420px,40vw,600px)}
.s2p-schwebefoto{position:absolute;z-index:2;width:clamp(120px,15vw,210px);border-radius:16px;overflow:hidden;box-shadow:var(--s2-schatten-tief);will-change:transform}
.s2p-schwebefoto img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.s2p-schwebefoto.f1{left:-6%;top:-7%}
.s2p-schwebefoto.f2{right:-5%;top:-7%}
/* Einzelteile spielen beim Erscheinen (Klasse .an aus sektionen-plus.js) */
html.s2-js:not(.s2-statisch) [data-s2p-spiel]:not(.an) :is(.s2-wa-blase,.s2-karte,.s2s-chip,.s2s-qr,.s2p-chat-blase,.s2p-uhr,.s2s-liste){opacity:0;transform:translate3d(0,16px,0) scale(.97)}
[data-s2p-spiel] :is(.s2-wa-blase,.s2-karte,.s2s-chip,.s2s-qr,.s2p-chat-blase,.s2p-uhr,.s2s-liste){transition:opacity 800ms var(--s2-kurve),transform 1000ms var(--s2-kurve);transition-delay:calc(var(--k,0) * 260ms + 150ms)}
/* neue Teile */
.s2p-chat{display:flex;flex-direction:column;gap:12px;width:min(100%,380px)}
.s2p-chat-blase{max-width:88%;padding:12px 15px;border-radius:16px;background:#fff;box-shadow:var(--s2-schatten-schwebe);font-size:14.5px;line-height:1.5;color:#141414}
.s2p-chat-blase b{display:block;margin-bottom:3px;font-size:12px;font-weight:600;color:#6e6e6b}
.s2p-chat-blase:not(.ai){align-self:flex-end;background:#141414;color:#fff}
.s2p-chat-blase:not(.ai) b{color:rgba(255,255,255,.66)}
.s2p-uhr{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 26px;border-radius:18px;background:#fff;box-shadow:var(--s2-schatten-schwebe)}
.s2p-uhr-zeit{font-family:var(--s2-serif);font-size:clamp(54px,5vw,84px);line-height:1;letter-spacing:-.02em;color:#141414;font-variant-numeric:tabular-nums}
.s2p-uhr-unter{font-size:13.5px;font-weight:600;color:#6e6e6b}
.s2p-foto-teil{width:min(100%,320px);border-radius:16px;overflow:hidden;box-shadow:var(--s2-schatten-tief)}
.s2p-foto-teil img{display:block;width:100%;height:auto}
.s2p-kachel-mitte .s2-wa-blase{max-width:360px;margin:0;box-shadow:var(--s2-schatten-schwebe)}
.s2p-kachel-mitte .s2s-stapel{gap:18px}
/* ---------- Kopf: bunte Kachel / Foto-Collage ---------- */
.s2p-kopf-kachel{position:relative;margin:0;width:100%;max-width:1200px}
.s2p-kopf-kachel>.s2-kachel{min-height:clamp(440px,46vw,640px);display:grid}
.s2p-kopf-kachel .s2p-schwebefoto{width:clamp(130px,17vw,240px)}
.s2p-kopf-kachel .s2p-schwebefoto.f1{left:4%;bottom:-8%}
.s2p-kopf-kachel .s2p-schwebefoto.f2{right:4%;top:-6%}
html.s2-js:not(.s2-statisch) .s2p-kopf-kachel,html.s2-js:not(.s2-statisch) .s2p-kopf-collage{animation:s2sRaus 1400ms var(--s2-kurve) 300ms both}
.s2p-kopf-collage{margin:0;width:100%;max-width:1200px}
.s2p-kc{position:relative;height:clamp(460px,48vw,680px)}
.s2p-kc-f{position:absolute;border-radius:var(--s2-r-kachel);overflow:hidden;box-shadow:0 40px 80px -50px rgba(20,20,20,.45);will-change:transform}
.s2p-kc-f img{display:block;width:100%;height:100%;object-fit:cover}
.s2p-kc-f.f1{left:0;top:6%;width:38%;height:78%}
.s2p-kc-f.f2{left:31%;top:0;width:36%;height:56%;z-index:1}
.s2p-kc-f.f3{right:0;top:12%;width:34%;height:70%}
.s2p-kc-f.f4{left:36%;bottom:0;width:26%;height:38%;z-index:1}
.s2p-kc-teil{position:absolute;z-index:3;left:50%;top:50%;width:min(360px,44%);transform:translate(-30%,-34%)}
.s2p-kc-teil .s2-wa-blase{margin:0;max-width:100%;box-shadow:var(--s2-schatten-tief)}
/* ---------- fotoband: Laufband mit Themenfotos ---------- */
.s2p-band{--s2-band-luecke:18px;--s2-band-dauer:70s;margin-inline:calc(50% - 50vw);-webkit-mask-image:none;mask-image:none}
.s2p-band-foto{position:relative;margin:0;width:clamp(220px,24vw,340px);aspect-ratio:4/5;border-radius:var(--s2-r-kachel);overflow:hidden}
.s2p-band-foto:nth-child(even){margin-top:56px}
.s2p-band-foto img{display:block;width:100%;height:100%;object-fit:cover}
.s2p-band-foto figcaption{position:absolute;left:14px;bottom:14px}
/* ---------- fotokarten ---------- */
.s2p-fks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(20px,2.4vw,36px);max-width:1100px;margin:0 auto}
.s2p-fk{display:flex;flex-direction:column}
.s2p-fk:nth-child(even){margin-top:clamp(0px,8vw,120px)}
.s2p-fk-foto{position:relative;border-radius:var(--s2-r-kachel);overflow:hidden;aspect-ratio:4/3}
.s2p-fk-zoom{position:absolute;inset:-8% 0;will-change:transform}
.s2p-fk-zoom img{display:block;width:100%;height:100%;object-fit:cover}
.s2p-fk-wa{position:relative;z-index:1;margin:-90px 18px 0 auto;width:min(84%,340px)}
.s2p-fk-wa .s2-wa-blase{margin:0;max-width:100%;box-shadow:var(--s2-schatten-tief);font-size:14px}
.s2p-fk-text{padding:22px 6px 0}
.s2u-inhalt .s2p-fk-text h3{font-size:clamp(26px,1.4vw + 10px,34px);line-height:1.1;color:#141414}
.s2p-fk-text .s2s-chip{margin-top:12px}
.s2p-fk-text p{margin-top:10px;font-size:15.5px;line-height:1.55;color:#6e6e6b}
/* ---------- band: Zitat-Band ---------- */
.s2p-zband{display:grid;place-items:center;min-height:clamp(380px,40vw,560px);text-align:center}
.s2p-zband-innen{position:relative;padding:clamp(48px,6vw,96px) clamp(22px,6vw,110px);max-width:1040px}
.s2p-band-klein{display:inline-block;margin-bottom:20px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#141414;opacity:.7}
.s2p-zband-satz{font-family:var(--s2-serif);font-size:clamp(34px,3.6vw + 8px,66px);line-height:1.1;letter-spacing:-.015em;color:#141414;text-wrap:balance}
.s2p-zband-satz .w{display:inline-block;transition:opacity 900ms var(--s2-kurve),transform 1100ms var(--s2-kurve);transition-delay:calc(var(--i) * 70ms)}
html.s2-js:not(.s2-statisch) .s2p-zband:not(.an) .w{opacity:0;transform:translate3d(0,18px,0)}
/* ---------- collage ---------- */
.s2p-col{position:relative;height:clamp(480px,46vw,660px)}
.s2p-col-f{position:absolute;border-radius:var(--s2-r-kachel);overflow:hidden;box-shadow:0 40px 80px -50px rgba(20,20,20,.45);will-change:transform}
.s2p-col-f img{display:block;width:100%;height:100%;object-fit:cover}
.s2p-col-f.f1{left:0;top:0;width:56%;height:62%}
.s2p-col-f.f2{right:0;top:14%;width:40%;height:50%}
.s2p-col-f.f3{left:16%;bottom:0;width:46%;height:40%}
.s2p-col-teil{position:absolute;z-index:2;right:2%;bottom:6%;width:min(360px,62%);display:flex;flex-direction:column;gap:10px}
.s2p-col-teil .s2-wa-blase{margin:0;max-width:100%;box-shadow:var(--s2-schatten-tief)}
.s2p-col-teil .s2-wa-blase.aus{align-self:flex-end;max-width:86%}
/* ---------- zahlen ---------- */
.s2p-zahlen{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--s2-spalt)}
.s2p-zahl-k{display:flex;flex-direction:column;align-items:flex-start;min-height:0;padding:30px 26px 28px}
.s2p-zahl{font-family:var(--s2-serif);font-size:clamp(64px,6vw,104px);line-height:.95;letter-spacing:-.02em;color:#141414;font-variant-numeric:tabular-nums}
.s2p-zahl small{margin-left:8px;font-size:.32em;letter-spacing:0}
.s2p-zahl-k b{margin-top:22px;font-size:16px;font-weight:600;color:#141414}
.s2p-zahl-k p{margin-top:6px;font-size:14.5px;line-height:1.5;color:#141414;opacity:.72}
/* ---------- zeitleiste ---------- */
.s2p-zl{padding:clamp(40px,5vw,80px) clamp(20px,4vw,64px)}
.s2p-zl-innen{position:relative}
.s2p-zl-linie{position:absolute;left:calc(50% / var(--n,4));right:calc(50% / var(--n,4));top:23px;height:2px;border-radius:2px;background:rgba(255,255,255,.7)}
.s2p-zl-fuell{position:absolute;inset:0;background:#141414;transform-origin:0 50%;transform:scaleX(0);will-change:transform}
.s2p-zl-laeufer{position:absolute;left:-7px;top:-6px;width:14px;height:14px;border-radius:50%;background:#141414;box-shadow:0 0 0 5px #fff;will-change:transform}
html.s2-statisch .s2p-zl-fuell{transform:none}
html.s2-statisch .s2p-zl-laeufer{display:none}
.s2p-zl-liste{position:relative;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:16px}
.s2p-zl-schritt{display:flex;flex-direction:column;align-items:center;text-align:center}
.s2p-zl-punkt{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#6e6e6b;box-shadow:0 6px 16px -8px rgba(20,20,20,.3);transition:background 500ms var(--s2-kurve),color 500ms var(--s2-kurve),transform 600ms var(--s2-kurve)}
.s2p-zl-punkt .s2-ic{width:21px;height:21px}
.s2p-zl-schritt.an .s2p-zl-punkt,html.s2-statisch .s2p-zl-punkt{background:#141414;color:#fff;transform:scale(1.06)}
.s2p-zl-wann{margin-top:14px;font-size:13px;font-weight:600;color:#141414}
.s2p-zl-karte{margin-top:16px;width:100%;padding:20px 18px;border-radius:18px;background:#fff;box-shadow:var(--s2-schatten-schwebe);transition:opacity 800ms var(--s2-kurve),transform 1000ms var(--s2-kurve)}
.s2u-inhalt .s2p-zl-karte h3{font-size:22px;line-height:1.15;color:#141414}
.s2p-zl-karte p{margin-top:6px;font-size:14px;line-height:1.5;color:#6e6e6b}
html.s2-js:not(.s2-statisch) .s2p-zl-schritt:not(.an) .s2p-zl-karte{opacity:.35;transform:translate3d(0,10px,0)}
/* ---------- Tablet ---------- */
@media (max-width:900px){
.s2p-feld{grid-template-columns:minmax(0,1fr)}
.s2p-feld.umgekehrt>.s2s-zeile-text{order:0}
.s2p-zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------- Handy (nur die neuen s2p-Sektionen; Handy-Teile der alten Sektionen bleiben in sektionen.css) ---------- */
@media (max-width:760px){
.s2u-look2 .s2u-inhalt>*+*{margin-top:clamp(110px,28vw,150px)}
.s2u-look2 .s2 h1.s2u-h1{font-size:clamp(44px,12vw,60px)}
.s2u-look2 .s2u-inhalt h2.s2s-h2{font-size:clamp(36px,10vw,48px)}
.s2p-feld-bild>.s2-kachel{min-height:340px}
.s2p-schwebefoto{width:96px;border-radius:12px}
.s2p-schwebefoto.f1{left:-2%;bottom:-5%}.s2p-schwebefoto.f2{right:-2%;top:-5%}
.s2p-kopf-kachel>.s2-kachel{min-height:400px}
.s2p-kc{height:440px}
.s2p-kc-f.f1{width:54%;height:60%}.s2p-kc-f.f2{left:46%;width:54%;height:42%}.s2p-kc-f.f3{top:auto;bottom:0;width:48%;height:44%}.s2p-kc-f.f4{display:none}
.s2p-kc-teil{left:4%;top:auto;bottom:6%;width:78%;transform:none}
.s2p-band-foto{width:200px}
.s2p-band-foto:nth-child(even){margin-top:30px}
.s2p-fks{grid-template-columns:minmax(0,1fr);gap:56px}
.s2p-fk:nth-child(even){margin-top:0}
.s2p-fk-wa{margin:-70px 10px 0 auto;width:88%}
.s2p-col{height:440px}
.s2p-col-teil{width:84%;right:0}
.s2p-zahlen{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.s2p-zahl-k{padding:22px 16px}
.s2p-zl-linie{left:23px;right:auto;top:24px;bottom:24px;width:2px;height:auto}
.s2p-zl-fuell{transform-origin:50% 0;transform:scaleY(0)}
.s2p-zl-laeufer{display:none}
.s2p-zl-liste{grid-template-columns:minmax(0,1fr);gap:22px}
.s2p-zl-schritt{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;text-align:left;align-items:start}
.s2p-zl-wann{grid-column:2;margin-top:0;align-self:center}
.s2p-zl-karte{grid-column:2;margin-top:8px}
}
@media (prefers-reduced-motion:reduce){.s2p-band .s2-band-spur{animation:none}}
/* =====================================================================================================
Muster 2b (Gründer-Vorbild 18.10. abends): Hero zweispaltig, Anwendungsfälle mit Handy, Bento-Raster, Vorlagen-Reihe
===================================================================================================== */
/* Hero: links H1, Satz, 4 Haken, Knopf; rechts großes Themenfoto in runder Ecke, darunter 2 kleine Felder */
.s2u-look2 .s2u-kopf.s2p-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(40px,5vw,88px);align-items:center;text-align:left;margin-top:clamp(56px,6vw,110px)}
.s2u-look2 .s2p-hero .s2u-kopf-text{align-items:flex-start;text-align:left}
.s2u-look2 .s2p-hero h1.s2u-h1{font-size:clamp(46px,3.9vw + 14px,84px);max-width:12ch;margin-inline:0}
.s2u-look2 .s2p-hero .s2u-kopf-unter{margin-inline:0;max-width:44ch}
.s2u-look2 .s2p-hero .s2-knopfreihe{justify-content:flex-start}
.s2p-hero-punkte{list-style:none;margin:28px 0 4px;padding:0;display:grid;gap:12px}
.s2p-hero-punkte li{display:flex;align-items:center;gap:12px;font-size:16.5px;font-weight:500;color:#141414}
.s2p-hero-punkte .haken{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;background:#141414;color:#fff}
.s2p-hero-punkte .haken .s2-ic{width:13px;height:13px}
.s2p-hero-bild{margin:0;width:100%}
.s2p-hero-foto{position:relative;border-radius:var(--s2-r-kachel);overflow:hidden;aspect-ratio:5/4;box-shadow:0 50px 90px -60px rgba(20,20,20,.5)}
.s2p-hero-zoom{position:absolute;inset:-7% 0;will-change:transform}
.s2p-hero-zoom img{display:block;width:100%;height:100%;object-fit:cover}
.s2p-hero-wa{position:absolute;right:5%;bottom:6%;width:min(62%,330px);will-change:transform}
.s2p-hero-wa .s2-wa-blase{margin:0;max-width:100%;box-shadow:var(--s2-schatten-tief);font-size:13.5px}
.s2p-hero-felder{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.s2p-hero-feld{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #e4e4e2;font-size:14.5px;font-weight:600;color:#141414}
.s2p-mini-kachel.s2-kachel{flex:none;width:40px;height:40px;min-height:0;border-radius:12px;display:grid;place-items:center;color:#141414;--s2-schleier:.1}
.s2p-mini-kachel .s2-ic{width:19px;height:19px}
html.s2-js:not(.s2-statisch) .s2p-hero-bild{animation:s2sRaus 1400ms var(--s2-kurve) 250ms both}
/* Anwendungsfälle: Liste links schaltet weiter, iPhone rechts */
.s2p-faelle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:center;max-width:1120px;margin:0 auto}
.s2p-fall-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.s2p-fall{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;width:100%;padding:20px 20px 22px;border-radius:18px;text-align:left;
background:transparent;transition:background 400ms var(--s2-kurve),box-shadow 400ms var(--s2-kurve);cursor:pointer;overflow:hidden}
.s2p-fall:hover{background:#f1f1f0}
.s2p-fall.an{background:#fff;box-shadow:0 0 0 1px #e4e4e2,0 20px 40px -28px rgba(20,20,20,.3)}
.s2p-fall:focus-visible{outline:2px solid #141414;outline-offset:2px}
.s2p-fall-sym{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#f1f1f0;color:#6e6e6b;transition:background 400ms,color 400ms}
.s2p-fall.an .s2p-fall-sym{background:#141414;color:#fff}
.s2p-fall-sym .s2-ic{width:20px;height:20px}
.s2p-fall-text b{display:block;font-family:var(--s2-serif);font-weight:400;font-size:clamp(23px,1vw + 14px,28px);line-height:1.15;color:#141414}
.s2p-fall-text>span{display:block;margin-top:6px;font-size:15px;line-height:1.5;color:#6e6e6b}
.s2p-fall-text .s2s-chip{margin-top:12px;height:28px;font-size:12.5px}
.s2p-fall:not(.an) .s2p-fall-text>span,.s2p-fall:not(.an) .s2p-fall-text .s2s-chip{display:none}
.s2p-fall-lauf{position:absolute;left:20px;right:20px;bottom:8px;height:2px;border-radius:2px;background:#141414;transform:scaleX(0);transform-origin:0 50%;opacity:0}
.s2p-fall.an.lauft .s2p-fall-lauf{opacity:.85;animation:s2sLauf var(--fall-takt,6s) linear forwards}
.s2p-faelle-rechts{display:grid;place-items:center;min-height:clamp(560px,52vw,680px);padding:40px 20px}
/* iPhone-Rahmen mit WhatsApp-Chat */
.s2p-iphone{width:min(300px,86%);padding:9px;border-radius:46px;background:#141414;box-shadow:var(--s2-schatten-tief)}
.s2p-iphone-schirm{border-radius:38px;overflow:hidden;background:var(--s2-wa-grund);height:clamp(500px,44vw,580px);display:flex;flex-direction:column}
.s2p-iphone-kopf{display:flex;align-items:center;gap:10px;padding:34px 14px 12px;background:#fff;box-shadow:0 1px 0 #e4e4e2}
.s2p-iphone-kopf b{display:block;font-size:14px;color:#141414}
.s2p-iphone-kopf small{display:block;font-size:11.5px;color:#6e6e6b}
.s2p-iphone-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#141414;color:#fff}
.s2p-iphone-av .s2-ic{width:16px;height:16px}
.s2p-iphone-chat{position:relative;flex:1;padding:14px 10px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.s2p-iphone-chat .s2-wa-blase{margin:0;max-width:92%;font-size:13px}
.s2p-iphone-chat .s2-wa-blase.aus{align-self:flex-end;max-width:80%}
.s2p-fall-chats{display:grid;align-items:end}
.s2p-fall-chat{grid-area:1/1;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translate3d(0,24px,0);transition:opacity 500ms var(--s2-kurve),transform 800ms var(--s2-kurve);pointer-events:none}
.s2p-fall-chat.an{opacity:1;transform:none;transition-delay:120ms}
/* Bento-Raster: dünner Raster-Rahmen, 1 große bunte Kachel, 2 ruhige */
.s2p-bento{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;border:1px solid #e4e4e2;border-radius:calc(var(--s2-r-kachel) + 8px);overflow:hidden;background:#fff}
.s2p-bento-k{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,36px);gap:22px}
.s2p-bento-k.gross{grid-row:span 2;border-right:1px solid #e4e4e2}
.s2p-bento-k:not(.gross)+.s2p-bento-k:not(.gross){border-top:1px solid #e4e4e2}
.s2u-inhalt .s2p-bento-text h3{font-family:var(--s2-serif);font-weight:400;font-size:clamp(26px,1.4vw + 10px,34px);line-height:1.1;color:#141414}
.s2p-bento-text p{margin-top:8px;font-size:15.5px;line-height:1.55;color:#6e6e6b;max-width:46ch}
.s2p-bento-bild{flex:1;display:grid;place-items:center;border-radius:var(--s2-r-kachel);padding:28px 18px;min-height:240px}
.s2p-bento-k.gross .s2p-bento-bild{min-height:clamp(520px,46vw,640px)}
.s2p-bento-bild.ruhig{background:#f1f1f0}
.s2p-bento-bild .s2p-iphone-schirm{height:clamp(440px,38vw,520px)}
/* Vorlagen-Reihe */
.s2p-vorlagen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2-spalt)}
.s2p-vorlage{display:flex;flex-direction:column;align-items:flex-start;padding:28px 26px 26px;border-radius:var(--s2-r-kachel);background:#fff;box-shadow:0 0 0 1px #e4e4e2;
transition:transform 400ms var(--s2-kurve),box-shadow 300ms var(--s2-kurve)}
.s2p-vorlage:hover{transform:translate3d(0,-4px,0);box-shadow:0 0 0 1px #e4e4e2,0 24px 44px -28px rgba(20,20,20,.3)}
.s2u-inhalt .s2p-vorlage h3{margin-top:22px;font-family:var(--s2-serif);font-weight:400;font-size:27px;line-height:1.15;color:#141414}
.s2p-vorlage p{margin-top:8px;font-size:15px;line-height:1.55;color:#6e6e6b;flex:1}
.s2p-vorlage .s2-link-pfeil{margin-top:22px}
.s2p-vorlage .s2p-mini-kachel.s2-kachel{width:48px;height:48px}
@media (max-width:900px){
.s2u-look2 .s2u-kopf.s2p-hero{grid-template-columns:minmax(0,1fr)}
.s2p-faelle{grid-template-columns:minmax(0,1fr)}
.s2p-bento{grid-template-columns:minmax(0,1fr)}
.s2p-bento-k.gross{grid-row:auto;border-right:0;border-bottom:1px solid #e4e4e2}
.s2p-vorlagen{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
.s2p-hero-felder{grid-template-columns:minmax(0,1fr)}
.s2p-hero-wa{width:76%}
.s2p-faelle-rechts{min-height:0;padding:28px 12px}
.s2p-iphone-schirm{height:480px}
.s2p-fall{padding:16px 14px 18px;grid-template-columns:38px minmax(0,1fr);gap:12px}
.s2p-fall-sym{width:38px;height:38px}
}
/* Hero-Teil auch als App-Karte */
.s2p-hero-wa .s2s-karten-stapel{width:100%}
.s2p-hero-wa .s2-karte{box-shadow:var(--s2-schatten-tief)}
.s2p-iphone-chat .s2-wa-bild img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.s2p-feld-bild .s2p-schwebefoto.f1{width:80px;left:-3%;top:-4%}}
/* 21.10.2026 (Gründer: Handy-Bildschirm ragt über die runden Ecken hinaus): Die Rundung wird zusätzlich mit clip-path erzwungen; overflow:hidden+border-radius wird in manchen Browsern von bewegten Kindern (Animation, Glas) ignoriert. */
.s2p-iphone-schirm{clip-path:inset(0 round 38px);isolation:isolate}
/* ===== unterseiten/sektionen/branche.css ===== */
/* =====================================================================================================
BRANCHENVORLAGE (18.10.2026) — branche.css. Gilt nur für body.s2b-seite (seite.json "vorlage": "branche"). HTML: branche.py, branche_postfach.py,
Bewegung: branche.js. Feedback-Runde 1 des Gründers (18.10.2026 spät) eingearbeitet: Hero mittig ohne Bild, echtes iPhone 18 Pro mit WhatsApp (iOS)
nur bei den Anlässen, Automationen auf EINEM Verlauf, Postfach wie im Dashboard, Abschluss ohne Bild, Knöpfe im Verlauf #ffb13a -> #fb5f06.
Bewegung nur über transform und opacity. Ohne JS, ?statisch=1 und reduzierte Bewegung: Endzustand.
Prüfer: Farben nur in .s2-kachel, WhatsApp-Teilen (Klassen mit "wa-"), App-Teilen (s2b-app) und den Knöpfen (s2b-seite … s2-knopf).
===================================================================================================== */
/* ---------- Grundwerte wie auf der Startseite ---------- */
body.s2b-seite{
--s2-r-kachel:32px;
--s2-schatten-ruhig:0 0 0 1px #e4e4e2,0 1px 2px rgba(20,20,20,.03),0 10px 30px rgba(20,20,20,.05);
--s2-schatten-schwebe:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(20,20,20,.05),0 2px 4px rgba(20,20,20,.04),0 24px 48px -22px rgba(20,20,20,.28);
--s2-schatten-tief:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(20,20,20,.05),0 4px 10px rgba(20,20,20,.05),0 50px 90px -40px rgba(20,20,20,.40);
--s2b-kurve:cubic-bezier(.23,1,.32,1);
--s2b-feder:cubic-bezier(.34,1.56,.64,1);
--s2b-ios:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Instrument Sans",system-ui,sans-serif}
@media (max-width:900px){body.s2b-seite{--s2-r-kachel:24px}}
.s2b-seite .s2{overflow-x:clip}
.s2b-seite .s2b :is(h1,h2,h3){-webkit-hyphens:manual;hyphens:manual}
.s2b-seite .s2 :is(h1,h2) em{font-family:var(--s2-serif);font-style:italic;font-weight:400;font-size:1em;line-height:inherit;letter-spacing:-.01em}
.s2b-nw{white-space:nowrap}
.s2b-nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Feedback 3: kein Hero, die Seite beginnt mit den Anlässen (Titel = H1) */
.s2b-anlaesse.s2-sek{padding-top:clamp(28px,4.5vw,72px)}
.s2b-start .s2b-hero-satz{margin-top:20px}
.s2b-seite .s2b :is(.s2-h2,.s2-h3){font-family:var(--s2-serif);font-weight:400;letter-spacing:-.015em}
.s2b-seite .s2b .s2-h3{letter-spacing:-.01em}
.s2b .s2-sek{background:transparent}
.s2b .s2-kopf .s2-h2{max-width:21ch}
.s2b .s2-kopf.mittig .s2-text{max-width:58ch}
.s2b .s2-kopf.s2b-eine-zeile .s2-h2{max-width:none}
@media (min-width:901px){.s2b .s2-kopf.s2b-eine-zeile .s2-h2{white-space:nowrap}}
.s2b-seite .s2b .s2-kachel{border-radius:var(--s2-r-kachel);background:#efe7ee}
.s2b-seite .s2b .s2-kachel::before,.s2b-seite .s2b .s2-kachel::after{display:block}
.s2b-seite .s2b .s2-kachel.weich::before{animation:none;filter:blur(24px) saturate(1.2)}
/* ---------- Knöpfe: schwarz mit buntem Schein, genau wie "Kostenfrei starten" in der Leiste der Startseite (kern/style.css .leiste.da .btn-knopf), Gründer Feedback 2 ---------- */
.s2b-seite .s2b .s2-knopf{color:#fff;border-radius:999px;background:linear-gradient(180deg,#2b2b31 0%,#0d0d10 100%);text-shadow:none;
box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 1px 2px rgba(13,13,16,.14),
-18px 20px 34px -14px rgba(177,92,255,.26),0 22px 36px -14px rgba(255,122,182,.22),18px 20px 34px -14px rgba(255,177,58,.3),
-12px 0 18px -10px rgba(177,92,255,.14),12px 0 18px -10px rgba(255,177,58,.16),0 -8px 16px -10px rgba(255,122,182,.12)}
.s2b-seite .s2b .s2-knopf::before{display:block;border-radius:999px 999px 14px 14px/999px 999px 10px 10px}
.s2b-seite .s2b .s2-knopf:hover{transform:translateY(-1px)}
/* ---------- Einheitliche Größen (Gründer Feedback 2): alle H2 gleich groß, alle Unterzeilen gleich groß ---------- */
.s2b-seite .s2b :is(.s2-h2,.s2-h2.gross){font-size:clamp(36px,3vw + 10px,58px);line-height:1.05}
.s2b-seite .s2b :is(.s2-kopf .s2-text,.s2b-schluss .s2-text,.s2b-hero-satz){font-size:clamp(17px,.5vw + 15px,19.5px);line-height:1.55}
/* ===================================================================== 1. HERO (mittig) ===================================================================== */
.s2b-hero.s2-sek{padding-top:clamp(28px,5vw,88px);padding-bottom:clamp(40px,5vw,72px)}
.s2b-hero-mitte{display:flex;flex-direction:column;align-items:center;text-align:center}
.s2b-trust{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 16px 0 12px;margin:0 0 30px;border-radius:999px;background:#fff;
box-shadow:0 0 0 1px #e4e4e2,0 8px 20px -14px rgba(20,20,20,.22);font-size:13.5px;line-height:1;color:var(--s2-grau);white-space:nowrap}
.s2b-trust b{color:var(--s2-schwarz);font-weight:600}
.s2b-trust-ic{width:18px;height:18px;flex:none;color:var(--s2-schwarz)}
.s2b-trust .s2-kugel{margin-left:-4px}
.s2b-h1{margin:0;text-shadow:none;font-family:var(--s2-serif);font-weight:400;color:var(--s2-schwarz);font-size:clamp(40px,3.2vw + 16px,70px);line-height:.98;letter-spacing:-.022em;max-width:13ch;text-wrap:balance}
.s2b-hero-satz{margin:24px auto 0;max-width:48ch;line-height:1.55;color:var(--s2-grau);text-wrap:balance}
.s2b-hero-mitte>.s2-knopfreihe{margin-top:38px;justify-content:center}
html.s2-js:not(.s2-statisch) .s2b-auf{opacity:0;transform:translate3d(0,22px,0);transition:opacity 900ms var(--s2b-kurve),transform 1100ms var(--s2b-kurve);transition-delay:calc(var(--d,0) * 90ms + 60ms)}
html.s2-js.s2b-los:not(.s2-statisch) .s2b-auf{opacity:1;transform:none}
/* ===================================================================== WhatsApp im neuesten iOS (Blasen, gemeinsam) ===================================================================== */
.s2b-wa-chat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;font-family:var(--s2b-ios)}
.s2b-wa-tag{align-self:center;margin:4px 0 8px;padding:4px 10px;border-radius:9px;background:rgba(255,255,255,.88);box-shadow:0 1px .5px rgba(11,20,26,.08);
font:500 11.5px/1.2 var(--s2b-ios);color:#54656f}
.s2b-wa-b{--wa-bg:#fff;position:relative;align-self:flex-start;max-width:86%;margin:0 0 0 7px;background:var(--wa-bg);border-radius:14px 14px 14px 4px;
box-shadow:0 1px .5px rgba(11,20,26,.13);font:400 14.5px/1.36 var(--s2b-ios);color:#111b21;text-align:left}
.s2b-wa-b.aus{--wa-bg:#d9fdd3;align-self:flex-end;margin:6px 7px 0 0;border-radius:14px 14px 4px 14px;max-width:80%}
/* Zipfel unten (iOS) */
.s2b-wa-iphone .s2b-wa-b::before{content:"";position:absolute;bottom:0;width:12px;height:15px;background:var(--wa-bg);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M12 0v15H2.2C.9 15 .3 13.6 1.1 12.7 5.4 8.2 7 4.6 7 0z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M12 0v15H2.2C.9 15 .3 13.6 1.1 12.7 5.4 8.2 7 4.6 7 0z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.s2b-wa-iphone .s2b-wa-b.ein::before{left:-7px}
.s2b-wa-iphone .s2b-wa-b.aus::before{right:-7px;transform:scaleX(-1)}
.s2b-wa-b:not(.s2b-wa-iphone *){margin-left:0;margin-right:0;border-radius:14px}
.s2b-wa-b-bild{margin:3px 3px 0;border-radius:11px;overflow:hidden;height:150px;background:#eae6df}
.s2b-wa-b-bild img{display:block;width:100%;height:100%;object-fit:cover}
.s2b-wa-b-text{position:relative;padding:6px 9px 7px 10px;white-space:pre-line;overflow-wrap:anywhere}
.s2b-wa-b-text b{font-weight:600}
.s2b-wa-b-platz{display:inline-block;width:42px;height:1px}
.s2b-wa-b-platz.aus{width:60px}
.s2b-wa-b-zeit{position:absolute;right:9px;bottom:5px;display:inline-flex;align-items:center;gap:3px;font:400 11px/1 var(--s2b-ios);color:#667781;white-space:nowrap}
.s2b-wa-haken{width:16px;height:11px;color:#53bdeb}
.s2b-wa-b-knopf{display:flex;align-items:center;justify-content:center;gap:6px;height:40px;margin:0 10px;border-top:1px solid #e9edef;font:500 14.5px/1 var(--s2b-ios);color:#027eb5}
.s2b-wa-b-knopf+.s2b-wa-b-knopf{margin-top:0}
.s2b-wa-tippt{display:none}
/* ===================================================================== iPhone 18 Pro (Titan, kleine Dynamic Island) — nur bei den Anlässen ===================================================================== */
.s2b-wa-iphone{--w:300px;position:relative;width:var(--w);min-height:calc(var(--w) * 2.087);display:flex;flex:none;border-radius:calc(var(--w) * .178);padding:calc(var(--w) * .011);
background:linear-gradient(145deg,#d6d5d1 0%,#8f8e8a 14%,#e9e8e4 30%,#a7a6a2 52%,#dcdbd7 72%,#7d7c78 90%,#c4c3bf 100%);
box-shadow:0 0 0 .5px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.5) inset,0 60px 100px -50px rgba(20,20,20,.55),0 24px 48px -28px rgba(20,20,20,.35)}
.s2b-wa-taste{position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#7f7e7a,#cfcecb 55%,#8a8985)}
.s2b-wa-taste.t1{left:-2.4px;top:17%;height:5%}
.s2b-wa-taste.t2{left:-2.4px;top:25%;height:8.5%}
.s2b-wa-taste.t3{left:-2.4px;top:35.5%;height:8.5%}
.s2b-wa-taste.t4{right:-2.4px;top:28%;height:13%}
.s2b-wa-taste.t5{right:-1.6px;top:57%;height:8%;width:2.4px}
.s2b-wa-glas{flex:1;display:flex;border-radius:calc(var(--w) * .166);background:#060606;padding:calc(var(--w) * .028);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
.s2b-wa-schirm{position:relative;flex:1;border-radius:calc(var(--w) * .142);overflow:hidden;display:flex;flex-direction:column;background:#fff;
font-family:var(--s2b-ios);-webkit-font-smoothing:antialiased}
.s2b-wa-insel{position:absolute;z-index:6;top:calc(var(--w) * .033);left:50%;width:calc(var(--w) * .25);height:calc(var(--w) * .074);margin-left:calc(var(--w) * -.125);border-radius:99px;background:#000}
.s2b-wa-insel::after{content:"";position:absolute;right:16%;top:50%;width:calc(var(--w) * .026);height:calc(var(--w) * .026);margin-top:calc(var(--w) * -.013);border-radius:50%;
background:radial-gradient(circle at 35% 35%,#2b3550 0%,#0d1018 60%,#000 100%)}
.s2b-wa-status{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;height:calc(var(--w) * .14);padding:calc(var(--w) * .02) calc(var(--w) * .085) 0 calc(var(--w) * .1);
background:#f7f7f7;color:#000}
.s2b-wa-uhr{font:600 calc(var(--w) * .05)/1 var(--s2b-ios);letter-spacing:-.01em}
.s2b-wa-ikons{display:inline-flex;align-items:center;gap:calc(var(--w) * .016)}
.s2b-wa-ikons svg{height:calc(var(--w) * .036);width:auto;fill:currentColor;color:#000}
.s2b-wa-ikons svg:nth-child(2){height:calc(var(--w) * .038)}
.s2b-wa-ikons svg:last-child{height:calc(var(--w) * .041)}
.s2b-wa-kopf{position:relative;z-index:4;display:flex;align-items:center;gap:calc(var(--w) * .018);height:calc(var(--w) * .16);padding:0 calc(var(--w) * .04) 0 calc(var(--w) * .03);
background:rgba(247,247,247,.96);box-shadow:0 .5px 0 rgba(0,0,0,.16)}
.s2b-wa-zurueck{display:inline-flex;align-items:center;gap:calc(var(--w) * .008);color:#000}
.s2b-wa-zurueck svg{width:calc(var(--w) * .03);height:calc(var(--w) * .052)}
.s2b-wa-zurueck b{min-width:calc(var(--w) * .06);height:calc(var(--w) * .06);padding:0 calc(var(--w) * .012);border-radius:99px;display:grid;place-items:center;background:#e9e9eb;
font:600 calc(var(--w) * .038)/1 var(--s2b-ios);color:#000}
.s2b-wa-av{width:calc(var(--w) * .11);height:calc(var(--w) * .11);flex:none;border-radius:50%;overflow:hidden;background:#dfe5e7}
.s2b-wa-av img{display:block;width:100%;height:100%;object-fit:cover}
.s2b-wa-av.logo{display:grid;place-items:center;background:#141414;color:#f4efe6;font:italic 400 calc(var(--w) * .052)/1 var(--s2-serif);letter-spacing:.02em;box-shadow:0 0 0 1px rgba(201,169,110,.55) inset}
.s2b-wa-av.leer{display:grid;place-items:center;font:600 calc(var(--w) * .045)/1 var(--s2b-ios);color:#fff;background:#8696a0}
.s2b-wa-wer{flex:1;min-width:0;display:flex;flex-direction:column}
.s2b-wa-wer b{font:600 calc(var(--w) * .044)/1.2 var(--s2b-ios);color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2b-wa-wer small{font:400 calc(var(--w) * .037)/1.3 var(--s2b-ios);color:#8a8a8e}
.s2b-wa-aktion{display:inline-flex;align-items:center;gap:calc(var(--w) * .035);color:#000}
.s2b-wa-aktion svg{width:calc(var(--w) * .07);height:calc(var(--w) * .05)}
.s2b-wa-aktion svg+svg{width:calc(var(--w) * .056);height:calc(var(--w) * .056)}
/* Chat-Hintergrund wie WhatsApp (hell, feines Kritzelmuster, eigener Vektor) */
.s2b-wa-verlauf{position:relative;flex:1;display:grid;align-items:end;background-color:#efe7de;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23a89a86' stroke-opacity='.18' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='14' cy='16' r='5'/%3E%3Cpath d='M38 10l6 6-6 6M58 20c4-6 12-6 14 0s-6 10-7 14M80 12h8v8h-8zM12 44c6 0 6 8 12 8M40 46l5-9 5 9zM66 44a6 6 0 1012 0M86 50l4 4M8 74l6-6 6 6M32 70h12M36 76h8M60 66c0 8 10 8 10 0M84 72a4 4 0 108 0 4 4 0 10-8 0M22 88c4-4 8 4 12 0M52 86l4 4 8-8'/%3E%3C/g%3E%3C/svg%3E");
background-size:96px 96px}
.s2b-wa-iphone .s2b-al-chat{position:relative;grid-area:1/1;padding:calc(var(--w) * .03) calc(var(--w) * .03) calc(var(--w) * .035)}
.s2b-wa-iphone .s2b-wa-b{font-size:calc(var(--w) * .043);max-width:84%}
.s2b-wa-iphone .s2b-wa-b.aus{max-width:76%}
.s2b-wa-iphone .s2b-wa-b-knopf{height:calc(var(--w) * .115);font-size:calc(var(--w) * .043)}
.s2b-wa-iphone .s2b-wa-b-zeit{font-size:calc(var(--w) * .035)}
.s2b-wa-eingabe{position:relative;z-index:4;display:flex;align-items:center;gap:calc(var(--w) * .03);padding:calc(var(--w) * .022) calc(var(--w) * .035) calc(var(--w) * .085);
background:rgba(247,247,247,.97);box-shadow:0 -.5px 0 rgba(0,0,0,.14);color:#000}
.s2b-wa-eingabe svg{display:block;fill:none}
.s2b-wa-plus svg{width:calc(var(--w) * .062);height:calc(var(--w) * .062)}
.s2b-wa-feld{flex:1;height:calc(var(--w) * .1);border-radius:99px;background:#fff;box-shadow:0 0 0 .6px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:flex-end;padding:0 calc(var(--w) * .028)}
.s2b-wa-feld svg{width:calc(var(--w) * .056);height:calc(var(--w) * .056);color:#000}
.s2b-wa-cam svg{width:calc(var(--w) * .07);height:calc(var(--w) * .058)}
.s2b-wa-mic svg{width:calc(var(--w) * .045);height:calc(var(--w) * .062)}
.s2b-wa-home{position:absolute;z-index:6;left:50%;bottom:calc(var(--w) * .022);width:calc(var(--w) * .36);height:calc(var(--w) * .016);margin-left:calc(var(--w) * -.18);border-radius:99px;background:#000}
/* ===================================================================== 2. ANLÄSSE ===================================================================== */
.s2b-al-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center;max-width:1120px;margin-inline:auto}
.s2b-al-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.s2b-al{position:relative}
.s2b-al-knopf{display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;align-items:start;width:100%;padding:22px 20px 22px 16px;border-radius:20px;text-align:left;cursor:pointer;
color:inherit;font:inherit;background:transparent;transition:background-color 400ms var(--s2b-kurve),box-shadow 400ms var(--s2b-kurve)}
.s2b-al-knopf:hover{background:#f6f6f5}
.s2b-al.an .s2b-al-knopf{background:#fff;box-shadow:0 0 0 1px #e4e4e2,0 20px 40px -30px rgba(20,20,20,.35)}
.s2b-al-knopf:focus-visible{outline:2px solid #141414;outline-offset:2px}
.s2b-al-knopf .s2-symbol{margin-top:2px;transition:transform 500ms var(--s2b-feder)}
.s2b-al.an .s2-symbol{background:#141414;color:#fff;box-shadow:none;transform:scale(1.04)}
.s2b-al-text{display:flex;flex-direction:column;min-width:0}
.s2b-al-titel{font:400 clamp(24px,1vw + 14px,29px)/1.12 var(--s2-serif);letter-spacing:-.01em;color:var(--s2-schwarz)}
.s2b-al-satz{margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--s2-grau);max-width:42ch}
.s2b-al:not(.an) .s2b-al-text{opacity:.6;transition:opacity 400ms var(--s2b-kurve)}
.s2b-al:hover .s2b-al-text{opacity:1}
.s2b-al-rechts{position:relative}
/* ruhige, einfarbige Fläche hinter dem iPhone (Gründer: keine Bilder, nicht unruhig) */
.s2b-al-flaeche{display:grid;place-items:center;width:100%;min-height:clamp(700px,56vw,780px);padding:40px 0;border-radius:var(--s2-r-kachel);background:#f8f8fa}
.s2b-al-flaeche .s2b-wa-iphone{--w:clamp(290px,23vw,318px)}
.s2b-al-chat{opacity:0;visibility:hidden;transition:opacity 450ms var(--s2b-kurve),visibility 0s 450ms}
.s2b-al-chat.an{opacity:1;visibility:visible;transition:opacity 450ms var(--s2b-kurve) 120ms,visibility 0s}
/* Blasen im aktiven Chat kommen nacheinander (Betrieb tippt zuerst) */
html.s2-js:not(.s2-statisch) .s2b-al-chat .s2b-wa-tippt{display:inline-flex;position:absolute;left:calc(var(--w) * .05);bottom:calc(var(--w) * .04);gap:4px;padding:11px 13px;border-radius:14px 14px 14px 4px;background:#fff;
box-shadow:0 1px .5px rgba(11,20,26,.13);opacity:0}
.s2b-wa-tippt i{width:7px;height:7px;border-radius:50%;background:#8696a0;animation:s2-tippt 1.2s ease-in-out infinite}
.s2b-wa-tippt i:nth-child(2){animation-delay:.15s}.s2b-wa-tippt i:nth-child(3){animation-delay:.3s}
@keyframes s2bTippen{0%{opacity:0;transform:scale(.6)}18%,78%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}
html.s2-js:not(.s2-statisch) .s2b-al-chat.spielt .s2b-wa-tippt{animation:s2bTippen 850ms var(--s2b-kurve) both;animation-delay:calc(200ms + var(--k,0) * 1300ms)}
html.s2-js:not(.s2-statisch) .s2b-al-chat .s2b-wa-b{opacity:0;transform:translate3d(0,14px,0) scale(.95);transform-origin:0 100%}
html.s2-js:not(.s2-statisch) .s2b-al-chat .s2b-wa-b.aus{transform-origin:100% 100%}
html.s2-js:not(.s2-statisch) .s2b-al-chat.spielt .s2b-wa-b{opacity:1;transform:none;transition:opacity 500ms var(--s2b-kurve),transform 800ms var(--s2b-feder);
transition-delay:calc(1000ms + var(--k,0) * 1300ms)}
html.s2-js:not(.s2-statisch) .s2b-al-chat.spielt .s2b-wa-b.aus{transition-delay:calc(700ms + var(--k,0) * 1300ms)}
/* ===================================================================== 3. NEWSLETTER (Bühne) =====================================================================
--p (0..1) setzt branche.js NUR am Stapel. Desktop: Bühne klebt. Tablet/Handy: läuft beim Scrollen mit, ohne Kleben.
Aufbau wie ein echter SmartChat-Newsletter in WhatsApp: Bild (läuft voll in die Blase), Text, Knopf. */
.s2b-newsletter.s2-sek{padding-bottom:clamp(24px,3vw,48px)}
.s2b-nl-buehne{position:relative;height:calc(100vh + 120vh);height:calc(100svh + 120svh);margin-top:calc(-1 * clamp(24px,4vw,64px))}
.s2b-nl-klebt{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;padding-top:calc(var(--s2u-oben,150px) - 40px)}
.s2b-nl-mitte{display:flex;flex-direction:column;align-items:center}
.s2b-nl-stapel{--p:1;--e:clamp(0,calc((var(--p) - .26) * 3.4),1);--g:clamp(0,calc(var(--p) * 4),1);
position:relative;width:min(380px,86vw);display:flex;flex-direction:column;font-family:var(--s2b-ios);
transform:translate3d(0,calc((1 - var(--g)) * 70px),0);opacity:calc(.2 + var(--g) * .8)}
.s2b-nl-blase{position:absolute;inset:0;z-index:0;border-radius:16px;background:#fff;box-shadow:0 1px 1px rgba(20,20,20,.08),0 30px 60px -36px rgba(20,20,20,.4),0 0 0 1px rgba(20,20,20,.04);
opacity:calc(1 - var(--e))}
.s2b-nl-lage{position:relative;z-index:1;--l:clamp(0,calc((var(--p) - (.5 + var(--i) * .07)) * 6),1)}
.s2b-nl-lage.l1{transform:translate3d(0,calc(var(--e) * -28px),0)}
.s2b-nl-lage.l3{transform:translate3d(0,calc(var(--e) * 28px),0)}
.s2b-nl-karte{position:relative;background:#fff;border-radius:16px;color:#141414}
.s2b-nl-karte::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 1px 1px rgba(20,20,20,.08),0 22px 46px -18px rgba(20,20,20,.3),0 0 0 1px rgba(20,20,20,.04);opacity:var(--e)}
.s2b-nl-karte.bild{overflow:hidden;border-radius:16px 16px calc(var(--e) * 16px) calc(var(--e) * 16px)}
.s2b-nl-karte.bild img{display:block;width:100%;height:clamp(180px,16vw,220px);object-fit:cover}
.s2b-nl-karte.text{padding:9px 14px 8px}
.s2b-nl-text{font:400 14.5px/1.42 var(--s2b-ios);white-space:pre-line}
.s2b-nl-text b{font-weight:600}
.s2b-nl-zeit{text-align:right;font:400 11px/1 var(--s2b-ios);color:#667781;padding-top:4px}
.s2b-nl-karte.knopf{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;font:500 15px/1 var(--s2b-ios);color:var(--s2-wa-knopf)}
.s2b-nl-karte.knopf::before{content:"";position:absolute;left:12px;right:12px;top:0;height:1px;background:#e9edef;opacity:calc(1 - var(--e))}
.s2b-nl-karte.knopf .s2-ic{width:17px;height:17px}
.s2b-nl-punkt{position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#fff;border:3px solid #141414;z-index:3;opacity:var(--l);transform:scale(var(--l))}
.s2b-nl-linie{position:absolute;top:50%;height:2px;margin-top:-1px;width:clamp(40px,5vw,72px);background:#141414;transform:scaleX(var(--l))}
.s2b-nl-lage.re .s2b-nl-punkt{right:-6px}
.s2b-nl-lage.re .s2b-nl-linie{left:calc(100% + 6px);transform-origin:0 50%}
.s2b-nl-lage.li .s2b-nl-punkt{left:-6px}
.s2b-nl-lage.li .s2b-nl-linie{right:calc(100% + 6px);transform-origin:100% 50%}
.s2b-nl-label{position:absolute;top:50%;width:clamp(220px,22vw,300px);font-family:var(--s2-sans);opacity:var(--l);transform:translate3d(calc((1 - var(--l)) * 18px),-50%,0)}
.s2b-nl-lage.re .s2b-nl-label{left:calc(100% + clamp(58px,6.4vw,92px))}
.s2b-nl-lage.li .s2b-nl-label{right:calc(100% + clamp(58px,6.4vw,92px));text-align:right;transform:translate3d(calc((1 - var(--l)) * -18px),-50%,0)}
.s2b-nl-label .s2-h3{margin:0 0 8px;font-size:clamp(28px,1.6vw + 10px,36px);line-height:1.02}
.s2b-nl-label p{margin:0;font-size:15.5px;line-height:1.55;color:var(--s2-grau)}
html.s2-statisch .s2b-nl-buehne,html:not(.s2-js) .s2b-nl-buehne{height:auto;margin-top:0}
html.s2-statisch .s2b-nl-klebt,html:not(.s2-js) .s2b-nl-klebt{position:relative;height:auto;padding:0}
@media (max-width:900px){
.s2b-nl-buehne{height:auto;margin-top:0}
.s2b-nl-klebt{position:relative;height:auto;padding:0}
.s2b-nl-mitte{width:100%;padding-inline:var(--s2-rand)}
.s2b-nl-stapel{width:min(400px,100%);margin-inline:auto;transform:none;opacity:1}
.s2b-nl-lage{display:grid;grid-template-columns:16px 12px minmax(0,1fr);align-items:start}
.s2b-nl-lage .s2b-nl-karte{grid-column:1/-1;grid-row:1}
.s2b-nl-lage.l1{transform:translate3d(0,calc((1 - var(--e)) * var(--dy1,0px)),0)}
.s2b-nl-lage.l3{transform:translate3d(0,calc((1 - var(--e)) * var(--dy2,0px) * -1),0)}
.s2b-nl-lage:is(.re,.li) .s2b-nl-punkt{position:relative;grid-column:2;grid-row:2;left:auto;right:auto;top:auto;margin:-6px 0 0}
.s2b-nl-lage:is(.re,.li) .s2b-nl-linie{position:relative;grid-column:2;grid-row:3;justify-self:center;left:auto;right:auto;top:auto;width:2px;height:auto;align-self:stretch;margin:0;transform:scaleY(var(--l));transform-origin:50% 0}
.s2b-nl-lage:is(.re,.li) .s2b-nl-label{position:relative;grid-column:3;grid-row:2/4;left:auto;right:auto;top:auto;width:auto;text-align:left;padding:14px 0 26px 14px;
transform:translate3d(0,calc((1 - var(--l)) * 12px),0)}
.s2b-nl-label .s2-h3{font-size:27px}
.s2b-nl-blase{display:none}
.s2b-nl-karte::after{opacity:1}
.s2b-nl-karte.bild{border-radius:16px}
.s2b-nl-karte.knopf::before{display:none}
}
html.s2-statisch .s2b-nl-stapel{--p:1!important;transform:none;opacity:1}
/* ===================================================================== 4. AUTOMATIONEN (EIN durchgehender Verlauf, weiße Abstände) ===================================================================== */
.s2b-au{--au-luecke:var(--s2-spalt);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--au-luecke)}
.s2b-au-karte{display:flex;flex-direction:column;min-width:0;text-align:center}
/* ein Bild über alle drei: jede Kachel zeigt ihren Ausschnitt (Breite 3 Kacheln + 2 Lücken, Lage 0 / 50 / 100 %) */
.s2b-au-bild{position:relative;overflow:hidden;border-radius:var(--s2-r-kachel);height:clamp(460px,40vw,560px);background:#f8f8fa} /* Feedback 3: gleiche ruhige Fläche wie hinter dem iPhone */
.s2b-au-innen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:clamp(18px,1.8vw,26px)}
.s2b-au-ausloeser{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px 0 11px;border-radius:999px;background:rgba(255,255,255,.95);
box-shadow:0 8px 24px -14px rgba(20,20,20,.35);font-size:13px;font-weight:600;color:#141414;white-space:nowrap;max-width:100%}
.s2b-au-ausloeser .s2-ic{width:16px;height:16px}
.s2b-au-blasen{position:relative;margin:auto 0;width:100%;display:flex;flex-direction:column;gap:6px}
.s2b-au-blasen .s2b-wa-b{box-shadow:var(--s2-schatten-schwebe);font-size:13.5px;max-width:calc(100% - 14px)}
.s2b-au-status{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(20,20,20,.06);font-size:12.5px;font-weight:600;color:#141414}
.s2b-au-status i{width:8px;height:8px;border-radius:50%;background:#25d366;box-shadow:0 0 0 3px rgba(37,211,102,.18)}
.s2b-au-text{padding:28px 10px 0}
.s2b-au-text .s2-h3{margin:0}
.s2b-au-text p{margin:10px auto 0;max-width:38ch;font-size:15.5px;line-height:1.55;color:var(--s2-grau)}
html.s2-js:not(.s2-statisch) .s2b-au-karte{opacity:0;transform:translate3d(0,64px,0);transition:opacity 900ms var(--s2b-kurve),transform 1200ms var(--s2b-kurve);transition-delay:calc(var(--i) * 140ms)}
html.s2-js:not(.s2-statisch) .s2b-au-karte.da{opacity:1;transform:none}
html.s2-js:not(.s2-statisch) .s2b-au-karte .s2b-au-ausloeser{opacity:0;transform:scale(.8);transition:opacity 500ms var(--s2b-kurve),transform 700ms var(--s2b-feder);
transition-delay:calc(var(--i) * 140ms + 450ms)}
html.s2-js:not(.s2-statisch) .s2b-au-karte .s2b-wa-tippt{display:inline-flex;position:absolute;left:7px;top:50%;gap:4px;padding:11px 13px;border-radius:14px 14px 14px 4px;background:#fff;opacity:0}
html.s2-js:not(.s2-statisch) .s2b-au-karte.da .s2b-wa-tippt{animation:s2bTippen 900ms var(--s2b-kurve) both;animation-delay:calc(var(--i) * 140ms + 850ms + var(--k,0) * 1200ms)}
html.s2-js:not(.s2-statisch) .s2b-au-karte .s2b-wa-b{opacity:0;transform:translate3d(0,18px,0) scale(.95);transform-origin:0 100%}
html.s2-js:not(.s2-statisch) .s2b-au-karte.da .s2b-wa-b{opacity:1;transform:none;transition:opacity 600ms var(--s2b-kurve),transform 900ms var(--s2b-feder);
transition-delay:calc(var(--i) * 140ms + 1650ms + var(--k,0) * 1200ms)}
html.s2-js:not(.s2-statisch) .s2b-au-karte .s2b-au-status{opacity:0;transform:translate3d(0,10px,0);transition:opacity 500ms var(--s2b-kurve),transform 700ms var(--s2b-kurve);
transition-delay:calc(var(--i) * 140ms + 2500ms)}
html.s2-js:not(.s2-statisch) .s2b-au-karte.da :is(.s2b-au-ausloeser,.s2b-au-status){opacity:1;transform:none}
html.s2-js:not(.s2-statisch) .s2b-au-karte.da .s2b-au-status i{animation:s2bPuls 2.4s ease-in-out 3s infinite}
@keyframes s2bPuls{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.65}}
/* ===================================================================== 5. KONTAKTE (Schritte wie sektionen2/ablauf) ===================================================================== */
.s2b-st{position:relative;list-style:none;margin:0 auto;padding:0;max-width:1040px;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;row-gap:44px}
.s2b-st-linie{position:absolute;left:50%;top:var(--st-oben,40px);bottom:var(--st-unten,40px);width:2px;margin-left:-1px;background:#e4e4e2;border-radius:2px}
.s2b-st-fuell{position:absolute;left:0;top:0;width:100%;height:100%;background:#141414;border-radius:2px;transform-origin:50% 0;transform:scaleY(var(--st-p,0))}
.s2b-st-schritt{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);align-items:stretch}
.s2b-st-schritt.li .s2b-st-karte{grid-column:1;grid-row:1}
.s2b-st-schritt.re .s2b-st-karte{grid-column:3;grid-row:1}
.s2b-st-nr{grid-column:2;grid-row:1;justify-self:center;align-self:center;position:relative;z-index:1;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
font:600 14px/1 var(--s2-sans);font-variant-numeric:tabular-nums;color:#6e6e6b;background:#fff;box-shadow:0 0 0 1.5px #e4e4e2;
transition:background-color 400ms var(--s2b-kurve),color 400ms var(--s2b-kurve),box-shadow 400ms var(--s2b-kurve),transform 500ms var(--s2b-feder)}
.s2b-st-schritt.an .s2b-st-nr{background:#141414;color:#fff;box-shadow:0 0 0 5px #fff,0 0 0 6px #e4e4e2;transform:scale(1.08)}
.s2b-st-karte{display:flex;flex-direction:column;background:#fff;border-radius:var(--s2-r-kachel);box-shadow:var(--s2-schatten-ruhig);padding:26px 26px 24px}
.s2b-st-karte h3{margin:0;font:400 clamp(25px,1vw + 15px,30px)/1.1 var(--s2-serif);letter-spacing:-.01em;color:#141414}
.s2b-st-karte>p{margin:8px 0 20px;font-size:15.5px;line-height:1.55;color:var(--s2-grau);max-width:44ch}
.s2b-st-teil{flex:1 0 auto;display:grid;place-items:center;min-height:150px}
.s2b-st-qr{width:100%;height:100%;min-height:200px;display:grid;place-items:center;padding:22px;border-radius:calc(var(--s2-r-kachel) - 12px)}
.s2b-st-aufsteller{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:180px;padding:16px 16px 14px;border-radius:16px;background:#fff;
box-shadow:var(--s2-schatten-tief);text-align:center}
.s2b-st-code{position:relative;width:96px;height:96px;margin-bottom:8px}
.s2b-st-code svg{display:block;width:100%;height:100%}
.s2b-st-code .e{position:absolute;width:20px;height:20px;border:2.5px solid #141414}
.s2b-st-code .e1{left:-9px;top:-9px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.s2b-st-code .e2{right:-9px;top:-9px;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.s2b-st-code .e3{left:-9px;bottom:-9px;border-right:0;border-top:0;border-radius:0 0 0 8px}
.s2b-st-code .e4{right:-9px;bottom:-9px;border-left:0;border-top:0;border-radius:0 0 8px 0}
.s2b-st-aufsteller b{font-size:14px;line-height:1.3;color:#141414}
.s2b-st-aufsteller small{font-size:12px;color:#6e6e6b}
.s2b-st-web.pop{height:330px}
.s2b-st-dunkel{position:absolute;inset:30px 0 0;background:rgba(20,20,20,.32)}
.s2b-st-form{position:absolute;left:14px;right:14px;bottom:14px;display:grid;gap:8px;justify-items:center;padding:16px 14px 14px;border-radius:16px;background:#fff;box-shadow:var(--s2-schatten-tief);text-align:center}
.s2b-st-form>.s2b-st-feld,.s2b-st-form>.s2b-st-form-knopf{justify-self:stretch;text-align:left}
.s2b-st-form-x{position:absolute;right:12px;top:6px;font-size:18px;line-height:1;color:#6e6e6b}
.s2b-st-form-titel{font-size:14px;line-height:1.3;color:#141414}
.s2b-st-form-unter{margin-top:-4px;font-size:11.5px;line-height:1.4;color:#6e6e6b}
.s2b-st-feld{display:flex;flex-direction:column;gap:1px;padding:7px 12px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #e4e4e2}
.s2b-st-feld small{font-size:11.5px;font-weight:600;color:#6e6e6b}
.s2b-st-tipp{font-size:15px;color:#141414;white-space:nowrap;overflow:hidden}
.s2b-st-form-knopf{height:40px;border-radius:14px;background:#141414;color:#fff;display:grid;place-items:center;font-size:14.5px;font-weight:600}
.s2b-st-wa.s2b-wa-chat{position:relative;width:min(100%,340px);gap:4px;padding:14px 8px;border-radius:18px;background-color:#efe7de}
.s2b-st-wa .s2b-wa-b{font-size:13.5px}
.s2b-st-tap{position:absolute;left:44%;top:var(--tap-y,46%);width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(20,20,20,.18);opacity:0;pointer-events:none}
.s2b-st-web{position:relative;width:min(100%,320px);height:210px;border-radius:16px;overflow:hidden;background:#fafaf9;box-shadow:0 0 0 1px #e4e4e2}
.s2b-st-web-leiste{display:flex;align-items:center;gap:5px;height:30px;padding:0 10px;background:#fff;border-bottom:1px solid #e4e4e2}
.s2b-st-web-leiste i{width:8px;height:8px;border-radius:50%;background:#e4e4e2}
.s2b-st-web-leiste span{margin-left:8px;font-size:11px;color:#6e6e6b}
.s2b-st-web-seite{display:grid;gap:7px;padding:16px}
.s2b-st-web-seite i{display:block;height:7px;border-radius:4px;background:#ececea}
.s2b-st-web-seite i.t{width:60%;height:12px;background:#e4e4e2}.s2b-st-web-seite i.k{width:80%}
.s2b-st-popup{position:absolute;left:14px;right:14px;bottom:12px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px;border-radius:14px;background:#fff;box-shadow:var(--s2-schatten-tief);text-align:center}
.s2b-st-popup-wa{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#25d366;color:#fff}
.s2b-st-popup-wa .s2-ic{width:16px;height:16px}
.s2b-st-popup b{font-size:13px;color:#141414}.s2b-st-popup small{font-size:11.5px;color:#6e6e6b}
.s2b-st-popup .s2b-st-form-knopf{width:100%;height:34px;margin-top:6px;font-size:12.5px}
.s2b-st-ctw{display:flex;flex-direction:column;align-items:center;gap:10px}
.s2b-st-ctw-wa-knopf,.s2b-st-ctw-knopf{display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 22px;border-radius:999px;background:#25d366;color:#fff;font-size:15px;font-weight:600;box-shadow:0 14px 30px -14px rgba(37,211,102,.7)}
.s2b-st-ctw-knopf .s2-ic{width:18px;height:18px}
.s2b-st-ctw small{font-size:12.5px;color:#6e6e6b}
.s2b-st-kontakt{width:min(100%,340px);display:grid;gap:10px}
.s2b-st-teil .s2f-echt.s2b-st-echt-kontakt{max-width:340px} /* 19.10.: echte Aufnahme des Kontakts (Handy-Ansicht der App), so breit wie die alte Karte */
.s2b-st-k-kopf{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:#fff;box-shadow:var(--s2-schatten-schwebe)}
.s2b-st-k-kopf>div{flex:1;min-width:0}
.s2b-st-k-kopf b{display:block;font-size:14.5px;color:#141414}
.s2b-st-k-kopf small{display:block;font-size:12.5px;color:#6e6e6b}
.s2b-st-k-av{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:#f1f1f0;font:600 15px/1 var(--s2-sans);color:#141414}
.s2b-st-ok{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px #e4e4e2;font-size:12.5px;font-weight:600;color:#141414;white-space:nowrap}
.s2b-st-ok i{width:7px;height:7px;border-radius:50%;background:#25d366}
.s2b-st-pdf{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px #e4e4e2;font-size:13.5px;font-weight:600;color:#141414}
.s2b-st-pdf .s2-ic{width:18px;height:18px}
.s2b-st-pdf span{flex:1}
.s2b-st-pdf small{padding:3px 8px;border-radius:6px;background:#f1f1f0;font-size:11px;font-weight:700;color:#6e6e6b}
html.s2-js:not(.s2-statisch) .s2b-st-schritt:not(.da) .s2b-st-karte{opacity:0;transform:translate3d(-36px,14px,0)}
html.s2-js:not(.s2-statisch) .s2b-st-schritt.re:not(.da) .s2b-st-karte{transform:translate3d(36px,14px,0)}
.s2b-st-karte{transition:opacity 800ms var(--s2b-kurve),transform 1000ms var(--s2b-kurve)}
html.s2-js:not(.s2-statisch) .s2b-st-schritt:not(.an) .s2b-st-aufsteller{opacity:0;transform:translate3d(0,26px,0) scale(.9)}
.s2b-st-aufsteller{transition:opacity 600ms var(--s2b-kurve),transform 900ms var(--s2b-feder)}
html.s2-js:not(.s2-statisch) .s2b-st-schritt.an .s2b-st-code .e{animation:s2bZiel 900ms var(--s2b-kurve) 500ms both}
@keyframes s2bZiel{0%{transform:scale(1.7);opacity:0}100%{transform:none;opacity:1}}
html.s2-js:not(.s2-statisch) .s2b-st-schritt:not(.an) :is(.s2b-st-feld,.s2b-st-form-knopf){opacity:0;transform:translate3d(0,10px,0)}
:is(.s2b-st-feld,.s2b-st-form-knopf){transition:opacity 500ms var(--s2b-kurve),transform 700ms var(--s2b-kurve);transition-delay:calc(var(--k,0) * 160ms + 150ms)}
.s2b-st-form-knopf{transition-delay:500ms;text-align:center!important}
html.s2-js:not(.s2-statisch) .s2b-st-schritt.an .s2b-st-form-knopf{animation:s2bDruck 420ms var(--s2b-kurve) 2600ms both}
@keyframes s2bDruck{50%{transform:scale(.95)}}
html.s2-js:not(.s2-statisch) .s2b-st-schritt:not(.an) .s2b-st-wa .s2b-wa-b{opacity:0;transform:translate3d(0,14px,0) scale(.95)}
.s2b-st-wa .s2b-wa-b{transition:opacity 500ms var(--s2b-kurve),transform 800ms var(--s2b-feder);transition-delay:calc(250ms + var(--k,0) * 1100ms)}
html.s2-js:not(.s2-statisch) .s2b-st-schritt.an .s2b-st-tap{animation:s2bTap 900ms ease-out 1000ms both}
@keyframes s2bTap{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.8)}}
html.s2-js:not(.s2-statisch) .s2b-st-schritt:not(.an) :is(.s2b-st-k-kopf,.s2b-st-pdf){opacity:0;transform:translate3d(0,14px,0) scale(.96)}
:is(.s2b-st-k-kopf,.s2b-st-pdf){transition:opacity 600ms var(--s2b-kurve),transform 800ms var(--s2b-feder);transition-delay:200ms}
.s2b-st-pdf{transition-delay:650ms}
html.s2-js:not(.s2-statisch) .s2b-st-schritt:not(.an) .s2b-st-ok{opacity:0;transform:scale(.6)}
.s2b-st-ok{transition:opacity 400ms var(--s2b-kurve),transform 600ms var(--s2b-feder);transition-delay:1000ms}
html.s2-js:not(.s2-statisch) .s2b-st-schritt:not(.an) :is(.s2b-st-popup,.s2b-st-ctw-knopf){opacity:0;transform:translate3d(0,20px,0) scale(.94)}
:is(.s2b-st-popup,.s2b-st-ctw-knopf){transition:opacity 600ms var(--s2b-kurve),transform 900ms var(--s2b-feder);transition-delay:350ms}
html.s2-statisch .s2b-st{--st-p:1}
html.s2-statisch .s2b-st-fuell{transform:none}
html.s2-statisch .s2b-st-nr{background:#141414;color:#fff}
html.s2-js:not(.s2-statisch) .s2b-tippt-feld .s2b-z:not(.da){opacity:0}
/* ===================================================================== 6. POSTFACH wie im Dashboard (Werte 1:1 aus postfach.js / index.html / schwarz.css) ===================================================================== */
.s2b-ai-buehne{position:relative;border-radius:var(--s2-r-kachel);padding:clamp(18px,4vw,64px) clamp(12px,4vw,64px);background:#efe7ee var(--s2b-verlauf) center/cover no-repeat}
.s2b-app{--g25:#f8f8fa;--g50:#f5f5f7;--g100:#efeff2;--g200:#e8e8ec;--g300:#d6d6dd;--g400:#9a9ba3;--g500:#6e6f78;--g700:#4b4c54;--g900:#0d0d10;
--app:"Instrument Sans",system-ui,sans-serif;position:relative;display:grid;grid-template-columns:224px 316px minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:clamp(560px,46vw,660px);border-radius:22px;overflow:hidden;background:#fff;
box-shadow:0 0 0 1px rgba(20,20,20,.06),0 50px 100px -50px rgba(20,20,20,.5);font-family:"Instrument Sans",system-ui,sans-serif;color:var(--g900);text-align:left}
.s2b-app-ic{width:20px;height:20px;flex:none}
.s2b-app-ic.klein{width:20px;height:20px;color:var(--g500)}
.s2b-app-seite{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:#f8f8fa;border-right:1px solid var(--g200);padding:20px 12px 12px;min-width:0}
.s2b-app-marke{display:flex;align-items:center;justify-content:space-between;padding:0 4px 18px 10px}
.s2b-app-marke img{height:22px;width:auto}
.s2b-app-suche{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;margin-bottom:12px;border-radius:14px;background:#fff;color:var(--g500);font:500 13.5px/1 var(--app);box-shadow:0 0 0 1px var(--g200)}
.s2b-app-suche span{flex:1;font-size:13.5px}
.s2b-app-suche .s2b-app-ic{width:17px;height:17px}
.s2b-app-suche kbd{font:500 11px/1 var(--app);color:var(--g400);background:var(--g50);border-radius:7px;padding:3px 6px}
.s2b-app-nav{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.s2b-app-nav li{position:relative;display:flex;align-items:center;gap:11px;height:38px;padding:0 11px;border-radius:14px;font-size:14px;font-weight:500;color:var(--g500);white-space:nowrap}
.s2b-app-nav li.an{background:#fff;color:var(--g900);font-weight:600;box-shadow:0 0 0 1px var(--g200),0 3px 10px rgba(30,20,40,.05)}
.s2b-app-nav .s2b-app-zahl{margin-left:auto;min-width:16px;height:16px;padding:0 4px;border-radius:99px;display:grid;place-items:center;font:700 10px/16px var(--app);font-style:normal;text-align:center;font-variant-numeric:tabular-nums;color:#fff;
background:linear-gradient(180deg,#e0526a,#d02f47)}
.s2b-app-konto{margin-top:auto;padding:12px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--g200),0 4px 14px rgba(30,20,40,.04)}
.s2b-app-konto-kopf{display:flex;align-items:center;gap:10px}
.s2b-app-konto-kopf>div{min-width:0}
.s2b-app-konto b{display:block;font-size:13.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2b-app-konto small{display:block;font-size:12px;color:var(--g500);white-space:nowrap}
.s2b-app-support{display:grid;place-items:center;height:36px;margin-top:12px;border-radius:14px;background:linear-gradient(180deg,#2b2b31 0%,#0d0d10 100%);color:#fff;font-size:12.5px;font-weight:600}
.s2b-app-liste{display:flex;flex-direction:column;min-height:0;overflow:hidden;border-right:1px solid var(--g100);min-width:0}
.s2b-app-lh{display:flex;gap:8px;padding:20px 14px 12px}
.s2b-app-searchx{flex:1;display:flex;align-items:center;gap:9px;height:40px;padding:0 14px;border-radius:14px;background:var(--g50);color:var(--g500);font-size:14px;min-width:0}
.s2b-app-searchx .s2b-app-ic{width:17px;height:17px}
.s2b-app-searchx span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2b-app-box{width:40px;height:40px;flex:none;border-radius:14px;display:grid;place-items:center;background:var(--g50);color:var(--g700)}
.s2b-app-its{list-style:none;margin:0;padding:0 8px;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;align-content:start;overflow:hidden}
.s2b-app-it{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:16px}
.s2b-app-it.an{background:var(--g50)}
.s2b-app-avt{width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;font:600 17px/1 var(--app);color:#fff;
background:linear-gradient(180deg,#2b2b31 0%,#0d0d10 100%);box-shadow:0 1px 0 rgba(255,255,255,.14) inset}
.s2b-app-avt.klein{width:40px;height:40px;font-size:16px}
.s2b-app-it-text{flex:1;min-width:0;display:flex;flex-direction:column}
.s2b-app-it-text b{font:600 15px/20px var(--app);color:#0d0d10}
.s2b-app-zeile{display:flex;align-items:center;gap:8px;min-width:0}
.s2b-app-pv{flex:1;min-width:0;font-size:14px;line-height:20px;color:var(--g500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2b-app-pv.neu{color:var(--g900)}
.s2b-app-ub{min-width:16px;height:16px;padding:0 4px;border-radius:99px;display:grid;place-items:center;font:700 10px/16px var(--app);font-style:normal;text-align:center;font-variant-numeric:tabular-nums;color:#fff;
background:linear-gradient(180deg,#e0526a,#d02f47);box-shadow:0 0 0 1.5px #fff,0 2px 4px rgba(208,47,71,.3)}
.s2b-app-chat{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:#fff}
.s2b-app-ch{display:flex;align-items:center;gap:12px;height:76px;padding:16px 20px 0;flex:none}
.s2b-app-who{flex:1;min-width:0;display:flex;flex-direction:column}
.s2b-app-who b{font:600 16px/22px var(--app)}
.s2b-app-who small{font-size:12.5px;line-height:17px;color:var(--g500)}
.s2b-app-oben{display:flex;gap:8px;align-self:flex-start}
.s2b-app-iconb{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px var(--g200);color:var(--g700)}
.s2b-app-iconb .s2b-app-ic{width:19px;height:19px}
.s2b-app-iconb .s2b-app-zahl{position:absolute;right:-3px;top:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;display:grid;place-items:center;font:700 10px/16px var(--app);font-style:normal;text-align:center;font-variant-numeric:tabular-nums;color:#fff;
background:linear-gradient(180deg,#e0526a,#d02f47);box-shadow:0 0 0 1.5px #fff}
.s2b-app-iconb.kugel{box-shadow:none;background:none}
.s2b-app-thread{position:relative;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:4px clamp(16px,6%,64px) 18px}
.s2b-app-day{align-self:center;margin:18px 0 8px;font-size:12.5px;font-weight:500;color:var(--g400)}
.s2b-app-row{display:flex;margin-top:6px}
.s2b-app-row.aus{justify-content:flex-end}
.s2b-app-b{max-width:min(520px,82%);padding:10px 15px 8px;border-radius:20px;font-size:14.5px;line-height:21.5px;color:#0d0d10;white-space:pre-line}
.s2b-app-b.ein{background:#fff;box-shadow:0 0 0 1px var(--g200)}
.s2b-app-b.aus{background:var(--g100)}
.s2b-app-logo{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:#141414;color:#f4efe6;font:italic 400 15px/1 var(--s2-serif);box-shadow:0 0 0 1px rgba(201,169,110,.55) inset}
.s2b-app-b b{font-weight:600}
.s2b-app-by{display:flex;align-items:center;gap:5px;margin-bottom:4px;font:600 12px/15px var(--app);color:var(--g500)}
.s2b-app-by-ic{width:12px;height:12px}
.s2b-app-meta{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:3px;font-size:11.5px;line-height:14px;color:var(--g400)}
.s2b-app-tk{height:11px;width:auto;color:#0d0d10}
.s2b-app-cmp{flex:none;padding:6px clamp(16px,6%,64px) 18px}
.s2b-app-field{display:grid;grid-template-columns:auto auto auto 1fr auto;grid-template-areas:"ta ta ta ta ta" "a b c . s";gap:6px 4px;align-items:center;padding:14px 14px 10px;border-radius:24px;background:#fff;
box-shadow:0 0 0 1px var(--g200),0 12px 36px -8px rgba(30,20,40,.12)}
.s2b-app-ta{grid-area:ta;font-size:15px;line-height:22px;color:var(--g400);padding:0 4px}
.s2b-app-aib{grid-area:a;padding:0 8px;font:500 14px/1 var(--app);color:var(--g500)}
.s2b-app-ib{display:grid;place-items:center;width:30px;height:32px;color:var(--g500)}
.s2b-app-ib .s2b-app-ic{width:19px;height:19px}
.s2b-app-send{grid-area:s;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#2b2b31 0%,#0d0d10 100%)}
.s2b-app-send .s2b-app-ic{width:17px;height:17px}
/* SmartChat AI schreibt …, dann tippt sich die Antwort (Zeichen werden nur sichtbar, Höhe steht fest) */
.s2b-ai-tippt{display:none;align-self:flex-end;align-items:center;gap:7px;margin-top:8px;font-size:12.5px;font-weight:500;color:var(--g500)}
.s2b-ai-tippt .s2b-app-by-ic{width:12px;height:12px}
.s2b-ai-pkt{display:inline-flex;gap:3px}
.s2b-ai-pkt i{width:5px;height:5px;border-radius:50%;background:var(--g400);animation:s2-tippt 1.2s ease-in-out infinite}
.s2b-ai-pkt i:nth-child(2){animation-delay:.15s}.s2b-ai-pkt i:nth-child(3){animation-delay:.3s}
.s2b-z{opacity:1;transition:opacity 120ms linear}
html.s2-js:not(.s2-statisch) .s2b-app.tippt-gleich .s2b-z:not(.da){opacity:0}
html.s2-js:not(.s2-statisch) .s2b-app:not(.los) :is(.s2b-ai-frage,.s2b-ai-antwort){opacity:0;transform:translate3d(0,16px,0)}
:is(.s2b-ai-frage,.s2b-ai-antwort){transition:opacity 600ms var(--s2b-kurve),transform 900ms var(--s2b-feder)}
html.s2-js:not(.s2-statisch) .s2b-app.los:not(.antwort) .s2b-ai-antwort{position:absolute;opacity:0;transform:translate3d(0,16px,0)}
html.s2-js:not(.s2-statisch) .s2b-app.schreibt .s2b-ai-tippt{display:inline-flex;animation:s2bAuf 400ms var(--s2b-kurve) both}
@keyframes s2bAuf{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
.s2b-ai-punkte{list-style:none;margin:clamp(40px,4vw,64px) auto 0;padding:0;max-width:1000px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.s2b-ai-punkte li{display:flex;gap:14px;align-items:flex-start}
.s2b-ai-punkte .s2-symbol{flex:none}
.s2b-ai-punkte h3{margin:2px 0 0}
.s2b-ai-punkte p{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--s2-grau)}
/* ===================================================================== 7. FRAGEN ===================================================================== */
.s2b-faq .s2-faq-liste{max-width:820px;margin:0 auto;border-bottom:1px solid #e4e4e2}
.s2b-seite .s2b-faq .s2-faq-q{font:600 18px/1.4 var(--s2-sans);letter-spacing:-.005em}
@media (max-width:640px){.s2b-seite .s2b-faq .s2-faq-q{font-size:16.5px}}
/* ===================================================================== 8. ABSCHLUSS (ruhiger Verlauf, kein Foto) ===================================================================== */
.s2b-schluss-karte{position:relative;background:#fff}
.s2b-schluss-inhalt{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(64px,8vw,120px) clamp(24px,5vw,72px)}
.s2b-schluss-kugel{--g:52px;margin-bottom:28px}
.s2b-schluss .s2-h2{max-width:none;margin-inline:auto}
.s2b-zeile{display:block}
.s2b-schluss .s2-text{margin-top:22px;max-width:48ch;color:#141414}
.s2b-schluss .s2-knopfreihe{margin-top:34px;justify-content:center}
/* ===================================================================== Tablet ===================================================================== */
@media (max-width:1100px){
.s2b-app{grid-template-columns:0 280px minmax(0,1fr)}
.s2b-app-seite{display:none}
.s2b-al-flaeche .s2b-wa-iphone{--w:290px}
}
@media (max-width:900px){
.s2b-al-raster{gap:28px}
.s2b-al-knopf{padding:18px 12px 18px 10px;gap:12px}
.s2b-al-flaeche{min-height:680px}
.s2b-au{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto;gap:56px}
.s2b-app{grid-template-columns:minmax(0,1fr)}
.s2b-app-liste{display:none}
.s2b-ai-punkte{grid-template-columns:minmax(0,1fr);max-width:520px}
}
/* ===================================================================== Handy (bis 760 px) ===================================================================== */
@media (max-width:760px){
.s2b-trust{margin-bottom:24px;height:36px;font-size:13px}
.s2b-h1{font-size:clamp(36px,10vw,46px)}
.s2b-hero-satz{margin-top:18px}
.s2b-hero-mitte>.s2-knopfreihe{margin-top:30px;width:100%}
.s2b-hero-mitte>.s2-knopfreihe .s2-knopf{width:100%}
.s2b-al-raster{grid-template-columns:minmax(0,1fr);gap:20px}
html.s2-js:not(.s2-statisch) .s2b-al-liste.s2-wisch{--s2-wisch-b:82%;gap:10px;padding-bottom:4px}
html.s2-js:not(.s2-statisch) .s2b-al-liste.s2-wisch .s2b-al-knopf{height:100%;background:#fff;box-shadow:0 0 0 1px #e4e4e2}
html.s2-js:not(.s2-statisch) .s2b-al-liste.s2-wisch .s2b-al.an .s2b-al-knopf{box-shadow:0 0 0 1.5px #141414}
html.s2-js:not(.s2-statisch) .s2b-al-liste.s2-wisch .s2b-al:not(.an) .s2b-al-text{opacity:.8}
.s2b-al-titel{font-size:24px}
.s2b-al-flaeche{height:auto;padding:36px 0}
.s2b-al-flaeche .s2b-wa-iphone{--w:min(280px,74vw)}
.s2b-au{max-width:none;gap:56px}
html.s2-js:not(.s2-statisch) .s2b-au.s2-wisch{--s2-wisch-b:86%;gap:12px}
html.s2-js:not(.s2-statisch) .s2b-au.s2-wisch .s2b-au-karte{opacity:1;transform:none;transition-delay:0ms}
.s2b-au-bild{height:clamp(440px,118vw,500px)}
.s2b-au-text{padding-top:20px}
.s2b-st{grid-auto-rows:auto;row-gap:64px}
.s2b-st-linie{left:19px}
.s2b-st-schritt{grid-template-columns:38px minmax(0,1fr);column-gap:14px;align-items:start}
.s2b-st-schritt.li .s2b-st-karte,.s2b-st-schritt.re .s2b-st-karte{grid-column:2}
.s2b-st-nr{grid-column:1;margin-top:24px;align-self:start}
.s2b-st-karte{padding:22px 16px 20px}
.s2b-st-karte h3{font-size:25px}
html.s2-js:not(.s2-statisch) .s2b-st-schritt:not(.da) .s2b-st-karte,html.s2-js:not(.s2-statisch) .s2b-st-schritt.re:not(.da) .s2b-st-karte{transform:translate3d(0,22px,0)}
.s2b-ai-buehne{padding:16px 10px}
.s2b-app{height:620px;border-radius:20px}
.s2b-app-ch{height:auto;padding:14px 14px 6px}
.s2b-app-thread{padding:4px 12px 12px}
.s2b-app-b{max-width:90%;font-size:14px;line-height:20.5px}
.s2b-app-cmp{padding:6px 12px 12px}
.s2b-schluss-inhalt{padding:56px 22px 60px}
.s2b-schluss-kugel{--g:44px;margin-bottom:22px}
}
@media (max-width:380px){
.s2b-trust{font-size:12.5px;padding:0 13px 0 10px}
.s2b-st-k-kopf{flex-wrap:wrap}
}
/* ===================================================================== Endzustand / reduzierte Bewegung ===================================================================== */
html.s2-statisch .s2b-al-chat .s2b-wa-b{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.s2b *,.s2b *::before,.s2b *::after{animation:none!important;transition:none!important}
}
/* 19.10.: Automations-Nachrichten nie abschneiden (lange Texte anderer Branchen). Karte wächst mit, Mindesthöhe bleibt. */
.s2b-au-bild{height:auto;min-height:clamp(460px,40vw,560px)}
.s2b-au-innen{position:relative;inset:auto;min-height:inherit}
@media (max-width:760px){.s2b-au-bild{height:auto;min-height:clamp(440px,118vw,500px)}}
/* ===================================================================== Gründer-Feedback 19.10. (Apotheken, gilt für alle Branchen) ===================================================================== */
/* Bild- und Video-Nachrichten wie in WhatsApp: Bild oben in der Blase (3 px Rand), Video = Bild mit Play-Button und Dauer unten links */
.s2b-wa-b.mit-medien{width:84%}
.s2b-wa-iphone .s2b-wa-b.mit-medien{width:84%}
.s2b-wa-b-bild{position:relative;height:auto;aspect-ratio:4/3}
.s2b-wa-iphone .s2b-wa-b-bild{aspect-ratio:auto;height:calc(var(--w) * .38)}
.s2b-wa-b-bild.video::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42px;background:linear-gradient(180deg,rgba(11,20,26,0),rgba(11,20,26,.55));pointer-events:none}
.s2b-wa-play{position:absolute;left:50%;top:50%;z-index:1;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;display:grid;place-items:center;
background:rgba(11,20,26,.52);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 0 0 1px rgba(255,255,255,.18) inset}
.s2b-wa-play svg{width:26px;height:26px;margin-left:3px}
.s2b-wa-iphone .s2b-wa-play{width:calc(var(--w) * .16);height:calc(var(--w) * .16);margin:calc(var(--w) * -.08) 0 0 calc(var(--w) * -.08)}
.s2b-wa-iphone .s2b-wa-play svg{width:calc(var(--w) * .08);height:calc(var(--w) * .08)}
.s2b-wa-dauer{position:absolute;left:9px;bottom:7px;z-index:1;display:inline-flex;align-items:center;gap:5px;font:500 11.5px/1 var(--s2b-ios);color:#fff}
.s2b-wa-dauer svg{width:16px;height:11px;color:#fff}
/* Automationen: Nachricht exakt mittig im Feld (vorher 14 px nach links verschoben) */
.s2b-au-blasen{align-items:center}
.s2b-au-blasen .s2b-wa-b,.s2b-au-blasen .s2b-wa-b.mit-medien{align-self:center;width:100%;max-width:none;margin:0}
html.s2-js:not(.s2-statisch) .s2b-au-karte .s2b-wa-tippt{left:0}
.s2b-au-blasen .s2b-wa-b-bild{aspect-ratio:16/10}
/* QR-Code: echter Code (app.smartchat.marketing), Link, mehr Luft oben, ohne "scannen"-Zeile */
a.s2b-st-aufsteller{color:inherit;text-decoration:none;padding-top:30px;gap:6px}
a.s2b-st-aufsteller:hover{transform:translateY(-2px)}
a.s2b-st-aufsteller:focus-visible{outline:2px solid #141414;outline-offset:3px}
.s2b-st-code{display:block;width:104px;height:104px;margin-bottom:10px}
/* Links in Fließtexten (FAQ-Antworten, Unterzeilen, Karten): fett und unterstrichen */
.s2b-seite .s2b :is(.s2-faq-antwort,.s2-text,.s2b-al-satz,.s2b-au-text,.s2b-st-karte>p,.s2b-ai-punkte,.s2b-nl-label,.s2b-hero-satz) a:not(.s2-knopf){
color:inherit;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.s2b-seite .s2b :is(.s2-faq-antwort,.s2-text,.s2b-al-satz,.s2b-au-text,.s2b-st-karte>p,.s2b-ai-punkte,.s2b-nl-label,.s2b-hero-satz) a:not(.s2-knopf):hover{text-decoration-thickness:2.5px}
/* Gleichmäßige Abstände zwischen allen Sektionen (Gründer 19.10.): jede Sektion oben und unten var(--s2-luft) (Desktop 1440: 104 + 104 = 208 px, Handy 390: 56 + 56 = 112 px).
Die Newsletter-Bühne (klebt am Desktop) zieht ihren Leerraum über --nl-oben/--nl-unten ab, die branche.js aus der fertigen Nachricht misst,
damit vom Ende der Anlässe bis zur Nachricht und von der Nachricht bis zur nächsten Überschrift genau derselbe Abstand bleibt. */
.s2b .s2b-sek.s2-sek{padding-block:var(--s2-luft)}
.s2b .s2b-anlaesse.s2-sek{padding-top:clamp(28px,4.5vw,72px)}
@media (min-width:901px){html.s2-js:not(.s2-statisch) .s2b-nl-buehne{margin-top:calc(-1 * var(--nl-oben,clamp(24px,4vw,64px)));margin-bottom:calc(-1 * var(--nl-unten,0px))}}
.s2b-schluss-inhalt{padding-top:0;padding-bottom:0}
/* Automationen: die drei Felder gleich hoch (das längste bestimmt), Titel darunter auf einer Linie (Desktop) */
@media (min-width:901px){
.s2b-au{grid-template-rows:auto auto}
.s2b-au-karte{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
}
@media (max-width:900px){.s2b-au-bild{flex:1 0 auto}}
/* 19.10.2026: Logo des Beispielbetriebs als Bild (medien/logo.svg) */
.s2b-wa-av.bild{background:transparent}
.s2b-wa-av.bild img{object-fit:contain}
/* 19.10.2026 Gründer: (a) Automations-Karten: mehr Abstand zwischen Auslöser-Pille oben und der Nachricht darunter (vorher nur margin:auto, bei hohen Nachrichten fast 0), Desktop und Handy.
(b) Play-Knopf: Dreieck saß zu weit rechts (Pfad liegt schon rechts im 24er-Feld + margin-left 3px), jetzt optisch mittig (Schwerpunkt des Dreiecks in der Kreismitte). Sicherung: branche.css.vor-namen-19-10 */
.s2b-au-innen{gap:24px}
@media (max-width:760px){.s2b-au-innen{gap:22px}}
.s2b-wa-play svg{margin-left:-1px}
/* ===================================================================== iOS echt (19.10.2026, Gründer: "muss aussehen wie ein echter Screenshot eines iPhone 17 Pro mit iOS 26")
Maße wie beim Gerät: 71,9 x 150 mm (Höhe = 2,086 x Breite), Bildschirm 402 x 874 pt, 1 pt = --pt. Dynamic Island 125 x 36,7 pt bei 11 pt,
Statusleiste 62 pt, Uhrzeit SF Pro Semibold 17 pt, Home-Balken 139 x 5 pt. Rahmen: Metall mit Licht/Schatten, Aktionstaste, Lautstärke, Seitentaste, Kamerataste.
Überschreibt den alten iPhone-Block oben (der bleibt nur als Rückfall stehen). ===================================================================== */
.s2b-wa-iphone{--pt:calc(var(--w) * .0023159);height:calc(var(--w) * 2.086);min-height:0;border-radius:calc(var(--w) * .178);padding:calc(var(--w) * .0115);isolation:isolate;
background:
linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 1.4%,rgba(255,255,255,0) 98.4%,rgba(0,0,0,.28) 100%),
linear-gradient(90deg,#6f6e6b 0%,#f4f3ef 1.3%,#b9b8b4 2.6%,#d9d8d4 4.5%,#cfcec9 50%,#d6d5d1 95.5%,#a9a8a4 97.4%,#f1f0ec 98.7%,#6a6966 100%);
box-shadow:0 0 0 .5px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.18) inset,
0 2px 3px rgba(0,0,0,.10),0 18px 30px -12px rgba(20,20,20,.28),0 60px 90px -40px rgba(20,20,20,.50)}
/* Seitentasten: links Aktionstaste + Lautstärke, rechts Seitentaste, darunter die flache Kamerataste (Saphir) */
.s2b-wa-taste{width:calc(var(--w) * .011);border-radius:calc(var(--w) * .006);z-index:-1;
background:linear-gradient(90deg,#5d5c59 0%,#c9c8c4 30%,#f2f1ed 50%,#b4b3af 72%,#6d6c69 100%);box-shadow:0 0 0 .5px rgba(0,0,0,.35)}
.s2b-wa-taste.t1{left:calc(var(--w) * -.0085);top:18.6%;height:4.6%}
.s2b-wa-taste.t2{left:calc(var(--w) * -.0085);top:26.4%;height:7.4%}
.s2b-wa-taste.t3{left:calc(var(--w) * -.0085);top:35.4%;height:7.4%}
.s2b-wa-taste.t4{right:calc(var(--w) * -.0085);left:auto;top:28.6%;height:11.8%}
.s2b-wa-taste.t5{right:calc(var(--w) * -.0035);left:auto;top:58.5%;height:6.8%;width:calc(var(--w) * .006);border-radius:calc(var(--w) * .003);
background:linear-gradient(90deg,#3a3a3c,#8e8e93 45%,#2c2c2e);box-shadow:0 0 0 .5px rgba(0,0,0,.5)}
/* Antennenstreifen im Rahmen */
.wa-antenne{position:absolute;z-index:1;background:rgba(60,60,58,.55)}
.wa-antenne.a1,.wa-antenne.a2{top:10.5%;width:calc(var(--w) * .0115);height:calc(var(--w) * .006)}
.wa-antenne.a3,.wa-antenne.a4{bottom:10.5%;width:calc(var(--w) * .0115);height:calc(var(--w) * .006)}
.wa-antenne.a1,.wa-antenne.a3{left:0}.wa-antenne.a2,.wa-antenne.a4{right:0}
/* schwarzer Rand ums Glas (1,15 mm) */
.s2b-wa-glas{position:relative;border-radius:calc(var(--w) * .1665);padding:calc(var(--w) * .023);background:#000;
box-shadow:0 0 0 .6px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05) inset}
.s2b-wa-schirm{border-radius:calc(var(--pt) * 62);font-family:var(--s2b-ios);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Glasreflex: ganz leichter Schimmer schräg über das Glas */
.wa-glanz{position:absolute;inset:0;z-index:20;pointer-events:none;border-radius:inherit;
background:linear-gradient(118deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.04) 22%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 72%,rgba(255,255,255,.035) 100%)}
/* Dynamic Island in echter Größe */
.s2b-wa-insel{top:calc(var(--pt) * 11);width:calc(var(--pt) * 125);height:calc(var(--pt) * 36.7);margin-left:calc(var(--pt) * -62.5);z-index:21;background:#000}
.s2b-wa-insel::after{right:calc(var(--pt) * 13);width:calc(var(--pt) * 11.5);height:calc(var(--pt) * 11.5);margin-top:calc(var(--pt) * -5.75);
background:radial-gradient(circle at 38% 34%,#3a4a6e 0%,#121a2c 38%,#05070c 70%,#000 100%);box-shadow:0 0 0 calc(var(--pt) * 1.2) #0b0b0d}
/* Statusleiste iOS 26 */
.s2b-wa-status{height:calc(var(--pt) * 62);flex:none;padding:0;display:grid;grid-template-columns:1fr calc(var(--pt) * 125) 1fr;align-items:center;
padding-bottom:calc(var(--pt) * 4);background:#fff;color:#000}
.s2b-wa-uhr{grid-column:1;justify-self:center;padding-left:calc(var(--pt) * 10);font:600 calc(var(--pt) * 17)/1 var(--s2b-ios);letter-spacing:-.022em;font-variant-numeric:normal}
.s2b-wa-ikons{grid-column:3;justify-self:center;padding-right:calc(var(--pt) * 4);gap:calc(var(--pt) * 6.5)}
.s2b-wa-ikons svg{display:block;width:auto;fill:currentColor;color:inherit}
.s2b-wa-ikons .wa-st-netz{height:calc(var(--pt) * 11.4)}
.s2b-wa-ikons .wa-st-wlan{height:calc(var(--pt) * 12.2)}
.s2b-wa-ikons .wa-st-akku{height:calc(var(--pt) * 13)}
/* WhatsApp-Kopf (iOS): Pfeil + Zahl, Profilbild, Name, Video, Telefon */
.s2b-wa-kopf{height:calc(var(--pt) * 52);flex:none;gap:calc(var(--pt) * 8);padding:0 calc(var(--pt) * 16) calc(var(--pt) * 4) calc(var(--pt) * 10);
background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);box-shadow:0 .5px 0 rgba(0,0,0,.16)}
.s2b-wa-zurueck{gap:calc(var(--pt) * 4)}
.s2b-wa-zurueck svg{width:calc(var(--pt) * 11.5);height:calc(var(--pt) * 20)}
.s2b-wa-zurueck b{min-width:calc(var(--pt) * 22);height:calc(var(--pt) * 22);padding:0 calc(var(--pt) * 6);background:#e9e9eb;font:500 calc(var(--pt) * 15)/1 var(--s2b-ios);letter-spacing:-.01em}
.s2b-wa-av{width:calc(var(--pt) * 36);height:calc(var(--pt) * 36)}
.s2b-wa-av.logo{font-size:calc(var(--pt) * 15)}
.s2b-wa-wer{padding-left:calc(var(--pt) * 2)}
.s2b-wa-wer b{font:600 calc(var(--pt) * 16.5)/1.2 var(--s2b-ios);letter-spacing:-.02em}
.s2b-wa-wer small{font:400 calc(var(--pt) * 12.5)/1.3 var(--s2b-ios);color:#8a8a8e;letter-spacing:-.005em}
.s2b-wa-aktion{gap:calc(var(--pt) * 22);color:#000}
.s2b-wa-aktion svg{width:calc(var(--pt) * 26);height:calc(var(--pt) * 18);display:block}
.s2b-wa-aktion svg+svg{width:calc(var(--pt) * 21);height:calc(var(--pt) * 21)}
/* Verlauf: feste Höhe wie am echten Gerät, neueste Nachricht unten (lange Nachrichten laufen oben unter den Kopf, wie beim Scrollen) */
.s2b-wa-verlauf{min-height:0;overflow:hidden;grid-template-rows:minmax(0,1fr);background-size:calc(var(--pt) * 110) calc(var(--pt) * 110)}
.s2b-wa-iphone .s2b-al-chat,.s2b-wa-iphone .s2b-wa-chat{align-self:end;min-height:0;padding:calc(var(--pt) * 8) calc(var(--pt) * 8) calc(var(--pt) * 10)}
.s2b-wa-iphone .s2b-wa-b{font-size:calc(var(--pt) * 16.5);line-height:1.3;letter-spacing:-.012em;max-width:83%;border-radius:calc(var(--pt) * 17) calc(var(--pt) * 17) calc(var(--pt) * 17) calc(var(--pt) * 5)}
.s2b-wa-iphone .s2b-wa-b.aus{max-width:78%;border-radius:calc(var(--pt) * 17) calc(var(--pt) * 17) calc(var(--pt) * 5) calc(var(--pt) * 17)}
.s2b-wa-iphone .s2b-wa-b.mit-medien{width:80%}
.s2b-wa-iphone .s2b-wa-b-text{padding:calc(var(--pt) * 6) calc(var(--pt) * 10) calc(var(--pt) * 7) calc(var(--pt) * 11)}
.s2b-wa-iphone .s2b-wa-b-zeit{font-size:calc(var(--pt) * 11.5);right:calc(var(--pt) * 10);bottom:calc(var(--pt) * 6)}
.s2b-wa-iphone .s2b-wa-b-knopf{height:calc(var(--pt) * 42);font-size:calc(var(--pt) * 16);margin:0 calc(var(--pt) * 10)}
.s2b-wa-iphone .s2b-wa-tag{font-size:calc(var(--pt) * 12.5);padding:calc(var(--pt) * 4) calc(var(--pt) * 10);border-radius:calc(var(--pt) * 9)}
.s2b-wa-iphone .s2b-wa-b-bild{height:calc(var(--pt) * 170);margin:calc(var(--pt) * 3) calc(var(--pt) * 3) 0;border-radius:calc(var(--pt) * 14)}
/* Eingabe (iOS): Plus, Feld mit Sticker, Kamera, Mikrofon, darunter der Home-Bereich */
.s2b-wa-eingabe{flex:none;gap:calc(var(--pt) * 14);padding:calc(var(--pt) * 8) calc(var(--pt) * 14) calc(var(--pt) * 36);background:rgba(246,246,246,.96);
-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8)}
.s2b-wa-plus svg{width:calc(var(--pt) * 23);height:calc(var(--pt) * 23)}
.s2b-wa-feld{height:calc(var(--pt) * 36);padding:0 calc(var(--pt) * 10);box-shadow:0 0 0 .6px rgba(0,0,0,.16)}
.s2b-wa-feld svg{width:calc(var(--pt) * 21);height:calc(var(--pt) * 21)}
.s2b-wa-cam svg{width:calc(var(--pt) * 25);height:calc(var(--pt) * 21)}
.s2b-wa-mic svg{width:calc(var(--pt) * 16);height:calc(var(--pt) * 23)}
.s2b-wa-home{bottom:calc(var(--pt) * 8);width:calc(var(--pt) * 139);height:calc(var(--pt) * 5);margin-left:calc(var(--pt) * -69.5);z-index:22}
/* Echtes WhatsApp-App-Symbol: grüner Verlauf wie das iOS-Symbol, Superellipse (Maske), weißes Zeichen, iOS-26-Glaskante */
.wa-app-symbol{position:relative;display:grid;place-items:center;flex:none;aspect-ratio:1;
background:linear-gradient(180deg,#5ff47d 0%,#3ed95f 48%,#22bf47 100%);
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C80.5 0 89 2.6 93.2 6.8S100 19.5 100 50s-2.6 39-6.8 43.2S80.5 100 50 100s-39-2.6-43.2-6.8S0 80.5 0 50 2.6 11 6.8 6.8 19.5 0 50 0z'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C80.5 0 89 2.6 93.2 6.8S100 19.5 100 50s-2.6 39-6.8 43.2S80.5 100 50 100s-39-2.6-43.2-6.8S0 80.5 0 50 2.6 11 6.8 6.8 19.5 0 50 0z'/%3E%3C/svg%3E");
-webkit-mask-size:100% 100%;mask-size:100% 100%;box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -1px 1.5px rgba(0,0,0,.12)}
.wa-app-symbol svg.wa-zeichen{width:66%;height:66%;display:block;filter:drop-shadow(0 .5px .6px rgba(0,60,20,.18))}
/* Chat als Bildschirm-Ausschnitt: beginnt oben, branche.js rollt ihn sanft nach unten (kein Mausrad-Fang, overflow hidden) */
.s2b-wa-iphone .s2b-wa-verlauf>.s2b-wa-chat{align-self:stretch;height:100%;overflow:hidden;justify-content:flex-start}
.s2b-wa-iphone .s2b-wa-verlauf>.s2b-wa-chat>:first-child{margin-top:auto}
/* 19.10.2026 Gründer-Regel vom 18.10.: "Nachrichten im iPhone dürfen NIE abgeschnitten sein" — Betriebsnachricht (Bild, ganzer Text, Knopf) im Ausgangszustand voll sichtbar.
Darum: Bild in der Blase flach (2:1, wie WhatsApp breite Bilder zuschneidet), Kopf und Datums-Chip kompakt; die Kundenantwort darf erst durch das sanfte Rollen kommen. */
.s2b-wa-kopf{height:calc(var(--pt) * 46);padding-bottom:calc(var(--pt) * 2)}
.s2b-wa-status{height:calc(var(--pt) * 58);padding-bottom:0}
.s2b-wa-iphone .s2b-wa-tag{margin:calc(var(--pt) * 2) 0 calc(var(--pt) * 6)}
.s2b-wa-iphone .s2b-wa-verlauf>.s2b-wa-chat{padding-top:calc(var(--pt) * 6)}
.s2b-wa-iphone .s2b-wa-b{max-width:86%}
.s2b-wa-iphone .s2b-wa-b.mit-medien{width:86%}
.s2b-wa-iphone .s2b-wa-b-bild{height:auto;aspect-ratio:2/1}
.s2b-wa-absatz{display:block;height:1.3em;height:1lh}
.s2b-wa-iphone .s2b-wa-absatz{height:.65em;height:.5lh}
/* Schrift im Chat wie WhatsApp mit Textgröße "klein" (15 pt), Bild 2,6:1, Vorlagen-Knopf 38 pt — damit passt jede Betriebsnachricht ganz hinein (alle 100 Branchen geprüft).
Dafür das iPhone etwas größer, damit 15 pt gut lesbar bleibt (Desktop bis 336 px, Handy bis 320 px). */
.s2b-wa-iphone .s2b-wa-b{font-size:calc(var(--pt) * 15);line-height:1.27}
.s2b-wa-iphone .s2b-wa-b-bild{aspect-ratio:2.6/1}
.s2b-wa-iphone .s2b-wa-b-knopf{height:calc(var(--pt) * 38);font-size:calc(var(--pt) * 15)}
.s2b-al-flaeche .s2b-wa-iphone{--w:clamp(300px,23.4vw,336px)}
.s2f-iphone-flaeche .s2b-wa-iphone{--w:clamp(300px,23.4vw,336px)}
@media (max-width:1100px){.s2b-al-flaeche .s2b-wa-iphone,.s2f-iphone-flaeche .s2b-wa-iphone{--w:310px}}
@media (max-width:760px){.s2b-al-flaeche .s2b-wa-iphone,.s2f-iphone-flaeche .s2b-wa-iphone{--w:min(320px,calc(100vw - 64px))}}
/* ===== 19.10.2026 Gründer (Statistiken): "bitte schauen, dass die untere Zeile ca. gleich breit ist wie die obere". Ausgeglichener Umbruch auf allen
Branchen- und Funktionsseiten (body.s2f-seite hat auch s2b-seite), Desktop und Handy: Titel und Unterzeilen (bis ca. 6 Zeilen) "balance",
längere Absätze in Karten, Listen, Schritten und FAQ "pretty" (keine einzelnen Wörter allein in der letzten Zeile). Sicherung: branche.css.vor-balance-19-10 ===== */
.s2b-seite .s2b :is(h1,h2,h3,h4,.s2-h2,.s2-h3,.s2-h4,.s2b-al-titel,.s2b-schluss-titel),
.s2b-seite .s2b :is(.s2-kopf .s2-text,.s2b-schluss .s2-text,.s2b-hero-satz,.s2f-al-satz){text-wrap:balance}
.s2b-seite .s2b :is(.s2b-al-satz,.s2b-au-text p,.s2b-st-karte>p,.s2b-ai-punkte p,.s2f-liste p,.s2f-ab-schritt p,.s2f-opt-text p,.s2f-vn li span,.s2f-fakten p,.s2-faq-antwort,.s2-faq-antwort p){text-wrap:pretty}
/* ===== 19.10.2026 Gründer (5-sprachen: "abstand bug bei allen nachrichten"): Abstände zwischen Blasen wie im echten WhatsApp (iOS).
Vorher: Lücke fest 3 px, nur die grüne Blase hatte 6 px oben → weiße Antwort nach grüner Nachricht klebte fast daran (3 px).
Jetzt: gleicher Absender 2 pt, Absenderwechsel 8 pt (in beide Richtungen, auch mit "tippt"-Anzeige dazwischen), im iPhone in pt (skaliert mit
dem iPhone), außerhalb des iPhones 3 px / 9 px. Bild 3 pt Innenrand und Text-Innenabstand bleiben (entsprechen WhatsApp). Sicherung: branche.css.vor-blasen-abstand-19-10 ===== */
.s2b-wa-chat>.s2b-wa-b.aus{margin-top:0}
.s2b-wa-chat>:is(.s2b-wa-b.aus+.s2b-wa-b:not(.aus),.s2b-wa-b.aus+.s2b-wa-tippt+.s2b-wa-b:not(.aus),.s2b-wa-b:not(.aus)+.s2b-wa-b.aus,.s2b-wa-b:not(.aus)+.s2b-wa-tippt+.s2b-wa-b.aus){margin-top:6px}
.s2b-wa-iphone .s2b-wa-chat{gap:calc(var(--pt) * 2)}
.s2b-wa-iphone .s2b-wa-chat>:is(.s2b-wa-b.aus+.s2b-wa-b:not(.aus),.s2b-wa-b.aus+.s2b-wa-tippt+.s2b-wa-b:not(.aus),.s2b-wa-b:not(.aus)+.s2b-wa-b.aus,.s2b-wa-b:not(.aus)+.s2b-wa-tippt+.s2b-wa-b.aus){margin-top:calc(var(--pt) * 6)}
/* 21.10.2026 (Gründer: Handy-Bildschirm ragt über die runden Ecken hinaus): Die Rundung wird zusätzlich mit clip-path erzwungen; overflow:hidden+border-radius wird in manchen Browsern von bewegten Kindern (Animation, Glas) ignoriert. */
.s2b-wa-schirm{clip-path:inset(0 round calc(var(--pt) * 62));isolation:isolate}
/* ===== unterseiten/sektionen/funktion.css ===== */
/* =====================================================================================================
FUNKTIONSVORLAGE (18.10.2026) — funktion.css. Gilt nur für body.s2f-seite (seite.json "vorlage": "funktion"; body hat zusätzlich s2b-seite,
damit alle Grundwerte, Knöpfe, iPhone, Postfach, Schritte, FAQ und Abschluss aus branche.css gelten). HTML: funktion.py, Bewegung: funktion.js.
App-Nachbau: Klassen s2f-app-… (Werte 1:1 aus dem Live-Frontend pages/newsletter.js, pages.css, index.html). WhatsApp/iOS-Teile: Klassen mit "wa-".
Bewegung nur über transform und opacity. Ohne JS, ?statisch=1 und reduzierte Bewegung: Endzustand.
===================================================================================================== */
/* ---------- Start: Serif-H1 + Satz, darunter optional Knopf und Bühne ---------- */
.s2f-start.s2-sek{padding-top:clamp(28px,4.5vw,72px)}
.s2f-h1{max-width:16ch;margin-inline:auto}
.s2f-start-knopf{margin-top:34px;justify-content:center}
.s2f-start-buehne{margin-top:clamp(40px,5vw,72px)}
.s2f .s2-kopf+*{margin-top:clamp(36px,4vw,60px)}
.s2f-zerlegt-sichtbar .s2f-zerlegt-h2{display:block;text-align:center;margin:0 auto;max-width:20ch}
/* ---------- ruhige Flächen (wie hinter dem iPhone der Branchen) ---------- */
.s2f-app-buehne{border-radius:var(--s2-r-kachel);padding:clamp(14px,3.4vw,56px)}
.s2f-app-buehne.grau{background:#f8f8fa}
.s2f-app-buehne.schmal{max-width:760px;margin-inline:auto}
.s2f-iphone-flaeche{display:grid;place-items:center;width:100%;min-height:clamp(680px,54vw,760px);padding:40px 0;border-radius:var(--s2-r-kachel);background:#f8f8fa}
.s2f-iphone-flaeche .s2b-wa-iphone{--w:clamp(286px,22vw,314px)}
.s2f-punkte{margin-top:clamp(36px,4vw,56px)}
/* ---------- Text links, Bühne rechts ---------- */
.s2f-zeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:center;max-width:1160px;margin-inline:auto}
.s2f-zeile.umgekehrt>.s2f-zeile-text{order:2}
.s2f-zeile .s2-kopf{text-align:left;margin:0}
.s2f-zeile .s2-kopf .s2-h2{max-width:none} /* Abschluss 18.10.: 14ch brach Titel neben iPhone/Sperrbildschirm auf 3 bis 4 Zeilen (Regel: max. 2 Zeilen) */
.s2f-liste{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:22px}
.s2f-liste li{display:flex;gap:14px;align-items:flex-start}
.s2f-liste .s2-symbol{flex:none}
.s2f-liste h3{margin:2px 0 0}
.s2f-liste p{margin:6px 0 0;font-size:15.5px;line-height:1.55;color:var(--s2-grau);max-width:44ch}
.s2f .s2b-al-raster.s2f-umgekehrt>.s2b-al-liste{order:2}
/* ===================================================================== App-Fenster 1:1 (Dashboard) ===================================================================== */
.s2b-app.s2f-app{grid-template-columns:224px minmax(0,1fr);height:auto;min-height:clamp(520px,42vw,620px)}
.s2b-app.s2f-app.ohne-seite{grid-template-columns:minmax(0,1fr);min-height:0}
.s2f-app-haupt{min-width:0;padding:26px clamp(18px,2.6vw,36px) 30px;background:#fff;display:flex;flex-direction:column}
.s2f-app-spalten{display:grid;gap:20px;align-items:start}
.s2f-app-spalten.n2{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.s2f-app-spalte{display:grid;gap:16px;min-width:0}
.s2f-app-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:6px 0 10px}
.s2f-app-kopf>div:first-child{min-width:0}
.s2f-app-zurueck{display:block;margin-bottom:8px;font:600 13.5px/1 var(--app);color:var(--g500)}
.s2f-app-titel{display:block;font:400 34px/38px var(--s2-serif);letter-spacing:-.01em;color:var(--g900)}
.s2f-app-kopf small{display:block;margin-top:6px;font-size:14px;line-height:20px;color:var(--g500)}
.s2f-app-knoepfe{display:flex;gap:8px;flex:none}
.s2f-app-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:99px;color:#fff;font:600 14px/1 var(--app);white-space:nowrap;
background:linear-gradient(180deg,#3a3b42 0%,#16161a 55%,#0d0d10 100%);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 0 0 1px rgba(0,0,0,.92),0 1px 2px rgba(0,0,0,.12),0 5px 12px -7px rgba(0,0,0,.3)}
.s2f-app-btn.hell{background:#fff;color:var(--g900);box-shadow:0 0 0 1px var(--g200),0 1px 2px rgba(20,20,30,.05)}
.s2f-app-btn.klein{height:34px;padding:0 14px;font-size:13px}
.s2f-app-bi{width:16px;height:16px}
.s2f-app-karte{border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--g200),0 1px 2px rgba(20,20,40,.03),0 10px 30px rgba(20,20,40,.04)}
/* Liste wie nl-r1 */
.s2f-app-liste{padding:6px}
.s2f-app-zeile{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 12px;border-top:1px solid var(--g100);border-radius:16px}
.s2f-app-zeile:first-child{border-top:0}
.s2f-app-sym{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#2b2b31 0%,#0d0d10 100%)}
.s2f-app-sym .s2b-app-ic{width:22px;height:22px}
.s2f-app-zm{min-width:0}
.s2f-app-zm .t{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.s2f-app-zm .t b{font:600 15.5px/22px var(--app);color:var(--g900)}
.s2f-app-zm .m{display:flex;gap:6px 16px;flex-wrap:wrap;margin-top:4px;font-size:13px;line-height:18px;color:var(--g500)}
.s2f-app-zm .m span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.s2f-app-mi{width:14px;height:14px}
.s2f-app-erg{font:400 13px/18px var(--app);color:var(--g500);text-align:right;white-space:nowrap}
/* Statuspunkt wie stDot (pages/newsletter.js DOT) */
.s2f-app-st{display:inline-flex;align-items:center;gap:7px;font:600 13px/18px var(--app);color:var(--g700);white-space:nowrap}
.s2f-app-st i{width:8px;height:8px;border-radius:50%;flex:none;background:linear-gradient(180deg,#b9bac2,#9a9ba3)}
.s2f-app-st:is(.st-pruefung,.st-pausiert,.st-wartet) i{background:linear-gradient(180deg,#ffe066,#f2c200)}
.s2f-app-st:is(.st-abgelehnt,.st-fehler) i{background:linear-gradient(180deg,#e0526a,#d02f47)}
.s2f-app-st:is(.st-bereit,.st-gesendet,.st-aktiv,.st-bestaetigt) i{background:linear-gradient(180deg,#35c07a,#12a15a)}
.s2f-app-st:is(.st-geplant,.st-sendet) i{background:#0d0d10}
.s2f-app-st.wechselt{animation:s2fStatus 600ms var(--s2b-feder)}
@keyframes s2fStatus{0%{transform:scale(.86);opacity:.3}100%{transform:none;opacity:1}}
/* Kennzahlen wie nl-kc */
.s2f-app-kp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.s2f-app-kp.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.s2f-app-kp.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.s2f-app-kc{padding:16px 16px 14px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--g200),0 1px 2px rgba(20,20,40,.03),0 10px 30px rgba(20,20,40,.04);min-width:0}
.s2f-app-kc small{display:block;font-size:12.5px;color:var(--g500);font-weight:500}
.s2f-app-kc .n{font:400 34px/38px var(--s2-serif);margin-top:4px;letter-spacing:-.01em;color:var(--g900);font-variant-numeric:tabular-nums;white-space:nowrap}
.s2f-app-kc .p{font-size:12px;color:var(--g500);margin-top:2px}
/* Live-Versand wie nl-live */
.s2f-app-live{padding:22px 24px 18px}
.s2f-app-lh{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.s2f-app-lt{display:flex;align-items:center;gap:10px;font:600 16px var(--app);color:var(--g900)}
.s2f-app-puls{width:9px;height:9px;border-radius:50%;background:#2c8a5e;flex:none}
html.s2-js:not(.s2-statisch) .s2b-app.s2f-app.los .s2f-app-puls{animation:s2fPuls 1.8s ease-out infinite}
@keyframes s2fPuls{0%{box-shadow:0 0 0 0 var(--s2f-puls-a)}100%{box-shadow:0 0 0 10px var(--s2f-puls-b)}}
.s2b-app.s2f-app{--s2f-puls-a:rgba(44,138,94,.5);--s2f-puls-b:rgba(44,138,94,0)}
.s2f-app-eta{margin-top:6px;font-size:14px;color:var(--g500)}
.s2f-app-eta b{color:var(--g900);font-weight:600}
.s2f-app-pc{font:400 52px/46px var(--s2-serif);letter-spacing:-.02em;color:var(--g900);white-space:nowrap;font-variant-numeric:tabular-nums}
.s2f-app-trk{position:relative;height:22px;border-radius:99px;background:var(--g100);box-shadow:inset 0 1px 2px rgba(20,20,40,.08);overflow:hidden}
.s2f-app-trk i{position:absolute;left:0;top:0;bottom:0;width:var(--p);border-radius:99px;background:linear-gradient(90deg,#ffb13a,#fb5f06);transform-origin:0 50%}
.s2f-app-trk i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 55%)}
html.s2-js:not(.s2-statisch) .s2b-app.s2f-app .s2f-app-trk i{transform:scaleX(0);transition:transform 2200ms cubic-bezier(.3,.7,.2,1) 300ms}
html.s2-js:not(.s2-statisch) .s2b-app.s2f-app.los .s2f-app-trk i{transform:none}
.s2f-app-lf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;font-size:13.5px;color:var(--g500)}
.s2f-app-lf b{color:var(--g900);font-weight:600}
/* Auswahl wie nl-opt */
.s2f-app-sel{display:grid;gap:10px}
.s2f-app-opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--g200)}
.s2f-app-opt.an{box-shadow:0 0 0 1.5px var(--g900)}
.s2f-app-opt>div{min-width:0;flex:1}
.s2f-app-opt b{display:block;font:600 14.5px/20px var(--app)}
.s2f-app-opt small{display:block;font-size:13px;line-height:18px;color:var(--g500)}
.s2f-app-radio{width:20px;height:20px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--g300)}
.s2f-app-opt.an .s2f-app-radio{box-shadow:inset 0 0 0 6px var(--g900)}
.s2f-app-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.s2f-app-chips i{font-style:normal;font:600 12.5px/1 var(--app);padding:7px 11px;border-radius:99px;background:var(--g50);color:var(--g700);box-shadow:0 0 0 1px var(--g200)}
/* Schalter */
.s2f-app-schalterliste{padding:4px 18px}
.s2f-app-sz{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;border-top:1px solid var(--g100)}
.s2f-app-sz:first-child{border-top:0}
.s2f-app-sz b{display:block;font:600 14.5px/20px var(--app)}
.s2f-app-sz small{display:block;font-size:13px;line-height:18px;color:var(--g500);margin-top:2px}
.s2f-app-schalter{position:relative;width:46px;height:28px;flex:none;border-radius:99px;background:var(--g200);transition:background-color 400ms var(--s2b-kurve)}
.s2f-app-schalter i{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform 450ms var(--s2b-feder)}
.s2f-app-schalter.an{background:#0d0d10}
.s2f-app-schalter.an i{transform:translateX(18px)}
html.s2-js:not(.s2-statisch) .s2b-app.s2f-app:not(.los) .s2f-app-schalter.an{background:var(--g200)}
html.s2-js:not(.s2-statisch) .s2b-app.s2f-app:not(.los) .s2f-app-schalter.an i{transform:none}
html.s2-js:not(.s2-statisch) .s2b-app.s2f-app .s2f-app-sz:nth-child(2) .s2f-app-schalter,html.s2-js:not(.s2-statisch) .s2b-app.s2f-app .s2f-app-sz:nth-child(2) .s2f-app-schalter i{transition-delay:350ms}
html.s2-js:not(.s2-statisch) .s2b-app.s2f-app .s2f-app-sz:nth-child(3) .s2f-app-schalter,html.s2-js:not(.s2-statisch) .s2b-app.s2f-app .s2f-app-sz:nth-child(3) .s2f-app-schalter i{transition-delay:700ms}
html.s2-js:not(.s2-statisch) .s2b-app.s2f-app .s2f-app-sz:nth-child(4) .s2f-app-schalter,html.s2-js:not(.s2-statisch) .s2b-app.s2f-app .s2f-app-sz:nth-child(4) .s2f-app-schalter i{transition-delay:1050ms}
/* Hinweis wie nl-stz */
.s2f-app-hinweis{display:flex;align-items:flex-start;gap:10px;padding:12px 16px 12px 12px;border-radius:16px;font-size:13.5px;line-height:19px;color:var(--g700);background:var(--g25);box-shadow:inset 0 0 0 1px var(--g200)}
.s2f-app-hinweis b{color:var(--g900);font-weight:600}
.s2f-app-hi{width:18px;height:18px;flex:none;color:var(--g900);margin-top:1px}
/* WhatsApp-Vorschau in der App */
.s2f-app-vorschau{border-radius:22px;padding:14px 10px;background-color:#efe7de;box-shadow:0 0 0 1px var(--g200)}
.s2f-wa-vor{gap:4px}
.s2f-wa-vor .s2b-wa-b{max-width:92%;font-size:13.5px}
/* Teile kommen nacheinander */
html.s2-js:not(.s2-statisch) .s2b-app.s2f-app :is(.s2f-app-zeile,.s2f-app-kc,.s2f-app-opt){opacity:0;transform:translate3d(0,14px,0);transition:opacity 600ms var(--s2b-kurve),transform 800ms var(--s2b-kurve);transition-delay:calc(var(--k,0) * 140ms + 200ms)}
html.s2-js:not(.s2-statisch) .s2b-app.s2f-app.los :is(.s2f-app-zeile,.s2f-app-kc,.s2f-app-opt){opacity:1;transform:none}
/* kleines App-Teil in einem Schritt */
.s2b-app.s2f-app-mini{display:grid;gap:10px;height:auto;width:min(100%,420px);padding:10px;border-radius:22px;background:#f8f8fa;box-shadow:none;grid-template-columns:minmax(0,1fr)}
.s2f-app-mini .s2f-app-zeile{grid-template-columns:44px minmax(0,1fr);padding:10px 8px}
.s2f-app-mini .s2f-app-erg{display:none}
.s2f-app-mini .s2f-app-sym{width:44px;height:44px;border-radius:14px}
/* ---------- Eingabe im AI Chat (Schritt-Teil "feld") ---------- */
.s2f-feld{display:flex;align-items:center;gap:10px;width:min(100%,420px);padding:12px 12px 12px 16px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px #e4e4e2,0 14px 30px -20px rgba(20,20,20,.3);font-size:15px;line-height:21px;color:#141414}
.s2f-feld-ai{width:18px;height:18px;flex:none;color:#141414}
.s2f-feld-ai svg{width:18px;height:18px}
.s2f-feld-text{flex:1;min-width:0}
.s2f-feld-send{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;background:#141414}
.s2f-feld-send svg{width:17px;height:17px}
/* ===================================================================== Sperrbildschirm (iOS 26) mit WhatsApp-Mitteilungen =====================================================================
19.10.2026 (Gründer: "wie ein echter Screenshot eines iPhone 17 Pro mit iOS 26"): eigenes Hintergrundbild (tiefes Blau/Violett mit weichen Wellen, eigener
SVG-Verlauf, KEIN Apple-Bild), Schloss, Datum, große Uhr, Mitteilungen als Glas-Kacheln (gleicher Chat = Stapel), Glas-Kreise für Taschenlampe/Kamera.
Maße in iOS-Punkten (--pt aus branche.css). Sicherung: funktion.css.vor-ios-echt-19-10 */
.s2f-wa-sperr-schirm{color:#fff;background-color:#14205c;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 402 874' preserveAspectRatio='xMidYMid slice'%3E %3Cdefs%3E %3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230c1238'/%3E%3Cstop offset='.36' stop-color='%231a2670'/%3E%3Cstop offset='.7' stop-color='%232c2a86'/%3E%3Cstop offset='1' stop-color='%231a1450'/%3E%3C/linearGradient%3E %3ClinearGradient id='w1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%233d7bff'/%3E%3Cstop offset='.55' stop-color='%236a5cff'/%3E%3Cstop offset='1' stop-color='%23b06cff'/%3E%3C/linearGradient%3E %3ClinearGradient id='w2' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2358b8ff'/%3E%3Cstop offset='1' stop-color='%233b3fd8'/%3E%3C/linearGradient%3E %3ClinearGradient id='w3' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%238e5cff'/%3E%3Cstop offset='1' stop-color='%23ff7bd5'/%3E%3C/linearGradient%3E %3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='22'/%3E%3C/filter%3E %3Cfilter id='b2' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E %3C/defs%3E %3Crect width='402' height='874' fill='url(%23g)'/%3E %3Cg filter='url(%23b)' opacity='.9'%3E %3Cpath d='M-80 470C40 380 150 520 260 440S420 300 500 360V640C380 560 300 700 170 640S-20 560-80 620Z' fill='url(%23w1)'/%3E %3Cpath d='M-60 640C70 560 170 700 290 620S450 520 480 560V900H-60Z' fill='url(%23w2)' opacity='.75'/%3E %3Cellipse cx='330' cy='250' rx='170' ry='130' fill='%235146dc' opacity='.6'/%3E%3Cellipse cx='40' cy='120' rx='140' ry='90' fill='%232a4bc0' opacity='.45'/%3E %3C/g%3E %3Cg filter='url(%23b2)'%3E %3Cpath d='M-40 520C70 450 170 560 270 495S410 405 460 430' fill='none' stroke='url(%23w3)' stroke-width='14' stroke-linecap='round' opacity='.55'/%3E %3Cpath d='M-40 600C80 530 190 650 300 575S420 500 460 520' fill='none' stroke='%239fd0ff' stroke-width='8' stroke-linecap='round' opacity='.35'/%3E %3C/g%3E %3C/svg%3E");background-size:cover;background-position:center}
/* 19.10.2026 (Gründer: "bei jedem Handy anderes Hintergrundbild, immer Standard-Apple-Stil, aber andere Farbe"): 7 weitere eigene Hintergründe
(eigene SVG-Verläufe/Wellen, KEIN Apple-Bild). Klasse hg- am Schirm; "blau" = Grundregel oben. Wahl in funktion.py (_hintergrund). Sicherung: funktion.css.vor-iphone2-19-10 */
.s2f-wa-sperr-schirm.hg-abend{background-color:#7a1d3a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 402 874' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2322081c'/%3E%3Cstop offset='.38' stop-color='%235e1634'/%3E%3Cstop offset='.72' stop-color='%23b8343c'/%3E%3Cstop offset='1' stop-color='%23e9723a'/%3E%3C/linearGradient%3E%3ClinearGradient id='w1' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ff8a3d'/%3E%3Cstop offset='.5' stop-color='%23ff4f5e'/%3E%3Cstop offset='1' stop-color='%23c42a78'/%3E%3C/linearGradient%3E%3ClinearGradient id='w2' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffb25a'/%3E%3Cstop offset='1' stop-color='%23ff5a3c'/%3E%3C/linearGradient%3E%3ClinearGradient id='w3' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ffd08a'/%3E%3Cstop offset='1' stop-color='%23ff7aa8'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='22'/%3E%3C/filter%3E%3Cfilter id='b2' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='402' height='874' fill='url(%23g)'/%3E%3Cg filter='url(%23b)' opacity='.92'%3E%3Cpath d='M-90 760C10 640 120 560 230 470S400 300 520 250V520C420 560 330 640 240 700S40 860-90 900Z' fill='url(%23w1)'/%3E%3Cpath d='M-60 900C40 800 150 760 260 690S430 600 480 610V940H-60Z' fill='url(%23w2)' opacity='.8'/%3E%3Cellipse cx='340' cy='170' rx='160' ry='120' fill='%238c2456' opacity='.55'/%3E%3Cellipse cx='60' cy='330' rx='120' ry='90' fill='%23a8304a' opacity='.35'/%3E%3C/g%3E%3Cg filter='url(%23b2)'%3E%3Cpath d='M-30 700C80 600 170 560 270 470S400 330 450 300' fill='none' stroke='url(%23w3)' stroke-width='13' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M-30 790C90 690 200 650 300 570S420 470 460 450' fill='none' stroke='%23ffe0b0' stroke-width='7' stroke-linecap='round' opacity='.35'/%3E%3C/g%3E%3C/svg%3E")}
.s2f-wa-sperr-schirm.hg-lagune{background-color:#0b5551;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 402 874' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2303211f'/%3E%3Cstop offset='.4' stop-color='%230a4a49'/%3E%3Cstop offset='.75' stop-color='%230f7a70'/%3E%3Cstop offset='1' stop-color='%230b4f5c'/%3E%3C/linearGradient%3E%3ClinearGradient id='w1' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%231fc7a6'/%3E%3Cstop offset='.55' stop-color='%2324a6c8'/%3E%3Cstop offset='1' stop-color='%233a7fe0'/%3E%3C/linearGradient%3E%3ClinearGradient id='w2' x1='1' y1='0' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%237ef0c8'/%3E%3Cstop offset='1' stop-color='%2318b39a'/%3E%3C/linearGradient%3E%3ClinearGradient id='w3' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23b8ffe6'/%3E%3Cstop offset='1' stop-color='%236fd8ff'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='22'/%3E%3C/filter%3E%3Cfilter id='b2' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='402' height='874' fill='url(%23g)'/%3E%3Cg filter='url(%23b)' opacity='.9'%3E%3Cpath d='M-80 560C30 520 120 600 220 570S380 480 500 520V700C390 660 300 740 190 720S-10 640-80 680Z' fill='url(%23w1)'/%3E%3Cpath d='M-80 700C40 650 150 730 260 690S420 620 500 650V940H-80Z' fill='url(%23w2)' opacity='.7'/%3E%3Cellipse cx='80' cy='200' rx='170' ry='120' fill='%230f6a64' opacity='.5'/%3E%3Cellipse cx='360' cy='380' rx='130' ry='90' fill='%231a8f9a' opacity='.4'/%3E%3C/g%3E%3Cg filter='url(%23b2)'%3E%3Cpath d='M-40 590C70 555 160 625 260 595S410 520 460 540' fill='none' stroke='url(%23w3)' stroke-width='12' stroke-linecap='round' opacity='.5'/%3E%3Cpath d='M-40 690C80 650 190 720 300 685S420 630 460 640' fill='none' stroke='%23d6fff2' stroke-width='6' stroke-linecap='round' opacity='.32'/%3E%3C/g%3E%3C/svg%3E")}
.s2f-wa-sperr-schirm.hg-rose{background-color:#a2557a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 402 874' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233e1a33'/%3E%3Cstop offset='.35' stop-color='%237c3b62'/%3E%3Cstop offset='.72' stop-color='%23c9799a'/%3E%3Cstop offset='1' stop-color='%23efb9b6'/%3E%3C/linearGradient%3E%3CradialGradient id='o' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23ffd3c4'/%3E%3Cstop offset='.55' stop-color='%23ff9ec2'/%3E%3Cstop offset='1' stop-color='%23ff9ec2' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='w1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e88ab8'/%3E%3Cstop offset='1' stop-color='%23ffc0a6'/%3E%3C/linearGradient%3E%3ClinearGradient id='w3' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ffe2ec'/%3E%3Cstop offset='1' stop-color='%23ffb7a0'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='22'/%3E%3C/filter%3E%3Cfilter id='b2' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='402' height='874' fill='url(%23g)'/%3E%3Cg filter='url(%23b)' opacity='.9'%3E%3Ccircle cx='320' cy='640' r='240' fill='url(%23o)'/%3E%3Cpath d='M-80 520C40 470 140 560 240 610S420 700 500 690V940H-80Z' fill='url(%23w1)' opacity='.7'/%3E%3Cellipse cx='60' cy='180' rx='150' ry='110' fill='%239a3f70' opacity='.45'/%3E%3C/g%3E%3Cg filter='url(%23b2)'%3E%3Cpath d='M60 900C70 720 180 560 400 500' fill='none' stroke='url(%23w3)' stroke-width='12' stroke-linecap='round' opacity='.5'/%3E%3Cpath d='M140 920C150 770 240 640 440 590' fill='none' stroke='%23fff0f4' stroke-width='6' stroke-linecap='round' opacity='.35'/%3E%3C/g%3E%3C/svg%3E")}
.s2f-wa-sperr-schirm.hg-silber{background-color:#4a5059;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 402 874' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231b1e23'/%3E%3Cstop offset='.4' stop-color='%233e444c'/%3E%3Cstop offset='.75' stop-color='%2378808a'/%3E%3Cstop offset='1' stop-color='%23a9b0b8'/%3E%3C/linearGradient%3E%3ClinearGradient id='w1' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e6eaef'/%3E%3Cstop offset='.6' stop-color='%23a9b2bd'/%3E%3Cstop offset='1' stop-color='%236c7480'/%3E%3C/linearGradient%3E%3ClinearGradient id='w2' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c9d0d8'/%3E%3Cstop offset='1' stop-color='%235d6570'/%3E%3C/linearGradient%3E%3ClinearGradient id='w3' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23cfd8e2'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='22'/%3E%3C/filter%3E%3Cfilter id='b2' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='402' height='874' fill='url(%23g)'/%3E%3Cg filter='url(%23b)' opacity='.85'%3E%3Cpath d='M500 380C390 420 330 520 230 560S30 600-80 700V800C40 720 150 700 250 660S420 540 500 520Z' fill='url(%23w1)'/%3E%3Cpath d='M500 600C400 640 330 720 220 760S30 820-80 860V940H500Z' fill='url(%23w2)' opacity='.75'/%3E%3Cellipse cx='320' cy='160' rx='150' ry='110' fill='%234c535d' opacity='.5'/%3E%3C/g%3E%3Cg filter='url(%23b2)'%3E%3Cpath d='M450 430C360 470 300 560 210 600S50 650-30 720' fill='none' stroke='url(%23w3)' stroke-width='12' stroke-linecap='round' opacity='.5'/%3E%3Cpath d='M460 540C370 580 310 660 220 700S60 760-30 810' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' opacity='.3'/%3E%3C/g%3E%3C/svg%3E")}
.s2f-wa-sperr-schirm.hg-nacht{background-color:#061638;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 402 874' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2301040c'/%3E%3Cstop offset='.45' stop-color='%23061535'/%3E%3Cstop offset='.78' stop-color='%230a2858'/%3E%3Cstop offset='1' stop-color='%2303102a'/%3E%3C/linearGradient%3E%3ClinearGradient id='w1' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%231b6dff'/%3E%3Cstop offset='.5' stop-color='%232fd0ff'/%3E%3Cstop offset='1' stop-color='%233a5cff'/%3E%3C/linearGradient%3E%3ClinearGradient id='w2' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%230c2e7a'/%3E%3Cstop offset='1' stop-color='%231a4fb8'/%3E%3C/linearGradient%3E%3ClinearGradient id='w3' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%237ae8ff'/%3E%3Cstop offset='1' stop-color='%239f8cff'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='22'/%3E%3C/filter%3E%3Cfilter id='b2' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='402' height='874' fill='url(%23g)'/%3E%3Cg filter='url(%23b)' opacity='.85'%3E%3Cpath d='M-80 640C40 600 140 660 240 630S400 560 500 590V700C390 690 300 730 200 720S-10 690-80 700Z' fill='url(%23w1)'/%3E%3Cpath d='M-80 720C60 700 180 760 300 740S440 700 500 710V940H-80Z' fill='url(%23w2)' opacity='.8'/%3E%3Cellipse cx='300' cy='260' rx='170' ry='120' fill='%230d2b6e' opacity='.5'/%3E%3C/g%3E%3Cg filter='url(%23b2)'%3E%3Cpath d='M-40 650C70 615 170 675 270 645S410 580 460 595' fill='none' stroke='url(%23w3)' stroke-width='10' stroke-linecap='round' opacity='.55'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='62' cy='120' r='.9' opacity='.5'/%3E%3Ccircle cx='140' cy='70' r='.7' opacity='.4'/%3E%3Ccircle cx='330' cy='98' r='1' opacity='.5'/%3E%3Ccircle cx='250' cy='160' r='.6' opacity='.35'/%3E%3Ccircle cx='370' cy='210' r='.8' opacity='.4'/%3E%3Ccircle cx='30' cy='260' r='.7' opacity='.3'/%3E%3C/g%3E%3C/svg%3E")}
.s2f-wa-sperr-schirm.hg-beere{background-color:#4a1272;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 402 874' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2316062a'/%3E%3Cstop offset='.4' stop-color='%233c1064'/%3E%3Cstop offset='.75' stop-color='%236e2390'/%3E%3Cstop offset='1' stop-color='%23a83a8c'/%3E%3C/linearGradient%3E%3ClinearGradient id='w1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff5fc8'/%3E%3Cstop offset='.55' stop-color='%23b04dff'/%3E%3Cstop offset='1' stop-color='%236a5cff'/%3E%3C/linearGradient%3E%3ClinearGradient id='w2' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff8ad8'/%3E%3Cstop offset='1' stop-color='%237b3cff'/%3E%3C/linearGradient%3E%3ClinearGradient id='w3' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ffb3ea'/%3E%3Cstop offset='1' stop-color='%23a99cff'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='22'/%3E%3C/filter%3E%3Cfilter id='b2' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='402' height='874' fill='url(%23g)'/%3E%3Cg filter='url(%23b)' opacity='.88'%3E%3Cpath d='M-80 380C30 300 160 420 260 360S420 240 500 280V500C390 450 300 560 190 520S-10 440-80 500Z' fill='url(%23w1)' opacity='.85'/%3E%3Cpath d='M-80 600C50 540 160 640 280 590S440 520 500 540V940H-80Z' fill='url(%23w2)' opacity='.6'/%3E%3Cellipse cx='60' cy='120' rx='150' ry='100' fill='%235a1690' opacity='.45'/%3E%3C/g%3E%3Cg filter='url(%23b2)'%3E%3Cpath d='M-40 430C70 370 180 470 280 420S410 320 460 340' fill='none' stroke='url(%23w3)' stroke-width='12' stroke-linecap='round' opacity='.5'/%3E%3Cpath d='M-40 640C90 590 200 680 310 635S430 570 460 580' fill='none' stroke='%23ffd6f4' stroke-width='6' stroke-linecap='round' opacity='.3'/%3E%3C/g%3E%3C/svg%3E")}
.s2f-wa-sperr-schirm.hg-himmel{background-color:#2a72c4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 402 874' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230b2f63'/%3E%3Cstop offset='.35' stop-color='%231f5fae'/%3E%3Cstop offset='.7' stop-color='%235aa2e4'/%3E%3Cstop offset='1' stop-color='%23a9d6f5'/%3E%3C/linearGradient%3E%3ClinearGradient id='w1' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%238fd3ff'/%3E%3Cstop offset='1' stop-color='%234c8cf0'/%3E%3C/linearGradient%3E%3ClinearGradient id='w2' x1='1' y1='0' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23d9f1ff'/%3E%3Cstop offset='1' stop-color='%237fbff2'/%3E%3C/linearGradient%3E%3ClinearGradient id='w3' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23bfe6ff'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='22'/%3E%3C/filter%3E%3Cfilter id='b2' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='402' height='874' fill='url(%23g)'/%3E%3Cg filter='url(%23b)' opacity='.88'%3E%3Cpath d='M-80 660C20 590 120 600 200 640S360 700 500 610V940H-80Z' fill='url(%23w1)' opacity='.85'/%3E%3Cpath d='M-80 760C60 700 160 740 260 770S420 760 500 720V940H-80Z' fill='url(%23w2)' opacity='.75'/%3E%3Cellipse cx='330' cy='300' rx='160' ry='120' fill='%233f86d8' opacity='.45'/%3E%3Cellipse cx='50' cy='160' rx='140' ry='90' fill='%23164a90' opacity='.4'/%3E%3C/g%3E%3Cg filter='url(%23b2)'%3E%3Cpath d='M-40 690C60 625 150 640 220 670S370 710 460 640' fill='none' stroke='url(%23w3)' stroke-width='10' stroke-linecap='round' opacity='.45'/%3E%3C/g%3E%3C/svg%3E")}
.s2f-wa-sperre .s2f-wa-st{background:transparent;color:#fff}
.s2f-wa-schloss{display:flex;justify-content:center;flex:none;margin-top:calc(var(--pt) * 2)}
.s2f-wa-schloss svg{width:calc(var(--pt) * 13);height:calc(var(--pt) * 17.5);opacity:.92}
.s2f-wa-zeit{display:flex;flex-direction:column;align-items:center;flex:none;margin-top:calc(var(--pt) * 10)}
.s2f-wa-zeit small{font:600 calc(var(--pt) * 21)/1.15 var(--s2b-ios);letter-spacing:-.005em;color:rgba(255,255,255,.86)}
.s2f-wa-zeit b{margin-top:calc(var(--pt) * -2);font-family:"SF Pro Rounded","SF Compact Rounded",ui-rounded,var(--s2b-ios);font-weight:600;font-size:calc(var(--pt) * 124);line-height:1;
letter-spacing:-.025em;color:rgba(255,255,255,.9);text-shadow:0 1px 0 rgba(255,255,255,.12),0 calc(var(--pt) * 2) calc(var(--pt) * 14) rgba(10,14,60,.25)}
.s2f-wa-meldungen{display:flex;flex-direction:column;gap:calc(var(--pt) * 9);margin-top:auto;padding:0 calc(var(--pt) * 10) calc(var(--pt) * 24)}
.s2f-wa-gruppe{position:relative;isolation:isolate}
/* 19.10.2026: Stapel-Klassen hießen s1/s2; "s2" ist die Seitenklasse (.s2 = weißer Hintergrund + overflow:clip) und machte die Kachel unten eckig -> stapel1/stapel2 */
.s2f-wa-gruppe.gestapelt.stapel1{margin-bottom:calc(var(--pt) * 8)}
.s2f-wa-gruppe.gestapelt.stapel2{margin-bottom:calc(var(--pt) * 16)}
.s2f-wa-meldung{position:relative;z-index:3;display:flex;gap:calc(var(--pt) * 10);align-items:flex-start;padding:calc(var(--pt) * 13) calc(var(--pt) * 15) calc(var(--pt) * 14) calc(var(--pt) * 13);
border-radius:calc(var(--pt) * 24);color:#000;background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(28px) saturate(1.45);backdrop-filter:blur(28px) saturate(1.45);
box-shadow:inset 0 0 0 .6px rgba(255,255,255,.55),inset 0 1px 0 rgba(255,255,255,.65),0 calc(var(--pt) * 2) calc(var(--pt) * 10) rgba(8,10,40,.12)}
.s2f-wa-meldung.s2f-wa-dahinter{position:absolute;z-index:2;inset:calc(var(--pt) * 8) calc(var(--pt) * 12) calc(var(--pt) * -8);background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 .6px rgba(255,255,255,.45)}
.s2f-wa-meldung.s2f-wa-dahinter.d2{z-index:1;inset:calc(var(--pt) * 16) calc(var(--pt) * 24) calc(var(--pt) * -16);background:rgba(255,255,255,.34)}
.s2f-wa-meldung.s2f-wa-dahinter>*{visibility:hidden}
.s2f-wa-app{width:calc(var(--pt) * 38)}
.s2f-wa-m-text{flex:1;min-width:0;padding-top:calc(var(--pt) * 1)}
.s2f-wa-m-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:calc(var(--pt) * 8)}
.s2f-wa-m-kopf b{font:600 calc(var(--pt) * 15)/1.27 var(--s2b-ios);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2f-wa-m-kopf small{font:400 calc(var(--pt) * 13.5)/1.27 var(--s2b-ios);color:rgba(60,60,67,.6);flex:none}
.s2f-wa-m-zeile{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin-top:calc(var(--pt) * 1);font:400 calc(var(--pt) * 15)/1.3 var(--s2b-ios);letter-spacing:-.012em;color:#000}
.s2f-wa-unten{display:flex;justify-content:space-between;flex:none;padding:0 calc(var(--pt) * 47) calc(var(--pt) * 50)}
.s2f-wa-unten span{width:calc(var(--pt) * 50);height:calc(var(--pt) * 50);border-radius:50%;display:grid;place-items:center;background:rgba(8,10,28,.30);
-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 0 0 .7px rgba(255,255,255,.30),inset 0 1px 0 rgba(255,255,255,.35)}
.s2f-wa-unten span:first-child svg{width:calc(var(--pt) * 15);height:calc(var(--pt) * 21)}
.s2f-wa-unten span:last-child svg{width:calc(var(--pt) * 22);height:calc(var(--pt) * 17.5)}
.s2f-wa-home-hell{background:#fff}
html.s2-js:not(.s2-statisch) .s2f-wa-sperre .s2f-wa-gruppe{opacity:0;transform:translate3d(0,calc(var(--pt) * 26),0) scale(.96);transition:opacity 500ms var(--s2b-kurve),transform 800ms var(--s2b-feder);transition-delay:calc(var(--k,0) * 1100ms + 500ms)}
html.s2-js:not(.s2-statisch) .s2f-wa-sperre.los .s2f-wa-gruppe{opacity:1;transform:none}
/* ===================================================================== Ablauf (läuft von selbst weiter) ===================================================================== */
.s2f-ab{position:relative;list-style:none;margin:0 auto;padding:0;max-width:1160px;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:16px}
.s2f-ab.n3{--n:3}.s2f-ab.n4{--n:4}.s2f-ab.n5{--n:5}
.s2f-ab-bahn{position:absolute;left:calc(100% / var(--n) / 2);right:calc(100% / var(--n) / 2);top:47px;height:2px;background:#e4e4e2;border-radius:2px;pointer-events:none}
.s2f-ab-bahn i{position:absolute;inset:0;background:#141414;border-radius:2px;transform-origin:0 50%;transform:scaleX(var(--ab-p,1));transition:transform 900ms var(--s2b-kurve)}
.s2f-ab-schritt{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 20px 28px;border-radius:24px;transition:background-color 500ms var(--s2b-kurve),box-shadow 500ms var(--s2b-kurve);cursor:pointer}
.s2f-ab-nr{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#141414;box-shadow:0 0 0 1px #e4e4e2;transition:background-color 500ms var(--s2b-kurve),color 500ms,transform 600ms var(--s2b-feder)}
.s2f-ab-nr .s2-ic{width:20px;height:20px}
.s2f-ab-schritt .s2-h3{margin:22px 0 0;font-size:clamp(22px,1vw + 13px,26px);line-height:1.15}
.s2f-ab-schritt p{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--s2-grau);max-width:30ch}
.s2f-ab-chip{margin-top:16px;padding:7px 13px;border-radius:99px;background:#f1f1f0;font-size:13px;font-weight:600;color:#141414}
.s2f-ab-schritt.an{background:#fff;box-shadow:0 0 0 1px #e4e4e2,0 24px 48px -30px rgba(20,20,20,.35)}
.s2f-ab-schritt.an .s2f-ab-nr{background:#141414;color:#fff;transform:scale(1.06);box-shadow:none}
html.s2-js:not(.s2-statisch) .s2f-ab.lauft .s2f-ab-schritt:not(.an) :is(.s2-h3,p,.s2f-ab-chip){opacity:.55;transition:opacity 500ms}
/* ===================================================================== Vorher / Nachher ===================================================================== */
.s2f-vn{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px;align-items:stretch;max-width:1040px;margin-inline:auto}
.s2f-vn-karte{padding:clamp(24px,3vw,40px);border-radius:var(--s2-r-kachel)}
.s2f-vn-karte.vor{background:#f1f1f0}
.s2f-vn-karte.nach{background:#fff;box-shadow:var(--s2-schatten-schwebe)}
.s2f-vn-karte ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.s2f-vn-karte li{display:flex;gap:12px;font-size:15.5px;line-height:1.5;color:var(--s2-grau)}
.s2f-vn-karte.nach li{color:var(--s2-schwarz)}
.s2f-vn-karte .s2-ic{width:18px;height:18px;flex:none;margin-top:3px}
.s2f-vn-pfeil{align-self:center;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#141414;color:#fff}
/* ===================================================================== Tarife (Vergleichstabelle) ===================================================================== */
.s2f-tarif{max-width:1000px;margin-inline:auto;border-radius:var(--s2-r-kachel);background:#fff;box-shadow:var(--s2-schatten-ruhig);overflow-x:auto}
.s2f-tarif table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:560px}
.s2f-tarif th,.s2f-tarif td{padding:18px 20px;text-align:center;border-top:1px solid #f1f1f0;white-space:nowrap}
.s2f-tarif thead th{border-top:0;font:400 24px/1.1 var(--s2-serif);color:var(--s2-schwarz);padding-top:26px}
.s2f-tarif tbody th{text-align:left;font-weight:500;color:var(--s2-schwarz);white-space:normal}
.s2f-tarif td{color:var(--s2-grau);font-variant-numeric:tabular-nums}
.s2f-tarif tr.hervor{background:#f1f1f0}
.s2f-tarif tr.hervor td{color:var(--s2-schwarz);font-weight:600}
.s2f-ja .s2-ic{display:inline-block;width:20px;height:20px;color:#141414;vertical-align:middle} /* FB2 19.10. Punkt 9: Haken mittig unter den Zahlen (global war .s2-ic display:block -> linksbündig) */
.s2f-nein{display:inline-block;width:12px;height:2px;border-radius:2px;background:#e4e4e2;vertical-align:middle}
.s2f-tarif-fuss{max-width:1000px;margin:18px auto 0;text-align:center;font-size:15px;color:var(--s2-grau)}
/* ===================================================================== Code-Fenster (API, MCP) ===================================================================== */
div.s2f-code{max-width:860px;margin-inline:auto;border-radius:22px;background:#141414;color:#f1f1f0;overflow:hidden;box-shadow:0 50px 100px -50px rgba(20,20,20,.6)}
.s2f-code-leiste{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);overflow-x:auto}
.s2f-code-leiste>i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18);flex:none}
.s2f-code-leiste>i:nth-of-type(3){margin-right:12px}
.s2f-code-reiter{padding:6px 12px;border-radius:10px;font:600 13px/1 var(--s2-sans);color:rgba(255,255,255,.55);cursor:pointer;white-space:nowrap}
.s2f-code-reiter.an{background:rgba(255,255,255,.1);color:#fff}
.s2f-code-p{display:none;margin:0;padding:22px 24px 26px;overflow-x:auto;font:400 13.5px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre}
.s2f-code-p.an{display:block}
.s2f-code-mini{margin:0;width:min(100%,420px);padding:16px 18px;border-radius:18px;background:#141414;color:#f1f1f0;overflow-x:auto;font:400 12.5px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace}
/* ===================================================================== Diagramm ===================================================================== */
.s2f-dg{max-width:860px;margin-inline:auto;padding:clamp(22px,3vw,40px);border-radius:var(--s2-r-kachel);background:#fff;box-shadow:var(--s2-schatten-ruhig)}
.s2f-dg-titel{display:block;font:600 15px/1.3 var(--s2-sans);color:var(--s2-schwarz)}
.s2f-dg ol{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(8px,2vw,22px);align-items:end;height:260px}
.s2f-dg li{display:flex;flex-direction:column;align-items:stretch;height:100%;gap:10px;min-width:0}
/* Abschluss 18.10.: Balkenbereich + Beschriftung mit fester Höhe, damit lange Beschriftungen umbrechen statt sich zu überlagern und alle Balken auf einer Linie stehen */
.s2f-dg-bb{flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px}
.s2f-dg li i{display:block;width:100%;max-width:64px;height:calc(var(--h) * (100% - 30px));border-radius:12px 12px 4px 4px;background:#141414;transform-origin:50% 100%}
.s2f-dg.kurz li small{-webkit-line-clamp:1;height:1.3em} /* nur kurze Beschriftungen (bis 9 Zeichen): eine Zeile */
.s2f-dg-wert{font:400 20px/1 var(--s2-serif);color:var(--s2-schwarz)}
.s2f-dg li small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;height:2.6em;font-size:13px;line-height:1.3;text-align:center;color:var(--s2-grau);overflow-wrap:break-word;hyphens:auto}
html.s2-js:not(.s2-statisch) .s2f-dg li i{transform:scaleY(0);transition:transform 1100ms var(--s2b-kurve);transition-delay:calc(var(--k,0) * 110ms + 200ms)}
html.s2-js:not(.s2-statisch) .s2f-dg.los li i{transform:none}
/* ===================================================================== Satz, Fakten ===================================================================== */
.s2f-satz{text-align:center;max-width:900px;margin-inline:auto}
.s2f-satz .s2-h2{max-width:26ch;margin-inline:auto}
.s2f-satz .s2-text{margin:18px auto 0;max-width:52ch}
ul.s2f-fakten{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:16px}
ul.s2f-fakten.n2{--n:2}ul.s2f-fakten.n3{--n:3}ul.s2f-fakten.n4{--n:4}
ul.s2f-fakten li{padding:clamp(24px,3vw,36px);border-radius:var(--s2-r-kachel);background:#f8f8fa;display:flex;flex-direction:column;gap:10px}
ul.s2f-fakten b{font:400 clamp(40px,3vw + 16px,60px)/1 var(--s2-serif);letter-spacing:-.02em;color:var(--s2-schwarz)}
ul.s2f-fakten span{font-size:15.5px;line-height:1.5;color:var(--s2-grau)}
/* ===================================================================== Tablet und Handy ===================================================================== */
@media (max-width:1100px){
.s2b-app.s2f-app{grid-template-columns:minmax(0,1fr)}
.s2b-app.s2f-app>.s2b-app-seite{display:none}
}
@media (max-width:900px){
.s2f-zeile{grid-template-columns:minmax(0,1fr)}
.s2f-zeile.umgekehrt>.s2f-zeile-text{order:0}
.s2f .s2b-al-raster.s2f-umgekehrt>.s2b-al-liste{order:0}
.s2f-zeile .s2-kopf{text-align:center}
.s2f-zeile .s2-kopf .s2-h2{margin-inline:auto}
.s2f-liste{max-width:520px;margin-inline:auto}
.s2f-app-spalten.n2{grid-template-columns:minmax(0,1fr)}
.s2f-ab{grid-template-columns:minmax(0,1fr);max-width:520px;gap:8px}
.s2f-ab-bahn{display:none}
.s2f-ab-schritt{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:16px;text-align:left;align-items:start;padding:18px}
.s2f-ab-nr{grid-row:1/4}
.s2f-ab-schritt .s2-h3{margin-top:8px}
.s2f-ab-schritt p{max-width:none}
.s2f-ab-chip{justify-self:start}
.s2f-vn{grid-template-columns:minmax(0,1fr)}
.s2f-vn-pfeil{justify-self:center;transform:rotate(90deg)}
ul.s2f-fakten{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
.s2f-app-haupt{padding:18px 14px 20px}
.s2f-app-kopf{flex-direction:column;align-items:flex-start;gap:12px}
.s2f-app-titel{font-size:28px;line-height:32px}
.s2f-app-kp,.s2f-app-kp.n3{grid-template-columns:repeat(2,minmax(0,1fr))}
.s2f-app-kc .n{font-size:28px;line-height:32px}
.s2f-app-zeile{grid-template-columns:44px minmax(0,1fr);gap:12px;padding:12px 8px}
.s2f-app-sym{width:44px;height:44px;border-radius:14px}
.s2f-app-erg{display:none}
.s2f-app-pc{font-size:40px;line-height:38px}
.s2f-app-live{padding:18px 16px 16px}
.s2f-app-lf{flex-direction:column;align-items:flex-start}
.s2f-app-opt{flex-wrap:wrap}
.s2f-app-chips{justify-content:flex-start;width:100%;padding-left:32px}
.s2f-iphone-flaeche{min-height:0;padding:32px 0}
.s2f-iphone-flaeche .s2b-wa-iphone{--w:min(300px,calc(100vw - 72px))}
.s2f-dg ol{height:230px}
.s2f-dg li small{font-size:11px;letter-spacing:-.01em;-webkit-line-clamp:4;height:5.2em}
.s2f-dg.kurz ol{height:200px}
/* Abschluss 18.10.: Tabellen am Handy enger; Tabellen mit 3 Spalten (z. B. Admin/Mitarbeiter) passen ohne seitliches Scrollen */
.s2f-tarif th,.s2f-tarif td{padding:14px 12px}
.s2f-tarif thead th{font-size:20px;padding-top:20px}
.s2f-tarif.sp3 table,.s2f-tarif.sp2 table{min-width:0;font-size:14.5px}
.s2f-tarif.sp3 th,.s2f-tarif.sp3 td,.s2f-tarif.sp2 th,.s2f-tarif.sp2 td{white-space:normal;overflow-wrap:break-word} /* Abschluss 18.10.: 5 Balken bei 390 px, Beschriftungen wie WhatsApp/Facebook stießen aneinander */
}
/* Postfach: Funktionsseiten zeigen das ganze Gespräch (keine abgeschnittenen Nachrichten), die Höhe folgt dem Inhalt */
.s2f-postfach .s2b-app{height:auto;min-height:clamp(560px,46vw,660px)}
.s2f-postfach .s2b-app-thread{overflow:visible}
@media (prefers-reduced-motion:reduce){
.s2f-app-trk i,.s2f-wa-meldung,.s2f-wa-gruppe,.s2f-dg li i,.s2f-app-schalter,.s2f-app-schalter i{transition:none!important}
}
/* ===================================================================== ECHTE App-Aufnahme (19.10.2026) =====================================================================
Gründer: "Wenn du Bilder aus SmartChat nimmst, müssen diese 100000 % perfekt genau aussehen wie SmartChat." Nie nachmalen: Bild der echten App
(prototyp-startseite/app-fotos.mjs, WebP 1600/800). HTML: branche_postfach.app_echt (Funktions- und Branchenseiten). Rahmen wie das App-Fenster
(index.html #win: Ecken var(--r)*1.2, Linie #e8e8ec, weicher Schatten), Einblenden über data-rv="zoom" (kern2/basis.css). */
.s2f-echt{margin:0 auto;max-width:1160px;width:100%}
.s2f-echt-rahmen{position:relative;overflow:hidden;border-radius:clamp(12px,1.9vw,24px);background:#ffffff;
box-shadow:0 0 0 1px #e8e8ec,0 24px 60px -20px rgba(20,20,30,.16),0 2px 6px rgba(20,20,30,.04)}
.s2f-echt-rahmen img{display:block;width:100%;height:auto}
.s2f-echt.klein{max-width:520px}
.s2f-echt.klein .s2f-echt-rahmen{border-radius:12px;box-shadow:0 0 0 1px #e8e8ec,0 12px 30px -14px rgba(20,20,30,.16)}
.s2f-echt-flaeche .s2f-echt-rahmen{box-shadow:0 0 0 1px #e8e8ec,0 30px 70px -28px rgba(20,20,30,.22)}
.s2b-ai-buehne>.s2f-echt-postfach{max-width:1100px}
.s2b-st-teil .s2f-echt{max-width:none}
@media (max-width:760px){
.s2f-echt-rahmen{border-radius:12px;box-shadow:0 0 0 1px #e8e8ec,0 14px 34px -16px rgba(20,20,30,.18)}
.s2f-echt-flaeche{padding:12px}
}
.s2f-echt picture{display:block}
@media (max-width:760px){
.s2f-echt.mit-handy{max-width:420px}
.s2f-echt.mit-handy .s2f-echt-rahmen{border-radius:20px}
}
/* 19.10.2026 Schritte "kompakt" (Gründer zu /funktionen/whatsapp-newsletter/: "komplett verbuggt, viel zu lang"): jede Karte so hoch wie ihr Inhalt,
keine Zeile wird auf die Höhe der höchsten gestreckt, kein Mindestmaß für das Bild im Schritt, hohe Handy-Aufnahmen schmaler */
.s2b-st.s2f-st-kompakt{grid-auto-rows:auto}
.s2f-st-kompakt .s2b-st-karte>p{margin-bottom:16px}
.s2f-st-kompakt .s2b-st-teil{flex:0 0 auto;min-height:0}
.s2f-st-kompakt .s2b-st-teil .s2f-echt.hoch{max-width:390px}
/* 19.10.2026 Schlussprüfung: hohe Aufnahmen als eigene Sektion nicht auf volle Breite ziehen (Handy-Ansicht 1:1 statt 3-fach) */
.s2f-echt.hochformat{max-width:620px}
.s2f-echt.hochformat.handyformat{max-width:420px}
/* 19.10.2026 Schlussprüfung: am Handy App-Aufnahmen im Schritt fast kartenbreit (vorher 266 px = 68 % der Handy-Ansicht, Schrift zu klein) */
@media (max-width:760px){
.s2f-st-kompakt .s2b-st-teil .s2f-echt.klein{margin-inline:-12px;width:calc(100% + 24px);max-width:none}
}
/* 19.10.2026 Gründer-Feedback /funktionen/smartchat-ai/ ("das hier mittig im Feld"): Beispiel-Nachrichten außerhalb des iPhones stehen immer
horizontal mittig in ihrer Fläche (Schritt-Teil "wa"/"bestaetigen", WhatsApp-Vorschau in der App, Automations-Karten), Desktop und Handy.
Der Tipp-Kreis beim Bestätigen sitzt dadurch ebenfalls mittig. Sicherung: funktion.css.vor-fb-ai-19-10 */
/* 19.10.2026 Gründer-Feedback 2 /funktionen/landingpage/ Nr 13: Chats MIT Antwort (eine Blase "aus") stehen wie im echten Chat: Nachrichten des
Betriebs links, Antwort des Kontakts rechts; der Chat als Ganzes bleibt mittig im Feld (.s2b-st-teil place-items:center). Nur Chats ohne Antwort
zentrieren ihre Blasen weiter. Sicherung: funktion.css.vor-chat-seiten-19-10 */
.s2f :is(.s2b-st-wa,.s2f-wa-vor,.s2b-au-blasen):not(:has(.s2b-wa-b.aus)) .s2b-wa-b{align-self:center}
.s2f .s2b-st-tap{left:50%}
/* 19.10.2026 Gründer-Feedback /funktionen/landingpage/ Nr 1: Option "text_zeilen" (funktion.py _kopf): jeder Satz eine eigene Zeile, ohne Absatzabstand;
ab 761 px ohne 58ch-Grenze, damit der erste Satz in Zeile 1 passt und der zweite in Zeile 2 beginnt. Sicherung: funktion.css.vor-chat-seiten-19-10 */
/* 19.10.2026 Gründer-Feedback /funktionen/double-opt-in/ Nr 6 ("richtig schlecht umgesetzt, muss anders aussehen"): Baustein "optionen" (funktion.py
s_optionen) für GLEICHWERTIGE Wege. Karten-Raster ohne Nummern und ohne Linie, damit niemand denkt, er müsse alle machen. Je Karte oben eine
kompakte Bildfläche (Teile wie bei "schritte"), darunter Titel und Text. Desktop 3 je Zeile, bei 4/5 Optionen die letzte Zeile mit 2 breiteren
Karten; Tablet 2 Spalten; Handy 1 Spalte. Sicherung: funktion.css.vor-fb-doi-19-10 */
.s2f-opt{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.s2f-opt-karte{grid-column:span 2;display:flex;flex-direction:column;background:#fff;border-radius:var(--s2-r-kachel);box-shadow:var(--s2-schatten-ruhig);overflow:hidden}
.s2f-opt.n2 .s2f-opt-karte,.s2f-opt.n4 .s2f-opt-karte,.s2f-opt.n5 .s2f-opt-karte:nth-child(n+4){grid-column:span 3}
.s2f-opt-teil{position:relative;height:330px;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;padding:24px;background:#f8f8fa;overflow:hidden}
.s2f-opt-text{padding:22px 26px 26px}
.s2f-opt-text h3{margin:0;font:400 clamp(23px,.8vw + 14px,27px)/1.12 var(--s2-serif);letter-spacing:-.01em;color:#141414}
.s2f-opt-text p{margin:8px 0 0;font-size:15.5px;line-height:1.55;color:var(--s2-grau)}
/* Teile in der festen Bildfläche: Webseite/Popup in voller Höhe, QR-Foto füllt die Fläche, echte App-Aufnahme ganz sichtbar (in der Höhe eingepasst) */
.s2f-opt-teil .s2b-st-web{height:100%;width:min(100%,320px)}
.s2f-opt-teil:has(>.s2b-st-qr){padding:0}
.s2f-opt-teil>.s2b-st-qr,.s2f-opt-teil>.s2b-st-qr.s2-kachel{height:100%;min-height:0;border-radius:0}
.s2f-opt-teil .s2f-echt{height:100%;width:100%;max-width:none;margin:0;display:flex;justify-content:center}
.s2f-opt-teil .s2f-echt-rahmen{height:100%;width:auto;border-radius:12px;box-shadow:0 0 0 1px #e8e8ec,0 12px 30px -14px rgba(20,20,30,.16)}
.s2f-opt-teil .s2f-echt-rahmen :is(picture,img){height:100%;width:auto;max-width:100%}
.s2f-opt-teil .s2b-st-wa.s2b-wa-chat{max-height:100%;overflow:hidden}
/* "ausschnitt": Rahmen bleibt ganz, die Aufnahme füllt ihn lesbar groß und zeigt die Stelle --pos (z. B. die Wahl Bestätigungsnachricht senden) */
.s2f-opt-teil.ausschnitt .s2f-echt-rahmen{width:min(100%,430px)}
.s2f-opt-teil.ausschnitt .s2f-echt-rahmen :is(picture,img){width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--pos,50% 0)}
@media (max-width:999px){
.s2f-opt{grid-template-columns:repeat(2,minmax(0,1fr))}
.s2f-opt .s2f-opt-karte,.s2f-opt.n5 .s2f-opt-karte:nth-child(n+4){grid-column:span 1}
.s2f-opt.n3 .s2f-opt-karte:last-child,.s2f-opt.n5 .s2f-opt-karte:last-child{grid-column:span 2}
}
@media (max-width:760px){
.s2f-opt{grid-template-columns:minmax(0,1fr);gap:16px}
.s2f-opt .s2f-opt-karte,.s2f-opt.n3 .s2f-opt-karte:last-child,.s2f-opt.n5 .s2f-opt-karte:last-child{grid-column:auto}
.s2f-opt-teil{height:310px;padding:20px}
.s2f-opt-text{padding:18px 20px 22px}
}
/* 19.10.2026 Gründer-Feedback /funktionen/double-opt-in/ Nr 8: Option "satz_zeilen" (funktion.py start): jeder Satz unter der H1 am Desktop eine
eigene Zeile, ohne 48ch-Grenze; am Handy normal umbrechend. Sicherung: funktion.css.vor-fb-doi-19-10 */
@media (min-width:761px){
}
/* ===== 19.10.2026 Gründer-Feedback /funktionen/tags/ Nr 5 ("wie machen wir das auf mobil?", 90 % der Besucher am Handy). Sicherung: *.vor-knopf-mobil-19-10
Baustein "anlaesse" (Auswahl links, iPhone rechts): unter 768 px statt der Liste eine waagerecht wischbare Reihe Chips direkt über dem iPhone.
Aktiver Chip schwarz, Rest hell, keine Scrollleiste, Reihe läuft bis an den Bildschirmrand (angeschnittener Chip zeigt: hier kann man wischen).
Tippen schaltet das iPhone (funktion.js klickt den Listen-Knopf, branche.js schaltet). Liste und Wisch-Punkte der Liste sind am Handy aus.
Desktop (ab 768 px) unverändert: Chips aus. ===== */
.s2f-al-chips{display:none}
.s2f-text-mobil{display:none}
@media (max-width:767px){
.s2f .s2b-al-raster,.s2f .s2b-al-raster.s2f-umgekehrt{grid-template-columns:minmax(0,1fr);gap:0}
html .s2f .s2b-al-raster>.s2b-al-liste,html.s2-js .s2f .s2b-al-raster>.s2b-al-liste.s2-wisch,.s2f .s2b-al-raster>.s2-wisch-punkte{display:none!important}
.s2f-al-chips{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
scroll-snap-type:x proximity;scroll-padding-inline:var(--s2-rand);padding:2px var(--s2-rand) 16px;margin-inline:calc(-1 * var(--s2-rand));
scrollbar-width:none;touch-action:pan-x pan-y}
.s2f-al-chips::-webkit-scrollbar{display:none}
.s2f-al-chips::after{content:"";flex:0 0 1px}
.s2f-al-chip{flex:0 0 auto;max-width:min(300px,78vw);min-height:44px;padding:11px 18px;border:0;border-radius:999px;scroll-snap-align:start;cursor:pointer;
background:#fff;color:var(--s2-schwarz);box-shadow:0 0 0 1px #e4e4e2;font:600 15px/1.3 var(--s2-sans);text-align:center;white-space:normal;text-wrap:balance;
-webkit-tap-highlight-color:transparent;transition:background-color 300ms var(--s2b-kurve),color 300ms var(--s2b-kurve),box-shadow 300ms var(--s2b-kurve)}
.s2f-al-chip.an{background:#141414;color:#fff;box-shadow:0 0 0 1px #141414}
.s2f-al-chip:focus-visible{outline:2px solid #141414;outline-offset:2px}
.s2f-al-chip :is(em,i){font-style:normal}
.s2f .s2b-al-flaeche{min-height:0;padding:32px 0}
.s2f .s2b-al-flaeche .s2b-wa-iphone{--w:min(330px,calc(100vw - 2 * var(--s2-rand) - 24px))}
/* "untertitel_mobil" (funktion.py _kopf): unter 768 px statt der normalen Unterzeile */
.s2f .s2-kopf>.s2f-text-desktop{display:none}
.s2f .s2-kopf>.s2f-text-mobil{display:block;margin-top:20px}
.s2f .s2-kopf>.s2f-text-mobil+.s2f-text-mobil{margin-top:0}
.s2f .s2-kopf .s2-text{overflow-wrap:break-word;text-wrap:balance}
}
/* ===== 19.10.2026 Gründer-Feedback /funktionen/tags/ Nr 16 (Teil 2, "Designfehler"): Abschnitt mit iPhone bzw. Sperrbildschirm neben dem Text
(Bausteine "iphone" und "sperrbildschirm", .s2f-zeile): Überschrift und Text liefen bei mittlerer Breite / Browser-Zoom rechts aus dem Bild.
Text darf nie abgeschnitten sein: nebeneinander erst ab 1024 px (Textspalte dann mind. ca. 430 px), darunter untereinander (Text oben mittig,
Handy darunter), wie am Handy. Dazu Spalten ohne Mindestbreite und lange Wörter brechen um. Sicherung: funktion.css.vor-knopf-mobil-19-10 ===== */
.s2f-zeile>*{min-width:0}
.s2f-zeile .s2-kopf :is(.s2-h2,.s2-text),.s2f-liste :is(h3,p){overflow-wrap:break-word}
@media (max-width:1023px){
.s2f-zeile{grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,56px);max-width:760px}
.s2f-zeile.umgekehrt>.s2f-zeile-text{order:0}
.s2f-zeile .s2-kopf{text-align:center}
.s2f-zeile .s2-kopf .s2-h2,.s2f-zeile .s2-kopf .s2-text{margin-inline:auto}
.s2f-liste{max-width:520px;margin-inline:auto}
.s2f-zeile>.s2f-iphone-flaeche{min-height:0;padding:40px 0}
}
/* 19.10.2026 Gründer: am Handy unter den Chips der kurze graue Satz des aktiven Eintrags (funktion.py "s2f-al-saetze", funktion.js schaltet mit).
Alle Sätze liegen übereinander (Höhe = längster Satz, nichts springt), nur der aktive ist sichtbar. Desktop: aus. Sicherung: funktion.css.vor-balance-19-10 */
.s2f-al-saetze{display:none}
@media (max-width:767px){
.s2f-al-chips{padding-bottom:12px}
.s2f-al-saetze{display:grid;margin:0 auto 18px;max-width:40ch;text-align:center}
.s2f-al-satz{grid-area:1/1;margin:0;font-size:15.5px;line-height:1.5;color:var(--s2-grau);opacity:0;visibility:hidden;
transition:opacity 350ms var(--s2b-kurve),visibility 0s 350ms}
.s2f-al-satz.an{opacity:1;visibility:visible;transition:opacity 350ms var(--s2b-kurve) 80ms,visibility 0s}
}
/* ===== 19.10.2026 Gründer-Bug /funktionen/click-to-whatsapp-button/ (Browser stark gezoomt: "riesiges iPhone", Chat leer): jedes iPhone auf Branchen-
und Funktionsseiten passt jetzt ganz ins Fenster (Höhe des iPhones = 2,09 × Breite, darüber Platz für die Leiste). Greift nur, wenn das Fenster niedrig
ist (Zoom, kleines Fenster); bei normaler Größe gelten die bisherigen Breiten unverändert. Mindestens 240 px breit. Gleiche Selektoren/Breakpoints wie
die bisherigen Regeln (branche.css Ende, funktion.css oben), nur mit Höhen-Grenze. Sicherung: funktion.css.vor-zoom-iphone-19-10 ===== */
body.s2b-seite{--s2-iph-max:max(100px,calc((100vh - 135px) / 2.09))} /* 19.10. zweiter Durchgang: iPhone IMMER ganz im Fenster (unter der Leiste), auch bei starkem Zoom */
body.s2b-seite .s2b-al-flaeche .s2b-wa-iphone{--w:min(clamp(300px,23.4vw,336px),var(--s2-iph-max))}
body.s2b-seite .s2f-iphone-flaeche .s2b-wa-iphone{--w:min(clamp(286px,22vw,314px),var(--s2-iph-max))}
@media (max-width:1100px){
body.s2b-seite .s2b-al-flaeche .s2b-wa-iphone{--w:min(310px,var(--s2-iph-max))}
}
@media (max-width:760px){
body.s2b-seite .s2b-al-flaeche .s2b-wa-iphone{--w:min(320px,calc(100vw - 64px),var(--s2-iph-max))}
body.s2b-seite .s2f-iphone-flaeche .s2b-wa-iphone{--w:min(300px,calc(100vw - 72px),var(--s2-iph-max))}
}
@media (max-width:767px){
body.s2b-seite .s2f .s2b-al-flaeche .s2b-wa-iphone{--w:min(330px,calc(100vw - 2 * var(--s2-rand) - 24px),var(--s2-iph-max))}
}
/* 19.10.2026 zweiter Durchgang (Gründer: "das habe ich öfter gesehen"): ist das iPhone wegen niedrigem Fenster kleiner, wird auch die graue Fläche
darum nicht höher als nötig (sonst riesige leere Fläche). Nur ab 768 px, am Handy gelten die Handy-Regeln. */
@media (min-width:768px){
body.s2b-seite .s2f-iphone-flaeche{min-height:min(clamp(680px,54vw,760px),calc(var(--s2-iph-max) * 2.09 + 80px))}
body.s2b-seite .s2b-al-flaeche{min-height:min(clamp(700px,56vw,780px),calc(var(--s2-iph-max) * 2.09 + 80px))}
}
/* Name im iPhone-Kopf zweizeilig, wenn er auch verkleinert nicht passt (funktion.js) */
.s2b-wa-wer b.s2-name-zwei{white-space:normal;text-overflow:clip;line-height:1.08;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
/* ===== 19.10.2026 Kartenreihen mit fester 3-Spalten-Aufteilung (Punkte unter App-Bildern/Ablauf "s2b-ai-punkte", Automationen "s2b-au") passen sich
der Kartenzahl an (Branchen- und Funktionsseiten): 2 Karten = 2 gleich breite Spalten mittig, 1 Karte = eine Karte mittig, nie eine Lücke rechts.
Nur ab 901 px (darunter ohnehin eine Spalte). Sicherung: funktion.css.vor-karten-anzahl-19-10 ===== */
@media (min-width:901px){
body.s2b-seite .s2b-ai-punkte:has(>li:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
body.s2b-seite .s2b-ai-punkte:has(>li:only-child){grid-template-columns:minmax(0,1fr);max-width:420px}
body.s2b-seite .s2b-au:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;margin-inline:auto}
body.s2b-seite .s2b-au:has(>:only-child){grid-template-columns:minmax(0,1fr);max-width:420px;margin-inline:auto}
}
/* 19.10.2026: H1 mit festem Umbruch (seite.json "h1" mit "\n", funktion.py): Zeilen genau wie vorgegeben, mittig, ohne 16ch-Grenze; am Handy dürfen
lange Wörter mit Bindestrich trotzdem umbrechen, damit nichts aus dem Bild läuft. */
.s2f-h1:has(>.s2b-zeile){max-width:none}
/* 20.10.2026 Gründer-Feedback /wechseln/ Nr 1: ".s2b .s2-kopf .s2-h2{max-width:21ch}" (stärker) brach lange feste Zeilen ("Von deinem WhatsApp-Anbieter")
am Desktop in 3 Zeilen; gleiche Regel mit höherer Spezifität. Sicherung: funktion.css.vor-fb-wechseln-20-10 */
.s2b .s2-kopf .s2f-h1:has(>.s2b-zeile){max-width:none}
/* H1 nie breiter als ihr Kasten: Kasten mindestens so breit wie das längste nicht trennbare Wort (z. B. "WhatsApp-Benachrichtigungen"),
am Handy dürfen solche Wörter am Bindestrich umbrechen (vorher liefen sie bei 16ch-Grenze rechts über, H1 wirkte nicht mittig) */
.s2f-h1{min-width:min-content}
@media (max-width:600px){.s2f-h1 .s2b-nw{white-space:normal}}
/* ===== 20.10.2026 Gründer-Bug /funktionen/landingpage/ ("optionen"-Karten): App-Bilder waren verzerrt. Grund: Bild mit height:100% UND
max-width:100% (breite Aufnahme, z. B. 1600×557, wurde in der schmalen Karte waagerecht gestaucht). Jetzt: Bild behält IMMER sein
Seitenverhältnis, passt in die Fläche (höchstens so hoch wie die Fläche innen, höchstens so breit wie die Karte), Rahmen schmiegt sich an.
"ausschnitt" (absichtlicher Ausschnitt mit object-fit:cover) bleibt. Sicherung: funktion.css.vor-opt-bild-19-10 ===== */
.s2f-opt-teil{--opt-ih:calc(330px - 48px)}
.s2f-opt-teil:not(.ausschnitt) .s2f-echt{align-items:center}
.s2f-opt-teil:not(.ausschnitt) .s2f-echt-rahmen{height:auto;width:auto;min-width:0;max-width:100%;max-height:100%}
.s2f-opt-teil:not(.ausschnitt) .s2f-echt-rahmen :is(picture,img){display:block;width:auto;height:auto;max-width:100%;max-height:var(--opt-ih);object-fit:contain}
@media (max-width:760px){.s2f-opt-teil{--opt-ih:calc(310px - 40px)}}
/* bei 5 Karten (3 oben, 2 unten breiter): Bilder unten im selben Maßstab wie oben (sonst wirkt der Text im Bild unten größer) */
@media (min-width:1000px){
.s2f-opt.n5 .s2f-opt-teil:not(.ausschnitt) .s2f-echt-rahmen{max-width:calc((min(1100px,100vw - 2 * var(--s2-rand)) - 40px) / 3 - 48px)}
}
/* ===== 20.10.2026 Gründer-Feedback /agenturen/: Button unter einer Sektion ("knopf") und Formular ("formular", Bewerbung Agentur-Partner) ===== */
.s2f .s2f-sek-knopf{margin-top:44px;justify-content:center}
.s2f-form{position:relative;max-width:760px;margin:0 auto;padding:clamp(24px,3.4vw,44px);background:#fff;border-radius:var(--s2-r-kachel);box-shadow:var(--s2-schatten-ruhig)}
.s2f-form-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px}
.s2f-fm-feld{display:flex;flex-direction:column;gap:8px;min-width:0}
.s2f-fm-feld.breit{grid-column:1/-1}
.s2f-fm-feld label{font-size:14.5px;font-weight:600;color:#141414;line-height:1.3}
.s2f-fm-pflicht-stern{color:#6e6e6b;font-weight:600}
.s2f-fm-feld input,.s2f-fm-feld select{width:100%;height:52px;padding:0 16px;border:0;border-radius:var(--s2-r-knopf);background:#fff;box-shadow:0 0 0 1px #e4e4e2;
font:inherit;font-size:16px;color:#141414;-webkit-appearance:none;appearance:none;transition:box-shadow 200ms var(--s2-kurve)}
.s2f-fm-feld input:hover,.s2f-fm-feld select:hover{box-shadow:0 0 0 1px #c9c9c6}
.s2f-fm-feld input:focus,.s2f-fm-feld select:focus{outline:none;box-shadow:0 0 0 2px #141414}
.s2f-fm-feld [aria-invalid="true"]{box-shadow:0 0 0 2px #dc2626}
.s2f-fm-auswahl{position:relative}
.s2f-fm-auswahl select{padding-right:44px;cursor:pointer}
.s2f-fm-auswahl select:invalid{color:#6e6e6b}
.s2f-fm-auswahl .s2-ic{position:absolute;right:16px;top:50%;width:16px;height:16px;transform:translateY(-50%) rotate(90deg);pointer-events:none;color:#6e6e6b}
.s2f-form-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.s2f-form-hinweis{margin:24px auto 0;max-width:56ch;text-align:center;font-size:14px;line-height:1.55;color:#6e6e6b}
.s2f-form-hinweis a{color:#141414;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.s2f-form-pflicht{margin:6px 0 0;font-size:13.5px;color:#6e6e6b}
.s2f .s2f-form-knopf{margin-top:26px;justify-content:center}
.s2f-form-knopf .s2-knopf[disabled]{opacity:.6;cursor:wait}
.s2f-form-meldung{margin:18px 0 0;padding:14px 16px;border-radius:var(--s2-r-knopf);background:#f1f1f0;font-size:15px;line-height:1.5;color:#141414}
.s2f-form-meldung.fehler{box-shadow:inset 3px 0 0 #dc2626}
.s2f-form-meldung a{color:#141414;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.s2f-form.gesendet .s2f-form-raster,.s2f-form.gesendet .s2f-form-hinweis,.s2f-form.gesendet .s2f-form-pflicht,.s2f-form.gesendet .s2f-form-knopf{display:none}
.s2f-form.gesendet .s2f-form-meldung{margin:0;padding:22px 20px;font-size:17px;font-weight:600;text-align:center}
@media (max-width:760px){
.s2f-form{padding:22px 18px 24px;border-radius:24px}
.s2f-form-raster{grid-template-columns:minmax(0,1fr);gap:16px}
.s2f .s2f-form-knopf .s2-knopf,.s2f .s2f-sek-knopf .s2-knopf{width:100%}
}
.s2f-formular .s2-kopf .s2-h2 em{white-space:nowrap}
.s2f-form{text-align:left}
/* ===== 20.10.2026 Gründer (Regel 43 neu, alle Unterseiten): zweizeilige Unterzeilen am Desktop ca. gleich breit, auch über eine Satzgrenze.
"text_zeilen"/"satz_zeilen"/"\n" = ein Absatz (.s2f-satz-fluss) mit Sätzen als .s2f-satz. bausteine.js setzt .s2-saetze-zeilen (Satz je Zeile, ohne
Breitengrenze) nur, wenn jeder Satz in eine Zeile passt und die Zeilen ±20 % gleich breit sind; sonst ausgeglichener Fließtext.
H1 und Abschluss-Titel mit "\n" bleiben fest. Sicherung: funktion.css.vor-satz-fluss-20-10 ===== */
.s2f-satz-fluss>.s2f-satz{display:inline}
.s2f-satz-fluss.s2-saetze-zeilen,.s2f-satz-fluss.s2-messen{max-width:none!important}
.s2f-satz-fluss.s2-saetze-zeilen>.s2f-satz{display:block}
.s2f-satz-fluss.s2-messen>.s2f-satz{display:inline-block;white-space:nowrap}
/* ===== 20.10.2026 Gründer /ueber-uns/ Nr 6: "titel_zeilen" (funktion.py _kopf) = fester Umbruch im H2 ab 901 px (Block je Zeile, s2b-eine-zeile).
Am Handy fließt der Titel normal (sonst eine Zeile mehr durch den erzwungenen Umbruch). Sicherung: funktion.css.vor-titel-zeilen-20-10 ===== */
@media (max-width:900px){.s2f .s2-kopf .s2-h2>.s2b-zeile{display:inline}}
/* 20.10.2026 Integrationsseiten: Logo des Programms + SmartChat-Logo über der H1 (funktion.logos) */
body.s2f-seite .s2f-logos{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 26px}
body.s2f-seite .s2f-logo-kachel{display:grid;place-items:center;width:76px;height:76px;border:1px solid #e4e4e2;border-radius:14px;background:#ffffff}
body.s2f-seite .s2f-logo-kachel img{width:40px;height:40px;display:block}
body.s2f-seite .s2f-logo-kachel .s2-kugel{--g:44px}
body.s2f-seite .s2f-logos-plus{display:grid;place-items:center;color:#6e6e6b}
body.s2f-seite .s2f-logos-plus .s2-ic{width:20px;height:20px}
@media (max-width:760px){body.s2f-seite .s2f-logo-kachel{width:64px;height:64px}body.s2f-seite .s2f-logo-kachel img{width:34px;height:34px}body.s2f-seite .s2f-logo-kachel .s2-kugel{--g:38px}}
/* Integrationsseiten (Gründer 02.11.): Abstand zwischen den Sektionen doppelt so groß */
.s2i-seite .s2b-sek.s2-sek{padding-block:calc(var(--s2-luft) * 2)}
.s2i-seite .s2b-sek.s2-sek.s2f-start{padding-top:clamp(28px,4.5vw,72px)}
/* Über uns, Vorteile (Gründer 02.11.): wie bei den News: Fenster links und oben mit Rand, rechts und unten angeschnitten, herangezoomt */
section[aria-labelledby="vorteile"] .s2f-opt-teil.ausschnitt{padding:28px 0 0 28px;display:block;overflow:hidden}
section[aria-labelledby="vorteile"] .s2f-opt-teil.ausschnitt .s2f-echt{display:block;height:auto;width:100%}
section[aria-labelledby="vorteile"] .s2f-opt-teil.ausschnitt .s2f-echt-rahmen{display:block;width:150%;height:auto;max-width:none;border-radius:14px 0 0 0;box-shadow:0 0 0 1px #e8e8ec,0 18px 40px -18px rgba(20,20,30,.22)}
section[aria-labelledby="vorteile"] .s2f-opt-teil.ausschnitt .s2f-echt-rahmen :is(picture,img){display:block;width:100%;height:auto;max-width:none;object-fit:initial}
/* Über uns, "Für Unternehmen ohne Marketing- oder Technik-Expertise" (Gründer 02.11.): Fotos füllen die ganze Bildfläche der Kachel */
section[aria-labelledby="fuer-wen"] .s2f-opt-teil{padding:0}
section[aria-labelledby="fuer-wen"] .s2f-opt-teil .s2f-echt{display:block;width:100%;height:100%;max-width:none}
section[aria-labelledby="fuer-wen"] .s2f-opt-teil .s2f-echt-rahmen{display:block;width:100%;height:100%;max-width:none;max-height:none;border-radius:0;box-shadow:none}
section[aria-labelledby="fuer-wen"] .s2f-opt-teil .s2f-echt-rahmen :is(picture,img){display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
/* Über uns, "Sicherheit in jedem Tarif" (Gründer 02.11.): nachgebaute Mini-Oberflächen, drei gleich große, mittige Quadrate mit runden Ecken, grauer Rand rundum */
section[aria-labelledby="sicherheit"] .s2f-opt-teil{--oh:274px;padding:28px;display:grid;place-items:center}
@media (max-width:760px){section[aria-labelledby="sicherheit"] .s2f-opt-teil{--oh:254px;padding:28px 20px}}
section[aria-labelledby="sicherheit"] .s2b-app.s2f-app-mini{box-sizing:border-box;width:min(100%,var(--oh));aspect-ratio:1/1;height:auto;padding:18px;display:flex;flex-direction:column;justify-content:center;gap:14px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px #e8e8ec,0 14px 34px -16px rgba(20,20,30,.18);overflow:hidden}
section[aria-labelledby="sicherheit"] .s2f-app-kopf{flex-wrap:wrap;gap:10px}
section[aria-labelledby="sicherheit"] .s2f-app-titel{font-size:15px}
section[aria-labelledby="sicherheit"] .s2f-app-mini .s2f-app-btn{height:34px;padding:0 14px;font-size:13px}
section[aria-labelledby="sicherheit"] li:nth-child(2) .s2b-app.s2f-app-mini{gap:10px;padding:16px}
section[aria-labelledby="sicherheit"] li:nth-child(2) .s2f-app-sel{gap:6px}
section[aria-labelledby="sicherheit"] li:nth-child(2) .s2f-app-opt{padding:8px 12px;border-radius:12px}
section[aria-labelledby="sicherheit"] li:nth-child(2) .s2f-app-opt b{font-size:13.5px}
section[aria-labelledby="sicherheit"] li:nth-child(1) .s2b-app.s2f-app-mini{gap:8px;padding:14px}
section[aria-labelledby="sicherheit"] li:nth-child(1) .s2f-app-zeile{padding:8px}
/* Über uns, Sicherheit: Nachbau Einwilligungs-Nachweis (beleg) und Zwei-Faktor (zentriert), Quadrat 274 px */
section[aria-labelledby="sicherheit"] .s2f-bl,section[aria-labelledby="sicherheit"] .s2f-zt{box-sizing:border-box;width:min(100%,var(--oh));aspect-ratio:1/1;border-radius:22px;background:#fff;box-shadow:0 0 0 1px #e8e8ec,0 14px 34px -16px rgba(20,20,30,.18);overflow:hidden}
.s2f-bl{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:20px 22px}
.s2f-bl-kopf{display:flex;align-items:center;gap:12px}
.s2f-bl-haken{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:#f1f1f0;color:#141414}
.s2f-bl-hi{width:20px;height:20px}
.s2f-bl-kopf b{display:block;font:600 15px/1.25 var(--s2-sans);color:#141414}
.s2f-bl-kopf small{display:block;margin-top:2px;font:400 12.5px/1.2 var(--s2-sans);color:#7a7a80}
.s2f-bl-liste{display:grid;gap:0;border-top:1px solid #efeff1}
.s2f-bl-z{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #efeff1;font:400 13px/1.2 var(--s2-sans);color:#7a7a80}
.s2f-bl-z b{font-weight:600;color:#141414}
.s2f-bl-knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;border-radius:12px;background:#141414;color:#fff;font:600 13px/1 var(--s2-sans)}
.s2f-bl-bi{width:16px;height:16px}
.s2f-zt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 22px;text-align:center}
.s2f-zt-logo{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #e8e8ec,0 6px 14px -8px rgba(20,20,30,.2)}
.s2f-zt-logo svg{width:32px;height:32px}
.s2f-zt b{font:600 15px/1.25 var(--s2-sans);color:#141414}
.s2f-zt p{margin:0;font:400 12.5px/1.45 var(--s2-sans);color:#7a7a80;max-width:210px}
.s2f-zt-knopf{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 24px;margin-top:4px;border-radius:12px;background:#141414;color:#fff;font:600 13px/1 var(--s2-sans)}