/* 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:#0d0d10;          /* App --ink: Überschriften, Knopf, wichtige Wörter */
  --s2-tinte:#4b4c54;            /* App --ink2: Chip-Text, Text in Karten */
  --s2-grau:#6e6f78;             /* App --grey: Fließtext */
  --s2-grau-satz:#a3a4ac;        /* zweiter, grauer Teil eines Satzes (schwarz/grau-Technik) */
  --s2-grau-hell:#9a9ba3;        /* Kleingedrucktes, Zeiten, Nummern */
  --s2-linie:#e8e8ec;            /* App --line: jede Linie, jeder Ring */
  --s2-linie-stark:#d6d6dd;      /* App --g300 */
  --s2-flaeche:#f5f5f7;          /* App --fill: Felder, Skelett-Balken */
  --s2-flaeche-ruhig:#f6f6f8;    /* ruhige Kachel ohne Bild */
  --s2-weiss:#ffffff;
  --s2-rot:#d02f47;              /* nur Fehler */
  --s2-ok-grund:#e9f5ee; --s2-ok-text:#2c7a4b;          /* App .pl.ok */
  --s2-warte-grund:#fef7d9; --s2-warte-text:#7a5f00;    /* 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,30,.03),0 10px 30px rgba(20,20,30,.05);                       /* App .card */
  --s2-schatten-schwebe:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(20,20,40,.05),0 2px 4px rgba(20,20,40,.04),0 24px 48px -22px rgba(20,20,40,.28);  /* App .nc, tiefer */
  --s2-schatten-tief:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(20,20,40,.05),0 4px 10px rgba(20,20,40,.05),0 50px 90px -40px rgba(20,20,40,.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:linear-gradient(180deg,#2b2b31 0%,#0d0d10 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 0 0 1px #0d0d10,0 1px 2px rgba(13,13,16,.14),0 8px 18px -10px rgba(13,13,16,.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:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.03) 100%)}
.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,40,.04),0 6px 16px -10px rgba(20,20,40,.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(13,13,16,.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:linear-gradient(180deg,#fff,#f8f8fa)}
.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:#efeff2;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:#f0d6e4 url(/m/feld-1.jpg) 40% 55%/420% 420%;box-shadow:0 0 0 1px rgba(255,255,255,.5) inset,0 6px 14px -8px rgba(20,20,40,.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,40,.18)}
.s2-symbol.schwarz{background:linear-gradient(180deg,#2b2b31,#0d0d10);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 #e3e3e7,0 8px 20px -14px rgba(20,20,40,.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:linear-gradient(#111 0 33.3%,#d00 33.3% 66.6%,#ffce00 66.6%)}
.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:radial-gradient(120% 120% at 30% 18%,#ffffff 0%,#fbfbfc 42%,#efeff2 100%);
  box-shadow:0 0 0 1px #e2e2e7,0 1px 0 #fff inset,0 -10px 18px -8px rgba(20,20,40,.07) inset,0 2px 4px rgba(20,20,40,.05),0 22px 36px -20px rgba(20,20,40,.32)}
.s2-siegel::before{content:"";position:absolute;inset:9%;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 1px rgba(20,20,40,.06),0 1px 0 rgba(255,255,255,.95),0 2px 5px rgba(20,20,40,.06) inset}
.s2-siegel::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.4) 100%)}
.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:#7d7e87}
.s2-siegel-mitte b{font-size:calc(var(--g) * .098);font-weight:600;letter-spacing:-.005em;color:#55565e;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:#a2a3ab;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,40,.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:#eceae8}
.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:#eee;box-shadow:0 2px 6px -1px rgba(20,20,40,.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 #e3e3e7,0 8px 20px -14px rgba(20,20,40,.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(13,13,16,.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(13,13,16,.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,40,.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) ----------
   <div class="s2-buehne" style="--s2-schritte:3"><div class="s2-buehne-innen">…</div></div>
   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:#fde2dd;color:#a3271a;
  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:#a3271a;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}
}


/* ===== SEKTION ablauf ===== */
/* SO STARTEST DU (Idee 2): Linie in der Mitte, Nummern 1 bis 6, Karten abwechselnd links und rechts. Schwarz statt Orange (STIL.md: Farbe nur in App-Teilen). */
.s2-ab{position:relative;list-style:none;margin:0 auto;padding:0;max-width:1040px;--ab-p:0;
  /* Feedback 17.10.: Abstände gleichmäßig und ~4x so groß. Alle Zeilen gleich hoch (1fr = höchste Karte), Karten überlappen nicht mehr.
     Alt (1440 breit): Leerraum in jeder Spalte 63/79/70/92 px, Nummer zu Nummer 155 bis 189 px, Karten überlappten sich um 100 px.
     Neu: Leerraum in jeder Spalte überall gleich (Kartenhöhe + 2 x Lücke), Nummer zu Nummer überall gleich. */
  --ab-luecke:40px;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;row-gap:var(--ab-luecke)}
.s2-ab-linie{position:absolute;left:50%;top:var(--ab-oben,40px);bottom:var(--ab-unten,40px);width:2px;margin-left:-1px;background:var(--s2-linie);border-radius:2px}
.s2-ab-fuell{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--s2-schwarz);border-radius:2px;transform-origin:50% 0;transform:scaleY(var(--ab-p))}
.s2-ab-schritt{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);align-items:stretch}
.s2-ab-schritt.li .s2-ab-karte{grid-column:1;grid-row:1}
.s2-ab-schritt.re .s2-ab-karte{grid-column:3;grid-row:1}
.s2-ab-nr{grid-column:2;grid-row:1;justify-self:center;align-self:center;position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font:600 14px/1 var(--s2-sans);font-variant-numeric:tabular-nums;color:var(--s2-grau-hell);background:#fff;box-shadow:0 0 0 1.5px var(--s2-linie-stark);
  transition:background 400ms var(--s2-kurve),color 400ms var(--s2-kurve),box-shadow 400ms var(--s2-kurve),transform 500ms var(--s2-kurve)}
.s2-ab-schritt.an .s2-ab-nr{background:var(--s2-schwarz);color:#fff;box-shadow:0 0 0 5px #fff,0 0 0 6px var(--s2-linie);transform:scale(1.06)}

.s2-ab-karte{display:flex;flex-direction:column;background:#fff;border-radius:var(--s2-r-kachel);box-shadow:var(--s2-schatten-ruhig);padding:26px 26px 22px}
.s2-ab-titel{margin:0;font:600 21px/1.25 var(--s2-sans);color:var(--s2-schwarz);letter-spacing:-.01em}
.s2-ab-text{margin:8px 0 20px;font-size:16px;line-height:1.55;color:var(--s2-grau)}
.s2-ab-teil{flex:1 0 auto;border-radius:calc(var(--s2-r-kachel) - 12px);box-shadow:var(--s2-schatten-ring);background:#fff;min-height:104px;padding:18px;position:relative}

/* 1 Knopf mit Mauszeiger */
.s2-ab-teil.t1{display:grid;place-items:center}
.s2-ab-teil.t1 .s2-knopf{pointer-events:none}
.s2-ab-maus{position:absolute;width:22px;height:22px;left:calc(50% + 62px);top:calc(50% + 6px);filter:drop-shadow(0 2px 3px rgba(13,13,16,.25))}
/* 2 Webseiten-Feld */
.s2-ab-teil.t2{display:flex;align-items:center}
.s2-ab-url{display:flex;align-items:center;gap:10px;width:100%;height:50px;padding:0 16px;border-radius:var(--s2-r-klein);background:var(--s2-flaeche);font:500 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--s2-tinte)}
.s2-ab-url .s2-ic{width:18px;height:18px;color:var(--s2-grau-hell)}
.s2-ab-tipp{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom}
.s2-ab-strich{width:2px;height:20px;background:var(--s2-schwarz);margin-left:-8px;animation:s2abBlink 1s steps(1) infinite}
@keyframes s2abBlink{50%{opacity:0}}
/* 3 Seite wird gelesen */
.s2-ab-teil.t3{display:flex;align-items:center;gap:14px}
.s2-ab-mini{flex:none;width:92px;height:76px;border-radius:var(--s2-r-klein);box-shadow:var(--s2-schatten-ring);padding:10px;display:grid;gap:6px;align-content:start}
.s2-ab-mini i{display:block;height:6px;border-radius:3px;background:var(--s2-linie-stark)}
.s2-ab-mini .b1{width:46%}.s2-ab-mini .b2{width:90%}.s2-ab-mini .b3{width:70%}.s2-ab-mini .b4{height:16px;margin-top:2px;background:var(--s2-flaeche);box-shadow:var(--s2-schatten-ring)}
.s2-ab-chips{display:flex;flex-wrap:wrap;gap:8px}
.s2-ab-chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:var(--s2-r-rund);box-shadow:var(--s2-schatten-ring);font-size:13.5px;font-weight:500;color:var(--s2-tinte);background:#fff}
.s2-ab-chip .s2-ic{width:14px;height:14px}
.s2-ab-chip .farbe{width:9px;height:9px;border-radius:50%;background:#0f6e78}
/* 4 Landingpage + Follow-ups */
.s2-ab-teil.t4{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center}
.s2-ab-teil.t4 figure{margin:0}
.s2-ab-teil.t4 figcaption{margin-top:8px;font-size:13px;font-weight:500;color:var(--s2-grau-hell)}
.s2-ab-lp,.s2-ab-fu{height:78px;border-radius:var(--s2-r-klein);box-shadow:var(--s2-schatten-ring);padding:11px;display:grid;gap:6px;align-content:start}
.s2-ab-lp i{display:block;height:5px;border-radius:3px;background:var(--s2-linie)}
.s2-ab-lp .k{width:60%;background:var(--s2-linie-stark)}
.s2-ab-lp .kn{height:12px;margin-top:4px;background:var(--s2-schwarz);border-radius:5px}
.s2-ab-fu{background:var(--s2-wa-grund);gap:7px}
.s2-ab-fu i{display:block;height:15px;border-radius:7px;background:#fff}
.s2-ab-fu .ein{width:72%}.s2-ab-fu .aus{width:52%;justify-self:end;background:var(--s2-wa-aus)}
/* 5 Freigeben */
.s2-ab-teil.t5{display:flex;align-items:center;justify-content:space-between;gap:14px}
.s2-ab-liste{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14.5px;font-weight:500;color:var(--s2-tinte)}
.s2-ab-liste li{display:flex;align-items:center;gap:9px}
.s2-ab-liste .haken{width:20px;height:20px;border-radius:50%;background:var(--s2-ok-text);color:#fff;display:grid;place-items:center}
.s2-ab-liste .haken .s2-ic{width:12px;height:12px}
.s2-ab-teil.t5 .s2-knopf{pointer-events:none}
/* 6 erster Kontakt */
.s2-ab-teil.t6{background:var(--s2-wa-grund);box-shadow:none;display:grid;gap:12px;justify-items:start;align-content:center}
.s2-ab-blase{max-width:330px;background:#fff;border-radius:4px var(--s2-r-klein) var(--s2-r-klein) var(--s2-r-klein);padding:10px 13px;box-shadow:0 1px 1px rgba(13,13,16,.06);display:grid;gap:3px}
.s2-ab-blase b{font-size:14.5px;color:var(--s2-schwarz)}
.s2-ab-blase span{font-size:13.5px;line-height:1.45;color:var(--s2-grau)}
.s2-ab-teil.t6 .s2-status{justify-self:end}

/* ---------- Bewegung: jedes App-Teil spielt einmal, wenn die Linie seine Nummer erreicht ---------- */
html.s2-js:not(.s2-statisch) .s2-ab-schritt:not(.an) .s2-ab-maus{transform:translate(40px,30px);opacity:0}
.s2-ab-maus{transition:transform 900ms var(--s2-kurve),opacity 400ms}
html.s2-js:not(.s2-statisch) .s2-ab-schritt.an .t1 .s2-knopf{animation:s2abDruck 380ms 820ms var(--s2-kurve) both}
@keyframes s2abDruck{50%{transform:scale(.95)}}
html.s2-js:not(.s2-statisch) .s2-ab-schritt:not(.an) .s2-ab-tipp{max-width:0}
.s2-ab-tipp{max-width:20ch;transition:max-width 1300ms steps(18)}
html.s2-js:not(.s2-statisch) .s2-ab-schritt:not(.an) :is(.s2-ab-chip,.s2-ab-liste li,.s2-ab-blase,.t6 .s2-status,.t5 .s2-knopf){opacity:0;transform:translateY(8px) scale(.96)}
:is(.s2-ab-chip,.s2-ab-liste li,.s2-ab-blase,.t6 .s2-status,.t5 .s2-knopf){transition:opacity 500ms var(--s2-kurve),transform 600ms var(--s2-kurve)}
.s2-ab-chip:nth-child(1),.s2-ab-liste li:nth-child(1),.s2-ab-blase{transition-delay:250ms}
.s2-ab-chip:nth-child(2),.s2-ab-liste li:nth-child(2){transition-delay:420ms}
.s2-ab-chip:nth-child(3),.s2-ab-liste li:nth-child(3){transition-delay:590ms}
.t5 .s2-knopf{transition-delay:780ms}.t6 .s2-status{transition-delay:900ms}
html.s2-js:not(.s2-statisch) .s2-ab-schritt:not(.an) .s2-ab-mini i{transform:scaleX(0)}
.s2-ab-mini i{transform-origin:0 50%;transition:transform 700ms var(--s2-kurve)}
.s2-ab-mini .b2{transition-delay:120ms}.s2-ab-mini .b3{transition-delay:240ms}.s2-ab-mini .b4{transition-delay:360ms}
html.s2-js:not(.s2-statisch) .s2-ab-schritt:not(.an) :is(.s2-ab-lp i,.s2-ab-fu i){transform:scaleX(0)}
:is(.s2-ab-lp i,.s2-ab-fu i){transform-origin:0 50%;transition:transform 800ms var(--s2-kurve)}
.s2-ab-fu .aus{transform-origin:100% 50%}
.s2-ab-lp i:nth-child(2),.s2-ab-fu .aus{transition-delay:150ms}.s2-ab-lp i:nth-child(3){transition-delay:300ms}.s2-ab-lp .kn{transition-delay:450ms}
html.s2-statisch .s2-ab{--ab-p:1}
@media (prefers-reduced-motion:reduce){#s2-ablauf *{transition:none!important;animation:none!important}}

/* ---------- Handy: Linie links, alle Karten rechts daneben ---------- */
@media (max-width:760px){
  .s2-ab-linie{left:18px}
  .s2-ab-schritt{grid-template-columns:36px minmax(0,1fr);column-gap:14px;align-items:start}
  .s2-ab{grid-auto-rows:auto;--ab-luecke:112px}   /* Handy alt 28 px, neu 112 px (4x), überall gleich */
  .s2-ab-schritt.li .s2-ab-karte,.s2-ab-schritt.re .s2-ab-karte{grid-column:2}
  .s2-ab-nr{grid-column:1;margin-top:22px;align-self:start}
  .s2-ab-karte{padding:20px 18px 18px;border-radius:24px}
  .s2-ab-teil{border-radius:12px;padding:14px}
  .s2-ab-titel{font-size:19px}
  .s2-ab-teil.t3{flex-direction:column;align-items:flex-start}
  .s2-ab-teil.t5{flex-direction:column;align-items:flex-start}
}

/* Karten kommen weich von ihrer Seite, sobald sie ins Bild laufen (ablauf.js setzt .da, unabhängig vom Beobachter in basis.js) */
html.s2-js:not(.s2-statisch) .s2-ab-schritt:not(.da) .s2-ab-karte{opacity:0;transform:translate3d(-36px,14px,0)}
html.s2-js:not(.s2-statisch) .s2-ab-schritt.re:not(.da) .s2-ab-karte{transform:translate3d(36px,14px,0)}
.s2-ab-karte{transition:opacity 800ms var(--s2-kurve),transform 1000ms var(--s2-kurve)}
@media (max-width:760px){html.s2-js:not(.s2-statisch) .s2-ab-schritt:not(.da) .s2-ab-karte{transform:translate3d(0,18px,0)}}

/* 18.10.2026 (Gründer): Titel ganz oben breiter und kleiner, auf dem Desktop genau 2 Zeilen */
#s2-ablauf .s2-kopf .s2-h2{max-width:none;width:min(100%,1060px);font-size:clamp(32px,3.1vw + 4px,52px)}

/* 18.10.2026 (Gründer): "Kostenfrei starten" in Schritt 1 größer, rund, leichter bunter Schein wie der Knopf oben rechts (Leiste),
   leicht pulsierend, und beim Erscheinen eine Einblend-Animation. Danach fährt der Mauszeiger hin und drückt (wie bisher). */
.s2-ab-teil.t1{min-height:132px}
.s2-ab-teil.t1 .s2-ab-start{height:58px;padding:0 36px;border-radius:999px;font-size:17px;
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 1px 2px rgba(13,13,16,.14),
    -18px 20px 34px -12px rgba(177,92,255,.38),0 22px 36px -12px rgba(255,122,182,.32),18px 20px 34px -12px rgba(255,177,58,.42)}
.s2-ab-teil.t1 .s2-ab-maus{left:calc(50% + 92px);top:calc(50% + 10px)}
@keyframes s2abErscheinen{0%{opacity:0;transform:translateY(14px) scale(.7)}60%{opacity:1;transform:translateY(-2px) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes s2abPuls{0%,100%{box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 1px 2px rgba(13,13,16,.14),-18px 20px 34px -12px rgba(177,92,255,.34),0 22px 36px -12px rgba(255,122,182,.28),18px 20px 34px -12px rgba(255,177,58,.38);transform:scale(1)}
  50%{box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 1px 2px rgba(13,13,16,.14),-20px 24px 42px -10px rgba(177,92,255,.55),0 26px 44px -10px rgba(255,122,182,.48),20px 24px 42px -10px rgba(255,177,58,.58);transform:scale(1.03)}}
html.s2-js:not(.s2-statisch) .s2-ab-schritt:not(.an) .t1 .s2-ab-start{opacity:0;transform:translateY(14px) scale(.7)}
html.s2-js:not(.s2-statisch) .s2-ab-schritt.an .t1 .s2-ab-start{animation:s2abErscheinen 650ms var(--s2-kurve) both,s2abDruck 380ms 1150ms var(--s2-kurve) both,s2abPuls 2.4s 1700ms ease-in-out infinite}
html.s2-js:not(.s2-statisch) .s2-ab-schritt.an .t1 .s2-ab-maus{transition-delay:450ms}
@media (prefers-reduced-motion:reduce){.s2-ab-teil.t1 .s2-ab-start{animation:none!important;opacity:1!important;transform:none!important}}

/* ===== 18.10.2026 (Gründer, Runde 2): keine Unterzeilen mehr, App-Teile NICHT eingerahmt (frei in der Karte),
   Maus am Anfang größer und nach dem Klick weg, Schein am Startknopf schwächer, alle Animationen etwas lebendiger. ===== */
.s2-ab-teil{box-shadow:none!important;background:transparent!important;padding:6px 0 0;min-height:0}
.s2-ab-teil.t1{min-height:120px}
.s2-ab-titel{margin-bottom:18px}

/* 1: Schein schwächer, Puls ruhiger */
.s2-ab-teil.t1 .s2-ab-start{box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 1px 2px rgba(13,13,16,.14),
    -14px 14px 26px -12px rgba(177,92,255,.24),0 16px 28px -12px rgba(255,122,182,.2),14px 14px 26px -12px rgba(255,177,58,.26)}
@keyframes s2abPuls{0%,100%{box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 1px 2px rgba(13,13,16,.14),-14px 14px 26px -12px rgba(177,92,255,.22),0 16px 28px -12px rgba(255,122,182,.18),14px 14px 26px -12px rgba(255,177,58,.24);transform:scale(1)}
  50%{box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 1px 2px rgba(13,13,16,.14),-16px 18px 32px -12px rgba(177,92,255,.34),0 20px 34px -12px rgba(255,122,182,.28),16px 18px 32px -12px rgba(255,177,58,.36);transform:scale(1.02)}}
/* 1: Maus groß rein, klickt, verschwindet */
.s2-ab-teil.t1 .s2-ab-maus{width:30px;height:30px;transition:none}
@keyframes s2abMaus{0%{opacity:0;transform:translate(70px,50px) scale(1.35)}
  25%{opacity:1}
  62%{opacity:1;transform:translate(0,0) scale(1.35)}
  70%{transform:translate(0,0) scale(1.1)}
  78%{opacity:1;transform:translate(0,0) scale(1.3)}
  100%{opacity:0;transform:translate(6px,6px) scale(1.2)}}
html.s2-js:not(.s2-statisch) .s2-ab-schritt:not(.an) .t1 .s2-ab-maus{opacity:0}
html.s2-js:not(.s2-statisch) .s2-ab-schritt.an .t1 .s2-ab-maus{animation:s2abMaus 1900ms 300ms cubic-bezier(.25,.8,.3,1) both}
html.s2-statisch .t1 .s2-ab-maus{display:none}

/* gemeinsame Feder-Kurve */
#s2-ablauf{--ab-feder:cubic-bezier(.34,1.56,.64,1)}
/* 2: Eingabefeld leuchtet auf, wenn fertig getippt */
@keyframes s2abFeld{0%,100%{box-shadow:0 0 0 0 rgba(255,122,182,0)}40%{box-shadow:0 0 0 4px rgba(255,122,182,.22),0 10px 30px -12px rgba(255,177,58,.5)}}
html.s2-js:not(.s2-statisch) .s2-ab-schritt.an .s2-ab-url{animation:s2abFeld 1400ms 1350ms ease-out both}
html.s2-js:not(.s2-statisch) .s2-ab-schritt:not(.an) .s2-ab-url{opacity:0;transform:translateY(10px)}
.s2-ab-url{transition:opacity 500ms var(--s2-kurve),transform 600ms var(--s2-kurve)}
/* 3: Lese-Strahl über die Mini-Seite, Chips springen mit Feder rein */
.s2-ab-mini{position:relative;overflow:hidden}
.s2-ab-mini::after{content:"";position:absolute;left:0;right:0;top:-30%;height:30%;background:linear-gradient(180deg,rgba(255,122,182,0),rgba(255,122,182,.28),rgba(255,177,58,0));opacity:0}
@keyframes s2abScan{0%{top:-30%;opacity:1}100%{top:110%;opacity:1}}
html.s2-js:not(.s2-statisch) .s2-ab-schritt.an .s2-ab-mini::after{animation:s2abScan 1100ms 150ms ease-in-out 2}
.s2-ab-mini i{transform-origin:left center;transition:transform 700ms var(--s2-kurve)}
.s2-ab-mini .b2{transition-delay:120ms}.s2-ab-mini .b3{transition-delay:240ms}.s2-ab-mini .b4{transition-delay:360ms}
.s2-ab-chip,.s2-ab-liste li,.s2-ab-blase,.t6 .s2-status,.t5 .s2-knopf{transition:opacity 450ms var(--s2-kurve),transform 650ms var(--ab-feder)}
html.s2-js:not(.s2-statisch) .s2-ab-schritt:not(.an) .s2-ab-chip{transform:translateY(14px) scale(.8)}
/* 4: Landingpage und Follow-ups steigen nacheinander auf, die Blasen schieben sich rein */
.s2-ab-teil.t4 figure{transition:opacity 500ms var(--s2-kurve),transform 700ms var(--ab-feder)}
.s2-ab-teil.t4 figure:nth-child(2){transition-delay:220ms}
html.s2-js:not(.s2-statisch) .s2-ab-schritt:not(.an) .s2-ab-teil.t4 figure{opacity:0;transform:translateY(22px) scale(.92)}
.s2-ab-fu i{transition:opacity 400ms,transform 600ms var(--ab-feder)}
.s2-ab-fu .ein{transition-delay:600ms}.s2-ab-fu .aus{transition-delay:900ms}
html.s2-js:not(.s2-statisch) .s2-ab-schritt:not(.an) .s2-ab-fu .ein{opacity:0;transform:translateX(-16px)}
html.s2-js:not(.s2-statisch) .s2-ab-schritt:not(.an) .s2-ab-fu .aus{opacity:0;transform:translateX(16px)}
.s2-ab-lp .kn{transition:transform 600ms 750ms var(--ab-feder)}
html.s2-js:not(.s2-statisch) .s2-ab-schritt:not(.an) .s2-ab-lp .kn{transform:scaleX(0)}
/* 5: Haken ploppen, dann wird Freigeben gedrückt */
.s2-ab-liste .haken{transition:transform 500ms var(--ab-feder)}
.s2-ab-liste li:nth-child(1) .haken{transition-delay:400ms}.s2-ab-liste li:nth-child(2) .haken{transition-delay:570ms}.s2-ab-liste li:nth-child(3) .haken{transition-delay:740ms}
html.s2-js:not(.s2-statisch) .s2-ab-schritt:not(.an) .s2-ab-liste .haken{transform:scale(0)}
html.s2-js:not(.s2-statisch) .s2-ab-schritt.an .t5 .s2-knopf{animation:s2abDruck 380ms 1400ms var(--s2-kurve) both}
/* 6: WhatsApp-Blase gleitet mit Feder rein, frei (ohne grüne Fläche drumherum) */
.s2-ab-blase{box-shadow:0 1px 1px rgba(13,13,16,.06),0 10px 30px -14px rgba(13,13,16,.25);border:1px solid var(--s2-linie)}
html.s2-js:not(.s2-statisch) .s2-ab-schritt:not(.an) .s2-ab-blase{transform:translateX(-24px) scale(.94)}
html.s2-js:not(.s2-statisch) .s2-ab-schritt:not(.an) .t6 .s2-status{transform:scale(.6)}
@media (prefers-reduced-motion:reduce){#s2-ablauf *{animation:none!important;transition:none!important}}

/* ===== 18.10.2026 (Gründer: "überall bleibt man hängen", nur Technik, Aussehen gleich) =====
   1) Der pulsierende Schein am Startknopf (box-shadow, endlos) zwang den Browser, in JEDEM Bild die ganze Seitenebene neu zu malen, auch weit weg.
      Jetzt hat der Knopf eine eigene Ebene (nur er wird neu gemalt) und der Puls pausiert, solange Schritt 1 nicht zu sehen ist (.weg setzt ablauf.js). */
/* will-change:opacity statt transform: eigene Ebene, aber der Text wird beim Hineinskalieren (0,7 -> 1) nicht unscharf */
.s2-ab-teil.t1 .s2-ab-start{will-change:opacity}
html.s2-js:not(.s2-statisch) .s2-ab-schritt.an.weg .t1 .s2-ab-start{animation-play-state:running,running,paused}
/* 2) Lese-Strahl: gleiche Bahn (top -30 % bis 110 % der Mini-Seite), aber per transform statt top (kein Layout pro Bild).
      Der Strahl ist 30 % hoch, 140 % der Mini-Seite = 466,67 % seiner eigenen Höhe. */
@keyframes s2abScan{0%{transform:translateY(0);opacity:1}100%{transform:translateY(466.667%);opacity:1}}

/* ===== 18.10.2026 Handy-Bugrunde 2 (nur bis 760 px, Desktop unverändert) =====
   Karten 2, 4 und 6 (Klasse .re) kamen am Handy 36 px von RECHTS herein: die Desktop-Regel ".re:not(.da)" ist stärker als die Handy-Regel,
   die Karte stand beim Erscheinen über den rechten Bildschirmrand hinaus und wirkte angeschnitten (vor allem die letzte Karte 6).
   Jetzt kommen am Handy alle Karten gleich von unten, ohne seitlichen Versatz. */
@media (max-width:760px){
  html.s2-js:not(.s2-statisch) .s2-ab-schritt.li:not(.da) .s2-ab-karte,
  html.s2-js:not(.s2-statisch) .s2-ab-schritt.re:not(.da) .s2-ab-karte{transform:translate3d(0,18px,0)}
}

/* 02.11.2026 (Gründer): Titel und Inhalt der Schritt-Karten mittig; Knopf in Schritt 1 ist ein echter Link zur App */
.s2-ab-karte{text-align:center;align-items:center}
.s2-ab-titel{text-align:center;align-self:stretch}
.s2-ab-teil{align-self:stretch;justify-content:center;align-items:center;text-align:center}
.s2-ab-teil.t1 a.s2-knopf.s2-ab-start{pointer-events:auto;cursor:pointer;text-decoration:none}
.s2-ab-teil.t1 .s2-ab-maus{pointer-events:none}
.s2-ab-teil.t2{justify-content:center}
.s2-ab-teil.t3{flex-direction:column;justify-content:center;align-items:center}
.s2-ab-chips{justify-content:center}
.s2-ab-teil.t4 figure{text-align:center}
.s2-ab-teil.t5{flex-direction:column;justify-content:center;align-items:center}
.s2-ab-liste{display:inline-block;text-align:left}
.s2-ab-teil.t6{justify-items:center}
.s2-ab-teil.t6 .s2-status{justify-self:center}
.s2-ab-url{justify-content:center}

/* 02.11.2026 (Gründer, nur Handy): Titel "Wie du dein individuelles ..." weg; Nummern und senkrechte Linie links weg; die Karten laufen wie ein Kartenstapel übereinander: sie kommen beim Scrollen von unten, schieben sich über die vorige Karte und bleiben oben hängen. Desktop unverändert. */
@media (max-width:760px){
  #s2-ablauf .s2-kopf{display:none!important}
  #s2-ablauf .s2-ab-linie,#s2-ablauf .s2-ab-nr{display:none!important}
  #s2-ablauf .s2-ab{display:block!important;padding:0 0 40px!important;margin:0!important}
  #s2-ablauf .s2-ab-schritt{display:block!important;position:sticky!important;top:84px;margin:0 0 26px!important;padding:0!important}
  #s2-ablauf .s2-ab-schritt:nth-child(3){top:94px}
  #s2-ablauf .s2-ab-schritt:nth-child(4){top:104px}
  #s2-ablauf .s2-ab-schritt:nth-child(5){top:114px}
  #s2-ablauf .s2-ab-schritt:nth-child(6){top:124px}
  #s2-ablauf .s2-ab-schritt:nth-child(7){top:134px}
  #s2-ablauf .s2-ab-karte{grid-column:auto!important;opacity:1!important;transform:none!important;transition:none!important;box-shadow:0 -10px 30px rgba(13,13,16,.10),0 2px 8px rgba(13,13,16,.06)!important;border:1px solid #ececf0}
}

/* 02.11.2026 (Gründer, Korrektur, nur Handy): Der Stapel hängt in der Mitte des Bildschirms (etwa 34 % von oben). Die nächsten Karten sind erst NICHT sichtbar: jeder Schritt ist einen ganzen Bildschirm hoch, die nächste Karte kommt beim Scrollen von unten, schiebt sich über die vorige und bleibt hängen. */
@media (max-width:760px){
  #s2-ablauf .s2-ab-schritt{position:static!important;min-height:100svh;margin:0!important}
  #s2-ablauf .s2-ab-schritt:last-child{min-height:auto}
  #s2-ablauf .s2-ab-karte{position:sticky;top:34svh}
  #s2-ablauf .s2-ab-schritt:nth-child(3) .s2-ab-karte{top:calc(34svh + 10px)}
  #s2-ablauf .s2-ab-schritt:nth-child(4) .s2-ab-karte{top:calc(34svh + 20px)}
  #s2-ablauf .s2-ab-schritt:nth-child(5) .s2-ab-karte{top:calc(34svh + 30px)}
  #s2-ablauf .s2-ab-schritt:nth-child(6) .s2-ab-karte{top:calc(34svh + 40px)}
  #s2-ablauf .s2-ab-schritt:nth-child(7) .s2-ab-karte{top:calc(34svh + 50px)}
}

/* 02.11.2026 (Gründer, Korrektur 2, nur Handy): Karten bleiben ALLE hängen (der Stapel wächst), neue kommen von unten darüber. Dafür sitzt "sticky" auf dem Schritt selbst und der Abstand zur nächsten Karte (90 % Bildschirmhöhe) erzeugt den Scrollweg. */
@media (max-width:760px){
  #s2-ablauf .s2-ab-schritt{position:sticky!important;top:34svh!important;min-height:0!important;margin:0 0 90svh!important}
  #s2-ablauf .s2-ab-schritt:last-child{margin-bottom:0!important}
  #s2-ablauf .s2-ab-schritt:nth-child(3){top:calc(34svh + 10px)!important}
  #s2-ablauf .s2-ab-schritt:nth-child(4){top:calc(34svh + 20px)!important}
  #s2-ablauf .s2-ab-schritt:nth-child(5){top:calc(34svh + 30px)!important}
  #s2-ablauf .s2-ab-schritt:nth-child(6){top:calc(34svh + 40px)!important}
  #s2-ablauf .s2-ab-schritt:nth-child(7){top:calc(34svh + 50px)!important}
  #s2-ablauf .s2-ab-karte,#s2-ablauf .s2-ab-schritt:nth-child(n) .s2-ab-karte{position:static!important;top:auto!important}
}

/* 02.11.2026 (Gründer, nur Handy): alle Karten gleich hoch (Karte 2 war kürzer, die darunter sah man); die letzte Karte bleibt auch hängen (Platz darunter). */
@media (max-width:760px){
  #s2-ablauf .s2-ab-karte{min-height:270px!important;box-sizing:border-box;display:flex!important;flex-direction:column;justify-content:center}
  #s2-ablauf .s2-ab{padding-bottom:60svh!important}
}

/* 03.11.2026 (Gründer, nur Handy): Karten schneller (weniger Scrollweg), weniger Leerraum unter Karte 6. */
@media (max-width:760px){
  #s2-ablauf .s2-ab-schritt{margin-bottom:52svh!important}
  #s2-ablauf .s2-ab-schritt:last-child{margin-bottom:0!important}
  #s2-ablauf .s2-ab{padding-bottom:8svh!important}
}
@media (max-width:760px){#s2-ablauf .s2-ab{padding-bottom:5svh!important}}

/* 03.11.2026 (Gründer, nur Handy): auch Karte 6 bleibt hängen (Platz unter ihr = Scrollweg, in dem sie oben stehen bleibt). */
@media (max-width:760px){
  #s2-ablauf .s2-ab-schritt:last-child{margin-bottom:20svh!important}
  #s2-ablauf .s2-ab{padding-bottom:0!important}
}
@media (max-width:760px){#s2-ablauf .s2-ab{display:flow-root!important}}

/* 03.11.2026 (Gründer): Karte 6 muss ÜBER den anderen hängen bleiben. Ursache: der Abstand zwischen den Karten lag als margin-bottom an jeder Karte und löste die vorigen Karten zu früh. Jetzt liegt er als margin-top an der FOLGENDEN Karte. */
@media (max-width:760px){
  #s2-ablauf .s2-ab-schritt{margin-bottom:0!important}
  #s2-ablauf .s2-ab-schritt+.s2-ab-schritt{margin-top:52svh!important}
  #s2-ablauf .s2-ab-schritt:last-child{margin-bottom:24svh!important}
}
/* Ursache "letzte Karte hängt nicht": ein klebendes letztes Kind hat unter sich keinen Platz im Container. Dieses leere Stück unter Karte 6 ist der Weg, in dem sie oben hängen bleibt. */
@media (max-width:760px){
  #s2-ablauf .s2-ab-schritt:last-child{margin-bottom:0!important}
  #s2-ablauf .s2-ab::after{content:"";display:block;height:24svh}
}

/* ===== SEKTION vorlage ===== */
/* DER PERFEKTE WHATSAPP-NEWSLETTER (14.10.2026): Scroll-Bühne. --p (0..1) kommt von kern2/basis.js. --e = Auseinanderziehen, --l = Striche und Texte.
   Anfang: ein echtes WhatsApp-Template, gerade, ohne Schräglage. Danach ziehen sich Header, Text und Button mit kleinem Abstand auseinander. */
.s2-vorlage.s2-sek{padding-top:clamp(72px,9vw,140px);padding-bottom:clamp(24px,4vw,60px)}
.s2-vorlage .s2-kopf{text-align:center;align-items:center;margin-bottom:clamp(8px,2vw,28px)}
.s2-vorlage .s2-kopf .s2-h2{max-width:min(100%,880px)}
.s2-vorlage .s2-buehne{
  /* Zeitplan der ganzen Geschichte (p = 0 bis 1). Einstieg (Satz, Zoom, Übergabe ins Template) steuert vorlage.js. */
  --g:clamp(0,calc((var(--p) - .30) * 12.5),1);        /* Text und Button des Templates erscheinen um das Bild herum (0,30 bis 0,38) */
  --e1:clamp(0,calc((var(--p) - .40) * 8.3),1);        /* Schichten ziehen sich auseinander (0,40 bis 0,52) */
  --f:clamp(0,calc((var(--p) - .72) * 16),1);          /* ZUERST verschwinden Striche und Texte (0,72 bis 0,78) */
  --c:clamp(0,calc((var(--p) - .78) * 11),1);          /* DANN kommen die Schichten zusammen (0,78 bis 0,87) */
  --e:calc(var(--e1) * (1 - var(--c)));
  --m:clamp(0,calc((var(--p) - .87) * 12.5),1)}        /* DANN fliegt das Template nach links aus dem Bild (0,87 bis 0,95) */

.s2-vl-buehne{position:relative;display:flex;justify-content:center;width:100%}
.s2-vl-stapel{--sk:1;position:relative;width:420px;height:812px;transform-origin:50% 50%;
  transform:translate3d(calc(var(--m) * -110vw),0,0) scale(calc(var(--sk) * (1 + (1 - var(--e1)) * .05)));will-change:transform}
.s2-vl{position:absolute;left:0;width:100%;--l:clamp(0,calc((var(--p) - (.48 + var(--i) * .05)) * 9),1);--lv:calc(var(--l) * (1 - var(--f)));
  transform:translate3d(0,calc(var(--e) * var(--dy)),0)}
/* Ruhelage = echtes Template (Header+Text eine Blase, Button direkt darunter); Endlage = 36 px Abstand */
.s2-vl.l1{top:32px;--dy:-32px}.s2-vl.l2{top:242px;--dy:2px}.s2-vl.l3{top:725px;--dy:33px}

/* Aussehen wie ein echtes WhatsApp-Template (Blase 12 px, Bild eingerückt, Button als eigene Zeile) */
.s2-vl-karte{position:relative;background:#fff;font-family:var(--s2-sans);color:#111b21;overflow:hidden}
.s2-vl-karte::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 22px 46px rgba(13,13,16,.18),0 2px 8px rgba(13,13,16,.08);opacity:var(--e)}
.s2-vl-karte{box-shadow:0 1px 1px rgba(13,13,16,.1),0 0 0 1px rgba(13,13,16,.04)}
.s2-vl.l1 .s2-vl-karte{height:210px;padding:4px;border-radius:14px 14px calc(var(--e) * 14px) calc(var(--e) * 14px);background:#fff}
.s2-vl.l1 .s2-vl-karte img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block;border-radius:10px 10px calc(var(--e) * 10px) calc(var(--e) * 10px);}
.s2-vl-play{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.s2-vl-play svg{width:27px;height:27px;margin-left:3px;color:#0d0d10}
.s2-vl.l2 .s2-vl-karte.text{height:480px;padding:13px 15px 12px;display:grid;gap:8px;align-content:start;border-radius:0 0 14px 14px;border-radius:0 0 calc(var(--e) * 14px + (1 - var(--e)) * 14px) calc(var(--e) * 14px + (1 - var(--e)) * 14px)}
.s2-vl.l2 .s2-vl-karte.text{border-radius:calc(var(--e) * 14px) calc(var(--e) * 14px) 14px 14px}
.s2-vl-karte.text p{margin:0;font:400 14.2px/1.33 var(--s2-sans);color:#111b21}
.s2-vl-karte.text b{font-weight:700}
.s2-vl.l3 .s2-vl-karte.knopf{height:54px;display:flex;align-items:center;justify-content:center;gap:9px;font:600 16px/1 var(--s2-sans);color:#1d6fcf;border-radius:14px}
.s2-vl-karte.knopf svg{width:18px;height:18px}

/* Strich, Punkt, Titel, Erklärung (wie beim Burger), Striche kurz */
.s2-vl-punkt{position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#fff;border:3px solid #0d0d10;z-index:3;opacity:var(--lv);transform:scale(var(--lv))}
.s2-vl-linie{position:absolute;top:50%;height:2px;margin-top:-1px;width:64px;background:#0d0d10;transform:scaleX(var(--lv))}
.s2-vl.re .s2-vl-punkt{right:-6px}.s2-vl.re .s2-vl-linie{left:calc(100% + 6px);transform-origin:0 50%}
.s2-vl.li .s2-vl-punkt{left:-6px}.s2-vl.li .s2-vl-linie{right:calc(100% + 6px);transform-origin:100% 50%}
.s2-vl-label{position:absolute;top:50%;width:300px;opacity:var(--lv);transform:translate3d(calc((1 - var(--lv)) * 18px),-50%,0)}
.s2-vl.re .s2-vl-label{left:calc(100% + 86px)}
.s2-vl.li .s2-vl-label{right:calc(100% + 86px);text-align:right;transform:translate3d(calc((1 - var(--lv)) * -18px),-50%,0)}
.s2-vl-label .s2-h3{margin:0 0 8px;font-size:36px;line-height:1.02;letter-spacing:-.015em}
.s2-vl-label p{margin:0;color:var(--s2-grau);font-size:16px;line-height:1.5}
.s2-vl.li .s2-vl-label p{margin-left:auto}

/* ---------- Tablet / Handy: keine Bühne, Template als Ganzes, Erklärungen darunter ---------- */
@media (max-width:760px){
  .s2-vorlage .s2-buehne{height:auto;--p:1}
  .s2-vorlage .s2-buehne-innen{position:relative;height:auto;overflow:visible;padding-top:0}
  .s2-vl-stapel{width:min(100%,400px);height:auto;transform:none;display:grid;gap:26px;margin-inline:auto}
  .s2-vl{position:relative;top:auto!important;transform:none;opacity:1!important}
  .s2-vl .s2-vl-karte{border-radius:14px!important}.s2-vl-karte::after{opacity:1}
  .s2-vl.l1 .s2-vl-karte img{transform:none;border-radius:10px!important}
  .s2-vl-punkt,.s2-vl-linie{display:none}
  .s2-vl-label{position:static;width:auto;opacity:1;transform:none!important;text-align:left!important;padding:14px 4px 0}
  .s2-vl-label .s2-h3{font-size:28px}
  .s2-vl.li .s2-vl-label p{margin-left:0}
}
html.s2-statisch .s2-vorlage .s2-buehne{--p:1}



/* ---------- Einstieg (Idee 3): Satz wird schwarz, Bilder bekommen Farbe, Zoom ins Newsletter-Bild ---------- */
.s2-vorlage .s2-buehne-innen{isolation:isolate}
.s2-gs{position:absolute;inset:0;display:grid;place-items:center;padding:calc(var(--s2-leiste,76px) + 10px) clamp(20px,6vw,120px) 40px;z-index:2;pointer-events:none}
.s2-gs-satz{margin:0;max-width:1080px;text-align:center;font:400 clamp(36px,4.4vw,70px)/1.14 var(--s2-serif);letter-spacing:-.02em;color:#c6c6cc;text-wrap:balance}
.s2-gs-satz .z{transition:color .25s linear}
.s2-gs-satz .z.an{color:var(--s2-schwarz)}
.s2-gs-bild{display:inline-block;vertical-align:-.12em;width:1.7em;height:.95em;border-radius:.22em;overflow:hidden;margin:0 .06em;background:#e8e8ec;box-shadow:0 6px 18px rgba(13,13,16,.14);filter:grayscale(1);opacity:.55;transition:filter .5s ease,opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1);transform:scale(.92)}
.s2-gs-bild img,.s2-gs-bild svg{width:100%;height:100%;object-fit:cover;display:block}
.s2-gs-bild.rund{width:.95em;border-radius:50%}
.s2-gs-bild.wa{width:.95em;border-radius:.26em;background:#fff;padding:.08em}
.s2-gs-bild.an{filter:none;opacity:1;transform:scale(1)}
.s2-gs-flug{position:absolute;left:0;top:0;width:10px;height:10px;object-fit:cover;object-position:50% 62%;z-index:3;opacity:0;pointer-events:none;will-change:left,top,width,height}
/* Template erst ab der Übergabe sichtbar: Bild-Schicht übernimmt vorlage.js, Text und Button blenden mit --g ein */
.s2-vorlage .s2-vl.l1{opacity:var(--hk,1)}
.s2-vorlage .s2-vl.l2,.s2-vorlage .s2-vl.l3{opacity:var(--g)}

/* Endzustand (Bildschirmfotos) und Handy: Satz fertig schwarz oben, Template zerlegt mit Strichen darunter */
html.s2-statisch .s2-vorlage .s2-buehne{--p:.70!important}
/* basis.css macht die Bühne zur Zeile (flex); im Endzustand und auf dem Handy stehen Satz und Template untereinander */
html.s2-statisch .s2-vorlage .s2-buehne-innen{flex-direction:column;align-items:center}
html.s2-statisch .s2-gs{position:relative;inset:auto;padding:40px 20px 56px}
html.s2-statisch .s2-gs-flug{display:none}
html.s2-statisch .s2-gs-satz .z{color:var(--s2-schwarz)}
html.s2-statisch .s2-gs-bild{filter:none;opacity:1;transform:none}
@media (max-width:760px){
  .s2-vorlage .s2-buehne-innen{flex-direction:column;align-items:stretch}
  .s2-gs{position:relative;inset:auto;padding:24px 16px 48px}
  .s2-vl.l2 .s2-vl-karte.text{height:auto}
  .s2-gs-satz{font-size:34px}
  .s2-gs-satz .z{color:var(--s2-schwarz)}
  .s2-gs-bild{filter:none;opacity:1;transform:none}
  .s2-gs-flug{display:none}
  .s2-vorlage .s2-vl.l1,.s2-vorlage .s2-vl.l2,.s2-vorlage .s2-vl.l3{opacity:1!important}
}
/* 15.10.2026 (Gründer): Abstand Logo-Band bis "Mit SmartChat ..." etwa 30 % kleiner (464 -> ca. 325 px bei 1440 x 900) */
.s2-sek.s2-vorlage{padding-top:0}
.s2-vorlage .s2-buehne{margin-top:-10px}

/* 15.10.2026 (Gründer): echtes WhatsApp-Logo statt Wort "WhatsApp", Satz kleiner und breiter, höchstens 4 Zeilen */
.s2-gs-bild.wa{width:.95em;height:.95em;padding:0;background:none;border-radius:.24em}
.s2-gs-bild.wa img{border-radius:.24em}
.s2-gs-satz{max-width:1240px;font-size:clamp(30px,3.6vw,56px)}
/* 15.10.2026 (Gründer): Schriftgröße wieder wie vorher (bis 70 px), Breite 1240 px */
.s2-gs-satz{max-width:1240px;font-size:clamp(36px,4.4vw,70px)}

/* ===== 15.10.2026 (Gründer): vier Bildchen im Satz: SmartChat-Logo (Zoom-Stelle), Timer bei 60 Sekunden, WhatsApp-Logo, Chart nach oben bei Umsatz.
   Zoom: aus dem Logo wird eine weiße Fläche mit dem Logo in der Mitte, sie landet als Header (weißes Bild mit Logo) im Template ===== */
.s2-gs-flug{display:grid;place-items:center;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--s2-linie)}
.s2-gs-flug .s2-kugel{flex:none}
.s2-vl-kopfbild{width:100%;height:100%;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px var(--s2-linie) inset;
  border-radius:10px 10px calc(var(--e) * 10px) calc(var(--e) * 10px)}
.s2-vl-kopfbild .s2-kugel{--g:81px}
.s2-gs-bild.ic{width:.95em;height:.95em;padding:.06em;background:#fff;border-radius:.24em}
.s2-gs-bild.ic svg{width:100%;height:100%}
.s2-gs-bild.timer .ring{stroke-dasharray:81.7;stroke-dashoffset:81.7;transition:stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1) .2s}
.s2-gs-bild.timer.an .ring{stroke-dashoffset:0}
.s2-gs-bild.timer .zeiger{transform-origin:20px 23px;transition:transform 1.4s cubic-bezier(.22,1,.36,1) .2s}
.s2-gs-bild.timer.an .zeiger{transform:rotate(360deg)}
.s2-gs-bild.chart .linie{stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset 1s ease .2s}
.s2-gs-bild.chart.an .linie{stroke-dashoffset:0}
html.s2-statisch .s2-gs-bild.timer .ring,html.s2-statisch .s2-gs-bild.chart .linie{stroke-dashoffset:0}
@media (max-width:760px){.s2-gs-bild.timer .ring,.s2-gs-bild.chart .linie{stroke-dashoffset:0}}

/* ===== 15.10.2026 abends (Gründer): echtes Logo statt Farbbild.
   Kreis wächst rund bis er den ganzen Bildschirm füllt, der weiße Stern verblasst dabei und ist bei voller Fläche weg.
   Dann zieht es sich zum Header zusammen: nur der Teil, der auch im Logo zu sehen ist, mit weißem Schriftzug.
   Bildchen: Apple-Emojis (Stoppuhr, Diagramm), WhatsApp rund, alle mit leichtem Schatten. ===== */
.s2-gs-bild.rund.ziel{background:none;padding:0;box-shadow:0 .07em .2em rgba(240,142,198,.45),0 .02em .05em rgba(13,13,16,.14)}
.s2-gs-bild.rund.ziel img{border-radius:50%}
.s2-gs-bild.wa{border-radius:50%;background:none;box-shadow:0 .07em .2em rgba(37,207,67,.38),0 .02em .05em rgba(13,13,16,.14)}
.s2-gs-bild.wa img{border-radius:50%}
.s2-gs-bild.emo{width:auto;height:auto;overflow:visible;background:none;box-shadow:none;border-radius:0;margin:0 .05em;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:.9em;line-height:1;vertical-align:-.04em}
.s2-gs-bild.emo.an,html.s2-statisch .s2-gs-bild.emo{filter:drop-shadow(0 .05em .07em rgba(13,13,16,.24))}
@media (max-width:760px){.s2-gs-bild.emo{filter:drop-shadow(0 .05em .07em rgba(13,13,16,.24))}}
/* Flug */
.s2-gs-flug{display:block;overflow:hidden;background:none;box-shadow:none}
.lk-kreis{position:absolute;left:0;top:0;width:10px;height:10px}
.lk-kreis img{position:absolute;inset:0;width:100%;height:100%;display:block}
.lk-stern{opacity:1}
.s2-gs-flug .lk-marke{opacity:0}
.lk-marke{position:absolute;left:50%;top:50%;width:34%;transform:translate(-50%,-50%);z-index:1}
.lk-marke img{display:block;width:100%;height:auto}
/* Header im Template: Mitte des Logos, Kreis deckt das Rechteck gerade ab */
.s2-vl-kopfbild{position:relative;overflow:hidden;background:none;box-shadow:none}
.lk-kopf{position:absolute;inset:0;display:block;overflow:hidden;container-type:size;border-radius:inherit}
.s2-vl-kopfbild .lk-kopf img.lk-bild{position:absolute;left:50%;top:50%;width:125cqw;height:125cqw;max-width:none;max-height:none;object-fit:fill;transform:translate(-50%,-50%)}
@supports (width:hypot(1px,1px)){.s2-vl-kopfbild .lk-kopf img.lk-bild{width:calc(hypot(100cqw,100cqh) * 1.03);height:calc(hypot(100cqw,100cqh) * 1.03)}}
/* Template-Text und Button erst nach der Landung */
.s2-vorlage .s2-buehne{--g:clamp(0,calc((var(--p) - .355) * 12.5),1)}

/* 15.10.2026 spät (Gründer): WhatsApp-Logo wieder eckig, Rundung 14 px wie die Knöpfe */
.s2-gs-bild.wa,.s2-gs-bild.wa img{border-radius:.22em}
/* Chart-Emoji ist ein volles Quadrat und wirkt größer als die Stoppuhr, deshalb etwas kleiner */
.s2-gs-bild.emo.chart{font-size:.8em;vertical-align:0}
/* 15.10.2026 spät (Gründer): Stoppuhr ein kleines Stück höher; Schatten des Logos bleibt beim Zoom-Start (setzt vorlage.js) */
.s2-gs-bild.emo.timer{vertical-align:.01em}
.lk-kreis{border-radius:50%}
/* Version 2 ohne Serifen: serifenlose Schrift läuft breiter, deshalb etwas kleiner, damit der Satz bei 4 Zeilen bleibt */
html[data-schrift="sans"] .s2-gs-satz{font-size:clamp(27px,3.15vw,49px)}
/* 15.10.2026 spät (Gründer): weißer Rand um das Newsletter-Bild weg, das Bild füllt die ganze Karte */
.s2-vl.l1 .s2-vl-karte{padding:0;background:none}
.s2-vl-kopfbild{border-radius:14px 14px calc(var(--e) * 14px) calc(var(--e) * 14px)}

/* ===== 16.10.2026 (Gründer): Header = Video mit Glas-Play-Knopf statt Logo-Schriftzug. Neuer Ablauf mit 10 Schritten (alte Zeiten x 0,8):
   Erklärungen verblassen (0,56 bis 0,61) -> Text und Knopf verblassen gleichzeitig und langsam, ohne Bewegung (0,60 bis 0,70)
   -> das Video wächst aus dem Header in die Mitte und rundet ab (0,68 bis 0,84, vorlage.js) -> stehen lassen bis zum Ende. ===== */
.s2-vorlage .s2-buehne{
  --g:clamp(0,calc((var(--p) - .284) * 15.6),1);
  --e1:clamp(0,calc((var(--p) - .32) * 10.4),1);
  --f:clamp(0,calc((var(--p) - .56) * 20),1);
  --t:clamp(0,calc((var(--p) - .60) * 10),1);
  --c:0;--m:0}
.s2-vl{--l:clamp(0,calc((var(--p) - (.384 + var(--i) * .04)) * 11.25),1)}
.s2-vorlage .s2-vl.l2,.s2-vorlage .s2-vl.l3{opacity:calc(var(--g) * (1 - var(--t)))}
.s2-vl-karte::after{opacity:calc(var(--e) * (1 - var(--t)))}

/* Play-Knopf (17.10.2026, Gründer: "wie idealeinkommen.de"): großer runder, dunkel durchscheinender Kreis mit Unschärfe dahinter,
   darin ein großes, massives, weißes Dreieck mit leicht runden Ecken. Kein Glasrand, kein Glanz. Gilt für Header, fliegendes Logo und großes Video. */
.s2-glasplay{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:50%;color:#fff;
  background:rgba(20,20,20,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.s2-glasplay::before{content:none}
.s2-glasplay svg{display:block;width:56%;height:56%}
.lk-marke.lk-play{width:clamp(48px,22%,104px)}
.s2-vl-kopfbild{cursor:pointer}

/* Das wachsende Video */
.s2-vl-video{position:absolute;left:0;top:0;width:10px;height:10px;z-index:4;opacity:0;overflow:hidden;border-radius:14px;
  box-shadow:0 30px 80px rgba(13,13,16,.22),0 6px 18px rgba(13,13,16,.1);will-change:left,top,width,height}
.s2-vl-video .lk-kopf{border-radius:inherit}
.s2-vl-video .lk-kopf img.lk-bild{position:absolute;left:50%;top:50%;width:calc(hypot(100cqw,100cqh) * 1.03);height:calc(hypot(100cqw,100cqh) * 1.03);max-width:none;transform:translate(-50%,-50%)}
.s2-vl-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;pointer-events:none}
.s2-vl-video.spielt .s2-vl-film{opacity:1;pointer-events:auto}
.s2-vl-video.spielt .s2-glasplay.gross{opacity:0;pointer-events:none}
button.s2-glasplay.gross{position:absolute;left:50%;top:50%;width:clamp(72px,13%,136px);border:0;padding:0;cursor:pointer;transform:translate(-50%,-50%);
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s ease,background .3s ease}
button.s2-glasplay.gross:hover{transform:translate(-50%,-50%) scale(1.05);background:rgba(20,20,20,.65)}
button.s2-glasplay.gross:focus-visible{outline:2px solid #fff;outline-offset:3px}
button.s2-glasplay.gross:active{transform:translate(-50%,-50%) scale(.97)}
.s2-vl-hinweis{position:absolute;left:50%;bottom:22px;transform:translate(-50%,10px);padding:10px 16px;border-radius:999px;
  font:500 15px/1 var(--s2-sans);color:#fff;background:rgba(13,13,16,.38);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.s2-vl-hinweis.an{opacity:1;transform:translate(-50%,0)}

/* Handy und Endzustand: kein Wachsen, das Template zeigt den Play-Knopf im Header */
@media (max-width:760px){.s2-vl-video{display:none}.s2-vorlage .s2-vl.l2,.s2-vorlage .s2-vl.l3{opacity:1!important}}
html.s2-statisch .s2-vl-video{display:none}
html.s2-statisch .s2-vorlage .s2-buehne{--p:.55!important}

/* ===== 18.10.2026 (Gründer: "überall bleibt man hängen", nur Technik): --p steht pro Bild nur noch am Stapel (basis.js, data-p-ziel am .s2-buehne),
   nicht mehr an der ganzen Bühne. Deshalb rechnet der Stapel die Zeitplan-Werte selbst, mit genau denselben Formeln wie oben an .s2-buehne (Stand 16.10.).
   Im Endzustand (?statisch=1) und am Handy erbt der Stapel --p von der Bühne wie bisher. ===== */
.s2-vorlage .s2-vl-stapel{
  --g:clamp(0,calc((var(--p) - .284) * 15.6),1);
  --e1:clamp(0,calc((var(--p) - .32) * 10.4),1);
  --f:clamp(0,calc((var(--p) - .56) * 20),1);
  --t:clamp(0,calc((var(--p) - .60) * 10),1);
  --c:0;--m:0;
  --e:calc(var(--e1) * (1 - var(--c)))}
/* will-change: nur so lange das Element sich wirklich bewegt (vorher dauerhaft left/top/width/height, das bringt nichts) */
.s2-gs-flug,.s2-vl-video{will-change:auto}

/* ===== 18.10.2026 Runde 3 (Gründer: Halt am Ende zu lang): Bühne 420vh -> 364vh, die Zeiten oben bleiben in der alten Skala.
   --pv = alter Zeitplan aus dem --p der neuen Bühne (gleiche Umrechnung wie zeitplan() in vorlage.js, Zweig ab p 0,248; der Stapel bewegt sich erst ab 0,284).
   Nur am Desktop mit Bühne. Endzustand (?statisch=1, Bewegung reduziert) und Handy rechnen wie bisher mit --p. ===== */
.s2-vorlage .s2-vl-stapel{--pv:var(--p)}
@media (min-width:761px){html:not(.s2-statisch) .s2-vorlage .s2-vl-stapel{--pv:calc(var(--p) * .866667 + .032)}}
.s2-vorlage .s2-vl-stapel{
  --g:clamp(0,calc((var(--pv) - .284) * 15.6),1);
  --e1:clamp(0,calc((var(--pv) - .32) * 10.4),1);
  --f:clamp(0,calc((var(--pv) - .56) * 20),1);
  --t:clamp(0,calc((var(--pv) - .60) * 10),1)}
.s2-vorlage .s2-vl{--l:clamp(0,calc((var(--pv) - (.384 + var(--i) * .04)) * 11.25),1)}

/* ===== 18.10.2026 HANDY mit Bewegung (vorlage.js setzt .vl-h nur bis 760 px, nie im Endzustand). Desktop unverändert. =====
   Satz klebt (100svh) und wird Wort für Wort schwarz, Logo wächst zur Fläche, Fläche landet als Header im Template (das von unten kommt),
   dann ziehen sich die Schichten mit Punkt, Linie und Erklärung auseinander, danach wächst das Video auf volle Breite. */
.s2-vl-hf{display:none}
@media (max-width:760px){
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h .s2-buehne-innen{display:flex;flex-direction:column;align-items:stretch}
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h .s2-gs{order:0;inset:auto;position:sticky;top:0;height:100vh;height:100svh;z-index:3;
    display:grid;place-items:center;padding:calc(var(--s2-leiste) + 4px) 18px 24px;pointer-events:none}
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h .s2-gs-satz .z{color:#c6c6cc}
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h .s2-gs-satz .z.an{color:var(--s2-schwarz)}
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h .s2-gs-bild:not(.an){filter:grayscale(1);opacity:.55;transform:scale(.92)}
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h .s2-rahmen{order:1;position:relative;z-index:2;margin-top:calc(5svh + 88px)}
  /* fliegende Fläche (im klebenden Satz) */
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h .s2-vl-hf{display:block;position:absolute;left:0;top:0;width:100%;height:100%;visibility:hidden;pointer-events:none;z-index:3}
  .s2-vl-hf-rahmen{position:absolute;left:0;top:0;overflow:hidden;transform-origin:0 0}
  .s2-vl-hf-kreis,.s2-vl-hf-stern{position:absolute;left:0;top:0;max-width:none!important;border-radius:50%;transform-origin:50% 50%}
  .s2-vl-hf-marke{position:absolute;left:0;top:0;width:104px;height:104px;transform-origin:50% 50%;opacity:0}
  .s2-vl-hf-marke .s2-glasplay{width:104px}
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h.vl-h-fliegt :is(.s2-vl-hf-rahmen,.s2-vl-hf-kreis,.s2-vl-hf-stern,.s2-vl-hf-marke){will-change:transform}
  /* Schichten: Punkt am Kartenrand, Linie läuft neben der Erklärung nach unten */
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h .s2-vl{display:grid;grid-template-columns:16px 12px minmax(0,1fr);align-items:start}
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h .s2-vl-karte{grid-column:1/-1;grid-row:1}
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h .s2-vl-punkt{display:block;position:relative;grid-column:2;grid-row:2;right:auto;left:auto;top:auto;margin:-6px 0 0;z-index:3;transform-origin:50% 50%}
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h .s2-vl-linie{display:block;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-origin:50% 0}
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h .s2-vl-label{grid-column:3;grid-row:2/4;padding:12px 0 0 14px}
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h .s2-vl-label .s2-h3{font-size:26px}
  /* zu = ein Template: Header und Text bilden eine Blase */
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h .s2-vl .s2-vl-karte,html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h .s2-vl-kopfbild{transition:border-radius 350ms var(--s2-kurve)}
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h:not(.vl-h-auf) .s2-vl.l1 .s2-vl-karte,
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h:not(.vl-h-auf) .s2-vl.l1 .s2-vl-kopfbild{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h:not(.vl-h-auf) .s2-vl.l2 .s2-vl-karte{border-top-left-radius:0!important;border-top-right-radius:0!important}
  /* Video unter dem Template, wächst auf volle Breite */
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h .s2-vl-video{display:block!important;order:2;position:relative!important;left:auto!important;top:auto!important;
    width:100%!important;height:auto!important;aspect-ratio:16/9;margin:64px 0 0;border-radius:14px!important;opacity:1;transform-origin:50% 50%;z-index:2}
}

/* ===== 18.10.2026 Handy-Bugrunde 2 (nur bis 760 px mit Bewegung, Desktop unverändert) =====
   1) Riesige leere Fläche (ca. 300 px) zwischen Schritt 6 und "SmartChat AI analysiert ...": der Satz steht mittig in einer klebenden,
      bildschirmhohen Fläche, ihr oberer Teil war leer. Die Bühne rückt am Handy so weit nach oben, dass der Satz ca. 130 px unter der
      letzten Karte beginnt (Fläche bleibt durchsichtig und klickfrei, Ablauf und Zeitpunkte der Animation relativ zum Satz unverändert).
      Rechnung: Satz-Oberkante in der Fläche = 50svh + 28 px - halbe Satzhöhe (ca. 165 px); minus 98 px gewünschter Rest. Nie positiv.
   2) Harte graue Kante unter dem Video: sein großer Schatten (80 px weich) wurde von der weißen Fläche der nächsten Sektion abgeschnitten.
      Am Handy kürzerer Schatten und etwas mehr Platz darunter. */
@media (max-width:760px){
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h .s2-buehne{margin-top:min(-10px,calc(225px - 50vh));margin-top:min(-10px,calc(225px - 50svh))}
  html.s2-js:not(.s2-statisch) .s2-vorlage.vl-h .s2-vl-video{box-shadow:0 14px 28px -12px rgba(13,13,16,.28),0 3px 10px rgba(13,13,16,.08)}
  /* durchsichtig: die nach oben gerückte Sektion darf die letzte Ablauf-Karte nicht mit ihrem weißen Grund zudecken (Seite ist ohnehin weiß) */
  html.s2-js:not(.s2-statisch) .s2-sek.s2-vorlage.vl-h{padding-bottom:40px;background:transparent}
}

/* 02.11.2026: schlichter Video-Player mobil und statisch */
.s2-vl-mob{display:none;margin:28px auto 0;padding:0 16px;max-width:640px}
.s2-vl-mob video{display:block;width:100%;aspect-ratio:16/10;border-radius:18px;background:#0d0d10;object-fit:cover}
@media (max-width:760px){.s2-vl-mob{display:block}}
html.s2-statisch .s2-vl-mob{display:block}

/* ===== 02.11.2026 c (Gründer): Standbild (Poster) im Video-Fenster, weicher Übergang aus dem Farbverlauf ===== */
.s2-vl-standbild{position:absolute;inset:0;z-index:1;opacity:var(--sb,0);pointer-events:none;transition:opacity 500ms ease}
.s2-vl-standbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.s2-vl-standbild::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,13,16,.55) 0,rgba(13,13,16,.12) 30%,rgba(13,13,16,0) 55%)}
.s2-vl-etikett{position:absolute;left:20px;bottom:16px;z-index:1;font:600 15px/1 var(--s2-sans);color:#fff;letter-spacing:.005em}
.s2-vl-video .s2-glasplay.gross{z-index:2}
.s2-vl-video.spielt .s2-vl-standbild{opacity:0!important}

/* 02.11.2026 (Gründer, nur Handy): der graue Satz "SmartChat AI analysiert dein gesamtes Unternehmen ..." und das Template-Beispiel (Header, Text, Button) sind weg; es bleibt nur das Video (Player). Desktop unverändert. */
@media (max-width:760px){
  #s2-vorlage .s2-buehne{display:none!important}
  #s2-vorlage{min-height:0!important;height:auto!important;padding:48px 0 8px!important}
  #s2-vorlage .s2-vl-mob{display:block!important}
}

/* 03.11.2026 (Gründer, nur Handy): Abstand unter dem Video so groß wie darüber. */
@media (max-width:760px){#s2-vorlage{padding:24px 0 48px!important}}
@media (max-width:760px){#s2-vorlage{padding:8px 0 48px!important}}

/* ===== SEKTION fenster ===== */
/* ALLES IN EINER APP (bis 16.10. "Alles im Blick", Idee 8, hell): Schrift als Fenster, Zoom hinein. Danach (Gründer 14.10. spät, Vorbild Solva):
   ein ruhiges Feld mit 4 Reitern oben, links Titel + 3 Punkte + Knopf, rechts Vorschau auf weicher Bildfläche. */
.s2-fe-buehne{position:relative;height:calc(100vh + var(--s2-schritte,3) * var(--s2-weg,80vh))}   /* wie .s2-buehne in kern2, aber ohne --p (17.10.2026) */
html.s2-statisch .s2-fe-buehne{height:auto}
.s2-fenster .s2-buehne-innen{padding-top:0;display:block;background:#fff}   /* 17.10.2026: deckender Grund, sonst färbt der Mischmodus der Maske dunkel */
.s2-fe-app{position:absolute;inset:0;transform-origin:50% 50%}   /* transform, Ursprung und Deckkraft setzt fenster.js direkt (17.10.2026) */
.s2-fe-grund{position:absolute;inset:0;border-radius:0;min-height:0;opacity:0}
/* 17.10.2026: Schwarz hinter den Buchstaben, damit die Überschrift schwarz ist; blendet beim Hineinfahren zur Farbfläche über */
.s2-fe-schwarz{position:absolute;inset:0;background:var(--s2-schwarz);opacity:0;pointer-events:none}
.s2-fe-unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.s2-fe-app-innen{position:relative;height:100%;max-width:calc(1200px + 2 * var(--s2-rand));margin-inline:auto;padding:var(--s2-leiste) var(--s2-rand) 0;
  display:grid;grid-template-columns:minmax(0,1fr);place-items:center}

/* Feld */
.s2-fe-panel{width:100%;border-radius:28px;background:#f6f6f8;box-shadow:0 0 0 1px var(--s2-linie);padding:8px;
  transform-origin:50% 50%}
.s2-fe-reiterleiste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:6px 6px 14px}
.s2-fe-reiter{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border:0;border-radius:14px;background:transparent;
  font:500 15.5px/1 var(--s2-sans);color:var(--s2-grau);cursor:pointer;overflow:hidden;transition:background 300ms var(--s2-kurve),color 300ms,box-shadow 300ms}
.s2-fe-reiter .s2-ic{width:18px;height:18px}
.s2-fe-reiter:hover{color:var(--s2-schwarz)}
.s2-fe-reiter.an{background:#fff;color:var(--s2-schwarz);box-shadow:0 0 0 1px var(--s2-linie),0 1px 2px rgba(20,20,30,.04)}
.s2-fe-reiter:focus-visible{outline:2px solid var(--s2-schwarz);outline-offset:2px}
.s2-fe-reiter .lauf{position:absolute;left:18px;right:18px;bottom:6px;height:2px;border-radius:2px;background:var(--s2-schwarz);transform:scaleX(0);transform-origin:0 50%;opacity:0}
.s2-fe-reiter.an.lauft .lauf{opacity:.85;animation:s2feLauf var(--fe-takt,6s) linear forwards}
@keyframes s2feLauf{from{transform:scaleX(.001)}to{transform:scaleX(1)}}

.s2-fe-koerper{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.55fr);gap:12px;background:#fff;border-radius:22px;box-shadow:0 0 0 1px var(--s2-linie);padding:12px}
.s2-fe-links{position:relative;padding:28px 18px 18px 26px;display:grid;grid-template-rows:1fr auto;gap:28px;min-height:clamp(420px,52vh,500px)}
.s2-fe-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)}
.s2-fe-text.an{opacity:1;transform:none;pointer-events:auto;transition-delay:120ms}
.s2-fe-titel{margin:0;font:400 clamp(30px,2.3vw + 4px,40px)/1.08 var(--s2-serif);letter-spacing:-.01em;color:var(--s2-schwarz);max-width:16ch}
.s2-fe-punkte{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:22px}
.s2-fe-punkte li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start}
.s2-fe-punkte .s2-ic{width:20px;height:20px;margin-top:2px;color:var(--s2-schwarz)}
.s2-fe-punkte b{display:block;font:500 17px/1.3 var(--s2-sans);color:var(--s2-schwarz)}
.s2-fe-punkte p{margin:5px 0 0;font-size:14.5px;line-height:1.5;color:var(--s2-grau)}
.s2-fe-knopf{grid-row:2;width:100%}

/* Vorschau rechts: weiche Bildfläche, darin ein App-Fenster */
.s2-fe-rechts{position:relative;border-radius:16px;min-height:0;overflow:hidden}
.s2-fe-vs{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(22px,3vw,40px);opacity:0;transform:translate3d(0,16px,0) scale(.985);pointer-events:none;
  transition:opacity 450ms var(--s2-kurve),transform 700ms var(--s2-kurve)}
.s2-fe-vs.an{opacity:1;transform:none;transition-delay:100ms}
.s2-fe-fenster{width:100%;max-width:600px;background:#fff;border-radius:14px;box-shadow:0 0 0 1px rgba(20,20,40,.06),0 20px 50px -24px rgba(20,20,40,.35);overflow:hidden;font-size:13px}
.s2-fe-f-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;height:46px;padding:0 16px;border-bottom:1px solid var(--s2-linie)}
.s2-fe-f-kopf b{font-size:14.5px;color:var(--s2-schwarz)}
.s2-fe-f-kopf .such{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:8px;background:var(--s2-flaeche);color:var(--s2-grau-hell);font-size:12px}
.s2-fe-f-kopf .such .s2-ic{width:13px;height:13px}
.av{width:30px;height:30px;border-radius:50%;flex:none;display:inline-grid;place-items:center;background:var(--s2-flaeche);font:600 12px/1 var(--s2-sans);font-style:normal;color:var(--s2-tinte)}

/* Postfach */
.s2-fe-pf{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);height:330px}
.s2-fe-pf-liste{list-style:none;margin:0;padding:6px;border-right:1px solid var(--s2-linie)}
.s2-fe-pf-liste li{display:flex;align-items:center;gap:9px;padding:9px 8px;border-radius:10px}
.s2-fe-pf-liste li.an{background:var(--s2-flaeche)}
.s2-fe-pf-liste li>div{flex:1;min-width:0}
.s2-fe-pf-liste b{display:block;font-size:13px;color:var(--s2-schwarz)}
.s2-fe-pf-liste small{display:block;font-size:12px;color:var(--s2-grau);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2-fe-pf-liste .zeit{font-size:11px;color:var(--s2-grau-hell);align-self:flex-start;margin-top:2px}
.s2-fe-pf-chat{display:flex;flex-direction:column;background:var(--s2-wa-grund)}
.s2-fe-pf-wer{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fff;border-bottom:1px solid var(--s2-linie)}
.s2-fe-pf-wer b{font-size:13px}
.s2-fe-pf-verlauf,.s2-fe-wa-verlauf{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:10px}
.s2-fe-fenster .s2-wa-blase{font-size:12.5px;line-height:17px;max-width:86%}
.s2-fe-pf-eingabe{margin:0 10px 10px;height:32px;border-radius:99px;background:#fff;display:flex;align-items:center;padding:0 14px;font-size:12px;color:var(--s2-grau-hell)}
/* AI-Antwort */
.s2-fe-fenster.wa .s2-fe-wa-verlauf{background:var(--s2-wa-grund);min-height:300px;padding:14px}
.s2-fe-ki{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px 0 5px;border-radius:99px;background:var(--s2-flaeche);font-size:11.5px;font-weight:600;color:var(--s2-tinte)}
/* Kontakte */
.s2-fe-f-kopf .knoepfe{display:flex;gap:6px}
.s2-fe-f-kopf .knoepfe span{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:8px;box-shadow:0 0 0 1px var(--s2-linie);font-size:12px;font-weight:500;color:var(--s2-tinte)}
.s2-fe-f-kopf .knoepfe .s2-ic{width:13px;height:13px}
.s2-fe-tab{padding:4px 8px 8px}
.s2-fe-tab .z{display:grid;grid-template-columns:1.25fr 1.2fr .8fr;align-items:center;gap:8px;padding:9px 8px;border-bottom:1px solid var(--s2-linie)}
.s2-fe-tab .z:last-child{border-bottom:0}
.s2-fe-tab .z.k{font-size:11.5px;color:var(--s2-grau-hell);padding-block:8px}
.s2-fe-tab .z>span{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;font-size:13px;color:var(--s2-schwarz)}
.s2-fe-tab .av{width:26px;height:26px;font-size:11px}
.s2-fe-tab .tag{font-style:normal;padding:0 8px;border-radius:99px;background:var(--s2-flaeche);font-size:11px;line-height:20px;color:var(--s2-tinte)}
.s2-fe-tab .s2-status{font-style:normal;height:22px;font-size:11px;padding:0 9px}
/* Statistiken */
.s2-fe-f-kopf .zeitraum{display:flex;gap:2px;padding:3px;border-radius:9px;background:var(--s2-flaeche)}
.s2-fe-f-kopf .zeitraum i{font-style:normal;font-size:11.5px;padding:4px 9px;border-radius:7px;color:var(--s2-grau)}
.s2-fe-f-kopf .zeitraum i.an{background:#fff;color:var(--s2-schwarz);box-shadow:0 1px 2px rgba(20,20,40,.08)}
.s2-fe-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px}
.s2-fe-kpi>div{padding:10px 12px;border-radius:10px;box-shadow:0 0 0 1px var(--s2-linie)}
.s2-fe-kpi small{display:block;font-size:11px;color:var(--s2-grau-hell)}
.s2-fe-kpi b{display:block;margin-top:4px;font:400 26px/1 var(--s2-serif);color:var(--s2-schwarz)}
.s2-fe-balken-kopf{display:flex;justify-content:space-between;align-items:center;padding:4px 14px 0}
.s2-fe-balken-kopf b{font-size:12.5px;color:var(--s2-schwarz)}
.s2-fe-balken-kopf span{font-size:11px;color:var(--s2-grau-hell)}
.s2-fe-balken{display:flex;align-items:flex-end;gap:6px;height:140px;padding:12px 14px 14px}
.s2-fe-balken i{flex:1;height:var(--h);border-radius:4px 4px 2px 2px;background:var(--s2-linie-stark)}
.s2-fe-balken i:nth-child(12){background:var(--s2-schwarz)}
.s2-fe-vs.an .s2-fe-balken i{animation:s2feBalken 900ms var(--s2-kurve) both;animation-delay:calc(var(--n,0) * 30ms)}
@keyframes s2feBalken{from{height:4%}}

/* Maske: weiße Fläche mit Buchstaben als Fenster */
.s2-fe-maske{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;background:#fff;mix-blend-mode:screen}
.s2-fe-wort{position:absolute;left:0;top:0;margin:0;white-space:nowrap;font:600 160px/1 var(--s2-sans);letter-spacing:-.045em;color:#000;transform-origin:0 0}
.s2-fe-gl{display:inline-block;width:0;height:0;vertical-align:baseline}   /* Messpunkt Grundlinie, unsichtbar */
.s2-fe-unter{position:absolute;left:0;right:0;top:calc(50% + var(--fe-wh,120px) * .62);margin:0;text-align:center;font-size:clamp(16px,1.3vw,19px);color:var(--s2-grau);
}
.s2-fe-handywort{display:none}

/* 17.10.2026: flüssiges Scrollen. Solange die Kamera fährt, liegen App, Schwarz, Farbfläche, Maske und Feld auf eigenen Ebenen (nur transform/opacity).
   Nach dem Zoom fällt will-change an der App weg, damit sie bei Maßstab 1 wieder gestochen scharf gemalt wird. */
.s2-fenster.fe-zoom .s2-fe-app{will-change:transform}
.s2-fenster.fe-zoom .s2-fe-schwarz,.s2-fenster.fe-zoom .s2-fe-grund,.s2-fenster.fe-zoom .s2-fe-maske{will-change:opacity}
.s2-fenster.fe-buehne .s2-fe-panel{will-change:transform,opacity}

/* Endzustand: keine Bühne, Feld steht */
html.s2-statisch .s2-fe-maske{display:none}
html.s2-statisch .s2-fe-app{position:relative;transform:none}
html.s2-statisch .s2-fe-grund,html.s2-statisch .s2-fe-schwarz{display:none}
html.s2-statisch .s2-fe-app-innen{padding-top:80px;padding-bottom:80px}
/* 17.10.2026: auch im Endzustand (reduzierte Bewegung) steht die Überschrift über dem Feld */
@media (min-width:761px){
html.s2-statisch .s2-fe-handywort{display:block;margin:0;padding:80px var(--s2-rand) 0;text-align:center;font:600 clamp(48px,9vw,140px)/1 var(--s2-sans);letter-spacing:-.045em;color:var(--s2-schwarz)}
html.s2-statisch .s2-fe-handywort+.s2-fe-app .s2-fe-app-innen{padding-top:48px}}

/* Tablet */
@media (max-width:1100px){
  .s2-fe-koerper{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .s2-fe-reiter{font-size:14px;gap:8px}
}
/* Handy: Wort als Farbschrift, Reiter waagerecht wischbar, Text über der Vorschau */
@media (max-width:760px){
  .s2-fe-buehne{height:auto}
  .s2-fenster .s2-buehne-innen{position:relative;height:auto;overflow:visible}
  .s2-fe-maske,.s2-fe-grund,.s2-fe-schwarz{display:none}
  .s2-fe-app{position:relative;transform:none}
  .s2-fe-panel{opacity:1;transform:none;border-radius:22px;padding:6px}
  .s2-fe-app-innen{padding:0 var(--s2-rand) 24px}
  .s2-fe-handywort{display:block;margin:0;padding:56px var(--s2-rand) 36px;text-align:center;font:600 21vw/1 var(--s2-sans);letter-spacing:-.045em;color:var(--s2-schwarz)}
  /* 17.10.2026: alle 4 Reiter sichtbar (2 x 2), nichts mehr abgeschnitten oder seitlich versteckt */
  .s2-fe-reiterleiste{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px 4px 8px}
  .s2-fe-reiter{padding:0 10px;height:42px;font-size:14px;gap:8px}
  .s2-fe-reiter .lauf{left:14px;right:14px;bottom:5px}
  .s2-fe-koerper{grid-template-columns:minmax(0,1fr);padding:8px;border-radius:18px}
  .s2-fe-links{min-height:0;padding:18px 12px 8px}
  /* 17.10.2026: Texte liegen übereinander (Höhe = längster Text), damit beim Reiterwechsel nichts darunter springt */
  .s2-fe-links{gap:24px}
  .s2-fe-titel{font-size:30px}
  .s2-fe-punkte{margin-top:20px;gap:16px}
  .s2-fe-rechts{min-height:360px}
  .s2-fe-vs{padding:16px}
  .s2-fe-pf{grid-template-columns:minmax(0,1fr);height:auto}
  .s2-fe-pf-liste{display:none}
  .s2-fe-pf-verlauf{min-height:220px}
  .s2-fe-kpi{grid-template-columns:repeat(2,1fr)}
  .s2-fe-tab .z{grid-template-columns:1.3fr 1fr}
  .s2-fe-tab .z>span:nth-child(2){display:none}
  .s2-fe-f-kopf .knoepfe span:last-child{display:none}
}
/* V2 (15.10.2026, E51): echte Bildschirmfotos der App statt nachgemalter Fenster */
.s2-fe-vs{display:block;padding:0}
.s2-fe-shot{position:absolute;left:7%;top:8%;width:132%;border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(13,13,16,.08),0 2px 6px rgba(13,13,16,.06),0 30px 60px rgba(13,13,16,.18)}
.s2-fe-shot img{display:block;width:100%;height:auto}
.s2-fe-shot.ai{width:96%}
@media (max-width:760px){.s2-fe-shot{left:5%;top:6%;width:150%}.s2-fe-shot.ai{width:110%}}

/* ===== 18.10.2026 HANDY mit Bewegung (fenster.js setzt .fe-h nur bis 760 px, nie im Endzustand). Desktop unverändert. =====
   "Alles in einer App." klebt (100svh), Kamera fährt ins "i", Farbfläche kommt und landet als Bildfeld des Karussells.
   Karussell: 4 App-Ansichten gleiten seitlich, Wischen im Bildfeld, Punkte darunter, alle 6 s weiter (solange sichtbar und unberührt). */
.s2-fe-hfeld,.s2-fe-hpunkte{display:none}
@media (max-width:760px){
  html.s2-js:not(.s2-statisch) .s2-fenster.fe-h .s2-fe-handywort{position:sticky;top:0;z-index:3;height:100vh;height:100svh;display:grid;place-items:center;
    padding:var(--s2-leiste) var(--s2-rand) 0;pointer-events:none}
  html.s2-js:not(.s2-statisch) .s2-fenster.fe-h .s2-fe-hfeld{display:block;position:sticky;top:0;z-index:4;margin-top:-100vh;margin-top:-100svh;height:100vh;height:100svh;
    min-height:0;border-radius:0;transform-origin:0 0;visibility:hidden;pointer-events:none}
  html.s2-js:not(.s2-statisch) .s2-fenster.fe-h.fe-h-fliegt .s2-fe-hfeld{will-change:transform,opacity}
  html.s2-js:not(.s2-statisch) .s2-fenster.fe-h .s2-fe-app{z-index:2}
  /* Bugrunde: das vergrößerte Wort verlängerte die Seite um ca. 1.250 px (transform zählt zum Überlauf). clip schneidet ab, ohne position:sticky zu stören */
  html.s2-js:not(.s2-statisch) .s2-fenster.fe-h .s2-buehne-innen{overflow:clip}
  /* Karussell: Bildfeld oben, Punkte, dann Text */
  html.s2-js:not(.s2-statisch) .s2-fenster.fe-h .s2-fe-rechts{order:-2;min-height:0;aspect-ratio:4/3.3;touch-action:pan-y}
  html.s2-js:not(.s2-statisch) .s2-fenster.fe-h .s2-fe-hpunkte{order:-1;display:flex;justify-content:center;gap:2px;margin:2px 0 -6px}
  .s2-fe-hpunkte button{position:relative;width:26px;height:28px;padding:0;border:0;background:none;cursor:pointer}
  .s2-fe-hpunkte 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);
    transition:transform 450ms var(--s2-kurve),background-color 300ms var(--s2-kurve)}
  .s2-fe-hpunkte button.an::before{background:var(--s2-schwarz);transform:scaleX(2.6)}
  html.s2-js:not(.s2-statisch) .s2-fenster.fe-h .s2-fe-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) .s2-fenster.fe-h .s2-fe-vs.vor{transform:translate3d(-48px,0,0) scale(.97)}
  html.s2-js:not(.s2-statisch) .s2-fenster.fe-h .s2-fe-vs.an{transform:none}
  html.s2-js:not(.s2-statisch) .s2-fenster.fe-h .s2-fe-text{transform:translate3d(18px,0,0)}
  html.s2-js:not(.s2-statisch) .s2-fenster.fe-h .s2-fe-text.an{transform:none}
}

/* ===== 18.10.2026 Handy-Bugrunde 2 (nur bis 760 px mit Bewegung, Desktop unverändert) =====
   Zwischen dem Video und "Alles in einer App." lag ca. 400 px leeres Weiß: die Überschrift stand mittig in der klebenden, bildschirmhohen Fläche.
   Jetzt steht sie oben in der Fläche (knapp unter der Leiste), der Abstand zum Video ist wie zwischen den anderen Sektionen.
   Die Kamera fährt weiter genau in das "i" (fenster.js misst die Lage des "i" selbst). */
@media (max-width:760px){
  html.s2-js:not(.s2-statisch) .s2-fenster.fe-h .s2-fe-handywort{place-items:start center;padding-top:calc(var(--s2-leiste) + 4vh);padding-top:calc(var(--s2-leiste) + 4svh)}
}

/* 02.11.2026 (Gründer, nur Handy): "ALL IN ONE" und die Reiter weg; die vier Bereiche stehen als vier eigene Abschnitte untereinander: Bild, Überschrift, Text; danach ein Knopf. Desktop unverändert. */
@media (max-width:760px){
  #s2-fenster .s2-fe-handywort,#s2-fenster .s2-fe-reiterleiste{display:none!important}
  #s2-fenster .s2-fe-panel{background:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
  #s2-fenster .s2-fe-koerper{display:flex!important;flex-direction:column!important;gap:0!important}
  #s2-fenster .s2-fe-links,#s2-fenster .s2-fe-rechts{display:contents!important}
  #s2-fenster .s2-fe-vs{display:block!important;opacity:1!important;visibility:visible!important;position:static!important;transform:none!important;margin:56px 0 22px!important}
  #s2-fenster .s2-fe-vs[data-i="0"]{order:1}
  #s2-fenster .s2-fe-text[data-i="0"]{order:2}
  #s2-fenster .s2-fe-vs[data-i="1"]{order:3}
  #s2-fenster .s2-fe-text[data-i="1"]{order:4}
  #s2-fenster .s2-fe-vs[data-i="2"]{order:5}
  #s2-fenster .s2-fe-text[data-i="2"]{order:6}
  #s2-fenster .s2-fe-vs[data-i="3"]{order:7}
  #s2-fenster .s2-fe-text[data-i="3"]{order:8}
  #s2-fenster .s2-fe-knopf{order:9;margin-top:44px!important;align-self:center}
  #s2-fenster .s2-fe-shot{position:static!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;transform:none!important;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px #ececf0}
  #s2-fenster .s2-fe-shot img{display:block;width:100%;height:auto}
  #s2-fenster .s2-fe-text{display:block!important;opacity:1!important;visibility:visible!important;position:static!important;transform:none!important;text-align:left}
}

/* 02.11.2026 (Gründer, nur Handy): Rahmenlinien um die vier Bereiche weg, Überschriften mittig, gleichmäßige Abstände. */
@media (max-width:760px){
  #s2-fenster .s2-fe-koerper,#s2-fenster .s2-fe-panel,#s2-fenster .s2-fe-rechts{box-shadow:none!important;border:0!important;background:none!important;border-radius:0!important;padding:0!important}
  #s2-fenster .s2-fe-vs{margin:0 0 24px!important;padding:0!important}
  #s2-fenster .s2-fe-text{margin:0 0 56px!important}
  #s2-fenster .s2-fe-text h2,#s2-fenster .s2-fe-text h3,#s2-fenster .s2-fe-text [class*="titel"]{text-align:center!important}
  #s2-fenster .s2-fe-knopf{margin-top:0!important}
}

/* 03.11.2026 (Gründer, nur Handy): die vier Überschriften mittig und in einer Zeile. */
@media (max-width:760px){
  #s2-fenster .s2-fe-titel{max-width:none!important;width:100%;text-align:center!important;font-size:clamp(19px,5.6vw,24px)!important;white-space:nowrap}
  #s2-fenster .s2-fe-text{text-align:center}
  #s2-fenster .s2-fe-text ul,#s2-fenster .s2-fe-text ol,#s2-fenster .s2-fe-text li{text-align:left}
}

/* 03.11.2026 (Gründer, nur Handy): die vier Überschriften größer, weiterhin eine Zeile. */
@media (max-width:760px){#s2-fenster .s2-fe-titel{font-size:clamp(21px,6.2vw,25px)!important}}

/* 03.11.2026 (Gründer): die vier Überschriften größer, alle in einer Zeile */
@media (max-width:760px){#s2-fenster .s2-fe-titel{font-size:6.7vw!important;letter-spacing:-.02em!important}}

/* ===== SEKTION handys ===== */
/* LANDINGPAGE, POPUP, QR (Idee 7): drei hellgraue Karten, Handy läuft aus der Karte (angeschnitten). Mitte umgedreht. */
.s2-hy-grau{color:var(--s2-grau-satz)}
.s2-hy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2-spalt)}
.s2-hy-karte{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--s2-r-kachel);background:#f2f2f4;height:clamp(540px,46vw,640px);
  display:flex;flex-direction:column;align-items:center}
.s2-hy-karte::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgba(13,13,16,.07) 0 .9px,transparent 1.25px) 0 0/10px 10px;
  -webkit-mask:linear-gradient(180deg,transparent,#000 60%);mask:linear-gradient(180deg,transparent,#000 60%)}
.s2-hy-karte.oben::after{-webkit-mask:linear-gradient(0deg,transparent,#000 60%);mask:linear-gradient(0deg,transparent,#000 60%)}
.s2-hy-text{padding:clamp(28px,2.6vw,40px) clamp(24px,2.4vw,36px) 0;text-align:center}
.s2-hy-karte.oben .s2-hy-text{padding:0 clamp(24px,2.4vw,36px) clamp(28px,2.6vw,40px);margin-top:auto}
.s2-hy-text .s2-h3{margin:0}
.s2-hy-text p{margin:10px auto 0;max-width:32ch;font-size:15.5px;line-height:1.55;color:var(--s2-grau)}

/* Handy (angeschnitten) */
.s2-hy-handy{--hb:clamp(230px,19vw,268px);position:relative;width:var(--hb);flex:none;margin-top:clamp(28px,3vw,40px);
  aspect-ratio:300/616;border-radius:calc(var(--hb) * .15);padding:calc(var(--hb) * .033);
  background:linear-gradient(180deg,#fdfdfe,#f3f3f6);box-shadow:0 0 0 1px #e3e3e8,0 1px 0 #fff inset,var(--s2-schatten-tief);
  transition:transform 1100ms var(--s2-kurve)}
.s2-hy-karte.oben .s2-hy-handy{margin-top:calc(var(--hb) * -.5)}
.s2-hy-schirm{position:relative;height:100%;border-radius:calc(var(--hb) * .12);overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(20,20,40,.06)}
html.s2-js:not(.s2-statisch) .s2-hy-karte:not(.da) .s2-hy-handy{transform:translate3d(0,60px,0)}
html.s2-js:not(.s2-statisch) .s2-hy-karte.oben:not(.da) .s2-hy-handy{transform:translate3d(0,-60px,0)}

/* 1 Landingpage */
.s2-hy-lp-bild{height:30%;overflow:hidden}
.s2-hy-lp-bild img{width:100%;height:100%;object-fit:cover;display:block}
.s2-hy-lp-inhalt{position:relative;padding:0 16px;display:flex;flex-direction:column;align-items:center;text-align:center}
.s2-hy-lp-logo{width:48px;height:48px;border-radius:50%;margin-top:-24px;box-shadow:0 0 0 3px #fff,0 4px 12px rgba(13,13,16,.12);background:#fff}
.s2-hy-lp-inhalt b{margin-top:10px;font:400 21px/1.1 var(--s2-serif);color:var(--s2-schwarz)}
.s2-hy-lp-inhalt p{margin:6px 0 14px;font-size:12px;line-height:1.45;color:var(--s2-grau)}
.s2-hy-feld{width:100%;height:36px;border-radius:9px;box-shadow:0 0 0 1px var(--s2-linie-stark);display:flex;align-items:center;gap:8px;padding:0 10px;font-size:12px;color:var(--s2-grau-hell)}
.s2-hy-feld i{font-style:normal;color:var(--s2-tinte);font-weight:600;padding-right:8px;border-right:1px solid var(--s2-linie)}
.s2-hy-lp-knopf{margin-top:8px;width:100%;height:36px;border-radius:9px;background:var(--s2-schwarz);color:#fff;font-size:12.5px;font-weight:600;display:grid;place-items:center}
.s2-hy-meldung{position:absolute;left:-34px;right:-34px;top:13%;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--s2-r-karte);
  background:rgba(255,255,255,.96);box-shadow:var(--s2-schatten-schwebe);transition:opacity 600ms var(--s2-kurve) 700ms,transform 800ms var(--s2-kurve) 700ms}
.s2-hy-meldung>div{flex:1;min-width:0}
.s2-hy-meldung b{display:block;font-size:13.5px;color:var(--s2-schwarz)}
.s2-hy-meldung small{display:block;font-size:12px;color:var(--s2-grau)}
html.s2-js:not(.s2-statisch) .s2-hy-karte:not(.da) .s2-hy-meldung{opacity:0;transform:translate3d(0,14px,0) scale(.96)}

/* 2 Webseite mit Popup */
.s2-hy-schirm.web{background:#fafafb}
.s2-hy-web-leiste{position:absolute;left:0;right:0;bottom:0;height:46px;display:flex;align-items:center;gap:4px;padding:0 12px;background:#fff;border-top:1px solid var(--s2-linie)}
.s2-hy-web-leiste i{display:none}
.s2-hy-web-leiste span{flex:1;height:28px;border-radius:8px;background:var(--s2-flaeche);display:grid;place-items:center;font-size:11px;color:var(--s2-tinte)}
.s2-hy-web-seite{padding:40px 18px 0;display:grid;gap:8px}
.s2-hy-web-seite i{display:block;height:7px;border-radius:4px;background:var(--s2-linie)}
.s2-hy-web-seite i.t{height:14px;width:70%;background:var(--s2-linie-stark);margin-bottom:4px}
.s2-hy-web-seite i.kurz{width:60%}
.s2-hy-web-seite .bild{height:90px;border-radius:10px;background:url(/bilder/bg/blume-5.jpg) center/cover;opacity:.7;margin:6px 0}
.s2-hy-popup{position:absolute;left:12px;right:12px;bottom:60px;padding:18px 16px 14px;border-radius:16px;background:#fff;box-shadow:0 -10px 40px -10px rgba(13,13,16,.25),0 0 0 1px rgba(13,13,16,.05);
  display:flex;flex-direction:column;align-items:center;text-align:center;transition:opacity 600ms var(--s2-kurve) 600ms,transform 900ms var(--s2-kurve) 600ms}
html.s2-js:not(.s2-statisch) .s2-hy-karte:not(.da) .s2-hy-popup{opacity:0;transform:translate3d(0,40px,0)}
.s2-hy-popup-x{position:absolute;right:12px;top:8px;font-size:18px;color:var(--s2-grau-hell)}
.s2-hy-wa{width:38px;height:38px;border-radius:12px;background:#fff;box-shadow:var(--s2-schatten-ring);display:grid;place-items:center}
.s2-hy-wa svg{width:26px;height:26px}
.s2-hy-popup b{margin-top:10px;font-size:14px;line-height:1.3;color:var(--s2-schwarz)}
.s2-hy-popup small{margin-top:4px;font-size:11.5px;line-height:1.4;color:var(--s2-grau)}
.s2-hy-popup .s2-hy-lp-knopf{margin-top:12px}

/* 3 Kamera mit QR-Code */
.s2-hy-schirm.kamera{background:linear-gradient(180deg,#e9e3dc,#d9d2c9)}
.s2-hy-sucher{position:absolute;left:50%;top:38%;width:64%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:14px;background:#fff;padding:10%;box-shadow:0 12px 30px -10px rgba(13,13,16,.35)}
.s2-hy-qr{display:block;width:100%;height:100%}
.s2-hy-sucher .e{position:absolute;width:26px;height:26px;border:3px solid #fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.s2-hy-sucher .e1{left:-14px;top:-14px;border-right:0;border-bottom:0;border-radius:10px 0 0 0}
.s2-hy-sucher .e2{right:-14px;top:-14px;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.s2-hy-sucher .e3{left:-14px;bottom:-14px;border-right:0;border-top:0;border-radius:0 0 0 10px}
.s2-hy-sucher .e4{right:-14px;bottom:-14px;border-left:0;border-top:0;border-radius:0 0 10px 0}
html.s2-js:not(.s2-statisch) .s2-hy-karte.da .s2-hy-sucher .e{animation:s2hyZiel 900ms var(--s2-kurve) 300ms both}
@keyframes s2hyZiel{0%{transform:scale(1.5);opacity:0}100%{transform:none;opacity:1}}
.s2-hy-scan{position:absolute;left:50%;top:68%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:7px 14px 7px 7px;border-radius:var(--s2-r-rund);
  background:rgba(255,255,255,.95);box-shadow:var(--s2-schatten-schwebe);font-size:12.5px;font-weight:600;color:var(--s2-schwarz);transition:opacity 500ms var(--s2-kurve) 1100ms,transform 700ms var(--s2-kurve) 1100ms}
html.s2-js:not(.s2-statisch) .s2-hy-karte:not(.da) .s2-hy-scan{opacity:0;transform:translate(-50%,10px)}
.s2-hy-wa.klein{width:24px;height:24px;border-radius:50%;box-shadow:none;background:#e8f8ee}
.s2-hy-wa.klein svg{width:16px;height:16px}

/* Tablet und Handy: Karten untereinander */
@media (max-width:900px){
  .s2-hy{grid-template-columns:minmax(0,1fr);gap:16px;max-width:480px;margin-inline:auto}
  .s2-hy-karte{height:540px}
  .s2-hy-handy{--hb:248px}
}

/* ===== 18.10.2026 HANDY mit Bewegung: wischbare Reihe (.s2-wisch aus basis.js). Karte 84 % breit, die nächste schaut rechts herein. Desktop unverändert. ===== */
@media (max-width:760px){
  html.s2-js:not(.s2-statisch) .s2-hy.s2-wisch{max-width:none;--s2-wisch-b:84%}
  html.s2-js:not(.s2-statisch) .s2-hy.s2-wisch>.s2-hy-karte{height:520px;transition:transform 600ms var(--s2-kurve)}
  html.s2-js:not(.s2-statisch) .s2-hy.s2-wisch>.s2-hy-karte:not(.s2-wisch-an){transform:scale(.96)}
}

/* ===== 18.10.2026 Handy-Bugrunde 2 (nur bis 760 px, Desktop unverändert) =====
   1) Meldung "Neuer Kontakt" ragte je 34 px über das Handy hinaus und wurde an der schmalen Karte links und rechts hart abgeschnitten
      (keine runden Ecken mehr sichtbar, "Bestätigt" klebte am Kartenrand). Am Handy nur 12 px überstehend.
   2) Karte schnitt das Handy mitten im Knopf "Jetzt anmelden" ab. Karte 40 px höher, der Knopf ist ganz zu sehen, das Handy bleibt unten angeschnitten. */
@media (max-width:760px){
  .s2-hy-meldung{left:-12px;right:-12px}
  html.s2-js:not(.s2-statisch) .s2-hy.s2-wisch>.s2-hy-karte{height:560px}
}
/* 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. */
.s2-hy-schirm{clip-path:inset(0 round calc(var(--hb) * .12));isolation:isolate}

/* ===== 02.11.2026 (Gründer): Überschrift beide Zeilen schwarz; Handys wie iPhone 18 Pro (schmaler Titan-Rahmen, Dynamic Island, runde Display-Ecken), ohne weiße Umrandung; Karten ohne Punktmuster ===== */
.s2-hy-grau{color:var(--s2-schwarz)}
.s2-hy-karte::after,.s2-hy-karte.oben::after{display:none;content:none}
.s2-hy-handy{padding:calc(var(--hb) * .018);border-radius:calc(var(--hb) * .175);
  background:linear-gradient(160deg,#4a4b50 0,#2a2b2f 38%,#3b3c41 70%,#232427 100%);
  box-shadow:0 0 0 .5px rgba(0,0,0,.55),var(--s2-schatten-tief)}
.s2-hy-schirm{border-radius:calc(var(--hb) * .157);box-shadow:none;background:#fff}
.s2-hy-schirm::after{content:"";position:absolute;left:50%;top:calc(var(--hb) * .03);width:calc(var(--hb) * .3);height:calc(var(--hb) * .09);transform:translateX(-50%);border-radius:99px;background:#000;z-index:5;pointer-events:none}
.s2-hy-schirm{clip-path:inset(0 round calc(var(--hb) * .157))}

/* ===== 02.11.2026 c (Gründer): Landingpage- und Popup-Handy realistischer: iPhone-Proportion, Statusleiste, ruhige Schatten, Hotel-Browser-Seite hinter dem Popup ===== */
.s2-hy-handy{aspect-ratio:300/628;box-shadow:0 0 0 .5px rgba(0,0,0,.6),0 2px 4px rgba(13,13,16,.12),0 18px 36px -14px rgba(13,13,16,.28)}
.s2-hy-status{position:absolute;left:0;right:0;top:calc(var(--hb) * .036);z-index:6;display:flex;justify-content:space-between;align-items:center;padding:0 calc(var(--hb) * .085) 0 calc(var(--hb) * .105);height:calc(var(--hb) * .06);font:600 calc(var(--hb) * .052)/1 var(--s2-sans);color:#0d0d10;pointer-events:none}
.s2-hy-status .ik{display:flex;align-items:center;gap:calc(var(--hb) * .018)}
.s2-hy-status svg{display:block;height:calc(var(--hb) * .042);width:auto;fill:currentColor}
.s2-hy-status .ik svg:last-child{height:calc(var(--hb) * .046)}
.s2-hy-schirm.lp .s2-hy-status{color:#0d0d10;text-shadow:0 0 6px rgba(255,255,255,.55)}
.s2-hy-web-kopf{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--hb) * .17) 16px 8px;background:#fff;border-bottom:1px solid var(--s2-linie)}
.s2-hy-web-kopf b{font:400 15px/1 var(--s2-serif);color:var(--s2-schwarz)}
.s2-hy-web-kopf .burger{display:grid;gap:3px}.s2-hy-web-kopf .burger i{display:block;width:16px;height:1.6px;border-radius:2px;background:var(--s2-tinte)}
.s2-hy-web-seite{padding:0 0 0;gap:8px}
.s2-hy-web-seite>i{margin-inline:16px}
.s2-hy-web-seite .bild{display:block;height:120px;border-radius:0;opacity:1;margin:0 0 6px}
.s2-hy-web-seite .bild{background-image:url(/bilder/bg/blume-5.jpg)}
.s2-hy-schirm.web .s2-hy-web-leiste{z-index:2}

/* ===== 02.11.2026 d (Gründer): ECHTE Ansichten statt Attrappen. Landingpage = Nachbau 1:1 der Alpenblick-Seite (Maße aus branchen/hotels alpenblick-landingpage-handy, 358 px = 100 cqw, Foto aus alpenblick-landingpage.webp). Popup = echter Screenshot (funktionen/landingpage popup-landingpage-1600, Gut Erlenhof) ===== */
.s2-hy-schirm.lp{background:#fff}
.s2-hy-schirm.lp{container-type:inline-size}
.s2-hy-echt{position:absolute;inset:0;padding:calc(var(--hb) * .15) 5cqw 0;font-family:var(--s2-sans);text-align:left}
.s2-hy-echt *{text-align:left}
.e-kopf{display:flex;align-items:center;gap:2.2cqw}
.e-av{width:6.7cqw;height:6.7cqw;border-radius:50%;background:#2e6b52;color:#fff;display:grid;place-items:center;font:600 3.6cqw/1 var(--s2-sans)}
.e-kopf b{font:600 4.2cqw/1 var(--s2-sans);color:#0d0d10}
.e-ort{display:block;margin-top:7cqw;font:600 3cqw/1 var(--s2-sans);letter-spacing:.13em;color:#2e6b52}
.e-h{margin:2.2cqw 0 0;font:400 10cqw/1.08 var(--s2-sans);letter-spacing:-.02em;color:#0d0d10}
.e-h em{font-style:italic;color:#2e6b52}
.e-t{margin:3.4cqw 0 0;font:400 4.3cqw/1.5 var(--s2-sans);color:#6b6b70}
.e-knopf{display:inline-grid;place-items:center;margin-top:6cqw;height:12.2cqw;padding:0 7cqw;border-radius:3.6cqw;background:#2e6b52;color:#fff;font:600 3.9cqw/1 var(--s2-sans);box-shadow:0 2cqw 4cqw -1.5cqw rgba(46,107,82,.55)}
.e-sterne{display:flex;align-items:center;gap:1.6cqw;margin-top:4.6cqw;font:400 3.1cqw/1 var(--s2-sans);color:#6b6b70}
.e-sterne .st{color:#f2a516;letter-spacing:.1em;font-size:3.4cqw}
.e-foto{display:block;width:100%;height:auto;margin-top:6cqw;border-radius:4.5cqw;box-shadow:0 3cqw 7cqw -3cqw rgba(13,13,16,.25)}
.s2-hy-schirm.web{background:#1b1b1f}
.s2-hy-echtbild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.s2-hy-schirm.web .s2-hy-status{color:#fff}
.s2-hy-meldung{top:60%}

/* 02.11.2026 (Gründer, nur Handy): die drei Karten nebeneinander; man sieht etwa zwei Drittel und wischt nach links für den Rest (ohne Skript). */
@media (max-width:760px){
  #s2-handys .s2-hy{display:flex!important;grid-template-columns:none!important;gap:12px!important;max-width:none!important;margin-inline:calc(var(--s2-rand,20px) * -1)!important;padding:0 var(--s2-rand,20px) 8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--s2-rand,20px);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #s2-handys .s2-hy::-webkit-scrollbar{display:none}
  #s2-handys .s2-hy>.s2-hy-karte{flex:0 0 68%!important;width:68%;scroll-snap-align:start;transform:none!important;height:560px!important}
}

/* 03.11.2026 (Gründer, nur Handy): Handys in den schmalen Karten kleiner, damit der Text sichtbar bleibt (Karte 2 war zu groß). */
@media (max-width:760px){
  #s2-handys .s2-hy-handy{--hb:168px!important}
  #s2-handys .s2-hy>.s2-hy-karte{height:500px!important}
  #s2-handys .s2-hy-text{padding-left:16px!important;padding-right:16px!important}
}

/* 03.11.2026 (Gründer): das Handy klebte im Text der Karte; Text oben, Handy mit Abstand darunter */
@media (max-width:760px){
  #s2-handys .s2-hy>.s2-hy-karte{height:auto!important;min-height:0!important;display:flex;flex-direction:column;padding-bottom:0}
  #s2-handys .s2-hy-karte .s2-hy-text{position:static!important;order:0;padding-bottom:0}
  #s2-handys .s2-hy-karte .s2-hy-handy{order:1;margin:28px auto 0!important;position:relative!important}
  #s2-handys .s2-hy-karte.oben .s2-hy-text{order:0!important;margin-top:0!important}
  #s2-handys .s2-hy-karte.oben .s2-hy-handy{margin-top:28px!important}
}

/* ===== SEKTION menschen ===== */
/* BRANCHEN V3 (17.10.2026): Titel, Suchfeld, EIN ruhiges Laufband mit 100 Branchen-Chips. Suche blendet das Band aus und zeigt die Treffer. */
.s2-menschen .s2-kopf{margin-bottom:0}
.s2-br-suche{display:flex;align-items:center;gap:12px;width:min(560px,100%);height:58px;margin:clamp(28px,3.5vw,44px) auto 0;padding:0 20px;border-radius:var(--s2-r-knopf);background:#fff;
  box-shadow:0 0 0 1px rgba(13,13,16,.08),0 10px 30px rgba(13,13,16,.06);cursor:text}
.s2-br-suche .s2-ic{width:20px;height:20px;color:var(--s2-grau);flex:none}
.s2-br-suche input{flex:1;min-width:0;border:0;outline:0;background:none;font:400 17px/1 var(--s2-sans);color:var(--s2-schwarz);-webkit-appearance:none;appearance:none}
.s2-br-suche input::placeholder{color:var(--s2-grau-hell)}
.s2-br-suche input::-webkit-search-cancel-button{cursor:pointer;filter:grayscale(1);opacity:.55}
.s2-br-suche span{flex:none;font:500 13px/1 var(--s2-sans);color:var(--s2-grau)}
.s2-br-suche:focus-within{box-shadow:0 0 0 2px var(--s2-schwarz),0 10px 30px rgba(13,13,16,.08)}

/* Bühne unter dem Suchfeld: feste Höhe, damit beim Suchen nichts springt */
.s2-br-buehne{margin-top:clamp(32px,4vw,52px);min-height:64px}
/* Laufband (Fundament .s2-band): volle Breite, Rand weich ausgeblendet */
.s2-br-band{--s2-band-luecke:10px;--s2-band-dauer:360s;padding:6px 0 14px 18vw}
.s2-br-spur{margin:0;padding:0;list-style:none;will-change:transform}
.s2-br-chip{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:var(--s2-r-rund);background:#fff;white-space:nowrap;
  font:500 15px/1 var(--s2-sans);color:var(--s2-tinte);box-shadow:0 0 0 1px var(--s2-linie),0 2px 6px rgba(20,20,30,.04)}
/* Halten auch bei Tastatur-Fokus im Band */
.s2-br-band:focus-within .s2-band-spur{animation-play-state:paused}

/* Suche aktiv: Band weg, Treffer als ruhige Chip-Reihe */
.s2-menschen.sucht .s2-br-band{display:none}
.s2-br-treffer{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto;padding:6px 0 14px;list-style:none;max-width:920px}
.s2-br-treffer[hidden]{display:none}
.s2-br-treffer .s2-br-chip{animation:s2-br-rein .35s cubic-bezier(.22,1,.36,1) both}
.s2-br-treffer .s2-br-chip b{font-weight:600;color:var(--s2-schwarz)}
.s2-br-treffer .s2-br-mehr{background:none;box-shadow:none;color:var(--s2-grau-hell);padding:0 8px}
@keyframes s2-br-rein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.s2-br-leer{margin:4px auto 0;text-align:center;font:400 clamp(28px,2.6vw,36px)/1.15 var(--s2-serif);color:var(--s2-schwarz);letter-spacing:-.01em}
.s2-br-leer em{font-style:italic}
.s2-br-leer[hidden]{display:none}

/* Reduzierte Bewegung: Band steht, kann aber seitlich gewischt werden */
@media (prefers-reduced-motion:reduce){
  .s2-br-band{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scrollbar-width:none}
  .s2-br-band::-webkit-scrollbar{display:none}
  .s2-br-treffer .s2-br-chip{animation:none}
}
@media (max-width:760px){
  .s2-br-suche{height:54px;padding:0 16px}
  .s2-br-suche input{font-size:16px}
  .s2-br-chip{height:40px;padding:0 16px;font-size:14.5px}
  .s2-br-band{--s2-band-luecke:8px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
  .s2-br-treffer{gap:8px}
}

/* ===== 18.10.2026 HANDY mit Bewegung: drei Laufbänder (menschen.js, .br-h nur bis 760 px). Desktop: nur Band 1 mit allen Branchen. ===== */
.s2-menschen .s2-br-band.br-extra{display:none}
@media (max-width:760px){
  html.s2-js:not(.s2-statisch) .s2-menschen.br-h .s2-br-band.br-extra{display:block}
  html.s2-js:not(.s2-statisch) .s2-menschen.br-h.sucht .s2-br-band.br-extra{display:none}
  html.s2-js:not(.s2-statisch) .s2-menschen.br-h .s2-br-band{padding:4px 0 6px}
  html.s2-js:not(.s2-statisch) .s2-menschen.br-h .s2-br-band.br-r0 .s2-br-chip:not([data-r="0"]),
  html.s2-js:not(.s2-statisch) .s2-menschen.br-h .s2-br-band.br-r1 .s2-br-chip:not([data-r="1"]),
  html.s2-js:not(.s2-statisch) .s2-menschen.br-h .s2-br-band.br-r2 .s2-br-chip:not([data-r="2"]){display:none}
  html.s2-js:not(.s2-statisch) .s2-menschen.br-h .s2-br-band.br-r1{padding-left:0}
  html.s2-js:not(.s2-statisch) .s2-menschen.br-h .s2-br-band.br-r2{padding-left:9vw}
}

/* 18.10.2026 Handy-Bugrunde 2: bei 360 px Breite war der Platzhalter abgeschnitten ("Suche deine Branch"). Unter 400 px etwas weniger Innenabstand
   und Lücke, Eingabe bleibt 16 px (sonst zoomt iOS beim Antippen). */
@media (max-width:400px){
  .s2-br-suche{gap:9px;padding:0 14px}
}

/* ===== 02.11.2026 (Gründer): Branchen als durchlaufende Bild-Kacheln 3:2, Name unten links in Weiß (Instrument Sans) ===== */
.s2-br-chip.s2-br-kachel{display:block;position:relative;width:150px;height:100px;padding:0;border-radius:14px;overflow:hidden;background:var(--s2-flaeche);box-shadow:none;white-space:normal}
.s2-br-kachel a{display:block;position:relative;width:100%;height:100%;color:#fff;text-decoration:none}
.s2-br-kachel img{display:block;width:100%;height:100%;object-fit:cover}
.s2-br-kachel a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,13,16,.62) 0,rgba(13,13,16,.18) 45%,rgba(13,13,16,0) 70%);pointer-events:none}
.s2-br-kachel span{position:absolute;left:10px;bottom:8px;right:8px;z-index:1;font:600 13.5px/1.15 var(--s2-sans);color:#fff;text-align:left}
.s2-br-band{padding:6px 0 14px 0}
@media (max-width:760px){.s2-br-chip.s2-br-kachel{width:132px;height:88px;border-radius:12px;padding:0;font-size:13px}.s2-br-kachel span{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.s2-br-kachel img{transition:none}}

/* 02.11.2026 c: Umbruch Unterzeile nur Desktop */
@media (max-width:760px){.s2-br-desk{display:none}}

/* 02.11.2026 (Gründer, nur Handy): Branchenband läuft von selbst. Am Handy steht die Seite auf "statisch", das schaltete die Laufband-Animation ab. */
@media (max-width:760px){
  html.s2-statisch #s2-branchen .s2-br-spur{animation:s2-band var(--s2-band-dauer,120s) linear infinite!important;animation-play-state:running!important}
  #s2-branchen .s2-br-band{overflow:hidden!important}
}

/* ===== SEKTION siegel ===== */
/* DATENSCHUTZ V4 (18.10.2026, Runde 3): Scroll-Geschichte.
   Grundform (Handy, ?statisch=1, reduzierte Bewegung, ohne JS): Titel, dann 4 Punkte untereinander, je Text + Mini-Ansicht auf eigener bunter Fläche.
   Geschichte (ab 761 px mit JS): Bühne, links ein Punkt im Fenster, rechts EINE stehende bunte Fläche, darauf die Mini-Ansichten (absolut über der Fläche).
   Bewegt werden nur transform/opacity von .s2-ds-wort, .s2-ds-bild und den Takt-Balken (siegel.js, gemeinsamer Takt von basis.js). Keine Punkt-Raster, kein Korn. */

/* ---------- gemeinsame Teile ---------- */
.s2-ds-p{display:none}
.s2-ds-links .s2-kopf{margin-bottom:clamp(24px,2.6vw,36px)}
.s2-ds-links .s2-h2{max-width:none}
.s2-ds-fenster{list-style:none;margin:0;padding:0}
.s2-ds-wort{display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;align-items:start}
.s2-ds-sym{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--s2-schwarz);background:#fff;box-shadow:0 0 0 1px var(--s2-linie-stark)}
.s2-ds-sym .s2-ic{width:22px;height:22px}
.s2-ds-wort .s2-h3{margin:6px 0 0}
.s2-ds-wort p{margin:8px 0 0;font-size:clamp(16px,.35vw + 14.5px,17.5px);line-height:1.55;color:var(--s2-grau);max-width:42ch;text-wrap:pretty}

/* bunte Fläche: glatter Verlauf aus Pink, Orange, Gelb, Flieder mit Weißschleier (wie V3) */
.s2-ds-feld,.s2-ds-mini{position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(60% 55% at 18% 12%,#F9D8EE 0%,rgba(249,216,238,0) 100%),
             radial-gradient(55% 50% at 22% 96%,#F6D870 0%,rgba(246,216,112,0) 100%),
             radial-gradient(60% 55% at 86% 88%,#F59A2C 0%,rgba(245,154,44,0) 100%),
             radial-gradient(50% 50% at 92% 18%,#D8A6EA 0%,rgba(216,166,234,0) 100%),#F08EC6}
.s2-ds-feld::after,.s2-ds-mini::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.34);pointer-events:none}

/* Mini-Ansichten */
.s2-ds-bild{position:relative;z-index:1;width:min(360px,100%)}
.s2-ds-chat{border-radius:22px;overflow:hidden;background:var(--s2-wa-grund);box-shadow:var(--s2-schatten-tief)}
.s2-ds-chat .s2-wa-kopf{padding:12px 14px}
.s2-ds-ava{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;background:#1c1c20;color:#fff;font:600 12.5px/1 var(--s2-sans)}
.s2-ds-verlauf{display:flex;flex-direction:column;gap:6px;padding:14px 12px 16px}
.s2-ds-verlauf .s2-wa-blase{font-size:13.5px;line-height:18.5px;max-width:90%}

/* (2) PDF-Nachweis */
.s2-ds-bild:has(.s2-ds-pdf){width:min(400px,100%)}
.s2-ds-pdf{background:#fff;border-radius:18px;padding:18px 18px 14px;box-shadow:var(--s2-schatten-tief)}
.s2-ds-pdf-kopf{display:flex;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--s2-linie)}
.s2-ds-pdf-kopf>div{flex:1;min-width:0}
.s2-ds-pdf-kopf b{display:block;font-size:14.5px;font-weight:600;line-height:1.3;color:var(--s2-schwarz)}
.s2-ds-pdf-kopf small{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--s2-grau-hell)}
.s2-ds-pdf-sym{width:38px;height:38px;flex:none;border-radius:var(--s2-r-klein);display:grid;place-items:center;background:var(--s2-flaeche);color:var(--s2-schwarz)}
.s2-ds-pdf-sym .s2-ic{width:18px;height:18px}
.s2-ds-pdf-tag{flex:none;height:22px;padding:0 8px;border-radius:6px;display:grid;place-items:center;font:600 11px/1 var(--s2-sans);letter-spacing:.04em;color:var(--s2-tinte);box-shadow:0 0 0 1px var(--s2-linie-stark)}
.s2-ds-pdf-liste{margin:0;padding:0}
.s2-ds-pdf-liste>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--s2-linie)}
.s2-ds-pdf-liste dt{font-size:12.5px;color:var(--s2-grau-hell);white-space:nowrap}
.s2-ds-pdf-liste dd{margin:0;font-size:13.5px;font-weight:500;color:var(--s2-schwarz);text-align:right}
.s2-ds-pdf-fuss{margin:12px 0 0;font-size:12px;line-height:1.4;color:var(--s2-grau)}

/* (4) Server in Deutschland */
.s2-ds-server{background:#fff;border-radius:18px;padding:24px 20px 10px;box-shadow:var(--s2-schatten-tief);text-align:center}
.s2-ds-rack{display:block;width:120px;height:92px;margin:0 auto 16px}
.s2-ds-server>b{display:block;font-family:var(--s2-serif);font-weight:400;font-size:24px;line-height:1.15;color:var(--s2-schwarz);margin-bottom:10px}
.s2-ds-server-liste{list-style:none;margin:0;padding:0;text-align:left;border-top:1px solid var(--s2-linie)}
.s2-ds-server-liste li{display:flex;align-items:center;gap:10px;padding:12px 2px;border-bottom:1px solid var(--s2-linie);font-size:13.5px;color:var(--s2-tinte)}
.s2-ds-server-liste li:last-child{border-bottom:0}
.s2-ds-server-liste .s2-ic{width:16px;height:16px;color:var(--s2-ok-text)}
.s2-ds-server-liste span{margin-left:auto;font-weight:600;color:var(--s2-schwarz)}

/* ---------- Grundform: untereinander (Handy, statisch, ohne JS) ---------- */
.s2-ds-feld,.s2-ds-takt{display:none}
.s2-ds-fenster{display:grid;gap:44px}
.s2-ds-punkt{display:grid;gap:20px}
.s2-ds-mini{display:grid;place-items:center;border-radius:24px;padding:32px 16px}
.s2-ds .s2-buehne{height:auto}
.s2-ds .s2-buehne-innen{position:relative;height:auto;overflow:visible;padding-top:0;display:block}
/* Desktop ohne Bewegung: je Punkt eine Zeile, Text links, Bild rechts */
@media (min-width:761px){
  .s2-ds-punkt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,88px);align-items:center}
  .s2-ds-mini{min-height:440px;border-radius:var(--s2-r-kachel);padding:40px}
}

/* ---------- Geschichte: ab 761 px mit JS und Bewegung ---------- */
@media (min-width:761px){
  html.s2-js:not(.s2-statisch) .s2-ds{padding-block:0}
  html.s2-js:not(.s2-statisch) .s2-ds .s2-buehne{height:calc(100vh + var(--s2-schritte) * var(--s2-weg))}
  html.s2-js:not(.s2-statisch) .s2-ds .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) .s2-ds-zwei{--g:clamp(40px,5vw,88px);position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--g);align-items:center}
  html.s2-js:not(.s2-statisch) .s2-ds-feld{display:block;height:min(640px,calc(100svh - var(--s2-leiste) - 64px));min-height:460px;border-radius:var(--s2-r-kachel)}
  /* Fenster: alle 4 Punkte in derselben Gitterzelle, Fenster schneidet ab (nicht positioniert, damit die Mini-Ansichten NICHT mitgeschnitten werden) */
  html.s2-js:not(.s2-statisch) .s2-ds-fenster{display:grid;gap:0;overflow:hidden;height:220px}
  html.s2-js:not(.s2-statisch) .s2-ds-punkt{grid-area:1/1;display:flex;align-items:center}
  html.s2-js:not(.s2-statisch) .s2-ds-wort{width:100%;will-change:transform,opacity}
  html.s2-js:not(.s2-statisch) .s2-ds-wort .s2-h3{font-size:clamp(28px,1.6vw + 8px,34px)}
  /* Mini-Ansichten liegen genau über der rechten Spalte (Bezug: .s2-ds-zwei) */
  html.s2-js:not(.s2-statisch) .s2-ds-mini{position:absolute;z-index:1;top:0;bottom:0;right:0;width:calc((100% - var(--g)) / 2);min-height:0;padding:40px;
    display:grid;place-items:center;background:none;overflow:visible;pointer-events:none;border-radius:0}
  html.s2-js:not(.s2-statisch) .s2-ds-mini::after{display:none}
  html.s2-js:not(.s2-statisch) .s2-ds-bild{will-change:transform,opacity}
  /* vor dem ersten Takt: nur Punkt 1 sichtbar */
  html.s2-js:not(.s2-statisch) .s2-ds-punkt+.s2-ds-punkt .s2-ds-wort,
  html.s2-js:not(.s2-statisch) .s2-ds-punkt+.s2-ds-punkt .s2-ds-bild{opacity:0}
  /* Takt: 4 kurze Balken, der aktuelle füllt sich beim Scrollen */
  html.s2-js:not(.s2-statisch) .s2-ds-takt{display:flex;gap:8px;margin-top:18px}
  .s2-ds-takt i{display:block;width:44px;height:3px;border-radius:2px;background:var(--s2-linie);overflow:hidden}
  .s2-ds-takt b{display:block;width:100%;height:100%;background:var(--s2-schwarz);transform-origin:0 50%;transform:scaleX(0);will-change:transform}
}
@media (min-width:761px) and (max-height:760px){
  html.s2-js:not(.s2-statisch) .s2-ds-links .s2-kopf{margin-bottom:16px}
  html.s2-js:not(.s2-statisch) .s2-ds-links .s2-h2{font-size:clamp(34px,3.4vw + 4px,52px)}
  html.s2-js:not(.s2-statisch) .s2-ds-fenster{height:200px}
}
@media (min-width:761px) and (max-width:980px){
  html.s2-js:not(.s2-statisch) .s2-ds-zwei{--g:32px}
  html.s2-js:not(.s2-statisch) .s2-ds-mini{padding:24px}
}

/* ---------- Handy ---------- */
@media (max-width:760px){
  .s2-ds-links .s2-h2{max-width:16ch}
  .s2-ds-links .s2-kopf{margin-bottom:36px}
  .s2-ds-fenster{gap:40px}
  .s2-ds-wort{grid-template-columns:40px minmax(0,1fr);gap:14px}
  .s2-ds-sym{width:40px;height:40px}
  .s2-ds-sym .s2-ic{width:20px;height:20px}
  .s2-ds-wort .s2-h3{margin-top:4px}
  .s2-ds-wort p{font-size:15.5px}
  .s2-ds-mini{padding:28px 16px}
}

/* ===== 18.10.2026 HANDY mit Bewegung (siegel.js setzt .ds-h nur bis 760 px, nie im Endzustand). Desktop unverändert. =====
   Die Sektion klebt kurz (100svh + 4 x 28svh), oben Titel, darunter die bunte Fläche mit der Mini-Ansicht, darunter ein Punkt und die Takt-Balken.
   Punkt für Punkt wechselt der Text (neuer kommt von unten), das Bild darüber überblendet mit. Mini-Ansicht passt sich der Fläche an (--ds-sk). */
@media (max-width:760px){
  html.s2-js:not(.s2-statisch) .s2-ds.ds-h{padding-block:0}
  html.s2-js:not(.s2-statisch) .s2-ds.ds-h .s2-buehne{height:calc(100vh + 4 * 28vh);height:calc(100svh + 4 * 28svh)}
  html.s2-js:not(.s2-statisch) .s2-ds.ds-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) .s2-ds.ds-h .s2-ds-zwei{position:relative;display:flex;flex-direction:column}
  html.s2-js:not(.s2-statisch) .s2-ds.ds-h .s2-ds-links{display:contents}
  html.s2-js:not(.s2-statisch) .s2-ds.ds-h .s2-ds-links .s2-kopf{order:1;margin-bottom:16px}
  html.s2-js:not(.s2-statisch) .s2-ds.ds-h .s2-ds-links .s2-kopf>.s2-chip{margin-bottom:14px}
  html.s2-js:not(.s2-statisch) .s2-ds.ds-h .s2-ds-links .s2-h2{font-size:clamp(28px,8.4vw,34px)}
  html.s2-js:not(.s2-statisch) .s2-ds.ds-h .s2-ds-links .s2-kopf>.s2-text{display:none}
  html.s2-js:not(.s2-statisch) .s2-ds.ds-h .s2-ds-feld{order:2;display:block;height:clamp(190px,calc(100svh - 500px),340px);border-radius:24px}
  html.s2-js:not(.s2-statisch) .s2-ds.ds-h .s2-ds-fenster{order:3;display:grid;gap:0;overflow:hidden;height:170px;margin-top:18px}
  html.s2-js:not(.s2-statisch) .s2-ds.ds-h .s2-ds-punkt{grid-area:1/1;display:block}
  html.s2-js:not(.s2-statisch) .s2-ds.ds-h .s2-ds-wort{will-change:transform,opacity}
  html.s2-js:not(.s2-statisch) .s2-ds.ds-h .s2-ds-wort .s2-h3{font-size:24px}
  html.s2-js:not(.s2-statisch) .s2-ds.ds-h .s2-ds-wort p{font-size:15px;margin-top:6px}
  html.s2-js:not(.s2-statisch) .s2-ds.ds-h .s2-ds-mini{position:absolute;z-index:1;left:0;right:0;top:var(--ds-fo,0px);height:var(--ds-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) .s2-ds.ds-h .s2-ds-mini::after{display:none}
  html.s2-js:not(.s2-statisch) .s2-ds.ds-h .s2-ds-mini>.s2-ds-bild{will-change:transform,opacity;zoom:var(--ds-sk,1)}
  html.s2-js:not(.s2-statisch) .s2-ds.ds-h .s2-ds-punkt+.s2-ds-punkt .s2-ds-wort,
  html.s2-js:not(.s2-statisch) .s2-ds.ds-h .s2-ds-punkt+.s2-ds-punkt .s2-ds-bild{opacity:0}
  html.s2-js:not(.s2-statisch) .s2-ds.ds-h .s2-ds-takt{order:4;display:flex;gap:8px;margin-top:10px}
  .s2-ds.ds-h .s2-ds-takt i{display:block;width:40px;height:3px;border-radius:2px;background:var(--s2-linie);overflow:hidden}
  .s2-ds.ds-h .s2-ds-takt b{display:block;width:100%;height:100%;background:var(--s2-schwarz);transform-origin:0 50%;transform:scaleX(0);will-change:transform}
}

/* ===== 18.10.2026 Handy-Bugrunde 2 (nur bis 760 px mit Bewegung, Desktop unverändert) =====
   Am Ende der Geschichte treibt der letzte Punkt ("Server in Deutschland") um ca. 9 px nach oben (siegel.js), das Fenster schnitt dabei
   den runden Rand des Schloss-Symbols oben ab. 12 px Luft oben im Fenster; Fenster und Takt-Balken bleiben an derselben Stelle. */
@media (max-width:760px){
  html.s2-js:not(.s2-statisch) .s2-ds.ds-h .s2-ds-fenster{padding-top:12px;margin-top:6px;height:182px}
}

/* ===== 02.11.2026 c (Gründer): 4 Striche weg, Kreis-Icon nicht abgeschnitten, Titel und Text linksbündig neben dem Icon ===== */
html.s2-js .s2-ds-takt,html.s2-js:not(.s2-statisch) .s2-ds-takt,.s2-ds.ds-h .s2-ds-takt,html.s2-js:not(.s2-statisch) .s2-ds.ds-h .s2-ds-takt{display:none!important}
#s2 .s2-ds-wort,#s2 .s2-ds-wort .s2-h3,#s2 .s2-ds-wort p{text-align:left}
.s2-ds-fenster,html.s2-js:not(.s2-statisch) .s2-ds-fenster{padding-left:8px;padding-right:8px;padding-top:8px;box-sizing:border-box}
html.s2-js:not(.s2-statisch) .s2-ds-fenster{margin-left:-8px}

/* 02.11.2026 (Gründer, nur Handy): die vier Datenschutz-Punkte laufen von selbst von rechts nach links durch; Text oben (Überschrift + Satz) tauscht sich mit jedem Punkt, Bild darunter. Kein Zutun nötig. */
@media (max-width:760px){
  #s2-siegel .s2-ds-fenster{display:flex!important;overflow:hidden!important;gap:0!important;padding:0!important;margin:0!important;height:auto!important}
  #s2-siegel .s2-ds-punkt{flex:0 0 100%!important;width:100%!important;display:block!important;position:static!important;opacity:1!important;animation:s2dsLauf 24s cubic-bezier(.65,0,.35,1) infinite}
  #s2-siegel .s2-ds-wort,#s2-siegel .s2-ds-bild{opacity:1!important}
  #s2-siegel .s2-ds-mini{position:static!important;height:auto!important;margin-top:18px}
  @keyframes s2dsLauf{0%,20%{transform:translateX(0)}25%,45%{transform:translateX(-100%)}50%,70%{transform:translateX(-200%)}75%,95%{transform:translateX(-300%)}100%{transform:translateX(0)}}
}

/* 03.11.2026 (Gründer, nur Handy): Datenschutz-Punkte wechseln viel schneller (12 s statt 24 s) und hängen nicht mehr zusammen: Lücke zwischen den Punkten, der nächste ist beim Wechseln nicht sichtbar. */
@media (max-width:760px){
  #s2-siegel .s2-ds-fenster{gap:60px!important}
  #s2-siegel .s2-ds-punkt{animation:s2dsLauf2 12s cubic-bezier(.65,0,.35,1) infinite!important}
  @keyframes s2dsLauf2{0%,18%{transform:translateX(0)}25%,43%{transform:translateX(calc(-100% - 60px))}50%,68%{transform:translateX(calc(-200% - 120px))}75%,93%{transform:translateX(calc(-300% - 180px))}100%{transform:translateX(0)}}
}

/* 03.11.2026 (Gründer, nur Handy): oben in den Datenschutz-Punkten Symbol, Überschrift und Satz weg, nur die Bilder laufen. */
@media (max-width:760px){#s2-siegel .s2-ds-wort{display:none!important}#s2-siegel .s2-ds-mini{margin-top:0!important}}

/* ===== SEKTION integrationen ===== */
/* INTEGRATIONEN V2 (15.10.2026, E51): Logo-Band läuft hinter dem großen SmartChat-Logo durch (Vorbild chatsuite.com) */
.s2-int-buehne{position:relative;height:300px;margin-top:clamp(28px,4vw,52px);display:grid;place-items:center}
.s2-int-band{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);overflow:hidden;padding:26px 0;
  -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-int-spur{display:flex;gap:28px;width:max-content;animation:s2-int-lauf 90s linear infinite}
.s2-int-k{flex:none;width:84px;height:84px;border-radius:18px;background:#fff;display:grid;place-items:center;
  box-shadow:0 1px 2px rgba(13,13,16,.06),0 8px 22px rgba(13,13,16,.08),0 0 0 1px rgba(13,13,16,.05)}
.s2-int-k i,.s2-int-p i{display:block;background:var(--c);-webkit-mask:var(--u) center/contain no-repeat;mask:var(--u) center/contain no-repeat}
.s2-int-k i{width:44px;height:44px}
/* 17.10.2026 (Gründer): weißer Kasten und Rand weg, nur die freigestellte Logo-Kugel (rosa mit Stern), größer, Schatten darunter stärker */
.s2-int-mitte{position:relative;z-index:2;width:152px;height:152px;display:grid;place-items:center}
.s2-int-mitte::after{content:"";position:absolute;z-index:-1;left:12%;right:12%;bottom:-20px;height:30px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(13,13,16,.34),rgba(13,13,16,0));filter:blur(3px);pointer-events:none}
.s2-int-mitte img{display:block;width:100%;height:100%;border-radius:50%;
  box-shadow:0 30px 44px -16px rgba(13,13,16,.42),0 12px 22px -8px rgba(13,13,16,.22)}
.s2-int-partner{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:8px}
.s2-int-p{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 12px;border-radius:999px;background:#fff;font:600 15px/1 var(--s2-sans);color:var(--s2-schwarz);
  box-shadow:0 0 0 1px rgba(13,13,16,.08),0 4px 12px rgba(13,13,16,.05)}
.s2-int-p i{width:20px;height:20px}
@keyframes s2-int-lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.s2-int-spur{animation:none}}
@media (max-width:760px){.s2-int-buehne{height:220px}.s2-int-k{width:64px;height:64px;border-radius:14px}.s2-int-k i{width:34px;height:34px}.s2-int-spur{gap:18px}
  .s2-int-mitte{width:112px;height:112px}.s2-int-mitte::after{bottom:-15px;height:22px}}

/* 18.10.2026 (flüssig): Band läuft nur, solange es zu sehen ist (basis.js setzt .s2-lebt über data-s2-lauf), sonst pausiert es an seiner Stelle.
   Tempo und Bewegung unverändert (CSS-Animation mit transform). */
.s2-int-spur{animation-play-state:paused}
.s2-int-band.s2-lebt .s2-int-spur,html.s2-statisch .s2-int-spur{animation-play-state:running}

/* 18.10.2026 Runde 3 (Gründer): bunter Schein rundherum hinter dem Logo statt nur dunklem Schatten unten.
   Eigenes Element .s2-int-hof mit fertigem Verlauf (Pink oben, Flieder rechts, Orange unten, Gelb links), kein filter, kein animierter Schatten.
   Atmet ganz langsam nur per transform/opacity und nur, solange es zu sehen ist (data-s2-lauf -> .s2-lebt aus basis.js). Sicherung: *.vor-runde3-18-10 */
.s2-int-mitte::after{display:none}
.s2-int-mitte img{position:relative;box-shadow:0 14px 30px -14px rgba(13,13,16,.26)}
.s2-int-hof{position:absolute;z-index:-1;left:50%;top:50%;width:250%;height:250%;margin:-125% 0 0 -125%;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(34% 34% at 50% 34%,rgba(240,142,198,.78) 0%,rgba(240,142,198,.32) 52%,rgba(240,142,198,0) 100%),
    radial-gradient(34% 34% at 66% 50%,rgba(216,166,234,.78) 0%,rgba(216,166,234,.32) 52%,rgba(216,166,234,0) 100%),
    radial-gradient(34% 34% at 50% 66%,rgba(245,154,44,.62) 0%,rgba(245,154,44,.26) 52%,rgba(245,154,44,0) 100%),
    radial-gradient(34% 34% at 34% 50%,rgba(246,216,112,.78) 0%,rgba(246,216,112,.32) 52%,rgba(246,216,112,0) 100%);
  transform:scale(.96);will-change:transform,opacity;
  animation:s2-int-atmen 9s ease-in-out infinite alternate;animation-play-state:paused}
.s2-int-hof.s2-lebt{animation-play-state:running}
@keyframes s2-int-atmen{from{transform:scale(.94) rotate(0deg);opacity:.86}to{transform:scale(1.05) rotate(16deg);opacity:1}}
html.s2-statisch .s2-int-hof{animation:none;transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.s2-int-hof{animation:none;transform:none;opacity:1}}
@media (max-width:760px){.s2-int-hof{width:230%;height:230%;margin:-115% 0 0 -115%}}

/* ===== 18.10.2026 HANDY: Logo springt mit Feder herein (data-rv="zoom" setzt integrationen.js nur am Handy). ===== */
@media (max-width:760px){
  html.s2-js:not(.s2-statisch) .s2-integrationen.int-h .s2-int-mitte[data-rv]{transform:scale(.6);transition:opacity 700ms var(--s2-kurve),transform 900ms cubic-bezier(.34,1.56,.64,1)}
  html.s2-js:not(.s2-statisch) .s2-integrationen.int-h .s2-int-mitte[data-rv].s2-da{transform:none}
  /* das Band ist per translateY(-50%) mittig, das muss beim Hereingleiten bleiben */
  html.s2-js:not(.s2-statisch) .s2-integrationen.int-h .s2-int-band[data-rv]{transform:translate3d(48px,-50%,0)}
  html.s2-js:not(.s2-statisch) .s2-integrationen.int-h .s2-int-band[data-rv].s2-da{transform:translate3d(0,-50%,0)}
}

/* 02.11.2026 c (Gründer): Schatten kleiner und dichter (weniger Blur, mehr Deckkraft) */
.s2-int-k{box-shadow:0 1px 2px rgba(13,13,16,.12),0 3px 8px rgba(13,13,16,.16),0 0 0 1px rgba(13,13,16,.07)}
.s2-int-mitte::after{height:18px;bottom:-12px;background:radial-gradient(closest-side,rgba(13,13,16,.5),rgba(13,13,16,0));filter:blur(1.5px)}
.s2-int-mitte img{box-shadow:0 16px 20px -12px rgba(13,13,16,.6),0 6px 10px -5px rgba(13,13,16,.38)}
@media (max-width:760px){.s2-br-desk{display:none}}

/* 02.11.2026 e (Gründer): Glow hinter der Kugel kleiner im Volumen, dafür dunkler und kräftiger */
.s2-int-hof{width:165%;height:165%;margin:-82.5% 0 0 -82.5%;background:
    radial-gradient(36% 36% at 50% 34%,rgba(232,96,176,.98) 0%,rgba(232,96,176,.55) 50%,rgba(232,96,176,0) 100%),
    radial-gradient(36% 36% at 66% 50%,rgba(190,128,226,.98) 0%,rgba(190,128,226,.55) 50%,rgba(190,128,226,0) 100%),
    radial-gradient(36% 36% at 50% 66%,rgba(242,128,16,.95) 0%,rgba(242,128,16,.5) 50%,rgba(242,128,16,0) 100%),
    radial-gradient(36% 36% at 34% 50%,rgba(244,196,60,.98) 0%,rgba(244,196,60,.55) 50%,rgba(244,196,60,0) 100%)}
@media (max-width:760px){.s2-int-hof{width:165%;height:165%;margin:-82.5% 0 0 -82.5%}}

/* ===== SEKTION preise ===== */
/* 02.11.2026 c: 1:1 von unterseiten/inhalte/preise/medien/preise.css + Inline-Style der Preisseite */

.s2-preise .s2-preise-kopf{margin-bottom:36px}
.s2-preise .s2-preise-kopf .s2-text{max-width:46ch}
.s2-preise .s2-preise-schalter-platz{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:clamp(40px,4.4vw,64px)}
.s2-preise .s2-preise-schalter{display:inline-flex;gap:4px;padding:4px;border-radius:var(--s2-r-rund);background:var(--s2-flaeche)}
.s2-preise .s2-preise-schalter button{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 17px;border-radius:var(--s2-r-rund);
  font:600 14px/1 var(--s2-sans);color:var(--s2-grau);white-space:nowrap;transition:background-color 200ms var(--s2-kurve),color 200ms var(--s2-kurve),box-shadow 200ms var(--s2-kurve)}
.s2-preise .s2-preise-schalter button:hover{color:var(--s2-schwarz)}
.s2-preise .s2-preise-schalter button.an{background:var(--s2-weiss);color:var(--s2-schwarz);box-shadow:0 0 0 1px var(--s2-linie),0 2px 6px rgba(20,20,20,.06)}
.s2-preise .s2-preise-schalter button:focus-visible{outline:2px solid var(--s2-schwarz);outline-offset:2px}
.s2-preise .s2-preise-schalter .spar{font-size:12px;font-weight:600;color:var(--s2-grau-hell);font-variant-numeric:tabular-nums}
.s2-preise .s2-preise-schalter button.an .spar{color:var(--s2-schwarz)}
.s2-preise .s2-preise-laufzeit{min-height:19px;text-align:center}
.s2-preise .s2-preise-band{width:100%;max-width:calc(var(--s2-breite) + 2 * var(--s2-rand));margin-inline:auto;padding-inline:var(--s2-rand)}
.s2-preise .s2-preise-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2-spalt);align-items:stretch}
.s2-preise .s2-preise-karte{position:relative;display:flex;flex-direction:column;padding:8px;border-radius:var(--s2-r-kachel);background:var(--s2-weiss);box-shadow:var(--s2-schatten-ruhig)}
.s2-preise .s2-preise-karte.beliebt{box-shadow:var(--s2-schatten-schwebe)}
.s2-preise .s2-preise-bild{height:96px;min-height:0;border-radius:calc(var(--s2-r-kachel) - 8px)}
.s2-preise .s2-preise-marke{position:absolute;z-index:2;top:22px;left:22px;height:28px;padding:0 12px;font-size:12px}
.s2-preise .s2-preise-inhalt{display:flex;flex-direction:column;flex:1;padding:24px 16px 18px}
.s2-preise .s2-preise-satz{margin-top:8px;min-height:3em;line-height:1.5;text-wrap:pretty}
.s2-preise .s2-preise-preis{display:flex;align-items:baseline;margin-top:24px;white-space:nowrap}
.s2-preise .s2-preise-zahl{display:inline-block;font-family:var(--s2-sans);font-weight:600;font-size:clamp(50px,3.6vw,58px);line-height:.9;letter-spacing:-.025em;
  color:var(--s2-schwarz);font-variant-numeric:tabular-nums;transition:opacity 220ms var(--s2-kurve),transform 420ms var(--s2-kurve)}
.s2-preise .s2-preise-zahl.wechselt{opacity:0;transform:translate3d(0,8px,0)}
.s2-preise .s2-preise-eur{margin-left:3px;font-family:var(--s2-sans);font-weight:600;font-size:28px;line-height:1;color:var(--s2-schwarz)}
.s2-preise .s2-preise-pro{margin-left:10px;font-size:14px;line-height:1;color:var(--s2-grau)}
.s2-preise .s2-preise-gesamt{margin-top:10px;min-height:19px;font-variant-numeric:tabular-nums}
.s2-preise .s2-preise-knopf{width:100%;margin-top:22px}
.s2-preise .s2-preise-liste{display:flex;flex-direction:column;gap:13px;margin-top:22px;padding-top:20px;border-top:1px solid var(--s2-linie)}
.s2-preise .s2-preise-liste li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.4;color:var(--s2-tinte)}
.s2-preise .s2-preise-liste li b{color:var(--s2-schwarz);font-weight:600}
.s2-preise .s2-preise-liste .s2-ic{width:17px;height:17px;margin-top:1px;color:var(--s2-grau-hell)}
.s2-preise .s2-preise-punkte{display:none}
.s2-preise .s2-preise-immer{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:clamp(36px,3.6vw,52px)}
.s2-preise .s2-preise-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:820px;margin-top:22px}
.s2-preise .s2-preise-chips .s2-chip{color:var(--s2-tinte)}
.s2-preise .s2-preise-chips .s2-ic{color:var(--s2-grau)}
.s2-preise .s2-preise-immer .s2-link-pfeil{margin-top:0}
.s2-preise .s2-preise-fuss{margin-top:18px;max-width:52ch;text-wrap:balance}
.s2-preise .s2-preise-belege{text-align:center}
@media (max-width:1080px){
  .s2-preise .s2-preise-reihe{grid-template-columns:repeat(2,minmax(0,1fr));max-width:780px;margin-inline:auto}
  .s2-preise .s2-preise-satz{min-height:0}
}
@media (max-width:600px){
  .s2-preise .s2-preise-kopf{margin-bottom:28px}
  .s2-preise .s2-preise-schalter-platz{margin-bottom:12px}
  .s2-preise .s2-preise-schalter button{height:44px;padding:0 11px;font-size:13.5px;gap:5px}
  .s2-preise .s2-preise-schalter .spar{font-size:11.5px}
  .s2-preise .s2-preise-band{padding-inline:0}
  .s2-preise .s2-preise-reihe{display:flex;gap:12px;max-width:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    padding:20px var(--s2-rand) 28px;scroll-padding-inline:var(--s2-rand);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .s2-preise .s2-preise-reihe::-webkit-scrollbar{display:none}
  .s2-preise .s2-preise-karte{flex:0 0 84%;scroll-snap-align:start}
  .s2-preise .s2-preise-bild{height:80px}
  .s2-preise .s2-preise-marke{top:20px;left:20px}
  .s2-preise .s2-preise-inhalt{padding:22px 14px 16px}
  .s2-preise .s2-preise-satz{min-height:0}
  .s2-preise .s2-preise-zahl{font-size:52px}
  .s2-preise .s2-preise-liste li{font-size:15px}
  .s2-preise .s2-preise-punkte{display:flex;justify-content:center;gap:8px;margin-top:2px}
  .s2-preise .s2-preise-punkte i{width:7px;height:7px;border-radius:50%;background:var(--s2-linie-stark);transition:background-color 300ms var(--s2-kurve)}
  .s2-preise .s2-preise-punkte i.an{background:var(--s2-schwarz)}
  .s2-preise .s2-preise-chips{gap:8px}
}
.s2-preise .s2-preise-immer .s2-link-pfeil{position:relative}
.s2-preise .s2-preise-immer .s2-link-pfeil::after{content:"";position:absolute;left:-8px;right:-8px;top:-12px;bottom:-12px}
.s2-preise .s2-pv{margin-top:clamp(96px,9vw,140px)}
.s2-preise .s2-pv-kopf{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;margin-bottom:clamp(36px,4vw,56px)}
.s2-preise .s2-pv-kopf .s2-text{max-width:52ch}
.s2-preise .s2-pv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.s2-preise .s2-pv-tabs-platz{display:none}
.s2-preise .s2-pv-tabelle{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:15px;color:var(--s2-tinte)}
.s2-preise .s2-pv-tabelle th,.s2-preise .s2-pv-tabelle td{padding:0;font-weight:400;text-align:left;vertical-align:middle}
.s2-preise .s2-pv-tabelle thead th{width:17.5%}
.s2-preise .s2-pv-tabelle thead th.s2-pv-ecke{width:30%}
.s2-preise .s2-pv-tabelle thead th{position:sticky;top:var(--s2-leiste);z-index:3;background:var(--s2-weiss);
  padding:22px 14px 20px;border-bottom:1px solid var(--s2-linie-stark);vertical-align:bottom}
.s2-preise .s2-pv-tabelle thead th.s2-pv-ecke{padding-left:0}
.s2-preise .s2-pv-tabelle thead th:not(.s2-pv-ecke){text-align:center}
.s2-preise .s2-pv-name{display:block;font:600 16px/1.2 var(--s2-sans);color:var(--s2-schwarz)}
.s2-preise .s2-pv-preis{display:flex;align-items:baseline;justify-content:center;gap:3px;margin-top:8px;font-family:var(--s2-sans);font-weight:600;font-size:24px;line-height:1;color:var(--s2-schwarz);white-space:nowrap}
.s2-preise .s2-pv-zahl{font-size:40px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:opacity 220ms var(--s2-kurve)}
.s2-preise .s2-pv-zahl.wechselt{opacity:0}
.s2-preise .s2-pv-pro{margin-left:4px;font:400 13px/1 var(--s2-sans);color:var(--s2-grau)}
.s2-preise .s2-pv-knopf{width:100%;max-width:190px;height:42px;margin-top:16px;padding:0 14px;font-size:14px}
.s2-preise .s2-pv-tabelle.klebt thead th{box-shadow:0 calc(-1 * var(--s2-leiste)) 0 0 var(--s2-weiss),0 8px 16px -12px rgba(20,20,20,.18)}
.s2-preise .s2-pv-gruppe th{padding:44px 0 14px;font:600 13px/1.3 var(--s2-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--s2-schwarz);
  border-bottom:1px solid var(--s2-linie-stark)}
.s2-preise .s2-pv-tabelle tbody:first-of-type .s2-pv-gruppe th{padding-top:32px}
.s2-preise .s2-pv-tabelle tbody tr:not(.s2-pv-gruppe) th,.s2-preise .s2-pv-tabelle tbody td{border-bottom:1px solid var(--s2-linie)}
.s2-preise .s2-pv-tabelle tbody tr:not(.s2-pv-gruppe) th{padding:17px 24px 17px 0;font-size:15.5px;line-height:1.4;color:var(--s2-tinte)}
.s2-preise .s2-pv-tabelle tbody td{padding:14px 10px;text-align:center;line-height:1.3}
.s2-preise .s2-pv-tabelle tbody tr:not(.s2-pv-gruppe):hover>*{background:var(--s2-flaeche-ruhig)}
.s2-preise .s2-pv-tabelle td b{display:block;font-weight:600;font-size:15.5px;color:var(--s2-schwarz);font-variant-numeric:tabular-nums}
.s2-preise .s2-pv-tabelle td b+span{display:block;margin-top:3px;font-size:12.5px;color:var(--s2-grau-hell)}
.s2-preise .s2-pv-ja{width:20px;height:20px;margin:0 auto;color:var(--s2-schwarz)}
.s2-preise .s2-pv-nein{display:block;width:18px;height:18px;margin:0 auto;color:var(--s2-grau-hell)}
.s2-preise .s2-pv .s2-preise-fuss{margin:28px auto 0;text-align:center}
@media (max-width:1080px){
  .s2-preise .s2-pv-tabelle thead th.s2-pv-ecke{width:26%}
  .s2-preise .s2-pv-zahl{font-size:32px}
  .s2-preise .s2-pv-knopf{height:40px;font-size:12.5px;padding:0 6px}
  .s2-preise .s2-pv-tabelle thead th{padding-inline:6px}
}
@media (max-width:760px){
  .s2-preise .s2-pv-tabs-platz{display:block;position:sticky;top:var(--s2-leiste);z-index:4;margin:0 calc(-1 * var(--s2-rand)) 4px;padding:8px var(--s2-rand);background:var(--s2-weiss)}
  .s2-preise .s2-pv-tabs-platz.klebt{box-shadow:0 -40px 0 0 var(--s2-weiss),0 calc(-1 * var(--s2-leiste)) 0 0 var(--s2-weiss),0 1px 0 var(--s2-linie)}
  .s2-preise .s2-pv-tabs{display:flex;gap:4px;padding:4px;border-radius:var(--s2-r-rund);background:var(--s2-flaeche)}
  .s2-preise .s2-pv-tabs button{flex:1;height:44px;border-radius:var(--s2-r-rund);font:600 14px/1 var(--s2-sans);color:var(--s2-grau);
    transition:background-color 200ms var(--s2-kurve),color 200ms var(--s2-kurve),box-shadow 200ms var(--s2-kurve)}
  .s2-preise .s2-pv-tabs button.an{background:var(--s2-weiss);color:var(--s2-schwarz);box-shadow:0 0 0 1px var(--s2-linie),0 2px 6px rgba(20,20,20,.06)}
  .s2-preise .s2-pv-tabs button:focus-visible{outline:2px solid var(--s2-schwarz);outline-offset:2px}
  .s2-preise .s2-pv-tabelle.w0 [data-t]:not([data-t="0"]),.s2-preise .s2-pv-tabelle.w1 [data-t]:not([data-t="1"]),
  .s2-preise .s2-pv-tabelle.w2 [data-t]:not([data-t="2"]),.s2-preise .s2-pv-tabelle.w3 [data-t]:not([data-t="3"]){display:none}
  .s2-preise .s2-pv-tabelle{table-layout:auto}
  .s2-preise .s2-pv-tabelle thead th{position:static;width:auto;padding:18px 0 18px}
  .s2-preise .s2-pv-tabelle thead th.s2-pv-ecke{width:60%;vertical-align:middle}
  .s2-preise .s2-pv-tabelle thead th:not(.s2-pv-ecke){text-align:right}
  .s2-preise .s2-pv-tabelle thead th:not(.s2-pv-ecke) .s2-pv-preis{justify-content:flex-end}
  .s2-preise .s2-pv-name{display:none}
  .s2-preise .s2-pv-zahl{font-size:34px}
  .s2-preise .s2-pv-knopf{max-width:none;width:auto;height:40px;padding:0 14px}
  .s2-preise .s2-pv-gruppe th{padding:32px 0 12px;font-size:12px}
  .s2-preise .s2-pv-tabelle tbody tr:not(.s2-pv-gruppe) th{padding:15px 12px 15px 0;font-size:15px}
  .s2-preise .s2-pv-tabelle tbody td{padding:12px 0 12px 8px;text-align:right;white-space:nowrap}
  .s2-preise .s2-pv-ja,.s2-preise .s2-pv-nein{margin:0 0 0 auto}
  .s2-preise .s2-pv-tabelle tbody tr:not(.s2-pv-gruppe):hover>*{background:none}
}
html.s2-js .s2-preise .s2-pv-klapp:not(.auf) .s2-pv-mehr{display:none}
.s2-preise .s2-pv-klapp.laeuft{overflow:clip;transition:height 560ms var(--s2-kurve)}
.s2-preise .s2-pv-mehr-platz{display:none;justify-content:center;margin-top:28px}
html.s2-js .s2-preise .s2-pv-mehr-platz{display:flex}
.s2-preise .s2-pv-mehr-knopf{height:48px;padding:0 22px;font-size:15px}
.s2-preise .s2-pv-pfeil{width:16px;height:16px;transition:transform 400ms var(--s2-kurve)}
.s2-preise .s2-pv-mehr-knopf[aria-expanded="true"] .s2-pv-pfeil{transform:rotate(180deg)}
.s2-preise .s2-pv-mehr-knopf:hover .s2-pv-pfeil{transform:translateY(2px)}
.s2-preise .s2-pv-mehr-knopf[aria-expanded="true"]:hover .s2-pv-pfeil{transform:rotate(180deg) translateY(2px)}
@media (prefers-reduced-motion:reduce){.s2-preise .s2-pv-klapp.laeuft{transition:none}.s2-preise .s2-pv-pfeil{transition:none}}
@media (max-width:760px){.s2-preise .s2-pv-mehr-platz{margin-top:22px}.s2-preise .s2-pv-mehr-knopf{width:100%}}


.s2u-pr .s2u-pr-wahl{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.s2u-pr.s2-preise{padding:0}
.s2u-faq>h2{text-align:center;margin-inline:auto}
.s2u-pr .s2u-pr-lz[hidden]{display:none}
.s2u-pr.s2-preise,.s2u-pr .s2-rahmen.s2-pv{margin-top:0}
.s2u-pr .s2u-pr-lz{margin-bottom:clamp(28px,3vw,44px)}
.s2-preise .s2u-pr-gesamt{display:block;min-height:16px;margin-top:6px;font:400 12.5px/1.3 var(--s2-sans);color:var(--s2-grau-hell);font-variant-numeric:tabular-nums}
.s2-preise .s2-pv-tabelle tbody.s2u-pr-usp-zeile td{padding:22px 0 6px;border-bottom:0;text-align:left;white-space:normal;background:none}
.s2-preise .s2-pv-tabelle tbody.s2u-pr-usp-zeile tr:hover>*{background:none}
.s2u-pr .s2u-pr-usp{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:10px 44px;margin:0;padding:0;list-style:none}
@media (max-width:1100px){.s2u-pr .s2u-pr-usp{grid-template-columns:repeat(2,auto);gap:10px 32px}}
.s2u-pr .s2u-pr-usp li{display:inline-flex;align-items:center;gap:8px;margin:0;padding:0;font:500 14px/1.35 var(--s2-sans);color:var(--s2-tinte)}
.s2u-pr .s2u-pr-usp li::before{content:none}
.s2u-pr .s2u-pr-usp .s2-ic{flex:none;width:16px;height:16px;color:var(--s2-schwarz)}
@media (max-width:760px){
  .s2-preise .s2-pv-tabelle tbody.s2u-pr-usp-zeile td{padding:14px 0 4px}
  .s2u-pr .s2u-pr-usp{display:grid;grid-template-columns:1fr;gap:9px;justify-content:start}
  .s2u-pr .s2u-pr-usp li{font-size:14px}
  .s2u-pr .s2u-pr-lz{margin-bottom:16px}
}
.s2u-pr .s2-rahmen.s2-pv{padding-left:0;padding-right:0;max-width:none}
@media (max-width:760px){
  .s2u-pr .s2-pv-tabs label{flex:1;display:grid;place-items:center;height:44px;border-radius:var(--s2-r-rund);font:600 14px/1 var(--s2-sans);color:var(--s2-grau);cursor:pointer}
  .s2u-pr #s2u-pr-t0:checked ~ .s2-pv-tabs-platz label[for="s2u-pr-t0"],.s2u-pr #s2u-pr-t1:checked ~ .s2-pv-tabs-platz label[for="s2u-pr-t1"],
  .s2u-pr #s2u-pr-t2:checked ~ .s2-pv-tabs-platz label[for="s2u-pr-t2"],.s2u-pr #s2u-pr-t3:checked ~ .s2-pv-tabs-platz label[for="s2u-pr-t3"]{background:var(--s2-weiss);color:var(--s2-schwarz);box-shadow:0 0 0 1px var(--s2-linie),0 2px 6px rgba(20,20,20,.06)}
  .s2u-pr #s2u-pr-t0:checked ~ .s2-pv-klapp [data-t]:not([data-t="0"]),.s2u-pr #s2u-pr-t1:checked ~ .s2-pv-klapp [data-t]:not([data-t="1"]),
  .s2u-pr #s2u-pr-t2:checked ~ .s2-pv-klapp [data-t]:not([data-t="2"]),.s2u-pr #s2u-pr-t3:checked ~ .s2-pv-klapp [data-t]:not([data-t="3"]){display:none}
}
/* Schalter in der Tabellenecke (Gründer 02.11.): gleiche Höhe, Ecken und Schrift wie "Kostenfrei starten" (42 px, Radius 14, 14 px / 600) */
.s2u-pr .s2-pv-ecke .s2u-pr-lz{margin:0;align-items:flex-start;gap:0}
.s2u-pr .s2-pv-ecke .s2-preise-schalter{box-sizing:border-box;height:42px;padding:3px;gap:2px;border-radius:14px}
.s2u-pr .s2-pv-ecke .s2-preise-schalter button{height:36px;padding:0 12px;border-radius:11px;font:600 14px/1 var(--s2-sans);gap:5px;white-space:nowrap}
.s2u-pr .s2-pv-ecke .s2-preise-schalter .spar{display:none}
.s2u-pr .s2-pv-ecke .s2-preise-laufzeit{display:none}
@media (max-width:760px){.s2u-pr .s2-pv-ecke .s2-preise-schalter{height:40px;flex-wrap:nowrap}.s2u-pr .s2-pv-ecke .s2-preise-schalter button{height:34px;padding:0 8px;font-size:12.5px}}
.s2-preise .s2-pv-tabelle tbody tr:not(.s2-pv-gruppe):hover>*{background:none}
/* Tabellenkopf (Gründer 02.11): oben weiß, damit nichts darüber durchscheint, und mehr Luft zur ersten Zeile darunter */
@media (min-width:761px){
.s2-preise .s2-pv-tabelle thead th{padding-bottom:28px;top:calc(var(--s2-leiste) + 28px)}
.s2-preise .s2-pv-tabelle thead th::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:400px;background:var(--s2-weiss);pointer-events:none}
.s2-preise .s2-pv-tabelle thead th.s2-pv-ecke::before{left:-40px}
}
.s2-preise.s2u-pr .s2-rahmen .s2-preise-fuss{padding-bottom:var(--s2-luft)}

.s2u-nur-vorlesen{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 02.11.2026 c: auf der Startseite darf die weiße Fläche über dem Tabellenkopf nur den Klebeabstand decken (sonst verdeckt sie die Sektion darüber) */
@media (min-width:761px){
.s2-preise .s2-pv-tabelle thead th::before{height:calc(var(--s2-leiste) + 28px)}
}

/* 02.11.2026 e (Gründer): wie /preise/ - mittiger Container 1200 px mit Seitenrand, Luft oben und unten */
.s2u-pr .s2-rahmen.s2-pv{width:min(var(--s2-breite),calc(100% - 2 * var(--s2-rand)));max-width:var(--s2-breite);margin-inline:auto}
#s2-preise.s2-preise.s2u-pr{padding-block:var(--s2-luft)}

/* 02.11.2026 (Gründer, nur Handy): Preise-Abschnitt auf der Startseite am Handy raus. Desktop unverändert. */
@media (max-width:760px){#s2-preise{display:none!important}}

/* ===== SEKTION faq ===== */
/* 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}

/* ===== SEKTION fuss ===== */
/* 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 #e3e3e6;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}}