/* ============================================================
   Clubraum buchen – WSC-Design
   Angelehnt an die Vereins-Website (nexius.de/wsc_v1):
   Open Sans, Blau #01448F / #00017F / #0E416A,
   helles Band #F0FAFF, Header #F7F7FC, scharfe 4px-Rahmen.
   Semantische Kalenderfarben (grün/gelb/rot) bleiben erhalten.
   ============================================================ */

/* Hinweis 2026-10-02: @font-face Bloecke entfernt - die selbst gehosteten
   Open-Sans-WOFFs enthielten leere Glyphen fuer Euro (U+20AC) und a-grave
   (U+00E0), dadurch war das EUR-Zeichen unsichtbar. Es greifen jetzt die
   Systemschriften aus dem font-family-Stack (Segoe UI/Roboto/Arial).
   Hinweis 2026-10-04: Open Sans + Dancing Script kommen ueber Google Fonts
   (siehe <link> in index.html, korrektes Euro-Zeichen), der Stack unten
   bleibt als Fallback. */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.killswitch-banner {
  background: #7f1d1d;
  color: #fff;
  text-align: center;
  padding: 0.9rem 1rem;
  font-size: 0.95rem;
}

.hidden {
  display: none !important;
}

body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  background: #f0faff;
  color: #000000;
  min-height: 100vh;
  line-height: 1.6;
}

/* ---------- Header (sticky wie die Vereinsseite) ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  text-align: center;
  padding: 1.1rem 1rem 1rem;
  background: #f7f7fc;
  border-bottom: 5px solid #00017f;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
}

header .brand {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0e416a;
}

header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #01448f;
  margin: 0.1rem 0 0.25rem;
}

.header-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.25rem 1.5rem;
}

header .tagline {
  font-size: 0.95rem;
  color: #444444;
}

.price-hint {
  font-size: 0.95rem;
  color: #0e416a;
}

.price-hint strong {
  color: #01448f;
  font-weight: 700;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.75rem 1rem;
}

/* ---------- Intro-Kästen ---------- */
.intro-card {
  background: #ffffff;
  border: 4px solid #01448f;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  color: #000000;
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.15);
}

.intro-card p + p {
  margin-top: 0.5rem;
}

.intro-card strong {
  font-weight: 700;
}

/* ---------- Legende ---------- */
.legend {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  color: #0e416a;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.dot-free { background: #2fa661; }
.dot-reserved { background: #f4c902; border: 1px solid #c9a400; }
.dot-booked { background: #e4576d; }
.dot-past { background: #94a3b8; }

/* ---------- Kalender ---------- */
.calendar-container {
  background: #ffffff;
  padding: 1.25rem;
  border: 4px solid #01448f;
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.15);
}

.calendar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.calendar-nav h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #01448f;
}

.calendar-nav button {
  background: #f0faff;
  border: 2px solid #01448f;
  color: #01448f;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
}

.calendar-nav button:hover {
  background: #01448f;
  color: #ffffff;
}

.calendar-grid {
  display: grid;
  /* minmax(0,1fr) statt 1fr: sonst erzwingen die quadratischen Tageskacheln
     eine Mindestbreite und das Raster laeuft aus seinem Block heraus. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

/* ---------- Kalender: Quartalsansicht ----------
   Die Seite ist 960 px breit, dadurch stehen die drei Monate eines Quartals
   nebeneinander. Unter 800 px Viewportbreite waeren die Tageskacheln nur
   noch rund 24 px breit, dann stapeln sie sich wieder. */
.calendar-months {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

/* Unter 800pxViewportbreite waeren die Tageskacheln nur noch ~24px breit -
   dann stehen die drei Monate wieder untereinander. */
@media (max-width: 800px) {
  .calendar-months {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cal-month {
  min-width: 0;
}

.cal-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #01448f;
  text-align: center;
}

.cal-dow .weekday-header {
  padding: 0.25rem 0;
  font-size: 0.7rem;
}

.weekday-header {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #01448f;
  padding: 0.4rem 0;
  text-transform: uppercase;
}

.calendar-days .day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: default;
  transition: all 0.2s;
  position: relative;
}

.day.empty {
  background: transparent;
}

.day.past {
  color: #94a3b8;
  background: #e3edf5;
  border: 2px solid #e3edf5;
}

.day.free {
  color: #fff;
  background: #2fa661;
  cursor: pointer;
  border: 2px solid #2fa661;
  font-weight: 700;
}

.day.free:hover {
  background: #24924f;
  border-color: #1b7a44;
}

.day.booked {
  color: #fff;
  background: #e4576d;
  cursor: not-allowed;
  border: 2px solid #e4576d;
  font-weight: 700;
}

.day.booked.waitlistable,
.day.reserved.waitlistable {
  cursor: pointer;
}

.day.booked.waitlistable:hover,
.day.reserved.waitlistable:hover {
  transform: scale(1.06);
  box-shadow: 0 0 0 3px rgba(228, 87, 109, 0.35);
  z-index: 2;
}

.day.booked.waitlistable::after,
.day.reserved.waitlistable::after {
  content: "Warte­liste?";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #0e416a;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 400;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.day.booked.waitlistable:hover::after,
.day.reserved.waitlistable:hover::after {
  opacity: 1;
}

.day.reserved {
  color: #402f00;
  background: #f4c902;
  cursor: not-allowed;
  border: 2px solid #f4c902;
  font-weight: 700;
}

.day.reserved:hover {
  background: #e0b800;
}

.day.today {
  outline: 2px solid #01448f;
  outline-offset: -2px;
}

.wl-count {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 24px;
  height: 24px;
  line-height: 20px;
  padding: 0 5px;
  background: #f4c902;
  color: #401f00;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
}

.day.selected {
  color: white;
  background: #e4576d;
  border: 2px solid #c73e53;
  border-radius: 6px;
  font-weight: 700;
}

.day.in-range {
  color: #fff;
  background: #e4576d;
  border: 2px solid #e4576d;
  border-radius: 0;
  font-weight: 700;
}

/* ---------- Buchungsformular ---------- */
.booking-section {
  background: #ffffff;
  padding: 1.5rem;
  margin-top: 1.25rem;
  border: 4px solid #01448f;
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.15);
}

.booking-section h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #01448f;
  margin-bottom: 1rem;
}

.booking-section h2 span {
  color: #0e416a;
}

/* ---------- Preis-Anzeige ---------- */
.price-summary {
  background: #f0faff;
  border: 1px solid #01448f;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
}

.payment-modalities {
  background: #f0faff;
  border: 1px solid #01448f;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
}

/* Mehr als 1 Tag: nur Telefon-Hinweis */
.multi-day-notice {
  background: #f0faff;
  border: 1px solid #01448f;
  border-left: 4px solid #01448f;
  padding: 0.9rem 1rem;
  font-size: 0.95rem;
  color: #0e416a;
  margin-bottom: 1.25rem;
}

.multi-day-notice .phone-number {
  font-weight: 700;
  color: #01448f;
}

.booking-section.nur-telefon .time-row,
.booking-section.nur-telefon .price-summary,
.booking-section.nur-telefon .payment-modalities,
.booking-section.nur-telefon #bookingForm {
  display: none;
}

.payment-modalities h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #01448f;
  margin-bottom: 0.5rem;
}

.payment-modalities .payment-note {
  margin-top: 0;
}

.payment-modalities .payment-list {
  margin: 0;
  padding-left: 1.15rem;
}

.payment-modalities .payment-list li {
  font-size: 0.85rem;
  color: #0e416a;
  margin-bottom: 0.4rem;
}

.payment-modalities .payment-list li:last-child {
  margin-bottom: 0;
}

.payment-modalities .payment-list li::marker {
  color: #01448f;
}

.payment-modalities .payment-closing {
  font-size: 0.85rem;
  color: #0e416a;
  margin-top: 0.55rem;
}

.price-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  color: #000000;
  font-weight: 400;
}

.price-line > span:last-child {
  font-size: 1.05rem;
  font-weight: 700;
}

.price-line .price-days-amount {
  color: #01448f;
}

.price-deposit {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #01448f;
  color: #01448f;
}

.price-deposit span:last-child {
  color: #01448f;
}

.price-sub {
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: #444444;
}

.price-sub span:last-child {
  font-size: 0.9rem;
  color: #444444;
}

.price-total {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 2px solid #01448f;
  font-size: 1.05rem;
}

.price-total span:last-child {
  font-size: 1.35rem;
  color: #01448f;
}

/* Zwei Preiszeilen: Raumkosten/Nebenkosten */
.price-room-optional {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: #444444;
}

.price-room {
  display: flex;
  justify-content: space-between;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: #444444;
  padding-top: 0.35rem;
  border-top: 1px dashed #a9c6e3;
}

.price-room > span:last-child {
  font-weight: 700;
  color: #01448f;
}

.price-room .roomLineLabel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.price-room .roomLineLabel input {
  cursor: pointer;
}

.field-hint {
  font-size: 0.8rem;
  color: #444444;
  margin-bottom: 0.5rem;
}

/* Gästezimmer-Auswahl */
.booking-rooms {
  margin-bottom: 1.2rem;
}

.room-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.room-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  border: 1px solid #a9c6e3;
  border-radius: 4px;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.room-option:hover {
  border-color: #01448f;
}

.room-option:has(input:checked) {
  border-color: #01448f;
  background: #f0faff;
}

.room-option .room-price {
  font-size: 0.78rem;
  color: #01448f;
  font-weight: 700;
}

/* Zahlungsart-Auswahl */
.payment-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  border: 1px solid #a9c6e3;
  border-radius: 4px;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.payment-option:hover {
  border-color: #01448f;
}

.payment-option:has(input:checked) {
  border-color: #01448f;
  background: #f0faff;
}

.payment-note {
  font-size: 0.82rem;
  color: #0e416a;
  background: #ffffff;
  border: 1px solid #a9c6e3;
  border-left: 4px solid #01448f;
  padding: 0.5rem 0.75rem;
  margin-top: 0.6rem;
}

.payment-note strong {
  font-weight: 700;
}

.payment-instructions {
  background: #ffffff;
  border: 1px solid #01448f;
  border-left: 4px solid #01448f;
  padding: 0.9rem 1rem;
  font-size: 0.92rem;
  color: #000000;
  white-space: pre-line;
  text-align: left;
  margin-top: 0.5rem;
}

.price-per-under {
  display: block;
  font-size: 0.8rem;
  color: #444444;
  font-weight: 400;
  margin-top: 0.25rem;
}

.form-group {
  margin-bottom: 1rem;
}

.booking-address {
  display: flex;
  gap: 1rem;
}

.booking-address .form-group {
  flex: 1;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  color: #0e416a;
  margin-bottom: 0.3rem;
  font-weight: 700;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: #ffffff;
  border: 1px solid #a9c6e3;
  border-radius: 4px;
  color: #000000;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:disabled {
  background: #f0faff;
  color: #444444;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #01448f;
  box-shadow: 0 0 0 3px rgba(1, 68, 143, 0.15);
  background: #fff;
}

.btn {
  padding: 0.65rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  margin-right: 0.5rem;
}

.btn-primary {
  background: #01448f;
  color: white;
}

.btn-primary:hover {
  background: #0e416a;
}

.btn-secondary {
  background: #ffffff;
  border-color: #01448f;
  color: #01448f;
}

.btn-secondary:hover {
  background: #f0faff;
}

.btn:focus-visible,
.calendar-nav button:focus-visible {
  outline: 2px solid #00017f;
  outline-offset: 2px;
}

/* Rückwärts-Button am laufenden Quartal: nicht anklickbar */
.calendar-nav button:disabled {
  opacity: 0.4;
  cursor: default;
}

.calendar-nav button:disabled:hover {
  background: #f0faff;
  color: #01448f;
}

/* ---------- Bestätigung ---------- */
.confirmation {
  text-align: center;
  background: #ffffff;
  padding: 2rem 1.5rem;
  margin-top: 1.25rem;
  border: 4px solid #01448f;
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.15);
}

.confirmation-icon {
  width: 60px;
  height: 60px;
  background: #1f9d55;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 1rem;
}

.confirmation h2 {
  color: #01448f;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.confirmation p {
  color: #333333;
  margin-bottom: 1.25rem;
}

/* ---------- Fehler / Erfolg ---------- */
.error-message {
  background: #fce9e6;
  border: 1px solid #e4576d;
  padding: 1rem;
  margin-top: 1rem;
  color: #b23b4b;
  text-align: center;
}

.success-message {
  background: #d9f2dd;
  border: 1px solid #27ae60;
  padding: 1rem;
  margin-top: 1rem;
  color: #1e7e3f;
  text-align: center;
}

/* ---------- Hero (Vereinsseite: Foto + Claim) ---------- */
.hero {
  background: #0e416a url("/img/hero-saale.webp") center center / cover no-repeat;
  min-height: 300px;
  display: flex;
  align-items: center;
  padding: 3rem 1rem;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 65, 106, 0.62) 0%, rgba(14, 65, 106, 0.28) 55%, rgba(14, 65, 106, 0.08) 100%);
}

.hero-claim {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  color: #ffffff;
}

.hero-script {
  font-family: 'Dancing Script', cursive;
  font-size: 1.7rem;
  color: #ffffff;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

.hero-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.056em;
  color: #ffffff;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
  margin-top: 0.2rem;
}

.hero-sub {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 0.5rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* ---------- Wellen-Trennlinie (Vereinsblau) ---------- */
.wave-divider {
  line-height: 0;
  background: #f0faff;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: 28px;
}

.wave-divider path {
  fill: #01448f;
}

/* ---------- Footer ---------- */
footer {
  background: #0e416a;
  border-top: 2px solid #00017f;
  color: #ffffff;
  text-align: center;
  padding: 1.75rem 1rem;
  font-size: 0.875rem;
}

footer .footer-club {
  font-size: 1rem;
  font-weight: 700;
}

footer .footer-tag {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.15rem;
}

footer .footer-copy {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  margin-top: 0.6rem;
}

.footer-inner {
  max-width: 960px;
  margin: 0 auto 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
}

.footer-brand {
  flex: 1 1 260px;
}

.footer-anchor {
  color: #ffffff;
}

.footer-nav {
  flex: 1 1 260px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 1.5rem;
}

.footer-nav a {
  color: #ffffff;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-nav a:hover {
  color: #cfe6f8;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .hero {
    background-image: url("/img/hero-saale-mobil.webp");
    min-height: 190px;
    padding: 1.75rem 1rem;
  }

  .hero-script { font-size: 1.35rem; }
  .hero-title { font-size: 1.15rem; }
  .hero-sub { font-size: 0.85rem; }

  .footer-inner { flex-direction: column; text-align: center; }
  .footer-nav { width: 100%; }

  header {
    position: static;
    padding: 1.5rem 1rem 1.25rem;
  }

  header h1 { font-size: 1.5rem; }
  .header-meta { flex-direction: column; gap: 0.2rem; }
  main { padding: 1.25rem 0.85rem; }

  .legend {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.8rem;
  }

  .calendar-container { padding: 0.85rem; }
  .calendar-nav button { width: 40px; height: 40px; }

  .booking-section { padding: 1.15rem; }
  .price-line { font-size: 0.9rem; }
  .price-total span:last-child { font-size: 1.2rem; }

  .booking-address { flex-direction: column; gap: 0; }

  .room-option,
  .payment-option { flex: 1 1 100%; }

  .booking-section .btn {
    width: 100%;
    margin-right: 0;
    margin-bottom: 0.6rem;
  }
}

@media (max-width: 400px) {
  .calendar-days .day { font-size: 0.8rem; }
  .price-summary { padding: 0.7rem 0.75rem; }
}