:root {
  --blau: #3b82f6;
  --blau-dunkel: #2563eb;
  --rot: #ef4444;
  --rot-hell: #fee2e2;
  --gruen: #22c55e;
  --grau: #6b7280;
  --rand: #e5e7eb;
  --bg: #f1f5f9;
  --karte-bg: #ffffff;
  --text: #0f172a;
  --sidebar-bg: #111827;
  --sidebar-text: #cbd5e1;
  --sidebar-active-bg: #1f2937;
}

html[data-theme="dunkel"] {
  --bg: #0b1220;
  --karte-bg: #151e2e;
  --text: #e5e7eb;
  --rand: #263244;
  --grau: #93a0b4;
  --rot-hell: #3b1620;
  --sidebar-bg: #060a13;
  --sidebar-text: #94a3b8;
  --sidebar-active-bg: #11192b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a { color: var(--blau); }

.app-shell { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */

.sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 6px 10px 20px;
}

.logo-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blau), #8b5cf6);
  display: inline-block;
}

.logo-dot.big { width: 36px; height: 36px; margin: 0 auto; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--sidebar-text);
  font-size: 0.95rem;
}

.sidebar-nav a .icon { width: 18px; text-align: center; opacity: 0.85; }

.sidebar-nav a:hover { background: var(--sidebar-active-bg); color: white; }

.sidebar-nav a.active {
  background: var(--blau);
  color: white;
}

.sidebar-logout {
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 10px 12px;
}

.sidebar-logout:hover { color: white; }

.sidebar-copyright {
  color: var(--sidebar-text);
  opacity: 0.5;
  font-size: 0.72rem;
  padding: 2px 12px 6px;
}

/* ---------- Content ---------- */

/* Bewusst KEIN max-width hier: .content soll den vollen verfuegbaren Platz
   neben der Sidebar einnehmen. Vorher stand hier max-width:1100px, wodurch
   .content auf breiten Bildschirmen schmaler als der verfuegbare Platz war
   und dadurch links kleben blieb (margin:auto in .dashboard-wrap konnte nur
   INNERHALB der schmalen .content-Box zentrieren, nicht im ganzen Fenster).
   Einzelne Unterseiten begrenzen ihre Breite selbst (z.B. .dashboard-wrap,
   .stack-form), damit sie trotzdem nicht endlos breit werden. */
.content { flex: 1; padding: 24px 28px; }

.login-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 16px;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.page-head h1 { margin: 0; font-size: 1.4rem; }

.card {
  background: var(--karte-bg);
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
}

.card h2 { margin-top: 0; font-size: 1.05rem; }

.hint { color: var(--grau); font-size: 0.88rem; }

.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.stack-form { display: flex; flex-direction: column; gap: 6px; max-width: 360px; }
.stack-form label { font-size: 0.85rem; color: var(--grau); margin-top: 6px; }

input, select, button, textarea {
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--rand);
  font-size: 0.95rem;
  background: var(--karte-bg);
  color: var(--text);
}

textarea {
  font-family: inherit;
  resize: none;
  overflow: hidden;
  line-height: 1.35;
}

button, .button {
  background: var(--blau);
  color: white;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-weight: 600;
  padding: 10px 16px;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}

button:hover, .button:hover {
  background: var(--blau-dunkel);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4);
  transform: translateY(-1px);
}

button:active, .button:active { transform: translateY(0); }

button:disabled {
  background: var(--rand);
  color: var(--grau);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.page-head .button { margin-top: 0; }

button.danger { background: var(--rot); margin-top: 0; }

table.list { width: 100%; border-collapse: collapse; margin-top: 12px; }

table.list th, table.list td {
  text-align: left;
  padding: 9px 6px;
  border-bottom: 1px solid var(--rand);
  font-size: 0.92rem;
}

.table-scroll { overflow-x: auto; }

.empty { color: var(--grau); font-style: italic; padding: 12px 0; }

.flash {
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 0.92rem;
}

.flash-info { background: #dbeafe; color: #1e3a8a; }
html[data-theme="dunkel"] .flash-info { background: #1e3a5f; color: #bfdbfe; }
.flash-fehler { background: var(--rot-hell); color: #991b1b; }
html[data-theme="dunkel"] .flash-fehler { color: #fca5a5; }

/* ---------- Login ---------- */

.login-box {
  max-width: 320px;
  width: 100%;
  background: var(--karte-bg);
  border: 1px solid var(--rand);
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.login-box h1 { font-size: 1.3rem; margin: 10px 0 16px; }
.login-box form { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Dashboard ---------- */

.dashboard-wrap { max-width: 640px; margin: 0 auto; }

.clock-card {
  background: linear-gradient(135deg, var(--blau), #8b5cf6);
  color: white;
  border-radius: 18px;
  padding: 34px;
  text-align: center;
  margin-bottom: 18px;
}

.clock-time { font-size: 3.6rem; font-weight: 700; line-height: 1; letter-spacing: 1px; }
.clock-date { margin-top: 8px; font-size: 1.05rem; opacity: 0.92; text-transform: capitalize; }

.stats-row { display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; justify-content: center; }

.stat-card {
  background: var(--karte-bg);
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 16px 20px;
  flex: 1;
  min-width: 140px;
  text-align: center;
}

.stat-value { font-size: 1.8rem; font-weight: 700; }
.stat-label { color: var(--grau); font-size: 0.85rem; margin-top: 4px; }

.klassen-grid { display: flex; gap: 10px; flex-wrap: wrap; }

.klassen-kachel {
  background: var(--bg);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 14px 18px;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
}

.klassen-kachel:hover { border-color: var(--blau); }

.klassen-grid.gross .klassen-kachel.gross {
  min-width: 160px;
  padding: 20px;
}

.klassen-name { font-size: 1.2rem; font-weight: 700; }
.klassen-meta { color: var(--grau); font-size: 0.85rem; margin-top: 4px; }

/* ---------- Klasse-Unterseiten ---------- */

.subtabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }

.subtabs a {
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
  background: var(--karte-bg);
  border: 1px solid var(--rand);
  font-size: 0.9rem;
}

.subtabs a.active { background: var(--blau); color: white; border-color: var(--blau); }

.schueler-zeile {
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--karte-bg);
}

.schueler-name { font-weight: 600; margin-bottom: 6px; }

.zeile-felder { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.chk { display: flex; align-items: center; gap: 4px; font-size: 0.9rem; white-space: nowrap; }

.chk input[type="checkbox"], .chk input[type="radio"] { width: 18px; height: 18px; }

.fehlt-chip {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--rand);
}

.fehlt-chip[data-fehlt="true"] {
  background: var(--rot-hell);
  color: #991b1b;
  border-color: var(--rot);
}

html[data-theme="dunkel"] .fehlt-chip[data-fehlt="true"] { color: #fca5a5; }

.note-feld, .notiz-feld, .niveau-feld {
  display: flex;
  flex-direction: column;
  font-size: 0.82rem;
  color: var(--grau);
  gap: 2px;
}

.note-feld input { width: 56px; }
.niveau-feld select {
  /* Breit genug fuer "★★★" + Dropdown-Pfeil (vorher 64px: Sterne abgeschnitten) */
  width: auto;
  min-width: 92px;
  padding-right: 24px;
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: clip;
}

.schueler-notiz {
  width: 220px;
  min-height: 1.6em;
  max-height: 8em;
  font-size: 0.85rem;
  vertical-align: middle;
}
.notiz-feld textarea {
  width: 220px;
  min-height: 2.4em;
  max-height: 10em;
}

.save-status { font-size: 0.8rem; color: var(--gruen); min-width: 48px; max-width: 220px; }

/* ---------- Schueler-Profil / Einzelauswertung ---------- */

.datum-tabelle { white-space: nowrap; }
.datum-tabelle th, .datum-tabelle td { text-align: center; }
.datum-tabelle th:first-child, .datum-tabelle td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--karte-bg);
  font-weight: 600;
}

/* Notiz-Zeile in der Datums-Tabelle: ohne Eintrag nur "-", MIT Eintrag ein
   <details>-Ausklapp-Element statt des vollen Texts direkt in der Zelle -
   sonst zieht eine einzelne lange Tagesnotiz die ganze Tabelle (alle Tage,
   alle Zeilen) in die Hoehe, obwohl meist nur ein einzelner Tag betroffen
   ist. Eingeklappt bleibt die Zeile genauso kompakt wie alle anderen. */
.datum-tabelle .notiz-toggle { white-space: normal; text-align: left; }
.datum-tabelle .notiz-toggle summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--blau);
  list-style: none;
}
.datum-tabelle .notiz-toggle summary::-webkit-details-marker { display: none; }
.datum-tabelle .notiz-toggle summary::before { content: "▸ "; }
.datum-tabelle .notiz-toggle[open] summary::before { content: "▾ "; }
.datum-tabelle .notiz-toggle .notiz-inhalt {
  margin-top: 4px;
  max-width: 220px;
  white-space: normal;
  font-size: 0.88rem;
}

.chart-wrap { overflow-x: auto; }
.chart-wrap svg { display: block; max-width: 100%; }

.chart-gitter { stroke: var(--rand); stroke-width: 1; }
.chart-achse { fill: var(--grau); font-size: 11px; }
.chart-legende { fill: var(--text); font-size: 11px; }
.chart-balken-hg { fill: var(--rand); }

.auswertung-button { background: var(--gruen); box-shadow: 0 2px 6px rgba(34, 197, 94, 0.35); }
.auswertung-button:hover { background: #16a34a; box-shadow: 0 4px 10px rgba(34, 197, 94, 0.4); }

/* ---------- Einstellungen ---------- */

.sync-status { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.status-dot.gruen { background: var(--gruen); }
.status-dot.grau { background: var(--grau); }
.status-dot.rot { background: #ef4444; }

.fach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: 6px 6px 6px 12px;
  font-size: 0.9rem;
  margin-right: 6px;
}

.fach-chip-entfernen {
  background: transparent;
  color: var(--grau);
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 0 4px;
  font-size: 1rem;
  line-height: 1;
}

.fach-chip-entfernen:hover { background: transparent; color: var(--rot); box-shadow: none; transform: none; }

.gefahr-karte { border-color: var(--rot); }

/* ---------- Begruessung + Klassen-Gruppierung (Dashboard/Klassenuebersicht) ---------- */

.begruessung { text-align: center; margin: 4px 0 18px; font-size: 1.6rem; }

.klassen-gruppen { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.klassen-gruppe {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  padding: 14px;
  border: 1px solid var(--rand);
  border-radius: 12px;
}

.klassen-gruppe-titel {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.klassen-gruppe-titel:hover { color: var(--blau); }

.klassen-fach-kachel {
  background: var(--bg);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
}

.klassen-fach-kachel:hover { border-color: var(--blau); }

/* ---------- Klasse anlegen: Faecher + Kategorien ---------- */

.fach-block {
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.fach-checkbox { margin-bottom: 6px; }

.kategorien-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-left: 24px;
}

details > summary { cursor: pointer; font-weight: 600; }
details .hint { margin-top: 8px; }

@media (max-width: 760px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; padding: 10px; }
  .sidebar-brand { padding: 0 10px 0 0; }
  .sidebar-nav { flex-direction: row; overflow-x: auto; flex: 1; }
  .sidebar-nav a span.icon { display: none; }
  .sidebar-logout { display: none; }
  .sidebar-copyright { display: none; }
  .content { padding: 14px; }
  .zeile-felder { flex-direction: column; align-items: flex-start; }
  .clock-time { font-size: 2.6rem; }
}

/* Zeitraum-Auswahl (Auswertungen) */
.zeitraum-label { display: flex; flex-direction: column; font-size: 0.82rem; color: var(--grau); gap: 2px; }
.zeitraum-presets { margin-top: 8px; }

/* Backup-Erinnerung */
.backup-dialog { border: 1px solid var(--rand); border-radius: 12px; padding: 22px 26px; max-width: 460px;
  background: var(--karte-bg); color: var(--text); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.backup-dialog::backdrop { background: rgba(0,0,0,.45); }
.backup-dialog h2 { margin-top: 0; }
button.grau-btn { background: var(--grau); margin-top: 0; }


/* ---------- Dunkles Theme: Formularelemente (Kalender-Symbol usw.) hell darstellen ---------- */
html[data-theme="dunkel"] { color-scheme: dark; }
/* Nur color-scheme: dark macht das Kalendersymbol weiss - ein zusaetzlicher
   invert-Filter wuerde es wieder schwarz drehen (doppelte Umkehrung). */
html[data-theme="dunkel"] input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }

/* ---------- Tests & Klausuren ---------- */
table.tests-tabelle th, table.tests-tabelle td { white-space: nowrap; }
table.tests-tabelle .zahl { text-align: center; min-width: 70px; }
table.tests-tabelle .summe { border-left: 2px solid var(--rand); font-weight: 600; }
table.tests-tabelle .sticky-name {
  position: sticky; left: 0; background: var(--karte-bg); z-index: 1; min-width: 150px;
}
table.tests-tabelle tfoot td { font-weight: 600; border-top: 2px solid var(--rand); }
table.tests-tabelle tfoot .spiegelzeile td { font-weight: 400; color: var(--grau); border-top: 0; }
table.tests-tabelle tfoot .summenzeile td { border-top: 2px solid var(--rand); }

/* ---------- Schuelersuche (Unterricht erfassen) ---------- */
.schueler-suche { margin-bottom: 12px; }
.schueler-suche input { width: 100%; max-width: 360px; }


/* ---- Admin / Konten ---- */
.sidebar-brand small { display: block; font-size: 11px; opacity: .7; font-weight: 400; margin-top: 2px; }
.zugang-karte { border: 2px solid var(--accent, #2f6fdd); }
.zugang-tabelle th { width: 180px; text-align: left; }
.zugang-tabelle code { font-size: 1.15em; user-select: all; }
.tabelle-scroll { overflow-x: auto; }
.badge-gruen, .badge-gelb, .badge-rot { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.badge-gruen { background: #d9f2e0; color: #17612d; }
.badge-gelb { background: #fdf0c8; color: #7a5a00; }
.badge-rot { background: #fadadd; color: #8a1c1c; }
html[data-theme="dunkel"] .badge-gruen { background: #1f4a2c; color: #bdeacb; }
html[data-theme="dunkel"] .badge-gelb { background: #5a4710; color: #f6e2a0; }
html[data-theme="dunkel"] .badge-rot { background: #5a2025; color: #f4c3c6; }
td details summary { cursor: pointer; color: var(--accent, #2f6fdd); }
td details form { margin: 8px 0; }

/* ---------- Datei-Auswahl (Upload) - passend zu Buttons, auch im Dark Mode ---------- */
input[type="file"] {
  padding: 6px;
  background: var(--karte-bg);
  color: var(--text);
  border: 1px solid var(--rand);
  border-radius: 9px;
  max-width: 100%;
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  background: var(--blau);
  color: #fff;
  border: 0;
  border-radius: 7px;
  padding: 7px 14px;
  margin-right: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
input[type="file"]::file-selector-button:hover { background: var(--blau-dunkel); }

/* ---------- Beta-Hinweis ---------- */
.beta-hinweis {
  margin: 28px auto 6px;
  text-align: center;
  padding: 10px 12px;
  border: 1px dashed var(--rand);
  border-radius: 9px;
  color: var(--grau);
  font-size: 0.78rem;
  line-height: 1.4;
  max-width: 760px;
}
.login-content .beta-hinweis { margin: 16px auto 0; max-width: 420px; }
.verstanden { display: flex; gap: 8px; align-items: flex-start; font-size: 0.82rem; line-height: 1.35;
  white-space: normal; text-align: left; }
.verstanden span { flex: 1; min-width: 0; }
.verstanden input { margin-top: 3px; }

/* ---------- Admin: Online-Punkt, Theme-Schalter ---------- */
.punkt { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.punkt-an { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25); }
.punkt-aus { background: var(--rand); }
.sidebar-theme { margin: 0; padding: 0 6px; }
.sidebar-theme button {
  width: 100%; margin: 0 0 4px; justify-content: flex-start;
  background: transparent; color: var(--sidebar-text); box-shadow: none; font-weight: 500;
  font-size: 0.85rem; border: 1px solid transparent; padding: 10px 12px;
}
.sidebar-theme button:hover { background: var(--sidebar-active-bg); color: white; transform: none; box-shadow: none; }

/* ---------- Tickets ---------- */
.nav-badge {
  display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 6px;
  border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.72rem; font-weight: 700;
  text-align: center; line-height: 1.5;
}
.badge-blau, .badge-grau { padding: 2px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.badge-blau { background: #dbeafe; color: #1e40af; }
.badge-grau { background: #e5e7eb; color: #374151; }
html[data-theme="dunkel"] .badge-blau { background: #1e3a5f; color: #bfdbfe; }
html[data-theme="dunkel"] .badge-grau { background: #2b3648; color: #cbd5e1; }
.ticket-form { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.ticket-form textarea { min-height: 130px; overflow: auto; resize: vertical; width: 100%; }
.ticket-form input[type="text"] { width: 100%; }
.ticket-warnung { font-size: 0.82rem; color: var(--grau); border-left: 3px solid #f59e0b; padding: 4px 10px; margin: 4px 0; }
.ticket-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 12px; }
.ticket-bild { max-width: 100%; max-height: 480px; border: 1px solid var(--rand); border-radius: 9px; display: block; margin: 8px 0; }
.ticket-antwort { border-left: 3px solid var(--blau); padding: 6px 12px; margin: 10px 0; background: rgba(59, 130, 246, 0.08); border-radius: 0 9px 9px 0; }
.status-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-links { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.filter-links a { padding: 5px 12px; border: 1px solid var(--rand); border-radius: 999px; text-decoration: none; font-size: 0.85rem; color: var(--text); }
.filter-links a.aktiv { background: var(--blau); border-color: var(--blau); color: #fff; }
tr.ticket-neu td { font-weight: 600; }
.status-buttons button { margin-top: 0; }

/* ---------- App-Anleitung (oeffentliche Seite) ---------- */
.anleitung { width: 100%; max-width: 720px; text-align: left; }
.anleitung h1 { margin: 6px 0; }
.anleitung .card { margin-bottom: 14px; }
.anleitung .button { display: inline-flex; margin-top: 0; }
.schritte { padding-left: 22px; line-height: 1.5; }
.schritte li { margin: 6px 0; }