/* ============================================
   PREMIUM DESIGN SYSTEM — GUEST RO∞MS
   Luxury hotel aesthetic with pixel-perfect polish
   ============================================ */

/* ==========================================
   1. REFINED TYPOGRAPHY
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');

:root {
    --font-heading: Arial, Helvetica, sans-serif;
    --font-body: Arial, Helvetica, sans-serif;
    
    /* Refined spacing scale */
    --section-gap: clamp(3rem, 5vw, 4.5rem);
    
    /* Refined shadows for luxury feel */
    --shadow-card: 0 4px 24px rgba(15, 23, 21, 0.06), 0 1px 2px rgba(15, 23, 21, 0.04);
    --shadow-card-hover: 0 20px 48px rgba(15, 23, 21, 0.1), 0 4px 12px rgba(15, 23, 21, 0.06);
    --shadow-button: 0 4px 16px rgba(47, 111, 97, 0.25);
    --shadow-button-hover: 0 8px 28px rgba(47, 111, 97, 0.35);
    
    /* Smooth animation curves */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Durations */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --duration-slower: 600ms;
    
    /* Gold accent for luxury touch */
    --gold: #b8963e;
    --gold-light: #d4b163;
    --gold-dark: #8a6f2e;
}

[data-theme="dark"] {
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-card-hover: 0 20px 48px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ==========================================
   EDITORIAL DESIGN OVERRIDE
   Flat geometry. Sharp corners. Intentional.
   Wine-country luxury through type & space,
   not through rounded bubble-UI.
   ========================================== */

/* 1. Reset all radius variables to near-zero */
:root {
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-xl: 4px;
    --radius-2xl: 4px;
    --radius-full: 9999px; /* only for explicit circles */
    --border-radius: 4px;
    --border-radius-small: 2px;
}

/* 2. Global: flatten all cards, containers, panels */
.card,
.room-card,
.room-grid .card,
.booking-wizard,
.booking-preview,
.booking-card,
.price-summary-box,
.contact-card,
.erlebnis-card,
.erlebnis-grid .erlebnis-card,
.alert,
.modal-content,
.dropdown-menu,
.zimmer-group,
.section-card,
.feature-card,
.info-card {
    border-radius: 4px !important;
}

/* 3. Buttons — sharp rectangles, not pills */
.btn,
button:not(.btn-close):not([class*="circle"]),
.btn-primary,
.btn-secondary,
.btn-success,
.btn-outline-primary,
.btn-outline-secondary,
.btn-hero-primary,
.btn-hero-secondary,
.btn-sm,
.btn-lg,
a.btn {
    border-radius: 4px !important;
}

/* 4. Section badges — sharp editorial tags */
.section-badge,
.hp-experience__badge,
.hp-rooms__card-badge,
.hero-badge,
.room-tag,
.room-badge,
.floor-badge,
.booking-preview .badge,
[class*="-badge"]:not(.step-badge):not(.section-badge-circle) {
    border-radius: 2px !important;
    letter-spacing: 0.1em;
}

/* 5. Form inputs and controls — sharp */
input:not([type="radio"]):not([type="checkbox"]),
textarea,
select,
.form-control,
.form-select {
    border-radius: 3px !important;
}

/* 6. Booking wizard radius */
.booking-wizard .form-control {
    border-radius: 4px !important;
}
.booking-wizard .form-control.text-center {
    border-radius: 0 !important;
}
.booking-wizard .input-group {
    border-radius: 4px !important;
}
.booking-wizard .input-group .btn-outline-primary:first-child {
    border-radius: 3px 0 0 3px !important;
}
.booking-wizard .input-group .btn-outline-primary:last-child {
    border-radius: 0 3px 3px 0 !important;
}

/* 7. Room capacity badge */
.room-capacity-badge {
    border-radius: 3px !important;
}

/* keep step-badge circular  */
.step-badge {
    border-radius: 50% !important;
}

/* 8. Page header section badge — keep sharp editorial pill on homepage hero */
.page-header .section-badge {
    border-radius: 2px !important;
}

/* 9. Images use very subtle radius only */
.card img,
.room-card img,
.erlebnis-card img,
img.rounded,
img.rounded-lg {
    border-radius: 3px !important;
}

/* 10. Section heading underline — sharper */
.section-heading::after {
    border-radius: 1px !important;
}

/* 11. Erlebnisse page cards */
.erlebnis-card {
    border-radius: 0 !important;
    border: 1px solid var(--border-subtle) !important;
    border-left: 3px solid var(--primary) !important;
}

/* 12. Contact cards */
.contact-card {
    border-radius: 0 !important;
    border-left: 3px solid var(--primary) !important;
}

/* 13. Booking wizard panel */
.booking-wizard {
    border-radius: 4px !important;
}

/* ==========================================
   END EDITORIAL OVERRIDE
   ========================================== */



/* Smooth scrolling with reduced motion respect */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    font-family: var(--font-body);
    letter-spacing: -0.01em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Premium heading typography */
h1, h2, h3, .display-5 {
    font-family: var(--font-heading) !important;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

h1, .display-5 {
    font-weight: 700 !important;
}

h2 {
    font-weight: 600 !important;
}

/* Remove the generic h2::after underline — use targeted styling instead */
h2::after {
    display: none !important;
}

/* Section heading accent bar — only where wanted */
.section-heading::after,
.premium-heading::after {
    content: '' !important;
    display: block !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary, #2f6f61), var(--primary-light, #4ca899)) !important;
    border-radius: 2px;
    margin: 0.75rem auto 0;
}

/* ==========================================
   3. PREMIUM HEADER — Editorial Navigation
   Refined, airy, and elegant. Warm ivory
   background with subtle depth.
   ========================================== */
.site-header,
header {
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Elegant logo hover */
.logo a {
    display: inline-flex;
    align-items: center;
    transition: transform var(--duration-normal) var(--ease-out-expo),
                opacity var(--duration-normal) ease;
}

.logo a:hover {
    transform: scale(1.03);
    opacity: 0.85;
}

/* Nav link styling — refined editorial feel */
.desktop-nav ul li a {
    position: relative;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
    text-transform: none;
    font-size: 0.88rem !important;
    color: var(--text-color, #2c3e3a);
    transition: color 0.35s ease !important;
    padding: 0.5rem 0 !important;
}

.desktop-nav ul li a::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0 !important;
    width: 100%;
    height: 1.5px !important;
    background: var(--primary, #2f6f61) !important;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.desktop-nav ul li a:hover::before,
.desktop-nav ul li a.active::before {
    transform: scaleX(1);
    transform-origin: left;
}

.desktop-nav ul li a:hover {
    color: var(--primary, #2f6f61) !important;
}

.desktop-nav ul li a.active {
    color: var(--primary, #2f6f61) !important;
    font-weight: 600 !important;
}

/* Nav buttons — refined minimal circles */
.nav-button,
.nav-btn,
.theme-toggle {
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
    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;
    border: 1px solid rgba(47, 111, 97, 0.1) !important;
    background: var(--card-bg, var(--surface, #fafbf9)) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.nav-button i,
.nav-btn i,
.theme-toggle i {
    font-size: 0.95rem !important;
    color: var(--text-color, #2c3e3a) !important;
    transition: color 0.3s ease !important;
}

.nav-button:hover,
.nav-btn:hover,
.theme-toggle:hover {
    transform: translateY(-2px) !important;
    border-color: var(--primary, #2f6f61) !important;
    box-shadow: 0 4px 12px rgba(47, 111, 97, 0.12) !important;
}

.nav-button:hover i,
.nav-btn:hover i,
.theme-toggle:hover i {
    color: var(--primary, #2f6f61) !important;
}

/* Dark mode nav buttons */
[data-theme="dark"] .nav-button,
[data-theme="dark"] .nav-btn,
[data-theme="dark"] .theme-toggle {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .nav-button i,
[data-theme="dark"] .nav-btn i,
[data-theme="dark"] .theme-toggle i {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] .nav-button:hover,
[data-theme="dark"] .nav-btn:hover,
[data-theme="dark"] .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .desktop-nav ul li a {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] .desktop-nav ul li a:hover {
    color: var(--gold-light, #d4b163) !important;
}

[data-theme="dark"] .desktop-nav ul li a::before {
    background: var(--gold-light, #d4b163) !important;
}

/* ==========================================
   4. PREMIUM HERO SECTION
   ========================================== */

/* Hero section root */
.hero-section {
    position: relative;
    overflow: hidden;
}

/* Hero background wrapper */
.hero-background-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-background-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.8s ease;
}

.overlay-gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(255, 255, 255, 0.75) 40%,
        rgba(255, 255, 255, 0.3) 100%
    );
}

[data-theme="dark"] .overlay-gradient {
    background: linear-gradient(
        135deg,
        rgba(11, 18, 16, 0.92) 0%,
        rgba(11, 18, 16, 0.75) 40%,
        rgba(11, 18, 16, 0.4) 100%
    );
}

/* Hero content card (glass panel) */
.hero-content-improved.glass-panel {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 4px !important;
    box-shadow: 
        0 24px 48px rgba(15, 23, 21, 0.08),
        0 4px 12px rgba(15, 23, 21, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .hero-content-improved.glass-panel {
    background: rgba(11, 18, 16, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 
        0 24px 48px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Hero eyebrow — small decorative label */
.hero-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--primary, #2f6f61);
    background: var(--primary-50, rgba(47,111,97,0.08));
    padding: 0.4rem 1rem;
    border-radius: 2px;
    margin-bottom: 1rem;
    border: 1px solid var(--primary-100, rgba(47,111,97,0.15));
}

/* Hero heading */
.hero-heading {
    font-family: var(--font-heading) !important;
    font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: var(--text-primary, #111816) !important;
    margin-bottom: 1rem;
}

/* Gradient text effect */
.text-primary-gradient {
    background: linear-gradient(135deg, var(--primary, #2f6f61) 0%, var(--warm, #c78f4a) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .text-primary-gradient {
    background: linear-gradient(135deg, var(--primary-light, #4ca899) 0%, var(--warm-light, #d9a86d) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-secondary, #3a4a46) !important;
    margin-bottom: 1.5rem;
    max-width: 500px;
}

/* Hero CTA buttons — premium styling */
.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 2rem;
    background: linear-gradient(135deg, #1a3c34 0%, #2f6f61 50%, #1e4a40 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 24px rgba(47, 111, 97, 0.25);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn-hero-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% 30%, rgba(184, 150, 62, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.btn-hero-primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 36px rgba(47, 111, 97, 0.35) !important;
    color: #fff !important;
}

.btn-hero-primary:hover::before {
    opacity: 1;
}

.btn-hero-primary:active {
    transform: translateY(-1px) scale(0.99) !important;
}

.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: transparent !important;
    color: var(--text-primary, #111816) !important;
    border: 2px solid var(--border-color, #dde5e3) !important;
    border-radius: 4px !important;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all var(--duration-normal) var(--ease-out-expo) !important;
    text-decoration: none;
}

.btn-hero-secondary:hover {
    background: var(--primary-50, rgba(47,111,97,0.06)) !important;
    border-color: var(--primary, #2f6f61) !important;
    color: var(--primary, #2f6f61) !important;
    transform: translateY(-2px) !important;
}

[data-theme="dark"] .btn-hero-secondary {
    color: var(--text-primary) !important;
    border-color: rgba(255,255,255,0.15) !important;
}

[data-theme="dark"] .btn-hero-secondary:hover {
    border-color: var(--primary-light) !important;
    color: var(--primary-light) !important;
    background: rgba(47, 111, 97, 0.1) !important;
}

/* Scroll indicator */
.scroll-down-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    justify-content: center;
    align-items: center;
}

.mouse {
    width: 26px;
    height: 42px;
    border: 2px solid var(--text-muted, rgba(0,0,0,0.25));
    border-radius: 4px;
    position: relative;
    display: flex;
    justify-content: center;
}

.wheel {
    width: 4px;
    height: 8px;
    background: var(--primary, #2f6f61);
    border-radius: 4px;
    margin-top: 8px;
    animation: scrollWheel 1.8s ease-in-out infinite;
}

@keyframes scrollWheel {
    0% { opacity: 1; transform: translateY(0); }
    50% { opacity: 0.5; transform: translateY(10px); }
    100% { opacity: 0; transform: translateY(16px); }
}

/* ==========================================
   5. PREMIUM SECTION STYLING
   ========================================== */

/* Section badge — small eyebrow text */
.section-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary, #2f6f61);
    background: var(--primary-50, rgba(47,111,97,0.08));
    padding: 0.35rem 1rem;
    border-radius: 2px;
    margin-bottom: 1rem;
    border: 1px solid var(--primary-100, rgba(47,111,97,0.15));
}

.section-heading {
    font-family: var(--font-heading) !important;
    font-size: clamp(1.75rem, 3vw + 0.5rem, 2.75rem);
    font-weight: 700;
    color: var(--text-primary, #111816);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.section-heading em {
    font-style: italic;
    color: var(--gold, #b8963e);
    filter: drop-shadow(0 1px 4px rgba(184, 150, 62, 0.15));
}

.section-subheading {
    font-size: 1.05rem;
    color: var(--text-secondary, #3a4a46);
    max-width: 600px;
    margin: 1rem auto 0;
    line-height: 1.7;
}

/* Features section */
.section-features {
    padding: var(--section-gap) 0;
    position: relative;
    overflow: hidden;
    background: var(--bg-secondary, #f4f7f6);
}

[data-theme="dark"] .section-features {
    background: var(--bg-secondary);
}

/* Decorative blob */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    pointer-events: none;
}

.blob-1 {
    width: 400px;
    height: 400px;
    background: var(--primary-50, rgba(47,111,97,0.15));
    top: -100px;
    right: -100px;
}

/* ==========================================
   6. PREMIUM FEATURE CARDS
   ========================================== */
.feature-card-v2 {
    background: var(--surface, var(--bg-secondary, #f8f9f7)) !important;
    border: 1px solid var(--border-light, #eef2f0) !important;
    border-radius: 4px !important;
    padding: 2rem 1.75rem !important;
    text-align: center;
    box-shadow: var(--shadow-card) !important;
    transition: all var(--duration-slow) var(--ease-out-expo) !important;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.feature-card-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary, #2f6f61), var(--warm, #c78f4a));
    opacity: 0;
    transition: opacity var(--duration-slow) ease;
}

.feature-card-v2:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--shadow-card-hover) !important;
    border-color: var(--primary-100, rgba(47,111,97,0.2)) !important;
}

.feature-card-v2:hover::before {
    opacity: 1;
}

.feature-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--primary-50, rgba(47,111,97,0.08)) 0%, var(--primary-100, rgba(47,111,97,0.15)) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.5rem;
    color: var(--primary, #2f6f61);
    transition: all var(--duration-slow) var(--ease-out-expo);
    border: 1px solid var(--primary-100, rgba(47,111,97,0.12));
}

.feature-card-v2:hover .feature-icon-wrap {
    background: linear-gradient(135deg, var(--primary, #2f6f61), var(--primary-dark, #1e4a40));
    color: white;
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 0 8px 24px rgba(47, 111, 97, 0.3);
    border-color: transparent;
}

.feature-title {
    font-family: var(--font-heading) !important;
    font-size: 1.2rem !important;
    font-weight: 600;
    color: var(--text-primary, #111816);
    margin-bottom: 0.75rem;
}

.feature-text {
    color: var(--text-secondary, #3a4a46) !important;
    font-size: 0.93rem;
    line-height: 1.7;
    margin: 0;
}

/* ==========================================
   7. PREMIUM ROOM CARDS — Magazine Editorial
   Full-bleed image cards with cinematic overlay,
   matching the homepage bento grid aesthetic.
   ========================================== */
.room-card-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
}

.room-card {
    border-radius: 4px !important;
    overflow: hidden;
    border: none !important;
    box-shadow:
        0 8px 32px rgba(15, 23, 21, 0.10),
        0 2px 8px rgba(15, 23, 21, 0.05) !important;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    background: var(--card-bg, var(--surface, #fafbf9));
    display: flex;
    flex-direction: column;
    height: 100%;
}

.room-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: border-color 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 3;
}

.room-card:hover {
    transform: translateY(-6px) !important;
    box-shadow:
        0 20px 48px rgba(15, 23, 21, 0.13),
        0 8px 20px rgba(15, 23, 21, 0.06) !important;
}

.room-card:hover::before {
    border-color: rgba(47, 111, 97, 0.25);
}

/* Image section — taller, with gradient overlay */
.room-card .overflow-hidden {
    position: relative;
}

.room-card .overflow-hidden::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.04) 100%);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.4s ease;
}

.room-card:hover .overflow-hidden::after {
    opacity: 0.7;
}

.room-card img {
    height: 260px !important;
    width: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.room-card:hover img {
    transform: scale(1.08) !important;
}

.room-card-body {
    padding: 1.75rem !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
}

.room-card-title {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.6rem;
    color: var(--text-primary, #111816);
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.room-card-text {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-secondary, #3a4a46);
    flex-grow: 1;
}

.room-price {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: var(--primary, #2f6f61) !important;
    letter-spacing: -0.02em;
}

/* Room card CTA button — editorial arrow style */
.room-card .btn-primary {
    border-radius: 4px !important;
    font-size: 0.88rem !important;
    font-weight: 600;
    padding: 0.85rem 1.35rem !important;
    letter-spacing: 0.02em;
    text-transform: none !important;
    background: linear-gradient(135deg, #1a3c34, #2f6f61) !important;
    border: none !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 16px rgba(47, 111, 97, 0.2);
    position: relative;
    overflow: hidden;
}

.room-card .btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% 30%, rgba(184, 150, 62, 0.12) 0%, transparent 60%);
    pointer-events: none;
}

.room-card .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(47, 111, 97, 0.3);
}

/* ==========================================
   8. PREMIUM BOOKING WIZARD — Cinematic
   Glass-morphism card floating on ambient
   background, matching homepage depth.
   ========================================== */
.booking-wizard {
    border-radius: 4px !important;
    padding: 3rem !important;
    border: 1px solid rgba(47, 111, 97, 0.08) !important;
    box-shadow:
        0 12px 48px rgba(15, 23, 21, 0.08),
        0 4px 16px rgba(15, 23, 21, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* Replace ugly gradient bar with subtle ambient glow */
.booking-wizard::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(47, 111, 97, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.booking-wizard::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(184, 150, 62, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

.step-badge {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    font-size: 0.92rem !important;
    background: linear-gradient(135deg, #1a3c34, #2f6f61) !important;
    box-shadow: 0 6px 16px rgba(47, 111, 97, 0.25) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    position: relative;
}

.step-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 60% 30%, rgba(184, 150, 62, 0.2) 0%, transparent 60%);
    pointer-events: none;
}

.booking-step-title {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.2rem !important;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.35rem;
    color: var(--text-primary, #111816);
    letter-spacing: -0.01em;
}

.booking-step {
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
}

/* Date picker labels — editorial uppercase */
.date-picker-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-secondary, #3a4a46);
    margin-bottom: 0.5rem;
    display: block;
}

/* Booking form buttons */
.btn-lg-wide {
    width: 100%;
    padding: 1.1rem 2rem !important;
    font-size: 1.02rem !important;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 4px !important;
    background: linear-gradient(135deg, #1a3c34, #2f6f61) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 6px 24px rgba(47, 111, 97, 0.25);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0.02em;
    position: relative;
    overflow: hidden;
}

.btn-lg-wide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% 30%, rgba(184, 150, 62, 0.12) 0%, transparent 60%);
    pointer-events: none;
}

.btn-lg-wide:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(47, 111, 97, 0.35);
    background: linear-gradient(135deg, #143830, #2f6f61) !important;
}

.booking-preview {
    background: var(--surface, #faf9f7);
    border-radius: 4px;
    padding: 1.35rem;
    border: 1px solid rgba(47, 111, 97, 0.06);
    margin-top: 1rem;
    box-shadow: inset 0 2px 8px rgba(15, 23, 21, 0.02);
}

.booking-preview-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary, #3a4a46);
}

.booking-preview-value {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--primary, #2f6f61);
}

/* Dark mode wizard */
[data-theme="dark"] .booking-wizard {
    background: rgba(30, 42, 39, 0.85);
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Dark mode: form inputs (date pickers etc.) */
[data-theme="dark"] .booking-wizard .form-control {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e8ede8 !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="dark"] .booking-wizard .form-control:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--primary, #2f6f61) !important;
    box-shadow: 0 0 0 4px rgba(47, 111, 97, 0.15), inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Dark mode: number counter display */
[data-theme="dark"] .booking-wizard .form-control.text-center {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* Dark mode: +/- stepper buttons */
[data-theme="dark"] .booking-wizard .input-group .btn-outline-primary {
    background: rgba(47, 111, 97, 0.25) !important;
    border-color: rgba(47, 111, 97, 0.35) !important;
    color: #7cc4b5 !important;
}

[data-theme="dark"] .booking-wizard .input-group .btn-outline-primary:hover {
    background: linear-gradient(135deg, #1a3c34, #2f6f61) !important;
    border-color: #2f6f61 !important;
    color: #fff !important;
}

/* Dark mode: booking preview / summary box (applies on ALL pages) */
[data-theme="dark"] .booking-preview {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

/* Dark mode: step separator */
[data-theme="dark"] .booking-step + .booking-step {
    border-top-color: rgba(255, 255, 255, 0.06);
}

/* Dark mode: labels & text */
[data-theme="dark"] .booking-wizard .date-picker-label {
    color: rgba(255, 255, 255, 0.65) !important;
}

[data-theme="dark"] .booking-step-title span:not(.step-badge) {
    color: #e8ede8 !important;
}

[data-theme="dark"] .booking-preview-label {
    color: rgba(255, 255, 255, 0.5) !important;
}

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

/* Dark mode: input group box shadow */
[data-theme="dark"] .booking-wizard .input-group {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Price summary box (zimmer_detail) */
.price-summary-box {
    background: #f8f9fa;
}

[data-theme="dark"] .price-summary-box {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .price-summary-box span,
[data-theme="dark"] .price-summary-box div {
    color: #e8ede8 !important;
}

[data-theme="dark"] .price-summary-box .text-success {
    color: #7cc4b5 !important;
}

[data-theme="dark"] .price-summary-box hr {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Dark mode: verfuegbare-zimmer filter bar form elements */
[data-theme="dark"] .booking-preview .form-control {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e8ede8 !important;
}

[data-theme="dark"] .booking-preview .form-control.text-center {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .booking-preview .input-group .btn-outline-primary {
    background: rgba(47, 111, 97, 0.25) !important;
    border-color: rgba(47, 111, 97, 0.35) !important;
    color: #7cc4b5 !important;
}

[data-theme="dark"] .booking-preview .input-group .btn-outline-primary:hover {
    background: linear-gradient(135deg, #1a3c34, #2f6f61) !important;
    border-color: #2f6f61 !important;
    color: #fff !important;
}

[data-theme="dark"] .booking-preview .input-group {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .booking-preview .booking-preview-item {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* --- Booking Wizard: Form Elements --- */

/* Remove Bootstrap border-top from step 3 */
.booking-step.border-top {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Step separator — editorial gradient line */
.booking-step + .booking-step {
    border-top: 1px solid rgba(47, 111, 97, 0.08);
    padding-top: 1.75rem;
}

/* Form group layout */
.booking-wizard .form-group-inline {
    gap: 1.5rem;
    align-items: end;
}

.booking-wizard .form-group-inline.dates {
    gap: 1.5rem;
    align-items: end;
}

/* Date picker wrapper */
.booking-wizard .date-picker-wrapper {
    position: relative;
}

/* Booking wizard form inputs — cinematic editorial */
.booking-wizard .form-control {
    border: 1.5px solid rgba(47, 111, 97, 0.12) !important;
    border-radius: 4px !important;
    padding: 0.85rem 1rem !important;
    background: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.95rem;
    color: var(--text-primary, #111816);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 2px 6px rgba(15, 23, 21, 0.02);
}

.booking-wizard .form-control:focus {
    background: rgba(255, 255, 255, 1) !important;
    border-color: var(--primary, #2f6f61) !important;
    box-shadow: 0 0 0 4px rgba(47, 111, 97, 0.08), inset 0 1px 3px rgba(15, 23, 21, 0.02) !important;
    outline: none !important;
}

/* Number input styling */
.booking-wizard .form-control.text-center {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 700;
    padding: 0.8rem 0.5rem !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1.5px solid rgba(47, 111, 97, 0.12) !important;
    border-bottom: 1.5px solid rgba(47, 111, 97, 0.12) !important;
}

/* +/- stepper buttons — premium editorial */
.booking-wizard .input-group .btn-outline-primary {
    border: 1.5px solid rgba(47, 111, 97, 0.12) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    color: var(--primary, #2f6f61) !important;
    font-size: 1.15rem;
    font-weight: 600;
    width: 52px;
    padding: 0.8rem 0 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-wizard .input-group .btn-outline-primary:first-child {
    border-radius: 4px 0 0 4px !important;
}

.booking-wizard .input-group .btn-outline-primary:last-child {
    border-radius: 0 4px 4px 0 !important;
}

.booking-wizard .input-group .btn-outline-primary:hover {
    background: linear-gradient(135deg, #1a3c34, #2f6f61) !important;
    border-color: #1a3c34 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(47, 111, 97, 0.2);
}

.booking-wizard .input-group .btn-outline-primary:active {
    transform: scale(0.95);
}

/* Input group — unified look */
.booking-wizard .input-group {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 21, 0.04);
}

/* Booking preview — glass editorial */
.booking-wizard .booking-preview {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(47, 111, 97, 0.06) !important;
    border-left: none !important;
    border-radius: 4px !important;
    padding: 1.35rem !important;
    margin-top: 1.25rem;
    box-shadow: inset 0 2px 8px rgba(15, 23, 21, 0.02);
}

/* Submit text — editorial style */
.booking-step .text-muted.small {
    font-size: 0.75rem !important;
    letter-spacing: 0.03em;
    opacity: 0.7;
}

/* ==========================================
   9. PREMIUM CONTACT PAGE — Cinematic Editorial
   Glass-morphism card with ambient glows,
   matching homepage depth and atmosphere.
   ========================================== */
.contact-card {
    border-radius: 4px !important;
    border: 1px solid rgba(47, 111, 97, 0.08) !important;
    box-shadow:
        0 12px 48px rgba(15, 23, 21, 0.08),
        0 4px 16px rgba(15, 23, 21, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    overflow: hidden;
    position: relative;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* Replace ugly gradient bar with ambient corner glow */
.contact-card::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(47, 111, 97, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.contact-card::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(184, 150, 62, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

.contact-card h3 {
    font-family: Arial, Helvetica, sans-serif !important;
    color: var(--text-primary, #111816);
    font-size: 1.4rem;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

.contact-card .form-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary, #3a4a46);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.contact-card .form-control {
    border-radius: 4px;
    border: 1.5px solid rgba(47, 111, 97, 0.1);
    padding: 0.85rem 1.15rem;
    font-size: 0.92rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(255, 255, 255, 0.6);
}

.contact-card .form-control:focus {
    border-color: var(--primary, #2f6f61);
    box-shadow: 0 0 0 4px rgba(47, 111, 97, 0.1);
    background: var(--surface-elevated, #fafbf9);
}

.contact-card .form-control::placeholder {
    color: var(--text-tertiary, #9ca3af);
    font-size: 0.88rem;
}

/* Dark mode contact card */
[data-theme="dark"] .contact-card {
    background: rgba(30, 42, 39, 0.85);
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .contact-card .form-control {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Contact info cards - sidebar — editorial glass cards */
.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 1.15rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 4px;
    border: 1px solid rgba(47, 111, 97, 0.06);
    box-shadow:
        0 4px 16px rgba(15, 23, 21, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-info-item:hover {
    transform: translateY(-6px);
    box-shadow:
        0 16px 40px rgba(15, 23, 21, 0.1),
        0 6px 16px rgba(15, 23, 21, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border-color: rgba(47, 111, 97, 0.12);
}

.contact-info-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(47,111,97,0.08), rgba(47,111,97,0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--primary, #2f6f61);
    border: 1px solid rgba(47,111,97,0.1);
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-info-item:hover .contact-info-icon {
    background: linear-gradient(135deg, #1a3c34, #2f6f61);
    color: #fff;
    border-color: transparent;
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 8px 24px rgba(47, 111, 97, 0.3);
}

.contact-info-text h6 {
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 0.3rem;
    font-size: 1.02rem;
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.contact-info-text p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Dark mode info items */
[data-theme="dark"] .contact-info-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* ==========================================
   10. PREMIUM REVIEWS / TESTIMONIALS — Editorial
   ========================================== */
.review-card {
    background: var(--card-bg, var(--surface, #fafbf9)) !important;
    border: 1px solid var(--border-light, #eef2f0) !important;
    border-radius: 4px !important;
    padding: 2rem !important;
    box-shadow: 0 2px 12px rgba(15, 23, 21, 0.04) !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.review-card::before {
    content: '\201c';
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 5rem;
    font-family: var(--font-heading);
    color: var(--primary-100, rgba(47,111,97,0.1));
    line-height: 1;
    pointer-events: none;
}

.review-card:hover {
    transform: translateY(-6px) !important;
    box-shadow:
        0 16px 36px rgba(15, 23, 21, 0.08),
        0 4px 12px rgba(15, 23, 21, 0.04) !important;
    border-color: var(--primary-100, rgba(47, 111, 97, 0.15)) !important;
}

.review-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 1rem;
}

.review-stars i {
    color: var(--gold, #b8963e);
    font-size: 1rem;
    filter: drop-shadow(0 1px 2px rgba(184, 150, 62, 0.3));
}

.review-text {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-secondary, #3a4a46);
    font-style: italic;
    flex-grow: 1;
    margin-bottom: 1.5rem;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light, #eef2f0);
}

.review-author-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary, #2f6f61), var(--primary-dark, #1e4a40));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    font-family: var(--font-heading);
    box-shadow: 0 4px 12px rgba(47, 111, 97, 0.2);
}

.review-author-info {
    line-height: 1.3;
}

.review-author-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary, #111816);
    font-family: var(--font-heading);
}

.review-author-detail {
    font-size: 0.8rem;
    color: var(--text-muted, #5c706a);
}

/* ==========================================
   11. PREMIUM FOOTER
   ========================================== */
footer {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}

.footer-main {
    padding: 3.5rem 0 2rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        text-align: center;
    }
}

.footer-brand p {
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.9rem;
    line-height: 1.7;
    margin-top: 1rem;
    max-width: 320px;
}

@media (max-width: 768px) {
    .footer-brand p {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

.footer-heading {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: white !important;
    margin-bottom: 1.25rem;
    position: relative;
    display: inline-block;
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--warm, #c78f4a);
    border-radius: 2px;
}

@media (max-width: 768px) {
    .footer-heading::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-list li {
    margin-bottom: 0.6rem;
}

.footer-links-list a {
    color: rgba(255,255,255,0.7) !important;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all var(--duration-fast) ease;
    display: inline-block;
}

.footer-links-list a:hover {
    color: white !important;
    transform: translateX(4px);
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .footer-contact-item {
        justify-content: center;
    }
}

.footer-contact-item i {
    width: 20px;
    color: var(--warm, #c78f4a);
}

.footer-bottom {
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5) !important;
}

.footer-bottom .footer-links a {
    color: rgba(255,255,255,0.5) !important;
    font-size: 0.85rem;
    margin-left: 1.5rem;
    text-decoration: none;
}

.footer-bottom .footer-links a:hover {
    color: white !important;
}

@media (max-width: 768px) {
    .footer-bottom {
        justify-content: center;
        text-align: center;
    }
    .footer-bottom .footer-links {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 1rem;
    }
    .footer-bottom .footer-links a {
        margin-left: 0;
    }
}

/* ==========================================
   12. PREMIUM BUTTONS (Global)
   ========================================== */
.btn-primary {
    position: relative;
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-out-expo) !important;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    transition: width 0.5s ease, height 0.5s ease, top 0.5s ease, left 0.5s ease;
    transform: translate(-50%, -50%);
}

.btn-primary:active::after {
    width: 300px;
    height: 300px;
}

.btn-primary:hover {
    transform: translateY(-2px) !important;
}

.btn-primary:active {
    transform: translateY(0) scale(0.98) !important;
}

/* ==========================================
   13. PREMIUM FORM INPUTS
   ========================================== */
.form-control:focus,
input:focus,
textarea:focus,
select:focus,
.form-select:focus {
    box-shadow: 0 0 0 4px rgba(47, 111, 97, 0.12), 0 2px 8px rgba(47, 111, 97, 0.08) !important;
}

/* Better labels */
.form-label,
label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    margin-bottom: 0.4rem;
}

/* ==========================================
   14. ANIMATIONS — Entrance Effects
   ========================================== */

/* Animate Up — used by hero and sections */
.animate-up {
    opacity: 0;
    transform: translateY(24px);
    animation: animateUp var(--duration-slower) var(--ease-out-expo) forwards;
    animation-delay: 0.2s;
}

@keyframes animateUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered animation for grid children */
.stagger-in > * {
    opacity: 0;
    transform: translateY(16px);
    transition: all var(--duration-slow) var(--ease-out-expo);
}

.stagger-in.visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: none; }
.stagger-in.visible > *:nth-child(2) { transition-delay: 0.15s; opacity: 1; transform: none; }
.stagger-in.visible > *:nth-child(3) { transition-delay: 0.25s; opacity: 1; transform: none; }
.stagger-in.visible > *:nth-child(4) { transition-delay: 0.35s; opacity: 1; transform: none; }
.stagger-in.visible > *:nth-child(5) { transition-delay: 0.45s; opacity: 1; transform: none; }
.stagger-in.visible > *:nth-child(6) { transition-delay: 0.55s; opacity: 1; transform: none; }

/* Fade in effect when scrolled into view */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--duration-slower) var(--ease-out-expo);
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

/* ==========================================
   14b. CINEMATIC INNER PAGE SECTIONS
   Bring the homepage's editorial rhythm
   to all subpages — ambient glows, dark
   immersive blocks, section transitions.
   ========================================== */

/* --- Ambient light section (default content area) --- */
.section-ambient {
    position: relative;
    padding: 5rem 0;
    overflow: hidden;
    background: var(--surface, #faf9f7);
}

.section-ambient::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 15% 25%, rgba(47, 111, 97, 0.05) 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 85% 75%, rgba(184, 150, 62, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 70% 30% at 50% 10%, rgba(47, 111, 97, 0.03) 0%, transparent 40%);
    pointer-events: none;
}

/* --- Dark immersive section (like hp-experience) --- */
.section-dark {
    position: relative;
    padding: 5rem 0;
    overflow: hidden;
    background: linear-gradient(155deg, #0b1e19, #143830, #1a4a3f, #0f2822);
    color: #fff;
}

.section-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(47, 111, 97, 0.2) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 60%, rgba(184, 150, 62, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.section-dark::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
    mix-blend-mode: overlay;
}

.section-dark .container {
    position: relative;
    z-index: 2;
}

.section-dark .section-badge {
    background: rgba(212, 177, 99, 0.15);
    color: #d4b163;
    border-color: rgba(212, 177, 99, 0.25);
}

.section-dark .section-heading,
.section-dark h2,
.section-dark h3 {
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.section-dark p {
    color: rgba(255, 255, 255, 0.72);
}

[data-theme="dark"] .section-dark {
    background: linear-gradient(155deg, #060f0c, #0e231e, #132e28, #0a1915);
}

/* --- Warm CTA section (like hp-cta at bottom of pages) --- */
.section-cta {
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, #0f2822, #1a4a3f, #1e5548, #163e35);
    color: #fff;
    text-align: center;
}

.section-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 40% 30%, rgba(212, 177, 99, 0.1) 0%, transparent 55%),
        radial-gradient(ellipse at 60% 80%, rgba(47, 111, 97, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.section-cta .container {
    position: relative;
    z-index: 2;
}

.section-cta__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.section-cta__title em {
    font-style: italic;
    color: #d4b163;
    filter: drop-shadow(0 2px 8px rgba(212, 177, 99, 0.3));
}

.section-cta__text {
    font-size: 1.02rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 520px;
    margin: 0 auto 2rem;
    line-height: 1.7;
    text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.section-cta__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.section-cta__btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 2rem;
    background: linear-gradient(135deg, #d4b163 0%, #c9a227 100%);
    color: #1a1f1e;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(201, 162, 39, 0.3);
}

.section-cta__btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(201, 162, 39, 0.4);
    background: linear-gradient(135deg, #e0b84a 0%, #d4b163 100%);
    color: #0f2822;
}

/* Dark mode CTA button - ensure text is readable */
[data-theme="dark"] .section-cta a.section-cta__btn-primary,
[data-theme="dark"] .section-cta__btn-primary,
[data-theme="dark"] .section-cta__btn-primary:link,
[data-theme="dark"] .section-cta__btn-primary:visited,
[data-theme="dark"] .section-cta .section-cta__btn-primary {
    color: #050505 !important;
    background: linear-gradient(135deg, #e8c45a 0%, #d4b163 100%);
    box-shadow: 0 4px 16px rgba(201, 162, 39, 0.4);
    -webkit-text-fill-color: #050505 !important;
}

/* Fix: Explicitly target span inside button for dark mode */
[data-theme="dark"] .section-cta__btn-primary span,
[data-theme="dark"] .section-cta a.section-cta__btn-primary span {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

[data-theme="dark"] .section-cta__btn-primary:hover,
[data-theme="dark"] .section-cta__btn-primary:active,
[data-theme="dark"] .section-cta a.section-cta__btn-primary:hover {
    background: linear-gradient(135deg, #f0d070 0%, #e0b84a 100%);
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    box-shadow: 0 8px 28px rgba(201, 162, 39, 0.5);
}

/* Fix: Hover state for span inside button */
[data-theme="dark"] .section-cta__btn-primary:hover span,
[data-theme="dark"] .section-cta a.section-cta__btn-primary:hover span {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.section-cta__btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 2rem;
    background: transparent;
    color: rgba(255,255,255,0.9);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.section-cta__btn-outline:hover {
    border-color: rgba(255,255,255,0.5);
    color: #fff;
    transform: translateY(-2px);
    background: rgba(255,255,255,0.05);
}

.section-cta__trust {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    opacity: 0.7;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.section-cta__trust-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,0.7);
}

.section-cta__trust-item i {
    color: #d4b163;
    font-size: 0.85rem;
}

/* --- Section transition gradients --- */
.section-ambient + .section-dark::before,
.section-dark + .section-ambient {
    position: relative;
}

/* --- Editorial heading accents (em = gold italic) --- */
.section-heading em,
.section-cta__title em,
.section-dark h2 em {
    font-style: italic;
    color: var(--gold, #b8963e);
}

.section-dark h2 em {
    color: #d4b163;
}

/* --- Rating hero block (reviews page) --- */
.rating-hero {
    text-align: center;
    padding: 2rem 0 1rem;
}

.rating-hero__score {
    font-family: var(--font-heading);
    font-size: 4.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary, #2f6f61), var(--gold, #b8963e));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 4px 12px rgba(47, 111, 97, 0.12));
}

.rating-hero__stars {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 0.75rem;
}

.rating-hero__stars i {
    color: var(--gold, #b8963e);
    font-size: 1.3rem;
    filter: drop-shadow(0 2px 4px rgba(184, 150, 62, 0.3));
}

.rating-hero__label {
    font-size: 0.92rem;
    color: var(--text-muted, #5c706a);
}

/* --- Dark section review cards --- */
.section-dark .review-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px);
}

.section-dark .review-card::before {
    color: rgba(255, 255, 255, 0.06);
}

.section-dark .review-card:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3) !important;
}

.section-dark .review-text {
    color: rgba(255, 255, 255, 0.72);
}

.section-dark .review-author {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.section-dark .review-author-name {
    color: #fff;
}

.section-dark .review-author-detail {
    color: rgba(255, 255, 255, 0.5);
}

.section-dark .review-author-avatar {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* --- Mobile for cinematic sections --- */
@media (max-width: 767px) {
    .section-dark {
        padding: 3.5rem 0;
    }
    .section-cta {
        padding: 3.5rem 0;
    }
    .section-cta__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .section-cta__btn-primary,
    .section-cta__btn-outline {
        justify-content: center;
        text-align: center;
    }
    .section-cta__trust {
        gap: 1rem;
    }
    .rating-hero__score {
        font-size: 3.5rem;
    }
}

/* ==========================================
   16. PAGE HEADER — Editorial Wine-Country
   Editorial wine-country style matching
   the homepage hero vibe. Deep green gradient
   with gold accents and warm typography.
   ========================================== */
.page-header {
    padding: 7rem 0 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, #0b1e19 0%, #143830 35%, #1a4a3f 60%, #0f2822 100%);
    color: #fff;
}

/* Ambient glow effects */
.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 25% 30%, rgba(47, 111, 97, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 70%, rgba(184, 150, 62, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.3) 0%, transparent 60%);
    pointer-events: none;
}

/* Subtle noise texture */
.page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.page-header .container {
    position: relative;
    z-index: 2;
}

.page-header .section-badge {
    background: rgba(212, 177, 99, 0.15);
    color: var(--gold-light, #d4b163);
    border-color: rgba(212, 177, 99, 0.25);
    margin-bottom: 1.25rem;
}

.page-header h1,
.page-header .section-heading {
    font-family: var(--font-heading) !important;
    font-weight: 700;
    color: #fff !important;
    position: relative;
    z-index: 1;
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 4px 24px rgba(0, 0, 0, 0.2);
    font-size: clamp(1.75rem, 3.5vw + 0.3rem, 2.75rem);
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin-bottom: 0.75rem;
}

.page-header .section-heading em {
    font-style: italic;
    color: #d4b163;
    filter: drop-shadow(0 2px 8px rgba(212, 177, 99, 0.3));
}

.page-header p,
.page-header .section-subheading {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.7) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
    line-height: 1.7;
}

/* Decorative bottom edge - smooth merge into content */
.page-header + section {
    position: relative;
}

.page-header + section::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(180deg, transparent 0%, var(--surface, #faf9f7) 100%);
    pointer-events: none;
    z-index: 1;
}

[data-theme="dark"] .page-header + section::before {
    background: linear-gradient(180deg, transparent 0%, var(--card-bg, #1a2420) 100%);
}

/* Dark mode page header — even deeper */
[data-theme="dark"] .page-header {
    background: linear-gradient(155deg, #060f0c 0%, #0e231e 35%, #132e28 60%, #0a1915 100%);
}

/* ==========================================
   16. TRUST BADGES ROW — Cinematic Editorial
   ========================================== */
.trust-badges {
    padding: 3rem 0;
    border-top: none;
}

.trust-badge {
    text-align: center;
    padding: 2rem 1.5rem;
    border-radius: 4px;
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(47, 111, 97, 0.04);
}

.trust-badge:hover {
    background: rgba(255, 255, 255, 0.85);
    box-shadow:
        0 12px 36px rgba(15, 23, 21, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-4px);
    border-color: rgba(47, 111, 97, 0.08);
}

.trust-badge-icon {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(47,111,97,0.06), rgba(47,111,97,0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.35rem;
    color: var(--primary, #2f6f61);
    border: 1px solid rgba(47,111,97,0.08);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.trust-badge:hover .trust-badge-icon {
    background: linear-gradient(135deg, #1a3c34, #2f6f61);
    color: white;
    transform: scale(1.1) rotate(-4deg);
    box-shadow: 0 10px 28px rgba(47, 111, 97, 0.28);
    border-color: transparent;
}

.trust-badge:hover .trust-badge-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: radial-gradient(circle at 60% 30%, rgba(184, 150, 62, 0.2) 0%, transparent 60%);
    pointer-events: none;
}

.trust-badge h6 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.trust-badge p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.55;
}

/* ==========================================
   17. PAYMENT LOGOS
   ========================================== */
.payment-logo {
    height: 28px;
    width: auto;
    opacity: 0.7;
    transition: opacity var(--duration-fast) ease;
    filter: grayscale(30%);
}

.payment-logo:hover {
    opacity: 1;
    filter: none;
}

/* ==========================================
   18. 404 PAGE — Editorial
   ========================================== */
.error-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--section-gap, 6rem) 0;
    position: relative;
}

.error-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(47,111,97,0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 50%, rgba(184,150,62,0.03) 0%, transparent 60%);
    pointer-events: none;
}

.error-page h1 {
    font-family: var(--font-heading);
    font-size: 8rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary, #2f6f61), var(--gold, #b8963e));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    line-height: 1;
    filter: drop-shadow(0 4px 16px rgba(47, 111, 97, 0.15));
}

.error-page h2 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-primary, #111816);
    margin-bottom: 1rem;
}

.error-page p {
    font-size: 1.05rem;
    color: var(--text-secondary, #3a4a46);
    max-width: 480px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

.error-page .btn {
    border-radius: 4px;
    padding: 0.85rem 2.2rem;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
}

/* ==========================================
   19. FLOOR SECTIONS — Cinematic Editorial
   Dramatic section dividers between floors,
   matching homepage section heading style.
   ========================================== */
.floor-section-title {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
    padding: 0;
    background: none;
    border-radius: 0;
    border-left: none;
    position: relative;
    padding-bottom: 1.5rem;
}

.floor-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--primary, #2f6f61), rgba(184, 150, 62, 0.3), transparent);
}

.floor-section-title h2 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.8rem !important;
    font-weight: 700;
    color: var(--text-primary, #111816) !important;
    margin: 0;
    white-space: nowrap;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.floor-section-title i {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: linear-gradient(135deg, #1a3c34, #2f6f61);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 6px 16px rgba(47, 111, 97, 0.25);
    flex-shrink: 0;
    position: relative;
}

.floor-section-title i::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: radial-gradient(circle at 60% 30%, rgba(184, 150, 62, 0.2) 0%, transparent 60%);
    pointer-events: none;
}

/* ==========================================
   19b. ERLEBNISSE PAGE — Activity Cards
   Clear, browsable activity listing
   with Google Maps links.
   ========================================== */
.erlebnis-category {
    margin-bottom: 2.5rem;
}

.erlebnis-category__header {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.erlebnis-category__icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 4px;
    background: linear-gradient(135deg, #1a3c34, #2f6f61);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 6px 16px rgba(47, 111, 97, 0.25);
}

.erlebnis-category__title {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #111816);
    margin: 0 0 0.35rem;
}

.erlebnis-category__desc {
    color: var(--text-secondary, #3a4a46);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.erlebnis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.erlebnis-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(47, 111, 97, 0.08);
    border-radius: 4px;
    text-decoration: none !important;
    color: var(--text-primary, #111816) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(15, 23, 21, 0.04);
}

.erlebnis-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(47, 111, 97, 0.12);
    border-color: rgba(47, 111, 97, 0.2);
}

.erlebnis-card__icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 4px;
    background: var(--surface, #faf9f7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #2f6f61);
    font-size: 1.1rem;
}

.erlebnis-card__content {
    flex: 1;
    min-width: 0;
}

.erlebnis-card__content h3 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
    color: var(--text-primary, #111816);
}

.erlebnis-card__content p {
    font-size: 0.85rem;
    color: var(--text-secondary, #3a4a46);
    margin: 0 0 0.35rem;
    line-height: 1.4;
}

.erlebnis-card__distance {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary, #2f6f61);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.erlebnis-card__arrow {
    color: var(--text-tertiary, #9ca3af);
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: color 0.2s, transform 0.2s;
}

.erlebnis-card:hover .erlebnis-card__arrow {
    color: var(--primary, #2f6f61);
    transform: translateX(2px);
}

/* Dark mode erlebnis */
[data-theme="dark"] .erlebnis-card {
    background: rgba(30, 42, 39, 0.7);
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .erlebnis-card__icon {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .erlebnis-category__title {
    color: #f0f0f0;
}

/* ==========================================
   20. RESPONSIVE REFINEMENTS
   ========================================== */
@media (max-width: 768px) {
    .hero-cta-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .btn-hero-primary,
    .btn-hero-secondary {
        justify-content: center;
        text-align: center;
    }
    
    .section-badge {
        font-size: 0.7rem;
    }
    
    .feature-card-v2 {
        padding: 1.5rem 1.25rem !important;
    }
    
    .feature-icon-wrap {
        width: 52px;
        height: 52px;
        border-radius: 4px;
        font-size: 1.25rem;
    }
    
    .booking-wizard {
        padding: 1rem 1rem 0.75rem !important;
        border-radius: 4px !important;
        overflow: visible !important;
    }

    /* Compact booking steps on mobile so form fits on one screen */
    .booking-step {
        padding-bottom: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    .booking-step + .booking-step {
        padding-top: 0.75rem !important;
    }

    .booking-step-title {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
        gap: 0.6rem !important;
    }

    .step-badge {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        font-size: 0.8rem !important;
    }

    .date-picker-label {
        margin-bottom: 0.3rem !important;
        font-size: 0.68rem !important;
    }

    .booking-preview {
        padding: 0.75rem !important;
        margin-top: 0.5rem !important;
        border-radius: 4px !important;
    }

    .booking-preview-label {
        font-size: 0.68rem !important;
    }

    .booking-preview-value {
        font-size: 1rem !important;
    }

    .btn-lg-wide {
        padding: 0.85rem 1.5rem !important;
        font-size: 0.95rem !important;
        border-radius: 4px !important;
    }

    .booking-step.mt-2 {
        margin-top: 0 !important;
    }

    /* Hide trust badges on mobile to keep booking page compact */
    .trust-badges {
        display: none !important;
    }

    /* Compact form inline groups on mobile */
    .booking-wizard .form-group-inline,
    .booking-wizard .form-group-inline.dates {
        gap: 0.75rem !important;
    }

    .booking-wizard .form-control {
        padding: 0.65rem 0.85rem !important;
        font-size: 0.9rem !important;
        border-radius: 4px !important;
    }

    .booking-wizard .form-control.text-center {
        font-size: 1.1rem !important;
        padding: 0.6rem 0.4rem !important;
    }

    /* Booking page: center the form properly on mobile */
    .section-ambient > .container > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .section-ambient > .container > .row > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .section-ambient > .container {
        padding-inline: 1rem !important;
    }

    /* Trust badges row fix */
    .trust-badges .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .trust-badges .row > [class*="col-"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Page header mobile */
    .page-header {
        padding: 6.5rem 0 0.5rem !important;
    }

    /* Center header: logo on top, buttons below — all centered */
    header .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 10px 15px !important;
    }

    .header-actions {
        justify-content: center !important;
        width: auto !important;
    }

    .page-header .section-heading::after {
        margin-top: 0.4rem !important;
    }
    
    .page-header .section-heading {
        font-size: 1.6rem !important;
    }

    .page-header .section-subheading {
        font-size: 0.9rem !important;
        margin-bottom: 0 !important;
    }

    /* Reduce section padding on mobile so content appears faster */
    .section-ambient {
        padding: 0.5rem 0 !important;
    }

    /* Remove gradient fade between page-header and content on mobile */
    .page-header + section::before {
        display: none !important;
    }

    /* Make all reveal/stagger content visible immediately on mobile
       so users don't have to scroll to trigger animations */
    .section-ambient .reveal,
    .section-ambient .stagger-in,
    .section-ambient .stagger-in > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Contact mobile — eliminate white gap between header and form */
    .contact-card {
        border-radius: 4px !important;
        margin-top: 0 !important;
    }

    .contact-card .card-body {
        padding: 0.75rem 1rem 1rem !important;
    }

    .contact-card h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Override Bootstrap g-4 gutters on contact page row */
    .section-ambient > .container > .row.g-4,
    .section-ambient > .container > .row.g-lg-5 {
        --bs-gutter-y: 0.5rem !important;
        --bs-gutter-x: 0 !important;
    }
    
    .contact-info-item {
        padding: 1.1rem;
        border-radius: 4px;
    }
    
    .contact-info-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 4px;
        font-size: 1rem;
    }

    /* Reviews mobile */
    .review-card {
        padding: 1.5rem !important;
        border-radius: 4px !important;
    }
    
    .review-card::before {
        font-size: 3.5rem;
    }

    /* Trust badges mobile */
    .trust-badge-icon {
        width: 52px;
        height: 52px;
        border-radius: 4px;
        font-size: 1.2rem;
    }

    /* Erlebnisse page mobile */
    .erlebnis-category {
        margin-bottom: 1.5rem;
    }

    .erlebnis-category__header {
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .erlebnis-category__icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 4px;
        font-size: 1rem;
    }

    .erlebnis-category__title {
        font-size: 1.2rem;
    }

    .erlebnis-category__desc {
        font-size: 0.85rem;
    }

    .erlebnis-grid {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .erlebnis-card {
        padding: 0.85rem 1rem;
        border-radius: 4px;
    }

    .erlebnis-card__icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        border-radius: 4px;
        font-size: 0.95rem;
    }

    .erlebnis-card__content h3 {
        font-size: 0.92rem;
    }

    .erlebnis-card__content p {
        font-size: 0.8rem;
    }

    /* Floor sections mobile */
    .floor-section-title {
        margin-bottom: 1.75rem;
        padding-bottom: 1.25rem;
        gap: 1rem;
    }
    
    .floor-section-title h2 {
        font-size: 1.4rem !important;
    }

    .floor-section-title i {
        width: 40px;
        height: 40px;
        border-radius: 4px;
        font-size: 0.95rem;
    }

    /* Error page mobile */
    .error-page h1 {
        font-size: 5rem;
    }
    
    .error-page h2 {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .feature-card-v2 {
        border-radius: 4px !important;
    }
    
    .room-card {
        border-radius: 4px !important;
    }
    
    .room-card img {
        height: 180px !important;
    }
}

/* ==========================================
   21. SKELETON LOADING
   ========================================== */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary, #f4f7f6) 25%,
        var(--bg-tertiary, #eef2f0) 50%,
        var(--bg-secondary, #f4f7f6) 75%
    ) !important;
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================
   22. BUTTON RIPPLE ANIMATION (JS-driven)
   ========================================== */
@keyframes ripple-out {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* ==========================================
   23. PRINT STYLES
   ========================================== */
@media print {
    .site-header,
    footer,
    .hero-section,
    .scroll-down-indicator,
    .btn,
    .mobile-nav {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .site-main {
        padding-top: 0 !important;
    }
}