/* ============================================================
   Beds24 Buchungs-Widget – WordPress-taugliche, gescopete Styles.
   Alle Regeln liegen unter .b24 bzw. .b24-modal, damit das Theme
   nichts überschreibt und das Widget nichts am Theme kaputt macht.
   Farben lassen sich per CSS-Variablen am Container überschreiben.
   ============================================================ */

.b24 {
  --b24-bg:        #faf9f7;
  --b24-text:      #1a1a1a;
  --b24-muted:     #9a8a7a;
  --b24-line:      #e2d9c9;
  --b24-accent:    #5a4a3a;
  --b24-free:      #3a7d44;
  --b24-free-dark: #2f6537;
  --b24-booked:    #c0b8b0;
  --b24-sel:       #b8860b;
  --b24-err:       #b23b3b;
  --b24-serif:     Georgia, 'Times New Roman', serif;
  --b24-sans:      Arial, Helvetica, sans-serif;
  /* Maximalbreite – im Einbau-Code ueberschreibbar, z. B. --b24-maxwidth: 1150px */
  --b24-maxwidth:  960px;
  /* Monats-Mindestbreite – kleiner = mehr Monate nebeneinander */
  --b24-monthmin:  15rem;

  font-family: var(--b24-serif);
  color: var(--b24-text);
  line-height: 1.5;
  max-width: var(--b24-maxwidth);
  /* Abstand nach unten, damit folgende Inhalte nicht direkt anschliessen */
  margin: 0 auto 2.5rem;
}
.b24, .b24 *, .b24 *::before, .b24 *::after,
.b24-modal, .b24-modal *, .b24-modal *::before, .b24-modal *::after { box-sizing: border-box; }

/* ── Kopf ─────────────────────────────────────────────────── */
.b24 .b24-head { text-align: center; margin: 0 0 1.5rem; }
.b24 .b24-rule { width: 40px; height: 1px; background: #c2b49a; margin: 0 auto 1.25rem; }
.b24 .b24-name { font-size: 1.15rem; color: #3a3028; margin: 0 0 .35rem; font-weight: normal; }
.b24 .b24-hint { font-family: var(--b24-sans); font-size: .78rem; color: var(--b24-muted); margin: 0; }

.b24 .b24-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.5rem; }
.b24 .b24-range { font-size: 1.05rem; font-weight: normal; letter-spacing: .04em; color: #3a3028; text-align: center; flex: 1; margin: 0; }
.b24 .b24-navbtn {
  background: none; border: 1px solid #c2b49a; color: var(--b24-accent);
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .15s, color .15s; padding: 0; line-height: 1;
}
.b24 .b24-navbtn:hover:not(:disabled) { background: var(--b24-accent); color: #fff; border-color: var(--b24-accent); }
.b24 .b24-navbtn:disabled { opacity: .3; cursor: not-allowed; }

/* ── Monate ───────────────────────────────────────────────── */
/* Spaltenzahl richtet sich nach dem TATSAECHLICH verfuegbaren Platz, nicht nach
   der Fensterbreite: In einer schmalen Theme-Spalte werden so automatisch
   weniger Monate nebeneinander gezeigt, statt drei zusammenzuquetschen. */
.b24 .b24-months {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--b24-monthmin), 1fr));
  gap: 2.25rem 2rem;
}

/* Optional per data-wide="1": Widget aus einer schmalen Theme-Spalte
   ausbrechen lassen. Die Spaltenbreite gibt --b24-colwidth an (Anteil der
   umgebenden Spalte an der Gesamtbreite, z. B. 68.7% beim Oceanica-Theme). */
.b24-wide { --b24-colwidth: 68.7%; }
@media screen and (min-width: 62em) {
  .b24-wide { width: calc(100% / (var(--b24-colwidth) / 100%)); max-width: none; }
}

.b24 .b24-month-name { text-align: center; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--b24-accent); margin: 0 0 .75rem; }
.b24 .b24-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.b24 .b24-dow { text-align: center; font-size: .7rem; letter-spacing: .04em; color: var(--b24-muted); padding: 2px 0 5px; font-family: var(--b24-sans); }

.b24 .b24-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 3px; line-height: 1; position: relative; user-select: none;
}
.b24 .b24-daynum { font-size: .95rem; font-family: var(--b24-sans); font-weight: 700; position: relative; z-index: 1; text-shadow: 0 1px 1.5px rgba(0,0,0,.35); }

.b24 .b24-free   { background: var(--b24-free); color: #fff; cursor: pointer; }
.b24 .b24-free:hover { background: var(--b24-free-dark); }
.b24 .b24-booked { background: var(--b24-booked); color: #fff; }
.b24 .b24-past   { color: #ccc; background: transparent; }
.b24 .b24-blank  { background: transparent; }

/* Wechseltage: diagonal geteilt, hauchdünne Trennung in Hintergrundfarbe */
.b24 .b24-turn-start { color: #fff; cursor: pointer;
  background: linear-gradient(to bottom right, var(--b24-free) 0 49.6%, var(--b24-bg) 49.6% 50.4%, var(--b24-booked) 50.4% 100%); }
.b24 .b24-turn-end { color: #fff; cursor: pointer;
  background: linear-gradient(to bottom right, var(--b24-booked) 0 49.6%, var(--b24-bg) 49.6% 50.4%, var(--b24-free) 50.4% 100%); }
.b24 .b24-turn-start:hover, .b24 .b24-turn-end:hover { box-shadow: 0 0 0 2px var(--b24-accent) inset; }

.b24 .b24-sel { background: var(--b24-sel) !important; color: #fff; }
.b24 .b24-sel:hover { background: #a2760a !important; }
.b24 .b24-sel-end { box-shadow: 0 0 0 2px var(--b24-accent) inset; }

.b24 .b24-status { text-align: center; font-size: .75rem; font-family: var(--b24-sans); color: var(--b24-muted); margin: 1.25rem 0 0; min-height: 1.2em; }

/* Kleines Icon für Wechseltage im Hinweistext (wie eine An-/Abreisetag-Kachel) */
.b24 .b24-turnicon {
  display: inline-block; width: .78rem; height: .78rem; border-radius: 2px; vertical-align: -1px;
  background: linear-gradient(to bottom right, var(--b24-booked) 0 49%, var(--b24-bg) 49% 51%, var(--b24-free) 51% 100%);
}

/* Wochenrabatt-Hinweis */
.b24 .b24-weekhint, .b24-modal .b24-weekhint {
  font-family: var(--b24-sans, Arial), sans-serif; font-size: .84rem; line-height: 1.45; color: #1f5c2a;
}
.b24-modal .b24-weekhint-block {
  display: block; margin-top: .7rem; background: #eaf4ec; border: 1px solid #bcd9c2;
  border-radius: 6px; padding: .6rem .8rem; text-align: left;
}
.b24 .b24-legend { display: flex; justify-content: center; gap: 1.5rem; margin: 1.25rem 0 0; font-size: .72rem; font-family: var(--b24-sans); color: #7a6a5a; flex-wrap: wrap; }
.b24 .b24-legend span.b24-li { display: flex; align-items: center; gap: .4rem; }
.b24 .b24-dot { width: 13px; height: 13px; border-radius: 2px; flex-shrink: 0; display: inline-block; }
/* Legendenfarben aus den Variablen – so passen Legende und Kalender immer zusammen */
.b24 .b24-dot-free   { background: var(--b24-free); }
.b24 .b24-dot-booked { background: var(--b24-booked); }
.b24 .b24-dot-sel    { background: var(--b24-sel); }
.b24 .b24-dot-turn   { background: linear-gradient(to bottom right,
                         var(--b24-booked) 0 48%, var(--b24-bg) 48% 52%, var(--b24-free) 52% 100%); }

/* ── Auswahlleiste (im Fluss, nicht fixed – WP-freundlich) ── */
.b24 .b24-bar {
  margin: 1.5rem 0 0; background: #fff; border: 1px solid var(--b24-line); border-radius: 8px;
  padding: .9rem 1.1rem; display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-wrap: wrap;
}
.b24 .b24-bartext { font-family: var(--b24-sans); font-size: .9rem; color: #3a3028; }
.b24 .b24-bartext b { color: var(--b24-sel); }
.b24 .b24-btn {
  font-family: var(--b24-sans); font-size: .85rem; letter-spacing: .03em; border: 0;
  border-radius: 5px; padding: .6rem 1.4rem; cursor: pointer; transition: background .15s;
}
.b24 .b24-btn-primary { background: var(--b24-accent); color: #fff; }
.b24 .b24-btn-primary:hover:not(:disabled) { background: #3a3028; }
.b24 .b24-btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.b24 .b24-btn-ghost { background: none; color: #7a6a5a; border: 1px solid #c2b49a; }
.b24 .b24-btn-ghost:hover { background: #f0ebe2; }

/* ── Overlay / Modal ──────────────────────────────────────── */
.b24-modal {
  position: fixed; inset: 0; z-index: 99999; display: none;
  background: rgba(26,20,14,.55); overflow-y: auto;
  padding: 2rem 1rem; font-family: Georgia, 'Times New Roman', serif; color: #1a1a1a;
  -webkit-overflow-scrolling: touch;
}
.b24-modal.b24-open { display: block; }
.b24-modal .b24-dialog {
  background: #faf9f7; max-width: 560px; margin: 0 auto; border-radius: 10px;
  padding: 1.75rem 1.5rem 2rem; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.b24-modal .b24-close {
  position: absolute; top: .6rem; right: .75rem; background: none; border: 0;
  font-size: 1.6rem; line-height: 1; color: #9a8a7a; cursor: pointer; padding: .2rem .4rem;
}
.b24-modal .b24-close:hover { color: #3a3028; }

.b24-modal h3 { font-size: 1.1rem; font-weight: normal; letter-spacing: .03em; color: #3a3028; text-align: center; margin: 0 0 .3rem; }
.b24-modal .b24-stay { text-align: center; font-family: Arial, sans-serif; font-size: .82rem; color: #7a6a5a; margin: 0 0 1.35rem; }
.b24-modal .b24-stay b { color: #b8860b; }

.b24-modal fieldset { border: 1px solid #ece6dc; border-radius: 8px; padding: 1rem 1.15rem 1.25rem; margin: 0 0 1rem; background: #fff; }
.b24-modal legend { font-family: Arial, sans-serif; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #9a8a7a; padding: 0 .5rem; }
.b24-modal .b24-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem .95rem; }
.b24-modal .b24-f { display: flex; flex-direction: column; gap: .3rem; }
.b24-modal .b24-f.b24-full { grid-column: 1 / -1; }
.b24-modal label { font-family: Arial, sans-serif; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: #9a8a7a; }
.b24-modal label .b24-req { color: #b8860b; }
.b24-modal input, .b24-modal select, .b24-modal textarea {
  font-family: Arial, sans-serif; font-size: .92rem; color: #3a3028; padding: .5rem .6rem;
  border: 1px solid #d8cdba; border-radius: 5px; background: #fdfcfa; width: 100%; margin: 0;
}
.b24-modal input:focus, .b24-modal select:focus, .b24-modal textarea:focus { outline: none; border-color: #5a4a3a; }
.b24-modal input[readonly] { background: #f2ede4; color: #7a6a5a; }
.b24-modal textarea { resize: vertical; min-height: 3.4rem; }

.b24-modal .b24-opts { display: flex; flex-direction: column; gap: .55rem; }
.b24-modal .b24-optrow { display: flex; align-items: center; gap: .55rem; font-family: Arial, sans-serif; font-size: .86rem; color: #3a3028; cursor: pointer; text-transform: none; letter-spacing: normal; }
.b24-modal .b24-optrow input { width: auto; }
.b24-modal .b24-optlabel { flex: 1; }
.b24-modal .b24-optprice { color: #7a6a5a; font-size: .8rem; white-space: nowrap; }

.b24-modal .b24-price { font-family: Arial, sans-serif; background: #f3efe7; border: 1px solid #e2d9c9; border-radius: 6px; padding: .95rem 1.1rem; margin: 0 0 1rem; color: #3a3028; text-align: center; }
.b24-modal .b24-price.b24-price-err { color: #b23b3b; background: #f8efee; border-color: #e6d2d0; }
.b24-modal .b24-prow { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; padding: .22rem 0; text-align: left; }
.b24-modal .b24-prow span:last-child { white-space: nowrap; }
.b24-modal .b24-ptotal { border-top: 1px solid #ddd2c0; margin-top: .4rem; padding-top: .5rem; font-size: 1.05rem; font-weight: bold; color: #3a7d44; }
.b24-modal .b24-pnote { font-size: .72rem; color: #9a8a7a; margin-top: .5rem; text-align: left; }
/* Hinweise unter dem Gesamtpreis: schwarz und gut lesbar */
.b24-modal .b24-footnotes { margin: .7rem 0 0; padding: 0 0 0 1.1rem; text-align: left; list-style: disc; }
.b24-modal .b24-footnotes li { font-size: .84rem; line-height: 1.45; color: #1a1a1a; margin: .3rem 0; }

/* Pflicht-Einwilligung */
.b24-modal .b24-consent { margin: 0 0 1rem; }
.b24-modal .b24-consentrow {
  display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
  font-family: Arial, sans-serif; font-size: .86rem; line-height: 1.45;
  color: #3a3028; text-transform: none; letter-spacing: normal;
}
.b24-modal .b24-consentrow input { width: auto; margin: .15rem 0 0; flex: 0 0 auto; }
.b24-modal .b24-consentrow a { color: #3a7d44; text-decoration: underline; }

.b24-modal .b24-actions { display: flex; gap: .85rem; }
.b24-modal .b24-btn { flex: 1; font-family: Arial, sans-serif; font-size: .88rem; letter-spacing: .03em; border: 0; border-radius: 5px; padding: .75rem; cursor: pointer; transition: background .15s; }
.b24-modal .b24-send { background: #3a7d44; color: #fff; }
.b24-modal .b24-send:hover:not(:disabled) { background: #2f6537; }
.b24-modal .b24-send:disabled { opacity: .5; cursor: not-allowed; }
.b24-modal .b24-cancel { background: none; color: #7a6a5a; border: 1px solid #c2b49a; }
.b24-modal .b24-cancel:hover { background: #f0ebe2; }
.b24-modal .b24-msg { font-family: Arial, sans-serif; font-size: .85rem; text-align: center; margin: 1rem 0 0; min-height: 1.2em; }
.b24-modal .b24-msg-err { color: #b23b3b; }

.b24-modal .b24-done { text-align: center; padding: 1.5rem .5rem .5rem; }
.b24-modal .b24-done .b24-check { font-size: 2.6rem; color: #3a7d44; }
.b24-modal .b24-done h4 { font-weight: normal; font-size: 1.15rem; color: #3a3028; margin: .75rem 0 .5rem; }
.b24-modal .b24-done p { font-family: Arial, sans-serif; font-size: .88rem; color: #6a5a4a; line-height: 1.6; margin: 0 0 .4rem; }
.b24-modal .b24-done .b24-ref { font-family: Arial, sans-serif; font-size: .78rem; color: #9a8a7a; }
.b24-modal .b24-done .b24-homebtn { display: inline-block; margin-top: 1.35rem; background: #5a4a3a; color: #fff; text-decoration: none; font-family: Arial, sans-serif; font-size: .85rem; padding: .7rem 1.5rem; border-radius: 5px; }
.b24-modal .b24-done .b24-homebtn:hover { background: #3a3028; color: #fff; }

.b24-hidden { display: none !important; }

/* Honeypot: fuer Menschen unsichtbar, aber im DOM vorhanden (Bots fuellen es aus).
   Absichtlich nicht display:none – manche Bots ignorieren das. */
.b24-modal .b24-hp {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

/* ============================================================
   Mobil (Telefon). Kalender einspaltig mit groesseren Kacheln,
   Leiste und Formular gestapelt, Overlay als Vollbild.
   ============================================================ */
@media (max-width: 600px) {
  /* Spalten regelt auto-fit selbst; hier nur Abstaende/Groessen */
  .b24 .b24-months { gap: 1.6rem; }
  .b24 .b24-daynum { font-size: 1.05rem; }
  .b24 .b24-legend { gap: .5rem 1rem; font-size: .72rem; }
  .b24 .b24-hint { font-size: .8rem; }

  /* Auswahlleiste: Text zentriert, Buttons volle Breite untereinander */
  .b24 .b24-bar { flex-direction: column; align-items: stretch; gap: .7rem; padding: .9rem 1rem; }
  .b24 .b24-bartext { text-align: center; }
  .b24 .b24-btn { width: 100%; padding: .75rem 1rem; }

  /* Overlay als Vollbild-Dialog */
  .b24-modal { padding: 0; }
  .b24-modal .b24-dialog { max-width: none; border-radius: 0; min-height: 100vh; padding: 1.5rem 1.05rem 2rem; }
  .b24-modal .b24-close { top: .4rem; right: .5rem; font-size: 1.9rem; }
  .b24-modal .b24-grid { grid-template-columns: 1fr; gap: .75rem; }
  .b24-modal fieldset { padding: .9rem 1rem 1.1rem; }
  .b24-modal .b24-actions { flex-direction: column-reverse; }  /* "verbindlich Buchen" oben */
  .b24-modal input, .b24-modal select, .b24-modal textarea { font-size: 1rem; }  /* kein iOS-Zoom */
  .b24-modal .b24-prow { font-size: .9rem; }
  .b24-modal .b24-footnotes li { font-size: .88rem; }
}

/* Nur Schloss Schmuggerow, nur mobil: Posten der Preisvorschau
   mit Zeilenumbruch zentriert untereinander statt in einer Zeile. */
@media (max-width: 600px) {
  .b24-house-schmuggerow .b24-baritem { display: block; text-align: center; line-height: 1.5; }
  .b24-house-schmuggerow .b24-barsep { display: none; }
}