/* Bereichs-Kalender: An- und Abreise in EINEM Fenster (Vorbild GHS.ch).
   ERZEUGT von _scripte/shared_sync.mjs aus build_muster.mjs — nicht von Hand ändern.
   Wird von Website und Vermieter-Panel gemeinsam genutzt.
   Das Panel muss die Farbvariablen --surface/--border/--ink/--accent bereitstellen. */
.ghscal-bg{position:fixed;inset:0;background:rgba(15,22,32,.42);z-index:3400;display:none}
.ghscal-bg.auf{display:block}
.ghscal{position:absolute;z-index:3401;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 50px rgba(20,35,61,.26);padding:14px;width:min(680px,calc(100vw - 24px))}
.ghscal .kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ghscal .stand{font-size:13.5px;color:var(--ink-2);line-height:1.35;min-width:0}
.ghscal .stand b{color:var(--ink)}
.ghscal .nav{display:flex;gap:6px;flex:0 0 auto}
.ghscal .nav button,.ghscal .zu{background:var(--surface-2);border:1px solid var(--border);border-radius:9px;width:34px;height:34px;font-size:16px;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--body)}
.ghscal .nav button:disabled{opacity:.35;cursor:default}
.ghscal .monate{display:flex;gap:18px}
.ghscal .mon{flex:1;min-width:0}
.ghscal .mtitel{text-align:center;font-weight:700;font-size:14.5px;margin-bottom:8px}
.ghscal table{width:100%;border-collapse:collapse;table-layout:fixed}
.ghscal th{font-size:11.5px;color:var(--ink-3);font-weight:600;padding-bottom:4px}
.ghscal td{padding:1px;text-align:center}
.ghscal td button{width:100%;aspect-ratio:1;border:0;background:none;border-radius:8px;font-size:13.5px;cursor:pointer;color:var(--ink);font-family:var(--body);padding:0}
.ghscal td button:disabled{color:var(--ink-3);opacity:.4;cursor:default}
.ghscal td button:hover:not(:disabled){background:var(--surface-2)}
/* Belegte Tage: unwählbar und als vergeben erkennbar. Vorher fehlten sie im
   Auswahl-Kalender ganz, obwohl der Verfügbarkeits-Kalender daneben dieselben Tage
   rot zeigte – ein Gast konnte über eine Belegung hinweg anfragen (Michael 7.8.). */
.ghscal td button.belegt{background:#fdecea;color:#a94434;text-decoration:line-through;opacity:1;cursor:not-allowed}
.ghscal td button.belegt:hover{background:#fdecea}
.ghscal .calhinweis{margin:0 14px 8px;padding:8px 12px;background:#fdecea;color:#a94434;border-radius:8px;font-size:13.5px}
.ghscal td.imbereich{background:#e7edfb}                                    /* Rückfall für Safari < 16.2 */
.ghscal td.imbereich{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.ghscal td.rstart{border-radius:8px 0 0 8px}
.ghscal td.rende{border-radius:0 8px 8px 0}
.ghscal td button.gewaehlt{background:var(--accent);color:#fff;font-weight:700}
.ghscal .zusatz{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.ghscal .zusatz label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin:0 0 4px}
.ghscal .fuss{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.ghscal .leeren{background:none;border:0;color:var(--ink-2);font-size:13.5px;cursor:pointer;text-decoration:underline;font-family:var(--body);padding:4px}
.ghscal .fertig{background:var(--accent);color:#fff;border:0;border-radius:9px;padding:10px 18px;font-weight:700;font-size:14px;cursor:pointer;font-family:var(--body)}
.ghscal .fertig:disabled{opacity:.4;cursor:default}
@media (max-width:760px){
  /* Mobil: Vollbild von unten – Daumen erreicht alles */
  .ghscal{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;border-radius:16px 16px 0 0;padding:14px 14px calc(14px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto}
  .ghscal .monate{flex-direction:column;gap:20px}
  .ghscal td button{font-size:15px}
  .ghscal .fertig{flex:1;padding:13px}
}