/* ============================================================
   HOTEL MIRAGE — Design System
   Dark luxury theme · gold accents · responsive (PC + Mobile)
   ============================================================ */

:root{
  /* palette */
  --bg:        #1b1510;
  --bg-2:      #120d09;
  --bg-3:      #0c0805;
  --panel:     rgba(38,30,22,.72);
  --panel-2:   rgba(28,22,16,.85);
  --line:      rgba(201,160,99,.30);
  --line-soft: rgba(201,160,99,.16);

  --gold:      #c9a063;
  --gold-1:    #e7cf9f;
  --gold-2:    #c9a063;
  --gold-3:    #a07b41;
  --gold-grad: linear-gradient(135deg,#e7cf9f 0%,#c9a063 52%,#a8824a 100%);

  --cream:     #f3e9d8;
  --text:      #ece3d4;
  --muted:     #b3a489;
  --dark-text: #241a10;

  /* type */
  --f-display: 'Cormorant Garamond', Georgia, serif;
  --f-logo:    'Cinzel', Georgia, serif;
  --f-ui:      'Jost', 'Segoe UI', system-ui, sans-serif;

  --radius:    18px;
  --radius-sm: 12px;
  --maxw:      1240px;
  --shadow:    0 24px 60px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-ui);
  color:var(--text);
  background:var(--bg-2);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
ul{margin:0;padding:0;list-style:none}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 34px}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;margin:0;line-height:1.1;color:var(--cream)}
.section-title{
  font-size:clamp(2rem,4vw,3.1rem);
  text-align:center;
  color:var(--gold-1);
  letter-spacing:.5px;
  margin-bottom:8px;
}
.section-title.left{text-align:left}
.eyebrow{
  font-family:var(--f-ui);
  text-transform:uppercase;
  letter-spacing:4px;
  font-size:.8rem;
  color:var(--gold);
  font-weight:500;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:none;border-radius:999px;
  padding:15px 34px;
  font-family:var(--f-ui);font-size:.95rem;font-weight:500;letter-spacing:.5px;
  transition:transform .2s ease,box-shadow .2s ease,opacity .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold-grad);color:var(--dark-text);box-shadow:0 10px 26px rgba(201,160,99,.28)}
.btn-gold:hover{box-shadow:0 16px 34px rgba(201,160,99,.4)}
.btn-outline{background:transparent;color:var(--gold-1);border:1px solid var(--line)}
.btn-outline:hover{border-color:var(--gold);background:rgba(201,160,99,.08)}
.btn-block{width:100%}
.btn-lg{padding:18px 40px;font-size:1.02rem}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:40;
}
.site-header.solid{position:sticky;background:linear-gradient(180deg,var(--bg) ,var(--bg-2));border-bottom:1px solid var(--line-soft)}
.header-inner{
  display:flex;align-items:center;justify-content:flex-start;
  height:84px;gap:16px;
}
.brand{display:flex;align-items:center;gap:15px}
/* script "Hm" mark: descender spikes live in the lower part of the image, so it needs
   a bigger box than the old square emblem plus a small optical down-shift */
.brand .emblem{width:auto;height:50px;flex:none;transform:translateY(2px)}
.brand .wordmark{
  font-family:var(--f-logo);font-weight:400;letter-spacing:1.28px;
  font-size:1.28rem;color:var(--cream);white-space:nowrap;
  position:relative;top:1px;
}
.main-nav{display:flex;align-items:center;gap:22px;margin-left:auto}
.main-nav a{
  font-family:var(--f-display);font-weight:500;
  font-size:.95rem;letter-spacing:.5px;color:var(--text);
  position:relative;padding:6px 0;transition:color .2s;
}
.main-nav a:hover{color:var(--gold-1)}
.main-nav a.active{color:var(--gold-1)}
.main-nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--gold-grad);
}
.header-right{display:flex;align-items:center;gap:10px}
.header-phone{display:flex;align-items:center;gap:6px;color:var(--gold-1);font-size:.8rem;white-space:nowrap}
.header-phone svg{width:16px;height:16px}

/* language dropdown */
.lang{position:relative}
.lang-toggle{
  display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--text);font-size:.85rem;
}
.lang-toggle .flag{width:20px;height:14px;border-radius:2px;object-fit:cover}
.lang-toggle .chev{width:12px;height:12px;transition:transform .2s}
.lang.open .chev{transform:rotate(180deg)}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 10px);min-width:150px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:8px;backdrop-filter:blur(14px);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s;
}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu button{
  display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;color:var(--text);
  padding:9px 10px;border-radius:8px;font-size:.88rem;text-align:left;
}
.lang-menu button:hover{background:rgba(201,160,99,.12);color:var(--gold-1)}
.lang-menu button{display:flex;align-items:center;gap:9px}
.lang-menu .flag{flex:none;width:21px;height:14px}
.lang-menu .flag svg,.lang-toggle .flag svg{width:100%;height:100%;display:block}
.flag{width:22px;height:15px;border-radius:2px;display:inline-block;overflow:hidden}
.inline-lang .lang-toggle{background:none;border:none;padding:6px 2px;gap:8px}
.inline-lang .lang-toggle:hover{color:var(--gold-1)}
.inline-lang .flag{width:25px;height:16px}

/* hamburger (mobile only) */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:6px}
.hamburger span{width:26px;height:2px;background:var(--gold-1);border-radius:2px;transition:.3s}
.icon-btn{
  width:42px;height:42px;border-radius:50%;display:none;align-items:center;justify-content:center;
  background:var(--gold-grad);color:var(--dark-text);border:none;
}
.icon-btn svg{width:18px;height:18px}

/* mobile drawer */
.drawer-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);
  z-index:60;opacity:0;visibility:hidden;transition:.3s;
}
.drawer-backdrop.open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(420px,86vw);z-index:70;
  background:linear-gradient(180deg,#2a2118,#1c1510);
  border-left:1px solid var(--line);box-shadow:-20px 0 50px rgba(0,0,0,.5);
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;padding:22px 24px;overflow-y:auto;
}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.drawer-head .brand .wordmark{font-size:1.1rem}
.drawer-close{background:none;border:none;color:var(--gold-1);font-size:1.6rem;line-height:1}
.drawer-nav a{
  display:flex;align-items:center;gap:18px;padding:18px 4px;font-size:1.15rem;
  border-bottom:1px solid var(--line-soft);color:var(--text);
}
.drawer-nav a .ic{width:26px;height:26px;color:var(--gold)}
.drawer-nav a:hover,.drawer-nav a.active{color:var(--gold-1)}
.drawer-contact{margin-top:22px;display:flex;flex-direction:column;gap:16px}
.drawer-contact .row{display:flex;align-items:center;gap:14px;font-size:1rem}
.drawer-contact .ic{width:26px;height:26px;color:var(--gold)}
.drawer-foot{margin-top:auto;padding-top:20px;display:flex;gap:10px;font-size:.85rem;color:var(--muted)}
.drawer-foot a{text-decoration:underline}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:#252423;border-top:2px solid rgba(129,114,90,.7);
  padding:22px 0;margin-top:0;
}
.site-footer .container{padding:0 45px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.82rem;color:#cfccc7}
.footer-inner a{color:#cfccc7}
.footer-inner a:hover{color:var(--gold-1)}
.footer-center a[href^="tel"]{color:#c8a06a}
/* three equal thirds so the middle group is truly viewport-centred (as in mockup) */
.footer-links{display:flex;gap:24px;flex:1 1 0}
.footer-center{display:flex;gap:24px;flex:1 1 0;justify-content:center}
.footer-inner > div:last-child{flex:1 1 0;text-align:right}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  background:var(--bg-2);overflow:hidden;
}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(12,8,5,.82) 0%,rgba(12,8,5,.45) 45%,rgba(12,8,5,.35) 100%)}
.hero .container{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:60px}
.hero-copy .eyebrow{margin-bottom:11px;display:block;letter-spacing:3.5px}
.hero-title{
  font-family:var(--f-display);font-weight:600;color:#fff;
  font-size:clamp(3.4rem,9vw,7rem);line-height:.98;letter-spacing:1px;
  text-shadow:0 8px 40px rgba(0,0,0,.5);
}
.hero-title span{display:block}

/* ============================================================
   BOOKING BAR
   ============================================================ */
.booking-bar{
  position:relative;z-index:5;margin-top:48px;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  backdrop-filter:blur(16px);box-shadow:var(--shadow);
  display:flex;align-items:stretch;padding:10px;gap:6px;max-width:920px;
}
.bb-field{
  flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:12px 22px;border-radius:999px;cursor:pointer;position:relative;transition:background .2s;
}
.bb-field:hover{background:rgba(201,160,99,.08)}
.bb-field + .bb-field{border-left:1px solid var(--line-soft)}
.bb-label{text-transform:uppercase;letter-spacing:2px;font-size:.62rem;color:var(--gold)}
.bb-value{font-size:1rem;color:var(--cream)}
.bb-value.bb-empty{color:rgba(243,233,216,.5)}
.hero-screen .bb-value.bb-empty{color:rgba(255,255,255,.55)}
.bb-search{flex:none;align-self:center}

/* dropdown panels (calendar / guests) */
.dropdown{
  position:absolute;z-index:30;top:calc(100% + 14px);
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  backdrop-filter:blur(18px);box-shadow:var(--shadow);padding:20px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.22s;
}
.dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-cal{left:111px;top:calc(100% + 20px);display:flex;flex-direction:column;gap:16px;
  padding:22px 17px 40px;border-radius:14px;
  background:rgba(24,18,11,.74);border:1px solid rgba(201,160,99,.5);backdrop-filter:blur(20px)}
.dropdown-cal::after{content:"";position:absolute;top:-9px;left:34px;width:17px;height:17px;
  background:rgba(24,18,11,.82);border-left:1px solid rgba(201,160,99,.5);border-top:1px solid rgba(201,160,99,.5);transform:rotate(45deg)}
/* on home the calendar opens UPWARD above the bar (mockup pc_01) */
.hero-screen .dropdown-cal::after{top:auto;bottom:-9px;border:none;
  border-right:1px solid rgba(201,160,99,.5);border-bottom:1px solid rgba(201,160,99,.5)}
.cal-months{display:flex;gap:14px}
.cal-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line-soft);padding-top:14px}
.cal-foot .rng{font-size:.85rem;color:var(--text)}
.cal-foot .rng b{color:var(--gold-1)}
/* guests dropdown — mockup 192001: panel W180 H220 anchored above the Guests field, tail down */
.dropdown-guests{left:auto;right:190px;width:216px;padding:13px 15px;border-radius:14px;
  background:rgba(24,18,11,.78);border:1px solid rgba(201,160,99,.5);backdrop-filter:blur(18px)}
.dropdown-guests::after{content:"";position:absolute;bottom:-9px;left:50%;margin-left:-8px;width:16px;height:16px;
  background:rgba(24,18,11,.86);border-right:1px solid rgba(201,160,99,.5);border-bottom:1px solid rgba(201,160,99,.5);transform:rotate(45deg)}
.gd-head{font-family:var(--f-ui);color:#d3ab64;font-size:.92rem;line-height:1.2;padding-bottom:8px;margin-bottom:2px;border-bottom:1px solid rgba(201,160,99,.4)}

/* calendar — matches mockup (muted gold header, sans title, light DOW, translucent cells) */
.cal{width:326px}
.cal-head{position:relative;height:34px;margin-bottom:6px;border-radius:8px;
  background:linear-gradient(180deg,#c4a65f,#b18d4b);
  display:flex;align-items:center;justify-content:center}
.cal-title{font-family:var(--f-ui);font-size:1.3rem;font-weight:500;color:#f7ecd6;letter-spacing:.4px}
.cal-nav{position:absolute;top:0;bottom:0;width:42px;background:none;border:none;color:#f7ecd6;
  font-size:1.45rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cal-nav.prev{left:0}.cal-nav.next{right:0}
.cal-nav:hover{color:#fff}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dow{text-align:center;font-size:1rem;line-height:19px;font-family:var(--f-ui);color:#d7c8ad;padding:1px 0 2px;letter-spacing:.3px}
.cal-day{aspect-ratio:1;border-radius:8px;border:1px solid transparent;background:rgba(38,30,24,.62);color:#fbf3e4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:var(--f-ui);cursor:pointer;transition:background .15s}
.cal-day .cal-d{font-size:.9rem;font-weight:400}
.cal-day .price{font-size:.62rem;color:#c6a877}
.cal-day:hover{background:rgba(176,142,84,.5)}
.cal-day.muted{background:none;border-color:transparent;pointer-events:none}
.cal-day.past{background:none;border-color:transparent;color:rgba(251,243,228,.24);pointer-events:none;cursor:default}
.cal-day.past .cal-d{font-weight:400;text-decoration:line-through;text-decoration-thickness:1px}
.cal-day.past .price{display:none}
.cal-day.in-range{background:rgba(178,146,88,.42);border-color:rgba(220,190,130,.35);color:#f3e7cd}
.cal-day.in-range .price{color:#e3cfa0}
.cal-day.sel{background:linear-gradient(180deg,#d8b461,#c39f4c);border-color:rgba(255,238,190,.5);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.cal-day.sel .cal-d{font-weight:600}
.cal-day.sel .price{color:#6b5220}

/* guests stepper */
.guest-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgba(201,160,99,.28)}
.guest-row .stepper{flex:none}
.guest-row:last-of-type{border-bottom:none}
.guest-row .g-name{font-size:.9rem;line-height:1.25;color:#f4eee2}
.guest-row .g-sub{font-size:.66rem;line-height:1.25;color:#bdb4a2}
.stepper{display:flex;align-items:center;gap:10px}
.stepper button{
  width:29px;height:29px;border-radius:50%;border:none;
  background:linear-gradient(180deg,#d5b672,#bd9a55);color:#3a2c14;font-size:1.05rem;line-height:1;font-weight:600;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.stepper button:hover{filter:brightness(1.1)}
.stepper .val{min-width:16px;text-align:center;font-size:.95rem;color:#f4eee2}
.dropdown .apply{margin-top:13px;padding:8px;font-size:.9rem;border-radius:999px;
  background:linear-gradient(180deg,#e0c07c,#c3a057);color:#33260f}

/* ============================================================
   SECTIONS / GENERIC
   ============================================================ */
.section{padding:90px 0}
.section.tight{padding:60px 0}
.page-hero{
  position:relative;padding:150px 0 60px;min-height:46vh;display:flex;align-items:flex-end;
  background-size:cover;background-position:center;
}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,8,5,.7),rgba(12,8,5,.92))}
.page-hero .container{position:relative;z-index:2}

/* ============================================================
   ROOM CARDS (listing)
   ============================================================ */
.rooms-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.room-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;backdrop-filter:blur(10px);transition:transform .25s,border-color .25s;
}
.room-card:hover{transform:translateY(-4px);border-color:var(--gold)}
.carousel{position:relative;aspect-ratio:16/10;overflow:hidden;touch-action:pan-y}
.carousel .slides{display:flex;height:100%;transition:transform .4s ease}
.carousel .slides img{min-width:100%;height:100%;object-fit:cover}
.carousel .c-btn{
  position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  background:rgba(12,8,5,.5);border:1px solid var(--line);color:var(--gold-1);font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);
}
.carousel .c-prev{left:12px}.carousel .c-next{right:12px}
.carousel .dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:7px}
.carousel .dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);transition:.2s}
.carousel .dots i.on{background:var(--gold-1);width:20px;border-radius:6px}
.carousel .count{position:absolute;right:12px;bottom:12px;background:rgba(12,8,5,.6);color:#fff;
  font-size:.72rem;padding:3px 10px;border-radius:999px}
.room-body{padding:22px 24px 26px}
.room-body h3{font-size:1.7rem;color:var(--cream)}
.room-meta{display:flex;align-items:center;gap:16px;color:var(--muted);font-size:.86rem;margin:8px 0 16px}
.room-meta .m{display:flex;align-items:center;gap:6px}
.room-meta svg{width:16px;height:16px;color:var(--gold)}
.room-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.price{font-family:var(--f-ui);color:var(--muted);font-size:.88rem}
.price b{font-family:var(--f-display);font-size:1.7rem;color:var(--gold-1);font-weight:600}

/* search summary bar (rooms page) */
.search-summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:14px 26px;
  backdrop-filter:blur(10px);flex-wrap:wrap;
}
.search-summary .sum{color:var(--text);font-size:.95rem}
.search-summary a{color:var(--gold-1);text-decoration:underline}

/* vertical room panels */
.room-panels{display:flex;gap:14px;height:74vh;min-height:520px}
.room-panel{
  position:relative;flex:1;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  transition:flex .45s cubic-bezier(.4,0,.2,1);
}
.room-panel:hover{flex:2.4}
.room-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.room-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.8))}
.room-panel .pinfo{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px;text-align:center}
.room-panel .pinfo h3{font-size:1.7rem;color:#fff}
.room-panel .pinfo .pm{color:var(--gold-1);font-size:.84rem;margin-top:6px;display:flex;gap:14px;justify-content:center}

/* ============================================================
   ROOM DETAIL
   ============================================================ */
.detail-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:start;margin-top:30px}
.gallery-main{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.gallery-main .carousel{aspect-ratio:4/3}
.thumb-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.thumb-strip img{aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--line-soft);cursor:pointer;opacity:.7;transition:.2s}
.thumb-strip img:hover,.thumb-strip img.on{opacity:1;border-color:var(--gold)}
.detail-panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px;backdrop-filter:blur(10px);
}
.detail-panel h2{font-size:2.4rem;color:var(--gold-1)}
.detail-panel .sub{color:var(--muted);margin:8px 0 18px;font-size:.92rem}
.detail-panel p.desc{color:var(--text);font-weight:300;font-size:.96rem;margin-bottom:24px}
.amenities{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 12px;margin-bottom:26px}
.amenity{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--text);font-size:.78rem}
.amenity[hidden]{display:none !important}
.amenity svg{width:26px;height:26px;color:var(--gold)}
.detail-price{border-top:1px solid var(--line-soft);padding-top:20px;margin-bottom:20px}
.detail-price .row{color:var(--muted);font-size:.84rem;margin-top:8px}

/* amenity chips (mobile-style) */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font-size:.82rem;color:var(--text)}
.chip svg{width:16px;height:16px;color:var(--gold)}

/* ============================================================
   GALLERY
   ============================================================ */
.filter-bar{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:30px 0 36px}
.filter-bar button{
  display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:10px 22px;color:var(--text);font-size:.88rem;transition:.2s;
}
.filter-bar button svg{width:16px;height:16px;color:var(--gold)}
.filter-bar button.active{background:var(--gold-grad);color:var(--dark-text);border-color:transparent}
.filter-bar button.active svg{color:var(--dark-text)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery-grid figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line-soft);position:relative;aspect-ratio:4/3}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gallery-grid figure:hover img{transform:scale(1.07)}
.gallery-grid figure.hide{display:none}

/* ============================================================
   BREAKFAST / CAFE
   ============================================================ */
.cafe-hero{position:relative;border-radius:var(--radius);overflow:hidden;min-height:360px;display:flex;align-items:center;justify-content:center;text-align:center}
.cafe-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cafe-hero::after{content:"";position:absolute;inset:0;background:rgba(12,8,5,.45)}
.cafe-hero .ch-copy{position:relative;z-index:2}
.cafe-hero h1{font-size:clamp(2.6rem,6vw,4.4rem);color:#fff}
.cafe-hero p{color:var(--gold-1);letter-spacing:3px;text-transform:uppercase;font-size:.8rem;margin-top:8px}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:50px}
.menu-col h3{font-size:1.4rem;color:var(--gold-1);text-transform:uppercase;letter-spacing:1px;font-family:var(--f-display);margin-bottom:20px;border-bottom:1px solid var(--line-soft);padding-bottom:10px}
.menu-item{display:flex;gap:14px;margin-bottom:18px}
.menu-item img{width:74px;height:74px;border-radius:10px;object-fit:cover;flex:none}
.menu-item .mi-name{color:var(--cream);font-size:1rem}
.menu-item .mi-desc{color:var(--muted);font-size:.82rem}
.hours-list .hrow{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line-soft);color:var(--text)}
.hours-list .hrow span:last-child{color:var(--gold-1)}
.feature-bar{display:flex;justify-content:center;gap:50px;flex-wrap:wrap;margin-top:54px;padding-top:30px;border-top:1px solid var(--line-soft)}
.feature-bar .f{display:flex;align-items:center;gap:10px;color:var(--text);font-size:.92rem}
.feature-bar svg{width:20px;height:20px;color:var(--gold)}

/* ============================================================
   CONFERENCE
   ============================================================ */
.conf-hero-copy{max-width:560px}
.conf-hero-copy h1{font-size:clamp(2.6rem,6vw,4.2rem);color:#fff;margin:10px 0 18px}
.conf-hero-copy p{color:var(--text);margin-bottom:26px}
.info-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:40px}
.info-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;backdrop-filter:blur(10px)}
.info-card .ic-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.info-card .ic-head .badge{width:46px;height:46px;border-radius:50%;background:var(--gold-grad);display:flex;align-items:center;justify-content:center}
.info-card .ic-head .badge svg{width:24px;height:24px;color:var(--dark-text)}
.info-card .ic-head h3{font-size:1.5rem;color:var(--gold-1)}
.info-card img{border-radius:var(--radius-sm);margin-bottom:18px;aspect-ratio:16/10;object-fit:cover;width:100%}
.info-card .feat{display:flex;align-items:center;gap:12px;padding:10px 0;color:var(--text)}
.info-card .feat svg{width:20px;height:20px;color:var(--gold);flex:none}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:30px}
.contact-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:34px;backdrop-filter:blur(10px)}
.contact-row{display:flex;align-items:flex-start;gap:18px;padding:18px 0;border-bottom:1px solid var(--line-soft)}
.contact-row:last-child{border-bottom:none}
.contact-row .badge{width:50px;height:50px;border-radius:14px;background:var(--gold-grad);display:flex;align-items:center;justify-content:center;flex:none}
.contact-row .badge svg{width:24px;height:24px;color:var(--dark-text)}
.contact-row .ct-label{color:var(--gold-1);font-size:1.05rem}
.contact-row .ct-val{color:var(--text);font-size:.92rem}
.contact-map{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);min-height:280px;position:relative}
.contact-map img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

/* interactive map (Leaflet) */
#hm-map{height:400px;width:100%;background:#1a1a1a;z-index:1}
#hm-map .leaflet-control-attribution{background:rgba(20,15,10,.7);color:#b3a489}
#hm-map .leaflet-control-attribution a{color:var(--gold-1)}
#hm-map .leaflet-bar a{background:var(--panel-2);color:var(--gold-1);border-bottom-color:var(--line)}
#hm-map .leaflet-bar a:hover{background:rgba(201,160,99,.18)}
.hm-pin{display:flex;align-items:center;justify-content:center;width:38px;height:48px;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.leaflet-popup-content{font-family:var(--f-ui);margin:14px 18px}
.leaflet-popup-content b{font-family:var(--f-display);color:var(--gold-1);font-size:1.15rem;display:block;margin-bottom:4px}
.leaflet-popup-content a{color:var(--gold-1);text-decoration:underline}
.leaflet-container a.leaflet-popup-close-button{color:var(--gold-1)}
.map-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}

/* forms */
.form-field{position:relative;margin-bottom:16px}
.form-field input,.form-field textarea{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;
  padding:15px 18px;color:var(--text);font-family:var(--f-ui);font-size:.95rem;transition:border-color .2s;
}
.form-field.with-icon input{padding-left:46px}
.form-field .fi-ic{position:absolute;left:16px;top:16px;width:18px;height:18px;color:var(--gold)}
.form-field textarea{min-height:130px;resize:vertical}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--gold)}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--muted)}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ============================================================
   BOOKING FLOW
   ============================================================ */
.stepper-bar{
  background:linear-gradient(90deg,rgba(201,160,99,.16),rgba(201,160,99,.05));
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.stepper-bar .container{display:flex;justify-content:center;gap:34px;padding:16px 24px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.95rem}
.step b{font-weight:500}
.step.active{color:var(--gold-1)}
.step.done{color:var(--gold)}
.step .tick{color:var(--gold)}

.booking-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:34px;align-items:start;margin-top:24px}
.booking-main{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:32px;backdrop-filter:blur(10px)}
.summary-card{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:28px;position:sticky;top:24px}
.summary-card h3{font-family:var(--f-display);font-size:1.6rem;color:var(--gold-1);margin-bottom:18px}
.sum-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;color:var(--text);font-size:.92rem}
.sum-row .lbl{color:var(--muted)}
.sum-divider{border-top:1px solid var(--line-soft);margin:12px 0}
.sum-total{display:flex;justify-content:space-between;font-family:var(--f-display);font-size:1.5rem;color:var(--gold-1);padding-top:10px;border-top:1px solid var(--line);margin-top:8px}
/* PAngV: "inkl. MwSt." notice under total prices in the booking funnel */
.tax-note{font-size:.72rem;color:#b5ab99;margin-top:4px;text-align:right;line-height:1.3}
.tax-note-list{text-align:left;margin:14px 2px 0}

/* extras */
.extra-row{
  display:flex;align-items:center;gap:18px;padding:18px 20px;margin-bottom:14px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;
}
.extra-row .e-ic{width:34px;height:34px;color:var(--gold);flex:none}
.extra-row .e-body{flex:1}
.extra-row .e-name{color:var(--cream);font-size:1.02rem}
.extra-row .e-desc{color:var(--muted);font-size:.82rem}

/* toggle switch */
.switch{position:relative;width:52px;height:28px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .track{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid var(--line);transition:.25s}
.switch .track::before{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#cdb49a;transition:.25s}
.switch input:checked + .track{background:var(--gold-grad);border-color:transparent}
.switch input:checked + .track::before{transform:translateX(24px);background:#fff}

.persons-mini{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.persons-mini .pm-label{font-size:.66rem;text-transform:uppercase;letter-spacing:1px;color:var(--gold)}

/* confirmation */
.confirm-card{max-width:560px;margin:0 auto;text-align:center;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:46px 38px;backdrop-filter:blur(12px)}
.confirm-check{width:84px;height:84px;border-radius:50%;background:var(--gold-grad);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.confirm-check svg{width:42px;height:42px;color:var(--dark-text)}
.confirm-card h2{font-size:2.4rem;color:var(--gold-1)}
.confirm-card .thanks{color:var(--text);margin:6px 0 4px}
.confirm-card .bnr{color:var(--gold-1);font-weight:500;margin:14px 0}
.confirm-summary{text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--line-soft);border-radius:14px;padding:22px;margin:22px 0}
.confirm-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

.secure-pay{display:flex;align-items:center;justify-content:space-between;margin-top:20px;color:var(--muted);font-size:.85rem;flex-wrap:wrap;gap:10px}
.secure-pay .lock{display:flex;align-items:center;gap:8px}
.secure-pay .cards{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.secure-pay .cards span{background:rgba(255,255,255,.9);color:#1a1a1a;font-weight:700;font-size:.66rem;padding:4px 8px;border-radius:5px;letter-spacing:.5px}
.secure-pay .cards img.card-logo{height:26px;width:38px;object-fit:contain;background:#fff;border-radius:4px;padding:2px 4px;box-sizing:border-box;display:block}

/* ============================================================
   RESPONSIVE
   ============================================================ */
.show-mobile,.show-mobile-i{display:none}
.br-m{display:none}
/* desktop: force-hide mobile-only bits — beats higher-specificity display rules
   (e.g. .sp-meta > span) that would otherwise reveal them */
@media(min-width:861px){
  .show-mobile,.show-mobile-i,.bb-ic,.bb-chev{display:none !important}
}
/* booking-bar mobile-only bits, hidden on desktop */
.bb-ic,.bb-chev{display:none}
.bb-text{display:contents}
/* booking-details mobile-only bits */
.booking-screen .form-field .fi-ic{display:none}
.booking-screen .form-field input::placeholder{color:transparent}

@media(max-width:1024px){
  .rooms-grid{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
  .booking-grid{grid-template-columns:1fr}
  .summary-card{position:static}
  .cols-3{grid-template-columns:1fr;gap:34px}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:860px){
  .main-nav,.header-phone{display:none}
  .hamburger,.icon-btn{display:flex}
  /* mobile header (mockups app2): phone in outlined gold circle | divider | lang pill | burger */
  .container{padding:0 16px}
  .header-inner{height:62px;gap:10px}
  .brand{gap:9px}
  .brand .emblem{height:38px;transform:translateY(4px)}
  .brand .wordmark{font-size:.88rem;letter-spacing:1px}
  .header-right{margin-left:auto;gap:9px}
  .icon-btn{order:1;width:34px;height:34px;background:#c9a670;border:none;color:#33271a}
  .icon-btn svg{width:15px;height:15px}
  .inline-lang{order:2;display:flex;align-items:center}
  .inline-lang::before{content:"";width:1px;height:20px;background:rgba(201,160,99,.35);margin-right:9px}
  .inline-lang .lang-toggle{border:1px solid var(--line);border-radius:999px;padding:3px 9px;gap:5px;background:rgba(255,255,255,.04)}
  .inline-lang .flag{width:19px;height:13px}
  .inline-lang .chev{width:10px;height:10px}
  .lang-cur{font-size:.78rem}
  .hamburger{order:3}
  .booking-bar{flex-direction:column;border-radius:24px;max-width:100%}
  .bb-field + .bb-field{border-left:none;border-top:1px solid var(--line-soft)}
  .bb-field{border-radius:14px;padding:14px 18px}
  .bb-search .btn{width:100%}
  .dropdown-cal{flex-direction:column;left:0;right:0}
  .cal-months{flex-direction:column}
  .dropdown{position:fixed;left:16px;right:16px;top:auto;bottom:16px;max-height:86vh;overflow:auto}
  .cal{width:100%}
  .contact-grid{grid-template-columns:1fr}
  .info-cards{grid-template-columns:1fr}
  .form-2col{grid-template-columns:1fr}
  .room-panels{flex-direction:column;height:auto}
  .room-panel{height:200px}
  .room-panel:hover{flex:1}
  .show-mobile{display:block}
  .show-mobile-i{display:inline}
  .hide-mobile{display:none !important}
  .feature-bar{gap:24px}
  .section{padding:64px 0}
  .footer-inner{justify-content:center;text-align:center}
}

@media(max-width:520px){
  .gallery-grid{grid-template-columns:1fr 1fr;gap:12px}
  .amenities{grid-template-columns:repeat(3,1fr)}
  .confirm-actions .btn{width:100%}
  .container{padding:0 16px}
}

/* ============================================================
   SINGLE-SCREEN SYSTEM  — every page fits one viewport, no scroll
   (matches the 16:9 desktop / 9:16 mobile designs exactly)
   ============================================================ */
:root{--hh:66px;--fh:40px}
html{height:100%;scroll-behavior:auto}
body{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}

/* DESKTOP STAGE — the design is authored at exactly 1280×720 (like the 16:9 mockups)
   and scaled to the window via JS zoom (main.js fitStage). Letterboxed on non-16:9. */
@media(min-width:861px){
  html{background:#161310;display:grid;place-items:center;overflow:hidden}
  body{width:1280px;height:720px;flex:none}
}

/* header / footer take fixed space, screen fills the rest */
.site-header{position:relative;flex:0 0 var(--hh);height:var(--hh);display:flex;align-items:center;width:100%}
.site-header .header-inner{height:var(--hh)}
.site-footer{flex:0 0 auto;padding:8px 0;margin-top:0}
.site-footer .footer-inner{font-size:.8rem}
.stepper-bar{flex:0 0 auto}
.stepper-bar .container{padding:11px 24px}

.screen{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;position:relative;padding:0}
.screen > .container{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;width:100%;padding-top:18px;padding-bottom:18px}
.screen .section-title{margin-bottom:0}

/* HOME — header & footer overlay the full-bleed hero */
body.home .site-header{position:absolute;top:0;left:0;right:0;z-index:40;border:none;
  background:linear-gradient(180deg,rgba(4,3,1,.4) 0%,rgba(4,3,1,.33) 60%,rgba(4,3,1,.15) 88%,rgba(4,3,1,0) 100%)}
body.home .site-footer{position:absolute;bottom:0;left:0;right:0;z-index:6;
  background:rgba(37,36,35,.97);border-top:2px solid rgba(129,114,90,.7)}
.hero-screen{justify-content:center}
.hero-screen .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
/* 4K/ultrawide letterbox fix. The desktop layout is a fixed 1280x720 stage that fitStage()
   zooms to the window (min(vw/1280, vh/720)); when the WINDOW is wider than 16:9 (e.g. a 4K
   panel where browser chrome eats height -> ~2.02) the stage is height-limited and dark bars
   appear L/R. Let ONLY the hero backdrop escape the stage and fill the viewport, the way the
   footer already does (its containing block is the viewport because body isn't positioned):
   position:fixed re-parents hero-bg to the viewport; inset:0/z-index:0 stay from the base
   rule, and the copy + booking bar stay inside the stage so they DON'T move. Bounded by
   aspect ratio on purpose: at <=16/9 there are no bars to fix; the 12/5 (2.4) upper bound
   still covers real 21:9 ultrawides (3440x1440 = 2.389, where the ~25% vertical crop only
   trims sky/street, not the building) but stops before 32:9 (3.556), where stretching the
   16:9 video full-width would crop it in half to a thin band — worse than bars — so there
   we keep the letterbox. Desktop only; only index.html carries .hero-screen. */
@media(min-width:861px) and (min-aspect-ratio:16/9) and (max-aspect-ratio:12/5){
  .hero-screen .hero-bg{position:fixed}
}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-screen .hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,7,4,.48) 0%,rgba(10,7,4,.12) 34%,rgba(10,7,4,0) 58%)}
.hero-screen > .container{position:relative;z-index:2;justify-content:center;gap:4vh;padding-top:0;padding-bottom:0}
@media(min-width:861px){
  .hero-screen > .container{padding-left:118px;padding-bottom:7.8vh}
  .hero-screen .hero-copy{max-width:740px}
  /* booking bar — MEASURED from mockup: left 14%, width 65%, dark translucent glass, gold border */
  /* booking bar — MEASURED: x270..1010 (live px @1280), y557..625, text lefts 320/487/654, seps 454/618 */
  .hero-screen .booking-bar{
    position:absolute;left:20.2%;transform:none;bottom:13.2%;
    width:59.7%;max-width:none;margin:0;padding:7px 12px 7px 0;gap:0;height:68px;
    background:linear-gradient(180deg,rgba(198,180,148,.20) 0%,rgba(60,46,30,.34) 55%,rgba(32,24,15,.42) 100%);
    border:1px solid rgba(206,170,110,.6);box-shadow:0 20px 50px rgba(0,0,0,.42)}
  .hero-screen .bb-field{padding:9px 0 0;gap:3px;border-radius:0;justify-content:flex-start}
  .hero-screen .bb-field:nth-child(1){flex:0 0 184px;padding-left:50px}
  .hero-screen .bb-field:nth-child(2){flex:0 0 164px;padding-left:33px}
  .hero-screen .bb-field:nth-child(3){flex:1 1 auto;padding-left:36px}
  .hero-screen .bb-field + .bb-field{border-left:1px solid rgba(232,215,185,.38)}
  .hero-screen .bb-label{color:#c9ab77;font-size:.69rem;letter-spacing:1.4px;line-height:1.2;white-space:nowrap}
  .hero-screen .bb-value{color:#fdfaf3;font-size:1.03rem;line-height:1.45;white-space:nowrap}
  /* SEARCH — separate inset pill, flat muted gold (measured x834..998) */
  .hero-screen .bb-search{align-self:stretch;display:flex;flex:0 0 164px;margin-left:auto;padding-left:0}
  .hero-screen .bb-search .btn{height:100%;width:100%;padding:0;font-size:.82rem;text-transform:uppercase;letter-spacing:1px;border-radius:999px;
    background:linear-gradient(180deg,#cbac68,#b8975a);color:#fbf4e6;box-shadow:0 6px 16px rgba(0,0,0,.25)}
}
.hero-screen .hero-title{font-family:var(--f-logo);font-weight:600;color:#fff;
  font-size:clamp(2.2rem,4.8vw,4rem);line-height:1.0;letter-spacing:1.5px;text-shadow:0 8px 40px rgba(0,0,0,.5)}
.hero-screen .hero-title span{display:block}
/* mockup line widths: HOTEL 216px, MIRAGE 226px (tighter tracking on line 2) */
.hero-screen .hero-title span:first-child{letter-spacing:0}
.hero-screen .hero-title span:last-child{letter-spacing:-4.5px}
.hero-screen .booking-bar{margin-top:0}
/* COMPARE mode: show only the extracted mockup background (no live UI) */
body.compare .site-header,
body.compare .hero-copy,
body.compare .booking-bar,
body.compare .site-footer,
body.compare .drawer,
body.compare .drawer-backdrop{display:none !important}
body.compare .hero-bg::after{display:none}
/* on the single-screen home, open booking dropdowns UPWARD so they never clip */
@media(min-width:861px){
  .hero-screen .dropdown{top:auto;bottom:calc(100% + 14px)}
  .hero-screen .dropdown-cal{top:auto;bottom:calc(100% + 32px)}   /* mockup: panel bottom 32px above bar */
  .hero-screen .dropdown-guests{top:auto;bottom:calc(100% + 8px)} /* mockup 192001: 7-8px gap */
}

/* ---- ROOMS (mockup 213220: in-flow bar, centered title, 2-col scrollable grid) ---- */
.rooms-screen > .container{gap:0;padding-top:16px;padding-bottom:0;position:relative;z-index:1}
.rooms-screen::before{content:"";position:absolute;inset:0;z-index:0;
  background:url(../images/hero-home.jpg) center/cover;filter:blur(9px) brightness(.7);transform:scale(1.05)}
/* in-flow glass bar — mockup: x300..989, top 82, H68, texts 339/489/652, seps 454/616, pill 825..982 */
.booking-bar.bar-page{position:relative;flex:0 0 auto;margin:0 0 0 246px;width:689px;height:68px;max-width:none;
  padding:7px 7px 7px 0;gap:0;
  background:linear-gradient(180deg,rgba(198,180,148,.20) 0%,rgba(60,46,30,.34) 55%,rgba(32,24,15,.42) 100%);
  border:1px solid rgba(206,170,110,.6);box-shadow:0 20px 50px rgba(0,0,0,.42)}
.bar-page .bb-field{padding:9px 0 0;gap:3px;border-radius:0;justify-content:flex-start}
.bar-page .bb-field:nth-child(1){flex:0 0 154px;padding-left:39px}
.bar-page .bb-field:nth-child(2){flex:0 0 162px;padding-left:35px}
.bar-page .bb-field:nth-child(3){flex:1 1 auto;padding-left:36px}
.bar-page .bb-field + .bb-field{border-left:1px solid rgba(232,215,185,.38)}
.bar-page .bb-label{color:#c9ab77;font-size:.69rem;letter-spacing:1.4px;line-height:1.2;white-space:nowrap}
.bar-page .bb-value{color:#fdfaf3;font-size:1.03rem;line-height:1.45;white-space:nowrap}
.bar-page .bb-search{align-self:stretch;display:flex;flex:0 0 157px;margin-left:auto;padding-left:0}
.bar-page .bb-search .btn{height:100%;width:100%;padding:0;font-size:.82rem;text-transform:uppercase;letter-spacing:1px;border-radius:999px;
  background:linear-gradient(180deg,#cbac68,#b8975a);color:#fbf4e6;box-shadow:0 6px 16px rgba(0,0,0,.25)}
/* centered gold title */
.rooms-title{flex:0 0 auto;text-align:center;font-family:var(--f-display);font-weight:600;color:var(--gold);
  font-size:2rem;line-height:1.2;letter-spacing:.5px;margin:56px 0 0}
/* scrollable cards zone with gold scrollbar (mockup: cards x246..1036, top 265, scrollbar at x1052) */
.rooms-scroll{flex:1 1 auto;min-height:0;overflow-y:scroll;overflow-x:hidden;margin:21px 0 0 192px;width:818px;padding-right:16px}
.rooms-scroll::-webkit-scrollbar{width:12px}
.rooms-scroll::-webkit-scrollbar-track{background:rgba(66,52,38,.5);border-radius:6px}
.rooms-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#d3b371,#ac8a4e);border-radius:6px}
.rooms-grid{display:grid;grid-template-columns:repeat(2,384px);gap:18px 22px;padding-bottom:14px}
.rooms-grid .room-card{margin:0;background:rgba(30,24,18,.55);border:1px solid rgba(206,170,110,.55);border-radius:14px;overflow:hidden;backdrop-filter:blur(6px)}
.rooms-grid .carousel{height:194px;aspect-ratio:auto}
.rooms-grid .room-body{padding:14px 22px 16px 24px}
.rooms-grid .room-body h3{display:inline-block;font-family:var(--f-display);font-size:2rem;font-weight:600;color:#fdf8ee;
  line-height:1.1;padding-bottom:6px;border-bottom:1px solid rgba(201,160,99,.75)}
.rooms-grid .room-meta{display:flex;align-items:center;gap:7px;color:#ddd6ca;font-size:.8rem;margin:8px 0 10px}
.rooms-grid .room-meta svg{width:15px;height:15px;color:#cfc7b8;flex:none}
.rooms-grid .room-foot{display:flex;align-items:center;justify-content:space-between}
.room-few{color:#d9a66b;font-weight:500;white-space:nowrap}
.avail-empty{grid-column:1/-1;padding:60px 24px;text-align:center;color:#e7dfce;font-size:1.05rem;line-height:1.6}
/* error state — shown instead of fictional rooms when availability can't load */
.avail-error{grid-column:1/-1;padding:56px 24px;text-align:center;color:#e7dfce;font-size:1.05rem;line-height:1.6;display:flex;flex-direction:column;align-items:center;gap:16px}
.avail-error>span{max-width:34ch}
.avail-error .aerr-phone{color:var(--gold-1);font-weight:600;text-decoration:none;font-size:1.15rem}
.avail-error .aerr-retry{font-family:var(--f-ui);background:linear-gradient(180deg,#d3b371,#ac8a4e);color:#241a0c;border:none;border-radius:999px;padding:11px 26px;font-size:.95rem;font-weight:600;cursor:pointer}
/* skeleton loading placeholders (never fake rooms) */
@keyframes skelShimmer{0%{background-position:-380px 0}100%{background-position:380px 0}}
.room-card.skel{pointer-events:none}
.skel-img,.skel-line,.skel-btn{background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.13) 50%,rgba(255,255,255,.05));background-size:760px 100%;animation:skelShimmer 1.4s infinite linear;border-radius:8px}
.skel-img{width:100%;height:194px;border-radius:14px 14px 0 0}
.room-card.skel .room-body{padding:14px 22px 16px 24px}
.skel-line{height:14px;margin:0 0 12px}
.skel-title{width:58%;height:20px}
.skel-meta{width:82%}
.skel-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:4px}
.skel-price{width:90px;margin:0}
.skel-btn{width:120px;height:34px;border-radius:999px}
/* rooms.html showcase skeleton + error (never fake suites) */
.suite-panel.skel{background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.12) 50%,rgba(255,255,255,.05));background-size:760px 100%;animation:skelShimmer 1.4s infinite linear;border-radius:14px;min-height:min(46vh,420px)}
.suite-strip .rooms-error{flex:1 1 100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;color:#e7dfce;font-size:1.05rem;line-height:1.6;padding:48px 24px}
.suite-strip .rooms-error>span{max-width:34ch}
.suite-strip .rooms-error .aerr-phone{color:var(--gold-1);font-weight:600;text-decoration:none;font-size:1.15rem}
.suite-strip .rooms-error .aerr-retry{font-family:var(--f-ui);background:linear-gradient(180deg,#d3b371,#ac8a4e);color:#241a0c;border:none;border-radius:999px;padding:11px 26px;font-size:.95rem;font-weight:600;cursor:pointer}
.rooms-grid .price{font-family:var(--f-ui);white-space:nowrap}
.rooms-grid .price em{font-style:normal;font-size:.95rem;color:#c9a874}
.rooms-grid .price b{font-family:var(--f-display);font-size:1.8rem;font-weight:600;color:#d3ab64;margin:0 2px}
.rooms-grid .btn-select{padding:7px 32px;font-size:.85rem;letter-spacing:.3px;
  background:linear-gradient(180deg,#cbac68,#b8975a);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25)}

/* ---- ROOMS SHOWCASE (nav "Rooms" page, mockup hf_093419, measured @1280x720:
        neutral-gray page #282828; resting panels y 124..607 (59px below header, 77px
        above footer); the gold highlight in the mockup is the HOVER state: the hovered
        panel widens to 362px and spans y 98..646 — protruding 26px above and 39px below
        the others; the strip then overflows right and the last panel gets cropped) ---- */
.showcase-page .site-header.solid{background:#282828;border-bottom-color:rgba(255,255,255,.08)}
.showcase-page .site-footer{background:#232524}
.showcase-screen{background:#282828}
.suite-strip{flex:1 1 auto;min-height:0;display:flex;gap:12px;overflow:hidden}
/* paging arrows for >4 live categories (added by JS only when the strip overflows) */
.showcase-screen{position:relative}
.suite-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;
  background:linear-gradient(180deg,#c9aa66,#ae8c50);border:none;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.suite-arrow:hover{filter:brightness(1.1)}
.suite-arrow.prev{left:14px}.suite-arrow.next{right:14px}
.suite-arrow[hidden]{display:none}
@media(max-width:860px){.suite-arrow{display:none}}
.suite-panel{position:relative;flex:0 0 24.3%;min-width:0;margin:59px 0 77px;overflow:hidden;
  border:1px solid transparent;display:flex;align-items:flex-end;justify-content:center;
  transition:flex-basis .45s ease,margin .45s ease,border-color .45s ease,box-shadow .45s ease}
.suite-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.suite-panel:hover img{transform:scale(1.05)}
.sp-shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,8,5,.22) 0%,rgba(12,8,5,0) 30%,rgba(12,8,5,0) 52%,rgba(12,8,5,.55) 80%,rgba(12,8,5,.72) 100%)}
.sp-body{position:relative;z-index:2;width:100%;text-align:center;padding:0 16px 10px;display:block}
.suite-panel h2{display:inline-block;font-family:var(--f-display);font-weight:500;font-size:2rem;line-height:1.15;
  color:#f6ecd9;padding:0 0 12px;border-bottom:1px solid rgba(201,160,99,.8);text-shadow:0 2px 14px rgba(0,0,0,.65);
  transition:font-size .45s ease,color .45s ease,padding .45s ease}
.sp-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 26px;margin-top:8px;
  color:#fff;font-size:.98rem;font-weight:400;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.sp-meta > span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.sp-meta svg{width:19px;height:19px;color:var(--gold);flex:none}
.suite-panel:hover{flex-basis:28.28%;margin:33px 0 38px;z-index:3;
  border-color:#caa768;box-shadow:0 24px 70px rgba(0,0,0,.65)}
/* hovering the last panel would push its own gold frame past the right edge —
   let the others shrink instead so the hovered card stays fully visible.
   NOT in .paged mode: collapsing the overflow there resets scrollLeft to 0
   and the strip snaps back to the first page. */
.suite-strip:not(.paged):has(.suite-panel:last-child:hover) .suite-panel:not(:hover){flex-shrink:1}
.suite-panel:hover .sp-body{padding-bottom:12px}
.suite-panel:hover h2{font-size:3rem;color:#eedbb2;padding:0 24px 14px}
@media(max-width:860px){
  .suite-strip{flex-direction:column;overflow-y:auto;gap:12px;padding:14px 16px}
  .suite-panel,.suite-panel:hover{flex:none;margin:0;height:46vh;border-radius:14px}
  .sp-body,.suite-panel:hover .sp-body{padding-bottom:34px}
  .suite-panel:hover h2{font-size:2rem;color:#f6ecd9;padding:0 0 12px}
}

/* ---- ROOM DETAIL (mockup _mockup-room, measured @1280x720: photo panel x62..758 y101..652,
        info panel x785..1215 y101..652, gap 27; main photo H439, thumbs 124x78 from x120,
        thumb arrows both sides at panel edges) ---- */
.detail-screen > .container{justify-content:flex-start;position:relative;z-index:1}
.detail-screen::before{content:"";position:absolute;inset:0;z-index:0;
  /* generated to match the mockup bg: evening suite, city window left, gold lamp right */
  background:url(../images/room-bg.jpg) center/cover;filter:blur(9px) brightness(.8);transform:scale(1.06)}
.detail-screen .detail-grid{margin:17px 0 0 8px;grid-template-columns:696px 430px;gap:0 27px;flex:1 1 auto;min-height:0;align-items:start}
.detail-screen .detail-left{position:relative;display:flex;flex-direction:column;min-height:0;width:696px;height:551px;
  border:1px solid rgba(206,170,110,.6);border-radius:16px;overflow:hidden;background:rgba(20,15,10,.3);backdrop-filter:blur(8px)}
.detail-screen .gallery-main{flex:0 0 439px;display:flex;border:none;border-radius:16px 16px 0 0}
.detail-screen .gallery-main .carousel{flex:1 1 auto;min-height:0;aspect-ratio:auto;width:100%}
.detail-screen .thumb-strip{flex:0 0 auto;display:flex;gap:14px;margin:15px 58px 8px 58px;overflow-x:auto;scrollbar-width:none}
.detail-screen .thumb-strip::-webkit-scrollbar{display:none}
.detail-screen .thumb-strip img{width:124px;height:78px;flex:none;aspect-ratio:auto;border-radius:10px}
.detail-screen .t-prev,.detail-screen .t-next{position:absolute;bottom:42px;width:30px;height:30px;border:none;background:none;
  color:#e7cf9f;font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.detail-screen .t-prev{left:12px}
.detail-screen .t-next{right:12px}
.detail-screen .t-prev:hover,.detail-screen .t-next:hover{color:#fff}
.detail-screen .gallery-main .c-btn{width:44px;height:44px;font-size:1.3rem}
.detail-screen .detail-panel{width:430px;height:551px;margin-top:0;overflow:hidden;padding:32px 22px 20px;display:flex;flex-direction:column;
  background:rgba(74,59,39,.46);border:1px solid rgba(206,170,110,.55);border-radius:16px;backdrop-filter:blur(8px)}
.detail-screen .detail-panel h2{font-size:2.5rem;color:#dcb26e;font-weight:500;line-height:1.1}
.detail-screen .detail-panel .sub{margin:8px 0 0;padding-bottom:13px;border-bottom:1px solid rgba(201,160,99,.45);color:#efe9dd;font-size:.82rem}
.detail-screen .detail-panel p.desc{margin:13px 0 0;font-size:.87rem;line-height:1.5;color:#f0eadf}
.detail-screen .amenities{grid-template-columns:repeat(3,1fr);gap:10px 8px;margin:12px 0 6px}
.detail-screen .amenity{gap:11px;font-size:.8rem;color:#f2ead9;white-space:nowrap}
.detail-screen .amenity svg{width:52px;height:52px;color:#d3ab64}
.detail-screen .detail-price{border:none;border-top:1px solid rgba(201,160,99,.45);margin-top:auto;padding:14px 0 0;margin-bottom:0;text-align:center}
.detail-screen .p-main{font-family:var(--f-ui);line-height:1.2}
.detail-screen .p-main em{font-style:normal;color:#c9a874;font-size:1.15rem}
.detail-screen .p-main b{font-family:var(--f-ui);font-size:1.7rem;font-weight:400;color:#d3ab64;margin:0 2px;letter-spacing:.5px}
.detail-screen .p-sub{margin-top:5px;font-size:.72rem;color:#e9e2d4}
.detail-screen .p-sub b{color:#d3ab64;font-weight:500}
.detail-screen .book-now{margin-top:13px;padding:12px 10px;font-size:1rem;border-radius:999px;
  background:#bc9857;color:#faf4e4;font-weight:500}

/* ---- GALLERY (featured + thumb carousel) ---- */
/* GALLERY — mockup 125924: fullscreen photo, chips capsule x325..962 y421..480, strip y520..650, round arrows */
.gallery-screen{position:relative;background:var(--bg)}
/* structure per user reference "Variant 4" (white there was schematic only — colors from the
   dark mockup): featured image on top, band below holds filter pill + preview strip;
   clicking a preview shows its picture in the top area */
.gallery-bg{position:absolute;top:0;left:0;right:0;height:475px;z-index:0}
.gallery-bg img{width:100%;height:100%;object-fit:cover}
/* featured photo reuses the room.html carousel, but full-bleed (no card frame) */
.gallery-bg .carousel.gallery-feature{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
  border:none;border-radius:0;background:none;backdrop-filter:none}
.gallery-bg .carousel.gallery-feature .c-btn{width:46px;height:46px;font-size:1.4rem;z-index:2}
.gallery-bg .carousel.gallery-feature .dots{bottom:22px;z-index:2}
.gallery-screen > .container{position:relative;z-index:1;max-width:none;padding:0;pointer-events:none}
/* the container overlays the featured photo; let clicks fall through its empty area
   to the carousel's side arrows (in .gallery-bg behind it), but keep the interactive
   regions clickable */
.gallery-screen .filter-bar,.gallery-screen .gallery-thumbs-wrap,.gallery-screen .gallery-grid-m{pointer-events:auto}
.gallery-screen .filter-bar{position:absolute;left:50%;transform:translateX(-50%);top:400px;margin:0;
  height:59px;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:29px;padding:0 32px;
  background:rgba(26,20,14,.55);border:1px solid rgba(206,170,110,.6);border-radius:999px;backdrop-filter:blur(10px)}
.gallery-screen .filter-bar button{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;
  font-family:var(--f-ui);font-size:1.2rem;color:#f2ede2;white-space:nowrap;padding:0;transition:color .2s}
.gallery-screen .filter-bar button svg{width:24px;height:24px;color:currentColor}
.gallery-screen .filter-bar button.active,.gallery-screen .filter-bar button:hover{color:var(--gold)}
.gallery-thumbs-wrap{position:absolute;left:0;right:0;top:489px;padding:0 106px}
.gallery-thumbs{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none}
.gallery-thumbs::-webkit-scrollbar{display:none}
.gallery-thumbs figure{margin:0;flex:0 0 204px;height:118px;border-radius:10px;overflow:hidden;border:1px solid transparent;cursor:pointer;transition:.2s;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.gallery-thumbs figure.hide{display:none}
.gallery-thumbs figure.on{border-color:rgba(201,160,99,.85)}
.gallery-thumbs img{width:100%;height:100%;object-fit:cover}
.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  background:linear-gradient(180deg,#c9aa66,#ae8c50);border:none;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.gallery-arrow.prev{left:41px}.gallery-arrow.next{right:41px}
.gallery-arrow:hover{filter:brightness(1.1)}
.gallery-grid-m{display:none}   /* mobile-only grid, hidden on desktop */

/* ---- BREAKFAST ---- */
.cafe-screen > .container{gap:16px}
/* BREAKFAST — mockup 130531 (pixel-scan verified): band splits x326/331, x952/958, bottom 414;
   title cap 296..345, sub cap 358..370 (W314 c640), dots y392..399;
   cols seps x472/866; content col1 124..428 (photos y476..562, gap 24), col2 518..822, col3 927..1148;
   headers cap 440..455 (centers 276/670/1038); hours rows y478.. pitch 24; features y645..691 centers ~375/640/911 */
.cafe-screen > .container{gap:0;padding:0;max-width:none}
.cafe-band{flex:0 0 348px;min-height:0;display:grid;grid-template-columns:326px 621px 1fr;grid-template-rows:100%;gap:5px;border-radius:0;overflow:hidden;position:relative}
.cafe-band img{width:100%;height:100%;object-fit:cover}
.cafe-band .cafe-video{width:100%;height:100%;object-fit:cover;display:block}
.cafe-band .cb-title{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;
  padding-bottom:15px;background:linear-gradient(180deg,transparent 42%,rgba(12,8,5,.55))}
.cafe-band .cb-title h1{font-family:var(--f-display);text-transform:uppercase;font-weight:600;font-size:4.4rem;line-height:1;color:#efe3c8;letter-spacing:2px}
.cafe-band .cb-title p{color:#f2ead8;letter-spacing:2.5px;text-transform:uppercase;font-size:1.05rem;line-height:1.2;margin:9px 0 0}
.cb-dots{display:flex;gap:15px;margin-top:16px}
.cb-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5)}
.cb-dots i.on{background:#e7cf9f}
.cb-arrow{position:absolute;top:calc(50% - 4px);transform:translateY(-50%);z-index:3;width:47px;height:47px;border-radius:0;
  background:#aa9468;border:none;color:#fff;font-size:1.6rem;font-weight:300;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cb-arrow.prev{left:5px}.cb-arrow.next{right:5px}
.cb-arrow:hover{filter:brightness(1.1)}
.cafe-cols{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:472px 394px 1fr;gap:0;padding:12px 0 0;
  background:linear-gradient(180deg,#72573a,#4c3b2c 55%,#2a2420)}
.cafe-cols .menu-col{padding:0 44px 0 124px;border-bottom:none}
.cafe-cols .menu-col + .menu-col{border-left:1px solid rgba(201,160,99,.5)}
.cafe-cols .menu-col:nth-child(2){padding:0 44px 0 46px}
.cafe-cols .menu-col:nth-child(3){padding:0 0 0 61px}
.cafe-cols .menu-col h3{font-family:var(--f-display);font-size:1.45rem;font-weight:600;color:#ece2cc;letter-spacing:0;transform:scaleX(.9);text-align:center;margin-bottom:13px;border-bottom:none;padding-bottom:0;white-space:nowrap}
.menu-row{display:flex;justify-content:flex-start;gap:24px}
.cafe-cols .menu-item{display:block;width:140px;margin-bottom:0}
.cafe-cols .menu-item img{width:140px;height:74px;border-radius:10px;display:block}
.cafe-cols .mi-name{margin-top:5px;font-size:.8rem;letter-spacing:.5px;color:#f3ede1;text-transform:uppercase;line-height:1.15}
.cafe-cols .mi-desc{margin-top:2px;font-size:.7rem;color:#c9c2b4;line-height:1.28}
.hours-col .hours-list{text-align:center;width:221px}
.hours-col h3{width:221px}
.hours-col .hc-title{font-family:var(--f-display);font-weight:600;text-transform:uppercase;font-size:1.9rem;line-height:1.1;
  color:#efe3c8;letter-spacing:1px;text-align:center;width:221px;margin-bottom:10px}
.cafe-cols .hours-list .hrow{display:block;padding:0;border-bottom:none;font-size:.93rem;color:#f3ede1;letter-spacing:0;line-height:24px;text-transform:uppercase;white-space:nowrap}
.cafe-screen .feature-bar{flex:0 0 46px;margin-top:0;padding:0;border-top:none;align-items:center;justify-content:center;gap:96px;
  background:linear-gradient(90deg,#3c3027,#785b3d 28%,#785b3d 72%,#3c3027)}
.cafe-screen .feature-bar .f{font-size:.82rem;letter-spacing:1.5px;text-transform:uppercase;color:#fdfbf6}
.cafe-screen .feature-bar svg{color:#fdfbf6}

/* ---- CONFERENCE ---- */
.conf-screen{justify-content:flex-end}
.conf-screen .conf-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.conf-screen .conf-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,8,5,.85),rgba(12,8,5,.45) 60%,rgba(12,8,5,.3))}
.conf-screen > .container{position:relative;z-index:2;justify-content:space-between}
/* mockup 133213: eyebrow y114, caps title 54px lines y148/206, desc y270 (3×21.5), pill y353, cards y438 H220 */
.conf-hero-copy{max-width:560px;margin-left:74px}
.conf-hero-copy .eyebrow{display:block;margin-top:26px}
.conf-hero-copy h1{font-family:var(--f-display);text-transform:uppercase;font-weight:600;
  font-size:clamp(2rem, 3.6vw, 3.4rem);line-height:1.05;letter-spacing:1px;color:#f6efe1;margin:8px 0 0}
/* the German title is much longer — cap it lower so it stays on 2 lines like the EN mock
   (desktop only: the mobile media rule below sets its own smaller size) */
@media(min-width:861px){
  html:lang(de) .conf-hero-copy h1{font-size:clamp(1.9rem, 3vw, 2.8rem)}
}
.conf-hero-copy p{margin:12px 0 0;font-size:.72rem;line-height:1.85;color:#e9e2d4;max-width:440px}
.conf-hero-copy .send-inquiry{margin-top:31px;padding:10px 32px;font-size:.85rem;text-transform:uppercase;letter-spacing:1px;
  background:linear-gradient(180deg,#cbac68,#b8975a);color:#33260f}
.conf-screen .info-cards{margin:auto 0 8px 10px;flex:0 0 auto;grid-template-columns:repeat(2,564px);gap:25px}
.conf-screen .info-card{display:grid;grid-template-columns:300px 1fr;gap:0 24px;height:220px;padding:16px;
  background:rgba(18,14,10,.72);border:1px solid rgba(206,170,110,.55);border-radius:12px}
.conf-screen .info-card img{width:300px;height:188px;aspect-ratio:auto;margin:0;object-fit:cover;border-radius:8px}
.conf-screen .ic-body{padding-top:12px;padding-bottom:8px;min-width:0;display:flex;flex-direction:column}
.conf-screen .info-card .ic-head{margin-bottom:0;gap:12px}
.conf-screen .info-card .feat:first-of-type{margin-top:auto}
.conf-screen .info-card .feat:last-of-type{margin-bottom:auto}
.conf-screen .info-card .ic-head .badge{width:32px;height:32px;border-radius:7px;background:none;border:1.5px solid var(--gold)}
.conf-screen .info-card .ic-head .badge svg{width:18px;height:18px;color:var(--gold)}
.conf-screen .info-card .ic-head h3{font-family:var(--f-display);text-transform:uppercase;letter-spacing:1.5px;
  font-size:1.5rem;font-weight:600;color:#d3ab64}
.conf-screen .info-card .feat{padding:0;margin-bottom:11px;font-size:.9rem;color:#f3ede1;line-height:22px}

/* ---- CONTACT ---- */
/* Background = blurred suite photo (as in mockup); the Adresse row links to Google Maps. */
.contact-screen .contact-bg{position:absolute;inset:0;z-index:0;
  background:url(../images/contact-bg.jpg) center/cover}   /* the mockup's own blurred suite, UI removed */
.contact-screen .contact-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,8,5,.28),rgba(12,8,5,.12) 50%,rgba(12,8,5,.25))}
.contact-screen a.contact-row{color:inherit;text-decoration:none}
.contact-screen a.contact-row:hover .ct-label{color:#e7cf9f}
/* CONTACT — pixel-scan verified: title x170 cap y131..168; panels top y207;
   left panel 164..563 H420 (labels y241/349/452/550, text x264); form 670..1130 H422
   (inputs 700..1100 H42 tops 236/295/354, textarea 414..536, button H46 y553..599) */
.contact-screen > .container{position:relative;z-index:2;max-width:none;padding:0;pointer-events:none;display:block}
.contact-screen .section-title{position:absolute;left:167px;top:49px;margin:0;text-align:left;
  font-family:var(--f-display);font-weight:600;font-size:3.5rem;line-height:1.1;color:#f6efe1;text-shadow:0 2px 16px rgba(0,0,0,.8)}
.contact-screen .contact-grid{display:block;margin:0}
.contact-screen .contact-card,.contact-screen form.contact-card{pointer-events:auto;backdrop-filter:blur(8px)}
.contact-screen .contact-card{position:absolute;left:164px;top:141px;width:399px;height:420px;padding:34px 0 0 12px;
  background:rgba(24,18,11,.42);border:1px solid rgba(206,170,110,.45);border-radius:16px}
.contact-screen .contact-row{display:flex;align-items:flex-start;gap:32px;padding:0;border-bottom:none;margin-bottom:0;height:103px}
.contact-screen .contact-row:nth-child(1){height:108px}
.contact-screen .contact-row:nth-child(3){height:98px}
.contact-screen .contact-row .badge{width:56px;height:44px;border-radius:0;background:none;flex:none;display:flex;align-items:center;justify-content:center}
.contact-screen .contact-row .badge svg{width:42px;height:42px;color:var(--gold)}
.contact-screen .contact-row .ct-label{font-family:var(--f-display);font-size:1.5rem;font-weight:600;color:#d3ab64;line-height:1.05;letter-spacing:.3px}
.contact-screen .contact-row .ct-val{color:#f5f0e6;font-size:1.13rem;margin-top:5px}
.contact-screen form.contact-card{position:absolute;left:670px;top:141px;width:460px;height:422px;padding:29px 30px 29px;
  background:rgba(24,18,11,.35);border:1px solid rgba(206,170,110,.5);border-radius:16px;display:flex;flex-direction:column}
.contact-screen .form-field{margin-bottom:17px}
.contact-screen .form-field input{height:42px;padding:0 16px;border-radius:10px;font-size:1.04rem;
  background:rgba(30,24,18,.35);border:1px solid rgba(206,170,110,.5);color:#fff;width:100%}
.contact-screen .form-field textarea{display:block;height:122px;min-height:122px;resize:none;padding:9px 16px;border-radius:10px;font-size:1.04rem;
  background:rgba(30,24,18,.35);border:1px solid rgba(206,170,110,.5);color:#fff;width:100%}
.contact-screen form .btn{margin-top:auto;padding:12px;font-size:.95rem;border-radius:999px;
  background:linear-gradient(180deg,#e8cd8d,#c3a057);color:#33260f}
.contact-card .form-msg{margin:12px 0 0;font-size:.92rem;line-height:1.45;text-align:center}
.contact-card .form-msg.ok{color:#9ccca4}
.contact-card .form-msg.err{color:#e58b82}
.contact-card input.invalid,.contact-card textarea.invalid{border-color:#d9736b;box-shadow:0 0 0 2px rgba(217,115,107,.25)}

/* ---- BOOKING — extras / details / confirm ---- */
/* BOOKING DETAILS — mockup 104531: plain centered steps, title x207, form panel 118..761 y205..630, summary 801..1076 */
.steps-plain{background:none;border:none}
.steps-plain .container{gap:12px;padding:16px 24px 0;align-items:center}
.steps-plain .step{font-size:1.02rem;color:#e9e0cf;font-family:var(--f-ui)}
.steps-plain .step.done{color:#e9e0cf}
.steps-plain .step .tick{color:var(--gold)}
.steps-plain .step.active{color:var(--gold);position:relative}
.steps-plain .step.active::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;background:var(--gold)}
.steps-plain .s-sep{color:#b9b0a0}
.booking-screen > .container{justify-content:flex-start}
.booking-screen .section-title{margin:6px 0 0 153px;text-align:left;font-family:var(--f-display);font-weight:600;
  font-size:2.8rem;line-height:1.15;color:#f6efe1}
.booking-screen .booking-grid{margin:18px 0 0 64px;grid-template-columns:643px 275px;gap:40px;align-items:start;flex:0 0 441px}
.booking-screen .booking-main{height:427px;padding:25px 20px 20px 116px;display:flex;flex-direction:column;
  background:rgba(24,18,11,.42);border:1px solid rgba(206,170,110,.5);border-radius:16px}
.booking-main .gd-title{font-family:var(--f-display);color:#d3ab64;font-size:1.35rem;margin-bottom:13px}
.booking-screen .form-2col{grid-template-columns:244px 244px;gap:19px}
.booking-screen .form-2col + .form-2col{margin-top:14px}
.booking-screen .form-field{margin-bottom:0}
.booking-screen .form-field label{display:block;font-size:.82rem;color:#f0e9db;margin-bottom:11px}
.booking-screen .form-field input{height:30px;padding:0 12px;border-radius:8px;font-size:.85rem;width:100%;
  background:rgba(30,24,18,.3);border:1px solid rgba(206,170,110,.5);color:#fff}
.booking-screen .form-field input.field-error{border-color:#d9736b;box-shadow:0 0 0 2px rgba(217,115,107,.25)}
.booking-screen .secure-pay{margin-top:auto;color:#e9dfc9}
.booking-screen .summary-card{width:275px;height:441px;padding:25px 20px 20px 24px;position:static;display:flex;flex-direction:column;
  background:rgba(24,18,11,.5);border:1px solid rgba(206,170,110,.5);border-radius:16px}
.booking-screen .summary-card h3{font-size:1.3rem;color:#d3ab64;margin-bottom:12px}
.booking-screen .sum-row{padding:2px 0;font-size:.85rem;color:#f3ede1}
.booking-screen .sum-row .lbl{color:#c9ab77}
.sum-sub{color:#d3ab64;font-size:.85rem;padding:2.5px 0;font-weight:500}
.booking-screen .sum-divider{margin:6px 0;border-top:1px solid rgba(201,160,99,.35)}
.booking-screen .sum-total{font-family:var(--f-ui);font-size:1.05rem;font-weight:600;color:#f3ede1;
  padding-top:6px;margin-top:0;border-top:none}
.booking-screen .sum-total span:last-child{color:#d3ab64}
.summary-card .next-btn{margin-top:auto;padding:13px;border-radius:999px;font-size:.95rem;
  background:linear-gradient(180deg,#dcc086,#c8a76c);color:#33260f}
.summary-card .back-link{display:block;text-align:center;margin-top:12px;color:var(--gold);text-decoration:underline;font-size:.85rem}
/* EXTRAS — mockup 070156: gold steps band, photo x0..448, title x485 cap163, rows x478..880, summary 899..1183 */
.steps-band{background:#bc955a;border:none;margin:0 98px 0 105px;position:relative;z-index:4;
  box-shadow:0 10px 26px rgba(0,0,0,.35)}
.steps-band .container{gap:14px;padding:0 24px;height:49px;align-items:center;flex-wrap:nowrap}
.steps-band .step{font-size:1.18rem;color:#43331a;font-family:var(--f-ui)}
.steps-band .step.active{color:#2e2210;font-weight:600}
.steps-band .step b{font-weight:inherit}
.steps-band .s-sep{color:#6b5730}
.extras-screen{background:url(../images/extras-bg.jpg) center/cover}
.extras-screen > .container{max-width:none;padding:0;position:relative;display:block}
.extras-screen .extras-visual{position:absolute;left:0;top:-49px;bottom:0;width:448px;overflow:hidden}
.extras-screen .extras-visual img{width:100%;height:100%;object-fit:cover;display:block}
.extras-screen .section-title{position:absolute;left:477px;top:40px;margin:0;text-align:left;
  font-family:var(--f-display);font-weight:600;font-size:3.4rem;line-height:1.1;color:#d3ab64}
.extras-screen .booking-grid{display:block;margin:0}
.extras-screen .booking-main{position:absolute;left:478px;top:127px;width:380px;background:transparent;border:none;padding:0;backdrop-filter:none;display:block}
.extras-screen .extra-row{display:flex;align-items:center;gap:15px;height:69px;padding:0 20px 0 24px;margin-bottom:14px;
  background:rgba(255,255,255,.14);border:1px solid rgba(206,170,110,.6);border-radius:999px;backdrop-filter:blur(9px) brightness(.65) saturate(.55)}
.extras-screen .e-ic{width:40px;height:40px;flex:none;color:var(--gold)}
.extras-screen .e-name{font-size:1.05rem;color:#f6f0e4;font-family:var(--f-ui)}
.extras-screen .e-desc{font-size:.78rem;color:#d3cbbc;line-height:1.35;margin-top:2px}
.extras-screen .e-desc b{color:#d3ab64;font-weight:500}
.extras-screen .cancel-note{margin:-6px 20px 14px 88px;font-size:.8rem;color:#d3ab64;line-height:1.35}
.extras-screen .cancel-note[hidden]{display:none}
.extras-screen .persons-mini{margin-left:auto;text-align:right}
.extras-screen .persons-mini .pm-label{font-size:.8rem;letter-spacing:0;text-transform:none;color:#e9e0d0;display:block;margin-bottom:5px}
.extras-screen .stepper button{width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.06);
  border:1px solid rgba(206,170,110,.75);color:#e8cd8d;font-size:1rem;line-height:1}
.extras-screen .stepper .val{min-width:18px;font-size:1rem}
.extras-screen .switch{margin-left:auto}
.extras-screen .summary-card{position:absolute;left:899px;top:125px;width:284px;height:424px;padding:23px;display:flex;flex-direction:column;
  background:rgba(240,175,140,.18);border:1px solid rgba(206,170,110,.5);border-radius:16px;backdrop-filter:blur(9px)}
.sum-eyebrow{font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:#bdb4a2;margin-bottom:6px}
.extras-screen .summary-card h3{font-size:1.35rem;color:#f3ecdd;margin-bottom:4px;font-weight:600}
.extras-screen .sum-row{padding:5px 0;font-size:.85rem;color:#f3ede1}
.extras-screen .sum-row .lbl{color:#c9ab77}
.extras-screen .sum-divider{margin:9px 0;border-top:1px solid rgba(201,160,99,.35)}
.extras-screen .sum-total{font-family:var(--f-ui);font-size:1.05rem;font-weight:600;color:#f3ede1;border:none;padding-top:4px;margin-top:0}
.extras-screen .sum-total span:last-child{color:#d3ab64}
.extras-screen .next-btn{margin-top:auto;padding:11px;border-radius:999px;font-size:.95rem;
  background:linear-gradient(180deg,#c3a05f,#ac8a52);color:#2e2210}
/* DETAILS (Ihre Daten) — bg photo (blurred lounge) + frosted panels, mockup 104531 */
.details-screen{background:url(../images/details-bg.jpg) center/cover}
.details-screen .booking-main{background:rgba(255,255,255,.07);backdrop-filter:blur(6px) brightness(.8)}
.details-screen .summary-card{background:rgba(255,255,255,.07);backdrop-filter:blur(6px) brightness(.75)}
.details-screen .secure-pay .cards{gap:9px}
.details-screen .summary-card .next-btn{margin-top:14px}
.pb{display:inline-flex;align-items:center;justify-content:center;width:40px;height:26px;border-radius:4px;
  font-weight:700;font-size:.62rem;letter-spacing:.3px}
.pb-visa{background:#f4f2ee;color:#1a2f7a;font-style:italic}
.pb-mc{background:#f4f2ee}
.pb-mc i{width:14px;height:14px;border-radius:50%;background:#e2372f;display:block}
.pb-mc i + i{margin-left:-6px;background:#f79e1b;mix-blend-mode:multiply}
.pb-amex{background:#2e77bc;color:#fff}
/* CONFIRM — bg photo (sharp) + frosted card, full-width gold steps band */
.steps-band-full{margin:0;box-shadow:none}
.steps-band .step .tick{color:#43331a}
.confirm-screen{background:url(../images/confirm-bg.jpg) center/cover}
/* payment view (Adyen Drop-in) — shown until the payment succeeds.
   The card form is far taller than the 720px stage, so the container scrolls
   internally (same pattern as the legal pages) and the panel grows with it. */
.confirm-screen:has(.pay-view:not([hidden])) > .container{display:block;align-items:stretch;
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(201,160,99,.45) transparent}
.confirm-screen:has(.pay-view:not([hidden])) > .container::-webkit-scrollbar{width:8px}
.confirm-screen:has(.pay-view:not([hidden])) > .container::-webkit-scrollbar-thumb{background:rgba(201,160,99,.45);border-radius:4px}
.confirm-card[hidden]{display:none !important}
.pay-view[hidden]{display:none !important}
.pay-view{width:100%;max-width:1180px;margin:0 auto;padding:10px 0 30px}
.pay-view .booking-grid{display:grid;grid-template-columns:643px 275px;gap:40px;align-items:stretch;margin:18px 0 0 64px}
.pay-view .pay-main{width:643px;height:480px;min-width:0;display:flex;flex-direction:column;background:rgba(30,24,18,.55);border:1px solid rgba(206,170,110,.5);border-radius:16px;padding:22px 24px}
/* mockup grid: equal-height panels like booking-details (643 / 275); height 480 so the full Adyen card form fits */
.pay-view .summary-card{width:275px;height:480px;align-self:stretch}
.pay-sec-title{font-family:var(--f-display);font-weight:600;font-size:1.3rem;color:#e8d5ac;margin-bottom:16px}
#adyen-dropin{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;background:#fff;border-radius:14px;padding:18px;box-sizing:border-box;width:100%;max-width:100%}
#adyen-dropin .adyen-checkout__dropin,#adyen-dropin .adyen-checkout__payment-method{max-width:100%}
.pay-view .pay-status,.pay-view .secure-pay{flex:0 0 auto}
.pay-status{margin-top:14px;font-size:.92rem;color:#f0e8da;min-height:20px}
.pay-status.pay-err{color:#e58b82}
.pay-status.pay-ok{color:#9ccca4}
.pay-view .summary-card{position:static}
.pay-view .sum-sub{color:#c9ab77;font-size:.82rem;margin:8px 0 2px}
@media(max-width:860px){
  .pay-view{padding:6px 0 20px}
  .pay-view .pay-main{width:auto;height:auto;padding:16px}
  .pay-view .summary-card{width:auto;height:auto;order:-1}
  #adyen-dropin{padding:14px;justify-content:flex-start}
}
/* CONFIRM — mockup 220647: panel 428..845 y143..620, check D54 y182, title cap 260..288, box 470..830 y363..462 */
.confirm-screen > .container{justify-content:flex-start;align-items:center;display:flex}
.confirm-screen .confirm-card{width:417px;height:477px;margin-top:45px;padding:22px 30px;display:flex;flex-direction:column;align-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(206,170,110,.55);border-radius:16px;backdrop-filter:blur(7px) brightness(.55);text-align:center}
.confirm-screen .confirm-check{width:54px;height:54px;margin:17px 0 0;border:3px solid #d3ab64;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:none}
.confirm-screen .confirm-check svg{width:26px;height:26px;color:#d3ab64}
.confirm-screen .confirm-card h2{font-family:var(--f-display);font-size:2rem;font-weight:600;color:#f6efe1;margin-top:14px}
.confirm-screen .confirm-card .thanks{margin:11px 0 0;font-size:.85rem;color:#f0e9db}
.confirm-screen .confirm-card .bnr{margin:6px 0 0;font-size:.85rem;color:#d3ab64}
.confirm-screen .confirm-summary{width:100%;margin:18px 0 0;padding:12px 16px;display:flex;justify-content:space-between;text-align:left;
  background:rgba(255,255,255,.09);border-radius:12px}
.confirm-screen .cs-left div{font-size:.85rem;color:#f3ede1;line-height:21px}
.confirm-screen .cs-right{text-align:right}
.confirm-screen .cs-lbl{font-size:.85rem;color:#f3ede1;font-weight:600;line-height:21px}
.confirm-screen .cs-val{font-size:.85rem;color:#d3ab64;line-height:21px}
.confirm-screen .mail-note{margin-top:auto;font-size:.78rem;color:#c9c2b4}
.confirm-screen .confirm-actions{margin:14px 0 4px;display:flex;gap:14px}
.confirm-screen .dl-btn{padding:8px 20px;font-size:.85rem;background:linear-gradient(180deg,#e0c07c,#c3a057);color:#33260f;border-radius:999px}
.confirm-screen .home-btn{padding:8px 20px;font-size:.85rem;border-radius:999px;color:#f0e9db;border:1px solid rgba(226,214,190,.6)}

/* ---- LEGAL PAGES (Impressum / Datenschutz / AGB) ---- */
.legal-screen > .container{display:block;max-width:920px;overflow-y:auto;padding:26px 48px 44px;
  scrollbar-width:thin;scrollbar-color:rgba(201,160,99,.55) transparent}
.legal-screen > .container::-webkit-scrollbar{width:8px}
.legal-screen > .container::-webkit-scrollbar-thumb{background:rgba(201,160,99,.45);border-radius:4px}
.legal-screen h1{font-family:var(--f-display);font-weight:600;font-size:2.6rem;color:#d3ab64;margin:0 0 6px}
.legal-screen h2{font-family:var(--f-display);font-weight:600;font-size:1.35rem;color:#e8d5ac;margin:26px 0 8px}
.legal-screen p,.legal-screen li{font-size:.9rem;line-height:1.75;color:#ddd6ca}
.legal-screen p + p{margin-top:8px}
.legal-screen ul{margin:8px 0 8px 22px}
.legal-screen li{margin:3px 0}
.legal-screen a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.legal-screen strong{color:#f3ede1}
.legal-screen .legal-stand{margin-top:30px;color:#a89e8c;font-size:.8rem}

/* ============================================================
   MOBILE (9:16, mockups app2) — normal page flow, sticky header;
   each page restyled 1:1 after its phone mockup
   ============================================================ */
@media(max-width:860px){
  :root{--hh:62px;--fh:0px}
  html{height:auto;display:block;overflow:auto;background:var(--bg-2)}
  body{width:auto;height:auto;min-height:100dvh;overflow:visible;display:flex;flex-direction:column}
  .site-footer{display:none}                 /* footer lives in the drawer on mobile */
  .site-header{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,var(--bg),var(--bg-2));border-bottom:1px solid var(--line-soft)}
  .screen{display:block;overflow:visible;flex:1 1 auto}
  .screen > .container{display:block;height:auto;padding:16px}

  /* ---- HOME (mock 191222): centered hero copy + bordered booking card ---- */
  body.home{height:100dvh;overflow:hidden}
  body.home .site-header{position:sticky;background:linear-gradient(180deg,var(--bg),var(--bg-2));border-bottom:1px solid var(--line-soft)}
  .hero-screen{display:flex;height:calc(100dvh - 62px)}
  .hero-screen > .container{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:24px;padding:0 14px 15px}
  .hero-screen .hero-bg::after{background:linear-gradient(180deg,rgba(10,7,4,.32) 0%,rgba(10,7,4,.4) 28%,rgba(10,7,4,.14) 48%,rgba(10,7,4,.45) 100%)}
  .hero-screen .hero-copy{text-align:center;margin-bottom:50px}
  .hero-screen .hero-copy .eyebrow{letter-spacing:5px;font-size:.8rem;color:#d8b97e;margin-bottom:24px}
  .hero-screen .hero-title{font-size:clamp(2.4rem,13.5vw,3.65rem);line-height:1.06;letter-spacing:2px}
  .hero-screen .hero-title span:first-child,
  .hero-screen .hero-title span:last-child{letter-spacing:2px}
  .hero-screen .booking-bar{position:relative;left:auto;bottom:auto;width:100%;height:auto;margin:0 auto;max-width:342px;align-items:stretch;
    flex-direction:column;gap:0;padding:4px 18px 16px;border-radius:20px;
    background:linear-gradient(180deg,rgba(44,34,22,.55),rgba(24,18,12,.62));
    border:1px solid rgba(206,170,110,.65);backdrop-filter:none}
  /* blur via ::before so the bar is no longer a containing block for fixed overlays */
  .hero-screen .booking-bar::before{content:"";position:absolute;inset:0;border-radius:20px;
    backdrop-filter:blur(14px);z-index:-1}
  .booking-bar{backdrop-filter:none !important}
  .bb-field{display:flex;flex-direction:row;align-items:center;gap:14px;padding:13px 2px;border-radius:0;background:none}
  .bb-field:hover{background:none}
  .bb-field + .bb-field{border-top:1px solid rgba(201,160,99,.28);border-left:none}
  .bb-ic{display:flex;width:44px;height:44px;flex:none;border-radius:13px;align-items:center;justify-content:center;
    color:#3a2c14;background:linear-gradient(160deg,#e0c07c,#b08d51)}
  .bb-ic svg{width:20px;height:20px}
  .bb-text{display:flex;flex-direction:column;gap:1px}
  .bb-label{text-transform:none;letter-spacing:.4px;font-size:.8rem;color:#d8b97e}
  .bb-value{font-size:1.04rem;color:#fdfaf3}
  .bb-chev{display:block;width:18px;height:18px;color:var(--gold);margin-left:auto;flex:none}
  .bb-search{margin-top:12px;padding:0;align-self:stretch}
  .bb-search .btn{width:100%;padding:13px;font-size:.88rem;text-transform:uppercase;letter-spacing:2px;
    background:linear-gradient(180deg,#d9bc79,#bd9a55);color:#3a2c14;border-radius:999px}

  /* carousels on mobile: dots only, no arrow buttons, equal round dots */
  .carousel .c-btn{display:none}
  .carousel .dots i.on{width:7px;border-radius:50%;background:var(--gold-1)}

  /* overlays: calendar + guests as centered sheets (mocks 210729 / 211007) */
  .dropdown{position:fixed;left:22px;right:22px;top:50%;bottom:auto;transform:translateY(-50%) !important;max-width:450px;margin-left:auto;margin-right:auto;
    max-height:88vh;overflow:auto;z-index:55;border-radius:18px;
    background:rgba(24,18,11,.92);border:1px solid rgba(201,160,99,.55);backdrop-filter:blur(18px)}
  .dropdown-cal{left:12px;right:12px;top:auto !important;bottom:0;transform:none !important;
    height:calc(100dvh - 130px);max-height:none;border-radius:22px 22px 0 0;
    display:flex;flex-direction:column;padding:10px 16px 16px;background:rgba(24,18,11,.96)}
  .dropdown-cal:not(.open){display:none}
  /* strict flex chain so the grid fills #calRoot exactly and the last date row
     can't overflow onto the Anreise/Abreise summary below it */
  .dropdown-cal #calRoot{flex:1 1 auto;min-height:0;display:flex}
  .dropdown-cal .cal-months{flex:1;min-height:0}
  .dropdown-cal .cal{display:flex;flex-direction:column;min-height:0}
  .dropdown-cal .cal-grid{flex:1;min-height:0;grid-template-rows:20px;grid-auto-rows:minmax(0,1fr);row-gap:4px}
  .dropdown-cal .cal-day{aspect-ratio:auto;min-height:0}
  .cal-summ{display:flex;align-items:center;gap:12px;border-top:1px solid rgba(201,160,99,.35);
    padding:12px 2px 0;margin-top:6px}
  .cal-summ svg{color:#d8b97e;flex:none;margin-right:2px}
  .cal-summ .cs-cell{display:flex;align-items:center;gap:10px;flex:1}
  .cal-summ .cs-cell + .cs-cell{border-left:1px solid rgba(201,160,99,.35);padding-left:14px}
  .cal-summ b{display:block;font-weight:500;color:#f6f0e2;font-size:.9rem}
  .cal-summ span{display:block;color:#c9ab77;font-size:.76rem;margin-top:1px}
  .dropdown-cal .cal + .cal{display:none}   /* single month on mobile, as in the mockup */
  .dropdown-cal::after,.dropdown-guests::after{display:none}
  .dropdown-cal::before{content:"";display:block;width:64px;height:5px;border-radius:3px;margin:4px auto 10px;
    background:linear-gradient(90deg,#d9bc79,#bd9a55)}
  .cal{width:100%;min-width:0}
  .cal-grid{grid-template-columns:repeat(7,1fr)}
  .cal-summ b{white-space:nowrap;font-size:.88rem}
  .cal-head{background:none;height:40px;margin-bottom:2px}
  .cal-title{font-family:var(--f-display);font-weight:600;font-size:1.5rem;color:#e7cf9f}
  .cal-nav{color:#d8b97e;font-size:1.7rem}
  .cal-dow{color:#c9ab77;font-size:.86rem}
  .cal-day{border-radius:9px}
  .dropdown-cal .apply{margin-top:14px;padding:11px;font-size:.92rem;border-radius:999px;
    background:linear-gradient(180deg,#e0c07c,#c3a057);color:#33260f}
  .dropdown-guests{left:34px;right:34px;width:auto;padding:18px 20px}
  .gd-sum{text-align:center;border-top:1px solid rgba(201,160,99,.35);padding:14px 0 2px;margin-top:6px;
    color:#f6f0e2;font-size:1.05rem}
  .g-sub.show-mobile{display:block}
  .gd-head{font-family:var(--f-display);font-weight:600;font-size:1.5rem;color:#e7cf9f;text-align:center;
    padding-bottom:12px;border-bottom:1px solid rgba(201,160,99,.4)}
  .guest-row{padding:13px 0}
  .guest-row .g-name{font-size:1rem}
  .guest-row .g-sub{font-size:.74rem}
  .stepper button{width:32px;height:32px;background:none;border:1.5px solid var(--gold);color:#e7cf9f}
  .dropdown .apply{padding:11px;font-size:.92rem}

  /* drawer (mock 204622): narrower panel, labeled WhatsApp row */
  .drawer{width:min(305px,74vw);padding:20px 22px}
  .drawer-nav a{font-size:1.08rem;padding:19px 4px}
  .drawer-nav a .ic{width:24px;height:24px}
  .drawer-contact .row{align-items:flex-start;font-size:1rem}
  .drawer-contact{gap:18px}
  .drawer-head .brand .wordmark{font-size:1.18rem}
  /* dark drawer per mock 204622: solid #393130 panel, cream text, gold icons */
  .drawer{width:285px;background:#393130;border-left:none;border-radius:26px 0 0 26px;
    box-shadow:-18px 0 44px rgba(0,0,0,.45)}
  .drawer .wordmark{color:#efe4d0}
  .drawer-close{color:#efe4d0;font-size:1.7rem}
  .drawer-nav a{color:#f4efe5;border-bottom:1px solid rgba(201,160,99,.28)}
  .drawer-nav a .ic{color:#d3ab64}
  .drawer-contact{border-top:1px solid rgba(201,160,99,.28);padding-top:18px;color:#f4efe5}
  .drawer-contact .row{color:#f4efe5}
  .drawer-contact .ic{color:#d3ab64}
  .drawer-foot,.drawer-foot a{color:#e5dcc9}
  .wa-label{display:flex;align-items:center;gap:7px;color:#faf7f0;font-weight:500}
  .wa-check{width:15px;height:15px;color:#c7a670}

  /* ---- ROOMS SHOWCASE -> "Our Rooms" cards (mock 183712) ---- */
  .showcase-page .site-header.solid{background:linear-gradient(180deg,var(--bg),var(--bg-2));border-bottom-color:var(--line-soft)}
  .showcase-screen{background:var(--bg-2)}
  .rooms-mtitle{display:block;text-align:center;font-family:var(--f-display);font-weight:600;
    font-size:2.15rem;color:#fdf8ee;margin:20px 16px 0}
  .suite-strip{display:block;overflow:visible;padding:14px 16px 22px}
  .suite-panel,.suite-panel:hover{display:block;flex:none;margin:0 0 16px;height:auto;border-radius:14px;
    border:1px solid rgba(206,170,110,.45);background:rgba(30,24,18,.6);box-shadow:none;overflow:hidden}
  .suite-panel img{position:static;height:205px;border-radius:13px 13px 0 0}
  .suite-panel:hover img{transform:none}
  .sp-shade{display:none}
  .sp-body,.suite-panel:hover .sp-body{padding:13px 16px 15px;text-align:left}
  .suite-panel h2,.suite-panel:hover h2{display:block;font-size:1.5rem;color:#fbf7ef;padding:0 0 10px;
    border-bottom:1px solid rgba(201,160,99,.45);text-shadow:none}
  .suite-panel h2 br{display:none}
  .sp-meta{justify-content:flex-start;gap:15px;margin-top:11px;font-size:.86rem;color:#f2ede3;text-shadow:none;flex-wrap:wrap}
  .sp-meta svg{width:16px;height:16px}
  .sp-price{display:inline-flex;align-items:center;gap:7px;color:#e7cf9f;white-space:nowrap}
  /* whole .suite-panel card is an <a href="room.html?code=…">, so the CTA is
     redundant on mobile — hide it (tap anywhere on the card opens the room).
     Scoped to .suite-panel (rooms.html only; available/booking use .btn-select)
     AND needs the extra specificity (0,2,0) to beat .sp-meta > span (0,1,1),
     which the CTA is a child of and which sets display:inline-flex. */
  .suite-panel .sp-cta{display:none}

  /* ---- AVAILABLE (mock 084603): summary bar, head row, room cards ---- */
  .rooms-screen::before{display:none}
  .rooms-screen{background:var(--bg-2)}
  .rooms-screen > .container{padding:0 16px 22px}
  .booking-bar.bar-page{display:none}
  .rooms-title{display:none}
  .avail-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:15px 0;border-bottom:1px solid var(--line-soft);font-size:.97rem;color:#f8ead9}
  .avail-top a{color:#b3956f;text-decoration:underline;font-size:.9rem}
  .avail-head{display:flex;align-items:baseline;justify-content:space-between;margin:26px 0 20px}
  .avail-head h2{font-family:var(--f-display);font-weight:600;font-size:1.75rem;color:#f8e6d1}
  .avail-head a{color:var(--gold-1);text-decoration:underline;font-size:.84rem}
  .rooms-scroll{margin:0 auto;width:auto;max-width:560px;padding:0;overflow:visible}
  .avail-top,.avail-head{max-width:560px;margin-left:auto;margin-right:auto}
  .rooms-grid{grid-template-columns:1fr;gap:16px;padding-bottom:0}
  .rooms-grid .room-card{background:rgba(30,24,18,.55);border:1px solid rgba(206,170,110,.5)}
  .rooms-grid .carousel{height:160px}
  .rooms-grid .room-body{display:grid;grid-template-columns:1fr auto;grid-template-areas:"t p" "m m" "b b";
    gap:2px 10px;padding:10px 14px 12px}
  .rooms-grid .room-body h3{grid-area:t;font-size:1.2rem;border:none;padding:0;display:block;color:#fcefdd}
  .rooms-grid .price{grid-area:p;align-self:center}
  .rooms-grid .price b{font-size:1.08rem;color:#c9a670;font-family:var(--f-ui);font-weight:600;letter-spacing:.3px}
  .rooms-grid .price em{color:#a89272;font-size:.78rem}
  .rooms-grid .room-card > img{height:280px;object-fit:cover}
  .rooms-grid .room-meta{grid-area:m;margin:0;font-size:.83rem;color:#fbf3e7;font-weight:500}
  .rooms-grid .room-meta svg{display:none}
  .rooms-grid .room-foot{display:contents}
  .rooms-grid .btn-select{grid-area:b;width:100%;margin-top:6px;padding:7px;font-size:.92rem;
    background:linear-gradient(180deg,#d9bc79,#bd9a55);color:#3a2c14}

  /* ---- ROOM DETAIL (mock 093742): back row, photo, title, chips, price ---- */
  .back-row{display:flex;align-items:center;height:60px;padding:0 16px;color:#f3e9d8;border-bottom:none;background:#2d2220}
  .back-row svg{width:22px;height:22px}
  .detail-screen::before{display:none}
  .detail-screen{background:#2b231e}
  .detail-screen > .container{padding:0}
  .detail-screen .detail-grid{display:block;margin:0}
  .detail-screen .detail-left{width:auto;height:auto;border:none;border-radius:0;background:none;display:block}
  .detail-screen .gallery-main{border-radius:0;display:block}
  .detail-screen .gallery-main .carousel{height:266px;width:auto}
  .detail-screen .t-prev,.detail-screen .t-next{display:none}
  .detail-screen .thumb-strip,.detail-screen .t-prev{display:none}
  .detail-screen .detail-panel{width:auto;height:auto;margin:0;padding:32px 18px 22px;overflow:visible;display:block;
    background:none;border:none;border-radius:0;backdrop-filter:none}
  .detail-screen .detail-panel h2{font-size:2.4rem;color:#f6ecd9}
  .detail-screen .detail-panel .sub{margin:7px 0 0;padding-bottom:0;border-bottom:none;font-size:1.02rem;color:#faf0e2}
  .detail-screen .detail-panel p.desc{display:none}
  .detail-screen .amenities{display:flex;flex-wrap:wrap;gap:12px 9px;margin:15px 0 2px}
  .detail-screen .amenity{flex-direction:row;gap:8px;border:1px solid rgba(201,160,99,.65);border-radius:999px;
    padding:3px 14px;font-size:.95rem;line-height:1.3;color:#f3e8d7;font-weight:500;background:none}
  .detail-screen .amenity svg{width:18px;height:18px;color:var(--gold)}
  .detail-screen .detail-price{border-top:1px solid var(--line-soft);margin:27px 0 0;padding-top:15px;text-align:left}
  .detail-screen .p-main em{font-size:1rem;color:#c0a175}
  .detail-screen .p-main b{font-size:1.75rem;color:#faf3e2}
  .detail-screen .p-sub{font-size:.95rem;font-weight:400;color:#fdf8ee;margin-top:5px}
  .detail-screen .p-sub b{color:#c9a670}
  .detail-screen .book-now{margin-top:18px;padding:9px 10px;font-size:1.1rem;font-weight:500;
    background:#bc9b65;color:#faf4e4;box-shadow:none}
  .detail-screen .carousel .dots{bottom:5px}
  .detail-screen .carousel .count{bottom:5px}

  /* ---- GALLERY (mock 090045): title, chip filters, bordered 2-col grid ---- */
  .gallery-bg{display:none}
  .gallery-screen{background:var(--bg-2)}
  .gallery-screen > .container{padding:6px 16px 22px}
  .gallery-title-m{display:block;font-family:var(--f-display);font-weight:600;font-size:2.55rem;color:#f3e9d8;margin:10px 0 14px}
  .gallery-screen .filter-bar{position:static;transform:none;width:auto;height:auto;margin:0 0 16px;padding:0;
    background:none;border:none;border-radius:0;backdrop-filter:none;
    display:flex;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .gallery-screen .filter-bar::-webkit-scrollbar{display:none}
  .gallery-screen .filter-bar button{flex:0 0 auto;font-size:.85rem;color:#efe9dd;padding:7px 16px;
    border:1px solid var(--line);border-radius:999px;background:none}
  .gallery-screen .filter-bar button svg{display:none}
  .gallery-screen .filter-bar button.active{background:linear-gradient(180deg,#d9bc79,#bd9a55);color:#3a2c14;border-color:transparent}
  .gallery-screen .gallery-thumbs-wrap{display:none}
  .gallery-screen .gallery-grid-m{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:238px;gap:13px}
  .gallery-screen .gallery-grid-m figure{margin:0;border-radius:12px;overflow:hidden;position:relative;
    border:1px solid rgba(206,170,110,.5)}
  .gallery-screen .gallery-grid-m figure.hide{display:none}
  .gallery-screen .gallery-grid-m img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

  /* ---- BREAKFAST (mock 090719): photo, centered title+desc, hours card, 2 pics ---- */
  .cafe-screen > .container{padding:0}
  .cafe-band{display:block;height:275px;flex:none;position:relative;border-radius:0}
  .cafe-band img{display:none;width:100%;height:100%;object-fit:cover}
  .cafe-band img.cb-mob{display:block}
  .cafe-band .cb-title,.cb-arrow{display:none}
  .cafe-mob{padding:4px 18px 24px;text-align:center}
  .cafe-mob h1{font-family:var(--f-display);font-weight:600;font-size:2.95rem;color:#f6ecd9;margin-top:12px}
  .cafe-mob p{font-size:1rem;color:#f7f0e0;line-height:1.55;margin:9px auto 0;max-width:360px}
  .hours-card-m{margin:18px 0 0;border:1px solid rgba(206,170,110,.5);border-radius:14px;
    background:rgba(255,255,255,.02);padding:4px 18px;text-align:left}
  .hrow-m{display:flex;align-items:center;gap:14px;padding:6px 0;font-size:1rem;color:#f7f2ea}
  .hrow-m + .hrow-m{border-top:1px solid var(--line-soft)}
  .hrow-m svg{width:22px;height:22px;color:var(--gold);flex:none}
  .hrow-m b{margin-left:auto;font-weight:400;color:#f7f2ea}
  .cafe-mob .cafe-serve{max-width:360px;font-size:.95rem;color:#f7f0e0;margin-top:16px}
  .cafe-pics-m{display:flex;gap:13px;margin-top:15px}
  .cafe-pics-m img{width:calc(50% - 7px);height:114px;object-fit:cover;border-radius:12px;border:1px solid rgba(206,170,110,.5)}
  .cafe-cols{display:none}
  .cafe-screen .feature-bar{display:none}

  /* ---- CONFERENCE (mock 094224): photo, copy, two cards side by side w/ photos ---- */
  .conf-screen{display:block}
  .conf-screen .conf-bg{position:relative;inset:auto;height:225px;z-index:0;background-image:url(../images/conference-hall.jpg) !important}
  .conf-screen .conf-bg::after{background:linear-gradient(180deg,rgba(12,8,5,0) 40%,rgba(12,8,5,.75))}
  .conf-screen > .container{padding:14px 16px 22px}
  .conf-hero-copy{margin:0;max-width:none}
  .conf-hero-copy .eyebrow{margin-top:0;font-size:.7rem;letter-spacing:2.5px}
  .conf-hero-copy h1{font-size:1.17rem;line-height:1.3;margin:6px 0 0}
  .conf-hero-copy p{font-size:.78rem;line-height:1.6;margin:8px 0 0;max-width:none;color:#e5ddcc}
  .conf-hero-copy .send-inquiry{margin-top:14px;padding:9px 22px;font-size:.76rem}
  .info-card .feat.show-mobile{display:flex}
  .conf-screen .info-cards{margin:18px 0 0;grid-template-columns:1fr 1fr;gap:13px}
  .conf-screen .info-card{display:flex;flex-direction:column;height:auto;padding:13px;grid-template-columns:none;
    background:rgba(24,18,11,.6);border:1px solid rgba(206,170,110,.5);border-radius:12px}
  .conf-screen .ic-body{display:contents}
  .conf-screen .info-card .ic-head{order:0;margin-bottom:11px;gap:9px}
  .conf-screen .info-card .ic-head .badge{width:28px;height:28px;border-radius:6px}
  .conf-screen .info-card .ic-head .badge svg{width:15px;height:15px}
  .conf-screen .info-card .ic-head h3{font-size:1.08rem;letter-spacing:1px}
  .conf-screen .info-card img{order:1;display:block;width:100%;height:96px;margin:0 0 11px;border-radius:8px}
  .conf-screen .info-card .feat{order:2;padding:0;margin:0 0 9px;font-size:.76rem;line-height:1.35;gap:8px}
  .conf-screen .info-card .feat svg{width:15px;height:15px}
  .conf-screen .info-card .feat:first-of-type,.conf-screen .info-card .feat:last-of-type{margin-top:0;margin-bottom:9px}

  /* ---- CONTACT (mock 094852): fullscreen dark map + gold pin + Kontakt card at bottom ---- */
  .contact-screen{position:relative;display:flex;min-height:calc(100dvh - 62px)}
  .contact-screen .contact-bg{position:absolute;inset:0;height:auto;flex:none;margin:0;border-radius:0;
    background:url(../images/map.jpg) center/cover;
    filter:invert(.88) hue-rotate(180deg) saturate(.35) brightness(.95)}
  .contact-screen .contact-bg::after{display:none}
  .map-pin-m{display:flex;position:absolute;z-index:1;left:50%;top:112px;transform:translateX(-50%);
    flex-direction:column;align-items:center;gap:6px;color:#d3a86c;pointer-events:none}
  .map-pin-m svg{width:44px;height:44px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
  .map-pin-m span{font-size:1rem;font-weight:500;color:#f3e9d8;text-shadow:0 1px 4px rgba(0,0,0,.8)}
  .contact-screen > .container{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
    width:100%;padding:16px 40px 25px;pointer-events:none}
  .contact-screen .section-title{display:none}
  .contact-screen .contact-grid{display:block;overflow:visible}
  .contact-screen .contact-card{position:static;width:auto;height:auto;max-width:400px;margin:0 auto;pointer-events:auto;
    background:rgba(43,37,33,.96);border:1px solid rgba(206,170,110,.35);border-radius:24px;padding:20px 22px 22px}
  .ct-title-m{display:block;font-family:var(--f-display);font-weight:600;font-size:1.7rem;color:#f3e9d8;
    text-align:center;margin:2px 0 8px}
  .contact-screen .contact-row{height:auto;align-items:center;gap:16px;padding:10px 0;margin:0;border-bottom:1px solid var(--line-soft)}
  .contact-screen .contact-row:nth-child(1),.contact-screen .contact-row:nth-child(3){height:auto}
  .contact-screen .contact-row .badge{width:46px;height:46px;border-radius:13px;background:var(--gold-grad)}
  .contact-screen .contact-row .badge svg{width:20px;height:20px;color:var(--dark-text)}
  .contact-screen .contact-row .ct-label{display:none}
  .contact-screen .contact-row .ct-val{margin-top:0;font-size:1.02rem;line-height:1.35;color:#f5f0e6}
  .contact-screen form.contact-card{display:none}
  .ct-send-m{margin-top:16px;padding:12px;font-size:.98rem;font-weight:500;pointer-events:auto;text-align:center;
    background:#bc9b65;color:#faf4e4;box-shadow:none}
  .br-m{display:inline}

  /* ---- BOOKING shared: gold steps band on all three pages (mocks 1751/1806/1813) ---- */
  .stepper-bar{background:linear-gradient(180deg,#d9bc79,#c2a05c);border:none}
  .stepper-bar .container{justify-content:center;gap:10px;padding:11px 12px;flex-wrap:nowrap}
  .stepper-bar .step{font-size:.82rem;color:#5a4525;white-space:nowrap}
  .stepper-bar .step.active{color:#2e2210;font-weight:600}
  .stepper-bar .step.active::after{display:none}
  .stepper-bar .step.done{color:#4a3a1d}
  .stepper-bar .step .tick{display:none}
  .stepper-bar .s-sep{color:#8a713c}
  .booking-screen{background:var(--bg-2)}
  .booking-screen > .container{padding:14px 16px 24px}
  .booking-screen .section-title{position:static;margin:2px 0 14px;font-size:2rem;color:#e7cf9f;text-align:left}
  .booking-screen .booking-grid{display:flex;flex-direction:column;margin:0;gap:0;align-items:stretch}

  /* extras (mock 175148): stadium rows with icons + compact summary */
  .steps-band{margin:0;box-shadow:none}
  .booking-screen .booking-main,.booking-screen .summary-card{height:auto}
  .extras-screen .summary-card{width:auto}
  .steps-band .container{height:52px}
  .steps-band .step{font-size:1rem}
  .confirm-screen .confirm-card{width:auto;height:auto;border:none;background:none;backdrop-filter:none;margin-top:6px;padding:12px 6px}
  .extras-screen .extras-visual{display:none}
  .extras-screen{position:relative;background:#372e2d}
  .extras-screen > .container{padding:14px 18px 30px}
  .extras-screen .ex-back{position:absolute;top:8px;right:0;z-index:5;display:flex;align-items:center;justify-content:center;
    width:48px;height:36px;border-radius:12px 0 0 12px;background:rgba(255,255,255,.08);color:#d3a86c}
  .extras-screen .ex-back svg{width:22px;height:22px}
  .extras-screen .section-title{margin:24px 0 30px;font-size:2.5rem;color:#e2ba8c}
  .extras-screen .booking-main{position:static;width:auto;margin:0;padding:0}
  .extras-screen .extra-row{height:auto;min-height:78px;padding:10px 20px 10px 22px;margin-bottom:15px;gap:16px;
    border-radius:999px;background:#2b2220;border:1px solid rgba(206,170,110,.7)}
  .extras-screen .extra-row:first-child{height:auto;margin-bottom:15px}
  .extras-screen .e-ic{width:44px;height:44px;padding:0;border:none;stroke-width:1.9}
  .extras-screen .cancel-note{margin:-8px 16px 15px 82px}
  .extras-screen .switch{width:56px;height:30px}
  .extras-screen .switch .track::before{width:24px;height:24px}
  .extras-screen .switch input:checked + .track{background:#cda570}
  .extras-screen .switch input:checked + .track::before{transform:translateX(26px)}
  .extras-screen .ex-back{height:38px}
  .extras-screen .ex-back svg{width:24px;height:24px}
  .extras-screen .e-name{font-size:1.25rem;line-height:1.2;color:#f5ecdf}
  .extras-screen .e-desc{font-size:.88rem;color:#e8dfd2;line-height:1.22}
  .extras-screen .e-desc b{color:#d3a86c}
  .extras-screen .persons-mini .pm-label{color:#d3a86c;font-size:.9rem;font-weight:500;margin-bottom:4px}
  .extras-screen .stepper button{width:30px;height:27px;border-radius:8px;background:#cda570;border:none;color:#2f2417;font-weight:600}
  .extras-screen .stepper .val{color:#f5ecdf}
  .extras-screen .booking-main .extra-row:nth-child(5){display:none}   /* Spa hidden as in mock */
  .booking-screen .summary-card{position:static;width:auto;height:auto;margin:4px 0 0;padding:6px 18px 16px;display:block;
    background:rgba(30,24,18,.6);border:1px solid rgba(206,170,110,.5);border-radius:14px}
  .extras-screen .summary-card{margin:2px 0 0;padding:0;background:none;border:none}
  .extras-screen .sum-box{border:1px solid rgba(206,170,110,.7);border-radius:22px;background:#2b2220;padding:9px 22px}
  .extras-screen .sum-box > .sum-divider:first-child{display:none}
  .extras-screen .sum-box .sum-row{padding:5px 0;font-size:.95rem;line-height:1.4}
  .extras-screen .sum-box .sum-row .lbl,.extras-screen .sum-box .sum-row span:last-child{color:#f0e8da}
  .extras-screen .sum-box .sum-total{font-size:1.1rem;line-height:1.4;color:#d3a86c;padding-top:9px;margin-top:2px}
  .extras-screen .sum-box .sum-total span{color:#d3a86c}
  .extras-screen .summary-card .next-btn{margin-top:14px;padding:13px;font-size:1.35rem;font-family:var(--f-display);font-weight:600;
    color:#2f2417;background:#cda570;box-shadow:none;border-radius:999px}
  .details-screen .summary-card{display:none}
  .bd-sum-m{margin:87px 0 0}
  .bd-sum-title{font-family:var(--f-display);font-weight:600;font-size:1.5rem;color:#dcb78a;margin-bottom:12px}
  .bd-box{border:1px solid rgba(206,170,110,.7);border-radius:22px;padding:12px 22px;background:#332626}
  .bd-row{display:flex;justify-content:space-between;padding:5px 0;font-size:.95rem;line-height:1.4;color:#f0e8da}
  .bd-row b{font-weight:400;color:#f0e8da}
  .bd-row.bd-total{border-top:1px solid rgba(201,160,99,.4);margin-top:2px;padding-top:9px;font-weight:600;font-size:1.1rem}
  .bd-row.bd-total span{color:#d3a86c}.bd-row.bd-total b{color:#d3a86c;font-weight:600}
  .bd-next-m{margin-top:22px;padding:13px;border-radius:999px;font-size:1.35rem;font-family:var(--f-display);font-weight:600;
    background:#cda570;color:#2f2417;box-shadow:none;text-align:center}
  .extras-screen .summary-card > :nth-child(-n+6){display:none}  /* eyebrow, title, room/dates/guests */
  .booking-screen .sum-row{padding:4px 0;font-size:.88rem}
  .booking-screen .sum-divider{margin:8px 0}
  .booking-screen .sum-total{font-size:1.05rem;padding-top:9px;margin-top:4px}
  .summary-card .next-btn{margin-top:14px;padding:12px;width:100%;
    background:linear-gradient(180deg,#d9bc79,#bd9a55);color:#3a2c14}

  /* details (mock 180611): stadium inputs w/ icons, summary card, secure pay, pay button */
  .details-screen{background:#403536}
  .details-screen .section-title{margin:0 0 20px;font-size:2.5rem;color:#e2ba8c}
  .booking-screen form.booking-main{display:contents}
  .booking-main .gd-title{display:none}
  .booking-screen .form-2col{display:block;margin:0 !important}
  .booking-screen .form-field{margin-bottom:8px;position:relative}
  .booking-screen .form-field label{display:none}
  .booking-screen .form-field .fi-ic{display:block;position:absolute;left:17px;top:50%;transform:translateY(-50%);
    width:18px;height:18px;color:#d3a86c}
  .booking-screen .form-field input{height:41px;border-radius:999px;padding:0 18px 0 46px;font-size:.95rem;color:#f3ead9;
    background:#332626;border:1px solid rgba(206,170,110,.6)}
  .booking-screen .form-field input::placeholder{color:#e6dbc9}
  .booking-screen .summary-card h3{font-size:1.3rem;color:#d3ab64;margin:10px 0 4px}
  .booking-screen .secure-pay{order:5;margin:20px 2px 0;color:#f0e8da;font-size:.98rem}
  .details-screen .secure-pay .lock svg{width:20px;height:20px;color:#d3a86c;stroke-width:1.4}
  .details-screen .secure-pay .lock svg rect{fill:#d3a86c}
  .details-screen .secure-pay .cards .pb{background:#d2a779;color:#33261a;border-radius:5px;width:46px;height:26px}
  .details-screen .secure-pay .cards .pb-mc i{background:#3a2c1e;mix-blend-mode:normal}
  .details-screen .secure-pay .cards .pb-mc i + i{background:#5a4632;mix-blend-mode:normal}
  .booking-screen .summary-card .back-link{display:none}
  .booking-screen .summary-card > :nth-child(n+2):nth-child(-n+5){display:none}
  .booking-screen form .secure-pay ~ *{order:6}
  .confirm-screen .booking-grid{display:flex;flex-direction:column;gap:16px;margin:0}
  /* payment step keeps the full booking summary on mobile (shared booking-screen rules would condense it) */
  .pay-view .summary-card > :nth-child(n+2):nth-child(-n+5){display:flex}
  .pay-view .summary-card .back-link{display:block}

  /* confirm (mock 181317): filled gold check, labeled summary, stacked buttons */
  .confirm-screen{background:#403536}
  .confirm-screen > .container{display:block;padding:14px 18px 24px}
  .confirm-screen .confirm-card{width:auto;height:auto;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;
    background:none;border:none;backdrop-filter:none}
  .confirm-screen .confirm-check{width:78px;height:78px;margin:4px 0 0;border:none;background:#d9ad74}
  .confirm-screen .confirm-check svg{width:40px;height:40px;color:#fff}
  .confirm-screen .confirm-card h2{font-size:2.6rem;color:#e0b287;margin:16px 0 0}
  .confirm-screen .confirm-card .thanks{font-size:1.02rem;color:#f5edda;margin:8px 0 0}
  .confirm-screen .confirm-card .bnr{font-size:1.02rem;color:#d3a86c;font-weight:600;margin:14px 0 0}
  .csm-label{display:block;width:100%;text-align:left;font-family:var(--f-display);font-weight:600;font-size:1.5rem;color:#dcb78a;margin:3px 0 0}
  .confirm-summary-m{display:block;width:100%;margin:12px 0 0;padding:9px 22px;text-align:left;
    background:#332626;border:1px solid rgba(206,170,110,.7);border-radius:22px}
  .csm-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:.95rem;line-height:1.4;color:#f0e8da}
  .csm-row b{font-weight:400;color:#f0e8da}
  .csm-row span{color:#f0e8da}
  .csm-row.csm-total{border-top:1px solid rgba(201,160,99,.4);margin-top:3px;padding:11px 0 8px;font-size:1.05rem}
  .csm-row.csm-total span{color:#d3a86c;font-weight:600}
  .csm-row.csm-total b{color:#d3a86c;font-weight:600}
  .confirm-screen .confirm-summary{display:none}
  .confirm-screen .confirm-actions{flex-direction:column;width:100%;margin:16px 0 0;gap:12px}
  .confirm-screen .confirm-actions .btn{width:100%;padding:13px;font-size:1.12rem;font-weight:600;border-radius:999px}
  .confirm-screen .dl-btn{background:#d2a878;color:#3a2a1a;box-shadow:none}
  .confirm-screen .home-btn{color:#e8c79a;border:1.5px solid rgba(206,170,110,.8)}
  .confirm-screen .mail-note{order:9;margin-top:24px;font-size:.95rem;color:#f5edda}
}

/* very narrow phones (<=400px): compact header */
@media(max-width:400px){
  .brand .wordmark{font-size:.78rem;letter-spacing:.6px}
  .brand{gap:7px}
  .header-right{gap:7px}
  .inline-lang::before{margin-right:7px}
  .inline-lang .lang-toggle{padding:3px 7px;gap:4px}
  .icon-btn{width:31px;height:31px}
  .sp-meta{gap:10px;font-size:.8rem}
}


/* ---------- "Jetzt einziehen?" — Nachtbuchung (Modalka nach der Datumswahl) ----------
   Aufbau wie im abgestimmten Makett: zwei waehlbare Zeilen mit "ab"-Summe, darunter ein Knopf.
   Farben und Radien kommen aus den Variablen, damit die Karte zum Haus passt. */
.nightcard{width:100%;max-width:420px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 18px;box-shadow:var(--shadow)}
.nightcard-h{font-family:var(--f-display);font-weight:500;font-size:1.32rem;margin-bottom:8px;color:var(--gold-1)}
.nightcard-p{margin:0 0 14px;color:var(--muted);font-size:.9rem;line-height:1.5}
.nightopt{display:block;width:100%;text-align:left;border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:12px 14px;background:rgba(38,30,22,.5);color:var(--text);
  margin-bottom:10px;cursor:pointer;font-family:var(--f-ui);font-size:.95rem}
.nightopt:hover{border-color:var(--line)}
.nightopt.sel{border-color:var(--gold);background:rgba(201,160,99,.10)}
.nightopt-t{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.nightopt-l{font-weight:500}
.nightopt-s{font-family:var(--f-display);font-size:1.18rem;color:var(--gold-1);white-space:nowrap}
.nightopt-m{display:block;color:var(--muted);font-size:.82rem;margin-top:2px}
.nightgo{width:100%;margin-top:4px}
.nightcard-hint{margin-top:12px;color:var(--muted);font-size:.78rem;line-height:1.45}
@media (max-width:520px){ .nightcard{max-width:none} }

/* ---------- Türcode-Zustand auf der Bestätigung (nur Nacht-Buchung) ----------
   Drei Zustände, jeder ehrlich: wird erstellt · Zimmer genannt · konnte nicht erstellt werden
   (dann mit der Telefonnummer des Hauses). Kein Zustand behauptet Erfolg, den es nicht gibt. */
.nightpin{margin:14px 0 0;padding:11px 13px;border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);background:rgba(38,30,22,.5);color:var(--muted);font-size:.88rem;
  line-height:1.45}
.nightpin.good{border-color:var(--line);color:var(--text)}
.nightpin.bad{border-color:rgba(200,90,70,.55);background:rgba(200,90,70,.10);color:var(--text)}
.nightpin a{color:var(--gold-1);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* Platzhalter auf der Cafe-Seite, wenn das Haus noch keine eigene Karte hat */
.cafe-soon{margin:10px 0 0;color:#64748b;font-size:15px;line-height:1.55;max-width:34em}
/* Wegweiser auf breakfast.html: wo das Frühstück serviert wird (Haus ohne eigenes Café) */
/* Einwilligungs-Banner - nur im DOM, wenn eine Google-Kennung gesetzt ist */
.nova-consent{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;gap:18px;
  align-items:center;justify-content:center;flex-wrap:wrap;padding:16px 22px;
  background:rgba(12,8,5,.97);border-top:1px solid rgba(201,160,99,.5);color:#f3ede1;
  font-size:.8rem;line-height:1.45;box-shadow:0 -8px 28px rgba(0,0,0,.35)}
/* Flach halten: gemessen sind unter der Suchleiste nur 81 Buehnen-Pixel frei. Deshalb auf dem
   Desktop EIN Fliesstext (Titel fett voran) statt Ueberschrift plus Absatz - sonst verdeckt das
   Banner den "Suchen"-Knopf. Die Einzelheiten stehen einen Klick weiter im Datenschutz. */
.nova-consent{padding:10px 22px}
.nova-consent .nc-text{max-width:860px;color:#d9d2c4}
.nova-consent .nc-text b{font-size:.85rem;color:#f6ecd9}
.nova-consent .nc-btn{padding:9px 16px;min-width:118px}
.nova-consent .nc-text a{color:var(--gold-1);text-decoration:underline}
.nova-consent .nc-btns{display:flex;gap:12px;flex:none}
/* Beide Knoepfe GLEICH: gleiche Groesse, gleiche Farbe, gleicher Rahmen. Ein hervorgehobenes
   "Einverstanden" neben einem blassen "Ablehnen" ist genau die Schieflage, die Aufsichtsbehoerden
   beanstanden - die Wahl muss gleichwertig aussehen, nicht nur gleich gross sein. */
.nova-consent .nc-btn{min-width:150px;padding:11px 20px;border-radius:8px;cursor:pointer;
  font-family:inherit;font-size:.85rem;letter-spacing:.5px;text-transform:uppercase;
  border:1px solid var(--gold-1);background:rgba(201,160,99,.14);color:var(--gold-1)}
.nova-consent .nc-btn:hover{background:rgba(201,160,99,.26)}
/* Das Banner legt sich VOR die Seite und veraendert keine Groesse. Nur dort, wo die Seite ohnehin
   scrollt (Telefon), bekommt sie unten so viel Abstand wie das Banner hoch ist, und die fixierten
   Auswahl-Listen ruecken entsprechend hoch - beides aendert kein Layout, sondern nur Freiraum. */
@media (max-width:860px){
  body.nc-offen{padding-bottom:var(--nc-h,0px)}
  body.nc-offen .dropdown{bottom:calc(16px + var(--nc-h,0px))}
}
@media (max-width:860px){
  .nova-consent{flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px;font-size:.85rem}
  .nova-consent .nc-text b{display:block;font-size:.95rem;margin-bottom:3px}
  .nova-consent .nc-btns{justify-content:stretch}
  .nova-consent .nc-btn{flex:1 1 0;min-width:0}
}
.cafe-serve{margin:16px auto 0;max-width:300px;font-size:.78rem;line-height:1.5;color:#c9c2b4;
  text-align:center;white-space:normal}
.cafe-serve a{color:var(--gold-1);text-decoration:underline}

/* Ausstattungs-Flag: EINE Regel, die jede Layoutregel schlaegt. Ein blosses [hidden]
   genuegt hier NICHT - .contact-row{display:flex} (weiter oben) hat es geschlagen, und die
   Rezeptionszeile stand deshalb leer auf allen sechs Haeusern (gemessen 19.08.2026:
   computed display flex, 279x75 px, Wert leer). Vorbild ist .amenity[hidden] im selben Blatt. */
.nova-flag-off{display:none !important}