* { box-sizing: border-box; margin: 0; padding: 0; }

/* Basis-Tokens (:root) liegen seit Sprint 1 in styles/tokens.css und werden
 * dort VOR dieser Datei eingebunden. Theme-/Surface-Overrides bleiben hier. */

body.dark {
  --bg: #020617;
  --card: #0f172a;
  --text: #f8fafc;
  --muted: #cbd5e1;
  --border: #475569;
  --border-soft: #334155;
  --surface: #111827;
  --surface-2: #1e293b;
  --hover: #243044;
  --primary: #93c5fd;
  --primary-dark: #dbeafe;
  --ring: 0 0 0 3px rgba(147, 197, 253, .28);
  --written: #172554;
  --oral: #064e3b;
  --oral-strong: #065f46;
  --final: #78350f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, .55);
  --glow1: rgba(139, 92, 246, .10);
  --glow2: rgba(99, 102, 241, .08);
}

body[data-theme="emerald"] { --primary:#10b981; --primary-dark:#059669; --grad:linear-gradient(135deg,#10b981,#14b8a6); --glow1:rgba(16,185,129,.08); --glow2:rgba(20,184,166,.07); }
body[data-theme="rose"] { --primary:#f43f5e; --primary-dark:#e11d48; --grad:linear-gradient(135deg,#f43f5e,#ec4899); --glow1:rgba(244,63,94,.08); --glow2:rgba(236,72,153,.07); }
body[data-theme="amber"] { --primary:#f59e0b; --primary-dark:#d97706; --grad:linear-gradient(135deg,#f59e0b,#ef4444); --glow1:rgba(245,158,11,.08); --glow2:rgba(239,68,68,.06); }
body[data-theme="cyan"] { --primary:#06b6d4; --primary-dark:#0891b2; --grad:linear-gradient(135deg,#06b6d4,#3b82f6); --glow1:rgba(6,182,212,.08); --glow2:rgba(59,130,246,.07); }
body[data-theme="slate"] { --primary:#64748b; --primary-dark:#475569; --grad:linear-gradient(135deg,#475569,#94a3b8); --glow1:rgba(100,116,139,.08); --glow2:rgba(148,163,184,.06); }
body[data-theme="grape"] { --primary:#a855f7; --primary-dark:#9333ea; --grad:linear-gradient(135deg,#a855f7,#6366f1); --glow1:rgba(168,85,247,.09); --glow2:rgba(99,102,241,.07); }
body[data-theme="lime"] { --primary:#84cc16; --primary-dark:#65a30d; --grad:linear-gradient(135deg,#84cc16,#22c55e); --glow1:rgba(132,204,22,.08); --glow2:rgba(34,197,94,.06); }
body[data-theme="coral"] { --primary:#fb7185; --primary-dark:#f97316; --grad:linear-gradient(135deg,#fb7185,#f97316); --glow1:rgba(251,113,133,.08); --glow2:rgba(249,115,22,.06); }
body[data-theme="mono"] { --primary:#111827; --primary-dark:#111827; --grad:linear-gradient(135deg,#111827,#6b7280); --glow1:rgba(17,24,39,.06); --glow2:rgba(107,114,128,.05); }
/* Weitere Farbthemen (Owner-Wunsch: deutlich mehr Auswahl). Jedes Thema setzt
 * nur Akzentfarbe, Verlauf und Schimmer - Flaechen/Text bleiben identisch,
 * damit Kontrast und Lesbarkeit ueberall gleich bleiben. */
body[data-theme="ocean"] { --primary:#0ea5e9; --primary-dark:#0369a1; --grad:linear-gradient(135deg,#0ea5e9,#2563eb); --glow1:rgba(14,165,233,.08); --glow2:rgba(37,99,235,.06); }
body[data-theme="forest"] { --primary:#15803d; --primary-dark:#14532d; --grad:linear-gradient(135deg,#15803d,#4d7c0f); --glow1:rgba(21,128,61,.08); --glow2:rgba(77,124,15,.06); }
body[data-theme="teal"] { --primary:#0f766e; --primary-dark:#115e59; --grad:linear-gradient(135deg,#0f766e,#14b8a6); --glow1:rgba(15,118,110,.08); --glow2:rgba(20,184,166,.06); }
body[data-theme="sunset"] { --primary:#ea580c; --primary-dark:#c2410c; --grad:linear-gradient(135deg,#ea580c,#db2777); --glow1:rgba(234,88,12,.08); --glow2:rgba(219,39,119,.06); }
body[data-theme="berry"] { --primary:#be185d; --primary-dark:#9d174d; --grad:linear-gradient(135deg,#be185d,#7c3aed); --glow1:rgba(190,24,93,.08); --glow2:rgba(124,58,237,.06); }
body[data-theme="plum"] { --primary:#7e22ce; --primary-dark:#6b21a8; --grad:linear-gradient(135deg,#7e22ce,#c026d3); --glow1:rgba(126,34,206,.08); --glow2:rgba(192,38,211,.06); }
body[data-theme="midnight"] { --primary:#1e3a8a; --primary-dark:#172554; --grad:linear-gradient(135deg,#1e3a8a,#4338ca); --glow1:rgba(30,58,138,.08); --glow2:rgba(67,56,202,.06); }
body[data-theme="sand"] { --primary:#a16207; --primary-dark:#854d0e; --grad:linear-gradient(135deg,#a16207,#b45309); --glow1:rgba(161,98,7,.08); --glow2:rgba(180,83,9,.06); }
body[data-theme="steel"] { --primary:#0369a1; --primary-dark:#075985; --grad:linear-gradient(135deg,#0369a1,#334155); --glow1:rgba(3,105,161,.07); --glow2:rgba(51,65,85,.06); }
body[data-theme="cherry"] { --primary:#dc2626; --primary-dark:#991b1b; --grad:linear-gradient(135deg,#dc2626,#b91c1c); --glow1:rgba(220,38,38,.08); --glow2:rgba(185,28,28,.06); }
body.dark[data-theme="indigo"] { --primary:#a5b4fc; --primary-dark:#e0e7ff; --grad:linear-gradient(135deg,#818cf8,#c4b5fd); }
body.dark[data-theme="emerald"] { --primary:#34d399; --primary-dark:#d1fae5; --grad:linear-gradient(135deg,#10b981,#2dd4bf); }
body.dark[data-theme="rose"] { --primary:#fb7185; --primary-dark:#ffe4e6; --grad:linear-gradient(135deg,#fb7185,#f472b6); }
body.dark[data-theme="amber"] { --primary:#fbbf24; --primary-dark:#fef3c7; --grad:linear-gradient(135deg,#f59e0b,#fb7185); }
body.dark[data-theme="cyan"] { --primary:#67e8f9; --primary-dark:#cffafe; --grad:linear-gradient(135deg,#22d3ee,#60a5fa); }
body.dark[data-theme="slate"] { --primary:#cbd5e1; --primary-dark:#f8fafc; --grad:linear-gradient(135deg,#64748b,#e2e8f0); }
body.dark[data-theme="grape"] { --primary:#d8b4fe; --primary-dark:#f3e8ff; --grad:linear-gradient(135deg,#c084fc,#818cf8); }
body.dark[data-theme="lime"] { --primary:#bef264; --primary-dark:#ecfccb; --grad:linear-gradient(135deg,#a3e635,#34d399); }
body.dark[data-theme="coral"] { --primary:#fda4af; --primary-dark:#ffe4e6; --grad:linear-gradient(135deg,#fb7185,#fdba74); }
body.dark[data-theme="mono"] { --primary:#d1d5db; --primary-dark:#f9fafb; --grad:linear-gradient(135deg,#4b5563,#d1d5db); }

/* Hintergrund-/Oberflaechen-Themes (data-surface), unabhaengig von Akzentfarbe (data-theme) und Dark-Mode */
body[data-surface="warm"] { --bg:#f7f3ea; --card:#fffdf8; --surface:#fbf8f1; --surface-2:#f1ebdd; --border:#e8e0cf; --border-soft:#f0ead9; --hover:#fbf7ee; }
body[data-surface="kuehl"] { --bg:#eef2f7; --card:#ffffff; --surface:#f6f9fc; --surface-2:#e3eaf2; --border:#dbe4ee; --border-soft:#e9eff6; --hover:#f3f7fb; }
body[data-surface="mint"] { --bg:#eef6f1; --card:#ffffff; --surface:#f5faf7; --surface-2:#e2f0e8; --border:#d8e8de; --border-soft:#e7f1ea; --hover:#f2f8f4; }
body[data-surface="rose"] { --bg:#f8f1f3; --card:#fffbfc; --surface:#fbf6f7; --surface-2:#f2e4e8; --border:#ecdce1; --border-soft:#f3e8eb; --hover:#faf4f6; }
body[data-surface="kontrast"] { --bg:#ffffff; --card:#ffffff; --surface:#fafafa; --surface-2:#f0f0f0; --border:#d9d9d9; --border-soft:#ececec; --hover:#f7f7f7; }
/* Weitere Hintergruende (Owner-Wunsch: so vielfaeltig wie die Farbthemen).
 * Jeder Hintergrund setzt nur Flaechen- und Randtoene - die Akzentfarbe kommt
 * weiterhin vom gewaehlten Farbthema, beides laesst sich frei kombinieren. */
body[data-surface="papier"] { --bg:#faf7f0; --card:#fffefb; --surface:#fdfbf6; --surface-2:#f2ede2; --border:#e7e0d3; --border-soft:#f0eae0; --hover:#fbf9f4; }
body[data-surface="sand"] { --bg:#f5efe4; --card:#fffdf7; --surface:#faf6ec; --surface-2:#ece4d4; --border:#e0d6c2; --border-soft:#eee7d9; --hover:#f8f4ea; }
body[data-surface="nebel"] { --bg:#eef0f3; --card:#fbfcfd; --surface:#f5f6f8; --surface-2:#e4e7ec; --border:#dce0e6; --border-soft:#e9ecf0; --hover:#f4f5f7; }
body[data-surface="himmel"] { --bg:#eaf2fb; --card:#ffffff; --surface:#f4f8fd; --surface-2:#dee9f6; --border:#d3e2f2; --border-soft:#e6eef8; --hover:#f1f6fc; }
body[data-surface="salbei"] { --bg:#eef3ec; --card:#fbfdfa; --surface:#f4f8f2; --surface-2:#e2eade; --border:#d8e3d4; --border-soft:#e8efe5; --hover:#f2f7f0; }
body[data-surface="lavendel"] { --bg:#f2f0fa; --card:#fdfcff; --surface:#f8f6fd; --surface-2:#e8e4f4; --border:#ded9ef; --border-soft:#ebe7f7; --hover:#f6f4fc; }
body[data-surface="graphit"] { --bg:#e9eaee; --card:#ffffff; --surface:#f3f4f6; --surface-2:#dfe1e6; --border:#d2d5dc; --border-soft:#e3e5ea; --hover:#f0f1f4; }
body.dark[data-surface="papier"] { --bg:#16150f; --card:#1f1d15; --surface:#1a1811; --surface-2:#2a2619; --border:#3c3728; --hover:#241f16; }
body.dark[data-surface="sand"] { --bg:#17140d; --card:#211c13; --surface:#1c180f; --surface-2:#2c2517; --border:#3f3626; --hover:#251f15; }
body.dark[data-surface="nebel"] { --bg:#111318; --card:#191c22; --surface:#14171d; --surface-2:#222630; --border:#333844; --hover:#1c1f27; }
body.dark[data-surface="himmel"] { --bg:#0b1420; --card:#111c2c; --surface:#0e1825; --surface-2:#182638; --border:#273a54; --hover:#142031; }
body.dark[data-surface="salbei"] { --bg:#101710; --card:#172018; --surface:#131a14; --surface-2:#212c22; --border:#334335; --hover:#1b241c; }
body.dark[data-surface="lavendel"] { --bg:#131120; --card:#1c1a2c; --surface:#171525; --surface-2:#262238; --border:#393352; --hover:#201d31; }
body.dark[data-surface="graphit"] { --bg:#101114; --card:#181a1f; --surface:#141519; --surface-2:#212429; --border:#31353c; --hover:#1b1d22; }
body.dark[data-surface="warm"] { --bg:#171310; --card:#201a15; --surface:#1b1611; --surface-2:#2a221b; --border:#3d332a; --hover:#251e18; }
body.dark[data-surface="kuehl"] { --bg:#0d1420; --card:#131c2b; --surface:#101825; --surface-2:#1a2536; --border:#2a3a52; --hover:#16202f; }
body.dark[data-surface="mint"] { --bg:#0d1713; --card:#12201a; --surface:#101b16; --surface-2:#1a2b23; --border:#2a4237; --hover:#152520; }
body.dark[data-surface="rose"] { --bg:#170f12; --card:#201519; --surface:#1b1215; --surface-2:#2b1d23; --border:#42303a; --hover:#241820; }
body.dark[data-surface="kontrast"] { --bg:#000000; --card:#0d0d0f; --surface:#111114; --surface-2:#1b1b1f; --border:#52525b; --border-soft:#2f3036; --hover:#18181b; }
body.dark[data-surface="oled"] { --bg:#000000; --card:#0d0d0f; --surface:#0a0a0c; --surface-2:#17171a; --border:#26262b; --hover:#111114; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  background:
    radial-gradient(1200px 500px at 80% -10%, var(--glow1), transparent 60%),
    radial-gradient(900px 400px at -10% 0%, var(--glow2), transparent 55%),
    var(--bg);
  color: var(--text);
  font-size: 15px;
  min-height: 100vh;
  transition: background .3s, color .3s;
}

.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 13px; }
.error { color: #dc2626; min-height: 1.2em; margin-top: 8px; font-size: 13.5px; }

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid white;
  outline: 3px solid color-mix(in srgb, var(--primary) 70%, white);
  outline-offset: 3px;
  box-shadow: var(--ring);
}

:where(button, a).btn:focus-visible,
.side-link:focus-visible,
.tab:focus-visible,
.settings-tabs button:focus-visible,
.segmented button:focus-visible,
.pbtn:focus-visible {
  outline-offset: 4px;
}
.pwa-status {
  position: fixed; left: 50%; top: 12px; transform: translateX(-50%);
  z-index: 160; background: var(--card); color: var(--text);
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700;
}
.pwa-status.offline { background: #7f1d1d; color: #fff; border-color: #991b1b; }
.pwa-status.online { background: #065f46; color: #fff; border-color: #047857; }

@media (display-mode: standalone) {
  body { overscroll-behavior: contain; }
  header { padding-top: max(11px, env(safe-area-inset-top)); }
}

/* ---------- Animationen ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.card, .tile, .class-card { animation: fadeInUp .28s ease both; }
.table-wrap { animation: fadeIn .18s ease both; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Beamer-Modus: Noten verbergen ----------
   Zentrale Regel siehe Kaskadenende: `body.privacy [data-sensitive]`.
   Sensible Werte werden im Markup ueber das Attribut data-sensitive
   (grade|name|metric) ausgezeichnet, nicht mehr ueber Einzel-Selektoren. */

/* ---------- Auth ---------- */
.auth-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.auth-box {
  background: var(--card); padding: 44px 40px; border-radius: 22px;
  box-shadow: var(--shadow-md); width: 380px; text-align: center;
  border: 1px solid var(--border); animation: fadeInUp .35s ease both;
}
.auth-box h1 { font-size: 22px; margin-bottom: 10px; letter-spacing: -.02em; }
.auth-box h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.auth-brand {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: 18px;
}
.auth-box p { margin-bottom: 20px; color: var(--muted); font-size: 14px; }
.auth-box input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 12px; font-size: 15px; margin-bottom: 14px; background: var(--surface);
  color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.auth-box input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.auth-box .btn { width: 100%; padding: 11px; }
/* Textlink (z. B. "Passwort vergessen?") – kein Button-Kasten. */
.btn-link {
  background: none; border: none; color: var(--primary); font: inherit;
  font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 6px;
  text-decoration: underline; text-underline-offset: 2px;
}
.btn-link:hover { color: var(--primary-dark); }
.auth-box .btn-link { display: block; width: auto; margin: 10px auto 0; }
.auth-req-note { font-size: 12.5px; margin-bottom: 4px; }
/* Erster-Start-Assistent: Profil -> Sicherheit, ein Schritt pro Seite. */
.auth-setup { text-align: left; }
.auth-steps { display: flex; gap: 8px; margin-bottom: 18px; }
.auth-steps span { flex: 1; text-align: center; font-size: 12px; font-weight: 800; color: var(--muted); padding: 8px 6px; border-radius: 10px; background: var(--surface-2, #eef0fb); }
.auth-steps span.active { color: #fff; background: var(--primary); }
.auth-step { display: grid; gap: 12px; }
.auth-privacy-note { margin-top: 14px; }
.auth-wizard-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.auth-wizard-spacer { flex: 1 1 auto; }
.auth-wizard-actions .btn { width: auto; padding-left: 20px; padding-right: 20px; }
/* Einzelnes Formularfeld in Modalen (Label über Eingabe). */
.settings-field { display: grid; gap: 6px; margin-bottom: 14px; color: var(--text); font-size: 13px; font-weight: 700; }
.settings-field input {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); color: var(--text); font: inherit; font-weight: 400;
}
.settings-field input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.auth-setup-profile {
  display: grid;
  gap: 9px;
  margin-bottom: 10px;
}
.auth-profile-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  margin: 12px 0 14px;
  text-align: left;
}
.auth-profile-card > span {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: #fff;
  font-weight: 850;
}
.auth-profile-card strong { display: block; }
.auth-profile-card small { display: block; color: var(--muted); margin-top: 2px; }

/* ---------- App-Shell ---------- */
#view-main {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  background: var(--bg);
}

.app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  /* dvh folgt auf iOS der tatsaechlich sichtbaren Hoehe (Safe-Area/Leisten). */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Eigener Scroll-Bereich: passt der Navigationsinhalt nicht in die Hoehe,
   * scrollt die Leiste INTERN. Ohne das wurde der Scroll ans Dokument
   * weitergereicht (scroll chaining) - dann scrollte der Inhalt rechts mit und
   * die Leiste wirkte "beweglich". overscroll-behavior stoppt die Weitergabe. */
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Safe-Area oben (Statusleiste) UND unten (Home-Indikator), damit weder die
   * Marke oben noch die Profil-Leiste unten abgeschnitten werden. */
  padding: calc(max(26px, env(safe-area-inset-top)) + 18px) 18px max(20px, calc(env(safe-area-inset-bottom) + 16px));
  background: var(--card);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border-right: 1px solid var(--border);
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Marke bleibt oben in der Navigation kleben, auch wenn die Leiste/Schublade
   * intern scrollt (z. B. auf kleineren iPads mit Safe-Area-Padding). Der
   * deckende Hintergrund verhindert, dass Nav-Eintraege darunter durchscheinen. */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
  padding-bottom: 16px;
  margin-bottom: 8px;
}
.brand-home {
  width: 100%;
  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.brand-home:hover strong { color: var(--primary); }
.brand-home:focus-visible { outline: 3px solid var(--primary); outline: 3px solid color-mix(in srgb, var(--primary) 24%, transparent); outline-offset: 6px; border-radius: 6px; }
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #00897b;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0, 137, 123, .25);
}
.brand-block strong { display: block; font-size: 17px; letter-spacing: -.03em; }
.brand-block span { color: var(--muted); font-size: 13px; }
/* Sprint 1: Marken-Glyph (noturio-mark) ersetzt den Buchstaben "N".
 * Die SVG-Marke bringt ihre eigene Teal-Kachel mit, daher Container neutral. */
.brand-mark, .logo { background: none; box-shadow: none; padding: 0; overflow: hidden; }
.brand-glyph { display: block; width: 100%; height: 100%; }
.side-section {
  margin: 0 10px 8px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  font-weight: 800;
}
.side-link {
  border: 0;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  min-height: 44px;
  border-radius: 13px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
}
.side-link span {
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* SOLIDE Farbe statt color-mix: die aeltere Fire-/Android-WebView kennt
   * color-mix() nicht (erst ab Chromium 111). Dann war die Deklaration
   * ungueltig und das Icon erbte die Link-Farbe - beim aktiven Eintrag also
   * teal ("Notizen gruen", Owner-Befund). Fix: fixes Neutralgrau. */
  color: #5b6474;
}
/* Aktives Icon bleibt neutral (nicht gruen), unabhaengig von color-mix. */
.side-link.active span { color: #5b6474; }
.app-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
}
/* data-icon bleibt nach dem Rendern als Wrapper um das SVG erhalten. Ohne
 * eigene Ausrichtung nimmt dieser Wrapper die Textzeilenhoehe an; das block-
 * SVG sitzt darin am Zeilenanfang und wirkt besonders in hohen Touch-Buttons
 * nach oben/links verschoben. Alle Icons in interaktiven Elementen bekommen
 * deshalb eine dimensionsstabile, mittig ausgerichtete Huelle. */
button > span[data-icon],
a > span[data-icon],
summary > span[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
  line-height: 0;
}
.icon-btn {
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn .app-icon,
.status-pill .app-icon,
.class-next .app-icon {
  width: 16px;
  height: 16px;
}
.side-link:hover { background: var(--surface); }
.side-link.active {
  background: #d5f6f2; /* solider Fallback fuer aeltere WebViews */
  background: color-mix(in srgb, #2dd4bf 20%, var(--card));
  color: #00796b;
}
body.dark .side-link.active {
  background: rgba(45, 212, 191, .16);
  color: #99f6e4;
}
.side-link:disabled {
  pointer-events: none;
}
.side-spacer { flex: 1; }
.profile-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.profile-chip > span {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #ccfbf1;
  color: #00796b;
  font-weight: 800;
}
.profile-chip strong { display: block; font-size: 13px; }
.profile-chip small { display: block; color: var(--muted); font-size: 12px; }
.app-main { min-width: 0; }

/* ---------- Kopfzeile ---------- */
header {
  display: flex; align-items: center; gap: 12px;
  background: var(--card);
  background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 12px 24px;
  /* Ohne native Titelleiste (iOS-Wrapper blendet sie aus) reicht der Inhalt bis
   * ganz nach oben – Safe-Area plus etwas Luft, damit die Kopfzeile nicht an der
   * Statusleiste klebt. */
  padding-top: calc(max(12px, env(safe-area-inset-top)) + 22px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
header h1 { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; }
.logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px;
  font-size: 16px;
  /* Hintergrund/Schatten kommen seit Sprint 1 vom Markenzeichen selbst
   * (.brand-mark/.logo-Neutralisierung weiter oben, Kaskade beachten). */
}
/* Sprint 2: Hamburger + Off-Canvas-Backdrop nur im schmalen Layout sichtbar. */
.sidebar-toggle { display: none; }
.sidebar-backdrop { display: none; }
#breadcrumb { flex: 1; }
#breadcrumb a {
  color: var(--primary-dark); text-decoration: none; font-size: 13.5px; font-weight: 500;
  padding: 6px 12px; border-radius: 99px; background: var(--surface-2);
}
#breadcrumb a:hover { filter: brightness(.97); }
.icon-btn { padding: 6px 11px; font-size: 14px; }
.icon-btn[aria-label] { position: relative; }
.icon-btn[aria-label]:hover::after,
.icon-btn[aria-label]:focus-visible::after {
  content: attr(aria-label);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  max-width: 220px;
  width: max-content;
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--text);
  color: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
  pointer-events: none;
}
.icon-btn.active { background: var(--grad); color: #fff; border-color: transparent; }
.icon-btn.active:hover {
  background: var(--grad);
  color: #fff;
  border-color: transparent;
  filter: brightness(1.04);
}
.icon-btn:hover:not(.active) { color: var(--text); }
.icon-btn svg { stroke: currentColor; }
.btn.active { background: var(--grad); color: #fff; border-color: transparent; }
body.dark a,
body.dark .col-actions a,
body.dark .row-actions a,
body.dark .seat-actions2 a,
body.dark .mini-edit,
body.dark .seat-unassign {
  color: var(--primary-dark);
}
body.dark .col-actions a,
body.dark .row-actions a,
body.dark .cell-flags a,
body.dark .seat-actions2 a,
body.dark .seat-unassign {
  opacity: .92;
  text-shadow: 0 0 10px rgba(219, 234, 254, .22);
}
body.dark .col-actions a:hover,
body.dark .row-actions a:hover,
body.dark .cell-flags a:hover,
body.dark .seat-actions2 a:hover,
body.dark .seat-unassign:hover {
  opacity: 1;
}
body.dark .muted,
body.dark .student-mail,
body.dark .note-preview,
body.dark .quota,
body.dark .col-meta,
body.dark .seat-first {
  color: #cbd5e1;
}

/* Sprint 2: unter 1180px klappt die Sidebar zu einer Off-Canvas-Schublade ein,
 * die per Hamburger (#sidebar-toggle) geoeffnet wird. Die Kopfzeile ist dann die
 * einzige Sticky-Leiste (top:0), damit die Datumszeile nicht mehr darunter klemmt. */
@media (max-width: 1180px) {
  /* clip statt hidden: verhindert horizontalen Ueberlauf, erzeugt aber KEINEN
   * Scroll-Container - sonst klebt der sticky-Header an .app-main statt am
   * Viewport und scrollt mit weg. */
  #view-main { grid-template-columns: 1fr; overflow-x: clip; }
  .sidebar-toggle { display: inline-flex; }
  .icon-btn { min-height: 44px; }
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    height: 100vh;
    width: 260px;
    max-width: 82vw;
    box-sizing: border-box;
    transform: translateX(-100%);
    transition: transform .22s ease;
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    overflow-y: auto;
  }
  #view-main[data-sidebar="open"] .app-sidebar { transform: translateX(0); }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(15, 23, 42, .42);
  }
  .sidebar-backdrop.hidden { display: none; }
  .app-main { max-width: 100vw; overflow-x: clip; }
  header { top: 0; max-width: 100vw; }
  #view-dashboard, #view-classes, #view-class, #view-timetable, #view-calculators, #view-notes, #view-exams { padding: 20px 14px; }
  .class-overview-head { flex-direction: column; align-items: stretch; }
  .class-overview-actions { width: 100%; }
  .class-search { min-width: 0; width: 100%; }
  .gf-page-head { flex-direction: column; align-items: stretch; }
  .gf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar { transition: none; }
}

@media (max-width: 560px) {
  .gf-kpis article { min-width: 0; }
  .gf-kpis span, .gf-kpis small { overflow-wrap: anywhere; }
  header h1 { min-width: max-content; }
  .class-grid { grid-template-columns: 1fr; }
}

/* Sprint 2: Die zweite Marke in der Kopfzeile (#header-title) ist entfernt; die
 * Marke lebt nur noch im Sidebar-Block. Kein doppeltes "Noturio" mehr. */

/* ---------- Noturio polish pass: Arbeitsflächen ---------- */
#tab-content {
  min-height: 360px;
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  background: var(--surface-2);
}

.tab {
  font-weight: 700;
  border-radius: 11px;
  min-height: 40px;
}

.tab.active {
  color: #00796b;
  font-weight: 850;
}

.tab-toolbar {
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.table-wrap,
.student-table,
.detail-table,
.conference-table {
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.table-wrap th,
.student-table th,
.detail-table th,
.conference-table th {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 800;
}

.table-wrap td,
.student-table td,
.detail-table td,
.conference-table td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.grade-input {
  border-radius: 10px;
  font-weight: 750;
}

.oral-cell,
.check-cell,
.avg-col,
.final-col {
  font-weight: 700;
}

.final-col {
  background: var(--card);
  background: color-mix(in srgb, #fef3c7 45%, var(--card));
}

.lesson-card {
  border-radius: 18px;
  padding: 18px 20px;
  border-color: var(--border);
}

.lesson-date {
  border-radius: 999px;
  background: #ccfbf1;
  color: var(--brand-teal);
  font-weight: 850;
}

.lesson-topic {
  letter-spacing: -.01em;
}

.seat-grid-board,
.seat-free-board {
  background-color: var(--card);
  border-radius: 22px;
  border-color: var(--border);
}

.seat-free-board {
  box-shadow: var(--shadow-md);
}

.seat {
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}

.seat:hover {
  box-shadow: var(--shadow-sm);
}

.seat.selected {
  border-color: #00897b;
  background: var(--card);
  background: color-mix(in srgb, #2dd4bf 14%, var(--card));
}

.unseated {
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: var(--card);
}

.chip {
  border-radius: 999px;
}

.two-col {
  gap: 20px;
}

.note-editor-row textarea,
#import-area,
#ic-area {
  border-radius: 14px;
}

.conference-head,
.settings-head {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

body.dark .lesson-date {
  background: rgba(45, 212, 191, .16);
  color: #99f6e4;
}

body.dark .final-col {
  background: var(--card);
  background: color-mix(in srgb, #fbbf24 12%, var(--card));
}

#view-dashboard, #view-classes, #view-class, #view-timetable, #view-calculators, #view-notes, #view-exams { padding: 28px 32px; max-width: 1540px; margin: 0 auto; }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.toolbar h2 { font-size: 21px; letter-spacing: -.02em; }
#view-class > .toolbar {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 4px 4px 14px;
  margin-bottom: 8px;
  box-shadow: none;
}
.unseated .btn { margin-left: auto; }
#class-title { display: flex; flex-direction: row; align-items: center; gap: 12px; font-size: 27px; letter-spacing: -.04em; }
#class-title small { font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.class-title-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.class-title-photo {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.class-context-head .btn {
  min-height: 40px;
  background: transparent;
  box-shadow: none;
}

.tabs.class-primary-tabs {
  display: flex;
  width: 100%;
  padding: 6px;
  margin: 0 0 24px;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.tabs.class-primary-tabs .tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding-inline: 18px;
}

.tabs.class-primary-tabs .tab.active {
  background: var(--card);
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
  color: var(--primary-dark);
  box-shadow: inset 0 -3px 0 var(--primary);
}

.tabs.class-primary-tabs .tab:hover:not(.active) {
  background: var(--card);
  background: color-mix(in srgb, var(--primary) 16%, var(--card));
  color: var(--primary-dark);
}

body.dark .tabs.class-primary-tabs .tab:hover:not(.active) {
  background: var(--card);
  background: color-mix(in srgb, var(--primary) 24%, var(--card));
  color: #ffffff;
}

.class-period-nav {
  min-height: 0;
  margin-bottom: 20px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.class-period-nav::-webkit-scrollbar { display: none; }

.class-period-nav:empty { display: none; }

.class-period-nav .period-bar {
  margin: 0;
  width: max-content;
  min-width: max-content;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

@media (max-width: 800px) {
  #view-class > .toolbar {
    padding: 2px 2px 10px;
  }

  #class-title { font-size: 23px; }

  .class-title-photo {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 10px;
  }

  .tabs.class-primary-tabs {
    margin-bottom: 18px;
    border-radius: 12px;
  }

  .tabs.class-primary-tabs .tab {
    min-height: 44px;
    padding-inline: 15px;
  }

  .class-period-nav { margin-bottom: 16px; }

  /* Zeitraum-Zeile bricht auf schmalen Screens um: Umschalter-Slot unter die Pills. */
  .period-bar-row { flex-wrap: wrap; gap: 8px; }
  .period-bar-slot { margin-left: 0; }
}

/* ---------- Heute / Dashboard ---------- */
.gf-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.gf-page-head h2 { font-size: 28px; letter-spacing: -.04em; margin-bottom: 2px; }
.gf-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
/* Backup-Hinweis nicht an die Karten darunter kleben lassen. */
.backup-reminder { margin-bottom: 18px; }
.gf-kpis article {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 17px 18px;
  box-shadow: var(--shadow-sm);
}
.gf-kpis span, .gf-kpis small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 650; }
.gf-kpis strong { display: block; margin: 5px 0 2px; font-size: 25px; letter-spacing: -.04em; }
/* Sprint 1 - mobiler KPI-Fix (Sprint-0-Audit): 80px-Spalten bei 390px vermeiden.
 * Unter 480px sauberes 2x2-Raster, erst unter 360px einspaltig.
 * Muss NACH der .gf-kpis-Basisregel stehen (gleiche Spezifitaet, Kaskade). */
@media (max-width: 480px) {
  .gf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .gf-kpis { grid-template-columns: 1fr; }
}
.gf-dashboard .dash-card { min-height: 0; }
.gf-dashboard { align-items: start; }
.gf-dashboard .dash-card { align-self: start; }
.gf-dashboard .dash-card > .ui-empty {
  max-width: none;
  margin: 2px 0 0;
  padding: 12px 14px 14px;
  gap: 6px;
  border-color: var(--border-soft);
  background: var(--surface);
  box-shadow: none;
}
.gf-dashboard .dash-card > .ui-empty .ui-empty-icon { font-size: 22px; }
.gf-dashboard .dash-card > .ui-empty .ui-empty-title { margin: 2px 0; font-size: 14px; }
.gf-dashboard .dash-card > .ui-empty .ui-empty-text { margin: 0 auto 6px; max-width: 440px; font-size: 12.5px; }
.gf-dashboard .dash-card > .ui-empty .btn { min-height: 36px; padding: 7px 12px; }
.dashboard-grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: start;
}
.dash-hero {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 18px;
  align-items: flex-end; padding: 24px; border-radius: 20px;
  background: var(--grad); color: #fff; box-shadow: var(--shadow-md);
}
.dash-hero h3 { font-size: 28px; margin: 4px 0 6px; letter-spacing: -.02em; }
.dash-hero p { max-width: 720px; color: rgba(255,255,255,.86); }
.dash-date { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; }
.dash-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-hero .btn:not(.primary) { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.35); }
.dash-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-sm); animation: fadeInUp .24s ease both;
}
.dash-card h3 { font-size: 16px; margin-bottom: 12px; }
.dash-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.dash-holiday { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.dash-holiday strong { color: var(--text); }
.dash-holiday span, .dash-holiday small { color: var(--muted); }
.dash-source { margin: 10px 0 0; font-size: 11px; }
.quick-class-list, .dash-task-list, .today-event-list, .roadmap-list {
  display: flex; flex-direction: column; gap: 8px;
}
.quick-class-list button, .dash-task-list button {
  width: 100%; text-align: left; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); padding: 10px 12px; cursor: pointer;
}
.quick-class-list button:hover, .dash-task-list button:hover { border-color: var(--primary); background: var(--hover); }
.quick-class-list strong { display: block; margin-bottom: 2px; }
.quick-class-list span { color: var(--muted); font-size: 12.5px; }
.dash-compact-list { display: flex; flex-direction: column; gap: 7px; }
.dash-compact-list button {
  width: 100%; min-height: 46px; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); background: var(--surface); cursor: pointer; text-align: left;
}
.dash-compact-list button:hover { border-color: var(--primary); background: var(--hover); }
.dash-compact-list button > span:last-child { min-width: 0; }
.dash-compact-list strong, .dash-compact-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-compact-list strong { font-size: 13px; }
.dash-compact-list small { margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.dash-compact-list svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--primary); }
.dash-list-date { width: 42px; flex: 0 0 42px; color: var(--primary); font-size: 12px; font-weight: 750; }
.today-event {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface);
}
.today-event.matched { border-color: var(--primary); }
.today-event strong, .today-event span, .today-event small { display: block; }
.today-event strong { color: var(--primary-dark); font-size: 12.5px; margin-bottom: 2px; }
.today-event small { color: var(--muted); margin-top: 2px; }
.roadmap-item {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 10px 12px;
}
.roadmap-item.active { border-color: var(--primary); background: var(--surface); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.roadmap-item p { margin-top: 3px; color: var(--muted); font-size: 12.5px; white-space: normal; }
.roadmap-item span {
  flex-shrink: 0; border-radius: 999px; padding: 3px 8px; background: var(--surface-2);
  color: var(--primary-dark); font-size: 11px; font-weight: 700;
}
.roadmap-list.compact .roadmap-item:nth-child(n+5) { display: none; }
.change-list { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.change-item {
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
  background: var(--surface); display: flex; flex-direction: column; gap: 3px;
}
.change-item span { color: var(--muted); font-size: 12.5px; }

/* ---------- Konferenz ---------- */
.conference-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-bottom: 14px;
}
.conference-head strong, .conference-head span { display: block; }
.conference-head span { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.conference-viewbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: -4px 0 12px; padding: 10px 12px;
  border: 1px solid var(--border-soft); border-radius: 12px;
  background: var(--surface-2);
}
.conference-viewbar > span { color: var(--muted); font-size: 12.5px; text-align: right; }
.conference-table td.wrap {
  white-space: normal; min-width: 220px; max-width: 360px; line-height: 1.35;
}
.conference-table th, .conference-table td { padding: 7px 9px; }
.conference-grade-table th { min-width: 118px; }
.conference-grade-table th.sticky-col { min-width: 190px; }
.conf-bad { color: #dc2626; font-weight: 700; }

/* ---------- Buttons ---------- */
.btn {
  padding: 8px 16px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--card); cursor: pointer; font-size: 13.5px; font-weight: 500;
  color: var(--text); box-shadow: var(--shadow-sm);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  vertical-align: middle;
  transition: transform .12s, box-shadow .12s, background .12s, border-color .12s, filter .12s;
}
.btn > span[data-icon] {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}
.btn > span[data-icon] > .app-icon {
  width: 100%;
  height: 100%;
  flex-basis: 100%;
}
.btn:disabled,
button:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.btn:hover { border-color: var(--primary); background: var(--hover); transform: translateY(-1px); }
.btn:disabled:hover,
button:disabled:hover {
  transform: none;
  border-color: var(--border);
  background: var(--card);
}
/* Diese Regel ist spezifischer als .btn.primary und hat deren Farbverlauf
   ueberschrieben - aber nicht die weisse Schrift. Ergebnis: weiss auf weiss,
   der Knopf war unsichtbar. Zu sehen war das direkt nach dem Speichern: Der
   Knopf wird wieder disabled, waehrend Finger oder Zeiger noch darauf liegen,
   also greift zusaetzlich :hover. Der Farbverlauf wird deshalb wieder gesetzt;
   dass der Knopf gesperrt ist, zeigt weiterhin die Deckkraft von .55. */
.btn.primary:disabled,
.btn.primary:disabled:hover {
  background: var(--grad);
  color: #fff;
  border: none;
}
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--grad); border: none; color: #fff; }
.btn.primary:hover { filter: brightness(1.06); box-shadow: 0 4px 14px -4px rgba(99, 102, 241, .5); }
.btn.small { padding: 6px 12px; font-size: 12.5px; border-radius: 9px; }
.btn.danger { color: #dc2626; border-color: #fecaca; margin-left: auto; }
.btn.danger:hover { background: #fef2f2; border-color: #fca5a5; }
body.dark .btn.danger:hover { background: #331414; }
.btn-row { display: flex; gap: 10px; margin-top: 16px; }

/* ---------- Klassen-Karten ---------- */
.class-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.class-overview-title h2 { font-size: 26px; letter-spacing: -.04em; margin-bottom: 3px; }
.class-overview-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.class-search {
  min-width: 310px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 11px 14px;
  background: var(--card);
  color: var(--text);
  font-size: 14px;
}
.class-filterbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 0 20px;
  border-top: 1px solid var(--border-soft);
}
.class-filterbar > div { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 8px 13px;
  background: #dcfce7;
  color: #166534;
  font-weight: 750;
  font-size: 13px;
}
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 20px; }
.class-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s, border-color .18s;
  position: relative; overflow: visible;
}
.class-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--class-accent, var(--primary));
  opacity: .72;
}
.class-card:hover {
  background: var(--card);
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
  box-shadow: 0 14px 30px rgba(15, 23, 42, .12);
  transform: translateY(-4px);
  border-color: var(--border);
  border-color: color-mix(in srgb, var(--primary) 65%, var(--border));
}
.class-card-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.class-card-copy { min-width: 0; }
.class-card-photo,
.class-card-monogram {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.class-card-photo { display: block; object-fit: cover; }
.class-card-monogram {
  display: grid;
  place-items: center;
  background: var(--card);
  background: color-mix(in srgb, var(--class-accent, var(--primary)) 14%, var(--card));
  color: var(--class-accent, var(--primary-dark));
  font-size: 13px;
  font-weight: 850;
}
.class-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 20px; }
.class-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.class-card-actions .ui-action-menu {
  z-index: 12;
}
.class-card-actions .icon-btn {
  min-width: 34px;
  min-height: 34px;
  padding: 4px 8px;
  box-shadow: none;
}
.subject-chip, .class-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 800;
}
.subject-chip::before, .class-status-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.subject-chip { background: #dbeafe; color: #2563eb; }
.subject-chip.c1 { background:#ccfbf1; color:#0f766e; }
.subject-chip.c2 { background:#dcfce7; color:#166534; }
.subject-chip.c3 { background:#fef3c7; color:#92400e; }
.subject-chip.c4 { background:#fce7f3; color:#9d174d; }
.subject-chip.c5 { background:#ede9fe; color:#6d28d9; }
.class-status-chip { background: #dcfce7; color: #166534; }
.class-status-chip.warn { background: #ffedd5; color: #9a3412; }
.class-status-chip.neutral { background: #e2e8f0; color: #334155; }
.class-card h3 { margin: 0 0 5px; font-size: 22px; letter-spacing: -.04em; }
.class-lock-mark { display: inline-flex; margin-left: 8px; vertical-align: -2px; color: var(--muted); }
.class-lock-mark .app-icon { width: 15px; height: 15px; }
.class-card p { font-size: 13.5px; color: var(--muted); }
.class-card p:first-of-type { color: var(--text); font-weight: 500; margin-bottom: 6px; }
.class-card-rule { height: 1px; background: var(--border-soft); margin: 18px 0 14px; }
.class-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.class-metric span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 650; }
.class-metric b { display: block; font-size: 19px; margin-top: 4px; letter-spacing: -.03em; }
.class-next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}
.class-next strong { color: var(--text); }
.class-card.archived { opacity: .55; }
.class-list-compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.class-card.compact {
  display: grid;
  grid-template-columns: minmax(190px, 1.4fr) minmax(160px, .9fr) minmax(220px, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px 64px 16px 18px;
}
.class-card.compact .class-card-top,
.class-card.compact .class-card-rule { display: none; }
.class-card.compact .class-card-top {
  display: inline-flex;
  position: absolute;
  top: 10px;
  right: 12px;
  margin: 0;
}
.class-card.compact .subject-chip,
.class-card.compact .class-status-chip {
  display: none;
}
.class-card.compact .chip-row { display: none; }
.class-card.compact h3 { margin: 0; font-size: 18px; }
.class-card.compact p { margin: 0; }
.class-card.compact .class-card-photo,
.class-card.compact .class-card-monogram {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border-radius: 10px;
}
.class-card.compact .class-metrics {
  grid-template-columns: repeat(3, minmax(68px, 1fr));
  margin: 0;
}
.class-card.compact .class-next {
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  padding-right: 38px;
}
.class-card.compact .class-next span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
}
.class-next {
  gap: 8px;
}
.class-next .app-icon {
  color: var(--muted);
}
.class-next span:last-child { color: var(--text); font-weight: 650; }
.class-overview-head.modern {
  gap: 18px;
  align-items: center;
}
.class-search-wrap {
  min-width: min(360px, 100%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.class-search-wrap input {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  min-width: 230px;
  padding: 11px 0;
  font: inherit;
}
.class-filterbar.modern {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.class-filter-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.class-import-btn {
  color: var(--muted);
  background: transparent;
  box-shadow: none;
}
.class-import-btn:hover {
  color: var(--primary-dark);
  background: var(--card);
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
}
.class-filterbar select {
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--card);
  color: var(--text);
  padding: 9px 11px;
  font: inherit;
  font-weight: 650;
}
.grade-filter button,
.compact-toggle button {
  min-width: 86px;
}
.class-add-card {
  min-height: 170px;
  border: 2px dashed var(--border);
  border-radius: 18px;
  background: var(--card);
  background: color-mix(in srgb, var(--card) 72%, transparent);
  color: var(--muted);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  font: inherit;
  cursor: pointer;
}
.class-grid-empty .class-add-card { width: 100%; }
.class-add-card .app-icon {
  width: 28px;
  height: 28px;
}
.class-add-card:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
  background: var(--hover);
}
.class-add-card.compact {
  min-height: 72px;
  grid-template-columns: auto auto;
  justify-content: center;
}
.archive-block { margin-top: 26px; }
.archive-block .archive-heading {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 18px 0 14px;
  color: var(--text);
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}
.class-icon {
  width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center;
  justify-content: center; color: #fff; font-weight: 700; font-size: 15px;
  letter-spacing: .02em; margin-top: 6px; box-shadow: var(--shadow-sm);
}
.class-photo-preview {
  display: flex; align-items: center; gap: 12px;
  margin: -4px 0 16px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px;
}
.class-photo-preview .muted { display: block; margin-top: 2px; }
.class-icon.small-preview { width: 46px; height: 46px; margin-top: 0; }
body.dark .class-card,
body.dark .card,
body.dark .student-table,
body.dark .table-wrap,
body.dark .modal,
body.dark .tile,
body.dark .tt-day,
body.dark .empty-state {
  border-color: var(--border);
}
body.dark input,
body.dark select,
body.dark textarea,
body.dark .tab-toolbar select {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
}

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: 16px; font-size: 16px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.form-grid input, .form-grid select {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px;
  background: var(--surface); color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.form-grid input:focus, .form-grid select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.name-row { display: flex; gap: 8px; }
.name-row select, .name-row input { flex: 1; min-width: 0; }
.oral-weights span { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; }
.oral-weights input { width: 100%; }

#import-file { display: block; margin-bottom: 10px; font-size: 13px; color: var(--muted); }

/* ---------- Tabs ---------- */
.tabs {
  display: inline-flex; gap: 3px; background: var(--surface-2); padding: 4px;
  border-radius: 13px; margin-bottom: 16px; max-width: 100%; overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 8px 16px; border: none; background: none; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--muted); border-radius: 10px;
  white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--card); color: var(--primary-dark); box-shadow: var(--shadow-sm); font-weight: 600; }

.tab-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.tab-toolbar > span:last-child { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tab-toolbar select {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--card); color: var(--text); font-size: 12.5px;
}
.grade-workbar,
.detail-workbar {
  align-items: center;
  min-height: 78px;
  padding: 14px 16px;
}
.grade-rule,
.detail-rule {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--muted);
}
.grade-rule strong,
.detail-rule strong {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 10px;
  background: var(--surface-2);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-2));
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 850;
}
.grade-rule span,
.detail-rule span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
}
.grade-workbar-actions,
.detail-workbar-actions {
  flex: 0 0 auto;
}
.detail-workbar .btn span[data-icon],
.detail-workbar .ui-action-item .app-icon {
  width: 16px;
  height: 16px;
}
.detail-workbar .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.tab-toolbar.oral-workbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 78px;
}
.oral-workbar .detail-workbar-actions { flex-wrap: nowrap; }
/* Sitzplan-Workbar trägt Terminauswahl + Aktion und darf umbrechen. */
.oral-seat-workbar .detail-workbar-actions { flex-wrap: wrap; align-items: center; gap: 10px; }
.oral-mode-switch { flex: 0 0 auto; }
.oral-term-selector { display: flex; align-items: center; gap: 10px; min-width: 0; }
.oral-term-selector > span {
  flex: 0 0 auto; color: var(--muted); font-size: 10.5px; font-weight: 850;
  text-transform: uppercase; letter-spacing: .05em;
}
.oral-term-selector select {
  min-width: min(390px, 42vw); max-width: 100%; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--card); color: var(--text); font: inherit; font-size: 12.5px;
}
.oral-term-selector select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.seat-workbar .seat-layout {
  max-width: 100%;
}
.segmented {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--surface-2); border-radius: 11px; border: 1px solid var(--border-soft);
}
.segmented button {
  border: 0; background: transparent; color: var(--muted);
  padding: 5px 10px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 600;
}
.segmented button.active { background: var(--card); color: var(--primary-dark); box-shadow: var(--shadow-sm); }
.oral-direct-cell {
  min-width: 112px; position: relative;
}
.oral-direct-input {
  width: 58px; text-align: center; margin-right: 4px;
}
.mini-edit {
  border: 1px solid var(--border); background: var(--card); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; width: 30px; height: 30px; padding: 0; cursor: pointer; font-size: 12px;
}
.mini-edit .app-icon { width: 14px; height: 14px; }
.mini-edit:hover { border-color: var(--primary); color: var(--primary-dark); }
.oral-absent { display: inline-block; min-width: 58px; }

/* ---------- Abschnitte ---------- */
/* Zeitraum-Zeile: Pills links, optionaler rechter Slot (z. B. Mündlich-Modus-
   umschalter). Auf Mobil bricht die Zeile um, der Slot rutscht unter die Pills. */
.period-bar-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%;
}
.period-bar-slot { flex: 0 0 auto; margin-left: auto; }
.period-bar {
  display: inline-flex; gap: 3px; background: var(--surface-2); padding: 4px;
  border-radius: 12px; margin-bottom: 14px;
}
.pbtn {
  border: none; background: none; padding: 6px 15px; cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: var(--muted); border-radius: 9px;
  transition: background .15s, color .15s, box-shadow .15s;
}
.pbtn:hover { color: var(--text); }
/* Zeitraum-Pills sind sekundäre Navigation: ruhige, dezente Füllung wie der
   Modusumschalter (.segmented) – KEIN zweiter satter Lila-Pillen-Stil neben den
   primären Klassen-Tabs (die ihre Unterkante behalten). */
.pbtn.active { background: var(--card); color: var(--primary-dark); box-shadow: var(--shadow-sm); font-weight: 600; }

.field-hint {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* ---------- Rechner ---------- */
.calculator-page-head { margin-bottom: 22px; }
.calculator-mobile-select { display: none; min-width: 220px; }
.calculator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.calculator-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}
.calculator-nav-item {
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}
.calculator-nav-item strong { font-size: 14px; font-weight: 600; }
/* Die Kurzbeschreibung waere in einer Reihe zu breit; sie steht ohnehin
   direkt darunter in der Ueberschrift des gewaehlten Rechners. */
.calculator-nav-item span { display: none; }
.calculator-nav-item:hover {
  background: var(--card);
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
  border-color: var(--border);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
}
.calculator-nav-item.active {
  background: var(--card);
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
  border-color: var(--border);
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
}
.calculator-nav-item.active strong { color: var(--primary-dark); }
.calculator-workspace {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.calculator-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border-soft);
}
.calculator-title h3 { margin: 4px 0 4px; font-size: 21px; }
.calculator-title p { margin: 0; color: var(--muted); line-height: 1.45; }
.calculator-kicker {
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}
.calculator-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.calculator-controls {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(380px, 1.35fr) minmax(230px, .72fr);
  align-items: stretch;
  gap: 14px;
  padding: 18px 24px 20px;
  background: var(--card);
  background: color-mix(in srgb, var(--surface-2) 64%, var(--card));
  border-bottom: 1px solid var(--border-soft);
}
.calculator-control-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
  box-sizing: border-box;
}
.calculator-control-group-primary {
  border-color: var(--border);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  background: var(--card);
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
}
.calculator-control-group-wide { grid-column: 1 / -1; }
.calculator-control-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 10px 14px 9px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
  background: color-mix(in srgb, var(--surface-2) 58%, var(--card));
}
.calculator-control-group-primary .calculator-control-group-head {
  background: var(--card);
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
}
.calculator-control-group-head strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.calculator-control-group-primary .calculator-control-group-head strong { color: var(--primary-dark); }
.calculator-control-group-head span { color: var(--muted); font-size: 11.5px; }
.calculator-control-fields {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding: 14px;
}
.calculator-controls label,
.calculator-custom-thresholds label,
.calculator-advanced-grid label,
.calculator-lookup label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
}
/* Elegante, kompakte Eingaben: Zahlenfelder wachsen NICHT mit der
 * Fensterbreite mit (Owner-Feedback: "brutal grosse Textboxen"). */
.calculator-controls input,
.calculator-controls select,
.calculator-lookup input {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.calculator-controls input[type="number"] { width: 110px; }
.calculator-controls select { width: auto; min-width: 150px; max-width: 220px; }
.calculator-suffix-field { display: flex; align-items: center; width: 110px; min-height: 36px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); overflow: hidden; }
.calculator-suffix-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.calculator-suffix-field input[type="number"] { width: 78px; min-height: 34px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.calculator-suffix-field > span { padding: 0 10px 0 3px; color: var(--muted); font-size: 13px; font-weight: 700; }
.calculator-advanced {
  order: 10;
  grid-column: 1 / -1;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
}
.calculator-advanced summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  color: var(--text);
  cursor: pointer;
}
.calculator-advanced summary::marker { color: var(--primary); }
.calculator-advanced summary span { font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.calculator-advanced summary small { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.calculator-advanced[open] summary { border-bottom: 1px solid var(--border-soft); }
.calculator-advanced-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 260px));
  gap: 14px;
  padding: 14px;
}
.calculator-control-group-result {
  border-color: var(--border);
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
}
.calculator-control-group-result .calculator-control-group-head {
  background: var(--card);
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
}
.calculator-control-group-result .calculator-control-group-head strong { color: var(--primary-dark); }
.calculator-result-fields {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(105px, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 14px;
}
.calculator-result-fields label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.calculator-result-fields input { width: 100%; min-width: 0; }
.calculator-lookup-result {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 12px;
  min-height: 44px;
  padding: 6px 14px;
  border-left: 3px solid var(--primary);
  background: var(--card);
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  border-radius: 6px;
}
.calculator-lookup-result span { color: var(--muted); font-size: 12px; }
.calculator-lookup-result strong { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 28px; color: var(--primary-dark); }
.calculator-lookup-result small { color: var(--muted); }
.calculator-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px 10px;
}
.calculator-table-head > div { display: flex; align-items: baseline; gap: 10px; }
.calculator-table-head span { font-size: 12px; }
.calculator-table { margin: 0 24px 24px; max-height: 520px; overflow: auto; border: 1px solid var(--border-soft); border-radius: 7px; }
.calculator-table table { margin: 0; }
.calculator-table thead { position: sticky; top: 0; z-index: 1; }
.calculator-table th,
.calculator-table td { height: 38px; padding: 6px 14px; font-variant-numeric: tabular-nums; }
.calculator-result-cell { color: var(--primary-dark); font-weight: 700; }
.public-demo-banner {
  position: fixed; z-index: 60; top: 8px; left: 50%; transform: translateX(-50%);
  padding: 7px 14px; border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--border));
  border-radius: 999px; background: color-mix(in srgb, var(--warning) 14%, var(--card));
  color: var(--text); font-size: 12px; font-weight: 750; box-shadow: var(--shadow-sm);
}

@media (max-width: 1180px) {
  .calculator-page-head { align-items: center; }
  .calculator-mobile-select { display: block; }
  .calculator-layout { grid-template-columns: minmax(0, 1fr); }
  .calculator-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calculator-control-group-result { grid-column: 1 / -1; }
  .calculator-result-fields { grid-template-columns: minmax(120px, 180px) auto; justify-content: start; }
}

@media (max-width: 820px) {
  .calculator-controls { grid-template-columns: minmax(0, 1fr); }
  .calculator-control-group-wide { grid-column: auto; }
  .calculator-control-group-result { grid-column: auto; }
}

@media (max-width: 600px) {
  .calculator-page-head { display: grid; }
  .calculator-mobile-select { width: 100%; }
  .calculator-title { padding: 18px; display: grid; }
  .calculator-actions { justify-content: flex-start; }
  .calculator-controls { grid-template-columns: 1fr; padding: 14px 18px 18px; }
  .calculator-control-group-head { display: grid; gap: 2px; }
  .calculator-control-fields { display: grid; grid-template-columns: 1fr; }
  .calculator-result-fields { grid-template-columns: 1fr auto; justify-content: stretch; }
  .calculator-control-fields input[type="number"],
  .calculator-control-fields select,
  .calculator-control-fields .calculator-suffix-field { width: 100%; max-width: none; }
  .calculator-suffix-field input[type="number"] { width: 100%; }
  .calculator-advanced summary { display: grid; gap: 2px; }
  .calculator-advanced-grid { grid-template-columns: 1fr; }
  .calculator-table-head { padding-inline: 18px; align-items: flex-start; }
  .calculator-table { margin: 0 18px 18px; }
}

/* ---------- Stundenplan ---------- */
.tt-week-title {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.tt-grid {
  display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 14px;
}
.tt-day {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  min-height: 180px; animation: fadeInUp .25s ease both;
}
.tt-day.today { border-color: var(--primary); box-shadow: var(--shadow-md); }
.tt-day-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
}
.tt-day-head strong { text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.tt-day-head span { color: var(--muted); font-size: 12.5px; }
.tt-event {
  margin: 10px; padding: 12px; border-radius: 13px;
  background: var(--surface); border: 1px solid var(--border-soft);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.tt-event:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-sm); }
.tt-event.matched { background: linear-gradient(180deg, var(--surface), var(--surface)); background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), var(--surface)); }
.tt-time { color: var(--primary-dark); font-weight: 700; font-size: 12.5px; margin-bottom: 6px; }
.tt-title { font-weight: 650; line-height: 1.25; margin-bottom: 5px; }
.tt-description {
  color: var(--muted); font-size: 12px; line-height: 1.35;
  margin-bottom: 8px; max-height: 3.9em; overflow: hidden;
}
.tt-location { color: var(--muted); font-size: 12.5px; margin-bottom: 8px; white-space: normal; }
.tt-unmatched { display: inline-block; color: var(--muted); font-size: 12px; margin-top: 6px; }
/* Aktionen in der Stundenplankarte: Die Karten sind klein und ruhig; ein
 * vollwertiger .btn mit Rahmen, Schatten und 40px Hoehe wirkte darin wie
 * hineingefallen. Diese Variante nimmt die Typografie der Karte auf. */
.tt-action {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px; padding: 2px 0; min-height: 0;
  border: 0; background: none; box-shadow: none;
  color: var(--primary-dark); font-family: inherit; font-size: 12.5px; font-weight: 650;
  cursor: pointer;
}
.tt-action:hover { color: var(--primary); text-decoration: underline; }
.tt-action:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.tt-empty, .tt-loading {
  color: var(--muted); font-size: 13px; padding: 18px 14px;
}
.empty-state {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 36px 28px; text-align: center; box-shadow: var(--shadow-sm);
  max-width: 560px; margin: 24px auto; animation: fadeInUp .28s ease both;
}
.empty-state h3 { margin: 8px 0; }
.empty-state p { color: var(--muted); margin-bottom: 18px; }
.empty-icon { font-size: 34px; }

@media (max-width: 980px) {
  .tt-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 620px) {
  .tt-grid { grid-template-columns: 1fr; }
}

/* ---------- Tabellen ---------- */
.table-wrap {
  overflow-x: auto; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
table { border-collapse: collapse; width: 100%; }
th, td {
  border-bottom: 1px solid var(--border-soft);
  padding: 8px 10px; text-align: center; font-size: 14px; white-space: nowrap;
}
th {
  background: var(--surface); font-weight: 600; vertical-align: top; padding-top: 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--hover); }

/* Gleiche Arbeitszeilen in Noten, Muendlich, Hausaufgaben und Fehlzeiten.
 * Der Notenrechner (.calculator-table) ist bewusst ausgenommen - seine
 * Schluesseltabelle ist reine Lesetabelle und dichter (38px). */
.table-wrap:not(.calculator-table) tbody tr:not(.stats-row) { height: 48px; }
.table-wrap:not(.calculator-table) tbody tr:not(.stats-row) > td {
  height: 48px !important;
  padding-top: 7px;
  padding-bottom: 7px;
  vertical-align: middle;
}
.detail-workbar,
.grade-workbar {
  gap: 16px;
  margin-bottom: 18px;
}
.detail-workbar-actions,
.grade-workbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tab-toolbar.seat-workbar[data-seat-mode="unterricht"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.seat-toolbar-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.seat-control-group { display: grid; gap: 5px; }
.seat-control-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.seat-quick-actions { display: flex; align-items: center; gap: 8px; }
.seat-toolbar-controls [data-seat-edit] { margin-left: auto; }
.table-wrap tbody tr:not(.stats-row):hover > td {
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--primary) 65%, transparent),
              inset 0 -2px 0 color-mix(in srgb, var(--primary) 65%, transparent);
}
.table-wrap tbody tr:not(.stats-row):hover > td:first-child {
  box-shadow: inset 4px 0 0 var(--primary),
              inset 0 2px 0 color-mix(in srgb, var(--primary) 65%, transparent),
              inset 0 -2px 0 color-mix(in srgb, var(--primary) 65%, transparent);
}

.sticky-col {
  position: sticky; left: 0; background: var(--card); text-align: left;
  font-weight: 500; z-index: 5; min-width: 170px; border-right: 1px solid var(--border);
  text-transform: none; letter-spacing: 0;
}
th.sticky-col { background: var(--surface); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
tbody tr:hover .sticky-col { background: var(--hover); }

.col-title { max-width: 120px; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--text); }
.col-meta { font-size: 10.5px; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 1px; }
.col-actions { font-size: 11px; margin-top: 3px; }
.col-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: 0 2px; padding: 0;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer; opacity: 0;
}
.col-action-btn .app-icon { width: 14px; height: 14px; }
th:hover .col-action-btn,
th:focus-within .col-action-btn,
.col-action-btn:focus-visible { opacity: .82; }
.col-action-btn:hover { opacity: 1; color: var(--primary-dark); border-color: var(--border); background: var(--card); }
.col-action-btn.danger:hover { color: #dc2626; border-color: #dc2626; }

th.col-schriftlich, td.col-schriftlich { background: var(--written); }
th.col-muendlich, td.col-muendlich { background: var(--oral); }
.avg-col { background: var(--surface); font-size: 13px; }
.final-col {
  position: sticky;
  right: 0;
  z-index: 4;
  background: var(--final);
  box-shadow: -1px 0 0 var(--border);
}
th.final-col { z-index: 7; }
tbody tr:hover .final-col { background: var(--hover); background: color-mix(in srgb, var(--final) 78%, var(--hover)); }
th.oral-total, td.oral-total { background: var(--oral-strong); }

.grade-input {
  width: 54px; padding: 5px 4px; text-align: center; border: 1px solid transparent;
  border-radius: 8px; font-size: 14px; background: transparent; font-family: inherit;
  color: var(--text); transition: border-color .15s, box-shadow .15s, background .15s;
}
.grade-input:hover { border-color: var(--border); background: var(--card); }
.grade-input:focus { border-color: var(--primary); background: var(--card); outline: none; box-shadow: var(--ring); }
.grade-input.invalid { border-color: #dc2626; background: #fef2f2; }
body.dark .grade-input.invalid { background: #331414; }
td.col-muendlich .grade-input:disabled { background: transparent; }
/* Direkteingabe im Reiter Muendlich: Hier steht das Feld allein in der Zelle,
 * nicht in einem Raster aus Dutzenden. Ohne sichtbaren Rahmen war es weiss auf
 * weiss -- man sah nicht, dass man dort tippen kann. Die Regel braucht beide
 * Klassen, weil .grade-input weiter unten steht und sonst gewinnt. */
.grade-input.oral-direct-input {
  border-color: var(--border);
  background: var(--surface);
}
.grade-input.oral-direct-input:hover { border-color: var(--primary); }

.quota { font-size: 10.5px; color: var(--muted); }
.cell-flags { font-size: 10.5px; line-height: 1.1; }
.cell-flags a { text-decoration: none; opacity: .4; margin-left: 3px; }
.cell-flags a:hover { opacity: 1; }
.oral-cell .oral-grade { font-weight: 600; }

.stats-row td { background: var(--surface) !important; font-size: 12.5px; color: var(--muted); }
.stats-row .sticky-col { font-weight: 600; }

.check-cell { font-size: 15px; min-width: 62px; height: 38px; user-select: none; }
.check-cell:hover { background: var(--surface-2) !important; }
.cell-state-button {
  width: 100%; min-width: 42px; min-height: 32px; padding: 4px 8px;
  border: 0; border-radius: 8px; background: transparent; color: var(--text);
  font: inherit; font-weight: inherit; cursor: pointer;
}
.cell-state-button:hover { background: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }

.modal-label input.invalid { border-color: #dc2626; background: #fef2f2; }
body.dark .modal-label input.invalid { background: #331414; }

/* ---------- Avatare ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-weight: 700; flex-shrink: 0;
  object-fit: cover; box-shadow: var(--shadow-sm); user-select: none;
}
img.avatar { object-fit: cover; }
.student-row { display: flex; align-items: center; gap: 12px; }
.avatar-action {
  display: inline-flex; flex: 0 0 auto; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
}
.photo-row { display: flex; justify-content: center; margin-bottom: 14px; }

/* ---------- Schüler-Tab ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.two-col h3 { margin-bottom: 12px; font-size: 16px; }
.student-table {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; width: 100%; box-shadow: var(--shadow-sm);
}
.student-table td { text-align: left; padding: 9px 14px; }
.student-list-layout { display: grid; gap: 18px; }
.student-import-panel {
  max-width: 760px;
  padding: 18px;
  border-radius: 14px;
}
.student-import-panel h3 { margin-bottom: 6px; }
.student-mail { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.row-actions { text-align: right; white-space: nowrap; }
.row-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-left: 3px; padding: 0;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  color: var(--muted); opacity: .62; cursor: pointer;
}
.row-action-btn .app-icon { width: 15px; height: 15px; }
.row-action-btn:hover { opacity: 1; color: var(--primary-dark); border-color: var(--border); background: var(--surface-2); }
.row-action-btn.danger:hover { color: #dc2626; border-color: #dc2626; }
.class-photo {
  width: 46px; height: 46px; border-radius: 13px; object-fit: cover;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); background: var(--surface);
}
.class-photo.big {
  width: min(100%, 260px); height: 150px; border-radius: 16px;
}
.class-icon.big {
  width: min(100%, 260px); height: 150px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff; font-size: 30px; font-weight: 800;
  box-shadow: var(--shadow-sm);
}

textarea {
  width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 12px;
  font-size: 14px; font-family: inherit; margin-bottom: 10px; resize: vertical;
  background: var(--surface); color: var(--text); transition: border-color .15s, box-shadow .15s;
}
textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }

.note-preview {
  font-size: 12px; color: var(--muted); margin-top: 3px; cursor: pointer;
  white-space: normal; max-width: 420px;
}
.note-editor-row td { background: var(--surface); }
.note-editor-row textarea { margin-bottom: 0; }
.note-editor-row .btn-row { margin-top: 8px; }

/* ---------- Sitzplan ---------- */
.seat-layout { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.seat-layout label { font-size: 12.5px; color: var(--muted); }
.seat-layout input {
  width: 54px; padding: 6px 7px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text);
}

.unseated {
  background: var(--card); border: 1px dashed var(--border); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.chip {
  background: var(--surface-2); border-radius: 99px; padding: 5px 14px; font-size: 13px;
  cursor: pointer; border: 2px solid transparent; user-select: none; font-weight: 500;
  transition: filter .12s, border-color .12s;
}
.chip:hover { filter: brightness(.96); }
body.dark .chip:hover { filter: brightness(1.2); }
.chip.selected { border-color: var(--primary); }
.unseated .seat-name-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  max-width: 100%;
  padding: 8px 15px 8px 34px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    radial-gradient(circle, var(--muted) 1.2px, transparent 1.4px) 12px 12px / 6px 6px no-repeat,
    radial-gradient(circle, var(--muted) 1.2px, transparent 1.4px) 18px 12px / 6px 6px no-repeat,
    radial-gradient(circle, var(--muted) 1.2px, transparent 1.4px) 12px 18px / 6px 6px no-repeat,
    radial-gradient(circle, var(--muted) 1.2px, transparent 1.4px) 18px 18px / 6px 6px no-repeat,
    var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}
.unseated button.seat-name-chip:active { transform: scale(.98); }
.unseated .seat-name-chip.selected {
  border-color: var(--primary);
  background-color: var(--surface-2);
  box-shadow: var(--ring);
}

.seat-grid { display: grid; gap: 10px; }
.seat-grid-board {
  position: relative;
  padding: 12px; border-radius: 18px; border: 1px solid var(--border);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  box-shadow: var(--shadow-sm);
}
.seat-free-board {
  position: relative; min-height: 620px; border: 1px solid var(--border);
  border-radius: 18px; background-color: var(--surface); background-size: cover;
  background-position: center; background-repeat: no-repeat; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.seat-free-board::after {
  content: ""; position: absolute; inset: 10px; border: 1px dashed var(--border);
  border-radius: 14px; pointer-events: none;
}
.free-seat {
  position: absolute; width: 156px; z-index: 2; touch-action: none;
  transform: translate(-12%, -12%);
}
.free-seat:active { cursor: grabbing; }
.seat-bg-preview {
  width: 100%; max-height: 240px; border-radius: 16px; object-fit: cover;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
body.dark .seat-grid-board,
body.dark .seat-free-board {
  background-color: var(--surface);
}
.seat {
  background: var(--card); border: 1.5px solid var(--border); border-radius: 13px;
  min-height: 86px; padding: 7px 6px 5px; cursor: pointer;
  position: relative; user-select: none; box-shadow: var(--shadow-sm);
  transition: border-color .12s, transform .12s, box-shadow .12s, opacity .2s;
}
.seat.layout-seat { min-height: 58px; padding: 9px 8px; }
.seat:hover { border-color: var(--primary); transform: translateY(-1px); }
.seat.selected { border-color: var(--primary); background: var(--surface-2); }
.seat.free-seat {
  position: absolute;
  width: 156px;
  z-index: 2;
  touch-action: none;
  transform: translate(-50%, -50%) scale(var(--seat-card-scale, 1));
  transform-origin: center;
  cursor: grab;
}
.seat.free-seat:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}
.seat.free-seat:active {
  cursor: grabbing;
}
.seat-room-marker {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  max-width: min(230px, 48%);
  padding: 9px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 52%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 15%, var(--card));
  color: var(--primary-dark);
  box-shadow: var(--shadow-sm);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translate(-50%, -50%);
  touch-action: none;
  cursor: grab;
}
.seat-room-marker:active { cursor: grabbing; }
.seat-room-marker svg { width: 17px; height: 17px; flex: 0 0 auto; }
.seat-card-scale-control,
.seat-bg-overlay-control,
.seat-marker-control { display: grid; gap: 7px; }
.seat-card-scale-control > span,
.seat-bg-overlay-control > span { display: flex; justify-content: space-between; gap: 12px; }
.seat-card-scale-control output,
.seat-bg-overlay-control output { color: var(--primary); font-weight: 700; }
.seat-card-scale-control small,
.seat-bg-overlay-control small,
.seat-panel-hint { color: var(--muted); line-height: 1.4; }
.seat-marker-control > span {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.seat-marker-control input[type="text"] {
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.35;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.seat-marker-control input[type="text"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}
body.dark .seat-marker-control input[type="text"] {
  background: var(--surface) !important;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  border-color: var(--border);
  box-shadow: 0 0 0 1000px var(--surface) inset;
}
body.dark .seat-marker-control input[type="text"]:focus {
  box-shadow: var(--ring), 0 0 0 1000px var(--surface) inset;
}
.seat.empty {
  background: transparent; border-style: dashed; display: flex;
  align-items: center; justify-content: center; color: var(--border); font-size: 20px;
  box-shadow: none; min-height: 86px;
}
.seat.empty:hover { border-color: var(--primary); color: var(--primary); }
.seat.absent { opacity: .5; border-style: dashed; }
.seat-top { display: flex; align-items: center; gap: 7px; text-align: left; }
.seat-names { min-width: 0; }
.seat-name { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-first { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-tally { display: grid; gap: 2px; margin-top: 5px; }
.seat-tally-label {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .03em;
  text-align: center;
}
.seat-tally-controls { display: flex; justify-content: space-between; align-items: center; }
.seat-tally button {
  border: none; background: var(--surface-2); border-radius: 7px; cursor: pointer;
  color: var(--text); font-size: 11px; padding: 3px 7px; transition: filter .12s;
}
.seat-tally button:hover { filter: brightness(.94); }
body.dark .seat-tally button:hover { filter: brightness(1.25); }
.seat-tally output { min-width: 34px; text-align: center; font-size: 11.5px; font-weight: 750; color: var(--primary-dark); }
.seat-unassign { position: absolute; top: 2px; right: 4px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; cursor: pointer; font-size: 10px; color: var(--muted); opacity: .6; }
.seat-unassign:hover { color: #dc2626; opacity: 1; }
.seat-actions2 {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 4px; padding: 0 2px;
}
.seat-actions2 button {
  display: inline-flex; align-items: center; gap: 3px; min-width: 30px; min-height: 28px;
  padding: 3px 6px; border: 0; border-radius: 7px; background: transparent;
  color: var(--text); font-size: 11.5px; opacity: .78; cursor: pointer;
}
.seat-actions2 button:hover { opacity: 1; background: var(--surface-2); }
.seat-actions2 .app-icon { width: 14px; height: 14px; }
.oral-seat-board { min-width: 0; }

/* HA-Sitzplanmodus */
.seat.ha-seat { text-align: center; }
.seat.ha-seat .seat-name, .seat.ha-seat .seat-first { white-space: nowrap; }
.ha-status { font-size: 22px; margin-top: 6px; min-height: 28px; }

/* ---------- Archiv & Sicherung ---------- */
.archive-heading { font-size: 17px; margin: 28px 0 14px; color: var(--muted); }
.archive-check {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--muted); margin-top: 14px; cursor: pointer;
}
.archive-check input { accent-color: var(--primary); width: 16px; height: 16px; }
.modal code { background: var(--surface-2); border-radius: 5px; padding: 1px 5px; font-size: 12px; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 10px; margin-top: 10px; }
.theme-choice {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--card);
  color: var(--text); cursor: pointer; font-weight: 600; text-align: left;
}
.theme-choice.active { border-color: var(--primary); box-shadow: var(--ring); }
.theme-dot { width: 24px; height: 24px; border-radius: 999px; background: var(--grad); }
.theme-section-title { margin-top: 14px; margin-bottom: 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.surface-dot { border: 1px solid var(--border); }
.surface-choice-dim { opacity: .55; }
.theme-indigo { background: linear-gradient(135deg,#6366f1,#8b5cf6); }
.theme-emerald { background: linear-gradient(135deg,#10b981,#14b8a6); }
.theme-rose { background: linear-gradient(135deg,#f43f5e,#ec4899); }
.theme-amber { background: linear-gradient(135deg,#f59e0b,#ef4444); }
.theme-cyan { background: linear-gradient(135deg,#06b6d4,#3b82f6); }
.theme-slate { background: linear-gradient(135deg,#475569,#94a3b8); }
.theme-grape { background: linear-gradient(135deg,#a855f7,#6366f1); }
.theme-lime { background: linear-gradient(135deg,#84cc16,#22c55e); }
.theme-coral { background: linear-gradient(135deg,#fb7185,#f97316); }
.theme-mono { background: linear-gradient(135deg,#111827,#6b7280); }

/* ---------- Mehrfachauswahl ---------- */
.bulk-bar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 14px;
}
.sel-box { width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; }

/* ---------- Gruppen ---------- */
.group-box {
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px; display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap; font-size: 13px;
}
.group-box strong { margin-right: 4px; }
#groups-result { max-height: 320px; overflow-y: auto; margin-top: 4px; }

/* ---------- Schüler-Einzelansicht ---------- */
.student-link { color: inherit; text-decoration: none; }
.student-link:hover { color: var(--primary-dark); text-decoration: underline; }
body.dark .student-link {
  color: #f8fafc;
  font-weight: 650;
}
body.dark .student-link:hover {
  color: var(--primary-dark);
}

.student-head h2 { font-size: 20px; letter-spacing: -.02em; margin-bottom: 4px; }

.tile-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.tile {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.tile.accent { background: var(--grad); border: none; }
.tile.accent .tile-label, .tile.accent .tile-value { color: #fff; }
.tile-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 5px; }
.tile-value { font-size: 17px; font-weight: 700; }

.explain-btn {
  margin-left: 6px; width: 22px; height: 22px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--primary-dark); font-weight: 800; cursor: pointer;
}
.explain-btn:hover { border-color: var(--primary); box-shadow: var(--ring); }
.explain-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 10px 0 16px;
}
.explain-tile {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  background: var(--surface);
}
.explain-tile.accent { background: var(--grad); border-color: transparent; color: #fff; }
.explain-tile span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.explain-tile.accent span { color: rgba(255,255,255,.78); }
.explain-tile strong { display: block; margin-top: 5px; font-size: 18px; }
.explain-section {
  border-top: 1px solid var(--border-soft); padding-top: 12px; margin-top: 12px;
}
.explain-section h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }

.detail-table { width: 100%; }
.detail-table th, .detail-table td { text-align: left; padding: 7px 10px; }
.detail-table td.wrap { white-space: normal; max-width: 380px; }
.edit-note-link {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 3px 6px;
  border: 0; border-radius: 7px; background: transparent; color: var(--primary-dark);
  font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.edit-note-link:hover { background: var(--surface-2); }
.edit-note-link .app-icon { width: 14px; height: 14px; }
.card p.wrap { white-space: pre-wrap; }

/* ---------- Kursbuch ---------- */
.lesson-card { padding: 16px 20px; margin-bottom: 12px; }
.lesson-head { display: flex; align-items: center; gap: 12px; }
.lesson-date {
  background: var(--surface-2); color: var(--primary-dark); font-weight: 600; font-size: 12.5px;
  border-radius: 8px; padding: 4px 10px; white-space: nowrap;
}
.lesson-topic { flex: 1; font-size: 15px; }
.lesson-actions { display: inline-flex; align-items: center; gap: 6px; }
.lesson-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 1px solid var(--border);
  border-radius: 9px; background: var(--surface); color: var(--text);
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.lesson-action:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--hover); }
.lesson-action.danger:hover { border-color: #dc2626; color: #dc2626; }
.lesson-action .app-icon { width: 16px; height: 16px; }
.lesson-notes { margin-top: 8px; font-size: 13.5px; color: var(--muted); white-space: pre-wrap; }
.lesson-hw { margin-top: 6px; font-size: 13px; color: var(--primary-dark); font-weight: 500; }
.template-picks {
  display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px;
}
.lesson-action-ha { width: auto; min-width: 32px; padding: 0 7px; font-size: 11px; font-weight: 800; }
body.dark .lesson-action { color: #f8fafc; background: var(--surface-2); }

/* ---------- Sicherheit ---------- */
.security-list { display: grid; gap: 10px; }
.security-item {
  border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px;
  background: var(--surface); display: flex; flex-direction: column; gap: 3px;
}
.security-item strong { font-size: 14px; }
.security-item span { color: var(--muted); font-size: 13px; }
.security-item.ok { border-color: var(--border); border-color: color-mix(in srgb, #22c55e 42%, var(--border)); }
.security-item.warn { border-color: var(--border); border-color: color-mix(in srgb, #f59e0b 50%, var(--border)); }

/* ---------- Statistik ---------- */
.trend-svg { width: 100%; max-width: 720px; height: auto; }
body.dark .trend-svg text { fill: #aab2c5; }
.dist-card h3 { margin-bottom: 12px; font-size: 15px; }
.dist-card h3 .muted { font-weight: 400; margin-left: 8px; }
.dist-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.dist-label { width: 24px; text-align: right; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.dist-bar-bg { flex: 1; background: var(--border-soft); border-radius: 6px; height: 18px; overflow: hidden; }
.dist-bar { background: var(--grad); border-radius: 6px; height: 18px; min-width: 0; transition: width .25s; }
.dist-count { width: 24px; font-size: 12.5px; font-weight: 600; }

/* ---------- Modale Dialoge ---------- */
#modal-overlay {
  position: fixed; inset: 0; background: rgba(10, 12, 20, .5);
  /* KEIN backdrop-filter: auf iOS/WKWebView hinterliess der Blur zusammen mit
   * dem Gradient-Button eine Geisterkopie ("Rechteck ueber dem Button"), die
   * erst nach einem Relayout (Geraetedrehung) verschwand. Der dunklere
   * Overlay-Ton gleicht den fehlenden Blur optisch aus. */
  display: flex; align-items: center; justify-content: center; z-index: 100;
  overscroll-behavior: contain;
}
/* Hintergrund einfrieren, solange ein Modal offen ist (siehe modal.js).
 * position:fixed haelt den Hintergrund auch auf iOS wirklich still; das top
 * wird per JS auf die gemerkte Scrollposition gesetzt. */
body.modal-open {
  position: fixed;
  left: 0; right: 0; width: 100%;
  overflow: hidden;
}
.modal {
  background: var(--card); border-radius: 20px; padding: 26px;
  width: 410px; max-width: 92vw; max-height: 88vh; overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 20px 60px -12px rgba(0, 0, 0, .45);
  animation: modal-in .16s ease-out; border: 1px solid var(--border);
}
.modal.wide { width: min(980px, 94vw); }
.modal.class-settings-modal { width: min(1040px, 95vw); }
.class-settings-modal #class-form {
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  animation: none;
}
.class-password-settings {
  margin-top: 18px;
  padding: 15px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface);
}
.class-password-toggle { align-items: flex-start; margin: 0; }
.class-password-toggle > span { display: grid; gap: 3px; }
.class-password-toggle small { color: var(--muted); font-weight: 500; }
.class-password-settings .form-grid { margin-top: 14px; }
.class-password-settings .field-hint { display: block; margin-top: 9px; }
/* Reines Opacity-Fade (kein transform): auf iOS/WKWebView hinterliess die
 * transform-Animation zusammen mit dem Gradient-Button eine Geisterkopie
 * ("Rechteck ueber dem Button"). Ohne Transform kein verwaister Compositing-
 * Layer, also kein Geist. */
@keyframes modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal h3 { margin-bottom: 16px; font-size: 16.5px; letter-spacing: -.01em; }
/* Deckungsgleich mit dem nativen iOS-Ladebild (_loading_view im iOS-Wrapper):
 * gleicher heller Grund, dieselbe Teal-Marke, Titel + Tagline + Hinweis. So
 * flackern die drei Startgrafiken (LaunchScreen -> nativ -> Web) nicht mehr
 * sichtbar auseinander. */
.app-loading {
  position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; background: #f5f7fa;
  color: #0f172a; transition: opacity .22s ease, visibility .22s ease;
}
.app-loading.done { opacity: 0; visibility: hidden; }
.app-loading-logo { width: 220px; height: 220px; }
.app-loading strong { margin-top: 14px; font-size: 26px; letter-spacing: -.03em; color: var(--brand-teal); }
.app-loading span { color: #334155; font-size: 15px; }
.app-loading-hint { margin-top: 10px; color: #94a3b8; font-size: 13px; }
.modal-text { margin-bottom: 4px; font-size: 14.5px; }
.modal-label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 500; margin-bottom: 13px; }
.modal-label input, .modal-label select {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 14px; color: var(--text); background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.modal-label input:focus, .modal-label select:focus, .modal-label textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: var(--ring);
}
.modal-label textarea { margin-bottom: 0; }
.modal .btn-row { margin-top: 16px; }
.settings-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 18px;
}
.settings-head h3 { margin-bottom: 4px; }
.settings-pill {
  flex-shrink: 0; padding: 5px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--primary-dark);
  font-size: 12px; font-weight: 700;
}
.settings-grid {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px;
  align-items: start;
}
.settings-tabs {
  position: sticky;
  top: 0;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}
.settings-tabs button {
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text);
  padding: 10px 11px;
  min-height: 40px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}
.settings-tabs button[aria-selected="true"] {
  cursor: default;
}
.settings-tabs button:hover { background: var(--surface-2); }
.settings-tabs button.active {
  background: var(--grad);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.onboarding-steps {
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
.onboarding-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}
.onboarding-progress span {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.onboarding-progress span.active {
  background: var(--card);
  background: color-mix(in srgb, #2dd4bf 22%, var(--card));
  color: #00796b;
  box-shadow: inset 0 0 0 1px #2dd4bf;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #2dd4bf 35%, transparent);
}
.onboarding-progress span.done {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-2));
  color: var(--text);
}
.onboarding-next {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--muted);
}
.onboarding-next strong { color: var(--text); }
.onboarding-steps .settings-section {
  min-height: 150px;
}
.onboarding-steps .settings-section p {
  margin: -4px 0 12px;
  font-size: 13px;
}
.onboarding-steps .settings-section .onboarding-field-note { margin: 12px 0 0; line-height: 1.45; }
.onboarding-backup-label { display: grid; gap: 8px; color: var(--text); font-size: 13px; font-weight: 700; }
.onboarding-backup-label select { max-width: 260px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font: inherit; }
.onboarding-footer { width: 100%; align-items: center; flex-wrap: wrap; row-gap: 10px; }
.onboarding-footer > .btn { flex: 0 0 auto; white-space: nowrap; }
.onboarding-footer-spacer { flex: 1 1 auto; }
/* Nur-Lese-Ausgabe (z. B. Berechnung: derzeit eine feste Methode) – sieht aus
 * wie ein Feld, ist aber keine Auswahl. */
.onboarding-readonly {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2, #f1f5f9); color: var(--muted); font: inherit;
}
/* Pflicht-Markierung: schlichter roter Stern direkt am Label, damit die
 * Feld-Ausrichtung im 2-Spalten-Raster erhalten bleibt (ein Badge in eigener
 * Zeile hatte Name/Schule gegeneinander verschoben). */
.req-star { color: #dc2626; font-weight: 800; margin-left: 2px; }
.whats-new-footer { justify-content: flex-end; }
.settings-section {
  border: 1px solid var(--border); border-radius: 16px;
  padding: 16px; background: var(--card);
}
.settings-section h4 {
  margin-bottom: 12px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
}
.settings-form {
  display: grid; gap: 12px;
}
.settings-form.two { grid-template-columns: 1fr 1fr; }
.settings-form label,
.settings-label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; color: var(--muted); font-weight: 600;
}
.settings-form input,
.settings-form select,
.settings-form textarea,
.settings-label textarea {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); color: var(--text); font: inherit; font-size: 14px;
}
.settings-form textarea,
.settings-label textarea { resize: vertical; margin-bottom: 0; }
.settings-check {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 8px;
  color: var(--text); font-size: 13.5px; cursor: pointer;
}
.settings-check input { width: 16px; height: 16px; accent-color: var(--primary); }
.settings-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.settings-launch-action { margin-top: 14px; }
.settings-intro { margin: -2px 0 14px; line-height: 1.5; }
.ical-example { margin: 10px 0 14px; overflow-wrap: anywhere; }
.template-weight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.quicklinks-settings-info { margin-bottom: 16px; }
.quicklinks-settings-actions { margin-bottom: 14px; }
.settings-tech {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.settings-tech div,
.settings-unsaved-warning {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 12px;
}
.settings-tech span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.settings-tech strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
}
.settings-unsaved-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.settings-unsaved-warning span,
#as-dirty-state.warn { color: var(--warning); }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.settings-footer {
  position: sticky; bottom: -26px; background: var(--card); background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding-top: 14px; border-top: 1px solid var(--border-soft);
}

/* ---------- Suche & Import ---------- */
.quick-search input,
.conference-controls input,
.conference-controls select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); color: var(--text); font: inherit;
}
.quick-results {
  display: grid; gap: 8px; margin-top: 14px; max-height: 58vh; overflow-y: auto;
}
.quick-results button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--card);
  color: var(--text); padding: 11px 13px; cursor: pointer; text-align: left;
}
.quick-results button:hover { border-color: var(--primary); box-shadow: var(--ring); }
.quick-results span { color: var(--muted); font-size: 12.5px; }
.import-center-grid,
.conference-controls {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;
}
.import-summary {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  align-items: stretch; margin: 14px 0 10px; color: var(--muted);
}
.import-summary article {
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  padding: 11px 12px;
}
.import-summary strong { display: block; font-size: 22px; color: var(--primary-dark); line-height: 1; }
.import-summary span { display: block; margin-top: 5px; font-size: 12px; font-weight: 750; }
.import-note {
  margin: 6px 0 12px;
  padding: 9px 11px;
  border-radius: 12px;
  background: var(--card);
  background: color-mix(in srgb, #2dd4bf 13%, var(--card));
  color: var(--text);
  font-size: 13px;
}
.import-preview-list { display: grid; gap: 6px; max-height: 280px; overflow-y: auto; }
.import-preview-list div {
  display: flex; justify-content: space-between; gap: 10px;
  border: 1px solid var(--border-soft); border-radius: 10px; padding: 8px 10px;
}
.import-preview-list div.duplicate {
  opacity: .68;
  background: var(--surface-2);
}
.import-preview-list span { color: var(--muted); font-size: 12.5px; }

/* ---------- Druck ---------- */
@media print {
  header, .app-sidebar, #sidebar-backdrop, .readonly-banner,
  .tabs, .tab-toolbar, .toolbar button, .col-actions, .row-actions,
  #class-form, .period-bar { display: none !important; }
  #view-main, .app-main { display: block !important; min-height: 0; }
  body, body.dark {
    background: #fff;
    --bg: #fff; --card: #fff; --text: #111; --muted: #666;
    --border: #ddd; --border-soft: #eee; --surface: #fff; --surface-2: #fff;
    --written: #fff; --oral: #fff; --oral-strong: #fff; --final: #fff; --hover: #fff;
  }
  body.privacy * { filter: none !important; }
  #view-classes, #view-class { padding: 0; max-width: none; }
  .table-wrap, .card, .tile { border: 1px solid #ddd; overflow: visible; box-shadow: none; animation: none; }
  th, td { font-size: 11px; padding: 3px 5px; }
  .grade-input { border: none; }
}

@media (max-width: 800px) {
  .two-col, .form-grid, .dashboard-grid { grid-template-columns: 1fr; }
  .two-col, .two-col > *, .card { min-width: 0; max-width: 100%; }
  .student-table { display: block; width: 100%; overflow-x: auto; }
  .student-table tbody { display: table; min-width: 430px; width: 100%; }
  .seat-grid-board { overflow-x: auto; max-width: 100%; }
  .dash-hero { flex-direction: column; align-items: flex-start; }
  .settings-grid, .onboarding-steps, .settings-form.two { grid-template-columns: 1fr; }
  .onboarding-progress { grid-template-columns: 1fr 1fr; }
  .onboarding-next { align-items: flex-start; flex-direction: column; }
  .import-summary { grid-template-columns: 1fr 1fr; }
  .settings-head { flex-direction: column; }
  #view-dashboard, #view-classes, #view-class { padding: 14px; }
  header { padding: 11px 14px; }
  .detail-workbar,
  .grade-workbar {
    align-items: stretch;
  }
  .detail-rule,
  .grade-rule {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .detail-rule span,
  .grade-rule span {
    white-space: normal;
  }
  .detail-workbar-actions,
  .grade-workbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .tab-toolbar.oral-workbar { grid-template-columns: minmax(0, 1fr); }
  .oral-term-selector { align-items: stretch; flex-direction: column; gap: 5px; }
  .oral-term-selector select { width: 100%; min-width: 0; }
  .conference-viewbar { align-items: flex-start; flex-direction: column; }
  .conference-viewbar > span { text-align: left; }
  .seat-free-board { min-height: 520px; }
  .free-seat { width: 132px; }
  .seat.free-seat { width: 132px; }
}

@media (pointer: coarse) {
  .seat-layout {
    width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .seat-layout .btn,
  .seat-layout .segmented button,
  .seat-tally button,
  .seat-actions2 a {
    min-height: 38px;
  }
  .seat {
    min-height: 96px; padding: 9px 8px 7px;
  }
  .seat-name { font-size: 13.5px; }
  .seat-first { font-size: 12px; }
  .seat-tally button { padding: 6px 10px; }
  .seat-actions2 a {
    display: inline-flex; align-items: center; padding: 4px 6px;
  }
  .seat.free-seat {
    width: 148px;
  }
  .seat-free-board {
    min-height: 64vh;
  }
}

/* ---------- Noturio v28: Produkt-Politur ---------- */
.class-overview-head.modern,
.class-filterbar.modern,
.class-card,
.modal,
.settings-section {
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}

.class-overview-actions .btn,
.class-filterbar .btn,
.class-filterbar select,
.compact-toggle,
.grade-filter {
  min-height: 42px;
}

.class-search-wrap {
  flex: 1 1 280px;
  min-width: min(100%, 260px);
}

.class-search-wrap input {
  width: 100%;
}

.class-card {
  overflow: hidden;
  min-height: 264px;
}

.class-card.compact {
  min-height: 0;
}

.class-card h3,
.class-card p,
.class-next span,
.quick-class-list span,
.today-event span {
  overflow-wrap: anywhere;
}

.class-card-top,
.class-metrics,
.class-next {
  min-width: 0;
}

.class-next {
  gap: 8px;
  line-height: 1.35;
}

.class-next span {
  min-width: 0;
}

.settings-form select,
.settings-form input,
.settings-form textarea,
.modal-label input,
.modal-label select,
.modal-label textarea,
.quick-search input {
  min-height: 40px;
}

body.dark .side-link span,
body.dark .app-icon,
body.dark .icon-btn,
body.dark .class-next .app-icon {
  color: #f8fafc;
}

body.dark .class-card p,
body.dark .class-metric span,
body.dark .class-next span,
body.dark .settings-form label,
body.dark .settings-label,
body.dark .modal-label {
  color: #dbe4f0;
}

body.dark .class-card h3,
body.dark .class-metric b,
body.dark .settings-check,
body.dark .quick-results strong {
  color: #ffffff;
}

body.dark .subject-chip,
body.dark .class-status-chip,
body.dark .status-pill,
body.dark .settings-pill {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

body.dark .subject-chip { background: #172554; color: #bfdbfe; }
body.dark .subject-chip.c1 { background: #134e4a; color: #ccfbf1; }
body.dark .subject-chip.c2 { background: #14532d; color: #dcfce7; }
body.dark .subject-chip.c3 { background: #713f12; color: #fef3c7; }
body.dark .subject-chip.c4 { background: #831843; color: #fce7f3; }
body.dark .subject-chip.c5 { background: #4c1d95; color: #ede9fe; }
body.dark .class-status-chip { background: #14532d; color: #dcfce7; }
body.dark .class-status-chip.warn { background: #7c2d12; color: #ffedd5; }
body.dark .class-status-chip.neutral { background: #334155; color: #f8fafc; }
body.dark .status-pill { color: #dcfce7; }
body.dark .settings-pill { background: #293548; color: #f8fafc; }

body.dark .class-status-chip:not(.warn):not(.neutral),
body.dark .status-pill {
  background: #14532d;
}

@media (max-width: 760px) {
  .btn,
  .side-link,
  .tab,
  .settings-tabs button,
  .segmented button,
  .pbtn,
  .icon-btn {
    min-height: 44px;
  }

  header {
    gap: 8px;
  }

  .class-overview-actions,
  .class-filterbar.modern {
    display: grid;
    grid-template-columns: 1fr;
  }

  .class-overview-actions > *,
  .class-filterbar.modern > *,
  .class-filterbar select,
  .compact-toggle,
  .grade-filter {
    width: 100%;
  }
  .seat-toolbar-controls {
    align-items: stretch;
    flex-wrap: wrap;
  }
  .seat-control-group { width: 100%; }
  .seat-control-group .segmented { display: grid; grid-template-columns: repeat(3, 1fr); }
  .seat-quick-actions { flex: 1 1 auto; }
  .seat-toolbar-controls [data-seat-edit] { margin-left: 0; }

  .class-filter-main {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .segmented.compact-toggle,
  .segmented.grade-filter {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .settings-grid,
  .settings-form.two,
  .import-center-grid,
  .conference-controls {
    grid-template-columns: 1fr;
  }

  .settings-tabs {
    position: static;
    display: flex;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .settings-tabs button {
    white-space: nowrap;
    text-align: center;
  }

  .modal {
    padding: 20px;
    max-height: 92vh;
  }

  .settings-footer {
    bottom: -20px;
  }
}

/* =========================================================================
 * Sprint 1 - core/ui.js Komponenten (Toast, Disclosure, ActionMenu,
 * Stepper, EmptyState). Nutzt Design-Tokens; keine hartkodierten Marken-
 * Farben ausser den semantischen Statuswerten. Reduced-Motion beachtet.
 * ========================================================================= */

/* Toast */
.ui-toast-region {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.ui-toast {
  pointer-events: auto;
  padding: 12px 15px;
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-slate);
  box-shadow: var(--shadow-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  animation: ui-toast-in 160ms ease-out;
}
.ui-toast-success { border-left-color: #16a34a; }
.ui-toast-error { border-left-color: #dc2626; }
.ui-toast-info { border-left-color: var(--brand-teal); }
.ui-toast-out { opacity: 0; transform: translateY(6px); transition: opacity 200ms, transform 200ms; }
@keyframes ui-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Disclosure */
.ui-disclosure { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ui-disclosure-head {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 10px 14px;
  background: var(--surface); color: var(--text);
  border: 0; font-size: 14px; font-weight: 650; text-align: left; cursor: pointer;
}
.ui-disclosure-head:hover { background: var(--hover); }
.ui-disclosure-caret {
  width: 8px; height: 8px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: rotate(-45deg);
  transition: transform 140ms ease;
}
.ui-disclosure-head[aria-expanded="true"] .ui-disclosure-caret { transform: rotate(45deg); }
.ui-disclosure-panel { padding: 14px; }

/* ActionMenu */
.ui-action-menu { position: relative; display: inline-block; }
.ui-action-dots { font-size: 18px; line-height: 1; }
.ui-action-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 190px; padding: 6px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 2px;
}
/* display:flex wuerde das hidden-Attribut aushebeln -> geschlossenes Menue
 * explizit ausblenden (hoehere Spezifitaet als die Basisregel). */
.ui-action-list[hidden] { display: none; }
.ui-action-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 40px; padding: 8px 10px;
  background: none; border: 0; border-radius: 8px;
  color: var(--text); font-size: 14px; text-align: left; cursor: pointer;
}
.ui-action-item:hover, .ui-action-item:focus-visible { background: var(--surface-2); }
.ui-action-item.danger { color: #dc2626; }

/* Stepper */
.ui-stepper { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ui-step { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.ui-step-num {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--surface-2); color: var(--muted);
  font-size: 13px; font-weight: 700;
}
.ui-step-current { color: var(--text); }
.ui-step-current .ui-step-num { background: var(--primary); color: #fff; }
.ui-step-done .ui-step-num { background: #16a34a; color: #fff; }

/* EmptyState */
.ui-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 32px 18px; color: var(--muted);
}
.ui-empty-icon { font-size: 30px; opacity: .8; }
.ui-empty-title { font-size: 17px; color: var(--text); }
.ui-empty-text { max-width: 36ch; font-size: 14px; }

/* Sprint 20: Settings-Entruempelung, Lizenzkarte und Alltagspolish */
.settings-grid-clean {
  align-items: start;
}

.settings-grid-clean .settings-section {
  margin-bottom: 14px;
}

.settings-grid-clean .settings-section:not(.hidden) + .settings-section:not(.hidden) {
  border-top: 1px solid var(--border-soft);
  padding-top: 18px;
}

.settings-grid-clean .settings-tabs {
  gap: 4px;
  /* Wieder auf den urspruenglichen Wert: Das Problem mit dem Reiter
     "E-Mail-Versand" war die Hoehe der EINTRAEGE (42px), nicht die Grenze der
     Spalte. Mit 38px je Eintrag passt alles; die Grenze zusaetzlich zu senken
     war ueberfluessig und liess die Spalte unnoetig frueh abschneiden. */
  max-height: min(72vh, 720px);
  overflow-y: auto;
  scrollbar-width: thin;
}

@media (max-width: 760px) {
  .table-wrap tbody tr:not(.stats-row),
  .table-wrap tbody tr:not(.stats-row) > td { height: 52px !important; }
}

.settings-grid-clean .settings-tabs button {
  justify-content: flex-start;
  /* 38 statt 42px: Mit dem Reiter "E-Mail-Versand" wurde die Spalte so hoch,
     dass ihr unterster Eintrag ausserhalb des Fensters lag. Die Spalte hat
     einen eigenen Scrollbereich, den man getrennt bedienen muesste - das
     findet niemand. Vier Pixel weniger je Eintrag holen ueber fuenfzehn
     Eintraege genug herein, ohne die Trefferflaeche unter die uebliche
     Mindestgroesse zu druecken. */
  min-height: 38px;
}

.settings-tab-label {
  padding: 10px 10px 3px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.settings-tab-label:first-child { padding-top: 3px; }

.license-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}

.license-card.active {
  border-color: var(--border);
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
  background: var(--surface);
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
}

.license-card.trial {
  border-color: var(--border);
  border-color: color-mix(in srgb, var(--warning) 35%, var(--border));
  background: var(--surface);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}

.license-card-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 10px;
}

.license-card h5 {
  margin: 8px 0 0;
  font-size: 17px;
}

.license-card p {
  margin: 8px 0 0;
  color: var(--text);
}

.license-usage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.license-usage div {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface);
}

.license-usage span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.license-usage strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}

.settings-pill.ok {
  background: var(--surface);
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
  color: var(--success);
}

.settings-pill.warn {
  background: var(--surface);
  background: color-mix(in srgb, var(--warning) 15%, var(--surface));
  color: var(--warning);
}

.tab-empty {
  margin: 18px 0;
  border: 1px dashed var(--border);
  background: var(--surface-2);
}

.class-card {
  cursor: pointer;
  overflow: visible;
}

.class-card:focus-within {
  z-index: 20;
  outline: 3px solid var(--primary);
  outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);
  outline-offset: 2px;
}

.class-metric span {
  white-space: nowrap;
}

body.dark .license-card,
body.dark .license-usage div,
body.dark .tab-empty {
  background: var(--surface);
}

@media (prefers-reduced-motion: reduce) {
  .ui-toast, .ui-toast-out, .ui-disclosure-caret { animation: none !important; transition: none !important; }
}

/* ===================================================================== */
/* Sprint 4 (Handoff): Demo, Onboarding-Auswahl, Tour, Hilfe             */
/* Neue Regeln bewusst ans Kaskadenende; [hidden]/.hidden-Gegenregeln    */
/* explizit gesetzt, damit display-Basisregeln nichts ueberschreiben.    */
/* ===================================================================== */

/* Demo-Badge (Teal aus Tokens = Marke/sicher) */
.demo-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--brand-teal); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.chip-row { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-card.demo-explore .demo-badge { align-self: center; }

/* Onboarding-Auswahl: eine primaere Aktion, Demo sekundaer, "Spaeter" als Text */
.onboarding-choice { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 4px; }
.onboarding-choice button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-align: left; padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  cursor: pointer; transition: border-color .15s, transform .15s;
}
.onboarding-choice button:hover { transform: translateY(-1px); }
.onboarding-choice button strong { font-size: 15.5px; }
.onboarding-choice button span { font-size: 13px; color: var(--muted); }
.onboarding-choice .choice-primary { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.onboarding-choice .choice-secondary { border-style: dashed; }

/* Hilfe-Modal */
.help-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
.help-topics { display: flex; flex-direction: column; gap: 8px; }
.help-topic-text { margin: 6px 2px 2px; font-size: 13.5px; color: var(--muted); }

/* Gefuehrte Tour: Overlay + Spotlight + Karte */
.tour-overlay { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.tour-overlay.hidden { display: none; }
/* Immer erreichbarer Ausstieg, fest oben rechts - unabhaengig davon, wo die
 * Tour-Karte gerade sitzt. Verhindert das Feststecken (Owner-Befund). */
.tour-exit {
  position: fixed; top: 14px; right: 14px; z-index: 902; pointer-events: auto;
  width: 40px; height: 40px; border-radius: 999px; border: 0;
  background: rgba(15, 23, 42, .82); color: #fff; font-size: 17px; line-height: 1;
  cursor: pointer; box-shadow: 0 6px 18px rgba(15, 23, 42, .35);
  display: flex; align-items: center; justify-content: center;
}
.tour-exit:hover { background: rgba(15, 23, 42, .95); }
.tour-spotlight {
  position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 4px var(--primary), 0 0 0 9999px rgba(15, 23, 42, .38);
  transition: top .18s, left .18s, width .18s, height .18s;
}
.tour-card {
  position: fixed; z-index: 901; pointer-events: auto;
  width: min(340px, calc(100vw - 24px));
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .28);
  padding: 16px 18px;
}
.tour-card.centered { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tour-progress { font-size: 12px; font-weight: 700; color: var(--primary); letter-spacing: .03em; }
.tour-card h3 { margin: 6px 0 4px; font-size: 16.5px; }
.tour-card p { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-actions .primary { margin-left: auto; }
.tour-skip { background: none; border: 0; color: var(--muted); font-size: 13px; cursor: pointer; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .tour-spotlight { transition: none !important; }
  .onboarding-choice button { transition: none !important; }
}

/* ===================================================================== */
/* Sprint 5 (Handoff): Unterrichtsmodus und Sitzplan (2026-07-11)         */
/* Sitzplan startet im Unterrichtsmodus (maximale Flaeche); die           */
/* Einrichtungswerkzeuge liegen im Bearbeiten-Panel: Desktop seitlich,    */
/* Tablet/Touch (<1024px) als Bottom-Sheet mit Backdrop. Neue Regeln ans  */
/* Kaskadenende; jede display-Basisregel bekommt eine [hidden]-Gegenregel */
/* (Lektion aus Sprint 2/4), damit das hidden-Attribut immer gewinnt.     */
/* ===================================================================== */

/* Unplatzierte Schueler: Anzahl-Badge in der eingeklappten Disclosure */
.count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
  border-radius: 999px; background: var(--brand-amber, #b45309); color: #fff;
  font-size: 11.5px; font-weight: 800;
}

/* Layout aus Sitzflaeche + Bearbeiten-Panel. Unterrichtsmodus = eine Spalte
   (Sitzflaeche maximal breit). Bearbeiten-Modus = Sitzflaeche + Seitenpanel. */
.seat-edit-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.seat-edit-layout[data-seat-mode="bearbeiten"] { grid-template-columns: minmax(0, 1fr) 320px; }
.seat-board-wrap { min-width: 0; }

/* Bearbeiten-Panel: Desktop-Seitenpanel. display-Basisregel -> [hidden]-Gegenregel. */
.seat-edit-panel {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px;
  box-shadow: var(--shadow-sm);
}
.seat-edit-panel[hidden] { display: none; }
.seat-panel-head { padding: 0 0 14px; }
.seat-panel-title { margin: 0; font-size: 16px; line-height: 1.25; }
.seat-panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.seat-panel-sec {
  display: grid;
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid var(--border-soft);
}
.seat-panel-sec > strong {
  color: var(--muted); font-size: 10.5px; font-weight: 850;
  text-transform: uppercase; letter-spacing: .05em;
}
.seat-panel-copy { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.seat-bg-overlay-control { display: grid; gap: 7px; }
.seat-bg-overlay-control > span { display: flex; justify-content: space-between; gap: 12px; color: var(--text); font-size: 12px; font-weight: 700; }
.seat-bg-overlay-control output { color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.seat-bg-overlay-control input { width: 100%; accent-color: var(--primary); }
.seat-bg-overlay-control small { color: var(--muted); font-size: 11px; }
.seat-panel-segmented { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
.seat-panel-segmented button { width: 100%; }
.seat-number-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.seat-number-grid label { display: grid; gap: 5px; min-width: 0; }
.seat-number-grid label > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.seat-edit-panel input[type="number"] {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px;
}
.seat-edit-panel input[type="number"]:focus {
  outline: none; border-color: var(--primary); background: var(--card); box-shadow: var(--ring);
}
.seat-snap-check {
  display: flex; align-items: flex-start; gap: 8px; color: var(--text);
  font-size: 12px; line-height: 1.35; cursor: pointer;
}
.seat-snap-check input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.seat-panel-wide { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 7px; }
.seat-panel-wide .app-icon { width: 16px; height: 16px; }
.seat-panel-danger { padding-top: 16px; border-top: 1px solid var(--border-soft); }
.seat-panel-danger .btn.danger { margin-left: 0; }

/* Backdrop nur auf Touch/Tablet sichtbar. Basis display:none; darunter die
   Tablet-Regel setzt display:block, dann wieder [hidden]-Gegenregel. */
.seat-sheet-backdrop { display: none; }

/* Namenstrainer: separate, rein lokale Uebungsansicht des Sitzplans. */
.modal.name-trainer-shell { width: min(920px, 94vw); padding: 24px; }
.name-trainer-modal { display: grid; gap: 18px; }
.name-trainer-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.name-trainer-heading h3 { margin: 2px 0 4px; font-size: 24px; }
.name-trainer-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.name-trainer-heading output { flex: 0 0 auto; padding: 8px 12px; border-radius: 9px; background: var(--surface-2); color: var(--primary-dark); font-size: 13px; font-weight: 800; }
.name-trainer-tabs { width: fit-content; max-width: 100%; }
.name-trainer-stage { display: grid; gap: 16px; }
.name-trainer-prompt { display: grid; gap: 3px; text-align: center; }
.name-trainer-prompt span { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.name-trainer-prompt strong { font-size: 20px; }
.name-trainer-board { min-height: 230px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.name-trainer-board.grid { display: grid; gap: 8px; }
.name-trainer-board.free { position: relative; min-height: 330px; }
.name-trainer-desk { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 42px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--muted); cursor: pointer; }
.name-trainer-desk:disabled { opacity: 1; cursor: default; }
.name-trainer-desk.empty { border-style: dashed; background: transparent; opacity: .35; }
.name-trainer-board.free .name-trainer-desk { position: absolute; width: 52px; height: 44px; transform: translate(-50%, -50%); }
.name-trainer-desk.correct { border-color: #16a34a; background: var(--card); background: color-mix(in srgb, #22c55e 16%, var(--card)); color: #15803d; box-shadow: 0 0 0 2px #22c55e; box-shadow: 0 0 0 2px color-mix(in srgb, #22c55e 18%, transparent); }
.name-trainer-desk.wrong { border-color: #dc2626; background: var(--card); background: color-mix(in srgb, #ef4444 14%, var(--card)); color: #dc2626; }
.name-trainer-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.name-trainer-options button { min-height: 46px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.name-trainer-options button:hover:not(:disabled) { border-color: var(--primary); background: var(--surface-2); }
.name-trainer-options button.correct { border-color: #16a34a; background: var(--card); background: color-mix(in srgb, #22c55e 14%, var(--card)); }
.name-trainer-options button.wrong { border-color: #dc2626; background: var(--card); background: color-mix(in srgb, #ef4444 12%, var(--card)); }
.name-trainer-feedback { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 9px; font-weight: 700; }
.name-trainer-feedback.success { background: var(--card); background: color-mix(in srgb, #22c55e 12%, var(--card)); color: #15803d; }
.name-trainer-feedback.error { background: var(--card); background: color-mix(in srgb, #ef4444 10%, var(--card)); color: #b91c1c; }
.name-trainer-hint { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.name-trainer-stage.cards { justify-items: center; }
.name-trainer-flashcard { display: grid; justify-items: center; gap: 12px; width: min(380px, 100%); min-height: 250px; padding: 28px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.name-trainer-flashcard img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; }
.name-trainer-card-icon { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.name-trainer-card-icon .app-icon { width: 44px; height: 44px; }
.name-trainer-flashcard > span:not(.name-trainer-card-icon) { color: var(--muted); font-size: 13px; }
.name-trainer-flashcard strong { font-size: 22px; text-align: center; }
.name-trainer-rating { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.name-trainer-rating span { width: 100%; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.name-trainer-footer { justify-content: flex-end; margin-top: 0 !important; padding-top: 14px; border-top: 1px solid var(--border-soft); }
body.dark .name-trainer-feedback.success { color: #86efac; }
body.dark .name-trainer-feedback.error { color: #fca5a5; }

@media (max-width: 640px) {
  .modal.name-trainer-shell { padding: 18px; }
  .name-trainer-heading { align-items: center; }
  .name-trainer-heading p { display: none; }
  .name-trainer-tabs { display: grid; grid-template-columns: 1fr; width: 100%; }
  .name-trainer-options { grid-template-columns: 1fr; }
  .name-trainer-board { padding: 10px; overflow-x: auto; }
}

/* Touch-Ziele im Unterrichtsmodus/Panel: mindestens 44px (RESPONSIVE_A11Y). */
@media (pointer: coarse) {
  .seat-teach-actions .btn,
  .seat-teach-actions .segmented button,
  .seat-edit-panel .btn,
  .seat-edit-panel .segmented button,
  .seat-edit-panel input[type="number"],
  .cell-state-button,
  .seat-actions2 button,
  .seat-tally button,
  .row-action-btn {
    min-height: 44px;
  }
  .row-action-btn { min-width: 44px; }
  .table-wrap tbody tr:not(.stats-row) > td.check-cell,
  .table-wrap tbody tr:not(.stats-row) > td.oral-cell {
    box-sizing: border-box;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
}

/* Tablet/Touch: Werkzeugbereich unter die Sitzfläche. Ein modales Bottom-Sheet
   würde den Sitzplan abdecken und die Drag-Ziele abfangen.
   
   Die Schwelle liegt bei 1200px, nicht bei 1024: Das iPad Pro 13" ist im
   Hochformat 1032px breit - acht Pixel zu viel für die alte Grenze. Es blieb
   damit bei zwei Spalten, und der Sitzfläche blieben nach Abzug des 320px
   breiten Panels nur noch rund 690px. Bei fünf Plätzen je Reihe reicht das
   nicht: Die Karten am rechten Rand verschwanden unter dem Panel, also genau
   die Drag-Ziele, die dieser Block schützen soll. */
@media (max-width: 1200px) {
  .seat-edit-layout[data-seat-mode="bearbeiten"] { grid-template-columns: minmax(0, 1fr); }
  .seat-edit-panel {
    position: static;
    max-height: none; overflow: visible;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .seat-edit-panel[hidden] { display: none; }
  .seat-sheet-backdrop { display: none; }
  .seat-sheet-backdrop[hidden] { display: none; }
}

/* ===================================================================== */
/* Sprint 6: Schuljahreswechsel-Assistent                                 */
/* ===================================================================== */
.sy-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 18px;
}
.sy-stepper span {
  display: flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 6px 8px; border-radius: 999px;
  background: var(--soft); color: var(--muted);
  font-size: 12px; font-weight: 800; white-space: nowrap;
}
.sy-stepper span.active {
  background: var(--card);
  background: color-mix(in srgb, var(--primary) 18%, var(--card));
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.sy-stepper span.done {
  background: var(--card);
  background: color-mix(in srgb, var(--brand-teal) 18%, var(--card));
  color: var(--brand-teal);
}
.sy-summary, .sy-review {
  border: 1px solid var(--border);
  background: var(--soft);
  border-radius: var(--radius);
  padding: 14px;
}
.sy-summary { display: flex; flex-direction: column; gap: 4px; }
.sy-summary span { color: var(--muted); font-size: 13px; }
.sy-checks { display: grid; gap: 9px; }
.sy-check {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); padding: 12px;
}
.sy-check input { margin-top: 3px; }
.sy-check span { display: flex; flex-direction: column; gap: 2px; }
.sy-check small { color: var(--muted); line-height: 1.35; }
.sy-review {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.sy-review div { display: flex; flex-direction: column; gap: 3px; }
.sy-review span { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
@media (max-width: 720px) {
  .sy-stepper { grid-template-columns: 1fr; }
  .sy-stepper span { justify-content: flex-start; }
  .sy-review { grid-template-columns: 1fr; }
}

/* Sprint 7: Import-Bericht */
.import-steps {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0;
}
.import-steps span {
  display: inline-flex; align-items: center; min-height: 30px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--soft); color: var(--muted);
  font-size: 12px; font-weight: 800;
}
.import-steps span.active {
  background: var(--card);
  background: color-mix(in srgb, var(--primary) 18%, var(--card));
  color: var(--text);
}
.import-result {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--border);
  border: 1px solid color-mix(in srgb, var(--brand-teal) 45%, var(--border));
  border-radius: var(--radius);
  background: var(--card);
  background: color-mix(in srgb, var(--brand-teal) 12%, var(--card));
}
.import-result.hidden { display: none; }
.import-result span { color: var(--muted); font-size: 13px; }
.import-error {
  display: grid; gap: 5px; padding: 14px 16px;
  border: 1px solid var(--border);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  border-radius: 12px; color: var(--danger);
  background: var(--card);
  background: color-mix(in srgb, var(--danger) 7%, var(--card));
}
.import-error span { color: var(--text); line-height: 1.45; }

/* Sprint 8: Statistik, Konferenzdruck, Schuelerblatt */
.stat-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.stat-kpi-grid article {
  display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
}
.stat-kpi-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.stat-kpi-grid strong { font-size: 22px; line-height: 1.1; }
.stat-kpi-grid small { color: var(--muted); font-size: 12px; }

@media print {
  body[data-print-mode="conference"] .conference-controls,
  body[data-print-mode="conference"] .conference-viewbar,
  body[data-print-mode="conference"] .tab-toolbar,
  body[data-print-mode="student"] .tab-toolbar {
    display: none !important;
  }
  body[data-print-mode="conference"] .conference-head,
  body[data-print-mode="student"] .student-head {
    break-after: avoid;
  }
  body[data-print-mode="conference"] .conference-table,
  body[data-print-mode="student"] .card {
    break-inside: avoid;
  }
  body[data-print-mode="conference"] .conference-table table {
    width: 100%;
  }
  body[data-print-mode="calculator"] .app-sidebar,
  body[data-print-mode="calculator"] header,
  body[data-print-mode="calculator"] .calculator-nav,
  body[data-print-mode="calculator"] .calculator-mobile-select,
  body[data-print-mode="calculator"] .calculator-actions,
  body[data-print-mode="calculator"] .calculator-lookup {
    display: none !important;
  }
  body[data-print-mode="calculator"] #view-calculators { padding: 0; max-width: none; }
  body[data-print-mode="calculator"] .calculator-layout { display: block; }
  body[data-print-mode="calculator"] .calculator-workspace { border: 0; box-shadow: none; }
  body[data-print-mode="calculator"] .calculator-table { max-height: none; overflow: visible; }
}

/* Sprint 9: Touchziele >=44px im Touch-Layout (RESPONSIVE_A11Y.md).
 * Steht bewusst am Dateiende: die .btn-/.tab-Basisregeln (min-height: 40px)
 * kommen frueher in der Kaskade und wuerden eine frueher platzierte
 * Media Query mit gleicher Spezifitaet ueberschreiben. */
@media (max-width: 1180px) {
  .btn, .tab, .ui-action-item, .icon-btn,
  .dash-task-list button, .dash-quick .btn,
  .class-overview-actions .btn { min-height: 44px; }
}

/* ----------------------------------------------------------------------------
 * Sprint 10 (Handoff): Papierkorb + Vorlagenzentrale + Toast-Aktion.
 * Bewusst am Kaskadenende (spaetere Regel gewinnt bei gleicher Spezifitaet).
 * Verstecken laeuft ueber .hidden { display:none !important } (frueher, !important),
 * daher brauchen die Flex-Container hier keine eigene [hidden]-Gegenregel;
 * defensiv trotzdem ergaenzt.
 * -------------------------------------------------------------------------- */
.ui-toast-action {
  margin-left: 10px;
  padding: 4px 10px;
  border: 1px solid var(--brand-teal);
  border-radius: 8px;
  background: transparent;
  color: var(--brand-teal);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.ui-toast-action:hover { background: rgba(15, 118, 110, 0.12); }

.trash-block { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border, #e2e8f0); }
.trash-block h4 { margin: 0 0 4px; }
.trash-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.trash-item, .vorlage-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
}
.trash-meta, .vorlage-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trash-meta strong, .vorlage-meta strong { overflow: hidden; text-overflow: ellipsis; }
.vorlage-actions { display: flex; gap: 8px; flex-shrink: 0; }

.vorlagen-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.class-form-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.class-form-head h3 { margin: 0; }
.class-form-identity { min-width: 0; display: flex; align-items: center; gap: 12px; }
.class-form-identity .class-photo-preview { margin: 0; }
.cf-vorlage-row { margin: 0 0 0 auto; }
.cf-vorlage-row label { display: flex; align-items: center; gap: 9px; margin: 0; }
.cf-vorlage-row label > span { font-size: 13px; font-weight: 700; color: var(--muted); }
.cf-vorlage-row select { min-width: 190px; border-color: var(--border); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: var(--card); }
.cf-vorlage-row.hidden, .cf-vorlage-row[hidden] { display: none !important; }
/* Die individuellen Grenzen bleiben innerhalb ihrer eigenen Gruppe kompakt
 * links ausgerichtet; Hinweise und Warnung belegen jeweils eine volle Zeile. */
.calculator-custom-thresholds {
  width: 100%;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
}
.calculator-custom-thresholds .calculator-suffix-field { width: 94px; }
.calculator-custom-thresholds .calculator-suffix-field input[type="number"] { width: 60px; }
.calculator-custom-thresholds p { flex: 0 0 100%; margin: 0; }
.calculator-custom-thresholds p:empty { display: none; }
@media (max-width: 760px) {
  .class-form-head, .cf-vorlage-row label { align-items: stretch; flex-direction: column; }
  .cf-vorlage-row { width: 100%; }
  .cf-vorlage-row select { width: 100%; }
}
.trash-block .ui-empty { padding: 16px 0; }

/* ---------- Beamer-Modus: zentrale Datenschutz-Regel (Kaskadenende) ----------
   Alle sensiblen Werte tragen im Markup das Attribut data-sensitive
   (grade|name|metric). Diese eine Regel verdeckt sie im Beamer-Modus.
   Neue Ansichten nur noch data-sensitive setzen, keine Einzel-Selektoren mehr.
   Der Druck-Filter (@media print: body.privacy * { filter:none !important })
   gewinnt per !important und erbt den Blur bewusst NICHT. */
body.privacy [data-sensitive] {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
}

/* ---------- iCal-Link maskiert (Datenschutz) ---------- */
.ical-field { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.ical-field .ical-input { flex: 1 1 auto; min-width: 0; }
.ical-field .btn { flex: 0 0 auto; }
.ical-hint { display: block; margin-top: 6px; font-size: 12px; }

/* ---------- Einstellungen-Aufraeumsprint (Layout-Rhythmus, Kaskadenende) ----------
   Die linke Spalte enthaelt NUR die Tab-Navigation. Alle Inhaltssektionen
   gehoeren fest in die rechte Spalte (Spalte 2). Ohne diese Festlegung wandern
   Tabs mit mehreren sichtbaren Panels (Schule & Standards, Lizenz & Version)
   per Grid-Auto-Flow unter die Nav in Spalte 1 und lassen die Spalten verspringen. */
.settings-grid-clean .settings-tabs { grid-column: 1; }
.settings-grid-clean .settings-section { grid-column: 2; }

/* Einheitliches Abschnitts-Muster: klar getrennte Unterabschnitte mit Luft. */
.settings-subsection { display: grid; gap: 11px; }
.profile-account-access { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.settings-subsection + .settings-subsection {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-soft);
}
.settings-subsection h5 {
  margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 800;
}
.settings-restore-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.settings-disclosure summary {
  cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0; width: max-content;
}
.settings-disclosure[open] summary { margin-bottom: 10px; }
.export-plain-links { font-size: 12.5px; }
.class-form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.class-form-actions-primary, .class-form-actions-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.class-form-actions-tools { margin-left: auto; }
.class-form-delete { margin-left: 8px; }
@media (max-width: 760px) {
  .onboarding-footer-spacer { flex-basis: 100%; height: 0; }
  .class-form-actions, .class-form-actions-primary, .class-form-actions-tools { width: 100%; }
  .class-form-actions-tools { margin-left: 0; }
  .class-form-delete { margin-left: auto; }
}

/* Geraete-Abgleich (Sync) */
.sync-status {
  font-size: 12.5px; line-height: 1.5; padding: 10px 12px;
  border: 1px solid var(--border-soft); border-radius: 10px; background: var(--card-soft, var(--card));
}
.sync-pending { color: var(--danger, #b91c1c); font-weight: 700; }
.sync-conflict-meta { margin: 6px 0 12px; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.sync-conflict-actions { flex-wrap: wrap; gap: 10px; }

@media (max-width: 800px) {
  /* Einspaltig: Spalten-Fixierung aufheben, sonst erzeugt grid-column:2 eine leere Spalte. */
  .settings-grid-clean .settings-tabs,
  .settings-grid-clean .settings-section { grid-column: auto; }
}

/* ==========================================================================
   Direktlinks (C-6, 0.68.0) - Sidebar-Sektion + Einbettungs-View.
   Bewusst am Kaskadenende, damit spaetere Regeln nicht ueberschrieben werden.
   ========================================================================== */
.side-quicklinks { margin-top: 4px; }
.side-quicklinks .side-section { margin-top: 10px; }
/* [hidden]/hidden-Gegenregel: ausgeblendete Sektion nimmt keinen Platz ein. */
.side-quicklinks.hidden { display: none; }

.quicklink-head { align-items: flex-start; }
.quicklink-head .muted { word-break: break-all; }
.quicklink-actions { display: flex; gap: 8px; }

.quicklink-panel {
  position: relative;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  min-height: 60vh;
}
.quicklink-frame {
  display: block;
  width: 100%;
  height: 72vh;
  border: 0;
  background: #fff;
}
.quicklink-frame.hidden { display: none; }
.quicklink-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.quicklink-loading.hidden { display: none; }

.quicklink-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
}
.quicklink-fallback.hidden { display: none; }
.quicklink-fallback-card {
  max-width: 460px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.quicklink-fallback-icon svg { width: 40px; height: 40px; opacity: .7; }
.quicklink-fallback-card h3 { margin: 0; }
.quicklink-fallback-card p { margin: 0; }


/* Notizbuch 0.70: ruhiger Browser links, fokussierter Editor rechts. */
.notes-layout { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 16px; align-items: stretch; min-height: 66vh; }
.exam-filterbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.exam-filters { display: inline-flex; padding: 4px; border-radius: 7px; background: var(--surface-2); }
.exam-filters button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-weight: 700; }
.exam-filters button.active { background: var(--card); color: var(--primary-dark); box-shadow: var(--shadow-xs); }
.exam-list { display: grid; gap: 18px; }
.exam-month { display: grid; gap: 8px; }
.exam-month > h3 { margin: 0; color: var(--muted); font-size: 13px; text-transform: uppercase; }
.exam-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); box-shadow: var(--shadow-xs); }
.exam-row:hover { border-color: var(--border); border-color: color-mix(in srgb, var(--primary) 42%, var(--border)); background: var(--hover); }
.exam-date { display: grid; place-items: center; min-height: 54px; border-radius: 7px; background: var(--surface); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary-dark); }
.exam-date strong { font-size: 21px; line-height: 1; }
.exam-date span { font-size: 11px; font-weight: 800; text-transform: uppercase; }
.exam-main { min-width: 0; display: grid; gap: 4px; }
.exam-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exam-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: 13px; }
.exam-actions { display: flex; gap: 8px; }
.exam-empty { min-height: 320px; display: grid; place-items: center; text-align: center; border: 1px dashed var(--border); border-radius: 8px; background: var(--card); background: color-mix(in srgb, var(--card) 72%, transparent); }
.exam-empty > div { max-width: 400px; }
.exam-empty svg { width: 30px; height: 30px; color: var(--muted); }
.exam-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.exam-form-grid .wide { grid-column: 1 / -1; }
.modal.exam-modal { width: 600px; padding: 28px; border-radius: 16px; }
.exam-modal-head { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--border-soft); }
.exam-modal-head > svg { width: 20px; height: 20px; margin-top: 2px; color: var(--primary); }
.exam-modal-head h3 { margin: 0 0 4px; font-size: 20px; }
.exam-modal-head p { margin: 0; line-height: 1.45; }
.exam-form-grid .modal-label { margin: 0; }
.exam-form-grid .modal-label small { color: var(--muted); font-size: 11px; font-weight: 500; }
.exam-form-grid .modal-label > span { display: inline-flex; align-items: baseline; gap: 5px; }
@media (max-width: 700px) {
  .exam-filterbar { align-items: stretch; flex-direction: column; }
  .exam-filters { width: 100%; }
  .exam-filters button { flex: 1; }
  .exam-row { grid-template-columns: 54px minmax(0, 1fr); }
  .exam-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .exam-form-grid { grid-template-columns: 1fr; }
  .exam-form-grid .wide { grid-column: auto; }
}
.notes-browser, .note-editor {
  min-width: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
}
.notes-browser { padding: 12px; display: flex; flex-direction: column; min-height: 0; }
.note-search { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.note-search svg { width: 17px; height: 17px; color: var(--muted); }
.note-search input { min-width: 0; height: 36px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.note-search input:focus { box-shadow: none; }
.note-category-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 10px 0; border-bottom: 1px solid var(--border); }
.note-category-tabs button { flex: 0 0 auto; min-height: 30px; padding: 5px 9px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; cursor: pointer; font-weight: 650; }
.note-category-tabs button:hover { color: var(--text); background: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.note-category-tabs button.active { color: var(--primary); background: var(--card); background: color-mix(in srgb, var(--primary) 14%, var(--card)); }
.note-category-tabs button span { margin-left: 4px; opacity: .75; }
.note-list { display: flex; flex-direction: column; gap: 5px; padding-top: 8px; overflow-y: auto; }
.note-list-item { display: grid; gap: 5px; width: 100%; text-align: left; padding: 10px; border: 1px solid transparent; border-radius: 6px; color: var(--text); background: transparent; cursor: pointer; }
.note-list-item:hover { background: var(--surface); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); border-color: var(--border); border-color: color-mix(in srgb, var(--primary) 28%, var(--border)); }
.note-list-item.active { border-color: var(--border); border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); background: var(--card); background: color-mix(in srgb, var(--primary) 14%, var(--card)); }
.note-list-item-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.note-list-item-top strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-list-item time { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.note-category-label { justify-self: start; color: var(--primary); font-size: 11px; font-weight: 700; }
.note-list-preview { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-list-empty { display: grid; gap: 4px; padding: 24px 10px; text-align: center; }
.note-editor { padding: 0; min-height: 66vh; display: flex; flex-direction: column; overflow: visible; }
.note-editor-head { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.note-title-fields { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 220px); gap: 10px; }
.note-title-fields input { width: 100%; min-width: 0; min-height: 40px; }
#note-title { font-size: 17px; font-weight: 700; }
#note-category { font-size: 13px; }
.note-editor-actions { display: flex; align-items: center; gap: 8px; }
.note-save-state { min-width: 70px; color: var(--muted); font-size: 12px; text-align: right; }
.note-more-menu { position: relative; }
.note-more-menu summary { list-style: none; display: inline-flex; }
.note-more-menu summary::-webkit-details-marker { display: none; }
.note-more-popover { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; min-width: 170px; padding: 6px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); box-shadow: var(--shadow-lg); }
.note-more-popover button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 5px; color: var(--danger); background: transparent; cursor: pointer; text-align: left; }
.note-more-popover button:hover { background: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.note-more-popover svg { width: 16px; height: 16px; }
#note-body { flex: 1; width: 100%; min-height: 50vh; padding: 22px 24px; border: 0; border-radius: 0 0 8px 8px; resize: none; color: var(--text); background: var(--card); font: inherit; line-height: 1.65; box-shadow: none; }
#note-body:focus { box-shadow: inset 0 0 0 2px var(--primary); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent); }
.note-editor-empty { margin: auto; max-width: 390px; padding: 36px 24px; text-align: center; }
.note-editor-empty > svg { width: 32px; height: 32px; margin-bottom: 12px; color: var(--muted); }
.note-editor-empty h3 { margin: 0 0 7px; }
.note-editor-empty p { margin: 0 0 18px; }
.settings-info { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--border); border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border)); border-radius: 7px; background: var(--card); background: color-mix(in srgb, var(--primary) 7%, var(--card)); }
.settings-info > svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--primary); }
.settings-info p { margin: 0; font-size: 13px; line-height: 1.45; }
.quicklink-mode-check { margin-top: 14px; }

/* Einheitliche, schlichte Form-Controls fuer alle neueren Arbeitsbereiche. */
:where(.calculator-controls, .calculator-advanced-grid, .calculator-lookup, .note-title-fields, .exam-form-grid)
  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.25;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
:where(.calculator-controls, .calculator-advanced-grid, .calculator-lookup, .note-title-fields, .exam-form-grid)
  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover {
  border-color: var(--border);
  border-color: color-mix(in srgb, var(--text) 28%, var(--border));
}
:where(.calculator-controls, .calculator-advanced-grid, .calculator-lookup, .note-title-fields, .exam-form-grid)
  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
:where(.calculator-controls, .calculator-advanced-grid, .calculator-lookup, .note-title-fields, .exam-form-grid)
  :where(input, select)::placeholder { color: var(--muted); color: color-mix(in srgb, var(--muted) 78%, transparent); opacity: 1; }
.exam-form-grid input, .exam-form-grid select { width: 100%; }
.exam-form-grid input[type="date"] { color-scheme: light; width: 100%; box-sizing: border-box; }
body.dark .exam-form-grid input[type="date"] { color-scheme: dark; }

/* ---------- v105: iPad-Formulare und ruhiger Einstellungsrhythmus ---------- */
.settings-grid-clean .settings-section {
  padding: 22px;
}
.settings-grid-clean .settings-section h4 {
  margin-bottom: 18px;
}
.settings-form {
  gap: 18px 16px;
}
.settings-form label,
.settings-label,
.modal-label,
.form-grid label {
  gap: 8px;
  line-height: 1.35;
}
.settings-form :where(input, select, textarea),
.settings-label :where(input, select, textarea),
.modal-label :where(input, select, textarea),
.form-grid :where(input, select, textarea) {
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background-color: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.settings-form textarea,
.settings-label textarea,
.modal-label textarea { min-height: 132px; }
.settings-toggle-field { justify-content: flex-end; }
.settings-switch-row {
  min-height: 44px; display: flex; align-items: center; gap: 10px;
  padding: 0 13px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--text); font-weight: 600;
}
.settings-switch-row input { min-height: 0; width: 18px; height: 18px; accent-color: var(--primary); }
.settings-subsection { gap: 16px; }
.settings-subsection + .settings-subsection { margin-top: 26px; padding-top: 24px; }
.settings-subsection h5 { margin-bottom: 2px; }
.settings-actions { gap: 12px; }
.settings-backup-card {
  padding: 18px; border: 1px solid var(--border-soft); border-radius: 14px;
  background: var(--surface);
}
.settings-backup-card + .settings-backup-card { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.settings-backup-intro { margin: 0; line-height: 1.55; }
.settings-backup-password-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.settings-backup-encryption {
  margin: 0; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 8%, var(--card)); line-height: 1.5;
}
.settings-selected-file {
  min-height: 22px; color: var(--muted); font-size: 13px; line-height: 1.4;
  overflow-wrap: anywhere;
}
.settings-selected-file.selected { color: var(--primary-dark); font-weight: 700; }
.settings-restore-password.needed {
  padding: 12px; border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  border-radius: 12px; background: color-mix(in srgb, var(--primary) 7%, var(--card));
}
body.dark .settings-selected-file.selected { color: #5eead4; }
.settings-restore-grid { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 12px; }
.settings-restore-grid .btn { min-height: 44px; margin: 0; justify-content: center; }
/* Import-/Wiederherstellen-Paare: natuerliche Buttonbreite wie die Export-Zeile
 * darueber (Owner-Befund iPad Build 6: Grid streckte die Buttons unfoermig). */
.settings-restore-pair { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.settings-restore-pair .btn { min-height: 44px; margin: 0; }
.onboarding-steps .settings-section { min-height: 190px; padding: 22px; }
.onboarding-steps .settings-section p { margin: 0 0 18px; line-height: 1.55; }
.onboarding-backup-label { gap: 10px; margin-top: 8px; }
.onboarding-backup-label select { min-height: 44px; max-width: 360px; }
.onboarding-footer { gap: 12px; padding-top: 4px; }
.import-center-actions {
  display: grid; grid-template-columns: auto minmax(20px, 1fr) auto auto;
  align-items: center; gap: 12px; margin: 18px 0 14px;
}
.onboarding-import-options { display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; }
.onboarding-import-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
}
.onboarding-import-card.primary { border-color: var(--border); border-color: color-mix(in srgb, var(--primary) 42%, var(--border)); }
.onboarding-import-card strong { font-size: 16px; }
.onboarding-import-card p { margin: 6px 0 0; line-height: 1.5; }
.onboarding-import-card .btn { align-self: flex-start; margin-top: auto; min-height: 44px; }
.onboarding-import-footer { justify-content: flex-start; }
.class-form-head { min-height: 72px; padding-bottom: 16px; display: block; }
.class-form-head h3 { font-size: 20px; }
.class-form-head-tools {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-top: 16px;
}
.class-form-head .class-photo-action { margin: 0; }
.class-form-head .cf-vorlage-row { margin: 0 0 0 auto; }
.class-photo-action {
  position: relative; min-width: 250px; margin: 0; padding: 8px 42px 8px 8px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  color: var(--text); text-align: left; cursor: pointer;
}
.class-photo-action:hover { border-color: var(--primary); background: var(--hover); }
.class-photo-action .class-photo-edit {
  position: absolute; right: 12px; top: 50%; width: 28px; height: 28px;
  display: grid; place-items: center; transform: translateY(-50%);
  border-radius: 8px; background: var(--card); color: var(--primary);
}
.class-photo-action .class-photo-edit svg { width: 16px; height: 16px; }
.class-settings-modal .form-grid { gap: 20px 18px; margin-top: 20px; }
.class-settings-modal .name-row { gap: 10px; }
.class-form-actions { justify-content: space-between; margin-top: 24px; padding-top: 20px; }
.class-form-actions-tools { margin-left: auto; }
.class-form-delete { margin-left: 0 !important; }
#view-class > .toolbar .btn.primary { min-height: 48px; padding: 10px 18px; font-size: 14px; }
.settings-section .settings-actions { margin-top: 16px; }
.settings-section > .muted + .settings-actions { margin-top: 18px; }
.vorlagen-list { margin-top: 20px; }
.view-loading-state {
  min-height: 280px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; color: var(--muted); text-align: center;
}
.view-loading-state .ui-spinner { width: 34px; height: 34px; }
.ui-spinner {
  display: inline-block; border: 3px solid var(--border); border: 3px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-top-color: var(--primary); border-radius: 999px;
  animation: noturio-spin .75s linear infinite;
}
@keyframes noturio-spin { to { transform: rotate(360deg); } }

@media (max-width: 800px) {
  .onboarding-import-options { grid-template-columns: 1fr; }
  .settings-restore-grid { grid-template-columns: 1fr; }
  .class-form-head-tools { align-items: stretch; flex-direction: column; }
  .class-form-head .cf-vorlage-row { width: 100%; margin-left: 0; }
  .class-photo-action { width: 100%; min-width: 0; }
}
.calculator-suffix-field { min-height: 40px; border-radius: 8px; background: var(--card); }
.calculator-suffix-field input[type="number"] { min-height: 38px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.calculator-suffix-field input[type="number"]:hover,
.calculator-suffix-field input[type="number"]:focus { border: 0; box-shadow: none; }
@media (max-width: 900px) {
  .notes-layout { grid-template-columns: 1fr; min-height: auto; }
  .notes-browser { max-height: 300px; }
  .note-editor { min-height: 52vh; }
  .note-title-fields { grid-template-columns: 1fr; }
  .note-editor-head { align-items: flex-start; }
}
.help-center-head {
  padding: 24px 28px 18px;
}

.help-center-frame {
  display: block;
  width: calc(100% - 56px);
  min-height: calc(100vh - 190px);
  margin: 0 28px 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

@media (max-width: 760px) {
  .help-center-head { padding: 18px 16px 12px; }
  .help-center-frame {
    width: calc(100% - 32px);
    min-height: calc(100vh - 160px);
    margin: 0 16px 16px;
  }
}

/* C-9 (Owner-Befund): Heute-Karten lueckenfrei stapeln.
 * Vorher Grid: jede ZEILE war so hoch wie ihre hoechste Karte -> unter kurzen
 * Karten (z. B. "Letzte Notizen" mit einem Eintrag) blieb Leerflaeche.
 * align-items:start verhindert nur das Strecken, nicht die Zeilenhoehe.
 * Loesung: Masonry ueber CSS-Spalten (breit unterstuetzt; grid masonry ist es
 * noch nicht). Lesereihenfolge bleibt die DOM-Reihenfolge (Tastatur/Screenreader
 * unveraendert), die Karten fliessen nur spaltenweise statt zeilenweise.
 * Steht am Kaskadenende und ueberschreibt die display:grid-Basisregel. */
.dashboard-grid {
  display: block;
  columns: 2;
  column-gap: 18px;
}
.dashboard-grid > .dash-card {
  break-inside: avoid;
  margin: 0 0 18px;
}
@media (max-width: 900px) {
  .dashboard-grid { columns: 1; }
}

/* ==========================================================================
 * Mobil-Haertung (iPhone/iPad, 2026-07-18)
 *
 * Auf schmalen Bildschirmen (iPhone) liess sich die ganze Seite horizontal
 * schieben und Inhalt wurde am Rand abgeschnitten. Ursache: mehrere Elemente
 * (Header-Aktionsleiste, die Klassen-Tabs mit 9 Reitern, die Settings-Tabs)
 * sind breiter als der Viewport, und es gab KEIN globales overflow-x-Clamp -
 * jedes zu breite Element machte damit die komplette Seite schiebbar.
 * ========================================================================== */

/* 1. Globales Clamp gegen horizontales Wegschieben.
 *    `clip` statt `hidden`: verhindert horizontales Scrollen, erzeugt aber
 *    KEINEN Scroll-Container - der sticky-Header (position:sticky) bleibt
 *    dadurch funktionsfaehig. */
html, body { max-width: 100%; overflow-x: clip; }

/* 2. Tab-Leisten scrollen INNERHALB ihrer selbst, statt die Seite zu weiten.
 *    Betrifft die 9 Klassen-Reiter und die Settings-Reiter. Reiter behalten
 *    ihre Groesse (kein Zerdruecken) und die Leiste wird bei Bedarf wischbar. */
.tabs.class-primary-tabs, .settings-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;              /* Firefox */
}
.tabs.class-primary-tabs::-webkit-scrollbar,
.settings-tabs::-webkit-scrollbar { display: none; }   /* WebKit/iOS */
.tabs.class-primary-tabs .tab,
.settings-tabs > button,
.settings-tabs > .settings-tab-label { flex: 0 0 auto; white-space: nowrap; }

/* 3. Header auf dem Handy entdraengen: schmalere Polster und kleinere Abstaende,
 *    damit die Aktionsknoepfe (zuletzt das ⋮) nicht am Rand abgeschnitten
 *    werden. Das Safe-Area-Polster fuer die Notch bleibt erhalten. */
@media (max-width: 560px) {
  header {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    gap: 6px;
    /* Auf dem Handy passen Hamburger + Breadcrumb + Aktionsknoepfe nicht in
     * eine Zeile: der Breadcrumb ("Zurueck zu Heute" / "Alle Klassen") brach um
     * und ueberlappte die Buttons (Owner-Befund). Loesung: umbrechen lassen und
     * den Breadcrumb per order/flex-basis in eine eigene, volle Zeile schieben. */
    flex-wrap: wrap;
    row-gap: 6px;
  }
  header .btn.small.icon-btn { padding-left: 9px; padding-right: 9px; }
  #breadcrumb { order: 10; flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  #breadcrumb:empty { display: none; }

  /* Auf 320-px-Handys sind Status + Speichern + Schliessen zusammen breiter
   * als der Dialoginhalt. Der Status bekommt deshalb eine eigene Zeile; die
   * beiden Touch-Ziele bleiben vollstaendig innerhalb des Dialogs. */
  .settings-footer { flex-wrap: wrap; justify-content: flex-end; }
  .settings-footer > .muted { flex: 1 0 100%; }
}

/* 4. Untere Safe-Area (Home-Indicator) fuer die scrollbaren Inhalte, damit
 *    nichts hinter dem Indicator klebt. */
@media (max-width: 1180px) {
  .app-main { padding-bottom: env(safe-area-inset-bottom); }
}

/* ============================================================
 * Design-Pass v106: EIN Formular-Look fuer die ganze App.
 * Owner-Befund (iPad-Test 2026-07-18): Textfelder, Dropdowns und
 * Zahlenfelder hatten je nach Bereich verschiedene Hoehen, Radien
 * und Farben; Selects erschienen auf iOS im nativen Look. Ab hier
 * gilt ueberall dieselbe 44-px-Kontrolle mit eigenem Chevron.
 * Bewusst NICHT betroffen: Notenzellen in Tabellen (.grade-input),
 * Sitzplan-Zellen und das eingebettete Suffix-Feld im Rechner.
 * ============================================================ */

.settings-form input,
.settings-form select,
.settings-form textarea,
.settings-label textarea,
.modal-label input,
.modal-label select,
.modal-label textarea,
.form-grid input,
.form-grid select,
.calculator-controls input,
.calculator-controls select,
.calculator-lookup input,
.tab-toolbar select,
.class-filterbar select,
.conference-controls select,
.oral-term-selector select,
.onboarding-backup-label select,
.cf-vorlage-row select,
.settings-restore-grid select,
.quick-search input,
.ical-field input,
.sync-form input {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background-color: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  transition: border-color .15s, box-shadow .15s;
}
.settings-form input:focus,
.settings-form select:focus,
.settings-form textarea:focus,
.settings-label textarea:focus,
.modal-label input:focus,
.modal-label select:focus,
.modal-label textarea:focus,
.form-grid input:focus,
.form-grid select:focus,
.calculator-controls input:focus,
.calculator-controls select:focus,
.calculator-lookup input:focus,
.tab-toolbar select:focus,
.class-filterbar select:focus,
.conference-controls select:focus,
.oral-term-selector select:focus,
.onboarding-backup-label select:focus,
.cf-vorlage-row select:focus,
.settings-restore-grid select:focus,
.quick-search input:focus,
.ical-field input:focus,
.sync-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}

/* Selects: nativen iOS-/Browser-Look abschalten, eigener Chevron.
 * background-color bleibt getrennt gesetzt, damit Dark Mode greift. */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px;
  padding-right: 40px;
}
/* Gleiche Spezifitaet wie die Kontextregeln oben, damit der Chevron auch
 * gegen aeltere background-Shorthands (z. B. .settings-form select) gewinnt. */
.settings-form select,
.modal-label select,
.form-grid select,
.calculator-controls select,
.tab-toolbar select,
.class-filterbar select,
.conference-controls select,
.oral-term-selector select,
.onboarding-backup-label select,
.cf-vorlage-row select,
.settings-restore-grid select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px;
  padding-right: 40px;
}
body.dark select,
body.dark .settings-form select,
body.dark .modal-label select,
body.dark .form-grid select,
body.dark .calculator-controls select,
body.dark .tab-toolbar select,
body.dark .class-filterbar select,
body.dark .conference-controls select,
body.dark .oral-term-selector select,
body.dark .onboarding-backup-label select,
body.dark .cf-vorlage-row select,
body.dark .settings-restore-grid select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px;
}

/* Checkboxen/Radios aus der 44-px-Regel wieder herausnehmen. */
.settings-form input[type="checkbox"],
.settings-form input[type="radio"],
.modal-label input[type="checkbox"],
.form-grid input[type="checkbox"] {
  min-height: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 5px;
  accent-color: var(--primary);
}
/* Datei-Auswahl braucht weniger Innenluft, sonst wirkt sie abgeschnitten. */
.modal-label input[type="file"] { padding: 9px 12px; }

/* Rechner: kompakte Breiten bleiben, aber gleiche Hoehe wie ueberall. */
.calculator-suffix-field { min-height: 44px; border-radius: 12px; }
.calculator-suffix-field input[type="number"] { min-height: 42px; }

/* Einstellungen: Unterabschnitte als ruhige Karten (wie Daten & Backup)
 * in JEDEM Tab - statt loser Absaetze mit Trennlinien. */
.settings-subsection {
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--surface);
  gap: 14px;
}
.settings-subsection + .settings-subsection {
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.profile-account-access {
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.settings-backup-card + .settings-backup-card {
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.settings-section > .settings-subsection:first-of-type { margin-top: 0; }
.settings-section > p.muted,
.settings-section > .settings-intro { line-height: 1.55; }
.settings-section > .settings-actions { margin-top: 14px; }
.settings-subsection .settings-form { gap: 14px; }

/* Feedbackpass v107: feste, ruhige Geometrie auf iPad und Desktop. */
.settings-restore-pair {
  display: grid;
  grid-template-columns: 220px max-content;
  width: max-content;
  max-width: 100%;
  gap: 12px;
}
.settings-restore-pair .file-btn { width: 220px; justify-content: flex-start; }
.settings-restore-pair .btn:not(.file-btn) { min-width: 190px; }

.class-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
  align-items: start;
}
.class-option-card { min-height: 86px; margin: 0; }
.class-password-settings.class-option-card { margin-top: 0; }
.archive-check.class-option-card {
  align-items: flex-start;
  padding: 15px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: inherit;
}
.archive-check.class-option-card > span { display: grid; gap: 3px; }
.archive-check.class-option-card strong { font-size: 14px; }
.archive-check.class-option-card small { color: var(--muted); font-weight: 500; line-height: 1.4; }


.exam-filterbar { align-items: center; }
.exam-create-action { min-height: 44px; margin-left: auto; }

@media (max-width: 800px) {
  .settings-restore-pair { grid-template-columns: 1fr; width: 100%; }
  .settings-restore-pair .file-btn,
  .settings-restore-pair .btn:not(.file-btn) { width: 100%; min-width: 0; }
  .class-option-grid { grid-template-columns: 1fr; }
  .exam-create-action { width: 100%; margin-left: 0; }
}

/* Feedbackpass v108: Suche, Sicherungen und Notizformatierung. */
.dashboard-head-actions {
  flex: 1 1 760px;
  min-width: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.dashboard-search-wrap {
  position: relative;
  flex: 1 1 560px;
  width: auto;
  min-width: 300px;
  max-width: 620px;
}
.dashboard-search-icon {
  position: absolute;
  z-index: 1;
  left: 13px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}
.dashboard-search-icon .app-icon { width: 18px; height: 18px; }
.dashboard-search-wrap input {
  width: 100%;
  min-height: 44px;
  padding: 9px 38px 9px 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  box-shadow: var(--shadow-xs);
}
.dashboard-search-wrap input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
.dashboard-search-results {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  right: 0;
  width: min(430px, 80vw);
  max-height: 430px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow-lg);
}
.dashboard-search-results p { padding: 12px; }

@media (max-width: 1180px) {
  .dashboard-head-actions { width: 100%; flex-basis: auto; }
  .dashboard-search-wrap { max-width: none; }
}

@media (max-width: 800px) {
  .dashboard-head-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
  }
  .dashboard-search-wrap {
    order: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .dashboard-search-results { left: 0; right: auto; width: 100%; }
}

@media (max-width: 560px) {
  .dashboard-head-actions { grid-template-columns: 1fr 1fr; }
  .dashboard-search-wrap { grid-column: 1 / -1; }
  .dashboard-head-actions .btn { width: 100%; }
}

.archive-check.class-option-card { align-items: center; }

.settings-schoolyear-switch-card .settings-form { max-width: 440px; }
.settings-schoolyear-switch-card .settings-intro { margin: 0; }

.settings-restore-card > div:first-child,
.settings-backup-choice > div:first-child { display: grid; gap: 5px; }
.settings-restore-card span,
.settings-backup-choice span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.settings-restore-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.settings-restore-card,
.settings-backup-choice {
  display: grid;
  grid-template-rows: minmax(74px, auto) auto;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--card);
}
.settings-backup-choice { align-content: start; }
.settings-card-kicker {
  width: fit-content; padding: 3px 8px; border-radius: 999px;
  color: var(--primary-dark) !important;
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
  font-size: 11px !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.settings-restore-json .settings-card-kicker {
  color: #0f766e !important; background: color-mix(in srgb, #14b8a6 13%, var(--card));
}
.settings-restore-database { border-top: 3px solid var(--primary); }
.settings-restore-json { border-top: 3px solid #14b8a6; }
.settings-restore-actions { display: grid; grid-template-columns: 1fr; gap: 9px; }
.settings-restore-actions .btn {
  width: 100%;
  min-height: 44px;
  margin: 0;
  justify-content: center;
}
.settings-restore-actions .file-btn {
  color: var(--primary-dark);
  border-color: var(--border);
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background: var(--card);
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
}
.settings-restore-json .file-btn {
  color: var(--text);
  color: color-mix(in srgb, #14b8a6 72%, var(--text));
  border-color: var(--border);
  border-color: color-mix(in srgb, #14b8a6 36%, var(--border));
  background: var(--card);
  background: color-mix(in srgb, #14b8a6 8%, var(--card));
}
.settings-restore-json .btn.primary { background: linear-gradient(135deg, #0f766e, #14b8a6); }
body.dark .settings-restore-json .file-btn { color: #5eead4; }

.settings-feedback-card {
  display: grid;
  gap: 20px;
  border-color: var(--border);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background: linear-gradient(135deg, var(--card), var(--card) 58%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, var(--card)), var(--card) 58%);
}
.settings-feedback-copy { display: flex; align-items: flex-start; gap: 14px; }
.settings-feedback-copy h5 { margin: 0 0 5px; }
.settings-feedback-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  color: var(--primary-dark);
  background: var(--card);
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
}
.settings-feedback-icon .app-icon { width: 21px; height: 21px; }
.settings-feedback-actions { align-items: center; margin: 0; }
.settings-feedback-note { margin: 0; font-size: 12.5px; }
.feedback-mail-btn { text-decoration: none; }

.note-format-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 48px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.note-format-toolbar select,
.note-format-toolbar button {
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
.note-format-toolbar select { min-width: 108px; padding: 4px 28px 4px 8px; border-color: var(--border); background-color: var(--card); }
.note-format-toolbar button { min-width: 32px; padding: 4px 8px; cursor: pointer; }
.note-format-toolbar button:hover { border-color: var(--border); background: var(--card); }
.note-toolbar-divider { width: 1px; height: 22px; margin: 0 2px; background: var(--border); }
#note-body.note-rich-editor {
  flex: 1;
  width: 100%;
  min-height: 50vh;
  padding: 22px 24px;
  overflow-y: auto;
  border: 0;
  border-radius: 0 0 8px 8px;
  color: var(--text);
  background: var(--card);
  font: inherit;
  line-height: 1.65;
  white-space: normal;
  overflow-wrap: anywhere;
  outline: none;
}
#note-body.note-rich-editor:focus { box-shadow: inset 0 0 0 2px var(--primary); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent); }
#note-body.note-rich-editor:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
#note-body.note-rich-editor :where(h1, h2, h3, h4, p, blockquote, pre, ul, ol) { margin: 0 0 .7em; }
#note-body.note-rich-editor h2 { font-size: 1.65em; }
#note-body.note-rich-editor h3 { font-size: 1.3em; }
#note-body.note-rich-editor h4 { font-size: .9em; }
#note-body.note-rich-editor :where(ul, ol) { padding-left: 1.7em; }
#note-body.note-rich-editor blockquote { padding-left: 12px; border-left: 3px solid var(--primary); color: var(--muted); }
#note-body.note-rich-editor pre { padding: 10px 12px; border-radius: 8px; background: var(--surface-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }

@media (max-width: 800px) {
  .settings-restore-cards { grid-template-columns: 1fr; }
  .settings-backup-password-grid { grid-template-columns: 1fr; }
  .note-format-toolbar { overflow-x: auto; flex-wrap: nowrap; }
}

@media (max-width: 560px) {
  .note-editor-head { flex-wrap: wrap; }
  .note-title-fields { flex: 1 0 100%; }
  .note-editor-actions { width: 100%; justify-content: flex-end; }
}

/* Hinweis unter der Start-Wahl (ersetzt den frueheren Backup-Schritt der
 * Ersteinrichtung: informiert, ohne eine Einstellung abzufragen). */
.onboarding-choice-note { margin-top: 14px; font-size: 12.5px; line-height: 1.5; }

/* Sitzplan: Ziehen statt nur Klicken (Maus + Finger).
 * touch-action:none ist Pflicht - sonst scrollt iOS die Seite, statt zu ziehen. */
.seat-grid-board .seat[data-sid], .unseated .chip[data-sid] { touch-action: none; }
.seat-drag-source { opacity: .45; }
.seat-drop-active { outline: 2px dashed var(--primary); outline-offset: 2px; background: #d5f6f2; }
body.dark .seat-drop-active { background: #123f3a; }
.seat-drag-ghost {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  padding: 7px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 700;
  background: var(--primary); color: #fff; box-shadow: 0 10px 24px -8px rgba(15, 23, 42, .55);
}
.unseated-hint { margin: 6px 0 0; font-size: 12.5px; }

/* Heute-Karten: Reihenfolge einstellbar. Kennzahlen, Backup-Hinweis und
 * Demo-Block laufen ueber die volle Breite, damit sie an jeder Position
 * im Raster richtig sitzen. */
/* Volle Breite fuer Kennzahlen, Backup-Hinweis und Demo-Block.
 * ACHTUNG: .dashboard-grid ist am Kaskadenende KEIN Grid mehr, sondern ein
 * Mehrspalten-Layout (display:block; columns:2). Dort wirkt grid-column nicht -
 * column-span:all ist der richtige Hebel. Sonst quetschen sich z. B. die vier
 * Kennzahlen in eine halbe Spalte. grid-column bleibt als Fallback stehen,
 * falls die Basisregel (display:grid) greift. */
.dashboard-grid > .dash-full {
  grid-column: 1 / -1;
  column-span: all;
  margin: 0 0 18px;
}
.dash-widget-picker { display: grid; gap: 6px; margin: 4px 0 2px; }
.dash-widget-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.dash-widget-row:hover { background: var(--surface-2, #f1f5f9); }
.dash-widget-row .settings-check { flex: 1 1 auto; margin: 0; }
.dash-widget-move { display: flex; gap: 6px; flex: 0 0 auto; }
.dash-widget-move .btn[disabled] { opacity: .35; pointer-events: none; }

/* Darstellung: Kacheln in den echten Farben + EINE Vorschau, die Farbthema
 * UND Hintergrund zusammen zeigt. Sie nutzt dieselben CSS-Variablen wie die
 * App, spiegelt also live das echte Ergebnis - ohne Speichern. */
.settings-theme-field { grid-column: 1 / -1; display: grid; gap: 10px; }
.settings-theme-label { font-size: 13px; font-weight: 700; color: var(--text); }
.settings-theme-label em { font-style: normal; font-weight: 500; color: var(--muted); }
.settings-theme-sub { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.color-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.color-mode-choice {
  display: grid; gap: 3px; min-height: 60px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card);
  color: var(--text); cursor: pointer;
}
.color-mode-choice strong { font-size: 13px; }
.color-mode-choice span { font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.color-mode-choice.active { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent); }
.theme-preview { display: grid; gap: 8px; margin: 2px 0 6px; }
.theme-preview-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.theme-preview-app {
  display: flex; gap: 0; height: 132px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
}
.theme-preview-side {
  flex: 0 0 84px; display: flex; flex-direction: column; gap: 7px; padding: 10px 9px;
  background: var(--card); border-right: 1px solid var(--border);
}
.theme-preview-brand { height: 12px; border-radius: 4px; background: var(--grad); }
.theme-preview-nav { height: 9px; border-radius: 4px; background: var(--surface-2); }
.theme-preview-nav.active { background: var(--primary); opacity: .85; }
.theme-preview-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; min-width: 0; }
.theme-preview-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--card);
}
.theme-preview-card strong { font-size: 12.5px; color: var(--text); }
.theme-preview-grade { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--grad); }
.theme-preview-row { display: flex; gap: 8px; }
.theme-preview-row span { flex: 1; height: 22px; border-radius: 7px; background: var(--surface); border: 1px solid var(--border-soft); }
.theme-preview-btn {
  align-self: flex-start; padding: 6px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 700; color: #fff; background: var(--grad);
}

@media (max-width: 560px) {
  .color-mode-grid { grid-template-columns: 1fr; }
}

/* Hintergrund-Kacheln zeigen Flaeche UND Kartenfarbe, damit der Unterschied
 * sichtbar wird (vorher nur ein einfarbiger Punkt). */
.surface-dot { position: relative; border: 1px solid rgba(15, 23, 42, .16); overflow: hidden; }
.surface-dot i {
  position: absolute; right: 3px; bottom: 3px; width: 56%; height: 46%;
  border-radius: 3px; box-shadow: 0 1px 2px rgba(15, 23, 42, .18);
}

/* Demo-Einstieg optisch abgesetzt: eigener Block mit Trennlinie und ruhigerer
 * Farbe - er ist eine Hilfe zum Ausprobieren, keine gleichwertige Hauptaktion,
 * ging als dritte gleich aussehende Karte aber unter. */
.onboarding-choice-help { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.choice-demo {
  display: grid; gap: 4px; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px; border: 1px dashed var(--primary); border-radius: 12px;
  background: var(--surface); color: var(--text);
}
.choice-demo:hover { background: var(--hover); }
.choice-demo strong { font-size: 14.5px; }
.choice-demo-badge {
  justify-self: start; padding: 2px 9px; border-radius: 999px; margin-bottom: 2px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: #fff; background: var(--grad);
}
.choice-demo-text { color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* ==========================================================================
   Design-Durchgang: Abstaende, Lesbarkeit, einheitliche Formularfelder
   ========================================================================== */

/* Leere Zustaende hatten place-items:center, aber keine Abstaende zwischen
   Symbol, Ueberschrift, Text und Schaltflaeche - alles klebte in der Mitte
   zusammen. Einheitlicher, ruhiger Rhythmus fuer alle leeren Ansichten. */
.exam-empty > div,
.ui-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 8px 16px;
}
.exam-empty h3, .ui-empty-title { margin: 0; font-size: 16px; line-height: 1.3; }
.exam-empty p, .ui-empty-text { margin: 0; max-width: 46ch; line-height: 1.55; }
.exam-empty .btn, .ui-empty .btn { margin-top: 4px; }
.exam-empty svg, .ui-empty-icon { margin-bottom: 2px; opacity: .75; }

/* Lizenz-Status: klare Hierarchie statt Text, der ineinanderlaeuft. */
.license-card { display: grid; gap: 10px; padding: 18px; }
.license-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.license-card-head > div { display: grid; gap: 6px; justify-items: start; }
.license-card-head h5 { margin: 0; font-size: 15.5px; line-height: 1.3; }
.license-card-head > strong {
  flex: 0 0 auto; padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; white-space: nowrap;
  color: var(--text); background: var(--surface-2);
}
.license-card p { margin: 0; line-height: 1.6; font-size: 13.5px; }
.license-card p + p { margin-top: -2px; }
.license-card .muted { font-size: 12.5px; }

/* Formularfelder ueberall gleich: Hoehe, Rahmen, Radius, Flaeche und Fokus.
   Vorher unterschieden sich Eingabefelder, Auswahlfelder und Textfelder je
   nach Ort (Modal, Einstellungen, Klassenformular) sichtbar voneinander. */
.modal input[type="text"], .modal input[type="email"], .modal input[type="password"],
.modal input[type="number"], .modal input[type="date"], .modal input[type="search"],
.modal select, .modal textarea,
.settings-form input, .settings-form select, .settings-form textarea,
.form-grid input, .form-grid select, .form-grid textarea,
.modal-label input, .modal-label select, .modal-label textarea,
.settings-field input, .settings-field select {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 400;
}
.modal textarea, .settings-form textarea, .form-grid textarea, .modal-label textarea {
  min-height: 90px; line-height: 1.5; resize: vertical;
}
.modal select, .settings-form select, .form-grid select,
.modal-label select, .settings-field select { cursor: pointer; }
.modal input:focus, .modal select:focus, .modal textarea:focus,
.settings-form input:focus, .settings-form select:focus, .settings-form textarea:focus,
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus,
.modal-label input:focus, .modal-label select:focus, .modal-label textarea:focus,
.settings-field input:focus, .settings-field select:focus {
  outline: none; border-color: var(--primary); box-shadow: var(--ring);
}
.modal input:disabled, .modal select:disabled,
.settings-form input:disabled, .settings-form select:disabled,
.settings-field input:disabled {
  background: var(--surface-2); color: var(--muted); cursor: not-allowed;
}
/* Beschriftungen einheitlich ueber dem Feld, mit ruhigem Abstand. */
.settings-form label, .form-grid label, .modal-label {
  display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text);
}

/* Auswahlfelder bleiben einzeilig: lange Optionstexte ("Gewichtet: muendlich /
   schriftlich", "Vollzeit - regulaer") brachen um und machten einzelne Felder
   50-54px hoch, waehrend daneben 40px standen. Jetzt ueberall gleich hoch. */
.modal select, .settings-form select, .form-grid select,
.modal-label select, .settings-field select {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* Gruppenueberschriften in den Einstellungen waren mit 10,5px zu klein zum
   bequemen Lesen. */
.settings-tab-label { font-size: 11.5px; }

/* Felder duerfen nicht mitwachsen, wenn eine Rasterzeile durch ein laengeres
   Label hoeher wird: sonst steht neben einem 40px-Feld plotzlich ein 54px-Feld
   (Ursache der ungleichen Hoehen im Klassenformular). */
.settings-form label, .form-grid label, .modal-label { align-content: start; }
.settings-form label > select, .settings-form label > input,
.form-grid label > select, .form-grid label > input,
.modal-label > select, .modal-label > input { align-self: start; }

/* Sitzplan-Werkzeugleiste: alle Bedienelemente auf eine Hoehe, und "Namen
   lernen" als eigene Uebung sichtbar hervorgehoben statt als blasser Knopf. */
.seat-teach-buttons { display: flex; gap: 8px; align-items: stretch; margin-left: auto; }
.seat-teach-actions .segmented button,
.seat-teach-buttons .btn { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.seat-learn-btn {
  border-color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
  color: var(--primary-dark);
  font-weight: 600;
}
.seat-learn-btn:hover { background: color-mix(in srgb, var(--primary) 20%, var(--card)); }

/* Hinweis auf den Nur-Lese-Zustand: deutlich, aber keine Fehlermeldung -
   die Daten sind ja unversehrt, nur das Schreiben ruht. */
.readonly-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
  font-size: 14px;
}
.readonly-banner > div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.readonly-banner strong { font-size: 14px; }
.readonly-banner span { color: var(--muted); }
.readonly-banner .btn { flex: none; }
@media (max-width: 720px) {
  .readonly-banner { flex-wrap: wrap; padding: 10px 14px; }
}

/* Touch-Haertung: Kopfaktionen und Breadcrumbs waren teilweise nur 28-42 px
   gross; Spaltenaktionen waren auf Touchgeraeten sogar transparent, weil dort
   kein verlaesslicher Hover-Zustand existiert. */
@media (max-width: 1180px) {
  header .icon-btn { min-width: 44px; }
  #breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (pointer: coarse) {
  .col-action-btn { width: 44px; height: 44px; opacity: .82; }
  .explain-btn { min-width: 44px; min-height: 44px; margin: 2px; }
  .pbtn { min-height: 44px; }
}