/* ===========================================================================
   Besprechungsreihen-Uebersicht (Stufe 2b, zweite Lieferung)

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

   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
   =========================================================================== */

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

/* ---------- Abschnitte ---------- */
.rl-abschnitt{margin-bottom:var(--sp-6)}
.rl-abschnitt-kopf{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
  margin-bottom:var(--sp-3)}
.rl-abschnitt-kopf h2{margin:0}
.rl-abschnitt-text{font-size:.8125rem;color:var(--text-muted);flex:1 1 260px}

/* ---------- Eine Besprechungsreihe ---------- */
.rl-liste{display:flex;flex-direction:column;gap:var(--sp-3)}
.rl-reihe{background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--sp-4) var(--sp-5)}
.rl-reihe.rl-hervorgehoben{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.rl-kopf{display:flex;align-items:flex-start;gap:var(--sp-3);flex-wrap:wrap}
.rl-titel{flex:1 1 240px;min-width:0}
.rl-titel h3{margin:0 0 3px;font-size:1.0625rem}
.rl-titel a{color:var(--accent-strong);text-decoration:none}
.rl-titel a:hover{color:var(--accent-strong-hover);text-decoration:underline}
.rl-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)}
.rl-meta{display:flex;gap:var(--sp-4);flex-wrap:wrap;font-size:.8125rem;
  color:var(--text-muted);margin-top:var(--sp-2)}
.rl-meta strong{color:var(--text);font-weight:600}

/* Zaehler offener To-Dos. Zahl UND Wort, damit die Bedeutung nicht an der
   Flaeche haengt. */
.rl-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)}
.rl-todos.rl-todos-aktiv{background:var(--accent-soft);color:var(--accent-strong)}

/* ---------- Naechster / letzter Termin ---------- */
.rl-termine{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--sp-3);margin-top:var(--sp-3)}
.rl-tk{border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--sp-3);background:var(--bg-sunken)}
.rl-tk-naechster{background:var(--accent-soft);border-color:var(--accent)}
.rl-tk-eyebrow{font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-muted);font-weight:800;display:block;margin-bottom:4px}
.rl-tk-datum{font-size:.9375rem;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rl-tk-meta{font-size:.75rem;color:var(--text-muted);margin-top:4px;
  display:flex;gap:var(--sp-3);flex-wrap:wrap}
.rl-tk-fuss{margin-top:var(--sp-3)}
.rl-tk a.sz-btn{text-decoration:none}
/* Rot heisst hier nie allein etwas — daneben steht immer das Wort. */
.rl-warnung{color:var(--status-offen);font-weight:700}

/* ---------- Zeitachse ---------- */
.rl-fuss{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;
  margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border)}
.rl-achse{list-style:none;margin:var(--sp-3) 0 0;padding:0 0 0 var(--sp-4);
  position:relative}
/* Die Schiene der Zeitachse: bewusst eine Flaeche in --accent, kein Text. */
.rl-achse::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;
  background:var(--border-strong);border-radius:var(--radius-full)}
.rl-achse li{position:relative;padding:6px 0 6px var(--sp-4)}
.rl-marke{position:absolute;left:-6px;top:11px;width:12px;height:12px;border-radius:50%;
  border:2px solid var(--border-strong);background:var(--bg-elevated)}
.rl-m-gehalten{background:var(--accent);border-color:var(--accent)}
.rl-m-laufend{background:var(--status-beobachtung);border-color:var(--status-beobachtung)}
.rl-m-geplant{background:var(--bg-elevated);border-color:var(--accent)}
.rl-m-ueberfaellig{background:var(--status-offen-bg);border-color:var(--status-offen)}
.rl-m-abgesagt{background:var(--bg-sunken);border-color:var(--status-geschlossen)}
.rl-achse a{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:baseline;
  text-decoration:none;color:var(--text);border-radius:var(--radius-sm);
  padding:3px 6px;margin-left:-6px}
.rl-achse a:hover{background:var(--accent-soft)}
.rl-achse .rl-a-datum{font-weight:700;flex:0 0 150px}
.rl-achse .rl-a-wort{font-size:.75rem;font-weight:700;color:var(--text-muted)}
.rl-achse .rl-a-meta{font-size:.75rem;color:var(--text-muted)}
.rl-achse li.rl-a-naechster .rl-a-datum{color:var(--accent-strong)}

/* ---------- Aufgabenlisten ---------- */
.rl-buckets{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--sp-3)}
.rl-bucket{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)}
.rl-bucket h3{margin:0;font-size:1rem}
/* Seit 13.08.2026 zwei Wege aus einer Aufgabenliste heraus: „Themen öffnen"
   (gegliedert) und „Aufgaben-Board" (flach nach Status). Umbrechend, damit die
   schmale Karte sie nicht nebeneinander quetscht. */
.rl-bucket-fuss{margin-top:auto;padding-top:var(--sp-3);display:flex;
  gap:var(--sp-2);flex-wrap:wrap}
.rl-bucket a.sz-btn{text-decoration:none}

/* ---------- Verwaltung: anlegen, bearbeiten, archivieren (14.08.2026) ------
   Die Knopfleiste sitzt rechts im Abschnittskopf, damit sie nicht zwischen die
   Reihen rutscht. `margin-left:auto` statt einer festen Breite -- die
   Trefferzahl davor waechst mit dem Bestand. */
.rl-werkzeug{margin-left:auto;display:flex;gap:var(--sp-3);align-items:center;
  flex-wrap:wrap}
.rl-schalter{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;
  color:var(--text-muted);cursor:pointer;user-select:none}
.rl-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. */
.rl-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:var(--sp-3) 0}
.rl-form .sz-feld{flex:1 1 220px;max-width:360px}
.rl-form-fuss{display:flex;gap:var(--sp-2);padding-bottom:2px}

/* ---------- Archiv ---------- */
/* Gedaempft, nicht versteckt: die Reihen sind lesbar, nur nicht mehr im
   Alltag. Der Unterschied traegt neben der Flaeche IMMER das Wort
   "archiviert seit …" -- Graustufendruck, Farbsehschwaeche. */
.rl-archiv .rl-abschnitt-kopf h2{color:var(--text-muted)}
.rl-archiviert{background:var(--bg-sunken);border:1px dashed var(--border-strong);
  border-radius:var(--radius-lg);padding:var(--sp-3) var(--sp-5)}
.rl-archiviert h3{margin:0 0 3px;font-size:1.0625rem;color:var(--text-muted)}
.rl-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)}
.rl-archiviert a.sz-btn{text-decoration:none}

@media (max-width:600px){
  .rl-achse .rl-a-datum{flex:1 1 100%}
  .rl-werkzeug{margin-left:0}
}