/* =============================================================================
   V2-DESIGN · „Neuro-Observatorium“ — Nexus KI
   Festgelegt von Collin am 01.10.2026: „speicher dieses Design ab als V2 Design …
   wenn ich an V2 arbeite, z. B. meine Website, dann wird das Design genommen.“

   Herkunft: Nexus Gedächtnis (~/Nexus/Apps/NexusGedaechtnis/static/neuro.css und
   static/ansichten/*.css), Stand 01.10.2026. Beschreibung und Regeln: V2-DESIGN.md.
   Diese Kopie: v2-design.css mit den Website-Ergänzungen vom 01.10.2026 (Schlagzeile,
   Rahmen, Reiter, Abschnittslicht, Erscheinen, Formular, Fuß), für die Website ohne
   App-Kanäle und ohne Hell-Thema (die Website V2 ist nur dunkel).

   Grundidee: Ein Beobachtungsraum bei Nacht. EIN Schauspiel je Seite, alles andere
   ruhig: Glas, Haarlinien, Licht nur dort, wo etwas aktiv, gewählt oder frisch ist.
   Die Akzentfarbe ist ein „Lichtkanal“ — auf der Website der Abschnitt ([data-licht]).
   KLARTEXT: Schrift nie unter 14 px, keine Versalien.

   Schichten: v2-token → v2-basis → v2-bauteile; website.css überschreibt danach.
   ========================================================================== */

@layer v2-token, v2-basis, v2-bauteile;

/* ============================================================== Tokens */
@layer v2-token {
  :root {
    /* Nacht — Grund, Bühne, Glas, Linien */
    --v2-nacht: #03060F;                    /* Grundfläche (Blau-Schwarz, kein reines Schwarz) */
    --v2-buehne: #010208;                   /* Bühne des Schauspiels — bleibt immer Nacht */
    --v2-glas: rgba(12, 20, 42, .62);       /* Glasfläche (Karten, Seitenleisten) */
    --v2-glas-stark: rgba(14, 24, 50, .82); /* Glas über unruhigem Grund (Menüs, Dialoge) */
    --v2-glas-leiste: rgba(6, 12, 30, .62); /* schwebende Glasleiste auf der Bühne */
    --v2-kopf-grund: rgba(5, 9, 22, .74);   /* Kopfzeile */
    --v2-linie: rgba(140, 180, 255, .14);   /* Haarlinie (Rand von Glas) — nie heller */
    --v2-linie-fein: rgba(140, 180, 255, .08); /* Trennung zwischen Zeilen */
    --v2-flaeche: rgba(140, 180, 255, .05); /* ruhige Fläche (Kacheln, Zähler) */
    --v2-unschaerfe: saturate(150%) blur(20px);

    /* Text — nie reines Weiß */
    --v2-text: #E9F1FF;      /* Haupttext, 17,8 : 1 auf --v2-nacht */
    --v2-text-hell: #F2F7FF; /* Titel, aktive Elemente */
    --v2-text-2: #B3C2E2;    /* Nebentext */
    --v2-text-3: #8A9BC2;    /* Hinweise, Zeitangaben (nie Fließtext) */

    /* Licht — die Akzentpalette (Fluoreszenz-Kanäle) */
    --v2-cyan: #4FD8FF;      /* Synapse-Cyan: Standard-Licht */
    --v2-rose: #FF4D6D;      /* Rosarot */
    --v2-violett: #B98CFF;   /* Mischbild */
    --v2-myelin: #8A5CFF;    /* Myelin-Violett, Begleiter des Cyan */
    --v2-bernstein: #FFC46B; /* Impuls, Marke „wichtig“, Nummern */

    /* Das gerade gültige Licht (Standard Cyan) — Kanäle unten */
    --v2-licht: var(--v2-cyan);
    --v2-licht-rgb: 79, 216, 255;
    --v2-licht-verlauf: linear-gradient(90deg, #4FD8FF, #8BE9FF);
    /* --v2-knopf-verlauf bleibt hier UNGESETZT: .v2-knopf rechnet den Verlauf am Element aus dem
       geerbten --v2-licht-rgb — sonst erbte jeder Abschnitt den in :root fertig berechneten Cyan-Verlauf. */
    --v2-knopf-text: #03101A;

    /* Bedeutungsfarben für Gruppen (Punkte, Kategorien) — folgen NICHT dem Licht */
    --v2-blau: #4F8BFF; --v2-tuerkis: #2FD6E8; --v2-gruen: #45F08A; --v2-orange: #FFB547;
    /* Signale — nur mit Bedeutung */
    --v2-gut: #45F08A; --v2-warn: #FFC46B; --v2-fehler: #FF6B6B;

    /* Marke — nur für die Bildmarke, nie als Oberflächenlicht */
    --nx-blau: #3F7BFF; --nx-petrol: #0E93B0; --nx-blau-hell: #7FA8FF; --nx-petrol-hell: #2CB4CE;

    /* Schrift — Website: Inter Tight + Inter (selbst gehostet) */
    --v2-schrift-titel: "Inter Tight", -apple-system, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
    --v2-schrift: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    --v2-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;   /* nur Code, Pfade, Dateinamen */
    --v2-text-groesse: 16px;          /* App; Website über [data-ort="website"]: 18 px */
    --v2-lesetext-groesse: 16px;
    --v2-unterzeile-groesse: 16px;

    /* Abstände (4er-Raster) und Seitenbreite — Website: Inhalt höchstens 1.240 px, Ränder wachsen mit */
    --v2-abstand-1: 4px; --v2-abstand-2: 8px; --v2-abstand-3: 12px; --v2-abstand-4: 16px; --v2-abstand-5: 24px;
    --v2-abstand-6: 32px; --v2-abstand-7: 48px; --v2-abstand-8: 64px; --v2-abstand-9: 96px; --v2-abstand-10: 128px;
    --v2-breite: 1240px;
    --v2-rand: clamp(16px, 4vw, 48px);

    /* Maße */
    --v2-radius-s: 10px; --v2-radius: 14px; --v2-radius-m: 18px; --v2-radius-l: 20px; --v2-pille: 999px;
    --v2-kopf: 64px; --v2-mass: 72ch;

    /* Bewegung */
    --v2-kurve: cubic-bezier(.3, .6, .2, 1);
    --v2-schnell: .2s; --v2-mittel: .35s;

    /* Ebenen — nichts schneidet durch die Kopfzeile */
    --v2-z-buehne: 0; --v2-z-inhalt: 1; --v2-z-leiste: 20; --v2-z-kopf: 40; --v2-z-menue: 50; --v2-z-fenster: 60;
  }

  /* Lichtkanäle der Website: [data-licht] am Abschnitt.
     Jeder Kanal setzt ALLES, was vom Licht abhängt — auch in verschachtelten Abschnitten. */
  [data-licht="cyan"] {
    --v2-licht: #4FD8FF; --v2-licht-rgb: 79, 216, 255;
    --v2-licht-verlauf: linear-gradient(90deg, #4FD8FF, #8BE9FF);
    --v2-knopf-verlauf: initial; --v2-knopf-text: #03101A;
  }
  [data-licht="rose"] {
    --v2-licht: #FF4D6D; --v2-licht-rgb: 255, 77, 109;
    --v2-licht-verlauf: linear-gradient(90deg, #FF4D6D, #FF8C7A);
    --v2-knopf-verlauf: initial; --v2-knopf-text: #1A0208;
  }
  [data-licht="misch"] {
    --v2-licht: #B98CFF; --v2-licht-rgb: 185, 140, 255;
    --v2-licht-verlauf: linear-gradient(90deg, #4FD8FF, #B98CFF 50%, #FF4D6D);
    --v2-knopf-verlauf: linear-gradient(135deg, #4FD8FF, #B98CFF 55%, #FF6F86);
    --v2-knopf-text: #0B0620;
  }
  [data-licht="violett"] {
    --v2-licht: #B98CFF; --v2-licht-rgb: 185, 140, 255;
    --v2-licht-verlauf: linear-gradient(90deg, #8A5CFF, #B98CFF);
    --v2-knopf-verlauf: initial; --v2-knopf-text: #0B0620;
  }
  /* Website: größerer Fließtext — <html data-ort="website"> */
  [data-ort="website"] { --v2-text-groesse: 18px; --v2-lesetext-groesse: 18px; --v2-unterzeile-groesse: 17px; }
}

/* ============================================================== Basis */
@layer v2-basis {
  html { color-scheme: dark; }
  body {
    margin: 0; background: var(--v2-nacht); color: var(--v2-text);
    font: 400 var(--v2-text-groesse)/1.6 var(--v2-schrift);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  /* Ruhiger Lichtschimmer in der Farbe des Kanals hinter allen Seiten (nicht hinter der Bühne). */
  body.v2-schimmer::before {
    content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
    background:
      radial-gradient(38% 32% at 18% 12%, rgba(var(--v2-licht-rgb), .10), transparent 70%),
      radial-gradient(34% 30% at 86% 92%, rgba(var(--v2-licht-rgb), .07), transparent 70%);
    animation: v2-schimmer 38s ease-in-out infinite alternate;
  }
  [data-licht="misch"] body.v2-schimmer::before {
    background:
      radial-gradient(38% 32% at 18% 12%, rgba(79, 216, 255, .10), transparent 70%),
      radial-gradient(34% 30% at 86% 92%, rgba(255, 77, 109, .08), transparent 70%);
  }
  @keyframes v2-schimmer { from { transform: translate3d(-2%, -1%, 0); } to { transform: translate3d(2%, 1.5%, 0); } }
  ::selection { background: rgba(var(--v2-licht-rgb), .32); }
  :focus-visible { outline: 2px solid rgba(var(--v2-licht-rgb), .75); outline-offset: 2px; }
  code, kbd, pre { font-family: var(--v2-mono); font-size: max(14px, .9em); }

  /* Schriftgrade — Titel eng, Daten tabellarisch */
  .v2-schlagzeile { font: 700 clamp(40px, 4.5vw + 1rem, 88px)/1.02 var(--v2-schrift-titel); letter-spacing: -0.035em;
                    color: var(--v2-text-hell); margin: 0; text-wrap: balance; }
  .v2-titel { font: 680 34px/1.08 var(--v2-schrift-titel); letter-spacing: -0.03em; color: var(--v2-text-hell); margin: 0; }
  .v2-seitentitel { font: 680 30px/1.15 var(--v2-schrift-titel); letter-spacing: -0.026em; color: var(--v2-text-hell); margin: 0; }
  .v2-abschnitt { font: 650 20px/1.3 var(--v2-schrift-titel); letter-spacing: -0.015em; color: var(--v2-text); margin: 0; }
  .v2-unterzeile { font-size: var(--v2-unterzeile-groesse); line-height: 1.55; color: var(--v2-text-2); max-width: 68ch; }
  .v2-lesetext { font-size: var(--v2-lesetext-groesse); line-height: 1.66; max-width: var(--v2-mass); }
  .v2-lesetext a { color: var(--v2-licht); }
  .v2-klein { font-size: 14px; color: var(--v2-text-3); }
  .v2-zahl, .v2-zahlen { font-variant-numeric: tabular-nums; }
  .v2-rahmen { width: min(100% - 2 * var(--v2-rand), var(--v2-breite)); margin-inline: auto; }
}

/* ============================================================== Bauteile */
@layer v2-bauteile {

  /* ---------- Kopfzeile: Glas, volle Breite, Lichtlinie in der Kanalfarbe ---------- */
  .v2-kopf {
    position: sticky; top: 0; z-index: var(--v2-z-kopf);
    height: var(--v2-kopf); display: flex; align-items: center; gap: 18px; padding: 0 20px;
    background: var(--v2-kopf-grund); border-bottom: 1px solid var(--v2-linie-fein);
    -webkit-backdrop-filter: var(--v2-unschaerfe); backdrop-filter: var(--v2-unschaerfe);
  }
  .v2-kopf::after {            /* die Lichtlinie unter dem Kopf */
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: var(--v2-licht-verlauf); opacity: .75; pointer-events: none;
  }
  .v2-kopf::before {           /* Lauflicht, wenn etwas passiert (Klasse .puls kurz setzen) */
    content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 18%;
    background: linear-gradient(90deg, transparent, rgba(var(--v2-licht-rgb), 1), transparent);
    opacity: 0; pointer-events: none; z-index: 1;
  }
  .v2-kopf.puls::before { animation: v2-lauflicht 1.3s var(--v2-kurve) 1; }
  @keyframes v2-lauflicht { 0% { left: -18%; opacity: 0; } 15% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

  /* ---------- Reiter (Navigation): gewählt = Kanal-Verlauf + Lichtstrich ---------- */
  .v2-reiter {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: var(--v2-radius-s);
    font: 15px/1.3 var(--v2-schrift); color: var(--v2-text-2); text-decoration: none;
  }
  .v2-reiter:hover { color: var(--v2-text); background: rgba(140, 180, 255, .06); }
  .v2-reiter.aktiv, .v2-reiter[aria-current="page"] {
    color: #F2F7FF; background: linear-gradient(90deg, rgba(var(--v2-licht-rgb), .15), rgba(var(--v2-licht-rgb), .03));
  }
  .v2-reiter.aktiv::before, .v2-reiter[aria-current="page"]::before {
    content: ''; position: absolute; left: -2px; top: 7px; bottom: 7px; width: 3px; border-radius: 3px;
    background: var(--v2-licht); box-shadow: 0 0 12px rgba(var(--v2-licht-rgb), .75);
  }

  /* ---------- Umschalter (Segment-Pille) mit Leuchtpunkt und Zahl ---------- */
  .v2-schalter {
    display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--v2-pille);
    background: rgba(120, 160, 255, .06); border: 1px solid var(--v2-linie);
  }
  .v2-schalter button {
    display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px 0 11px;
    border: 0; border-radius: var(--v2-pille); background: transparent; cursor: pointer;
    font: 550 14px/1 var(--v2-schrift); letter-spacing: -0.005em; color: var(--v2-text-2);
    transition: background var(--v2-schnell), color var(--v2-schnell), box-shadow var(--v2-schnell);
  }
  .v2-schalter button:hover { color: var(--v2-text); background: rgba(140, 180, 255, .08); }
  .v2-schalter button b { font-weight: 500; color: var(--v2-text-3); font-variant-numeric: tabular-nums; }
  .v2-schalter button[aria-pressed="true"], .v2-schalter button.aktiv {
    color: var(--v2-text); background: rgba(var(--v2-licht-rgb), .16);
    box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .5), 0 0 22px -8px rgba(var(--v2-licht-rgb), .9);
  }

  /* ---------- Leuchtpunkt ---------- */
  .v2-punkt {
    display: inline-block; width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%;
    background: var(--farbe, var(--v2-licht)); box-shadow: 0 0 10px var(--farbe, rgba(var(--v2-licht-rgb), .7));
  }
  .v2-punkt.klein { width: 8px; height: 8px; flex-basis: 8px; }
  .v2-punkt.atmet { animation: v2-atmen 2.4s ease-in-out infinite; }
  @keyframes v2-atmen { 0%, 100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }

  /* ---------- Knöpfe ---------- */
  .v2-knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--v2-pille); cursor: pointer;
    font: 650 15px/1 var(--v2-schrift); letter-spacing: -0.005em; text-decoration: none;
    color: var(--v2-knopf-text);
    background: var(--v2-knopf-verlauf, linear-gradient(135deg, rgba(var(--v2-licht-rgb), 1), rgba(var(--v2-licht-rgb), .72)));
    box-shadow: 0 8px 26px -12px rgba(var(--v2-licht-rgb), .9);
    transition: box-shadow var(--v2-schnell), transform var(--v2-schnell);
  }
  .v2-knopf:hover, .v2-knopf:focus-visible { box-shadow: 0 0 0 1px rgba(var(--v2-licht-rgb), .34), 0 0 24px -6px rgba(var(--v2-licht-rgb), .6); }
  .v2-knopf:active { transform: translateY(1px); }
  .v2-knopf.zweit {
    color: var(--v2-text); background: rgba(140, 180, 255, .07); box-shadow: inset 0 0 0 1px var(--v2-linie);
  }
  .v2-knopf.zweit:hover { box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .5); }
  .v2-knopf.leise { color: var(--v2-text-2); background: transparent; box-shadow: none; font-weight: 550; }
  .v2-knopf.leise:hover { color: var(--v2-text-hell); background: rgba(140, 180, 255, .1); }

  /* ---------- Glas und Karten ---------- */
  .v2-glas {
    background: var(--v2-glas); border: 1px solid var(--v2-linie); border-radius: var(--v2-radius-m);
    -webkit-backdrop-filter: var(--v2-unschaerfe); backdrop-filter: var(--v2-unschaerfe);
  }
  /* Hervorgehobene Karte: Glas + Lichtkante oben in der Kanalfarbe (höchstens 1–2 je Bildschirm) */
  .v2-karte {
    position: relative; padding: 22px 26px; border-radius: var(--v2-radius-l);
    background: linear-gradient(180deg, rgba(var(--v2-licht-rgb), .075), rgba(var(--v2-licht-rgb), 0) 62%), var(--v2-glas);
    border: 1px solid var(--v2-linie);
    box-shadow: 0 26px 60px -34px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .035);
    -webkit-backdrop-filter: var(--v2-unschaerfe); backdrop-filter: var(--v2-unschaerfe);
  }
  .v2-karte::before {          /* Lichtkante — kein Rahmen, ein Lichtschein */
    content: ''; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--v2-licht-rgb), .9), transparent);
    opacity: .5; pointer-events: none;
  }
  .v2-karte.gewaehlt { border-color: rgba(var(--v2-licht-rgb), .72);
    box-shadow: 0 0 0 1px rgba(var(--v2-licht-rgb), .32), 0 22px 60px -28px rgba(var(--v2-licht-rgb), .75); }
  .v2-karte.gewaehlt::before { opacity: .95; }

  /* ---------- Kennzahl-Kachel: Punkt, große Zahl, Wort ---------- */
  .v2-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .v2-kachel {
    display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center;
    padding: 14px 16px; border-radius: var(--v2-radius); text-align: left; color: var(--v2-text);
    background: var(--v2-flaeche); border: 1px solid var(--v2-linie);
    transition: border-color var(--v2-schnell), background var(--v2-schnell);
  }
  .v2-kachel:hover { border-color: rgba(var(--v2-licht-rgb), .55); background: rgba(var(--v2-licht-rgb), .08); }
  .v2-kachel b { font: 680 26px/1.1 var(--v2-schrift-titel); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .v2-kachel span { grid-column: 1 / -1; font-size: 14px; color: var(--v2-text-2); }

  /* ---------- Status-Kachel mit atmendem Licht (gut / mittel / schlecht) ---------- */
  .v2-status {
    --l: 69, 240, 138;
    position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px;
    padding: 14px 16px; border-radius: var(--v2-radius); overflow: hidden;
    background: linear-gradient(160deg, rgba(var(--l), .10), rgba(var(--l), .02) 70%);
    box-shadow: inset 0 0 0 1px rgba(var(--l), .28);
  }
  .v2-status.mittel { --l: 255, 181, 71; }
  .v2-status.schlecht { --l: 255, 77, 109; }
  .v2-status i {
    width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--l));
    box-shadow: 0 0 10px rgba(var(--l), .85), 0 0 22px rgba(var(--l), .45); animation: v2-atmen 3.6s ease-in-out infinite;
  }
  .v2-status .name { font-size: 14px; font-weight: 600; color: var(--v2-text-2); }
  .v2-status .wert { grid-column: 1 / -1; font-size: 16px; font-weight: 600; color: var(--v2-text); }

  /* ---------- Listen: Haarlinien-Zeilen statt Kartenstapel ---------- */
  .v2-zeilen { display: flex; flex-direction: column; }
  .v2-zeile {
    display: flex; align-items: center; gap: 12px; padding: 11px 6px; font-size: 15px; text-align: left;
    color: var(--v2-text); background: none; border: 0; border-top: 1px solid var(--v2-linie-fein);
  }
  .v2-zeile:hover { background: rgba(var(--v2-licht-rgb), .07); }
  .v2-zeile .titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .v2-zeile .zeit { color: var(--v2-text-3); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* ---------- Marken und Hinweise ---------- */
  .v2-marke {
    display: inline-block; padding: 0 8px; border-radius: var(--v2-pille); font: 600 14px/22px var(--v2-schrift);
    color: var(--v2-text); background: rgba(140, 180, 255, .16); font-variant-numeric: tabular-nums;
  }
  .v2-marke.wichtig { color: #FFC46B; background: rgba(255, 196, 107, .12); box-shadow: inset 0 0 0 1px rgba(255, 196, 107, .28); font-weight: 500; }
  .v2-marke.licht { color: var(--v2-text-hell); background: rgba(var(--v2-licht-rgb), .18); box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .45); }
  .v2-hinweis {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 14px 12px 16px; border-radius: 12px; font-size: 15px; line-height: 1.45; color: var(--v2-text);
    background: rgba(255, 196, 107, .08); border: 1px solid rgba(255, 196, 107, .32);
  }
  .v2-hinweis.licht { background: rgba(var(--v2-licht-rgb), .08); border-color: rgba(var(--v2-licht-rgb), .28); }

  /* ---------- Bühne: EIN Schauspiel (lebendes Lichtobjekt), immer Nacht ---------- */
  .v2-buehne { position: relative; overflow: hidden; background: var(--v2-buehne); isolation: isolate; }
  .v2-buehne canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: var(--v2-z-buehne); }
  .v2-buehne-inhalt { position: relative; z-index: var(--v2-z-inhalt); }

  /* Schwebende Glasleiste auf der Bühne: Knöpfe | Trenner | Legende — eine Zeile */
  .v2-leiste {
    display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 4px; max-width: 100%;
    padding: 4px 6px 4px 4px; border-radius: var(--v2-pille); white-space: nowrap;
    background: var(--v2-glas-leiste); border: 1px solid rgba(140, 180, 255, .16);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  }
  .v2-leiste button {
    height: 32px; padding: 0 12px; border: 0; border-radius: var(--v2-pille); background: transparent;
    font: 14px var(--v2-schrift); color: #C9D7F5; cursor: pointer;
  }
  .v2-leiste button:hover { background: rgba(140, 180, 255, .12); color: var(--v2-text-hell); }
  .v2-leiste button.aktiv, .v2-leiste button[aria-pressed="true"] { color: var(--v2-text-hell); background: rgba(var(--v2-licht-rgb), .2); box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .55); }
  .v2-leiste .trenner { flex: 0 0 1px; align-self: stretch; margin: 6px 6px 6px 4px;
    background: linear-gradient(180deg, transparent, rgba(140, 180, 255, .32), transparent); }
  .v2-leiste .legende { display: inline-flex; align-items: center; gap: 13px; padding: 0 8px 0 2px; font-size: 14px; color: #C9D7F5; }
  .v2-leiste .legende span { display: inline-flex; align-items: center; gap: 7px; }

  /* Schild auf der Bühne: dunkle Glaspille, Ring in der Sachfarbe, Zeigerstrich zum Punkt */
  .v2-schild {
    position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px;
    border-radius: var(--v2-pille); font: 600 15px/1.2 var(--v2-schrift); color: #EEF2FF; white-space: nowrap;
    background: rgba(5, 8, 20, .78);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--farbe, #8CB4FF) 53%, transparent), 0 6px 18px -8px rgba(0, 0, 0, .9);
  }
  .v2-schild b { font-weight: 500; color: #9FB0D8; font-variant-numeric: tabular-nums; }
  .v2-schild.mit-stiel::after {
    content: ''; position: absolute; left: 50%; top: 100%; width: 1.2px; height: var(--stiel, 18px);
    background: linear-gradient(var(--farbe, #8CB4FF), transparent); pointer-events: none;
  }

  /* Passt-Balken (Relevanz, Fortschritt) in der Farbe der Sache */
  .v2-balken { display: block; height: 4px; border-radius: 3px; background: rgba(140, 180, 255, .14); overflow: hidden; }
  .v2-balken > span { display: block; height: 100%; width: calc(var(--anteil, .5) * 100%); border-radius: 3px;
    background: var(--farbe, var(--v2-licht)); box-shadow: 0 0 8px var(--farbe, rgba(var(--v2-licht-rgb), .6)); }

  /* Fragefeld (Eingabe mit Leuchten beim Fokus) */
  .v2-frage {
    display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 18px; border-radius: var(--v2-pille);
    background: var(--v2-glas-stark); border: 1px solid var(--v2-linie);
    -webkit-backdrop-filter: var(--v2-unschaerfe); backdrop-filter: var(--v2-unschaerfe);
  }
  .v2-frage input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--v2-text); font: 16px var(--v2-schrift); outline: none; }
  .v2-frage:focus-within { box-shadow: 0 0 0 1px rgba(var(--v2-licht-rgb), .5), 0 0 30px -8px rgba(var(--v2-licht-rgb), .8); }

  /* ---------- Website: Abschnittslicht, Erscheinen, Formular, Fuß ---------- */
  .v2-abschnittslicht { position: relative; isolation: isolate; }
  .v2-abschnittslicht::before {
    content: ''; position: absolute; inset: -10% 0; z-index: -1; pointer-events: none;   /* seitlich nie über den Rand */
    background: radial-gradient(40% 50% at var(--x, 15%) var(--y, 20%), rgba(var(--v2-licht-rgb), .12), transparent 70%);
  }
  .v2-erscheinen { animation: v2-erscheinen .7s var(--v2-kurve) backwards; animation-delay: var(--v, 0s); }
  @keyframes v2-erscheinen { from { opacity: 0; transform: translateY(12px); } }

  .v2-feld-name { display: block; margin-bottom: 6px; font-size: 15px; color: var(--v2-text-2); }
  .v2-feld {
    width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; box-sizing: border-box;
    font: 17px/1.4 var(--v2-schrift); color: var(--v2-text);
    background: var(--v2-glas-stark); border: 1px solid var(--v2-linie);
  }
  .v2-feld::placeholder { color: var(--v2-text-3); }
  .v2-feld:focus-visible { outline: none; border-color: rgba(var(--v2-licht-rgb), .55);
    box-shadow: 0 0 0 1px rgba(var(--v2-licht-rgb), .55), 0 0 24px -8px rgba(var(--v2-licht-rgb), .8); }

  .v2-fuss { padding: var(--v2-abstand-8) 0 var(--v2-abstand-9); border-top: 1px solid var(--v2-linie-fein);
    color: var(--v2-text-2); font-size: 15px; }
  .v2-fuss a { color: var(--v2-text-2); }
  .v2-fuss a:hover { color: var(--v2-text-hell); }

  /* ---------- Bewegung reduzieren: alles still (als letzte Regel) ---------- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
  /* ---------- Druck: hell, ohne Glas und Licht ---------- */
  @media print {
    body { background: #fff; color: #111; }
    body.v2-schimmer::before, .v2-kopf::after, .v2-kopf::before { display: none; }
    .v2-glas, .v2-karte, .v2-kachel, .v2-leiste { background: #fff; box-shadow: none; border-color: #ccc; -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
}