/* ===========================================================================
   Aufgaben-Board (Stufe 2b, dritte Lieferung)

   Ergaenzt `sitzung.css`, ersetzt es nicht: Kopfzeile, Knoepfe, Karten, Felder,
   Statuspillen und der Dialograhmen sind dort schon definiert und tragen den
   Praefix `sz-`. Diese Datei bringt nur, was das Board zusaetzlich braucht —
   Praefix `ab-` (Aufgaben-Board).

   HARTE AUFLAGE (Entscheidungskatalog 01.08.2026, Frage 9/10):
   Theme ausschliesslich ueber CSS-Variablen. Kein Hexwert in diesen Regeln.
   Der Markenton hat genau einen Austauschpunkt, und der liegt im Kopf von
   styles.css.

   Farbrollen, die hier gelten:
     --accent            (#8764B8) nur Flaeche
     --accent-strong     (#6B4A9E) jeder Text, jeder Knopf
     --accent-strong-hover (#5B3F86) H2 und Hover
     --accent-soft       (#F1ECFA) zarte Flaeche
     --status-offen      (#B3271E) ueberfaellig — immer zusaetzlich als Wort
     --info              (#24398B) nur neutrale Info

   Zur Barrierefreiheit: jede Farbaussage steht zusaetzlich als Wort im Markup.
   Das Board wird auch mit der Tastatur bedient (Karte aufnehmen, mit den
   Pfeiltasten verschieben) — die dafuer noetigen Zustaende sind hier als
   eigene Klassen sichtbar gemacht, nicht nur ueber den Fokusring.
   =========================================================================== */

/* ---------- Seitenkopf mit Ansichtsumschalter ---------- */
.ab-kopf{display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.ab-kopf h1{margin:0}
.ab-segment{display:inline-flex;border:1px solid var(--border-strong);
  border-radius:var(--radius-full);overflow:hidden}
.ab-segment button{font:inherit;border:none;background:var(--bg-elevated);color:var(--text);
  padding:var(--sp-2) var(--sp-4);cursor:pointer;font-size:.8125rem;font-weight:600;
  display:inline-flex;align-items:center;gap:6px}
.ab-segment button + button{border-left:1px solid var(--border-strong)}
.ab-segment button[aria-pressed="true"]{background:var(--accent-strong);color:var(--accent-contrast)}

/* ---------- Filterleiste ---------- */
.ab-filter{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:flex-end;
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3)}
.ab-filter .sz-feld{flex:1 1 170px;max-width:280px}
.ab-schalter{display:flex;flex-direction:column;gap:5px;justify-content:flex-end}
.ab-schalter label{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;
  color:var(--text-muted);white-space:nowrap}
.ab-schalter input{width:16px;height:16px}
.ab-treffer{font-size:.8125rem;color:var(--text-muted);margin-left:auto;padding-bottom:var(--sp-2)}

/* Hinweiszeile zur Tastaturbedienung. Steht dauerhaft da, nicht als Tooltip:
   wer nicht zieht, muss die Bedienung finden koennen, ohne sie zu erraten. */
.ab-tastatur{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:.75rem;
  color:var(--info);background:var(--bg-sunken);border-radius:var(--radius-md);
  padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3)}
.ab-tastatur kbd{font:inherit;font-size:.6875rem;font-weight:700;border:1px solid var(--border-strong);
  border-bottom-width:2px;border-radius:var(--radius-sm);padding:0 5px;background:var(--bg-elevated);
  color:var(--text)}

/* ---------- Kanban ---------- */
.ab-board{display:flex;gap:var(--sp-3);overflow-x:auto;align-items:flex-start;
  padding-bottom:var(--sp-3)}
.ab-spalte{flex:0 0 286px;background:var(--bg-sunken);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--sp-3);min-height:140px}
.ab-spalte.ab-ziel{border-color:var(--accent);background:var(--accent-soft)}
.ab-spalte-kopf{display:flex;align-items:center;gap:6px;margin-bottom:var(--sp-3);
  font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  color:var(--accent-strong)}
.ab-zahl{margin-left:auto;background:var(--bg-elevated);border-radius:var(--radius-full);
  padding:1px 9px;font-size:.6875rem;color:var(--text-muted);font-weight:700}
.ab-spalte-liste{display:flex;flex-direction:column;gap:var(--sp-2);min-height:40px}

.ab-karte{background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:var(--sp-3);cursor:grab}
.ab-karte:active{cursor:grabbing}
.ab-karte:hover{border-color:var(--accent)}
/* Aufgenommene Karte (Tastatur) — deutlich sichtbar, zusaetzlich mit Wort im Markup. */
.ab-karte.ab-griff{border-color:var(--accent);box-shadow:var(--shadow-md);
  background:var(--accent-soft)}
.ab-karte.ab-zieht{opacity:.5}
/* Einfuegemarke waehrend des Ziehens: eine Linie, keine Farbaussage. */
.ab-karte.ab-luecke{box-shadow:0 -3px 0 -1px var(--accent)}
.ab-spalte-liste.ab-luecke-ende{box-shadow:0 3px 0 -1px var(--accent)}

.ab-k-kopf{display:flex;align-items:flex-start;gap:var(--sp-2)}
.ab-k-titel{font:inherit;text-align:left;background:none;border:none;padding:0;cursor:pointer;
  font-size:.875rem;font-weight:600;color:var(--accent-strong);flex:1;min-width:0}
.ab-k-titel:hover{color:var(--accent-strong-hover);text-decoration:underline}
.ab-k-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:var(--sp-2)}
.ab-k-fuss{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:var(--sp-2);
  font-size:.6875rem;color:var(--text-muted)}
.ab-frist{font-size:.6875rem;font-weight:700;color:var(--text-muted)}
/* Rot heisst hier nie allein etwas — daneben steht immer das Wort. */
.ab-ueberfaellig{color:var(--status-offen);font-weight:800}
.ab-reihe-tag{display:inline-flex;align-items:center;gap:4px;background:var(--accent-soft);
  color:var(--accent-strong);font-size:.625rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;padding:2px 8px;border-radius:var(--radius-full)}
.ab-reihe-tag.ab-reihe-bucket{background:var(--bg-sunken);color:var(--text-muted)}
/* Die Themenmarke (14.08.2026): dritte FORM statt dritter Farbe. `.ab-reihe-tag`
   hat mit Reihe und Liste schon zwei gefuellte Fassungen -- eine dritte Fuellung
   waere im Graustufendruck und bei Farbsehschwaeche nicht mehr davon zu trennen.
   Umriss statt Flaeche, eckige statt runder Ecken, eigenes Symbol.
   Steht NACH `.ab-reihe-tag`: gleiche Spezifitaet, die spaetere Regel gewinnt --
   Groesse, Abstand und Schrift kommen weiter von dort. */
.ab-thema-tag{background:transparent;border:1px solid var(--accent);
  color:var(--accent-strong);border-radius:var(--radius-sm)}
/* Seit 14.08.2026 fuehrt die Marke zur Themen-Seite. KEINE neue Farbe: Umriss
   in --accent und Text in --accent-strong bleiben, sonst waere die fuehrende
   Marke auf einmal etwas anderes als die Marke ohne Ziel gleich daneben.
   Dass hier etwas fuehrt, sagen Zeigefinger und Unterstreichung beim
   Ueberfahren -- Form statt Farbe, dieselbe Ueberlegung wie bei der Marke
   selbst. `focus-visible` mit dazu, sonst saehe nur die Maus den Hinweis. */
a.ab-thema-tag{text-decoration:none;cursor:pointer}
a.ab-thema-tag:hover,a.ab-thema-tag:focus-visible{text-decoration:underline}
/* Die Erinnerungsmarke (16.08.2026): VIERTE Form, keine vierte Farbe. Reihe und
   Liste sind gefuellt, das Thema ist ein eckiger Umriss -- hier deshalb ein
   GESTRICHELTER Umriss mit runden Ecken. Gestrichelt gegen durchgezogen ist
   auch im Graustufendruck zu unterscheiden, eine vierte Fuellfarbe waere es
   nicht. Steht NACH `.ab-reihe-tag` (gleiche Spezifitaet, spaetere Regel
   gewinnt), Groesse und Schrift kommen weiter von dort. Keine Warnrolle: eine
   gestellte Erinnerung ist ein Normalzustand und kein Problem. */
.ab-wecker-tag{background:transparent;border:1px dashed var(--border-strong);
  color:var(--text-muted);border-radius:var(--radius-full);text-transform:none;
  letter-spacing:0}
.ab-avatar{width:22px;height:22px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent-strong);display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.5625rem;flex:none}
.ab-mail{display:inline-flex;align-items:center;gap:4px;color:var(--info);
  text-decoration:none;font-weight:700}
.ab-mail:hover{text-decoration:underline}
.ab-anlagen-zahl{display:inline-flex;align-items:center;gap:4px}

/* Prioritaet: Pille wie die Statuspillen aus sitzung.css, eigene Farbrolle. */
.ab-prio-dringend{color:var(--prio-dringend);background:var(--prio-dringend-bg)}
.ab-prio-mittel{color:var(--prio-mittel);background:var(--prio-mittel-bg)}
.ab-prio-niedrig{color:var(--prio-niedrig);background:var(--prio-niedrig-bg)}

/* ---------- Liste ---------- */
.ab-tabelle-rahmen{overflow-x:auto;border:1px solid var(--border);
  border-radius:var(--radius-lg);background:var(--bg-elevated)}
.ab-tabelle{border-collapse:collapse;width:100%;min-width:820px}
.ab-tabelle th,.ab-tabelle td{text-align:left;padding:var(--sp-2) var(--sp-3);
  border-bottom:1px solid var(--border);font-size:.8125rem;vertical-align:top}
.ab-tabelle thead th{background:var(--accent-soft);color:var(--accent-strong-hover);
  font-weight:700;white-space:nowrap;position:sticky;top:0}
.ab-tabelle tbody tr:nth-child(even){background:var(--bg-sunken)}
.ab-sort{font:inherit;font-weight:700;color:inherit;background:none;border:none;padding:0;
  cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.ab-sort:hover{color:var(--accent-strong)}
.ab-tabelle .ab-t-titel{font:inherit;text-align:left;background:none;border:none;padding:0;
  cursor:pointer;color:var(--accent-strong);font-weight:600}
.ab-tabelle .ab-t-titel:hover{text-decoration:underline}

/* ---------- Zeitachse ---------- */
.ab-zeit{display:flex;flex-direction:column;gap:var(--sp-3)}
.ab-zeit-gruppe{border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--bg-elevated)}
.ab-zeit-kopf{display:flex;align-items:center;gap:var(--sp-2);margin:0;
  padding:var(--sp-2) var(--sp-3);background:var(--bg-sunken);font-size:.8125rem}
.ab-zeit-kopf .ab-zahl{margin-left:auto}
.ab-zeit-gruppe.ab-zeit-warnung .ab-zeit-kopf{background:var(--status-offen-bg);
  color:var(--status-offen)}
.ab-zeit-liste{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3)}
.ab-zeit-zeile{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;font-size:.8125rem}
.ab-zeit-datum{font-weight:700;flex:0 0 110px}
.ab-punkt{width:10px;height:10px;border-radius:50%;flex:none;background:var(--border-strong)}
.ab-p-dringend{background:var(--prio-dringend)}
.ab-p-mittel{background:var(--prio-mittel)}
.ab-p-niedrig{background:var(--prio-niedrig)}

/* ---------- Karte im Detail (Overlay nutzt sz-overlay / sz-dialog) ---------- */
.ab-detail-kopf{display:flex;align-items:flex-start;gap:var(--sp-3);flex-wrap:wrap;
  margin-bottom:var(--sp-3)}
.ab-detail-kopf h2{margin:0;flex:1 1 260px}
.ab-quelle{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:.8125rem;
  color:var(--info);background:var(--bg-sunken);border-radius:var(--radius-md);
  padding:var(--sp-3);margin-bottom:var(--sp-3)}
/* Die Erinnerung im Dialog (16.08.2026). Steht ausserhalb der Feldgruppe, weil
   Erklaersatz und Folgezeile deren 180-px-Raster sprengen wuerden. */
.ab-wecker{margin-bottom:var(--sp-4)}
.ab-wecker-zeile{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.ab-wecker-zeile input{flex:0 1 250px}
.ab-wecker-satz{display:flex;gap:6px;align-items:flex-start;font-size:.8125rem;
  color:var(--text-muted);margin:var(--sp-2) 0 0}
.ab-wecker-satz svg{flex:none;margin-top:2px}
/* Der fremde Wecker in der Info-Rolle, nicht in der Warnrolle: Dass jemand
   anderes eine Erinnerung gestellt hat, ist kein Fehler -- es ist eine
   Auskunft. Rot machte daraus ein Problem, das es nicht gibt. */
.ab-wecker-fremd{color:var(--info)}
.ab-anlagen{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:var(--sp-3);margin-top:var(--sp-2)}
.ab-anlage{border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--sp-2);background:var(--bg-sunken);display:flex;flex-direction:column;gap:6px}
.ab-anlage img{max-width:100%;max-height:190px;object-fit:contain;border-radius:var(--radius-sm);
  background:var(--bg-elevated)}
.ab-anlage-name{font-size:.6875rem;color:var(--text-muted);word-break:break-all}
/* Fortschritt beim Hochladen (achte Lieferung). Der Einfuegebereich selbst
   traegt die Klassen aus sitzung.css, damit er in allen drei Ansichten gleich
   aussieht. */
.ab-anlagen-lauf{display:flex;align-items:center;gap:var(--sp-2);font-size:.75rem;
  color:var(--accent-strong);margin-top:var(--sp-2)}

/* ---------- Zugehoerigkeit im Dialog (18.08.2026) ----------
   Ein fliessendes Feld statt einer Spalte: Bei sechs Reihen waere eine
   Untereinander-Liste kuerzer als der Erklaersatz darunter, bei dreissig
   waere sie laenger als der halbe Dialog. `flex-wrap` traegt beides.
   Die Hoehenbegrenzung mit eigenem Rollbalken haelt den Speichern-Knopf
   erreichbar, auch wenn die Liste waechst.
   ARCHIVIERTE: gedimmt und gesperrt, aber angekreuzt sichtbar -- die
   Zuordnung besteht und bleibt. Kein Rot: das ist kein Fehler, sondern eine
   Auskunft, dieselbe Ueberlegung wie beim fremden Wecker darueber. */
.ab-zug{margin-bottom:var(--sp-4)}
.ab-zug-titel{display:block;font-weight:600;font-size:.8125rem;margin-bottom:var(--sp-2)}
.ab-zug-liste{display:flex;flex-wrap:wrap;gap:var(--sp-2);max-height:190px;
  overflow-y:auto;padding:var(--sp-2);border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--bg-sunken)}
.ab-zug-wahl{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:400;
  font-size:.8125rem;padding:4px var(--sp-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--bg-elevated);cursor:pointer}
.ab-zug-wahl:hover{border-color:var(--accent)}
.ab-zug-wahl:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.ab-zug-wahl input{width:auto;flex:none;margin:0}
.ab-zug-wahl svg{flex:none}
.ab-zug-name{font-weight:600}
.ab-zug-archiv{opacity:.7;cursor:default;border-style:dashed}
.ab-zug-archiv:hover{border-color:var(--border)}
.ab-zug-satz{display:flex;gap:6px;align-items:flex-start;font-size:.8125rem;
  color:var(--text-muted);margin:var(--sp-2) 0 0}
.ab-zug-satz svg{flex:none;margin-top:2px}

/* ---------- Loeschen (Punkt 8, 18.08.2026) ----------
   KEIN NEUES TOKEN. Fuer die gefaehrliche Aktion gibt es in dieser Oberflaeche
   schon eine Rolle: `.sz-btn-danger` in sitzung.css nimmt `--status-offen` und
   traegt damit jeden Loeschknopf in Sitzung, Stammdaten, Reihen und Listen --
   und den beim Entfernen eines Anhangs gleich hier im Board. Eine zweite
   Rotstufe waere nicht zu unterscheiden, nur zu verwechseln.
   Die Aussage haengt nicht an der Farbe: daneben steht das Wort und davor der
   Muelleimer. Im Graustufendruck und bei Farbsehschwaeche bleibt der Knopf
   damit lesbar -- dieselbe Regel wie bei ueberfaelligen Fristen.
   ABGESETZT UEBER ABSTAND, nicht ueber einen Rahmen: Der Knopf hat mit
   `.sz-btn-danger` schon einen, ein zweiter Strich daneben waere doppelt. Er
   sitzt hinter `.sz-sp` und damit am rechten Rand der Fusszeile -- weit weg von
   der Hand, die auf Speichern zielt. */
.ab-loeschknopf{margin-left:var(--sp-4)}
/* Die Rueckfrage ist schmaler als der Bearbeiten-Dialog (dort 840 px): Sie
   traegt zwei Absaetze, einen Hinweis und zwei Knoepfe -- in voller Breite
   waeren das Zeilen von ueber hundert Zeichen, und gerade dieser Text soll
   gelesen werden. Steht in dieser Datei und damit NACH sitzung.css; gleiche
   Spezifitaet, die spaetere Regel gewinnt. */
.ab-loeschfrage{max-width:520px}

@media (max-width:760px){
  .ab-board{display:block;overflow-x:visible}
  .ab-spalte{flex:none;width:auto;margin-bottom:var(--sp-3)}
  .ab-treffer{margin-left:0}
}