/* ==========================================================================
   reservieren.css: Seitenstil Reservieren (T-D). Selektoren unter .p-reservieren.
   Zonen: res-a (Garage, Fakten) | res-b (Kalender) | res-c (Formular).
   <900 gestapelt, 900-1359 res-a, res-b und res-c je volle Breite untereinander
   (zwei Monate nebeneinander, Formular zweispaltig),
   ab 1360 links res-a über res-b, rechts das Formular.
   Haltepunkte: 600, 900, 1360.
   ========================================================================== */

.p-reservieren .res {
  align-items: start;
  padding-block: var(--s-6) var(--section);
}

/* Zone A: Garage und Fakten ------------------------------------------------ */
.p-reservieren .res-a {
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

.p-reservieren .res-intro { color: var(--text); max-width: 52ch; }

.p-reservieren .res-photo { display: flex; flex-direction: column; gap: var(--s-2); }

.p-reservieren .res-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 30% 50%;
}

.p-reservieren .res-photo figcaption { color: var(--muted); font-size: var(--step--1); font-weight: 500; }

.p-reservieren .res-facts { display: grid; border-bottom: 1px solid var(--line); }

.p-reservieren .res-facts > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-top: 1px solid var(--line);
}

.p-reservieren .res-facts dt {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-top: .2em;
}

.p-reservieren .res-facts dd { margin: 0; }

.p-reservieren .res-more a { display: inline-block; padding-block: .6rem; }

/* Zone B: Kalender --------------------------------------------------------- */
.p-reservieren .cal { display: grid; gap: var(--s-4); }

.p-reservieren .cal-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 500;
}

.p-reservieren .cal-legend li { display: flex; align-items: center; gap: var(--s-2); }

.p-reservieren .cal-key {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: var(--radius);
  border: 1px solid transparent;
}

/* Farbfelder wie im Kalender: frei hell mit Rahmen, belegt weinrot, geschlossen dunkel */
.p-reservieren .cal-key.is-frei { background: var(--bg-3); border-color: var(--muted); }
.p-reservieren .cal-key.is-belegt { background: rgb(163 24 47 / .35); border-color: rgb(163 24 47 / .8); }
.p-reservieren .cal-key.is-zu { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .08); }

.p-reservieren .cal-warn {
  padding: var(--s-3) var(--s-4);
  background: var(--bg-2);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 500;
}

.p-reservieren .cal-months {
  display: grid;
  gap: var(--s-5);
  width: 100%;
  max-width: calc(7 * 54px);
  margin-inline: auto;
  align-content: start;
}

/* Ganz geschlossene Wochen vorn und hinten (kein Öffnungsabend) kosten mobil nur Scrollstrecke: bis 899px ausgeblendet, die Tabelle bleibt gültig */
@media (max-width: 899.98px) {
  .p-reservieren .cal-month tr.is-leer { display: none; }
}

.p-reservieren .cal-month {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 2px;
}

.p-reservieren .cal-month caption {
  caption-side: top;
  text-align: left;
  padding: 0 2px var(--s-2);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.25;
}

.p-reservieren .cal-month th {
  padding: 0 0 var(--s-1);
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 600;
  text-align: center;
}

.p-reservieren .cal-month td { padding: 0; }

.p-reservieren .cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 52px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--dim);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.p-reservieren .cal-day.is-frei {
  background: var(--bg-3);
  color: var(--text);
  border-color: var(--muted);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.p-reservieren .cal-day.is-frei:hover { border-color: var(--gold); }

.p-reservieren .cal-day.is-frei[aria-pressed="true"],
.p-reservieren .cal-day.is-gewaehlt {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* gewählter Abend leuchtet auf wie eine Birne, mit kurzem Funkeln (nur transform und opacity) */
.p-reservieren .cal-day.is-frei { position: relative; }
.p-reservieren .cal-day.is-frei::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  box-shadow: 0 0 14px 3px rgb(232 190 110 / .55);
  opacity: 0;
  pointer-events: none;
}
.p-reservieren .cal-day.is-frei[aria-pressed="true"]::after { opacity: 1; }
.p-reservieren .cal-day.is-frei::before {
  content: "\2726";
  position: absolute;
  top: -.55em;
  right: -.35em;
  color: #f6d98f;
  font-size: .85em;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .p-reservieren .cal-day.is-frei[aria-pressed="true"]::after { animation: birne-an .6s ease-out; }
  .p-reservieren .cal-day.is-frei[aria-pressed="true"]::before { animation: funkel-stern .9s ease-out; }
}
@keyframes birne-an { 0% { opacity: 0; transform: scale(.85); } 45% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes funkel-stern { 0% { opacity: 0; transform: scale(.3) rotate(0deg); } 40% { opacity: 1; transform: scale(1.1) rotate(45deg); } 100% { opacity: 0; transform: scale(.6) rotate(90deg); } }

.p-reservieren .cal-day.is-belegt { text-decoration: line-through; background: rgb(163 24 47 / .35); border-color: rgb(163 24 47 / .8); color: var(--muted); }
.p-reservieren .cal-day.is-zu { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .08); }

.p-reservieren .cal-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-4);
  min-height: 48px;
  padding: var(--s-2) var(--s-4);
  background: var(--bg-3);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  font-weight: 600;
}

.p-reservieren .cal-choice a { display: inline-block; padding-block: .6rem; font-weight: 500; }

.p-reservieren .cal noscript p { color: var(--muted); }

/* Zone C: Formular --------------------------------------------------------- */
.p-reservieren .res-c { display: grid; gap: var(--s-5); align-content: start; }

.p-reservieren .res-c .form { max-width: 44rem; gap: var(--s-3); }

.p-reservieren .res-c textarea { min-height: 5.5rem; }

.p-reservieren .res-c .hint a,
.p-reservieren .res-c .check a { text-underline-offset: .15em; }

.p-reservieren .res-submit .btn { width: 100%; }

.p-reservieren .res-alt a { display: inline-block; padding-block: .6rem; }

.p-reservieren .form-status { display: grid; justify-items: start; gap: var(--s-3); }

/* Saison vorbei -------------------------------------------------------------- */
.p-reservieren .season-over {
  padding: var(--s-6);
  background: var(--bg-2);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  display: grid;
  gap: var(--s-3);
  align-content: start;
}

/* Kalender-Karte ab 600px; darunter ohne seitliche Polster, damit die Zellen >= 44px bleiben */
@media (min-width: 600px) {
  .p-reservieren .cal {
    padding: var(--s-5);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  .p-reservieren .res-a {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--gap);
  }

  .p-reservieren .res-a > * { grid-column: 2; }
  .p-reservieren .res-a > .res-photo { grid-column: 1; grid-row: 1 / span 4; align-self: stretch; }
  .p-reservieren .res-photo img { flex: 1 1 auto; min-height: 16rem; aspect-ratio: auto; }
}

/* 600-899: Monate links, Legende und Auswahl rechts */
@media (min-width: 600px) and (max-width: 899.98px) {
  .p-reservieren .cal {
    grid-template-columns: minmax(0, 378px) minmax(0, 1fr);
    align-items: start;
  }

  .p-reservieren .cal > h2,
  .p-reservieren .cal > .cal-warn,
  .p-reservieren .cal > noscript { grid-column: 1 / -1; }
  .p-reservieren .cal > .cal-months { grid-column: 1; grid-row: 3 / span 3; margin-inline: 0; }
  .p-reservieren .cal > .cal-legend { grid-column: 2; grid-row: 3; flex-direction: column; }
  .p-reservieren .cal > .cal-choice { grid-column: 2; grid-row: 4; align-self: start; }
}

/* ab 900: zwei Monate nebeneinander */
@media (min-width: 900px) {
  .p-reservieren .cal-months {
    grid-template-columns: repeat(2, minmax(0, 378px));
    column-gap: var(--s-6);
    max-width: none;
    justify-content: center;
    margin-inline: 0;
  }
}

/* 900-1359: alle Zonen volle Breite (Standard aus .grid12), Formular zweispaltig */
@media (min-width: 900px) and (max-width: 1359.98px) {
  .p-reservieren .res-c .form {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .p-reservieren .res-c .form > :not(.field),
  .p-reservieren .res-c .form > .field:has(textarea) { grid-column: 1 / -1; }
}

/* ab 1360: links Garage/Fakten (res-a) über dem Kalender (res-b), rechts das Formular über beide Zeilen.
   Der Kalender sitzt oben in der Karte und wächst nicht künstlich in die Höhe. */
@media (min-width: 1360px) {
  .p-reservieren .res-a { grid-column: 1 / 9; grid-row: 1; align-self: stretch; grid-template-rows: auto auto auto 1fr; }
  .p-reservieren .res-b { grid-column: 1 / 9; grid-row: 2; align-self: stretch; }
  .p-reservieren .res-c { grid-column: 9 / 13; grid-row: 1 / span 2; }
  .p-reservieren .res-intro { font-size: var(--step-1); line-height: 1.5; }
  .p-reservieren .res-facts > div { padding-block: var(--s-4); }
  .p-reservieren .cal { height: 100%; align-content: start; }
  .p-reservieren .season-over { grid-column: 1 / -1; grid-row: 2; }
}

/* Goldene Akzente im Kalender */
.p-reservieren .cal-day.is-frei:hover, .p-reservieren .cal-day.is-frei:focus-visible { box-shadow: 0 0 14px rgb(232 190 110 / .45); }
.p-reservieren .cal { box-shadow: inset 0 0 0 1px rgb(217 180 106 / .16); }

/* Große Schrift: Spalten dürfen schmaler werden als ihr Inhalt, Felder brechen nicht aus */
.p-reservieren .res-a, .p-reservieren .cal, .p-reservieren .res-c, .p-reservieren .form, .p-reservieren .form > * { min-width: 0; }
.p-reservieren .form input:not([type="checkbox"]), .p-reservieren .form select, .p-reservieren .form textarea { width: 100%; }

/* Garage-Fotos: zwei Bilder nebeneinander, ganz zu sehen (natürliches Format), mit Goldrand; Antippen öffnet groß */
.p-reservieren .res-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.p-reservieren .res-photos a { display: block; border-radius: var(--radius); box-shadow: 0 0 0 1px rgb(217 180 106 / .5), 0 0 18px rgb(232 190 110 / .15); }
.p-reservieren .res-photo .res-photos img { width: 100%; height: auto; min-height: 0; aspect-ratio: auto; object-fit: initial; border-radius: var(--radius); }
@media (min-width: 600px) {
  .p-reservieren .res-a { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .p-reservieren .res-a > .res-photo { align-self: start; }
}