:root {
  --bg: #0f0f0f; --surface: #181818; --surface2: #222; --surface3: #2a2a2a;
  --border: #2e2e2e; --border2: #3a3a3a;
  --gold: #D4A017; --gold2: #e8b820;
  --gold-a08: rgba(212,160,23,.08); --gold-a15: rgba(212,160,23,.15);
  --gold-a25: rgba(212,160,23,.25);
  --text: #ede9dc; --text-dim: #a89f86; --text-faint: #5e5847;
  --ok: #5cb85c; --err: #d9534f; --warn: #e8a020;
  --r: 8px; --rl: 14px;
  --fh: 'Raleway', sans-serif; --fm: 'Source Code Pro', monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--fh); background: var(--bg); color: var(--text); min-height: 100dvh; }
button { font-family: var(--fh); -webkit-appearance: none; appearance: none; cursor: pointer; }
textarea, input, select { font-family: var(--fh); }
code { font-family: var(--fm); font-size: .85em; }
strong { color: var(--text); }
.screen { display: none; flex-direction: column; min-height: 100dvh; }
.screen.active { display: flex; }
.hidden { display: none !important; }

/* ── HERO ─────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: #0a0a0a; min-height: 260px;
  display: flex; flex-direction: column; justify-content: flex-end; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.chalk-texture { position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"); }
.chalk-number-bg { position: absolute; bottom: -10px; right: 5%; font-size: clamp(80px,20vw,180px);
  font-weight: 900; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.07);
  user-select: none; white-space: nowrap; }
.hero-inner { position: relative; z-index: 2; padding: 2.5rem 2rem 2rem;
  background: linear-gradient(to bottom, transparent, rgba(10,10,10,.8)); }
.brand { font-family: var(--fm); font-size: .75rem; color: var(--gold);
  letter-spacing: .15em; margin-bottom: .6rem; }
.hero-inner h1 { font-size: clamp(1.9rem, 6vw, 3.2rem); font-weight: 900; color: var(--text); }
.hero-sub { margin-top: .5rem; font-size: .88rem; color: var(--text-dim); line-height: 1.6; }

/* ── START BODY ───────────────────────────────────────── */
.start-body { flex: 1; padding: 2rem 1.5rem; }
.start-inner { max-width: 940px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.8rem; }

/* ── TABS ─────────────────────────────────────────────── */
.fach-tabs { display: flex; gap: .5rem; }
.fach-tab { font-size: .88rem; font-weight: 700; padding: .6rem 1.5rem;
  border-radius: 9px; border: 1px solid var(--border2); color: var(--text-dim);
  background: var(--surface); transition: all .2s; }
.fach-tab:hover { border-color: var(--gold); color: var(--text); }
.fach-tab.active { background: var(--gold-a08); border-color: var(--gold); color: var(--gold); }

/* ── PRÜFUNGS-GRID ────────────────────────────────────── */
.pruefungs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-loading { color: var(--text-faint); font-size: .85rem; padding: .5rem; grid-column: 1/-1; }

.pruef-card { position: relative; overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--rl); padding: 1.4rem;
  cursor: pointer; text-align: left; color: var(--text);
  display: flex; flex-direction: column; gap: .8rem;
  transition: border-color .2s, transform .15s, box-shadow .2s; }
.pruef-card:hover { border-color: var(--gold); transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(212,160,23,.12); }
.pruef-card[data-schwier="leicht"] { border-left: 3px solid #5cb85c; }
.pruef-card[data-schwier="mittel"]  { border-left: 3px solid #e8a020; }
.pruef-card[data-schwier="schwer"]  { border-left: 3px solid #d9534f; }
.pruef-schwier { font-size: .8rem; font-weight: 700; }
.pruef-schwier.leicht { color: #5cb85c; } .pruef-schwier.mittel { color: #e8a020; } .pruef-schwier.schwer { color: #d9534f; }
.pruef-fallstudie { font-size: .9rem; font-weight: 700; line-height: 1.4; }
.pruef-beschreibung { font-size: .78rem; color: var(--text-faint); line-height: 1.5; }
.pruef-footer { display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--border); padding-top: .75rem;
  font-family: var(--fm); font-size: .7rem; color: var(--text-faint); }
.pruef-arrow { color: var(--gold); font-size: .9rem; transition: transform .2s; }
.pruef-card:hover .pruef-arrow { transform: translateX(4px); }

/* ── TYPE LEGEND ──────────────────────────────────────── */
.type-legend { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--rl); padding: 1rem 1.4rem; }
.legend-title { font-family: var(--fm); font-size: .68rem; color: var(--gold);
  letter-spacing: .14em; margin-bottom: .7rem; }
.type-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  font-size: .81rem; color: var(--text-dim); }
.type-chip { font-family: var(--fm); font-size: .67rem; font-weight: 700;
  padding: .18rem .48rem; border-radius: 4px; }
.tc-mc    { background: rgba(59,130,246,.15); color: #60a5fa; border: 1px solid rgba(59,130,246,.3); }
.tc-multi { background: rgba(139,92,246,.15);  color: #a78bfa; border: 1px solid rgba(139,92,246,.3); }
.tc-calc  { background: rgba(34,197,94,.15);   color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.tc-text  { background: rgba(245,158,11,.15);  color: #fbbf24; border: 1px solid rgba(245,158,11,.3); }
.tc-luecke{ background: rgba(236,72,153,.15);  color: #f472b6; border: 1px solid rgba(236,72,153,.3); }
.tc-zuord { background: rgba(20,184,166,.15);  color: #2dd4bf; border: 1px solid rgba(20,184,166,.3); }

/* ── STAT BOX ─────────────────────────────────────────── */
.stat-box { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: .9rem 1.3rem; }
.stat-box h4 { font-family: var(--fm); font-size: .68rem; color: var(--gold);
  letter-spacing: .14em; margin-bottom: .55rem; }
.stat-chips { display: flex; gap: .45rem; flex-wrap: wrap; }
.stat-chip { font-family: var(--fm); font-size: .72rem; padding: .2rem .58rem;
  border-radius: 5px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text-dim); }
.stat-chip.ok   { border-color: rgba(92,184,92,.3);  color: var(--ok); }
.stat-chip.fail { border-color: rgba(217,83,79,.3);  color: var(--err); }

/* ── LOADING ──────────────────────────────────────────── */
#screen-laden { align-items: center; justify-content: center; background: var(--surface); }
.loading-center { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.loading-ring { display: inline-block; position: relative; width: 54px; height: 54px; }
.loading-ring div { box-sizing: border-box; display: block; position: absolute;
  width: 42px; height: 42px; margin: 6px; border: 4px solid transparent;
  border-top-color: var(--gold); border-radius: 50%; animation: lring 1.2s cubic-bezier(.5,0,.5,1) infinite; }
.loading-ring div:nth-child(1){animation-delay:-.45s} .loading-ring div:nth-child(2){animation-delay:-.3s} .loading-ring div:nth-child(3){animation-delay:-.15s}
@keyframes lring { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
.loading-text { font-size: .9rem; color: var(--text-dim); }

/* ── EXAM HEADER ──────────────────────────────────────── */
.exam-header { display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: .6rem 1.2rem; position: sticky; top: 0; z-index: 200; gap: .7rem; flex-wrap: wrap; }
.eh-left { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.eh-badge { font-family: var(--fm); font-size: .7rem; font-weight: 700;
  padding: .22rem .6rem; border-radius: 5px; background: var(--gold-a08);
  color: var(--gold); border: 1px solid var(--gold-a25); }
.eh-schwier { font-size: .78rem; color: var(--text-dim); }
.eh-titel   { font-size: .78rem; color: var(--text-faint); }
.eh-timer { display: flex; align-items: center; gap: .45rem; font-family: var(--fm);
  font-size: 1rem; font-weight: 700; color: var(--text); background: var(--surface2);
  border: 1px solid var(--border2); padding: .32rem .85rem; border-radius: 7px; transition: all .4s; }
.timer-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
.eh-timer.warn   { color: var(--warn); border-color: rgba(232,160,32,.4); }
.eh-timer.danger { color: var(--err);  border-color: rgba(217,83,79,.4); animation: pulse-ring 1s infinite; }
.eh-timer.warn   .timer-dot { background: var(--warn); }
.eh-timer.danger .timer-dot { background: var(--err); }
@keyframes pulse-ring { 0%,100%{box-shadow:0 0 0 0 rgba(217,83,79,.3)} 50%{box-shadow:0 0 0 6px rgba(217,83,79,0)} }
.btn-submit { font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  padding: .36rem .95rem; border-radius: 7px; border: 1px solid var(--gold);
  color: var(--gold); background: var(--gold-a08); transition: background .2s; }
.btn-submit:hover { background: var(--gold-a25); }
.exam-prog-wrap { background: var(--surface2); height: 3px; }
.exam-prog { height: 100%; background: var(--gold); transition: width .4s ease; }

/* ── EXAM LAYOUT ──────────────────────────────────────── */
.exam-layout { display: grid; grid-template-columns: 290px 1fr; flex: 1; }
.exam-sidebar { background: var(--surface); border-right: 1px solid var(--border);
  overflow-y: auto; position: sticky; top: 46px; height: calc(100dvh - 46px); }
.sidebar-section { padding: .85rem .95rem; border-bottom: 1px solid var(--border); }
.sidebar-label { font-family: var(--fm); font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; color: var(--gold); margin-bottom: .45rem; }
.sidebar-kontext { font-size: .8rem; color: var(--text-dim); line-height: 1.7; max-height: 190px; overflow-y: auto; }
.aufgaben-nav { display: flex; flex-direction: column; gap: .22rem; }
.nav-aufgabe-btn { display: flex; align-items: center; justify-content: space-between;
  padding: .46rem .65rem; border-radius: 6px; border: 1px solid transparent;
  background: transparent; color: var(--text-dim); font-size: .8rem; text-align: left; transition: all .15s; }
.nav-aufgabe-btn:hover { background: var(--surface2); color: var(--text); }
.nav-aufgabe-btn.aktiv { background: var(--gold-a08); border-color: var(--gold-a25); color: var(--gold); }
.nav-aufgabe-btn .nav-p { font-family: var(--fm); font-size: .64rem; color: var(--text-faint); }
.nav-aufgabe-btn.aktiv .nav-p { color: var(--gold); }
.sidebar-hinweise { font-size: .77rem; color: var(--text-faint); line-height: 1.7; display: flex; flex-direction: column; gap: .4rem; }
.sidebar-hinweise code { color: var(--text-dim); }

.exam-main { padding: 1.4rem 1.6rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1.1rem; }
.aufgabe-kontext-banner { background: var(--surface); border: 1px solid var(--border2);
  border-left: 3px solid var(--gold); border-radius: var(--r); padding: .85rem 1.05rem;
  font-size: .83rem; color: var(--text-dim); line-height: 1.7; }
.aufgabe-header { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .55rem; flex-wrap: wrap; gap: .4rem; }
.aufgabe-nr { font-family: var(--fm); font-size: .7rem; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: .1em; }
.aufgabe-punkte-badge { font-family: var(--fm); font-size: .68rem; padding: .18rem .52rem;
  border-radius: 4px; background: var(--gold-a08); color: var(--gold); border: 1px solid var(--gold-a25); }
.unteraufgaben-container { display: flex; flex-direction: column; gap: 1rem; }

/* UA CARD */
.ua-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.ua-card-head { display: flex; align-items: flex-start; gap: .65rem; padding: .8rem .95rem;
  border-bottom: 1px solid var(--border); background: var(--surface2); }
.ua-typ-badge { font-family: var(--fm); font-size: .64rem; font-weight: 700;
  padding: .18rem .48rem; border-radius: 4px; white-space: nowrap; flex-shrink: 0; margin-top: .15rem; }
.ua-frage { font-size: .88rem; font-weight: 600; line-height: 1.6; white-space: pre-line; flex: 1; }
.ua-meta { display: flex; align-items: center; gap: .45rem; flex-shrink: 0; margin-left: auto; }
.ua-punkte { font-family: var(--fm); font-size: .68rem; color: var(--text-faint); white-space: nowrap; }
.ua-status { width: 8px; height: 8px; border-radius: 50%; background: var(--border2); flex-shrink: 0; transition: background .2s; }
.ua-status.done { background: var(--gold); }
.ua-body { padding: .85rem .95rem; display: flex; flex-direction: column; gap: .6rem; }
.hinweis-text { font-size: .78rem; color: var(--warn); background: rgba(232,160,32,.08);
  border: 1px solid rgba(232,160,32,.2); border-radius: 5px; padding: .38rem .68rem; }

/* MC */
.mc-optionen { display: flex; flex-direction: column; gap: .45rem; }
.mc-option { display: flex; align-items: flex-start; gap: .7rem; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 7px; padding: .65rem .88rem;
  color: var(--text); font-size: .86rem; line-height: 1.5;
  transition: all .15s; width: 100%; text-align: left; }
.mc-option:hover { border-color: var(--border2); background: var(--surface3); }
.mc-option.selected { border-color: var(--gold); background: var(--gold-a08); }
.mc-letter { font-family: var(--fm); font-size: .7rem; font-weight: 700; width: 23px; height: 23px;
  flex-shrink: 0; border-radius: 5px; background: var(--surface3); color: var(--text-faint);
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--border2); transition: all .15s; }
.mc-option.selected .mc-letter { background: var(--gold); color: var(--bg); border-color: var(--gold); }

/* CALC */
.calc-felder { display: flex; flex-direction: column; gap: .52rem; }
.calc-feld { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.calc-label { font-size: .82rem; color: var(--text-dim); min-width: 190px; flex-shrink: 0; }
.calc-input { font-family: var(--fm); font-size: .86rem; background: var(--surface2);
  border: 1px solid var(--border2); border-radius: 6px; color: var(--text);
  padding: .4rem .7rem; width: 150px; outline: none; transition: border-color .2s; }
.calc-input:focus { border-color: var(--gold); }

/* TEXT */
.text-area { width: 100%; background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 7px; color: var(--text); padding: .75rem .88rem;
  font-size: .86rem; line-height: 1.7; resize: vertical; outline: none;
  transition: border-color .2s; min-height: 110px; }
.text-area:focus { border-color: var(--gold); }
.text-area.code-area { font-family: var(--fm); font-size: .81rem; min-height: 150px; tab-size: 2; }
.text-hint { font-size: .76rem; color: var(--text-faint); margin-top: .22rem; }
.text-hint span { color: var(--gold); font-weight: 600; }

/* LÜCKE */
.luecke-text { font-size: .88rem; line-height: 2.8; color: var(--text); }
.luecke-input { font-family: var(--fm); font-size: .8rem; background: var(--surface2);
  border: none; border-bottom: 2px solid var(--gold-a25); color: var(--text);
  padding: .1rem .38rem; width: 130px; outline: none; border-radius: 3px 3px 0 0; transition: border-color .2s; }
.luecke-input:focus { border-bottom-color: var(--gold); background: var(--gold-a08); }

/* ZUORDNUNG */
.zuordnung-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; align-items: center; }
.zuordnung-links { background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; padding: .52rem .78rem; font-size: .83rem; color: var(--text-dim); font-weight: 600; }
.zuordnung-select { background: var(--surface2); border: 1px solid var(--border2); border-radius: 6px;
  color: var(--text); padding: .45rem .65rem; font-size: .81rem;
  cursor: pointer; outline: none; width: 100%; transition: border-color .2s; }
.zuordnung-select:focus { border-color: var(--gold); }

/* NAV ROW */
.exam-nav-row { display: flex; align-items: center; justify-content: space-between; gap: .9rem; flex-wrap: wrap; }
.btn-nav-aufgabe { font-size: .81rem; font-weight: 700; letter-spacing: .04em;
  padding: .55rem 1.15rem; border-radius: 8px; border: 1px solid var(--border2);
  color: var(--text-dim); background: var(--surface2); transition: all .2s; }
.btn-nav-aufgabe:hover:not(:disabled) { border-color: var(--text-dim); color: var(--text); }
.btn-nav-aufgabe:disabled { opacity: .3; cursor: not-allowed; }
.btn-nav-primary { border-color: var(--gold); color: var(--gold); background: var(--gold-a08); }
.btn-nav-primary:hover:not(:disabled) { background: var(--gold-a25) !important; }
.aufgabe-indicator { font-family: var(--fm); font-size: .78rem; color: var(--text-faint); }

/* ── ERGEBNIS ─────────────────────────────────────────── */
#screen-ergebnis { overflow-y: auto; }
.ergebnis-hero { position: relative; overflow: hidden; min-height: 230px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2.5rem 2rem; background: var(--surface);
  border-bottom: 1px solid var(--border); gap: .7rem; }
.erg-emoji { font-size: 2.5rem; position: relative; z-index: 1; }
#erg-headline { font-size: clamp(2rem, 5.5vw, 2.8rem); font-weight: 900; color: var(--gold); position: relative; z-index: 1; }
#erg-headline.fail { color: var(--err); }
#erg-sub { font-size: .88rem; color: var(--text-dim); max-width: 480px; line-height: 1.6; position: relative; z-index: 1; }
.ergebnis-body { padding: 1.8rem 1.5rem; max-width: 740px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 1.8rem; }
.score-wrap { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.score-ring-outer { position: relative; width: 126px; height: 126px; flex-shrink: 0; }
.score-svg { width: 100%; height: 100%; }
.score-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#score-pct { font-family: var(--fm); font-size: 1.65rem; font-weight: 700; color: var(--text); }
.score-lbl { font-size: .7rem; color: var(--text-faint); }
.score-stats { display: grid; grid-template-columns: repeat(2, 115px); gap: .75rem; }
.ss { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: .8rem .95rem; display: flex; flex-direction: column; align-items: center; gap: .18rem; }
.ss span:first-child { font-family: var(--fm); font-size: 1.15rem; font-weight: 700; color: var(--text); }
.ss span:last-child  { font-size: .68rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
#ss-status-wrap.ok .ss   span:first-child { color: var(--ok); }
#ss-status-wrap.fail .ss span:first-child { color: var(--err); }
.aufgaben-uebersicht { display: flex; flex-direction: column; gap: .45rem; }
.ue-aufgabe { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: .65rem .95rem; display: flex; align-items: center; gap: .85rem; }
.ue-nr { font-family: var(--fm); font-size: .72rem; color: var(--gold); white-space: nowrap; min-width: 70px; }
.ue-titel { flex: 1; font-size: .83rem; }
.ue-bar-wrap { width: 85px; background: var(--surface2); border-radius: 999px; height: 5px; }
.ue-bar { height: 100%; border-radius: 999px; background: var(--ok); transition: width 1s ease; }
.ue-punkte { font-family: var(--fm); font-size: .74rem; color: var(--text-dim); white-space: nowrap; }
.ergebnis-btns { display: flex; gap: .9rem; flex-wrap: wrap; }
.btn-gold { font-size: .84rem; font-weight: 700; letter-spacing: .04em; padding: .65rem 1.35rem;
  border-radius: 9px; border: none; background: var(--gold); color: var(--bg); transition: all .2s; }
.btn-gold:hover { background: var(--gold2); box-shadow: 0 4px 18px rgba(212,160,23,.3); }
.btn-outline { font-size: .84rem; font-weight: 700; padding: .65rem 1.35rem; border-radius: 9px;
  border: 1px solid var(--border2); color: var(--text-dim); background: var(--surface); transition: all .2s; }
.btn-outline:hover { border-color: var(--text-dim); color: var(--text); }
.btn-block-center { display: block; margin: 1.5rem auto 0; }
.detail-auswertung { display: flex; flex-direction: column; gap: .75rem; border-top: 1px solid var(--border); padding-top: 1.4rem; }
#detail-liste { display: flex; flex-direction: column; gap: .75rem; }
.divider-label { display: flex; align-items: center; gap: .9rem; font-size: .7rem; font-weight: 700; letter-spacing: .18em; color: var(--gold); }
.divider-label::before,.divider-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* DETAIL CARD */
.det-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.det-card.ok      { border-left: 3px solid var(--ok); }
.det-card.partial { border-left: 3px solid var(--warn); }
.det-card.fail    { border-left: 3px solid var(--err); }
.det-head { display: flex; align-items: flex-start; gap: .65rem; padding: .72rem .95rem;
  background: var(--surface2); }
.det-check { font-size: .88rem; flex-shrink: 0; margin-top: .1rem; }
.det-frage { flex: 1; font-size: .83rem; font-weight: 600; line-height: 1.5; white-space: pre-line; }
.det-punkte { font-family: var(--fm); font-size: .68rem; padding: .16rem .48rem; border-radius: 4px; white-space: nowrap; }
.det-punkte.ok      { background: rgba(92,184,92,.15);  color: var(--ok); }
.det-punkte.partial { background: rgba(232,160,32,.15); color: var(--warn); }
.det-punkte.fail    { background: rgba(217,83,79,.15);  color: var(--err); }
.det-body { padding: .72rem .95rem; display: flex; flex-direction: column; gap: .42rem; font-size: .82rem; }
.det-row { display: flex; gap: .45rem; align-items: flex-start; line-height: 1.5; }
.det-tag { font-family: var(--fm); font-size: .63rem; font-weight: 700; flex-shrink: 0;
  padding: .12rem .38rem; border-radius: 3px; margin-top: .12rem; white-space: nowrap; }
.det-tag.gegeben  { background: rgba(217,83,79,.15); color: var(--err); }
.det-tag.korrekt  { background: rgba(92,184,92,.15);  color: var(--ok); }
.det-tag.hinweis  { background: rgba(232,160,32,.1);  color: var(--warn); }
.det-erklaerung { padding: .52rem .78rem; background: var(--surface2); border-radius: 6px;
  color: var(--text-dim); line-height: 1.6; border-left: 2px solid var(--gold-a25); margin-top: .2rem; }
.det-code { font-family: var(--fm); font-size: .77rem; background: #0d0d0d; border: 1px solid var(--border);
  border-radius: 6px; padding: .62rem .82rem; white-space: pre-wrap; color: #d4d0c8;
  line-height: 1.6; overflow-x: auto; max-height: 230px; overflow-y: auto; }
.det-bewertung-hinweis { font-size: .77rem; color: var(--text-faint); background: rgba(212,160,23,.06);
  border: 1px solid var(--gold-a15); border-radius: 5px; padding: .4rem .7rem; line-height: 1.5; }
.self-score-wrap { background: var(--surface2); border: 1px solid var(--gold-a25); border-radius: 8px;
  padding: .82rem .92rem; display: flex; flex-direction: column; gap: .45rem; margin-top: .3rem; }
.self-score-label { display: flex; justify-content: space-between; align-items: center;
  font-size: .81rem; color: var(--text-dim); gap: .5rem; flex-wrap: wrap; }
.self-score-val { font-family: var(--fm); font-size: .81rem; font-weight: 700; color: var(--gold); white-space: nowrap; }
.self-score-slider { width: 100%; height: 4px; cursor: pointer; accent-color: var(--gold);
  border-radius: 999px; background: var(--border); outline: none; border: none; }
.self-score-scale { display: flex; justify-content: space-between; font-family: var(--fm); font-size: .63rem; color: var(--text-faint); }

/* ── RESPONSIVE ───────────────────────────────────────── */
@media(max-width: 900px) {
  .exam-layout { grid-template-columns: 1fr; }
  .exam-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .sidebar-kontext { max-height: none; }
  .pruefungs-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width: 640px) {
  .pruefungs-grid { grid-template-columns: 1fr; }
  .fach-tabs { flex-direction: column; }
  .score-stats { grid-template-columns: repeat(2, 1fr); }
  .zuordnung-grid { grid-template-columns: 1fr; }
  .exam-header { padding: .5rem .8rem; }
  .eh-titel { display: none; }
  .calc-label { min-width: unset; }
}