:root {
  /* ── Akzent-Tripel (r,g,b OHNE Alpha) ───────────────────────────────
     Zweck: Flächen mit BELIEBIGER Deckung themefähig machen. Die fertigen
     Werte unten (--mint-light/-mid …) decken nur je zwei feste Alphas ab;
     in den Modulen stehen aber Dutzende Zwischenwerte (0.14 … 0.55). Wer
     die auf --mint-mid umbiegt, ändert das Aussehen im Standard-Stil.
     Deshalb: rgba(var(--mint-rgb), 0.28) — Deckung bleibt exakt erhalten,
     die Farbe folgt dem Stil. Jeder Farbstil setzt die vier Tripel neu.
     Sie sind IMMER identisch mit --mint/--lavender/--alarm/--yellow;
     wer dort eine Farbe ändert, ändert hier mit. */
  --mint-rgb:     126,216,176;
  --lav-rgb:      155,174,224;
  --alarm-rgb:    242,139,130;
  --yellow-rgb:   255,217,125;
  /* ── Semantische Ampel ──────────────────────────────────────────────
     Gruen/Gelb/Rot tragen hier BEDEUTUNG: bezahlt/offen, anwesend/fehlt,
     gespeichert/Fehler, Ferien/Vertretung.

     Sie folgen dem Farbstil, ABER nur in Saettigung und Waerme — der
     FARBTON bleibt: Gruen bleibt gruen, Rot bleibt rot. Sonst ginge die
     Aussage verloren (in Mono waeren sonst alle Zustaende dasselbe Grau,
     in Cub alle braun). Cub bekommt also ein warmes Moosgruen, Graphit
     ein kuehles, Mono ein stark entsaettigtes — unterscheidbar bleibt es
     ueberall. Jeder Stilblock setzt die sechs Werte neu.

     NICHT verwechseln mit --mint/--lavender/--alarm/--yellow: das sind
     Schmuckfarben ohne Bedeutung. Wer einen ZUSTAND faerbt, nimmt --ok-*,
     --warn-* oder --err-*; wer nur schmueckt, die anderen. */
  --ok-rgb:       126,216,176;
  --warn-rgb:     255,217,125;
  --err-rgb:      242,139,130;
  --ok-ink:       #1a6844;
  --warn-ink:     #7a5000;
  --err-ink:      #8a2d3a;
  /* ── Kategorien-Palette (--kat1 … --kat6) ────────────────────────────
     Für Merkmale, die NEBENEINANDER stehen und auseinandergehalten werden
     müssen, ohne eine Wertung zu tragen: Förderbedarf (LRS/ADS/Mathe …),
     später frei benennbar je Schule. Deshalb NUMMERIERT und nicht „lrs",
     „ads": die Bezeichnung gehört der Schule, der Platz gehört dem Stil.

     Wie die Ampel folgen sie dem Farbstil in Sättigung und Wärme, behalten
     aber ihren FARBTON — sonst wären zwei Merkmale nicht mehr zu trennen.
     Sechs Plätze, damit für neue Kategorien keiner nachlegen muss.

     Nutzung: Fläche rgba(var(--katN-rgb), .18), Rand …, .45), Schrift
     var(--katN-ink). NICHT für Zustände nehmen — dafür gibt es die Ampel. */
  --kat1-rgb:     234,179,8;      --kat1-ink: #854D0E;
  --kat2-rgb:     139,92,246;     --kat2-ink: #5B21B6;
  --kat3-rgb:     59,130,246;     --kat3-ink: #1E40AF;
  --kat4-rgb:     20,166,150;     --kat4-ink: #10554C;
  --kat5-rgb:     236,113,166;    --kat5-ink: #8C2B57;
  --kat6-rgb:     130,116,90;     --kat6-ink: #4A4130;
  --mint:         #7ED8B0;
  --mint-light:   rgba(126,216,176,0.18);
  --mint-mid:     rgba(126,216,176,0.35);
  --lavender:     #9BAEE0;
  --lav-light:    rgba(155,174,224,0.18);
  --lav-mid:      rgba(155,174,224,0.35);
  --alarm:        #F28B82;
  --yellow:       #FFD97D;
  --yel-light:    rgba(255,217,125,0.22);
  --glass:        rgba(255,255,255,0.28);
  --glass-b:      rgba(255,255,255,0.12);
  --glass-stroke: rgba(255,255,255,0.55);
  --text:         #2D2A40;
  --text-mid:     #5A5670;
  --text-light:   #8E8AAD;
  --radius:       22px;
  --radius-sm:    14px;
  --shadow:       0 8px 32px rgba(60,50,120,0.13);
  --shadow-lg:    0 20px 60px rgba(60,50,120,0.22);
  --blur:         blur(20px);
  --transition:   0.28s cubic-bezier(.4,0,.2,1);
  /* ── Aktions-Buttons: EINE Primär-Optik app-weit ──
     Alle Speichern-/Übernehmen-/Anlegen-Buttons und FABs nutzen --btn-bg,
     Lösch-Aktionen --btn-danger-bg. Verspielt = Verlauf in die dunklere
     Primärfarbe; die ruhigen Farbstile überschreiben unten auf EINFARBIG —
     dadurch gibt es dort keine Fremdfarben-Verläufe (z. B. Braun→Blau). */
  --btn-bg:        linear-gradient(135deg, var(--lavender), #7b9cd8);
  --btn-mint-bg:   linear-gradient(135deg, var(--mint), #54c99a);
  --btn-danger-bg: linear-gradient(135deg, var(--alarm), #e85d52);
  --btn-warn-bg:   linear-gradient(135deg, #fbbf24, #f59e0b);
  --btn-shadow:    0 4px 16px rgba(155,174,224,0.42);
  --btn-shadow-h:  0 8px 26px rgba(155,174,224,0.55);
  --sheet-bg:    rgba(245,244,255,0.97);
  --card:        #F7F6FF;
}

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

/* Globale Klasse für die ersetzten PNG-Emojis */
.icon-png {
  height: 1.2em;
  width: 1.2em;            /* Quadratisch — gleiche Breite wie Höhe */
  object-fit: contain;
  object-position: center; /* Motiv immer aus der Mitte skalieren */
  vertical-align: middle;
  position: relative;
  top: -0.08em;            /* Optische Korrektur: leicht nach oben */
  margin-right: 4px;
  margin-left: 1px;
  display: inline-block;
}

body {
  font-family: 'Nunito', sans-serif;
  min-height: 100vh;
  color: var(--text);
  overflow-x: hidden;
}

/* ── ANIMATED MESH BACKGROUND ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 70% 60% at 15% 20%, rgba(var(--mint-rgb), 0.55) 0%, transparent 65%),
    radial-gradient(ellipse 60% 70% at 85% 80%, rgba(var(--lav-rgb), 0.60) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 80% 15%, rgba(var(--yellow-rgb), 0.35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 55% at 20% 85%, rgba(var(--alarm-rgb), 0.28) 0%, transparent 60%),
    linear-gradient(135deg, #EAE7F7 0%, #D4EEE4 50%, #DBD8F2 100%);
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  pointer-events: none;
}

/* ── FLOATING ORBS ── */
.orb {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: -1;
  filter: blur(60px); opacity: 0.35;
  animation: float linear infinite;
}
.orb-1 { width: 300px; height: 300px; background: var(--mint);    top: -80px;  left: -60px;  animation-duration: 18s; }
.orb-2 { width: 250px; height: 250px; background: var(--lavender); bottom: -60px; right: -40px; animation-duration: 22s; animation-delay: -8s; }
.orb-3 { width: 180px; height: 180px; background: var(--yellow);  top: 40%;    left: 60%;   animation-duration: 15s; animation-delay: -4s; }
/* Dashboard: Orbs etwas lebendiger */
body.on-dashboard .orb-1 { animation-duration: 12s; opacity: 0.42; }
body.on-dashboard .orb-2 { animation-duration: 15s; opacity: 0.45; }
body.on-dashboard .orb-3 { animation-duration: 10s; opacity: 0.38; }

@keyframes float {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(30px,-20px) scale(1.05); }
  66%  { transform: translate(-20px,30px) scale(0.97); }
  100% { transform: translate(0,0) scale(1); }
}

/* ══════════════════════════════════════════
   SCREEN MANAGEMENT
══════════════════════════════════════════ */
.screen {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 20px;
  animation: screenIn 0.38s cubic-bezier(.4,0,.2,1) both;
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.screen.hidden {
  display: none;
}

/* ══════════════════════════════════════════
   SCREEN 1 – PROFIL-AUSWAHL
══════════════════════════════════════════ */
.greeting-label {
  font-family: 'Fraunces', serif;
  font-size: 0.8rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-light); margin-bottom: 6px;
  animation: fadeUp 0.6s ease both;
}
.greeting-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(2rem, 6vw, 2.8rem);
  font-weight: 300; line-height: 1.15;
  color: var(--text); text-align: center;
  margin-bottom: 10px;
  animation: fadeUp 0.6s 0.08s ease both;
}
.greeting-title span { font-weight: 600; color: var(--lavender); }
.greeting-sub {
  font-size: 0.82rem; font-weight: 600; color: var(--text-light);
  letter-spacing: 0.04em; text-align: center; margin-bottom: 48px;
  animation: fadeUp 0.6s 0.14s ease both;
}

.profile-grid {
  display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
  animation: fadeUp 0.6s 0.2s ease both;
}

.profile-card {
  background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1.5px solid var(--glass-stroke);
  border-radius: 28px; padding: 36px 28px 28px;
  text-align: center; cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow);
  width: 160px; min-height: 190px;
  position: relative; overflow: hidden;
}
.profile-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 60%);
  pointer-events: none;
}
.profile-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255,255,255,0.8);
}
.profile-card:active { transform: scale(0.97); }

.profile-card.lieven .avatar-ring { background: linear-gradient(135deg, var(--mint), var(--lavender)); }
.profile-card.daniela .avatar-ring { background: linear-gradient(135deg, var(--alarm), var(--yellow)); }

.avatar-ring {
  width: 72px; height: 72px; border-radius: 50%;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(60,50,120,0.2);
  position: relative;
}
.avatar-ring::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: var(--transition);
}
.profile-card:hover .avatar-ring {
  box-shadow: 0 0 0 4px rgba(255,255,255,0.45), 0 6px 24px rgba(60,50,120,0.28);
  animation: avatarPulse 1.8s ease-in-out infinite;
}
@keyframes avatarPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,0.45), 0 6px 24px rgba(60,50,120,0.25); }
  50%       { box-shadow: 0 0 0 8px rgba(255,255,255,0.20), 0 8px 28px rgba(60,50,120,0.35); }
}
.avatar-initial {
  font-family: 'Fraunces', serif;
  font-size: 1.9rem; font-weight: 600; color: white;
  position: relative; z-index: 1; letter-spacing: -1px;
}

.profile-name {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem; font-weight: 600; color: var(--text);
  margin-bottom: 4px;
}
.profile-role {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-light);
}

.profile-card.lieven .profile-role { color: #4a9a7a; }
.profile-card.daniela .profile-role { color: #b05060; }

/* ══════════════════════════════════════════
   SCREEN 2 – LOGIN OVERLAY
══════════════════════════════════════════ */
#screen-login {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(216,212,240,0.6);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
}

.login-card {
  background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1.5px solid var(--glass-stroke);
  border-radius: 32px; padding: 44px 36px 36px;
  box-shadow: var(--shadow-lg);
  width: 90%; max-width: 360px;
  text-align: center;
  position: relative; overflow: hidden;
  animation: popIn 0.35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.88) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.login-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 55%);
  pointer-events: none; border-radius: 32px;
}

.login-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(60,50,120,0.22);
}
.login-avatar .avatar-initial { font-size: 2.1rem; }

.login-title {
  font-family: 'Fraunces', serif;
  font-size: 1.6rem; font-weight: 300; color: var(--text);
  margin-bottom: 4px;
}
.login-title span { font-weight: 600; }
.login-subtitle {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-light); margin-bottom: 28px;
}

.pass-input {
  width: 100%; padding: 15px 18px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--glass-stroke);
  background: rgba(255,255,255,0.55);
  font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 600;
  color: var(--text); outline: none;
  transition: var(--transition); letter-spacing: 0.12em;
  box-shadow: inset 0 2px 8px rgba(60,50,120,0.06);
}
.pass-input:focus {
  border-color: var(--lavender);
  background: rgba(255,255,255,0.75);
  box-shadow: 0 0 0 3px rgba(var(--lav-rgb), 0.2), inset 0 2px 8px rgba(60,50,120,0.06);
}
.pass-input.shake {
  animation: shake 0.4s ease;
  border-color: var(--alarm);
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}

.btn-primary {
  width: 100%; margin-top: 14px; padding: 14px;
  border-radius: var(--radius-sm); border: none;
  background: var(--btn-bg);
  color: white; font-family: 'Nunito', sans-serif;
  font-size: 0.95rem; font-weight: 800; letter-spacing: 0.04em;
  cursor: pointer; transition: var(--transition);
  box-shadow: var(--btn-shadow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--btn-shadow-h); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.6; cursor: default; transform: none; }

.btn-secondary {
  background: none; border: none; color: var(--text-light);
  font-family: 'Nunito', sans-serif; font-size: 0.85rem; font-weight: 700;
  cursor: pointer; margin-top: 12px; letter-spacing: 0.03em;
  transition: var(--transition);
}
.btn-secondary:hover { color: var(--text-mid); }

/* Klar erkennbarer Sekundär-Button (z.B. Onboarding „Avatar/Stil selbst
   anpassen"): anders als .btn-secondary (reiner Text-Link) mit Rahmen + Fläche,
   damit er eindeutig als Button lesbar ist. Theme-adaptiv über die Tokens. */
.btn-outline {
  width: 100%; margin-top: 10px; padding: 13px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--lavender); background: transparent;
  color: var(--text); font-family: 'Nunito', sans-serif;
  font-size: 0.9rem; font-weight: 800; letter-spacing: 0.03em;
  cursor: pointer; transition: var(--transition);
}
.btn-outline:hover { transform: translateY(-2px); border-color: var(--text-mid); }
.btn-outline:active { transform: scale(0.98); }

.error-msg {
  font-size: 0.78rem; font-weight: 700; color: var(--alarm);
  margin-top: 10px; min-height: 18px; letter-spacing: 0.02em;
}

/* Loading spinner */
.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: white;
  border-radius: 50%; animation: spin 0.7s linear infinite;
  vertical-align: middle; margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════
   TEACHERCUBS BRAND-BANNER
   Drei Größen: lg (Login), md (Onboarding), sm (Dashboard-Footer)
══════════════════════════════════════════ */
.brand-banner {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-left: auto; margin-right: auto;
  filter: drop-shadow(0 4px 14px rgba(60,50,120,0.12));
}
.brand-banner-lg {
  width: 280px;
  margin-bottom: 14px;
  animation: fadeUp 0.65s ease both;
}
.brand-banner-md {
  width: 200px;
  margin-bottom: 10px;
  animation: fadeUp 0.55s ease both;
}
.brand-banner-sm {
  width: 225px;
  margin: 28px auto 32px;
  opacity: 0.65;
  transition: opacity 0.24s;
  animation: fadeUp 0.5s 0.3s ease both;
}
.brand-banner-sm:hover { opacity: 0.92; }
@media (max-width: 620px) {
  .brand-banner-lg { width: 230px; }
  .brand-banner-md { width: 170px; }
  .brand-banner-sm { width: 195px; margin: 20px auto 28px; }
}

/* ══════════════════════════════════════════
   ANMELDUNG – Name eintragen / Neuer User
══════════════════════════════════════════ */
.entry-card {
  background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1.5px solid var(--glass-stroke);
  border-radius: 28px; padding: 32px 28px 28px;
  width: 90%; max-width: 360px;
  text-align: center;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: fadeUp 0.6s 0.2s ease both;
}
.entry-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 60%);
  pointer-events: none;
}
.entry-card > * { position: relative; z-index: 1; }

/* Text-Eingabefeld (Name / E-Mail) — Pendant zu .pass-input */
.text-input {
  width: 100%; padding: 15px 18px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--glass-stroke);
  background: rgba(255,255,255,0.55);
  font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 600;
  color: var(--text); outline: none;
  transition: var(--transition);
  box-shadow: inset 0 2px 8px rgba(60,50,120,0.06);
  margin-bottom: 12px;
}
.entry-card .text-input:last-of-type { margin-bottom: 0; }
.text-input::placeholder { color: var(--text-light); font-weight: 600; }
.text-input:focus {
  border-color: var(--lavender);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 0 0 3px rgba(var(--lav-rgb), 0.2), inset 0 2px 8px rgba(60,50,120,0.06);
}

/* „Neuer User"-Button — sekundär, dezent umrandet */
.btn-newuser {
  width: 100%; margin-top: 10px; padding: 12px;
  border-radius: var(--radius-sm);
  border: 1.5px dashed rgba(var(--lav-rgb), 0.6);
  background: rgba(255,255,255,0.25);
  color: var(--text-mid); font-family: 'Nunito', sans-serif;
  font-size: 0.85rem; font-weight: 800; letter-spacing: 0.03em;
  cursor: pointer; transition: var(--transition);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.btn-newuser:hover {
  border-color: var(--lavender);
  background: rgba(var(--lav-rgb), 0.16);
  color: var(--text);
}
.btn-newuser:active { transform: scale(0.98); }
.btn-newuser-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--lavender); color: white;
  font-size: 0.95rem; font-weight: 900; line-height: 1;
}

/* Registrierungs-Screen: Felder im login-card etwas Abstand geben */
#screen-register .login-card .text-input,
#screen-register .login-card .pass-input { margin-bottom: 12px; }
#screen-register .login-card .error-msg  { margin-bottom: 4px; }

/* Tageszeit-Bär in der Dashboard-Begrüßung */
.dash-timebear {
  height: 80px; width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(60,50,120,0.25));
  animation: fadeUp 0.5s 0.1s ease both;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   ONBOARDING — Bundesland + Schulform-Picker
══════════════════════════════════════════ */
.onboard-card { text-align: left; padding: 28px 24px 24px; }
.onboard-card .btn-primary { margin-top: 6px; }

.ob-label {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-light);
  margin: 4px 2px 7px;
}
.ob-label + .ob-label { margin-top: 18px; }

.ob-select {
  width: 100%; padding: 14px 40px 14px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--glass-stroke);
  background: rgba(255,255,255,0.55);
  font-family: 'Nunito', sans-serif;
  font-size: 0.98rem; font-weight: 600;
  color: var(--text); outline: none;
  cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239BAEE0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
  transition: var(--transition);
  box-shadow: inset 0 2px 8px rgba(60,50,120,0.06);
  margin-bottom: 18px;
}
.ob-select:focus {
  border-color: var(--lavender);
  background-color: rgba(255,255,255,0.82);
  box-shadow: 0 0 0 3px rgba(var(--lav-rgb), 0.22), inset 0 2px 8px rgba(60,50,120,0.06);
}
.ob-select:last-of-type { margin-bottom: 6px; }
.ob-select option { background: white; color: var(--text); padding: 8px; }
.ob-select option[value=""] { color: var(--text-light); }

/* ══════════════════════════════════════════
   SCREEN 3 – DASHBOARD
══════════════════════════════════════════ */
#screen-dashboard {
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

.dash-header {
  padding: 36px 24px 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  max-width: 640px; width: 100%; margin: 0 auto;
  animation: fadeUp 0.5s ease both;
}
/* Reihenfolge: Greeting links, Bear Mitte, Abmelden rechts */
.dash-header-left   { order: 1; flex: 1; min-width: 0; }
.dash-timebear      { order: 2; }
.logout-btn         { order: 3; }
.dash-header-left h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 300; line-height: 1.15;
  color: var(--text);
}
#dash-greeting { font-weight: 300; color: var(--text); }
#dash-name { font-weight: 600; color: var(--lavender); }
.dash-header-sub {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-light); margin-top: 4px;
}
.logout-btn {
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1.5px solid var(--glass-stroke); border-radius: 50px;
  padding: 8px 16px; font-family: 'Nunito', sans-serif;
  font-size: 0.78rem; font-weight: 800; color: var(--text-mid);
  cursor: pointer; transition: var(--transition); box-shadow: var(--shadow);
  letter-spacing: 0.04em; white-space: nowrap; text-decoration: none;
}
.logout-btn:hover { background: rgba(255,255,255,0.5); color: var(--text); }

.dash-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-stroke), transparent);
  max-width: 640px; width: 100%; margin: 24px auto 0;
  animation: fadeUp 0.5s 0.08s ease both;
}

.dash-section-label {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-light);
  padding: 20px 24px 12px;
  max-width: 640px; width: 100%; margin: 0 auto;
  animation: fadeUp 0.5s 0.12s ease both;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 14px;
  padding: 0 24px 40px;
  max-width: 640px; width: 100%; margin: 0 auto;
  animation: fadeUp 0.5s 0.18s ease both;
}

.app-tile {
  background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1.5px solid var(--glass-stroke);
  border-radius: 22px; padding: 24px 16px 20px;
  text-align: center; cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
  text-decoration: none; color: inherit;
  display: block;
}
.app-tile::before {
  content: ''; position: absolute; inset: 0; border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,0.45) 0%, transparent 55%);
  pointer-events: none; z-index: 1;
}
/* Shimmer-Reflex beim Hover */
.app-tile::after {
  content: ''; position: absolute; inset: 0; border-radius: 22px;
  background: linear-gradient(
    115deg,
    transparent 0%, transparent 35%,
    rgba(255,255,255,0.50) 50%,
    transparent 65%, transparent 100%
  );
  background-size: 300% 300%;
  background-position: 200% 0%;
  transition: background-position 0.55s cubic-bezier(.4,0,.2,1);
  pointer-events: none; z-index: 2;
}
.app-tile:hover {
  transform: translateY(-5px) scale(1.025);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255,255,255,0.8);
}
.app-tile:hover::after {
  background-position: -50% 0%;
}
.app-tile:active { transform: scale(0.97); }

/* Modulfarb-Codierung: bewusst themenunabhängig konstant (wie die Squircles) */
.app-tile.mint  .tile-icon-bg { background: linear-gradient(135deg, #7ED8B0, #54c99a); }
.app-tile.lav   .tile-icon-bg { background: linear-gradient(135deg, #9BAEE0, #7b9cd8); }
.app-tile.alarm .tile-icon-bg { background: linear-gradient(135deg, #F28B82, #f5a89e); }
.app-tile.yel   .tile-icon-bg { background: linear-gradient(135deg, #FFD97D, #f5c842); }

.tile-icon-bg {
  width: 54px; height: 54px; border-radius: 16px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(60,50,120,0.18);
  font-size: 1.5rem;
}

/* PNG-Icons: Hintergrund (Squircle) wird jetzt per CSS gemalt,
   da die Icon-PNGs transparent sind (Alphakanal). */
.tile-icon-bg.tile-icon-png {
  background: none;
  box-shadow: none;
  overflow: visible;
  padding: 0;
  width: 96px !important;
  height: 96px !important;
  min-width: 96px;
  min-height: 96px;
  max-width: 96px;
  max-height: 96px;
  flex-shrink: 0;
}
/* Squircle-Fläche hinter dem transparenten Icon */
.tile-icon-bg.tile-icon-png.tile-squircle {
  background: var(--sq, #fff) !important;
  border-radius: 27px;
  box-shadow: 0 6px 20px rgba(60,50,120,0.18),
              inset 0 1px 1px rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center;
}
.tile-png {
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  display: block;
  box-shadow: none;
}

/* ── HOME-BUTTON (für alle Unterseiten) ──
   Einbindung in Modulen:
   <a class="logout-btn home-btn" href="/app.html">
     <img src="/Icons/Apps/Klassisch/home.png" alt="Home" class="home-btn-icon"> Home
   </a>
   Hinweis: sidebar.js patcht den src automatisch auf
   /Icons/Apps/Klassisch/home.png — kein manuelles Update der Modul-HTMLs
   nötig. Im Bären-Stil wird daraus /Icons/Apps/Minimal/home.png (theme.js).
*/
.home-btn-icon {
  width: 20px; height: 20px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 5px;
  display: inline-block;
}
.tile-name {
  font-family: 'Fraunces', serif;
  font-size: 0.95rem; font-weight: 600; color: var(--text);
  margin-bottom: 3px;
}
.tile-desc {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-light);
}

.app-tile.coming-soon {
  opacity: 0.55; cursor: default;
}
.app-tile.coming-soon:hover { transform: none; box-shadow: var(--shadow); }
.coming-badge {
  position: absolute; top: 10px; right: 10px;
  font-size: 0.58rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase;
  background: rgba(255,255,255,0.6); color: var(--text-light);
  padding: 2px 7px; border-radius: 50px;
}

/* ── GLOBAL ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── PROFILE STAGGER ── */
.profile-card:nth-child(1) { animation: fadeUp 0.55s 0.25s ease both; }
.profile-card:nth-child(2) { animation: fadeUp 0.55s 0.35s ease both; }

.hidden {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   ERWEITERTE DESIGN-TOKENS & SHARED UTILITIES  — v2
   Ergänzt style.css mit fehlenden Variablen, universellen
   Micro-Interactions und Konsistenz-Patches für alle Module.
══════════════════════════════════════════════════════════════ */

/* ── Erweiterte CSS-Variablen ─────────────────────────────── */
:root {
  /* Glassmorphismus-Abstufungen (ersetzt hardcodierte rgba-Werte) */
  --glass-1:       rgba(255,255,255,0.18);   /* dezente Fläche          */
  --glass-2:       rgba(255,255,255,0.28);   /* Standard (= --glass)    */
  --glass-3:       rgba(255,255,255,0.42);   /* Betont / Overlay        */
  --glass-4:       rgba(255,255,255,0.65);   /* Stark / Modal           */
  --glass-sidebar: rgba(255,255,255,0.22);   /* Sidebar-Standard        */
  --glass-hdr:     rgba(255,255,255,0.28);   /* Mobile-Header           */

  /* Border-Radius-Abstufungen */
  --radius-xs: 8px;
  --radius-lg: 28px;
  --radius-xl: 32px;

  /* Sidebar-Breiten */
  --sidebar-w:    220px;
  --sidebar-w-lg: 240px;

  /* Section-Label Typografie */
  --label-size:    9px;
  --label-spacing: 0.13em;

  /* Blur-Abstufungen */
  --blur-sm: blur(12px);
  --blur-lg: blur(28px);

  /* Z-Index-Skala */
  --z-base:    1;
  --z-overlay: 40;
  --z-modal:   100;
  --z-toast:   300;
}

/* ── Universal Focus-Ring (Keyboard-Accessibility) ────────── */
:focus-visible {
  outline: 2.5px solid var(--lavender);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
/* Für Elemente mit eigenem Border-Radius: outline abrunden */
.profile-card:focus-visible,
.app-tile:focus-visible,
.sb-item:focus-visible,
.kk-sb-item:focus-visible,
.nb-btn:focus-visible  { border-radius: inherit; }

/* ── Universal Input Focus-Ring ───────────────────────────── */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--lavender) !important;
  outline: none;
  background: rgba(255,255,255,0.82) !important;
  box-shadow: 0 0 0 3px rgba(var(--lav-rgb), 0.22), inset 0 2px 6px rgba(60,50,120,0.05) !important;
}

/* ── Universal Button Micro-Interactions ──────────────────── */
/* Press-Scale für alle klickbaren Elemente ohne eigenes :active */
button:not(:disabled):active,
[role="button"]:active,
a.logout-btn:active,
a.app-tile:active       { transform: scale(0.96) !important; }

/* Hover-Lift für Panel-Karten in den Modulen */
.nb-panel,
.kk-stat,
.kk-chart-sec {
  transition: var(--transition);
}
.nb-panel:hover     { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kk-stat:hover      { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(60,50,120,0.14); }
.kk-chart-sec:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

/* ── Globale Scrollbar-Styles ─────────────────────────────── */
::-webkit-scrollbar          { width: 3px; height: 3px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: rgba(var(--lav-rgb), 0.35); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--lav-rgb), 0.58); }
* { scrollbar-width: thin; scrollbar-color: rgba(var(--lav-rgb), 0.35) transparent; }

/* Seitenleisten: Scrollbar komplett verstecken */
.sb-sidebar, .kk-sidebar, .kv-sidebar {
  scrollbar-width: none;
}
.sb-sidebar::-webkit-scrollbar,
.kk-sidebar::-webkit-scrollbar,
.kv-sidebar::-webkit-scrollbar { display: none; }

/* ── Section-Labels vereinheitlichen ─────────────────────── */
/* Überschreibt module-eigene 8px / 8.5px / 10px-Werte */
.anw-sb-section,
.kk-hdr-sub,
.kk-sb-section,
.kk-sb-label,
.kv-sb-label,
.kv-sb-section,
.sb-label,
.sb-section       {
  font-size: var(--label-size) !important;
  letter-spacing: var(--label-spacing) !important;
}

/* ── Sidebar-Typografie vereinheitlichen ──────────────────── */
/* Alle Sidebar-Hauptüberschriften auf einheitliche Größe */
.sb-heading,
.kk-sb-heading,
.kv-sb-heading    {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.1;
  color: var(--text);
}
.sb-heading span,
.kk-sb-heading span,
.kv-sb-heading span { font-weight: 600; color: var(--lavender); }

/* ── Sidebar-Breiten normalisieren ────────────────────────── */
.sb-sidebar  { width: var(--sidebar-w); }
.kk-sidebar  { width: var(--sidebar-w); }
.kv-sidebar  { width: var(--sidebar-w); }
@media (min-width: 1100px) {
  .sb-sidebar,
  .kk-sidebar,
  .kv-sidebar { width: var(--sidebar-w-lg); }
}

/* ── Aktiv-Zustände vereinheitlichen ──────────────────────── */
/* .on-Klasse: einheitliche Darstellung in allen Sidebars */
.sb-item.on,
.kk-sb-item.on,
.kv-sb-item.on {
  background: rgba(255,255,255,0.55) !important;
  color: var(--text) !important;
  font-weight: 800 !important;
  border-left: 3px solid var(--lavender) !important;
  padding-left: 9px !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  box-shadow: 0 1px 6px rgba(60,50,120,0.08);
}

/* ── Glassmorphismus-Sidebar-Background vereinheitlichen ─── */
.kv-sidebar { background: var(--glass-sidebar) !important; }

/* ── Touch-Ziele (min. 44 × 44 px) für Mobilgeräte ───────── */
@media (pointer: coarse) {
  .sb-item,
  .sb-tab,
  .kk-sb-item,
  .kv-sb-item,
  .anw-nav-btn,
  .anw-bot-btn,
  .anw-hj-btn   { min-height: 44px; }
}

/* ── Statistik-Werte: Fraunces für Premium-Ausdruck ──────── */
.kk-stat-v { font-family: 'Fraunces', serif; }

/* ── Utility-Klassen (modulübergreifend nutzbar) ──────────── */

/* Glass-Flächen */
.u-glass   { background: var(--glass-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-stroke); }
.u-glass-1 { background: var(--glass-1); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid rgba(255,255,255,0.35); }
.u-glass-3 { background: var(--glass-3); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-stroke); }

/* Section-Label */
.u-label {
  font-size: var(--label-size);
  font-weight: 900;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--text-light);
}

/* Badge-Chips */
.u-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 50px;
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--glass-3); border: 1px solid var(--glass-stroke);
  color: var(--text-mid);
}
.u-badge.mint     { background: var(--mint-light);             color: var(--text); border-color: rgba(var(--mint-rgb), 0.4); }
.u-badge.lavender { background: var(--lav-light);              color: var(--text); border-color: rgba(var(--lav-rgb), 0.4); }
.u-badge.alarm    { background: rgba(var(--alarm-rgb), 0.15);        color: var(--text); border-color: rgba(var(--alarm-rgb), 0.3); }
.u-badge.yellow   { background: var(--yel-light);              color: var(--text); border-color: rgba(var(--yellow-rgb), 0.4); }

/* Divider */
.u-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-stroke), transparent);
  margin: 12px 0;
  border: none;
}

/* Empty-State */
.u-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 40px 20px;
  color: var(--text-light); font-size: 0.82rem; font-weight: 600;
  text-align: center;
}
.u-empty-icon { font-size: 2.2rem; opacity: 0.45; }
.u-empty-title {
  font-family: 'Fraunces', serif; font-size: 1rem; font-weight: 400;
  color: var(--text-mid);
}

/* ─────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   COMPONENT LIBRARY — Geteilte, hochwertige UI-Bausteine
   Nutzbar in allen Modulen via CSS-Klassen.
   Kein JavaScript nötig für rein visuelle Effekte.
══════════════════════════════════════════════════════════════ */

/* ── 1. BUTTON-SYSTEM ─────────────────────────────────────────
   Basis: .c-btn  |  Varianten: -primary -success -danger
          -warning -ghost -ghost-danger -icon
   Größen: Standard / .c-btn-sm / .c-btn-lg
   ──────────────────────────────────────────────────────────── */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 10px 18px;
  border-radius: var(--radius-sm); border: none; cursor: pointer;
  font-family: 'Nunito', sans-serif; font-size: 0.86rem; font-weight: 800;
  letter-spacing: 0.02em; white-space: nowrap;
  transition: var(--transition);
  position: relative; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.c-btn:disabled { opacity: 0.48; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.c-btn:active:not(:disabled) { transform: scale(0.95) !important; }

/* Ripple-Pseudo-Element */
.c-btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255,255,255,0.18);
  opacity: 0; transition: opacity 0.22s;
  pointer-events: none;
}
.c-btn:hover::after { opacity: 1; }

/* Primary — app-weit EINE Aktionsfarbe (--btn-bg) */
.c-btn-primary {
  background: var(--btn-bg);
  color: white;
  box-shadow: var(--btn-shadow);
}
.c-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-h);
}

/* Success (intensiveres Grün) */
.c-btn-success {
  background: linear-gradient(135deg, #34d058, #22a348);
  color: white;
  box-shadow: 0 4px 14px rgba(52,208,88,0.35);
}
.c-btn-success:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(52,208,88,0.48);
}

/* Danger (rot – für Löschen, Fehler-Aktionen) */
.c-btn-danger {
  background: var(--btn-danger-bg);
  color: white;
  box-shadow: 0 4px 16px rgba(var(--alarm-rgb), 0.38);
}
.c-btn-danger:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--alarm-rgb), 0.55);
}

/* Danger – zweistufiger Confirm-Modus
   Hinzufügen von .confirming per JS zeigt pulsierenden roten Ring */
.c-btn-danger.confirming {
  animation: dangerPulse 1.1s ease-in-out infinite;
  background: linear-gradient(135deg, #e53935, #c62828);
  box-shadow: 0 0 0 0 rgba(var(--alarm-rgb), 0.5);
}
@keyframes dangerPulse {
  0%   { box-shadow: 0 0 0 0   rgba(var(--alarm-rgb), 0.60); }
  50%  { box-shadow: 0 0 0 8px rgba(var(--alarm-rgb), 0.00); }
  100% { box-shadow: 0 0 0 0   rgba(var(--alarm-rgb), 0.60); }
}

/* Warning (gelb/orange) */
.c-btn-warning {
  background: var(--btn-warn-bg);
  color: white;
  box-shadow: 0 4px 14px rgba(245,158,11,0.35);
}
.c-btn-warning:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(245,158,11,0.48);
}

/* Ghost (transparent, weiche Glasskante) */
.c-btn-ghost {
  background: rgba(255,255,255,0.42);
  border: 1.5px solid var(--glass-stroke);
  color: var(--text-mid);
  box-shadow: 0 2px 8px rgba(60,50,120,0.07);
}
.c-btn-ghost:hover:not(:disabled) {
  background: rgba(255,255,255,0.68);
  color: var(--text);
  box-shadow: 0 4px 14px rgba(60,50,120,0.1);
  transform: translateY(-1px);
}

/* Ghost-Danger (rote Kante, kein Hintergrund) */
.c-btn-ghost-danger {
  background: rgba(var(--alarm-rgb), 0.08);
  border: 1.5px solid rgba(var(--alarm-rgb), 0.4);
  color: var(--alarm);
}
.c-btn-ghost-danger:hover:not(:disabled) {
  background: rgba(var(--alarm-rgb), 0.18);
  border-color: var(--alarm);
  box-shadow: 0 4px 14px rgba(var(--alarm-rgb), 0.25);
  transform: translateY(-1px);
}

/* Lavender-Button (Alias — identisch zu .c-btn-primary) */
.c-btn-lav {
  background: var(--btn-bg);
  color: white;
  box-shadow: var(--btn-shadow);
}
.c-btn-lav:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-h);
}

/* Größen-Modifikatoren */
.c-btn-sm { padding: 6px 12px; font-size: 0.75rem; border-radius: var(--radius-xs); }
.c-btn-lg { padding: 14px 28px; font-size: 0.98rem; border-radius: var(--radius); }

/* Icon-Button (quadratisch, kein Text) */
.c-btn-icon {
  padding: 0; width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,0.42);
  border: 1.5px solid var(--glass-stroke);
  color: var(--text-mid); font-size: 1rem;
}
.c-btn-icon.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 0.85rem; }
.c-btn-icon.lg { width: 44px; height: 44px; border-radius: 12px; font-size: 1.2rem; }
.c-btn-icon:hover:not(:disabled) {
  background: rgba(255,255,255,0.68);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(60,50,120,0.1);
}
.c-btn-icon.danger:hover { background: rgba(var(--alarm-rgb), 0.15); color: var(--alarm); border-color: rgba(var(--alarm-rgb), 0.5); }

/* Volle Breite */
.c-btn-full { width: 100%; }

/* ── 2. INPUT-STATES ──────────────────────────────────────────
   Error / Success / Warning — per Klasse auf dem Input
   ──────────────────────────────────────────────────────────── */
input.is-error,
select.is-error,
textarea.is-error {
  border-color: var(--alarm) !important;
  background: rgba(var(--alarm-rgb), 0.06) !important;
  box-shadow: 0 0 0 3px rgba(var(--alarm-rgb), 0.18) !important;
}
input.is-success,
select.is-success,
textarea.is-success {
  border-color: #54c99a !important;
  background: rgba(var(--mint-rgb), 0.07) !important;
  box-shadow: 0 0 0 3px rgba(var(--mint-rgb), 0.2) !important;
}
.input-hint {
  font-size: 0.72rem; font-weight: 700; margin-top: 4px;
  letter-spacing: 0.02em;
}
.input-hint.error   { color: var(--alarm); }
.input-hint.success { color: #2a8a5e; }
.input-hint.info    { color: var(--text-light); }

/* ── 3. TOGGLE-SWITCH ─────────────────────────────────────────
   Nutzung: <label class="c-toggle"><input type="checkbox"><span></span></label>
   ──────────────────────────────────────────────────────────── */
.c-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
}
.c-toggle input { display: none; }
.c-toggle span {
  width: 42px; height: 24px; border-radius: 50px;
  background: rgba(155,150,190,0.25);
  border: 1.5px solid rgba(155,150,190,0.35);
  position: relative; flex-shrink: 0;
  transition: background 0.25s, border-color 0.25s;
}
.c-toggle span::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; border-radius: 50%;
  background: white; top: 1px; left: 1px;
  box-shadow: 0 1px 4px rgba(60,50,120,0.2);
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}
.c-toggle input:checked + span {
  background: var(--mint);
  border-color: rgba(var(--mint-rgb), 0.6);
}
.c-toggle input:checked + span::before {
  transform: translateX(18px);
}
/* Danger-Variante (für gefährliche Einstellungen) */
.c-toggle.danger input:checked + span {
  background: var(--alarm);
  border-color: rgba(var(--alarm-rgb), 0.6);
}

/* ── 4. TOAST-BENACHRICHTIGUNGEN ──────────────────────────────
   Nutzung: <div class="c-toast c-toast-success">…</div>
   Sichtbar via: .c-toast.visible  (per JS togglen)
   ──────────────────────────────────────────────────────────── */
.c-toast {
  position: fixed; bottom: 80px; left: 50%; z-index: var(--z-toast, 300);
  transform: translateX(-50%) translateY(20px);
  opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: var(--radius-sm);
  font-family: 'Nunito', sans-serif; font-size: 0.84rem; font-weight: 700;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-lg);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(.4,0,.2,1);
  max-width: calc(100vw - 48px); white-space: nowrap;
}
.c-toast.visible {
  opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
@media (min-width: 768px) { .c-toast { bottom: 28px; } }

/* Varianten */
.c-toast-success {
  background: rgba(52,208,88,0.88); color: white;
  border: 1px solid rgba(255,255,255,0.35);
}
.c-toast-error {
  background: rgba(226,77,66,0.90); color: white;
  border: 1px solid rgba(255,255,255,0.3);
}
.c-toast-info {
  background: rgba(var(--lav-rgb), 0.92); color: white;
  border: 1px solid rgba(255,255,255,0.4);
}
.c-toast-warning {
  background: rgba(245,158,11,0.90); color: white;
  border: 1px solid rgba(255,255,255,0.3);
}
.c-toast-neutral {
  background: var(--glass-4, rgba(255,255,255,0.72));
  color: var(--text);
  border: 1px solid var(--glass-stroke);
}

/* ── 5. TABELLEN-HOVER & ZEBRA-STRIPING ───────────────────────
   Auf <table> anwenden: class="c-table"
   ──────────────────────────────────────────────────────────── */
table.c-table tbody tr {
  transition: background 0.15s;
}
table.c-table tbody tr:hover {
  background: rgba(var(--lav-rgb), 0.1);
}
table.c-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.14);
}
table.c-table tbody tr:nth-child(even):hover {
  background: rgba(var(--lav-rgb), 0.12);
}

/* ── 6. SKELETON-LOADING ──────────────────────────────────────
   Nutzung: <div class="c-skeleton" style="width:120px;height:16px"></div>
   ──────────────────────────────────────────────────────────── */
.c-skeleton {
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.15) 25%,
    rgba(255,255,255,0.38) 50%,
    rgba(255,255,255,0.15) 75%
  );
  background-size: 400% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.c-skeleton-text  { height: 14px; margin-bottom: 8px; border-radius: 6px; }
.c-skeleton-title { height: 22px; width: 55%; margin-bottom: 12px; border-radius: 8px; }
.c-skeleton-card  { height: 80px; border-radius: var(--radius-sm); margin-bottom: 12px; }

/* ── 7. PILL-CHIP-SYSTEM ──────────────────────────────────────
   Geteilte Basis für up-pill, anw-chip, etc.
   ──────────────────────────────────────────────────────────── */
.up-pill {
  padding: 6px 13px; border-radius: 50px;
  border: 1.5px solid rgba(200,200,220,0.35);
  background: rgba(255,255,255,0.38);
  font-family: 'Nunito', sans-serif; font-size: 0.78rem; font-weight: 700;
  color: var(--text-mid); cursor: pointer;
  transition: var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.up-pill:hover { background: rgba(255,255,255,0.6); color: var(--text); }
.up-pill.on {
  background: var(--lav-mid);
  border-color: rgba(var(--lav-rgb), 0.55);
  color: var(--text);
  box-shadow: 0 2px 10px rgba(var(--lav-rgb), 0.28);
}
.up-pill.mint.on {
  background: var(--mint-mid);
  border-color: rgba(var(--mint-rgb), 0.55);
  box-shadow: 0 2px 10px rgba(var(--mint-rgb), 0.28);
}

/* ── 8. HOVER-GLOW auf Sidebar-Avataren / App-Icons ───────────
   App-Tile-Icons bekommen beim Hover einen Farb-Glow
   ──────────────────────────────────────────────────────────── */
.app-tile.mint:hover  .tile-icon-bg { box-shadow: 0 8px 28px rgba(var(--mint-rgb), 0.55); }
.app-tile.lav:hover   .tile-icon-bg { box-shadow: 0 8px 28px rgba(var(--lav-rgb), 0.55); }
.app-tile.alarm:hover .tile-icon-bg { box-shadow: 0 8px 28px rgba(var(--alarm-rgb), 0.50); }
.app-tile.yel:hover   .tile-icon-bg { box-shadow: 0 8px 28px rgba(var(--yellow-rgb), 0.50); }

/* ── 9. STATUS-BADGES ─────────────────────────────────────────
   Kleine Statuspunkte / Labels, z.B. für Schülereinträge
   ──────────────────────────────────────────────────────────── */
.c-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Nunito', sans-serif; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.c-status::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.c-status.ok     { color: #2a8a5e; }  .c-status.ok::before     { background: #34d058; }
.c-status.warn   { color: #8a6a00; }  .c-status.warn::before   { background: #f59e0b; }
.c-status.danger { color: #a03030; }  .c-status.danger::before { background: var(--alarm); }
.c-status.info   { color: #4a67a8; }  .c-status.info::before   { background: var(--lavender); }
.c-status.off    { color: var(--text-light); } .c-status.off::before { background: rgba(90,86,112,0.35); }

/* ── 10. MODAL-BACKDROP-BLUR ─────────────────────────────────
   Einheitlicher Overlay-Hintergrund für alle Modals
   ──────────────────────────────────────────────────────────── */
.c-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(45,32,80,0.32);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.2s ease both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── 11. FLOATING ACTION BUTTON (FAB) ────────────────────────
   Nutzung: <button class="c-fab">+</button>
   ──────────────────────────────────────────────────────────── */
.c-fab {
  position: fixed; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: 18px;
  width: 52px; height: 52px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--btn-bg);
  color: white; font-size: 1.5rem; font-weight: 300;
  box-shadow: var(--btn-shadow);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition); z-index: 50;
  -webkit-tap-highlight-color: transparent;
}
.c-fab:hover { transform: scale(1.08) translateY(-2px); box-shadow: var(--btn-shadow-h); }
.c-fab:active { transform: scale(0.94); }
.c-fab.mint   { background: var(--btn-mint-bg); box-shadow: var(--btn-shadow); }
.c-fab.danger { background: var(--btn-danger-bg); box-shadow: 0 6px 22px rgba(var(--alarm-rgb), 0.50); }
@media (min-width: 768px) {
  .c-fab { bottom: 28px; right: 28px; }
}

/* ─────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════
   ERWEITERUNGEN FÜR UNTERSEITEN (ToDo, Klassen)
══════════════════════════════════════════ */

.dash-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Das Datums-Badge für den ToDo Header */
.date-badge {
  background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1.5px solid var(--glass-stroke);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  text-align: right;
  box-shadow: var(--shadow);
}
.date-badge .day {
  font-size: 1.5rem; font-weight: 800; line-height: 1; font-family: 'Fraunces', serif;
}
.date-badge .month {
  font-size: 0.70rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mid);
}

/* Breite anpassen für breitere Unterseiten (wie das ToDo Modul) */
.dash-header.wide, .dash-divider.wide {
  max-width: 800px;
}

/* ═══════════════════════════════════════════════════════════
   UNTERRICHTSPLANER
═══════════════════════════════════════════════════════════ */

/* ── App-Tile: Unterrichtsplaner — identisch zu den anderen Kacheln ── */
.app-tile.sage {
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.38);
}
.app-tile.sage:hover {
  background: rgba(255,255,255,0.30);
  border-color: rgba(255,255,255,0.55);
}

/* ── Glassmorphism Basis-Klassen ── */
.up-glass {
  background: rgba(255,255,255,0.28);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.52);
  border-radius: 16px;
}
.up-glass2 {
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.34);
  border-radius: 12px;
}

/* ── Pill-Toggles ── */
.up-pills {
  display: flex;
  background: rgba(255,255,255,0.20);
  border-radius: 100px;
  padding: 3px;
  gap: 2px;
}
.up-pill {
  border: none;
  cursor: pointer;
  border-radius: 100px;
  padding: 5px 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  background: transparent;
  color: rgba(30,50,40,0.55);
  transition: all 0.2s;
}
.up-pill.on {
  background: rgba(255,255,255,0.58);
  color: #1a3a2e;
  box-shadow: 0 2px 10px rgba(var(--mint-rgb), 0.25);
}
.up-pill:hover:not(.on) {
  background: rgba(255,255,255,0.28);
}

/* ── Icon-Buttons ── */
.up-ibtn {
  border: none;
  cursor: pointer;
  border-radius: 12px;
  padding: 10px 16px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  color: #1a3a2e;
  white-space: nowrap;
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.45);
  transition: all 0.18s; min-height: 38px;}
.up-ibtn:hover {
  background: rgba(255,255,255,0.44);
  transform: translateY(-1px);
}
.up-ibtn.danger {
  background: rgba(252,165,165,0.28);
  border-color: rgba(252,165,165,0.48);
  color: #7f1d1d;
}
.up-ibtn.danger:hover { background: rgba(252,165,165,0.45); }
.up-ibtn.primary {
  /* Farbstil-abhängig (wie set-btn/tm-btn) — nicht hartkodieren */
  background: var(--btn-bg);
  border-color: transparent;
  color: #fff;
  text-shadow: 0 1px 2px rgba(45,42,64,.25);
}
.up-ibtn.primary:hover { filter: brightness(0.94); transform: translateY(-1px); }

/* ── Stundenplan Zelle ── */
.up-sc {
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.13s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  /* Oben eine ganze Zeile Reserve: dort sitzt der Stern absolut, und ohne
     sie schob sich der zentrierte Inhalt darunter — auf dem Telefon lag der
     Fachname im Stern. Seitlich eng, weil die Spalte dort nur gut fuenfzig
     Pixel breit ist. */
  padding: 14px 2px 3px;
  position: relative;
  overflow: hidden;
}
/* Kein Quetschen. Flex-Kinder geben von sich aus nach, wenn der Inhalt
   nicht passt — und weil die Fach-Zeile seit v0.2.167 `overflow:hidden`
   traegt, schneidet dieses Nachgeben die Buchstaben waagerecht durch: vom
   „Sp" blieb der obere Bogen des S stehen. Lieber eine Zeile ganz weglassen
   als eine Zeile halbieren; die noetige Hoehe rechnet der Stundenplan
   (`cellH`) aus, Raum-Zeile eingeschlossen. */
.up-sc > * { flex-shrink: 0; }
.up-sc:hover { filter: brightness(0.92); transform: scale(1.025); }
.up-sc .up-transfer-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  opacity: 0;
  font-size: 8px;
  background: rgba(var(--mint-rgb), 0.8);
  color: #0f2e1e;
  border: none;
  border-radius: 4px;
  padding: 1px 4px;
  cursor: pointer;
  font-weight: 800;
  font-family: 'Nunito', sans-serif;
  transition: opacity 0.15s;
}
.up-sc:hover .up-transfer-btn { opacity: 1; }

/* Das „D"-Abzeichen der Doppelsteckung ist entfallen (v0.2.167): es sass auf
   derselben Stelle wie der Stern (beide oben links in .up-sc) und sagte
   nichts, was die Kuerzel-Chips darunter nicht zeigen. Bei drei oder vier
   Kraeften im Raum verbrauchte es genau den Platz, der ohnehin fehlt.
   Die Klasse bleibt nur fuer Bestandsmarkup ohne Wirkung stehen. */

/* ── Reihen-Karte ── */
.up-rcard {
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.18s;
  border: 1px solid transparent;
}
.up-rcard:hover {
  transform: translateX(2px);
  background: rgba(255,255,255,0.20);
}
.up-rcard.sel {
  background: rgba(255,255,255,0.42) !important;
  border-color: rgba(255,255,255,0.52);
}

/* ── Collapsible Section Header ── */
.up-sec-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 14px;
  transition: background 0.15s;
  user-select: none;
}
.up-sec-hdr:hover { background: rgba(255,255,255,0.14); }
.up-chev {
  display: inline-block;
  font-size: 10px;
  transition: transform 0.25s;
  color: rgba(26,58,46,0.5);
}
.up-chev.open { transform: rotate(180deg); }

/* ── Formularfelder ── */
.up-wrap select,
.up-wrap input[type=text],
.up-wrap textarea {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #1a3a2e;
  background: rgba(255,255,255,0.40);
  border: 1px solid rgba(255,255,255,0.52);
  border-radius: 9px;
  padding: 7px 10px;
  outline: none;
  transition: all 0.2s;
}
.up-wrap select:focus,
.up-wrap input[type=text]:focus,
.up-wrap textarea:focus {
  border-color: rgba(var(--mint-rgb), 0.60);
  background: rgba(255,255,255,0.60);
}
.up-wrap textarea { resize: vertical; }
.up-wrap label {
  font-size: 10px;
  font-weight: 800;
  color: rgba(26,58,46,0.48);
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
}

/* ── Modal — dunkler, besser sichtbar ── */
.up-modal-bg {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 30, 22, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 16px;
}
.up-modal {
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  /* stärkere Glasskarte */
  background: rgba(255,255,255,0.62) !important;
  border: 1px solid rgba(255,255,255,0.80) !important;
  box-shadow: 0 20px 60px rgba(15,30,22,0.25);
}

/* ── Toast ── */
@keyframes up-slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.up-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  background: rgba(var(--mint-rgb), 0.95);
  color: #0f2e1e;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 13px;
  padding: 10px 22px;
  border-radius: 100px;
  box-shadow: 0 4px 20px rgba(var(--mint-rgb), 0.40);
  animation: up-slideUp 0.25s ease;
  white-space: nowrap;
  pointer-events: none;
}

/* ── Farbwähler Swatches ── */
.up-swatch {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s;
  flex-shrink: 0;
}
.up-swatch:hover { transform: scale(1.15); }
.up-swatch.sel  { border-color: #1a3a2e; transform: scale(1.12); }

/* ── Lernziel-Zeile ── */
.up-lz-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 5px 6px;
  border-radius: 8px;
  cursor: default;
  transition: background 0.12s;
}
.up-lz-row:hover { background: rgba(255,255,255,0.26); }

/* ── Unterrichtsplaner Seiten-Layout ── */
.up-wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 12px 14px 90px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}

/* ── Unterrichtsplaner Topbar ── */
.up-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 18px;
}
.up-topbar h1 {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 700;
  color: #1a3a2e;
  letter-spacing: -0.3px;
  line-height: 1.1;
}
.up-topbar .up-sub {
  font-size: 9px;
  color: rgba(26,58,46,0.42);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.up-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--mint, #7ED8B0), var(--lavender, #9BAEE0));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.up-nav-btn {
  border: none;
  cursor: pointer;
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  background: transparent;
  color: #1a3a2e;
  transition: all 0.2s; min-height: 38px;}
.up-nav-btn:hover { background: rgba(255,255,255,0.26); }
.up-nav-btn.active {
  background: linear-gradient(135deg, rgba(var(--mint-rgb), 0.28), rgba(var(--lav-rgb), 0.28));
  border: 1px solid rgba(var(--lav-rgb), 0.45);
  font-weight: 800;
  box-shadow: 0 2px 14px rgba(var(--lav-rgb), 0.18);
}

/* ── Drag & Drop ── */
.up-fach-drag {
  cursor: grab;
}
.up-fach-drag:active { cursor: grabbing; }
.up-sc.drag-over {
  border: 2px solid var(--lavender) !important;
  background: rgba(var(--lav-rgb), 0.22) !important;
  transform: scale(1.04);
}
.up-sc[draggable=true]:active { opacity: 0.7; }
.up-nav-btn .up-nav-icon { font-size: 15px; }

/* ── Fraunces als .serif in der Unterrichtsplaner-Komponente ── */
.up-wrap .up-serif {
  font-family: 'Fraunces', serif !important;
}

/* ── Mobile Bottom Nav ── */
.up-bnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  background: rgba(255,255,255,0.36);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-top: 1px solid rgba(255,255,255,0.52);
  padding: 6px 0 env(safe-area-inset-bottom, 6px);
}
.up-bnav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 0;
  font-family: 'Nunito', sans-serif;
}
.up-bnav-btn .up-bi  { font-size: 20px; line-height: 1; }
.up-bnav-btn .up-bl  { font-size: 10px; font-weight: 700; color: rgba(26,58,46,0.48); }
.up-bnav-btn.on .up-bl { color: #1a3a2e; }
.up-bnav-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mint, #7ED8B0), var(--lavender, #9BAEE0));
  margin: 0 auto 2px;
}

/* ── Scrollbar im Unterrichtsplaner ── */
.up-wrap ::-webkit-scrollbar       { width: 4px; height: 4px; }
.up-wrap ::-webkit-scrollbar-thumb { background: rgba(var(--mint-rgb), 0.42); border-radius: 2px; }

/* ── Fade-Animationen ── */
@keyframes up-fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.up-fadeup { animation: up-fadeUp 0.28s ease forwards; }

/* ── Lehrer Chip ── */
.up-lchip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 800;
  color: #0f2e1e;
  white-space: nowrap;
  line-height: 1.35;
}
.up-lchip-md {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 7px;
}
.up-lchip button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 10px;
  color: #0f2e1e;
  font-weight: 900;
}

/* ── Stundenplan Zeitenspalte ── */
.up-time-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px 0;
}
.up-time-col .up-std-nr {
  font-size: 11px;
  font-weight: 800;
  color: #2d4a3e;
  line-height: 1.1;
}
.up-time-col .up-std-time {
  font-size: 8px;
  color: rgba(45,74,62,0.55);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

@media (max-width: 699px) {
  .up-time-col .up-std-time { font-size: 7px; }
  .up-topbar h1 { font-size: 14px; }
  .up-modal { padding: 18px; }
}

/* ── Danger-Reset-Button mit Wobble ── */
@keyframes up-wobble {
  0%,100%{ transform:rotate(0deg); }
  20%    { transform:rotate(-4deg); }
  40%    { transform:rotate(4deg); }
  60%    { transform:rotate(-3deg); }
  80%    { transform:rotate(3deg); }
}
.up-ibtn.reset-btn {
  background: rgba(252,165,165,0.22);
  border-color: rgba(239,68,68,0.38);
  color: #991b1b;
  font-weight: 800;
}
.up-ibtn.reset-btn:hover {
  background: rgba(239,68,68,0.22);
  border-color: rgba(239,68,68,0.60);
  color: #7f1d1d;
  transform: none;
  animation: up-wobble 0.45s ease;
}

/* ── Schuljahr-Selector in Header ── */
.up-sj-select {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #1a3a2e;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.52);
  border-radius: 100px;
  padding: 5px 28px 5px 12px;
  outline: none;
  cursor: pointer;
  transition: all .2s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%231a3a2e' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.up-sj-select:focus { border-color: rgba(var(--lav-rgb), 0.6); background-color: rgba(255,255,255,0.50); }

/* ── Aktionstage im Kalender ── */
.up-aktion-day {
  background: rgba(239,68,68,0.52) !important;
  border: 1px solid rgba(239,68,68,0.75) !important;
  color: white !important;
}

/* ── Blockierte Stunde in Reihenplanung ── */
.up-stunde-blocked {
  background: rgba(239,68,68,0.22) !important;
  border: 1.5px solid rgba(239,68,68,0.50) !important;
  cursor: default !important;
}
.up-stunde-blocked:hover { transform: none !important; filter: none !important; }

/* ── Stunden-Kachel mit Thema ── */
.up-stunde-tile {
  height: 54px;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  user-select: none;
  transition: all .15s;
  padding: 3px 4px;
  overflow: hidden;
}
.up-stunde-tile:hover { filter: brightness(.93); transform: scale(1.03); }
.up-stunde-tile .st-nr  { font-size:11px; font-weight:900; color:#0f2e1e; line-height:1; }
.up-stunde-tile .st-thema {
  font-size: 8px;
  font-weight: 700;
  color: rgba(15,46,30,.65);
  line-height: 1.2;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.up-stunde-empty {
  height: 54px;
  border-radius: 9px;
  background: rgba(255,255,255,.12);
  border: 1.5px dashed rgba(255,255,255,.38);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: rgba(255,255,255,.3);
}

/* ── Native Date / Time Inputs — Glassmorphismus-Stil ── */
input[type=date],
input[type=time] {
  font-family: 'Nunito', sans-serif !important;
  font-size: 13px;
  font-weight: 600;
  color: #1a3a2e;
  background: rgba(255,255,255,0.40);
  border: 1px solid rgba(255,255,255,0.52);
  border-radius: 9px;
  padding: 7px 10px;
  outline: none;
  transition: all 0.2s;
  cursor: pointer;
  color-scheme: light;
  -webkit-appearance: none;
  appearance: none;
}
input[type=date]:focus,
input[type=time]:focus {
  border-color: rgba(var(--mint-rgb), 0.65);
  background: rgba(255,255,255,0.62);
}
input[type=date]::-webkit-datetime-edit,
input[type=time]::-webkit-datetime-edit {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #1a3a2e;
}
input[type=date]::-webkit-datetime-edit-fields-wrapper,
input[type=time]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator {
  opacity: 0.50;
  cursor: pointer;
  border-radius: 4px;
  padding: 2px;
  /* Mint-grün einfärben */
  filter: invert(55%) sepia(40%) saturate(400%) hue-rotate(110deg) brightness(0.85);
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover {
  opacity: 0.85;
}


/* ══════════════════════════════════════════════════════════
   TEAMBUILDER MODULE  (.tb- prefix)
   Styled to match Notenbuch / Unterrichtsplaner conventions
══════════════════════════════════════════════════════════ */

.app-tile.team .tile-icon-bg {
  background: linear-gradient(135deg, #7ED8B0, #9BAEE0);
}

/* ── Page wrapper ── */
.tb-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* ── Header — matches Notenbuch topbar ── */
.tb-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  background: rgba(255,255,255,0.32);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-stroke);
  flex-shrink: 0;
  z-index: 50;
}

.tb-title-block { flex: 1; }

.tb-title-main {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--text);
}
.tb-title-main strong {
  font-weight: 700;
  color: var(--lavender);
}

.tb-title-sub {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lavender);
  margin-top: 1px;
}

/* ── Body ── */
.tb-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ── Sidebar ── */
.tb-sidebar {
  width: 240px;
  min-width: 240px;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 10px;
  background: rgba(255,255,255,0.36);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-right: 1px solid var(--glass-stroke);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  z-index: 40;
}

.tb-sidebar::-webkit-scrollbar { width: 3px; }
.tb-sidebar::-webkit-scrollbar-thumb { background: rgba(var(--lav-rgb), 0.25); border-radius: 2px; }

/* ── Collapsible sections ── */
.tb-section { margin-bottom: 3px; }

.tb-sec-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: rgba(255,255,255,0.28);
  transition: background 0.15s;
  user-select: none;
}
.tb-sec-hd:hover { background: rgba(255,255,255,0.52); }

.tb-sec-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light);
  flex: 1;
}

.tb-sec-chev {
  font-size: 0.62rem;
  color: var(--text-light);
  transition: transform 0.22s;
  display: inline-block;
}
.tb-sec-hd.open .tb-sec-chev { transform: rotate(180deg); }

.tb-sec-body {
  display: none;
  padding: 5px 2px 2px;
}
.tb-sec-hd.open + .tb-sec-body { display: block; }

/* ── Student list in sidebar ── */
.tb-s-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
}

.tb-s-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.38);
  font-size: 0.78rem;
  transition: background 0.12s;
}
.tb-s-item:hover { background: rgba(255,255,255,0.60); }
.tb-s-item.absent { opacity: 0.38; text-decoration: line-through; }

.tb-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}

.tb-s-name {
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 0.8rem;
}

.tb-s-count-badge {
  font-size: 0.62rem;
  font-weight: 800;
  background: rgba(var(--lav-rgb), 0.22);
  color: var(--text-mid);
  padding: 1px 6px;
  border-radius: 10px;
}

/* ── Arrangement list ── */
.tb-arr-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 180px;
  overflow-y: auto;
}

.tb-arr-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 9px;
  background: rgba(255,255,255,0.35);
  font-size: 0.78rem;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.14s;
  color: var(--text);
  font-weight: 600;
}
.tb-arr-item:hover { background: rgba(255,255,255,0.65); }
.tb-arr-item.active {
  border-color: rgba(var(--lav-rgb), 0.50);
  background: rgba(var(--lav-rgb), 0.18);
}

.tb-arr-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Link group items ── */
.tb-lg-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.38);
  font-size: 0.76rem;
  margin-bottom: 3px;
}
.tb-lg-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.tb-lg-name-inp {
  flex: 1; background: transparent; border: none;
  font-family: 'Nunito', sans-serif; font-size: 0.76rem; font-weight: 600;
  color: var(--text); padding: 0; min-width: 0; outline: none;
}
.tb-lg-name-inp:focus { border-bottom: 1px solid var(--lavender); }

/* ── Hint text ── */
.tb-hint-text {
  font-size: 0.7rem;
  color: var(--text-light);
  line-height: 1.4;
  padding: 2px 3px;
}

/* ── Row ── */
.tb-row { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: 5px; }

/* ══════════════════════════════════════════════════════════
   BUTTONS — aligned with up-ibtn from style.css
══════════════════════════════════════════════════════════ */
.tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
  border: none;
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s;
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.48);
  color: var(--text); min-height: 38px;}
.tb-btn:hover {
  background: rgba(255,255,255,0.46);
  transform: translateY(-1px);
}
.tb-btn:active { transform: scale(0.97); }

.tb-btn.primary {
  background: var(--btn-bg);
  border-color: transparent;
  color: #fff;
  font-weight: 800;
}
.tb-btn.primary:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* Schrift bewusst var(--text) statt eines festen Dunkeltons: Die Kennung des
   Knopfes steckt in der FLAECHE, und die folgt seit v0.2.158 dem Farbstil. Die
   frueheren Hex (#1a5a38 Gruen, #2a3a6a Blau, #7a2020 Rot, #6a4a00 Braun)
   wiederholten nur den Flaechenton des Original-Looks — in Cub stand damit
   gruene Schrift auf brauner Flaeche. Tanne ueberschreibt weiter unten auf
   helle Farbtoene; das bleibt so. */
.tb-btn.mint   { background: rgba(var(--mint-rgb), 0.28); border-color: rgba(var(--mint-rgb), 0.45); color: var(--text); }
.tb-btn.lav    { background: rgba(var(--lav-rgb), 0.28); border-color: rgba(var(--lav-rgb), 0.45); color: var(--text); }
.tb-btn.alarm  { background: rgba(var(--alarm-rgb), 0.22); border-color: rgba(var(--alarm-rgb), 0.42); color: var(--text); }
.tb-btn.yellow { background: rgba(var(--yellow-rgb), 0.28); border-color: rgba(var(--yellow-rgb), 0.48); color: var(--text); }
.tb-btn.danger { background: rgba(252,165,165,0.22); border-color: rgba(239,68,68,0.35);   color: #991b1b; }
.tb-btn.danger:hover { background: rgba(239,68,68,0.18); }

.tb-btn-xs { padding: 6px 11px; font-size: 0.78rem; border-radius: 10px; font-weight: 800; min-height: 30px;}
.tb-btn-sm { padding: 6px 11px; font-size: 0.78rem; border-radius: 10px; font-weight: 800; min-height: 30px;}

.tb-btn-icon {
  padding: 5px 8px;
  border-radius: 9px;
  font-size: 0.82rem;
  background: rgba(255,255,255,0.38);
  border: 1px solid rgba(255,255,255,0.52);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: 'Nunito', sans-serif;
  color: var(--text);
}
.tb-btn-icon:hover { background: rgba(255,255,255,0.72); transform: scale(1.08); }

/* ── Separator ── */
.tb-tsep { width: 1px; height: 18px; background: rgba(var(--lav-rgb), 0.25); flex-shrink: 0; }

/* ── Toolbar checkbox label ── */
.tb-toolbar label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(30,50,40,0.55);
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════
   MAIN CONTENT AREA
══════════════════════════════════════════════════════════ */
.tb-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ── Tab bar — matches Notenbuch nav pills ── */
.tb-tabbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.22);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-stroke);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.tb-tab {
  padding: 7px 16px;
  border-radius: 100px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: transparent;
  color: rgba(30,50,40,0.48);
  transition: all 0.2s;
}
.tb-tab:hover { color: var(--text); background: rgba(255,255,255,0.28); }
.tb-tab.active {
  background: rgba(255,255,255,0.72);
  color: var(--text);
  font-weight: 800;
  box-shadow: 0 2px 12px rgba(var(--lav-rgb), 0.22);
}

.tb-tabbar-r { margin-left: auto; display: flex; gap: 5px; }

/* ── Views ── */
.tb-view { display: none; flex: 1; overflow: hidden; flex-direction: column; }
.tb-view.active { display: flex; }

/* ── Toolbar ── */
.tb-toolbar {
  display: flex;
  gap: 6px;
  padding: 9px 14px;
  flex-wrap: wrap;
  align-items: center;
  background: rgba(255,255,255,0.20);
  border-bottom: 1px solid var(--glass-stroke);
  flex-shrink: 0;
}

/* ── Link hint bar ── */
.tb-link-hint {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: rgba(var(--lav-rgb), 0.20);
  border-bottom: 1px solid rgba(var(--lav-rgb), 0.35);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}
.tb-link-hint.show { display: flex; }

/* ══════════════════════════════════════════════════════════
   SEATING CANVAS
══════════════════════════════════════════════════════════ */
.tb-canvas-outer { flex: 1; position: relative; overflow: hidden; }

.tb-canvas {
  width: 100%; height: 100%;
  overflow: auto; position: relative;
  background-image:
    repeating-linear-gradient(0deg, rgba(var(--lav-rgb), 0.055) 0, transparent 1px, transparent 39px, rgba(var(--lav-rgb), 0.055) 40px),
    repeating-linear-gradient(90deg, rgba(var(--lav-rgb), 0.055) 0, transparent 1px, transparent 39px, rgba(var(--lav-rgb), 0.055) 40px);
}

.tb-canvas-inner {
  position: relative;
  width: 1600px; height: 1100px;
  transform-origin: 0 0;
}

.tb-zoom-ctrl {
  position: absolute; bottom: 14px; right: 14px;
  display: flex; gap: 5px; align-items: center; z-index: 20;
  background: rgba(255,255,255,0.65);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-stroke);
  border-radius: 100px; padding: 5px 12px; box-shadow: var(--shadow);
}
.tb-zoom-lbl {
  font-size: 0.72rem; font-weight: 800;
  color: var(--text-mid); min-width: 36px; text-align: center;
}

/* ── Tables ── */
.tb-tbl {
  position: absolute; z-index: 2;
  transform-origin: center center; will-change: left, top;
}
.tb-tbl-body {
  background: rgba(255,255,255,0.80);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255,255,255,0.90);
  border-radius: 11px; box-shadow: var(--shadow);
  cursor: move; user-select: none; touch-action: none;
  transition: box-shadow 0.18s, border-color 0.18s;
}
.tb-tbl-body:hover { box-shadow: var(--shadow-lg); }
.tb-tbl.link-sel .tb-tbl-body {
  border-color: var(--lavender) !important; border-width: 2px !important;
  box-shadow: 0 0 0 3px rgba(var(--lav-rgb), 0.32), var(--shadow) !important;
}

.tb-tbl-seats { display: flex; flex-direction: row; gap: 3px; padding: 7px 7px 4px; }
.tb-seat {
  width: 60px; height: 34px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700;
  cursor: pointer; flex-shrink: 0;
  border: 2px dashed rgba(var(--lav-rgb), 0.32);
  color: var(--text-light); background: rgba(255,255,255,0.45);
  overflow: hidden; padding: 0 4px; gap: 3px;
  transition: transform 0.12s; user-select: none;
}
.tb-seat:hover { transform: scale(1.07); }
.tb-seat.occ { border-style: solid; color: var(--text); }
.tb-seat-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.tb-seat-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-align: center; }
.tb-tbl-footer {
  font-size: 0.56rem; font-weight: 800; text-align: center;
  padding: 1px 7px 5px; letter-spacing: 0.05em; text-transform: uppercase;
}
.tb-tbl-ctrl {
  position: absolute; top: -8px; right: -8px;
  display: flex; gap: 2px; opacity: 0; transition: opacity 0.16s; z-index: 10;
}
.tb-tbl:hover .tb-tbl-ctrl, .tb-tbl.link-sel .tb-tbl-ctrl { opacity: 1; }
.tb-rot-handle {
  position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);
  width: 19px; height: 19px; border-radius: 50%;
  background: linear-gradient(135deg, var(--mint), var(--lavender));
  border: 2px solid white; box-shadow: var(--shadow);
  cursor: grab; opacity: 0; transition: opacity 0.16s;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.55rem; z-index: 5; touch-action: none; user-select: none;
}
.tb-tbl:hover .tb-rot-handle { opacity: 1; }
.tb-rot-handle:active { cursor: grabbing; }

/* ── Seat dropdown ── */
.tb-seat-dd {
  position: fixed; z-index: 400;
  background: var(--sheet-bg);
  border: 1.5px solid rgba(var(--lav-rgb), 0.50);
  border-radius: var(--radius-sm); padding: 3px;
  box-shadow: var(--shadow-lg); max-height: 220px; overflow-y: auto;
  min-width: 162px; display: none;
}
.tb-seat-opt {
  padding: 6px 10px; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; border-radius: 8px;
  transition: background 0.1s; display: flex; align-items: center; gap: 6px;
  color: var(--text);
}
.tb-seat-opt:hover { background: rgba(var(--lav-rgb), 0.18); }

/* ══════════════════════════════════════════════════════════
   TEAMS VIEW
══════════════════════════════════════════════════════════ */
.tb-teams-scroll { flex: 1; overflow-y: auto; }
.tb-teams-area {
  padding: 14px 16px;
  display: flex; gap: 12px; flex-wrap: wrap; align-content: flex-start;
}

.tb-team-card {
  background: rgba(255,255,255,0.52);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255,255,255,0.82);
  border-radius: var(--radius); padding: 12px;
  min-width: 148px; max-width: 190px;
  box-shadow: var(--shadow); transition: var(--transition);
}
.tb-team-card.drag-over {
  border-color: var(--lavender);
  background: rgba(var(--lav-rgb), 0.18); transform: scale(1.02);
}

.tb-tc-head {
  font-family: 'Fraunces', serif;
  font-size: 0.95rem; font-weight: 700; margin-bottom: 8px;
  display: flex; align-items: center; gap: 5px; color: var(--text);
}
.tb-tc-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.tb-tc-count {
  margin-left: auto; font-size: 0.66rem; font-weight: 800;
  background: rgba(var(--lav-rgb), 0.18); color: var(--text-light);
  padding: 2px 6px; border-radius: 8px; font-family: 'Nunito', sans-serif;
}

.tb-member {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 7px;
  font-size: 0.78rem; font-weight: 600; margin-bottom: 3px;
  cursor: grab; background: rgba(255,255,255,0.55);
  color: var(--text); transition: background 0.12s, transform 0.12s;
  user-select: none;
}
.tb-member:hover { background: rgba(255,255,255,0.88); transform: translateX(2px); }
.tb-member.dragging { opacity: 0.28; }

/* ── Conditions bar ── */
.tb-cond-bar {
  display: flex; gap: 10px; padding: 8px 14px;
  background: rgba(255,255,255,0.20);
  border-bottom: 1px solid var(--glass-stroke);
  flex-wrap: wrap; flex-shrink: 0;
}
.tb-cond-group {
  flex: 1; min-width: 170px;
  background: rgba(255,255,255,0.40);
  border-radius: var(--radius-sm); padding: 8px 10px;
}
.tb-cond-title {
  font-size: 0.64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px;
}
.tb-cond-cluster { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 5px; }
.tb-cond-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 10px;
  font-size: 0.68rem; font-weight: 700; flex-wrap: wrap; margin-bottom: 2px;
}
.tb-cond-tag.tog { background: rgba(var(--ok-rgb), 0.28); color: var(--ok-ink); }
.tb-cond-tag.apt { background: rgba(var(--err-rgb), 0.22); color: var(--err-ink); }
.tb-cond-del {
  background: none; border: none; cursor: pointer;
  font-size: 0.7rem; opacity: 0.58; line-height: 1; padding: 0 2px;
  font-family: 'Nunito', sans-serif;
}
.tb-cond-del:hover { opacity: 1; }
.tb-cond-warn {
  font-size: 0.64rem; color: var(--warn-ink);
  background: rgba(var(--warn-rgb), 0.40); border-radius: 5px;
  padding: 2px 6px; margin-top: 2px; display: block;
}
.tb-multi-hint { font-size: 0.62rem; color: var(--text-light); margin-top: 3px; }

/* ══════════════════════════════════════════════════════════
   PUZZLE SECTION
══════════════════════════════════════════════════════════ */
.tb-pz-section {
  background: rgba(255,255,255,0.18);
  border-top: 1px solid var(--glass-stroke);
  flex-shrink: 0;
}
.tb-pz-header {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; cursor: pointer; user-select: none;
}
.tb-pz-header:hover { background: rgba(255,255,255,0.18); }
.tb-pz-title-text {
  font-family: 'Fraunces', serif; font-size: 0.98rem; font-weight: 700;
  color: var(--text); flex: 1;
}
.tb-pz-chev {
  font-size: 0.66rem; color: var(--text-light);
  transition: transform 0.22s; display: inline-block;
}
.tb-pz-chev.closed { transform: rotate(180deg); }

.tb-pz-controls {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px 10px; flex-wrap: wrap;
}
.tb-pz-controls label {
  font-size: 0.75rem; font-weight: 700; color: var(--text-mid);
}
.tb-pz-expert-inp {
  width: 56px; padding: 5px 8px; border-radius: 8px;
  border: 1px solid var(--glass-stroke);
  background: rgba(255,255,255,0.58);
  font-family: 'Nunito', sans-serif;
  font-size: 0.82rem; font-weight: 700; color: var(--text); outline: none;
}
.tb-pz-expert-inp:focus { border-color: var(--lavender); }

.tb-pz-content { padding: 0 14px 14px; }
.tb-pz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.tb-pz-card {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255,255,255,0.82);
  border-radius: var(--radius-sm); padding: 11px; box-shadow: var(--shadow);
}
.tb-pz-card-title {
  font-family: 'Fraunces', serif; font-size: 0.82rem; font-weight: 700;
  color: var(--text); margin-bottom: 7px; padding-bottom: 5px;
  border-bottom: 1px solid rgba(var(--lav-rgb), 0.18);
}
.tb-pz-member { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 0.76rem; }
.tb-pz-badge {
  width: 16px; height: 16px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.52rem; font-weight: 800; flex-shrink: 0; color: white;
}
.tb-pz-warning {
  font-size: 0.65rem; color: var(--warn-ink);
  background: rgba(var(--warn-rgb), 0.38); border-radius: 5px;
  padding: 3px 7px; margin-top: 5px;
}

/* ── Expert count info ── */
#pz-info { font-size: 0.72rem; color: var(--text-mid); }

/* ══════════════════════════════════════════════════════════
   ATTENDANCE
══════════════════════════════════════════════════════════ */
.tb-att-wrap { flex: 1; overflow-y: auto; padding: 14px 16px; }
.tb-att-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 7px;
}
.tb-att-card {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.46); cursor: pointer;
  transition: var(--transition); border: 1.5px solid transparent;
}
.tb-att-card:hover { background: rgba(255,255,255,0.68); }
.tb-att-card.present { border-color: rgba(var(--mint-rgb), 0.50); background: rgba(var(--mint-rgb), 0.14); }
.tb-att-card.absent  { opacity: 0.52; border-color: rgba(var(--alarm-rgb), 0.38); background: rgba(var(--alarm-rgb), 0.08); }
.tb-att-icon {
  width: 18px; height: 18px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center; font-size: 0.72rem; flex-shrink: 0;
}
.tb-att-icon.present { background: rgba(var(--mint-rgb), 0.55); }
.tb-att-icon.absent  { background: rgba(var(--alarm-rgb), 0.45); }

/* ══════════════════════════════════════════════════════════
   RANDOM PICKER
══════════════════════════════════════════════════════════ */
.tb-rnd-stage {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px; padding: 32px; overflow-y: auto;
}
.tb-rnd-av {
  width: 90px; height: 90px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; font-weight: 800; color: white;
  box-shadow: var(--shadow-lg);
}
.tb-rnd-name {
  font-family: 'Fraunces', serif;
  font-size: 3rem; font-weight: 700; color: var(--text);
  min-height: 70px; display: flex; align-items: center; text-align: center;
}
.tb-rnd-history {
  display: flex; flex-wrap: wrap; gap: 5px;
  max-width: 380px; justify-content: center;
}
.tb-rnd-chip {
  font-size: 0.7rem; font-weight: 700; padding: 2px 9px;
  border-radius: 10px; color: var(--text);
}

.tb-spin { animation: tb-spin-anim 0.4s cubic-bezier(.2,.8,.3,1.2) both; }
@keyframes tb-spin-anim {
  from { transform: scale(0.72) rotate(-14deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   MODALS (reuse up-modal-bg/up-modal from style.css)
══════════════════════════════════════════════════════════ */
.tb-form-lbl {
  font-size: 0.64rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-light); display: block; margin-bottom: 4px;
}
.tb-inp {
  width: 100%; padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--glass-stroke);
  background: rgba(255,255,255,0.62);
  font-family: 'Nunito', sans-serif; font-size: 0.88rem; font-weight: 600;
  color: var(--text); outline: none; transition: border-color 0.2s; margin-bottom: 10px;
}
.tb-inp:focus { border-color: var(--lavender); }
.tb-modal-actions { display: flex; gap: 7px; justify-content: flex-end; margin-top: 12px; }

/* ══════════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════════ */
.tb-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 36px; text-align: center; color: var(--text-light);
  font-size: 0.84rem; width: 100%;
}
.tb-empty-icon { font-size: 2.4rem; opacity: 0.30; }

/* ══════════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════════ */
.tb-toast {
  position: fixed; bottom: 18px; right: 20px; z-index: 500;
  padding: 9px 18px; border-radius: 100px;
  font-family: 'Nunito', sans-serif; font-size: 0.78rem; font-weight: 800;
  box-shadow: var(--shadow-lg); transform: translateY(60px);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  pointer-events: none; white-space: nowrap;
}
.tb-toast.show  { transform: translateY(0); }
.tb-toast.ok    { background: rgba(var(--ok-rgb), 0.95); color: var(--ok-ink); }
.tb-toast.warn  { background: rgba(var(--warn-rgb), 0.95); color: var(--warn-ink); }
.tb-toast.error { background: rgba(var(--err-rgb), 0.95); color: var(--err-ink); }

/* ══════════════════════════════════════════════════════════
   DESKTOP OPTIMIZATIONS (≥ 1200px)
══════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  .tb-sidebar { width: 260px; min-width: 260px; padding: 14px 12px; }
  .tb-header  { padding: 14px 28px; }
  .tb-toolbar { padding: 10px 18px; gap: 8px; }
  .tb-tabbar  { padding: 11px 20px; }
  .tb-tab     { font-size: 15px; padding: 8px 20px; }
  /* Auf grossen Schirmen KEINE Sondergroesse mehr: die Basisregel ist seit
     v0.2.159 die gemeinsame Knopfform. Nur die Enge auf dem Telefon
     rechtfertigt eine Abweichung (siehe @media max-width:780px weiter unten). */
  .tb-s-name  { font-size: 0.85rem; }
  .tb-arr-item{ font-size: 0.83rem; padding: 7px 10px; }
  .tb-team-card { min-width: 165px; max-width: 210px; padding: 14px; }
  .tb-tc-head { font-size: 1rem; }
  .tb-member  { font-size: 0.83rem; padding: 5px 7px; }
  .tb-pz-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
  .tb-att-grid{ grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); }
  .tb-teams-area { padding: 16px 20px; gap: 14px; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE SIDEBAR DRAWER
══════════════════════════════════════════════════════════ */
@media (max-width: 780px) {
  .tb-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    transform: translateX(-100%); z-index: 80;
    box-shadow: var(--shadow-lg);
  }
  .tb-sidebar.open { transform: translateX(0); }
  .tb-tab { padding: 5px 10px; font-size: 0.78rem; }
  /* Telefon: Der Teambuilder traegt viele Knoepfe in einer Leiste, deshalb
     bleibt die Verkleinerung. Sie nimmt jetzt aber die gemeinsame KLEIN-Stufe
     statt eigener Werte — dieselbe Groesse wie .tb-btn-sm und .sa-btn-sm. */
  .tb-btn { font-size: 0.78rem; padding: 6px 11px; border-radius: 10px; min-height: 30px; }
}

@media print {
  .tb-sidebar, .tb-tabbar, .tb-toolbar, .tb-tbl-ctrl,
  .tb-rot-handle, .tb-zoom-ctrl, .tb-link-hint,
  .tb-pz-controls, .tb-cond-bar { display: none !important; }
  .tb-page, .tb-body, .tb-main, .tb-view,
  .tb-canvas-outer, .tb-canvas, .tb-canvas-inner {
    overflow: visible !important; height: auto !important;
  }
  body { background: white !important; }
}

/* ══════════════════════════════════════════════════════════
   TEAMS SUB-PANEL SYSTEM
══════════════════════════════════════════════════════════ */
.tb-panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.18);
  border-bottom: 1px solid var(--glass-stroke);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.tb-panel-pills {
  display: flex;
  background: rgba(255,255,255,0.22);
  border-radius: 100px;
  padding: 3px;
  gap: 2px;
}

.tb-panel-pill {
  border: none;
  cursor: pointer;
  border-radius: 100px;
  padding: 6px 16px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  background: transparent;
  color: rgba(30,50,40,0.50);
  transition: all 0.2s;
}
.tb-panel-pill:hover { background: rgba(255,255,255,0.30); color: var(--text); }
.tb-panel-pill.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 2px 10px rgba(var(--lav-rgb), 0.22);
}

#puzzle-bar-controls { display: flex; }

.tb-panel-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Toolbar number input */
.tb-num-input {
  width: 54px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid var(--glass-stroke);
  background: rgba(255,255,255,0.55);
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  outline: none;
}
.tb-num-input:focus { border-color: var(--lavender); }

.tb-toolbar-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(30,50,40,0.55);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   CONDITIONS DRAG & DROP UI
══════════════════════════════════════════════════════════ */
.cond-layout {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 0;
  height: 100%;
  overflow: hidden;
}

@media (max-width: 780px) {
  .cond-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr 1fr;
    height: auto;
  }
}

.cond-pool-wrap,
.cond-zone-wrap {
  padding: 14px 12px;
  border-right: 1px solid var(--glass-stroke);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cond-zone-wrap:last-child { border-right: none; }

.cond-section-title {
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-light);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.cond-tog-title { color: #1a5a38; }
.cond-apt-title { color: #7a2020; }

.cond-hint {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: 0;
  text-transform: none;
}

/* Student chip */
.cond-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 100px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: grab;
  user-select: none;
  background: rgba(255,255,255,0.65);
  border: 1.5px solid rgba(255,255,255,0.85);
  box-shadow: 0 1px 5px rgba(60,50,120,0.08);
  transition: all 0.15s;
  color: var(--text);
  margin: 2px;
  white-space: nowrap;
}
.cond-chip:hover { background: rgba(255,255,255,0.90); transform: translateY(-1px); box-shadow: var(--shadow); }
.cond-chip:active { cursor: grabbing; }
.cond-chip.dragging { opacity: 0.35; transform: scale(0.95); }
.cond-chip.tog {
  background: rgba(var(--ok-rgb), 0.22);
  border-color: rgba(var(--ok-rgb), 0.45);
  color: var(--ok-ink);
}
.cond-chip.apt {
  background: rgba(var(--err-rgb), 0.18);
  border-color: rgba(var(--err-rgb), 0.42);
  color: var(--err-ink);
}

.cond-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cond-chip-del {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.7rem;
  opacity: 0.5;
  line-height: 1;
  padding: 0;
  margin-left: 2px;
  color: inherit;
}
.cond-chip-del:hover { opacity: 1; }

/* Pool */
.cond-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  overflow-y: auto;
  align-content: flex-start;
}

/* Zone containers */
.cond-zone-container {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 2px;
  border-radius: var(--radius-sm);
  min-height: 80px;
  transition: background 0.15s;
}
.cond-zone-container.cond-drop-hover {
  background: rgba(var(--lav-rgb), 0.12);
  outline: 2px dashed rgba(var(--lav-rgb), 0.45);
  outline-offset: -2px;
}
.cond-zone-container.tog.cond-drop-hover { background: rgba(var(--mint-rgb), 0.10); outline-color: rgba(var(--mint-rgb), 0.45); }
.cond-zone-container.apt.cond-drop-hover { background: rgba(var(--alarm-rgb), 0.08); outline-color: rgba(var(--alarm-rgb), 0.40); }

/* Cluster */
.cond-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  transition: all 0.15s;
}
.cond-cluster.tog {
  background: rgba(var(--mint-rgb), 0.15);
  border-color: rgba(var(--mint-rgb), 0.35);
}
.cond-cluster.apt {
  background: rgba(var(--alarm-rgb), 0.12);
  border-color: rgba(var(--alarm-rgb), 0.32);
}
.cond-cluster.cond-drop-hover {
  border-style: dashed;
  border-width: 2px;
}

.cond-cluster-chips { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; }

.cond-cluster-del {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  opacity: 0.45;
  padding: 2px 4px;
  border-radius: 5px;
  transition: opacity 0.12s, background 0.12s;
  flex-shrink: 0;
}
.cond-cluster-del:hover { opacity: 0.9; background: rgba(var(--alarm-rgb), 0.18); }

.cond-drop-hint {
  font-size: 0.72rem;
  color: var(--text-light);
  text-align: center;
  padding: 16px 10px;
  border: 2px dashed rgba(var(--lav-rgb), 0.28);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.18);
}

/* New group button */
.cond-new-group-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.30);
  border: 1.5px dashed rgba(var(--lav-rgb), 0.35);
  color: var(--text-light);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  margin-top: 2px;
  font-family: 'Nunito', sans-serif;
}
.cond-new-group-btn:hover { background: rgba(255,255,255,0.55); color: var(--text); border-color: var(--lavender); }


/* Puzzle coverage info badge */
.tb-pz-info-badge {
  font-size: 0.63rem;
  font-weight: 700;
  color: var(--text);
  background: rgba(var(--mint-rgb), 0.25);
  border-radius: 5px;
  padding: 3px 7px;
  margin-top: 5px;
}

/* ── App-Tile: Team (fehlt in original) ── */
.app-tile.team .tile-icon-bg { background: linear-gradient(135deg, #FFD97D, #f5c842); }

/* ── App-Tile: Anwesenheit ── */
.app-tile.anw .tile-icon-bg { background: linear-gradient(135deg, #7ED8B0, #9BAEE0); }

/* ══════════════════════════════════════════════════════════
   MOBILE HOMESCREEN — iOS-style App-Icon Grid
   Ersetzt die großen Kacheln auf kleinen Screens durch
   kompakte Icons (4 Spalten, wie ein Home-Screen).
   Auto-sizing: CSS grid füllt Reihen automatisch.
══════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  .app-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 14px 40px;
    max-width: 100%;
  }

  .app-tile {
    padding: 10px 5px 9px;
    border-radius: 20px;
    min-height: unset;
  }

  /* Inline-Glasshine nur ganz oben, dezenter */
  .app-tile::before { background: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, transparent 50%); }

  .tile-icon-bg.tile-icon-png {
    width: 62px !important; height: 62px !important;
    min-width: 62px; min-height: 62px;
    max-width: 62px; max-height: 62px;
    margin-bottom: 7px;
  }

  .tile-png {
    width: 62px !important; height: 62px !important;
    min-width: 62px; min-height: 62px;
    max-width: 62px; max-height: 62px;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(60,50,120,0.20);
  }

  /* Kleiner Name, Nunito statt Fraunces für Lesbarkeit */
  .tile-name {
    font-family: 'Nunito', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  /* Beschreibung ausblenden – kein Platz */
  .tile-desc { display: none; }

  /* Header anpassen */
  .dash-header { padding: 22px 16px 0; }
  .dash-divider { padding: 0; margin: 18px 16px 0 !important; max-width: calc(100% - 32px); }
  .dash-section-label { padding: 14px 16px 8px; }
  .reorder-hint { padding: 0 16px 8px; }

  /* Grüßung kompakter */
  .dash-header-left h1 { font-size: 1.45rem; }
  .dash-header-sub { font-size: 0.7rem; }
}

/* ══════════════════════════════════════════════════════════
   ANWESENHEIT MODUL
══════════════════════════════════════════════════════════ */

/* ── Layout wrap ── */
.anw-wrap {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar (nur Desktop) ── */
.anw-sidebar {
  display: none;
  width: 220px;
  min-height: 100vh;
  padding: 28px 14px;
  flex-direction: column;
  gap: 2px;
  background: var(--glass);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid rgba(255,255,255,0.65);
  flex-shrink: 0;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}
@media (min-width: 768px) { .anw-sidebar { display: flex; } }

.anw-sidebar-header { margin-bottom: 20px; padding: 2px 8px; }
.anw-sidebar-label  { font-size: 10px; color: var(--text-light); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.anw-sidebar-class  { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; color: var(--text); line-height: 1.15; }
.anw-sidebar-year   { font-size: 12px; color: var(--text-light); margin-top: 2px; }

.anw-sidebar-section {
  font-size: 10px; color: var(--text-light); font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 12px 10px 5px;
}

.anw-nav-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 16px; border-radius: 12px;
  background: transparent; border: 1px solid transparent;
  color: var(--text-light); font-weight: 800;
  font-family: 'Nunito', sans-serif; font-size: 0.88rem;
  cursor: pointer; transition: var(--transition); text-align: left;
  margin-bottom: 2px; min-height: 38px;}
.anw-nav-btn:hover  { background: var(--lav-light); color: var(--text-mid); }
.anw-nav-btn.active { background: var(--lav-mid); border-color: rgba(var(--lav-rgb), 0.45); color: var(--text); font-weight: 700; }

.anw-hj-btn {
  display: block; width: 100%; text-align: left;
  padding: 10px 16px; border-radius: 12px; margin-bottom: 2px;
  background: transparent; border: 1px solid transparent;
  color: var(--text-light); font-weight: 800;
  font-family: 'Nunito', sans-serif; font-size: 0.88rem;
  cursor: pointer; transition: var(--transition); min-height: 38px;}
.anw-hj-btn:hover  { background: rgba(255,255,255,0.35); }
.anw-hj-btn.active { background: var(--lav-mid); border-color: rgba(var(--lav-rgb), 0.4); color: var(--text); font-weight: 700; }

.anw-sidebar-undo {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 10px 12px; border-radius: 12px; margin-top: 10px;
  background: rgba(255,255,255,0.3); border: 1px solid var(--glass-stroke);
  color: var(--text-light); font-weight: 600;
  font-family: 'Nunito', sans-serif; font-size: 13px;
  cursor: pointer; transition: var(--transition);
}
.anw-sidebar-undo:hover { background: rgba(255,255,255,0.5); color: var(--text-mid); }

/* ── Main area ── */
.anw-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}

.anw-view-container {
  padding: 14px 16px 90px;
  max-width: 920px;
  flex: 1;
}
@media (min-width: 768px) {
  .anw-view-container { padding: 20px 28px 32px; }
}

/* ── Mobile top bar (Halbjahr + Undo) ── */
.anw-mob-bar {
  padding: 12px 16px 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
@media (min-width: 768px) { .anw-mob-bar { display: none; } }

.anw-mob-undo {
  padding: 5px 12px; border-radius: 20px; cursor: pointer;
  border: 1.5px solid rgba(200,200,220,0.4);
  background: rgba(255,255,255,0.35); color: var(--text-light);
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 11px;
  transition: var(--transition);
}
.anw-mob-undo:hover { background: rgba(255,255,255,0.55); }

/* ── Bottom nav (Mobile) ── */
.anw-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; z-index: 50;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255,255,255,0.7);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 768px) { .anw-bottom-nav { display: none; } }

.anw-bot-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px; background: none; border: none; cursor: pointer;
}
.anw-bot-btn .bot-icon { font-size: 22px; }
.anw-bot-btn .bot-label {
  font-size: 10px; font-family: 'Nunito', sans-serif;
  font-weight: 500; color: var(--text-light);
}
.anw-bot-btn.active .bot-label { font-weight: 800; color: var(--text); }

/* ── Glass card (base) ── */
.anw-card {
  background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius);
  margin-bottom: 14px;
}

/* ── Week navigation ── */
.anw-week-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px 12px;
}
.anw-week-center { text-align: center; flex: 1; }
.anw-week-label { font-size: 11px; color: var(--text-light); font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; }
.anw-week-num   { font-family: 'Fraunces', serif; font-size: 32px; font-weight: 300; color: var(--text); line-height: 1; }
.anw-week-dates { font-size: 11px; color: var(--text-light); margin-top: 2px; }

.anw-week-actions {
  padding: 0 18px 14px;
  display: flex; justify-content: center; gap: 8px;
}

.anw-nav-arrow {
  background: var(--lav-light); border: none; border-radius: 10px;
  padding: 8px 16px; cursor: pointer; font-size: 18px; color: var(--lavender);
  font-weight: 700; font-family: 'Nunito', sans-serif; transition: var(--transition);
  line-height: 1;
}
.anw-nav-arrow:hover { background: var(--lav-mid); }

.anw-week-btn {
  padding: 5px 14px; border-radius: 20px; cursor: pointer;
  border: 1.5px solid rgba(var(--lav-rgb), 0.45);
  background: rgba(var(--lav-rgb), 0.12); color: var(--lavender);
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 11px;
  transition: var(--transition);
}
.anw-week-btn:hover   { background: var(--lav-mid); }
.anw-week-btn.sec {
  border-color: rgba(200,200,220,0.4);
  background: rgba(255,255,255,0.3); color: var(--text-light);
}

/* ── Stundenplan ── */
.anw-stunden-label {
  font-size: 10px; color: var(--text-light); font-weight: 800;
  letter-spacing: 0.6px; text-transform: uppercase;
  padding: 12px 14px 0;
}
.anw-stunden-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px; padding: 10px 12px 12px;
}
.anw-stunden-day {
  border-radius: 12px; padding: 7px 5px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.5);
}
.anw-stunden-day.today  { background: var(--lav-mid); border-color: rgba(var(--lav-rgb), 0.55); }
.anw-stunden-day.ferien { background: rgba(200,200,220,0.08); opacity: 0.7; }

.anw-sd-name  { font-size: 10px; font-weight: 800; text-align: center; color: var(--text-light); }
.anw-sd-date  { font-size: 9px; font-weight: 500; color: #ccc; text-align: center; margin-bottom: 4px; }
.anw-stunden-day.today .anw-sd-name { color: var(--lavender); }

.anw-sd-lesson {
  margin-bottom: 3px; padding: 3px;
  border-radius: 6px; background: rgba(255,255,255,0.38); text-align: center;
}
.anw-sd-lesson-name { font-size: 9px; font-weight: 800; color: var(--text); }
.anw-sd-lesson-std  { font-size: 8px; color: var(--text-light); }

.anw-abs-badge {
  margin-top: 3px; padding: 2px 3px; border-radius: 5px;
  text-align: center; font-size: 9px; font-weight: 700;
}
.anw-abs-badge.mid  { background: rgba(255,234,167,0.5); color: #9a6d00; }
.anw-abs-badge.high { background: rgba(255,179,186,0.5); color: #b02840; }

.anw-all-btn {
  margin-top: 3px; padding: 2px; border-radius: 6px; width: 100%;
  border: 1px solid rgba(var(--ok-rgb), 0.55);
  background: rgba(var(--ok-rgb), 0.15); color: var(--ok-ink);
  font-size: 9px; font-weight: 700;
  font-family: 'Nunito', sans-serif; cursor: pointer; transition: var(--transition);
}
.anw-all-btn:hover { background: rgba(var(--mint-rgb), 0.32); }

/* ── Wochennotiz ── */
.anw-notiz-inner { padding: 12px 16px; }
.anw-notiz-label { font-size: 10px; color: var(--text-light); font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 7px; }
.anw-notiz {
  width: 100%; padding: 9px 12px;
  border: 1px solid rgba(200,200,220,0.35);
  border-radius: 12px; background: rgba(255,255,255,0.45);
  font-family: 'Nunito', sans-serif; font-size: 13px; color: var(--text);
  resize: none; min-height: 46px; outline: none; box-sizing: border-box;
  transition: var(--transition);
}
.anw-notiz:focus { border-color: var(--lavender); background: rgba(255,255,255,0.65); }

/* ── Attendance grid ── */
.anw-grid-wrap {
  background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 14px;
}
.anw-grid-header {
  display: grid; grid-template-columns: 110px repeat(5, 1fr);
  border-bottom: 1px solid rgba(200,200,220,0.25);
  padding: 0 10px;
}
.anw-gh-name {
  padding: 10px 6px;
  font-size: 10px; color: var(--text-light); font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
}
.anw-gh-day {
  padding: 8px 4px; text-align: center;
  border-left: 1px solid rgba(200,200,220,0.2);
}
.anw-gh-day.today { background: rgba(var(--lav-rgb), 0.12); }
.anw-gh-day-name { font-size: 10px; font-weight: 800; color: var(--text-light); }
.anw-gh-day-name.today { color: var(--lavender); }
.anw-gh-day-date { font-size: 9px; color: #ccc; }

.anw-grid-row {
  display: grid; grid-template-columns: 110px repeat(5, 1fr);
  padding: 0 10px;
  border-bottom: 1px solid rgba(200,200,220,0.18);
}
.anw-grid-row:last-child { border-bottom: none; }
.anw-grid-row.alert { background: rgba(var(--alarm-rgb), 0.06); }

.anw-student-cell {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 4px; cursor: pointer;
}

.anw-avatar {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  background: var(--lav-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: var(--lavender);
}
.anw-s-name {
  font-size: 12px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 64px;
  transition: var(--transition);
}
.anw-student-cell:hover .anw-s-name { color: var(--lavender); }
.anw-s-alert { font-size: 8px; color: var(--alarm); }

.anw-day-cell {
  border-left: 1px solid rgba(200,200,220,0.2);
  display: flex; align-items: center; justify-content: center;
  padding: 4px 2px;
}
.anw-day-cell.today  { background: rgba(var(--lav-rgb), 0.07); }
.anw-day-cell.ferien { background: rgba(200,200,220,0.04); }

.anw-sbtn {
  width: 38px; height: 40px; border-radius: 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; font-family: 'Nunito', sans-serif;
  transition: all 0.14s;
  border: 1.5px solid rgba(200,200,220,0.25);
  background: rgba(255,255,255,0.3);
}
.anw-sbtn:hover { transform: scale(1.1); }
.anw-sbtn .s-sym { font-size: 12px; line-height: 1; }
.anw-sbtn .s-sub { font-size: 7px; font-weight: 800; }

/* Status colors for buttons */
.as-entschuldigt   { background: rgba(255,211,182,0.5); border-color: rgba(255,211,182,0.8); }
.as-unentschuldigt { background: rgba(255,179,186,0.5); border-color: rgba(255,179,186,0.8); }
.as-verspätet      { background: rgba(255,234,167,0.5); border-color: rgba(255,234,167,0.85); }
.as-früher         { background: rgba(200,202,255,0.45); border-color: rgba(200,202,255,0.8); }

/* ── Legend ── */
.anw-legend {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 0 2px;
}
.anw-legend-item { display: flex; align-items: center; gap: 5px; }
.anw-legend-dot  { width: 12px; height: 12px; border-radius: 3px; }
.anw-legend-lbl  { font-size: 11px; color: var(--text-light); font-weight: 600; }

/* ── Status Popup ── */
.anw-popup {
  position: fixed; z-index: 500;
  background: var(--sheet-bg);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--glass-stroke);
  border-radius: 16px; padding: 8px; min-width: 200px;
  box-shadow: var(--shadow-lg);
  animation: popIn 0.2s cubic-bezier(.34,1.56,.64,1) both;
}
.anw-popup-hdr {
  font-size: 10px; color: var(--text-light); font-weight: 800;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 4px 8px 8px;
}
.anw-popup-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px; border-radius: 10px; margin-bottom: 2px;
  background: transparent; border: 1.5px solid transparent;
  cursor: pointer; font-family: 'Nunito', sans-serif;
  font-weight: 600; color: var(--text-mid); font-size: 13px;
  transition: all 0.12s; text-align: left;
}
.anw-popup-btn:hover  { background: rgba(255,255,255,0.6); }
.anw-popup-btn.active { font-weight: 800; }
.anw-popup-btn .pp-arrow { font-size: 10px; color: var(--text-light); margin-left: auto; }
.anw-popup-btn .pp-check { margin-left: auto; font-size: 12px; }

/* ── Modals ── */
.anw-modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(50,35,90,0.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.anw-modal-overlay.sheet { align-items: flex-end; justify-content: center; padding: 0; }

.anw-modal-card {
  background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-stroke);
  border-radius: 24px; padding: 28px; max-width: 380px; width: 100%;
  box-shadow: var(--shadow-lg);
  animation: popIn 0.3s cubic-bezier(.34,1.56,.64,1) both;
}
.anw-modal-sheet {
  background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-stroke);
  border-radius: 24px 24px 0 0; padding: 24px;
  width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.3s cubic-bezier(.4,0,.2,1) both;
}
@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.anw-modal-title { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.anw-modal-sub   { font-size: 13px; color: var(--text-light); margin-bottom: 20px; }
.anw-modal-label { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 8px; }

.anw-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.anw-chip {
  padding: 7px 12px; border-radius: 10px; cursor: pointer;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 12px;
  background: rgba(255,255,255,0.4); border: 1.5px solid rgba(200,200,220,0.35);
  color: var(--text-light); transition: var(--transition);
}
.anw-chip.active { font-weight: 800; }

.anw-num-input {
  width: 100%; padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid rgba(200,200,220,0.4);
  background: rgba(255,255,255,0.55);
  font-family: 'Nunito', sans-serif; font-size: 14px; color: var(--text);
  outline: none; margin-bottom: 16px; box-sizing: border-box;
  transition: var(--transition);
}
.anw-num-input:focus { border-color: var(--lavender); background: rgba(255,255,255,0.75); }

.anw-modal-btns { display: flex; gap: 10px; }
.anw-mbtn {
  flex: 1; padding: 10px 16px; border-radius: 12px; cursor: pointer;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.88rem;
  transition: var(--transition); border: none; min-height: 38px;}
.anw-mbtn.cancel {
  background: rgba(255,255,255,0.35); border: 1.5px solid rgba(200,200,220,0.4);
  color: var(--text-light);
}
.anw-mbtn.cancel:hover { background: rgba(255,255,255,0.55); }
.anw-mbtn.confirm { font-weight: 800; }

/* ── Stat quote card ── */
.anw-quote {
  background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius); padding: 24px; text-align: center; margin-bottom: 14px;
}
.anw-quote-lbl { font-size: 11px; color: var(--text-light); font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; }
.anw-quote-num { font-family: 'Fraunces', serif; font-size: 56px; font-weight: 300; color: var(--text); line-height: 1.05; margin-top: 4px; }
.anw-quote-sub { font-size: 12px; color: var(--text-light); margin-top: 4px; }
.anw-quote-badges { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.anw-q-badge {
  background: var(--glass); border: 1px solid var(--glass-stroke);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-radius: 14px; padding: 10px 16px; text-align: center;
}
.anw-qb-num { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; }
.anw-qb-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1px; }

/* ── Stat list ── */
.anw-stat-list {
  background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius); padding: 10px; margin-bottom: 14px;
}
.anw-stat-hdr {
  display: grid; grid-template-columns: 1fr 34px 34px 34px 34px 50px 22px;
  gap: 4px; padding: 6px 10px;
  font-size: 10px; color: var(--text-light); font-weight: 800;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.anw-stat-row {
  display: grid; grid-template-columns: 1fr 34px 34px 34px 34px 50px 22px;
  gap: 4px; padding: 10px 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent; transition: var(--transition); margin-bottom: 2px;
}
.anw-stat-row:hover  { background: rgba(255,255,255,0.35); }
.anw-stat-row.alert  { background: rgba(var(--alarm-rgb), 0.1); border-color: rgba(var(--alarm-rgb), 0.3); }
.anw-sr-name { font-size: 13px; font-weight: 700; color: var(--text); }
.anw-sr-val  { text-align: center; font-weight: 800; font-size: 14px; color: var(--text-light); }
.anw-sr-std  { text-align: right; font-size: 12px; color: var(--text-light); }

/* ── Calendar in modal ── */
.anw-stat-mini {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 18px;
}
.anw-sm-card {
  background: var(--glass); border: 1px solid var(--glass-stroke);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-radius: 14px; padding: 10px 4px; text-align: center;
}
.anw-sm-num { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; }
.anw-sm-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1px; }

.anw-cal-hdr {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.anw-cal-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; color: var(--text); }
.anw-cal-days-hdr {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 4px;
}
.anw-cal-day-lbl { text-align: center; font-size: 10px; color: var(--text-light); font-weight: 700; padding: 3px; }
.anw-cal-grid    { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.anw-cal-cell {
  text-align: center; padding: 5px 2px; border-radius: 8px;
  font-size: 11px; border: 2px solid transparent; transition: var(--transition);
  color: #ccc;
}
.anw-cal-cell.today  { border-color: var(--lavender) !important; }
.anw-cal-cell.active { font-weight: 800; }
.anw-cal-cell-sub    { font-size: 8px; font-weight: 900; }

.anw-cal-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ── Einstellungen ── */
.anw-setting-card {
  background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius); padding: 20px; margin-bottom: 12px;
}
.anw-setting-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.anw-setting-lbl { font-size: 14px; font-weight: 700; }
.anw-setting-val { font-family: 'Fraunces', serif; font-size: 36px; font-weight: 300; color: var(--text); }

/* ── Toast ── */
.anw-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  z-index: 600;
  background: var(--sheet-bg);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-stroke);
  border-radius: 30px; padding: 10px 22px; box-shadow: var(--shadow-lg);
  font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap;
  animation: popIn 0.25s ease both;
}
@media (min-width: 768px) { .anw-toast { bottom: 24px; } }


/* ══════════════════════════════════════════════════════
   KLASSENKASSE — CSS-Ergänzungen (an style.css anhängen)
   Prefix: kk-  |  Wiederverwendet: up-glass, up-glass2,
   anw-modal-*, anw-num-input, anw-toast, btn-primary, .hidden
══════════════════════════════════════════════════════ */

/* ── Dashboard tile ── */
.app-tile.kasse .tile-icon-bg { background: linear-gradient(135deg, #F5C2CC, #C2D8F8); }

/* ── App shell ── */
.kk-app { display:flex; flex-direction:column; height:100dvh; overflow:hidden; }

/* ── Header ── */
.kk-header {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px; flex-shrink:0;
  background:var(--glass);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.52);
  position:sticky; top:0; z-index:100;
}
.kk-header-center { text-align:center; flex:1; min-width:0; }
.kk-header-kl  { font-family:'Fraunces',serif; font-size:0.95rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kk-header-sub { font-size:10px; font-weight:800; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-light); margin-top:2px; }

/* ── Content + pages ── */
.kk-content { flex:1; overflow:hidden; }
.kk-page {
  height:100%; overflow-y:auto;
  padding:14px 14px calc(68px + 70px);
  animation:fadeUp 0.3s ease both;
}
.kk-page::-webkit-scrollbar { width:3px; }
.kk-page::-webkit-scrollbar-thumb { background:var(--lav-mid); border-radius:2px; }

/* ── Stats 2×2 grid ── */
.kk-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.kk-stat {
  border-radius:16px; padding:14px;
  background:var(--sc, rgba(255,255,255,0.2));
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.5);
}
.kk-stat-l { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.7px; color:var(--text-mid); margin-bottom:5px; }
.kk-stat-v { font-family:'Fraunces',serif; font-size:1.35rem; font-weight:600; color:var(--text); line-height:1.1; }
.kk-stat-s { font-size:10px; color:var(--text-light); margin-top:3px; }

/* ── Info strip ── */
.kk-info-strip {
  display:flex; flex-wrap:wrap; gap:5px; align-items:center;
  padding:10px 14px; border-radius:12px; margin-bottom:14px;
  font-size:12px; color:var(--text-mid);
}
.kk-dot { color:var(--text-light); }

/* ── Section title ── */
.kk-section-title {
  font-family:'Fraunces',serif; font-size:1rem; font-weight:600;
  color:var(--text); margin-bottom:10px; padding-left:2px;
}

/* ── Generic glass list card ── */
.kk-list-card { border-radius:18px; padding:16px; }

/* ── Chart accordion ── */
.kk-chart-sec { border-radius:16px; margin-bottom:10px; overflow:hidden; }
.kk-ct {
  width:100%; padding:14px 18px; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  font-family:'Nunito',sans-serif; font-size:13px; font-weight:700; color:var(--text);
  transition:var(--transition);
}
.kk-ct:active { background:rgba(255,255,255,0.15); }
.kk-carr { font-size:10px; color:var(--text-light); transition:transform 0.3s; }
.kk-carr.open { transform:rotate(180deg); }
.kk-cbody { max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
.kk-cbody.open { max-height:320px; padding:0 14px 14px; }
.kk-cbody canvas { max-height:280px; }

/* ── Transaction item ── */
.kk-ti { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,0.35); }
.kk-ti:last-child { border-bottom:none; padding-bottom:0; }
.kk-ti-ico { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.kk-ti-body { flex:1; min-width:0; }
.kk-ti-name { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kk-ti-meta { font-size:11px; color:var(--text-light); margin-top:2px; display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.kk-ti-amt { font-family:'Fraunces',serif; font-size:1rem; font-weight:600; flex-shrink:0; }
.kk-ti-amt.pos { color:#2a7a55; }
.kk-ti-amt.neg { color:#a03040; }

/* ── Student item ── */
.kk-sti { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,0.35); }
.kk-sti:last-child { border-bottom:none; }
.kk-st-av {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--mint-mid), var(--lav-mid));
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-size:13px; font-weight:600; color:var(--text-mid);
}
.kk-sti-name { font-size:14px; font-weight:700; color:var(--text); }
.kk-sti-sub  { font-size:11px; color:var(--text-light); margin-top:2px; }
.kk-pay-btn {
  padding:6px 11px; border-radius:20px; border:none; cursor:pointer;
  font-family:'Nunito',sans-serif; font-size:11px; font-weight:800;
  transition:var(--transition); min-height:34px; flex-shrink:0;
}
.kk-pay-btn.paid   { background:rgba(var(--ok-rgb), 0.32); color:var(--ok-ink); }
.kk-pay-btn.unpaid { background:rgba(var(--err-rgb), 0.22); color:var(--err-ink); }

/* ── Bottom tab bar ── */
.kk-tab-bar {
  position:fixed; bottom:0; left:0; right:0; height:68px;
  display:flex; align-items:center; justify-content:space-around; padding:0 4px 8px;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,0.55); z-index:200;
}
.kk-tab {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  background:none; border:none; cursor:pointer; padding:7px 4px;
  border-radius:14px; min-height:52px; transition:background 0.15s;
}
.kk-tab:active { background:var(--lav-light); }
.kk-tab-i { font-size:21px; transition:transform 0.2s; display:block; }
.kk-tab.on .kk-tab-i { transform:scale(1.15); }
.kk-tab-l { font-size:10px; font-weight:800; color:var(--text-light); letter-spacing:0.1px; transition:color 0.15s; }
.kk-tab.on .kk-tab-l { color:var(--text); }
.kk-tab-dot { width:4px; height:4px; border-radius:50%; background:var(--lavender); opacity:0; transition:opacity 0.2s; margin-top:1px; }
.kk-tab.on .kk-tab-dot { opacity:1; }

/* ── FAB ── */
.kk-fab {
  position:fixed; bottom:calc(68px + 14px); right:18px;
  width:52px; height:52px; border-radius:50%;
  background:var(--btn-bg);
  color:white; font-size:26px; border:none; cursor:pointer; z-index:199;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--btn-shadow);
  transition:transform 0.15s, box-shadow 0.15s; line-height:1;
}
.kk-fab:active { transform:scale(0.9); box-shadow:var(--btn-shadow); }

/* ── Filter pill bar ── */
.kk-filter-bar {
  display:flex; background:rgba(255,255,255,0.22); border-radius:14px;
  padding:4px; margin-bottom:12px; gap:3px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.45);
}
.kk-filter {
  flex:1; padding:8px 4px; border-radius:10px; border:none;
  background:transparent; font-family:'Nunito',sans-serif;
  font-size:12px; font-weight:700; color:var(--text-light); cursor:pointer;
  transition:all 0.18s;
}
.kk-filter.on { background:rgba(255,255,255,0.85); color:var(--text); box-shadow:0 1px 6px rgba(60,50,120,0.1); }

/* ── Loading screen ── */
.kk-loading-screen {
  position:fixed; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  font-family:'Fraunces',serif; font-size:0.95rem; color:var(--text-light);
  background:var(--sheet-bg); backdrop-filter:blur(10px);
}
.kk-loading-screen .spinner { width:28px; height:28px; border-width:3px; border-top-color:var(--lavender); }

/* ── Icon button (small actions) ── */
.kk-icon-btn {
  width:40px; height:40px; border-radius:11px; border:1.5px solid var(--glass-stroke);
  background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--text); flex-shrink:0; transition:var(--transition); box-shadow:var(--shadow);
}
.kk-icon-btn:active { transform:scale(0.92); }

/* ── Modal close button ── */
.kk-close-btn {
  width:32px; height:32px; border-radius:50%; border:none; flex-shrink:0;
  background:rgba(200,200,220,0.25); cursor:pointer; font-size:13px;
  display:flex; align-items:center; justify-content:center; color:var(--text-mid);
  transition:var(--transition);
}
.kk-close-btn:active { background:var(--lav-mid); }

/* ── Bottom sheet handle ── */
.kk-sheet-handle {
  width:36px; height:4px; background:rgba(var(--lav-rgb), 0.45);
  border-radius:2px; margin:0 auto 16px;
}

/* ── Form field helpers ── */
.kk-fg { margin-bottom:14px; }
.kk-fl {
  display:block; font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:0.6px; color:var(--text-light); margin-bottom:6px;
}

/* ── Einnahme/Ausgabe type toggle ── */
.kk-type-btns { display:flex; gap:8px; }
.kk-type-btn {
  flex:1; padding:11px; border-radius:12px; min-height:46px;
  border:2px solid rgba(200,200,220,0.28); background:rgba(255,255,255,0.28);
  font-family:'Nunito',sans-serif; font-size:13px; font-weight:700; cursor:pointer;
  color:var(--text); transition:var(--transition);
}
.kk-type-btn.kk-typ-aus { border-color:rgba(var(--alarm-rgb), 0.55); background:rgba(var(--alarm-rgb), 0.12); }
.kk-type-btn.kk-typ-ein { border-color:rgba(var(--mint-rgb), 0.55); background:rgba(var(--mint-rgb), 0.12); }

/* ── Category grid ── */
.kk-cat-grid  { display:flex; flex-wrap:wrap; gap:7px; }
.kk-cat-pill  {
  padding:7px 11px; border-radius:20px; border:2px solid transparent;
  font-size:12px; font-weight:700; cursor:pointer; transition:var(--transition);
  min-height:34px; display:flex; align-items:center; gap:4px;
}
.kk-cat-pill.sel { border-color:var(--text); }

/* ── KW chip ── */
.kk-kw {
  background:rgba(var(--lav-rgb), 0.22); color:var(--text-mid);
  padding:1px 6px; border-radius:5px; font-size:10px; font-weight:800;
  display:inline-block;
}

/* ── Status badge (toggleable) ── */
.kk-bdg {
  display:inline-flex; align-items:center; padding:3px 9px;
  border-radius:20px; font-size:11px; font-weight:800; cursor:pointer;
  border:none; font-family:'Nunito',sans-serif; transition:var(--transition);
}
.kk-bdg.ok  { background:rgba(var(--ok-rgb), 0.28); color:var(--ok-ink); }
.kk-bdg.err { background:rgba(var(--err-rgb), 0.22); color:var(--err-ink); }
.kk-bdg.neu { background:var(--lav-light); color:var(--text-mid); }

/* ── Lehrer tag row ── */
.kk-tag-wrap { display:flex; flex-wrap:wrap; gap:8px; min-height:28px; }
.kk-ltag {
  display:flex; align-items:center; gap:6px;
  background:var(--lav-light); border:1px solid var(--glass-stroke);
  border-radius:20px; padding:6px 12px; font-size:13px; font-weight:700; color:var(--text);
}
.kk-ltag-del {
  background:none; border:none; cursor:pointer; color:var(--alarm);
  font-size:16px; line-height:1; padding:0 2px; min-width:24px; min-height:24px;
  display:flex; align-items:center; justify-content:center;
}

/* ── Stats bar (Klassenliste header) ── */
.kk-st-bar {
  display:flex; justify-content:space-around; padding:14px 10px;
  border-radius:18px; margin-bottom:12px; text-align:center;
}
.kk-st-bar .kk-stat-v { font-size:1.2rem; }

/* ── Vorlage / Template item ── */
.kk-tmpl {
  display:flex; align-items:center; gap:12px; padding:12px;
  background:var(--lav-light); border-radius:12px; margin-bottom:8px;
  cursor:pointer; transition:background 0.15s; border:1px solid rgba(255,255,255,0.45);
}
.kk-tmpl:last-child { margin-bottom:0; }
.kk-tmpl:active { background:var(--lav-mid); }

/* ── Class selector item ── */
.kk-cls-item {
  display:flex; align-items:center; gap:12px; width:100%; padding:14px 2px;
  border:none; background:none; cursor:pointer; font-family:'Nunito',sans-serif;
  border-bottom:1px solid rgba(255,255,255,0.35); text-align:left; transition:background 0.12s;
}
.kk-cls-item:last-child { border-bottom:none; }
.kk-cls-item:active { background:var(--lav-light); border-radius:10px; }

/* ── Empty state ── */
.kk-empty { text-align:center; padding:28px 16px; color:var(--text-light); }
.kk-empty-i { font-size:34px; margin-bottom:8px; }
.kk-empty p { font-size:13px; font-weight:600; }


/* ══════════════════════════════════════════════════════════════
   UI-UPGRADE ADDITIONS — Baermann Homeserver
   Ergänzt von: UI-Verbesserungsplan April 2026
   Diese Klassen werden modulübergreifend im UI-Upgrade genutzt.
══════════════════════════════════════════════════════════════ */

/* ── Grün-Flash nach Speichern — an jedem Element nutzbar ── */
@keyframes savedFlash {
  0%   { background: rgba(var(--mint-rgb), 0.0); }
  30%  { background: rgba(var(--mint-rgb), 0.32); }
  100% { background: rgba(var(--mint-rgb), 0.0); }
}
.u-saved-flash { animation: savedFlash 0.7s ease; }

/* ── Tab-/Seiten-Übergang ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.u-fade-in { animation: fadeIn 0.25s cubic-bezier(.4,0,.2,1) both; }

/* ── Gestaffelte Kinder-Einblendung ── */
/* Nutzung: class="u-stagger" auf Container, Kinder blenden gestaffelt ein */
.u-stagger > *:nth-child(1)   { animation: fadeUp 0.35s 0.00s ease both; }
.u-stagger > *:nth-child(2)   { animation: fadeUp 0.35s 0.05s ease both; }
.u-stagger > *:nth-child(3)   { animation: fadeUp 0.35s 0.10s ease both; }
.u-stagger > *:nth-child(4)   { animation: fadeUp 0.35s 0.15s ease both; }
.u-stagger > *:nth-child(5)   { animation: fadeUp 0.35s 0.20s ease both; }
.u-stagger > *:nth-child(6)   { animation: fadeUp 0.35s 0.25s ease both; }
.u-stagger > *:nth-child(n+7) { animation: fadeUp 0.35s 0.30s ease both; }

/* ── Skeleton-Loading ── */
@keyframes shimmer {
  from { background-position: -400px 0; }
  to   { background-position:  400px 0; }
}
.u-skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,.1) 25%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.1) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent !important;
  pointer-events: none;
}

/* ── Danger-Button zweistufig (confirming-State) ── */
/* JS: btn.classList.add('confirming'), nach 2s remove */
/* Bereits in c-btn-danger vorhanden — auch für andere Buttons: */
.u-confirming {
  animation: dangerPulse 1.1s ease-in-out infinite !important;
  background: linear-gradient(135deg, #e53935, #c62828) !important;
  color: white !important;
}
@keyframes dangerPulse {
  0%   { box-shadow: 0 0 0 0   rgba(var(--alarm-rgb), 0.60); }
  50%  { box-shadow: 0 0 0 8px rgba(var(--alarm-rgb), 0.00); }
  100% { box-shadow: 0 0 0 0   rgba(var(--alarm-rgb), 0.60); }
}

/* ── Hover-Lift für Karten (modulübergreifend) ── */
/* Nutzung: Klasse .u-card-hover auf jede klickbare Karte */
.u-card-hover {
  transition: var(--transition);
}
.u-card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.u-card-hover:active {
  transform: scale(0.97);
}

/* ── Cell-saved Flash (für Tabellen-/Grid-Zellen) ── */
.u-cell-saved {
  animation: savedFlash 0.7s ease;
}

/* ── Akkordeon via max-height (kein display:none mehr nötig) ── */
/* Nutzung: .u-acc-body auf dem Body, .u-acc.open .u-acc-body öffnet */
.u-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(.4,0,.2,1);
}
.u-acc.open .u-acc-body {
  max-height: 600px;
}
.u-acc-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.u-acc.open .u-acc-arrow {
  transform: rotate(180deg);
}

/* ── Link zurück zur TeacherCubs-Website (auf Anmelde-Screen) ── */
.website-backlink {
  display: block; margin-top: 16px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.82rem; font-weight: 700;
  color: var(--text-light);
  text-decoration: none; text-align: center;
  opacity: 0.7; transition: opacity 0.2s;
  letter-spacing: 0.02em;
}
.website-backlink:hover { opacity: 1; color: var(--text-mid); }

/* ── Rechtliches-Fusszeile ─────────────────────────────────────────────────
   Impressum und Datenschutz muessen nach § 5 DDG "leicht erkennbar, unmittelbar
   erreichbar und staendig verfuegbar" sein — also VOR der Anmeldung, nicht erst
   im Dashboard. Deshalb dezent, aber auf dem Startbildschirm sichtbar.        */
.rechts-fuss {
  margin-top: 18px; text-align: center;
  font-family: 'Nunito', sans-serif;
  font-size: 0.78rem; color: var(--text-light);
  display: flex; justify-content: center; align-items: center; gap: 8px;
}
.rechts-fuss a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px; opacity: .8; transition: opacity 0.2s;
}
.rechts-fuss a:hover { opacity: 1; }
.rechts-fuss span { opacity: .45; }

/* Hinweis unter der Zustimmung bei der Registrierung: Verantwortung fuer
   Schuelerdaten liegt bei der Schule (Art. 28 DSGVO), nicht bei der Lehrkraft. */
.agb-hinweis {
  margin: 8px 2px 0;
  font-family: 'Nunito', sans-serif;
  font-size: 0.74rem; line-height: 1.5;
  color: var(--text-light); text-align: left;
}

/* ── Markenzeichen im Registrierungs-Screen ────────────────────────────────
   Ersetzt den frueheren Avatar-Kreis (.login-avatar mit Initiale). Bewusst
   NICHT rund und ohne Hintergrund: Das PNG ist freigestellt, der Schatten
   folgt per drop-shadow der Silhouette statt einem Kasten.               */
.reg-brand {
  display: block;
  width: 108px; height: 108px;
  object-fit: contain;
  margin: 0 auto 18px;
  filter: drop-shadow(0 8px 18px rgba(60, 50, 120, 0.20));
}

/* ── Links auf die Rechtstexte ─────────────────────────────────────────────
   .agb-link hatte GAR KEINE Regel — also Browser-Standard: knallblau und
   durchgestrichen unterstrichen. Jetzt in der Akzentfarbe, mit zurueck-
   genommenem Unterstrich auf Abstand zur Grundlinie; beim Ueberfahren wird
   er kraeftig. Unterstrich bleibt (nicht nur Farbe): Ein Link, der sich nur
   ueber die Farbe zu erkennen gibt, ist fuer Farbfehlsichtige keiner.    */
.agb-link {
  /* NICHT das reine --lavender: das ist ein helles Blau (#9BAEE0), als
     Textfarbe auf der hellen Karte nur ~1,9:1 Kontrast. Zur Textfarbe hin
     abgedunkelt bleibt der Farbton erhalten und der Text lesbar — und weil
     es ueber die Variablen laeuft, zieht es in allen sechs Themes mit. */
  color: color-mix(in srgb, var(--lavender, #7c6bd4) 55%, var(--text, #2D2A40));
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color .15s ease;
}
.agb-link:hover,
.agb-link:focus-visible { text-decoration-color: currentColor; }

/* Der Fliesstext-Hinweis darunter bleibt bewusst gedeckt — er ist Kleingedrucktes,
   kein Bedienelement. Nur der Unterstrich wird zeitgemaess gesetzt. */
.agb-hinweis a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
.agb-hinweis a:hover,
.agb-hinweis a:focus-visible { text-decoration-color: currentColor; }

/* ── Home-Button: Icon-only bei Modulen mit Fach-Picker ─────────────────────
   sidebar.js setzt .sb-hdr-has-fach auf den Mobile-Header wenn ein Fach-
   Selector erkannt wird (derzeit: Notenbuch, Unterrichtsplaner). Nur dort
   wird das Label ausgeblendet und der Chip kompakter.
─────────────────────────────────────────────────────────────────────────────*/

/* Home-Button immer links im Mobile-Header — order:-1 erzwingt Position
   unabhängig davon, was sb_style.css für die anderen Elemente setzt.       */
header.sb-mobile-hdr a.logout-btn:has(.home-btn-icon),
header.sb-mobile-hdr a.sb-home-btn,
header.kv-mob-hdr   a.kv-home-pill,
header.kk-mobile-hdr a.logout-btn:has(.home-btn-icon) { order: -1; }

@media (max-width: 620px) {
  /* Label nur in Headern mit Fach-Picker ausblenden */
  .sb-hdr-has-fach .home-btn-label { display: none; }

  .sb-hdr-has-fach a.logout-btn:has(.home-btn-icon),
  .sb-hdr-has-fach a.sb-home-btn,
  .sb-hdr-has-fach a.kv-home-pill {
    padding: 6px 8px !important;
    min-width: 0;
  }
  .sb-hdr-has-fach .home-btn-icon,
  .sb-hdr-has-fach a.sb-home-btn img,
  .sb-hdr-has-fach a.kv-home-pill img { width: 22px; height: 22px; margin-right: 0; }
}

/* ── Sidebar-Brand: Desktop zeigt "TEACHERCUBS" + Modulname,
   Mobile blendet den App-Titel aus (zu wenig Platz, Modulname reicht) ──── */
@media (max-width: 768px) {
  .sb-brand   .sb-label,
  .kv-sb-brand .kv-sb-label,
  .kk-sb-brand .kk-sb-label { display: none; }
}

/* ══════════════════════════════════════════
   DARSTELLUNG — Farbstile (shared/theme.js)
   html[data-theme] wird VOR dem ersten Paint gesetzt.
   'standard' = kein Attribut = verspielter Original-Look.
══════════════════════════════════════════ */

/* ── GRAPHIT — kühl, tintig, reduziert ── */
html[data-theme="graphit"] {
  /* Kategorien kuehl/tintig, Farbton bleibt unterscheidbar */
  --kat1-rgb:     201,180,137;    --kat1-ink: #5C4A22;
  --kat2-rgb:     140,120,180;    --kat2-ink: #3A2E58;
  --kat3-rgb:     110,140,180;    --kat3-ink: #26405C;
  --kat4-rgb:     100,158,150;    --kat4-ink: #1F4741;
  --kat5-rgb:     186,124,152;    --kat5-ink: #5C2B41;
  --kat6-rgb:     138,130,116;    --kat6-ink: #3E3930;
  /* Ampel kuehl/tintig wie der Stil, Farbton bleibt erhalten */
  --ok-rgb:       110,158,134;
  --warn-rgb:     201,180,137;
  --err-rgb:      193,118,107;
  --ok-ink:       #234A39;
  --warn-ink:     #5C4A22;
  --err-ink:      #78352C;
  --mint-rgb:     124,141,168;
  --lav-rgb:      140,150,174;
  --alarm-rgb:    193,118,107;
  --yellow-rgb:   201,180,137;
  --mint:         #7C8DA8;
  --mint-light:   rgba(124,141,168,0.16);
  --mint-mid:     rgba(124,141,168,0.32);
  --lavender:     #8C96AE;
  --lav-light:    rgba(140,150,174,0.16);
  --lav-mid:      rgba(140,150,174,0.32);
  --alarm:        #C1766B;
  --yellow:       #C9B489;
  --yel-light:    rgba(201,180,137,0.20);
  --glass:        rgba(255,255,255,0.42);
  --glass-b:      rgba(255,255,255,0.18);
  --glass-stroke: rgba(255,255,255,0.65);
  --text:         #23262E;
  --text-mid:     #4C5262;
  --text-light:   #7C8294;
  --radius:       16px;
  --radius-sm:    11px;
  --shadow:       0 6px 24px rgba(30,34,44,0.10);
  --shadow-lg:    0 16px 48px rgba(30,34,44,0.16);
  --vc-g1:        #252C3D;
  --vc-g2:        #33405C;
  --sheet-bg:    rgba(244,245,248,0.97);
  --card:        #F6F7FA;
}
html[data-theme="graphit"] body::before {
  background:
    radial-gradient(ellipse 70% 60% at 12% 15%, rgba(124,141,168,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 60% 70% at 88% 85%, rgba(150,160,182,0.20) 0%, transparent 65%),
    linear-gradient(150deg, #EEF0F4 0%, #E6E9EE 55%, #E1E5EC 100%);
}
html[data-theme="graphit"] .orb { opacity: 0.10; filter: blur(80px); }
html[data-theme="graphit"] body.on-dashboard .orb-1,
html[data-theme="graphit"] body.on-dashboard .orb-2,
html[data-theme="graphit"] body.on-dashboard .orb-3 { opacity: 0.12; }

/* ── SALBEI — warm, greige, gedämpftes Grün ── */
html[data-theme="salbei"] {
  /* Kategorien gedaempft/natuerlich, Farbton bleibt unterscheidbar */
  --kat1-rgb:     205,181,140;    --kat1-ink: #5E4A28;
  --kat2-rgb:     160,140,175;    --kat2-ink: #453A55;
  --kat3-rgb:     130,155,170;    --kat3-ink: #2F4450;
  --kat4-rgb:     122,164,146;    --kat4-ink: #274A3C;
  --kat5-rgb:     190,140,150;    --kat5-ink: #5C3038;
  --kat6-rgb:     150,145,128;    --kat6-ink: #3E3B2E;
  /* Ampel gedaempft/natuerlich wie der Stil, Farbton bleibt erhalten */
  --ok-rgb:       138,174,134;
  --warn-rgb:     205,181,140;
  --err-rgb:      188,129,117;
  --ok-ink:       #32502F;
  --warn-ink:     #5E4A28;
  --err-ink:      #71362C;
  --mint-rgb:     147,169,143;
  --lav-rgb:      167,158,141;
  --alarm-rgb:    188,129,117;
  --yellow-rgb:   205,181,140;
  --mint:         #93A98F;
  --mint-light:   rgba(147,169,143,0.16);
  --mint-mid:     rgba(147,169,143,0.32);
  --lavender:     #A79E8D;
  --lav-light:    rgba(167,158,141,0.16);
  --lav-mid:      rgba(167,158,141,0.32);
  --alarm:        #BC8175;
  --yellow:       #CDB58C;
  --yel-light:    rgba(205,181,140,0.20);
  --glass:        rgba(255,255,255,0.40);
  --glass-b:      rgba(255,255,255,0.16);
  --glass-stroke: rgba(255,255,255,0.62);
  --text:         #2E2B26;
  --text-mid:     #5B564C;
  --text-light:   #8C8578;
  --radius:       16px;
  --radius-sm:    11px;
  --shadow:       0 6px 24px rgba(58,52,40,0.09);
  --shadow-lg:    0 16px 48px rgba(58,52,40,0.15);
  --vc-g1:        #32423A;
  --vc-g2:        #41564A;
  --sheet-bg:    rgba(245,243,236,0.97);
  --card:        #F7F5EE;
}
html[data-theme="salbei"] body::before {
  background:
    radial-gradient(ellipse 70% 60% at 12% 15%, rgba(147,169,143,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 60% 70% at 88% 85%, rgba(190,178,155,0.22) 0%, transparent 65%),
    linear-gradient(150deg, #F3F0E9 0%, #ECE8DE 55%, #E7E3D6 100%);
}
html[data-theme="salbei"] .orb { opacity: 0.10; filter: blur(80px); }
html[data-theme="salbei"] body.on-dashboard .orb-1,
html[data-theme="salbei"] body.on-dashboard .orb-2,
html[data-theme="salbei"] body.on-dashboard .orb-3 { opacity: 0.12; }

/* ── CUB — warmes Braun der Website (Bären-Palette) ── */
html[data-theme="cub"] {
  /* Kategorien warm/erdig wie der Stil, Farbton bleibt unterscheidbar */
  --kat1-rgb:     202,150,42;     --kat1-ink: #6B4A12;
  --kat2-rgb:     150,110,160;    --kat2-ink: #4A2C52;
  --kat3-rgb:     100,130,160;    --kat3-ink: #26404F;
  --kat4-rgb:     108,158,132;    --kat4-ink: #234A38;
  --kat5-rgb:     196,124,132;    --kat5-ink: #5E2C32;
  --kat6-rgb:     140,124,104;    --kat6-ink: #43392C;
  /* Ampel warm/erdig wie der Stil (Moosgruen statt Mint), Farbton bleibt */
  --ok-rgb:       127,168,107;
  --warn-rgb:     217,164,65;
  --err-rgb:      185,106,90;
  --ok-ink:       #3A5528;
  --warn-ink:     #6B4A12;
  --err-ink:      #783527;
  --mint-rgb:     139,94,60;
  --lav-rgb:      169,139,108;
  --alarm-rgb:    185,106,90;
  --yellow-rgb:   217,164,65;
  --mint:         #8B5E3C;
  --mint-light:   rgba(139,94,60,0.14);
  --mint-mid:     rgba(139,94,60,0.30);
  --lavender:     #A98B6C;
  --lav-light:    rgba(169,139,108,0.15);
  --lav-mid:      rgba(169,139,108,0.32);
  --alarm:        #B96A5A;
  --yellow:       #D9A441;
  --yel-light:    rgba(217,164,65,0.18);
  --glass:        rgba(255,251,243,0.45);
  --glass-b:      rgba(255,251,243,0.20);
  --glass-stroke: rgba(255,255,255,0.60);
  --text:         #3A2A1C;
  --text-mid:     #6B5740;
  --text-light:   #98846B;
  --shadow:       0 8px 32px rgba(63,37,16,0.12);
  --shadow-lg:    0 20px 60px rgba(63,37,16,0.20);
  --vc-g1:        #3F2510;
  --vc-g2:        #5C3A22;
  --sheet-bg:    rgba(252,246,236,0.97);
  --card:        #FDF8F0;
}
html[data-theme="cub"] body::before {
  background:
    radial-gradient(ellipse 70% 60% at 15% 20%, rgba(217,164,65,0.20) 0%, transparent 65%),
    radial-gradient(ellipse 60% 70% at 85% 80%, rgba(139,94,60,0.18) 0%, transparent 65%),
    linear-gradient(140deg, #F7F0E4 0%, #F2E8D6 55%, #EFE2CE 100%);
}
html[data-theme="cub"] .orb { opacity: 0.14; filter: blur(70px); }

/* ── MONO — reine Graustufen ── */
html[data-theme="mono"] {
  /* Kategorien stark entsaettigt — gerade so viel Farbe, dass zwei
     Merkmale nebeneinander noch unterscheidbar sind. */
  --kat1-rgb:     168,158,120;    --kat1-ink: #3E3822;
  --kat2-rgb:     150,142,165;    --kat2-ink: #34303E;
  --kat3-rgb:     128,146,166;    --kat3-ink: #29323C;
  --kat4-rgb:     130,158,148;    --kat4-ink: #293A34;
  --kat5-rgb:     170,142,150;    --kat5-ink: #3C3034;
  --kat6-rgb:     146,142,134;    --kat6-ink: #353330;
  /* Ampel stark entsaettigt — gerade so viel Farbe, dass die Zustaende
     unterscheidbar bleiben. Ganz grau waere in Mono zwar konsequent,
     macht bezahlt/offen aber ununterscheidbar. */
  --ok-rgb:       126,154,133;
  --warn-rgb:     176,160,117;
  --err-rgb:      176,128,128;
  --ok-ink:       #2C3A32;
  --warn-ink:     #3E3722;
  --err-ink:      #3E2C2C;
  /* --yellow-rgb folgt --yellow (#A8A8A8). Dass --yel-light abweichend
     150,150,150 trägt, ist Altbestand und bleibt unangetastet. */
  --mint-rgb:     118,118,118;
  --lav-rgb:      138,138,138;
  --alarm-rgb:    161,93,93;
  --yellow-rgb:   168,168,168;
  --mint:         #767676;
  --mint-light:   rgba(118,118,118,0.14);
  --mint-mid:     rgba(118,118,118,0.30);
  --lavender:     #8A8A8A;
  --lav-light:    rgba(138,138,138,0.14);
  --lav-mid:      rgba(138,138,138,0.30);
  --alarm:        #A15D5D;
  --yellow:       #A8A8A8;
  --yel-light:    rgba(150,150,150,0.16);
  --glass:        rgba(255,255,255,0.46);
  --glass-b:      rgba(255,255,255,0.20);
  --glass-stroke: rgba(255,255,255,0.65);
  --text:         #232323;
  --text-mid:     #555555;
  --text-light:   #8A8A8A;
  --radius:       16px;
  --radius-sm:    11px;
  --shadow:       0 6px 24px rgba(0,0,0,0.10);
  --shadow-lg:    0 16px 48px rgba(0,0,0,0.16);
  --vc-g1:        #2B2B2B;
  --vc-g2:        #404040;
  --sheet-bg:    rgba(249,249,249,0.97);
  --card:        #FAFAFA;
}
html[data-theme="mono"] body::before {
  background:
    radial-gradient(ellipse 70% 60% at 12% 15%, rgba(120,120,120,0.14) 0%, transparent 65%),
    radial-gradient(ellipse 60% 70% at 88% 85%, rgba(150,150,150,0.14) 0%, transparent 65%),
    linear-gradient(150deg, #F1F1F1 0%, #EAEAEA 55%, #E4E4E4 100%);
}
html[data-theme="mono"] .orb { opacity: 0.08; filter: blur(85px); }

/* ── Klassen-Auswahl optisch = Modul-Dropdown (.sb-mod-toggle), app-weit ─────
   Vereinheitlicht die KLASSE-Auswahl ALLER Module in der Desktop-Sidebar auf
   exakt die Optik des Modul-Dropdowns (gleicher Rahmen/Fläche/Schrift/Pfeil),
   in JEDEM Farbstil. Funktion bleibt: natives <select> bzw. Button+Modal (KK).
   Bewusst HIER (nicht in sb_style.css): style.css wird vom SW precacht/frisch
   geladen. Gilt für alle Themes; Tanne-Flächen bleiben via var()-Textfarbe hell.
   IDs: anw #sb-klassen-select, leg #class-select, notenbuch #classSelector,
   TB #sb-class-sel, UP #up-klasse-sel, KB #kb-klasse-sel, KK-Button .kk-sb-cls.
   Mobile-Header-Chips nutzen andere IDs (eigene Pillen) → NICHT betroffen. */
#sb-klassen-select, #class-select, #classSelector,
#sb-class-sel, #up-klasse-sel, #kb-klasse-sel {
  width: 100% !important; box-sizing: border-box !important; text-align: left;
  padding: 9px 12px !important;
  border-radius: 11px !important;
  border: 1.5px solid rgba(200,200,220,0.3) !important;
  background-color: rgba(255,255,255,0.18) !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 12px !important; font-weight: 700 !important;
  color: var(--text-mid) !important; cursor: pointer;
  transition: var(--transition);
  margin-bottom: 3px !important; outline: none !important;
}
#sb-klassen-select:hover, #class-select:hover, #classSelector:hover,
#sb-class-sel:hover, #up-klasse-sel:hover, #kb-klasse-sel:hover {
  background-color: rgba(255,255,255,0.35) !important; color: var(--text) !important;
}
/* Native Selects: System-Pfeil weg, eigener Chevron rechts (wie .sb-mod-toggle-arr).
   Data-URI URL-ENCODED (%3C…) — Firefox verwirft rohe <>-Zeichen in url(). */
#sb-klassen-select, #class-select, #classSelector,
#sb-class-sel, #up-klasse-sel, #kb-klasse-sel {
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  padding-right: 30px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%239aa4ac' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
}

/* ── TANNE — dunkles Waldgrün (dunkler Stil) ──
   Flächen, die var(--glass) nutzen, folgen automatisch. Hartkodiert helle
   Shared-Flächen (Sidebar, Sheets, Einstellungs-Karten, Stil-Dialog) werden
   unten gezielt abgedunkelt. Einzelne Modul-Flächen können hell bleiben —
   dort steht dunkler Text auf heller Karte, lesbar bleibt es immer. */
html[data-theme="tanne"] {
  /* Kategorien auf dunklem Grund: Flaechen gedaempft, Schrift HELL */
  --kat1-rgb:     205,179,126;    --kat1-ink: #E6C88A;
  --kat2-rgb:     168,150,205;    --kat2-ink: #C9BCE6;
  --kat3-rgb:     126,154,184;    --kat3-ink: #A8C1E0;
  --kat4-rgb:     111,179,153;    --kat4-ink: #8FD3B3;
  --kat5-rgb:     212,140,166;    --kat5-ink: #EFB4CB;
  --kat6-rgb:     160,152,138;    --kat6-ink: #D2CBBD;
  /* Ampel auf dunklem Grund: Flaechen wie der Stil, Schrift HELL
     (dunkle Tinte waere hier dunkel auf dunkel) */
  --ok-rgb:       111,179,153;
  --warn-rgb:     205,179,126;
  --err-rgb:      216,137,124;
  --ok-ink:       #8FD3B3;
  --warn-ink:     #E6C88A;
  --err-ink:      #F0A9A0;
  --mint-rgb:     111,179,153;
  --lav-rgb:      126,154,184;
  --alarm-rgb:    216,137,124;
  --yellow-rgb:   205,179,126;
  --mint:         #6FB399;
  --mint-light:   rgba(111,179,153,0.16);
  --mint-mid:     rgba(111,179,153,0.32);
  --lavender:     #7E9AB8;
  --lav-light:    rgba(126,154,184,0.16);
  --lav-mid:      rgba(126,154,184,0.32);
  --alarm:        #D8897C;
  --yellow:       #CDB37E;
  --yel-light:    rgba(205,179,126,0.16);
  --glass:        rgba(34,48,42,0.55);
  --glass-b:      rgba(34,48,42,0.35);
  --glass-stroke: rgba(255,255,255,0.12);
  --text:         #E7EDE9;
  --text-mid:     #C9D4CE;
  --text-light:   #A9BEB3;
  --radius:       16px;
  --radius-sm:    11px;
  --shadow:       0 6px 24px rgba(0,0,0,0.32);
  --shadow-lg:    0 16px 48px rgba(0,0,0,0.45);
  --vc-g1:        #24445C;
  --vc-g2:        #2E5670;
  --sheet-bg:    rgba(28,38,33,0.97);
  --card:        #27332D;
}
html[data-theme="tanne"] body::before {
  background:
    radial-gradient(ellipse 70% 60% at 15% 20%, rgba(111,179,153,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 60% 70% at 85% 80%, rgba(46,86,112,0.14) 0%, transparent 65%),
    linear-gradient(150deg, #1C2622 0%, #18211D 55%, #141C19 100%);
}
html[data-theme="tanne"] body::after { opacity: 0.5; }
html[data-theme="tanne"] .orb { opacity: 0.10; filter: blur(90px); }
/* Dunkel-Pack: hartkodiert helle Shared-Flächen abdunkeln */
html[data-theme="tanne"] .sb-sidebar {
  background: rgba(16,24,20,0.45); border-right-color: rgba(255,255,255,0.10);
}
html[data-theme="tanne"] .sb-item:hover,
html[data-theme="tanne"] .sb-mod-toggle:hover { background: rgba(255,255,255,0.08); }
html[data-theme="tanne"] .sb-item.on { background: rgba(255,255,255,0.12); }
html[data-theme="tanne"] .sb-mod-list { background: rgba(0,0,0,0.22); }
html[data-theme="tanne"] .sb-mod-item:hover { background: rgba(255,255,255,0.08); }
html[data-theme="tanne"] .kv-sheet,
html[data-theme="tanne"] #gv-sheet { background: rgba(28,38,33,0.97); }
html[data-theme="tanne"] .sd-box { background: rgba(28,38,33,0.97); }
html[data-theme="tanne"] .sd-card,
html[data-theme="tanne"] .sd-preview { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); }
html[data-theme="tanne"] .sd-chip { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); }
/* Tanne: „Erste Schritte"-Dialog (einziges dunkles Farbmodul → Sonderfall).
   Helle Standard-Karte abdunkeln + blasse Sekundärtexte/„erledigt" aufhellen. */
html[data-theme="tanne"] .fs-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); box-shadow: 0 8px 24px rgba(0,0,0,0.32); }
html[data-theme="tanne"] .fs-sub,
html[data-theme="tanne"] .fs-progress-label,
html[data-theme="tanne"] .fs-step-sub { color: var(--text-mid); }
html[data-theme="tanne"] .fs-dismiss { background: rgba(255,255,255,0.10); color: var(--text); }
html[data-theme="tanne"] .fs-dismiss:hover { background: rgba(255,255,255,0.18); }
html[data-theme="tanne"] .fs-progress-bar { background: rgba(255,255,255,0.12); }
html[data-theme="tanne"] .fs-step { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
html[data-theme="tanne"] .fs-step:hover { background: rgba(255,255,255,0.10); }
html[data-theme="tanne"] .fs-step.fs-done { opacity: 1; background: rgba(111,179,153,0.14); border-color: rgba(111,179,153,0.32); }
html[data-theme="tanne"] .fs-step-icon { background: rgba(255,255,255,0.14); }
html[data-theme="tanne"] .fs-step.fs-done .fs-step-icon { background: rgba(111,179,153,0.30); color: #d6f0e2; }
html[data-theme="tanne"] .fs-step-tag { color: #8fd3b3; }
html[data-theme="tanne"] .set-card { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); }
html[data-theme="tanne"] .set-input,
html[data-theme="tanne"] .set-select { background: rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.16); color: var(--text); }
html[data-theme="tanne"] .set-input:focus,
html[data-theme="tanne"] .set-select:focus { background: rgba(0,0,0,0.35); }
/* Tanne: Kontrast-Nacharbeiten — Weiß-Flächen tragen var(--text)-Schrift
   (in Tanne hell) → Flächen abdunkeln statt Text verdunkeln. */
html[data-theme="tanne"] .c-btn-ghost,
html[data-theme="tanne"] .c-btn-icon {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
html[data-theme="tanne"] .c-btn-ghost:hover:not(:disabled),
html[data-theme="tanne"] .c-btn-icon:hover:not(:disabled) { background: rgba(255,255,255,0.18); }
html[data-theme="tanne"] .pass-input,
html[data-theme="tanne"] .text-input,
html[data-theme="tanne"] .ob-select { background: rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.16); }
html[data-theme="tanne"] .pass-input:focus,
html[data-theme="tanne"] .text-input:focus { background: rgba(0,0,0,0.35); }
html[data-theme="tanne"] input:focus,
html[data-theme="tanne"] select:focus,
html[data-theme="tanne"] textarea:focus { background: rgba(0,0,0,0.35) !important; }
html[data-theme="tanne"] .sb-item.on,
html[data-theme="tanne"] .kk-sb-item.on,
html[data-theme="tanne"] .kv-sb-item.on { background: rgba(255,255,255,0.14) !important; }
html[data-theme="tanne"] .logout-btn:hover,
html[data-theme="tanne"] .up-pill:hover { background: rgba(255,255,255,0.14); }
html[data-theme="tanne"] .coming-badge { background: rgba(0,0,0,0.38); }
html[data-theme="tanne"] .tb-sec-hd:hover,
html[data-theme="tanne"] .tb-s-item:hover,
html[data-theme="tanne"] .tb-arr-item:hover,
html[data-theme="tanne"] .tb-btn-icon:hover { background: rgba(255,255,255,0.12); }
/* Tanne: Kollegium (teams) — helle Karten/Blasen/Felder abdunkeln */
html[data-theme="tanne"] .tm-card,
html[data-theme="tanne"] .tm-contact,
html[data-theme="tanne"] .tm-thread { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); }
html[data-theme="tanne"] .tm-msg.theirs .tm-bubble { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.16); }
html[data-theme="tanne"] .tm-compose textarea,
html[data-theme="tanne"] .tm-select { background: rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.16); }
html[data-theme="tanne"] .tm-sheet { background: #22302A; }
html[data-theme="tanne"] .tm-btn-ghost { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.20); }
/* Tanne: farbige tb-Buttons (u.a. „+ Neu"-Chip = .tb-btn.mint) haben dunkle
   Hex-Schrift auf halbtransparenter Farbfläche → in Tanne dunkel-auf-dunkel
   (grün-auf-grün etc.). Schrift auf helle Pendants. */
html[data-theme="tanne"] .tb-btn.mint   { color: #a9e5c8; }
html[data-theme="tanne"] .tb-btn.lav    { color: #bcceec; }
html[data-theme="tanne"] .tb-btn.alarm  { color: #f0b0a8; }
html[data-theme="tanne"] .tb-btn.yellow { color: #e6c88a; }
html[data-theme="tanne"] .tb-btn.danger { color: #f3b0b0; }
/* Tanne: Teambuilder — Sitze/Team-Karten/Mitglieder/Seat-Dropdown/Bedingungs-
   leiste nutzen hohe Weiß-Deckungen aus dem Klassen-CSS (Catch-All greift nur bei
   Inline-Styles) → helle/graue Schrift auf hell (#4 Zufall, #5 Sitzplan/Teams).
   Flächen abdunkeln; Textfarben (var(--text*)) sind in Tanne bereits hell. */
html[data-theme="tanne"] .tb-seat { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); }
/* Belegte Sitze tragen als Inline-Hintergrund einen HELLEN Farbton (Gruppen-/
   Schülerfarbe, z. B. `${color}55`) → Namen müssen in Tanne DUNKEL sein (wie im
   hellen Stil), sonst hell-auf-hell. Leere Sitze bleiben hell auf der dunklen Fläche. */
html[data-theme="tanne"] .tb-seat.occ { color: #16241d !important; }
html[data-theme="tanne"] .tb-seat-dd { background: rgba(30,42,37,0.98); border-color: rgba(255,255,255,0.18); }
html[data-theme="tanne"] .tb-team-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); }
html[data-theme="tanne"] .tb-member { background: rgba(255,255,255,0.08); }
html[data-theme="tanne"] .tb-member:hover { background: rgba(255,255,255,0.16); }
html[data-theme="tanne"] .tb-cond-bar { background: rgba(255,255,255,0.05); }
html[data-theme="tanne"] .tb-cond-group { background: rgba(255,255,255,0.06); }
/* Tanne: Klassen-Akte — Statistik-Kästchen sind helles Glas; die Werte tragen
   dunkle Ampel-Hex (via Catch-All oben schon aufgehellt). Fläche abdunkeln (#1). */
html[data-theme="tanne"] .kv-stat-box { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
/* Tanne: Klassenbuch-Wochenansicht — helle Stundenzellen abdunkeln (#4) und
   die dunklen Tages-Badge-Texte aufhellen. */
html[data-theme="tanne"] .kb-cell { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); }
html[data-theme="tanne"] .kb-cell:hover { background: rgba(255,255,255,0.14); }
html[data-theme="tanne"] .kb-cell.virtual { background: rgba(255,255,255,0.05); }
html[data-theme="tanne"] .kb-day-badge { color: #e6c88a; }
html[data-theme="tanne"] .kb-day-badge.kb-day-aktion { color: #a8c1e0; }
/* Tanne: Unterrichtsplaner-Buttons — hartkodierte dunkle Schrift aufhellen */
html[data-theme="tanne"] .up-ibtn { color: var(--text); }
html[data-theme="tanne"] .up-ibtn.danger { color: #FCA5A5; }
/* Tanne: User-Picker (shared/user_picker.js — „mit wem teilen"-Felder) */
html[data-theme="tanne"] .up-wrap { background: rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.16); }
html[data-theme="tanne"] .up-wrap.up-focus { background: rgba(0,0,0,0.35); }
html[data-theme="tanne"] .up-pill { background: rgba(126,154,184,0.25); border-color: rgba(126,154,184,0.45); }
html[data-theme="tanne"] .up-pill-x { background: rgba(255,255,255,0.14); }
html[data-theme="tanne"] .up-input::placeholder { color: rgba(231,237,233,0.45); }
html[data-theme="tanne"] .up-dropdown { background: #22302A; border-color: rgba(255,255,255,0.16); box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
html[data-theme="tanne"] .up-result { border-bottom-color: rgba(255,255,255,0.08); }
html[data-theme="tanne"] .up-result:hover,
html[data-theme="tanne"] .up-result.up-active { background: rgba(255,255,255,0.08); }
html[data-theme="tanne"] .up-result-mail,
html[data-theme="tanne"] .up-empty { color: rgba(231,237,233,0.55); }
/* Tanne: Dialog-Inputs (dialog_system.js .dl-input — helle Fläche) */
html[data-theme="tanne"] .dl-input { background: rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.16); color: var(--text); }
/* Tanne: Schulverwaltung (sa-* / tc-kbaum-*) */
html[data-theme="tanne"] .sa-card { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); }
html[data-theme="tanne"] .sa-inp,
html[data-theme="tanne"] .sa-akt-color { background: rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.16); color: var(--text); }
html[data-theme="tanne"] .sa-bel-chip,
html[data-theme="tanne"] .tc-kbaum-class { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); }
html[data-theme="tanne"] .tc-kbaum-grp,
html[data-theme="tanne"] .sa-acc { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
html[data-theme="tanne"] .sa-subtab { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); }
html[data-theme="tanne"] .sa-subtab:hover { background: rgba(255,255,255,0.16); color: var(--text); }
/* Tanne: Notenbuch — Tabellen, Namensspalte, Buttons, Chips, Inputs */
html[data-theme="tanne"] .nb-btn-ghost { background: rgba(255,255,255,0.10); }
html[data-theme="tanne"] .nb-btn-ghost:hover { background: rgba(255,255,255,0.18); }
html[data-theme="tanne"] .nb-panel input,
html[data-theme="tanne"] .nb-panel select { background: rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.16); }
html[data-theme="tanne"] .nb-panel input:focus,
html[data-theme="tanne"] .nb-panel select:focus { background: rgba(0,0,0,0.35); }
html[data-theme="tanne"] th { background: rgba(255,255,255,0.06); }
html[data-theme="tanne"] td { border-bottom-color: rgba(255,255,255,0.08); }
html[data-theme="tanne"] tr:hover td { background: rgba(255,255,255,0.05); }
html[data-theme="tanne"] #dashboard .nb-table-wrap th.nb-sticky-name,
html[data-theme="tanne"] #dashboard .nb-table-wrap td.nb-sticky-name {
  background: rgba(30,42,37,0.94);
  box-shadow: 2px 0 10px -4px rgba(0,0,0,0.5);
}
html[data-theme="tanne"] #dashboard .nb-table-wrap thead th.nb-sticky-name { background: rgba(26,36,32,0.96); }
html[data-theme="tanne"] .nb-segmented { background: rgba(255,255,255,0.06); }
html[data-theme="tanne"] .nb-segmented button:hover { background: rgba(255,255,255,0.10); }
html[data-theme="tanne"] .sb-fach-chip,
html[data-theme="tanne"] .fach-chip { background: rgba(255,255,255,0.10); }
html[data-theme="tanne"] .sb-fach-chip:hover,
html[data-theme="tanne"] .fach-chip:hover { background: rgba(255,255,255,0.18); }
html[data-theme="tanne"] .fach-picker-inner { background: rgba(255,255,255,0.06); }
html[data-theme="tanne"] .nb-slider { background: rgba(255,255,255,0.22); }
/* Schülerakte: „Mitarbeitsverlauf"-Überschrift sitzt auf einem <button> → per
   Default schwarze Schrift (nicht vererbt). In Tanne hellgrün statt Schwarz. */
html[data-theme="tanne"] .nb-hist-hd { color: #8fd3b3 !important; }
/* Tanne: Catch-All für JS-gerenderte INLINE-Weißflächen (z. B. Notenbuch-
   Berechnung/Export, Schulverwaltungs-Listen). Inline-Styles schlagen normale
   Regeln → !important. Trifft bewusst nur rgba(255,255,255,…)-Flächen. */
html[data-theme="tanne"] [style*="background:rgba(255,255,255"],
html[data-theme="tanne"] [style*="background: rgba(255,255,255"],
html[data-theme="tanne"] [style*="background:#fff;"],
html[data-theme="tanne"] [style$="background:#fff"] {
  background: rgba(255,255,255,0.08) !important;
}

/* Tanne: Catch-All für hartkodierte DUNKLE Inline-TEXTfarben (analog zu den
   Weißflächen; !important schlägt Inline). rgba(26,58,46,…) ist die dunkelgrüne
   „Tinte" des Unterrichtsplaners (Stundenplan/Reihen: Legende „= Doppelsteckung",
   Zeitspalte, Hinweise) — lag in Tanne dunkel auf dunkel (#4/#8). */
html[data-theme="tanne"] [style*="color:rgba(26,58,46"],
html[data-theme="tanne"] [style*="color: rgba(26,58,46"],
html[data-theme="tanne"] [style*="color:rgb(26,58,46"] {
  color: var(--text-mid) !important;
}
/* Tanne: hartkodierte AMPEL-Hex in Inline-Styles (Noten-/Fehlzeiten-/Trend-
   Farben: Klassen-Akte kv-stat-val, Notenbuch usw.) auf helle Pendants. Diese
   Hex sind für helle Themes dunkel gewählt → auf Dunkel unlesbar (#1). */
html[data-theme="tanne"] [style*="color:#15803D"],
html[data-theme="tanne"] [style*="color:#166534"],
html[data-theme="tanne"] [style*="color:#15803d"] { color: #8fd3b3 !important; }
html[data-theme="tanne"] [style*="color:#B45309"],
html[data-theme="tanne"] [style*="color:#C2410C"],
html[data-theme="tanne"] [style*="color:#b45309"] { color: #e6c088 !important; }
html[data-theme="tanne"] [style*="color:#B91C1C"],
html[data-theme="tanne"] [style*="color:#991B1B"],
html[data-theme="tanne"] [style*="color:#b91c1c"] { color: #f0a9a0 !important; }
/* Teambuilder: Fach-Leiste (Hauptplan + Fächer) im Sitzplan. Aktiver Chip war
   inline #0f5132 auf var(--mint) → in Tanne grün-auf-grün + halbtransparent.
   Jetzt Klasse: heller Stil unverändert, Tanne = dunkelgrüne Fläche + HELLE Schrift. */
.tb-fach-chip { font-family: 'Nunito', sans-serif; font-size: .68rem; padding: 3px 9px;
  border-radius: 999px; border: 1px solid var(--line, rgba(0,0,0,.12)); cursor: pointer;
  background: rgba(255,255,255,.55); color: var(--text); font-weight: 500; transition: var(--transition); }
/* Aktiver Chip: TINT statt Vollflaeche. Vorher `background: var(--mint)` mit
   fest #0f5132 — dunkelgruene Schrift, die den Mint des Original-Looks
   nachzeichnete. Sobald die Flaeche dem Stil folgt, stand sie falsch: in Cub
   gruene Schrift auf Braun, in Mono gruen auf Grau. Eine Vollflaeche taugt hier
   ohnehin nicht, weil --mint je nach Stil hell (#7ED8B0) oder dunkel (#8B5E3C)
   ist und KEINE feste Schriftfarbe auf beidem lesbar waere. Der Tint loest
   beides: Schrift bleibt var(--text), der Rahmen traegt die Kennzeichnung. */
.tb-fach-chip.on { background: rgba(var(--mint-rgb), 0.30); border-color: rgba(var(--mint-rgb), 0.75); color: var(--text); font-weight: 700; }
html[data-theme="tanne"] .tb-fach-chip { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }
html[data-theme="tanne"] .tb-fach-chip.on { background: rgba(111,179,153,0.30); border-color: rgba(111,179,153,0.5); color: #e6f6ee; }

/* Tanne: Klassenkasse — Modul hatte bisher KEINE Dunkel-Overrides. Die hohen
   Weiß-Deckungen (.kk-sheet/-card/-toast/.kk-filter.on = .85 → fast weiß) machten
   helle Schrift unlesbar (#7 „Weiß auf Weiß"); die hartkodierten dunklen
   Ampelfarben (Grün/Rot) lagen dunkel auf dunkel (#6). Flächen abdunkeln,
   Ampeltext aufhellen (Hue bleibt erhalten). */
html[data-theme="tanne"] .kk-sidebar { background: rgba(16,24,20,0.45); border-right-color: rgba(255,255,255,0.10); }
html[data-theme="tanne"] .kk-mobile-hdr { background: rgba(16,24,20,0.55); border-bottom-color: rgba(255,255,255,0.10); }
html[data-theme="tanne"] .kk-sb-brand { border-bottom-color: rgba(255,255,255,0.14); }
html[data-theme="tanne"] .kk-sb-cls { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
html[data-theme="tanne"] .kk-sb-cls:hover { background: rgba(255,255,255,0.16); }
html[data-theme="tanne"] .kk-glass,
html[data-theme="tanne"] .kk-chart-sec,
html[data-theme="tanne"] .kk-chart-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
html[data-theme="tanne"] .kk-glass2,
html[data-theme="tanne"] .kk-info-strip { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
html[data-theme="tanne"] .kk-stat { border-color: rgba(255,255,255,0.16); }
html[data-theme="tanne"] .kk-sheet,
html[data-theme="tanne"] .kk-card,
html[data-theme="tanne"] .kk-toast { background: rgba(30,42,37,0.97); border-color: rgba(255,255,255,0.14); }
html[data-theme="tanne"] .kk-filter-bar { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
html[data-theme="tanne"] .kk-filter.on { background: rgba(255,255,255,0.16); color: var(--text); }
html[data-theme="tanne"] .kk-input { background: rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.16); }
html[data-theme="tanne"] .kk-input:focus { background: rgba(0,0,0,0.35); }
html[data-theme="tanne"] .kk-icon-btn,
html[data-theme="tanne"] .kk-type-btn { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
html[data-theme="tanne"] .kk-tmpl { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); }
html[data-theme="tanne"] .kk-ti,
html[data-theme="tanne"] .kk-sti,
html[data-theme="tanne"] .kk-cls-item { border-bottom-color: rgba(255,255,255,0.10); }
html[data-theme="tanne"] .kk-mbtn.cancel { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.20); color: var(--text-mid); }
/* Ampelfarben: dunkle Hex → helle Pendants (lesbar auf Dunkel) */
html[data-theme="tanne"] .kk-ti-amt.pos,
html[data-theme="tanne"] .kk-pay-btn.paid,
html[data-theme="tanne"] .kk-bdg.ok { color: #8fd3b3; }
html[data-theme="tanne"] .kk-ti-amt.neg,
html[data-theme="tanne"] .kk-pay-btn.unpaid,
html[data-theme="tanne"] .kk-bdg.err { color: #f0a9a0; }

/* Tanne: Kalender — Modul ohne Dunkel-Overrides. (1) Der Anlage-/Bearbeiten-
   Dialog .modal ist ein fast deckendes Lavendelweiß (kein rgba(255…) → Catch-All
   greift nicht) und blieb hell (#3). (2) Die Kategorie-Textfarben sind dunkle
   Hex (Grün/Blau/Gelb/Rot) und lagen dunkel auf den blassen Tints (#2 „Dunkelgelb
   auf Grau"). Flächen abdunkeln, Farbtexte aufhellen (Hue bleibt). */
html[data-theme="tanne"] .modal { background: rgba(30,42,37,0.97); border-color: rgba(255,255,255,0.14); box-shadow: 0 -8px 48px rgba(0,0,0,0.5); }
html[data-theme="tanne"] .field-input,
html[data-theme="tanne"] .field-textarea { background: rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.16); }
html[data-theme="tanne"] .field-input:focus,
html[data-theme="tanne"] .field-textarea:focus { background: rgba(0,0,0,0.35); box-shadow: 0 0 0 3px rgba(126,154,184,0.25); }
html[data-theme="tanne"] .cat-opt label { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); }
html[data-theme="tanne"] .cat-pill.Schule,
html[data-theme="tanne"] .cat-opt input:checked + label.Schule { color: #8fd3b3; }
html[data-theme="tanne"] .cat-pill.Privat,
html[data-theme="tanne"] .cat-opt input:checked + label.Privat { color: #a8c1e0; }
html[data-theme="tanne"] .cat-pill.Termin,
html[data-theme="tanne"] .importance-pill,
html[data-theme="tanne"] .proj-badge,
html[data-theme="tanne"] .action-btn.project-expand,
html[data-theme="tanne"] .cal-day.vacation,
html[data-theme="tanne"] .cat-opt input:checked + label.Termin { color: #e6c88a; }
html[data-theme="tanne"] .cat-pill.Geburtstag,
html[data-theme="tanne"] .cat-opt input:checked + label.Geburtstag { color: #f0a9a0; }
html[data-theme="tanne"] .proj-ov-range-warn { color: #e6c88a; }
/* Tages-Detail (Tag im Kalender angeklickt): Projekt-Schritt-/Aktions-Karten sind
   `var(--card,#fff)` = weiß (—card ist nirgends definiert) → in Tanne abdunkeln. */
html[data-theme="tanne"] .td-cal-day-akt { background: rgba(255,255,255,0.07); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
html[data-theme="tanne"] .td-cal-day-step:hover { background: rgba(255,255,255,0.13); }
html[data-theme="tanne"] .td-cal-day-akt-badge { color: var(--text-mid); background: rgba(255,255,255,0.12); }

/* ── Ruhige Farbstile: Aktions-Buttons EINFARBIG ──
   Statt des verspielten Verlaufs tragen alle Aktions-Buttons/FABs die
   Leitfarbe des Farbstils (Cub: das warme Braun) als eine Fläche; der
   farbige Lavendel-Glow weicht einem neutralen Schatten. Damit gibt es
   in den ruhigen Stilen keinerlei Fremdfarben-Verläufe mehr. */
html[data-theme="cub"], html[data-theme="graphit"], html[data-theme="salbei"],
html[data-theme="mono"], html[data-theme="tanne"] {
  --btn-bg:        var(--mint);
  --btn-mint-bg:   var(--mint);
  --btn-danger-bg: var(--alarm);
  --btn-warn-bg:   var(--yellow);
  --btn-shadow:    0 4px 16px rgba(0,0,0,0.16);
  --btn-shadow-h:  0 8px 26px rgba(0,0,0,0.22);
}

/* ══════════════════════════════════════════
   CUBS-GRAFIKSTIL (html[data-icons="svg"]) — Modulkacheln
   Die Minimal-PNGs sind reine schwarze Linien: die Squircle-Farbflächen
   werden mit einem weißen Schleier aufgehellt (Farbcodierung bleibt
   erkennbar, Linien kontrastieren). In Tanne stärker — dort wirken die
   Kacheln sonst zu dunkel für schwarze Linien.
══════════════════════════════════════════ */
html[data-icons="svg"] .tile-icon-bg.tile-icon-png.tile-squircle {
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.28)), var(--sq, #fff) !important;
}
html[data-icons="svg"] .sb-mod-sq,
html[data-icons="svg"] .set-tile-ico {
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.28)), var(--sq, #e8e8f0);
}
html[data-theme="tanne"][data-icons="svg"] .tile-icon-bg.tile-icon-png.tile-squircle {
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.58)), var(--sq, #fff) !important;
}
html[data-theme="tanne"][data-icons="svg"] .sb-mod-sq,
html[data-theme="tanne"][data-icons="svg"] .set-tile-ico {
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.58)), var(--sq, #e8e8f0);
}

/* ── Home-Knopf: das richtige Bild schon beim ERSTEN Paint ────────────────
   Im Markup steht Icons/Apps/Klassisch/home.png. Im Minimal-Stil tauschte
   das bisher erst sbFixHomeBtn()/TCTheme.applyIcons() per JavaScript — also
   sichtbar NACH dem ersten Paint: das klassische Baeren-Haus blitzte auf.

   Hier geht es ohne JavaScript, weil `data-icons` bereits am <html> steht,
   bevor der Body ueberhaupt geparst wird: shared/theme.js laeuft synchron
   im <head> und setzt es in applyAttrs(). Der Browser kennt den Stil also
   schon, wenn er das <img> zum ersten Mal zeichnet.

   Bewusst als ERGAENZUNG, nicht als Ersatz: `content` auf einem <img> ist
   nicht ueberall verfuegbar. Wo es fehlt, passiert schlicht nichts und der
   JS-Tausch von vorher greift wie bisher — kein Rueckschritt, nur an den
   meisten Stellen kein Blitz mehr. Der Klassisch-Stil braucht die Regel
   gar nicht: dort stimmt das Markup schon.                               */
html[data-icons="svg"] .sb-home-btn img,
html[data-icons="svg"] .kv-sb-home img,
html[data-icons="svg"] .kv-home-pill img,
html[data-icons="svg"] img.home-btn-icon {
  content: url("/Icons/Apps/Minimal/home.png");
}

/* Tanne: Dashboard-Kacheln als HELLES Glas mit DUNKLER Schrift.
   Der ::before-Weißschleier machte die Kachel halb hell — weiße Schrift
   stand in der Mischzone und war schlecht lesbar. Jetzt eindeutig:
   helle Fläche („Sticker" auf dunklem Grund), Text in dunkler Tinte. */
html[data-theme="tanne"] .app-tile {
  background: rgba(233,238,235,0.85);
  border-color: rgba(255,255,255,0.55);
}
html[data-theme="tanne"] .tile-name { color: #26332D; }
html[data-theme="tanne"] .tile-desc { color: #51615A; }
html[data-theme="tanne"] .coming-badge { background: rgba(38,51,45,0.14); color: #51615A; }

/* ── Plan-Sperre („Cub darf 1 Klasse") ───────────────────────────────
   Wird VOR dem Klick sichtbar: Anlege-Buttons ausgegraut + Tooltip, dazu
   eine sichtbare Hinweis-Karte (Tooltips gibt es auf Touch-Geräten nicht).
   Die Buttons bleiben absichtlich klickbar — ein Tipp darauf erklärt die
   Sperre per Toast, statt ins Leere zu greifen. Durchgesetzt wird sie
   ohnehin serverseitig (pb_hooks/plan_gate.pb.js). */
.plan-locked {
  opacity: 0.42 !important;
  filter: grayscale(0.85);
  cursor: not-allowed !important;
  box-shadow: none !important;
}
.plan-hint {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 12px; padding: 11px 13px;
  border-radius: 14px; font-size: 0.82rem; line-height: 1.45;
  background: rgba(255, 244, 214, 0.72);
  border: 1px solid rgba(180, 140, 30, 0.28);
  color: #6b551b;
}
.plan-hint-ico { font-size: 1.1rem; line-height: 1.2; flex-shrink: 0; }
.plan-hint strong { font-weight: 800; }
html[data-theme="tanne"] .plan-hint {
  background: rgba(70, 62, 30, 0.55);
  border-color: rgba(230, 205, 130, 0.35);
  color: #F1E4BC;
}