:root{
  --bg:#0b0d10;--card:#12161b;--muted:#2a3038;--text:#e8eef6;--sub:#a9b4c4;--acc:#5bbad5;--good:#4caf50;--warn:#ffb300;--bad:#ef5350;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,sans-serif;background:var(--bg);color:var(--text);}
header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,rgba(11,13,16,.95),rgba(11,13,16,.7));backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--muted)}
.wrap{max-width:1200px;margin:0 auto;padding:12px 16px}
h1{font-size:20px;margin:4px 0}
.rules{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.chip{padding:8px 10px;background:var(--card);border:1px solid var(--muted);border-radius:12px;font-size:13px;color:var(--sub)}
main{max-width:1200px;margin:0 auto;padding:16px;display:grid;grid-template-columns:280px 1fr;gap:16px}
aside{background:var(--card);border:1px solid var(--muted);border-radius:14px;padding:12px;position:sticky;top:82px;height:fit-content}
aside h2{font-size:16px;margin:6px 0 10px}
label{display:block;font-size:13px;color:var(--sub);margin:8px 0 4px}
select, input[type="number"], input[type="text"], textarea{width:100%;background:#0e1318;border:1px solid var(--muted);color:var(--text);border-radius:10px;padding:8px;font-size:14px}
textarea{min-height:70px}
.btn{display:inline-flex;align-items:center;gap:8px;background:#10151b;border:1px solid var(--muted);color:var(--text);padding:8px 10px;border-radius:10px;font-size:14px;cursor:pointer}
.btn:hover{border-color:#3a4452}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.card{background:var(--card);border:1px solid var(--muted);border-radius:14px;padding:12px}
.card h3{margin:0 0 6px;font-size:16px}
.card h4{margin:8px 0 6px;font-size:14px;color:var(--sub)}
.exercise{border:1px dashed #334;padding:10px;border-radius:10px;margin:10px 0}
.exercise .title{display:flex;justify-content:space-between;gap:12px}
.meta{font-size:12px;color:var(--sub)}
.hint{font-size:12px;color:#cbd6e2;list-style:disc;margin:6px 0 0 18px}
.controls{display:flex;gap:8px;flex-wrap:wrap}
.badge{display:inline-block;padding:2px 6px;border-radius:999px;border:1px solid var(--muted);background:#0e1318;font-size:12px;color:var(--sub)}
.ok{color:var(--good)}.warn{color:var(--warn)}.bad{color:var(--bad)}
details{border:1px solid var(--muted);border-radius:10px;padding:8px;background:#0e1318}
summary{cursor:pointer;color:var(--sub)}
.footerbar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.small{font-size:12px;color:var(--sub)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

/* Mobile Optimierungen */
@media (max-width:980px){
  main{grid-template-columns:1fr}
  aside{position:static;margin-bottom:16px}
}

@media (max-width:768px){
  .wrap{padding:8px 12px}
  h1{font-size:18px;line-height:1.3}
  .rules{gap:8px}
  .chip{padding:6px 8px;font-size:12px}
  main{padding:12px;gap:12px}
  aside{padding:10px}
  .grid{grid-template-columns:1fr;gap:8px}
  .exercise .title{flex-direction:column;gap:6px}
  .controls{gap:6px}
  .btn{padding:10px 12px;font-size:14px;justify-content:center}
  .footerbar{flex-direction:column;align-items:stretch;gap:8px}
}

@media (max-width:480px){
  .wrap{padding:6px 8px}
  h1{font-size:16px}
  .rules{flex-direction:column;gap:6px}
  .chip{padding:6px 8px;font-size:11px;text-align:center}
  main{padding:8px}
  aside{padding:8px;border-radius:10px}
  .card{padding:8px;border-radius:10px}
  .exercise{padding:8px;margin:6px 0}
  .btn{padding:12px;font-size:14px;min-height:44px}
  select, input[type="number"], input[type="text"], textarea{padding:10px;font-size:16px;min-height:44px}
  .stack{gap:8px}
  .row{gap:6px}
}

@media (max-width:360px){
  .wrap{padding:4px 6px}
  h1{font-size:14px}
  .chip{font-size:10px;padding:4px 6px}
  main{padding:6px}
  aside{padding:6px}
  .card{padding:6px}
  .btn{padding:10px;font-size:13px}
}

@media print{header,aside,.footerbar,.no-print{display:none !important} body{background:#fff;color:#000} .card,.exercise{border-color:#ddd}}