/* Grundlayout nach der alten Web-App (C:\dev\sprachenlernen): Farben, Kopfband, Karten, Knöpfe, Tabs.
   Keine kursiven Schriften (CLAUDE.md, Regel 7). */
:root{
  --bg:#eceef3;           /* heller grauer Hintergrund */
  --header:#4b3f9e;       /* violettes Kopfband */
  --header-soft:#c9c3ee;
  --accent:#e0556a;       /* Koralle: Titelteil, Knöpfe, Lernsprache */
  --green:#2fa37a;        /* richtig */
  --edge:#f5a623;         /* orange Kartenkante */
  --red:#d23f3f;
  --ink:#2b2b3a;
  --ink-soft:#7c8190;
  --line:#e2e5ec;
  --field:#f7f8fb;
  --card:#fff;
  --r:14px;
  --shadow:0 2px 8px rgba(43,43,58,.07);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;font-style:normal}
html,body{margin:0;min-height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
button{font-family:inherit}

/* ---------- Kopfband ---------- */
header{
  background:var(--header);color:#fff;position:relative;
  padding:calc(env(safe-area-inset-top) + 10px) 20px 18px;
}
.brand{font-weight:800;font-size:26px;margin:0;letter-spacing:.01em;line-height:1.05;text-transform:uppercase}
.brand span{color:var(--accent)}
.headtools{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:16px;display:flex;gap:6px}
.headtools button{background:rgba(255,255,255,.16);border:none;color:#fff;font-size:17px;
  width:36px;height:36px;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.headtools button:active{transform:scale(.93)}

/* Sprachpaar: nur Anzeige, Wechsel in den Einstellungen */
.langbar{display:flex;gap:10px;align-items:flex-end;margin-top:16px;width:100%;
  background:none;border:none;padding:0;cursor:pointer;text-align:left;color:inherit}
.langcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.langcol .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--header-soft);font-weight:600}
.langcol .val{font-size:14px;font-weight:600;padding:9px 10px;border-radius:9px;background:#fff;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.langbar .arrow{color:var(--header-soft);font-size:18px;font-weight:700;padding-bottom:9px;flex:0 0 auto}

main{padding:18px 16px calc(110px + env(safe-area-inset-bottom));max-width:640px;margin:0 auto}

/* ---------- Tabs unten ---------- */
nav{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:#fff;
  padding:8px;gap:6px;border-top:1px solid var(--line);
  padding-bottom:calc(8px + env(safe-area-inset-bottom));box-shadow:0 -2px 10px rgba(43,43,58,.05);
}
nav button{
  flex:1;font-size:12px;font-weight:600;padding:11px 4px;border:none;border-radius:11px;cursor:pointer;
  background:transparent;color:var(--ink-soft);letter-spacing:.02em;
  display:flex;flex-direction:column;align-items:center;gap:4px;transition:.18s;
}
nav button .ic{font-size:18px;line-height:1}
nav button.active{background:var(--accent);color:#fff}

/* ---------- Karten ---------- */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;margin-bottom:16px;
  border-left:6px solid var(--edge)}
.card.plain{border-left-color:var(--header)}
label.field{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);
  margin-bottom:8px;font-weight:600}
textarea,input[type=text],input[type=email],input[type=password],select{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--field);
  border:1.5px solid var(--line);border-radius:11px;padding:13px;line-height:1.45;
}
textarea{resize:vertical}
select{padding:11px 12px;font-weight:500}
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--accent);background:#fff}
textarea:disabled{opacity:.55}

/* ---------- Knöpfe ---------- */
.btn{
  font-family:inherit;font-weight:600;font-size:15px;cursor:pointer;border:none;border-radius:11px;
  padding:13px 18px;background:var(--accent);color:#fff;transition:.12s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:var(--shadow);
}
.btn:active{transform:scale(.97)}
.btn.block{width:100%}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn.green{background:var(--green)}
.btn.purple{background:var(--header)}
.btn.amber{background:var(--edge)}
.btn.red{background:var(--red)}
.btn.small{font-size:12px;padding:8px 12px;border-radius:9px}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.row{display:flex;gap:10px}
.row > *{flex:1}
.iconbtn{background:none;border:none;cursor:pointer;font-size:17px;padding:6px;color:var(--ink-soft);border-radius:8px}
.iconbtn:active{background:var(--field)}

.hint{font-size:12px;color:var(--ink-soft);margin-top:10px;line-height:1.55}
.center{text-align:center}
a{color:var(--header);font-weight:600}

.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom));z-index:50;
  background:var(--header);color:#fff;padding:11px 18px;border-radius:30px;font-size:13px;opacity:0;transition:.25s;
  pointer-events:none;max-width:90%;text-align:center;box-shadow:0 4px 14px rgba(43,43,58,.2);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}