:root{
  --bg:#0a0e12; --panel:#111820; --panel-2:#0d141b; --border:#1e2c38;
  --text:#c9d6e0; --muted:#7d94a6; --cyan:#22d3ee; --green:#3ddc84;
  --amber:#f5b642; --red:#ff5f6b; --code-bg:#060a0e;
}
*{box-sizing:border-box;margin:0;padding:0}
/* hidden-Attribut muss jede display-Regel schlagen */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);line-height:1.6;padding:0 0 60px;
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif}
.wrap{max-width:940px;margin:0 auto;padding:0 20px}



/* ---- Views ---- */
.view{display:none}
.view.active{display:block}

.hero{text-align:center;padding:44px 0 26px}
.hero h1{font-family:'DM Mono',monospace;font-size:2rem;font-weight:500;letter-spacing:1px;
  color:#eaf2f8;margin-bottom:8px}
.hero .sub{color:var(--muted);font-size:0.92rem}
.backlink{display:inline-block;margin-top:14px;color:var(--muted);text-decoration:none;
  font-family:'DM Mono',monospace;font-size:0.8rem;padding:6px 14px;border-radius:20px;
  border:1px solid var(--border);transition:color .15s,border-color .15s}
.backlink:hover{color:var(--cyan);border-color:var(--cyan)}

.card{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;
  padding:20px;margin-bottom:18px}
.card h2{font-family:'DM Mono',monospace;font-size:1rem;font-weight:500;color:var(--cyan);
  letter-spacing:0.5px;margin-bottom:14px}
.eyebrow{font-family:'DM Mono',monospace;font-size:0.7rem;text-transform:uppercase;
  letter-spacing:0.14em;color:var(--amber);margin-bottom:6px}
.hint{color:var(--muted);font-size:0.85rem;margin-top:10px}
.warn{color:var(--amber);font-size:0.85rem;margin-top:6px}
.meta{color:var(--muted);font-size:0.85rem;margin-top:8px}
.scenario p{white-space:pre-line}

/* ---- Formular ---- */
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:0.82rem;color:var(--muted);margin-bottom:5px}
.field i{color:var(--red);font-style:normal}
input[type=text],textarea{width:100%;background:var(--panel);border:1px solid var(--border);
  border-radius:7px;color:var(--text);padding:10px 12px;font-size:16px;font-family:inherit}
textarea{min-height:120px;resize:vertical;line-height:1.55}
textarea.mono{font-family:'DM Mono',monospace;font-size:14px}
input:focus,textarea:focus{outline:none;border-color:var(--cyan)}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:0.9rem}
.check input{margin-top:4px;width:16px;height:16px;flex-shrink:0;accent-color:var(--cyan)}

.choices{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.choice{display:flex;gap:12px;align-items:flex-start;background:var(--panel);
  border:1px solid var(--border);border-radius:8px;padding:12px 14px;cursor:pointer}
.choice.sel{border-color:var(--cyan)}
.choice input{margin-top:4px;accent-color:var(--cyan)}
.choice b{display:block;font-family:'DM Mono',monospace;font-size:0.88rem;color:#eaf2f8;font-weight:500}
.choice small{color:var(--muted);font-size:0.82rem}
.choice-topics{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:0.82rem;font-weight:400;color:var(--muted)}
.choice-topics span{white-space:nowrap}
.choice > span{min-width:0}
.choice.done{opacity:0.5}

/* ---- Buttons ---- */
.btn{background:var(--panel);border:1px solid var(--border);color:var(--text);
  padding:11px 20px;border-radius:8px;font-size:0.9rem;font-family:inherit;cursor:pointer;
  transition:border-color .15s,color .15s}
.btn:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan)}
.btn.primary{border-color:var(--cyan);color:var(--cyan)}
.btn.primary:hover:not(:disabled){background:rgba(34,211,238,0.1)}
.btn.danger{border-color:var(--red);color:var(--red)}
.btn:disabled{opacity:0.4;cursor:not-allowed}
.submitbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
a.btn{text-decoration:none;display:inline-block;text-align:center}

/* ---- Aufgaben ---- */
.task{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;
  padding:20px;margin-bottom:18px}
.task-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-bottom:1px solid var(--border);padding-bottom:10px;margin-bottom:14px;flex-wrap:wrap}
.task-head h2{font-family:'DM Mono',monospace;font-size:1.05rem;color:var(--cyan);margin:0}
.task-pts{font-family:'DM Mono',monospace;font-size:0.82rem;color:var(--muted);white-space:nowrap}
.task-context{white-space:pre-line;color:var(--text);margin-bottom:18px;font-size:0.95rem}

.sub{border-top:1px solid var(--border);padding-top:16px;margin-top:16px}
.sub:first-of-type{border-top:none;padding-top:0;margin-top:0}
.sub-head{display:flex;gap:10px;align-items:baseline;margin-bottom:8px;flex-wrap:wrap}
.sub-id{font-family:'DM Mono',monospace;color:var(--green);font-weight:500;font-size:0.9rem}
.sub-op{font-family:'DM Mono',monospace;font-size:0.72rem;text-transform:uppercase;
  letter-spacing:0.1em;color:var(--amber)}
.sub-pts{margin-left:auto;font-family:'DM Mono',monospace;font-size:0.8rem;color:var(--muted)}
.sub-prompt{white-space:pre-wrap;margin-bottom:10px;font-size:0.95rem}
.sub-min{font-size:0.78rem;color:var(--muted);margin-bottom:8px;font-style:italic}
.filled-dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--border);margin-left:4px;flex-shrink:0}
.filled-dot.on{background:var(--green)}

/* ---- Lösungsbogen ---- */
.block{margin-bottom:16px}
.block-label{font-family:'DM Mono',monospace;font-size:0.72rem;text-transform:uppercase;
  letter-spacing:0.12em;margin-bottom:6px}
.lbl-answer{color:var(--muted)}
.lbl-solution{color:var(--green)}
.answer-box,.solution-box{background:var(--code-bg);border:1px solid var(--border);
  border-radius:7px;padding:12px 14px;white-space:pre-wrap;font-size:0.9rem;line-height:1.6}
.answer-box{border-left:3px solid var(--muted)}
.solution-box{border-left:3px solid var(--green)}
.answer-box.empty{color:var(--muted);font-style:italic}
.rubric{list-style:none;margin-top:6px}
.rubric li{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:6px;
  background:var(--panel);border:1px solid var(--border);margin-bottom:6px;font-size:0.88rem}
.rubric li.checked{border-color:var(--green)}
.rubric input{margin-top:4px;width:16px;height:16px;flex-shrink:0;accent-color:var(--green)}
.rubric .rp{margin-left:auto;font-family:'DM Mono',monospace;font-size:0.8rem;
  color:var(--muted);white-space:nowrap}
.sub-score{text-align:right;font-family:'DM Mono',monospace;font-size:0.86rem;
  color:var(--cyan);margin-top:8px}

/* ---- Auswertung ---- */
.result-head{text-align:center}
.score{font-family:'DM Mono',monospace;font-size:3.2rem;font-weight:500;color:var(--green);
  line-height:1.1;margin:10px 0}
.score-sub{color:var(--muted);font-size:0.95rem}
.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:0.88rem}
.bar-row .bl{font-family:'DM Mono',monospace;font-size:0.82rem;min-width:150px;color:var(--text)}
.bar{flex:1;height:9px;background:var(--panel);border-radius:5px;overflow:hidden;min-width:60px}
.bar span{display:block;height:100%;background:var(--cyan)}
.bar-row .bv{font-family:'DM Mono',monospace;font-size:0.82rem;color:var(--muted);
  min-width:62px;text-align:right}
.missed{font-size:0.88rem;padding:7px 0;border-bottom:1px solid var(--border);color:var(--muted)}
.missed b{color:var(--text);font-family:'DM Mono',monospace;font-size:0.82rem;margin-right:8px}
.chip{display:inline-block;background:var(--panel);border:1px solid var(--amber);color:var(--amber);
  border-radius:20px;padding:5px 13px;font-size:0.82rem;margin:0 6px 6px 0}
.ok-note{color:var(--green);font-size:0.9rem}

/* ---- Modal ---- */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.66);padding:20px}
.modal-box{background:var(--panel);border:1px solid var(--border);border-left:4px solid var(--amber);
  border-radius:10px;padding:22px;max-width:440px;width:100%}
.modal-box h3{font-family:'DM Mono',monospace;font-size:1rem;color:var(--amber);margin-bottom:10px}
.modal-box p{font-size:0.9rem;white-space:pre-line}
.modal-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}

footer{border-top:1px solid var(--border);padding:20px 0;margin-top:36px;
  color:var(--muted);font-size:0.8rem;text-align:center}

@media(max-width:600px){
  .wrap{padding:0 14px}
  .hero h1{font-size:1.55rem}
  .frow2{grid-template-columns:1fr}
  .card,.task{padding:16px}
  .eh-progress{display:none}
  .bar-row{flex-wrap:wrap}
  .bar-row .bl{min-width:100%}
  .submitbar .btn{width:100%}
}

/* ============ BARRIEREFREIHEIT: Kontrast-Themes ============ */
html[data-theme="hc"]{
  --bg:#000000; --panel:#0d0d0d; --panel-2:#0a0a0a; --border:#3d3d3d;
  --text:#ffffff; --muted:#c2c2c2; --cyan:#00eaff; --green:#00ff6a;
  --amber:#ffc400; --red:#ff3344; --code-bg:#000000;
}
html[data-theme="cvd"]{
  --bg:#0a0e14; --panel:#111a24; --panel-2:#0e1824; --border:#1e2c3a;
  --text:#eef1f6; --muted:#9aa8bb; --cyan:#56b4e9; --green:#2e9bff;
  --amber:#e69f00; --red:#ff8000; --code-bg:#060a10;
}

/* ---- Auge oben links ---- */

.a11y-toggle{background:transparent;border:none;padding:6px;cursor:pointer;display:flex;
  align-items:center;justify-content:center;border-radius:50%;opacity:0.5;
  transition:background .15s,opacity .15s}
.a11y-toggle:hover{opacity:1;background:rgba(255,255,255,0.07)}
.a11y-toggle svg{width:17px;height:17px;color:var(--cyan)}
.a11y-menu{position:absolute;top:calc(100% + 8px);left:0;background:var(--panel);
  border:1px solid var(--border);border-radius:10px;padding:6px;min-width:210px;
  box-shadow:0 12px 32px rgba(0,0,0,0.5);opacity:0;pointer-events:none;
  transform:translateY(-6px);transition:opacity .15s,transform .15s}
.a11y-menu.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.a11y-opt{display:flex;align-items:center;gap:10px;width:100%;background:transparent;
  border:none;color:var(--text);font-family:'DM Mono',monospace;font-size:0.76rem;
  padding:9px 12px;border-radius:7px;cursor:pointer;text-align:left;transition:background .12s}
.a11y-opt:hover{background:var(--panel-2)}
.a11y-opt.active{color:var(--cyan)}
.a11y-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,0.25)}
.a11y-check{margin-left:auto;color:var(--cyan);opacity:0;font-size:0.85rem}
.a11y-opt.active .a11y-check{opacity:1}

/* ---- Scroll nach oben ---- */
#scrollTopBtn{position:fixed;right:20px;bottom:20px;z-index:120;width:42px;height:42px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(17,24,32,0.5);border:1px solid color-mix(in srgb, var(--cyan) 28%, transparent);
  color:var(--cyan);backdrop-filter:blur(4px);cursor:pointer;opacity:0;pointer-events:none;
  transform:translateY(8px);transition:opacity .25s,transform .25s,background .15s,border-color .15s}
#scrollTopBtn.show{opacity:0.62;pointer-events:auto;transform:translateY(0)}
#scrollTopBtn:hover{opacity:1;background:color-mix(in srgb, var(--cyan) 12%, transparent);border-color:var(--cyan)}
@media(max-width:600px){
  #scrollTopBtn{right:14px;bottom:14px;width:38px;height:38px}
  .a11y-wrap{top:8px;left:8px}
}

/* Auge beim Scrollen ausblenden (überlagert sonst die Kopfleiste) */




/* ============ KOPFLEISTE (alle Ansichten) ============ */
.topbar{position:sticky;top:0;z-index:150;background:rgba(10,14,18,0.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border);padding:9px 0;margin-bottom:22px}
.topbar-inner{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-height:34px}
.tb-title{font-family:'DM Mono',monospace;font-size:0.8rem;letter-spacing:1px;color:var(--cyan);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.tb-btn{background:var(--panel-2);border:1px solid var(--border);color:var(--muted);
  font-family:'DM Mono',monospace;font-size:0.76rem;padding:6px 12px;border-radius:7px;
  cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px;
  transition:color .15s,border-color .15s,background .15s;flex-shrink:0}
.tb-btn:hover{color:var(--cyan);border-color:var(--cyan)}
.zen-toggle:hover{color:var(--green);border-color:var(--green)}
.zen-icon{font-size:0.85rem;line-height:1}
body.zen .zen-toggle{color:var(--green);border-color:var(--green);background:rgba(61,220,132,0.09)}
.eh-progress{font-size:0.76rem;color:var(--muted);margin-left:auto;white-space:nowrap;flex-shrink:0}
.eh-timer{font-family:'DM Mono',monospace;font-size:1.1rem;font-weight:500;color:var(--green);
  min-width:76px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0}
.eh-progress[hidden]+.eh-timer{margin-left:auto}
.eh-timer.warn{color:var(--amber)}
.eh-timer.crit{color:var(--red);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:0.45}}

/* Auge sitzt jetzt in der Leiste, nicht mehr freischwebend */
.a11y-wrap{position:relative;display:flex;align-items:center;flex-shrink:0}
.a11y-menu{top:calc(100% + 10px);left:0}

/* ---- Zen-Modus: Fokus auf die Aufgaben ---- */
body.zen .hero,
body.zen footer,
body.zen .scenario .eyebrow{display:none}
body.zen .topbar{margin-bottom:14px}
body.zen .wrap{max-width:1100px}
body.zen .task{padding:22px}

@media(max-width:760px){
  .tb-title{font-size:0.72rem}
  .zen-label{display:none}
  .tb-btn{padding:6px 10px;font-size:0.72rem}
}
@media(max-width:600px){
  .topbar{padding:7px 0}
  .topbar-inner{gap:7px}
  .eh-progress{display:none}
  .eh-timer{font-size:1rem;min-width:66px}
  /* Auf schmalen Displays weicht die Prüfungskennung: Auge, Zurück und Zen
     sind wichtiger als der Titel, der ohnehin im Prüfungskopf steht. */
  .tb-title{display:none}
}
@media(max-width:420px){
  .tb-btn{padding:5px 9px;font-size:0.7rem}
  .topbar-inner{gap:6px}
  .eh-timer{font-size:0.95rem;min-width:60px}
}

/* ==== Custom Cursor (final, überschreibt alle cursor:pointer-Regeln) ====
   Edler Cyan-Pfeil mit Verlauf als Standard; grüner Fingerzeiger mit Verlauf
   auf ALLEM Klickbaren — !important verhindert, dass der native weiße
   Handcursor ("großer Finger") je wieder durchschlägt. */
*{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0.7' y2='1'%3E%3Cstop offset='0' stop-color='%237deaff'/%3E%3Cstop offset='0.45' stop-color='%2322d3ee'/%3E%3Cstop offset='1' stop-color='%230d7f9c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4.5 1.8 L4.5 20.6 L9.3 16.1 L12.1 22.6 L15.2 21.3 L12.5 14.9 L19.2 14.7 Z' fill='url(%23g)' stroke='%2306222b' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important}
a,button,input,label,select,summary,[role="button"],
.tab,.cat-chip,.scope-slider,.opt,.zen-toggle,.wrong-start,.wrong-reset,
.start-btn,.btn-sec,.finish-btn,nav.jump a,.lib-item{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0.6' y2='1'%3E%3Cstop offset='0' stop-color='%238fffbf'/%3E%3Cstop offset='0.5' stop-color='%233dff88'/%3E%3Cstop offset='1' stop-color='%2317a85a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 1.5 C8.9 1.5 8.2 2.3 8.2 3.4 L8.2 12.2 L6.9 10.9 C6.1 10.1 4.8 10.1 4.1 10.9 C3.4 11.6 3.4 12.8 4.1 13.6 L9.2 19.5 C10 20.4 11.1 21 12.4 21 L15.6 21 C17.9 21 19.8 19.1 19.8 16.8 L19.8 10.4 C19.8 9.4 19 8.6 18 8.6 C17.7 8.6 17.4 8.7 17.1 8.8 C16.8 8 16.1 7.5 15.2 7.5 C14.8 7.5 14.4 7.6 14.1 7.8 C13.8 7.1 13.1 6.6 12.3 6.6 C12.1 6.6 11.9 6.6 11.8 6.7 L11.8 3.4 C11.8 2.3 11.1 1.5 10 1.5 Z' fill='url(%23h)' stroke='%2306222b' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 12 2, pointer !important}