/* =====================================================================
   bmsw_lp-portal.css — NUR fuer die Klassenportale (klasse-*.html)
   MODUL "Klassenportal" — optional. Die Lektions-Startseite braucht diese
   Datei NICHT.  Setzt bmsw_lp-base.css voraus (Farben, Kopf, Fusszeile).
   Beim Aendern die Versionsnummer im <link> hochzaehlen (?v=20 → ?v=21).
   ===================================================================== */

/* Seitenbreite: 850px, LINKSBUENDIG (bewusst nicht zentriert) */
/* Polsterung und Zentrierung: bmsw_lp-base.css (21.09.2026). */
body { --seite-breite:850px; }

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

/* ---------- Faecher-Uebersicht ----------
   Der Spaltenabstand war fest auf 2cm gesetzt (~75px je Spalte, dreimal also
   ~225px). Auf dem Desktop wirkte das grosszuegig; auf einem 375px-Handy schob
   es die Tabelle auf 468px hinaus - und weil html/body overflow-x:hidden
   tragen, wurde die dritte Spalte lautlos abgeschnitten. Der "oeffnen"-Link lag
   damit ausserhalb des Fensters und war weder sichtbar noch antippbar: die
   Klasse konnte auf dem Handy kein einziges Fach oeffnen.
   Darum jetzt ein relativer Abstand, der mitschrumpft. */
/* width:auto (nicht 100%): die Tabelle bleibt so breit wie ihr Inhalt, das ist
   das gewohnte Desktop-Bild. Die Handy-Tauglichkeit kommt vom clamp() unten
   und vom Umbruch in Bloecke, nicht von der Tabellenbreite. */
table.faecher { width:auto; border-collapse:collapse; font-size:1rem; }
table.faecher th {
  text-align:left; font-family:"Arial Black",Arial,sans-serif; font-weight:900;
  font-size:0.875rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted);
  border-bottom:2px solid var(--rule); padding:7px clamp(12px, 6vw, 2cm) 7px 0;
}
table.faecher td { padding:13px clamp(12px, 6vw, 2cm) 13px 0; border-bottom:1px solid var(--rule-light); vertical-align:baseline; }
table.faecher td.t-fach { font-weight:bold; }
table.faecher td.t-lp   { color:var(--muted); }
table.faecher td.t-link { text-align:left; white-space:nowrap; }
table.faecher th:last-child, table.faecher td:last-child { padding-right:0; }
table.faecher a { color:var(--accent); text-decoration:none; }
table.faecher a:hover { text-decoration:underline; }

.mail-all { margin:12px 0 0; font-size:0.9375rem; }
.mail-all a { color:var(--accent); text-decoration:none; }
.mail-all a:hover { text-decoration:underline; }

footer.page-footer { margin-top:28px; padding-top:14px; }

/* ---------- Schulnachrichten ---------- */
#schulnachrichten { font-size:0.9375rem; margin-bottom:24px; }
#schulnachrichten h2 {
  font-family:"Arial Black",Arial,sans-serif; font-weight:900; font-size:0.875rem;
  text-transform:uppercase; letter-spacing:.02em; color:var(--fg); margin:0 0 8px;
}
#news-list { display:flex; flex-direction:column; gap:14px; }
.news-item  { border-left:3px solid var(--accent); padding:1px 0 1px 12px; }
.news-date  { display:block; font-size:0.875rem; color:#9a9a9a; text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }
.news-title { font-family:"Arial Black",Arial,sans-serif; font-weight:900; font-size:0.9375rem; margin:0 0 3px; color:var(--fg); }
.news-body  { color:var(--fg); font-size:0.9375rem; line-height:1.5; }
.news-body a{ color:var(--accent); }
/* Aufzaehlungen in Schulnachrichten (Mini-Syntax "- " bzw. "1. ") */
.news-body ul, .news-body ol { margin:4px 0; padding-left:18px; }
.news-body li { margin:0 0 2px; }
.news-empty { color:var(--muted); margin:0; }

/* ---------- Tageszitat ---------- */
.zitat {
  font-family:Georgia,"Times New Roman",serif; font-style:italic; color:#6b6b6b;
  font-size:1.0625rem; line-height:1.5; border-top:1px solid var(--rule-light);
  padding-top:16px; text-align:center;
}
.zitat .zitat-label {
  display:block; font-family:Arial,"Helvetica Neue",Helvetica,sans-serif; font-style:normal;
  font-size:0.875rem; letter-spacing:.02em; color:#9a9a9a; margin-bottom:6px;
}
.zitat .autor { display:block; font-style:normal; font-size:0.875rem; margin-top:6px; color:#9a9a9a; }

.legal { margin-top:22px; }

/* ── Kalender-Abo ─────────────────────────────────────────────────────────
   Ein Sammelkalender je Klasse statt eines Abos je Fach. */
section.abo { margin-top: 28px; }
.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 {
  /* Die Adresse muss auf dem Handy umbrechen dürfen, sonst schiebt sie die
     ganze Seite in die Breite. */
  word-break: break-all; background: #f4f4f4; padding: 1px 4px; border-radius: 3px;
}

/* ── Handy: Fächertabelle als Blöcke ──────────────────────────────────────
   Drei Spalten nebeneinander sind auf einem Telefon nicht zu halten - der
   Fachname allein ("Französisch Workshop 10 Lek") füllt die Breite schon fast.
   Unterhalb von 620px wird darum jede Zeile ein Block: Fach, darunter die
   Lehrperson, darunter der Link. Nichts wird abgeschnitten, und der Link ist
   ein grosses Ziel statt eines schmalen Streifens am Rand. */
@media (max-width: 620px) {
  table.faecher thead { position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  table.faecher, table.faecher tbody, table.faecher tr, table.faecher td {
    display:block; width:auto;
  }
  table.faecher tr {
    border-bottom:1px solid var(--rule-light); padding:12px 0;
  }
  table.faecher td {
    border-bottom:none; padding:0 0 3px 0;
  }
  table.faecher td.t-fach { font-size:1.0625rem; }
  table.faecher td.t-link { padding-top:4px; }
  table.faecher td.t-link a {
    display:inline-block; padding:6px 0; font-weight:600;
  }
}


/* ===== 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;}
.anst-reiter{display:flex;flex-wrap:wrap;gap:2px;}
.anst-reiter button{background:var(--bg-soft);border:1px solid var(--rule-light);
  border-radius:var(--radius);padding:5px 10px;cursor:pointer;font:inherit;
  font-size:0.9375rem;color:var(--muted);}
.anst-reiter button.aktiv{background:var(--fg);border-color:var(--fg);color:#fff;font-weight:700;}
.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.
   Die FARBEN standen bis zum 21.09.2026 auch hier, mit festen hellen Werten -
   und weil dieses Blatt VOR bmsw_lp-anstehendes.css geladen wird, hing an
   derselben Sache zweierlei Farbe. Jetzt steht die Zuordnung nur noch dort,
   ein Ort fuer eine Bedeutung. Hier bleibt allein die Form. */
.anst-marke{font-weight:700;font-size:0.875rem;letter-spacing:.02em;
  padding:1px 7px;border-radius:var(--radius);white-space:nowrap;}
.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;}
}

/* ---------- Erklaerung fuer die Klasse (22.09.2026) ----------
   Zugeklappt und leise: Sie steht unter allem, weil man sie sucht, wenn man
   etwas nicht versteht - und nicht, wenn man den Fahrplan sehen will. Die
   Form ist die der Karte aus bmsw_lp-base.css (Dreieck ▸ ▾). */
/* Der Fuss zentriert seinen Text - eine Erklaerung mit Aufzaehlung liest sich
   so nicht (gesehen am 22.09.2026: die Punkte standen links, der Text mittig).
   Darum hier linksbuendig, und der Block selbst mittig gesetzt. */
.portal-hilfe { margin: 22px auto 0; max-width: 62ch; text-align: left;
  border-top: 1px solid var(--rule-light); padding-top: 12px; }
.portal-hilfe > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 6px;
  font-weight: 700; color: var(--muted);
}
.portal-hilfe > summary::-webkit-details-marker { display: none; }
.portal-hilfe > summary::before { content: "\25B8"; color: var(--muted); font-weight: 400; }
.portal-hilfe[open] > summary::before { content: "\25BE"; }
.portal-hilfe > summary:hover { color: var(--accent); }
.portal-hilfe-inhalt { padding: 10px 0 4px; text-align: left; }
.portal-hilfe-inhalt p { margin: 0 0 10px; }
.portal-hilfe-inhalt ul { margin: 0 0 10px; padding-left: 1.3em; }
.portal-hilfe-inhalt li { margin-bottom: 3px; }
.portal-hilfe-fuss { color: var(--muted); font-size: 0.875rem; }