/* =====================================================================
   bmsw_lp-privat.css - Zugang, Aufgaben, eigene Termine (LP-Startseite)
   Farben aus bmsw_lp-base.css (--accent, --muted, --rule). Eigene Termine im
   Wochenraster tragen Petrol - dieselbe Farbe wie "Hausaufgabe", weil beides
   Arbeit der Lehrperson ist, nicht der Klasse.
   ===================================================================== */
.privat-bereich { margin: 6px 0 22px; font-size: 0.9375rem; }
.privat-hinweis { color: var(--muted, #666); font-size: 0.875rem; margin: 6px 0; }
.privat-fehler  { color: var(--accent, #A5282E); font-weight: bold; margin: 8px 0; }
.privat-ok      { color: #1f7a3a; font-weight: bold; margin: 8px 0; }

.privat-knopf {
  display: inline-block; padding: 5px 12px; border-radius: 4px; border: 0;
  background: var(--accent, #A5282E); color: #fff; font: inherit; font-weight: bold;
  font-size: 0.875rem; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.privat-knopf:hover, .privat-knopf:focus { background: #8d2226; color: #fff; }
.privat-knopf.zweit { background: var(--card); color: var(--accent, #A5282E); border: 1px solid var(--accent, #A5282E); }
.privat-knopf:disabled { opacity: .5; cursor: wait; }

.privat-anmelden, .auf-neu, .ter-neu, .pw-aendern {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 4px 0 10px;
}
.privat-anmelden label, .pw-aendern label { display: flex; flex-direction: column; font-size: 0.8125rem; color: var(--muted, #666); gap: 2px; }
.privat-merken { flex-direction: row !important; align-items: center; gap: 6px !important; font-size: 0.8125rem; }
.privat-bereich input[type=text], .privat-bereich input[type=password],
.privat-bereich input[type=date], .privat-bereich input[type=time], .privat-bereich select {
  font: inherit; font-size: 0.875rem; padding: 4px 6px; border: 1px solid var(--rule-light); border-radius: 4px; background: var(--card);
}
.auf-neu input[name=titel], .ter-neu input[name=titel] { flex: 1 1 240px; min-width: 180px; }

.auf-gruppe { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 2px; color: var(--muted, #666); }
.auf-gruppe span { font-weight: normal; }
.auf-ueberfaellig { color: var(--accent, #A5282E); }
.auf-liste, .ter-liste { list-style: none; margin: 0; padding: 0; }
.auf-zeile, .ter-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  padding: 5px 2px; border-bottom: 1px solid var(--rule, #e4e4e4);
}
.auf-titel, .ter-titel { flex: 1 1 200px; }
.auf-zeile.erledigt .auf-titel { text-decoration: line-through; color: var(--muted, #666); }
.auf-wann, .ter-wann { color: var(--muted, #666); font-size: 0.8125rem; white-space: nowrap; }
.ter-wann { font-weight: bold; color: #005557; min-width: 110px; }
.ter-ort, .ter-serie { color: var(--muted, #666); font-size: 0.8125rem; }
.auf-glocke { font-size: 0.75rem; }
.auf-weg { border: 0; background: none; color: var(--muted, #666); cursor: pointer; font-size: 1rem; padding: 0 4px; }
.auf-weg:hover { color: var(--accent, #A5282E); }
.auf-archiv { margin-top: 10px; }
.auf-archiv summary { cursor: pointer; color: var(--muted, #666); font-size: 0.875rem; }
.privat-pw { margin-top: 10px; }
.privat-pw summary { cursor: pointer; font-weight: bold; }

/* Eigene Termine im Wochenraster */
.woche-termin.eigen { background: color-mix(in srgb, #00797B 14%, var(--card)); border-left-color: #00797B !important; }

@media (max-width: 620px) {
  .auf-neu > *, .ter-neu > * { flex: 1 1 100%; }
  .ter-wann { min-width: 0; }
}

/* Die Abo-Adresse endet ohne Aussenabstand - ohne das klebt der naechste
   Block daran. (Hiess bis 21.09.2026 «Mein Zugang»; den Namen gibt es nicht
   mehr, der Weg ist Menue → Konto & Anpassungen → Konto.) */
.section-title[data-bereich="zugang"] { margin-top: 28px; }
.ter-bis { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--muted, #666); }
@media (max-width: 620px) {
  .ter-strich { display: none; }
  .ter-bis input { flex: 1; }
}
/* Fuer Passwortverwalter lesbar, fuer Menschen unsichtbar - "hidden" uebergehen sie. */
.nur-fuer-verwalter { position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important;
  border: 0 !important; opacity: 0; }

/* ---- Kontobereich im Kopf (15.09.2026) -------------------------------- */
/* Abgemeldet: Aufgaben und Termine samt Ueberschrift ganz weg. */
body.privat-aus [data-bereich="aufgaben"], body.privat-aus #aufgaben,
body.privat-aus [data-bereich="termine"],  body.privat-aus #termine { display: none !important; }

header.page-header .titles { position: relative; }
.konto { position: relative; display: inline-block; margin-bottom: 6px; text-align: left; }
.konto-knopf {
  font: inherit; font-size: 0.8125rem; font-weight: bold; cursor: pointer;
  background: var(--card); color: var(--accent, #A5282E); border: 1px solid var(--accent, #A5282E);
  border-radius: 999px; padding: 3px 12px; display: inline-flex; align-items: center; gap: 6px;
}
.konto-knopf:hover, .konto-knopf[aria-expanded="true"] { background: var(--accent, #A5282E); color: #fff; }
.konto-punkt { width: 8px; height: 8px; border-radius: 50%; background: #1f7a3a; display: inline-block; }
.konto-feld {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: 340px; max-width: calc(100vw - 32px);
  background: var(--card); border: 1px solid #d6d6d6; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.14);
  padding: 12px 14px; font-size: 0.875rem; color: var(--fg);
}
.konto-feld p { margin: 6px 0; }
.konto-titel { font-weight: bold; font-size: 0.9375rem; margin: 0 0 4px !important; }
.konto-feld .privat-anmelden { flex-direction: column; align-items: stretch; }
.konto-feld .privat-anmelden label:first-of-type input { width: 100%; box-sizing: border-box; }
.konto-feld .pw-aendern { flex-direction: column; align-items: stretch; }
.konto-feld input[type=password] { font: inherit; padding: 5px 7px; border: 1px solid var(--rule-light); border-radius: 4px; }
.konto-feld .privat-merken { font-size: 0.8125rem; }
@media (max-width: 620px) {
  .konto-feld { right: auto; left: 0; }
}

/* ---- Kalender abonnieren nach Auswahl (15.09.2026) --------------------- */
.abo-wahl { margin: 8px 0 12px; }
.abo-art { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 8px; font-size: 0.9375rem; }
.abo-art label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.abo-liste { list-style: none; margin: 0 0 10px; padding: 0; border-top: 1px solid var(--rule, #e4e4e4); }
.abo-liste li { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 2px; border-bottom: 1px solid var(--rule, #e4e4e4); font-size: 0.9375rem; }
.abo-liste li label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.abo-liste li.aus label { color: var(--muted, #666); }
.abo-liste input:disabled + * , .abo-liste input:disabled { cursor: not-allowed; }
.abo-gruppen { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.abo-gruppe { font: inherit; font-size: 0.875rem; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule, #d4d4d4); background: var(--card); color: inherit; }
.abo-gruppe.aktiv { background: var(--accent, #A5282E); border-color: var(--accent, #A5282E); color: #fff; font-weight: bold; }
.abo-gruppe.neu { border-style: dashed; color: var(--muted, #666); }
.abo-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; }
.abo-name label { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; }
.abo-name input { font: inherit; padding: 4px 8px; border: 1px solid var(--rule, #d4d4d4); border-radius: 4px; min-width: 0; width: 16em; max-width: 100%; }
.abo-einzel {font-size: 0.8125rem; font-weight: bold; color: var(--accent, #A5282E); white-space: nowrap; }
.abo-mehr { margin: 6px 0 0; }
.abo-mehr summary { cursor: pointer; color: var(--muted, #666); font-size: 0.875rem; }

/* ---- Menue (drei Striche), Konto-Ansicht, Anpassungen (15.09.2026) ----- */
.bereich-block[hidden], #startseite[hidden], .konto-seite[hidden], .menue-liste[hidden] { display: none !important; }
body.privat-aus .bereich-block[data-block="aufgaben"],
body.privat-aus .bereich-block[data-block="termine"] { display: none !important; }

/* Der Knopf sitzt im Raster der Kopfzeile (bmsw_lp-base.css) - rechts
   aussen, ueber beide Textzeilen. Kein margin-bottom mehr: das schob ihn
   gegen den Untertitel. */
.menue { position: relative; display: inline-block; text-align: left; justify-self: end; }
.menue-knopf {
  position: relative; width: 40px; height: 40px; padding: 0; cursor: pointer;
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  background: var(--card); border: 1px solid var(--rule-light); border-radius: 8px;
}
.menue-knopf span { display: block; width: 18px; height: 2px; background: #111; border-radius: 1px; }
.menue-knopf:hover, .menue-knopf[aria-expanded="true"] { background: var(--bg-soft); border-color: var(--rule-light); }
.menue-knopf:focus-visible { outline: 2px solid var(--accent, #A5282E); outline-offset: 2px; }
/* Den Anmeldepunkt gibt es nicht mehr (Marc, 21.09.2026): Wer wissen will, ob
   er angemeldet ist, klickt das Menue auf - dort steht «Angemeldet als …» und
   «Abmelden». Ein farbiger Punkt in der Kopfzeile sagte dasselbe ein zweites
   Mal, ohne dass man etwas damit tun konnte. */
.menue-liste {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 230px;
  background: var(--card); border: 1px solid #d6d6d6; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.14);
  padding: 6px 0;
}
.menue-liste a, .menue-liste button {
  display: block; width: 100%; box-sizing: border-box; padding: 9px 16px; background: none; border: 0;
  font: inherit; font-size: 0.9375rem; color: var(--fg); text-decoration: none; text-align: left; cursor: pointer;
}
.menue-liste a:hover, .menue-liste button:hover, .menue-liste a:focus, .menue-liste button:focus { background: #f4f4f4; }
.menue-wer { margin: 0 0 4px !important; padding: 6px 16px 9px; font-size: 0.8125rem; color: var(--muted, #666);
  border-bottom: 1px solid var(--rule, #e4e4e4); }

.konto-seite { max-width: 680px; margin: 4px 0 32px; }
.konto-zurueck { margin: 0 0 6px; }
.konto-zurueck a { color: var(--accent, #A5282E); font-weight: bold; text-decoration: none; font-size: 0.9375rem; }
.konto-h { font-size: 1.375rem; margin: 4px 0 14px; }
/* Rahmen, Rundung, Abstand und das Dreieck stehen als .karte in
   bmsw_lp-base.css - eine Stelle fuer Konto-Seite UND Editor. */
/* --- Unterreiter der Konto-Seite (Marc, 20.09.2026) -----------------------
   «Konto & Anpassungen» hatte fuenf Karten offen untereinander; die Farben
   der Faecher lagen ganz unten hinter einem zugeklappten Wort und waren
   nicht zu finden. Drei Reiter: Konto - Funktionen - Erscheinung. */
/* Die Reiterform steht in bmsw_lp-base.css - eine Stelle fuer alle drei
   Leisten (21.09.2026). */
/* Zugeklappte Karte: Marc, 20.09.2026 «Liste die aufklappbar ist, nicht alle
   Bloecke automatisch offen». Was im Titel schon steht - der Name, die Zahl
   der Klassen - erspart das Aufklappen ganz. */
/* ZWEI Gesten, klar getrennt (Prueflauf 21.09.2026):
     +/-  = ein ganzer BEREICH der Seite (bmsw_lp-bereiche.js)
     ▸ ▾  = eine KARTE oder Liste darin (jedes <details>)
   Alle <details> sehen darum gleich aus - Konto-Karte wie Logbuch. Wer eine
   dritte Form anfaengt, macht es wieder unuebersichtlich. */
/* --- Reiter «Funktionen» --- */
.fn-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.fn-liste li { padding: 8px 0; border-top: 1px solid var(--rule-light, #efefef); }
.fn-liste li:first-child { border-top: none; }
.fn-liste label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.fn-liste p { margin: 3px 0 0 24px; }
/* Eingerueckt = gehoert zum Eintrag darueber (Marc, 21.09.2026). Der feine
   Strich sagt dasselbe wie im «Anstehendes»: das hier haengt an jenem. */
.fn-liste li[data-unter] { margin-left: 22px; border-left: 1px solid var(--rule-light); padding-left: 12px; border-top: none; }
.fn-liste li[data-unter] + li:not([data-unter]) { border-top: 1px solid var(--rule-light); }
.fn-liste li.aus > label strong { color: var(--muted); font-weight: 400; }
.fn-liste em { font-style: normal; color: var(--muted); }
.fn-liste li.aus > label strong { color: var(--muted, #666); font-weight: 400; }
/* Hell oder dunkel - dieselbe Form wie die Funktionsliste. */
.thema-wahl { list-style: none; margin: 8px 0 0; padding: 0; }
.thema-wahl li { padding: 7px 0; border-top: 1px solid var(--rule-light); }
.thema-wahl li:first-child { border-top: none; }
.thema-wahl label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.thema-wahl p { margin: 3px 0 0 24px; }
.konto-karte .privat-anmelden { flex-direction: column; align-items: flex-start; }
.konto-karte .pw-aendern label, .konto-karte .privat-anmelden label:first-of-type { min-width: 220px; }
.anp-liste { list-style: none; margin: 8px 0 10px; padding: 0; border-top: 1px solid var(--rule, #e4e4e4); }
.anp-liste li { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--rule, #e4e4e4); }
.anp-name { flex: 1; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.9375rem; }
.anp-liste li.aus .anp-name { color: var(--muted, #666); }
.anp-pfeil { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--rule-light); background: var(--card); cursor: pointer; font-size: 1rem; }
.anp-pfeil:hover:not(:disabled) { background: #f2f2f2; }
.anp-pfeil:disabled { opacity: .3; cursor: default; }
@media (max-width: 620px) {
  /* Das Menue haengt am RECHTEN Rand des Knopfes - auf dem Telefon erst
     recht. Hier stand `right:auto; left:0`: die Liste begann damit an der
     linken Kante des Knopfes und lief 230px nach rechts, also aus dem
     Bildschirm hinaus. Gemessen am 22.09.2026 bei 390px Fensterbreite: die
     Liste reichte bis 568px, die Seite liess sich seitlich schieben.
     max-width schuetzt zusaetzlich auf sehr schmalen Geraeten. */
  .menue-liste { right: 0; left: auto; max-width: calc(100vw - 24px); }
}

/* ---- Bearbeiten: Aufgaben (wie Things) und Termine (wie Apple) ---------- */
.ed-karte { border: 1px solid var(--rule-light); border-radius: 10px; background: var(--bg-edit); padding: 12px 14px; margin: 8px 0 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 8px; }
.ed-karte input[type=text], .ed-karte input[type=url], .ed-karte input[type=date], .ed-karte input[type=time],
.ed-karte input[type=number], .ed-karte select, .ed-karte textarea {
  font: inherit; font-size: 0.875rem; padding: 5px 7px; border: 1px solid var(--rule-light); border-radius: 6px; background: var(--card); box-sizing: border-box; }
.ed-karte textarea { width: 100%; resize: vertical; }
/* Titel und Ort zusammen - bei einer Sperrzeit fallen beide weg. */
.ed-was { display: flex; flex-direction: column; gap: 8px; }
.ed-was[hidden] { display: none; }
.ed-karte input[type=number] { width: 64px; }
.ed-titel { font-size: 1rem !important; font-weight: bold; border-color: transparent !important; background: transparent !important; padding-left: 0 !important; }
.ed-titel:focus { border-color: var(--rule-light) !important; background: var(--card) !important; padding-left: 7px !important; }
.ed-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 0.8125rem; color: var(--fg); }
.ed-zeile label { display: inline-flex; align-items: center; gap: 6px; }
.ed-zeile[hidden], .ed-karte [hidden] { display: none !important; }
.ed-schnell { font: inherit; font-size: 0.75rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--rule-light); background: var(--card); cursor: pointer; }
.ed-schnell:hover { background: #f0f0f0; }
.wt { padding: 3px 7px; border: 1px solid #d0d0d0; border-radius: 6px; background: var(--card); cursor: pointer; }
.ed-check { list-style: none; margin: 0; padding: 0; }
.ed-check li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.ed-check li input[type=text] { flex: 1; border-color: transparent; background: transparent; }
.ed-check li input[type=text]:focus { border-color: #c8c8c8; background: var(--card); }
.ed-check-neu { flex: 1; }
.ed-umfang { border: 1px solid var(--rule, #e4e4e4); border-radius: 8px; padding: 6px 10px; font-size: 0.8125rem; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ed-umfang legend { padding: 0 4px; color: var(--muted, #666); }
.ed-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ed-loeschen { margin-left: auto; font: inherit; font-size: 0.8125rem; color: var(--accent, #A5282E); background: none; border: 0; cursor: pointer; text-decoration: underline; }
.auf-zeile .auf-titel { flex: 1 1 200px; text-align: left; background: none; border: 0; padding: 2px 0; font: inherit; color: inherit; cursor: pointer; }
.auf-zeile .auf-titel:hover { text-decoration: underline; }
.auf-offen { list-style: none; }
.auf-mehr { color: var(--muted, #666); font-size: 0.8125rem; }
.auf-liste-tag { font-size: 0.75rem; padding: 1px 7px; border-radius: 999px; background: #eef3f3; color: #005557; }
.auf-frist { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
.auf-frist.knapp { color: var(--accent, #A5282E); font-weight: bold; }
.auf-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.auf-filter-knopf { font: inherit; font-size: 0.8125rem; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--rule-light); background: var(--card); cursor: pointer; }
.auf-filter-knopf.an { background: #005557; border-color: #005557; color: #fff; }
.ter-kopf { margin: 4px 0 8px; }
.ter-tag { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #666); margin: 12px 0 2px; }
button.ter-zeile { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule, #e4e4e4);
  font: inherit; color: inherit; cursor: pointer; }
button.ter-zeile:hover { background: #f6f8f8; }

/* ---- Freie Zeitfenster (15.09.2026) ------------------------------------ */
.zf-seite { max-width: none !important; }
.zf-seite[hidden] { display: none !important; }
.zf-leg { display: inline-block; font-size: 0.75rem; padding: 1px 7px; border-radius: 4px; margin: 2px 2px 0 0; }
.zf-leg.rot, .zf-block.rot { background: color-mix(in srgb, #A5282E 18%, var(--card)); color: var(--m-rot, #6d1a1e); }
.zf-leg.gelb, .zf-block.gelb, .zf-gelb { background: color-mix(in srgb, #D69D00 20%, var(--card)); color: var(--m-gold, #6b5200); }
.zf-leg.gruen, .zf-block.gruen { background: color-mix(in srgb, #2e7d3e 18%, var(--card)); color: var(--ok, #1d5227); }
.zf-leg.grau, .zf-block.grau, .zf-grau { background: var(--bg-soft); color: var(--muted); }
.zf-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 12px; }
.zf-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.zf-chip { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 11px; border-radius: 999px;
  background: #eef3f3; color: #003c3d; font-size: 0.875rem; border: 1px solid #cfe0e0; }
.zf-chip button { border: 0; background: none; font-size: 1.05rem; line-height: 1; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; color: #003c3d; }
.zf-chip button:hover, .zf-chip button:focus-visible { background: #d3e5e5; }
.zf-dazu, .zf-minsel { font: inherit; font-size: 0.875rem; padding: 5px 8px; border: 1px solid var(--rule-light); border-radius: 8px; background: var(--card); }
.zf-dazu { min-width: 240px; }
/* Suche nach Lehrperson oder Klasse (18.09.2026) */
.zf-such-huelle { position: relative; flex: 1 1 260px; max-width: 360px; }
.zf-such { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.875rem; padding: 6px 10px;
  border: 1px solid var(--rule-light); border-radius: 8px; background: var(--card); }
.zf-such:focus { outline: 2px solid #006e6f; outline-offset: 0; }
.zf-vorschlaege { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: 4px 0;
  list-style: none; background: var(--card); border: 1px solid var(--rule-light); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 320px; overflow-y: auto; }
.zf-vorschlaege li { padding: 6px 12px; cursor: pointer; font-size: 0.875rem; display: flex; justify-content: space-between; gap: 8px; }
.zf-vorschlaege li.aktiv, .zf-vorschlaege li:hover { background: #e6f1f1; }
.zf-vorschlaege li.leer { color: var(--muted); cursor: default; background: none; }
.zf-art { color: var(--muted); font-size: 0.75rem; }
.zf-chip.klasse { background: #fff3d6; border-color: #e0c27a; }
.zf-min { font-size: 0.8125rem; color: var(--muted, #666); display: inline-flex; gap: 6px; align-items: center; }
.zf-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0; }
.zf-knopf { font: inherit; font-size: 0.875rem; padding: 4px 10px; border: 1px solid var(--rule-light); border-radius: 8px; background: var(--card); cursor: pointer; margin-left: 4px; }
.zf-knopf:disabled { opacity: .35; cursor: default; }
.zf-raster-huelle { overflow-x: auto; border: 1px solid var(--rule, #e4e4e4); border-radius: 8px; background: var(--card); }
.zf-raster { display: grid; grid-template-columns: 46px repeat(5, minmax(120px, 1fr)); min-width: 660px; }
.zf-zeiten { position: relative; }
.zf-zeiten span { position: absolute; right: 6px; font-size: 0.6875rem; color: var(--muted); transform: translateY(-50%); }
.zf-tag { border-left: 1px solid var(--rule, #e4e4e4); min-width: 0; }
.zf-kopf { height: 26px; line-height: 26px; font-size: 0.8125rem; font-weight: bold; padding: 0 6px; border-bottom: 1px solid var(--rule, #e4e4e4); }
.zf-kopf.heute { color: var(--accent, #A5282E); }
.zf-hinweis { height: 40px; overflow: hidden; padding: 2px 4px; display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; }
.zf-gelb, .zf-grau { font-size: 0.6875rem; line-height: 1.25; padding: 1px 4px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zf-spalte { position: relative; background: repeating-linear-gradient(to bottom, var(--rule-light) 0, var(--rule-light) 1px, transparent 1px, transparent 48px); }
.zf-block { position: absolute; left: 3px; right: 3px; border-radius: 5px; font-size: 0.6875rem; line-height: 1.15; padding: 2px 5px;
  overflow: hidden; box-sizing: border-box; white-space: nowrap; text-overflow: ellipsis; }
.zf-block.rot { border-left: 3px solid #A5282E; }
.zf-block.gruen { border-left: 3px solid #2e7d3e; font-weight: bold; }
.zf-block.gelb { border-left: 3px solid #c79a00; font-weight: bold; }
.zf-block.grau { left: 0; right: 0; border-radius: 0; white-space: normal; }
.zf-block.kurz { opacity: .5; font-weight: normal; }
.zf-liste-titel { font-size: 0.9375rem; margin: 18px 0 6px; }
.zf-liste-titel span { font-weight: normal; color: var(--muted, #666); font-size: 0.8125rem; }
.zf-liste { list-style: none; padding: 0; margin: 0 0 8px; columns: 2 320px; }
.zf-liste li { break-inside: avoid; padding: 5px 9px; border-left: 4px solid #2e7d3e; background: #f3faf4; margin: 0 0 5px; border-radius: 4px; font-size: 0.875rem; }
.zf-liste li.gelb { border-left-color: #c79a00; background: #fdf8e6; }

/* Randstunden: an Unterricht anschliessend - fuer 1 Person etwas, ab 2 ganz dunkel. */
.zf-leg.gruen.rand1, .zf-block.gruen.rand1 { background: color-mix(in srgb, #2e7d3e 34%, var(--card)); color: var(--ok, #10391a); }
.zf-leg.gruen.rand2, .zf-block.gruen.rand2 { background: #2e7d3e; color: #fff; }
.zf-leg.gelb.rand1,  .zf-block.gelb.rand1  { background: color-mix(in srgb, #D69D00 38%, var(--card)); color: var(--m-gold, #4a3900); }
.zf-leg.gelb.rand2,  .zf-block.gelb.rand2  { background: #a67c00; color: #fff; }
.zf-block.rand2 { border-left-color: #0f3d19 !important; }
.zf-block.gelb.rand2 { border-left-color: #5c4500 !important; }
.zf-liste li.gruen.rand1 { background: #cfe9d4; }
.zf-liste li.gruen.rand2 { background: #2e7d3e; color: #fff; border-left-color: #0f3d19; }
.zf-liste li.gelb.rand1 { background: #f7e6ae; }
.zf-liste li.gelb.rand2 { background: #a67c00; color: #fff; border-left-color: #5c4500; }
.ter-regel { display: block; font-size: 0.75rem; color: var(--muted, #666); margin-top: 1px; }
/* Unsicher: nur laut Stundenplan, keine Lektionszeile - grau schraffiert, damit
   es sich von Ferien (flach grau) unterscheidet. */
.zf-leg.unsicher, .zf-block.unsicher {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--fg) 11%, var(--card)) 0 6px,
    color-mix(in srgb, var(--fg) 7%, var(--card)) 6px 12px); color: var(--fg); }
.zf-block.unsicher { border-left: 3px solid #8a8a8a; }

/* ---- Klassenportal: Wichtig, Links, Klassenzugaenge (15.09.2026) -------- */
.wichtig { margin: 8px 0 14px; }
.wichtig[hidden] { display: none !important; }
.wichtig-eintrag { border-left: 5px solid var(--accent, #A5282E); background: #fdf0f0; padding: 10px 14px;
  border-radius: 6px; margin: 0 0 8px; font-size: 1rem; }
.klassen-links { list-style: none; padding: 0; margin: 6px 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.klassen-links a { display: inline-block; padding: 6px 12px; border: 1px solid var(--rule-light); border-radius: 8px;
  text-decoration: none; color: var(--accent, #A5282E); font-weight: bold; background: var(--card); }
.klassen-links a:hover { background: #f6f6f6; }
.kz-liste { list-style: none; padding: 0; margin: 8px 0; }
.kz-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 0; border-bottom: 1px solid var(--rule, #e4e4e4); }
.kz-form { display: inline-flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.kz-pw { font: inherit; font-size: 0.875rem; padding: 4px 7px; border: 1px solid var(--rule-light); border-radius: 6px; width: 160px; }

/* ---- Links der Klasse, gepflegt von der Klassenvertretung (16.09.2026) ---- */
.kl-liste { list-style: none; margin: 6px 0 8px; padding: 0; }
.kl-liste li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 6px; }
.kl-liste input { font: inherit; padding: 4px 8px; border: 1px solid var(--rule, #d4d4d4); border-radius: 4px; min-width: 0; }
.kl-liste .kl-titel { flex: 1 1 10em; }
.kl-liste .kl-url { flex: 2 1 16em; }
.kl-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 0; }
.klassen-links li.kl-link::before { content: none; }

/* ---- Meine Vorlagen: Metadatei je Lehrperson (16.09.2026) --------------- */
.meta-verz { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 6px 0; }
.meta-verz th { text-align: left; font-size: 0.75rem; color: var(--muted, #666); font-weight: normal; padding: 0 4px 2px 0; }
.meta-verz td { padding: 2px 4px 2px 0; }
.meta-verz input { font: inherit; width: 100%; min-width: 0; padding: 3px 6px; border: 1px solid var(--rule, #d4d4d4); border-radius: 4px; }
.meta-verz .privat-knopf { padding: 2px 8px; }
.meta-fix { display: block; font-size: 0.8125rem; color: var(--muted, #666); margin: 8px 0 4px; }
.meta-fix textarea { display: block; width: 100%; font: inherit; font-size: 0.875rem; color: var(--fg); margin-top: 3px;
  padding: 5px 7px; border: 1px solid var(--rule, #d4d4d4); border-radius: 4px; box-sizing: border-box; }
@media (max-width: 620px) {
  .meta-verz, .meta-verz tbody, .meta-verz tr, .meta-verz td { display: block; width: auto; }
  .meta-verz th { display: none; }
  .meta-verz tr { border-bottom: 1px solid var(--rule, #e4e4e4); padding-bottom: 5px; margin-bottom: 5px; }
}

/* Mehrere Belegungen untereinander (18.09.2026): wer genau, nicht nur «2 belegt» */
.zf-block.rot { line-height: 1.2; overflow: hidden; }

/* Startseite ohne eigene Bloecke fuer Aufgaben und Termine (20.09.2026):
   Sie stehen im «Anstehendes». Ueber #aufgaben bzw. #termine kommt der Block
   zum Verwalten zurueck - dort stehen Listen, Wiederholungen und das Archiv. */
/* «Archiv und Serien» (#archiv, frueher #aufgaben und #termine).
   Seit dem 21.09.2026 EINE Ansicht fuer beides: angelegt und bearbeitet wird
   im «Anstehendes», hier steht nur noch, was eine Liste nach vorn nicht
   zeigen kann - die Serien als Regel und das Erledigte. */
body.lp-start [data-block="aufgaben"],
body.lp-start [data-block="termine"] { display: none; }
body.lp-start.verwalten [data-block="aufgaben"],
body.lp-start.verwalten [data-block="termine"] { display: block; }
body.lp-start.verwalten [data-block="anstehendes"],
body.lp-start.verwalten [data-block="woche"],
body.lp-start.verwalten [data-block="faecher"],
body.lp-start.verwalten [data-block="abo"],
body.lp-start.verwalten [data-block="hinweis"],
body.lp-start.verwalten .greeting { display: none; }
/* Kopfzeile der Archivseiten: links zurueck, rechts der Handgriff zum
   Anlegen (22.09.2026). Der Handgriff sitzt hier, weil man beim Nachtragen
   schon auf der Seite ist - der Umweg ueber die Startseite entfiel. */
.archiv-zurueck, .archiv-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 8px;
}
.archiv-kopf .archiv-neu { margin-left: auto; }
.archiv-kopf:empty { display: none; }
.archiv-editor { margin: 0 0 12px; }
.archiv-editor:not([hidden]) {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 12px; background: var(--card);
}
.archiv-leer { color: var(--muted); font-size: 0.875rem; margin: 4px 0 0; }

/* Farben der Faecher in den Anpassungen - eingeklappt (20.09.2026). */
/* Seit 20.09.2026 eine eigene Karte im Reiter «Erscheinung» - vorher
   eingeklappt am Schluss der Anpassungen, wo Marc sie nicht fand. */
.anp-anzeige label { display: inline-flex; align-items: center; gap: 5px; margin-right: 14px; }
.anp-anzeige input[type=range] { width: 120px; vertical-align: -4px; }
.anz-wert { color: var(--muted); font-size: 0.8125rem; }
ul.anz-klassen { list-style: none; margin: 4px 0 0; padding: 0; }
ul.anz-klassen li { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 0.875rem; }
/* Feste Spalte fuer das Kuerzel, sonst faengt jeder Schieber woanders an. */
ul.anz-klassen li { display: block; padding: 8px 0; border-top: 1px solid var(--rule-light); }
ul.anz-klassen li:first-child { border-top: none; }
.anz-kopf { display: flex; align-items: baseline; gap: 10px; }
.anz-kopf strong { min-width: 76px; }
/* Farbwahl je Klasse: die Palette des CD, nichts Fremdes. Das Feld «Fach»
   nimmt die Wahl zurueck - dann gilt wieder die Farbe des Fachs. */
.anz-farben { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 0 0; }
.anz-farbe { width: 22px; height: 22px; padding: 0; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--rule-light); font: inherit; font-size: 0.625rem; }
.anz-farbe.an { outline: 2px solid var(--fg); outline-offset: 1px; }
.anz-keine { width: auto; padding: 0 7px; background: var(--card); color: var(--muted); }
.anz-deckung { display: flex; align-items: center; gap: 6px; margin-top: 5px;
  font-size: 0.75rem; color: var(--muted); }
.anz-deckung input[type=range] { width: 120px; }
.anz-weg { font: inherit; font-size: 0.75rem; border: 0; background: none; color: var(--accent); cursor: pointer; }

/* Das Logbuch klappt wie eine Konto-Karte auf - gleiches Zeichen, gleiche Groesse. */
details.auf-archiv > summary { font-size: 1rem; font-weight: 700; list-style: none;
  display: flex; align-items: baseline; gap: 8px; }
details.auf-archiv > summary::-webkit-details-marker { display: none; }
details.auf-archiv > summary::before { content: "▸"; color: var(--muted); font-weight: 400; }
details.auf-archiv[open] > summary::before { content: "▾"; }

/* ---------- gross: der Platz traegt Inhalt ----------
   Ab 1400 px stehen «Diese Woche» und «Anstehendes» NEBENEINANDER statt
   untereinander (Marc, 21.09.2026). Kein Seitenmenue: die Breite soll Inhalt
   tragen, nicht Bedienung - das Menue ☰ genuegt.

   Die zwei Bloecke landen nur dann in derselben Zeile, wenn sie in der
   Reihenfolge benachbart sind. Wer sie unter «Erscheinung» auseinanderzieht,
   bekommt sie wieder untereinander - das ist dann seine Wahl. */
/* NUR wenn BEIDE Bloecke sichtbar sind. Marc, 21.09.2026: «hilfe... warum
   ploetzlich rechts???» - er hatte «Diese Woche» unter «Funktionen»
   abgewaehlt. Der Block bekommt dann hidden, bleibt aber im Raster stehen:
   «Anstehendes» sass weiter in Spalte 2 und die linke Haelfte blieb leer.
   :has() prueft beides, bevor ueberhaupt ein Raster entsteht. */
@media (min-width: 1400px) {
  body.lp-start:not(.verwalten) #startseite:has(> .bereich-block[data-block="woche"]:not([hidden])):has(> .bereich-block[data-block="anstehendes"]:not([hidden])) {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: start;
  }
  body.lp-start:not(.verwalten) #startseite > * { grid-column: 1 / -1; }
  /* «span 1» statt fester Spalten 1 und 2. Die feste Zuweisung zwang den
     Kalender immer nach links und das «Anstehendes» immer nach rechts - wer
     die Reihenfolge umstellt und «Anstehendes» nach oben zieht, bekam es in
     Zeile 1 rechts, waehrend links nichts stand und der Kalender in Zeile 2
     rutschte (Marc, 21.09.2026, mit Bild: «immer noch ein Problem … aber nur
     dort, wo meine Reihenfolge-Anpassung uebernommen ist»).
     Mit «span 1» nehmen beide die naechste freie Zelle - in DER Reihenfolge,
     die eingestellt ist. Stehen sie nebeneinander, teilen sie sich eine
     Zeile; steht etwas dazwischen, rutscht jeder nach links in seine eigene
     Zeile, und leer bleibt nichts. */
  body.lp-start:not(.verwalten) #startseite > .bereich-block.paar {
    grid-column: span 1;
  }
}