/**
 * Ferienhaus-Manager — Frontend (Airbnb-inspired design tokens)
 *
 * Tokens orientieren sich an Airbnb (Rausch #ff385c, Ink #222, Hairline #ddd,
 * single shadow tier, 8/14/full radii, modeste Display-Weights). Cereal VF
 * ist nicht frei lizenziert; Inter ist die offene Substitut-Empfehlung.
 */

/* ---------- Design Tokens ---------- */
.fh-calendar-wrap,
.fh-booking-form-wrap,
.fh-booking-widget-wrap,
.fh-booking-bar-wrap {
    /* Brand */
    --fh-primary:           #ff385c;
    --fh-primary-active:    #e00b41;
    --fh-primary-disabled:  #ffd1da;

    /* Surface */
    --fh-canvas:            #ffffff;
    --fh-surface-soft:      #f7f7f7;
    --fh-surface-strong:    #f2f2f2;

    /* Borders */
    --fh-hairline:          #dddddd;
    --fh-hairline-soft:     #ebebeb;
    --fh-border-strong:     #c1c1c1;

    /* Text */
    --fh-ink:               #222222;
    --fh-body:              #3f3f3f;
    --fh-muted:             #6a6a6a;
    --fh-muted-soft:        #929292;
    --fh-on-primary:        #ffffff;

    /* Semantic */
    --fh-error:             #c13515;
    --fh-success:           #008a05;

    /* Radii */
    --fh-radius-sm:         8px;
    --fh-radius-md:         14px;
    --fh-radius-full:       9999px;

    /* Single shadow tier */
    --fh-shadow:
        rgba(0, 0, 0, 0.02) 0 0 0 1px,
        rgba(0, 0, 0, 0.04) 0 2px 6px 0,
        rgba(0, 0, 0, 0.10) 0 4px 8px 0;

    /* Type stack — Cereal-Fallback */
    --fh-font: "Airbnb Cereal VF", "Cereal", "Inter", -apple-system,
               system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

    color: var(--fh-ink);
    font-family: var(--fh-font);
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   KALENDER
   ============================================================ */

.fh-calendar-wrap {
    max-width: 720px;
    margin: 0 auto;
}

/* ---------- Tabs (mehrere Einheiten) ---------- */
.fh-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--fh-hairline);
    margin-bottom: 24px;
    overflow-x: auto;
}

.fh-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--fh-muted);
    cursor: pointer;
    font: 500 16px/1.25 var(--fh-font);
    padding: 12px 16px;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
}

.fh-tab:hover {
    color: var(--fh-ink);
}

.fh-tab-active {
    color: var(--fh-ink);
    border-bottom-color: var(--fh-ink);
}

.fh-tab-panel-hidden {
    display: none;
}

/* ---------- Calendar Card ---------- */
.fh-calendar {
    background: var(--fh-canvas);
    border-radius: var(--fh-radius-md);
    padding: 24px;
}

.fh-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.fh-cal-title {
    font: 600 20px/1.2 var(--fh-font);
    letter-spacing: -0.18px;
    color: var(--fh-ink);
}

.fh-cal-unit-name {
    color: var(--fh-muted);
    font-weight: 400;
    margin-left: 6px;
}

.fh-cal-nav {
    width: 32px;
    height: 32px;
    border-radius: var(--fh-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fh-ink);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease;
    font-size: 16px;
}

.fh-cal-nav:hover {
    background: var(--fh-surface-strong);
    border-color: var(--fh-hairline);
}

/* ---------- Weekdays + Days Grid ---------- */
.fh-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.fh-cal-weekdays {
    margin-bottom: 8px;
}

.fh-weekday {
    text-align: center;
    color: var(--fh-muted);
    font: 500 12px/1.4 var(--fh-font);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 0;
}

.fh-day {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--fh-radius-sm);
    font: 400 14px/1.43 var(--fh-font);
    color: var(--fh-ink);
    background: var(--fh-canvas);
    position: relative;
    transition: background .15s ease, border-color .15s ease;
}

.fh-day-blank {
    background: transparent;
}

.fh-day-num {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.1;
}

.fh-day-price {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 500;
    color: var(--fh-muted);
}

/* Status states */
.fh-day-free {
    background: var(--fh-canvas);
    border: 1px solid var(--fh-hairline-soft);
}

.fh-day-free:hover {
    border-color: var(--fh-ink);
}

.fh-day-booked,
.fh-day-blocked {
    background: var(--fh-surface-strong);
    color: var(--fh-muted-soft);
    text-decoration: line-through;
}

.fh-day-booked .fh-day-price,
.fh-day-blocked .fh-day-price {
    display: none;
}

.fh-day-checkin {
    background: linear-gradient(135deg,
        var(--fh-canvas) 0 49%,
        var(--fh-surface-strong) 51% 100%);
    border: 1px solid var(--fh-hairline-soft);
}

.fh-day-checkout {
    background: linear-gradient(135deg,
        var(--fh-surface-strong) 0 49%,
        var(--fh-canvas) 51% 100%);
    border: 1px solid var(--fh-hairline-soft);
}

.fh-day-past {
    color: var(--fh-muted-soft);
}

/* ---------- Legende ---------- */
.fh-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--fh-hairline-soft);
    font: 400 13px/1.4 var(--fh-font);
    color: var(--fh-muted);
}

.fh-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fh-legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: var(--fh-radius-sm);
    border: 1px solid var(--fh-hairline);
}

.fh-legend-free    { background: var(--fh-canvas); }
.fh-legend-booked  { background: var(--fh-surface-strong); }
.fh-legend-checkin {
    background: linear-gradient(135deg,
        var(--fh-canvas) 0 49%,
        var(--fh-surface-strong) 51% 100%);
}
.fh-legend-checkout {
    background: linear-gradient(135deg,
        var(--fh-surface-strong) 0 49%,
        var(--fh-canvas) 51% 100%);
}

/* ============================================================
   BUCHUNGS-FORMULAR
   ============================================================ */

/* ============================================================
   BUCHUNGSFORMULAR (Schritt 2 „Deine Daten" + Schritt 3 „Bestätigt")
   ============================================================ */

/* WordPress-Seitentitel („Buchung") ausblenden, wenn unser Plugin-Wrap
   auf derselben Seite ist — redundant neben dem Plugin-eigenen Heading
   und passt typografisch nicht zum Airbnb-Design-System.
   DOM: .wp-block-group > H1.wp-block-post-title + DIV.entry-content > .fh-booking-form-wrap */
.wp-block-post-title:has(~ .entry-content .fh-booking-form-wrap) {
    display: none;
}

/* Doppel-Klasse: schlägt die Theme-Regel
   `.is-layout-constrained > :where(...)` (content-size 645 px),
   damit das Formular-Grid seinen vollen Platz bekommt. */
.fh-booking-form-wrap.fh-booking-form-wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.fh-booking-form-wrap *:focus,
.fh-booking-form-wrap *:focus-visible {
    outline: none;
}

/* ---------- Schritt 2: zweispaltiges Grid ---------- */
.fh-details-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 48px;
    align-items: start;
}

.fh-details-title {
    font: 700 32px/1.15 var(--fh-font);
    letter-spacing: -0.02em;
    color: var(--fh-ink);
    margin: 0;
}

.fh-details-lead {
    font: 400 15px/1.6 var(--fh-font);
    color: var(--fh-muted);
    max-width: 30rem;
    margin: 8px 0 0;
}

/* Ändern-Trigger: öffnet das geparkte Widget als Sheet-Overlay (per
   data-fh-open-widget-edit), kein Wegnavigieren. Button in dezenter
   Textlink-Anmutung wie Aside/Done — Browser-Button-Defaults im Scope
   neutralisiert (dreifache Kette gegen [type="button"]-Resets aus
   Themes mit gleicher Spezifität), kein Theme-Touch. */
.fh-booking-form-wrap .fh-details-change {
    max-width: 30rem;
    margin: 10px 0 0;
    font: 400 14px/1.6 var(--fh-font);
    color: var(--fh-muted);
}

.fh-booking-form-wrap .fh-details-change .fh-details-change-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--fh-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.fh-booking-form-wrap .fh-details-change .fh-details-change-btn:hover {
    background: transparent;
    color: var(--fh-ink);
}

/* ---------- Formular-Karte ---------- */
.fh-form-card {
    background: var(--fh-canvas);
    border: 1px solid var(--fh-hairline-soft);
    border-radius: var(--fh-radius-md);
    padding: 32px;
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: var(--fh-shadow);
}

.fh-field-group {
    display: block;
}

.fh-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.fh-field-row-zip {
    grid-template-columns: 130px 1fr;
}

.fh-label {
    display: block;
    font: 600 13px/1.2 var(--fh-font);
    letter-spacing: 0.01em;
    color: var(--fh-ink);
    margin-bottom: 8px;
}

.fh-req {
    color: var(--fh-primary);
}

.fh-input {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    background: var(--fh-canvas);
    border: 1px solid var(--fh-hairline);
    border-radius: var(--fh-radius-sm);
    color: var(--fh-ink);
    font: 400 15px/1.4 var(--fh-font);
    transition: border-color .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
}

.fh-input::placeholder {
    color: var(--fh-muted-soft);
    font-weight: 400;
}

.fh-input:hover {
    border-color: var(--fh-border-strong);
}

.fh-input:focus {
    border-color: var(--fh-ink);
    box-shadow: 0 0 0 2px var(--fh-ink);
}

.fh-textarea {
    height: auto;
    min-height: 88px;
    padding: 14px 16px;
    resize: vertical;
    line-height: 1.5;
}

/* ---------- DSGVO-Zeile ---------- */
.fh-gdpr {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 24px;
    cursor: pointer;
}

.fh-gdpr-box {
    margin-top: 2px;
    width: 20px;
    height: 20px;
    accent-color: var(--fh-primary);
    flex-shrink: 0;
    cursor: pointer;
}

.fh-gdpr-text {
    font: 400 13px/1.5 var(--fh-font);
    color: var(--fh-body);
}

.fh-gdpr-text strong {
    color: var(--fh-ink);
    font-weight: 600;
}

/* ---------- Submit (full-rounded primary) ---------- */
.fh-submit-wrap {
    margin-top: 28px;
    /* Luft nach unten, sonst klebt der CTA am Seitenende/Footer. */
    margin-bottom: 40px;
}

.fh-btn-submit {
    appearance: none;
    width: 100%;
    height: 52px;
    /* Einfarbig in der Markenfarbe — der frühere Gradient endete auf einem
       hartkodierten Rot und ergab bei anderen Markenfarben einen Farbverlauf. */
    background: var(--fh-primary);
    color: var(--fh-on-primary);
    border: 0;
    border-radius: var(--fh-radius-full);
    font: 600 16px/1.25 var(--fh-font);
    cursor: pointer;
    transition: opacity .15s ease, transform .1s ease;
    letter-spacing: 0.01em;
}

.fh-btn-submit:hover {
    background: var(--fh-primary-active);
    opacity: 1;
}

/* Theme-Armor für den Absenden-Button: aggressive Theme-Resets setzen auf
   :hover/:focus eigene Farben (z.B. `button:hover{background:#c36;color:#fff}`
   oder dunkle Textfarben). Doppelter Wrapper schlägt sie, ohne !important. */
.fh-booking-form-wrap.fh-booking-form-wrap .fh-btn-submit {
    background: var(--fh-primary);
    color: var(--fh-on-primary);
}

.fh-booking-form-wrap.fh-booking-form-wrap .fh-btn-submit:not([disabled]):hover,
.fh-booking-form-wrap.fh-booking-form-wrap .fh-btn-submit:not([disabled]):focus,
.fh-booking-form-wrap.fh-booking-form-wrap .fh-btn-submit:not([disabled]):focus-visible {
    background: var(--fh-primary-active);
    color: var(--fh-on-primary);
}

.fh-booking-form-wrap.fh-booking-form-wrap .fh-btn-submit[disabled] {
    background: var(--fh-primary-disabled);
    color: var(--fh-body);
}

.fh-btn-submit:active {
    transform: scale(0.985);
}

.fh-btn-submit:disabled {
    background: var(--fh-primary-disabled);
    /* Heller Disabled-Hintergrund → dunkle Schrift, sonst bei dunklen
       Markenfarben unlesbar (weiß auf hell). */
    color: var(--fh-body);
    cursor: not-allowed;
    transform: none;
    opacity: 1;
}

/* ---------- Übersichts-Karte (rechte Spalte) ---------- */
.fh-details-aside {
    position: sticky;
    top: 100px;
}

.fh-summary-card {
    background: var(--fh-canvas);
    border: 1px solid var(--fh-hairline-soft);
    border-radius: var(--fh-radius-md);
    padding: 28px;
    box-shadow: var(--fh-shadow);
}

.fh-summary-eyebrow {
    font: 600 11px/1.2 var(--fh-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fh-muted);
    margin-bottom: 18px;
}

.fh-summary-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fh-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
}

.fh-summary-key {
    color: var(--fh-muted);
}

.fh-summary-val {
    text-align: right;
    color: var(--fh-ink);
    font-weight: 500;
}

.fh-summary-strong {
    font-weight: 700;
    font-size: 16px;
}

.fh-summary-sep {
    border-top: 1px solid var(--fh-hairline-soft);
    margin: 4px 0;
}

.fh-summary-note {
    font: 400 12px/1.5 var(--fh-font);
    color: var(--fh-muted);
    margin: 16px 0 0;
}

.fh-summary-lock {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--fh-hairline-soft);
    font: 400 12px/1.4 var(--fh-font);
    color: var(--fh-muted);
}

.fh-summary-lock svg {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ---------- Schritt 3: Bestätigt (DoneStep) ---------- */
.fh-done {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.fh-done-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: var(--fh-radius-full);
    background: var(--fh-success);
    color: var(--fh-on-primary);
}

.fh-done-title {
    font: 700 32px/1.15 var(--fh-font);
    letter-spacing: -0.02em;
    color: var(--fh-ink);
    margin: 24px 0 0;
}

.fh-done-lead {
    font: 400 15px/1.6 var(--fh-font);
    color: var(--fh-body);
    margin: 12px auto 0;
    max-width: 28rem;
}

.fh-done-summary,
.fh-next {
    text-align: left;
    background: var(--fh-canvas);
    border: 1px solid var(--fh-hairline-soft);
    border-radius: var(--fh-radius-md);
    padding: 28px;
    margin-top: 32px;
    box-shadow: var(--fh-shadow);
}

.fh-next-eyebrow {
    text-align: center;
}

.fh-next-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--fh-hairline-soft);
    border-radius: var(--fh-radius-md);
    overflow: hidden;
}

.fh-next-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
}

.fh-next-row + .fh-next-row {
    border-top: 1px solid var(--fh-hairline-soft);
}

.fh-next-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--fh-radius-full);
    background: var(--fh-surface-strong);
    color: var(--fh-muted);
    font: 600 13px/1 var(--fh-font);
    flex-shrink: 0;
}

.fh-next-active .fh-next-dot {
    background: var(--fh-primary);
    color: var(--fh-on-primary);
    box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.15);
}

.fh-next-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 4px;
}

.fh-next-title {
    font: 600 14px/1.3 var(--fh-font);
    color: var(--fh-body);
}

.fh-next-active .fh-next-title {
    color: var(--fh-ink);
}

.fh-next-sub {
    font: 400 12.5px/1.5 var(--fh-font);
    color: var(--fh-muted);
}

/* Erledigte Schritte: ausgegraut/zurückgenommen, Häkchen im Punkt. */
.fh-next-done {
    opacity: 0.55;
}

.fh-next-done .fh-next-dot {
    background: var(--fh-surface-strong);
    color: var(--fh-muted);
}

.fh-next-cancelled {
    margin: 0;
    font: 400 13.5px/1.5 var(--fh-font);
    color: var(--fh-muted);
}

.fh-done-mailnote {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 400 13px/1.4 var(--fh-font);
    color: var(--fh-muted);
    margin-top: 32px;
}

.fh-done-mail {
    color: var(--fh-ink);
    font-weight: 500;
}

/* F4/F3 (+ Reload-Fix): dezente Ändern-Wege (Done-Aktionszeile + Aside) —
   erben Muted, unterstrichen wie ein Textlink, ohne neue Farbebene. Der
   Aside-Trigger ist ein Button (öffnet das Sheet-Overlay), kein Link —
   Browser-Defaults neutralisiert, Anmutung bleibt Textlink. */
.fh-done-change {
    display: block;
    margin-top: 24px;
}

.fh-done-change-link,
.fh-summary-change-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

button.fh-summary-change-link,
.fh-booking-form-wrap button.fh-summary-change-link {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.fh-done-change-link:hover,
.fh-summary-change-link:hover {
    color: var(--fh-ink);
}

button.fh-summary-change-link:hover,
.fh-booking-form-wrap button.fh-summary-change-link:hover {
    background: transparent;
}

.fh-summary-change {
    margin-top: 10px;
}

/* ---------- Notices ---------- */
.fh-notice {
    border-radius: var(--fh-radius-md);
    padding: 20px 24px;
    margin-bottom: 24px;
    border: 1px solid var(--fh-hairline);
    background: var(--fh-canvas);
}

.fh-notice strong {
    display: block;
    font: 600 16px/1.25 var(--fh-font);
    color: var(--fh-ink);
    margin-bottom: 6px;
}

.fh-notice p {
    margin: 0;
    font: 400 14px/1.5 var(--fh-font);
    color: var(--fh-body);
}

.fh-notice-error {
    border-left: 4px solid var(--fh-error);
}

.fh-notice-error strong {
    color: var(--fh-error);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 880px) {
    .fh-booking-form-wrap.fh-booking-form-wrap {
        padding: 0;
    }

    .fh-details-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* Auf Mobil: Zusammenfassung zuerst (über dem Formular), dann Formular.
       Gibt dem Benutzer sofort Kontext über seine Buchung. */
    .fh-details-aside {
        position: static;
        top: auto;
        order: -1;
        margin-bottom: 28px;
    }

    .fh-details-main {
        order: 1;
    }

    .fh-summary-card {
        box-shadow: none;
    }
}

@media (max-width: 600px) {
    /* Theme-Content-Wrapper hat eigenen Padding (30px) —
       Plugin-Padding hier auf 0, damit Felder den vollen Platz nutzen. */
    .fh-booking-form-wrap.fh-booking-form-wrap {
        padding: 0;
    }

    .fh-calendar {
        padding: 16px;
    }

    .fh-form-card {
        padding: 20px;
        border-radius: var(--fh-radius-sm);
    }

    .fh-field-row {
        grid-template-columns: 1fr;
    }

    .fh-field-row-zip {
        grid-template-columns: 100px 1fr;
    }

    .fh-details-title {
        font-size: 26px;
    }

    .fh-done-title {
        font-size: 26px;
    }

    .fh-done-summary,
    .fh-next {
        padding: 20px;
    }

    .fh-day-price {
        font-size: 10px;
    }

    .fh-cal-title {
        font-size: 18px;
    }

    .fh-summary-card {
        padding: 20px;
    }
}

/* ============================================================
   BUCHUNGS-WIDGET (Shortcode / Gutenberg / Elementor)
   ============================================================ */

/* Doppel-Klasse: schlägt die Theme-Regel
   `.is-layout-constrained > :where(...)` (gleiche Spezifität, lädt aber später)
   und hält das Widget kompakt — sonst dehnt die Theme-Content-Breite das
   Tagesraster (aspect-ratio 1/1) auf riesige Zellen. */
.fh-booking-widget-wrap.fh-booking-widget-wrap {
    max-width: 380px;
}

/* Overlay-Parkposition: das geparkte Widget (overlay_only, „Zeitraum &
   Gäste ändern" auf der Buchungsseite) liegt aus dem Fluss geparkt, bis
   .is-sheet es formatfüllend zeigt. Bewusst KEIN display:none — sonst
   könnte das Sheet nicht sichtbar werden. :not(.is-sheet) statt
   Single-Class: Die is-sheet-Regeln setzen mobil kein width — ohne den
   Ausschluss bliebe width:380px im geöffneten Vollbild stehen (statt
   formatfüllend). Mit is-sheet greift die Park-Regel gar nicht erst. */
.fh-booking-widget-wrap.fh-bw-overlay-only:not(.is-sheet) {
    position: absolute;
    left: -10000px;
    top: 0;
    width: 380px;
}

/* ============================================================
   THEME-ARMOR — neutralisiert aggressive Theme-/Framework-Button-Resets.
   Manche Themes (z.B. reset.css) setzen auf ALLE Buttons:
     button{padding:.5rem 1rem;color:#c36;font-size:1rem}
     button:hover,button:focus{background:#c36;color:#fff}
   → Nav-SVG auf 0px gequetscht, Tages-Overflow, Pink-Fill bei Hover/Fokus.
   Der Reset trifft via [type="button"]:hover mit Specificity 0,2,0 — deshalb
   armieren wir mit doppeltem Wrapper (0,2,x) und re-asserten die designten
   Button-Styles. Rein defensiv, ändert das eigene Design nicht. */
.fh-booking-widget-wrap.fh-booking-widget-wrap button {
    padding: 0;
    min-width: 0;
    font: inherit;
    color: inherit;
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
}
.fh-booking-widget-wrap.fh-booking-widget-wrap button:hover,
.fh-booking-widget-wrap.fh-booking-widget-wrap button:focus,
.fh-booking-widget-wrap.fh-booking-widget-wrap button:active {
    background-color: transparent;
    color: inherit;
}
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-field,
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-guests-toggle { padding: 10px 14px; color: var(--fh-ink); }
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-field:hover,
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-guests-toggle:hover { background-color: color-mix(in srgb, var(--fh-surface-soft) 60%, transparent); }
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-dates-reset { color: var(--fh-muted); }
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-dates-reset:hover,
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-dates-reset:focus-visible { color: var(--fh-ink); }
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-nav { background-color: var(--fh-canvas); color: var(--fh-ink); }
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-nav:hover { background-color: var(--fh-surface-soft); }
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-day { color: var(--fh-ink); }
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-day:not([disabled]):hover { background-color: var(--fh-surface-strong); }
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-day-checkin,
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-day-checkout,
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-day-inrange { background-color: var(--fh-primary); color: var(--fh-on-primary); }
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-day-checkin:not([disabled]):hover,
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-day-checkout:not([disabled]):hover,
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-day-inrange:not([disabled]):hover { background-color: var(--fh-primary-active); color: var(--fh-on-primary); }
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-step { color: var(--fh-ink); }
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-step:not([disabled]):hover { background-color: var(--fh-surface-soft); }
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-seg { padding: 11px 8px; color: var(--fh-ink); }
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-seg.is-active { background-color: var(--fh-primary); color: var(--fh-on-primary); }
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-cta { background-color: var(--fh-primary); color: var(--fh-on-primary); min-height: 44px; padding: 11px 16px; line-height: 1.25; }
/* Schriftfarbe MUSS hier mit: die Armor-Regel `…wrap.wrap button:hover` hat
   (0,3,1) und schlägt sonst `.wrap.wrap .fh-bw-cta` (0,3,0) — der Text würde
   beim Hover auf `inherit` (dunkles --fh-ink) fallen, auf dunklem Button also
   unlesbar. Gleiches gilt für alle gefüllten Buttons unten. */
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-cta:not([disabled]):hover { background-color: var(--fh-primary-active); color: var(--fh-on-primary); }
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-cta:focus,
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-cta:focus-visible { color: var(--fh-on-primary); }
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-seg.is-active:hover,
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-seg.is-active:focus { background-color: var(--fh-primary); color: var(--fh-on-primary); }
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-cta[disabled] { background-color: var(--fh-primary-disabled); color: var(--fh-body); }

.fh-booking-widget-wrap *:focus,
.fh-booking-widget-wrap *:focus-visible {
    outline: none;
}

.fh-booking-widget-wrap .fh-error {
    color: var(--fh-error);
    font-size: 14px;
}

.fh-bw-card {
    background: var(--fh-canvas);
    border: 1px solid var(--fh-hairline);
    border-radius: var(--fh-radius-md);
    overflow: hidden;
    box-shadow: var(--fh-shadow);
}

.fh-bw-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--fh-hairline-soft);
    background: color-mix(in srgb, var(--fh-surface-soft) 50%, transparent);
}

.fh-bw-head-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fh-muted);
}

.fh-bw-head-price {
    font-size: 12px;
    color: var(--fh-muted);
}

.fh-bw-head-price strong {
    color: var(--fh-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Vorab-Abfrage Haustier (nur Kombi-Widget): 3-Wege-Schalter erlaubt/frei/egal. */
.fh-bw-prestep {
    margin: 14px 16px 0;
    padding: 14px 16px;
    border: 1px solid var(--fh-hairline);
    border-radius: var(--fh-radius-md);
    background: color-mix(in srgb, var(--fh-surface-soft) 50%, transparent);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fh-bw-prestep-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fh-bw-prestep-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--fh-ink);
}
/* Drei gleich breite Segmente (erlaubt/haustierfrei/egal) im Grid. */
.fh-bw-segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.fh-bw-seg {
    padding: 11px 8px;
    border: 1px solid var(--fh-hairline);
    border-radius: var(--fh-radius-full);
    background: var(--fh-canvas);
    color: var(--fh-ink);
    font-family: var(--fh-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .1s ease;
}
.fh-bw-seg:hover { border-color: var(--fh-border-strong); }
.fh-bw-seg:active { transform: scale(0.97); }
.fh-bw-seg.is-active {
    border-color: var(--fh-primary);
    background: var(--fh-primary);
    color: var(--fh-on-primary);
}

.fh-bw-selector {
    margin: 14px 16px 0;
    border: 1px solid var(--fh-hairline);
    border-radius: var(--fh-radius-md);
    overflow: hidden;
}

.fh-bw-dates {
    display: grid;
    /* Dritte Spalte fest 44px breit — eigene Spalte statt geklautem Feld-
       Padding: Anreise/Abreise behalten ihr normales Padding, der Platz für
       das Reset-„x" bleibt beim Ein-/Ausblenden immer reserviert (die
       Spaltenbreite ist Teil der Grid-Definition, unabhängig davon, ob die
       Spalte gerade ein sichtbares Kind enthält). */
    grid-template-columns: 1fr 1fr 44px;
}

.fh-bw-dates .fh-bw-field + .fh-bw-field {
    border-left: 1px solid var(--fh-hairline);
}

.fh-bw-dates-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
}

.fh-bw-dates-reset[hidden] { display: none; }

.fh-bw-dates-reset:focus-visible {
    box-shadow: inset 0 0 0 2px var(--fh-primary);
}

.fh-bw-field,
.fh-bw-guests-toggle {
    display: block;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.fh-bw-guests-toggle {
    border-top: 1px solid var(--fh-hairline);
}

.fh-bw-field:hover,
.fh-bw-guests-toggle:hover {
    background: color-mix(in srgb, var(--fh-surface-soft) 60%, transparent);
}

.fh-bw-field-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fh-muted);
    margin-bottom: 2px;
}

.fh-bw-field-value {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--fh-ink);
    font-variant-numeric: tabular-nums;
}

/* Edit-Modus: Das Datumsfeld, dessen Endpunkt gerade geändert wird, trägt
   .is-editing (JS-Toggle in renderFields) — inset-Ring in der Markenfarbe,
   keine Layout-Verschiebung. */
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-field.is-editing {
    background-color: color-mix(in srgb, var(--fh-primary) 8%, transparent);
    box-shadow: inset 0 0 0 2px var(--fh-primary);
}

/* --- Popover (Kalender / Gäste) --- */
.fh-bw-popover {
    border-top: 1px solid var(--fh-hairline);
    background: var(--fh-canvas);
}

.fh-bw-popover[hidden] {
    display: none;
}

.fh-bw-cal-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px;
}

.fh-bw-cal-title {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fh-bw-nav {
    height: 32px;
    width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fh-hairline);
    border-radius: var(--fh-radius-full);
    background: var(--fh-canvas);
    color: var(--fh-ink);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.fh-bw-nav:hover {
    background: var(--fh-surface-soft);
}

.fh-bw-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 0 12px 6px;
}

.fh-bw-wd {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--fh-muted);
    padding-bottom: 4px;
}

.fh-bw-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border: 0;
    background: transparent;
    border-radius: var(--fh-radius-sm);
    cursor: pointer;
    color: var(--fh-ink);
    font-family: inherit;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.fh-bw-day-empty {
    cursor: default;
}

.fh-bw-day-num {
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.fh-bw-day-price {
    font-size: 9px;
    color: var(--fh-muted);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* ---------- Verfügbarkeits-Punkt (wie im Backend-Kalender) ----------
   Absolut positioniert, damit er die Zell-Höhe und das Zahl/Preis-Layout
   nicht verschiebt. Rein unterstützend: Buchbarkeit erkennt man weiterhin
   am deaktivierten Zustand, der Punkt ergänzt nur die Auslastung. */
.fh-bw-day-dot {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    pointer-events: none;
}

.fh-bw-day-dot--free    { background: var(--fh-success); }
.fh-bw-day-dot--partial { background: #9ca3af; }
.fh-bw-day-dot--full    { background: var(--fh-error); }

/* Tage MIT Preis: Punkt nach unten setzen, sonst überlagert er den Preis. */
.fh-bw-day:has(.fh-bw-day-price) .fh-bw-day-dot {
    bottom: 2px;
}

/* Auf gefüllten Zuständen (Auswahl/Range) würde der farbige Punkt mit der
   Markenfarbe kollidieren — dort neutral in der Vordergrundfarbe. */
.fh-bw-day-checkin .fh-bw-day-dot,
.fh-bw-day-checkout .fh-bw-day-dot,
.fh-bw-day-inrange .fh-bw-day-dot {
    background: currentColor;
    opacity: 0.55;
}

/* Belegter Punkt in voller Farbe — gedämpft wirkte er lachs-orange und damit
   wie ein dritter Zustand, obwohl er dasselbe meint wie „Belegt" in der Legende.
   Der Tag selbst ist ohnehin durchgestrichen und ausgegraut. */
.fh-bw-day-blocked .fh-bw-day-dot {
    opacity: 1;
}

/* ---------- Legende unter dem Kalender ----------
   Seitlich bündig zum Tages-Raster (dort 12px Innenabstand). */
.fh-bw-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    /* Abstand Raster → Trennlinie = Abstand Trennlinie → Kalenderkopf
       (`.fh-bw-cal-bar` padding-top). Sonst sitzt das Raster unten enger als
       oben und der Kalender wirkt nach unten gerutscht. */
    margin: 14px 12px 0;
    /* Oben und unten gleich viel Luft — sonst klebt die Legende am nächsten Block. */
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid var(--fh-hairline-soft);
}

.fh-bw-cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 400 12px/1.3 var(--fh-font);
    color: var(--fh-muted);
}

.fh-bw-cal-legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fh-bw-day:not([disabled]):hover {
    background: var(--fh-surface-soft);
}

.fh-bw-day[disabled] {
    cursor: not-allowed;
    color: var(--fh-muted-soft);
}

.fh-bw-day-past {
    color: var(--fh-hairline);
}

.fh-bw-day-blocked .fh-bw-day-num {
    text-decoration: line-through;
}

/* Belegte Nacht, aber als Abreisetag wählbar: der Gast reist morgens ab, die
   Nacht gehört bereits dem nächsten Gast. Diagonale zeigt genau das — obere
   Hälfte (Vormittag) frei, untere Hälfte (Nacht) belegt. */
.fh-bw-day-checkout-only {
    background-image: linear-gradient(135deg,
        var(--fh-canvas) 0 49%,
        var(--fh-surface-strong) 51% 100%);
    cursor: pointer;
}

.fh-bw-day-checkout-only:hover {
    background-image: linear-gradient(135deg,
        var(--fh-surface-soft) 0 49%,
        var(--fh-surface-strong) 51% 100%);
}

/* Als Abreise gewählt → volle Markenfläche, keine Diagonale mehr. */
.fh-bw-day-checkout.fh-bw-day-checkout-only,
.fh-bw-day-checkout.fh-bw-day-checkout-only:hover {
    background-image: none;
}

.fh-bw-day-preview {
    background: color-mix(in srgb, var(--fh-primary) 10%, transparent);
}

.fh-bw-day-inrange,
.fh-bw-day-checkin,
.fh-bw-day-checkout {
    background: var(--fh-primary);
    color: var(--fh-on-primary);
}

.fh-bw-day-inrange .fh-bw-day-price,
.fh-bw-day-checkin .fh-bw-day-price,
.fh-bw-day-checkout .fh-bw-day-price {
    color: color-mix(in srgb, var(--fh-on-primary) 80%, transparent);
}

.fh-bw-day-inrange:not([disabled]):hover,
.fh-bw-day-checkin:not([disabled]):hover,
.fh-bw-day-checkout:not([disabled]):hover {
    background: var(--fh-primary-active);
}

/* --- Gäste-Stepper --- */
.fh-bw-guests-list {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fh-bw-guest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fh-bw-guest-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--fh-ink);
}

.fh-bw-guest-sub {
    display: block;
    font-size: 12px;
    color: var(--fh-muted);
}

.fh-bw-stepper {
    display: inline-flex;
    align-items: stretch;
    height: 36px;
    border: 1px solid var(--fh-hairline);
    border-radius: var(--fh-radius-md);
    background: var(--fh-canvas);
}

.fh-bw-step {
    width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--fh-ink);
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.fh-bw-step:first-child { border-radius: var(--fh-radius-md) 0 0 var(--fh-radius-md); }
.fh-bw-step:last-child  { border-radius: 0 var(--fh-radius-md) var(--fh-radius-md) 0; }

.fh-bw-step:not([disabled]):hover {
    background: var(--fh-surface-soft);
}

.fh-bw-step[disabled] {
    color: var(--fh-hairline);
    cursor: not-allowed;
}

.fh-bw-step-val {
    width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--fh-hairline);
    border-right: 1px solid var(--fh-hairline);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fh-bw-guests-cap {
    margin: 0;
    padding: 0 16px 14px;
    font-size: 12px;
    color: var(--fh-muted);
}

/* --- CTA + Summary --- */
.fh-bw-cta-wrap {
    padding: 14px 16px 16px;
}

.fh-bw-cta {
    width: 100%;
    /* Feste Höhe würde längere Lade-Texte oben/unten abschneiden — mitwachsen
       lassen und über Padding gleichmäßig Luft geben. */
    min-height: 44px;
    padding: 11px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--fh-radius-full);
    background: var(--fh-primary);
    color: var(--fh-on-primary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.fh-bw-cta:not([disabled]):hover {
    background: var(--fh-primary-active);
}

.fh-bw-cta:not([disabled]):active {
    transform: scale(0.98);
}

.fh-bw-cta[disabled] {
    background: var(--fh-primary-disabled);
    /* Der disabled-Hintergrund ist hell → NICHT die weiße on-primary-Schrift
       nutzen (bei dunklen Markenfarben unsichtbar), sondern gedämpftes Dunkel. */
    color: var(--fh-body);
    cursor: not-allowed;
}

.fh-bw-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 12px;
    color: var(--fh-muted);
    font-variant-numeric: tabular-nums;
}

.fh-bw-summary[hidden] {
    display: none;
}

.fh-bw-summary-total {
    font-weight: 600;
    color: var(--fh-ink);
}

.fh-bw-summary-loading {
    color: var(--fh-muted);
    font-style: italic;
}

.fh-bw-summary-note {
    flex-basis: 100%;
    margin-top: 4px;
    color: var(--fh-muted);
    font-size: 11px;
}

/* --- Preisanfrage-Formular (frei, aber ohne Preis / no_price) ---
   Nutzt dieselben Token und Typo-Stufen wie Selector, CTA und Summary. */
.fh-booking-widget-wrap .fh-bw-request {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--fh-hairline-soft);
}

.fh-booking-widget-wrap .fh-bw-request[hidden] {
    display: none;
}

.fh-booking-widget-wrap .fh-bw-request-eyebrow {
    margin: 0 0 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fh-muted);
}

.fh-booking-widget-wrap .fh-bw-request-hint {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--fh-muted);
}

.fh-booking-widget-wrap .fh-bw-request-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fh-booking-widget-wrap .fh-bw-request-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.fh-booking-widget-wrap .fh-bw-request-field {
    display: block;
    min-width: 0;
}

.fh-booking-widget-wrap .fh-bw-request-label {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fh-muted);
}

.fh-booking-widget-wrap .fh-bw-request-input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    box-sizing: border-box;
    background: var(--fh-canvas);
    border: 1px solid var(--fh-hairline);
    border-radius: var(--fh-radius-sm);
    color: var(--fh-ink);
    font-family: inherit;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.fh-booking-widget-wrap .fh-bw-request-input:hover {
    border-color: var(--fh-border-strong);
}

.fh-booking-widget-wrap .fh-bw-request-input:focus {
    border-color: var(--fh-ink);
    box-shadow: 0 0 0 2px var(--fh-ink);
}

.fh-booking-widget-wrap .fh-bw-request-submit {
    width: 100%;
    margin-top: 2px;
}

/* Bestätigungs-Toast nach Preisanfrage-Submit (?fh_request=sent) —
   In-Flow-Block über dem CTA, baut sich per JS selbst ab. Das Widget
   bleibt darunter voll bedienbar. */
.fh-booking-widget-wrap .fh-bw-toast {
    margin: 0 0 10px;
    padding: 10px 14px;
    border-radius: var(--fh-radius-sm);
    background: var(--fh-ink);
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    box-shadow: var(--fh-shadow);
}

.fh-booking-widget-wrap .fh-bw-toast[hidden] {
    display: none;
}

/* F2: „Angaben ändern" im Bestätigungs-Toast — Textlink auf dunklem Grund. */
.fh-booking-widget-wrap .fh-bw-toast-edit {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-toast-edit:hover,
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-toast-edit:focus-visible {
    background-color: transparent;
    color: inherit;
    opacity: 0.8;
}

.fh-bw-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--fh-muted);
    text-align: center;
}

.fh-bw-note svg {
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .fh-booking-widget-wrap {
        max-width: 100%;
    }

    /* Die reservierte 44px-Spalte fürs Reset-„x" lässt auf schmalen
       Screens lange Datumswerte („23. September") umbrechen — seitliches
       Padding der Datumsfelder wird hier gezielt verringert, um den
       Platz zurückzugewinnen. Oben/unten bleibt unverändert (auch im
       Vollbild-Modus, dort setzt `.is-sheet .fh-bw-field` 16px — deshalb
       `.fh-bw-dates.fh-bw-dates`, eine Klasse mehr als jede bestehende
       Padding-Regel, damit diese unabhängig von Quellreihenfolge gewinnt). */
    .fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-dates.fh-bw-dates .fh-bw-field {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ============================================================
   Lade-Sequenzen — Preisabruf-Animation im Buchungs-Widget
   Der Orchestrator weist Text + Icon-Klasse zu; hier leben nur
   Basis-Look und Animationen. Prefix "fhbw" gegen Kollisionen.
   ============================================================ */

.fh-bw-load {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: inherit;
    font: inherit;
    /* Theme vererbt eine große line-height (z.B. 30.8px) → der Inhalt wurde höher
       als der Button und saß sichtbar außermittig. */
    line-height: 1.25;
}

.fh-bw-load-text {
    line-height: 1.25;
}

/* Während der Lade-Sequenz den CTA-Pfeil ausblenden — sonst sitzt der Inhalt
   sichtbar außermittig (Icon + Text + Pfeil). */
.fh-bw-cta.is-loading .fh-bw-cta-icon {
    display: none;
}

.fh-bw-load-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: var(--fh-primary);
    transform-origin: center;
}

.fh-bw-load-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.fh-bw-load-icon--spinner  { animation: fhbwSpin 1s linear infinite; }
.fh-bw-load-icon--sun      { animation: fhbwSunPulse 3s ease-in-out infinite; }
.fh-bw-load-icon--cloud    { animation: fhbwDrift 3.2s ease-in-out infinite; }
.fh-bw-load-icon--suitcase { animation: fhbwBounce 1.8s ease-in-out infinite; }
.fh-bw-load-icon--key      { animation: fhbwWiggle 2.4s ease-in-out infinite; }
.fh-bw-load-icon--house    { animation: fhbwPulse 2.6s ease-in-out infinite; }
.fh-bw-load-icon--map      { animation: fhbwFloat 3s ease-in-out infinite; }
.fh-bw-load-icon--clock    { animation: fhbwSpin 6s linear infinite; }

.fh-bw-load-text {
    animation: fhbwTextFade 0.4s ease;
}

@keyframes fhbwSpin {
    to { transform: rotate(360deg); }
}

@keyframes fhbwSunPulse {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
    50%      { transform: scale(1.12) rotate(20deg); opacity: 1; }
}

@keyframes fhbwDrift {
    0%, 100% { transform: translateX(-2px); }
    50%      { transform: translateX(2px); }
}

@keyframes fhbwBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

@keyframes fhbwWiggle {
    0%, 100% { transform: rotate(-8deg); }
    50%      { transform: rotate(8deg); }
}

@keyframes fhbwPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}

@keyframes fhbwFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-3px) rotate(2deg); }
}

@keyframes fhbwTextFade {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .fh-bw-load-icon--spinner,
    .fh-bw-load-icon--sun,
    .fh-bw-load-icon--cloud,
    .fh-bw-load-icon--suitcase,
    .fh-bw-load-icon--key,
    .fh-bw-load-icon--house,
    .fh-bw-load-icon--map,
    .fh-bw-load-icon--clock,
    .fh-bw-load-text {
        animation: none !important;
    }
}

/* ============================================================
   MOBILE STICKY-BUCHUNGSLEISTE  [fh_booking_bar]
   ============================================================
   Fixiert am unteren Rand, spiegelt den Preis des Buchungs-Widgets.
   Standard: nur unter 768 px. `--fh-bar-space` setzt booking-bar.js auf die
   gemessene Höhe, damit der Seitenfuß nicht unter der Leiste verschwindet. */

.fh-booking-bar-wrap {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    background: var(--fh-canvas);
    border-top: 1px solid var(--fh-hairline);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.10);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    transform: translateY(0);
    transition: transform .22s ease, opacity .22s ease;
}

/* Theme-Armor: Blockthemes klemmen direkte Kinder von `.entry-content` per
   `max-width: <content-size>` + `margin-inline: auto !important` auf die
   Inhaltsbreite — die fixierte Leiste hing dadurch als schwebender Balken
   mittig über dem Seitenfuß statt an den Bildschirmrändern. Mit `max-width:
   none` bleibt `width: auto` bei `left/right: 0`, und Auto-Margins rechnen
   sich für absolut positionierte Boxen zu 0. */
.fh-booking-bar-wrap.fh-booking-bar-wrap {
    max-width: none;
}

@media (max-width: 767px) {
    .fh-booking-bar-wrap { display: block; }
}

.fh-booking-bar-wrap.fh-bb--desktop { display: block; }

/* Widget selbst im Blick → Leiste weg, sonst konkurrieren zwei CTAs. */
.fh-booking-bar-wrap.is-covered {
    transform: translateY(105%);
    opacity: 0;
    pointer-events: none;
}

/* Platz am Seitenende freihalten — als Spacer statt body-padding, damit ein
   vom Theme gesetztes padding-bottom erhalten bleibt. */
body:has(.fh-booking-bar-wrap)::after {
    content: "";
    display: block;
    height: var(--fh-bar-space, 0px);
}

.fh-bb {
    display: flex;
    align-items: center;
    gap: 14px;
}

.fh-bb-info {
    flex: 1 1 auto;
    min-width: 0;
}

.fh-bb-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.fh-bb-price-value {
    font: 700 19px/1.2 var(--fh-font);
    color: var(--fh-ink);
    font-variant-numeric: tabular-nums;
}

.fh-bb-price-meta {
    font: 400 13px/1.3 var(--fh-font);
    color: var(--fh-muted);
    font-variant-numeric: tabular-nums;
}

.fh-booking-bar-wrap.is-unavailable .fh-bb-price-value { color: var(--fh-error); }

/* „Daten ändern" neben dem Preis — Textlink-Anmutung. Theme-Button-Resets
   (Padding, Füllung, Farbe bei Hover/Fokus) per doppeltem Wrapper
   überstimmt; [hidden] explizit, weil ein Theme-`display` es sonst schlägt. */
.fh-booking-bar-wrap.fh-booking-bar-wrap .fh-bb-edit {
    margin: 0;
    padding: 4px 0;
    min-height: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--fh-ink);
    font: 600 13px/1.3 var(--fh-font);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.fh-booking-bar-wrap.fh-booking-bar-wrap .fh-bb-edit[hidden] { display: none; }

.fh-booking-bar-wrap.fh-booking-bar-wrap .fh-bb-edit:hover,
.fh-booking-bar-wrap.fh-booking-bar-wrap .fh-bb-edit:focus,
.fh-booking-bar-wrap.fh-booking-bar-wrap .fh-bb-edit:focus-visible {
    background: none;
    color: var(--fh-ink);
    outline: none;
}

.fh-booking-bar-wrap.fh-booking-bar-wrap .fh-bb-edit:focus-visible {
    box-shadow: 0 0 0 2px var(--fh-primary);
}

/* Ladezustand: dezentes Pulsieren statt Spinner — die Zahl springt sonst. */
.fh-booking-bar-wrap.is-loading .fh-bb-price-value {
    color: var(--fh-muted);
    animation: fhbb-pulse 1.2s ease-in-out infinite;
}

@keyframes fhbb-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

.fh-bb-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    font: 400 12px/1.35 var(--fh-font);
    color: var(--fh-muted);
}

.fh-bb-note svg {
    flex-shrink: 0;
    color: var(--fh-success);
}

/* Theme-Armor: aggressive Theme-Resets auf <button> per doppeltem Wrapper
   überstimmen — inklusive `color` in :hover/:focus, sonst kippt die Schrift
   auf gefülltem Grund in die geerbte (dunkle) Farbe. */
.fh-booking-bar-wrap.fh-booking-bar-wrap .fh-bb-cta {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 26px;
    border: 0;
    border-radius: var(--fh-radius-full);
    background: var(--fh-primary);
    color: var(--fh-on-primary);
    font: 600 16px/1.2 var(--fh-font);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease;
}

/* Dunkler nur bei Hover/Tastatur-Fokus — nach einem Tap bliebe die Fläche
   sonst dauerhaft dunkel. `color` wird auch bei reinem :focus neu gesetzt,
   sonst zieht der Theme-Reset die Schrift auf die geerbte dunkle Farbe. */
.fh-booking-bar-wrap.fh-booking-bar-wrap .fh-bb-cta:not([disabled]):hover,
.fh-booking-bar-wrap.fh-booking-bar-wrap .fh-bb-cta:not([disabled]):focus-visible {
    background: var(--fh-primary-active);
}

.fh-booking-bar-wrap.fh-booking-bar-wrap .fh-bb-cta:focus,
.fh-booking-bar-wrap.fh-booking-bar-wrap .fh-bb-cta:focus-visible {
    color: var(--fh-on-primary);
    outline: none;
}

.fh-booking-bar-wrap.fh-booking-bar-wrap .fh-bb-cta:focus-visible {
    box-shadow: 0 0 0 3px var(--fh-canvas), 0 0 0 5px var(--fh-primary);
}

.fh-booking-bar-wrap.fh-booking-bar-wrap .fh-bb-cta[disabled] {
    background: var(--fh-primary-disabled);
    color: var(--fh-body);
    cursor: not-allowed;
}

/* Gestapelt (Vorlage): Preiszeile oben, Button über die volle Breite. */
.fh-bb--stacked .fh-bb {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.fh-booking-bar-wrap.fh-bb--stacked.fh-bb--stacked .fh-bb-cta {
    width: 100%;
    min-height: 52px;
}

/* Desktop-Variante (`desktop="1"`): die Leiste selbst läuft weiter über die
   ganze Breite, ihr Inhalt aber nicht — ein CTA über 1900 px liest sich nicht
   als Button, sondern als Fehler. Inhalt auf Lesebreite zentriert und immer
   nebeneinander; „stacked" ist eine Telefon-Form.
   Muss NACH den Stacked-Regeln stehen: gleiche Spezifität, Media Query zählt
   dafür nicht. */
@media (min-width: 768px) {
    .fh-booking-bar-wrap.fh-bb--desktop .fh-bb {
        max-width: 1120px;
        margin-inline: auto;
        flex-direction: row;
        align-items: center;
        gap: 24px;
    }

    .fh-booking-bar-wrap.fh-bb--desktop.fh-bb--desktop .fh-bb-cta {
        width: auto;
        min-width: 220px;
    }
}

/* ============================================================
   VOLLBILD-MODUS DES BUCHUNGS-WIDGETS  (.is-sheet)
   ============================================================
   Wird von der mobilen Sticky-Leiste geöffnet. Bewusst DASSELBE Widget,
   nur formatfüllend — eine zweite Kalender-Oberfläche müsste Verfügbarkeit,
   Belegungsgrenzen und Preislogik doppeln. Die Popover sind ohnehin im
   Fluss (kein absolutes Positioning), deshalb reicht der Wrapper-Umbau. */

.fh-bw-sheet-head { display: none; }

/* Doppelter Wrapper-Selektor: die Breitenbegrenzung des Widgets steht selbst
   auf `.fh-booking-widget-wrap.fh-booking-widget-wrap` — ohne gleiche
   Spezifität bliebe die Vollbild-Box auf 380 px geklemmt. `max-width: none`
   lässt zugleich WordPress' `margin-inline: auto !important` (Layout-CSS der
   Blockthemes) ins Leere laufen: bei `width: auto` mit inset-0 rechnen sich
   Auto-Margins zu 0. */
.fh-booking-widget-wrap.fh-booking-widget-wrap.is-sheet {
    position: fixed;
    inset: 0;
    z-index: 9995;
    max-width: none;
    padding: 0 0 24px;
    background: var(--fh-canvas);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.fh-booking-widget-wrap.is-sheet .fh-bw-sheet-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--fh-canvas);
    border-bottom: 1px solid var(--fh-hairline);
}

.fh-bw-sheet-title {
    font: 600 16px/1.2 var(--fh-font);
    color: var(--fh-ink);
}

.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--fh-radius-full);
    background: var(--fh-surface-soft);
    color: var(--fh-ink);
    cursor: pointer;
}

.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-sheet-close:hover,
.fh-booking-widget-wrap.fh-booking-widget-wrap .fh-bw-sheet-close:focus {
    background: var(--fh-surface-strong);
    color: var(--fh-ink);
}

/* Randlos: Im Vollbild ist die Karte der Bildschirm, kein Objekt darauf. */
.fh-booking-widget-wrap.is-sheet .fh-bw-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.fh-booking-widget-wrap.is-sheet .fh-bw-head { display: none; }

/* Der CTA (mit der Ladesequenz) bleibt am unteren Rand erreichbar, ohne dass
   man nach dem Ausfüllen erst zurückscrollen muss. */
.fh-booking-widget-wrap.is-sheet .fh-bw-cta-wrap {
    position: sticky;
    bottom: 0;
    background: var(--fh-canvas);
    border-top: 1px solid var(--fh-hairline);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* Mehr Luft im Vollbild: Im Seitenfluss ist die Karte kompakt gehalten, auf
   dem ganzen Bildschirm klebten Legende, Trennlinie und Gäste-Block dadurch
   aneinander. Nur hier aufgeweitet — die Inline-Karte bleibt wie gehabt.
   Vierfache Klassenkette, weil die Grundwerte auf dem doppelten Wrapper
   liegen (Theme-Armor) und sonst gleich spezifisch wären. */
.fh-booking-widget-wrap.fh-booking-widget-wrap.is-sheet .fh-bw-field,
.fh-booking-widget-wrap.fh-booking-widget-wrap.is-sheet .fh-bw-guests-toggle {
    padding: 16px;
}

/* Gleiche Regel wie inline, nur auf die Vollbild-Ränder gezogen: 14 px über
   der Trennlinie wie über dem Kalenderkopf, Legenden-Padding oben = unten. */
.fh-booking-widget-wrap.is-sheet .fh-bw-cal-legend {
    margin: 14px 16px 0;
    padding-top: 14px;
    padding-bottom: 14px;
}

.fh-booking-widget-wrap.is-sheet .fh-bw-guests-cap {
    padding: 4px 16px 20px;
}

.fh-booking-widget-wrap.is-sheet .fh-bw-guest-row {
    padding-block: 6px;
}

/* Die Sticky-Leiste liegt unter dem Vollbild — beide gleichzeitig wären zwei
   konkurrierende CTAs. */
body.fh-sheet-open .fh-booking-bar-wrap { display: none; }

/* Auf dem Desktop ist „formatfüllend" die falsche Form: der Kalender zieht
   seine sieben 1fr-Spalten dann über die ganze Bildschirmbreite auseinander.
   Ab 768 px deshalb als zentrierter Dialog in Widget-Breite, mit Abdunkler
   dahinter — Inhalt und Bedienung bleiben identisch. */
@media (min-width: 768px) {
    .fh-booking-widget-wrap.fh-booking-widget-wrap.is-sheet {
        inset: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(420px, calc(100vw - 48px));
        max-height: min(86vh, 780px);
        padding-bottom: 0;
        border: 1px solid var(--fh-hairline);
        border-radius: var(--fh-radius-md);
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
    }

    /* Ohne Safe-Area-Zuschlag säße die Hinweiszeile sonst auf der Dialogkante. */
    .fh-booking-widget-wrap.is-sheet .fh-bw-cta-wrap {
        padding-bottom: 16px;
    }

    body.fh-sheet-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 9994;
        background: rgba(0, 0, 0, 0.45);
    }
}