@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

/* ═══════════════════════════════════════════════════════════════
   Das ELB Hotel — Visual Overrides & Polishing
   Applied after all framework CSS to fix, enhance, and ensure
   full visual fidelity across desktop, tablet, and mobile.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. FONT VARIABLES ──────────────────────────────────────── */
:root {
  --font-playfair-display: 'Playfair Display';
  --font-inter: 'Inter';
  --font-cormorant: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;

  /* ── Design System: Premium Color Palette ── */
  --color-bg: #FAFAF8;
  --color-bg-alt: #F5F3EF;
  --color-bg-dark: #0c1718;
  --color-bg-dark-alt: #111F20;
  --color-text: #1A1A1A;
  --color-text-muted: #6B6B6B;
  --color-text-light: #FDFBF7;
  --color-text-light-muted: rgba(253, 251, 247, 0.7);
  --color-gold: #C5A059;
  --color-gold-light: #D4B576;
  --color-gold-dark: #A8863E;
  --color-green: #247A6E;
  --color-green-light: #379E90;
  --color-green-dark: #1B5C53;
  --color-border: rgba(197, 160, 89, 0.15);
  --color-border-light: rgba(255, 255, 255, 0.08);

  /* ── Design System: Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
  --shadow-gold: 0 4px 20px rgba(197, 160, 89, 0.15);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.1);

  /* ── Design System: Border Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ── Design System: Typography Scale ── */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* ── Design System: Spacing Scale ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
}

/* ─── 1b. TYPOGRAPHY — Cormorant Garamond for headings ──────── */
h1, h2, h3 {
  font-family: var(--font-cormorant);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }

@media (max-width: 768px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-xl); }
}

/* ─── 2. BASE IMPROVEMENTS ───────────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-inter, 'Inter', ui-sans-serif, system-ui, sans-serif);
  overflow-x: hidden;
}

/* ─── 3. CUSTOM SCROLLBAR ─────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg-dark); }
::-webkit-scrollbar-thumb {
  background: var(--color-green);
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-bg-dark);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-green-light); }
* { scrollbar-width: thin; scrollbar-color: var(--color-green) var(--color-bg-dark); }

/* ─── 4. TEXT SELECTION ──────────────────────────────────────── */
::selection { background: rgba(197,160,89,.35); color: var(--color-text-light); }
::-moz-selection { background: rgba(197,160,89,.35); color: var(--color-text-light); }

/* ─── 5. ACCESSIBILITY – FOCUS STATES ───────────────────────── */
:focus { outline: none; }
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ─── 6. SECTION OVERFLOW GUARD ─────────────────────────────── */
section {
  overflow-x: clip;
}

/* ─── 7. HORIZONTAL SCROLL CONTAINERS ──────────────────────────
   The compiled CSS sets overflow-x: hidden — fix to auto.        */
.horizontal-scroll-container {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.horizontal-scroll-container::-webkit-scrollbar { display: none; }
.horizontal-scroll-container > * { scroll-snap-align: start; }

[class*="overflow-x-auto"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ─── 8. NESTED SCROLL: PREVENT LENIS CHAINING ──────────────────
   Problem: Lenis.checkNestedScroll() lets native scroll handle the
   inner element while it CAN scroll, but at boundary it reverts
   control to Lenis — which then scrolls the page.

   CSS part: enforce overscroll-behavior: contain so that once the
   native scroll fallback is active, it won't propagate further.
   JS part: data-lenis-prevent is added via the script in index.html
   using MutationObserver (covers dynamically-rendered tabs/modals). */

[data-lenis-prevent],
[class*="overflow-y-auto"],
[class*="overflow-y-scroll"],
.custom-scrollbar {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ─── 9. CSS VARIABLE OVERRIDE — LIGHT SECTIONS ─────────────────
   Root cause of inline-style contrast issues:
   • --white-soft (#ffffffe0) is used in many style={{color:...}} props
   • --accent-gold (#C5A059) has insufficient contrast on cream/gold bg
   Redefining these per-section scopes the fix without touching global */

.section-pattern-2,
.section-pattern-3,
.light-section {
  /* Redefine CSS vars so var()-using inline styles resolve to dark */
  --white-soft: #1A2F24;
  --white-muted: rgba(26,47,36,.7);
  --bg-deep: #1A2F24;
  --bg-soft: #247a6e;
  /* Darken gold for AA contrast on light backgrounds */
  --accent-gold: #8a6e2e;
  --accent-gold-soft: #7a612a;
  /* Section-level inherited color */
  color: #1A2F24;
}

/* Dark sub-containers within light sections restore their variables */
.section-pattern-2 [class*="bg-forest-9"],
.section-pattern-2 [class*="bg-forest-8"],
.section-pattern-2 [class*="bg-forest-7"],
.section-pattern-2 [class*="bg-base-9"],
.section-pattern-2 [class*="bg-base-8"],
.section-pattern-3 [class*="bg-forest-9"],
.section-pattern-3 [class*="bg-base-9"],
.light-section [class*="bg-forest-9"],
.light-section [class*="bg-forest-8"],
.light-section [class*="bg-base-9"] {
  --white-soft: #ffffffe0;
  --white-muted: rgba(255,255,255,.65);
  --accent-gold: #C5A059;
  --accent-gold-soft: #C5A059;
  color: #FDFBF7;
}

/* ─── 10. TEXT CLASS OVERRIDES — LIGHT SECTIONS ──────────────────
   Class-based white/light text → forced dark in light sections.
   Covers Tailwind classes like text-white, text-forest-50/100/200.
   The !important beats .text-white{color:var(--color-white)} (no !). */

.section-pattern-2 [class*="text-white"],
.section-pattern-3 [class*="text-white"],
.light-section [class*="text-white"] {
  color: #1A2F24 !important;
}

.section-pattern-2 [class*="text-forest-5"],
.section-pattern-2 [class*="text-forest-100"],
.section-pattern-2 [class*="text-forest-200"],
.section-pattern-3 [class*="text-forest-5"],
.section-pattern-3 [class*="text-forest-100"],
.section-pattern-3 [class*="text-forest-200"],
.light-section [class*="text-forest-5"],
.light-section [class*="text-forest-100"],
.light-section [class*="text-forest-200"] {
  color: #1a5c5e !important;
}

/* Accent / gold text: darkened for AA contrast on light bg */
.section-pattern-2 [class*="text-accent-gold"],
.section-pattern-2 [class*="text-earth-"],
.section-pattern-3 [class*="text-accent-gold"],
.light-section [class*="text-accent-gold"],
.light-section [class*="text-accent-gold-soft"] {
  color: #8a6e2e !important;
}

/* RESTORATION: Dark sub-containers — text-white children stay white */
.section-pattern-2 [class*="bg-forest-9"] [class*="text-white"],
.section-pattern-2 [class*="bg-forest-8"] [class*="text-white"],
.section-pattern-2 [class*="bg-forest-7"] [class*="text-white"],
.section-pattern-2 [class*="bg-base-9"] [class*="text-white"],
.section-pattern-2 [class*="bg-base-8"] [class*="text-white"],
.section-pattern-3 [class*="bg-forest-9"] [class*="text-white"],
.section-pattern-3 [class*="bg-base-9"] [class*="text-white"],
.light-section [class*="bg-forest-9"] [class*="text-white"],
.light-section [class*="bg-forest-8"] [class*="text-white"],
.light-section [class*="bg-base-9"] [class*="text-white"] {
  color: #FDFBF7 !important;
}

/* ─── 11. SECTION-PATTERN-1 (dark green) ─────────────────────────
   Hero, restaurant outer, events dark: always light text.          */
.section-pattern-1 {
  color: #FDFBF7;
}
.section-pattern-1 h1,
.section-pattern-1 h2,
.section-pattern-1 h3,
.section-pattern-1 p:not([class*="card-body"]):not([class*="card-subtitle"]),
.section-pattern-1 li,
.section-pattern-1 label {
  color: #FDFBF7;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* ─── 12. LIGHT-SECTION (restaurant panel #DEF4C6) ──────────────
   Already covered by section vars above, but add element-level rules
   for full coverage of headings, body, meta text.                  */
.light-section h1,
.light-section h2,
.light-section h3,
.light-section h4,
.light-section h5,
.light-section h6 {
  color: #1A2F24 !important;
  text-shadow: none !important;
}
.light-section p,
.light-section li,
.light-section label,
.light-section dd,
.light-section dt {
  color: rgba(26,47,36,.85) !important;
  text-shadow: none !important;
}
.light-section small,
.light-section .text-xs:not([class*="text-forest-"]):not([class*="text-accent-"]):not([class*="text-[#"]) {
  color: rgba(26,47,36,.65) !important;
}
/* Prevent dark shadow on dark text in light containers */
.light-section h1,
.light-section h2,
.light-section h3,
.light-section h4,
.light-section span,
.light-section p,
.light-section li {
  text-shadow: none !important;
}

/* Buttons with dark bgs inside light-section keep white text */
.light-section [class*="bg-forest-6"],
.light-section [class*="bg-forest-7"],
.light-section [class*="bg-forest-8"],
.light-section [class*="bg-forest-9"],
.light-section [class*="bg-base-9"] {
  color: #FDFBF7 !important;
}

/* ─── 13. SECTION-PATTERN-2 element-level rules ─────────────────
   Belt-and-suspenders for h/p/label inside cream sections.         */
.section-pattern-2 h1,
.section-pattern-2 h2,
.section-pattern-2 h3,
.section-pattern-2 h4,
.section-pattern-2 p:not([class*="card-body"]):not([class*="card-subtitle"]),
.section-pattern-2 li,
.section-pattern-2 label {
  color: #1A2F24 !important;
  text-shadow: none !important;
}

.section-pattern-2 h1 span,
.section-pattern-2 h2 span,
.section-pattern-2 h3 span {
  text-shadow: none !important;
}

/* Restore dark-bg heading spans */
.section-pattern-2 [class*="bg-forest-9"] h2,
.section-pattern-2 [class*="bg-base-9"] h2,
.section-pattern-2 [class*="bg-forest-9"] h3,
.section-pattern-2 [class*="bg-base-9"] h3 {
  color: #FDFBF7 !important;
}

/* ─── 14. GLOBAL BUTTON CONTRAST HARDENING ───────────────────── */
[class*="bg-forest-6"] { color: #FDFBF7; }
[class*="bg-forest-7"] { color: #FDFBF7; }
[class*="bg-forest-8"] { color: #FDFBF7; }
[class*="bg-forest-9"] { color: #FDFBF7; }
[class*="bg-base-9"] { color: #FDFBF7; }
[class*="border-forest-"][class*="text-white"] { color: #FDFBF7; }

/* ─── 15. IMAGE / VIDEO BACKGROUND OVERLAYS ─────────────────────
   Ensure gradient overlays are dark enough to make text legible.   */

/* Room photo cards: overlay gradient */
.card-glass-overlay { transition: background .35s ease; }
[data-room-card]:hover .card-glass-overlay,
[data-card]:hover .card-glass-overlay {
  background: linear-gradient(
    rgba(26,47,36,.45),
    rgba(26,47,36,.40) 40%,
    rgba(26,47,36,.62) 70%,
    rgba(26,47,36,.85)
  ) !important;
}

/* Text directly on image/video backgrounds should always be white */
[class*="absolute"][class*="inset-"] [class*="text-forest-5"],
[class*="absolute"][class*="inset-"] [class*="text-forest-100"],
[class*="absolute"][class*="inset-"] [class*="text-forest-200"] {
  color: rgba(255,255,255,.9) !important;
}

/* ─── 16. HERO SECTION POLISH ────────────────────────────────── */
#hero .font-serif {
  text-rendering: geometricPrecision;
}
#hero p { letter-spacing: .01em; }

/* ─── 17. NAVIGATION POLISH ──────────────────────────────────── */
nav {
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
}
nav a { text-decoration: none; }
nav a.group { padding: 4px 0; }

/* ─── 18. FORM INPUTS ────────────────────────────────────────── */
input, textarea, select {
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(197,160,89,.25);
}
input::placeholder, textarea::placeholder { opacity: .55; }

/* Inputs inside light sections: force dark text + border */
.section-pattern-2 input:not([class*="!bg-"]):not([class*="bg-white/"]),
.section-pattern-2 select:not([class*="!bg-"]):not([class*="bg-white/"]){
  color: #1A2F24;
  border-color: rgba(26,47,36,.3);
}
/* Inputs inside dark sub-panels stay light */
.section-pattern-2 [class*="bg-forest-9"] input,
.section-pattern-2 [class*="bg-base-9"] input,
.section-pattern-2 [class*="bg-forest-9"] select,
.section-pattern-2 [class*="bg-base-9"] select {
  color: #FDFBF7;
}

/* ─── 19. BUTTON POLISH ──────────────────────────────────────── */
button a, [role="button"] a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* ─── 20. IMAGE QUALITY ──────────────────────────────────────── */
img { image-rendering: auto; }

/* ─── 21. LOADING SCREEN ─────────────────────────────────────── */
.fixed.inset-0.z-\[10000\] .font-serif {
  font-family: 'Playfair Display', Georgia, serif;
}

/* ─── 22. FAQ / ACCORDION ─────────────────────────────────────── */
#faq button, #faq [role="button"] { color: inherit; }

/* ─── 23. RESPONSIVE TYPOGRAPHY ─────────────────────────────── */
@media (max-width: 375px) {
  .hero-title {
    font-size: clamp(2.25rem, 12vw, 3.5rem) !important;
    letter-spacing: -.04em;
  }
}
@media (max-width: 1024px) {
  [data-about-image-wrapper] { clip-path: inset(0 0 0 0) !important; }
}

/* ─── 24. RESTAURANT / GALLERY ───────────────────────────────── */
.aspect-\[4\/3\] img, .aspect-\[3\/4\] img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── 25. GOLD ACCENT CONSISTENCY ───────────────────────────── */
[stroke="var(--accent-gold)"] { stroke: #C5A059; }

/* ─── 26. CONTACT / MAP AREA ─────────────────────────────────── */
#kontakt iframe {
  border-radius: var(--radius-lg);
  filter: saturate(.7) brightness(.85) sepia(.2);
}

/* ─── 27. MODAL / OVERLAY Z-ORDER ───────────────────────────── */
[class*="z-\[9999\]"] { isolation: isolate; }

/* ─── 28. PRINT STYLES ───────────────────────────────────────── */
@media print {
  .fixed, nav, [class*="z-[80]"], [class*="z-[55]"] { display: none !important; }
  body { background: white; color: black; }
}

/* Remove DAS ELB text from header nav */
header span.font-serif,
nav span.font-serif,
[data-interactive] span[class*="font-serif"] {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   SESSION 4 — PREMIUM REDESIGN & QA PASS
   Goal: luxury hotel polish, motion, hierarchy, readability
   ═══════════════════════════════════════════════════════════════ */

/* ─── A. GLOBAL TYPOGRAPHY REFINEMENT ───────────────────────────
   Tighten the scale so every heading feels intentional.          */
h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
h2 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
}
h3 {
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
}
p {
  line-height: 1.7;
  letter-spacing: 0.005em;
}

/* ─── B. SCROLL-REVEAL ENTRANCE ANIMATIONS ──────────────────────
   Sections and cards animate in as they enter the viewport.      */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.section-pattern-1,
.section-pattern-2,
.section-pattern-3 {
  animation: fadeIn 0.6s ease both;
}

/* ─── C. HERO SECTION ────────────────────────────────────────── */
/* Stronger gradient so headline text pops on all photos/videos   */
#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(15,30,23,.35)  0%,
      rgba(15,30,23,.10) 35%,
      rgba(15,30,23,.18) 55%,
      rgba(15,30,23,.65) 80%,
      rgba(15,30,23,.88) 100%
    );
  pointer-events: none;
  z-index: 1;
}
/* Hero title — stronger presence */
.hero-title {
  font-size: clamp(2.8rem, 7.5vw, 6.5rem) !important;
  font-weight: 900 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.035em !important;
  text-shadow:
    0 2px 8px rgba(0,0,0,.55),
    0 6px 32px rgba(0,0,0,.30) !important;
}
/* Subtitle / tagline below hero heading */
#hero p {
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  letter-spacing: 0.04em;
}

/* ─── D. NAVIGATION UPGRADES ─────────────────────────────────── */
/* Pill link hover state */
.nav-pill li a,
.nav-pill-scrolled li a {
  transition: color .2s ease, background .2s ease, padding .2s ease;
  border-radius: 999px;
  padding: 5px 12px !important;
}
.nav-pill li a:hover,
.nav-pill-scrolled li a:hover {
  background: rgba(197,160,89,.15);
  color: #C5A059 !important;
}
/* Active / current nav item */
.nav-pill li a[aria-current="page"],
.nav-pill-scrolled li a[aria-current="page"] {
  background: rgba(197,160,89,.20);
  color: #C5A059 !important;
}
/* Nav CTA button (Reservieren / Book) */
nav [class*="bg-accent-gold"],
nav [class*="btn-primary"],
nav button[class*="rounded-full"] {
  box-shadow: 0 2px 12px rgba(197,160,89,.35) !important;
  transition: box-shadow .25s ease, transform .18s ease !important;
}
nav [class*="bg-accent-gold"]:hover,
nav button[class*="rounded-full"]:hover {
  box-shadow: 0 4px 20px rgba(197,160,89,.55) !important;
  transform: translateY(-1px) !important;
}

/* ─── E. ROOM CARDS — PREMIUM HOVER ─────────────────────────── */
/* Lift + subtle shadow on card hover */
[data-room-card],
[data-card] {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1),
              box-shadow .3s ease !important;
  border-radius: 16px;
  overflow: hidden;
  will-change: transform;
}
[data-room-card]:hover,
[data-card]:hover {
  transform: translateY(-6px) scale(1.005) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.20) !important;
}
/* Image zoom on card hover */
[data-room-card]:hover img,
[data-card]:hover img {
  transform: scale(1.04) !important;
  transition: transform .55s cubic-bezier(.25,.46,.45,.94) !important;
}
[data-room-card] img,
[data-card] img {
  transition: transform .55s cubic-bezier(.25,.46,.45,.94) !important;
}
/* Card overlay: reveal more info on hover */
.card-glass-overlay {
  transition: background .4s ease, -webkit-backdrop-filter .4s ease !important;
}
/* Card text hierarchy improvement */
.card-title {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0.25rem;
}
.card-price {
  font-size: clamp(1.25rem, 3vw, 1.6rem) !important;
}
.card-subtitle {
  font-size: 0.78rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ─── F. BUTTONS & CTA ───────────────────────────────────────── */
/* All buttons: remove jank, add smooth transitions */
button, [role="button"], a[class*="btn"] {
  transition: transform .18s ease, box-shadow .22s ease,
              background .2s ease, border-color .2s ease,
              opacity .18s ease !important;
  -webkit-tap-highlight-color: transparent;
}
button:hover:not(:disabled) { transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(0) scale(.98); }

/* Gold / primary CTA buttons */
[class*="bg-accent-gold"]:not(nav *),
[class*="bg-\[#C5A059\]"],
[class*="bg-\[#c5a059\]"] {
  box-shadow: 0 3px 14px rgba(197,160,89,.30) !important;
}
[class*="bg-accent-gold"]:hover:not(nav *),
[class*="bg-\[#C5A059\]"]:hover {
  box-shadow: 0 6px 22px rgba(197,160,89,.50) !important;
}
/* btn-shimmer: animated gold sheen */
.btn-shimmer::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,.18) 50%,
    transparent 60%
  );
  transition: left .45s ease;
  pointer-events: none;
}
.btn-shimmer:hover::before { left: 100%; }

/* ── Nav "Buchen" button → gold with white text ──────────────────── */
a[href="#rooms-view"].btn-shimmer,
a[href="/#rooms-view"].btn-shimmer {
  background: linear-gradient(135deg, #C5A059 0%, #a8843d 100%) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.2) !important;
  box-shadow: 0 4px 18px rgba(197,160,89,0.35) !important;
  font-weight: 700 !important;
  min-width: 110px !important;
  justify-content: center !important;
}
a[href="#rooms-view"].btn-shimmer span,
a[href="/#rooms-view"].btn-shimmer span {
  color: #fff !important;
}
a[href="#rooms-view"].btn-shimmer:hover,
a[href="/#rooms-view"].btn-shimmer:hover {
  box-shadow: 0 6px 24px rgba(197,160,89,0.55) !important;
  transform: translateY(-1px);
}

/* ── Floating circular booking FAB → gold ────────────────────────── */
button.bg-green-600,
button[class*="bg-green-600"] {
  background: linear-gradient(135deg, #C5A059 0%, #a8843d 100%) !important;
  box-shadow: 0 8px 28px rgba(197,160,89,0.5) !important;
}
button.bg-green-600:hover,
button[class*="bg-green-600"]:hover {
  background: linear-gradient(135deg, #d4af6a 0%, #C5A059 100%) !important;
  box-shadow: 0 12px 36px rgba(197,160,89,0.65) !important;
}
button.bg-green-600 svg,
button[class*="bg-green-600"] svg {
  color: #060e09 !important;
  stroke: #060e09 !important;
}

/* Ghost / outline buttons on dark backgrounds: make border visible */
[class*="border-white/"][class*="text-white"]:not([class*="bg-forest"]) {
  border-color: rgba(255,255,255,.55) !important;
}
[class*="border-white/"][class*="text-white"]:hover:not([class*="bg-forest"]) {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.80) !important;
}
[class*="border-accent-gold"]:not([class*="bg-accent-gold"]) {
  border-color: rgba(197,160,89,.65) !important;
}
[class*="border-accent-gold"]:hover:not([class*="bg-accent-gold"]) {
  background: rgba(197,160,89,.08) !important;
  border-color: #C5A059 !important;
}

/* ─── G. SECTION SPACING & DIVIDERS ─────────────────────────── */
/* Thin gold accent line under section headings */
.section-pattern-1 h2::after,
.section-pattern-2 h2::after,
.section-pattern-3 h2::after {
  display: none; /* handled by existing design, don't double */
}
/* Consistent vertical rhythm */
.section-pattern-1,
.section-pattern-2,
.section-pattern-3 {
  padding-top: clamp(4rem, 8vw, 7rem) !important;
  padding-bottom: clamp(4rem, 8vw, 7rem) !important;
}

/* ─── H. IMAGE & VIDEO POLISH ────────────────────────────────── */
img {
  image-rendering: auto;
  image-rendering: -webkit-optimize-contrast;
}
/* Lazy-loaded images: smooth fade in */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity .45s ease;
}
img[loading="lazy"].loaded,
img[loading="lazy"][src] {
  opacity: 1;
}
/* Video poster fade */
video { background: var(--color-bg-dark); }

/* ─── I. EVENTS SECTION ─────────────────────────────────────── */
/* Event cards: improve hover glow */
[class*="event-card"],
[class*="event_card"] {
  transition: transform .28s ease, box-shadow .28s ease !important;
}
[class*="event-card"]:hover,
[class*="event_card"]:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.28) !important;
}
/* Event date badges — ensure legible */
[class*="rounded-full"][class*="bg-accent-gold"] {
  font-weight: 700 !important;
  letter-spacing: .03em;
}

/* ─── J. RESTAURANT / MENU SECTION ──────────────────────────── */
/* Menu item hover */
[class*="menu-item"]:hover,
[class*="dish-card"]:hover {
  background: rgba(197,160,89,.06) !important;
}
/* Horizontal rule / separator between menu items */
[class*="border-b"][class*="border-white/"] {
  border-color: rgba(255,255,255,.10) !important;
}
.section-pattern-2 [class*="border-b"][class*="border-white/"] {
  border-color: rgba(26,47,36,.12) !important;
}

/* ─── K. ABOUT / STORY SECTION ───────────────────────────────── */
/* Clip-path image reveal already done; improve text block */
[data-about-image-wrapper] img {
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
[data-about-image-wrapper]:hover img {
  transform: scale(1.03);
}

/* ─── L. FORM & CONTACT SECTION ─────────────────────────────── */
input, textarea, select {
  border-radius: var(--radius-md) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--color-gold) !important;
  box-shadow: 0 0 0 3px rgba(197,160,89,.18) !important;
}
label {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* ─── M. GALLERY SECTION ─────────────────────────────────────── */
/* Smooth scale on gallery image hover */
[class*="gallery"] img,
[class*="aspect-["] img {
  transition: transform .5s cubic-bezier(.25,.46,.45,.94) !important;
}
[class*="gallery"] [class*="overflow-hidden"]:hover img,
[class*="group"]:hover [class*="aspect-["] img {
  transform: scale(1.06) !important;
}

/* ─── N. FOOTER ──────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--color-border);
}
footer a {
  transition: color .2s ease;
  opacity: .75;
}
footer a:hover {
  color: var(--color-gold) !important;
  opacity: 1;
}
footer [class*="text-white"] {
  color: rgba(253,251,247,.8) !important;
}

/* ─── O. LOADING SCREEN POLISH ───────────────────────────────── */
/* Gold progress bar */
.fixed.inset-0.z-\[10000\] [class*="bg-accent-gold"],
.fixed.inset-0.z-\[10000\] [class*="bg-\[#C5A059\]"] {
  box-shadow: 0 0 12px rgba(197,160,89,.5);
}
/* Loading counter text */
.fixed.inset-0.z-\[10000\] [class*="tracking-\["] {
  letter-spacing: 0.3em !important;
}

/* ─── P. SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { border-radius: 3px; border-width: 1px; }

/* ─── Q. MOBILE REFINEMENTS (≤768px) ────────────────────────── */
@media (max-width: 768px) {
  /* Bigger tap targets */
  button, [role="button"], a {
    min-height: 44px;
  }
  nav [role="button"],
  nav button,
  nav a {
    min-height: 36px;
  }
  /* Disable card lift on mobile (prefer tap, not hover) */
  [data-room-card]:hover,
  [data-card]:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  [data-room-card]:hover img,
  [data-card]:hover img {
    transform: none !important;
  }
  /* Better section padding on small screens */
  .section-pattern-1,
  .section-pattern-2,
  .section-pattern-3 {
    padding-top: clamp(3rem, 10vw, 5rem) !important;
    padding-bottom: clamp(3rem, 10vw, 5rem) !important;
  }
  .hero-title {
    font-size: clamp(2.4rem, 11vw, 3.5rem) !important;
  }
}

/* ─── R. MICRO INTERACTION: IMAGE LAZY-LOAD REVEAL ──────────── */
/* Trigger .loaded via injected script in index.html */

/* ─── Gallery section dark cream background ──────────────────── */
#galerie.section-pattern-2,
#galerie {
  background: #E8E2D6 !important;
  background-color: #E8E2D6 !important;
}
#galerie.section-pattern-2::before,
#galerie.section-pattern-2::after {
  display: none !important;
}
/* Dark green text in galerie */
#galerie h2,
#galerie h3,
#galerie p,
#galerie span {
  color: #1A2F24 !important;
}
#galerie [style*="accent-gold"],
#galerie [class*="text-earth-"] {
  color: #C5A059 !important;
}

/* ─── Galerie: Hero slideshow layout ─────────────────────────── */
/* Hide original grid */
#galerie .grid.grid-cols-2 {
  display: none !important;
}

/* Slideshow container */
#galerie-slideshow {
  position: relative;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

#galerie-slideshow img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0 !important;
  transition: opacity 1.2s ease-in-out !important;
  z-index: 1 !important;
}

#galerie-slideshow img.galerie-active {
  opacity: 1 !important;
  z-index: 2 !important;
}

/* Progress dots */
#galerie-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 1.25rem;
}

#galerie-dots .galerie-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(26, 47, 36, 0.25);
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  padding: 0;
}

#galerie-dots .galerie-dot.active {
  background: #1A2F24;
  transform: scale(1.3);
}

/* Nav arrows */
#galerie-slideshow .galerie-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(26,47,36,0.15);
  color: #1A2F24;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, opacity 0.3s;
  opacity: 0;
}

#galerie-slideshow:hover .galerie-arrow {
  opacity: 1;
}

#galerie-slideshow .galerie-arrow.prev { left: 16px; }
#galerie-slideshow .galerie-arrow.next { right: 16px; }

#galerie-slideshow .galerie-arrow:hover {
  background: rgba(255,255,255,0.95);
}

@media (max-width: 767px) {
  #galerie-slideshow {
    border-radius: 0.75rem;
    aspect-ratio: 4 / 3;
  }
  #galerie-slideshow .galerie-arrow {
    width: 36px;
    height: 36px;
    opacity: 0.8;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ROOMS SECTION — PREMIUM REDESIGN
   ═══════════════════════════════════════════════════════════════ */

/* Rooms section: use section default background */
#rooms-view.section-pattern-2,
#rooms-view {
  background-color: inherit;
  background-image: none !important;
}

/* ── Section header: gold text ──────────────────────────────── */
#rooms-view .text-center span[class*="tracking"] {
  color: #C5A059 !important;
  text-shadow: 0 0 20px rgba(197,160,89,0.3);
}
#rooms-view .text-center h2 {
  background: linear-gradient(135deg, #f0d48a 0%, #C5A059 40%, #a8843d 70%, #d4b06a 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 2px 12px rgba(197,160,89,0.4));
}
#rooms-view .text-center p {
  color: rgba(255,255,255,0.85) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

/* ── Gold divider under header ──────────────────────────────── */
#rooms-view .text-center::after {
  content: '';
  display: block;
  width: 80px;
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, #C5A059, #a8843d, transparent);
  border-radius: 2px;
}

/* ── Card grid: wider gaps, better spacing ──────────────────── */
#rooms-view [class*="grid-cols"] {
  gap: 20px !important;
}

/* ── Individual cards: gold-anchored premium glass ──────────── */
#rooms-view [data-room-card] {
  background: linear-gradient(
    165deg,
    rgba(197,160,89,0.18) 0%,
    rgba(168,132,61,0.12) 50%,
    rgba(197,160,89,0.2) 100%
  ) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
  border: 1px solid rgba(197,160,89,0.35) !important;
  border-radius: 20px !important;
  box-shadow:
    0 4px 30px rgba(0,0,0,0.4),
    0 1px 0 rgba(197,160,89,0.25) inset,
    0 -1px 0 rgba(0,0,0,0.2) inset !important;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
  min-height: 520px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Card hover: stronger gold glow lift */
#rooms-view [data-room-card]:hover {
  border-color: rgba(197,160,89,0.6) !important;
  box-shadow:
    0 25px 60px rgba(0,0,0,0.5),
    0 8px 30px rgba(197,160,89,0.25),
    0 1px 0 rgba(197,160,89,0.4) inset !important;
  transform: translateY(-8px) scale(1.01) !important;
}

/* Card top gold accent bar — always visible, brighter on hover */
#rooms-view [data-room-card]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #C5A059 30%, #d4b06a 50%, #C5A059 70%, transparent);
  z-index: 20;
  opacity: 0.5;
  transition: opacity 0.4s ease;
}
#rooms-view [data-room-card]:hover::before {
  opacity: 1;
}

/* ── Card images: better visibility ─────────────────────────── */
#rooms-view [data-room-card] img {
  opacity: 0.85 !important;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
#rooms-view [data-room-card]:hover img {
  opacity: 1 !important;
  transform: scale(1.06) !important;
}

/* ── Glass overlay: gold-toned gradient ─────────────────────── */
#rooms-view .card-glass-overlay,
#rooms-view .card-glass-overlay-strong {
  background: linear-gradient(
    to top,
    rgba(197,160,89,0.72) 0%,
    rgba(168,132,61,0.45) 30%,
    rgba(197,160,89,0.15) 60%,
    rgba(197,160,89,0.04) 100%
  ) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Card titles: gold gradient ─────────────────────────────── */
#rooms-view [data-room-card] .card-title,
#rooms-view [data-room-card] h3 {
  background: linear-gradient(135deg, #f0d48a, #C5A059, #a8843d) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 2px 8px rgba(197,160,89,0.35));
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  letter-spacing: 0.02em !important;
}

/* ── Card subtitles & labels ────────────────────────────────── */
#rooms-view [data-room-card] .card-subtitle,
#rooms-view [data-room-card] p[class*="text-earth"],
#rooms-view [data-room-card] p[class*="tracking"] {
  color: #C5A059 !important;
  letter-spacing: 0.12em !important;
  font-weight: 500 !important;
}

/* ── Price display ──────────────────────────────────────────── */
#rooms-view [data-room-card] .card-price {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

/* ── Size badge (40m² etc) ──────────────────────────────────── */
#rooms-view [data-room-card] span[class*="rounded"] {
  background: rgba(197,160,89,0.15) !important;
  border: 1px solid rgba(197,160,89,0.3) !important;
  color: #C5A059 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ── "APARTMENT" label ──────────────────────────────────────── */
#rooms-view [data-room-card] span[class*="text-earth"] {
  color: rgba(197,160,89,0.6) !important;
  letter-spacing: 0.15em !important;
}

/* ── Amenity list items ─────────────────────────────────────── */
#rooms-view [data-room-card] ul li {
  color: rgba(255,255,255,0.85) !important;
}
#rooms-view [data-room-card] ul li svg {
  color: #C5A059 !important;
}

/* ── Price bar animation: gold ──────────────────────────────── */
#rooms-view [data-room-card] [class*="bg-river"],
#rooms-view [data-room-card] [class*="bg-forest-4"],
#rooms-view [data-room-card] [class*="bg-earth"] {
  background-color: #C5A059 !important;
}

/* ── Card description text ──────────────────────────────────── */
#rooms-view [data-room-card] p {
  color: rgba(255,255,255,0.75) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ── Book button inside cards ───────────────────────────────── */
#rooms-view [data-room-card] a[class*="rounded"],
#rooms-view [data-room-card] button[class*="rounded"] {
  border-color: rgba(197,160,89,0.4) !important;
}
#rooms-view [data-room-card] a[class*="rounded"]:hover,
#rooms-view [data-room-card] button[class*="rounded"]:hover {
  background: linear-gradient(135deg, #C5A059, #a8843d) !important;
  border-color: #C5A059 !important;
  color: #060e09 !important;
}

/* ── "/ Nacht" text ─────────────────────────────────────────── */
#rooms-view [data-room-card] span[class*="text-sm"] {
  color: rgba(255,255,255,0.5) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.5) !important;
}

/* ── Inactive card center title: bigger, gold ───────────────── */
#rooms-view [data-room-card] .card-title.text-center {
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
  text-shadow: none;
  filter: drop-shadow(0 4px 16px rgba(197,160,89,0.4));
}

/* ── "+X weitere Annehmlichkeiten" ──────────────────────────── */
#rooms-view [data-room-card] ul li[class*="text-xs"] {
  color: rgba(197,160,89,0.7) !important;
}

/* Restaurant Empfehlung card — keep background gold (all variants) */
#restaurant-view .light-section,
#restaurant-view [class*="bg-\[#DEF4C6\]"],
#restaurant-view [class*="bg-\[#C5A059\]"],
#restaurant-view [class*="rounded-3xl"][class*="overflow-hidden"][class*="border"],
#restaurant-view [class*="rounded-3xl"][class*="overflow-hidden"][class*="shadow"] {
  background-color: #C5A059 !important;
}

/* Ensure the text-content column (right half of grid) inherits gold */
#restaurant-view [class*="rounded-3xl"][class*="overflow-hidden"] > div > [class*="grid"] > div:last-child,
#restaurant-view [class*="rounded-3xl"][class*="overflow-hidden"] [class*="flex"][class*="flex-col"][class*="justify-center"] {
  background-color: transparent !important;
}

/* Text colours on gold background */
#restaurant-view [class*="rounded-3xl"][class*="overflow-hidden"] [class*="text-forest-9"],
#restaurant-view [class*="rounded-3xl"][class*="overflow-hidden"] [class*="text-forest-95"] {
  color: #1A2F24 !important;
}

/* Keep badge/button colours correct */
#restaurant-view [class*="rounded-3xl"][class*="overflow-hidden"] [class*="text-white"] {
  color: #fff !important;
}

/* ─── MOBILE SCROLL FIX ──────────────────────────────────────── */
/* On touch devices, disable Lenis JS scroll and use native scroll */
@media (pointer: coarse) {
  html.lenis,
  html.lenis body {
    height: auto !important;
    overflow: auto !important;
    overscroll-behavior: auto !important;
  }
  /* Restore natural touch scrolling */
  body {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Fix nested scroll containers on mobile */
  [data-lenis-prevent] {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ─── MOBILE MEDIA PERFORMANCE ───────────────────────────────── */
/* Reduce GPU layers on mobile for smooth rendering */
@media (max-width: 768px) {
  .gallery-image,
  [data-about-image],
  .hero-bg {
    will-change: auto !important;
    transform: none !important;
  }
  /* Faster card interactions on touch */
  .card-lift {
    transition: box-shadow 0.15s ease !important;
    transform: none !important;
  }
  .card-lift:active {
    box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   JOBS / KARRIERE — PREMIUM REDESIGN
   ═══════════════════════════════════════════════════════════════ */

/* ── Base section ── */
.jobs-section {
  position: relative;
  background: #060f09;
  overflow: hidden;
  font-family: var(--font-inter, Inter, sans-serif);
}

/* ────────────────────────────────────────────────
   HERO HEADER
──────────────────────────────────────────────── */
.js-hero {
  position: relative;
  min-height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #060f09;
  overflow: hidden;
}
#stellenangebote .js-hero {
  background: url('/images/karriere-hero.jpg') center/cover no-repeat !important;
}

.js-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6,15,9,0.55) 0%,
    rgba(6,15,9,0.35) 40%,
    rgba(6,15,9,0.88) 100%
  );
}
#stellenangebote .js-hero-overlay {
  background: rgba(6,15,9,0.6) !important;
}
#stellenangebote .js-hero-title,
#stellenangebote .js-hero-sub,
#stellenangebote .js-eyebrow,
#stellenangebote .js-stat-num,
#stellenangebote .js-stat-label {
  text-shadow: 0 2px 12px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.5) !important;
}
#stellenangebote .js-eyebrow,
#stellenangebote .js-eyebrow span,
#stellenangebote .js-stat-num,
#stellenangebote .js-stat-label,
#stellenangebote .js-hero-stats,
#stellenangebote [class*="text-earth"],
#stellenangebote [class*="text-accent"],
#stellenangebote [style*="accent-gold"],
#stellenangebote [style*="--accent-gold"] {
  color: #FDFBF7 !important;
}
#stellenangebote .js-eyebrow-line {
  background: #FDFBF7 !important;
}
#stellenangebote .js-stat-divider {
  background: rgba(253,251,247,0.3) !important;
}

/* Decorative gold orbs */
.js-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  left: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197,160,89,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.js-hero::after {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36,122,110,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.js-hero-content {
  position: relative;
  z-index: 2;
  padding: 80px 40px;
  max-width: 820px;
}

.js-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 28px;
  color: #C5A059;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.js-eyebrow-line {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C5A059, transparent);
}

.js-hero-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(3rem, 6vw, 5.5rem) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  margin: 0 0 24px !important;
  text-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.js-hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.15rem) !important;
  color: rgba(255,255,255,0.72) !important;
  line-height: 1.7 !important;
  margin: 0 0 48px !important;
  max-width: 580px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Stats bar */
.js-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(197,160,89,0.2);
  border-radius: 100px;
  padding: 16px 40px;
  width: fit-content;
  margin: 0 auto;
}

.js-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 28px;
}

.js-stat-num {
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: #C5A059 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
}

.js-stat-label {
  font-size: 0.68rem !important;
  color: rgba(255,255,255,0.5) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
}

.js-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(197,160,89,0.25);
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────
   SECTION LABEL ROW
──────────────────────────────────────────────── */
.js-label-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 56px 80px 0;
  max-width: 1400px;
  margin: 0 auto;
}

.js-label-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197,160,89,0.35), transparent);
}

.js-label-text {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: #C5A059 !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ────────────────────────────────────────────────
   JOB CARDS GRID
──────────────────────────────────────────────── */
.js-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 40px 80px 70px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Individual card */
.js-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 460px;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.5s ease;
  outline: none;
}

.js-card:hover,
.js-card:focus {
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 24px 60px rgba(0,0,0,0.7),
              0 0 0 1px rgba(197,160,89,0.4);
}

/* Background images via CSS (avoids JS quote-escape bugs) */
.js-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.js-card:hover .js-card-bg {
  transform: scale(1.08);
}

.js-card-bg--empfang   { background: #0a1a10; }
.js-card-bg--restaurant { background: #0a1a10; }
.js-card-bg--kueche    { background: #0a1a10; }

/* Full gradient overlay */
.js-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(6,15,9,0.96) 0%,
    rgba(6,15,9,0.65) 45%,
    rgba(6,15,9,0.15) 100%
  );
  transition: background 0.5s ease;
}

.js-card:hover::after {
  background: linear-gradient(
    0deg,
    rgba(6,15,9,0.98) 0%,
    rgba(6,15,9,0.8) 45%,
    rgba(6,15,9,0.3) 100%
  );
}

/* Gold shimmer sweep on hover */
.js-card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    transparent 0%,
    rgba(197,160,89,0.0) 40%,
    rgba(197,160,89,0.12) 60%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.js-card:hover .js-card-shine {
  opacity: 1;
}

/* Card content */
.js-card-body {
  position: relative;
  z-index: 2;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Department tag */
.js-card-dept {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #C5A059;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.js-card-icon {
  width: 18px;
  height: 18px;
  stroke: #C5A059;
  flex-shrink: 0;
}

/* Card title */
.js-card-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Card description */
.js-card-desc {
  font-size: 0.88rem !important;
  color: rgba(255,255,255,0.65) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

/* Perks list */
.js-card-perks {
  list-style: none !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.js-card-perks li {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.5) !important;
  padding-left: 14px;
  position: relative;
}

.js-card-perks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #C5A059;
  opacity: 0.7;
}

/* CTA button */
.js-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 13px 26px;
  background: linear-gradient(135deg, #C5A059 0%, #a8843d 100%);
  border: none;
  border-radius: 100px;
  color: #060e09 !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
  width: fit-content;
  box-shadow: 0 6px 22px rgba(197,160,89,0.45);
  text-decoration: none !important;
  line-height: 1;
}

.js-card-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(197,160,89,0.6);
}

.js-card-cta:active {
  transform: scale(0.97);
}

.js-card-cta svg {
  width: 15px;
  height: 15px;
  fill: #060e09;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.js-card-cta:hover svg {
  transform: translateX(3px);
}

/* ────────────────────────────────────────────────
   WHY DAS ELB STRIP
──────────────────────────────────────────────── */
.js-why {
  background: linear-gradient(90deg, #0d2419 0%, #0f2a1e 50%, #0d2419 100%);
  border-top: 1px solid rgba(197,160,89,0.12);
  border-bottom: 1px solid rgba(197,160,89,0.12);
  padding: 40px 80px;
}

.js-why-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.js-why-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 40px;
}

.js-why-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.js-why-text {
  display: flex;
  flex-direction: column;
}

.js-why-text strong {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.js-why-text span {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.45) !important;
  margin-top: 2px;
}

.js-why-sep {
  width: 1px;
  height: 50px;
  background: rgba(197,160,89,0.2);
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────
   CONTACT PANEL
──────────────────────────────────────────────── */
.js-contact {
  padding: 60px 80px 80px;
  max-width: 1200px;
  margin: 0 auto;
}

.js-contact-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  background: linear-gradient(135deg,
    rgba(197,160,89,0.08) 0%,
    rgba(36,122,110,0.06) 100%
  );
  border: 1px solid rgba(197,160,89,0.22);
  border-radius: 20px;
  padding: 40px 60px;
  position: relative;
  overflow: hidden;
}

/* Corner ornament */
.js-contact-inner::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197,160,89,0.1) 0%, transparent 70%);
}

.js-contact-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.js-contact-pre {
  font-size: 0.82rem !important;
  color: rgba(255,255,255,0.5) !important;
  margin: 0 !important;
}

.js-contact-email {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #C5A059 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em;
  transition: color 0.3s;
  position: relative;
  display: inline-block;
}

.js-contact-email::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: #C5A059;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.js-contact-email:hover {
  color: #dbb96e !important;
}

.js-contact-email:hover::after {
  transform: scaleX(1);
}

.js-contact-divider {
  width: 1px;
  height: 60px;
  background: rgba(197,160,89,0.25);
  flex-shrink: 0;
}

.js-contact-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.js-contact-tag {
  font-size: 0.68rem !important;
  color: rgba(255,255,255,0.4) !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.js-contact-name {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

/* ────────────────────────────────────────────────
   MOBILE RESPONSIVE
──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .js-cards-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 40px 40px 60px;
  }
  .js-card {
    min-height: 320px;
  }
  .js-label-row { padding: 48px 40px 0; }
  .js-why { padding: 32px 40px; }
  .js-contact { padding: 48px 40px 60px; }
}

@media (max-width: 768px) {
  .js-hero { min-height: 85vw; }
  .js-hero-content { padding: 60px 24px; }
  .js-hero-title { font-size: clamp(2.4rem, 10vw, 3.5rem) !important; }
  .js-hero-stats {
    padding: 12px 20px;
    gap: 0;
    border-radius: 16px;
  }
  .js-stat { padding: 0 14px; }
  .js-stat-num { font-size: 1.3rem !important; }
  .js-cards-grid { padding: 32px 20px 50px; gap: 16px; }
  .js-card { min-height: 280px; }
  .js-card-title { font-size: 1.35rem !important; }
  .js-why { padding: 28px 20px; }
  .js-why-inner { gap: 16px; }
  .js-why-item { padding: 0 12px; }
  .js-why-sep { display: none; }
  .js-label-row { padding: 40px 20px 0; }
  .js-contact { padding: 40px 20px 50px; }
  .js-contact-inner {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
    gap: 24px;
  }
  .js-contact-divider { width: 60px; height: 1px; }
  .js-contact-email { font-size: 1.2rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   OWNER / INHABER SECTION — Responsive Grid Support
   ═══════════════════════════════════════════════════════════════ */

/* The section itself and most child elements use inline styles for
   guaranteed rendering regardless of CSS specificity wars.
   Only layout-critical responsive overrides go here. */

/* ── Owner section: comprehensive mobile fixes ── */
#inhaber {
  overflow-x: hidden !important;
}

@media (max-width: 900px) {
  /* Stack grid to single column */
  .ow-main-grid {
    grid-template-columns: 1fr !important;
    padding: 40px 24px 60px !important;
    gap: 40px !important;
  }

  /* Portrait column: center, no side padding */
  .ow-portrait-col {
    padding-right: 0 !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* Constrain portrait frame width on mobile */
  .ow-portrait-frame {
    max-width: min(300px, 80vw) !important;
    width: 100% !important;
  }

  /* Content column: left aligned, no padding */
  .ow-content-col {
    padding-left: 0 !important;
    width: 100% !important;
  }

  /* Name smaller on mobile */
  .ow-content-col h2 {
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
  }

  /* Facts: ensure they don't overflow */
  .ow-content-col > div > div {
    flex-wrap: nowrap !important;
  }

  /* CTA row: wrap on small screens */
  .ow-content-col > div:last-child {
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  /* Top/bottom ornaments: tighter padding on mobile */
  .ow-orn-top {
    padding: 40px 24px 0 !important;
  }
  .ow-orn-bot {
    padding: 0 24px 40px !important;
  }
}

@media (max-width: 480px) {
  .ow-main-grid {
    padding: 32px 16px 50px !important;
  }
  .ow-content-col h2 {
    font-size: clamp(1.8rem, 10vw, 2.4rem) !important;
  }
  /* Stack CTA buttons vertically */
  .ow-content-col > div:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATIONS
   content-visibility, will-change, aspect-ratio, CLS prevention
═══════════════════════════════════════════════════════════════════════ */

/* content-visibility: applied only to sections that are truly off-screen
   on first load. #restaurant-view is the FIRST section after hero —
   it must not be deferred or it causes pop-in and dimension guessing. */
#galerie,
#stellenangebote,
#kontakt,
#faq {
  content-visibility: auto;
  contain-intrinsic-size: 0 800px;
}
/* #restaurant-view, #tagungen, #events: render immediately —
   they are above or near the fold on most mobile screens            */

/* ── Tagungstechnik equipment grid: fix mobile overflow ─────────── */
/* Chunk 243 patched: grid-cols-1 sm:grid-cols-2 md:grid-cols-3      */
/* CSS belt-and-suspenders: force 1-col below 640px without :has()   */
@media (max-width: 639px) {
  /* Override any 2-col grid that contains earth-100/80 price rows    */
  .grid.grid-cols-2,
  [class~="grid-cols-2"] {
    grid-template-columns: 1fr !important;
  }
  /* Each price row: label + price never collapse into each other      */
  [class~="bg-earth-100\/80"],
  [class*="bg-earth-100"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 8px !important;
  }
  [class*="bg-earth-100"] span:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  [class*="bg-earth-100"] span:last-child {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin-left: auto !important;
    padding-left: 6px !important;
  }
}

/* will-change only on elements that actually animate with transform  */
.js-card,
.js-card-cta,
a[href="#rooms-view"].btn-shimmer,
a[href="/#rooms-view"].btn-shimmer {
  will-change: transform;
}

/* Aspect-ratio placeholders prevent CLS while images load           */
img[loading="lazy"] {
  content-visibility: auto;
}

/* All images: prevent layout shift with explicit sizing hints        */
img {
  max-width: 100%;
  height: auto;
}

/* Fade-in for lazy images once loaded                               */
img.loaded,
img[loading]:not([loading="eager"]) {
  animation: imgFadeIn 0.4s ease both;
}
@keyframes imgFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Video containers — reserve space to prevent CLS                   */
video {
  max-width: 100%;
}


/* Gallery images: fixed aspect ratio to avoid reflow                */
[class*="galerie"] img,
[class*="gallery"] img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Room card images: consistent aspect ratio                         */
[data-room-card] img,
.js-card img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ════════════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
═══════════════════════════════════════════════════════════════════════ */

[data-reveal="fade-up"] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal="fade-up"].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger job cards */
#stellenangebote .js-card:nth-child(1) { transition-delay: 0.05s; }
#stellenangebote .js-card:nth-child(2) { transition-delay: 0.15s; }
#stellenangebote .js-card:nth-child(3) { transition-delay: 0.25s; }

/* Owner section columns */
.ow-main-grid > *:nth-child(1) { transition-delay: 0.08s; }
.ow-main-grid > *:nth-child(2) { transition-delay: 0.2s; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   TOUCH TARGETS & BUTTON ACCESSIBILITY (WCAG 2.5.5 — min 44×44px)
═══════════════════════════════════════════════════════════════════════ */

button,
[role="button"],
a[class*="btn"],
.js-card-cta,
.bew-btn,
.bew-submit-btn {
  min-height: 44px;
  min-width: 44px;
}

/* Ensure tap area on mobile for all nav links */
@media (max-width: 768px) {
  nav a, nav button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ════════════════════════════════════════════════════════════════════
   TYPOGRAPHY IMPROVEMENTS — line-height & letter-spacing
═══════════════════════════════════════════════════════════════════════ */

/* Body text rhythm */
p, li, dd {
  line-height: 1.75;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-2);
}

/* Heading hierarchy */
h1 { line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--space-6); }
h2 { line-height: 1.15; letter-spacing: -0.015em; margin-bottom: var(--space-4); }
h3 { line-height: 1.25; letter-spacing: -0.01em; margin-bottom: var(--space-3); }
h4 { line-height: 1.35; margin-bottom: var(--space-2); }

/* ════════════════════════════════════════════════════════════════════
   TABLET RESPONSIVE FIXES (481px – 1024px)
   For injected sections that only had mobile/desktop breakpoints
═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 481px) and (max-width: 1024px) {
  /* Jobs grid: 2 columns on tablet */
  .jobs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* Owner section: side-by-side at 50/50 on tablet */
  .ow-main-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    padding: 40px 32px 56px !important;
  }

  /* Owner image: smaller on tablet */
  .ow-img-col {
    max-height: 380px !important;
  }

  /* Contact section: column on tablet */
  .js-contact-inner {
    flex-direction: column !important;
    gap: 24px !important;
    padding: 32px !important;
  }

  /* Bewerbung modal: full-width on tablet */
  .bew-modal-box {
    max-width: 600px !important;
    margin: 20px auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   WIDE / 4K SCREENS (1441px+)
═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 1441px) {
  /* Constrain max content width for readability on ultra-wide */
  .jobs-grid {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ow-main-grid {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Scale up section padding for breathing room */
  #stellenangebote,
  #inhaber {
    padding-left: max(48px, calc((100vw - 1400px) / 2)) !important;
    padding-right: max(48px, calc((100vw - 1400px) / 2)) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   FOCUS STYLES — keyboard navigation visibility (WCAG 2.4.7)
═══════════════════════════════════════════════════════════════════════ */

:focus-visible {
  outline: 2px solid var(--color-gold) !important;
  outline-offset: 3px !important;
  border-radius: var(--radius-sm);
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-gold) !important;
  outline-offset: 3px !important;
}

/* ════════════════════════════════════════════════════════════════════
   ABOUT SECTION — PREMIUM DARK REDESIGN
═══════════════════════════════════════════════════════════════════════ */

/* ── Override the cream section-pattern-2 for the About section ── */
.section-pattern-2 {
  background: linear-gradient(160deg, #060f09 0%, #0a1a10 50%, #0d2014 100%) !important;
  color: #FDFBF7 !important;
  position: relative;
  overflow: hidden;
}

/* Decorative golden top border */
.section-pattern-2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197,160,89,0.6), transparent);
  pointer-events: none;
}

/* Ambient gold glow top-left */
.section-pattern-2::after {
  content: '';
  position: absolute;
  top: -120px; left: -80px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(197,160,89,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── Restore all text to light in about section ── */
.section-pattern-2 h1,
.section-pattern-2 h2,
.section-pattern-2 h3,
.section-pattern-2 h4,
.section-pattern-2 p:not([class*="card-body"]):not([class*="card-subtitle"]),
.section-pattern-2 li,
.section-pattern-2 label {
  color: #FDFBF7 !important;
  text-shadow: none !important;
}

.section-pattern-2 h2 span {
  color: #C5A059 !important;
}

.section-pattern-2 [class*="text-white"] {
  color: #FDFBF7 !important;
}

/* Gold accent text */
.section-pattern-2 [class*="text-accent-gold"],
.section-pattern-2 [class*="text-earth-"] {
  color: #C5A059 !important;
}

/* Teal/green accent text */
.section-pattern-2 [class*="text-forest-5"],
.section-pattern-2 [class*="text-forest-100"],
.section-pattern-2 [class*="text-forest-200"] {
  color: rgba(197,160,89,0.7) !important;
}

/* ── "ÜBER UNS" label enhancement ── */
.section-pattern-2 [class*="tracking-"] {
  letter-spacing: 0.25em !important;
}

/* ── Stat items — premium gold glass cards ── */
[data-stat-item] {
  background: linear-gradient(135deg, rgba(197,160,89,0.08) 0%, rgba(197,160,89,0.04) 100%) !important;
  border: 1px solid rgba(197,160,89,0.25) !important;
  border-radius: 16px !important;
  padding: 20px 24px !important;
  backdrop-filter: blur(8px) !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  min-width: 90px;
}

[data-stat-item]:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(197,160,89,0.55) !important;
  box-shadow: 0 12px 40px rgba(197,160,89,0.12), 0 0 0 1px rgba(197,160,89,0.15) !important;
}

/* Stat icon gold */
[data-stat-item] svg[data-lucide-replaced] {
  filter: drop-shadow(0 2px 8px rgba(197,160,89,0.35));
}

/* Stat number */
[data-stat-item] .counter-number,
[data-stat-item] [class*="font-serif"] {
  color: #C5A059 !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  display: block;
}

/* Stat label */
[data-stat-item] [class*="text-xs"] {
  color: rgba(253,251,247,0.6) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
}

/* ── About text container ── */
[data-about-text] {
  position: relative;
  z-index: 1;
}

/* Decorative vertical gold line left of text block */
[data-about-text]::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(197,160,89,0.5) 30%, rgba(197,160,89,0.5) 70%, transparent);
  border-radius: 2px;
}

/* ── About image — premium gold frame ── */
[data-about-image-wrapper] {
  border: 1px solid rgba(197,160,89,0.3) !important;
  box-shadow:
    0 0 0 4px rgba(197,160,89,0.06),
    0 30px 80px rgba(0,0,0,0.5),
    inset 0 0 60px rgba(0,0,0,0.15) !important;
  border-radius: 20px !important;
  position: relative;
  overflow: hidden;
}

[data-about-image-wrapper]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(197,160,89,0.06) 0%,
    transparent 40%,
    transparent 70%,
    rgba(6,15,9,0.3) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Stat row gap */
.section-pattern-2 [class*="flex"][class*="gap-"] {
  gap: 1rem !important;
}

/* ════════════════════════════════════════════════════════════════════
   ABOUT SECTION — LAYOUT REFACTOR (two-column, premium alignment)
═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Section: tighten vertical padding ── */
.section-pattern-2 {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* ── 2. Inner container: cap at 1200px, centered ── */
.section-pattern-2 > div:first-child {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* ── 3. Grid: two equal columns, align tops, consistent gap ── */
[data-about-text] + [data-about-image-wrapper],
.section-pattern-2 [class*="grid"] {
  align-items: start !important;
}

.section-pattern-2 [class*="grid-cols-1"][class*="gap-"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 56px !important;
  align-items: start !important;
}

@media (max-width: 768px) {
  .section-pattern-2 [class*="grid-cols-1"][class*="gap-"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* ── 4. Left column: text content ── */
[data-about-text] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Label "ÜBER UNS" spacing */
[data-about-text] > span:first-child {
  margin-bottom: 10px !important;
  display: block !important;
}

/* Heading spacing */
[data-about-text] h2 {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  line-height: 1.2 !important;
}

/* Paragraphs */
[data-about-text] p {
  max-width: 56ch !important;
  line-height: 1.72 !important;
  margin-bottom: 14px !important;
}
[data-about-text] p:last-of-type {
  margin-bottom: 36px !important;
}

/* ── 5. Stat row: equal-width 3 cards in one row ── */
[data-about-text] [class*="flex"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  align-items: stretch !important;
  margin-top: 0 !important;
}

[data-stat-item] {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 18px 12px !important;
}

/* Stat number sizing */
[data-stat-item] .counter-number,
[data-stat-item] [class*="text-2xl"] {
  font-size: 1.6rem !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
}

/* ── 6. Right column: image fills height of text block ── */
[data-about-image-wrapper] {
  height: 100% !important;
  min-height: 420px !important;
  width: 100% !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

[data-about-image-wrapper] img,
[data-about-image-wrapper] video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* ── 7. Mobile: stack gracefully ── */
@media (max-width: 768px) {
  [data-about-image-wrapper] {
    min-height: 280px !important;
    height: 280px !important;
  }
  [data-about-text] [class*="flex"] {
    gap: 10px !important;
  }
  [data-stat-item] {
    padding: 14px 8px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   ZIMMER (ROOMS) — LUXURY CARD REFACTOR
═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Grid: wider gap, equal height rows ── */
#rooms-view [class*="grid-cols"] {
  gap: 36px !important;
  align-items: stretch !important;
}

/* ── 2. Card: clean dark glass, left-aligned, flex-column ── */
#rooms-view [data-room-card] {
  background: rgba(8, 18, 12, 0.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
  min-height: 480px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease !important;
}

/* ── 3. Card hover: subtle lift, gold border reveal ── */
#rooms-view [data-room-card]:hover {
  border-color: rgba(197, 160, 89, 0.4) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(197,160,89,0.2) !important;
  transform: translateY(-5px) scale(1.005) !important;
}

/* ── 4. Card overlay: clean dark gradient, not heavy gold ── */
#rooms-view .card-glass-overlay,
#rooms-view .card-glass-overlay-strong {
  background: linear-gradient(
    to top,
    rgba(6, 14, 9, 0.92) 0%,
    rgba(6, 14, 9, 0.55) 40%,
    rgba(6, 14, 9, 0.15) 75%,
    transparent 100%
  ) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── 5. Inactive card content: left-align, flex-column, button at bottom ── */
#rooms-view [data-room-card] [class*="flex-col"][class*="items-center"][class*="justify-center"] {
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding: 24px !important;
  text-align: left !important;
}

/* Position the dashed price-bar at bottom left, full width */
#rooms-view [data-room-card] [class*="absolute"][class*="bottom-6"] {
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(197,160,89,0.2) !important;
  border-style: solid !important;
  background: rgba(6,14,9,0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  padding: 14px 16px !important;
}

/* ── 6. Inactive card title & subtitle: left-align ── */
#rooms-view [data-room-card] .card-title {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  filter: none !important;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-align: left !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
  margin-bottom: 4px !important;
}

/* ── 7. Active card: flex-column with button pushed to bottom ── */
#rooms-view [data-room-card] [class*="flex-col"][class*="h-full"] {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 24px !important;
  align-items: flex-start !important;
}

/* Push the action buttons row to the bottom */
#rooms-view [data-room-card] [class*="flex-col"][class*="h-full"] > *:last-child {
  margin-top: auto !important;
}

/* ── 8. Active card title ── */
#rooms-view [data-room-card] h3 {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  filter: none !important;
  font-size: clamp(1.5rem, 2.8vw, 2rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-align: left !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
  margin-bottom: 6px !important;
}

/* Gold accent on price currency & amount */
#rooms-view [data-room-card] .card-price {
  color: #C5A059 !important;
  -webkit-text-fill-color: #C5A059 !important;
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  text-shadow: none !important;
}

/* Card subtitle / type label */
#rooms-view [data-room-card] .card-subtitle {
  color: rgba(197,160,89,0.75) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.18em !important;
  text-align: left !important;
  font-weight: 400 !important;
}

/* Description text */
#rooms-view [data-room-card] p {
  color: rgba(255,255,255,0.65) !important;
  text-shadow: none !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

/* Amenity list */
#rooms-view [data-room-card] ul {
  text-align: left !important;
}
#rooms-view [data-room-card] ul li {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.85rem !important;
}
#rooms-view [data-room-card] ul li svg {
  color: #C5A059 !important;
  flex-shrink: 0;
}

/* Size badge */
#rooms-view [data-room-card] span[class*="rounded-full"],
#rooms-view [data-room-card] span[class*="rounded"][class*="bg"] {
  background: rgba(197,160,89,0.12) !important;
  border: 1px solid rgba(197,160,89,0.25) !important;
  color: #C5A059 !important;
  font-size: 0.75rem !important;
}

/* Book button */
#rooms-view [data-room-card] button[class*="w-full"],
#rooms-view [data-room-card] a[class*="w-full"] {
  margin-top: 12px !important;
  border-radius: 10px !important;
}

/* Remove heavy top accent bar */
#rooms-view [data-room-card]::before {
  display: none !important;
}

/* ── 9. Image: natural opacity, smooth zoom ── */
#rooms-view [data-room-card] img {
  opacity: 0.9 !important;
  transition: transform 0.55s ease, opacity 0.4s ease !important;
}
#rooms-view [data-room-card]:hover img {
  opacity: 1 !important;
  transform: scale(1.04) !important;
}

/* ── 10. Section header: subtle, clean ── */
#rooms-view .text-center h2 {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
  filter: none !important;
  color: #fff !important;
}

/* ════════════════════════════════════════════════════════════════════
   ZIMMER — LIGHT FROSTED GLASS CONTENT PANEL + DARK GREEN TEXT
═══════════════════════════════════════════════════════════════════════ */

/* ── Card base: transparent, image shows through ── */
#rooms-view [data-room-card] {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.30) !important;
}

/* ── Remove dark gradient overlay ── */
#rooms-view .card-glass-overlay,
#rooms-view .card-glass-overlay-strong {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Image: visible, slightly dimmed ── */
#rooms-view [data-room-card] img {
  opacity: 1 !important;
  filter: brightness(0.88) !important;
  transition: filter 0.4s ease, transform 0.55s ease !important;
}
#rooms-view [data-room-card]:hover img {
  filter: brightness(0.95) !important;
  transform: scale(1.04) !important;
  opacity: 1 !important;
}

/* ── Frosted glass panel: wraps all inactive card text ── */
#rooms-view [data-room-card] [class*="flex-col"][class*="items-center"][class*="justify-center"],
#rooms-view [data-room-card] [class*="flex-col"][class*="items-center"][class*="p-8"] {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 0 0 14px 14px !important;
  padding: 22px 22px 80px !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* ── Price/book bar inside inactive card ── */
#rooms-view [data-room-card] [class*="absolute"][class*="bottom-6"] {
  background: rgba(255,255,255,0.75) !important;
  border: 1px solid rgba(15,46,35,0.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 10px !important;
  border-style: solid !important;
}

/* ── Active card content panel ── */
#rooms-view [data-room-card] [class*="flex-col"][class*="h-full"] {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 0 0 14px 14px !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: auto !important;
  max-height: 68% !important;
  overflow: hidden !important;
  padding: 20px 22px 22px !important;
  align-items: flex-start !important;
}

/* ── All text: dark green ── */
#rooms-view [data-room-card] .card-title,
#rooms-view [data-room-card] h3 {
  color: #0F2E23 !important;
  -webkit-text-fill-color: #0F2E23 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  filter: none !important;
  text-shadow: none !important;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem) !important;
  font-weight: 700 !important;
  text-align: left !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 4px !important;
}

#rooms-view [data-room-card] p {
  color: rgba(15, 46, 35, 0.72) !important;
  text-shadow: none !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

#rooms-view [data-room-card] ul li {
  color: rgba(15, 46, 35, 0.8) !important;
  font-size: 0.85rem !important;
}
#rooms-view [data-room-card] ul li svg {
  color: #C5A059 !important;
}

/* ── Subtitle / type label ── */
#rooms-view [data-room-card] .card-subtitle {
  color: rgba(15, 46, 35, 0.55) !important;
  letter-spacing: 0.18em !important;
  font-size: 0.7rem !important;
  text-align: left !important;
}

/* ── Price: keep gold ── */
#rooms-view [data-room-card] .card-price {
  color: #C5A059 !important;
  -webkit-text-fill-color: #C5A059 !important;
  text-shadow: none !important;
}

/* Size / "Apartment" badges */
#rooms-view [data-room-card] span[class*="rounded-full"],
#rooms-view [data-room-card] span[class*="rounded"][class*="bg"],
#rooms-view [data-room-card] span[class*="text-xs"][class*="bg"] {
  background: rgba(15,46,35,0.08) !important;
  border: 1px solid rgba(15,46,35,0.18) !important;
  color: #0F2E23 !important;
  backdrop-filter: none !important;
}

/* Price label (m² · ab €...) */
#rooms-view [data-room-card] span[class*="tracking-wide"],
#rooms-view [data-room-card] span[class*="tracking-widest"] {
  color: rgba(15,46,35,0.65) !important;
}

/* ── Book / CTA button: dark green bg, white text ── */
#rooms-view [data-room-card] button[class*="w-full"],
#rooms-view [data-room-card] a[class*="w-full"] {
  background: #0F2E23 !important;
  color: #fff !important;
  border-color: #0F2E23 !important;
  border-radius: 10px !important;
  margin-top: 10px !important;
}
#rooms-view [data-room-card] button[class*="w-full"]:hover,
#rooms-view [data-room-card] a[class*="w-full"]:hover {
  background: #1a4332 !important;
  border-color: #1a4332 !important;
}
#rooms-view [data-room-card] button[class*="w-full"] span,
#rooms-view [data-room-card] button[class*="w-full"] svg,
#rooms-view [data-room-card] a[class*="w-full"] span,
#rooms-view [data-room-card] a[class*="w-full"] svg {
  color: #fff !important;
  stroke: #fff !important;
}

/* ─── ROOM CARD PRICE BAR: replace dashed gold border → solid dark green ── */
.border-dashed.border-earth-300\/25 {
  border-style: solid !important;
  border-color: rgba(15, 46, 35, 0.30) !important;
}
/* also override the color-mix() variant (modern browsers) */
@supports (color: color-mix(in lab, red, red)) {
  .border-dashed.border-earth-300\/25 {
    border-style: solid !important;
    border-color: rgba(15, 46, 35, 0.30) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════════ */

/* ─── CONTENT-VISIBILITY: Skip rendering of off-screen sections ── */
#stellenangebote,
#inhaber,
#galerie,
#kontakt,
#faq,
.jobs-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* ─── LAZY IMAGE: LQIP blur + fade-in ── */
img[loading="lazy"] {
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.4s ease-in, filter 0.4s ease-in;
}
img[loading="lazy"].loaded,
img.loaded {
  opacity: 1;
  filter: blur(0);
}

/* ─── CLS PREVENTION: Aspect ratio for common image containers ── */
img[width][height] {
  aspect-ratio: attr(width) / attr(height);
  height: auto;
}
[data-room-card] img {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
}
.horizontal-scroll-container img {
  aspect-ratio: 3/2;
  object-fit: cover;
}

/* ─── VIDEO: Aspect ratio + fade-in ── */
video {
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #0a1210;
}
video[poster] {
  object-fit: cover;
}

/* ─── WILL-CHANGE: Only on animated elements ── */
[data-reveal]:not(.revealed) {
  will-change: transform, opacity;
}
[data-reveal].revealed {
  will-change: auto;
}

/* ─── REVEAL ANIMATIONS ── */
[data-reveal="fade-up"] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[data-reveal="fade-up"].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ─── IMAGE CDN-READY: Responsive image containers ── */
picture {
  display: block;
  width: 100%;
}
picture img {
  width: 100%;
  height: auto;
  display: block;
}

/* ─── REDUCE MOTION: Respect prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  img[loading="lazy"],
  [data-reveal="fade-up"] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ─── FONT-DISPLAY: ensure swap for all @font-face ── */
@font-face { font-display: swap; }

/* ─── DISH/EVENT CARD images: consistent sizing ── */
[data-event-card] img,
[data-tag-card] img {
  aspect-ratio: 16/10;
  object-fit: cover;
  width: 100%;
}

/* ─── GALLERY IMAGES: consistent aspect ratio ── */
#galerie img {
  aspect-ratio: 3/2;
  object-fit: cover;
}

/* ─── TAGUNGEN IMAGES ── */
.tagungen-image, [data-tagung-img] {
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 6 — COMPONENT STYLE POLISH
═══════════════════════════════════════════════════════════════════════ */

/* ── Section heading eyebrow labels: refined spacing & tracking ── */
[class*="tracking-"][class*="uppercase"][class*="text-xs"],
[class*="tracking-"][class*="uppercase"][class*="text-sm"] {
  letter-spacing: 0.2em;
  font-weight: 600;
  font-size: var(--text-xs);
}

/* ── Card hover transition: consistent timing across all cards ── */
[data-room-card],
[data-card],
[data-event-card],
[data-tag-card],
.js-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              border-color 0.3s ease !important;
}

/* ── Smooth border-color reveal on card hover ── */
[data-room-card]:hover,
[data-card]:hover,
[data-event-card]:hover {
  border-color: var(--color-border) !important;
}

/* ── Buttons: consistent radius and letter-spacing ── */
button[class*="rounded-full"],
a[class*="rounded-full"],
[role="button"][class*="rounded-full"] {
  letter-spacing: 0.04em;
}

/* ── Form labels: refined ── */
label {
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: var(--space-1) !important;
}

/* ── Gold divider utility ── */
.gold-divider,
.section-pattern-1 h2::after,
.section-pattern-2 h2::after {
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-dark));
  border-radius: var(--radius-full);
  margin-top: var(--space-4);
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 7 — SCROLL ANIMATIONS (refined)
═══════════════════════════════════════════════════════════════════════ */

/* Fade-in-up for general elements */
[data-reveal="fade-in"] {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal="fade-in"].revealed {
  opacity: 1;
}

/* Scale-in for images */
[data-reveal="scale-in"] {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal="scale-in"].revealed {
  opacity: 1;
  transform: scale(1);
}

/* Slide-in from left */
[data-reveal="slide-left"] {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal="slide-left"].revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Slide-in from right */
[data-reveal="slide-right"] {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal="slide-right"].revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger children: cascading delay */
[data-stagger] > *:nth-child(1) { transition-delay: 0s; }
[data-stagger] > *:nth-child(2) { transition-delay: 0.08s; }
[data-stagger] > *:nth-child(3) { transition-delay: 0.16s; }
[data-stagger] > *:nth-child(4) { transition-delay: 0.24s; }
[data-stagger] > *:nth-child(5) { transition-delay: 0.32s; }
[data-stagger] > *:nth-child(6) { transition-delay: 0.40s; }

/* ════════════════════════════════════════════════════════════════════
   PHASE 8 — MOBILE STYLE FIXES
═══════════════════════════════════════════════════════════════════════ */

/* Tighter heading sizes on small screens */
@media (max-width: 480px) {
  h1 { font-size: var(--text-3xl) !important; }
  h2 { font-size: var(--text-2xl) !important; }
  h3 { font-size: var(--text-xl) !important; }

  /* Reduce section padding on very small screens */
  .section-pattern-1,
  .section-pattern-2,
  .section-pattern-3 {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
  }

  /* Stack stat items vertically on very small screens */
  [data-about-text] [class*="flex"] {
    flex-wrap: wrap !important;
    gap: var(--space-3) !important;
  }
  [data-stat-item] {
    flex: 1 1 calc(50% - var(--space-3)) !important;
    min-width: 100px !important;
  }
}

/* Fix text overflow on mobile */
@media (max-width: 375px) {
  h1, h2, h3 {
    word-break: break-word;
    hyphens: auto;
  }

  /* Prevent horizontal overflow from padded elements */
  .section-pattern-1,
  .section-pattern-2,
  .section-pattern-3 {
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
  }

  /* Jobs hero stats: tighter on very small screens */
  .js-hero-stats {
    padding: 10px 12px !important;
    border-radius: var(--radius-lg) !important;
  }
  .js-stat { padding: 0 8px !important; }
  .js-stat-num { font-size: 1.1rem !important; }
}

/* Ensure reveal animations don't cause horizontal scroll on mobile */
@media (max-width: 768px) {
  [data-reveal="slide-left"],
  [data-reveal="slide-right"] {
    transform: translateY(20px);
  }
  [data-reveal="slide-left"].revealed,
  [data-reveal="slide-right"].revealed {
    transform: translateY(0);
  }
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 12 — PERFORMANCE + PREMIUM APARTMENT CARDS
═══════════════════════════════════════════════════════════════════════ */

:root {
  --room-card-radius: 20px;
  --room-card-surface: linear-gradient(180deg, rgba(248, 244, 236, 0.95), rgba(243, 237, 226, 0.88));
  --room-card-text: #17362c;
  --room-card-text-muted: rgba(23, 54, 44, 0.72);
  --room-card-border: rgba(255, 255, 255, 0.16);
  --room-card-shadow: 0 18px 50px rgba(9, 21, 18, 0.18);
  --room-card-shadow-hover: 0 28px 80px rgba(9, 21, 18, 0.24), 0 0 0 1px rgba(197, 160, 89, 0.16);
  --room-card-accent: #c29a4c;
  --room-card-cta: linear-gradient(135deg, #17362c, #2b6b57);
}

#rooms-view,
#restaurant-view,
#tagungen,
#events,
#galerie,
#stellenangebote,
#kontakt,
#faq {
  content-visibility: auto;
  contain-intrinsic-size: auto 920px;
}

img[loading="lazy"]:not(.loaded) {
  opacity: 0.001;
  filter: blur(18px) saturate(0.82);
  transform: scale(1.035);
  background: linear-gradient(135deg, rgba(14, 31, 27, 0.98), rgba(41, 84, 71, 0.35));
}

img.loaded {
  opacity: 1;
  filter: none;
  transform: none;
}

video[data-tap-to-play="1"] {
  cursor: pointer;
  background: #0b1415;
}

video[data-tap-to-play="1"]:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 13 — PRODUCTION MEDIA HARDENING
═══════════════════════════════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

button,
a,
[role="button"],
input,
select,
textarea,
summary {
  min-height: 44px;
}

video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #091211;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

video[controls] {
  controls: none;
}

video[data-managed-video="hero"] {
  min-height: 100svh;
}

video[data-managed-video="ambient"] {
  border-radius: inherit;
}

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

  video {
    animation: none !important;
    transition: none !important;
  }
}

#rooms-view [class*="grid-cols"] {
  gap: 30px !important;
  align-items: stretch !important;
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 14 — TAGUNGEN DARK GREEN CARD THEME
═══════════════════════════════════════════════════════════════════════ */

:root {
  --tagungen-card-surface: linear-gradient(
    135deg,
    rgba(27, 92, 83, 0.94) 0%,
    rgba(17, 31, 32, 0.96) 52%,
    rgba(12, 23, 24, 0.98) 100%
  );
  --tagungen-card-surface-soft: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.04)
  );
  --tagungen-card-border: rgba(255, 255, 255, 0.08);
  --tagungen-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  --tagungen-card-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.3);
  --tagungen-card-text: #ffffff;
  --tagungen-card-text-muted: rgba(255, 255, 255, 0.8);
  --tagungen-card-text-soft: rgba(255, 255, 255, 0.68);
  --tagungen-card-accent: var(--color-gold);
}

main .max-w-7xl > div[class*="!bg-white/50"][class*="!border-forest-700/10"] {
  background:
    radial-gradient(circle at top right, rgba(197, 160, 89, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(36, 122, 110, 0.12), transparent 42%),
    var(--tagungen-card-surface) !important;
  border: 1px solid var(--tagungen-card-border) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-tagungen-content] > span,
[data-tagungen-content] [class*="text-earth-500"] {
  color: var(--tagungen-card-accent) !important;
}

[data-tagungen-content] > h2,
[data-tagungen-content] h3,
[data-tagungen-package] h4,
[data-tagungen-package] [class*="font-bold"][class*="text-forest-900"],
[data-tagungen-package] [class*="font-medium"][class*="text-forest-900"] {
  color: var(--tagungen-card-text) !important;
}

[data-tagungen-content] > p,
[data-tagungen-content] [class*="text-forest-700"],
[data-tagungen-package] [class*="text-forest-700"],
[data-tagungen-package] [class*="text-forest-900"],
[data-tagungen-package] li span {
  color: var(--tagungen-card-text-muted) !important;
}

[data-tagungen-content] > [class*="grid-cols-2"] > [data-interactive] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)),
    var(--tagungen-card-surface) !important;
  border: 1px solid var(--tagungen-card-border) !important;
  border-top: 2px solid rgba(197, 160, 89, 0.58) !important;
  border-radius: 18px !important;
  box-shadow: var(--tagungen-card-shadow) !important;
  backdrop-filter: blur(16px);
}

[data-tagungen-content] > [class*="grid-cols-2"] > [data-interactive]:hover {
  transform: translateY(-4px);
  box-shadow: var(--tagungen-card-shadow-hover) !important;
  border-color: rgba(197, 160, 89, 0.3) !important;
}

[data-tagungen-content] > [class*="grid-cols-2"] > [data-interactive] [class*="text-forest-500"],
[data-tagungen-content] > [class*="grid-cols-2"] > [data-interactive] [class*="text-earth-500"] {
  color: var(--tagungen-card-accent) !important;
}

[data-tagungen-content] > [class*="grid-cols-2"] > [data-interactive] [class*="text-forest-300"],
[data-tagungen-content] > [class*="grid-cols-2"] > [data-interactive] [class*="text-forest-900"] {
  color: var(--tagungen-card-text) !important;
}

[data-tagungen-package] {
  position: relative;
  overflow: hidden;
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)),
    var(--tagungen-card-surface) !important;
  border: 1px solid var(--tagungen-card-border) !important;
  border-top: 2px solid rgba(197, 160, 89, 0.58) !important;
  box-shadow: var(--tagungen-card-shadow) !important;
  backdrop-filter: blur(16px);
  transition:
    transform 240ms ease,
    box-shadow 240ms ease,
    border-color 240ms ease,
    background 240ms ease !important;
}

[data-tagungen-package]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(150deg, rgba(197, 160, 89, 0.09), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 22%);
  opacity: 0.9;
}

[data-tagungen-package]:hover {
  transform: translateY(-4px);
  box-shadow: var(--tagungen-card-shadow-hover) !important;
  border-color: rgba(197, 160, 89, 0.32) !important;
}

[data-tagungen-package] > * {
  position: relative;
  z-index: 1;
}

[data-tagungen-package] > [class*="relative h-"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.68),
    rgba(0, 0, 0, 0.28),
    rgba(0, 0, 0, 0.12)
  );
}

[data-tagungen-package] > [class*="relative h-"] [class*="rounded-lg"][class*="bg-white/10"] {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-tagungen-package] > [class*="relative h-"] [class*="text-white"],
[data-tagungen-package] > [class*="relative h-"] [class*="text-white/"] {
  color: var(--tagungen-card-text) !important;
}

[data-tagungen-package] [class*="text-earth-500"],
[data-tagungen-package] svg[class*="text-earth-500"] {
  color: var(--tagungen-card-accent) !important;
}

[data-tagungen-package] [class*="bg-forest-500"],
[data-tagungen-package] [class*="bg-earth-200"],
[data-tagungen-package] [class*="bg-earth-100"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)),
    rgba(12, 23, 24, 0.38) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-tagungen-package] [class*="bg-earth-100"] span,
[data-tagungen-package] [class*="bg-earth-200"] span,
[data-tagungen-package] [class*="bg-forest-500"] span,
[data-tagungen-package] [class*="bg-earth-100"] [class*="text-forest-700"],
[data-tagungen-package] [class*="bg-earth-100"] [class*="text-forest-900"] {
  color: var(--tagungen-card-text) !important;
}

[data-tagungen-package] ul li {
  color: var(--tagungen-card-text-muted) !important;
}

[data-tagungen-package] ul li + li {
  padding-top: 0.1rem;
}

@media (max-width: 768px) {
  [data-tagungen-content] > [class*="grid-cols-2"] > [data-interactive],
  [data-tagungen-package] {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 15 — APARTMENTS LAYOUT + SPLIT REVEAL FIX
═══════════════════════════════════════════════════════════════════════ */

:root {
  --room-section-heading: #1A2F24;
  --room-section-copy: #1A2F24;
  --room-card-preview-height: clamp(440px, 44vw, 520px);
  --room-card-expanded-height: clamp(560px, 56vw, 680px);
  --room-panel-surface: linear-gradient(
    180deg,
    rgba(248, 244, 236, 0.08) 0%,
    rgba(248, 244, 236, 0.72) 18%,
    rgba(248, 244, 236, 0.92) 34%,
    rgba(243, 237, 226, 0.97) 100%
  );
  --room-panel-preview-surface: linear-gradient(
    180deg,
    rgba(248, 244, 236, 0.16) 0%,
    rgba(248, 244, 236, 0.86) 28%,
    rgba(243, 237, 226, 0.96) 100%
  );
}

#rooms-view > .max-w-7xl > .text-center h2 {
  color: var(--room-section-heading) !important;
}

#rooms-view > .max-w-7xl > .text-center p {
  color: var(--room-section-copy) !important;
}

#rooms-view > .max-w-7xl > div[class*="grid"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  #rooms-view > .max-w-7xl > div[class*="grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  #rooms-view > .max-w-7xl > div[class*="grid"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

#rooms-view [data-room-card] {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  min-height: var(--room-card-preview-height) !important;
  overflow: hidden !important;
  transition:
    min-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease !important;
}

#rooms-view [data-room-card][data-room-state="expanded"] {
  min-height: var(--room-card-expanded-height) !important;
}

#rooms-view [data-room-card] > .absolute.inset-0.overflow-hidden,
#rooms-view [data-room-card] > .absolute.inset-0 {
  border-radius: inherit;
}

#rooms-view [data-room-card] [data-room-panel] {
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease !important;
}

#rooms-view [data-room-card][data-room-state="preview"] [data-room-panel] {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  height: auto !important;
  min-height: 208px !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 24px 22px 22px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  border-top: 1px solid rgba(255, 255, 255, 0.26) !important;
  border-radius: 0 0 var(--room-card-radius) var(--room-card-radius) !important;
  background: var(--room-panel-preview-surface) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 -20px 40px rgba(7, 16, 14, 0.18) !important;
  backdrop-filter: blur(16px) saturate(132%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(132%) !important;
  transform: translateY(0) !important;
}

#rooms-view [data-room-card][data-room-state="preview"] [data-room-panel] h3,
#rooms-view [data-room-card][data-room-state="preview"] [data-room-panel] p,
#rooms-view [data-room-card][data-room-state="preview"] [data-room-panel] span {
  text-align: left !important;
}

#rooms-view [data-room-card][data-room-state="preview"] [class*="absolute"][class*="bottom-6"] {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  margin-top: auto !important;
}

#rooms-view [data-room-card][data-room-state="expanded"] [data-room-panel] {
  position: relative !important;
  inset: auto !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  padding: clamp(180px, 22vw, 230px) 24px 24px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  border-top: none !important;
  border-radius: inherit !important;
  background: var(--room-panel-surface) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 -22px 50px rgba(7, 16, 14, 0.18) !important;
  backdrop-filter: blur(16px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
  transform: translateY(0) !important;
}

#rooms-view [data-room-card][data-room-state="expanded"] [data-room-panel] > * {
  opacity: 0;
  transform: translateY(18px);
  animation: room-panel-reveal 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#rooms-view [data-room-card][data-room-state="expanded"] [data-room-panel] > *:nth-child(1) { animation-delay: 0.03s; }
#rooms-view [data-room-card][data-room-state="expanded"] [data-room-panel] > *:nth-child(2) { animation-delay: 0.07s; }
#rooms-view [data-room-card][data-room-state="expanded"] [data-room-panel] > *:nth-child(3) { animation-delay: 0.11s; }
#rooms-view [data-room-card][data-room-state="expanded"] [data-room-panel] > *:nth-child(4) { animation-delay: 0.15s; }
#rooms-view [data-room-card][data-room-state="expanded"] [data-room-panel] > *:nth-child(5) { animation-delay: 0.19s; }
#rooms-view [data-room-card][data-room-state="expanded"] [data-room-panel] > *:nth-child(6) { animation-delay: 0.23s; }
#rooms-view [data-room-card][data-room-state="expanded"] [data-room-panel] > *:nth-child(7) { animation-delay: 0.27s; }

#rooms-view [data-room-card][data-room-state="expanded"] [data-room-panel] .mt-auto,
#rooms-view [data-room-card][data-room-state="expanded"] [data-room-panel] > *:last-child {
  margin-top: auto !important;
}

#rooms-view [data-room-card][data-room-state="expanded"] [data-room-panel] [class*="grid-cols-2"] {
  width: 100% !important;
}

#rooms-view [data-room-card][data-room-state="expanded"] ul {
  overflow: visible !important;
}

#rooms-view [data-room-card] [data-room-cta="1"] span,
#rooms-view [data-room-card] button[class*="w-full"] span,
#rooms-view [data-room-card] a[class*="w-full"] span {
  transition: transform 0.3s ease !important;
}

#rooms-view [data-room-card] [data-room-cta="1"]:hover span,
#rooms-view [data-room-card] button[class*="w-full"]:hover span,
#rooms-view [data-room-card] a[class*="w-full"]:hover span {
  transform: translateX(5px);
}

@keyframes room-panel-reveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1023px) {
  #rooms-view [data-room-card][data-room-state="expanded"] {
    min-height: clamp(520px, 74vw, 620px) !important;
  }

  #rooms-view [data-room-card][data-room-state="expanded"] [data-room-panel] {
    padding-top: clamp(160px, 26vw, 210px) !important;
  }
}

@media (max-width: 767px) {
  #rooms-view [data-room-card] {
    min-height: clamp(420px, 108vw, 500px) !important;
  }

  #rooms-view [data-room-card][data-room-state="expanded"] {
    min-height: clamp(520px, 138vw, 660px) !important;
  }

  #rooms-view [data-room-card][data-room-state="expanded"] [data-room-panel],
  #rooms-view [data-room-card][data-room-state="preview"] [data-room-panel] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #rooms-view [data-room-card][data-room-state="expanded"] [data-room-panel] {
    padding-top: 148px !important;
    padding-bottom: 20px !important;
  }

  #rooms-view [data-room-card][data-room-state="expanded"] [data-room-panel] [class*="grid-cols-2"] {
    grid-template-columns: 1fr !important;
  }
}

#rooms-view [data-room-card] {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: clamp(420px, 54vw, 540px) !important;
  border-radius: var(--room-card-radius) !important;
  border: 1px solid var(--room-card-border) !important;
  background:
    radial-gradient(circle at top, rgba(197, 160, 89, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(9, 20, 18, 0.84), rgba(8, 16, 15, 0.68)) !important;
  box-shadow: var(--room-card-shadow) !important;
  transition:
    transform 260ms ease,
    box-shadow 260ms ease,
    border-color 260ms ease,
    background 260ms ease !important;
}

#rooms-view [data-room-card]::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--room-card-radius) - 1px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 1;
}

#rooms-view [data-room-card]:hover {
  transform: translateY(-10px) scale(1.012) !important;
  border-color: rgba(197, 160, 89, 0.28) !important;
  box-shadow: var(--room-card-shadow-hover) !important;
}

#rooms-view [data-room-card] img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  display: block !important;
  filter: brightness(0.92) saturate(0.92) !important;
  transition:
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 260ms ease,
    opacity 260ms ease !important;
}

#rooms-view [data-room-card]:hover img {
  transform: scale(1.06) !important;
  filter: brightness(0.99) saturate(1) !important;
}

#rooms-view [data-room-panel],
#rooms-view [data-room-card] .absolute.inset-0.flex.flex-col,
#rooms-view [data-room-card] .relative.z-10.flex.flex-col,
#rooms-view [data-room-card] [class*="flex-col"][class*="h-full"] {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 22px 22px 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 0 0 var(--room-card-radius) var(--room-card-radius) !important;
  background: var(--room-card-surface) !important;
  color: var(--room-card-text) !important;
  text-align: left !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  overflow: hidden !important;
  max-height: 56% !important;
  transition:
    max-height 260ms ease,
    background 260ms ease,
    box-shadow 260ms ease !important;
  z-index: 2 !important;
}

#rooms-view [data-room-card]:hover [data-room-panel],
#rooms-view [data-room-card]:hover .absolute.inset-0.flex.flex-col,
#rooms-view [data-room-card]:hover .relative.z-10.flex.flex-col,
#rooms-view [data-room-card]:hover [class*="flex-col"][class*="h-full"] {
  max-height: 72% !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 -18px 40px rgba(245, 238, 227, 0.22) !important;
}

#rooms-view [data-room-title],
#rooms-view [data-room-card] .card-title,
#rooms-view [data-room-card] h3 {
  color: var(--room-card-text) !important;
  -webkit-text-fill-color: var(--room-card-text) !important;
  background: none !important;
  filter: none !important;
  text-shadow: none !important;
  font-size: clamp(1.45rem, 2.4vw, 2rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

#rooms-view [data-room-subtitle],
#rooms-view [data-room-card] .card-subtitle {
  color: rgba(23, 54, 44, 0.56) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

#rooms-view [data-room-card] p {
  color: var(--room-card-text-muted) !important;
  text-shadow: none !important;
  line-height: 1.58 !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
}

#rooms-view [data-room-card] ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px 10px !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
}

#rooms-view [data-room-card] ul li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  color: rgba(23, 54, 44, 0.82) !important;
  background: rgba(255, 255, 255, 0.52) !important;
  border: 1px solid rgba(23, 54, 44, 0.08) !important;
  font-size: 0.84rem !important;
}

#rooms-view [data-room-card] ul li svg {
  color: var(--room-card-accent) !important;
  flex-shrink: 0 !important;
}

#rooms-view [data-room-highlight="1"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

#rooms-view [data-room-price],
#rooms-view [data-room-card] .card-price {
  color: var(--room-card-accent) !important;
  -webkit-text-fill-color: var(--room-card-accent) !important;
  font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  text-shadow: none !important;
}

#rooms-view [data-room-chip="1"],
#rooms-view [data-room-card] span[class*="rounded"],
#rooms-view [data-room-card] span[class*="tracking"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: rgba(23, 54, 44, 0.07) !important;
  border: 1px solid rgba(23, 54, 44, 0.1) !important;
  color: rgba(23, 54, 44, 0.76) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#rooms-view [data-room-cta="1"],
#rooms-view [data-room-card] button[class*="w-full"],
#rooms-view [data-room-card] a[class*="w-full"] {
  width: 100% !important;
  min-height: 52px !important;
  margin-top: auto !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: var(--room-card-cta) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(23, 54, 44, 0.22) !important;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease !important;
}

#rooms-view [data-room-cta="1"]:hover,
#rooms-view [data-room-card] button[class*="w-full"]:hover,
#rooms-view [data-room-card] a[class*="w-full"]:hover {
  transform: translateY(-1px) scale(1.01) !important;
  filter: saturate(1.08) !important;
  box-shadow: 0 18px 36px rgba(23, 54, 44, 0.28) !important;
}

#rooms-view [data-room-cta="1"] span,
#rooms-view [data-room-cta="1"] svg,
#rooms-view [data-room-card] button[class*="w-full"] span,
#rooms-view [data-room-card] button[class*="w-full"] svg,
#rooms-view [data-room-card] a[class*="w-full"] span,
#rooms-view [data-room-card] a[class*="w-full"] svg {
  color: #fff !important;
  stroke: #fff !important;
}

@media (max-width: 1024px) {
  #rooms-view [data-room-card] ul {
    grid-template-columns: 1fr !important;
  }

  #rooms-view [data-room-panel],
  #rooms-view [data-room-card] .absolute.inset-0.flex.flex-col,
  #rooms-view [data-room-card] .relative.z-10.flex.flex-col,
  #rooms-view [data-room-card] [class*="flex-col"][class*="h-full"] {
    max-height: 66% !important;
  }
}

@media (max-width: 768px) {
  #rooms-view [class*="grid-cols"] {
    gap: 22px !important;
  }

  #rooms-view [data-room-card] {
    min-height: 430px !important;
    transform: none !important;
  }

  #rooms-view [data-room-card]:hover {
    transform: none !important;
    box-shadow: var(--room-card-shadow) !important;
  }

  #rooms-view [data-room-card]:hover img {
    transform: none !important;
  }

  #rooms-view [data-room-panel],
  #rooms-view [data-room-card] .absolute.inset-0.flex.flex-col,
  #rooms-view [data-room-card] .relative.z-10.flex.flex-col,
  #rooms-view [data-room-card] [class*="flex-col"][class*="h-full"] {
    padding: 18px 18px 16px !important;
    max-height: 72% !important;
  }
}

/* FINAL OVERRIDE — apartments layout + reveal fix */
#rooms-view > .max-w-7xl > .text-center h2 {
  color: var(--room-section-heading) !important;
}

#rooms-view > .max-w-7xl > .text-center p {
  color: var(--room-section-copy) !important;
}

#rooms-view > .max-w-7xl > div[class*="grid"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  #rooms-view > .max-w-7xl > div[class*="grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  #rooms-view > .max-w-7xl > div[class*="grid"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

#rooms-view [data-room-card] {
  min-height: var(--room-card-preview-height) !important;
}

#rooms-view [data-room-card][data-room-state="expanded"] {
  min-height: var(--room-card-expanded-height) !important;
}

#rooms-view [data-room-card][data-room-state="preview"] .absolute.inset-0.flex.flex-col.items-center.justify-center[data-room-panel] {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  min-height: 208px !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 24px 22px 22px !important;
  background: var(--room-panel-preview-surface) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 -20px 40px rgba(7, 16, 14, 0.18) !important;
}

#rooms-view [data-room-card][data-room-state="preview"] .absolute.bottom-6.left-6.right-6 {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  margin-top: auto !important;
}

#rooms-view [data-room-card][data-room-state="expanded"] .relative.z-10.flex.flex-col.h-full[data-room-panel] {
  position: relative !important;
  inset: auto !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  padding: clamp(180px, 22vw, 230px) 24px 24px !important;
  background: var(--room-panel-surface) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 -22px 50px rgba(7, 16, 14, 0.18) !important;
}

#rooms-view [data-room-card][data-room-state="expanded"] .relative.z-10.flex.flex-col.h-full[data-room-panel] > * {
  opacity: 0;
  transform: translateY(18px);
  animation: room-panel-reveal 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#rooms-view [data-room-card][data-room-state="expanded"] .relative.z-10.flex.flex-col.h-full[data-room-panel] > *:nth-child(1) { animation-delay: 0.03s; }
#rooms-view [data-room-card][data-room-state="expanded"] .relative.z-10.flex.flex-col.h-full[data-room-panel] > *:nth-child(2) { animation-delay: 0.07s; }
#rooms-view [data-room-card][data-room-state="expanded"] .relative.z-10.flex.flex-col.h-full[data-room-panel] > *:nth-child(3) { animation-delay: 0.11s; }
#rooms-view [data-room-card][data-room-state="expanded"] .relative.z-10.flex.flex-col.h-full[data-room-panel] > *:nth-child(4) { animation-delay: 0.15s; }
#rooms-view [data-room-card][data-room-state="expanded"] .relative.z-10.flex.flex-col.h-full[data-room-panel] > *:nth-child(5) { animation-delay: 0.19s; }
#rooms-view [data-room-card][data-room-state="expanded"] .relative.z-10.flex.flex-col.h-full[data-room-panel] > *:nth-child(6) { animation-delay: 0.23s; }
#rooms-view [data-room-card][data-room-state="expanded"] .relative.z-10.flex.flex-col.h-full[data-room-panel] > *:nth-child(7) { animation-delay: 0.27s; }

#rooms-view [data-room-card][data-room-state="expanded"] .relative.z-10.flex.flex-col.h-full[data-room-panel] .mt-auto,
#rooms-view [data-room-card][data-room-state="expanded"] .relative.z-10.flex.flex-col.h-full[data-room-panel] > *:last-child {
  margin-top: auto !important;
}

#rooms-view [data-room-card] [data-room-cta="1"] span,
#rooms-view [data-room-card] button[class*="w-full"] span,
#rooms-view [data-room-card] a[class*="w-full"] span {
  transition: transform 0.3s ease !important;
}

#rooms-view [data-room-card] [data-room-cta="1"]:hover span,
#rooms-view [data-room-card] button[class*="w-full"]:hover span,
#rooms-view [data-room-card] a[class*="w-full"]:hover span {
  transform: translateX(5px);
}

@media (max-width: 1023px) {
  #rooms-view [data-room-card][data-room-state="expanded"] {
    min-height: clamp(520px, 74vw, 620px) !important;
  }

  #rooms-view [data-room-card][data-room-state="expanded"] .relative.z-10.flex.flex-col.h-full[data-room-panel] {
    padding-top: clamp(160px, 26vw, 210px) !important;
  }
}

@media (max-width: 767px) {
  #rooms-view [data-room-card] {
    min-height: clamp(420px, 108vw, 500px) !important;
  }

  #rooms-view [data-room-card][data-room-state="expanded"] {
    min-height: clamp(520px, 138vw, 660px) !important;
  }

  #rooms-view [data-room-card][data-room-state="expanded"] .relative.z-10.flex.flex-col.h-full[data-room-panel],
  #rooms-view [data-room-card][data-room-state="preview"] .absolute.inset-0.flex.flex-col.items-center.justify-center[data-room-panel] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #rooms-view [data-room-card][data-room-state="expanded"] .relative.z-10.flex.flex-col.h-full[data-room-panel] {
    padding-top: 148px !important;
    padding-bottom: 20px !important;
  }

  #rooms-view [data-room-card][data-room-state="expanded"] .relative.z-10.flex.flex-col.h-full[data-room-panel] [class*="grid-cols-2"] {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TAGUNGEN SECTION — Cream background, grid fix, button update
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Background: cream instead of dark green ── */
#tagungen.section-pattern-2 {
  background: #E8E2D6 !important;
}
#tagungen.section-pattern-2::before,
#tagungen.section-pattern-2::after {
  display: none !important;
}

/* ── 2. Override PHASE 14 dark card theme for #tagungen ── */

/* GlassCard wrapper — light surface instead of dark green */
#tagungen .max-w-7xl > div[class*="!bg-white/50"],
#tagungen [class*="backdrop-blur"] {
  background: rgba(255, 255, 255, 0.65) !important;
  border-color: rgba(31, 75, 63, 0.12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06) !important;
}

/* Stat cards (data-interactive inside grid-cols-2/4) */
#tagungen [data-tagungen-content] > [class*="grid-cols-2"] > [data-interactive],
#tagungen [data-interactive][class*="bg-white"] {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(31, 75, 63, 0.12) !important;
  border-top: 2px solid rgba(197, 160, 89, 0.4) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}
#tagungen [data-interactive]:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

/* Package cards */
#tagungen [data-tagungen-package] {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(31, 75, 63, 0.12) !important;
  border-top: 2px solid rgba(197, 160, 89, 0.4) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}
#tagungen [data-tagungen-package]::before {
  background: none !important;
}
#tagungen [data-tagungen-package]:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}
#tagungen [data-tagungen-package] [class*="bg-forest-500"],
#tagungen [data-tagungen-package] [class*="bg-earth-200"],
#tagungen [data-tagungen-package] [class*="bg-earth-100"] {
  background: rgba(245, 243, 239, 0.8) !important;
  border: 1px solid rgba(31, 75, 63, 0.08) !important;
}

/* Room cards */
#tagungen [class*="bg-white\\/60"],
#tagungen [class*="bg-white\\/80"] {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(31, 75, 63, 0.12) !important;
}

/* Tech items */
#tagungen [class*="bg-earth-100\\/80"] {
  background: rgba(245, 243, 239, 0.9) !important;
}

/* ── 3. Restore dark text on cream ── */
#tagungen h1,
#tagungen h2,
#tagungen h3,
#tagungen h4 {
  color: #1A2F24 !important;
}
#tagungen p,
#tagungen li,
#tagungen label {
  color: #1A2F24 !important;
}
#tagungen [data-tagungen-content] > span,
#tagungen [class*="text-earth-"],
#tagungen [class*="text-accent-gold"] {
  color: var(--color-gold, #C5A059) !important;
}
#tagungen [data-tagungen-content] > h2,
#tagungen [data-tagungen-content] h3 {
  color: #1A2F24 !important;
}
#tagungen [data-tagungen-content] > p,
#tagungen [data-tagungen-content] [class*="text-forest-700"] {
  color: #1A2F24 !important;
}
#tagungen [data-tagungen-package] h4,
#tagungen [data-tagungen-package] [class*="font-bold"],
#tagungen [data-tagungen-package] [class*="font-medium"] {
  color: #1A2F24 !important;
}
#tagungen [data-tagungen-package] [class*="text-forest-700"],
#tagungen [data-tagungen-package] [class*="text-forest-900"],
#tagungen [data-tagungen-package] li span {
  color: #1A2F24 !important;
}
#tagungen [data-tagungen-package] ul li {
  color: #1A2F24 !important;
}
#tagungen [data-tagungen-package] [class*="text-earth-500"],
#tagungen [data-tagungen-package] svg[class*="text-earth-500"] {
  color: var(--color-gold, #C5A059) !important;
}
#tagungen [data-tagungen-package] [class*="bg-earth-100"] span,
#tagungen [data-tagungen-package] [class*="bg-earth-200"] span,
#tagungen [data-tagungen-package] [class*="bg-earth-100"] [class*="text-forest-700"],
#tagungen [data-tagungen-package] [class*="bg-earth-100"] [class*="text-forest-900"] {
  color: #1A2F24 !important;
}
#tagungen [data-interactive] [class*="text-forest-500"],
#tagungen [data-interactive] [class*="text-earth-500"] {
  color: var(--color-gold, #C5A059) !important;
}
#tagungen [data-interactive] [class*="text-forest-300"],
#tagungen [data-interactive] [class*="text-forest-900"] {
  color: #1A2F24 !important;
}
#tagungen [class*="text-white"] {
  color: #1A2F24 !important;
}
/* Keep button text white */
#tagungen button [class*="text-white"],
#tagungen button.text-white,
#tagungen button {
  color: inherit;
}

/* ── 4. Grid fix: packages 3 cols on md+, override section-pattern-2 2-col rule ── */
#tagungen [class*="grid-cols-1"][class*="grid-cols-3"][class*="gap-"] {
  grid-template-columns: repeat(3, 1fr) !important;
}
#tagungen [class*="grid-cols-1"][class*="grid-cols-2"][class*="gap-"]:not([class*="grid-cols-3"]):not([class*="grid-cols-4"]) {
  grid-template-columns: repeat(2, 1fr) !important;
}

@media (max-width: 767px) {
  #tagungen [class*="grid-cols-1"][class*="grid-cols-3"][class*="gap-"],
  #tagungen [class*="grid-cols-1"][class*="grid-cols-2"][class*="gap-"] {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ÜBER UNS SECTION — Dark green text on dark cream background
   ═══════════════════════════════════════════════════════════════ */
.section-pattern-2:has([data-about-text]) {
  --white-soft: #1A2F24;
  --color-text-light: #1A2F24;
  --color-text-light-muted: #1A2F24;
  color: #1A2F24 !important;
}
.section-pattern-2:has([data-about-text]) h1,
.section-pattern-2:has([data-about-text]) h2,
.section-pattern-2:has([data-about-text]) h3,
.section-pattern-2:has([data-about-text]) h4,
.section-pattern-2:has([data-about-text]) p,
.section-pattern-2:has([data-about-text]) li,
.section-pattern-2:has([data-about-text]) label,
.section-pattern-2:has([data-about-text]) [class*="text-white"],
.section-pattern-2:has([data-about-text]) [style*="white-soft"] {
  color: #1A2F24 !important;
}
.section-pattern-2:has([data-about-text]) h2 span {
  color: #C5A059 !important;
}
.section-pattern-2:has([data-about-text]) [class*="text-accent-gold"],
.section-pattern-2:has([data-about-text]) [class*="text-earth-"],
.section-pattern-2:has([data-about-text]) [class*="tracking-"] {
  color: #C5A059 !important;
}

/* ═══════════════════════════════════════════════════════════════
   EVENTS SECTION — Fix card text visibility & video sizing
   ═══════════════════════════════════════════════════════════════ */

/* Event cards have cream/white bg — text must be dark */
#events .rounded-3xl[class*="border-earth"] h3,
#events .rounded-3xl[class*="border-earth"] [class*="font-serif"],
#events .rounded-3xl[class*="border-earth"] [class*="font-bold"],
#events .rounded-3xl[class*="border-base"] h3,
#events .rounded-3xl[class*="border-base"] [class*="font-serif"],
#events .rounded-3xl[class*="border-base"] [class*="font-bold"] {
  color: #1A2F24 !important;
}

#events .rounded-3xl[class*="border-earth"] p,
#events .rounded-3xl[class*="border-earth"] span,
#events .rounded-3xl[class*="border-base"] p,
#events .rounded-3xl[class*="border-base"] span {
  color: #3D5A50 !important;
}

/* Keep badges/labels styled */
#events [class*="bg-forest-"] span,
#events [class*="bg-earth-"] span,
#events [class*="bg-river-"] span,
#events [class*="bg-base-9"] span {
  color: #FDFBF7 !important;
}

/* Keep button text white */
#events button span,
#events a[class*="bg-forest"] span {
  color: #FDFBF7 !important;
}

/* Gold accents */
#events .rounded-3xl [class*="text-earth-"],
#events .rounded-3xl [class*="text-accent-gold"] {
  color: #C5A059 !important;
}

/* Video: ensure it fills the container */
#events video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  inset: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   HERO — Clean glass overlay instead of heavy green tint
   ═══════════════════════════════════════════════════════════════ */

/* Replace solid green overlay with subtle neutral tint */
#hero [class*="bg-base-950/50"],
#hero [class*="bg-base-950\\/50"] {
  background-color: rgba(0, 0, 0, 0.12) !important;
}

/* Soften the radial vignette — neutral black instead of green */
#hero .absolute.inset-0:not([class*="bg-"]):not([class*="z-"]):not(video) {
  background: radial-gradient(70% 60%, rgba(0, 0, 0, 0.18) 0%, transparent 70%) !important;
}

/* Bottom gradient for text readability — neutral black */
#hero [class*="bg-gradient-to-b"] {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.08) 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.55) 100%
  ) !important;
}

/* Soften top gradient */
#hero [class*="bg-gradient-to-t"] {
  background: linear-gradient(
    to top,
    transparent 0%,
    transparent 60%,
    rgba(0, 0, 0, 0.12) 100%
  ) !important;
}

/* JS-injected overlay */
#hero .js-hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.06) 40%,
    rgba(0, 0, 0, 0.5) 100%
  ) !important;
}

/* ═══════════════════════════════════════════════════════════════
   BEWERTUNGEN SECTION — Dark cream background with dark text
   ═══════════════════════════════════════════════════════════════ */
#bewertungen {
  background: #E8E2D6 !important;
}
/* Fix oversized quote icon circle */
#bewertungen .absolute.-top-5.section-pattern-1,
#bewertungen .absolute[class*="-top-5"][class*="section-pattern-1"] {
  width: 40px !important;
  height: 40px !important;
  min-height: 0 !important;
  max-height: 40px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #1A2F24 !important;
  border-radius: 9999px !important;
}
#bewertungen::before,
#bewertungen::after {
  display: none !important;
}
/* Dark green text */
#bewertungen h1,
#bewertungen h2,
#bewertungen h3,
#bewertungen h4,
#bewertungen p,
#bewertungen blockquote,
#bewertungen span,
#bewertungen li {
  color: #1A2F24 !important;
}
/* Keep gold accents */
#bewertungen [class*="text-earth-"],
#bewertungen [class*="text-accent-gold"],
#bewertungen [style*="accent-gold"],
#bewertungen [style*="--accent-gold"] {
  color: #C5A059 !important;
}
#bewertungen [class*="fill-earth-"] {
  fill: #C5A059 !important;
  color: #C5A059 !important;
}
/* Star icons keep gold */
#bewertungen svg[class*="text-earth"] {
  color: #C5A059 !important;
}
/* Testimonial card glass */
#bewertungen [class*="bg-white"],
#bewertungen [class*="backdrop-blur"] {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(31, 75, 63, 0.1) !important;
}
/* Review quote text */
#bewertungen [class*="italic"],
#bewertungen [class*="font-serif"] {
  color: #1A2F24 !important;
}
/* Badge/source labels */
#bewertungen [class*="rounded-full"] {
  color: #1A2F24 !important;
}
/* Avatar circle keep dark teal */
#bewertungen [class*="bg-forest-600"],
#bewertungen [class*="bg-forest-700"] {
  background-color: rgba(31, 75, 63, 0.8) !important;
}
#bewertungen [class*="bg-forest-600"] span,
#bewertungen [class*="bg-forest-700"] span {
  color: #FDFBF7 !important;
}

/* ═══════════════════════════════════════════════════════════════
   EVENTS SECTION — Dark cream card backgrounds
   ═══════════════════════════════════════════════════════════════ */
#events .rounded-3xl[class*="border-earth"],
#events .rounded-3xl[class*="border-base"] {
  background: #E8E2D6 !important;
  background-color: #E8E2D6 !important;
}

/* ═══════════════════════════════════════════════════════════════
   KONTAKT SECTION — Dark cream background
   ═══════════════════════════════════════════════════════════════ */
#kontakt {
  background: #E8E2D6 !important;
  background-color: #E8E2D6 !important;
}
#kontakt .absolute.inset-0 {
  background: none !important;
}
#kontakt::before,
#kontakt::after {
  display: none !important;
}
#kontakt h1, #kontakt h2, #kontakt h3, #kontakt h4,
#kontakt p, #kontakt span, #kontakt label, #kontakt li {
  color: #1A2F24 !important;
}
#kontakt a {
  color: #1A2F24 !important;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM FOOTER — Das ELB Hotel
   ═══════════════════════════════════════════════════════════════ */
.elb-footer {
  position: relative;
  background: #080f10;
  color: rgba(253,251,247,.85);
  overflow: hidden;
  border-top: 2px solid var(--color-gold);
  font-family: var(--font-inter, 'Inter', sans-serif);
}

/* Oversized watermark */
.elb-footer-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-cormorant);
  font-size: clamp(8rem, 22vw, 18rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(253,251,247,0.04);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  line-height: 1;
}

.elb-footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 4rem 2rem 0;
}

.elb-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}

/* Column 1 — Brand */
.elb-footer-brand h3 {
  font-family: var(--font-cormorant);
  font-size: var(--text-3xl);
  font-weight: 600;
  color: #FDFBF7;
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}
.elb-footer-brand .elb-footer-tagline {
  font-style: italic;
  color: rgba(253,251,247,.6);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.elb-footer-stars {
  display: flex;
  gap: 4px;
  color: var(--color-gold);
  font-size: 1.1rem;
}

/* Column 2 — Links */
.elb-footer-links h4,
.elb-footer-contact h4,
.elb-footer-social h4 {
  font-family: var(--font-cormorant);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.elb-footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.elb-footer-links li {
  margin-bottom: 0.65rem;
}
.elb-footer-links a {
  color: rgba(253,251,247,.7);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color 0.25s ease, transform 0.25s ease;
  display: inline-block;
  position: relative;
}
.elb-footer-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--color-gold);
  transition: width 0.3s ease;
}
.elb-footer-links a:hover {
  color: var(--color-gold) !important;
  opacity: 1;
}
.elb-footer-links a:hover::after {
  width: 100%;
}

/* Column 3 — Contact */
.elb-footer-contact p,
.elb-footer-contact a {
  font-size: var(--text-sm);
  color: rgba(253,251,247,.7);
  line-height: 1.8;
  margin: 0;
  text-decoration: none;
  transition: color 0.25s ease;
}
.elb-footer-contact a:hover {
  color: var(--color-gold) !important;
  opacity: 1;
}
.elb-footer-contact .elb-footer-map {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1rem;
  color: var(--color-gold);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: opacity 0.25s ease;
}
.elb-footer-contact .elb-footer-map:hover {
  opacity: 0.8;
}

/* Column 4 — Social + Newsletter */
.elb-footer-icons {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.elb-footer-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(253,251,247,.15);
  color: rgba(253,251,247,.7);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.elb-footer-icons a:hover {
  transform: scale(1.15);
  border-color: var(--color-gold);
  color: var(--color-gold) !important;
  background: rgba(197,160,89,0.08);
  opacity: 1;
}
.elb-footer-icons a svg {
  width: 18px;
  height: 18px;
}

.elb-footer-newsletter {
  margin-top: 0.5rem;
}
.elb-footer-newsletter p {
  font-size: var(--text-xs);
  color: rgba(253,251,247,.5);
  margin-bottom: 0.75rem;
}
.elb-footer-newsletter-form {
  display: flex;
  gap: 0;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1px solid rgba(253,251,247,.12);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.elb-footer-newsletter-form:focus-within {
  border-color: var(--color-gold);
  box-shadow: 0 0 16px rgba(197,160,89,0.15);
}
.elb-footer-newsletter-form input {
  flex: 1;
  background: rgba(253,251,247,.06);
  border: none;
  padding: 0.6rem 1rem;
  color: #FDFBF7;
  font-size: var(--text-sm);
  outline: none;
  font-family: inherit;
  min-width: 0;
}
.elb-footer-newsletter-form input::placeholder {
  color: rgba(253,251,247,.35);
}
.elb-footer-newsletter-form button {
  background: var(--color-gold);
  color: #0c1718;
  border: none;
  padding: 0.6rem 1.2rem;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
  white-space: nowrap;
  font-family: inherit;
}
.elb-footer-newsletter-form button:hover {
  background: var(--color-gold-light);
}
.elb-footer-newsletter-form button:active {
  transform: scale(0.97);
}

/* Bottom bar */
.elb-footer-bottom {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 3rem auto 0;
  padding: 1.5rem 2rem;
  border-top: 1px solid rgba(253,251,247,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: var(--text-xs);
  color: rgba(253,251,247,.4);
}
.elb-footer-bottom a {
  color: rgba(253,251,247,.4);
  text-decoration: none;
  transition: color 0.25s ease;
}
.elb-footer-bottom a:hover {
  color: var(--color-gold) !important;
  opacity: 1;
}
.elb-footer-legal {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Back to top button */
.elb-back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 900;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-gold);
  color: #0c1718;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(197,160,89,0.3);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.25s ease;
  pointer-events: none;
}
.elb-back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: elbBttBounce 2.5s ease-in-out infinite;
}
.elb-back-to-top:hover {
  background: var(--color-gold-light);
}
.elb-back-to-top:active {
  transform: scale(0.93);
}
.elb-back-to-top svg {
  width: 20px;
  height: 20px;
}

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

/* Footer mobile */
@media (max-width: 900px) {
  .elb-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
@media (max-width: 600px) {
  .elb-footer-inner {
    padding: 3rem 1.25rem 0;
  }
  .elb-footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.5rem;
  }
  .elb-footer-stars {
    justify-content: center;
  }
  .elb-footer-icons {
    justify-content: center;
  }
  .elb-footer-bottom {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem 1.25rem;
  }
  .elb-footer-legal {
    justify-content: center;
  }
  .elb-footer-watermark {
    font-size: 6rem;
  }
  .elb-footer-contact .elb-footer-map {
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FULL-SITE MOTION & ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

/* --- Hero Section Animations --- */
@keyframes elbHeroZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.03); }
}
#hero video,
#hero > .absolute:first-child img,
#hero > div:first-child video {
  animation: elbHeroZoom 15s ease-in-out infinite alternate;
  will-change: transform;
}

/* Hero text entrance */
@keyframes elbFadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes elbFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes elbScaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Scroll-triggered reveal classes */
.elb-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.elb-reveal.elb-visible {
  opacity: 1;
  transform: translateY(0);
}

.elb-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.elb-reveal-left.elb-visible {
  opacity: 1;
  transform: translateX(0);
}

.elb-reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.elb-reveal-right.elb-visible {
  opacity: 1;
  transform: translateX(0);
}

.elb-reveal-scale {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.elb-reveal-scale.elb-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.elb-delay-1 { transition-delay: 0.1s; }
.elb-delay-2 { transition-delay: 0.2s; }
.elb-delay-3 { transition-delay: 0.3s; }
.elb-delay-4 { transition-delay: 0.4s; }
.elb-delay-5 { transition-delay: 0.5s; }

/* --- Button Hover Effects --- */
.elb-btn-hover {
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.elb-btn-hover:hover {
  transform: scale(1.04);
  filter: brightness(1.1);
}
.elb-btn-hover:active {
  transform: scale(0.97);
}

/* --- Card Hover Effects --- */
.elb-card-hover {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.elb-card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.2), 0 0 0 1px rgba(197,160,89,0.12);
}

/* --- Image hover zoom --- */
.elb-img-hover {
  overflow: hidden;
}
.elb-img-hover img,
.elb-img-hover video {
  transition: transform 0.6s ease;
}
.elb-img-hover:hover img,
.elb-img-hover:hover video {
  transform: scale(1.08);
}

/* --- Gallery item reveal --- */
.elb-gallery-item {
  opacity: 0;
  transform: translateY(30px) rotate(1.5deg);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.elb-gallery-item.elb-visible {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/* --- Ambient floating --- */
@keyframes elbFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.elb-float {
  animation: elbFloat 4s ease-in-out infinite;
}

/* --- Decorative shimmer --- */
@keyframes elbShimmer {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}
.elb-shimmer {
  animation: elbShimmer 3s ease-in-out infinite;
}

/* --- Nav link underline slide --- */
nav a,
header a {
  position: relative;
}
nav a::after,
header a[href*="#"]::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1.5px;
  background: var(--color-gold);
  transition: width 0.3s ease;
}
nav a:hover::after,
header a[href*="#"]:hover::after {
  width: 100%;
}

/* --- Counter animation --- */
.elb-counter {
  display: inline-block;
}

/* --- Footer animation classes --- */
.elb-footer-col {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.elb-footer-col.elb-visible {
  opacity: 1;
  transform: translateY(0);
}
.elb-footer-icon-pop {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.elb-footer-icon-pop.elb-visible {
  opacity: 1;
  transform: scale(1);
}

/* Watermark letter-spacing animation */
@keyframes elbWatermarkReveal {
  from { opacity: 0; letter-spacing: 0.5em; }
  to { opacity: 1; letter-spacing: 0.12em; }
}
.elb-footer-watermark.elb-visible {
  animation: elbWatermarkReveal 1.5s ease-out forwards;
}

/* --- Video clip-path reveal --- */
.elb-video-reveal {
  clip-path: inset(10%);
  opacity: 0;
  transition: clip-path 0.8s ease-out, opacity 0.6s ease-out;
}
.elb-video-reveal.elb-visible {
  clip-path: inset(0%);
  opacity: 1;
}

/* Prevent motion for reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .elb-reveal, .elb-reveal-left, .elb-reveal-right, .elb-reveal-scale,
  .elb-gallery-item, .elb-footer-col, .elb-footer-icon-pop, .elb-video-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  #hero video, #hero > .absolute:first-child img {
    animation: none !important;
  }
  .elb-float, .elb-shimmer {
    animation: none !important;
  }
  .elb-back-to-top.visible {
    animation: none !important;
  }
}

/* ─── BOOKING MODAL: dark cream background + dark green text ───── */
.fixed [class*="bg-\[#DEF4C6\]"] {
  background-color: #F5E6C8 !important;
}
/* Override ALL text inside the booking modal cream panel.
   Needs #rooms-view prefix for specificity to beat existing overrides. */
#rooms-view .fixed [class*="bg-\[#DEF4C6\]"] *,
#rooms-view .fixed [class*="bg-\[#DEF4C6\]"] h2,
#rooms-view .fixed [class*="bg-\[#DEF4C6\]"] .text-center h2,
#rooms-view .fixed [class*="bg-\[#DEF4C6\]"] p,
#rooms-view .fixed [class*="bg-\[#DEF4C6\]"] span,
#rooms-view .fixed [class*="bg-\[#DEF4C6\]"] label,
#rooms-view .fixed [class*="bg-\[#DEF4C6\]"] select,
#rooms-view .fixed [class*="bg-\[#DEF4C6\]"] option,
#rooms-view .fixed [class*="bg-\[#DEF4C6\]"] input,
#rooms-view .fixed [class*="bg-\[#DEF4C6\]"] div,
.fixed [class*="bg-\[#DEF4C6\]"] h2,
.fixed [class*="bg-\[#DEF4C6\]"] p,
.fixed [class*="bg-\[#DEF4C6\]"] span,
.fixed [class*="bg-\[#DEF4C6\]"] label,
.fixed [class*="bg-\[#DEF4C6\]"] select,
.fixed [class*="bg-\[#DEF4C6\]"] option,
.fixed [class*="bg-\[#DEF4C6\]"] input,
.fixed [class*="bg-\[#DEF4C6\]"] div {
  color: #1A2F24 !important;
}
#rooms-view .fixed [class*="bg-\[#DEF4C6\]"] input::placeholder,
.fixed [class*="bg-\[#DEF4C6\]"] input::placeholder {
  color: rgba(26,47,36,0.5) !important;
}
#rooms-view .fixed [class*="bg-\[#DEF4C6\]"] svg,
.fixed [class*="bg-\[#DEF4C6\]"] svg {
  color: #1A2F24 !important;
  stroke: #1A2F24 !important;
}

/* ═══════════════════════════════════════════════════════════════
   ADVANCED MULTI-STEP BOOKING SYSTEM — Das ELB Hotel
   ═══════════════════════════════════════════════════════════════ */

/* ── Modal Overlay ─────────────────────────────────────────────── */
.elb-booking-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 23, 24, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.elb-booking-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Modal Container ───────────────────────────────────────────── */
.elb-booking-modal {
  position: relative;
  width: 94vw;
  max-width: 720px;
  max-height: 90vh;
  background: #F5E6C8;
  border-radius: 2rem;
  border: 2px solid rgba(26, 47, 36, 0.12);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(30px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.elb-booking-overlay.active .elb-booking-modal {
  transform: translateY(0) scale(1);
}

/* ── Modal Header ──────────────────────────────────────────────── */
.elb-booking-header {
  background: #1A2F24;
  padding: 1.25rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.elb-booking-header h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #F5E6C8 !important;
  margin: 0;
  letter-spacing: 0.02em;
}
.elb-booking-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(245, 230, 200, 0.2);
  background: rgba(245, 230, 200, 0.08);
  color: #F5E6C8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.elb-booking-close:hover {
  background: rgba(245, 230, 200, 0.18);
  border-color: rgba(245, 230, 200, 0.35);
}

/* ── Progress Bar ──────────────────────────────────────────────── */
.elb-booking-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 1rem 1.5rem;
  background: rgba(26, 47, 36, 0.06);
  border-bottom: 1px solid rgba(26, 47, 36, 0.08);
  flex-shrink: 0;
  overflow-x: auto;
}
.elb-progress-step {
  display: flex;
  align-items: center;
  gap: 0;
  cursor: default;
  white-space: nowrap;
}
.elb-progress-step.clickable {
  cursor: pointer;
}
.elb-progress-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  border: 2px solid rgba(26, 47, 36, 0.2);
  background: transparent;
  color: rgba(26, 47, 36, 0.4);
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.elb-progress-step.active .elb-progress-dot {
  background: #C5A059;
  border-color: #C5A059;
  color: #fff;
  box-shadow: 0 0 12px rgba(197, 160, 89, 0.4);
}
.elb-progress-step.completed .elb-progress-dot {
  background: #1A2F24;
  border-color: #1A2F24;
  color: #F5E6C8;
}
.elb-progress-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(26, 47, 36, 0.4);
  margin-left: 0.4rem;
  transition: color 0.3s ease;
}
.elb-progress-step.active .elb-progress-label {
  color: #C5A059;
}
.elb-progress-step.completed .elb-progress-label {
  color: #1A2F24;
}
.elb-progress-line {
  width: 24px;
  height: 2px;
  background: rgba(26, 47, 36, 0.12);
  margin: 0 0.35rem;
  flex-shrink: 0;
  transition: background 0.3s ease;
}
.elb-progress-step.completed + .elb-progress-line,
.elb-progress-line.done {
  background: #1A2F24;
}

/* ── Modal Body ────────────────────────────────────────────────── */
.elb-booking-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  min-height: 320px;
}
.elb-booking-body::-webkit-scrollbar {
  width: 5px;
}
.elb-booking-body::-webkit-scrollbar-track {
  background: transparent;
}
.elb-booking-body::-webkit-scrollbar-thumb {
  background: rgba(26, 47, 36, 0.15);
  border-radius: 10px;
}

/* ── Step Content ──────────────────────────────────────────────── */
.elb-step-content {
  padding: 1.75rem;
  animation: elbStepIn 0.4s ease forwards;
}
@keyframes elbStepIn {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
.elb-step-content.slide-out-left {
  animation: elbStepOutLeft 0.3s ease forwards;
}
@keyframes elbStepOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-30px); }
}
.elb-step-content.slide-in-right {
  animation: elbStepInRight 0.4s ease forwards;
}
@keyframes elbStepInRight {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ── Step Title ────────────────────────────────────────────────── */
.elb-step-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: #1A2F24 !important;
  text-align: center;
  margin-bottom: 0.35rem;
  letter-spacing: 0.03em;
}
.elb-step-subtitle {
  font-size: 0.85rem;
  color: rgba(26, 47, 36, 0.6) !important;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* ── Form Fields ───────────────────────────────────────────────── */
.elb-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.elb-form-grid.cols-1 {
  grid-template-columns: 1fr;
}
.elb-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.elb-form-group.full-width {
  grid-column: 1 / -1;
}
.elb-form-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #1A2F24 !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.elb-form-label .required {
  color: #C5A059;
  font-weight: 400;
}
.elb-form-input,
.elb-form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid rgba(26, 47, 36, 0.12);
  border-radius: 0.85rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #1A2F24 !important;
  outline: none;
  transition: all 0.25s ease;
  font-family: inherit;
  -webkit-appearance: none;
}
.elb-form-input:focus,
.elb-form-select:focus {
  border-color: #C5A059;
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.15);
  background: rgba(255, 255, 255, 0.7);
}
.elb-form-input::placeholder {
  color: rgba(26, 47, 36, 0.35) !important;
  font-weight: 400;
}
.elb-form-input.error,
.elb-form-select.error {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}
.elb-form-error {
  font-size: 0.72rem;
  color: #c0392b !important;
  margin-top: 0.15rem;
  display: none;
}
.elb-form-error.visible {
  display: block;
}

/* ── Number Counter ────────────────────────────────────────────── */
.elb-counter {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid rgba(26, 47, 36, 0.12);
  border-radius: 0.85rem;
  padding: 0.5rem 0.75rem;
}
.elb-counter-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(26, 47, 36, 0.15);
  background: rgba(26, 47, 36, 0.05);
  color: #1A2F24;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.elb-counter-btn:hover {
  background: #1A2F24;
  color: #F5E6C8;
  border-color: #1A2F24;
}
.elb-counter-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.elb-counter-btn:disabled:hover {
  background: rgba(26, 47, 36, 0.05);
  color: #1A2F24;
  border-color: rgba(26, 47, 36, 0.15);
}
.elb-counter-value {
  font-size: 1rem;
  font-weight: 700;
  color: #1A2F24 !important;
  min-width: 2rem;
  text-align: center;
}

/* ── Type Selection Cards (Step 0) ─────────────────────────────── */
.elb-type-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  padding: 1rem 0;
}
.elb-type-card {
  background: rgba(255, 255, 255, 0.55);
  border: 2px solid rgba(26, 47, 36, 0.1);
  border-radius: 1.25rem;
  padding: 2rem 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.elb-type-card:hover {
  border-color: #C5A059;
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(197, 160, 89, 0.15);
}
.elb-type-card:active {
  transform: translateY(-2px);
}
.elb-type-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(26, 47, 36, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: #1A2F24;
  transition: all 0.3s ease;
}
.elb-type-card:hover .elb-type-card-icon {
  background: #C5A059;
  color: #fff;
}
.elb-type-card-icon svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.elb-type-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1A2F24 !important;
  margin-bottom: 0.4rem;
}
.elb-type-card p {
  font-size: 0.8rem;
  color: rgba(26, 47, 36, 0.6) !important;
  line-height: 1.4;
}

/* ── Room Cards ────────────────────────────────────────────────── */
.elb-room-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.elb-room-card {
  display: flex;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.55);
  border: 2px solid rgba(26, 47, 36, 0.08);
  border-radius: 1.15rem;
  padding: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  align-items: center;
}
.elb-room-card:hover {
  border-color: rgba(197, 160, 89, 0.5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.elb-room-card.selected {
  border-color: #C5A059;
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.2), 0 4px 16px rgba(0, 0, 0, 0.06);
  background: rgba(197, 160, 89, 0.06);
}
.elb-room-card-img {
  width: 110px;
  height: 90px;
  border-radius: 0.75rem;
  object-fit: cover;
  flex-shrink: 0;
}
.elb-room-card-info {
  flex: 1;
  min-width: 0;
}
.elb-room-card-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: #1A2F24 !important;
  margin-bottom: 0.2rem;
}
.elb-room-card-meta {
  font-size: 0.73rem;
  color: rgba(26, 47, 36, 0.55) !important;
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.elb-room-card-price {
  font-size: 1.05rem;
  font-weight: 700;
  color: #C5A059 !important;
}
.elb-room-card-price span {
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(26, 47, 36, 0.5) !important;
}
.elb-room-card-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(26, 47, 36, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.elb-room-card.selected .elb-room-card-check {
  background: #C5A059;
  border-color: #C5A059;
  color: #fff;
}

/* ── Guest Cards (Group Flow) ──────────────────────────────────── */
.elb-guest-card {
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid rgba(26, 47, 36, 0.1);
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  animation: elbStepIn 0.3s ease;
}
.elb-guest-card-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(26, 47, 36, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #1A2F24;
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.elb-guest-card-fields {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.elb-guest-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
}
.elb-guest-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 0.5rem;
  border: 1px solid rgba(26, 47, 36, 0.1);
  background: transparent;
  color: rgba(26, 47, 36, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.elb-guest-action-btn:hover {
  background: rgba(26, 47, 36, 0.08);
  color: #1A2F24;
}
.elb-guest-action-btn.delete:hover {
  background: rgba(192, 57, 43, 0.08);
  color: #c0392b;
}
.elb-guest-counter {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(26, 47, 36, 0.6) !important;
  padding: 0.75rem;
  background: rgba(26, 47, 36, 0.03);
  border-radius: 0.75rem;
  margin-top: 0.5rem;
}
.elb-guest-counter strong {
  color: #C5A059 !important;
}

/* ── Room Assignment Cards ─────────────────────────────────────── */
.elb-assign-card {
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid rgba(26, 47, 36, 0.1);
  border-radius: 1rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
}
.elb-assign-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(26, 47, 36, 0.06);
}
.elb-assign-card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #1A2F24 !important;
}
.elb-assign-card-cap {
  font-size: 0.72rem;
  color: rgba(26, 47, 36, 0.5) !important;
  background: rgba(26, 47, 36, 0.05);
  padding: 0.2rem 0.6rem;
  border-radius: 1rem;
}
.elb-assign-card-cap.full {
  background: rgba(197, 160, 89, 0.15);
  color: #C5A059 !important;
}
.elb-assign-card-cap.over {
  background: rgba(192, 57, 43, 0.1);
  color: #c0392b !important;
}
.elb-assign-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 2rem;
}
.elb-assign-chip {
  background: #1A2F24;
  color: #F5E6C8 !important;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 2rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.elb-assign-chip-remove {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
  display: flex;
}
.elb-assign-chip-remove:hover {
  opacity: 1;
}
.elb-assign-empty {
  font-size: 0.78rem;
  color: rgba(26, 47, 36, 0.35) !important;
  font-style: italic;
  padding: 0.25rem 0;
}

/* ── Summary Section ───────────────────────────────────────────── */
.elb-summary-section {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(26, 47, 36, 0.08);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}
.elb-summary-section h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1A2F24 !important;
  margin-bottom: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.elb-summary-edit {
  font-size: 0.7rem;
  font-weight: 600;
  color: #C5A059 !important;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: opacity 0.2s;
}
.elb-summary-edit:hover {
  opacity: 0.7;
}
.elb-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #1A2F24 !important;
  padding: 0.3rem 0;
}
.elb-summary-row span:last-child {
  font-weight: 600;
}
.elb-summary-divider {
  height: 1px;
  background: rgba(26, 47, 36, 0.08);
  margin: 0.5rem 0;
}
.elb-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1A2F24 !important;
  padding: 0.75rem 0 0.25rem;
}
.elb-summary-total span:last-child {
  color: #C5A059 !important;
  font-size: 1.3rem;
}

/* ── Toggle Switch ─────────────────────────────────────────────── */
.elb-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
}
.elb-toggle-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1A2F24 !important;
}
.elb-toggle {
  width: 44px;
  height: 24px;
  background: rgba(26, 47, 36, 0.15);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
  border: none;
}
.elb-toggle.on {
  background: #C5A059;
}
.elb-toggle::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: transform 0.3s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.elb-toggle.on::after {
  transform: translateX(20px);
}

/* ── Footer Navigation ─────────────────────────────────────────── */
.elb-booking-footer {
  padding: 1rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgba(26, 47, 36, 0.08);
  background: rgba(245, 230, 200, 0.5);
  flex-shrink: 0;
}
.elb-btn-back {
  padding: 0.7rem 1.5rem;
  border-radius: 2rem;
  border: 1.5px solid rgba(26, 47, 36, 0.2);
  background: transparent;
  color: #1A2F24;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
}
.elb-btn-back:hover {
  background: rgba(26, 47, 36, 0.06);
  border-color: rgba(26, 47, 36, 0.3);
}
.elb-btn-next {
  flex: 1;
  max-width: 320px;
  padding: 0.8rem 1.5rem;
  border-radius: 2rem;
  border: none;
  background: #1A2F24;
  color: #F5E6C8 !important;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
  text-align: center;
}
.elb-btn-next:hover {
  background: #243d2e;
  box-shadow: 0 4px 16px rgba(26, 47, 36, 0.25);
}
.elb-btn-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.elb-btn-next.gold {
  background: #C5A059;
  color: #fff !important;
}
.elb-btn-next.gold:hover {
  background: #b8924d;
  box-shadow: 0 4px 16px rgba(197, 160, 89, 0.3);
}
.elb-btn-add-guest {
  width: 100%;
  padding: 0.7rem;
  border-radius: 0.85rem;
  border: 1.5px dashed rgba(197, 160, 89, 0.4);
  background: rgba(197, 160, 89, 0.05);
  color: #C5A059;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
  margin-top: 0.5rem;
}
.elb-btn-add-guest:hover {
  background: rgba(197, 160, 89, 0.1);
  border-color: #C5A059;
}
.elb-btn-auto {
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  border: 1px solid rgba(26, 47, 36, 0.15);
  background: rgba(26, 47, 36, 0.04);
  color: #1A2F24;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.elb-btn-auto:hover {
  background: rgba(26, 47, 36, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
   GROUP BOOKING — ÜBERSICHT (breakfast + room options)
   ═══════════════════════════════════════════════════════════════ */

.elb-room-options-section {
  margin-top: 1.25rem;
}
.elb-room-option-row {
  background: #FEFCF5;
  border: 1.5px solid #E8DEC8;
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.65rem;
  transition: border-color 0.2s;
}
.elb-room-option-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.elb-room-option-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1A2F24 !important;
}
.elb-breakfast-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid #E8DEC8;
  flex-wrap: wrap;
}
.elb-breakfast-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: rgba(26, 47, 36, 0.75) !important;
  cursor: pointer;
  user-select: none;
}
.elb-breakfast-check {
  accent-color: #C5A059;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.elb-breakfast-price {
  font-size: 0.78rem;
  font-weight: 600;
  color: #247A6E !important;
  background: rgba(36, 122, 110, 0.08);
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
  white-space: nowrap;
}

/* ── Availability error banner ──────────────────────────────── */
.elb-avail-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(212, 68, 42, 0.08);
  border: 1.5px solid rgba(212, 68, 42, 0.28);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-size: 0.83rem;
  color: #D4442A !important;
  margin-bottom: 1rem;
  animation: elbShakeIn 0.3s ease;
}

/* ── Availability check button spinner ──────────────────────── */
.elb-avail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}
.elb-avail-btn .elb-pay-spinner {
  display: none;
}
.elb-avail-btn.loading .elb-pay-spinner {
  display: inline-block;
}
.elb-avail-btn.loading .elb-pay-submit-text {
  opacity: 0.8;
}

/* ── Slim guest card (name-only) ─────────────────────────────── */
.elb-guest-card--slim {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
}
.elb-guest-card--slim .elb-guest-card-fields {
  display: flex;
  flex: 1;
  gap: 0.65rem;
  align-items: center;
  grid-template-columns: unset;
}
.elb-guest-card--slim .elb-form-group {
  flex: 1;
  margin: 0;
}
.elb-guest-card--slim .elb-g-room-group {
  flex: 0 0 180px;
}
.elb-guest-card--slim .elb-g-room-group .elb-form-select {
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
}
@media (max-width: 540px) {
  .elb-guest-card--slim .elb-guest-card-fields {
    flex-direction: column;
    align-items: stretch;
  }
  .elb-guest-card--slim .elb-g-room-group {
    flex: unset;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PAYMENT STEP
   ═══════════════════════════════════════════════════════════════ */

/* ── Payment step wrapper ───────────────────────────────────────── */
.elb-payment-step {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Booking summary card ───────────────────────────────────────── */
.elb-pay-card {
  background: #FEFCF5;
  border: 1.5px solid #E8DEC8;
  border-radius: 14px;
  overflow: hidden;
}
.elb-pay-card-header {
  padding: 0.85rem 1.25rem;
  background: #1A2F24;
  display: flex;
  align-items: center;
}
.elb-pay-card-header h4 {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #C5A059 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.elb-pay-summary {
  padding: 1rem 1.25rem;
}
.elb-pay-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
  font-size: 0.85rem;
  color: rgba(26, 47, 36, 0.75) !important;
}
.elb-pay-summary-row span:last-child {
  font-weight: 500;
  color: #1A2F24 !important;
  text-align: right;
}
.elb-pay-summary-ref {
  padding-bottom: 0.5rem;
}
.elb-pay-ref-badge {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #C5A059 !important;
  background: rgba(197, 160, 89, 0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  letter-spacing: 0.05em;
}
.elb-pay-summary-divider {
  height: 1px;
  background: #E8DEC8;
  margin: 0.5rem 0;
}
.elb-pay-summary-sub {
  padding-left: 0.5rem;
  opacity: 0.85;
}
.elb-pay-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0 0.1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #1A2F24 !important;
  border-top: 1.5px solid #E8DEC8;
  margin-top: 0.4rem;
}
.elb-pay-summary-total span:last-child {
  color: #C5A059 !important;
  font-size: 1.1rem;
}

/* ── Payment option selector ────────────────────────────────────── */
.elb-pay-options {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.elb-pay-option {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border: 1.5px solid #E8DEC8;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  background: #FEFCF5;
  position: relative;
}
.elb-pay-option:hover {
  border-color: #C5A059;
  background: rgba(197, 160, 89, 0.04);
}
.elb-pay-option.active {
  border-color: #C5A059;
  background: rgba(197, 160, 89, 0.06);
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.15);
}
.elb-pay-option-radio {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #D8CEBC;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15rem;
  transition: border-color 0.2s ease;
}
.elb-pay-option.active .elb-pay-option-radio {
  border-color: #C5A059;
}
.elb-pay-option-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.2s ease;
}
.elb-pay-option.active .elb-pay-option-dot {
  background: #C5A059;
}
.elb-pay-option-content {
  flex: 1;
  min-width: 0;
}
.elb-pay-option-header {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.elb-pay-option-icon {
  flex-shrink: 0;
  color: rgba(26, 47, 36, 0.5);
  margin-top: 0.1rem;
  transition: color 0.2s ease;
}
.elb-pay-option.active .elb-pay-option-icon {
  color: #C5A059;
}
.elb-pay-option-content strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1A2F24 !important;
  margin-bottom: 0.2rem;
}
.elb-pay-option-content p {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(26, 47, 36, 0.6) !important;
  line-height: 1.4;
}

/* ── Payment form area ──────────────────────────────────────────── */
.elb-pay-form-area {
  background: #FEFCF5;
  border: 1.5px solid #E8DEC8;
  border-radius: 12px;
  overflow: hidden;
}
.elb-pay-form-inner {
  padding: 1.25rem;
}
.elb-pay-mode-info {
  margin-bottom: 1.1rem;
}
.elb-pay-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  margin-bottom: 0.65rem;
}
.elb-pay-mode-badge.pay-now {
  background: rgba(36, 122, 110, 0.12);
  color: #247A6E !important;
}
.elb-pay-mode-badge.pay-later {
  background: rgba(197, 160, 89, 0.15);
  color: #9a7a3a !important;
}
.elb-pay-mode-info p {
  font-size: 0.83rem;
  color: rgba(26, 47, 36, 0.7) !important;
  margin: 0;
  line-height: 1.5;
}

/* ── Stripe element container ───────────────────────────────────── */
.elb-stripe-element {
  border-radius: 10px;
  overflow: hidden;
  min-height: 60px;
}
.elb-stripe-loading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.25rem;
  font-size: 0.85rem;
  color: rgba(26, 47, 36, 0.5) !important;
  justify-content: center;
}

/* ── Stripe mock placeholder (demo mode) ────────────────────────── */
.elb-stripe-placeholder {
  border: 1.5px solid #D8CEBC;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  background: #FEFCF5;
}
.elb-stripe-placeholder-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(26, 47, 36, 0.6) !important;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.elb-stripe-placeholder-fields {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.elb-stripe-placeholder-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.elb-stripe-placeholder-field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(26, 47, 36, 0.55) !important;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.elb-stripe-mock-input {
  background: #F5F0E8;
  border: 1.5px solid #D8CEBC;
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  color: rgba(26, 47, 36, 0.35) !important;
  letter-spacing: 0.08em;
  font-family: 'Courier New', monospace;
}
.elb-stripe-placeholder-note {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: rgba(26, 47, 36, 0.45) !important;
  margin: 0.85rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid #E8DEC8;
}

/* ── Trust indicators ───────────────────────────────────────────── */
.elb-pay-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: rgba(26, 47, 36, 0.5) !important;
  padding: 0.25rem 0;
}
.elb-pay-trust span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.elb-pay-stripe-badge {
  font-size: 0.72rem;
  color: rgba(26, 47, 36, 0.4) !important;
}
.elb-pay-stripe-badge strong {
  color: #635BFF !important;
}

/* ── Error message ──────────────────────────────────────────────── */
.elb-pay-error {
  background: rgba(212, 68, 42, 0.08);
  border: 1.5px solid rgba(212, 68, 42, 0.25);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.83rem;
  color: #D4442A !important;
  line-height: 1.4;
  animation: elbShakeIn 0.3s ease;
}
@keyframes elbShakeIn {
  0%   { transform: translateX(-4px); opacity: 0; }
  50%  { transform: translateX(4px); }
  100% { transform: translateX(0); opacity: 1; }
}

/* ── Action buttons row ─────────────────────────────────────────── */
.elb-pay-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.25rem;
}

/* ── Submit button spinner ──────────────────────────────────────── */
.elb-pay-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: elbSpin 0.7s linear infinite;
  flex-shrink: 0;
}
.elb-btn-next.loading .elb-pay-spinner {
  display: inline-block;
}
.elb-btn-next.loading .elb-pay-submit-text {
  opacity: 0.7;
}
.elb-pay-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
@keyframes elbSpin {
  to { transform: rotate(360deg); }
}

/* ── Success screen additions ───────────────────────────────────── */
.elb-success-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.9rem;
  border-radius: 100px;
  margin: 0.5rem 0 0.75rem;
}
.elb-success-status.confirmed {
  background: rgba(36, 122, 110, 0.12);
  color: #247A6E !important;
}
.elb-success-status.reserved {
  background: rgba(197, 160, 89, 0.15);
  color: #9a7a3a !important;
}
.elb-success-next-steps {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 320px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.elb-success-next-steps li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: rgba(26, 47, 36, 0.65) !important;
}
.elb-success-next-steps li svg {
  flex-shrink: 0;
  color: #247A6E;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .elb-pay-trust {
    gap: 0.75rem;
  }
  .elb-stripe-placeholder-row {
    grid-template-columns: 1fr;
  }
  .elb-pay-actions {
    flex-direction: column-reverse;
  }
  .elb-pay-actions .elb-btn-back,
  .elb-pay-actions .elb-btn-next {
    width: 100%;
    text-align: center;
  }
}

/* ── Success Screen ────────────────────────────────────────────── */
.elb-success {
  text-align: center;
  padding: 2.5rem 1.5rem;
}
.elb-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #1A2F24;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  animation: elbSuccessPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes elbSuccessPop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
.elb-success-icon svg {
  width: 32px;
  height: 32px;
  stroke: #C5A059;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.elb-success h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1A2F24 !important;
  margin-bottom: 0.5rem;
}
.elb-success p {
  font-size: 0.9rem;
  color: rgba(26, 47, 36, 0.65) !important;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
.elb-success-ref {
  display: inline-block;
  background: rgba(26, 47, 36, 0.06);
  padding: 0.6rem 1.5rem;
  border-radius: 0.75rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #C5A059 !important;
  margin: 1rem 0;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .elb-booking-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }
  .elb-type-cards {
    grid-template-columns: 1fr;
  }
  .elb-form-grid {
    grid-template-columns: 1fr;
  }
  .elb-room-card {
    flex-direction: column;
    align-items: stretch;
  }
  .elb-room-card-img {
    width: 100%;
    height: 140px;
  }
  .elb-guest-card-fields {
    grid-template-columns: 1fr;
  }
  .elb-progress-label {
    display: none;
  }
  .elb-booking-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: #F5E6C8;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
  }
  .elb-step-content {
    padding: 1.25rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   VOUCHER SYSTEM — Das ELB Hotel
   ═══════════════════════════════════════════════════════════════════ */

/* ── CSS variables ──────────────────────────────────────────────── */
:root {
  --vou-green:  #1A2F24;
  --vou-green2: #2a4a38;
  --vou-gold:   #C5A059;
  --vou-gold2:  #D4B06A;
  --vou-cream:  #F5F1EA;
  --vou-border: #E2D8CB;
  --vou-text:   #1a1a1a;
  --vou-muted:  #6b7280;
  --vou-radius: 14px;
}

/* ── Overlay & Modal ────────────────────────────────────────────── */
.elb-vou-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.elb-vou-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.elb-vou-modal {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 860px;
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.15);
  transform: translateY(24px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
  display: flex;
  flex-direction: column;
}
.elb-vou-overlay.open .elb-vou-modal {
  transform: translateY(0) scale(1);
}

/* ── Modal Header ───────────────────────────────────────────────── */
.elb-vou-modal-header {
  background: var(--vou-green);
  padding: 22px 28px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
  border-radius: 20px 20px 0 0;
}
.elb-vou-modal-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.elb-vou-modal-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(197,160,89,0.15);
  border: 1px solid rgba(197,160,89,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vou-gold);
  flex-shrink: 0;
}
.elb-vou-modal-title {
  margin: 0 0 2px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.02em;
}
.elb-vou-modal-sub {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.03em;
}
.elb-vou-close-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(255,255,255,0.7);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  flex-shrink: 0;
}
.elb-vou-close-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* ── Progress Stepper ───────────────────────────────────────────── */
.elb-vou-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 28px 14px;
  gap: 0;
  background: var(--vou-cream);
  border-bottom: 1px solid var(--vou-border);
  flex-shrink: 0;
}
.elb-vou-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 70px;
}
.elb-vou-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--vou-border);
  background: #fff;
  color: var(--vou-muted);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.elb-vou-step-item.active .elb-vou-step-dot {
  border-color: var(--vou-green);
  background: var(--vou-green);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(26,47,36,0.12);
}
.elb-vou-step-item.done .elb-vou-step-dot {
  border-color: var(--vou-gold);
  background: var(--vou-gold);
  color: #fff;
}
.elb-vou-step-lbl {
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--vou-muted);
  font-weight: 600;
}
.elb-vou-step-item.active .elb-vou-step-lbl { color: var(--vou-green); }
.elb-vou-step-item.done  .elb-vou-step-lbl { color: var(--vou-gold); }
.elb-vou-step-line {
  flex: 1;
  height: 2px;
  background: var(--vou-border);
  margin: 0 4px;
  margin-bottom: 20px;
  align-self: flex-start;
  margin-top: 13px;
  min-width: 40px;
  transition: background 0.3s ease;
}
.elb-vou-step-line.done { background: var(--vou-gold); }

/* ── Body ───────────────────────────────────────────────────────── */
.elb-vou-body {
  padding: 28px 28px 32px;
  flex: 1;
  overflow-y: auto;
}

/* ── Form Layout ────────────────────────────────────────────────── */
.elb-vou-form-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 680px) {
  .elb-vou-form-layout { grid-template-columns: 1fr; }
  .elb-vou-preview-col { order: -1; }
}

/* Form sections */
.elb-vou-fsec {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--vou-border);
}
.elb-vou-fsec:last-child { border-bottom: none; margin-bottom: 0; }
.elb-vou-fsec-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vou-gold);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.elb-vou-optional {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--vou-muted);
  letter-spacing: 0.05em;
  text-transform: none;
  background: #f0ede8;
  padding: 1px 6px;
  border-radius: 20px;
}

/* Preset buttons */
.elb-vou-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.elb-vou-preset {
  padding: 8px 18px;
  border-radius: 50px;
  border: 1.5px solid var(--vou-border);
  background: #fff;
  color: var(--vou-text);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: Georgia, serif;
}
.elb-vou-preset:hover {
  border-color: var(--vou-green);
  color: var(--vou-green);
  background: rgba(26,47,36,0.04);
}
.elb-vou-preset.active {
  border-color: var(--vou-green);
  background: var(--vou-green);
  color: #fff;
  box-shadow: 0 2px 8px rgba(26,47,36,0.25);
}

/* Custom amount */
.elb-vou-custom-wrap {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--vou-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
  transition: border-color 0.18s;
}
.elb-vou-custom-wrap:focus-within { border-color: var(--vou-green); }
.elb-vou-cur {
  padding: 0 10px 0 14px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--vou-muted);
  font-family: Georgia, serif;
}
.elb-vou-custom-inp {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 14px 12px 0;
  font-size: 1rem;
  font-family: Georgia, serif;
  color: var(--vou-text);
  background: transparent;
  -moz-appearance: textfield;
}
.elb-vou-custom-inp::-webkit-outer-spin-button,
.elb-vou-custom-inp::-webkit-inner-spin-button { -webkit-appearance: none; }
.elb-vou-custom-inp.err { color: #dc2626; }

/* Validity note */
.elb-vou-validity-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--vou-green);
  background: rgba(26,47,36,0.05);
  border-left: 3px solid var(--vou-gold);
  padding: 9px 12px;
  border-radius: 0 8px 8px 0;
  margin-top: 12px;
}
.elb-vou-validity-note svg { color: var(--vou-gold); flex-shrink: 0; }
.elb-vou-validity-date-inline { color: var(--vou-muted); }

/* Form fields */
.elb-vou-field { margin-bottom: 12px; }
.elb-vou-field:last-child { margin-bottom: 0; }
.elb-vou-flabel {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vou-muted);
  margin-bottom: 5px;
  letter-spacing: 0.02em;
}
.elb-vou-req { color: var(--vou-gold); }
.elb-vou-inp {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--vou-border);
  border-radius: 10px;
  font-size: 0.9rem;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--vou-text);
  background: #fff;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  box-sizing: border-box;
}
.elb-vou-inp:focus { border-color: var(--vou-green); box-shadow: 0 0 0 3px rgba(26,47,36,0.08); }
.elb-vou-inp.err  { border-color: #dc2626; }
.elb-vou-textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--vou-border);
  border-radius: 10px;
  font-size: 0.88rem;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--vou-text);
  background: #fff;
  outline: none;
  resize: vertical;
  transition: border-color 0.18s, box-shadow 0.18s;
  box-sizing: border-box;
  min-height: 80px;
}
.elb-vou-textarea:focus { border-color: var(--vou-green); box-shadow: 0 0 0 3px rgba(26,47,36,0.08); }

/* Hints */
.elb-vou-hint {
  font-size: 0.72rem;
  color: var(--vou-muted);
  margin: 4px 0 0;
}
.elb-vou-hint.err { color: #dc2626; }

/* Email info box */
.elb-vou-info-box {
  background: rgba(197,160,89,0.06);
  border: 1px solid rgba(197,160,89,0.25);
  border-radius: 10px;
  padding: 14px 16px;
}
.elb-vou-info-box-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--vou-green);
  margin-bottom: 9px;
  letter-spacing: 0.03em;
}
.elb-vou-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.elb-vou-info-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #444;
}
.elb-vou-info-list svg { color: var(--vou-gold); flex-shrink: 0; }

/* ── Preview Column ─────────────────────────────────────────────── */
.elb-vou-preview-col {
  position: sticky;
  top: 20px;
}
.elb-vou-preview-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vou-muted);
  margin-bottom: 12px;
  text-align: center;
}
.elb-vou-preview-hint {
  text-align: center;
  font-size: 0.7rem;
  color: var(--vou-muted);
  margin: 10px 0 0;
}

/* ── Voucher Card ───────────────────────────────────────────────── */
.elb-vou-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.12);
  aspect-ratio: 1.65 / 1;
  width: 100%;
}
.elb-vou-card-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1A2F24 0%, #243d2e 55%, #1e3628 100%);
}
.elb-vou-card-deco-a {
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197,160,89,0.18) 0%, transparent 70%);
}
.elb-vou-card-deco-b {
  position: absolute;
  bottom: -30px; left: -30px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197,160,89,0.1) 0%, transparent 70%);
}
.elb-vou-card-deco-c {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C5A059' fill-opacity='0.04'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.elb-vou-card-content {
  position: relative;
  z-index: 2;
  padding: 18px 20px 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.elb-vou-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.elb-vou-card-brand-name {
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.15em;
  line-height: 1;
}
.elb-vou-card-brand-sub {
  font-size: 0.55rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.elb-vou-card-type-badge {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--vou-gold);
  border: 1px solid rgba(197,160,89,0.4);
  border-radius: 4px;
  padding: 3px 7px;
  text-transform: uppercase;
}
.elb-vou-card-mid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.elb-vou-card-amount {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  font-family: Georgia, serif;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.elb-vou-card-for {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.elb-vou-card-for-lbl {
  font-size: 0.55rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.elb-vou-card-for-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  font-family: Georgia, serif;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.elb-vou-card-msg {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.5);
  font-style: italic;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.elb-vou-card-bot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 10px;
}
.elb-vou-card-from {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.4);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.elb-vou-card-validity-lbl {
  font-size: 0.5rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.elb-vou-card-validity-date {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--vou-gold);
  font-family: Georgia, serif;
}
/* ── Card logo ── */
.elb-vou-card-logo {
  height: 28px;
  width: auto;
  max-width: 120px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  display: block;
}
/* ── Card bottom: left column ── */
.elb-vou-card-bot-left {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* ── Card QR section ── */
.elb-vou-card-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.elb-vou-card-qr-img {
  width: 52px;
  height: 52px;
  border-radius: 5px;
  display: block;
  background: #F5F1EA;
}
.elb-vou-card-qr-code {
  font-size: 0.48rem;
  font-family: 'Courier New', Courier, monospace;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
}
/* ── Download button (success screen) ── */
.elb-vou-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 14px auto 0;
  padding: 9px 22px;
  background: transparent;
  border: 1.5px solid var(--vou-green);
  color: var(--vou-green);
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  transition: background 0.2s, color 0.2s;
  width: auto;
}
.elb-vou-download-btn:hover {
  background: var(--vou-green);
  color: #fff;
}
.elb-vou-download-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Form Footer / Submit ───────────────────────────────────────── */
.elb-vou-form-footer {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--vou-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.elb-vou-submit-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--vou-green);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 0.92rem;
  font-weight: 700;
  font-family: Georgia, "Times New Roman", serif;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  letter-spacing: 0.02em;
}
.elb-vou-submit-btn:not(:disabled):hover {
  background: #243d2e;
  box-shadow: 0 6px 20px rgba(26,47,36,0.3);
  transform: translateY(-1px);
}
.elb-vou-submit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.elb-vou-submit-btn svg { flex-shrink: 0; }
.elb-vou-submit-hint {
  font-size: 0.75rem;
  color: var(--vou-muted);
  margin: 0;
}

/* ── Payment Step ───────────────────────────────────────────────── */
.elb-vou-pay-wrap { max-width: 540px; margin: 0 auto; }
.elb-vou-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--vou-muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0 0 16px;
  transition: color 0.18s;
  font-family: Georgia, serif;
}
.elb-vou-back-btn:hover { color: var(--vou-green); }

.elb-vou-pay-summary {
  background: var(--vou-cream);
  border: 1.5px solid var(--vou-border);
  border-radius: var(--vou-radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.elb-vou-pay-summary-hd {
  background: var(--vou-green);
  color: var(--vou-gold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 16px;
}
.elb-vou-pay-summary-body { padding: 12px 16px 0; }
.elb-vou-pay-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--vou-border);
  font-size: 0.85rem;
}
.elb-vou-pay-row:last-child { border-bottom: none; }
.elb-vou-pay-row span { color: var(--vou-muted); }
.elb-vou-pay-row strong { color: var(--vou-text); font-weight: 600; }
.elb-vou-pay-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(26,47,36,0.04);
  border-top: 1.5px solid var(--vou-border);
  font-size: 1rem;
  font-weight: 700;
}
.elb-vou-pay-total strong {
  color: var(--vou-green);
  font-size: 1.1rem;
  font-family: Georgia, serif;
}

.elb-vou-stripe-outer {
  background: #fff;
  border: 1.5px solid var(--vou-border);
  border-radius: var(--vou-radius);
  padding: 20px;
  margin-bottom: 18px;
}
.elb-vou-stripe-hd {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vou-muted);
  margin-bottom: 16px;
}
.elb-vou-payment-el { min-height: 120px; }
.elb-vou-stripe-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--vou-muted);
  font-size: 0.85rem;
  padding: 16px 0;
}

/* Demo card form */
.elb-vou-demo-card { display: flex; flex-direction: column; gap: 14px; }
.elb-vou-demo-field { display: flex; flex-direction: column; gap: 5px; }
.elb-vou-demo-field label { font-size: 0.72rem; font-weight: 600; color: var(--vou-muted); }
.elb-vou-demo-inp {
  padding: 10px 12px;
  border: 1.5px solid var(--vou-border);
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: Georgia, serif;
  outline: none;
  transition: border-color 0.18s;
  width: 100%;
  box-sizing: border-box;
}
.elb-vou-demo-inp:focus { border-color: var(--vou-green); }
.elb-vou-demo-cards { display: flex; gap: 8px; margin-top: 4px; }

/* Pay button */
.elb-vou-pay-btn {
  width: 100%;
  padding: 15px;
  background: var(--vou-green);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  font-family: Georgia, "Times New Roman", serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}
.elb-vou-pay-btn:not(:disabled):hover {
  background: #243d2e;
  box-shadow: 0 8px 24px rgba(26,47,36,0.3);
  transform: translateY(-1px);
}
.elb-vou-pay-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.elb-vou-pay-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  margin-top: 12px;
}
.elb-vou-pay-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--vou-muted);
  text-align: center;
  justify-content: center;
  margin: 0;
}

/* Spinner */
.elb-vou-spin {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: elb-vou-spin 0.7s linear infinite;
  flex-shrink: 0;
}
.elb-vou-stripe-loading .elb-vou-spin {
  border: 2px solid var(--vou-border);
  border-top-color: var(--vou-green);
}
@keyframes elb-vou-spin { to { transform: rotate(360deg); } }

/* ── Success Screen ─────────────────────────────────────────────── */
.elb-vou-success { max-width: 520px; margin: 0 auto; text-align: center; }
.elb-vou-success-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(26,47,36,0.06);
  border: 2px solid rgba(197,160,89,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  color: var(--vou-green);
  animation: elb-vou-pop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes elb-vou-pop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.elb-vou-success-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--vou-green);
  font-family: Georgia, serif;
  margin: 0 0 8px;
}
.elb-vou-success-sub {
  font-size: 0.9rem;
  color: var(--vou-muted);
  margin: 0 0 24px;
  line-height: 1.6;
}
.elb-vou-success-card-wrap {
  max-width: 340px;
  margin: 0 auto 22px;
}
.elb-vou-success-details {
  background: var(--vou-cream);
  border: 1px solid var(--vou-border);
  border-radius: var(--vou-radius);
  overflow: hidden;
  margin-bottom: 18px;
  text-align: left;
}
.elb-vou-success-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--vou-border);
  font-size: 0.85rem;
  gap: 12px;
}
.elb-vou-success-row:last-child { border-bottom: none; }
.elb-vou-success-row span { color: var(--vou-muted); flex-shrink: 0; }
.elb-vou-success-row strong { color: var(--vou-text); font-weight: 600; text-align: right; }
.elb-vou-code {
  font-family: 'Courier New', Courier, monospace;
  background: rgba(26,47,36,0.06);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--vou-green) !important;
  letter-spacing: 0.05em;
}
.elb-vou-success-info {
  background: rgba(197,160,89,0.06);
  border: 1px solid rgba(197,160,89,0.25);
  border-radius: var(--vou-radius);
  padding: 16px;
  margin-bottom: 22px;
  text-align: left;
}
.elb-vou-success-info-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--vou-green);
  margin-bottom: 10px;
  letter-spacing: 0.03em;
}
.elb-vou-new-btn {
  padding: 12px 28px;
  background: transparent;
  color: var(--vou-green);
  border: 2px solid var(--vou-green);
  border-radius: 50px;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: Georgia, serif;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.elb-vou-new-btn:hover { background: var(--vou-green); color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   LANDING PAGE SECTION
   ══════════════════════════════════════════════════════════════════ */
.elb-vou-page-section {
  background: linear-gradient(135deg, #1E1409 0%, #2C1D0B 50%, #1A1107 100%);
  position: relative;
  overflow: hidden;
  padding: 80px 24px;
}
.elb-vou-page-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C5A059' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.elb-vou-page-section::after {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197,160,89,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.elb-vou-page-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 768px) {
  .elb-vou-page-inner { grid-template-columns: 1fr; gap: 40px; }
  .elb-vou-page-card-side { order: -1; max-width: 340px; margin: 0 auto; }
}

.elb-vou-page-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vou-gold);
  border: 1px solid rgba(197,160,89,0.35);
  padding: 5px 12px;
  border-radius: 50px;
  margin-bottom: 18px;
}
.elb-vou-page-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.1;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.elb-vou-page-desc {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.8;
  margin: 0 0 24px;
  max-width: 420px;
}
.elb-vou-page-features {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.elb-vou-page-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.87rem;
  color: rgba(255,255,255,0.75);
}
.elb-vou-page-features svg { color: var(--vou-gold); flex-shrink: 0; }
.elb-vou-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  background: var(--vou-gold);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: Georgia, "Times New Roman", serif;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 16px rgba(197,160,89,0.35);
}
.elb-vou-page-btn:hover {
  background: #d4b06a;
  box-shadow: 0 8px 28px rgba(197,160,89,0.45);
  transform: translateY(-2px);
}

/* Card on landing page section */
.elb-vou-page-card-side {
  position: relative;
}
.elb-vou-page-card-side .elb-vou-card {
  transform: rotate(-2deg);
  transition: transform 0.3s ease;
  box-shadow: 0 30px 70px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.2);
}
.elb-vou-page-card-side:hover .elb-vou-card { transform: rotate(0deg); }
.elb-vou-page-card-glow {
  position: absolute;
  inset: 20%;
  background: radial-gradient(circle, rgba(197,160,89,0.2) 0%, transparent 70%);
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
}

/* ── Nav/Footer Button ──────────────────────────────────────────── */
.elb-vou-nav-wrap { margin-top: 14px; }
.elb-vou-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: rgba(197,160,89,0.12);
  border: 1px solid rgba(197,160,89,0.3);
  border-radius: 50px;
  color: var(--vou-gold);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  font-family: Georgia, serif;
}
.elb-vou-nav-btn:hover { background: rgba(197,160,89,0.2); border-color: var(--vou-gold); }

/* ── Responsive modal ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .elb-vou-overlay { padding: 0; align-items: flex-end; }
  .elb-vou-modal {
    border-radius: 20px 20px 0 0;
    max-height: 96vh;
  }
  .elb-vou-modal-header { padding: 18px 20px 16px; border-radius: 20px 20px 0 0; }
  .elb-vou-body { padding: 20px 18px 28px; }
  .elb-vou-progress { padding: 14px 16px 10px; }
  .elb-vou-step-item { min-width: 54px; }
  .elb-vou-step-line { min-width: 20px; }
  .elb-vou-card { aspect-ratio: 1.5 / 1; }
  .elb-vou-page-section { padding: 60px 20px; }
}



/* ═══════════════════════════════════════════════════════════════
   TAGUNG BOOKING SYSTEM — Custom Components
   ═══════════════════════════════════════════════════════════════ */

/* ── Wider modal for packages step ───────────────────────────── */
.tg-booking-modal {
  max-width: 820px;
}

/* ── Step 0: Date & Info pills ───────────────────────────────── */
.tg-date-wrap {
  margin-bottom: 1.25rem;
}
.tg-date-wrap .elb-form-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}
.tg-date-input {
  padding-left: 1rem;
}
.tg-field-error {
  font-size: 0.76rem;
  color: #c0392b !important;
  margin-top: 0.3rem;
}
.tg-avail-box {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  border-radius: 0.9rem;
  margin-bottom: 1.25rem;
  animation: elbStepIn 0.35s ease both;
}
.tg-avail-box--ok {
  background: rgba(36, 122, 110, 0.1);
  border: 1.5px solid rgba(36, 122, 110, 0.25);
}
.tg-avail-box--err {
  background: rgba(192, 57, 43, 0.08);
  border: 1.5px solid rgba(192, 57, 43, 0.25);
}
.tg-avail-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tg-avail-icon--ok  { background: #247A6E; color: #fff; }
.tg-avail-icon--err { background: #c0392b; color: #fff; }
.tg-avail-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1A2F24 !important;
}
.tg-avail-meta {
  font-size: 0.78rem;
  color: rgba(26, 47, 36, 0.6) !important;
  margin-top: 0.15rem;
}
.tg-info-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.tg-info-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(197, 160, 89, 0.1);
  border: 1px solid rgba(197, 160, 89, 0.25);
  border-radius: 2rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1A2F24 !important;
}

/* ── Step 1: Participants ─────────────────────────────────────── */
.tg-parts-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 0 1rem;
}
.tg-parts-wrap .elb-counter {
  padding: 0.65rem 1.25rem;
}
.tg-parts-wrap .elb-counter-btn {
  width: 40px;
  height: 40px;
  font-size: 1.3rem;
}
.tg-parts-wrap .elb-counter-value {
  font-size: 1.6rem;
  min-width: 3rem;
}
.tg-parts-unit {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(26, 47, 36, 0.5) !important;
}
.tg-error-msg {
  font-size: 0.8rem;
  color: #c0392b !important;
  text-align: center;
  margin: 0.25rem 0 0.5rem;
}
.tg-cap-bar-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.tg-cap-bar {
  flex: 1;
  height: 6px;
  background: rgba(26, 47, 36, 0.1);
  border-radius: 3px;
  overflow: hidden;
}
.tg-cap-fill {
  height: 100%;
  background: linear-gradient(90deg, #247A6E, #C5A059);
  border-radius: 3px;
  transition: width 0.35s ease;
}
.tg-cap-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(26, 47, 36, 0.55) !important;
  white-space: nowrap;
}

/* ── Step 2: Rooms ────────────────────────────────────────────── */
.tg-yn-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.tg-yn-card {
  background: rgba(255, 255, 255, 0.55);
  border: 2px solid rgba(26, 47, 36, 0.1);
  border-radius: 1.1rem;
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
}
.tg-yn-card:hover {
  border-color: #C5A059;
  background: rgba(197, 160, 89, 0.06);
  transform: translateY(-2px);
}
.tg-yn-card.selected {
  border-color: #C5A059;
  background: rgba(197, 160, 89, 0.1);
  box-shadow: 0 4px 18px rgba(197, 160, 89, 0.2);
}
.tg-yn-icon {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}
.tg-yn-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1A2F24 !important;
}
.tg-rooms-box {
  background: rgba(255, 255, 255, 0.45);
  border: 1.5px solid rgba(26, 47, 36, 0.1);
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  animation: elbStepIn 0.3s ease both;
}
.tg-rooms-box-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1A2F24 !important;
  margin-bottom: 0.85rem;
}
.tg-room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(26, 47, 36, 0.07);
}
.tg-room-row:last-of-type {
  border-bottom: none;
}
.tg-room-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1A2F24 !important;
}
.tg-room-meta {
  font-size: 0.73rem;
  color: rgba(26, 47, 36, 0.55) !important;
  margin-top: 0.15rem;
}
.tg-room-counter {
  padding: 0.35rem 0.6rem;
}
.tg-breakfast-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0 0.25rem;
}
.tg-breakfast-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.tg-breakfast-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1A2F24 !important;
}
.tg-breakfast-price {
  font-size: 0.75rem;
  color: #C5A059 !important;
  font-weight: 600;
}

/* ── Step 3: Packages ─────────────────────────────────────────── */
.tg-pkg-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.tg-pkg-card {
  position: relative;
  background: rgba(255, 255, 255, 0.55);
  border: 2px solid rgba(26, 47, 36, 0.1);
  border-radius: 1.25rem;
  padding: 1.25rem 1rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}
.tg-pkg-card:hover {
  border-color: #C5A059;
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(197, 160, 89, 0.15);
}
.tg-pkg-card.selected {
  border-color: #C5A059;
  background: rgba(197, 160, 89, 0.08);
  box-shadow: 0 6px 24px rgba(197, 160, 89, 0.22);
}
.tg-pkg-card.featured {
  border-color: #C5A059;
}
.tg-pkg-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #C5A059, #A8863E);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.35rem 0.75rem;
  border-bottom-left-radius: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.tg-pkg-header {
  margin-bottom: 0.9rem;
}
.tg-pkg-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1A2F24 !important;
  margin-bottom: 0.25rem;
}
.tg-pkg-price {
  font-size: 1.3rem;
  font-weight: 800;
  color: #C5A059 !important;
}
.tg-pkg-price span {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(26, 47, 36, 0.5) !important;
}
.tg-pkg-features {
  list-style: none;
  padding: 0;
  margin: 0 0 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.tg-pkg-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.77rem;
  color: rgba(26, 47, 36, 0.75) !important;
}
.tg-pkg-features li svg {
  color: #247A6E;
  flex-shrink: 0;
  margin-top: 1px;
}
.tg-pkg-subtotal {
  font-size: 0.75rem;
  color: rgba(26, 47, 36, 0.55) !important;
  border-top: 1px solid rgba(26, 47, 36, 0.08);
  padding-top: 0.65rem;
  margin-top: 0.25rem;
}
.tg-pkg-subtotal strong {
  color: #1A2F24 !important;
  font-weight: 700;
}
.tg-pkg-cta {
  margin-top: 0.6rem;
  padding: 0.5rem;
  border-radius: 0.6rem;
  background: rgba(26, 47, 36, 0.06);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1A2F24 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tg-pkg-sel-badge {
  margin-top: 0.6rem;
  padding: 0.5rem;
  border-radius: 0.6rem;
  background: rgba(197, 160, 89, 0.18);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #C5A059 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

/* ── Step 4: Extras ───────────────────────────────────────────── */
.tg-extras-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.tg-extra-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px solid rgba(26, 47, 36, 0.1);
  border-radius: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tg-extra-item:hover {
  border-color: #C5A059;
  background: rgba(197, 160, 89, 0.06);
}
.tg-extra-item.selected {
  border-color: #C5A059;
  background: rgba(197, 160, 89, 0.1);
}
.tg-extra-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(26, 47, 36, 0.18);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.tg-extra-item.selected .tg-extra-check {
  background: #C5A059;
  border-color: #C5A059;
  color: #fff;
}
.tg-extra-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}
.tg-extra-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1A2F24 !important;
}
.tg-extra-price {
  font-size: 0.82rem;
  font-weight: 700;
  color: #C5A059 !important;
}
.tg-extras-hint {
  font-size: 0.75rem;
  color: rgba(26, 47, 36, 0.45) !important;
  text-align: center;
  margin-top: 0.75rem;
}

/* ── Live Price Widget ────────────────────────────────────────── */
.tg-price-widget {
  margin: 0 1.75rem 1.5rem;
  background: linear-gradient(135deg, #1A2F24 0%, #0c1718 100%);
  border-radius: 1.1rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(197, 160, 89, 0.25);
}
.tg-pw-header {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(197, 160, 89, 0.8) !important;
  margin-bottom: 0.65rem;
}
.tg-pw-rows {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.65rem;
}
.tg-pw-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: rgba(245, 230, 200, 0.7) !important;
}
.tg-pw-row span:last-child {
  font-weight: 600;
  color: #F5E6C8 !important;
}
.tg-pw-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: 800;
  border-top: 1px solid rgba(197, 160, 89, 0.2);
  padding-top: 0.6rem;
  color: #F5E6C8 !important;
}
.tg-pw-total span:last-child {
  color: #C5A059 !important;
  font-size: 1.2rem;
}

/* ── Step 6: Final Action Buttons ────────────────────────────── */
.tg-final-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1.5rem;
}
.tg-btn-confirm {
  width: 100%;
  padding: 0.9rem 1.5rem;
  background: linear-gradient(135deg, #1A2F24, #247A6E);
  color: #F5E6C8;
  border: none;
  border-radius: 0.9rem;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 18px rgba(26, 47, 36, 0.25);
  letter-spacing: 0.02em;
}
.tg-btn-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(26, 47, 36, 0.35);
}
.tg-btn-confirm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.tg-btn-request {
  width: 100%;
  padding: 0.85rem 1.5rem;
  background: transparent;
  color: #C5A059;
  border: 1.5px solid rgba(197, 160, 89, 0.4);
  border-radius: 0.9rem;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 0.02em;
}
.tg-btn-request:hover {
  background: rgba(197, 160, 89, 0.08);
  border-color: #C5A059;
  transform: translateY(-1px);
}
.tg-btn-request:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ── Success Screen ───────────────────────────────────────────── */
.tg-success {
  text-align: center;
  padding: 1rem 0.5rem 0.5rem;
}
.tg-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1A2F24, #247A6E);
  color: #F5E6C8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 1.5rem;
  box-shadow: 0 6px 24px rgba(26, 47, 36, 0.3);
}
.tg-success-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 3;
}
.tg-success-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #1A2F24 !important;
  margin-bottom: 0.5rem;
}
.tg-success-sub {
  font-size: 0.88rem;
  color: rgba(26, 47, 36, 0.65) !important;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.tg-success-ref {
  display: inline-block;
  background: rgba(197, 160, 89, 0.12);
  border: 1px solid rgba(197, 160, 89, 0.3);
  border-radius: 0.6rem;
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  color: #1A2F24 !important;
  margin-bottom: 1.25rem;
}
.tg-success-ref strong {
  color: #C5A059 !important;
  font-family: monospace;
  letter-spacing: 0.08em;
}
.tg-success-details {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(26, 47, 36, 0.08);
  border-radius: 0.9rem;
  padding: 1rem 1.25rem;
  text-align: left;
  margin-bottom: 1.5rem;
}
.tg-success-close {
  width: 100%;
  max-width: 280px;
}

/* ── CTA Banner (page-level) ──────────────────────────────────── */
.tg-cta-banner {
  position: relative;
  z-index: 50;
  background: linear-gradient(135deg, #1A2F24 0%, #0c1718 100%);
  border-bottom: 1px solid rgba(197, 160, 89, 0.25);
  padding: 0.75rem 1.5rem;
}
.tg-cta-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.tg-cta-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.tg-cta-text strong {
  font-size: 0.95rem;
  color: #F5E6C8;
  font-family: 'Playfair Display', Georgia, serif;
}
.tg-cta-text span {
  font-size: 0.75rem;
  color: rgba(245, 230, 200, 0.55);
}
.tg-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #C5A059, #A8863E);
  color: #fff;
  border: none;
  border-radius: 0.75rem;
  padding: 0.65rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
  box-shadow: 0 3px 14px rgba(197, 160, 89, 0.3);
  letter-spacing: 0.02em;
}
.tg-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(197, 160, 89, 0.4);
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .tg-pkg-cards {
    grid-template-columns: 1fr;
  }
  .tg-yn-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .tg-price-widget {
    margin: 0 1rem 1.25rem;
  }
  .tg-cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .tg-cta-btn {
    width: 100%;
    justify-content: center;
  }
  .tg-booking-modal {
    max-width: 100%;
  }
}
@media (max-width: 420px) {
  .tg-yn-wrap {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SPEISEKARTE — Modal Overlay
   ═══════════════════════════════════════════════════════════════ */

/* ── Modal overlay ───────────────────────────────────────────── */
.sk-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(8, 18, 12, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
  overflow-y: auto;
}
.sk-modal-overlay.sk-modal-open {
  opacity: 1;
  visibility: visible;
}

/* ── Modal panel ─────────────────────────────────────────────── */
.sk-modal-panel {
  width: 100%;
  max-width: 860px;
  background: linear-gradient(160deg, #14271a 0%, #0f1e14 100%);
  border: 1px solid rgba(197, 160, 89, 0.2);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(197, 160, 89, 0.08);
  transform: translateY(24px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin: auto;
}
.sk-modal-overlay.sk-modal-open .sk-modal-panel {
  transform: translateY(0);
}

/* ── Modal header ────────────────────────────────────────────── */
.sk-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem 1.25rem;
  border-bottom: 1px solid rgba(197, 160, 89, 0.12);
  background: linear-gradient(135deg, #1A2F24 0%, #162a1e 100%);
}
.sk-modal-header-left {}
.sk-modal-eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C5A059;
  margin-bottom: 0.3rem;
}
.sk-modal-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #F5E6C8;
  margin: 0;
  line-height: 1.1;
}
.sk-modal-close {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid rgba(245, 230, 200, 0.15);
  background: rgba(245, 230, 200, 0.06);
  color: rgba(245, 230, 200, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}
.sk-modal-close:hover {
  background: rgba(197, 160, 89, 0.15);
  color: #C5A059;
  border-color: rgba(197, 160, 89, 0.35);
}

/* ── Tab bar (sticky inside modal) ──────────────────────────── */
.sk-modal-tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 1rem 2rem;
  background: rgba(14, 24, 18, 0.97);
  border-bottom: 1px solid rgba(197, 160, 89, 0.1);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
}
.sk-tabs {
  display: inline-flex;
  gap: 0.4rem;
  padding: 0.28rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(197, 160, 89, 0.15);
  border-radius: 3rem;
}
.sk-tab {
  padding: 0.6rem 1.6rem;
  border-radius: 2.5rem;
  border: none;
  background: transparent;
  color: rgba(245, 230, 200, 0.5);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.sk-tab:hover {
  color: #F5E6C8;
  background: rgba(197, 160, 89, 0.08);
}
.sk-tab.sk-active {
  background: #C5A059;
  color: #1A2F24;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(197, 160, 89, 0.35);
}

/* ── Scrollable body ─────────────────────────────────────────── */
.sk-modal-body {
  padding: 2rem 2rem 1rem;
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(197, 160, 89, 0.25) transparent;
}
.sk-modal-body::-webkit-scrollbar { width: 5px; }
.sk-modal-body::-webkit-scrollbar-thumb { background: rgba(197, 160, 89, 0.25); border-radius: 3px; }
.sk-modal-body::-webkit-scrollbar-track { background: transparent; }

/* ── Intro line ──────────────────────────────────────────────── */
.sk-intro {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(197, 160, 89, 0.6);
  margin: 0 0 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(197, 160, 89, 0.1);
}

/* ── Section headers ─────────────────────────────────────────── */
.sk-section {
  margin-bottom: 2.5rem;
}
.sk-section-hd {
  text-align: center;
  margin-bottom: 1.5rem;
}
.sk-section-hd::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #C5A059, transparent);
  margin: 0.6rem auto 0;
  border-radius: 2px;
}
.sk-section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #F5E6C8;
  margin: 0;
  line-height: 1.2;
}
.sk-section-sub {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(197, 160, 89, 0.5);
  margin: 0.35rem 0 0;
}

/* ── 2-col grid ──────────────────────────────────────────────── */
.sk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(197, 160, 89, 0.07);
  border: 1px solid rgba(197, 160, 89, 0.1);
  border-radius: 0.875rem;
  overflow: hidden;
}
@media (max-width: 640px) {
  .sk-grid { grid-template-columns: 1fr; }
}

/* ── Menu item ───────────────────────────────────────────────── */
.sk-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: rgba(10, 22, 15, 0.6);
  transition: background 0.16s ease;
}
.sk-item:hover {
  background: rgba(197, 160, 89, 0.07);
}
.sk-item-chef {
  background: rgba(197, 160, 89, 0.07);
  border-left: 2px solid rgba(197, 160, 89, 0.55);
}
.sk-item-chef:hover {
  background: rgba(197, 160, 89, 0.12);
}
.sk-item-body { flex: 1; min-width: 0; }
.sk-item-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #F5E6C8;
  line-height: 1.35;
  margin-bottom: 0.2rem;
}
.sk-item-desc {
  font-size: 0.76rem;
  color: rgba(245, 230, 200, 0.45);
  line-height: 1.5;
}

/* ── Tags ────────────────────────────────────────────────────── */
.sk-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.sk-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem;
  border-radius: 2rem;
  line-height: 1.5;
}
.sk-chef  { background: rgba(197,160,89,0.18); color:#C5A059; border:1px solid rgba(197,160,89,0.3); }
.sk-vegan { background: rgba(72,187,120,0.14); color:#68d391; border:1px solid rgba(72,187,120,0.25); }
.sk-veg   { background: rgba(72,187,120,0.1);  color:#9ae6b4; border:1px solid rgba(72,187,120,0.2); }
.sk-spicy { background: rgba(252,129,74,0.14); color:#fc8181; border:1px solid rgba(252,129,74,0.25); }
.sk-opt   { background: rgba(99,179,237,0.12); color:#90cdf4; border:1px solid rgba(99,179,237,0.22); }
.sk-gf    { background: rgba(237,211,99,0.12); color:#f6e05e; border:1px solid rgba(237,211,99,0.22); }

/* ── Price ───────────────────────────────────────────────────── */
.sk-item-price {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: #C5A059;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 0.05rem;
}

/* ── Footer ──────────────────────────────────────────────────── */
.sk-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1rem 0.5rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(197, 160, 89, 0.1);
  text-align: center;
}
.sk-footnote {
  font-size: 0.72rem;
  color: rgba(245, 230, 200, 0.28);
  letter-spacing: 0.04em;
  margin: 0;
}
.sk-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.6rem;
  font-size: 0.7rem;
  color: rgba(245, 230, 200, 0.35);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sk-legend-sep { color: rgba(197, 160, 89, 0.2); }
.sk-reserve-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2.25rem;
  background: linear-gradient(135deg, #C5A059, #A8863E);
  color: #1A2F24;
  border: none;
  border-radius: 3rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(197, 160, 89, 0.28);
  margin-bottom: 0.5rem;
}
.sk-reserve-btn:hover {
  background: linear-gradient(135deg, #d4b46a, #C5A059);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(197, 160, 89, 0.38);
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .sk-modal-overlay { padding: 0; align-items: flex-end; }
  .sk-modal-panel { border-radius: 1.25rem 1.25rem 0 0; max-width: 100%; }
  .sk-modal-header { padding: 1.25rem 1.25rem 1rem; }
  .sk-modal-title { font-size: 1.4rem; }
  .sk-modal-tabs { padding: 0.75rem 1rem; }
  .sk-tab { padding: 0.55rem 1.1rem; font-size: 0.72rem; }
  .sk-modal-body { padding: 1.25rem 1rem 1rem; max-height: 65vh; }
  .sk-section-title { font-size: 1.25rem; }
  .sk-item { padding: 0.9rem 0.9rem; }
}



/* ═══════════════════════════════════════════════════════════════════
   MOBILE-FIRST OPTIMIZATION — Das ELB Hotel
   Comprehensive polish for screens ≤ 768px.
   All rules are additive — desktop layout is untouched.
═══════════════════════════════════════════════════════════════════════ */

/* ─── M1. GLOBAL MOBILE BASE ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* Prevent any rogue horizontal overflow */
  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  /* Box-sizing safety net */
  *, *::before, *::after {
    box-sizing: border-box;
  }

  /* Consistent horizontal page padding for all sections */
  .section-pattern-1,
  .section-pattern-2,
  .section-pattern-3 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* All images must never break out */
  img, video, iframe, svg {
    max-width: 100%;
  }
}

/* ─── M2. INPUTS — PREVENT iOS ZOOM + FULL WIDTH ─────────────────── */
/* iOS zooms in when font-size < 16px on focused input */
@media (max-width: 768px) {
  input,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0.75rem 1rem !important;
    border-radius: 10px !important;
    -webkit-appearance: none;
    appearance: none;
  }

  textarea {
    min-height: 100px !important;
    resize: vertical;
  }

  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A2F24' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem !important;
  }

  /* Labels: give breathing room */
  label {
    display: block !important;
    margin-bottom: 0.35rem !important;
    font-size: 0.78rem !important;
  }

  /* Form groups: space between fields */
  .elb-form-group,
  [class*="form-group"],
  [class*="field-group"] {
    margin-bottom: 1rem !important;
  }

  /* Collapse all 2-column form grids */
  .elb-form-grid,
  [class*="grid-cols-2"].elb-form-grid,
  .elb-form-grid.grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }
}

/* ─── M3. BUTTONS — FULL WIDTH CTA + BIGGER TARGETS ─────────────── */
@media (max-width: 640px) {

  /* Primary action buttons: full width + easy thumb tap */
  .elb-btn-next,
  .elb-btn-submit,
  .elb-pay-submit-btn,
  .tg-cta-btn,
  .elb-vou-page-btn,
  .sk-reserve-btn,
  button[class*="w-full"],
  a[class*="w-full"] {
    width: 100% !important;
    justify-content: center !important;
    min-height: 52px !important;
    font-size: 0.95rem !important;
  }

  /* Back buttons: full width on mobile too */
  .elb-btn-back {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
  }

  /* Action rows: stack vertically, full width */
  .elb-booking-footer .flex,
  .elb-pay-actions {
    flex-direction: column-reverse !important;
    gap: 0.65rem !important;
    width: 100%;
  }
}

/* ─── M4. NAVIGATION ─────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Hamburger & nav icon: bigger tap zone */
  nav button[aria-label],
  nav [data-interactive][aria-label],
  header button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Desktop-only nav links MUST stay hidden on mobile — guard against
     any display override that could beat Tailwind's display:none */
  nav a.hidden,
  header a.hidden {
    display: none !important;
  }

  /* Mobile slide-out menu links: big, finger-friendly.
     Only target links inside the mobile menu panel (data-mobile-menu
     or a truly fixed/absolute overlay deeper than the nav bar itself). */
  nav [data-mobile-menu] a,
  nav [id*="mobile-menu"] a,
  nav [id*="mobileMenu"] a {
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 1rem !important;
  }

  /* Mobile booking CTA in nav: keep compact on mobile */
  nav a[href="#rooms-view"].btn-shimmer,
  nav a[href="/#rooms-view"].btn-shimmer {
    padding: 0.65rem 1.25rem !important;
    min-width: 0 !important;
  }
}

/* ─── M5. HERO SECTION ───────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Full viewport height, use svh for mobile browser chrome */
  #hero {
    min-height: 100svh !important;
    min-height: 100vh !important; /* fallback */
  }

  /* Disable expensive Ken Burns on mobile */
  #hero video,
  #hero > .absolute:first-child img,
  #hero > div:first-child video {
    animation: none !important;
    transform: none !important;
  }

  /* Hero title: tighter on mobile */
  .hero-title {
    font-size: clamp(2.6rem, 10vw, 3.8rem) !important;
    line-height: 1.0 !important;
    letter-spacing: -0.03em !important;
  }

  /* Hero subtitle */
  #hero p {
    font-size: 0.9rem !important;
    letter-spacing: 0.02em !important;
    line-height: 1.6 !important;
  }

  /* Hero CTA buttons: full width, stacked */
  #hero [class*="flex"][class*="gap-"] a,
  #hero [class*="flex"][class*="gap-"] button {
    width: 100% !important;
    justify-content: center !important;
    min-height: 52px !important;
  }

  /* Hero content container: more breathing room from bottom */
  #hero [class*="absolute"][class*="bottom-"] {
    padding-bottom: max(2rem, env(safe-area-inset-bottom, 1rem)) !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* ─── M6. ROOMS SECTION ──────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Room cards: reasonable full-width height */
  #rooms-view [data-room-card] {
    min-height: clamp(360px, 90vw, 440px) !important;
  }

  #rooms-view [data-room-card][data-room-state="expanded"] {
    min-height: clamp(480px, 120vw, 580px) !important;
  }

  /* Room panel: more readable padding */
  #rooms-view [data-room-panel],
  #rooms-view [data-room-card] .absolute.inset-0.flex.flex-col,
  #rooms-view [data-room-card] .relative.z-10.flex.flex-col {
    padding: 16px 16px 14px !important;
    max-height: 62% !important;
  }

  /* Room title on mobile: slightly smaller */
  #rooms-view [data-room-title],
  #rooms-view [data-room-card] .card-title,
  #rooms-view [data-room-card] h3 {
    font-size: clamp(1.25rem, 5vw, 1.6rem) !important;
  }

  /* Book button: full width */
  #rooms-view [data-room-card] a[class*="w-full"],
  #rooms-view [data-room-card] button[class*="w-full"],
  #rooms-view [data-room-card] [data-room-cta="1"] {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    min-height: 48px !important;
  }

  /* Grid: single column */
  #rooms-view > .max-w-7xl > div[class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Amenity list: single column on mobile */
  #rooms-view [data-room-card] ul {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  /* Remove hover scale — use active state instead */
  #rooms-view [data-room-card]:hover {
    transform: none !important;
  }
  #rooms-view [data-room-card]:active {
    transform: scale(0.99) !important;
  }
}

/* ─── M7. ABOUT / ÜBER UNS SECTION ──────────────────────────────── */
@media (max-width: 768px) {

  /* Stack to single column */
  .section-pattern-2 [class*="grid-cols-1"][class*="gap-"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* About text: remove left accent line (overlaps on mobile) */
  [data-about-text]::before {
    display: none !important;
  }

  /* About image: consistent height */
  [data-about-image-wrapper] {
    min-height: 240px !important;
    height: 240px !important;
    border-radius: 14px !important;
  }

  /* Stat items: allow 2 per row */
  [data-about-text] [class*="flex"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  [data-stat-item] {
    flex: 1 1 calc(50% - 10px) !important;
    min-width: 100px !important;
    padding: 14px 10px !important;
  }

  /* Section padding tighter */
  .section-pattern-2 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

/* ─── M8. RESTAURANT SECTION ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* Restaurant recommendation card: stack vertically */
  #restaurant-view [class*="rounded-3xl"][class*="overflow-hidden"] [class*="grid"] {
    grid-template-columns: 1fr !important;
  }

  /* Menu tab bar: scrollable, don't wrap */
  #restaurant-view [class*="flex"][class*="overflow-x-auto"],
  #restaurant-view .horizontal-scroll-container {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }

  /* Restaurant menu items: ensure name+price don't overlap */
  #restaurant-view [class*="menu-item"],
  #restaurant-view [class*="dish-item"] {
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
  }
}

/* ─── M9. GALLERY / GALERIE SECTION ─────────────────────────────── */
@media (max-width: 767px) {

  /* Always show slideshow arrows on mobile (no hover needed) */
  #galerie-slideshow .galerie-arrow {
    opacity: 0.85 !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 1rem !important;
  }

  /* Slideshow: better aspect ratio on portrait mobile */
  #galerie-slideshow {
    aspect-ratio: 4 / 3 !important;
    border-radius: 12px !important;
  }

  /* Dots: easier to tap */
  #galerie-dots .galerie-dot {
    width: 12px !important;
    height: 12px !important;
    cursor: pointer;
  }
}

/* ─── M10. EVENTS SECTION ────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Stack event cards */
  #events [class*="grid-cols-"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* No hover lift on touch */
  [class*="event-card"]:hover,
  [class*="event_card"]:hover {
    transform: none !important;
  }
}

/* ─── M11. TAGUNGEN SECTION ──────────────────────────────────────── */
@media (max-width: 768px) {

  /* Package cards: single column */
  [data-tagungen-content] > [class*="grid-cols-2"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Tagungen cards: reduce padding */
  [data-tagungen-package] {
    padding: 0 !important;
  }

  /* Section horizontal padding */
  #tagungen .max-w-7xl,
  #tagungen > div {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* ─── M12. FAQ SECTION ───────────────────────────────────────────── */
@media (max-width: 640px) {

  /* FAQ items: bigger tap target */
  #faq button,
  #faq [role="button"] {
    min-height: 56px !important;
    padding: 1rem 1.25rem !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* FAQ answer text: readable */
  #faq [class*="text-sm"],
  #faq p {
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
  }
}

/* ─── M13. CONTACT SECTION ───────────────────────────────────────── */
@media (max-width: 768px) {

  /* Contact form: full width inputs */
  #kontakt input,
  #kontakt textarea,
  #kontakt select {
    width: 100% !important;
    font-size: 16px !important;
  }

  /* Contact form: collapse 2-col grids */
  #kontakt [class*="grid-cols-2"] {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  /* Contact details: center on mobile */
  #kontakt [class*="flex"][class*="gap-"] {
    flex-wrap: wrap !important;
  }

  /* Map iframe: proper height */
  #kontakt iframe {
    height: 220px !important;
    width: 100% !important;
  }
}

/* ─── M14. JOBS / KARRIERE SECTION ───────────────────────────────── */
@media (max-width: 768px) {

  /* Jobs hero: tighter */
  .js-hero { min-height: 80vw !important; }
  .js-hero-content { padding: 48px 20px 40px !important; }

  /* Stats bar: wrap on very small screens */
  .js-hero-stats {
    flex-wrap: wrap !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
    gap: 8px 0 !important;
  }

  /* Each stat smaller */
  .js-stat { padding: 0 12px !important; }
  .js-stat-num { font-size: 1.25rem !important; }
  .js-stat-label { font-size: 0.62rem !important; }

  /* Job cards: single column */
  .js-cards-grid {
    grid-template-columns: 1fr !important;
    padding: 28px 16px 48px !important;
    gap: 16px !important;
  }
  .js-card { min-height: 260px !important; }
  .js-card-body { padding: 24px 22px !important; }
  .js-card-title { font-size: 1.25rem !important; }

  /* No hover lift on touch */
  .js-card:hover,
  .js-card:focus {
    transform: none !important;
  }
  .js-card:active {
    transform: scale(0.99) !important;
  }

  /* Why strip: wrap items */
  .js-why { padding: 24px 16px !important; }
  .js-why-inner { flex-wrap: wrap !important; gap: 14px !important; }
  .js-why-item { padding: 0 8px !important; flex: 1 1 140px !important; }
  .js-why-sep { display: none !important; }

  /* Label row */
  .js-label-row { padding: 36px 16px 0 !important; }

  /* Contact panel */
  .js-contact { padding: 32px 16px 48px !important; }
  .js-contact-inner {
    flex-direction: column !important;
    text-align: center !important;
    padding: 28px 20px !important;
    gap: 20px !important;
  }
  .js-contact-divider { width: 60px !important; height: 1px !important; }
  .js-contact-email { font-size: 1.1rem !important; }
}

/* ─── M15. OWNER / INHABER SECTION ───────────────────────────────── */
@media (max-width: 640px) {
  .ow-main-grid {
    padding: 28px 16px 48px !important;
    gap: 28px !important;
  }
  .ow-portrait-frame {
    max-width: min(240px, 72vw) !important;
  }
  .ow-content-col h2 {
    font-size: clamp(1.75rem, 9vw, 2.4rem) !important;
  }
  .ow-content-col > div:last-child {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .ow-content-col > div:last-child a,
  .ow-content-col > div:last-child button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ─── M16. BOOKING MODAL (multi-step) ────────────────────────────── */
@media (max-width: 640px) {

  /* Full-screen bottom sheet */
  .elb-booking-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .elb-booking-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100svh !important;
    height: 100vh !important; /* fallback */
    max-height: 100svh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    transform: translateY(100%) !important;
  }
  .elb-booking-overlay.active .elb-booking-modal {
    transform: translateY(0) !important;
  }

  /* Header: tighter */
  .elb-booking-header {
    padding: 1rem 1.25rem !important;
  }
  .elb-booking-header h2 {
    font-size: 1.2rem !important;
  }

  /* Progress bar: hide labels, show dots only */
  .elb-booking-progress {
    padding: 0.75rem 1rem !important;
    gap: 0 !important;
  }
  .elb-progress-label {
    display: none !important;
  }
  .elb-progress-dot {
    width: 24px !important;
    height: 24px !important;
  }
  .elb-progress-line {
    width: 20px !important;
    margin: 0 0.2rem !important;
  }

  /* Step content: comfortable padding */
  .elb-step-content {
    padding: 1.25rem 1rem !important;
  }

  /* All inputs in booking: 16px, full width */
  .elb-booking-modal input,
  .elb-booking-modal select,
  .elb-booking-modal textarea {
    font-size: 16px !important;
    width: 100% !important;
    min-height: 48px !important;
  }

  /* Form grid: always 1 column */
  .elb-form-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Room selection card: stack */
  .elb-room-card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  .elb-room-card-img {
    width: 100% !important;
    height: 150px !important;
    border-radius: 10px 10px 0 0 !important;
  }

  /* Guest card: single column fields */
  .elb-guest-card-fields {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }

  /* Guest action icons: bigger touch area */
  .elb-guest-card [class*="icon-btn"],
  .elb-guest-card button[aria-label] {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* Booking type cards: single column */
  .elb-type-cards {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Sticky footer navigation */
  .elb-booking-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 20 !important;
    background: #F5E6C8 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1) !important;
    padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Slim guest card: stack on small screens */
  .elb-guest-card--slim .elb-guest-card-fields {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
  }
  .elb-guest-card--slim .elb-g-room-group {
    flex: unset !important;
    width: 100% !important;
  }
}

/* ─── M17. PAYMENT STEP ──────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Summary: tighter */
  .elb-pay-summary {
    padding: 0.85rem 1rem !important;
  }
  .elb-pay-summary-row {
    font-size: 0.82rem !important;
  }
  .elb-pay-summary-total {
    font-size: 0.95rem !important;
  }

  /* Payment options: full width */
  .elb-pay-option {
    padding: 0.85rem 1rem !important;
  }

  /* Stripe element: ensure it's never clipped */
  .elb-stripe-element,
  .elb-pay-form-area,
  #payment-element,
  [id*="stripe"] {
    width: 100% !important;
    overflow: visible !important;
  }
  .elb-pay-form-inner {
    padding: 1rem !important;
  }

  /* Pay actions: full width, stacked */
  .elb-pay-actions {
    flex-direction: column-reverse !important;
    gap: 0.65rem !important;
  }
  .elb-pay-actions .elb-btn-back,
  .elb-pay-actions .elb-btn-next,
  .elb-pay-submit-btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 52px !important;
  }

  /* Trust badges: wrap */
  .elb-pay-trust {
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
    justify-content: center !important;
  }
}

/* ─── M18. VOUCHER MODAL ─────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Bottom sheet pattern */
  .elb-vou-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .elb-vou-modal {
    border-radius: 20px 20px 0 0 !important;
    max-height: 96svh !important;
    max-height: 96vh !important;
    width: 100% !important;
  }

  /* Header: compact */
  .elb-vou-modal-header {
    padding: 16px 18px 14px !important;
    border-radius: 20px 20px 0 0 !important;
  }
  .elb-vou-modal-title { font-size: 1.05rem !important; }
  .elb-vou-modal-icon { width: 40px !important; height: 40px !important; }

  /* Body: comfortable padding */
  .elb-vou-body { padding: 18px 16px 28px !important; }

  /* Progress stepper: compact */
  .elb-vou-progress { padding: 12px 14px 8px !important; }
  .elb-vou-step-item { min-width: 50px !important; }
  .elb-vou-step-lbl { font-size: 0.6rem !important; }
  .elb-vou-step-line { min-width: 16px !important; }

  /* Voucher inputs: full width */
  .elb-vou-body input,
  .elb-vou-body select,
  .elb-vou-body textarea {
    font-size: 16px !important;
    width: 100% !important;
    min-height: 48px !important;
  }

  /* Voucher card preview: full width */
  .elb-vou-card { aspect-ratio: 1.6 / 1 !important; }

  /* Landing page voucher section */
  .elb-vou-page-section { padding: 56px 20px !important; }
  .elb-vou-page-inner {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .elb-vou-page-card-side {
    order: -1 !important;
    max-width: 300px !important;
    margin: 0 auto !important;
  }
  .elb-vou-page-btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 52px !important;
  }
  .elb-vou-page-card-side .elb-vou-card {
    transform: none !important;
  }
}

/* ─── M19. TAGUNG BOOKING MODAL ──────────────────────────────────── */
@media (max-width: 640px) {

  /* Tagung booking modal: full screen */
  .tg-booking-modal {
    max-width: 100% !important;
    width: 100vw !important;
    max-height: 100svh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  /* Date fields: full width */
  .tg-date-wrap input,
  .tg-date-input {
    font-size: 16px !important;
    min-height: 48px !important;
  }

  /* Package cards: single column */
  .tg-pkg-cards {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Yes/No grid */
  .tg-yn-wrap {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Price widget: edge-to-edge */
  .tg-price-widget {
    margin: 0 0 1.25rem !important;
    border-radius: 12px !important;
  }

  /* CTA banner: stack */
  .tg-cta-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  .tg-cta-btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 52px !important;
  }

  /* Tagungen inputs */
  .tg-booking-modal input,
  .tg-booking-modal select,
  .tg-booking-modal textarea {
    font-size: 16px !important;
    min-height: 48px !important;
    width: 100% !important;
  }
}

/* ─── M20. SPEISEKARTE MODAL ─────────────────────────────────────── */
@media (max-width: 640px) {

  /* Bottom sheet */
  .sk-modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .sk-modal-panel {
    border-radius: 1.25rem 1.25rem 0 0 !important;
    max-width: 100% !important;
    max-height: 96svh !important;
    max-height: 96vh !important;
  }

  /* Header: compact */
  .sk-modal-header { padding: 1.1rem 1.1rem 1rem !important; }
  .sk-modal-title { font-size: 1.35rem !important; }

  /* Tabs: scrollable */
  .sk-modal-tabs { padding: 0.65rem 0.85rem !important; overflow-x: auto; }
  .sk-tabs { flex-wrap: nowrap !important; }
  .sk-tab { padding: 0.5rem 0.95rem !important; font-size: 0.7rem !important; white-space: nowrap; }

  /* Body */
  .sk-modal-body {
    padding: 1.1rem 0.85rem 1rem !important;
    max-height: 68vh !important;
  }

  /* Menu grid: single column */
  .sk-grid { grid-template-columns: 1fr !important; }

  /* Menu item: bigger touch area */
  .sk-item { padding: 0.85rem 0.85rem !important; min-height: 52px; }
  .sk-item-name { font-size: 0.9rem !important; }

  /* Reserve button: full width */
  .sk-reserve-btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 52px !important;
    padding: 0.85rem 1.5rem !important;
  }
}

/* ─── M21. FOOTER ────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Footer: single column, centered */
  .elb-footer-grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 2rem !important;
  }
  .elb-footer-inner { padding: 2.5rem 1.25rem 0 !important; }
  .elb-footer-stars,
  .elb-footer-icons { justify-content: center !important; }
  .elb-footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.75rem !important;
    padding: 1.25rem !important;
  }
  .elb-footer-legal { justify-content: center !important; flex-wrap: wrap !important; }
  .elb-footer-watermark { font-size: 5rem !important; }
  .elb-footer-contact .elb-footer-map { justify-content: center !important; }
}

/* ─── M22. FLOATING ACTION BUTTON (FAB) ──────────────────────────── */
@media (max-width: 640px) {

  /* Move FAB above mobile browser nav bar */
  .elb-back-to-top {
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
    right: 1rem !important;
    width: 48px !important;
    height: 48px !important;
  }

  /* Booking FAB: reposition */
  button.bg-green-600,
  button[class*="bg-green-600"] {
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
    right: 1rem !important;
  }
}

/* ─── M23. GALERIE / EVENTS SECTION SPACING ──────────────────────── */
@media (max-width: 640px) {

  /* Reduce giant section padding on very small screens */
  .section-pattern-1,
  .section-pattern-2,
  .section-pattern-3 {
    padding-top: clamp(2.5rem, 8vw, 4rem) !important;
    padding-bottom: clamp(2.5rem, 8vw, 4rem) !important;
  }
}

/* ─── M24. TYPOGRAPHY — READABLE ON SMALL SCREENS ───────────────── */
@media (max-width: 480px) {

  h1 {
    font-size: clamp(1.85rem, 9vw, 2.5rem) !important;
    line-height: 1.08 !important;
    word-break: break-word;
  }
  h2 {
    font-size: clamp(1.5rem, 7.5vw, 2rem) !important;
    line-height: 1.12 !important;
  }
  h3 {
    font-size: clamp(1.1rem, 5vw, 1.4rem) !important;
    line-height: 1.25 !important;
  }

  p, li {
    font-size: 0.93rem !important;
    line-height: 1.72 !important;
  }
}

/* ─── M25. HORIZONTAL SCROLL PREVENTION ──────────────────────────── */
@media (max-width: 768px) {

  /* Any section that might overflow horizontally */
  section,
  .section-pattern-1,
  .section-pattern-2,
  .section-pattern-3 {
    overflow-x: hidden !important;
  }

  /* Prevent decorative blobs from causing scroll */
  .js-hero::before,
  .js-hero::after,
  .section-pattern-2::after {
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Wide tables or lists: allow horizontal scroll inside container */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Long text: break gracefully */
  h1, h2, h3, h4, p, li, a {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* ─── M26. SAFE AREA INSETS (iPhone notch/island) ────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 640px) {

    /* Booking modal: respect home indicator */
    .elb-booking-footer {
      padding-bottom: calc(0.85rem + env(safe-area-inset-bottom)) !important;
    }

    /* Voucher/Speisekarte bottom sheet */
    .elb-vou-modal,
    .sk-modal-panel {
      padding-bottom: env(safe-area-inset-bottom) !important;
    }

    /* Hero: content above thumb zone */
    #hero [class*="absolute"][class*="bottom-"] {
      padding-bottom: calc(2rem + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ─── M27. SMOOTH SCROLLING — TOUCH ──────────────────────────────── */
@media (pointer: coarse) {

  /* Native scroll only on mobile; disable Lenis */
  html.lenis, html.lenis body {
    height: auto !important;
    overflow: auto !important;
  }
  body {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Reduce animations for smoother rendering */
  .section-pattern-1,
  .section-pattern-2,
  .section-pattern-3 {
    animation: none !important;
  }

  /* Disable costly will-change on touch devices */
  .js-card,
  [data-room-card],
  [data-card] {
    will-change: auto !important;
  }
}

/* ─── M28. SECTION HEADINGS — CENTERED ON MOBILE ────────────────── */
@media (max-width: 640px) {

  /* Section intros: always center-aligned */
  .section-pattern-1 .text-center,
  .section-pattern-2 .text-center,
  .section-pattern-3 .text-center {
    text-align: center !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Eyebrow labels: smaller caps */
  [class*="tracking-"][class*="uppercase"] {
    font-size: 0.65rem !important;
    letter-spacing: 0.18em !important;
  }
}

/* ─── M29. COUNTER / STEPPER WIDGETS ────────────────────────────── */
@media (max-width: 640px) {

  /* Counter buttons: bigger tap targets */
  .elb-counter-btn,
  .tg-parts-wrap .elb-counter-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.2rem !important;
  }
  .elb-counter-value,
  .tg-parts-wrap .elb-counter-value {
    font-size: 1.4rem !important;
    min-width: 2.5rem !important;
  }
}

/* ─── M30. CARDS WITH FIXED MIN-HEIGHT — REMOVE ON MOBILE ───────── */
@media (max-width: 640px) {

  /* Jobs cards: no fixed height constraint */
  .js-card {
    min-height: 240px !important;
  }

  /* Tagungen package cards: auto height */
  [data-tagungen-package] {
    min-height: unset !important;
  }
}



/* ═══════════════════════════════════════════════════════════════════
   M31. HORIZONTAL OVERFLOW FIXES — targeted per-section
   Addresses 6 specific overflow sources found on mobile (375px).
═══════════════════════════════════════════════════════════════════════ */

/* ── About section (section-pattern-2): clip decorative orbs ──────── */
.section-pattern-2 {
  overflow-x: hidden !important;
}
/* Inner container: never exceed viewport width */
.section-pattern-2 > div:first-child {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* ── Events section: clip carousel overflow ────────────────────────── */
#events {
  overflow-x: hidden !important;
}
#custom-event-carousel {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
/* Event carousel dot row: wrap dots, never overflow */
#custom-event-carousel .flex.items-center.gap-2,
#events .flex.items-center.gap-2 {
  flex-wrap: wrap !important;
  max-width: 100% !important;
  overflow: hidden !important;
  justify-content: center !important;
}

/* ── Bewertungen (reviews): clip decorative absolute blobs ─────────── */
#bewertungen {
  overflow-x: hidden !important;
}
/* Absolute decorative elements inside reviews: contain them */
#bewertungen [class*="absolute"][class*="w-96"],
#bewertungen [class*="absolute"][class*="w-80"],
#bewertungen [class*="absolute"][class*="w-72"] {
  max-width: 80vw !important;
  overflow: hidden !important;
}

/* ── Gallery dots: wrap when there are many images ─────────────────── */
#galerie-dots {
  flex-wrap: wrap !important;
  max-width: calc(100% - 2rem) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
  gap: 6px !important;
}

/* ── Gutschein (voucher landing section): clip ──────────────────────── */
#gutschein,
.elb-vou-page-section {
  overflow-x: hidden !important;
}
/* Decorative orb pseudo-elements: allow overflow only vertically */
#gutschein::before,
#gutschein::after,
.elb-vou-page-section::before,
.elb-vou-page-section::after {
  max-width: 100vw !important;
  overflow: hidden !important;
}

/* ── Global safety: all sections clip horizontal overflow ───────────── */
@media (max-width: 768px) {
  section {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  /* But allow intentional horizontal scroll containers */
  .horizontal-scroll-container,
  [class*="overflow-x-auto"] {
    overflow-x: auto !important;
    max-width: 100% !important;
  }
}

/* ─── M32. VOUCHER CARD — MOBILE CENTERING ───────────────────────── */
@media (max-width: 768px) {
  /* Preview column: un-stick and center */
  .elb-vou-preview-col {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* Card: centred, max width so it's readable */
  .elb-vou-card {
    max-width: 320px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* Modal: full-height scrollable sheet, card visible above fold */
  .elb-vou-modal {
    max-height: 92svh !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Overlay: top-aligned on short screens so card is reachable */
  .elb-vou-overlay {
    align-items: flex-start !important;
    padding-top: env(safe-area-inset-top, 12px) !important;
    overflow-y: auto !important;
  }
}

/* ─── M33. MODAL SCROLL CONTAINMENT (all modals) ────────────────── */
/* Prevents background page from scrolling when user reaches modal edge */
.elb-vou-modal,
.elb-booking-modal,
.tg-booking-modal {
  overscroll-behavior: contain !important;
}

.elb-vou-overlay,
.elb-booking-overlay,
.tg-overlay {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ─── M34. LOADER CSS SAFETY NET ────────────────────────────────────
   CSS-only fallback: if JS dismissal fails, auto-fade after 2s.
   The JS script handles it earlier; this is a belt-and-suspenders.   */
@keyframes elb-loader-autodismiss {
  0%   { opacity: 1; pointer-events: all; }
  100% { opacity: 0; pointer-events: none; display: none; }
}
#elb-loader {
  animation: elb-loader-autodismiss 0.4s 2s ease-out forwards;
}

/* ─── M35. ROOM CARDS — MOBILE STACKED LAYOUT ───────────────────────
   Replace the image-bg + absolute overlay pattern with a clean
   stacked grid: image row / content row. No clipping, no hidden text. */
@media (max-width: 767px) {

  /* Card root: flex column, no min-height forcing overlay */
  #rooms-view [data-room-card] {
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    border-radius: 16px !important;
    overflow: hidden !important; /* clip rounded corners only */
  }

  /* Image container: fixed height so image is visible */
  #rooms-view [data-room-card] > div:first-child {
    height: 220px !important;
    min-height: 220px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Content panel: was absolute inset-0 (clipped by overflow:hidden)
     → make it static so it flows naturally below the image           */
  #rooms-view [data-room-card] .absolute.inset-0.flex.flex-col,
  #rooms-view [data-room-panel] {
    position: static !important;
    inset: auto !important;
    height: auto !important;
    min-height: auto !important;
    padding: 20px 16px 16px !important;
    background: rgba(10, 20, 14, 0.96) !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Glass overlay: purely decorative gradient over image — keep it */
  #rooms-view .card-glass-overlay,
  #rooms-view .card-glass-overlay-strong {
    /* overlay lives in the first-child image container, not clipping content */
    pointer-events: none !important;
  }

  /* Text: always visible, no opacity animations needed */
  #rooms-view [data-room-card] .card-title,
  #rooms-view [data-room-card] h3,
  #rooms-view [data-room-card] .card-subtitle,
  #rooms-view [data-room-card] p,
  #rooms-view [data-room-card] [data-room-title],
  #rooms-view [data-room-card] [data-room-subtitle] {
    opacity: 1 !important;
    transform: none !important;
    color: #f5f1ea !important;
  }

  /* Price chip: always visible */
  #rooms-view [data-room-card] [data-room-price],
  #rooms-view [data-room-card] .card-price {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Feature chips: wrap, don't hide */
  #rooms-view [data-room-card] [data-room-chip] {
    opacity: 1 !important;
  }

  /* CTA button: full width, always visible */
  #rooms-view [data-room-card] button,
  #rooms-view [data-room-card] a[class*="btn"] {
    width: 100% !important;
    min-height: 48px !important;
    margin-top: 12px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* No hover transforms on mobile (touch devices) */
  #rooms-view [data-room-card]:hover {
    transform: none !important;
  }
  #rooms-view [data-room-card]:hover img {
    transform: none !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   M36. TAGUNGEN CONFERENCE ROOM CARDS — MOBILE SINGLE-COLUMN FIX
   Root cause: line ~4297 sets grid-template-columns:repeat(2,1fr)
   with :not() pseudo-classes giving it higher specificity than the
   @media reset at ~4302. Fix: mirror the exact selector inside the
   mobile media query so specificity matches and cascade order wins.
════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #tagungen [class*="grid-cols-1"][class*="grid-cols-2"][class*="gap-"]:not([class*="grid-cols-3"]):not([class*="grid-cols-4"]) {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   M37. STICKY MOBILE BOOKING BAR — CSS
   A persistent bottom action bar shown only on mobile (≤767px).
   The bar HTML is injected by assets/mobile-ui.js.
   Layout: [Zimmer buchen — flex:1] [📞 tel icon]
   Safe-area-aware padding for iPhone notch/home indicator.
════════════════════════════════════════════════════════════════════════ */
#elb-mobile-bar {
  display: none !important;
}

@media (max-width: 767px) {
  #elb-mobile-bar {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9985;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(8, 18, 13, 0.97);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-top: 1px solid rgba(197, 160, 89, 0.22);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.35);
    transform: translateY(0);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Hide bar when scrolled to very top (hero already has CTAs) */
  #elb-mobile-bar.elb-bar-hidden {
    transform: translateY(110%);
  }

  /* Primary CTA — "Zimmer buchen" */
  #elb-mobile-bar .elb-bar-primary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 52px;
    background: linear-gradient(135deg, #247a6e 0%, #1b5c53 100%);
    color: #fff !important;
    border: none;
    border-radius: 14px;
    font-family: var(--font-inter, Inter, sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 4px 16px rgba(36,122,110,0.4);
    transition: opacity 0.15s ease, transform 0.1s ease;
  }

  #elb-mobile-bar .elb-bar-primary:active {
    opacity: 0.82;
    transform: scale(0.97);
  }

  /* Secondary CTA — telephone */
  #elb-mobile-bar .elb-bar-tel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    min-width: 52px;
    background: rgba(197,160,89,0.1);
    color: #C5A059 !important;
    border: 1px solid rgba(197,160,89,0.28);
    border-radius: 14px;
    font-size: 1.3rem;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
  }

  #elb-mobile-bar .elb-bar-tel:active {
    background: rgba(197,160,89,0.2);
  }

  /* Push body content up so last section clears the bar */
  body.has-mobile-bar {
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Auto-hide bar when any full-screen modal/overlay is open */
  body.modal-open #elb-mobile-bar {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   M38. EVENT POSTER IMAGES — CONTAIN ON MOBILE
   Prevents event flyer images from overflowing or clipping text
   on the right edge at small viewports.
════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #events [class*="aspect-"] img,
  #custom-event-carousel [class*="aspect-"] img,
  #events [class*="relative"] > img,
  #custom-event-carousel [class*="relative"] > img {
    object-fit: contain !important;
    max-height: 300px !important;
    width: 100% !important;
  }

  /* Ensure event card image wrapper doesn't overflow */
  #events [class*="overflow-hidden"],
  #custom-event-carousel [class*="overflow-hidden"] {
    max-width: 100% !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   M39. HERO SECTION — TINY SCREEN TUNING (< 400px)
   On very small phones ensure the CTA buttons are always full-width
   and description text doesn't run too tight.
════════════════════════════════════════════════════════════════════════ */
@media (max-width: 399px) {
  /* Scale hero title slightly tighter */
  .hero-title {
    font-size: clamp(2.1rem, 14vw, 2.8rem) !important;
    letter-spacing: -0.04em !important;
  }

  /* Body text in hero: readable but not too large */
  #hero p:not([class*="tracking"]):not(.hero-title) {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   M40. NAV HAMBURGER BUTTON — 56px TOUCH TARGET
   The default button is ~48px; nudge to 56px for easier tapping.
════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Hamburger open / close button */
  header > nav button,
  header button[aria-expanded],
  header button[aria-label] {
    min-height: 56px !important;
    min-width: 56px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   M41. PREFERS-REDUCED-MOTION — FULL DISABLE
   Cuts all CSS transitions/animations for users who request it.
   The JS in landing-performance.js already gates video autoplay.
════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Swap hero video for poster image */
  #hero video {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  #hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/images/hero-poster.webp');
    background-size: cover;
    background-position: center top;
  }
}

/* ════════════════════════════════════════════════════════════════════
   M42. GLOBAL MOBILE POLISH — small remaining gaps
════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Ensure no section causes horizontal scroll */
  #events, #bewertungen, #galerie, #faq, #kontakt, #gutschein {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Slightly more breathing room for section headings on mobile */
  [class*="section-pattern"] h2 {
    font-size: clamp(1.6rem, 7vw, 2.25rem) !important;
  }

  /* Ensure all primary CTA buttons in sections are at least 48px tall */
  [class*="section-pattern"] button[class*="rounded"],
  [class*="section-pattern"] a[class*="rounded"][class*="px-"] {
    min-height: 48px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   M43. STICKY BAR — PULSING CTA ANIMATION
   Premium gold-ring pulse on the "Zimmer buchen" button.
   Triggers once every 4s, pauses on hover/active/focus.
   Uses a tight keyframe so 80% of the time the button is at rest.
════════════════════════════════════════════════════════════════════════ */
@keyframes elb-cta-pulse {
  0%, 70%, 100% {
    box-shadow: 0 4px 16px rgba(36,122,110,0.4);
  }
  78% {
    box-shadow:
      0 4px 22px rgba(36,122,110,0.55),
      0 0 0 4px rgba(197,160,89,0.22);
  }
  86% {
    box-shadow:
      0 4px 28px rgba(36,122,110,0.65),
      0 0 0 7px rgba(197,160,89,0.10);
  }
}

@media (max-width: 767px) {
  #elb-mobile-bar .elb-bar-primary {
    animation: elb-cta-pulse 4s ease-in-out infinite;
  }
  #elb-mobile-bar .elb-bar-primary:hover,
  #elb-mobile-bar .elb-bar-primary:active,
  #elb-mobile-bar .elb-bar-primary:focus {
    animation-play-state: paused;
  }
  /* Respect reduced-motion — disable pulse */
  @media (prefers-reduced-motion: reduce) {
    #elb-mobile-bar .elb-bar-primary {
      animation: none;
    }
  }
}

/* ════════════════════════════════════════════════════════════════════
   M44. STICKY BAR — AVAILABILITY BADGE
   Small pill shown when the live availability counter is loaded.
   Green when rooms available, amber when only a few left.
════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #elb-avail-badge {
    display: none;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a5c40;
    color: #d4f0e5;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 99px;
    white-space: nowrap;
    border: 1px solid rgba(197,160,89,0.3);
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    animation: elb-badge-appear 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
  }
  #elb-avail-badge.few-left {
    background: #7a4a0a;
    color: #fde8c0;
    border-color: rgba(255,165,0,0.35);
  }

  @keyframes elb-badge-appear {
    from { opacity: 0; transform: translateX(-50%) scale(0.7); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
  }
}

/* ════════════════════════════════════════════════════════════════════
   M45. BOOKING MODAL — QUICK-DATE CHIPS
   Row of tappable date shortcuts injected above the date inputs.
   Speeds up form completion for the most common stay patterns.
════════════════════════════════════════════════════════════════════════ */
.elb-quickdate-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.elb-quickdate-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 99px;
  background: rgba(36,122,110,0.09);
  border: 1px solid rgba(36,122,110,0.22);
  color: #1a5c40;
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  user-select: none;
}

.elb-quickdate-chip:active,
.elb-quickdate-chip.selected {
  background: rgba(36,122,110,0.20);
  border-color: rgba(36,122,110,0.5);
  color: #124433;
}

.elb-quickdate-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(36,122,110,0.6);
  margin-bottom: 6px;
}

/* ════════════════════════════════════════════════════════════════════
   M46. REVIEW CAROUSEL — MOBILE SWIPE AFFORDANCE
   Visual swipe hint after the carousel on small screens.
   Fades after first interaction.
════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .elb-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(26,47,36,0.45);
    animation: elb-swipe-fade 0.5s ease 3s forwards;
    opacity: 1;
  }
  .elb-swipe-hint svg {
    flex-shrink: 0;
  }
  @keyframes elb-swipe-fade {
    to { opacity: 0; pointer-events: none; }
  }

  /* Review glass-card: touch feedback */
  #bewertungen .glass-card {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }
  #bewertungen .glass-card.swiping {
    transition: transform 0.15s ease !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   M47 — SCROLL LOCK  (iOS-safe: position:fixed when body is locked)
   Applied by mobile-ui.js via body.elb-scroll-locked class.
   Also handles external overflow:hidden patches.
══════════════════════════════════════════════════════════════════════ */

/* Locked state: position:fixed prevents iOS Safari background scroll */
body.elb-scroll-locked {
  position: fixed !important;
  width: 100% !important;
  /* overflow-y:scroll keeps scrollbar gutter to prevent layout shift */
  overflow-y: scroll !important;
}

/* Booking modal body: must scroll internally when content is tall */
.elb-booking-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  max-height: calc(90vh - 130px); /* header (60px) + progress bar (70px) */
}

/* Nav overlay (React): if a fixed nav panel opens, ensure it scrolls */
header [data-state="open"],
header [aria-expanded="true"] + *,
nav [aria-hidden="false"] {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  max-height: 100dvh !important;
}

/* ════════════════════════════════════════════════════════════════════
   M48 — ROOM CARDS: robust mobile-first grid + touch UX
   Fixes: column layout, tap states, hover-on-touch removal, targets
══════════════════════════════════════════════════════════════════════ */

/* ── Mobile: guaranteed single column ───────────────────────────── */
@media (max-width: 767px) {
  /* Broad selector covers all Tailwind grid variations */
  #rooms-view [class*="grid-cols"],
  #rooms-view [class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Card height: comfortable single-column browse */
  #rooms-view [data-room-card] {
    min-height: clamp(380px, 95vw, 460px) !important;
    /* Disable desktop lift animation — use tap instead */
    transition:
      transform 0.12s ease,
      box-shadow 0.12s ease,
      border-color 0.2s ease !important;
  }

  /* Native app tap feedback */
  #rooms-view [data-room-card]:active {
    transform: scale(0.982) !important;
    box-shadow:
      0 2px 12px rgba(0,0,0,0.35),
      0 1px 0 rgba(197,160,89,0.2) inset !important;
    transition: transform 0.06s ease, box-shadow 0.06s ease !important;
  }

  /* CTA buttons: 48px minimum touch target */
  #rooms-view [data-room-card] [data-room-cta="1"],
  #rooms-view [data-room-card] button[class*="w-full"],
  #rooms-view [data-room-card] a[class*="w-full"] {
    min-height: 48px !important;
    font-size: 0.95rem !important;
  }

  /* Preview panel: tighter padding on narrow screens */
  #rooms-view [data-room-card][data-room-state="preview"] [data-room-panel] {
    padding: 20px 16px 16px !important;
    min-height: 190px !important;
  }

  /* Expanded panel: fits tall forms without overflow */
  #rooms-view [data-room-card][data-room-state="expanded"] [data-room-panel] {
    padding: 140px 16px 20px !important;
  }
  #rooms-view [data-room-card][data-room-state="expanded"] {
    min-height: clamp(500px, 130vw, 640px) !important;
  }
}

/* ── Tablet: 2 columns ───────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  #rooms-view [class*="grid-cols"],
  #rooms-view [class*="grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

/* ── Touch devices: remove hover-lift animations ─────────────────── */
@media (hover: none) {
  #rooms-view [data-room-card]:hover {
    transform: none !important;
    box-shadow:
      0 4px 30px rgba(0,0,0,0.4),
      0 1px 0 rgba(197,160,89,0.25) inset,
      0 -1px 0 rgba(0,0,0,0.2) inset !important;
    border-color: rgba(197,160,89,0.35) !important;
  }
  #rooms-view [data-room-card]:hover img {
    transform: none !important;
    opacity: 0.85 !important;
  }
  #rooms-view [data-room-card]:hover::before {
    opacity: 0.5 !important;
  }
}