/* ===== Erweiterungen für den Gesamtprototyp ===== */
.vorschau-band{position:sticky;top:0;z-index:40;background:#F5B21B;color:#14171A;font-size:.85rem;padding:6px 12px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.vorschau-band b{font-weight:700}
.vorschau-band select{background:#14171A;color:#fff;border:0;border-radius:6px;padding:4px 8px;font-weight:600}
.app .seite{top:34px;height:calc(100vh - 34px)}
.zeile{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.zeile.zw{justify-content:space-between}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);white-space:nowrap}
.chip.gruen{background:var(--gruen-tief);border-color:#1E6B42;color:#7FE0A8}
.chip.rot{background:var(--rot-tief);border-color:#6B2620;color:#FFB4AE}
.chip.gelb{background:#3A2E0E;border-color:#6B5414;color:#FFD97A}
.chip.blau{background:#10223F;border-color:#1F4580;color:#9CC3FF}
.btn.klein{padding:7px 12px;font-size:.9rem}
.btn.gruen{background:#1E8A50}.btn.gruen:hover{background:#25A05E}
.raster2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.raster3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.panel h3{font-size:1.15rem;margin-bottom:10px}
.panel + .panel{margin-top:16px}
.brot{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.9rem;margin:-26px 0 14px;position:relative;flex-wrap:wrap}
.brot a{color:var(--muted)}
.inhalt > h1 + .brot{margin-top:-8px}
.balken.blau i{background:var(--blau)} .balken.gelb i{background:var(--gelb)} .balken.rot i{background:var(--rot)}
.kurs .bild.b1{background:linear-gradient(135deg,#5A1510,#1A1D22)} .kurs .bild.b2{background:linear-gradient(135deg,#123257,#1A1D22)}
.kurs .bild.b3{background:linear-gradient(135deg,#5A4310,#1A1D22)} .kurs .bild.b4{background:linear-gradient(135deg,#1F4A33,#1A1D22)}
.kurs .text .zeile{font-size:.85rem;color:var(--muted)}
.kurs a.btn{margin-top:auto}
.ring.gross{width:130px;height:130px}.ring.gross::after{width:108px;height:108px}
.ringwert{position:relative}
.ringwert .mitte{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:"Barlow Condensed",sans-serif}
.ringwert .mitte b{font-size:2rem;line-height:1;display:block}
.ringwert .mitte small{font-family:Barlow;font-size:.75rem;color:var(--muted)}
/* Themenübersicht */
.themen{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.thema{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--text)}
.thema:hover{border-color:#4A525C}
.thema .nr{width:52px;height:52px;border-radius:8px;display:grid;place-items:center;background:var(--rot-tief);color:var(--rot);font-family:"Barlow Condensed",sans-serif;font-size:1.5rem;font-weight:700}
.thema b{display:block;margin-bottom:6px}
.thema .rechts{text-align:right;font-size:.85rem;color:var(--muted);min-width:90px}
/* Lernansicht */
.lern{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
.frage-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.frage-text{font-size:1.15rem;font-weight:600;margin:14px 0}
.antworten{display:grid;gap:8px}
.antwort{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);cursor:pointer;text-align:left;width:100%}
.antwort:hover{border-color:#4A525C}
.antwort .bu{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--muted);display:grid;place-items:center;font-weight:700;flex:none;font-size:.9rem}
.antwort[aria-pressed="true"]{border-color:var(--text)} .antwort[aria-pressed="true"] .bu{background:var(--text);color:var(--bg);border-color:var(--text)}
.antwort.richtig{background:var(--gruen-tief);border-color:var(--gruen)} .antwort.richtig .bu{background:var(--gruen);border-color:var(--gruen);color:#06150C}
.antwort.falsch{background:var(--rot-tief);border-color:var(--rot)} .antwort.falsch .bu{background:var(--rot);border-color:var(--rot);color:#fff}
.antwort.fehlt{border-style:dashed;border-color:var(--gruen)}
.antwort:disabled{cursor:default}
.erklaerung{margin-top:14px;padding:14px 16px;border-radius:8px;background:#E8F7EE;color:#0E2A1A}
.erklaerung.falsch{background:#FDECEA;color:#3A0F0B}
.erklaerung b{display:block;margin-bottom:4px}
.lern-fuss{display:flex;justify-content:space-between;gap:10px;margin-top:16px}
.quelle{font-size:.8rem;color:var(--muted);margin-top:12px}
/* Gerätekunde */
.geraet-bild{height:260px;border-radius:var(--radius);background:radial-gradient(circle at 50% 40%,#3A2A20,#141619 70%);display:grid;place-items:center;color:#C9A27A;position:relative}
.geraet-bild svg{width:120px;height:120px}
.geraet-bild .hinweisbild{position:absolute;bottom:10px;left:12px;font-size:.78rem;color:var(--muted)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}
.tabs button{border:1px solid var(--line);background:var(--panel-2);border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:600}
.tabs button[aria-selected="true"]{background:var(--rot);border-color:var(--rot)}
.haken-liste{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.haken-liste li{display:flex;gap:10px;align-items:flex-start}
.haken-liste li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;background:var(--rot);color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:700;margin-top:1px}
.geraete-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
/* Prüfung */
.pruef-kopf{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.uhr{font-family:"Barlow Condensed",sans-serif;font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;padding:4px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.uhr.knapp{color:var(--rot);border-color:var(--rot)}
.fragenraster{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-top:16px}
.fragenraster button{aspect-ratio:1;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);cursor:pointer;font-weight:600;font-size:.85rem;padding:0}
.fragenraster button.beantwortet{background:#2F3640;border-color:#56606C}
.fragenraster button.aktuell{outline:2px solid var(--text)}
.fragenraster button.r{background:#1E8A50;border-color:#1E8A50} .fragenraster button.f{background:var(--rot);border-color:var(--rot)}
/* Tabellen */
.tabelle-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table.tab{width:100%;border-collapse:collapse;font-size:.92rem;min-width:720px}
.tab th{text-align:left;font-weight:600;color:var(--muted);padding:10px 12px;background:var(--panel-2);border-bottom:1px solid var(--line);white-space:nowrap}
.tab td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tab tr:last-child td{border-bottom:0}
.tab tbody tr:hover{background:#1D2126}
.filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.filter input,.filter select{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.filter input{min-width:200px;flex:1}
/* Statistik */
.saeulen{display:flex;align-items:flex-end;gap:5px;height:150px;padding-top:10px;border-bottom:1px solid var(--line)}
.saeulen i{flex:1;background:var(--rot);border-radius:3px 3px 0 0;min-height:2px}
.saeulen-achse{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);margin-top:4px}
.staerken{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.staerken li{display:grid;grid-template-columns:1fr 160px 44px;gap:10px;align-items:center;font-size:.92rem}
.staerken li span:last-child{text-align:right;font-weight:600}
/* Kriterien */
.kriterien{display:grid;gap:10px}
.kriterium{display:grid;grid-template-columns:1fr 160px;gap:14px;align-items:center;padding:12px 14px;background:var(--panel-2);border-radius:8px}
.kriterium small{display:block;color:var(--muted);font-size:.8rem}
.kriterium input[type=number]{width:100%;background:#F4F5F7;color:#14171A;border:1px solid var(--line);border-radius:8px;padding:8px 10px;text-align:right}
.kriterium .einheit{display:flex;gap:6px;align-items:center}
.schalter{appearance:none;width:46px;height:26px;border-radius:13px;background:#3A414A;position:relative;cursor:pointer;justify-self:end;margin:0}
.schalter::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
.schalter:checked{background:var(--blau)} .schalter:checked::after{left:23px}
.diff{width:100%;border-collapse:collapse;font-size:.92rem}
.diff td,.diff th{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
.diff .alt{color:#FFB4AE;text-decoration:line-through} .diff .neu{color:#7FE0A8;font-weight:600}
.kurs-liste{display:grid;gap:4px;align-content:start}
.kurs-liste button{text-align:left;border:1px solid transparent;background:transparent;border-radius:8px;padding:10px 12px;cursor:pointer;color:var(--muted)}
.kurs-liste button[aria-current="true"]{background:var(--rot-tief);border-color:#6B2620;color:var(--text)}
.layout-admin{display:grid;grid-template-columns:240px 1fr;gap:16px;align-items:start}
/* Freigabe */
.kriterien-check{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kriterien-check li{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:10px 12px;background:var(--panel-2);border-radius:8px}
.kriterien-check .ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700}
.kriterien-check .ic.ok{background:var(--gruen);color:#06150C} .kriterien-check .ic.offen{background:var(--gelb);color:#14171A}
.kriterien-check small{color:var(--muted)}
textarea{width:100%;min-height:80px;background:#F4F5F7;color:#14171A;border:1px solid var(--line);border-radius:8px;padding:10px;font:inherit}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#F1F3F5;color:#14171A;padding:10px 18px;border-radius:8px;font-weight:600;z-index:60;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.code-gross{font-family:ui-monospace,Consolas,monospace;font-size:1.4rem;letter-spacing:.06em;background:#F4F5F7;color:#14171A;padding:10px 16px;border-radius:8px;display:inline-block}
.zeitleiste{list-style:none;margin:0;padding:0;display:grid;gap:0}
.zeitleiste li{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.zeitleiste li span:first-child{color:var(--muted)}
.mitteilung{display:flex;gap:12px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.mitteilung + .mitteilung{margin-top:10px}
.mitteilung .punktfarbe{width:10px;height:10px;border-radius:50%;background:var(--rot);margin-top:7px;flex:none}
.mitteilung.gelesen .punktfarbe{background:var(--line)}
@media (max-width:1000px){
  .lern{grid-template-columns:1fr}
  .raster3{grid-template-columns:1fr}
  .layout-admin{grid-template-columns:1fr}
  .kurs-liste{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto}
}
@media (max-width:860px){
  .app .seite{top:0;height:100%}
  .mobil-kopf{top:34px}
  .raster2{grid-template-columns:1fr}
  .fragenraster{grid-template-columns:repeat(6,1fr)}
  .staerken li{grid-template-columns:1fr 90px 40px}
  .kriterium{grid-template-columns:1fr 110px}
  .thema{grid-template-columns:44px 1fr}
  .thema .nr{width:44px;height:44px}
  .thema .rechts{grid-column:2;text-align:left}
  .brot{margin-top:-14px}
}
@media (max-width:860px){
  .vorschau-band{position:relative;font-size:.8rem}
  .vorschau-band > span{display:none}
  .mobil-kopf{top:0}
}