/* ===========================================
   Design System – Gradient + Glass (clean)
   Mobile-first Basis, Desktop-Overrides @ 1024px
   =========================================== */

:root{
  /* Dark base */
  --bg:#0f0f10;
  --bg-grad-1:#0f0f10;
  --bg-grad-2:#16181c;

  /* Text & lines */
  --text:#eef1f3;
  --muted:#ffffff;
  --border:rgba(255,255,255,0.18);
  --hairline:rgba(255,255,255,0.08);

  /* Accent gradients (Topbar/Buttons) */
  --grad-start:#ff6a5b;
  --grad-end:#ff9a8b;

  /* Functional colors */
  --primary:#4ea1d3;
  --green:#2ea44f;
  --yellow:#fec700;
  --blue:#1b8dff;
  --danger:#ef4444;

  /* Radii / shadows */
  --radius:50px; /* spätere Definition gewinnt */
  --pad:16px;
  --maxw:1120px;
  --glass-bg:rgba(255,255,255,0.06);
  --glass-bg-strong:rgba(255,255,255,0.10);
  --glass-blur:12px;
  --elev:0 10px 30px rgba(0,0,0,0.35);
  --elev-soft:0 6px 18px rgba(0,0,0,0.28);
}

/* ===== Base (Mobile) ===== */
*{box-sizing:border-box}
html,body{height:100%}

html{
  font-size:12px;              /* Mobile Root */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:auto;
  color:var(--text);
  font:24px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; /* belassen wie im Original */
  background:
    radial-gradient(at 20% 20%, rgba(255, 94, 98, 0.4), transparent 50%),
    radial-gradient(at 80% 30%, rgba(255, 195, 113, 0.4), transparent 50%),
    radial-gradient(at 30% 70%, rgba(72, 219, 251, 0.4), transparent 50%),
    radial-gradient(at 70% 80%, rgba(123, 237, 159, 0.4), transparent 50%),
    #0e0e0e;
  background-size:cover;
  background-attachment:fixed;
  display:flex;
  align-items:center;
  flex-direction:column;
  width:100%;
}

/* Utility */
.container{
  margin-top:10%;
  width:98%;
  padding:20px;
  text-align:center;
  box-sizing:border-box;
  border-radius:var(--radius);
  background:var(--glass-bg);
  border:1px solid var(--hairline);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--elev-soft);
}
.center{display:grid; place-items:center}
.grid{display:grid; gap:16px}

/* ===== Glass Panels / Cards / Hero ===== */
.card,.glass{
  background:var(--glass-bg);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--elev-soft);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
}
.panel-strong{ background:var(--glass-bg-strong); border:1px solid var(--border) }
.hero{
  position:relative; overflow:hidden; padding:28px;
  border-radius:calc(var(--radius) + 4px);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border:1px solid var(--hairline);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
  box-shadow:var(--elev);
}
.hero::after{
  content:""; position:absolute; inset:-20% -30% auto auto; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,154,139,.35), transparent 70%);
  filter:blur(20px); pointer-events:none;
}

/* ===== Headings & Typography ===== */
h1{
  margin:0 0 10px; font-size:2.5rem; display:flex; justify-content:space-between; align-items:center; text-align:center;
}
h2{margin:0 0 10px; font-size:2.5rem}
.lead{font-size:1.8rem; margin:.5rem 0 1rem}
.muted{color:var(--muted)}
.small{font-size:1.2rem; color:lightgray}
a{color:#dbeafe; text-decoration:none}
a:hover{text-decoration:none}

p{font-size: 3rem;}


/* ===== Buttons ===== */
.btn{
  display:inline-flex; cursor:pointer; align-items:center; justify-content:center; gap:.5rem;
  padding:.2rem .5rem; border-radius:50px; text-decoration:none; font-weight:600;
  border:1px solid rgba(255,255,255,.18); white-space:nowrap; background:rgba(255,255,255,0.08);
  -webkit-backdrop-filter:blur(8px) saturate(140%); backdrop-filter:blur(8px) saturate(140%);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
  font-size:2.5rem;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05); text-decoration:none; background:rgba(255,255,255,.28) }
.btn-danger{ background:linear-gradient(135deg, rgba(239,68,68,0.85), rgba(220,38,38,0.85)); color:#fff }
.btn-primary{ color:#fff }
.btn-ghost{ background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.18); text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,0.25) }
.btn-ghost:hover{ filter:brightness(1.05); text-decoration:none; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.25); background:rgba(255,255,255,.28) }

/* Sprach-Buttons */
.lang-buttons{ display:grid; gap:12px; grid-template-columns:1fr; margin-top:.5rem; font-size:1.2rem }
.lang-buttons .btn{ box-shadow:0 4px 12px rgba(0,0,0,0.25) }

/* ===== Forms ===== */
form .row{display:grid; gap:12px}
label{display:block; margin-bottom:.4rem; color:var(--text); opacity:.9}
input[type="text"], input[type="email"], input[type="password"], select, textarea{
  width:100%; background:rgba(255,255,255,.06); color:var(--text); border:1px solid var(--hairline);
  padding:.65rem .9rem; border-radius:12px; outline:none; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:box-shadow .15s ease, border-color .15s ease;
}
input::placeholder, textarea::placeholder{ color:rgba(255,255,255,.45) }
input:focus, select:focus, textarea:focus{ border-color:rgba(255,255,255,.28); box-shadow:0 0 0 3px rgba(78,161,211,.25) }
input[type="checkbox"]{ width:auto; display:inline-block; margin-right:.5rem }
.password-checklist{ font-size:.9rem; margin:.5rem 0 1rem }
.valid{ color:#22c55e } .invalid{ color:#ef4444 }

/* ===== Tables ===== */
.table{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; background:var(--glass-bg); border:1px solid var(--hairline); border-radius:12px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:var(--elev-soft) }
.table th, .table td{ padding:.8rem .9rem; text-align:left }
.table thead th{ color:#fff; font-weight:700; background:linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.05)); border-bottom:1px solid var(--hairline) }
.table tbody tr + tr td{ border-top:1px solid var(--hairline) }
.table tbody tr:hover{ background:rgba(255,255,255,.04) }

/* ===== Actions ===== */
.actions{ display:flex; gap:12px; flex-direction:column }
.actions_voktrain{ display:grid; gap:12px; grid-template-columns:1fr }

/* ===== Alerts / Toasts ===== */
.alert{ padding:.75rem .95rem; border-radius:12px; margin:.6rem 0; border:1px solid var(--hairline); background:rgba(255,255,255,.06); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
.alert-error{ background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.35) }
.alert-success{ background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.35) }

/* ===== Card structure ===== */
.card .card-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem }
.card .card-footer{ margin-top:1rem; display:flex; gap:10px; flex-wrap:wrap }

/* ===== Footer ===== */
.footer{ margin-top:40px; padding:18px var(--pad); border-top:1px solid var(--hairline); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) }

/* ===== Accessibility ===== */
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ===== Header / Back ===== */
.header-bar{ display:flex; align-items:center; justify-content:space-between; flex-direction: column-reverse; margin-bottom:20px }
.header-bar .title{ grid-column:2; justify-self:center; margin:0; text-align:center }
.header-bar .cancel{ grid-column:3; justify-self:end }
.btn-back{
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color:white;
  padding:.3rem 1rem; border-radius:50px; font-size:1.5rem; text-decoration:none; transition:.2s; box-shadow:0 4px 12px rgba(0,0,0,0.25);
  display:inline-block; margin-left:78%;
}
.btn-back:hover{ filter:brightness(1.5); text-decoration:none; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.25); background:rgba(255,255,255,.28) }

/* ===== Learn view / banner ===== */
.learn-container{
  position:relative; overflow:visible; width:98%; margin:auto; padding:20px; text-align:center; box-sizing:border-box;
  border-radius:var(--radius); background:var(--glass-bg); border:1px solid var(--hairline);
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur)); box-shadow:var(--elev-soft);
}
.learn-container.highlight-green{ animation:greenPulse 1.5s ease-out }
.new-word-banner{
  position:absolute; top:0; left:50%; transform:translate(-50%, -70%);
  background:linear-gradient(135deg, rgba(31,191,74,.95), rgba(16,120,55,.95)); color:#fff; font-weight:800; font-size:5rem;
  padding:8px 16px; border-radius:100px; border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 28px rgba(0,0,0,.25), 0 0 22px rgba(31,191,74,.65);
  opacity:0; pointer-events:none; z-index:20; animation:newWordFade 1800ms ease-out forwards;
}
@keyframes newWordFade{ 0%{opacity:0; transform:translate(-50%, -90%)} 15%{opacity:1; transform:translate(-50%, -70%)} 85%{opacity:1; transform:translate(-50%, -70%)} 100%{opacity:0; transform:translate(-50%, -90%)} }
.container.highlight-green{ animation:greenPulse 1.5s ease-out }
@keyframes greenPulse{ 0%{ box-shadow:0 0 22px rgba(34,197,94,.75), inset 0 0 22px rgba(34,197,94,.55) } 50%{ box-shadow:0 0 40px rgba(34,197,94,.45), inset 0 0 40px rgba(34,197,94,.25) } 100%{ box-shadow:0 0 0 rgba(34,197,94,0), inset 0 0 0 rgba(34,197,94,0) } }

/* ===== Learn sizes (Mobile) ===== */
.vokabel{ font-size:8rem }
.schrift{ font-size:5rem; color: lightgray }
.translation{ font-size:5rem; margin-bottom: 2rem; }
.answer-btn{ font-size:5rem }
#progress-left{ font-size:4rem }

.answer-btn{
  display:block; width:100%; padding:1.5rem; margin:15px auto; border-radius:4rem; background:rgba(255,255,255,0.08);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.18);
  color:white; cursor:pointer; transition:.2s ease, transform .15s ease;
}
.answer-btn:hover{ filter:brightness(1.1); transform:translateY(-1px); background:rgba(255,255,255,.28) }
.answer-btn.correct{ background:rgba(34,197,94,0.85) }
.answer-btn.wrong{ background:rgba(239,68,68,0.85) }

.btn-green{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:16px 24px; margin-top:1.5rem;
  border-radius:100px; border:1px solid rgba(255,255,255,0.18); font-weight:500; font-size:7rem; color:white;
  background:linear-gradient(135deg, rgba(31,191,74,0.85), rgba(76,203,112,0.85));
  -webkit-backdrop-filter:blur(8px) saturate(140%); backdrop-filter:blur(8px) saturate(140%);
  cursor:pointer; transition:transform .15s ease, filter .15s ease;
}
.btn-green:hover{ filter:brightness(1.05); transform:translateY(-1px); background:rgba(56,213,113,0.85) }

.btn-red{ padding:8px 16px; border-radius:12px; color:white; font-weight:600; background:linear-gradient(135deg, rgba(239,68,68,0.85), rgba(255,99,99,0.85)); border:1px solid rgba(255,255,255,0.18); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); text-decoration:none }
.btn-red:hover{ filter:brightness(1.05) }

.btn-themen{ font-size:5rem; color:white; margin-bottom:.5rem; padding: 1rem }

#next-btn{ background-color:rgba(34,197,94,0.85); padding: 1.5rem 3rem}
#next-btn:disabled{
  opacity:.5; cursor:not-allowed; background:rgba(255,255,255,.06)!important; color:#aaa!important; border:1px solid rgba(255,255,255,.18);
  filter:none!important; transform:none!important; font-size:7rem;
}
#next-btn:hover{ background:rgba(46,216,92,0.85) }

.disabled-btn{ opacity:.5; cursor:not-allowed; background:rgba(255,255,255,.06)!important; color:#aaa!important; border:1px solid rgba(255,255,255,.18);
  filter:none!important; transform:none!important; font-size:7rem;}
.disabled-btn:hover{ filter:none; transform:none }

.small-btn{ font-size:4rem; padding:.4rem 1rem; border-radius:100px; display:inline-block; margin-left:auto }

.progress-counter{ text-align:center; font-size:3rem; color:#fff; margin-top:12px; font-weight:600 }

.back-btn-themen{
  background:rgba(255,255,255,.06); color:#ffffff; border:1px solid rgba(255,255,255,.18); text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,0.25);
  padding:1rem 1.5rem; border-radius:100px; margin-left:78%; font-size: 4rem;
}
.back-btn-themen:hover{ text-decoration:none; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.25); background:rgba(255,255,255,.28) }

  .result-box{ font-size:8rem }
  .result-box h2{ font-size:7rem }
  .result-stats{ font-size:7rem }

/* ===== Desktop Overrides ===== */
@media (min-width:1024px){
  /* Root-Size bleibt 12px lt. Original – kein Override nötig */

  body{ max-width:720px } /* hebt mobile Begrenzung auf */

  /* Typography */
  h1{ font-size:3rem }
  .lead{ font-size:2rem }

  /* Buttons */
  .btn{ font-size:2rem; padding:.5rem .5rem; border-radius:50px }

  /* Header / Back */
  .header-bar{ justify-content:center; flex-direction:column-reverse }
  .btn-back{ background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color:white; padding:.5rem 1rem;
    border-radius:50px; font-size:1.5rem; text-decoration:none; transition:.2s; box-shadow:0 4px 12px rgba(0,0,0,0.25); display:inline-block; margin-left:auto; }

  /* Learn sizes (Desktop) */
  .vokabel{ font-size:5rem }
  .schrift{ font-size:3rem }
  .translation{ font-size:3rem }
  .answer-btn{ font-size:2.5rem }
  #progress-left{ font-size:1.5rem }

  .answer-btn{ padding: 1rem 1rem; border-radius:24px }

  .btn-green{ font-size:3rem;}
  .btn-themen{ font-size:2rem; margin-bottom: .1rem; }

  /* Extra Desktop-Button-Variante (nur hier vorhanden) */
  .btn-test{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:16px 24px; margin-top:1.5rem;
    border-radius:45px; border:1px solid rgba(255,255,255,0.18); font-weight:500; font-size:6rem; color:white;
    background:linear-gradient(135deg, rgba(31,191,74,0.85), rgba(76,203,112,0.85));
    -webkit-backdrop-filter:blur(8px) saturate(140%); backdrop-filter:blur(8px) saturate(140%);
    cursor:pointer; transition:transform .15s ease, filter .15s ease;
  }
  .btn-test:hover{ filter:brightness(1.05); transform:translateY(-1px); background:rgba(56,213,113,0.85) }

  #next-btn:disabled{ font-size:3rem; border-radius:50px }
  .disabled-btn{ font-size:3rem; border-radius:50px }

  .small-btn{
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color:white; padding:1rem 1.5rem; border-radius:50px;
    font-size:2rem; text-decoration:none; transition:.2s; box-shadow:0 4px 12px rgba(0,0,0,0.25); display:inline-block; margin-left:auto; font-weight:350;
  }

  .back-btn-themen{
     background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color:white; padding:.5rem 1rem;
    border-radius:50px; font-size:2rem; text-decoration:none; transition:.2s; box-shadow:0 4px 12px rgba(0,0,0,0.25); display:inline-block; margin-left:auto;
  }

  .new-word-banner{
  position:absolute; top:0; left:50%; transform:translate(-50%, -70%);
  background:linear-gradient(135deg, rgba(31,191,74,.95), rgba(16,120,55,.95)); color:#fff; font-weight:800; font-size:2rem;
  padding:8px 16px; border-radius:100px; border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 28px rgba(0,0,0,.25), 0 0 22px rgba(31,191,74,.65);
  opacity:0; pointer-events:none; z-index:20; animation:newWordFade 1800ms ease-out forwards;
}
#progress-left{ font-size:2rem }

  .result-box{ font-size:5rem }
  .result-box h2{ font-size:3rem }
  .result-stats{ font-size:3rem }
}