/* ============================================================
     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; }
  .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: 26px;
    transform: translateX(-50%);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-soft);
    opacity: 0.6;
    pointer-events: none;
  }

  /* ---- 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) {
    .claim, .flow { height: auto; }
    .claim-sticky, .flow-sticky { position: static; height: auto; padding: 90px 0; }
    .claim-text w { color: var(--text); }
    .flow-track { flex-wrap: wrap; padding: 0 4vw; }
    .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; }

  @media (prefers-reduced-motion: reduce) {
    .steps { height: auto; }
    .steps-sticky { position: static; height: auto; padding: 80px 0; }
    [data-reveal] { opacity: 1; transform: none; }
  }

  /* ---- 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; }

  @media (prefers-reduced-motion: reduce) {
    .stage { height: 100vh; }
  }

  /* ---- 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: 760px) {
    /* 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); }

  /* 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: 760px) {
    /* 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: 760px) {
    /* 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; }
  }
  @media (prefers-reduced-motion: reduce) {
    .voro { height: auto; }
    .voro-sticky { position: static; height: auto; padding: 80px 0; }
    .voro-inner { height: auto; }
  }

  /* ============================================================
     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: 760px) {
    .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: 760px) {
    .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; }

  @media (prefers-reduced-motion: reduce) {
    .gx { opacity: 1; transform: none; }
    .cv-vergleich { --cv: 1; }
  }

  /* ---- 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 main { padding: 16px 58px 16px 16px; }   /* rechts liegt das iPhone davor */
  .ma-webin h4 { 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 h5 { 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 h5 { 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: 760px) {
    .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: 760px) {
    .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: 760px) {
    .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: 760px) {
    [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; }
  .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: 760px) {
    .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 .db-chips { justify-content: center; }
    .iv-h { font-size: clamp(1.9rem, 1rem + 5vw, 2.5rem); }
    .iv-rest { margin-top: 18px; gap: 24px; }
    .iv-rest .db-chips { display: flex; }
    .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; }
  }
  @media (prefers-reduced-motion: reduce) {
    .szene-db, .szene-iv { height: auto; }
    .szene-sticky { position: relative; height: auto; min-height: 100vh; }
    .iv-zeile, .iv-z { --p: 120%; }
    .db-wort, .db-tile { display: none; }
  }

  .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-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: 760px) {
    .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-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) {
    .szene-zl { height: auto; }
    .zl-stat, .zl-index, .zl-wort { display: none; }
    .zl-reihe { position: relative; left: auto; bottom: auto; margin: 12vh auto; }
    .assistent::before { animation: none; }
  }

  /* ============================================================
     Unterseite "Über": Kopfleiste steht sofort, kein Hero-Morph
     ============================================================ */
  .unterseite .topbar .pill { opacity: 1; transform: none; }
  .unterseite .brand img { opacity: 1; }
  .menu a.ist-hier { opacity: 1; background: rgba(79,156,249,.14); color: var(--accent); }
  .ub { position: relative; background: var(--bg); color: var(--text); overflow-x: clip; }
  .ub-wrap { width: min(1200px, 100% - 48px); margin: 0 auto; }
  .ub-sek { position: relative; padding: clamp(90px, 12vw, 160px) 0; }
  .ub-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
  .ub-eyebrow::before { content: ""; width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(115deg, #4F9CF9, #67E8F9); }
  .ub h1, .ub h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; color: var(--text); }
  .ub h2 { font-size: clamp(2.2rem, 1.1rem + 3.4vw, 4.2rem); margin: 18px 0 18px; }
  .ub-kopf { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
  .ub-kopf p { color: var(--text-soft); font-size: 1.1rem; line-height: 1.6; }
  .ub-grad { background: linear-gradient(120deg, #818CF8, #4F9CF9 48%, #67E8F9); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .sl-line { will-change: transform; }

  /* ---------- Kopf ---------- */
  .ub-hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 130px 0 90px; }
  .ub-hero-glow { position: absolute; inset: -10%; pointer-events: none;
    background: radial-gradient(40% 45% at 72% 48%, rgba(79,156,249,.22), transparent 70%), radial-gradient(35% 40% at 20% 30%, rgba(129,140,248,.12), transparent 70%); }
  /* ganzes Wort mit Unterlaenge sichtbar, sonst liest es sich als "Mituvo" */
  .ub-hero-wort { position: absolute; left: 50%; bottom: 1vw; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
    font-family: var(--font-display); font-weight: 700; font-size: 19vw; line-height: 1.05; letter-spacing: -.04em;
    color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.05); }
  /* Reine Deko: Wort kommt aus CSS, damit es nicht als Lesetext zaehlt */
  .ub-hero-wort::before { content: attr(data-wort); }
  .ub-hero-inner { position: relative; width: min(1200px, 100% - 48px); margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
  .ub-hero h1 { font-size: clamp(2.8rem, 1rem + 5.6vw, 6.4rem); margin: 22px 0 26px; }
  .ub-lead { font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); line-height: 1.6; color: var(--text-soft); max-width: 36ch; }
  /* Fakten als ruhige Zeile: Wert gross, Beschriftung klein, durch feine Linien getrennt (keine Pillen) */
  .ub-hero-fakten { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; margin-top: 38px; }
  .ub-hero-fakten span { display: grid; gap: 4px; padding: 0 26px; font-size: .86rem; line-height: 1.3; color: var(--text-soft); border-left: 1px solid var(--glass-border); }
  .ub-hero-fakten span:first-child { padding-left: 0; border-left: 0; }
  .ub-hero-fakten b { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--text); }

  .ub-d-chrome { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; border-radius: 14px 14px 0 0; background: #171b24; border-bottom: 1px solid rgba(255,255,255,.07); }
  .ub-d-chrome s { width: 7px; height: 7px; border-radius: 50%; background: #FF5F57; } .ub-d-chrome s:nth-child(2) { background: #FEBC2E; } .ub-d-chrome s:nth-child(3) { background: #28C840; }
  .ub-d-chrome span { margin: 0 auto; font-size: 8.5px; color: #A8B2C8; padding-right: 30px; }
  /* Kopf rechts: eine grosse, gerade Produktansicht, vollstaendig sichtbar */
  /* min-width 0: sonst drueckt die Bildbreite (2560 px) die Spalte ueber den Rand */
  .ub-schau { position: relative; min-width: 0; display: grid; gap: 28px; justify-items: center; }
  .ub-schau-fenster { width: 100%; max-width: 640px; }
  .ub-schau-fenster { margin: 0; border-radius: 14px; overflow: hidden; background: #0a0d12;
    border: 1px solid rgba(255,255,255,.09); box-shadow: 0 60px 120px -30px rgba(0,0,0,.7), 0 40px 120px -50px rgba(79,156,249,.45); }
  .ub-schau-fenster .ub-d-chrome { height: 30px; border-radius: 0; padding: 0 14px; gap: 7px; }
  .ub-schau-fenster .ub-d-chrome s { width: 10px; height: 10px; }
  .ub-schau-fenster .ub-d-chrome span { font-size: 12px; }
  .ub-schau-fenster img { display: block; width: 100%; height: auto; }
  .ub-schau-apps { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
  .ub-schau-apps li { display: grid; justify-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--text-soft); }
  .ub-schau-apps small { display: block; font-size: .72rem; font-weight: 500; text-align: center; }
  .ub-schau-apps img { width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.4); }
  .ub-cue { position: absolute; left: 50%; bottom: 28px; width: 24px; height: 38px; margin-left: -12px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.25); }
  .ub-cue i { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--text); animation: ubCue 1.8s var(--ease-in-out) infinite; }
  @keyframes ubCue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

  /* ---------- Aussage ---------- */
  .ub-aussage { position: relative; height: 260vh; }
  .ub-aussage-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; width: min(1200px, 100% - 48px); margin: 0 auto; gap: 28px; }
  .ub-aussage-text { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, .6rem + 5vw, 5.4rem); line-height: 1.06; letter-spacing: -.035em; }
  .ub-aussage-text em { font-style: normal; }
  .ub-aussage-text c { color: rgba(236,238,242,.13); transition: color .15s linear; }
  .ub-aussage-text c.an { color: var(--text); }
  .ub-aussage-text em c.an { color: #67E8F9; }

  /* ---------- Familie ---------- */
  .ub-karten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; perspective: 1400px; }
  .ub-karte { --mx: 50%; --my: 0%; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 24px; border-radius: 22px;
    text-decoration: none; color: var(--text); background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(12px);
    transition: border-color .4s var(--ease-out); }
  .ub-karte::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease-out);
    background: radial-gradient(360px circle at var(--mx) var(--my), color-mix(in srgb, var(--pc) 22%, transparent), transparent 60%); }
  .ub-karte:hover { border-color: color-mix(in srgb, var(--pc) 55%, transparent); }
  .ub-karte:hover::before { opacity: 1; }
  .ub-karte > * { position: relative; }
  .ub-karte img { width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 30px -6px var(--pc); }
  .ub-karte b { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; margin-top: 6px; }
  .ub-karte p { color: var(--text-soft); line-height: 1.55; font-size: .96rem; flex: 1; }
  .ub-karte span { font-size: .88rem; font-weight: 600; color: var(--pc); }
  .ub-karte-breit { grid-column: span 3; flex-direction: row; align-items: center; gap: 22px; padding: 28px; }
  .ub-karte-breit p { flex: none; max-width: 62ch; margin-top: 6px; }
  .ub-karte-breit > span { margin-left: auto; white-space: nowrap; }
  .ub-karte-ic { flex: 0 0 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; background: rgba(103,232,249,.12); box-shadow: inset 0 0 0 1px rgba(103,232,249,.35); }
  .ub-karte-ic svg { width: 26px; height: 26px; fill: none; stroke: #67E8F9; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ub-karte-voro { background: linear-gradient(160deg, rgba(20,184,166,.14), rgba(20,184,166,.03)); border-color: rgba(20,184,166,.3); }
  .ub-karte-voro em { font-style: normal; font-family: var(--font-body); font-size: .72rem; font-weight: 700; margin-left: 8px; padding: 3px 9px; border-radius: 999px; vertical-align: middle; background: rgba(20,184,166,.2); color: #5EEAD4; }

  /* ---------- Person ---------- */
  .ub-person-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
  .ub-foto { margin: 0; position: relative; }
  .ub-foto-bild { position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; display: grid; place-items: center;
    background: radial-gradient(70% 60% at 30% 20%, rgba(79,156,249,.35), transparent 70%), radial-gradient(60% 60% at 90% 90%, rgba(103,232,249,.22), transparent 70%), #0e1422;
    border: 1px solid rgba(255,255,255,.1); box-shadow: 0 50px 120px -40px rgba(79,156,249,.5); }
  .ub-initialen { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 2rem + 6vw, 8rem); letter-spacing: -.05em; color: rgba(255,255,255,.14); }
  .ub-platzhalter-alt, .ub-platzhalter-text-alt { display: inline-block; margin-top: 14px; padding: 6px 12px; border-radius: 8px; font-size: .82rem; font-weight: 600;
    color: #FBBF24; background: rgba(245,158,11,.1); border: 1px dashed rgba(245,158,11,.5); }
  .ub-platzhalter-text { display: block; margin: 20px 0 0; line-height: 1.55; font-weight: 500; }
  .ub-person-lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); line-height: 1.55; color: var(--text); }
  .ub-steckbrief { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 34px; border-radius: 18px; overflow: hidden; background: var(--glass-border); border: 1px solid var(--glass-border); }
  .ub-steckbrief div { padding: 18px 20px; background: var(--bg); }
  .ub-steckbrief dt { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 6px; }
  .ub-steckbrief dd { margin: 0; font-weight: 600; }
  .ub-steckbrief a { color: var(--accent); text-decoration: none; }

  .ub-foto { width: 100%; }
  @media (min-width: 901px) {
    .ub-person-grid { align-items: start; }
    .ub-foto { position: sticky; top: 14vh; }
  }
  .ub-foto-bild { aspect-ratio: 4 / 4.6; place-items: end center; overflow: hidden; }
  .ub-foto-bild img { position: relative; width: 112%; max-width: none; height: auto; margin-bottom: -2%; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
  .ub-foto-ring { position: absolute; left: 50%; top: 44%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
    border: 1px solid rgba(103,232,249,.35); box-shadow: 0 0 80px rgba(79,156,249,.35), inset 0 0 60px rgba(79,156,249,.2); }
  .ub-foto-tag { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-size: .88rem; font-weight: 600; color: #ECEEF2;
    background: rgba(18,22,32,.78); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); box-shadow: 0 18px 40px rgba(0,0,0,.4); white-space: nowrap; }
  .ub-foto-tag i { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 10px #4ADE80; }
  .ub-foto-tag svg { width: 15px; height: 15px; fill: none; stroke: #67E8F9; stroke-width: 1.8; }
  .ub-foto-tag-1 { left: -6%; top: 16%; } .ub-foto-tag-2 { right: -5%; bottom: 20%; }
  .ub-person-p { color: var(--text-soft); line-height: 1.7; margin-top: 16px; }
  .ub-weg { list-style: none; margin: 30px 0 0; padding: 0 0 0 22px; position: relative; display: grid; gap: 14px; }
  .ub-weg::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
    background: linear-gradient(180deg, #67E8F9, #4F9CF9 35%, rgba(255,255,255,.12) 60%); }
  .ub-weg li { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: baseline; }
  .ub-weg li::before { content: ""; position: absolute; left: -22px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid rgba(255,255,255,.3); }
  .ub-weg li.an::before { border-color: #67E8F9; background: #67E8F9; box-shadow: 0 0 12px rgba(103,232,249,.7); }
  .ub-weg time { font-size: .85rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
  .ub-weg b { font-weight: 600; }
  .ub-weg b small { display: block; margin-top: 2px; font-size: .86rem; font-weight: 400; color: var(--text-soft); }
  .ub-weg-kopf { margin-top: 30px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--text); }
  .ub-weg-kopf + .ub-weg { margin-top: 18px; }
  .ub-weg li:not(.an) b { font-weight: 500; color: var(--text-soft); }

  .ub-aifirst { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; margin-bottom: 16px; padding: 34px 36px; border-radius: 24px;
    background: linear-gradient(120deg, rgba(129,140,248,.14), rgba(79,156,249,.10) 50%, rgba(103,232,249,.10)); border: 1px solid rgba(79,156,249,.25); }
  .ub-aifirst-tag { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #67E8F9; }
  .ub-aifirst b { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: 600; margin: 8px 0 10px; }
  .ub-aifirst p { color: var(--text-soft); line-height: 1.65; }
  .ub-ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .ub-ablauf li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; font-weight: 600; font-size: .95rem;
    background: rgba(8,11,18,.35); border: 1px solid rgba(255,255,255,.08); }
  .ub-ablauf i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-size: .8rem; font-weight: 700;
    background: linear-gradient(135deg, #4F9CF9, #67E8F9); color: #06121f; }

  /* ---------- Prinzipien ---------- */
  .ub-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 90px); }
  .ub-liste li { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; padding: 30px 0 34px; }
  .ub-linie { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255,255,255,.12); transform-origin: 0 50%; }
  .ub-nr { grid-row: span 2; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--accent); padding-top: 6px; }
  .ub-liste b { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + .7vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; }
  .ub-liste p { color: var(--text-soft); line-height: 1.6; margin-top: 8px; }

  /* ---------- Technik ---------- */
  .ub-technik { padding-top: 0; }
  .ub-band { overflow: hidden; border-block: 1px solid rgba(255,255,255,.07); padding: 26px 0; margin-bottom: clamp(80px, 10vw, 140px); }
  .ub-band-lauf { display: flex; width: max-content; animation: beltL 40s linear infinite; }
  .ub-band-lauf span { display: inline-flex; align-items: center; gap: 22px; padding: 0 22px; font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem); letter-spacing: -.02em; color: var(--text-soft); white-space: nowrap; }
  .ub-band-lauf span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: .6; }
  .ub-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .ub-gruppe { position: relative; padding: 26px 24px; border-radius: 22px; background: var(--glass-bg); border: 1px solid var(--glass-border); overflow: hidden; }
  .ub-gruppe::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--pc), transparent); }
  .ub-gruppe-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--pc) 16%, transparent); margin-bottom: 16px; }
  .ub-gruppe-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--pc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ub-gruppe > b { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
  .ub-gruppe ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
  .ub-gruppe li { font-weight: 600; font-size: .98rem; }
  .ub-gruppe small { display: block; font-weight: 400; font-size: .86rem; color: var(--text-soft); margin-top: 2px; }

  /* ---------- Abschluss ---------- */
  .ub-schluss { padding-top: 0; }
  .ub-schluss-band { position: relative; overflow: hidden; text-align: center; border-radius: 28px; padding: clamp(50px, 8vw, 110px) clamp(22px, 5vw, 60px);
    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); }
  .ub-schluss-band::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(70% 60% at 50% -10%, rgba(79,156,249,.3), transparent 60%), radial-gradient(60% 60% at 100% 110%, rgba(103,232,249,.18), transparent 60%); }
  .ub-schluss-band > * { position: relative; }
  .ub-schluss-band .ub-eyebrow { justify-content: center; }
  .ub-schluss-band p { color: var(--text-soft); font-size: 1.1rem; }
  .ub-schluss-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
  .ub-btn-line { display: inline-flex; align-items: center; padding: 14px 24px; border-radius: 12px; text-decoration: none; font-weight: 600; color: var(--text); border: 1px solid rgba(255,255,255,.2); }

  /* ---------- Hellmodus ---------- */
  [data-theme="light"] .ub-hero-wort { -webkit-text-stroke-color: rgba(8,11,18,.07); }
  [data-theme="light"] .ub-aussage-text c { color: rgba(11,18,32,.14); }
  [data-theme="light"] .ub-aussage-text em c.an { color: #0B5CFF; }
  [data-theme="light"] .ub-linie { background: rgba(8,11,18,.12); }
  [data-theme="light"] .ub-band { border-color: rgba(8,11,18,.08); }

  [data-theme="light"] .ub-btn-line { border-color: rgba(8,11,18,.2); }
  [data-theme="light"] .ub-cue { border-color: rgba(8,11,18,.25); }
  [data-theme="light"] .ub-karte-breit { --pc: #0891B2; }
  [data-theme="light"] .ub-weg li::before { border-color: rgba(8,11,18,.25); }
  [data-theme="light"] .ub-ablauf li { background: rgba(255,255,255,.7); border-color: rgba(8,11,18,.08); }
  [data-theme="light"] .ub-aifirst-tag { color: #0891B2; }
  [data-theme="light"] .ub-karte-ic svg { stroke: #0891B2; }
  [data-theme="light"] .ub-karte-voro em { color: #0F766E; background: rgba(20,184,166,.16); }
  [data-theme="light"] .ub-aussage-text em c.an, [data-theme="light"] .ub-grad { }

  /* ---------- Hochkant ---------- */
  @media (max-width: 900px) {
    .ub-hero-inner { grid-template-columns: 1fr; text-align: center; }
    .ub-hero-text .ub-eyebrow { justify-content: center; }
    .ub-lead { margin: 0 auto; }
    .ub-hero-fakten { justify-content: center; }
    .ub-schau { margin-top: 12px; justify-items: center; }
    .ub-schau-fenster { width: 100%; border-radius: 12px; }
    .ub-schau-apps { gap: 14px; justify-content: center; }
    .ub-schau-apps img { width: 44px; height: 44px; border-radius: 12px; }
    .ub-karten { grid-template-columns: 1fr 1fr; }
    .ub-karte-breit { grid-column: span 2; flex-direction: column; align-items: flex-start; }
    .ub-karte-breit > span { margin-left: 0; }
    .ub-karte-voro { grid-column: span 2; }
    .ub-person-grid { grid-template-columns: 1fr; }
    .ub-foto { width: min(340px, 80%); margin: 0 auto; }
    .ub-liste { grid-template-columns: 1fr; }
    .ub-aifirst { grid-template-columns: 1fr; padding: 26px 22px; }
    .ub-foto-tag-1 { left: 0; } .ub-foto-tag-2 { right: 0; }
    .ub-stack { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .ub-wrap, .ub-hero-inner, .ub-aussage-sticky { width: calc(100% - 40px); }
    .ub-hero { padding-top: 110px; }
    /* Handy: Produktfamilie und Technik als wischbares Band statt sechs gestapelter Kaesten */
    .ub-stack { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
      margin: 0 -20px; padding: 4px 20px 6px; scroll-padding-inline: 20px; scrollbar-width: none; perspective: none; }
    .ub-stack::-webkit-scrollbar { display: none; }
    .ub-stack > * { scroll-snap-align: start; }
    .ub-karte-breit, .ub-karte-voro { grid-column: auto; }
    .ub-band-leiste { position: relative; height: 2px; margin-top: 18px; border-radius: 2px; background: color-mix(in srgb, var(--text) 14%, transparent); overflow: hidden; }
    .ub-band-leiste i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 30%); transform: translateX(var(--x, 0)); background: var(--accent); border-radius: 2px; }
    .ub-steckbrief { grid-template-columns: 1fr; }
    .ub-weg li { grid-template-columns: 1fr; gap: 2px; }
    .ub-hero-fakten span { font-size: .78rem; padding: 0 12px; }
    .ub-hero-fakten b { font-size: 1.4rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ub-aussage { height: auto; } .ub-aussage-sticky { position: relative; height: auto; padding: 100px 0; }
    .ub-aussage-text c { color: var(--text); }
    .ub-band-lauf { animation: none; }
  }
  /* ============================================================
     Über-Seite mobil und Tablet hochkant: alles mittig, Buttons breit
     (websites.md §6d / policies/mobile.md)
     ============================================================ */
  @media (max-width: 860px) {
    .ub-sek { padding: 64px 0; }
    .ub-eyebrow { flex-direction: column; justify-content: center; align-items: center; gap: 10px; text-align: center; display: flex; }
    .ub-eyebrow::before { width: 28px; }
    .ub :is(h1, h2, .ub-kopf, .ub-kopf p, .ub-lead, .ub-aussage-sticky, .ub-person-text, .ub-person-lead, .ub-person-p, .ub-weg-kopf, .ub-schluss-band, .ub-aifirst-text) { text-align: center; margin-left: auto; margin-right: auto; }
    .ub-aussage-sticky { align-items: center; }
    .ub-hero-fakten { justify-content: center; }
    .ub-hero-fakten span { text-align: center; }
    .ub-karte, .ub-karte-breit { align-items: center; text-align: center; }
    .ub-karte-breit { flex-direction: column; }
    .ub-karte-breit > span { margin-left: 0; }
    .ub-karte img, .ub-karte-ic { margin: 0 auto; }
    .ub-person-grid { grid-template-columns: 1fr; }
    .ub-foto { width: min(360px, 80%); margin: 0 auto; position: relative; top: 0; }
    /* Zeitleiste: Punkt ueber dem Eintrag, alles mittig */
    .ub-weg { padding: 0; justify-items: center; }
    .ub-weg::before { display: none; }
    .ub-weg li { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 2px; padding-top: 18px; }
    .ub-weg li::before { left: 50%; top: 0; transform: translateX(-50%); }
    .ub-steckbrief div { text-align: center; }
    .ub-liste li { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .ub-nr { grid-row: auto; padding-top: 0; }
    .ub-aifirst { text-align: center; }
    .ub-gruppe { text-align: center; }
    .ub-gruppe-ic { margin-left: auto; margin-right: auto; }
    .ub-schluss-btns { flex-direction: column; align-items: stretch; }
    .ub-schluss-btns a { justify-content: center; }
  }
  @media (min-width: 561px) and (max-width: 860px) {
    .ub-wrap { width: min(720px, 100% - 64px); }
    .ub-schluss-btns { width: min(440px, 100%); margin-left: auto; margin-right: auto; }
  }

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

  /* ---- Heller Modus Ueber-Seite (09.10.): Akzentblau als Schrift dunkler ---- */
  :root[data-theme="light"] :is(.ub .ub-eyebrow, .ub-nr, .ub-steck dd a, dd a, .menu a.ist-hier, .ub-hero-fakten b) { color: #1D5FC2; }
  :root[data-theme="light"] .ub-karte span { color: color-mix(in srgb, var(--pc) 58%, #0B1220); }
  :root[data-theme="light"] .ub-aifirst-tag { color: #0E7490; }
  :root[data-theme="light"] a.breit i { color: #0E7490; }
  /* Etiketten an Geraeten und Foto: im hellen Modus fast deckend, sonst grau */
  :root[data-theme="light"] .ub-foto-tag { background: rgba(14,18,28,.96); }
  /* ---- Barrierefreiheit (UI-Check 09.10., gilt auch fuer die Produktseiten) ---- */
  :root { --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; }
  :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); }
  .nav-offen, .nav-offen body { overflow: hidden; }
  .sheet-note { text-align: center; }
  @media (max-width: 1100px) {
    .brand { box-sizing: content-box; padding-block: 10px; }
    .fuss nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; }
    .ub dd a { display: inline-flex; align-items: center; min-height: 44px; }
  }

  /* 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; } }
  /* Hochkant: Kopf so hoch wie sein Inhalt, keine leere Flaeche mit Schriftzug-Rest und Scroll-Symbol */
  @media (max-width: 900px) {
    .ub-hero { min-height: 0; padding-bottom: 56px; }
    .ub-hero-wort, .ub-cue { display: none; }
  }
  /* Aussage-Szene hochkant: kuerzere Strecke, auf dem Tablet groessere Schrift statt halbleerem Bild */
  @media (max-width: 1100px) and (orientation: portrait) { .ub-aussage { height: 190vh; } }
  @media (min-width: 561px) and (max-width: 1100px) and (orientation: portrait) { .ub .ub-aussage-sticky .ub-aussage-text { font-size: clamp(2.6rem, 1rem + 4.6vw, 4.4rem); } }
  /* Handy: Ablauf als Liste mit Ziffern in einer Linie, Block mittig, keine Einzelkaesten */
  @media (max-width: 860px) {
    .ub-ablauf { width: fit-content; max-width: 100%; margin: 6px auto 0; gap: 0; }
    .ub-ablauf li { position: relative; justify-content: flex-start; gap: 14px; padding: 9px 0; background: none; border: 0; text-align: left; }
    .ub-ablauf li:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: 37px; bottom: -9px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--text) 16%, transparent); }
    [data-theme="light"] .ub-ablauf li { background: none; }
  }
  .ub-karte-kurz { display: none; }
  /* Handy: Produktfamilie als 2x2-Raster kompakter Kacheln, die ganze Kachel ist der Link */
  @media (max-width: 560px) {
    .ub-karten { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ub-karten .ub-karte { justify-content: center; align-items: center; gap: 6px; padding: 18px 10px 16px; border-radius: 18px; text-align: center; }
    .ub-karten .ub-karte img { width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 4px; }
    .ub-karten .ub-karte b { font-size: 1rem; margin-top: 0; }
    .ub-karten .ub-karte:not(.ub-karte-breit):not(.ub-karte-voro) > p, .ub-karten .ub-karte:not(.ub-karte-breit) > span { display: none; }
    .ub-karte-kurz { display: block; font-size: .8rem; line-height: 1.35; color: var(--text-soft); }
    .ub-karten .ub-karte-breit, .ub-karten .ub-karte-voro { grid-column: 1 / -1; padding: 20px 18px; }
    .ub-karten .ub-karte-breit p, .ub-karten .ub-karte-voro p { font-size: .9rem; flex: none; }
    .ub-karten .ub-karte-ic { width: 44px; height: 44px; flex: none; border-radius: 12px; margin: 0 auto 4px; }
  }
  @media (max-width: 360px) {
    .ub-karten .ub-karte b { font-size: .92rem; }
    .ub-karte-kurz { font-size: .74rem; hyphens: none; }
  }

  /* 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; }

  /* ============================================================
     Produktseiten (pp-): gemeinsame Vorlage, Farbe je Produkt ueber --pc
     ============================================================ */
  .pp { --pc: #4F9CF9; --pc2: #67E8F9; }
  .pp .ub-eyebrow { color: var(--pc); }
  .pp .ub-eyebrow::before { background: linear-gradient(115deg, var(--pc), var(--pc2)); }
  .pp-grad { background: linear-gradient(120deg, var(--pc), var(--pc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .pp .szene-btn { background: var(--pc); color: #0b0d14; }
  .pp-p { color: var(--text-soft); font-size: 1.08rem; line-height: 1.65; margin-top: 14px; }
  .pp-klein { margin-top: 18px; text-align: center; color: var(--text-soft); font-size: .9rem; }

  /* Kopf */
  .pp-hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 130px 0 90px; }
  .pp-hero-glow { position: absolute; inset: -10%; pointer-events: none;
    background: radial-gradient(40% 45% at 72% 50%, color-mix(in srgb, var(--pc) 26%, transparent), transparent 70%), radial-gradient(30% 35% at 15% 25%, color-mix(in srgb, var(--pc2) 12%, transparent), transparent 70%); }
  .pp-hero-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(55% 60% at 70% 50%, #000, transparent 75%); mask-image: radial-gradient(55% 60% at 70% 50%, #000, transparent 75%); }
  .pp-hero-inner { position: relative; width: min(1200px, 100% - 48px); margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; }
  .pp-app-ic { width: 64px; height: 64px; border-radius: 18px; margin-bottom: 22px; box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 50px -8px var(--pc); }
  .pp-hero h1 { font-size: clamp(2.6rem, 1rem + 4.8vw, 5.6rem); margin: 18px 0 24px; }
  .pp-hero h1 span.z { display: block; }
  .pp-lead { font-size: clamp(1.05rem, .95rem + .4vw, 1.28rem); line-height: 1.6; color: var(--text-soft); max-width: 40ch; }
  .pp-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
  .pp-btn-line { display: inline-flex; align-items: center; padding: 14px 24px; border-radius: 12px; text-decoration: none; font-weight: 600; color: var(--text); border: 1px solid rgba(255,255,255,.2); transition: border-color .3s var(--ease-out); }
  .pp-btn-line:hover { border-color: var(--pc); }
  .pp-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: .88rem; color: var(--text-soft); }
  .pp-trust span { display: inline-flex; align-items: center; gap: 7px; }
  .pp-trust span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pc); }
  .pp-vis { position: relative; min-height: 460px; display: grid; place-items: center; }
  .pp-float { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 14px; font-size: .9rem; font-weight: 600; color: #ECEEF2;
    background: rgba(18,22,32,.82); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); box-shadow: 0 20px 44px rgba(0,0,0,.45); white-space: nowrap; animation: ppSchweb 5s ease-in-out infinite; }
  .pp-float i { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 10px var(--pc); }
  .pp-float-1 { left: -4%; top: 16%; } .pp-float-2 { right: -2%; bottom: 14%; animation-delay: -2.5s; } .pp-float-3 { right: 4%; top: 6%; animation-delay: -1.2s; }
  @keyframes ppSchweb { 50% { transform: translateY(-10px); } }

  /* Chat-Visual */
  .pp-dc.dc { position: relative; left: auto; top: auto; width: min(380px, 100%); height: 470px; transform: none; }
  /* Canvas-Visual: ziehbarer Vergleich */
  .pp-vgl { position: relative; width: min(460px, 100%); aspect-ratio: 1; border-radius: 24px; overflow: hidden; touch-action: none; cursor: ew-resize;
    border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 30px 90px -30px var(--pc); }
  .pp-vgl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }
  .pp-vgl-nach { clip-path: inset(0 0 0 var(--split)); }
  .pp-vgl-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); }
  .pp-vgl-tag.l { left: 14px; } .pp-vgl-tag.r { right: 14px; }
  .pp-vgl-griff { position: absolute; top: 0; bottom: 0; left: var(--split); width: 3px; margin-left: -1.5px; padding: 0; border: 0; background: var(--pc); cursor: ew-resize; }
  .pp-vgl-griff svg { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px; padding: 11px; border-radius: 50%; background: var(--pc); fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
  /* Dashboard-Visual */
  .pp-tilt { width: 112%; margin-right: -12%; perspective: 1600px; }
  .pp-browser { border-radius: 14px; overflow: hidden; background: #0a0d12; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 50px 110px rgba(0,0,0,.6), 0 30px 90px -30px var(--pc); }
  .pp-tilt .pp-browser { transform: rotateY(var(--ry, -14deg)) rotateX(var(--rx, 8deg)); transition: transform .8s var(--ease-out); }
  .pp-browser-kopf { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #171b24; border-bottom: 1px solid rgba(255,255,255,.07); }
  .pp-browser-kopf s { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; } .pp-browser-kopf s:nth-child(2) { background: #FEBC2E; } .pp-browser-kopf s:nth-child(3) { background: #28C840; }
  .pp-browser-kopf span { margin: 0 auto; font-size: 11px; color: #A8B2C8; padding-right: 40px; }
  .pp-browser img { display: block; width: 100%; height: auto; }
  /* Links-Visual */
  .pp-phone { width: 250px; padding: 9px; border-radius: 46px; background: linear-gradient(145deg, #6c7484 0%, #2c313d 26%, #9aa3b4 48%, #2c313d 64%, #5d6574 100%);
    box-shadow: 0 50px 100px rgba(0,0,0,.65), 0 30px 90px -30px var(--pc), inset 0 1px 1px rgba(255,255,255,.35); }
  .pp-phone-screen { position: relative; aspect-ratio: 1170 / 2320; border-radius: 38px; overflow: hidden; background: #201623; }
  .pp-phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

  /* Karten, Schritte */
  .pp-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; perspective: 1400px; }
  .pp-karte { --mx: 50%; --my: 0%; position: relative; overflow: hidden; padding: 28px 26px; border-radius: 22px; background: var(--glass-bg); border: 1px solid var(--glass-border); transition: border-color .4s var(--ease-out); }
  .pp-karte::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease-out);
    background: radial-gradient(340px circle at var(--mx) var(--my), color-mix(in srgb, var(--pc) 20%, transparent), transparent 60%); }
  .pp-karte:hover { border-color: color-mix(in srgb, var(--pc) 50%, transparent); } .pp-karte:hover::before { opacity: 1; }
  .pp-karte > * { position: relative; }
  .pp-karte-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; background: color-mix(in srgb, var(--pc) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 35%, transparent); }
  .pp-karte-ic svg { width: 23px; height: 23px; fill: none; stroke: var(--pc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .pp-karte b { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin-bottom: 8px; }
  .pp-karte p { color: var(--text-soft); line-height: 1.6; }
  .pp-problem .pp-karte { background: linear-gradient(160deg, rgba(248,113,113,.07), transparent 60%), var(--glass-bg); }
  .pp-problem .pp-karte-ic { background: rgba(248,113,113,.12); box-shadow: inset 0 0 0 1px rgba(248,113,113,.3); }
  .pp-problem .pp-karte-ic svg { stroke: #F87171; }
  .pp-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: s; position: relative; }
  .pp-schritte::before { content: ""; position: absolute; left: 8%; right: 8%; top: 32px; height: 2px; background: linear-gradient(90deg, var(--pc), var(--pc2)); transform-origin: 0 50%; transform: scaleX(var(--linie, 1)); opacity: .5; }
  .pp-schritte li { position: relative; text-align: center; padding: 0 12px; }
  .pp-schritte li i { position: relative; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700;
    background: var(--bg); color: var(--pc); box-shadow: inset 0 0 0 2px var(--pc), 0 0 30px -6px var(--pc); }
  .pp-schritte b { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; }
  .pp-schritte p { color: var(--text-soft); line-height: 1.6; }

  /* Preise */
  .pp-preise { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 14px; align-items: stretch; }
  .pp-plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border-radius: 22px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
  .pp-plan.top { border-color: var(--pc); background: linear-gradient(170deg, color-mix(in srgb, var(--pc) 16%, transparent), transparent 55%), var(--glass-bg); box-shadow: 0 30px 80px -30px var(--pc); }
  .pp-plan-tag { position: absolute; top: -12px; left: 24px; padding: 4px 11px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--pc); color: #0b0d14; }
  .pp-plan h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
  .pp-plan-preis { margin: 14px 0 4px; font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; letter-spacing: -.03em; }
  .pp-plan-preis small { font-size: .95rem; font-weight: 500; color: var(--text-soft); margin-left: 4px; letter-spacing: 0; }
  .pp-plan-info { color: var(--text-soft); font-size: .92rem; line-height: 1.5; min-height: 2.8em; }
  .pp-plan ul { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 9px; flex: 1; }
  .pp-plan li { position: relative; padding-left: 24px; font-size: .94rem; line-height: 1.45; }
  .pp-plan li::before { content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: color-mix(in srgb, var(--pc) 22%, transparent); }
  .pp-plan li::after { content: ""; position: absolute; left: 5px; top: 6px; width: 4px; height: 7px; border: solid var(--pc); border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .pp-plan a { display: block; text-align: center; padding: 13px; border-radius: 12px; font-weight: 600; text-decoration: none; color: var(--text); border: 1px solid rgba(255,255,255,.18); transition: background .3s, border-color .3s; }
  .pp-plan a:hover { border-color: var(--pc); }
  .pp-plan.top a { background: var(--pc); color: #0b0d14; border-color: var(--pc); }
  .pp-module { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .pp-module div { padding: 26px; border-radius: 20px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
  .pp-module b { display: block; font-family: var(--font-display); font-size: 1.15rem; }
  .pp-module span { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--pc); }

  /* Sonderbereiche */
  .pp-rech { display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; }
  .pp-rech-ein { display: grid; gap: 28px; align-content: center; padding: 32px; border-radius: 22px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
  .pp-rech-ein span { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 12px; }
  .pp-rech-ein span b { color: var(--pc); font-family: var(--font-display); font-size: 1.2rem; }
  /* Regler: Spur in Rahmenfarbe (3:1), gefuellter Teil in Produktfarbe */
  .pp { --spur: #687184; }
  :root[data-theme="light"] .pp { --spur: #7A8394; }
  .pp-rech-ein input { --f: 20%; width: 100%; height: 44px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
  .pp-rech-ein input::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--pc) var(--f), var(--spur) var(--f)); }
  .pp-rech-ein input::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--pc) var(--f), var(--spur) var(--f)); }
  .pp-rech-ein input::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; border: 4px solid var(--pc); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
  .pp-rech-ein input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--pc); }
  /* Tastaturfokus: doppelter Ring am Knopf */
  .pp :is(.pp-rech-ein, .ch-regler) input:focus { outline: none; }
  .pp :is(.pp-rech-ein, .ch-regler) input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #0b0d14, 0 0 0 6px #fff; }
  .pp :is(.pp-rech-ein, .ch-regler) input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #0b0d14, 0 0 0 6px #fff; }
  .pp-rech-ein small { display: flex; justify-content: space-between; font-size: .8rem; color: var(--text-soft); margin-top: 6px; }
  .pp-rech-ein small i { font-style: normal; }
  .pp-rech-aus { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .pp-rech-aus div { padding: 22px; border-radius: 20px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
  .pp-rech-aus small { display: block; font-size: .8rem; color: var(--text-soft); }
  .pp-rech-aus b { display: block; margin: 6px 0 2px; font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .pp-rech-aus em { font-style: normal; font-size: .84rem; color: var(--text-soft); }
  .pp-rech-spar { grid-column: 1 / -1; background: linear-gradient(120deg, color-mix(in srgb, var(--pc) 18%, transparent), transparent) !important; border-color: color-mix(in srgb, var(--pc) 40%, transparent) !important; }
  .pp-rech-spar b { font-size: 3rem; color: var(--pc); }
  .pp-vn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .pp-vn-sp { padding: 28px; border-radius: 22px; border: 1px solid var(--glass-border); background: var(--glass-bg); }
  .pp-vn-sp > b { font-family: var(--font-display); font-size: 1.3rem; }
  .pp-vn-sp ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
  .pp-vn-sp li { position: relative; padding-left: 30px; line-height: 1.5; color: var(--text-soft); }
  .pp-vn-sp li::before { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; }
  .pp-vn-vor li::before { content: "✕"; background: rgba(248,113,113,.16); color: #F87171; }
  .pp-vn-nach { border-color: color-mix(in srgb, var(--pc) 40%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--pc) 12%, transparent), transparent 60%), var(--glass-bg); }
  .pp-vn-nach li { color: var(--text); } .pp-vn-nach li::before { content: "✓"; background: color-mix(in srgb, var(--pc) 22%, transparent); color: var(--pc); }
  .pp-zitat { margin: 28px auto 0; max-width: 820px; text-align: center; font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
  .pp-zitat cite { display: block; margin-top: 14px; font-family: var(--font-body); font-style: normal; font-size: .95rem; font-weight: 500; color: var(--text-soft); }
  .pp-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
  .pp-beispiele { list-style: none; margin: 20px 0 28px; padding: 0; display: grid; gap: 8px; }
  .pp-beispiele li { display: inline-flex; padding: 10px 14px; border-radius: 12px; background: var(--glass-bg); border: 1px solid var(--glass-border); font-weight: 500; width: fit-content; }
  .pp-demo-shot { margin: 0; justify-self: center; width: min(380px, 100%); border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 30px 90px -30px var(--pc); }
  .pp-demo-shot img { display: block; width: 100%; }
  .pp-demo-gross { position: relative; display: block; max-width: 1000px; margin: 0 auto; text-decoration: none; }
  .pp-demo-play { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px 14px 14px; border-radius: 999px;
    font-weight: 700; color: #0b0d14; background: var(--pc); box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 10px color-mix(in srgb, var(--pc) 25%, transparent); transition: box-shadow .4s var(--ease-out); }
  .pp-demo-play i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #0b0d14; }
  .pp-demo-play svg { width: 16px; height: 16px; fill: var(--pc); margin-left: 2px; }
  .pp-demo-gross:hover .pp-demo-play, .pp-demo-play:hover { box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 16px color-mix(in srgb, var(--pc) 30%, transparent); }
  .pp-dock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .pp-dock a { display: grid; gap: 10px; padding: 26px; border-radius: 20px; text-decoration: none; color: var(--text); background: var(--glass-bg); border: 1px solid var(--glass-border); transition: border-color .3s; }
  .pp-dock a:hover { border-color: var(--pc); }
  .pp-dock img { width: 48px; height: 48px; border-radius: 13px; box-shadow: 0 0 26px -6px var(--pc); }
  .pp-dock b { font-family: var(--font-display); font-size: 1.15rem; } .pp-dock span { color: var(--text-soft); }
  .pp-tab-wrap { overflow-x: auto; border-radius: 22px; border: 1px solid var(--glass-border); background: var(--glass-bg); }
  .pp-tab { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .95rem; }
  .pp-tab th, .pp-tab td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--glass-border); }
  .pp-tab th { font-family: var(--font-display); font-size: 1rem; }
  .pp-tab th small { display: block; font-family: var(--font-body); font-size: .8rem; font-weight: 500; color: var(--text-soft); }
  .pp-tab td:first-child { text-align: left; font-weight: 600; }
  .pp-tab .wir { background: color-mix(in srgb, var(--pc) 8%, transparent); }
  .pp-tab thead .wir { color: var(--pc); }
  .pp-tab .ja { color: #4ADE80; } .pp-tab .nein { color: var(--text-soft); opacity: .75; }
  .pp-tab tr:last-child td { border-bottom: 0; font-family: var(--font-display); font-weight: 700; }
  .pp-einbau-box { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 28px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--pc) 16%, transparent), transparent 70%), var(--glass-bg); border: 1px solid color-mix(in srgb, var(--pc) 35%, transparent); }
  .pp-check { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
  .pp-check li { position: relative; padding-left: 28px; font-weight: 500; }
  .pp-check li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; background: color-mix(in srgb, var(--pc) 22%, transparent); color: var(--pc); }
  .pp-einbau-preis { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 30px; border-radius: 22px; background: rgba(8,11,18,.4); border: 1px solid var(--glass-border); }
  .pp-einbau-preis > b { font-family: var(--font-display); font-size: 3.4rem; font-weight: 700; color: var(--pc); line-height: 1; }
  .pp-einbau-preis .szene-btn { margin-top: 10px; white-space: nowrap; }
  .pp-einbau-preis em, .pp-einbau-preis small { font-style: normal; color: var(--text-soft); font-size: .88rem; }
  .pp .faq-inner { width: min(1200px, 100% - 48px); }
  .pp .faq-eyebrow, .pp .faq-item.is-open .faq-nr { color: var(--pc); }
  .pp .faq-eyebrow::before { background: linear-gradient(115deg, var(--pc), var(--pc2)); }
  .pp .faq-item.is-open .faq-icon { background: var(--pc); border-color: var(--pc); }
  .pp-mehr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
  .pp-mehr a { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 18px; text-decoration: none; color: var(--text); background: var(--glass-bg); border: 1px solid var(--glass-border); transition: border-color .3s, transform .3s var(--ease-out); }
  .pp-mehr a:hover { border-color: var(--pc); transform: translateY(-3px); }
  .pp-mehr img { width: 42px; height: 42px; border-radius: 12px; }
  .pp-mehr b { display: block; font-family: var(--font-display); } .pp-mehr span { font-size: .86rem; color: var(--text-soft); }
  .pp .ub-schluss-band { background: linear-gradient(120deg, color-mix(in srgb, var(--pc) 18%, transparent), color-mix(in srgb, var(--pc2) 10%, transparent)); border-color: color-mix(in srgb, var(--pc) 35%, transparent); }
  .pp .ub-schluss-band::before { background: radial-gradient(70% 60% at 50% -10%, color-mix(in srgb, var(--pc) 30%, transparent), transparent 60%); }
  .pp-schluss-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: .88rem; color: var(--text-soft); }

  /* 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); }

  [data-theme="light"] .pp-btn-line { border-color: rgba(8,11,18,.2); }
  [data-theme="light"] .pp-plan a { border-color: rgba(8,11,18,.18); }
  [data-theme="light"] .pp-einbau-preis { background: rgba(255,255,255,.7); }
  [data-theme="light"] .pp-schritte li i { background: #fff; }

  @media (max-width: 900px) {
    .pp-hero-inner { grid-template-columns: 1fr; text-align: center; }
    .pp-hero .ub-eyebrow, .pp-ctas, .pp-trust { justify-content: center; }
    .pp-lead { margin: 0 auto; }
    .pp-app-ic { margin-left: auto; margin-right: auto; }
    .pp-vis { min-height: 0; margin-top: 20px; }
    .pp-tilt { width: 100%; margin: 0; }
    .pp-float-1 { left: 0; } .pp-float-2 { right: 0; }
    .pp-karten, .pp-preise, .pp-module, .pp-dock, .pp-mehr { grid-template-columns: 1fr 1fr; }
    .pp-rech, .pp-vn, .pp-demo-grid, .pp-einbau-box { grid-template-columns: 1fr; }
  }
  @media (max-width: 600px) {
    .pp-hero-inner { width: calc(100% - 40px); }
    .pp-karten, .pp-preise, .pp-module, .pp-dock, .pp-mehr, .pp-schritte { grid-template-columns: 1fr; }
    .pp-schritte::before { display: none; }
    .pp-rech-aus { grid-template-columns: 1fr 1fr; }
    .pp-rech-aus div:nth-child(3) { display: none; }
    .pp-dc.dc { height: 420px; }
    .pp-phone { width: 210px; }
    .pp-vgl { width: 100%; }
    .pp-float { font-size: .78rem; padding: 8px 12px; }
    .pp-float-3 { display: none; }
    .pp-demo-play { font-size: .85rem; padding: 8px 14px 8px 8px; gap: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
    .pp-demo-play i { width: 28px; height: 28px; }
  }

  .pp-schluss-zusatz { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); color: var(--text-soft); font-size: .95rem; }
  .pp-schluss-zusatz a { color: var(--pc); font-weight: 600; text-decoration: none; }

  /* gemeinsam genutzt (vorher nur im Chat-Modul) */
  .ch-plan-tag { position: absolute; top: -12px; left: 22px; padding: 4px 11px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--pc); color: #0b0d14; }
  .ch-beratung { color: var(--text-soft); font-weight: 600; text-decoration: none; }
  .ch-beratung:hover { color: var(--pc); }
  .ct-cursor { display: inline-block; width: 2px; height: 18px; margin-left: 1px; background: var(--pc); animation: dcBlink 1s steps(1) infinite; }
  @keyframes dcBlink { 50% { opacity: 0; } }

  /* ============================================================
     HELLER MODUS (09.10.): Produktfarbe als Schrift auf hellem Grund
     war zu blass (2:1 bis 3,7:1). --pc-t ist die abgedunkelte
     Schriftvariante, Flaechen und Knoepfe behalten --pc.
     ============================================================ */
  :root[data-theme="light"] .pp { --pc-t: color-mix(in srgb, var(--pc) 58%, #0B1220); }
  :root[data-theme="light"] .pp :is(.ub-eyebrow, .faq-eyebrow, .faq-item.is-open .faq-nr, .pp-einbau-preis > b, .pp-rech-ein span b, .pp-rech-spar b,
    .pp-schluss-zusatz a, .pp-tab thead .wir, .pp-module span, .ch-empf b, .cv-ab-nav i, .db-mod em, .db-uhr b, .db-zaehler b, .db-feierabend,
    .db-aufgabe small, .db-check-kopf span b, .db-p-kopf small, .lk-plan-preis) { color: var(--pc-t); }
  :root[data-theme="light"] .pp :is(.pp-check li, .pp-vn-nach li, .ch-plan li, .cv-plan li, .lk-plan li)::before { color: var(--pc-t); border-color: var(--pc-t); }
  /* Summe im Dashboard: auf dem Handy dunkle Box, dort bleibt die helle Farbe */
  @media (min-width: 861px) { :root[data-theme="light"] .pp .db-summe-box > b { color: var(--pc-t); } }
  /* Gruen fuer "ja" und "erfasst" auf hellem Grund */
  :root[data-theme="light"] .pp :is(.pp-tab .ja, td.ja) { color: #15803D; }
  /* Chat, "Das Problem": Karten bleiben dunkel, ohne helle Ueberstrahlung oben */
  :root[data-theme="light"] .ch-vorn { background: linear-gradient(160deg, color-mix(in srgb, #F87171 14%, #131620), #131620 55%); }
  :root[data-theme="light"] .ch-hinten { background: linear-gradient(160deg, color-mix(in srgb, var(--pc) 26%, #0f1523), #0f1523 60%); }
  /* Produkte-Menue: Symbol "Individuelle Software" */
  :root[data-theme="light"] a.breit i { color: #0E7490; }
  /* Grundfarbe unter dem Nachthimmel (der Verlauf liegt darueber), damit der Text auch ohne Verlauf auf Dunkel steht */
  .ch-nacht > .pp-sticky { background-color: #0C0F1A; }
  /* Chat Tarif-Finder: aktiver Knopf im hellen Modus mit dunklerem Rahmen */
  :root[data-theme="light"] .ch-finder-web button.an { border-color: var(--pc-t); }
  /* Etiketten auf Bildern/Telefon: fast deckender dunkler Grund */
  .lk-chip { background-color: rgba(30,18,32,.96) !important; }
  @media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) { .cv-fo-label { background: rgba(12,12,14,.92) !important; } }
  /* Dashboard: Summenbox auf dem Handy dunkel, Beschriftung hell halten */
  @media (max-width: 860px) { :root[data-theme="light"] .pp.pp-dash .db-summe-box small { color: #D8CDB4; } }
  /* Touch-Ziele unter 1100 px: Text-Links und Hero-Knoepfe mindestens 44 px */
  @media (max-width: 1100px) {
    .pp .pp-ctas a { min-height: 44px; }
    .ch-beratung, .db-alle { display: inline-flex; align-items: center; min-height: 44px; }
  }
  /* Dashboard Handy (09.10.): Hero naeher an die Kopfleiste, damit beide Knoepfe im ersten Bild stehen */
  @media (max-width: 600px) {
    .pp.pp-dash .db-hero-sticky { padding-top: 92px; }
    .pp.pp-dash .db-text .pp-app-ic { width: 52px; height: 52px; border-radius: 15px; margin-bottom: 14px; }
    .pp.pp-dash .db-text h1 { margin: 10px 0 14px; }
    .pp.pp-dash .db-text .pp-ctas { margin-top: 18px; } .pp.pp-dash .db-text .pp-trust { margin-top: 12px; }
  }
  /* Demo-Szene Handy: Kopf und Fenster gemeinsam mittig, mit Luft dazwischen */
  @media (max-width: 760px) {
    .pp .pp-db-szene .pp-sticky { grid-template-rows: auto auto; align-content: center; row-gap: 4vh; padding: 9vh 0 6vh; }
    .pp .pp-db-unter { margin-top: 14px; }
  }
  /* Links-Vergleich: auf dem Handy zwei Tabellen mit je drei Spalten */
  .pp-tab-mobil { display: none; }
  @media (max-width: 600px) {
    .pp .pp-tab-voll { display: none; }
    .pp .pp-tab-mobil { display: grid; gap: 18px; }
    .pp .pp-tab-mobil .pp-tab { min-width: 0; table-layout: fixed; font-size: .88rem; }
    .pp .pp-tab-mobil .pp-tab caption { caption-side: top; padding: 14px 16px 4px; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text); }
    .pp .pp-tab-mobil .pp-tab th, .pp .pp-tab-mobil .pp-tab td { padding: 12px 8px; }
    .pp .pp-tab-mobil .pp-tab th { font-size: .85rem; line-height: 1.25; }
    .pp .pp-tab-mobil .pp-tab td:first-child { width: 36%; padding-left: 14px; }
    .pp .pp-tab-mobil .pp-tab td small { display: block; font-family: var(--font-body); font-size: .72rem; font-weight: 500; color: var(--text-soft); }
  }

  /* ===== Mobil-Test 12.10.: Korrekturen ===== */
  /* Ueberschriften ausgewogen umbrechen, kein einzelnes Wort allein in der letzten Zeile */
  .pp :is(h1, h2, h3) { text-wrap: balance; }
  .pp :is(p, li) { text-wrap: pretty; }
  /* Einrichtungs-Kasten (Chat): Spalte darf schmaler werden als ihr Inhalt */
  @media (max-width: 860px) { .pp .pp-einbau-box { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 360px) { .pp .pp-einbau-box { padding: 24px 18px; } .pp .pp-einbau-box .szene-btn { white-space: normal; text-align: center; } }
  /* Schlusszeile auf allen Produktseiten mittig am Handy */
  @media (max-width: 860px) { .pp .pp-schluss-zusatz { text-align: center; } }
  /* Handy quer (niedrige Hoehe): fester Knopf verdeckt sonst Bedienelemente */
  @media (max-height: 500px) and (orientation: landscape) { .cta-fest { display: none; } }
  /* Touch-Geraete: Tippflaechen mindestens 44 px, auch in der Desktop-Leiste (iPad quer) */
  /* 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; }
    .pp :is(.pp-schluss-zusatz a, .ch-beratung, .db-alle) { display: inline-flex; align-items: center; min-height: 44px; }
    .fuss nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  }


  /* ============================================================
     Produktseiten: Scroll-Szenen
     ============================================================ */
  .pp-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .pp .ub-aussage-text em c.an { color: var(--pc); }
  .pp .ub-aussage { height: 230vh; }

  /* Laufband, reagiert auf Scrollgeschwindigkeit */
  .pp-band { overflow: hidden; padding: 30px 0; border-block: 1px solid rgba(255,255,255,.07); background: var(--bg); }
  .pp-band-lauf { display: flex; width: max-content; will-change: transform; }
  .pp-band-lauf span { display: inline-flex; align-items: center; gap: 26px; padding: 0 26px; white-space: nowrap;
    font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 1rem + 2.6vw, 3.4rem); letter-spacing: -.02em; color: var(--text); }
  .pp-band-lauf span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--pc) 70%, transparent); }
  .pp-band-lauf span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 14px var(--pc); }

  /* Gestapelte Karten (Problem) */
  .pp-stapel { position: relative; }
  .pp-stapel .pp-sticky { display: grid; grid-template-rows: auto 1fr; padding: 16vh 0 8vh; }
  .pp-st-kopf { width: min(1200px, 100% - 48px); margin: 0 auto; }
  .pp-st-kopf h2 { margin: 16px 0 10px; }
  .pp-st-kopf p { color: var(--text-soft); font-size: 1.08rem; }
  .pp-st-karten { position: relative; width: min(860px, 100% - 40px); margin: 5vh auto 0; }
  .pp-st-karte { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
    padding: clamp(26px, 4vw, 46px); border-radius: 28px; transform-origin: 50% 0;
    background: linear-gradient(140deg, rgba(248,113,113,.12), rgba(20,22,30,.96) 45%), #12151d; border: 1px solid rgba(248,113,113,.22);
    box-shadow: 0 -20px 60px rgba(0,0,0,.45); }
  .pp-st-karte .pp-st-ic { width: clamp(64px, 8vw, 96px); height: clamp(64px, 8vw, 96px); border-radius: 24px; display: grid; place-items: center; background: rgba(248,113,113,.14); box-shadow: inset 0 0 0 1px rgba(248,113,113,.35); }
  .pp-st-karte .pp-st-ic svg { width: 46%; height: 46%; fill: none; stroke: #F87171; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .pp-st-karte small { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: #F87171; margin-bottom: 8px; }
  .pp-st-karte b { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); font-weight: 600; letter-spacing: -.02em; margin-bottom: 10px; }
  .pp-st-karte p { color: #A8B2C8; font-size: 1.05rem; line-height: 1.6; }
  [data-theme="light"] .pp-st-karte { background: linear-gradient(140deg, rgba(248,113,113,.14), #fff 50%); }
  [data-theme="light"] .pp-st-karte p { color: #4E5D78; }

  /* Horizontale Fahrt (Funktionen) */
  .pp-hs { position: relative; }
  .pp-hs .pp-sticky { display: flex; flex-direction: column; justify-content: center; gap: 5vh; }
  .pp-hs-kopf { width: min(1200px, 100% - 48px); margin: 0 auto; }
  .pp-hs-kopf h2 { margin: 16px 0 10px; }
  .pp-hs-kopf p { color: var(--text-soft); max-width: 640px; font-size: 1.05rem; }
  .pp-hs-track { display: flex; gap: 22px; padding-left: max(calc((100vw - 1200px) / 2), 24px); padding-right: 12vw; will-change: transform; }
  .pp-hk { position: relative; flex: 0 0 min(430px, 80vw); min-height: min(46vh, 400px); display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
    padding: 34px 32px; border-radius: 28px; overflow: hidden; background: var(--glass-bg); border: 1px solid var(--glass-border);
    --an: 0; transform: scale(calc(.94 + var(--an) * .06)); transition: border-color .3s;
    box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--pc) calc(var(--an) * 100%), transparent); }
  .pp-hk::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--an);
    background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--pc) 24%, transparent), transparent 60%); }
  .pp-hk > * { position: relative; }
  .pp-hk-nr { position: absolute !important; right: 24px; top: 10px; font-family: var(--font-display); font-weight: 700; font-size: clamp(5rem, 3rem + 5vw, 9rem); line-height: 1;
    color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--pc) calc(30% + var(--an) * 50%), transparent); }
  .pp-hk-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; margin-bottom: auto;
    background: color-mix(in srgb, var(--pc) calc(12% + var(--an) * 14%), transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 40%, transparent); }
  .pp-hk-ic svg { width: 28px; height: 28px; fill: none; stroke: var(--pc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .pp-hk b { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); font-weight: 600; letter-spacing: -.02em; }
  .pp-hk p { color: var(--text-soft); line-height: 1.6; }
  .pp-hs-fuss { width: min(1200px, 100% - 48px); margin: 0 auto; display: flex; align-items: center; gap: 18px; }
  .pp-hs-rail { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
  .pp-hs-rail i { display: block; height: 100%; background: linear-gradient(90deg, var(--pc), var(--pc2)); transform-origin: 0 50%; transform: scaleX(0); }
  .pp-hs-zahl { font-family: var(--font-display); font-weight: 600; color: var(--text-soft); font-variant-numeric: tabular-nums; }
  .pp-hs-zahl b { color: var(--text); }
  [data-theme="light"] .pp-hs-rail { background: rgba(8,11,18,.1); }

  /* Schritte, angepinnt */
  .pp-steps { position: relative; }
  .pp-steps .pp-sticky { display: grid; grid-template-rows: auto 1fr; padding: 15vh 0 8vh; }
  .pp-sp-kopf { width: min(1200px, 100% - 48px); margin: 0 auto; }
  .pp-sp-kopf h2 { margin: 16px 0 0; }
  .pp-sp-grid { width: min(1200px, 100% - 48px); margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: 6vw; align-items: center; }
  .pp-sp-links { position: relative; width: min(360px, 34vw); aspect-ratio: 1; justify-self: center; }
  .pp-sp-links svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
  .pp-sp-links circle { fill: none; stroke-width: 3; }
  .pp-sp-links .bg { stroke: rgba(255,255,255,.08); }
  .pp-sp-links .fg { stroke: url(#ppRing); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .pp-sp-fenster { position: absolute; inset: 22%; overflow: hidden; display: grid; place-items: center; }
  .pp-sp-nummern { position: absolute; left: 0; right: 0; top: 0; }
  .pp-sp-nummern b { display: grid; place-items: center; height: var(--h, 200px); font-family: var(--font-display); font-weight: 700; font-size: clamp(5rem, 3rem + 6vw, 10rem); line-height: 1;
    background: linear-gradient(160deg, var(--pc), var(--pc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .pp-sp-texte { position: relative; min-height: 260px; }
  .pp-sp-text { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
  .pp-sp-text small { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--pc); margin-bottom: 12px; }
  .pp-sp-text b { display: block; font-family: var(--font-display); font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 16px; }
  .pp-sp-text p { color: var(--text-soft); font-size: 1.15rem; line-height: 1.6; max-width: 34ch; }
  [data-theme="light"] .pp-sp-links .bg { stroke: rgba(8,11,18,.1); }

  /* Canvas: Verwandlung */
  .pp-cv-szene { height: 280vh; position: relative; }
  .pp-cv-szene .pp-sticky { display: grid; place-items: center; }
  .pp-cv-wort { position: absolute; top: 50%; font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 1rem + 11vw, 13rem); letter-spacing: -.05em; line-height: 1; pointer-events: none; }
  .pp-cv-wort-l { left: 3vw; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.22); }
  .pp-cv-wort-r { right: 3vw; background: linear-gradient(120deg, var(--pc), var(--pc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .pp-cv-gross { --split: 100%; position: relative; z-index: 2; width: min(62vh, 86vw); aspect-ratio: 1; border-radius: 28px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.14); box-shadow: 0 60px 140px rgba(0,0,0,.6), 0 40px 120px -40px var(--pc); }
  .pp-cv-gross img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .pp-cv-nach { clip-path: inset(0 0 0 var(--split)); }
  .pp-cv-scan { position: absolute; top: 0; bottom: 0; left: var(--split); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 24px 6px var(--pc); }
  .pp-cv-chips { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; }
  .pp-cv-chip { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: .95rem; color: #ECEEF2;
    background: rgba(24,16,34,.85); border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent); backdrop-filter: blur(10px); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
  .pp-cv-unter { position: absolute; left: 0; right: 0; bottom: 9vh; z-index: 3; text-align: center; font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1vw, 2rem); font-weight: 600; }
  .pp-cv-unter b { color: var(--pc); }
  [data-theme="light"] .pp-cv-wort-l { -webkit-text-stroke-color: rgba(8,11,18,.2); }

  /* Dashboard: Fenster richtet sich auf, Module fliegen heraus */
  .pp-db-szene { height: 320vh; position: relative; }
  .pp-db-szene .pp-sticky { display: grid; grid-template-rows: auto 1fr; padding: 13vh 0 13vh; }
  .pp-db-kopf { text-align: center; } .pp-db-kopf .ub-eyebrow { justify-content: center; } .pp-db-kopf h2 { margin: 14px 0 0; }
  .pp-db-buehne { position: relative; display: grid; place-items: center; perspective: 1800px; }
  .pp-db-fenster { position: relative; width: min(980px, 84vw, calc((100vh - 380px) * 1.72)); transform-origin: 50% 100%; }
  .pp-db-fenster .pp-demo-play { top: 58%; }
  .pp-db-mod { position: absolute; left: 50%; top: 50%; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px; white-space: nowrap;
    font-weight: 600; color: #ECEEF2; background: rgba(22,18,10,.85); border: 1px solid color-mix(in srgb, var(--pc) 40%, transparent); backdrop-filter: blur(10px); box-shadow: 0 18px 44px rgba(0,0,0,.5); }
  .pp-db-mod i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--pc) 18%, transparent); }
  .pp-db-mod svg { width: 18px; height: 18px; fill: none; stroke: var(--pc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .pp-db-unter { width: min(640px, 90vw); margin: 10px auto 0; text-align: center; color: var(--text-soft); line-height: 1.6; }

  /* Links: Gebuehren zaehlen herunter */
  .pp-lk-szene { height: 260vh; position: relative; }
  .pp-lk-szene .pp-sticky { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .pp-lk-wer { position: relative; height: 1.3em; width: 100%; font-family: var(--font-display); font-size: clamp(1.6rem, 1rem + 2vw, 3rem); font-weight: 600; }
  .pp-lk-wer span { position: absolute; left: 0; right: 0; }
  .pp-lk-b { color: var(--pc); }
  .pp-lk-zahl { display: flex; align-items: flex-start; justify-content: center; font-family: var(--font-display); font-weight: 700; line-height: .9; letter-spacing: -.06em; }
  .pp-lk-zahl b { font-size: clamp(9rem, 5rem + 18vw, 22rem); font-variant-numeric: tabular-nums; color: var(--zc, #F87171); }
  .pp-lk-zahl span { font-size: clamp(4rem, 2rem + 7vw, 9rem); margin-top: .12em; color: var(--zc, #F87171); }
  .pp-lk-rest { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1.4vw, 2.4rem); font-weight: 600; color: var(--text-soft); }
  .pp-lk-schluss { margin-top: 26px; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); color: var(--text); }

  /* Preise: Karten neigen sich zum Zeiger */
  .pp-plan { transform-style: preserve-3d; will-change: transform; }

  @media (max-width: 760px) {
    .pp-st-karte { grid-template-columns: 1fr; gap: 16px; }
    .pp-hk { min-height: 52vh; padding: 26px 24px; }
    .pp-sp-grid { grid-template-columns: 1fr; gap: 3vh; text-align: center; }
    .pp-sp-links { width: min(220px, 56vw); }
    .pp-sp-texte { min-height: 220px; }
    .pp-sp-text p { margin: 0 auto; }
    .pp-cv-wort { top: 14%; font-size: 18vw; }
    .pp-tab { min-width: 0; font-size: .7rem; table-layout: fixed; } .pp-tab th, .pp-tab td { padding: 9px 3px; } .pp-tab td:first-child { width: 26%; padding-left: 10px; }
    .pp-tab th { font-size: .72rem; line-height: 1.2; } .pp-tab-wrap { overflow: visible; } .pp-cv-wort-r { top: auto; bottom: 18%; }
    .pp-cv-chip { font-size: .78rem; padding: 7px 11px; }
    .pp-cv-unter { bottom: 7vh; padding: 0 20px; }
    .pp-db-fenster { width: 92vw; }
    .pp-db-kopf { padding: 0 20px; }
    .pp-hs-track { padding-left: 10vw; padding-right: 10vw; gap: 14px; }
    .pp-db-mod { display: none; }
    .pp-db-fenster .pp-demo-play { top: 50%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pp-stapel, .pp-hs, .pp-steps, .pp-cv-szene, .pp-db-szene, .pp-lk-szene { height: auto !important; }
    .pp-sticky { position: relative; height: auto; min-height: 100vh; }
  }

  /* ===== Rechtsseiten ===== */
  .re { padding-bottom: 96px; --re-linie: rgba(236,238,242,.14); --re-linie-stark: rgba(236,238,242,.42); }
  [data-theme="light"] .re { --re-linie: rgba(11,18,32,.12); --re-linie-stark: rgba(11,18,32,.45); }
  .re-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
  .re-kopf { padding: 168px 0 48px; border-bottom: 1px solid var(--re-linie); }
  .re-kopf h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 1.6rem + 4vw, 4.6rem); letter-spacing: -.03em; line-height: 1.02; margin: 14px 0 0; }
  .re-intro { max-width: 68ch; margin-top: 20px; color: var(--text-soft); font-size: 1.02rem; line-height: 1.65; }
  .re-intro p { margin: 0; }
  .re-intro a, .re-text a { color: var(--accent); text-underline-offset: 3px; overflow-wrap: anywhere; }
  [data-theme="light"] .re :is(.re-intro, .re-text) a { color: #1F5FBF; }
  .re-reiter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
  .re-reiter a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--re-linie-stark); color: var(--text-soft); text-decoration: none; font-weight: 600; font-size: .95rem; transition: color .2s, border-color .2s, background .2s; }
  .re-reiter a:hover { color: var(--text); border-color: var(--re-linie-stark); }
  .re-reiter a[aria-current="page"] { background: var(--text); color: var(--bg); border-color: var(--text); }
  .re-reiter a:focus-visible, .re-verz a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .re-koerper { padding-top: 56px; }
  .re-raster { display: grid; grid-template-columns: minmax(0, 1fr); }
  .re-koerper.mit-verz .re-raster { grid-template-columns: 240px minmax(0, 1fr); gap: 64px; }
  .re-verz { position: sticky; top: 120px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
  .re-verz b { font-size: .8rem; font-weight: 600; color: var(--text-soft); margin-bottom: 10px; }
  .re-verz a { display: block; padding: 7px 0 7px 14px; border-left: 2px solid var(--re-linie); color: var(--text-soft); text-decoration: none; font-size: .9rem; line-height: 1.35; transition: color .2s, border-color .2s; }
  .re-verz a:hover, .re-verz a.ist-hier { color: var(--text); border-left-color: var(--accent); }
  .re-text { max-width: 72ch; color: var(--text-soft); font-size: 1rem; line-height: 1.75; text-align: left; }
  .re-abschnitt + .re-abschnitt { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--re-linie); }
  .re-text h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); letter-spacing: -.02em; line-height: 1.15; color: var(--text); margin: 0 0 20px; scroll-margin-top: 110px; text-wrap: balance; }
  .re-text h3 { font-size: 1.12rem; font-weight: 700; color: var(--text); margin: 36px 0 10px; line-height: 1.35; text-wrap: balance; }
  .re-text h2 + h3 { margin-top: 0; }
  .re-text h4 { font-size: .98rem; font-weight: 700; color: var(--text); margin: 22px 0 6px; }
  .re-text p { margin: 0 0 14px; }
  .re-text ul, .re-text ol { margin: 0 0 14px; padding-left: 1.3em; }
  .re-text .legal-address { color: var(--text); line-height: 1.6; }
  /* Rechtstext immer linksbündig, auch gegen die zentrierten Handy-Überschriften aus mobil.css */
  .ub.re .re-kopf, .ub.re .re-kopf h1, .ub.re .re-text, .ub.re .re-text h2, .ub.re .re-text h3, .ub.re .re-text h4 { text-align: left; }
  .ub.re .re-kopf .ub-eyebrow { justify-content: flex-start; align-items: flex-start; text-align: left; margin-left: 0; margin-right: 0; }
  @media (max-width: 1100px) {
    .re-kopf { padding-top: 132px; }
    .re-koerper.mit-verz .re-raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .re-verz { display: none; }
  }
  @media (max-width: 600px) {
    .re-wrap { padding: 0 16px; }
    .re-kopf { padding: 112px 0 36px; }
    .re-reiter { gap: 6px; }
    .re-reiter a { padding: 0 16px; }
    .re-koerper { padding-top: 40px; }
    .re-abschnitt + .re-abschnitt { margin-top: 40px; padding-top: 36px; }
  }

  /* ============================================================
     MOBIL-GRUNDLAGE nach websites.md §6d: auf Mobil wird ALLES
     zentriert, Buttons laufen ueber die volle Breite. Ausgenommen
     sind nur Nachbauten von Software-Oberflaechen (Chatfenster,
     Editor, Dokumente, Browser, Telefon), die zeigen Bildschirme.
     Steht bewusst am Ende, damit es jede Einzelregel ueberstimmt.
     ============================================================ */
  @media (max-width: 860px) {
    .pp .ub-sek { padding: 64px 0; }
    .pp .faq { padding: 56px 0 64px; }
    .pp .ub-kopf { margin-bottom: 32px; }

    /* Ueberschriften, Eyebrows, Einleitungen */
    .pp :is(.ub-kopf, .ch-flip-kopf, .ch-thread-kopf, .cv-eb-kopf, .cv-fo-kopf, .cv-ab-text, .db-tag-kopf > div, .db-start-grid > div:first-child,
            .ch-faq-grid > div:first-child, .faq-kopf, .pp-einbau-box > div:first-child, .ch-schluss, .lk-schluss, .pp-db-kopf) { text-align: center; }
    .pp :is(h1, h2, .pp-p, .pp-lead, .ub-kopf p, .faq-sub) { margin-left: auto; margin-right: auto; text-align: center; }
    .pp .ub-eyebrow, .pp .faq-eyebrow { display: flex; justify-content: center; }
    .pp .db-tag-kopf { align-items: center; } .pp .db-uhr { justify-items: center; }

    /* Karten und ihre Inhalte */
    .pp :is(.ch-seite, .pp-vn-sp, .ch-plan, .cv-plan, .lk-plan, .lk-f, .pp-einbau-preis, .db-summe-box, .pp-mehr a, .pp-dock a, .db-check-li, .db-mod, .db-p-kopf, .db-p-text, .cv-ab-nav li, .ch-bubble-in, .pp-rech-aus div, .ch-finder, .db-check, .db-aufgabe) { text-align: center; }
    .pp :is(.ch-k-ic, .lk-f i, .pp-dock img, .db-box) { margin-left: auto; margin-right: auto; }
    .pp .ch-seite { align-items: center; }
    .pp :is(.ch-plan-info, .cv-plan .cv-credits) { margin-left: auto; margin-right: auto; }
    .pp .cv-credits { justify-content: center; }

    /* Aufzaehlungen mit Symbol: Symbol vor den Text statt links daneben */
    .pp :is(.ch-plan, .cv-plan, .lk-plan, .pp-vn-sp, .pp-check) li { padding-left: 0; text-align: center; }
    .pp :is(.ch-plan, .cv-plan, .lk-plan) li::before { position: static; margin-right: 6px; }
    .pp .pp-vn-sp li::before, .pp .pp-check li::before { position: static; display: inline-grid; vertical-align: -4px; margin-right: 8px; }
    .pp .pp-check { justify-items: center; }

    /* Zeilen aus Symbol + Text werden zu Spalten */
    .pp :is(.db-check-li, .cv-ab-nav li) { grid-template-columns: 1fr; justify-items: center; gap: 8px; }
    .pp .db-mod { grid-template-columns: 1fr; justify-items: center; gap: 8px; }
    .pp .db-p-kopf { justify-content: center; }
    .pp .pp-mehr a { flex-direction: column; justify-content: center; gap: 8px; }
    .pp .pp-mehr a img { margin: 0 auto; }
    .pp .pp-rech-ein span { flex-direction: column; align-items: center; gap: 4px; text-align: center; }
    .pp .pp-rech-ein small { text-align: center; }
    .pp .ch-finder-web { justify-content: center; }
    .pp .db-check-kopf { flex-direction: column; align-items: center; gap: 4px; }
    .pp .pp-zitat { text-align: center; }
    .pp .cv-fo-chips, .pp .pp-trust, .pp .pp-schluss-trust { justify-content: center; text-align: center; }

    /* FAQ-Akkordeon: Frage und Antwort mittig */
    .pp .faq-question { grid-template-columns: 28px 1fr 34px; text-align: center; }
    .pp .faq-answer-inner { padding: 0 0 24px; text-align: center; }

    /* Buttons ueber die volle Breite */
    .pp .pp-ctas { flex-direction: column; align-items: stretch; width: 100%; }
    .pp :is(.pp-ctas a, .ub-schluss-btns a, .pp-einbau-preis .szene-btn, .db-summe-box .szene-btn, .lk-reserv .szene-btn, .cv-drop-cta .szene-btn, .db-aufgabe .szene-btn, .pp-demo-grid .szene-btn, .pp-klein .szene-btn, .ch-plan a, .cv-plan a, .lk-plan a) {
      display: flex; width: 100%; justify-content: center; box-sizing: border-box; }
    .pp .ub-schluss-btns { flex-direction: column; align-items: stretch; }
    .pp .pp-einbau-preis, .pp .db-summe-box, .pp .lk-reserv { align-items: stretch; justify-items: stretch; }
  }
  @media (max-width: 860px) {
    /* Chat-FAQ: Fragen als volle, mittige Flaechen statt versetzter Blasen */
    .pp .cf-q { justify-self: stretch; max-width: none; text-align: center; border-radius: 16px; }
    .pp .cf-a { justify-content: center; } .pp .cf-a > .ch-ava { display: none; }
    .pp .cf-a p { max-width: none; text-align: center; border-radius: 16px; }
    .pp .ch-faq-hinweis { text-align: center; }
  }
  @media (max-width: 860px) {
    .pp .ch-plan-tag { left: 50%; transform: translateX(-50%); white-space: nowrap; }
    .pp .ch-plan-passt { right: 50%; transform: translateX(50%) scale(.8); top: auto; bottom: -12px; }
    .pp .ch-plan.passt .ch-plan-passt { transform: translateX(50%); }
  }
  @media (max-width: 860px) {
    /* Eyebrows einheitlich: Strich ueber dem Text, beides mittig. Bricht der Text
       um, haengt der Strich sonst einseitig links. */
    .pp .ub-eyebrow, .pp .faq-eyebrow { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
    .pp .ub-eyebrow::before, .pp .faq-eyebrow::before { width: 28px; }
    .pp :is(.ct-feld, .dc-feld) { min-width: 0; }
  }

  .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; }