/*
 * Schulprogramme – Portal-Gestaltung
 * Version: v1.16 · Stand: 31.10.2026 · v1.16: Bild/Video in der App-Kachel (.pane.has-media, .pane-media, Icon klein in der Ecke), Prompt-Kacheln gleich hoch, offene Beitrittsanfrage als Knopf (.tag-button), höchste Jahrgangsstufe (.grade-input) · v1.15: Name oben rechts als Knopf (.who), Schülernamen spaltenweise (.finder-names, --rows/--cols), Hinweis „App lädt nicht“ (.host-stall), zweispaltig „Eigene Apps bauen“ + Prompts (.guide-cols, .prompt-*, .teaser-*), Gruppen in „Installierte Apps“ (.sub-row, .group-toggle), Meine Klassen (.my-classes, .account), Beitrittsanfragen (.requests-box, .join-code) · v1.14: Filter „Von“ (.author-filter), Speicherung nur im Browser (.save-ind.local), Autoren im Adminbereich (.authors-hint) · v1.13: Schülernamen in Spalten (.finder-names), Klassenwechsel in der App-Leiste (.class-switch), Hinweis ohne Anmeldung (.pub-notice) · v1.12: Häkchen je Fach/Bereich (.cat-all), Speicheranzeige (.save-ind), öffentliche Apps (.pub-*), „Eigene Apps bauen“ (.guide-*) · v1.11: Klassen der Schule finden (.finder), Vorschläge beim Anlegen (.suggest, .dup-warn), Hinweise (.notice-join), Austragen (.leave-box) · v1.10: App-Auswahl der Klasse (.picker) · v1.2: Lehrerbereich (Tabellen, Registerkarten, Formulare), Suche, Druckliste (A4-Kärtchen)
 * v1.3: Fortschritt (Registerkarte, Einheiten-Tabelle, Zeitraum), Fortschritt-Abzeichen an der Kachel
 * v1.4: Gruppenköpfe, Varianten-Markierung und -Zeilen
 * v1.5: Adminbereich „Verwaltung“ (Systemübersicht, Schulen mit Logo/Farbe, Personal, Einstellungen, Audit-Log)
 * v1.6: Admin Apps/Kategorien (Upload-Feld, Fortschritt, Versionstabelle, Lernreihenfolge)
 * v1.7: Schuljahreswechsel (Schritte, Klassen-/Schülerlisten, Zusammenfassung), Schülerstatus
 * v1.8: Ersatzanzeige im Logo-Badge (Initialen), Benutzername unter Schülernamen, Verzeichnis mit Klassen und Gleichnamigen
 * v1.9: Logo/Name als Link, Passwort-Auge, Hinweis bei Kontowechsel, Verzeichnis eine Zeile je Schüler, „zurückgesetzt am …“,
 *       Registerkarten nur waagerecht scrollbar, Druckbogen 1 mm kürzer (Safari), Fach → Bereich (Seitenleiste, Listen),
 *       vertraute Geräte
 * Leitidee: Die Schule aus dem Logo. Navy wie der Logo-Hintergrund, App-Kacheln als Fenster
 * mit farbigen Rahmen (Rot/Gelb/Grün wie die Fensterrahmen), runder Logo-Badge mit weißem Ring.
 * Keine Inline-Styles im Markup (CSP); Farben pro Schule über CSS-Variablen (JS setzt sie).
 */

@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); }

:root {
  --navy: #0B254C;
  --red: #B02A3E;
  --yellow: #E6B12E;
  --green: #6BAF45;
  --paper: #F7F7F5;
  --surface: #FFFFFF;
  --ink: #17233A;
  --ink-soft: #4A566B;
  --line: #D9DEE6;
  --focus: #E6B12E;
  --danger: var(--red);
  --ok: var(--green);
  --navy-ink: #FFFFFF;
  --eval: var(--navy);
  --shadow: 0 1px 0 rgba(11, 37, 76, .08), 0 6px 18px -10px rgba(11, 37, 76, .35);
  --r-s: 8px;
  --r-m: 14px;
  --font: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-0: 0.875rem;
  --fs-1: 1rem;
  --fs-2: 1.25rem;
  --fs-3: 1.5625rem;
  --fs-4: 1.953rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0E1828;
    --surface: #17233A;
    --ink: #EEF1F6;
    --ink-soft: #B5BFCE;
    --line: #2C3A52;
    --eval: #7C9BD1;
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 8px 20px -12px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font: 400 var(--fs-1)/1.55 var(--font); color: var(--ink); background: var(--paper); }
h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font-size: var(--fs-4); font-weight: 700; }
h2 { font-size: var(--fs-2); font-weight: 700; }
p { margin: 0 0 .75em; }
a { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Bedienelemente ---------- */
button, .btn {
  font: 700 var(--fs-1)/1.2 var(--font);
  min-height: 44px; padding: 10px 18px;
  border: 2px solid transparent; border-radius: var(--r-s);
  background: var(--navy); color: var(--navy-ink);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
button:hover, .btn:hover { filter: brightness(1.12); }
button:disabled { opacity: .55; cursor: default; filter: none; }
button.quiet, .btn.quiet { background: transparent; color: inherit; border-color: currentColor; }
button.plain { background: transparent; color: inherit; padding-inline: 10px; }
button.danger { background: var(--red); color: #fff; }
input[type="text"], input[type="password"], input[type="search"], input[inputmode], select, textarea {
  font: 400 1rem/1.3 var(--font); color: var(--ink);
  min-height: 46px; width: 100%; padding: 10px 12px;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-s);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--navy); outline-offset: 0; }
label { font-weight: 700; display: block; margin-bottom: 6px; }
.field { margin-bottom: 16px; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 400; min-height: 44px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--navy); }
.hint { color: var(--ink-soft); font-size: var(--fs-0); }
.error { color: var(--red); font-weight: 700; }
@media (prefers-color-scheme: dark) { .error { color: #FF8A9A; } }

/* ---------- Kopfzeile mit Logo-Badge ---------- */
.topbar {
  background: var(--navy); color: #fff;
  display: flex; align-items: center; gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  min-height: 64px; position: relative;
}
.badge {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: #fff center / cover no-repeat; border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--navy);
  overflow: hidden; display: grid; place-items: center;
}
.badge img { width: 100%; height: 100%; object-fit: cover; }
.badge .badge-text { color: #0B254C; font-weight: 700; font-size: 1.1rem; letter-spacing: .02em; }
.login-card .badge .badge-text { font-size: 2.4rem; }
.topbar .brand { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.topbar .brand strong { font-size: var(--fs-2); }
.topbar .brand span { font-size: var(--fs-0); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar nav { display: flex; gap: 4px; margin-left: 12px; }
.topbar nav a { color: #fff; text-decoration: none; padding: 10px 12px; border-radius: var(--r-s); font-weight: 700; }
.topbar nav a[aria-current="page"] { background: rgba(255, 255, 255, .14); }
.topbar .spacer { flex: 1; }
.topbar button.plain { color: #fff; }
.topbar .who { font: inherit; font-size: var(--fs-0); text-align: right; line-height: 1.2; color: #fff; background: transparent; border: 2px solid transparent; border-radius: var(--r-s);
  padding: 4px 8px; display: flex; flex-direction: column; align-items: flex-end; cursor: pointer; min-height: 44px; justify-content: center; max-width: 40vw; }
.topbar .who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.topbar .who:hover, .topbar .who:focus-visible { border-color: rgba(255, 255, 255, .5); }
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; row-gap: 4px; padding-bottom: 4px; }
  .topbar nav { order: 10; flex: 1 0 100%; margin: 0 -8px; overflow-x: auto; }
  .topbar nav a { white-space: nowrap; }
}
@media (max-width: 560px) {
  .topbar .who span + span { display: none; }
  .topbar .who { max-width: 28vw; }
  .topbar { gap: 10px; }
  .topbar .badge { width: 44px; height: 44px; }
  .topbar .brand { flex: 1 1 auto; }
  .topbar .brand strong { font-size: 1.1rem; }
  .topbar .spacer { display: none; }
  .topbar > button { padding: 8px 12px; min-height: 40px; }
}

/* ---------- Seiten ---------- */
.page { max-width: 1120px; margin: 0 auto; padding: 28px 16px 64px; }
.page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.page-head p { color: var(--ink-soft); margin: 4px 0 0; }
section + section { margin-top: 36px; }
section > h2 { margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
section > h2::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: var(--cat, var(--yellow)); flex: none; }

/* ---------- App-Übersicht: Seitenleiste + Inhalt ---------- */
.apps-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; }
.views { position: sticky; top: 16px; }
.views ul { list-style: none; margin: 0; padding: 0; }
.view-row { display: flex; align-items: flex-start; border-radius: var(--r-s); }
.view {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 10px; align-items: start;
  background: none; color: var(--ink); text-align: left; font-weight: 700; line-height: 1.3;
  padding: 11px 8px 11px 10px; border: 0; border-radius: var(--r-s);
}
.view:hover { filter: none; background: rgba(11, 37, 76, .07); }
@media (prefers-color-scheme: dark) { .view:hover { background: rgba(255, 255, 255, .07); } }
.view[aria-current="true"] { background: var(--navy); color: #fff; }
.view .marker { width: 20px; height: 20px; display: grid; place-items: center; }
.view .marker .ic { width: 20px; height: 20px; fill: currentColor; }
.view .marker.swatch::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: var(--swatch); }
.view .label { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; }
.view .count { font-weight: 400; font-size: var(--fs-0); color: var(--ink-soft); padding-top: 1px; }
.view[aria-current="true"] .count { color: rgba(255, 255, 255, .8); }
.star { background: none; color: var(--ink-soft); min-width: 40px; min-height: 44px; padding: 0; opacity: .45; }
.star .ic { width: 18px; height: 18px; fill: currentColor; }
.star:hover, .star:focus-visible { opacity: 1; filter: none; }
.star[aria-pressed="true"] { color: var(--yellow); opacity: 1; }
.star[aria-pressed="true"] .ic path { stroke: #8A6400; stroke-width: 1.2; }
.views .sep { height: 1px; background: var(--line); margin: 10px 4px; }
.view-row.sub { padding-left: 22px; }
.view-row.sub .view { font-weight: 400; padding-top: 8px; padding-bottom: 8px; }
.view-row[hidden] { display: none; }
.expand { background: none; color: var(--ink-soft); min-width: 32px; min-height: 44px; padding: 0; font-size: 1rem; }
.expand:hover, .expand:focus-visible { color: var(--ink); filter: none; }

.apps-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px; margin-bottom: 24px; }
.apps-head h1 { font-size: var(--fs-4); overflow-wrap: anywhere; }
.apps-head h1:focus { outline: none; }
.greeting { color: var(--ink-soft); margin: 0 0 4px; font-weight: 700; }
.apps-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sort { display: flex; align-items: center; gap: 8px; }
.sort label { margin: 0; font-weight: 400; color: var(--ink-soft); }
.sort select { width: auto; min-height: 44px; }
.author-filter { display: flex; align-items: center; gap: 8px; }
.author-filter label { margin: 0; font-weight: 400; color: var(--ink-soft); }
.author-filter select { width: auto; min-height: 44px; max-width: 12em; }
.view-toggle { display: none; }
.view-toggle .ic { width: 20px; height: 20px; fill: currentColor; }
.apps-content section + section { margin-top: 36px; }
.apps-content section > h2 { overflow-wrap: anywhere; }

@media (max-width: 899px) {
  .apps-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .views { display: none; position: static; background: var(--surface); border-radius: var(--r-m); padding: 8px; margin: -8px 0 20px; box-shadow: var(--shadow); }
  .views.open { display: block; }
  .apps-layout > .views { order: 1; }
  .apps-main { order: 0; display: contents; }
  .apps-head { order: 0; }
  .apps-content { order: 2; }
  .view-toggle { display: inline-flex; color: var(--ink); }
  .apps-tools { width: 100%; justify-content: space-between; }
}

/* ---------- Kachel mit Fensterbank ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 28px 18px; }
.tiles.staff { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
@media (max-width: 420px) { .tiles, .tiles.staff { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; } }
.tile { display: flex; flex-direction: column; min-width: 0; }
.tile .open { display: block; padding: 0; min-height: 0; background: none; border: 0; border-radius: 6px 6px 0 0; }
.tile .open:hover { filter: none; }
.tile .open:focus-visible { outline: none; }
.tile .open:focus-visible .pane { outline: 3px solid var(--focus); outline-offset: 3px; }
.tile .pane {
  aspect-ratio: 1 / 1; display: grid; place-items: center; position: relative; overflow: hidden;
  background: var(--surface); border: 7px solid var(--frame); border-bottom: 0; border-radius: 6px 6px 0 0;
  box-shadow: inset 0 0 0 2px rgba(11, 37, 76, .06);
}
.tile .pane img { width: 70%; height: 70%; object-fit: contain; }
.tile .initials { font-size: 2.6rem; font-weight: 700; color: var(--frame); }
.badge-new, .seq-no { position: absolute; top: 6px; font-size: .78rem; font-weight: 700; line-height: 1; padding: 5px 9px; border-radius: 999px; }
.badge-new { left: 6px; background: var(--yellow); color: #0B254C; }
.seq-no { right: 6px; background: #0B254C; color: #fff; }
.sill {
  display: flex; align-items: center; min-height: 44px; padding: 0 2px;
  background: var(--frame); color: var(--on-frame); border-radius: 0 0 6px 6px;
  box-shadow: var(--shadow);
}
.sill button { background: none; color: inherit; border: 0; min-height: 44px; min-width: 40px; padding: 0 8px; border-radius: 6px; font-size: var(--fs-0); }
.sill button:hover { filter: none; background: rgba(255, 255, 255, .2); }
.sill button:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.sill .ic { width: 20px; height: 20px; fill: currentColor; flex: none; }
.sill .eval { flex: 1; justify-content: flex-start; gap: 6px; min-width: 0; }
.sill .eval span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sill .gap { flex: 1; }
.tile .title { margin-top: 10px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .tile .pane { transition: transform .15s ease; }
  .tile .open:hover .pane { transform: translateY(-2px); }
}

/* Dialog-Inhalte */
.dialog .actions button.menu-item { flex: 1 1 100%; justify-content: flex-start; background: var(--paper); color: var(--ink); border-color: var(--line); }
.dialog .actions button.menu-item:hover { border-color: var(--navy); filter: none; }
.dialog .actions button.menu-item.danger-text { color: var(--red); }
@media (prefers-color-scheme: dark) { .dialog .actions button.menu-item.danger-text { color: #FF8A9A; } }
.check-list { display: grid; gap: 2px; }
.info-body dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 12px 0 0; }
.info-body dt { font-weight: 700; }
.info-body dd { margin: 0; }

.empty { background: var(--surface); border: 2px dashed var(--line); border-radius: var(--r-m); padding: 28px; color: var(--ink-soft); }

/* ---------- Anmeldung ---------- */
.login-screen {
  min-height: 100vh; display: grid; place-items: center; padding: 72px 16px 32px;
  background: var(--navy);
}
.login-card {
  width: min(420px, 100%); background: var(--surface); color: var(--ink);
  border-radius: 18px; padding: 72px 28px 28px; position: relative;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6);
}
.login-card .badge { width: 120px; height: 120px; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); border-width: 5px; box-shadow: 0 0 0 4px var(--navy); }
.login-card h1 { text-align: center; font-size: var(--fs-3); margin-bottom: 4px; }
.login-card .sub { text-align: center; color: var(--ink-soft); margin-bottom: 24px; }
.login-card form button[type="submit"] { width: 100%; margin-top: 8px; }
.login-card .switch { display: block; text-align: center; margin-top: 18px; font-size: var(--fs-0); }
.login-card .switch button { min-height: 0; padding: 4px; background: none; color: var(--ink-soft); text-decoration: underline; font-weight: 400; }
.qr { display: grid; place-items: center; background: #fff; border-radius: var(--r-s); padding: 12px; margin: 12px 0; }
.qr img { width: 200px; height: 200px; image-rendering: pixelated; }
.secret { font: 700 1rem/1.4 var(--font); letter-spacing: .08em; word-break: break-all; background: var(--paper); padding: 8px 10px; border-radius: var(--r-s); }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; margin: 12px 0; padding: 12px; background: var(--paper); border-radius: var(--r-s); font-size: 1.05rem; letter-spacing: .06em; }
input.code { font-size: 1.6rem; letter-spacing: .3em; text-align: center; }

/* ---------- App-Host ---------- */
.host { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--paper); z-index: 20; }
.host-bar { display: flex; align-items: center; gap: 8px; padding: 6px max(8px, env(safe-area-inset-left)); background: var(--navy); color: #fff; min-height: 52px; }
.host-bar .title { flex: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.host-bar button { min-height: 40px; }
.host-bar button.plain { color: #fff; }
.host-bar .tag { background: var(--yellow); color: var(--navy); border-radius: 999px; padding: 2px 10px; font-size: var(--fs-0); font-weight: 700; }
.host iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.host:fullscreen .host-bar { min-height: 40px; }

/* ---------- Dialoge, Meldungen ---------- */
.overlay { position: fixed; inset: 0; background: rgba(11, 37, 76, .55); display: grid; place-items: center; padding: 16px; z-index: 50; }
.dialog { background: var(--surface); color: var(--ink); border-radius: var(--r-m); padding: 22px; width: min(480px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6); }
.dialog h2 { margin-bottom: 10px; }
.dialog .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.toasts { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; z-index: 60; width: min(480px, calc(100% - 32px)); }
.toast { background: var(--ink); color: var(--paper); padding: 12px 16px; border-radius: var(--r-s); box-shadow: var(--shadow); border-left: 6px solid var(--green); }
.toast.bad { border-left-color: var(--red); }
.loading { padding: 48px 16px; text-align: center; color: var(--ink-soft); }

/* ---------- Suche (App-Übersicht) ---------- */
.search { position: relative; flex: 1 1 220px; max-width: 340px; }
.search .ic { position: absolute; left: 12px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: var(--ink-soft); pointer-events: none; }
.search input { padding-left: 40px; min-height: 44px; }
.search-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-bottom: 18px; color: var(--ink-soft); }
button.link { background: none; color: var(--ink); border: 0; padding: 4px 2px; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
button.link:hover { filter: none; color: var(--navy); }
@media (prefers-color-scheme: dark) { button.link:hover { color: #fff; } }
@media (max-width: 899px) { .search { max-width: none; order: 3; flex-basis: 100%; } }

/* ---------- Lehrerbereich: allgemeine Bausteine ---------- */
.back { display: inline-block; margin-bottom: 6px; color: var(--ink-soft); text-decoration: none; font-weight: 700; padding: 6px 0; }
.back:hover { color: var(--ink); text-decoration: underline; }
.tag { display: inline-block; vertical-align: middle; margin-left: 10px; background: var(--paper); border: 2px solid var(--line); color: var(--ink-soft); border-radius: 999px; padding: 2px 10px; font-size: var(--fs-0); font-weight: 700; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.toolbar .spacer { flex: 1; }
.toolbar select { width: auto; max-width: 100%; }
.toolbar.sticky { position: sticky; bottom: 0; z-index: 5; background: var(--paper); padding: 12px 0 max(12px, env(safe-area-inset-bottom)); margin: 16px 0 0; border-top: 2px solid var(--line); }
.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip { background: transparent; color: inherit; border: 2px solid var(--line); border-radius: 999px; min-height: 40px; padding: 6px 14px; font-weight: 700; }
.chip:hover { filter: none; border-color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
fieldset { border: 2px solid var(--line); border-radius: var(--r-m); padding: 10px 16px 12px; margin: 0 0 16px; min-width: 0; }
legend { font-weight: 700; padding: 0 6px; }
.form-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 8px; }
.form-row .field { flex: 1 1 200px; margin: 0; }
.form-row > button, .form-row > .check { flex: none; }
.form-narrow { max-width: 560px; }
.field.inline { display: flex; align-items: center; gap: 10px; margin: 0; }
.field.inline label { margin: 0; white-space: nowrap; }
.field.inline select { width: auto; }
.field.grow { flex: 1 1 260px; }
.inline-label { margin: 0; }
.field .label { font-weight: 700; display: block; margin-bottom: 6px; }
.warn { display: block; color: #8A5A00; font-weight: 700; }
@media (prefers-color-scheme: dark) { .warn { color: var(--yellow); } }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .95em; }
.danger-zone { margin-top: 36px; padding: 18px 20px; border: 2px solid var(--line); border-radius: var(--r-m); max-width: 560px; }
.danger-zone h2 { margin-bottom: 8px; }
textarea { resize: vertical; min-height: 160px; }
input[type="file"] { font: inherit; max-width: 100%; }

/* Benutzername unter dem Anzeigenamen (Matrizen, Fortschritt, Dialogtitel) */
.uname { display: block; font: 400 var(--fs-0)/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink-soft); }
.dialog h2 .uname { margin-top: 2px; }

/* Klassenliste */
.class-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.class-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline;
  background: var(--surface); border-radius: var(--r-m); padding: 14px 18px; text-decoration: none; box-shadow: var(--shadow);
  border-left: 7px solid var(--navy);
}
.class-row:hover { border-left-color: var(--yellow); }
.class-name { font-size: var(--fs-2); font-weight: 700; overflow-wrap: anywhere; }
.class-meta { color: var(--ink-soft); font-size: var(--fs-0); text-align: right; }
.class-teachers { grid-column: 1 / -1; color: var(--ink-soft); font-size: var(--fs-0); }
details.archived { margin-top: 28px; }
details.archived > summary { cursor: pointer; font-weight: 700; padding: 10px 0; min-height: 44px; }
details.archived .class-row { border-left-color: var(--line); opacity: .85; }

/* Registerkarten */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin: 0 0 20px; overflow-x: auto; overflow-y: hidden; }
.tabs a { padding: 12px 16px; text-decoration: none; font-weight: 700; color: var(--ink-soft); border-bottom: 4px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--yellow); }

/* Tabellen */
.table-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--r-m); box-shadow: var(--shadow); margin-bottom: 12px; }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data thead th { font-size: var(--fs-0); color: var(--ink-soft); background: var(--paper); position: sticky; top: 0; }
table.data tbody tr:last-child > * { border-bottom: 0; }
table.data .sel { width: 48px; padding-right: 0; }
table.data .sel input { width: 22px; height: 22px; accent-color: var(--navy); }
table.data.small th, table.data.small td { padding: 6px 8px; }
table.data.edit td { padding: 6px 8px; }
table.data.edit input { min-height: 40px; padding: 6px 10px; min-width: 120px; }
table.data.edit td.note { min-width: 200px; font-size: var(--fs-0); }
.dialog table.data { margin-bottom: 12px; }
table.matrix th, table.matrix td { padding: 6px 8px; white-space: nowrap; }
table.matrix thead th { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
table.matrix tbody th { position: sticky; left: 0; background: var(--surface); font-weight: 700; z-index: 1; }
table.matrix .cell { min-height: 36px; width: 100%; padding: 4px 10px; background: transparent; color: var(--ink-soft); border: 2px solid transparent; font-weight: 400; font-size: var(--fs-0); }
table.matrix .cell.has { background: rgba(107, 175, 69, .16); color: var(--ink); }
table.matrix .cell:hover { filter: none; border-color: var(--navy); }

/* Apps der Klasse, Verzeichnis */
.dir-list details { background: var(--surface); border-radius: var(--r-m); box-shadow: var(--shadow); margin-bottom: 10px; }
.dir-list summary { cursor: pointer; font-weight: 700; padding: 12px 16px; min-height: 44px; }
.dir-list ul { list-style: none; margin: 0; padding: 0 16px 10px; }
.dir-list li { padding: 2px 0; border-top: 1px solid var(--line); }
.dir-list li:first-child { border-top: 0; }
.dir-list .check { gap: 10px; align-items: flex-start; min-height: 0; padding: 8px 0; }
.dir-list .check input { margin-top: 2px; flex: none; }
.dir-who { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0; row-gap: 2px; min-width: 0; }
.dir-who > span + span::before { content: "·"; margin: 0 8px; color: var(--ink-soft); font-weight: 400; }
.dir-former { font-size: var(--fs-0); color: var(--ink-soft); }
.dir-name { font-weight: 700; }
.dir-name .mono { font-weight: 400; color: var(--ink-soft); margin-left: 8px; }
.dir-classes { font-size: var(--fs-0); color: var(--ink-soft); }
.dir-same { font-size: var(--fs-0); color: #8A5A00; font-weight: 700; overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) { .dir-same { color: var(--yellow); } }
.create-preview h2 { margin: 24px 0 10px; }
.sub-head { margin: 4px 0 12px; }
.create-input { margin-top: 16px; }
.csv-info { margin-top: 8px; }

/* ---------- Fortschritt (universelle Auswertung) ---------- */
.progress-tools { align-items: center; }
.progress-tools select { min-height: 44px; }
.free-range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.free-range label { margin: 0; font-weight: 400; color: var(--ink-soft); }
.free-range input[type="date"] { width: auto; min-height: 44px; font: 400 1rem/1.3 var(--font); color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-s); padding: 6px 10px; }
table.progress thead th { max-width: 160px; }
table.progress thead th .link { min-height: 32px; padding: 0; font: inherit; color: var(--ink); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; text-align: left; }
.pcell { display: grid; gap: 0; justify-items: start; justify-content: start; width: 100%; min-height: 44px; padding: 4px 10px; background: rgba(107, 175, 69, .12); color: var(--ink); border: 2px solid transparent; border-radius: 6px; font: 400 var(--fs-0)/1.3 var(--font); text-align: left; }
.pcell strong { font-size: 1rem; }
.pcell small { color: var(--ink-soft); }
button.pcell:hover { filter: none; border-color: var(--navy); }
.pcell.empty-cell { background: transparent; color: var(--ink-soft); }
table.units td { text-align: center; font-size: var(--fs-0); min-width: 52px; }
table.units thead th { writing-mode: horizontal-tb; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
table.units th.u-extra { font-style: italic; }
td.u-done { background: rgba(107, 175, 69, .22); font-weight: 700; }
td.u-fail { background: rgba(230, 177, 46, .25); }
td.u-started { background: rgba(11, 37, 76, .06); color: var(--ink-soft); }
@media (prefers-color-scheme: dark) { td.u-started { background: rgba(255, 255, 255, .06); } }
.progress-detail h3 { font-size: 1rem; margin: 16px 0 6px; }
table.units tr.group-row th.u-group { text-align: center; background: var(--surface); color: var(--ink); border-bottom: 2px solid var(--yellow); position: static; }
table.units td.u-multi { position: relative; }
table.units td.u-multi::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); }
@media (prefers-color-scheme: dark) { table.units td.u-multi::after { background: var(--ink); } }
.progress-detail tr.group-head th { background: var(--paper); color: var(--ink); font-size: var(--fs-0); text-align: left; }
.progress-detail tr.variant-row td { color: var(--ink-soft); font-size: var(--fs-0); padding-top: 2px; padding-bottom: 2px; }
.progress-detail tr.variant-row td:first-child { padding-left: 22px; }
.dialog:has(.progress-detail) { width: min(640px, 100%); }
.privacy-note { margin-top: 18px; }

/* Fortschritt-Abzeichen an der Kachel (Versuch, abschaltbar) */
.progress-badge { position: absolute; right: 6px; bottom: 6px; font-size: .78rem; font-weight: 700; line-height: 1; padding: 5px 9px; border-radius: 999px; background: var(--surface); color: var(--ink); border: 2px solid var(--frame); }
.progress-badge.complete { background: var(--green); border-color: var(--green); color: #0B254C; }

/* ---------- Druckliste: Bildschirmansicht ---------- */
.print-view { position: fixed; inset: 0; z-index: 40; overflow: auto; background: #DADDE3; color: #000; }
.print-bar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 16px; background: var(--navy); color: #fff; }
.print-bar .chip { border-color: rgba(255, 255, 255, .5); }
.print-bar .chip[aria-pressed="true"] { background: #fff; color: var(--navy); border-color: #fff; }
.print-bar .spacer { flex: 1; }
.print-bar button.quiet { color: #fff; }
.print-hint { max-width: 210mm; margin: 14px auto; padding: 0 16px; color: #333; font-size: var(--fs-0); }
.sheets { padding: 0 16px 32px; }
.sheet { position: relative; width: 210mm; height: 297mm; margin: 0 auto 10mm; background: #fff; color: #000; overflow: hidden; box-shadow: 0 4px 18px -6px rgba(0, 0, 0, .35); font-family: var(--font); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@media screen and (max-width: 860px) { .sheet { zoom: .45; } }

/* Kärtchen: 2 × 5 à 95 × 55 mm, Raster ab 10 mm links / 11 mm oben, lückenlos */
.card-grid { position: absolute; left: 10mm; top: 11mm; display: grid; grid-template-columns: repeat(2, 95mm); grid-auto-rows: 55mm; }
.card { padding: 5mm; display: flex; flex-direction: column; gap: 1.5mm; overflow: hidden; }
.card-head { display: flex; align-items: center; gap: 2mm; height: 7mm; font-size: 3.3mm; }
.card-logo { width: 7mm; height: 7mm; border-radius: 50%; object-fit: cover; flex: none; }
.card-portal { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-class { margin-left: auto; font-weight: 700; border: .3mm solid #000; border-radius: 2mm; padding: .3mm 1.8mm; white-space: nowrap; }
.card-name { font-size: 5mm; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) var(--qr, 21mm); gap: 3mm; align-items: center; }
.card-body dl { margin: 0; }
.card-body dt { font-size: 2.6mm; color: #444; line-height: 1.2; }
.card-body dd { margin: 0 0 1.5mm; font: 700 4.4mm/1.25 ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.card-pass { letter-spacing: .03em; }
.qr-code { width: var(--qr, 21mm); height: var(--qr, 21mm); image-rendering: pixelated; }
.card-url { font-size: 2.8mm; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Schnittmarken (außerhalb des Rasters) */
.cut { position: absolute; background: #000; }
.cut.v { width: .2mm; height: 5mm; left: var(--x); transform: translateX(-50%); }
.cut.v.top { top: 4mm; }
.cut.v.bottom { bottom: 4mm; }
.cut.hz { height: .2mm; width: 5mm; top: var(--y); transform: translateY(-50%); }
.cut.hz.left { left: 4mm; }
.cut.hz.right { right: 4mm; }

/* Tabelle für die Lehrerakte */
.table-sheet { height: auto; min-height: 297mm; padding: 15mm; page: liste; }
.table-sheet header { margin-bottom: 6mm; }
.table-sheet h1 { font-size: 6mm; }
.table-sheet header p { font-size: 3.2mm; color: #444; margin: 1mm 0 0; }
.table-sheet table { width: 100%; border-collapse: collapse; font-size: 3.6mm; }
.table-sheet th, .table-sheet td { text-align: left; padding: 1.8mm 2.5mm; border-bottom: .2mm solid #999; }
.table-sheet th { border-bottom: .4mm solid #000; }
.table-sheet tr { break-inside: avoid; }
.table-sheet thead { display: table-header-group; }
.table-sheet .note { margin-top: 6mm; font-size: 3mm; color: #444; }

/* ---------- Adminbereich „Verwaltung“ (v1.5) ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 16px; }
.stat-card { background: var(--surface); border-radius: var(--r-m); box-shadow: var(--shadow); padding: 16px 18px; border-top: 6px solid var(--navy); }
.stat-card:nth-child(2) { border-top-color: var(--green); }
.stat-card:nth-child(3) { border-top-color: var(--yellow); }
.stat-card:nth-child(4) { border-top-color: var(--red); }
.stat-card > h2 { margin-bottom: 10px; }
.stat-card > h2::before { display: none; }
.stat-card h3 { font-size: 1rem; margin: 14px 0 6px; }
.stat-card dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.stat-card dt { color: var(--ink-soft); white-space: nowrap; }
.stat-card dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-card .toolbar { margin: 12px 0 0; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: 2px 0; }
section.stat-card + section.stat-card { margin-top: 0; }

.logo-thumb { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: middle; background: var(--paper); border: 2px solid var(--line); }
.logo-thumb.big { width: 72px; height: 72px; flex: none; }
.logo-thumb.empty-logo { background: repeating-linear-gradient(45deg, var(--paper), var(--paper) 4px, var(--line) 4px, var(--line) 6px); }
.logo-edit { display: flex; gap: 16px; align-items: center; margin: 4px 0 16px; }
.logo-edit label { margin-bottom: 4px; }
.swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; background: var(--swatch); border: 1px solid rgba(0, 0, 0, .2); vertical-align: middle; }
.swatch.big { width: 36px; height: 36px; border-radius: 8px; }
.swatch-label { display: inline-flex; align-items: center; gap: 8px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .95em; }
.color-row { display: flex; gap: 8px; align-items: center; }
.color-row .color-picker { width: 56px; height: 46px; padding: 2px; border: 2px solid var(--line); border-radius: var(--r-s); background: var(--surface); cursor: pointer; flex: none; }
.color-row .color-text { max-width: 140px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-transform: uppercase; }
.school-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -6px 0 12px; }
.school-preview-bar { background: var(--swatch); color: #fff; font-weight: 700; padding: 8px 14px; border-radius: var(--r-s); }
.theme-preview { display: flex; gap: 8px; margin: 4px 0 8px; }
.dialog:has(.school-form) { width: min(560px, 100%); }
.tag.tag-bad { background: rgba(176, 42, 62, .1); border-color: var(--red); color: var(--red); }
@media (prefers-color-scheme: dark) { .tag.tag-bad { color: #FF8A9A; border-color: #FF8A9A; } }
tr.is-disabled > * { color: var(--ink-soft); }
.credentials dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 12px; }
.credentials dt { font-weight: 700; }
.credentials dd { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.settings-form fieldset { padding-bottom: 4px; }
.audit-tools select { min-height: 44px; }
table.audit td { vertical-align: top; }
td.nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.audit-detail td { background: var(--paper); }
pre.json { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: .85rem/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; max-height: 260px; overflow: auto; }
@media (max-width: 560px) {
  .logo-edit { flex-direction: column; align-items: flex-start; }
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Druck ---------- */
@page { size: A4 portrait; margin: 0; }
@page liste { size: A4 portrait; margin: 12mm; }
@media print {
  .topbar, .toasts, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  body.printing > :not(.print-view) { display: none !important; }
  body.printing .print-view { position: static; overflow: visible; background: none; }
  body.printing .sheets { padding: 0; }
  body.printing .sheet { margin: 0; box-shadow: none; zoom: 1; break-after: page; }
  body.printing .sheet:last-child { break-after: auto; }
  body.printing .table-sheet { min-height: 0; padding: 0; }
}

/* ---------- Adminbereich: Apps und Kategorien (v1.6) ---------- */
.upload-card { background: var(--surface); border-radius: var(--r-m); box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 24px; border-top: 6px solid var(--green); }
.upload-card > h2 { margin-bottom: 12px; }
.upload-card > h2::before { display: none; }
.drop-zone { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 22px 16px; margin-bottom: 14px;
  border: 3px dashed var(--line); border-radius: var(--r-m); background: var(--paper); cursor: pointer; }
.drop-zone:hover, .drop-zone.is-over { border-color: var(--navy); }
.drop-zone:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.drop-file { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .95em; overflow-wrap: anywhere; }
.upload-card progress { flex: 1 1 160px; min-width: 120px; height: 14px; accent-color: var(--green); }
.section-title { margin: 8px 0 12px; }
.section-title::before { display: none; }
.app-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; background: var(--paper); border: 2px solid var(--line); }
.app-thumb-text { font-weight: 700; font-size: .85rem; color: var(--ink-soft); }
.app-form-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.app-form-head .app-thumb { width: 56px; height: 56px; flex: none; }
.app-form-head p { margin: 0 0 4px; }
.dialog:has(.app-form), .dialog:has(.seq-form) { width: min(680px, 100%); }
.dialog .app-form h3 { font-size: 1rem; margin: 16px 0 6px; }
.versions-table td.row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.versions-table tr.is-current th { font-weight: 700; }
button.small { min-height: 36px; padding: 6px 12px; font-size: var(--fs-0); }
button.danger-text { color: var(--red); }
@media (prefers-color-scheme: dark) { button.danger-text { color: #FF8A9A; } }
.install-result dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 12px; }
.install-result dt { font-weight: 700; }
.install-result dd { margin: 0; overflow-wrap: anywhere; }
.install-result h3 { font-size: 1rem; margin: 8px 0 4px; }
.warn-list { margin: 0; padding-left: 1.2em; }
table.categories td.order { white-space: nowrap; }
table.categories td.order button { min-width: 36px; }
.seq-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 640px) { .seq-grid { grid-template-columns: 1fr; } }
.seq-table td:first-child { width: 7.5em; }
input.seq-input { min-height: 40px; padding: 6px 8px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
input.seq-input[aria-invalid="true"] { border-color: var(--red); }
.seq-preview { list-style: none; margin: 0; padding: 0; }
.seq-preview li { padding: 3px 0; border-bottom: 1px solid var(--line); }
.seq-preview .seq-num { display: inline-block; min-width: 4em; font-weight: 700; }
.seq-preview li.seq-none { color: var(--ink-soft); }
.check-list.wrap { display: flex; flex-wrap: wrap; gap: 0 22px; }

/* ---------- Adminbereich: Schuljahreswechsel und Schülerstatus (v1.7) ---------- */
.sy-step { background: var(--surface); border-radius: var(--r-m); box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 20px; }
.sy-step > h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sy-step > h2::before { display: none; }
.step-no { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 1rem; flex: none; }
.sy-final { border-top: 6px solid var(--yellow); }
.sy-pick { align-items: flex-end; flex-wrap: wrap; }
.sy-pick .field { margin: 0; min-width: 160px; }
input.year-input { max-width: 120px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.sy-target { display: flex; gap: 8px; flex-wrap: wrap; }
.sy-target select { width: auto; flex: 0 0 auto; }
.sy-target input { flex: 1 1 140px; min-width: 120px; }
td.sy-hint { font-size: var(--fs-0); }
.tag.tag-warn { background: rgba(230, 177, 46, .18); border-color: var(--yellow); color: var(--ink); }
details.sy-class { border: 2px solid var(--line); border-radius: var(--r-s); margin-bottom: 10px; background: var(--surface); }
details.sy-class > summary { cursor: pointer; padding: 12px 14px; min-height: 44px; list-style-position: inside; }
details.sy-class[open] > summary { border-bottom: 2px solid var(--line); }
details.sy-class .sy-sum { color: var(--ink-soft); font-size: var(--fs-0); }
details.sy-class .sy-bulk { padding: 10px 14px 0; margin: 0; flex-wrap: wrap; }
details.sy-class .table-wrap { padding: 0 14px 10px; }
.sy-table select { width: auto; min-width: 12em; }
.sy-table tr.is-left > th { color: var(--red); }
@media (prefers-color-scheme: dark) { .sy-table tr.is-left > th { color: #FF8A9A; } }
.sy-summary dl, dl.sy-result { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0 0 12px; }
.sy-summary dt, dl.sy-result dt { color: var(--ink-soft); }
.sy-summary dd, dl.sy-result dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.status-section { margin-bottom: 28px; }
.status-section > h2 { margin-bottom: 6px; }
.status-section .toolbar { flex-wrap: wrap; }
tr.group-row > th, tr.group-row > td { background: var(--paper); font-weight: 700; }

/* ---------- v1.9 ---------- */
.topbar a.home { display: block; border-radius: 50%; flex: none; }
.topbar a.brand { color: inherit; text-decoration: none; }
.topbar a.brand:hover strong { text-decoration: underline; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 52px; }
.pw-eye { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); min-width: 46px; min-height: 42px; padding: 0; background: none; color: var(--ink-soft); font-size: 1.15rem; }
.pw-eye[aria-pressed="true"] { color: var(--ink); }
.pw-eye:hover, .pw-eye:focus-visible { filter: none; color: var(--ink); }
.notice { background: rgba(230, 177, 46, .18); border-radius: var(--r-s); padding: 10px 12px; font-weight: 700; margin: 0 0 12px; }
.trust-note { margin: 4px 0 12px; }
.reset-note { display: block; font-size: var(--fs-0); color: #8A5A00; font-weight: 700; }
@media (prefers-color-scheme: dark) { .reset-note { color: var(--yellow); } }
.import-hint, .auto-cats, .auto-teachers { margin: 6px 0; }
.check-list .check.sub { padding-left: 26px; }
tr.cat-sub th { padding-left: 28px; font-weight: 400; }
.sub-mark { color: var(--ink-soft); }
.devices { margin-top: 16px; }
.devices h3 { margin: 0 0 6px; }
.device-list { list-style: none; margin: 8px 0; padding: 0; }
.device-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.device-list .tag { margin-left: 8px; }
@media print {
  /* Safari rundet 297 mm auf und schiebt die unteren Schnittmarken sonst auf eine zweite Seite */
  body.printing .cards-sheet { height: 296mm; }
  body.printing .cards-sheet .cut.v.bottom { bottom: 3mm; }
}

/* ---------- App-Auswahl der Klasse (app-picker) ---------- */
.picker { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; margin: 8px 0 20px; }
.picker-nav ul { list-style: none; margin: 0; padding: 0; }
.picker-nav { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.picker-select { display: none; }
.picker-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 10px; }
.picker-search { flex: 1 1 220px; max-width: 340px; }
.picker-search input { min-height: 44px; }
.picker-list { display: grid; gap: 2px; }
.picker-item { align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--line); }
.picker-item input { margin-top: 2px; flex: none; }
.picker-text { display: grid; gap: 2px; min-width: 0; }
.picker-title { font-weight: 700; overflow-wrap: anywhere; }
.picker-cats { font-size: var(--fs-0); color: var(--ink-soft); overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .picker { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .picker-nav { display: none; }
  .picker-select { display: block; }
  .picker-select select { width: 100%; min-height: 44px; }
  .picker-search { max-width: none; }
}

/* ---------- Klassen der Schule finden (class-finder) ---------- */
details.finder { margin-top: 28px; border: 2px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
details.finder > summary { cursor: pointer; font-weight: 700; padding: 12px 16px; min-height: 44px; }
details.finder[open] > summary { border-bottom: 2px solid var(--line); }
.finder-body { padding: 12px 16px 16px; }
.finder-tools { flex-wrap: wrap; align-items: flex-end; }
.finder-tools .field { margin: 0; }
.finder-tools select { width: auto; min-width: 10em; }
.finder-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.finder-row { background: var(--paper); border-radius: var(--r-s); padding: 10px 14px; border-left: 5px solid var(--navy); }
.finder-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
.finder-row .class-name { font-size: var(--fs-1); }
.finder-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.finder-actions button, .finder-actions .btn { min-height: 40px; }
.finder-members { margin-top: 8px; }
.finder-names { --name-w: 14em; --cols: 1; --rows: 1; list-style: none; margin: 0; padding: 0; font-size: var(--fs-0); display: grid; column-gap: 1.5em; row-gap: 2px;
  grid-auto-flow: column; grid-template-rows: repeat(var(--rows), auto); grid-template-columns: repeat(var(--cols), var(--name-w)); }
.finder-names li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finder-names.measuring { display: inline-block; max-width: none; }
.finder-names.measuring li { display: block; }
.finder-names .mono { color: var(--ink-soft); }
.finder-list.compact .finder-row { padding: 8px 10px; }
.suggest { margin-top: 8px; }
.suggest:empty { display: none; }
.dup-warn { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-s); background: rgba(230, 177, 46, .18); }
.dup-warn .warn { margin: 0 0 6px; }
.notice-list { display: grid; gap: 8px; margin: 0 0 16px; }
.notice-list:empty { display: none; }
.notice.notice-join { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; font-weight: 400; }
.notice-close { min-height: 40px; min-width: 40px; font-size: 1.25rem; line-height: 1; }
.leave-box { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.leave-box .hint { margin: 6px 0 0; }

/* ---------- v1.12: App-Auswahl – Häkchen je Fach/Bereich ---------- */
.picker-nav .cat-all { flex: none; width: 20px; height: 20px; margin: 12px 2px 0 4px; accent-color: var(--navy); }
.picker-nav .view-row:not(.has-all) { padding-left: 26px; }
.picker-nav .view-row.sub.has-all { padding-left: 22px; }

/* ---------- v1.12: Speicheranzeige über der App ---------- */
.save-ind { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-0); font-weight: 700; color: rgba(255, 255, 255, .75); white-space: nowrap; }
.save-ind .save-icon { font-size: 1.15rem; line-height: 1; }
.save-ind[data-state="busy"] { color: #fff; }
.save-ind[data-state="bad"] { color: #fff; background: var(--red); border-radius: 999px; padding: 3px 10px; }
.save-ind.local[data-state="ok"] { color: #fff; }
@media (max-width: 520px) { .save-ind.local[data-state="ok"] .save-text { display: none; } }
.authors-hint { margin: 4px 0 0; }
@media (max-width: 520px) { .save-ind[data-state="busy"] .save-text { display: none; } }

/* ---------- v1.12: Link als Knopf ---------- */
a.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-s);
  font-weight: 700; text-decoration: none; border: 2px solid var(--line); color: var(--ink); background: var(--surface); }
a.button:hover, a.button:focus-visible { border-color: var(--navy); }
.login-card .public-link { margin-top: 4px; }

/* ---------- v1.12: Öffentliche Apps ---------- */
.pub { max-width: 1100px; margin: 0 auto; padding: 16px; }
.pub h1 { margin: 8px 0 12px; }
.pub-search input { width: 100%; max-width: 420px; margin: 4px 0 16px; }
.pub-group { margin: 0 0 24px; }
.pub-group h2 { margin: 16px 0 8px; }
.pub-group h3 { margin: 12px 0 8px; font-size: 1.05rem; color: var(--ink-soft); }
.pub-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pub-tile { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-s); background: var(--surface);
  border: 2px solid var(--line); border-left: 7px solid var(--frame, var(--navy)); color: var(--ink); text-decoration: none; min-height: 72px; }
.pub-tile:hover, .pub-tile:focus-visible { border-color: var(--frame, var(--navy)); }
.pub-tile img, .pub-initials { flex: none; width: 48px; height: 48px; border-radius: 10px; object-fit: contain; }
.pub-initials { display: grid; place-items: center; background: var(--paper); font-weight: 700; color: var(--navy); }
.pub-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pub-text span { font-size: var(--fs-0); color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- v1.12: Eigene Apps bauen ---------- */
.guide { max-width: 900px; }
.guide-section { background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-s); padding: 12px 16px; margin: 0 0 12px; }
.guide-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.guide-head h2, .guide-head h3 { margin: 4px 0; }
.guide-text p, .guide-text ul, .guide-text ol { margin: 6px 0; }
.guide-text h3 { margin: 12px 0 4px; font-size: 1rem; }
.guide-dl-title { margin-top: 24px; }
.guide-group { margin: 0 0 16px; }
.guide-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.guide-file { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--surface);
  border: 2px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; }
.guide-file-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.guide-file-text span { color: var(--ink-soft); font-size: var(--fs-0); }
.guide-file-text .guide-hint { color: var(--ink); font-weight: 700; background: rgba(230, 177, 46, .18); border-radius: 6px; padding: 2px 8px; align-self: flex-start; }
.guide-file .row-actions, .guide-head .row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.guide-form textarea { width: 100%; font: inherit; }
.guide-preview { border: 2px dashed var(--line); border-radius: var(--r-s); padding: 8px 12px; max-height: 240px; overflow: auto; }

/* ---------- v1.13 ---------- */
.host-bar .class-switch { color: #fff; border: 2px solid rgba(255, 255, 255, .5); border-radius: 999px; padding: 2px 12px; font-size: var(--fs-0); font-weight: 700; min-height: 36px; white-space: nowrap; }
.host-bar .class-switch:hover, .host-bar .class-switch:focus-visible { border-color: #fff; }
@media (max-width: 520px) { .host-bar .class-switch { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; } }
.pub-notice { margin: 0 0 16px; }


/* ---------- v1.15 ---------- */
/* App lädt nicht (z. B. Zeitüberschreitung beim ersten Laden) */
.host-stall { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 10px 16px; background: rgba(230, 177, 46, .25); color: var(--ink); font-weight: 700; }
.host-stall[hidden] { display: none; }

/* Installierte Apps: Gruppen */
.apps-admin tr.sub-row th, .apps-admin tr.sub-row td { background: rgba(11, 37, 76, .04); }
.apps-admin tr.sub-row th { padding-left: 24px; }
.apps-admin .sub-mark { color: var(--ink-soft); }
.apps-admin .group-toggle { display: block; margin-top: 2px; font-size: var(--fs-0); font-weight: 700; color: var(--ink-soft); min-height: 32px; padding: 2px 0; }

/* Eigene Apps bauen: zwei Spalten, Prompts */
.guide.guide { max-width: 1200px; }
.guide-cols { display: grid; gap: 20px; }
@media (min-width: 900px) { .guide-cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.guide-side .guide-dl-title { margin-top: 20px; }
.prompt-teaser { display: grid; gap: 8px; text-decoration: none; color: var(--ink); background: var(--surface); border: 3px solid var(--navy); border-radius: var(--r-m);
  padding: 14px 16px; box-shadow: var(--shadow); }
.prompt-teaser:hover, .prompt-teaser:focus-visible { border-color: var(--yellow); }
.teaser-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.teaser-head strong { font-size: var(--fs-3); }
.teaser-text { color: var(--ink-soft); }
.teaser-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.teaser-thumb { aspect-ratio: 1; border-radius: var(--r-s); overflow: hidden; background: var(--paper); border: 2px solid var(--line); display: grid; place-items: center; }
.teaser-img { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; }
.teaser-more { font-weight: 700; color: var(--ink-soft); }
.teaser-go { font-weight: 700; color: var(--navy); justify-self: end; }
@media (prefers-color-scheme: dark) { .prompt-teaser { border-color: var(--eval); } .teaser-go { color: var(--eval); } }
.prompt-letter { display: grid; place-items: center; width: 100%; height: 100%; background: var(--navy); color: #fff; font-weight: 700; font-size: 1.4rem; }
.prompt-grid { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.prompt-tile { display: grid; gap: 6px; }
.prompt-open { display: grid; gap: 6px; width: 100%; padding: 0; border: 3px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.prompt-open:hover, .prompt-open:focus-visible { border-color: var(--yellow); }
.prompt-media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--paper); }
.prompt-title { padding: 4px 10px 10px; font-weight: 700; }
.prompt-tile .row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.prompt-view { display: grid; gap: 10px; }
.prompt-view-media { width: 100%; max-height: min(40vh, 320px); object-fit: contain; border-radius: var(--r-s); background: var(--paper); }
.prompt-view .prompt-letter.prompt-view-media { height: 120px; }
.prompt-text { width: 100%; font: 0.9rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; padding: 8px 10px; border: 2px solid var(--line); border-radius: var(--r-s); background: var(--paper); color: var(--ink); resize: vertical; }
.overlay .dialog:has(.prompt-view) { width: min(760px, 100%); }

/* Meine Klassen, Konto, Beitrittsanfragen */
.my-classes { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 6px; color: var(--ink-soft); font-size: var(--fs-0); }
.my-classes .label { font-weight: 700; }
.my-classes .tag { margin-left: 0; }
.account dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 8px; }
.account dt { font-weight: 700; }
.account dd { margin: 0; }
.plain-list { margin: 4px 0 8px; padding-left: 1.2em; }
.requests-box { background: rgba(230, 177, 46, .14); border: 2px solid var(--yellow); border-radius: var(--r-s); padding: 10px 14px; margin: 0 0 12px; }
.requests-box h2 { font-size: var(--fs-2); margin: 0 0 6px; }
.request-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.request-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.request-list .row-actions { display: flex; gap: 6px; }
.join-code { font: 700 2.2rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .2em; text-align: center; margin: 12px 0; color: var(--ink); }
.join-code-input { font: 700 1.4rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .2em; text-transform: uppercase; max-width: 12em; }
.tag.tag-request { background: rgba(230, 177, 46, .18); border-color: var(--yellow); color: var(--ink); }

/* ---------- v1.16 ---------- */
/* App-Kachel mit Bild/Video: füllt die Scheibe, App-Icon klein unten links */
.tile .pane .pane-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .pane.has-media > img:not(.pane-media), .tile .pane.has-media > .initials {
  position: absolute; left: 6px; bottom: 6px; width: 38px; height: 38px; padding: 3px; object-fit: contain;
  background: var(--surface); border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.tile .pane.has-media > .initials { display: grid; place-items: center; font-size: 1rem; }
/* Prompt-Kacheln gleich hoch, Knöpfe unten bündig; ohne Bild gleiche Höhe wie mit Bild */
.prompt-tile { grid-template-rows: 1fr auto; }
.prompt-open { height: 100%; align-content: start; }
.prompt-media.prompt-letter { height: auto; aspect-ratio: 4 / 3; }
/* Offene Beitrittsanfrage: anklickbar (zurückziehen) */
button.tag-button { min-height: 0; cursor: pointer; font-family: inherit; line-height: 1.4; }
button.tag-button:hover, button.tag-button:focus-visible { filter: none; border-color: var(--yellow); color: var(--ink); }
.my-classes button.tag-button { margin-left: 0; }
.grade-input { width: 6em; }
.app-media-preview { display: block; width: 160px; max-width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-s); border: 2px solid var(--line); margin: 4px 0; }