/* AgentDelta – eine Datei für alle Seiten. Tokens und Regeln aus DESIGN.md. */

@font-face { font-family: Inter; src: url("fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Inter; src: url("fonts/InterVariable-Italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --bg: #fff; --flaeche: #f7f7f8; --linie: #e6e6e9; --text: #111318; --leise: #6b7080;
  --akzent: #2f5bea; --akzent-bg: #e9eefc;
  --rot: #c8352a; --rot-bg: #fbe9e7; --rot-aktiv: #f5cfca; --gruen: #1f8a4c; --gruen-bg: #e6f4ea; --grau: #a3a7b3;
  --r: 6px;
  --feld: 36px; --rand: #d9dadf;  /* Höhe und Rand von Eingabe und Knopf */
  --ui: Inter, system-ui, sans-serif;
  /* Artikeltext wie auf netdoktor.de: deren Systemschriften */
  --lese: Helvetica, Arial, Verdana, sans-serif;
  --lese-h: "Trebuchet MS", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--ui); font-feature-settings: "tnum", "cv11"; }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1 { font: 600 24px/1.25 var(--ui); letter-spacing: -.015em; margin: 0; }
h2 { font: 600 16px/1.4 var(--ui); margin: 0 0 12px; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* Leiste */
.leiste { height: 48px; border-bottom: 1px solid var(--linie); display: flex; align-items: center; gap: 28px; padding: 0 20px; position: sticky; top: 0; background: #fff; z-index: 3; }
.marke { font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.marke:hover { text-decoration: none; }
.leiste nav { display: flex; gap: 20px; }
.leiste nav a { color: var(--leise); }
.leiste nav a.aktiv { color: var(--text); font-weight: 500; }
.leiste nav a:hover { color: var(--text); text-decoration: none; }
.nutzer { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--leise); }

/* Seiten mit Inhalt in der Mitte: Übersicht, Quellen, Queue */
.mitte { max-width: 1100px; margin: 0 auto; padding: 32px 24px 96px; }
.seitenkopf { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.seitenkopf h1 { flex: 1; min-width: 0; }
.seitenkopf .zurueck { display: block; color: var(--leise); margin-bottom: 4px; font-size: 13px; }
.abschnitt { margin: 0 0 40px; }
.angaben, .leise { color: var(--leise); }
.qn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* langer Name einer Quelle, voll im title */
.klein { font-size: 13px; }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--feld); border: 1px solid var(--rand); background: #fff; border-radius: var(--r); padding: 0 12px; cursor: pointer; color: var(--text); white-space: nowrap; line-height: 1.5; }
.btn:hover { background: var(--flaeche); text-decoration: none; }
.btn:disabled { color: var(--grau); cursor: default; background: #fff; }
.btn.primaer { background: var(--text); border-color: var(--text); color: #fff; }
.btn.primaer:hover { background: #2a2d35; }
.btn.primaer:disabled { background: var(--grau); border-color: var(--grau); }
.btn.gefahr { background: var(--rot); border-color: var(--rot); color: #fff; }
.btn.gefahr:hover { background: #a92b22; }
button.link { border: 0; background: none; padding: 0; color: var(--leise); cursor: pointer; }
button.link:hover { color: var(--akzent); }

/* Eingaben und Formulare: Beschriftung über dem Feld, Meldung darunter */
input[type=text], input[type=search], input[type=url], input[type=password], input[type=number], textarea, .datei-feld {
  width: 100%; height: var(--feld); border: 1px solid var(--rand); border-radius: var(--r); padding: 0 12px; background: #fff;
}
textarea { height: auto; padding: 8px 12px; resize: vertical; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
input:not([type=checkbox]):focus, textarea:focus, .datei-feld:focus-within { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-bg); }
.feld > label, .anmelden label { display: block; font-weight: 500; margin-bottom: 8px; }
.errorlist { list-style: none; margin: 0; padding: 0; color: var(--rot); }
.feld .errorlist { margin-top: 4px; font-size: 13px; }
.feld:has(.errorlist) > :is(input, textarea, .datei-feld) { border-color: var(--rot); --akzent-bg: var(--rot-bg); }
.karte { padding: 24px; background: var(--flaeche); border-radius: var(--r); margin-bottom: 40px; }

/* PDF oder URL: ein Feld; eine gewählte oder hineingezogene Datei steht als Chip darin */
.datei-feld { display: flex; align-items: center; gap: 8px; padding-right: 4px; position: relative; }
.datei-feld input[type=url] { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; box-shadow: none; background: none; }
.datei-feld input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }  /* versteckt, bleibt fokussierbar */
.datei-feld .btn { min-height: 0; height: calc(var(--feld) - 10px); padding: 0 8px; margin-left: auto; font-size: 13px; position: relative; }  /* 4 px innen */
.datei-feld:has(input[type=file]:focus-visible) .btn { outline: 2px solid var(--akzent); outline-offset: 1px; }
.datei-feld .chip, .datei-feld.hat-datei :is(input[type=url], .btn) { display: none; }
.datei-feld.hat-datei .chip { display: inline-flex; margin-left: -8px; min-width: 0; }  /* lange Dateinamen enden mit … statt ins Nachbarfeld zu laufen */
.datei-feld.ziehen { border-color: var(--akzent); background: var(--akzent-bg); }
.hochladen { display: grid; gap: 16px; }
.hochladen > .btn { justify-self: end; }
details.weiteres > summary { cursor: pointer; color: var(--leise); list-style: none; }
details.weiteres > summary::after { content: " ▸"; }
details.weiteres[open] > summary::after { content: " ▾"; }
details.weiteres[open] > summary { margin-bottom: 10px; }

/* Trefferliste einer Suche: je Treffer ein Knopf, der ihn verknüpft (Quellen am Artikel) oder wählt (Queue) */
.liste { max-height: 320px; overflow: auto; padding: 4px 0; background: #fff; border: 1px solid var(--linie); border-radius: var(--r); }
.liste:not(:has(*)) { display: none; }
.liste > button { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; width: 100%; padding: 8px 12px; border: 0; background: none; text-align: left; cursor: pointer; }
.liste > button:hover { background: var(--flaeche); }
.liste p { margin: 0; padding: 8px 12px; color: var(--leise); }

/* Chip: die gewählte Datei im Feld „PDF oder URL“ */
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px; padding: 2px 4px 2px 10px; max-width: 100%; }
.chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip button { border: 0; background: none; color: var(--leise); cursor: pointer; padding: 0 6px; font-size: 16px; line-height: 1; }
.chip button:hover { color: var(--text); }

/* Tabelle */
.tabelle { overflow-x: auto; }
.tabelle table { width: 100%; border-collapse: collapse; }
.tabelle th { text-align: left; font-weight: 500; color: var(--leise); font-size: 13px; padding: 8px 12px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.tabelle td { padding: 10px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle .zahl { text-align: right; white-space: nowrap; }
.tabelle td.leer { color: var(--leise); text-align: center; padding: 32px; }
.tabelle .titel a, .tabelle .titel .name { color: var(--text); font-weight: 500; }
.tabelle .titel .angaben { display: block; font-size: 13px; overflow-wrap: anywhere; }
.tabelle .aktion { text-align: right; white-space: nowrap; }
.tabelle .aktion .link + .link { margin-left: 16px; }
.zuletzt { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--linie); }

/* Statuspunkt: wartet · läuft · fertig · fertig mit Lücken · abgebrochen · Fehler */
.punkt { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--grau); flex: none; }
.punkt.falsch { background: var(--rot); }
.punkt.richtig { background: var(--gruen); }
.stand { display: inline-flex; align-items: baseline; gap: 7px; }
.stand .punkt { position: relative; top: -1px; }
.stand.queued .punkt { background: none; box-shadow: inset 0 0 0 1.5px var(--grau); }
.stand.running .punkt { background: var(--text); }
.stand.done .punkt { background: var(--leise); }
.stand.done_with_errors .punkt { background: none; box-shadow: inset 0 0 0 1.5px var(--leise); }
.stand.cancelled .punkt { background: var(--linie); }
.stand.failed .punkt { background: var(--rot); }
.stand.ohne .punkt { background: none; }

/* Zähler wie die Pillen: kleine Zahlen mit Punkten */
.zaehler { display: inline-flex; gap: 14px; white-space: nowrap; color: var(--leise); }
.zaehler span { display: inline-flex; align-items: baseline; gap: 5px; }
.zaehler .punkt { width: 7px; height: 7px; position: relative; top: -1px; }

/* Fortschrittsbalken */
progress { display: block; width: 100%; max-width: 240px; height: 4px; margin: 6px 0 4px; border: 0; border-radius: 6px; background: var(--linie); appearance: none; }
progress::-webkit-progress-bar { border-radius: 6px; background: var(--linie); }
progress::-webkit-progress-value { border-radius: 6px; background: var(--text); }
progress::-moz-progress-bar { border-radius: 6px; background: var(--text); }

/* Meldung, Leerzustand */
.meldungen { display: grid; gap: 8px; margin-bottom: 20px; }
.meldung { margin: 0; padding: 8px 12px; border-radius: var(--r); background: var(--flaeche); }
.meldung.error { background: var(--rot-bg); color: #8f241c; }
.leerzustand { color: var(--leise); padding: 40px 0; text-align: center; }
.warnung { color: var(--rot); }

/* Neue Analyse: zwei Felder nebeneinander, die Auswahl als Tokens im Feld, die Treffer als Liste unter dem Feld
   (ein Häkchen bei den gewählten), Dialoge fürs Hochladen und den eingefügten Text, der Fuß rechnet die Analysen aus. */
.einstellen { display: grid; gap: 24px; }
.paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.wahl { position: relative; }
.wahl-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.wahl-kopf label { font-weight: 500; }
.tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: var(--feld); padding: 4px 6px; background: #fff; border: 1px solid var(--rand); border-radius: var(--r); cursor: text; }
.tokens:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-bg); }
.tokens.ziehen { border-color: var(--akzent); background: var(--akzent-bg); }
.tokens input { flex: 1 0 120px; width: auto; height: calc(var(--feld) - 10px); padding: 0 4px; border: 0; background: none; }
.tokens input:focus { box-shadow: none; }
.tokens input::-webkit-search-cancel-button { display: none; }  /* das × gehört den Tokens */
.token { display: inline-flex; align-items: center; height: calc(var(--feld) - 10px); padding-left: 10px; background: var(--akzent-bg); border-radius: 4px; max-width: 100%; }
.token > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weg { flex: none; width: calc(var(--feld) - 10px); height: calc(var(--feld) - 10px); border: 0; border-radius: 4px; background: none; color: var(--leise); font-size: 16px; line-height: 1; cursor: pointer; }
.weg:hover { background: #fff; color: var(--text); }
.wahl .liste { position: absolute; left: 0; right: 0; z-index: 2; margin-top: 4px; box-shadow: 0 8px 24px rgba(17, 19, 24, .08); }
.wahl .liste > button { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 8px; padding: 6px 8px; }
.wahl .liste > button::before { content: ""; grid-row: span 2; color: var(--akzent); text-align: center; }
.wahl .liste > .gewaehlt::before { content: "✓"; }
.wahl .liste small { color: var(--leise); font-size: 12px; overflow-wrap: anywhere; }
.einstellen > .fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 16px; border-top: 1px solid var(--linie); }
.zusammenfassung { margin: 0; color: var(--leise); }
.dialog { width: min(520px, 100% - 32px); padding: 24px; border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 16px 48px rgba(17, 19, 24, .16); color: var(--text); }
.dialog::backdrop { background: rgba(17, 19, 24, .4); }
.dialog[open], .dialog > form { display: grid; gap: 16px; }
.dialog h2 { margin: 0; }
.dialog-fuss { display: flex; justify-content: flex-end; align-items: center; gap: 24px; }
.dateien { display: grid; gap: 16px; }
.datei .angaben { display: block; font-size: 13px; margin-bottom: 4px; overflow-wrap: anywhere; }
.datei.fertig { display: none; }
.jobs .zustand { min-width: 220px; }
.jobs .zustand .angaben { display: block; font-size: 13px; }
.jobs .zeit, .jobs .zahl { color: var(--leise); font-size: 13px; white-space: nowrap; }
.jobs .zeit span { display: block; }
.jobs details ul { margin: 4px 0 0; padding-left: 16px; font-size: 13px; color: var(--leise); }
.jobs summary { cursor: pointer; list-style: none; }
.jobs summary::after { content: " ▸"; color: var(--leise); }
.jobs details[open] summary::after { content: " ▾"; }

/* Quelle lesen */
.lesenavigation { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0 24px; }
.lesenavigation input[type=number] { width: 80px; }
.lesenavigation input[type=search] { width: 260px; }
.lesenavigation form { display: flex; align-items: center; gap: 6px; }
.quelltext { max-width: 80ch; font-size: 15px; line-height: 1.6; }
.quelltext table { border-collapse: collapse; font-size: 13px; margin: 12px 0; }
.quelltext td, .quelltext th { border: 1px solid var(--linie); padding: 4px 6px; vertical-align: top; }
.seitenmarke { margin: 32px 0 8px; padding-top: 8px; border-top: 1px solid var(--linie); color: var(--leise); font: 500 12px var(--ui); }
.seitenmarke:target, .quelltext section:target { background: var(--akzent-bg); }
button.mehr { display: block; margin: 16px auto; }
.treffer-liste { margin: 0 0 24px; }
.treffer-liste li { margin-bottom: 6px; }
.umbenennen .zeile { display: flex; gap: 8px; max-width: 560px; }
.gliederung ul { list-style: none; padding-left: 0; }
.gliederung .ebene-3 { padding-left: 16px; }
.gliederung .ebene-4, .gliederung .ebene-5, .gliederung .ebene-6 { padding-left: 32px; }

/* Quellen im Artikel */
.quellenliste { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--linie); }
.quellenliste li { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.quellenliste li > div { flex: 1; min-width: 0; }
.quellenliste li > div > a { color: var(--text); font-weight: 500; }
.quellenliste .angaben { display: block; font-size: 13px; }
.spalte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.hinweis { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-radius: var(--r); background: var(--akzent-bg); margin-bottom: 24px; }
.hinweis p { margin: 0; }

/* Anmelden */
.anmelden { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.anmelden form { width: 100%; max-width: 320px; display: grid; gap: 16px; }
.anmelden .marke { font-size: 18px; text-align: center; margin-bottom: 12px; }

/* ── Artikel-Ansicht: Artikel | Prüfung | PDF ─────────────────────────────── */
.seite { display: grid; grid-template-columns: minmax(0, 1fr); }
/* Ab 1440 px wie entworfen; schmaler teilen sich Artikel und PDF, was neben dem Panel bleibt, statt seitlich zu scrollen */
.seite:has(#panel *) { grid-template-columns: minmax(min(520px, 100% - 400px), 1fr) 400px; }
.seite:has(#pdf *) { grid-template-columns: minmax(min(520px, 50% - 200px), 760px) 400px minmax(min(520px, 50% - 200px), 1fr); }
#panel:not(:has(*)), #pdf:not(:has(*)) { display: none; }
/* Eine Spalte von 66 Zeichen der Artikelschrift für Kopf und Text, damit beide bündig stehen */
.inhalt { padding: 32px 36px 96px; min-width: 0; display: grid; grid-template-columns: minmax(0, 66ch); justify-content: center; align-content: start; font: 16px var(--lese); }
.inhalt > .kopf, .inhalt > .meldungen { font: 14px/1.5 var(--ui); }
.kopf { padding-bottom: 20px; margin-bottom: 32px; border-bottom: 1px solid var(--linie); }
.kopf .zeile { display: flex; align-items: flex-start; gap: 16px; }
.kopf h1 { flex: 1; }
.aktionen { display: flex; gap: 8px; flex: none; }
.aktionen form { margin: 0; }
.meta { color: var(--leise); margin: 6px 0 14px; }
.meta a { color: var(--leise); text-decoration: underline; text-decoration-color: #c9cbd3; text-underline-offset: 2px; }
.meta a:hover { color: var(--text); }
.pruefung-laeuft { margin: -4px 0 14px; color: var(--leise); }
.pruefung-laeuft .link { color: var(--leise); text-decoration: underline; text-underline-offset: 2px; }
.pruefung-laeuft .link:hover { color: var(--text); }
.pruefung-laeuft progress { max-width: none; }
.pruefung-laeuft .erklaerung { margin: 4px 0 0; font-size: 13px; max-width: 65ch; }
.filter { display: flex; flex-wrap: wrap; gap: 6px; }
.filter button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--linie); background: #fff; border-radius: 999px; padding: 3px 11px 3px 9px; color: var(--leise); cursor: pointer; }
.filter button b { font-weight: 600; color: var(--text); }
.filter button.an { background: var(--flaeche); border-color: #d6d7dd; color: var(--text); }
.filter button:disabled { cursor: default; }
.filter button:not(.an) .punkt { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; color: var(--grau); }
.filter button:not(.an) .punkt.falsch { color: var(--rot); }
.filter button:not(.an) .punkt.richtig { color: var(--gruen); }

/* Artikeltext */
article { font: 16px/26px var(--lese); color: #444; overflow-wrap: break-word; }
article h2 { font: 400 24px/33px var(--lese-h); margin: 44px 0 10px; color: #444; }
article h3 { font: 400 21px/30px var(--lese-h); margin: 30px 0 8px; color: #444; }
article h4 { font: 400 18px/26px var(--lese-h); margin: 24px 0 8px; color: #444; }
article > :first-child > :first-child { margin-top: 0; }  /* im Raster fällt der Abstand nicht mit dem des Kopfs zusammen */
article p { margin: 0 0 12px; }
article ul, article ol { padding-left: 46px; margin: 0 0 12px; }
article li { margin: 0 0 6px; }
article blockquote:not(.beleg) { background: var(--flaeche); border-left: 3px solid var(--linie); border-radius: 0 var(--r) var(--r) 0; padding: 14px 20px 4px; margin: 4px 0 20px; }
article blockquote:not(.beleg)::before { content: "Info"; display: block; font: 500 11px/1 var(--ui); text-transform: uppercase; letter-spacing: .07em; color: var(--leise); margin-bottom: 8px; }
.absatz { margin: 0 0 8px; }
.absatz.offen { margin-left: -22px; padding-left: 20px; border-left: 2px solid var(--akzent); }
article table { border-collapse: collapse; font-size: 14px; line-height: 1.45; margin: 0 0 16px; display: block; overflow-x: auto; }
article th, article td { border: 1px solid var(--linie); padding: 6px 8px; text-align: left; vertical-align: top; }
article th { background: var(--flaeche); font-weight: 600; }
.satz { cursor: pointer; border-radius: 2px; padding: 1px 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.satz:hover { background: var(--flaeche); }
.zeige-falsch .satz.falsch { background: var(--rot-bg); }
.zeige-falsch .satz.falsch:hover { background: #f8dcd8; }
.satz.offen { background: var(--akzent-bg); }
.zeige-falsch .satz.falsch.offen { background: var(--rot-aktiv); }
.zeige-nb .satz.nicht_behandelt { text-decoration: underline dotted #b5b9c4; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.zeige-richtig .satz.richtig { text-decoration: underline; text-decoration-color: #a9d7b9; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.befunde { font: 14px/1.5 var(--ui); color: var(--leise); list-style: none; padding: 0 !important; }
.delta { display: inline-flex; align-items: center; gap: 6px; font: 13px/1 var(--ui); color: var(--leise); margin: 0 0 20px; padding: 4px 8px 4px 0; border-radius: var(--r); cursor: pointer; }
.delta:hover { color: var(--akzent); text-decoration: none; }
.delta b { font-weight: 500; color: var(--text); }
.delta:hover b { color: inherit; }
.delta.offen { color: var(--text); background: var(--akzent-bg); padding-left: 8px; margin-left: -8px; }

/* Panel Mitte */
.panel, .pdf { position: sticky; top: 48px; height: calc(100vh - 48px); overflow: auto; border-left: 1px solid var(--linie); background: #fff; }
.panel { padding: 22px 24px 48px; }
.panel-kopf { position: relative; padding-right: 30px; margin-bottom: 6px; }
.label { display: block; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--leise); margin: 0 0 6px; }
.frage { color: var(--leise); margin: 4px 0 0; }
.satz-zitat { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.45; letter-spacing: -.005em; }
.bilanz { color: var(--leise); margin: 8px 0 18px; }
.bilanz .rot { color: var(--rot); font-weight: 500; }
.bilanz .gruen { color: var(--gruen); font-weight: 500; }
.schliessen { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--leise); cursor: pointer; width: 28px; height: 28px; border-radius: var(--r); position: absolute; right: -6px; top: -4px; }
.schliessen:hover { background: var(--flaeche); color: var(--text); }
/* Ein Befund je Quelle: Urteilswort, ein Satz, Zitate mit Herkunft im letzten Fuß, bei Rot die Korrektur */
.befund { padding: 16px 0 14px; border-top: 1px solid var(--linie); }
.befund .wort { margin: 0 0 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--leise); }
.befund.falsch .wort { color: var(--rot); }
.befund.richtig .wort { color: var(--gruen); }
.befund .abgleich, .stumm .abgleich { margin: 0 0 10px; color: var(--text); }
.befund .vorbehalt { margin: 0 0 10px; color: var(--leise); }
.herkunft { margin: 0; font-size: 13px; color: var(--leise); }
.beleg { margin: 0 0 6px; padding: 2px 0 2px 12px; border-left: 2px solid var(--rot); }
.richtig .beleg, .beleg.plus { border-left-color: #8fcaa4; }
.beleg q { quotes: "„" "“"; display: block; color: #3a3e48; font-size: 13.5px; line-height: 1.5; }
.beleg.tabelle q::before { content: "Tabelle · "; }
.beleg.tabelle q { quotes: none; }
.beleg footer { margin-top: 5px; font-size: 13px; color: var(--leise); }
.beleg footer .qn { display: block; font-weight: 500; white-space: normal; overflow: visible; }
.beleg footer a { color: var(--leise); white-space: nowrap; }
.beleg footer a:hover, .beleg footer a.aktiv, .zitat a.aktiv { color: var(--akzent); }
.beleg footer a.aktiv, .zitat a.aktiv { font-weight: 500; }
.beleg.unbelegt, .nicht_behandelt .beleg { border-left-color: var(--linie); }
details.mehr { margin: 2px 0 8px 14px; font-size: 13px; }
details.mehr > summary { list-style: none; cursor: pointer; color: var(--leise); }
details.mehr[open] > summary { margin-bottom: 8px; }
.korrektur { margin: 12px 0 0; padding: 10px 12px; background: var(--flaeche); border-radius: 6px; font-size: 13.5px; }
.korrektur .label { margin-bottom: 3px; font-size: 10.5px; }
.erklaerung { margin: 12px 0 6px; font-size: 13px; line-height: 1.5; color: #4a4f5c; }
.begr-text { margin-top: 6px; color: #4a4f5c; }
.begr-text > *, .erklaerung > * { margin: 0 0 6px; }
.erklaerung > :last-child { margin-bottom: 0; }
.begr-text ol, .begr-text ul, .erklaerung ol, .erklaerung ul { padding-left: 18px; }
.begr-text :is(h1, h2, h3, h4), .erklaerung :is(h1, h2, h3, h4) { font-size: 13px; font-weight: 600; }
.stumm { border-top: 1px solid var(--linie); padding: 14px 0 0; color: var(--leise); }
.stumm summary { cursor: pointer; list-style: none; }
.stumm ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; font-size: 13px; }
.stumm .abgleich { margin-bottom: 6px; }
.stumm .beleg { border-left-color: var(--linie); }

/* Delta im Panel */
.d-fazit { color: #2b2f38; margin: 12px 0 18px; }
details.quellen-thema > summary { cursor: pointer; list-style: none; color: var(--leise); }
details.quellen-thema > summary::after { content: " ▸"; }
details.quellen-thema[open] > summary::after { content: " ▾"; }
details.quellen-thema ul { margin: 8px 0; padding: 0; list-style: none; font-size: 13px; }
details.quellen-thema li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
details.quellen-thema li span:last-child { color: var(--leise); flex: none; }
.d-gruppe { border-top: 1px solid var(--linie); padding: 14px 0 6px; margin-top: 14px; }
.d-item { display: grid; grid-template-columns: 16px 1fr; gap: 0 6px; margin: 0 0 14px; }
.d-item .z { font-weight: 600; line-height: 1.5; }
.d-item .z.plus { color: var(--gruen); }
.d-item .z.minus { color: var(--rot); }
.d-item p { margin: 0 0 4px; }
details.zitat > summary { list-style: none; cursor: pointer; font-size: 13px; color: var(--leise); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 4px; }
details.zitat > summary > * { grid-column: 2; }
details.zitat > summary::before { content: "▸"; }
details.zitat[open] > summary::before { content: "▾"; }
details.zitat .beleg { margin: 6px 0 0; }
.satzref { color: var(--leise); font-size: 13px; }
.satzref q { quotes: "„" "“"; color: #3a3e48; }
.satzref a { color: var(--leise); }
details.vorschlag { border-top: 1px solid var(--linie); padding: 14px 0 0; margin-top: 8px; }
details.vorschlag > summary { cursor: pointer; list-style: none; font-weight: 500; }
details.vorschlag > summary::after { content: " ▸"; }
details.vorschlag[open] > summary::after { content: " ▾"; }
.v-text { margin: 12px 0 10px; font: 15px/1.6 var(--lese); color: #444; }
.v-text p, .v-text ul, .v-text ol { margin: 0 0 10px; }
.v-text ul, .v-text ol { padding-left: 22px; }
.v-text mark { background: var(--gruen-bg); color: inherit; padding: 0 2px; border-radius: 2px; }

/* PDF-Spalte */
.pdf { display: flex; flex-direction: column; background: #ededf0; }
.pdf-kopf { display: flex; align-items: center; gap: 14px; padding: 0 10px 0 16px; height: 44px; background: #fff; border-bottom: 1px solid var(--linie); font-size: 13px; flex: none; }
.pdf-kopf .qn { font-weight: 500; flex: 1; min-width: 0; }
.pdf-kopf .seite-nr { color: var(--leise); flex: none; }
.pdf-kopf nav { display: flex; align-items: center; gap: 2px; flex: none; }
.pdf-kopf nav button, .pdf-kopf nav a { border: 0; background: none; padding: 4px 7px; border-radius: var(--r); color: var(--text); cursor: pointer; display: inline-flex; }
.pdf-kopf nav button:hover, .pdf-kopf nav a:hover { background: var(--flaeche); text-decoration: none; }
.pdf-kopf nav button:disabled { color: var(--grau); background: none; cursor: default; }
.pdf-kopf nav .trenn { width: 1px; height: 16px; background: var(--linie); margin: 0 6px; }
.pdf-kopf .x { font-size: 18px; line-height: 1; }
.pdf-seite { overflow: auto; padding: 14px; flex: 1; position: relative; }
.pdf-seite img { display: block; width: 100%; height: auto; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); background: #fff; }
.pdf-seite.zoom img { width: var(--zoom); max-width: none; }

/* Handy: die Artikel-Ansicht braucht drei Spalten */
.sperre { display: none; }
@media (max-width: 900px) {
  .artikelansicht .seite, .artikelansicht .leiste { display: none; }
  .sperre { display: flex; min-height: 100vh; align-items: center; justify-content: center; text-align: center; padding: 40px; color: var(--leise); }
  .sperre b { display: block; color: var(--text); font-size: 18px; margin-bottom: 8px; font-weight: 600; }
}

/* Hochladen auf breiten Seiten: eine Zeile, Felder und Knopf auf einer Linie, Meldungen darunter */
@media (min-width: 721px) {
  .karte > .hochladen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0 16px; }
  .karte > .hochladen > .feld { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .karte > .hochladen > .btn { grid-area: 2 / 3; }
}

/* Übrige Seiten auf dem Handy: eine Spalte, Tap-Ziele ≥ 44 px */
@media (max-width: 720px) {
  .leiste { gap: 16px; padding: 0 12px; }
  .leiste .nutzer span { display: none; }
  .mitte { padding: 20px 16px 64px; }
  .seitenkopf { flex-wrap: wrap; }
  :root { --feld: 44px; }
  input, textarea { font-size: 16px; }  /* kleiner zoomt Safari beim Tippen hinein */
  .karte { padding: 16px; }
  .liste { max-height: none; }
  .liste > button { padding: 12px; }
  .paar { grid-template-columns: minmax(0, 1fr); }
  .wahl .liste { max-height: 320px; }
  button.link, .tabelle .titel a { min-height: 44px; }
  .chip button { min-width: 44px; min-height: 44px; margin: -9px -4px -9px -6px; }  /* Tap-Ziel, der Chip bleibt fast so flach */
  .datei-feld .btn::before { content: ""; position: absolute; inset: -5px 0; }  /* Tap-Ziel 44 px, der Knopf bleibt im Feld */
  .tabelle thead { display: none; }
  .tabelle tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
  .tabelle td { padding: 0; border: 0; }
  .tabelle td.titel { grid-column: 1 / -1; }
  .tabelle .zahl { text-align: left; }
  .jobs .zustand { min-width: 0; grid-column: 1 / -1; }
}

/* Druckansicht (?print): einspaltig, alles offen, keine Knöpfe */
.druckansicht .leiste { display: none; }
.druck { max-width: 72ch; margin: 0 auto; padding: 32px 24px; }
.druck .meta { margin-bottom: 24px; }
.druck .satz { cursor: auto; }
.druck .satz.falsch { background: none; text-decoration: underline; text-decoration-color: var(--rot); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.druck .satz[data-n]::after { content: attr(data-n); font: 600 11px var(--ui); color: var(--rot); vertical-align: super; margin-left: 1px; }
.druck .satz[data-satz]::after { content: attr(data-satz); font: 400 10px var(--ui); color: var(--leise); vertical-align: super; margin-left: 1px; }
.fussnoten { font: 13px/1.5 var(--ui); color: var(--text); margin: 4px 0 28px; padding: 12px 0 0; border-top: 1px solid var(--linie); }
.fussnoten ol { margin: 0; padding-left: 22px; }
.fussnoten li { margin-bottom: 10px; }
.fussnoten :is(.beleg, .erklaerung) { margin-left: 0; }
.fussnoten .urteil.falsch { color: var(--rot); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.fussnoten .d-item { margin-bottom: 8px; }
@media print {
  .leiste, .aktionen, .filter, .delta, .schliessen { display: none !important; }
  .druck { padding: 0; max-width: none; }
  details > summary { display: none; }
  a { color: inherit; }
}