/* ---------------------------------------------------------------------------
   Gestaltung des Bausteins «Anstehendes» (bmsw_lp-anstehendes.js).

   Herausgeloest am 08.09.2026 aus bmsw_lp-portal.css, weil «Anstehendes» seit
   heute auch auf der LP-Startseite laeuft - und portal.css dort NICHT geladen
   werden darf: sie definiert body, .greeting, h2.section-title und
   footer.page-footer neu und wuerde das Layout der LP-Seite ueberschreiben.

   ACHTUNG, bekannte Doppelung: dieselben Regeln stehen vorerst NOCH in
   portal.css, damit die bereits erzeugten Klassenseiten unveraendert
   weiterlaufen. Beim naechsten Lauf von gen-klassenseiten.py gehoeren sie dort
   entfernt und diese Datei stattdessen eingebunden.
--------------------------------------------------------------------------- */
/* ===== Anstehendes — To-do-Liste, KEIN Kalender ==========================
   Die Daten kommen direkt aus den Excel-Dateien der Klasse, damit die Links
   aus der Aufgabe erhalten bleiben (siehe bmsw_lp-anstehendes.js). Die
   Gestaltung soll darum auch nicht nach Kalender aussehen: eine Liste, in
   der jede Zeile eine Aufgabe ist. */
#anstehendes{margin:0 0 22px;}
.anst-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:10px;}

/* Die Reiterform steht in bmsw_lp-base.css. Hier nur, was dieser Leiste
   eigen ist: der Schalter «Optionen» sitzt rechts aussen. */
/* «Optionen» ist ein Handgriff: Stift = die Anzeige bearbeiten, x = wieder
   zu. Dieselben zwei Zeichen wie im Editor der Fachseite (Marc, 21.09.2026).
   Er sitzt rechts aussen in der Reiterleiste und wandert nicht. */
/* Der Stift steht IN der Reiterleiste - also traegt er sein Stueck Linie
   mit, sonst hat die Linie dort ein Loch (Marc, 22.09.2026: «hier wird die
   Linie durch den Bearbeiten-Knopf unterbrochen»). Seit dem 22.09.2026
   zeichnet jeder Reiter sein Stueck selbst; wer in der Leiste sitzt und
   keines zeichnet, reisst sie auf. */
.anst-optionen { margin-left: auto; display: inline-flex; align-items: center;
  border-bottom: 1px solid var(--rule); }
/* Das Zeichen steht in einem Viereck, wie die +/- Schalter der Bereiche -
   ein Aktionsfeld sieht aus wie ein Aktionsfeld (Marc, 21.09.2026). */
/* Form, Groesse, Rundung, Rotwerden: Aktionsfeld in bmsw_lp-base.css. */
.anst-optionen button { padding: 0; margin-bottom: 4px; font-size: 0.9375rem; }
/* Groesse und Lage stehen in der Zeichenfamilie (bmsw_lp-base.css); hier nur
   das Mass, das in diesen Knopf passt. */
.anst-optionen .opt-zeichen { width: 15px; height: 15px; }
.anst-filter{display:flex;gap:14px;font-size:0.9375rem;color:var(--muted);}
.anst-filter label{display:inline-flex;align-items:center;gap:5px;cursor:pointer;}
.anst-liste{list-style:none;margin:0;padding:0;border:1px solid var(--rule-light);
  border-radius:calc(var(--radius) * 2);overflow:hidden;}
.anst-eintrag{display:grid;grid-template-columns:auto auto 1fr;gap:2px 10px;
  padding:9px 12px;border-bottom:1px solid var(--rule-light);align-items:baseline;}
.anst-eintrag:last-child{border-bottom:none;}
/* Die Marke traegt die Farbe: gelb fuer eine Frist, rot fuer eine Pruefung -
   dieselbe Zuordnung wie in der Lektionstabelle, damit man sie nicht zweimal
   lernen muss. */
.anst-marke{font-weight:700;font-size:0.875rem;letter-spacing:.02em;
  padding:1px 7px;border-radius:var(--radius);white-space:nowrap;}
.anst-abgabe .anst-marke{background:#fff8e1;color:#6b5200;}
.anst-lnw    .anst-marke{background:#fdf0f0;color:#7a2020;}
.anst-fach{color:var(--muted);white-space:nowrap;}
.anst-inhalt{font-weight:700;}
/* Die Zeitangabe steht unter dem Inhalt, ueber die ganze Breite - sonst
   quetscht sie sich neben einen langen Aufgabentext. */
.anst-wann{grid-column:1 / -1;color:var(--muted);font-size:0.9375rem;}
/* Die Naehe zuerst und in der Grundfarbe: Sie ist die Angabe, die zaehlt.
   Das Datum daneben bleibt grau - es belegt, was die Naehe behauptet. */
.anst-naehe{color:var(--fg);font-weight:700;}
.anst-leer{padding:12px;color:var(--muted);}
@media(max-width:620px){
  .anst-eintrag{grid-template-columns:auto 1fr;}
  .anst-fach{grid-column:1 / -1;}
}

/* Vier Arten seit 08.09.2026 - ROT HEISST BENOTET. Die uebernommenen Regeln
   kennen nur .anst-abgabe und .anst-lnw; die beiden neuen reihen sich ein:
   die Hausaufgabe bei den unbenoteten (Petrol), die benotete Abgabe bei den
   Leistungsnachweisen (Dunkelrot). */
.anst-eintrag.anst-hausaufgabe { border-left-color: #00797B; }
.anst-eintrag.anst-hausaufgabe .anst-marke { color: #00797B; }
.anst-eintrag.anst-abgabenote  { border-left-color: #A5282E; }
.anst-eintrag.anst-abgabenote .anst-marke  { color: #A5282E; }

/* ===========================================================================
   Zusammengelegtes «Anstehendes» (20.09.2026). Eine chronologische Liste:
   eigene Aufgaben und Termine auf Weiss, Eintraege der Klassen grau
   hinterlegt. Der Tageswechsel ist dieselbe Linie, nur etwas dunkler - kein
   Datumsband, das kostete zu viel Platz (Marc).
   =========================================================================== */
.anst-kopf { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-bottom:8px; }
/* Zwei Zeilen (Marc, 20.09.2026): oben NUR der Zeitraum, daneben nichts.
   Unten die zwei Gruppen - Haken VOR dem Gruppennamen, Unterfilter
   eingerueckt dahinter. «Meine Klassen» traegt dasselbe Grau wie die
   Klassenzeilen der Liste (#f1f1f1), damit die Farbe oben dasselbe sagt
   wie unten. */
.anst-gruppen { flex:1 1 100%; display:flex; flex-direction:column; gap:3px; font-size:0.8125rem; color:var(--muted); }
.anst-gruppe { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px;
  padding:3px 8px; border-radius:6px; border-left:3px solid transparent; }
/* Umgekehrt seit dem 21.09.2026 (Marc): das EIGENE ist grau hinterlegt,
   nicht das der Klassen. Oben in der Leiste und unten in der Liste
   dasselbe - die Farbe sagt an beiden Orten dasselbe. */
/* Oben in der Optionszeile dasselbe Gruen wie unten in der Liste - «Ich» ist
   an beiden Stellen dieselbe Sache (21.09.2026). */
.anst-gruppe.g-ich { background: color-mix(in srgb, #00797B 10%, var(--card));
  border-left-color:var(--rule-light); }
.anst-gkopf { display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  font-weight:700; color:var(--fg); min-width:118px; }
.anst-gruppe.zu .anst-gkopf { color:var(--muted); font-weight:400; }
/* Die Unterfilter gehoeren sichtbar zur Gruppe: eingerueckt, mit einem
   ruhigen Strich davor - so ist es eine Hierarchie und keine zweite Liste. */
.anst-unter { display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 12px;
  padding-left:10px; border-left:1px solid var(--rule-light); }
/* NICHT .anst-zwei nennen - so heisst schon das zweispaltige Raster der
   Liste weiter unten. */
/* Nicht an den rechten Rand geschoben (Marc, 21.09.2026): der Haken gehoert
   zu den anderen der Zeile und steht gleich hinter ihnen. */
.anst-zweiwahl { display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  font-size:0.75rem; color:var(--muted); }
.anst-gruppe label, .anst-filter label { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
/* Neue Aufgabe / neuer Termin gehen hier auf, nicht auf einer anderen Seite. */
.anst-editor { margin:0 0 10px; }
.anst-editor .ed-karte { margin:0; }
/* Offener Editor: der Handgriff ist rot und fett - er ist gerade aktiv. */
.anst-neu button.an { color:var(--accent); font-weight:700; }
/* Nach den Bauregeln (bmsw_lp-base.css): «+ Aufgabe» und «+ Termin» tun
   etwas HIER - also Handgriffe, grau, erst beim Darueberfahren rot.
   «Archiv und Serien →» fuehrt woandershin - also ein Link, rot. */
.anst-neu { display:inline-flex; align-items:center; gap:14px; }
.anst-neu button {
  font:inherit; font-size:0.8125rem; padding:0; border:none; background:none;
  color:var(--muted); cursor:pointer;
}
.anst-neu button:hover, .anst-neu button:focus-visible { color:var(--accent); }

.anst-neu a { font-size:0.8125rem; text-underline-offset:2px; }

.anst-zeile {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 8px;
  padding:4px 10px 4px 7px; border-top:1px solid #f0f0f0;
  border-left:3px solid transparent; font-size:0.8125rem; line-height:1.35;
}
.anst-liste .anst-zeile:first-child { border-top:none; }
.anst-zeile.anst-neuertag { border-top-color:#b9b9b9; }
/* DAS EIGENE ist hinterlegt - und zwar im Gruen des CD (Petrol #00797B), nicht
   mehr grau (Marc, 21.09.2026: «nicht grau, sondern im gleichen Gruen wie die
   eigenen Termine»). Sehr leicht: die Farbe ordnet zu, sie schreit nicht, und
   der Text muss lesbar bleiben - auch im Dunkeln, darum color-mix mit der
   Kartenfarbe statt einem festen hellen Ton. */
.anst-zeile.anst-ich { background: color-mix(in srgb, #00797B 10%, var(--card)); }
.anst-datum { color:var(--muted); font-size:0.75rem; white-space:nowrap; min-width:92px; }
/* EINE Form fuer alle Marken - Groesse, Polsterung und Rundung gleich;
   unterschieden wird allein durch die Farbe (und das Wort selbst). */
.anst-zeile .anst-marke {
  font-weight:700; font-size:0.6875rem; letter-spacing:.03em; text-transform:uppercase;
  padding:1px 6px; border-radius:3px; white-space:nowrap; background:var(--bg-soft); color:var(--muted);
}
.anst-zusatz { color:var(--muted); font-size:0.75rem; }
.anst-haken { margin-right:4px; vertical-align:-1px; }
.anst-ueber .anst-datum { color:#A5282E; font-weight:700; }

/* Farben aus dem BMSW-CD (doku/cd/CD-FARBEN.md) - eine Farbe je Art. */
.anst-zeile.anst-aufgabe { border-left-color:#00407C; } .anst-aufgabe .anst-marke { background:#E1ECF2; color:#00407C; }
.anst-zeile.anst-termin  { border-left-color:var(--fg); } .anst-termin  .anst-marke { background:var(--bg-soft); color:var(--fg); }
.anst-zeile.anst-privat  { border-left-color:var(--muted); } .anst-privat  .anst-marke { background:var(--bg-soft); color:var(--muted); }
.anst-zeile.anst-privat .anst-titel { color:#666; }
.anst-zeile.anst-abgabe  { border-left-color:#D69D00; } .anst-zeile.anst-abgabe .anst-marke { background:#fdf3d8; color:#8a6400; }
.anst-zeile.anst-abgabenote { border-left-color:#A5282E; } .anst-zeile.anst-abgabenote .anst-marke { background:#f7e3e4; color:#A5282E; }
.anst-zeile.anst-lnw     { border-left-color:#7A0049; } .anst-zeile.anst-lnw .anst-marke { background:#f6e2ec; color:#7A0049; }
.anst-zeile.anst-hausaufgabe { border-left-color:#00797B; } .anst-zeile.anst-hausaufgabe .anst-marke { background:#dff0f0; color:#00797B; }

.anst-zwei { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.anst-spaltenkopf {
  margin:0 0 4px; font-size:0.75rem; text-transform:uppercase; letter-spacing:.02em; color:var(--muted);
}
.anst-ohne-kopf { margin-top:12px; }
@media (max-width: 900px) {
  .anst-zwei { grid-template-columns:1fr; }
  .anst-datum { min-width:0; }
}

/* ---------- Dunkeldesign ----------
   Die blassen Toene der Marken (helles Gelb, helles Rosa) blenden auf
   dunklem Grund. Hier dieselben CD-Farben, aber IN den Kartenton gemischt -
   gleiche Bedeutung, gleiche Familie, nur von der anderen Seite her. */
@media (prefers-color-scheme: dark) { :root[data-theme="geraet"] {
  --m-gold:#E8B93A; --m-rot:#F09A9E; --m-kirsch:#E58FBB;
} }
:root[data-theme="dunkel"] { --m-gold:#E8B93A; --m-rot:#F09A9E; --m-kirsch:#E58FBB; }
.anst-abgabe .anst-marke{background:color-mix(in srgb, #D69D00 22%, var(--card));color:var(--m-gold,#6b5200);}
.anst-lnw    .anst-marke{background:color-mix(in srgb, #A5282E 22%, var(--card));color:var(--m-rot,#7a2020);}
.anst-zeile.anst-abgabe .anst-marke { background:color-mix(in srgb, #D69D00 22%, var(--card)); color:var(--m-gold,#8a6400); }
.anst-zeile.anst-abgabenote .anst-marke { background:color-mix(in srgb, #A5282E 22%, var(--card)); color:var(--m-rot,#A5282E); }
.anst-zeile.anst-lnw .anst-marke { background:color-mix(in srgb, #7A0049 26%, var(--card)); color:var(--m-kirsch,#7A0049); }

/* Eigene Zeilen sind anklickbar: sie oeffnen den Editor an Ort und Stelle.
   Der Hinweis darauf ist leise - ein Zeigefinger und eine Spur Hintergrund
   beim Darueberfahren, kein Rahmen und kein Knopf. */
.anst-zeile.anst-auf { cursor: pointer; }
.anst-zeile.anst-auf:hover { background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.anst-zeile.anst-auf:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
/* «+ Aufgabe» steht beim Spaltenkopf «Ich» (22.09.2026). Der Kopf ist klein
   und grau; der Handgriff daneben bekommt darum kein Kaestchen, sondern bleibt
   ein Wort - wie «Archiv und Serien →» eine Zeile darueber. */
.anst-spaltenkopf { display: flex; align-items: baseline; gap: 10px; }
/* KEINE Sonderform. «+ Aufgabe» ist ein Handgriff wie «+ Termin» im
   Kalender - also dasselbe Kaestchen aus bmsw_lp-base.css. Hier stand am
   22.09.2026 kurzzeitig eine Ausnahme (ohne Rahmen, kleinere Schrift), weil
   der Spaltenkopf daneben klein und grau ist. Marc: «warum ist das + Aufgabe
   nicht im konsistenten Design! wie + Termin... bau die Regel fest!»
   Uebrig bleibt allein, was die UMGEBUNG braucht: der Kopf ist in
   Grossbuchstaben gesetzt, der Handgriff nicht. */
.anst-neu-aufgabe { text-transform: none; letter-spacing: 0; margin-left: 4px; }