/* ═══════════════════════════════════════════════════════════
   AVIVA HOTEL BY APOLONIA — EDITORIAL LUXURY DESIGN
   ═══════════════════════════════════════════════════════════ */

/* ── RESET & BASE ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:      #0a0a0a;
  --black-soft: #141414;
  --black-mid:  #1c1c1c;
  --white:      #ffffff;
  --off-white:  #f5f2ec;
  --cream:      #ede9e0;
  --mid:        #6b6b6b;
  --light:      #b0aba0;
  --border:     #e0dbd0;
  --gold:       #c9a84c;
  --gold-light: #e8c97a;
  --gold-dark:  #9a7828;
  --navy:       #1a2744;
  --navy-light: #223366;

  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --radius-sm:  6px;
  --radius:     12px;
  --radius-lg:  20px;
  --radius-xl:  32px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow:    0 8px 32px rgba(0,0,0,.12);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.18);
  --shadow-xl: 0 40px 120px rgba(0,0,0,.28);

  --ease: cubic-bezier(.25,.46,.45,.94);
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--black);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
input, select, button { font-family: inherit; }

/* ── TYPOGRAPHY ────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 300; line-height: 1.1; }

/* ── ROOM / AMENITY IMAGES ──────────────────────────────────── */
.room-img-1 { background-image: url('../img/room-1.jpg'); background-size: cover; background-position: center; }
.room-img-2 { background-image: url('../img/room-2.jpg'); background-size: cover; background-position: center; }
.room-img-3 { background-image: url('../img/room-3.jpg'); background-size: cover; background-position: center; }
.room-img-4 { background-image: url('../img/room-4.jpg'); background-size: cover; background-position: center; }
.room-img-5 { background-image: url('../img/room-5.jpg'); background-size: cover; background-position: center; }
.amenity-img-1 { background-image: url('../img/amenity-1.jpg'); background-size: cover; background-position: center; }
.amenity-img-2 { background-image: url('../img/amenity-2.jpg'); background-size: cover; background-position: center; }
.amenity-img-3 { background-image: url('../img/amenity-3.jpg'); background-size: cover; background-position: center; }
.amenity-img-4 { background-image: url('../img/amenity-4.jpg'); background-size: cover; background-position: center; }
.amenity-img-5 { background-image: url('../img/amenity-5.jpg'); background-size: cover; background-position: center; }

/* ══════════════════════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════════════════════ */

.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.25rem 3rem;
  background: transparent;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}

.navbar.scrolled,
.navbar.navbar-dark.scrolled,
.navbar.navbar-dark {
  background: var(--black);
  box-shadow: 0 2px 24px rgba(0,0,0,.3);
  padding: .85rem 3rem;
}

.nav-brand { flex-shrink: 0; }
.logo-img { height: 68px; width: auto; object-fit: contain; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  justify-content: center;
}

.nav-links li a {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  padding: .5rem .85rem;
  border-radius: 4px;
  transition: color .25s;
}
.nav-links li a:hover,
.nav-links li a.active { color: var(--white); }

/* ── Nav Dropdown (Zimmer) ── */
.nav-dropdown { position: relative; }
.nav-arrow { font-size: .6rem; opacity: .6; margin-left: .2rem; }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: .6rem;
  background: transparent;
  z-index: 999;
  min-width: 160px;
}
.nav-dropdown-rich {
  min-width: 280px;
}
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  inset: .6rem 0 0 0;
  background: #111;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  z-index: -1;
}
.nav-dropdown-menu.open { display: block; }
.nav-dropdown-menu a {
  display: block;
  font-size: .75rem;
  font-family: var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  padding: .55rem .9rem;
  border-radius: 5px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: rgba(255,255,255,.08); color: var(--white); }

/* ── Mega Menu (Das Hotel) ── */
.nav-mega { position: static !important; }
.nav-mega-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(860px, 96vw);
  background: #0f0f0f;
  border: 1px solid rgba(255,255,255,.08);
  border-top: 2px solid var(--gold);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
  z-index: 1000;
  grid-template-columns: 1fr 1fr 220px;
  gap: 0;
  overflow: hidden;
  margin-top: 0;
}
.nav-mega-panel.open { display: grid; }
.mega-col { padding: 1.75rem 1.5rem; }
.mega-col + .mega-col { border-left: 1px solid rgba(255,255,255,.06); }
.mega-col-title {
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.mega-item {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .625rem .5rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s;
  margin-bottom: .25rem;
}
.mega-item:hover { background: rgba(255,255,255,.06); }
.mega-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: background .15s;
}
.mega-item:hover .mega-item-icon { background: rgba(201,168,76,.15); }
.mega-item-text strong {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  letter-spacing: .03em;
  margin-bottom: .1rem;
}
.mega-item-text small {
  display: block;
  font-size: .68rem;
  color: rgba(255,255,255,.35);
  letter-spacing: .02em;
}
.mega-cta-col {
  background: linear-gradient(160deg, rgba(201,168,76,.12) 0%, rgba(201,168,76,.04) 100%);
  border-left: 1px solid rgba(201,168,76,.15) !important;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.mega-cta-label {
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.mega-cta-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
}
.mega-cta-sub {
  font-size: .75rem;
  color: rgba(255,255,255,.4);
  line-height: 1.5;
}
.mega-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: var(--black);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .65rem 1.25rem;
  border-radius: 5px;
  text-decoration: none;
  transition: background .2s;
  margin-top: .5rem;
}
.mega-cta-btn:hover { background: var(--gold-light); }

@media(max-width:1024px) {
  .nav-mega-panel { width: min(720px, 96vw); grid-template-columns: 1fr 1fr; }
  .mega-cta-col { display: none; }
}
@media(max-width:768px) { .nav-mega-panel { display: none !important; } }


.btn-nav {
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--gold);
  padding: .6rem 1.4rem;
  border-radius: 4px;
  transition: background .25s, transform .2s;
}
.btn-nav:hover { background: var(--gold-light); transform: translateY(-1px); }

.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
  padding: .5rem;
  margin-left: auto;
}

/* ── MOBILE MENU ───────────────────────────────────────────── */
.mobile-menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 100vw);
  height: 100vh;
  background: var(--black);
  z-index: 999;
  padding: 5rem 2rem 2rem;
  gap: .5rem;
  transform: translateX(100%);
  transition: transform .4s var(--ease);
  box-shadow: -8px 0 40px rgba(0,0,0,.4);
}
.mobile-menu.open { transform: translateX(0); }

.mobile-menu a {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255,255,255,.75);
  padding: .75rem 1rem;
  border-radius: 6px;
  transition: color .2s, background .2s;
}
.mobile-menu a:hover { color: var(--white); background: rgba(255,255,255,.07); }

.btn-mobile {
  margin-top: 1rem;
  background: var(--gold) !important;
  color: var(--black) !important;
  text-align: center;
  font-weight: 600 !important;
  border-radius: 6px;
  padding: .85rem 1.5rem !important;
}

/* ══════════════════════════════════════════════════════════════
   HERO — SPLIT SCREEN
   ══════════════════════════════════════════════════════════════ */

.hero-split {
  display: grid;
  grid-template-columns: 52% 48%;
  min-height: 100vh;
}

.hs-left {
  display: flex;
  align-items: center;
  background: var(--white);
  padding: 8rem 5vw 4rem 5vw;
}

.hs-left-inner { max-width: 540px; }

.hs-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 2rem;
  padding: .4rem 1rem;
  border: 1px solid var(--gold);
  border-radius: 2px;
}

.hs-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6vw, 7rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--black);
  margin-bottom: 1.5rem;
}

.hs-title em {
  font-style: italic;
  color: var(--gold-dark);
}

.hs-sub {
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  max-width: 400px;
}

.hs-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.hs-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.hs-stat { text-align: center; }
.hs-num { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--black); }
.hs-label { display: block; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mid); margin-top: .2rem; }
.hs-stat-div { width: 1px; height: 36px; background: var(--border); flex-shrink: 0; }

.hs-right {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

.hs-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 8s ease;
}

.hs-right:hover .hs-img { transform: scale(1.04); }

.hs-overlay-text {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  font-family: var(--font-display);
  font-size: clamp(5rem, 10vw, 12rem);
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(255,255,255,.06);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.hs-scroll {
  position: absolute;
  bottom: 2.5rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.5);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hs-scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
  animation: scrollPulse 2s ease infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: .5; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.1); }
}

/* ══════════════════════════════════════════════════════════════
   BOOKING BAR
   ══════════════════════════════════════════════════════════════ */

.book-bar {
  background: var(--black-soft);
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.06);
}

.book-bar-inner {
  display: flex;
  align-items: stretch;
  max-width: 100%;
}

.book-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 2rem;
  border-right: 1px solid rgba(255,255,255,.08);
}

.book-field label {
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .4rem;
}

.book-field input,
.book-field select {
  background: none;
  border: none;
  outline: none;
  color: var(--white);
  font-size: .95rem;
  font-weight: 400;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
  width: 100%;
}

/* Kalender-Icon weiß */
.book-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) invert(1);
  cursor: pointer;
  opacity: .5;
  width: 16px;
  height: 16px;
}

/* Select: weißer Pfeil */
.book-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.5)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  padding-right: 1.5rem;
}

.book-field select option { background: #1c1c1c; color: var(--white); }

.book-divider {
  width: 1px;
  background: rgba(255,255,255,.08);
}

.btn-gold-solid {
  background: var(--gold);
  color: var(--black);
  border: none;
  padding: 0 2.5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  border-radius: 0;
}
.btn-gold-solid:hover { background: var(--gold-light); }

/* ══════════════════════════════════════════════════════════════
   TICKER
   ══════════════════════════════════════════════════════════════ */

.ticker-bar {
  background: var(--off-white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding: .85rem 0;
}

.ticker-inner {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: ticker 28s linear infinite;
}

@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-bar:hover .ticker-inner { animation-play-state: paused; }

.ti {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: 0 2rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--black);
}

.td { color: var(--gold); font-size: .8rem; }

/* ══════════════════════════════════════════════════════════════
   STATEMENT SECTION
   ══════════════════════════════════════════════════════════════ */

.statement-section {
  position: relative;
  background: var(--black);
  padding: 8rem 5vw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.statement-number {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(12rem, 25vw, 22rem);
  font-weight: 700;
  color: rgba(255,255,255,.025);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
  pointer-events: none;
  line-height: 1;
}

.statement-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  text-align: center;
}

.st-label {
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2rem;
  display: block;
}

.st-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 1.75rem;
}

.st-title em { font-style: italic; color: var(--gold-light); }

.st-text {
  font-size: 1.05rem;
  color: rgba(255,255,255,.5);
  line-height: 1.85;
  margin-bottom: 2.5rem;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.st-links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.st-links a {
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  border-bottom: 1px solid rgba(255,255,255,.2);
  padding-bottom: .2rem;
  transition: color .25s, border-color .25s;
}

.st-links a:hover { color: var(--gold); border-color: var(--gold); }

/* ══════════════════════════════════════════════════════════════
   ROOMS — EDITORIAL ALTERNATING
   ══════════════════════════════════════════════════════════════ */

.rooms-editorial { background: var(--white); }

.re-label {
  padding: 3rem 5vw 0;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mid);
}

.re-item {
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: 70vh;
  border-bottom: 1px solid var(--border);
}

.re-item-reverse { grid-template-columns: 45% 55%; }
.re-item-reverse .re-img { order: 2; }
.re-item-reverse .re-info { order: 1; }

.re-img {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  background-size: cover;
  background-position: center;
}

.re-img-tag {
  position: absolute;
  top: 2rem;
  left: 2rem;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--white);
  color: var(--black);
  padding: .45rem 1rem;
  border-radius: 2px;
}

.re-tag-gold { background: var(--gold); color: var(--black); }

.re-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 5vw;
}

.re-num {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 300;
  color: var(--cream);
  line-height: 1;
  margin-bottom: .5rem;
}

.re-type {
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: .75rem;
}

.re-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 400;
  color: var(--black);
  margin-bottom: 1rem;
}

.re-desc {
  font-size: .95rem;
  color: var(--mid);
  line-height: 1.75;
  margin-bottom: 1.5rem;
  max-width: 380px;
}

.re-feats {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 2rem;
}

.re-feats li {
  font-size: .85rem;
  color: var(--black);
  padding-left: 1.25rem;
  position: relative;
}

.re-feats li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--gold);
}

.re-footer {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.re-price { font-size: .9rem; color: var(--mid); }
.re-price strong { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; color: var(--black); }
.re-price span { font-size: .75rem; color: var(--light); }

.re-cta { text-align: center; padding: 4rem 2rem; }

/* ══════════════════════════════════════════════════════════════
   NUMBERS BAR
   ══════════════════════════════════════════════════════════════ */

.numbers-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  background: var(--black);
  padding: 3.5rem 4vw;
  align-items: center;
}

.nb-item { text-align: center; padding: 1rem 2rem; }

.nb-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 4.5rem);
  font-weight: 300;
  color: var(--gold-light);
  line-height: 1;
  margin-bottom: .5rem;
}

.nb-label {
  display: block;
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

.nb-div {
  width: 1px;
  height: 60px;
  background: rgba(255,255,255,.1);
}

/* ══════════════════════════════════════════════════════════════
   OFFERS — 3 COLUMNS
   ══════════════════════════════════════════════════════════════ */

.offers-section { background: var(--off-white); }

.offers-label {
  padding: 3rem 5vw 2rem;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mid);
}

.offers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
}

.offer-card {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--white);
  overflow: hidden;
  transition: transform .3s var(--ease);
}

.offer-card:last-child { border-right: none; }
.offer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.offer-card-dark { background: var(--black-soft); }
.offer-card-dark .offer-body h3, .offer-card-dark .offer-price { color: var(--white); }
.offer-card-dark .offer-cat { color: var(--gold); }
.offer-card-dark p { color: rgba(255,255,255,.5); }

.offer-img {
  height: 240px;
  background-size: cover;
  background-position: center;
  transition: transform .5s var(--ease);
}

.offer-card:hover .offer-img { transform: scale(1.04); }

.offer-body {
  padding: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.offer-cat {
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
}

.offer-body h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; color: var(--black); }
.offer-body p { font-size: .88rem; color: var(--mid); line-height: 1.7; flex: 1; }

.offer-price {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gold-dark);
  letter-spacing: .05em;
  margin-top: .5rem;
}

/* ══════════════════════════════════════════════════════════════
   SERVICES EDITORIAL
   ══════════════════════════════════════════════════════════════ */

.services-editorial { background: var(--white); border-top: 1px solid var(--border); }

.se-label {
  padding: 3rem 5vw 0;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mid);
}

.se-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 540px;
}

.se-feature { display: flex; flex-direction: column; }

.se-feature-img {
  flex: 1;
  min-height: 320px;
  background-size: cover;
  background-position: center;
}

.se-feature-text { padding: 3rem 4vw; background: var(--black); }

.se-tag {
  display: inline-block;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.se-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 300;
  color: var(--white);
  margin-bottom: 1rem;
  line-height: 1.15;
}

.se-title em { font-style: italic; color: var(--gold-light); }

.se-feature-text p { font-size: .9rem; color: rgba(255,255,255,.5); line-height: 1.75; margin-bottom: 1.5rem; }

.se-icons {
  padding: 3rem 4vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-content: center;
  border-left: 1px solid var(--border);
}

.se-icon-item { display: flex; flex-direction: column; gap: .4rem; }

.se-icon { font-size: 1.6rem; margin-bottom: .25rem; }

.se-icon-item strong { font-size: .85rem; font-weight: 600; color: var(--black); }
.se-icon-item p { font-size: .78rem; color: var(--mid); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════
   BREAKFAST EDITORIAL
   ══════════════════════════════════════════════════════════════ */

.breakfast-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
  border-top: 1px solid var(--border);
}

.bfe-img { background-size: cover; background-position: center; min-height: 380px; }

.bfe-text {
  background: var(--black-soft);
  padding: 5rem 4vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bfe-label { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }

.bfe-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.bfe-text > p { font-size: .9rem; color: rgba(255,255,255,.45); line-height: 1.75; margin-bottom: 2rem; }

.bfe-times { display: flex; flex-direction: column; gap: .85rem; border-left: 2px solid var(--gold); padding-left: 1.25rem; }

.bfe-time { display: flex; flex-direction: column; }
.bfe-time strong { font-size: .8rem; color: var(--white); font-weight: 600; }
.bfe-time span { font-size: .85rem; color: rgba(255,255,255,.4); }

/* ══════════════════════════════════════════════════════════════
   LOCATION EDITORIAL
   ══════════════════════════════════════════════════════════════ */

.location-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
  border-top: 1px solid var(--border);
}

.le-text {
  background: var(--off-white);
  padding: 5rem 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.le-label { font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; color: var(--mid); margin-bottom: 1.5rem; }

.le-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 300;
  color: var(--black);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.le-title em { font-style: italic; color: var(--gold-dark); }

.le-text > p { font-size: .9rem; color: var(--mid); line-height: 1.75; margin-bottom: 2rem; }

.le-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-bottom: 1.5rem; }

.le-fact {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  transition: box-shadow .2s, transform .2s;
}
.le-fact:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.le-fact-icon { font-size: 1.25rem; margin-bottom: .3rem; line-height: 1; }
.le-fact strong { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--black); font-weight: 400; line-height: 1.1; }
.le-fact span { font-size: .72rem; color: var(--mid); line-height: 1.4; }

.le-map {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  padding: 0;
}

.le-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: grayscale(30%) contrast(1.05);
}

.le-map-overlay {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 2;
  pointer-events: none;
}

.le-map-card {
  background: rgba(10,10,10,.88);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  pointer-events: auto;
}

.le-map-card strong {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--white);
  font-weight: 400;
}

.le-map-card span {
  font-size: .75rem;
  color: rgba(255,255,255,.5);
}

.le-map-link {
  font-size: .72rem;
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .04em;
  margin-top: .25rem;
  transition: color .2s;
}
.le-map-link:hover { color: var(--gold-light); }

/* ══════════════════════════════════════════════════════════════
   CTA EDITORIAL
   ══════════════════════════════════════════════════════════════ */

.cta-editorial {
  position: relative;
  overflow: hidden;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-ed-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.cta-ed-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.72); }

.cta-ed-content { position: relative; z-index: 1; text-align: center; padding: 6rem 4vw; }

.cta-ed-label { display: inline-block; font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }

.cta-ed-title {
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 11rem);
  font-weight: 300;
  color: var(--white);
  line-height: .95;
  letter-spacing: -.03em;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.cta-ed-content > p { font-size: 1rem; color: rgba(255,255,255,.5); margin-bottom: 2.5rem; max-width: 480px; margin-left: auto; margin-right: auto; }

.cta-ed-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════
   FOOTER EDITORIAL (homepage)
   ══════════════════════════════════════════════════════════════ */

.footer-ed {
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,.07);
}

.footer-ed-top {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  padding: 5rem 5vw;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.fe-brand { max-width: 300px; }

.fe-logo { height: 72px; width: auto; margin-bottom: 1.5rem; object-fit: contain; }

.fe-brand p { font-size: .85rem; color: rgba(255,255,255,.35); line-height: 1.75; margin-bottom: 1.5rem; }

.fe-social { display: flex; gap: .75rem; align-items: center; }
.fe-social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.07); color: rgba(255,255,255,.4); transition: background .2s, color .2s; }
.fe-social a:hover { background: var(--gold); color: var(--black); }
.fe-social a svg { display: block; }

.fe-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.fe-col h4 { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 1.25rem; font-family: var(--font-body); font-weight: 600; }

.fe-col a, .fe-col p { display: block; font-size: .85rem; color: rgba(255,255,255,.45); margin-bottom: .6rem; transition: color .2s; line-height: 1.6; }
.fe-col a:hover, .fe-col a:hover * { color: var(--white); }
.fe-col p { cursor: default; }

.footer-ed-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 5vw;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-ed-bottom p { font-size: .75rem; color: rgba(255,255,255,.2); }
.footer-ed-bottom > div:not(.legal-menu) { display: flex; gap: 1.5rem; }
.footer-ed-bottom a { font-size: .72rem; color: rgba(255,255,255,.28); transition: color .2s; }
.footer-ed-bottom a:hover { color: var(--white); }

/* ══════════════════════════════════════════════════════════════
   FOOTER (inner pages)
   ══════════════════════════════════════════════════════════════ */

.footer {
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 4rem 5vw 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.footer-brand p { font-size: .85rem; color: rgba(255,255,255,.35); line-height: 1.75; margin: 1rem 0; }

.footer-logo-img { height: 72px; width: auto; object-fit: contain; margin-bottom: .5rem; }

.footer-col h4 { font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 1.25rem; font-weight: 600; }

.footer-col a, .footer-col p { display: block; font-size: .85rem; color: rgba(255,255,255,.4); margin-bottom: .6rem; transition: color .2s; }
.footer-col a:hover { color: var(--white); }

.social-links { display: flex; gap: .75rem; margin-top: .75rem; align-items: center; }
.social-links a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.07); color: rgba(255,255,255,.4); transition: background .2s, color .2s; }
.social-links a:hover { background: var(--gold); color: var(--black); }
.social-links a svg { display: block; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom p { font-size: .75rem; color: rgba(255,255,255,.2); }
.footer-bottom > div:not(.legal-menu) { display: flex; gap: 1.5rem; }
.footer-bottom a { font-size: .72rem; color: rgba(255,255,255,.28); transition: color .2s; }
.footer-bottom a:hover { color: var(--white); }
.footer-dev-credit a { color: rgba(255,255,255,.28); text-decoration: none; transition: color .2s; }
.footer-dev-credit a:hover { color: rgba(255,255,255,.7); }

/* ══════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════ */

.btn-black {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--white);
  padding: .85rem 2rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 4px;
  border: 2px solid var(--black);
  transition: background .25s, transform .2s;
  cursor: pointer;
}

.btn-black:hover { background: var(--black-mid); transform: translateY(-2px); }

.btn-line {
  display: inline-flex;
  align-items: center;
  color: var(--black);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  border-bottom: 2px solid var(--black);
  padding-bottom: 2px;
  transition: border-color .25s, color .25s;
}
.btn-line:hover { color: var(--gold-dark); border-color: var(--gold-dark); }

.btn-line-dark {
  display: inline-flex;
  align-items: center;
  color: var(--black);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  border-bottom: 1px solid rgba(0,0,0,.25);
  padding-bottom: 2px;
  transition: color .25s, border-color .25s;
}
.btn-line-dark:hover { color: var(--gold-dark); border-color: var(--gold); }

.btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--black);
  padding: .9rem 2.25rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: background .25s, transform .2s;
}
.btn-white:hover { background: var(--off-white); transform: translateY(-2px); }

.btn-line-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: rgba(255,255,255,.65);
  padding: .9rem 1.75rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 4px;
  transition: border-color .25s, color .25s;
}
.btn-line-white:hover { border-color: rgba(255,255,255,.6); color: var(--white); }

.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--black);
  padding: .9rem 2.25rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 2px solid var(--black);
  border-radius: 4px;
  transition: background .25s, color .25s;
}
.btn-outline-dark:hover { background: var(--black); color: var(--white); }

.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: var(--black);
  padding: .85rem 2rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 4px;
  border: none;
  transition: background .25s, transform .2s;
  cursor: pointer;
}
.btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: var(--black);
  padding: .85rem 2rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 4px;
  border: none;
  transition: background .25s, transform .2s;
  cursor: pointer;
}
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--black);
  padding: .85rem 2rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 2px solid var(--border);
  border-radius: 4px;
  transition: border-color .25s, background .25s, color .25s;
}
.btn-outline:hover { border-color: var(--black); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: rgba(255,255,255,.6);
  padding: .85rem 1.75rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px;
  transition: border-color .25s, color .25s;
}
.btn-ghost:hover { border-color: rgba(255,255,255,.5); color: var(--white); }

/* ══════════════════════════════════════════════════════════════
   FLOATING WHATSAPP
   ══════════════════════════════════════════════════════════════ */

/* Desktop floating WhatsApp */
.float-wa {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 900;
  width: 60px;
  height: 60px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.4);
  animation: waPulse 2.5s ease infinite;
  transition: transform .25s;
}
.float-wa svg { width: 28px; height: 28px; fill: #fff; }
.float-wa:hover { transform: scale(1.1); }

@keyframes waPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,.4); }
  50%       { box-shadow: 0 4px 36px rgba(37,211,102,.7); }
}

/* Mobile sticky bottom bar */
.mobile-cta-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 950;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,.1);
  gap: .75rem;
}
.mobile-cta-bar a, .mobile-cta-bar button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-radius: 6px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}
.mobile-cta-bar .mcb-book { background: var(--gold); color: var(--black); }
.mobile-cta-bar .mcb-wa   { background: #25d366; color: #fff; }
.mobile-cta-bar svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

@media(max-width: 768px) {
  .float-wa { display: none; }
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: 80px; }
}

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

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }
.reveal-delay-3 { transition-delay: .36s; }

/* ══════════════════════════════════════════════════════════════
   INNER PAGES — SHARED COMPONENTS
   ══════════════════════════════════════════════════════════════ */

.page-header {
  background: var(--black);
  padding: 10rem 5vw 5rem;
  position: relative;
  overflow: hidden;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.page-header-content { max-width: 700px; }

.page-header .section-label { font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.25rem; display: block; }

.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.page-header > div > p,
.page-header-content > p { font-size: 1rem; color: rgba(255,255,255,.45); line-height: 1.7; }

/* ── SECTION ─────────────────────────────────────────────────── */

.section { padding: 5rem 5vw; }

.container { max-width: 1200px; margin: 0 auto; }

.section-header { text-align: center; margin-bottom: 4rem; }

.section-label { font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 1rem; display: block; }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  color: var(--black);
  margin-bottom: 1rem;
}

.section-desc { font-size: .95rem; color: var(--mid); max-width: 560px; margin: 0 auto; line-height: 1.75; }

/* ── ROOM CARDS ─────────────────────────────────────────────── */

.rooms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.room-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.room-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.room-card-img { height: 220px; position: relative; overflow: hidden; background-size: cover; background-position: center; }

.room-badge {
  position: absolute;
  top: 1rem; left: 1rem;
  background: var(--white);
  color: var(--black);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .35rem .8rem;
  border-radius: 3px;
}
.room-badge.badge-gold { background: var(--gold); color: var(--black); }

.room-card-body { padding: 1.75rem; }

.room-type { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: .5rem; display: block; }

.room-card-body h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; color: var(--black); margin-bottom: .75rem; }

.room-card-body p { font-size: .85rem; color: var(--mid); line-height: 1.7; margin-bottom: 1.25rem; }

.room-features { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }

.room-feature { font-size: .7rem; font-weight: 500; color: var(--mid); background: var(--off-white); padding: .25rem .7rem; border-radius: 20px; }

.room-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 1.25rem; border-top: 1px solid var(--border); }

.room-price .price-from { font-size: .65rem; color: var(--mid); display: block; }
.room-price strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--black); font-weight: 500; }
.room-price small { font-size: .72rem; color: var(--mid); }

/* ── AMENITIES ─────────────────────────────────────────────── */

.amenities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.amenity-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  transition: transform .3s, box-shadow .3s;
}
.amenity-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.amenity-icon { font-size: 2.5rem; margin-bottom: 1.25rem; }

.amenity-card h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; color: var(--black); margin-bottom: .75rem; }
.amenity-card p { font-size: .85rem; color: var(--mid); line-height: 1.7; }

/* ── CONFERENCE ─────────────────────────────────────────────── */

.conf-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }

.conf-info .section-label { text-align: left; }

.conf-info h2 { font-family: var(--font-display); font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 300; color: var(--black); margin: .5rem 0 1.25rem; }

.conf-info > p { font-size: .9rem; color: var(--mid); line-height: 1.75; margin-bottom: 2rem; }

.conf-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; padding: 1.5rem; background: var(--off-white); border-radius: var(--radius); }

.conf-spec { text-align: center; }
.conf-spec strong { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--black); font-weight: 500; }
.conf-spec span { font-size: .65rem; color: var(--mid); letter-spacing: .08em; text-transform: uppercase; }

.seating-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.seating-item { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); }
.seating-item span { font-size: .83rem; color: var(--mid); }
.seating-item strong { font-size: .83rem; color: var(--black); }

.business-hero-img { border-radius: var(--radius-xl); min-height: 400px; }

/* ── PACKAGES ───────────────────────────────────────────────── */

.packages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.package-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.package-card.featured { background: var(--black); border-color: var(--gold); color: var(--white); }
.package-card.featured h3, .package-card.featured .package-price { color: var(--white); }
.package-card.featured li { color: rgba(255,255,255,.65); border-bottom-color: rgba(255,255,255,.1) !important; }
.package-card.featured li::before { color: var(--gold) !important; }

.package-label { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dark); font-weight: 600; }

.package-card h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; color: var(--black); margin: .25rem 0; }

.package-price { font-family: var(--font-display); font-size: 2.5rem; font-weight: 300; color: var(--black); line-height: 1; margin: .5rem 0; }
.package-price small { font-family: var(--font-body); font-size: .75rem; color: var(--mid); font-weight: 400; }

.package-min { font-size: .73rem; color: var(--mid); }

.package-card ul { list-style: none; flex: 1; margin: 1rem 0; }

.package-card li { font-size: .85rem; color: var(--mid); padding: .4rem 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .5rem; }
.package-card li::before { content: '✓'; color: var(--gold-dark); font-weight: 700; font-size: .85rem; flex-shrink: 0; }

/* ── CATERING ───────────────────────────────────────────────── */

.catering-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.catering-item { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
.catering-item span { font-size: .88rem; color: var(--mid); }
.catering-item strong { font-size: .88rem; color: var(--black); font-weight: 600; }

/* ── CTA SECTION ────────────────────────────────────────────── */

.cta-section { background: var(--black); padding: 6rem 5vw; text-align: center; }
.cta-content { max-width: 680px; margin: 0 auto; }
.cta-section .section-label { color: rgba(255,255,255,.3); }
.cta-section h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 300; color: var(--white); margin-bottom: 1rem; }
.cta-section > .cta-content > p { font-size: .95rem; color: rgba(255,255,255,.4); margin-bottom: 2.5rem; line-height: 1.75; }

/* ── LEGAL ──────────────────────────────────────────────────── */

.legal-content { max-width: 800px; }

.legal-section { margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--border); }
.legal-section:last-child { border-bottom: none; }

.legal-section h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: var(--black); margin-bottom: 1.25rem; }

.legal-section p { font-size: .9rem; color: var(--mid); line-height: 1.85; margin-bottom: .75rem; }

.legal-address { font-size: .9rem; color: var(--mid); line-height: 2; padding: 1.5rem; background: var(--off-white); border-radius: var(--radius); border-left: 3px solid var(--gold); }

.legal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.legal-item { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.25rem; background: var(--off-white); border-radius: var(--radius-sm); }

.legal-label { font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--mid); font-weight: 600; }
.legal-item > span:last-child { font-size: .9rem; color: var(--black); }

/* ── USP LIST ───────────────────────────────────────────────── */

.usp-list { list-style: none; }
.usp-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: .9rem; color: var(--mid); padding: .5rem 0; border-bottom: 1px solid var(--border); }
.usp-list li:last-child { border-bottom: none; }
.usp-list li span:first-child { color: var(--gold-dark); font-weight: 700; flex-shrink: 0; }

/* ── ROOM DETAIL IMG ────────────────────────────────────────── */

.room-detail-img { min-height: 400px; background-size: cover; background-position: center; }

/* ── CONTACT ────────────────────────────────────────────────── */

.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }

.contact-info h2 { font-family: var(--font-display); font-size: 2rem; font-weight: 300; color: var(--black); margin-bottom: 1.5rem; }

.contact-details { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }

.contact-detail { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); }

.contact-icon { width: 42px; height: 42px; background: var(--off-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }

.contact-detail-text strong { display: block; font-size: .78rem; color: var(--mid); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .25rem; }
.contact-detail-text a, .contact-detail-text span { font-size: .95rem; color: var(--black); }

.contact-form-wrapper { background: var(--off-white); border-radius: var(--radius-xl); padding: 2.5rem; }
.contact-form-wrapper h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: var(--black); margin-bottom: 1.5rem; }

.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); margin-bottom: .5rem; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  color: var(--black);
  outline: none;
  transition: border-color .2s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--gold); }
.form-group textarea { resize: vertical; min-height: 120px; }

/* ── BOOKING ────────────────────────────────────────────────── */

.booking-layout { display: grid; grid-template-columns: 1fr 380px; gap: 3rem; align-items: start; }

.booking-form { background: var(--white); }

.step-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }

.step-num { width: 36px; height: 36px; background: var(--black); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; flex-shrink: 0; }
.step-num.inactive { background: var(--border); color: var(--mid); }

.step-header h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: var(--black); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.booking-summary { background: var(--off-white); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2rem; position: sticky; top: 100px; }

.booking-summary h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; margin-bottom: 1.5rem; }

.sum-room-img { height: 160px; border-radius: var(--radius); margin-bottom: 1.25rem; background-size: cover; background-position: center; }

.sum-lines { border-top: 1px solid var(--border); padding-top: 1rem; }

.sum-line { display: flex; justify-content: space-between; font-size: .85rem; color: var(--mid); padding: .4rem 0; }

.sum-total { display: flex; justify-content: space-between; padding: 1rem 0 0; border-top: 2px solid var(--black); margin-top: .5rem; font-weight: 700; font-size: 1rem; color: var(--black); }

/* ── GALLERY ────────────────────────────────────────────────── */

.gallery-filters { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3rem; }

.gallery-btn { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); background: var(--white); border: 1px solid var(--border); padding: .55rem 1.25rem; border-radius: 4px; cursor: pointer; transition: all .2s; }
.gallery-btn.active, .gallery-btn:hover { background: var(--black); color: var(--white); border-color: var(--black); }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.gallery-item { position: relative; overflow: hidden; border-radius: var(--radius); cursor: pointer; }

.gallery-item-img { height: 250px; background-size: cover; background-position: center; transition: transform .4s var(--ease); }
.gallery-item:hover .gallery-item-img { transform: scale(1.06); }

.gallery-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); display: flex; align-items: center; justify-content: center; transition: background .3s; }
.gallery-item:hover .gallery-overlay { background: rgba(0,0,0,.45); }

.gallery-zoom { color: var(--white); font-size: 2rem; opacity: 0; transform: scale(.7); transition: opacity .3s, transform .3s; }
.gallery-item:hover .gallery-zoom { opacity: 1; transform: scale(1); }

.lightbox { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.92); align-items: center; justify-content: center; }
.lightbox.open { display: flex; }

.lightbox-inner { max-width: 900px; width: 90%; background: var(--black); border-radius: var(--radius-lg); overflow: hidden; position: relative; }

.lightbox-img { height: 560px; background-size: cover; background-position: center; }

.lightbox-close { position: absolute; top: 1rem; right: 1rem; background: rgba(255,255,255,.15); border: none; color: var(--white); width: 40px; height: 40px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; transition: background .2s; }
.lightbox-close:hover { background: rgba(255,255,255,.3); }

/* ── LANGZEITMIETE ──────────────────────────────────────────── */

.price-tabs { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; width: fit-content; margin: 0 auto 3rem; }

.tab-btn { padding: .75rem 2rem; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: var(--white); border: none; cursor: pointer; transition: all .2s; color: var(--mid); }
.tab-btn.active { background: var(--black); color: var(--white); }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.pricing-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); }

.pricing-card-header { background: var(--black); padding: 2rem; text-align: center; }
.pricing-card-header h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; color: var(--white); margin-bottom: .25rem; }
.pricing-card-header span { font-size: .7rem; color: rgba(255,255,255,.35); letter-spacing: .1em; }

.pricing-card-body { padding: 2rem; }

.price-row { display: flex; justify-content: space-between; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--border); }
.price-row:last-child { border-bottom: none; }

.price-label { font-size: .85rem; color: var(--mid); }

.price-val { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--black); }

/* ── MAP PLACEHOLDER ────────────────────────────────────────── */

.map-placeholder { width: 100%; height: 380px; background: var(--off-white); border-radius: var(--radius-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; font-size: 3rem; border: 1px solid var(--border); }
.map-placeholder p { font-size: .85rem; color: var(--mid); text-align: center; }

/* ── HERO STATS (used on some inner pages) ──────────────────── */

.hero-stats { display: flex; gap: 2rem; flex-wrap: wrap; }

.stat { text-align: center; padding: 1.5rem 2rem; background: rgba(255,255,255,.06); border-radius: var(--radius); }

.stat-num { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--gold-light); font-weight: 300; }

.stat-label { display: block; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-top: .25rem; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .hero-split { grid-template-columns: 55% 45%; }
  .rooms-grid, .amenities-grid, .packages-grid { grid-template-columns: repeat(2, 1fr); }
  .conf-layout { grid-template-columns: 1fr; gap: 3rem; }
  .conf-specs { grid-template-columns: repeat(2, 1fr); }
  .booking-layout { grid-template-columns: 1fr; }
  .booking-summary { position: static; }
}

@media (max-width: 900px) {
  .navbar { padding: 1rem 1.5rem; }
  .navbar.scrolled, .navbar.navbar-dark { padding: .75rem 1.5rem; }
  .nav-links, .btn-nav { display: none; }
  .hamburger { display: flex; }

  .hero-split { display: block; position: relative; height: 100vh; height: 100svh; overflow: hidden; }
  .hs-right { position: absolute; inset: 0; min-height: unset; order: unset; }
  /* dunkler Basisfilter + starker Gradient von unten für Lesbarkeit */
  .hs-img { filter: brightness(.75); }
  .hs-right::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.7) 40%, rgba(0,0,0,.25) 70%, rgba(0,0,0,.05) 100%); pointer-events: none; }
  .hs-left { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 1.5rem 2.5rem; background: transparent; order: unset; z-index: 2; }
  .hs-tag  { color: var(--gold-light); border-color: rgba(255,255,255,.25); }
  .hs-title { color: var(--white); }
  .hs-sub { color: rgba(255,255,255,.7); }
  .hs-stats { display: none; }
  .hero-split .btn-line { color: var(--white); border-color: rgba(255,255,255,.5); }
  .hs-overlay-text { display: none; }
  .hs-scroll { display: none; }

  .book-bar-inner { flex-wrap: wrap; }
  .book-field { min-width: 45%; }

  .re-item, .re-item-reverse { grid-template-columns: 1fr; }
  .re-item-reverse .re-img { order: 0; }
  .re-item-reverse .re-info { order: 0; }
  .re-img { min-height: 280px; }
  .re-info { padding: 2.5rem 2rem; }

  .numbers-bar { grid-template-columns: 1fr 1fr; padding: 2.5rem 2rem; }
  .nb-div { display: none; }
  .nb-item { border-bottom: 1px solid rgba(255,255,255,.06); }

  .offers-grid { grid-template-columns: 1fr; }

  .se-inner { grid-template-columns: 1fr; }
  .se-icons { border-left: none; border-top: 1px solid var(--border); grid-template-columns: 1fr 1fr; }

  .breakfast-editorial, .location-editorial { grid-template-columns: 1fr; }
  .bfe-img { min-height: 240px; }
  .le-map { min-height: 280px; }

  .footer-ed-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .fe-links { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }

  .contact-layout { grid-template-columns: 1fr; }

  .rooms-grid { grid-template-columns: 1fr 1fr; }

  .legal-grid, .catering-grid { grid-template-columns: 1fr; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }

  .pricing-grid { grid-template-columns: 1fr; }

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

@media (max-width: 600px) {
  .hs-stats { flex-wrap: wrap; }
  .hs-stat-div { display: none; }
  .hs-title { font-size: clamp(2.5rem, 10vw, 4rem); }
  .cta-ed-title { font-size: clamp(4rem, 18vw, 8rem); }
  .section { padding: 3.5rem 1.5rem; }
  .page-header { padding: 8rem 1.5rem 3.5rem; }
  .rooms-grid, .amenities-grid, .packages-grid { grid-template-columns: 1fr !important; }
  .footer-grid, .fe-links { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .se-icons { grid-template-columns: 1fr; }
  .le-facts { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .conf-specs { grid-template-columns: repeat(2, 1fr); }
  .seating-grid { grid-template-columns: 1fr; }
  .numbers-bar { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   ROOMS PAGE — DETAIL CARDS
   ══════════════════════════════════════════════════════════════ */

.room-filter {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.filter-btn {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mid);
  background: var(--white);
  border: 1px solid var(--border);
  padding: .55rem 1.25rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all .2s;
  font-family: var(--font-body);
}

.filter-btn.active,
.filter-btn:hover { background: var(--black); color: var(--white); border-color: var(--black); }

.rooms-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.room-detail-card {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 380px;
  transition: box-shadow .3s var(--ease);
}

.room-detail-card:hover { box-shadow: var(--shadow-lg); }

.room-detail-card .room-detail-img {
  width: 42%;
  min-height: 380px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  position: relative;
}

.room-detail-badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--white);
  color: var(--black);
  padding: .4rem .9rem;
  border-radius: 3px;
}

.badge-gold { background: var(--gold) !important; color: var(--black) !important; }
.badge-silver { background: #c0c0c0 !important; color: var(--black) !important; }
.badge-dark { background: var(--black) !important; color: var(--white) !important; }

.room-detail-info {
  flex: 1;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}

.room-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.room-detail-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400;
  color: var(--black);
  margin-top: .25rem;
}

.room-detail-price { text-align: right; flex-shrink: 0; }
.room-detail-price span { display: block; font-size: .65rem; color: var(--mid); text-transform: uppercase; letter-spacing: .1em; }
.room-detail-price strong { font-family: var(--font-display); font-size: 2rem; color: var(--black); font-weight: 400; }
.room-detail-price small { font-size: .75rem; color: var(--mid); }

.room-detail-info > p {
  font-size: .88rem;
  color: var(--mid);
  line-height: 1.75;
}

.room-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.spec {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.spec-icon { font-size: 1.1rem; }

.spec div { display: flex; flex-direction: column; }
.spec strong { font-size: .83rem; color: var(--black); font-weight: 600; }
.spec small { font-size: .68rem; color: var(--mid); }

.room-amenities-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.room-amenities-list span {
  font-size: .72rem;
  color: var(--mid);
  background: var(--off-white);
  padding: .3rem .75rem;
  border-radius: 20px;
}

/* ══════════════════════════════════════════════════════════════
   BOOKING PAGE
   ══════════════════════════════════════════════════════════════ */

.booking-steps-bar {
  background: var(--off-white);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 5vw;
}

.booking-steps-bar .container { max-width: 1200px; margin: 0 auto; }

.steps {
  display: flex;
  align-items: center;
}

.step {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.step span {
  font-size: .8rem;
  color: var(--mid);
  letter-spacing: .04em;
}

.step.active span { color: var(--black); font-weight: 600; }

.step.active .step-num {
  background: var(--black) !important;
  color: var(--white) !important;
}

.step-line {
  flex: 1;
  height: 1px;
  background: var(--border);
  margin: 0 1.5rem;
  min-width: 40px;
}

.booking-section { padding: 3rem 5vw; }

.booking-step {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2.5rem;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

.booking-main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

.form-card h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--black);
  margin-bottom: 1.5rem;
}

.form-note { font-size: .83rem; color: var(--mid); margin-bottom: 1.25rem; line-height: 1.6; }

.duration-badge {
  display: inline-block;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem 1rem;
  font-size: .83rem;
  color: var(--mid);
  margin-top: .75rem;
}

/* Room Options */
.room-options { display: flex; flex-direction: column; gap: 1rem; }

.room-option { cursor: pointer; display: block; }

.room-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.room-option-content {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .2s, background .2s;
}

.room-option input:checked + .room-option-content {
  border-color: var(--gold);
  background: rgba(201,168,76,.05);
}

.room-option-img {
  width: 90px;
  height: 68px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}

.room-option-info { flex: 1; min-width: 0; }

.room-option-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .5rem;
}

.room-option-info h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--black);
  margin-bottom: .2rem;
}

.room-option-header > div > p {
  font-size: .75rem;
  color: var(--mid);
}

.room-option-price {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--black);
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: .2rem;
}

.room-option-price small {
  font-family: var(--font-body);
  font-size: .65rem;
  color: var(--mid);
  font-weight: 400;
  letter-spacing: .05em;
}

.room-option-price span {
  font-family: var(--font-body);
  font-size: .68rem;
  color: var(--mid);
}

.room-option-features {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.room-option-features span {
  font-size: .65rem;
  color: var(--mid);
  background: var(--off-white);
  padding: .18rem .55rem;
  border-radius: 20px;
}

.room-option-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--off-white);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: transparent;
  flex-shrink: 0;
  transition: all .2s;
}

.room-option input:checked + .room-option-content .room-option-check {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}

/* Extras */
.extras-grid { display: flex; flex-direction: column; gap: .75rem; }

.extra-option { cursor: pointer; display: block; }
.extra-option input { position: absolute; opacity: 0; width: 0; height: 0; }

.extra-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .2s, background .2s;
}

.extra-option input:checked + .extra-content {
  border-color: var(--gold);
  background: rgba(201,168,76,.04);
}

.extra-icon { font-size: 1.5rem; flex-shrink: 0; }

.extra-content > div { flex: 1; }
.extra-content strong { display: block; font-size: .88rem; color: var(--black); margin-bottom: .15rem; }
.extra-content small { font-size: .75rem; color: var(--mid); }

.extra-price { font-size: .82rem; font-weight: 600; color: var(--gold-dark); white-space: nowrap; }

/* Booking Sidebar */
.booking-sidebar { position: sticky; top: 100px; }

.summary-card {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
}

.summary-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--black);
  margin-bottom: 1.25rem;
}

.summary-room {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}

.summary-room-img {
  width: 70px;
  height: 56px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}

.summary-room strong { display: block; font-size: .9rem; color: var(--black); margin-bottom: .2rem; }
.summary-room small { font-size: .75rem; color: var(--mid); }

.summary-dates {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.summary-price-breakdown {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--mid);
}

.tax-row { font-size: .76rem; }

.summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 1rem;
}

.summary-note {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.summary-note span { font-size: .72rem; color: var(--mid); }

/* Form Actions & Misc */
.form-actions { display: flex; gap: 1rem; justify-content: flex-end; flex-wrap: wrap; }

.btn-full { width: 100%; justify-content: center; }

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .85rem;
  color: var(--mid);
  cursor: pointer;
  line-height: 1.6;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--gold);
}

.checkbox-label a { color: var(--gold-dark); text-decoration: underline; }

.card-icons { display: flex; gap: .5rem; margin-top: 1rem; }
.card-icon { padding: .3rem .75rem; border: 1px solid var(--border); border-radius: 4px; font-size: .68rem; font-weight: 700; color: var(--mid); letter-spacing: .05em; }

/* Confirmation Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.modal {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 3rem;
  max-width: 520px;
  width: 100%;
  text-align: center;
}

.modal-icon {
  width: 64px;
  height: 64px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--white);
  margin: 0 auto 1.5rem;
}

.modal h2 { font-family: var(--font-display); font-size: 2rem; font-weight: 400; color: var(--black); margin-bottom: .75rem; }

.modal > p { font-size: .9rem; color: var(--mid); line-height: 1.7; margin-bottom: 1.25rem; }

.confirmation-details {
  background: var(--off-white);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: left;
  margin-bottom: 1.25rem;
  font-size: .85rem;
  color: var(--mid);
  line-height: 1.8;
}

.modal-note { font-size: .82rem; color: var(--mid); margin-bottom: 1.5rem; }

.modal-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Responsive additions */
@media (max-width: 900px) {
  .room-detail-card { flex-direction: column; }
  .room-detail-card .room-detail-img { width: 100%; min-height: 240px; }
  .room-detail-header { flex-direction: column; gap: .5rem; }
  .room-detail-price { text-align: left; }
  .booking-step { grid-template-columns: 1fr; }
  .booking-sidebar { position: static; }
  .steps { flex-wrap: wrap; gap: .5rem; }
  .step-line { display: none; }
}

@media (max-width: 600px) {
  .room-option-content { flex-wrap: wrap; }
  .room-option-img { width: 100%; height: 140px; border-radius: var(--radius-sm); }
  .room-option-header { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════
   CSS VARIABLES — ADDITIONAL
   ══════════════════════════════════════════════════════════════ */

:root {
  --bg-soft: #f5f2ec;
  --bg-light: #f0ede6;
}

/* ══════════════════════════════════════════════════════════════
   LANGZEITMIETE PAGE
   ══════════════════════════════════════════════════════════════ */

.lt-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.lt-img {
  border-radius: var(--radius-xl);
  min-height: 480px;
  background-size: cover;
  background-position: center;
}

/* Price Tabs (alias for tab-btn) */
.price-tab {
  padding: .75rem 1.75rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--white);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .2s;
  color: var(--mid);
  font-family: var(--font-body);
}

.price-tab:first-child { border-radius: 4px 0 0 4px; }
.price-tab:last-child { border-radius: 0 4px 4px 0; }
.price-tab.active { background: var(--black); color: var(--white); border-color: var(--black); }

.price-table-header { margin-bottom: 1.5rem; }

.price-duration-badge {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--white);
  background: var(--black);
  padding: .5rem 1.25rem;
  border-radius: 4px;
}

/* LT Package Cards */
.lt-packages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.lt-package {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.lt-package:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.lt-package.featured {
  border-color: var(--gold);
  box-shadow: 0 4px 24px rgba(201,168,76,.15);
}

.lt-package-img {
  height: 180px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.lt-package-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .5rem;
}

.lt-package-body h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--black);
}

.lt-package-price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 300;
  color: var(--black);
  line-height: 1.1;
  margin: .25rem 0;
}

.lt-price-from { font-family: var(--font-body); font-size: .7rem; font-weight: 400; color: var(--mid); display: block; margin-bottom: .1rem; }

.lt-package-price small {
  font-family: var(--font-body);
  font-size: .75rem;
  color: var(--mid);
  font-weight: 400;
}

.lt-package-body > p {
  font-size: .82rem;
  color: var(--mid);
  line-height: 1.7;
}

.lt-package-body ul {
  list-style: none;
  flex: 1;
  margin: .5rem 0;
}

.lt-package-body li {
  font-size: .8rem;
  color: var(--mid);
  padding: .35rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .4rem;
}

.lt-package-body li:last-child { border-bottom: none; }

.lt-package-body li::before {
  content: '✓';
  color: var(--gold-dark);
  font-weight: 700;
  font-size: .75rem;
  flex-shrink: 0;
}

/* Cleaning Addon */
.cleaning-addon {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
}

.cleaning-addon-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.cleaning-addon-inner h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--black);
  margin-bottom: .5rem;
}

.cleaning-addon-inner p {
  font-size: .85rem;
  color: var(--mid);
  line-height: 1.7;
  max-width: 520px;
}

.cleaning-price {
  text-align: center;
  flex-shrink: 0;
  min-width: 120px;
}

.cleaning-price strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--black);
  line-height: 1;
}

.cleaning-price span {
  display: block;
  font-size: .8rem;
  color: var(--mid);
  margin-top: .25rem;
}

.cleaning-price small {
  font-size: .7rem;
  color: var(--light);
}

/* FAQ */
.faq-list { border-top: 1px solid var(--border); }

.faq-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.faq-item h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--black);
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  user-select: none;
}

.faq-item h4::after {
  content: '+';
  font-size: 1.2rem;
  color: var(--gold-dark);
  font-weight: 300;
  flex-shrink: 0;
  transition: transform .2s;
}

.faq-item.open h4::after {
  content: '−';
}

.faq-item p {
  font-size: .88rem;
  color: var(--mid);
  line-height: 1.8;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, margin-top .2s;
  margin-top: 0;
}

.faq-item.open p {
  max-height: 400px;
  margin-top: .6rem;
}

/* ══════════════════════════════════════════════════════════════
   AMENITIES PAGE
   ══════════════════════════════════════════════════════════════ */

.amenity-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
  border-bottom: 1px solid var(--border);
}

.amenity-feature:last-of-type { border-bottom: none; }

.amenity-feature-reverse .amenity-feature-img { order: 2; }
.amenity-feature-reverse .amenity-feature-info { order: 1; }

.amenity-feature-img {
  background-size: cover;
  background-position: center;
  min-height: 360px;
}

.amenity-feature-info {
  padding: 4rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.amenity-feature-info .section-label { text-align: left; }

.amenity-feature-info h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.5vw, 2.5rem);
  font-weight: 300;
  color: var(--black);
}

.amenity-feature-info > p {
  font-size: .88rem;
  color: var(--mid);
  line-height: 1.8;
}

.amenity-list { list-style: none; margin: .25rem 0; }

.amenity-list li {
  font-size: .85rem;
  color: var(--mid);
  padding: .4rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.amenity-list li:last-child { border-bottom: none; }

.amenity-list li::before {
  content: '→';
  color: var(--gold);
  flex-shrink: 0;
}

/* Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.service-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  transition: transform .25s, box-shadow .25s;
}

.service-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.service-item > span { font-size: 1.5rem; flex-shrink: 0; line-height: 1; }

.service-item strong { display: block; font-size: .85rem; color: var(--black); font-weight: 600; margin-bottom: .25rem; }

.service-item p { font-size: .78rem; color: var(--mid); line-height: 1.5; margin: 0; }

/* ══════════════════════════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════════════════════════ */

.contact-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}

.contact-item .contact-icon {
  width: 42px;
  height: 42px;
  background: var(--off-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.contact-item > div > strong {
  display: block;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: .35rem;
  font-weight: 600;
}

.contact-item > div > p {
  font-size: .92rem;
  color: var(--black);
  line-height: 1.6;
}

.contact-item > div > small {
  font-size: .75rem;
  color: var(--mid);
}

/* Fix map-placeholder font & map-inner styling */
.map-placeholder {
  font-size: 1rem !important;
  flex-direction: column;
  height: auto;
  min-height: 200px;
  padding: 2rem;
  gap: 0;
  align-items: center;
  justify-content: center;
}

.map-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.map-pin { font-size: 2.5rem; margin-bottom: .5rem; }

.map-inner p { font-size: .9rem; color: var(--mid); line-height: 1.65; margin: 0; }

.map-inner small { font-size: .78rem; color: var(--mid); display: block; }

/* Contact form wrap */
.contact-form-wrap { }

/* Toast notification */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: .75rem;
  background: #2d6a4f;
  color: var(--white);
  padding: 1rem 1.75rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: .88rem;
  white-space: nowrap;
}

.toast-icon { font-size: 1.1rem; }

/* ── Additional responsive ─────────────────────────────────── */
@media (max-width: 1100px) {
  .lt-packages { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .amenity-feature { grid-template-columns: 1fr; min-height: auto; }
  .amenity-feature-reverse .amenity-feature-img { order: 0; }
  .amenity-feature-reverse .amenity-feature-info { order: 0; }
  .amenity-feature-img { min-height: 240px; }
  .amenity-feature-info { padding: 2.5rem 2rem; }
}

@media (max-width: 900px) {
  .lt-intro { grid-template-columns: 1fr; }
  .lt-img { min-height: 240px; }
  .lt-packages { grid-template-columns: 1fr 1fr; }
  .cleaning-addon-inner { flex-direction: column; }
}

@media (max-width: 600px) {
  .lt-packages { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   ROOM DETAIL PAGES (ez.html, dz.html, fz.html)
   ══════════════════════════════════════════════════════════════ */

.room-hero {
  position: relative;
  height: 70vh;
  min-height: 480px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.room-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.room-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.25) 75%, rgba(0,0,0,.1) 100%);
}
.room-hero-img { filter: brightness(.72); }

.room-hero-content {
  position: relative;
  z-index: 1;
  padding: 3rem 5vw;
  width: 100%;
}

.room-hero-tag {
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .75rem;
  display: block;
}

.room-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  color: var(--white);
  margin-bottom: .5rem;
}

.room-hero-price {
  font-size: 1.1rem;
  color: rgba(255,255,255,.7);
}

.room-hero-price strong {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--white);
  font-weight: 400;
}

/* Gallery strip */
.room-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 180px;
  border-bottom: 1px solid var(--border);
}

.room-gallery-item {
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: opacity .25s;
  border-right: 2px solid var(--white);
}

.room-gallery-item:last-child { border-right: none; }
.room-gallery-item:hover { opacity: .85; }

/* Page layout */
.room-page-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 4rem;
  padding: 4rem 5vw;
  max-width: 1280px;
  margin: 0 auto;
  align-items: start;
}

.room-page-content h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--black);
  margin: 2rem 0 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}

.room-page-content h2:first-child { margin-top: 0; }

.room-page-content p {
  font-size: .92rem;
  color: var(--mid);
  line-height: 1.85;
  margin-bottom: 1rem;
}

/* Amenities checklist */
.room-amenities-check {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem .5rem;
  margin: 1rem 0;
}

.rac-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .85rem;
  color: var(--black);
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
}

.rac-item span:first-child {
  color: var(--gold-dark);
  font-weight: 700;
  font-size: .8rem;
  flex-shrink: 0;
}

/* Specs row */
.room-specs-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: var(--off-white);
  border-radius: var(--radius);
}

.rsr-item { text-align: center; }
.rsr-icon { font-size: 1.5rem; margin-bottom: .4rem; }
.rsr-val { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; color: var(--black); display: block; }
.rsr-label { font-size: .65rem; color: var(--mid); letter-spacing: .08em; text-transform: uppercase; }

/* Nearby grid */
.room-nearby-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin: 1rem 0;
}

.rng-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .85rem 1rem;
  background: var(--off-white);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--gold);
}

.rng-item span:first-child { font-size: .85rem; color: var(--black); }
.rng-item span:last-child { font-size: .78rem; color: var(--mid); font-weight: 600; }

/* Booking sidebar */
.room-booking-box {
  background: var(--black);
  border-radius: var(--radius-xl);
  padding: 2rem;
  position: sticky;
  top: 100px;
  color: var(--white);
}

.rbb-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--white);
  margin-bottom: 1.5rem;
}

.rbb-price {
  text-align: center;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 1.5rem;
}

.rbb-price-from { font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.4); display: block; margin-bottom: .25rem; }
.rbb-price-num { font-family: var(--font-display); font-size: 3rem; font-weight: 300; color: var(--gold-light); line-height: 1; }
.rbb-price-per { font-size: .78rem; color: rgba(255,255,255,.4); }

.rbb-info {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1.5rem;
}

.rbb-info-row {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
}

.rbb-info-row span:first-child { color: rgba(255,255,255,.45); }
.rbb-info-row span:last-child { color: var(--white); font-weight: 500; }

.rbb-cta {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.rbb-note {
  font-size: .7rem;
  color: rgba(255,255,255,.3);
  text-align: center;
  margin-top: .5rem;
}

/* Room page responsive */
@media (max-width: 900px) {
  .room-page-layout { grid-template-columns: 1fr; padding: 2.5rem 1.5rem; }
  .room-booking-box { position: static; }
  .room-gallery { grid-template-columns: repeat(2, 1fr); height: 240px; }
  .room-amenities-check { grid-template-columns: 1fr; }
  .room-specs-row { grid-template-columns: repeat(2, 1fr); }
  .room-nearby-grid { grid-template-columns: 1fr; }
  .room-hero { height: 50vh; }
}

/* Room detail link inside booking option */
.room-detail-link {
  display: inline-flex;
  align-items: center;
  margin-top: .6rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gold-dark);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
  pointer-events: all;
}

.room-detail-link:hover { color: var(--gold); border-color: var(--gold-light); }

/* ── VENDING MACHINE / AUTOMAT GRID ────────────────────────── */

.vending-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin-top: 1rem;
}

.vending-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}

.vi-emoji { font-size: 1.4rem; flex-shrink: 0; }

.vi-info { flex: 1; }
.vi-info strong { display: block; font-size: .83rem; color: var(--black); font-weight: 600; }
.vi-info small { font-size: .72rem; color: var(--mid); }

.vi-qty {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}

.vi-qty button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--off-white);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
  line-height: 1;
  color: var(--black);
}

.vi-qty button:hover { background: var(--black); color: var(--white); border-color: var(--black); }

.vi-qty span {
  font-size: .9rem;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
  color: var(--black);
}

@media (max-width: 600px) {
  .vending-grid { grid-template-columns: 1fr; }
}

/* ── VENDING CATEGORY FILTER ───────────────────────────────── */

.vc-cats {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}

.vc-btn {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .5rem 1.1rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--white);
  cursor: pointer;
  transition: all .2s;
  color: var(--mid);
  font-family: var(--font-body);
  white-space: nowrap;
}

.vc-btn.active,
.vc-btn:hover { background: var(--black); color: var(--white); border-color: var(--black); }

.vc-subcats {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .85rem 1rem;
  background: var(--off-white);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  border: 1px solid var(--border);
}

.vc-sub {
  font-size: .68rem;
  font-weight: 600;
  padding: .35rem .9rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--white);
  cursor: pointer;
  transition: all .2s;
  color: var(--mid);
  font-family: var(--font-body);
  white-space: nowrap;
}

.vc-sub.active,
.vc-sub:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }

@media (max-width: 600px) {
  .vc-cats, .vc-subcats { gap: .35rem; }
  .vc-btn { font-size: .66rem; padding: .45rem .85rem; }
  .vc-sub { font-size: .63rem; padding: .3rem .7rem; }
}

/* ── Rechtliches dropup (footer) ── */
.legal-menu { position: relative; }
.legal-menu-btn { background: none; border: none; color: rgba(255,255,255,.35); font-size: .72rem; cursor: pointer; font-family: var(--font-body); transition: color .2s; padding: 0; }
.legal-menu-btn:hover { color: var(--white); }
.legal-menu-dropdown { display: none; position: absolute; bottom: calc(100% + .5rem); right: 0; background: #1c1c1c; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: .5rem; min-width: 180px; box-shadow: 0 -8px 24px rgba(0,0,0,.4); z-index: 999; }
@media (max-width: 900px) {
  .legal-menu-dropdown { right: auto; left: 0; }
}
.legal-menu-dropdown.open { display: block; }
.legal-menu-dropdown a { display: block; font-size: .8rem; color: rgba(255,255,255,.6); padding: .55rem .85rem; border-radius: 4px; transition: background .15s, color .15s; text-decoration: none; }
.legal-menu-dropdown a:hover { background: rgba(255,255,255,.08); color: var(--white); }

/* ── Cookie Consent Banner ── */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #111;
  border-top: 1px solid rgba(255,255,255,.12);
  z-index: 9999;
  padding: 1.25rem 5vw;
  animation: cbSlideUp .4s ease;
}

#cookie-banner.cb-hide {
  animation: cbSlideDown .4s ease forwards;
}

@keyframes cbSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes cbSlideDown {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(100%); opacity: 0; }
}

.cb-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.cb-text { flex: 1; min-width: 260px; }

.cb-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--white);
  margin-bottom: .35rem;
}

.cb-text p {
  font-size: .78rem;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  margin: 0;
}

.cb-text a { color: var(--gold); text-decoration: none; }
.cb-text a:hover { text-decoration: underline; }

.cb-actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.cb-btn-accept {
  background: var(--gold);
  color: var(--black);
  border: none;
  padding: .65rem 1.4rem;
  font-size: .8rem;
  font-weight: 600;
  font-family: var(--font-body);
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
}
.cb-btn-accept:hover { background: var(--gold-dark); }

.cb-btn-necessary {
  background: transparent;
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.25);
  padding: .65rem 1.2rem;
  font-size: .8rem;
  font-family: var(--font-body);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  white-space: nowrap;
}
.cb-btn-necessary:hover { border-color: var(--white); color: var(--white); }

.cb-btn-decline {
  background: transparent;
  color: rgba(255,255,255,.4);
  border: none;
  padding: .65rem .75rem;
  font-size: .78rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: color .2s;
  white-space: nowrap;
}
.cb-btn-decline:hover { color: rgba(255,255,255,.75); }

@media (max-width: 600px) {
  .cb-inner { flex-direction: column; align-items: stretch; }
  .cb-actions { flex-direction: column; }
  .cb-btn-accept, .cb-btn-necessary, .cb-btn-decline { text-align: center; }
}

/* ── Floating Cookie Button ── */
#cookie-float-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1c1c1c;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.55);
  cursor: pointer;
  z-index: 9998;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  transition: transform .2s, background .2s, color .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
#cookie-float-btn:hover { transform: scale(1.1); background: #2a2a2a; color: var(--white); }


/* ══════════════════════════════════════════════════════════════
   WOW EFFECTS
   ══════════════════════════════════════════════════════════════ */

/* ── Page curtain ── */
#page-curtain {
  position: fixed; inset: 0; z-index: 99990; pointer-events: none;
  background: var(--black);
  transform-origin: bottom;
  transition: transform .9s cubic-bezier(.77,0,.18,1);
}
#page-curtain.curtain-open { transform: scaleY(0); }

/* ── Hero word reveal ── */
.hs-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: wordIn .8s cubic-bezier(.22,1,.36,1) forwards;
}
.hs-title .hs-word:nth-child(1) { animation-delay: .15s; }
.hs-title .hs-word:nth-child(2) { animation-delay: .32s; }
.hs-title em.hs-word            { animation-delay: .5s; }
@keyframes wordIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── 3D card tilt ── */
.room-card, .lt-package, .amenity-card, .room-detail-card {
  transition: transform .15s ease, box-shadow .15s ease;
  will-change: transform;
}
.room-card:hover       { box-shadow: 0 24px 64px rgba(0,0,0,.15); }
.lt-package:hover      { box-shadow: 0 24px 64px rgba(0,0,0,.12); }
.amenity-card:hover    { box-shadow: 0 16px 48px rgba(0,0,0,.1); }

/* ── Room card image zoom on hover ── */
.room-card-img, .room-detail-img, .re-img, .lt-package-img {
  overflow: hidden;
}
.room-card-img > *, .re-img > *,
.room-card .room-card-img,
.room-detail-img {
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.room-card:hover .room-card-img,
.room-detail-card:hover .room-detail-img {
  transform: scale(1.04);
}

/* ── Shimmer gold labels ── */
.shimmer-text {
  background: linear-gradient(90deg,
    var(--gold-dark) 0%,
    #fff3a0 35%,
    var(--gold) 50%,
    #fff3a0 65%,
    var(--gold-dark) 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer { to { background-position: 250% center; } }

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }
.reveal-delay-3 { transition-delay: .36s; }

/* ── Parallax hero image ── */
.hs-img, .room-hero-img { will-change: transform; }

/* ── Smooth image zoom all hero images ── */
.hs-right { overflow: hidden; }

/* ── Gold glow on hover for CTA buttons ── */
.btn-gold-solid:hover {
  box-shadow: 0 0 32px rgba(212,175,55,.45), 0 4px 16px rgba(0,0,0,.2);
}
.btn-black:hover {
  box-shadow: 0 0 24px rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.3);
}
.btn-nav:hover {
  box-shadow: 0 0 20px rgba(212,175,55,.3);
}

/* ── Google Maps Consent Wrapper ── */
.map-consent {
  position: absolute;
  inset: 0;
  background: #0d0d0d;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.map-consent-inner {
  text-align: center;
  max-width: 300px;
  padding: 2rem;
}
.map-consent-inner strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--white);
  font-weight: 400;
  margin-bottom: .6rem;
}
.map-consent-inner p {
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════════
   REVIEWS
   ══════════════════════════════════════════════════════════════ */

.reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
@media(max-width:900px) { .reviews-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:600px) { .reviews-grid { grid-template-columns: 1fr; } }

.review-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s, transform .25s;
}
.review-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.review-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .9rem;
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0;
  font-family: var(--font-body);
}

.review-meta { flex: 1; min-width: 0; }
.review-meta strong { display: block; font-size: .85rem; color: var(--black); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-meta-bottom { display: flex; align-items: center; gap: .5rem; margin-top: .2rem; }
.review-stars { color: #f5a623; font-size: .78rem; letter-spacing: .05em; line-height: 1; }
.review-date { font-size: .68rem; color: var(--light); }

.review-google-icon { width: 16px; height: 16px; flex-shrink: 0; }

.review-text {
  font-size: .85rem;
  color: var(--mid);
  line-height: 1.7;
  flex: 1;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE OPTIMISATION — comprehensive pass
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Logo */
  .logo-img { height: 46px; }
  .fe-logo  { height: 54px; }

  /* Touch targets */
  .btn-nav, .btn-mobile, .btn-gold-solid,
  .btn-primary, .btn-outline, .btn-black { min-height: 44px; }

  /* ── Book bar: 2-col grid (dates side by side), full-width zimmertyp + button */
  .book-bar-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .book-divider { display: none; }
  .book-field {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 1.1rem 1.25rem;
    min-width: 0;
  }
  /* Zimmertyp (5th child) + button: full width */
  .book-bar-inner > div:nth-child(5),
  .book-bar-inner > button {
    grid-column: 1 / -1;
  }
  .btn-gold-solid {
    width: 100%;
    min-height: 54px;
    border-radius: 0;
    font-size: .85rem;
  }

  /* Numbers bar — tighter spacing */
  .nb-item { padding: .85rem 1rem; }
  .nb-num  { font-size: clamp(1.8rem, 5vw, 3rem); }

  /* Statement section */
  .statement-section { padding: 5rem 2rem; min-height: auto; }

  /* CTA editorial */
  .cta-ed-content { padding: 4.5rem 2rem; }

  /* Section header */
  .section-header { margin-bottom: 2.5rem; }

  /* Footer padding */
  .footer-ed-top    { padding: 4rem 1.5rem; }
  .footer-ed-bottom { padding: 1.25rem 1.5rem; }

  /* Booking form — prevent horizontal overflow */
  .booking-section { overflow-x: hidden; padding: 2rem 1.25rem; }
  .booking-step    { max-width: 100%; }
  .form-card       { padding: 1.5rem; }
  .summary-card    { padding: 1.5rem; width: 100%; box-sizing: border-box; }
  .booking-sidebar { width: 100%; }
}

@media (max-width: 768px) {
  /* Langzeitmiete — 1 column (768px catches 2x-DPR phones) */
  .lt-packages { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
  /* Logo */
  .logo-img { height: 40px; }

  /* Hero — left panel */
  .hs-left { padding: 0 1.25rem 2.5rem; }
  .hs-sub  { font-size: .88rem; margin-bottom: 2rem; }
  .hs-actions { flex-direction: column; align-items: stretch; }
  .hs-actions > * { text-align: center; justify-content: center; }

  /* Hero stats — hidden on mobile (overlay hero has no room for stats) */
  .hs-stats { display: none !important; }
  .hs-stat-div { display: none; }

  /* Booking bar fields */
  .book-field { padding: .85rem 1rem; }

  /* Numbers bar */
  .numbers-bar  { padding: 2rem 1rem; }
  .nb-item      { padding: .65rem .5rem; }
  .nb-num       { font-size: clamp(1.6rem, 8vw, 2.6rem); }
  .nb-label     { font-size: .58rem; letter-spacing: .12em; }

  /* Section spacing */
  .section        { padding: 3rem 1.25rem; }
  .section-header { margin-bottom: 2rem; }

  /* Page header */
  .page-header { padding: 6.5rem 1.25rem 3rem; }

  /* CTA editorial */
  .cta-ed-title   { font-size: clamp(3rem, 15vw, 6rem); }
  .cta-ed-content { padding: 3.5rem 1.25rem; }
  .cta-ed-actions { flex-direction: column; align-items: center; }
  .cta-ed-actions > * { width: 100%; max-width: 300px; text-align: center; justify-content: center; }

  /* Booking steps */
  .step-num  { width: 28px; height: 28px; font-size: .72rem; }
  .step span { font-size: .68rem; letter-spacing: .04em; }
  .booking-steps-bar .container { padding: 0 1rem; }

  /* Booking form */
  .booking-section  { padding: 1.5rem 1rem; }
  .form-card        { padding: 1.25rem; border-radius: var(--radius); }
  .booking-main     { gap: 1rem; }
  .btn-full         { width: 100%; }
  .btn-primary.btn-full { margin-top: .5rem; }

  /* Room options in booking form */
  .room-option-content { gap: .75rem; }
  .room-option-img     { height: 110px; }
  .room-option-info    { padding: .5rem 0; }

  /* Footer */
  .footer-ed-top    { padding: 3rem 1.25rem; gap: 1.75rem; }
  .footer-ed-bottom { flex-direction: column; align-items: flex-start; gap: .65rem; padding: 1.25rem; }
  .fe-links         { grid-template-columns: 1fr 1fr; }

  /* Legal content */
  .legal-content table { font-size: .75rem; }

  /* Contact layout cards */
  .contact-info-card { padding: 1.5rem; }
}

@media (max-width: 420px) {
  .logo-img { height: 36px; }
  .hs-title { font-size: clamp(2.4rem, 11vw, 3.5rem); }
  .numbers-bar { grid-template-columns: 1fr 1fr; }
  .nb-num      { font-size: 1.5rem; }
  .fe-links    { grid-template-columns: 1fr; }
  .page-header h1 { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .step-line   { display: none; }
  .form-actions { flex-direction: column; }
  .form-actions > * { width: 100%; text-align: center; }
  .summary-card { padding: 1rem; }
}

/* ── Sub-page responsive grids ── */
@media (max-width: 768px) {
  .subpage-grid   { grid-template-columns: 1fr !important; }
  .subpage-grid-2 { grid-template-columns: 1fr !important; }
}