/* =========================================================================
   Buchungsstrecke Dworek Adamski

   Die Strecke bringt KEIN eigenes Aussehen mit, sondern übernimmt das der
   Website: Farben, Schriften, Abstände und Radien kommen aus denselben
   CSS-Variablen, die global.css der Astro-Seite setzt. Genau daran erkennt
   ein Gast, dass er die Seite nicht verlassen hat — und genau das ist der
   Unterschied zu einem eingebetteten Fremdwidget.

   Die `var(--x, fallback)`-Schreibweise sorgt dafür, dass dieselbe Datei auch
   eigenständig funktioniert (Rückfallebene auf dem Buchungsserver), wo es
   global.css nicht gibt. Wer die Farbwelt ändert, ändert sie in global.css —
   hier steht sie nur ein zweites Mal als Notnagel.
   ========================================================================= */

.wbe {
  --w-ink: var(--ink, #241c17);
  --w-ink-soft: var(--ink-soft, #5d5148);
  --w-ink-faint: var(--ink-faint, #8b7f74);
  --w-paper: var(--paper, #fbf8f3);
  --w-paper-2: var(--paper-2, #f4ede2);
  --w-paper-3: var(--paper-3, #ebe1d2);
  --w-white: var(--white, #ffffff);
  --w-wine: var(--wine, #6e2b26);
  --w-wine-dark: var(--wine-dark, #4d1c18);
  --w-wine-tint: var(--wine-tint, #f6ebe8);
  --w-brass: var(--brass, #b08a47);
  --w-moss: var(--moss, #4a5a44);
  --w-line: var(--line, rgba(36, 28, 23, 0.14));
  --w-line-strong: var(--line-strong, rgba(36, 28, 23, 0.26));
  --w-shadow-sm: var(--shadow-sm, 0 1px 2px rgba(36, 28, 23, 0.06), 0 2px 8px rgba(36, 28, 23, 0.05));
  --w-shadow-md: var(--shadow-md, 0 4px 16px rgba(36, 28, 23, 0.09), 0 12px 40px rgba(36, 28, 23, 0.07));
  --w-display: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  --w-sans: var(--font-sans, 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif);
  --w-radius: var(--radius, 2px);

  color: var(--w-ink);
  font-family: var(--w-sans);
  line-height: 1.7;
}

.wbe *, .wbe *::before, .wbe *::after { box-sizing: border-box; }
.wbe img { display: block; max-width: 100%; height: auto; }
.wbe ul, .wbe ol { margin: 0; padding: 0; list-style: none; }
.wbe :focus-visible { outline: 2px solid var(--w-wine); outline-offset: 2px; }

/* ------------------------------------------------------------- Typografie */

.wbe-titel {
  font-family: var(--w-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
}
.wbe-titel--klein { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }

.wbe-unter { color: var(--w-ink-soft); margin: 0 0 1.5rem; }

.wbe-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--w-ink-faint);
  margin-bottom: 0.35rem;
}

.wbe-hilfe { display: block; font-size: 0.82rem; color: var(--w-ink-faint); line-height: 1.55; margin-top: 0.4rem; }

/* --------------------------------------------------------------- Knöpfe */

.wbe-btn {
  --btn-bg: var(--w-wine);
  --btn-fg: var(--w-paper);
  --btn-bd: var(--w-wine);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--w-radius);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.wbe-btn:hover:not(:disabled) { --btn-bg: var(--w-wine-dark); --btn-bd: var(--w-wine-dark); transform: translateY(-1px); }
.wbe-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.wbe-btn--leise { --btn-bg: transparent; --btn-fg: var(--w-ink); --btn-bd: var(--w-line-strong); }
.wbe-btn--leise:hover:not(:disabled) { --btn-bg: var(--w-ink); --btn-fg: var(--w-paper); --btn-bd: var(--w-ink); }
.wbe-btn--gewaehlt { --btn-bg: var(--w-moss); --btn-bd: var(--w-moss); }
.wbe-btn--gross { padding: 1rem 2rem; font-size: 0.8rem; }
.wbe-btn--voll { width: 100%; margin-top: 1rem; }

/* -------------------------------------------------------------- Schritte */

.wbe-schritte {
  display: flex;
  gap: clamp(0.75rem, 3vw, 2rem);
  margin: 0 0 2rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--w-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.wbe-schritte::-webkit-scrollbar { display: none; }

.wbe-schritte__punkt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--w-ink-faint);
  font-size: 0.78rem;
  white-space: nowrap;
}
.wbe-schritte__zahl {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 600;
  flex: none;
}
.wbe-schritte__punkt.is-aktiv { color: var(--w-wine); font-weight: 600; }
.wbe-schritte__punkt.is-aktiv .wbe-schritte__zahl { background: var(--w-wine); color: var(--w-paper); border-color: var(--w-wine); }
.wbe-schritte__punkt.is-fertig { color: var(--w-moss); }
.wbe-schritte__punkt.is-fertig .wbe-schritte__zahl { background: var(--w-moss); color: var(--w-paper); border-color: var(--w-moss); }

/* ---------------------------------------------------------------- Layout */

.wbe-layout { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }

@media (min-width: 60rem) {
  .wbe-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
  .wbe-seite { position: sticky; top: calc(var(--header-h, 0px) + 1.5rem); }
}

/* ------------------------------------------------------------ Bewertung */

.wbe-bewertung {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 1.5rem;
  padding: 0.35rem 0.8rem;
  background: var(--w-paper-2);
  border-radius: var(--w-radius);
  font-size: 0.82rem;
}
.wbe-bewertung strong { font-size: 1.15rem; color: var(--w-wine); font-weight: 600; }
.wbe-bewertung__quelle { color: var(--w-ink-faint); margin-left: 0.3rem; }

/* ------------------------------------------------------------ Suchleiste */

.wbe-suchleiste {
  display: grid;
  gap: 1.25rem;
  padding: 1.25rem;
  background: var(--w-white);
  border: 1px solid var(--w-line);
  border-radius: var(--w-radius);
  box-shadow: var(--w-shadow-sm);
  margin-bottom: 1.25rem;
}
@media (min-width: 40rem) { .wbe-suchleiste { grid-template-columns: 1fr auto; align-items: center; } }

.wbe-suchleiste__wert { font-family: var(--w-display); font-size: 1.2rem; font-weight: 500; }

.wbe-gaeste { display: flex; gap: 1.25rem; flex-wrap: wrap; }

.wbe-zaehler { display: flex; align-items: center; gap: 0.6rem; }
.wbe-zaehler__name { font-size: 0.85rem; color: var(--w-ink-soft); }
.wbe-zaehler__knoepfe { display: flex; align-items: center; gap: 0.15rem; }
.wbe-zaehler__knopf {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--w-line-strong);
  border-radius: var(--w-radius);
  font: inherit; font-size: 1rem; line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.wbe-zaehler__knopf:hover:not(:disabled) { background: var(--w-ink); color: var(--w-paper); }
.wbe-zaehler__knopf:disabled { opacity: 0.3; cursor: not-allowed; }
.wbe-zaehler__wert { min-width: 1.8rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }

.wbe-kinderalter { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.wbe-feld--schmal { max-width: 10rem; }

/* -------------------------------------------------------------- Kalender */

.wbe-kal {
  background: var(--w-white);
  border: 1px solid var(--w-line);
  border-radius: var(--w-radius);
  padding: 1rem 1.25rem 1.25rem;
  margin-bottom: 2rem;
  position: relative;
}
.wbe-kal:focus-visible { outline-offset: 0; }

.wbe-kal__kopf { display: flex; justify-content: space-between; position: absolute; inset: 1rem 1.25rem auto; pointer-events: none; }
.wbe-kal__pfeil {
  pointer-events: auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--w-line);
  border-radius: var(--w-radius);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.wbe-kal__pfeil:hover:not(:disabled) { background: var(--w-paper-2); }
.wbe-kal__pfeil:disabled { opacity: 0.25; cursor: not-allowed; }

.wbe-kal__monate { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .wbe-kal__monate { grid-template-columns: 1fr 1fr; } }

.wbe-kal__titel {
  text-align: center;
  font-family: var(--w-display);
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 0.9rem;
  text-transform: capitalize;
}

.wbe-kal__wochentage, .wbe-kal__gitter { display: grid; grid-template-columns: repeat(7, 1fr); }
.wbe-kal__wochentage {
  gap: 0.15rem;
  margin-bottom: 0.35rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--w-ink-faint);
  text-align: center;
}
.wbe-kal__gitter { gap: 0.15rem; }

.wbe-kal__tag {
  position: relative;
  aspect-ratio: 1 / 0.92;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.15rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--w-radius);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.wbe-kal__tag:hover:not(:disabled) { background: var(--w-paper-2); }
.wbe-kal__zahl { font-size: 0.9rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.wbe-kal__preis { font-size: 0.62rem; color: var(--w-ink-faint); line-height: 1; letter-spacing: -0.02em; }

.wbe-kal__tag.is-gesperrt { color: var(--w-ink-faint); opacity: 0.38; cursor: not-allowed; text-decoration: line-through; }
.wbe-kal__tag.is-voll:not(.is-gesperrt) { color: var(--w-ink-faint); }
.wbe-kal__tag.is-bereich { background: var(--w-wine-tint); border-radius: 0; }
.wbe-kal__tag.is-vorschau { background: var(--w-paper-3); }
.wbe-kal__tag.is-anreise,
.wbe-kal__tag.is-abreise { background: var(--w-wine); color: var(--w-paper); }
.wbe-kal__tag.is-anreise .wbe-kal__preis,
.wbe-kal__tag.is-abreise .wbe-kal__preis { color: rgba(255, 255, 255, 0.75); }
.wbe-kal__tag.is-fokus { border-color: var(--w-line-strong); }
.wbe-kal__leer { aspect-ratio: 1 / 0.92; }

/* -------------------------------------------------------------- Ergebnisse */

.wbe-ergebnisse__zeile { font-size: 0.85rem; color: var(--w-ink-faint); margin: 0 0 1rem; }

.wbe-zimmer {
  display: grid;
  gap: 0;
  background: var(--w-white);
  border: 1px solid var(--w-line);
  border-radius: var(--w-radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.wbe-zimmer:hover { box-shadow: var(--w-shadow-md); }
.wbe-zimmer.is-gewaehlt { border-color: var(--w-moss); }

@media (min-width: 44rem) { .wbe-zimmer { grid-template-columns: 15rem minmax(0, 1fr); } }

.wbe-zimmer__bild { position: relative; background: var(--w-paper-3); }
.wbe-zimmer__bild img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.wbe-zimmer__platzhalter { aspect-ratio: 3 / 2; background: var(--w-paper-3); }

.wbe-marke {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  background: var(--w-brass);
  color: var(--w-white);
  border-radius: var(--w-radius);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wbe-marke--knapp { position: absolute; top: 0.75rem; left: 0.75rem; background: var(--w-wine); }
.wbe-marke--stumm { background: transparent; color: var(--w-ink-faint); border: 1px solid var(--w-line); }

.wbe-zimmer__text { padding: 1.25rem 1.35rem 0.5rem; grid-column: 1 / -1; }
@media (min-width: 44rem) { .wbe-zimmer__text { grid-column: 2; padding-bottom: 1rem; } }

.wbe-zimmer__name { font-family: var(--w-display); font-size: 1.35rem; font-weight: 500; margin: 0 0 0.25rem; }
.wbe-zimmer__daten { font-size: 0.8rem; color: var(--w-ink-faint); margin: 0 0 0.6rem; }
.wbe-zimmer__beschreibung { font-size: 0.9rem; color: var(--w-ink-soft); margin: 0 0 0.75rem; }

.wbe-merkmale { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.75rem; }
.wbe-merkmale li {
  padding: 0.2rem 0.55rem;
  background: var(--w-paper-2);
  border-radius: var(--w-radius);
  color: var(--w-ink-soft);
}

.wbe-knapp { font-size: 0.78rem; color: var(--w-wine); margin: 0.6rem 0 0; }

/* ------------------------------------------------------------------ Raten */

.wbe-raten { grid-column: 1 / -1; border-top: 1px solid var(--w-line); }

.wbe-rate { padding: 1rem 1.35rem; border-bottom: 1px solid var(--w-line); }
.wbe-rate:last-child { border-bottom: 0; }
.wbe-rate.is-empfohlen { background: var(--w-wine-tint); }
.wbe-rate.is-gewaehlt { background: color-mix(in srgb, var(--w-moss) 8%, transparent); }

.wbe-rate__kopf { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.wbe-rate__name { font-size: 0.95rem; font-weight: 600; margin: 0; font-family: var(--w-sans); }

.wbe-rate__punkte { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.8rem; color: var(--w-ink-soft); margin-bottom: 0.75rem; }
.wbe-rate__punkte li { position: relative; padding-left: 1.1rem; }
.wbe-rate__punkte li::before { content: '·'; position: absolute; left: 0.3rem; font-weight: 700; }
.wbe-rate__punkte li.is-gut { color: var(--w-moss); }
.wbe-rate__punkte li.is-gut::before { content: '✓'; font-size: 0.7rem; left: 0; }
.wbe-rate__punkte li.is-streng { color: var(--w-ink-faint); }

.wbe-rate__fuss { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.wbe-rate__preis { display: flex; flex-direction: column; line-height: 1.25; }
.wbe-rate__preis strong { font-family: var(--w-display); font-size: 1.55rem; font-weight: 600; }
.wbe-rate__preis span { font-size: 0.72rem; color: var(--w-ink-faint); }
.wbe-rate__statt { font-size: 0.78rem; margin-bottom: 0.1rem; }
.wbe-rate__statt s { text-decoration-thickness: 1px; }
.wbe-rate__statt em { font-style: normal; font-weight: 600; color: var(--w-moss); margin-left: 0.35rem; }
.wbe-rate__pronacht { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- Nichts verfügbar */

.wbe-leer, .wbe-kombination {
  background: var(--w-white);
  border: 1px solid var(--w-line);
  border-radius: var(--w-radius);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.wbe-leer__gruende { margin-top: 1rem; font-size: 0.85rem; color: var(--w-ink-soft); }
.wbe-leer__gruende li { padding: 0.3rem 0; border-bottom: 1px solid var(--w-line); }
.wbe-tel { font-family: var(--w-display); font-size: 1.4rem; color: var(--w-wine); text-decoration: none; }

.wbe-kombination__liste { margin: 1.25rem 0; }
.wbe-kombination__zimmer {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--w-line);
}
.wbe-kombination__nr {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  background: var(--w-paper-2);
  border-radius: 50%;
  font-size: 0.8rem; font-weight: 600;
}
.wbe-kombination__belegung { display: block; font-size: 0.8rem; color: var(--w-ink-faint); }
.wbe-kombination__preis { font-variant-numeric: tabular-nums; }
.wbe-kombination__fuss { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.wbe-kombination__summe { font-family: var(--w-display); font-size: 1.6rem; font-weight: 600; }

.wbe-nichtfrei { margin-top: 1rem; font-size: 0.85rem; color: var(--w-ink-faint); }
.wbe-nichtfrei summary { cursor: pointer; }
.wbe-nichtfrei li { padding: 0.3rem 0; }

/* ----------------------------------------------------------------- Extras */

.wbe-extras__liste { display: grid; gap: 1rem; margin-bottom: 2rem; }

.wbe-extra {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 1.25rem;
  background: var(--w-white);
  border: 1px solid var(--w-line);
  border-radius: var(--w-radius);
}
.wbe-extra.is-gewaehlt { border-color: var(--w-moss); background: color-mix(in srgb, var(--w-moss) 5%, var(--w-white)); }
.wbe-extra__text { flex: 1 1 16rem; }
.wbe-extra__name { display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; font-weight: 600; margin: 0 0 0.3rem; font-family: var(--w-sans); }
.wbe-extra__text p { font-size: 0.88rem; color: var(--w-ink-soft); margin: 0 0 0.5rem; }
.wbe-extra__preis { font-weight: 600; }
.wbe-extra__preis span { font-weight: 400; font-size: 0.78rem; color: var(--w-ink-faint); }
.wbe-extra__wahl { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.wbe-extra__summe { font-size: 0.82rem; color: var(--w-moss); margin: 0; }

/* ---------------------------------------------------------------- Formular */

.wbe-formular { display: grid; gap: 1.15rem; }
.wbe-reihe { display: grid; gap: 1.15rem; }
@media (min-width: 34rem) { .wbe-reihe { grid-template-columns: 1fr 1fr; } }

.wbe-feld { display: block; }
.wbe-eingabe {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--w-white);
  color: var(--w-ink);
  border: 1px solid var(--w-line-strong);
  border-radius: var(--w-radius);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.wbe-eingabe:focus { border-color: var(--w-wine); box-shadow: 0 0 0 3px var(--w-wine-tint); outline: none; }
.wbe-feld.is-fehler .wbe-eingabe { border-color: var(--w-wine); }
.wbe-feldfehler { display: block; font-size: 0.78rem; color: var(--w-wine); margin-top: 0.3rem; }
textarea.wbe-eingabe { resize: vertical; min-height: 4.5rem; }

.wbe-schalter { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.9rem; cursor: pointer; }
.wbe-schalter input { margin-top: 0.35rem; width: 1.05rem; height: 1.05rem; accent-color: var(--w-wine); flex: none; }
.wbe-schalter.is-fehler { color: var(--w-wine); }
.wbe-schalter a { color: var(--w-wine); }

.wbe-firmenteil { display: grid; gap: 1.15rem; margin: 0; padding: 1.25rem; border: 1px solid var(--w-line); border-radius: var(--w-radius); background: var(--w-paper-2); }

.wbe-zahlhinweis { font-size: 0.88rem; color: var(--w-moss); margin: 0; }

.wbe-navi { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: space-between; margin-top: 0.75rem; }
.wbe-navi--mitte { justify-content: center; }

/* --------------------------------------------------------- Zusammenfassung */

.wbe-summe {
  background: var(--w-white);
  border: 1px solid var(--w-line);
  border-radius: var(--w-radius);
  padding: 1.35rem;
  box-shadow: var(--w-shadow-sm);
}
.wbe-summe--leer { color: var(--w-ink-faint); }
.wbe-summe__titel { font-family: var(--w-display); font-size: 1.25rem; font-weight: 500; margin: 0 0 0.9rem; }
.wbe-summe__zeitraum { font-size: 0.92rem; margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--w-line); }
.wbe-summe__klein { font-size: 0.8rem; color: var(--w-ink-faint); display: block; }

.wbe-summe__zeile { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; font-size: 0.92rem; }
.wbe-summe__zeile--klein { font-size: 0.82rem; color: var(--w-ink-soft); padding: 0.25rem 0; }
.wbe-summe__zeile span { font-variant-numeric: tabular-nums; }
.wbe-summe__gruppe { border-top: 1px solid var(--w-line); margin-top: 0.5rem; padding-top: 0.5rem; }

.wbe-summe__gesamt {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: 0.85rem; padding-top: 0.85rem;
  border-top: 1px solid var(--w-line-strong);
}
.wbe-summe__gesamt strong { font-family: var(--w-display); font-size: 1.7rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.wbe-summe__fuss { font-size: 0.75rem; color: var(--w-ink-faint); margin: 1rem 0 0; line-height: 1.5; }
.wbe-summe__laden { height: 3rem; display: grid; place-items: center; color: var(--w-ink-faint); }

/* ------------------------------------------------------------ Promocode
   Eingeklappt, bis jemand ihn braucht: Ein dauerhaft offenes Gutscheinfeld
   laesst jeden ohne Code glauben, er zahle den schlechteren Preis — und
   schickt ihn zum Suchen statt zum Buchen. */

.wbe-gutschein__auf {
  display: block; width: 100%; margin-top: 0.85rem; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.85rem; text-align: left;
  color: var(--w-ink-soft); text-decoration: underline; text-underline-offset: 3px;
}
.wbe-gutschein__auf:hover { color: var(--w-wine); }

.wbe-gutschein {
  margin-top: 0.85rem; padding-top: 0.85rem;
  border-top: 1px solid var(--w-line);
  display: grid; gap: 0.6rem;
}
.wbe-gutschein__feld { display: grid; gap: 0.25rem; }
.wbe-gutschein__feld .wbe-eingabe { text-transform: uppercase; letter-spacing: 0.05em; }

/* Eingeloest: Der Betrag steht neben dem Code, damit sichtbar ist, was er
   gebracht hat — ein Code ohne Zahl daneben wirkt wie eine Behauptung. */
.wbe-gutschein--gilt {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  color: var(--w-wine);
}
.wbe-gutschein--gilt .wbe-summe__klein { display: block; color: var(--w-ink-soft); }
.wbe-gutschein__weg {
  flex: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.8rem; color: var(--w-ink-soft);
  text-decoration: underline; text-underline-offset: 3px;
}
.wbe-gutschein__weg:hover { color: var(--w-wine); }

.wbe-gutschein__fehler { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--w-wine); }

/* -------------------------------------------------------------- Bestätigt */

.wbe-fertig { max-width: 34rem; margin-inline: auto; text-align: center; padding: clamp(1.5rem, 4vw, 3rem) 0; }
.wbe-fertig__haken {
  width: 3.5rem; height: 3.5rem;
  margin: 0 auto 1.25rem;
  display: grid; place-items: center;
  background: var(--w-moss); color: var(--w-paper);
  border-radius: 50%;
  font-size: 1.6rem;
}
.wbe-fertig__daten { display: grid; gap: 0.15rem; margin: 1.75rem 0 1rem; text-align: left; }
.wbe-fertig__daten > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--w-line);
}
.wbe-fertig__daten dt { color: var(--w-ink-faint); font-size: 0.85rem; }
.wbe-fertig__daten dd { margin: 0; font-weight: 600; }
.wbe-nummer { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* ------------------------------------------------------------- Zustände */

.wbe-laden { display: grid; gap: 0.85rem; padding: 1.5rem 0; }
.wbe-laden__balken {
  height: 1rem;
  background: linear-gradient(90deg, var(--w-paper-2) 25%, var(--w-paper-3) 50%, var(--w-paper-2) 75%);
  background-size: 200% 100%;
  border-radius: var(--w-radius);
  animation: wbe-schimmer 1.4s ease-in-out infinite;
}
.wbe-laden__balken--kurz { width: 60%; }
@keyframes wbe-schimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .wbe-laden__balken { animation: none; } }

.wbe-fehler {
  padding: 1.5rem;
  background: var(--w-wine-tint);
  border: 1px solid var(--w-wine);
  border-radius: var(--w-radius);
  text-align: center;
}
.wbe-fehler__text { margin: 0 0 0.75rem; }
.wbe-fehler__tel { margin: 0 0 1rem; font-size: 0.9rem; }
.wbe-fehler__tel a { color: var(--w-wine); font-weight: 600; }

/* ----------------------------------------------------------------- Druck */

@media print {
  .wbe-schritte, .wbe-navi, .wbe-seite { display: none !important; }
  .wbe-fertig { max-width: none; }
  .wbe { color: #000; }
}

/* Über "Dieses Zimmer buchen" angesteuertes Zimmer — sichtbar, aber nicht laut. */
.wbe-zimmer.is-gewuenscht { border-color: var(--w-brass); box-shadow: var(--w-shadow-md); }

/* ====================================================================
   Mehrzimmer-Auswahl, Bestand, Galerie und Zahlung
   Ergänzungen vom 28.08.2026 — siehe app.js für das Warum.
   ==================================================================== */

/* --------------------------------------------------------- Verteilung */

/* Zeigt, wie viele Gäste noch ohne Bett sind. Ruhig gehalten: eine
   Standmeldung, keine Warnung — der Gast hat nichts falsch gemacht. */
.wbe-verteilung {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
  background: var(--w-paper-2);
  border: 1px solid var(--w-line);
  border-left: 3px solid var(--w-brass);
  border-radius: var(--w-radius);
  font-size: 0.9rem;
}
.wbe-verteilung.is-fertig { border-left-color: var(--w-moss); background: color-mix(in srgb, var(--w-moss) 6%, var(--w-white)); }
.wbe-verteilung__punkt {
  flex: none;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  background: var(--w-brass); color: var(--w-white);
  border-radius: 50%;
  font-size: 0.8rem; font-weight: 700;
}
.wbe-verteilung.is-fertig .wbe-verteilung__punkt { background: var(--w-moss); }
.wbe-verteilung__text { flex: 1 1 auto; }
.wbe-verteilung__hilfe { display: block; font-size: 0.82rem; color: var(--w-ink-soft); }
.wbe-verteilung__zahl { flex: none; font-size: 0.82rem; color: var(--w-ink-faint); white-space: nowrap; }

/* ------------------------------------------------------------ Bestand */

.wbe-bestand { margin: 0 0 0.6rem; font-size: 0.82rem; font-weight: 600; color: var(--w-moss); }
.wbe-bestand.is-knapp { color: var(--w-brass); }
.wbe-bestand.is-leer { color: var(--w-ink-faint); font-weight: 400; }

/* Ausgebuchte Kategorie: sichtbar, aber erkennbar nicht wählbar. Sie
   verschwindet NICHT — Gäste sollen sie finden und den Grund lesen. */
.wbe-zimmer.is-aus { opacity: 0.72; }
.wbe-zimmer.is-aus .wbe-zimmer__bild img { filter: grayscale(0.75); }
.wbe-zimmer.is-gewaehlt { border-color: var(--w-moss); box-shadow: var(--w-shadow-md); }

.wbe-rate--aus {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: var(--w-paper-2);
}
.wbe-rate__grund { margin: 0; font-size: 0.9rem; color: var(--w-ink-soft); }

.wbe-zuklein {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  color: var(--w-brass);
}

/* ------------------------------------------------------ Bild und Mini */

.wbe-zimmer__bildknopf {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in; position: relative;
}
.wbe-zimmer__bildknopf img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.wbe-zimmer__lupe {
  position: absolute; right: 0.6rem; bottom: 0.6rem;
  padding: 0.2rem 0.5rem;
  background: rgba(36, 28, 23, 0.72); color: #fff;
  border-radius: var(--w-radius);
  font-size: 0.7rem; letter-spacing: 0.04em;
}

.wbe-mini { display: flex; gap: 0.4rem; margin-top: 0.75rem; flex-wrap: wrap; }
.wbe-mini__bild {
  padding: 0; border: 1px solid var(--w-line); border-radius: var(--w-radius);
  background: none; cursor: zoom-in; overflow: hidden; line-height: 0;
  transition: border-color 0.18s ease;
}
.wbe-mini__bild:hover { border-color: var(--w-wine); }
.wbe-mini__bild img { width: 4.5rem; height: 3rem; object-fit: cover; }

/* ------------------------------------------------------------ Galerie */

.wbe-galerie {
  width: min(64rem, 94vw);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--w-radius);
  background: var(--w-white);
  color: var(--w-ink);
  overflow: hidden;
}
.wbe-galerie::backdrop { background: rgba(20, 15, 12, 0.82); }

.wbe-galerie__kopf {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--w-line);
  font-family: var(--w-display); font-size: 1.1rem;
}
.wbe-galerie__zaehler { margin-left: auto; font-family: var(--w-sans); font-size: 0.8rem; color: var(--w-ink-faint); }
.wbe-galerie__zu {
  width: 2rem; height: 2rem; flex: none;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--w-line);
  border-radius: var(--w-radius); cursor: pointer; font-size: 0.9rem;
}
.wbe-galerie__zu:hover { background: var(--w-ink); color: var(--w-paper); }

.wbe-galerie__buehne {
  position: relative;
  display: grid; place-items: center;
  background: var(--w-paper-3);
}
.wbe-galerie__bild { width: 100%; max-height: 64vh; object-fit: contain; }
.wbe-galerie__pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--w-line);
  border-radius: 50%;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.wbe-galerie__pfeil:first-of-type { left: 0.75rem; }
.wbe-galerie__pfeil:last-of-type { right: 0.75rem; }
.wbe-galerie__pfeil:disabled { opacity: 0.25; cursor: not-allowed; }
.wbe-galerie__pfeil:hover:not(:disabled) { background: var(--w-white); }

.wbe-galerie__streifen {
  display: flex; gap: 0.4rem;
  padding: 0.75rem 1.1rem;
  overflow-x: auto;
  border-top: 1px solid var(--w-line);
}
.wbe-galerie__mini {
  flex: none; padding: 0; line-height: 0;
  background: none; border: 2px solid transparent; border-radius: var(--w-radius);
  cursor: pointer; overflow: hidden;
}
.wbe-galerie__mini.is-aktiv { border-color: var(--w-wine); }
.wbe-galerie__mini img { width: 5rem; height: 3.4rem; object-fit: cover; }

@media (max-width: 40rem) {
  .wbe-galerie__bild { max-height: 46vh; }
  .wbe-galerie__pfeil { width: 2.25rem; height: 2.25rem; font-size: 1.15rem; }
}

/* ----------------------------------------------------- Mengenwähler */

.wbe-rate__wahl { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.wbe-rate__wahl .wbe-label { margin: 0; }
.wbe-zaehler__knopf--plus { border-color: var(--w-wine); color: var(--w-wine); font-weight: 700; }
.wbe-zaehler__knopf--plus:hover:not(:disabled) { background: var(--w-wine); color: var(--w-paper); }

.wbe-summe__warnung {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.7rem;
  background: color-mix(in srgb, var(--w-brass) 14%, var(--w-white));
  border-radius: var(--w-radius);
  font-size: 0.82rem;
  color: var(--w-ink-soft);
}

/* -------------------------------------------------------------- Zahlung */

.wbe-zahlteil {
  margin: 0; padding: 1.1rem 1.25rem;
  border: 1px solid var(--w-line); border-radius: var(--w-radius);
  background: var(--w-paper-2);
}
.wbe-zahlteil legend { padding: 0 0.4rem; }
.wbe-zahlarten { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.75rem; }
.wbe-zahlart {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--w-white);
  border: 1px solid var(--w-line-strong);
  border-radius: var(--w-radius);
  font-size: 0.88rem; cursor: pointer;
}
.wbe-zahlart.is-gewaehlt { border-color: var(--w-wine); box-shadow: 0 0 0 2px var(--w-wine-tint); }
.wbe-zahlart input { accent-color: var(--w-wine); }

/* ------------------------------------------------ Beleg auf der Bestätigung */

.wbe-nummer--gross { font-size: 1.35rem; letter-spacing: 0.08em; }

.wbe-beleg { margin: 1.6rem auto 0; max-width: 34rem; text-align: left; border: 1px solid var(--w-line); border-radius: var(--w-radius); padding: 1.1rem 1.35rem; background: var(--w-white); }
.wbe-beleg__titel { font-family: var(--w-display); font-size: 1.15rem; margin: 0; }
.wbe-beleg__untertitel { font-family: var(--w-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--w-ink-faint); margin: 0 0 0.25rem; }
.wbe-beleg__klein { font-size: 0.78rem; color: var(--w-ink-soft); margin: 0; }

.wbe-beleg__posten { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.55rem 0; border-bottom: 1px solid var(--w-line); }
.wbe-beleg__posten > div { display: flex; flex-direction: column; }
.wbe-beleg__posten--klein { font-size: 0.82rem; color: var(--w-ink-soft); padding: 0.35rem 0; }
.wbe-beleg__posten--summe { border-bottom: 0; border-top: 2px solid var(--w-line-strong); margin-top: 0.2rem; padding-top: 0.7rem; font-size: 1.05rem; }

.wbe-beleg__spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem 1.4rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--w-line); }
.wbe-beleg__spalten p { margin: 0; font-size: 0.85rem; line-height: 1.45; }

@media print {
  .wbe-navi, .wbe-btn { display: none !important; }
  .wbe-beleg { border-color: #999; }
}

/* ------------------------------------------------ Buchung verwalten */
.wbe-verwalten { max-width: 26rem; margin: 0 auto; text-align: center; padding: 2rem 1rem; }
.wbe-form--schmal { text-align: left; margin-top: 1.5rem; }
.wbe-fehler { color: var(--w-wine); font-size: 0.85rem; margin: 0.5rem 0 0; }
.wbe-storno { max-width: 34rem; margin: 1.4rem auto 0; padding: 1rem 1.35rem; background: var(--w-paper-2); border-radius: var(--w-radius); text-align: left; font-size: 0.9rem; }
.wbe-storno p { margin: 0 0 0.7rem; }
.wbe-warnung { color: var(--w-wine); font-weight: 600; }
.wbe-btn--warnung { background: var(--w-wine); color: var(--w-white); border-color: var(--w-wine); }

.wbe-schonGebucht { text-align: center; margin: 1.75rem 0 0; }
.wbe-textlink { background: none; border: 0; padding: 0; font: inherit; font-size: 0.85rem; color: var(--w-ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wbe-textlink:hover { color: var(--w-wine); }

/* Das Kartenfeld von Stripe — es soll wie unsere Eingabefelder wirken. */
.wbe-kartenfeld { margin-top: 0.75rem; padding: 0.9rem 1rem; border: 1px solid var(--w-line); border-radius: var(--w-radius); background: var(--w-white); min-height: 3.2rem; }
.wbe-kartenfeld:empty::after { content: "…"; color: var(--w-ink-faint); }