/* Reservierungsformular der Website (alle Themes; Farben aus den Variablen des Themes).
   Pfad: app/bausteine/reservierung/assets/reservieren.css → ausgabe/<slug>/assets/reservieren.css */
.res-seite{--res-farbe:var(--primaer,var(--rosso,#1d6b3a));--res-linie:var(--linie,var(--line,#e2ded6));--res-text2:var(--ink-2,var(--ink2,#5b6168));
  max-width:720px;margin:0 auto 48px}
.res-seite .lead{margin-bottom:20px}
.res-formular{display:grid;gap:18px}
.res-formular fieldset{border:1px solid var(--res-linie);border-radius:14px;padding:18px;margin:0;background:var(--card,#fff);min-width:0}
.res-formular legend{font-weight:700;padding:0 6px}
.res-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 16px}
.res-formular label{display:flex;flex-direction:column;gap:5px;font-size:15px;font-weight:600;color:var(--res-text2)}
.res-formular input,.res-formular select,.res-formular textarea{font:16px/1.4 inherit;color:var(--ink,#1f2328);background:#fff;border:1px solid #c9c5bc;border-radius:10px;padding:10px 12px;width:100%;min-width:0}
.res-formular input:focus,.res-formular select:focus,.res-formular textarea:focus,.res-zeit input:focus+span{outline:2px solid var(--res-farbe);outline-offset:1px}
.res-formular .res-voll{grid-column:1/-1}
.res-zeiten{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;border:0;padding:0}
.res-zeit{position:relative}
.res-zeit input{position:absolute;opacity:0;width:1px;height:1px}
.res-zeit span{display:inline-block;min-width:72px;text-align:center;border:1.5px solid var(--res-linie);border-radius:999px;padding:8px 12px;background:#fff;color:var(--ink,#1f2328);font-weight:600;cursor:pointer}
.res-zeit input:checked+span{background:var(--res-farbe);border-color:var(--res-farbe);color:#fff}
/* Kalender (reservieren.js): geschlossene Tage durchgestrichen und nicht wählbar */
.res-kal{max-width:360px;margin:0 0 14px}
.res-kal-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.res-kal-kopf button{border:1px solid var(--res-linie);background:#fff;color:var(--ink,#1f2328);border-radius:999px;width:36px;height:36px;font:600 18px/1 inherit;cursor:pointer}
.res-kal-kopf button[disabled]{opacity:.35;cursor:default}
.res-kal-tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.res-kal-wt{font-size:13px;font-weight:600;color:var(--res-text2);padding:2px 0}
.res-kal-tage button{border:1.5px solid var(--res-linie);background:#fff;color:var(--ink,#1f2328);border-radius:8px;padding:8px 0;font:600 15px/1.2 inherit;cursor:pointer;min-width:0}
.res-kal-tage button:hover:not([disabled]):not(.zu),.res-kal-tage button:focus-visible{border-color:var(--res-farbe);outline:none}
.res-kal-tage button[disabled]{border-color:transparent;background:transparent;color:#b9b6ae;cursor:default}
.res-kal-tage button.zu{border-color:transparent;background:#f1efea;color:#9a978f;text-decoration:line-through;cursor:not-allowed}
.res-kal-tage button.gewaehlt{background:var(--res-farbe);border-color:var(--res-farbe);color:#fff}
.res-hinweis{font-size:15px;color:var(--res-text2);margin:10px 0 0}
.res-hinweis:empty{display:none}
.res-chk{flex-direction:row!important;align-items:flex-start;gap:10px!important;font-weight:500!important;color:var(--ink,#1f2328)!important}
.res-chk input{width:20px!important;height:20px;flex:none;margin-top:2px}
.res-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.res-knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--res-farbe);color:#fff;border:0;border-radius:999px;padding:13px 26px;font:600 17px/1.2 inherit;cursor:pointer;justify-self:start}
.res-knopf[disabled]{opacity:.6;cursor:wait}
.res-meldung{margin:0;padding:12px 16px;border-radius:10px;font-weight:600}
.res-meldung:empty{display:none}
.res-meldung.ok{background:#e3f3ea;color:#145236}
.res-meldung.fehler{background:#fde4e0;color:#8c2f21}
.res-fertig{border:1px solid var(--res-linie);border-radius:14px;padding:22px;background:var(--card,#fff)}
.res-fertig h2{margin-top:0}
.res-klein{font-size:14px;color:var(--res-text2)}
@media (max-width:520px){.res-formular fieldset{padding:14px}.res-knopf{width:100%}}