:root{
    --purple:#4b2e9e;
    --magenta:#8a4fc0;
    --grad:linear-gradient(115deg,#5B3CF6 0%,#8A4FC0 100%);
    --bg:#181818;
    --bg-2:#0f0f0f;
    --bg-card:#1f1f1f;
    --ink:#f0f0f0;
    --muted:#a8a8ad;
    --muted-dim:#7a7a80;
    --line:rgba(255,255,255,.10);
    --chip-bg:rgba(255,255,255,.05);
    --nav-bg:rgba(28,28,30,.72);
    --nav-border:rgba(255,255,255,.12);
    --dd-hover:rgba(255,255,255,.07);
    --nav-shadow:0 10px 34px rgba(0,0,0,.35);
    --glow-c:255,255,255;
    --radius:6px;
    --maxw:1280px;
    --font:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  }
  [data-theme="light"]{
    --bg:#ffffff;
    --bg-2:#f5f5f7;
    --bg-card:#ffffff;
    --ink:#1d1d1f;
    --muted:#6e6e73;
    --muted-dim:#8a8a90;
    --line:#e6e6ea;
    --chip-bg:#f1f1f4;
    --nav-bg:rgba(255,255,255,.75);
    --nav-border:#e6e6ea;
    --dd-hover:#f1f1f4;
    --nav-shadow:0 10px 34px rgba(80,40,90,.10);
    --glow-c:128,54,134;
  }
  [data-theme="light"] body::after{opacity:.025}
  [data-theme="light"] .aurora .blob{opacity:.22}
  [data-theme="light"] .mtrack img{filter:grayscale(1) brightness(0);opacity:.4}
  [data-theme="light"] .card:hover,[data-theme="light"] .steps .st:hover{box-shadow:0 24px 55px rgba(75,46,158,.14)}
  html{transition:background .3s ease}
  body,.navbar,.card,.panel,.qcard,.steps .st{transition:background .3s ease,border-color .3s ease,color .3s ease}
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;letter-spacing:-.01em;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

  /* NAV · floating pill */
  header{position:sticky;top:0;z-index:200;padding:16px 16px 0}
  .navbar{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;height:62px;position:relative}
  .nav-center{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center}
  .nav-icon{height:40px;width:auto;opacity:.9;transition:opacity .2s;display:block}
  .nav-icon-light{display:none}
  [data-theme="light"] .nav-icon-dark{display:none}
  [data-theme="light"] .nav-icon-light{display:block}
  /* Kopfzeile: Wortmarke, Mitte-Icon und Buttons gleich hoch (40px) */
  header .brand-logo{height:40px}
  header .nav-logo-light{display:none}
  [data-theme="light"] header .nav-logo-light{display:block}
  [data-theme="light"] header .logo-word{display:none}
  .nav-icon-link:hover .nav-icon{opacity:1}
  @media(max-width:640px){.nav-center{display:none}}
  .brand-logo{height:26px;width:auto;display:block}
  /* Logo auf Indigo umfaerben (Weiss bleibt Weiss) */
  .brand-logo,.faq-media .fmark{filter:hue-rotate(-38deg) saturate(1.15)}
  .logo-word{font-size:20px;font-weight:900;letter-spacing:-.02em;color:var(--ink);display:none}
  .logo-word .dot{color:var(--purple)}
  [data-theme="light"] .logo-img{display:none}
  [data-theme="light"] .logo-word{display:inline-block}
  .nav-links{display:flex;gap:2px;align-items:center}
  .nav-links>a,.dd>button{font-size:14px;font-weight:500;color:var(--muted);padding:9px 14px;border-radius:6px;background:none;border:none;cursor:pointer;font-family:inherit;transition:color .2s,background .2s;display:inline-flex;align-items:center;gap:5px}
  .nav-links>a:hover,.dd>button:hover{color:var(--ink);background:var(--dd-hover)}
  .nav-links>a.active{background:var(--ink);color:var(--bg)}
  .nav-links>a.active:hover{background:var(--ink);color:var(--bg)}
  .dd{position:relative}
  .dd>button .caret{width:9px;height:9px;transition:transform .2s}
  .dd:hover>button .caret{transform:rotate(180deg)}
  .dd-menu{position:absolute;top:calc(100% + 12px);left:0;min-width:230px;background:var(--nav-bg);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid var(--nav-border);border-radius:6px;padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s;box-shadow:var(--nav-shadow)}
  .dd::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px}
  .dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:none}
  .dd-menu a{display:block;padding:11px 13px;border-radius:6px;font-size:14px;font-weight:500;color:var(--muted);transition:.15s}
  .dd-menu a:hover{background:var(--dd-hover);color:var(--ink)}
  .dd-menu a b{display:block;color:var(--ink);font-weight:700;font-size:14px;margin-bottom:1px}
  .dd-menu a small{color:var(--muted-dim);font-size:12px;font-weight:400}
  .nav-right{display:flex;align-items:center;gap:10px}
  .toggle{width:40px;height:40px;border-radius:6px;border:1px solid var(--nav-border);background:none;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
  .toggle:hover{background:var(--dd-hover)}
  .toggle svg{width:18px;height:18px}
  .toggle .moon{display:none}
  [data-theme="light"] .toggle .sun{display:none}
  [data-theme="light"] .toggle .moon{display:block}
  .nav-cta{font-size:14px;font-weight:600;background:var(--grad);color:#fff;padding:11px 18px;border-radius:6px;transition:filter .2s,transform .2s;white-space:nowrap}
  .nav-cta:hover{filter:brightness(1.12);transform:translateY(-1px)}
  @media(max-width:520px){.nav-cta span{display:none}}

  /* HERO */
  .hero{text-align:center;padding:130px 24px 96px;position:relative;overflow:hidden}

/* Nichts darf seitlich aus dem Fenster ragen. clip statt hidden, damit
   position:sticky weiterhin funktioniert; hidden nur als Rueckfall. */
html,body{overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}

  /* "Cookie-Einstellungen" im Fuss ist ein Schalter, kein Link ins Leere.
     Die Farben kommen aus derselben Regel wie die Links daneben. */
  .lf-legal button{appearance:none;-webkit-appearance:none;border:0;background:none;
    padding:0;margin:0;cursor:pointer;font-family:inherit;font-size:inherit;
    line-height:inherit;text-align:inherit}
  .lf-legal button:focus-visible{outline:2px solid #7D64F8;outline-offset:3px}

  /* Lange deutsche Woerter (Organisationsaufbau, Kalkulationsprozess) passen
     auf dem Handy nicht in eine Zeile: dort sauber trennen statt abschneiden. */
  @media(max-width:700px){
    h1,h2,h3,.cz-key,.csp-t,.nx-cap strong,.tc-cap strong{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
    .cz-hero h1{font-size:clamp(30px,8.6vw,40px)}
    .cz-key{font-size:clamp(28px,8vw,40px)}
  }


/* AI-Hinweis unten rechts (auf allen Seiten) */
.ai-badge{position:fixed;right:18px;bottom:18px;z-index:260;display:flex;align-items:center;gap:0;height:40px;padding:0 6px;border-radius:8px;
  color:var(--ink);background:color-mix(in srgb,var(--bg) 82%,transparent);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  text-decoration:none;opacity:.92;transition:opacity .25s,gap .3s,padding .3s}
.ai-badge svg{width:28px;height:28px;display:block;flex:0 0 auto}
.ai-badge-t{max-width:0;overflow:hidden;white-space:nowrap;font-size:12.5px;font-weight:700;transition:max-width .35s ease}
.ai-badge:hover,.ai-badge:focus-visible{opacity:1;gap:8px;padding:0 12px 0 6px}
.ai-badge:hover .ai-badge-t,.ai-badge:focus-visible .ai-badge-t{max-width:140px}
@media(max-width:760px){.ai-badge{right:12px;bottom:12px;height:36px}.ai-badge svg{width:24px;height:24px}}
@media print{.ai-badge{display:none}}
/* AI-Hinweis in Grau wie die Nebentexte der Seite, beim Ueberfahren heller */
.ai-badge{color:var(--muted);opacity:1}
.ai-badge:hover,.ai-badge:focus-visible{color:var(--ink)}
/* AI-Hinweis ohne Rahmen und Hintergrund, nur das Zeichen. Beim Ueberfahren/Antippen klappt er wie bisher mit Flaeche auf. */
.ai-badge{background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:opacity .25s,gap .3s,padding .3s,background .25s,border-color .25s}
.ai-badge:hover,.ai-badge:focus-visible{background:color-mix(in srgb,var(--bg) 82%,transparent);border-color:var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* Knopf «Hallo sagen»: gleiche Groesse wie vorher «Let's talk» (Schrift 13px, seitlicher Abstand angepasst) */
header .nav-cta{font-size:13px;padding-left:11.6px;padding-right:11.6px;line-height:21px}
@media(max-width:520px){header .nav-cta{padding-left:11px;padding-right:11px}}