:root {
  --navy: #0c1b2e; --navy-mid: #162a45; --slate: #3d5068; --stone: #6b7f96;
  --mist: #94a7bc; --cloud: #e8edf3; --snow: #f5f7fa; --white: #ffffff;
  --teal: #1a8a7d; --teal-light: #e6f5f3; --teal-dark: #13695f;
  --amber: #b3781f; --amber-light: #faf1e0;
  --brick: #b3453a; --brick-light: #fbeae8;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, system-ui, sans-serif;
  --radius: 12px; --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(12,27,46,0.06);
  --shadow-md: 0 8px 30px rgba(12,27,46,0.08);
  --transition: 0.2s ease;
}

* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { margin:0; font-family: var(--font-body); color: var(--navy); background: var(--snow); line-height: 1.6; font-size: 16px; }
[x-cloak] { display: none !important; }
button { font-family: inherit; cursor: pointer; }
textarea { font-family: inherit; }

/* ---------- Login ---------- */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; background: var(--navy); }
.login-card { background: var(--white); border-radius: var(--radius-lg); padding: 40px 36px; width: 340px; box-shadow: var(--shadow-md); text-align:center; }
.login-brand { font-family: var(--font-display); font-weight:800; font-size:1.5rem; color: var(--navy); }
.login-brand span { color: var(--teal); }
.login-sub { color: var(--stone); font-size: 0.9rem; margin: 6px 0 24px; }
.login-error { color: var(--brick); font-size: 0.85rem; margin-bottom: 12px; }
.login-form { display:flex; flex-direction:column; gap:10px; }
.login-form label { font-size: 0.75rem; text-transform:uppercase; letter-spacing:0.06em; color: var(--stone); text-align:left; }
.login-form input { padding: 11px 14px; border: 1px solid var(--cloud); border-radius: 8px; font-size: 1rem; }
.login-form button { margin-top: 8px; padding: 12px; border:none; border-radius: 8px; background: var(--navy); color: var(--white); font-weight:600; }
.login-form button:hover { background: var(--teal); }

/* ---------- App shell ---------- */
.app-header { position: sticky; top:0; z-index: 50; background: rgba(255,255,255,0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cloud); }
.app-header-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; height: 60px; display:flex; align-items:center; justify-content:space-between; }
.app-logo { font-family: var(--font-display); font-weight:800; font-size:1.1rem; color: var(--navy); text-decoration:none; }
.app-logo span { color: var(--teal); }
.app-nav { display:flex; align-items:center; gap: 6px; }
.app-nav button { background:none; border:none; padding: 8px 14px; border-radius:7px; font-size:0.88rem; font-weight:600; color: var(--slate); }
.app-nav button.on, .app-nav button:hover { background: var(--teal-light); color: var(--teal-dark); }
.app-nav-cta { margin-left: 6px; font-size:0.82rem; color: var(--stone); text-decoration:none; padding: 8px 10px; }
.app-nav-cta:hover { color: var(--brick); }

.app-main { max-width: 1100px; margin: 0 auto; padding: 32px 24px 80px; }

.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom: 22px; flex-wrap:wrap; }
.kicker { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color: var(--teal); font-weight:700; }
.section-head h1 { font-family: var(--font-display); font-size: 1.9rem; margin: 4px 0 0; }
.streak-chip { background: var(--amber-light); color: var(--amber); font-weight:700; padding: 8px 14px; border-radius: 999px; font-size:0.85rem; }

/* ---------- Projection hero (the main showcase element) ---------- */
.proj-hero { background: var(--navy); color: var(--white); border-radius: var(--radius-lg); padding: 28px 28px 26px; margin-bottom: 28px; box-shadow: var(--shadow-md); }
.proj-hero-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.proj-hero .kicker { color: var(--teal); }
.proj-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.6rem); font-weight:800; margin: 4px 0 0; letter-spacing:-0.01em; }
.proj-hero .streak-chip { background: rgba(255,255,255,0.1); color: var(--white); }
.proj-hero .proj-hint { color: var(--mist); font-size:0.86rem; margin-bottom: 20px; max-width: 68ch; }

.proj-row { display:grid; grid-template-columns: repeat(4,1fr); gap:12px; }
.proj-stage { border:1px solid rgba(255,255,255,0.12); border-radius: var(--radius); padding:16px 16px 14px; background: rgba(255,255,255,0.04); }
.proj-stage.st-on_track { border-color: var(--teal); background: rgba(26,138,125,0.18); }
.proj-stage.st-behind { border-color: var(--brick); background: rgba(179,69,58,0.22); }
.proj-level { font-family: var(--font-display); font-size:1.7rem; font-weight:700; }
.proj-label { font-size:0.8rem; color: var(--mist); margin-bottom:10px; }
.proj-date { font-size:0.86rem; font-weight:700; }
.proj-pct { font-size:0.78rem; color: #8fd6c4; margin-top:5px; }
.proj-status-chip { font-size:0.72rem; font-weight:700; margin-top:10px; padding:4px 9px; border-radius:6px; display:inline-block; }
.proj-status-chip.on_track { background: var(--teal); color: var(--white); }
.proj-status-chip.behind { background: var(--brick); color: var(--white); }
.proj-status-chip.insufficient_data { background: rgba(255,255,255,0.12); color: var(--mist); }
.proj-status-chip.planned { background: rgba(255,255,255,0.12); color: var(--mist); }
.proj-basis { font-size:0.68rem; color: var(--mist); margin-top:10px; opacity:0.8; }

.section-h2 { font-family: var(--font-display); font-size:1.3rem; font-weight:700; margin-top:4px; }

/* ---------- Timeline ---------- */
.timeline-track { display:flex; gap: 14px; margin-bottom: 26px; }
.tl-stage { flex:1; background: var(--white); border:1px solid var(--cloud); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); opacity: 0.55; }
.tl-stage.active { opacity:1; border-color: var(--teal); box-shadow: var(--shadow-md); }
.tl-stage.done { opacity:1; }
.tl-node { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; background: var(--cloud); color: var(--slate); margin-bottom:10px; }
.tl-stage.active .tl-node { background: var(--teal); color: var(--white); }
.tl-stage.done .tl-node { background: var(--navy); color: var(--white); }
.tl-label { font-weight:700; font-size:0.95rem; margin-bottom: 10px; }
.tl-milestones { display:flex; flex-direction:column; gap:8px; }
.tl-ms { font-size: 0.74rem; color: var(--stone); }
.tl-ms.win { color: var(--teal-dark); font-weight:600; }
.tl-ms-bar { height:5px; background: var(--cloud); border-radius:3px; margin-top:4px; overflow:hidden; }
.tl-ms-fill { height:100%; background: var(--teal); border-radius:3px; }

/* ---------- Dashboard ---------- */
.dash-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:12px; margin-bottom: 20px; }
.stat { background: var(--white); border:1px solid var(--cloud); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.stat .n { font-family: var(--font-display); font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 0.68rem; letter-spacing:0.06em; color: var(--stone); margin-top:4px; }

.card { background: var(--white); border:1px solid var(--cloud); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.card h3 { margin: 0 0 12px; font-size:1rem; font-family: var(--font-display); }
.card-row { display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap:wrap; }

.curve-wrap { position:relative; }
.bars { display:flex; flex-direction:column; gap:9px; }
.bar-row { display:grid; grid-template-columns: 180px 1fr 40px; align-items:center; gap:10px; font-size:0.82rem; }
.bar-track { height:8px; border-radius:4px; background: var(--cloud); overflow:hidden; }
.bar-fill { height:100%; border-radius:4px; background: var(--teal); }
.bar-fill.good { background: var(--teal); }
.bar-fill.warn { background: var(--amber); }
.bar-fill.bad { background: var(--brick); }

.heat { display:flex; gap:4px; flex-wrap:wrap; }
.heat i { width:14px; height:14px; border-radius:3px; background: var(--cloud); display:block; }
.heat i.l1 { background: var(--teal-light); }
.heat i.l2 { background: #7fc3b8; }
.heat i.l3 { background: var(--teal); }

.btn { display:inline-flex; align-items:center; gap:6px; background: var(--navy); color: var(--white); border:none; padding:11px 18px; border-radius:9px; font-weight:600; font-size:0.88rem; }
.btn:hover { background: var(--teal); }
.btn-ghost { background: var(--teal-light); color: var(--teal-dark); border:none; padding:9px 14px; border-radius:8px; font-weight:600; font-size:0.8rem; margin-top:8px; }

/* ---------- Quiz ---------- */
.quiz-tabs { display:flex; gap:4px; border-bottom:1px solid var(--cloud); margin-bottom:20px; flex-wrap:wrap; }
.quiz-tabs button { background:none; border:none; padding:10px 16px; font-size:0.85rem; font-weight:600; color: var(--stone); border-bottom:2px solid transparent; }
.quiz-tabs button.on { color: var(--teal-dark); border-color: var(--teal); }

.quiz-pane { display:grid; grid-template-columns: 1.3fr 1fr; gap: 22px; }
.quiz-pane.single { grid-template-columns: 1fr; max-width: 560px; }
.quiz-progress { font-size:0.75rem; color: var(--stone); margin-bottom:8px; }
.quiz-passage { background: var(--white); border:1px solid var(--cloud); border-radius: var(--radius); padding:18px; font-size:0.98rem; line-height:1.7; }
.quiz-opts { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.quiz-opt { padding:11px 14px; border:1px solid var(--cloud); border-radius:8px; background: var(--white); font-size:0.92rem; }
.quiz-opt:hover { border-color: var(--teal); }
.quiz-opt.correct { border-color: var(--teal); background: var(--teal-light); color: var(--teal-dark); font-weight:600; }
.quiz-opt.incorrect { border-color: var(--brick); background: var(--brick-light); color: var(--brick); font-weight:600; }
.quiz-opt.sel { border-color: var(--navy); background: var(--cloud); font-weight:600; }
.audio-chip { display:inline-flex; align-items:center; gap:8px; background: var(--cloud); border:none; border-radius:8px; padding:9px 14px; font-size:0.85rem; margin: 10px 0; }
.audio-chip:hover { background: var(--teal-light); }
.quiz-side { display:flex; flex-direction:column; gap:14px; }
.passage-q p { font-weight:600; font-size:0.9rem; margin: 0 0 6px; }
.empty { color: var(--stone); font-size:0.95rem; padding: 30px 0; }
.hint { font-size:0.75rem; color: var(--mist); }

.writing-editor { width:100%; min-height:220px; border:1px solid var(--cloud); border-radius: var(--radius); padding:14px; font-size:0.92rem; margin-top:10px; resize:vertical; }
.rubric { background: var(--cloud); border-radius: var(--radius); padding:14px; }
.curve-title { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color: var(--stone); margin: 10px 0 6px; }
.bridge-box { width:100%; min-height:100px; border:1px solid var(--mist); border-radius:8px; padding:10px; font-size:0.82rem; }

.about-frame { width:100%; height: calc(100vh - 160px); border:none; border-radius: var(--radius-lg); background: var(--white); }

/* ---------- Results / history / coverage ---------- */
.results-card { text-align:center; padding: 26px 20px; background: var(--white); border:1px solid var(--cloud); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.results-score { font-family: var(--font-display); font-size: 1.6rem; font-weight:700; margin-bottom: 6px; }
.results-score.good { color: var(--teal-dark); }
.results-score.warn { color: var(--amber); }
.results-score.bad { color: var(--brick); }
.results-card .btn { margin-top: 14px; }

.covers-chip { font-size:0.78rem; color: var(--teal-dark); background: var(--teal-light); border-radius:8px; padding:8px 12px; margin-bottom:12px; }

.history-list { display:flex; flex-direction:column; gap:6px; }
.history-row { display:grid; grid-template-columns: 100px 80px 1fr; align-items:center; gap:10px; font-size:0.82rem; padding: 6px 0; border-bottom:1px solid var(--cloud); }
.history-row:last-child { border-bottom:none; }
.history-type { font-weight:600; }
.history-score { font-weight:700; font-variant-numeric: tabular-nums; }
.history-score.good { color: var(--teal-dark); }
.history-score.warn { color: var(--amber); }
.history-score.bad { color: var(--brick); }
.history-date { color: var(--stone); text-align:right; }

.btn[disabled] { opacity:0.4; pointer-events:none; }

.visitor-note { font-size:0.8rem; color: var(--amber); background: var(--amber-light); border-radius:8px; padding:9px 14px; margin-bottom:16px; }
.visitor-note a { color: inherit; font-weight:700; text-decoration:underline; }

@media (max-width: 760px) {
  .dash-grid { grid-template-columns: repeat(2,1fr); }
  .proj-row { grid-template-columns: repeat(2,1fr); }
  .timeline-track { flex-direction:column; }
  .quiz-pane { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 90px 1fr 30px; font-size: 0.76rem; }
  .app-header-inner { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 8px; }
  .app-nav { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; padding-bottom: 2px; }
  .app-nav button, .app-nav-cta { white-space: nowrap; flex: none; }
  .app-main { padding: 20px 16px 60px; }
  .proj-hero { padding: 20px 18px 18px; }
  .proj-hero-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 420px) {
  .login-card { width: 92vw; max-width: 340px; padding: 32px 24px; }
}

/* ---------- Pruefungssimulation ---------- */
.sim-intro { text-align: center; padding: 30px 24px; }
.sim-stages-preview { display:grid; grid-template-columns: repeat(4,1fr); gap:10px; margin: 18px 0 22px; }
.sim-stages-preview > div { background: var(--snow); border:1px solid var(--cloud); border-radius: var(--radius); padding:12px 10px; font-size:0.85rem; font-weight:600; }
.sim-stages-preview span { display:block; font-size:0.7rem; font-weight:400; color: var(--stone); margin-top:4px; }
.sim-progress { font-size:0.78rem; font-weight:500; color: var(--stone); margin-left:8px; }

.sim-item { border-top:1px solid var(--cloud); padding:14px 0; }
.sim-item:first-of-type { border-top:none; }
.sim-item-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.sim-item-n { width:22px; height:22px; border-radius:50%; background: var(--navy); color: var(--white); font-size:0.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; }

.rf-row { display:flex; gap:8px; margin-top:8px; }
.rf-btn { cursor:pointer; }
.rf-btn.sel { border-color: var(--teal); background: var(--teal-light); color: var(--teal-dark); font-weight:700; }

.sim-ab-row { display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:8px; }
.sim-ab-opt { border:1px solid var(--cloud); border-radius:8px; padding:10px 12px; font-size:0.82rem; cursor:pointer; }
.sim-ab-opt.sel { border-color: var(--teal); background: var(--teal-light); }

.sim-letter { white-space: pre-line; margin-bottom:10px; }
.sim-sign { font-weight:700; text-align:center; margin: 8px 0; }

.sim-form { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.sim-form-row { display:grid; grid-template-columns: 180px 1fr; align-items:center; gap:10px; font-size:0.85rem; }
.sim-form-row.given strong { color: var(--stone); }
.sim-form-row input { padding:8px 10px; border:1px solid var(--cloud); border-radius:7px; font-size:0.85rem; }

.sim-points { margin: 10px 0; padding-left:18px; font-size:0.88rem; color: var(--navy-mid); }
.sim-points li { margin-bottom:4px; }
.sim-score-input { width:70px; margin-left:10px; padding:6px 8px; border:1px solid var(--cloud); border-radius:6px; }

.sim-rating { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:0.8rem; }

.sim-results { max-width:480px; margin: 0 auto; }
.sim-breakdown { display:grid; grid-template-columns: repeat(2,1fr); gap:10px; margin: 18px 0; text-align:left; }
.sim-breakdown > div { background: var(--snow); border:1px solid var(--cloud); border-radius:8px; padding:10px 12px; font-size:0.85rem; display:flex; justify-content:space-between; }

@media (max-width: 760px) {
  .sim-stages-preview { grid-template-columns: repeat(2,1fr); }
  .sim-ab-row { grid-template-columns: 1fr; }
  .sim-form-row { grid-template-columns: 1fr; }
}