/* Ausführliche Begründungen bleiben erhalten, kosten aber keinen Platz mehr.
   Kleiner Textlink auf Weiss → --brand-hover, sonst reisst der Kontrast AA (design.md §7). */
/* Kein oberer Rand: der Absatz darüber bringt 14px Unterrand mit (1em auf .85rem),
   angrenzende Ränder verschmelzen zum grösseren — die frühere `.25rem` konnte also nie
   gewinnen und stand in allen fünf Vorkommen wirkungslos da. */
details.explain { margin: 0 0 1rem; font-size: .85rem; color: var(--muted); }
/* `inside`, nicht `outside`: aussen liegt die Marke ausserhalb der Box und war damit das
   einzige Element der Karte links der Textkante — gemessen 14px davor, mitten in der
   Polsterung, fluchtend mit nichts (Kartenrand 92, Marke 99, alles andere 113). Innen
   beginnt die ganze Zeile bei 113 wie Überschrift, Absatz und Tabelle darunter. */
details.explain > summary { cursor: pointer; color: var(--brand-hover); list-style-position: inside; }
details.explain > summary:hover { text-decoration: underline; }
details.explain > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
details.explain p { margin: .5rem 0 0; }

h1, h2, h3, h4 { color: var(--heading); font-weight: 600; line-height: 1.25; }
h1 { margin: 0; font-size: 1.5rem; }
h2 { font-size: 1.25rem; margin: 1.75rem 0 .75rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.cards h3 { margin: 0 0 .5rem; font-size: 1rem; text-transform: capitalize; }

.toolbar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }

/* Die Voreinstellung ist der RUHIGE Knopf, die gefüllte Aktion die benannte Ausnahme
   (design.md §5). Umgekehrt war es bis 2026-08-11, und das war die falsche Richtung:
   jeder der rund sechzig Knöpfe der Konsole schrie in Markenrot und VERSALIEN, und
   jede stille Variante — Kachel, Nav-Eintrag, Icon-Knopf, Balkenkette, Textlink-Knopf —
   musste sich das Stück für Stück zurückerobern (Fläche, Schriftschnitt, Sperrung,
   Versalien), mit dem Element im Selektor, nur um die Spezifität zu gewinnen. Seither
   ist der Normalfall das, was die meisten Knöpfe sind (eine Nebenhandlung), und wer
   die Primäraktion will, verlangt sie mit `class="primary"`.

   VERSALIEN sind damit NICHT verschwunden: sie bleiben das Stilmerkmal der
   Beschriftungen (Tabellenköpfe, Formulartitel, .kpi-label, .rail-group, .chip).
   Ein Knopf trägt keine Beschriftung, sondern einen Satz — „Endpunkt dieser Instanz
   übernehmen" in Grossbuchstaben liest sich niemand durch. */
button {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: .55rem 1.1rem;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
button:hover:not(:disabled) { background: var(--surface-2); }
button:active:not(:disabled) { background: var(--border); }
/* Der Fokusring gilt jetzt für BEIDE Sorten und steht deshalb hier statt einzeln bei
   jeder Variante — vorher hatte der blosse Knopf gar keinen und lebte vom Ring des
   Browsers (design.md §6). */
button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* .5 war für die gefüllte Fläche gedacht: halb deckendes Rot bleibt Rot. Auf dem
   hellen Rahmenknopf ergäbe dieselbe Zahl #999 auf Weiss — 2.85:1, ein Text, den man
   rät. .55 hebt ihn auf 3.24:1 (Schwelle für Bedienelemente), ohne dass die Fläche
   aufhört, „nicht bedienbar" zu sagen: Rahmen und Schrift verblassen gemeinsam. */
button:disabled { opacity: .55; cursor: default; }

/* Die eine Handlung, deretwegen man auf die Karte bzw. ins Formular schaut. Genau
   eine je Karte/Formular, nie in einer Tabellenzeile (design.md §5). */
button.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
button.primary:hover:not(:disabled) { background: var(--brand-hover); border-color: var(--brand-hover); }
button.primary:active:not(:disabled) { background: var(--brand-active); border-color: var(--brand-active); }

/* FLIESSTEXT-Links tragen die Markenfarbe statt des Browser-Blaus — sonst hat die
   Konsole zwei Akzentfarben. `--brand-hover` und nicht `--brand`: kleiner Text auf Weiss
   erreicht mit dem hellen Rot kein AA (design.md §7). Die Unterstreichung des Browsers
   bleibt bewusst stehen: ein Link mitten im Satz, den nur die Farbe auszeichnet, ist für
   Farbfehlsichtige keiner (WCAG 1.4.1).
   Links in TABELLENZELLEN sind davon ausgenommen — siehe `td a` in tables.css: eine
   Spalte voller rot unterstrichener Statuswörter liest sich als Fehlerliste. */
a { color: var(--brand-hover); }
a:hover { color: var(--brand-active); }

/* Eingabefelder und das Formularraster stehen in styles/forms.css,
   das gemeinsame Tabellenformat in styles/tables.css. */

.muted { color: var(--muted); font-size: .85rem; }
/* Zweitzeile in einer Tabellenzelle (z. B. der MCC unter der Beschreibung): eine eigene
   Zeile, damit die Nebenangabe den Haupttext nicht in die Breite schiebt. */
.subline { display: block; }
.error { color: var(--error); }