/* =====================================================================
   DER FREIHEITSCODE — Mitgliederbereich
   Markenfarben: Schwarz, Weiß, Blau. Mobile-first.
   Schriften wie auf der Landingpage:
     Space Grotesk (Überschriften), Inter (Fließtext), IBM Plex Mono (Labels)

   WICHTIG — Schriften selbst hosten:
   Die drei Schriften sind frei lizenziert (SIL OFL). Lade die .woff2-Dateien
   herunter und lege sie in  fonts/  ab. Google Fonts NICHT per Link einbinden —
   das überträgt IP-Adressen in die USA und ist in Deutschland abgemahnt worden.
   Fehlen die Dateien, greift automatisch die System-Schrift.
   ===================================================================== */

@font-face{font-family:'Space Grotesk';src:url('../fonts/SpaceGrotesk-Bold.woff2') format('woff2');
           font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/SpaceGrotesk-Medium.woff2') format('woff2');
           font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-Regular.woff2') format('woff2');
           font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-SemiBold.woff2') format('woff2');
           font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
           font-weight:500;font-style:normal;font-display:swap}

:root{
  --schwarz:#0A0B0D;
  --schwarz-2:#121419;
  --schwarz-3:#1A1D24;
  --rand:#252932;
  --rand-hell:#333844;
  --weiss:#FFFFFF;
  --grau:#9AA1AF;
  --grau-2:#6B7280;
  --blau:#2F6BFF;
  --blau-hell:#5C8CFF;
  --blau-dunkel:#1B4ACC;
  --blau-schleier:rgba(47,107,255,.12);
  --gruen:#22C55E;
  --warn:#F59E0B;

  --sg:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --in:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mo:'IBM Plex Mono',ui-monospace,'SF Mono',Consolas,monospace;

  --menue-h:64px;
  --kopf-h:52px;
  --sicher-u:env(safe-area-inset-bottom,0px);
  --sicher-o:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--schwarz);color:var(--weiss);
  font-family:var(--in);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
.versteckt{display:none !important}

/* ---------------- Ladeanzeige ---------------- */
.laden{position:fixed;inset:0;display:grid;place-content:center;gap:20px;
       justify-items:center;background:var(--schwarz);z-index:200}
.laden-code{font-family:var(--mo);font-size:13px;letter-spacing:.32em;color:var(--grau-2)}
.laden-balken{width:160px;height:2px;background:var(--rand);overflow:hidden;border-radius:2px}
.laden-balken i{display:block;height:100%;width:40%;background:var(--blau);
                animation:laufen 1.1s ease-in-out infinite}
@keyframes laufen{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

/* ---------------- Vollbild-Schirme ---------------- */
.schirm{position:fixed;inset:0;z-index:150;overflow-y:auto;background:var(--schwarz);
        padding:calc(32px + var(--sicher-o)) 24px calc(32px + var(--sicher-u));
        display:flex;align-items:center;justify-content:center}
.schirm-inhalt{max-width:460px;width:100%}
.schirm-icon{font-size:40px;margin-bottom:16px}
.schirm h1{font-family:var(--sg);font-size:30px;line-height:1.2;font-weight:700;margin-bottom:16px}
.schirm p{color:var(--grau);margin-bottom:14px}

.label{font-family:var(--mo);font-size:11px;letter-spacing:.22em;
       color:var(--blau);margin-bottom:10px;font-weight:500}

.textlink{color:var(--blau-hell);text-decoration:none;font-size:14px;
          display:inline-block;margin:6px 0 22px;border-bottom:1px solid transparent}
.textlink:hover{border-bottom-color:var(--blau-hell)}

.checkbox{display:flex;gap:12px;align-items:flex-start;margin:20px 0 24px;
          cursor:pointer;font-size:14px;color:var(--grau)}
.checkbox input{appearance:none;flex:0 0 22px;width:22px;height:22px;margin-top:1px;
                border:1.5px solid var(--rand-hell);border-radius:5px;cursor:pointer;
                position:relative;transition:.15s}
.checkbox input:checked{background:var(--blau);border-color:var(--blau)}
.checkbox input:checked::after{content:'✓';position:absolute;inset:0;display:grid;
                place-content:center;font-size:13px;color:#fff;font-weight:700}

/* ---------------- Knöpfe ---------------- */
.knopf{background:var(--blau);color:#fff;border-radius:10px;padding:13px 22px;
       font-family:var(--sg);font-weight:500;font-size:15px;transition:.15s;
       display:inline-flex;align-items:center;justify-content:center;gap:8px}
.knopf:hover:not(:disabled){background:var(--blau-dunkel)}
.knopf:disabled{opacity:.35;cursor:not-allowed}
.knopf.gross{width:100%;padding:15px}
.knopf.klein{padding:9px 16px;font-size:14px}
.knopf.leise{background:transparent;color:var(--grau);border:1px solid var(--rand-hell)}
.knopf.leise:hover:not(:disabled){background:var(--schwarz-3);color:var(--weiss)}
.knopf.rand{background:transparent;border:1px solid var(--blau);color:var(--blau-hell)}
.knopf.rand:hover:not(:disabled){background:var(--blau-schleier)}

/* ---------------- Kopfzeile ---------------- */
#kopf{position:fixed;top:0;left:0;right:0;height:calc(var(--kopf-h) + var(--sicher-o));
      padding-top:var(--sicher-o);background:rgba(10,11,13,.92);
      backdrop-filter:blur(12px);border-bottom:1px solid var(--rand);z-index:80}
.kopf-inhalt{height:var(--kopf-h);display:flex;align-items:center;gap:12px;padding:0 16px}
.marke{font-family:var(--mo);font-size:12px;letter-spacing:.22em;color:var(--grau-2)}
.kopf-zurueck{font-size:22px;line-height:1;color:var(--weiss);padding:4px 6px;margin-left:-6px}
.kopf-titel{font-family:var(--sg);font-size:15px;font-weight:500;
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------- Inhalt ---------------- */
#inhalt{padding:calc(var(--kopf-h) + var(--sicher-o) + 20px) 16px
                calc(var(--menue-h) + var(--sicher-u) + 32px);
        max-width:640px;margin:0 auto}

h2.ansicht-titel{font-family:var(--sg);font-size:26px;font-weight:700;
                 line-height:1.2;margin-bottom:6px}
p.ansicht-text{color:var(--grau);font-size:14px;margin-bottom:24px}

/* ---------------- Phasen-Pfad (Code-Motiv) ---------------- */
.phasen{position:relative;padding-left:34px}
.phasen::before{content:'';position:absolute;left:11px;top:14px;bottom:14px;
                width:2px;background:var(--rand)}
.phase{position:relative;margin-bottom:14px}
.phase-knoten{position:absolute;left:-34px;top:14px;width:24px;height:24px;
              border-radius:50%;background:var(--schwarz);border:2px solid var(--rand);
              display:grid;place-content:center;font-family:var(--mo);font-size:11px;
              color:var(--grau-2);font-weight:500;z-index:1}
.phase.laeuft .phase-knoten{border-color:var(--blau);color:var(--blau-hell);
              box-shadow:0 0 0 4px var(--blau-schleier)}
.phase.fertig .phase-knoten{border-color:var(--gruen);background:var(--gruen);color:#04140A}

.phase-karte{background:var(--schwarz-2);border:1px solid var(--rand);
             border-radius:14px;overflow:hidden}
.phase.laeuft .phase-karte{border-color:var(--rand-hell)}
.phase-kopf{padding:16px;display:flex;align-items:flex-start;gap:12px;
            width:100%;text-align:left}
.phase-kopf-text{flex:1;min-width:0}
.phase-label{font-family:var(--mo);font-size:10px;letter-spacing:.2em;
             color:var(--blau);margin-bottom:5px;font-weight:500}
.phase-titel{font-family:var(--sg);font-size:17px;font-weight:500;margin-bottom:3px}
.phase-unter{font-size:13px;color:var(--grau-2);line-height:1.45}
.phase-pfeil{color:var(--grau-2);font-size:13px;transition:transform .2s;margin-top:4px}
.phase.offen .phase-pfeil{transform:rotate(90deg)}

.phase-fortschritt{display:flex;align-items:center;gap:8px;margin-top:10px}
.fbalken{flex:1;height:3px;background:var(--rand);border-radius:2px;overflow:hidden}
.fbalken i{display:block;height:100%;background:var(--blau);border-radius:2px;
           transition:width .4s;position:relative;overflow:hidden}
.phase.fertig .fbalken i{background:var(--gruen)}
.fzahl{font-family:var(--mo);font-size:10px;color:var(--grau-2);white-space:nowrap}

.phase-koerper{display:none;border-top:1px solid var(--rand);padding:4px 0}
.phase.offen .phase-koerper{display:block}

.modul{padding:12px 16px 6px}
.modul + .modul{border-top:1px solid var(--rand)}
.modul-titel{font-family:var(--sg);font-size:14px;font-weight:500;margin-bottom:2px}
.modul-autor{font-family:var(--mo);font-size:10px;letter-spacing:.14em;
             color:var(--grau-2);margin-bottom:8px}

.lektion{display:flex;align-items:center;gap:11px;padding:10px 0;width:100%;text-align:left}
.lektion + .lektion{border-top:1px solid rgba(37,41,50,.6)}
.lek-status{flex:0 0 18px;height:18px;border-radius:50%;border:1.5px solid var(--rand-hell);
            display:grid;place-content:center;font-size:10px;color:var(--grau-2)}
.lektion.abgeschlossen .lek-status{background:var(--gruen);border-color:var(--gruen);color:#04140A}
.lektion.in_bearbeitung .lek-status{border-color:var(--blau);color:var(--blau-hell)}
.lek-text{flex:1;min-width:0;font-size:14px;line-height:1.4}
.lek-nr{font-family:var(--mo);font-size:11px;color:var(--grau-2);margin-right:7px}
.lek-marker{font-family:var(--mo);font-size:9px;letter-spacing:.12em;padding:2px 6px;
            border-radius:4px;background:var(--blau-schleier);color:var(--blau-hell)}

.phase-gesperrt{padding:14px 16px;font-size:13px;color:var(--grau-2);
                border-top:1px solid var(--rand);display:flex;gap:9px;align-items:flex-start}

/* ---------------- Lektionsansicht ---------------- */
.lek-kopf{margin-bottom:22px}
.lek-kopf .label{margin-bottom:8px}
.lek-kopf h1{font-family:var(--sg);font-size:25px;line-height:1.25;font-weight:700}
.lek-modul{font-size:13px;color:var(--grau-2);margin-top:7px}

.video{position:relative;width:100%;aspect-ratio:16/9;background:var(--schwarz-3);
       border-radius:12px;overflow:hidden;margin-bottom:22px;border:1px solid var(--rand)}
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0}

.lek-inhalt{font-size:16px;line-height:1.75;color:#E4E7EC}
.lek-inhalt p{margin-bottom:17px}
.lek-inhalt h3{font-family:var(--sg);font-size:18px;font-weight:500;
               margin:26px 0 11px;color:var(--weiss)}
.lek-inhalt ul,.lek-inhalt ol{margin:0 0 17px 20px}
.lek-inhalt li{margin-bottom:7px}
.lek-inhalt strong{color:var(--weiss);font-weight:600}
.lek-inhalt em{color:var(--blau-hell);font-style:normal}

.uebung{background:var(--schwarz-2);border-left:3px solid var(--blau);
        border-radius:0 12px 12px 0;padding:18px;margin:28px 0}
.uebung-titel{font-family:var(--sg);font-size:15px;font-weight:500;
              color:var(--blau-hell);margin-bottom:10px}
.uebung-text{font-size:14px;line-height:1.7;color:var(--grau)}
.uebung-text ol{margin:8px 0 0 18px}
.uebung-text li{margin-bottom:6px}

.fragen{margin-top:32px}
.fragen-titel{font-family:var(--mo);font-size:11px;letter-spacing:.2em;
              color:var(--grau-2);margin-bottom:14px}
.frage{margin-bottom:22px}
.frage-text{font-size:15px;font-weight:600;margin-bottom:9px;line-height:1.5}
.frage textarea{width:100%;min-height:110px;background:var(--schwarz-2);
                border:1px solid var(--rand);border-radius:10px;padding:13px;
                font-size:15px;line-height:1.6;resize:vertical;transition:border-color .15s}
.frage textarea:focus{outline:none;border-color:var(--blau)}
.frage textarea::placeholder{color:var(--grau-2)}
.sichern{font-family:var(--mo);font-size:10px;color:var(--grau-2);
         margin-top:6px;height:13px;transition:opacity .3s}
.sichern.ok{color:var(--gruen)}

.lek-fuss{display:flex;gap:10px;margin-top:32px;
          border-top:1px solid var(--rand);padding-top:22px}
.lek-fuss .knopf{flex:1}

.privat-hinweis{display:flex;gap:9px;align-items:flex-start;font-size:12px;
                color:var(--grau-2);background:var(--schwarz-2);border-radius:9px;
                padding:11px 13px;margin-bottom:18px;line-height:1.5}

/* ---------------- Quiz ---------------- */
.quiz-fortschritt{position:sticky;top:calc(var(--kopf-h) + var(--sicher-o));
                  background:var(--schwarz);padding:12px 0 16px;z-index:10}
.quiz-zahl{font-family:var(--mo);font-size:11px;letter-spacing:.16em;
           color:var(--grau-2);margin-bottom:8px}
.quiz-frage{font-family:var(--sg);font-size:22px;line-height:1.3;
            font-weight:500;margin-bottom:8px}
.quiz-hilfe{font-size:13px;color:var(--grau-2);margin-bottom:22px;line-height:1.55}
.quiz-optionen{display:flex;flex-direction:column;gap:10px}
.quiz-option{display:flex;gap:12px;align-items:center;background:var(--schwarz-2);
             border:1.5px solid var(--rand);border-radius:12px;padding:15px;
             text-align:left;transition:.15s;width:100%;font-size:15px;line-height:1.4}
.quiz-option:hover{border-color:var(--rand-hell)}
.quiz-option.gewaehlt{border-color:var(--blau);background:var(--blau-schleier)}
.quiz-kasten{flex:0 0 20px;height:20px;border:1.5px solid var(--rand-hell);
             border-radius:6px;display:grid;place-content:center;font-size:12px}
.quiz-option.gewaehlt .quiz-kasten{background:var(--blau);border-color:var(--blau);color:#fff}
.quiz-fuss{display:flex;gap:10px;margin-top:26px}
.quiz-fuss .knopf{flex:1}

/* Ergebnis */
.ergebnis-karte{background:linear-gradient(160deg,var(--schwarz-2),var(--schwarz-3));
                border:1px solid var(--rand-hell);border-radius:16px;padding:22px;margin-bottom:20px}
.ergebnis-kennung{font-family:var(--mo);font-size:40px;font-weight:500;
                  color:var(--blau);line-height:1;margin-bottom:10px}
.ergebnis-titel{font-family:var(--sg);font-size:24px;font-weight:700;
                line-height:1.2;margin-bottom:10px}
.ergebnis-kurz{color:var(--grau);font-size:15px;line-height:1.6}
.eckdaten{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
          gap:1px;background:var(--rand);border-radius:12px;overflow:hidden;margin:20px 0}
.eckdatum{background:var(--schwarz-2);padding:13px 12px}
.eckdatum dt{font-family:var(--mo);font-size:9px;letter-spacing:.14em;
             color:var(--grau-2);margin-bottom:5px}
.eckdatum dd{font-size:13px;font-weight:600;line-height:1.35}

.modell-liste{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.modell{background:var(--schwarz-2);border:1.5px solid var(--rand);border-radius:12px;
        padding:15px;text-align:left;width:100%;transition:.15s}
.modell:hover{border-color:var(--rand-hell)}
.modell.gewaehlt{border-color:var(--blau);background:var(--blau-schleier)}
.modell-titel{font-family:var(--sg);font-size:15px;font-weight:500;margin-bottom:5px;
              display:flex;align-items:center;gap:8px}
.modell-haken{color:var(--blau-hell);font-size:13px}
.modell-text{font-size:13px;color:var(--grau-2);line-height:1.55}

.angaben{display:flex;flex-direction:column;gap:1px;background:var(--rand);
         border-radius:12px;overflow:hidden}
.angabe{background:var(--schwarz-2);padding:13px 15px;display:flex;
        justify-content:space-between;gap:14px;align-items:baseline}
.angabe-frage{font-size:13px;color:var(--grau-2);flex:1}
.angabe-wert{font-size:13px;font-weight:600;text-align:right;flex:0 0 auto;max-width:55%}

/* ---------------- Karten allgemein ---------------- */
.karte{background:var(--schwarz-2);border:1px solid var(--rand);
       border-radius:14px;padding:18px;margin-bottom:14px}
.karte-titel{font-family:var(--sg);font-size:16px;font-weight:500;margin-bottom:8px}
.karte-text{font-size:14px;color:var(--grau);line-height:1.65}
.abschnitt-titel{font-family:var(--mo);font-size:11px;letter-spacing:.2em;
                 color:var(--grau-2);margin:28px 0 12px}

.leer{text-align:center;padding:52px 24px;color:var(--grau-2)}
.leer-icon{font-size:34px;margin-bottom:14px;opacity:.5}
.leer p{font-size:14px;line-height:1.6;max-width:300px;margin:0 auto}

/* ---------------- Ankündigungen ---------------- */
.ank{background:var(--schwarz-2);border:1px solid var(--rand);border-radius:14px;
     overflow:hidden;margin-bottom:14px}
.ank.neu{border-color:var(--blau)}
.ank-bild{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--schwarz-3)}
.ank-koerper{padding:17px}
.ank-kopf{display:flex;align-items:center;gap:9px;margin-bottom:8px;flex-wrap:wrap}
.ank-neu{font-family:var(--mo);font-size:9px;letter-spacing:.14em;background:var(--blau);
         color:#fff;padding:3px 7px;border-radius:4px}
.ank-datum{font-family:var(--mo);font-size:10px;color:var(--grau-2)}
.ank-titel{font-family:var(--sg);font-size:17px;font-weight:500;
           margin-bottom:8px;line-height:1.3}
.ank-text{font-size:14px;color:var(--grau);line-height:1.65;white-space:pre-wrap}
.ank-knopf{margin-top:15px;display:inline-flex;text-decoration:none}

/* ---------------- Support ---------------- */
.empfaenger-wahl{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:20px}
.empfaenger{background:var(--schwarz-2);border:1.5px solid var(--rand);border-radius:12px;
            padding:16px 13px;text-align:center;transition:.15s}
.empfaenger:hover{border-color:var(--rand-hell)}
.empfaenger.gewaehlt{border-color:var(--blau);background:var(--blau-schleier)}
.empfaenger-name{font-family:var(--sg);font-size:16px;font-weight:500;margin-bottom:5px}
.empfaenger-fuer{font-size:12px;color:var(--grau-2);line-height:1.5}

.eingabe{width:100%;background:var(--schwarz-2);border:1px solid var(--rand);
         border-radius:10px;padding:13px;font-size:15px;margin-bottom:12px}
.eingabe:focus{outline:none;border-color:var(--blau)}
.eingabe::placeholder{color:var(--grau-2)}
textarea.eingabe{min-height:130px;resize:vertical;line-height:1.6}

.thread{display:flex;gap:13px;align-items:flex-start;background:var(--schwarz-2);
        border:1px solid var(--rand);border-radius:12px;padding:15px;margin-bottom:11px;
        width:100%;text-align:left;transition:.15s}
.thread:hover{border-color:var(--rand-hell)}
.thread.ungelesen{border-color:var(--blau)}
.thread-avatar{flex:0 0 36px;height:36px;border-radius:50%;background:var(--schwarz-3);
               display:grid;place-content:center;font-family:var(--sg);
               font-size:14px;font-weight:500;color:var(--blau-hell)}
.thread-koerper{flex:1;min-width:0}
.thread-kopf{display:flex;justify-content:space-between;gap:10px;
             align-items:baseline;margin-bottom:3px}
.thread-name{font-family:var(--sg);font-size:14px;font-weight:500}
.thread-zeit{font-family:var(--mo);font-size:10px;color:var(--grau-2);flex:0 0 auto}
.thread-vorschau{font-size:13px;color:var(--grau-2);overflow:hidden;
                 text-overflow:ellipsis;white-space:nowrap}

.verlauf{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.blase{max-width:85%;padding:12px 15px;border-radius:14px;font-size:14.5px;
       line-height:1.6;white-space:pre-wrap;word-break:break-word}
.blase.ich{align-self:flex-end;background:var(--blau);border-bottom-right-radius:4px}
.blase.admin{align-self:flex-start;background:var(--schwarz-3);
             border:1px solid var(--rand);border-bottom-left-radius:4px}
.blase-zeit{font-family:var(--mo);font-size:9px;opacity:.6;
            display:block;margin-top:6px}

/* ---------------- Profil ---------------- */
.profil-kopf{display:flex;align-items:center;gap:15px;margin-bottom:26px}
.profil-bild{width:60px;height:60px;border-radius:50%;background:var(--schwarz-3);
             object-fit:cover;display:grid;place-content:center;
             font-family:var(--sg);font-size:22px;font-weight:700;color:var(--blau-hell)}
.profil-name{font-family:var(--sg);font-size:20px;font-weight:500}
.profil-rolle{font-family:var(--mo);font-size:10px;letter-spacing:.16em;color:var(--grau-2)}

.zeile{display:flex;justify-content:space-between;align-items:center;gap:14px;
       background:var(--schwarz-2);border:1px solid var(--rand);
       border-radius:12px;padding:15px;margin-bottom:10px;width:100%;text-align:left}
.zeile-text{flex:1;min-width:0}
.zeile-titel{font-size:14.5px;font-weight:600;margin-bottom:2px}
.zeile-unter{font-size:12.5px;color:var(--grau-2);line-height:1.5}
.zeile-pfeil{color:var(--grau-2);flex:0 0 auto}

.schalter{position:relative;flex:0 0 46px;height:26px;background:var(--rand);
          border-radius:13px;transition:.2s}
.schalter.an{background:var(--blau)}
.schalter::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;
                 background:#fff;border-radius:50%;transition:.2s}
.schalter.an::after{transform:translateX(20px)}

/* ---------------- Bottom-Menü ---------------- */
#menue{position:fixed;bottom:0;left:0;right:0;
       height:calc(var(--menue-h) + var(--sicher-u));padding-bottom:var(--sicher-u);
       background:rgba(10,11,13,.95);backdrop-filter:blur(14px);
       border-top:1px solid var(--rand);display:flex;z-index:90}
.menue-punkt{flex:1;display:flex;flex-direction:column;align-items:center;
             justify-content:center;gap:3px;color:var(--grau-2);
             transition:color .15s;position:relative;padding:0 2px}
.menue-punkt.aktiv{color:var(--blau-hell)}
.menue-icon{font-size:17px;line-height:1}
.menue-text{font-size:10px;letter-spacing:.01em;text-align:center;line-height:1.2}
.punkt{position:absolute;top:9px;right:calc(50% - 18px);width:7px;height:7px;
       background:var(--blau);border-radius:50%;border:1.5px solid var(--schwarz)}

/* ---------------- Tooltip-Tour ---------------- */
#tour{position:fixed;inset:0;z-index:170}

/* Die Abdunklung entsteht ALLEIN durch den riesigen Schatten um das Loch.
   Eine zweite deckende Ebene darüber würde das Ausgeschnittene wieder
   zudecken — genau das war vorher der Fehler. Diese Ebene fängt deshalb
   nur noch Klicks ab und ist selbst durchsichtig. */
.tour-abdunkeln{position:absolute;inset:0;background:transparent}
.tour-loch{position:absolute;border-radius:14px;pointer-events:none;
           background:rgba(47,107,255,.07);
           box-shadow:0 0 0 9999px rgba(8,10,14,.72),
                      0 0 0 2px var(--blau),
                      0 0 26px 6px rgba(47,107,255,.45);
           transition:all .32s cubic-bezier(.4,0,.2,1);
           animation:leuchten 2.4s ease-in-out infinite}
@keyframes leuchten{
  0%,100%{box-shadow:0 0 0 9999px rgba(8,10,14,.72),0 0 0 2px var(--blau),
                     0 0 26px 6px rgba(47,107,255,.45)}
  50%    {box-shadow:0 0 0 9999px rgba(8,10,14,.72),0 0 0 2px var(--blau-hell),
                     0 0 34px 10px rgba(47,107,255,.6)}
}
.tour-blase{position:absolute;background:var(--schwarz-2);border:1px solid var(--rand-hell);
            border-radius:14px;padding:17px;max-width:300px;
            transition:all .32s cubic-bezier(.4,0,.2,1);
            box-shadow:0 14px 40px rgba(0,0,0,.55)}
.tour-zaehler{font-family:var(--mo);font-size:10px;letter-spacing:.18em;
              color:var(--blau);margin-bottom:8px}
.tour-blase p{font-size:14.5px;line-height:1.6;margin-bottom:15px}
.tour-knoepfe{display:flex;gap:9px}
.tour-knoepfe .knopf{flex:1}

/* ---------------- Meldung ---------------- */
#meldung{position:fixed;left:50%;transform:translateX(-50%);
         bottom:calc(var(--menue-h) + var(--sicher-u) + 18px);
         background:var(--schwarz-3);border:1px solid var(--rand-hell);
         border-radius:10px;padding:12px 18px;font-size:14px;z-index:190;
         max-width:calc(100% - 32px);text-align:center;
         box-shadow:0 8px 28px rgba(0,0,0,.5);animation:auftauchen .2s ease}
#meldung.fehler{border-color:#7F1D1D;background:#2A1315}
@keyframes auftauchen{from{opacity:0;transform:translate(-50%,10px)}
                      to{opacity:1;transform:translate(-50%,0)}}

/* =====================================================================
   BEWEGUNG
   Jede Ansicht baut ihren Inhalt neu auf — deshalb laufen diese
   Animationen automatisch beim Wechsel, ohne Zutun im JavaScript.
   Bewusst kurz und dezent: Bewegung soll Orientierung geben,
   nicht auffallen.
   ===================================================================== */

@keyframes rein{
  from{opacity:0;transform:translateY(10px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes reinSeite{
  from{opacity:0;transform:translateX(14px)}
  to  {opacity:1;transform:translateX(0)}
}
@keyframes aufploppen{
  0%  {opacity:0;transform:scale(.82)}
  60% {opacity:1;transform:scale(1.04)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes aufklappen{
  from{opacity:0;transform:translateY(-6px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes pulsieren{
  0%,100%{box-shadow:0 0 0 4px var(--blau-schleier)}
  50%    {box-shadow:0 0 0 7px rgba(47,107,255,.05)}
}

/* Kopfbereich jeder Ansicht */
.ansicht-titel{animation:rein .34s ease both}
.ansicht-text {animation:rein .34s ease .04s both}

/* Listen laufen gestaffelt ein — das Auge folgt der Reihenfolge */
.phase,.ank,.thread,.modell,.zeile,.karte,.eckdatum,.angabe{
  animation:rein .38s ease both}
/* Ankündigungen sind die einzigen <article> im Inhalt — nth-of-type trifft
   sie zuverlässig, nth-child würde an Überschrift und Text danebenzählen. */
.ank:nth-of-type(2){animation-delay:.07s}
.ank:nth-of-type(3){animation-delay:.12s}
.ank:nth-of-type(4){animation-delay:.17s}
.phase:nth-child(1){animation-delay:.02s}
.phase:nth-child(2){animation-delay:.07s}
.phase:nth-child(3){animation-delay:.12s}
.phase:nth-child(4){animation-delay:.17s}
.phase:nth-child(5){animation-delay:.22s}
.phase:nth-child(6){animation-delay:.27s}
.modell:nth-child(2),.zeile:nth-child(2){animation-delay:.05s}
.modell:nth-child(3),.zeile:nth-child(3){animation-delay:.09s}
.modell:nth-child(4){animation-delay:.13s}
.modell:nth-child(5){animation-delay:.17s}
.modell:nth-child(6){animation-delay:.21s}
.eckdatum:nth-child(2){animation-delay:.06s}
.eckdatum:nth-child(3){animation-delay:.12s}

/* Die laufende Phase atmet leicht — sie zeigt, wo du gerade bist */
.phase.laeuft .phase-knoten{animation:pulsieren 2.8s ease-in-out infinite}

/* Module und Lektionen erscheinen beim Aufklappen */
.phase.offen .phase-koerper{animation:aufklappen .26s ease both}

/* Lektionsansicht: Abschnitte nacheinander */
.lek-kopf   {animation:rein .34s ease both}
.video      {animation:rein .34s ease .05s both}
.lek-inhalt {animation:rein .38s ease .08s both}
.uebung     {animation:rein .38s ease .14s both}
.fragen     {animation:rein .38s ease .2s both}
.lek-fuss   {animation:rein .38s ease .26s both}

/* Quiz: Frage kommt von rechts, Antworten laufen darunter ein */
.quiz-frage   {animation:reinSeite .3s ease both}
.quiz-hilfe   {animation:reinSeite .3s ease .04s both}
.quiz-option  {animation:rein .3s ease both}
.quiz-option:nth-child(1){animation-delay:.06s}
.quiz-option:nth-child(2){animation-delay:.1s}
.quiz-option:nth-child(3){animation-delay:.14s}
.quiz-option:nth-child(4){animation-delay:.18s}
.quiz-option:nth-child(5){animation-delay:.22s}
.quiz-option:nth-child(6){animation-delay:.26s}
.quiz-option:nth-child(7){animation-delay:.3s}
.quiz-option:nth-child(8){animation-delay:.34s}
.quiz-kasten{transition:background .18s,border-color .18s,transform .18s}
.quiz-option.gewaehlt .quiz-kasten{transform:scale(1.12)}

/* Das Ergebnis ist der Höhepunkt von Phase 3 — der Buchstabe darf auffallen */
.ergebnis-karte  {animation:rein .45s ease both}
.ergebnis-kennung{animation:aufploppen .5s cubic-bezier(.34,1.4,.5,1) .12s both}

/* Nachrichten erscheinen einzeln */
.blase{animation:rein .3s ease both}
.blase:nth-child(2){animation-delay:.05s}
.blase:nth-child(3){animation-delay:.1s}
.blase:nth-child(4){animation-delay:.15s}

/* Rückmeldung beim Antippen */
.knopf:active:not(:disabled){transform:scale(.97)}
.knopf{transition:background .15s,transform .1s,opacity .15s}
.quiz-option:active,.modell:active,.empfaenger:active{transform:scale(.985)}
.quiz-option,.modell,.empfaenger{transition:border-color .15s,background .15s,transform .1s}
.lektion{transition:opacity .15s}
.lektion:active{opacity:.55}
.menue-punkt:active .menue-icon{transform:scale(.85)}
.menue-icon{transition:transform .15s}
.menue-punkt.aktiv .menue-icon{animation:aufploppen .3s ease}

/* Tour-Sprechblase */
.tour-blase{animation:aufploppen .28s cubic-bezier(.34,1.3,.5,1) both}

/* Fortschrittsbalken füllt sich sichtbar auf */
.fbalken i{animation:none}
.phase .fbalken i{transition:width .6s cubic-bezier(.4,0,.2,1) .3s}

/* ---------------- Konfetti ---------------- */
.konfetti{position:fixed;inset:0;pointer-events:none;z-index:250}

/* ---------------- Willkommensbildschirm ---------------- */
.willkommen-inhalt{text-align:center}
.willkommen-inhalt .label{margin-bottom:12px}
.willkommen-inhalt p{text-align:left}
.willkommen-inhalt .knopf{margin-top:12px}
.wk-siegel{width:78px;height:78px;margin:0 auto 22px;border-radius:50%;
           display:grid;place-content:center;font-size:34px;
           background:radial-gradient(circle at 50% 35%,rgba(47,107,255,.28),transparent 70%);
           border:1.5px solid var(--blau);
           animation:siegel .9s cubic-bezier(.34,1.4,.5,1) both,
                     siegelPuls 3s ease-in-out 1s infinite}
@keyframes siegel{
  from{opacity:0;transform:scale(.4) rotate(-25deg)}
  to  {opacity:1;transform:scale(1) rotate(0)}
}
@keyframes siegelPuls{
  0%,100%{box-shadow:0 0 0 0 rgba(47,107,255,.35)}
  50%    {box-shadow:0 0 0 14px rgba(47,107,255,0)}
}
#willkommen h1{animation:rein .5s ease .18s both}
#willkommen p:nth-of-type(1){animation:rein .5s ease .26s both}
#willkommen p:nth-of-type(2){animation:rein .5s ease .34s both}
#willkommen .knopf:nth-of-type(1){animation:rein .5s ease .44s both}
#willkommen .knopf:nth-of-type(2){animation:rein .5s ease .5s both}

/* Abgeschlossene Phase feiert kurz mit */
.phase.fertig .phase-knoten{animation:aufploppen .45s cubic-bezier(.34,1.4,.5,1)}

/* Der Fortschrittsbalken bekommt einen wandernden Lichtschein */
.fbalken{position:relative}
.phase.laeuft .fbalken i::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:wandern 2.6s ease-in-out infinite}
@keyframes wandern{
  0%  {transform:translateX(-100%)}
  60%,100%{transform:translateX(220%)}
}

/* Erledigte Lektion: der Haken springt kurz auf */
.lektion.abgeschlossen .lek-status{animation:aufploppen .35s cubic-bezier(.34,1.4,.5,1)}

/* Tastaturbedienung sichtbar machen */
.knopf:focus-visible,.quiz-option:focus-visible,.modell:focus-visible,
.lektion:focus-visible,.menue-punkt:focus-visible,.thread:focus-visible,
.zeile:focus-visible,.empfaenger:focus-visible,.phase-kopf:focus-visible{
  outline:2px solid var(--blau);outline-offset:2px}

/* ---------------- Größere Bildschirme ---------------- */
@media (min-width:720px){
  .menue-text{font-size:11px}
  #inhalt{padding-left:24px;padding-right:24px}
}

/* Wer Bewegung reduziert haben will, bekommt sie nicht. */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .knopf:active:not(:disabled),.quiz-option:active,
  .modell:active,.empfaenger:active{transform:none}
}