/* ===========================================================================
   Sitzungsansicht (Stufe 2b, erste Lieferung)

   Eigenes Stylesheet, weil die Ansicht ein eigenes Modul ist und nicht der
   Umbau des Altcodes. `styles.css` wird vorher geladen und liefert die
   Theme-Tokens; hier steht ausschliesslich Form, kein einziger Farbwert.

   HARTE AUFLAGE aus dem Entscheidungskatalog (01.08.2026, Frage 9/10):
   Theme ausschliesslich ueber CSS-Variablen. Keine Hexwerte in diesen Regeln,
   auch nicht "nur dieses eine Mal" -- 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

   Alles mit Praefix `sz-`, damit es sich mit den Klassen des alten app.js
   nicht ins Gehege kommt.
   =========================================================================== */

.sz-body{margin:0;background:var(--bg);color:var(--text);font-size:15px;line-height:1.5}
.sz-body *{box-sizing:border-box}
.sz-sp{flex:1}
.sz-small{font-size:.8125rem}
.sz-muted{color:var(--text-muted)}
.sz-icon{width:16px;height:16px;flex:none}

/* ---------- Kopfzeile ---------- */
.sz-topbar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-2) var(--sp-4);background:var(--accent);color:var(--accent-contrast);
  box-shadow:var(--shadow-sm)}
.sz-brand{display:inline-flex;align-items:center;gap:var(--sp-2);color:inherit;
  text-decoration:none;font-weight:700}
.sz-brand-mark{width:26px;height:26px;border-radius:var(--radius-sm);display:inline-flex;
  align-items:center;justify-content:center;font-weight:800;
  background:var(--accent-contrast);color:var(--accent-strong)}
.sz-tag{font-size:.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 9px;border-radius:var(--radius-full);text-decoration:none;
  background:var(--accent-strong);color:var(--accent-contrast)}
a.sz-tag:hover{background:var(--accent-strong-hover)}
.sz-meldung{font-size:.8125rem;min-height:1em}
.sz-user{opacity:.9}

/* ---------- Knoepfe ---------- */
.sz-btn{font:inherit;border-radius:var(--radius-md);border:1px solid transparent;
  padding:var(--sp-2) var(--sp-4);cursor:pointer;display:inline-flex;align-items:center;
  gap:var(--sp-2);white-space:nowrap;background:var(--bg-elevated);color:var(--text);
  text-decoration:none}
.sz-btn-sm{padding:var(--sp-1) var(--sp-3);font-size:.8125rem}
.sz-btn-primary{background:var(--accent-strong);color:var(--accent-contrast)}
.sz-btn-primary:hover{background:var(--accent-strong-hover)}
.sz-btn-secondary{background:var(--bg-elevated);color:var(--text);border-color:var(--border-strong)}
.sz-btn-secondary:hover{background:var(--bg-sunken)}
.sz-btn-ghost{background:transparent;color:var(--accent-contrast);border-color:var(--accent-contrast)}
.sz-btn-ghost:hover{background:var(--accent-strong)}
.sz-btn-danger{background:var(--bg-elevated);color:var(--status-offen);border-color:var(--status-offen)}
/* Ein deaktivierter Knopf muss als solcher zu erkennen sein (24.08.2026).
   Bis hierher stand hier nur `opacity:.45`. Das genuegt nicht: auf gefaerbtem
   Grund wird der Ton blasser, Form und Flaeche bleiben dieselben -- Uli hat
   am Mockup gemessen, dass ein gesperrter Knopf vom scharfen praktisch nicht
   zu unterscheiden war. Jetzt wechselt er Flaeche, Schrift und Rahmen und
   verliert den Zeigefinger. Die Regel steht ueber `.sz-btn-primary`, weil
   `:disabled` die hoehere Genauigkeit hat -- sonst bliebe „Weiter" am letzten
   Punkt violett. */
.sz-btn:disabled{color:var(--text-muted);background:var(--bg-sunken);
  border-color:var(--border);cursor:default}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}

/* ---------- Seite ---------- */
.sz-page{max-width:1160px;margin:0 auto;padding:var(--sp-5)}
/* Nur die Sitzungsansicht (24.08.2026): Die Arbeitsflaeche braucht ab 1560 px
   drei Spalten, und in 1160 px passen sie nicht. Als eigene Klasse am `main`
   und nicht als neue Breite fuer `.sz-page` -- Reihen, Board, Stammdaten und
   Protokolle laden dasselbe Stylesheet und sollen ihre Lesebreite behalten. */
.sz-page-breit{max-width:1720px}
/* Nur die Aufgabenliste (25.08.2026, Entwurf L4): sie nutzt die ganze
   Fensterbreite. Grund ist die Seitenleiste zum Springen -- was sie an Platz
   nimmt, soll dem Inhalt nicht fehlen. Der Innenabstand aus `.sz-page` bleibt,
   damit der Text nicht am Rand klebt; die Lesebreite deckelt `liste.css` an
   der Mittelspalte statt an der ganzen Seite.
   ALS DRITTE KLASSE UND NICHT ALS AENDERUNG AN `.sz-page-breit`: an der
   haengen die Waechter der Arbeitsflaeche, und die Sitzung braucht weiterhin
   ihre 1720 px fuer drei Spalten. */
.sz-page-voll{max-width:none}
@media (max-width:600px){.sz-page{padding:var(--sp-3)}}
.sz-page h1{font-size:1.5rem;font-weight:800;color:var(--accent-strong);margin:0 0 var(--sp-2)}
.sz-page h2{font-size:1.125rem;font-weight:700;color:var(--accent-strong-hover);margin:0 0 var(--sp-2)}
.sz-page h3{font-size:1rem;font-weight:700;color:var(--accent-strong);margin:0 0 var(--sp-1)}
.sz-card{background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-4)}
.sz-hinweis{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)}
.sz-fehler{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:.875rem;
  color:var(--status-offen);background:var(--status-offen-bg);
  border-radius:var(--radius-md);padding:var(--sp-3);margin-bottom:var(--sp-3)}
.sz-leer{font-size:.875rem;color:var(--text-muted);font-style:italic;padding:var(--sp-3) 0}

/* ---------- Felder ---------- */
.sz-feldgruppe{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--sp-3);margin-bottom:var(--sp-3)}
.sz-feld{display:flex;flex-direction:column;gap:5px}
.sz-feld label{font-size:.75rem;font-weight:700;color:var(--text-muted)}
.sz-feld input,.sz-feld select,.sz-feld textarea{font:inherit;padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius-sm);border:1px solid var(--border-strong);
  background:var(--bg-elevated);color:var(--text);width:100%}
.sz-feld textarea{min-height:80px;resize:vertical;background:var(--bg-sunken)}

/* ---------- Sitzungskopf ---------- */
.sz-kopf{background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-4)}
.sz-kopf-zeile{display:flex;align-items:flex-start;gap:var(--sp-3);flex-wrap:wrap}
.sz-eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-muted);font-weight:700}
.sz-kopf h1{margin:2px 0 6px}
.sz-kopf-meta{display:flex;gap:var(--sp-4);flex-wrap:wrap;font-size:.875rem;
  color:var(--text-muted)}
.sz-kopf-meta strong{color:var(--text);font-weight:600}
.sz-kopf-aktionen{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-4)}
.sz-zustand{font-size:.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  padding:4px 12px;border-radius:var(--radius-full)}
.sz-zustand-agenda{background:var(--status-beobachtung-bg);color:var(--status-beobachtung)}
.sz-zustand-protokoll{background:var(--status-erledigt-bg);color:var(--status-erledigt)}
.sz-zustand-abgesagt{background:var(--status-geschlossen-bg);color:var(--status-geschlossen)}
.sz-gesperrt{display:flex;gap:8px;align-items:flex-start;font-size:.8125rem;
  color:var(--text-muted);background:var(--bg-sunken);border-radius:var(--radius-md);
  padding:var(--sp-3);margin-top:var(--sp-3)}

/* ---------- Anwesenheitsleiste ---------- */
.sz-anwesenheit{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);background:var(--bg-sunken);
  border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:var(--sp-4)}
.sz-chip{display:inline-flex;align-items:center;gap:8px;background:var(--bg-elevated);
  border:1px solid var(--border-strong);border-radius:var(--radius-full);
  padding:4px 12px 4px 4px;font-size:.8125rem;cursor:pointer;color:var(--text)}
.sz-chip:hover{border-color:var(--accent)}
.sz-avatar{width:24px;height:24px;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:.625rem;flex:none}
.sz-rolle-tag{font-size:.625rem;font-weight:800;text-transform:uppercase;
  background:var(--accent-soft);color:var(--accent-strong);border-radius:4px;
  padding:1px 5px;margin-left:5px}
.sz-punkt-farbe{width:9px;height:9px;border-radius:50%;flex:none;background:var(--border-strong)}
.sz-a-anwesend .sz-punkt-farbe{background:var(--status-erledigt)}
.sz-a-online .sz-punkt-farbe{background:var(--status-beobachtung)}
.sz-a-entschuldigt .sz-punkt-farbe{background:var(--status-bearbeitung)}
.sz-a-abwesend .sz-punkt-farbe{background:var(--status-offen)}
.sz-a-offen .sz-punkt-farbe{background:var(--status-geschlossen)}
/* Der Zustand steht immer zusaetzlich als Wort da -- Farbe allein traegt keine
   Aussage (Graustufendruck, Farbsehschwaeche). */
.sz-a-wort{font-size:.6875rem;color:var(--text-muted)}
.sz-verwalten-tabelle{width:100%;border-collapse:collapse;margin-top:var(--sp-3)}
.sz-verwalten-tabelle th,.sz-verwalten-tabelle td{text-align:left;padding:var(--sp-2);
  border-bottom:1px solid var(--border);font-size:.8125rem;vertical-align:middle}
.sz-verwalten-tabelle thead th{background:var(--accent-soft);color:var(--accent-strong-hover);
  font-weight:700}

/* ---------- Arbeitsflaeche der Tagesordnung (24.08.2026) -----------------
   Entwurf "C -- Arbeitsflaeche", von Robert entschieden. Drei Spalten:
   Agenda links, EIN Punkt in der Mitte, seine Aufgaben rechts. Der Rest der
   Seite (Sitzungskopf, Anwesenheit, Abschluss, Protokollbereich) scrollt
   unveraendert darueber und darunter -- nur dieser Abschnitt klebt.

   VORHER stand hier das Inhaltsverzeichnis vom 13.08.2026: eine klebende
   Liste links, alle Punkte untereinander rechts. Es ist in der Agendaspalte
   aufgegangen -- dieselben Zeilen, dieselben Klassen, nur bestimmt ein Klick
   jetzt, WAS in der Mitte steht, statt wohin gescrollt wird.

   DIE SPALTENLEITER (verbindlich, Auftrag vom 24.08.2026). Sie ist von unten
   nach oben geschrieben, damit die Grundstellung der schmale Bildschirm ist:

     < 900 px    eine Spalte, gestapelt. Die Agenda ist dort ein Auswahlfeld
                 im Punktkopf (`.sz-punktwahl`); zwanzig Eintraege ueber dem
                 Punkt naehmen die ganze Hoehe.
     900-1199    Nummernleiste (~92 px) + Mitte. Die Aufgaben stehen UNTER dem
                 Besprechungstext -- die heutige Anordnung. Nur die Leiste
                 klebt; zwei getrennte Bildlaeufe waeren auf dieser Breite
                 mehr Verwaltung als Nutzen.
     1200-1559   drei Spalten, alle drei kleben und scrollen fuer sich. Die
                 Aufgabenspalte ist geklemmt: clamp(340px,28vw,400px).
     >= 1560     volle Agenda (250 px) oder Nummernleiste, je nach Schalter.

   250 PX FUER DIE AGENDA IST GEMESSEN, 236 waere zu schmal: an einer Agenda
   mit 18 Punkten bricht die zweite Zeile bei 210 px bei jedem ueberfaelligen
   Punkt um (Liste rund 39 % laenger), bei 250 px bei keinem einzigen.

   DER UEBERSCHUSS GEHT IMMER AN DIE AUFGABEN (Roberts Festlegung). Deshalb
   traegt die dritte Spalte das `1fr` und die Mitte ihre Lesebreite
   minmax(420px,78ch). Eingeklappt gewinnt die Aufgabenspalte damit von selbst,
   was die Agenda abgibt -- rund 160 px, im Mockup 620 statt 396.

   `align-items:start` ist die Bedingung fuers Kleben: in einem Raster streckt
   sich eine Spalte sonst auf die volle Hoehe, und ein gestrecktes Element
   klebt nicht. Das war schon beim Verzeichnis die Stelle, an der die Lieferung
   lautlos wirkungslos geworden waere. `min-width:0` gegen das lange Wort ohne
   Trennmoeglichkeit. */
.sz-arbeit{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4);
  align-items:start}
.sz-mitte,.sz-spalte{min-width:0}
/* Grundstellung: die Leiste ist ausgeblendet, gewaehlt wird ueber das Feld. */
.sz-inhalt{display:none}
.sz-punktwahl{display:flex;align-items:center;gap:var(--sp-2);
  margin-top:var(--sp-2)}
.sz-punktwahl select{font:inherit;padding:var(--sp-1) var(--sp-2);
  border-radius:var(--radius-sm);border:1px solid var(--border-strong);
  background:var(--bg-elevated);color:var(--text);max-width:100%}

@media (min-width:900px){
  .sz-arbeit{grid-template-columns:92px minmax(0,1fr)}
  .sz-punktwahl{display:none}
  /* `overflow-x:hidden`: die Leiste ist 92 px schmal, und die 44-px-Klickflaeche
     des Schalters wie ein langes Wort im Titel erzeugten sonst eine
     Bildlaufleiste quer -- unter einer 92-px-Spalte ist die reine Stoerung. */
  .sz-inhalt{display:block;grid-column:1;grid-row:1/3;position:sticky;
    top:var(--sp-3);max-height:calc(100vh - var(--sp-6));overflow-y:auto;
    overflow-x:hidden;overscroll-behavior:contain}
  .sz-mitte{grid-column:2;grid-row:1}
  .sz-spalte{grid-column:2;grid-row:2}
}

/* Drei Spalten. `overscroll-behavior:contain` haelt den Bildlauf in der
   Spalte: ohne das schiebt das Mausrad am Spaltenende die ganze Seite weiter,
   und der Punkt, an dem man arbeitet, verschwindet. */
@media (min-width:1200px){
  .sz-arbeit{grid-template-columns:92px minmax(420px,78ch)
    minmax(clamp(340px,28vw,400px),1fr)}
  .sz-inhalt{grid-row:1}
  .sz-mitte{grid-column:2;grid-row:1}
  .sz-spalte{grid-column:3;grid-row:1}
  .sz-mitte,.sz-spalte{position:sticky;top:var(--sp-3);
    max-height:calc(100vh - var(--sp-6));overflow:auto;
    overscroll-behavior:contain}
}

/* Ab 1560 entscheidet der Schalter. `.sz-arbeit-weit` steht am Raster, wenn
   die Agenda ausgeklappt ist -- darunter hat die Klasse keine Wirkung, weil
   dort ohnehin die Nummernleiste gilt. */
@media (min-width:1560px){
  .sz-arbeit{grid-template-columns:92px minmax(420px,78ch) minmax(396px,1fr)}
  .sz-arbeit-weit{grid-template-columns:250px minmax(420px,78ch) minmax(396px,1fr)}
}

/* ---------- Die Agendaleiste ---------- */
.sz-inhalt-kopf{display:flex;align-items:center;gap:var(--sp-2);
  justify-content:center}
/* In der 92-px-Leiste bleibt vom Kopf nur der Schalter -- „TAGESORDNUNG"
   passt dort nicht und stuende abgeschnitten da. Ueber der Leiste steht
   ohnehin die Ueberschrift des Abschnitts. */
.sz-inhalt-kopf .sz-eyebrow,.sz-inhalt-kopf .sz-sp{display:none}
@media (min-width:1560px){
  .sz-arbeit-weit .sz-inhalt-kopf{justify-content:flex-start}
  .sz-arbeit-weit .sz-inhalt-kopf .sz-eyebrow{display:inline}
  .sz-arbeit-weit .sz-inhalt-kopf .sz-sp{display:block}
}
/* Der Einklapp-Knopf schaltet nur oberhalb von 1560 etwas -- darunter ist die
   Leiste ohnehin schmal, und ein Knopf ohne Wirkung ist keine Bedienung. */
.sz-inhalt-schalter{display:none}
@media (min-width:1560px){.sz-inhalt-schalter{display:inline-flex}}
/* Mindestens 32x32 sichtbar, 44 px Klickflaeche ueber den Rahmen hinaus. */
.sz-inhalt-schalter{min-width:32px;min-height:32px;align-items:center;
  justify-content:center;padding:var(--sp-1);position:relative}
.sz-inhalt-schalter::after{content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
.sz-inhalt-liste{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:grid;gap:2px}

/* Grundform ist die NUMMERNLEISTE: Nummer und Punkttitel in zwei gekuerzten
   Zeilen, dazu der kleine Statuspunkt. Das Statuswort steht nicht sichtbar
   da, aber im zugaenglichen Namen des Knopfes ("3, AT-Austausch Sielaff
   runter, offen") -- Roberts ausdrueckliche Entscheidung gegen einen
   Tooltip als einzigen Traeger. */
.sz-inhalt-zeile{display:grid;grid-template-columns:minmax(0,1fr);row-gap:2px;
  width:100%;text-align:left;font:inherit;font-size:.75rem;
  background:transparent;border:0;border-radius:var(--radius-sm);
  padding:var(--sp-1);cursor:pointer;color:var(--text)}
.sz-inhalt-zeile:hover{background:var(--accent-soft)}
.sz-inhalt-zeile[aria-current="true"]{background:var(--accent-soft);
  box-shadow:inset 3px 0 0 var(--accent-strong)}
.sz-inhalt-nr{font-weight:800;color:var(--accent-strong)}
.sz-inhalt-titel{min-width:0;overflow-wrap:anywhere;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  line-height:1.25}
.sz-inhalt-aufgabe{display:flex;flex-wrap:wrap;gap:3px 6px;align-items:center;
  font-size:.6875rem;color:var(--text-muted)}
/* In der schmalen Leiste bleibt vom Zweizeiler nur der Statuspunkt uebrig --
   fuer Woerter ist dort kein Platz. Sie stehen im `aria-label`. */
.sz-inhalt-status,.sz-inhalt-warn,.sz-inhalt-initialen,.sz-inhalt-mehr{display:none}
/* Der Farbpunkt wiederholt nur, was das Wort im zugaenglichen Namen sagt.
   Dieselben Statusklassen wie die Pillen am Punkt -- dort setzen sie die
   zarte Hintergrundfarbe, hier die kraeftige Flaeche des Punktes. */
.sz-inhalt-punkt{width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--border-strong)}
.sz-inhalt-punkt.sz-st-offen{background:var(--status-offen)}
.sz-inhalt-punkt.sz-st-bearbeitung{background:var(--status-bearbeitung)}
.sz-inhalt-punkt.sz-st-beobachtung{background:var(--status-beobachtung)}
.sz-inhalt-punkt.sz-st-erledigt{background:var(--status-erledigt)}
.sz-inhalt-punkt.sz-st-geschlossen{background:var(--status-geschlossen)}

/* Ausgeklappt (nur ab 1560): die zweite Zeile vom 14.08.2026 kommt zurueck --
   Statuswort, „ueberfaellig", Initialen, „+N weitere". Sie beantwortet „was
   ist hier noch offen und bei wem liegt es" ohne einen einzigen Klick; das
   war der Grund, aus dem es sie gibt, und sie wird deshalb nicht abgebaut. */
@media (min-width:1560px){
  .sz-arbeit-weit .sz-inhalt-zeile{grid-template-columns:1.6em minmax(0,1fr);
    column-gap:var(--sp-2);font-size:.8125rem;padding:var(--sp-1) var(--sp-2)}
  .sz-arbeit-weit .sz-inhalt-nr{grid-row:1/3;text-align:right;font-weight:700}
  .sz-arbeit-weit .sz-inhalt-titel{grid-column:2;display:block;overflow:visible}
  .sz-arbeit-weit .sz-inhalt-aufgabe{grid-column:2}
  .sz-arbeit-weit .sz-inhalt-status{display:inline;color:var(--text-muted)}
  /* Rot steht nie allein -- „überfällig" ist ein Wort. */
  .sz-arbeit-weit .sz-inhalt-warn{display:inline;color:var(--status-offen);
    font-weight:800}
  /* Rechtsbuendig ans Zeilenende. Bewusst 11 px und nicht die 9 px von
     `.sz-avatar`: beim Teilen des Bildschirms mit PMAT sind 9 px verloren. */
  .sz-arbeit-weit .sz-inhalt-initialen{display:inline;margin-left:auto;
    flex:none;font-weight:800;background:var(--accent-soft);
    color:var(--accent-strong);border-radius:var(--radius-full);padding:1px 6px}
  /* „+2": es zaehlt die weiteren Aufgaben des Punktes. Zurueckhaltender als
     die Initialen daneben -- es benennt keine Person, und zwei gleich
     kraeftige Marken in einer 11-px-Zeile lesen sich als eine. */
  .sz-arbeit-weit .sz-inhalt-mehr{display:inline;flex:none;font-weight:700;
    color:var(--text-muted);border:1px solid var(--border-strong);
    border-radius:var(--radius-full);padding:0 5px;margin-left:4px}
}

/* ---------- Tagesordnungspunkte ---------- */
.sz-top{border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-4);background:var(--bg-elevated)}
.sz-top.sz-top-wiederkehrend{background:var(--accent-soft);border-color:var(--accent)}

/* Der Punktkopf klebt INNERHALB der scrollenden Mittelspalte -- und nur dort.
   Unterhalb von 1200 px scrollt die Spalte nicht fuer sich, sondern die Seite;
   ein `sticky` klebte dann am Fensterrand und legte sich ueber den Text
   darunter. Er traegt die eigene Flaeche, sonst schoebe sich der
   Besprechungstext beim Blaettern sichtbar durch ihn hindurch. Die negativen
   Aussenabstaende ziehen ihn ueber die Polsterung der Karte, damit die
   Trennlinie bis an beide Kanten laeuft. */
.sz-punktkopf{z-index:2;background:var(--bg-elevated);
  margin:calc(var(--sp-3) * -1) calc(var(--sp-4) * -1) var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  display:flex;flex-direction:column;gap:var(--sp-2)}
@media (min-width:1200px){.sz-punktkopf{position:sticky;top:0}}
.sz-top-wiederkehrend .sz-punktkopf{background:var(--accent-soft)}
/* Zurueck und Weiter stehen in einer EIGENEN Zeile, in beiden Zustaenden.
   Der Name des naechsten Punktes steht daneben und nicht im Knopf: bei 1280 px
   sprengte „Weiter: AT-Austausch, Sielaff runter" den Kopf (gemessen 333 px). */
.sz-punktkopf-nav{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.sz-naechster{min-width:0;overflow-wrap:anywhere}
.sz-punktkopf-zeile{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.sz-top-kopf{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
/* Die Tastenlegende. DERSELBE Baustein wie im Meeting-Modus (Roberts
   Entscheidung: gleiche Bausteine, nichts doppelt erfinden) -- er ist am
   24.08.2026 aus `meeting.css` hierher gewandert, weil `sitzung.html` jenes
   Stylesheet nicht laedt, `meeting.html` dieses aber schon. Deshalb steht hier
   ausnahmsweise ein `mt-`-Name: eine zweite Fassung unter `sz-` waere genau
   die Verdopplung, gegen die die Entscheidung gerichtet ist. */
.mt-tasten{color:var(--text-muted);font-size:.75rem}
.mt-tasten kbd{font:inherit;font-weight:700;background:var(--bg-sunken);
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:0 5px}

/* Das Ueberlaufmenue am Punkt (⋯). „Loeschen" darf nie neben „Weiter"
   liegen -- ein Fehlgriff dort kostet einen Tagesordnungspunkt samt seiner
   Aufgabenverknuepfungen. */
.sz-menue{position:relative}
.sz-menue-knopf{min-width:32px;min-height:32px;justify-content:center}
.sz-menue-tafel{position:absolute;right:0;top:calc(100% + 4px);z-index:5;
  display:flex;flex-direction:column;gap:var(--sp-1);min-width:230px;
  padding:var(--sp-2);background:var(--bg-elevated);
  border:1px solid var(--border-strong);border-radius:var(--radius-md);
  box-shadow:var(--shadow-md)}
.sz-menue-tafel .sz-btn{justify-content:flex-start;white-space:normal}
.sz-top-nr{width:26px;height:26px;border-radius:50%;background:var(--accent-strong);
  color:var(--accent-contrast);display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.75rem;flex:none}
/* Bei offener Sitzung ist die Nummer ein Eingabefeld ("3 / 18"). In die runde
   Marke passt das nicht, deshalb hier eine eigene Form -- die Zahl bleibt in
   der Akzentfarbe, damit die Kopfzeile nicht auseinanderfaellt. */
.sz-top-nr-eingabe{width:auto;height:auto;border-radius:0;background:none;
  color:var(--text-muted);gap:4px;font-weight:400}
/* `--bg-base` GIBT ES NICHT (gefunden 24.08.2026 beim Bau der Arbeitsflaeche,
   ueber die Token-Pruefung in `test_arbeitsflaeche.py`). Die Angabe stand hier
   und drei Zeilen weiter unten seit dem 01.08.2026 und war folgenlos: eine
   unbekannte Variable ohne Ersatzwert loest sich in nichts auf, das Feld blieb
   durchsichtig und uebernahm die Flaeche darunter. Ersetzt durch die Tokens,
   die genau diese Flaeche benennen -- das Aussehen bleibt damit gleich, und
   im Dunkelmodus faellt das Feld nicht mehr auf die helle Karte zurueck. */
.sz-top-nr-eingabe input{width:46px;text-align:center;padding:3px 4px;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  background:var(--bg-elevated);color:var(--accent-strong);font-weight:800;
  font-size:.75rem}
.sz-top-nr-eingabe input:focus-visible{border-color:var(--accent-strong)}
.sz-top-nr-von{white-space:nowrap}
/* Die Auswahl "auch in einer anderen Sitzung". Angehakt wird eine Sitzung,
   nicht eine Reihe -- ein Protokoll gehoert zu einer Sitzung. */
.sz-uebernahme-liste{display:grid;gap:2px;max-height:220px;overflow:auto;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:var(--sp-2);background:var(--bg-sunken)}
.sz-uebernahme-zeile{display:flex;align-items:center;gap:var(--sp-2);
  padding:4px 6px;border-radius:var(--radius-sm);font-weight:400}
.sz-uebernahme-zeile:hover{background:var(--bg-sunken)}
.sz-uebernahme-zeile input{width:auto;flex:none}
.sz-uebernahme-drin{opacity:.6}
.sz-top-titel{flex:1 1 240px;min-width:0}
.sz-top-werkzeug{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.sz-top-koerper{margin-top:var(--sp-3);display:grid;gap:var(--sp-3)}
.sz-top-fuss{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;
  margin-top:var(--sp-2);font-size:.75rem;color:var(--text-muted)}
.sz-marke{display:inline-flex;align-items:center;gap:5px;background:var(--accent-soft);
  color:var(--accent-strong);font-size:.6875rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;padding:3px 9px;border-radius:var(--radius-full)}
.sz-pille{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;
  border-radius:var(--radius-full);font-size:.75rem;font-weight:700}
.sz-st-offen{color:var(--status-offen);background:var(--status-offen-bg)}
.sz-st-bearbeitung{color:var(--status-bearbeitung);background:var(--status-bearbeitung-bg)}
.sz-st-beobachtung{color:var(--status-beobachtung);background:var(--status-beobachtung-bg)}
.sz-st-erledigt{color:var(--status-erledigt);background:var(--status-erledigt-bg)}
.sz-st-geschlossen{color:var(--status-geschlossen);background:var(--status-geschlossen-bg)}

/* ---------- Aufgabe am Tagesordnungspunkt (siebte Lieferung) ---------- */
/* Abgesetzter Block unter dem Besprechungstext: der Punkt ist das Thema, die
   Aufgabe das, was jemand mitnimmt. Zwei Dinge, sichtbar getrennt. */
.sz-aufgabe{margin-top:var(--sp-3);padding:var(--sp-3);border-radius:var(--radius-md);
  background:var(--bg-sunken);border:1px solid var(--border)}
.sz-aufgabe-kopf{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  font-size:.8125rem}
.sz-aufgabe-meta{display:flex;gap:var(--sp-4);flex-wrap:wrap;font-size:.8125rem;
  color:var(--text-muted);margin:var(--sp-2) 0}
.sz-aufgabe-meta strong{color:var(--text);font-weight:600}
.sz-aufgabe-prio{color:var(--text-muted)}
.sz-aufgabe-prio strong{color:var(--text);font-weight:600}
/* „ueberfaellig" steht als WORT da. Die Farbe ist Zugabe, nicht die Aussage --
   im Graustufendruck und bei Farbsehschwaeche bleibt der Satz lesbar. */
.sz-warnwort{color:var(--status-offen);font-weight:700}
.sz-aufgabe-form{margin-top:var(--sp-3);padding-top:var(--sp-3);
  border-top:1px solid var(--border)}
.sz-aufgabe-aktionen{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2)}

/* ---------- Die Aufgabenspalte (24.08.2026) ------------------------------ */
/* Kopf und Fuss der Spalte kleben. Der Fuss traegt die Schnellzeile
   „Naechste Aufgabe" -- bei zwoelf Aufgaben waere sie sonst nur nach einem
   Bildlauf ans Spaltenende erreichbar, und genau dann wird sie gebraucht. */
.sz-spalte-kopf{z-index:2;background:var(--bg-elevated);
  display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;
  padding-bottom:var(--sp-2);border-bottom:1px solid var(--border)}
.sz-spalte-fuss{z-index:2;background:var(--bg-elevated);
  display:flex;align-items:flex-end;gap:var(--sp-2);flex-wrap:wrap;
  padding-top:var(--sp-2);border-top:1px solid var(--border)}
/* Geklebt wird nur, wo die Spalte auch fuer sich scrollt. Darunter scrollt die
   Seite, und ein klebender Fuss legte sich ueber die zweite Aufgabenkarte. */
@media (min-width:1200px){
  .sz-spalte-kopf{position:sticky;top:0}
  .sz-spalte-fuss{position:sticky;bottom:0}
}

/* ---------- Mehrere Aufgaben je Punkt (C11 Stufe A, 19.08.2026) ---------- */
/* Aus der Zeilenform von `/liste/` ist am 24.08.2026 eine KARTE geworden --
   die Spalte ist schmaler als der frueher volle Punkt, und drei Felder
   nebeneinander mit je eigener Beschriftung passen dort nicht mehr. Bewusst
   weiter dieselben Verhaeltnisse wie die Aufgabenkarte in `/liste/`: eine
   Aufgabe ist an beiden Stellen dieselbe Sache.
   DER LINKE BALKEN BEDEUTET „UEBERFAELLIG", nicht Prioritaet (Roberts
   Festlegung). Er traegt die Aussage nie allein -- daneben steht die Wortpille. */
.sz-az-liste{margin:var(--sp-2) 0;display:grid;gap:var(--sp-2)}
.sz-az{border:1px solid var(--border);border-left:3px solid var(--border);
  border-radius:var(--radius-md);padding:var(--sp-3);background:var(--bg-elevated);
  box-shadow:var(--shadow-sm)}
.sz-az-saeumig{border-left-color:var(--status-offen)}
/* Die ganze Karte ist Einfuege- und Ablageziel (`data-anlagen-zone`): Strg+V
   und Hineinziehen wirken ueberall auf ihr, nicht nur auf der schmalen Zeile
   darin. Beim Ziehen leuchtet der Kartenrand -- `sz-zone-aktiv` ist dasselbe
   Muster wie am Einfuegebereich selbst. */
.sz-az.sz-zone-aktiv{border-color:var(--accent);background:var(--accent-soft)}
.sz-az-kopf{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
/* Die Nummer steht nur ab zwei Aufgaben da (siehe `aufgabeZeileMarkup`) und ist
   deshalb kein Platzhalter, der leer bleiben koennte. */
.sz-az-nr{flex:none;font-size:.75rem;font-weight:800;color:var(--accent-strong);
  background:var(--accent-soft);border-radius:var(--radius-full);
  min-width:1.4em;text-align:center;padding:1px 5px}
.sz-az-titel{flex:1 1 160px;min-width:0}
/* Verantwortlich, Faellig und Status in EINER Zeile, ohne Einzelbeschriftung --
   in einer 400-px-Spalte kosten drei Beschriftungen eine ganze Zeile Hoehe.
   Der zugaengliche Name steht am Feld selbst (`aria-label`), damit die Angabe
   nicht bloss weggelassen ist. Bei schmaler Karte bricht die Zeile um. */
.sz-az-felder{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-2) 0}
.sz-az-felder select,.sz-az-felder input{font:inherit;font-size:.8125rem;
  padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);background:var(--bg-elevated);
  color:var(--text);min-width:0;flex:1 1 120px}
/* Bei gesperrter Sitzung dieselben Angaben als BESCHRIFTETE Marken. Eine
   nackte Datums- oder Namenspille laesst offen, was sie bedeutet. */
.sz-az-marken{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-2) 0}
.sz-marke-feld{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;
  color:var(--text-muted);background:var(--bg-sunken);
  border-radius:var(--radius-full);padding:2px 10px}
/* „ueberfaellig" als eigene Wortpille, zusaetzlich zum Datum. */
.sz-warnpille{display:inline-flex;align-items:center;font-size:.75rem;
  font-weight:700;color:var(--status-offen);background:var(--status-offen-bg);
  border-radius:var(--radius-full);padding:2px 10px}
.sz-az-fuss{margin-top:var(--sp-2);display:flex;align-items:center;
  gap:var(--sp-2);flex-wrap:wrap;font-size:.75rem}
/* Das Feld fuer die naechste Aufgabe: Eingabe und Knopf auf einer Grundlinie,
   wie die Schnellerfassung in `/liste/`. */
.sz-az-neu{display:flex;align-items:flex-end;gap:var(--sp-2);flex-wrap:wrap;
  flex:1 1 240px}
.sz-az-neu .sz-feld{flex:1 1 160px}

/* ---------- Anlagen (achte Lieferung) ---------- */
/* Steht hier und nicht in sitzung.js/meeting.css/aufgaben.css, weil alle drei
   Ansichten denselben Einfuegebereich zeigen und alle drei dieses Stylesheet
   als gemeinsame Huelle laden. Praefix `sz-`, kein Farbwert. */
.sz-anlagen{margin-top:var(--sp-2)}
.sz-anlagen-kopf{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  margin-bottom:var(--sp-2)}
/* Auf der Karte ist der Anlagenbereich eine ZEILE und keine 199-px-Flaeche
   (24.08.2026): in einer 400-px-Spalte nahm der leere Kasten mehr Hoehe als
   die Aufgabe darueber. Die Miniaturen bleiben anklickbar und tragen ihren
   `alt`-Text; der Einfuegeweg ist unveraendert dreifach -- Strg+V,
   Hineinziehen (die ganze Karte ist Ziel) und die Dateiauswahl. */
.sz-anlagen-liste{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.sz-anlage{border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--sp-1);display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  background:var(--bg-elevated);max-width:100%}
.sz-anlage img{max-width:100%;max-height:72px;object-fit:contain;
  border-radius:var(--radius-sm);border:1px solid var(--border)}
.sz-anlage-name{font-size:.6875rem;color:var(--text-muted);word-break:break-all}
.sz-anlage-fuss{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;width:100%}

/* Der Einfuegebereich. Gestrichelt, weil er eine Ablageflaeche ist und kein
   Kasten mit Inhalt -- dieselbe Formensprache wie ueberall sonst fuer
   "hier darf etwas hinein". */
.sz-zone{margin-top:var(--sp-2);display:flex;align-items:center;gap:var(--sp-2);
  flex-wrap:wrap;padding:var(--sp-1) var(--sp-2);border:1px dashed var(--border-strong);
  border-radius:var(--radius-md);background:var(--bg-sunken);font-size:.6875rem;
  color:var(--text-muted)}
.sz-zone:focus-visible{border-color:var(--accent-strong)}
.sz-zone-aktiv{border-color:var(--accent);background:var(--accent-soft)}
.sz-zone-text kbd{font:inherit;border:1px solid var(--border-strong);border-radius:4px;
  padding:0 4px;background:var(--bg-elevated)}
.sz-zone-datei{font:inherit;font-size:.75rem;max-width:100%}
.sz-zone-gesperrt{font-size:.75rem;color:var(--text-muted);font-style:italic}

/* Der Fortschritt beim Hochladen. Sichtbar, weil ein Screenshot mehrere
   Megabyte haben kann -- ohne Rueckmeldung klickt man ein zweites Mal. */
.sz-anlagen-lauf{display:flex;align-items:center;gap:var(--sp-2);font-size:.75rem;
  color:var(--accent-strong);margin-bottom:var(--sp-2)}
.sz-anlagen-fehler{font-size:.75rem;color:var(--status-offen);
  background:var(--status-offen-bg);border-radius:var(--radius-sm);
  padding:var(--sp-2);margin-bottom:var(--sp-2);white-space:pre-line}

/* ---------- Abschluss-Dialog ---------- */
.sz-overlay{position:fixed;inset:0;background:var(--overlay);z-index:300;
  display:flex;align-items:flex-start;justify-content:center;padding:var(--sp-5);
  overflow-y:auto}
.sz-dialog{background:var(--bg-elevated);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);max-width:840px;width:100%;padding:var(--sp-5)}
.sz-dialog h2{margin-top:0}
.sz-schritt{border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3)}
.sz-schritt-kopf{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.sz-schritt-nr{width:28px;height:28px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent-strong);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.875rem;flex:none}
.sz-schritt-kopf h3{margin:0}
.sz-uebernahme{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sz-uebernahme li{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);
  border-radius:var(--radius-md)}
.sz-uebernahme li.sz-wiederkehrend{background:var(--accent-soft);border-color:var(--accent)}
.sz-uebernahme li.sz-abgewaehlt{opacity:.62}
.sz-uebernahme input[type="checkbox"]{width:18px;height:18px;flex:none}
.sz-uebernahme .sz-u-titel{font-weight:600;font-size:.875rem;flex:1 1 220px;min-width:0}
.sz-uebernahme .sz-u-grund{font-size:.75rem;color:var(--text-muted);flex:none}
.sz-dialog-fuss{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;
  margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--border)}
.sz-zaehler{font-size:.8125rem;color:var(--text-muted)}
.sz-erfolg{display:flex;gap:var(--sp-4);align-items:flex-start;
  background:var(--status-erledigt-bg);border:1px solid var(--status-erledigt);
  border-radius:var(--radius-lg);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-4)}
.sz-erfolg h2{color:var(--status-erledigt);margin-bottom:6px}
.sz-schalter{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:.8125rem}

/* Bestaetigungsschritt vor dem Versand (neunte Lieferung). Die Empfaenger
   stehen NAMENTLICH da -- eine Zahl allein sagt nicht, wer die Mail bekommt. */
.sz-dok-leute{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:flex;
  flex-direction:column;gap:4px;max-height:220px;overflow:auto}
.sz-dok-leute li{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
  padding:4px var(--sp-3);border:1px solid var(--border);border-radius:var(--radius-md)}
.sz-dok-quelle{background:var(--status-beobachtung-bg);color:var(--status-beobachtung)}

/* Eine EINZELNE Aufgabe per E-Mail (20.08.2026). Ein ABSCHNITT, kein Overlay:
   im Board sitzt er im offenen Karten-Dialog, und ein Fenster ueber einem
   Fenster verdeckte genau die Aufgabe, um die es geht. Abgesetzt wird er
   deshalb ueber Rahmen und Flaeche, nicht ueber eine zweite Ebene. */
.sz-am{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  background:var(--bg-sunken)}
.sz-am-kopf{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.sz-am-kopf h3{margin:0}
.sz-am-fuss{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;
  margin-top:var(--sp-3)}
.sz-am-vorschau{margin-top:var(--sp-3)}
/* Der abgeschottete Rahmen. Er hat seine eigene Bildlaufleiste -- das Dokument
   bringt seinen eigenen Stil mit und wird hier nicht mitskaliert. */
.sz-am-dokument{display:block;width:100%;height:52vh;min-height:300px;
  border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  background:var(--bg-elevated)}

@media (max-width:600px){
  .sz-am-dokument{height:46vh}
}