:root {
  /* Tisch, Papier, Tinte, Königsblau, Rotstift, Textmarker, Lineatur */
  --papier: #e8ecf1;
  --weiss: #ffffff;
  --tinte: #1b2a4a;
  --grau: #55607a;
  --linie: #c5d3ea;
  --feldrand: #9fb0d0;
  --moos: #2346c4;          /* Akzent: alles Klickbare (Name aus der früheren Fassung) */
  --moos-hell: #e9eefc;
  --sand: #8a6a00;
  --sand-hell: #fff6c2;
  --marker: #ffe45c;
  --rot: #c2311f;
  --rotrand: #f0b4ab;
  --afb1: #dbe4fb;
  --afb2: #8ea6ee;
  --afb3: #2346c4;
  --radius: 6px;
  --schrift: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --druckschrift: "Literata", Georgia, "Times New Roman", serif;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-weight: 200 800; font-style: normal; font-display: swap;
  src: url("/static/schrift/atkinson-hyperlegible-next.woff2") format("woff2");
}
@font-face {
  font-family: "Literata"; font-weight: 200 900; font-style: normal; font-display: swap;
  src: url("/static/schrift/literata.woff2") format("woff2");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 16px/1.45 var(--schrift);
}

a { color: var(--moos); }

/* ---------------------------------------------------------------- Gerüst */
.kopf {
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding: 14px 28px;
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}
.marke { font-weight: 600; font-size: 17px; color: var(--tinte); text-decoration: none; }
.kopf nav { display: flex; gap: 20px; }
.kopf nav a { color: var(--grau); text-decoration: none; padding-bottom: 2px; }
.kopf nav a.aktiv { color: var(--tinte); border-bottom: 2px solid var(--moos); }

main { max-width: 1180px; margin: 0 auto; padding: 26px 28px 80px; }

h1 { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
h2 { font-size: 16px; font-weight: 600; margin: 26px 0 10px; }
.unterzeile { color: var(--grau); margin: 0 0 20px; }

.zeile { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.zwischen { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }

/* ---------------------------------------------------------------- Formulare */
label { display: block; font-size: 13px; color: var(--grau); margin-bottom: 3px; }

input[type=text], input[type=number], input[type=date], input[type=search],
select, textarea {
  font: inherit;
  color: var(--tinte);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 7px 9px;
  width: 100%;
}
textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--moos);
  outline-offset: 1px;
  border-color: var(--moos);
}

.feld { flex: 1 1 180px; }
.feld.schmal { flex: 0 0 110px; }
.feld.mittel { flex: 0 0 190px; }

.knopf {
  display: inline-block;
  font: inherit;
  border: 1px solid var(--moos);
  background: var(--moos);
  color: #fff;
  border-radius: var(--radius);
  padding: 7px 14px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.knopf:hover { background: #33593f; }
.knopf.leise { background: var(--weiss); color: var(--tinte); border-color: var(--linie); }
.knopf.leise:hover { border-color: var(--grau); }
.knopf.warnung { background: var(--weiss); color: var(--rot); border-color: var(--linie); }
.knopf.klein { padding: 3px 8px; font-size: 13px; }

/* ---------------------------------------------------------------- Filterleiste */
.filter {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 20px;
}

/* ---------------------------------------------------------------- Aufgabenliste */
.liste { display: flex; flex-direction: column; gap: 8px; }

.karte {
  display: flex;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--moos);
  border-radius: var(--radius);
}
.karte.material { border-left-color: var(--sand); }
.karte .kern { flex: 1; padding: 12px 14px; min-width: 0; }
.karte .kern a { color: var(--tinte); text-decoration: none; font-weight: 600; }
.karte .kern a:hover { text-decoration: underline; }
.karte .meta { font-size: 13px; color: var(--grau); margin-top: 3px; }
.karte .auszug {
  font-size: 14px; color: var(--grau); margin-top: 6px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* Punktespalte – dieselbe Rinne wie im PDF */
.punkte {
  flex: 0 0 78px;
  border-left: 1px solid var(--linie);
  padding: 12px 10px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--grau);
  font-size: 14px;
}
.punkte b { display: block; font-size: 18px; color: var(--tinte); font-weight: 600; }
.aktionen { flex: 0 0 auto; padding: 12px 12px; display: flex; align-items: center; gap: 6px; }

.marke-klein {
  display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 10px;
  background: var(--moos-hell); color: #2c503b;
}
.marke-klein.material { background: var(--sand-hell); color: #7a5518; }
.themen { display: inline-flex; gap: 6px; flex-wrap: wrap; }

.leer {
  border: 1px dashed var(--linie);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  color: var(--grau);
}

/* ---------------------------------------------------------------- Baukasten */
.baukasten { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 900px) { .baukasten { grid-template-columns: 1fr; } }

.teilkopf {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--linie); padding-bottom: 5px; margin: 22px 0 10px;
}
.teilkopf span { color: var(--grau); font-size: 13px; }

.summe {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 12px 16px; display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; font-variant-numeric: tabular-nums;
}
.summe strong { font-size: 20px; }

.punkte-eingabe { width: 56px; padding: 3px 5px; text-align: right; }

details.kopfdaten { margin-bottom: 22px; }
details.kopfdaten > summary {
  cursor: pointer; padding: 10px 14px; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--radius); font-weight: 600;
}
details.kopfdaten[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
details.kopfdaten .inhalt {
  background: var(--weiss); border: 1px solid var(--linie); border-top: 0;
  padding: 16px; display: flex; flex-direction: column; gap: 14px;
}

/* ---------------------------------------------------------------- Bilder */
.bildkacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.bildkachel {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 12px;
}
.bildkachel img { width: 100%; height: 150px; object-fit: contain; background: var(--papier); }
.bildkachel form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }

.hinweis { font-size: 13px; color: var(--grau); margin-top: 6px; }
form.inline { display: inline; }

/* ---------------------------------------------------------------- Stufenwahl */
.stufenwahl { display: flex; flex-wrap: wrap; gap: 6px; }
.stufenwahl .stufe {
  display: flex; align-items: center; gap: 5px; margin: 0;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--weiss); padding: 5px 10px; font-size: 14px; color: var(--tinte);
  cursor: pointer;
}
.stufenwahl .stufe input { width: auto; margin: 0; }
.stufenwahl .stufe:hover { border-color: var(--moos); }

/* ---------------------------------------------------------------- Fassungen */
.karte.veraltet { background: #fdfaf3; }
.karte.veraltet .kern > a::after {
  content: " · ältere Fassung";
  font-weight: 400; font-size: 13px; color: var(--sand);
}
.fassungshinweis {
  background: var(--sand-hell); border: 1px solid #e2d3b4;
  border-radius: var(--radius); padding: 10px 14px; margin: 0 0 18px; font-size: 14px;
}
pre.fassung {
  margin: 0; padding: 10px 12px; background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--radius);
  white-space: pre-wrap; font: 14px/1.5 inherit;
}

/* ---------------------------------------------------------------- Anmeldung */
.anmeldeseite { background: var(--papier); }
.anmeldung {
  max-width: 380px;
  margin: 0 auto;
  padding: 14vh 24px 40px;
}
.anmeldekarte {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--moos);
  border-radius: var(--radius);
  padding: 30px 28px 26px;
}
.anmeldekarte h1 { margin: 0; font-size: 21px; }
.anmeldekarte .unterzeile { margin: -12px 0 0; font-size: 14px; }
.anmeldekarte .knopf { width: 100%; padding: 10px; font-size: 16px; }
.anmeldekarte .merken {
  display: flex; align-items: center; gap: 8px;
  margin: -4px 0 0; font-size: 14px; color: var(--tinte); cursor: pointer;
}
.anmeldekarte .merken input { width: auto; }
.fehlermeldung {
  margin: 0;
  background: #fbeceb;
  border: 1px solid #e6c4c0;
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 14px;
  color: var(--rot);
}

/* Abmelden-Knopf in der Kopfzeile */
.kopf .abmelden { margin-left: auto; }
.kopf .abmelden button {
  font: inherit; font-size: 14px; color: var(--grau);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.kopf .abmelden button:hover { color: var(--tinte); text-decoration: underline; }

/* ---------------------------------------------------------------- Vorschau */
.vorschau-leiste {
  display: flex; align-items: center; gap: 8px;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius) var(--radius) 0 0; padding: 8px 10px;
}
.vorschau-leiste .abstand { flex: 1; }
.vorschau-rahmen {
  width: 100%; height: 78vh; min-height: 460px;
  border: 1px solid var(--linie); border-top: 0; border-radius: 0 0 var(--radius) var(--radius);
  background: var(--weiss);
}

/* ---------------------------------------------------------------- Anforderungsbereiche */
.afb-block { margin-top: 14px; }
.afb-balken {
  display: flex; height: 12px; overflow: hidden;
  border: 1px solid var(--linie); border-radius: 6px; background: var(--weiss);
}
.afb-stueck { display: block; height: 100%; }
.afb-1 { background: #6f9c7d; }
.afb-2 { background: #3c6b4f; }
.afb-3 { background: #1f3b2a; }
.afb-0 { background: #c9cdc4; }
.afb-zahlen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 13px; }
.afb-marke { display: flex; align-items: center; gap: 6px; color: var(--grau); }
.afb-marke::before {
  content: ""; width: 10px; height: 10px; border-radius: 2px; background: currentColor;
}
.afb-marke.afb-1::before { background: #6f9c7d; }
.afb-marke.afb-2::before { background: #3c6b4f; }
.afb-marke.afb-3::before { background: #1f3b2a; }
.afb-marke.afb-0::before { background: #c9cdc4; }

/* ---------------------------------------------------------------- Operatoren */
.operatorwarnung, .operatortreffer {
  margin: 8px 0 0; padding: 8px 11px; font-size: 13px;
  border-radius: var(--radius); border: 1px solid;
}
.operatorwarnung { background: var(--sand-hell); border-color: #e2d3b4; color: #6d4c14; }
.operatortreffer { background: var(--moos-hell); border-color: #c3d8c9; color: #2c503b; }
.operatorliste { margin-top: 10px; }
.operatorliste > summary { font-size: 13px; color: var(--grau); cursor: pointer; }
.operatorliste .inhalt {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 12px 14px; margin-top: 6px; font-size: 13px;
}
.operatorliste .inhalt p { margin: 0 0 8px; }
.marke-klein.fassungstreffer { background: var(--sand-hell); color: #7a5518; }

/* ---------------------------------------------------------------- Themen */
.themenkarte .kern form { margin-bottom: 6px; }
.themenaktionen { flex-direction: column; align-items: flex-end; gap: 8px; }
.themenaktionen select { min-width: 190px; }

/* ---------------------------------------------------------------- Zuschneiden */
.werkzeugleiste {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 10px 12px; margin-bottom: 14px;
}
.werkzeugleiste .abstand { flex: 1; }
.werkzeuginfo { font-size: 13px; color: var(--grau); font-variant-numeric: tabular-nums; }
.zuschnittflaeche {
  display: flex; justify-content: center;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 16px;
}
.buehne { position: relative; cursor: crosshair; touch-action: none; }
.buehne canvas { display: block; max-width: 100%; }
.auswahl {
  position: absolute; border: 2px dashed var(--moos);
  background: rgba(60, 107, 79, 0.14); pointer-events: none;
}

/* ================================================================ Erweiterung: Übersicht, Assistent, Baukasten */
.kopf { flex-wrap: wrap; }
.kopfrechts { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.kopfrechts .abmelden { margin-left: 0; }
.kopflink { color: var(--grau); font-size: 14px; text-decoration: none; }
.kopflink:hover { color: var(--tinte); text-decoration: underline; }
.zurueck { margin: 0 0 6px; font-size: 14px; }

.haken { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; color: var(--tinte); cursor: pointer; align-self: center; }
.haken input { width: auto; }

/* Übersicht */
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 6px 0 8px; }
.zahl { display: block; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 12px 14px; text-decoration: none; color: var(--grau); font-size: 14px; }
.zahl:hover { border-color: var(--moos); }
.zahl b { display: block; font-size: 26px; font-weight: 600; color: var(--tinte); line-height: 1.15; }
.zweispaltig { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .zweispaltig { grid-template-columns: 1fr; } }
.tabellenrahmen { overflow-x: auto; }
table.matrix { border-collapse: collapse; background: var(--weiss); border: 1px solid var(--linie); width: 100%; }
table.matrix th, table.matrix td { padding: 6px 10px; text-align: center; border-bottom: 1px solid var(--linie); font-variant-numeric: tabular-nums; }
table.matrix thead th { color: var(--grau); font-weight: 500; font-size: 13px; }
table.matrix tbody th { text-align: left; font-weight: 600; }
table.matrix a { color: var(--moos); font-weight: 600; text-decoration: none; }
.leer-zelle { color: var(--linie); }
.pflege { display: flex; flex-direction: column; gap: 6px; }
.pflegezeile { display: block; background: var(--weiss); border: 1px solid var(--linie); border-left: 4px solid var(--sand);
  border-radius: var(--radius); padding: 8px 12px; text-decoration: none; color: var(--tinte); }
.pflegezeile.ok { border-left-color: var(--moos); color: var(--grau); }
.pflegezeile:hover { border-color: var(--grau); }
.pflegezeile b { display: inline-block; min-width: 2ch; font-variant-numeric: tabular-nums; }

/* Status und Hinweise */
.marke-klein.status-entwurf { background: var(--sand-hell); color: #7a5518; }
.marke-klein.status-fertig { background: var(--moos-hell); color: #2c503b; }
.marke-klein.status-geschrieben { background: #e7e8e4; color: var(--grau); }
.warnzahl { color: var(--sand); font-weight: 600; }
.marke-klein.warn-marke { background: #fbeceb; color: var(--rot); }
.gruppenkopf { display: flex; gap: 8px; align-items: baseline; }
.gruppenkopf span { font-size: 13px; font-weight: 400; color: var(--grau); }
.karte.status-rand-entwurf { border-left-color: var(--sand); }
.karte.status-rand-geschrieben { border-left-color: #b9bdb3; }
.statusform select { width: auto; padding: 5px 8px; font-size: 14px; }
.statusform select.status-entwurf { background: var(--sand-hell); }
.statusform select.status-fertig { background: var(--moos-hell); }

/* Assistent Neue Arbeit */
.assistent { display: flex; flex-direction: column; gap: 18px; max-width: 860px; }
.assistent fieldset { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--weiss); padding: 14px 16px 16px; margin: 0; }
.assistent legend { font-weight: 600; padding: 0 6px; }
.startwahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.startkarte { display: flex; flex-direction: column; gap: 5px; margin: 0; border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 12px 14px; cursor: pointer; color: var(--tinte); }
.startkarte:hover { border-color: var(--moos); }
.startkarte:has(input:checked) { border-color: var(--moos); background: var(--moos-hell); }
.startkarte input[type=radio] { width: auto; margin: 0 6px 0 0; }
.startkarte span { font-size: 13px; color: var(--grau); }
.themenwahl { display: flex; flex-wrap: wrap; gap: 6px; }
form.filter.assistent { max-width: none; }

/* Vorschlag */
.vorschlagskarte { cursor: pointer; align-items: stretch; }
.vorschlagskarte .wahl { flex: 0 0 42px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--linie); }
.vorschlagskarte .wahl input { width: auto; }
.vorschlagskarte .kern { display: flex; flex-direction: column; gap: 2px; }
.vorschlagskarte .meta, .vorschlagskarte .auszug { font-size: 13px; color: var(--grau); }

/* Baukasten: Kennzahlen, Prüfung, Ziehen, Mehrfachauswahl */
.kennzahlen { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  background: var(--papier); padding: 8px 0 10px; }
@media (max-width: 700px) { .kennzahlen { grid-template-columns: repeat(2, 1fr); position: static; } }
.kz { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 8px 12px; }
.kz-wert { display: block; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kz-wert small { font-size: 13px; font-weight: 400; color: var(--grau); }
.kz-name { display: block; font-size: 12px; color: var(--grau); }
.kz-warn { border-color: #e2d3b4; background: var(--sand-hell); }
.fortschritt { height: 5px; background: var(--papier); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.fortschritt i { display: block; height: 100%; background: #8db39b; }
.fortschritt i.voll { background: var(--moos); }
.fortschritt i.ueber { background: var(--rot); }
details.pruefung { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); margin: 0 0 8px; }
details.pruefung > summary { cursor: pointer; padding: 8px 12px; font-weight: 600; font-size: 14px; }
details.pruefung ul { margin: 0; padding: 0 12px 10px; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.pr-zeichen { display: inline-block; width: 1.4em; text-align: center; }
.pr-ok { color: #2c503b; }
.pr-warn { color: #7a4a0d; }
.pr-info { color: var(--grau); }
table.notentabelle { border-collapse: collapse; margin: 0 12px 12px; font-variant-numeric: tabular-nums; font-size: 14px; }
table.notentabelle th, table.notentabelle td { padding: 3px 14px; border-bottom: 1px solid var(--linie); text-align: left; }
.griff { flex: 0 0 22px; display: flex; align-items: center; justify-content: center; color: var(--linie); cursor: grab;
  border-right: 1px solid var(--linie); user-select: none; font-size: 15px; letter-spacing: -2px; }
.griff:hover { color: var(--grau); }
.karte.zieht { opacity: .45; }
.punkte .zeit { display: block; font-size: 12px; color: var(--grau); }
.poolleiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.karte .wahl { flex: 0 0 34px; display: flex; align-items: center; justify-content: center; margin: 0; border-right: 1px solid var(--linie); cursor: pointer; }
.karte .wahl input { width: auto; }
.status-hinweis { color: var(--grau); font-size: 13px; }

/* ---- Aufgabenteil (A) und Materialteil (B) deutlich getrennt */
.teilband { display: flex; align-items: center; gap: 12px; margin: 26px 0 10px; padding: 10px 14px;
  border-radius: var(--radius); border: 1px solid; border-left-width: 6px; }
.teilband.aufgaben { background: var(--moos-hell); border-color: #b9d2c1; border-left-color: var(--moos); color: #24422f; }
.teilband.material { background: var(--sand-hell); border-color: #e2d3b4; border-left-color: var(--sand); color: #5e4210; }
.teilband .teil-buchstabe { flex: 0 0 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px; color: #fff; }
.teilband.aufgaben .teil-buchstabe { background: var(--moos); }
.teilband.material .teil-buchstabe { background: var(--sand); }
.teilband .teil-text { flex: 1; min-width: 0; }
.teilband h2, .teilband h3 { margin: 0; font-size: 17px; font-weight: 700; }
.teilband p { margin: 1px 0 0; font-size: 13px; opacity: .85; }
.teilband .teil-zahl { text-align: right; font-size: 13px; line-height: 1.35; white-space: nowrap; }
.teilband .teil-zahl b { font-size: 20px; font-variant-numeric: tabular-nums; }
.teilband.klein { margin: 16px 0 8px; padding: 6px 12px; }
.teilband.klein .teil-buchstabe { flex-basis: 26px; height: 26px; font-size: 14px; }
.teilband.klein h3 { font-size: 15px; }
.leer-aufgaben { border-color: #b9d2c1; }
.leer-material { border-color: #e2d3b4; }
.karte .kern a .nr { display: inline-block; min-width: 26px; padding: 0 6px; margin-right: 8px; text-align: center; border-radius: 13px;
  background: var(--moos-hell); color: #24422f; font-size: 13px; font-weight: 700; line-height: 22px; }
.karte .kern a .nr.m { background: var(--sand-hell); color: #5e4210; }
.karte.material { background: #fffdf8; }

/* ---- Vorschau als Seitenbilder (funktioniert in jedem Browser, ohne PDF-Viewer) */
.vorschau-seiten { background: #d9dcd5; border: 1px solid var(--linie); border-top: 0; border-radius: 0 0 var(--radius) var(--radius);
  padding: 22px 12px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.vorschau-seite { margin: 0; width: min(100%, 900px); }
.vorschau-seite img { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.22); }
.vorschau-seite figcaption { text-align: center; font-size: 13px; color: var(--grau); margin-top: 6px; }

.afb-marke.afb-1, .afb-marke.afb-2, .afb-marke.afb-3, .afb-marke.afb-0 { background: none; }

/* ---- Verknüpfung Aufgabe <-> Material */
.marke-klein.material-marke { background: var(--sand-hell); color: #7a5518; }
.fehlt-material { color: var(--rot); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.karte .auszug.gedruckt { font-size: 13px; color: var(--tinte); border-left: 3px solid var(--sand); padding-left: 8px; }
.verknuepfungsliste { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow: auto; padding: 2px; }
.stufe.verkn small { color: var(--grau); }

/* ---- Material je Teilaufgabe */
.matrixrahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--weiss); max-height: 320px; overflow-y: auto; }
table.verknmatrix { border-collapse: collapse; width: 100%; font-size: 14px; }
table.verknmatrix th, table.verknmatrix td { padding: 5px 10px; border-bottom: 1px solid var(--linie); text-align: center; }
table.verknmatrix thead th { position: sticky; top: 0; background: var(--papier); font-weight: 600; color: var(--grau); font-size: 13px; z-index: 1; }
table.verknmatrix th.matname { text-align: left; font-weight: 500; color: var(--tinte); }
table.verknmatrix th.matname small { color: var(--grau); font-weight: 400; }
table.verknmatrix thead th:first-child { text-align: left; }
table.verknmatrix input { width: auto; }
table.verknmatrix tbody tr:hover { background: var(--moos-hell); }
ul.genannt { margin: 4px 0 0; padding-left: 20px; }

/* Aufgaben aus Datei einlesen */
.einlesen-fehler { background: #fbeceb; border: 1px solid var(--rot); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 18px; }
.einlesen-fehler ul { margin: 6px 0 0; padding-left: 20px; }
.einlesen-inhalt { margin-top: 6px; font-size: 14px; }
.einlesen-inhalt > summary { cursor: pointer; color: var(--grau); font-size: 13px; }
.einlesen-inhalt h4 { margin: 12px 0 4px; font-size: 13px; color: var(--grau); }
.einlesen-text { overflow-x: auto; }
.einlesen-text table { border-collapse: collapse; margin: 6px 0; }
.einlesen-text th, .einlesen-text td { border: 1px solid var(--linie); padding: 3px 8px; text-align: left; }
.einlesen-fuss { margin-top: 18px; align-items: flex-end; }


/* ================================================================ Erscheinungsbild 2026-10
   Leitidee: das Aufgabenblatt. Punktespiegel als Übersicht, Blatt mit Korrekturrand,
   Textmarker nur für "bitte ansehen", Linien statt Kästen. Dieser Block überschreibt das Frühere. */

a { color: var(--moos); text-underline-offset: 2px; }
a:hover { color: var(--tinte); }
:focus-visible { outline: 3px solid var(--moos); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--moos); outline-offset: 1px; border-color: var(--moos); }
input[type=checkbox], input[type=radio] { accent-color: var(--moos); width: 18px; height: 18px; flex: 0 0 auto; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---- Gerüst */
.kopf { align-items: center; gap: 4px 28px; padding: 0 28px; background: var(--tinte); border-bottom: 0; }
.marke { color: #fff; font-weight: 700; font-size: 18px; padding: 14px 0; }
.kopf nav { gap: 0; flex-wrap: wrap; }
.kopf nav a { color: #c9d3ea; padding: 16px 14px 12px; border-bottom: 4px solid transparent; }
.kopf nav a:hover { color: #fff; }
.kopf nav a.aktiv { color: #fff; font-weight: 700; border-bottom: 4px solid #fff; }
.kopflink, .kopf .abmelden button { color: #c9d3ea; font-size: 16px; }
.kopflink:hover, .kopf .abmelden button:hover { color: #fff; }
.kopfknopf { color: var(--tinte); background: #fff; font-weight: 700; text-decoration: none; padding: 8px 14px; border-radius: var(--radius); }
.kopfknopf:hover { color: var(--moos); }
.kopf :focus-visible { outline-color: #fff; }
main { max-width: 1320px; padding: 24px 28px 64px; }

h1 { font-size: 30px; line-height: 1.15; font-weight: 700; margin: 0 0 4px; }
h2 { font-size: 20px; font-weight: 700; margin: 28px 0 8px; }
h3 { font-size: 17px; font-weight: 700; }
.unterzeile, .vorzeile { color: var(--tinte); font-size: 17px; margin: 0 0 18px; }
.vorzeile { margin: 0 0 2px; }
.seitenkopf { align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.seitenkopf .unterzeile { margin-bottom: 0; }
.seitenkopf .zeile { align-items: center; }
.zwischen { flex-wrap: wrap; }
.hinweis { font-size: 15px; color: var(--grau); }
.zurueck { font-size: 16px; }

/* ---- Formulare und Knöpfe */
label { font-size: 15px; color: var(--tinte); }
input[type=text], input[type=number], input[type=date], input[type=search], input[type=password], select, textarea {
  border: 1px solid var(--feldrand); min-height: 46px; padding: 9px 12px; }
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px;
  font-weight: 700; border: 1px solid var(--moos); background: var(--moos); color: #fff; }
.knopf:hover { background: #1b37a0; color: #fff; }
.knopf.leise { background: var(--weiss); color: var(--moos); border-color: var(--moos); }
.knopf.leise:hover { background: var(--moos-hell); border-color: var(--moos); color: var(--moos); }
.knopf.warnung { background: var(--weiss); color: var(--rot); border-color: var(--rot); }
.knopf.warnung:hover { background: #fdeeeb; color: var(--rot); }
.knopf.klein { min-height: 40px; padding: 0 12px; font-size: 15px; }
.knopf:disabled { opacity: .5; cursor: default; }
.textknopf { font: inherit; background: none; border: 0; padding: 0; min-height: 32px; color: var(--moos);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.textknopf:hover { color: var(--tinte); }
.textknopf.rot { color: var(--rot); }
.haken { font-size: 16px; min-height: 44px; gap: 10px; }
.filter { background: transparent; border: 0; padding: 0; }
.filter.formular { display: flex; flex-direction: column; gap: 18px; background: var(--weiss); padding: 22px 24px;
  box-shadow: 0 1px 0 #b9c3d4, 0 8px 24px rgba(27,42,74,.14); }
.filter.formular textarea, .aufgabe-bearbeiten textarea { font-family: var(--druckschrift); font-size: 16px; line-height: 1.6; }
.leer { border: 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); border-radius: 0; padding: 22px 8px; background: transparent; }
mark.marker, .marker { background: var(--marker); color: var(--tinte); padding: 0 6px; font-weight: 400; white-space: nowrap; }
.geprueft { color: var(--grau); font-size: 15px; }
.randnotiz { color: var(--rot); font-size: 15px; line-height: 1.4; margin: 8px 0 4px; }
.randnotiz.frei { font-weight: 700; margin: 8px 0 0; }
.marke-klein { font-size: 14px; border-radius: 0; background: var(--moos-hell); color: var(--tinte); }
.marke-klein.material, .marke-klein.material-marke, .marke-klein.fassungstreffer,
.marke-klein.status-entwurf { background: var(--sand-hell); color: var(--tinte); }
.marke-klein.status-fertig { background: var(--moos-hell); color: var(--tinte); }
.marke-klein.warn-marke { background: transparent; color: var(--rot); padding: 0; }
.warnzahl { color: var(--rot); }

/* ---- Anforderungsbereiche: hell, mittel, dunkel */
.afb-f1 { background: var(--afb1); color: var(--tinte); }
.afb-f2 { background: var(--afb2); color: var(--tinte); }
.afb-f3 { background: var(--afb3); color: #fff; }
.afb-f0 { background: #e3e6ec; color: var(--tinte); }
.afb-leiste { display: flex; width: 120px; height: 18px; border: 1px solid var(--tinte); background: var(--weiss); }
.afb-leiste i { display: block; flex: 1 1 0; }
.afb-1, .afb-marke.afb-1::before { background: var(--afb1); }
.afb-2, .afb-marke.afb-2::before { background: var(--afb2); }
.afb-3, .afb-marke.afb-3::before { background: var(--afb3); }
.afb-0, .afb-marke.afb-0::before { background: #e3e6ec; }

/* ---- Punktespiegel */
.punktespiegel { background: var(--weiss); border: 2px solid var(--tinte); overflow-x: auto; }
.ps-reihe { display: flex; align-items: stretch; }
.ps-spalte, .ps-summe { display: flex; flex-direction: column; padding: 10px 10px 8px; min-width: 76px; }
.ps-spalte { flex: 1 1 0; overflow: hidden; border-right: 1px solid var(--tinte); color: var(--tinte); text-decoration: none; }
.ps-spalte:hover { background: var(--moos-hell); color: var(--tinte); }
.ps-spalte.ps-offen { background: #fff9d6; }
.ps-spalte:last-of-type { border-right-width: 2px; }
.ps-summe { flex: 0 0 132px; }
.ps-nr { font-weight: 700; white-space: nowrap; }
.ps-nr .marker { font-size: 13px; }
.ps-titel { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-teile { display: flex; height: 30px; margin-top: 8px; gap: 1px; }
.ps-teile i { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 13px; font-weight: 700; overflow: hidden; }
.ps-vp { font-size: 22px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
.ps-gesamt { font-size: 34px; line-height: 1.1; font-weight: 700; margin-top: auto; font-variant-numeric: tabular-nums; }
.ps-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; padding: 10px 14px; border-top: 1px solid var(--tinte); font-size: 15px; }
.ps-legende { display: flex; align-items: center; gap: 8px; }
.ps-legende i { width: 16px; height: 16px; border: 1px solid var(--tinte); }
.ps-zeit { margin-left: auto; }
.ps-leer { margin: 0; padding: 22px 16px; }
.spiegel-details { margin-top: 10px; align-items: flex-start; }
details.pruefung { background: transparent; border: 0; margin: 0; }
details.pruefung > summary { padding: 6px 0; font-weight: 400; font-size: 16px; color: var(--moos); text-decoration: underline; text-underline-offset: 2px; }
details.pruefung[open] { background: var(--weiss); border: 1px solid var(--linie); padding: 4px 14px 10px; }
details.pruefung ul { padding: 0; font-size: 15px; gap: 6px; }
.pr-zeichen { width: 84px; text-align: left; font-weight: 700; font-size: 13px; }
.pr-ok { color: var(--tinte); } .pr-warn { color: var(--rot); } .pr-info { color: var(--grau); }
table.notentabelle { margin: 0 0 6px; font-size: 15px; }

/* ---- Baukasten: Spiegel oben, Pool links, Blatt rechts */
.baukasten { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); grid-template-areas: "spiegel spiegel" "pool blatt"; gap: 24px 28px; }
#zs { display: contents; }
.spiegel-bereich { grid-area: spiegel; min-width: 0; }
.blatt-spalte { grid-area: blatt; min-width: 0; }
#pool { grid-area: pool; min-width: 0; }
#pool h2 { margin-top: 0; }
#pool .unterzeile { font-size: 15px; color: var(--grau); margin-bottom: 10px; }
@media (max-width: 900px) { .baukasten { grid-template-columns: minmax(0, 1fr); grid-template-areas: "spiegel" "blatt" "pool"; } }
details.kopfdaten { margin-bottom: 18px; }
details.kopfdaten > summary { background: transparent; border: 0; padding: 0; font-weight: 400; color: var(--moos); text-decoration: underline; text-underline-offset: 2px; }
details.kopfdaten .inhalt { border: 1px solid var(--linie); margin-top: 8px; }
.statusform { display: inline-flex; align-items: center; gap: 8px; }
.statusform label { margin: 0; color: var(--grau); }
.statusform select, .statusform select.status-entwurf, .statusform select.status-fertig { width: auto; font-size: 16px; padding: 9px 12px; background: var(--weiss); }
.fassungshinweis { background: var(--sand-hell); border: 0; border-radius: 0; font-size: 16px; }

.blatt { background: var(--weiss); box-shadow: 0 1px 0 #b9c3d4, 0 8px 24px rgba(27,42,74,.14); }
.blatt .liste { gap: 0; }
.karte.blattzeile { border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; background: var(--weiss); scroll-margin-top: 12px; }
.karte.blattzeile.veraltet { background: #fffdf2; }
.karte.blattzeile.veraltet .kern > a::after { content: none; }
.blattzeile .griff { flex: 0 0 28px; border-right: 0; cursor: grab;
  background: radial-gradient(circle, #8a96ad 1.6px, transparent 2px) center / 9px 9px repeat-y; background-size: 9px 9px; background-position: center 18px; opacity: .55; }
.blattzeile .griff:hover { opacity: 1; }
.blattzeile .kern { padding: 18px 20px 16px 4px; }
.blattkopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.blattkopf h3 { margin: 0; font-family: var(--druckschrift); font-size: 19px; font-weight: 600; }
.karte .kern a.blatt-titel { font-weight: 400; font-size: 15px; color: var(--grau); text-decoration: none; }
.karte .kern a.blatt-titel:hover { color: var(--moos); text-decoration: underline; }
.drucktext { font-family: var(--druckschrift); font-size: 16px; line-height: 1.6; margin-top: 4px; overflow-x: auto; }
.drucktext p { margin: 4px 0 0; }
.drucktext ul, .drucktext ol { margin: 4px 0 0; padding-left: 22px; }
.drucktext table { border-collapse: collapse; margin: 8px 0; font-size: 15px; }
.drucktext th, .drucktext td { border: 1px solid var(--tinte); padding: 3px 9px; text-align: left; }
.blatt-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px; margin-top: 10px; font-size: 15px; }
.blatt-aktionen .textknopf { font-size: 15px; }
.karte .kern .blatt-aktionen a { font-weight: 400; color: var(--moos); text-decoration: underline; }
.rand { flex: 0 0 200px; padding: 18px 16px 16px 16px; border-left: 1px solid var(--rotrand); }
.rand label { display: flex; align-items: center; gap: 6px; font-family: var(--druckschrift); font-size: 17px; margin: 0; white-space: nowrap; }
.punkte-eingabe, input.punkte-eingabe { width: 58px; min-height: 44px; padding: 4px 6px; text-align: center; font-weight: 700; font-family: var(--schrift); }
.rand-klein { font-size: 14px; color: var(--grau); margin-top: 6px; line-height: 1.35; }
.blatt-trenner { padding: 10px 20px 10px 32px; background: #f3f6fb; border-bottom: 1px solid var(--linie); font-size: 15px; color: var(--grau); }
.blattzeile.material .kern { padding-top: 14px; padding-bottom: 12px; }
.blatt-fuss { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 20px 16px 32px; }
.blatt-weiteres { margin-top: 18px; }
@media (max-width: 620px) { .karte.blattzeile { flex-wrap: wrap; } .rand { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--rotrand); padding-left: 32px; } }

#pool form.filter { margin-bottom: 4px; gap: 8px 10px; }
#pool form.filter .feld, #pool form.filter .feld.mittel, #pool form.filter .feld.schmal { flex: 1 1 140px; }
.poolleiste { gap: 6px 14px; margin: 4px 0 6px; }
.poolliste { border-top: 2px solid var(--tinte); }
.poolzeile { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.poolzeile .wahl { flex: 0 0 30px; display: flex; align-items: center; justify-content: center; margin: 0; min-height: 44px; cursor: pointer; }
.poolzeile .kern { flex: 1 1 auto; min-width: 0; }
.poolzeile .kern > a { font-weight: 700; color: var(--tinte); text-decoration: none; }
.poolzeile .kern > a:hover { color: var(--moos); text-decoration: underline; }
.poolzeile .meta { font-size: 15px; color: var(--grau); }
.poolzeile .afb-leiste { margin-top: 4px; height: 10px; width: 100px; }
.poolzeile .randnotiz { margin: 0; }
.pool-zwischen { margin: 20px 0 6px; }

/* ---- Aufgabenpool als Tabelle */
.suchzeile { margin-bottom: 18px; gap: 10px 14px; }
.reiter { display: flex; flex-wrap: wrap; gap: 0 4px; border-bottom: 2px solid var(--tinte); }
.reiter a { display: flex; align-items: center; min-height: 46px; padding: 0 16px; color: var(--moos); text-decoration: none; border: 2px solid transparent; border-bottom: 0; }
.reiter a:hover { text-decoration: underline; }
.reiter a.aktiv { background: var(--weiss); border-color: var(--tinte); color: var(--tinte); font-weight: 700; margin-bottom: -2px; padding-bottom: 2px; }
.pooltabelle { background: var(--weiss); border: 2px solid var(--tinte); border-top: 0; }
.sammelleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; background: #f3f6fb; border-bottom: 1px solid var(--linie); }
.pooltabelle .leer { margin: 0; border: 0; }
.pooltabelle .hinweis { margin: 0; padding: 10px 16px; }
table.pool { border-collapse: collapse; width: 100%; min-width: 860px; }
table.pool th, table.pool td { padding: 12px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); font-size: 15px; }
table.pool thead th { font-weight: 400; color: var(--grau); border-bottom: 1px solid var(--tinte); padding-top: 10px; padding-bottom: 10px; white-space: nowrap; }
table.pool .sp-wahl { width: 46px; padding-left: 16px; }
table.pool .sp-titel { font-size: 16px; min-width: 300px; }
table.pool .sp-titel > a { font-weight: 700; color: var(--tinte); text-decoration: none; }
table.pool .sp-titel > a:hover { color: var(--moos); text-decoration: underline; }
table.pool .meta { font-size: 14px; color: var(--grau); margin: 2px 0 0; }
table.pool .zahl-sp, .zahl-sp { text-align: right; font-variant-numeric: tabular-nums; }
table.pool td.zahl-sp { font-weight: 700; font-size: 18px; }
table.pool tbody tr:hover { background: #f7f9fd; }
.zeilenblick > summary { cursor: pointer; color: var(--moos); font-size: 14px; margin-top: 2px; }
.zeilenblick[open] { margin-top: 6px; padding: 10px 14px; border: 1px solid var(--linie); border-left: 1px solid var(--rotrand); background: var(--weiss); }

/* ---- Aufgabe bearbeiten */
.pruefband { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; margin: 0 0 18px; background: var(--marker); }
.pruefband span { flex: 1 1 380px; }
.pruefband .knopf.leise { border: 2px solid var(--tinte); color: var(--tinte); }
.pruefband.geprueft { background: transparent; padding: 0; color: var(--grau); }
.pruefband.geprueft span { flex: 0 1 auto; }
table.teiltabelle { border-collapse: collapse; width: 100%; max-width: 640px; }
table.teiltabelle th, table.teiltabelle td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: middle; }
table.teiltabelle thead th { font-weight: 400; color: var(--grau); font-size: 15px; border-bottom: 1px solid var(--tinte); }
table.teiltabelle tbody th { font-family: var(--druckschrift); font-size: 18px; font-weight: 600; width: 60px; }
table.teiltabelle td.zahl-sp, table.teiltabelle th.zahl-sp { text-align: right; width: 90px; padding-right: 24px; }
table.teiltabelle tfoot th, table.teiltabelle tfoot td { border-bottom: 0; border-top: 1px solid var(--tinte); font-weight: 700; }
.stufenwahl .stufe { min-height: 44px; padding: 0 14px; font-size: 16px; border-color: var(--feldrand); }
.operatorwarnung { background: transparent; border: 0; padding: 0; color: var(--rot); font-size: 15px; }
.operatortreffer { background: transparent; border: 0; padding: 0; color: var(--tinte); font-size: 15px; }
.operatorliste > summary { font-size: 15px; color: var(--moos); }
table.verknmatrix tbody tr:hover { background: #f7f9fd; }
table.verknmatrix thead th { background: #f3f6fb; }

/* ---- Übersicht und Listen mit Linien */
.zweispaltig { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0 32px; margin-top: 8px; }
.linienliste { border-top: 2px solid var(--tinte); }
.todo, .arbeitszeile { display: flex; align-items: center; gap: 16px; padding: 12px 0; min-height: 44px; border-bottom: 1px solid var(--linie); color: var(--tinte); text-decoration: none; }
.todo:hover, .arbeitszeile:hover { background: #f7f9fd; color: var(--tinte); }
.todo b { flex: 0 0 52px; text-align: right; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.todo span { flex: 1 1 auto; min-width: 0; font-size: 15px; color: var(--grau); }
.todo span strong { font-size: 16px; color: var(--tinte); }
.todo i { font-style: normal; font-weight: 700; color: var(--moos); white-space: nowrap; }
.todo.erledigt b, .todo.erledigt span strong { color: var(--grau); font-weight: 400; }
.arbeitszeile { flex-wrap: wrap; gap: 4px 16px; }
.az-datum { flex: 0 0 100px; }
.az-titel { flex: 1 1 220px; min-width: 0; font-size: 15px; color: var(--grau); }
.az-titel strong { font-size: 16px; color: var(--tinte); }
.az-titel .randnotiz { margin: 0; }
.az-stand { flex: 0 0 96px; }
.az-punkte { flex: 0 0 70px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
table.matrix { border: 2px solid var(--tinte); }
table.matrix th, table.matrix td { padding: 12px 10px; border-bottom: 1px solid var(--linie); border-left: 1px solid var(--linie); }
table.matrix th:first-child { border-left: 0; }
table.matrix thead th { font-size: 15px; font-weight: 400; color: var(--grau); border-bottom: 1px solid var(--tinte); }
table.matrix a { color: var(--moos); font-weight: 700; text-decoration: underline; }
.leer-zelle { color: var(--grau); }

/* ---- Übrige Seiten: Karten werden zu Zeilen mit Linie */
.liste { gap: 0; }
.karte { border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; background: var(--weiss); }
.liste > .karte:first-child { border-top: 2px solid var(--tinte); }
.blatt .liste > .karte:first-child { border-top: 0; }
.karte .kern { padding: 14px 16px; }
.karte .kern a { font-weight: 700; }
.karte .meta { font-size: 15px; }
.karte .auszug { font-size: 15px; }
.karte.material { background: var(--weiss); }
.punkte { border-left: 1px solid var(--rotrand); font-size: 15px; flex-basis: 96px; padding: 14px 12px; }
.punkte b { font-size: 20px; font-weight: 700; }
.karte .wahl, .vorschlagskarte .wahl { border-right: 0; flex-basis: 46px; }
.karte.status-rand-entwurf, .karte.status-rand-geschrieben { border-left: 0; }
.teilband, .teilband.aufgaben, .teilband.material { background: transparent; border: 0; border-bottom: 2px solid var(--tinte); border-radius: 0; color: var(--tinte); padding: 0 0 6px; }
.teilband .teil-buchstabe { display: none; }
.zahl, .kz, .summe, .pflegezeile, .bildkachel, .werkzeugleiste, .zuschnittflaeche, .assistent fieldset, .startkarte, .matrixrahmen,
.operatorliste .inhalt, .vorschau-leiste { border-radius: 0; border-color: var(--linie); }
.pflegezeile, .pflegezeile.ok { border-left-width: 1px; border-left-color: var(--linie); }
.startkarte:has(input:checked) { border-color: var(--moos); background: var(--moos-hell); }
.anmeldekarte { border-radius: 0; border: 0; border-top: 6px solid var(--tinte); box-shadow: 0 1px 0 #b9c3d4, 0 8px 24px rgba(27,42,74,.14); }
.fehlermeldung { border-radius: 0; border: 0; background: transparent; padding: 0; font-size: 16px; }
.vorschau-seiten { background: #cfd6e0; border-radius: 0; }
.einlesen-fehler { border-radius: 0; background: transparent; border: 0; border-left: 4px solid var(--rot); }
.einlesen-inhalt > summary { color: var(--moos); font-size: 15px; }
.einlesen-text { font-family: var(--druckschrift); line-height: 1.6; }
.einlesen-text th, .einlesen-text td { border-color: var(--tinte); }
.auswahl { border-color: var(--moos); background: rgba(35, 70, 196, 0.14); }

/* ---- Material dieser Aufgabe: Karten mit Vorschau statt Tabelle (09.10.2026) */
.matliste { display: flex; flex-direction: column; border-top: 2px solid var(--tinte); }
[data-feld="mat-zugeordnet"]:empty { border-top: 0; }
.matkarte { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linie); align-items: flex-start; }
.matkarte[hidden] { display: none; }
.matkarte.gewaehlt { background: #f7f9fd; }
.mat-bild { flex: 0 0 150px; height: 104px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid var(--linie); background: var(--weiss); text-decoration: none; color: var(--grau); }
.mat-bild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mat-auszug { font-family: var(--druckschrift); font-size: 11px; line-height: 1.35; padding: 6px 8px; align-self: flex-start;
  overflow: hidden; max-height: 100%; }
.mat-kern { flex: 1 1 auto; min-width: 0; }
.mat-titel { font-weight: 700; color: var(--tinte); text-decoration: none; }
.mat-titel:hover { color: var(--moos); text-decoration: underline; }
.matkarte .meta { font-size: 14px; color: var(--grau); }
.mat-teile { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin-top: 4px; }
.mat-teile .haken { min-height: 40px; }
.mat-wozu { font-size: 15px; color: var(--grau); }
.matklappe { margin-top: 12px; }
.matklappe > summary { cursor: pointer; color: var(--moos); text-decoration: underline; text-underline-offset: 2px; min-height: 32px; }
.matklappe[open] { border: 1px solid var(--linie); padding: 10px 16px 14px; }
.matklappe[open] > summary { margin-bottom: 10px; }
.matneu-felder { display: flex; flex-direction: column; gap: 12px; }
.matklappe .matliste { margin-top: 10px; max-height: 520px; overflow-y: auto; }
.filter.formular .matneu-felder textarea { font-family: var(--druckschrift); }

/* Aufgeklappte Aufgabe in der Arbeit: dasselbe Formular, schmaler gesetzt, offen erkennbar am blauen Rand */
.aufgabe-bearbeiten { display: flex; flex-direction: column; gap: 18px; margin-top: 10px; padding: 18px 20px;
  background: var(--weiss); border: 1px solid var(--moos); border-radius: var(--radius); }
.aufgabe-bearbeiten .bearbeiten-knoepfe { align-items: center; }
details.weitere > summary { cursor: pointer; color: var(--moos); text-decoration: underline; text-underline-offset: 2px;
  min-height: 32px; }
details.weitere[open] { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--linie); padding-top: 10px; }
.blatt-aktionen .ganz-rechts { margin-left: auto; }
.blattkopf + .fehlermeldung { margin-top: 8px; }
.blatt > .fehlermeldung { margin: 12px 20px 0 32px; }
@media (max-width: 620px) { .matkarte { flex-wrap: wrap; } .mat-bild { flex-basis: 100%; height: 140px; } }

/* BE im Rand, wenn sie sich aus den Teilaufgaben ergeben (kein Eingabefeld) */
.randpunkte.fest { font-family: var(--druckschrift); font-size: 17px; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.randpunkte.fest b { font-family: var(--schrift); font-size: 20px; }

/* Einlesen: Hinweis auf eine mitgelieferte Arbeit */
.einlesen-arbeit { margin-top: 22px; padding: 4px 18px 14px; background: var(--weiss); border: 2px solid var(--tinte); }
.einlesen-arbeit h2 { margin-top: 12px; }
.einlesen-arbeit ol { margin: 6px 0 10px; padding-left: 24px; }
.einlesen-arbeit li { padding: 2px 0; }

/* zentraler Knopf "Aus Datei einlesen" in der Kopfzeile */
.kopfknopf.leer { background: transparent; color: #fff; border: 1px solid #8fa0c4; padding: 7px 13px; font-weight: 400; }
.kopfknopf.leer:hover, .kopfknopf.leer.aktiv { background: #fff; color: var(--tinte); }

/* Eingang: Änderungen aus Dateien, mit einem Klick übernehmen */
.kopfknopf.eingang { background: var(--marker); color: var(--tinte); }
.eingang-datei { margin-top: 22px; padding: 6px 18px 14px; background: var(--weiss); border: 2px solid var(--tinte); }
.eingang-datei h2 { margin: 10px 0 0; }
.eingang-aenderung { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.eingang-aenderung ul { margin: 4px 0 0; padding-left: 22px; }
.eingang-vergleich { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
.eingang-vergleich h4 { margin: 8px 0 2px; font-size: 14px; color: var(--grau); }
@media (max-width: 800px) { .eingang-vergleich { grid-template-columns: minmax(0, 1fr); } }