/* ============================================================
   BRUTALIST EDITORIAL — Haberschlacht Guest House
   ──────────────────────────────────────────────
   Honest materials. Bold structure. No apologies.

   Inspired by Swiss grid design and German editorial print.
   Wine-country craft expressed through typography and space —
   not gradient glow, not glass morphism, not bubble UI.

   Palette: Warm paper, deep forest ink, gold accent.
   Cards: Hard borders. Offset shadow on hover.
   Buttons: Flat. Bold. React with shift + shadow.
   No blur. No gradients. No visual noise.
   ============================================================ */


/* ==================================================
   1. DESIGN TOKENS — EARTHY BRUTALIST PALETTE
   ================================================== */
:root {
    /* ── Core ink & paper ── */
    --brut-ink:           #0d1110;
    --brut-paper:         #f2efe8;
    --brut-paper-dark:    #e8e4db;
    --brut-card:          #fdfcf8;
    --brut-soft:          #eae6dd;

    /* ── Forest greens ── */
    --brut-forest:        #1a3c34;
    --brut-sage:          #2f6f61;
    --brut-sage-mid:      #3d8a79;
    --brut-sage-light:    #6aab9c;
    --brut-sage-pale:     #f5ede0;

    /* ── Gold accent ── */
    --brut-gold:          #b8893a;
    --brut-gold-pale:     #f5ede0;

    /* ── Dark block (metrics strip, CTA, page headers) ── */
    /* Light mode: matches exact logo green #2f6f61 */
    --brut-block:         #2f6f61;
    --brut-block-mid:     #256056;

    /* ── Border rules ── */
    --brut-rule:          rgba(13, 17, 16, 0.22);
    --brut-rule-mid:      rgba(13, 17, 16, 0.14);
    --brut-rule-soft:     rgba(13, 17, 16, 0.07);
    --brut-border-w:      1.5px;
    --brut-border-bold:   3px;

    /* ── Override all theme tokens ── */
    --primary:            #1a3c34;
    --primary-light:      #3d8a79;
    --primary-dark:       #0f2820;
    --primary-50:         rgba(26, 60, 52, 0.06);
    --primary-100:        rgba(26, 60, 52, 0.10);
    --primary-200:        rgba(26, 60, 52, 0.18);
    --primary-color:      #1a3c34;

    --gold:               #b8893a;
    --gold-light:         #d4a85a;
    --gold-dark:          #8a6428;
    --gold-50:            rgba(184, 137, 58, 0.06);
    --accent-color:       #b8893a;

    --bg-primary:         #f2efe8;
    --bg-secondary:       #eae6dd;
    --bg-tertiary:        #e0dbd1;
    --bg-elevated:        #ffffff;
    --background-color:   #f2efe8;
    --background-gradient: #f2efe8;

    --surface:            #ffffff;
    --surface-elevated:   #ffffff;
    --surface-hover:      #f2efe8;
    --accent-bg:          #eae6dd;
    --secondary-bg:       #eae6dd;
    --hover-bg:           #e0dbd1;

    --text-primary:       #0d1110;
    --text-secondary:     #2c3830;
    --text-tertiary:      #4a5754;
    --text-muted:         #6a7a76;
    --text-color:         #0d1110;
    --text-light:         #2c3830;
    --text-inverse:       #ffffff;

    --card-bg:            #ffffff;
    --card-bg-hover:      #f8f6f0;

    --border-color:       rgba(13, 17, 16, 0.14);
    --border-subtle:      rgba(13, 17, 16, 0.07);
    --border-light:       rgba(13, 17, 16, 0.10);
    --border-medium:      rgba(13, 17, 16, 0.20);

    /* Kill all soft luxury shadows — use hard offset borders instead */
    --shadow-xs:          none;
    --shadow-sm:          none;
    --shadow-md:          none;
    --shadow-lg:          none;
    --shadow-xl:          none;
    --shadow-gold:        none;
    --shadow-card:        none;
    --shadow-card-hover:  none;
    --card-shadow:        none;
    --card-shadow-hover:  none;

    --header-bg:          #ffffff;
    --footer-bg:          var(--brut-block);
}


/* ── DARK MODE ── */
[data-theme="dark"] {
    --brut-ink:           #f0ece4;
    --brut-paper:         #0b1009;
    --brut-paper-dark:    #0f1610;
    --brut-card:          #131c18;
    --brut-soft:          #182219;

    --brut-forest:        #4ca899;
    --brut-sage:          #3d8a79;
    --brut-sage-mid:      #2f6f61;
    --brut-sage-pale:     rgba(76, 168, 153, 0.09);

    --brut-gold:          #d4a85a;
    --brut-gold-pale:     rgba(212, 168, 90, 0.08);

    --brut-block:         #0d2218;
    --brut-block-mid:     #12291e;

    --brut-muted:          #8a9690;
    --brut-rule:          rgba(240, 236, 228, 0.16);
    --brut-rule-mid:      rgba(240, 236, 228, 0.10);
    --brut-rule-soft:     rgba(240, 236, 228, 0.06);

    --primary:            #4ca899;
    --primary-light:      #6aab9c;
    --primary-dark:       #2f6f61;
    --primary-50:         rgba(76, 168, 153, 0.08);
    --primary-100:        rgba(76, 168, 153, 0.12);
    --primary-200:        rgba(76, 168, 153, 0.22);
    --primary-color:      #4ca899;

    --gold:               #d4a85a;
    --gold-light:         #e8c070;
    --gold-dark:          #b8893a;
    --accent-color:       #d4a85a;

    --bg-primary:         #0b1009;
    --bg-secondary:       #0f1610;
    --bg-tertiary:        #141e18;
    --bg-elevated:        #131c18;
    --background-color:   #0b1009;
    --background-gradient: #0b1009;

    --surface:            #131c18;
    --surface-elevated:   #182219;
    --surface-hover:      #1e2b22;
    --accent-bg:          #182219;
    --secondary-bg:       #131c18;
    --hover-bg:           #1e2b22;

    --text-primary:       #f0ece4;
    --text-secondary:     #c0bdb5;
    --text-tertiary:      #8a9590;
    --text-muted:         #6a7a76;
    --text-color:         #f0ece4;
    --text-light:         #c0bdb5;
    --text-inverse:       #ffffff;

    --card-bg:            #131c18;
    --card-bg-hover:      #1e2b22;
    --border-color:       rgba(240, 236, 228, 0.12);
    --border-subtle:      rgba(240, 236, 228, 0.06);
    --border-light:       rgba(240, 236, 228, 0.09);
    --border-medium:      rgba(240, 236, 228, 0.18);

    --shadow-xs:          none;
    --shadow-sm:          none;
    --shadow-md:          none;
    --shadow-lg:          none;
    --shadow-xl:          none;
    --shadow-card:        none;
    --shadow-card-hover:  none;
    --card-shadow:        none;
    --card-shadow-hover:  none;

    --header-bg:          #131c18;
    --footer-bg:          var(--brut-block);
}


/* ==================================================
   2. BASE — BODY & BACKGROUND
   ================================================== */
body {
    background-color: var(--brut-paper) !important;
    color: var(--brut-ink) !important;
}
[data-theme="dark"] body,
[data-theme="dark"] {
    background-color: var(--brut-paper) !important;
    color: var(--brut-ink) !important;
}


/* ==================================================
   3. TYPOGRAPHY — BOLDER, TIGHTER
   ================================================== */
h1, h2, h3, h4,
.section-heading,
.hero-heading,
.hp-hero__title,
.hp-rooms__card-title,
.room-card-title,
.booking-step-title {
    letter-spacing: -0.03em !important;
    font-weight: 800 !important;
}

h1, .display-1, .display-2 {
    letter-spacing: -0.04em !important;
    font-weight: 900 !important;
}

/* Section headings */
.section-heading {
    font-size: clamp(1.9rem, 3vw + 0.5rem, 2.8rem) !important;
}

/* Section heading underline rule — gold */
.section-heading::after {
    display: block !important;
    background: var(--brut-gold) !important;
    height: 3px !important;
    width: 3rem !important;
    margin-top: 0.55rem !important;
    content: '' !important;
}

/* Section badges → solid dark label */
.section-badge,
.hero-eyebrow,
.hp-experience__badge {
    background: var(--brut-forest) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    padding: 0.28rem 0.65rem !important;
    box-shadow: none !important;
}

/* Hero eyebrow uses gold — stands out over green landscape photo */
.hp-hero__eyebrow {
    background: var(--brut-gold) !important;
    color: #0d1110 !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    padding: 0.28rem 0.65rem !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

[data-theme="dark"] .section-badge,
[data-theme="dark"] .hp-hero__eyebrow,
[data-theme="dark"] .hero-eyebrow,
[data-theme="dark"] .hp-experience__badge {
    background: var(--brut-forest) !important;
    color: #ffffff !important;
}

/* CTA / page-header badges use gold */
.hp-cta .section-badge,
.page-header .section-badge,
.page-header .hero-badge {
    background: var(--brut-gold) !important;
    color: var(--brut-ink) !important;
}


/* ==================================================
   4. GLASS MORPHISM — GONE
   Kill all backdrop-filters on cards/panels
   (keep header blur untouched)
   ================================================== */
.room-card,
.booking-wizard,
.contact-card,
.contact-info-item,
.feature-card-v2,
.review-card,
.erlebnis-card,
.hero-content-improved,
.booking-preview,
.price-summary-box,
.summary-card,
.booking-form-card,
.hp-rooms__card-body,
.card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Hero glass panel — become transparent editorial overlay */
.hero-content-improved.glass-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
}


/* ==================================================
   5. CARDS — FLAT BORDERED, OFFSET HOVER
   ================================================== */
.card,
.room-card,
.feature-card-v2,
.review-card,
.contact-info-item {
    background: var(--brut-card) !important;
    border: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    box-shadow: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.card:hover,
.room-card:hover,
.feature-card-v2:hover,
.review-card:hover,
.contact-info-item:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 5px 5px 0 0 rgba(26, 60, 52, 0.45) !important;
    border-color: var(--brut-forest) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .room-card,
[data-theme="dark"] .feature-card-v2,
[data-theme="dark"] .review-card,
[data-theme="dark"] .contact-info-item {
    background: var(--brut-card) !important;
    border-color: var(--brut-rule) !important;
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .room-card:hover,
[data-theme="dark"] .feature-card-v2:hover,
[data-theme="dark"] .review-card:hover,
[data-theme="dark"] .contact-info-item:hover {
    box-shadow: 5px 5px 0 0 var(--brut-forest) !important;
    border-color: var(--brut-forest) !important;
}

/* Remove all decorative pseudo-elements on cards */
.room-card::before,
.feature-card-v2::before,
.feature-card-v2::after,
.booking-wizard::before,
.booking-wizard::after,
.contact-card::before,
.contact-card::after,
.btn-hero-primary::before,
.btn-pay::before,
.btn-lg-wide::before,
.room-card .btn-primary::after,
.summary-header::after {
    display: none !important;
    opacity: 0 !important;
}


/* ==================================================
   6. BUTTONS — FLAT, STARK, OFFSET HOVER
   ================================================== */

/* Primary: solid forest fill */
.btn-primary,
.btn-hero-primary,
.hp-hero__cta--primary,
.btn-pay,
.btn-lg-wide,
.room-card .btn-primary {
    background: var(--brut-forest) !important;
    background-image: none !important;
    border: 2px solid var(--brut-forest) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    transition: background 0.12s ease,
                color 0.12s ease,
                transform 0.1s ease,
                box-shadow 0.1s ease,
                border-color 0.1s ease !important;
}

.btn-primary:hover,
.btn-hero-primary:hover,
.hp-hero__cta--primary:hover,
.btn-pay:hover:not(:disabled),
.btn-lg-wide:hover {
    background: var(--brut-ink) !important;
    background-image: none !important;
    border-color: var(--brut-ink) !important;
    color: #ffffff !important;
    box-shadow: 4px 4px 0 0 var(--brut-gold) !important;
    transform: translate(-2px, -2px) !important;
}

.room-card .btn-primary:hover {
    background: var(--brut-ink) !important;
    border-color: var(--brut-ink) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Secondary / ghost */
.btn-secondary,
.btn-outline-primary,
.btn-hero-secondary,
.hp-hero__cta--ghost,
.btn-back {
    background: transparent !important;
    background-image: none !important;
    border: 2px solid var(--brut-rule) !important;
    color: var(--brut-ink) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    transition: background 0.12s ease,
                color 0.12s ease,
                transform 0.1s ease,
                box-shadow 0.1s ease,
                border-color 0.1s ease !important;
}

.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-hero-secondary:hover,
.hp-hero__cta--ghost:hover,
.btn-back:hover {
    background: var(--brut-ink) !important;
    border-color: var(--brut-ink) !important;
    color: #ffffff !important;
    box-shadow: 4px 4px 0 0 var(--brut-forest) !important;
    transform: translate(-2px, -2px) !important;
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-hero-secondary,
[data-theme="dark"] .hp-hero__cta--ghost,
[data-theme="dark"] .btn-back {
    border-color: rgba(240, 236, 228, 0.3) !important;
    color: var(--brut-ink) !important;
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-hero-secondary:hover,
[data-theme="dark"] .hp-hero__cta--ghost:hover {
    background: var(--brut-ink) !important;
    border-color: var(--brut-ink) !important;
    box-shadow: 4px 4px 0 0 var(--brut-forest) !important;
}

/* Wide booking button */
.btn-lg-wide,
.btn-pay {
    justify-content: center !important;
}

/* Booking stepper ± */
.booking-wizard .input-group .btn-outline-primary {
    background: var(--brut-soft) !important;
    border-color: var(--brut-rule-mid) !important;
    color: var(--brut-forest) !important;
    font-weight: 700 !important;
    transition: background 0.12s ease, color 0.12s ease !important;
    box-shadow: none !important;
    transform: none !important;
}

.booking-wizard .input-group .btn-outline-primary:hover {
    background: var(--brut-forest) !important;
    border-color: var(--brut-forest) !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] .booking-wizard .input-group .btn-outline-primary {
    background: var(--brut-soft) !important;
    border-color: var(--brut-rule) !important;
    color: var(--brut-forest) !important;
}


/* ==================================================
   7. FORMS — CLEAN, STARK
   ================================================== */
.form-control,
.form-select,
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
textarea,
select {
    background: var(--brut-card) !important;
    border: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    border-radius: 3px !important;
    color: var(--brut-ink) !important;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):focus,
textarea:focus,
select:focus {
    background: var(--brut-card) !important;
    border-color: var(--brut-forest) !important;
    box-shadow: 3px 3px 0 0 rgba(26, 60, 52, 0.18) !important;
    outline: none !important;
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--brut-soft) !important;
    border-color: var(--brut-rule) !important;
    color: var(--brut-ink) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--brut-forest) !important;
    box-shadow: 3px 3px 0 0 rgba(76, 168, 153, 0.2) !important;
}

/* Form labels */
.form-label,
.form-label-sm,
.contact-card .form-label {
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    font-size: 0.72rem !important;
    color: var(--text-tertiary) !important;
}

/* ==================================================
   8. SITE HEADER — CLEAN, EDITORIAL
   ================================================== */
.site-header,
header.site-header {
    background: var(--header-bg) !important;
    border-bottom: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .site-header,
[data-theme="dark"] header.site-header {
    background: var(--brut-card) !important;
    border-bottom-color: var(--brut-rule) !important;
}

/* Nav links — bolder */
.site-header .desktop-nav ul li a,
header .desktop-nav ul li a {
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}

/* Nav hover underline — gold */
.site-header .desktop-nav ul li a::before,
header .desktop-nav ul li a::before {
    background: var(--brut-gold) !important;
    height: 2px !important;
}

/* Mobile menu toggle */
.mobile-menu-toggle {
    background: var(--brut-soft) !important;
    border: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .mobile-menu-toggle {
    background: var(--brut-soft) !important;
    border-color: var(--brut-rule) !important;
}

/* Nav action buttons — both must be identical circles */
.nav-button,
.nav-btn,
.theme-toggle,
#theme-toggle,
#dynamic-phone-btn {
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    border: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    background: var(--brut-card) !important;
    color: var(--brut-ink) !important;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
}

.nav-button:hover,
.nav-btn:hover,
.theme-toggle:hover,
#theme-toggle:hover,
#dynamic-phone-btn:hover {
    transform: translate(-2px, -2px) !important;
    background: var(--brut-forest) !important;
    border-color: var(--brut-forest) !important;
    color: #ffffff !important;
    box-shadow: 3px 3px 0 0 rgba(26, 60, 52, 0.35) !important;
}

.nav-button i,
.nav-btn i,
#theme-toggle i,
#dynamic-phone-btn i {
    color: inherit !important;
}

[data-theme="dark"] .nav-button,
[data-theme="dark"] .nav-btn,
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] #theme-toggle,
[data-theme="dark"] #dynamic-phone-btn {
    background: var(--brut-soft) !important;
    border-color: var(--brut-rule) !important;
    color: var(--brut-ink) !important;
}

[data-theme="dark"] .nav-button:hover,
[data-theme="dark"] .nav-btn:hover,
[data-theme="dark"] #theme-toggle:hover,
[data-theme="dark"] #dynamic-phone-btn:hover {
    background: var(--brut-forest) !important;
    border-color: var(--brut-forest) !important;
    color: #ffffff !important;
    box-shadow: 3px 3px 0 0 rgba(76, 168, 153, 0.3) !important;
}

/* Scrolled header on homepage */
body.page-home .site-header.scrolled,
body.page-home header.scrolled {
    background: #ffffff !important;
    box-shadow: none !important;
    border-bottom: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] body.page-home .site-header.scrolled,
[data-theme="dark"] body.page-home header.scrolled {
    background: var(--brut-card) !important;
    border-bottom-color: var(--brut-rule) !important;
}


/* ==================================================
   9. HOMEPAGE — HERO
   ================================================== */

/* Hero: huge, tight, editorial title */
.hp-hero__title {
    font-size: clamp(3rem, 7vw + 1rem, 6rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.05em !important;
    line-height: 0.92 !important;
    /* Multi-layer text-shadow: sharp edge + mid blur + wide atmospheric glow */
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.95),
        0 3px 10px rgba(0, 0, 0, 0.65),
        0 8px 30px rgba(0, 0, 0, 0.4),
        0 16px 60px rgba(0, 0, 0, 0.2) !important;
}

/* Eyebrow / sublines */
.hp-hero__eyebrow {
    display: inline-block !important;
    margin-bottom: 1.25rem !important;
}

.hp-hero__subtitle {
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.85),
        0 4px 16px rgba(0, 0, 0, 0.45) !important;
    max-width: 520px !important;
}

/* Scroll mouse indicator */
.mouse {
    border-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: 0 !important;
}


/* ==================================================
   10. HOMEPAGE — METRICS STRIP (DARK BLOCK)
   ================================================== */
.hp-metrics {
    background: var(--brut-block) !important;
    border-top: 3px solid var(--brut-gold) !important;
    border-bottom: 3px solid var(--brut-gold) !important;
    box-shadow: none !important;
}

.hp-metrics__number {
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
    letter-spacing: -0.04em !important;
}

.hp-metrics__label {
    color: rgba(255, 255, 255, 0.55) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
}

.hp-metrics__divider {
    background: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .hp-metrics {
    background: var(--brut-block) !important;
}


/* ==================================================
   11. HOMEPAGE — ABOUT & ROOMS SECTION
   ================================================== */
.hp-about {
    background: #fdfcf8 !important;
}

/* About image — brutalist hover: shift + hard offset shadow */
.hp-about__image {
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.hp-about__image:hover {
    transform: translate(-5px, -5px) !important;
}

.hp-about__image img {
    border: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.hp-about__image:hover img {
    box-shadow: 8px 8px 0 0 rgba(26, 60, 52, 0.45) !important;
    border-color: var(--brut-forest) !important;
}

/* Kill the ghost outline pseudo-element */
.hp-about__image::after {
    display: none !important;
    opacity: 0 !important;
}

[data-theme="dark"] .hp-about__image img {
    border-color: var(--brut-rule) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .hp-about__image:hover img {
    box-shadow: 8px 8px 0 0 rgba(76, 168, 153, 0.4) !important;
    border-color: var(--brut-forest) !important;
}

.hp-rooms {
    background: var(--brut-soft) !important;
}

/* Bento room cards */
.hp-rooms__card {
    border: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    box-shadow: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.hp-rooms__card:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 5px 5px 0 0 var(--brut-gold) !important;
    border-color: var(--brut-gold) !important;
}

.hp-rooms__card::before {
    display: none !important;
}

/* Card info overlay — solid forest block */
.hp-rooms__card-body,
.hp-rooms__card-info {
    background: var(--brut-forest) !important;
    border-top: 2px solid rgba(255, 255, 255, 0.15) !important;
}

.hp-rooms__card-title {
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
}

.hp-rooms__card-badge {
    background: var(--brut-gold) !important;
    color: var(--brut-ink) !important;
    border: none !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
}

[data-theme="dark"] .hp-rooms__card {
    border-color: var(--brut-rule) !important;
}


/* ==================================================
   12. HOMEPAGE — EXPERIENCE SECTION
   Dark block — forest green, white text (items designed for dark bg)
   ================================================== */
.hp-experience {
    background: var(--brut-block) !important;
    background-image: none !important;
    border-top: 3px solid var(--brut-gold) !important;
    border-bottom: 3px solid var(--brut-gold) !important;
}

[data-theme="dark"] .hp-experience {
    background: var(--brut-block) !important;
    background-image: none !important;
    border-color: var(--brut-gold) !important;
}

/* Erlebnis cards: editorial left border accent */
.erlebnis-card,
.hp-experience .card {
    background: var(--brut-card) !important;
    border-left: 3px solid var(--brut-forest) !important;
    border-top: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    border-right: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    border-bottom: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    box-shadow: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.erlebnis-card:hover,
.hp-experience .card:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 5px 5px 0 0 var(--brut-forest) !important;
    border-left-color: var(--brut-gold) !important;
}

[data-theme="dark"] .erlebnis-card,
[data-theme="dark"] .hp-experience .card {
    background: var(--brut-card) !important;
    border-color: var(--brut-rule) !important;
    border-left: 3px solid var(--brut-forest) !important;
}

/* Feature cards (features grid) */
.feature-card-v2 {
    background: var(--brut-card) !important;
    border: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    border-top: 3px solid var(--brut-forest) !important;
    box-shadow: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.feature-card-v2:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 5px 5px 0 0 var(--brut-forest) !important;
    border-color: var(--brut-forest) !important;
    border-top-color: var(--brut-gold) !important;
}

[data-theme="dark"] .feature-card-v2 {
    background: var(--brut-card) !important;
    border-color: var(--brut-rule) !important;
    border-top-color: var(--brut-forest) !important;
}

.feature-icon-wrap {
    background: var(--brut-sage-pale) !important;
    border: var(--brut-border-w) solid var(--brut-rule-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.feature-card-v2:hover .feature-icon-wrap {
    background: var(--brut-forest) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}

[data-theme="dark"] .feature-icon-wrap {
    background: var(--brut-sage-pale) !important;
    border-color: var(--brut-rule-soft) !important;
}


/* ==================================================
   13. HOMEPAGE — TESTIMONIALS
   ================================================== */
.hp-testimonial {
    background: var(--brut-paper) !important;
}

.review-card {
    background: var(--brut-card) !important;
    border: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    border-left: 3px solid var(--brut-gold) !important;
    box-shadow: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.review-card:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 5px 5px 0 0 var(--brut-gold) !important;
}

.review-card::before {
    color: var(--brut-gold) !important;
    opacity: 0.35 !important;
}

[data-theme="dark"] .review-card {
    background: var(--brut-card) !important;
    border-color: var(--brut-rule) !important;
    border-left-color: var(--brut-gold) !important;
}

[data-theme="dark"] .review-card:hover {
    box-shadow: 5px 5px 0 0 var(--brut-gold) !important;
}


/* ==================================================
   14. HOMEPAGE — CTA SECTION (DARK BLOCK)
   ================================================== */
.hp-cta {
    background: var(--brut-block) !important;
    background-image: none !important;
    border-top: 3px solid var(--brut-gold) !important;
    box-shadow: none !important;
}

.hp-cta .section-heading,
.hp-cta h2 {
    color: #ffffff !important;
}

.hp-cta .section-subheading,
.hp-cta p {
    color: rgba(255, 255, 255, 0.65) !important;
}

.hp-cta .section-badge {
    background: var(--brut-gold) !important;
    color: var(--brut-ink) !important;
}

[data-theme="dark"] .hp-cta {
    background: var(--brut-block) !important;
    border-top-color: var(--brut-gold) !important;
}


/* ==================================================
   15. PAGE HEADERS (all inner pages)
   ================================================== */
.page-header {
    /* Rich directional gradient — logo green deepening toward edges */
    background: linear-gradient(
        150deg,
        #256056 0%,
        #2f6f61 40%,
        #3a7a6a 70%,
        #256056 100%
    ) !important;
    background-image: linear-gradient(
        150deg,
        #256056 0%,
        #2f6f61 40%,
        #3a7a6a 70%,
        #256056 100%
    ) !important;
    border-bottom: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
    /* Tighter padding — no more 7rem dead space at top */
    padding: 4.5rem 0 3rem !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Desktop: pull page-header flush under the fixed navbar.
   .site-main has padding-top:100px to clear the fixed header;
   pull the page-header up to absorb that gap, and add it back
   as extra top-padding so the text content stays in place. */
@media (min-width: 769px) {
    .page-header {
        margin-top: -100px !important;
        padding-top: calc(4.5rem + 100px) !important;
    }
}

/* Subtle ambient radial glow — keep it classy */
.page-header::before {
    content: '' !important;
    display: block !important;
    opacity: 1 !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(184,137,58,0.10) 0%, transparent 45%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Kill noise texture pseudo — too subtle to matter */
.page-header::after {
    display: none !important;
    opacity: 0 !important;
}

/* Gold fade ribbon at the very bottom of the header */
.page-header .container {
    position: relative !important;
    z-index: 2 !important;
}

/* Soft bottom fade: green → cream — eases the hard section cut */
.page-header + section::before {
    content: '' !important;
    display: block !important;
    opacity: 1 !important;
    position: absolute !important;
    top: -56px !important;
    left: 0 !important;
    right: 0 !important;
    height: 56px !important;
    background: linear-gradient(180deg, transparent 0%, var(--brut-paper, #f2efe8) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* A thin gold accent line at the very bottom */
.page-header::after {
    content: '' !important;
    display: block !important;
    opacity: 1 !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80px !important;
    height: 2px !important;
    background: var(--brut-gold, #b8893a) !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

.page-header .page-header__title,
.page-header h1,
.page-header .section-heading {
    color: #ffffff !important;
    letter-spacing: -0.04em !important;
    font-weight: 900 !important;
    text-shadow:
        0 1px 3px rgba(0,0,0,0.35),
        0 4px 16px rgba(0,0,0,0.20) !important;
}

.page-header .page-header__subtitle,
.page-header p,
.page-header .section-subheading {
    color: rgba(255, 255, 255, 0.72) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
}

/* DARK MODE — deeper forest gradient */
[data-theme="dark"] .page-header {
    background: linear-gradient(
        150deg,
        #071610 0%,
        #0d2218 40%,
        #122a1f 70%,
        #071610 100%
    ) !important;
    background-image: linear-gradient(
        150deg,
        #071610 0%,
        #0d2218 40%,
        #122a1f 70%,
        #071610 100%
    ) !important;
}

[data-theme="dark"] .page-header + section::before {
    background: linear-gradient(180deg, transparent 0%, var(--brut-dark, #111c18) 100%) !important;
}


/* ==================================================
   16. ROOMS PAGE — FLOOR SECTIONS
   ================================================== */
.floor-section-title {
    border-bottom: 2px solid var(--brut-rule-mid) !important;
    padding-bottom: 0.85rem !important;
    margin-bottom: 2rem !important;
    box-shadow: none !important;
}

.floor-section-title h2 {
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}

[data-theme="dark"] .floor-section-title {
    border-color: var(--brut-rule) !important;
}

.room-card {
    background: var(--brut-card) !important;
    border: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    box-shadow: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.room-card:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 5px 5px 0 0 var(--brut-forest) !important;
    border-color: var(--brut-forest) !important;
}

[data-theme="dark"] .room-card {
    background: var(--brut-card) !important;
    border-color: var(--brut-rule) !important;
}

[data-theme="dark"] .room-card:hover {
    box-shadow: 5px 5px 0 0 var(--brut-forest) !important;
    border-color: var(--brut-forest) !important;
}


/* ==================================================
   17. BOOKING WIZARD
   ================================================== */
.booking-wizard {
    background: var(--brut-card) !important;
    border: 2px solid var(--brut-rule-mid) !important;
    box-shadow: none !important;
    padding: 2.5rem !important;
}

[data-theme="dark"] .booking-wizard {
    background: var(--brut-card) !important;
    border-color: var(--brut-rule) !important;
}

.booking-step {
    border-bottom: var(--brut-border-w) solid var(--brut-rule-soft) !important;
    padding-bottom: 1.75rem !important;
    margin-bottom: 1.75rem !important;
}

.booking-step-title {
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    border-bottom: 1.5px solid var(--brut-rule-soft) !important;
    padding-bottom: 0.75rem !important;
    margin-bottom: 1.25rem !important;
}

.step-badge {
    background: var(--brut-forest) !important;
    background-image: none !important;
    box-shadow: none !important;
    font-weight: 800 !important;
}

.booking-preview {
    background: var(--brut-soft) !important;
    border: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    border-left: 3px solid var(--brut-forest) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

[data-theme="dark"] .booking-preview {
    background: var(--brut-soft) !important;
    border-color: var(--brut-rule) !important;
    border-left-color: var(--brut-forest) !important;
}

/* Dark booking wizard */
[data-theme="dark"] .booking-wizard .form-control {
    background: var(--brut-soft) !important;
    border-color: var(--brut-rule) !important;
    color: var(--brut-ink) !important;
}

[data-theme="dark"] .booking-wizard .form-control.text-center {
    background: var(--brut-soft) !important;
    color: var(--brut-ink) !important;
}


/* ==================================================
   18. CONTACT PAGE
   ================================================== */
.contact-card {
    background: var(--brut-card) !important;
    border: 2px solid var(--brut-rule-mid) !important;
    border-left: 4px solid var(--brut-gold) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

[data-theme="dark"] .contact-card {
    background: var(--brut-card) !important;
    border-color: var(--brut-rule) !important;
    border-left-color: var(--brut-gold) !important;
}

.contact-card .form-control {
    background: var(--brut-soft) !important;
    border-color: var(--brut-rule-mid) !important;
}

[data-theme="dark"] .contact-card .form-control {
    background: var(--brut-soft) !important;
    border-color: var(--brut-rule) !important;
}

.contact-info-item {
    background: var(--brut-card) !important;
    border: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    border-left: 3px solid var(--brut-gold) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.contact-info-item:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 5px 5px 0 0 var(--brut-gold) !important;
    border-color: var(--brut-gold) !important;
}

.contact-info-icon {
    background: var(--brut-sage-pale) !important;
    border: var(--brut-border-w) solid var(--brut-rule-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.contact-info-item:hover .contact-info-icon {
    background: var(--brut-forest) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}

[data-theme="dark"] .contact-info-item {
    background: var(--brut-card) !important;
    border-color: var(--brut-rule) !important;
    border-left-color: var(--brut-gold) !important;
}


/* ==================================================
   19. ZIMMER DETAIL — PRICE BOX
   ================================================== */
.price-summary-box {
    background: var(--brut-card) !important;
    border: 2px solid var(--brut-rule-mid) !important;
    border-left: 4px solid var(--brut-forest) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

[data-theme="dark"] .price-summary-box {
    background: var(--brut-card) !important;
    border-color: var(--brut-rule) !important;
    border-left-color: var(--brut-forest) !important;
}

[data-theme="dark"] .price-summary-box span,
[data-theme="dark"] .price-summary-box .price-row-text,
[data-theme="dark"] .price-summary-box .fw-bold {
    color: var(--brut-paper, #f2efe8) !important;
}
[data-theme="dark"] .price-summary-box hr {
    border-color: var(--brut-rule) !important;
}


/* ==================================================
   19b. ZIMMER DETAIL — FULL DARK MODE OVERRIDES
   ================================================== */

/* Room title + header */
[data-theme="dark"] .room-detail-header h1 {
    color: #f2efe8 !important;
}
[data-theme="dark"] .room-detail-pricing .per-night {
    color: #8a9690 !important;
}

/* Description / Ausstattung panels */
[data-theme="dark"] .room-description-section {
    background: #131c18 !important;
    border-color: rgba(240,236,228,0.12) !important;
}
[data-theme="dark"] .room-description-section h5 {
    color: #f2efe8 !important;
}
[data-theme="dark"] .room-description-section p {
    color: #8a9690 !important;
}

/* Amenity tags */
[data-theme="dark"] .amenity-item {
    border-color: rgba(240,236,228,0.12) !important;
    color: #f2efe8 !important;
    background: transparent !important;
}

/* Booking sidebar */
[data-theme="dark"] .booking-card {
    background: #131c18 !important;
    border-color: rgba(240,236,228,0.12) !important;
    color: #f2efe8 !important;
}
[data-theme="dark"] .booking-card-header {
    border-bottom-color: rgba(240,236,228,0.12) !important;
}
[data-theme="dark"] .booking-card-header h5 {
    color: #f2efe8 !important;
}
[data-theme="dark"] .booking-card small,
[data-theme="dark"] .booking-card .text-muted {
    color: #8a9690 !important;
}
[data-theme="dark"] .booking-card strong {
    color: #f2efe8 !important;
}
[data-theme="dark"] .booking-card .form-label {
    color: #8a9690 !important;
}
[data-theme="dark"] .booking-card .form-control {
    background: #182219 !important;
    border-color: rgba(240,236,228,0.12) !important;
    color: #f2efe8 !important;
}

/* Booking info grid cells */
[data-theme="dark"] .booking-info-cell {
    background: #182219 !important;
    border-color: rgba(240,236,228,0.12) !important;
}
[data-theme="dark"] .booking-info-cell .bic-icon {
    color: #4ca899 !important;
}
[data-theme="dark"] .booking-info-cell .bic-label {
    color: #8a9690 !important;
}
[data-theme="dark"] .booking-info-cell .bic-value {
    color: #f2efe8 !important;
}
[data-theme="dark"] .booking-info-cell .bic-sub {
    color: #8a9690 !important;
}

/* Price summary */
[data-theme="dark"] .price-summary-box span,
[data-theme="dark"] .price-summary-box .price-row-text,
[data-theme="dark"] .price-summary-box .fw-bold {
    color: #f2efe8 !important;
}
[data-theme="dark"] .price-summary-box hr {
    border-color: rgba(240,236,228,0.12) !important;
}


/* ==================================================
   20. BOOKING CONFIRMATION PAGE
   ================================================== */
.booking-form-card,
.summary-card {
    background: var(--brut-card) !important;
    border: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    box-shadow: none !important;
    border-radius: 4px !important;
}

[data-theme="dark"] .booking-form-card,
[data-theme="dark"] .summary-card {
    background: var(--brut-card) !important;
    border-color: var(--brut-rule) !important;
}

.summary-header {
    background: var(--brut-forest) !important;
    background-image: none !important;
}

.payment-option-label {
    background: var(--brut-card) !important;
    border: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    transition: border-color 0.12s ease !important;
    box-shadow: none !important;
}

.payment-option input:checked + .payment-option-label {
    border: 2px solid var(--brut-forest) !important;
    background: var(--brut-sage-pale) !important;
}

[data-theme="dark"] .payment-option-label {
    background: var(--brut-card) !important;
    border-color: var(--brut-rule) !important;
}

[data-theme="dark"] .payment-option input:checked + .payment-option-label {
    background: var(--brut-sage-pale) !important;
    border-color: var(--brut-forest) !important;
}

.terms-checkbox-wrapper {
    background: var(--brut-soft) !important;
    border: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    box-shadow: none !important;
}

.terms-checkbox-wrapper.checked {
    background: var(--brut-sage-pale) !important;
    border-color: var(--brut-forest) !important;
}

[data-theme="dark"] .terms-checkbox-wrapper {
    background: var(--brut-soft) !important;
    border-color: var(--brut-rule) !important;
}

/* Card element */
#card-element {
    background: var(--brut-card) !important;
    border: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    box-shadow: none !important;
}

.card-element-wrapper {
    background: var(--brut-soft) !important;
    border: var(--brut-border-w) solid var(--brut-rule-mid) !important;
}

[data-theme="dark"] #card-element,
[data-theme="dark"] .card-element-wrapper {
    background: var(--brut-soft) !important;
    border-color: var(--brut-rule) !important;
}


/* ==================================================
   21. FOOTER
   ================================================== */
footer,
.site-footer {
    background: var(--brut-block) !important;
    background-image: none !important;
    border-top: 3px solid var(--brut-gold) !important;
    box-shadow: none !important;
}

.site-footer .footer-bottom,
footer .footer-bottom {
    border-top: var(--brut-border-w) solid rgba(255, 255, 255, 0.12) !important;
}


/* ==================================================
   22. ALERTS & BADGES
   ================================================== */
.alert {
    border: var(--brut-border-w) solid currentColor !important;
    border-left-width: 3px !important;
    box-shadow: none !important;
    background: var(--brut-card) !important;
    border-radius: 3px !important;
}

.badge {
    border-radius: 2px !important;
}

.bg-warning,
.bg-warning.text-dark,
span.badge.bg-warning {
    background-color: var(--brut-gold) !important;
    color: var(--brut-ink) !important;
}


/* ==================================================
   23. DROPDOWN & NAV MENUS
   ================================================== */
.dropdown-menu,
.mobile-nav-menu,
.mobile-menu {
    border: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    border-radius: 3px !important;
    box-shadow: 4px 4px 0 0 var(--brut-rule-mid) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--brut-card) !important;
}

[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .mobile-nav-menu,
[data-theme="dark"] .mobile-menu {
    background: var(--brut-card) !important;
    border-color: var(--brut-rule) !important;
    box-shadow: 4px 4px 0 0 var(--brut-rule) !important;
}


/* ==================================================
   24. SECTION RHYTHM — alternating backgrounds
   ================================================== */
.hp-about,
.hp-rooms,
.hp-testimonial {
    background: var(--brut-paper) !important;
}

.hp-experience {
    background: var(--brut-block) !important;
    background-image: none !important;
}

[data-theme="dark"] .hp-about,
[data-theme="dark"] .hp-rooms,
[data-theme="dark"] .hp-testimonial {
    background: var(--brut-paper) !important;
}

[data-theme="dark"] .hp-experience {
    background: var(--brut-block) !important;
}


/* ==================================================
   25. ROOM CAPACITY & STATUS BADGES
   ================================================== */
.room-capacity-badge {
    background: var(--brut-sage-pale) !important;
    color: var(--brut-forest) !important;
    border: var(--brut-border-w) solid var(--brut-rule-soft) !important;
    font-weight: 700 !important;
}

[data-theme="dark"] .room-capacity-badge {
    background: var(--brut-sage-pale) !important;
    color: var(--brut-forest) !important;
    border-color: var(--brut-rule) !important;
}


/* ==================================================
   26. MAP LINK
   ================================================== */
.map-link {
    background: var(--brut-card) !important;
    border: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: var(--brut-forest) !important;
}

.map-link:hover {
    background: var(--brut-forest) !important;
    color: #ffffff !important;
    border-color: var(--brut-forest) !important;
}


/* ==================================================
   27. CALENDAR / KALENDER PAGE
   ================================================== */
.fc-button-primary {
    background: var(--brut-forest) !important;
    background-image: none !important;
    border: var(--brut-border-w) solid var(--brut-forest) !important;
    box-shadow: none !important;
}

.fc-button-primary:hover {
    background: var(--brut-ink) !important;
    border-color: var(--brut-ink) !important;
}


/* ==================================================
   28. PAYMENT SUCCESS / CANCEL PAGES
   ================================================== */
.payment-success-card,
.payment-cancel-card {
    background: var(--brut-card) !important;
    border: 2px solid var(--brut-rule-mid) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .payment-success-card,
[data-theme="dark"] .payment-cancel-card {
    background: var(--brut-card) !important;
    border-color: var(--brut-rule) !important;
}


/* ==================================================
   29. FOCUS STATES — accessibility kept SHARP
   ================================================== */
:focus-visible {
    outline: 2px solid var(--brut-forest) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

[data-theme="dark"] :focus-visible {
    outline-color: var(--brut-forest) !important;
}

/* Buttons get offset visible focus */
.btn:focus-visible,
button:focus-visible {
    outline: 2px solid var(--brut-forest) !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
}


/* ==================================================
   30. HORIZONTAL SECTION DIVIDERS
   ================================================== */
hr {
    border: none !important;
    border-top: var(--brut-border-w) solid var(--brut-rule-mid) !important;
    opacity: 1 !important;
}

[data-theme="dark"] hr {
    border-top-color: var(--brut-rule) !important;
}


/* ==================================================
   31. SCROLLBAR — editorial thin
   ================================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--brut-paper);
}

::-webkit-scrollbar-thumb {
    background: var(--brut-rule);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brut-forest);
}


/* ==================================================
   32. LOADING STATE SKELETONS
   ================================================== */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--brut-soft) 25%,
        var(--brut-paper) 50%,
        var(--brut-soft) 75%
    ) !important;
    background-size: 200% 100% !important;
}


/* ==================================================
   33. AVAILABLE ROOMS PAGE — Booking preview
   ================================================== */
.verfuegbar-section,
.available-rooms-form {
    background: var(--brut-paper) !important;
}

.booking-preview .form-control {
    background: var(--brut-card) !important;
    border-color: var(--brut-rule-mid) !important;
}

[data-theme="dark"] .booking-preview .form-control {
    background: var(--brut-soft) !important;
    border-color: var(--brut-rule) !important;
}


/* ==================================================
   34. DARK MODE — page bg for all inner pages
   ================================================== */
[data-theme="dark"] body {
    background-color: var(--brut-paper) !important;
}

[data-theme="dark"] .container,
[data-theme="dark"] main,
[data-theme="dark"] .zimmer-section,
[data-theme="dark"] .page-content,
[data-theme="dark"] section:not(.hp-metrics):not(.hp-cta):not(.page-header):not(.hp-experience) {
    background: transparent !important;
}


/* ==================================================
   35. HERO BUTTONS — special case, over image
   Ghost button stays white-on-dark for legibility
   ================================================== */

/* Hero primary: gold stands out over any landscape */
.hp-hero__cta--primary {
    background: var(--brut-gold) !important;
    border: 2px solid var(--brut-gold) !important;
    color: var(--brut-ink) !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

.hp-hero__cta--primary:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--brut-ink) !important;
    box-shadow: 4px 4px 0 0 var(--brut-gold) !important;
    transform: translate(-2px, -2px) !important;
}

/* Hero ghost: white border, white text, no blur */
.hp-hero__cta--ghost {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 2px solid rgba(255, 255, 255, 0.55) !important;
    color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-weight: 600 !important;
}

.hp-hero__cta--ghost:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.95) !important;
    color: #ffffff !important;
    box-shadow: 4px 4px 0 0 rgba(255, 255, 255, 0.3) !important;
    transform: translate(-2px, -2px) !important;
}


/* ==================================================
   36. PAYMENT METHODS IMAGES — keep visible both modes
   ================================================== */
.payment-logos img {
    filter: none;
}

[data-theme="dark"] .payment-logos img {
    filter: brightness(0.85) contrast(1.1);
}


/* ==================================================
   37. SCROLL REVEAL — keep smooth but no overshooting
   ================================================== */
.reveal {
    transition: opacity 0.4s ease, transform 0.4s ease !important;
}


/* ==================================================
   38. TABLE BORDERS
   ================================================== */
table, .table {
    border-color: var(--brut-rule-mid) !important;
}

.table > :not(caption) > * > * {
    border-color: var(--brut-rule-soft) !important;
}

[data-theme="dark"] table,
[data-theme="dark"] .table {
    border-color: var(--brut-rule) !important;
}


/* ==================================================
   39. SECTION BG OVERRIDE — zimmer rooms page
   ================================================== */
.zimmer-page,
.zimmer-section,
body.page-zimmer {
    background-color: var(--brut-paper) !important;
}

[data-theme="dark"] .zimmer-page,
[data-theme="dark"] .zimmer-section,
[data-theme="dark"] body.page-zimmer {
    background-color: var(--brut-paper) !important;
}


/* ==================================================
   40. FINAL OVERRIDE — Remove ALL remaining gradient
       backgrounds from interactive components
   ================================================== */
.btn-primary,
.btn-hero-primary,
.btn-pay,
.btn-lg-wide,
.step-badge,
.summary-header {
    background-image: none !important;
}

/* Booking preview border-left fix for dark mode */
[data-theme="dark"] .booking-wizard .booking-preview {
    border-left: 3px solid var(--brut-forest) !important;
    border-color: var(--brut-rule) !important;
}


/* ==================================================
   41. EXPERIENCE ITEMS — flat cards on dark section
       Remove glass, give hard left-accent border
   ================================================== */
.hp-experience__item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    border-left: 3px solid var(--brut-gold) !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.hp-experience__item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--brut-gold) !important;
    border-left-color: var(--brut-gold) !important;
    transform: translate(-3px, -3px) !important;
    box-shadow: 5px 5px 0 0 rgba(184, 137, 58, 0.6) !important;
}

.hp-experience__icon {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.hp-experience__item:hover .hp-experience__icon {
    transform: scale(1.05) !important;
}

.hp-experience__toggle {
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.hp-experience__item:hover .hp-experience__toggle {
    background: var(--brut-gold) !important;
    color: #111 !important;
    transform: translateX(4px) !important;
}


/* ==================================================
   42. CTA SECTION BUTTONS — in dark brut-block
       --white: solid paper/off-white with ink text
       --outline: hard white border, white text
   ================================================== */
.hp-cta__cta--white {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    padding: 0.95rem 2.25rem !important;
    border-radius: 0 !important;
    background: #f2efe8 !important;
    color: #0d1110 !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: 1.5px solid #f2efe8 !important;
    box-shadow: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

.hp-cta__cta--white:hover {
    background: var(--brut-gold, #b8893a) !important;
    border-color: var(--brut-gold, #b8893a) !important;
    color: #0d1110 !important;
    transform: translate(-3px, -3px) !important;
    box-shadow: 5px 5px 0 0 rgba(255, 255, 255, 0.25) !important;
}

.hp-cta__cta--outline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    padding: 0.95rem 2.25rem !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #f2efe8 !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: 1.5px solid rgba(242, 239, 232, 0.55) !important;
    box-shadow: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.hp-cta__cta--outline:hover {
    background: transparent !important;
    border-color: #f2efe8 !important;
    color: #f2efe8 !important;
    transform: translate(-3px, -3px) !important;
    box-shadow: 5px 5px 0 0 rgba(242, 239, 232, 0.2) !important;
}


/* ==================================================
   43. TRUST BADGES — Override premium.css glass style
   ================================================== */
.trust-badges {
    padding: 3rem 0 !important;
    border-top: 1.5px solid var(--brut-rule, #d0ccc2) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
    justify-content: center !important;
}

.trust-badge {
    background: var(--brut-card, #fdfcf8) !important;
    border: 1.5px solid var(--brut-rule, #d0ccc2) !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 1.75rem 1.5rem !important;
    text-align: center !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    box-shadow: none !important;
    flex: 1 1 220px !important;
    max-width: 300px !important;
}

.trust-badge:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 5px 5px 0 0 var(--brut-ink, #0d1110) !important;
    background: var(--brut-card, #fdfcf8) !important;
    border-color: var(--brut-ink, #0d1110) !important;
}

.trust-badge-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 1.5px solid var(--brut-rule, #d0ccc2) !important;
    color: var(--brut-block, #2f6f61) !important;
    font-size: 1.2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 1rem !important;
    transition: none !important;
    box-shadow: none !important;
}

.trust-badge:hover .trust-badge-icon {
    background: var(--brut-block, #2f6f61) !important;
    border-color: var(--brut-block, #2f6f61) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: none !important;
}

.trust-badge:hover .trust-badge-icon::after {
    display: none !important;
}

.trust-badge h6 {
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    letter-spacing: -0.01em !important;
    color: var(--brut-ink, #0d1110) !important;
    margin-bottom: 0.35rem !important;
}

.trust-badge p {
    font-size: 0.82rem !important;
    color: var(--brut-muted, #7a745f) !important;
    line-height: 1.5 !important;
}

[data-theme="dark"] .trust-badge {
    background: var(--brut-card, #131c18) !important;
    border-color: #2a3830 !important;
}
[data-theme="dark"] .trust-badge:hover {
    border-color: var(--brut-forest, #4ca899) !important;
    box-shadow: 5px 5px 0 0 var(--brut-forest, #4ca899) !important;
}
[data-theme="dark"] .trust-badge h6 {
    color: var(--brut-ink, #f0ece4) !important;
}
[data-theme="dark"] .trust-badge p {
    color: var(--brut-muted, #8a9690) !important;
}
[data-theme="dark"] .trust-badge-icon {
    border-color: #2a3830 !important;
    color: var(--brut-forest, #4ca899) !important;
}
[data-theme="dark"] .trust-badge:hover .trust-badge-icon {
    background: var(--brut-forest, #4ca899) !important;
    border-color: var(--brut-forest, #4ca899) !important;
    color: #0d1110 !important;
}


/* ==================================================
   44. BOOKING PREVIEW / FILTER BAR
   ================================================== */
.booking-preview {
    background: var(--brut-card, #fdfcf8) !important;
    border: 1.5px solid var(--brut-rule, #d0ccc2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] .booking-preview {
    background: var(--brut-card, #131c18) !important;
    border-color: #2a3830 !important;
}

.booking-preview-label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: var(--brut-muted, #7a745f) !important;
}

[data-theme="dark"] .booking-preview-label {
    color: #7a9a8e !important;
}