/* Sichtbare Monatsgliederung auf allen Geräten */
.event-month {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .25rem 1rem;
  margin: 1.25rem 0 .1rem;
  padding: 0 0 .62rem;
  border-bottom: 1px solid rgba(116, 21, 29, .18);
}

.event-month:first-child { margin-top: 0; }
.event-month > span {
  grid-column: 1;
  color: var(--gold);
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.event-month > strong {
  grid-column: 1;
  color: var(--wine-deep);
  font: 700 1.38rem/1 var(--display);
  text-transform: capitalize;
}
.event-month > small {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  color: var(--muted);
  font-size: .57rem;
  font-weight: 800;
}

.event-meta time,
.event-meta span { display: block; }
.event-meta span { margin-top: .12rem; }
.event-select-hint { display: none; }

@media (min-width: 900px) {
  html { background: #160203; }

  body:not(.is-embedded) {
    position: relative;
    min-height: 100vh;
    background: #160203;
  }

  body:not(.is-embedded)::before {
    position: fixed;
    z-index: 0;
    inset: 78px 0 0;
    background:
      linear-gradient(180deg, rgba(20, 1, 2, .08), rgba(20, 1, 2, .52)),
      url("./assets/stage-backdrop-desktop-v1.webp") center top / cover no-repeat;
    content: "";
    pointer-events: none;
  }

  body:not(.is-embedded)::after {
    position: fixed;
    z-index: 0;
    inset: 78px 0 0;
    background: radial-gradient(ellipse at 50% 18%, transparent 0 42%, rgba(10, 0, 1, .25) 82%, rgba(10, 0, 1, .5));
    content: "";
    pointer-events: none;
  }

  .site-header {
    min-height: 78px;
    padding: .72rem max(2.5rem, calc((100vw - 1600px) / 2));
    border-bottom-color: rgba(228, 190, 112, .42);
    background: linear-gradient(180deg, rgba(28, 2, 3, .98), rgba(69, 7, 11, .96));
  }

  .brand { gap: .8rem; }
  .brand-logo { width: 50px; height: 50px; flex-basis: 50px; }
  .brand strong { font-size: 1.02rem; }
  .brand small { font-size: .61rem; letter-spacing: .13em; }
  .phone-link {
    width: 48px;
    height: 48px;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
  }
  .phone-link:hover {
    transform: translateY(-2px);
    border-color: #e4be70;
    background: rgba(228, 190, 112, .1);
  }

  .reservation-shell {
    position: relative;
    z-index: 1;
    display: block;
    width: min(1600px, calc(100% - 5rem));
    padding: 3.2rem 0 6rem;
  }

  .reservation-stage {
    overflow: hidden;
    border: 1px solid rgba(228, 190, 112, .58);
    border-radius: 4px;
    background: rgba(255, 253, 248, .985);
    box-shadow: 0 36px 90px rgba(5, 0, 1, .58), 0 0 0 8px rgba(63, 6, 9, .22);
  }

  .stage-header {
    min-height: 146px;
    padding: 1.8rem 3rem 1.65rem;
    background:
      radial-gradient(ellipse at 72% 135%, rgba(228, 190, 112, .2), transparent 44%),
      linear-gradient(110deg, #260405 0%, #56080d 58%, #8c1820 100%);
  }

  .stage-header::before {
    background:
      linear-gradient(115deg, transparent 0 38%, rgba(228, 190, 112, .08) 49%, transparent 61%),
      repeating-linear-gradient(90deg, transparent 0 88px, rgba(255, 255, 255, .018) 89px 90px);
  }

  .stage-header p { font-size: .7rem; letter-spacing: .19em; }
  .stage-header h1 {
    max-width: 980px;
    margin-top: .42rem;
    font-family: "Iowan Old Style", Baskerville, Georgia, "Times New Roman", serif;
    font-size: clamp(2.75rem, 3vw, 3rem);
    line-height: 1;
    letter-spacing: -.025em;
  }
  .stage-header > span {
    top: 1.8rem;
    right: 3rem;
    bottom: auto;
    padding: .55rem .72rem;
    border: 1px solid rgba(228, 190, 112, .34);
    border-radius: 999px;
    color: #f0d899;
    background: rgba(22, 1, 2, .2);
    font-size: .66rem;
    letter-spacing: .06em;
  }

  .progress { height: 5px; }
  .step { padding: 2.6rem 3rem 3rem; }
  .step-copy { max-width: 900px; margin-bottom: 2rem; }
  .step-copy p { font-size: .66rem; letter-spacing: .18em; }
  .step-copy h2 {
    margin-top: .42rem;
    font-family: "Iowan Old Style", Baskerville, Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 2.25vw, 2.25rem);
    line-height: 1.08;
    letter-spacing: -.025em;
  }
  .step-copy > span { margin-top: .65rem; font-size: .92rem; }

  .event-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
  }

  .event-month {
    position: relative;
    margin: 2.2rem 0 .15rem;
    padding: 0 0 .9rem 1.05rem;
    border-bottom-color: rgba(116, 21, 29, .22);
  }
  .event-month:first-child { margin-top: 0; }
  .event-month::before {
    position: absolute;
    top: .1rem;
    bottom: .9rem;
    left: 0;
    width: 4px;
    background: linear-gradient(180deg, #e4be70, #a8671f);
    content: "";
  }
  .event-month > span { font-size: .62rem; }
  .event-month > strong {
    font-family: "Iowan Old Style", Baskerville, Georgia, "Times New Roman", serif;
    font-size: 1.8rem;
    letter-spacing: -.025em;
  }
  .event-month > small { padding-bottom: .18rem; font-size: .72rem; }

  .event-option {
    grid-template-columns: 180px minmax(0, 1fr);
    min-height: 250px;
    border-radius: 3px;
    box-shadow: 0 12px 28px rgba(38, 4, 5, .08);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  }
  .event-option:hover {
    transform: translateY(-5px);
    border-color: rgba(189, 126, 43, .85);
    box-shadow: 0 20px 38px rgba(38, 4, 5, .17);
  }
  .event-option:focus-visible {
    outline: 3px solid #e4be70;
    outline-offset: 3px;
  }
  .event-option.is-selected {
    border: 2px solid var(--gold);
    box-shadow: 0 20px 42px rgba(38, 4, 5, .19), inset 0 0 0 2px rgba(255, 250, 240, .95);
  }
  .event-option img,
  .event-poster-placeholder { width: 180px; }
  .event-copy { padding: 1.35rem 1.45rem 1.15rem; }
  .event-copy > span:first-child { font-size: .61rem; letter-spacing: .14em; }
  .event-copy strong {
    margin-top: .46rem;
    font-family: "Iowan Old Style", Baskerville, Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
    line-height: 1.06;
    letter-spacing: -.02em;
  }
  .event-copy small { margin-top: .62rem; font-size: .8rem; line-height: 1.5; }
  .event-meta time { color: #4d3f42; font-weight: 800; }
  .event-meta span { color: var(--muted); }
  .event-copy > b { padding-top: .8rem; font-size: .76rem; }
  .event-select-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    margin-top: .75rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(116, 21, 29, .12);
    color: var(--wine);
    font-size: .68rem;
    font-weight: 900;
  }
  .event-select-hint i {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border: 1px solid rgba(116, 21, 29, .22);
    border-radius: 50%;
    font-size: .8rem;
    font-style: normal;
    transition: transform .18s ease, color .18s ease, background .18s ease;
  }
  .event-option:hover .event-select-hint i,
  .event-option.is-selected .event-select-hint i {
    transform: translateX(2px);
    color: #fff;
    background: var(--wine);
  }
  .availability { left: .65rem; bottom: .65rem; font-size: .58rem; }

  .selected-event { grid-template-columns: 86px minmax(0, 1fr); gap: 1rem; padding: 1rem; }
  .selected-event img,
  .selected-event > span { width: 86px; height: 112px; }
  .selected-event strong { font-size: 1.3rem; }
  .selected-event small { font-size: .76rem; }
  .quantity { margin: 1.6rem 0; }
  .quantity strong { font-size: .92rem; }
  .quantity small { font-size: .72rem; }
  .stepper { grid-template-columns: 48px 58px 48px; }
  .stepper button { height: 48px; }
  .delivery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
  .delivery legend { grid-column: 1 / -1; font-size: .65rem; }
  .delivery label { min-height: 92px; padding: 1rem; }
  .delivery b { font-size: .88rem; }
  .delivery small,
  .delivery i { font-size: .68rem; }
  .address,
  .contact-fields { gap: 1rem; margin-top: 1.25rem; }
  label > span { font-size: .67rem; }
  .address input,
  .contact-fields input,
  .contact-fields textarea { min-height: 54px; padding: .85rem .9rem; }
  .contact-fields textarea { min-height: 110px; }
  .consent { padding: 1rem; }
  .consent span { font-size: .72rem; }
  .review-row { grid-template-columns: 150px 1fr; padding: 1rem 0; }
  .review-row span { font-size: .65rem; }
  .review-row strong { font-size: .82rem; }
  .payment-note,
  .withdrawal-notice { padding: 1rem 1.1rem; }
  .payment-note strong,
  .withdrawal-notice strong { font-size: .8rem; }
  .payment-note span,
  .withdrawal-notice span { font-size: .7rem; }

  .form-status { padding: 0 3rem; font-size: .75rem; }
  .form-actions {
    position: fixed;
    z-index: 45;
    right: auto;
    bottom: 0;
    left: 50%;
    width: min(1600px, calc(100% - 5rem));
    padding: 1.2rem 3rem;
    transform: translateX(-50%);
    border: 1px solid rgba(116,21,29,.18);
    border-bottom: 0;
    background: rgba(255,250,240,.97);
    box-shadow: 0 -14px 36px rgba(34,4,9,.16);
    backdrop-filter: blur(16px);
  }
  .form-actions button { min-height: 54px; padding: .85rem 1.5rem; }
  .form-actions button:last-child { min-width: 210px; }
  body.has-form-actions .reservation-shell { padding-bottom: 10rem; }

  /* Der Hörer im Header ist auf Desktop die eindeutige Kontaktaktion. */
  .service-note { display: none; }

  body.is-success-page:not(.is-embedded) .reservation-shell {
    display: block;
    width: min(1160px, calc(100% - 4rem));
    padding: 3.2rem 0 6rem;
  }
  body.is-success-page:not(.is-embedded) .reservation-stage {
    border: 1px solid rgba(228, 190, 112, .58);
    box-shadow: 0 36px 90px rgba(5, 0, 1, .58), 0 0 0 8px rgba(63, 6, 9, .22);
  }
}

@media (min-width: 900px) and (max-width: 1230px) {
  .reservation-shell {
    width: min(1120px, calc(100% - 2.5rem));
  }
  .event-list { grid-template-columns: 1fr; }
  .event-option {
    grid-template-columns: 170px minmax(0, 1fr);
    min-height: 238px;
  }
  .event-option img,
  .event-poster-placeholder { width: 170px; }
  .stage-header,
  .step,
  .form-actions { padding-inline: 2.2rem; }
  .form-actions { width: min(1120px, calc(100% - 2.5rem)); }
  .stage-header > span { right: 2.2rem; }
  .form-status { padding-inline: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .event-option,
  .phone-link,
  .event-select-hint i { transition: none; }
}