/* ==========================================================================
   TEISENDA Hosting · Landingpage-Entwurf
   Streng nach ci.teisenda.com (CI-Guide v1.0): Tokens aus Abschnitt 09,
   Typoskala aus Abschnitt 04, Header nach Abschnitt 08 „Website header and hero“
   plus den Elementen des Kopfes von teisenda.com (Sprache, Login, Burger).
   Keine Verläufe außer #432B78 → #6A4394, keine Leuchteffekte, keine Partikel.
   ========================================================================== */

@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:italic;font-weight:400 700;font-display:swap;
  src:url("../fonts/instrument-sans-italic-latin.woff2") format("woff2")}

/* TEISENDA — brand tokens v1.0 (CI-Guide, Abschnitt 09) */
:root{
  --v-700:#432B78; --v-600:#6A4394; --v-500:#765BA3;
  --v-400:#8250E6; --v-300:#B49BF0; --v-100:#D8CBF2; --v-050:#F2EDFB;
  --canvas:#141020; --surface:#1E1836; --raised:#2A2145; --dark-border:#3A3255;
  --paper:#FBFAFD; --ink:#1D1D1B;
  --amber:#EDA938; --amber-ink:#8A5B08; --jade:#1E7A5A; --critical:#B3323A;
  --font:"Instrument Sans", system-ui, sans-serif;
  --track-hero:-.042em; --track-head:-.034em; --track-sub:-.012em; --track-body:0;

  /* Schrift auf Dunkel, wie im CI-Mock „Website header and hero“ */
  --head:#F4F1FA; --text:#EDEAF5; --muted:#BCB2D4; --dim:#A79FC0;
  --border-strong:#4A4168; --primary-hover:#915FF0;

  --wrap:1140px; --gutter:24px; --r:14px;
  --section:clamp(64px,9vw,112px);
}

/* Bildlaufleiste (CI-Guide, Abschnitt 09) */
html{scrollbar-color:#8250E6 #1E1836}
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:#1E1836}
::-webkit-scrollbar-thumb{background:#8250E6;border-radius:99px;border:3px solid #1E1836}
::-webkit-scrollbar-thumb:hover{background:#B49BF0}
::-webkit-scrollbar-corner{background:#1E1836}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--canvas);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--v-300);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--v-400);outline-offset:3px;border-radius:6px}
p{margin:0}

/* --- Typoskala (CI-Guide, Abschnitt 04) ---------------------------------- */
h1,h2,h3,h4{margin:0;color:var(--head);font-weight:600}
h1{font-size:clamp(40px,6vw,78px);line-height:1.03;letter-spacing:var(--track-hero);max-width:15ch}
h2{font-size:clamp(27px,3.6vw,42px);line-height:1.06;letter-spacing:var(--track-head);max-width:24ch}
h3{font-size:19px;line-height:1.3;letter-spacing:var(--track-sub)}
.lead{font-size:19px;line-height:1.55;color:var(--muted);max-width:62ch}
.zahl{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .klein{font-size:14px} .nw{white-space:nowrap}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section) 0}
.section--surface{background:var(--surface);border-top:1px solid var(--dark-border);border-bottom:1px solid var(--dark-border)}
.head{display:grid;gap:16px;margin-bottom:40px}
.head--mitte{justify-items:center;text-align:center}
.head--mitte h2,.head--mitte .lead{margin-left:auto;margin-right:auto}

/* Icons: Lucide, Strich 2, Farbe aus dem Kontext (CI-Guide, Abschnitt 06) */
.icon{width:20px;height:20px;flex:none;color:var(--v-300)}
.icon--24{width:24px;height:24px}
.icon--16{width:16px;height:16px}

/* Flaggen (CI-Guide, Abschnitt 06) */
.flag{height:15px;width:auto;flex:none;border-radius:2px;display:inline-block;vertical-align:-3px;box-shadow:0 0 0 1px rgba(255,255,255,.14)}

/* --- Knöpfe: 14 px, 600, Satzschreibung --------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:100px;
  font:600 14px/1.2 var(--font);cursor:pointer;border:1px solid transparent;text-decoration:none!important;white-space:nowrap;
  transition:transform .2s,background .2s,border-color .2s}
.btn--primary{background:var(--v-400);color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.32)}
.btn--primary:hover{background:var(--primary-hover);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--v-400);background:var(--surface)}
.btn--gross{padding:15px 28px;font-size:15px}
.btn .icon{color:#fff;width:18px;height:18px}
.btn--ghost .icon{color:var(--v-300)}

/* --- Kopf: wie teisenda.com, Logo nach CI (solid unter 200 px) ----------- */
/* Oben transparent über dem Schmetterling, beim Scrollen deckend (wie teisenda.com) */
.kopf{position:sticky;top:0;z-index:100;background:transparent;border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.kopf.is-scrolled{background:rgba(20,16,32,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--dark-border)}
.kopf__inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);height:76px;display:flex;align-items:center;gap:26px}
.kopf__logo img{width:128px;height:auto}
.kopf__nav{display:flex;gap:clamp(18px,2.2vw,30px);margin:0 auto;white-space:nowrap}
.kopf__nav a{color:var(--muted);font-size:15px;font-weight:500}
.kopf__nav a:hover{color:var(--text);text-decoration:none}
.kopf__rechts{display:flex;align-items:center;gap:12px;flex:none}
.lang{position:relative}
.lang__btn,.kopf__login{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;border-radius:100px;background:transparent;
  border:1px solid var(--border-strong);color:var(--muted);cursor:pointer;font:500 14px/1 var(--font)}
.lang__btn{padding:0 12px}
.kopf__login{width:38px}
.lang__btn:hover,.kopf__login:hover{color:var(--text);border-color:var(--v-400);text-decoration:none}
.lang__btn .icon,.kopf__login .icon{color:currentColor;width:16px;height:16px}
.lang__menu{position:absolute;top:calc(100% + 10px);right:0;z-index:60;min-width:190px;list-style:none;padding:6px;margin:0;background:#1A1330;
  border:1px solid var(--border-strong);border-radius:14px;display:none}
.lang.is-open .lang__menu{display:block}
.lang__menu a{display:flex;justify-content:space-between;padding:10px 14px;border-radius:9px;color:var(--muted);font-size:14px}
.lang__menu a:hover{background:var(--raised);color:var(--text);text-decoration:none}
.lang__menu a[aria-current=true]{background:var(--v-400);color:#fff;font-weight:600}
.burger{display:none;width:40px;height:40px;padding:0;background:none;border:1px solid var(--border-strong);border-radius:10px;cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{content:"";position:absolute;left:50%;width:17px;height:1.8px;background:var(--text);border-radius:2px;transform:translateX(-50%)}
.burger span{top:50%;margin-top:-.9px}
.burger span::before{top:-6px;left:0;transform:none}
.burger span::after{top:6px;left:0;transform:none}
.mobilmenue{position:absolute;top:100%;left:0;right:0;background:var(--canvas);border-bottom:1px solid var(--dark-border);padding:18px 24px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.mobilmenue a:not(.btn){display:block;padding:12px 0;color:var(--text);font-size:16px;border-bottom:1px solid var(--dark-border)}
.mobilmenue .btn{margin-top:18px;width:100%;display:flex}
@media (max-width:1020px){
  .kopf__nav,.kopf__rechts>.btn{display:none}
  .burger{display:block}
  .kopf__inner{gap:12px}
  .kopf__rechts{margin-left:auto}
}

/* --- Hero: links gesetzt, eine violette Schaltfläche (CI 08) ------------- */
.hero{padding:0}
/* Bühne für den Partikel-Schmetterling: beginnt unter dem Kopf (76 px), füllt den ersten Bildschirm */
/* Bühne nach CI 06 „Embedding it“ (position:relative, min-height:100vh stehen im Markup).
   Sie beginnt unter dem transparenten Kopf; der Text sitzt mittig darüber wie in
   ci.teisenda.com/effects/demo.html (display:grid; place-items:center; text-align:center). */
.hero__buehne{overflow:hidden;margin-top:-76px;padding:calc(76px + 48px) 0 64px;display:grid;place-items:center;text-align:center;
  background:var(--canvas)}
.hero__vorn{position:relative;z-index:1}
.hero__text{display:grid;gap:22px;max-width:820px;margin:0 auto;justify-items:center}
.hero__text h1,.hero__deck{margin-left:auto;margin-right:auto}
.hero__ctas,.mikro{justify-content:center}
.hero__deck{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--muted);max-width:58ch}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mikro{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--muted);list-style:none;margin:0;padding:0}
.mikro li{display:inline-flex;align-items:center;gap:7px}
.mikro .icon{width:16px;height:16px}

/* --- Hero-Shot: Chat links, TEISENDA rechts ------------------------------ */
.heroshot{border:1px solid var(--dark-border);border-radius:16px;background:var(--surface);overflow:hidden}
.heroshot__leiste{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--dark-border);flex-wrap:wrap}
.reiter{display:flex;gap:4px;background:var(--canvas);padding:3px;border-radius:999px}
.reiter button{border:0;background:transparent;color:var(--muted);font:600 13px/1 var(--font);padding:8px 14px;border-radius:999px;cursor:pointer}
.reiter button[aria-selected=true]{background:var(--raised);color:var(--head)}
.heroshot__pause{margin-left:auto;border:1px solid var(--dark-border);background:transparent;color:var(--muted);cursor:pointer;width:32px;height:32px;border-radius:8px;display:grid;place-items:center}
.heroshot__pause .icon{width:16px;height:16px;color:currentColor}
.chat{padding:22px;display:grid;gap:12px;align-content:start;min-height:470px}
@media (max-width:560px){.chat{padding:16px;min-height:500px}.blase{max-width:100%}.ergebnis{padding:10px 12px}
  .heroshot__leiste{flex-wrap:nowrap;padding:10px}.reiter button{padding:8px 10px}}
.chat__marke{font-size:12px;color:var(--dim);display:flex;align-items:center;gap:6px}
.chat__marke .icon{width:14px;height:14px;color:var(--dim)}
.blase{max-width:92%;padding:12px 15px;border-radius:14px;font-size:15px;line-height:1.5;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.blase.an{opacity:1;transform:none}
.blase--du{justify-self:end;background:var(--v-700);color:#fff;border-bottom-right-radius:4px}
.blase--ki{justify-self:start;background:var(--raised);color:var(--text);border-bottom-left-radius:4px}
.schritte-ki{display:grid;gap:6px;margin-top:8px}
.schritte-ki div{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);opacity:0;transition:opacity .3s}
.schritte-ki div.an{opacity:1}
.schritte-ki .icon{width:16px;height:16px}
.tippen::after{content:"";display:inline-block;width:2px;height:1em;background:var(--v-100);margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ergebnis{margin-top:12px;border:1px solid var(--dark-border);border-radius:12px;padding:12px 14px;background:var(--canvas);display:grid;gap:6px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.ergebnis.an{opacity:1;transform:none}
.ergebnis__kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ergebnis__kopf b{color:var(--head);font-size:15px}
.zeile{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;color:var(--text)}
.zeile small{color:var(--dim);font-size:13px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--v-700);color:#fff;white-space:nowrap}
.pill .icon{width:13px;height:13px;color:#fff}
.pill--amber{background:transparent;border:1px solid var(--amber);color:var(--amber);padding:2px 9px;margin-left:6px;vertical-align:1px}
.pill--leer{background:transparent;border:1px solid var(--border-strong);color:var(--muted)}
.avatare{display:flex}
.avatare i{width:24px;height:24px;border-radius:50%;margin-left:-6px;border:2px solid var(--surface);display:grid;place-items:center;font:600 9.5px/1 var(--font);font-style:normal;color:#fff}
.ablage{border:1.5px dashed var(--v-500);border-radius:12px;padding:24px 18px;transition:border-color .3s,background .3s;text-align:center;color:var(--muted);display:grid;gap:8px;justify-items:center}
.ablage .icon{width:24px;height:24px}
.ablage b{color:var(--head)}
.ablage.an{border-style:solid;background:var(--raised)}
.schritte-app{margin-top:0;padding:0 4px}

/* --- Vertrauensleiste ---------------------------------------------------- */
.vertrauen{margin-top:clamp(40px,5vw,56px);border-top:1px solid var(--dark-border);border-bottom:1px solid var(--dark-border)}
.vertrauen ul{list-style:none;margin:0;padding:18px 0;display:flex;flex-wrap:wrap;gap:12px 36px;justify-content:center}
.vertrauen li{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:500;color:var(--text)}

/* --- Karten, Raster ------------------------------------------------------ */
.raster{display:grid;gap:16px}
.raster--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.raster--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.raster--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.raster--3,.raster--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.raster--2,.raster--3,.raster--4{grid-template-columns:1fr}}
.karte{background:var(--surface);border:1px solid var(--dark-border);border-radius:var(--r);padding:24px;display:grid;gap:10px;align-content:start}
.section--surface .karte{background:var(--canvas)}
.karte p{color:var(--muted)}
.karte__kopf{display:flex;align-items:center;gap:10px}
.karte--violett{background:var(--v-700);border-color:var(--v-700)}
.karte--violett h3,.karte--violett p{color:#fff}
.karte--violett .icon{color:#fff}

/* --- Leistung ------------------------------------------------------------ */
.split--oben{align-items:start}
.leistung__text{display:grid;gap:22px;justify-items:start}
.vorteile{list-style:none;margin:0;padding:0;display:grid;gap:4px;width:100%}
.vorteile li{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--dark-border);font-size:17px;font-weight:500;color:var(--head)}
.vorteile li:last-child{border-bottom:0}

/* --- Schritte ------------------------------------------------------------ */
.schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
@media (max-width:900px){.schritte{grid-template-columns:1fr}}
.schritt{background:var(--canvas);border:1px solid var(--dark-border);border-radius:var(--r);padding:24px;display:grid;gap:10px;align-content:start}
.schritt::before{counter-increment:s;content:"0" counter(s);font-size:10.5px;font-weight:600;letter-spacing:.19em;color:var(--v-500)}
.schritt p{color:var(--muted)}
.kopierfeld{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--dark-border);border-radius:10px;padding:6px 6px 6px 12px;min-width:0}
.kopierfeld code{font:500 13px/1.4 var(--font);color:var(--v-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.kopierfeld button{border:1px solid var(--border-strong);background:transparent;color:var(--text);font:600 13px/1 var(--font);padding:8px 12px;border-radius:8px;cursor:pointer}
.prompt{background:var(--v-700);color:#fff;border-radius:14px 14px 4px 14px;padding:12px 14px;font-size:15px}
/* CTA als eigener schmaler Block (einziger erlaubter Verlauf: #432B78 → #6A4394) */
.cta-block{margin-top:40px;background:linear-gradient(135deg,var(--v-700),var(--v-600));border-radius:18px;padding:22px clamp(20px,3vw,32px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.cta-block p{margin:0;color:var(--v-100);font-size:15px}
.cta-block .cta-block__titel{color:#fff;font-size:20px;font-weight:600;letter-spacing:var(--track-sub);margin-bottom:2px}
.cta-block__knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.cta-block .btn--ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.cta-block .btn--ghost:hover{background:var(--v-600)}
@media (max-width:560px){.cta-block__knoepfe{flex-direction:column-reverse;width:100%}.cta-block .btn{width:100%}}

/* --- Gründe (Reason why) ------------------------------------------------- */
.grund{display:grid;gap:14px}

/* --- Vergleich ----------------------------------------------------------- */
.vergleich{width:100%;border-collapse:collapse;font-size:15px;margin-top:40px}
.vergleich caption{text-align:left;padding-bottom:16px;font-size:21px;font-weight:600;color:var(--head);letter-spacing:var(--track-sub)}
.vergleich th,.vergleich td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--dark-border)}
.vergleich thead th{font-size:14px;font-weight:600;color:var(--muted)}
.vergleich tbody th{font-weight:600;color:var(--text);width:28%}
.vergleich td{color:var(--muted)}
.vergleich .wir{background:var(--v-700);color:#fff}
.vergleich thead .wir{color:#fff}
.fussnote{margin-top:12px;font-size:13px;color:var(--dim)}
@media (max-width:760px){
  .vergleich thead{display:none}
  .vergleich,.vergleich tbody,.vergleich tr,.vergleich th,.vergleich td{display:block;width:auto}
  .vergleich tr{border:1px solid var(--dark-border);border-radius:14px;margin-bottom:12px;overflow:hidden;background:var(--surface)}
  .section--surface .vergleich tr{background:var(--canvas)}
  .vergleich td{display:grid;grid-template-columns:110px 1fr;gap:10px}
  .vergleich td::before{content:attr(data-label);font-size:13px;color:var(--dim)}
  .vergleich td:last-child{border-bottom:0}
}

/* --- Zwei Spalten -------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
@media (max-width:980px){.split{grid-template-columns:1fr}}
.liste{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.liste li{display:grid;grid-template-columns:20px 1fr;gap:12px;color:var(--muted)}
.liste li b{color:var(--text);font-weight:600}
.liste .icon{margin-top:3px}

/* Sichtbarkeits-Dialog, auf Papier wie in der App */
.dialog{background:var(--paper);color:var(--ink);border-radius:16px;padding:22px;display:grid;gap:12px;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.dialog h4{color:var(--ink);font-size:17px;letter-spacing:var(--track-sub)}
.dialog p{color:#5E5873;font-size:14px}
.stufe{display:grid;grid-template-columns:18px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid #E4DEF2;border-radius:12px;cursor:pointer}
.stufe input{accent-color:var(--v-400);width:18px;height:18px;margin:0}
.stufe b{display:block;font-size:15px;color:var(--ink)}
.stufe small{color:#5E5873;font-size:13px}
.stufe.aktiv{border-color:var(--v-400);background:var(--v-050)}
.stufe .pill{background:var(--v-400)}
.dialog .avatare i{border-color:var(--paper)}
.beispiele{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.beispiele li{font-size:14px;padding:6px 12px;border-radius:999px;border:1px solid var(--dark-border);color:var(--muted)}

/* Weiterleitungen */
.regeln{background:var(--canvas);border:1px solid var(--dark-border);border-radius:14px;overflow:hidden;font-size:14px}
.regeln__kopf,.regel{display:grid;grid-template-columns:.8fr 2fr 48px;gap:12px;padding:12px 16px;align-items:center}
.regeln__kopf{color:var(--dim);font-size:13px;font-weight:600;border-bottom:1px solid var(--dark-border)}
.regel{border-bottom:1px solid var(--dark-border)}
.regel:last-child{border-bottom:0}
.regel code{font:500 13px/1.4 ui-monospace,Menlo,monospace;color:var(--v-100);overflow-wrap:anywhere;min-width:0}
.regel span{color:var(--dim);font-variant-numeric:tabular-nums}

/* --- Video --------------------------------------------------------------- */
.video{display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:start}
@media (max-width:900px){.video{grid-template-columns:1fr}}
.video__rahmen{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--dark-border);background:var(--canvas)}
.video__rahmen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--canvas)}
.video__rahmen video:fullscreen{object-fit:contain;background:#000}
.video__rahmen video:-webkit-full-screen{object-fit:contain;background:#000}
.video__start{position:absolute;inset:0;border:0;padding:0;background:rgba(20,16,32,.25);cursor:pointer;display:grid;place-items:center;color:inherit;font:inherit}
.video__rahmen.laeuft .video__start{display:none}
.video__play{width:84px;height:84px;border-radius:50%;background:var(--v-400);display:grid;place-items:center;transition:transform .2s}
.video__start:hover .video__play,.video__start:focus-visible .video__play{transform:scale(1.06)}
.video__play .icon{width:30px;height:30px;color:#fff;margin-left:4px}
.video__titel{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;font-size:14px;color:var(--text)}
.video__seite{display:grid;gap:22px}
.kapitel{list-style:none;margin:0;padding:0}
.kapitel button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:48px 1fr;gap:12px;padding:12px 8px;border-bottom:1px solid var(--dark-border);color:var(--muted);border-radius:8px}
.kapitel button:hover{background:var(--surface)}
.kapitel button:focus-visible{outline:2px solid var(--v-400);outline-offset:2px}
.kapitel time{font-variant-numeric:tabular-nums;color:var(--v-300);font-weight:600}
.kapitel b{color:var(--text);font-weight:600}
.kapitel button.aktiv{background:var(--surface)}
.kapitel button.aktiv time{color:var(--head)}
.video__cta{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}

/* --- Datenschutz und Gründer -------------------------------------------- */
.kette{list-style:none;margin:0;padding:0;border:1px solid var(--dark-border);border-radius:14px;overflow:hidden}
.kette li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 18px;border-bottom:1px solid var(--dark-border);background:var(--surface)}
.kette li:last-child{border-bottom:0}
.kette .k{color:var(--dim);font-size:14px}
@media (max-width:560px){.kette li{grid-template-columns:1fr;gap:2px}}
/* einziger erlaubter Verlauf: #432B78 → #6A4394 */
.gruender{background:linear-gradient(150deg,var(--v-700),var(--v-600));border-radius:18px;padding:clamp(24px,4vw,36px);display:grid;gap:18px;color:#fff}
.gruender__koepfe{display:flex;gap:12px}
.kopf-bild{width:60px;height:60px;border-radius:50%;background:var(--v-500);display:grid;place-items:center;font-weight:600;font-size:18px;color:#fff;border:2px solid rgba(255,255,255,.35)}
.gruender blockquote{margin:0;font-size:19px;line-height:1.5;letter-spacing:var(--track-sub)}
.gruender cite{font-style:normal;color:var(--v-100);font-size:14px}
.versprechen{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.versprechen li{display:flex;gap:10px;font-weight:500}
.versprechen .icon{color:#fff;margin-top:2px}

/* --- Preise -------------------------------------------------------------- */
.umschalter{display:inline-flex;background:var(--surface);border:1px solid var(--dark-border);border-radius:999px;padding:4px;gap:4px}
.umschalter button{border:0;background:transparent;color:var(--muted);font:600 14px/1 var(--font);padding:10px 16px;border-radius:999px;cursor:pointer}
.umschalter button[aria-pressed=true]{background:var(--v-400);color:#fff}
.preise{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;margin-top:8px}
@media (max-width:900px){.preise{grid-template-columns:1fr}}
.tarif{background:var(--surface);border:1px solid var(--dark-border);border-radius:18px;padding:28px;display:grid;gap:16px;align-content:start}
.tarif--max{border:2px solid var(--v-400)}
.tarif__name{font-size:21px}
.tarif__name span{font-size:15px;font-weight:500;color:var(--muted);margin-left:6px}
.tarif__preis{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tarif__preis b{font-size:48px;line-height:1;color:var(--head);letter-spacing:var(--track-head);font-variant-numeric:tabular-nums}
.tarif__preis span{color:var(--muted);font-size:14px}
.tarif ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tarif li{display:grid;grid-template-columns:20px 1fr;gap:10px}
.tarif li .icon{margin-top:3px}
.tarif .btn{justify-self:start}
.pakete{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
@media (max-width:640px){.pakete{grid-template-columns:1fr}}
.paket{display:flex;justify-content:space-between;gap:16px;padding:14px 18px;border:1px dashed var(--border-strong);border-radius:12px;color:var(--muted);font-size:15px}
.paket b{color:var(--text)}
.rechnung{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:760px){.rechnung{grid-template-columns:1fr}}
.rechnung div{background:var(--surface);border:1px solid var(--dark-border);border-radius:12px;padding:16px 18px;display:grid;gap:4px}
.rechnung small{color:var(--dim);font-size:13px}
.rechnung b{color:var(--head);font-size:22px;font-variant-numeric:tabular-nums}

/* --- Grenzen ------------------------------------------------------------- */
.karte ul{margin:0;padding-left:20px;color:var(--muted);display:grid;gap:8px}

/* --- FAQ ----------------------------------------------------------------- */
.faq{max-width:820px;margin:0 auto;display:grid;gap:10px}
.faq details{background:var(--surface);border:1px solid var(--dark-border);border-radius:14px;padding:0 20px}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:600;color:var(--head);font-size:17px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{transition:transform .2s}
.faq details[open] summary .icon{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding:0 0 18px}

/* --- Abschluss: gefülltes Teisenda-Violett ------------------------------ */
.abschluss{background:var(--v-700);border-radius:20px;padding:clamp(40px,6vw,72px) var(--gutter);display:grid;gap:20px;justify-items:center;text-align:center}
.abschluss h2{color:#fff;margin:0 auto}
.abschluss p{color:var(--v-100);max-width:52ch}
.abschluss .btn--ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.abschluss .btn--ghost:hover{background:var(--v-600)}

/* --- Fuß ----------------------------------------------------------------- */
.fuss{border-top:1px solid var(--dark-border);padding:56px 0 calc(40px + env(safe-area-inset-bottom));color:var(--dim);font-size:14px;margin-top:var(--section)}
.fuss .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
@media (max-width:900px){.fuss .wrap{grid-template-columns:1fr 1fr}.fuss .wrap>div:first-child{grid-column:1/-1}}
@media (max-width:480px){.fuss .wrap{grid-template-columns:1fr}}
.fuss img{width:128px;height:auto}
.fuss h4{color:var(--text);font-size:14px;margin:0 0 12px}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fuss a{color:var(--muted)}

/* --- Sticky-CTA mobil ---------------------------------------------------- */
.sticky{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:90;display:none;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--dark-border);border-radius:14px;padding:10px;transform:translateY(140%);transition:transform .3s}
.sticky.an{transform:none}
.sticky small{flex:1;color:var(--muted);font-size:13px;line-height:1.3}
@media (max-width:760px){.sticky{display:flex}}

/* --- Entwurfsnotizen (nur Arbeitsstand, fliegt vor dem Go-live raus) ----- */
.notiz-schalter{position:fixed;right:16px;bottom:16px;z-index:95;border:1px solid var(--amber);background:var(--canvas);color:var(--amber);
  font:600 13px/1 var(--font);padding:10px 14px;border-radius:999px;cursor:pointer}
@media (max-width:760px){.notiz-schalter{bottom:auto;top:86px}}
body.notizen [data-pruefen]{outline:2px dashed var(--amber);outline-offset:4px;border-radius:6px;position:relative}
body.notizen [data-pruefen]::after{content:attr(data-pruefen);position:absolute;left:0;top:calc(100% + 6px);z-index:5;max-width:320px;
  background:var(--canvas);color:var(--amber);border:1px solid var(--amber);font:500 12.5px/1.4 var(--font);padding:8px 10px;border-radius:8px;
  text-transform:none;letter-spacing:0;white-space:normal;pointer-events:none}
.notiz-panel{display:none}
body.notizen .notiz-panel{display:block;border-top:1px solid var(--amber);padding:40px 0}
.notiz-panel ol{color:var(--muted);display:grid;gap:8px;margin-top:16px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Anwendungen (Reiter, nach netlify.com) ------------------------------ */
.anwendungen{border:1px solid var(--dark-border);border-radius:18px;overflow:hidden;background:var(--canvas)}
.anwendungen__reiter{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--dark-border)}
.anwendungen__reiter button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 12px;font-size:16px;font-weight:600;color:var(--muted);border-right:1px solid var(--dark-border);border-bottom:2px solid transparent;margin-bottom:-1px;text-align:center}
.anwendungen__reiter button:last-child{border-right:0}
.anwendungen__reiter button:hover{color:var(--head);background:var(--surface)}
.anwendungen__reiter button[aria-selected=true]{color:var(--head);background:var(--surface);border-bottom-color:var(--v-400)}
.anwendungen__reiter button:focus-visible{outline:2px solid var(--v-400);outline-offset:-4px}
.anwendungen__reiter .icon{width:20px;height:20px}
.anwendung{display:grid;grid-template-columns:1fr 1fr;min-height:420px}
.anwendung[hidden]{display:none}
.anwendung__text{padding:clamp(28px,4vw,52px);display:grid;gap:18px;align-content:start;justify-items:start}
.anwendung__text h3{font-size:clamp(24px,2.6vw,32px);line-height:1.12;letter-spacing:var(--track-head)}
.anwendung__text p{color:var(--muted);font-size:17px;line-height:1.55;max-width:46ch}
.anwendung__text ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.anwendung__text li{display:grid;grid-template-columns:22px 1fr;gap:10px;color:var(--muted);font-size:16px}
.anwendung__text li b{color:var(--head);font-weight:600}
.anwendung__text li .icon{margin-top:2px}
.anwendung__beispiel{background:var(--surface);border-left:1px solid var(--dark-border);display:grid;grid-template-rows:auto 1fr}
.anwendung__kopf{display:flex;align-items:center;gap:10px;padding:16px 22px;border-bottom:1px solid var(--dark-border);font-size:15px;font-weight:600;color:var(--muted)}
.anwendung__kopf .icon{width:18px;height:18px;color:var(--dim)}
.anwendung__chat{padding:26px 22px;display:grid;gap:18px;align-content:start}
.anwendung__chat .blase{max-width:100%}
.anwendung__antwort{list-style:none;margin:0;padding:16px 18px;border-radius:14px;background:var(--raised);display:grid;gap:10px}
.anwendung__antwort li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:15px;color:var(--muted)}
.anwendung__antwort li b{color:var(--v-100);font-weight:600}
.anwendung__antwort .icon{width:17px;height:17px;margin-top:2px}
@media (max-width:980px){
  .anwendungen__reiter{display:flex;overflow-x:auto;scrollbar-width:none}
  .anwendungen__reiter button{flex:0 0 auto;padding:16px 18px}
  .anwendung{grid-template-columns:1fr}
  .anwendung__beispiel{border-left:0;border-top:1px solid var(--dark-border)}
}
/* Flächen in hellen und dunklen Abschnitten unterscheidbar halten */
.section--surface .tarif,.section--surface .rechnung div,.section--surface .faq details{background:var(--canvas)}

/* v2 =========================================================================
   Ergänzungen für index-v2.html (Umbau nach UMBAU-ANWEISUNG.md vom 15.10.2026).
   index.html nutzt diese Klassen nicht; die Regeln darüber bleiben unverändert. */

/* Hero: Connector-Zeile unter den Knöpfen, Chat-Box unter der Vertrauensleiste */
.hero__connector{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;font-size:14px;color:var(--muted)}
.hero__connector .kopierfeld{background:var(--surface)}
/* Die Box liegt nach der Bühne und ragt über deren unteren Rand (Bühne selbst bleibt wie im CI-Snippet) */
.hero__shot{max-width:880px;margin:-56px auto 0;text-align:left}
.hero__shot .chat{min-height:400px}
@media (max-width:560px){.hero__connector .kopierfeld{width:100%}.hero__shot .chat{min-height:530px}}

.section--linie{border-top:1px solid var(--dark-border)}
.section--knapp{padding:clamp(40px,5vw,64px) 0}

/* Problem: Kopf links, Quellcode rechts, darunter vier Fragen */
.problem{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;margin-bottom:32px}
.problem .head{margin-bottom:0}
@media (max-width:980px){.problem{grid-template-columns:1fr}}
.code{margin:0;background:var(--surface);border:1px solid var(--dark-border);border-radius:14px;overflow:hidden}
.code__zeilen{list-style:none;margin:0;padding:14px 0;counter-reset:z;font:500 13px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);overflow-x:auto}
.code__zeilen li{counter-increment:z;white-space:pre;padding-right:16px;border-left:3px solid transparent}
.code__zeilen li::before{content:counter(z);display:inline-block;width:40px;padding-right:16px;text-align:right;color:var(--dim)}
.code__zeilen .kw{color:var(--v-300)}
.code__zeilen .s{color:var(--v-100)}
/* Bernstein als Statusmarke: die zwei Fundstellen */
.code__zeilen .fund{background:rgba(237,169,56,.12);border-left-color:var(--amber)}
.code__zeilen .fund .wert{color:var(--amber)}
.code figcaption{padding:12px 18px;border-top:1px solid var(--dark-border);font-size:13.5px;color:var(--muted)}
@media (max-width:560px){.code__zeilen{font-size:11.5px}.code__zeilen li::before{width:30px;padding-right:12px}}
.fragen4 .karte{gap:12px}

/* Vier Takte: Text links, Bildschirm rechts; bei Takt 2 und 4 gespiegelt */
.takt__text{display:grid;gap:24px;align-content:start}
.takt__text .head{margin-bottom:0;gap:14px}
.takt__bild{display:grid;gap:12px;position:relative}
@media (min-width:981px){.split--gespiegelt>:first-child{order:2}}

/* Takt 1: Kennzahlen unter dem Sichtbarkeits-Dialog */
.zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--v-700);border-radius:14px;overflow:hidden}
.zahlen div{display:grid;gap:2px;padding:14px 18px;border-left:1px solid rgba(255,255,255,.16)}
.zahlen div:first-child{border-left:0}
.zahlen b{color:#fff;font-size:24px;line-height:1.1;letter-spacing:var(--track-sub)}
.zahlen span{color:var(--v-100);font-size:13px}

/* Takt 2: statischer Chat mit Fund */
.chat--statisch{min-height:0}
.takt__bild .heroshot__leiste{padding:12px 16px}
.schritte-ki .warn{color:var(--amber);font-weight:600}
.schritte-ki .warn .icon{color:var(--amber)}
.fund-hinweis{margin-top:10px;padding:10px 12px;border:1px solid var(--amber);border-radius:10px;font-size:14px;color:var(--muted)}
.fund-hinweis b{color:var(--amber)}

/* Takt 3: Versionsliste, auf Papier wie in der App */
.versionen{background:var(--paper);color:var(--ink);border-radius:16px;padding:22px;display:grid;gap:10px;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.versionen h4{color:var(--ink);font-size:17px;letter-spacing:var(--track-sub)}
.versionen h4+p{color:#5E5873;font-size:14px}
.version{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:10px 12px;border:1px solid #E4DEF2;border-radius:12px}
.version b{display:block;font-size:15px;color:var(--ink)}
.version small{color:#5E5873;font-size:13px}
.version--wahl{border-color:var(--v-400);background:var(--v-050);grid-template-columns:64px 1fr}
.version--wahl .knopf-app{grid-column:2;justify-self:start}
.versionen .pill{background:var(--v-400)}
.versionen .pill--leer{background:#fff;border:1px solid #DCD8E5;color:var(--ink);font-weight:500}
.knopf-app{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:8px;background:var(--v-400);color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap}
.knopf-app .icon{width:15px;height:15px;color:#fff}
/* Vorschaubild: Kopfzeile, Bühne, Textzeile; bei Version 3 sichtbar verrutscht */
.mini{position:relative;width:64px;height:44px;border-radius:6px;border:1px solid #DCD8E5;background:#fff;overflow:hidden}
.mini i{position:absolute;left:6px;right:6px;border-radius:2px}
.mini i:nth-child(1){top:5px;height:4px;background:var(--v-700)}
.mini i:nth-child(2){top:13px;height:14px;background:var(--v-300)}
.mini i:nth-child(3){top:31px;height:3px;right:22px;background:var(--v-100)}
.mini--kaputt i:nth-child(1){left:24px;right:-6px;transform:rotate(-8deg)}
.mini--kaputt i:nth-child(2){top:22px;left:20px;right:-14px;transform:rotate(10deg)}
.mini--kaputt i:nth-child(3){top:8px;left:2px;right:34px;transform:rotate(-16deg)}
@media (max-width:560px){
  .version{grid-template-columns:52px 1fr;gap:10px 12px}
  .mini{width:52px;height:36px}
  .version>:last-child{grid-column:2;justify-self:start}
}

/* Vertrauen: Gründer groß im Bild, zwei Porträts links, Zitat und Versprechen rechts */
.gruender--fotos{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,48px)}
.gruender__bilder{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,18px)}
.gruender__bild{margin:0;display:grid;gap:10px}
.gruender__bild img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.22)}
.gruender__bild figcaption{display:grid;font-size:14px;line-height:1.35;color:var(--v-100)}
.gruender__bild figcaption b{color:#fff;font-size:17px;font-weight:600;letter-spacing:var(--track-sub)}
.gruender__worte{display:grid;gap:18px;align-content:center}
@media (max-width:860px){.gruender--fotos{grid-template-columns:1fr}}
.vergleich__titel{margin-top:48px;font-size:21px}
.vergleich__titel+.vergleich{margin-top:16px}

/* Preise: Zusatzzeile in der Free-Karte */
.tarif__zusatz{display:block;font-size:13px;color:var(--dim);margin-top:2px}

/* FAQ: Beispiel-Prompts */
.faq details .faq__zwischen{padding-bottom:6px}
.faq__beispiele{margin:0;padding:0 0 18px 20px;color:var(--muted);display:grid;gap:6px}

/* Entwurfsnotizen über data-notiz (wie data-pruefen in index.html) */
body.notizen [data-notiz]{outline:2px dashed var(--amber);outline-offset:4px;border-radius:6px;position:relative}
body.notizen [data-notiz]::after{content:attr(data-notiz);position:absolute;left:0;top:calc(100% + 6px);z-index:5;max-width:320px;
  background:var(--canvas);color:var(--amber);border:1px solid var(--amber);font:500 12.5px/1.4 var(--font);padding:8px 10px;border-radius:8px;
  text-transform:none;letter-spacing:0;white-space:normal;pointer-events:none}

/* v2: etwas engerer Abschnittsrhythmus, Kapitel nur mit Titel, kompaktere Bildschirme */
body.v2{--section:clamp(56px,7vw,96px)}
.v2 .kapitel span{color:var(--text);font-weight:500}
.takt__bild .dialog{gap:10px}
.takt__bild .stufe{padding:10px 14px}
.fragen4 .karte{padding:20px}

/* v2: Abstand unter der Chat-Box, damit die Linie zum nächsten Abschnitt darunter liegt */
.v2 .hero{padding-bottom:clamp(48px,6vw,80px)}
/* v2: Vergleichstabelle mobil, Zeilentitel über die volle Kartenbreite statt 28 % */
@media (max-width:760px){.v2 .vergleich tbody th{width:auto}}

/* v2 (16.10.): Hero mit zweitem Absatz und einer Vertrauensleiste mit Symbolen direkt unter dem Text */
.hero__vision{color:var(--v-100)}
.hero__leiste{margin-top:28px}
.hero__leiste ul{max-width:860px;margin:0 auto;padding:16px 0;gap:10px 36px}
@media (max-width:560px){.hero__leiste ul{gap:10px 22px}.hero__leiste li{font-size:14px}}
.v2 .hero__buehne{padding-bottom:96px}

/* v2: Gründerkarte, Zwischenüberschrift vor den Versprechen */
.gruender__frage{color:#fff;font-size:17px;margin-top:4px}

/* v2: Preiskarten gleich breit */
.v2 .preise{grid-template-columns:1fr 1fr}
@media (max-width:900px){.v2 .preise{grid-template-columns:1fr}}

/* v2: Ausblick mit den geplanten Engines, Karten und Drahtformen 1:1 wie teisenda.com (styles.css, umbau.css) */
.ausblick{position:relative;isolation:isolate;overflow:hidden}
.ausblick .head{margin-bottom:56px}
.engines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:880px){.engines{grid-template-columns:1fr}}
.engine{position:relative;overflow:hidden;border:1px solid var(--dark-border);border-radius:20px;padding:32px;opacity:.92;
  background:linear-gradient(180deg,rgba(130,80,230,.08),rgba(26,19,48,.42))}
.engine>*{position:relative;z-index:1}
.engine h3{font-size:22px;margin-bottom:12px}
.engine p{color:var(--muted);font-size:15px}
.engine::before{content:"";position:absolute;width:122px;height:122px;pointer-events:none;opacity:.36;background-repeat:no-repeat;background-size:contain}
.engine:nth-child(3n+1)::before{top:-6px;right:-6px;background-position:top right;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23a077ff' stroke-width='1'%3E%3Cpath d='M120 0 74 14 120 46Z'/%3E%3Cpath d='M120 46 74 14 88 62Z'/%3E%3Cpath d='M74 14 40 34 88 62'/%3E%3Cpath d='M120 46 88 62 120 92'/%3E%3C/g%3E%3C/svg%3E")}
.engine:nth-child(3n+2)::before{bottom:-6px;left:-6px;background-position:bottom left;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23a077ff' stroke-width='1'%3E%3Cpath d='M0 120 46 106 0 74Z'/%3E%3Cpath d='M0 74 46 106 32 58Z'/%3E%3Cpath d='M46 106 80 86 32 58'/%3E%3Cpath d='M0 74 32 58 0 28'/%3E%3C/g%3E%3C/svg%3E")}
.engine:nth-child(3n+3)::before{top:-6px;left:-6px;background-position:top left;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23c8a4ff' stroke-width='1'%3E%3Cpath d='M0 0 44 14 14 44Z'/%3E%3Cpath d='M44 14 26 56 14 44'/%3E%3Cpath d='M44 14 80 28 26 56'/%3E%3Cpath d='M80 28 50 66 26 56'/%3E%3C/g%3E%3C/svg%3E")}
.engine::after{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;pointer-events:none;opacity:.55;
  background:linear-gradient(135deg,rgba(160,119,255,.55),transparent 42%,transparent 58%,rgba(160,119,255,.16));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.folgt{display:inline-block;margin-bottom:12px;padding:3px 10px;border:1px solid var(--border-strong);border-radius:100px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--v-100)}
.mehr{text-align:center;margin-top:28px}
.mehr a{font-weight:600;color:var(--primary-hover)}
.deco-wire{position:absolute;z-index:-1;pointer-events:none;opacity:.18;background-repeat:no-repeat;background-size:contain}
.deco-wire--r{top:4%;right:-60px;width:340px;height:340px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'%3E%3Cg fill='none' stroke='%23a077ff' stroke-width='1'%3E%3Cpath d='M340 40 210 70 300 150 340 120Z'/%3E%3Cpath d='M210 70 150 160 300 150'/%3E%3Cpath d='M300 150 230 240 150 160'/%3E%3Cpath d='M300 150 340 220 230 240'/%3E%3Cpath d='M230 240 260 320 180 260'/%3E%3C/g%3E%3C/svg%3E")}
@media (max-width:760px){.deco-wire{display:none}}

/* Hinweis in index.html: veraltete Fassung (Bernstein als Statusmarke) */
.veraltet{position:relative;z-index:101;background:var(--amber);color:var(--ink);text-align:center;font:500 14px/1.4 var(--font);padding:10px 16px}
.veraltet a{color:var(--ink);text-decoration:underline;font-weight:600}

/* v2 (16.10.): Connector-Zeile als Fuß der Beispiel-Box statt im Hero */
.heroshot__fuss{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 16px;border-top:1px solid var(--dark-border);font-size:13.5px;color:var(--muted)}
.heroshot__fuss .kopierfeld{background:var(--canvas)}
@media (max-width:560px){.heroshot__fuss .kopierfeld{width:100%}}
/* v2: Sprechblasen ploppen auf, statt getippt zu werden */
.v2 .hero__shot .blase{transform:translateY(8px) scale(.96);transition:opacity .3s,transform .4s cubic-bezier(.2,.9,.3,1.25)}
.v2 .hero__shot .blase--du{transform-origin:bottom right}
.v2 .hero__shot .blase--ki{transform-origin:bottom left}
.v2 .hero__shot .blase.an{transform:none}
/* v2: Frage der Takte als erster, fetter Satz im Lead (keine Zeile über der H2) */
.lead .takt__frage{color:var(--text);font-weight:600}

/* v2: Zweispalter oben bündig. Die Überschrift steht auf Höhe der Oberkante des Elements daneben;
   text-box schneidet den Leerraum über der Versalhöhe ab (Browser ohne Unterstützung zeigen ein paar Pixel Versatz). */
.v2 .takt .split,.v2 .problem,.v2 .gruender--fotos{align-items:start}
.v2 .takt h2,.v2 .problem h2,.v2 .gruender__worte blockquote{text-box:trim-start cap alphabetic}

/* v2: Abschluss-Kasten mit Abstand zur Linie des FAQ-Abschnitts darüber */
.schluss{padding:clamp(40px,5vw,64px) 0 0}

/* v2 (23.10.): Ganze Website, Domain-Karte auf Papier wie in der App */
.domains{background:var(--paper);color:var(--ink);border-radius:16px;padding:22px;display:grid;gap:10px;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.domains h4{color:var(--ink);font-size:17px;letter-spacing:var(--track-sub)}
.domains h4+p{color:#5E5873;font-size:14px}
.domain{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 14px;border:1px solid #E4DEF2;border-radius:12px}
.domain:first-of-type{border-color:var(--v-400);background:var(--v-050)}
.domain__name{flex:1 1 100%;font-weight:600;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.domain--auto .domain__name{font-weight:500;color:#5E5873}
.domains .pill{background:var(--v-400)}
.domains .pill--leer{background:#fff;border:1px solid #DCD8E5;color:var(--ink);font-weight:500}
.domain__status{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;color:#3D3850}
.domain__status .icon{width:15px;height:15px;color:var(--jade)}
#website .takt__bild>.klein{margin-top:4px}

/* v2: LinkedIn unter den Gründern */
.gruender__link{display:inline-flex;align-items:center;gap:4px;margin-top:6px;justify-self:start;color:#fff;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.gruender__link .icon{width:15px;height:15px;color:#fff}

/* v2: Kurzfassung der Preise auf der Startseite */
.preise--kurz .tarif{align-content:start}

/* v2: Preisseite */
.preis-hero{padding:calc(76px + clamp(48px,7vw,88px)) 0 clamp(32px,4vw,48px);margin-top:-76px;text-align:center}
.preis-hero h1{margin:0 auto;max-width:18ch}
.preis-hero .lead{margin:18px auto 0}
.preis-hero .hero__ctas{margin-top:28px}
.preise-voll .head{margin-bottom:32px}
.tv{width:100%;border-collapse:collapse;font-size:15px}
.tv th,.tv td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--dark-border)}
.tv thead th{font-size:14px;font-weight:600;color:var(--muted)}
.tv thead th.tv__max{color:#fff;background:var(--v-700)}
.tv tbody th{font-weight:500;color:var(--text);width:44%}
.tv td{color:var(--muted);width:28%}
.tv td.tv__max{color:#fff;background:rgba(67,43,120,.55)}
.tv .tv__gruppe th{padding-top:28px;font-size:13px;font-weight:600;color:var(--v-300);border-bottom-color:var(--border-strong)}
.tv .nein{color:var(--dim)}
@media (max-width:640px){
  .tv thead{display:none}
  .tv,.tv tbody,.tv tr,.tv th,.tv td{display:block;width:auto}
  .tv tr{border-bottom:1px solid var(--dark-border);padding:10px 0}
  .tv tbody th{border:0;padding:4px 0;width:auto}
  .tv td{width:auto;border:0;padding:2px 0;display:grid;grid-template-columns:60px 1fr;gap:10px;background:none!important;color:var(--muted)}
  .tv td::before{content:attr(data-label);color:var(--dim);font-size:13px}
  .tv .tv__gruppe th{padding:20px 0 4px}
}

/* v2: Mindesthöhe der Beispiel-Box je Breite, damit die Seite beim Reiterwechsel nicht springt
   (gemessen 23.10.: Desktop bis 383 px, 600 px Breite bis 420 px, 375 px Breite bis 526 px) */
@media (max-width:900px){.hero__shot .chat{min-height:440px}}
@media (max-width:560px){.hero__shot .chat{min-height:530px}}

/* v2 (26.10.): Connector-Adresse als zweites Element neben dem Haupt-CTA */
.hero__mcp{align-self:stretch;padding:6px 6px 6px 16px;border-color:var(--border-strong)}
.hero__mcp code{font-size:14px}
@media (max-width:560px){.hero__mcp{width:100%}}

/* v2 (26.10.): LinkedIn-Zeichen weiß vor dem Text */
.gruender__link{gap:6px}
.gruender__link .icon--linkedin{width:14px;height:14px;color:#fff}

/* Entwurf 28.10.: ohne externe Links. Platzhalter ohne Ziel sehen aus wie Links, führen aber nirgends hin. */
a:not([href]){cursor:default}
.lang__menu{max-height:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain}

/* Entwurf 28.10.: Seite „Über TEISENDA“ */
.ueber-hero{padding:calc(76px + clamp(56px,9vw,120px)) 0 clamp(24px,4vw,48px);margin-top:-76px;text-align:center}
.ueber-hero h1{margin:0 auto;max-width:16ch}
.ueber-hero .akzent{color:var(--v-300)}
.ueber-hero .lead{margin:22px auto 0}
.ueber-hero .lead+.lead{margin-top:14px;color:var(--dim)}
.ueber-text{position:relative;isolation:isolate;overflow:hidden}
.ueber-text .wrap{max-width:780px;text-align:center}
.ueber-text h2{margin:0 auto 24px;max-width:22ch}
.ueber-text p{color:var(--muted);font-size:18px;line-height:1.7;margin:0 auto}
.ueber-text p+p{margin-top:16px}
.ueber-text__kern{margin:28px auto!important;padding:20px 0;border-top:1px solid var(--dark-border);border-bottom:1px solid var(--dark-border);color:var(--head)!important;font-weight:600;font-size:22px!important;line-height:1.4!important}
.fp{max-width:920px;margin:0 auto}
.fp__hub{border:1px solid var(--v-400);border-radius:18px;padding:26px 30px;background:var(--raised)}
.fp__hub h3{font-size:26px;margin:8px 0 6px}
.fp__hub p{color:var(--muted);font-size:15px;margin:0}
.fp__jetzt{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.fp__linie{display:block;width:2px;height:30px;margin:0 auto -1px;background:var(--border-strong)}
.fp__reihe{position:relative;display:grid;gap:18px;padding-top:20px}
.fp__reihe--3{grid-template-columns:repeat(3,1fr)}
.fp__reihe--2{grid-template-columns:repeat(2,1fr);max-width:620px;margin:0 auto}
.fp__schiene{position:absolute;top:0;height:2px;background:var(--border-strong)}
.fp__reihe--3 .fp__schiene{left:calc((100% - 36px)/6);right:calc((100% - 36px)/6)}
.fp__reihe--2 .fp__schiene{left:calc((100% - 18px)/4);right:calc((100% - 18px)/4)}
.fp__knoten{position:relative;border:1px solid var(--dark-border);border-radius:14px;padding:18px 20px;background:var(--canvas)}
.fp__knoten::before{content:"";position:absolute;top:-21px;left:50%;transform:translateX(-50%);width:2px;height:21px;background:var(--border-strong)}
.fp__knoten .folgt{margin-bottom:8px;font-size:10px;padding:2px 8px}
.fp__knoten h4{font-size:18px;margin:0 0 6px}
.fp__knoten p{color:var(--muted);font-size:14px;margin:0;line-height:1.55}
@media (max-width:760px){
  .fp__reihe--3,.fp__reihe--2{grid-template-columns:1fr}
  .fp__schiene,.fp__knoten::before,.fp__linie{display:none}
  .fp__reihe{padding-top:14px}
  .fp__hub{padding:22px}
}

/* Entwurf 30.10.: Schaubild auf „Über TEISENDA“ wieder als Rad, Studio Engine in der Mitte */
.system{margin:8px 0 0;display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,2.3fr) 48px minmax(0,1fr);align-items:center;gap:0}
.system__rand{border:1px solid var(--dark-border);border-radius:16px;padding:20px;background:var(--surface)}
.system__titel{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--v-300);margin-bottom:12px}
.system__rand ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.system__rand li{display:flex;gap:10px;align-items:center;color:var(--text);font-size:15px}
.system__rand .icon{width:18px;height:18px;color:var(--v-300);flex:none}
.system__pfeil{position:relative;height:2px;background:var(--border-strong);margin:0 6px}
.system__pfeil::after{content:"";position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left:7px solid var(--border-strong);border-right:0}
.system__kern{position:relative;aspect-ratio:1;width:100%;max-width:600px;margin:0 auto}
.system__kern::before{content:"";position:absolute;inset:12%;border:2px dashed var(--border-strong);border-radius:50%}
.system__kern::after{content:"";position:absolute;inset:12%;border-radius:50%;border:2px solid transparent;border-top-color:var(--v-400);animation:systemLauf 9s linear infinite}
@keyframes systemLauf{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.system__kern::after{animation:none}}
.system__kreis{list-style:none;margin:0;padding:0}
.system__modul{position:absolute;z-index:1;transform:translate(-50%,-50%);width:min(40%,172px);display:grid;justify-items:center;gap:4px;text-align:center;
  padding:12px 10px;border:1px solid var(--dark-border);border-radius:14px;background:var(--canvas)}
.system__modul .icon{width:20px;height:20px;color:var(--v-300)}
.system__modul b{font-size:15px;color:var(--head);font-weight:600;line-height:1.2}
.system__modul small{font-size:12.5px;color:var(--dim);line-height:1.3}
.system__stufe{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--v-300);margin-bottom:2px}
.system__modul--1{left:50%;top:12%}.system__modul--2{left:83%;top:31%}.system__modul--3{left:83%;top:69%}
.system__modul--4{left:50%;top:88%}.system__modul--5{left:17%;top:69%}.system__modul--6{left:17%;top:31%}
.system__modul--jetzt{border-color:var(--v-400);background:var(--raised)}
.system__jetzt{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-top:2px}
.system__mitte{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42%;aspect-ratio:1;border-radius:50%;
  display:grid;align-content:center;justify-items:center;gap:6px;text-align:center;padding:6%;
  border:1px solid var(--v-400);background:var(--raised)}
.system__mitte .system__titel{margin:0;font-size:10.5px}
.system__name{display:flex;gap:8px;align-items:center;white-space:nowrap;font-size:clamp(17px,1.6vw,20px);font-weight:600;color:var(--head);letter-spacing:var(--track-head);line-height:1.15}
.system__name .icon{width:22px;height:22px;color:var(--v-300);flex:none}
.system__text{font-size:13px;color:var(--muted);line-height:1.35}
.system__wissen{display:grid;gap:6px;margin-top:6px}
.system__wissen span{display:flex;gap:6px;align-items:center;justify-content:center;font-size:12.5px;color:var(--text);padding:5px 10px;border:1px solid var(--dark-border);border-radius:100px;background:var(--canvas)}
.system__wissen .icon{width:14px;height:14px;color:var(--v-300)}
.system__ki{grid-column:1/-1;justify-self:center;margin-top:28px;display:flex;gap:10px;align-items:center;max-width:62ch;padding:12px 18px;
  border:1px solid var(--dark-border);border-radius:100px;color:var(--muted);font-size:14px;text-align:left}
.system__ki .icon{width:18px;height:18px;color:var(--v-300);flex:none}
@media (max-width:980px){
  .system{grid-template-columns:1fr;gap:0;max-width:560px;margin-left:auto;margin-right:auto}
  .system__pfeil{width:2px;height:32px;margin:6px auto}
  .system__pfeil::after{right:auto;left:-4px;top:auto;bottom:-2px;border:5px solid transparent;border-top:7px solid var(--border-strong);border-bottom:0}
  .system__rand ul{grid-template-columns:repeat(3,auto);justify-content:start;gap:10px 18px}
}
@media (max-width:600px){
  .system__kern{aspect-ratio:auto;padding:18px;border:1px solid var(--v-400);border-radius:18px;background:var(--surface)}
  .system__kern::before,.system__kern::after{display:none}
  .system__kern{display:flex;flex-direction:column}
  .system__mitte{position:static;transform:none;width:auto;aspect-ratio:auto;border-radius:14px;padding:18px;margin-bottom:16px;order:-1}
  .system__kreis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .system__modul{position:static;transform:none;width:auto}
  .system__rand ul{grid-template-columns:1fr}
  .system__ki{border-radius:14px}
}

/* Entwurf 30.10.: Vorteile auf „Über TEISENDA“, links Überschrift, rechts vier nummerierte Punkte */
.nutzen{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(32px,6vw,96px);align-items:start}
.nutzen__kopf{display:grid;gap:16px;position:sticky;top:120px}
.nutzen__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,48px)}
.nutzen__liste li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--dark-border);font-size:17px;font-weight:500;line-height:1.45;color:var(--head)}
.nutzen__liste .icon{width:20px;height:20px;flex:none;margin-top:2px;color:var(--v-300)}
@media (max-width:860px){
  .nutzen{grid-template-columns:1fr}
  .nutzen__kopf{position:static}
}
@media (max-width:600px){.nutzen__liste{grid-template-columns:1fr}}

/* Entwurf 29.10.: Gründer auf „Über TEISENDA“, zwei große Porträts, jede Person spricht für sich */
.duo-kopf{display:grid;gap:16px;max-width:780px;margin:0 auto clamp(36px,5vw,56px);text-align:center}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,64px);max-width:880px;margin:0 auto}
.duo-kopf>*{margin-left:auto;margin-right:auto}
/* Bild, Name, Rolle, Satz und Fakten stehen bei beiden auf derselben Linie */
.person{display:grid;grid-row:span 5;grid-template-rows:subgrid;align-content:start}
.person__bild{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:20px;background:var(--surface);margin-bottom:26px}
.person h3{font-size:clamp(26px,2.6vw,32px);letter-spacing:var(--track-head)}
.person__rolle{margin-top:4px;color:var(--v-300);font-size:15px;font-weight:600}
.person__satz{align-self:start;margin:22px 0 0;padding-left:20px;border-left:2px solid var(--v-400);font-size:clamp(18px,1.7vw,20px);line-height:1.6;color:var(--text)}
.person__fakten{margin:28px 0 0}
.person__fakten div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px solid var(--dark-border)}
.person__fakten div:last-child{border-bottom:1px solid var(--dark-border)}
.person__fakten dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding-top:3px}
.person__fakten dd{margin:0;font-size:15px;color:var(--text)}
.duo-kontakt{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;max-width:880px;margin:clamp(40px,5vw,64px) auto 0;
  padding-top:28px;border-top:1px solid var(--dark-border)}
.duo-kontakt p{color:var(--muted);font-size:17px;max-width:60ch}
.duo-kontakt b{color:var(--head);font-weight:600}
@media (max-width:760px){
  .duo{grid-template-columns:1fr}
  .duo{row-gap:40px}
  .person{grid-row:auto;grid-template-rows:none}
  .person__fakten div{grid-template-columns:104px minmax(0,1fr)}
}