/* Kopernikus Lernapp – Styles (aus index.html ausgelagert) */
  :root {
    /* ════════════════════════════════════════════════════════
       Design „Wissensspeicher": ruhige Zwei-Farben-Welt.
       Blau trägt die Struktur, Korall ist der einzige Akzent.
       Grün/Rot erscheinen nur als Richtig/Falsch-Feedback.
       ════════════════════════════════════════════════════════ */
    --bg: #F3F6F9;            /* kühles Hellgrau mit Blaustich */
    --card: #FFFFFF;
    --border: #DCE4EC;
    --border-light: #EAF0F5;
    --text: #2C3A47;          /* Anthrazit */
    --text-secondary: #6B7A88;
    --text-tertiary: #9AA8B5;

    /* Primärfarbe: gedecktes Blau */
    --info: #3D7EAA;
    --info-dark: #2F6388;
    --info-bg: #E3EDF5;

    /* Erfolg: nur für Richtig-Feedback */
    --success: #1E8449;
    --success-dark: #14673A;
    --success-bg: #E9F6EE;

    /* Warnung: sparsam (Fristen, Hinweise) */
    --warning: #E9B44C;
    --warning-bg: #FBF3E0;
    --warning-dark: #9C7A1F;

    /* Gefahr: nur für Falsch-Feedback und Löschen */
    --danger: #C0392B;
    --danger-bg: #FBECEA;
    --danger-dark: #962D22;

    /* Akzent = Blau (bewusst zusammengelegt, weniger Farben) */
    --accent: #3D7EAA;
    --accent-bg: #E3EDF5;

    /* Highlight: Korall – der EINE Akzent (Training, Glossar, wichtigste Aktion) */
    --highlight: #D4704A;
    --highlight-light: #E08560;
    --highlight-bg: #FDF1EC;
    --highlight-dark: #A8552F;

    --radius: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Schatten: weich, wie im Prototyp */
    --shadow-sm: 0 1px 3px rgba(44,58,71,0.06);
    --shadow: 0 2px 8px rgba(44,58,71,0.08);
    --shadow-md: 0 4px 14px rgba(44,58,71,0.10);
    --shadow-lg: 0 10px 28px rgba(44,58,71,0.14);
  }

  /* ── Dark Mode: gleiche warme Stone-Palette, nur invertiert ──
     Die *-dark-Varianten dienen als TEXT-Farbe auf *-bg-Flächen
     und müssen im Dunkel-Theme daher HELL sein. */
  html[data-theme="dark"] {
    color-scheme: dark;

    --bg: #1A222A;
    --card: #243039;
    --border: #3A4A57;
    --border-light: #2D3B46;
    --text: #EDF2F6;
    --text-secondary: #A9B8C4;
    --text-tertiary: #71828F;

    --info: #5C9CC9;
    --info-dark: #9CC4E0;
    --info-bg: #243D4F;

    --success: #3FA46A;
    --success-dark: #8FD8AE;
    --success-bg: #1F3A2C;

    --warning: #E9B44C;
    --warning-bg: #3A311A;
    --warning-dark: #F0CC85;

    --danger: #E06352;
    --danger-bg: #42241F;
    --danger-dark: #F3ABA0;

    --accent: #5C9CC9;
    --accent-bg: #243D4F;

    --highlight: #E08560;
    --highlight-light: #EBA083;
    --highlight-bg: #3C2A22;
    --highlight-dark: #F2BCA3;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.45);
    --shadow-lg: 0 10px 28px rgba(0,0,0,0.5);
  }
  * { box-sizing: border-box; }
  body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
  }
  #app { padding: 1rem; max-width: 1100px; margin: 0 auto; }
  h1, h2, h3, h4 { margin: 0; letter-spacing: -0.015em; line-height: 1.2; }
  h1, h2, h3 { font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif; }
  h1 { font-size: 28px; font-weight: 800; }
  h2 { font-size: 22px; font-weight: 700; }
  h3 { font-size: 16px; font-weight: 600; color: var(--text); }
  h4 { font-size: 14px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }

  /* Buttons */
  /* Sekundär-Buttons sind bewusst ruhig/flach, damit die EINE Primäraktion
     pro Bereich klar heraussticht (klarere Hierarchie, Apple-artig). */
  button {
    font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    min-height: 40px;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: var(--radius-pill);
    cursor: pointer;
    color: var(--text);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
  }
  button:hover:not(:disabled) {
    background: var(--border-light);
    border-color: var(--text-tertiary);
  }
  button:active:not(:disabled) { transform: scale(0.97); }
  /* Inline-Icon in Aktions-Buttons (Emoji-Ersatz) */
  .btnIco { display: inline-flex; align-items: center; vertical-align: -0.16em; margin-right: 6px; }
  .btnIco svg { width: 16px; height: 16px; }
  button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
  /* Primäraktion: gefüllt, kräftig – genau eine pro Bereich verwenden */
  button.primary {
    background: var(--info);
    color: white;
    border-color: var(--info);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
  }
  button.primary:hover:not(:disabled) {
    background: var(--info-dark);
    border-color: var(--info-dark);
    box-shadow: 0 3px 10px rgba(59,130,246,0.28);
  }
  button.primary:active:not(:disabled) { transform: scale(0.97); box-shadow: 0 1px 2px rgba(0,0,0,0.10); }
  button.warn { color: var(--warning); }
  button.danger { color: var(--danger); }
  button.highlight {
    background: var(--highlight-bg);
    color: var(--highlight-dark);
    border-color: rgba(217,119,6,0.3);
    font-weight: 600;
  }
  button.highlight:hover:not(:disabled) {
    background: var(--highlight-bg);
    border-color: var(--highlight);
  }
  button.small { padding: 8px 14px; font-size: 13px; min-height: 36px; }

  /* Inputs */
  input, select, textarea {
    font-family: inherit;
    font-size: 14px;
    padding: 10px 14px;
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--info);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
  }
  textarea { min-height: auto; }

  /* Cards mit echter Tiefe */
  .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
  }
  .card.lift { box-shadow: var(--shadow); }
  .card.lift:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); transition: all 0.2s ease; }
  
  /* Klickbare Karten – spürbarer Hover-Effekt */
  .card-clickable, .klassenKarte, .lehKarte, .kursVerwKarte, .elem-karte, .kursKarte, .karte-klickbar {
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
  .card-clickable:hover, .klassenKarte:hover, .lehKarte:hover, .kursVerwKarte:hover, .kursKarte:hover, .karte-klickbar:hover, .statKachel:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--info);
  }
  .card-clickable:active, .klassenKarte:active, .lehKarte:active, .kursVerwKarte:active, .kursKarte:active, .karte-klickbar:active, .statKachel:active {
    transform: translateY(0);
    box-shadow: var(--shadow);
  }
  /* Element-Karten in Lerneinheits-Verwaltung haben dezenteren Hover */
  .elem-karte:hover { box-shadow: var(--shadow); border-color: var(--text-tertiary); }

  .muted { color: var(--text-secondary); font-size: 13px; }
  .small { font-size: 12px; }
  .gap8 { display: flex; gap: 8px; flex-wrap: wrap; }
  .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th { background: var(--border-light); padding: 10px 8px; text-align: left; font-weight: 500; font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
  td { padding: 10px 8px; border-bottom: 1px solid var(--border-light); }

  /* Default: Schüler-Mobil-Karten verstecken, Tabelle anzeigen */
  .schuelerMobilKarten { display: none; }
  .schuelerTabelle { display: block; }
  
  /* Tab-Leisten: Scroll-Schatten-Hinweis, falls Inhalt überläuft.
     Die Abdeck-Verläufe nutzen var(--bg) statt Weiß – sonst erscheinen
     im Dark Mode weiße Balken links und rechts. */
  .tabLeiste {
    overflow-x: auto;
    background-image:
      linear-gradient(to right, var(--bg), var(--bg)),
      linear-gradient(to right, var(--bg), var(--bg)),
      linear-gradient(to right, rgba(0,0,0,0.06), transparent),
      linear-gradient(to left, rgba(0,0,0,0.06), transparent);
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 16px 100%, 16px 100%, 8px 100%, 8px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  /* Touch-friendly auf Handy / Tablet-Hochformat */
  @media (max-width: 640px) {
    button { padding: 13px 18px; min-height: 46px; }
    button.small { padding: 10px 14px; min-height: 40px; font-size: 13px; }
    input, select, textarea { padding: 13px 14px; font-size: 16px; min-height: 46px; }
    textarea { min-height: auto; }
    #app { padding: 0.75rem; }
    h2 { font-size: 20px !important; }
    /* Tabellen mit Heatmap auf Handy: kleinere Mindest-Zellen */
    table.heatmap-tab th, table.heatmap-tab td { padding: 4px 2px; font-size: 11px; min-width: 26px; }
    /* Tab-Knöpfe nicht abschneiden */
    .tabBtn { padding: 12px 14px !important; font-size: 13px !important; white-space: nowrap; }
    
    /* Schüler-Liste: Tabelle aus, Karten an */
    .schuelerTabelle { display: none !important; }
    .schuelerMobilKarten { display: block; }
    
    /* Stat-Kacheln im Dashboard: Mindestens 2 pro Zeile auf Mobile (statt 1) */
    .statKachelGrid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    /* Auf sehr kleinen Geräten 1 pro Zeile, aber kompakt */
    
    /* Header-Knopf-Gruppe mobile-friendly */
    .headerKnopfGruppe { gap: 6px !important; flex-wrap: wrap; }
    /* Klassenübersicht-Knopf: Text verstecken, nur Icon */
    .klassenUebersichtKnopf .label { display: none; }
    
    /* Note-Buttons in Bewertung: kleiner, alle in einer Zeile */
    .abNoteBtn { padding: 12px 0 !important; font-size: 16px !important; min-height: 48px !important; }
    
    /* Lange Buttongruppen wickeln sich sauber um */
    .gap8 { flex-wrap: wrap; }
    
    /* Header-Knopfgruppen mit der Klasse .seitenKopfKnoepfe: bei wenig Platz
       auf eigene Zeile rutschen, statt mit dem Titel zu kollidieren. */
    .seitenKopfKnoepfe {
      width: 100%;
      justify-content: flex-end;
    }
  }
  /* Sehr schmale Geräte: Stat-Kacheln in 1 Spalte */
  @media (max-width: 380px) {
    .statKachelGrid { grid-template-columns: 1fr !important; }
  }

  /* ═══════════════════════════════════════════════════════════
     MOBILE-OPTIMIERUNGEN – umfassendes Redesign für ≤ 640px
     ═══════════════════════════════════════════════════════════ */

  /* Bottom-Nav – nur auf Mobile sichtbar */
  #mobileBottomNav {
    display: none;
  }

  /* Dark-Mode-fähige „weiße" Dialog-Fenster (KI-Konfig, Onboarding, Vorschau …).
     Die Fenster sind mit festen hellen Inline-Farben gebaut; diese Regeln machen
     Container + Kind-Elemente theme-fähig, ohne hunderte Inline-Stile zu ändern.
     Status-/Akzentfarben (grün, lila, blau) bleiben absichtlich erhalten. */
  .themedSheet { background: var(--card) !important; color: var(--text) !important; border-color: var(--border) !important; }
  .themedSheet [style*="background:#fff"],
  .themedSheet [style*="background: #fff"],
  .themedSheet [style*="background:#fafafa"],
  .themedSheet [style*="background:#f9fafb"],
  .themedSheet [style*="background:#f3f4f6"] { background: var(--card) !important; }
  .themedSheet [style*="background:#f5f3ff"] { background: var(--info-bg) !important; }
  .themedSheet [style*="color:#1a1a1a"],
  .themedSheet [style*="color:#111827"],
  .themedSheet [style*="color:#374151"] { color: var(--text) !important; }
  .themedSheet [style*="color:#6b7280"] { color: var(--text-secondary) !important; }
  .themedSheet [style*="color:#9ca3af"] { color: var(--text-tertiary) !important; }
  .themedSheet [style*="#d1d5db"],
  .themedSheet [style*="#e5e7eb"] { border-color: var(--border) !important; }

  /* Reiter-Icons (Planer u. a.) */
  .tabIcon { display: inline-flex; align-items: center; }
  .tabIcon svg { width: 16px; height: 16px; display: block; }
  .briefIcon { display: inline-flex; align-items: center; }
  .briefIcon svg { width: 24px; height: 24px; display: block; }

  /* ── iOS-artiges Segmented Control (Planer-Reiter) ──────────
     Grauer Track mit erhabenem aktivem Segment. */
  .segmented {
    display: inline-flex; gap: 2px;
    background: var(--border-light);
    border-radius: var(--radius-pill);
    padding: 4px;
    max-width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .segmented::-webkit-scrollbar { display: none; }
  .segmented button {
    flex: 0 0 auto;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-secondary);
    font-weight: 600;
    min-height: 36px;
    padding: 7px 14px !important;
    border-radius: calc(var(--radius-pill) - 3px);
    transition: background 0.18s ease, color 0.18s ease;
  }
  .segmented button:hover:not(:disabled) { color: var(--text); background: transparent !important; }
  .segmented button:active:not(:disabled) { transform: none; }
  .segmented button.seg-aktiv {
    background: var(--card) !important;
    color: var(--text) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.14);
  }

  /* Gleichmäßige Ziffern in Tabellen (Noten, Daten, Uhrzeiten) */
  table, .tabular { font-variant-numeric: tabular-nums; }

  /* Einheitlicher, freundlicher Leerzustand */
  .leerzustand { text-align: center; padding: 2.75rem 1.25rem; max-width: 440px; margin: 0 auto; }
  .leerzustand-icon {
    width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    background: var(--info-bg); color: var(--info);
  }
  .leerzustand-icon svg { width: 30px; height: 30px; }
  .leerzustand-titel { font-family: 'Baloo 2', 'Nunito', sans-serif; font-weight: 600; font-size: 17px; color: var(--text); margin-bottom: 6px; }
  .leerzustand-text { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }

  /* App-Version unten rechts – auf allen Seiten */
  #appVersion {
    position: fixed; right: 8px; bottom: 8px; z-index: 1500;
    font-size: 11px; line-height: 1; color: var(--text-tertiary);
    background: var(--card); border: 1px solid var(--border-light);
    border-radius: 6px; padding: 3px 7px; opacity: 0.7;
    pointer-events: none; user-select: none;
  }
  /* Auf Mobile über die Bottom-Nav heben */
  @media (max-width: 640px) {
    #appVersion { bottom: calc(env(safe-area-inset-bottom, 0px) + 90px); }
  }
  @media (max-width: 640px) {
    /* Safe area + Platz für Bottom-Nav */
    #app {
      padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    }
    /* Toast über Bottom-Nav */
    .toast {
      bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }

    /* Bottom Navigation – höher gesetzt, damit die Buttons nicht im
       Home-Indikator-/Gestenbereich liegen (sonst löst iOS Gesten/Siri aus) */
    #mobileBottomNav {
      display: flex;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      height: calc(66px + env(safe-area-inset-bottom, 0px) + 14px);
      padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
      background: var(--card);
      border-top: 1px solid var(--border);
      z-index: 500;
      box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
    }
    #mobileBottomNav a {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      min-height: 48px;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-tertiary);
      text-decoration: none;
      cursor: pointer;
      transition: color 0.15s;
      padding: 8px 4px 0;
      -webkit-tap-highlight-color: transparent;
    }
    #mobileBottomNav a.aktiv { color: var(--info); }
    #mobileBottomNav a .bnav-icon { font-size: 25px; line-height: 1; display: flex; align-items: center; justify-content: center; height: 26px; }
    #mobileBottomNav a .bnav-icon svg { width: 25px; height: 25px; display: block; }
    #mobileBottomNav a .bnav-label { font-size: 10px; line-height: 1.2; }

    /* Modals: auf Mobile fast vollbild */
    .modal {
      max-width: 100% !important;
      width: 100% !important;
      max-height: 90vh;
      overflow-y: auto;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
      padding: 1.25rem !important;
      margin: 0 !important;
      /* Auf Mobile als Bottom-Sheet von unten einschieben (überschreibt sheetPop) */
      animation: slideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }
    .modal-overlay {
      align-items: flex-end !important;
      padding: 0 !important;
    }
    @keyframes slideUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }

    /* 2-Spalten-Grids → 1 Spalte */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"] {
      grid-template-columns: 1fr !important;
    }

    /* Cards: weniger Innenabstand */
    .card { padding: 1rem !important; }

    /* Klassen-Karten: kompakter */
    .klassenKarte { padding: 0.875rem 1rem !important; }

    /* Seitentitel-Zeile: kein Flex-wrap-Chaos */
    .seitenKopfKnoepfe {
      width: auto !important;
      justify-content: flex-end !important;
    }

    /* Tab-Buttons: kleiner und scrollbar */
    .tabBtn {
      padding: 10px 12px !important;
      font-size: 12px !important;
      min-height: 38px !important;
    }

    /* Bibliotheks-Karten: kein festes 2-Spalten-Layout */
    .bibGrid { grid-template-columns: 1fr !important; }

    /* Aufgaben-Antwort-Buttons: volle Breite */
    .aufgAntwortBtn { width: 100% !important; text-align: left !important; }

    /* Profil: cards volle Breite */
    #profil-karte { max-width: 100% !important; }

    /* Lerneinheit-Header-Info: stacked */
    .lehHeaderInfo { flex-direction: column !important; gap: 8px !important; }

    /* Arbeitsblatt-Block-Editor: Toolbar wrappen */
    .ab-toolbar { flex-wrap: wrap !important; gap: 4px !important; }

    /* Schüler-Eingabefelder: kein zoom auf iOS (font-size mind. 16px) */
    input, select, textarea { font-size: 16px !important; }

    /* Lernziel-Kacheln im LEK: 1 Spalte */
    .lzkGrid { grid-template-columns: 1fr !important; }

    /* Differenzierungs-Grid: 1 Spalte */
    .diffGrid { grid-template-columns: 1fr !important; }

    /* KI-Modal Typ-Grid: 1 Spalte */
    #kiAbTypGrid,
    #kiErgAnzahlGrid { grid-template-columns: 1fr !important; }

    /* Schüler-Kursübersicht: Karten voll */
    .kursKarte { padding: 1rem !important; }

    /* Fortschritt-Balken in Karten: Breite anpassen */
    .progress-track { height: 6px !important; }

    /* ── LEHRER MOBILE ───────────────────────────────────────── */

    /* Klassen-Dashboard-Header: Bibliothek-Button ausblenden
       (im Bottom-Nav und ⋯-Menü zugänglich) */
    #bbib { display: none !important; }

    /* Kurs- / Lerneinheits-Views: Abmelden-Button ausblenden
       (über Bottom-Nav → Klassen → Profil erreichbar) */
    #bAbm { display: none !important; }

    /* Stat-Kacheln: 3 pro Zeile auf schmalen Bildschirmen
       → 3+2 statt 2+2+1 */
    .statKachelGrid {
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 6px !important;
    }
    /* Kachel-Label kürzen, damit nichts überläuft */
    .statKachel > div:first-child { font-size: 10px !important; }
    .statKachel { padding: 10px 8px !important; }

    /* Klassen-Header-Karte: Titel und Buttons gestapelt */
    .lehr-klassen-header-knoepfe {
      width: 100%;
      justify-content: flex-start !important;
      border-top: 1px solid var(--border-light);
      padding-top: 10px;
      margin-top: 2px;
    }

    /* Kurs-Verwaltungs-Header: Aktions-Buttons umbrechen */
    .kurs-aktionen-zeile { gap: 6px !important; }
    .kurs-aktionen-zeile button { font-size: 12px !important; padding: 6px 10px !important; }

    /* Schüler-Liste Aktionsknöpfe: Zurück-Button zuletzt */
    .schueler-liste-knoepfe { flex-wrap: wrap !important; gap: 6px !important; }

    /* Lerneinheits-Karten in Kursverwaltung */
    .lehKarte { padding: 10px 12px !important; }

    /* Aktivitätsdiagramm: Scroll-Hint immer sichtbar */
    #aktivSliderHint { display: block !important; font-size: 11px; }

    /* Heatmap auf Mobile ausblenden (zu breit, stattdessen nur Balkendiagramm) */
    .lehr-heatmap-container { display: none !important; }

    /* Klassencode-Badge im Header kompakter */
    .lehr-klasse-code { font-size: 12px !important; }
  }

  /* Tablet (641–900px): leichte Anpassungen */
  @media (min-width: 641px) and (max-width: 900px) {
    #app { padding: 1rem 1.25rem; }
    .statKachelGrid { grid-template-columns: repeat(3, 1fr) !important; }
  }

  /* Print-CSS: speziell für das Factsheet, damit die Schüler:in es als PDF speichern
     oder drucken kann. Versteckt Navigation und Knöpfe, optimiert Lesbarkeit. */
  @media print {
    /* Notenbuch & Co.: Bedienelemente nicht mitdrucken */
    button, input[type="range"], select { display: none !important; }
    .kein-druck { display: none !important; }

    body { background: var(--card) !important; }
    .factsheetNoPrint { display: none !important; }
    .factsheet { box-shadow: none !important; max-width: 100% !important; padding: 0 !important; }
    .factsheet h1 { page-break-before: avoid; }
    .factsheet h2, .factsheet h3 { page-break-after: avoid; }
    .factsheet section { page-break-inside: avoid; }
    /* Keine Hintergrundfarben/Schatten beim Drucken */
    .factsheet, .factsheet .card { background: var(--card) !important; box-shadow: none !important; }
    /* Kompaktere Schrift */
    .factsheet { font-size: 11pt; line-height: 1.5; }
    .factsheet h1 { font-size: 18pt; }
    .factsheet h2 { font-size: 14pt; }
    .factsheet h3 { font-size: 12pt; }
  }

  /* Modal */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 1rem;
    animation: fadeIn 0.15s ease;
  }
  .modal {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    max-width: 460px; width: 100%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.08);
    animation: slideUp 0.2s ease;
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

  /* Toast – background/color bewusst über --text/--bg gekreuzt:
     im hellen Theme dunkler Toast mit heller Schrift, im Dark Mode
     heller Toast mit dunkler Schrift. Niemals weiß auf weiß. */
  .toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--text); color: var(--bg);
    padding: 11px 18px; border-radius: var(--radius-pill);
    z-index: 999; font-size: 13px; font-weight: 500;
    opacity: 0; transition: opacity 0.25s, transform 0.25s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  }
  .toast.zeigen { opacity: 0.95; transform: translateX(-50%) translateY(0); }

  /* Lade-Spinner */
  .lade-indikator {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid var(--border); border-top-color: var(--info);
    border-radius: 50%; animation: spin 0.7s linear infinite;
    vertical-align: middle;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Pulse-Animation für Belohnungs-Feedback */
  @keyframes pop {
    0% { transform: scale(0.8); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  .pop-in { animation: pop 0.4s ease-out; }

  /* Sanftes Schiebe-Hover für Karten */
  .karte-klickbar { transition: all 0.15s ease; cursor: pointer; }
  .karte-klickbar:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

  /* ── Sanfte Bewegung & Übergänge (Apple-artig) ──────────────
     Jeder Seitenwechsel ersetzt #app > div – das neue Element
     blendet ruhig von unten ein. Easing = weiches Ausklingen. */
  @keyframes viewEnter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  #app > div { animation: viewEnter 0.30s cubic-bezier(0.16, 1, 0.3, 1) both; }

  /* Modal/Sheet etwas weicher mit dezentem Hochskalieren */
  .modal-overlay { animation: fadeIn 0.18s ease; }
  .modal { animation: sheetPop 0.26s cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes sheetPop {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Nutzerwunsch „weniger Bewegung" respektieren (System-Einstellung) */
  @media (prefers-reduced-motion: reduce) {
    #app > div, .modal, .modal-overlay, .pop-in,
    .karte-klickbar, button { animation: none !important; transition: none !important; }
    button:active:not(:disabled) { transform: none; }
  }

  /* Fortschrittsbalken */
  .progress-track {
    width: 100%; height: 8px;
    background: var(--border-light);
    border-radius: var(--radius-pill);
    overflow: hidden;
  }
  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--info), var(--info-dark));
    border-radius: var(--radius-pill);
    transition: width 0.5s ease;
  }
  .progress-fill.success {
    background: linear-gradient(90deg, var(--success), var(--success-dark));
  }
  
  /* Tag/Badge */
  .tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
  }

  /* Glossar-Wörter */
  .glossar-wort {
    cursor: pointer;
    border-bottom: 1px dashed var(--info);
    color: var(--info-dark);
    transition: background 0.1s;
  }
  .glossar-wort:hover, .glossar-wort:active {
    background: var(--info-bg);
    border-radius: 3px;
  }
  @keyframes popupErschein {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes diagrammLinie {
    to { stroke-dashoffset: 0; }
  }
  @keyframes menuein {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes willkommenEin {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  @keyframes willkommenWink {
    0% { transform: rotate(0deg) scale(0.5); opacity: 0; }
    30% { transform: rotate(-15deg) scale(1.1); opacity: 1; }
    50% { transform: rotate(15deg) scale(1.1); }
    70% { transform: rotate(-10deg) scale(1.05); }
    100% { transform: rotate(0deg) scale(1); }
  }
  @keyframes aufstiegPop {
    0% { transform: translateY(8px) scale(0.95); opacity: 0; }
    50% { transform: translateY(-4px) scale(1.03); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
  }
  .aufstieg-pop {
    animation: aufstiegPop 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Dezenter Puls für Arbeitsblätter mit dringender Frist (< 24h) */
  @keyframes abFristPuls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
  }
  .ab-frist-puls {
    animation: abFristPuls 2.5s ease-in-out infinite;
  }
  @keyframes tourFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes tourSlide {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .hilfe-icon { transition: transform 0.1s; }
  .hilfe-icon:hover { transform: scale(1.1); background: var(--info) !important; color: white !important; }
  
  /* Textlink-Knöpfe (Login: Registrieren / Passwort vergessen) */
  button.textlink:hover { color: var(--info) !important; transform: none !important; box-shadow: none !important; background: transparent !important; }
  button.textlink:active { transform: none !important; }
  
  /* Stadt-Namen-Knopf: dezenter Hover */
  button.stadt-titel-btn:hover { background: rgba(255,255,255,0.4) !important; transform: none !important; box-shadow: none !important; }
  button.stadt-titel-btn:active { transform: none !important; }

  /* ── Barrierefreiheit: sichtbarer Tastatur-Fokus ── */
  button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--info);
    outline-offset: 2px;
    border-radius: var(--radius);
  }

  /* ── Vorlesen-Button (Text-to-Speech) ── */
  .tts-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; min-height: 28px;
    font-size: 12px; font-weight: 500;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--card); color: var(--text-secondary);
    cursor: pointer; vertical-align: middle;
  }
  .tts-btn:hover { border-color: var(--info); color: var(--info-dark); background: var(--info-bg); }
  .tts-btn.tts-aktiv { border-color: var(--info); color: var(--info-dark); background: var(--info-bg); }
  .tts-btn.tts-aktiv .tts-icon { animation: ttsPuls 1s ease-in-out infinite; }
  @keyframes ttsPuls { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

  /* ── Reihenfolge-Aufgabe (Sortieren) ── */
  .sortier-liste { list-style: none; margin: 0; padding: 0; }
  .sortier-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; margin-bottom: 8px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); cursor: grab;
    user-select: none; -webkit-user-select: none;
    transition: box-shadow 0.15s, border-color 0.15s, opacity 0.15s;
  }
  .sortier-item:active { cursor: grabbing; }
  .sortier-item.dragging { opacity: 0.5; border-color: var(--info); box-shadow: 0 4px 12px rgba(59,130,246,0.25); }
  .sortier-item.drag-over { border-color: var(--info); box-shadow: 0 0 0 2px rgba(59,130,246,0.25); }
  .sortier-griff { color: var(--text-tertiary); font-size: 16px; line-height: 1; flex-shrink: 0; }
  .sortier-nr {
    width: 26px; height: 26px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--info-bg); color: var(--info-dark);
    font-size: 13px; font-weight: 600;
  }
  .sortier-pfeile { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }
  .sortier-pfeile button {
    padding: 2px 8px; min-height: 26px; font-size: 13px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card); cursor: pointer;
  }
  .sortier-pfeile button:hover { border-color: var(--info); color: var(--info-dark); }
  .sortier-item.korrekt { border-color: var(--success); background: var(--success-bg); }
  .sortier-item.falsch { border-color: var(--danger); background: var(--danger-bg); }

  /* ── Gamification: Konfetti + Streak ── */
  .konfetti-teil {
    position: fixed; top: -12px; width: 9px; height: 14px;
    z-index: 9999; pointer-events: none;
    animation: konfettiFall linear forwards;
  }
  @keyframes konfettiFall {
    to { transform: translateY(105vh) rotate(720deg); opacity: 0.7; }
  }
  .streak-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--warning-bg); color: var(--warning-dark);
    font-size: 13px; font-weight: 600;
  }
  .abzeichen-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--info-bg); color: var(--info-dark);
    font-size: 13px; font-weight: 600;
  }

  /* ── Antwortoptionen im „Wissensspeicher"-Stil ──
     Eckiger als Buttons (12px statt Pill), 2px-Rahmen, Hintergrund leicht
     abgesetzt – beim Hover übernimmt das Blau den Rahmen. */
  button.opt, button.quizOpt, button.ltOpt {
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 600;
    box-shadow: none;
  }
  button.opt:hover:not(:disabled), button.quizOpt:hover:not(:disabled), button.ltOpt:hover:not(:disabled) {
    border-color: var(--info);
    background: var(--bg);
    transform: none;
    box-shadow: none;
  }

  /* Lernserie-Chip: ins Blau eingereiht (eine Farbfamilie statt Gelb) */
  .streak-chip { background: var(--info-bg); color: var(--info-dark); }

  /* ── Schriftgröße (Schüler-Einstellung): zoom skaliert auch Inline-px ── */
  html[data-schrift="klein"] #app { zoom: 0.9; }
  html[data-schrift="gross"] #app { zoom: 1.15; }

  /* ── Mobile-Feinschliff ───────────────────────────────────── */
  @media (max-width: 640px) {
    /* Tabellen (Notenbuch, Übersichten): kompakter, horizontal scrollbar */
    table { font-size: 12px; }
    th, td { padding: 6px 6px !important; }
    /* Kopfzeilen-Knopfreihen umbrechen statt überlaufen */
    .seitenKopfKnoepfe, .gap8 { flex-wrap: wrap; }
    /* Modals: weniger Innenabstand, mehr Platz für Inhalt */
    .modal { padding: 1.1rem; max-height: 92vh; overflow-y: auto; }
    /* Bilder nie über den Rand */
    #app img, #app canvas { max-width: 100%; height: auto; }
    /* Feste Mindestbreiten in Zeilen lockern */
    .row > [style*="min-width: 2"] { min-width: 120px !important; }
  }