* { margin:0; padding:0; box-sizing:border-box; }
  body { background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,sans-serif; min-height:100vh; }

  header { padding:16px 32px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
  .logo { font-size:1.3rem; font-weight:700; color:var(--accent-text); }
  .schueler-badge { background:var(--surface2); border:1px solid var(--border); border-radius:20px; padding:4px 14px; font-size:0.82rem; color:var(--text-muted); display:none; align-items:center; gap:8px; }
  .schueler-badge.visible { display:flex; }
  .abmelden-btn { background:none; border:1px solid var(--border); border-radius:6px; color:var(--text-muted); padding:3px 8px; cursor:pointer; font-size:0.75rem; }
  @media (hover:hover) { .abmelden-btn:hover { color:var(--error); border-color:var(--error); } }

  main { max-width:900px; margin:0 auto; padding:40px 20px 80px; }

  /* Schritt 1: Schulpasswort */
  #schritt-passwort { text-align:center; padding:60px 20px; }
  #schritt-passwort h1 { font-size:2rem; font-weight:700; margin-bottom:8px; }
  #schritt-passwort p { color:var(--text-muted); margin-bottom:32px; }
  .login-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px; max-width:380px; margin:0 auto; text-align:left; }

  .neu-link { display:block; text-align:center; margin-top:20px; font-size:0.82rem; color:var(--text-muted); }
  .neu-link a { color:var(--text-muted); text-decoration:underline; cursor:pointer; }
  @media (hover:hover) { .neu-link a:hover { color:var(--text); } }

  .klassencode-bereich { display:none; margin-top:20px; padding-top:20px; border-top:1px solid var(--border); }
  .klassencode-bereich.open { display:block; }

  /* Pfad-Badge (vorausgewählt via URL) */
  .pfad-badge {
    background:var(--surface2); border:1px solid var(--accent);
    border-radius:8px; padding:10px 14px; margin-bottom:16px;
    display:flex; align-items:center; gap:10px;
  }
  .pfad-badge-icon { font-size:1.1rem; }
  .pfad-badge-info { flex:1; }
  .pfad-badge-fach { font-size:0.7rem; font-weight:700; color:var(--accent-text); text-transform:uppercase; letter-spacing:1px; }
  .pfad-badge-titel { font-size:0.95rem; font-weight:600; margin-top:2px; }
  .pfad-badge-change { font-size:0.72rem; color:var(--text-muted); cursor:pointer; text-decoration:underline; white-space:nowrap; }
  @media (hover:hover) { .pfad-badge-change:hover { color:var(--text); } }

  /* Pfad-Auswahl Karten */
  .pfad-auswahl-liste { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
  .pfad-auswahl-karte {
    background:var(--surface2); border:1px solid var(--border); border-radius:8px;
    padding:10px 14px; cursor:pointer; transition:all 0.15s;
    display:flex; align-items:center; gap:10px;
  }
  @media (hover:hover) { .pfad-auswahl-karte:hover { border-color:var(--accent); } }
  .pfad-auswahl-karte.selected { border-color:var(--accent); background:rgba(var(--accent-rgb),0.08); }
  .pfad-auswahl-fach { font-size:0.7rem; font-weight:700; color:var(--accent-text); text-transform:uppercase; letter-spacing:1px; min-width:60px; }
  .pfad-auswahl-titel { font-size:0.9rem; font-weight:500; }
  .pfad-auswahl-check { margin-left:auto; color:var(--accent-text); font-size:1rem; opacity:0; }
  .pfad-auswahl-karte.selected .pfad-auswahl-check { opacity:1; }

  /* Form */
  .field-label { display:block; font-size:0.78rem; font-weight:600; color:var(--text-muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:0.5px; }
  .field { width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:9px 12px; color:var(--text); font-family:inherit; font-size:0.9rem; outline:none; transition:border-color 0.2s; margin-bottom:12px; }
  .field:focus { border-color:var(--accent); }
  .btn { width:100%; padding:10px; border:none; border-radius:8px; font-family:inherit; font-size:0.9rem; font-weight:700; cursor:pointer; transition:all 0.2s; }
  .btn-primary { background:var(--accent); color:var(--on-accent,#0f1117); }
  @media (hover:hover) { .btn-primary:hover { filter:brightness(0.93); } }
  .btn-success { background:var(--success); color:#0f1117; }
  @media (hover:hover) { .btn-success:hover { filter:brightness(0.93); } }
  .btn-secondary { background:var(--surface2); color:var(--text); border:1px solid var(--border); }
  .btn-sm { width:auto; padding:8px 14px; font-size:0.85rem; }
  .alert { padding:10px 14px; border-radius:8px; margin-bottom:10px; font-size:0.85rem; display:none; }
  .alert-error { background:rgba(224,82,82,0.15); border:1px solid var(--error); color:var(--error); }
  .alert-success { background:rgba(76,175,125,0.15); border:1px solid var(--success); color:var(--success); }

  /* Passwort */
  .pw-panel { max-width:440px; }

  /* Eingeloggt: Übersicht */
  #schritt-uebersicht { display:none; }
  .uebersicht-header { margin-bottom:32px; }
  .uebersicht-header h1 { font-size:1.8rem; font-weight:700; margin-bottom:4px; }
  .uebersicht-header p { color:var(--text-muted); font-size:0.9rem; }

  .klassen-section { margin-bottom:36px; }
  .klassen-section-titel {
    font-size:0.72rem; font-weight:700; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:1px;
    margin-bottom:12px; padding-bottom:8px;
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
  }
  .pfad-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
  .pfad-karte {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:20px; cursor:pointer;
    transition:all 0.2s; text-decoration:none; display:block; color:inherit;
  }
  @media (hover:hover) { .pfad-karte:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.3); } }
  .pfad-karte-fach { font-size:0.7rem; font-weight:700; color:var(--accent-text); text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
  .pfad-karte-titel { font-size:1rem; font-weight:700; margin-bottom:14px; line-height:1.3; }
  .pfad-karte-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .pfad-karte-klasse { font-size:0.78rem; color:var(--text-muted); }
  .pfad-karte-arrow { color:var(--accent-text); font-size:1.2rem; }

  /* Fortschritt auf Lernpfad-Karten */
  .pfad-status { flex:1; min-width:0; font-size:0.78rem; color:var(--text-muted); }
  .pfad-status.fertig { color:var(--success); font-weight:700; }
  .pfad-balken { display:block; height:6px; margin-bottom:5px; border-radius:3px; background:var(--surface2); overflow:hidden; }
  .pfad-balken span { display:block; height:100%; border-radius:3px; background:var(--accent); }
  .pfad-karte-arrow { flex-shrink:0; }

  /* Jetzt dran */
  .weiter-karte { display:flex; align-items:center; gap:14px; margin-top:8px; padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:inherit; text-decoration:none; transition:border-color 0.2s; }
  .weiter-karte-info { flex:1; min-width:0; display:flex; flex-direction:column; }
  .weiter-karte-info .pfad-karte-fach { margin-bottom:2px; }
  .weiter-karte-titel { font-weight:700; margin-bottom:8px; }
  .weiter-karte-info .pfad-status { max-width:320px; }
  .weiter-karte-aktion { flex-shrink:0; padding:10px 14px; border-radius:8px; background:var(--accent); color:var(--on-accent,#0f1117); font-size:0.85rem; font-weight:700; }
  @media (hover:hover) { .weiter-karte:hover { border-color:var(--accent); } }

  /* Lehrkraft-Filter */
  .filter-chips { flex-wrap:wrap; gap:8px; margin-bottom:20px; }
  .filter-chip { padding:7px 14px; border:1px solid var(--border); border-radius:20px; background:var(--surface); color:var(--text-muted); font-family:inherit; font-size:0.85rem; font-weight:600; cursor:pointer; transition:all 0.15s; }
  .filter-chip.aktiv { border-color:var(--accent); background:rgba(var(--accent-rgb),0.15); color:var(--text); }
  @media (hover:hover) { .filter-chip:hover { border-color:var(--accent); } }

  /* Beitreten-Modal */
  .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:100; align-items:center; justify-content:center; padding:20px; }
  .modal-overlay.open { display:flex; }
  .modal-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px; width:100%; max-width:400px; }
  .modal-box h2 { font-size:1.2rem; font-weight:700; margin-bottom:8px; }
  /* Wiederholung */
  .wr-timer-warn { color: #e05252 !important; animation: wr-puls 1s infinite; }
  @keyframes wr-puls { 0%,100% { opacity:1 } 50% { opacity:0.45 } }
  .modal-box p { color:var(--text-muted); font-size:0.85rem; margin-bottom:20px; }

  .spiele-kachel {
    display:flex; align-items:center; gap:14px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:18px 22px;
    cursor:pointer; transition:all 0.2s; text-decoration:none;
    color:inherit; margin-top:8px;
  }
  @media (hover:hover) { .spiele-kachel:hover { border-color:var(--accent); } }
  .spiele-kachel-icon { font-size:2rem; }
  .spiele-kachel-info { flex:1; }
  .spiele-kachel-titel { font-weight:700; font-size:1rem; margin-bottom:3px; }
  .spiele-kachel-sub { font-size:0.82rem; color:var(--text-muted); }
  .spiele-kachel-arrow { color:var(--accent-text); font-size:1.2rem; }

  /* Arbeitshefte */
  .heft-karte {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:20px; margin-top:8px;
  }
  .heft-karte-fach { font-size:0.7rem; font-weight:700; color:var(--accent-text); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
  .heft-karte-titel { font-size:1rem; font-weight:700; margin-bottom:8px; }
  .heft-karte-seite { font-size:0.85rem; color:var(--text-muted); margin-bottom:12px; }
  .heft-fortschritt-punkte { display:flex; gap:4px; margin-bottom:14px; }
  .heft-punkt { width:12px; height:12px; border-radius:50%; background:var(--surface2); border:1px solid var(--border); }
  .heft-punkt.aktiv { background:var(--accent); border-color:var(--accent); }
  .heft-punkt.done { background:var(--success); border-color:var(--success); }
  .heft-aktionen { display:flex; gap:8px; flex-wrap:wrap; }

  /* Code-Anzeige */
  .code-display { background:var(--surface2); border:2px solid var(--accent); border-radius:10px; padding:16px; text-align:center; margin:16px 0; display:none; }
  .code-display .code { font-family:monospace; font-size:1.6rem; font-weight:700; color:var(--accent-text); letter-spacing:4px; margin:8px 0; }
  .code-display p { font-size:0.82rem; color:var(--text-muted); }

  /* Flashcards Schüler */
  .fc-satz-karte {
    background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--radius);
    padding:18px 20px; margin-top:8px; display:flex; align-items:center; gap:14px; cursor:pointer; transition:all 0.2s;
  }
  @media (hover:hover) { .fc-satz-karte:hover { border-color:var(--accent); box-shadow:0 4px 16px rgba(0,0,0,0.25); transform:translateX(2px); } }
  .fc-satz-karte-info { flex:1; }
  .fc-satz-karte-titel { font-weight:700; font-size:0.95rem; margin-bottom:4px; }
  .fc-satz-karte-meta { font-size:0.78rem; color:var(--text-muted); }
  .fc-kasten { display:flex; gap:3px; margin-top:7px; align-items:flex-end; height:18px; }
  .fc-kasten span { width:16px; border-radius:2px 2px 0 0; background:var(--surface2); position:relative; }
  .fc-kasten span i { position:absolute; left:0; right:0; bottom:0; background:var(--accent); border-radius:2px 2px 0 0; }
  .fc-satz-aktionen { display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
  .fc-btn-faellig { background:var(--accent); color:var(--on-accent); border:none; border-radius:8px; padding:7px 12px; font:inherit; font-size:0.82rem; font-weight:700; cursor:pointer; white-space:nowrap; }
  .fc-btn-alle { background:none; border:1px solid var(--border); color:var(--text); border-radius:8px; padding:5px 10px; font:inherit; font-size:0.78rem; cursor:pointer; white-space:nowrap; }
  .fc-fach-badge { display:inline-block; font-size:0.72rem; color:var(--text-muted); border:1px solid var(--border); border-radius:999px; padding:1px 8px; margin-bottom:8px; }

  /* Übungsmodus */
  #fc-praxis-overlay { display:none; position:fixed; inset:0; background:var(--bg); z-index:200; flex-direction:column; }
  #fc-praxis-overlay.open { display:flex; }
  .fc-praxis-header { padding:16px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
  .fc-praxis-titel { font-weight:700; font-size:1rem; }
  .fc-praxis-fortschritt { font-size:0.82rem; color:var(--text-muted); }
  .fc-praxis-body { flex:1; display:flex; align-items:center; justify-content:center; padding:24px; }
  .fc-karte-box {
    background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--accent); border-radius:16px;
    padding:40px; width:100%; max-width:560px; text-align:center; min-height:300px;
    display:flex; flex-direction:column; justify-content:center; gap:20px;
    box-shadow:0 8px 32px rgba(0,0,0,0.35);
  }
  .fc-karte-vorder { font-size:1.25rem; font-weight:600; line-height:1.5; }
  .fc-karte-rueck { padding-top:20px; border-top:2px solid rgba(var(--accent-rgb),0.35); font-size:1.2rem; color:var(--text); font-weight:500; line-height:1.6; }
  .fc-karte-code { border-radius:8px; overflow:hidden; text-align:left; }
  .fc-praxis-actions { padding:16px 24px; border-top:1px solid var(--border); display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
  .btn-fc-nein { padding:12px 24px; border:2px solid var(--error); border-radius:10px; background:rgba(224,82,82,0.1); color:var(--error); font-family:inherit; font-size:1rem; font-weight:700; cursor:pointer; transition:all 0.2s; }
  @media (hover:hover) { .btn-fc-nein:hover { background:rgba(224,82,82,0.2); } }
  .btn-fc-ja { padding:12px 24px; border:2px solid var(--success); border-radius:10px; background:rgba(76,175,125,0.1); color:var(--success); font-family:inherit; font-size:1rem; font-weight:700; cursor:pointer; transition:all 0.2s; }
  @media (hover:hover) { .btn-fc-ja:hover { background:rgba(76,175,125,0.2); } }
  .btn-fc-umdrehen { padding:12px 28px; border:2px solid var(--accent); border-radius:10px; background:rgba(var(--accent-rgb),0.1); color:var(--accent-text); font-family:inherit; font-size:1rem; font-weight:700; cursor:pointer; transition:all 0.2s; }
  @media (hover:hover) { .btn-fc-umdrehen:hover { background:rgba(var(--accent-rgb),0.2); } }

  /* Lerntagebuch Schüler */
  #ltn-overlay { display:none; position:fixed; inset:0; background:var(--bg); z-index:200; flex-direction:column; overflow-y:auto; }
  #ltn-overlay.open { display:flex; }
  #lb-overlay { display:none; position:fixed; inset:0; background:var(--bg); z-index:200; flex-direction:column; overflow-y:auto; }
  #lb-overlay.open { display:flex; }
  .ltn-overlay-header { padding:16px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--bg); z-index:1; }
  .ltn-overlay-body { flex:1; max-width:680px; width:100%; margin:0 auto; padding:28px 20px 60px; }
  .ltn-eintrag-karte { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:16px; }
  .ltn-eintrag-datum { font-size:0.78rem; font-weight:700; color:var(--accent-text); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:14px; }
  .ltn-eintrag-feld { margin-bottom:10px; }
  .ltn-eintrag-label { font-size:0.72rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:3px; }
  .ltn-eintrag-wert { font-size:0.9rem; line-height:1.5; }
  .ltn-kommentar-box { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); background:rgba(var(--accent-rgb),0.06); border-radius:8px; padding:12px 14px; }
  .ltn-kommentar-label { font-size:0.72rem; font-weight:700; color:var(--accent-text); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
  .ltn-kommentar-text { font-size:0.88rem; line-height:1.6; font-style:italic; }

  /* Lernziel-Tracker Schüler */
  #lz-overlay { display:none; position:fixed; inset:0; background:var(--bg); z-index:200; flex-direction:column; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
  #lz-overlay::-webkit-scrollbar { width:6px; }
  #lz-overlay::-webkit-scrollbar-track { background:transparent; }
  #lz-overlay::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
  #lz-overlay::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }
  #lz-overlay.open { display:flex; }
  .lz-overlay-header { padding:16px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--bg); z-index:1; }
  .lz-overlay-body { flex:1; max-width:680px; width:100%; margin:0 auto; padding:28px 20px 60px; }
  .lz-ziel-item { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:18px; margin-bottom:14px; }
  .lz-ziel-text { font-size:0.95rem; font-weight:600; margin-bottom:14px; line-height:1.4; }
  .lz-emoji-reihe { display:flex; gap:8px; flex-wrap:wrap; }
  .lz-emoji-btn { background:var(--surface2); border:2px solid var(--border); border-radius:10px; padding:10px 14px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:72px; transition:all 0.15s; font-family:inherit; }
  .lz-emoji-btn span:first-child { font-size:1.5rem; }
  .lz-emoji-label { font-size:0.7rem; color:var(--text-muted); }
  @media (hover:hover) { .lz-emoji-btn:hover { border-color:var(--accent); background:rgba(var(--accent-rgb),0.08); } }
  .lz-emoji-btn.selected { border-color:var(--accent); background:rgba(var(--accent-rgb),0.15); }
  .lz-emoji-btn.selected .lz-emoji-label { color:var(--accent-text); }

  /* Kopfzeile + Auswahlkarten (vorher Inline-Hover) */
  .theme-btn { background:none; border:1px solid var(--border); border-radius:8px; color:var(--text-muted); padding:5px 10px; cursor:pointer; font-size:0.9rem; transition:all 0.2s; }
  .beitreten-btn { background:none; border:1px dashed var(--border); border-radius:var(--radius); padding:16px 32px; color:var(--text-muted); font-family:inherit; font-size:0.9rem; cursor:pointer; transition:all 0.2s; width:100%; max-width:400px; }
  .klassen-wahl-karte { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:10px 14px; cursor:pointer; transition:all 0.15s; }
  @media (hover:hover) {
    .theme-btn:hover { border-color:var(--accent); color:var(--accent-text); }
    .beitreten-btn:hover { border-color:var(--accent); color:var(--text); }
    .klassen-wahl-karte:hover { border-color:var(--accent); }
  }

  /* Touch-Geräte (iPad): größere Tap-Ziele */
  @media (pointer:coarse) {
    header { padding-top:8px; padding-bottom:8px; }
    .schueler-badge { padding:2px 2px 2px 14px; }
    footer a { display:inline-block; padding:12px 4px; }
    .btn, .btn-sm, .theme-btn, .abmelden-btn, .klassen-wahl-karte, .filter-chip { min-height:44px; }
    .theme-btn { min-width:44px; }
    .abmelden-btn { padding:3px 12px; }
    .neu-link a { display:inline-block; padding:12px 4px; }
    .field { min-height:44px; font-size:16px; }
    .pfad-badge-change { padding:12px 4px; }
  }
  /* Sichtbare Rückmeldung beim Antippen statt Hover */
  @media (hover:none) {
    .btn:active, .theme-btn:active, .abmelden-btn:active, .beitreten-btn:active, .pfad-karte:active, .weiter-karte:active, .filter-chip:active,
    .pfad-auswahl-karte:active, .spiele-kachel:active, .fc-satz-karte:active, .klassen-wahl-karte:active,
    .btn-fc-ja:active, .btn-fc-nein:active, .btn-fc-umdrehen:active, .lz-emoji-btn:active { opacity:0.65; }
  }