/* =====================================================================
   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 { margin-bottom: var(--r12); }   /* Luft zum ersten Abschnitt (section+section greift erst danach) */
.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;
  color: var(--ink-faint); margin-bottom: var(--r4);
}
p + p { margin-top: var(--r3); }
.mass { max-width: var(--measure); }

/* -- Verweise -----------------------------------------------------------
   Bis zum 16. 8. 2026 stand hier nichts, und darum standen Verweise im
   ganzen Haus in Browser-Blau — in einer Leiste aus zwei Grautönen fiel
   das erst auf, als der Wetterdienst im Tagwerk genannt werden musste.
   Sie tragen jetzt den Akzent, wie im Lesepult schon länger.

   Die Unterstreichung bleibt. Farbe allein darf keine Auskunft sein
   (WCAG 1.4.1), und ein Verweis ohne Strich ist im Fliesstext genau das:
   eine Auskunft, die nur die Farbe trägt. Kein eigener Ton für Besuchtes
   — das Haus führt einen Akzent, nicht zwei.                            */
a { color: var(--accent); }

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

/* -- Satzspiegel mit Marginalspalte (R13) ---------------------------------
   Generalisiert aus dem Spezimen (system-b/index.html) — bisher lebte das
   Grid nur dort, obwohl --note-w seit je in den Tokens steht. Die Randspalte
   nimmt auf, was zum Satz gehört, aber nicht in ihn: Marker, Notizen — im
   Archiv die Herkunft (Signatur, Standort, Fassung, Lizenz).
   .seite-rand gibt der Seite die Breite dafür; .block teilt sie.           */
.seite-rand { max-width: calc(var(--measure) + var(--note-w) + var(--r8) + var(--r16)); }
.block {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) var(--note-w);
  column-gap: var(--r8); align-items: start;
}
.block > .haupt { grid-column: 1; min-width: 0; }
.apparat {
  grid-column: 2; font-size: var(--grad-fein); line-height: 1.5;
  color: var(--ink); padding-top: var(--r1);
}
.apparat .lbl { font-weight: 600; }      /* Merkmal: Fette */
/* Unter dem Umbruch fällt die Spalte unter den Satz und wird zur Randlinie. */
@media screen and (max-width: 60rem) {
  .block { display: block; }
  .apparat {
    margin-top: var(--r3); padding: var(--r2) 0 0 var(--r3);
    border-left: 2px solid var(--rule); max-width: var(--measure);
  }
}

/* -- Abbildung ------------------------------------------------------------
   Zwei Arten, eine Regel: Fotografien dürfen beschnitten werden, Werke nie.
   Eine Fotografie ist eine Aufnahme von etwas; ein Werk ist das Etwas. Wer
   ein Werk beschneidet, ändert es. Werke stehen darum vollständig auf der
   Tafelfläche, die in beiden Klimata dunkel bleibt.                        */
figure.abbildung { max-width: var(--measure); }
.abbildung img { display: block; width: 100%; height: auto; }
.abbildung figcaption {
  font-size: var(--grad-fein); color: var(--ink-soft); margin-top: var(--r2);
}
.abbildung.breit { max-width: none; }
.abbildung.foto img { object-fit: cover; }                /* Beschnitt erlaubt */
.abbildung.werk { background: var(--tafel); padding: var(--r6); }
.abbildung.werk img { object-fit: contain; }              /* nie beschnitten */
.abbildung.werk figcaption { color: var(--tafel-soft); padding: 0 var(--r2); }

/* -- 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; }
}

/* -- Zeilenmass (K10) ----------------------------------------------------
   Über 75 Zeichen verliert das Auge beim Rücksprung die Zeile. Gemessen
   wird es mit tools/zeilenmass.mjs — kein Parser sieht den Umbruch. Der
   Befund im ganzen Haus: nicht der Satz lief zu lang, sondern alles, was
   daneben steht — Standzeilen, Hinweise, Fusszeilen, Bildunterschriften.
   :where() hält die Spezifität bei null: das hier ist das Grundmass, jede
   Regel, die es aus gutem Grund aufhebt, gewinnt ohne !important.        */
:where(p, li, dd, dt, blockquote, figcaption, caption, .meta, .unterzeile,
       .hinweis, .stand, .leise, .zart, .fein, .leer, .fusszeile, .unter,
       .klein, .merke, .warnung, .regel) {
  max-width: var(--measure);
}