:root {
  /* === Farben (Kio-Palette: Teal / Mint / Warmgelb) === */
  --primary: #14b8a6;          /* teal-500, wie Kio-Logo links */
  --primary-hover: #0d9488;    /* teal-600 */
  --primary-soft: #ccfbf1;     /* teal-100 */
  --primary-border: #99f6e4;   /* teal-200 */

  --mint: #6ee7b7;             /* mint, wie Kio-Logo rechts */
  --mint-soft: #d1fae5;

  --accent: #fbbf24;           /* amber-400, Glühbirne */
  --accent-soft: #fef3c7;
  --accent-strong: #f59e0b;    /* amber-500, Orangelinie im Logo */

  --success: #10b981;          /* emerald */
  --success-soft: #d1fae5;

  --error: #ef4444;            /* red */
  --error-soft: #fee2e2;

  --text: #0f172a;             /* slate-900 */
  --text-muted: #64748b;       /* slate-500 */
  --border: #e2e8f0;           /* slate-200 */
  --surface: #ffffff;
  --surface-2: #f0fdfa;        /* teal-50, ganz hell */
  --bg: #ecfeff;               /* cyan-50 */

  /* === Form === */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* === Schatten === */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05),
               0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.04),
               0 10px 15px -3px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 50px -12px rgba(20, 184, 166, 0.20),
               0 8px 24px -8px rgba(15, 23, 42, 0.10);

  /* === Schrift === */
  --font: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI",
          system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 0% 0%, #ccfbf1 0%, transparent 55%),
    radial-gradient(circle at 100% 100%, #fef3c7 0%, transparent 55%),
    radial-gradient(circle at 70% 20%, #d1fae5 0%, transparent 50%),
    var(--bg);
  background-attachment: fixed;
  padding: 24px 16px;
  font-weight: 500;
}

/* === Header === */
header {
  text-align: center;
  margin-bottom: 28px;
}

header h1 {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  margin: 0 0 4px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--mint) 60%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

.kio-logo-link {
  display: block;
  line-height: 0;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.kio-logo-link:hover,
.kio-logo-link:focus { transform: scale(1.03); outline: none; }
.kio-logo {
  display: block;
  margin: 0 auto 8px;
  width: clamp(96px, 18vw, 140px);
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(20, 184, 166, 0.25));
}

.subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 500;
}

/* User-Bar im Header */
.user-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 6px 6px 6px 16px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  font-size: 0.95rem;
  flex-wrap: wrap;
  justify-content: center;
}

.user-bar > span { color: var(--text-muted); }
.user-bar strong { color: var(--text); font-weight: 700; }
.user-name-btn {
  background: transparent;
  border: none;
  padding: 4px 6px;
  font: inherit;
  cursor: pointer;
  border-radius: 6px;
  color: var(--text);
}
.user-name-btn:hover,
.user-name-btn:focus {
  background: var(--primary-soft);
  outline: none;
}

.grade-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--primary-soft);
  color: var(--primary-hover);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.grade-badge:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.grade-edit { font-size: 0.75rem; opacity: 0.85; }

/* === Layout === */
main {
  max-width: 760px;
  margin: 0 auto;
}

.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  margin-bottom: 20px;
}

.hidden { display: none !important; }

h2 {
  margin: 0 0 18px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  letter-spacing: -0.01em;
}

h3 {
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === Buttons === */
.primary-btn {
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 13px 26px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.primary-btn:hover  { background: var(--primary-hover); }
.primary-btn:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3); }

.small-btn {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 16px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.small-btn:hover  { background: var(--primary-soft); border-color: var(--primary-border); color: var(--primary-hover); }

/* === Auth (Login/Register) === */
.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: var(--radius);
}

.auth-tab {
  flex: 1;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.auth-tab:hover  { color: var(--text); }
.auth-tab.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }

.login-intro {
  text-align: center;
  font-size: 1rem;
  margin: 0 0 20px;
  color: var(--text-muted);
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  max-width: 320px;
  margin: 0 auto;
}

.login-extra {
  text-align: center;
  margin: 4px 0 0;
  font-size: 0.95rem;
}
.login-extra a { color: var(--primary-hover); text-decoration: none; }
.login-extra a:hover { text-decoration: underline; }

.login-form input[type="text"],
.login-form input[type="password"] {
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 500;
  width: 100%;
  padding: 13px 16px;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  outline: none;
  transition: all 0.15s ease;
}
.login-form input:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.reg-hint {
  margin: -4px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

.reg-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--text);
  padding: 8px 4px;
  cursor: pointer;
  user-select: none;
}
.reg-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* === Pflichtaufgaben (Kinder-Seite) === */
.assignments-box {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px 18px 14px;
  margin: 0 0 20px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}
.assignments-box h3 {
  margin: 0 0 6px;
  color: #92400e;
  font-size: 1.15rem;
}
.assignments-intro {
  margin: 0 0 12px;
  color: #92400e;
  font-size: 0.92rem;
}
.quest-progress {
  margin: 6px 0 12px;
}
.quest-progress.hidden { display: none; }
.quest-progress-bar {
  height: 10px;
  background: rgba(146, 64, 14, 0.15);
  border-radius: 6px;
  overflow: hidden;
}
.quest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #84cc16, #22c55e);
  border-radius: 6px;
  transition: width 0.5s ease;
  width: 0%;
}
.quest-progress-text {
  margin-top: 6px;
  font-size: 0.85rem;
  color: #92400e;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mastery-card {
  display: grid;
  grid-template-columns: 24px 1fr 22px;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px solid;
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.mastery-card:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.mastery-card-emoji { font-size: 1.05rem; }
.mastery-card-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mastery-card-state { font-size: 1.1rem; text-align: right; }
.mastery-card.mastery-perfect  { border-color: #fbbf24; background: #fef3c7; }
.mastery-card.mastery-mastered { border-color: #22c55e; background: #f0fdf4; }
.mastery-card.mastery-working  { border-color: #f59e0b; background: #fefce8; }
.mastery-card.mastery-none     { border-color: var(--primary-border); background: var(--surface-2); color: var(--text-muted); }

/* Wochen-Reflexions-Modal */
.refl-card { max-width: 520px; text-align: left; }
.refl-card h3 { text-align: left; }
.refl-card textarea {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--primary-border);
  background: var(--surface-2);
  font: inherit;
  color: var(--text);
  margin: 8px 0;
  resize: vertical;
}
.refl-goals-recall {
  background: var(--primary-soft);
  padding: 8px 12px;
  border-radius: 8px;
  margin: 8px 0;
  font-style: italic;
}
.refl-rating { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; justify-content: center; }
.refl-rating-btn {
  background: transparent;
  border: 2px solid var(--primary-border);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer; font-size: 1rem;
}
.refl-rating-btn.active { background: var(--accent-soft); border-color: var(--accent); }
.refl-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }

/* Eltern-View: Wochen-Reflexionen */
.weekly-refl-box {
  background: var(--surface);
  border: 1px solid var(--primary-border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.weekly-refl-box h3 { margin: 0 0 8px; font-size: 1.05rem; }
.weekly-refl-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.weekly-refl-item {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 12px;
}
.weekly-refl-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.weekly-refl-goals, .weekly-refl-review { font-size: 0.9rem; line-height: 1.5; margin-top: 4px; }

/* Subscription-Banner im Eltern-Bereich */
.sub-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}
.sub-banner.hidden { display: none; }
.sub-banner-msg { flex: 1; }
.sub-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sub-banner-trial  { background: #fef3c7; color: #78350f; border: 1px solid #fbbf24; }
.sub-banner-active { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }
.sub-banner-warn   { background: #ffe2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.sub-banner-block  { background: #ffe2e2; color: #7f1d1d; border: 2px solid #ef4444; }
.sub-banner a.primary-btn, .sub-banner a.small-btn { text-decoration: none; }

/* Statische Rechts-Seiten (Impressum, AGB, Datenschutz) */
.legal-page {
  max-width: 720px;
  margin: 40px auto;
  padding: 0 18px;
  font-family: inherit;
  line-height: 1.65;
  color: var(--text);
}
.legal-page h1 { margin-bottom: 8px; }
.legal-page h2 { margin: 24px 0 8px; font-size: 1.15rem; }
.legal-page h3 { margin: 18px 0 6px; font-size: 1.02rem; }
.legal-page p, .legal-page ul { margin: 8px 0; }
.legal-page ul { padding-left: 22px; }
.legal-page a { color: var(--primary-hover); }

/* App-Footer mit Rechts-Links */
.app-footer {
  margin: 30px auto 16px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.app-footer a {
  color: var(--text-muted);
  text-decoration: underline;
  margin: 0 8px;
}
.app-footer a:hover { color: var(--text); }

/* Cookie-Hinweis (für das nur essentielle Session-Cookie) */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #1f2937; color: #fff;
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  font-size: 0.88rem;
  z-index: 9000;
}
.cookie-bar a { color: #93c5fd; text-decoration: underline; }
.cookie-bar button {
  background: #fff; color: #1f2937;
  border: none; border-radius: 6px;
  padding: 6px 14px; cursor: pointer;
  font: inherit; font-weight: 600;
}

/* Eltern-Override: Fragen-Anzahl pro Topic */
.ptr-qcount {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem;
}
.ptr-qcount-inp {
  width: 64px;
  padding: 4px 8px;
  border: 1px solid var(--primary-border);
  border-radius: 6px;
  background: var(--surface);
  font: inherit;
  text-align: right;
}
.ptr-qcount-inp.saved-flash {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  transition: box-shadow 0.5s;
}
.ptr-duration-est {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-hover);
  white-space: nowrap;
}
.ptr-duration-est:empty { display: none; }

/* DSGVO-Block im Familie-Tab */
.family-dsgvo {
  margin-top: 24px;
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: 10px;
  border: 1px dashed var(--primary-border);
}
.family-dsgvo h4 { margin: 0 0 6px; font-size: 0.95rem; }
.family-dsgvo p { margin: 0 0 10px; }
.family-dsgvo-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* System-Admin-View */
.sysadmin-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 18px;
}
.sysadmin-subhead {
  margin: 18px 0 8px;
  font-size: 1rem;
  color: var(--text-muted);
}
.sysadmin-invites { margin-bottom: 8px; }
.sysadmin-families { overflow-x: auto; }
.sysadmin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.sysadmin-table th, .sysadmin-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--primary-border);
}
.sysadmin-table th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.82rem;
}
.sysadmin-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sysadmin-table tbody tr:hover { background: var(--surface-2); }

/* Identitäts-Badges */
.identities-list {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 6px 0 4px;
}
.identity-stamp {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: #fef3c7;
  border: 1.5px solid #fbbf24;
  border-radius: 999px;
  font-size: 0.85rem;
  color: #78350f;
  font-weight: 600;
}
.mastery-badge-card { text-align: center; }
.mastery-identity {
  margin: 8px 0 4px;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.mastery-identity-stamp {
  font-size: 1.5rem;
  font-weight: 700;
  color: #78350f;
  margin: 4px 0 14px;
  padding: 8px 16px;
  background: linear-gradient(90deg, #fef3c7, #fde68a);
  border: 2px solid #fbbf24;
  border-radius: 12px;
  display: inline-block;
}

/* Topic-Lock (Voraussetzung noch nicht gemeistert) */
.topic-card.topic-locked .topic-btn { opacity: 0.7; }
.topic-lock-tag {
  position: absolute;
  top: 6px; right: 6px;
  font-size: 0.95rem;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 999px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
}
.assignment-card { position: relative; }
.assignment-card .topic-btn {
  border-color: var(--accent) !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25) !important;
}
.assignment-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--accent);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.assignment-badge.spelling-badge {
  background: var(--primary);
}
/* Förder-Bericht im Eltern-Bereich */
.foerder-box {
  background: var(--surface);
  border: 1px solid var(--primary-border);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 18px;
}
.foerder-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.foerder-head h3 { margin: 0; font-size: 1.05rem; }
.foerder-content { margin-top: 12px; }
.foerder-content-current {
  background: var(--accent-soft, #fffbeb);
  border: 1px solid var(--accent-strong, #fcd34d);
  border-radius: 10px;
  padding: 12px 14px;
}
.foerder-current-head {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--primary-hover);
}
.foerder-title { margin: 0 0 6px; font-size: 1.1rem; color: var(--primary-hover); }
.foerder-summary { margin: 0 0 14px; font-style: italic; color: var(--text); }
.foerder-section { margin: 14px 0 8px; font-size: 0.95rem; color: var(--text-muted); }
.foerder-section-good { color: #166534; }
.foerder-good {
  background: #f0fdf4;
  border-left: 4px solid #86efac;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.foerder-good strong { color: #166534; }
.foerder-good p { margin: 4px 0 0; color: var(--text); }

/* Pomodoro-Pausen-Toast */
.break-toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: #fef3c7; color: #78350f;
  border: 1px solid #fbbf24; border-radius: 12px;
  padding: 10px 14px; max-width: 92vw;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  display: flex; align-items: center; gap: 10px;
  font-size: 0.9rem; z-index: 5000;
  transition: opacity 0.6s ease;
}
.break-toast.hidden { display: none; }
.break-toast.break-toast-fade { opacity: 0.6; }
.break-toast-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 1rem; color: #78350f; padding: 2px 6px;
}

.foerder-focus {
  background: var(--surface-2);
  border-left: 4px solid var(--primary-border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.foerder-focus-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.foerder-focus-head strong { font-size: 1rem; }
.foerder-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.foerder-badge.ok   { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.foerder-badge.nope { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.foerder-befund   { margin: 4px 0; }
.foerder-lehrplan,
.foerder-app,
.foerder-extra    { margin: 6px 0; font-size: 0.88rem; }
.foerder-luecken { padding-left: 18px; }
.foerder-luecken li { margin-bottom: 4px; }
.foerder-abschluss {
  margin: 14px 0 0;
  padding: 10px 14px;
  background: var(--primary-soft);
  border-radius: 8px;
  font-weight: 500;
}
.foerder-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 16px;
}
.foerder-meta {
  margin: 0 0 8px;
}
.foerder-archive {
  margin-top: 18px;
  border-top: 1px dashed var(--primary-border);
  padding-top: 12px;
}
.foerder-archive-head { margin: 0 0 8px; font-size: 0.95rem; }
.foerder-archive-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.foerder-archive-list li {
  display: flex; gap: 6px; align-items: center;
}
.foerder-archive-list li > button:first-child {
  flex: 1;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

/* Lesearbeit-Prelude: Sub-Seite mit "Aufsatz erzeugen"-Knopf */
.lesearbeit-prelude {
  text-align: center;
  padding: 32px 22px;
  margin: 18px auto;
  max-width: 520px;
  background: var(--primary-soft);
  border: 1px solid var(--primary-border);
  border-radius: 14px;
}
.lesearbeit-prelude.hidden { display: none; }
.lesearbeit-prelude h3 { margin: 0 0 10px; font-size: 1.3rem; }
.lesearbeit-prelude p { margin: 0 0 14px; }
.lesearbeit-prelude button {
  font-size: 1.05rem;
  padding: 12px 26px;
}
.lesearbeit-prelude .feedback.bad {
  color: #b91c1c;
}

/* Im Prelude-Modus die Frage-/Antwort-UI ausblenden, damit nur die
   Sub-Seite mit dem Knopf sichtbar ist. */
#game.lesearbeit-prelude-mode .question-area,
#game.lesearbeit-prelude-mode .progress,
#game.lesearbeit-prelude-mode .stats,
#game.lesearbeit-prelude-mode .report-btn,
#game.lesearbeit-prelude-mode .mascot,
#game.lesearbeit-prelude-mode .rocket-progress { display: none; }

/* === Raketen-Fortschritt rechts neben der Frage === */
#game { position: relative; }
.rocket-progress {
  position: absolute;
  right: 18px;
  top: 80px;
  bottom: 110px;
  width: 56px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 2;
}
.rocket-goal {
  font-size: 1.4rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
  animation: rocket-goal-wave 1.6s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes rocket-goal-wave {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}
.rocket-track {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  background: linear-gradient(180deg,
    var(--accent-soft) 0%,
    var(--mint-soft) 50%,
    var(--primary-soft) 100%);
  border-radius: 22px;
  border: 2px solid var(--primary-border);
  overflow: visible;
}
.rocket-steps {
  position: absolute;
  inset: 14px 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
/* Jede Frage = ein Planet (Farbe via --planet), den die Rakete ansteuert. */
.rocket-step {
  --planet: #94a3b8;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    rgba(255,255,255,0.85) 0%, var(--planet) 58%, rgba(0,0,0,0.25) 100%);
  border: none;
  opacity: 0.4;                 /* noch nicht besucht: blass */
  box-shadow: inset 0 0 3px rgba(0,0,0,0.25);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.rocket-step.done {
  opacity: 1;                   /* besucht: leuchtet */
}
.rocket-step.active {
  opacity: 1;
  transform: scale(1.7);
  box-shadow: inset 0 0 3px rgba(0,0,0,0.25),
              0 0 12px 2px var(--planet);
}
.rocket-flyer {
  position: absolute;
  left: 50%;
  bottom: calc(var(--p, 0) * 100%);
  font-size: 2rem;
  line-height: 1;
  transition: bottom 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.18));
  will-change: bottom, transform;
  /* Idle: leichtes Schweben */
  animation: rocket-idle 2.6s ease-in-out infinite;
  transform: translate(-50%, 40%);
}
@keyframes rocket-idle {
  0%, 100% { transform: translate(-50%, 40%) rotate(-3deg); }
  50%      { transform: translate(-50%, calc(40% - 6px)) rotate(3deg); }
}
/* Pop-Animation, wenn die Rakete eine Stufe nach oben springt */
.rocket-flyer.rocket-pop {
  animation: rocket-pop 0.7s ease-out,
             rocket-idle 2.6s ease-in-out 0.7s infinite;
}
@keyframes rocket-pop {
  0%   { transform: translate(-50%, 40%) scale(1) rotate(0deg); }
  20%  { transform: translate(-50%, 40%) scale(1.5) rotate(-12deg); }
  50%  { transform: translate(-50%, 30%) scale(1.2) rotate(10deg); }
  80%  { transform: translate(-50%, 40%) scale(1.05) rotate(-4deg); }
  100% { transform: translate(-50%, 40%) scale(1) rotate(0deg); }
}
/* Auf engen Karten unter dem Header weniger Platz — Rakete kleiner halten. */
@media (max-width: 720px) {
  .rocket-progress { right: 8px; width: 44px; top: 70px; bottom: 100px; }
  .rocket-goal { font-size: 1.1rem; }
  .rocket-flyer { font-size: 1.6rem; }
  .rocket-step { width: 8px; height: 8px; }
}
@media (max-width: 480px) {
  .rocket-progress { display: none; }
}

/* Lesearbeit: Geschichten-Block oberhalb der Fragen */
.lesearbeit-story {
  background: var(--surface-2);
  border: 1px solid var(--primary-border);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 auto 16px;
  max-width: 720px;
  max-height: 60vh;
  overflow-y: auto;
  line-height: 1.55;
  font-size: 1rem;
  color: var(--text);
  text-align: left;
}
.lesearbeit-story.hidden { display: none; }
.lesearbeit-story h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  color: var(--primary-hover);
  position: sticky;
  top: 0;
  background: var(--surface-2);
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--primary-border);
}
.lesearbeit-story p { margin: 0 0 8px; }

.parent-goal-input {
  width: 70px;
  padding: 6px 10px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  font: inherit;
  text-align: right;
}
.parent-danger-row {
  justify-content: flex-end;
  margin-top: 4px;
}
.parent-delete-btn {
  color: #b91c1c;
  border: 1px solid #fca5a5 !important;
  background: #fef2f2 !important;
}
.parent-delete-btn:hover {
  background: #fee2e2 !important;
  border-color: #f87171 !important;
}

/* Familie-Tab */
.family-info { margin-bottom: 14px; }
.family-info h4 { margin: 0 0 6px; }
.family-members { list-style: none; padding-left: 0; margin: 0; }
.family-members li { margin-bottom: 10px; }
.family-member {
  background: var(--surface);
  border: 1px solid var(--primary-border);
  border-radius: 12px;
  padding: 12px 14px;
}
.family-member.is-child { background: var(--primary-soft); }
.family-member-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.family-member-head .parent-delete-btn { margin-left: auto; }
.family-member-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.family-member-checkbox-row {
  cursor: pointer;
  user-select: none;
}
.family-member-checkbox-row input[type="checkbox"] {
  width: 18px; height: 18px;
}

/* === Spiele-Credits in Familie-Bereich === */
.family-credits-current {
  font-weight: 700;
  color: var(--primary-hover);
  background: var(--primary-soft);
  padding: 2px 10px;
  border-radius: 999px;
  min-width: 64px;
  text-align: center;
  display: inline-block;
}
.family-credits-step {
  min-width: 36px;
  font-weight: 700;
  font-size: 1.1rem;
}
.family-credits-delta {
  display: inline-block;
  min-width: 36px;
  text-align: center;
  font-weight: 700;
  color: var(--text-muted);
}
.family-credits-delta-pos { color: var(--success); }
.family-credits-delta-neg { color: var(--error); }
.family-credits-ok:disabled {
  opacity: 0.4; cursor: not-allowed;
}

/* === Kio-Tageslernzeit-Empfehlung (inline neben dem Input) === */
.family-goal-row {
  align-items: center;
  flex-wrap: wrap;
}
.family-rec-inline {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px;
  background: var(--primary-soft);
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--primary-hover);
}
.family-rec-value { color: var(--accent-strong); }
.family-rec-apply {
  padding: 2px 10px;
  font-size: 0.82rem;
}
.family-rec-refresh {
  width: 24px; height: 24px;
  padding: 0;
  font-size: 0.95rem;
  background: transparent;
  border: none;
  cursor: pointer;
}
.family-rec-rationale-line {
  margin: 4px 0 0;
  line-height: 1.4;
  padding-left: 4px;
}
.family-rec-rationale-line.family-rec-error {
  color: var(--error);
}

/* === Spielzeit-Pille im Kinder-Header === */
.game-credits-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 1px solid var(--accent-strong);
  background: var(--accent-soft);
  color: #78350f;
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.1s ease;
}
.game-credits-pill:hover { background: #fde68a; transform: scale(1.04); }
.game-credits-pill.game-credits-empty {
  opacity: 0.55;
  background: var(--surface-2);
  border-color: var(--primary-border);
  color: var(--text-muted);
}

/* === Spiele-Auswahl-Seite === */
.game-chooser-head {
  display: flex; gap: 12px; align-items: center; margin-bottom: 6px;
}
.game-chooser-head h2 { margin: 0; }
.game-chooser-info {
  margin: 12px 0 18px;
  color: var(--text);
  line-height: 1.5;
}
.game-chooser-info strong { color: var(--primary-hover); }
.game-chooser-empty {
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--accent-soft);
  border: 1px solid #fcd34d;
  border-radius: 10px;
  color: #78350f;
  line-height: 1.45;
}
/* Locked-State: Cards bleiben voll sichtbar, bekommen nur ein kleines
   Schloss-Overlay + dezente Saturation-Reduktion — Spiele sind klar
   als "vorhanden, aber Spielzeit fehlt" erkennbar. */
#game-chooser .game-card.game-card-locked {
  filter: saturate(0.6);
  position: relative;
}
#game-chooser .game-card.game-card-locked::after {
  content: "🔒";
  position: absolute;
  top: 6px; right: 8px;
  font-size: 1rem;
  opacity: 0.7;
}
#game-chooser .game-card.game-card-locked:hover {
  filter: saturate(0.8);
  transform: translateY(-2px);
}
@keyframes game-chooser-empty-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
  50% { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.18); }
}
.game-chooser-empty.game-chooser-empty-pulse {
  animation: game-chooser-empty-pulse 0.6s ease 2;
}
.parent-child-meta-hint {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #78350f;
  padding: 6px 10px;
  border-radius: 8px;
  margin: 8px 0 0;
}
.family-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.family-page-head,
.achievements-page-head {
  display: flex; gap: 12px; align-items: center; margin-bottom: 6px;
}
.family-page-head h2,
.achievements-page-head h2 { margin: 0; }
.family-invites h4 { margin: 14px 0 6px; }
.family-invite-list { list-style: none; padding: 0; margin: 0; }
.family-invite-list li {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 6px 10px; background: var(--surface-2); border-radius: 6px;
  margin-bottom: 4px;
}
.family-invite-list code {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 0.8rem;
  background: var(--surface);
  padding: 2px 6px; border-radius: 4px;
}

/* Übungszeit-Timer unten rechts */
.practice-timer {
  position: fixed;
  right: 16px;
  /* Über dem Hilfe-Chat-Button (62px breit + 16px Abstand). */
  bottom: 88px;
  z-index: 100;
  background: var(--surface);
  border: 2px solid var(--primary-border);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.practice-timer.hidden { display: none; }
.practice-timer .pt-icon { font-size: 1.05rem; }
.practice-timer .pt-state { font-size: 0.85rem; opacity: 0.8; }
.practice-timer.pt-working   { border-color: #16a34a; color: #166534; }
.practice-timer.pt-paused    { border-color: #f59e0b; color: #92400e; background: #fffbeb; }
.practice-timer.pt-refunding { border-color: #2563eb; color: #1e3a8a; background: #eff6ff; }
.practice-timer.pt-done      { border-color: #16a34a; color: #166534; background: #dcfce7; }
@media (max-width: 600px) {
  .practice-timer { right: 8px; bottom: 8px; padding: 6px 12px; font-size: 0.9rem; }
}

.spelling-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 12px auto 6px;
}
.spelling-buttons.hidden { display: none; }

.read-aloud-bar {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 8px auto 4px;
}
.read-aloud-btn {
  font-size: 0.82rem;
}
.spelling-replay-btn {
  /* Stand-alone Variante (z. B. wenn nur ein Button existiert) */
  display: inline-block;
}
.spelling-status {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 8px auto 4px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}
.spelling-status.hidden { display: none; }
.spelling-status.ss-new   { background: #e0f2fe; color: #075985; border: 1px solid #7dd3fc; }
.spelling-status.ss-reset { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.spelling-status.ss-1     { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.spelling-status.ss-2     { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.spelling-status.ss-3     { background: linear-gradient(135deg, #fef9c3, #fde68a); color: #713f12; border: 1px solid #f59e0b; }

.spelling-image {
  display: block;
  text-align: center;
  font-size: 5rem;
  line-height: 1;
  margin: 6px auto 12px;
  user-select: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
  animation: spelling-img-pop 0.25s ease-out;
}
.spelling-image.hidden { display: none; }
@keyframes spelling-img-pop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@media (max-width: 600px) {
  .spelling-image { font-size: 4rem; }
}

/* === Eltern-Bereich === */
.parent-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  border-bottom: 2px solid var(--primary-border);
  margin: 8px 0 18px;
  overflow-x: auto;
  /* Feste Mindesthöhe — verhindert iPad-Wackeln, wenn der horizontale
     Scrollbalken ein-/ausblendet oder bei Touch-Bounce. */
  min-height: 46px;
  /* iOS: weiches horizontales Scrollen, vertikales Bouncing unterdrücken. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-x;
  /* Scrollbar visuell verstecken — funktional bleibt das Scrollen. */
  scrollbar-width: none;
  /* Sticky: sobald der Tab-Bereich beim Scrollen am oberen Rand
     ankommt, bleibt er dort, der Content darunter scrollt weiter. */
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 5;
  padding-top: 4px;
}
.parent-tabs::-webkit-scrollbar { display: none; }

/* Auf Desktop-Breiten dürfen die Tabs in eine zweite Zeile umbrechen,
   damit alle Buttons erreichbar bleiben — auf Touch-Geräten bleibt es
   bei "nowrap" + horizontalem Wisch-Scroll, sonst kommt das iPad-
   Wackeln zurück. */
@media (min-width: 768px) {
  .parent-tabs {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    min-height: 0;
    touch-action: auto;
  }
}
.parent-tab {
  border: none;
  background: transparent;
  padding: 10px 12px;
  font: inherit;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  margin-bottom: -2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* iPad-Bereich (portrait + kleinere Geräte): kompakter, damit der
   horizontale Scrollbalken seltener nötig ist. */
@media (max-width: 1024px) {
  .parent-tab { padding: 8px 9px; font-size: 0.9rem; }
}
@media (max-width: 900px) {
  .parent-tab { padding: 7px 7px; font-size: 0.86rem; gap: 4px; }
}
@media (max-width: 600px) {
  .parent-tab { padding: 6px 6px; font-size: 0.82rem; }
}
.parent-tab:hover { background: var(--surface-2); color: var(--text); }
.parent-tab.active {
  color: var(--primary-hover);
  border-bottom-color: var(--primary-hover);
  background: var(--primary-soft);
}
.parent-tab-panel { animation: fade-in 0.15s ease-out; }

.parent-ai-count {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--text-muted);
  margin-left: 4px;
}
.parent-ai-count input[type="range"] {
  width: 120px;
  accent-color: var(--primary, #14b8a6);
}
.parent-ai-count #parent-ai-suggest-count-val {
  font-weight: 700; color: var(--text);
  min-width: 1.2em; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* KI-Vorschlag im Eltern-Pflichtaufgaben-Tab */
.parent-ai-suggest-box {
  margin-top: 14px;
  border: 1px solid var(--primary-border);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
}
.parent-ai-suggest-box .pai-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.parent-ai-suggest-box .pai-head h3 { margin: 0; font-size: 1rem; }
.parent-ai-suggest-list {
  display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
}
.parent-ai-suggest-list .pai-card {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--primary-border);
}
.parent-ai-suggest-list .pai-card.pai-accepted {
  background: var(--success-soft);
  border-color: var(--success);
}
.parent-ai-suggest-list .pai-emoji { font-size: 1.6rem; text-align: center; }
.parent-ai-suggest-list .pai-title { font-weight: 600; }
.parent-ai-suggest-list .pai-subject {
  font-weight: 500; font-size: 0.78rem; color: var(--text-muted);
  margin-left: 6px;
}
.parent-ai-suggest-list .pai-rationale {
  font-size: 0.85rem; color: var(--text-muted); margin-top: 2px;
}
.parent-ai-suggest-actions { margin-top: 10px; display: flex; justify-content: flex-end; }
@media (max-width: 600px) {
  .parent-ai-suggest-list .pai-card {
    grid-template-columns: 36px 1fr;
  }
  .parent-ai-suggest-list .pai-card .pai-accept {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

/* Verlauf-Tab */
.parent-history-list {
  display: flex; flex-direction: column; gap: 6px; margin-top: 12px;
}
.history-row {
  border: 1px solid var(--primary-border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.history-row .hr-head {
  display: grid;
  grid-template-columns: 150px 1fr 110px 90px 140px 24px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 0.9rem;
}
.history-row .hr-tempo {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  text-align: center;
  white-space: nowrap;
}
.history-row .hr-tempo-schnell { background: #d6f5dc; color: #166a2a; }
.history-row .hr-tempo-normal  { background: var(--surface-2); color: var(--text); }
.history-row .hr-tempo-langsam { background: #ffe2cc; color: #8a3a00; }
.history-row .hr-duration {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.history-row .hr-q-dur {
  margin-left: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.history-row .hr-q-retry-badge {
  margin-left: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  background: #fef3c7;
  color: #92400e;
  padding: 1px 8px;
  border-radius: 999px;
  vertical-align: middle;
}
.history-row .hr-q-retry { background: #fffbeb; }
.history-row .hr-head:hover { background: var(--surface-2); }
.history-row.open .hr-head { background: var(--primary-soft); }
.history-row.open .hr-toggle { transform: rotate(180deg); }
.history-row .hr-toggle { transition: transform 0.15s; color: var(--text-muted); }
.history-row .hr-date { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.history-row .hr-topic { font-weight: 600; }
.history-row .hr-score { font-variant-numeric: tabular-nums; }
.history-row .hr-detail {
  border-top: 1px solid var(--primary-border);
  padding: 8px 12px 12px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface-2);
}
.history-row .hr-q {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: 8px;
  border-left: 4px solid var(--primary-border);
}
.history-row .hr-q-good { border-left-color: var(--success); }
.history-row .hr-q-bad  { border-left-color: var(--error); }
/* Slip: richtig, aber erst im 2./3. Versuch — gelb als Mittelweg. */
.history-row .hr-q-slip {
  border-left-color: #f59e0b;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.08) 0%, var(--surface) 60%);
}
.history-row .hr-q-num {
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.history-row .hr-q-sym { font-size: 1.1rem; }
.history-row .hr-q-good .hr-q-sym { color: var(--success); }
.history-row .hr-q-bad  .hr-q-sym { color: var(--error); }
.history-row .hr-q-slip .hr-q-sym { color: #b45309; }
/* "+X mit Hilfe"-Badge im Score (gelb, dezent) */
.history-row .hr-slip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.18);
  color: #92400e;
  font-size: 0.8rem;
  font-weight: 600;
  vertical-align: middle;
}
.history-row .hr-q-text { font-weight: 500; margin-bottom: 4px; }
.history-row .hr-q-given,
.history-row .hr-q-exp {
  font-size: 0.85rem; color: var(--text-muted);
}
.history-row .hr-q-given .val,
.history-row .hr-q-exp .val { color: var(--text); font-weight: 600; }
/* Freitext: längere Antworten mit Zeilenumbruch sauber anzeigen. */
.history-row .hr-q-freetext .hr-q-given .val {
  display: block;
  white-space: pre-wrap;
  font-weight: 500;
  margin-top: 2px;
  padding: 6px 8px;
  background: var(--surface-2);
  border-radius: 6px;
  font-size: 0.9rem;
}
.history-row .hr-label { color: var(--text-muted); font-size: 0.78rem; }
@media (max-width: 600px) {
  /* Auf dem Handy stapeln wir die Kopfzeile vertikal — die Score-Spalte
     hatte sonst nur 24 px Breite (Toggle-Spalte) und brach zeichenweise um. */
  .history-row .hr-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 36px 10px 12px;  /* rechts Platz für Toggle */
    position: relative;
  }
  .history-row .hr-date,
  .history-row .hr-topic,
  .history-row .hr-score,
  .history-row .hr-duration,
  .history-row .hr-tempo {
    text-align: left;
    white-space: normal;
  }
  .history-row .hr-toggle {
    position: absolute;
    top: 10px;
    right: 12px;
  }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.parent-topics-filter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.parent-topics-controls {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.parent-topics-controls label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.parent-topics-controls label > span { font-weight: 500; }
.parent-topics-controls select {
  font: inherit;
  padding: 4px 8px;
  border: 1px solid var(--primary-border);
  border-radius: 6px;
  background: var(--surface);
}
.parent-topics-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.parent-topics-filter .chip {
  border: 1px solid var(--primary-border);
  background: var(--surface);
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
}
.parent-topics-filter .chip.active {
  background: var(--primary-soft);
  color: var(--primary-hover);
  border-color: var(--primary-hover);
}
.parent-topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.parent-topic-row {
  border: 1px solid var(--primary-border);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.parent-topic-row .ptr-head {
  display: flex; gap: 8px; align-items: center;
}
.parent-topic-row .ptr-emoji { font-size: 1.4rem; }
.parent-topic-row .ptr-title { font-weight: 600; }
.ptr-desc { margin: 0; font-size: 0.9rem; color: var(--text); }
.ptr-card-meta { margin: 2px 0 0; }
.td-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.td-head h3 { margin: 0; }
#topic-details-content .ptr-meta,
#topic-details-content .ptr-stats { margin-bottom: 10px; }
.parent-topic-row .ptr-meta {
  font-size: 0.78rem; color: var(--text-muted); display: flex; gap: 6px; flex-wrap: wrap;
}
.parent-topic-row .ptr-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600;
}
.parent-topic-row .ptr-badge.fixed   { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.parent-topic-row .ptr-badge.dynamic { background: #e0f2fe; color: #075985; border: 1px solid #7dd3fc; }
.parent-topic-row .ptr-actions {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px;
}
.parent-topic-row .ptr-stats {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.parent-topic-row .ptr-stat-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600;
  background: var(--primary-soft); color: var(--primary-hover);
  border: 1px solid var(--primary-border);
}
.parent-topic-row .ptr-stat-last {
  background: var(--surface-2); color: var(--text);
}
.parent-topic-row .ptr-stat-empty {
  background: transparent; color: var(--text-muted);
  border-style: dashed; font-weight: 500;
}
.parent-topic-row .ptr-stat-tempo-schnell { background: #d6f5dc; color: #166a2a; border-color: #b8e6c2; }
.parent-topic-row .ptr-stat-tempo-langsam { background: #ffe2cc; color: #8a3a00; border-color: #f5c79e; }

.parent-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.parent-game-card {
  border: 1px solid var(--primary-border);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
  font: inherit;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: transform 0.1s, background 0.1s;
}
.parent-game-card:hover { background: var(--primary-soft); transform: translateY(-2px); }
.parent-game-card .pg-emoji { font-size: 2rem; }
.parent-game-card .pg-name  { font-weight: 600; }

/* Listen-Editor */
.list-editor-head {
  display: flex; gap: 12px; align-items: center; margin-bottom: 6px;
}
.list-editor-head h2 { margin: 0; }
.list-editor-rows {
  display: flex; flex-direction: column; gap: 4px; margin: 12px 0;
  max-height: 60vh; overflow-y: auto;
  border: 1px solid var(--primary-border);
  border-radius: 8px; padding: 6px; background: var(--surface-2);
}
.list-editor-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); padding: 6px 10px; border-radius: 6px;
  border: 1px solid transparent;
}
.list-editor-row:hover { border-color: var(--primary-border); }
.list-editor-row .ler-idx {
  font-variant-numeric: tabular-nums; color: var(--text-muted);
  font-size: 0.78rem; min-width: 28px;
}
.list-editor-row .ler-summary {
  flex: 1; font-size: 0.88rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.list-editor-row .ler-actions { display: flex; gap: 4px; }
.list-editor-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}

/* Modal für Eintrag-Editor */
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.modal-content {
  position: relative; background: var(--surface);
  border-radius: 12px; padding: 20px; max-width: 540px; width: calc(100% - 32px);
  max-height: calc(100vh - 32px); overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.modal-content h3 { margin: 0 0 12px; }
.list-entry-fields { display: flex; flex-direction: column; gap: 10px; }
.list-entry-field { display: flex; flex-direction: column; gap: 4px; }
.list-entry-field label {
  font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
}
.list-entry-field input,
.list-entry-field textarea {
  font: inherit; padding: 8px 10px;
  border: 1px solid var(--primary-border); border-radius: 6px;
  background: var(--surface);
}
.list-entry-field textarea { min-height: 64px; font-family: ui-monospace, "SF Mono", monospace; font-size: 0.85rem; }
.list-entry-field .field-hint {
  font-size: 0.72rem; color: var(--text-muted);
}
.modal-buttons {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px;
}

.parent-intro {
  color: var(--text-muted);
  margin: 0 0 16px;
  font-size: 0.95rem;
}

/* Eigene Aufgaben — Eltern-Form */
.custom-task-form {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface-2);
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 18px;
}
.ct-row { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.ct-row > span { color: var(--text-muted); font-weight: 500; }
.ct-row input[type="text"], .ct-row textarea, .ct-row select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--primary-border);
  background: var(--surface);
  font: inherit;
  color: var(--text);
}
.ct-row textarea { resize: vertical; min-height: 80px; }
.ct-row-inline { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
.ct-row-inline input[type="text"] { width: 80px; }
.ct-row-inline select { flex: 1; min-width: 140px; }
.ct-row-sep { color: var(--text-muted); }
.ct-checkbox-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.9rem;
}
.ct-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ct-status { font-size: 0.85rem; }
.ct-status.good { color: var(--success); }
.ct-status.bad  { color: var(--error); }
.ct-photo-preview {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px;
}
.ct-photo-thumb {
  width: 92px; height: 92px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--primary-border);
}
.ct-list-head { margin: 18px 0 8px; }
.ct-list { display: flex; flex-direction: column; gap: 8px; }
.ct-top-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 14px;
}
.ct-item-desc {
  font-size: 0.88rem;
  line-height: 1.4;
  margin: 4px 0 6px;
}

/* === Personal-Trainer: Auswahl + Sub-Seiten === */
.pt-section-head { margin: 0 0 8px; font-size: 1.05rem; }
.pt-chooser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.pt-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 16px;
  border: 1px solid var(--primary-border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
}
.pt-choice:hover {
  transform: translateY(-2px);
  border-color: var(--accent-strong, #fcd34d);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.pt-choice-emoji { font-size: 1.8rem; }
.pt-choice-title { font-weight: 700; font-size: 1.02rem; color: var(--primary-hover); }
.pt-choice-desc { font-size: 0.88rem; color: var(--text-muted); }
.pt-subpage .pt-back { margin-bottom: 12px; }
.pt-tasks-block {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed var(--primary-border);
}

/* === Schulstoff-Kalibrierung === */
.calib-upload {
  background: var(--surface);
  border: 1px solid var(--primary-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.calib-upload .ct-label {
  display: block;
  margin: 6px 0 4px;
  font-weight: 600;
  font-size: 0.9rem;
}
.calib-upload input[type="file"] {
  display: block;
  margin-bottom: 8px;
}
.calib-upload textarea {
  width: 100%;
  font: inherit;
  padding: 8px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  margin-bottom: 10px;
}
.ct-image-preview {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 6px 0;
}
.ct-thumb {
  width: 100px; height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--primary-border);
}
.calib-list {
  display: flex; flex-direction: column; gap: 8px;
}
.calib-item {
  background: var(--surface);
  border: 1px solid var(--primary-border);
  border-radius: 10px;
  padding: 10px 12px;
}
.calib-head {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.calib-date {
  font-weight: 700;
  color: var(--primary-hover);
  font-size: 0.85rem;
}
.calib-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-hover);
  font-size: 0.75rem;
  font-weight: 600;
}
.calib-del { margin-left: auto; }
.calib-summary { margin: 4px 0 4px; line-height: 1.4; }
.calib-topics  { margin: 0; }
.calib-note    { margin: 4px 0 0; font-style: italic; }
.ct-item {
  background: var(--surface);
  border: 1px solid var(--primary-border);
  border-radius: 10px;
  padding: 10px 12px;
}
.ct-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-item-emoji { font-size: 1.2rem; }
.ct-item-desc {
  margin: 6px 0; font-size: 0.85rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ct-item-actions { display: flex; gap: 8px; }

/* Eltern-Vorschau-Modal für eigene Aufgaben */
.ct-preview-card {
  max-width: 680px; width: 100%;
  max-height: 85vh; display: flex; flex-direction: column;
  text-align: left;
}
.ct-preview-card h3 { text-align: left; margin-top: 0; }
.ct-preview-list {
  list-style: none; padding: 0; margin: 8px 0 12px;
  overflow-y: auto; flex: 1;
}
.ct-preview-list li {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  line-height: 1.45;
}
.ct-preview-q-head {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.ct-preview-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-preview-type {
  padding: 1px 7px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary-hover);
  font-weight: 600;
}
.ct-preview-q-text { font-weight: 600; margin: 2px 0; white-space: pre-wrap; }
.ct-preview-q-answer { font-size: 0.88rem; color: var(--text); }
.ct-preview-choices {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 6px;
}
.ct-choice-chip {
  font-size: 0.82rem;
  padding: 3px 9px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--primary-border);
  color: var(--text);
}
.ct-choice-chip.is-answer {
  background: #f0fdf4; border-color: #86efac; color: #166534; font-weight: 600;
}

/* Tabs im Preview-Modal */
.ct-preview-tabs { display: flex; gap: 6px; margin: 6px 0 4px; }
.ct-tab {
  background: var(--surface-2);
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.ct-tab.is-active {
  background: var(--primary-soft);
  color: var(--primary-hover);
  border-color: var(--primary-hover);
  font-weight: 600;
}
.ct-preview-body { overflow-y: auto; flex: 1; margin: 6px 0 12px; }
/* Body-Container ersetzt das einzelne <ol> als Scroll-Container */
.ct-preview-list { overflow: visible; }

/* Vokabel-Liste (2-spaltig) */
.ct-preview-table-wrap { width: 100%; }
.ct-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.ct-list-table th, .ct-list-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--primary-border);
}
.ct-list-table th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  position: sticky; top: 0;
}
.ct-list-num { color: var(--text-muted); width: 32px; font-variant-numeric: tabular-nums; }
.ct-list-q   { color: var(--text); }
.ct-list-a   { color: #166534; }
.ct-list-table tr:hover { background: var(--surface-2); }
.ct-list-q-inp, .ct-list-a-inp {
  width: 100%; box-sizing: border-box;
  padding: 4px 8px;
  border: 1px solid var(--primary-border);
  border-radius: 6px;
  background: var(--surface);
  font: inherit; font-size: 0.88rem;
  color: var(--text);
}
.ct-list-actions {
  display: flex; justify-content: center;
  margin-top: 10px;
}

/* Edit-Modus im Preview-Modal */
.ct-preview-foot { display: flex; gap: 10px; justify-content: flex-end; }
.ct-edit-wrap {
  display: flex; flex-direction: column; gap: 10px;
}
.ct-edit-row {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 12px;
}
.ct-edit-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.ct-edit-type {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--primary-border);
  background: var(--surface);
  font: inherit; font-size: 0.85rem;
}
.ct-edit-del { margin-left: auto; }
.ct-edit-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 4px 0 2px;
  font-weight: 600;
}
.ct-edit-text, .ct-edit-answer, .ct-edit-choices {
  width: 100%; box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--primary-border);
  border-radius: 6px;
  background: var(--surface);
  font: inherit; font-size: 0.9rem;
  color: var(--text);
}
.ct-edit-text { resize: vertical; }
.ct-add-q {
  align-self: center;
  margin-top: 6px;
}

.parent-child-select,
.parent-global-child {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  flex-wrap: wrap;
}
.parent-global-child {
  padding: 12px 14px;
  background: var(--primary-soft);
  border: 1px solid var(--primary-border);
  border-radius: 12px;
  margin-bottom: 14px;
}
.parent-global-child > select {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border: 2px solid var(--primary-border);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.parent-global-child > select:focus {
  outline: none;
  border-color: var(--primary);
}
.parent-global-child > #parent-child-meta {
  flex-basis: 100%;
  margin-top: 4px;
}
#parent-switch-to-child {
  white-space: nowrap;
  font-size: 0.85rem;
}

/* Eltern-Switch-Indikator: kleines Pille-Icon oben links, sichtbar
   nur wenn ein Eltern-Konto temporär in ein Kind hineinschaut. */
.switch-back-btn {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #f59e0b;
  color: #78350f;
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.switch-back-btn:hover, .switch-back-btn:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(245, 158, 11, 0.32);
  outline: none;
}
.switch-back-btn.hidden { display: none; }
.parent-label {
  font-weight: 600;
  color: var(--text);
}
.parent-child-select select {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border: 2px solid var(--primary-border);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.parent-child-select select:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
}
.parent-subhead {
  margin: 16px 0 8px;
  font-size: 1rem;
  color: var(--text-muted);
}
.parent-assignments {
  margin: 0 0 16px;
}
.parent-ai-briefing {
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.parent-ai-briefing .pab-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 0.85rem;
  color: #0c4a6e;
}
.parent-ai-briefing .pab-time {
  color: var(--text-muted);
  font-size: 0.78rem;
}
.parent-ai-briefing .pab-text {
  color: #0c4a6e;
  line-height: 1.4;
}
.parent-assignment-list li .pa-rationale {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
}
.parent-assignment-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.parent-assignment-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius);
}
.parent-assignment-list.done li {
  background: #ecfdf5;
  border-color: #a7f3d0;
  opacity: 0.85;
}
.parent-assignment-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  flex: 1;
  min-width: 0;
}
.pa-emoji { font-size: 1.3rem; }
.pa-title {
  font-weight: 600;
  color: var(--text);
}
.pa-subject {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 2px 8px;
  background: var(--surface);
  border-radius: 999px;
}
.pa-est {
  font-size: 0.8rem;
  color: var(--primary-hover);
  background: var(--primary-soft);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.pa-auto {
  font-size: 0.75rem;
  color: #78350f;
  background: var(--accent-soft);
  border: 1px solid #fbbf24;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 600;
}
.pa-qcount {
  font-size: 0.78rem;
  color: #1e40af;
  background: #dbeafe;
  border: 1px solid #93c5fd;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 600;
}
.parent-assignments-warning {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  color: #78350f;
  padding: 10px 14px;
  border-radius: 10px;
  margin: 0 0 12px;
  line-height: 1.45;
  font-size: 0.95rem;
}
.pa-done-pct {
  font-weight: 700;
  color: #047857;
  margin-left: auto;
}
.parent-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}
.small-btn.danger {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}
.small-btn.danger:hover {
  background: #fecaca;
  border-color: #f87171;
  color: #7f1d1d;
}

/* === Eltern: KI-Verbrauch === */
.ai-usage-box {
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--primary-soft);
  border: 1px solid var(--primary-border);
}
.ai-usage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ai-usage-head h3 { margin: 0; font-size: 1.05rem; }
.ai-usage-note {
  margin: 6px 0 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.ai-usage-note a { color: var(--primary-hover); }
.ai-usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.ai-usage-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius);
}
.ai-usage-cell.total {
  background: linear-gradient(135deg, var(--primary), var(--mint));
  border-color: transparent;
  color: white;
}
.ai-usage-cell.total .ai-usage-label,
.ai-usage-cell.total .ai-usage-sub { color: rgba(255,255,255,0.85); }
.ai-usage-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ai-usage-value {
  font-size: 1.3rem;
  font-weight: 700;
}
.ai-usage-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.ai-usage-subhead {
  margin: 16px 0 6px;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.ai-usage-breakdown {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-usage-breakdown li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius);
}
.ai-usage-breakdown .pa-title { flex: 1; }

/* === Eltern: Themen-Picker === */
.parent-picker-grid {
  display: block;
}
.parent-picker-search {
  display: block;
  margin: 0 0 14px;
}
.parent-picker-search input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--primary-border);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  font-size: 1rem;
}
.parent-picker-search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.parent-picker-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
}
.picker-filter-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-right: 4px;
}
.picker-filter-chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 2px solid var(--primary-border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}
@media (hover: hover) {
  .picker-filter-chip:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
  }
}
.picker-filter-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.picker-subject-head,
.picker-week-head {
  margin: 18px 0 10px;
  font-size: 1rem;
  color: var(--text-muted);
}
.picker-subject-head:first-child,
.picker-week-head:first-child { margin-top: 0; }
.picker-week-head {
  border-left: 4px solid var(--primary);
  padding: 4px 0 4px 10px;
  font-weight: 700;
  color: var(--text);
}
.picker-subject-tag {
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 2px 10px;
  background: var(--surface-2);
  border-radius: 999px;
  align-self: center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.picker-subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.picker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 14px 10px;
  background: var(--surface);
  border: 2px solid var(--primary-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
}
@media (hover: hover) {
  .picker-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
    transform: translateY(-2px);
  }
}
.picker-card-emoji {
  font-size: 1.8rem;
  line-height: 1;
}
.picker-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  word-break: break-word;
  hyphens: auto;
}
.picker-card-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  word-break: break-word;
  hyphens: auto;
}

/* === Profil-Bildschirm === */
.profile-intro {
  text-align: center;
  font-size: 1rem;
  margin: 0 0 22px;
  color: var(--text-muted);
}

.grade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.grade-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 8px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.grade-btn:hover {
  transform: translateY(-2px);
  border-color: var(--primary-border);
  background: var(--primary-soft);
}
.grade-btn.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.grade-num {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}
.grade-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 600;
}

.profile-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
/* === Menü-Layout: Sidebar links, Themen rechts === */
.menu-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

/* Solange Pflichtaufgaben offen sind: Kind sieht NUR die Tagesprogramm-
   Box. Sidebar und alle anderen Themen-Sektionen sind versteckt. */
#menu.only-assignments .sidebar,
#menu.only-assignments #section-title,
#menu.only-assignments #topic-grid {
  display: none;
}
#menu.only-assignments .menu-layout {
  grid-template-columns: 1fr;
}
#menu.only-assignments .assignments-box::after {
  content: "🔒 Wenn du alle Pflichtaufgaben geschafft hast, kannst du auch die anderen Themen üben.";
  display: block;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px dashed var(--primary-border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 12px;
  border-right: 1.5px solid var(--border);
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: transparent;
  color: var(--text);
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}
.sidebar-item:hover {
  background: var(--primary-soft);
  color: var(--primary-hover);
}
.sidebar-item.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}
.sidebar-item.active:hover {
  background: var(--primary-hover);
  color: white;
}
.sidebar-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}
.sidebar-label { flex: 1; }

.main-section {
  min-width: 0; /* damit Grid-Item bei langem Inhalt nicht über die Sidebar wächst */
}

.section-title {
  margin: 0 0 16px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-hover);
  text-align: left;
}

/* Mobile: Sidebar horizontal scrollend oberhalb */
@media (max-width: 720px) {
  .menu-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .sidebar {
    flex-direction: row;
    overflow-x: auto;
    padding-right: 0;
    padding-bottom: 8px;
    border-right: none;
    border-bottom: 1.5px solid var(--border);
    -webkit-overflow-scrolling: touch;
  }
  .sidebar-item {
    flex-shrink: 0;
    width: auto;
    padding: 9px 14px;
    font-size: 0.9rem;
  }
  .section-title { font-size: 1.1rem; }
}

/* === Themen-Auswahl === */
.subject-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  justify-content: center;
}

.subject-tab {
  padding: 8px 18px;
  background: var(--surface);
  color: var(--text-muted);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.subject-tab:hover  { color: var(--text); border-color: var(--primary-border); }
.subject-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.muted {
  text-align: center;
  color: var(--text-muted);
  padding: 24px;
  font-style: italic;
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

/* Wochen-Ansicht: vertikale Stapelung von Header + Sub-Grid */
.topic-grid.by-week-mode {
  display: block;
}
.week-header {
  margin: 24px 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--border);
}
.week-header:first-child {
  margin-top: 0;
}
.week-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.topic-card {
  position: relative;
  display: flex;
}

/* Kategorie-Drill-Down (Lehrplan-Baum): Zurück-Knopf + Titel-Zeile
   über den Unter-Themen-Kacheln. */
.category-drill-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}
.category-drill-title {
  margin: 0;
  font-size: 1.1rem;
}
.category-back-btn { font-size: 0.85rem; }

.topic-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 14px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  text-align: center;
  width: 100%;
}

.pin-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  padding: 0;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 50%;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  opacity: 0.5;
  filter: grayscale(80%);
  z-index: 2;
}
.pin-btn:hover {
  opacity: 1;
  background: var(--surface);
  border-color: var(--primary-border);
  transform: scale(1.08);
}
.pin-btn.pinned {
  opacity: 1;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-color: #f59e0b;
  filter: none;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}

/* Snake-Indikator unten rechts in jeder Kachel */
.snake-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 1.1rem;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.snake-badge.used {
  opacity: 0.45;
  filter: grayscale(70%);
  position: absolute;
}
/* Diagonaler Strich über das durchgestrichene Symbol */
.snake-badge.used::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      transparent calc(50% - 1.2px),
      var(--error) calc(50% - 1.2px),
      var(--error) calc(50% + 1.2px),
      transparent calc(50% + 1.2px));
  pointer-events: none;
}
.topic-btn:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.topic-emoji { font-size: 2rem; }
.topic-title { font-weight: 700; font-size: 1.05rem; color: var(--text); }
.topic-desc  { color: var(--text-muted); font-size: 0.85rem; font-weight: 500; }

.topic-stats {
  position: absolute;
  bottom: 6px;
  left: 6px;
  z-index: 2;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary-hover);
  background: var(--primary-soft);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  pointer-events: none;
}

/* === Resume-Box === */
.resume {
  background: linear-gradient(135deg, var(--primary-soft), #fef3c7);
  border: 2px dashed var(--primary);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 18px;
}
.resume h3 { margin: 0 0 6px; color: var(--primary-hover); }
.resume p  { margin: 0 0 12px; color: var(--text); font-weight: 500; }
.resume-buttons { display: flex; gap: 10px; flex-wrap: wrap; }

/* === Spielbildschirm === */
.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.stats { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.stat  { color: var(--text-muted); font-size: 0.9rem; font-weight: 600; }
.stat strong { color: var(--text); font-weight: 700; }
.stars { font-size: 1.2rem; }

.progress {
  height: 8px;
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 28px;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: var(--radius-pill);
  transition: width 0.4s ease;
}

.question-area {
  text-align: center;
  /* Platz für die Raketen-Spur rechts (56 px Breite + 18 px Abstand + 8 px Puffer). */
  padding-right: 82px;
}
.lesearbeit-story,
.lesearbeit-prelude { padding-right: 82px; }
@media (max-width: 720px) {
  .question-area,
  .lesearbeit-story,
  .lesearbeit-prelude { padding-right: 60px; }
}
@media (max-width: 480px) {
  .question-area,
  .lesearbeit-story,
  .lesearbeit-prelude { padding-right: 0; } /* Rakete ist auf Handy ausgeblendet */
}

.question {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 700;
  margin: 16px 0 24px;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.25;
  /* Zeilenumbrueche in Aufgabentexten respektieren (z. B. Aufgabenfamilien) */
  white-space: pre-line;
}

.answer-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

#answer {
  font-family: inherit;
  font-size: 1.8rem;
  font-weight: 700;
  width: 160px;
  text-align: center;
  padding: 12px;
  background: var(--surface-2);
  border: 2.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  outline: none;
  transition: all 0.15s ease;
}
#answer.answer-text {
  /* Genug Platz für längere Wörter/Sätze auch auf Handy-Viewports:
     unten 100% (minus eines Rests fürs Layout), oben gedeckelt. */
  width: min(440px, calc(100% - 12px));
  max-width: 100%;
  font-size: 1.4rem;
  letter-spacing: 0.3px;
  /* Beim Tippen ist die Mitte zu zentrieren wenig hilfreich — der
     Cursor wandert sonst nach rechts und das Wortende verschwindet.
     Links-bündig macht Schreiben sichtbar. */
  text-align: left;
}
/* Auf kleinen Handys etwas kleinere Schrift und volle Breite, damit
   auch ein Satz mit 25+ Zeichen lesbar bleibt. */
@media (max-width: 480px) {
  #answer.answer-text {
    width: 100%;
    font-size: 1.2rem;
    padding: 10px;
  }
}
#answer:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
/* Zahleneingabe-Pfeile entfernen */
#answer::-webkit-outer-spin-button,
#answer::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#answer { -moz-appearance: textfield; }

/* === Satz des Tages: anklickbare Wörter mit Markierung === */
.sentence-display {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 6px 8px;
  margin: 14px auto 24px;
  padding: 18px 14px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  max-width: 620px;
}

.word-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 4.5em;
  justify-content: flex-end;
}

.word-mark {
  font-size: 1.7rem;
  line-height: 1;
  height: 1.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-weight: 700;
  user-select: none;
}

.word-wrap.has-mark .word-mark {
  animation: pop-mark 0.35s ease;
}
@keyframes pop-mark {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.word-btn {
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 600;
  padding: 8px 14px;
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}
@media (hover: hover) {
  .word-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    background: var(--primary-soft);
    box-shadow: var(--shadow-sm);
  }
}
.word-btn:disabled { cursor: default; }
.word-btn.correct {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
}
.word-btn.wrong {
  background: var(--error-soft);
  border-color: var(--error);
  color: var(--error);
}

.word-static {
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 600;
  padding: 8px 12px;
  color: var(--text);
  user-select: none;
  line-height: 1.2;
}

/* === Multiple-Choice === */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  max-width: 560px;
  margin: 12px auto 0;
}

/* Lange Antworten (z. B. IFRS-Definitionen) brauchen mehr Platz und
   müssen Wörter umbrechen — sonst rinnt der Text aus der Box. */
.choice-grid.choice-grid-long {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 760px;
}
.choice-grid.choice-grid-long .choice-btn {
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 14px;
  min-height: 0;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* Noch längere Antworten: einspaltig, damit zwei Zeilen reichen */
.choice-grid.choice-grid-xlong {
  grid-template-columns: minmax(0, 1fr);
  max-width: 720px;
}
.choice-grid.choice-grid-xlong .choice-btn {
  font-size: 0.95rem;
  padding: 12px 14px;
}

.choice-btn {
  padding: 18px 14px;
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 60px;
}
@media (hover: hover) {
  .choice-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    background: var(--primary-soft);
    box-shadow: var(--shadow-md);
  }
}
.choice-btn:active:not(:disabled) { transform: translateY(0); }
.choice-btn:disabled  { cursor: default; opacity: 0.7; }
.choice-btn.correct {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
  opacity: 1;
}
.choice-btn.wrong {
  background: var(--error-soft);
  border-color: var(--error);
  color: var(--error);
  opacity: 1;
}

/* === Feedback === */
.feedback {
  min-height: 1.6em;
  margin-top: 22px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-muted);
}
.feedback.good { color: var(--success); }
.feedback.bad  { color: var(--error); }

/* Dual-Coding-Spickzettel */
.visual-hint { margin: 8px auto 16px; text-align: center; }
.visual-hint-toggle {
  background: var(--primary-soft); color: var(--primary-hover);
  border: 1px solid var(--primary-border);
  border-radius: 999px; padding: 4px 12px;
  font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.visual-hint-body {
  margin: 8px auto 0; max-width: 32em;
  background: #fef3c7; color: #78350f;
  border-radius: 8px; padding: 10px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem; white-space: pre-wrap; text-align: left;
}
.visual-hint-body.hidden { display: none; }

/* Worked-Example-Aufklappbox */
.worked-example {
  margin: 10px 0 14px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 6px 12px;
  text-align: left;
}
.worked-example summary {
  cursor: pointer; font-weight: 600; color: #0369a1;
  padding: 4px 0;
}
.worked-example-body {
  margin: 8px 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem; white-space: pre-wrap;
  color: #0c4a6e;
}

/* Wochenkurve im Eltern-Verlauf */
.week-chart {
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid var(--primary-border);
  border-radius: 10px;
  background: var(--surface);
}
.week-chart-head {
  font-size: 0.85rem; font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.week-bars {
  display: flex; gap: 8px;
  align-items: flex-end;
  height: 100px;
  position: relative;
}
.week-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-hover) 100%);
  border-radius: 6px 6px 0 0;
  position: relative;
  min-height: 4px;
  display: flex; flex-direction: column;
  justify-content: flex-end;
}
.week-bar.week-bar-below-goal {
  background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
}
.week-goal-line {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 2px dashed #f59e0b;
  pointer-events: none;
  z-index: 1;
}
.week-bar-val {
  position: absolute; top: -16px; left: 0; right: 0;
  text-align: center;
  font-size: 0.7rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.week-bar-label {
  text-align: center;
  font-size: 0.7rem; color: var(--text);
  background: transparent;
  margin-bottom: -16px;
}

.mix-source-badge {
  display: inline-block;
  margin: 0 auto 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-hover);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.feedback-rule {
  margin-top: 10px;
  padding: 8px 12px;
  background: #fef3c7;
  color: #78350f;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}

/* Metakognitions- / Aktivierungs-Modal */
.prediction-modal {
  position: fixed; inset: 0; z-index: 6000;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.prediction-card {
  background: var(--surface); border-radius: 14px;
  padding: 22px 24px; max-width: 420px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  text-align: center;
}
.prediction-card h3 { margin: 0 0 10px; }
.activation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.activation-tts {
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--text);
}
.activation-tts:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.prediction-result-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 6px;
}
.prediction-card p  { margin: 0 0 12px; color: var(--text); line-height: 1.5; }
.prediction-buttons {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 10px;
}
.prediction-btn {
  padding: 10px 18px; border-radius: 999px;
  border: 2px solid var(--primary-border);
  background: var(--surface-2); color: var(--text);
  font-weight: 600; font-size: 1rem; cursor: pointer;
}
.prediction-btn:hover { background: var(--primary-soft); }
.prediction-skip {
  border-style: dashed; font-weight: 500; color: var(--text-muted);
}
.activation-hint {
  background: #fef9c3; color: #713f12;
  padding: 8px 12px; border-radius: 8px;
  font-size: 0.85rem; text-align: left;
  margin: 6px 0 14px !important;
}

/* === Freitext-Aufgabe === */
.freetext-input {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  max-width: 580px;
  margin: 12px auto 0;
}
.freetext-input.hidden { display: none; }

#freetext-area {
  width: 100%;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 500;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  outline: none;
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
  transition: all 0.15s ease;
}
#freetext-area:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
#freetext-area:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.freetext-hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

#freetext-submit { align-self: center; }

/* Freitext-Feedback */
.freetext-feedback {
  max-width: 580px;
  margin: 18px auto 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
  box-shadow: var(--shadow-sm);
  animation: hint-slide-in 0.3s ease;
}
.freetext-feedback.hidden { display: none; }

.ft-loading, .ft-error {
  text-align: center;
  font-weight: 600;
  color: var(--text-muted);
  padding: 14px 0;
}
.ft-error { color: var(--error); }

.ft-rating {
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}
.ft-rating.ft-excellent {
  background: var(--success-soft);
  color: var(--success);
}
.ft-rating.ft-good {
  background: var(--primary-soft);
  color: var(--primary-hover);
}
.ft-rating.ft-needswork {
  background: var(--accent-soft);
  color: #b45309;
}

.ft-encouragement {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.5;
}

.ft-section {
  margin-bottom: 14px;
}
.ft-section h4 {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ft-section ul {
  margin: 0;
  padding-left: 22px;
  font-weight: 500;
}
.ft-section li {
  padding: 2px 0;
}

.ft-example .ft-example-text {
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
}

#ft-continue, #ft-retry {
  display: block;
  margin: 18px auto 0;
}

/* === KI-Tipp bei falscher Antwort === */
.hint-box {
  margin: 18px auto 0;
  max-width: 540px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--primary-soft), #fef3c7);
  border: 1.5px solid var(--primary-border);
  border-radius: var(--radius);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  animation: hint-slide-in 0.3s ease;
}
@keyframes hint-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hint-box.hidden { display: none; }

#hint-content {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
}

.hint-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  line-height: 1;
}

.hint-text {
  flex: 1;
}

.hint-loading-text {
  color: var(--text-muted);
  font-weight: 600;
}

.hint-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

#hint-continue {
  align-self: center;
  font-size: 1rem;
  padding: 10px 22px;
}
#hint-continue.hidden { display: none; }

.hint-ask-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
  width: 100%;
  justify-content: center;
}

/* === Animationen === */
@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.pop { animation: pop 0.32s ease; }

@keyframes shake {
  0%, 100%  { transform: translateX(0); }
  20%, 60%  { transform: translateX(-7px); }
  40%, 80%  { transform: translateX(7px); }
}
.shake { animation: shake 0.4s ease; }

/* === Endbildschirm === */
#end-summary {
  text-align: center;
  font-size: 1.1rem;
  margin: 18px 0;
  color: var(--text-muted);
  font-weight: 500;
}
#end-summary strong { color: var(--text); font-weight: 700; }

.end-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

/* === Highscores & Verlauf === */
.highscore, .history {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-top: 18px;
}

.highscore h3, .history h3 { color: var(--primary); }

.highscore ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.highscore li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  font-weight: 500;
}
.highscore li:last-child { border-bottom: none; }
.highscore li.empty { color: var(--text-muted); font-style: italic; }

.history-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.history-count {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.9rem;
}

.history ul {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
}
.history li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.history li:last-child { border-bottom: none; }
.history li.empty {
  color: var(--text-muted);
  font-style: italic;
  border-bottom: none;
}

.hist-line1 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.hist-line2 {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 3px;
  font-weight: 500;
}

/* === Footer === */
footer {
  text-align: center;
  color: var(--text-muted);
  margin-top: 32px;
  font-size: 0.9rem;
  font-weight: 500;
}

/* === Streak === */
.streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: linear-gradient(135deg, #f97316, #f59e0b);
  color: white;
  border-radius: var(--radius-pill);
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  animation: streak-pulse 0.6s ease;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}

@keyframes streak-pulse {
  0%   { transform: scale(0.7); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* === Maskottchen === */
.mascot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto 18px;
  max-width: 520px;
  padding: 10px 16px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
}

.mascot-emoji {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
}

.mascot-bubble {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

/* === Sound-Toggle === */
.icon-btn {
  font-family: inherit;
  font-size: 1rem;
  padding: 6px 10px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}
.icon-btn:hover { background: var(--primary-soft); border-color: var(--primary-border); }

/* === Konfetti === */
.confetti {
  position: fixed;
  top: -2rem;
  font-size: 1.4rem;
  animation: confetti-fall linear forwards;
  pointer-events: none;
  z-index: 9999;
  user-select: none;
}

/* === Variierte Erfolgs-Fly-Animationen === */
.correct-fly {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.2));
}
.correct-fly-emoji { font-size: 4rem; line-height: 1; }
.correct-fly-text {
  font-size: 1rem;
  background: var(--surface);
  padding: 4px 14px;
  border-radius: 999px;
  color: var(--primary-hover);
  border: 1px solid var(--primary-border);
}
.correct-fly-rocket {
  left: -90px; top: 40%;
  animation: fly-across-up 1.6s ease-out forwards;
}
.correct-fly-fox {
  right: -120px; top: 40%;
  animation: fly-across-from-right 1.6s ease-out forwards;
}
.correct-fly-thumbs {
  left: 50%; top: 30%;
  transform: translate(-50%, -50%) scale(0);
  animation: pop-and-shrink 1.4s ease-out forwards;
}
.correct-fly-trophy {
  left: 50%; top: 30%;
  transform: translate(-50%, -50%) scale(0) rotate(-30deg);
  animation: trophy-spin-pop 1.5s ease-out forwards;
}
.correct-fly-star {
  left: 50%; top: 35%;
  transform: translate(-50%, -50%) scale(0.2);
  animation: star-burst 1.6s ease-out forwards;
}
.correct-fly-balloon {
  left: 50%; bottom: -100px;
  transform: translateX(-50%);
  animation: balloon-rise 1.8s ease-out forwards;
}
@keyframes fly-across-up {
  0%   { left: -90px;  top: 60%; transform: rotate(-15deg) scale(0.8); opacity: 0; }
  20%  { opacity: 1; }
  100% { left: 110vw;  top: 20%; transform: rotate(-25deg) scale(1.2); opacity: 0.6; }
}
@keyframes fly-across-from-right {
  0%   { right: -120px; top: 60%; transform: scale(0.8); opacity: 0; }
  20%  { opacity: 1; }
  100% { right: 110vw;  top: 20%; transform: scale(1.2); opacity: 0.6; }
}
@keyframes pop-and-shrink {
  0%   { transform: translate(-50%, -50%) scale(0)   rotate(-30deg); opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(1.5) rotate(10deg);  opacity: 1; }
  60%  { transform: translate(-50%, -50%) scale(1.1) rotate(-5deg);  opacity: 1; }
  100% { transform: translate(-50%, -80%) scale(0.6) rotate(0deg);   opacity: 0; }
}
@keyframes trophy-spin-pop {
  0%   { transform: translate(-50%, -50%) scale(0)   rotate(-180deg); opacity: 0; }
  40%  { transform: translate(-50%, -50%) scale(1.4) rotate(20deg);   opacity: 1; }
  70%  { transform: translate(-50%, -50%) scale(1.1) rotate(0deg);    opacity: 1; }
  100% { transform: translate(-50%, -80%) scale(0.8) rotate(0deg);    opacity: 0; }
}
@keyframes star-burst {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}
@keyframes balloon-rise {
  0%   { bottom: -100px; opacity: 0; }
  20%  { opacity: 1; }
  100% { bottom: 110vh;  opacity: 0; }
}

@keyframes confetti-fall {
  0%   { transform: translateY(0)    rotate(0deg);    opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* === Avatar === */
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 1.4rem;
  background: var(--primary-soft);
  border: 1.5px solid var(--primary-border);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}
.user-avatar:hover { background: var(--primary); color: white; transform: scale(1.05); }

.profile-subhead {
  text-align: center;
  margin: 24px 0 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-muted);
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.interests-block {
  margin: 8px 0 18px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.interests-block .profile-subhead {
  margin-top: 0;
}
.interests-block .interests-hint {
  margin: 0 0 12px;
  line-height: 1.45;
}
.interests-block textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  box-sizing: border-box;
}
.interests-block textarea:focus {
  outline: none;
  border-color: var(--primary);
}
.interests-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.interests-block .feedback {
  margin: 6px 0 0;
  min-height: 1.2em;
}

.avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  font-size: 1.8rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s ease;
}
.avatar-btn:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  transform: translateY(-2px);
}
.avatar-btn.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* === Achievements === */
.achievements {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-top: 18px;
}
.achievements h3 { color: var(--primary); margin: 0; }
.muted-inline { color: var(--text-muted); font-weight: 500; font-size: 0.9rem; margin-left: 6px; }
.achievements-head { margin-bottom: 14px; }

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}

.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.15s ease;
  cursor: help;
}
.badge.unlocked {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--surface), var(--accent-soft));
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.12);
}
.badge.locked  { opacity: 0.5; }
.badge:hover   { transform: translateY(-2px); }

.badge-emoji {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 6px;
}
.badge-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.badge-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 4px;
  line-height: 1.3;
}

/* === Wochen-Chart === */
.weekchart {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-top: 18px;
}
.weekchart h3 { color: var(--primary); }

#weekchart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  height: 140px;
  align-items: end;
}

.weekbar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 4px;
}
.weekbar-value {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  min-height: 1em;
}
.weekbar {
  width: 100%;
  max-width: 32px;
  background: linear-gradient(180deg, var(--primary), var(--mint));
  border-radius: 8px 8px 4px 4px;
  transition: all 0.3s ease;
  min-height: 4px;
}
.weekbar-col.today .weekbar {
  background: linear-gradient(180deg, var(--accent), #f97316);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}
.weekbar-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}
.weekbar-col.today .weekbar-label { color: var(--accent); }

/* === Badge-Toast === */
.badge-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  background: linear-gradient(135deg, var(--accent), #f97316);
  color: white;
  padding: 14px 22px;
  border-radius: var(--radius);
  box-shadow: 0 12px 36px rgba(245, 158, 11, 0.4);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 10000;
  pointer-events: none;
  max-width: 92vw;
}
.badge-toast.toast-in { animation: toast-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

@keyframes toast-slide-in {
  0%   { transform: translateX(-50%) translateY(-120%); }
  100% { transform: translateX(-50%) translateY(0); }
}

.badge-toast-emoji { font-size: 2.4rem; line-height: 1; }
.badge-toast-title { font-size: 0.78rem; opacity: 0.9; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.badge-toast-name  { font-size: 1.15rem; font-weight: 700; }

/* === KI-Lernbericht: Karte + Modal === */
.ai-report-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, var(--primary-soft), #fef3c7);
  border: 1.5px solid var(--primary-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.ai-report-text { flex: 1; min-width: 200px; }
.ai-report-text h3 { margin: 0 0 4px; color: var(--primary-hover); }
.ai-report-text p { margin: 0; color: var(--text-muted); font-size: 0.9rem; font-weight: 500; }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  z-index: 100;
  overflow-y: auto;
  backdrop-filter: blur(2px);
}
.modal.hidden { display: none; }
.modal-content {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 32px 28px 24px;
  max-width: 600px;
  width: 100%;
  position: relative;
  margin-top: 40px;
  box-shadow: var(--shadow-lg);
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 1.8rem;
  font-family: inherit;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
  border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }

.report-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: var(--radius);
}
.report-tab {
  flex: 1;
  padding: 9px 14px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.report-tab:hover { color: var(--text); }
.report-tab.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.report-title {
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
}
.report-summary {
  text-align: center;
  margin: 0 0 20px;
  color: var(--text);
  font-weight: 500;
}
.report-section {
  margin-bottom: 16px;
}
.report-section h4 {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.report-section ul {
  margin: 0;
  padding-left: 22px;
}
.report-section li {
  padding: 3px 0;
  font-weight: 500;
}
.report-tip {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  margin-bottom: 12px;
}
.report-encouragement {
  background: var(--primary-soft);
  border-left: 3px solid var(--primary);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-style: italic;
  text-align: center;
  font-weight: 600;
  color: var(--primary-hover);
}
.report-meta {
  text-align: right;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 14px;
  font-weight: 500;
}
.report-actions {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.report-loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-weight: 500;
}
.report-spinner {
  display: inline-block;
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.report-error {
  background: var(--error-soft);
  border-left: 3px solid var(--error);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  color: var(--error);
  font-weight: 600;
}

/* === Snake-Belohnung & Mini-Spiel === */
.snake-reward {
  margin: 16px auto 4px;
  padding: 16px 18px;
  max-width: 460px;
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  border: 2px dashed var(--success);
  border-radius: var(--radius);
  text-align: center;
  animation: hint-slide-in 0.4s ease;
}
.snake-reward-text {
  margin: 0 0 12px;
  font-weight: 700;
  color: #065f46;
}

.snake-reward.snake-reward-blocked {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: #d97706;
}
.snake-reward.snake-reward-blocked .snake-reward-text {
  color: #92400e;
  margin: 0;
}

#snake {
  text-align: center;
}
.snake-header {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 14px;
  font-size: 1.1rem;
  font-weight: 700;
}
.snake-stat strong { color: var(--primary); }

#snake-canvas {
  display: block;
  margin: 0 auto;
  background: var(--surface-2);
  border: 3px solid #c7d2fe;
  border-radius: 16px;
  max-width: 100%;
  height: auto;
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.18), inset 0 0 0 1px rgba(255,255,255,0.4);
  touch-action: none;
}

.snake-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
}
.snake-row {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.snake-btn {
  width: 62px;
  height: 62px;
  font-size: 1.7rem;
  font-weight: 700;
  background: linear-gradient(160deg, #818cf8, #4f46e5);
  color: white;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 0 #3730a3, 0 6px 12px rgba(55, 48, 163, 0.35);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
  touch-action: manipulation;
}
.snake-btn:active {
  filter: brightness(1.08);
  transform: translateY(3px);
  box-shadow: 0 1px 0 #3730a3, 0 2px 6px rgba(55, 48, 163, 0.3);
}

.snake-over {
  margin-top: 18px;
  padding: 14px;
  background: var(--surface-2);
  border-radius: var(--radius);
  text-align: center;
}
.snake-over p {
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 600;
}

/* === Offline-Badge === */
.offline-badge {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #475569;
  color: white;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  z-index: 1000;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
  pointer-events: none;
  animation: offline-fade-in 0.3s ease;
}
@keyframes offline-fade-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* === Update-Banner === */
.update-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--primary), var(--mint));
  color: white;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 10001;
  box-shadow: 0 12px 32px rgba(99, 102, 241, 0.4);
  font-weight: 700;
  font-size: 0.95rem;
  max-width: 92vw;
  animation: update-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes update-slide-in {
  from { transform: translateX(-50%) translateY(-120%); }
  to   { transform: translateX(-50%) translateY(0); }
}
.update-banner .update-btn {
  background: white;
  color: var(--primary-hover);
  border: none;
  border-radius: var(--radius);
  padding: 7px 16px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}
.update-banner .update-btn:hover {
  background: var(--surface-2);
}

/* === Mobile === */
@media (max-width: 540px) {
  body  { padding: 16px 10px; }
  .card { padding: 22px 18px; border-radius: var(--radius); }
  .topic-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .topic-btn  { padding: 18px 10px; }
  .choice-btn { font-size: 1.3rem; padding: 18px 12px; min-height: 64px; }
}

/* === Themes ============================================================ */

/* --- Edge (für „härtere" Formen) -------------------------------------- */
body[data-theme="edge"] {
  --primary: #111827;
  --primary-hover: #000000;
  --primary-soft: #f3f4f6;
  --primary-border: #111827;
  --accent: #dc2626;
  --accent-soft: #fee2e2;
  --text: #0a0a0a;
  --text-muted: #525252;
  --border: #111827;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --bg: #ffffff;
  --radius-sm: 0px;
  --radius: 2px;
  --radius-lg: 4px;
  --radius-pill: 0px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 0 0 1px #111827;
  background: var(--bg);
}
body[data-theme="edge"] header h1 {
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
}
body[data-theme="edge"] .card,
body[data-theme="edge"] #user-bar,
body[data-theme="edge"] .auth-tabs,
body[data-theme="edge"] .topic-btn,
body[data-theme="edge"] .picker-card,
body[data-theme="edge"] .ai-usage-cell,
body[data-theme="edge"] .parent-assignment-list li {
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text);
  box-shadow: none;
}
body[data-theme="edge"] .primary-btn {
  background: var(--text);
  color: #ffffff;
  border: 1.5px solid var(--text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
body[data-theme="edge"] .primary-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
}
body[data-theme="edge"] .small-btn {
  border-width: 1.5px;
}
body[data-theme="edge"] .ai-usage-cell.total {
  background: var(--text);
  color: #ffffff;
  border-color: var(--text);
}

/* --- Einhorn (für Claire) --------------------------------------------- */
body[data-theme="einhorn"] {
  --primary: #ec4899;
  --primary-hover: #db2777;
  --primary-soft: #fce7f3;
  --primary-border: #fbcfe8;
  --accent: #a855f7;
  --accent-soft: #f3e8ff;
  --text: #4a1d4a;
  --text-muted: #9d5b9d;
  --border: #fbcfe8;
  --surface: #fff5fb;
  --surface-2: #fdf4ff;
  --bg: #fef3ff;
  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 32px;
  background:
    radial-gradient(circle at 0% 0%, #fbcfe8 0%, transparent 45%),
    radial-gradient(circle at 100% 0%, #ddd6fe 0%, transparent 45%),
    radial-gradient(circle at 50% 100%, #bae6fd 0%, transparent 45%),
    var(--bg);
}
body[data-theme="einhorn"] header h1 {
  background: linear-gradient(90deg, #ec4899, #a855f7, #8b5cf6, #38bdf8, #34d399);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body[data-theme="einhorn"] header h1::before { content: "🦄 "; -webkit-text-fill-color: initial; }
body[data-theme="einhorn"] header h1::after { content: " ✨"; -webkit-text-fill-color: initial; }
body[data-theme="einhorn"] .primary-btn {
  background: linear-gradient(135deg, #ec4899, #a855f7);
}

/* --- Türkis (für Liliane) --------------------------------------------- */
body[data-theme="tuerkis"] {
  --primary: #14b8a6;
  --primary-hover: #0d9488;
  --primary-soft: #ccfbf1;
  --primary-border: #99f6e4;
  --accent: #06b6d4;
  --accent-soft: #cffafe;
  --text: #134e4a;
  --text-muted: #5eada6;
  --border: #99f6e4;
  --surface: #f0fdfa;
  --surface-2: #ecfeff;
  --bg: #e6fffa;
  background:
    radial-gradient(circle at 0% 0%, #99f6e4 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, #a5f3fc 0%, transparent 50%),
    var(--bg);
}
body[data-theme="tuerkis"] header h1 {
  background: linear-gradient(135deg, #0d9488, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body[data-theme="tuerkis"] .primary-btn {
  background: linear-gradient(135deg, #14b8a6, #06b6d4);
}

/* --- Theme-Picker im Profil ------------------------------------------- */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}
.theme-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  transition: transform 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
}
.theme-btn:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.theme-btn.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.theme-swatch {
  width: 100%;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.theme-swatch.swatch-default {
  background: linear-gradient(135deg, #6366f1, #a855f7);
}
.theme-swatch.swatch-edge {
  background:
    linear-gradient(90deg, #ffffff 0%, #ffffff 70%, #dc2626 70%, #dc2626 100%);
  border: 1.5px solid #111827;
  border-radius: 2px;
}
.theme-swatch.swatch-einhorn {
  background: linear-gradient(90deg, #ec4899, #a855f7, #38bdf8);
  border-radius: 22px;
}
.theme-swatch.swatch-tuerkis {
  background: linear-gradient(135deg, #14b8a6, #06b6d4);
}

/* === Aufgabe melden (Kind) === */
.report-btn {
  background: transparent;
  border-color: var(--border);
  font-size: 0.8rem;
  padding: 6px 10px;
  color: var(--text-muted);
}
.report-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.report-question-modal { max-width: 520px; }
.report-q-intro {
  color: var(--text-muted);
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.45;
}
.report-q-preview {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0 0 14px;
}
.report-q-preview .report-q-text {
  font-weight: 600;
  margin-top: 2px;
}
.report-q-preview .report-q-answer {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--text-muted);
}
#report-q-reason {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--primary-border);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
}
.report-q-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}
.report-q-type {
  border: 1px solid var(--primary-border);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 10px 0 8px;
}
.report-q-type legend { padding: 0 4px; }
.report-q-type-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 0.95rem;
}
.report-q-type-opt input[type="radio"] {
  width: 18px; height: 18px;
}

/* === System-Admin: Reports-Liste === */
.sysadmin-reports-controls {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
  margin: 8px 0 14px;
}
.reports-type-chip {
  border: 1px solid var(--primary-border);
  background: var(--surface);
  padding: 4px 12px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.reports-type-chip.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-hover);
  font-weight: 700;
}
.sysadmin-report-card {
  background: var(--surface);
  border: 1px solid var(--primary-border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.report-card-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.report-card-head .muted { margin-left: auto; }
.report-type-tag {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700;
}
.report-type-content {
  background: var(--primary-soft); color: var(--primary-hover);
}
.report-type-technical {
  background: var(--accent-soft); color: #b45309;
}
.report-status-tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 0.75rem;
  background: var(--surface-2); color: var(--text-muted);
}
.report-status-open { background: #fee2e2; color: #991b1b; }
.report-status-confirmed { background: #dcfce7; color: #166534; font-weight: 600; }
.report-status-done { background: var(--mint-soft); color: var(--primary-hover); }
.report-card-edited {
  margin-top: 6px;
  padding: 8px 10px;
  background: #f0fdf4;
  border-left: 3px solid #16a34a;
  border-radius: 4px;
  font-size: 0.88rem;
  line-height: 1.45;
}
.report-card-edited > div + div { margin-top: 4px; }
.small-btn.good {
  background: #16a34a;
  color: white;
  border-color: #15803d;
}
.small-btn.good:hover { background: #15803d; }
.sysadmin-batch-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 16px;
  padding: 10px 12px;
  background: var(--surface-2, #f3f4f6);
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 8px;
}
.batch-control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.batch-control-label {
  font-weight: 600;
  min-width: 92px;
  font-size: 0.92rem;
}
.batch-archive-row > .report-type-tag {
  margin-right: 6px;
}

.sysadmin-batch-archive {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--surface-2, #f3f4f6);
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 8px;
}
.sysadmin-batch-archive h4 { margin: 0 0 8px; }
.batch-archive-row { padding: 4px 0; font-size: 0.9rem; }
.report-edit-label {
  display: block;
  margin: 10px 0 4px;
}
.report-edit-label > span {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 4px;
}
.report-edit-label textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.92rem;
  resize: vertical;
  box-sizing: border-box;
}
.report-card-meta { margin-bottom: 4px; }
.report-card-q { margin: 4px 0; font-size: 0.92rem; line-height: 1.4; }
.report-card-actions {
  display: flex; gap: 8px; margin-top: 8px;
}
.small-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}

/* === Gemeldete Aufgaben (Eltern) === */
.reports-box {
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}
.reports-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.reports-head h3 { margin: 0; font-size: 1.05rem; }
.reports-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--accent);
  color: white;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-left: 6px;
}
.reports-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 14px;
}
.reports-filter-chip {
  padding: 5px 12px;
  border-radius: 999px;
  border: 2px solid var(--primary-border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.reports-filter-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.reports-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.report-item {
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}
.report-status-accepted { border-left-color: var(--success, #10b981); opacity: 0.85; }
.report-status-edited   { border-left-color: var(--primary); opacity: 0.85; }
.report-item-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  font-size: 0.85rem;
}
.report-child { font-weight: 700; }
.report-topic {
  background: var(--primary-soft);
  color: var(--primary-hover);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
}
.report-when { color: var(--text-muted); margin-left: auto; }
.report-question {
  margin-top: 10px;
}
.report-question .report-q-text {
  font-weight: 600;
  margin-top: 2px;
}
.report-meta { margin-top: 6px; font-size: 0.9rem; }
.report-reason {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.report-action-accept { color: #047857; border-color: #a7f3d0; background: #ecfdf5; }
.report-action-edit   { color: var(--primary-hover); border-color: var(--primary-border); background: var(--primary-soft); }
.report-edit-form {
  margin-top: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px dashed var(--primary-border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.report-edit-form textarea,
.report-edit-form input {
  padding: 8px 10px;
  border: 2px solid var(--primary-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
}
.report-resolved {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 0.9rem;
  color: var(--text-muted);
  background: var(--surface);
  border-radius: var(--radius-sm);
}

.stats-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.stats-header h2 {
  margin: 0;
  font-size: 1.4rem;
}

.password-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.password-form input[type="password"] {
  padding: 10px 12px;
  border: 2px solid var(--primary-border);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: inherit;
  font-size: 1rem;
  margin-bottom: 6px;
}
.password-form input[type="password"]:focus {
  outline: none;
  border-color: var(--primary);
}

/* === Spiele-Wähler im End-Screen === */
.game-chooser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.game-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px;
  background: linear-gradient(160deg, #ffffff, #eef2ff);
  border: 2px solid var(--primary-border);
  border-radius: 18px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.08);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
@media (hover: hover) {
  .game-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 22px rgba(79, 70, 229, 0.22);
  }
  .game-card:hover .game-emoji { transform: scale(1.18) rotate(-6deg); }
}
.game-emoji {
  font-size: 2.4rem;
  line-height: 1;
  transition: transform 0.15s ease;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
}
.game-name  { font-weight: 700; font-size: 0.95rem; }

/* Zurück-Button in den Spiel-Screens (z. B. für den Admin-Test). */
.game-back-btn {
  display: block;
  width: max-content;
  align-self: flex-start;
  margin: 0 auto 10px 0;
  padding: 7px 16px;
  background: var(--surface-2);
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease;
}
.game-back-btn:active { transform: scale(0.96); background: var(--primary-soft); }

/* "Später weiterspielen": pausiert + speichert das Spiel (für Kinder). */
.game-pause-btn {
  display: block;
  width: max-content;
  align-self: flex-start;
  margin: 0 auto 10px 0;
  padding: 8px 18px;
  background: linear-gradient(160deg, #fcd34d, #f59e0b);
  border: none;
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: #4a2c00;
  cursor: pointer;
  box-shadow: 0 3px 0 #b45309, 0 5px 10px rgba(180, 83, 9, 0.3);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}
.game-pause-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #b45309, 0 2px 5px rgba(180, 83, 9, 0.25);
}

/* === Generische Minigame-Bühne === */
.minigame-header {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 14px;
  font-size: 1.05rem;
}
.minigame-stat {
  background: linear-gradient(160deg, #eef2ff, #e0e7ff);
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(79, 70, 229, 0.12);
}
.minigame-stat strong { color: var(--primary-hover); }
.minigame-arena {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.minigame-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.minigame-over {
  text-align: center;
  margin-top: 16px;
}

/* === Memory === */
.memory-arena {
  display: grid;
  grid-template-columns: repeat(4, 64px);
  grid-auto-rows: 84px;
  gap: 8px;
}
.memory-card {
  /* Rückseite: Indigo-Verlauf mit feinem Diagonalmuster + Glanzpunkt. */
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,0.20), rgba(255,255,255,0) 42%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 6px, rgba(255,255,255,0) 6px 12px),
    linear-gradient(150deg, #818cf8, #4338ca);
  color: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: 14px;
  font-size: 1.9rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 0 #3730a3, 0 7px 14px rgba(55, 48, 163, 0.35),
              inset 0 2px 3px rgba(255, 255, 255, 0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
@media (hover: hover) {
  .memory-card:not(.flipped):not(.matched):hover {
    transform: translateY(-3px);
    filter: brightness(1.06);
  }
}
.memory-card.flipped {
  background: linear-gradient(150deg, #ffffff, #eef2ff);
  color: var(--text);
  border: 2px solid var(--primary);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2),
              inset 0 2px 4px rgba(255, 255, 255, 0.85);
  animation: memory-flip-in 0.22s ease;
}
.memory-card.matched {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.4), rgba(255,255,255,0) 45%),
    linear-gradient(150deg, #d1fae5, #6ee7b7);
  color: #065f46;
  border: 2px solid #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.4), 0 4px 14px rgba(16, 185, 129, 0.35),
              inset 0 2px 4px rgba(255, 255, 255, 0.6);
  animation: memory-pop 0.32s ease;
}
@keyframes memory-flip-in {
  0%   { transform: rotateY(80deg); }
  100% { transform: rotateY(0); }
}
@keyframes memory-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* === Asteroiden & Tetris (Canvas-Spiele) === */
.ast-arena canvas,
.tetris-arena canvas {
  background: #0f172a;
  border: 3px solid #1e293b;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.4), inset 0 0 30px rgba(34, 211, 238, 0.06);
  touch-action: none;
}

@media (max-width: 540px) {
  .memory-arena   { grid-template-columns: repeat(4, 56px); grid-auto-rows: 74px; }
  .memory-card    { font-size: 1.5rem; }
}

/* Nicht-aktuelle-Klasse-Themen sind sichtbar aber dezenter */
.topic-prev-grade .topic-btn { opacity: 0.78; }

.topic-grade-pill {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  font-size: 0.66rem;
  padding: 2px 8px;
  border-radius: 999px;
  pointer-events: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.topic-grade-pill-current {
  background: var(--primary-soft);
  border: 1px solid var(--primary-border);
  color: var(--primary-hover);
}
.topic-grade-pill-prev {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: #92400e;
}
.topic-grade-pill-future {
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  color: #075985;
}

/* Eltern: Klasse pro Kind */
.parent-child-meta { margin: -6px 0 14px; }
.parent-grade-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.parent-grade-select {
  padding: 6px 10px;
  border: 2px solid var(--primary-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: inherit;
  font-size: 0.9rem;
}
.muted.small { font-size: 0.82rem; color: var(--text-muted); }

/* === Klassen-Filter im Profil === */
.grade-filter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}
.grade-filter-btn {
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid var(--primary-border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}
@media (hover: hover) {
  .grade-filter-btn:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
  }
}
.grade-filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.grade-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  margin: 0 0 12px;
  background: var(--primary-soft);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--primary-hover);
}
.grade-filter-banner .small-btn {
  padding: 4px 12px;
  font-size: 0.82rem;
}

/* === KI-Kundenservice: schwebender Hilfe-Chat ====================== */
.support-chat-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--primary, #5b8def), #7c5cff);
  color: white;
  font-size: 1.6rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  z-index: 110;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.support-chat-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}
.support-chat-btn:active { transform: scale(0.97); }
.support-chat-btn.hidden { display: none; }
.support-chat-emoji {
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.support-chat-panel {
  position: fixed;
  right: 16px;
  bottom: 84px;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px));
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 109;
  animation: support-chat-in 0.16s ease-out;
}
.support-chat-panel.hidden { display: none; }
@keyframes support-chat-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.support-chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--primary-soft, #eef2ff);
  border-bottom: 1px solid var(--border, #d0d5dd);
}
.support-chat-title {
  flex: 1;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text, #111827);
}
.support-chat-iconbtn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--text-muted, #6b7280);
  font-size: 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.support-chat-iconbtn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text, #111827);
}

.support-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg, #fafbfc);
  font-size: 0.94rem;
  line-height: 1.45;
}

.support-msg {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.support-msg-user {
  align-self: flex-end;
  background: var(--primary, #5b8def);
  color: white;
  border-bottom-right-radius: 4px;
}
.support-msg-assistant {
  align-self: flex-start;
  background: var(--surface, #fff);
  color: var(--text, #111827);
  border: 1px solid var(--border, #d0d5dd);
  border-bottom-left-radius: 4px;
}
.support-msg-error {
  align-self: stretch;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  font-size: 0.88rem;
}
.support-msg-typing {
  align-self: flex-start;
  color: var(--text-muted, #6b7280);
  font-style: italic;
}

.support-chat-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border, #d0d5dd);
  background: var(--surface, #fff);
}
.support-chat-input {
  flex: 1;
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 12px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.94rem;
  resize: none;
  max-height: 120px;
  background: var(--bg, #fafbfc);
  color: var(--text, #111827);
}
.support-chat-input:focus {
  outline: none;
  border-color: var(--primary, #5b8def);
}
.support-chat-send {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--primary, #5b8def);
  color: white;
  font-size: 1.05rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.support-chat-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .support-chat-panel {
    right: 8px;
    left: 8px;
    width: auto;
    bottom: 80px;
    height: min(70vh, 560px);
  }
}

/* === Mastery-Markierung in der Lehrplan-Themen-Liste ================ */
.ptr-mastery {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  background: var(--surface, #fff);
}
.ptr-mastery:hover { border-color: var(--primary, #5b8def); }
.ptr-mastery input[type="checkbox"] { cursor: pointer; }
.ptr-mastery.saved-flash { background: #dcfce7; border-color: #16a34a; }

/* === Schulstoff-Tab: Mode-Auswahl + Ergebnis-Liste ================= */
.calib-mode-row {
  display: flex;
  gap: 10px;
  margin: 12px 0;
  flex-wrap: wrap;
}
.calib-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 999px;
  cursor: pointer;
  background: var(--surface, #fff);
  font-size: 0.92rem;
}
.calib-mode-chip:has(input:checked) {
  border-color: var(--primary, #5b8def);
  background: var(--primary-soft, #eef2ff);
  font-weight: 600;
}
.calib-result {
  margin-top: 18px;
  padding: 14px;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 10px;
}
.calib-result.hidden { display: none; }
.calib-result-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  margin: 10px 0;
}
.calib-result-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 6px;
}
.calib-result-row .ler-idx {
  min-width: 36px;
  font-size: 0.85rem;
  color: var(--text-muted, #6b7280);
}
.calib-row-input {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 4px;
  font: inherit;
  font-size: 0.92rem;
  min-width: 80px;
}
.calib-result-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* === KMK-Kompetenz-Chip in der Lehrplan-Themen-Liste ============== */
.ptr-competences {
  margin: 6px 0 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ptr-comp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  background: var(--primary-soft, #eef2ff);
  color: var(--primary-hover, #2c3da3);
  border: 1px solid var(--primary-border, #c7d2fe);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: help;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === Sysadmin: KMK-Kompetenzen & Voraussetzungs-Editor === */
.sysadmin-comp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px;
}
.sysadmin-comp-panel {
  margin-top: 8px;
}
.sysadmin-comp-panel.hidden {
  display: none;
}
.sysadmin-comp-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.sysadmin-comp-toolbar input {
  flex: 1 1 220px;
  padding: 6px 10px;
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 6px;
  font-size: 0.92rem;
}
.sysadmin-comp-list,
.sysadmin-dep-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 480px;
  overflow-y: auto;
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 8px;
  padding: 6px;
  background: var(--surface, #fff);
}
.sysadmin-comp-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(140px, 1.4fr) minmax(160px, 2fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
}
.sysadmin-comp-row:hover {
  background: var(--surface-2, #f3f4f6);
}
.sysadmin-comp-row.unmapped {
  background: #fff7ed;
}
.sysadmin-comp-row.unmapped:hover {
  background: #ffedd5;
}
.sysadmin-comp-row code,
.sysadmin-dep-row code {
  font-size: 0.82rem;
  background: var(--surface-2, #f3f4f6);
  padding: 1px 6px;
  border-radius: 4px;
}
.sc-row-area {
  font-size: 0.88rem;
  font-weight: 500;
}
.sc-row-comps {
  font-size: 0.82rem;
  line-height: 1.35;
}

.sysadmin-dep-add {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--surface-2, #f3f4f6);
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 8px;
  margin-bottom: 10px;
}
.sysadmin-dep-add input,
.sysadmin-dep-add select {
  padding: 6px 8px;
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 6px;
  font-size: 0.9rem;
}
.sysadmin-dep-add input {
  flex: 1 1 180px;
  min-width: 140px;
}
.sysadmin-dep-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
}
.sysadmin-dep-row:hover {
  background: var(--surface-2, #f3f4f6);
}
.sd-arrow {
  color: var(--text-muted, #667085);
  font-weight: 600;
}
.sd-strength {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
}
.sd-strength-1 {
  background: #f3f4f6;
  color: #475467;
  border: 1px solid #d0d5dd;
}
.sd-strength-2 {
  background: #eef2ff;
  color: #3538cd;
  border: 1px solid #c7d2fe;
}
.sd-strength-3 {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

/* === Vorlesen (Web Speech API) === */
.read-aloud-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin: 8px 0;
}
.read-aloud-input.hidden { display: none; }
.read-aloud-target {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  padding: 18px 24px;
  background: var(--surface-2, #f3f4f6);
  border: 2px dashed var(--primary, #4f46e5);
  border-radius: 12px;
  max-width: 100%;
  word-break: break-word;
}
.read-aloud-target.read-aloud-sentence {
  font-size: 1.6rem;
  font-weight: 600;
}
.read-aloud-mic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 1.05rem;
  font-weight: 600;
  background: var(--primary, #4f46e5);
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
}
.read-aloud-mic:hover { transform: translateY(-1px); }
.read-aloud-mic:disabled { opacity: 0.5; cursor: not-allowed; }
.read-aloud-mic.recording {
  background: #dc2626;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  animation: read-aloud-pulse 1.4s infinite;
}
@keyframes read-aloud-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
  70%  { box-shadow: 0 0 0 16px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.read-aloud-status {
  min-height: 1.2em;
  text-align: center;
  margin: 0;
}
.read-aloud-heard {
  font-size: 0.95rem;
  padding: 10px 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 8px;
  max-width: 100%;
}
.read-aloud-heard.hidden { display: none; }
.ra-detail { display: flex; flex-direction: column; gap: 4px; }
.ra-head { font-weight: 600; margin-bottom: 4px; }
.ra-line { line-height: 1.5; }
/* Richtig erkanntes Wort (gruen) */
.ra-word-ok { color: #047857; font-weight: 600; }
/* Wort, das im Zieltext steht, aber nicht erkannt wurde (rot) */
.ra-word-miss { color: #b91c1c; font-weight: 600; text-decoration: underline; text-decoration-style: dotted; }
/* Wort, das das Kind GESAGT hat, das aber nicht im Zieltext vorkommt (rot) */
.ra-word-wrong { color: #b91c1c; font-weight: 600; }
.read-aloud-unsupported {
  font-size: 0.9rem;
  color: var(--text-muted, #667085);
  text-align: center;
  max-width: 380px;
}
.read-aloud-unsupported.hidden { display: none; }
.link-btn {
  background: none;
  border: none;
  color: var(--primary, #4f46e5);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

/* Wiederholungs-Aufgabe: Badge vor der Frage, dezent gelb */
.question.is-retry::before {
  content: "🔁 Wiederholung";
  display: inline-block;
  font-size: 0.7em;
  font-weight: 600;
  background: #fef3c7;
  color: #92400e;
  padding: 2px 10px;
  border-radius: 999px;
  margin-right: 10px;
  vertical-align: middle;
}

/* === Lernpfad (Skillgraph) === */
.sg-subject-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.sg-subject-toggle button {
  padding: 6px 14px; border-radius: 999px; border: 1px solid #cbd5e1;
  background: #fff; cursor: pointer; font-size: 0.9rem;
}
.sg-subject-toggle button.active { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.skillgraph-content { display: flex; flex-direction: column; gap: 18px; }
.sg-section h3 { margin: 0 0 8px; font-size: 1.05rem; }
.sg-path { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.sg-path-item { line-height: 1.35; }
.sg-area { margin-bottom: 12px; }
.sg-area-title { font-weight: 600; margin-bottom: 6px; color: #475569; }
.sg-skill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  padding: 6px 10px; border-radius: 12px; font-size: 0.85rem;
  border: 1px solid transparent; line-height: 1.2;
}
.sg-chip-sub { font-size: 0.72rem; opacity: 0.7; margin-top: 2px; }
.sg-mastered   { background: #dcfce7; color: #166534; border-color: #86efac; }
.sg-developing { background: #fef9c3; color: #854d0e; border-color: #fde047; }
.sg-weak       { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.sg-unknown    { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; }
.sg-notes { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.sg-legend { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 4px; border-top: 1px solid #e2e8f0; }

/* === Aufgaben-Ideen (Mathe-Varianten) === */
.mi-input { width: 100%; box-sizing: border-box; resize: vertical; }
.mi-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 10px 0; }
.mi-status { min-height: 1.2em; }
.mi-result { display: flex; flex-direction: column; gap: 16px; }
.mi-analyse { background: #f1f5f9; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.mi-analyse h3, .mi-tasks h3 { margin: 0 0 6px; font-size: 1.05rem; }
.mi-tasks { display: flex; flex-direction: column; gap: 10px; }
.mi-task { border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 14px; }
.mi-task-head { font-weight: 600; color: #475569; margin-bottom: 4px; }
.mi-task-text { margin-bottom: 6px; }
.mi-task-sol summary { cursor: pointer; color: #2563eb; font-size: 0.9rem; }
.mi-task-sol[open] summary { margin-bottom: 4px; }

/* === Selbsttests (System-Admin) === */
.selftest-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.selftest-file { border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 10px; }
.selftest-file summary { cursor: pointer; font-weight: 600; }
.selftest-cases { margin: 6px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 0.9rem; }
.selftest-cases li { line-height: 1.35; }
.selftest-desc { }
.selftest-name { font-style: italic; }

/* === Admin: Lernpfade-Auswahl + Admin-Anlegen === */
.admin-sg-pickers { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
.admin-sg-pickers label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.admin-create-form { max-width: 360px; }
.admin-link-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.selftest-source {
  background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 10px 12px;
  font-size: 0.78rem; white-space: pre-wrap; overflow-x: auto; max-height: 360px;
}

/* === Oberkacheln (Kategorien) — fuehren auf eine Unterseite, kein Spielstart === */
.topic-category .topic-btn {
  background: var(--primary-soft, #eef2ff);
  border-style: dashed;
  border-color: var(--primary-border, #c7d2fe);
}
.topic-category .topic-btn:hover {
  border-color: var(--primary, #6366f1);
}
/* "Aktions-Pille": signalisiert Navigation statt Spielstart */
.topic-cat-hint {
  margin-top: 6px;
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: var(--primary, #6366f1);
  border-radius: 999px;
  padding: 3px 12px;
}

/* === Lehrer-Bereich + Eltern-Klassen-Block === */
.teacher-classes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.teacher-class-detail { margin-top: 16px; border-top: 1px solid #e2e8f0; padding-top: 12px; }
.teacher-class-detail h4 { margin: 14px 0 6px; }
.tr-cols { display: flex; flex-wrap: wrap; gap: 24px; }
.tr-cols ul { margin: 4px 0; padding-left: 18px; }
.teacher-roster-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#teacher-material-note, #family-class-code { width: 100%; max-width: 420px; box-sizing: border-box; }
.family-class-controls { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.family-class-controls .cb { font-size: 0.9rem; }
.family-class-row { border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.family-class-row .cb { font-size: 0.85rem; margin-right: 8px; }

/* === Englisch-Lehrplan: Overlay (Listen-Ansicht, Lern-Abfrage, SRS) === */
.en-overlay-card { max-width: 560px; max-height: 88vh; overflow-y: auto; }
.en-big-btn { display: block; width: 100%; margin: 10px 0; padding: 14px 16px;
  font-size: 1.05rem; line-height: 1.3; white-space: normal; }
.en-close-btn { margin-top: 14px; }
.en-list { text-align: left; margin: 8px 0 4px; }
.en-list-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px;
  align-items: center; padding: 7px 4px; border-bottom: 1px solid #eef2f7; }
.en-list-en { font-weight: 600; }
.en-list-de { color: var(--text-muted); }
.en-say-btn { border: none; background: var(--primary-soft); border-radius: 8px;
  cursor: pointer; padding: 4px 8px; font-size: 1rem; }
.en-quiz-head { margin-bottom: 6px; font-size: 0.9rem; }
.en-quiz-emoji { font-size: 3.2rem; line-height: 1; margin: 6px 0; }
.en-quiz-prompt { font-size: 1.6rem; font-weight: 700; margin: 6px 0; }
.en-quiz-input { width: 100%; padding: 12px 14px; font-size: 1.2rem;
  border: 2px solid var(--primary-border); border-radius: 10px; text-align: center; }
.en-submit-btn { margin-top: 12px; min-width: 160px; }

/* === Eltern-Verlauf: Zeit-Aufschlüsselung (App / aktiv / inaktiv) === */
.tb-chart { margin: 4px 0 16px; }
.tb-head { font-weight: 600; margin-bottom: 10px; }
.tb-bars { position: relative; display: flex; align-items: flex-end;
  gap: 8px; padding-top: 6px; }
.tb-col { flex: 1; display: flex; flex-direction: column; align-items: center; }
.tb-stack { width: 62%; max-width: 34px; display: flex; flex-direction: column;
  justify-content: flex-end; border-radius: 5px 5px 0 0; overflow: hidden;
  background: #f1f5f9; }
.tb-seg { width: 100%; }
.tb-task { background: #34d399; }
.tb-nav  { background: #93c5fd; }
.tb-idle { background: #cbd5e1; }
.tb-day  { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; height: 12px; }
.tb-goal-line { position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px dashed #f59e0b; pointer-events: none; }
.tb-legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: 10px; font-size: 0.8rem; color: var(--text-muted); }
.tb-legend span::before { content: ""; display: inline-block; width: 11px;
  height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.tb-lg-task::before { background: #34d399; }
.tb-lg-nav::before  { background: #93c5fd; }
.tb-lg-idle::before { background: #cbd5e1; }

/* === Feedback 27.05: Kio-Maskottchen, Tagesmission-Heading, Brandbar === */
.mascot-kio { width: 40px; height: 40px; object-fit: contain; vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); }
.tagesmission-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kio-head-img { height: 1.6em; width: auto; }
.tm-rocket { font-size: 1.1em; }

/* Oberer Container kompakter: Logo links neben „Kio" + Slogan. */
.kio-brandbar { display: flex; align-items: center; justify-content: center; gap: 14px; }
.kio-brandtext { text-align: left; }
.kio-brandbar .kio-logo { width: clamp(56px, 12vw, 84px); margin: 0; }
.kio-brandbar h1 { margin: 0; }
.kio-brandbar .subtitle { margin: 2px 0 0; }
header { margin-bottom: 16px; }

/* Eltern-Reiter: Labels immer voll lesbar. Schmale Geräte brechen sauber
   in zwei Zeilen um (statt abzuschneiden), breite zeigen alles in einer. */
.parent-tabs { flex-wrap: wrap; overflow-x: visible; justify-content: center; }
.parent-tab { flex: 0 1 auto; white-space: nowrap; overflow: visible;
  text-overflow: clip; padding: 8px 9px; font-size: 0.86rem; gap: 4px; }
@media (min-width: 768px) {
  .parent-tabs { flex-wrap: nowrap; justify-content: center; overflow-x: visible; }
}
/* Admin-Reiter (7 Stück) sprengen die nowrap-Regel auf Desktop —
   hier IMMER umbrechen lassen, damit nichts aus dem weißen Container
   ragt. */
#admin-tabs.parent-tabs {
  flex-wrap: wrap !important;
  justify-content: flex-start;
}

/* === Spiele: CSS-Pseudo-Vollbild (funktioniert auf allen Geräten) === */
#snake, #minigame { position: relative; }
.game-fs-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  padding: 7px 14px;
  background: var(--surface-2);
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, background 0.15s ease;
}
.game-fs-btn:active { transform: scale(0.96); background: var(--primary-soft); }

/* Hintergrund-Scroll sperren, solange ein Spiel im Vollbild läuft. */
body.game-fs-active { overflow: hidden; }

/* Die Spiel-Sektion füllt den ganzen Viewport. */
.card.game-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  margin: 0;
  border-radius: 0;
  max-width: none;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface);
}
.card.game-fullscreen .game-fs-btn { top: max(12px, env(safe-area-inset-top)); }

/* Spielfläche groß skalieren — Seitenverhältnis bleibt erhalten,
   die interne Canvas-Auflösung (und damit die Spiellogik) bleibt gleich. */
.game-fullscreen #snake-canvas {
  width: min(86vw, 60vh);
  height: auto;
}
.game-fullscreen #minigame-arena canvas {
  height: min(62vh, 86vw);
  width: auto;
  max-width: 92vw;
}

/* Stumm-Hinweis am iPhone — kein anderer Browser kann den seitlichen
   Stumm-Schalter auslesen, daher zeigt Kio dem Kind diesen Hinweis. */
.iphone-mute-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px auto 0;
  max-width: 320px;
  padding: 8px 12px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 12px;
  color: #78350f;
  font-size: 0.88rem;
  line-height: 1.35;
}
.iphone-mute-hint strong { color: #92400e; }
.iphone-mute-hint-x {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: #78350f;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 4px;
}

/* Listen-Editor: Tageskontingent-Block für Lernwörter-Datasets */
.list-editor-lwlimit {
  margin: 8px 0 14px;
  padding: 12px 14px;
  background: #fef9c3;
  border: 1px solid #fde047;
  border-radius: 10px;
}
.list-editor-lwlimit .lwlimit-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.list-editor-lwlimit .lwlimit-label {
  font-weight: 500;
  margin-right: 4px;
}
.list-editor-lwlimit input[type="number"] {
  width: 90px;
  padding: 5px 8px;
  border: 1px solid #ca8a04;
  border-radius: 6px;
  font: inherit;
}

/* === Topic-Knowledge-Graph (Admin: Wissensnetz) ============================ */
.tg-controls {
  display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center;
  padding: 12px 14px; margin: 10px 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px;
}
.tg-controls label { font-size: 0.9rem; display: flex; gap: 6px; align-items: center; }
.tg-controls select { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); }
.tg-cat-toggle input { transform: translateY(1px); }
.tg-stats { margin-left: auto; color: var(--text-muted); font-size: 0.85rem; }

.tg-canvas-wrap {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 10px;
  min-height: 580px;
}
@media (max-width: 900px) {
  .tg-canvas-wrap { grid-template-columns: 1fr; }
}
.tg-svg {
  width: 100%; height: 580px;
  background: radial-gradient(circle at 30% 20%, #f0fdfa 0%, #fafafa 60%, #f5f5f4 100%);
  border: 1px solid var(--border); border-radius: 12px;
  cursor: grab; touch-action: none;
}
.tg-svg.tg-dragging { cursor: grabbing; }
.tg-svg .tg-node { cursor: pointer; transition: filter 120ms ease; }
.tg-svg .tg-node:hover { filter: brightness(1.05); }
.tg-svg .tg-node.tg-selected circle { stroke: #0f172a; stroke-width: 2.5; }
.tg-svg .tg-node.tg-dimmed { opacity: 0.18; }
.tg-svg .tg-link.tg-dimmed { opacity: 0.06; }
.tg-svg .tg-link {
  fill: none;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.tg-svg .tg-link.tg-strength-1 { stroke: #94a3b8; stroke-width: 1; opacity: 0.55; }
.tg-svg .tg-link.tg-strength-2 { stroke: #f59e0b; stroke-width: 1.5; opacity: 0.7; }
.tg-svg .tg-link.tg-strength-3 { stroke: #dc2626; stroke-width: 2; opacity: 0.8; }
.tg-svg .tg-link.tg-highlight { opacity: 1 !important; }
.tg-svg .tg-link.tg-strength-1.tg-highlight { stroke: #475569; stroke-width: 2; }
.tg-svg .tg-link.tg-strength-2.tg-highlight { stroke: #b45309; stroke-width: 2.5; }
.tg-svg .tg-link.tg-strength-3.tg-highlight { stroke: #991b1b; stroke-width: 3; }
.tg-svg .tg-label {
  pointer-events: none; font-size: 11px; font-weight: 600;
  fill: #0f172a; paint-order: stroke; stroke: rgba(255,255,255,0.85); stroke-width: 3;
}
/* Knotenfarben nach Fach */
.tg-color-mathe    { background: #2563eb; }
.tg-color-deutsch  { background: #16a34a; }
.tg-color-englisch { background: #9333ea; }
.tg-color-mix      { background: #f59e0b; }
.tg-color-other    { background: #64748b; }
.tg-svg .tg-node-mathe    circle { fill: #2563eb; }
.tg-svg .tg-node-deutsch  circle { fill: #16a34a; }
.tg-svg .tg-node-englisch circle { fill: #9333ea; }
.tg-svg .tg-node-mix      circle { fill: #f59e0b; }
.tg-svg .tg-node-other    circle { fill: #64748b; }
.tg-svg .tg-node circle {
  stroke: rgba(15,23,42,0.4); stroke-width: 1; transition: filter 120ms ease;
}
.tg-svg .tg-node-category circle { fill: rgba(241, 245, 249, 0.95); stroke: #64748b; stroke-dasharray: 3 2; }

.tg-detail {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px;
  overflow-y: auto; max-height: 580px;
}
.tg-detail-hint { color: var(--text-muted); font-size: 0.88rem; }
.tg-detail h4 { margin: 0 0 8px; font-size: 1rem; }
.tg-detail .tg-detail-meta { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 12px; }
.tg-detail .tg-detail-edges { font-size: 0.85rem; }
.tg-detail .tg-detail-edges strong { display: block; margin-top: 10px; color: #0f172a; }
.tg-detail .tg-detail-edges ul { list-style: none; padding: 0; margin: 4px 0 0; }
.tg-detail .tg-detail-edges li {
  padding: 3px 8px; margin: 2px 0; border-radius: 6px;
  background: rgba(241, 245, 249, 0.7); cursor: pointer;
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
}
.tg-detail .tg-detail-edges li:hover { background: rgba(226, 232, 240, 0.9); }
.tg-detail .tg-detail-edges .tg-strength-badge {
  font-size: 0.7rem; padding: 1px 6px; border-radius: 99px;
  background: rgba(0,0,0,0.06); color: var(--text-muted);
}

.tg-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 0.82rem; color: var(--text-muted);
  margin-top: 10px;
}
.tg-legend-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  vertical-align: middle; margin-right: 4px;
}
.tg-legend-edge {
  display: inline-block; width: 22px; height: 2px;
  vertical-align: middle; margin-right: 4px;
}
.tg-edge-1 { background: #94a3b8; height: 1px; }
.tg-edge-2 { background: #f59e0b; height: 2px; }
.tg-edge-3 { background: #dc2626; height: 3px; }
.tg-legend-sep { padding: 0 4px; opacity: 0.4; }

/* === Wissensnetz: Vollbild =========================================== */
.tg-canvas-wrap:fullscreen,
.tg-canvas-wrap:-webkit-full-screen {
  background: linear-gradient(180deg, #f8fafc 0%, #f0fdfa 100%);
  padding: 16px;
  /* Drei Zeilen: Filter | Canvas+Detail | Legende; zwei Spalten teilen sich
     die Canvas+Detail-Zeile via grid-column auf den Children. */
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: auto 1fr auto;
  height: 100vh; min-height: 100vh; max-height: 100vh;
}
/* Eingehaengte Filter-Leiste + Legende spannen beide Spalten. */
.tg-canvas-wrap:fullscreen .tg-controls-in-wrap,
.tg-canvas-wrap:-webkit-full-screen .tg-controls-in-wrap,
.tg-canvas-wrap:fullscreen .tg-legend-in-wrap,
.tg-canvas-wrap:-webkit-full-screen .tg-legend-in-wrap {
  grid-column: 1 / -1;
  margin: 0;
}
.tg-canvas-wrap:fullscreen .tg-svg,
.tg-canvas-wrap:-webkit-full-screen .tg-svg {
  /* Hoehe: Viewport minus Filter (ca. 64px) - Legende (~40px) - Padding (32) */
  height: calc(100vh - 170px);
}
.tg-canvas-wrap:fullscreen .tg-detail,
.tg-canvas-wrap:-webkit-full-screen .tg-detail {
  max-height: calc(100vh - 170px);
}
.tg-fs-exit {
  display: none;
  position: absolute; top: 24px; right: 24px; z-index: 10;
  padding: 8px 14px; border-radius: 999px; border: none;
  background: rgba(15, 23, 42, 0.78); color: white;
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.tg-canvas-wrap:fullscreen .tg-fs-exit,
.tg-canvas-wrap:-webkit-full-screen .tg-fs-exit {
  display: inline-block;
}
.tg-fs-exit:hover { background: rgba(15, 23, 42, 0.92); }
@media (max-width: 900px) {
  .tg-canvas-wrap:fullscreen,
  .tg-canvas-wrap:-webkit-full-screen { grid-template-columns: 1fr; }
}

/* === Wissensnetz: Fullscreen-Overlay aus Topic-Details ================ */
.tg-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: linear-gradient(180deg, #f8fafc 0%, #f0fdfa 100%);
  display: flex; flex-direction: column;
  padding: 14px 18px 8px;
  overflow: hidden;
}
.tg-overlay.hidden { display: none; }
.tg-overlay-head {
  display: flex; flex-direction: column; gap: 8px;
  flex: 0 0 auto;
}
.tg-overlay-head h3 { margin: 0; font-size: 1.1rem; }
.tg-controls-overlay { margin: 0; }
.tg-overlay-body {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 10px; margin: 10px 0;
}
.tg-overlay-body .tg-svg {
  width: 100%; height: 100%;
}
.tg-overlay-body .tg-detail {
  max-height: 100%;
}
.tg-legend-overlay { flex: 0 0 auto; margin: 0; padding: 4px 0; }
@media (max-width: 900px) {
  .tg-overlay-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 200px; }
}

/* === Wissensnetz: Zoom-Buttons ====================================== */
.tg-canvas-wrap { position: relative; }
.tg-overlay-canvas { position: relative; min-height: 0; }
.tg-zoom-buttons {
  position: absolute; bottom: 14px; left: 14px;
  display: flex; flex-direction: column; gap: 6px; z-index: 5;
}
.tg-zoom-btn {
  width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
  font-size: 1.2rem; font-weight: 700; line-height: 1; color: #0f172a;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.1s, background 0.1s;
}
.tg-zoom-btn:hover { background: #fff; transform: scale(1.05); }
.tg-zoom-btn:active { transform: scale(0.97); }

/* === Wissensnetz: Sample-Aufgaben-Sektion ============================ */
.tg-detail .tg-detail-tasks {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.tg-detail .tg-detail-tasks strong { display: block; margin-bottom: 6px; color: #0f172a; }
.tg-detail .tg-task-sample {
  background: rgba(241, 245, 249, 0.7);
  border-left: 3px solid var(--primary, #14b8a6);
  padding: 6px 10px;
  border-radius: 6px;
  margin: 4px 0;
  font-size: 0.85rem;
  line-height: 1.4;
}
.tg-detail .tg-task-sample .tg-task-answer {
  display: block;
  margin-top: 3px;
  color: #047857;
  font-weight: 600;
  font-size: 0.8rem;
}
.tg-detail .tg-task-sample.tg-task-special {
  border-left-color: #f59e0b;
  font-style: italic;
  color: var(--text-muted);
}
.tg-detail .tg-task-refresh {
  font-size: 0.78rem; padding: 3px 8px;
  margin-top: 4px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; color: var(--text-muted);
}
.tg-detail .tg-task-refresh:hover { background: rgba(0,0,0,0.04); color: #0f172a; }

/* === Wissensnetz: Aufgaben-Kachel im Detail-Panel ====================== */
.tg-detail .tg-tile-card {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.04) 0%, rgba(20, 184, 166, 0.10) 100%);
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 6px 0 4px;
  font-size: 0.85rem;
  line-height: 1.4;
}
.tg-detail .tg-tile-head {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 6px;
}
.tg-detail .tg-tile-emoji {
  font-size: 1.6rem; line-height: 1;
  flex: 0 0 auto;
}
.tg-detail .tg-tile-title {
  font-weight: 700; color: #0f172a;
  font-size: 0.95rem; line-height: 1.25;
}
.tg-detail .tg-tile-meta {
  font-size: 0.78rem; color: var(--text-muted);
  margin-top: 2px;
}
.tg-detail .tg-tile-meta .ptr-badge {
  font-size: 0.7rem; padding: 1px 6px;
  margin-left: 4px;
}
.tg-detail .tg-tile-desc {
  margin: 6px 0 6px;
  color: var(--text);
  font-size: 0.82rem;
}
.tg-detail .tg-tile-meta-row {
  font-size: 0.78rem; color: var(--text-muted);
  margin-bottom: 4px;
}
.tg-detail .tg-tile-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 8px;
}
.tg-detail .tg-tile-actions .small-btn {
  font-size: 0.78rem; padding: 3px 10px;
}

/* === Wissensnetz: Lernstand-Faerbung der Knoten ====================== */
/* Ueberschreibt die Fach-Farbe, wenn ein Kind gewaehlt ist. */
.tg-svg .tg-node-mastery-future circle {
  fill: #e2e8f0;                       /* grau — zukuenftiger Stoff */
  stroke: #94a3b8; stroke-width: 1;
}
/* "Sollte schon gekonnt werden, aber noch nicht bearbeitet" — heller
   Hintergrund + farbig gestrichelte Umrandung in Fachfarbe. So sieht
   man auf einen Blick: hier ist eine Lehrplan-Erwartung offen. */
.tg-svg .tg-node-mastery-expected-unseen circle {
  fill: #f8fafc;
  stroke-width: 2.5;
  stroke-dasharray: 4 3;
}
.tg-svg .tg-node-mastery-expected-unseen.tg-subj-mathe    circle { stroke: #2563eb; }
.tg-svg .tg-node-mastery-expected-unseen.tg-subj-deutsch  circle { stroke: #16a34a; }
.tg-svg .tg-node-mastery-expected-unseen.tg-subj-englisch circle { stroke: #9333ea; }
.tg-svg .tg-node-mastery-expected-unseen.tg-subj-mix      circle { stroke: #f59e0b; }
.tg-svg .tg-node-mastery-expected-unseen.tg-subj-other    circle { stroke: #64748b; }
.tg-svg .tg-node-mastery-weak    circle { fill: #dc2626; }   /* rot — unter 40 % */
.tg-svg .tg-node-mastery-wobbly  circle { fill: #f59e0b; }   /* orange — 40-65 % */
.tg-svg .tg-node-mastery-okay    circle { fill: #84cc16; }   /* hellgruen — 65-85 % */
.tg-svg .tg-node-mastery-strong  circle { fill: #16a34a; }   /* gruen — 85 %+ */

.tg-legend-mastery-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  vertical-align: middle; margin-right: 4px;
}
.tg-legend-mastery-dot.future { background: #e2e8f0; border: 1px solid #94a3b8; }
.tg-legend-mastery-dot.expected-unseen { background: #f8fafc; border: 2px dashed #f59e0b; }
.tg-legend-mastery-dot.weak   { background: #dc2626; }
.tg-legend-mastery-dot.wobbly { background: #f59e0b; }
.tg-legend-mastery-dot.okay   { background: #84cc16; }
.tg-legend-mastery-dot.strong { background: #16a34a; }

/* === Wissensnetz-Kachel: Lernstand-Stats-Zeile ======================== */
.tg-detail .tg-tile-stats-row {
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(20, 184, 166, 0.07);
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.45;
}
.tg-detail .tg-tile-stats-row .tg-tile-best {
  color: var(--text-muted);
  font-size: 0.78rem;
}
.tg-detail .tg-tile-stats-row.tg-tile-stats-empty {
  color: var(--text-muted);
  font-style: italic;
}

/* === Wissensnetz: "Du bist hier"-Marker ============================== */
.tg-svg .tg-here-star {
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 2;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
  animation: tg-here-bob 1.8s ease-in-out infinite;
}
.tg-svg .tg-node-here circle {
  stroke: #f59e0b;
  stroke-width: 2.5;
}
@keyframes tg-here-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* === Wissensnetz-Overlay: Kind-Badge ================================ */
.tg-ov-child-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.12);
  color: #047857;
  font-size: 0.78rem;
  font-weight: 600;
  vertical-align: middle;
}

/* === Wissensnetz: 📍 Schulstoff-Position-Marker ====================== */
.tg-svg .tg-school-pin {
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
.tg-svg .tg-node-school-pos circle {
  stroke: #ef4444;
  stroke-width: 2.5;
}

/* Calibration-Liste: Position-Zeile */
.calib-position {
  margin: 4px 0 0;
  color: #92400e;
  background: rgba(245, 158, 11, 0.12);
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
}

/* Feedback-Anzeige: was das Kind eingegeben hat */
.feedback-user-answer {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-style: italic;
}

/* === "Zettel erlaubt"-Hinweis bei schriftlichen Mathe-Aufgaben ====== */
.paper-hint {
  display: flex; align-items: center; gap: 10px;
  margin: 8px auto 14px;
  max-width: 520px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.10), rgba(251, 191, 36, 0.18));
  border: 1px solid rgba(251, 191, 36, 0.50);
  border-radius: 12px;
  font-size: 0.92rem;
  color: #78350f;
  line-height: 1.35;
}
.paper-hint-emoji { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
.paper-hint-text { font-weight: 500; }