/* ==================================================================
   DIE FAEHIGKEITSMATRIX (web/capability-matrix.html)
   ==================================================================

   Arpad am 20.09.2026, mit einem Bild der Seite: "still wrong design".

   ER HATTE RECHT, UND ZWAR WOERTLICH: Die Seite lud gar kein Stilblatt
   fuer ihren eigenen Inhalt. Im Kopf standen bauteile.css, boxen.css und
   rahmen.css -- die kennen `.box` und `.boxen`, aber keine einzige der
   Klassen, die tools/faehigkeitsmatrix_schreiben.py schreibt:
   `.matrix__daten`, `.matrix__akte`, `.matrix__grenzen`,
   `.matrix__hinweise`. Nichts davon war gestaltet.

   Was man deshalb sah, war die Voreinstellung des Browsers: eine <dl>
   mit eingerueckten <dd>, darunter <h4>-Ueberschriften in
   Fliesstextgroesse und Listen mit Punkten. Dazu `.box h3` aus
   boxen.css -- `clamp(28px, 3vw, 41px)` mit 58 px Abstand nach oben,
   gedacht fuer die grossen Produktkacheln. Der Name eines Rechtsraums
   stand damit in 41 px, so gross wie eine Abschnittsueberschrift, und
   die Karte begann mit einem Loch.

   DIE ORDNUNG DER KARTE ist die der Sache selbst:

     1. Welcher Rechtsraum       (h3, ruhig, nicht als Schlagzeile)
     2. Modus / Ebene / Quelle   (Kenndaten, zweispaltig)
     3. Rechtsakte               (was drin ist)
     4. Nicht abgedeckt          (was nicht drin ist)
     5. Pflichthinweise          (das Kleingedruckte)

   Punkt 4 faellt NICHT unter die Regel "kein Abschnitt, der nur
   erklaert, was wir nicht haben" (CLAUDE.md): Was ein Rechtsraum nicht
   abdeckt, ist Leistungsbeschreibung, nicht Selbstkritik -- dieselbe
   Ausnahme wie der Haftungshinweis der AGB-Bibliothek. Es ist die
   Zeile, die jemand liest, bevor er sich auf eine Antwort verlaesst.

   ALLE FARBEN AUS DER PALETTE, keine neuen. Die Etiketten in --muted,
   die Werte in --ink-2 wie Fliesstext, die Grenzen in --muted, weil sie
   einschraenken und nicht werben, die Pflichthinweise eine Stufe
   kleiner, weil sie es sind. */

/* --- 1. Der Name des Rechtsraums ---------------------------------- */
main.matrix .box h3 {
  max-width: none;
  margin: 0 0 20px;
  font-size: clamp(21px, 1.8vw, 26px);
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* --- 2. Kenndaten: Modus, Ebene, Quelle --------------------------- */
/* Zweispaltig statt eingerueckt. Die Etikettenspalte ist fest, damit
   die drei Werte auf EINER Kante beginnen -- bei `auto` haette jede
   Karte ihre eigene. */
main.matrix .matrix__daten {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 7px 14px;
  margin: 0 0 4px;
}
main.matrix .matrix__daten dt {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  line-height: 1.5;
  text-transform: uppercase;
}
main.matrix .matrix__daten dd {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}
main.matrix .matrix__daten a {
  color: var(--emerald-dark);
}

/* --- 3. Die Abschnittsmarken ------------------------------------- */
/* Ein Strich und eine kleine Versalzeile, wie die Trennung zwischen
   zwei Bloecken im Rechtstext. Die <h4> hatte gar keine eigene Regel. */
main.matrix .box h4 {
  margin: 22px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* --- 4. Die drei Listen ------------------------------------------ */
main.matrix .matrix__akte,
main.matrix .matrix__grenzen,
main.matrix .matrix__hinweise {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
main.matrix .matrix__akte li,
main.matrix .matrix__grenzen li,
main.matrix .matrix__hinweise li {
  position: relative;
  padding-left: 17px;
  font-size: 13px;
  line-height: 1.5;
}

main.matrix .matrix__akte li { color: var(--ink-2); }
main.matrix .matrix__akte li::before {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--emerald);
  font-weight: 900;
  content: "\2713";
}
main.matrix .matrix__akte b {
  font-weight: 850;
  color: var(--ink);
}

/* Was nicht drin ist: derselbe Rhythmus, andere Stimme. Kein rotes
   Kreuz -- es ist keine Warnung, sondern eine Grenze. */
main.matrix .matrix__grenzen li { color: var(--muted); }
main.matrix .matrix__grenzen li::before {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--muted-2);
  font-weight: 700;
  content: "\2013";
}

/* Das Kleingedruckte: eine Stufe kleiner, aber nicht blasser --
   --muted auf --white misst 5,9:1. */
main.matrix .matrix__hinweise li {
  padding-left: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

/* --- 5. Die Zeile ueber den Karten ------------------------------- */
main.matrix .matrix__premium {
  margin: 0 0 26px;
  color: var(--ink-2);
  font-size: 14px;
}

/* --- 6. Die Karten selbst ---------------------------------------- */
/* `.box` bringt eine Mindesthoehe fuer die grossen Produktkacheln mit.
   Hier stehen fuenf kurze Abschnitte in unterschiedlich langen Karten;
   eine Mindesthoehe liesse die kuerzeste mit einem Drittel Luft enden. */
main.matrix .boxen .box {
  min-height: 0;
  padding: 26px 28px 28px;
  align-content: start;
}

@media (max-width: 760px) {
  main.matrix .matrix__daten { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  main.matrix .matrix__daten dt { margin-top: 10px; }
  main.matrix .matrix__daten dt:first-child { margin-top: 0; }
  main.matrix .boxen .box { padding: 22px 20px 24px; }
}