/* ============================================================
     PROTOTYP: Latent-Space-Hero
     Eigenstaendige Testdatei. Greift nur lesend auf die
     bestehenden Fonts, das Logo und js/lib zu.
     Tokens sind hier bewusst dupliziert, damit die Datei
     ohne base.css/site.css laeuft und nichts ueberschreibt.
     ============================================================ */
  :root {
    --bg:        #080B12;
    --text:      #ECEEF2;
    --text-soft: #A8B2C8;
    --accent:    #4F9CF9;
    --accent-2:  #67E8F9;
    --accent-3:  #818CF8;
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-body:    "Plus Jakarta Sans", system-ui, sans-serif;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { background: var(--bg); }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    overflow-x: hidden;
  }

  /* ---- Die Buehne: 300vh Scrollstrecke, Canvas bleibt sticky ---- */
  .stage { height: 720vh; position: relative; }

  .stage-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }

  #latent { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

  /* ---- Radialer Glow hinter den Partikeln ---- */
  .glow {
    position: absolute;
    left: 50%; top: 50%;
    width: 120vw; height: 120vh;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center,
                rgba(79,156,249,0.13) 0%,
                rgba(129,140,248,0.06) 38%,
                transparent 68%);
    pointer-events: none;
  }

  /* ---- Textebene ---- */
  .hero-text {
    position: absolute;
    z-index: 6;
    left: 0; right: 0;
    top: var(--top, 50%);
    text-align: center;
    padding: 0 24px;
    pointer-events: none;
    transform: translateY(-50%);
  }

  /* Der zweite Teil des Heros. Er belegt seinen Platz von Anfang an,
     ist aber unsichtbar. Dadurch springt beim Einblenden nichts. */
  .hero-extra { margin-top: 26px; }
  .hero-cta {
    display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
    opacity: 0; transform: translateY(18px);
  }
  .hero-cta a {
    pointer-events: auto;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 22px; border-radius: 12px;
    font-size: .95rem; font-weight: 600; text-decoration: none;
  }
  .cta-solid { background: var(--accent); color: #071018; }
  @media (hover: none) and (pointer: coarse) { .hero-cta a { min-height: 44px; display: inline-flex; align-items: center; } }
  .cta-line  { border: 1px solid rgba(255,255,255,.2); color: var(--text); }

  .hero-trust {
    display: flex; justify-content: center; align-items: center;
    gap: 22px; flex-wrap: wrap;
    margin-top: 20px;
    opacity: 0; transform: translateY(18px);
  }
  .hero-trust b { font-size: 1.05rem; }
  .hero-trust small { font-size: .7rem; }
  .hero-trust div { text-align: center; }
  .hero-trust b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.35rem; font-weight: 600;
    color: var(--text);
  }
  .hero-trust small { font-size: .76rem; color: var(--text-soft); letter-spacing: .03em; }
  .hero-trust i { width: 1px; height: 26px; background: rgba(255,255,255,.12); }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-soft);
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(22,22,24,0.55);
    backdrop-filter: blur(8px);
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 20px;
  }
  .eyebrow i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    display: block;
  }

  h1 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 1.3rem + 4.2vw, 4.2rem);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.02em;
  }
  h1 .soft { color: var(--text-soft); }

  .sub {
    margin: 18px auto 0;
    max-width: 560px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-soft);
  }

  /* ---- Scroll-Hinweis, blendet bei Fortschritt aus ---- */
  .cue {
    position: absolute;
    left: 50%; bottom: 36px;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    font-size: 0.84rem; font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text);
    opacity: 0;
    pointer-events: none;
  }
  /* Maus mit laufendem Rad (Desktop), auf Touch-Geraeten ein springender Pfeil */
  .cue-maus { position: relative; width: 28px; height: 44px; border: 2px solid rgba(236,238,242,.8); border-radius: 15px; }
  .cue-maus::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 9px; margin-left: -2px;
    border-radius: 2px; background: var(--accent); animation: cueRad 1.6s ease-in-out infinite; }
  .cue-pfeil { display: none; width: 16px; height: 16px; border-right: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
    transform: rotate(45deg); animation: cuePfeil 1.4s ease-in-out infinite; }
  @keyframes cueRad { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(11px); opacity: 0; } 100% { transform: translateY(14px); opacity: 0; } }
  @keyframes cuePfeil { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(7px) rotate(45deg); } }
  @media (hover: none) { .cue-maus { display: none; } .cue-pfeil { display: block; } }
  @media (prefers-reduced-motion: reduce) { .cue-maus::after, .cue-pfeil { animation: none; } }
  [data-theme="light"] .cue-maus { border-color: rgba(8,11,18,.45); }
  /* Intro: Ueberschrift startet gross und setzt sich, Rest blendet danach ein */
  .hero-text h1 { transform-origin: 50% 50%; will-change: transform; }

  /* ---- Fortschrittsanzeige nur fuer den Test ----
     Standardmaessig unsichtbar. Der Inhalt bleibt im Dokument,
     damit automatisierte Pruefungen die Werte weiter auslesen
     koennen. Einblenden mit der Taste d oder ?debug in der URL. */
  .debug { display: none; }
  .zeigt-debug .debug { display: block; }
  .debug {
    position: fixed;
    top: 14px; left: 14px;
    z-index: 50;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: var(--text-soft);
    background: rgba(8,11,18,0.78);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 8px;
    padding: 7px 10px;
    line-height: 1.5;
  }
  .debug b { color: var(--accent-2); font-weight: 500; }



  /* ============================================================
     Geraete, letzte Stufe der Hero-Sequenz
     Alles in CSS aufgebaut: Titanrahmen mit Verlaufskante,
     Dynamic Island, Seitentasten, Statusleiste, Glasreflex.
     ============================================================ */
  .stage-devices {
    position: absolute;
    left: 50%; top: 67%;
    width: var(--lt-w, min(860px, 64vw));
    /* Paar optisch mittig: das Telefon haengt rechts ueber */
    transform: translateX(calc(-50% - 118px * var(--pz)));   /* top setzt das Skript */
    perspective: 1800px;
    pointer-events: none;
    z-index: 4;
  }
  .dev-glow {
    position: absolute; left: 50%; top: 52%;
    width: 130%; height: 150%;
    transform: translate(-50%,-50%);
    background: radial-gradient(ellipse at center, rgba(79,156,249,.20), rgba(103,232,249,.07) 42%, transparent 68%);
    pointer-events: none;
  }

  /* ---------------- Laptop ---------------- */
  .stage-devices { --pz: 1; }
  .laptop {
    position: relative; width: 100%;
    transform-origin: 50% 100%;
    will-change: transform, opacity;
  }
  .lt-deckel {
    position: relative;
    padding: 1.5px; border-radius: 20px 20px 8px 8px;
    /* gleiche Titankante wie das Telefon */
    background: linear-gradient(145deg, #6c7484 0%, #2c313d 26%, #9aa3b4 48%, #2c313d 64%, #5d6574 100%);
    box-shadow: 0 50px 110px rgba(0,0,0,.72), 0 40px 120px -50px rgba(79,156,249,.45);
  }
  .lt-screen {
    position: relative; overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: 19px 19px 7px 7px;
    background: #050609;
    border: clamp(8px, 1.6%, 14px) solid #050609;
    border-bottom-width: clamp(12px, 2.4%, 20px);
  }
  .lt-kamera {
    position: absolute; top: calc(-1 * clamp(8px, 1.6%, 14px) / 2 - 2px); left: 50%;
    width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
    background: #1b2130; box-shadow: 0 0 0 1px rgba(255,255,255,.06);
  }
  .lt-gloss {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, rgba(255,255,255,.07) 0%, transparent 34%, transparent 70%, rgba(255,255,255,.03) 100%);
  }
  .lt-basis {
    position: relative; height: 0; padding-bottom: 2.6%;
    width: 114%; margin-left: -7%;
    border-radius: 2px 2px 50% 50% / 2px 2px 100% 100%;
    background: linear-gradient(180deg, #b4bcca 0%, #7d8595 38%, #3a404c 100%);
    box-shadow: 0 30px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.5);
  }
  .lt-basis i {
    position: absolute; top: 0; left: 50%; width: 15%; height: 42%; transform: translateX(-50%);
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, #4b5260, #6f7785);
  }

  /* ---------------- Bildschirminhalt (1000 x 625, skaliert) ---------------- */
  .werk {
    position: absolute; left: 0; top: 0; width: 1000px; height: 625px;
    transform-origin: 0 0;
    display: flex; flex-direction: column;
    background: radial-gradient(50% 60% at 42% 58%, rgba(79,156,249,.10), transparent 70%),
                linear-gradient(180deg, #0f1420, #0a0d15);
    color: var(--text);
  }
  .wk-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 32px; border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.02);
    padding-right: 90px;   /* rechts ueberlappt das Telefon */
  }
  .wk-marke { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
  .wk-marke img { width: 26px; height: 26px; border-radius: 7px; }
  .wk-kopf { padding: 22px 32px 6px; }
  .wk-kopf small { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 6px; }
  .wk-kopf b { font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; letter-spacing: -.02em; }
  .wk-antwort {
    display: flex; align-items: center; gap: 14px;
    margin: 0 90px 24px 32px; padding: 13px 16px; border-radius: 14px;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
    opacity: .4; transition: opacity var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out);
  }
  .wk-antwort small { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); }
  .wk-blase {
    font-size: .88rem; font-weight: 500; padding: 8px 13px; border-radius: 13px; border-bottom-right-radius: 4px;
    background: linear-gradient(135deg,#4F9CF9,#3b82f6); color: #04101d;
    transform: scale(.9); opacity: 0; transform-origin: 0 50%;
    transition: transform var(--dur-s) cubic-bezier(.34,1.56,.64,1), opacity var(--dur-s) var(--ease-out);
  }
  .wk-antwort em { margin-left: auto; font-style: normal; font-size: .74rem; font-weight: 600; color: #4ADE80; opacity: 0; transition: opacity var(--dur-s) var(--ease-out) .2s; }
  .wk-antwort.ist-gesendet { opacity: 1; border-color: rgba(79,156,249,.3); }
  .wk-antwort.ist-gesendet .wk-blase { transform: none; opacity: 1; }
  .wk-antwort.ist-gesendet em { opacity: 1; }
  .wk-status {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .72rem; font-weight: 600; padding: 5px 11px; border-radius: 999px;
    background: rgba(79,156,249,.12); color: #7DB6FB;
    transition: background var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out);
  }
  .wk-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: wkPuls 1.2s ease-in-out infinite; }
  .wk-status.ist-fertig { background: rgba(34,197,94,.14); color: #4ADE80; }
  .wk-status.ist-fertig i { animation: none; }
  @keyframes wkPuls { 50% { opacity: .3; transform: scale(.7); } }

  .wk-body {
    position: relative; flex: 1;
    display: grid; grid-template-columns: 1fr .8fr 1.5fr; gap: 30px;
    align-items: center; padding: 8px 90px 10px 32px;
  }
  .wk-linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .wk-linien path { fill: none; stroke-width: 1.5; }
  .wk-linien .l-grund { stroke: rgba(255,255,255,.08); }
  .wk-linien .l-fluss { stroke: url(#wkVerlauf); stroke-dasharray: 3 13; stroke-linecap: round; animation: wkFluss 1.1s linear infinite; opacity: .35; transition: opacity var(--dur-s) var(--ease-out); }
  .wk-linien .l-fluss.ist-an { opacity: 1; stroke-width: 2; }
  @keyframes wkFluss { to { stroke-dashoffset: -16; } }

  .wk-spalte { position: relative; z-index: 1; display: grid; gap: 10px; align-content: center; }
  .wk-spalte small { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 2px; }
  .wk-ein {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 13px; border-radius: 12px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    font-size: .8rem; color: var(--text-soft);
    transition: border-color var(--dur-s) var(--ease-out), background var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out);
  }
  .wk-ein svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .wk-ein.ist-an { color: var(--text); border-color: rgba(79,156,249,.55); background: rgba(79,156,249,.12); box-shadow: 0 0 24px -6px rgba(79,156,249,.6); }
  .wk-ein.ist-an svg { color: #67E8F9; }

  .wk-mitte { justify-items: center; text-align: center; }
  .wk-kern { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
  .wk-kern img { position: relative; width: 74px; height: 74px; border-radius: 20px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 0 40px rgba(79,156,249,.55); }
  .wk-ring { position: absolute; inset: -6px; border-radius: 28px; border: 1px solid rgba(103,232,249,.5); animation: wkRing 2.4s var(--ease-out) infinite; }
  .wk-ring--2 { animation-delay: 1.2s; }
  @keyframes wkRing { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
  .wk-kern.ist-denkt img { animation: wkDenkt .9s var(--ease-in-out) infinite alternate; }
  @keyframes wkDenkt { to { box-shadow: 0 0 0 1px rgba(103,232,249,.5), 0 0 70px rgba(103,232,249,.85); } }

  .wk-auf {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 12px;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
    font-size: .84rem; color: var(--text-soft);
    opacity: .45; transform: translateX(-8px);
    transition: opacity var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out);
  }
  .wk-haken {
    position: relative; flex: 0 0 22px; height: 22px; border-radius: 50%;
    border: 1.5px dashed rgba(255,255,255,.25);
    display: grid; place-items: center;
    transition: background var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out);
  }
  .wk-haken svg { width: 14px; height: 14px; fill: none; stroke: #071018; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .45s var(--ease-out) .12s; }
  .wk-auf.ist-dran { opacity: 1; transform: none; color: var(--text); }
  .wk-auf.ist-dran .wk-haken { border-color: #67E8F9; animation: wkDreh 1s linear infinite; }
  @keyframes wkDreh { to { transform: rotate(360deg); } }
  .wk-auf.ist-fertig { opacity: 1; transform: none; color: var(--text); border-color: rgba(79,156,249,.28); }
  .wk-auf.ist-fertig .wk-haken { border: 0; background: linear-gradient(135deg, #67E8F9, #4F9CF9); animation: none; }
  .wk-auf.ist-fertig .wk-haken svg { stroke-dashoffset: 0; }

  /* ---------------- Telefon ---------------- */
  .phone {
    position: absolute; right: calc(-238px * var(--pz)); bottom: calc(-26px * var(--pz));
    width: 250px;
    transform-origin: 50% 100%;
    will-change: transform, opacity;
  }
  .phone-frame {
    position: relative;
    transform: scale(var(--pz)); transform-origin: 100% 100%;
    border-radius: 46px;
    padding: 11px;
    /* Titanrahmen: zwei Verlaeufe uebereinander */
    background:
      linear-gradient(145deg, #6c7484 0%, #2c313d 26%, #9aa3b4 48%, #23283292 62%, #5d6574 100%);
    box-shadow:
      0 44px 96px rgba(0,0,0,.8),
      0 0 0 1px rgba(255,255,255,.10),
      inset 0 1px 2px rgba(255,255,255,.35);
  }
  .phone-btn { position: absolute; background: linear-gradient(180deg,#8a92a2,#3d434f); border-radius: 2px; }
  .phone-btn--silence { left: -2px; top: 96px; width: 3px; height: 26px; }
  .phone-btn--up      { left: -2px; top: 140px; width: 3px; height: 46px; }
  .phone-btn--down    { left: -2px; top: 196px; width: 3px; height: 46px; }
  .phone-btn--power   { right: -2px; top: 160px; width: 3px; height: 66px; }

  .phone-screen {
    position: relative;
    border-radius: 36px;
    background: linear-gradient(175deg, #0d1220, #080b12 70%);
    overflow: hidden;
    aspect-ratio: 9 / 19.5;
    display: grid; grid-template-rows: auto 1fr auto;
  }
  .phone-island {
    position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
    width: 84px; height: 25px; border-radius: 14px;
    background: #000; z-index: 5;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  }
  .phone-status {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 22px 6px;
    font-size: .68rem; font-weight: 600; color: #fff; letter-spacing: .02em;
  }
  .phone-status-r { display: flex; align-items: center; gap: 5px; }
  .phone-status-r i { display: block; background: #fff; border-radius: 1px; opacity: .92; }
  .phone-status-r .sig  { width: 15px; height: 9px; clip-path: polygon(0 68%,20% 68%,20% 100%,0 100%,0 68%,27% 45%,47% 45%,47% 100%,27% 100%,27% 45%,53% 22%,73% 22%,73% 100%,53% 100%,53% 22%,80% 0,100% 0,100% 100%,80% 100%); }
  .phone-status-r .wifi { width: 12px; height: 9px; clip-path: polygon(50% 100%,0 34%,14% 22%,50% 58%,86% 22%,100% 34%); }
  .phone-status-r .bat  { width: 20px; height: 10px; border-radius: 3px; background: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); position: relative; }
  .phone-status-r .bat::after { content:""; position:absolute; inset: 2px; width: 72%; background: #fff; border-radius: 1px; }

  .phone-app { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; padding: 4px 12px 0; }
  .pa-head { display: flex; align-items: center; gap: 10px; padding: 10px 6px 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
  .pa-head u { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#67E8F9,#4F9CF9); }
  .pa-head b { display: block; font-size: .82rem; font-weight: 600; }
  .pa-head em { font-style: normal; font-size: .66rem; color: #4ade80; }
  .pa-body { display: grid; gap: 8px; align-content: start; padding: 12px 2px; overflow: hidden; }
  .pbub { font-size: .74rem; padding: 9px 12px; border-radius: 14px; max-width: 88%; line-height: 1.38; }
  .pbub.in  { background: rgba(255,255,255,.08); border-bottom-left-radius: 5px; }
  .pbub.out { background: linear-gradient(135deg,#4F9CF9,#3b82f6); color: #04101d; margin-left: auto; border-bottom-right-radius: 5px; font-weight: 500; }
  .ptype { display: inline-flex; gap: 4px; padding: 10px 13px; border-radius: 14px; background: rgba(255,255,255,.08); border-bottom-left-radius: 5px; }
  .ptype i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.65); animation: blip 1.1s infinite; }
  .ptype i:nth-child(2) { animation-delay: .18s; }
  .ptype i:nth-child(3) { animation-delay: .36s; }
  @keyframes blip { 0%,60%,100% { opacity:.3; transform: translateY(0);} 30% { opacity:1; transform: translateY(-3px);} }
  .pa-input {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 2px 8px; padding: 9px 12px; border-radius: 999px;
    background: rgba(255,255,255,.06); font-size: .7rem; color: var(--text-soft);
  }
  .pa-input b { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); }
  .phone-home { height: 5px; width: 108px; border-radius: 3px; background: rgba(255,255,255,.4); margin: 0 auto 9px; }
  .phone-gloss {
    position: absolute; inset: 0; border-radius: 36px; pointer-events: none;
    background: linear-gradient(118deg, rgba(255,255,255,.12) 0%, transparent 32%, transparent 68%, rgba(255,255,255,.05) 100%);
  }


  /* ---- Laufbaender, gegenlaeufig ------------------------------- */
  .belts { background: var(--bg); padding: 68px 0; overflow: hidden;
           border-top: 1px solid rgba(255,255,255,.06);
           border-bottom: 1px solid rgba(255,255,255,.06); }
  .belt { display: flex; width: max-content; will-change: transform; }
  .belt + .belt { margin-top: 14px; }
  .belt span {
    display: inline-flex; align-items: center; gap: 16px;
    padding: 0 26px;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1rem + 2.1vw, 3.1rem);
    font-weight: 600; white-space: nowrap; letter-spacing: -.02em;
    color: var(--text-soft);
  }
  .belt span::after {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); opacity: .55;
  }
  .belt--b span { color: rgba(236,238,242,.28); }
  @keyframes beltL { to { transform: translateX(-50%); } }
  @keyframes beltR { from { transform: translateX(-50%); } to { transform: none; } }
  .belt--a { animation: beltL 26s linear infinite; }
  .belt--b { animation: beltR 31s linear infinite; }

  /* ---- Aussage, Wort fuer Wort aufhellend ---------------------- */
  .claim { position: relative; height: 300vh; background: var(--bg); }
  .claim-sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; }
  .claim-inner { width: min(1320px, 92vw); text-align: left; }
  .claim-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: .74rem; letter-spacing: .17em; text-transform: uppercase;
    color: var(--text-soft); margin-bottom: 30px;
  }
  .claim-eyebrow b { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
    .claim-text {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, .6rem + 5.4vw, 5.6rem);
    font-weight: 600; line-height: 1.05; letter-spacing: -.035em;
  }
  .claim-text w { display: inline-block; }
  .claim-text c { display: inline; color: rgba(236,238,242,.13); will-change: color; }

  /* ---- Ablauf: faehrt seitwaerts durch ------------------------- */
  .flow { position: relative; height: 330vh; background: var(--bg); }
  .flow-sticky {
    position: sticky; top: 0; height: 100vh; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
  }
  /* Die Kopfzeile darf nicht so breit werden wie der Track,
     sonst schiebt die Zentrierung sie aus dem Bild. */
  .flow-head, .flow-rail { flex: 0 0 auto; align-self: center; width: min(1120px, 92vw); }
  .flow-head { width: min(1120px, 92vw); margin: 0 auto 38px; }
  .flow-head span {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: .74rem; letter-spacing: .17em; text-transform: uppercase; color: var(--text-soft);
  }
  .flow-head span b { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
  .flow-head h2 {
    font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em;
    font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem); margin-top: 12px;
  }
  .flow-track { display: flex; gap: 26px; padding-left: max(calc((100vw - 1120px) / 2), 4vw); will-change: transform; }
  .flow-card {
    flex: 0 0 min(580px, 80vw);
    min-height: 330px;
    background: rgba(22,24,32,.66);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    padding: 36px 36px 40px;
    backdrop-filter: blur(12px);
  }
  .flow-num {
    font-family: var(--font-display); font-size: 4.2rem; font-weight: 600;
    line-height: 1; color: transparent;
    -webkit-text-stroke: 1.4px rgba(79,156,249,.55);
    margin-bottom: 20px;
  }
  .flow-card h3 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; margin-bottom: 12px; }
  .flow-card p { color: var(--text-soft); line-height: 1.65; }
  .flow-rail { width: min(1120px, 92vw); margin: 38px auto 0; height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; }
  .flow-rail i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }

  @media (prefers-reduced-motion: reduce) {
    .belt--a, .belt--b { animation: none; }
  }

  /* ============================================================
     Abschnitt 2: Produkte, Muster wie Terminals features-steps
     ------------------------------------------------------------
     Links ein Textstapel: alle Produkte stehen untereinander,
     das aktive hell, die anderen stark gedimmt. Der Stapel
     wandert beim Scrollen nach oben.
     Rechts ein randloses, grosses Medium mit ausgeklinkter Ecke.
     ============================================================ */
  .steps { position: relative; height: 720vh; background: var(--bg); }
  .steps-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }

  .steps-grid {
    display: grid; grid-template-columns: 40% 60%;
    height: 100vh; align-items: center;
  }

  /* --- linke Spalte: Textstapel --- */
  .stack-wrap {
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 24%, #000 76%, transparent 96%);
            mask-image: linear-gradient(to bottom, transparent 4%, #000 24%, #000 76%, transparent 96%);
    padding-left: max(calc((100vw - 1320px) / 2), 5vw);
    padding-right: 40px;
    overflow: hidden;
    height: 100vh;
  }
  .stack-eyebrow-wrap { position: absolute; top: 12vh; left: max(calc((100vw - 1320px) / 2), 5vw); z-index: 2; }
  .stack-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--text-soft); margin-bottom: 30px;
  }
  .stack-eyebrow b { width: 6px; height: 6px; border-radius: 50%; background: var(--pc, var(--accent)); transition: background .5s ease; }

  .stack { position: absolute; top: 50%; left: max(calc((100vw - 1320px) / 2), 5vw); right: 40px; will-change: transform; }
  .stack-item { padding: 18px 0 30px; }
  .stack-item .no {
    font-family: ui-monospace, monospace; font-size: .74rem;
    letter-spacing: .2em; color: var(--text-soft); opacity: .8;
  }
  .stack-item h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.1rem + 2.6vw, 3.1rem);
    font-weight: 600; letter-spacing: -.025em; line-height: 1.08;
    margin: 12px 0 14px;
  }
  .stack-item p { font-size: 1.06rem; line-height: 1.62; max-width: 40ch; }
  .stack-item a {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 20px;
    font-size: .92rem; font-weight: 600; text-decoration: none;
    color: var(--pc, var(--accent));
  }

  /* --- rechte Spalte: grosses Medium, randlos --- */
  .media-wrap { position: relative; height: 100vh; display: grid; align-items: center; }
  .media {
    position: absolute; inset: 8vh 0 8vh 0;
    border-radius: 26px 0 0 26px;
    overflow: hidden;
    background: #0a0d15;
    border: 1px solid rgba(255,255,255,.08);
    border-right: none;
    will-change: transform, opacity;
  }
  .media::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(90% 70% at 20% 10%, var(--pc-soft, rgba(79,156,249,.22)), transparent 62%);
    pointer-events: none; z-index: 2;
  }
  /* ausgeklinkte Ecke oben links, wie bei Terminal */
  .media::after {
    content: ""; position: absolute; top: -1px; left: -1px;
    width: 116px; height: 56px;
    background: var(--bg);
    border-right: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    border-radius: 0 0 20px 0;
    z-index: 3;
  }
  .media-in { position: absolute; inset: 0; padding: 84px 64px 64px; display: grid; align-content: center; gap: 22px; }


  .steps-rail {
    position: absolute; left: max(calc((100vw - 1320px) / 2), 5vw); bottom: 5vh;
    display: flex; gap: 9px; z-index: 4;
  }
  .steps-rail i { height: 3px; width: 56px; border-radius: 2px; background: rgba(255,255,255,.14); position: relative; overflow: hidden; }
  .steps-rail i::after { content:""; position:absolute; inset:0; background: var(--pc, var(--accent)); transform: scaleX(var(--fill,0)); transform-origin: left; }



  /* ---- Einblenden beim Hereinscrollen, wiederverwendbar ---- */
  [data-reveal] {
    opacity: 0; transform: translateY(26px);
    transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out);
  }
  [data-reveal].seen { opacity: 1; transform: none; }
  [data-reveal-delay="1"] { transition-delay: .09s; }
  [data-reveal-delay="2"] { transition-delay: .18s; }
  [data-reveal-delay="3"] { transition-delay: .27s; }

  .outro { padding: 130px 24px 160px; text-align: center; background: var(--bg); }
  .outro h2 { font-family: var(--font-display); font-size: clamp(1.8rem,1.2rem+2vw,2.6rem); font-weight: 600; letter-spacing:-.02em; }
  .outro p { color: var(--text-soft); max-width: 52ch; margin: 16px auto 0; line-height: 1.65; }

  

  /* ---- Abschnitt nach dem Hero, damit das Ende sichtbar wird ---- */
  .after {
    min-height: 60vh;
    display: grid;
    place-items: center;
    border-top: 1px solid rgba(255,255,255,0.07);
    background: var(--bg);
    text-align: center;
    padding: 80px 24px;
  }
  .after p { color: var(--text-soft); max-width: 520px; }

  

  /* ---- Kopfleiste ------------------------------------------------
     Faehrt ein, sobald die Marke nach oben wandert, und uebernimmt
     dort das echte Logo. -------------------------------------- */
  .topbar {
    /* ueber dem Menue, sonst liegt der Schliessen-Knopf darunter */
    position: fixed; top: 18px; left: 0; right: 0; z-index: 70;
    display: flex; justify-content: center; pointer-events: none;
  }
  .pill {
    display: flex; align-items: center; gap: 22px;
    padding: 10px 12px 10px 20px; border-radius: 16px;
    background: rgba(18,22,32,.72);
    border: 1px solid rgba(255,255,255,.09);
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 18px 46px rgba(0,0,0,.42);
    pointer-events: auto; opacity: 0; transform: translateY(-14px);
    transition: opacity var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out);
  }
  .topbar.ready .pill { opacity: 1; transform: none; }
  .brand { display: flex; align-items: center; width: 104px; height: 30px; }
  .brand img { width: 100%; height: auto; opacity: 0; will-change: opacity; }
  .menu { display: flex; align-items: center; gap: 4px; }
  .menu a {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 11px; border-radius: 9px; font-size: .875rem;
    color: var(--text); text-decoration: none; opacity: .86;
    transition: background .2s ease, opacity .2s ease;
  }
  .menu a:hover { background: rgba(255,255,255,.07); opacity: 1; }
  .menu svg { width: 11px; height: 11px; opacity: .55; }
  .actions { display: flex; align-items: center; gap: 8px; }
  .icon-btn {
    width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 10px; border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04); color: var(--text); cursor: pointer;
  }
  .icon-btn svg { width: 16px; height: 16px; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 14px; border-radius: 10px; font-size: .7rem; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase; line-height: 1.25;
    text-decoration: none; white-space: nowrap;
  }
  .btn-primary { background: var(--accent); color: #071018; }
  .btn-ghost { background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,.18); }
  .btn-soft { background: rgba(255,255,255,.10); color: var(--text); }
  @media (max-width: 1100px) { .menu, .btn-ghost, .btn-soft { display: none; } }

  /* ============================================================
     Hochformat. Alles, was quer funktioniert, braucht hier
     eigene Masse: Kopfleiste, Geraete, Textabstaende.
     ============================================================ */
  @media (max-width: 860px) {
    /* Testanzeige klein und aus dem Weg */
    .debug { top: auto; bottom: 10px; left: 10px; font-size: 9px; padding: 5px 7px; opacity: .55; }

    /* Kopfleiste kompakt: Logo und ein Knopf, sonst nichts */
    .topbar { top: 10px; }
    .pill { gap: 10px; padding: 7px 8px 7px 12px; border-radius: 13px; width: calc(100% - 20px); }
    .brand { width: 78px; height: 22px; }
    .btn { font-size: .6rem; padding: 8px 10px; letter-spacing: .05em; }
    .btn-primary { margin-left: auto; }

    /* Hero-Text: Kopfleiste nicht ueberlaufen */
    .hero-text { padding: 0 20px; }
    h1 { font-size: clamp(1.8rem, 1.1rem + 3.4vw, 2.4rem); }
    .sub { font-size: .95rem; }
    .eyebrow { font-size: .66rem; padding: 6px 11px; }
    .hero-cta { flex-direction: column; align-items: stretch; gap: 9px; }
    .hero-cta a { justify-content: center; padding: 12px 18px; font-size: .9rem; }

    /* Geraete: nur das Dashboard, Telefon hat keinen Platz */
    /* Hochkant wird die Lage nicht prozentual gesetzt, sondern aus
       der tatsaechlichen Unterkante des Textblocks berechnet. Sonst
       laufen Text und Geraete bei niedrigen Fenstern ineinander,
       weil beide in Prozent sitzen, ihre Hoehen aber fest sind. */
    .stage-devices { top: auto; transform: translateX(calc(-50% + 4px)); }
    .phone { right: calc(-70px * var(--pz)); bottom: calc(-90px * var(--pz)); }

    /* Aussage */
    .claim-inner { width: 90vw; }
    .claim-text { font-size: clamp(1.5rem, 1rem + 4.2vw, 2.2rem); line-height: 1.16; }

    /* Produkte: Das Zweispalten-Grid traegt hochkant nicht.
       Text und Medium werden stattdessen fest positioniert. */
    .steps { height: 624vh; }
    .steps-grid { display: block; position: relative; height: 100vh; }
    .stack-wrap {
      position: absolute; top: 9vh; left: 0; right: 0;
      height: 34vh; padding: 0 20px;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
              mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
    }
    .stack { top: 50%; left: 20px; right: 20px; }
    .stack-item { padding: 10px 0 18px; }
    .stack-item h2 { font-size: 1.65rem; margin: 8px 0 8px; }
    .stack-item p { font-size: .94rem; line-height: 1.5; }
    .stack-item a { margin-top: 12px; font-size: .88rem; }
    /* Der Eyebrow lag im Hochformat auf dem ersten Produktnamen.
       Hochkant ist der Platz zu knapp, deshalb entfaellt er hier. */
    .stack-eyebrow-wrap { display: none; }
    /* Unten bleiben 96px frei: dort sitzt der feste CTA (22px + 52px). */
    .media-wrap {
      position: absolute; left: 14px; right: 14px; bottom: calc(96px + env(safe-area-inset-bottom));
      height: min(44vh, calc(57vh - 106px)); display: block;
    }
    .media { position: absolute; inset: 0; border-radius: 18px; margin: 0; }
    .media::after { width: 84px; height: 40px; border-radius: 0 0 14px 0; }
    .media-in { padding: 52px 20px 20px; gap: 12px; }
    .steps-rail { left: 20px; bottom: calc(83px + env(safe-area-inset-bottom)); }
    .steps-rail i { width: 38px; }

    /* Ablauf */
    .flow-head { padding: 0 20px; }
    .flow-track { padding-left: 20px; gap: 16px; }
    .flow-card { flex: 0 0 84vw; min-height: 0; padding: 24px 22px 28px; }
    .flow-num { font-size: 3rem; margin-bottom: 14px; }
    .flow-card h3 { font-size: 1.2rem; }
    .flow-rail { width: calc(100% - 40px); }

    /* Laufbaender */
    .belts { padding: 40px 0; }
    .belt span { font-size: 1.15rem; padding: 0 16px; gap: 11px; }
  }

  /* ============================================================
     Mobiles Menue, Mechanik nach dem Staggered Menu von reactbits
     ------------------------------------------------------------
     Drei Teile:
     1) mehrere Farbebenen, die zeitversetzt von rechts einfahren
     2) ein Panel mit grossen Versalien
     3) die Eintraege fahren einzeln von unten herein, jeder mit
        eigener Verzoegerung und hochgestellter Nummer
     Reines CSS und ein paar Zeilen JavaScript, kein React.
     ============================================================ */
  .burger {
    display: none;
    width: 40px; height: 40px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    border-radius: 11px;
    position: relative; cursor: pointer;
    margin-left: auto;
  }
  .burger i {
    position: absolute; left: 11px; right: 11px; height: 1.6px;
    background: var(--text); border-radius: 2px;
    transition: transform var(--dur-s) var(--ease-in-out), opacity .2s;
  }
  .burger i:nth-child(1) { top: 14px; }
  .burger i:nth-child(2) { top: 19px; }
  .burger i:nth-child(3) { top: 24px; }
  .nav-offen .burger i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .nav-offen .burger i:nth-child(2) { opacity: 0; }
  .nav-offen .burger i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  .sheet {
    position: fixed; inset: 0; z-index: 60; pointer-events: none;
    /* Erst ausblenden, wenn die letzte Ebene draussen ist. Mit einem
       harten visibility-Wechsel waere die Animation nicht zu sehen. */
    visibility: hidden;
    transition: visibility 0s linear .95s;
  }
  .nav-offen .sheet { pointer-events: auto; visibility: visible; transition-delay: 0s; }

  /* die versetzt einfahrenden Ebenen */
  .sheet-layer {
    position: absolute; top: 0; bottom: 0; right: 0; width: 100%;
    transform: translateX(100%);
    transition: transform var(--dur-s) var(--ease-in-out);
  }
  .sheet-layer--1 { background: var(--accent);   transition-delay: .00s; }
  .sheet-layer--2 { background: var(--accent-2); transition-delay: .07s; }
  .sheet-layer--3 { background: #0B0E16;         transition-delay: .14s; }
  .nav-offen .sheet-layer { transform: translateX(0); }
  /* Beim Schliessen laufen die Ebenen in derselben Reihenfolge
     hinaus, in der sie hereingekommen sind. Nur der Startzeitpunkt
     ist nach hinten geschoben, damit zuerst die Eintraege gehen. */
  .sheet-layer--1 { transition-delay: .18s; }
  .sheet-layer--2 { transition-delay: .25s; }
  .sheet-layer--3 { transition-delay: .32s; }

  .sheet-inner {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 96px 26px 40px;
  }
  .sheet-list { list-style: none; }
  .sheet-list li { overflow: hidden; }
  .sheet-list a {
    display: flex; align-items: flex-start; gap: 10px;
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 1.2rem + 7vw, 3.2rem);
    font-weight: 600; letter-spacing: -.03em; line-height: 1.16;
    color: var(--text); text-decoration: none;
    transform: translateY(115%);
    transition: transform var(--dur-m) var(--ease-out);
  }
  .sheet-list a em {
    font-family: ui-monospace, monospace;
    font-size: .8rem; font-style: normal; font-weight: 500;
    color: var(--accent); margin-top: .5em;
  }
  .nav-offen .sheet-list a { transform: translateY(0); }
  /* Zweizeiliger Eintrag (Individuelle Software): Nummer haengt am Text, nicht am rechten Rand */
  .sheet-list a { display: block; }
  .sheet-list a em { display: inline-block; vertical-align: top; margin-left: 4px; }
  @media (max-height: 600px) { .sheet-inner { padding-top: 84px; padding-bottom: 24px; } .sheet-list a { font-size: 1.8rem; } .sheet-foot { margin-top: 22px; } }

  /* Verzoegerungen fuers HINAUSfahren. Sie stehen ohne .nav-offen
     und greifen deshalb beim Schliessen. Vorher gab es hier keine,
     dadurch fielen alle Eintraege gleichzeitig nach unten. */
  .sheet-list li:nth-child(1) a { transition-delay: .00s; }
  .sheet-list li:nth-child(2) a { transition-delay: .06s; }
  .sheet-list li:nth-child(3) a { transition-delay: .12s; }
  .sheet-list li:nth-child(4) a { transition-delay: .18s; }
  .sheet-list li:nth-child(5) a { transition-delay: .24s; }
  .sheet-list li:nth-child(6) a { transition-delay: .30s; }
  .sheet-list li:nth-child(7) a { transition-delay: .36s; }

  /* Verzoegerungen fuers HEREINfahren */
  .nav-offen .sheet-list li:nth-child(1) a { transition-delay: .26s; }
  .nav-offen .sheet-list li:nth-child(2) a { transition-delay: .32s; }
  .nav-offen .sheet-list li:nth-child(3) a { transition-delay: .38s; }
  .nav-offen .sheet-list li:nth-child(4) a { transition-delay: .44s; }
  .nav-offen .sheet-list li:nth-child(5) a { transition-delay: .50s; }
  .nav-offen .sheet-list li:nth-child(6) a { transition-delay: .56s; }
  .nav-offen .sheet-list li:nth-child(7) a { transition-delay: .62s; }

  .sheet-foot {
    margin-top: 40px; opacity: 0; transform: translateY(14px);
    /* hinaus: gleich zu Beginn, herein: zuletzt */
    transition: opacity var(--dur-s) var(--ease-out) 0s, transform var(--dur-s) var(--ease-out) 0s;
  }
  .nav-offen .sheet-foot { transition-delay: .68s; }
  .nav-offen .sheet-foot { opacity: 1; transform: none; }
  .sheet-foot a {
    display: inline-flex; justify-content: center; width: 100%;
    background: var(--accent); color: #071018;
    padding: 15px 22px; border-radius: 12px;
    font-weight: 600; text-decoration: none;
  }
  .sheet-note { margin-top: 18px; font-size: .8rem; color: var(--text-soft); text-align: center; }

  /* Solange das Menue offen ist, tritt die Leiste zurueck: kein
     Milchglas, kein Rahmen. Sichtbar bleiben Logo und Schliessen. */
  .nav-offen .pill {
    background: transparent; border-color: transparent;
    box-shadow: none; backdrop-filter: none;
  }
  .nav-offen .btn-primary, .nav-offen .btn-soft { display: none; }

  /* Burger bis 1100 px: darueber steht die Menueleiste. Vorher gab es
     zwischen 761 und 1100 px (Tablet) gar keine Navigation. */
  @media (max-width: 1100px) {
    .burger { display: block; }
  }

  /* ---- Kopfleiste bei offenem Menue -------------------------------
     Die Leiste bleibt sichtbar, verliert aber ihren Glaskasten und
     zeigt nur noch Logo und Schliessen. ------------------------- */
  .nav-offen .pill {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  .nav-offen .pill .btn-primary { display: none; }
  .burger-label {
    display: none;
    font-size: .74rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text);
    margin-left: auto; margin-right: 10px;
    white-space: nowrap;
  }
  @media (max-width: 860px) {
    /* Aufbau hochkant: Logo links, Menueknopf rechts. Sonst nichts.
       Der CTA steht im Menue, er braucht in der Leiste keinen Platz
       und verdraengte dort nur das Logo. */
    .pill { justify-content: space-between; gap: 12px; padding: 8px 10px 8px 14px; }
    .brand { width: 84px; height: 24px; flex: 0 0 auto; }
    .burger { margin-left: 0; flex: 0 0 auto; width: 44px; height: 44px; }
    .burger i { left: 13px; right: 13px; }
    .burger i:nth-child(1) { top: 16px; }
    .burger i:nth-child(2) { top: 21px; }
    .burger i:nth-child(3) { top: 26px; }
    .nav-offen .burger i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
    .nav-offen .burger i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
    /* Beschriftung entfaellt: das Symbol sagt bereits dasselbe. */
    .burger-label { display: none; }
    .pill .btn-primary { display: none; }

    /* Die Leiste faehrt sonst erst nach dem Hero-Morph ein. Auf dem
       Telefon muss der Menuezugang aber von Anfang an da sein,
       sonst gibt es sechs Bildschirme lang keine Navigation. */
    .pill { opacity: 1; transform: none; }
  }

  /* Hochkant gilt dieselbe Dramaturgie wie quer: Leiste und Logo
     bauen sich erst auf, wenn die Partikelmarke oben ankommt.
     Sichtbar ist vorher nur der Menueknopf, denn ohne ihn gaebe es
     sechs Bildschirme lang keinen Zugang zur Navigation. */
  @media (max-width: 860px) {
    /* Der Container bleibt sichtbar, aber ohne jede Huelle. */
    .pill {
      opacity: 1 !important; transform: none !important;
      background: transparent; border-color: transparent;
      box-shadow: none; backdrop-filter: none;
      transition: background .5s ease, border-color .5s ease, box-shadow .5s ease;
    }
    /* Die Huelle erscheint zusammen mit dem Logo. */
    .topbar.ready .pill {
      background: rgba(18,22,32,.72);
      border-color: rgba(255,255,255,.09);
      box-shadow: 0 18px 46px rgba(0,0,0,.42);
      backdrop-filter: blur(16px) saturate(1.3);
    }
    /* Solange die Leiste fehlt, traegt der Knopf seine eigene
       Huelle, damit er ueber den Partikeln lesbar bleibt. */
    .burger {
      background: rgba(14,18,26,.72);
      backdrop-filter: blur(10px);
      transition: background .5s ease, backdrop-filter .5s ease;
    }
    .topbar.ready .burger { background: rgba(255,255,255,.05); backdrop-filter: none; }
    .brand { min-width: 84px; }
  }

  /* ============================================================
     Voro-Ankuendigung
     ------------------------------------------------------------
     Bewusster Farbbruch: Die Sektion laeuft in Voros eigener
     Akzentfarbe Teal #14B8A6 (festgelegt in voro/core.md), nicht
     im Mityvo-Blau. Sie soll sich als eigenes Produkt abheben.
     Die Geraete fahren gestaffelt herein und driften beim
     Weiterscrollen unterschiedlich schnell.
     ============================================================ */
  .voro { --vo: #14B8A6; --vo-soft: rgba(20,184,166,.16);
          position: relative; height: 300vh; background: #06110F; }
  .voro-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .voro-glow {
    position: absolute; left: 50%; top: 42%;
    width: 130%; height: 130%; transform: translate(-50%,-50%);
    background: radial-gradient(ellipse at center, rgba(20,184,166,.20), rgba(20,184,166,.05) 42%, transparent 70%);
    pointer-events: none;
  }
  .voro-inner {
    position: relative; height: 100vh;
    width: min(1320px, 92vw); margin: 0 auto;
    display: grid; grid-template-columns: 46% 54%; align-items: center; gap: 40px;
  }

  .voro-badge {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--vo); border: 1px solid rgba(20,184,166,.35);
    background: rgba(20,184,166,.10);
    padding: 7px 14px; border-radius: 999px; margin-bottom: 26px;
  }
  .voro-badge b { width: 6px; height: 6px; border-radius: 50%; background: var(--vo); }

  /* Das Icon ist quadratisch mit eigenem dunklen Grund. Klein
     skaliert war es unlesbar, deshalb wird es bewusst als
     App-Symbol gezeigt, mit Radius und Schatten, daneben der
     Produktname. Ohne ihn stand nirgends, wie die App heisst. */
  .voro-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
  .voro-icon {
    width: 76px; height: 76px; border-radius: 19px; display: block;
    box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07);
  }
  .voro-name { display: flex; flex-direction: column; line-height: 1.15; }
  .voro-name strong {
    font-family: var(--font-display); font-size: 2.1rem;
    font-weight: 600; letter-spacing: -.02em; color: var(--text);
  }
  .voro-name span { font-size: .82rem; color: var(--text-soft); letter-spacing: .04em; }
  .voro h2 {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 1.2rem + 3vw, 3.6rem);
    font-weight: 600; letter-spacing: -.03em; line-height: 1.04;
  }
  .voro h2 em { font-style: normal; color: var(--vo); }
  .voro-sub { margin-top: 18px; color: var(--text-soft); font-size: 1.08rem; line-height: 1.6; max-width: 46ch; }

  .voro-list { list-style: none; margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
  .voro-list li { display: flex; align-items: center; gap: 9px; font-size: .95rem; color: var(--text); }
  .voro-list i {
    width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto;
    background: rgba(20,184,166,.16);
    position: relative;
  }
  .voro-list i::after {
    content: ""; position: absolute; left: 5px; top: 5px;
    width: 6px; height: 3px; border-left: 1.6px solid var(--vo); border-bottom: 1.6px solid var(--vo);
    transform: rotate(-45deg);
  }

  .voro-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
  .voro-cta a {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--vo); color: #04120F;
    padding: 14px 24px; border-radius: 12px;
    font-weight: 600; text-decoration: none;
  }
  .voro-hint { font-size: .84rem; color: var(--text-soft); }

  /* --- Geraete --- */
  .voro-stage { position: relative; height: 100vh; }
  .vph {
    position: absolute; top: 50%; left: 50%;
    width: 268px; margin-top: -290px;
    border-radius: 42px; padding: 9px;
    background: linear-gradient(145deg, #6c7484 0%, #2c313d 26%, #9aa3b4 48%, #23283292 62%, #5d6574 100%);
    box-shadow: 0 40px 90px rgba(0,0,0,.75), inset 0 1px 2px rgba(255,255,255,.3);
    will-change: transform, opacity;
  }
  .vph img { display: block; width: 100%; border-radius: 34px; }
  .vph--a { z-index: 3; }
  .vph--b { z-index: 2; }
  .vph--c { z-index: 1; }

  @media (max-width: 900px) {
    /* Hochkant passen Text und drei Geraete weder nebeneinander
       noch untereinander in einen Bildschirm. Sie liegen deshalb
       UEBEREINANDER und loesen sich beim Scrollen ab: erst der
       Text, dann die Geraete gross auf voller Flaeche. */
    /* 460vh bedeuteten rund 1280 px Leerlauf, bevor ueberhaupt
       etwas passierte: drei Wischer nur fuer den Wechsel. */
    .voro { height: 250vh; }
    .voro-inner { display: block; height: 100vh; position: relative; padding: 0; }
    .voro-copy {
      position: absolute; left: 0; right: 0; top: 50%;
      transform: translateY(-50%);
      will-change: transform, opacity;
    }
    /* Hochkant wird der Block zentriert, wie der Hero darueber.
       Linksbuendig fiel er aus dem Rhythmus der Seite. */
    .voro-copy { text-align: center; padding: 0 20px; }
    .voro-badge { margin-bottom: 16px; }
    .voro-brand { gap: 12px; margin-bottom: 18px; justify-content: center; }
    .voro-name { align-items: flex-start; text-align: left; }
    .voro-sub { margin-left: auto; margin-right: auto; }
    /* Die Haken bleiben linksbuendig, der Block als Ganzes sitzt
       mittig. Zentrierte Listenpunkte waeren unruhig. */
    .voro-list { width: fit-content; margin-left: auto; margin-right: auto; text-align: left; }
    .voro-cta { flex-direction: column; align-items: stretch; gap: 12px; }
    .voro-cta a { justify-content: center; }
    .voro-hint { text-align: center; }
    .voro-icon { width: 58px; height: 58px; border-radius: 15px; }
    .voro-name strong { font-size: 1.6rem; }
    .voro-sub { font-size: .96rem; margin-top: 14px; }
    .voro-list { grid-template-columns: 1fr 1fr; gap: 7px 14px; margin-top: 18px; }
    .voro-list li { font-size: .86rem; }
    .voro-cta { margin-top: 22px; }
    .voro-cta a { padding: 13px 20px; }

    .voro-stage { position: absolute; inset: 0; height: 100vh; }
    .vph { width: 208px; margin-top: -226px; border-radius: 34px; padding: 7px; }
    .vph img { border-radius: 28px; }
  }
  

  /* ============================================================
     Kontakt und Fusszeile
     Inhalte 1:1 aus index.html. Der Live-Stand fuehrt einen
     vierstufigen Fragebogen; hier stehen die drei Wege aus
     Schritt 1 und die Felder aus Schritt 4 auf einer Ebene.
     Das Formular sendet bewusst NICHTS, es ist reine Gestaltung.
     ============================================================ */
  .kontakt { background: var(--bg); padding: 120px 0 90px; border-top: 1px solid rgba(255,255,255,.06); }
  .kontakt-inner { width: min(1180px, 92vw); margin: 0 auto; }

  /* Band um die gesamte Sektion. Werte uebernommen aus
     css/site.css (.cta-band): Verlauf --grad-soft, Rahmen in
     22 % Accent, dazu die beiden radialen Lichter. Ohne dieses
     Band stand der Assistent vorher auf flachem Schwarz. */
  .kontakt-band {
    position: relative; overflow: hidden;
    border-radius: 24px;
    padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 48px);
    background: linear-gradient(120deg, rgba(129,140,248,.14), rgba(79,156,249,.14) 50%, rgba(103,232,249,.14));
    border: 1px solid rgba(79,156,249,.22);
  }
  .kontakt-band::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(70% 60% at 50% -10%, rgba(79,156,249,.30), transparent 60%),
      radial-gradient(60% 60% at 100% 110%, rgba(103,232,249,.18), transparent 60%);
  }
  .kontakt-band > * { position: relative; }

  .kontakt-kopf { text-align: center; margin-bottom: 36px; }
  .kontakt-kopf span {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-soft);
  }
  .kontakt-kopf span b { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
  .kontakt-kopf h2 {
    font-family: var(--font-display); font-weight: 600; letter-spacing: -.025em;
    font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem); margin-top: 14px;
  }
  .kontakt-kopf p { color: var(--text-soft); margin-top: 12px; }

  .wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 30px; }
  .weg {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: rgba(22,24,32,.6); border: 1px solid rgba(255,255,255,.09);
    border-radius: 15px; padding: 20px 20px 22px; color: var(--text);
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
  }
  .weg:hover { border-color: rgba(79,156,249,.5); transform: translateY(-2px); }
  .weg[aria-pressed="true"] { border-color: var(--accent); background: rgba(79,156,249,.10); }
  .weg em { font-style: normal; font-size: 1.3rem; display: block; margin-bottom: 10px; }
  .weg strong { display: block; font-size: 1rem; font-weight: 600; margin-bottom: 5px; }
  .weg small { color: var(--text-soft); font-size: .86rem; line-height: 1.45; display: block; }

  .feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .feld { display: block; margin-bottom: 14px; }
  .feld span { display: block; font-size: .84rem; color: var(--text-soft); margin-bottom: 7px; }
  .feld input, .feld textarea {
    width: 100%; font: inherit; font-size: .98rem; color: var(--text);
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px; padding: 14px 16px;
    transition: border-color .2s ease, background .2s ease;
  }
  .feld textarea { min-height: 110px; resize: vertical; }
  .feld input:focus, .feld textarea:focus {
    outline: none; border-color: var(--accent); background: rgba(79,156,249,.06);
  }
  .kontakt-fuss { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
  .kontakt-senden {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--accent); color: #071018; border: none;
    padding: 15px 26px; border-radius: 12px; font: inherit; font-weight: 600; cursor: pointer;
  }
  .kontakt-hinweis { font-size: .86rem; color: var(--text-soft); }
  .kontakt-hinweis a { color: var(--accent); text-decoration: none; }

  /* ---- Fusszeile ---- */
  /* Werte 1:1 aus css/base.css (.site-footer), auf mityvo.de gemessen:
     Rand 40 px, Container 1200 px mit 24 px Innenabstand, Logo 50 px hoch,
     Links 14 px mit 24 px Abstand und 44 px Klickhoehe, Copyright rechts. */
  .fuss { position: relative; z-index: 1; border-top: 1px solid var(--glass-border); padding-block: 40px;
    background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .fuss-inner {
    max-width: 1200px; margin: 0 auto; padding-inline: 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  }
  .fuss img { height: 50px; width: auto; display: block; }
  .fuss nav { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
  .fuss nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 2px;
    color: var(--text-soft); text-decoration: none; font-size: 14px; transition: color .2s ease; }
  .fuss nav a:hover { color: var(--accent); }
  .fuss-copy { color: var(--text-soft); font-size: 14px; line-height: 1.65; text-align: right; }

  @media (max-width: 860px) {
    .kontakt { padding: 80px 0 64px; }
    .wege { grid-template-columns: 1fr; }
    .feld-paar { grid-template-columns: 1fr; gap: 0; }
    .kontakt-fuss { flex-direction: column-reverse; align-items: stretch; }
    .kontakt-senden { justify-content: center; }
    .kontakt-hinweis { text-align: center; }
    .fuss-inner { flex-direction: column; text-align: center; padding-inline: 16px; }
    .fuss nav a, .fuss-copy { font-size: 12.8px; }
    .fuss-copy { text-align: center; }
  }

  /* ---- Kontakt-Assistent, Ablauf wie auf der Live-Seite ---- */
  .assistent {
    width: min(760px, 100%); margin: 0 auto;
    background: rgba(12,14,20,.55); border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px; padding: 30px 30px 26px; position: relative; overflow: hidden;
    backdrop-filter: blur(10px);
  }
  .fortschritt { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.08); }
  .fortschritt i { display: block; height: 100%; width: 0; background: var(--accent); transition: width var(--dur-s) var(--ease-in-out); }
  .schritt { display: none; }
  .schritt.ist-aktiv { display: block; }
  .schritt-label { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); }
  .schritt h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin: 10px 0 22px; }

  .optionen { display: grid; gap: 11px; }
  .opt {
    display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; cursor: pointer;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
    border-radius: 13px; padding: 16px 18px; color: var(--text); font: inherit;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .opt:hover { border-color: rgba(79,156,249,.55); background: rgba(79,156,249,.07); transform: translateX(3px); }
  .opt.gewaehlt { border-color: var(--accent); background: rgba(79,156,249,.12); }
  .opt em { font-style: normal; font-size: 1.35rem; flex: 0 0 auto; }
  .opt strong { display: block; font-size: .98rem; font-weight: 600; }
  .opt small { display: block; color: var(--text-soft); font-size: .85rem; margin-top: 3px; }

  .assistent-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
  .assistent-nav button { font: inherit; font-weight: 600; border-radius: 11px; padding: 12px 20px; cursor: pointer; }
  .nav-zurueck { background: transparent; border: 1px solid rgba(255,255,255,.18); color: var(--text); }
  .nav-weiter { background: var(--accent); border: none; color: #071018; margin-left: auto; }
  .nav-weiter:disabled { opacity: .5; cursor: default; }

  .erfolg { text-align: center; padding: 14px 0 6px; }
  .erfolg-haken { display: block; width: 64px; height: 64px; margin: 0 auto 18px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .eh-kreis { stroke: var(--accent); stroke-width: 2.5; fill: rgba(79,156,249,.12); stroke-dasharray: 183; stroke-dashoffset: 183; transform: rotate(-90deg); transform-origin: 50% 50%; }
  .eh-haken { stroke: var(--accent); stroke-width: 3.5; stroke-dasharray: 40; stroke-dashoffset: 40; }
  .schritt.ist-aktiv .eh-kreis { animation: ehZeichnen .9s var(--ease-in-out) .1s forwards; }
  .schritt.ist-aktiv .eh-haken { animation: ehZeichnen .5s var(--ease-out) .85s forwards; }
  @keyframes ehZeichnen { to { stroke-dashoffset: 0; } }
  .erfolg p { color: var(--text-soft); margin-top: 10px; }
  .kontakt-hinweis { text-align: center; margin-top: 20px; font-size: .88rem; color: var(--text-soft); }
  .kontakt-hinweis a { color: var(--accent); text-decoration: none; }

  @media (max-width: 860px) {
    .assistent { padding: 26px 20px 22px; border-radius: 16px; }
    .schritt h3 { font-size: 1.25rem; }
    .opt { padding: 14px 15px; gap: 11px; }
  }

  /* ============================================================
     Live-Sektionen (Dashboard, individuelle Software, Zahlen, FAQ)
     Regeln automatisch 1:1 aus css/base.css und css/site.css
     uebernommen und unter .live gekapselt. Grund: Klassen wie
     .btn-primary, .steps, .phone-frame haben im Prototyp eine
     andere Bedeutung und duerfen nicht kollidieren.
     ============================================================ */
  .live {
    --surface: #161618; --border: #232327; --soft-cyan: #67E8F9;
    --glass-bg: rgba(22,22,24,.58); --glass-border: rgba(255,255,255,.08);
    --grad: linear-gradient(115deg, #4F9CF9 0%, #67E8F9 100%);
    --grad-vivid: linear-gradient(120deg, #818CF8 0%, #4F9CF9 48%, #67E8F9 100%);
    --grad-soft: linear-gradient(120deg, rgba(129,140,248,.14), rgba(79,156,249,.14) 50%, rgba(103,232,249,.14));
    --glow-strong: rgba(79,156,249,.30); --glow-soft: rgba(79,156,249,.13);
    --glow-cyan: rgba(103,232,249,.18); --glow-indigo: rgba(129,140,248,.16);
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px;
    --container-w: 1200px;
    --section-pad: 120px;
    --fs-h2: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
    --fs-h3: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
    --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --fs-small: clamp(0.8rem, 0.76rem + 0.15vw, 0.875rem);
    --fs-btn: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
    position: relative; z-index: 1;
    padding-block: var(--section-pad);
    background: var(--bg);
    font-size: var(--fs-body); line-height: 1.6;
  }
  .live p { margin: 0; }
  /* globale Grundregeln aus base.css, die sonst fehlen */
  .live a { color: inherit; text-decoration: none; }
  .live button { font-family: inherit; cursor: pointer; }
  /* Die Hero-Eyebrow des Prototyps hat Rahmen und Hintergrund.
     Live ist die Eyebrow nur Text, diese Werte muessen weg. */
  .live .eyebrow {
    border: 0; background: none; padding: 0; border-radius: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  @media (max-width: 1024px) { .live { --section-pad: 96px; } }
  @media (max-width: 768px)  { .live { --section-pad: 64px; } }

  .live .container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: 24px;
}
  .live .section-header {
  max-width: 680px;
  margin: 0 auto clamp(40px, 6vw, 64px);
  text-align: center;
}
  .live .section-header h2 {
  margin: 0 0 16px;
}
  .live .section-header p, .live .section-sub {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--fs-body);
}
  .live h1, .live h2, .live h3, .live h4 {
  margin: 0;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
}
  .live h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
  .live h2 {
  font-family: var(--font-body);
  font-size: var(--fs-h2);
  letter-spacing: -0.015em;
}
  .live h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
}
  .live h4 {
  font-family: var(--font-body);
  font-size: var(--fs-card-title);
}
  .live .btn-primary, .live .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;                  
  padding: 13px 26px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  
  transition: transform 0.2s ease, box-shadow 0.2s ease,
              background-color 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, filter 0.2s ease;
  white-space: nowrap;
}
  .live .btn-primary {
  background-color: var(--accent);
  color: #08111F;                    
  box-shadow: 0 6px 24px -8px var(--glow-strong);
}
  .live .btn-ghost {
  background-color: transparent;
  color: var(--text);
  border-color: var(--glass-border);
  backdrop-filter: blur(6px);
}
  @media (hover: hover) {
  .live .btn-primary:hover, .live .btn-ghost:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px var(--glow-strong);
  }
  .live .btn-primary:hover {
    filter: brightness(1.06);        
  }
  .live .btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
}
  .live .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
  .live .chip-row--center {                  
  justify-content: center;
}
  .live .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.2s ease, color 0.2s ease;
}
  @media (hover: hover) {
  .live .chip:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    color: var(--text);
  }
}
  .live .eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
  .live .faq-list {
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
  .live .faq-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
  .live .faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  background: transparent;
  border: none;
  text-align: left;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-card-title);
  font-weight: 600;
  line-height: 1.4;
}
  .live .faq-icon {
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent);
  transition: transform 0.3s ease;
}
  .live .faq-item.is-open .faq-icon {
  transform: rotate(45deg);          
}
  .live .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
  .live .faq-answer-inner {
  padding: 0 22px 22px;
  color: var(--text-soft);
}
  .live .faq-answer-inner p { margin: 0 0 0.8em; }
  .live .faq-answer-inner p:last-child { margin-bottom: 0; }
  .live .faq-answer a { color: var(--accent); }
  .live .faq-hours { font-size: var(--fs-small); }
  @media (max-width: 768px) {
  .live .container { padding-inline: 20px; }
  .live .chip-row { justify-content: center; }
  .live .individual-text { text-align: center; }
}
  @media (max-width: 400px) {
  .live .container { padding-inline: 16px; }
  .live .btn-primary, .live .btn-ghost { width: 100%; }
}
  .live .pill-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 12px; border-radius: 999px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: var(--fs-small); font-weight: 600; color: var(--text);
}
  .live .pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: pulseDot 2.4s ease-in-out infinite; }
  .live .pill-badge--live .pill-dot { background: #22C55E; box-shadow: 0 0 10px #22C55E; }
  @keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:.35} }
  .live .section-header .eyebrow { display: inline-block; margin-bottom: 14px; }
  .live .kicker { display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
  .live .kicker::before { content: ""; width: 34px; height: 2px; border-radius: 2px; background: var(--grad); box-shadow: 0 0 10px var(--glow-strong); }
  .live .btn-primary .btn-arrow { transition: transform 0.2s ease; }
  @media (hover: hover) {
  .live .btn-primary:hover .btn-arrow { transform: translateX(4px); }
}
  .live .featured-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
  .live .featured-text .pill-badge { margin-bottom: 18px; }
  .live .featured-text h2 { margin: 0 0 16px; }
  .live .featured-text > p { color: var(--text-soft); max-width: 460px; margin-bottom: 22px; }
  .live .featured-chips { margin-bottom: 26px; }
  .live .featured-device { display: flex; justify-content: center; }
  .live .dash-frame { --da: #F59E0B; width: 460px; max-width: 100%; border-radius: 16px; overflow: hidden; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: 0 40px 90px -30px rgba(245,158,11,0.28), 0 10px 40px -20px var(--glow-cyan); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .live .dash-top { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--border); }
  .live .dash-crumb { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text); }
  .live .dash-user { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-soft); }
  .live .dash-bell { width: 20px; height: 20px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--da) 50%, transparent); animation: dashBell 3.2s ease-in-out infinite; }
  @keyframes dashBell { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--da) 50%, transparent); } 50% { box-shadow: 0 0 10px 1px color-mix(in srgb, var(--da) 45%, transparent); } }
  .live .dash-cols { display: grid; grid-template-columns: 116px 1fr; }
  .live .dash-nav { display: flex; flex-direction: column; gap: 3px; padding: 12px 8px; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 45%, transparent); }
  .live .dash-navi { padding: 7px 9px; border-radius: 8px; font-size: 11px; font-weight: 600; color: var(--text-soft); }
  .live .dash-navi.is-active { color: var(--da); background: color-mix(in srgb, var(--da) 15%, transparent); box-shadow: inset 2px 0 0 var(--da); }
  .live .dash-main { padding: 12px 14px; }
  .live .dash-greet { margin-bottom: 12px; }
  .live .dash-greet span { display: block; font-size: 10px; letter-spacing: .04em; color: var(--text-soft); }
  .live .dash-greet b { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--text); }
  .live .dash-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .live .dash-c { position: relative; padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid var(--glass-border); border-left: 2px solid color-mix(in srgb, var(--da) 75%, transparent); }
  .live .dash-c-l { display: block; font-size: 10px; color: var(--text-soft); margin-bottom: 5px; }
  .live .dash-c-v { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text); }
  .live .dash-c::after { content: ""; position: absolute; inset: 0; border-radius: 10px; box-shadow: 0 0 20px -4px var(--da); opacity: 0; animation: dashCardGlow 5.2s ease-in-out infinite; animation-delay: calc(var(--k) * .5s); }
  @keyframes dashCardGlow { 0%,6% { opacity: 0; } 12%,18% { opacity: .85; } 26%,100% { opacity: 0; } }
  .live .individual-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
  .live .individual-text h2 { margin: 0 0 18px; }
  .live .individual-text > p { color: var(--text-soft); margin-bottom: 22px; }
  .live .individual-text .chip-row { margin-bottom: 26px; }
  .live .code-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 30px 70px -34px var(--glow-strong); }
  .live .code-window-header { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--glass-border); }
  .live .code-window-label { font-size: var(--fs-small); color: var(--text-soft); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
  .live .code-window-dots { display: flex; gap: 7px; }
  .live .code-window-dots span { width: 11px; height: 11px; border-radius: 50%; }
  .live .dot-red { background: #F87171; }
  .live .dot-yellow { background: #F59E0B; }
  .live .dot-green { background: #22C55E; }
  .live .code-block { padding: 18px 18px 22px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .9rem; line-height: 1.7; overflow-x: auto; }
  .live .code-line { white-space: pre; }
  .live .code-line .ln { display: inline-block; width: 26px; color: var(--text-soft); opacity: .5; user-select: none; }
  .live .code-block .kw { color: #818CF8; }
  .live .code-block .var { color: var(--accent); }
  .live .code-block .prop { color: var(--soft-cyan); }
  .live .code-block .str, .live .code-block .val { color: #22C55E; }
  .live .code-block .num { color: #67E8F9; }
  .live .code-block .op { color: var(--text-soft); }
  .live .code-block .cursor { color: var(--accent); animation: caret 1.1s step-end infinite; }
  @keyframes caret { 50% { opacity: 0; } }
  .live .code-window-footer { padding: 14px 18px; border-top: 1px solid var(--glass-border); font-size: var(--fs-small); color: var(--text-soft); }
  .live .stats-band { position: relative; border-radius: var(--radius-xl); overflow: hidden; padding: clamp(32px, 5vw, 52px) clamp(20px, 4vw, 48px); background: var(--grad-soft); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
  .live .stats-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 60% at 0% 0%, var(--glow-indigo), transparent 60%), radial-gradient(60% 60% at 100% 100%, var(--glow-cyan), transparent 60%); }
  .live .stats-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
  .live .stat-cell { display: flex; flex-direction: column; gap: 6px; }
  .live .stat-num { font-family: var(--font-display); font-weight: 700; line-height: 1; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); background: var(--grad-vivid); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .live .stat-lbl { font-size: var(--fs-small); color: var(--text-soft); }
  @media (max-width: 1024px) {
  .live .stats-grid { gap: 28px 20px; }
}
  @media (max-width: 900px) {
  .live .featured-inner, .live .individual-split { grid-template-columns: 1fr; gap: 40px; }
  .live .featured-device { order: -1; }
  .live .featured-text { text-align: center; }
  .live .featured-text > p { margin-inline: auto; }
  .live .dash-frame { width: 100%; }
  .live .individual-text { text-align: center; }
  .live .individual-text .chip-row { justify-content: center; }
}
  @media (max-width: 480px) {
  .live .stats-grid { gap: 22px 16px; }
  .live .dash-cols { grid-template-columns: 1fr; }
  .live .dash-nav { display: none; }
}
  @media (prefers-reduced-motion: reduce) {
  .live .pill-dot, .live .code-block .cursor { animation: none !important; }
  .live .dash-bell, .live .dash-c::after { animation: none !important; }
}

  /* ---- Produktsequenz, Schritt 5: Baukasten ----
     Die vier Produkte gedimmt, daneben hervorgehoben die eigene
     App. Die Kachel waechst ueber --grow mit dem Scrollen herein. */
  /* ============================================================
     Produktkarten: Buehnen 760 x 500, per Skript eingepasst.
     .gx-Elemente bauen sich mit --grow (Scroll) nacheinander auf,
     --a ist der Startpunkt je Element.
     ============================================================ */
  .media-in:has(.mb-box) { display: flex; flex-direction: column; }
  .mb-box { position: relative; flex: 1; min-height: 0; }
  .mb-stage {
    position: absolute; left: 50%; top: 50%; width: 760px; height: 500px;
    transform: translate(-50%, -50%) scale(var(--s, 1));
    font-family: var(--font-body); color: #ECEEF2;
  }
  .gx {
    --gv: clamp(0, (var(--grow) - var(--a, 0)) * 7, 1);
    opacity: var(--gv);
    transform: translateY(calc((1 - var(--gv)) * 16px));
  }

  /* ---------- gemeinsame Teile: echte Screenshots ---------- */
  .rs-badge {
    position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; border-radius: 16px;
    background: rgba(20,26,40,.84); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(10px);
    box-shadow: 0 24px 50px rgba(0,0,0,.5); font-size: 15px; white-space: nowrap;
  }
  .rs-badge i { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--pc) 18%, transparent); }
  .rs-badge svg { width: 19px; height: 19px; fill: none; stroke: var(--pc); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
  .mb-stage figure { margin: 0; }
  .mb-stage img { display: block; }

  /* ---------- Chat: Live-Demo von chat.mityvo.de ---------- */
  .ch-b1 { left: 490px; top: 130px; }
  .ch-b2 { left: 470px; top: 290px; }


  /* ---------- Chat: Demo-Widget, Gespraech als Animation ---------- */
  .dc { position: absolute; left: 90px; top: 10px; width: 372px; height: 480px; display: flex; flex-direction: column;
    border-radius: 20px; overflow: hidden; background: #111419; border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 30px 90px -30px rgba(79,156,249,.6);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif; color: #ECEEF2;
    transform: translateY(calc((1 - clamp(0, var(--grow) * 3, 1)) * 30px)); }
  .dc-kopf { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .dc-ava { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #4F9CF9; color: #08111F; font-weight: 700; font-size: 15px; }
  .dc-meta b { display: block; font-size: 14px; font-weight: 600; }
  .dc-meta small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #4ADE80; }
  .dc-meta small i { width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; }
  .dc-live { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; padding: 4px 9px; border-radius: 999px;
    color: #F87171; border: 1px solid rgba(248,113,113,.55); animation: dcLive 2s ease-in-out infinite; }
  @keyframes dcLive { 50% { border-color: rgba(248,113,113,.2); } }
  .dc-body { flex: 1; min-height: 0; overflow: hidden; padding: 14px; }
  /* Verlauf beginnt oben wie im echten Widget und rueckt nach oben, sobald er voll ist */
  .dc-verlauf { display: flex; flex-direction: column; gap: 10px; transition: transform .5s var(--ease-out); }
  .dc-msg { max-width: 84%; padding: 11px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.45;
    animation: dcRein .45s var(--ease-out) both; }
  .dc-msg.bot { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-bottom-left-radius: 4px; }
  .dc-msg.user { align-self: flex-end; background: #4F9CF9; color: #08111F; font-weight: 500; border-bottom-right-radius: 4px; }
  .dc-tipp { display: inline-flex; gap: 4px; align-self: flex-start; padding: 13px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); animation: dcRein .3s var(--ease-out) both; }
  .dc-tipp i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.7); animation: blip 1.1s infinite; }
  .dc-tipp i:nth-child(2) { animation-delay: .18s; } .dc-tipp i:nth-child(3) { animation-delay: .36s; }
  @keyframes dcRein { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
  .dc-eingabe { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(255,255,255,.08); }
  .dc-feld { flex: 1; display: flex; align-items: center; padding: 0 12px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); font-size: 13px; white-space: nowrap; overflow: hidden; }
  .dc-feld em { font-style: normal; color: #6b7488; }
  .dc-cursor { display: none; width: 1.5px; height: 16px; margin-left: 1px; background: #4F9CF9; animation: dcBlink 1s steps(1) infinite; }
  .dc.tippt .dc-cursor { display: inline-block; } .dc.tippt .dc-feld em { display: none; }
  @keyframes dcBlink { 50% { opacity: 0; } }
  .dc-senden { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #4F9CF9; transition: transform .2s var(--ease-out); }
  .dc-senden.klick { transform: scale(.86); }
  .dc-senden svg { width: 17px; height: 17px; fill: #08111F; stroke: #08111F; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* ---------- Canvas: echtes Vorher/Nachher von canvas.mityvo.de ---------- */
  .cv-vergleich { position: absolute; left: 150px; top: 10px; width: 480px; height: 480px; border-radius: 22px; overflow: hidden;
    --cv: clamp(0, (var(--grow) - .04) * 1.7, 1);
    --split: calc(100% - var(--cv) * 100%);
    box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 30px 90px -30px rgba(168,85,247,.6); border: 1px solid rgba(255,255,255,.12); }
  .cv-vergleich img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cv-nach { clip-path: inset(0 0 0 var(--split)); }
  /* Regler faehrt ganz durch, am Ende steht das Nachher-Bild allein */
  .cv-griff { position: absolute; top: 0; bottom: 0; left: var(--split); width: 3px; margin-left: -1.5px; background: #A855F7;
    opacity: clamp(0, (1 - var(--cv)) * 8, 1) ; }
  .cv-griff svg { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; padding: 10px; border-radius: 50%;
    background: #A855F7; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
  .cv-tag { position: absolute; top: 14px; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(6px); }
  .cv-tag-l { left: 14px; opacity: clamp(0, (1 - var(--cv)) * 4 - 1, 1); }
  .cv-tag-r { right: 14px; opacity: clamp(0, var(--cv) * 4 - .4, 1); }
  .cv-b1 { left: 20px; top: 330px; }
  .cv-b2 { left: 560px; top: 90px; }

  /* ---------- Dashboard: echte Demo von dashboard.mityvo.de ---------- */
  .dk-win { position: absolute; left: 10px; top: 20px; width: 740px; transform: translateY(calc((1 - clamp(0, var(--grow) * 3, 1)) * 24px)); border-radius: 16px; overflow: hidden; background: #0e1119;
    border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 30px 90px -30px rgba(245,158,11,.45); }
  .dk-chrome { display: flex; align-items: center; gap: 14px; height: 34px; padding: 0 14px; background: #151924; border-bottom: 1px solid rgba(255,255,255,.07); }
  .dk-url { flex: 1; max-width: 260px; margin: 0 auto; text-align: center; font-size: 11.5px; color: #A8B2C8; background: rgba(0,0,0,.35); border-radius: 7px; padding: 5px 12px; }
  .dk-bild { overflow: hidden; }
  .dk-bild img { width: 100%; height: auto; }

  /* ---------- Links: echtes Profil links.mityvo.de/mityvo ---------- */
  .lk-phone { position: absolute; left: 270px; top: 0; width: 217px; height: 500px; padding: 8px; border-radius: 44px;
    background: linear-gradient(145deg, #6c7484 0%, #2c313d 26%, #9aa3b4 48%, #2c313d 64%, #5d6574 100%);
    box-shadow: 0 40px 90px rgba(0,0,0,.65), 0 30px 90px -30px rgba(244,114,182,.6), inset 0 1px 1px rgba(255,255,255,.35); }
  /* oben Platz fuer die Insel, der Screenshot hat keine Statusleiste */
  .lk-screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #201623; }
  /* Profil bis unter den letzten Produkt-Button, oben um 50 px in der
     Kartenfarbe verlaengert (Platz fuer die Insel). Seitenverhaeltnis
     passt zum Bildschirm, daher steht alles vollstaendig drin. */
  .lk-scroll { height: 100%; overflow: hidden; }
  .lk-scroll img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
  .lk-url { position: absolute; left: 0; top: 110px; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 14px;
    background: rgba(22,18,30,.9); border: 1px solid rgba(244,114,182,.35); box-shadow: 0 24px 50px rgba(0,0,0,.5); font-size: 15px; font-weight: 600; white-space: nowrap; }
  .lk-url svg { width: 18px; height: 18px; fill: none; stroke: #F472B6; stroke-width: 2; stroke-linecap: round; }
  .lk-b1 { left: 540px; top: 150px; }
  .lk-b2 { left: 560px; top: 300px; }

  

  /* ---- Eigene App: Web, iOS, Android. Buehne fest 760 x 500,
     per Skript in die Flaeche eingepasst. ---- */
  .media-in:has(.m-apps) { display: flex; flex-direction: column; gap: 18px; }
  .m-apps { position: relative; flex: 1; min-height: 0; }
  .ma-buehne {
    position: absolute; left: 50%; top: 50%; width: 760px; height: 500px;
    transform: translate(-50%, -50%) scale(var(--s, 1));
    font-family: var(--font-body); color: #ECEEF2;
  }
  .ma-geraet { position: absolute; transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out), filter .7s var(--ease-out); }
  .ma-geraet.ist-an { transform: translateY(-8px); }
  .ma-geraet:not(.ist-an) { filter: saturate(.75) brightness(.86); }

  /* Tablet im Querformat: Aluminiumgehaeuse, schwarzer Rand, Kamera
     an der langen Kante. Darin laeuft die Web-App im Browser. */
  .ma-web { left: 0; top: 44px; width: 500px; height: 356px; z-index: 1;
    padding: 5px; border-radius: 30px;
    background: linear-gradient(150deg, #8d95a4 0%, #3b414d 22%, #5b6270 50%, #2d323c 78%, #767e8c 100%);
    box-shadow: 0 40px 80px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.4); }
  .ma-web.ist-an { box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 20px 70px -10px rgba(79,156,249,.6), inset 0 1px 1px rgba(255,255,255,.4); }
  .ma-tscreen { position: relative; height: 100%; border-radius: 25px; overflow: hidden; background: #0d111b; border: 11px solid #050609; }
  .ma-tkam { position: absolute; top: 10px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #1b2130; z-index: 2; }
  .ma-chrome { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 30px; padding: 0 12px; background: #121724; border-bottom: 1px solid rgba(255,255,255,.07); }
  .ma-tzeit { display: inline-flex; gap: 6px; font-size: 9.5px; color: #ECEEF2; white-space: nowrap; }
  .ma-tzeit b { font-weight: 600; }
  .ma-tbat { width: 18px; height: 9px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); position: relative; }
  .ma-tbat i { position: absolute; inset: 2px; width: 70%; border-radius: 1px; background: #ECEEF2; }
  .ma-url { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: #A8B2C8; background: rgba(255,255,255,.07); border-radius: 7px; padding: 4px 12px; }
  .ma-url svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2.2; }
  .ma-webin { display: grid; grid-template-columns: 118px 1fr; height: calc(100% - 30px); }
  .ma-webin aside { display: flex; flex-direction: column; gap: 3px; padding: 14px 10px; border-right: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); }
  .ma-logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 13px; margin: 0 4px 12px; }
  .ma-logo i { width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(135deg, #67E8F9, #4F9CF9); }
  .ma-webin aside span { font-size: 12px; color: #A8B2C8; padding: 7px 9px; border-radius: 7px; }
  .ma-webin aside span.an { color: #ECEEF2; background: rgba(79,156,249,.16); box-shadow: inset 2px 0 0 #4F9CF9; }
  .ma-webin .ma-haupt { padding: 16px 58px 16px 16px; }   /* rechts liegt das iPhone davor */
  .ma-webin .ma-h { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin-bottom: 14px; }
  .ma-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
  .ma-stats div { padding: 11px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
  .ma-stats small { display: block; font-size: 9.5px; white-space: nowrap; color: #A8B2C8; margin-bottom: 5px; }
  .ma-stats b { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
  .ma-tabelle { border-radius: 10px; border: 1px solid rgba(255,255,255,.06); overflow: hidden; }
  .ma-tabelle div { display: flex; justify-content: space-between; align-items: center; padding: 11px 13px; font-size: 12.5px; }
  .ma-tabelle div + div { border-top: 1px solid rgba(255,255,255,.06); }
  .ma-buehne em { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
  .p-neu { background: rgba(79,156,249,.16); color: #7DB6FB; }
  .p-arbeit { background: rgba(245,158,11,.15); color: #FBBF24; }
  .p-fertig { background: rgba(34,197,94,.15); color: #4ADE80; }

  /* gemeinsame Telefonteile */
  .ma-screen { position: relative; height: 100%; overflow: hidden; background: linear-gradient(175deg, #0f1422, #090c14 70%); }
  .ma-sb { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px 4px; font-size: 10px; font-weight: 600; }
  .ma-sbr { display: flex; gap: 4px; }
  .ma-sbr i { width: 13px; height: 7px; border-radius: 2px; background: #ECEEF2; opacity: .85; }
  .ma-sbr i:first-child { width: 10px; clip-path: polygon(0 100%, 100% 0, 100% 100%); border-radius: 0; }

  /* iOS: Titanrahmen wie das Hero-Telefon */
  .ma-ios { left: 452px; top: 118px; width: 172px; height: 370px; z-index: 3; padding: 7px; border-radius: 34px;
    background: linear-gradient(145deg, #6c7484 0%, #2c313d 26%, #9aa3b4 48%, #2c313d 64%, #5d6574 100%);
    box-shadow: 0 34px 70px rgba(0,0,0,.7), inset 0 1px 1px rgba(255,255,255,.35); }
  .ma-ios .ma-screen { border-radius: 28px; }
  .ma-ios.ist-an { box-shadow: 0 34px 70px rgba(0,0,0,.7), 0 18px 60px -8px rgba(79,156,249,.7); }
  .ma-insel { position: absolute; top: 8px; left: 50%; width: 54px; height: 16px; margin-left: -27px; border-radius: 10px; background: #000; z-index: 2; }
  .ma-iosin { padding: 4px 12px; }
  .ma-iosin .ma-h { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 8px 2px 10px; }
  .ma-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 8px; background: rgba(255,255,255,.07); margin-bottom: 10px; }
  .ma-seg span { text-align: center; font-size: 10px; padding: 4px 0; border-radius: 6px; color: #A8B2C8; }
  .ma-seg span.an { background: rgba(255,255,255,.14); color: #ECEEF2; font-weight: 600; }
  .ma-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 4px; border-bottom: 1px solid rgba(255,255,255,.07); }
  .ma-zeile b { display: block; font-size: 11px; font-weight: 600; }
  .ma-zeile small { font-size: 9.5px; color: #A8B2C8; }
  .ma-zeile > i { font-style: normal; color: #A8B2C8; font-size: 15px; }
  .ma-tabbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 9px 10px 22px; background: rgba(15,20,32,.92); border-top: 1px solid rgba(255,255,255,.07); }
  .ma-tabbar i { color: #6b7488; } .ma-tabbar i.an { color: #4F9CF9; }
  .ma-tabbar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ma-home { position: absolute; bottom: 6px; left: 50%; width: 58px; height: 3px; margin-left: -29px; border-radius: 2px; background: rgba(255,255,255,.55); }

  /* Android im Stil eines aktuellen Galaxy: duenner farbiger Metallrahmen,
     sehr schmaler, gleichmaessiger schwarzer Rand, flachere Ecken,
     kleines Kameraloch mittig, Tasten rechts. */
  .ma-android { left: 612px; top: 14px; width: 148px; height: 356px; z-index: 2; padding: 2px; border-radius: 21px;
    background: linear-gradient(90deg, #5d5878 0%, #b7b0d6 12%, #8c86ab 50%, #b7b0d6 88%, #5d5878 100%);
    box-shadow: 0 30px 60px rgba(0,0,0,.6); }
  .ma-android .ma-screen { border-radius: 19px; border: 4px solid #030304; background: #0f1114; font-family: Roboto, "Google Sans", system-ui, sans-serif; }
  .ma-android.ist-an { box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 18px 60px -8px rgba(167,150,255,.6); }
  .ma-akey { position: absolute; right: -1.5px; width: 2.5px; border-radius: 0 2px 2px 0; background: #8c86ab; }
  .ma-akey--power { top: 96px; height: 24px; }
  .ma-akey--vol { top: 58px; height: 30px; }
  .ma-loch { position: absolute; top: 7px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #000; box-shadow: 0 0 0 1px #16161a; z-index: 2; }
  .ma-asb { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px 2px; font-size: 9.5px; color: #E1E3E3; }
  .ma-asbr { display: flex; gap: 3px; }
  .ma-asbr svg { width: 9px; height: 9px; fill: #E1E3E3; }
  .ma-and { padding: 6px 10px; }
  .ma-suche { display: flex; align-items: center; gap: 7px; padding: 6px 6px 6px 10px; border-radius: 999px; background: #1d2426; margin: 4px 0 10px; font-size: 9.5px; color: #BEC8C8; }
  .ma-suche svg { width: 11px; height: 11px; fill: none; stroke: #BEC8C8; stroke-width: 2; stroke-linecap: round; }
  .ma-suche span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ma-suche u { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; font-size: 9px; font-weight: 700; background: #80D5D4; color: #003737; }
  .ma-and .ma-h { font-size: 16px; font-weight: 400; margin: 2px 2px 8px; color: #E1E3E3; }
  .ma-tage { display: flex; gap: 4px; margin-bottom: 9px; }
  .ma-tage span { flex: 1; text-align: center; font-size: 9px; padding: 5px 0; border-radius: 8px; border: 1px solid #3f4949; color: #BEC8C8; }
  .ma-tage span.an { background: #334B4B; border-color: #334B4B; color: #CCE8E7; font-weight: 600; }
  .ma-karte { display: flex; gap: 9px; align-items: center; padding: 10px; border-radius: 16px; background: #1d2426; margin-bottom: 6px; font-size: 10px; color: #E1E3E3; }
  .ma-karte b { font-size: 10px; font-weight: 600; color: #80D5D4; }
  .ma-karte.an { background: #334B4B; }
  .ma-fab { position: absolute; right: 10px; bottom: 22px; display: inline-flex; align-items: center; gap: 5px; padding: 10px 13px; border-radius: 16px;
    font-style: normal; font-size: 10px; font-weight: 600; background: #80D5D4; color: #003737; box-shadow: 0 6px 14px rgba(0,0,0,.45); }
  .ma-fab b { font-size: 14px; line-height: 1; font-weight: 500; }
  .ma-gestik { position: absolute; bottom: 7px; left: 50%; width: 46px; height: 3px; margin-left: -23px; border-radius: 2px; background: rgba(225,227,227,.6); }

  .ma-chips { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
  .ma-chips span {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
    font-size: .92rem; font-weight: 600; color: #A8B2C8;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
    transition: color .5s var(--ease-out), background .5s var(--ease-out), border-color .5s var(--ease-out);
  }
  .ma-chips svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .ma-chips span.ist-an { color: #ECEEF2; background: rgba(79,156,249,.16); border-color: rgba(79,156,249,.55); }
  @media (max-width: 860px) {
    .media-in:has(.m-apps) { gap: 10px; }
    .ma-chips { gap: 6px; }
    .ma-chips span { font-size: .72rem; padding: 6px 10px; gap: 5px; }
    .ma-chips svg { width: 12px; height: 12px; }
  }

  /* ============================================================
     Hell/Dunkel
     Tokens aus css/base.css (1.2 Hellmodus) und css/site.css.
     Gespeichert unter "mityvo-theme" wie auf der Live-Seite.
     Geraete und Bildschirme (Telefone, Browserfenster, Produkt-
     medien) bleiben bewusst dunkel: ein dunkles Geraet auf heller
     Seite ist die uebliche Darstellung.
     ============================================================ */
  :root { --glass-border: rgba(255,255,255,.08); --glass-bg: rgba(22,22,24,.58); }
  [data-theme="light"] {
    --bg: #F4F6FA;
    --text: #0B1220;
    --text-soft: #4E5D78;
    --glass-bg: rgba(255,255,255,.65);
    --glass-border: rgba(8,11,18,.08);
    color-scheme: light;
  }
  [data-theme="light"] .live {
    --surface: #FFFFFF; --border: rgba(8,11,18,.10);
    --glass-bg: rgba(255,255,255,.65); --glass-border: rgba(8,11,18,.08);
    --glow-strong: rgba(79,156,249,.22); --glow-soft: rgba(79,156,249,.10);
    --glow-cyan: rgba(103,232,249,.14); --glow-indigo: rgba(129,140,248,.12);
  }
  html, body { transition: background-color .35s ease, color .35s ease; }

  /* Umschalter, Werte aus css/base.css, in der Leiste etwas kleiner */
  .theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: transparent; border: 1px solid var(--glass-border);
    color: var(--text); cursor: pointer; padding: 0;
    transition: border-color .2s ease, color .2s ease;
  }
  .theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
  .theme-toggle svg { width: 18px; height: 18px; }
  .theme-toggle .icon-sun { display: none; }
  .theme-toggle .icon-moon { display: block; }
  [data-theme="light"] .theme-toggle .icon-sun { display: block; }
  [data-theme="light"] .theme-toggle .icon-moon { display: none; }

  /* Header-Logo: echtes Bild, per Hoehe auf die Wortmarke beschnitten
     (obere 70 % des Lockups, wie das Partikel-Sampling). */
  .brand { height: 26px; overflow: hidden; align-items: flex-start; }
  .brand img { width: 100%; height: auto; display: block; }

  /* ---- Seitenebenen im Hellmodus ---- */
  [data-theme="light"] .pill {
    background: rgba(255,255,255,.78); border-color: rgba(8,11,18,.08);
    box-shadow: 0 18px 46px rgba(15,23,42,.10);
  }
  [data-theme="light"] .menu a:hover { background: rgba(8,11,18,.05); }
  [data-theme="light"] .btn-ghost { border-color: rgba(8,11,18,.18); }
  [data-theme="light"] .btn-soft { background: rgba(8,11,18,.06); }
  [data-theme="light"] .eyebrow { background: rgba(255,255,255,.6); border-color: rgba(8,11,18,.10); }
  [data-theme="light"] .cta-line { border-color: rgba(8,11,18,.20); }
  [data-theme="light"] .burger { background: rgba(8,11,18,.04); border-color: rgba(8,11,18,.12); }
  [data-theme="light"] .belts { border-color: rgba(8,11,18,.08); }
  [data-theme="light"] .belt--b span { color: rgba(11,18,32,.30); }
  [data-theme="light"] .steps-rail i { background: rgba(8,11,18,.12); }
  [data-theme="light"] .flow-card { background: rgba(255,255,255,.78); border-color: rgba(8,11,18,.08); }
  [data-theme="light"] .flow-rail { background: rgba(8,11,18,.10); }
  [data-theme="light"] .kontakt { border-top-color: rgba(8,11,18,.08); }
  [data-theme="light"] .assistent { background: rgba(255,255,255,.72); border-color: rgba(8,11,18,.08); }
  [data-theme="light"] .fortschritt { background: rgba(8,11,18,.08); }
  [data-theme="light"] .opt { background: rgba(255,255,255,.85); border-color: rgba(8,11,18,.10); }
  [data-theme="light"] .opt:hover, [data-theme="light"] .opt.gewaehlt { background: rgba(79,156,249,.10); }
  [data-theme="light"] .nav-zurueck { border-color: rgba(8,11,18,.18); }
  [data-theme="light"] .feld input, [data-theme="light"] .feld textarea { background: #fff; border-color: rgba(8,11,18,.14); }
  [data-theme="light"] .fuss { border-top-color: rgba(8,11,18,.08); }
  [data-theme="light"] .sheet-layer--3 { background: #F4F6FA; }

  /* Voro bleibt ein eigener Farbraum, im Hellmodus als helles Teal */
  [data-theme="light"] .voro { background: #E8F5F3; }
  [data-theme="light"] .voro-glow { background: radial-gradient(ellipse at center, rgba(20,184,166,.22), rgba(20,184,166,.06) 42%, transparent 70%); }
  [data-theme="light"] .voro-badge { background: rgba(20,184,166,.12); border-color: rgba(20,184,166,.40); color: #0F766E; }
  [data-theme="light"] .voro h2 em { color: #0F9488; }

  @media (max-width: 860px) {
    .brand { height: 21px; }
    /* Hochkant sitzt der Umschalter neben dem Menueknopf und traegt
       vor dem Einfahren der Leiste eine eigene Huelle wie dieser. */
    .theme-toggle { width: 44px; height: 44px; margin-left: auto; background: rgba(14,18,26,.72); backdrop-filter: blur(10px); }
    .topbar.ready .theme-toggle { background: transparent; backdrop-filter: none; }
    [data-theme="light"] .theme-toggle { background: rgba(255,255,255,.72); }
    [data-theme="light"] .topbar.ready .theme-toggle { background: transparent; }
    .actions { gap: 8px; }
  }

  /* Hellmodus-Regeln der Live-Komponenten, automatisch uebernommen */
  

  /* Geraete und Bildschirme behalten ihre Dunkel-Farben auch im
     Hellmodus. Ohne diese lokalen Werte erbten ihre Inhalte die
     dunkle Seitenschrift und standen dunkel auf dunkel. */
  [data-theme="light"] .stage-devices,
  [data-theme="light"] .media {
    --text: #ECEEF2; --text-soft: #A8B2C8;
    color: var(--text);
  }

  /* Produktmedien auf ihren Rahmen beschneiden. Die wartenden Medien
     liegen per translateY(100%) direkt unter dem aktiven und waren
     sonst sichtbar, besonders im Hellmodus. */
  .media-wrap { clip-path: inset(8vh 0 8vh 0 round 26px 0 0 26px); }
  @media (max-width: 860px) {
    .media-wrap { clip-path: inset(0 round 18px); }
  }

  /* Hochkant: Die mobile Regel .topbar.ready .pill ist spezifischer als
     [data-theme="light"] .pill und hielt die Leiste dunkel. */
  @media (max-width: 860px) {
    [data-theme="light"] .topbar.ready .pill {
      background: rgba(255,255,255,.78); border-color: rgba(8,11,18,.08);
      box-shadow: 0 18px 46px rgba(15,23,42,.10);
      backdrop-filter: blur(16px) saturate(1.3);
    }
    [data-theme="light"] .burger { background: rgba(255,255,255,.72); border-color: rgba(8,11,18,.12); }
    [data-theme="light"] .topbar.ready .burger { background: rgba(8,11,18,.04); }
  }

  /* ============================================================
     Bewegungs-Tokens, identisch zu window.MOTION im Skript
     ============================================================ */
  :root {
    --ease-out:    cubic-bezier(.25, 1, .5, 1);
    --ease-in-out: cubic-bezier(.76, 0, .24, 1);
    --ease-in:     cubic-bezier(.5, 0, .75, 0);
    --ease:        cubic-bezier(.25, .1, .25, 1);
    --dur-s: .6s; --dur-m: 1s; --dur-l: 1.2s;
  }

  /* ============================================================
     Fester CTA unten mittig
     Erscheint, sobald der Hero verlassen ist, und verschwindet
     wieder, wenn der Kontakt im Bild ist. Farben kehren sich mit
     dem Theme um: hell auf dunkler Seite, dunkel auf heller.
     ============================================================ */
  .cta-fest {
    position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom));
    z-index: 55;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px; border-radius: 999px;
    background: color-mix(in srgb, var(--text) 16%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    text-decoration: none;
    opacity: 0; pointer-events: none;
    transform: translate(-50%, 40px);
    transition: opacity var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out);
  }
  .cta-fest.an { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
  .nav-offen .cta-fest { opacity: 0; pointer-events: none; }
  .cta-fest-text {
    display: inline-flex; align-items: center; height: 42px; padding: 0 20px;
    border-radius: 999px; background: var(--text); color: var(--bg);
    font-size: .92rem; font-weight: 600; white-space: nowrap;
  }
  .cta-fest-rund {
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--accent); color: #071018; overflow: hidden;
  }
  .cta-fest-rund svg { width: 18px; height: 18px; transition: transform var(--dur-s) var(--ease-out); }
  .cta-fest:hover .cta-fest-rund svg { transform: translateX(3px); }

  /* SplitText: Masken duerfen Unterlaengen (g, y, p) nicht abschneiden */
  /* Klassenname gemessen, nicht angenommen: SplitText 3.13 vergibt
     fuer die Maskenhuelle "sl-mask-line-mask". */
  .sl-mask-line-mask { padding-bottom: .12em; margin-bottom: -.12em; }

  /* ============================================================
     Szenen: gepinnte Buehnen, die sich unter dem Scroll verwandeln
     ============================================================ */
  .szene { position: relative; background: var(--bg); }
  .szene-db { height: 460vh; }
  .szene-iv { height: 440vh; }
  .szene-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .szene h2 {
    font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; line-height: 1.04;
    font-size: clamp(2rem, 1.1rem + 2.6vw, 3.3rem); color: var(--text);
  }
  .szene p { color: var(--text-soft); line-height: 1.6; font-size: 1.05rem; }
  .db-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .db-chips span {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 999px; font-size: .88rem; color: var(--text);
    background: var(--glass-bg); border: 1px solid var(--glass-border);
  }
  .db-chips em { font-style: normal; }
  /* Individuelle Software: drei Zusagen als schlichte Zeile mit Haken, keine Pillen */
  .iv-punkte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(100%, 420px); }
  .iv-punkte > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
    padding: 16px 8px; border-radius: 16px; background: var(--glass-bg); border: 1px solid var(--glass-border);
    font-size: .88rem; font-weight: 600; line-height: 1.25; color: var(--text); }
  .iv-punkte svg { width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .db-chips svg { width: 15px; height: 15px; fill: none; stroke: #F59E0B; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .szene-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 24px; border-radius: 12px; text-decoration: none;
    background: var(--accent); color: #071018; font-weight: 600;
  }
  .szene-btn b { transition: transform var(--dur-s) var(--ease-out); }
  .szene-btn:hover b { transform: translateX(4px); }

  /* ---------------- Dashboard ---------------- */
  .db-glow {
    position: absolute; inset: -10%;
    background: radial-gradient(45% 40% at 50% 52%, rgba(245,158,11,.14), transparent 70%);
    pointer-events: none;
  }
  .db-wort {
    position: absolute; z-index: 1;
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(3rem, 1rem + 6.8vw, 8.6rem);
    letter-spacing: -.045em; line-height: .9; white-space: nowrap;
    color: var(--text);
  }
  .db-wort-l { left: 5vw; top: 30%; }
  .db-wort-r { right: 5vw; top: 58%; }

  .db-raster { position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px); background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(60% 55% at 50% 50%, #000, transparent 75%); mask-image: radial-gradient(60% 55% at 50% 50%, #000, transparent 75%); }
  .db-wort-r { background: linear-gradient(100deg, #FBBF24, #F59E0B 55%, #EA7A0C); -webkit-background-clip: text; background-clip: text; color: transparent; }

  .db-frame {
    position: absolute; left: 50%; top: 50%; z-index: 2;
    width: min(1100px, 80vw, calc((100vh - 150px) * 1.72));
    border-radius: 16px; overflow: hidden; background: #0a0d12;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 60px 140px -40px rgba(245,158,11,.4), 0 40px 100px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .db-chrome { display: flex; align-items: center; gap: 14px; height: 36px; padding: 0 14px;
    background: linear-gradient(180deg, #1a1e28, #13161e); border-bottom: 1px solid rgba(255,255,255,.07); }
  .db-url { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 280px; margin: 0 auto; justify-content: center;
    font-size: 11.5px; color: #A8B2C8; background: rgba(0,0,0,.35); border-radius: 7px; padding: 5px 12px; }
  .db-url svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.2; }
  .db-shot { position: relative; container-type: inline-size; }
  .db-shot > img { display: block; width: 100%; height: auto; }
  /* aktivierter Eintrag, liegt deckungsgleich ueber dem grauen Eintrag */
  .db-akt { position: absolute; left: 1.25%; width: 16.8%; top: calc(var(--y) - 2.8%); height: 5.6%;
    display: flex; align-items: center; gap: .9cqw; padding-left: 1cqw; border-radius: .7cqw;
    background: color-mix(in srgb, var(--pc) 14%, #0a0d12); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 60%, transparent), 0 0 2cqw -.4cqw var(--pc);
    font-size: 1.1cqw; font-weight: 600; color: #ECEEF2; }
  .db-akt img { width: 1.9cqw; height: 1.9cqw; border-radius: .45cqw; }
  .db-akt em { margin-left: auto; margin-right: .8cqw; font-style: normal; font-size: .75cqw; font-weight: 700; letter-spacing: .04em;
    padding: .2cqw .55cqw; border-radius: 999px; background: var(--pc); color: #08111F; }
  .db-akt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1px var(--pc);
    animation: dbRing 2.4s var(--ease-out) infinite; pointer-events: none; }
  @keyframes dbRing { from { transform: scale(1); opacity: .9; } to { transform: scale(1.18, 1.6); opacity: 0; } }

  .db-tile {
    position: absolute; left: 50%; top: 50%; z-index: 3;
    width: 132px; height: 132px; margin: -66px 0 0 -66px;
    border-radius: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 60%);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 70px -12px var(--pc), inset 0 1px 0 rgba(255,255,255,.22);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    will-change: transform, opacity;
  }
  .db-tile img { width: 66px; height: 66px; border-radius: 17px; box-shadow: 0 8px 20px rgba(0,0,0,.45); }
  .db-tile span { font-size: .88rem; font-weight: 600; color: #ECEEF2; letter-spacing: .01em; }

  .db-copy {
    position: absolute; z-index: 4; left: 6vw; top: 50%;
    width: min(520px, 40vw); transform: translateY(-50%);
    display: grid; gap: 20px; justify-items: start;
  }
  .db-live {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--text);
    background: var(--glass-bg); border: 1px solid var(--glass-border);
  }
  .db-live i { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 10px #22C55E; }

  /* ---------------- Individuelle Software ---------------- */
  .iv-glow {
    position: absolute; inset: -10%;
    background:
      radial-gradient(40% 40% at 72% 50%, rgba(79,156,249,.16), transparent 70%),
      radial-gradient(30% 30% at 20% 40%, rgba(129,140,248,.10), transparent 70%);
    pointer-events: none;
  }
  .iv-links { position: absolute; z-index: 2; left: 6vw; top: 50%; width: min(600px, 44vw); transform: translateY(-50%); }
  .iv-kicker {
    display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px;
    font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  }
  .iv-kicker::before { content: ""; width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(115deg, #4F9CF9, #67E8F9); }
  .iv-h { transform-origin: 0 50%; }   /* kein will-change: sonst unscharf beim Skalieren */
  .iv-zeile {
    --p: 0%;
    display: block;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p) - 14%), transparent var(--p));
            mask-image: linear-gradient(90deg, #000 calc(var(--p) - 14%), transparent var(--p));
  }
  .iv-z2 { background: linear-gradient(120deg, #818CF8, #4F9CF9 48%, #67E8F9); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .iv-rest { display: grid; gap: 20px; justify-items: start; margin-top: 22px; }

  .iv-code {
    position: absolute; z-index: 2; right: 4vw; top: 50%;
    width: min(640px, 43vw); transform: translateY(-50%);
    --text: #CCCCCC; --text-soft: #9D9D9D; color: var(--text);
    border-radius: 12px; overflow: hidden;
    background: #1F1F1F; border: 1px solid #3a3a3a;
    box-shadow: 0 50px 120px -40px rgba(79,156,249,.45), 0 30px 80px rgba(0,0,0,.55);
    font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    will-change: transform, opacity;
  }
  .vsc svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .vsc u { text-decoration: none; font-weight: 700; font-size: 8.5px; margin-right: 5px; }
  .vsc u.js { color: #CBCB41; } .vsc u.json { color: #CBCB41; } .vsc u.md { color: #519ABA; }
  .vsc-titel { position: relative; display: flex; align-items: center; height: 34px; padding: 0 12px; background: #181818; border-bottom: 1px solid #2b2b2b; }
  .iv-dots { display: flex; gap: 7px; }
  .iv-dots s { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
  .iv-dots s:nth-child(2) { background: #FEBC2E; } .iv-dots s:nth-child(3) { background: #28C840; }
  .vsc-suche { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 42%; height: 22px; border-radius: 6px; background: #2a2a2a; border: 1px solid #3c3c3c; color: #9D9D9D; font-size: 11px; }
  .vsc-suche svg { width: 12px; height: 12px; }
  .vsc-lay { margin-left: auto; display: flex; gap: 6px; }
  .vsc-lay i { width: 13px; height: 11px; border: 1.3px solid #8a8a8a; border-radius: 2px; }
  .vsc-haupt { display: grid; grid-template-columns: 40px 150px 1fr; }
  .vsc-act { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 10px; background: #181818; border-right: 1px solid #2b2b2b; }
  .vsc-act i { position: relative; width: 20px; height: 20px; color: #868686; }
  .vsc-act i.an { color: #D7D7D7; }
  .vsc-act i.an::before { content: ""; position: absolute; left: -10px; top: -2px; bottom: -2px; width: 2px; background: #0078D4; }
  .vsc-side { background: #181818; border-right: 1px solid #2b2b2b; }
  .vsc-side-kopf { padding: 9px 14px 6px; font-size: 10.5px; color: #CCCCCC; letter-spacing: .04em; }
  .vsc-baum { display: flex; flex-direction: column; font-size: 11.5px; }
  .vsc-baum b { font-weight: 700; font-size: 10.5px; padding: 3px 8px; color: #CCCCCC; }
  .vsc-baum span { padding: 2px 8px; white-space: nowrap; color: #CCCCCC; }
  .vsc-baum .d1 { padding-left: 18px; } .vsc-baum .d2 { padding-left: 30px; }
  .vsc-baum .an { background: #37373D; box-shadow: inset 1px 0 0 #0078D4; }
  .vsc-editor { min-width: 0; display: flex; flex-direction: column; }
  .vsc-tabs { display: flex; height: 32px; background: #181818; border-bottom: 1px solid #2b2b2b; }
  .vsc-tabs span { display: flex; align-items: center; padding: 0 12px; font-size: 11.5px; color: #9D9D9D; border-right: 1px solid #2b2b2b; white-space: nowrap; }
  .vsc-tabs span.an { background: #1F1F1F; color: #FFFFFF; box-shadow: inset 0 1px 0 #0078D4; margin-bottom: -1px; }
  .vsc-tabs em { font-style: normal; margin-left: 10px; color: #CCCCCC; }
  .vsc-crumbs { padding: 4px 14px; font-size: 11px; color: #A9A9A9; white-space: nowrap; overflow: hidden; }
  .vsc-crumbs b { font-weight: 400; color: #A9A9A9; }
  .iv-block { padding: 4px 14px 12px 0; font: 12.5px/1.72 Menlo, ui-monospace, "Cascadia Code", Consolas, monospace; }
  .iv-z { --p: 0%; white-space: pre;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p) - 6%), transparent var(--p));
            mask-image: linear-gradient(90deg, #000 calc(var(--p) - 6%), transparent var(--p)); }
  .iv-z .ln { display: inline-block; width: 44px; padding-right: 18px; text-align: right; color: #6E7681; }
  /* Farben wie VS Code Dark Modern */
  .iv-block .kw { color: #569CD6; } .iv-block .var { color: #4FC1FF; } .iv-block .prop { color: #9CDCFE; }
  .iv-block .str, .iv-block .val { color: #CE9178; } .iv-block .num { color: #CE9178; } .iv-block .op { color: #D4D4D4; }
  .iv-code.ist-live .iv-status { color: #4EC9B0; }
  .vsc-panel { border-top: 1px solid #2b2b2b; }
  .vsc-ptabs { display: flex; gap: 18px; padding: 7px 14px 0; font-size: 10.5px; color: #9D9D9D; }
  .vsc-ptabs span { padding-bottom: 5px; }
  .vsc-ptabs .an { color: #E7E7E7; box-shadow: inset 0 -1px 0 #0078D4; }
  .vsc-term { padding: 8px 14px 12px; font: 11.5px/1.7 Menlo, ui-monospace, Consolas, monospace; color: #CCCCCC; }
  .vsc-term em { font-style: normal; color: #3B8EEA; } .vsc-term b { color: #23D18B; font-weight: 400; }
  .vsc-ok { display: none; color: #23D18B; }
  .ist-live .vsc-ok { display: block; } .ist-live .vsc-lauf { display: none; }
  .iv-build { height: 4px; margin: 6px 0 4px; border-radius: 2px; background: #2b2b2b; overflow: hidden; }
  .iv-build i { display: block; height: 100%; background: linear-gradient(90deg, #0078D4, #23D18B); transform: scaleX(0); transform-origin: left; }
  .vsc-status { display: flex; align-items: center; gap: 12px; height: 22px; padding-right: 10px; background: #0078D4; color: #fff; font-size: 11px; white-space: nowrap; }
  .vsc-status span { display: inline-flex; align-items: center; gap: 4px; }
  .vsc-status span svg { width: 12px; height: 12px; }
  .vsc-remote { height: 100%; padding: 0 9px; background: #16825D; }
  .vsc-r { margin-left: auto; }
  .iv-badge { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,.25);
    transition: background var(--dur-s) var(--ease-out); }
  .iv-code.ist-live .iv-badge { background: #16825D; }

  @media (max-width: 860px) {
    .szene-db { height: 420vh; }
    .szene-iv { height: 400vh; }
    .db-wort { font-size: 15vw; }
    .db-wort-l { left: 5vw; top: 20%; }
    .db-wort-r { right: 5vw; top: 70%; }
    .db-frame { width: 92vw; border-radius: 12px; }
    .db-chrome { height: 26px; padding: 0 10px; } .db-chrome .ma-ampel s { width: 7px; height: 7px; }
    .db-url { font-size: 9px; padding: 3px 8px; }
    .db-tile { width: 86px; height: 86px; margin: -43px 0 0 -43px; border-radius: 22px; gap: 6px; }
    .db-tile img { width: 44px; height: 44px; border-radius: 12px; } .db-tile span { font-size: .72rem; }
    .db-copy { left: 6vw; width: 88vw; top: 12vh; transform: none; gap: 14px; }
    .db-copy p { font-size: .95rem; }
    .db-chips { display: none; }

    .iv-links { left: 6vw; width: 88vw; top: 12vh; transform: none; text-align: center; }
    .iv-kicker { justify-content: center; }
    .iv-kicker::after { content: ""; width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(115deg, #67E8F9, #4F9CF9); }
    .iv-zeile { margin-inline: auto; }
    .iv-rest { justify-items: center; }
    .iv-rest .iv-punkte { gap: 8px; } .iv-rest .iv-punkte > div { padding: 14px 6px; font-size: .82rem; }
    .iv-h { font-size: clamp(1.9rem, 1rem + 5vw, 2.5rem); }
    .iv-rest { margin-top: 18px; gap: 24px; }

    .iv-rest p { font-size: .95rem; }
    .iv-code { right: 6vw; width: 88vw; top: 29vh; transform: none; }
    .iv-block { padding: 2px 10px 8px 0; font-size: 10.5px; line-height: 1.6; }
    .vsc-haupt { grid-template-columns: 30px 1fr; }
    .vsc-side, .vsc-lay, .vsc-crumbs, .vsc-status span:nth-child(3), .vsc-r, .vsc-status span:nth-child(5) { display: none; }
    .vsc-act { gap: 12px; } .vsc-act i { width: 15px; height: 15px; } .vsc-act i.an::before { left: -7.5px; }
    .vsc-suche { width: 50%; }
    .vsc-term { font-size: 10px; padding: 6px 10px 8px; }
    .iv-z .ln { width: 30px; padding-right: 10px; }
  }
  

  .iv-zeile { display: table; }

  /* ============================================================
     Zahlen: gepinnte Szene, Zahlen zaehlen riesig und docken an
     ============================================================ */
  .szene-zl { height: 360vh; }
  .zl-glow i {
    position: absolute; inset: -10%; opacity: 0; pointer-events: none;
    background: radial-gradient(38% 42% at 50% 44%, var(--c), transparent 70%);
  }
  .zl-glow i:nth-child(1) { --c: rgba(129,140,248,.20); }
  .zl-glow i:nth-child(2) { --c: rgba(79,156,249,.20); }
  .zl-glow i:nth-child(3) { --c: rgba(103,232,249,.18); }
  .zl-wort {
    position: absolute; left: 0; top: 50%; z-index: 0; white-space: nowrap; pointer-events: none;
    font-family: var(--font-display); font-weight: 700; letter-spacing: -.05em; line-height: .8;
    font-size: 34vw; color: transparent;
    -webkit-text-stroke: 1.5px rgba(255,255,255,.07);
  }
  .zl-index {
    position: absolute; z-index: 2; left: 6vw; top: 50%;
    display: flex; align-items: baseline; gap: 8px;
    font-family: var(--font-display); color: var(--text-soft); font-size: .95rem;
  }
  .zl-index b { font-size: 2.2rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
  .zl-stat {
    position: absolute; z-index: 2; left: 0; right: 0; top: 42%;
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    pointer-events: none;
  }
  .zl-num, .zl-znum {
    display: inline-block;
    font-family: var(--font-display); font-weight: 700; line-height: 1; letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(120deg, #818CF8, #4F9CF9 48%, #67E8F9);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .zl-num { font-size: min(24vw, 36vh); transform-origin: 50% 50%; }
  .zl-num.zl-num--wort { font-size: min(12vw, 18vh); }
  .zl-lbl {
    --p: 0%;
    font-size: clamp(1.05rem, .8rem + .8vw, 1.5rem); font-weight: 600; letter-spacing: .01em; color: var(--text);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p) - 14%), transparent var(--p));
            mask-image: linear-gradient(90deg, #000 calc(var(--p) - 14%), transparent var(--p));
  }
  .zl-reihe {
    position: absolute; z-index: 3; left: 50%; bottom: 11vh;
    width: min(1000px, 90vw);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    padding: clamp(26px, 4vw, 44px) clamp(16px, 3vw, 40px);
    text-align: center;
  }
  .zl-band {
    position: absolute; inset: 0; border-radius: 24px; overflow: hidden;
    background: linear-gradient(120deg, rgba(129,140,248,.14), rgba(79,156,249,.14) 50%, rgba(103,232,249,.14));
    border: 1px solid rgba(79,156,249,.22);
  }
  .zl-band::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(60% 60% at 0% 0%, rgba(129,140,248,.16), transparent 60%),
                radial-gradient(60% 60% at 100% 100%, rgba(103,232,249,.16), transparent 60%);
  }
  .zl-zelle { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .zl-znum { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); }
  .zl-zlbl { font-size: .92rem; color: var(--text-soft); }

  /* ============================================================
     FAQ: Kopf steht links fest, Fragen ziehen sich mit dem Scroll auf
     ============================================================ */
  .faq { --linie: rgba(255,255,255,.12); background: var(--bg); padding: clamp(56px, 7vw, 110px) 0 clamp(80px, 10vw, 130px); }
  .faq-inner {
    width: min(1180px, 90vw); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 100px);
    align-items: start;
  }
  .faq-seite { position: sticky; top: 18vh; }
  .faq-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  }
  .faq-eyebrow::before { content: ""; width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(115deg, #4F9CF9, #67E8F9); }
  .faq-kopf h2 {
    font-family: var(--font-display); font-weight: 600; letter-spacing: -.035em; line-height: 1;
    font-size: clamp(2.6rem, 1.2rem + 4.2vw, 5.2rem); margin: 18px 0 20px; color: var(--text);
  }
  .faq-sub { color: var(--text-soft); font-size: 1.05rem; line-height: 1.6; max-width: 34ch; }
  .faq-stand {
    display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px;
    margin-top: clamp(28px, 5vh, 56px); font-family: var(--font-display); color: var(--text-soft);
  }
  .faq-stand-nr { font-size: 2.2rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
  .faq-fort { height: 2px; margin-left: 10px; border-radius: 2px; background: var(--linie); overflow: hidden; }
  .faq-fort i { display: block; height: 100%; background: linear-gradient(90deg, #818CF8, #4F9CF9, #67E8F9); transform: scaleX(0); transform-origin: 0 50%; }

  .faq-list { display: flex; flex-direction: column; }
  .faq-item { position: relative; }
  .faq-item:last-child { border-bottom: 1px solid var(--linie); }
  .faq-linie { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linie); transform-origin: 0 50%; }
  .faq-question {
    position: relative; width: 100%; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px;
    padding: 28px 4px; background: none; border: 0; cursor: pointer; text-align: left;
    font: inherit; color: var(--text);
  }
  .faq-question::before {
    content: ""; position: absolute; inset: 0 -14px; border-radius: 14px; z-index: -1;
    background: linear-gradient(90deg, rgba(79,156,249,.10), rgba(79,156,249,0));
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform var(--dur-m) var(--ease-out);
  }
  .faq-question:hover::before, .faq-question:focus-visible::before { transform: scaleX(1); }
  .faq-question:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
  .faq-nr { font-family: var(--font-display); font-size: .9rem; font-weight: 600; color: var(--text-soft); font-variant-numeric: tabular-nums; transition: color var(--dur-s) var(--ease-out); }
  .faq-q {
    font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; line-height: 1.25;
    font-size: clamp(1.1rem, .9rem + .7vw, 1.5rem);
    transition: transform var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out);
  }
  .faq-question:hover .faq-q { transform: translateX(6px); }
  .faq-icon {
    position: relative; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--linie);
    transition: background var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out);
  }
  .faq-icon i { position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--text); transition: transform var(--dur-s) var(--ease-in-out), background var(--dur-s) var(--ease-out); }
  .faq-icon i:nth-child(2) { transform: rotate(90deg); }
  .faq-question:hover .faq-icon { border-color: rgba(79,156,249,.6); }
  .faq-item.is-open .faq-icon { background: var(--accent); border-color: var(--accent); }
  .faq-item.is-open .faq-icon i { background: #071018; }
  .faq-item.is-open .faq-icon i:nth-child(2) { transform: rotate(0deg); }
  .faq-item.is-open .faq-nr { color: var(--accent); }
  .faq-answer { height: 0; overflow: hidden; }
  .faq-answer-inner { padding: 0 60px 30px 62px; color: var(--text-soft); line-height: 1.7; font-size: 1.02rem; }
  .faq-answer-inner a { color: var(--accent); }

  /* ============================================================
     Kontakt: Band oeffnet sich, Assistent kippt herein
     ============================================================ */
  .kontakt-band { --mx: 50%; --my: 0%; }
  .kontakt-licht {
    position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(103,232,249,.16), transparent 60%);
    transition: opacity var(--dur-s) var(--ease-out);
  }
  .kontakt-band:hover .kontakt-licht { opacity: 1; }
  @property --kw { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  .assistent::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: conic-gradient(from var(--kw), transparent 0 62%, rgba(129,140,248,.9) 76%, rgba(79,156,249,1) 84%, rgba(103,232,249,.9) 90%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: kwDrehen 7s linear infinite;
  }
  @keyframes kwDrehen { to { --kw: 360deg; } }
  .fortschritt i { background: linear-gradient(90deg, #818CF8, #4F9CF9, #67E8F9); box-shadow: 0 0 14px rgba(79,156,249,.8); }
  .opt { position: relative; overflow: hidden; }
  .opt::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(79,156,249,.14), rgba(79,156,249,0));
    transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-m) var(--ease-out);
  }
  .opt:hover::before, .opt.gewaehlt::before { transform: scaleX(1); }
  .opt > * { position: relative; }
  .opt em { transition: transform var(--dur-s) var(--ease-out); }
  .opt:hover em { transform: scale(1.18) rotate(-6deg); }
  .opt::after {
    content: "✓"; position: relative; margin-left: auto; flex: 0 0 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; font-size: .8rem; font-weight: 700;
    background: var(--accent); color: #071018;
    transform: scale(0); transition: transform var(--dur-s) cubic-bezier(.34,1.56,.64,1);
  }
  .opt.gewaehlt::after { transform: scale(1); }
  .feld input:focus, .feld textarea:focus { box-shadow: 0 0 0 4px rgba(79,156,249,.14); }
  .nav-weiter { transition: transform var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out); }
  .nav-weiter:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(79,156,249,.7); }

  [data-theme="light"] .zl-wort { -webkit-text-stroke-color: rgba(8,11,18,.08); }
  [data-theme="light"] .faq { --linie: rgba(8,11,18,.12); }

  @media (max-width: 860px) {
    .szene-zl { height: 320vh; }
    .zl-wort { font-size: 44vw; }
    .zl-index { left: 6vw; top: 15vh; }
    .zl-index b { font-size: 1.6rem; }
    .zl-stat { top: 40%; gap: 14px; }
    .zl-num { font-size: 36vw; } .zl-num.zl-num--wort { font-size: 17vw; }
    .zl-reihe { bottom: 15vh; gap: 10px; width: 92vw; padding: 22px 10px; }
    .zl-znum { font-size: 1.9rem; }
    .zl-zlbl { font-size: .76rem; }

    .faq-inner { grid-template-columns: 1fr; gap: 34px; }
    .faq-seite { position: relative; top: 0; }
    .faq-stand { display: none; }
    .faq-question { grid-template-columns: 30px 1fr auto; gap: 10px; padding: 22px 0; }
    .faq-question::before { inset: 0 -8px; }
    .faq-icon { width: 34px; height: 34px; }
    .faq-answer-inner { padding: 0 0 24px 40px; font-size: .96rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .assistent::before { animation: none; }
  }

  /* ============================================================
     Startseite mobil und Tablet hochkant (bis 860 px): alles mittig,
     Buttons breit (websites.md §6d, policies/mobile.md)
     ============================================================ */
  @media (max-width: 860px) {
    .cue { left: 50%; transform: translateX(-50%); text-align: center; }
    .voro-brand { justify-content: center; }
    .voro-list li { justify-content: center; text-align: center; }
    .claim-inner { text-align: center; }
    .claim-eyebrow { justify-content: center; display: flex; }
    .stack-item { text-align: center; }
    .stack-item p { margin-left: auto; margin-right: auto; }
    .stack-item a { justify-content: center; }
    .db-copy { justify-items: center; text-align: center; }
    .db-copy .db-chips { justify-content: center; }
    .flow-head, .flow-card { text-align: center; }
    .flow-head span { justify-content: center; display: flex; }
    .db-copy .szene-btn, .iv-rest .szene-btn { width: min(100%, 440px); justify-content: center; }
    .voro-brand, .voro-brand * { text-align: center; }
    #faq .faq-inner { grid-template-columns: 1fr; gap: 32px; width: min(720px, 100% - 40px); }
    #faq .faq-seite { position: relative; top: 0; text-align: center; }
    #faq .faq-eyebrow { flex-direction: column; justify-content: center; align-items: center; gap: 10px; display: flex; }
    #faq .faq-eyebrow::before { width: 28px; }
    #faq .faq-kopf h2, #faq .faq-sub { text-align: center; margin-left: auto; margin-right: auto; }
    #faq .faq-stand { display: none; }
    #faq .faq-question { grid-template-columns: 28px 1fr 34px; text-align: center; }
    #faq .faq-answer-inner { padding: 0 0 24px; text-align: center; }
    .assistent .schritt-label, .assistent h3, .erfolg { text-align: center; }
  }
  @media (min-width: 561px) and (max-width: 860px) {
    h1 { font-size: clamp(2.4rem, 1rem + 4vw, 3.4rem); }
    .sub { font-size: 1.15rem; }
    .eyebrow { font-size: .74rem; }
    .hero-cta { width: min(440px, 100%); margin-left: auto; margin-right: auto; }
    .stack-wrap { padding: 0 8vw; }
    .media-wrap { left: 8vw; right: 8vw; }
    .db-copy, .iv-links { left: 50%; width: min(620px, 84vw); transform: translateX(-50%); }
  }

  /* ============================================================
     Kopfleiste bis 1100 px einheitlich wie auf dem Handy:
     volle Breite, Logo links, Hell/Dunkel und Menue rechts.
     Vorher stand zwischen 761 und 1100 px eine schmale Pille mit
     "Idee besprechen" in der Mitte, auf jeder Seite etwas anders.
     ============================================================ */
  @media (max-width: 1100px) {
    .topbar { top: 10px; }
    .pill { width: calc(100% - 20px); max-width: none; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 14px; border-radius: 14px; }
    .brand { width: 84px; height: 24px; flex: 0 0 auto; }
    .actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
    .pill .btn-primary, .pill .btn-soft, .burger-label { display: none; }
    .burger { display: block; margin-left: 0; flex: 0 0 auto; width: 44px; height: 44px; }
    .burger i { left: 13px; right: 13px; }
    .burger i:nth-child(1) { top: 16px; }
    .burger i:nth-child(2) { top: 21px; }
    .burger i:nth-child(3) { top: 26px; }
    .theme-toggle { width: 44px; height: 44px; }
  }
  @media (min-width: 761px) and (max-width: 1100px) {
    .pill { width: calc(100% - 40px); }
    .topbar { top: 16px; }
  }

  /* Voro-Funktionen mobil und Tablet als gleich grosses Kachelraster:
     jede Kachel gleich breit und hoch, Haken oben, Text darunter.
     Freie Chips wirkten wie ein ungeordneter Haufen. */
  @media (max-width: 860px) {
    .voro-list { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 8px; width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }
    /* Raster in jeder Kachel: Haken immer auf gleicher Hoehe, Text in fester Zweizeilen-Hoehe mittig */
    .voro-list li { display: grid; grid-template-rows: 18px 2.6em; justify-items: center; align-items: center; gap: 6px; padding: 12px 10px; border-radius: 14px;
      font-size: .86rem; line-height: 1.3; text-align: center; white-space: normal;
      background: rgba(20,184,166,.08); border: 1px solid rgba(20,184,166,.24); }
    .voro-list li i { margin: 0; }
    /* Fortschrittsbalken der Produkte mittig und mit Abstand zur Karte */
    .media-wrap { bottom: calc(118px + env(safe-area-inset-bottom)); height: min(44vh, calc(57vh - 128px)); }
    .steps-rail { left: 50%; transform: translateX(-50%); bottom: calc(92px + env(safe-area-inset-bottom)); }
  }
  @media (min-width: 561px) and (max-width: 860px) {
    .voro-list { grid-template-columns: repeat(4, 1fr); }
  }

  /* ---- Barrierefreiheit (UI-Check 09.10.) ---- */
  :root[data-theme="light"] a.breit i { color: #0E7490; }
  :root[data-theme="light"] .iv-kicker { color: #1D5FC2; }
  :root { --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; }
  /* Rahmen von Burger und Hell/Dunkel-Schalter mit mindestens 3:1 */
  :root .burger, :root .theme-toggle { border-color: #687184; }
  :root[data-theme="light"] .burger, :root[data-theme="light"] .theme-toggle { border-color: #7A8394; }
  :root .theme-toggle:hover { border-color: var(--accent); }
  /* Menue offen: Seite dahinter scrollt nicht */
  .nav-offen, .nav-offen body { overflow: hidden; }
  /* Platzhalter im Chat-Nachbau lesbar */
  .pa-input { color: #C3CBDB; }
  /* "Ansehen" im hellen Modus dunkler, damit die Produktfarbe lesbar bleibt */
  :root[data-theme="light"] .stack-item a { color: color-mix(in srgb, var(--pc, var(--accent)) 50%, #0B0E16); }
  /* Platzhalter im Chat-Fenster der Abschluss-Szene */
  #dc-platz { color: #9AA4B8; }
  /* Akzent-Links im hellen Modus: dunkleres Blau, sonst nur 2,6:1 */
  :root[data-theme="light"] .faq-eyebrow,
  :root[data-theme="light"] .faq-answer-inner a,
  :root[data-theme="light"] .kontakt-hinweis a { color: #1D5FC2; }
  /* Touch-Ziele bis 1100 px mindestens 44 px */
  @media (max-width: 1100px) {
    .brand { box-sizing: content-box; padding-block: 10px; }
    .stack-item a { min-height: 44px; margin-top: 4px; }
    .fuss nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; }
  }

  /* Mobil-Test 12.10.: Tippflaechen auf Touch-Geraeten (iPad quer mit Desktop-Leiste), fester Knopf bei Handy quer aus */
  /* Kopfleiste nur, wo die Desktop-Leiste steht (ab 1101 px), sonst blendet display die Handy-Leiste um */
  @media (hover: none) and (pointer: coarse) and (min-width: 1101px) {
    .menu a, .menu-drop > a { min-height: 44px; display: inline-flex; align-items: center; }
    .topbar .actions .btn { min-height: 44px; }
  }
  @media (hover: none) and (pointer: coarse) {
    .theme-toggle { min-width: 44px; min-height: 44px; }
    .fuss nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
    .stack-item a, .ub-steckbrief dd a, .ub-schluss-btns a { display: inline-flex; align-items: center; min-height: 44px; }
  }
  @media (max-height: 500px) and (orientation: landscape) { .cta-fest { display: none; } }

  /* ===== Leere Bildschirme (12.10.) =====
     Die FAQ schiebt sich unter das Zahlen-Band, statt eine leere Bildschirmhaelfte zu lassen. */
  @media (prefers-reduced-motion: no-preference) {
    .szene-zl { margin-bottom: -40vh; }
    .faq { position: relative; z-index: 3; }
  }
  /* ===== Handy quer (niedrige Hoehe): Produkte zweispaltig, Zahlen passen ins Bild ===== */
  @media (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
    .stack-wrap { top: 72px; bottom: 0; height: auto; left: 0; right: 50%; padding: 0 12px 0 max(20px, env(safe-area-inset-left)); }
    .stack { left: max(20px, env(safe-area-inset-left)); right: 12px; }
    .stack-item { padding: 6px 0 12px; }
    .stack-item h2 { font-size: 1.3rem; margin: 6px 0 6px; }
    .stack-item p { font-size: .84rem; line-height: 1.45; }
    .stack-item a { margin-top: 8px; }
    .media-wrap { left: 50%; right: max(14px, env(safe-area-inset-right)); top: 76px; bottom: 14px; height: auto; }
    .media-in { padding: 40px 14px 12px; gap: 8px; }
    .steps-rail { left: max(20px, env(safe-area-inset-left)); bottom: 12px; }
    .zl-num { font-size: min(30vw, 40vh); } .zl-num.zl-num--wort { font-size: min(14vw, 22vh); }
    .zl-stat { top: 46%; gap: 8px; }
    .zl-index { top: 80px; }
    .zl-reihe { bottom: 5vh; padding: 14px 10px; }
    .zl-znum { font-size: 1.5rem; }
    .db-wort { font-size: min(11vw, 22vh); }
    .db-wort-l { top: 24%; } .db-wort-r { top: 62%; }
  }
  /* Kontaktformular: Fehlermeldung als Text */
  .kf-fehler { margin: 0 0 12px; font-size: .92rem; line-height: 1.45; color: #FCA5A5; }
  [data-theme="light"] .kf-fehler { color: #B91C1C; }

  /* Fester Knopf: ausgeblendet auch nicht per Tab erreichbar */
  .cta-fest { visibility: hidden; transition: opacity var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out), visibility 0s linear var(--dur-s); }
  .cta-fest.an { visibility: visible; transition: opacity var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out), visibility 0s; }
  .nav-offen .cta-fest { visibility: hidden; }
  .schritt h3:focus { outline: none; }
  /* Produkte-Menue in der Kopfleiste */
  .menu-drop { position: relative; }
  .menu-drop-panel { position: absolute; left: 50%; top: calc(100% + 14px); width: 520px; transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; border-radius: 18px; background: rgba(16,20,30,.96); border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(16px); box-shadow: 0 30px 70px rgba(0,0,0,.5); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); z-index: 80; }
  .menu-drop-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
  .menu-drop:hover .menu-drop-panel, .menu-drop:focus-within .menu-drop-panel { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
  .menu-drop-panel a { display: grid !important; grid-template-columns: 38px 1fr; gap: 2px 12px; align-items: center; padding: 10px !important; border-radius: 12px; opacity: 1 !important; }
  .menu-drop-panel a:hover { background: rgba(255,255,255,.06); }
  .menu-drop-panel img { grid-row: span 2; width: 38px; height: 38px; border-radius: 10px; }
  .menu-drop-panel b { font-size: .92rem; color: #ECEEF2; } .menu-drop-panel small { font-size: .78rem; color: #A8B2C8; }
  .menu-drop-panel .breit { grid-column: 1 / -1; background: rgba(255,255,255,.03); }
  .menu-drop-panel .breit i { grid-row: span 2; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(103,232,249,.12); color: #67E8F9; font-style: normal; font-weight: 700; }
  [data-theme="light"] .menu-drop-panel { background: rgba(255,255,255,.97); border-color: rgba(8,11,18,.08); }
  [data-theme="light"] .menu-drop-panel b { color: #0B1220; } [data-theme="light"] .menu-drop-panel small { color: #4E5D78; }
  [data-theme="light"] .menu-drop-panel a:hover { background: rgba(8,11,18,.05); }


  .sprunglink { position: absolute; left: 12px; top: -80px; z-index: 1000; padding: 12px 18px; border-radius: 12px; background: #4F9CF9; color: #080B12; font-weight: 600; text-decoration: none; }
  .sprunglink:focus { top: 12px; }