:root{
  --navy:#0f2d4a;--navy2:#183d62;--yellow:#f4c542;--cream:#f7f4ec;--white:#fff;
  --text:#18334d;--muted:#6a7b8d;--green:#3fa36c;--red:#c94b4b;--line:#dbe3ea;
  --shadow:0 10px 30px rgba(15,45,74,.12)
}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--cream);color:var(--text)}
a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}
.topbar{background:var(--navy);color:#fff;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand{font-weight:900;display:flex;align-items:center;gap:10px}.logo{width:40px;height:40px;border-radius:11px;background:var(--yellow);display:grid;place-items:center}
.wrap{max-width:1180px;margin:auto;padding:30px 24px 80px}.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:center;padding-top:56px}
h1{font-size:clamp(36px,5vw,66px);line-height:1.02;margin:.2em 0}.card{background:#fff;border:1px solid #edf1f4;border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.field{display:flex;flex-direction:column;gap:7px;margin:12px 0}.field input,.field textarea,.field select{padding:12px 13px;border:1px solid var(--line);border-radius:11px}
.btn{display:inline-block;border:0;border-radius:11px;padding:11px 16px;font-weight:800;background:var(--navy);color:#fff;cursor:pointer}.btn.yellow{background:var(--yellow);color:var(--navy)}.btn.light{background:#fff;color:var(--navy);border:1px solid var(--line)}
.badge{display:inline-block;border-radius:999px;padding:6px 10px;font-size:13px;font-weight:800;background:#eef3f7}.badge.green{background:#e7f5ed;color:#23744a}.badge.yellow{background:#fff6d6;color:#7a5c00}
.muted{color:var(--muted)}.small{font-size:13px}.progress{height:13px;background:#e8eef2;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:var(--yellow)}
.stat{background:#fff;border:1px solid #e8eef2;border-radius:14px;padding:15px}.stat b{display:block;font-size:25px}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:11px 10px;border-bottom:1px solid #edf1f4}.table th{font-size:13px;color:var(--muted)}
.feedback{margin:14px 0;padding:13px 14px;border-radius:11px;font-weight:700}.feedback.ok{background:#e7f5ed;color:#236642}.feedback.bad{background:#fff1f1;color:#8b2f2f}.hint{background:#fff8de;padding:12px 14px;border-radius:11px;margin-top:10px}
.exercise{font-size:24px;font-weight:800;margin:18px 0}.tokens{display:flex;flex-wrap:wrap;gap:9px}.token{padding:9px 11px;border:1px solid #ccd7df;border-radius:9px;background:white;cursor:pointer}.build{min-height:54px;border:2px dashed #ccd7df;border-radius:11px;padding:10px;margin:12px 0}
.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.right{margin-left:auto}
@media(max-width:820px){.hero,.grid2,.grid3{grid-template-columns:1fr}.wrap{padding-left:16px;padding-right:16px}}

/* SPRACHGARAGE DESIGN V2 */
:root{--v2bg:#090b10;--v2panel:#12161e;--v2line:#292f3a;--v2text:#f6f7fb;--v2muted:#9ca5b5;--v2red:#ff4d5e;--v2orange:#ff9f43;--v2green:#19d38a;--v2purple:#9b6cff;--v2yellow:#ffd84d}
html{color-scheme:dark}body{background:radial-gradient(circle at 50% -15%,#262b38,#0b0e14 38%,var(--v2bg) 70%);color:var(--v2text)}
.topbar,.sgn-top{background:rgba(9,11,16,.9)!important;color:#fff!important;border-bottom:1px solid var(--v2line);backdrop-filter:blur(16px);position:sticky;top:0;z-index:20}
.logo{background:var(--v2red)!important;color:#fff}.wrap,.sgn-wrap{max-width:1120px}
.card,.sg-panel,.mod,.sgn-card{background:linear-gradient(180deg,#171b24,#101319)!important;color:var(--v2text)!important;border:1px solid var(--v2line)!important;box-shadow:0 18px 50px rgba(0,0,0,.28)!important}
.muted,.meta{color:var(--v2muted)!important}.btn{background:#202530;color:#fff;border:1px solid var(--v2line)}
.btn.yellow,.btn.v2-primary,.sgn-actions .primary,.sgn-actions .check{background:var(--v2red)!important;color:#fff!important;border-color:var(--v2red)!important}
.btn.light{background:#171b23!important;color:#fff!important;border:1px solid var(--v2line)!important}
.field input,.field textarea,.field select,.gap,.repair,.writing{background:#0d1016!important;color:#fff!important;border-color:#353c49!important}
.progress,.sg-meter{background:#262b35!important}.progress span,.sg-meter span{background:var(--v2green)!important}
.sg-v2-footer{max-width:1120px;margin:0 auto;padding:26px 24px;text-align:right;border-top:1px solid var(--v2line);color:#737c8c;font-size:12px}
.sg-public{padding:55px 0 22px;text-align:center}.sg-public h1{font-size:clamp(48px,8vw,92px);letter-spacing:-.06em;margin:0;font-weight:1000}.sg-public h1 span{color:var(--v2red)}
.sg-key{color:var(--v2yellow);font-size:clamp(18px,2vw,24px);font-weight:900;margin:15px 0 8px}
.sg-features{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:26px 0}.sg-feature{background:#12161e;border:1px solid var(--v2line);border-radius:16px;padding:17px;text-align:center;font-weight:850}
.sg-feature:nth-child(1){border-top:3px solid var(--v2green)}.sg-feature:nth-child(2){border-top:3px solid var(--v2orange)}.sg-feature:nth-child(3){border-top:3px solid var(--v2purple)}.sg-feature:nth-child(4){border-top:3px solid var(--v2yellow)}
.sg-login{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}.sg-login .card:first-child{border-top:3px solid var(--v2red)!important}.sg-login button{width:100%;height:50px}
.sg-home{max-width:920px}.sg-welcome{padding:35px 0 18px}.sg-welcome h1{font-size:clamp(40px,7vw,68px)}
.sg-next{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;border-left:4px solid var(--v2red)!important;padding:24px!important}
.sg-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}.sg-stat{background:#12161e;border:1px solid var(--v2line);border-radius:15px;padding:16px}.sg-stat b{display:block;font-size:26px}
.sg-modules{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.sg-module{background:#12161e;border:1px solid var(--v2line);border-radius:15px;padding:17px;display:flex;gap:12px;align-items:center}.sg-dot{width:12px;height:12px;border-radius:50%;background:#59616e}.sg-module.started .sg-dot{background:var(--v2orange)}
.modgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}.mod{padding:20px!important}.mod .num{background:#343a46!important;color:#fff!important;border:0!important}.mod.is-started .num{background:var(--v2orange)!important;color:#17120a!important}.mod.is-done .num{background:var(--v2green)!important;color:#061b12!important}
.sgn-card.is-done{border-color:rgba(25,211,138,.45)!important}.sgn-num{background:#343a46!important;color:#fff!important}.sgn-card.is-done .sgn-num{background:var(--v2green)!important;color:#061b12!important}
.word-chip,.token,.option{background:#1b2029!important;color:#fff!important;border-color:#3a414e!important}.sgn-actions .solution{background:var(--v2orange)!important;color:#17120a!important}.sgn-actions .repeat{background:var(--v2purple)!important;color:#fff!important}
@media(max-width:760px){.sg-login,.sg-modules,.sg-stats,.modgrid{grid-template-columns:1fr!important}.sg-features{grid-template-columns:repeat(2,1fr)}}


/* =========================================================
   V2 FINAL – Modulkorrekturen 2026-09-02
   ========================================================= */

/* Das alte helle Modul-Theme darf V2 nicht mehr übermalen */
body{
  background:radial-gradient(circle at 50% -15%,#242a36 0,#0d1016 36%,#090b10 72%) !important;
  color:var(--v2text,#f6f7fb) !important;
}
.sgn-wrap{background:transparent !important}

/* alter gelber Header-Strich und gelber Zur-Garage-Button raus */
.sgn-top{
  border-bottom:1px solid var(--v2line,#292f3a) !important;
  background:rgba(9,11,16,.92) !important;
}
.sgn-top a{
  background:#171b23 !important;
  color:#f6f7fb !important;
  border:1px solid var(--v2line,#292f3a) !important;
  border-radius:11px !important;
}

/* Karten bleiben etwas heller als der Seitenhintergrund */
.sgn-card{
  background:linear-gradient(180deg,#171c25,#11151c) !important;
  color:#f6f7fb !important;
}
.sgn-card.is-done{
  background:linear-gradient(180deg,#15231f,#101915) !important;
  border-color:rgba(25,211,138,.42) !important;
}
.sgn-sections>h2,.sgn-prompt,.sgn-work,.sgn-cardhead h3{color:#f6f7fb !important}
.sgn-cardhead small{color:#9ca5b5 !important;opacity:1 !important}

/* Inputs */
input.gap,input.repair,textarea.writing,.sgn-built{
  background:#0b0f15 !important;
  color:#f6f7fb !important;
  border-color:#394250 !important;
}

/* Neu ordnen / sekundäre Aktion wieder lesbar */
.sgn-actions .ghost,
.sgn-actions .reset{
  background:#202630 !important;
  color:#f6f7fb !important;
  border-color:#3a4350 !important;
}

/* Feedback: hoher Kontrast im Dark Theme */
.sgn-feedback{
  color:#f6f7fb !important;
  border:1px solid transparent !important;
}
.sgn-feedback.good,
.sgn-feedback.ok{
  background:#123d2f !important;
  color:#b9f7dd !important;
  border-color:#207958 !important;
}
.sgn-feedback.bad{
  background:#451d25 !important;
  color:#ffc4cb !important;
  border-color:#8a3545 !important;
}

/* Lösung bleibt wirklich unsichtbar, bis JS sie nach 2 Fehlern freigibt.
   Wichtig: überschreibt das alte display:inline-flex !important. */
.sgn-actions button[hidden],
.sgn-card button[hidden],
[hidden]{
  display:none !important;
}

/* Aktionsfarben */
.sgn-actions .primary,
.sgn-actions .check,
.sgn-actions .save-writing{
  background:#ff4d5e !important;
  color:#fff !important;
  border-color:#ff4d5e !important;
}
.sgn-actions .solution{
  background:#ff9f43 !important;
  color:#17120a !important;
  border-color:#ff9f43 !important;
}
.sgn-actions .repeat{
  background:#9b6cff !important;
  color:#fff !important;
  border-color:#9b6cff !important;
}

/* Wörter/Auswahl */
.word-chip,.token,.option{
  background:#1a2029 !important;
  color:#f6f7fb !important;
  border-color:#3a4350 !important;
}
.word-chip:hover,.token:hover,.option:hover,
.word-chip.selected,.token.selected,.option.selected{
  background:#2b2341 !important;
  color:#fff !important;
  border-color:#9b6cff !important;
}

/* Mobile */
@media(max-width:650px){
  .sgn-card{box-shadow:none !important}
}


/* =========================================================
   V2 FINAL – dunkler Modulkopf für Modul 1–10
   ========================================================= */
.sgn-hero{
  background:linear-gradient(180deg,#171c25,#11151c) !important;
  color:#f6f7fb !important;
  border:1px solid #292f3a !important;
  border-radius:18px !important;
  box-shadow:0 18px 50px rgba(0,0,0,.28) !important;
  padding:26px 28px !important;
  margin:24px 0 28px !important;
}

.sgn-hero h1{
  color:#f6f7fb !important;
  opacity:1 !important;
  text-shadow:none !important;
}

.sgn-hero p{
  color:#9ca5b5 !important;
  opacity:1 !important;
}

.sgn-hero .sgn-kicker{
  background:rgba(255,216,77,.12) !important;
  color:#ffd84d !important;
  border:1px solid rgba(255,216,77,.28) !important;
}

.sgn-meter{
  background:#0d1117 !important;
  color:#f6f7fb !important;
  border:1px solid #303744 !important;
  border-radius:14px !important;
  min-width:126px !important;
  padding:14px 16px !important;
  box-shadow:none !important;
}

.sgn-meter b{
  color:#19d38a !important;
  opacity:1 !important;
}

.sgn-meter span{
  color:#9ca5b5 !important;
  background:none !important;
  opacity:1 !important;
}

@media(max-width:650px){
  .sgn-hero{
    padding:20px !important;
  }
  .sgn-meter{
    width:100% !important;
    min-width:0 !important;
  }
}