/* Verwaltercockpit — Gestaltung nach JARVIS (Tokens gelesen am 24.09.2026, siehe
   projekte/verwaltercockpit/2026-09-24-jarvis-sichtung.md) mit Schleumer-CD (Jost, Gelb, Radius 0).
   Keine Inline-Styles: die CSP erlaubt nur 'self'. */

@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #f2f4f0; --surface: #fff; --surface-soft: #f8f9f6; --line: #dce2df; --line-soft: #e9edeb;
  --ink: #111c24; --ink-soft: #34424b; --muted: #71808a; --navy: #1c2d36;
  --yellow: #f4cf19; --yellow-soft: #fff6bf; --green: #1d7553; --green-soft: #e9f5ef;
  --red: #bf4a3b; --red-soft: #fff0ed; --blue: #335d72; --blue-soft: #eaf2f5;
  --ok-ink: #1f7a3d; --warn-ink: #96690a;
  --leiste: #111c24; --leiste-text: #edf4f7; --leiste-muted: #8d9ba4; --leiste-aktiv: #1c2d36;
  --action-primary: var(--yellow); --action-ink: #172833;
  --control-height: 48px; --control-radius: 0px; --panel-radius: 6px;
  --shadow: 0 18px 55px #1a2a3214;
  --reading-font: Arial, "Liberation Sans", system-ui, sans-serif;
  --title-font: 'Jost', Arial, "Liberation Sans", sans-serif;
  color-scheme: light;
}
/* Dunkel: ausdrücklich gewählt oder Systemeinstellung, solange nicht „Hell" gewählt ist. */
:root[data-thema="dunkel"] {
  --paper: #070b0f; --surface: #121b23; --surface-soft: #17232d; --line: #26343f; --line-soft: #1d2a34;
  --ink: #edf4f7; --ink-soft: #c3ced5; --muted: #8d9ba4; --navy: #0b1116;
  --yellow-soft: #3a3312; --green-soft: #12291f; --red-soft: #2e1714; --blue-soft: #14242d;
  --leiste: #0b1116; --leiste-aktiv: #17232d; --shadow: none;
  --blue: #9cc3d6; --warn-ink: #f0cf5a; --green: #5cc497; --red: #f08a7a;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --paper: #070b0f; --surface: #121b23; --surface-soft: #17232d; --line: #26343f; --line-soft: #1d2a34;
    --ink: #edf4f7; --ink-soft: #c3ced5; --muted: #8d9ba4; --navy: #0b1116;
    --yellow-soft: #3a3312; --green-soft: #12291f; --red-soft: #2e1714; --blue-soft: #14242d;
    --leiste: #0b1116; --leiste-aktiv: #17232d; --shadow: none;
  --blue: #9cc3d6; --warn-ink: #f0cf5a; --green: #5cc497; --red: #f08a7a;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--reading-font); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--paper); }
h1, h2, h3 { font-family: var(--title-font); font-weight: 500; line-height: 1.2; margin: 0; }
a { color: inherit; }
[hidden] { display: none !important; }

/* Rahmen: Seitenleiste + Arbeitsfläche */
.rahmen { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.leiste { background: var(--leiste); color: var(--leiste-text); display: flex; flex-direction: column; padding: 28px 18px 18px; gap: 24px; }
.marke { display: flex; align-items: center; gap: 12px; padding: 0 6px; }
.marke-zeichen { width: 36px; height: 36px; background: var(--yellow); flex: none; clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%); }
.marke b { display: block; font-family: var(--title-font); font-weight: 600; font-size: 17px; letter-spacing: .02em; }
.marke span { display: block; font-size: 12px; color: var(--leiste-muted); }
.leiste-titel { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--leiste-muted); margin: 0 6px 8px; }
.raeume { display: flex; flex-direction: column; gap: 2px; }
.raum { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 12px;
  text-decoration: none; color: var(--leiste-text); border-left: 3px solid transparent; font-size: 15px; }
.raum:hover { background: var(--leiste-aktiv); }
.raum[aria-current="page"] { background: var(--leiste-aktiv); border-left-color: var(--yellow); font-weight: 600; }
.raum.folgt { color: var(--leiste-muted); cursor: default; }
.raum.folgt:hover { background: transparent; }
.raum em { font-style: normal; font-size: 12px; color: var(--leiste-muted); }
.benutzer { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px 6px 0; border-top: 1px solid #ffffff1a; }
.benutzer .kuerzel { width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); color: var(--action-ink);
  display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.benutzer div { min-width: 0; }
.benutzer b { display: block; font-size: 14px; }
.benutzer span { display: block; font-size: 12px; color: var(--leiste-muted); }
.benutzer button { margin-left: auto; }

.flaeche { display: flex; flex-direction: column; min-width: 0; }
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 40px; background: var(--surface); border-bottom: 1px solid var(--line); }
.kopf .logo { height: 22px; width: auto; display: block; }
:root[data-thema="dunkel"] .kopf .logo { filter: brightness(1.8); }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) .kopf .logo { filter: brightness(1.8); } }
.thema { display: inline-flex; border: 1px solid var(--line); }
.thema button { min-height: 36px; padding: 6px 14px; border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: 14px; cursor: pointer; }
.thema button + button { border-left: 1px solid var(--line); }
.thema button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

main { padding: 40px; max-width: 1280px; width: 100%; }
.oberzeile { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin: 0 0 8px; }
main h1 { font-size: 40px; }
.einleitung { color: var(--ink-soft); margin: 10px 0 0; max-width: 72ch; }

/* Kacheln */
.gruppe { margin-top: 36px; }
.gruppe h2 { font-size: 20px; margin-bottom: 14px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.kachel { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; min-height: 150px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--panel-radius); box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
  border-top: 4px solid var(--yellow); transition: transform .12s ease, border-color .12s ease; }
.kachel:hover, .kachel:focus-visible { transform: translateY(-2px); border-color: var(--ink-soft); outline: none; }
.kachel h3 { font-size: 19px; }
.kachel p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.kachel .fuss { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--muted); }
.kachel .fuss .ziel { text-decoration: underline; text-underline-offset: 3px; }
.marker { display: inline-block; padding: 1px 8px; font-size: 12px; background: var(--blue-soft); color: var(--blue); }
.marker.admin { background: var(--yellow-soft); color: var(--warn-ink); }

.hinweisband { margin-top: 24px; padding: 14px 18px; background: var(--red-soft); border-left: 4px solid var(--red); color: var(--ink); font-size: 15px; }
.hinweisband ul { margin: 6px 0 0; padding-left: 20px; }
/* Messung (§12): schlichte Tabellen, Zahlen rechtsbündig. */
.messkopf { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 20px; }
.messabschnitt { margin-top: 32px; }
.messtabelle { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; background: var(--surface); }
.messtabelle th, .messtabelle td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.messtabelle th { color: var(--ink-soft); font-weight: 600; }
.messtabelle td.zahl, .messtabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.messtabelle .erklaerung { display: block; color: var(--ink-soft); font-size: 13px; }
.messtabelle .erfuellt { color: var(--ok-ink); font-weight: 600; }
/* Störband (R31): das Cockpit antwortet nicht oder mit Fehler; die Anzeige ist nicht aktuell. */
.stoerband { margin-top: 24px; padding: 14px 18px; background: var(--red-soft); border: 2px solid var(--red); color: var(--ink); font-size: 15px; font-weight: 600; }
.leer { margin-top: 36px; padding: 28px; background: var(--surface); border: 1px dashed var(--line); color: var(--ink-soft); }

/* Schaltflächen */
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); padding: 12px 20px;
  border: 0; border-radius: var(--control-radius); background: var(--action-primary); color: var(--action-ink);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.knopf:hover { filter: brightness(.95); }
.textknopf { background: none; border: 0; padding: 4px; font: inherit; font-size: 13px; color: var(--leiste-muted); text-decoration: underline; cursor: pointer; }

/* Anmeldung */
.anmeldung { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--leiste); }
.anmeldekarte { width: 100%; max-width: 460px; background: var(--surface); padding: 36px; border-top: 4px solid var(--yellow); }
.anmeldekarte .logo { height: 22px; width: auto; margin-bottom: 28px; }
.anmeldekarte h1 { font-size: 30px; margin-bottom: 10px; }
.anmeldekarte p { color: var(--ink-soft); }
.dev { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.dev label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.dev select { width: 100%; min-height: 44px; padding: 8px 10px; font: inherit; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.dev .knopf { margin-top: 12px; width: 100%; background: var(--ink); color: var(--paper); }
.fehlertext { color: var(--red); font-size: 14px; }

@media (max-width: 860px) {
  .rahmen { grid-template-columns: 1fr; }
  .leiste { padding: 16px; gap: 12px; }
  .raeume { flex-direction: row; flex-wrap: wrap; }
  .leiste-titel { display: none; }
  .benutzer { margin-top: 0; }
  .kopf, main { padding-left: 20px; padding-right: 20px; }
  main h1 { font-size: 30px; }
}

/* Seite „Heute" (Aufgabe 2) — Aufbau nach der JARVIS-Tageslage: Kennzahlen, Quellen, Punkte */
.vertretung { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.person-wahl { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.person-wahl select { min-height: 36px; padding: 4px 8px; font: inherit; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }

.kennzahlen { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.kennzahl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--panel-radius); padding: 18px 20px; box-shadow: var(--shadow); border-top: 4px solid var(--line); }
.kennzahl span { font-size: 14px; color: var(--muted); }
.kennzahl strong { display: block; font-family: var(--title-font); font-size: 40px; font-weight: 500; line-height: 1.1; margin: 6px 0; }
.kennzahl p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.kennzahl.rot { border-top-color: var(--red); }
.kennzahl.gelb { border-top-color: var(--yellow); }
.kennzahl.gruen { border-top-color: var(--green); }
.kennzahl.stoerung { border-top-color: var(--blue); }

.quellen { margin-top: 28px; }
.quellen h2, .punkte h2 { font-size: 20px; margin-bottom: 10px; }
.quellen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.quellen-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin-bottom: 10px; }
.quellen-kopf h2 { margin-bottom: 0; }
.quellen-hinweis { margin: 0; font-size: 13px; color: var(--muted); flex: 1 1 260px; }
.quellen-kopf .person-wahl { margin-left: auto; }
.quelle { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--muted); font-size: 14px; color: var(--ink); }
.quelle label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.quelle input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); flex: none; }
.quelle-kopf b { flex: 1 1 auto; }
.quelle .anzahl { font-family: var(--title-font); font-weight: 600; font-size: 15px; color: var(--ink); margin-left: auto; white-space: nowrap; }
.quelle-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; padding-left: 26px; font-size: 13px; }
.teilquellen { display: flex; flex-direction: column; gap: 2px; padding-left: 26px; border-top: 1px solid var(--line-soft); padding-top: 6px; }
.teilquelle { font-size: 13px; color: var(--ink-soft); }
.teilquelle input[type="checkbox"] { width: 15px; height: 15px; }
.teilquelle .anzahl { font-size: 13px; }
.auswahl { margin: 24px 0 -16px; font-size: 14px; color: var(--ink-soft); }
.quelle .zustand { font-weight: 600; }
.quelle .stand, .quelle .grund { color: var(--muted); font-size: 13px; }
.quelle.zustand-ok { border-left-color: var(--green); }
.quelle.zustand-ok .zustand { color: var(--ok-ink); }
.quelle.zustand-veraltet, .quelle.zustand-fehler, .quelle.zustand-keine-Lieferung { border-left-color: var(--red); background: var(--red-soft); }
.quelle.zustand-veraltet .zustand, .quelle.zustand-fehler .zustand, .quelle.zustand-keine-Lieferung .zustand { color: var(--red); }
.quelle.zustand-nicht-angeschlossen { opacity: .75; }

.punkte { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.punkte > div { display: flex; flex-direction: column; gap: 12px; }
.punkt { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--line); border-radius: var(--panel-radius); padding: 16px 20px; box-shadow: var(--shadow); }
.punkt.ampel-rot { border-left-color: var(--red); }
.punkt.ampel-gelb { border-left-color: var(--yellow); }
.punkt.ampel-gruen { border-left-color: var(--green); }
.punkt h3 { font-size: 18px; margin: 6px 0 4px; }
.punkt-kopf { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); align-items: center; }
.ampel-marke { padding: 1px 8px; font-weight: 700; font-size: 12px; }
.ampel-marke.rot { background: var(--red-soft); color: var(--red); }
.ampel-marke.gelb { background: var(--yellow-soft); color: var(--warn-ink); }
.ampel-marke.gruen { background: var(--green-soft); color: var(--green); }
.kurzlage { margin: 4px 0 0; color: var(--ink-soft); }
.empfaenger { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.vorschlaege { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.vorschlag { border: 1px solid var(--line-soft); background: var(--surface-soft); padding: 6px 10px; }
.vorschlag summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.vorschlag p { margin: 6px 0 2px; white-space: pre-line; color: var(--ink-soft); font-size: 15px; }
.links { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.weitergeleitet { margin: 10px 0 0; font-size: 14px; color: var(--blue); }
.bearbeiten { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 8px; font-size: 14px; }
.bearbeiten summary { cursor: pointer; color: var(--ink-soft); }
.bearbeiten-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.bearbeiten .notiz { flex: 1 1 260px; min-height: 36px; padding: 4px 10px; font: inherit; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.bearbeiten .an { min-height: 36px; padding: 4px 8px; font: inherit; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.knopf.klein { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.knopf.zweit { background: var(--ink); color: var(--paper); }
.bearbeiten-hinweis { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.bearbeiten .vorgang { flex: 1 1 220px; min-height: 36px; padding: 4px 10px; font: inherit; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.teams-haken { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-soft); }
.kandidaten, .treffer { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.kandidaten-titel { font-size: 13px; color: var(--muted); }
.kandidat { text-align: left; padding: 6px 10px; border: 1px solid var(--line); background: var(--surface-soft); font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.kandidat:hover { border-color: var(--ink); }
.kandidat b { font-family: var(--title-font); }
.kandidat em { color: var(--muted); font-style: normal; font-size: 13px; }
.anlegen { margin-top: 8px; border: 1px solid var(--line-soft); background: var(--surface-soft); padding: 6px 10px; }
.anlegen summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.zustaendige { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; align-items: center; }
.auftraege { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.auftrag { margin: 0; font-size: 14px; padding: 6px 10px; background: var(--blue-soft); color: var(--ink); border-left: 3px solid var(--blue); }
.auftrag.status-ok { background: var(--green-soft); border-left-color: var(--green); }
.auftrag.status-fehler { background: var(--red-soft); border-left-color: var(--red); }
.link { font-size: 14px; color: var(--blue); text-underline-offset: 3px; }
.hintergrund { margin-top: 8px; }
.hintergrund summary { cursor: pointer; font-family: var(--title-font); font-size: 18px; padding: 8px 0; }
.hintergrund > div { display: flex; flex-direction: column; gap: 12px; }
/* Seite „Benutzer“ (§15) */
.rechte-person, .rechte-zeile { background: var(--surface); border: 1px solid var(--line); padding: 12px 14px; margin-top: 10px; }
.rechte-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rechte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.rechte-person .erklaerung, .rechte-zeile .erklaerung { display: block; color: var(--ink-soft); font-size: 13px; }
.rechte-auswahl { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
.rechte-gruppe { border: 1px solid var(--line); padding: 6px 10px 8px; min-width: 220px; }
.rechte-gruppe legend { font-weight: 600; padding: 0 4px; }
.rechte-funktion { display: block; font-size: 14px; margin-top: 3px; }
/* Gesammelt speichern (29.09.2026): Leiste bleibt beim Scrollen sichtbar, geänderte Zeilen gelb markiert */
.speicherleiste { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--yellow); border-left-width: 6px; padding: 10px 14px; margin: 10px 0; }
.speicherleiste[hidden] { display: none; }
.speicherleiste-knoepfe { display: flex; gap: 12px; align-items: center; }
.rechte-person.geaendert { border-left: 6px solid var(--yellow); }
.gespeichert { color: var(--ink-soft); font-size: 14px; min-height: 1em; }
.dialog-knoepfe { display: flex; gap: 12px; align-items: center; }
/* Seite „Statistik“ (§16) */
.statistik-filter { display: flex; flex-wrap: wrap; gap: 14px; }
.messabschnitt h2 .csv { font-size: 13px; font-weight: 600; margin-left: 10px; text-decoration: underline; }
/* Seitenleiste mit Quellen und Anwendungen (Albert, 28.09.2026) */
.leiste-gruppe { margin: 0 0 6px 12px; }
.leiste-gruppe summary { cursor: pointer; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--leiste-muted); padding: 4px 6px; list-style-position: inside; }
.leiste-liste { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.leiste-eintrag { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; font-size: 14px; color: var(--leiste-text); text-decoration: none; border-left: 3px solid transparent; }
.leiste-eintrag:hover { background: var(--leiste-aktiv); }
.leiste-eintrag.aktiv { background: var(--leiste-aktiv); border-left-color: var(--yellow); }
.leiste-eintrag em { font-style: normal; font-size: 12px; color: var(--leiste-muted); }
.leiste-eintrag em.rot { color: #ff8a80; font-weight: 600; }
.leiste-eintrag.gestoert span::after { content: " ⚠"; }
/* Quellen-Kacheln kompakt, Teilbereiche aufklappbar */
.quellen-raster { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; align-items: start; }
.quelle { padding: 8px 10px; gap: 4px; }
.quelle-meta { font-size: 12px; }
.teilquellen-auf { padding-left: 26px; font-size: 13px; }
.teilquellen-auf summary { cursor: pointer; color: var(--ink-soft); }
.teilquellen-auf .teilquellen { padding-left: 0; margin-top: 4px; }
/* Sortierleiste */
.punkte > div.sortierleiste, .sortierleiste { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 4px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); }
.sortier-titel { font-size: 13px; color: var(--muted); margin-right: 4px; }
.sortierleiste button { font: inherit; font-size: 14px; padding: 6px 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.sortierleiste button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }
/* Aufgabenkarten strukturierter */
.punkt-kopf { align-items: center; }
.punkt-kopf .modul { font-weight: 600; color: var(--ink); }
.punkt-daten { margin-left: auto; display: flex; gap: 12px; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.punkt-daten .faellig { color: var(--red); }
.punkt-objekt { margin: 8px 0 2px; font-size: 16px; color: var(--ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.punkt-objekt b { font-family: var(--title-font); font-size: 17px; }
.punkt-objekt.ohne { color: var(--muted); font-size: 14px; }
.punkt-objekt .zustaendig { margin-left: auto; font-size: 13px; color: var(--ink-soft); background: var(--line-soft); padding: 2px 8px; }
/* „?“ an den Quellen-Kacheln und Erklärungsfenster (Albert, 29.09.2026) */
.quelle .frage { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); font: 600 13px/1 var(--title-font, inherit); cursor: pointer; padding: 0; }
.quelle .frage:hover { border-color: var(--ink); color: var(--ink); }
.erklaerung-dialog { max-width: 520px; border: 1px solid var(--line); padding: 20px 22px; background: var(--surface); color: var(--ink); }
.erklaerung-dialog::backdrop { background: rgba(0, 0, 0, .35); }
.erklaerung-dialog h3 { margin: 0 0 8px; }
.erklaerung-dialog p { margin: 0 0 10px; line-height: 1.5; }
.erklaerung-stand { font-size: 13px; color: var(--muted); }