/* ===========================================================================
   Aufgabenlisten-Uebersicht (14.08.2026)

   Ergaenzt `sitzung.css`, ersetzt es nicht: Kopfzeile, Knoepfe, Karten, Felder
   sind dort schon definiert und tragen den Praefix `sz-`. Diese Datei bringt
   nur, was die Uebersicht zusaetzlich braucht — Praefix `al-`.

   Eigene Datei statt Mitbenutzung von `reihen.css`: an `/reihen/` wird gerade
   ein Handlauf geklickt, und eine gemeinsame Datei haette jede spaetere
   Aenderung hier auf jene Seite durchschlagen lassen.

   HARTE AUFLAGE (Entscheidungskatalog 01.08.2026, Frage 9/10):
   Theme ausschliesslich ueber CSS-Variablen. Kein Hexwert in diesen Regeln.
   =========================================================================== */

/* ---------- Suchleiste ---------- */
.al-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-4)}
.al-filter .sz-feld{flex:1 1 220px;max-width:340px}
.al-treffer{font-size:.8125rem;color:var(--text-muted);padding-bottom:var(--sp-2)}

/* ---------- Eine Aufgabenliste ---------- */
.al-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--sp-3)}
.al-karte{background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--sp-4);display:flex;
  flex-direction:column;gap:var(--sp-2)}
.al-karte h3{margin:0;font-size:1rem}
.al-marken{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.al-ordner{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)}

/* Zaehler offener Aufgaben. Zahl UND Wort, damit die Bedeutung nicht an der
   Flaeche haengt (Graustufendruck, Farbsehschwaeche). */
.al-todos{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;
  border-radius:var(--radius-full);font-size:.75rem;font-weight:700;
  background:var(--bg-sunken);color:var(--text-muted)}
.al-todos.al-todos-aktiv{background:var(--accent-soft);color:var(--accent-strong)}

/* Die Gliederung — der Unterschied zwischen dieser Seite und dem Board. */
.al-themen{display:flex;align-items:center;gap:6px;font-size:.8125rem;
  color:var(--text-muted)}

.al-fuss{margin-top:auto;padding-top:var(--sp-3);display:flex;
  gap:var(--sp-2);flex-wrap:wrap}
.al-karte a.sz-btn{text-decoration:none}

/* ---------- Verwaltung: anlegen, bearbeiten, archivieren (14.08.2026) ------
   Die Knopfleiste sitzt rechts in der Filterleiste. `margin-left:auto` statt
   einer festen Breite -- die Trefferzahl davor waechst mit dem Bestand. */
.al-werkzeug{margin-left:auto;display:flex;gap:var(--sp-3);align-items:center;
  flex-wrap:wrap}
.al-schalter{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;
  color:var(--text-muted);cursor:pointer;user-select:none}
.al-schalter input{margin:0;accent-color:var(--accent-strong)}

/* Aufklappende Zeile fuer Anlegen und Bearbeiten -- dieselbe Form an beiden
   Stellen, damit sie als derselbe Vorgang erkennbar ist. */
.al-form{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:flex-end;
  background:var(--bg-sunken);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-4);
  margin:0 0 var(--sp-3)}
.al-form .sz-feld{flex:1 1 220px;max-width:360px}
.al-form-fuss{display:flex;gap:var(--sp-2);padding-bottom:2px}

/* ---------- Archiv ---------- */
/* Gedaempft, nicht versteckt: die Listen sind lesbar, nur nicht mehr im
   Alltag. Der Unterschied traegt neben der Flaeche IMMER das Wort
   "archiviert seit …" -- Graustufendruck, Farbsehschwaeche. */
.al-archiv{margin-top:var(--sp-6)}
.al-archiv-kopf{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
  margin-bottom:var(--sp-3)}
.al-archiv-kopf h2{margin:0;color:var(--text-muted)}
.al-archiv-text{font-size:.8125rem;color:var(--text-muted);flex:1 1 260px}
.al-archiviert{background:var(--bg-sunken);border-style:dashed;
  border-color:var(--border-strong)}
.al-archiviert h3{color:var(--text-muted)}
.al-archiv-marke{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;
  border-radius:var(--radius-full);font-size:.75rem;font-weight:700;
  background:var(--bg-elevated);color:var(--text-muted);
  border:1px solid var(--border)}

@media (max-width:600px){
  .al-werkzeug{margin-left:0}
}