/* Design-Tokens RLV — verbindliche Quelle für alle UI-Varianten (Desktop + PWA).
   Werte sind Verträge aus .planning/20261105 - ui-design-prototypen.md; Änderungen
   nur nach Abstimmung. Styling in Komponenten ausschließlich über var(--rlv-…). */
@import url("fonts/fonts.css");

:root {
  --rlv-primary: #335a18;
  --rlv-primary-hover: #2c4e14;
  --rlv-accent: #66b32f;
  --rlv-accent-soft: #edf6e4;
  --rlv-warn: #f3920f;
  --rlv-warn-soft: #fdf0dc;
  --rlv-danger: #cc4b37;
  --rlv-danger-soft: #fdece8;
  --rlv-info: #1a5fb4;
  --rlv-info-soft: #e8f4ff;
  --rlv-ok: #335a18;
  --rlv-ok-soft: #eef6e8;
  --rlv-ok-text: #335a18;
  --rlv-warn-text: #7a5b1e;
  --rlv-danger-text: #7c2d1f;
  --rlv-info-text: #144a8f;
  --rlv-text: #0a0a0a;
  --rlv-text-2: #706e6f;
  --rlv-surface: #ffffff;
  --rlv-surface-2: #f5f5f5;
  --rlv-hover: rgba(10, 10, 10, .08); /* Hover-Ton auf hellen Flächen (Menu, Zeilen) */
  --rlv-border: #ededed;
  --rlv-border-strong: #dcdcdc;
  --rlv-focus: #335a18;
  --rlv-radius-card: 8px;
  --rlv-radius-ctrl: 6px;
  --rlv-shadow-card: 0 1px 3px rgba(10, 10, 10, .10), 0 1px 2px rgba(10, 10, 10, .06);
  --rlv-shadow-overlay: 0 4px 12px rgba(10, 10, 10, .12), 0 2px 4px rgba(10, 10, 10, .08);
  --rlv-space-1: 4px;
  --rlv-space-2: 8px;
  --rlv-space-3: 12px;
  --rlv-space-4: 16px;
  --rlv-space-5: 24px;
  --rlv-space-6: 32px;
  --rlv-motion-hover: 90ms;
  --rlv-motion-expand: 150ms;
  --rlv-motion-toast: 240ms;
  /* UI-Schrift H1/H2: Chakra Petch (Nutzerentscheidung 2026-11-06);
     Eurostile Extended bleibt als Haus-Material für PDFs reserviert. */
  --rlv-font-head: "Chakra Petch", "Open Sans", sans-serif;
  --rlv-font-brand-pdf: "Eurostile Extended", "Open Sans", sans-serif;
  --rlv-font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

/* == STUELLRAD Dichte/Schatten (Nutzer-Stellschrauben) == */
/* Eine Wertänderung genügt: diese Markierung bündelt alle Stellschrauben, die
   der Nutzer ohne Code-Eingriff umschaltet (Doku: docs/dev/ui-phase2a.md,
   Abschnitt „Stellschrauben“; der Default bleibt bewusst „ruhig“).

   --rlv-shadow-card:    Kartenschatten (ruhig). Tiefer: 0 6px 16px rgba(10,10,10,.16), 0 3px 6px rgba(10,10,10,.10)
   --rlv-shadow-overlay: Overlay-Schatten (Menüs, Modale, Combobox). Tiefer: 0 8px 24px rgba(10,10,10,.20), 0 4px 8px rgba(10,10,10,.12)
   --rlv-radius-card:    Kartenradius (ruhig 8px). Ruhiger: 4px, tiefer: 10px
   --rlv-motion-expand:  Auf-/Zuklappdauer (Akkordeon, Sync-Balken). Ruhiger: 90ms, lebhafter: 220ms
   --rlv-motion-toast:   Toast-Einblenddauer. Ruhiger: 160ms, lebhafter: 320ms
    --rlv-motion-hover:   Hover-/Übergangsdauer (Buttons, Karten). Ruhiger: 60ms, lebhafter: 140ms */

/* Dichtestufe „tief“ entfallen (R3i, 2026-11-07): „ruhig“ ist als einzige
   Stufe gesetzt; die obigen Stellschrauben bleiben der Weg zur Feinjustierung. */

body {
  font: 400 14px/1.5 var(--rlv-font-body);
  color: var(--rlv-text);
  background: var(--rlv-surface);
  margin: 0;
}

h1 {
  font-family: var(--rlv-font-head);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: normal;
}

h2 {
  font-family: var(--rlv-font-head);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: normal;
}

/* H3-Rolle als Kicker-Klasse (Überschriften-Tags nur H1/H2, Design-Vertrag). */
.kicker {
  font-size: 12px;
  font-weight: 600;
  color: var(--rlv-text-2);
  letter-spacing: .02em;
}

table {
  font-variant-numeric: tabular-nums;
}

*:focus-visible {
  outline: 2px solid var(--rlv-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}

/* Body-Zoom-Falle auf Smartphones umgangen: Formularfelder mit 16px.
   R3o: Grenze wie in desktop-demo.css auf halbe Pixel (fraktionale
   Viewport-Breiten dürfen nicht in die Lücke fallen). */
@media (max-width: 767.5px) {
  input, select, textarea {
    font-size: 16px;
  }
}