/* VERBINDUNG style.css - Darstellung, Farben und Schriften kommen aus theme.css (aus dem Profil erzeugt) */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:15px;line-height:1.5}
#app{max-width:1280px;margin:0 auto;padding:16px}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px}
h1{margin:0;font-family:var(--mono);font-size:1.35rem;letter-spacing:.04em;color:var(--fg)}
h1::first-letter{color:var(--accent)}
h2{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:18px 0 8px}
h4{font-family:var(--mono);margin:14px 0 6px;color:var(--accent)}
.sub{margin:4px 0 0;color:var(--mute)}
.hint{color:var(--mute);margin:12px 0}
.grid{display:grid;grid-template-columns:260px minmax(0,1fr) 340px;gap:16px;align-items:start}
.col{min-width:0}
.mods{display:flex;flex-direction:column;gap:4px}
.mods h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:12px 0 4px}
.mods button.mod{all:unset;cursor:pointer;padding:8px 10px;border:1px solid var(--line);border-radius:4px;color:var(--fg);background:var(--panel)}
.mods button.mod:hover{border-color:var(--accent)}
.mods button.mod.on{border-color:var(--accent);background:var(--accent-bg);color:var(--fg)}
.mods button:focus-visible,.btn:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
canvas.view{width:100%;height:440px;display:block;background:var(--panel);border:1px solid var(--line);border-radius:6px;touch-action:none;cursor:grab}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.btn{cursor:pointer;font-family:var(--mono);font-size:.85rem;padding:8px 12px;border:1px solid var(--accent);background:transparent;color:var(--fg);border-radius:4px}
.btn:hover{background:var(--accent);color:#fff}
.btn.small{padding:4px 8px;font-size:.75rem}
.prm{margin:8px 0}
.prm-l{font-size:.8rem;color:var(--mute);margin-bottom:2px}
.prm-i{display:flex;gap:6px;margin:6px 0}
.prm-i input{flex:1;min-width:0}
input[type=range]{width:100%;accent-color:var(--accent)}
input,select{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:4px;padding:5px 6px;font-family:var(--mono);font-size:.85rem;max-width:100%}
.num{width:6rem}
.chk{display:flex;gap:6px;align-items:center;font-size:.85rem}
.desc{color:var(--fg);margin:0 0 8px}
.mini{font-size:.78rem;color:var(--mute)}
.irow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;border-bottom:1px solid var(--line);padding:4px 0;font-size:.8rem}
.il{color:var(--mute)}.iv{font-family:var(--mono);flex:1;text-align:right}
.badge{font-family:var(--mono);font-size:.7rem;padding:0 6px;border-radius:3px;border:1px solid var(--line)}
.badge.good{color:var(--ok);border-color:var(--ok)}.badge.bad{color:var(--accent);border-color:var(--accent)}
.irow.warn .iv{color:var(--accent)}
.stat{font-family:var(--mono);font-size:.75rem;color:var(--mute);margin-top:8px}
.notes{padding-left:18px;font-size:.85rem;color:var(--fg)}
.ws{border-top:1px solid var(--line);margin-top:12px}
.foot{margin-top:24px;border-top:1px solid var(--line);padding-top:10px;color:var(--mute);font-size:.78rem}
.foot p{margin:4px 0}
@media (max-width:980px){.grid{grid-template-columns:1fr}.mods{flex-direction:row;flex-wrap:wrap}.mods h3{width:100%}}
/* Lernmodul */
.lgrid{grid-template-columns:260px minmax(0,1fr)}
.mods a.lnk{display:block;text-decoration:none;padding:8px 10px;border:1px solid var(--line);border-radius:4px;color:var(--fg);background:var(--panel)}
.mods a.lnk:hover{border-color:var(--accent)}
.les,.ex{margin:0 0 18px}
.ex{border:1px solid var(--line);border-radius:6px;padding:10px 12px;background:var(--panel)}
.q{margin:0 0 8px;font-weight:600}
.opts{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.fb{margin:8px 0 0;font-size:.9rem}.fb.good{color:var(--ok)}.fb.bad{color:var(--accent)}
a{color:var(--accent)}
.btn,a.btn{text-decoration:none;display:inline-block}
@media (max-width:980px){.lgrid{grid-template-columns:1fr}}