/* Wissensportal: Verzeichnis und Begriffsseiten.
   Eigene Datei, weil diese Seiten bewusst nur styles.css laden und nicht das
   Regelwerk des Browser-Einblicks. Was hier doppelt aussieht, ist genau
   deshalb doppelt - die Alternative waere, den Seiten Regeln mitzugeben,
   die sie nicht brauchen. */

.insight-references{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.insight-references a{font-size:14px;color:var(--action);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.insight-intro{font-size:16px;line-height:1.8;max-width:75ch}
.insight-intro em{font-style:normal;color:var(--text);border-bottom:1px dotted var(--border)}

/* ------------------------------------------------------------ Verzeichnis -- */
.term-group{margin-top:44px}
.term-group h2{font-size:24px;line-height:1.3;padding-bottom:12px;border-bottom:1px solid var(--line)}
.term-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px;margin-top:22px}
.term-card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--action);border-radius:10px;padding:22px 24px;min-width:0}
.term-card h3{font-size:19px;line-height:1.35;margin:0}
.term-card h3 a{color:var(--text);text-decoration:none}
.term-card h3 a:hover,.term-card h3 a:focus-visible{color:var(--action);text-decoration:underline;text-underline-offset:3px}
/* Die ganze Karte fuehrt auf die Begriffsseite, also hebt sich die ganze
   Karte. Die linke Kante bleibt dabei in ihrer Farbe - sie ist Kennzeichen,
   nicht Rahmen; deshalb werden nur die drei uebrigen Seiten aufgehellt. */
.term-card{transition:border-color 150ms,background 150ms}
.term-card:hover,.term-card:focus-within{background:var(--raised);border-top-color:var(--border);border-right-color:var(--border);border-bottom-color:var(--border)}
.term-card p{font-size:15px;line-height:1.8;margin-top:12px}
.term-alias{font-size:13px;line-height:1.6;color:var(--muted);margin-top:8px}
.term-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px 24px;margin-top:22px;padding:0;list-style:none}
.term-index li{font-size:15px;line-height:1.8}
.term-index a{color:var(--action);text-decoration:underline;text-underline-offset:3px}

/* -------------------------------------------------------- Begriffsseite ---- */
.term-hero .term-alias{margin-top:16px}
.term-myths{margin:14px 0 0;padding-left:22px}
.term-myths li{font-size:15px;line-height:1.8;color:var(--muted)}
.term-myths li+li{margin-top:11px}
.term-myths strong{color:var(--text)}
.term-chips{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 26px}
.term-chip{display:inline-flex;align-items:center;font-size:14px;line-height:1.5;padding:7px 14px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--text);text-decoration:none}
.term-chip:hover,.term-chip:focus-visible{border-color:var(--action);color:var(--action)}
.knowledge-article h3{font-size:17px;letter-spacing:0;margin:26px 0 4px}

@media(max-width:760px){
  .term-grid{grid-template-columns:1fr}
  .term-card{padding:19px 20px}
  .term-group h2{font-size:21px}
}

/* -------------------------------------------------------- Prüfkatalog ----- */
/* Eine breite Tabelle auf einem Telefon ist entweder unlesbar oder sie schiebt
   die ganze Seite zur Seite. Deshalb scrollt hier der Behälter, nicht das
   Dokument - und die erste Spalte bleibt als Anker stehen. */
.katalog-gruppe{margin-top:44px}
.katalog-scroll{overflow-x:auto;margin-top:20px;border:1px solid var(--line);border-radius:10px}
.katalog-tabelle{width:100%;border-collapse:collapse;min-width:720px;background:var(--surface)}
.katalog-tabelle th,.katalog-tabelle td{text-align:left;vertical-align:top;padding:15px 18px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.75}
.katalog-tabelle thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--raised);position:sticky;top:0}
.katalog-tabelle tbody th{color:var(--text);font-weight:600;width:22%}
.katalog-tabelle td:nth-child(2){width:16%;color:var(--muted)}
.katalog-tabelle td:nth-child(4){width:10%}
.katalog-tabelle tbody tr:last-child th,.katalog-tabelle tbody tr:last-child td{border-bottom:0}
.katalog-leer{color:var(--muted);font-style:italic}
#vorhanden .katalog-tabelle tbody th{border-left:3px solid var(--success)}
#geplant .katalog-tabelle tbody th{border-left:3px solid var(--warning)}
#bewusstNicht .katalog-tabelle tbody th{border-left:3px solid var(--border)}

@media(max-width:760px){
  .katalog-tabelle th,.katalog-tabelle td{padding:13px 14px;font-size:14px}
}

/* ---------------------------------------------------- Artikel, Anleitung -- */
/* Artikel nutzen dieselben Flächen wie Begriffe und Katalog. Neu sind nur die
   Teile, die es dort nicht gibt: Kurzantwort, Tabellen mit Überschrift,
   nummerierte Schritte, Codebeispiele und der Block „Weiter“. */
.artikel-meta{font-size:14px;line-height:1.6;color:var(--muted);margin-top:14px}
.artikel-antwort p{font-size:1.0625rem;line-height:1.85;margin:0;color:var(--text)}
.knowledge-article ul.artikel-liste{padding-left:22px;margin:16px 0}
.knowledge-article ol.artikel-schritte{padding-left:24px;margin:16px 0;color:var(--text)}
.knowledge-article ol.artikel-schritte li{margin-bottom:12px}
.artikel-scroll{margin:22px 0}
/* Feste Spalten: Sonst rechnet der Browser eine Spalte mit vielen Gedankenstrichen
   so schmal, dass ihr einziger langer Eintrag über sechs Zeilen bricht. Die erste
   Spalte trägt die Zeilenüberschrift, die übrigen teilen sich den Rest. */
.artikel-tabelle{min-width:640px;table-layout:fixed}
.artikel-tabelle thead th:first-child{width:22%}
.artikel-tabelle caption{caption-side:top;text-align:left;padding:14px 18px;font-size:15px;font-weight:600;line-height:1.5;color:var(--text);background:var(--raised);border-bottom:1px solid var(--line)}
.artikel-tabelle tbody th{width:auto}
.artikel-tabelle td:nth-child(2),.artikel-tabelle td:nth-child(4){width:auto;color:var(--text)}
.artikel-code{margin:18px 0;padding:14px 16px;overflow-x:auto;background:var(--canvas);border:1px solid var(--line);border-radius:6px;font-size:14px;line-height:1.7}
.artikel-code code{white-space:pre}
.artikel-weiter .button{margin:4px 0 8px}
.artikel-karte .artikel-art{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.knowledge-article .artikel-karte h3{margin:0}
#einstieg h3{margin-top:30px}
#einstieg .term-grid{margin-top:14px}

@media(max-width:760px){
  .artikel-tabelle th,.artikel-tabelle td{padding:12px 13px}
}