:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  --navy:#1f2942;--blue:#0764c1;--bg:#f4f7fb;--surface:#fff;--ink:#1f2942;--muted:#5d6b82;--line:#dfe6ef;--soft:#e8f1fc;--ok:#ddf5ea;--okInk:#1d6b47;--err:#c23b5a;
  font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#141a26;--surface:#1c2433;--ink:#e8edf5;--muted:#9fabbf;--line:#2c3649;--soft:#16304f;--ok:#173528;--okInk:#86ddb0;--navy:#e8edf5}}
:root[data-theme="dark"]{--bg:#141a26;--surface:#1c2433;--ink:#e8edf5;--muted:#9fabbf;--line:#2c3649;--soft:#16304f;--ok:#173528;--okInk:#86ddb0;--navy:#e8edf5}
*,*::before,*::after{box-sizing:inherit}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-size:17px;line-height:1.5}
a{color:var(--blue)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.top{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;max-width:860px;margin:0 auto}
.logo{font-family:"Barlow Condensed","Barlow",system-ui,sans-serif;font-weight:700;font-size:26px;color:var(--navy);text-decoration:none;letter-spacing:.01em}
.logo span{color:var(--blue)}
.back-home{font-size:15px;text-decoration:none}
.wrap{max-width:860px;margin:0 auto;padding:4px 22px 40px}
h1{font-family:"Barlow Condensed","Barlow",system-ui,sans-serif;font-size:clamp(30px,5vw,42px);line-height:1.1;margin:10px 0 8px;color:var(--navy)}
.lead{margin:0 0 20px;color:var(--muted);max-width:620px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:16px;box-shadow:0 10px 30px rgba(31,41,66,.06)}
.card h2{margin:0;font-size:22px}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice button{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:20px;text-align:left;display:flex;flex-direction:column;gap:4px;transition:border-color .15s,background .15s}
.choice button:hover{border-color:var(--blue);background:var(--soft)}
.choice b{font-size:19px}
.choice span{color:var(--muted);font-size:15px}
.choice .ico{font-size:26px}
.lab{font-weight:600;margin-bottom:8px}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.opt{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;text-align:left}
.opt small{display:block;color:var(--muted)}
.opt[aria-pressed="true"],.day[aria-pressed="true"],.slot[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.opt[aria-pressed="true"] small{color:#dbe9fb}
.days{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
.day{flex:none;scroll-snap-align:start;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 12px;text-align:center;min-width:70px;font-size:14px}
.day b{display:block;font-size:20px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.slot{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:9px 0;font-variant-numeric:tabular-nums}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fields label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted)}
.fields .full{grid-column:1/-1}
.fields input,.fields select,.fields textarea{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg);font-size:16px;color:var(--ink)}
.fields textarea{min-height:90px;resize:vertical}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.chk input{margin-top:4px;width:18px;height:18px;flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.primary{background:var(--blue);color:#fff;border:0;border-radius:12px;padding:12px 20px;font-weight:600;font-size:17px;align-self:flex-start}
.primary:disabled{opacity:.5;cursor:not-allowed}
.ghost{background:none;border:1px solid var(--line);border-radius:12px;padding:10px 16px}
.link{background:none;border:0;padding:0;color:var(--blue);align-self:flex-start}
.hint{color:var(--muted);margin:0}
.err{color:var(--err);margin:0;min-height:1.2em}
.done{background:var(--ok);color:var(--okInk);border-radius:14px;padding:16px 18px}
.done b{display:block;font-size:19px;margin-bottom:4px}
.summary{background:var(--soft);border-radius:12px;padding:12px 14px}
.small{font-size:14px;color:var(--muted);margin-top:18px}
@media (max-width:600px){.choice,.fields{grid-template-columns:1fr}.card{padding:16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Monatskalender (frei = grün, ausgebucht = dezent rot) */
:root{--frei:#e2f5ec;--freiInk:#17694a;--freiLine:#a9dcc4;--voll:#fbeef1;--vollInk:#b04a63;--vollLine:#f1c9d3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--frei:#123a2b;--freiInk:#8fe0bb;--freiLine:#24634a;--voll:#3a1c25;--vollInk:#f0a5b6;--vollLine:#5c2c3a}}
:root[data-theme="dark"]{--frei:#123a2b;--freiInk:#8fe0bb;--freiLine:#24634a;--voll:#3a1c25;--vollInk:#f0a5b6;--vollLine:#5c2c3a}
.cal{border:1px solid var(--line);border-radius:16px;padding:12px;background:var(--surface);max-width:560px}
.cal-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.cal-h b{font-size:18px;text-align:center}.cal-h b .sq{display:block;font-size:13px;font-weight:400;color:var(--muted)}
.cal-nav{width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:20px;line-height:1}
.cal-nav:disabled{opacity:.35;cursor:default}
.cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-wd{text-align:center;font-size:13px;font-weight:600;color:var(--muted);padding-bottom:2px}.cal-wd small{display:block;font-weight:400;font-size:11px}
.cal-d{height:58px;border:1px solid transparent;border-radius:12px;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px;color:var(--muted);min-width:0}
.cal-d b{font-size:17px;font-variant-numeric:tabular-nums;line-height:1.1}
.cal-d small{font-size:10.5px;line-height:1.1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cal-d.frei{background:var(--frei);border-color:var(--freiLine);color:var(--freiInk);cursor:pointer}
.cal-d.frei:hover{filter:brightness(.97);border-color:var(--freiInk)}
.cal-d.voll{background:var(--voll);border-color:var(--vollLine);color:var(--vollInk);cursor:not-allowed}
.cal-d.zu{opacity:.55}.cal-d.spaet{opacity:.3}
.cal-d.heute b{text-decoration:underline;text-underline-offset:3px}
.cal-d[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.cal-d:disabled{cursor:default}
.cal-leg{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:13px;color:var(--muted)}
.cal-leg span{display:inline-flex;align-items:center;gap:6px}.cal-leg .sq{margin-left:4px}
.cal-leg i{width:12px;height:12px;border-radius:4px;display:inline-block;border:1px solid}
.l-frei{background:var(--frei);border-color:var(--freiLine)!important}.l-voll{background:var(--voll);border-color:var(--vollLine)!important}.l-zu{background:transparent;border-color:var(--line)!important}
.slot.taken{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--voll);border-color:var(--vollLine);color:var(--vollInk);cursor:not-allowed;opacity:.85}
.slot.taken small{font-size:11px}
button.slot{background:var(--frei);border-color:var(--freiLine);color:var(--freiInk);font-weight:600}
button.slot:hover{border-color:var(--freiInk)}
button.slot[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
@media (max-width:600px){.opts{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.opt{padding:8px 10px;font-size:15px;min-width:0;overflow-wrap:anywhere;hyphens:auto}}
@media (max-width:600px){.cal-d{height:auto;aspect-ratio:1/1;min-height:44px}}
@media (max-width:420px){.cal-d small{display:none}.cal{padding:8px}.cal-g{gap:3px}.cal-d{border-radius:9px;min-height:40px}.cal-d b{font-size:15px}.cal-d small{font-size:9px}.cal-leg{gap:10px;font-size:12px}}