/* Selbst gehostete Fonts fuer die /session-("Pop-Lektion")- und
   /live-("Mission Control")-Redesigns (siehe .session-arcade/.live-studio
   weiter unten) - bewusst KEIN Google-Fonts-CDN-Link, um keinen neuen
   stillen Netzwerk-Request bei jedem Seitenaufruf einzufuehren (gleiches
   Prinzip wie schon bei .settings-studio, die dafuer auf System-Fonts
   verzichtet hat). Beide Family-Namen werden nur innerhalb von
   .session-arcade/.live-studio referenziert - der Rest der App (Dashboard,
   Katalog, Einstellungen, ...) fordert diese Dateien dadurch nie an.
   Variable Fonts (ein .woff2 pro Familie deckt alle genutzten
   Schnittgewichte ab) von fonts.google.com/google/fonts (SIL Open Font
   License 1.1 - Weiterverbreitung/Einbettung erlaubt, Lizenztexte liegen
   als OFL-*.txt daneben). */
@font-face {
  font-family: "Fredoka";
  src: url("/static/fonts/Fredoka-Variable.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/static/fonts/Nunito-Variable.woff2") format("woff2-variations");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0f1115;
  --surface: #1a1d24;
  --surface-2: #23272f;
  --border: #2e333d;
  --text: #e8e9ec;
  --text-muted: #9aa0ab;
  --accent: #ff5a36;
  --accent-2: #36b6ff;
  --good: #3ddc84;
  --bad: #ff5a5a;
  --warn: #ffcc4d;
  --radius: 10px;
  font-size: 16px;
}

* { box-sizing: border-box; }

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

.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.9rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
}

.brand {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.topbar nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.2rem;
}

.topbar nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  white-space: nowrap;
}

.topbar nav a:hover { color: var(--text); background: var(--surface-2); }

.topbar nav a.nav-active {
  color: var(--text);
  font-weight: 800;
  border-bottom: 2px solid var(--accent);
  border-radius: 6px 6px 0 0;
  padding-bottom: calc(0.4rem - 2px);
}

/* Gruppierte Nav-Dropdowns (Verwaltung/Auswertung) fuer die Lehrerin-Rolle
   (siehe app/templates/base.html, app/static/nav-menu.js). Die
   Benachrichtigungs-Glocke sitzt separat in .topbar-utility (siehe weiter
   unten), damit sie auf Mobilgeraeten erreichbar bleibt, ohne die
   Menue-Schublade zu oeffnen. */

.nav-dropdown {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.nav-dropdown-toggle {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.nav-dropdown-toggle:hover { filter: none; color: var(--text); background: var(--surface-2); }

.nav-dropdown-toggle.nav-active { color: var(--text); font-weight: 800; }

.nav-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.65;
}

.nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
}

.nav-dropdown-panel {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: fixed;
  min-width: 180px;
  max-width: calc(100vw - 16px);
  padding: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  z-index: 20;
}

.nav-dropdown-panel.open { display: flex; }

.nav-dropdown-panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-left: 0;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  white-space: nowrap;
}

.nav-dropdown-panel a:hover { color: var(--text); background: var(--surface-2); }

.nav-dropdown-panel a.nav-active {
  color: var(--text);
  font-weight: 800;
  border-bottom: none;
  padding-bottom: 0.5rem;
  background: rgba(255, 90, 54, 0.14);
}

.nav-bell-toggle {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem;
  border-radius: 6px;
  line-height: 0;
}

.nav-bell-toggle:hover { filter: none; color: var(--text); background: var(--surface-2); }

.nav-bell-icon { fill: currentColor; }

.nav-bell-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.nav-bell-panel {
  width: 320px;
  max-width: calc(100vw - 16px);
  padding: 0;
  overflow: hidden;
}

.nav-bell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--border);
}

.nav-bell-mark-read {
  background: transparent;
  border: none;
  color: var(--accent-2);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}

.nav-bell-mark-read:hover { filter: none; text-decoration: underline; }
.nav-bell-mark-read:disabled { opacity: 0.5; cursor: not-allowed; }

.nav-bell-list {
  max-height: 60vh;
  max-height: 60dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

.nav-bell-list .nav-bell-item {
  display: block;
  margin-left: 0;
  padding: 0.65rem 0.8rem;
  border-radius: 0;
  border-bottom: 1px dashed var(--border);
  color: var(--text);
  text-decoration: none;
  white-space: normal;
}

.nav-bell-list .nav-bell-item:last-child { border-bottom: none; }
.nav-bell-list .nav-bell-item:hover { background: var(--surface-2); }
.nav-bell-list .nav-bell-item.unread { background: rgba(54, 182, 255, 0.08); }

.nav-bell-item-title {
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 0.15rem;
}

.nav-bell-item-meta {
  color: var(--text-muted);
  font-size: 0.76rem;
}

.nav-bell-empty {
  padding: 1.25rem 0.8rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.nav-bell-panel .nav-bell-footer {
  display: block;
  margin-left: 0;
  padding: 0.6rem 0.8rem;
  text-align: center;
  border-top: 1px solid var(--border);
  color: var(--accent-2);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}

.nav-bell-panel .nav-bell-footer:hover { color: var(--text); background: none; }

.logout-form {
  display: inline-block;
  vertical-align: middle;
}

.logout-form button {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
}

.topbar-utility {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

/* Hamburger-Trigger fuers Mobile-Menue (Off-Canvas-Schublade, siehe unten) -
   auf Desktop-Breiten unsichtbar, siehe @media (max-width: 1220px). Drei
   CSS-gezeichnete Balken statt SVG/Bild-Asset, morphen per aria-expanded
   in ein "X". */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.nav-hamburger:hover { background: var(--surface-2); }

.nav-hamburger-bar {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(2) {
  opacity: 0;
}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.nav-scrim[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-hamburger-bar { transition: none; }
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

h1 { font-size: 1.6rem; margin: 0 0 0.25rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 0.75rem; }
p.subtitle { color: var(--text-muted); margin-top: 0; }

.quiz-timer {
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}
.quiz-timer.quiz-timer-warn {
  color: var(--bad);
  animation: quiz-timer-pulse 1s ease-in-out infinite;
}
@keyframes quiz-timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.forced-session-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(255, 204, 77, 0.15);
  border-bottom: 1px solid var(--warn);
  color: var(--warn);
  padding: 0.75rem 1.25rem;
}

/* [hidden] and .forced-session-banner have equal specificity, and this
   author rule's "display: flex" would otherwise win over the browser's
   default "[hidden] { display: none }" - keeping the bar visible (as an
   empty flex row) even while forced-session-banner.js sets el.hidden = true. */
.forced-session-banner[hidden] {
  display: none;
}

.forced-session-banner a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

/* "Gesehen"-Quittieren-Knopf + "Jetzt starten"-Link als eine rechtsbuendige
   Gruppe (siehe app/static/forced-session-banner.js). */
.forced-session-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.forced-session-banner button {
  color: inherit;
  font: inherit;
  font-weight: 600;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
}

.grid-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.stat-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
}

.stat-box .value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-2);
}

.stat-box .label {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.teacher-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.teacher-dashboard-grid .card { margin-bottom: 0; }

/* Praeftungstermine-Karte enthaelt .calendar-preview, dessen Spalten
   (siehe dort) eine Mindestbreite von zusammen ueber 600px brauchen - als
   normale 300px-Grid-Zelle wuerde sie ueber den Kartenrand hinaus
   ueberlaufen, daher eigene volle Zeile statt einer der auto-fit-Zellen. */
.teacher-dashboard-grid .card-exam-termine { grid-column: 1 / -1; }

button, .btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

@media (hover: hover) and (pointer: fine) {
  button:hover, .btn:hover { filter: brightness(1.08); }
}
button:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}

/* Die Liste muss jeden im Projekt vorkommenden Typ nennen - was durchfaellt,
   bekommt Safaris UA-Default von ~13.3px, und alles unter 16px laesst iOS
   beim Fokussieren in die Seite hineinzoomen und zoomt NICHT zurueck.
   type="search" (learning_plan.html) und type="email" (settings.html) waren
   genau solche Faelle; ein <input> ganz ohne type-Attribut ebenfalls, deshalb
   der nackte input-Selektor am Ende. */
input[type="text"], input[type="number"], input[type="password"], input[type="date"],
input[type="search"], input[type="email"], input[type="tel"], input[type="url"],
input:not([type]), select, textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 0.75rem;
  font-family: inherit;
}

label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
}

th { color: var(--text-muted); font-weight: 600; }

@media (hover: hover) and (pointer: fine) {
  tr:hover td { background: var(--surface-2); }
}

/* Breite Daten-Tabellen (Statistik, Buffalos, Protokolle) werden auf Handy/
   Tablet seitlich wischbar statt abgeschnitten - die Templates legen dazu
   einen <div class="table-scroll"> um die jeweilige <table>. Bewusst ohne
   min-width: max-content auf der Tabelle: Zellen mit laengeren deutschen
   Texten (z. B. Buffalo-Notizen) sollen zuerst umbrechen, gescrollt wird
   erst, wenn die Spalten nicht mehr schmaler koennen. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.protocol-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.protocol-row-actions > span[aria-hidden="true"] {
  color: var(--text-muted);
}

.box-toggle-btn {
  background: transparent;
  color: var(--text);
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
}

.box-toggle-btn:hover {
  filter: none;
  color: var(--accent-2);
}

.box-toggle-icon {
  color: var(--accent);
  width: 1rem;
  text-align: center;
}

.box-detail-row td {
  background: rgba(255, 255, 255, 0.02);
}

.box-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
  padding: 0.35rem 0;
}

.box-card-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
}

.box-card-item strong,
.box-card-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-card-item small {
  color: var(--text-muted);
}

.pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.pill-good { background: rgba(61, 220, 132, 0.15); color: var(--good); }
.pill-bad { background: rgba(255, 90, 90, 0.15); color: var(--bad); }
.pill-warn { background: rgba(255, 204, 77, 0.15); color: var(--warn); }
.pill-box { background: rgba(54, 182, 255, 0.15); color: var(--accent-2); }

/* Backup-Staleness-Hinweis (siehe app/static/settings.js::loadBackupStatus) */
.stale-warning { color: var(--warn); font-weight: 600; }

/* Live-Transparenz waehrend einer Session (siehe app/static/app.js) */
.session-status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Fokus-Strafe-Countdown (#session-focus-penalty) - eigene volle Zeile
   innerhalb der Statusleiste statt einer weiteren Pill in der Flex-Reihe. */
.session-focus-penalty {
  flex-basis: 100%;
}
.session-focus-penalty .progress-bar {
  margin: 0.35rem 0 0;
}

.toast-stack {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 320px;
}

.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-2);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  font-size: 0.9rem;
}
.toast-warn { border-left-color: var(--warn); }
.toast-bad { border-left-color: var(--bad); }
.toast-info { border-left-color: var(--accent-2); }
.toast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.flashcard {
  position: relative;
  max-width: 380px;
  margin: 0 auto 1.25rem;
  padding: 1.5rem 1.5rem 1.25rem;
  text-align: center;
  border: 3px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from 180deg, var(--accent), var(--warn), var(--good), var(--accent-2), var(--accent)) border-box;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.flashcard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.12) 55%, transparent 70%);
  background-size: 220% 220%;
  animation: holo-shift 6s ease-in-out infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
}

@keyframes holo-shift {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

.card-header {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.card-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0.2rem 0 0.9rem;
}

.card-divider {
  height: 1px;
  margin: 0 0 0.85rem;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.card-stats {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.35rem 0.1rem;
  border-bottom: 1px dashed var(--border);
}

.stat-row:last-child { border-bottom: none; }

.stat-label {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-2);
}

.flashcard img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  margin: 0 auto 1rem;
  padding: 0.5rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.flashcard-media-layout {
  display: block;
}

.flashcard-facts {
  min-width: 0;
}

.flashcard.has-large-photo {
  max-width: min(920px, 100%);
}

.flashcard.has-large-photo img {
  max-height: 430px;
}

/* Ohne erforderliches Foto steht der abgefragte Fakt selbst im Mittelpunkt. */
.flashcard.facts-first {
  max-width: min(620px, 100%);
  padding: 1.85rem;
  text-align: center;
}

.flashcard.facts-first .flashcard-facts {
  display: grid;
  justify-items: center;
}

.session-arcade #learn-flashcard.facts-first .card-title {
  font-size: clamp(1.8rem, 6vw, 2.7rem);
}

.session-arcade #quiz-flashcard.facts-first .card-title {
  font-size: clamp(2.3rem, 9vw, 4.25rem);
  line-height: 1.08;
  margin: 0.3rem 0 0;
  overflow-wrap: anywhere;
}

@media (min-width: 760px) {
  .flashcard.has-large-photo .flashcard-media-layout {
    display: grid;
    grid-template-columns: minmax(320px, 1.15fr) minmax(260px, 0.85fr);
    align-items: center;
    gap: 1.35rem;
    text-align: left;
  }

  .flashcard.has-large-photo img {
    margin: 0;
    max-height: 560px;
    min-height: 320px;
  }

  .flashcard.has-large-photo .card-title {
    margin-top: 0;
  }
}

.flashcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

/* CSV-Upload auf der Katalog-Seite: Datei-Input und Button in einer Zeile,
   auf schmalen Screens bricht flex-wrap von selbst um - kein Media-Query
   noetig. */
.catalog-import-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.catalog-import-form input[type="file"] {
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 100%;
  color: var(--text);
  /* 0.9rem waren 14.4px - unter der 16px-Grenze, ab der iOS beim Fokussieren
     in die Seite zoomt und nicht zurueckzoomt. */
  font-size: 1rem;
}

.flashcard-mini {
  border: 2px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from 180deg, var(--accent), var(--warn), var(--good), var(--accent-2), var(--accent)) border-box;
  padding: 0.9rem 0.75rem;
  text-align: center;
}

.flashcard-mini img {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: cover;
  margin: 0 0 0.5rem;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border);
}

.flashcard-mini .photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  margin: 0 0 0.5rem;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.75rem;
}

.flashcard-mini .fact-label {
  color: var(--text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.flashcard-mini .fact-value {
  font-size: 1rem;
  font-weight: 700;
  margin: 0.15rem 0;
  word-break: break-word;
}

.flashcard-mini .fact-year {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.flashcard-mini .card-tally {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.option-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.option-btn {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}

.option-btn:hover { filter: brightness(1.15); }

.option-btn.selected {
  background: var(--accent-2);
  color: #051018;
  border-color: var(--accent-2);
  font-weight: 700;
}

.photo-option-btn {
  width: 130px;
  height: 130px;
  padding: 0;
  border: 3px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
}

.photo-option-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-option-btn:hover { border-color: var(--accent-2); }

.photo-option-btn.selected {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 2px var(--accent-2);
}

.progress-bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.progress-bar .fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}

/* Fokus-Strafe-Countdown (Lehrerin- und Schueler-Balken) - analog zu
   .quiz-timer-caution/.quiz-timer-warn oben, wiederverwendet dieselbe
   quiz-timer-pulse-Keyframe. */
.fill.penalty-caution { background: var(--warn); }
.fill.penalty-warn { background: var(--bad); animation: quiz-timer-pulse 1s ease-in-out infinite; }

.feedback-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.feedback-row .field-name {
  min-width: 90px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.correct-value {
  color: var(--good);
  font-weight: 600;
}

.wrong-value {
  color: var(--bad);
  text-decoration: line-through;
  margin-right: 0.4rem;
}

.feedback-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  vertical-align: middle;
  border: 2px solid transparent;
}

.feedback-thumb.thumb-wrong { border-color: var(--bad); }
.feedback-thumb.thumb-correct { border-color: var(--good); }

.receipt {
  font-family: "Courier New", monospace;
  white-space: pre-wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  line-height: 1.5;
}

/* receipt.html ist eine eigenstaendige Seite (kein base.html-Extends,
   eigenes <html>/<body>) fuer eine bewusst nuechterne "gedruckte
   Quittung" - anders als /session und /summary bekommt sie NICHT den
   vollen warmen Fredoka/Nunito/3D-Button-Look (siehe Plan), nur ein
   papierhelles Retuning von bg/surface/border/text statt des globalen
   dunklen Themes. @media print weiter unten erzwingt ohnehin
   Schwarz-auf-Weiss, unabhaengig von diesen Werten. */
.receipt-page {
  --bg: #f5f1e8;
  --surface: #fffdf8;
  --surface-2: #fffdf8;
  --border: #ddd4c2;
  --text: #2a2620;
  --text-muted: #6b6355;
}

.heatmap {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.heatmap .day {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--surface-2);
}

.heatmap .day-weekly-exam {
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
}

.heatmap .day-monthly-exam {
  outline: 2px solid #a855f7;
  outline-offset: 1px;
}

.heatmap .day-custom-exam {
  outline: 2px solid var(--arcade-gold, #d89b22);
  outline-offset: 1px;
}

.heatmap .day-nachsitzen {
  outline: 2px solid var(--bad);
  outline-offset: 1px;
}

.heatmap-legend {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted, #888);
}

.heatmap-legend .legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
  background: var(--surface-2);
}

.heatmap-legend .legend-weekly {
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
}

.heatmap-legend .legend-monthly {
  outline: 2px solid #a855f7;
  outline-offset: 1px;
}

.heatmap-legend .legend-custom {
  outline: 2px solid #d97706;
  outline-offset: 1px;
}

.heatmap-legend .legend-free {
  outline: 2px solid var(--good);
  outline-offset: 1px;
}

.heatmap-legend .legend-nachsitzen {
  outline: 2px solid var(--bad);
  outline-offset: 1px;
  background: rgba(255, 90, 90, 0.15);
}

.heatmap-legend .legend-vacation {
  outline: 2px solid #f0a020;
  outline-offset: 1px;
  background: rgba(240, 160, 32, 0.15);
}

.cal-ran-legend {
  color: var(--good);
  font-weight: 700;
  margin-right: 4px;
}

.cal-howto {
  font-size: 0.9rem;
  line-height: 1.5;
  border-left: 3px solid var(--accent);
}

.buffalo-total {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bad);
}

.buffalo-card a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
}

.buffalo-card a:hover {
  color: var(--text);
}

.buffalos-manual-form {
  display: grid;
  grid-template-columns: minmax(7rem, 0.35fr) minmax(14rem, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
}

.buffalos-manual-form input {
  margin-bottom: 0;
}

.calendar-preview {
  display: grid;
  grid-template-columns: minmax(12rem, 1.25fr) minmax(9rem, 1fr) minmax(9rem, 1fr) auto;
  gap: 0.75rem;
  align-items: stretch;
  margin-bottom: 1rem;
}

.calendar-preview-item,
.calendar-preview-link {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem 1rem;
}

.calendar-preview-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.calendar-preview-today {
  border-color: rgba(255, 90, 54, 0.45);
}

.calendar-preview-label {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.calendar-preview-item strong {
  color: var(--text);
  font-size: 1.02rem;
}

.calendar-preview-item span:not(.calendar-preview-label) {
  color: var(--text-muted);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-preview-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-2);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.calendar-preview-link:hover {
  border-color: var(--accent-2);
}

.actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}

.tab-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.tab-btn:hover { color: var(--text); }

.tab-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Erklaer-Satz oben in jedem Tab-Panel ("mit Erklärungen"). */
.tab-intro {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

/* Einklappbare Sektionen: die "Erweitert (Feintuning)"-Sektion je Tab und die
   Bereiche im Sammel-Tab "Mehr" (Punkte/KI). Standardmaessig zu. */
.settings-collapsible {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 1.5rem;
  background: var(--surface-2);
}

.settings-collapsible > summary {
  cursor: pointer;
  padding: 0.85rem 1rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  list-style-position: inside;
}

.settings-collapsible > summary:hover { color: var(--accent); }

.settings-collapsible[open] > summary {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.75rem;
}

/* Felder in der Klappsektion bekommen Innenabstand, sonst kleben sie am Rand. */
.settings-collapsible > .field,
.settings-collapsible > .field-info {
  margin-left: 1rem;
  margin-right: 1rem;
}

/* "Erweitert (Feintuning)" optisch als Zusatz kennzeichnen. */
.settings-advanced { border-style: dashed; }

/* Statische Mehr-Karten sind <details class="card"> - die Summary wird zur
   klickbaren Karten-Ueberschrift (ersetzt das fruehere <h2>). */
.mehr-card > summary {
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  list-style-position: inside;
}

.mehr-card > summary:hover { color: var(--accent); }

.mehr-card[open] > summary { margin-bottom: 1rem; }

.field {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed var(--border);
}

.field:last-child { border-bottom: none; }

.field-info {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
}

.field label {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.field-help {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0 0 0.6rem;
}

.field-off-hint {
  margin-top: 0.4rem;
  margin-bottom: 0;
  font-style: italic;
}

.field-eta {
  margin-top: 0.4rem;
  margin-bottom: 0;
  font-style: italic;
}

.field-unit {
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Auto-Pensum: die uebersteuerten Felder bleiben sichtbar, damit erkennbar
   ist, was die Automatik uebernimmt - sie werden nur stummgeschaltet. */
.field-auto-locked {
  opacity: 0.55;
}

.field-auto-locked input,
.field-auto-locked select,
.field-auto-locked button {
  cursor: not-allowed;
}

.field-auto-note {
  margin-top: 0.4rem;
  margin-bottom: 0;
  font-style: italic;
}

.field-auto-note::before {
  content: "\1F512  ";
}

.auto-pensum-panel {
  margin-top: 0.6rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted, rgba(127, 127, 127, 0.08));
}

.auto-pensum-head {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.auto-pensum-values,
.auto-pensum-reasons {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.auto-pensum-reasons {
  margin-top: 0.5rem;
  font-style: italic;
}

.auto-pensum-line {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
}

.auto-pensum-line .muted {
  display: block;
}

.field-group-heading {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 1.75rem 0 0.75rem;
}

.field-group-heading:first-child {
  margin-top: 0;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent-2);
}

.slider-readout {
  min-width: 4.5rem;
  text-align: right;
  font-weight: 700;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.toggle-switch-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  margin-bottom: 0;
}

.toggle-switch-label input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.mode-option {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 0.85rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mode-option:hover {
  filter: none;
  border-color: var(--accent-2);
}

.mode-option.active {
  border-color: var(--accent);
  background: rgba(255, 90, 54, 0.14);
}

.mode-option strong {
  font-size: 0.95rem;
}

.mode-option span {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.3;
}

.toggle-number-wrap {
  display: inline-flex;
  align-items: center;
}

.toggle-number-wrap input[type="number"] {
  width: 8rem;
  margin-bottom: 0;
}

.box-intervals-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Mehrfach-Checkboxen (z. B. aktive Zusatz-Fakten, siehe buildCheckboxGroup
   in settings.js) - pro Zeile ein Schalter mit Erklaerung daneben. */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.checkbox-group-option {
  margin: 0;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}

.checkbox-group-option:last-child {
  border-bottom: 0;
}

.checkbox-group-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.checkbox-group-copy strong {
  font-size: 0.9rem;
}

.checkbox-group-copy > span {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.box-interval-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.box-interval-item input {
  width: 4.5rem;
  text-align: center;
  margin-bottom: 0;
}

.box-interval-label {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.glossary-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.glossary-term {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.glossary-term strong {
  font-size: 0.95rem;
  color: var(--text);
}

.glossary-term span {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.muted { color: var(--text-muted); }

.magic-link-row { margin-bottom: 1.25rem; }

.magic-link-url-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.magic-link-url-row input[type="text"] {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
  font-family: monospace;
  /* Nicht unter 16px: darunter zoomt iOS beim Fokussieren hinein und bleibt
     dort. Der Link ist lang, aber lieber umbrechen als die Seite verzerren. */
  font-size: 1rem;
}

.magic-link-url-row button {
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

.magic-link-qr {
  margin-top: 0.75rem;
}

.magic-link-qr img {
  display: block;
  background: #fff;
  padding: 0.5rem;
  border-radius: 0.5rem;
}

.teacher-contact-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(220px, 1.4fr) auto;
  gap: 0.75rem;
  align-items: start;
  margin: 1rem 0 1.5rem;
}

.teacher-contact-form input {
  margin-bottom: 0;
}

.teacher-contact-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
}

.teacher-contact-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.teacher-contact-head p {
  margin: 0.2rem 0 0;
}

.teacher-subscriptions {
  margin-top: 1rem;
  display: grid;
  gap: 0.5rem;
}

.teacher-subscription-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
}

@media (max-width: 720px) {
  .teacher-contact-form,
  .teacher-subscription-row {
    grid-template-columns: 1fr;
  }

  .teacher-contact-head {
    flex-direction: column;
  }
}

.login-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.login-card {
  width: 100%;
  max-width: 360px;
}

.login-card h1 {
  text-align: center;
  color: var(--accent);
}

.login-error {
  color: var(--bad);
  margin: -0.25rem 0 0.75rem;
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}

/* Erzfeinde-Seite (/erzfeinde): Uhr-Zelle mit Mini-Foto in der Paar-Tabelle. */
.confusion-watch {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 160px;
}

.confusion-watch img,
.confusion-watch .photo-placeholder {
  width: 48px;
  height: 48px;
  flex: none;
  object-fit: cover;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border);
}

.confusion-watch .photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--text-muted);
  text-align: center;
}

@media print {
  .topbar, .actions, .nav-scrim { display: none; }
  body { background: #fff; color: #000; }
  .receipt { border: none; color: #000; }
}

@media (max-width: 600px) {
  .grid-stats { grid-template-columns: repeat(2, 1fr); }
  .card-title { font-size: 1.15rem; }
}

/* Kalender-Seite (siehe app/templates/kalender.html, app/static/kalender.js) */

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.calendar-nav h2 { margin: 0; }

.calendar-nav button {
  padding: 0.35rem 0.9rem;
  font-size: 1.1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}

.calendar-grid {
  display: grid;
  /* 1fr hat im Grid standardmaessig eine inhaltsbasierte Mindestbreite.
     Auf 320px breiten Handys drueckten deshalb bereits die Wochentage den
     gesamten Kalender ueber den Viewport. minmax(0, 1fr) erlaubt allen sieben
     Spalten, wirklich in die verfuegbare Breite zu schrumpfen. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.calendar-weekday {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0;
}

.calendar-day {
  position: relative;
  min-height: 78px;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.cal-day-stats {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.25rem;
  font-size: 0.6rem;
  line-height: 1.2;
}

.cal-new-cards { color: var(--good); font-weight: 600; }
.cal-ok-count { color: var(--accent-2); }
.cal-fail-count { color: var(--bad); font-weight: 600; }

.calendar-day.is-empty {
  border: none;
  background: transparent;
}

.calendar-day.is-past { opacity: 0.55; }

.calendar-day.is-today {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.calendar-day.is-weekly { outline: 2px solid #3b82f6; outline-offset: -2px; }
.calendar-day.is-monthly { outline: 2px solid #a855f7; outline-offset: -2px; }
.calendar-day.is-custom { outline: 2px solid #d97706; outline-offset: -2px; }
.calendar-day.is-free { outline: 2px solid var(--good); outline-offset: -2px; }
.calendar-day.is-nachsitzen {
  outline: 2px solid var(--bad);
  outline-offset: -2px;
  background: rgba(255, 90, 90, 0.15);
}
.calendar-day.is-vacation {
  outline: 2px solid #f0a020;
  outline-offset: -2px;
  background: rgba(240, 160, 32, 0.15);
}

.calendar-day.has-warning::after {
  content: "!";
  position: absolute;
  left: 5px;
  bottom: 4px;
  display: grid;
  width: 1rem;
  height: 1rem;
  place-items: center;
  border-radius: 50%;
  background: var(--warn);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
}

.calendar-day.is-clickable { cursor: pointer; }
.calendar-day.is-clickable:hover { border-color: var(--text-muted); }

.calendar-day.is-swap-source {
  border-color: var(--warn);
  box-shadow: 0 0 0 2px var(--warn);
}

.calendar-day .day-num {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.calendar-day.is-today .day-num { color: var(--accent); }

.cal-pill {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
}

.cal-pill-weekly { background: rgba(59, 130, 246, 0.18); color: #3b82f6; }
.cal-pill-monthly { background: rgba(168, 85, 247, 0.18); color: #a855f7; }
.cal-pill-custom { background: rgba(217, 119, 6, 0.16); color: #a95805; }
.cal-pill-free { background: rgba(61, 220, 132, 0.18); color: var(--good); }
.cal-pill-nachsitzen { background: rgba(255, 90, 90, 0.18); color: var(--bad); }
.cal-pill-vacation { background: rgba(240, 160, 32, 0.18); color: #f0a020; }
.cal-pill-pending { background: rgba(131, 87, 7, 0.12); color: var(--warn); }

.cal-override-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
  position: absolute;
  top: 6px;
  right: 6px;
}

.heatmap-legend .cal-override-dot {
  position: static;
  margin-right: 4px;
  vertical-align: middle;
}

.cal-ran {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 0.7rem;
  color: var(--good);
}

.cal-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.cal-menu button {
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: left;
  background: transparent;
  color: var(--text);
  border-radius: 6px;
}

.cal-menu button:hover { background: var(--surface-2); filter: none; }

.cal-error { color: var(--bad); }

.cal-day-dialog {
  width: min(46rem, calc(100vw - 2rem));
  max-height: min(48rem, calc(100vh - 2rem));
  max-height: min(48rem, calc(100dvh - 2rem));
  overscroll-behavior: contain;
  padding: 1.25rem;
  overflow-y: auto;
  color: var(--text);
}

.cal-day-dialog::backdrop { background: rgba(37, 33, 29, 0.45); }

.cal-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.cal-dialog-head h2 { margin: 0.2rem 0 0.75rem; }
.cal-dialog-head #cal-dialog-close { min-width: 2.4rem; font-size: 1.25rem; }

.cal-dialog-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.cal-dialog-details section,
.cal-dialog-editor {
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.cal-dialog-details section h3,
.cal-dialog-editor h3 { margin: 0 0 0.6rem; font-size: 0.95rem; }
.cal-dialog-details section p:last-child,
.cal-dialog-details section ul:last-child { margin-bottom: 0; }

.cal-dialog-editor { margin-top: 0.75rem; }
.cal-dialog-editor .actions { margin-top: 0; }

.cal-load-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.cal-load-grid span { display: grid; }
.cal-warning-list { color: var(--warn); }

@media (max-width: 600px) {
  .calendar-day { min-height: 48px; }
  .cal-pill { font-size: 0.5rem; }
  .calendar-day .cal-day-stats { display: none; }
  .cal-dialog-details { grid-template-columns: 1fr; }
  .cal-load-grid { grid-template-columns: 1fr; }
}

.pill-live {
  animation: pill-live-pulse 1.6s ease-in-out infinite;
}

@keyframes pill-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.goal-form {
  display: grid;
  grid-template-columns: minmax(12rem, 1.5fr) minmax(7rem, 0.6fr) minmax(9rem, 0.8fr) minmax(9rem, 0.8fr) auto;
  gap: 0.75rem;
  align-items: end;
}

.goal-form input,
.goal-form select {
  margin-bottom: 0;
}

.goal-card {
  margin-bottom: 1rem;
}

.goal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.goal-card .progress-bar {
  margin: 0.75rem 0 0.25rem;
}

.goal-feasibility {
  border-left: 3px solid var(--accent-2);
  padding-left: 0.75rem;
  margin: 0.75rem 0;
}

.live-picker-controls {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.live-picker-controls input[type="text"] {
  flex: 1;
  min-width: 200px;
}

.flashcard-mini.pickable {
  cursor: pointer;
}

.flashcard-mini.pickable.selected {
  outline: 2px solid var(--accent-2);
  outline-offset: -2px;
}

.pop-year-options {
  justify-content: center;
  margin-bottom: 0;
}

/* Opt-in-Jahres-Sortierung: Drag-and-drop fuer Desktop, die kurzen
   Frueher/Später-Schalter auf jeder Karte bleiben die gleichwertige,
   touch- und tastaturfreundliche Bedienung. */
.pop-year-sort-workspace {
  display: grid;
  gap: 1rem;
  margin: 1.25rem 0;
}

.pop-year-sort-sequence {
  display: grid;
  gap: 0.75rem;
  max-width: 38rem;
  margin: 0 auto;
}

.pop-year-sort-lane {
  min-height: 7rem;
  padding: 0.75rem;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%);
}

.pop-year-sort-lane h2 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}

.pop-year-sort-card {
  display: grid;
  gap: 0.35rem;
  margin: 0.55rem 0;
  cursor: grab;
}

.pop-year-sort-card:active { cursor: grabbing; }

.pop-year-sort-card img {
  width: 100%;
  max-height: 10rem;
  object-fit: contain;
}

.pop-year-sort-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pop-year-sort-controls button {
  font: inherit;
  font-size: 0.8rem;
}

@media (min-width: 780px) {
  .pop-year-sort-workspace:has(.pop-year-sort-lane) {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    align-items: start;
  }
}

.pop-year-cell.answered .pop-year-options .option-btn {
  pointer-events: none;
  opacity: 0.5;
}

.pop-year-cell.answered-correct {
  outline: 2px solid var(--good);
  outline-offset: -2px;
}

.pop-year-cell.answered-wrong {
  outline: 2px solid var(--bad);
  outline-offset: -2px;
}

.armband-group {
  margin-bottom: 1rem;
}

.armband-workbench {
  display: grid;
  grid-template-columns: minmax(340px, 1.15fr) minmax(320px, 0.85fr);
  gap: 1rem;
  align-items: start;
  margin: 1rem 0 1.25rem;
}

.armband-photo-panel {
  position: sticky;
  top: 5.5rem;
  min-height: min(72dvh, 760px);
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.armband-photo-panel img {
  display: block;
  width: 100%;
  height: min(68dvh, 720px);
  object-fit: contain;
  border-radius: 10px;
  background: var(--surface-2);
}

.armband-facts-panel {
  margin: 0;
}

.armband-current-card {
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.armband-group-label {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.armband-group .option-group {
  justify-content: flex-start;
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .armband-workbench {
    grid-template-columns: 1fr;
  }

  .armband-photo-panel {
    position: static;
    min-height: 0;
  }

  .armband-photo-panel img {
    height: min(70dvh, 560px);
  }
}

.live-carousel {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  /* Overlay-Scrollbars (z. B. GTK/GNOME) sind bis zum Hover unsichtbar - ohne
     sichtbare Spur sieht die hart abgeschnittene letzte Karte wie ein Layout-
     Fehler statt wie ein scrollbarer Streifen aus ("rechts abgeschnitten" -
     Bug-Report). Duenne, dauerhaft sichtbare Scrollbar + Rand-Fade als
     Scroll-Hinweis, statt uns auf die OS-Standardanzeige zu verlassen. */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}

.live-carousel::-webkit-scrollbar {
  height: 6px;
}

.live-carousel::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

/* KI-Prioritaeten-Zeilen tragen seit dem Glaskastenprinzip deutlich mehr
   Text (Box/Trefferquote/Faelligkeit + KI-Score+Grund) als die kurzen
   Ein-Wert-Stats, fuer die .stat-row/.stat-value sonst gedacht sind (siehe
   dortige Basis-Regeln) - hier auf Block-Stapelung statt space-between-Flex
   umgestellt, damit lange Zeilen auf schmalen/Tablet-Breiten umbrechen statt
   ueberzulaufen. */
#live-ai-priorities-list .stat-row {
  display: block;
}

#live-ai-priorities-list .stat-value {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 0.15rem;
}

.live-carousel-item {
  flex: 0 0 140px;
  opacity: 0.75;
}

.live-attempt-list {
  display: grid;
  gap: 0.65rem;
}

.live-attempt-empty {
  margin-bottom: 0;
}

.live-attempt-card {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.75fr) minmax(12rem, 1.4fr) minmax(9rem, 0.9fr);
  align-items: center;
  gap: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem 0.95rem;
}

.live-attempt-card:hover {
  border-color: var(--surface-2);
  background: rgba(255, 255, 255, 0.03);
}

.live-attempt-result,
.live-attempt-main,
.live-attempt-meta {
  min-width: 0;
}

.live-attempt-result {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.live-attempt-fact,
.live-attempt-meta {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.live-attempt-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.live-attempt-main strong,
.live-attempt-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-attempt-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}

.live-repeat-btn {
  margin-top: 0.15rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 500;
}

/* Beide Katalog-Auswahl-Dialoge teilen sich diese Groesse: #goal-picker-dialog
   (goals.html) hatte vorher ueberhaupt keine eigene Regel und fiel damit auf
   die UA-Defaults zurueck - randlose Karten-Grid, "Schliessen" am Ende eines
   unbegrenzten Scrollbereichs. dvh statt vh, weil iOS Safari vh gegen den
   GROSSEN Viewport aufloest (Toolbars eingeklappt): mit sichtbarer Adressleiste
   landet die Aktionszeile - inkl. des einzigen Schliessen-Knopfs - sonst unter
   der Falz. Die vh-Zeile bleibt als Fallback fuer Browser ohne dvh. */
#live-picker-dialog,
#goal-picker-dialog {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  width: min(900px, 92vw);
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#live-picker-dialog::backdrop,
#goal-picker-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.live-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 1.25rem;
  align-items: start;
}

.live-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 88px;
}

.live-sidebar .card {
  margin-bottom: 0;
}

.live-presence-card {
  text-align: center;
}

.live-presence-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.live-presence-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.live-presence-dot-forced { background: var(--accent-2); }
.live-presence-dot-offline { background: var(--text-muted); }
.live-presence-dot-idle { background: var(--warn); }
.live-presence-dot-live {
  background: var(--good);
  box-shadow: 0 0 0 4px rgba(61, 220, 132, 0.18);
  animation: pill-live-pulse 1.6s ease-in-out infinite;
}

.live-presence-label {
  font-size: 1.1rem;
}

.live-presence-meta {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0.6rem 0 0;
}

.live-presence-mode {
  margin: 0.6rem 0 0;
}

.live-alert {
  border-radius: var(--radius);
  border-left: 3px solid var(--bad);
  background: rgba(255, 90, 90, 0.08);
  padding: 0.7rem 0.9rem;
  font-size: 0.88rem;
}

.live-alert-info {
  border-left-color: var(--accent-2);
  background: rgba(54, 182, 255, 0.08);
}

.live-progress-card .progress-bar {
  margin-bottom: 0.75rem;
}

.live-actions-stacked {
  flex-direction: column;
  align-items: stretch;
}

.live-actions-stacked button {
  width: 100%;
}

.live-ai-collapsible summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.live-ai-collapsible[open] summary {
  margin-bottom: 0.85rem;
}

.live-main {
  min-width: 0;
}

.live-main section + section {
  margin-top: 1.75rem;
}

.live-section-title {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

@media (max-width: 900px) {
  .live-layout {
    grid-template-columns: 1fr;
  }

  .live-sidebar {
    position: static;
  }
}

@media (max-width: 600px) {
  .calendar-preview {
    grid-template-columns: 1fr;
  }

  .calendar-preview-link {
    justify-content: flex-start;
  }

  .buffalos-manual-form {
    grid-template-columns: 1fr;
  }

  .goal-form {
    grid-template-columns: 1fr;
  }

  .mode-toggle {
    grid-template-columns: 1fr;
  }

  .live-attempt-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .live-attempt-meta {
    align-items: flex-start;
  }
}

/* ================================================================
   /session ("Abfrage" & Lernkarte) - "Pop-Lektion" Redesign: warmes,
   helles Theme (Fredoka/Nunito, siehe @font-face oben in dieser Datei)
   statt des fruehen dunklen Arcade/Game-Show-Looks. Alles unter
   .session-arcade betrifft NUR die Session-Seite (Wrapper in
   app/templates/session.html). Der Klassenname ist historisch (fruehere
   Arcade-Redesign-Runde) und bewusst NICHT umbenannt - app.js nutzt ihn
   ausschliesslich als CSS-Scope, nie als Verhaltens-Selektor, ein Rename
   waere reine Diff-Unruhe ohne funktionalen Nutzen. .flashcard/
   .flashcard-mini/.progress-bar/.option-btn werden auch von live.html/
   armband.html verwendet und muessen dort unveraendert bleiben - siehe
   .live-studio weiter unten fuer das analoge, ruhigere Live-Pendant.
   ================================================================ */

.session-arcade {
  /* Voller Token-Satz, nicht nur Akzentfarben wie im alten Arcade-Skin -
     ein helles Beige-Theme statt dunklem Anthrazit braucht auch
     surface/border/text/text-muted lokal, sonst blieben Karten/Texte
     dunkel in einem hellen Rahmen. Werte gegen WCAG-AA-Textkontrast
     (4.5:1) auf --bg/--surface/--surface-2 geprueft, nicht nur nach
     Optik gewaehlt - siehe Plan-Notiz zu Kontrast-Risiko. */
  --bg: #e9e6e0;
  --surface: #fbf7f1;
  --surface-2: #ffffff;
  --border: #ece4da;
  --text: #2a2620;
  --text-muted: #6b6355;
  --accent: #ff6b4a;
  --accent-2: #c53d20;
  --good: #177a4b;
  --bad: #c2302f;
  --warn: #8f5f26;
  --radius: 20px;

  --arcade-gold: #f1c34e;
  --arcade-violet: #6031c2;
  /* Namen bewusst beibehalten - CONFETTI_COLORS (app.js) referenziert
     --accent/--accent-2/--good/--arcade-gold/--arcade-violet per Name;
     ein Umbenennen wuerde die Konfetti-Farbgebung stillschweigend
     brechen. */

  background: var(--bg);
  color: var(--text);
  font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
}

/* Fredoka nur fuer Ueberschriften/CTAs (siehe Mockup) - Fliesstext bleibt
   Nunito. Beide Familien werden nur HIER referenziert, siehe @font-face:
   der Rest der App (Dashboard, Katalog, Einstellungen, Live, ...) laedt
   dadurch nie eines der beiden Font-Files. */
.session-arcade h1,
.session-arcade .card-title,
.session-arcade #feedback-headline,
.session-arcade button,
.session-arcade .btn {
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
}

/* Buttons: dunkler statt weisser Text - var(--accent) ist ein helles
   Pastell-Orange, weisser Text darauf faellt unter 3:1 Kontrast (siehe
   Plan-Notiz). Deckt auch .btn-secondary (nutzt bereits var(--text)) ab. */
.session-arcade button,
.session-arcade .btn {
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .session-arcade *, .session-arcade *::before, .session-arcade *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Flashcard: flacher, ruhiger Karten-Look statt Regenbogen-Rand +
   Idle-Glow + Holo-Sweep - diese Effekte hatten kein Aequivalent im
   Redesign-Mockup und wurden bewusst entfernt, nicht nur umgefaerbt
   (siehe Kommentar oben). Deal-in bleibt (wird bei jeder neuen Karte per
   replayAnimation() in app.js erneut getriggert, da #quiz-flashcard/
   #learn-flashcard dauerhaft im DOM bleiben). ---- */

.session-arcade .flashcard,
.session-arcade .flashcard-mini {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 14px 30px rgba(42, 38, 32, 0.08);
}

.session-arcade .flashcard::before {
  content: none;
}

.session-arcade .flashcard.deal-in {
  animation: arcade-deal-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

@keyframes arcade-deal-in {
  0%   { opacity: 0; transform: translateY(18px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Pop-Year-Mini-Karten: nur ein einmaliger Deal-in beim Aufbau der Runde
   (#py-grid wird pro Runde neu befuellt) - bewusst KEINE Dauerschleife. */
.session-arcade .flashcard-mini {
  animation: arcade-deal-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.session-arcade .flashcard-mini:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(42, 38, 32, 0.12);
}

.session-arcade .card-header {
  color: var(--accent-2);
}

.session-arcade .buffalo-score-card {
  border: 2px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: linear-gradient(135deg, #fff0eb, var(--surface) 58%);
}

.session-arcade .buffalo-score-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.session-arcade .buffalo-score-label,
.session-arcade .buffalo-score-note {
  margin: 0;
  color: var(--text-muted);
}

.session-arcade .buffalo-score-total {
  flex: none;
  min-width: 7.75rem;
  padding: 0.65rem 0.8rem;
  border-radius: 16px;
  background: var(--accent-2);
  color: #fff;
  text-align: center;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--accent-2) 48%, #000);
}

.session-arcade .buffalo-score-total strong,
.session-arcade .buffalo-score-total span {
  display: block;
}

.session-arcade .buffalo-score-total strong {
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: 0.95;
}

.session-arcade .buffalo-score-total span {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.session-arcade .buffalo-score-note {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

.session-arcade .buffalo-score-breakdown {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.session-arcade .buffalo-score-breakdown li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

.session-arcade .buffalo-score-breakdown strong {
  color: var(--accent-2);
  white-space: nowrap;
}

.session-arcade .buffalo-score-breakdown .buffalo-score-separate {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.session-arcade .buffalo-score-breakdown .buffalo-score-separate strong {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

@media (max-width: 480px) {
  .session-arcade .buffalo-score-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .session-arcade .buffalo-score-total {
    width: 100%;
  }
}

/* ---- Antwort-Feedback: FX-Layer (Konfetti/Burst-Ring) bleibt neben (nicht
   in) der Karte - .flashcard hat overflow:hidden, ein ueber den Kartenrand
   hinausgehender Burst wuerde sonst abgeschnitten. Glow-Devices sind raus,
   die Pop-/Shake-Bewegung selbst bleibt (echtes Feedback, kein
   Arcade-Flourish). ---- */

.session-arcade .flashcard-stage {
  position: relative;
  max-width: min(920px, 100%);
  margin: 0 auto 1.25rem;
}

.session-arcade .flashcard-stage .flashcard {
  margin: 0;
}

.session-arcade .fx-burst {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

.session-arcade .flashcard-stage.is-correct .flashcard {
  animation: arcade-correct-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-color: #37d289;
}

.session-arcade .flashcard-stage.is-correct .fx-burst {
  opacity: 1;
  background: radial-gradient(circle, rgba(23, 122, 75, 0.28) 0%, transparent 60%);
  animation: arcade-burst-ring 0.7s ease-out forwards;
}

@keyframes arcade-correct-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes arcade-burst-ring {
  0%   { opacity: 0.9; transform: scale(0.4); }
  70%  { opacity: 0.55; }
  100% { opacity: 0; transform: scale(1.5); }
}

.session-arcade .flashcard-stage.is-wrong .flashcard {
  animation: arcade-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  border-color: var(--bad);
}

.session-arcade .flashcard-stage.is-wrong .fx-burst {
  opacity: 1;
  background: radial-gradient(circle, rgba(194, 48, 47, 0.25) 0%, transparent 65%);
  animation: arcade-flash-fade 0.6s ease-out forwards;
}

@keyframes arcade-shake {
  10%, 90%      { transform: translateX(-1px); }
  20%, 80%      { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60%      { transform: translateX(7px); }
}

@keyframes arcade-flash-fade {
  0%   { opacity: 0.85; }
  100% { opacity: 0; }
}

/* "Gemeistert" - seltener Moment: Pop-Animation plus Konfetti (siehe
   spawnConfetti in app.js), kein Regenbogen-Rand mehr. */
.session-arcade .flashcard-stage.is-mastered .flashcard {
  animation: arcade-correct-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-color: var(--arcade-gold);
}

.session-arcade .flashcard-stage.is-mastered .fx-burst {
  opacity: 1;
  background: radial-gradient(circle, rgba(241, 195, 78, 0.4) 0%, transparent 60%);
  animation: arcade-burst-ring 1.1s ease-out forwards;
}

.session-arcade .confetti-piece {
  position: absolute;
  top: -10%;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: arcade-confetti-fall 1.1s ease-in forwards;
}

@keyframes arcade-confetti-fall {
  0%   { opacity: 1; transform: translate(var(--x, 0), -20px) rotate(0deg); }
  100% { opacity: 0; transform: translate(calc(var(--x, 0) * 1.4), 160px) rotate(540deg); }
}

/* ---- Fortschritt: Balken bleibt (Basis-Antrieb ist app.js, setzt
   .style.width), zusaetzlich eine Segment-Pillenreihe
   (renderProgressPills, app.js) - additiv, ersetzt den Balken nicht, da
   die Gesamtkartenzahl pro Session nicht fix ist (adaptive
   Nachbesserung, siehe REMEDIATION_PER_MISTAKE in app/config.py). Bei
   sehr vielen Segmenten (state.progress.total > MAX_PROGRESS_PILLS)
   blendet renderProgressPills die Pillenreihe aus und der Balken bleibt
   die einzige Fortschrittsanzeige. ---- */

.session-arcade .progress-bar {
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.session-arcade .progress-bar .fill {
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.session-arcade .progress-pills {
  display: flex;
  gap: 6px;
  margin: 0 0 0.75rem;
}

.session-arcade .progress-pill {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: var(--border);
}

.session-arcade .progress-pill.is-filled {
  background: var(--accent);
}

/* ---- Timer: ruhiger konischer Countdown-Ring statt reinem Text (--pct
   wird von startQuizTimer/clearQuizTimer in app.js gesetzt/zurueckgesetzt),
   gleiche Mechanik wie zuvor, nur umgefaerbt. ---- */

.session-arcade .quiz-timer {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  --timer-color: var(--good);
  --pct: 100;
}

.session-arcade .quiz-timer::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  background:
    radial-gradient(closest-side, var(--surface) 72%, transparent 73% 100%),
    conic-gradient(var(--timer-color) calc(var(--pct) * 1%), var(--surface-2) 0);
  transition: background 0.2s linear;
}

.session-arcade .quiz-timer.quiz-timer-caution {
  --timer-color: var(--warn);
  color: var(--warn);
}

.session-arcade .quiz-timer.quiz-timer-warn {
  --timer-color: var(--bad);
}

/* ---- Buttons: "3D"-Unterkante (flacher Farbblock + massive Schattenkante)
   statt Idle-Glow - siehe Mockup. ---- */

.session-arcade .btn-arcade {
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 5px 0 var(--accent-2);
}

.session-arcade .btn-arcade:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 6px 0 var(--accent-2);
}

.session-arcade .btn-arcade:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--accent-2);
}

.session-arcade .btn-arcade:disabled {
  box-shadow: none;
  transform: none;
  filter: none;
}

/* ---- Antwortoptionen: Buchstaben-Badges (A/B/C/...) per reinem
   CSS-Counter - passt sich QUIZ_OPTION_COUNT/PHOTO_OPTION_COUNT (siehe
   app/config.py, Default 5/3) automatisch an, statt die im Mockup
   zufaellig feste Optionsanzahl (4) hart zu codieren. Grid ist auto-fit
   aus demselben Grund. ---- */

.session-arcade .option-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  counter-reset: opt;
}

.session-arcade .option-btn,
.session-arcade .photo-option-btn {
  position: relative;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
  background: var(--surface-2);
  border: 2.5px solid var(--border);
  border-radius: 19px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
}

.session-arcade .option-btn::before,
.session-arcade .photo-option-btn::before {
  counter-increment: opt;
  content: counter(opt, upper-alpha);
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  font-weight: 900;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.session-arcade .photo-option-btn {
  width: auto;
  height: auto;
  flex-direction: column;
}

.session-arcade .photo-option-btn img {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: contain;
  background: var(--surface-1);
  border-radius: calc(var(--radius) - 6px);
}

.session-arcade .option-btn:active,
.session-arcade .photo-option-btn:active {
  transform: scale(0.97);
}

.session-arcade .option-btn.selected,
.session-arcade .photo-option-btn.selected {
  animation: arcade-select-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: #fff0eb;
  border-color: var(--accent);
}

.session-arcade .option-btn.selected::before,
.session-arcade .photo-option-btn.selected::before {
  background: var(--accent);
  color: var(--text);
}

@keyframes arcade-select-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Eskalation zu Freitext (ESCALATE_AFTER_WRONG/FAST_GUESS_MS, siehe
   app/config.py und renderTextInput in app.js) muss weiterhin gut
   erkennbaren Fokus haben. */
.session-arcade #answer-form input[type="text"] {
  border-width: 2px;
  border-color: var(--border);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.session-arcade #answer-form input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.22);
}

/* ---- Toasts: Einflug-Animation; Ausblenden nur per Klick auf den
   Schliessen-Button - KEIN Auto-Dismiss (bewusste, bestehende
   Design-Entscheidung, siehe showToast in app.js). ---- */

.session-arcade .toast {
  border-left-width: 5px;
  box-shadow: 0 10px 26px rgba(42, 38, 32, 0.14);
  animation: arcade-toast-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

@keyframes arcade-toast-in {
  0%   { opacity: 0; transform: translateX(24px) scale(0.94); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

.session-arcade .toast.toast-leaving {
  animation: arcade-toast-out 0.28s ease-in forwards;
  pointer-events: none;
}

@keyframes arcade-toast-out {
  to { opacity: 0; transform: translateX(30px) scale(0.9); }
}

.session-arcade .session-status-bar .pill {
  border: 1px solid var(--border);
  padding: 0.35rem 0.85rem;
  background: var(--surface-2);
}

.session-arcade #session-buffalo-total.pill-bad {
  animation: pill-live-pulse 1.6s ease-in-out infinite;
}

/* ---- Pop-Year-Abschluss ---- */

.session-arcade #pop-year-summary h1 {
  background: linear-gradient(90deg, var(--accent-2), var(--arcade-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 2rem;
}

.session-arcade .score-good { color: var(--good); font-weight: 800; font-size: 1.3rem; }
.session-arcade .score-bad  { color: var(--bad);  font-weight: 800; font-size: 1.3rem; }

/* Pop-Year-Zellen: KEIN eigenes Overlay mehr - die Basisregel
   (.pop-year-cell.answered-correct/-wrong weiter oben in dieser Datei)
   ist bereits ein ruhiger Outline-Rahmen ohne Glow und passt unveraendert
   zum neuen Look, sobald --good/--bad hier lokal umdefiniert sind (bewusste
   Loeschung, nicht Umfaerbung - siehe Plan). */

.session-arcade .mistake-hot {
  color: var(--bad);
  font-weight: 800;
}

.session-arcade .stat-value {
  font-variant-numeric: tabular-nums;
}

/* ---- Lern-Fakten-Raster: statt vertikaler Liste ein auto-fit-Grid aus
   Karten (Label + Wert) - passt sich der je nach Referenz sichtbaren
   Zeilenzahl (2-13, siehe setLearnFactRow/app.js) automatisch an, ohne
   Template- oder JS-Aenderung. ---- */

.session-arcade .card-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.session-arcade .stat-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.85rem 1rem;
}

.session-arcade .stat-label {
  font-size: 0.68rem;
}

.session-arcade .stat-value {
  font-size: 1.1rem;
  color: var(--text);
}

/* ---- Antwort-/Feedback-Karte: gleiche Erhabenheit wie die Flashcard,
   aber ruhig (kein Regenbogen-Rand, kein Idle-Puls). ---- */

.session-arcade .card {
  position: relative;
  background: var(--surface);
  box-shadow: 0 10px 22px rgba(42, 38, 32, 0.08);
}

/* Ergebnisfaerbung der Feedback-Box: #quiz-flashcard-stage bekommt
   is-correct/is-wrong/is-mastered bereits gesetzt (submitAnswer, app.js),
   BEVOR #feedback-box sichtbar wird - beide sind Geschwister unter
   #quiz-workspace, daher reicht ein reiner CSS-General-Sibling-Selektor statt
   einer eigenen JS-Klasse. #feedback-headline (Text von submitAnswer
   gesetzt) faerbt farblich mit. */
.session-arcade .flashcard-stage.is-correct ~ #feedback-box {
  background: #effbf4;
  border-color: #37d289;
}
.session-arcade .flashcard-stage.is-correct ~ #feedback-box #feedback-headline {
  color: #1a8f57;
}

.session-arcade .flashcard-stage.is-wrong ~ #feedback-box {
  background: #fdedec;
  border-color: var(--bad);
}
.session-arcade .flashcard-stage.is-wrong ~ #feedback-box #feedback-headline {
  color: var(--bad);
}

.session-arcade .flashcard-stage.is-mastered ~ #feedback-box {
  background: #fff8e6;
  border-color: var(--arcade-gold);
}
.session-arcade .flashcard-stage.is-mastered ~ #feedback-box #feedback-headline {
  color: #93720f;
}

.session-arcade #feedback-headline {
  font-size: 1.4rem;
  margin: 0 0 0.6rem;
}

.session-arcade #feedback-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.session-arcade #feedback-chips .feedback-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-weight: 800;
}

.session-arcade #feedback-chips .feedback-chip-box { color: var(--arcade-violet); }
.session-arcade #feedback-chips .feedback-chip-time { color: var(--text-muted); }

/* Pruefungsbanner: nutzt bewusst dieselbe tiefe Rot-Orange-Note wie der
   Mockup-eigene Akzent-2-Ton statt einer dritten Warnfarbe - soll
   erkennbar "ernster" wirken als eine normale Falsch-Antwort. */
.session-arcade #exam-banner,
.session-arcade #exam-fullscreen-bar {
  border-left: 4px solid var(--accent-2);
  background: #fff0eb;
}

/* Prüfungen zeigen nur den für die Antwort nötigen Kontext. Der echte
   Vollbild-/Fokusvertrag bleibt in app.js und auf dem Server; dieses Layout
   reduziert zusätzlich sichtbare Ablenkungen. */
.session-arcade.is-exam-active #session-next-up,
.session-arcade.is-exam-active #session-buffalo-total,
.session-arcade.is-exam-active #session-buffalo-help,
.session-arcade.is-exam-active #quiz-progress-meter,
.session-arcade.is-exam-active #quiz-next-preview,
.session-arcade.is-exam-active #quiz-progress-pills {
  display: none;
}

.session-arcade.is-exam-active #exam-banner {
  margin-bottom: 0.75rem;
  padding: 0.7rem 1rem;
  font-weight: 800;
}

.session-arcade.is-exam-active #quiz-phase {
  max-width: 1240px;
  margin: 0 auto;
}

.session-arcade.is-exam-active .quiz-phase-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.session-arcade.is-exam-active #quiz-phase h1,
.session-arcade.is-exam-active #quiz-progress {
  margin: 0;
}

.session-arcade.is-exam-active #quiz-phase h1 {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.session-arcade.is-exam-active #quiz-phase h1::after {
  display: none;
}

.session-arcade.is-exam-active #quiz-progress {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.session-arcade.is-exam-active #answer-form.auto-submit-enabled .actions {
  display: none;
}

@media (min-width: 900px) {
  .session-arcade.is-exam-active #quiz-workspace {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 4rem);
  }

  .session-arcade.is-exam-active #quiz-flashcard-stage {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-width: 0;
  }

  .session-arcade.is-exam-active #quiz-flashcard,
  .session-arcade.is-exam-active #quiz-flashcard.has-large-photo {
    max-width: none;
    margin: 0;
  }

  /* Foto links, Antworten rechts: kein zweites, verschachteltes Desktop-Grid
     innerhalb der Bildspalte. */
  .session-arcade.is-exam-active #quiz-flashcard.has-large-photo .flashcard-media-layout {
    display: block;
    text-align: center;
  }

  .session-arcade.is-exam-active #quiz-flashcard.has-large-photo img {
    min-height: 0;
    max-height: min(58vh, 620px);
  }

  .session-arcade.is-exam-active #answer-form,
  .session-arcade.is-exam-active #feedback-box {
    grid-column: 2;
    min-width: 0;
    margin: 0;
  }

  .session-arcade.is-exam-active #answer-form .option-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .session-arcade.is-exam-active .quiz-phase-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }
}

/* Eine laufende Schueler-Einheit hat genau einen bewussten Ausgang. Die
   globale Navigation wird ausgeblendet; app.js bietet stattdessen den
   bestaetigten Abbruch an und faengt History-/Unload-Navigation ab. */
body.session-exit-locked .student-header .brand,
body.session-exit-locked .student-header .student-nav,
body.session-exit-locked .student-header .logout-form {
  display: none;
}

.session-exit-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.session-exit-actions[hidden] { display: none; }

/* Fail-closed Klausur-Gate: solange Vollbild fehlt, bleibt weder die Frage
   noch das Antwortformular sichtbar oder bedienbar. Das Element wird bereits
   serverseitig fuer eine anstehende/laufende Klausur eingeblendet; app.js
   entfernt es erst nach einem bestaetigten Fullscreen-Wechsel. */
.session-arcade #exam-fullscreen-bar.exam-fullscreen-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  padding: clamp(1.5rem, 5vw, 4rem);
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.session-arcade #exam-fullscreen-bar.exam-fullscreen-gate > * {
  max-width: 42rem;
}

.session-arcade .exam-preflight {
  width: min(100%, 42rem);
  margin: 1rem 0 1.35rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--accent-2) 28%, var(--border));
  border-radius: var(--radius);
  background: rgba(255, 253, 249, 0.82);
  text-align: left;
}

.session-arcade .exam-preflight h2 {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
}

.session-arcade .exam-preflight h2:not(:first-child) {
  margin-top: 1.15rem;
}

.session-arcade .exam-preflight-facts,
.session-arcade .exam-preflight-rules {
  margin: 0;
  padding: 0;
  list-style: none;
}

.session-arcade .exam-preflight-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.session-arcade .exam-preflight-facts li {
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem;
  border-radius: 8px;
  background: var(--surface-2);
}

.session-arcade .exam-preflight-facts strong {
  font-variant-numeric: tabular-nums;
}

.session-arcade .exam-preflight-facts span,
.session-arcade .exam-preflight-rules {
  color: var(--text-muted);
  font-size: 0.87rem;
}

.session-arcade .exam-preflight-rules {
  display: grid;
  gap: 0.45rem;
  padding-left: 1.15rem;
  list-style: disc;
}

@media (max-width: 640px) {
  .session-arcade .exam-preflight-facts {
    grid-template-columns: 1fr;
  }
}

/* ---- Empty-States (Start/Laden/Leer/Pause/Freischaltung ausstehend) ---- */

.session-arcade .empty-state {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.25rem 1.75rem;
  box-shadow: 0 10px 24px rgba(42, 38, 32, 0.08);
}

.session-arcade .empty-state .actions {
  justify-content: center;
}

/* ---- Feedback-Box-Reveal: zurueckhaltend (nur opacity/transform, kein
   box-shadow/border-color - die Ergebnisfaerbung oben darf waehrend der
   Animationslaufzeit nicht ueberschrieben werden). ---- */

@keyframes arcade-feedback-in {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

.session-arcade #feedback-box.feedback-in {
  animation: arcade-feedback-in 0.32s ease-out both;
}

/* ---- Phasenuebergaenge: leichtes Einblenden statt hartem display-Toggle
   (show(), app.js, nur bei echten Phasenwechseln - siehe lastAnimatedPhase
   dort). ---- */

@keyframes arcade-phase-in {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

.session-arcade .phase-in {
  animation: arcade-phase-in 0.22s ease-out both;
}

.session-arcade .session-status-bar .pill-warn {
  animation: pill-live-pulse 1.6s ease-in-out infinite;
}

/* ---- Phasen-Ueberschriften: kleiner statischer Unterstrich. */

.session-arcade #start-prompt h1,
.session-arcade #learn-phase h1,
.session-arcade #quiz-phase h1,
.session-arcade #pop-year-phase h1 {
  position: relative;
  padding-bottom: 0.4rem;
}

.session-arcade #start-prompt h1::after,
.session-arcade #learn-phase h1::after,
.session-arcade #quiz-phase h1::after,
.session-arcade #pop-year-phase h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}

/* ================================================================
   /live ("Live-Session-Tracker") - ruhiges "Mission Control"-Pendant zum
   warmen .session-arcade oben: gleiche Grundfamilie (helles, papierartiges
   Beige statt Anthrazit), aber gedaempfter und funktionaler - keine
   Konfetti/Glow/Deal-in-Bounce, Fredoka nur fuer die drei Abschnittstitel
   und die Praesenz-Pille, sonst durchgehend Nunito. Fast alle .live-*-
   Basisregeln (siehe weiter oben in dieser Datei) sind bereits ueber
   var(--surface)/var(--border)/var(--text-muted)/var(--good)/var(--bad)/
   var(--accent) token-getrieben und uebernehmen die Werte hier automatisch
   - dieser Block deckt nur die Faelle ab, die entweder harte rgba()-Werte
   statt Tokens nutzen, oder (.flashcard/.flashcard-mini/.progress-bar)
   Basisklassen sind, die live.html unveraendert von /session/armband teilt
   und deshalb hier lokal ueberschrieben werden muessen. */

/* .live-studio faerbt nur sich selbst (der Inhalt von .container, max-width:
   900px) - html/body bleiben beim globalen dunklen :root-Theme, siehe weiter
   oben in dieser Datei. Auf Breiten > 900px + Innenabstand blieb dadurch ein
   dunkler Rahmen rund um die helle Karte stehen ("beisst sich farblich" -
   Bug-Report), statt wie im Mockup gedacht ein durchgehend helles Papier-
   Theme zu ergeben. Die Werte hier dupliziert (nicht var(--bg)) - Custom
   Properties vererben nur an Nachfahren, body ist aber Vorfahre von
   .live-studio, nicht Nachfahre, kann dessen --bg also nicht per var() lesen. */
body:has(.live-studio) {
  background: #f2efe9;
}

.live-studio {
  --bg: #f2efe9;
  --surface: #ffffff;
  --surface-2: #f7f4ee;
  --border: #e2dac9;
  --text: #2a2620;
  --text-muted: #6b6355;
  --accent: #c53d20;
  --accent-2: #a83019;
  --good: #177a4b;
  --bad: #c2302f;
  --warn: #8f5f26;
  --radius: 14px;

  background: var(--bg);
  color: var(--text);
  font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
}

.live-studio .live-section-title,
.live-studio #live-status-pill {
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
}

/* .flashcard/.flashcard-mini/.progress-bar sind gemeinsame Basisklassen
   (auch von /session und /armband genutzt, siehe Kommentar oben) - ihr
   Regenbogen-Rand ist KEIN Token, sondern ein hartcodierter
   conic-gradient(...) und wuerde ohne diese lokale Ueberschreibung auch
   hier unveraendert weiterlaufen, obwohl /session ihn bereits entfernt hat. */
.live-studio .flashcard,
.live-studio .flashcard-mini {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 18px rgba(42, 38, 32, 0.06);
}

.live-studio .flashcard::before {
  content: none;
}

.live-studio .progress-bar {
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.live-studio .progress-bar .fill {
  background: var(--accent);
}

.live-studio .card {
  box-shadow: 0 6px 16px rgba(42, 38, 32, 0.05);
}

/* Alarme/Praesenz-Puls nutzen hartcodierte rgba()-Tints (nicht token-
   basiert) fuer den Farbschimmer - werden hier auf die neuen Werte
   umgerechnet statt sie unveraendert (auf dunklem Theme berechnet) zu
   uebernehmen. */
.live-studio .live-alert {
  background: rgba(194, 48, 47, 0.08);
}

.live-studio .live-alert-info {
  background: rgba(197, 61, 32, 0.08);
}

/* Der Puls auf dem "live"-Praesenz-Punkt bleibt bewusst erhalten - das ist
   ein funktionales Signal (unterscheidet "gerade live" von "statisch"),
   kein Feier-Flourish, siehe Plan. */
.live-studio .live-presence-dot-live {
  box-shadow: 0 0 0 4px rgba(23, 122, 75, 0.16);
}

.live-studio .live-attempt-card:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}

/* ================================================================
   /settings ("Einstellungen") - "Studio"-Redesign: warmes Anthrazit +
   Bernstein statt der globalen Orange/Cyan-Tokens, ruhige Editorial-
   Optik mit Mono-Werteanzeigen ("Spec-Sheet"-Charakter fuer Slider/
   Zahlenfelder). Gilt NUR innerhalb .settings-studio (Wrapper in
   app/templates/settings.html) - gleiches Scoping-Prinzip wie
   .session-arcade oben: lokal verstaerkte Token-Namen, :root bleibt
   fuer den Rest der App (Dashboard, Katalog, Live, Reports, ...)
   unveraendert. Keine externen Webfonts (siehe CLAUDE.md "kein
   stilles Nachladen") - die Mono-Optik kommt vom System-Mono-Stack. */

.settings-studio {
  --surface: #17130f;
  --surface-2: #221b13;
  --border: #34291d;
  --accent: #e0a35b;
  --accent-2: #e0a35b;
  --text: #efe7db;
  --text-muted: #ab9d89;
  --radius: 12px;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

.settings-studio .settings-eyebrow {
  font: 700 0.65rem var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}

.settings-studio h1 { letter-spacing: -0.01em; }

/* Buttons sitzen auf hellem Bernstein - dunkler statt weisser Text fuer
   ausreichend Kontrast (die globale Regel setzt sonst hartcodiert #fff). */
.settings-studio button,
.settings-studio .btn {
  color: #17130f;
}

.settings-studio .btn-secondary {
  color: var(--text);
}

.settings-studio input[type="text"],
.settings-studio input[type="number"],
.settings-studio select,
.settings-studio textarea {
  font-family: var(--font-mono);
  font-weight: 600;
}

.settings-studio input[type="text"]:focus,
.settings-studio input[type="number"]:focus,
.settings-studio select:focus,
.settings-studio textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(224, 163, 91, 0.25);
}

/* Tabs: ruhige Underline-Reihe statt Pill-Buttons (nur hier - /reports und
   /stats nutzen dieselben .settings-tabs/.tab-btn-Klassen ausserhalb von
   .settings-studio und bleiben unveraendert). */
.settings-studio .settings-tabs {
  gap: 1.5rem;
}

.settings-studio .tab-btn {
  background: transparent;
  border: none;
  border-radius: 0;
  color: #8f8474;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0 0 0.8rem;
}

.settings-studio .tab-btn:hover { color: var(--text); }

.settings-studio .tab-btn.active {
  background: transparent;
  color: var(--text);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.settings-studio .tab-intro {
  border-bottom: none;
  margin-bottom: 1.75rem;
}

.settings-studio .field-group-heading {
  font: 700 0.65rem var(--font-mono);
  letter-spacing: 0.14em;
  color: #8f8474;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.6rem;
}

.settings-studio .field-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.2rem;
}

.settings-studio .field-head label { margin-bottom: 0; }

.settings-studio .field-value {
  font: 700 0.8rem var(--font-mono);
  color: var(--accent);
  white-space: nowrap;
  flex: none;
}

.settings-studio .field-help {
  font-size: 0.78rem;
  line-height: 1.55;
  opacity: 0.92;
}

/* Slider: duenner Track, eigener Thumb, Fuellstand per Inline-Gradient aus
   settings.js (Webkit/Blink) bzw. ::-moz-range-progress (Firefox). */
.settings-studio .field-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  outline: none;
  margin: 0.3rem 0;
}

.settings-studio .field-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: transparent;
}

.settings-studio .field-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 0 3px var(--surface), 0 2px 6px rgba(0, 0, 0, 0.55);
  margin-top: -5px;
  cursor: pointer;
}

.settings-studio .field-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
}

.settings-studio .field-range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}

.settings-studio .field-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 0 3px var(--surface), 0 2px 6px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.settings-studio .slider-row { gap: 0; }

/* Segmentierte Easy/Hard-Auswahl: dunkle Kapsel mit Bernstein-Pille statt
   zweispaltigem Grid-Card-Look. */
.settings-studio .mode-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}

.settings-studio .mode-option {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
}

.settings-studio .mode-option:hover { filter: none; background: rgba(239, 231, 219, 0.06); }

.settings-studio .mode-option.active { background: var(--accent); }

.settings-studio .mode-option.active:hover { background: var(--accent); }

.settings-studio .mode-option.active strong,
.settings-studio .mode-option.active span {
  color: #17130f;
}

.settings-studio .mode-option span { font-size: 0.72rem; }

/* Pill-Switch statt nackter Checkbox (betrifft auch teacher_messaging.js,
   dessen "aktiv"-Schalter innerhalb des Mehr-Tabs derselben Klasse folgt). */
.settings-studio .toggle-switch-label input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  flex: none;
  margin: 0;
}

.settings-studio .toggle-switch-label input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: left 0.15s ease, background 0.15s ease;
}

.settings-studio .toggle-switch-label input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.settings-studio .toggle-switch-label input[type="checkbox"]:checked::before {
  left: 18px;
  background: #17130f;
}

/* "Erweitert"-Sektionen & Mehr-Gruppen: eigener Zaehl-Badge rechts in der
   Summary statt nur des Klapptext-Titels; nativer Dreieck-Marker wird durch
   einen rotierenden Chevron ersetzt, der neben dem Badge sitzt. */
.settings-studio .settings-collapsible > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
}

.settings-studio .settings-collapsible > summary::-webkit-details-marker { display: none; }

.settings-studio .settings-collapsible > summary > span:first-child {
  margin-right: auto;
}

.settings-studio .settings-collapsible > summary::after {
  content: "\25BE";
  color: var(--text-muted);
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}

.settings-studio .settings-collapsible[open] > summary::after {
  transform: rotate(180deg);
}

.settings-studio .settings-collapsible-meta {
  font: 400 0.72rem var(--font-mono);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Speichern-Leiste: Dirty-Pill links, Aktion rechts (ersetzt die schlichte
   .actions-Zeile). #settings-status traegt weiterhin Speichere.../Fehler-
   /Erfolgstexte unveraendert aus settings.js, nur das Layout drumherum. */
.settings-studio .settings-savebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}

.settings-studio .settings-savebar .actions { margin-top: 0; }
.settings-studio .settings-status-group { display: flex; flex-direction: column; gap: 0.3rem; }
.settings-studio .settings-status-group #settings-status { margin: 0; }
.settings-studio .settings-status-group #settings-status:empty { display: none; }

.settings-studio .settings-dirty-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 500 0.8rem var(--font-mono);
  color: var(--accent);
}

/* Wie .forced-session-banner[hidden] oben: gleiche Selektor-Spezifitaet wie
   die Regel darueber, die sonst "display: inline-flex" gegen das native
   "[hidden] { display: none }" gewinnen wuerde. */
.settings-studio .settings-dirty-indicator[hidden] {
  display: none;
}

.settings-studio .settings-dirty-indicator .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 640px) {
  .settings-studio .settings-savebar {
    flex-direction: column;
    align-items: stretch;
  }
  .settings-studio .settings-savebar .actions button { width: 100%; }
}

/* ============================================================
   /shop ("Buffalo-Shop") - gamifizierter Unlock-Baum. Alles unter
   .shop-arcade gescoped und ausschliesslich ueber Design-Tokens
   gefaerbt, damit editorial.css (laedt zuletzt) den Look mitzieht.
   ============================================================ */

.shop-arcade .shop-stat-available .value {
  color: var(--accent);
  font-family: var(--font-playful, inherit);
}

.shop-arcade .shop-category {
  margin-top: 1.4rem;
}

.shop-arcade .shop-category-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.shop-arcade .shop-category-emoji {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1.7rem;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  border-radius: 50%;
  flex-shrink: 0;
}

.shop-arcade .shop-category-title {
  flex: 1 1 18rem;
  min-width: 0;
}

.shop-arcade .shop-category-title-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.shop-arcade .shop-category-title-row h2 {
  margin: 0;
}

.shop-arcade .shop-category-state {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.shop-arcade .shop-activation {
  margin-top: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 0.55rem);
}

.shop-arcade .shop-activation-title {
  margin-bottom: 0.35rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.shop-arcade .shop-activation-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.shop-arcade .shop-activation-step {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.3rem 0.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 0.45rem);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.25;
}

.shop-arcade .shop-activation-step.is-complete {
  color: var(--good);
  background: color-mix(in srgb, var(--good) 10%, transparent);
}

.shop-arcade .shop-activation-step.is-locked {
  background: var(--surface, #fff);
}

.shop-arcade .shop-activation-step.is-actionable {
  cursor: pointer;
  color: var(--text);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border-color: color-mix(in srgb, var(--warn) 42%, var(--border));
}

.shop-arcade .shop-activation-step.is-actionable:hover,
.shop-arcade .shop-activation-step.is-actionable:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.shop-arcade .shop-activation-icon {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  font-weight: 800;
}

.shop-arcade .shop-ladders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.3rem;
  margin-top: 1.1rem;
}

.shop-arcade .shop-ladder-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.shop-arcade .shop-rail {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}

.shop-arcade .shop-node {
  position: relative;
  padding: 0.4rem 0;
}

/* Verbindungsstueck zur vorherigen Stufe: gestrichelt solange die Stufe
   nicht erreicht ist, durchgezogen gruen sobald sie gekauft wurde. */
.shop-arcade .shop-node + .shop-node::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: -0.95rem;
  height: 1.9rem;
  border-left: 3px dashed var(--border-strong, var(--border));
}

.shop-arcade .shop-node.node-owned + .shop-node::before,
.shop-arcade .shop-node + .shop-node.node-owned::before {
  border-left-style: solid;
  border-left-color: var(--good);
}

.shop-arcade .shop-node-inner {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}

.shop-arcade button.shop-node-inner {
  cursor: pointer;
  transition: transform 0.15s ease;
}

.shop-arcade button.shop-node-inner:hover,
.shop-arcade button.shop-node-inner:focus-visible {
  transform: translateX(3px);
  background: transparent;
}

.shop-arcade .shop-node-badge {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.85rem;
  background: var(--surface);
  border: 2px solid var(--border-strong, var(--border));
  color: var(--text-muted);
  flex-shrink: 0;
}

.shop-arcade .node-owned .shop-node-badge {
  background: var(--good);
  border-color: var(--good);
  color: #fff;
}

.shop-arcade .node-unlockable .shop-node-badge {
  border-color: var(--accent);
  color: var(--accent);
  animation: shop-node-pulse 2.2s ease-out infinite;
}

.shop-arcade .node-unlockable.too-expensive .shop-node-badge {
  border-color: var(--border-strong, var(--border));
  color: var(--text-muted);
  animation: none;
}

.shop-arcade .node-locked .shop-node-badge {
  background: var(--surface-2, var(--surface));
  border-style: dashed;
  font-size: 0.75rem;
}

@keyframes shop-node-pulse {
  0% { box-shadow: 0 0 0 0 rgba(199, 70, 50, 0.35); }
  70% { box-shadow: 0 0 0 9px rgba(199, 70, 50, 0); }
  100% { box-shadow: 0 0 0 0 rgba(199, 70, 50, 0); }
}

.shop-arcade .shop-node-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.shop-arcade .shop-node-label {
  font-weight: 700;
}

.shop-arcade .node-locked .shop-node-label {
  color: var(--text-muted);
  font-weight: 600;
}

.shop-arcade .shop-node-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.shop-arcade .node-unlockable .shop-node-price {
  color: var(--accent);
  font-weight: 700;
}

.shop-arcade .too-expensive .shop-node-price {
  color: var(--bad);
  font-weight: 600;
}

.shop-arcade .node-expired {
  filter: saturate(0.35);
  opacity: 0.8;
}

.shop-arcade .node-locked {
  opacity: 0.6;
}

/* Verdeckte Stufe ("??"): noch nicht erreichbar, Inhalt bewusst verborgen. */
.shop-arcade .shop-node-obscured .shop-node-label {
  letter-spacing: 0.18em;
  color: var(--text-muted);
  font-weight: 700;
}

/* Kategorie-Freikauf im Header: rechtsbuendiger Kauf-Knopf bzw. Statuspille. */
.shop-arcade .shop-category-header .shop-unlock-btn,
.shop-arcade .shop-category-header .shop-unlock-pill {
  margin-left: auto;
}

.shop-arcade .shop-unlock-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.shop-arcade .shop-unlock-btn:hover,
.shop-arcade .shop-unlock-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(199, 70, 50, 0.18);
}

.shop-arcade .shop-unlock-icon {
  font-size: 1.05rem;
}

/* Kauf-Dialog */
.shop-arcade dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  background: var(--surface);
  color: var(--text);
  padding: 1.4rem 1.6rem;
  max-width: 26rem;
  box-shadow: var(--shadow-soft, 0 16px 42px rgba(0, 0, 0, 0.2));
}

.shop-arcade dialog::backdrop {
  background: rgba(37, 33, 29, 0.45);
}

.shop-arcade .shop-dialog-body {
  text-align: center;
}

.shop-arcade .shop-dialog-emoji {
  font-size: 2.4rem;
}

.shop-arcade .shop-dialog-body h3 {
  margin: 0.4rem 0 0.2rem;
}

.shop-arcade .shop-dialog-item {
  font-family: var(--font-playful, inherit);
  font-size: 1.25rem;
  margin: 0.1rem 0 0.5rem;
}

.shop-arcade .shop-dialog-actions {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1rem;
}

/* Kauf-Konfetti (eigene, shop-gescopte Variante - die Session-Arcade-
   Konfetti-Klassen sind bewusst auf /session begrenzt). */
.shop-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}

.shop-confetti span {
  position: absolute;
  top: -3vh;
  width: 0.55rem;
  height: 0.9rem;
  border-radius: 2px;
  animation: shop-confetti-fall 1.6s ease-in forwards;
}

@keyframes shop-confetti-fall {
  to {
    transform: translateY(108vh) rotate(540deg);
    opacity: 0.7;
  }
}

/* Mobile Tab-Leiste: nur unterhalb der Breakpoint sichtbar - auf Desktop
   bleiben alle Kategorien wie bisher gestapelt sichtbar. */
.shop-arcade .shop-tabs {
  display: none;
}

@media (max-width: 900px) {
  .shop-arcade .shop-ladders {
    grid-template-columns: 1fr;
  }

  .shop-arcade .shop-tabs {
    display: flex;
  }

  .shop-arcade .shop-category {
    display: none;
  }

  .shop-arcade .shop-category.shop-tab-active {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-arcade *, .shop-arcade *::before, .shop-arcade *::after,
  .shop-confetti span {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}