/* ═══════════════════════════════════════════════════════════════════════════
   G2-BAUTEILE — Pille, Karte, Zeile, Umschalter (+ Grundfläche, Fokus)
   Stand 03.11.2026 · G2-GESTALTUNGSBASIS-1102 § 2e/§ 3 Schritt 2 · Mockup R9

   WIRKT NUR UNTER html[data-ui="neu"] (Layout der neuen App, NeueApp.an?).
   Neue Klassen mit Präfix .v3- (design-reference § 7); die generischen
   Mockup-Namen (.sammel, .toast, .modus, .sidebar) werden bewusst NICHT
   übernommen — sie kollidieren mit Bestand (.r5-akte .sammel u. a.).
   Nur Token, keine Farbwerte (Wächter: test/lint/g2_basis_test.rb).

   Bereichsakzent: `.v3-akzent-<name>` an einem Container setzt `--g2-akzent`
   (hellblau · petrol · tuerkis · orange · brand); Karte und Umschalter lesen
   ihn. Ein Akzent ist Schmuck (Band, Punkt), nie Bedeutung — Status bleibt
   ok/warn/bad (G2 § 5: Blaupause je Seitentyp, nicht je Bereich).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Grundfläche ──────────────────────────────────────────────────────────── */
html[data-ui="neu"] body {
  font-family: var(--v3-font);
  font-size: var(--v3-fs-3);
  line-height: var(--v3-lh);
  color: var(--v3-ink);
  background: var(--v3-canvas);
}
/* Fokus: solider Ring in der Hauptfarbe (hell 9:1, dunkel 6:1 — gerechnet im
   Wächter) + weicher Hof. outline statt reinem box-shadow: bleibt im
   Windows-Kontrastmodus sichtbar und wird von keinem Bauteil-Schatten überstimmt. */
html[data-ui="neu"] :focus-visible {
  outline: 2px solid var(--v3-brand);
  outline-offset: 2px;
  box-shadow: var(--v3-fokus);
}
html[data-ui="neu"] .num {
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui="neu"] *, html[data-ui="neu"] *::before, html[data-ui="neu"] *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}

/* ── Bereichsakzent ───────────────────────────────────────────────────────── */
/* --g2-akzent = Fläche/Band — Schmuck, kein Informationsträger (Hellblau/Türkis
   hell nur 2,8:1, daher nie allein Bedeutung) · --g2-akzent-text = Schrift (≥ 4,5:1) */
html[data-ui="neu"] { --g2-akzent: var(--v3-brand); --g2-akzent-soft: var(--v3-brand-soft); --g2-akzent-text: var(--v3-brand); }
html[data-ui="neu"] .v3-akzent-hellblau { --g2-akzent: var(--v3-akzent-hellblau); --g2-akzent-soft: var(--v3-akzent-hellblau-soft); --g2-akzent-text: var(--v3-akzent-hellblau-text); }
html[data-ui="neu"] .v3-akzent-petrol { --g2-akzent: var(--v3-akzent-petrol); --g2-akzent-soft: var(--v3-akzent-petrol-soft); --g2-akzent-text: var(--v3-akzent-petrol-text); }
html[data-ui="neu"] .v3-akzent-tuerkis { --g2-akzent: var(--v3-akzent-tuerkis); --g2-akzent-soft: var(--v3-akzent-tuerkis-soft); --g2-akzent-text: var(--v3-akzent-tuerkis-text); }
html[data-ui="neu"] .v3-akzent-orange { --g2-akzent: var(--v3-akzent-orange); --g2-akzent-soft: var(--v3-akzent-orange-soft); --g2-akzent-text: var(--v3-akzent-orange-text); }

/* ── Pille (Status: ein Ton, eine Größe) — .v3-hpill geht darin auf ───────── */
html[data-ui="neu"] .v3-pille {
  display: inline-flex;
  align-items: center;
  gap: var(--v3-s-6);
  padding: 3px var(--v3-s-10);
  border-radius: var(--v3-r-pill);
  font-size: var(--v3-fs-1);
  font-weight: var(--v3-fw-halb);
  line-height: 1.5;
  white-space: nowrap;
  color: var(--v3-ink2);
  background: var(--v3-mut-soft);
}
html[data-ui="neu"] .v3-pille-ok { color: var(--v3-ok-text); background: var(--v3-ok-soft); }
html[data-ui="neu"] .v3-pille-warn { color: var(--v3-warn-text); background: var(--v3-warn-soft); }
html[data-ui="neu"] .v3-pille-bad { color: var(--v3-bad-text); background: var(--v3-bad-soft); }
html[data-ui="neu"] .v3-pille-info { color: var(--v3-brand); background: var(--v3-brand-soft); }
html[data-ui="neu"] .v3-pille-freude { color: var(--v3-freude-text); background: var(--v3-freude-soft); }
html[data-ui="neu"] .v3-pille-neutral { color: var(--v3-ink2); background: var(--v3-mut-soft); }
html[data-ui="neu"] .v3-pille-punkt::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--v3-r-pill);
  background: currentColor;
}

/* ── Karte (Kopf · Körper · Fuß) — Tiefe über Schatten, nicht über Rahmen ── */
html[data-ui="neu"] .v3-karte {
  background: var(--v3-card);
  border: 1px solid var(--v3-karte-rand);
  border-radius: var(--v3-r);
  box-shadow: var(--v3-shadow);
  overflow: hidden;
}
html[data-ui="neu"] .v3-karte-akzent { border-top: 3px solid var(--g2-akzent); }
html[data-ui="neu"] .v3-karte-hoch { box-shadow: var(--v3-shadow-hoch); }
html[data-ui="neu"] .v3-karte-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v3-s-12);
  padding: var(--v3-s-16) var(--v3-s-16) 0;
}
html[data-ui="neu"] .v3-karte-kopf h2,
html[data-ui="neu"] .v3-karte-titel {
  margin: 0;
  font-size: var(--v3-fs-5);
  font-weight: var(--v3-fw-fett);
  letter-spacing: -.01em;
  color: var(--v3-ink);
}
html[data-ui="neu"] .v3-karte-unter { font-size: var(--v3-fs-2); color: var(--v3-ink3-text); }
html[data-ui="neu"] .v3-karte-koerper { padding: var(--v3-s-16); }
html[data-ui="neu"] .v3-karte-fuss {
  display: flex;
  align-items: center;
  gap: var(--v3-s-10);
  padding: var(--v3-s-12) var(--v3-s-16);
  background: var(--v3-card2);
  border-top: 1px solid var(--v3-line2);
  font-size: var(--v3-fs-2);
  color: var(--v3-ink2);
}
html[data-ui="neu"] .v3-zahl {
  font-size: var(--v3-fs-7);
  font-weight: var(--v3-fw-fett);
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--v3-ink);
}

/* ── Zeile (Liste: dicht · Standard · locker) ─────────────────────────────── */
html[data-ui="neu"] .v3-zeile {
  display: flex;
  align-items: center;
  gap: var(--v3-s-12);
  padding: var(--v3-s-12) var(--v3-s-16);
  border-bottom: 1px solid var(--v3-line2);
  color: var(--v3-ink);
  text-decoration: none;
}
html[data-ui="neu"] .v3-zeile:last-child { border-bottom: 0; }
html[data-ui="neu"] a.v3-zeile:hover, html[data-ui="neu"] .v3-zeile-klickbar:hover { background: var(--v3-hover); }
html[data-ui="neu"] .v3-zeile[aria-selected="true"], html[data-ui="neu"] .v3-zeile[aria-current]:not([aria-current="false"]) { background: var(--v3-sel); }
html[data-ui="neu"] .v3-zeile-dicht { padding: var(--v3-s-8) var(--v3-s-12); }
html[data-ui="neu"] .v3-zeile-locker { padding: var(--v3-s-16); }
html[data-ui="neu"] .v3-zeile-haupt { flex: 1; min-width: 0; }
html[data-ui="neu"] .v3-zeile-titel {
  font-weight: var(--v3-fw-halb);
  color: var(--v3-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-ui="neu"] .v3-zeile-meta { font-size: var(--v3-fs-1); color: var(--v3-ink3-text); }
html[data-ui="neu"] .v3-zeile-wert {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: var(--v3-fw-halb);
  color: var(--v3-ink);
  white-space: nowrap;
}
html[data-ui="neu"] .v3-zeile-marke {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--v3-r-sm);
  display: grid;
  place-items: center;
  font-weight: var(--v3-fw-fett);
  font-size: var(--v3-fs-2);
  color: var(--g2-akzent-text);
  background: var(--g2-akzent-soft);
}

/* ── Umschalter (Segmente: Arbeiten · Auswerten · Abschluss; Hell/Dunkel/System) */
html[data-ui="neu"] .v3-umschalter {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--v3-r-pill);
  background: var(--v3-mut-soft);
}
html[data-ui="neu"] .v3-umschalter > a,
html[data-ui="neu"] .v3-umschalter > button {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  padding: var(--v3-s-6) var(--v3-s-14);
  border-radius: var(--v3-r-pill);
  font: inherit;
  font-size: var(--v3-fs-2);
  font-weight: var(--v3-fw-halb);
  color: var(--v3-ink2);
  text-decoration: none;
}
html[data-ui="neu"] .v3-umschalter > a:hover,
html[data-ui="neu"] .v3-umschalter > button:hover { color: var(--v3-ink); }
html[data-ui="neu"] .v3-umschalter > [aria-current]:not([aria-current="false"]),
html[data-ui="neu"] .v3-umschalter > [aria-pressed="true"] {
  color: var(--v3-ink);
  background: var(--v3-card);
  box-shadow: var(--v3-shadow);
}

/* ── Altbestand in der neuen App ──────────────────────────────────────────────
   feedback.css:34 setzt `background:#fff` neben `color: var(--v3-ink, …)` —
   im Dunkeln helle Schrift auf Weiß. feedback.css selbst bleibt unberührt
   (alte Oberfläche), die neue App überstimmt nur die Fläche (G2 § 4 Nr. 1).
   Stand bis 04.11. in tokens.css; seit S0 ist tokens.css erzeugt und trägt nur Token. */
html[data-ui="neu"] .fb-dlg {
  background: var(--v3-card);
}