/* Reservation dialog follows the existing website tokens. */
#rs-fab{position:fixed;right:20px;bottom:20px;z-index:9990;background:var(--primary);color:var(--primary-foreground);border:1px solid var(--primary-foreground);border-radius:999px;padding:14px 22px;font:600 .95rem/1.2 inherit;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:8px}
#rs-fab:hover{background:var(--primary-hover)}
#rs-overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 65%,transparent);z-index:99990;display:none;align-items:center;justify-content:center;padding:16px}
#rs-overlay.rs-open{display:flex}
#rs-modal{background:var(--background);color:var(--foreground);border:1px solid var(--border);border-radius:8px;width:min(660px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;padding:26px;position:relative;overscroll-behavior:contain}
#rs-modal h2{margin:0 48px 4px 0;font-size:1.6rem}
#rs-modal .rs-sub{margin:0 0 16px;font-size:.88rem;color:var(--muted-foreground)}
#rs-close{position:absolute;top:12px;right:12px;background:var(--background);border:1px solid var(--border);color:var(--foreground);width:40px;height:40px;border-radius:50%;font-size:1.4rem;cursor:pointer}
#reservationWidget{display:block;width:100%;height:530px;border:0;background:var(--background)}
#rs-status{font-size:.9rem;line-height:1.5;margin:16px 0;color:var(--muted-foreground)}
.rs-hint{font-size:.78rem;color:var(--muted-foreground);line-height:1.5;margin:16px 0}
.rs-hint a{text-decoration:underline;text-underline-offset:3px}
.rs-btn{display:block;text-align:center;border:1px solid var(--border);border-radius:999px;padding:12px 16px;color:var(--foreground);text-decoration:none;font-size:.9rem}
.rs-btn:hover{background:var(--primary);color:var(--primary-foreground)}
body.rs-lock{overflow:hidden}
/* Handy- und Tablet-Ansicht: die untere Leiste mit „Reservieren“ ersetzt den schwebenden Knopf. */
@media(max-width:767px){#rs-fab{display:none}}
@media(max-width:560px){#rs-overlay{padding:0;align-items:flex-end}#rs-modal{border-radius:8px 8px 0 0;max-height:94dvh;padding:22px 12px calc(22px + env(safe-area-inset-bottom))}}

/* ===== Mobile Feinschliff: nichts bleibt hinter der unteren Leiste versteckt ===== */
@media(max-width:767px){
  /* Unterste Leiste: kompakter und frei vom Home-Indikator des Telefons. */
  .fixed.inset-x-0.bottom-0{padding-bottom:env(safe-area-inset-bottom)}
  .fixed.inset-x-0.bottom-0>a{padding-top:.6rem;padding-bottom:.6rem}
  /* Erster Bildschirm: Text und Knöpfe rücken über die untere Leiste. */
  #start .mx-auto{padding-top:1.1rem}
  #start .mx-auto p.mt-5{margin-top:.7rem}
  #start .mx-auto .mt-9{margin-top:1rem}
}
@media(max-width:767px) and (max-height:600px){
  #start .mx-auto .eyebrow{display:none}
}

/* Auf dem Handy rückt die untere Leiste erst ins Bild, wenn man ein Stück
   gescrollt hat – so bleibt oben nichts hinter ihr verborgen. */
@media(max-width:767px){
  .fixed.inset-x-0.bottom-0{transition:transform .25s ease}
  .fixed.inset-x-0.bottom-0.rs-bar-hidden{transform:translateY(115%)}
  /* Im Reservierungsfenster: die Zeile unter der Überschrift spart Platz. */
  #rs-modal .rs-sub{display:none}
  #rs-modal{padding-left:16px;padding-right:16px}
  .rs-hint{margin:12px 0}
}

/* Sehr schmale Telefonscheiben: dem Formular so viel Breite wie möglich geben. */
@media(max-width:560px){
  #rs-modal{padding-left:8px;padding-right:8px}
  .rs-btn{padding:10px 14px}
  .rs-hint{margin:10px 0;font-size:.74rem}
}