/* ===== Farbwelt =====
   Gestaltung: Kartenlayout, Seitenleiste, Pillen.
   CD Ergotherapie Austria (aus dem veröffentlichten CSS und Logo der Website, kein offizieller Styleguide):
   Orange #F07F17 (Leiste, Buttons), Verlauf #F5AF19 → #F12711, Logo-Rot #E11A22, Hintergrund #F2F2F2 – aus dem CSS von www.ergotherapie.at.
   --ac = Füllfarbe (Dunkeltext darauf, Kontrast ok) · --acl = Orange für Links/Symbole auf Weiß (Kontrast ≥ 4,5) */
:root{
  --ac:#F07F17;--ac2:#D96C0C;--acs:#FDEBD9;--acl:#A84A00;--onac:#1F1A17;--grad:linear-gradient(90deg,#F5AF19,#F12711);
  --bg:#F2F2F2;--fg:#2B2623;--mut:#6B645F;--card:#fff;--bd:#E6E2DE;--r:16px;--sh:0 2px 14px rgba(60,73,81,.07);
  --info:#3F6FA8;--infos:#E3ECF6;--ok:#2B8F26;--oks:#E3F4E2;--warn:#B45F00;--warns:#FFF1DC;--bad:#B3001F;--bads:#FBE3E7;--viol:#6B4BA8;--viols:#EDE6F8;--grau:#ECE8E4}
@media(prefers-color-scheme:dark){:root{--ac:#F28A2A;--ac2:#F5A04F;--acs:#3A2A1A;--acl:#FFA654;--onac:#1F1A17;--bg:#171412;--fg:#F0ECE9;--mut:#B1A8A1;--card:#221E1B;--bd:#37302B;--sh:0 2px 14px rgba(0,0,0,.25);
  --info:#8DB3E3;--infos:#26354A;--ok:#5CCB57;--oks:#1F3A1E;--warn:#FFB347;--warns:#3D2E16;--bad:#FF7A8C;--bads:#432329;--viol:#BDA6EA;--viols:#2E2442;--grau:#302A26}}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
a{color:var(--acl)}h1{font-size:28px;font-weight:600;line-height:1.2;margin:6px 0 8px}h2{font-size:18px;font-weight:600;margin:1.6em 0 .5em}h3{font-size:15px;font-weight:600;margin:1.2em 0 .4em}
/* Kopfzeile als schwebende Karte */
.top{position:relative;overflow:hidden;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 14px 0;padding:10px 16px;background:var(--card);border-radius:var(--r);box-shadow:var(--sh)}
.brand{display:flex;gap:.7rem;align-items:center;text-decoration:none;color:var(--fg);font-weight:600;line-height:1.2}.brand small{display:block;font-weight:400;color:var(--mut);font-size:12px}
.logo{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--ac);color:var(--onac);font-weight:700;flex:none}img.logo{background:transparent;object-fit:contain}
.who{margin-left:auto;display:flex;gap:.7rem;align-items:center;font-size:13px;color:var(--mut)}.who form{margin:0}.who button.link{color:var(--acl);font-weight:600;text-decoration:none}
.demo{margin:10px 14px 0;background:var(--warns);color:var(--warn);text-align:center;font-size:12.5px;padding:6px 10px;border-radius:12px}
/* Seitenleiste + Inhalt */
#shell{display:grid;grid-template-columns:240px minmax(0,1fr);gap:14px;padding:14px 14px 0;align-items:start}#shell.solo{grid-template-columns:minmax(0,1fr)}
nav.side{position:sticky;top:14px;background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:12px}
nav.side .ng{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--mut);padding:14px 12px 6px}nav.side .ng:first-child{padding-top:2px}
nav.side a{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--fg)}
nav.side a .ico{color:var(--acl)}nav.side a:hover{background:var(--bg)}
nav.side a.on{background:var(--ac);color:var(--onac);font-weight:600}nav.side a.on .ico{color:var(--onac)}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
main{min-width:0;padding:2px clamp(4px,1vw,16px) 28px;max-width:1100px}main.narrow{max-width:820px;margin:0 auto;width:100%}
footer{text-align:center;color:var(--mut);font-size:12.5px;padding:1.2rem 1rem 2rem}
.card{background:var(--card);border:0;border-radius:var(--r);box-shadow:var(--sh);padding:16px 20px;margin:12px 0}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.grid2{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* Formulare */
.f{display:block;margin:.5rem 0}.f span{display:block;font-size:13px;font-weight:600;margin-bottom:.2rem}.f small{display:block;color:var(--mut);font-size:12px}
input,select,textarea{width:100%;padding:.6rem .75rem;border:1px solid var(--bd);border-radius:10px;font:inherit;background:var(--card);color:var(--fg)}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--acl);outline-offset:1px}
input[type=checkbox],input[type=radio]{width:auto}.chk{display:flex;gap:.6rem;align-items:flex-start;margin:.5rem 0}.chk input{margin-top:.3rem;flex:none}
button,.btn{display:inline-block;padding:9px 16px;border:0;border-radius:10px;background:var(--ac);color:var(--onac);font:inherit;font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;text-decoration:none}
button:hover,.btn:hover{filter:brightness(.92)}button.sec,.btn.sec{background:var(--acs);color:var(--acl)}button.warn{background:var(--bad);color:#fff}
button.link{background:none;color:var(--acl);padding:0;font-weight:400;text-transform:none;letter-spacing:0;font-size:inherit;text-decoration:underline}button:disabled{opacity:.45;cursor:not-allowed;filter:none}
details>summary{cursor:pointer}
/* Tabellen im Dashboard-Stil */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
th{background:var(--bg);color:var(--mut);font-weight:500;font-size:13px;padding:10px 14px;text-align:left}th:first-child{border-radius:10px 0 0 10px}th:last-child{border-radius:0 10px 10px 0}
td{padding:10px 14px;border-top:1px solid var(--bd);vertical-align:top}thead+tbody tr:first-child td,tbody:first-child tr:first-child td{border-top:0}tbody tr:hover td{background:color-mix(in srgb,var(--ac) 4%,transparent)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}tr.fett td{font-weight:700;background:var(--acs)}
/* Pillen */
.badge{display:inline-block;padding:2px 11px;border-radius:999px;font-size:12px;font-weight:600;background:var(--grau);color:var(--fg)}
.badge.gelb{background:var(--warns);color:var(--warn)}.badge.blau{background:var(--infos);color:var(--info)}.badge.violett{background:var(--viols);color:var(--viol)}.badge.gruen{background:var(--oks);color:var(--ok)}.badge.rot{background:var(--bads);color:var(--bad)}
.flash{background:var(--oks);color:var(--ok);padding:.7rem 1rem;border-radius:12px;margin:12px 0;font-weight:500}.warnbox{background:var(--warns);color:var(--fg);border-left:5px solid var(--warn);padding:.7rem 1rem;border-radius:10px;margin:.7rem 0}.errbox{background:var(--bads);border-left:5px solid var(--bad);padding:.7rem 1rem;border-radius:10px;margin:.7rem 0}
.mut{color:var(--mut)}.small{font-size:13px}.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}.right{margin-left:auto}
.sigwrap{border:2px dashed var(--bd);border-radius:12px;background:#fff;touch-action:none}canvas{display:block;width:100%;height:160px}
.bar{height:.9rem;background:var(--acs);border-radius:999px;overflow:hidden}.bar i{display:block;height:100%;background:var(--ac);border-radius:999px}
.ampel{display:inline-block;width:.9rem;height:.9rem;border-radius:50%;margin-right:.4rem;vertical-align:middle}.ampel.gruen{background:var(--ok)}.ampel.gelb{background:#E0A800}.ampel.rot{background:var(--bad)}
.steps{display:flex;gap:6px;flex-wrap:wrap;margin:.6rem 0 1rem}.steps span{padding:4px 14px;border-radius:999px;background:var(--grau);font-size:13px;color:var(--mut)}.steps span.on{background:var(--ac);color:var(--onac);font-weight:700}.steps span.done{background:var(--oks);color:var(--ok)}
svg.flow text{fill:var(--fg);font:12px system-ui}svg.flow .box{fill:var(--card);stroke:var(--ac);stroke-width:1.5}svg.flow .lane{fill:var(--acs);opacity:.7}svg.flow path{stroke:var(--mut);fill:none}
code{background:var(--acs);padding:.05rem .35rem;border-radius:6px;font-size:.85em;word-break:break-all}
@media(max-width:900px){.top{margin:8px 8px 0}#shell{grid-template-columns:minmax(0,1fr);padding:8px 8px 0}nav.side{position:static;display:flex;gap:4px;overflow-x:auto;padding:8px}nav.side .ng{display:none}nav.side a{white-space:nowrap;padding:8px 12px}}
@media(max-width:720px){h1{font-size:23px}.who{margin-left:0;width:100%}}
@media print{.top,.demo,footer,.noprint,nav.side{display:none!important}#shell{display:block;padding:0}body{background:#fff;color:#000}.card{box-shadow:none;border:1px solid #999}}
.card>h2:first-child,.card>h3:first-child{margin-top:.2em}

.top::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--grad)}
h1{letter-spacing:.01em}
.brand img.logo.wide{width:auto;height:46px;border-radius:0}.brand .app{padding-left:14px;margin-left:2px;border-left:1px solid var(--bd)}
@media(max-width:560px){.brand img.logo.wide{height:36px}.brand .app small{display:none}}
svg.flow .phase{fill:var(--grau)}svg.flow .phl{font-size:10.5px;font-weight:700;letter-spacing:.08em;fill:var(--mut)}svg.flow .box.on{fill:var(--acs);stroke:var(--ac);stroke-width:3}svg.flow .t-start,svg.flow .t-end{stroke-width:2}svg.flow .t-decision{fill:var(--warns);stroke:var(--warn)}svg.flow .el{font-size:11px;font-weight:600;fill:var(--acl)}svg.flow .num{font-size:10px;fill:var(--mut)}svg.flow text{fill:var(--fg)}
td.n{white-space:nowrap}td form.row{flex-wrap:nowrap;gap:.4rem}td select{width:auto;min-width:7rem}td form.row button{flex:none}

.cal{padding:12px}.calh,.calg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.calh div{font-size:12px;font-weight:700;color:var(--mut);padding:2px 6px}
.calc{min-height:104px;background:var(--bg);border-radius:10px;padding:5px;display:flex;flex-direction:column;gap:3px;overflow:hidden}.calc.out{opacity:.45}.calc.today{box-shadow:inset 0 0 0 2px var(--ac)}.calc .dn{font-size:12px;font-weight:600;color:var(--mut)}
.ev{display:block;font-size:11.5px;line-height:1.25;padding:2px 6px;border-radius:6px;text-decoration:none;color:var(--fg);background:var(--grau);border-left:3px solid var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}span.ev{display:inline-block}
.ev.t-seminar{background:var(--acs);border-color:var(--ac)}.ev.t-besprechung{background:var(--infos);border-color:var(--info)}.ev.t-projekt{background:var(--viols);border-color:var(--viol)}.ev.t-meilenstein{background:var(--oks);border-color:var(--ok)}
.ev.t-aufgabe{background:var(--warns);border-color:var(--warn)}.ev.t-abstimmung{background:var(--bads);border-color:var(--bad)}.ev.t-pruefung{background:var(--grau);border-color:var(--mut)}
@media(max-width:720px){.calc{min-height:70px}.ev{font-size:10px;padding:1px 3px}}
@media print{.calc{min-height:80px;border:1px solid #bbb}}

.proto p{margin:.4rem 0 .7rem}.proto h4{margin:1rem 0 .3rem;font-size:15px}.proto ul,.proto ol{margin:.3rem 0 .8rem 1.2rem}.proto li{margin:.15rem 0}
textarea[data-grow]{min-height:160px;line-height:1.6;resize:vertical}