/* Lernmodule aus Space (Deutsch, Vokabular, 50 Tage), übernommen am 10.09.2026.
   Quelle: der <style>-Block von space/index.html. Herausgefiltert wurden alle Regeln,
   die Klassen der Console treffen (.view, .nav, .card, .main, .topbar, .toast, .btn,
   .badge, .search, .field, .ring, ...) — dort gewinnt bewusst das Console-Design.
   Entfernt wurden außerdem: .topbar-actions, /* Hell/Dunkel/System-Umschalter */
  .theme-switch, .theme-btn.active, .toast-neutral.
   .lede ist auf die neuen Ansichten begrenzt, weil die Anmeldekarte sie auch benutzt.
   Wenn hier etwas seltsam aussieht: erst in style.css nachsehen, wer gewinnt. */

.app-shell { min-height: 100vh; }
.topbar-brand { display: flex; flex-direction: column; }
.brand { font-size: 18px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
.brand-sub { font-size: 12px; color: var(--color-mid); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 2px; line-height: 1.33; }
.user-email { font-size: 12px; line-height: 1.33; color: var(--color-mid); overflow-wrap: anywhere; max-width: 220px; }
.btn-sm { height: 30px; padding: 6px 12px; font-size: 12px; }
.theme-btn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--radius-pill);
    background: transparent; border: none; color: var(--color-mid); cursor: pointer;
  }
.theme-btn svg { width: 15px; height: 15px; }
.theme-btn:hover { color: var(--color-ink); }
.eyebrow { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-mid); line-height: 1.33; }
#view-deutsch .lede, #view-vokabular .lede { font-size: 14px; color: var(--color-mid); margin-top: 8px; max-width: 52ch; }
.ring-card {
    flex: 1; min-width: 148px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    background: var(--color-paper); border: 1px solid var(--color-hairline);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 24px 16px;
  }
.ring-track { fill: none; stroke: var(--color-hairline); stroke-width: 8; }
.ring-progress {
    fill: none; stroke: var(--color-ink); stroke-width: 8; stroke-linecap: round;
    stroke-dasharray: 326.73;
    stroke-dashoffset: calc(326.73 - (326.73 * var(--pct, 0)) / 100);
    transition: stroke-dashoffset 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ring-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ring-value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ring-progress { transition: none; } }
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
@media (max-width: 980px) { .cards-2 { grid-template-columns: 1fr; } }
.word-big { font-size: 30px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
.meaning { color: var(--color-mid); margin-top: 4px; }
.examples { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.example {
    border-left: 2px solid var(--color-hairline);
    padding: 2px 0 2px 12px;
    color: var(--color-ink);
  }
.example strong { font-weight: 600; }
.swap { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.swap .old { color: var(--color-mid); text-decoration: line-through; font-size: 18px; }
.swap .arrow { color: var(--color-mid); }
.swap .new { font-size: 30px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
.nuance { color: var(--color-mid); margin-top: 4px; }
.btn-primary { background: var(--color-ink); color: var(--color-surface-alt); }
.btn-primary:disabled { opacity: 0.55; cursor: default; }
.btn-link { background: none; border: none; color: var(--color-mid); font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; padding: 4px 0; text-align: left; }
.btn-link:hover { color: var(--color-ink); }
/* List views */
  .view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.filter-pill {
    font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
    background: transparent; color: var(--color-mid); border: 1px solid var(--color-hairline);
    border-radius: var(--radius-pill); padding: 4px 10px;
  }
.filter-pill.active { background: var(--color-ink-soft); color: var(--color-surface-alt); border-color: var(--color-ink-soft); }
.entry-list { display: flex; flex-direction: column; gap: 12px; }
.entry {
    background: var(--color-paper);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
  }
.entry-top {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px; cursor: pointer;
  }
.entry-main { flex: 1; min-width: 0; }
.entry-word { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.entry-word .old-inline { color: var(--color-mid); text-decoration: line-through; font-weight: 400; font-size: 14px; }
.entry-word .arrow { color: var(--color-mid); font-weight: 400; }
.entry-meaning { color: var(--color-mid); margin-top: 2px; }
.entry-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.chevron { color: var(--color-mid); transition: transform 0.15s ease; }
.entry.open .chevron { transform: rotate(90deg); }
.entry-body { display: none; padding: 0 20px 16px 20px; }
.entry.open .entry-body { display: block; }
.entry-body .examples { margin-top: 8px; }
.entry-body .nuance { margin-bottom: 4px; }
.learn-btn {
    font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
    border-radius: var(--radius-pill); padding: 4px 10px;
    background: transparent; color: var(--color-mid); border: 1px solid var(--color-hairline);
    white-space: nowrap;
  }
.learn-btn.learned { background: var(--color-ink-soft); color: var(--color-surface-alt); border-color: var(--color-ink-soft); }
.overview-footer { margin-top: 40px; display: flex; justify-content: flex-end; }
/* ── Auth / Gate screens ─────────────────── */
  .gate {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--color-canvas);
  }
.auth-brand { margin-bottom: 20px; }
.auth-foot { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.loading { color: var(--color-mid); }
/* ── Bereich Deutsch ─────────────────────── */
  .deutsch-messung { display: flex; gap: 32px; flex-wrap: wrap; margin: 24px 0; }
.mess-label { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-mid); }
.mess-wert { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.33; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mess-klein { font-size: 12px; color: var(--color-mid); font-weight: 400; }
.mess-punkte { display: flex; align-items: center; gap: 4px; }
.tag-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--color-hairline); display: inline-block; }
.tag-punkt.aktiv { background: var(--color-ink); }
.deutsch-faellig { margin-bottom: 16px; }
.faellig-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; flex-wrap: wrap; }
.deutsch-weiter { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.weiter-titel { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-top: 2px; }
.deutsch-modul.gesperrt .entry-top { cursor: default; opacity: 0.55; }
.einheiten-liste { display: flex; flex-direction: column; gap: 4px; }
.einheit-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--color-hairline); }
.einheit-zeile:first-child { border-top: none; }
.einheit-name { font-size: 14px; }
/* Einheiten-Player */
  .lauf-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.lauf-balken { flex: 1; height: 6px; border-radius: 3px; background: var(--color-hairline); overflow: hidden; }
.lauf-balken-fuellung { height: 100%; background: var(--color-ink); border-radius: 3px; transition: width 0.3s ease; }
.lauf-karte { max-width: 640px; }
.lauf-frage { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 12px; }
.lauf-satz { font-size: 16px; margin-bottom: 12px; border-left: 2px solid var(--color-hairline); padding-left: 12px; }
.lauf-info { font-size: 16px; line-height: 1.5; }
.lauf-option {
    display: block; width: 100%; text-align: left;
    font-family: inherit; font-size: 14px; line-height: 1.43; cursor: pointer;
    background: var(--color-canvas); color: var(--color-ink);
    border: 1px solid transparent; border-radius: var(--radius-pill);
    padding: 10px 16px; margin-bottom: 8px;
  }
.lauf-option:hover:not(:disabled) { border-color: var(--color-hairline); background: var(--color-paper); }
.lauf-option:disabled { cursor: default; }
.lauf-option.gewaehlt { border-color: var(--color-ink); }
.lauf-option.korrekt { background: var(--color-ink); color: var(--color-surface-alt); }
.lauf-option.daneben { opacity: 0.5; text-decoration: line-through; }
.lauf-eingabe-zeile { display: flex; gap: 8px; flex-wrap: wrap; }
.lauf-textarea {
    width: 100%; background: var(--color-canvas); border: 1px solid var(--color-hairline);
    border-radius: var(--radius-nested); padding: 10px 14px; font-family: inherit; font-size: 14px;
    color: var(--color-ink); margin-bottom: 12px; resize: vertical;
  }
.lauf-textarea:focus { outline: none; background: var(--color-paper); }
.lauf-feedback { margin: 12px 0; font-size: 14px; line-height: 1.43; min-height: 20px; }
.lauf-hinweis { color: var(--color-mid); }
.lauf-loesung { font-weight: 600; }
.lauf-artefakt { margin-bottom: 12px; }
.md-h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 12px 0 6px; }
.md-h3 { font-size: 14px; font-weight: 600; margin: 10px 0 4px; }
.md-p { margin: 4px 0; }
.md-li { margin: 2px 0 2px 14px; position: relative; }
.md-li::before { content: "·"; position: absolute; left: -12px; color: var(--color-mid); }
.md-tabelle { border-collapse: collapse; margin: 8px 0; font-size: 13px; }
.md-tabelle th, .md-tabelle td { border: 1px solid var(--color-hairline); padding: 4px 10px; text-align: left; }
.md-tabelle th { color: var(--color-mid); font-weight: 500; }
/* ── Bereich 50 Tage ────────────────────── */
  .heute-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--color-hairline); }
.heute-zeile:first-of-type { border-top: none; }
.heute-zeile .einheit-name { flex: 1 1 130px; min-width: 104px; }
.heute-zeile.erledigt .einheit-name { color: var(--color-mid); }
.wert-eingabe { flex: 0 1 148px; min-width: 92px; }
.eingabe-schmal { flex: 0 1 88px; min-width: 70px; }
.caption-btn { flex: none; }
.post-schalter {
    flex: none; width: 44px; height: 44px; border-radius: 50%; padding: 0; position: relative;
    background: transparent; border: 1px solid var(--color-hairline); cursor: pointer;
  }
.post-schalter::after {
    content: ""; position: absolute; left: 16px; top: 13px; width: 9px; height: 15px;
    border: solid transparent; border-width: 0 2px 2px 0; transform: rotate(45deg);
  }
.post-schalter.an { background: var(--color-ink); border-color: var(--color-ink); }
.post-schalter.an::after { border-color: var(--color-paper); }
.post-schalter:disabled { opacity: 0.4; cursor: default; }
.haupt-schalter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.haupt-schalter .einheit-name { flex: 1 1 120px; }
.tag-strip { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 24px; }
.verlauf { width: 100%; height: 48px; margin: 8px 0; }
.verlauf-linie { fill: none; stroke: var(--color-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.verlauf-ziel { stroke: var(--color-mid); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.verlauf-best { stroke: var(--color-ink); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.weg-titel { font-size: 24px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.33; }
.pfad-prozent { font-size: 36px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.fort-zeile { padding: 10px 0; border-top: 1px solid var(--color-hairline); }
.fort-zeile:first-of-type { border-top: none; padding-top: 0; }
.fort-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.fort-plus { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.fort-zeile .lauf-balken { margin-bottom: 6px; }
/* Der Pfad: eine schlaengelnde Linie mit einem Knoten pro Tag, wie ein
     Duolingo-Levelpfad. x-Position der Knoten folgt einer Sinuskurve (in JS
     berechnet), Wochenenden ruecken enger zusammen. */
  .pfad { position: relative; width: 100%; margin: 8px 0 24px; }
.pfad-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pfad-linie { fill: none; stroke: var(--color-hairline); stroke-width: 3; stroke-linecap: round; }
.pfad-knoten {
    position: absolute; transform: translate(-50%, -50%); border-radius: 50%;
    border: 2px solid var(--color-hairline); background: var(--color-paper); color: var(--color-mid);
    display: flex; align-items: center; justify-content: center;
    font-family: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
    cursor: pointer; padding: 0; box-shadow: var(--shadow-card);
  }
.pfad-knoten svg { width: 46%; height: 46%; }
.pfad-knoten.voll { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-surface-alt); }
.pfad-knoten.teil { border-color: var(--color-ink); color: var(--color-ink); }
.pfad-knoten.leer { color: var(--color-hairline); }
.pfad-knoten.kommend { color: var(--color-hairline); cursor: default; box-shadow: none; }
.pfad-knoten.heute { border-color: var(--color-ink); border-width: 3px; color: var(--color-ink); }
.pfad-knoten.heute:not(.voll) { animation: pfad-puls 2.4s ease-in-out infinite; }
.pfad-knoten.ziel { background: var(--color-paper); border-color: var(--color-ink); border-width: 3px; color: var(--color-ink); }
@media (prefers-reduced-motion: reduce) { .pfad-knoten.heute:not(.voll) { animation: none; } }
@keyframes pfad-puls {
  0%, 100% { box-shadow: var(--shadow-card), 0 0 0 0 rgba(10,10,10,0.16); }
  50% { box-shadow: var(--shadow-card), 0 0 0 8px rgba(10,10,10,0); }
}
/* Der Pfad ist ueber 5000 px hoch. Ohne Fenster schoebe er alles andere auf
   der Buffer-Seite um fuenf Bildschirme nach unten. */
.weg-fenster { max-height: min(70vh, 620px); overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
@media (max-width: 720px) { .tag-punkt { width: 7px; height: 7px; } .tag-strip { gap: 3px; } }
.heute-zeile .einheit-name { order: 1; flex: 1 1 auto; min-width: 0; }
.heute-zeile .post-schalter { order: 2; margin-left: auto; }
.heute-zeile::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
.heute-zeile .wert-eingabe { order: 3; flex: 1 1 116px; }
.heute-zeile .eingabe-schmal { flex: 1 1 68px; }
.heute-zeile .mess-klein { order: 4; }
.heute-zeile .caption-btn { order: 5; margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
    .chevron { transition: none; }
.lauf-balken-fuellung { transition: none; }
}

/* ── Anpassungen an die Console ──
   Space hatte keine Topbar mit Seitentitel, deshalb tragen seine Module einen
   eigenen Kopf mit Modulnummer und Überschrift. In der Console steht der Titel
   schon oben, also bleibt vom Kopf nur der erklärende Satz stehen. */
#view-deutsch .view-head .eyebrow,
#view-deutsch .view-head h1,
#view-vokabular .view-head .eyebrow,
#view-vokabular .view-head h1,
#view-deutsch .view-head, #view-vokabular .view-head { margin-bottom: 14px; }
#view-deutsch .view-head .lede, #view-vokabular .view-head .lede { margin-top: 0; max-width: 78ch; }

/* Der Einheiten-Player ist auf 640 px Lesebreite gebaut. In der Console steht daneben
   sonst 800 px Leerfläche, also wird er mittig gesetzt. */
#view-deutsch .lauf-karte { margin-left: auto; margin-right: auto; }

/* Vokabular: Suchfeld und Kategorie-Pillen in einer Zeile, im Console-Panel. */
#view-vokabular .toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
#view-vokabular .vok-filter { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 767px) {
  /* Sechs Kategorien brauchten am Handy drei Zeilen und schoben die Wortliste nach
     unten. Jetzt eine Zeile, seitlich wischbar, bis an die Panel-Kante.
     ACHTUNG: Diese Regel muss hier stehen, nicht in style.css — lernmodule.css wird
     danach geladen und würde eine gleich spezifische Regel dort überschreiben. */
  #view-vokabular .vok-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: -14px;
    padding-inline: 14px;
    padding-bottom: 2px;
  }
  #view-vokabular .vok-filter::-webkit-scrollbar { display: none; }
  #view-vokabular .filter-pill { flex: none; }
  /* Ohne min-width:0 bläht die überbreite Pillenleiste den Flex-Container auf und
     schiebt das Suchfeld daneben aus dem Bild. */
  #view-vokabular .toolbar { align-items: stretch; min-width: 0; }
  #view-vokabular .toolbar > * { min-width: 0; }
}
@media (min-width: 900px) {
  #view-vokabular .toolbar { flex-direction: row; align-items: center; }
  #view-vokabular .toolbar .search { max-width: 320px; }
}