.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:32px}
@media(max-width:800px){.book-grid{grid-template-columns:1fr}}
.book-form{background:var(--s2);border-radius:var(--r);padding:32px;border:1px solid var(--ol2)}
.book-form h3{font-family:var(--fd);font-size:1.3rem;margin-bottom:20px}
.book-info{display:flex;flex-direction:column;gap:16px}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:12px}
.slot-btn{padding:10px;border-radius:var(--rm);background:var(--s3);border:2px solid var(--ol2);
  color:var(--on);font-family:var(--fb);font-size:.88rem;cursor:pointer;transition:all .2s;text-align:center}
.slot-btn:hover{border-color:var(--pri);background:rgba(123,97,255,.1)}
.slot-btn.sel{border-color:var(--pri);background:rgba(123,97,255,.15);color:var(--pri-lt);font-weight:600}
.slot-btn.taken{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.avail-day{background:var(--s2);border-radius:var(--r);padding:20px;border:1px solid var(--ol2)}
.avail-day h4{color:var(--on);font-size:.95rem;margin-bottom:8px}
.avail-day .times{color:var(--on2);font-size:.88rem}
.btype-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:600px){.btype-grid{grid-template-columns:1fr}}
.btype-opt{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center;gap:8px;padding:20px 12px;border-radius:var(--rm);border:2px solid var(--ol2);background:var(--s3);cursor:pointer;transition:all .25s;text-align:center;min-height:120px;position:relative}
/* User-Bug 2026-04-28: "online termin bleibt immer angewählt, telefon nicht
   anwählbar". Vorher: pointer-events:none auf input verhinderte label-click-
   delegation in einigen Browsern. Jetzt: input ueberlappt label transparent
   und faengt selbst clicks (browser-native radio-toggle). */
.btype-opt input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;width:100%;height:100%;z-index:1}
.btype-opt > *:not(input){pointer-events:none;position:relative;z-index:2}
.btype-opt .material-symbols-outlined{font-size:32px;color:var(--on2);transition:color .2s;display:block;line-height:1}
.btype-opt strong{font-size:.92rem;color:var(--on);display:block;margin-top:2px;line-height:1.3}
.btype-opt small{font-size:.78rem;color:var(--on2);display:block;line-height:1.4}
.btype-opt:hover{border-color:var(--pri);background:rgba(123,97,255,.06)}
.btype-opt.sel{border-color:var(--pri);background:rgba(123,97,255,.12)}
.btype-opt.sel .material-symbols-outlined{color:var(--pri-lt)}
.btype-opt.sel strong{color:var(--pri-lt)}