/* =============================================================================
   reservieren.css — Hinweisfenster vor der Online-Reservierung (js/reservieren.js).
   Nur bestehende Tokens (--bg-elev, --pink-hot, --green, --cream, --ease-ui …).
   Hervorhebung über Pillen und Rundum-Rahmen, nie über Kantenstreifen.
   ============================================================================= */
html.res-offen{ overflow:hidden; }

.res-modal{                                   /* über Menü, Detail, Assistent, Pop-up (1210); unter dem Cookie-Hinweis (2000) */
  position:fixed; inset:0; z-index:1990;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity .28s var(--ease-ui), visibility .28s var(--ease-ui);
}
.res-modal[hidden]{ display:none; }
.res-modal.is-open{ opacity:1; visibility:visible; transition:opacity .28s var(--ease-ui), visibility 0s; }   /* sofort sichtbar → Fokus greift beim Öffnen */

.res-modal__dim{
  position:absolute; inset:0;
  background:rgba(4,6,14,.78);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  touch-action:none;
}

.res-modal__karte{
  position:relative; z-index:1;
  width:min(560px,100%);
  max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px);
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  background:var(--bg-elev);
  border:1px solid rgba(255,255,255,.1);
  border-radius:clamp(22px,3vw,30px);
  box-shadow:0 40px 110px -30px rgba(0,0,0,.85);
  padding:clamp(28px,4.5vw,44px) clamp(22px,4vw,40px) clamp(24px,4vw,36px);
  text-align:left;
  opacity:0; transform:translateY(22px) scale(.96);
  transition:opacity .3s var(--ease-ui), transform .45s var(--ease-ui);
}
.res-modal.is-open .res-modal__karte{ opacity:1; transform:none; }
.res-modal__karte:focus{ outline:none; }

.res-modal__x{
  position:absolute; top:14px; right:14px;
  width:42px; height:42px; display:grid; place-content:center;
  border:none; border-radius:var(--r-pill);
  background:rgba(255,255,255,.08); color:#fff; cursor:pointer;
  transition:background .3s var(--ease-ui), transform .3s var(--ease-ui);
}
.res-modal__x:hover{ background:rgba(255,255,255,.2); transform:rotate(90deg); }
.res-modal__x:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--pink-hot) 45%,transparent); }

.res-modal__eyebrow{ margin:0 52px 10px 0; }
.res-modal__titel{
  margin:0 40px 0 0;
  font-size:clamp(1.55rem, 3.6vw, 2.1rem); font-weight:900; line-height:1;
  letter-spacing:-.01em; text-transform:uppercase; color:#fff;
}
.res-modal__text{ margin:14px 0 0; font-size:1rem; line-height:1.55; color:var(--text-dim); }

.res-regeln{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px; }
.res-regel{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 12px 12px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
}
.res-regel__wann{ flex:1 1 auto; min-width:0; font-size:.97rem; font-weight:700; line-height:1.3; color:#fff; }
.res-regel__was{
  flex:none;
  padding:.5em .9em; border-radius:var(--r-pill);
  font-size:.82rem; font-weight:800; line-height:1; white-space:nowrap;
}
.res-regel--gut .res-regel__was{ background:color-mix(in srgb, var(--green) 20%, transparent); color:var(--green); }
.res-regel--mittel .res-regel__was{ background:color-mix(in srgb, var(--cream) 20%, transparent); color:var(--cream); }
.res-regel--nein .res-regel__was{ background:color-mix(in srgb, var(--pink-hot) 26%, transparent); color:var(--pink-soft); }

.res-modal__hinweis{ margin:14px 0 0; font-size:.9rem; line-height:1.55; color:var(--text-dim); }
.res-modal__hinweis a{ color:#fff; text-decoration:underline; text-underline-offset:2px; transition:color .3s var(--ease-ui); }
@media (hover:hover){ .res-modal__hinweis a:hover{ color:var(--pink-soft); } }

.res-check{
  display:flex; align-items:flex-start; gap:12px;
  margin:20px 0 0; padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  font-size:.95rem; line-height:1.5; color:#fff;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:border-color .3s var(--ease-ui), background .3s var(--ease-ui);
}
.res-check.is-an{ border-color:rgba(255,255,255,.26); background:rgba(255,255,255,.08); }
.res-check input{
  flex:none; width:22px; height:22px; margin:0;
  accent-color:var(--pink-hot); cursor:pointer;
}
.res-check input:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--pink-hot) 40%,transparent); border-radius:5px; }
.res-check.is-wackeln{ animation:res-wackeln .42s var(--ease-ui); }
@keyframes res-wackeln{
  0%,100%{ transform:none; }
  20%{ transform:translateX(-7px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(2px); }
}

.res-modal__fehler{ margin:10px 0 0; font-size:.88rem; font-weight:600; line-height:1.45; color:var(--pink-soft); }
.res-modal__fehler[hidden]{ display:none; }

.res-modal__knoepfe{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:22px; }
.res-modal__weiter{ border:1px solid transparent; }   /* gleiche Höhe wie der Abbrechen-Knopf mit Rand */
.res-modal__weiter[aria-disabled="true"]{ opacity:.42; filter:saturate(.55); cursor:not-allowed; }
.res-modal__weiter:focus-visible,
.res-modal__abbrechen:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--pink-hot) 45%,transparent); }
.res-modal__abbrechen{ cursor:pointer; font:inherit; font-size:1rem; font-weight:700; line-height:1; }

@media (max-width:520px){
  .res-modal{ padding:10px; align-items:flex-end; }
  .res-modal__karte{ max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); padding:22px 18px 18px; border-radius:24px; }
  .res-modal__x{ top:12px; right:12px; width:38px; height:38px; }
  .res-modal__eyebrow{ margin-bottom:8px; font-size:.78rem; }
  .res-modal__titel{ font-size:1.42rem; }
  .res-modal__text{ margin-top:10px; font-size:.93rem; line-height:1.5; }
  .res-regeln{ margin-top:14px; gap:6px; }
  .res-regel{ gap:10px; padding:10px 10px 10px 14px; border-radius:14px; }   /* Hinweis bleibt rechts, nur der Text bricht um */
  .res-regel__wann{ font-size:.9rem; }
  .res-regel__was{ padding:.45em .75em; font-size:.74rem; }
  .res-modal__hinweis{ margin-top:12px; font-size:.84rem; line-height:1.5; }
  .res-check{ margin-top:14px; padding:12px 14px; font-size:.9rem; line-height:1.45; }
  .res-modal__knoepfe{ flex-direction:column; align-items:stretch; gap:8px; margin-top:16px; }
  .res-modal__knoepfe .btn-pill{ justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .res-modal, .res-modal__karte, .res-check{ transition:none; }
  .res-modal__karte{ transform:none; }
  .res-check.is-wackeln{ animation:none; }
}