/* Imbue lokal ausgeliefert, variabel in Gewicht und optischer Größe */
  @font-face { font-family: 'Imbue'; src: url('../fonts/Imbue-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
  /* Manrope lokal ausgeliefert, variabel von 200 bis 800 */
  @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Variable.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }

  :root { --accent: rgb(96, 214, 208); --accent-rgb: 96, 214, 208; --page: #000; --section: #0F141B; --font-display: 'Imbue', serif; --font-text: 'Manrope', ui-sans-serif, system-ui, sans-serif; --ease: cubic-bezier(0.16,1,0.3,1); --vv-signal: 216, 72, 60; }

  html, body { margin: 0; background: #000; color: #fff; overflow-x: clip; }
  /* clip statt hidden: overflow-x:hidden macht sticky (Haltung) in Chromium/WebKit kaputt */

  /* Safari/iOS: Liquid-Glass-Klone und SVG-Refraction erzeugen Magenta und blockieren Klicks.
     Stattdessen klassisches Frosted Glass über Hintergrund + backdrop-filter. */
  html.vv-webkit #vv-nav {
    background: rgba(12, 16, 22, 0.58) !important;
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    backdrop-filter: blur(28px) saturate(140%);
  }
  html.vv-webkit #vv-vsl-card {
    background: rgba(8, 11, 16, 0.55) !important;
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
  }
  html.vv-webkit #vv-glass-card {
    background: rgba(12, 16, 22, 0.62) !important;
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    backdrop-filter: blur(28px) saturate(140%);
  }
  html.vv-webkit #vv-vsl-dup,
  html.vv-webkit #vv-dup-container,
  html.vv-webkit #vv-nav-dup { display: none !important; pointer-events: none !important; }
  html.vv-webkit #vv-vsl-card:hover [data-vslplay],
  html.vv-webkit #vv-vsl-card:hover [data-vslnote],
  html.vv-webkit [data-wslink]:hover,
  html.vv-webkit [data-wslink]:focus-visible,
  html.vv-webkit .rp-tab:hover,
  html.vv-webkit [class*="vv-h"]:hover { filter: none !important; }

  /* Ohne JS: Wortmarke kurz zeigen, Overlay nach voller Vorspann-Länge weg.
     Mit JS steuert site.js den Abbau — sonst wäre die Fläche nach 2 s schon transparent. */
  #vv-mark-a, #vv-mark-b { animation: vv-mark-in 700ms cubic-bezier(0.16,1,0.3,1) both; }
  @keyframes vv-mark-in { from { opacity: 0; } to { opacity: 1; } }
  #vv-pre { animation: vv-pre-weg 320ms linear 5800ms forwards; }
  html.js-ready #vv-pre { animation: none; }
  @keyframes vv-pre-weg { to { opacity: 0; visibility: hidden; } }
  html.js-failed #vv-pre { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
  @media (prefers-reduced-motion: reduce) {
    #vv-mark-a, #vv-mark-b, #vv-pre { animation: none !important; }
    #vv-mark-a, #vv-mark-b { opacity: 1; }
    #vv-pre { opacity: 0; visibility: hidden; }
  }

  /* Spotlight: folgt dem Zeiger, wie in Konditionen und Belegen */
  .vv-spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(38% 30% at var(--lx, 50%) var(--ly, 30%), rgba(var(--accent-rgb),0.14), rgba(0,0,0,0) 70%); opacity: 0; transition: opacity 600ms var(--ease, cubic-bezier(0.16,1,0.3,1)); }
  #werkzeug:hover .vv-spot, #diagnose:hover .vv-spot,   #methode:hover .vv-spot,   #diezwei:hover .vv-spot,   #eignung:hover .vv-spot,   #weiter:hover .vv-spot { opacity: 1; }
  @media (max-width: 900px) { .vv-spot { display: none; } }

  #erstgespraech [data-fusshuegel] { z-index: 6 !important; }
  /* Begrüßung der Kapitelleiste: Marken kommen gestaffelt, dann zieht sich alles zurück */
  /* Lichtkette der Abschnitte: Hintergrundebenen liegen unter dem Inhalt */
  [data-bgl] { will-change: auto; }
  #werkzeug > *:not([data-bgl]):not(.vv-spot):not(.bel-spot):not(.kond-spot):not([aria-hidden="true"]), #diagnose > *:not([data-bgl]):not(.vv-spot):not(.bel-spot):not(.kond-spot):not([aria-hidden="true"]), #methode > *:not([data-bgl]):not(.vv-spot):not(.bel-spot):not(.kond-spot):not([aria-hidden="true"]), #diezwei > *:not([data-bgl]):not(.vv-spot):not(.bel-spot):not(.kond-spot):not([aria-hidden="true"]), #beleg > *:not([data-bgl]):not(.vv-spot):not(.bel-spot):not(.kond-spot):not([aria-hidden="true"]), #eignung > *:not([data-bgl]):not(.vv-spot):not(.bel-spot):not(.kond-spot):not([aria-hidden="true"]), #weiter > *:not([data-bgl]):not(.vv-spot):not(.bel-spot):not(.kond-spot):not([aria-hidden="true"]), #kacheln > *:not([data-bgl]):not(.vv-spot):not(.bel-spot):not(.kond-spot):not([aria-hidden="true"]), #fragen > *:not([data-bgl]):not(.vv-spot):not(.bel-spot):not(.kond-spot):not([aria-hidden="true"]), #konditionen > *:not([data-bgl]):not(.vv-spot):not(.bel-spot):not(.kond-spot):not([aria-hidden="true"]) { position: relative; z-index: 1; }

  /* Abschnitt 2: Grund und Hintergrund sind nie Teil einer Einblendung */
  #diagnose > [data-diag-grund], #diagnose > [aria-hidden="true"] { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  #diagnose.vv-rise, #diagnose.stage { opacity: 1 !important; transform: none !important; background-color: #0B1017 !important; }
  #diagnose .kopf, #diagnose .body, #diagnose .d-scene, #diagnose .d-side, #diagnose .d-progress, #diagnose .kopf > * { opacity: 1 !important; animation: none !important; }
  #diagnose .kopf, #diagnose .body, #diagnose .d-scene, #diagnose .d-side, #diagnose .d-progress { transform: none !important; }
  #diagnose > [data-diag-grund] { inset: -6px 0 -6px 0; height: auto; }
  #diagnose > [aria-hidden="true"]:not([data-diag-grund]) { inset: 0; height: auto; }
  /* Methode: Timeline-Blöcke zeigen beim Überfahren, dass sie anklickbar sind */
  #methode [data-clip] { cursor: pointer; transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), filter 260ms var(--ease), background 260ms; }
  #methode [data-clip]:hover { transform: translateY(-2px); filter: brightness(1.25); box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 1px rgba(var(--accent-rgb),0.5); }
  #methode [data-clip]:active { transform: translateY(0); }
  /* ==== Scrollbar: Kapitelleiste rechts, Fortschrittsring unten rechts ==== */
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
  .vv-sb { position: fixed; right: 14px; top: 132px; bottom: 100px; width: 2px; border-radius: 2px; background: rgba(255,255,255,0); z-index: 880; cursor: pointer; transition: background 300ms, opacity 700ms var(--ease); opacity: 0; }
  .vv-sb.is-da { opacity: 1; }
  .vv-sb::before { content: ''; position: absolute; left: -36px; right: -14px; top: -20px; bottom: -20px; }
  .vv-sb.is-offen, .vv-sb:hover, .vv-sb.is-drag { background: rgba(255,255,255,0.14); }
  .vv-sb i { position: absolute; left: 0; right: 0; top: 0; height: 12%; border-radius: 2px; background: #fff; z-index: 2; cursor: grab; transition: box-shadow 400ms var(--ease), background-color 400ms; will-change: top; }
  .vv-sb i::before { content: ''; position: absolute; left: -12px; right: -12px; top: -6px; bottom: -6px; }
  .vv-sb.is-drag i { cursor: grabbing; }
  .vv-sb.is-offen i, .vv-sb:hover i, .vv-sb.is-drag i { background: var(--accent); box-shadow: 0 0 18px rgba(var(--accent-rgb),0.7), 0 0 2px rgba(var(--accent-rgb),1); }
  .vv-sb s { position: absolute; left: -2px; width: 6px; height: 1px; background: rgba(255,255,255,0); text-decoration: none; cursor: pointer; transition: width 300ms var(--ease), background 300ms; }
  .vv-sb s::before { content: ''; position: absolute; left: -36px; right: 4px; top: -10px; bottom: -10px; }
  .vv-sb.is-offen s, .vv-sb:hover s { background: rgba(255,255,255,0.32); }
  .vv-sb s::after { content: attr(data-name); position: absolute; right: 18px; top: 50%; transform: translateY(-50%) translateX(8px); padding: 6px 10px; border-radius: 999px; font: 500 10px/1 'Manrope', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); white-space: nowrap; opacity: 0; transition: opacity 300ms var(--ease), transform 300ms var(--ease), color 200ms, background 200ms; }
  .vv-sb.is-offen s::after, .vv-sb:hover s::after, .vv-sb.is-drag s::after { opacity: 1; transform: translateY(-50%); }
  .vv-sb s.is-cur::after { color: #fff; }
  body.vv-oben .vv-sb s[data-name="Anfang"], body.vv-oben .vv-sb s[data-name="Anfang"]::after, body.vv-oben .vv-sb.is-offen s[data-name="Anfang"]::after, body.vv-oben .vv-sb:hover s[data-name="Anfang"]::after { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
  .vv-sb s:hover, .vv-sb s.is-cur { background: rgba(255,255,255,0.6); }
  .vv-sb s:hover { width: 12px; }
  .vv-sb s:hover::after { color: #fff; background: rgba(255,255,255,0.08); transform: translateY(-50%) translateX(-4px); }
  .vv-ring { position: fixed; right: 26px; bottom: 26px; width: 58px; height: 58px; z-index: 880; cursor: pointer; padding: 0; border: 0; background: transparent; appearance: none; -webkit-appearance: none; border-radius: 999px; overflow: visible; isolation: isolate; transition: transform 300ms var(--ease), opacity 400ms var(--ease); }
  .vv-ring:hover { transform: scale(1.06); }
  .vv-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .vv-ring circle { fill: none; stroke-width: 2; }
  .vv-ring .bahn { stroke: rgba(255,255,255,0.12); }
  .vv-ring .lauf { stroke: #fff; stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: 163.4; transition: stroke 300ms; }
  .vv-ring:hover .lauf { stroke: var(--accent); }
  .vv-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 400 15px/1 'Imbue', serif; color: rgba(255,255,255,0.85); transition: opacity 300ms; }
  .vv-ring u { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-decoration: none; opacity: 0; transition: opacity 300ms; }
  .vv-ring u svg { width: 16px; height: 16px; transform: none; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .vv-ring:hover b { opacity: 0; } .vv-ring:hover u { opacity: 1; }
  .vv-ring .glas { position: absolute; inset: 0; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: rgba(200,200,200,0.1); box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); z-index: 0; transition: background 300ms; }
  .vv-ring:hover .glas { background: rgba(255,255,255,0.1); }
  .vv-ring .bahn { stroke: rgba(255,255,255,0.16); }
  .vv-ring svg, .vv-ring b, .vv-ring u { position: absolute; z-index: 1; }
  .vv-ring > svg { inset: 0; }
  .vv-ring { opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
  body.vv-ring-an .vv-ring { opacity: 1; pointer-events: auto; transform: none; }
  body.vv-ring-an .vv-ring:hover { transform: scale(1.06); }
  body.rp-lock .vv-sb, body.rp-lock .vv-ring, body.vv-film .vv-sb, body.vv-film .vv-ring { opacity: 0 !important; pointer-events: none !important; }
  @media (max-width: 1024px) { .vv-sb { right: 8px; top: 110px; bottom: 96px; } .vv-sb::before, .vv-sb s::before { left: -28px; } .vv-sb s::after { font-size: 9.5px; padding: 5px 8px; } .vv-ring { right: 14px; bottom: 14px; width: 50px; height: 50px; } .vv-ring b { font-size: 13px; } }
  @media (max-width: 640px), (hover: none) and (pointer: coarse) and (max-width: 900px) { .vv-sb { display: none; } .vv-ring { right: 12px; bottom: 12px; width: 46px; height: 46px; } .vv-ring .glas { background: rgba(12,16,22,0.82); } }
  @media (hover: none) and (pointer: coarse) { .vv-ring:hover { transform: none; } .vv-ring:hover b { opacity: 1; } .vv-ring:hover u { opacity: 0; } .vv-ring:active b { opacity: 0; } .vv-ring:active u { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .vv-sb, .vv-sb i, .vv-sb s, .vv-ring, .vv-ring .lauf { transition: none !important; } }

  @media (max-width: 1024px) and (min-width: 621px) { [data-haltung-film] { right: 78px !important; bottom: 15px !important; } }
  /* ==== Scroll-Erzählung: Überschriften Wort für Wort, Einleitungen lesen sich beim Scrollen ein ==== */
  h2[data-vv-wort] { display: block; min-width: 0; flex: 1 1 auto; width: 100%; max-width: none; }
  h2[data-vv-wort][data-h2] { width: 100%; }
  h2[data-vv-wort] .vv-wort { display: inline; white-space: normal; }
  h2[data-vv-wort] .vv-wort + .vv-wort::before { content: ' '; }
  h2[data-vv-wort] > span { display: block; }
  .vv-wort { display: inline; transition: opacity 700ms var(--ease), transform 900ms var(--ease); transition-delay: var(--vv-d, 0ms); }
  html.js-ready .vv-wort { opacity: 0; transform: translateY(0.35em); }
  html.js-ready .is-in .vv-wort { opacity: 1; transform: none; }
  .vv-lese { display: inline; color: rgba(255,255,255,0.22); transition: color 260ms linear; }
  .duo-text .z i .vv-lese, .duo-text .z .vv-lese { display: inline; }
  .duo-text .z { display: block; }
  .duo-text .z i { display: inline-block; }
  .vv-lese.an { color: rgba(255,255,255,0.86); }
  .vv-strich { position: relative; }
  .vv-strich::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 1px; background: linear-gradient(90deg, rgba(var(--accent-rgb),0.7), rgba(255,255,255,0.08)); transform-origin: left; transition: transform 1200ms var(--ease) 400ms; }
  html.js-ready .vv-strich::after { transform: scaleX(0); }
  html.js-ready .is-in .vv-strich::after { transform: scaleX(1); }
  @media (prefers-reduced-motion: reduce) { .vv-wort { opacity: 1 !important; transform: none !important; filter: none !important; } .vv-lese { color: rgba(255,255,255,0.72) !important; } }

  /* ==== Scroll-Einblendungen: Abschnitte heben sich, Kinder folgen gestaffelt ==== */
  .vv-rise > :not([aria-hidden]):not(.vv-spot):not([data-bgl]) { transition: opacity 900ms var(--ease); }
  .vv-rise.is-in { opacity: 1; }
  html.js-ready .vv-rise:not(.is-in) .vv-step { opacity: 0 !important; transform: translateY(26px) !important; }
  .vv-step { transition: opacity 900ms var(--ease), transform 900ms var(--ease); transition-delay: var(--vv-d, 0ms); }
  .vv-line { transform-origin: left; transition: transform 1100ms var(--ease); transition-delay: var(--vv-d, 0ms); }
  html.js-ready .vv-line { transform: scaleX(0); }
  html.js-ready .is-in .vv-line { transform: scaleX(1); }
  html:not(.js-ready) [data-hl] > span,
  html.js-failed [data-hl] > span { opacity: 1 !important; }
  html:not(.js-ready) [data-kacheln-sub],
  html.js-failed [data-kacheln-sub],
  html:not(.js-ready) [data-kacheln-zeichen],
  html.js-failed [data-kacheln-zeichen] { opacity: 1 !important; transform: none !important; filter: none !important; }
  html.js-failed .vv-wort,
  html.js-failed .vv-step,
  html.js-failed .vv-line,
  html.js-failed .duo-body,
  html.js-failed .duo-claim,
  html.js-failed .duo-card,
  html.js-failed .next-step,
  html.js-failed .bel-in,
  html.js-failed .kond-row,
  html.js-failed [data-fit-half],
  html.js-failed [data-fit-row] { opacity: 1 !important; transform: none !important; }
  @media (prefers-reduced-motion: reduce) { .vv-rise, .vv-step, .vv-line, .vv-veil > * { opacity: 1 !important; transform: none !important; transition: none !important; } }

  /* ==== Konditionen: Weg mit Schiene, Spotlight, Bühnen-Popup ==== */
  #konditionen, #konditionen * { box-sizing: border-box; }
  .pop, .pop * { box-sizing: border-box; }

  /* ---- Gemeinsam ---- */
  .kond { position: relative; width: 100%; color: #fff; font-family: var(--font-text); font-weight: 300; padding: clamp(80px, 11vh, 140px) 48px; overflow: hidden; }
  .kond-inner { position: relative; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(40px, 6vh, 72px); }
  .kond-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 60ch); gap: 32px 64px; align-items: start; }
  .kond-h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 4.6vw, 76px); line-height: 0.9; text-transform: uppercase; }
  .kond-h2 span { display: block; }
  .kond-h2 span + span { color: rgba(255,255,255,0.9); }
  .kond-lead { margin: 0; max-width: 60ch; padding-top: 0.4em; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.64); text-wrap: pretty; }
  .kond-label { font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
  .kond-label-accent { color: var(--accent); }
  .kond-big { font-family: var(--font-display); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .kond-was { font-family: var(--font-display); line-height: 1; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.4); }
  .kond-was s { text-decoration-thickness: 1.5px; text-decoration-color: rgba(255,255,255,0.55); }
  .kond-unit { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.64); }
  .kond-row { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.10); font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.86); transition: opacity 500ms cubic-bezier(0.16,1,0.3,1), transform 500ms cubic-bezier(0.16,1,0.3,1); }
  html.js-ready .kond-row { opacity: 0; transform: translateY(8px); }
  .kond-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.10); }
  html.js-ready .kond-row.kond-in, .kond-row.kond-in { opacity: 1; transform: none; }
  .kond-row svg { width: 14px; height: 14px; margin-top: 0.3em; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .kond-row svg path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 500ms cubic-bezier(0.16,1,0.3,1) 100ms; }
  .kond-row.kond-in svg path { stroke-dashoffset: 0; }
  .kond-list { list-style: none; margin: 0; padding: 0; }
  .kond-lock { margin: 0; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(var(--accent-rgb),0.35); background: rgba(var(--accent-rgb),0.06); font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.86); }
  .kond-lock strong { font-weight: 600; color: var(--accent); }
  .kond-lock svg { width: 14px; height: 14px; margin-top: 0.3em; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .kond-buy { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 26px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(255,255,255,0.25); border-top-color: rgba(255,255,255,0.45); background: linear-gradient(to bottom, #ffffff, #f3f4f6); color: #0F141B; text-decoration: none; font-family: var(--font-text); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: transform 300ms cubic-bezier(0.16,1,0.3,1); }
  .kond-buy:hover { transform: translateY(-2px); }
  .kond-buy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .kond-ghost { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); color: #fff; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: background 300ms; }
  .kond-ghost:hover { background: rgba(255,255,255,0.06); color: #fff; }
  .kond-micro { margin: 0; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.5); max-width: 70ch; }
  .kond-launch { display: inline-flex; align-self: flex-start; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb),0.45); color: var(--accent); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
  .kond-box img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,0.55)); animation: kond-float 7s ease-in-out infinite; }
  @keyframes kond-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

  /* ==== C: Der Weg. Drei Stationen, die Linie füllt sich beim Scrollen ==== */
  .vc { background: var(--page); }
  .vc .kond-spot { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(38% 30% at var(--lx, 50%) var(--ly, 30%), rgba(var(--accent-rgb),0.14), rgba(0,0,0,0) 70%); opacity: 0; transition: opacity 600ms var(--ease, cubic-bezier(0.16,1,0.3,1)); }
  .vc:hover .kond-spot { opacity: 1; }
  .vc .kond-inner { position: relative; z-index: 1; }
  .vc .kond-step-visual .kond-glow { position: absolute; inset: 8% 12%; border-radius: 999px; background: radial-gradient(closest-side, rgba(var(--accent-rgb),0.24), rgba(0,0,0,0)); filter: blur(24px); opacity: 0; transition: opacity 1000ms cubic-bezier(0.16,1,0.3,1) 200ms; }
  .vc .kond-step.is-lit .kond-step-visual .kond-glow { opacity: 1; }
  .vc .kond-path { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 clamp(24px, 3vw, 48px); }
  .vc .kond-rail { position: relative; grid-row: 1 / span 3; justify-self: center; align-self: start; width: 2px; background: rgba(255,255,255,0.08); border-radius: 2px; }
  .vc .kond-rail-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: var(--accent); transition: height 200ms linear; }
  .vc .kond-step { position: relative; padding: 0 0 clamp(40px, 6vh, 72px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: start; }
  .vc .kond-step:last-child { padding-bottom: 0; }
  .vc .kond-dot { position: absolute; left: calc(-1 * (clamp(24px, 3vw, 48px) + 28px + 9px)); top: 0.55em; width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.3); background: var(--page); transition: border-color 400ms, background 400ms, box-shadow 400ms; }
  .vc .kond-step.is-lit .kond-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0.15); }
  .vc .kond-when { font-family: var(--font-display); font-size: clamp(28px, 3vw, 48px); line-height: 0.95; text-transform: uppercase; color: rgba(255,255,255,0.4); transition: color 400ms; }
  .vc .kond-step.is-lit .kond-when { color: #fff; }
  .vc .kond-step-body { display: flex; flex-direction: column; gap: 18px; }
  .vc .kond-step .kond-was { font-size: clamp(18px, 1.6vw, 24px); margin-bottom: 8px; }
  .vc .kond-step .kond-big { font-size: clamp(40px, 4vw, 72px); }
  .vc .kond-step .kond-duo { display: grid; grid-template-columns: auto auto; gap: 32px; justify-content: start; }
  .vc .kond-step .kond-duo .kond-big { font-size: clamp(32px, 3vw, 52px); }
  .vc .kond-sum { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; column-gap: clamp(14px, 2vw, 28px); }
  .vc .kond-sum .kond-big.is-sub { font-size: clamp(26px, 2.4vw, 44px); padding-top: 0.28em; }
  .vc .kond-sum .kond-plus { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 40px); color: rgba(255,255,255,0.4); padding-top: calc(clamp(18px, 1.6vw, 24px) + 8px + 0.36em); }
  .vc .kond-sum .kond-unit { max-width: 22ch; margin-top: 8px; }
  .vc .kond-step-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; }
  .vc .kond-step-visual .kond-box { width: min(88%, 420px); }
  .vc .kond-step-visual .kond-box + .kond-box { width: min(38%, 170px); margin-left: -4%; margin-top: 50px; }
  .vc .kond-step-text { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.64); max-width: 48ch; text-wrap: pretty; }
  .vc .kond-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

  .pop { font-family: var(--font-text); font-weight: 300; color: #fff; }
  .pop .kond-x { position: absolute; right: 16px; top: 16px; z-index: 5; width: 40px; height: 40px; padding: 0; margin: 0; line-height: 0; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 300ms var(--ease), background 300ms; }
  .pop .kond-x:hover { transform: rotate(90deg); background: rgba(255,255,255,0.1); }
  .pop .kond-x svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .pop .kond-label { font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
  .pop .kond-label-accent { color: var(--accent); }
  .pop .kond-unit { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.64); }
  .pop .kond-micro { margin: 0; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.5); }
  .pop .kond-sum { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; column-gap: clamp(14px, 2vw, 24px); }
  .pop .kond-sum .kond-unit { max-width: 22ch; margin-top: 6px; }
  .pop .kond-plus { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 32px); color: rgba(255,255,255,0.4); padding-top: calc(clamp(16px, 1.4vw, 22px) + 6px + 0.34em); }
  .pop .kond-launch { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb),0.45); color: var(--accent); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
  .pop .kond-buy { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(255,255,255,0.25); border-top-color: rgba(255,255,255,0.45); background: linear-gradient(to bottom, #ffffff, #f3f4f6); color: #0F141B; text-decoration: none; font-family: var(--font-text); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .pop .kond-buy svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .kond-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 0.95; text-transform: uppercase; text-wrap: balance; padding-right: 40px; }
  .kond-was-p { position: relative; display: inline-block; font-family: var(--font-display); line-height: 1; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.4); font-size: clamp(16px, 1.4vw, 22px); margin-bottom: 6px; }
  .kond-was-p::after { content: ''; position: absolute; left: -2%; right: -2%; top: 50%; height: 1.5px; background: rgba(255,255,255,0.6); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease) 500ms; }
  .is-on .kond-was-p::after { transform: scaleX(1); }
  .kond-note { margin: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(var(--accent-rgb),0.35); background: rgba(var(--accent-rgb),0.06); font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.86); }
  .kond-note strong { font-weight: 600; color: var(--accent); }
  .kond-buy-p { width: 100%; min-height: 56px; height: auto; padding: 14px 24px; white-space: normal; line-height: 1.3; text-align: center; }
  .kond-buy-p::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(var(--accent-rgb),0.35), rgba(255,255,255,0)); transform: skewX(-20deg); transition: left 700ms var(--ease); }
  .kond-buy-p { position: relative; overflow: hidden; }
  .kond-buy-p:hover::after { left: 110%; }
  .roll { display: inline-flex; overflow: hidden; vertical-align: bottom; line-height: 1; }
  .roll .d { position: relative; display: inline-block; height: 1em; }
  .roll .d .col { display: flex; flex-direction: column; transition: transform 700ms var(--ease); }
  .roll .d .col span { display: block; height: 1em; line-height: 1; }
  .stg > * { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
  .is-on .stg > * { opacity: 1; transform: none; }
  .pop { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 24px; }
  .pop[hidden] { display: none; }
  .scrim { position: absolute; inset: 0; background: rgba(4,6,9,0.7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; transition: opacity 500ms var(--ease); }
  .is-on .scrim { opacity: 1; }
  .pop .kond-sum .kond-big { font-size: clamp(36px, 4vw, 52px); }
  .pop .kond-sum .kond-big.is-sub { font-size: clamp(26px, 2.6vw, 36px); }
  /* ==== P2 Bühne: Box im Licht links, Entscheidung rechts, wächst aus dem Knopf ==== */
  .p2 .dlg { position: relative; width: min(920px, 100%); max-height: calc(100vh - 48px); overflow: auto; border-radius: 36px; border: 0.8px solid rgba(255,255,255,0.18); background: var(--section); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); opacity: 0; transform: scale(0.2); transform-origin: var(--ox, 50%) var(--oy, 50%); transition: opacity 400ms var(--ease), transform 800ms var(--ease); }
  .p2.is-on .dlg { opacity: 1; transform: none; }
  .p2 .side { position: relative; overflow: hidden; background: #000; min-height: 360px; display: flex; align-items: center; justify-content: center; padding: 36px; }
  .p2 .side-light { position: absolute; inset: 0; background: radial-gradient(45% 55% at var(--lx, 50%) var(--ly, 45%), rgba(var(--accent-rgb),0.22), rgba(0,0,0,0) 70%); }
  .p2 .side .box { position: relative; width: 78%; margin: 0; transform: translateY(30px) rotateY(-14deg); opacity: 0; transition: transform 1000ms var(--ease) 250ms, opacity 800ms var(--ease) 250ms; }
  .p2.is-on .side .box { transform: none; opacity: 1; }
  .p2 .side .box img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.7)); }
  .p2 .side .kond-launch { position: absolute; left: 24px; top: 24px; }
  .p2 .side .lock { position: absolute; left: 24px; right: 24px; bottom: 24px; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.8); }
  .p2 .side .lock strong { color: var(--accent); font-weight: 600; }
  .p2 .side .lock svg { width: 14px; height: 14px; margin-top: 0.25em; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .p2 .body { padding: 36px; display: flex; flex-direction: column; gap: 18px; }
  .kond-note-stack { display: grid; }
  .kond-note-stack p { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(4px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
  .kond-note-stack p.is-cur { opacity: 1; transform: none; transition-delay: 120ms; }
  .pop .kond-buy.kond-cta2, .kond-buy.kond-cta2 { justify-content: space-between; gap: 16px; padding: 10px 10px 10px 24px; text-align: left; min-height: 64px; transition: transform 400ms var(--ease), box-shadow 400ms var(--ease); }
  .kond-buy-p.kond-cta2::after { display: none; }
  .kond-cta2 .kond-cta2-flut { position: absolute; right: 10px; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 999px; background: #0F141B; transform: scale(1); transform-origin: center; transition: transform 1100ms cubic-bezier(0.4, 0, 0.2, 1); z-index: 0; }
  .kond-cta2 .kond-cta2-t, .kond-cta2 .kond-cta2-i { position: relative; z-index: 1; }
  .kond-cta2 .kond-cta2-t { display: flex; flex-direction: column; gap: 3px; line-height: 1.1; transition: color 500ms var(--ease) 250ms; }
  .kond-cta2 .kond-cta2-t b { font-weight: 700; font-size: 12px; letter-spacing: 0.08em; }
  .kond-cta2 .kond-cta2-t small { font-weight: 500; font-size: 10.5px; letter-spacing: 0.04em; text-transform: none; color: rgba(15,20,27,0.6); transition: color 500ms var(--ease) 250ms; }
  .kond-cta2 .kond-cta2-i { flex: none; width: 44px; height: 44px; border-radius: 999px; color: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: color 500ms var(--ease) 250ms; }
  .kond-cta2 .kond-cta2-i svg { position: absolute; width: 18px; height: 18px; stroke: currentColor; transition: transform 500ms var(--ease), opacity 400ms var(--ease); }
  .kond-cta2 .kond-cta2-i svg:last-child { transform: translate(-26px, 26px); opacity: 0; }
  .pop .kond-buy.kond-cta2:hover, .kond-buy.kond-cta2:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,0.4); }
  .kond-cta2:hover .kond-cta2-flut { transform: scale(30); }
  .kond-cta2:hover .kond-cta2-t, .kond-cta2:hover .kond-cta2-t small { color: #fff; }
  .kond-cta2:hover .kond-cta2-i { color: var(--accent); }
  .kond-cta2:hover .kond-cta2-i svg:first-child { transform: translate(26px, -26px); opacity: 0; }
  .kond-cta2:hover .kond-cta2-i svg:last-child { transform: none; opacity: 1; }
  .p2 .seg { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 4px; overflow: hidden; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); }
  .p2 .seg button { position: relative; z-index: 1; min-width: 0; min-height: 46px; padding: 6px 10px; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,0.6); cursor: pointer; font-family: var(--font-text); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: normal; line-height: 1.15; text-align: center; flex-wrap: wrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: color 300ms; }
  .p2 .seg button[aria-selected="true"] { color: #fff; }
  .p2 .seg .tag { font-size: 8.5px; letter-spacing: 0.1em; padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb),0.6); color: var(--accent); }
  .p2 .seg button[aria-selected="true"] .tag { border-color: rgba(var(--accent-rgb),0.7); color: var(--accent); }
  .p2 .seg .pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 999px; background: rgba(var(--accent-rgb),0.10); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.6); transition: transform 450ms var(--ease), width 450ms var(--ease); }

  @media (max-width: 720px) {
    .p2 .dlg { grid-template-columns: 1fr; }
    .p2 .side { min-height: 260px; }
    .p2 .side .lock { display: none; }
    .kond-sum { grid-template-columns: 1fr; row-gap: 10px; }
    .kond-plus { padding: 0; }
    .kond-sum .kond-big.is-sub { padding-top: 0; }
    .p2 .seg { grid-template-columns: 1fr; border-radius: 22px; gap: 4px; }
    .p2 .seg .pill { display: none; }
    .p2 .seg button[aria-selected="true"] { background: rgba(var(--accent-rgb),0.10); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.6); }
    .p2 .body { padding: 24px; }
  }
  @media (prefers-reduced-motion: reduce) { .scrim, .dlg, .stg > *, .p2 .side .box, .kond-was-p::after, .roll .d .col { transition: none !important; } }
  body.kond-scroll-lock { overflow: hidden; }
  @media (max-width: 1100px) {
    .vc .kond-step-visual .kond-box { width: min(100%, 360px); }
  }
  @media (max-width: 980px) {
    .kond { padding-left: 24px; padding-right: 24px; }
    .kond-head { grid-template-columns: 1fr; gap: 20px; }
    .kond-lead { padding-top: 0; }
    .vc .kond-step { grid-template-columns: 1fr; }
    .vc .kond-step-visual { min-height: 0; }
    .vc .kond-step-visual:has(.kond-box) { order: -1; min-height: 180px; }
    .vc .kond-step-visual .kond-box { width: min(70%, 320px); }
    .vc .kond-step-visual .kond-box[style] { width: min(56%, 260px) !important; }
    .vc .kond-step-text { max-width: 60ch; }
    .vc .kond-spot { display: none; }
  }
  @media (max-width: 640px) {
    .vc .kond-sum { grid-template-columns: 1fr; row-gap: 12px; }
    .vc .kond-sum .kond-plus { padding: 0; }
    .vc .kond-sum .kond-big.is-sub { padding-top: 0; }
    .vc .kond-path { grid-template-columns: 24px minmax(0, 1fr); gap: 0 20px; }
    .vc .kond-dot { left: calc(-1 * (20px + 12px + 9px)); }
    .vc .kond-step { padding-bottom: 48px; gap: 18px; }
    .vc .kond-step .kond-duo { grid-template-columns: 1fr; gap: 20px; }
    .vc .kond-when { font-size: clamp(24px, 7vw, 32px); }
    .vc .kond-step .kond-big { font-size: clamp(40px, 13vw, 56px); }
    .vc .kond-step-visual .kond-box { width: min(78%, 280px); }
    .vc .kond-actions .kond-buy, .vc .kond-actions .kond-ghost { width: 100%; justify-content: center; }
    .vc .kond-actions { gap: 10px; }
    .kond { padding-left: 18px; padding-right: 18px; }
    .pop { padding: 12px; align-items: flex-end; }
    .p2 .dlg { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: 28px; }
    .p2 .side { min-height: 180px; padding: 20px; }
    .p2 .side .box { width: 60%; }
    .p2 .body { padding: 22px; gap: 14px; }
    .kond-title { font-size: 26px; }
    .pop .kond-sum .kond-big { font-size: 40px; }
    .pop .kond-sum .kond-big.is-sub { font-size: 28px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .kond-row { opacity: 1 !important; transform: none !important; transition: none !important; }
    .kond-row svg path { stroke-dashoffset: 0; }
    .kond-box img { animation: none; }
  }

  /* ==== Fragen: Accordion, genau ein Eintrag offen ==== */
  #fragen, #fragen * { box-sizing: border-box; }
  /* ---- Gemeinsam ---- */
  .faq-inner { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
  .faq-side { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 20px; }
  .faq-label { font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
  .faq-h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 4.2vw, 68px); line-height: 0.9; text-transform: uppercase; }
  .faq-h2 span { display: block; }
  .faq-lead { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.64); max-width: 32ch; text-wrap: pretty; }
  .faq-list { display: flex; flex-direction: column; }
  .faq-item { border-top: 1px solid rgba(255,255,255,0.14); }
  .faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.14); }
  .faq-btn { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 24px; column-gap: 24px; align-items: start; padding: 26px 0; margin: 0; border: 0; background: transparent; color: #fff; text-align: left; cursor: pointer; font-family: var(--font-text); border-radius: 6px; }
  .faq-btn:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
  .faq-cat { display: block; font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
  .faq-q { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2vw, 26px); line-height: 1.05; text-transform: none; }
  .faq-plus { width: 24px; height: 24px; margin-top: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; transition: transform 300ms var(--ease); }
  .faq-item.is-open .faq-plus { transform: rotate(45deg); }
  .faq-panel { max-height: 0; overflow: hidden; transition: max-height 420ms var(--ease); }
  .faq-a + .faq-a { margin-top: 12px; }
  .faq-a { margin: 0; padding: 0 48px 0 0; max-width: 70ch; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.64); text-wrap: pretty; }
  .faq-panel .faq-a:last-child { padding-bottom: 30px; }

  .faq-q { transition: transform 400ms var(--ease); }
  .faq-btn:hover .faq-q { transform: translateX(6px); }
  @media (max-width: 860px) {
    #fragen { padding-left: 24px !important; padding-right: 24px !important; }
    .faq-inner { grid-template-columns: 1fr; gap: 32px; }
    .faq-side { position: static; }
    .faq-lead { max-width: 60ch; }
    .faq-btn { padding: 20px 0; }
    .faq-a + .faq-a { margin-top: 10px; }
  .faq-a { padding-right: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .faq-panel, .faq-plus, .faq-q { transition: none !important; } }

  /* ==== Wie es weitergeht: drei Schritte an einer Linie mit Punkten ==== */
  #weiter, #weiter * { box-sizing: border-box; }
  /* ---- Gemeinsam ---- */
  .next-inner { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(48px, 7vh, 88px); }
  .next-head { display: flex; flex-direction: column; gap: 18px; }
  .next-label { font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
  .next-h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 4.6vw, 76px); line-height: 0.9; text-transform: uppercase; }
  .next-h2 span { display: block; }
  .next-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
  .next-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255,255,255,0.14); overflow: hidden; }
  .next-line-fill { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: rgba(255,255,255,0.14); transform-origin: left; }
  html.js-ready .next-line-fill { transform: scaleX(0); }
  html.js-ready .next-steps.is-in .next-line-fill { transition: transform 1200ms var(--ease); transform: scaleX(1); }
  .next-step { position: relative; display: flex; flex-direction: column; gap: 16px; padding-top: 40px; transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: calc(200ms + var(--i) * 200ms); }
  html.js-ready .next-step { opacity: 0; transform: translateY(14px); }
  html.js-ready .next-steps.is-in .next-step { opacity: 1; transform: none; }
  .next-num { font-family: var(--font-display); font-size: clamp(56px, 6vw, 96px); line-height: 0.85; color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; transition: color 300ms; }
  .next-step:hover .next-num { color: var(--accent); }
  .next-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.2vw, 34px); line-height: 0.95; text-transform: uppercase; }
  .next-text { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.64); max-width: 40ch; text-wrap: pretty; }
  .next-meta { font-size: 13px; letter-spacing: 0.04em; color: rgba(255,255,255,0.5); }
  .next-foot { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
  .next-mail { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.5); }
  .next-mail a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.4); }
  .next-mail a:hover, .next-mail a:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }
  /* ==== C Punkte auf der Linie: die Haarlinie trägt drei Marken, die beim Erscheinen aufleuchten ==== */
  .next-c .next-line { top: 8px; }
  .next-c .next-step { padding-top: 44px; }
  .next-c .next-dot { position: absolute; left: 0; top: 0; width: 17px; height: 17px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.3); background: var(--page); transition: border-color 400ms, background 400ms, transform 400ms var(--ease); transition-delay: calc(200ms + var(--i) * 200ms); }
  .next-c .next-steps.is-in .next-dot { border-color: rgba(255,255,255,0.6); }
  .next-c .next-step:hover .next-dot { border-color: var(--accent); background: var(--accent); transform: scale(1.15); transition-delay: 0ms; }
  .next-c .next-num { font-size: clamp(48px, 5vw, 80px); }
  .next-c .next-step::after { content: ''; position: absolute; left: 8px; top: 17px; width: 1px; height: 20px; background: rgba(255,255,255,0.14); }

  @media (max-width: 800px) {
    #weiter { padding-left: 24px !important; padding-right: 24px !important; }
    .next-steps { grid-template-columns: 1fr; gap: 40px; padding-left: 28px; }
    .next-line { left: 0; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
    .next-line-fill { width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; }
    .next-steps.is-in .next-line-fill { transform: scaleY(1); }
    .next-step { padding-top: 0; }
    .next-c .next-dot { left: -36px; top: 4px; }
    .next-c .next-step::after { display: none; }
    .next-c .next-step { padding-top: 0; }
    .next-foot { align-items: flex-start; flex-direction: column; gap: 20px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .next-step, .next-line-fill, .next-c .next-dot { transition: none !important; opacity: 1 !important; transform: none !important; }
    .next-line-fill { transform: scaleX(1) !important; }
  }

  @property --duo-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

  /* ==== Die Zwei: versetzte Karten, Porträt färbt sich ein, Kantenlicht folgt dem Zeiger ==== */
  #diezwei, #diezwei * { box-sizing: border-box; }
  /* ---- Gemeinsam ---- */
  .duo-inner { position: relative; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(40px, 6vh, 64px); }
  .duo-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 60ch); gap: 24px 64px; align-items: end; }
  .duo-label { font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
  .duo-h2 { margin: 18px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 4.6vw, 76px); line-height: 0.9; text-transform: uppercase; text-wrap: balance; }
  .duo-h2 span { display: block; }
  .duo-lead { margin: 0; max-width: 60ch; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.64); text-wrap: pretty; }
  .duo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .duo-card { --duo-a: 0deg; position: relative; border-radius: 32px; border: 0.8px solid rgba(255,255,255,0.14); background: var(--section); overflow: hidden; transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
  html.js-ready .duo-card { opacity: 0; transform: translateY(24px); }
  html.js-ready .duo-card.is-in { opacity: 1; transform: none; }
  .duo-card:nth-child(2) { transition-delay: 150ms; }
  .duo-card::before, .duo-card::after { content: ''; position: absolute; inset: -1px; z-index: 3; border-radius: inherit; pointer-events: none; padding: 1.2px; background: conic-gradient(from var(--duo-a) at 50% 50%, rgba(var(--accent-rgb),0) 0deg, rgba(var(--accent-rgb),0) 318deg, rgba(var(--accent-rgb),0.55) 346deg, rgba(var(--accent-rgb),1) 358deg, rgba(var(--accent-rgb),0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; }
  .duo-card::after { padding: 3px; filter: blur(5px); }
  .duo-card.is-run::before { opacity: 1; animation: duo-orbit 1.2s linear 1; }
  .duo-card.is-run::after { opacity: 0.45; animation: duo-orbit 1.2s linear 1; }
  @keyframes duo-orbit { from { --duo-a: 0deg; } to { --duo-a: 360deg; } }
  .duo-photo { position: relative; aspect-ratio: 4 / 5; background: #000; overflow: hidden; }
  .duo-photo img, .duo-photo video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transform: scale(1.06); transform-origin: 50% 0%; }
  .duo-photo video { object-position: 50% 24%; transform-origin: 50% 24%; }
  .duo-photo video[aria-label="Jannis Dirksen"] { object-position: 50% 18%; transform-origin: 50% 18%; transition: transform 1200ms var(--ease); }
  .duo-card.is-in .duo-photo img, .duo-card.is-in .duo-photo video { transform: scale(1); }
  .duo-card:hover .duo-photo img, .duo-card:hover .duo-photo video { transform: scale(1.03); transition-duration: 600ms; }
  .duo-photo-tag { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.36); pointer-events: none; }
  .duo-photo.has-img .duo-photo-tag { display: none; }
  .duo-photo.has-img img, .duo-photo.has-img video { opacity: 1; }
  .duo-photo img, .duo-photo video { opacity: 0; }
  .duo-body { padding: 32px; display: flex; flex-direction: column; gap: 12px; transition: opacity 700ms var(--ease) 200ms, transform 700ms var(--ease) 200ms; }
  html.js-ready .duo-body { opacity: 0; transform: translateY(10px); }
  html.js-ready .duo-card.is-in .duo-body { opacity: 1; transform: none; }
  .duo-card:nth-child(2) .duo-body { transition-delay: 350ms; }
  .duo-name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 2.6vw, 40px); line-height: 0.95; text-transform: uppercase; }
  .duo-text { margin: 4px 0 0; font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,0.64); text-wrap: pretty; }
  .duo-text span { display: block; }
  .duo-link { align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.64); text-decoration: none; transition: color 300ms; }
  .duo-link:hover { color: #fff; }
  .duo-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--ease); }
  .duo-link:hover svg { transform: translate(2px, -2px); }
  .duo-claim { margin: 0 auto; max-width: none; text-wrap: balance; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2vw, 28px); line-height: 1.2; color: rgba(255,255,255,0.85); text-wrap: balance; transition: opacity 800ms var(--ease) 500ms, transform 800ms var(--ease) 500ms; }
  html.js-ready .duo-claim { opacity: 0; transform: translateY(10px); }
  html.js-ready .duo-claim.is-in { opacity: 1; transform: none; }

  /* ==== B Versetzt: rechte Karte tiefer, Kopf links daneben ==== */
  .vb .duo-inner { gap: 0; }
  .vb .duo-head { grid-template-columns: 1fr; gap: 24px; align-items: start; max-width: 520px; }
  .vb .duo-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: start; }
  .vb .duo-layout > .duo-head { grid-column: 1; grid-row: 1; }
  .vb .duo-cards { grid-column: 2; grid-row: 1 / span 2; }
  .vb .duo-left { grid-column: 1; grid-row: 2; }
  .vb .duo-left { display: flex; flex-direction: column; gap: clamp(40px, 6vh, 64px); }
  .vb .duo-cards { grid-template-columns: 1fr; gap: 24px; }
  .vb .duo-cards .duo-card { margin-top: clamp(64px, 12vh, 140px); }
  .vb .duo-claim { margin-top: clamp(40px, 6vh, 64px); }

  /* ==== B3 ==== */
  .b3 .duo-grau img, .b3 .duo-grau video { filter: grayscale(1) contrast(1.05); transition: transform 1200ms var(--ease), filter 1200ms var(--ease); }
  .b3 .duo-card.is-in .duo-grau img, .b3 .duo-card.is-in .duo-grau video { filter: grayscale(0.85); }
  .b3 .duo-card:hover .duo-grau img, .b3 .duo-card:hover .duo-grau video, .b3 .duo-card.is-auto .duo-grau img, .b3 .duo-card.is-auto .duo-grau video { filter: grayscale(0); transition-duration: 600ms; }
  .b3 .duo-card.is-auto .duo-photo img, .b3 .duo-card.is-auto .duo-photo video { transform: scale(1.03); transition-duration: 600ms; }
  .b3 .duo-card.is-auto .duo-kante { opacity: 1; }
  .b3 .duo-card { --mx: 50%; --my: 50%; }
  .b3 .duo-card .duo-kante { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 3; padding: 1.2px; background: radial-gradient(220px 220px at var(--mx) var(--my), rgba(96,214,208,0.9), rgba(96,214,208,0) 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity 400ms; }
  .b3 .duo-card:hover .duo-kante { opacity: 1; }
  .b3 .duo-text .z { display: block; overflow: hidden; }
  .b3 .duo-text .z i { display: block; font-style: normal; transition: transform 700ms var(--ease), opacity 700ms var(--ease); }
  html.js-ready .b3 .duo-text .z i { transform: translateY(100%); opacity: 0; }
  html.js-ready .b3 .duo-card.is-in .duo-text .z i { transform: none; opacity: 1; }
  .b3 .duo-name { overflow: hidden; }
  .b3 .duo-name i { display: block; font-style: normal; transform: translateY(100%); transition: transform 800ms var(--ease) 250ms; }
  .b3 .duo-card.is-in .duo-name i { transform: none; }
  @media (max-width: 980px) {
    #diezwei { padding-left: 24px !important; padding-right: 24px !important; }
    .duo-head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
    .vb .duo-layout { grid-template-columns: 1fr; }
    .vb .duo-cards .duo-card { margin-top: 0; }
    .vb .duo-layout > .duo-head, .vb .duo-cards, .vb .duo-left { grid-column: auto; grid-row: auto; }
  }
  @media (max-width: 800px) {
    .duo-cards { grid-template-columns: 1fr; }
    .duo-body { padding: 24px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .duo-card, .duo-body, .duo-claim, .duo-photo img, .duo-photo video, .b3 .duo-text .z i, .b3 .duo-name i { opacity: 1 !important; transform: none !important; transition: none !important; }
    .duo-card::before, .duo-card::after { display: none; }
    .b3 .duo-grau img, .b3 .duo-grau video { filter: none !important; }
  }

  /* ==== Woher wir das wissen: zwei Lebensläufe an einer Achse, Glas-Lightbox ==== */
  #beleg, #beleg *, .bel-lb, .bel-lb * { box-sizing: border-box; }
  body.bel-lock { overflow: hidden; }
  /* Gemeinsame Bausteine */
  .bel-spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(38% 30% at var(--lx, 50%) var(--ly, 30%), rgba(var(--accent-rgb),0.14), rgba(0,0,0,0) 70%); opacity: 0; transition: opacity 600ms var(--ease, cubic-bezier(0.16,1,0.3,1)); }
  .bel:hover .bel-spot, #beleg:hover .bel-spot { opacity: 1; }
  .bel-inner { position: relative; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(48px, 7vh, 88px); }
  .bel-label { display: block; margin-bottom: 20px; font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
  .bel-h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 4.6vw, 76px); line-height: 0.9; text-transform: uppercase; }
  .bel-h2 span { display: block; }
  .bel-ph { outline: 1.5px dashed rgba(255,255,255,0.4); outline-offset: 3px; color: rgba(255,255,255,0.5); }
  .bel-micro { margin: 0; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.5); }
  .bel-tile { position: relative; display: flex; flex-direction: column; gap: 12px; text-align: left; padding: 0; border: 0; background: transparent; color: #fff; font-family: var(--font-text); cursor: zoom-in; }
  .bel-tile:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 22px; }
  .bel-img { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; background: var(--section); transition: transform 400ms var(--ease); }
  .bel-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); visibility: hidden; }
  .bel-img.has-img img { visibility: visible; }
  .bel-img::after { content: attr(data-ph); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.36); border: 1.5px dashed rgba(255,255,255,0.18); border-radius: inherit; pointer-events: none; }
  .bel-img.has-img::after { display: none; }
  .bel-tile:hover .bel-img img { transform: scale(1.03); }
  .bel-cap { display: flex; flex-direction: column; gap: 4px; }
  .bel-cap b { font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
  .bel-cap span { font-size: 13px; color: rgba(255,255,255,0.5); }
  .bel-in { transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
  html.js-ready .bel-in { opacity: 0; transform: translateY(14px); }
  html.js-ready .is-in .bel-in { opacity: 1; transform: none; }
  .bel-num { font-family: var(--font-display); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .bel-plus { color: var(--accent); }
  .bel-klein { font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }

  /* ==== X Zwei Lebensläufe: geteilte Bühne, links Jannis, rechts Patryk, in der Mitte eine gemeinsame Zeitachse ==== */
  .vx .bel-split { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); gap: 0 clamp(20px, 3vw, 48px); align-items: start; }
  .vx .bel-person { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
  .vx .bel-person-head { display: flex; flex-direction: column; gap: 14px; }
  .vx .bel-person-name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.4vw, 54px); line-height: 0.92; text-transform: uppercase; }
  .vx .bel-person-role { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.64); max-width: 44ch; }
  .vx .bel-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(255,255,255,0.14); }
  .vx .bel-fact .bel-num { font-size: clamp(36px, 3.6vw, 60px); }
  .vx .bel-fact .bel-klein { display: block; margin-top: 8px; }
  .vx .bel-fact p { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.64); max-width: 30ch; }
  .vx .bel-axis { position: relative; align-self: stretch; display: block; }
  .vx .bel-axis::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255,255,255,0.14); }
  .vx .bel-axis-fill { position: absolute; top: 0; left: 50%; width: 1px; height: 0%; background: var(--accent); transition: height 150ms linear; }
  .vx .bel-axis-mark { position: absolute; left: 0; top: 0; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; background: none; transform: translateY(-50%); transition: top 150ms linear; }
  .vx .bel-axis-mark i { position: relative; width: 9px; height: 9px; border-radius: 999px; background: var(--accent); animation: bel-herz 3.2s ease-in-out infinite; }
  .vx .bel-axis-mark i::before, .vx .bel-axis-mark i::after { content: ''; position: absolute; inset: -6px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb),0.6); animation: bel-welle 3.2s ease-out infinite; }
  .vx .bel-axis-mark i::after { animation-delay: 1.6s; }
  @keyframes bel-herz { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.16), 0 0 12px rgba(var(--accent-rgb),0.3); } 30% { transform: scale(1.28); box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0.26), 0 0 22px rgba(var(--accent-rgb),0.55); } 50% { transform: scale(1.12); } 66% { transform: scale(1.2); box-shadow: 0 0 0 5px rgba(var(--accent-rgb),0.2), 0 0 16px rgba(var(--accent-rgb),0.45); } }
  @keyframes bel-welle { 0% { transform: scale(0.7); opacity: 0; } 15% { opacity: 0.6; } 100% { transform: scale(2.4); opacity: 0; } }
  .vx .bel-axis-mark b { position: relative; font-family: var(--font-display); font-weight: 400; font-size: 13px; color: rgba(255,255,255,0.6); letter-spacing: 0.04em; text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9); }
  .vx .bel-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .vx .bel-strip .bel-tile:nth-child(1) { grid-column: 1 / span 2; }
  .vx .bel-strip .bel-tile:nth-child(1) .bel-img { aspect-ratio: 16 / 9; }
  .vx .bel-docs-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .vx .bel-docs-row .bel-img { aspect-ratio: 4 / 3; border: 0.8px solid rgba(255,255,255,0.14); border-radius: 12px; }
  .vx .bel-docs-row .bel-img img { object-position: top; }
  .vx .bel-docs-row .bel-cap b { font-size: 10px; }
  .vx .bel-docs-row .bel-cap span { font-size: 12px; }
  .vx .bel-tile .bel-img { border-radius: 16px; }
  .vx .bel-img::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0) 40%); opacity: 0; transition: opacity 400ms var(--ease); pointer-events: none; }
  .vx .bel-tile:hover .bel-img::before { opacity: 1; }
  .vx .bel-person[data-side="r"] .bel-person-head, .vx .bel-person[data-side="r"] .bel-fact { text-align: right; }
  .vx .bel-person[data-side="r"] .bel-fact p, .vx .bel-person[data-side="r"] .bel-person-role { margin-left: auto; }
  .vx .bel-person[data-side="r"] .bel-facts { direction: rtl; }
  .vx .bel-person[data-side="r"] .bel-facts > * { direction: ltr; }
  .vx .bel-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: start; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.14); }
  .vx .bel-foot p { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.64); max-width: 60ch; }
  @media (max-width: 980px) { .vx .bel-split { grid-template-columns: 1fr; gap: 56px; } .vx .bel-axis { display: none; } .vx .bel-person[data-side="r"] .bel-person-head, .vx .bel-person[data-side="r"] .bel-fact { text-align: left; } .vx .bel-person[data-side="r"] .bel-fact p, .vx .bel-person[data-side="r"] .bel-person-role { margin-left: 0; } .vx .bel-person[data-side="r"] .bel-facts { direction: ltr; } .vx .bel-foot { grid-template-columns: 1fr; } }
  @media (max-width: 620px) { .vx .bel-docs-row { grid-template-columns: 1fr 1fr; } .vx .bel-facts { grid-template-columns: 1fr 1fr; gap: 16px; } .vx .bel-fact .bel-num { font-size: 34px; } .vx .bel-fact p { display: none; } .vx .bel-strip { gap: 12px; } .vx .bel-person-name { font-size: 32px; } }

  /* Lightbox: Glas auf verwischtem Seitenhintergrund, Bild links, Karte rechts */
  .bel-lb { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 3vw, 40px); background: rgba(4,6,9,0.55); -webkit-backdrop-filter: blur(28px) saturate(1.2); backdrop-filter: blur(28px) saturate(1.2); opacity: 0; transition: opacity 400ms var(--ease); color: #fff; }
  .bel-lb[hidden] { display: none; }
  .bel-lb.is-on { opacity: 1; }
  .bel-lb-inner { position: relative; width: min(1400px, 100%); max-height: 100%; display: flex; align-items: stretch; gap: 0; --lbh: min(calc(100vh - 2 * clamp(16px, 3vw, 40px)), calc(min(1400px, 100vw - 2 * clamp(16px, 3vw, 40px)) * 0.64 * 2 / 3)); height: var(--lbh); border-radius: 28px; overflow: hidden; outline: none; background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.06)); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 40px 120px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.25); transform: translateY(24px); transition: transform 600ms var(--ease); }
  .bel-lb.is-on .bel-lb-inner { transform: none; }
  .bel-lb-inner::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(60% 50% at var(--gx, 30%) var(--gy, 20%), rgba(255,255,255,0.10), rgba(255,255,255,0) 70%); transition: background 200ms linear; }
  .bel-lb-img { position: relative; flex: 0 0 auto; width: calc(var(--lbh) * 3 / 2); height: var(--lbh); background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
  .bel-lb-img img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 500ms var(--ease), transform 600ms var(--ease); }
  .bel-lb-img.has-img img { opacity: 1; transform: none; }
  .bel-lb-img { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
  .bel-lb-img img { -webkit-user-drag: none; pointer-events: none; }
  .bel-lb-side { touch-action: pan-y; }
  .bel-lb-img.is-drag img { transition: none; }
  .bel-lb-lader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; pointer-events: none; opacity: 0; transition: opacity 300ms var(--ease) 200ms; }
  .bel-lb-img:not(.has-img) .bel-lb-lader { opacity: 1; }
  .bel-lb-lader i { position: relative; display: block; width: 56px; height: 56px; }
  .bel-lb-lader i::before { content: ''; position: absolute; inset: 0; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); }
  .bel-lb-lader i::after { content: ''; position: absolute; inset: -1px; border-radius: 999px; background: conic-gradient(from 0deg, rgba(var(--accent-rgb),0) 0deg, rgba(var(--accent-rgb),0) 300deg, rgba(var(--accent-rgb),0.6) 340deg, rgb(var(--accent-rgb)) 358deg, rgba(var(--accent-rgb),0) 360deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px)); animation: bel-ring 1.1s linear infinite; }
  .bel-lb-lader span { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); animation: bel-puls 1.6s ease-in-out infinite; }
  @keyframes bel-ring { to { transform: rotate(360deg); } }
  @keyframes bel-puls { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
  .bel-lb-side { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 3vw, 40px); overflow: hidden; height: var(--lbh); border-left: 1px solid rgba(255,255,255,0.12); }
  .bel-lb-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), rgba(0,0,0,0)); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), rgba(0,0,0,0)); }
  .bel-lb-scroll.is-end { -webkit-mask-image: none; mask-image: none; }
  .bel-lb-ctrl { flex: 0 0 auto; }
  .bel-lb-side > * { opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
  .bel-lb.is-on .bel-lb-side > * { opacity: 1; transform: none; }
  .bel-lb-side > :nth-child(2) { transition-delay: 60ms; } .bel-lb-side > :nth-child(3) { transition-delay: 120ms; } .bel-lb-side > :nth-child(4) { transition-delay: 180ms; }
  .bel-lb-count { font-size: 12px; color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
  .bel-lb-cap b { display: block; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.4vw, 38px); line-height: 0.95; text-transform: uppercase; text-wrap: balance; color: #fff; }
  .bel-lb-cap span { display: block; margin-top: 10px; font-size: 13px; color: rgba(255,255,255,0.5); }
  .bel-lb-desc { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.72); }
  .bel-lb-link { margin: 0; font-size: 13px; }
  .bel-lb-link a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.4); }
  .bel-lb-link a:hover { text-decoration-color: #fff; }
  .bel-lb-ctrl { margin-top: 0; display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.10); }
  .bel-lb-x, .bel-lb-nav { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.08); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); transition: background 300ms, transform 300ms var(--ease); }
  .bel-lb-x:hover, .bel-lb-nav:hover { background: rgba(255,255,255,0.16); transform: translateY(-1px); }
  .bel-lb-x { position: absolute; right: 16px; top: 16px; z-index: 3; }
  .bel-lb-x:hover { transform: rotate(90deg); }
  .bel-lb-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .bel-lb-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .bel-lb-nav.is-next { margin-left: auto; }
  @media (max-width: 900px) {
    #beleg { padding-left: 24px !important; padding-right: 24px !important; }
    .bel-spot { display: none; }
    .bel-h2 { font-size: clamp(34px, 8.6vw, 60px); }
    .bel-lb { padding: 0; align-items: flex-end; }
    .bel-lb-inner { flex-direction: column; height: auto; max-height: 100dvh; border-radius: 24px 24px 0 0; border-bottom: 0; transform: translateY(40px); }
    .bel-lb-img { width: 100%; height: 46vh; }
    .bel-lb-side { height: 50dvh; }
    .bel-lb-side { border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); padding: 22px 20px 28px; }
    .bel-lb-cap b { font-size: 24px; }
    .bel-lb-x { top: 12px; right: 12px; }
    }
  @media (max-width: 620px) {
    #beleg { padding: 64px 18px !important; }
    .bel-inner { gap: 40px; }
    .bel-h2 { font-size: clamp(30px, 9.5vw, 44px); }
    .bel-cap b { font-size: 10px; } .bel-cap span { font-size: 12px; }
    .bel-lb-img { height: 40vh; }
    .bel-lb-side { height: 56dvh; }
  }

  @media (prefers-reduced-motion: reduce) {
    .bel-tile, .bel-lb, .bel-img, .bel-img img { transition: none !important; opacity: 1 !important; transform: none !important; }
  }

  @media (max-width: 1100px) { [data-footgrid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [data-footgrid] > :first-child { grid-column: 1 / -1; } }
  @media (max-width: 560px) { [data-footgrid] { grid-template-columns: 1fr !important; gap: 32px !important; } }

  /* ==== Kontaktformular: Popup im Glas, fünf Schritte ==== */
  .kf-lage { position: fixed; inset: 0; z-index: 940; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 32px); background: rgba(4,6,9,0.62); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); opacity: 0; transition: opacity 420ms var(--ease); color: #fff; }
  .kf-lage.kf-an { opacity: 1; }
  .kf-lage[hidden] { display: none; }
  .kf-lage, .kf-lage * { box-sizing: border-box; font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; }
  @media (max-width: 900px) {
    .kf-lage { padding: 14px; align-items: center; }
    .kf-wrap { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; padding: 78px 18px 26px; }
    /* Kopfzeile wie im Rechtstexte-Popup: Kreuz und Ring liegen über dem Inhalt, nicht darin */
    .kf-ring { position: fixed !important; right: 70px; top: 19px; width: 44px; height: 44px; }
    .kf-zu-ring { position: fixed !important; right: 16px; top: 16px; width: 44px; height: 44px; }
    .kf-schliessen svg { width: 16px; height: 16px; }
    .kf-top { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 0 116px 16px 0; margin-bottom: 18px; }
    .kf-ring { position: absolute; right: 64px; top: 18px; width: 46px; height: 46px; }
    .kf-frage { font-size: 26px; }
    .kf-hint { font-size: 13px; }
    .kf-reihe { grid-template-columns: 1fr; gap: 12px; }
    .kf-chip { padding: 12px 15px; font-size: 13px; min-height: 44px; }
    .kf-feld input, .kf-feld textarea { font-size: 16px; }
    .kf-feld textarea { min-height: 132px; }
    .kf-cta { width: 100%; height: 54px; }
    .kf-nav { flex-direction: column-reverse; gap: 10px; margin-top: 22px; }
    .kf-nav .kf-cta { margin-left: 0 !important; }
    .kf-team-reihe { grid-template-columns: 1fr; }
    .kf-wahl-knopf { min-height: 60px; }
    .kf-wahl-opt { padding: 14px 12px; font-size: 14px; }
    .kf-send-text { font-size: 26px; }
  }
  .kf-wrap { width: 100%; max-height: calc(100vh - 2 * clamp(12px, 3vw, 32px)); overflow-y: auto; padding: clamp(24px, 4vw, 48px); transform: translateY(24px); transition: transform 560ms var(--ease); }
  .kf-huelle { position: relative; width: min(720px, 100%); display: flex; flex-direction: column; align-items: flex-end; }
  .kf-lage.kf-an .kf-wrap { transform: none; }
  .kf-wrap h2, .kf-frage { font-family: 'Imbue', serif; }
  .kf-sendet .kf-schliessen { opacity: 0; pointer-events: none; }
  .kf-schliessen { position: fixed; right: clamp(16px, 2.5vw, 32px); top: clamp(16px, 2.5vw, 32px); z-index: 950; transition: opacity 300ms; z-index: 70; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 300ms var(--ease), background 300ms; }
  .kf-schliessen:hover { transform: rotate(90deg); background: rgba(255,255,255,0.12); }
  .kf-schliessen svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  /* Glas */
  .kf-glas { position: relative; border-radius: 32px; border: 1px solid rgba(255,255,255,0.16); background: linear-gradient(155deg, rgba(20,26,34,0.72), rgba(8,11,16,0.62) 52%, rgba(16,21,28,0.7)); box-shadow: 0 40px 110px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(42px) saturate(1.4); backdrop-filter: blur(42px) saturate(1.4); overflow: hidden; }
  .kf-glas::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(52% 40% at var(--gx, 30%) var(--gy, 18%), rgba(255,255,255,0.14), rgba(255,255,255,0) 68%); }
  .kf-glas::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.06) 47%, rgba(255,255,255,0) 56%); }
  .kf-glas > * { position: relative; z-index: 1; }

  /* Typografie */
  .kf-kicker { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
  .kf-lage h2 { margin: 12px 0 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 0.92; font-size: clamp(30px, 4vw, 52px); color: #fff; }
  .kf-lead { margin: 16px 0 0; max-width: 52ch; font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,0.66); text-wrap: pretty; }
  .kf-mikro { font-size: 11.5px; line-height: 1.6; color: rgba(255,255,255,0.45); }

  /* Felder */
  .kf-feld { position: relative; }
  .kf-feld input, .kf-feld textarea { width: 100%; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 22px 16px 10px; font-size: 15px; font-weight: 300; color: #fff; caret-color: #fff; transition: border-color 400ms var(--ease), background 400ms var(--ease), box-shadow 400ms var(--ease); }
  .kf-feld textarea { min-height: 108px; resize: vertical; padding-top: 26px; line-height: 1.6; }
  .kf-feld label { position: absolute; left: 17px; right: 17px; top: 16px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,0.42); pointer-events: none; transform-origin: left top; transition: transform 350ms var(--ease), color 350ms var(--ease); }
  .kf-feld input:focus, .kf-feld textarea:focus { outline: none; border-color: rgba(var(--accent-rgb),0.55); background: rgba(255,255,255,0.06); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.1); }
  .kf-feld input:focus + label, .kf-feld textarea:focus + label, .kf-feld input:not(:placeholder-shown) + label, .kf-feld textarea:not(:placeholder-shown) + label { transform: translateY(-9px) scale(0.74); color: rgba(255,255,255,0.55); }
  .kf-feld input::placeholder, .kf-feld textarea::placeholder { color: transparent; }
  .kf-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 620px) { .kf-reihe { grid-template-columns: 1fr; } }

  /* Chips und Segmente */
  .kf-gruppe { display: flex; flex-direction: column; gap: 12px; }
  .kf-gruppe > span { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
  .kf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .kf-chip { padding: 10px 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.7); cursor: pointer; font-size: 12.5px; transition: border-color 320ms, background 320ms, color 320ms, transform 320ms var(--ease); }
  .kf-chip:hover { color: #fff; transform: translateY(-1px); }
  .kf-chip[aria-pressed="true"] { border-color: rgba(var(--accent-rgb),0.6); background: rgba(var(--accent-rgb),0.12); color: #fff; }

  .kf-team-reihe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; margin-top: 14px; animation: kf-auf 450ms var(--ease) both; }
  .kf-team-anzahl { display: flex; flex-direction: column; gap: 7px; align-self: stretch; }
  .kf-team-anzahl .kf-chips { flex: 1; }
  .kf-team-anzahl > span { padding-left: 2px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
  .kf-team-anzahl .kf-chips { gap: 6px; }
  .kf-team-anzahl .kf-chip { height: 100%; min-height: 44px; padding: 0 15px; font-size: 12px; display: inline-flex; align-items: center; }
  .kf-team-anzahl .kf-chips { align-items: stretch; }
  .kf-team-reihe .kf-feld input { min-height: 63px; }
  @media (max-width: 620px) { .kf-team-reihe { grid-template-columns: 1fr; } }
  [data-andere-feld], [data-team-feld] { display: none; }
  [data-andere-feld].kf-zeig { display: block; }
  [data-team-feld].kf-zeig { display: grid; }
  .kf-feld-andere { animation: kf-auf 450ms var(--ease) both; }
  .kf-feld-andere[hidden] { display: none; }

  /* Auswahlfeld im Glas mit Zeichen je Weg */
  .kf-wahl { position: relative; z-index: 5; }
  .kf-wahl[data-offen] { z-index: 30; }
  .kf-wahl-label { position: absolute; left: 17px; top: 9px; z-index: 2; font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); pointer-events: none; }
  .kf-wahl-knopf { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 24px 42px 9px 16px; font-size: 15px; font-weight: 300; cursor: pointer; transition: border-color 400ms var(--ease), background 400ms var(--ease), box-shadow 400ms var(--ease); }
  .kf-wahl-knopf:hover { background: rgba(255,255,255,0.055); }
  .kf-wahl[data-offen] .kf-wahl-knopf, .kf-wahl-knopf:focus-visible { outline: none; border-color: rgba(var(--accent-rgb),0.55); background: rgba(255,255,255,0.06); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.1); }
  .kf-wahl-pfeil { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; fill: none; stroke: rgba(255,255,255,0.5); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: transform 400ms var(--ease); }
  .kf-wahl[data-offen] .kf-wahl-pfeil { transform: translateY(-50%) rotate(180deg); }
  .kf-wahl-ic { display: inline-flex; flex: none; }
  .kf-wahl-ic svg { width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .kf-glas.kf-offen { overflow: visible; }
  .kf-wahl-liste { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.18); background: rgba(12,16,22,0.9); box-shadow: 0 24px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.16); -webkit-backdrop-filter: blur(32px) saturate(1.3); backdrop-filter: blur(32px) saturate(1.3); animation: kf-auf 320ms var(--ease) both; }
  .kf-wahl-liste[hidden] { display: none; }
  .kf-wahl-liste.kf-hoch { top: auto; bottom: calc(100% + 8px); }
  .kf-wahl-opt { display: flex; align-items: center; gap: 11px; text-align: left; padding: 11px 12px; border: 0; border-radius: 12px; background: none; color: rgba(255,255,255,0.72); cursor: pointer; font-size: 13.5px; font-weight: 300; transition: background 260ms, color 260ms; }
  .kf-wahl-opt:hover, .kf-wahl-opt:focus-visible { background: rgba(255,255,255,0.08); color: #fff; outline: none; }
  .kf-wahl-opt[aria-selected="true"] { color: #fff; background: rgba(var(--accent-rgb),0.12); }

  /* Knopf */
  .kf-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 58px; padding: 0 26px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(255,255,255,0.3); border-top-color: rgba(255,255,255,0.55); background: linear-gradient(160deg, rgba(255,255,255,0.2), rgba(255,255,255,0.07) 60%, rgba(255,255,255,0.13)); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 12px 30px rgba(0,0,0,0.4); transition: transform 400ms var(--ease), background 400ms; }
  .kf-cta:hover { transform: translateY(-2px); background: linear-gradient(160deg, rgba(255,255,255,0.28), rgba(255,255,255,0.11) 60%, rgba(255,255,255,0.19)); }
  .kf-cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.4), rgba(255,255,255,0)); transform: skewX(-20deg); transition: left 800ms var(--ease); }
  .kf-cta:hover::after { left: 120%; }
  .kf-cta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .kf-cta[disabled] { opacity: 0.45; cursor: default; transform: none; }
  .kf-geist { background: transparent; border: 1px solid rgba(255,255,255,0.2); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* Versand: Sende, Versandt, Angekommen */
  #vv-kontakt-karte.kf-sendet { overflow: hidden; }
  .kf-sendet .kf-formular { opacity: 0.25; filter: blur(3px); transition: opacity 400ms var(--ease), filter 400ms var(--ease); pointer-events: none; }
  .kf-send-lage { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; animation: kf-auf 400ms var(--ease) both; }
  .kf-send-ring { position: relative; width: 66px; height: 66px; }
  .kf-send-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .kf-send-ring circle { fill: none; stroke-width: 2; }
  .kf-send-ring .kf-bahn { stroke: rgba(255,255,255,0.12); }
  .kf-send-ring .kf-lauf { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 194; stroke-dashoffset: 194; transition: stroke-dashoffset 900ms var(--ease); }
  .kf-send-ring.kf-dreht svg { animation: kf-dreh 1.1s linear infinite; }
  .kf-send-ring.kf-dreht .kf-lauf { stroke-dashoffset: 145; }
  .kf-send-ring.kf-voll .kf-lauf { stroke-dashoffset: 0; }
  @keyframes kf-dreh { to { transform: rotate(270deg); } }
  .kf-send-ring .kf-haken-ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 300ms; }
  .kf-send-ring.kf-fertig .kf-haken-ic { opacity: 1; }
  .kf-send-ring .kf-haken-ic svg { width: 26px; height: 26px; transform: none; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
  .kf-send-ring.kf-fertig .kf-haken-ic svg { animation: kf-zeichnen 600ms var(--ease) 80ms forwards; }
  .kf-send-text { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); text-transform: uppercase; letter-spacing: 0.02em; color: #fff; transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
  .kf-send-text.kf-aus { opacity: 0; transform: translateY(-6px); }
  .kf-send-unter { margin: 0; width: min(40ch, 100%); text-align: center; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.66); opacity: 0; transition: opacity 400ms var(--ease); }
  .kf-send-unter.kf-an { opacity: 1; }

  /* Schließt von selbst: Ring läuft ab, dann fährt die Karte weg */
  .kf-zu-ring { position: absolute; right: clamp(24px, 4vw, 48px); top: clamp(24px, 4vw, 48px); z-index: 80; width: 58px; height: 58px; animation: kf-auf 400ms var(--ease) both; }
  .kf-zu-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .kf-zu-ring circle { fill: none; stroke-width: 2; }
  .kf-zu-ring .kf-bahn { stroke: rgba(255,255,255,0.12); }
  .kf-zu-ring .kf-lauf { stroke: rgba(255,255,255,0.55); stroke-linecap: round; stroke-dasharray: 179; stroke-dashoffset: 0; transition: stroke-dashoffset linear; }
  .kf-zu-ring { cursor: pointer; }
  .kf-zu-ring .kf-zu-text { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: auto; cursor: pointer; font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); transition: color 300ms; }
  .kf-zu-ring:hover .kf-zu-text { color: #fff; }
  .kf-zu-ring:hover .kf-bahn { stroke: rgba(255,255,255,0.28); }
  .kf-zu-ring:hover .kf-lauf { stroke: #fff; }
  .kf-zu-ring:hover b { color: #fff; }
  .kf-zu-ring .kf-bahn, .kf-zu-ring b { transition: stroke 300ms, color 300ms; }
  .kf-zu-ring::after { content: ''; position: absolute; inset: -6px; border-radius: 999px; background: rgba(255,255,255,0.06); opacity: 0; transition: opacity 300ms; pointer-events: none; }
  .kf-zu-ring:hover::after { opacity: 1; }
  @media (max-width: 620px) { .kf-zu-ring .kf-zu-text { display: none; } }
  .kf-zu-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.7); }
  .kf-zu-ring button { position: absolute; inset: 0; border: 0; background: none; cursor: pointer; border-radius: 999px; }
  #vv-kontakt-karte.kf-karte-zu { opacity: 0; transform: translateY(18px) scale(0.985); transition: opacity 620ms var(--ease), transform 620ms var(--ease); pointer-events: none; }

  /* Danke */
  .kf-danke { display: none; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 20px 0; }
  .kf-fertig .kf-danke { display: flex; animation: kf-auf 700ms var(--ease) both; }
  .kf-fertig .kf-formular { display: none; }
  .kf-haken { width: 62px; height: 62px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb),0.5); background: rgba(var(--accent-rgb),0.1); display: flex; align-items: center; justify-content: center; }
  .kf-haken svg { width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: kf-zeichnen 700ms var(--ease) 160ms forwards; }
  @keyframes kf-zeichnen { to { stroke-dashoffset: 0; } }
  @keyframes kf-auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  /* ===== A Ein Feld nach dem anderen ===== */
  .kf-wrap { width: min(720px, 100%); padding: clamp(28px, 4vw, 52px); }
  .kf-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 26px; margin-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .kf-pers { display: flex; align-items: center; gap: 14px; }
  .kf-pers-fotos { position: relative; z-index: 0; isolation: isolate; display: flex; }
  .kf-pers-fotos img { display: block; width: 46px; height: 46px; border-radius: 999px; object-fit: cover; box-shadow: 0 4px 14px rgba(0,0,0,0.45); }
  .kf-pers-fotos img + img { margin-left: -6px; position: relative; z-index: -1; -webkit-mask: radial-gradient(circle 26px at -16px 50%, transparent 25.5px, #000 26.5px); mask: radial-gradient(circle 26px at -16px 50%, transparent 25.5px, #000 26.5px); }
  .kf-pers b { display: block; font-size: 13px; font-weight: 500; }
  .kf-pers small { display: block; font-size: 12px; color: rgba(255,255,255,0.5); }
  .kf-zusagen { display: flex; flex-direction: column; gap: 9px; margin: 18px 0 0; padding: 0; list-style: none; }
  .kf-zusagen li { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.58); }
  .kf-kompakt .kf-top { padding-bottom: 20px; margin-bottom: 22px; }
  .kf-zusagen svg { width: 14px; height: 14px; margin-top: 2px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  @media (max-width: 620px) { .kf-top { flex-direction: column; } .kf-ring { align-self: flex-end; margin-top: -12px; } }
  .kf-ring { width: 58px; height: 58px; flex: none; position: relative; }
  .kf-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .kf-ring circle { fill: none; stroke-width: 2; }
  .kf-ring .kf-bahn { stroke: rgba(255,255,255,0.12); }
  .kf-ring .kf-lauf { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 700ms var(--ease); }
  .kf-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 16px; font-weight: 400; color: #fff; }
  .kf-schritt { display: none; animation: kf-auf 600ms var(--ease) both; }
  .kf-schritt.is-cur { display: block; }
  .kf-frage { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(24px, 3.2vw, 38px); text-transform: uppercase; line-height: 1; color: #fff; }
  .kf-hint { margin: 0 0 22px; font-size: 13.5px; color: rgba(255,255,255,0.5); }
  .kf-nav { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; }

  @media (max-width: 900px) {
    /* Die Kachel wächst mit dem Inhalt und sitzt am unteren Rand */
    .kf-wrap { width: 100%; height: auto; max-height: calc(100dvh - 28px); border-radius: 26px; border: 1px solid rgba(255,255,255,0.16); padding: 22px 18px 24px; }
    .kf-huelle { width: 100%; }
    /* Kopfzone: Kreuz und Ring auf einer Linie, oben rechts in der Kachel */
    .kf-ring { position: absolute; right: 66px; top: 20px; width: 42px; height: 42px; z-index: 85; margin-top: 0; align-self: auto; }
    .kf-huelle { gap: 0; }
    .kf-huelle > .kf-schliessen { position: absolute; right: 16px; top: 20px; width: 42px; height: 42px; z-index: 90; }
    .kf-lage .kf-schliessen { position: absolute; }
    .kf-wrap { overflow-y: auto; }
    .kf-ring b { font-size: 13px; }
    .kf-zu-ring { position: absolute; right: 16px; top: 20px; width: 42px; height: 42px; }
    .kf-top { position: relative; }
    .kf-nav { margin-top: 22px; }
  }

  /* Fließtext, Dienste-Blöcke mit Unterziffern, Rechteliste */
  .ds-p, .agb-fest { margin: 0 0 14px; font-size: 14.5px; line-height: 1.75; color: rgba(255,255,255,0.72); text-wrap: pretty; }
  .ds-p:last-child, .agb-fest:last-child { margin-bottom: 0; }
  main.ds { counter-reset: ds-kap; }
  .ds-sec { counter-increment: ds-kap; counter-reset: ds-unter; }
  .ds-dienst { position: relative; margin: 18px 0 22px; padding: 22px 24px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(150deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012) 65%); }
  .ds-dienst::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; border-radius: 999px; background: linear-gradient(180deg, rgba(var(--accent-rgb),0.55), rgba(var(--accent-rgb),0.08)); }
  .ds-dienst-name { counter-increment: ds-unter; display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.09); font-family: var(--font-display); font-size: 18px; font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; color: #fff; }
  .ds-dienst-name::before { content: counter(ds-kap, decimal-leading-zero) "." counter(ds-unter); flex: none; font-family: var(--font-text); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--accent); }
  .ds-dl { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 0; margin: 0; }
  .ds-dl dt { padding: 9px 0; font-size: 10.5px; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(255,255,255,0.42); border-top: 1px solid rgba(255,255,255,0.06); }
  .ds-dl dd { margin: 0; padding: 9px 0; font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,0.78); border-top: 1px solid rgba(255,255,255,0.06); }
  .ds-dl dt:first-of-type, .ds-dl dt:first-of-type + dd { border-top: 0; }
  .ds-hervor { border-color: rgba(var(--accent-rgb),0.3); background: linear-gradient(150deg, rgba(var(--accent-rgb),0.07), rgba(255,255,255,0.012) 65%); }
  .ds-rechte { list-style: none; margin: 4px 0 18px; padding: 0; }
  .ds-rechte li { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.08); }
  .ds-rechte li:first-child { border-top: 0; }
  .ds-recht-t { font-size: 13.5px; font-weight: 500; color: #fff; }
  .ds-recht-t span { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
  .ds-recht-e { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,0.7); }
  .ds-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.35); }
  .ds-link:hover, .ds-link:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }
  /* AGB: Absätze mit hängender Nummer, Anlagenblöcke */
  .agb-abs { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0; margin: 0 0 13px; font-size: 14.5px; line-height: 1.75; color: rgba(255,255,255,0.72); }
  .agb-nr { font-variant-numeric: tabular-nums; font-size: 12px; color: rgba(255,255,255,0.4); padding-top: 0.18em; }
  .agb-anlage { margin-top: 12px; }
  .agb-block { margin: 16px 0 22px; padding: 22px 24px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(150deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01) 65%); }
  .agb-block-h { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.09); font-family: var(--font-display); font-size: 17px; font-weight: 400; text-transform: uppercase; color: #fff; }
  .agb-block .agb-fest { margin-bottom: 12px; font-size: 13.5px; }
  #anlage1 .agb-block .agb-fest { position: relative; padding-left: 20px; }
  #anlage1 .agb-block .agb-fest::before { content: ''; position: absolute; left: 0; top: 0.66em; width: 7px; height: 1px; background: rgba(var(--accent-rgb),0.7); }
  .agb-block .agb-fest strong { display: block; margin-bottom: 2px; font-weight: 500; color: #fff; }
  @media (max-width: 720px) {
    .ds-dl { grid-template-columns: 1fr; }
    .ds-dl dt { padding-bottom: 2px; border-top: 1px solid rgba(255,255,255,0.06); }
    .ds-dl dd { padding-top: 2px; border-top: 0; }
    .ds-dl dt:first-of-type + dd { border-top: 0; }
    .ds-rechte li { grid-template-columns: 1fr; gap: 6px; }
    .ds-dienst, .agb-block { padding: 18px 18px; }
  }

  /* Abschnittsüberschriften: Ziffer als eigene Marke über der Linie, dann der Titel */
  .ds-h2, .agb-h2 { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline; gap: 0; margin: 0 0 18px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 2.1vw, 26px); line-height: 1.06; letter-spacing: 0.01em; text-transform: uppercase; color: #fff; }
  .ds-h2-nr, .agb-h2-nr { font-family: var(--font-text); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; color: var(--accent); align-self: start; padding-top: 0.35em; }
  .ds-sec, .agb-sec { scroll-margin-top: 24px; }
  .ds-sec > *:not(.ds-h2), .agb-sec > *:not(.agb-h2) { margin-left: 44px; }
  @media (max-width: 720px) {
    .ds-h2, .agb-h2 { grid-template-columns: 1fr; gap: 8px; padding-top: 18px; }
    .ds-h2-nr, .agb-h2-nr { padding-top: 0; }
    .ds-sec > *:not(.ds-h2), .agb-sec > *:not(.agb-h2) { margin-left: 0; }
  }

  /* Inhaltsverzeichnisse: zwei Spalten, Ziffern als Randmarken, Haarlinien */
  .ds-toc, .agb-toc, .imp-toc { margin: 28px 0 44px; padding: 26px 0 8px; border-top: 1px solid rgba(255,255,255,0.14); }
  .ds-toc-label, .agb-toc-label, .imp-toc-label { display: block; margin-bottom: 14px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.42); }
  .ds-toc ol, .agb-toc ol, .imp-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; }
  .ds-toc li, .agb-toc li, .imp-toc li { list-style: none; border-top: 1px solid rgba(255,255,255,0.07); }
  .ds-toc li::marker, .agb-toc li::marker, .imp-toc li::marker { content: none; }
  .ds-toc li:first-child, .agb-toc li:first-child, .imp-toc li:first-child { border-top: 0; }
  .ds-toc a, .agb-toc a, .imp-toc a { display: grid; grid-template-columns: 30px minmax(0, 1fr) 12px; align-items: baseline; gap: 12px; padding: 10px 0; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,0.72); text-decoration: none; transition: color 300ms var(--ease), padding-left 300ms var(--ease); }
  .ds-toc a::after, .agb-toc a::after, .imp-toc a::after { content: ''; width: 10px; height: 1px; align-self: center; background: rgba(255,255,255,0.2); opacity: 0; transform: translateX(-4px); transition: opacity 300ms var(--ease), transform 300ms var(--ease), background 300ms; }
  .ds-toc a:hover, .agb-toc a:hover, .imp-toc a:hover, .ds-toc a:focus-visible, .agb-toc a:focus-visible, .imp-toc a:focus-visible { color: #fff; padding-left: 4px; }
  .ds-toc a:hover::after, .agb-toc a:hover::after, .imp-toc a:hover::after { opacity: 1; transform: none; background: var(--accent); }
  .ds-toc-nr, .agb-toc-nr, .imp-toc-nr { font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; color: rgba(255,255,255,0.34); transition: color 300ms; }
  .ds-toc a:hover .ds-toc-nr, .agb-toc a:hover .agb-toc-nr, .imp-toc a:hover .imp-toc-nr { color: var(--accent); }
  @media (max-width: 720px) { .ds-toc ol, .agb-toc ol, .imp-toc ol { grid-template-columns: 1fr; } .ds-toc, .agb-toc, .imp-toc { margin-bottom: 32px; } }

  /* ==== Rechtstexte: Impressum, Datenschutz, AGB als Glas-Popup mit Reitern ==== */
  .rp, .rp * { box-sizing: border-box; }
  body.rp-lock { overflow: hidden; }
  .rp a { color: #fff; text-decoration-color: rgba(255,255,255,0.35); transition: color 300ms var(--ease), text-decoration-color 300ms var(--ease); }
  .rp a:hover, .rp a:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }
  /* ---- Popup ---- */
  .rp { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 2.5vw, 32px); background: rgba(4,6,9,0.62); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); opacity: 0; transition: opacity 400ms var(--ease); color: #fff; }
  .rp[hidden] { display: none; }
  .rp.is-on { opacity: 1; }
  .rp-dlg { position: relative; width: min(1100px, 100%); height: 100%; max-height: calc(100vh - 2 * clamp(12px, 2.5vw, 32px)); display: flex; flex-direction: column; border-radius: 32px; overflow: hidden; outline: none; background: linear-gradient(155deg, rgba(20,26,34,0.72), rgba(8,11,16,0.62) 52%, rgba(16,21,28,0.7)); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 40px 110px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(42px) saturate(1.4); backdrop-filter: blur(42px) saturate(1.4); transform: translateY(24px); transition: transform 560ms var(--ease); }
  .rp-dlg::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: radial-gradient(52% 40% at var(--gx, 30%) var(--gy, 12%), rgba(255,255,255,0.1), rgba(255,255,255,0) 68%); }
  .rp-dlg::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.05) 47%, rgba(255,255,255,0) 56%); }
  .rp.is-on .rp-dlg { transform: none; }
  .rp-bar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 18px 20px 18px 28px; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .rp-bar img { display: block; height: 26px; width: auto; }
  .rp-tabs { position: relative; display: inline-flex; gap: 0; padding: 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.05); box-shadow: inset 0 1.5px 2px rgba(255,255,255,0.3), inset 0 -1px 2px rgba(0,0,0,0.15); -webkit-backdrop-filter: blur(48px) saturate(1.3); backdrop-filter: blur(48px) saturate(1.3); }
  .rp-pille { position: absolute; z-index: 1; left: 0; top: 8px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); border-top-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.08); box-shadow: inset 0 1.5px 2px rgba(255,255,255,0.3), inset 0 -1px 2px rgba(0,0,0,0.18); opacity: 0; transition: transform 620ms var(--ease), width 620ms var(--ease), opacity 420ms var(--ease); pointer-events: none; }
  .rp-tab { position: relative; z-index: 2; height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,0.8); cursor: pointer; font-family: var(--font-text); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; transition: background 300ms, color 300ms; }
  .rp-tab:hover { color: #fff; filter: url(#rgb-glitch); }
  .rp-tab[aria-selected="true"] { color: #fff; }
  .rp-x { justify-self: end; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 300ms var(--ease), background 300ms; }
  .rp-x:hover { transform: rotate(90deg); background: rgba(255,255,255,0.12); }
  .rp-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .rp-body { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent; scroll-behavior: smooth; }
  .rp-body > main { display: none; }
  .rp-body > main.is-cur { display: block; }
  .rp-body .imp, .rp-body .agb, .rp-body .ds { padding: 56px 48px 96px; }
  .rp-body .imp-h1, .rp-body .agb-h1, .rp-body .ds-h1 { margin-top: 0; font-size: clamp(36px, 4.6vw, 64px); }
  .rp-top-btn { position: absolute; right: 24px; bottom: 24px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); background: rgba(15,20,27,0.85); color: #fff; cursor: pointer; font-family: var(--font-text); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity 300ms; }
  .rp-top-btn.is-on { opacity: 1; pointer-events: auto; }
  .rp-top-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  @media (max-width: 760px) {
    .rp { padding: 0; align-items: flex-end; }
    .rp-dlg { max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; }
    .rp-bar { grid-template-columns: auto 1fr; grid-template-rows: auto auto; padding: 14px 16px; row-gap: 12px; }
    .rp-bar img { grid-row: 1; }
    .rp-x { grid-row: 1; grid-column: 2; }
    .rp-tabs { grid-row: 2; grid-column: 1 / -1; justify-self: stretch; display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px; }
    .rp-pille { top: 6px; height: 40px; }
    .rp-tab { padding: 0 8px; }
    .rp-body .imp, .rp-body .agb, .rp-body .ds { padding: 32px 20px 96px; }
  }
  @media (prefers-reduced-motion: reduce) { .rp, .rp-dlg, .rp-x { transition: none; } .rp-body { scroll-behavior: auto; } }

  /* Übernommene Seitenstile */
  .imp { max-width: 780px; margin: 0 auto; padding: 15vh 48px 20vh; }

  .imp-h1, .ds-h1, .agb-h1 { margin: 72px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 7vw, 88px); line-height: 0.9; text-transform: uppercase; color: #fff; }
  .imp-sub { display: block; margin-top: 20px; font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }

  .imp-sec { margin-top: 48px; padding-top: 48px; border-top: 1px solid rgba(255,255,255,0.14); }
  .imp-sec:first-of-type { margin-top: 72px; }
  .imp-h2 { margin: 0 0 20px; font-family: var(--font-text); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
  .imp-sec p { margin: 0; color: rgba(255,255,255,0.64); text-wrap: pretty; }
  .imp-sec p + p { margin-top: 14px; }
  .imp-adr { font-style: normal; color: #fff; }
  .imp-adr span { display: block; }
  .imp-kv { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 24px; }
  .imp-kv dt { color: rgba(255,255,255,0.64); }
  .imp-kv dd { margin: 0; color: #fff; }
  .imp-mail { color: var(--accent); text-decoration: none; }
  .imp-mail:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

  @media (max-width: 620px) {
    .imp { padding: 15vh 24px 20vh; }
    .imp-h1 { margin-top: 56px; }
    .imp-kv { grid-template-columns: 1fr; gap: 2px; }
    .imp-kv dd { margin-bottom: 10px; }
  }

  /* ==== Consent: Notiz im Glas, Kategorien, Sperre für externe Medien ==== */
  .cb, .cb * { box-sizing: border-box; }
  /* ---- Glas, gemeinsam ---- */
  .cb { position: fixed; z-index: 950; color: #fff; font-family: var(--font-text); font-weight: 300; }
  .cb[hidden] { display: none; }
  .cb-glass { position: relative; background: linear-gradient(160deg, rgba(22,28,36,0.9) 0%, rgba(10,13,18,0.86) 55%, rgba(4,6,9,0.9) 100%); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 2px 0 rgba(255,255,255,0.04) inset, 0 12px 28px rgba(0,0,0,0.45), 0 40px 90px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(64px) saturate(1.3) brightness(0.75); backdrop-filter: blur(64px) saturate(1.3) brightness(0.75); overflow: hidden; }
  .cb-glass > * { position: relative; z-index: 2; }
  .cb-glass::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: radial-gradient(60% 50% at var(--gx, 30%) var(--gy, 20%), rgba(255,255,255,0.08), rgba(255,255,255,0) 70%); }
  .cb-p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.72); text-wrap: pretty; }
  .cb-p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.4); }
  .cb-p a:hover { text-decoration-color: #fff; }
  .cb-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(255,255,255,0.25); border-top-color: rgba(255,255,255,0.45); background: linear-gradient(to bottom, #ffffff, #f3f4f6); color: #0F141B; font-family: var(--font-text); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; transition: transform 300ms var(--ease); }
  .cb-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.45), rgba(255,255,255,0)); transform: skewX(-20deg); transition: left 700ms var(--ease); }
  .cb-btn:hover { transform: translateY(-2px); }
  .cb-btn:hover::after { left: 110%; }
  .cb-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .cb-ghost { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); background: transparent; color: #fff; cursor: pointer; font-family: var(--font-text); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; transition: background 300ms; }
  .cb-ghost:hover { background: rgba(255,255,255,0.08); }
  .cb-text { background: none; border: 0; padding: 0; color: rgba(255,255,255,0.64); cursor: pointer; font-family: var(--font-text); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.3); white-space: nowrap; }
  .cb-text:hover { color: #fff; }
  .cb-in { animation: cb-in 700ms var(--ease) both; }
  .cb-in .cb-glass { animation: cb-in-move 700ms var(--ease) both; }
  @keyframes cb-in-move { from { margin-bottom: -24px; } to { margin-bottom: 0; } }
  @keyframes cb-in { from { opacity: 0; } to { opacity: 1; } }

  /* Einstellungen (ausklappbar, gemeinsam) */
  .cb-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--ease); }
  .cb-more.is-open { grid-template-rows: 1fr; }
  .cb-more > div { overflow: hidden; min-height: 0; }
  .cb-rows { display: flex; flex-direction: column; padding-top: 16px; }
  .cb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.12); }
  .cb-row b { display: block; font-weight: 500; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
  .cb-row span { display: block; font-size: 12.5px; color: rgba(255,255,255,0.55); line-height: 1.5; }
  .cb-sw { position: relative; width: 44px; height: 26px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); cursor: pointer; transition: background 300ms; flex: none; }
  .cb-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: #fff; transition: transform 300ms var(--ease); }
  .cb-sw[aria-checked="true"] { background: rgba(var(--accent-rgb),0.35); border-color: rgba(var(--accent-rgb),0.6); }
  .cb-sw[aria-checked="true"]::after { transform: translateX(18px); }
  .cb-sw[disabled] { opacity: 0.6; cursor: default; }

  /* ==== 5 Ecke rechts, Stimme von uns: persönlich, wie eine Notiz ==== */
  .v5 { left: 0; right: 0; bottom: 24px; margin: 0 auto; width: min(420px, calc(100vw - 48px)); }
  .v5 .cb-glass { padding: 24px; border-radius: 28px; display: flex; flex-direction: column; gap: 18px; }
  .v5 .cb-head { display: flex; align-items: center; gap: 14px; }
  .v5 .cb-avatars { display: flex; }
  .v5 .cb-avatars img { display: block; width: 44px; height: 44px; border-radius: 999px; object-fit: cover; border: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }

  /* Der hintere Kreis wird dort ausgespart, wo der vordere ihn überlappt: Maske mit Loch, 3px größer als der vordere Kreis */
  .v5 .cb-avatars img + img { margin-left: -6px; position: relative; z-index: -1; -webkit-mask: radial-gradient(circle 25px at -16px 50%, transparent 24.5px, #000 25.5px); mask: radial-gradient(circle 25px at -16px 50%, transparent 24.5px, #000 25.5px); }
  .v5 .cb-avatars { position: relative; z-index: 0; isolation: isolate; }
  .v5 .cb-head b { display: block; font-weight: 500; font-size: 13px; }
  .v5 .cb-head small { display: block; font-size: 12px; color: rgba(255,255,255,0.5); }
  .v5 .cb-p { font-size: 14px; color: rgba(255,255,255,0.9); }
  .v5 .cb-actions { display: flex; align-items: center; gap: 12px; }
  .v5 .cb-btn { flex: 1 1 auto; background: linear-gradient(160deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08) 60%, rgba(255,255,255,0.14)); border: 1px solid rgba(255,255,255,0.35); border-top-color: rgba(255,255,255,0.6); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.25), 0 10px 24px rgba(0,0,0,0.35); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
  .v5 .cb-btn:hover { background: linear-gradient(160deg, rgba(255,255,255,0.3), rgba(255,255,255,0.12) 60%, rgba(255,255,255,0.2)); }
  .v5 .cb-foot { display: flex; align-items: center; justify-content: center; gap: 24px; font-size: 12px; color: rgba(255,255,255,0.5); }
  .v5 .cb-foot a { color: rgba(255,255,255,0.7); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.3); }

  .cb .cb-more.is-open ~ .cb-actions [data-save] { display: inline-flex !important; }
  .cb .cb-more.is-open ~ .cb-actions [data-reject] { display: none; }
  .cb.is-out { opacity: 0; transition: opacity 180ms ease-out; }
  .cb.is-out .cb-glass { transform: translateY(10px) scale(0.99); transition: transform 200ms var(--ease); }
  @media (max-width: 560px) { .v5 { left: 12px; right: 12px; bottom: 12px; width: auto; } }
  @media (prefers-reduced-motion: reduce) { .cb-in { animation: none; } .cb-more, .cb-sw::after, .cb-btn { transition: none; } }

  /* ==== Eignung: Einblendung, Gewichte, Zeichen ==== */
  [data-fit-half] { transition: flex 900ms cubic-bezier(0.16,1,0.3,1), opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1); }
  html.js-ready [data-fit-half] { opacity: 0; transform: translateY(20px); }
  html.js-ready [data-fit-half][data-in="1"] { opacity: 1; transform: none; }
  [data-fit-stage]:hover [data-fit-half] { flex: 0.8 1 0; }
  [data-fit-stage] [data-fit-half]:hover { flex: 1.25 1 0; }
  [data-fit-row] { transition: opacity 500ms cubic-bezier(0.16,1,0.3,1), transform 500ms cubic-bezier(0.16,1,0.3,1), color 300ms; }
  html.js-ready [data-fit-row] { opacity: 0; transform: translateX(-10px); }
  html.js-ready [data-fit-row][data-in="1"] { opacity: 1; transform: none; }
  [data-fit-row]:last-child { border-bottom: 1px solid rgba(255,255,255,0.10); }
  [data-fit-row] svg path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 500ms cubic-bezier(0.16,1,0.3,1); }
  [data-fit-row][data-in="1"] svg path { stroke-dashoffset: 0; }
  [data-fit-half="yes"] [data-fit-row]:hover { color: #fff; }
  [data-fit-half="no"] [data-fit-row]:hover { color: rgba(255,255,255,0.6); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.3); }
  [data-fit-light] { transition: background 200ms linear; }
  @media (max-width: 980px) {
    [data-fit-head] { grid-template-columns: 1fr !important; gap: 20px !important; }
    [data-fit-lead] { padding-top: 0 !important; }
    [data-fit] { padding-left: 24px !important; padding-right: 24px !important; }
  }
  @media (max-width: 800px) {
    [data-fit-stage] { flex-direction: column-reverse !important; min-height: 0 !important; }
    [data-fit-stage]:hover [data-fit-half], [data-fit-stage] [data-fit-half]:hover { flex: 1 1 auto !important; }
    [data-fit-half] { padding: 28px !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-fit-half], [data-fit-row] { opacity: 1; transform: none; transition: none; }
    [data-fit-row] svg path { stroke-dashoffset: 0; }
    [data-fit-stage]:hover [data-fit-half], [data-fit-stage] [data-fit-half]:hover { flex: 1 1 0; }
  }
  /* ==== Diagnose: Objektiv mit Irisblende, zwölf Positionen (1:1 aus Variante D) ==== */
  #diagnose::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background:
    radial-gradient(70% 80% at 18% 62%, rgba(24,32,42,0.95) 0%, rgba(8,11,16,0.6) 45%, rgba(0,0,0,0) 72%),
    radial-gradient(90% 70% at 92% 96%, #2A3644 0%, rgba(19,26,35,0.65) 40%, rgba(0,0,0,0) 78%),
    radial-gradient(120% 100% at 50% -20%, rgba(15,20,27,0.9) 0%, rgba(0,0,0,0) 60%); }
  #diagnose::after { content: none; }
  #diagnose > .kopf, #diagnose > .body, #diagnose > .ctrl { position: relative; z-index: 1; }

  /* Bühne: eine Viewport-Höhe, Kopf oben, Objektiv in der Mitte */
  #diagnose { position: relative; height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: #05070A; display: flex; flex-direction: column; padding: clamp(48px, 8vh, 100px) clamp(24px, 4vw, 64px) clamp(32px, 5vh, 72px); box-sizing: border-box; }
  #diagnose + .stage { border-top: 1px solid rgba(255,255,255,0.1); }
  #diagnose .badge { position: absolute; left: clamp(24px, 4vw, 64px); bottom: 20px; z-index: 5; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
  #diagnose .kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 96px); align-items: start; flex: none; }
  #diagnose .kopf p { padding-top: 0.35em; }
  #diagnose .kopf h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.6vw, 60px); line-height: 0.92; text-transform: uppercase; }
  #diagnose .kopf p { margin: 0; max-width: 58ch; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.64); text-wrap: pretty; }
  #diagnose .body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
  #diagnose .label { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
  #diagnose .accent { color: var(--accent); }
  #diagnose.is-schluss .titel, #diagnose.is-schluss .lens-content svg.ic { color: var(--accent); stroke: var(--accent); }
  #diagnose.is-schluss .d-progress span.on i { background: #fff; }

  #diagnose .titel { margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 1; }
  #diagnose .text { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.72); text-wrap: pretty; }
  #diagnose .no { font-family: var(--font-display); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }

  /* Steuerung, gemeinsam */
  #diagnose .ctrl { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex: none; padding-top: 20px; }
  #diagnose .pfeile { display: flex; gap: 8px; }
  #diagnose .pf { width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.05); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background 300ms, transform 300ms var(--ease); }
  #diagnose .pf:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
  #diagnose .pf svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  #diagnose .zaehler { font-family: var(--font-display); font-size: 22px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.6); }
  #diagnose .zaehler b { font-weight: 400; color: #fff; }
  @property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
  @keyframes ring { to { --a: 360deg; } }

  /* ===== A Filmstreifen: Kacheln laufen als Band, aktive Kachel mittig groß ===== */

  /* ===== B Tafel: eine große Kachel, Text wechselt mit Wischen ===== */
  #diagnose .d-scene.d-scene .lens { width: min(52vh, 460px); }

  /* ===== C Objektivdeckel: eine Kappe, Gravur wechselt ===== */
  #diagnose .cap { position: relative; width: min(56vh, 520px); aspect-ratio: 1; flex: none; }
  /* Klemmen links und rechts, matt, leicht hinter der Kappe */
  /* Außenrand als Stufe: schmaler heller Grat, darunter Schatten */
  /* Frontfläche: matt, flach, mit weichem Glanz oben rechts */
  /* Gebürstete Metallschrift: silbriger Verlauf mit feiner Bürstung, leichter Prägeschatten */
  #diagnose .gravur { color: transparent; background: linear-gradient(180deg, #f2f0ea 0%, #b9b6ae 38%, #dedbd3 50%, #8f8c85 64%, #cfccc4 100%), repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, rgba(0,0,0,0) 1px 3px); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.85)) drop-shadow(0 -0.5px 0 rgba(255,255,255,0.18)); }
  #diagnose .gravur.dim { background: linear-gradient(180deg, #d8d5cd 0%, #9a978f 50%, #bdb9b1 100%); -webkit-background-clip: text; background-clip: text; }
  #diagnose .cap-shine { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at var(--sx, 65%) var(--sy, 25%), rgba(255,255,255,0.07), rgba(255,255,255,0) 45%); }
  #diagnose .cap-plate, #diagnose .cap-shine { z-index: 2; }
  @keyframes cap-kipp { 0% { transform: perspective(900px) rotateY(0deg); } 45% { transform: perspective(900px) rotateY(calc(var(--dir, 1) * -14deg)) scale(0.985); } 100% { transform: perspective(900px) rotateY(0deg); } }
  #diagnose .cap-shine { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at var(--sx, 30%) var(--sy, 25%), rgba(255,255,255,0.10), rgba(255,255,255,0) 45%); }

  /* ===== C2 / C3 Objektivfront ===== */
  #diagnose .lens { touch-action: none; cursor: grab; position: relative; width: min(56vh, 520px); aspect-ratio: 1; border-radius: 50%; flex: none; transform-style: preserve-3d; transition: transform 700ms var(--ease); }
  #diagnose .lens.is-drag { cursor: grabbing; }
  /* Tubus: gebürstetes Schwarzmetall, Fokusring mit Rillen am Rand */
  #diagnose .lens-barrel { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 42% 34%, #33373d 0%, #1b1e23 38%, #0d0f12 72%, #06070a 100%); box-shadow: 0 50px 110px rgba(0,0,0,0.75), 0 8px 24px rgba(0,0,0,0.6), inset 0 3px 3px rgba(255,255,255,0.22), inset 0 -14px 30px rgba(0,0,0,0.75); }
  #diagnose .lens-spin { position: absolute; inset: 0; border-radius: 50%; transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
  #diagnose .lens-spin .lens-barrel, #diagnose .lens-spin .lens-teeth { position: absolute; }
  #diagnose .lens-spin::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.13) 0deg 1deg, rgba(0,0,0,0.6) 1deg 2.1deg, rgba(0,0,0,0) 2.1deg 3.2deg); -webkit-mask: radial-gradient(circle, rgba(0,0,0,0) 88.5%, #000 89.5%, #000 100%); mask: radial-gradient(circle, rgba(0,0,0,0) 88.5%, #000 89.5%, #000 100%); }
  #diagnose .lens-teeth { position: absolute; inset: -1.8%; border-radius: 50%; z-index: -1; pointer-events: none; background: repeating-conic-gradient(from 0deg, #282b30 0deg 0.8deg, #15171b 0.8deg 1.6deg, #0b0c0e 1.6deg 2.4deg, #191b1f 2.4deg 3.2deg); clip-path: polygon(var(--teeth)); filter: drop-shadow(0 10px 20px rgba(0,0,0,0.6)); }
  #diagnose .lens-barrel::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 215deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,0.20) 35deg, rgba(255,255,255,0) 80deg, rgba(255,255,255,0) 200deg, rgba(255,255,255,0.09) 235deg, rgba(255,255,255,0) 280deg); mix-blend-mode: screen; pointer-events: none; -webkit-mask: radial-gradient(circle, #000 88%, rgba(0,0,0,0) 89%); mask: radial-gradient(circle, #000 88%, rgba(0,0,0,0) 89%); }
  /* Stufen des Frontrings */
  #diagnose .lens-step { position: absolute; border-radius: 50%; pointer-events: none; }
  #diagnose .lens-step.s1 { inset: 7.5%; background: linear-gradient(160deg, #262a30, #0b0d10 60%); box-shadow: inset 0 2px 2px rgba(255,255,255,0.16), inset 0 -3px 6px rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.8); }
  #diagnose .lens-step.s2 { inset: 12.5%; background: linear-gradient(160deg, #15181c, #050608 70%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.10), inset 0 -2px 5px rgba(0,0,0,0.9), 0 1px 2px rgba(0,0,0,0.9); }
  /* Gravierte Ringschrift wie auf dem Deckel */
  #diagnose .lens-arc { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
  #diagnose .lens-arc text { font-family: var(--font-text); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; fill: url(#silber); paint-order: stroke; stroke: rgba(0,0,0,0.3); stroke-width: 0.14px; filter: drop-shadow(0 0.15px 0 rgba(255,255,255,0.08)) drop-shadow(0 -0.15px 0.2px rgba(0,0,0,0.3)); }
  #diagnose .lens-arc .lens-top { font-size: 3.4px; }
  #diagnose .lens-arc .lens-bot { font-size: 3.0px; stroke: rgba(0,0,0,0.55); stroke-width: 0.22px; filter: drop-shadow(0 0.2px 0 rgba(255,255,255,0.16)) drop-shadow(0 -0.2px 0.3px rgba(0,0,0,0.6)); }
  #diagnose .lens-arc .lens-bot:not(.lens-shadow-text):not(.lens-glint) { fill: rgba(215,217,220,0.7); }
  #diagnose .lens-arc .lens-shadow-text { fill: rgba(0,0,0,0.85); transform: translate(0, -0.3px); }
  #diagnose .lens-arc .lens-light-text { display: none; }
  #diagnose .lens-arc .lens-glint { display: none; }
  #diagnose .lens .lens-content svg.ic { transition: stroke 500ms, filter 500ms; }
  #diagnose .lens:hover .lens-content svg.ic { filter: drop-shadow(0 -1px 0 rgba(255,255,255,0.4)) drop-shadow(0 2px 1px rgba(0,0,0,0.95)) drop-shadow(0 6px 10px rgba(0,0,0,0.7)) drop-shadow(0 0 14px rgba(200,220,255,0.25)); }
  /* Frontfassung mit Filtergewinde */
  #diagnose .lens-front { position: absolute; inset: 21%; border-radius: 50%; z-index: 2; background: radial-gradient(circle at 50% 45%, #05070a 0%, #0b0f14 55%, #05070a 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 6px 14px rgba(0,0,0,0.95), 0 -1px 0 rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.9); }
  #diagnose .lens-front::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.10) 0 0.6px, rgba(0,0,0,0) 0.6px 3.2px); -webkit-mask: radial-gradient(circle, rgba(0,0,0,0) 91%, #000 92%); mask: radial-gradient(circle, rgba(0,0,0,0) 91%, #000 92%); pointer-events: none; }
  /* Frontlinse: vergütetes Glas */
  #diagnose .lens-glass { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 50%, #04070c 0%, #070b12 55%, #0c1420 80%, #101a2a 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 10px 30px rgba(0,0,0,0.9), inset 0 -6px 18px rgba(80,120,200,0.18); }
  #diagnose .lens-glass::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(120,170,255,0.35), rgba(120,170,255,0) 38%), radial-gradient(circle at 68% 72%, rgba(200,120,255,0.18), rgba(200,120,255,0) 30%), radial-gradient(circle at 58% 22%, rgba(120,255,200,0.10), rgba(120,255,200,0) 22%); mix-blend-mode: screen; }
  #diagnose .lens-glass::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0 1px, rgba(0,0,0,0) 1px 9%); opacity: 0.6; }
  #diagnose .lens-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.10); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6); }
  #diagnose .lens-ring.r1 { inset: 9%; } .lens-ring.r2 { inset: 20%; border-color: rgba(255,255,255,0.07); }
  /* Iris */
  #diagnose .lens-iris { position: absolute; inset: 12%; border-radius: 50%; background: #000; box-shadow: 0 0 40px rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; text-align: center; padding: 10%; }
  #diagnose .lens-iris::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(160,200,255,0.2), rgba(160,200,255,0) 40%); mix-blend-mode: screen; pointer-events: none; }
  #diagnose .lens-iris > * { position: relative; z-index: 1; }
  #diagnose .lens-tiefe { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 7; box-shadow: inset 0 0 26px rgba(0,0,0,0.95), inset 0 3px 5px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(0,0,0,0.6); }
  #diagnose .lens-schein { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 6; background: radial-gradient(ellipse 46% 34% at var(--sx, 32%) var(--sy, 26%), rgba(255,255,255,0.22), rgba(255,255,255,0.06) 45%, rgba(255,255,255,0) 72%), linear-gradient(118deg, rgba(255,255,255,0) 36%, rgba(255,255,255,0.10) 46%, rgba(255,255,255,0.03) 52%, rgba(255,255,255,0) 62%); mix-blend-mode: screen; }
  #diagnose .lens-schein::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at calc(100% - var(--sx, 32%)) calc(100% - var(--sy, 26%)), rgba(150,120,255,0.16), rgba(150,120,255,0) 30%); }
  #diagnose .lens-blende { position: absolute !important; inset: 0; border-radius: 50%; overflow: hidden; z-index: 5 !important; pointer-events: none; opacity: 0; transition: opacity 120ms 300ms; }
  #diagnose .lens-blende.zu { opacity: 1; transition: none; }
  #diagnose .lens-blende svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  /* Acht Lamellen wie Haifischflossen: jede ist eine Kreisscheibe mit dem Radius der Fassung, um k*45deg gesetzt. Ihr Rand bildet
     die geschwungene Innenkante. Offen liegt die Scheibe ganz außen, zu rückt sie auf 48 Einheiten heran, sodass die acht Kanten
     ein kleines Achteck in der Mitte offen lassen. --d ist der Abstand des Scheibenmittelpunkts vom Zentrum. */
  /* Irisblende: acht Keile. Jeder Keil liegt zwischen seiner eigenen Kante (x = 1) und der Kante des nächsten Blatts
     (x + y = √2); der Scheitel ist eine Achteck-Ecke. Alles ist für Öffnungsradius 1 gezeichnet und wird mit --s skaliert,
     so bleibt die Geometrie beim Schließen exakt. Offen liegt der Scheitel außerhalb der Fassung. */
  @property --s { syntax: '<number>'; inherits: true; initial-value: 60; }
  #diagnose .lens-blende g.bl { --s: 60; transition: --s 420ms cubic-bezier(0.22, 1, 0.36, 1); }
  #diagnose .lens-blende.zu g.bl { --s: 6.5; }
  #diagnose .lens-blende g.bl > g { transform: translate(50px, 50px) scale(var(--s)); }
  #diagnose .lens-blende g.bl polygon { fill: url(#lamMetallA); }
  #diagnose .lens-blende g.bl:nth-of-type(odd) polygon { fill: url(#lamMetallB); }
  #diagnose .lens-blende g.bl { filter: url(#lamelleSchatten); }
  #diagnose .lens-blende i, #diagnose .lens-blende u { display: none; }
  #diagnose .lens-content { display: flex; flex-direction: column; align-items: center; gap: 10px; transition: opacity 350ms, filter 350ms; }
  #diagnose .lens-content.out { opacity: 0; filter: blur(4px); }
  #diagnose .lens-content svg.ic { width: clamp(70px, 12.1vh, 123px); height: clamp(70px, 12.1vh, 123px); fill: none; stroke: #ffffff; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0.6px 0 rgba(255,255,255,0.12)) drop-shadow(0 -0.6px 0.6px rgba(0,0,0,0.55)); }
  #diagnose .lens .lens-content svg.ic { width: clamp(52px, 9vh, 92px); height: clamp(52px, 9vh, 92px); }
  #diagnose .lens .lens-content .titel { font-size: clamp(16px, 2.6vh, 28px); text-transform: none; letter-spacing: 0.01em; line-height: 1.02;  background: linear-gradient(180deg, #f4f1ea 0%, #d9d6cf 28%, #a9a8a4 50%, #d2d0ca 68%, #8d8c88 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0.6px 0 rgba(255,255,255,0.12)) drop-shadow(0 -0.6px 0.6px rgba(0,0,0,0.55));  color: #fff; background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.5); }
  /* Glanz und Gegenlicht folgen dem Zeiger */
  #diagnose .lens .cap-shine { z-index: 5; border-radius: 50%; background: radial-gradient(circle at var(--sx, 30%) var(--sy, 25%), rgba(255,255,255,0.14), rgba(255,255,255,0) 40%); }
  #diagnose .lens-shadow { position: absolute; left: 6%; right: 6%; bottom: -9%; height: 16%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.75), rgba(0,0,0,0) 70%); filter: blur(10px); z-index: -1; pointer-events: none; }
  @media (max-width: 980px) { #diagnose .lens { width: min(70vw, 360px); justify-self: center; } }

  /* ===== D Frontdeckel mit Bajonett: Kappe rastet beim Wechsel ===== */
  #diagnose .d-scene.d-scene { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
  #diagnose .d-side.d-side { display: flex; flex-direction: column; gap: 16px; }
  #diagnose .d-side.d-side [data-slide2] { min-height: clamp(220px, 30vh, 320px); }
  #diagnose .d-side.d-side .titel { font-size: clamp(30px, 3.6vw, 60px); }
  #diagnose .d-side.d-side .text { font-size: 15px; max-width: 52ch; }
  #diagnose .d-progress.d-progress { display: flex; gap: 4px; }
  #diagnose .d-progress.d-progress span { position: relative; flex: 1; height: 2px; background: rgba(255,255,255,0.14); border-radius: 2px; overflow: hidden; cursor: pointer; transition: height 250ms var(--ease), background 250ms; }
  #diagnose .d-progress.d-progress span::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
  #diagnose .d-progress.d-progress span:hover, #diagnose .d-progress.d-progress span:focus-visible { height: 6px; background: rgba(255,255,255,0.28); outline: none; }
  #diagnose .d-progress.d-progress { align-items: center; min-height: 6px; }
  #diagnose .d-progress.d-progress span i { display: block; height: 100%; width: 0; background: var(--accent); }
  #diagnose .d-progress.d-progress span.done i { width: 100%; }
  #diagnose .d-progress.d-progress span.on i { width: 0; }
  #diagnose .d-progress.d-progress span.on.run i { width: 100%; transition: width 6s linear; }
  #diagnose .d-progress.d-progress span.done i { transition: width 250ms var(--ease); }
  #diagnose .d-slide.d-slide { transition: opacity 400ms, transform 600ms var(--ease); }
  #diagnose .d-slide.d-slide.out { opacity: 0; transform: translateX(18px); }

  /* ===== E Kontaktbogen: drei Spuren als Reiter, je Spur ein Streifen quer ===== */
  @keyframes e-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

  @media (prefers-reduced-motion: reduce) { .a-band, .a-card, .b-slide, .cap-turn, .cap-content, .d-tabs, .d-slide, .e-cell, .glow-ring { transition: none !important; animation: none !important; } }

  /* Flache, breite Fenster: Abschnitt bleibt mindestens Viewport, darf wachsen */
  @media (min-width: 1025px) and (max-height: 860px) {
    #diagnose#diagnose { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; padding-top: clamp(48px, 7vh, 88px); padding-bottom: clamp(40px, 6vh, 72px); }
  }

  /* Tablet und Handy: Objektiv über dem Text, Abschnitt wächst mit Inhalt (kein Clip) */
  @media (max-width: 1024px) {
    #diagnose#diagnose {
      height: auto;
      min-height: 100vh;
      min-height: 100dvh;
      overflow: visible;
      padding-top: clamp(72px, 10vh, 120px);
      padding-bottom: clamp(48px, 7vh, 88px);
    }
    #diagnose .kopf.kopf { grid-template-columns: 1fr; gap: 14px; margin-bottom: clamp(20px, 3.5vh, 36px); }
    #diagnose .kopf.kopf .text { max-width: 60ch; }
    #diagnose .body { flex: none; min-height: 0; justify-content: flex-start; }
    #diagnose .d-scene.d-scene {
      grid-template-columns: 1fr;
      gap: clamp(20px, 3.5vh, 40px);
      justify-items: center;
      width: 100%;
    }
    #diagnose .d-scene.d-scene .lens {
      width: min(58vw, 340px);
      margin-bottom: 4%;
      touch-action: pan-y;
      z-index: 1;
    }
    #diagnose .lens-shadow { bottom: -4%; height: 10%; opacity: 0.7; }
    #diagnose .d-side.d-side {
      position: relative;
      z-index: 2;
      align-items: center;
      text-align: center;
      gap: 16px;
      width: 100%;
      max-width: 520px;
    }
    #diagnose .d-side.d-side [data-slide2] {
      min-height: 0;
      height: auto;
      overflow: visible;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    #diagnose .d-slide.d-slide {
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 8px;
    }
    #diagnose .d-side.d-side .titel { font-size: clamp(26px, 5.4vw, 40px); line-height: 1.05; }
    #diagnose .d-side.d-side .text {
      font-size: 14.5px;
      line-height: 1.65;
      max-width: 44ch;
      margin-left: auto;
      margin-right: auto;
    }
    #diagnose .d-side.d-side .pfeile { justify-content: center; gap: 12px; padding-top: 4px; }
    #diagnose .d-side.d-side .pf { width: 52px; height: 52px; }
    #diagnose .d-progress.d-progress { width: 100%; gap: 5px; }
    #diagnose .d-progress.d-progress span { height: 3px; }
    #diagnose .d-progress.d-progress span::before { top: -16px; bottom: -16px; }
    #diagnose .b-liste { flex-direction: row; overflow-x: auto; }
    #diagnose .cap-scene { grid-template-columns: 1fr; text-align: center; }
    #diagnose .cap { width: min(70vw, 360px); justify-self: center; }
  }

  /* Handy: kompakteres Objektiv, Text volle Höhe, große Touch-Ziele */
  @media (max-width: 620px) {
    #diagnose#diagnose {
      padding-left: 18px;
      padding-right: 18px;
      padding-top: max(64px, calc(env(safe-area-inset-top, 0px) + 56px));
      padding-bottom: max(48px, calc(env(safe-area-inset-bottom, 0px) + 36px));
    }
    #diagnose h2 { font-size: clamp(28px, 8.2vw, 40px); line-height: 0.95; }
    #diagnose .kopf.kopf { gap: 12px; margin-bottom: 16px; }
    #diagnose .kopf.kopf .text { font-size: 13.5px; line-height: 1.6; }
    #diagnose .d-scene.d-scene { gap: 22px; grid-template-rows: auto auto; }
    /* Kleineres Objektiv: Platz für Text, kein Überdecken der Lesespalte */
    #diagnose .d-scene.d-scene .lens {
      width: min(52vw, 210px);
      margin-bottom: 0;
    }
    /* Titel nur in der Textspalte — im Glas überlaufen lange Namen */
    #diagnose .lens .lens-content .titel { display: none; }
    #diagnose .lens .lens-content { gap: 0; }
    #diagnose .lens .lens-content svg.ic {
      width: clamp(48px, 18vw, 78px);
      height: clamp(48px, 18vw, 78px);
    }
    #diagnose .d-side.d-side {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      width: 100%;
      padding-top: 4px;
    }
    #diagnose .d-progress.d-progress { order: -1; }
    #diagnose .d-side.d-side [data-slide2] { min-height: 0; height: auto; overflow: visible; width: 100%; }
    #diagnose .d-side.d-side .titel {
      min-height: 0;
      margin-bottom: 0;
      margin-top: 6px !important;
      font-size: clamp(22px, 6.6vw, 32px);
      line-height: 1.08;
      display: block;
    }
    #diagnose .d-side.d-side .text {
      min-height: 0;
      margin-top: 10px !important;
      font-size: 14px;
      line-height: 1.65;
      max-width: 36ch;
    }
    #diagnose .d-progress.d-progress span { height: 4px; }
    #diagnose .d-progress.d-progress span::before { top: -18px; bottom: -18px; }
    #diagnose .d-side.d-side .pfeile { width: 100%; justify-content: space-between; max-width: 220px; margin-top: 4px; }
    #diagnose .d-side.d-side .pf { width: 56px; height: 56px; }
    #diagnose .badge { position: static; margin-top: 8px; left: auto; bottom: auto; font-size: 10px; text-align: center; width: 100%; }
  }

  /* ==== Seitenweite Grundregeln ==== */
  html { overscroll-behavior-y: none; }
  html, body { margin: 0; padding: 0; background: #000; }
  * { box-sizing: border-box; }
  a { color: #fff; text-decoration: none; }
  a:hover { color: rgba(255,255,255,0.64); }
  button { font-family: inherit; }
  [data-track]::-webkit-scrollbar { display: none; }
  @keyframes vv-drop { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
  @keyframes vv-rise-50 { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
  @keyframes vv-rise-60 { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
  @keyframes vv-drawer { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
  @keyframes vv-rgb {
    0%   { opacity: 0; transform: translate3d(0,10px,0); filter: drop-shadow(9px 0 0 rgba(255,0,90,0.9)) drop-shadow(-9px 0 0 rgba(0,190,255,0.9)) blur(1.5px); }
    55%  { opacity: 1; filter: drop-shadow(4px 0 0 rgba(255,0,90,0.75)) drop-shadow(-4px 0 0 rgba(0,190,255,0.75)) blur(0.4px); }
    100% { opacity: 1; transform: none; filter: none; }
  }
  @keyframes vv-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes vv-hl {
    from { opacity: 0; transform: translateY(105%); }
    to   { opacity: 1; transform: none; }
  }
  @media (max-width: 1120px) {
    [data-vp] { height: auto !important; min-height: 0 !important; padding-bottom: 8px !important; }
    [data-two] { grid-template-columns: minmax(0, 1fr) !important; }
    [data-h2] { font-size: 40px !important; line-height: 36px !important; }
    [data-big] { font-size: 56px !important; }
    /* LCD behält die Viewporthöhen-Klammer, nicht die globale Abschnittskennzahl */
    #werkzeug [data-lcd] [data-big] { font-size: clamp(34px, 7.2vh, 92px) !important; }
  }
  @media (max-width: 720px) {
    [data-h2] { font-size: 34px !important; }
    [data-big] { font-size: 46px !important; }
    #werkzeug [data-lcd] [data-big] { font-size: clamp(34px, 7.2vh, 92px) !important; }
  }
  [data-chipwrap]::-webkit-scrollbar { width: 0; height: 0; }
  /* Klick setzt den Fokus, soll aber keinen Rahmen zeigen; Tastatur weiterhin schon */
  /* Der Auslöser glimmt beim Überfahren, wie die Aufnahmeanzeige einer Kamera */
  [data-rec]::after {
    content: ""; position: absolute; inset: 0; border-radius: 999px; opacity: 0;
    background: radial-gradient(120% 120% at 38% 26%, #ff8a7a 0%, #d8382c 52%, #6b1610 100%);
    transition: opacity 520ms cubic-bezier(0.45, 0, 0.75, 0.9);
  }
  [data-cta]:hover [data-rec], [data-cta]:focus-visible [data-rec] {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 10px rgba(216,56,44,0.5) !important;
    transition: box-shadow 520ms cubic-bezier(0.45, 0, 0.75, 0.9) !important;
  }
  [data-cta]:hover [data-rec]::after, [data-cta]:focus-visible [data-rec]::after { opacity: 1; }
  [data-modes] g:focus:not(:focus-visible) { outline: none; }
  [data-modes] g:focus-visible { outline: 1.5px solid #fff; outline-offset: 2px; border-radius: 8px; }
  /* ---- Tablet: die Kamera steht hochkant, Display oben, Bedienfeld unten ---- */
  
  /* Bedienfeld als Bodenplatte, nur wo beide Spalten Platz haben */

  /* ---- Schmales Tablet: alles untereinander, Rad bleibt groß ---- */

  /* ---- Telefon: Deckplatte ohne Zubehörschuh, Auslöser wird zur Bodenleiste ---- */
  @media (max-width: 760px) {
    /* Erst hier eine Kachel je Spalte, darüber bleibt das Zweierraster */
    [data-track] { grid-auto-columns: 100% !important; }
    [data-warncta] { flex: 1 0 100% !important; }
    /* Kurzanleitung: Schritte untereinander statt drei Spalten nebeneinander */
    /* Statuszeile, Werteleiste und Kennzahlen brauchen im Hochformat eigene Raster */
  }

  /* ---- Kleines Telefon ---- */

  @media (max-width: 760px) {
    /* Erst hier eine Kachel je Spalte, darüber bleibt das Zweierraster */
  }
  @media (min-width: 1181px) {
    [data-machine] { height: 100%; min-height: 0; }
    [data-machinebox] { height: 100%; width: auto !important; max-width: 100% !important; max-height: 100%; }
  }
  @media (max-width: 1180px) {
    [data-mvp] { height: auto !important; min-height: 0 !important; }
    [data-monitor] { aspect-ratio: auto !important; height: 168px !important; }
    [data-top] { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
    [data-machine] { max-width: 380px; margin: 0 auto; }
    [data-h2] { font-size: 40px !important; }
  }
  @media (max-width: 900px) {
    [data-machine] { max-width: 320px !important; }
    [data-monitor] { height: 148px !important; }
  }
  @media (max-width: 700px) {
    [data-mpad] { padding: 40px 18px 26px !important; }
    [data-machine] { max-width: 260px !important; }
    [data-monitor] { height: 128px !important; }
    [data-tracks] [data-track] { grid-template-columns: 92px minmax(0, 1fr) !important; gap: 8px !important; }
  }
  @media (max-width: 620px) {
    [data-glass-card] { width: 100% !important; max-width: 340px; }
  }
  @media (max-width: 768px) {
    [data-kacheln-raster] { grid-template-columns: minmax(0, 1fr) !important; }
  }
  /* Betonte Wörter im Kacheltitel */
  [data-kacheln-wort="true"] { font-family: 'Newsreader', 'Imbue', serif; font-style: italic; font-weight: 500; letter-spacing: -0.02em; color: rgba(255,255,255,0.85); font-size: 1.08em; }
  @media (max-width: 980px) {
    [data-footgrid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    [data-fusshuegel] { width: 29.5vw !important; height: 5.4vw !important; right: 24px !important; }
  }
  @media (max-width: 620px) {
    [data-footgrid] { grid-template-columns: minmax(0, 1fr) !important; }
    [data-fusshuegel] { width: 60vw !important; height: 11vw !important; right: 16px !important; }
    [data-haltung-film] { right: 70px !important; bottom: 12px !important; }
  }
  /* Fußhügel: Pfeil und Wort fahren erst hoch, wenn der Hügel steht */
  [data-fusshuegel][data-an="1"] [data-huegelpfeil] svg { transform: none !important; }
  [data-fusshuegel][data-an="1"] [data-huegeltext] span { transform: none !important; }
  [data-fusshuegel]:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
  @media (prefers-reduced-motion: reduce) {
    [data-fusshuegel] [data-huegelpfeil] svg, [data-fusshuegel] [data-huegeltext] span { transition: none !important; }
  }

  input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; }
@media (max-width: 980px) {
    [data-desk] { display: none !important; }
    [data-mob] { display: inline-flex !important; }
    [data-hero-grid] { grid-template-columns: 1fr !important; }
    [data-hero-left] { grid-column: span 1 !important; }
    [data-hero-right] { grid-column: span 1 !important; justify-content: flex-start !important; }
    [data-h1] { font-size: 10vw !important; }
  }
@media (hover: none), (max-width: 1120px) {
    [data-ringwrap] { height: 58px !important; }
    [data-ring] { height: 48px !important; }
  }

  /* ===== A Filmstreifen: Kacheln laufen als Band, aktive Kachel mittig groß ===== */

  /* ===== C2 / C3 Objektivfront ===== */
  /* Tubus: gebürstetes Schwarzmetall, Fokusring mit Rillen am Rand */
  #diagnose .lens-spin .lens-barrel, .lens-spin .lens-teeth { position: absolute; }
  /* Stufen des Frontrings */
  /* Gravierte Ringschrift wie auf dem Deckel */
  /* Frontfassung mit Filtergewinde */
  /* Frontlinse: vergütetes Glas */
  #diagnose .lens-ring.r1 { inset: 9%; } .lens-ring.r2 { inset: 20%; border-color: rgba(255,255,255,0.07); }
  /* Iris */
  /* Acht Lamellen wie Haifischflossen: jede ist eine Kreisscheibe mit dem Radius der Fassung, um k*45deg gesetzt. Ihr Rand bildet
     die geschwungene Innenkante. Offen liegt die Scheibe ganz außen, zu rückt sie auf 48 Einheiten heran, sodass die acht Kanten
     ein kleines Achteck in der Mitte offen lassen. --d ist der Abstand des Scheibenmittelpunkts vom Zentrum. */
  /* Irisblende: acht Keile. Jeder Keil liegt zwischen seiner eigenen Kante (x = 1) und der Kante des nächsten Blatts
     (x + y = √2); der Scheitel ist eine Achteck-Ecke. Alles ist für Öffnungsradius 1 gezeichnet und wird mit --s skaliert,
     so bleibt die Geometrie beim Schließen exakt. Offen liegt der Scheitel außerhalb der Fassung. */
  @property --s { syntax: '<number>'; inherits: true; initial-value: 60; }
  #diagnose .lens-blende i, .lens-blende u { display: none; }
  /* Glanz und Gegenlicht folgen dem Zeiger */
  @media (max-width: 980px) { #diagnose .lens { width: min(70vw, 360px); justify-self: center; } }

  /* ===== D Frontdeckel mit Bajonett: Kappe rastet beim Wechsel ===== */
  #diagnose .d-scene { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
  #diagnose .d-side { display: flex; flex-direction: column; gap: 16px; }
  #diagnose .d-side [data-slide2] { min-height: clamp(220px, 30vh, 320px); }
  #diagnose .d-side .titel { font-size: clamp(30px, 3.6vw, 60px); }
  #diagnose .d-side .text { font-size: 15px; max-width: 52ch; }
  #diagnose .d-progress { display: flex; gap: 4px; }
  #diagnose .d-progress span { position: relative; flex: 1; height: 2px; background: rgba(255,255,255,0.14); border-radius: 2px; overflow: hidden; cursor: pointer; transition: height 250ms var(--ease), background 250ms; }
  #diagnose .d-progress span::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
  #diagnose .d-progress span:hover, .d-progress span:focus-visible { height: 6px; background: rgba(255,255,255,0.28); outline: none; }
  #diagnose .d-progress { align-items: center; min-height: 6px; }
  #diagnose .d-progress span i { display: block; height: 100%; width: 0; background: var(--accent); }
  #diagnose .d-progress span.done i { width: 100%;  transition: none !important; }
  #diagnose .d-progress span.on i { width: 0; }
  #diagnose .d-progress span.on.run i { width: 100%; transition: width 6s linear; }
  #diagnose .d-progress span.done i { transition: width 250ms var(--ease); }
  #diagnose .d-slide { transition: opacity 400ms, transform 600ms var(--ease); }
  #diagnose .d-slide.out { opacity: 0; transform: translateX(18px); }

  @media (max-width: 980px) { #diagnose .lens { width: min(70vw, 360px); justify-self: center; } }

  /* ===== D Frontdeckel mit Bajonett: Kappe rastet beim Wechsel ===== */
  #diagnose .d-progress span.done i { width: 100%; }

  /* ===== E Kontaktbogen: drei Spuren als Reiter, je Spur ein Streifen quer ===== */
  @keyframes e-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

  @media (max-width: 980px) {
    .stage { height: auto; min-height: 100vh; }
    .kopf { grid-template-columns: 1fr; }
    .b-liste { flex-direction: row; overflow-x: auto; } .b-liste .label { display: none; } .b-liste button { grid-template-columns: auto; white-space: nowrap; } .b-liste button span:last-child { display: none; }
    .cap-scene { grid-template-columns: 1fr; text-align: center; } .cap-side, .cap-side.r { align-items: center; text-align: center; } .cap { width: min(70vw, 360px); justify-self: center; }
    .d-scene { grid-template-columns: 1fr; } .d-scene .lens { width: min(70vw, 340px); justify-self: center; }
  }
  @media (prefers-reduced-motion: reduce) { .a-band, .a-card, .b-slide, .cap-turn, .cap-content, .d-tabs, .d-slide, .e-cell, .glow-ring { transition: none !important; animation: none !important; } }

  /* ==== Rechner im Kameragehäuse ==== */

  html { overscroll-behavior-y: none; }
  html, body { margin: 0; padding: 0; background: #0F141B; }
  * { box-sizing: border-box; }
  a { color: #fff; }
  a:hover { color: rgba(255,255,255,0.64); }
  :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  /* Klick setzt den Fokus, soll aber keinen Rahmen zeigen; Tastatur weiterhin schon */
  /* Der Auslöser glimmt beim Überfahren, wie die Aufnahmeanzeige einer Kamera */
  [data-rec]::after {
    content: ""; position: absolute; inset: 0; border-radius: 999px; opacity: 0;
    background: radial-gradient(120% 120% at 38% 26%, #ff8a7a 0%, #d8382c 52%, #6b1610 100%);
    transition: opacity 520ms cubic-bezier(0.45, 0, 0.75, 0.9);
  }
  [data-cta]:hover [data-rec], [data-cta]:focus-visible [data-rec] {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 10px rgba(216,56,44,0.5) !important;
    transition: box-shadow 520ms cubic-bezier(0.45, 0, 0.75, 0.9) !important;
  }
  [data-cta]:focus-visible { outline: 2px solid rgba(255,255,255,0.8); outline-offset: 3px; }
  [data-tut-tall] { display: none; }
  @keyframes vv-atem {
    0%, 100% { transform: scale(0.94); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
    50% { transform: scale(1.07); box-shadow: 0 0 0 10px rgba(255,255,255,0.05); }
  }
  [data-vslplay][data-atmet] { animation: vv-atem 3.2s cubic-bezier(0.4,0,0.5,1) infinite; }
  /* Glitch: derselbe Störeffekt wie in der Menüpille und am WHOLE STACK Link */
  #vv-vsl-card:hover [data-vslplay] { animation: none; transform: scale(1.1); background: rgba(255,255,255,0.2); filter: url(#rgb-glitch); }
  #vv-vsl-card:hover [data-vslnote] { filter: url(#rgb-glitch); color: rgba(255,255,255,0.85); }
  /* Beim Überfahren klart die Videokachel auf: volles Bild statt Milchglas */
  #vv-vsl-card:hover { transform: scale(1.05); }
  #vv-vsl-card:hover [data-vslimg] { opacity: 1; filter: saturate(1.32) contrast(1.18) brightness(1.06); }
  #vv-vsl-card:hover [data-vslveil] { opacity: 0; }
  #vv-vsl-card:hover [data-vslglass] { background: rgba(255,255,255,0); box-shadow: inset 0 1px 1px rgba(255,255,255,0.16); }
  /* Ruhelinie unter dem Link, darüber wächst beim Überfahren eine Farblinie */
  [data-wslink]::before, [data-wslink]::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; pointer-events: none; }
  [data-wslink]::before { width: 100%; background: rgba(255,255,255,0.35); }
  /* Die Linie wächst und trägt denselben Störeffekt wie die Menüpille */
  [data-wslink]::after { width: 0; background: #fff; transition: width 520ms cubic-bezier(0.16,1,0.3,1); }
  [data-wslink]:hover::after, [data-wslink]:focus-visible::after { width: 100%; }
  [data-wslink]:hover, [data-wslink]:focus-visible { filter: url(#rgb-glitch); }
  /* Der Pfeil wandert leicht in seine Zeigerichtung und kommt zurück */
  @keyframes vv-pfeil { 0% { transform: none; } 30% { transform: translate(2.5px, -2.5px); } 60%, 100% { transform: none; } }
  [data-wslink] svg { transition: transform 400ms cubic-bezier(0.16,1,0.3,1); }
  [data-wslink]:hover svg, [data-wslink]:focus-visible svg { animation: vv-pfeil 2.6s cubic-bezier(0.4,0,0.5,1) infinite; }

  
  /* Beim Überfahren glimmt die Gravur im Signalrot der Aufnahmeanzeige */
  /* Die Legende darf im Hochformat größer stehen, dort ist Platz */
  [data-legend] span { font-size: 10.5px; }
  /* Das Kennzeichen bleibt klein, es wird nicht mitkompensiert */
  /* Deutlicher sichtbar: größere Schrift, kräftigere Kante und Fläche */
  [data-warnbadge], [data-warnbadge] * { font-size: 13px !important; line-height: 1.2 !important; }
  [data-warnbadge] { bottom: 14px !important; height: 25px !important; padding: 0 10px !important; border-color: rgba(var(--accent-rgb),0.8) !important; background: rgba(var(--accent-rgb),0.14) !important; transition: opacity 280ms cubic-bezier(0.16,1,0.3,1); }
  /* LCD-Panes: Flex nur wenn sichtbar — inline display würde [hidden] überschreiben */
  [data-lcdrot] > [data-if="showValues"][data-lcdpane="params"]:not([hidden]) { flex: none; }
  [data-lcdrot] > [data-if="showValues"][data-lcdpane="main"]:not([hidden]),
  [data-lcdrot] > [data-if="showInfo"]:not([hidden]),
  [data-lcdrot] > [data-if="showReset"]:not([hidden]) {
    flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  }
  /* Infoslot: Calm/Warn liegen in derselben Zelle (Platzhalter reserviert die Höhe) */
  [data-infoslot] > [data-if] { grid-area: 1 / 1; min-width: 0; }
  [data-infoslot] > [data-if][hidden] { display: none !important; }
  /* Der Erklärblock bleibt so flach, dass nie gescrollt werden muss */
  [data-lines] { margin-top: 6px; }
  [data-lines] span { font-size: 11.5px !important; line-height: 1.5 !important; }
  [data-infoslot] > div { padding: 11px 13px !important; gap: 7px !important; }
  [data-infoslot] p { font-size: 11.5px !important; line-height: 1.5 !important; }
  [data-infoslot] a { height: 34px !important; }
  @media (max-width: 700px) {
    [data-tut-wide] { display: none !important; }
    [data-tut-tall] { display: inline !important; }
  }
  /* Der Haken kommt aus der gemessenen Bühnenbreite, damit die Vorschau stimmt */
  [data-tut-panel][data-narrow] { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; padding: 14px 16px !important; }
  [data-tut-panel][data-narrow] > div { flex: none !important; }
  [data-tut-panel][data-narrow] > button { width: 100% !important; }
  [data-tut-panel][data-narrow] [data-tut-wide] { display: none !important; }
  [data-tut-panel][data-narrow] [data-tut-tall] { display: inline !important; }
  [data-infohost] { display: none; }
  @media (max-width: 700px) {
    [data-tut-panel] { padding: 14px 16px !important; gap: 12px !important; flex-direction: column !important; align-items: stretch !important; }
    [data-tut-panel] > div { flex: none !important; }
    [data-tut-panel] > button { width: 100% !important; }
  }
  /* KPIs behalten ihre volle Zeilenhöhe; der Jahresumsatz-Block gibt bei Engpass nach */
  [data-lcd] [data-kpis] { flex: none; }
  [data-lcd] [data-kpival] { line-height: 1; }
  /* Sichert die Labelgröße, falls eine Inline-Angabe verloren geht */
  [data-kpis] > div > span:first-child { font-size: 10px; }
  /* Bedienfeld als Bodenplatte, nur wo beide Spalten Platz haben */
  @media (min-width: 1120px) {
    [data-body] { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) !important; }
  }

  /* ---- Telefon: das komplette Gehäuse kippt um 90 Grad, sonst nichts ---- */
  @media (max-width: 700px) {
    /* Nur Geometrie: das Gehäuse behält seine nativen Maße und wird gedreht skaliert.
       Keine Kompensation an Bedienelementen oder Schrift, damit alles 1:1 dem
       Desktop entspricht. */
    /* Höhe und Skalierung berechnet das Skript aus dem verfügbaren Platz */
    [data-rotbox] { position: relative; width: 100%; }
    /* Die Trefferfläche hängt am unbeschnittenen Rahmen und reicht seitlich
       über den Ring hinaus; senkrecht nur wenig, damit Werteleiste und
       Moduswahlrad ihre Taps behalten. */
    [data-rotbox] [data-ringwrap] { height: 54px !important; }
    [data-rotbox] [data-ringwrap] > [data-dragonly] { inset: -4px -58px !important; width: auto !important; height: auto !important; }
    /* Ring samt Umfeld nimmt senkrechte Gesten an: wer neben der Greiffläche
       zieht, verstellt nichts, scrollt aber auch nicht versehentlich die Seite. */
    /* Sicherheitsfläche um die Greiffläche: senkrechte Gesten laufen hier ins
       Leere statt die Seite zu scrollen. */
    [data-rotbox] [data-ringguard] { display: block !important; position: absolute; inset: -28px -82px; z-index: 1; touch-action: pan-x; }
    [data-rotbox] [data-ringwrap] > [data-dragonly] { z-index: 2 !important; }
    /* Eine einzige Regel für die Werteleiste: flach, dreispaltig, ohne Überlauf */
    [data-paramstrip] { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; overflow: visible !important; padding: 0 !important; }
    [data-paramstrip] > button { min-height: 42px !important; padding: 4px 8px !important; }
    [data-paramstrip] > button span { white-space: nowrap !important; letter-spacing: 0 !important; }
    [data-paramstrip] > button > span:first-child, [data-paramstrip] > button > span:first-child * { font-size: 16px !important; }
    [data-paramstrip] > button > span:last-child, [data-paramstrip] > button > span:last-child * { font-size: 25px !important; }
    /* Die Statuszeile weicht: ihre Höhe braucht der Kennzahlenblock */
    [data-status] { display: none !important; }
    /* Das gegengedrehte Bedienfeld braucht mehr Spaltenbreite für seine Längsachse */
    [data-plate] { zoom: 1 !important; position: absolute !important; left: 0; top: 0; width: 956px !important; max-width: none !important; height: 614px !important; margin: 0 !important; transform-origin: 0 0; }
    [data-body] { grid-template-columns: minmax(0, 1fr) minmax(0, 460px) !important; }
    /* Phone: zwei Zeilen à zwei Spalten — Jahresumsatz|Zusatzumsatz, dann Je|Eigene */
    [data-lcdbody] {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas:
        "jahr extra"
        "tag days";
      gap: 8px 14px !important;
      align-content: start !important;
      padding: 10px 14px 8px !important;
    }
    [data-lcd] [data-kpis] { display: contents !important; }
    [data-lcd] [data-jahr] { grid-area: jahr; flex: none !important; overflow: visible !important; gap: 4px !important; min-width: 0; }
    [data-kpi="tag"] { grid-area: tag; }
    [data-kpi="days"] { grid-area: days; }
    [data-kpi="extra"] { grid-area: extra; }
    [data-lcd] [data-legend] { display: none !important; }
    [data-lcd] [data-headrow] { flex-wrap: nowrap !important; gap: 4px !important; }
    [data-lcd] [data-headrow] > span { white-space: nowrap !important; font-size: 9px !important; letter-spacing: 0.08em !important; }
    [data-lcd] [data-headrow] > span:last-child { display: none !important; }
    /* Jahresumsatz teilt sich die Zeile mit Zusatzumsatz — alle vier Zahlen gleich groß */
    #werkzeug [data-lcd] [data-big],
    #werkzeug [data-lcd] [data-kpival] {
      font-size: 44px !important;
      line-height: 1 !important;
      flex: none !important;
    }
    [data-lcd] [data-jahr] > div[style*="height: 7px"] { height: 4px !important; }
    [data-kpi="tag"], [data-kpi="days"], [data-kpi="extra"] {
      padding-top: 5px !important; gap: 2px !important; min-width: 0;
      border-top: 1px solid rgba(255,255,255,0.12);
    }
    /* Obere Reihe: keine Trennlinie über Zusatzumsatz — sonst hängt er tiefer als Jahresumsatz */
    [data-kpi="extra"] { border-top: 0 !important; padding-top: 0 !important; }
    [data-lcd] [data-jahr] { padding-top: 0 !important; }
    [data-legend] span { font-size: 13px !important; }
    [data-legend] { gap: 12px !important; }
    /* Im Hochformat zeigt der eigene Block, der im Display bleibt verborgen */
    [data-infohost] { display: block !important; }
    [data-lcd] [data-infoslot], [data-lcd] [data-lines] { display: none !important; }
    /* Im Hochformat gilt die senkrechte Ziehachse, dazu passt der Hinweistext */
    /* Senkrechte Gesten gehören im Hochformat dem Regler, nicht dem Seitenscroll */
    [data-rotbox] [data-dragonly], [data-rotbox] [data-ring] { touch-action: pan-x !important; }
    /* Der Zeiger zeigt die senkrechte Ziehachse an */
    [data-rotbox] [data-dragonly], [data-rotbox] [data-ring], [data-rotbox] [data-ringwrap] { cursor: ns-resize !important; }
        /* Kopfzeile im Hochformat: kompakter Satz, damit die Kamera Raum behält */
    [data-head] { gap: 7px !important; }
    [data-h2] { font-size: 22px !important; line-height: 0.94 !important; }
    [data-head] p { font-size: 10.5px !important; line-height: 1.5 !important; max-width: 280px !important; }
    /* Nur der gedrehte Displayinhalt wird vorkompensiert: der Downscale liegt bei
       0,55, Mikroschrift wäre sonst unter 6 Pixel. Gehäuse und Bedienfeld bleiben
       proportional wie im Desktop. */
    /* KPI-Labels bleiben einzeilig; Schriftgröße steuert cmFitKpiLabels() */
    [data-kpis] [data-kpilabel], [data-kpi] [data-kpilabel] { white-space: nowrap !important; letter-spacing: 0.04em !important; min-width: 0; max-width: 100%; overflow: hidden; }
    /* Der Hinweis- und Engpassblock steht im Hochformat unter dem Gehäuse */
    /* Kompakte Infobox: die Marke sitzt als Reiter auf der Kante, nicht als eigene Zeile */
    /* Erklärung und Hinweis teilen eine kompakte Box, damit die Kamera Platz gewinnt */
    [data-infoout] { position: static; margin: 22px 10px 0; padding: 0; border: 0; background: none; display: flex; flex-direction: column; gap: 7px; }
    /* Nur die äußere Box hat Rahmen und Fläche, alles darin ist rahmenlos */
    /* Der innere Zustandsblock ist die Box, außen kein zweiter Rahmen */
    [data-infoout] > * { margin: 0 !important; }
    /* Die beiden Erklärungssätze entfallen im Hochformat, die Kamera gewinnt den Platz */
    [data-infoout] [data-lines] { display: none !important; }
    /* Das Raster liegt im Zustandsblock, nicht im Slot: Marke links, Text und Link rechts */
    /* Einspaltiges Raster: die beiden Zustände liegen laut Vorlage in derselben Zelle */
    [data-infoout] [data-infoslot] { max-height: none !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
    [data-infoout] [data-infoslot] > div[style*="visibility: hidden"] { display: none !important; }
    /* Marke oben, darunter Erklärtext und Button — keine eigene Spalte */
    [data-infoout] [data-infoslot] > div { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; row-gap: 5px; align-items: start; }
    [data-infoout] [data-infoslot] > div > span:first-child { font-size: 7px !important; letter-spacing: 0.18em !important; opacity: 0.6; line-height: 1.4 !important; }
    [data-infoout] [data-infoslot] > div > a { justify-self: start; }
    [data-infoout] p { display: block !important; font-size: 9.5px !important; line-height: 1.35 !important; margin: 0 !important; }
    [data-infoout] a svg { width: 9px !important; height: 9px !important; }
    [data-infoout] a > span { text-decoration: underline; text-decoration-color: rgba(255,255,255,0.28); text-underline-offset: 3px; }
    [data-infoout] a { font-size: 9.5px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important;
      /* Die Linie gehört an den Text, nicht an die Elementkante */
      border-bottom: 0 !important; text-decoration: none !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px !important; }
    [data-infoout] [data-lines] p { font-size: 9.5px !important; line-height: 1.35 !important; }
    /* Mehr Platz im Display: die Zahlen werden größer */
  }

  @media (max-width: 700px) {
    [data-h2] { font-size: 30px !important; line-height: 0.92 !important; }
    [data-head] p { font-size: 12px !important; }
    [data-pad] { padding: 30px 14px 20px !important; }
  }

    /* Die drei Ebenen füllen ihre Spalte, damit sie so hoch steht wie Thumbnail und Bausteinkachel zusammen */
    [data-cardcol] [data-card] { flex: 1 1 auto; min-height: 72px; overflow: hidden; }
    /* Auf schmalen Bildschirmen ist Platz: Werk und Beschriftung dürfen größer */
    [data-machine] { max-width: 460px !important; }
    /* Die Bausteinkachel behält ihre Höhe, egal wie lang die Liste der Spur ist:
       sonst verschiebt sich beim Reglerwechsel alles darüber und darunter. */
    [data-detail] { height: 176px !important; flex: 0 1 auto !important; min-height: 132px !important; }
    [data-tracks] [data-track], [data-tracks] [data-axis] { grid-template-columns: 92px minmax(0, 1fr) !important; gap: 8px !important; }


/* style-hover / style-active from the export */
.vv-h1:hover {filter: url(#rgb-glitch);}
.vv-h2:hover {filter: url(#rgb-glitch);}
.vv-h3:hover {filter: url(#rgb-glitch);}
.vv-h4:hover {filter: url(#rgb-glitch);}
.vv-h5:hover {filter: url(#rgb-glitch);}
.vv-h6:hover {background: rgba(255,255,255,0.04);}
.vv-h7:hover {transform: scale(1.05);}
.vv-h8:hover {background: linear-gradient(180deg, #515b68 0%, #39424c 30%, #29313a 68%, #1b2027 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.34), inset 0 -1.5px 2px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.5);}
.vv-a9:active {transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,0.75);}
.vv-h10:hover {background: rgba(255,255,255,0.04);}
.vv-h11:hover {background: rgba(255,255,255,0.04);}
.vv-h12:hover {background: rgba(255,255,255,0.04);}
.vv-h13:hover {background: rgba(255,255,255,0.04);}
.vv-h14:hover {background: rgba(255,255,255,0.04);}
.vv-h15:hover {background: rgba(255,255,255,0.04);}
.vv-h16:hover {color: #fff; border-bottom-color: rgba(255,255,255,0.6);}
.vv-h17:hover {color: #fff; border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.07);}
.vv-h18:hover {color: #fff; border-color: rgba(255,255,255,0.3);}
.vv-h19:hover {color: #fff; border-color: rgba(255,255,255,0.3);}
.vv-h20:hover {color: #fff; border-color: rgba(255,255,255,0.3);}
.vv-h21:hover {color: #fff; border-bottom-color: rgba(255,255,255,0.6);}
.vv-h22:hover {background: rgba(255,255,255,0.1);}
.vv-h23:hover {background: rgba(255,255,255,0.1);}
.vv-h24:hover {background: rgba(255,255,255,0.1);}
.vv-h25:hover {background: rgba(255,255,255,0.1);}
.vv-h26:hover {background: rgba(255,255,255,0.1);}
.vv-h27:hover {background: rgba(255,255,255,0.1);}
.vv-h28:hover {color: #fff; filter: url(#rgb-glitch);}
.vv-h29:hover {color: #fff; filter: url(#rgb-glitch);}
.vv-h30:hover {color: #fff; filter: url(#rgb-glitch);}
.vv-h31:hover {color: #fff; filter: url(#rgb-glitch);}
.vv-h32:hover {color: #fff; filter: url(#rgb-glitch);}
.vv-h33:hover {color: #fff; filter: url(#rgb-glitch);}
.vv-h34:hover {color: #fff; filter: url(#rgb-glitch);}
.vv-h35:hover {color: #fff; filter: url(#rgb-glitch);}
.vv-h36:hover {color: #fff; filter: url(#rgb-glitch);}
.vv-h37:hover {color: #fff; filter: url(#rgb-glitch);}
.vv-h38:hover {color: #fff; filter: url(#rgb-glitch);}
.vv-h39:hover {color: #fff; filter: url(#rgb-glitch);}
.vv-h40:hover {color: #fff; filter: url(#rgb-glitch);}
.vv-h41:hover {color: #fff; filter: url(#rgb-glitch);}
.vv-h42:hover {color: #fff; filter: url(#rgb-glitch);}
.vv-h43:hover {color: #fff; filter: url(#rgb-glitch);}
.vv-h44:hover {color: #fff; filter: url(#rgb-glitch);}
.vv-h45:hover {background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.45); transform: scale(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);}
.vv-h46:hover,
.vv-h47:hover,
.vv-h48:hover {background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.45); transform: scale(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);}

/* Film-Glasleiste (Hero-VSL + Haltung): Hover wie die anderen Glas-Pills */
[data-vsl-bar] > button,
[data-haltung-bar] > button,
[data-vsl-close] {
  transition: background 400ms var(--ease), border-color 400ms var(--ease), transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
[data-vsl-bar] > button:hover,
[data-haltung-bar] > button:hover,
[data-vsl-close]:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.45);
  transform: scale(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
[data-vsl-bar] > button:active,
[data-haltung-bar] > button:active,
[data-vsl-close]:active {
  transform: scale(0.98);
}
[data-vsl-track]:hover [data-vsl-fill],
[data-haltung-track]:hover [data-haltung-fill] {
  background: rgba(var(--accent-rgb),0.95);
}
[data-vsl-track]:hover [data-vsl-rail],
[data-haltung-track]:hover > span:first-child {
  background: rgba(255,255,255,0.32);
}

[data-vv-eg]:focus-within { outline: 2px solid #fff; outline-offset: 6px; border-radius: 999px; }
[data-if="menuOpen"]:not([hidden]) { display: flex; flex-direction: column; width: 100%; }