/* =====================================================================
   System B · Basis — Grundkomponenten für RSA-Werkzeuge
   Nutzt ausschliesslich Tokens aus tokens.css. Generalisiert aus dem
   Brief-Editor-Panel und der Arbeitsstand-Übersicht (Atmung, Juli 2026).
   Regeln: Flattersatz, keine Trennung, eine Schrift, Auszeichnung sparsam.
   ===================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--schrift);
  font-size: var(--grad-grund);
  line-height: var(--zeile);
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  hyphens: none;
}

/* -- Seite: Balken oben, mittige Spalte -------------------------------- */
.balken { height: 10px; background: var(--accent); }
.seite  { max-width: 40rem; margin: 0 auto; padding: var(--r12) var(--r6) var(--r16); }
.seite-breit { max-width: 64rem; }

/* -- Kopf --------------------------------------------------------------- */
.kopf h1 { font-size: var(--grad-titel); font-weight: 400; line-height: var(--zeile-eng); text-wrap: balance; }
.kopf .unterzeile { color: var(--ink-soft); margin-top: var(--r2); }
.kopf .meta { font-size: var(--grad-fein); color: var(--ink-faint); margin-top: var(--r1); }

/* -- Gliederung --------------------------------------------------------- */
section + section, .abschnitt + .abschnitt { margin-top: var(--r12); }
.rubrik {
  font-size: var(--grad-fein); font-weight: 400; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--r4);
}
p + p { margin-top: var(--r3); }
.mass { max-width: var(--measure); }

/* -- Laut (IBM Plex Mono, nur kursiv, sparsam) --------------------------- */
.laut { font-family: var(--schrift-laut); font-style: italic; }

/* -- Karte ---------------------------------------------------------------- */
.karte {
  display: block; background: var(--paper-hoch);
  border: var(--linie) solid var(--rule); border-radius: var(--radius-g);
  padding: var(--r6); text-decoration: none; color: inherit;
  transition: border-color .15s;
}
a.karte:hover { border-color: var(--accent); }
.karte h3 { font-size: var(--grad-gross); font-weight: 400; color: var(--accent); }
.karte p { margin-top: var(--r2); font-size: var(--grad-klein); }
.karte .meta { margin-top: var(--r3); font-size: var(--grad-fein); color: var(--ink-faint); }
.karten { display: grid; gap: var(--r4); }

/* -- Platzhalter (Kommendes) ---------------------------------------------- */
.leer {
  border: var(--linie) dashed var(--rule); border-radius: var(--radius-g);
  padding: var(--r6); color: var(--ink-faint); font-size: var(--grad-klein);
}

/* -- Knöpfe ----------------------------------------------------------------- */
.knopf {
  display: inline-block; padding: var(--r2) var(--r3);
  border: var(--linie) solid var(--rule); border-radius: var(--radius-s);
  background: var(--paper-hoch); color: var(--ink);
  font: inherit; font-size: var(--grad-fein); cursor: pointer; text-decoration: none;
}
.knopf:hover { border-color: var(--ink-soft); }
.knopf.an, .knopf-primaer {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.knopf-primaer { padding: var(--r3) var(--r4); font-size: var(--grad-klein); border-radius: var(--radius-s); }
.knopf-primaer:hover { border-color: var(--ink); opacity: .88; }

/* -- Segment-Schalter --------------------------------------------------------- */
.seg { display: inline-flex; border: var(--linie) solid var(--rule); border-radius: var(--radius-s); overflow: hidden; }
.seg button {
  padding: var(--r2) var(--r3); border: 0; background: var(--paper-hoch);
  color: var(--ink); font: inherit; font-size: var(--grad-fein); cursor: pointer;
}
.seg button + button { border-left: var(--linie) solid var(--rule); }
.seg button.aktiv { background: var(--accent); color: #fff; }

/* -- Formularzeile --------------------------------------------------------------- */
.feldzeile { display: flex; align-items: center; gap: var(--r2); }
.feldzeile + .feldzeile { margin-top: var(--r2); }
.feldzeile label { font-size: var(--grad-fein); color: var(--ink-soft); flex: 0 0 7rem; }
.feldzeile input, .feldzeile select, .feldzeile textarea {
  flex: 1; min-width: 0; padding: var(--r2) var(--r2);
  border: var(--linie) solid var(--rule); border-radius: var(--radius-s);
  font: inherit; font-size: var(--grad-klein);
  background: var(--paper-hoch); color: var(--ink);
}
.feldzeile input:focus, .feldzeile textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* -- Status-Chip -------------------------------------------------------------------- */
.chip {
  display: inline-block; padding: 2px var(--r2); border-radius: var(--radius-s);
  font-size: var(--grad-fein);
}
.chip-ok   { background: var(--ok-bg); color: var(--ok-fg); }
.chip-warn { background: var(--warn-bg); color: var(--warn-fg); }
.chip-info { background: var(--rule-soft); color: var(--ink-soft); }

/* -- Kennzahl (Zahl + Beschriftung, tabellarische Ziffern) ---------------------------- */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--r3); }
.kennzahl { background: var(--paper-hoch); border: var(--linie) solid var(--rule); border-radius: var(--radius); padding: var(--r3) var(--r4); }
.kennzahl b { display: block; font-weight: 400; font-size: var(--grad-titel); line-height: 1.15; font-variant-numeric: tabular-nums; }
.kennzahl span { font-size: var(--grad-fein); color: var(--ink-faint); }

/* -- Hinweis ------------------------------------------------------------------------- */
.hinweis { font-size: var(--grad-fein); color: var(--ink-faint); }

/* -- Einblender (Toast) ----------------------------------------------------------------- */
.toasts { position: fixed; right: var(--r4); bottom: var(--r4); z-index: 50; display: flex; flex-direction: column; gap: var(--r2); max-width: 20rem; }
.toast {
  background: var(--ink); color: var(--paper); border-radius: var(--radius);
  padding: var(--r3) var(--r3); font-size: var(--grad-fein); line-height: 1.4;
  display: flex; align-items: flex-start; gap: var(--r2);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.toast button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0; }

/* -- Tabelle -------------------------------------------------------------------------------- */
.tabelle-umlauf { overflow-x: auto; }
table.tabelle { border-collapse: collapse; width: 100%; font-size: var(--grad-klein); font-variant-numeric: tabular-nums; }
.tabelle th { text-align: left; font-weight: 400; color: var(--ink-faint); font-size: var(--grad-fein); padding: var(--r2) var(--r3) var(--r1) 0; border-bottom: var(--linie) solid var(--rule); }
.tabelle td { padding: var(--r2) var(--r3) var(--r2) 0; border-bottom: var(--linie) solid var(--rule-soft); vertical-align: top; }

/* -- Fuss ------------------------------------------------------------------------------------- */
.fusszeile { margin-top: var(--r16); font-size: var(--grad-fein); color: var(--ink-faint); }
.fusszeile a { color: inherit; }

/* -- Zugänglichkeit ------------------------------------------------------------------------------ */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}