/* =====================================================================
   Hausaufgabenbetreuung ASV – Design-System

   AUFBAU (bitte beim Ändern einhalten, sonst entsteht wieder Doppelarbeit):

     1. Ein Satz Werte  → :root, unten „Liquid Glass"
     2. Ein Satz Bausteine (.card .btn .badge Eingabefelder Tabellen),
        die AUSSCHLIESSLICH mit var(--…) arbeiten, nie mit festen Farben
     3. Abweichungen ausschließlich als eigener WERTE-Satz, nie als zweite
        Kopie der Bausteine

   Warum das so streng steht: Es gab kurzzeitig eine zweite Fassung von
   .card, .btn und den Eingabefeldern eigens für die Verwaltung. Damit
   hätte jede spätere Änderung an einem Knopf an zwei Stellen gemacht
   werden müssen, und die zweite wird irgendwann vergessen. Jetzt gibt es
   jeden Baustein genau einmal.

   DER KIOSK IST DIE EINE AUSNAHME, und zwar eine unbedenkliche:
   Er benutzt keinen einzigen dieser Bausteine. Seine Oberfläche hat eine
   eigene Sprache (.tile, .k-search, .wahl-btn, .btn-kiosk …) und eine
   eigene Datei, kiosk.css. Gemeinsam sind nur Anordnungs-Helfer wie .row
   und .between, die gar keine Farbe tragen. Der Kiosk ist deshalb kein
   zweiter Anstrich derselben Bausteine, sondern ein eigenes Gerät mit
   eigenem Zweck: dunkel, aus Entfernung lesbar, damit die bunten Kacheln
   der Kinder leuchten. Nachgemessen am 28.08.2026: null gemeinsame
   Bausteine mit Farbe.

   Wer hier etwas ändert, prüft bitte: Ist es eine FARBE oder ein MASS?
   Dann gehört es zu den Werten. Ist es ein neues Aussehen für einen
   vorhandenen Baustein? Dann wird der Baustein geändert, nicht kopiert.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. WERTE — „Liquid Glass"
   Vorgabe aus Tills KI-Gedächtnis, Datei „80 Designsprache (Web)".
   Gilt für Verwaltung, Eltern, Lehrkraft, Lernbegleitung und die
   Anmeldeseite. Der Kiosk setzt weiter unten eigene Werte.
   --------------------------------------------------------------------- */
:root {
  /* Markenfarben der Schule. Nur noch für Gedrucktes und das Logo;
     in der Oberfläche wird mit den Systemfarben gearbeitet, sonst
     stehen zwei Blautöne nebeneinander und keiner wirkt. */
  --asv-blau:  #0C76B4;
  --asv-rot:   #9C0F06;
  --asv-teal:  #1A8573;

  /* Apple-Neutraltöne */
  --ink-faint:  #8e8e93;
  --text:       #1d1d1f;
  --muted:      #56565c;

  --accent:     #0a7cff;   /* Systemblau, Hauptaktion */
  --accent-dark:#0060d1;   /* dunkler, für Text auf hellem Grund */
  --accent-ink: #ffffff;   /* Schrift AUF dem blauen Knopf */
  /* Heller Verlaufspunkt der Auslastungs-Balken. Steht bewusst nur hier:
     Der Wert war in beiden Fassungen derselbe, hell wie dunkel, und war
     vorher auf zwei Seiten fest eingetippt. */
  --balken-oben:#5aa9ff;

  /* Apples Buntfarben. Sparsam: Kennzeichen, zweite Datenreihe,
     Zustände. Nie großflächig. */
  --mint:       #00b58c;
  --orange:     #ff9500;
  --violet:     #af52de;

  --bg-grad-1:  #f7f9fd;
  --bg-grad-2:  #eef2f9;
  --surface:    #ffffff;
  --surface-2:  #f4f6fb;
  --border:     rgba(29, 29, 31, 0.10);
  /* Eigens für Eingabefelder, kräftiger als --border: Auf manchen
     Windows-Bildschirmen (Chrome) verschwand der normale Rahmen auf der
     milchigen Kartenfläche fast ganz (Till, 22.09.2026). */
  --border-feld: rgba(29, 29, 31, 0.35);

  --radius:     20px;
  --radius-sm:  12px;
  --shadow:     0 10px 30px rgba(29, 29, 31, 0.07),
                0 2px 8px rgba(29, 29, 31, 0.04);

  /* Zustände: Fläche in Apples Farbe, Schrift abgedunkelt.
     Apples Grün (#34c759) erreicht als Text auf Weiß nur rund 2,2:1
     Kontrast. Die oberste Regel der Designsprache lautet „Lesbarkeit
     schlägt Effekt", deshalb hier dunklere Textfassungen. */
  --ok:      #0f8a43;
  --ok-bg:   rgba(52, 199, 89, 0.15);
  --warn:    #b8500c;
  --warn-bg: rgba(255, 149, 0, 0.16);
  --info:    #0060d1;

  /* Glasflächen und Füllungen. ALLE als Werte, damit der Dunkelmodus
     weiter unten nur diesen Satz austauschen muss und kein einziger
     Baustein angefasst werden braucht. */
  --glas:          linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
  --glas-leiste:   linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.48));
  --glas-rand:     1px solid rgba(255, 255, 255, .72);
  --glas-blur:     blur(22px) saturate(1.6);
  --glas-schatten: 0 14px 40px rgba(29, 29, 31, .08),
                   inset 0 1px 0 rgba(255, 255, 255, .9);   /* Lichtkante oben */
  /* Deckende Notfassung: wenn backdrop-filter fehlt und auf schmalen
     Geräten, wo das Glas beim Scrollen zu teuer wird. */
  --glas-deckend:  rgba(255, 255, 255, .94);
  --flaeche:       rgba(255, 255, 255, .82);   /* Knöpfe */
  --flaeche-feld:  rgba(255, 255, 255, .78);   /* Eingabefelder */
  --flaeche-hover: rgba(255, 255, 255, .70);
  --flaeche-klebend: rgba(255, 255, 255, .96); /* stehende erste Spalte */
  --blob-deckung:  .5;                          /* Farbflächen im Grund */

  --font:      -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-kopf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
               Roboto, sans-serif;
}

/* ---------------------------------------------------------------------
   2. WERTE — dunkel
   Greift, wenn das Betriebssystem auf Dunkel steht. Kein Schalter nötig:
   Wer sein Handy abends dunkel stellt, will es überall dunkel.

   Das ist AUSSCHLIESSLICH ein zweiter Werte-Satz. Kein einziger Baustein
   wird hier angefasst, deshalb entsteht keine Doppelpflege.

   Wichtig: Glas lässt sich nicht einfach umkehren. Auf Hell entsteht die
   Fläche aus milchigem Weiß mit einer hellen Kante oben. Auf Dunkel wäre
   dieselbe Kante ein greller Strich. Deshalb hier eigene, deutlich
   zurückhaltendere Werte statt umgedrehter.

   Die Farbflächen im Grund werden ebenfalls gedämpft (--blob-deckung),
   sonst leuchten sie auf dunklem Grund unangenehm. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink-faint:  rgba(235, 235, 245, .40);
    --text:       #f2f2f7;
    --muted:      rgba(235, 235, 245, .64);

    /* Apples helleres Systemblau für dunkle Oberflächen. Das Blau von
       Hell wäre hier zu dunkel und läge zu nah am Grund. */
    --accent:     #0a84ff;
    --accent-dark:#409cff;
    --accent-ink: #ffffff;

    --mint:       #63e6be;
    --orange:     #ffb340;
    --violet:     #da8fff;

    --bg-grad-1:  #191c24;
    --bg-grad-2:  #101219;
    --surface:    #1c1f27;
    --surface-2:  #23262f;
    --border:     rgba(255, 255, 255, 0.12);
    --border-feld: rgba(255, 255, 255, 0.28);

    /* Zustände: auf dunklem Grund brauchen sie HELLE Schrift. Die
       abgedunkelten Fassungen von oben wären hier unlesbar. */
    --ok:      #4cd97b;
    --ok-bg:   rgba(48, 209, 88, 0.18);
    --warn:    #ffa53d;
    --warn-bg: rgba(255, 159, 10, 0.18);
    --info:    #6cc4ff;

    --glas:          linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.055));
    --glas-leiste:   linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.04));
    --glas-rand:     1px solid rgba(255, 255, 255, .11);
    --glas-schatten: 0 14px 40px rgba(0, 0, 0, .45),
                     inset 0 1px 0 rgba(255, 255, 255, .07);  /* Kante nur angedeutet */
    --glas-deckend:  #1c1f27;
    --flaeche:       rgba(255, 255, 255, .09);
    --flaeche-feld:  rgba(255, 255, 255, .06);
    --flaeche-hover: rgba(255, 255, 255, .11);
    --flaeche-klebend: #1c1f27;
    --blob-deckung:  .30;
  }

  /* Das Schullogo ist dunkel gezeichnet und verschwände sonst. */
  body:not(.kiosk) .schul-logo { filter: brightness(0) invert(1); opacity: .55; }
}

/* Die Werte des Kiosks stehen weiter unten bei seiner Oberfläche,
   Abschnitt „KIOSK (iPad)". Dort steht alles zum Kiosk beieinander. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--text);
  /* Ruhender Farbverlauf. Die vier Flächen stehen fest; bewegt wird
     nichts. Eine sich bewegende Fläche ist Spielerei und hat in einer
     Arbeitsoberfläche nichts zu suchen, erst recht nicht auf einer
     Seite, die jemand stundenlang ansieht. Einzige Ausnahme sind die
     Elternseiten, siehe .lg-bewegt weiter unten. */
  background:
    /* Blau und Grün etwas schwächer (Till, 22.09.2026: Hintergrund wirkte
       zu bunt), Lila und Orange unverändert. */
    radial-gradient(900px 640px at 8% -10%,  rgba(125, 184, 255, .20), transparent 62%),
    radial-gradient(820px 660px at 106% 2%,  rgba(138, 240, 211, .16), transparent 60%),
    radial-gradient(880px 760px at 78% 106%, rgba(217, 179, 245, .26), transparent 62%),
    radial-gradient(720px 620px at -4% 98%,  rgba(255, 217, 161, .24), transparent 64%),
    linear-gradient(160deg, var(--bg-grad-1), var(--bg-grad-2));
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, .leiste-marke strong { font-family: var(--font-kopf); letter-spacing: -.02em; }
a { color: inherit; }
/* Navigation und Aktionen sind Flächen, keine Fließtext-Links — die
   Unterstreichung ließ die Kopfzeile wie eine Linkliste aussehen. */
.chip, .btn, .kiosk-foot a { text-decoration: none; }
h1, h2, h3 { margin: 0 0 .3em; line-height: 1.15; }
h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.02em; }

/* ---------- Layout-Helfer ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 22px clamp(14px, 3vw, 28px) 60px; }
.grid { display: grid; gap: 18px; align-items: stretch; }
.grid > .card { display: flex; flex-direction: column; }
.row  { display: flex; gap: 14px; flex-wrap: wrap; }
.between { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
/* In Karten soll der Status rechts BLEIBEN statt unter den Titel zu rutschen. */
.card > .between { flex-wrap: nowrap; align-items: flex-start; }
.card > .between > :first-child { min-width: 0; }
.card > .between > .badge { flex: none; }
.spacer { flex: 1 1 auto; }
.muted { color: var(--muted); }
.center { text-align: center; }
.hidden { display: none !important; }

/* Zweispaltiges Layout (Inhalt + Seitenleiste), das auf Tablet/Handy
   sauber untereinander klappt – statt die Tabelle zu quetschen. */
.cols-main { display: grid; gap: 18px; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start; }
@media (max-width: 1000px) { .cols-main { grid-template-columns: 1fr; } }

/* ---------- Karten / Glas ---------- */
.card {
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  border: var(--glas-rand);
  border-radius: var(--radius);
  box-shadow: var(--glas-schatten);
  padding: 20px;
}

/* Pflicht-Rückfall, nicht Kür: Ohne backdrop-filter wäre die Fläche
   durchsichtig statt milchig und der Text darauf unlesbar. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .card { background: var(--glas-deckend); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: 11px 22px; border-radius: 999px;   /* voll rund, nie eckig */
  min-height: 38px;                            /* sicher zu treffen */
  border: 1px solid var(--border);
  background: var(--flaeche); color: var(--text);
  cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s ease, box-shadow .2s ease, background .2s;
}
.btn:hover { box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); }
/* Der farbige Schatten unter dem Hauptknopf lässt ihn schweben. */
.btn-primary {
  background: linear-gradient(180deg, #2b90ff, var(--accent));
  border-color: transparent; color: var(--accent-ink);
  box-shadow: 0 6px 16px rgba(10, 124, 255, .35);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #1f86ff, var(--accent-dark));
  box-shadow: 0 8px 22px rgba(10, 124, 255, .42);
}
.btn-ghost { background: transparent; border-color: transparent; }
.btn-lg { padding: 15px 28px; font-size: 1.05rem; }
.btn-block { width: 100%; }
/* Kleiner Knopf, etwa in Tabellenzellen. 30px waren zu wenig: Die
   Designsprache verlangt mindestens 36px, damit man auf dem Handy sicher
   trifft. Schmal darf er sein, flach nicht.
   Stand bis 08.09.2026 zweimal in dieser Datei, mit widersprüchlichen
   Werten; wirksam war jeweils die zweite. Die Werte hier sind genau die,
   die dabei herauskamen. */
.btn-klein { padding: 4px 10px; min-height: 36px; font-size: .8rem; border-radius: 9px; }
/* Knopf, der nur ein Symbol trägt: quadratisch halten, sonst wird die
   runde Form zur Ellipse. */
.btn-symbol { padding: 0; width: 34px; height: 34px; min-height: 34px; }

/* ---------- Formulare ---------- */
label { font-weight: 600; font-size: .92rem; display: block; margin: 0 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=time],
input[type=date], input[type=number], select, textarea {
  width: 100%; font: inherit; color: var(--text);
  /* Nie unter 16px: darunter zoomt iOS beim Antippen in die Seite. */
  font-size: max(1rem, 16px);
  background: var(--flaeche-feld); border: 1.5px solid var(--border-feld);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; border-color: var(--accent); }
textarea { min-height: 90px; resize: vertical; }

/* ---------- Badges / Chips ---------- */
.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:.82rem; font-weight:600; }
.badge-ok   { background: var(--ok-bg);  color: var(--ok); }
.badge-warn { background: var(--warn-bg);color: var(--warn); }
.badge-info { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info); }
.badge-accent{ background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.chip {
  display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px;
  border:1px solid var(--border); background: var(--surface); cursor:pointer; font-weight:600; font-size:.92rem;
}
.chip.active { background: var(--accent); color:#fff; border-color: var(--accent); }

/* ---------- Avatare ---------- */
.avatar { display:block; border-radius: 26%; }

/* ---------- Flash-Meldungen ---------- */
.flash { padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; font-weight: 600; }
.flash-ok   { background: var(--ok-bg);   color: var(--ok); }
.flash-warn { background: var(--warn-bg); color: var(--warn); }
.flash-info { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }

/* =====================================================================
   KIOSK (iPad) – immersive, kindgerechte, dunkle Glas-Oberfläche

   Der einzige dunkle Bereich. Absichtlich: Der Bildschirm hängt im Raum
   und wird aus Entfernung gelesen, die bunten Kacheln der Kinder
   brauchen den dunklen Grund, um zu leuchten.

   Das ist KEINE zweite Fassung der übrigen Bausteine, sondern eine
   eigene Oberfläche mit eigener Sprache (.tile, .k-search, .wahl-btn,
   .btn-kiosk …) und einer eigenen Datei, kiosk.css. Der Kiosk benutzt
   weder .card noch .btn noch .badge. Gemeinsam sind nur Helfer wie .row
   und .between, die gar keine Farbe tragen. Deshalb entsteht hier keine
   Doppelpflege: Wer oben einen Knopf ändert, muss hier nichts nachziehen.
   ===================================================================== */
body.kiosk {
  /* Eigener Werte-Satz. Nur was wirklich abweicht. */
  --text:      #f4f7fb;
  --muted:     #9aa6b8;
  --surface:   rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.04);
  --border:    rgba(255, 255, 255, 0.12);
  --accent:    #7C5CFF;
  --ok:        #34c759;

  background:
    radial-gradient(1100px 780px at 6% -10%, rgba(156,15,6,0.34), transparent 56%),
    radial-gradient(1050px 820px at 106% -4%, rgba(12,118,180,0.36), transparent 56%),
    radial-gradient(1150px 950px at 50% 122%, rgba(26,133,115,0.32), transparent 56%),
    radial-gradient(760px 640px at 88% 60%, rgba(124,92,255,0.20), transparent 60%),
    linear-gradient(160deg, #0b0f16, #090c12);
  background-size: 160% 160%;
  color: #f4f7fb;
  min-height: 100vh;
  animation: kioskDrift 34s ease-in-out infinite alternate;
}
@keyframes kioskDrift {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 90% 60%, 0 0; }
  100% { background-position: 8% 6%, 92% 8%, 46% 92%, 82% 52%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.kiosk { animation: none; }
}
.kiosk .k-wrap { max-width: 1500px; margin: 0 auto; padding: clamp(20px, 4vw, 48px); padding-bottom: 90px; }
.kiosk h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; }
.kiosk .sub { color: #aeb8c9; font-size: clamp(1rem, 1.6vw, 1.25rem); margin-top: 4px; }

.k-search {
  display:flex; align-items:center; gap:14px; justify-content:center;
  background:#fff; color:#1c2030; border:none; border-radius:999px;
  padding: 20px 30px; font-size: 1.35rem; font-weight: 700; width: min(680px, 92%);
  margin: 6px auto 8px; box-shadow: 0 18px 50px rgba(0,0,0,0.35); cursor: pointer;
}
.k-search svg { opacity:.7; }


.k-section-title { display:flex; align-items:center; gap:10px; color:#c7d0de; font-weight:700; font-size:1.15rem; margin: 26px 0 14px; }

.tiles { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.tile {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px; padding: 18px 14px; text-align:center;
  cursor: pointer; transition: transform .12s ease, background .2s, border-color .2s;
  display:flex; flex-direction:column; align-items:center; gap:10px; position:relative;
}
.tile:hover { transform: translateY(-3px); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); }
.tile:active { transform: scale(0.97); }
.tile .avatar { width: 74px; height: 74px; box-shadow: 0 8px 22px rgba(0,0,0,0.35); }
.tile .name { font-weight: 700; font-size: 1.08rem; }
.tile .klasse { color:#9aa6b8; font-size:.9rem; }
.tile .check { position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%; background: var(--ok); color:#fff; display:grid; place-items:center; font-size:.85rem; box-shadow:0 4px 10px rgba(0,0,0,.3); }
.tile.spontan-badge::after { content:"spontan"; position:absolute; top:10px; left:10px; font-size:.68rem; background:rgba(124,92,255,.25); color:#c9beff; padding:2px 8px; border-radius:999px; }

.k-here {
  margin-top: 30px; border: 1px dashed rgba(26,133,115,0.5); border-radius: 22px; padding: 18px;
  background: rgba(26,133,115,0.06);
}
.k-here .k-here-title { color:#57d9bd; font-weight:800; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.tiles.here .tile { background: rgba(124,92,255,0.10); border-color: rgba(124,92,255,0.28); }
.tiles.here .avatar { width: 58px; height: 58px; }
.tile .time { color:#9aa6b8; font-size:.82rem; }

/* Kiosk-Fußzeile mit dezenten Rollen-Logins */
.kiosk-foot { position: fixed; bottom: 14px; right: 16px; display:flex; gap:10px; z-index:20; }
.kiosk-foot a { font-size:.8rem; color:#8b95a7; text-decoration:none; background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); padding:7px 12px; border-radius:10px; }
.kiosk-foot a:hover { color:#dfe5ef; background: rgba(255,255,255,0.1); }

.brand-mini { display:flex; align-items:center; gap:12px; }
.brand-mini img { width:48px; height:48px; border-radius:12px; }

/* Logo der Ahnatal-Schule Vellmar: klein und dezent, nie dominant.
   Die PNG-Fassung ist freigestellt (transparent) – deshalb braucht es
   keinen weißen Kasten mehr. Auf dunklem Grund würde der schwarze
   Schriftzug untergehen, dort erscheint es als helle Silhouette. */
/* Kürzel-Felder: Eingabe groß schreiben, Platzhalter aber normal lassen
   (sonst steht dort „Z. B. MUSJ" statt „z. B. MUSJ"). */
.kuerzel-eingabe { text-transform:uppercase; }
.kuerzel-eingabe::placeholder { text-transform:none; }

.schul-logo { height:24px; width:auto; flex:none; opacity:.75; }
.schul-logo--auf-dunkel { filter:brightness(0) invert(1); opacity:.5; }
/* Früher wurde das Logo bei dunkel eingestelltem Betriebssystem
   automatisch weiß eingefärbt. Das ist weg: Die Oberfläche ist jetzt
   überall hell, dort wäre ein weißes Logo unsichtbar. Der Kiosk ist der
   einzige dunkle Bereich und kennzeichnet sein Logo selbst mit
   .schul-logo--auf-dunkel. */

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
  .tile .avatar { width: 60px; height: 60px; }
  .kiosk-foot { position: static; justify-content:center; margin-top: 30px; }
}

/* =====================================================================
   Gemeinsame Komponenten (zentral statt je Seite dupliziert)
   ===================================================================== */
/* Listen-Tabellen */
.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:10px 10px; border-bottom:1px solid var(--border); }
.tbl td { padding:12px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:none; }
.zeile-fehlt { background: var(--warn-bg); }
/* Abschnitts-Überschriften (in Karten) */
.seiten-titel, .seiten-titel-a, .seiten-titel-k {
  font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:0 0 14px; font-weight:700;
}
/* auf schmalen Handys weniger wichtige Tabellenspalten ausblenden */
@media (max-width: 560px) { .hide-phone { display:none; } }

/* ---------- Kopfzeile: Navigation vs. eigene Anmeldung ----------
   Vorher standen Seitenlinks, der eigene Name und „Abmelden" als gleich
   aussehende Pillen nebeneinander — man sah nicht, was wohin führt.
   Jetzt trennt ein feiner Strich die Navigation von der Person. */
.kopf-trenner {
  width: 1px; height: 24px; background: var(--border);
  margin: 0 2px; flex: none;
}
.kopf-person {
  font-weight: 700; font-size: .92rem; color: var(--muted);
  white-space: nowrap;
}
.chip-still { background: transparent; border-color: transparent; color: var(--muted); }
.chip-still:hover { background: var(--surface-2); color: var(--text); }


/* ---------- Tages-Navigation (Lernbegleitung) ---------- */
.tag-navi {
  display:inline-flex; align-items:center; gap:2px;
  border:1px solid var(--border); background:var(--surface);
  border-radius:999px; padding:3px;
}
.tag-pfeil {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:999px;
  font-size:1.25rem; line-height:1; font-weight:700; color:var(--muted);
  text-decoration:none;
}
.tag-pfeil:hover { background:var(--surface-2); color:var(--text); }
.tag-pfeil.aus { opacity:.28; pointer-events:none; }
.tag-datum { padding:0 10px; font-weight:700; font-size:.94rem; white-space:nowrap; }

/* Sortierbare Tabellenköpfe */
.sortier-kopf { text-decoration:none; color:inherit; display:inline-flex; align-items:center; gap:4px; }
.sortier-kopf:hover { color:var(--accent); }

/* ---------- „Als App speichern"-Anleitung (Eltern) ----------
   Bewusst gezeichnet statt Screenshots: Bildschirmfotos veralten mit jeder
   iOS-Version und müssten für jede Gerätesprache neu gemacht werden. */
.app-anleitung h2 { font-size: 1.15rem; margin-top: 0; }
.app-anleitung > .muted { font-size: .93rem; margin-top: 0; }
.anleitung-schritte {
  display: grid; gap: 14px; margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.anleitung-schritt {
  text-align: center; padding: 18px 14px 16px;
  background: var(--surface-2); border-radius: var(--radius);
}
.anleitung-schritt strong { display: block; margin-top: 8px; }
.anleitung-schritt .muted { font-size: .86rem; margin: 6px 0 0; line-height: 1.45; }
.a-telefon { width: 108px; height: 162px; display: block; margin: 0 auto; }
.anleitung-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-top: 12px;
  border-radius: 999px; background: var(--asv-teal); color: #fff;
  font-weight: 800; font-size: .86rem;
}
/* Bauteile der gezeichneten Telefone */
.a-geraet      { fill: none; stroke: var(--border); stroke-width: 3; }
.a-fuell       { fill: color-mix(in srgb, var(--asv-teal) 22%, transparent); }
.a-fuell-hell  { fill: color-mix(in srgb, var(--muted) 22%, transparent); }
.a-linie-fuell { fill: var(--asv-teal); }
.a-linie       { fill: none; stroke: var(--asv-teal); stroke-width: 2.4;
                 stroke-linecap: round; stroke-linejoin: round; }
.a-kreis       { fill: none; stroke: var(--asv-teal); stroke-width: 2.4; }
.a-rahmen-aktiv{ fill: none; stroke: var(--asv-teal); stroke-width: 2.4; rx: 8; }
.a-app         { fill: var(--asv-teal); }
.anleitung-android {
  margin: 16px 0 0; padding: 12px 14px; font-size: .9rem;
  background: color-mix(in srgb, var(--asv-teal) 9%, transparent);
  border-radius: var(--radius-sm);
}
@media (max-width: 520px) {
  .anleitung-schritte { grid-template-columns: 1fr; }
  .anleitung-schritt { display: grid; grid-template-columns: 78px 1fr;
                       gap: 4px 14px; text-align: left; align-items: center; }
  .a-telefon { width: 78px; height: 117px; grid-row: span 3; }
  .anleitung-nr { margin-top: 0; }
}

/* ---------- Wochentags-Auswahl (Eltern-Anmeldung, Tage ändern, Verwaltung) ----------
   Lag vorher nur im Anmeldeformular; wird jetzt an drei Stellen gebraucht. */
.tag-zeile { border:1px solid var(--border); border-radius:14px; padding:12px 14px; margin-bottom:10px; transition:border-color .2s, background .2s; }
.tag-zeile.aktiv { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 5%, transparent); }
.tag-kopf { display:flex; align-items:center; gap:10px; font-weight:700; cursor:pointer; }
.tag-kopf input { width:22px; height:22px; }
/* Drei Angaben je Tag: Art, Fach, abweichende Gehzeit. auto-fit statt
   fester Spaltenzahl — am Telefon untereinander, am Rechner nebeneinander. */
.tag-optionen { margin-top:12px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.tag-optionen.hidden { display:none; }
@media (max-width:520px){ .tag-optionen { grid-template-columns:1fr; } }
/* Kompakte Fassung für Tabellen in der Verwaltung */
.tage-klein .tag-zeile { padding:8px 10px; margin-bottom:6px; border-radius:10px; }
.tage-klein .tag-kopf { font-size:.92rem; }
.tage-klein .tag-kopf input { width:18px; height:18px; }
.tage-klein .tag-optionen { margin-top:8px; gap:6px; }

/* =====================================================================
   Verwaltung: Seitenleiste
   Zehn Seiten in einer Kopfzeilen-Reihe waren nicht wiederzufinden — alle
   Knöpfe sahen gleich aus und die Reihe brach je nach Fensterbreite
   anders um. Die Leiste bleibt stehen, gliedert nach Anlass und zeigt
   durchgehend, wo man gerade ist.
   ===================================================================== */
.hat-leiste { --leiste-breite: 250px; }
.leiste-huelle { display: flex; min-height: 100vh; min-height: 100dvh; }

.leiste {
  width: var(--leiste-breite);
  flex: none;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 14px 16px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.leiste-marke {
  display: flex; align-items: center; gap: 11px;
  padding: 4px 8px 18px; text-decoration: none; color: var(--text);
}
.leiste-marke img { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.leiste-marke span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.leiste-marke small { font-size: .8rem; }

.leiste-nav { display: flex; flex-direction: column; gap: 2px; }
.leiste-gruppe {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  padding: 18px 12px 6px;
}
.leiste-punkt {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 11px;
  color: var(--text); text-decoration: none; font-weight: 500;
  transition: background .15s, color .15s;
}
.leiste-punkt:hover { background: var(--surface-2); }
/* Die aktive Seite bewusst kräftig: Auf einem Beamer oder einem blassen
   Monitor verschwindet eine zarte Tönung, ein dunkles Feld nie. */
.leiste-punkt.aktiv { background: var(--text); color: var(--surface); }
.leiste-punkt.aktiv:hover { background: var(--text); }
.leiste-symbol { width: 20px; text-align: center; flex: none; font-size: .95rem; }
.leiste-logo { margin: auto 12px 4px; align-self: flex-start; }

.leiste-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.inhalt-kopf {
  display: flex; align-items: center; gap: 14px;
  padding: 20px clamp(16px, 3vw, 34px) 12px;
}
.inhalt-kopf h1 {
  margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); line-height: 1.15;
  overflow-wrap: anywhere;
}
.inhalt-kopf small { display: block; margin-top: 2px; }
.inhalt-flaeche { padding: 8px clamp(16px, 3vw, 34px) 40px; }
.inhalt-fuss { padding: 0 clamp(16px, 3vw, 34px) 26px; font-size: .85rem; }

/* Menü-Knopf nur am Telefon; am Rechner steht die Leiste ohnehin da. */
.leiste-knopf, .leiste-schliessen { display: none; }

@media (max-width: 860px) {
  .leiste-huelle { display: block; }
  .leiste {
    position: fixed; z-index: 60; top: 0; left: 0;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--shadow);
    background: var(--surface);
  }
  .leiste-schalter:checked ~ .leiste-huelle .leiste { transform: none; }
  .leiste-schalter:checked ~ .leiste-huelle .leiste-schliessen {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(10, 14, 22, .45);
  }
  .leiste-knopf {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: none; border-radius: 11px;
    background: var(--surface); border: 1px solid var(--border);
    font-size: 1.15rem; cursor: pointer;
  }
  .inhalt-kopf { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------
   Kennzahlen-Reihe (Übersicht)
   --------------------------------------------------------------------- */
.kennzahlen {
  display: grid; gap: 12px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.kennzahl {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; color: var(--text);
}
a.kennzahl:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.kennzahl-wert { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.kennzahl-titel { font-size: .85rem; color: var(--muted); font-weight: 600; }
.kennzahl.ist-offen .kennzahl-wert { color: var(--warn); }

/* Aufgabenliste auf der Übersicht */
.aufgabe {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.aufgabe:last-child { border-bottom: 0; }
.aufgabe-text { flex: 1; min-width: 200px; }
/* Das Auswahlfeld soll nicht die ganze Restbreite fressen — sonst rutscht
   der Knopf in eine eigene Zeile und die Zeile sieht kaputt aus. */
.aufgabe select { flex: 0 1 250px; max-width: 250px; }

/* „Anmeldung zuordnen": Klassenfeld, Kindfeld und Knopf in einer Zeile,
   darunter das Aufklapp-Feld für ein Kind, das noch nicht in der Schulliste
   steht. Eigener Block statt eines weiteren Elements in der Aufgaben-Zeile:
   das Aufklapp-Feld gehört unter die ganze Zeile, nicht neben den Knopf.
   Reine Anordnung, keine Farbe: die Bausteine bleiben unangetastet. */
.aufgabe-zuordnen { flex: 1 1 340px; min-width: 0; }
.aufgabe-zuordnen .row { gap: 8px; }
/* Das Klassenfeld trägt nur „Klasse 5a" und braucht keine 250 Pixel. */
.aufgabe-zuordnen .kind-klasse-filter { flex: 0 1 150px; max-width: 150px; }
/* Auch hier ein eigener Block statt eines Anhängsels der Auswahlzeile:
   12px ist der Rhythmus der Aufgaben-Zeile selbst, enger soll auf der
   Seite nichts stehen. */
.aufgabe-zuordnen .kind-neu { margin-top: 12px; }

/* Zwei ungleiche Spalten (breites Diagramm + schmale Liste). Als Inline-Stil
   ließ sich das am Telefon nicht aufheben — Inline schlägt jede Klasse. */
.grid-breit-schmal {
  grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
  align-items: start;
}
@media (max-width: 760px) {
  .grid-breit-schmal { grid-template-columns: 1fr; }
}

/* =====================================================================
   Auslastungs-Balken
   Übersicht (5 Tage), Statistiken (8 Wochen) und die Wochenansicht
   (5 Tage) zeichnen dieselben Balken. Der Satz stand vorher zweimal im
   Code, mit unterschiedlichen Werten, und wäre mit der dritten Seite ein
   drittes Mal dazugekommen.
   Die Unterschiede sind WERTE, keine zweite Fassung des Bausteins:
   Wer acht Spalten hat statt fünf, setzt `.viele` dazu.
   ===================================================================== */
.balken-reihe {
  --balken-hoehe: 104px;
  --balken-luft:  14px;
  --balken-tag:   .85rem;
  --balken-zahl:  1.05rem;
  display: flex; gap: var(--balken-luft); align-items: flex-end; padding-top: 6px;
}
/* Acht Wochen statt fünf Tagen: enger, höher, kleinere Schrift. Nur Werte. */
.balken-reihe.viele {
  --balken-hoehe: 130px;
  --balken-luft:  10px;
  --balken-tag:   .78rem;
  --balken-zahl:  .9rem;
}
.balken-spalte { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.balken-spur {
  height: var(--balken-hoehe);
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--surface-2); border-radius: 12px; padding: 4px;
}
.balken {
  width: 100%; border-radius: 8px; transition: height .3s;
  background: linear-gradient(180deg, var(--balken-oben), var(--accent));
}
.balken-tag  { font-size: var(--balken-tag); color: var(--muted); font-weight: 600; }
.balken-zahl { font-size: var(--balken-zahl); }
/* Der heutige Tag wird hervorgehoben statt mit einem Punkt markiert. */
.ist-heute .balken-spur { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.ist-heute .balken-tag  { color: var(--accent); }

/* Eine Woche zum Anklicken: Die Spalte ist ein Link, sieht aber aus wie
   eine Spalte. Nur der Zeiger und die Tönung verraten, dass es geht. */
a.balken-spalte { text-decoration: none; color: inherit; border-radius: 12px; }
a.balken-spalte:hover .balken-spur,
a.balken-spalte:focus-visible .balken-spur {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
}
a.balken-spalte:hover .balken-tag { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .balken { transition: none; } }

/* Vorschlag des Systems in der Aufgabenliste — abgesetzt, damit auf einen
   Blick klar ist, was das System vermutet und was die Eltern getippt haben. */
.vorschlag {
  display: inline-block; margin-top: 4px; font-size: .9rem;
  color: var(--accent);
}

/* Adresse zum Weitergeben (persönlicher Eltern-Link, App-Link) */
.kopier-block { margin-top: 10px; }
.kopier-zeile { display: flex; gap: 8px; align-items: stretch; }
.kopier-zeile input {
  flex: 1; min-width: 0; margin: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem;
}
.kopier-zeile .btn { flex: none; white-space: nowrap; }
.kopier-zeile .btn.kopiert { border-color: var(--ok); color: var(--ok); }

/* „Kind nicht dabei?" — aufklappbare Eingabe unter dem Auswahlfeld */
.kind-neu { margin-top: 10px; border: 1px dashed var(--border); border-radius: 12px; padding: 10px 12px; }
.kind-neu > summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--accent); }
.kind-neu[open] { border-style: solid; background: var(--surface-2); }
.kind-neu-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }

/* Langer Text in einer Liste, auf wenige Zeilen gekürzt (Verhalten in
   app.js). Die Zeilenzahl ist ein Wert: Wer mehr oder weniger sehen will,
   ändert --kurz-zeilen, nicht die Regel. Der Punkt am Ende („…") entsteht
   von selbst durch line-clamp. */
.kurztext { --kurz-zeilen: 2; }
.kurztext.gekuerzt { cursor: pointer; }
.kurztext.gekuerzt:not(.offen) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--kurz-zeilen);
  line-clamp: var(--kurz-zeilen);
  overflow: hidden;
}
.kurztext.gekuerzt:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px; border-radius: 4px;
}

/* =====================================================================
   Trainingsraum (Lehrkraft-Karte und Bereich der Aufsicht)
   Nur Anordnung und vorhandene Werte, keine neue Farbe.
   ===================================================================== */
/* Aufklapp-Pfeil, auch für die Listen der Jahresliste-Vorschau (.jl-liste) */
.tr-karte > .tr-karte-kopf, .jl-liste > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.tr-karte > .tr-karte-kopf::-webkit-details-marker, .jl-liste > summary::-webkit-details-marker { display: none; }
.tr-karte > .tr-karte-kopf::before, .jl-liste > summary::before {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform .15s;
}
.tr-karte[open] > .tr-karte-kopf::before, .jl-liste[open] > summary::before { transform: rotate(45deg); }
.tr-abschnitt { margin: 18px 0 8px; font-size: .95rem; }
.tr-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-unterwahl { margin-top: 10px; display: grid; gap: 10px; }
/* Vorgabe der Lehrkraft, nicht mehr veränderbar (Till, 22.09.2026). */
.tr-wahl-fest {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 999px; background: var(--surface-2);
  font-size: .92rem;
}

.tr-ueberschrift { font-size: 1.05rem; margin: 0 0 10px; }
.tr-fall { margin-bottom: 14px; }
.tr-name { font-size: 1.1rem; }
.tr-details { margin-top: 10px; display: grid; gap: 4px; font-size: .95rem; }
.tr-schritt { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.tr-nicht-da { margin-top: 10px; }
.tr-nicht-da > summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.tr-erledigt { padding: 8px 0; border-bottom: 1px solid var(--border); }
.tr-erledigt:last-child { border-bottom: 0; }
.tr-verlauf { padding: 12px 0; border-bottom: 1px solid var(--border); }
.tr-verlauf:last-child { border-bottom: 0; }
.tr-rueckmeldung { margin-top: 6px; font-size: .92rem; background: var(--surface-2); border-radius: 10px; padding: 6px 10px;
  /* Zeilenumbrüche aus den Rückmeldungen stehen lassen. */
  white-space: pre-line; }
/* Lernbegleitung: wann das Kind nach der Nacharbeit gehen darf (gut sichtbar) */
/* Kleiner Hinweis unter einer Überschrift: welcher Schritt kommt als
   Nächstes (Ablaufplan). Bewusst unauffällig, er soll nicht mitlesen
   lassen, sondern nur erinnern. */
/* Zweite, weniger betonte Option neben einem chip (z.B. "benötigt einen
   Auftrag von der Aufsicht im TR" neben "Ich gebe den Arbeitsauftrag",
   Till 22.09.2026). */
.chip-klein { padding: 6px 12px; font-size: .82rem; font-weight: 500; color: var(--muted); }
.tr-schrittfolge {
  margin: -6px 0 12px;
  font-size: .86rem;
  color: var(--muted);
}
.tr-lernoase-frei {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 6px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--info) 12%, transparent); font-size: .82rem;
}
.tr-lernoase-frei .muted { font-size: .78rem; }
.tr-lernoase-frei { color: var(--text); text-decoration: none; }
a.tr-lernoase-frei:hover { background: color-mix(in srgb, var(--info) 22%, transparent); }
a.tr-lernoase-frei strong { color: var(--info); }
.tr-gehen { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-weight: 700; }

/* Verstöße wie auf dem Laufzettel: zwei Kästchen-Spalten, dann der Grund.
   Kästchen groß genug für den Finger (44px Zeilenhöhe). */
.verstoss-block { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.verstoss-kopf, .verstoss-zeile {
  display: grid; grid-template-columns: 44px 44px 1fr; align-items: center;
  border-bottom: 1px solid var(--border);
}
.verstoss-kopf { font-size: .78rem; font-weight: 700; color: var(--muted); background: var(--surface-2); min-height: 32px; }
.verstoss-spalte { text-align: center; }
.verstoss-zeile { min-height: 44px; }
.verstoss-zeile:last-of-type { border-bottom: 0; }
.verstoss-kreuz { display: flex; align-items: center; justify-content: center; height: 100%; margin: 0; cursor: pointer; }
.verstoss-kreuz input { width: 20px; height: 20px; margin: 0; }
.verstoss-text { padding: 8px 10px 8px 4px; }
/* input.… schlägt die allgemeine Regel input[type=text] (100 % breit), sonst ragt das Feld mit Rand über die Zelle. */
input.verstoss-frei { margin: 6px 8px 6px 4px; width: calc(100% - 12px); min-width: 0; }
.verstoss-legende { font-size: .8rem; margin: 0; padding: 8px 10px; border-top: 1px solid var(--border); }
.verstoss-fehlt { border-color: var(--warn); }
.verstoss-meldung { margin: 0; padding: 8px 10px; color: var(--warn); background: var(--warn-bg); font-weight: 600; }

/* Jahresliste: Vorschau vor dem Übernehmen (admin/import.php, admin/adressen.php) */
.jl-punkte { margin: 8px 0 0; padding-left: 20px; font-size: .9rem; }
.jl-punkte li + li { margin-top: 4px; }
.jl-liste { margin-top: 12px; }
.jl-liste > summary { font-weight: 600; min-height: 36px; }
.jl-verdacht { padding: 14px 0; border-bottom: 1px solid var(--border); }
.jl-verdacht:last-of-type { border-bottom: 0; }
/* Ankreuzen mit längerem Text: Kästchen oben bündig, Text bricht daneben um */
.bestaetigen { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; font-weight: 600; }
.bestaetigen input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; }

/* Trainingsraum-Stundenplan (Einstellungen): schmale Kürzel-Felder, damit
   fünf Tage nebeneinander passen. Die Tabelle scrollt am Telefon im Kasten. */
.tr-plan td { padding: 6px; vertical-align: top; }
.tr-plan input[type=text] { min-width: 72px; text-transform: uppercase; }
.tr-plan-zeit { display: grid; gap: 4px; margin-top: 4px; }
.tr-plan-zeit input { min-width: 104px; }

/* Anzeige „Stand …" + Aktualisieren-Knopf (siehe app.js) */
.auto-akt {
  position: fixed; right: 12px; bottom: 12px; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 8px 6px 14px;
  box-shadow: var(--shadow); font-size: .82rem; color: var(--muted);
}
@media print { .auto-akt { display: none; } }

/* =====================================================================
   Was NUR die Verwaltung betrifft

   Hier steht ausschließlich, was es in den anderen Bereichen gar nicht
   gibt: die Seitenleiste. Die Bausteine (.card .btn .badge Eingabefelder)
   stehen weiter oben und gelten überall gleich. Bitte hier keine zweite
   Fassung davon anlegen, siehe Hinweis am Dateianfang.
   ===================================================================== */

body.hat-leiste .leiste {
  background: var(--glas-leiste);
  -webkit-backdrop-filter: blur(26px) saturate(1.7);
  backdrop-filter: blur(26px) saturate(1.7);
  border-right: var(--glas-rand);
  box-shadow: inset -1px 0 0 rgba(29, 29, 31, .04);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  body.hat-leiste .leiste { background: var(--glas-deckend); }
}

body.hat-leiste .inhalt-kopf h1 { font-weight: 750; letter-spacing: -.03em; }

body.hat-leiste .leiste-punkt { border-radius: 999px; padding: 9px 14px; }
body.hat-leiste .leiste-punkt:hover { background: var(--flaeche-hover); }
body.hat-leiste .leiste-punkt.aktiv {
  background: linear-gradient(180deg, #2b90ff, var(--accent));
  color: #fff;
  box-shadow: 0 6px 16px rgba(10, 124, 255, .30);
}
body.hat-leiste .leiste-punkt.aktiv:hover {
  background: linear-gradient(180deg, #1f86ff, var(--accent-dark));
}
body.hat-leiste .leiste-marke img { border-radius: 12px; }
body.hat-leiste .leiste-gruppe { color: var(--ink-faint); }

/* Kennzahlen-Kacheln gibt es nur in der Übersicht der Verwaltung. */
body.hat-leiste .kennzahl {
  border-radius: var(--radius);
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  border: var(--glas-rand);
  box-shadow: 0 10px 26px rgba(29, 29, 31, .07);
}

/* =====================================================================
   Symbole (SVG)
   Gilt überall. Die Zeichnungen selbst stehen in helpers.php,
   Funktion symbol(). Sie erben über currentColor die Schriftfarbe und
   zeichnen dadurch auf dem blauen aktiven Menüpunkt automatisch weiß.
   ===================================================================== */
.leiste-symbol,
.symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.leiste-symbol { width: 20px; height: 20px; }
.leiste-symbol svg, .symbol svg {
  width: 100%; height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.symbol { width: 1.05em; height: 1.05em; }
/* Trägt ein Bedienelement NUR ein Symbol und keinen Text, muss das
   Symbol größer sein: 16px sind auf Tabletbreite nicht zu erkennen. */
.btn > .symbol:only-child,
.btn-symbol .symbol,
.btn-mini > .symbol:only-child { width: 20px; height: 20px; }

/* Gesichter der Bewertungsskala etwas größer, sie sind das
   Bedienelement und müssen sicher zu treffen sein. */
.skala-gesicht { width: 1.7em; height: 1.7em; }
.skala-legende .symbol { width: 1.15em; height: 1.15em; vertical-align: -.2em; }

/* =====================================================================
   Breite Tabellen
   Sie scrollen in einem eigenen Kasten, nie die ganze Seite. Kein
   overflow-x: hidden am Seitenkörper: das würde einen echten Überlauf
   nur verstecken statt ihn zu lösen.
   ===================================================================== */
.tabelle-scroll {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  -webkit-overflow-scrolling: touch;
}
/* Dass eine Tabelle seitlich weitergeht, sieht man sonst nicht. Der
   Hinweis erscheint nur, wo er gebraucht wird: auf schmalen Geräten. */
.tabelle-scroll::before {
  content: "Tabelle lässt sich seitlich schieben";
  display: none;
  padding: 0 0 8px;
  font-size: .8rem;
  color: var(--muted);
}
@media (max-width: 860px) {
  .tabelle-scroll::before { display: block; }
  /* Beim Seitwärtsschieben soll erkennbar bleiben, in welcher Zeile
     man ist. Deshalb bleibt die erste Spalte stehen. */
  .tabelle-scroll th:first-child,
  .tabelle-scroll td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--flaeche-klebend);
  }
}

/* =====================================================================
   Farbflächen im Hintergrund (nur Eltern)
   Vier weichgezeichnete Kreise über dem ruhenden Seitengrund. Sie
   bewegen sich langsam und geben den Elternseiten das lebendige
   Farbspiel der Designsprache.

   BEWUSST NUR DORT. In Verwaltung, Lehrkraft- und Lernbegleiter-Ansicht
   wird gearbeitet; eine Fläche, die sich von allein bewegt, lenkt dort
   nur ab. Der ruhende Verlauf am Seitenkörper genügt.
   ===================================================================== */
.lg-bg {
  position: fixed;
  inset: 0;
  /* Hinter allen Inhalt, aber vor den Seitengrund. Ohne das negative
     z-index läge die Fläche als positioniertes Element ÜBER dem nicht
     positionierten Inhalt und würde Lehrkraft- und Lernbegleiter-Ansicht
     überdecken. */
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.lg-bg span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  opacity: var(--blob-deckung);
  will-change: transform;
}
.lg-bg span:nth-child(1) {
  width: 46vw; height: 46vw; min-width: 420px; min-height: 420px;
  left: -12vw; top: -16vh;
  background: radial-gradient(circle at 30% 30%, #7db8ff, rgba(125, 184, 255, 0) 70%);
}
.lg-bg span:nth-child(2) {
  width: 38vw; height: 38vw; min-width: 340px; min-height: 340px;
  right: -10vw; top: 4vh;
  background: radial-gradient(circle at 60% 40%, #8af0d3, rgba(138, 240, 211, 0) 70%);
}
.lg-bg span:nth-child(3) {
  width: 34vw; height: 34vw; min-width: 300px; min-height: 300px;
  left: 22vw; bottom: -16vh;
  background: radial-gradient(circle at 40% 60%, #d9b3f5, rgba(217, 179, 245, 0) 70%);
}
.lg-bg span:nth-child(4) {
  width: 30vw; height: 30vw; min-width: 260px; min-height: 260px;
  right: 6vw; bottom: -12vh;
  background: radial-gradient(circle at 50% 50%, #ffd9a1, rgba(255, 217, 161, 0) 70%);
}

/* Bewegung ist eine eigene Entscheidung und muss angefordert werden.
   Sehr langsam, gegenläufig, nur transform (alles andere ruckelt). */
.lg-bewegt .lg-bg span:nth-child(1) { animation: lg-drift-1 28s ease-in-out infinite alternate; }
.lg-bewegt .lg-bg span:nth-child(2) { animation: lg-drift-2 32s ease-in-out infinite alternate; }
.lg-bewegt .lg-bg span:nth-child(3) { animation: lg-drift-3 30s ease-in-out infinite alternate; }
.lg-bewegt .lg-bg span:nth-child(4) { animation: lg-drift-4 26s ease-in-out infinite alternate; }
@keyframes lg-drift-1 { to { transform: translate(9vw, 7vh)  scale(1.08); } }
@keyframes lg-drift-2 { to { transform: translate(-7vw, 9vh) scale(1.06); } }
@keyframes lg-drift-3 { to { transform: translate(6vw, -8vh) scale(1.10); } }
@keyframes lg-drift-4 { to { transform: translate(-5vw, -6vh) scale(1.07); } }

/* Wer im Betriebssystem „Bewegung reduzieren" eingestellt hat, bekommt
   eine ruhige Seite. Barrierefreiheits-Anforderung, keine Feinheit. */
@media (prefers-reduced-motion: reduce) {
  .lg-bewegt .lg-bg span { animation: none !important; }
  .btn:active { transform: none; }
}

/* =====================================================================
   Feinheiten, die überall gelten
   ===================================================================== */

@media print {
  .lg-bg { display: none; }
  .card, body.hat-leiste .leiste { background: #fff; box-shadow: none; }
}

/* Auf schmalen Geräten weniger Weichzeichnung, das kostet sonst
   spürbar Leistung.

   Die Karten verlieren dort den Glaseffekt ganz. Grund: Die
   Anmeldungs-Tabelle wird über 6000 Pixel hoch, und ein
   backdrop-filter über eine solche Fläche muss beim Scrollen ständig
   neu gezeichnet werden. Das erzeugte sichtbare Zeichenfehler.
   Lesbarkeit und ruhiges Scrollen gehen dem Effekt vor. */
@media (max-width: 860px) {
  .lg-bg span { filter: blur(54px); }
  body:not(.kiosk) .card,
  body.hat-leiste .kennzahl {
    background: var(--glas-deckend);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.hat-leiste .leiste { background: var(--flaeche-klebend); }

  /* Kopfzeile der Verwaltung kompakt: „Abmelden" gehört neben die
     Überschrift, nicht in eine eigene Zeile. */
  body.hat-leiste .inhalt-kopf { flex-wrap: nowrap; padding-bottom: 8px; gap: 10px; }
  body.hat-leiste .inhalt-kopf .spacer { flex: 0 1 auto; }
  body.hat-leiste .inhalt-kopf h1 { font-size: 1.4rem; }
  body.hat-leiste .kopf-person { font-size: .85rem; }
  body.hat-leiste .leiste-knopf { width: 40px; height: 40px; border-radius: 999px; }
  body.hat-leiste .leiste-knopf .symbol { width: 20px; height: 20px; }
}
@media (max-width: 420px) {
  body.hat-leiste .kopf-person { display: none; }
}

/* Kopfzeile ohne Seitenleiste (Lehrkraft, Lernbegleitung).
   Auf dem Telefon belegten Name, „Abmelden" und Logo eine eigene zweite
   Zeile und nahmen damit ein Viertel des Bildschirms weg, bevor der
   erste Inhalt kam. Jetzt schrumpft der Kopf: kleineres Symbol, engere
   Schrift, und ganz schmal treten Logo und Name zurück. */
@media (max-width: 560px) {
  .app-head .wrap { padding-top: 12px !important; padding-bottom: 12px !important; }
  .brand-mini img { width: 38px; height: 38px; border-radius: 10px; }
  .brand-mini strong { font-size: .98rem; }
  .brand-mini small { font-size: .78rem; }
  .app-head nav { gap: 8px; }
}
@media (max-width: 430px) {
  .app-head .schul-logo,
  .app-head .kopf-trenner { display: none; }
  .app-head .kopf-person { font-size: .82rem; }
}


/* Reiter der Einstellungen. Fünf Bereiche statt einer sehr langen Seite
   (Till, 21.09.2026). Am Handy scrollt die Leiste waagerecht. */
.einst-reiter {
  display: flex; gap: 6px; overflow-x: auto; padding: 4px;
  margin-bottom: 6px; border-radius: 14px; background: var(--flaeche-feld);
  scrollbar-width: none;
}
.einst-reiter::-webkit-scrollbar { display: none; }
.einst-reiter-knopf {
  flex: none; padding: 8px 14px; border-radius: 10px;
  font-size: .9rem; font-weight: 600; color: var(--muted); text-decoration: none;
  white-space: nowrap;
}
.einst-reiter-knopf:hover { color: var(--text); background: var(--flaeche-hover); }
.einst-reiter-knopf.an { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.einst-bereich-text { margin: 0 0 16px; font-size: .88rem; }

/* Technik-Übersicht und Schuljahres-Liste: eine Zeile je Punkt, am Handy
   untereinander (Till, 21.09.2026). */
.tech-liste, .jahres-liste { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.tech-zeile, .jahres-schritt {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.tech-zeile:last-child, .jahres-schritt:last-child { border-bottom: 0; }
.tech-text, .jahres-text { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tech-befund { font-size: .9rem; }
.tech-rat { font-size: .85rem; color: var(--muted); }
.jahres-text .muted { font-size: .87rem; }
.jahres-haken {
  flex: none; width: 26px; height: 26px; margin-top: 2px; padding: 0;
  border: 2px solid var(--border); border-radius: 8px; background: var(--flaeche);
  color: var(--ok); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.jahres-haken:hover { border-color: var(--accent); }
.jahres-haken[aria-pressed="true"] { border-color: var(--ok); background: var(--ok-bg); }
.jahres-schritt.erledigt .jahres-text strong { color: var(--muted); text-decoration: line-through; }

/* Kleine Tagesübersicht bei „Kind in den Trainingsraum schicken": zeigt auf
   einen Blick, welche Stunde besetzt ist, ohne den Vordergrund zu belegen
   (Till, 22.09.2026). Steht neben dem einleitenden Text, am Handy darunter. */
.tr-schicken-kopf { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.tr-schicken-text { flex: 1 1 260px; min-width: 0; }
.tr-tagesplan {
  flex: 0 0 auto; align-self: flex-start; margin-top: 12px;
  border-collapse: collapse; font-size: .78rem; min-width: 118px;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.tr-tagesplan caption {
  caption-side: top; padding: 6px 10px; font-weight: 700; text-align: left;
  background: var(--flaeche-feld); color: var(--muted);
  font-size: .72rem; letter-spacing: .02em;
}
.tr-tagesplan th, .tr-tagesplan td { padding: 4px 10px; text-align: left; font-weight: 400; }
.tr-tagesplan th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.tr-tagesplan tr + tr th, .tr-tagesplan tr + tr td { border-top: 1px solid var(--border); }
.tr-tp-besetzt td { color: var(--ok); }
.tr-tp-frei { background: var(--warn-bg); }
.tr-tp-frei td { color: var(--warn); font-style: italic; }
.tr-tp-jetzt th { position: relative; }
.tr-tp-jetzt th::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px;
  border-radius: 2px; background: var(--accent);
}
.tr-tp-jetzt th, .tr-tp-jetzt td { padding-left: 12px; }
@media (max-width: 480px) {
  .tr-tagesplan { width: 100%; }
}

/* Etwas größer, seit die Aufzählung „Heute nicht besetzt: …" daneben
   weggefallen ist (Till, 23.09.2026): mehr Platz, mehr Ruhe zum Lesen. */
.tr-tagesplan-gross {
  font-size: .92rem; min-width: 168px;
}
.tr-tagesplan-gross caption { padding: 9px 14px; font-size: .82rem; }
.tr-tagesplan-gross th, .tr-tagesplan-gross td { padding: 8px 14px; }
.tr-tagesplan-gross .tr-tp-jetzt th, .tr-tagesplan-gross .tr-tp-jetzt td { padding-left: 18px; }

/* ---------------------------------------------------------------------
   Plan der Betreuungsangebote (Lehrkraft-Ansicht + Pflege in der Verwaltung)
   Farben der sechs Gruppen: Punkt und Streifen. Die Zeilen des Wochenplans
   werden nur ganz zart getönt, damit das Raster im Vordergrund bleibt.
   Die Tage lassen sich ohne JavaScript umschalten (Optionsfelder + :checked),
   JavaScript merkt sich nur, ob die Karte zu war.
   --------------------------------------------------------------------- */
:root {
  --g-lernhilfe:#8ea9db; --g-nacharbeit:#2f5fb3; --g-nachhilfe:#f0a800;
  --g-lernzeit:#e2bb3f;  --g-bewegung:#7cc242;   --g-spiel:#0a9d4a;
  --raster: color-mix(in srgb, var(--text) 24%, transparent);
}
.bp-kopf { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; cursor:pointer; list-style:none; }
.bp-kopf::-webkit-details-marker { display:none; }
.bp-kopf h3 { margin:0; display:flex; align-items:center; gap:8px; }
.bp-kopf h3::before {
  content:""; width:8px; height:8px; flex:none; margin-right:2px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(-45deg); transition:transform .15s;
}
.bp-karte[open] > .bp-kopf h3::before { transform:rotate(45deg); }
.bp-kopf:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:8px; }
.bp-stand { font-size:.8rem; }

.bp-radio { position:absolute; opacity:0; pointer-events:none; }
.bp-tage { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0 10px; }
.bp-tage label.chip { position:relative; cursor:pointer; }
.bp-tage label.chip.heute::after {
  content:""; position:absolute; top:5px; right:6px; width:6px; height:6px;
  border-radius:99px; background:var(--accent);
}
.bp-radio:focus-visible ~ .bp-tage label { outline:2px solid var(--accent); outline-offset:2px; }
.bp-tag { display:none; }
#bp-t0:checked ~ .bp-t0 { display:block; }
#bp-t0:checked ~ .bp-tage label[for=bp-t0] { background:var(--accent); color:#fff; border-color:var(--accent); }
#bp-t0:checked ~ .bp-tage label[for=bp-t0].heute::after { background:#fff; }
#bp-t1:checked ~ .bp-t1 { display:block; }
#bp-t1:checked ~ .bp-tage label[for=bp-t1] { background:var(--accent); color:#fff; border-color:var(--accent); }
#bp-t1:checked ~ .bp-tage label[for=bp-t1].heute::after { background:#fff; }
#bp-t2:checked ~ .bp-t2 { display:block; }
#bp-t2:checked ~ .bp-tage label[for=bp-t2] { background:var(--accent); color:#fff; border-color:var(--accent); }
#bp-t2:checked ~ .bp-tage label[for=bp-t2].heute::after { background:#fff; }
#bp-t3:checked ~ .bp-t3 { display:block; }
#bp-t3:checked ~ .bp-tage label[for=bp-t3] { background:var(--accent); color:#fff; border-color:var(--accent); }
#bp-t3:checked ~ .bp-tage label[for=bp-t3].heute::after { background:#fff; }
#bp-t4:checked ~ .bp-t4 { display:block; }
#bp-t4:checked ~ .bp-tage label[for=bp-t4] { background:var(--accent); color:#fff; border-color:var(--accent); }
#bp-t4:checked ~ .bp-tage label[for=bp-t4].heute::after { background:#fff; }
.bp-tagestitel { margin:2px 0 8px; font-weight:700; }
.bp-zeile {
  display:grid; grid-template-columns:12px minmax(0,1.6fr) 104px minmax(0,1.1fr) minmax(0,1fr);
  gap:6px 12px; align-items:baseline; padding:9px 2px; border-top:1px solid var(--border);
}
.bp-tagestitel + .bp-zeile { border-top:0; }
.bp-punkt { width:10px; height:10px; border-radius:99px; background:var(--c); align-self:center; }
.bp-name { font-weight:600; min-width:0; }
.bp-name small { display:block; font-weight:400; color:var(--muted); font-size:.8rem; line-height:1.3; }
.bp-meta { display:contents; }
.bp-zeit { color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.bp-wer { font-weight:600; }
.bp-leer { color:var(--muted); padding:8px 0; }
@media (max-width: 640px) {
  .bp-zeile { grid-template-columns:12px 1fr; gap:2px 10px; }
  .bp-meta { display:flex; flex-wrap:wrap; gap:0 12px; grid-column:2; font-size:.9rem; }
}

.bp-woche { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.bp-woche > summary { cursor:pointer; font-weight:700; list-style-position:inside; padding:2px 0; }
.bp-woche[open] > summary { margin-bottom:12px; }
.bp-woche table { width:100%; border-collapse:collapse; font-size:.88rem; min-width:760px; border:1px solid var(--raster); }
.bp-woche th {
  text-align:left; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
  padding:9px 10px; border:1px solid var(--raster); background:color-mix(in srgb, var(--text) 5%, transparent);
}
.bp-woche td {
  padding:9px 10px; border:1px solid var(--raster); vertical-align:top;
  background:color-mix(in srgb, var(--c) 11%, transparent);
}
.bp-woche td:first-child { box-shadow:inset 3px 0 0 var(--c); }
.bp-woche td:nth-child(2) { white-space:nowrap; }
.bp-woche td.leer { color:var(--muted); text-align:center; }
.bp-woche td small { display:block; font-weight:400; color:var(--muted); font-size:.76rem; }
.bp-fuss { margin:12px 0 0; font-size:.84rem; }

/* Zeile unter dem Datumsfeld im Formular „Kind schicken" */
.bp-tagzeile { margin:6px 0 0; font-size:.82rem; color:var(--muted); line-height:1.4; }
.bp-tagzeile b { color:var(--text); font-weight:600; }

/* Pflege in den Einstellungen */
.bp-edit { width:100%; min-width:1240px; border-collapse:collapse; }
.bp-edit th { text-align:left; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:4px; }
.bp-edit td { padding:4px; vertical-align:top; border-bottom:1px solid var(--border); }
.bp-edit input[type=text] { width:100%; min-width:0; padding:6px 8px; font-size:.86rem; }
.bp-edit select { padding:6px 4px; font-size:.84rem; }
.bp-edit td:first-child { min-width:210px; box-shadow:inset 3px 0 0 var(--c); }
.bp-edit td:nth-child(2) { min-width:104px; }
.bp-edit td:nth-child(3) { min-width:130px; }
.bp-edit td:nth-child(n+4):nth-child(-n+8) { min-width:104px; }
.bp-edit .bp-zusatz { margin-top:4px; font-size:.78rem; }
.bp-knoepfe { display:flex; gap:2px; }
.bp-import { border:2px dashed var(--border); border-radius:14px; padding:14px 16px; max-width:560px; }

/* ---------------------------------------------------------------------
   Trainingsraum, Ergänzungen vom 29.09.2026
   --------------------------------------------------------------------- */
/* Grün aufleuchten: bei der schickenden Lehrkraft, wenn Lernoase oder
   Nacharbeit geschafft sind. Ein ruhiger Schein, kein Blinken. */
.badge-leuchten {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 30%, transparent),
              0 0 12px color-mix(in srgb, var(--ok) 45%, transparent);
}

/* Hinweis zum Reflexionsbogen bei der Aufsicht */
.tr-reflexion {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
  background: var(--warn-bg); color: var(--text); font-weight: 600; font-size: .92rem; line-height: 1.4;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}
.tr-reflexion .symbol { flex: none; color: var(--warn); margin-top: 2px; }

/* Seite der Trainingsraum-Leitung */
.trl-verpasst { margin-left: 6px; }
.trl-termine { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.trl-na-dringend { background: color-mix(in srgb, var(--warn) 7%, transparent); border-radius: 12px; padding-left: 10px; padding-right: 10px; }
.trl-form { gap: 8px; margin: 0; align-items: center; flex-wrap: wrap; }
.trl-form select { min-width: 190px; max-width: 240px; }
.trl-rueck > summary { list-style: none; cursor: pointer; }
.trl-rueck > summary::-webkit-details-marker { display: none; }
.trl-rueck[open] { flex: 1 1 280px; }
.trl-tab td { vertical-align: top; }
.trl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 10px; }
.trl-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.trl-kpi .muted { font-size: .85rem; line-height: 1.3; }
.trl-kpi-zahl { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.trl-balken { display: grid; grid-template-columns: minmax(90px, 38%) 1fr 34px; gap: 10px; align-items: center; padding: 5px 0; font-size: .88rem; }
.trl-balken-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trl-balken-spur { height: 10px; border-radius: 99px; background: var(--flaeche-feld); overflow: hidden; }
.trl-balken-spur > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); min-width: 3px; }
.trl-balken-zahl { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }