/* =====================================================================
   bmsw_lp-lehrperson.css — NUR fuer die LP-Startseiten (lp-*.html)
   MODUL "LP-Startseite" — optional. Weder die Lektions-Startseite noch die
   Klassenportale brauchen diese Datei. Setzt bmsw_lp-base.css voraus
   (Farben, Kopf, Fusszeile).
   Beim Aendern die Versionsnummer im <link> hochzaehlen (?v=1 → ?v=2).
   ===================================================================== */

/* Gleiche Seitenbreite und Linksbuendigkeit wie die Klassenportale, damit
   beide Seiten sich wie ein Haus anfuehlen. */
/* Die Seite waechst mit dem Fenster (Marc, 17.09.2026). Frueher standen auch
   auf einem breiten Bildschirm 850 px Inhalt und daneben nichts - gerade das
   Wochenraster kann jede zusaetzliche Spalte brauchen. Fliesstext bleibt
   trotzdem lesbar: die Textbloecke haben ihre eigene Breite (z. B. 60ch).
   AUSNAHME Teams und andere Rahmen: dort bleibt alles wie bisher - das Feld
   gehoert nicht uns, und Marc will dort nichts veraendert haben. */
/* Nur die Hoechstbreite - Polsterung und Zentrierung stehen in
   bmsw_lp-base.css (21.09.2026). */
body { --seite-breite:1500px; }
body.im-rahmen { --seite-breite:850px; }
/* Der Rand rechnet jetzt fliessend (--rand) - eine eigene Stufe braucht es
   nicht mehr. */

.greeting { color:var(--muted); font-size:1rem; margin:0 0 20px; }
h2.section-title { text-transform:uppercase; }

/* ---------- Klassenbloecke ----------
   Eine Lehrperson hat heute bis zu vier Faecher, naechstes Jahr moeglicherweise
   zwoelf. Gruppiert wird nach KLASSE, weil das die Einheit ist, in der eine
   Lehrperson denkt ("was mache ich morgen in der ZVS26u?"). */
/* ===== KLASSENKARTEN ========================================================
   Marc, 22.09.2026: «die Klassenliste wuerde ich eher als Klassenkarten
   darstellen … anstatt ueber die ganze Seite da einzelne Kacheln machen, die
   in der Breite Klassenname und Link zur Klassenstartseite haben. Und dann
   unterhalb die Faecher … da kriegst du wahrscheinlich je nach Breite mehrere
   so Klassenkarten nebeneinander.»

   Der Name «Klassenliste» bleibt - er sagt, was man findet; die Karte sagt
   nur, wie es aussieht.

   KEINE Aenderung am Erzeugten: die Abschnitte tragen schon die richtige
   Gliederung (Kopf mit Name und Portal-Verweis, darunter die Faecher als
   Liste). Es fehlte allein das Raster darum herum.

   min(320px, 100%) statt 320px: auf einem Telefon ist der Kasten schmaler als
   320px, und eine Spalte mit fester Mindestbreite ragte dann hinaus. */
.bereich-block[data-block="faecher"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 14px; align-items: start;
}
/* Die Ueberschrift gehoert ueber ALLE Karten, nicht in die erste Spalte. */
.bereich-block[data-block="faecher"] > h2 { grid-column: 1 / -1; }
section.klasse {
  margin: 0; min-width: 0;
  padding: 11px 14px 3px;
  background: var(--card);
  border: 1px solid var(--rule-light); border-radius: calc(var(--radius) * 2);
}
.klasse-kopf {
  /* KEIN text-transform:uppercase - der Klassenname ist Inhalt, kein Schmuck.
     "ZVS26u" und "ZVS26U" waeren verschiedene Klassen; gross geschrieben sieht
     die Lehrperson nicht mehr, welche gemeint ist. */
  font-family:"Arial Black",Arial,sans-serif; font-weight:900; font-size:0.9375rem;
  letter-spacing:.03em; color:var(--fg);
  margin:0 0 2px; padding-bottom:7px; border-bottom:1px solid var(--rule);
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.klasse-portal {
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif; font-weight:400;
  font-size:0.875rem; text-transform:none; letter-spacing:0;
}
.klasse-portal { margin-left:auto; }   /* Link rechtsbündig (Marc, 20.09.2026) */
/* ROT, nicht grau (Marc, 22.09.2026: «zur Klassen-Startseite → muss auch rot
   sein - Konsistenz»). Bauregeln 1: rot ist der LINK, der woandershin fuehrt;
   grau ist der Handgriff, der auf dieser Seite etwas tut. Dieser Verweis
   fuehrt ins Klassenportal - also rot. Die Ausnahme hier war eine
   Uneinheitlichkeit, kein Entscheid. */

ul.faecher { list-style:none; margin:0; padding:0; }
ul.faecher li {
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:9px 0; border-bottom:1px solid var(--rule-light);
}
ul.faecher li:last-child { border-bottom:none; }
/* Fachfarbe aus dem BMSW-CD (fachfarben.py). In der KLASSENLISTE bleibt sie
   AUS (Marc, 20.09.2026: «keine Farben hier, nur im Kalender»); die Zeile
   traegt sie trotzdem als Eigenschaft --f, damit sie sich in den Anpassungen
   zuschalten laesst. Farbe ist nie das einzige Merkmal. */
ul.faecher li { border-left:3px solid transparent; padding-left:7px; }
/* --fk = Farbe der Klasse (schlaegt die Fachfarbe), --f = Farbe des Fachs. */
body.fach-balken ul.faecher li { border-left-color:var(--fk, var(--f)); }
body.fach-flaeche ul.faecher li { background:color-mix(in srgb, var(--fk, var(--f)) calc(var(--fach-deckung,10) * 1%), var(--card)); }
.f-link { margin-left:auto; }
/* flex-basis auto statt 14em: In der Karte ist nicht Platz fuer 14em plus
   Verweis - die Zeile brach um, und ein einzelnes Fach sah aus wie zwei
   (22.09.2026). min-width:0 laesst einen langen Fachnamen kuerzen, statt die
   Karte zu sprengen. */
.f-name { font-weight:bold; flex:1 1 auto; min-width:0; }
.f-link a { color:var(--accent); text-decoration:none; white-space:nowrap; }
.f-link a:hover { text-decoration:underline; }

/* ---------- Kalender-Abo ---------- */
section.abo { margin-top:26px; }
.abo-text { margin:0 0 12px; max-width:60ch; }
.abo-knopf { margin:0 0 10px; }
a.btn-abo {
  display:inline-block; background:var(--accent); color:#fff;
  text-decoration:none; padding:9px 16px; border-radius:4px;
  font-weight:600; line-height:1.2;
}
a.btn-abo:hover { opacity:.9; }
a.btn-abo::before { content:"🗓 "; }
.abo-fallback { margin:0; font-size:0.9375rem; color:var(--muted); }
.abo-fallback code {
  /* Muss auf dem Handy umbrechen duerfen, sonst schiebt die Adresse die
     ganze Seite in die Breite. */
  word-break:break-all; background:#f4f4f4; padding:1px 4px; border-radius:3px;
}

/* ---------- Hinweiskasten ---------- */
.hinweis {
  border-left:3px solid var(--rule); background:#fafafa;
  padding:12px 14px; margin:22px 0 0; font-size:0.9375rem; line-height:1.55;
}
.hinweis h3 {
  font-family:"Arial Black",Arial,sans-serif; font-weight:900; font-size:0.875rem;
  text-transform:uppercase; letter-spacing:.02em; margin:0 0 6px; color:var(--fg);
}
.hinweis p { margin:0 0 8px; }
.hinweis p:last-child { margin-bottom:0; }
.hinweis a { color:var(--accent); }

/* ---------- Handy ----------
   Unter 620px stapeln sich Fachname und Link, statt sich die Zeile zu teilen.
   Der Link wird dabei ein grosses Ziel und kein schmaler Streifen. */
@media (max-width:620px) {
  /* Bis zum 22.09.2026 stand der Verweis hier UNTER dem Fachnamen: «Fach-
     Startseite oeffnen →» passte neben ihm nicht auf eine Zeile. Seit der
     Verweis «oeffnen →» heisst, passt er - und die Zeile bleibt eine Zeile.
     Gemessen bei 420px: Fachname und Verweis zusammen rund 220 von 366px. */
  ul.faecher li { padding:9px 0; }
  .f-link a { display:inline-block; padding:4px 0; min-height:24px; font-weight:600; }
  /* Kleine Textlinks brauchen auf dem Handy eine antippbare Hoehe. Ohne das
     sind "Klassenseite" und der Anleitungslink 13-15px hoch - mit dem Finger
     kaum zu treffen, und Fehlgriffe landen auf dem Nachbarlink. */
  .klasse-portal a, .hinweis a {
    display:inline-block; padding:6px 0; min-height:24px;
  }
  .klasse-kopf { padding-bottom:2px; }
}

/* Wie im Wochenraster: auf dunklem Grund den Balken aufhellen, sonst ist
   Anthrazit auf Fast-Schwarz kein Balken mehr. */
@media (prefers-color-scheme: dark) { :root[data-theme="geraet"] body.fach-balken ul.faecher li {
  border-left-color: color-mix(in srgb, var(--fk, var(--f)) 62%, #fff);
} }
:root[data-theme="dunkel"] body.fach-balken ul.faecher li {
  border-left-color: color-mix(in srgb, var(--fk, var(--f)) 62%, #fff);
}

/* ---------- Notizen zur Klasse (22.09.2026) ----------
   ZUGEKLAPPT in der Karte: sonst wachsen alle Karten auf die Hoehe der
   laengsten Notiz, und die Uebersicht, fuer die es die Karten gibt, waere
   wieder weg. Die Marke am Titel sagt, dass etwas drinsteht - ohne dass man
   aufklappen muss.
   Die Form ist die der Karte aus bmsw_lp-base.css (Dreieck ▸ ▾); hier steht
   nur, was diese Stelle unterscheidet. */
.klasse-notiz { margin: 4px 0 6px; border-top: 1px solid var(--rule-light); padding-top: 6px; }
.klasse-notiz > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 6px;
  font-size: 0.8125rem; color: var(--muted);
}
.klasse-notiz > summary::-webkit-details-marker { display: none; }
.klasse-notiz > summary::before { content: "\25B8"; color: var(--muted); }
.klasse-notiz[open] > summary::before { content: "\25BE"; }
.klasse-notiz > summary:hover { color: var(--accent); }
/* Ein gefuelltes Feld traegt einen Punkt in der Markierungsfarbe des CD -
   sichtbar, ohne aufzuklappen. Farbe ist nie das einzige Merkmal: der Titel
   der Karte nennt die Klasse, und das Feld selbst steht einen Klick entfernt. */
.klasse-notiz .notiz-marke { width: 6px; height: 6px; border-radius: 50%; display: none; }
.klasse-notiz.hat-text .notiz-marke { display: inline-block; background: var(--marker); }
.notiz-inhalt { padding: 6px 0 2px; }
.notiz-inhalt textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 0.875rem;
  padding: 6px 8px; border: 1px solid var(--rule-light); border-radius: var(--radius);
  background: var(--card); color: var(--fg); resize: vertical;
}
.notiz-warnung { margin: 5px 0 0; font-size: 0.75rem; color: var(--accent); }
.notiz-knoepfe { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.notiz-stand { font-size: 0.75rem; color: var(--muted); }