/* =====================================================================
   bmsw_lp-base.css — GEMEINSAMES Design aller BMSW-Seiten
   Eingebunden von: bmsw_lp-v20.html
   Eine Änderung hier wirkt auf ALLE Seiten gleichzeitig.

   Beim Aendern die Versionsnummer im <link>-Verweis hochzählen
   (…/bmsw_lp-base.css?v=20 → ?v=21), sonst zeigen Browser die alte Fassung.
   ===================================================================== */

/* ---------- BMSW-Farben und Grundwerte (Corporate Design) ---------- */
:root {
  --fg:#252527;          /* Schrift/Grundfarbe          */
  --muted:#6b6b6b;       /* Sekundaertext               */
  --rule:#252527;        /* kraeftige Trennlinie        */
  --rule-light:#d4d4d4;  /* feine Trennlinie            */
  --accent:#A5282E;      /* Dunkelrot: Links, Aktionen  */
  --marker:#00407C;      /* Dunkelblau: "Aktuell"       */
  --highlight:#E1ECF2;   /* Hellblau: aktuelle Zeile    */
  --frei-bg:#ececee;     /* Hellgrau: unterrichtsfreie Zeile */
  --frei-fg:#5f5f66;     /* Dunkelgrau: Schrift darauf       */
  --bg-soft:#f1f1f1;
  --bg-edit:#fafbff;
  --ok:#16a34a;
  --danger:#dc2626;
  --warn:#f59e0b;
  /* Mini-Syntax-Farben (auch in bmsw_lp-core.js hinterlegt) */
  --ms-rot:#C94646; --ms-gelb:#FFDC2F; --ms-petrol:#00797B; --ms-senf:#D69D00;
  /* EINE Eckenrundung fuer alles: Fenster, Knoepfe, Eingabefelder, Kaesten.
     Vorher standen im Projekt fuenf verschiedene Werte nebeneinander (0, 2, 3,
     4 px und gar keiner) - nicht als Gestaltung, sondern weil jede Regel
     einzeln entstanden ist. Wer hier dreht, dreht ueberall zugleich.
     Ausgenommen bleiben nur echte Kreise (50%) und Knoepfe, die wie ein
     Textlink aussehen sollen. */
  --radius:6px;
}

/* ---------- Grundgeruest ---------- */
* { box-sizing:border-box; }
/* KEINE feste Wurzelgroesse. Alle Schriftgroessen stehen seit dem 12.08.2026
   in rem, und rem bezieht sich auf genau diesen Wert. Bleibt er ungesetzt,
   gilt die Einstellung des Browsers oder des Geraets - wer dort "grosse
   Schrift" waehlt, bekommt sie auf dieser Seite auch. Stuende hier
   "font-size:16px", waere diese Einstellung wirkungslos, und es braeuchte
   einen eigenen Knopf zum Vergroessern.

   Zoom (Strg/Cmd +) wirkt ohnehin und unabhaengig davon - auch im
   Teams-Rahmen. Das ist der Weg fuer "einmal schnell groesser". */
html { max-width:100%; overflow-x:hidden; }
body {
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
  color:var(--fg); background:#fff;
  margin:0; line-height:1.45; font-size:1rem; overflow-x:hidden;
}
/* Seitenbreite/-rand setzt jede Seite selbst (Landingpage 1100px zentriert,
   Klassenportal 850px linksbuendig) — bewusst NICHT hier. */

/* ---------- Kopfbereich (auf allen Seiten gleich) ---------- */
header.page-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; padding-bottom:8px; border-bottom:1px solid var(--rule);
}
header.page-header .brand { display:flex; align-items:center; gap:12px; }
header.page-header img.logo { height:56px; width:auto; display:block; }
header.page-header .titles { text-align:right; }
header.page-header h1 {
  margin:0; font-family:"Arial Black",Arial,sans-serif; font-weight:900;
  font-size:1.25rem; line-height:1.2;
}
header.page-header .teacher { color:var(--muted); font-size:0.9375rem; margin-top:2px; }
.header-rule-bottom { border-bottom:1px solid var(--rule); margin:2px 0 16px; }

/* ---------- Abschnitts-Ueberschriften ---------- */
h2.section-title, section.fixed-info h2 {
  font-family:"Arial Black",Arial,sans-serif; font-weight:900;
  font-size:0.9375rem; margin:0 0 6px; letter-spacing:.02em;
}

/* ---------- Fusszeile / rechtlicher Hinweis ---------- */
footer.page-footer {
  margin-top:24px; padding-top:8px; border-top:1px solid var(--rule-light);
  color:var(--muted); font-size:0.875rem; text-align:center;
}
/* Die Fassung der Seite, ganz am Schluss und blass. Sie beantwortet EINE
   Frage: zeigt dieser Rahmen (Teams, OLAT) schon den neuen Stand? Die Zahl
   wird NICHT von Hand gepflegt - sie stammt aus dem ?v= des Stilblatts, das
   beim Ausrollen ohnehin hochgezaehlt wird. Zwei Stellen zu pflegen hiesse
   eine zu vergessen. */
.seiten-stand { opacity:.55; }
.legal {
  margin-top:24px; padding-top:12px; border-top:1px solid var(--rule-light);
  font-size:0.875rem; color:#9a9a9a; text-align:center;
}
.legal a { color:#9a9a9a; }

/* ---------- Aufzaehlungen ----------
   Beginnt ein Punkt fett, wird auch sein Aufzaehlungszeichen fett gesetzt
   (Klasse kommt aus bmsw_lp-core.js). Ein Stil direkt am <li> erreicht das
   Zeichen nicht, ein fettes <li> wuerde den ganzen Punkt fett machen. */
li.marke-fett::marker { font-weight:bold; }

/* Formularelemente erben die Schriftgroesse NICHT von allein - der Browser
   gibt ihnen eine eigene, kleinere (gemessen: 13.33px, waehrend die Seite auf
   16px steht). Betroffen war alles ohne eigene Regel, unter anderem die
   Dateiauswahl beim Excel-Hochladen und der Anmeldeknopf. Die Schriftart
   bleibt unangetastet: Knoepfe mit .btn setzen sie selbst (Arial Black), und
   eine Klasse schlaegt einen Elementnamen. */
button, input, select, textarea { font-size:inherit; }

/* ---------- Schaltflaechen ---------- */
.btn {
  background:var(--accent); color:#fff; border:none; padding:6px 14px; cursor:pointer;
  font-size:0.875rem; font-family:"Arial Black",Arial,sans-serif; font-weight:900;
  letter-spacing:.04em; text-transform:uppercase; border-radius:var(--radius);
}
.btn:hover { opacity:.9; }
.btn.secondary { background:#fff; color:var(--fg); border:1px solid var(--rule-light); }
.btn.success { background:var(--ok); }
.btn.small { padding:3px 8px; font-size:0.875rem; }

@media (max-width:720px) {
  header.page-header { flex-direction:column; align-items:flex-start; }
  header.page-header .titles { text-align:left; }
}