/* MySRA – Basis-Stylesheet (Schritt 4). Werte nur aus tokens.css.
   Vorlage: data/ux-referenz/. Regeln: ein Blick, eine Aussage; Details auf Klick;
   eine Hauptaktion pro Bereich; wenige Linien. */

/* --- Grundlage ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--schrift); font-size: var(--s-text); line-height: var(--zeile);  /* Stil A: Zeilenhöhe Text 20 px */
  -webkit-font-smoothing: antialiased;
}
a { color: var(--aktion); text-decoration: none; }
a:hover { color: var(--aktion-dunkel); }
p a, .md a, .hilfe a { text-decoration: underline; text-underline-offset: 2px; }
h1 { margin: 0; font-size: var(--s-satz); font-weight: 600; letter-spacing: -0.02em; }
h2 { margin: 0; font-size: var(--s-lese); font-weight: 600; letter-spacing: -0.01em; }
h3 { margin: 0; font-size: var(--s-text); font-weight: 600; }
h4 { margin: 0; font-size: var(--s-text); font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding-left: 20px; }
li { margin: 0 0 8px; }
code, pre { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: var(--s-neben); }
svg { flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--aktion); outline-offset: 2px; border-radius: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.zahl, .zahlen, table.liste td { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Kopfzeile (56 px): links MySRA + Brotkrumen, rechts Benutzer + Abmelden ------ */
.seite { min-height: 100vh; display: flex; flex-direction: column; }
.kopf {
  background: var(--flaeche); border-bottom: 1px solid var(--rand);
  height: 56px; padding: 0 var(--a8);
  display: flex; align-items: center; justify-content: space-between; gap: var(--a4);
}
.kopf-links { display: flex; align-items: center; gap: var(--a6); min-width: 0; }
.kopf-rechts { display: flex; align-items: center; gap: var(--a4); font-size: var(--s-text); color: var(--text-leise); flex-shrink: 0; }
.kopf-rechts a, .kopf-rechts .link { color: var(--text-leise); }
.kopf-rechts a:hover, .kopf-rechts .link:hover { color: var(--text); }
.marke { font-weight: 600; font-size: var(--s-lese); color: var(--text); letter-spacing: -0.01em; }
.marke:hover { color: var(--text); }
.brotkrumen {
  display: flex; align-items: center; gap: var(--a2); min-width: 0;
  font-size: var(--s-text); color: var(--text-leise); white-space: nowrap; overflow: hidden;
}
.brotkrumen a { color: var(--text-leise); }
.brotkrumen a:hover { color: var(--text); }
.brotkrumen .trenner { color: var(--text-schwach); }
.brotkrumen .aktuell { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.zurueck {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--rand-stark);
  color: var(--text);
}
.zurueck:hover { background: var(--zeile-hover); color: var(--text); }

/* --- Inhalt ---------------------------------------------------------------------- */
main.inhalt {
  width: 100%; max-width: var(--breite-allein); margin: 0 auto;
  padding: var(--a8) var(--a8) 64px;
  display: flex; flex-direction: column; gap: var(--a6);
}
main.inhalt.schmal { max-width: var(--breite-bericht); padding-top: var(--a10); gap: 28px; }
@media (max-width: 640px) {
  .kopf { padding: 0 var(--a4); }
  main.inhalt { padding: var(--a5) var(--a4) var(--a10); }
  /* Breite Tabellen (z. B. Startseite) seitlich scrollbar statt über den Rand */
  table.liste { display: block; overflow-x: auto; white-space: nowrap; }
}
/* Chips nie breiter als der Platz: lange Belege gekürzt, «Was noch fehlt» umbrechen */
.chip { max-width: 100%; }
.beleg-chip > a, .beleg-chip > span { min-width: 0; }
.beleg-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chip.fehlt { white-space: normal; height: auto; min-height: 30px; padding-top: 4px; padding-bottom: 4px; }

/* Seitenkopf: Titel links, Aktionen rechts */
.titelzeile { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--a4); }
.titelzeile > div:first-child { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.untertitel { font-size: var(--s-text); color: var(--text-leise); }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); }

/* Kleine Texte */
.hilfe, .klein { font-size: var(--s-neben); color: var(--text-leise); line-height: var(--zeile); }
.leer { color: var(--text-leise); font-size: var(--s-text); }
.fehler { color: var(--schlecht); }

/* --- Knöpfe: eine Hauptaktion (gefüllt), sonst Rahmen oder Link ------------------- */
button { font: inherit; color: inherit; }
.knopf, button.knopf, .primaer, .knopf-aktion {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a2);
  height: 40px; padding: 0 16px; border-radius: var(--radius);
  border: 1px solid var(--rand-stark); background: var(--flaeche); color: var(--text);
  font: inherit; font-size: var(--s-text); font-weight: 600; line-height: 1; white-space: nowrap;
  cursor: pointer;
}
.knopf:hover { background: var(--zeile-hover); color: var(--text); }
.primaer, .knopf.primaer {
  border: 1px solid var(--aktion-gefuellt); background: var(--aktion-gefuellt); color: var(--auf-aktion);
  font-weight: 600; padding: 0 var(--a4);
}
.primaer:hover, .knopf.primaer:hover { background: var(--aktion-dunkel); border-color: var(--aktion-dunkel); color: var(--auf-aktion); }
.knopf-aktion { border-color: var(--aktion); color: var(--aktion); font-weight: 600; }
.knopf-aktion:hover { background: var(--aktion-hell); color: var(--aktion-dunkel); }
.knopf.klein, .primaer.klein, .knopf-aktion.klein { height: 32px; font-size: var(--s-neben); padding: 0 var(--a3); }
.knopf.mittel, .primaer.mittel, .knopf-aktion.mittel { height: 36px; }
button.link {
  border: 0; background: none; padding: 0; color: var(--aktion); cursor: pointer;
  font: inherit; font-size: inherit;
}
button.link:hover { color: var(--aktion-dunkel); }
button.link.fehler, button.link.fehler:hover { color: var(--schlecht); }
button[disabled], .knopf[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.knopf.aus { opacity: .35; pointer-events: none; }
form.inline { display: inline; }
.aktionen > form.inline { display: inline-flex; }

/* --- Chips, Abzeichen, Verdikt ---------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px;
  border-radius: var(--radius-chip); background: var(--neutral-flaeche); color: var(--text);
  font-size: var(--s-neben); white-space: nowrap;
}
.chip .leise { color: var(--text-leise); }
.chip.fehlt { background: none; border: 1px solid var(--schlecht-rand); color: var(--schlecht); }
.chip.neu { background: none; border: 1px dashed var(--rand-gestrichelt); color: var(--text-leise); }
.abzeichen {
  display: inline-block; font-size: var(--s-neben); font-weight: 600; color: var(--text-leise);
  background: var(--neutral-flaeche); border-radius: 4px; padding: 1px 4px;
}
.verdikt { display: inline-flex; align-items: center; gap: 8px; font-size: var(--s-neben); font-weight: 600; white-space: nowrap; }
.verdikt-ja, .ton-gut { color: var(--gut); }
.verdikt-teilweise, .ton-teils { color: var(--teils); }
.verdikt-nein, .ton-schlecht { color: var(--schlecht); }
.verdikt-keine, .verdikt-na { color: var(--text-leise); font-weight: 600; }

/* --- Karten und Aufklappbereiche ------------------------------------------------- */
.karte {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-karte);
  padding: var(--a5) var(--a6); display: flex; flex-direction: column; gap: var(--a4);
}
.karte.schmal { max-width: 640px; width: 100%; }
.karte.warnung { border-color: var(--teils-rand); background: var(--teils-band); }
/* Wie in den Entwürfen: Klappen ohne Pfeil (ganze Zeile klickbar), leise Details mit ▶ */

details.leise { font-size: var(--s-text); color: var(--text-leise); }
details.leise > summary { cursor: pointer; width: fit-content; min-height: 24px; }
details.leise > summary:hover { color: var(--text); }
details.leise[open] > summary { margin-bottom: var(--a2); }

/* --- Formulare ------------------------------------------------------------------- */
label { display: block; font-size: var(--s-neben); font-weight: 600; margin: 0 0 8px; }  /* Beschriftung 13/500 über dem Feld */
input[type=text], input[type=password], input[type=url], input[type=search], input[type=date],
input[type=email], input[type=number], select, textarea {
  width: 100%; font: inherit; font-size: var(--s-text); color: var(--text);
  border: 1px solid var(--rand-stark); border-radius: var(--radius); background: var(--flaeche);
}
input[type=text], input[type=password], input[type=url], input[type=search], input[type=date],
input[type=email], input[type=number] { height: 40px; padding: 0 var(--a3); }
select { height: 40px; padding: 0 var(--a2); }
textarea { padding: var(--a3) 16px; font-size: var(--s-text); line-height: var(--zeile); resize: vertical; }
input[type=file] { font: inherit; font-size: var(--s-text); }
input::placeholder, textarea::placeholder { color: var(--text-schwach); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--aktion); outline-offset: 0; border-color: var(--aktion); }
input[type=checkbox], input[type=radio] { accent-color: var(--aktion); width: 16px; height: 16px; margin: 0; }
.feld { display: flex; flex-direction: column; gap: 0; }
.feld + .feld { margin-top: var(--a4); }
.feld.hat-fehler input, .feld.hat-fehler textarea, .feld.hat-fehler select { border-color: var(--schlecht); }
.feld small { display: block; margin-top: 8px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-size: var(--s-text); font-weight: 600; padding: 0; margin-bottom: 8px; }
.optionen { display: flex; flex-wrap: wrap; gap: 8px; }
.option {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 var(--a3);
  border: 1px solid var(--rand-stark); border-radius: var(--radius); font-size: var(--s-text); font-weight: 400;
  margin: 0; cursor: pointer;
}
.option:has(input:checked) { border-color: var(--aktion); background: var(--aktion-hell); font-weight: 600; }
.option-zeile { display: flex; align-items: flex-start; gap: 12px; font-size: var(--s-text); font-weight: 400; line-height: var(--zeile); margin: 0 0 8px; cursor: pointer; }
.option-zeile input { margin-top: 4px; }
div.fehler { background: var(--schlecht-flaeche); padding: 12px 16px; border-radius: var(--radius); font-size: var(--s-text); }

/* Markdown-Feld mit Werkzeugleiste */
.md-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); margin-bottom: 8px; }
.md-kopf label { margin: 0; }
.md-leiste { display: flex; gap: 2px; color: var(--text-leise); }
.md-leiste button {
  width: 30px; height: 28px; border: 0; background: transparent; border-radius: 6px;
  color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--s-text);
}
.md-leiste button:hover { background: var(--neutral-flaeche); color: var(--text); }
.md-leiste .fett { font-weight: 600; }
.md-leiste .kursiv { font-style: italic; }
.md-hinweis { font-size: var(--s-neben); color: var(--text-schwach); margin-top: 8px; }

/* --- Tabellen und Listen --------------------------------------------------------- */
table.liste { width: 100%; border-collapse: collapse; background: var(--flaeche); font-size: var(--s-text); }
.liste th {
  text-align: left; padding: var(--a2) var(--a4); font-size: var(--s-neben); font-weight: 600;
  color: var(--text-leise);
}
.liste td { text-align: left; padding: 12px var(--a4); border-top: 1px solid var(--linie-leise); vertical-align: middle; }
.liste tbody tr:hover { background: var(--zeile-hover); }
.liste td.zahl, .liste th.zahl { text-align: right; }
.liste td.notiz { color: var(--text-leise); }
.karte > table.liste { margin: 0 calc(-1 * var(--a6)); width: calc(100% + 2 * var(--a6)); }

/* --- Meldungen ------------------------------------------------------------------- */
.meldungen { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--a2); }
.meldung {
  margin: 0; padding: 12px 16px; border-radius: var(--radius); font-size: var(--s-text);
  background: var(--gut-flaeche); color: var(--text); border: 1px solid transparent;
}
.meldung.error { background: var(--schlecht-flaeche); color: var(--schlecht); }
.meldung.warning { background: var(--teils-flaeche); }
.meldung.info { background: var(--aktion-hell); }

/* --- Gerenderter Markdown-Text --------------------------------------------------- */
.md { font-size: var(--s-text); line-height: var(--zeile-lese); overflow-wrap: anywhere; }
.md > * + * { margin-top: var(--a2); }
.md ul, .md ol { padding-left: 20px; }
.md li { margin: 0 0 4px; }
.md li > p { margin: 0; }
.md strong { font-weight: 600; }
.md code { background: var(--neutral-flaeche); border-radius: 4px; padding: 1px 4px; }
.md pre { background: var(--neutral-flaeche); border-radius: var(--radius); padding: var(--a3); overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: 0; padding-left: var(--a3); border-left: 3px solid var(--rand-stark); color: var(--text-leise); }
.md h3, .md h4 { margin-top: var(--a3); }
.md hr { border: 0; border-top: 1px solid var(--rand); }

/* --- Fragenliste (Vorlage Main.html) --------------------------------------------- */
.pfad { font-size: var(--s-neben); color: var(--text-leise); }
.pfad a { color: var(--text-leise); }
.pfad a:hover { color: var(--text); }
.knopf .leise { color: var(--text-leise); }

/* Menü «Mehr ▾» */
details.menue { position: relative; }
details.menue > summary { list-style: none; }
details.menue > summary::-webkit-details-marker { display: none; }
.menue-inhalt {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; min-width: 240px; max-width: 360px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(26, 29, 33, .08); padding: 8px; display: flex; flex-direction: column;
}
.menue-inhalt > a { padding: 8px 12px; border-radius: 6px; color: var(--text); font-size: var(--s-text); }
.menue-inhalt > a:hover { background: var(--zeile-hover); color: var(--text); }
.menue-text { border-top: 1px solid var(--linie-leise); margin-top: 8px; padding: 12px; font-size: var(--s-neben); display: flex; flex-direction: column; gap: 4px; }
.menue-text .md { font-size: var(--s-neben); color: var(--text-leise); }

/* Fortschritt */
.fortschritt-karte { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--a6); }
.fortschritt { display: flex; flex-direction: column; gap: var(--a2); flex: 1 1 320px; min-width: 0; }
.fortschritt-zeile { display: flex; justify-content: space-between; font-size: var(--s-text); }
.fortschritt-zeile .stark { font-weight: 600; }
.fortschritt-zeile .leise { color: var(--text-leise); }
.balken { height: 6px; background: var(--neutral-flaeche); border-radius: 3px; overflow: hidden; }
.balken > div { min-width: 8px; height: 100%; background: var(--aktion); border-radius: 3px; }
.zaehler { display: flex; gap: var(--a5); font-size: var(--s-neben); color: var(--text-leise); }
.zaehler strong { font-weight: 600; }

/* Karte ohne Innenabstand (Liste mit Filterzeile) */
.karte-flach { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-karte); overflow: hidden; }

/* Filterzeile */
.filterzeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2);
  padding: var(--a3) var(--a4); border-bottom: 1px solid var(--rand);
}
.umschalter { display: inline-flex; align-items: center; border: 1px solid var(--rand-stark); border-radius: var(--radius); overflow: hidden; font-size: var(--s-neben); }
.umschalter button {
  border: 0; background: var(--flaeche); color: var(--text); font: inherit; font-size: var(--s-neben);
  padding: 8px var(--a3); cursor: pointer;
}
.umschalter button:hover { background: var(--zeile-hover); }
.umschalter button[aria-pressed="true"] { background: var(--text); color: var(--auf-aktion); font-weight: 600; }
.umschalter button:focus-visible { outline-offset: -2px; }
.filter-label { font-size: var(--s-neben); font-weight: 400; color: var(--text-leise); margin: 0 0 0 var(--a2); }
.filterzeile select { width: auto; height: 34px; font-size: var(--s-neben); padding: 0 var(--a2); }
.filterzeile input[type=search] { margin-left: auto; width: 220px; height: var(--knopf-hoehe); font-size: var(--s-text); padding: 0 var(--a3); }

/* Zeilen: Nr. | Thema | Frage | Verdikt | Status = 64 / 190 / Rest / 100 / 140 */
.fragen-kopf, .fragen-zeile {
  display: grid; grid-template-columns: 64px 190px minmax(0, 1fr) 100px 140px;
  gap: var(--a3); padding: 0 var(--a4);
}
.fragen-kopf {
  padding-top: var(--a2); padding-bottom: var(--a2);
  font-size: var(--s-neben); font-weight: 600; color: var(--text-leise);
}
.fragen-zeile { align-items: center; padding-top: 12px; padding-bottom: 12px; border-top: 1px solid var(--linie-leise); }
.fragen-zeile:hover { background: var(--zeile-hover); }
.fragen-zeile:target { background: var(--teils-zeile); }
.fragen-zeile .nr { font-size: var(--s-neben); color: var(--text-schwach); font-variant-numeric: tabular-nums; }
/* auf dem Hover-Hintergrund reicht --text-schwach nicht für 4.5:1 */
.fragen-zeile:hover .nr { color: var(--text-leise); }
.fragen-zeile .thema { font-size: var(--s-neben); display: flex; align-items: center; gap: 8px; min-width: 0; }
.fragen-zeile .frage { font-size: var(--s-text); }
.fragen-zeile > [role=cell] { min-width: 0; }
.fragen-zeile .verdikt { display: flex; }
.kuerzen { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.verdikt-keine { color: var(--text-schwach); }
.fragen-leer { padding: var(--a5) var(--a4); border-top: 1px solid var(--linie-leise); color: var(--text-leise); font-size: var(--s-text); }
.fragen-fuss {
  display: flex; justify-content: space-between; padding: var(--a3) var(--a4);
  border-top: 1px solid var(--linie-leise); font-size: var(--s-neben); color: var(--text-leise);
}

/* Status-Knopf: öffnet die Antwort, Farbe nach Status */
.status-knopf {
  display: inline-flex; align-items: center; justify-content: center; height: 32px; width: 124px;
  border-radius: var(--radius); font-size: var(--s-neben); font-weight: 600; white-space: nowrap;
}
.status-knopf.status-offen { border: 1px solid var(--rand-stark); background: var(--flaeche); color: var(--text); font-weight: 600; }
.status-knopf.status-offen:hover { background: var(--zeile-hover); color: var(--text); }
.status-knopf.status-zu_pruefen { background: var(--teils-flaeche); color: var(--teils); }
.status-knopf.status-zu_pruefen:hover { color: var(--teils); filter: brightness(.97); }
.status-knopf.status-abgeschlossen { background: var(--gut-flaeche); color: var(--gut); }
.status-knopf.status-abgeschlossen:hover { color: var(--gut); filter: brightness(.97); }

@media (max-width: 760px) {
  .fragen-kopf, .fragen-zeile { grid-template-columns: 56px minmax(0, 1fr) 124px; }
  .fragen-kopf > :nth-child(2), .fragen-kopf > :nth-child(4),
  .fragen-zeile > :nth-child(2), .fragen-zeile > :nth-child(4) { display: none; }
  .filterzeile input[type=search] { margin-left: 0; width: 100%; }
}

/* --- Kopfzeile der Arbeitsflächen mit Titel (Bibliothek, Dokument-Formular) ------- */
.kopf-titel { font-size: var(--s-text); color: var(--text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf-titel strong { color: var(--text); font-weight: 600; }
body:has(main.schmal) .kopf-links { gap: var(--a4); }

.frage-kopf { display: flex; flex-direction: column; gap: var(--a3); }
.frage-meta { display: flex; align-items: center; gap: 12px; font-size: var(--s-neben); color: var(--text-leise); flex-wrap: wrap; }
h1.fragetext { margin: 0; font-size: var(--s-satz); line-height: var(--zeile); font-weight: 600; letter-spacing: -0.01em; }
.antwort-form { display: flex; flex-direction: column; gap: 24px; }
.verdikt-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.verdikt-knopf {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 var(--a3); margin: 0;
  border: 1px solid var(--rand-stark); border-radius: var(--radius); background: var(--flaeche);
  font-size: var(--s-text); font-weight: 400; cursor: pointer;
}
.verdikt-knopf input { margin: 0; width: 13px; height: 13px; }
.verdikt-knopf:hover { background: var(--zeile-hover); }
.verdikt-knopf:has(input:focus-visible) { outline: 2px solid var(--aktion); outline-offset: 2px; }
.verdikt-knopf:has(input:checked) { border-width: 2px; padding: 0 12px; font-weight: 600; }

/* Belege als Chips mit Rang */
.belege { display: flex; flex-direction: column; gap: var(--a2); }
.beleg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); }
.beleg-chip { padding: 0 4px 0 12px; }
.beleg-chip > a, .beleg-chip > span { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.beleg-chip > a:hover { color: var(--aktion); }
.beleg-chip.vermutet { background: var(--flaeche); border: 1px dashed var(--rand-gestrichelt); }
.beleg-chip.vorschlag { background: var(--aktion-hell); padding: 0 12px; }
.chip-x {
  border: 0; background: none; color: var(--text-leise); width: 22px; height: 22px; border-radius: 999px;
  cursor: pointer; font-size: var(--s-text); line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.chip-x:hover { background: var(--rand); color: var(--text); }
details.beleg-neu > summary { list-style: none; cursor: pointer; }
details.beleg-neu > summary::-webkit-details-marker { display: none; }
details.beleg-neu[open] { flex-basis: 100%; }
.beleg-form {
  margin-top: var(--a2); border: 1px solid var(--rand); border-radius: var(--radius); padding: var(--a4);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a3) var(--a4);
}
.beleg-form .feld + .feld { margin-top: 0; }
.beleg-form .fehler, .beleg-form .aktionen { grid-column: 1 / -1; }
@media (max-width: 640px) { .beleg-form { grid-template-columns: 1fr; } }

/* Fusszeile der Antwortkarte: Quelle und Status links, Speichern rechts */
.antwort-unten {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a3);
  padding-top: 20px; border-top: 1px solid var(--linie-leise);
}
.klein-auswahl { display: flex; align-items: center; gap: 12px; font-size: var(--s-neben); color: var(--text-leise); flex-wrap: wrap; }
.klein-auswahl label { margin: 0; font-size: var(--s-neben); font-weight: 400; color: var(--text-leise); }
.klein-auswahl label + select + label { margin-left: var(--a2); }
.klein-auswahl select { width: auto; max-width: 150px; height: 32px; font-size: var(--s-neben); padding: 0 var(--a2); }
.antwort-unten .knopf { padding: 0 var(--a4); }
.antwort-unten .primaer { padding: 0 20px; }

/* Protokoll und Mehr */

.protokoll, .verlauf { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--a3); font-size: var(--s-text); }
.protokoll li, .verlauf li { margin: 0; padding-left: var(--a3); border-left: 3px solid var(--rand); }
.protokoll li.art-frage { border-left-color: var(--aktion); }
.protokoll li.art-antwort_anbieter { border-left-color: var(--gut); }
.protokoll li.art-notiz { border-left-color: var(--teils); }
.kopfzeile { font-size: var(--s-neben); color: var(--text-leise); }
.frage-details { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--a4); margin: 0; font-size: var(--s-text); }
.frage-details dt { color: var(--text-leise); }
.frage-details dd { margin: 0; }
.dienste-liste { list-style: none; padding: 0; margin: 0; font-size: var(--s-text); }
.dienste-liste a { color: var(--text); display: inline-flex; gap: var(--a2); align-items: center; }
.dienste-liste li.aktiv { font-weight: 600; }
.url-liste { font-size: var(--s-text); list-style: none; padding: 0; }
.url-liste li { display: flex; align-items: center; gap: 4px; }

/* --- KI-Ergebniskarte der Nachweissuche (Evidenz-Bibliothek) -------------------- */
.ki-ergebnis {
  --band: var(--bg); --band-linie: var(--rand); --chip-rand: var(--rand-stark); --ton: var(--text-leise);
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-karte); overflow: hidden;
}
.ton-karte-schlecht { --band: var(--schlecht-band); --band-linie: var(--schlecht-linie); --chip-rand: var(--schlecht-rand); --ton: var(--schlecht); }
.ki-ergebnis-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 20px var(--a6);
  background: var(--band); border-bottom: 1px solid var(--band-linie);
}
.ki-chip {
  display: inline-flex; align-items: center; gap: var(--a2); height: 36px; padding: 0 16px;
  border-radius: var(--radius-chip); background: var(--flaeche); border: 1px solid var(--chip-rand);
  color: var(--ton); font-size: var(--s-text); font-weight: 600;
}
.ki-reifegrad-text { font-size: var(--s-text); color: var(--text); }
.ki-reifegrad-text strong { font-weight: 600; }
.ki-reifegrad-text small { color: var(--text-leise); font-size: var(--s-neben); }
.ki-meta { margin-left: auto; font-size: var(--s-neben); color: var(--text-leise); }  /* Kontrast auf farbigem Band */

.ki-ergebnis ul { margin: 0; padding-left: 20px; font-size: var(--s-text); line-height: var(--zeile); }
.ki-ergebnis li { margin: 0 0 8px; }
details.ki-details { border-top: 1px solid var(--linie-leise); padding: var(--a3) var(--a6); font-size: var(--s-text); }
details.ki-details > summary { cursor: pointer; font-weight: 600; color: var(--text-leise); width: fit-content; }
details.ki-details > summary:hover { color: var(--text); }
details.ki-details[open] > summary { margin-bottom: var(--a3); }
.ki-fuss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a3);
  padding: 16px var(--a6); border-top: 1px solid var(--linie-leise); background: var(--fuss-flaeche);
}
.ki-fuss > span { font-size: var(--s-neben); color: var(--text-leise); }
.ki-fuss .knopf, .ki-fuss .primaer { height: 38px; padding: 0 16px; }
.ki-fuss .primaer { padding: 0 var(--a4); }
.ki-inhalt { padding: 20px var(--a6); }
@media (max-width: 640px) { .ki-meta { margin-left: 0; } }

/* Ruhige Statuszeile während eines Laufs: eine Zeile, feste Breite der Zeit */
.ki-status {
  display: flex; align-items: center; gap: var(--a3); padding: 16px var(--a5); min-width: 0;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-karte); font-size: var(--s-text);
}
.ki-status-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-leise); }
.ki-status-text strong { color: var(--text); font-weight: 600; }
.ki-status-kosten { flex: none; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.ki-zeit { font-variant-numeric: tabular-nums; color: var(--text-leise); min-width: 3.5em; text-align: right; }

/* --- Evidenz-Bibliothek (Vorlage Evidenz.html) ----------------------------------- */
.pilot-zeile {
  display: flex; align-items: flex-start; gap: 12px; padding: var(--a3) var(--a4);
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px;
  font-size: var(--s-neben); color: var(--text-leise);
}
.pilot-zeile svg { color: var(--aktion); margin-top: 1px; }
.pilot-zeile strong { color: var(--text); font-weight: 600; }
.hochladen-form label { margin: 0; }
.hochladen-form:focus-within label { outline: 2px solid var(--aktion); outline-offset: 2px; }
.evidenz-kopf, .evidenz-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px 60px 120px 110px 90px 70px;
  gap: var(--a3); padding: 0 var(--a4);
}
.evidenz-kopf {
  padding-top: 12px; padding-bottom: 12px;
  font-size: var(--s-neben); font-weight: 600; color: var(--text-leise);
}
.evidenz-zeile { align-items: center; padding-top: var(--a3); padding-bottom: var(--a3); border-top: 1px solid var(--linie-leise); }
.evidenz-zeile:hover { background: var(--zeile-hover); }
.evidenz-zeile.veraltet { background: var(--schlecht-zeile); }
.evidenz-zeile > [role=cell] { min-width: 0; }
.evidenz-dok { display: flex; align-items: center; gap: var(--a3); min-width: 0; }
.dok-symbol {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
}
.dok-symbol.datei { background: var(--aktion-hell); color: var(--aktion); font-size: var(--s-neben); font-weight: 600; }
.dok-symbol.web { background: var(--neutral-flaeche); color: var(--text-leise); }
.evidenz-titel { display: flex; flex-direction: column; min-width: 0; }
.titel-link { font-size: var(--s-text); font-weight: 600; color: var(--text); }
.titel-link:hover { color: var(--aktion); }
.unterzeile { font-size: var(--s-neben); color: var(--text-schwach); display: block; }
.klein-zelle { font-size: var(--s-neben); }
.klein-zelle.leise { color: var(--text-leise); }
.nicht-erkannt { display: block; font-size: var(--s-neben); color: var(--text-schwach); }
.aktualitaet { display: inline-flex; align-items: center; gap: 8px; font-size: var(--s-neben); font-weight: 600; }
.aktualitaet.leer { color: var(--text-leise); font-weight: 400; }
.oeffnen { text-align: right; font-size: var(--s-neben); }
.spinner.klein { width: 10px; height: 10px; border-width: 2px; vertical-align: -1px; }
details.webseite-neu > summary { cursor: pointer; color: var(--aktion); list-style: none; }
details.webseite-neu > summary::-webkit-details-marker { display: none; }
.webseite-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); margin-top: var(--a2); }
.webseite-form input[type=url] { width: 320px; max-width: 100%; height: var(--knopf-hoehe); font-size: var(--s-text); }
.webseite-form small { flex-basis: 100%; }
.fehlt-karte { gap: var(--a3); }
.fehlt-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); }
.fehlt-kopf h2 { font-size: var(--s-text); font-weight: 600; }
.fehlt-kopf span { font-size: var(--s-neben); color: var(--text-schwach); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); }
.chip.fehlt { height: 30px; font-size: var(--s-neben); font-weight: 400; }
details.weitere-chips { display: inline-flex; flex-wrap: wrap; gap: var(--a2); }
details.weitere-chips > summary { list-style: none; cursor: pointer; background: none; border: 1px solid var(--rand); color: var(--text-leise); }
details.weitere-chips > summary::-webkit-details-marker { display: none; }
details.weitere-chips[open] > summary { display: none; }
ul.funde { list-style: none; margin: 0; padding: var(--a4) var(--a6); font-size: var(--s-text); }
ul.funde li { margin: 0 0 12px; }
ul.funde li.unzulaessig { opacity: .75; }
.fund-titel { font-weight: 600; display: block; }
.fund-platz { display: inline-block; width: 16px; flex-shrink: 0; }
.einordnung-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a2); font-size: var(--s-neben); color: var(--text-leise); }
.einordnung-zeile svg { color: var(--aktion); }
.evidenz-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a4) var(--a5); }
.evidenz-form .feld + .feld { margin-top: 0; }
.evidenz-form .breit, .evidenz-form .fehler { grid-column: 1 / -1; }
.feld-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); margin-bottom: 8px; }
.feld-kopf label, .feld-label { margin: 0; font-size: var(--s-text); font-weight: 600; }
.herkunft-marke { display: inline-flex; align-items: center; gap: 4px; font-size: var(--s-neben); font-weight: 600; border-radius: var(--radius-chip); padding: 2px 8px; white-space: nowrap; }
.herkunft-marke.ki { background: var(--aktion-hell); color: var(--aktion); }
.herkunft-marke.nutzer { background: var(--neutral-flaeche); color: var(--text); }  /* Kontrast 4.5:1 auch auf Leseseiten */
.herkunft-marke.leer { border: 1px dashed var(--rand-gestrichelt); color: var(--text-leise); font-weight: 600; }
@media (max-width: 760px) {
  .evidenz-kopf, .evidenz-zeile { grid-template-columns: minmax(0, 1fr) 90px 60px; }
  .evidenz-kopf > :nth-child(2), .evidenz-kopf > :nth-child(3), .evidenz-kopf > :nth-child(4),
  .evidenz-zeile > :nth-child(2), .evidenz-zeile > :nth-child(3), .evidenz-zeile > :nth-child(4),
  .evidenz-kopf > :nth-child(6), .evidenz-zeile > :nth-child(6) { display: none; }
  .evidenz-form { grid-template-columns: 1fr; }
}

/* ====================================================================================
   Weitere Seiten: Detailseite eines KI-Laufs (_ki_lauf.html), Matrix des
   Mehr-Dienst-Modus und allgemeine Hilfsklassen. Gleiche Tokens wie oben.
   ==================================================================================== */
.beschreibung { font-size: var(--s-text); }
.anzahl { font-size: var(--s-neben); color: var(--text-leise); }
.zelle {
  display: inline-block; min-width: 3.4rem; padding: 2px 8px; text-align: center;
  border-radius: 6px; color: var(--text); font-size: var(--s-neben); background: var(--flaeche); border: 1px solid var(--rand-stark);
}
.status-zu_pruefen { background: var(--teils-flaeche); border-color: var(--teils-flaeche); color: var(--teils); }
.status-abgeschlossen { background: var(--gut-flaeche); border-color: var(--gut-flaeche); color: var(--gut); }
.matrix-rahmen { overflow: auto; max-height: 75vh; border: 1px solid var(--rand); border-radius: var(--radius); }
table.matrix { border-collapse: separate; border-spacing: 0; font-size: var(--s-text); }
.matrix th, .matrix td { border-bottom: 1px solid var(--linie-leise); padding: 4px 8px; background: var(--flaeche); }
.matrix td { text-align: center; }
.matrix thead th { position: sticky; top: 0; z-index: 2; vertical-align: bottom; font-weight: 600; }
.matrix .frage-spalte { position: sticky; left: 0; z-index: 1; text-align: left; font-weight: 400; min-width: 22rem; max-width: 30rem; border-right: 1px solid var(--rand); }
.matrix thead .frage-spalte { z-index: 3; }
.matrix .dienst-spalte small { color: var(--text-leise); font-weight: 400; }
.prio-ausserhalb { color: var(--text-leise); font-style: italic; }
.fid { font-size: var(--s-neben); color: var(--text-leise); margin-right: 8px; font-variant-numeric: tabular-nums; }
.marke-kurz, .marke-ki { display: inline-block; font-size: var(--s-neben); font-weight: 600; padding: 1px 4px; border-radius: 4px; margin-left: 4px; background: var(--neutral-flaeche); color: var(--text-leise); }
details > summary { cursor: pointer; }
.pilot-hinweis { font-size: var(--s-neben); color: var(--text-leise); }
.hinweis-box { background: var(--aktion-hell); padding: 12px 16px; border-radius: var(--radius); font-size: var(--s-text); }
.spalten-gleich { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a4); align-items: start; }
@media (max-width: 900px) { .spalten-gleich { grid-template-columns: 1fr; } }
.alter { display: inline-block; font-size: var(--s-neben); font-weight: 600; }
.alter-gueltig { color: var(--gut); }
.alter-veraltet { color: var(--schlecht); }
.alter-datum_unklar { color: var(--text-leise); }
.lauf-liste { list-style: none; padding: 0; margin: 0; font-size: var(--s-text); }
.lauf-status { font-size: var(--s-neben); }
.lauf-status.status-fehler { color: var(--schlecht); }
.lauf-status.status-wartet, .lauf-status.status-laeuft { color: var(--teils); }
.ki-karte { border: 1px solid var(--rand); border-radius: var(--radius-karte); padding: var(--a4) var(--a5); background: var(--flaeche); display: flex; flex-direction: column; gap: var(--a3); }
.ki-karte.ki-laeuft { background: var(--fuss-flaeche); }
.ki-karte.ki-fehler { background: var(--schlecht-flaeche); }
.ki-kopf { display: flex; flex-wrap: wrap; gap: 8px var(--a4); align-items: baseline; }
.ki-kopf .hilfe { flex-basis: 100%; }
.ki-verdikt, .ki-reifegrad, .ki-pruefergebnis { font-weight: 600; }
.ergebnis-ausreichend { color: var(--gut); }
.ergebnis-ungenügend { color: var(--schlecht); }
.ki-korrekturen { background: var(--teils-flaeche); border-radius: var(--radius); padding: var(--a2) var(--a2) var(--a2) 28px; font-size: var(--s-text); }
.ki-antwort { font-size: var(--s-text); }
.ki-datenklassen { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--a4); font-size: var(--s-text); margin: 0; }
.ki-datenklassen dt { color: var(--text-leise); }
.ki-datenklassen dd { margin: 0; }
.ki-belege li.unzulaessig, tr.unzulaessig { opacity: .75; }
.beleg-status { display: inline-block; font-size: var(--s-neben); padding: 0 8px; border-radius: 4px; background: var(--neutral-flaeche); }
.beleg-status.status-belegt, .aussage-bestätigt { background: var(--gut-flaeche); color: var(--gut); }
.beleg-status.status-vermutet, .aussage-eingeschränkt, .aussage-unbelegt { background: var(--teils-flaeche); color: var(--teils); }
.aussage-widerlegt { background: var(--schlecht-flaeche); color: var(--schlecht); }
.marke-unzulaessig { display: inline-block; font-size: var(--s-neben); color: var(--schlecht); margin-left: 4px; }
.erfuellt-ja { color: var(--gut); font-weight: 600; }
.erfuellt-nein { color: var(--schlecht); font-weight: 600; }
.erfuellt-teilweise { color: var(--teils); font-weight: 600; }
.ki-hinweise { font-size: var(--s-text); color: var(--text-leise); }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--rand-stark); border-right-color: transparent; border-radius: 50%; animation: drehen 1s linear infinite; vertical-align: -2px; }
@keyframes drehen { to { transform: rotate(360deg); } }
form.loeschen { margin-top: var(--a4); }

/* --- Tiefenanalyse: schwache Testmethode als Marke (Analyse-Seite, Befunde der Antwort-Seite) - */
.an-nur-befragung {
  display: inline-block; font-size: var(--s-neben); font-weight: 600; color: var(--teils);
  background: var(--teils-flaeche); border-radius: var(--radius-chip); padding: 1px 8px; vertical-align: 1px;
}

/* --- Antwort-Seite: «Befunde aus der Bibliothek» --------------------------------- */
ul.befunde { list-style: none; margin: 0; padding: 0; }
ul.befunde > li.befund + li.befund { border-top: 1px solid var(--linie-leise); }
.befund details > summary { list-style: none; cursor: pointer; }
.befund details > summary::-webkit-details-marker { display: none; }
.befund-zeile { display: grid; align-items: center; gap: var(--a3); padding: var(--a2) var(--a4); font-size: var(--s-text); }
.befund-zeile:hover { background: var(--zeile-hover); }
.befund-id { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: var(--s-neben); color: var(--text-leise); }
.befund-titel { min-width: 0; }
.befund-inhalt { padding: 0 var(--a4) var(--a3); display: flex; flex-direction: column; gap: var(--a2); font-size: var(--s-text); }
.befund-inhalt p { margin: 0; }
blockquote.zitat {
  margin: 0; padding: var(--a2) var(--a3); border-left: 3px solid var(--rand-stark);
  background: var(--fuss-flaeche); color: var(--text); font-size: var(--s-text); line-height: var(--zeile);
}
.frage-befunde { border: 1px solid var(--rand); border-radius: var(--radius); }
.befund-frage-zeile { display: flex; align-items: flex-start; gap: var(--a3); padding-right: var(--a3); }
.befund-frage-zeile > details { flex: 1; min-width: 0; }
.befund-frage-zeile > form, .befund-frage-zeile > .befund-uebernommen { margin-top: 8px; flex-shrink: 0; }
.frage-befunde .befund-zeile { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-right: 0; }
.befund-art { font-size: var(--s-neben); font-weight: 600; color: var(--text-leise); }
.befund-art.gruppe-ausnahmen { color: var(--schlecht); }
.befund-quelle { font-size: var(--s-neben); color: var(--text-leise); display: flex; flex-wrap: wrap; min-width: 0; gap: 4px; white-space: nowrap; }
.befund-uebernommen { display: inline-flex; align-items: center; gap: 4px; font-size: var(--s-neben); font-weight: 600; height: 32px; }
@media (max-width: 640px) {
  .frage-befunde .befund-zeile { grid-template-columns: minmax(0, 1fr); padding-right: var(--a4); }
  .befund-frage-zeile { flex-direction: column; padding: 0 0 var(--a2); }
  .befund-frage-zeile > form, .befund-frage-zeile > .befund-uebernommen { margin: 0 var(--a4); }
}

/* --- Bibliothek: Spalte «Analyse» ---------------------------------------------- */
.analyse-marke, .analyse-ausnahmen { display: inline-flex; align-items: center; gap: 4px; font-size: var(--s-neben); font-weight: 600; }
a.analyse-marke.ton-gut { color: var(--gut); }
a.analyse-marke.ton-schlecht { color: var(--schlecht); }
.analyse-marke.leise { color: var(--text-leise); font-weight: 400; }
.analyse-marke.angehalten-marke { color: var(--teils); }

/* === Leseseiten (Schritt 6): Vorlagen Antwort-v2, AntwortKI-v2, Analyse-v2 =================
   Ebenenmodell: Ebene 1 ohne Klick (ein Satz Urteil, höchstens 3 Zahlen, höchstens 2 Listen
   à 5 Zeilen, eine Hauptaktion); Ebene 2 ein Klick auf derselben Seite (Begründung genau
   einer Zeile); Maschinenzahlen nur unter /verwaltung/pruefprotokolle/. */
body.leseseite { line-height: var(--zeile); }
.ls-seite { max-width: 920px; margin: 0 auto; padding: 52px 100px 68px; }
.ls-seite.analyse { padding: 56px 100px 72px; }
.ls-meta { font-size: var(--s-neben); color: var(--text-leise); letter-spacing: .005em; }
.ls-meta b, .ls-meta .ls-doku { color: var(--text); font-weight: 600; }
.ls-meta a { color: var(--aktion); }
.ls-meta a.ls-doku { color: var(--text); }
.ls-meta .ls-blaettern { margin-left: 2px; }
.ls-meta .ls-blaettern a { padding: 0 4px; }
.ls-meldungen { margin: 20px 0 0; }
.ls-meldungen .meldung { font-size: var(--s-neben); }

.ls-h1 { margin: 20px 0 0; font-size: var(--s-satz); font-weight: 400; line-height: var(--zeile-lese); letter-spacing: -.012em; max-width: 19em; overflow-wrap: break-word; }
.analyse .ls-h1 { margin-top: 24px; }
.ls-h1 b { font-weight: 600; }

/* Vorbehalt: eine Maschinenzahl, die das Urteil darüber ungültig macht (Ausnahme der Regel) */
.ls-vorbehalt { margin: 20px 0 0; display: flex; gap: 12px; align-items: baseline; font-size: var(--s-text); line-height: var(--zeile-lese); color: var(--schlecht); max-width: 40em; }
.ls-vorbehalt svg { align-self: center; }
.ls-vorbehalt b { font-weight: 600; }
.ls-status { margin: 20px 0 0; display: flex; align-items: center; gap: 12px; font-size: var(--s-neben); color: var(--text-leise); }

.ls-zahlen { display: flex; flex-wrap: wrap; gap: 28px 72px; margin: 44px 0 0; }
.analyse .ls-zahlen { margin-top: 48px; }
.ls-wert { font-size: var(--s-satz); font-weight: 600; letter-spacing: -.025em; line-height: 1; font-variant-numeric: tabular-nums; }
.ls-wert.warn { color: var(--schlecht); }
.ls-was { margin-top: 8px; font-size: var(--s-neben); color: var(--text-leise); }

.ls-trenner { border: 0; border-top: 1px solid var(--linie); margin: 44px 0 0; }
.analyse .ls-trenner { margin-top: 48px; }
.ls-h2 { margin: 40px 0 0; font-size: var(--s-lese); font-weight: 600; letter-spacing: -.004em; }
.analyse .ls-h2 { margin-top: 40px; }

.ls-liste { list-style: none; margin: 16px 0 0; padding: 0; }
.analyse .ls-liste { margin-top: 16px; }
.ls-liste > li { margin: 0; border-bottom: 1px solid var(--linie); font-size: var(--s-text); line-height: var(--zeile-lese); }
.ls-liste > li:last-child { border-bottom: 0; }
.ls-zeile { display: flex; align-items: baseline; gap: 20px; padding: 12px 0; }
.analyse .ls-zeile { gap: 20px; }
.ls-txt { flex: 1 1 auto; min-width: 0; }
.ls-ref { flex: 0 0 auto; font-size: var(--s-neben); color: var(--text-leise); font-variant-numeric: tabular-nums; }
.ls-leer { margin: 16px 0 0; font-size: var(--s-text); color: var(--text-leise); }
/* Vier-Punkte-Regel: was nach den vier Zeilen übrig bleibt, steht unter «weitere (n)»; die
   aufgeklappten Zeilen setzen die Liste in derselben Form fort */
details.ls-weitere { margin-top: 12px; }
details.ls-weitere > summary { display: inline-block; font-size: var(--s-neben); color: var(--aktion); cursor: pointer; list-style: none; }
details.ls-weitere > summary::-webkit-details-marker { display: none; }
details.ls-weitere > summary:hover { color: var(--aktion-dunkel); text-decoration: underline; text-underline-offset: 3px; }
details.ls-weitere > .ls-liste { margin-top: 4px; }

/* Ebene 2: eine Zeile aufklappen -> Zitat, Fundstelle, Testmethode, Quelle */
/* Die ganze Zeile ist klickbar; Text bleibt in Textfarbe, beim Darüberfahren hebt sich die
   Zeile dezent ab (wie die Fragenliste). Der Hintergrund reicht 10 px über den Text hinaus. */
details.ls-klapp-zeile > summary { list-style: none; cursor: pointer; margin: 0 -10px; padding-left: 12px; padding-right: 12px; border-radius: 6px; }
details.ls-klapp-zeile > summary::-webkit-details-marker { display: none; }
details.ls-klapp-zeile > summary:hover, details.ls-klapp-zeile[open] > summary { background: var(--zeile-hover); }
details.ls-klapp-zeile > summary:focus-visible { outline-offset: 0; }
.ls-begruendung { margin: 0 0 16px; padding: 2px 0 2px 16px; border-left: 2px solid var(--linie); font-size: var(--s-text); line-height: var(--zeile-lese); color: var(--text-leise); display: flex; flex-direction: column; gap: 8px; }
.ls-begruendung blockquote { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.ls-begruendung b { color: var(--text); font-weight: 600; }

.ls-fuss { margin: 48px 0 0; display: flex; flex-direction: column; gap: 12px; font-size: var(--s-neben); color: var(--text-leise); }
.analyse .ls-fuss { margin-top: 48px; gap: 12px; }
.ls-fuss a, .ls-fuss .ls-link { color: var(--aktion); }
.ls-fuss summary:hover .ls-link { color: var(--aktion-dunkel); }
.ls-fuss .ls-begruendung ul { margin: 0; padding-left: 20px; }
.ls-fuss .ls-begruendung li { margin: 0 0 8px; }
details.ls-fuss-klapp > summary { list-style: none; cursor: pointer; width: fit-content; }
details.ls-fuss-klapp > summary::-webkit-details-marker { display: none; }
details.ls-fuss-klapp[open] > summary { margin-bottom: 16px; }

/* Verdikt als vier ruhige Knöpfe; der gewählte mit dunklem Rand */
.ls-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; border: 0; padding: 0; }
.ls-kn { display: inline-block; margin: 0; border: 1px solid var(--linie); border-radius: var(--radius-lese); padding: 8px 16px; font-size: var(--s-text); font-weight: 400; color: var(--text-leise); cursor: pointer; background: var(--flaeche); }
.ls-kn:hover { border-color: var(--rand-stark); color: var(--text); }
.ls-kn input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ls-kn:has(input:checked) { border-color: var(--text); color: var(--text); font-weight: 600; }
.ls-kn:has(input:focus-visible) { outline: 2px solid var(--aktion); outline-offset: 2px; }
.ls-kn.keine { display: none; }

/* Feld «Antwort»; die Markdown-Leiste erscheint erst beim Schreiben */
.ls-feld-rahmen { position: relative; margin: 28px 0 0; }
textarea.ls-feld { display: block; width: 100%; min-height: 168px; border: 1px solid var(--linie); border-radius: var(--radius-lese-feld); padding: 20px 20px; font-size: var(--s-text); line-height: var(--zeile-lese); color: var(--text); background: var(--flaeche); resize: vertical; }
textarea.ls-feld:focus-visible { outline: 2px solid var(--aktion); outline-offset: 0; border-color: var(--aktion); }
.ls-feld-rahmen .md-leiste { position: absolute; top: -34px; right: 0; opacity: 0; transition: opacity .12s; }
.ls-feld-rahmen:focus-within .md-leiste { opacity: 1; }
.ls-hinweis { margin: 24px 0 0; font-size: var(--s-neben); line-height: var(--zeile-lese); color: var(--text-leise); max-width: 46em; }
.ls-hinweis b { color: var(--text); font-weight: 600; }

/* Klappleiste: Ebene 2 unter dem Feld */
.ls-klapp { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--s-neben); }
.ls-klapp button, .ls-klapp a { font: inherit; font-size: var(--s-text); color: var(--aktion); background: none; border: 0; padding: 0; cursor: pointer; }
.ls-klapp button:hover, .ls-klapp a:hover { color: var(--aktion-dunkel); }
.ls-klapp button[aria-expanded="true"] { color: var(--text); font-weight: 600; }
.ls-panel { margin: 20px 0 0; padding: 20px 0 4px; border-top: 1px solid var(--linie); font-size: var(--s-text); line-height: var(--zeile-lese); }
.ls-panel[hidden] { display: none; }
.ls-panel h3 { margin: 20px 0 8px; font-size: var(--s-neben); font-weight: 600; }
.ls-panel h3:first-child { margin-top: 0; }
.ls-panel .hilfe { font-size: var(--s-neben); }
.ls-panel .aktionen { margin-top: 12px; }
.ls-panel dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; }
.ls-panel dt { color: var(--text-leise); }
.ls-panel dd { margin: 0; }

/* Hauptaktion und Nebenaktion */
.ls-aktionen { margin: 32px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ls-haupt { display: inline-block; border: 0; background: var(--aktion-gefuellt); color: var(--flaeche); border-radius: var(--radius-lese); padding: 12px 20px; font: inherit; font-size: var(--s-text); font-weight: 600; line-height: var(--zeile); cursor: pointer; }
.ls-haupt:hover { background: var(--aktion-dunkel); color: var(--flaeche); }
.ls-neben { border: 0; background: none; padding: 4px 0; font: inherit; font-size: var(--s-text); color: var(--text-leise); cursor: pointer; }
.ls-neben:hover { color: var(--text); }
.ls-balken { margin: 32px 0 0; height: 4px; border-radius: 2px; background: var(--linie); overflow: hidden; max-width: 420px; }
.ls-balken > div { height: 100%; background: var(--aktion); }

/* Tabelle unter «Wie die KI darauf kommt» (Kriterien) */
.ls-tabelle { width: 100%; border-collapse: collapse; margin-top: 12px; }
.ls-tabelle th { text-align: left; font-size: var(--s-neben); font-weight: 600; color: var(--text-leise); padding: 0 12px 12px 0; border-bottom: 1px solid var(--linie); }
.ls-tabelle td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--linie); font-size: var(--s-text); vertical-align: baseline; }

@media (max-width: 760px) {
  .ls-seite, .ls-seite.analyse { padding: 28px 16px 48px; }
  .ls-h1 { font-size: var(--s-satz); }
  .ls-zahlen { gap: 24px 40px; }
  .ls-wert { font-size: var(--s-satz); }
  .ls-feld-rahmen .md-leiste { position: static; opacity: 1; margin-bottom: 8px; }
}
/* Links in Textzeilen: feine Unterstreichung, damit sie nicht nur an der Farbe erkennbar sind (WCAG 1.4.1) */
.ls-meta a, .ls-fuss a, .ls-begruendung a, .ls-hinweis a, .ls-leer a, .ls-befunde td.leer a {
  text-decoration: underline; text-decoration-color: var(--aktion-linie); text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.ls-meta a:hover, .ls-fuss a:hover, .ls-begruendung a:hover, .ls-hinweis a:hover, .ls-leer a:hover { text-decoration-color: currentColor; }
.ls-seite .option:has(input:checked) { color: var(--text); }

/* === Alle Befunde (Ebene 3, Vorlage AlleBefunde.html) ====================================== */
.ls-seite.befunde-seite { padding: 48px 100px 64px; }
.befunde-seite .ls-meta { font-size: var(--s-neben); }
.ls-titel { margin: 20px 0 0; font-size: var(--s-satz); font-weight: 600; letter-spacing: -.016em; }
.ls-unter { margin-top: 8px; font-size: var(--s-neben); color: var(--text-leise); }
.ls-suche { margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ls-suchform { flex: 1 1 160px; display: flex; }
.ls-suche .ls-filter { flex: 1 1 380px; }
input.ls-suchfeld { flex: 1 1 auto; height: auto; border: 1px solid var(--linie); border-radius: var(--radius); padding: 8px 12px; font-size: var(--s-text); background: var(--flaeche); }
.ls-filter { font-size: var(--s-neben); color: var(--text-leise); }
.ls-filter a { color: var(--aktion); }
.ls-filter a[aria-current="page"] { color: var(--text); font-weight: 600; }
table.ls-befunde { width: 100%; border-collapse: collapse; margin-top: 24px; }
.ls-befunde th { text-align: left; font-size: var(--s-neben); font-weight: 600; color: var(--text-leise); padding: 0 0 12px; border-bottom: 1px solid var(--linie); }
.ls-befunde th.r, .ls-befunde td.r { text-align: right; }
.ls-befunde td { padding: 12px 0; border-bottom: 1px solid var(--linie); font-size: var(--s-text); vertical-align: baseline; }
.ls-befunde td + td { padding-left: 16px; }
.ls-befunde td.id { font-size: var(--s-neben); color: var(--text-leise); font-variant-numeric: tabular-nums; width: 92px; white-space: nowrap; }
.ls-befunde td.seiten { font-size: var(--s-neben); color: var(--text-leise); font-variant-numeric: tabular-nums; width: 118px; }
.ls-befunde td.fragen { width: 112px; }
.ls-befunde td.leer { color: var(--text-leise); font-size: var(--s-text); }
.ls-abzeichen { display: inline-block; margin-left: 8px; font-size: var(--s-neben); border-radius: var(--radius-chip); padding: 1px 8px; vertical-align: 1px; white-space: nowrap; }
.ls-abzeichen.schwach { color: var(--teils); border: 1px solid var(--teils-rahmen); }
.ls-abzeichen.warn { color: var(--schlecht); border: 1px solid var(--schlecht-rand); }
.ls-mehr { margin-top: 20px; font-size: var(--s-neben); }
@media (max-width: 760px) {
  .ls-seite.befunde-seite { padding: 28px 16px 48px; }
  .ls-befunde td.id, .ls-befunde td.seiten, .ls-befunde td.fragen { width: auto; white-space: normal; }
  .ls-befunde td { overflow-wrap: anywhere; }
  .ls-befunde td + td { padding-left: 8px; }
}

/* Antwortfeld formatiert (Antwort-v2): wie das Feld, Klick schaltet auf Rohtext (mysra.js) */
.ls-feld-ansicht { min-height: 64px; border: 1px solid var(--linie); border-radius: var(--radius-lese-feld); padding: 20px 20px; font-size: var(--s-text); line-height: var(--zeile-lese); color: var(--text); background: var(--flaeche); cursor: text; overflow-wrap: anywhere; }
.ls-feld-ansicht:hover { border-color: var(--rand-stark); }
.ls-feld-ansicht:focus-visible { outline: 2px solid var(--aktion); outline-offset: 0; }
.ls-feld-ansicht.md > * + * { margin-top: 0; }
.ls-feld-ansicht p { margin: 0 0 12px; }
.ls-feld-ansicht > :last-child { margin-bottom: 0; }
.ls-feld-ansicht ul, .ls-feld-ansicht ol { margin: 0 0 12px; padding-left: 20px; }
.ls-feld-ansicht li { margin: 0; padding: 2px 0; }
.ls-feld-ansicht a { text-decoration: underline; text-decoration-color: var(--aktion-linie); text-underline-offset: 3px; cursor: pointer; }
.ls-feld-leer { color: var(--text-schwach); }
.ls-feld-rahmen.formatiert textarea, .ls-feld-rahmen.formatiert .md-leiste { display: none; }
/* Vorschlags-Belege auf hellblauer Fläche: leiser Text der Leseseiten wäre zu hell (Kontrast) */
body.leseseite .beleg-chip.vorschlag .leise { color: var(--aktion-dunkel); }

/* Bibliothek: Ergebnis der Übernahme als eine Zeile (Meldung), Details auf Klick */
.funde-ergebnis-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.funde-ergebnis-zeile > span { flex: 1 1 auto; }
.funde-ergebnis-zeile details > summary { color: var(--aktion); }
.funde-ergebnis-zeile details[open] { flex-basis: 100%; order: 3; }
.funde-ergebnis-zeile details ul { margin: 8px 0 0; }
.hinweis-box.neutral { background: var(--neutral-flaeche); color: var(--text-leise); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hinweis-box.neutral strong { color: var(--text); }
.hinweis-box.neutral .knopf { margin-left: auto; }

/* Fundstelle einer automatisch ermittelten Angabe (Seite und Zitat, Klick zeigt alles) */
details.fundstelle, small.fundstelle { display: block; margin-top: var(--a1); font-size: var(--s-neben); }
details.fundstelle > summary { width: auto; }

/* Lagebild unter dem Urteil (Stilregel 1, 04.11.2026): Lesetext, nicht leise */
.ls-lage { margin: 20px 0 0; font-size: var(--s-text); line-height: var(--zeile-lese); color: var(--text); max-width: 62ch; }
/* «Was fehlt · Kundendaten»: die Datenklasse leise neben der Überschrift */
.ls-h2-klasse { font-weight: 400; color: var(--text-leise); }
/* Rückfrage: deutsche Kernfrage, englischer Wortlaut an den Anbieter klein darunter */
.ls-rueckfrage-en { display: block; margin-top: 4px; font-size: var(--s-neben); line-height: var(--zeile-lese); color: var(--text-leise); }
.ls-kopieren-zeile { margin: 16px 0 0; font-size: var(--s-neben); color: var(--text-leise); }
.ls-kopieren-zeile .ls-kopieren { border: 0; background: none; padding: 0; font: inherit; color: var(--aktion); cursor: pointer; }
.ls-kopieren-zeile .ls-kopieren:hover { color: var(--aktion-dunkel); text-decoration: underline; text-underline-offset: 3px; }

/* ===================================================================================== */
/* Seitengerüst v3 (Schritt 6b): data/ux-referenz/Seitengeruest.md und *-v3.html          */
/* 1 Kopfzeile · 2 Seitenleiste · 3 Rückweg · 4 Seitenkopf · 5 Reiter · 6 Inhalt           */
/* ===================================================================================== */
body.g { background: var(--flaeche); color: var(--text); font-size: var(--s-text); }
.g-seite { min-height: 100vh; display: flex; flex-direction: column; }
.g-kopf { height: var(--kopf-hoehe); flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; border-bottom: 1px solid var(--rand); background: var(--flaeche); }
.g-marke { display: inline-flex; align-items: center; gap: 12px; font-size: var(--s-marke); font-weight: 700; letter-spacing: -0.02em; color: var(--text); text-decoration: none; }
.g-zeichen { display: block; flex: none; }
.g-marke:hover { color: var(--text); }
.g-benutzer { display: flex; align-items: center; gap: 16px; font-size: var(--s-neben); color: var(--text-leise); }
.g-benutzer a, .g-link-leise { color: var(--text-leise); }
.g-link-leise { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.g-benutzer a:hover, .g-link-leise:hover { color: var(--text); }

/* Seitenleiste fliesst auf schmalen Bildschirmen über den Inhalt (flex-wrap wie die Vorlage) */
.g-rahmen { flex: 1 1 auto; display: flex; flex-wrap: wrap; }
/* Seitenleiste (Stil A, Vorlage StilA-v1.html): Gruppen mit Titel in Versalien, Einträge mit
   Symbol, Fusszeile Einstellungen · KI-Läufe unten über einer feinen Linie */
.g-leiste { flex: 1 1 220px; max-width: 256px; background: var(--bg); border-right: 1px solid var(--rand); }
/* Die Fusszeile bleibt sichtbar: der Inhalt der Leiste steht fest, auch auf langen Seiten */
.g-leiste-innen { position: sticky; top: 0; box-sizing: border-box; min-height: calc(100vh - var(--kopf-hoehe));
  max-height: 100vh; overflow-y: auto; padding: 24px 12px; display: flex; flex-direction: column; }
.g-leiste-name { padding: 0 12px 16px; font-size: var(--s-lese); font-weight: 600; line-height: var(--zeile); letter-spacing: -0.01em; }
.g-leiste-gruppe ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.g-leiste-titel { padding: 16px 12px 8px; font-size: var(--s-leiste); font-weight: 600; letter-spacing: var(--sperrung);
  text-transform: uppercase; color: var(--text-leise); }
.g-leiste-gruppe a { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; border-radius: var(--radius);
  font-size: var(--s-text); font-weight: 600; color: var(--text); white-space: nowrap; text-decoration: none; }
.g-leiste-gruppe a svg, .g-leiste-fuss a svg { flex: none; color: var(--text-leise); }
.g-leiste-gruppe a:hover { background: var(--zeile-hover); color: var(--text); }
.g-leiste-gruppe a[aria-current="page"] { font-weight: 600; color: var(--aktion-dunkel); background: var(--aktion-hell); }
.g-leiste-gruppe a[aria-current="page"] svg { color: var(--aktion); }
.g-leiste-fuss { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--rand); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.g-leiste-fuss a { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; font-size: var(--s-neben); color: var(--text-leise); text-decoration: none; }
.g-leiste-fuss a:hover { color: var(--text); }
.g-leiste-fuss a[aria-current="page"] { font-weight: 600; color: var(--aktion-dunkel); }
.g-leiste-fuss a[aria-current="page"] svg { color: var(--aktion); }

.g-haupt { flex: 999 1 560px; min-width: 0; padding: 28px 40px 56px; }
.g-breite { max-width: var(--breite-allein); }
.g-rueckweg { min-height: 20px; margin-bottom: 8px; font-size: var(--s-neben); }
.g-rueckweg a { font-weight: 600; }
/* Aktionen stehen rechts (Seitengerüst): der Titel bricht um, die Aktionen nicht; erst unter 768 px
   rutschen sie unter den Titel (Auftrag 7b, Teil 0) */
.g-seitenkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.g-titelblock { flex: 1 1 0; min-width: 0; }
.g-seitenkopf > .g-aktionen { flex: none; flex-wrap: nowrap; }
@media (max-width: 767px) {
  .g-seitenkopf { flex-wrap: wrap; }
  .g-seitenkopf > .g-titelblock { flex-basis: 100%; }
  .g-seitenkopf > .g-aktionen { flex: 1 1 100%; flex-wrap: wrap; }
}
.g-titel { margin: 0; font-size: var(--s-satz); line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; }
.g-untertitel { margin: 8px 0 0; font-size: var(--s-neben); color: var(--text-leise); }
.g-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.g-aktionen form { display: inline-flex; margin: 0; }

/* Knöpfe: brechen nie um */
.g-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--knopf-hoehe); box-sizing: border-box; white-space: nowrap; flex: none;
  padding: 0 16px; border: 1px solid var(--rand-stark); border-radius: var(--radius); background: var(--flaeche);
  font: inherit; font-size: var(--s-text); font-weight: 600; color: var(--text); cursor: pointer; text-decoration: none; }
.g-knopf:hover { background: var(--zeile-hover); color: var(--text); }
.g-knopf.haupt { border-color: var(--aktion-gefuellt); background: var(--aktion-gefuellt); color: var(--flaeche); padding: 0 20px; }
.g-knopf.haupt:hover { background: var(--aktion-dunkel); border-color: var(--aktion-dunkel); color: var(--flaeche); }
.g-knopf.symbol { width: 40px; padding: 0; }
.g-knopf[disabled], .g-knopf[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
label.g-knopf { margin: 0; }

/* Reiter: aktiver Reiter fett mit blauer Linie; Zahl nur an nicht aktiven, nie 0 */
.g-reiter { display: flex; gap: 28px; margin-top: 24px; border-bottom: 1px solid var(--rand); overflow-x: auto; overflow-y: hidden; }  /* nie ein Scrollbalken (Seitengerüst 1.7) */
.g-reiter a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 0 12px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: var(--s-text); font-weight: 600; color: var(--text-leise); white-space: nowrap; }
.g-reiter a:hover { color: var(--text); }
.g-reiter a[aria-current="page"] { border-bottom-color: var(--aktion); font-weight: 600; color: var(--text); }
.g-reiter-zahl { font-size: var(--s-neben); font-weight: 600; color: var(--text-leise); }
.g-reiter-zahl.warn { font-weight: 600; color: var(--schlecht); }

.g-inhalt { padding-top: 24px; }
.g-inhalt.lese { padding-top: 28px; max-width: 760px; }
.g-inhalt.lese.lesebox { max-width: var(--breite-bericht); }  /* dritte Breite: Lesebox mit Beschriftungsspalte (Seitengerüst 2.12) */
.g-meldungen { margin-top: 16px; }

/* Arbeitsfläche: Suche und Auswahl ohne sichtbare Beschriftung */
.g-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.g-filter input[type="search"] { height: 40px; width: 280px; max-width: 100%; padding: 0 12px; border: 1px solid var(--rand-stark); border-radius: var(--radius); font: inherit; font-size: var(--s-text); color: var(--text); background: var(--flaeche); }
.g-filter select { height: 40px; padding: 0 12px; border: 1px solid var(--rand-stark); border-radius: var(--radius); background: var(--flaeche); font: inherit; font-size: var(--s-text); color: var(--text); width: auto; }
.g-pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.g-pille { display: inline-flex; align-items: center; height: var(--knopf-klein); padding: 0 12px; border: 1px solid var(--rand-stark); border-radius: var(--radius-chip); background: var(--flaeche);
  font: inherit; font-size: var(--s-neben); color: var(--text-leise); cursor: pointer; white-space: nowrap; }
.g-pille:hover { color: var(--text); }
.g-pille[aria-pressed="true"], .g-pille[aria-current="page"] { border-color: var(--text); font-weight: 600; color: var(--text); }

/* Tabellen der Arbeitsflächen */
.g-tabelle-rahmen { position: relative; margin-top: 16px; overflow-x: auto; }  /* relative: auch .sr-only bleibt in der Hülle */
.g-tabelle { width: 100%; border-collapse: collapse; font-size: var(--s-text); }
.g-tabelle th { text-align: left; padding: 0 28px 12px 0; font-size: var(--s-neben); font-weight: 400; color: var(--text-leise); border-bottom: 1px solid var(--rand); white-space: nowrap; }
.g-tabelle td { padding: 12px 28px 12px 0; border-bottom: 1px solid var(--rand); vertical-align: middle; line-height: var(--zeile); }  /* gemeinsame Mittelachse (Stil A) */
.g-tabelle th:last-child, .g-tabelle td:last-child { padding-right: 0; }
.g-tabelle .r { text-align: right; }
.g-tabelle .nr { font-size: var(--s-neben); color: var(--text-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-tabelle .eng { white-space: nowrap; }
.g-tabelle .leise { color: var(--text-leise); }
.g-tabelle .gekuerzt { max-width: 0; }
.g-tabelle .gekuerzt > a, .g-tabelle .gekuerzt > div { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.g-tabelle .gekuerzt > a:hover { color: var(--aktion); }
.g-tabelle .aktion-link { font-size: var(--s-neben); font-weight: 600; white-space: nowrap; }
.g-tabelle .aktion-link.stark { font-weight: 600; }
.g-tabelle .titel-link { font-weight: 600; color: var(--text); }
.g-tabelle .titel-link:hover { color: var(--aktion); }
.g-tabelle .unterzeile { margin-top: 2px; font-size: var(--s-neben); color: var(--text-leise); }
.g-tabelle .problem { color: var(--teils); font-weight: 600; }
.g-mehr { margin: 16px 0 0; font-size: var(--s-neben); color: var(--text-leise); }
.g-mehr a { font-weight: 600; }

/* Erfüllt? (Ja / Teilweise / Nein / Nicht anwendbar) */
.g-erfuellt { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
/* Farbe aus dem Ton, nicht aus dem Wort: bei Fragen, bei denen Ja ein Risiko bedeutet, ist Ja rot */
.g-erfuellt.ton-gut { color: var(--gut); }
.g-erfuellt.ton-teils { color: var(--teils); }
.g-erfuellt.ton-schlecht { color: var(--schlecht); }
.g-erfuellt.ton-na { color: var(--text-leise); }

/* Leseseite: Urteil, Lagebild, Boxen (nur diese vier: grau, Zitat, blau, orange) */
.g-urteil { margin: 0; font-size: var(--s-gross); line-height: 29px; letter-spacing: -0.01em; font-weight: 400; }
.g-urteil b, .g-urteil strong { font-weight: 600; }
.g-lage { margin: 16px 0 0; font-size: var(--s-text); line-height: var(--zeile-lese); }
.g-box { margin-top: 16px; padding: 20px 20px 12px; background: var(--bg); border-radius: var(--radius-karte); }
.g-box > h2 { margin: 0 0 4px; font-size: var(--s-lese); font-weight: 600; letter-spacing: 0; }
.g-zeile { padding: 12px 0; border-bottom: 1px solid var(--rand); font-size: var(--s-text); line-height: var(--zeile-lese); }
.g-box > .g-zeile:last-of-type, .g-box > details:last-of-type > .g-zeile:last-child { border-bottom: 0; }
.g-zeile-unter { margin-top: 4px; font-size: var(--s-neben); line-height: var(--zeile-lese); color: var(--text-leise); }
.g-an { font-weight: 600; color: var(--aktion); }
.g-weitere { border-top: 1px solid var(--rand); }
.g-weitere > summary { list-style: none; cursor: pointer; padding: 12px 0 4px; font-size: var(--s-neben); font-weight: 600; color: var(--aktion); }
.g-weitere > summary::-webkit-details-marker { display: none; }
.g-weitere > summary:hover { color: var(--aktion-dunkel); }
.g-box-fuss { margin: 8px 0 8px; font-size: var(--s-neben); color: var(--text-leise); }
.g-box-fuss a, .g-box-fuss .g-textknopf { font-weight: 600; }
.g-textknopf { border: 0; background: none; padding: 0; font: inherit; color: var(--aktion); cursor: pointer; }
.g-textknopf:hover { color: var(--aktion-dunkel); text-decoration: underline; text-underline-offset: 3px; }

/* Stufen «Wie gut ist die Frage beantwortet?» */
.g-stufe { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rand); }
.g-stufe:last-child { border-bottom: 0; }
.g-stufe-marke { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: var(--radius-chip); display: inline-flex; align-items: center; justify-content: center; }
.g-stufe-marke.erreicht { background: var(--gut-flaeche); color: var(--gut); }
.g-stufe-marke.offen { border: 1.5px solid var(--kreis-leer); }
.g-stufe-titel { font-size: var(--s-text); font-weight: 600; color: var(--text); }
.g-stufe.offen .g-stufe-titel { color: var(--text-leise); }
.g-stufe-hilfe { margin-top: 2px; font-size: var(--s-neben); color: var(--text-leise); }

/* Aufklappbare Zeile mit Zitat (Analyse) */
.g-klapp { border-bottom: 1px solid var(--rand); }
.g-klapp:last-of-type { border-bottom: 0; }
.g-klapp > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 12px 0; font-size: var(--s-text); line-height: var(--zeile); }
.g-klapp > summary::-webkit-details-marker { display: none; }
.g-klapp > summary:hover > span:first-child { color: var(--aktion-dunkel); }
.g-seite-ref { flex: none; font-size: var(--s-neben); color: var(--text-leise); white-space: nowrap; }
.g-zitat { margin: 0 0 16px; padding: 12px 16px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); font-size: var(--s-text); line-height: var(--zeile-lese); }
.g-zitat-unter { margin-top: 8px; font-size: var(--s-neben); color: var(--text-leise); }

.g-hinweis { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px; background: var(--aktion-hell); border-radius: var(--radius-lese-feld); font-size: var(--s-text); line-height: var(--zeile); color: var(--aktion-dunkel); }
.g-hinweis a, .g-hinweis .g-textknopf { font-weight: 600; color: var(--aktion-dunkel); white-space: nowrap; }
.g-achtung { margin-top: 20px; padding: 16px 16px; background: var(--teils-flaeche); border: 1px solid var(--teils-rahmen); border-radius: var(--radius-lese-feld); font-size: var(--s-text); line-height: var(--zeile); color: var(--text); }
.g-fuss { margin: 28px 0 0; font-size: var(--s-neben); color: var(--text-leise); }
.g-fuss a, .g-fuss summary { font-weight: 600; color: var(--aktion); }
.g-fuss details > summary { display: inline; cursor: pointer; list-style: none; }
.g-fuss details > summary::-webkit-details-marker { display: none; }
.g-abzeichen { margin-left: 8px; font-size: var(--s-neben); font-weight: 600; color: var(--teils); border: 1px solid var(--teils-rahmen); border-radius: var(--radius-chip); padding: 1px 8px; white-space: nowrap; }
.g-leer { font-size: var(--s-text); color: var(--text-leise); }
.g-text { font-size: var(--s-text); line-height: var(--zeile); color: var(--text-leise); }
.g-text strong { font-weight: 600; color: var(--text); }
.momentaufnahme-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 4px; }

@media (max-width: 760px) {
  .g-haupt { padding: 20px 16px 48px; }
  .g-kopf { padding: 0 16px; }
  .g-leiste { max-width: none; border-right: 0; border-bottom: 1px solid var(--rand); }
  .g-leiste-innen { position: static; min-height: 0; max-height: none; padding: 16px 8px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .g-leiste-name, .g-fragen-feld { flex: 1 1 100%; }
  .g-leiste-titel { display: none; }
  .g-leiste-gruppe ul { flex-direction: row; flex-wrap: wrap; }
  .g-leiste-fuss { flex: 1 1 100%; margin-top: 8px; }
  .g-box { padding: 16px 16px 8px; }
}
/* Formulare im Gerüst (Anmeldung, Einstellungen, Angaben zum Dokument) */
.g-formular { max-width: 640px; }
.g-formular.schmal { max-width: 380px; }
.g-formular form { display: flex; flex-direction: column; gap: 8px; }
.g-formular label { font-size: var(--s-neben); font-weight: 600; margin-top: 12px; }
.g-formular .g-knopf { align-self: flex-start; margin-top: 20px; }
/* Fragenliste (Fragen-v3): Spaltenbreiten wie die Vorlage */
.fragen-tabelle { min-width: 820px; }
.fragen-tabelle .sp-nr { width: 70px; }
.fragen-tabelle .sp-thema { width: 190px; }
.fragen-tabelle .sp-erfuellt { width: 150px; }
/* Frage → Antwort (Antwort-v3): Erfüllt? als vier Knöpfe, Feld mit Werkzeugleiste, Quelle/Status */
.g-antwort .g-text { margin: 0; }
.g-erfuellt-wahl { margin: 28px 0 0; padding: 0; border: 0; }
.g-erfuellt-wahl legend, .g-feld-titel { display: block; padding: 0; font-size: var(--s-text); font-weight: 600; color: var(--text); }
.g-erfuellt-wahl .ls-knoepfe { margin-top: 12px; gap: 8px; }
.g-antwort .ls-kn { height: 40px; display: inline-flex; align-items: center; padding: 0 20px; border-color: var(--rand-stark); border-radius: var(--radius); color: var(--text); }
.g-antwort .ls-kn:has(input:checked) { border-color: var(--aktion); background: var(--aktion-hell); color: var(--aktion-dunkel); font-weight: 600; }
.g-feld-titel { margin-top: 28px; }
.g-antwort .ls-feld-rahmen { margin: 12px 0 0; border: 1px solid var(--rand-stark); border-radius: var(--radius-lese-feld); overflow: hidden; }
.g-antwort .ls-feld-rahmen .md-leiste { position: static; opacity: 1; padding: 8px 8px; border-bottom: 1px solid var(--rand); background: var(--fuss-flaeche); }
.g-antwort textarea.ls-feld, .g-antwort .ls-feld-ansicht { border: 0; border-radius: 0; padding: 16px 16px; }
.g-antwort textarea.ls-feld:focus-visible { outline-offset: -2px; }
.g-auswahl-zeile { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.g-auswahl-zeile > div { display: flex; align-items: center; gap: 8px; }
.g-auswahl-zeile label { font-size: var(--s-neben); color: var(--text-leise); }
.g-auswahl-zeile select { height: 36px; width: auto; padding: 0 12px; border: 1px solid var(--rand-stark); border-radius: var(--radius); background: var(--flaeche); font: inherit; font-size: var(--s-text); color: var(--text); }
/* Handyansicht (Nachtauftrag 2, Teil 7): lange Optionen machen die Seite nicht breiter */
.g-auswahl-zeile > div { max-width: 100%; min-width: 0; }
.g-auswahl-zeile select { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.g-abschnitt { margin: 28px 0 12px; font-size: var(--s-lese); font-weight: 600; }
.g-inhalt > .g-abschnitt:first-child, .g-inhalt > section:first-child > .g-abschnitt:first-child { margin-top: 0; }
/* KI-Vorschlag (KIVorschlag-v3): Fusszeile mit «Wie die KI darauf kommt» zum Aufklappen */
.g-fuss-klapp > summary { list-style: none; cursor: pointer; }
.g-fuss-klapp > summary::-webkit-details-marker { display: none; }
.g-fuss-klapp .g-fuss-text { font-weight: 400; color: var(--text-leise); }
.g-fuss-klapp .g-link { font-weight: 600; color: var(--aktion); }
.g-fuss-klapp > summary:hover .g-link { color: var(--aktion-dunkel); text-decoration: underline; text-underline-offset: 3px; }
.g-fuss-klapp[open] > .ls-begruendung { margin-top: 16px; color: var(--text); }
.g-inhalt > .ki-ergebnis, .g-inhalt > .ki-status, .g-inhalt > .fehlt-karte { margin: 0 0 24px; }
.g-antwort .ls-feld-rahmen.formatiert .md-leiste { display: flex; }
.g-antwort .ls-feld-ansicht { min-height: 168px; }
.g-auswahl-zeile label { margin: 0; font-weight: 400; }
/* Dokumente (Dokumente-v3): Spaltenbreiten wie die Vorlage */
.dokumente-tabelle .g-tabelle { min-width: 780px; }
.dokumente-tabelle .sp-typ { width: 150px; }
.dokumente-tabelle .sp-datum { width: 130px; }
.dokumente-tabelle .sp-alter { width: 230px; }
.dokumente-tabelle .sp-gelesen { width: 150px; }
.dokumente-tabelle td { padding-top: 12px; padding-bottom: 12px; }
.g-knopfzeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 20px; }
.g-knopfzeile form { display: inline-flex; margin: 0; }
.g-hinweis form { display: inline; margin: 0; }
/* Alle Aussagen (Aussagen-v3) */
.g-filter + .g-tabelle-rahmen { margin-top: 16px; }
.aussagen-tabelle .g-tabelle { min-width: 820px; }
.aussagen-tabelle .sp-nr { width: 110px; }
.aussagen-tabelle .sp-art { width: 190px; }
.aussagen-tabelle .sp-frage { width: 150px; }
.aussagen-tabelle .sp-seite { width: 110px; }
.g-box-fuss a, .g-mehr a, .g-text a, .g-leer a, .g-hinweis a { text-decoration: none; }

/* === «MySRA etwas fragen» (Schritt 6c): Feld, Dialog, Antwortseite ======================== */
.g-fragen-feld { display: flex; align-items: center; gap: 8px; margin: 0 12px 20px; height: 38px; padding: 0 12px;
  border: 1px solid var(--rand-stark); border-radius: var(--radius); background: var(--flaeche);
  font-size: var(--s-neben); color: var(--text-schwach); white-space: nowrap; overflow: hidden; }
.g-fragen-feld svg { color: var(--aktion); }
.g-fragen-feld:hover { border-color: var(--aktion); color: var(--text-leise); }
.g-fragen-feld.aktiv { border: 1.5px solid var(--aktion); }
.g-dialog { width: calc(100% - 32px); max-width: 680px; margin: 96px auto auto; padding: 24px 24px 20px; border: 0;
  border-radius: var(--radius-dialog); background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-dialog); }
.g-dialog::backdrop { background: var(--abdunkeln); }
.g-dialog-titel { margin: 0; font-size: var(--s-lese); font-weight: 600; }
.g-dialog-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.g-dialog-link { font-size: var(--s-neben); font-weight: 600; color: var(--aktion); white-space: nowrap; }
.g-dialog-text { margin: 8px 0 0; font-size: var(--s-text); color: var(--text-leise); }
.g-frage-form textarea { display: block; width: 100%; margin-top: 16px; padding: 16px 16px; border: 1.5px solid var(--aktion);
  border-radius: var(--radius-lese-feld); font: inherit; font-size: var(--s-text); line-height: var(--zeile); color: var(--text); resize: vertical;
  min-height: 140px; max-height: 50vh; }
.g-frage-form textarea:focus-visible { outline: 2px solid var(--aktion); outline-offset: 1px; }
.g-dialog-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.g-dialog-hilfe { font-size: var(--s-neben); color: var(--text-schwach); }
.g-titel-zwei-zeilen { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-voller-text { margin-top: 8px; font-size: var(--s-neben); color: var(--text-leise); }
.g-voller-text > summary { cursor: pointer; color: var(--aktion); font-weight: 600; }
.g-voller-text > p { margin: 8px 0 0; max-width: 760px; line-height: var(--zeile); }
.g-zeile-link { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 12px 0;
  border-bottom: 1px solid var(--rand); color: var(--text); font-size: var(--s-text); line-height: var(--zeile-lese); }
.g-zeile-link:last-of-type { border-bottom: 0; }
.g-zeile-link:hover > span:first-child { color: var(--aktion-dunkel); }
.g-seite-ref.warn { color: var(--teils); }
.g-frage-status { margin-top: 0; }
.g-frage-status form { margin-left: auto; }
.frueher-tabelle .g-tabelle { min-width: 720px; table-layout: fixed; }
.frueher-tabelle .sp-datum { width: 140px; }
.frueher-tabelle a[aria-current="page"] { font-weight: 600; }
.g-zeile-link > span:first-child { min-width: 0; overflow-wrap: anywhere; }
/* Belegpflicht (Seitengerüst 1.3): Zitat unter der Stütze, «nicht belegt» hinter dem Satz */
.g-stuetze { padding: 12px 0; border-bottom: 1px solid var(--rand); }
.g-stuetze:last-of-type { border-bottom: 0; }
.g-stuetze > .g-zeile-link { padding: 0; border-bottom: 0; }
.g-zitat { margin-top: 8px; padding: 12px 12px; background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); font-size: var(--s-text); line-height: var(--zeile-lese); overflow-wrap: anywhere; }
.g-zitat-fuss { margin-top: 8px; font-size: var(--s-neben); color: var(--text-leise); }
.g-nicht-belegt { font-size: var(--s-neben); font-weight: 400; color: var(--teils); white-space: nowrap; }
@media (max-width: 760px) {
  .g-zeile-link { flex-wrap: wrap; gap: 4px 18px; }
  .g-zeile-link .g-seite-ref { white-space: normal; }
}
.beleg-zitat { max-width: 760px; }

/* --- Schritt 7a: Bedienelemente nach Bedienelemente-v6.html (Seitengerüst 1.5) ------------- */
/* «Erfüllt?» – Schiebeschalter mit vier Stellungen; Lage des Schiebers setzt mysra.js */
.g-schalter-titel { font-size: var(--s-text); font-weight: 600; }
.g-schalter { position: relative; display: grid; grid-template-columns: repeat(4, 136px); width: max-content; max-width: 100%; margin-top: 12px; padding: 4px; background: var(--rand); border-radius: var(--radius-karte); touch-action: none; user-select: none; }
.g-schalter-schieber { position: absolute; top: 4px; left: 4px; width: 136px; height: 40px; border-radius: var(--radius-lese); box-sizing: border-box; border: 1px solid transparent; box-shadow: var(--schatten-schieber); transition: left 240ms cubic-bezier(.2, .8, .2, 1), width 240ms cubic-bezier(.2, .8, .2, 1), background 240ms, border-color 240ms; }
.g-schalter-schieber[hidden] { display: none; }
.g-schalter [role="radio"] { position: relative; z-index: 1; height: 40px; padding: 0 8px; border: 0; background: transparent; font: inherit; font-size: var(--s-text); font-weight: 600; color: var(--text-leise); cursor: pointer; white-space: nowrap; transition: color 240ms; }
.g-schalter [role="radio"]:focus-visible { outline: 2px solid var(--aktion); outline-offset: 2px; border-radius: var(--radius-lese); }
.g-schalter [aria-checked="true"] { font-weight: 600; }
.g-schalter[data-wert="ja"] .g-schalter-schieber { background: var(--gut-flaeche); border-color: var(--gut); }
.g-schalter[data-wert="teilweise"] .g-schalter-schieber { background: var(--teils-flaeche); border-color: var(--teils); }
.g-schalter[data-wert="nein"] .g-schalter-schieber { background: var(--schlecht-flaeche); border-color: var(--schlecht); }
.g-schalter[data-wert="na"] .g-schalter-schieber { background: var(--flaeche); border-color: var(--na-rand); }
.g-schalter[data-wert="ja"] [aria-checked="true"] { color: var(--gut); }
.g-schalter[data-wert="teilweise"] [aria-checked="true"] { color: var(--teils); }
.g-schalter[data-wert="nein"] [aria-checked="true"] { color: var(--schlecht); }
.g-schalter[data-wert="na"] [aria-checked="true"] { color: var(--text); }
/* «Trifft zu?» (Ja bedeutet ein Risiko): Farben von Ja und Nein vertauscht */
.g-erfuellt-wahl.umgekehrt .g-schalter[data-wert="ja"] .g-schalter-schieber { background: var(--schlecht-flaeche); border-color: var(--schlecht); }
.g-erfuellt-wahl.umgekehrt .g-schalter[data-wert="nein"] .g-schalter-schieber { background: var(--gut-flaeche); border-color: var(--gut); }
.g-erfuellt-wahl.umgekehrt .g-schalter[data-wert="ja"] [aria-checked="true"] { color: var(--schlecht); }
.g-erfuellt-wahl.umgekehrt .g-schalter[data-wert="nein"] [aria-checked="true"] { color: var(--gut); }
@media (max-width: 640px) {
  .g-schalter { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .g-schalter [role="radio"] { padding: 0 4px; font-size: var(--s-neben); }
  /* Qualitätsrunde B1: lange Wörter («Nicht offengelegt») brechen um statt hinauszuragen */
  .g-schalter [role="radio"] { height: 48px; white-space: normal; line-height: var(--zeile); overflow-wrap: anywhere; }
  .g-schalter-schieber { height: 48px; }
}

/* Confidence: fünf Kreise (Token --confidence), Wort daneben */
.kreise { display: block; flex: none; }
.kr-v { fill: var(--conf); stroke: var(--conf); }
.kr-l { fill: var(--flaeche); stroke: var(--conf); }
path.kr-v { stroke: none; }
.g-conf { margin-top: 28px; padding: 20px 24px 20px; }
.g-conf-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.g-conf-titel { font-size: var(--s-lese); font-weight: 600; }
.g-conf-kopf a { font-size: var(--s-neben); font-weight: 600; text-decoration: none; }
.g-conf-wahl { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.g-conf-kreise { display: inline-flex; border-radius: var(--radius); cursor: pointer; }
.g-conf-kreise:focus-visible { outline: 2px solid var(--aktion); outline-offset: 4px; }
.g-conf-wort { font-size: var(--s-text); font-weight: 600; color: var(--conf-text); }
.g-conf-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; font-size: var(--s-neben); color: var(--text-leise); }
.g-conf-zeile .g-textknopf { font-weight: 600; }
.g-conf-ki { margin-top: 8px; font-size: var(--s-neben); line-height: var(--zeile); color: var(--text-leise); }
.g-conf-wahl + .g-conf-ki { margin-top: 12px; }
.g-conf label { display: block; margin-top: 16px; font-size: var(--s-text); font-weight: 600; }
.g-conf textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 12px 16px; border: 1px solid var(--rand-stark); border-radius: var(--radius); background: var(--flaeche); font: inherit; font-size: var(--s-text); line-height: var(--zeile); color: var(--text); resize: vertical; }
.g-conf .g-hinweis { margin-top: 16px; }
.g-conf-status { margin: 12px 0 0; font-size: var(--s-neben); color: var(--text-leise); }
.g-conf .fehler { margin-top: 12px; }

/* «Wie gut ist die Antwort?» – drei gleichwertige Prüfpunkte */
.g-pp { padding-bottom: 8px; }
.g-pp-zeile { border-bottom: 1px solid var(--rand); }
.g-pp-zeile:last-of-type { border-bottom: 0; }
.g-pp-zeile > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.g-pp-zeile > summary::-webkit-details-marker { display: none; }
.g-pp-punkt { flex: none; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; background: var(--flaeche); border: 2px solid var(--kreis-leer); color: var(--flaeche); }
.g-pp-punkt.ja { background: var(--gut); border-color: var(--gut); }
.g-pp-text { flex: 1 1 auto; min-width: 0; }
.g-pp-titel { display: block; font-size: var(--s-text); }
.g-pp-hilfe { display: block; margin-top: 1px; font-size: var(--s-neben); color: var(--text-leise); }
.g-pp-mod { flex: none; font-size: var(--s-neben); color: var(--text-leise); white-space: nowrap; }
.g-pp-grund, .g-pp-feld, .g-pp-aktion { margin: 0 0 12px 36px; font-size: var(--s-text); line-height: var(--zeile); }
.g-pp-aktion { margin-bottom: 16px; }
.g-pp-feld label, .g-treppe-feld label { display: block; font-size: var(--s-neben); font-weight: 600; }
.g-pp-feld textarea, .g-treppe-feld textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 12px 12px; border: 1px solid var(--rand-stark); border-radius: var(--radius); font: inherit; font-size: var(--s-text); line-height: var(--zeile); resize: vertical; background: var(--flaeche); color: var(--text); }
.g-knopf.klein { height: var(--knopf-klein); padding: 0 12px; font-size: var(--s-text); }

/* «Wie stark ist der Beleg?» – Treppe nach der Swisscom-Skala (gleich stark = gleich hoch) */
.g-treppe-box { padding-bottom: 20px; }
.g-treppe { display: flex; align-items: flex-end; gap: 4px; margin-top: 16px; height: 118px; }
.g-treppe button { flex: 1 1 0; min-width: 0; border-radius: 8px 8px 3px 3px; box-sizing: border-box; padding: 8px 0 0; display: flex; align-items: flex-start; justify-content: center; cursor: pointer; color: var(--flaeche); transition: background 200ms, box-shadow 200ms; }
.g-treppe .hat { background: var(--conf); border: 2px solid var(--conf); }
.g-treppe .fehlt { background: var(--flaeche); border: 2px dashed var(--treppe-leer); }
.g-treppe .gewaehlt { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--aktion); }
.g-treppe button:focus-visible { outline: 2px solid var(--aktion); outline-offset: 4px; }
.g-treppe .h34 { height: 34px; } .g-treppe .h62 { height: 62px; } .g-treppe .h90 { height: 90px; } .g-treppe .h118 { height: 118px; }
.g-treppe-woerter { display: flex; gap: 4px; margin-top: 8px; }
.g-treppe-woerter div { flex: 1 1 0; min-width: 0; font-size: var(--s-neben); line-height: var(--zeile); text-align: center; color: var(--text-leise); hyphens: manual; }
@media (max-width: 640px) { .g-treppe-woerter div { font-size: var(--s-neben); } }  /* Beschriftung der Stufen wie Spaltenköpfe */
.g-treppe-woerter .stark { color: var(--text); font-weight: 600; }
.g-treppe-achse { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--s-neben); color: var(--text-leise); }
.g-treppe-achse span:nth-child(2) { flex: 1 1 auto; height: 1px; background: var(--kreis-leer); }
.g-treppe-detail { margin-top: 16px; padding: 16px 16px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-lese-feld); }
.g-treppe-detail-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.g-treppe-detail-wort { font-size: var(--s-text); font-weight: 600; }
.g-treppe-staerkste { font-size: var(--s-neben); font-weight: 600; color: var(--conf-text); white-space: nowrap; }
.g-treppe-art { margin-top: 2px; font-size: var(--s-neben); color: var(--text-leise); }
.g-treppe-text { margin-top: 12px; font-size: var(--s-text); line-height: var(--zeile); }
.g-treppe-feld { margin-top: 12px; }
.g-treppe-detail form + form, .g-treppe-detail .g-knopf { margin-top: 12px; }

/* Transparenztabelle und Risk Item (Transparenz-v6, RisikoItem-v6) */
.g-transparenz { min-width: 1000px; table-layout: fixed; }
.g-transparenz th, .g-transparenz td { box-sizing: border-box; }
.g-transparenz th[scope="rowgroup"] { text-transform: none; letter-spacing: 0; vertical-align: top; padding: 12px 28px 12px 0; font-size: var(--s-text); font-weight: 600; color: var(--text); white-space: normal; }
.g-transparenz td { vertical-align: middle; border-bottom-color: var(--linie-leise); }
.g-transparenz tr.ende td, .g-transparenz th[scope="rowgroup"] { border-bottom: 1px solid var(--rand); }
.g-transparenz .ri-link { font-weight: 600; text-decoration: none; white-space: nowrap; }
.g-transparenz .grund { color: var(--text-leise); font-size: var(--s-neben); }
.g-transparenz .legal { font-size: var(--s-text); }
.g-ri-kreise { margin-top: 0; }
.g-ri-kreise + .g-urteil { margin-top: 16px; }
.g-ri-frage > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 32px; padding: 12px 0; }  /* Kreise → Text 32 px wie im Dashboard (Nachtauftrag 3, Teil 4) */
.g-ri-frage > summary::-webkit-details-marker { display: none; }
.g-ri-frage { border-bottom: 1px solid var(--rand); }
.g-ri-text { flex: 1 1 auto; min-width: 0; }
.g-ri-begruendung { display: block; font-size: var(--s-text); }
.g-ri-frage-en { display: block; margin-top: 2px; font-size: var(--s-neben); color: var(--text-leise); }
.g-ri-mod { flex: none; font-size: var(--s-neben); color: var(--text-leise); white-space: nowrap; }
.g-ri-mehr { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 12px; font-size: var(--s-neben); color: var(--text-leise); }
.g-ri-oeffnen { margin: 0 0 16px; font-size: var(--s-neben); }
.g-ri-oeffnen a { font-weight: 600; text-decoration: none; }
.g-leise-zeile { color: var(--text-leise); font-size: var(--s-neben); }
@media (prefers-reduced-motion: reduce) {
  .g-schalter-schieber, .g-schalter [role="radio"], .g-treppe button { transition: none; }
}
.g-hinweis.g-hinweis-oben { margin: 0 0 20px; }
/* Transparenztabelle: Wort der Skala neben den Kreisen (Seitengerüst 1.6, Lesbarkeit Regel 12) */
/* Spalte Confidence (Entscheid 06.11.2026): Spannlinie über den Kreisen, daneben der Durchschnitt */
/* Gemeinsame Mittelachse (Stil A, Sammelrunde C5): Spannlinie 8 px + 4 px Abstand · Kreise 16 px · 12 px
   Ausgleich darunter – die Mitte der Kreise liegt auf der Zeilenmitte; die Zahl steht mittig dazu */
.g-tt-conf { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; vertical-align: middle; }
.g-tt-skala { display: inline-flex; flex-direction: column; gap: 4px; padding-bottom: 12px; }
.g-tt-skala > svg { display: block; }
.spannlinie { display: block; overflow: visible; }
.sp-rot { stop-color: var(--swisscom-rot); }
.sp-mitte { stop-color: var(--verlauf-mitte); }
.sp-gut { stop-color: var(--conf); }
.g-tt-zahl { font-size: var(--s-text); font-weight: 400; line-height: 16px; color: var(--conf-text); font-variant-numeric: tabular-nums; }
/* Spalten (Qualitätsprüfung 06.11.2026): «Wichtigster Grund» mindestens 40 %, «Risk Item» nur so
   breit wie nötig (darf umbrechen), Confidence ohne Umbruch */
/* Spaltenköpfe ohne Umbruch (nur «Data Governance Risk Type» darf zweizeilig sein); alle Köpfe
   unten ausgerichtet, damit ein- und zweizeilige auf einer Linie enden (Auftrag 7b, Teil 0) */
.g-transparenz thead th { white-space: nowrap; vertical-align: bottom; }
.g-transparenz thead th.tt-typ { white-space: normal; }
.g-transparenz .tt-typ { width: 172px; }
.g-transparenz .tt-id { width: 72px; }
.g-transparenz .tt-item { width: 328px; }
.g-transparenz .tt-conf { width: 180px; }
/* Nachtauftrag 3, Teil 4: Risk Item → Confidence und Confidence → Grund je 32 px; die
   Confidence-Spalte fasst Kreise und Zahl (148 px), damit die Zahl nie an den Grund rückt */
.g-transparenz th.tt-item, .g-transparenz th.tt-conf,
.g-transparenz td.haupt, .g-transparenz td.l2 { padding-right: 32px; }
.g-transparenz .tt-grund { width: auto; }
.g-transparenz .ri-link { white-space: normal; }
.g-transparenz .legal { white-space: nowrap; }
.g-pp-knopf { margin-top: 8px; }
/* Handyansicht (Nachtauftrag 2, Teil 7): lieber umbrechen als abgeschnitten */
@media (max-width: 480px) {
  .g-pp-knopf .g-knopf { max-width: 100%; height: auto; min-height: var(--knopf-klein); padding-top: 4px; padding-bottom: 4px; white-space: normal; text-align: left; }
}
.ls-begruendung { overflow-wrap: anywhere; }

/* Dokument öffnen (Seitengerüst 1.7): Knopf rechts am Rand, darunter der kleine Link zur heutigen Seite */
.g-oeffnen { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.g-oeffnen-heute { font-size: var(--s-neben); color: var(--aktion); }
.befund-dokumente { list-style: none; margin: 4px 0 12px; padding: 0; }
/* Analyse: «Seite N ↗» neben der aufklappbaren Zeile (kein Link im summary, axe nested-interactive) */
.g-klapp-zeile { position: relative; border-bottom: 1px solid var(--rand); }
.g-klapp-zeile:last-of-type { border-bottom: 0; }
.g-klapp-zeile > .g-klapp { border-bottom: 0; }
.g-klapp-zeile.mit-link > .g-klapp > summary { padding-right: 96px; }
.g-seite-link { position: absolute; top: 12px; right: 0; display: inline-flex; align-items: center; min-height: 24px; color: var(--aktion); }
/* Mehrere Seiten: jede Seite ein eigener Link (Vertrauensrunde D4) */
.g-klapp-zeile.mit-links > .g-klapp > summary { padding-right: 168px; }
.g-seite-links { position: absolute; top: 15px; right: 0; }
.g-seite-links .g-seite-link { position: static; }

/* Klickflächen mindestens 24 px (WCAG 2.2, 2.5.8): Klappen und Links in Listen der KI-Läufe */
summary { min-height: 24px; }
.ki-karte li > div > a, .ki-karte li > a { display: inline-flex; align-items: center; min-height: 24px; }

/* === Findings (Schritt 7b, Findings-v1.html und Finding-v1.html, Bausteine von Stil A) ======= */
.findings-tabelle { table-layout: fixed; min-width: 1000px; }  /* Beschreibung mind. 280 px (Handyansicht, Nachtauftrag 2) */
.findings-tabelle .sp-finding { width: 170px; }
.findings-tabelle .sp-fragen { width: 150px; }
.findings-tabelle .sp-risk { width: 110px; }
.findings-tabelle .sp-wer { width: 160px; }
.findings-tabelle .sp-bericht { width: 128px; }
.findings-tabelle td.neben { font-size: var(--s-neben); color: var(--text-leise); font-variant-numeric: tabular-nums; }
.findings-tabelle .finding-link { font-weight: 600; overflow-wrap: anywhere; }
.menue-inhalt form { margin: 0; }
.menue-knopf { display: block; width: 100%; min-height: 32px; padding: 8px 12px; border-radius: var(--radius); text-align: left; font-size: var(--s-text); color: var(--text); }
.menue-knopf:hover { background: var(--zeile-hover); color: var(--text); text-decoration: none; }
details.menue > summary.g-knopf { cursor: pointer; }
.g-empfehlung { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.g-empfehlung form { flex: none; margin: 0; }
/* Status rechts als farbiges Wort wie in Finding-v1 (offen orange, erledigt grün), klickbar */
.g-status-knopf { min-height: 24px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--s-neben); font-weight: 600; color: var(--teils); cursor: pointer; white-space: nowrap; }
.g-status-knopf.erledigt { color: var(--gut); }
.g-status-knopf:hover { text-decoration: underline; text-underline-offset: 3px; }
.g-finding-frage > span { display: flex; flex-direction: column; gap: 4px; }
.g-finding-frage-id { font-size: var(--s-neben); color: var(--text-leise); font-variant-numeric: tabular-nums; }
.g-finding-frage-text { color: var(--text); }
.finding-zusammen { flex-direction: column; align-items: stretch; }
.finding-zusammen p { margin-top: 8px; }
.finding-zusammen select { flex: 1 1 200px; min-width: 0; max-width: 100%; }
.finding-zusammen > *, .finding-zusammen form { min-width: 0; max-width: 100%; }
.finding-bearbeiten { margin-top: 16px; max-width: 760px; }
.finding-bearbeiten form + form { margin-top: 16px; }
.finding-bearbeiten .g-aktionen { margin-top: 12px; }

/* === Rückfrage vor dem Start eines Stapels (Ort-Rueckfrage-v1, Auftrag Stapelorte) ========= */
.g-rueckfrage { width: calc(100% - 32px); max-width: 480px; box-sizing: border-box; padding: 24px; border: 0;
  border-radius: var(--radius-karte); background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-dialog); }
.g-rueckfrage::backdrop { background: var(--abdunkeln); }
.g-rueckfrage-titel { margin: 0; font-size: var(--s-lese); line-height: 24px; font-weight: 600; }
.g-rueckfrage-text { margin: 8px 0 0; font-size: var(--s-text); line-height: var(--zeile-lese); }
.g-rueckfrage-grau { margin: 12px 0 0; font-size: var(--s-neben); line-height: var(--zeile); color: var(--text-leise); }
.g-rueckfrage-fuss { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* Risiko-Dashboard: Zahl grau, solange ein Vote dieses Risk Items nicht aktuell ist */
.g-tt-zahl.veraltet { color: var(--text-leise); }

/* --- Management Summary (Auftrag 07.11.2026, Vorlage MS-Seite-v1.html) ------------------------ */
.g-ms-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a4); }
.g-ms-kopf > h2 { margin: 0; font-size: var(--s-lese); line-height: var(--a6); font-weight: 600; }
.g-ms-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a4); }
.g-ms-links form { display: inline; margin: 0; }
.g-ms-links a, .g-ms-links .g-textknopf, .g-ms-kopf > .g-textknopf { font-size: var(--s-neben); line-height: var(--zeile); color: var(--aktion); text-decoration: none; white-space: nowrap; }
.g-ms-grau { font-size: var(--s-neben); line-height: var(--zeile); color: var(--text-leise); }
.g-box > p.g-ms-grau { margin: var(--a1) 0 var(--a2); }
.g-ms-tafel { margin: var(--a2) 0 var(--a2); padding: var(--a1) var(--a4); background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); list-style: none; }
.g-ms-zeile { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--a4); padding: var(--a3) 0; font-size: var(--s-text); line-height: var(--zeile-lese); }
.g-ms-zeile + .g-ms-zeile { border-top: 1px solid var(--rand); }
.g-ms-name { font-weight: 600; }
.g-ms-zeile label { font-size: var(--s-text); font-weight: 600; padding-top: var(--a2); }
.g-ms-zeile textarea { width: 100%; }
.g-ms-fuss { display: flex; justify-content: flex-end; gap: var(--a2); margin: var(--a3) 0 var(--a2); }
.g-ms-leer { display: flex; flex-wrap: wrap; gap: var(--a2); padding: var(--a3) var(--a4); font-size: var(--s-text); line-height: var(--zeile-lese); }
.g-ms-leer a { color: var(--aktion); font-weight: 600; text-decoration: none; }
.g-ms-folien li { display: grid; grid-template-columns: 32px 200px minmax(0, 1fr); gap: var(--a3); align-items: baseline; margin: 0; padding: var(--a2) 0; line-height: var(--zeile); }
.g-ms-folien li + li { border-top: 1px solid var(--rand); }
.g-ms-folien .g-ms-name { font-size: var(--s-text); font-weight: 600; }
.g-ms-nr { font-size: var(--s-neben); color: var(--text-leise); font-variant-numeric: tabular-nums; }
.g-ms-felder { margin: var(--a3) 0 var(--a2); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a4); }
.g-ms-felder label { display: flex; flex-direction: column; gap: var(--a2); font-size: var(--s-neben); font-weight: 600; }
@media (max-width: 640px) {
  .g-ms-zeile { grid-template-columns: 1fr; gap: var(--a1); }
  .g-ms-folien li { grid-template-columns: 24px minmax(0, 1fr); }
  .g-ms-folien li .g-ms-grau { grid-column: 2; }
  .g-ms-felder { grid-template-columns: 1fr; }
}

/* --- Startseite «ruhig» (Auftrag Startseite v2 08.11.2026, Vorlage Start-v2.html) ------------ */
.g-breite.start { max-width: 760px; }
.g-start { padding-top: 44px; }  /* mit .g-haupt (28) und .g-inhalt (24) 96 px unter der Kopfzeile wie die Vorlage */
.g-start-titel { margin: 0; font-size: var(--s-satz); line-height: 32px; font-weight: 600; letter-spacing: -0.02em; }
.g-start-satz { margin: var(--a2) 0 0; font-size: var(--s-text); line-height: var(--zeile); color: var(--text-leise); }
.g-start-form { margin-top: var(--a6); display: flex; gap: var(--a2); }
.g-start-feld { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; align-items: center; gap: var(--a3); height: 48px; padding: 0 var(--a4); border: 1px solid var(--rand-stark); border-radius: var(--radius); box-sizing: border-box; color: var(--text-leise); background: var(--flaeche); }
.g-start-feld:focus-within { outline: 2px solid var(--aktion); outline-offset: 1px; }
.g-start-feld.fehler { border-color: var(--schlecht); }
.g-start-feld svg { flex: none; }
.g-start-feld input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0; border: 0; outline: 0; font: inherit; font-size: var(--s-text); color: var(--text); background: transparent; text-overflow: ellipsis; }
.g-start-feld input::placeholder { color: var(--text-schwach); opacity: 1; }
.g-start-form .g-knopf.haupt { height: 48px; padding: 0 var(--a6); }
.g-start-fehler { margin: var(--a2) 0 0; font-size: var(--s-neben); color: var(--schlecht); }
.g-start-liste-kopf { margin: 96px 0 0; font-size: var(--s-lese); line-height: var(--a6); font-weight: 600; }
.g-start-liste-kopf.archiv { margin-top: var(--a10); }
.g-start-leer { margin-top: var(--a3); }
/* Tabelle «Deine Assessments»: Spalten wie die Vorlage, ganze Zeile klickbar (Link über die Zeile gestreckt) */
.g-start-tabelle, .g-start-archiv { margin-top: var(--a3); table-layout: fixed; }
.g-start-tabelle th, .g-start-archiv th { border-bottom: 0; padding-bottom: var(--a2); }
.g-start-tabelle td, .g-start-archiv td { padding-top: var(--a4); padding-bottom: var(--a4); border-bottom: 0; border-top: 1px solid var(--rand); white-space: nowrap; }
.g-start-tabelle .sp-dienst { width: 40%; }
.g-start-tabelle .sp-stand { width: 18%; }
.g-start-tabelle .sp-conf { width: 26%; }
.g-start-tabelle .sp-findings { width: 16%; }
.g-start-tabelle .sp-pfeil { width: 16px; }
.g-start-archiv .sp-dienst { width: 50%; }
.g-start-archiv .sp-aktion { width: 140px; }
.g-start-tabelle td.dienst, .g-start-archiv td.dienst { overflow: hidden; text-overflow: ellipsis; }
.g-start-tabelle .anbieter, .g-start-archiv .anbieter { color: var(--text-leise); }
.g-start-tabelle td.leise { font-size: var(--s-neben); }
.g-start-tabelle tr { position: relative; }
.g-start-tabelle tbody tr:hover td { background: var(--bg); }
.g-start-tabelle .titel-link::after { content: ""; position: absolute; inset: 0 calc(-1 * var(--a2)); border-radius: var(--radius); }  /* Fokusrahmen 8 px neben dem Text */
.g-start-tabelle .titel-link:focus-visible { outline: 0; }
.g-start-tabelle .titel-link:focus-visible::after { outline: 2px solid var(--aktion); outline-offset: 0; }
.g-start-tabelle tbody tr:hover .titel-link { color: var(--aktion); }
.g-start-tabelle td.pfeil { line-height: 0; text-align: right; color: var(--text-schwach); }
.g-start-conf { display: inline-flex; align-items: center; gap: var(--a2); vertical-align: middle; }
.g-start-conf-zahl { font-size: var(--s-neben); color: var(--conf-text); font-variant-numeric: tabular-nums; }
.g-start-archiv-link { margin: var(--a4) 0 0; font-size: var(--s-neben); }
@media (max-width: 640px) {
  .g-start { padding-top: 4px; }  /* mit .g-haupt (20) und .g-inhalt (24) 48 px wie die Vorlage */
  .g-start-form { flex-direction: column; }
  .g-start-feld { flex: none; }
  .g-start-liste-kopf { margin-top: 64px; }
  .g-start-tabelle, .g-start-tabelle tbody, .g-start-tabelle tr { display: block; }
  .g-start-tabelle thead { display: none; }
  .g-start-tabelle tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--a1) var(--a4); padding: var(--a4) 0; border-top: 1px solid var(--rand); }
  .g-start-tabelle td { display: block; padding: 0; border: 0; }
  .g-start-tabelle td.dienst, .g-start-tabelle td.stand, .g-start-tabelle td.conf { grid-column: 1; }
  .g-start-tabelle td.stand { font-size: var(--s-neben); color: var(--text-leise); }
  .g-start-tabelle td.findings { display: none; }
  .g-start-tabelle td.pfeil { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  .g-start-tabelle tbody tr:hover td { background: transparent; }
  .g-start-tabelle tbody tr:hover { background: var(--bg); }
}
.g-ki-frage { display: block; max-width: 240px; }
.g-einstellungen-fuss { margin-top: var(--a10); font-size: var(--s-neben); color: var(--text-leise); }

/* --- Finding schlank (Auftrag 08.11.2026, Vorlage Finding-v2.html): Leseseite 720 px ---------- */
.g-fd { max-width: 720px; }
.g-fd-entscheid form.g-aktionen { display: flex; gap: var(--a2); }
.g-fd-entscheid { margin-top: var(--a6); padding: var(--a4) var(--a5); border-radius: var(--radius-karte); }
/* Qualitätsrunde A1: Box «MySRA hat nachgeprüft» – Inhalt über die ganze Breite, Knöpfe darunter rechts */
.g-fd-nachpruefung { margin-top: var(--a6); padding: var(--a4) var(--a5); border-radius: var(--radius-karte); align-items: flex-end; }
.g-fd-nachpruefung > div { flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--a2); }
.g-fd-nachpruefung .g-fd-zitat { margin: 0; }
.g-fd-nachpruefung form.g-aktionen { display: flex; gap: var(--a2); margin-left: auto; }
.g-fd-frage { font-size: var(--s-lese); line-height: var(--a6); font-weight: 600; color: var(--aktion-dunkel); }
.g-fd-herkunft { font-size: var(--s-neben); line-height: var(--zeile); font-weight: 400; color: var(--aktion-dunkel); }
.g-fd-herkunft a { font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.g-fd-zeile { margin: var(--a6) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--a1) var(--a2); font-size: var(--s-text); line-height: var(--zeile); color: var(--text-leise); }
.g-fd-zeile svg { color: var(--gut); }
.g-fd-zeile > span:first-of-type { color: var(--text); font-weight: 600; }
.g-fd-zeile .g-textknopf { font-size: var(--s-text); }
.g-fd-grund { margin: var(--a3) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); font-size: var(--s-neben); color: var(--text-leise); }
.g-fd-grund input { flex: 1 1 240px; max-width: 420px; }
.g-fd-titel { margin: var(--a10) 0 var(--a2); font-size: var(--s-lese); line-height: var(--a6); font-weight: 600; }
.g-fd-text { margin: 0; font-size: var(--s-text); line-height: var(--zeile-lese); }
.g-fd-text.leise { color: var(--text-leise); }
.g-fd-zitat { margin: var(--a3) 0 0; font-size: var(--s-text); line-height: var(--zeile-lese); color: var(--text-leise); }
.g-fd-quelle { margin: var(--a1) 0 0; font-size: var(--s-neben); line-height: var(--zeile); color: var(--text-leise); }
.g-fd-quelle a { color: var(--aktion); text-decoration: underline; text-underline-offset: 3px; }
.g-fd-weitere > summary { list-style: none; }
.g-fd-liste { margin: 0; padding: 0; list-style: none; }
.g-fd-liste li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--a2); align-items: baseline; margin: 0; padding: var(--a2) 0; }
.g-fd-nr { font-size: var(--s-text); color: var(--text-leise); font-variant-numeric: tabular-nums; }
.g-fd-wer { font-size: var(--s-neben); line-height: var(--zeile); color: var(--text-leise); }
.g-fd-wer .g-textknopf { font-size: var(--s-neben); }
.g-fd-betrifft { margin: var(--a10) 0 0; font-size: var(--s-neben); line-height: var(--zeile); color: var(--text-leise); }
.g-fd-betrifft a { color: var(--aktion); text-decoration: underline; text-underline-offset: 3px; }
.g-fd ~ .g-fuss { max-width: 720px; }

/* Startseite mittig (keine Seitenleiste), wie Start-v1.html */
.g-breite.mitte { margin-left: auto; margin-right: auto; }
/* Leitfaden 1.20: «Zusammengeführt aus #… und #… · Rückgängig» unter dem Titel */
.g-fd-zusammen { margin: var(--a1) 0 0; font-size: var(--s-neben); line-height: var(--zeile); color: var(--text-leise); }
.g-fd-zusammen a { color: var(--aktion); text-decoration: underline; text-underline-offset: 3px; }
.g-fd-zusammen .g-textknopf { font-size: var(--s-neben); }
p.g-fd-zeile { display: block; }
p.g-fd-zeile a { color: var(--aktion); }

/* --- Autopilot: Startfenster (Vorlage Autopilot-Start-v1.html) -------------------------------- */
.g-ap-start { max-width: 560px; }
.g-ap-adresse { margin-top: var(--a1); overflow-wrap: anywhere; }
.g-ap-wahlen { margin: var(--a5) 0 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--a3); }
.g-ap-wahl { position: relative; display: flex; flex-direction: column; gap: var(--a1); padding: var(--a4); border: 1px solid var(--rand); border-radius: var(--radius); cursor: pointer; }
.g-ap-wahl:has(input[type=radio]:checked) { border: 2px solid var(--aktion); padding: calc(var(--a4) - 1px); }
.g-ap-wahl:has(input[type=radio]:focus-visible) { outline: 2px solid var(--aktion); outline-offset: 2px; }
.g-ap-wahl > input[type=radio] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.g-ap-wahl-titel { font-size: var(--s-text); line-height: var(--zeile); font-weight: 600; }
.g-ap-wahl-text { font-size: var(--s-text); line-height: var(--zeile-lese); }
.g-ap-wahl-grau { font-size: var(--s-neben); line-height: var(--zeile); color: var(--text-leise); }
.g-ap-grenze { position: relative; z-index: 1; margin-top: var(--a3); display: inline-flex; align-items: center; gap: var(--a2); font-size: var(--s-neben); color: var(--text-leise); }
.g-ap-grenze input { width: 64px; height: 32px; padding: 0 var(--a2); }

/* --- Autopilot: Abschlussbericht (Vorlage Autopilot-Bericht-v1.html) --------------------------- */
.g-ap-ergebnis { margin: var(--a2) 0 0; font-size: var(--s-lese); line-height: 29px; }
.g-ap-ergebnis.leise { color: var(--text-leise); }
.g-ap-ergebnis b { font-weight: 600; }
.g-ap-knoepfe { margin-top: var(--a5); }
.g-ap-titel { margin: var(--a10) 0 var(--a3); font-size: var(--s-lese); line-height: var(--a6); font-weight: 600; }
.g-ap-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rand); }
.g-ap-liste li { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--a4); padding: var(--a3) 0; border-bottom: 1px solid var(--rand); font-size: var(--s-text); line-height: var(--zeile); }
.g-ap-liste a, .g-ap-liste .g-textknopf { flex: none; color: var(--aktion); text-decoration: none; white-space: nowrap; font-size: var(--s-text); }
.g-ap-grau { font-size: var(--s-neben); line-height: var(--zeile); color: var(--text-leise); }
.g-ap-schluss { margin: var(--a10) 0 0; font-size: var(--s-neben); line-height: var(--zeile); color: var(--text-leise); }
.g-ap-schluss a { color: var(--aktion); text-decoration: underline; text-underline-offset: 3px; }
.g-fd-zusatz { color: var(--text-schwach); }

/* --- Widersprüche in den Quellen (Vorlage Widerspruch-v1.html, Auftrag Widersprüche Teil E) ------ */
.g-wid-bereich { margin-top: var(--a8); }
.g-wid-bereich > .g-abschnitt { margin: 0 0 var(--a3); line-height: var(--a6); }
.g-wid { border-top: 1px solid var(--rand); padding: var(--a4) 0; }
.g-wid-kopf { display: flex; align-items: center; gap: var(--a3); min-height: var(--a6); }
.g-wid-chip { height: var(--a6); padding: 0 var(--a3); font-weight: 600; background: var(--bg); color: var(--text-leise); border: 1px solid var(--rand); }
.g-wid-chip.offen { background: var(--teils-flaeche); color: var(--teils); border-color: var(--teils-flaeche); }
.g-wid-thema { font-size: var(--s-text); line-height: var(--zeile); font-weight: 600; }
.g-wid-paar { margin-top: var(--a3); display: grid; grid-template-columns: minmax(0, 1fr) var(--a6) minmax(0, 1fr); gap: var(--a2); align-items: stretch; }
.g-wid-zitat { border: 1px solid var(--rand); border-radius: var(--radius); padding: var(--a3) var(--a4); background: var(--flaeche); min-width: 0; }
.g-wid-quelle { font-size: var(--s-neben); line-height: var(--zeile); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.g-wid-text { margin: var(--a1) 0 0; font-size: var(--s-neben); line-height: var(--zeile); color: var(--text-leise); overflow-wrap: anywhere; }
.g-wid-zfuss { margin-top: var(--a2); font-size: var(--s-neben); line-height: var(--zeile); color: var(--text-schwach); }
.g-wid-gegen { display: flex; align-items: center; justify-content: center; color: var(--text-schwach); }
.g-wid-urteil { margin: var(--a3) 0 0; font-size: var(--s-text); line-height: var(--zeile-lese); }
.g-wid-urteil b { font-weight: 600; }
.g-wid-mensch { margin: var(--a2) 0 0; font-size: var(--s-neben); line-height: var(--zeile); color: var(--text-leise); }
.g-wid-frage { margin: var(--a2) 0 0; font-size: var(--s-neben); line-height: var(--zeile); color: var(--text-leise); }
.g-wid-frage .g-textknopf, .g-wid-frage a { font-size: var(--s-neben); }
.g-wid-fuss { margin-top: var(--a2); display: flex; gap: var(--a4); flex-wrap: wrap; align-items: flex-start; font-size: var(--s-neben); line-height: var(--zeile); color: var(--text-leise); }
.g-wid-fuss a { color: var(--text-leise); }
.g-wid-stimmt > summary { list-style: none; color: var(--text-leise); text-decoration: underline; text-underline-offset: 3px; min-height: var(--a6); display: inline-flex; align-items: center; }
.g-wid-stimmt > summary::-webkit-details-marker { display: none; }
.g-wid-stimmt[open] { flex-basis: 100%; }
.g-wid-form { margin-top: var(--a2); }
.g-wid-form textarea { width: 100%; }
.g-wid-weitere > summary { list-style: none; margin-top: var(--a3); min-height: var(--a6); display: inline-flex; align-items: center; }
.g-wid-weitere > summary::-webkit-details-marker { display: none; }
@media (max-width: 760px) {
  .g-wid-paar { grid-template-columns: minmax(0, 1fr); }
  .g-wid-gegen { transform: rotate(90deg); height: var(--a6); }
}

/* Tabelle unter 640 px (Nachtauftrag 3, Teil 2; Seitengerüst «Tabelle unter 640 px»): ein
   Baustein für alle Listen-Tabellen mit .als-liste. Jede Zeile wird ein Block (12 px oben und
   unten, im 16-px-Rand der Seite, feine Trennlinie wie bisher); Spaltenköpfe nur für Screenreader
   (Rollen und data-label bleiben). Zellen: .l0 Gruppe als Zwischenzeile (11, Versalien) · .l1
   Zeile 1 (14/500, .haupt nimmt den Rest) · .l1r rechts in Zeile 1 · .l2 Zeile 2 (13, leise,
   mit « · ») · .l3 Zeile 3 (13, leise). Inhalt unverändert. */
.nur-liste { display: none; }
@media (max-width: 639px) {
  .g-tabelle-rahmen:has(> .als-liste) { overflow-x: visible; }
  table.als-liste, .g-tabelle-rahmen .g-tabelle.als-liste { display: block; min-width: 0; table-layout: auto; }
  .als-liste > tbody { display: block; }
  .als-liste > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .als-liste > tbody > tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--rand); }
  .als-liste > tbody > tr::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .g-tabelle.als-liste > tbody > tr > th, .g-tabelle.als-liste > tbody > tr > td { display: block; width: auto; max-width: none; padding: 0; border: 0; white-space: normal; line-height: var(--zeile); }
  .als-liste .l0, .g-transparenz.als-liste th.l0[scope="rowgroup"] { order: 0; flex-basis: 100%; margin-bottom: 8px; font-size: var(--s-neben); font-weight: 400; color: var(--text-leise); }
  .als-liste .l1 { order: 1; font-size: var(--s-text); font-weight: 600; color: var(--text); }
  .als-liste .l1.haupt { flex: 1 1 0; min-width: 0; }
  .als-liste .l1 a, .als-liste .gekuerzt > a { font-weight: 600; white-space: normal; overflow: visible; }
  .als-liste .l1r { order: 1; flex: none; margin-left: auto; font-size: var(--s-neben); color: var(--text-leise); }
  .als-liste .l2 { order: 3; margin-top: 4px; font-size: var(--s-neben); color: var(--text-leise); }
  .als-liste .l2.zuletzt { order: 4; }
  .als-liste .l2 ~ .l2::before { content: "·"; margin-right: 8px; }
  .als-liste .l2:empty { display: none; }
  .als-liste .l3 { order: 5; flex-basis: 100%; margin-top: 4px; font-size: var(--s-neben); color: var(--text-leise); }
  .als-liste .g-leer { flex-basis: 100%; }
  .als-liste .nur-liste { display: inline; }
}


/* ===================================================================================== */
/* Seitengerüst 3.0 (Auftrag Redesign 11.11.2026; Vorlagen data/ux-referenz/redesign/,     */
/* Masse aus neu.css): Band · Lesespalte · rechte Spalte. Kopfzeile und Seitenleiste wie    */
/* bisher. Alles Weitere in <main> folgt diesem Abschnitt.                                 */
/* ===================================================================================== */
.g-haupt { padding: 0; display: flex; flex-direction: column; background: var(--weiss); color: var(--text); }

/* --- Band: Ort und Aktionen, Vorzeile, Satz, Fakten, Zusatz --------------------------- */
/* Swisscom-Auftritt (12.11.2026, Seitengerüst 3.1): Verlaufsbild aus marke/marke.css, sonst der
   CSS-Verlauf; Logo oben links in der Ecke, Inhalt ab 104 px (vorher 56 px) */
.g-band { position: relative; background: var(--band-verlauf); color: var(--weiss); padding: 24px 56px 28px 104px; }
.g-logo { display: block; width: auto; }
.g-band > .g-logo { position: absolute; left: 32px; top: 24px; height: 56px; }
.g-band.kurz > .g-logo { top: 50%; transform: translateY(-50%); }  /* kurzes Band: Logo und Seitenname auf einer Höhe */
.g-band-oben { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 40px; }
.g-ort { margin: 0; min-width: 0; font-size: var(--s-text); line-height: 20px; color: var(--band-leise); }
.g-ort a { color: var(--band-leise); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--band-unterstrich); }
.g-ort a:hover { color: var(--weiss); }
.g-ort b { color: var(--weiss); font-weight: 600; }
.g-band-aktionen { display: flex; flex-wrap: nowrap; gap: 8px; flex: none; align-items: center; }
.g-band-aktionen:empty { display: none; }
.g-band-aktionen form { display: inline-flex; margin: 0; }
.g-band .g-knopf { height: 40px; padding: 0 16px; border: 1px solid var(--band-umriss); border-radius: var(--radius); background: transparent;
  color: var(--weiss); font-size: var(--s-text); font-weight: 600; line-height: 20px; }
.g-band .g-knopf:hover { background: var(--band-linie); color: var(--weiss); }
.g-band .g-knopf.haupt { background: var(--weiss); border-color: var(--weiss); color: var(--band); font-weight: 600; }
.g-band .g-knopf.haupt:hover { background: var(--band-leise); border-color: var(--band-leise); color: var(--band); }
.g-band .g-knopf.symbol { width: 40px; padding: 0; }
.g-band .g-knopf svg { color: currentColor; }
.g-band :focus-visible { outline: 2px solid var(--weiss); outline-offset: 2px; }
.g-band a.g-oeffnen-heute, .g-band-aktionen a:not(.g-knopf) { color: var(--band-leise); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--band-unterstrich); }
.g-zeilen .wert a { text-decoration: underline; text-underline-offset: 2px; }
.g-vor { margin: 24px 0 0; max-width: 46em; font-size: var(--s-lese); line-height: 24px; color: var(--band-leise); }
.g-satz { margin: 24px 0 0; max-width: 27em; font-size: var(--s-satz); line-height: 40px; font-weight: 600; letter-spacing: -0.018em; color: var(--weiss); text-wrap: pretty; overflow-wrap: break-word; }
.g-vor + .g-satz { margin-top: 4px; }
.g-fakten { display: flex; flex-wrap: wrap; gap: 8px 44px; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--band-linie);
  font-size: var(--s-text); line-height: 22px; color: var(--band-leise); list-style: none; }
.g-fakten > div, .g-fakten > li { display: flex; align-items: center; gap: 12px; margin: 0; }
.g-fakten b { color: var(--weiss); font-weight: 600; }
.g-fakten a { color: var(--weiss); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--band-unterstrich); }
.g-band .g-untertitel, .g-zusatz { margin: 12px 0 0; font-size: var(--s-text); line-height: 22px; color: var(--band-leise); }
.g-band .g-untertitel a, .g-zusatz a { color: var(--weiss); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--band-unterstrich); }
.g-band .kr-v { fill: var(--conf-band); stroke: var(--conf-band); }
.g-band .kr-l { fill: none; stroke: var(--conf-band); }
/* Kurzes Band: nur Ort und Seitenname */
.g-band.kurz .g-satz { margin-top: 16px; }

/* --- Darunter: Lesespalte und rechte Spalte -------------------------------------------- */
.g-unter { display: grid; grid-template-columns: minmax(0, 1fr) var(--breite-spalte); flex: 1 1 auto; }
.g-unter.breit { grid-template-columns: minmax(0, 1fr) var(--breite-spalte-breit); }
.g-unter.allein { display: block; }
.g-lese { min-width: 0; padding: 0 40px 64px 104px; }
.g-unter.allein .g-lese { padding-right: 56px; max-width: var(--breite-allein); }
.g-spalte { background: var(--spalte); border-left: 1px solid var(--spalte-rand); padding: 28px 24px 40px; min-width: 0; }
.g-spalte h2 { margin: 0 0 12px; font-size: var(--s-neben); line-height: 20px; font-weight: 600; letter-spacing: 0; color: var(--leise); }
.g-spalte > section + section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--spalte-rand); }
.g-meldungen { margin: 20px 0 0; }

/* Reiter unter dem Band, in der Lesespalte */
.g-lese > .g-reiter, .g-lese .g-reiter { margin: 0 -40px 0 -104px; padding: 0 40px 0 104px; gap: 28px; border-bottom: 1px solid var(--linie); }
.g-unter.allein .g-lese > .g-reiter { margin-right: -56px; padding-right: 56px; }
.g-reiter a { padding: 16px 0 12px; font-size: var(--s-text); line-height: 20px; font-weight: 600; color: var(--leise); }
.g-reiter a[aria-current="page"] { color: var(--tinte); border-bottom-color: var(--tinte); font-weight: 600; }
.g-reiter-zahl { margin-left: -4px; font-size: var(--s-text); font-weight: 400; color: var(--leise); }

/* --- Abschnitt: Titel links (148 px), Inhalt rechts ------------------------------------ */
.g-teil { display: grid; grid-template-columns: 148px minmax(0, 1fr); column-gap: 32px; padding: 28px 0; border-top: 1px solid var(--linie); }
.g-teil.erster, .g-teil:first-child { border-top: 0; }
.g-teil > header h2 { margin: 0; font-size: var(--s-lese); line-height: 29px; font-weight: 600; letter-spacing: 0; color: var(--tinte); }
.g-teil > header p { margin: 0; font-size: var(--s-neben); line-height: 20px; color: var(--leise); }
.g-teil > header a, .g-teil > header .g-titel-aktion { display: inline-block; margin-top: 4px; font-size: var(--s-neben); line-height: 20px; }
.g-teil > header .g-titel-aktion { padding: 0; border: 0; background: none; font: inherit; font-size: var(--s-neben); color: var(--aktion); cursor: pointer; text-align: left; }
.g-teil > header .g-titel-aktion:hover { text-decoration: underline; }
.g-teil > div, .g-teil > .g-teil-inhalt { min-width: 0; }
.g-gross { max-width: 36em; font-size: var(--s-gross); line-height: 29px; color: var(--tinte); text-wrap: pretty; }
.g-lesetext { max-width: 42em; font-size: var(--s-lese); line-height: 27px; color: var(--text); }
.g-lesetext + .g-lesetext { margin-top: 12px; }
.g-lesetext b, .g-lesetext strong { font-weight: 600; color: var(--tinte); }
.g-lesetext a { text-decoration: underline; text-underline-offset: 2px; }
.g-leise-text { font-size: var(--s-text); line-height: 22px; color: var(--leise); }
.g-worum { margin: 0 0 12px; max-width: 44em; font-size: var(--s-text); line-height: 22px; color: var(--leise); }
.g-worum b { font-weight: 600; color: var(--text); }
.g-luecken { list-style: none; margin: 0; padding: 0; max-width: 44em; }
.g-luecken > li { margin: 0; padding: 12px 0; border-top: 1px solid var(--linie-leise); font-size: var(--s-lese); line-height: 26px; color: var(--text); }
.g-luecken > li:first-child { border-top: 0; padding-top: 0; }
.g-frage-an { display: block; margin-top: 8px; padding-left: 16px; border-left: 2px solid var(--zitat-linie); font-size: var(--s-text); line-height: 22px; color: var(--leise); }
.g-frage-an b { font-weight: 600; color: var(--text); }
details.g-frage-an > summary { cursor: pointer; color: var(--aktion); width: fit-content; min-height: 24px; }
details.g-frage-an[open] > summary { margin-bottom: 4px; }
.g-mehr-link { display: inline-block; margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--s-text); color: var(--aktion); cursor: pointer; }
.g-mehr-link:hover { text-decoration: underline; }
/* Zitat eingerückt mit Linie links, Quelle leise darunter */
.g-zitat { margin: 0; padding-left: 16px; border-left: 2px solid var(--zitat-linie); font-size: var(--s-lese); line-height: 27px; color: var(--text); }
.g-zitat-quelle { display: block; margin-top: 4px; font-size: var(--s-neben); line-height: 20px; color: var(--leise); }

/* Antwort als Lesetext: Aufzählungen ohne Punkte, je Punkt ein Absatz, fette Einleitung bleibt */
.g-antworttext { max-width: 42em; font-size: var(--s-lese); line-height: 27px; color: var(--text); }
.g-antworttext p, .g-antworttext li { margin: 0 0 12px; }
.g-antworttext > :last-child, .g-antworttext li:last-child { margin-bottom: 0; }
.g-antworttext ul, .g-antworttext ol { list-style: none; margin: 0 0 12px; padding: 0; }
.g-antworttext strong, .g-antworttext b { font-weight: 600; color: var(--tinte); }
.g-antworttext a { text-decoration: underline; text-underline-offset: 2px; }
.g-editor .ls-feld-rahmen { max-width: 46em; }
.g-weitere-luecken { margin-top: 0; }
.g-weitere-luecken > summary { list-style: none; }
.g-weitere-luecken > summary::-webkit-details-marker { display: none; }
.g-weitere-luecken[open] > summary { display: none; }
.g-weitere-luecken > .g-luecken > li:first-child { border-top: 1px solid var(--linie-leise); padding-top: 12px; }
/* Boxen: keine eigene Fläche mehr (Seitengerüst 3.0) – ein Abschnitt mit Linie oben */
.g-lese .g-box { margin: 0; padding: 28px 0; background: none; border-radius: 0; border-top: 1px solid var(--linie); }
.g-lese .g-box > h2 { margin: 0 0 12px; font-size: var(--s-lese); line-height: 24px; color: var(--tinte); }
.g-lese .g-urteil { margin: 28px 0 0; font-size: var(--s-gross); line-height: 29px; color: var(--tinte); }
.g-lese .g-lage { margin: 12px 0 28px; max-width: 42em; font-size: var(--s-lese); line-height: 27px; color: var(--text); }
/* Hinweise und Warnungen: keine eigene Fläche mehr, eine Linie links (Seitengerüst 3.0) */
.g-lese .g-hinweis, .g-lese .g-achtung { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; padding: 4px 0 4px 16px;
  border: 0; border-left: 2px solid var(--aktion); border-radius: 0; background: none; font-size: var(--s-text); line-height: 22px; color: var(--text); }
.g-lese .g-achtung { border-left-color: var(--schlecht); }
.g-lese .g-hinweis strong, .g-lese .g-achtung b { font-weight: 600; color: var(--tinte); }

/* --- Rechte Spalte: Bedienung ----------------------------------------------------------- */
.g-klein { margin: 0; font-size: var(--s-neben); line-height: 20px; color: var(--leise); }
.g-klein + .g-klein { margin-top: 8px; }
.g-klein b, .g-klein strong { color: var(--text); font-weight: 600; }
.g-gross-klein { margin: 0; font-size: var(--s-lese); line-height: 24px; font-weight: 600; color: var(--tinte); }
.g-gross-klein + .g-klein { margin-top: 8px; }
.g-text-aktionen { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: var(--s-text); line-height: 20px; }
.g-text-aktionen form { display: inline; margin: 0; }
.g-text-aktionen button { padding: 0; border: 0; background: none; font: inherit; color: var(--aktion); cursor: pointer; white-space: nowrap; }
.g-text-aktionen button:hover { text-decoration: underline; }
.g-pruef { list-style: none; margin: 0; padding: 0; }
.g-pruef li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; margin: 0; padding: 4px 0; font-size: var(--s-text); line-height: 20px; color: var(--text); }
.g-pruef .z { font-weight: 600; }
.g-pruef .ja .z { color: var(--gut); }
.g-pruef .nein .z { color: var(--schlecht); }
.g-pruef .offen .z { color: var(--leise); }
.g-pruef small { display: block; font-size: var(--s-neben); color: var(--leise); }
.g-pruef a { color: inherit; }
.g-spalte-feld { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 8px; font-size: var(--s-neben); color: var(--leise); }
.g-spalte-feld + .g-spalte-feld { margin-top: 8px; }
.g-spalte-feld select { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--feld-rand); border-radius: var(--radius); background: var(--weiss);
  font: inherit; font-size: var(--s-text); color: var(--tinte); }
.g-spalte .g-conf-zeile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.g-conf-wort { font-size: var(--s-lese); line-height: 22px; font-weight: 600; color: var(--conf-text); white-space: nowrap; }
/* Erfüllt? als 2×2-Feld in der rechten Spalte; der gewählte Knopf weiss mit Ring im Ton */
.g-spalte .g-erfuellt-wahl { margin: 0; }
.g-spalte .g-schalter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: auto; margin: 0; padding: 4px; background: var(--wahl-flaeche); border-radius: var(--radius-lese); }
.g-spalte .g-schalter-schieber { display: none; }
.g-spalte .g-schalter [role="radio"] { height: auto; min-height: 36px; padding: 8px 4px; border-radius: 6px; font-size: var(--s-text); line-height: 20px; font-weight: 600;
  color: var(--leise); white-space: normal; overflow-wrap: anywhere; text-align: center; }
.g-spalte .g-schalter [aria-checked="true"] { background: var(--weiss); font-weight: 600; box-shadow: 0 0 0 1px var(--spalte-rand); color: var(--tinte); }
.g-spalte .g-schalter[data-wert="ja"] [aria-checked="true"] { color: var(--gut); box-shadow: 0 0 0 1px var(--gut-rand); }
.g-spalte .g-schalter[data-wert="teilweise"] [aria-checked="true"] { color: var(--teils); box-shadow: 0 0 0 1px var(--teils-ring); }
.g-spalte .g-schalter[data-wert="nein"] [aria-checked="true"] { color: var(--schlecht); box-shadow: 0 0 0 1px var(--schlecht-rand); }
.g-spalte .g-erfuellt-wahl.umgekehrt .g-schalter[data-wert="ja"] [aria-checked="true"] { color: var(--schlecht); box-shadow: 0 0 0 1px var(--schlecht-rand); }
.g-spalte .g-erfuellt-wahl.umgekehrt .g-schalter[data-wert="nein"] [aria-checked="true"] { color: var(--gut); box-shadow: 0 0 0 1px var(--gut-rand); }
/* Confidence in der Spalte: Kreise, Wort darunter, Begründung klein */
.g-conf-spalte { margin: 0; padding: 0; border: 0; background: none; }
.g-conf-spalte .g-conf-kopf { display: block; }
.g-conf-spalte .g-conf-wahl { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 0; }
.g-conf-spalte .g-conf-wort, .g-conf-zeile-spalte .g-conf-wort { font-size: var(--s-lese); line-height: 22px; color: var(--conf-text); }
.g-conf-spalte .g-conf-ki { margin-top: 12px; font-size: var(--s-neben); line-height: 20px; color: var(--leise); }
.g-conf-spalte .g-conf-zeile { margin-top: 12px; }
.g-conf-spalte label { margin-top: 12px; font-size: var(--s-neben); }
.g-conf-spalte textarea { font-size: var(--s-text); }
.g-conf-link { margin-top: 8px; }
.g-conf-zeile-spalte { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.g-pruef a { display: block; color: var(--text); text-decoration: none; }
.g-pruef a:hover { color: var(--aktion); }
.g-spalte-feld label { color: var(--leise); }
.g-grundlage { margin-top: 12px; }

/* --- Gruppenliste ------------------------------------------------------------------------- */
.g-werkzeug { display: flex; flex-wrap: wrap; gap: 12px; padding: 20px 0 16px; }
.g-werkzeug input[type="search"] { flex: 1 1 280px; max-width: 360px; height: 40px; padding: 0 12px; border: 1px solid var(--feld-rand); border-radius: var(--radius);
  background: var(--weiss); font: inherit; font-size: var(--s-text); color: var(--tinte); }
.g-werkzeug select { width: 220px; max-width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--feld-rand); border-radius: var(--radius);
  background: var(--weiss); font: inherit; font-size: var(--s-text); color: var(--tinte); }
.g-spaltenkopf { display: grid; column-gap: 20px; padding-bottom: 8px; font-size: var(--s-neben); line-height: 20px; color: var(--leise); }
.g-gruppe { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 -40px 0 -104px; padding: 8px 40px 8px 104px;
  background: var(--gruppe); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.g-unter.allein .g-gruppe { margin-right: -56px; padding-right: 56px; }
.g-gruppe h2, .g-gruppe h3 { margin: 0; font-size: var(--s-text); line-height: 20px; font-weight: 600; letter-spacing: 0; color: var(--tinte); }
.g-gruppe > span { font-size: var(--s-neben); color: var(--leise); font-variant-numeric: tabular-nums; }
.g-zeilen { list-style: none; margin: 0; padding: 0; }
.g-zeilen > li { display: grid; column-gap: 20px; align-items: center; min-height: 44px; margin: 0; padding: 12px 0; border-top: 1px solid var(--linie-leise); }
.g-zeilen > li:first-child { border-top: 0; }
.g-zeilen > li > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 639px) { .knopf, button.knopf { white-space: normal; height: auto; min-height: 40px; } }
.g-zeilen .nr { font-size: var(--s-neben); color: var(--leise); font-variant-numeric: tabular-nums; }
.g-zeilen .fr { font-size: var(--s-text); line-height: 20px; color: var(--tinte); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-zeilen a.fr:hover { color: var(--aktion); text-decoration: underline; }
.g-zeilen .neben { font-size: var(--s-neben); line-height: 20px; color: var(--leise); }
.g-zeilen .wert { font-size: var(--s-text); line-height: 20px; color: var(--text); }
.g-antw { font-size: var(--s-text); line-height: 20px; color: var(--text); }
.g-antw.gut { color: var(--gut); font-weight: 600; }
.g-antw.schlecht { color: var(--schlecht); font-weight: 600; }
.g-leer-zeile { padding: 16px 0; font-size: var(--s-text); color: var(--leise); }
.g-filterliste { list-style: none; margin: 0; padding: 0; }
.g-filterliste li { margin: 0; }
.g-filterliste a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: var(--radius-filter);
  font-size: var(--s-text); line-height: 20px; color: var(--text); font-variant-numeric: tabular-nums; text-decoration: none; }
.g-filterliste a:hover { background: var(--weiss); }
.g-filterliste a[aria-current="page"] { background: var(--weiss); box-shadow: 0 0 0 1px var(--spalte-rand); font-weight: 600; color: var(--tinte); }
.g-filterliste a span { color: var(--leise); font-weight: 400; }
.g-verteilung { display: grid; grid-template-columns: 104px 1fr 28px; row-gap: 8px; column-gap: 12px; align-items: center; font-size: var(--s-text); line-height: 20px; font-variant-numeric: tabular-nums; }
.g-verteilung i { display: block; height: 8px; border-radius: 2px; background: var(--balken); }
.g-verteilung i.schlecht { background: var(--schlecht); }
.g-verteilung i.gut { background: var(--gut); }
.g-verteilung b { font-weight: 600; text-align: right; color: var(--tinte); }
.g-verteilung + .g-klein { margin-top: 12px; }
.g-spaltenkopf.fragen, .g-zeilen.fragen > li { grid-template-columns: 56px minmax(0, 1fr) 124px; }
.g-lese > .g-spaltenkopf:first-child, .g-dokliste > .g-spaltenkopf:first-child { padding-top: 20px; }
.g-spaltenkopf.findings, .g-zeilen.findings > li { grid-template-columns: 156px minmax(0, 1fr) 88px 160px; }
.g-zeilen.findings-kurz > li { grid-template-columns: 156px minmax(0, 1fr); }
.g-zeilen .neben { display: block; }
.g-spaltenkopf.quellen, .g-zeilen.quellen > li { grid-template-columns: minmax(0, 1fr) 160px 160px; }
.g-zeilen.quellen .titel { min-width: 0; font-size: var(--s-text); line-height: 20px; }
.g-zeilen.quellen .titel-link { font-weight: 600; color: var(--tinte); }
.g-zeilen.quellen .unterzeile { margin-top: 2px; font-size: var(--s-neben); color: var(--leise); }
.g-zeilen.quellen .wert .neben { display: block; }
.g-datum { white-space: nowrap; }
.g-filterliste a span.warn { color: var(--schlecht); font-weight: 600; }
.g-zusatz + .g-zusatz { margin-top: 4px; }
.g-spalte nav h2 { margin: 0 0 12px; }

/* --- Risiko-Dashboard ---------------------------------------------------------------------- */
.g-legende { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: center; margin: 0; padding: 16px 0 0; font-size: var(--s-neben); line-height: 20px; color: var(--leise); }
.g-legende span { display: inline-flex; align-items: center; gap: 8px; }
.g-dteil { display: grid; grid-template-columns: 184px minmax(0, 1fr); column-gap: 40px; padding: 20px 0; border-top: 1px solid var(--linie); }
.g-dteil.erster { border-top: 0; }
.g-dteil > h2 { margin: 0; padding-top: 4px; font-size: var(--s-lese); line-height: 24px; font-weight: 600; letter-spacing: 0; color: var(--tinte); }
.g-ris { list-style: none; margin: 0; padding: 0; }
.g-ris > li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 190px; column-gap: 16px; align-items: center; margin: 0; padding: 12px 0; border-top: 1px solid var(--linie-leise); }
.g-ris > li:first-child { border-top: 0; padding-top: 4px; }
.g-ris .nr { align-self: start; padding-top: 4px; font-size: var(--s-neben); color: var(--leise); font-variant-numeric: tabular-nums; }
.g-ris .name { font-size: var(--s-lese); line-height: 24px; font-weight: 600; color: var(--tinte); }
.g-ris a.name:hover { color: var(--aktion); }
.g-ris .grund { display: block; max-width: 40em; font-size: var(--s-text); line-height: 20px; color: var(--leise); }
.g-ris .wert { display: flex; align-items: center; gap: 12px; }
.g-ris .wert b { position: relative; top: 5px; font-size: var(--s-lese); font-weight: 600; color: var(--conf-text); font-variant-numeric: tabular-nums; }
.g-ris .wert.alt b { color: var(--leise); }
.g-ris .recht { font-size: var(--s-text); color: var(--text); }
.g-spannkreise { display: flex; flex-direction: column; gap: 2px; }

/* --- Management Summary als Bericht ------------------------------------------------------- */
.g-bericht { max-width: var(--breite-bericht); padding-top: 36px; }
.g-kopfzeile { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--tinte); font-size: var(--s-neben); line-height: 20px; color: var(--leise); }
.g-kopfzeile b { color: var(--tinte); font-weight: 600; }
.g-kopfzeile span:last-child { margin-left: auto; }
.g-einstieg { font-size: var(--s-dienst); line-height: 33px; color: var(--tinte); text-wrap: pretty; }
.g-fazit { margin: 32px 0 0; padding: 24px 28px; background: var(--fazit); border-left: 4px solid var(--band); }
.g-fazit h2 { margin: 0 0 8px; font-size: var(--s-neben); line-height: 20px; font-weight: 600; letter-spacing: 0; color: var(--band); }
.g-fazit p { font-size: var(--s-gross); line-height: 29px; color: var(--tinte); text-wrap: pretty; }
.g-begr { margin-top: 40px; }
.g-begr > h2 { margin: 0 0 4px; font-size: var(--s-neben); line-height: 20px; font-weight: 600; letter-spacing: 0; color: var(--leise); }
.g-absatz { padding: 20px 0 0; }
.g-absatz h3 { margin: 0 0 4px; font-size: var(--s-gross); line-height: 26px; font-weight: 600; color: var(--tinte); }
.g-absatz .typ { margin-bottom: 8px; font-size: var(--s-neben); line-height: 20px; color: var(--leise); }
.g-absatz p.t { font-size: var(--s-lese); line-height: 27px; color: var(--text); }
.g-folien-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 48px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.g-folien-kopf h2 { margin: 0; font-size: var(--s-lese); line-height: 24px; font-weight: 600; letter-spacing: 0; color: var(--tinte); }
.g-folien-kopf span { font-size: var(--s-neben); color: var(--leise); }
.g-folien { list-style: none; margin: 0; padding: 8px 0 0; counter-reset: folie; columns: 2; column-gap: 40px; }
.g-folien > li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; margin: 0; padding: 8px 0; font-size: var(--s-text); line-height: 20px; counter-increment: folie; break-inside: avoid; }
.g-folien > li::before { content: counter(folie); color: var(--leise); font-variant-numeric: tabular-nums; }
.g-folien b { display: block; font-weight: 600; color: var(--tinte); }
.g-folien span.neben { font-size: var(--s-neben); color: var(--leise); }
.g-rtyp { margin: 16px 0 4px; font-size: var(--s-neben); line-height: 20px; font-weight: 600; color: var(--tinte); }
.g-rtyp:first-of-type { margin-top: 0; }
.g-rzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; column-gap: 12px; align-items: center; padding: 4px 0; font-size: var(--s-neben); line-height: 18px; color: var(--text); }
.g-rzeile b { font-weight: 600; text-align: right; color: var(--conf-text); font-variant-numeric: tabular-nums; }
.g-rzeile i { grid-column: 2 / 4; font-style: normal; text-align: right; color: var(--leise); }
.g-rzeile.alt b { color: var(--leise); }
.g-neben-link { display: block; margin-top: 4px; font-size: var(--s-neben); line-height: 20px; }
.g-abstand-oben { margin-top: 16px; }
.g-oben { margin-top: 24px; }
.g-stichworte { margin-top: 24px; }
.g-stichworte > summary, .g-titelfolie > summary { cursor: pointer; width: fit-content; min-height: 24px; font-size: var(--s-text); color: var(--aktion); }
.g-stichworte[open] > summary { margin-bottom: 12px; }
.g-titelfolie[open] > summary { margin-bottom: 12px; }
.g-titelfolie .g-ms-felder { display: flex; flex-direction: column; gap: 12px; }
.g-titelfolie label { display: flex; flex-direction: column; gap: 4px; font-size: var(--s-neben); color: var(--leise); }
.g-titelfolie input { height: 40px; padding: 0 12px; border: 1px solid var(--feld-rand); border-radius: var(--radius); background: var(--weiss); font: inherit; font-size: var(--s-text); color: var(--tinte); }
.g-titelfolie .g-knopf { align-self: flex-start; }
.g-bericht-form { display: flex; flex-direction: column; gap: 8px; }
.g-bericht-form label, .g-bericht-form legend { font-size: var(--s-neben); font-weight: 600; color: var(--leise); }
.g-bericht-form fieldset { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 0; border: 0; }
.g-bericht-form textarea, .g-bericht-form input[type="text"] { width: 100%; padding: 8px 12px; border: 1px solid var(--feld-rand); border-radius: var(--radius);
  font: inherit; font-size: var(--s-lese); line-height: 27px; color: var(--tinte); background: var(--weiss); }

/* --- Startseite: ohne Seitenleiste, Inhalt 1080 px mittig --------------------------------- */
.g-start-band { padding: 40px 0 48px; }
.g-start-band .g-logo { height: 56px; margin: 0 0 28px; }
.g-mitte { width: 100%; max-width: var(--breite-start); margin: 0 auto; padding: 0 40px; }
.g-start-titel2 { margin: 0; font-size: var(--s-start-fliessend); line-height: 1.2; font-weight: 600; letter-spacing: -0.025em; color: var(--weiss); }
.g-start-satz { margin: 12px 0 0; max-width: 40em; font-size: var(--s-gross); line-height: 28px; color: var(--band-leise); }
.g-start-form { display: flex; gap: 12px; margin-top: 32px; max-width: 860px; }
.g-start-feld { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; height: 52px; padding: 0 16px; border: 1px solid var(--band-feld-rand);
  border-radius: var(--radius-lese-feld); background: var(--band-feld); color: var(--band-leise); }
.g-start-feld:focus-within { border-color: var(--weiss); }
.g-start-feld input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; font: inherit; font-size: var(--s-lese); color: var(--weiss); outline: none; }
.g-start-feld input::placeholder { color: var(--band-leise); opacity: 1; }
.g-start-knopf { flex: none; height: 52px; padding: 0 24px; border: 0; border-radius: var(--radius-lese-feld); background: var(--weiss); font: inherit; font-size: var(--s-lese);
  font-weight: 600; color: var(--band); white-space: nowrap; cursor: pointer; }
.g-start-knopf:hover { background: var(--band-leise); }
.g-start-fehler { margin: 12px 0 0; font-size: var(--s-text); line-height: 20px; color: var(--weiss); }
.g-schritte { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 32px; margin: 48px 0 0; padding: 0; list-style: none; counter-reset: schritt; }
.g-schritte > li { display: grid; grid-template-columns: 28px 1fr; column-gap: 4px; margin: 0; padding-top: 16px; border-top: 1px solid var(--band-linie); counter-increment: schritt; }
.g-schritte > li::before { content: counter(schritt); font-size: var(--s-text); line-height: 24px; color: var(--band-leise); font-variant-numeric: tabular-nums; }
.g-schritte b { display: block; font-size: var(--s-lese); line-height: 24px; font-weight: 600; color: var(--weiss); }
.g-schritte span { display: block; max-width: 26em; margin-top: 4px; font-size: var(--s-text); line-height: 22px; color: var(--band-leise); }
.g-mitte.g-start-liste { padding: 48px 40px 80px; }
.g-start-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.g-start-kopf h2 { margin: 0; font-size: var(--s-dienst); line-height: 32px; font-weight: 600; letter-spacing: -0.01em; color: var(--tinte); }
.g-akten-kopf, .g-akte { display: grid; grid-template-columns: minmax(0, 1fr) 232px 152px 120px 16px; column-gap: 24px; align-items: center; }
.g-akten-kopf { padding: 8px 0; border-bottom: 1px solid var(--tinte); font-size: var(--s-neben); line-height: 20px; color: var(--leise); }
.g-akte { padding: 24px 0; border-bottom: 1px solid var(--linie); color: inherit; text-decoration: none; }
.g-akte:hover { background: var(--zeile-hover); color: inherit; }
.g-akte .dienst { font-size: var(--s-dienst); line-height: 30px; font-weight: 600; letter-spacing: -0.01em; color: var(--tinte); }
.g-akte .dienst small { margin-left: 8px; font-size: var(--s-text); font-weight: 400; letter-spacing: 0; color: var(--leise); }
.g-akte .urteil { display: block; margin-top: 4px; font-size: var(--s-lese); line-height: 24px; color: var(--text); }
.g-akte .urteil.offen { color: var(--leise); }
.g-stand { display: flex; gap: 20px; font-size: var(--s-text); line-height: 20px; }
.g-stand span { padding-bottom: 4px; border-bottom: 2px solid transparent; color: var(--tinte); }
.g-stand .jetzt { font-weight: 600; border-bottom-color: var(--band); }
.g-stand .spaeter { color: var(--leise); }
.g-akte .conf { display: flex; align-items: center; gap: 12px; font-size: var(--s-lese); font-weight: 600; color: var(--conf-text); font-variant-numeric: tabular-nums; }
.g-akte .leer { font-size: var(--s-text); font-weight: 400; color: var(--leise); }
.g-akte .find { font-size: var(--s-text); line-height: 20px; color: var(--text); }
.g-akte .pfeil { font-size: var(--s-dienst); line-height: 20px; color: var(--leise); }
.g-archiv-link { margin: 20px 0 0; font-size: var(--s-text); }
/* Anmelden und Fehlerseiten: kein Gerüst, weiss, Formular (Seitengerüst 3.0) */
.g-schlicht { width: 100%; max-width: 400px; margin: 80px auto; padding: 0 20px; }
.g-schlicht-titel { margin: 0 0 24px; font-size: var(--s-dienst); line-height: 30px; font-weight: 600; letter-spacing: -0.01em; color: var(--tinte); }
.g-schlicht .g-formular { padding: 0; border: 0; background: none; }
.g-schlicht .g-text { font-size: var(--s-lese); line-height: 27px; color: var(--text); }
.g-schlicht .g-text + .g-text { margin-top: 16px; }
.g-akten { list-style: none; margin: 0; padding: 0; }
.g-akten > li { margin: 0; }
.g-akte.archiv { grid-template-columns: minmax(0, 1fr) 232px auto; }
.g-akte.archiv .dienst { color: var(--tinte); }
.g-akte.archiv a.dienst:hover { color: var(--aktion); }
.g-akte .g-anbieter { margin-left: 8px; font-size: var(--s-text); color: var(--leise); }
.g-start-archiv { margin-top: 32px; }

/* --- Schmale Fenster -------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .g-unter, .g-unter.breit { display: block; }
  .g-spalte { border-left: 0; border-top: 1px solid var(--spalte-rand); }
  .g-akten-kopf { display: none; }
  .g-akte { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
  .g-akte > :first-child { grid-column: 1 / -1; }
  .g-akte .pfeil { display: none; }
  .g-schritte { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
}
@media (max-width: 899px) {
  .g-band-oben { flex-wrap: wrap; }
  .g-band-aktionen { flex: 1 1 100%; flex-wrap: wrap; }
  .g-band .g-knopf { white-space: normal; height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 639px) {
  .g-band { padding: 20px 20px 24px; }
  .g-band > .g-logo, .g-band.kurz > .g-logo { position: static; height: 40px; margin: 0 0 16px; transform: none; }  /* Schutzzone: halbe Logobreite */
  .g-satz { font-size: var(--s-dienst); line-height: 30px; }
  .g-lese, .g-unter.allein .g-lese { padding: 0 20px 48px; }
  .g-lese > .g-reiter, .g-lese .g-reiter, .g-unter.allein .g-lese > .g-reiter { margin: 0 -20px; padding: 0 20px; }
  .g-gruppe, .g-unter.allein .g-gruppe { margin: 0 -20px; padding: 8px 20px; }
  .g-spalte { padding: 24px 20px 32px; }
  .g-teil, .g-dteil { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .g-ris > li { grid-template-columns: 44px minmax(0, 1fr); row-gap: 8px; }
  .g-ris .wert { grid-column: 2; }
  .g-zeilen > li, .g-spaltenkopf { grid-template-columns: 56px minmax(0, 1fr) !important; }
  .g-zeilen > li > :nth-child(n+3) { grid-column: 2; }
  .g-zeilen.quellen > li, .g-zeilen.findings > li { grid-template-columns: minmax(0, 1fr) !important; row-gap: 4px; }
  .g-zeilen.quellen > li > *, .g-zeilen.findings > li > * { grid-column: 1; }
  .g-spaltenkopf.quellen, .g-spaltenkopf.findings { display: none; }
  .g-spaltenkopf > :nth-child(n+3) { display: none; }
  .g-mitte, .g-mitte.g-start-liste { padding-left: 20px; padding-right: 20px; }
  .g-start-form { flex-direction: column; }
  .g-schritte { grid-template-columns: 1fr; }
  .g-folien { columns: 1; }
  .g-kopfzeile span:last-child { margin-left: 0; }
  .g-fazit { padding: 20px; }
}

/* --- Farbe nur für Verdikte (Nachbesserung 12.11.2026, Punkt 6) ------------------------------
   Gut/teils/schlecht bleiben für: Erfüllt? und Antwortwörter, Prüfpunkte, Ergebnis einer Prüfung
   und Aussagen der KI-Prüfung (Verdikte) sowie Fehlermeldungen. Alles andere ist neutral. */
.g-status-knopf, .g-status-knopf.erledigt { color: var(--leise); }
.chip.g-wid-chip.offen { background: var(--gruppe); border-color: var(--linie); color: var(--text); }
.g-abzeichen, .ls-abzeichen.schwach, .ls-abzeichen.warn { color: var(--leise); border-color: var(--linie); }
.g-nicht-belegt, .g-seite-ref.warn { color: var(--leise); }
.problem, .g-tabelle .problem, .alter-gueltig, .alter-veraltet, .ls-wert.warn { color: var(--leise); }
.g-reiter-zahl.warn, .g-filterliste a span.warn { color: var(--tinte); }
.status-knopf.status-zu_pruefen, .status-knopf.status-abgeschlossen, .status-zu_pruefen, .status-abgeschlossen,
.beleg-status.status-belegt, .beleg-status.status-vermutet { background: var(--gruppe); border-color: var(--gruppe); color: var(--text); }
.protokoll li.art-antwort_anbieter, .protokoll li.art-notiz { border-left-color: var(--linie); }
.lauf-status.status-wartet, .lauf-status.status-laeuft, .analyse-marke.angehalten-marke,
a.analyse-marke.ton-gut, a.analyse-marke.ton-schlecht, .marke-unzulaessig { color: var(--leise); }
.g-stufe-marke.erreicht { background: var(--gruppe); color: var(--text); }
.g-fd-zeile svg { color: var(--leise); }
.karte.warnung, .meldung.warning, .ki-korrekturen, .meldung { background: var(--gruppe); border-color: var(--linie); }
.fragen-zeile:target, .evidenz-zeile.veraltet { background: var(--gruppe); }
.chip.fehlt { border-color: var(--linie); color: var(--text); }
.g-lese .g-achtung { border-left-color: var(--tinte); }

/* Mängel aus Audit-Berichten sind negative Befunde und tragen wieder die Farbe «schlecht»
   (Auftrag Sprache, Zusatz zu Teil 5): Abschnitt «Mängel, die … gefunden hat», «Mangel:» und
   «n Mängel» in der Quellenliste, Art «Mangel» unter «Alle Aussagen». */
.g-mangel, .g-teil header h2.g-mangel, .g-zeilen.quellen .wert .g-mangel,
.befund-art.gruppe-ausnahmen { color: var(--schlecht); }

/* ===================================================================================== */
/* Seitengerüst 4.0 (Auftrag Stil Swisscom 13.11.2026; Vorlagen data/ux-referenz/stil/,    */
/* Werte aus stil.css): Kopfzeile mit Navigation, Seitenkopf im Swisscom-Verlauf, mittige */
/* Spalte mit Karten, Fusszeile. Blau nur für Bedienung, Türkis/Orange nur für Ergebnisse. */
/* Steht zuletzt und gilt vor den Regeln von 3.x.                                          */
/* ===================================================================================== */
body.g { background: var(--weiss); color: var(--text); font-size: var(--s-text); line-height: var(--zeile); }
h1, h2, h3 { color: var(--navy); }
.g-seite { min-height: 100vh; display: flex; flex-direction: column; }
.g-w { width: 100%; max-width: var(--breite-seite); margin: 0 auto; padding: 0 32px; }

/* Sprunglink: erstes Element, sichtbar erst mit Tastatur */
.g-sprung { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 12px 16px; border-radius: var(--radius); background: var(--navy);
  color: var(--weiss); font-weight: 600; transition: top .12s; }
.g-sprung:focus { top: 12px; color: var(--weiss); }
main:focus { outline: none; }

/* --- Kopfzeile: weiss, 76 px, nicht fest ---------------------------------------------------- */
.g-kopf { position: relative; height: var(--kopf-hoehe); flex: none; display: flex; align-items: center; justify-content: flex-start; gap: 24px;
  padding: 0 28px; border-bottom: 1px solid var(--kopfzeile-linie); background: var(--weiss); }
.g-kopf .g-marke { order: 0; gap: 10px; color: var(--navy); }
.g-kopf .g-marke:hover { color: var(--navy); }
.g-kopf .g-zeichen { width: 30px; height: 30px; }
.g-menue { display: contents; }
.g-nav { order: 1; display: flex; align-self: stretch; gap: 40px; margin-left: 72px; }  /* 72 + 24 Abstand = 96 px nach der Marke */
.g-nav a, .g-kopf-rechts a { position: relative; display: flex; align-items: center; padding: 0 4px; font-size: var(--s-text); font-weight: 600;
  color: var(--navy); white-space: nowrap; text-decoration: none; transition: color .12s; }
.g-nav a[aria-current="page"]::after { content: ""; position: absolute; left: -12px; right: -12px; bottom: 18px; height: 2px; background: var(--navy); }
.g-kopf-rechts { order: 2; display: flex; align-self: stretch; gap: 24px; margin-left: auto; }
.g-kopf-rechts a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 2px; background: var(--navy); }
.g-kopf .ki-anzeige { order: 3; }
.g-konto { order: 4; display: flex; align-items: center; gap: 16px; font-size: var(--s-neben); color: var(--leise); white-space: nowrap; }
.g-kopf-rechts + .g-konto { margin-left: 0; }
.g-nav + .g-konto { margin-left: auto; }
.g-konto a, .g-konto-name { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--s-text); font-weight: 600; color: var(--navy); text-decoration: none; }
.g-konto form { margin: 0; }
.g-konto .g-link-leise { min-height: 44px; font-size: var(--s-neben); color: var(--leise); }
.g-menue-knopf { order: 5; display: none; align-items: center; gap: 8px; height: 48px; margin-left: auto; padding: 0 16px; border: 1px solid var(--navy);
  border-radius: var(--radius); background: var(--weiss); font: inherit; font-size: var(--s-text); font-weight: 600; color: var(--navy); cursor: pointer; }

/* --- Seitenkopf: Verlauf über die ganze Breite, Inhalt in der mittigen Spalte ----------------- */
.g-band { position: relative; padding: 36px 0 44px; background: var(--band-grund) var(--band-verlauf); color: var(--weiss); }
.g-band > .g-logo, .g-band.kurz > .g-logo { position: absolute; left: 32px; top: 28px; height: 56px; transform: none; }
/* Inhalt bündig mit der Spalte darunter, aber nie unter dem Logo (mindestens 112 px vom Rand) */
.g-band > .g-w { padding-left: clamp(32px, calc(112px - (100vw - var(--breite-seite)) / 2), 112px); }
.g-band-oben { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; min-height: 0; }
.g-ort { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; min-width: 0; font-size: var(--s-neben); line-height: var(--zeile-neben); color: var(--band-leise); }
.g-ort a { color: var(--band-leise); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: currentColor; }
.g-ort a:hover { color: var(--weiss); }
.g-ort i { font-style: normal; color: var(--band-leise); }
.g-ort b, .g-ort span { color: var(--band-leise); font-weight: 400; }
.g-band-aktionen { gap: 12px; }
.g-band .g-knopf { height: var(--knopf-hoehe); padding: 0 24px; border: 1px solid var(--band-umriss); border-radius: var(--radius); background: transparent;
  color: var(--weiss); font-size: var(--s-text); font-weight: 400; line-height: var(--zeile); transition: background-color .12s, border-color .12s; }
.g-band .g-knopf:hover { background: var(--band-hover); border-color: var(--weiss); color: var(--weiss); }
.g-band .g-knopf.haupt { background: var(--weiss); border-color: var(--weiss); color: var(--navy); font-weight: 600; }
.g-band .g-knopf.haupt:hover { background: var(--band-leise); border-color: var(--band-leise); color: var(--navy); }
.g-band .g-knopf.symbol { width: var(--knopf-hoehe); padding: 0; }
.g-band .g-knopf[disabled]:hover { background: transparent; border-color: var(--band-umriss); }
.g-vor { margin: 28px 0 0; max-width: 46em; font-size: var(--s-text); line-height: var(--zeile); color: var(--band-leise); }
.g-satz { margin: 28px 0 0; max-width: 25em; font-size: var(--s-satz); line-height: 40px; font-weight: 700; letter-spacing: -0.012em; color: var(--weiss); }
.g-band.detail .g-satz { max-width: 28em; font-size: var(--s-satz-detail); line-height: 36px; }
.g-vor + .g-satz { margin-top: 6px; }
.g-band.kurz { padding: 36px 0 40px; }
.g-band.kurz .g-satz { margin-top: 20px; font-size: var(--s-satz-detail); line-height: 36px; }
/* Angaben: Spalten mit Beschriftung über dem Wert (höchstens vier) */
.g-fakten { display: flex; flex-wrap: wrap; gap: 16px 48px; margin: 28px 0 0; padding: 0; border: 0; font-size: var(--s-text); line-height: var(--zeile); color: var(--weiss); }
.g-fakten > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.g-fakten small { font-size: var(--s-neben); line-height: var(--zeile-neben); color: var(--band-leise); }
.g-fakten .wert { display: flex; align-items: center; gap: 10px; min-height: 24px; color: var(--weiss); }
.g-fakten b { font-weight: 600; color: var(--weiss); }
.g-fakten a { color: var(--weiss); text-decoration: underline; text-underline-offset: 3px; }
.g-band .g-untertitel, .g-zusatz { margin: 12px 0 0; max-width: 44em; font-size: var(--s-text); line-height: var(--zeile); color: var(--weiss); }
.g-band .g-untertitel a, .g-zusatz a { color: var(--weiss); text-decoration: underline; text-underline-offset: 3px; }
.g-band :focus-visible { outline-color: var(--weiss); }

/* --- Inhalt: mittige Spalte, Reiter, Karte links und rechts ----------------------------------- */
.g-haupt { flex: 1 1 auto; display: block; min-width: 0; padding: 0; background: var(--weiss); }
.g-koerper { padding-bottom: 72px; }
.g-reiter, .g-lese > .g-reiter, .g-lese .g-reiter, .g-unter.allein .g-lese > .g-reiter { display: flex; gap: 40px; margin: 0; padding: 0;
  border-bottom: 1px solid var(--linie); overflow-x: auto; overflow-y: hidden; }
.g-reiter a { display: inline-flex; align-items: center; gap: 6px; padding: 20px 0 18px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  font-size: var(--s-text); line-height: var(--zeile); font-weight: 600; color: var(--navy); white-space: nowrap; transition: color .12s; }
.g-reiter a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--navy); }
.g-reiter-zahl, .g-reiter-zahl.warn { margin-left: 0; font-size: var(--s-text); font-weight: 400; color: var(--leise); }
.g-unter, .g-unter.breit { display: grid; grid-template-columns: minmax(0, 1fr) var(--breite-spalte); gap: 24px; align-items: start; padding-top: 32px; }
.g-unter.breit { grid-template-columns: minmax(0, 1fr) var(--breite-spalte-breit); }
.g-unter.allein { display: block; }
/* Linke Karte: weiss, Rand, Radius 8, ohne Schatten; Abschnitte darin mit Linie oben */
.g-lese, .g-unter.allein .g-lese { min-width: 0; max-width: none; padding: 28px 32px; background: var(--weiss); border: 1px solid var(--rand-karte); border-radius: var(--radius-karte); }
.g-lese.offen, .g-unter.allein .g-lese.offen { padding: 0; border: 0; border-radius: 0; background: none; }
.g-lese > .g-meldungen { margin: 0 0 20px; }
.g-lese.offen > .g-meldungen { margin: 0 0 16px; }
/* Rechte Karte: 24 px, Titel 14/600 */
.g-spalte { padding: 0; background: var(--weiss); border: 1px solid var(--rand-karte); border-radius: var(--radius-karte); }
.g-spalte > section, .g-spalte > div, .g-spalte > nav, .g-spalte > form { padding: 24px; }
.g-spalte > section + section, .g-spalte > * + * { margin-top: 0; padding-top: 24px; border-top: 1px solid var(--linie); }
.g-spalte h2, .g-spalte nav h2 { margin: 0 0 12px; font-size: var(--s-neben); line-height: var(--zeile-neben); font-weight: 600; color: var(--text); }

/* --- Abschnitt in der Karte: Titel oben (22/28 Navy), Inhalt darunter ------------------------ */
.g-teil { display: block; margin: 0 -32px; padding: 28px 32px; border-top: 1px solid var(--linie); }
.g-lese > .g-teil:first-child, .g-lese > .g-meldungen + .g-teil, .g-teil.erster { border-top: 0; }
.g-lese > .g-teil:first-child { margin-top: -28px; }
.g-lese > :last-child.g-teil { margin-bottom: -28px; }
.g-teil > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.g-teil > header h2 { margin: 0; font-size: var(--s-dienst); line-height: 28px; font-weight: 600; color: var(--navy); }
.g-teil > header p { margin: 0; font-size: var(--s-neben); line-height: var(--zeile-neben); color: var(--leise); }
.g-teil > header a, .g-teil > header .g-titel-aktion { margin: 0 0 0 auto; font-size: var(--s-neben); line-height: var(--zeile-neben); }
.g-teil > header p + a, .g-teil > header p + .g-titel-aktion { margin-left: auto; }
.g-gross { max-width: 42em; font-size: var(--s-gross); line-height: 29px; color: var(--text); }
.g-lesetext, .g-antworttext { max-width: 46em; font-size: var(--s-lese); line-height: var(--zeile-lese); color: var(--text); }
.g-lesetext b, .g-lesetext strong, .g-antworttext b, .g-antworttext strong { color: var(--navy); }
.g-worum { font-size: var(--s-neben); line-height: 22px; color: var(--leise); margin-bottom: 14px; max-width: 50em; }
.g-luecken > li { padding: 18px 0; border-top: 1px solid var(--linie); font-size: var(--s-lese); line-height: var(--zeile-lese); }
.g-luecken > li:first-child { padding-top: 4px; }
.g-frage-an { margin-top: 8px; padding: 0; border: 0; font-size: var(--s-text); color: var(--text); }
.g-frage-an > p, .g-frage-an > span, .g-frage-an > div { display: block; margin-top: 8px; padding: 12px 16px; background: var(--flaeche-1); border-radius: var(--radius); }
details.g-frage-an > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; font-size: var(--s-neben); color: var(--aktion); }
.g-zitat { border-left-color: var(--rand-karte); }
.g-lese .g-box { margin: 0 -32px; padding: 28px 32px; border-top: 1px solid var(--linie); }
.g-lese .g-box > h2 { font-size: var(--s-dienst); line-height: 28px; color: var(--navy); }
/* Meldung: Linie links */
.g-lese .g-hinweis, .g-lese .g-achtung, .g-hinweis, .g-achtung { border-left: 4px solid var(--navy); padding: 12px 16px; background: var(--flaeche-1); border-radius: 0 var(--radius) var(--radius) 0; }
.g-lese .g-achtung, .g-achtung { border-left-color: var(--schlecht); }
.meldung, .karte.warnung, .meldung.warning, .ki-korrekturen { border: 0; border-left: 4px solid var(--navy); border-radius: 0 var(--radius) var(--radius) 0; background: var(--flaeche-1); }

/* --- Knöpfe 48 px, Felder 48 px mit Radius 8 ---------------------------------------------- */
.g-knopf, .knopf, button.knopf, .primaer, .knopf-aktion { height: var(--knopf-hoehe); padding: 0 24px; border: 1px solid var(--navy); border-radius: var(--radius);
  background: var(--weiss); color: var(--navy); font-weight: 400; transition: background-color .12s, border-color .12s; }
.g-knopf:hover, .knopf:hover { background: var(--flaeche-1); border-color: var(--navy); color: var(--navy); }
.g-knopf.haupt, .primaer, .knopf.primaer { border-color: var(--aktion); background: var(--aktion); color: var(--weiss); font-weight: 600; }
.g-knopf.haupt:hover, .primaer:hover, .knopf.primaer:hover { background: var(--aktion-dunkel); border-color: var(--aktion-dunkel); color: var(--weiss); }
.g-knopf.symbol { width: var(--knopf-hoehe); padding: 0; }
.knopf.klein, .primaer.klein, .knopf-aktion.klein { height: var(--knopf-klein); padding: 0 16px; font-size: var(--s-neben); }
.knopf.mittel, .primaer.mittel, .knopf-aktion.mittel { height: var(--knopf-klein); }
input[type=text], input[type=password], input[type=url], input[type=search], input[type=date], input[type=email], input[type=number], select {
  height: var(--knopf-hoehe); padding: 0 16px; border: 1px solid var(--rand-feld); border-radius: var(--radius); background-color: var(--weiss); color: var(--text);
  transition: border-color .12s; }
textarea { border: 1px solid var(--rand-feld); border-radius: var(--radius); background-color: var(--weiss); transition: border-color .12s; }
input[type=text]:hover, input[type=password]:hover, input[type=url]:hover, input[type=search]:hover, input[type=date]:hover,
input[type=email]:hover, input[type=number]:hover, select:hover, textarea:hover { border-color: var(--rand-feld-hover); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; border-color: var(--aktion); box-shadow: inset 0 0 0 1px var(--aktion); }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; accent-color: var(--aktion); }
label { font-size: var(--s-neben); font-weight: 600; color: var(--text); }
.g-werkzeug input[type="search"], .g-werkzeug select, .g-spalte-feld select, .g-titelfolie input { height: var(--knopf-hoehe); border-color: var(--rand-feld); }
textarea.ls-feld { border-color: var(--rand-feld); background: var(--weiss); }

/* --- Filterzeile (ersetzt die rechte Spalte der Listen) ------------------------------------- */
.g-filterzeile { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 4px 0 0; }
.g-filterzeile label { margin: 0; }
.g-filterzeile .g-eingabe { position: relative; display: block; }
.g-filterzeile .g-eingabe svg { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--aktion); pointer-events: none; }
.g-filterzeile input[type=search] { padding-right: 48px; }
.g-haken { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; margin: 0; font-size: var(--s-text); font-weight: 400; color: var(--text); white-space: nowrap; cursor: pointer; }
.g-filter-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-top: 16px; font-size: var(--s-neben); color: var(--leise); }
.g-textknopf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--s-text); color: var(--aktion); cursor: pointer; }
.g-textknopf:hover, .g-tl:hover { text-decoration: underline; text-underline-offset: 3px; }
.g-tl { display: inline-flex; align-items: center; gap: 8px; color: var(--aktion); }

/* --- Spaltenkopf und Karten je Gruppe (Thema, Risikotyp, Typ) --------------------------------- */
.g-spaltenkopf2 { display: grid; column-gap: 32px; margin-top: 32px; padding: 8px 24px; background: var(--flaeche-2); border-radius: var(--radius-spaltenkopf);
  font-size: var(--s-neben); line-height: var(--zeile-neben); font-weight: 600; color: var(--text); }
.g-karte { margin-top: 16px; background: var(--weiss); border: 1px solid var(--rand-karte); border-radius: var(--radius-karte); transition: box-shadow .15s; }
.g-karte.klick:hover { box-shadow: var(--schatten); }
.g-karte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 32px; background: var(--flaeche-1);
  border-radius: var(--radius-karte) var(--radius-karte) 0 0; }
.g-karte-kopf h2 { margin: 0; font-size: var(--s-dienst); line-height: 28px; font-weight: 600; color: var(--navy); }
.g-karte-kopf p { margin: 0; font-size: var(--s-neben); line-height: var(--zeile-neben); color: var(--leise); }
.g-thema-kopf { display: grid; grid-template-columns: minmax(0, 1fr) 300px 40px; align-items: center; column-gap: 32px; width: 100%; margin: 0; padding: 22px 24px;
  border: 0; border-radius: var(--radius-karte); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.g-thema-kopf h2, .g-thema-kopf .titel { margin: 0; font-size: var(--s-dienst); line-height: 28px; font-weight: 600; color: var(--navy); }
.g-thema-kopf small { margin-left: 12px; font-size: var(--s-neben); font-weight: 400; color: var(--leise); }
.g-pfeil { display: flex; justify-content: flex-end; color: var(--aktion); }
.g-pfeil svg { transition: transform .2s; }
[aria-expanded="true"] .g-pfeil svg { transform: rotate(180deg); }
.g-auf { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .2s ease-out, opacity .2s ease-out; }
.g-auf > div { overflow: hidden; min-height: 0; }
.g-auf.zu { grid-template-rows: 0fr; opacity: 0; }
.g-balken { display: flex; height: 8px; overflow: hidden; border-radius: 4px; background: var(--balken-grund); }
.g-balken i { display: block; height: 100%; transition: width .4s ease-out; }
.g-balken i.gut { background: var(--gut-grafik); }
.g-balken i.schlecht { background: var(--schlecht-grafik); }
.g-balken-text { margin-top: 8px; font-size: var(--s-neben); line-height: var(--zeile-neben); color: var(--leise); }
.g-balken-text b { font-weight: 400; color: var(--text); }
.g-innen-kopf { display: grid; column-gap: 24px; margin: 0 24px; padding: 10px 16px; background: var(--flaeche-1); border-radius: var(--radius-spaltenkopf);
  font-size: var(--s-neben); line-height: var(--zeile-neben); font-weight: 600; color: var(--text); }
.g-zeilen2 { list-style: none; margin: 0; padding: 0 24px 8px; }
.g-zeilen2 > li { margin: 0; border-top: 1px solid var(--linie); }
.g-zeilen2 > li:first-child { border-top: 0; }
.g-zeilen2 .g-zl { display: grid; column-gap: 24px; align-items: center; min-height: 72px; padding: 12px 16px; border-radius: var(--radius);
  color: var(--text); text-decoration: none; transition: background-color .1s; }
.g-zeilen2 .g-zl:hover { background: var(--flaeche-1); color: var(--text); }
.g-zeilen2.dicht .g-zl { min-height: 56px; }
.g-zl .nr { font-size: var(--s-neben); color: var(--leise); font-variant-numeric: tabular-nums; }
.g-zl .fr { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text); }
.g-zl .g-pfeil svg { transition: none; }
.fr-raster { grid-template-columns: 72px minmax(0, 1fr) 176px 32px; }
.ri-raster { grid-template-columns: 56px minmax(0, 1fr) 220px 32px; }
.g-antw.gut { color: var(--gut); }
.g-antw.schlecht { color: var(--schlecht); }

/* --- Bausteine in der rechten Karte --------------------------------------------------------- */
/* Erfüllt?: 2×2-Wahlfelder mit 22-px-Kästchen; gewählt 2 px blau */
.g-spalte .g-schalter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; background: none; border-radius: 0; }
.g-spalte .g-schalter [role="radio"] { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 0 12px;
  border: 1px solid var(--rand-feld); border-radius: var(--radius); background: var(--weiss); box-shadow: none; font-size: var(--s-text); font-weight: 400;
  color: var(--text); text-align: left; white-space: normal; transition: border-color .12s; }
.g-spalte .g-schalter [role="radio"]::before { content: ""; flex: none; width: 22px; height: 22px; border: 1px solid var(--rand-feld); border-radius: var(--radius-klein); background: var(--weiss); }
.g-spalte .g-schalter [role="radio"]:hover { border-color: var(--rand-feld-hover); }
.g-spalte .g-schalter [aria-checked="true"],
.g-spalte .g-schalter[data-wert] [aria-checked="true"],
.g-spalte .g-erfuellt-wahl.umgekehrt .g-schalter[data-wert] [aria-checked="true"] { padding: 0 11px; border: 2px solid var(--aktion); box-shadow: none; color: var(--text); font-weight: 400; }
.g-spalte .g-schalter [aria-checked="true"]::before { border-color: var(--aktion); background: var(--aktion) var(--haken-bild) center / 22px no-repeat; }
.g-pruef li { grid-template-columns: 22px 1fr; gap: 10px; font-size: var(--s-text); line-height: var(--zeile); }
.g-pruef .ja .z { color: var(--gut); }
.g-pruef .nein .z { color: var(--schlecht); }
.g-klein { font-size: var(--s-neben); line-height: 21px; }
.g-conf-wort, .g-conf-spalte .g-conf-wort, .g-conf-zeile-spalte .g-conf-wort { font-size: var(--s-text); color: var(--navy); }
.g-spalte-feld { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.g-spalte-feld + .g-spalte-feld { margin-top: 14px; }

/* --- Fazit: Fläche 2 mit 4-px-Linie Navy -------------------------------------------------- */
.g-fazit { margin: 28px 0 0; padding: 20px 28px; background: var(--flaeche-2); border-left: 4px solid var(--navy); border-radius: 0 var(--radius) var(--radius) 0; }
.g-fazit h2 { margin: 0 0 6px; font-size: var(--s-neben); color: var(--navy); }
.g-fazit p { font-size: var(--s-gross); line-height: 29px; color: var(--text); }

/* --- Dialog: Karte mit Schatten ---------------------------------------------------------- */
.g-dialog { border: 1px solid var(--rand-karte); border-radius: var(--radius-karte); box-shadow: var(--schatten); }

/* --- Tooltip (ersetzt title bei Symbolknöpfen; mysra.js) -------------------------------------- */
.g-tipp { position: absolute; z-index: 200; max-width: 240px; padding: 8px 12px; border-radius: var(--radius-klein); background: var(--tip);
  color: var(--weiss); font-size: var(--s-neben); line-height: var(--zeile-neben); text-align: center; pointer-events: none; }
.g-tipp::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--tip); transform: translateX(-50%) rotate(45deg); }
.g-tipp.unten::after { bottom: auto; top: -5px; }
.g-tipp[hidden] { display: none; }

/* --- Platzhalter beim Nachladen (HTMX) ------------------------------------------------------ */
.g-skelett { height: 72px; border-radius: var(--radius); background: var(--flaeche-2); animation: g-atmen 1.4s ease-in-out infinite; }
.g-skelett + .g-skelett { margin-top: 12px; }
@keyframes g-atmen { 50% { opacity: .55; } }
.htmx-request.g-laedt > * { visibility: hidden; }

/* --- Fusszeile Navy 64 px --------------------------------------------------------------------- */
.g-seitenfuss { flex: none; margin-top: auto; background: var(--navy); color: var(--weiss); }
.g-seitenfuss .g-w { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 64px; }
.g-seitenfuss-logo { display: block; height: 30px; width: auto; }
.g-seitenfuss nav { display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: var(--s-neben); line-height: var(--zeile-neben); }
.g-seitenfuss a, .g-seitenfuss span { display: inline-flex; align-items: center; min-height: 44px; color: var(--weiss); }
.g-seitenfuss a:hover { color: var(--weiss); text-decoration: underline; text-underline-offset: 3px; }
.g-seitenfuss :focus-visible { outline-color: var(--weiss); }

/* --- Verhalten: Maus nur, wo es eine Maus gibt ----------------------------------------------- */
a, button, summary, select, .g-haken { cursor: pointer; }
@media (hover: hover) {
  .g-nav a:hover, .g-kopf-rechts a:hover, .g-konto a:hover, .g-reiter a:hover { color: var(--aktion); }
  .g-pfad a:hover, .g-tl:hover, .g-textknopf:hover { text-decoration: underline; text-underline-offset: 3px; }
  .g-karte.klick:hover { box-shadow: var(--schatten); }
}
:focus-visible { outline: 2px solid var(--aktion); outline-offset: 2px; border-radius: var(--radius-klein); }
.g-band :focus-visible, .g-seitenfuss :focus-visible { outline-color: var(--weiss); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --- Schmale Fenster ------------------------------------------------------------------------ */
@media (max-width: 1099px) {
  .g-menue-knopf { display: inline-flex; }
  .g-kopf .ki-anzeige { margin-left: auto; }
  .g-kopf .ki-anzeige + .g-menue-knopf, .g-kopf .ki-anzeige ~ .g-menue-knopf { margin-left: 0; }
  .g-menue { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 60; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 20px 16px; background: var(--weiss); border-bottom: 1px solid var(--kopfzeile-linie); box-shadow: var(--schatten); }
  .g-menue.offen { display: flex; }
  .g-nav, .g-kopf-rechts { flex-direction: column; gap: 0; margin: 0; }
  .g-kopf-rechts { padding-top: 8px; border-top: 1px solid var(--linie); }
  .g-nav a, .g-kopf-rechts a { min-height: 48px; padding: 0 4px; }
  .g-nav a[aria-current="page"]::after, .g-kopf-rechts a[aria-current="page"]::after { left: 0; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; }
  .g-nav a[aria-current="page"], .g-kopf-rechts a[aria-current="page"] { padding-left: 16px; }
  .g-konto { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--linie); justify-content: space-between; }
  .g-unter, .g-unter.breit { display: block; }
  .g-spalte { margin-top: 24px; border-top: 1px solid var(--rand-karte); }
  .g-filterzeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .g-thema-kopf { grid-template-columns: minmax(0, 1fr) 200px 32px; column-gap: 20px; }
  .fr-raster { grid-template-columns: 64px minmax(0, 1fr) 120px 24px; }
}
@media (max-width: 639px) {
  .g-kopf { padding: 0 20px; gap: 12px; }
  .g-w { padding: 0 20px; }
  .g-band { padding: 24px 0 32px; }
  .g-band > .g-logo, .g-band.kurz > .g-logo { position: static; display: block; height: 40px; margin: 0 0 16px 20px; transform: none; }
  .g-band > .g-w { padding-left: 20px; }
  .g-band-oben { flex-wrap: wrap; gap: 16px; }
  .g-band-aktionen { flex: 1 1 100%; flex-wrap: wrap; }
  .g-band .g-knopf { white-space: normal; height: auto; min-height: var(--knopf-hoehe); }
  .g-satz, .g-band.detail .g-satz, .g-band.kurz .g-satz { font-size: var(--s-dienst); line-height: 28px; }
  .g-fakten { gap: 16px 32px; }
  .g-lese, .g-unter.allein .g-lese { padding: 20px; }
  .g-teil, .g-lese .g-box { margin: 0 -20px; padding: 24px 20px; }
  .g-lese > .g-teil:first-child { margin-top: -20px; }
  .g-lese > :last-child.g-teil { margin-bottom: -20px; }
  .g-spalte > section, .g-spalte > div, .g-spalte > nav, .g-spalte > form { padding: 20px; }
  .g-reiter, .g-lese > .g-reiter { gap: 24px; }
  .g-filterzeile { grid-template-columns: minmax(0, 1fr); }
  .g-thema-kopf { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 12px; padding: 18px 16px; }
  .g-thema-kopf > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .g-thema-kopf > .g-pfeil { grid-column: 2; grid-row: 1; }
  .g-spaltenkopf2 { display: none; }
  .g-innen-kopf { display: none; }
  .g-zeilen2 { padding: 0 8px 8px; }
  .g-zeilen2 .g-zl, .fr-raster, .ri-raster { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 4px; padding: 12px 8px; }
  .g-zeilen2 .g-zl > * { grid-column: 1; }
  .g-zeilen2 .g-zl > .g-pfeil { grid-column: 2; grid-row: 1 / span 3; }
  .g-karte-kopf { padding: 16px 20px; flex-wrap: wrap; }
  .g-seitenfuss .g-w { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
}
/* Aufklappbare Listen: mit JavaScript bis zur Einrichtung zu (ohne Flackern), ohne alles offen */
.js .g-themen:not([data-gefiltert]):not(.bereit) .g-auf { grid-template-rows: 0fr; opacity: 0; transition: none; }
.g-themen:not(.bereit) .g-auf { transition: none; }
.g-auf[hidden] { display: none; }
.g-laedt > :not(.g-skelett-rahmen) { display: none; }
.g-skelett-rahmen { padding-top: 16px; }

/* --- Startseite (Vorlage-Start.html) -------------------------------------------------------- */
body.g.start { background: var(--flaeche-2); }
body.start .g-haupt { background: var(--flaeche-2); }
.g-start-band { padding: 44px 0 48px; }
.g-start-band .g-logo { position: static; display: block; height: 56px; margin: 0 0 28px; transform: none; }
.g-start-band > .g-w { padding-left: 32px; }
.g-start-titel2 { font-size: var(--s-start-fliessend); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; color: var(--weiss); }
.g-start-satz { margin-top: 12px; font-size: var(--s-gross); line-height: 28px; color: var(--band-leise); }
.g-start-form { margin-top: 32px; max-width: 860px; gap: 12px; }
.g-start-feld { height: 56px; border-radius: var(--radius); transition: border-color .12s; }
.g-start-feld:hover { border-color: var(--weiss); }
.g-start-feld:focus-within { border: 2px solid var(--weiss); padding: 0 15px; }
.g-start-feld input, .g-start-feld input:hover, .g-start-feld input:focus-visible { height: 100%; padding: 0; border: 0; box-shadow: none; background: transparent; color: var(--weiss); }
.g-start-knopf { height: 56px; border-radius: var(--radius); transition: background-color .12s; }
.g-schritte > li { padding-top: 16px; border-top: 1px solid var(--band-linie); }
.g-schritte > li::before { font-size: var(--s-neben); }
.g-schritte b { font-size: var(--s-text); }
.g-schritte span { font-size: var(--s-neben); line-height: 22px; }
.g-w.g-start-liste { padding-top: 40px; padding-bottom: 72px; }
.g-start-karte { padding: 28px 32px; background: var(--weiss); border-radius: var(--radius-karte); }
.g-start-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; }
.g-start-kopf h2 { font-size: var(--s-dienst); line-height: 28px; font-weight: 600; letter-spacing: 0; color: var(--navy); }
.g-akten-kopf { margin-top: 20px; padding: 8px 16px; border: 0; border-radius: var(--radius-spaltenkopf); background: var(--flaeche-2); font-weight: 600; color: var(--text); }
.g-akten-kopf, .g-akte { grid-template-columns: minmax(0, 1fr) 250px 170px 130px 32px; column-gap: 24px; }
.g-akten > li + li { border-top: 1px solid var(--linie); }
.g-akte { min-height: 104px; padding: 16px; border: 0; border-radius: var(--radius); transition: background-color .1s; }
.g-akte:hover { background: var(--flaeche-1); }
.g-akte .dienst { font-size: var(--s-dienst); line-height: 28px; letter-spacing: 0; color: var(--navy); }
.g-akte .dienst small { margin-left: 10px; font-size: var(--s-neben); }
.g-akte .urteil { margin-top: 2px; font-size: var(--s-text); line-height: var(--zeile); }
.g-akte .conf { font-size: var(--s-text); color: var(--navy); }
.g-akte .find { font-size: var(--s-text); }
.g-stand { gap: 16px; font-size: var(--s-text); }
.g-stand span { color: var(--text); }
.g-stand .jetzt { font-weight: 600; color: var(--navy); border-bottom-color: var(--navy); padding-bottom: 2px; }
.g-akte.archiv { grid-template-columns: minmax(0, 1fr) 250px auto; }
.g-start-archiv { margin-top: 32px; }
.g-textlinks { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 16px; }
.g-band .g-tl { color: var(--weiss); }
.g-tl.aus { opacity: .6; cursor: default; }
@media (max-width: 1099px) {
  .g-akten-kopf { display: none; }
  .g-akte { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
  .g-akte .pfeil { display: none; }
}
@media (max-width: 639px) {
  .g-start-band .g-logo { height: 40px; margin: 0 0 20px; }
  .g-start-band > .g-w { padding-left: 20px; }
  .g-start-karte { padding: 20px 16px; }
  .g-start-feld, .g-start-knopf { height: 56px; }
  .g-akte { padding: 16px 8px; }
}

/* Filterzeile: Felder füllen ihre Spalte; Auswahl mit Pfeil in Aktion-Blau */
.g-filterzeile input[type=search], .g-filterzeile select { width: 100%; max-width: none; height: var(--knopf-hoehe); padding-left: 16px; border-color: var(--rand-feld);
  background-color: var(--weiss); }
.g-filterzeile select { padding-right: 44px; background-image: var(--pfeil-bild); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; }
.g-filter-ansicht { display: contents; }
select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: var(--pfeil-bild); background-repeat: no-repeat;
  background-position: right 14px center; background-size: 20px; }
select[multiple] { background-image: none; padding-right: 16px; }
.thema-raster { grid-template-columns: minmax(0, 1fr) 300px 40px; }
/* Konto: Zeichen mit Namen als Hinweis, «Abmelden» daneben */
.g-konto .g-konto-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1099px) {
  .g-konto .g-konto-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .thema-raster { grid-template-columns: minmax(0, 1fr) 200px 32px; }
}
.g-start-feld { font-weight: 400; }
.g-akte .pfeil, .g-akte .g-pfeil { color: var(--aktion); }

/* --- Risiko-Dashboard (Vorlage-Dashboard.html): Karte je Risikotyp ------------------------------ */
.g-legende { gap: 8px 40px; padding: 4px 0 8px; font-size: var(--s-neben); }
.g-legende span { gap: 12px; }
.g-risiko .g-zeilen2 { padding-top: 8px; }
.ri-name { display: block; font-size: var(--s-text); line-height: var(--zeile); font-weight: 600; color: var(--navy); }
.ri-grund { display: block; margin-top: 2px; font-size: var(--s-neben); line-height: 21px; color: var(--leise); }
.g-ris2 .wert { display: flex; align-items: center; gap: 16px; }
.g-ris2 .wert b { position: relative; top: 5px; font-size: var(--s-text); font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.g-ris2 .wert.alt b { color: var(--leise); }
.g-ris2 .recht { font-size: var(--s-text); color: var(--text); }
@media (max-width: 639px) {
  .g-ris2 .wert { grid-column: 1; }
}

/* --- Management Summary (Vorlage-Summary.html): Bericht als Karte, rechts 400 px ------------- */
.g-unter.breit > .g-lese { padding: 32px 40px 44px; }
.g-bericht { max-width: none; padding-top: 0; }
.g-kopfzeile { margin-bottom: 0; padding-bottom: 16px; border-bottom: 1px solid var(--linie); font-size: var(--s-neben); }
.g-kopfzeile b { color: var(--navy); margin-right: 16px; }
.g-einstieg { margin-top: 28px; max-width: 38em; font-size: var(--s-dienst); line-height: 34px; color: var(--text); }
.g-begr { margin-top: 36px; }
.g-begr > h2 { margin: 0 0 20px; font-size: var(--s-dienst); line-height: 28px; color: var(--navy); }
.g-absatz { padding: 0; }
.g-absatz + .g-absatz { margin-top: 28px; }
.g-absatz h3 { margin: 0; font-size: var(--s-gross); line-height: 26px; color: var(--navy); }
.g-absatz .typ { margin: 2px 0 0; font-size: var(--s-neben); }
.g-absatz p.t { margin-top: 8px; max-width: 46em; font-size: var(--s-lese); line-height: var(--zeile-lese); }
.g-rtyp { color: var(--navy); }
.g-rzeile { padding: 5px 0; font-size: var(--s-neben); line-height: 20px; }
.g-rzeile b { color: var(--navy); }
.g-folien-kopf h2 { font-size: var(--s-dienst); line-height: 28px; color: var(--navy); }
@media (max-width: 639px) {
  .g-unter.breit > .g-lese { padding: 20px; }
}

/* --- Findings und Quellen: Filterzeile und Karte je Gruppe (Seitengerüst 4.0, Teil 6) --------- */
.g-filterzeile.kurz { grid-template-columns: minmax(0, 360px); }
.g-filterzeile.quellen { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.g-karte .g-innen-kopf { margin-top: 16px; }
.fi-raster { grid-template-columns: 140px minmax(0, 1fr) 120px 180px 32px; }
.qu-raster { grid-template-columns: minmax(0, 1fr) 170px 170px 32px; }
.g-zl .neben { display: block; margin-top: 2px; font-size: var(--s-neben); line-height: 20px; color: var(--leise); }
.g-zl .fr { color: var(--navy); font-weight: 600; }
.g-zl .wert { font-size: var(--s-text); color: var(--text); }
.g-zl .titel { min-width: 0; }
.g-zl .unterzeile { display: block; margin-top: 2px; font-size: var(--s-neben); color: var(--leise); overflow-wrap: anywhere; }
@media (max-width: 1099px) {
  .fi-raster { grid-template-columns: 120px minmax(0, 1fr) 100px 32px; }
  .fi-raster > :nth-child(4) { display: none; }
}
@media (max-width: 639px) {
  .fi-raster > :nth-child(4) { display: block; }
}
.g-filterzeile.quellen form { margin: 0; }
.g-filterzeile.quellen > details { justify-self: end; }
.g-filterzeile.quellen > details[open] { grid-column: 1 / -1; justify-self: stretch; }
.g-filterzeile.quellen > details > summary { min-height: 44px; }
.g-filterzeile.quellen .webseite-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-top: 8px; padding: 20px 24px;
  background: var(--flaeche-1); border-radius: var(--radius); }
.g-filterzeile.quellen .webseite-form input { flex: 1 1 320px; }
.g-filterzeile.quellen .webseite-form .hilfe { flex-basis: 100%; font-size: var(--s-neben); color: var(--leise); }
@media (max-width: 639px) { .g-filterzeile.quellen > details { justify-self: start; } }

/* --- Anmelden und Fehlerseiten: Fläche 2, Karte 440 px mittig (Seitengerüst 4.0) -------------- */
body.g.schlicht, body.schlicht .g-haupt { background: var(--flaeche-2); }
.g-schlicht { width: calc(100% - 40px); max-width: 440px; margin: 80px auto; padding: 32px; background: var(--weiss); border: 1px solid var(--rand-karte);
  border-radius: var(--radius-karte); }
.g-schlicht-titel { margin: 0 0 24px; font-size: var(--s-satz-detail); line-height: 36px; font-weight: 700; letter-spacing: -0.012em; color: var(--navy); }
.g-schlicht form { display: flex; flex-direction: column; }
.g-schlicht form label { margin-top: 16px; }
.g-schlicht form label:first-of-type { margin-top: 0; }
.g-schlicht form .g-knopf { align-self: flex-start; margin-top: 24px; }
@media (max-width: 639px) { .g-schlicht { margin: 32px auto; padding: 24px 20px; } }

/* --- Tabellen 56 px, Formulare höchstens 720 px (Seitengerüst 4.0, Teil 6) ------------------- */
.g-tabelle th { padding: 8px 24px 8px 16px; background: var(--flaeche-2); font-size: var(--s-neben); line-height: var(--zeile-neben); font-weight: 600;
  color: var(--text); border: 0; }
.g-tabelle th:first-child { border-radius: var(--radius-spaltenkopf) 0 0 var(--radius-spaltenkopf); }
.g-tabelle th:last-child { border-radius: 0 var(--radius-spaltenkopf) var(--radius-spaltenkopf) 0; padding-right: 16px; }
.g-tabelle td { height: 56px; padding: 8px 24px 8px 16px; border-bottom: 1px solid var(--linie); }
.g-tabelle td:last-child { padding-right: 16px; }
.g-tabelle tbody tr { transition: background-color .1s; }
@media (hover: hover) { .g-tabelle tbody tr:hover { background: var(--flaeche-1); } }
.g-unter.allein .g-lese.formular { max-width: calc(var(--breite-formular) + 66px); }
/* Schmale Fenster: Archiv-Zeile, Formular des Dokuments, Tabellen als Liste (Seitengerüst 4.0) */
@media (max-width: 1099px) { .g-akte.archiv { grid-template-columns: minmax(0, 1fr) auto; } }
@media (max-width: 639px) {
  .g-akte.archiv { grid-template-columns: minmax(0, 1fr); }
  .evidenz-form { grid-template-columns: minmax(0, 1fr); }
  .evidenz-form .feld { min-width: 0; }
  .als-liste > thead { display: block; }
  .g-tabelle-rahmen:has(> .als-liste) { overflow-x: clip; overflow-clip-margin: 4px; }
}
@media (max-width: 639px) { .g-knopf, label.g-knopf { max-width: 100%; white-space: normal; height: auto; min-height: var(--knopf-hoehe); text-align: center; } }
@media (max-width: 639px) {
  .g-akte, .g-akte.archiv { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .g-akte .g-stand { flex-wrap: wrap; }
  .g-einstieg { font-size: var(--s-gross); line-height: 29px; }
  .g-thema-kopf small { display: block; margin: 4px 0 0; }
}
.g-spalte .g-conf-zeile-spalte, .g-spalte .g-conf-spalte .g-conf-wahl { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; }