/* Gemeinsames Grundlayout aller Seiten (vorher <style>-Block in templates/base.html – Prüfung 27.10.2026:
   ausgelagert, damit der Browser es cachen kann). Reihenfolge: basis.css → dunkel.css (Überschreibungen). */

:root {
  color-scheme: light dark;            /* Formularfelder, Datumswähler, Bildlaufleisten passend zum Modus */
  --on-orange: #ffffff;                /* Schrift auf Orange (beide Modi) */
  --ok: #2e7d32;
  --warn: #b35c00;
  --err: #c0392b;
  --field: #ffffff;
  --text: #343a40;
  --muted: #646567;
  --line: #dcdad5;
  --header-bg: #3f6b2a;
  --primary: #5a8f2a;
  --primary-hover: #6fa83a;
  --orange: #991111;
  --orange-hover: #7a0d0d;
  --dark: #343a40;
  --bg-hover: #f1f7ea;
  --bg: #f8faf4;
  --card: #ffffff;
  --accent: #3f6b2a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #ececec;
    --muted: #a6a6ad;
    --line: #3a3a40;
    --header-bg: #22361a;
    --primary: #5a8f2a;
    --primary-hover: #6fa83a;
    --orange: #c8402f;
    --orange-hover: #e05a48;
    --dark: #16171a;
    --bg-hover: #1f2a18;
    --bg: #16171a;
    --card: #202125;
    --accent: #9ccc65;
    /* „--dark“ ist in den Seiten die Farbe für Überschriften, Links und Link-Knöpfe → im Dunkelmodus hell */
    --dark: #f1f1f3;
    --ok: #7bd57f;
    --warn: #ffb74d;
    --err: #ff8a7a;
    --field: #2a2b30;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font: 17px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 24px;
  background: var(--header-bg);
  color: #ffffff;
  border-bottom: 3px solid var(--orange);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
@media (max-width: 600px) {
  header { padding: 12px 16px; }
  header .header-logo { height: 34px; }
  main { padding: 18px 14px; }
  .kacheln { grid-template-columns: 1fr; }
}
header a.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #ffffff;
  text-decoration: none;
}
header a.brand:hover {
  opacity: 0.95;
}
header .header-logo {
  height: 42px;
  width: auto;
  display: block;
}
header .badge-tool {
  background: var(--orange);
  color: var(--on-orange);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
header .user-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #d9d9de;
  font-size: 15px;
}
header .btn-logout {
  background: #343a40;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.vorschau-band { background:#fff3cd; color:#5c4500; border-bottom:2px solid #d97706; padding:8px 16px; font-weight:600; }
.vorschau-band button { margin-left:10px; }
header .app-installieren {                 /* Schultool als App (30.10.2026), nur sichtbar, wenn der Browser es anbietet */
  background: var(--orange); color: var(--on-orange); border: 0; border-radius: 4px;
  padding: 6px 12px; font-size: 14px; font-weight: 600; cursor: pointer;
}
header .app-installieren[hidden] { display: none; }
header .btn-logout:hover {
  background: #7A7B7D;
  color: #fffcf7;
}
main {
  max-width: 1140px;
  margin: 0 auto;
  padding: 28px 20px;
}
main.breit { max-width: none; }
h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--dark);
  margin-top: 0;
  margin-bottom: 22px;
}
h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--dark);
  margin-top: 24px;
  margin-bottom: 14px;
}
h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--dark);
}
a { color: var(--dark); text-decoration: underline; }
a:hover { color: var(--orange-hover); }
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.kachel {
  display: block;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--primary);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  transition: all 0.15s ease-in-out;
  box-shadow: 0 1px 3px rgba(52,58,64,0.05);
}
.kachel:hover {
  background: var(--bg-hover);
  border-color: var(--orange-hover);
  border-left-color: var(--orange);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52,58,64,0.1);
}
.kachel strong, .kachel b {
  color: var(--dark);
  font-size: 18px;
  line-height: 1.4;
  display: inline-block;
}
.kachel small {
  color: var(--muted);
  display: block;
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.45;
}
/* Pausenaufsichten in den Plänen der Lehrkräfte (templates/stammdaten/_pausenzeile.html) */
tr.pausenzeile td { padding-top:2px; padding-bottom:2px; background:color-mix(in srgb, var(--orange) 6%, var(--card)); }
tr.pausenzeile td.zeit { font-size:12px; color:var(--muted); }
.aufsicht { border:1px dashed var(--orange-hover); border-radius:6px; padding:1px 6px; margin:1px 0; font-size:12.5px;
            background:color-mix(in srgb, var(--orange) 22%, var(--card)); color:var(--text); }
.aufsicht .min { color:var(--muted); font-size:11.5px; }
.aufsicht.vertreten { text-decoration:line-through; opacity:.7; }
.aufsicht.vertretung { border-style:solid; font-weight:600; }
.aufsicht.bereitschaft { border-style:dotted; background:color-mix(in srgb, var(--orange) 8%, var(--card)); }
/* Unterfenster mit ziehbarer Breite (core/static/core/fenster.js, Container mit data-fenster) */
.fenster-aktiv { position:relative; }
.fenster-aktiv > * { box-sizing:border-box; margin:0 !important; overflow-x:auto; }
.fenster-griff { display:none; }
.fenster-aktiv > * > .fenster-griff { display:block; position:absolute; top:0; right:0; width:10px; height:100%;
  cursor:ew-resize; z-index:3; border-right:3px solid transparent; }
.fenster-aktiv > *:hover > .fenster-griff { border-right-color:var(--line); }
.fenster-aktiv > * > .fenster-griff:hover, body.fenster-ziehen .fenster-griff { border-right-color:var(--orange); }
body.fenster-ziehen { user-select:none; cursor:ew-resize; }
.meldung {
  padding: 12px 16px;
  border-radius: 6px;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 16px;
}
.meldung.success { border-left: 5px solid #3a8a3a; background: #f2f9f2; color: #1e561e; }
.meldung.error { border-left: 5px solid #c0392b; background: #fdf2f2; color: #842017; }
.meldung.warning { border-left: 5px solid var(--orange-hover); background: var(--bg-hover); color: #704800; }
button.link {
  background: none;
  border: 0;
  color: var(--dark);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}
button.link:hover { color: var(--orange-hover); }
.btn, button:not(.link), input[type=submit] {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--primary);
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.btn:hover, button:not(.link):hover, input[type=submit]:hover {
  background: var(--primary-hover);
}
.btn.accent, button.accent {
  background: var(--orange);
  border-color: var(--orange-hover);
  color: var(--on-orange);
  font-weight: 600;
}
.btn.accent:hover, button.accent:hover {
  background: var(--orange-hover);
  color: #ffffff;
}
button.sortier { font: inherit; font-weight: 600; color: inherit; text-decoration: none; padding: 0; background: none;
  border: 0; cursor: pointer; text-align: inherit; }
button.sortier::after { content: " ⇅"; opacity: .35; font-weight: 400; white-space: nowrap; }
th[aria-sort="ascending"] button.sortier::after { content: " ▲"; opacity: 1; }
th[aria-sort="descending"] button.sortier::after { content: " ▼"; opacity: 1; }
@media print { button.sortier::after { content: ""; } }
/* Formularfelder einheitlich (hell und dunkel lesbar) */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=color]),
select, textarea {
  background: var(--field); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px;
  font: inherit; font-size: 15px;
}
input:disabled, select:disabled, textarea:disabled { opacity: .55; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 1px;
}
input[type=checkbox], input[type=radio] { accent-color: var(--orange-hover); }
button:disabled, .btn[aria-disabled=true] { opacity: .5; cursor: not-allowed; }
table { color: inherit; }
th { color: var(--text); }
code, pre, kbd { background: color-mix(in srgb, var(--text) 8%, var(--card)); color: var(--text); border-radius: 3px; }

/* Hinweisband für laufende Hintergrundberechnungen (core/static/core/rechnen.js) */
.rechnen-band{background:#fff8e1;color:#5d4200;border-bottom:1px solid #f0d58a;padding:6px 16px;font-size:14px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.rechnen-band.fertig{background:#e8f5e9;color:#1b5e20;border-color:#a5d6a7}
@media (prefers-color-scheme: dark){.rechnen-band{background:#3a3000;color:#ffe9a8;border-color:#5c4b00}.rechnen-band.fertig{background:#123d1a;color:#c8f0cd}}

/* Tablets: Mehrfachauswahl als Liste zum Anhaken (siehe core/mehrfachauswahl.js) */
select.mf-versteckt { display:none !important; }
.mf-liste { border:1px solid var(--line); border-radius:6px; background:var(--card); overflow-y:auto; min-width:180px;
            padding:2px 0; -webkit-overflow-scrolling:touch; text-align:left; }
.mf-zeile { display:flex !important; flex-direction:row !important; align-items:center; gap:8px; padding:5px 10px;
            font-size:15px; font-weight:normal; margin:0 !important; cursor:pointer; }
.mf-zeile input { width:20px; height:20px; margin:0; flex:none; }
.mf-zeile.mf-aus { color:var(--muted); }
.mf-gruppe { font-size:12px; font-weight:700; color:var(--muted); padding:6px 10px 2px; }

/* ---- Gemeinsame Bausteine (vorher in 43 bzw. 33 Templates identisch definiert) ---- */
.karte { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin-bottom:14px; }
.klein { font-size:12px; color:var(--muted); }
/* Zustandsfarben als Klassen statt Inline-Stile (Prüfung 27.10.2026); Dunkelmodus über die Variablen bzw. dunkel.css */
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.err { color: var(--err); }
.muted { color: var(--muted); }
button.err:not(.link), .btn.err { color: var(--err); }
button.ok:not(.link), .btn.ok { color: var(--ok); }

/* „← Start“ in der Kopfzeile (templates/base.html, Block zurueck – die Startseite lässt ihn leer) */
header .zurueck-start { color: #ffffff; text-decoration: none; opacity: .85; white-space: nowrap; }
header .zurueck-start:hover { opacity: 1; color: var(--orange); }

/* Schmale Bildschirme: breite Tabellen seitlich scrollen statt die Seite zu sprengen.
   Nur Tabellen direkt in <main> (bzw. in einem .tabelle-scroll-Kasten) – verschachtelte Tabellen und
   Tabellen in Formularen/Karten behalten ihr Layout; display:block auf <table> ändert nur das äußere Verhalten,
   die Zeilen/Zellen bleiben Tabellenlayout. */
.tabelle-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) {
  main > table, main > form > table, .tabelle-scroll > table { display: block; overflow-x: auto; max-width: 100%; }
}

/* Ladeanzeige bei langen Aktionen (core/static/core/aktionen.js, Attribut data-warte="Text") */
.warte-hinweis { display: inline-block; margin-left: 8px; color: var(--muted); font-size: 14px; }
.warte-hinweis::after { content: " …"; }

/* Suche im Kopf (30.10.2026): Kacheln, Lehrkräfte, Klassen, Räume */
header form.kopf-suche { position: relative; flex: 1 1 240px; max-width: 420px; margin: 0 16px; }
header form.kopf-suche input[type=search] { width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; font-size: 14px; }
header form.kopf-suche input[type=search]::placeholder { color: rgba(255,255,255,.75); }
header form.kopf-suche input[type=search]:focus { background: #fff; color: #16171a; outline: none; }
.kopf-suche-liste { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; background: var(--card, #fff);
  border: 1px solid var(--line, #ddd); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); overflow: hidden; }
.kopf-suche-liste a { display: block; padding: 7px 10px; color: var(--text, #16171a); text-decoration: none; border-bottom: 1px solid var(--line, #eee); }
.kopf-suche-liste a small { display: block; color: var(--muted, #666); font-size: 12px; }
.kopf-suche-liste a:hover, .kopf-suche-liste a.aktiv { background: color-mix(in srgb, var(--accent, #0a6) 12%, transparent); }
.kopf-suche-liste a.alle { font-size: 13px; color: var(--accent, #0a6); }
@media (max-width: 700px) { header form.kopf-suche { order: 3; flex-basis: 100%; max-width: none; margin: 8px 0 0; } }
/* Seitenfuß: Datenschutzinformation (§§ 15/16 KDG), 1.11.2026 */
footer.fuss { max-width: 1400px; margin: 24px auto 12px; padding: 8px 16px; font-size: 13px; color: var(--muted, #666); text-align: center; }
footer.fuss a { color: inherit; }
.hilfe-content table { border-collapse: collapse; } .hilfe-content td, .hilfe-content th { border: 1px solid var(--line, #ddd); padding: 4px 8px; vertical-align: top; }