/* ============================================================ TOKENS ============ */
:root{
  --color-ink:#1E2B22; --color-ink-soft:#2F4034;
  --color-bg:#FFFFFF; --color-bg-subtle:#F7F7F5; --color-bg-raised:#F0F0ED;
  --color-border:#E8E8E4; --color-border-strong:#CDCDC8;
  --color-accent:#1E2B22;
  --color-text-primary:#1E2B22; --color-text-secondary:#5C6560;
  --color-text-tertiary:#9BA39D; --color-text-inverse:#FFFFFF;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  --text-display:clamp(42px,6vw,80px); --leading-display:1.05; --tracking-display:-0.03em; --weight-display:300;
  --text-h1:clamp(32px,4.5vw,56px); --leading-h1:1.08; --tracking-h1:-0.025em; --weight-h1:400;
  --text-h2:clamp(24px,3vw,40px); --leading-h2:1.12; --tracking-h2:-0.02em; --weight-h2:400;
  --text-h3:clamp(18px,2vw,24px); --leading-h3:1.2; --tracking-h3:-0.01em; --weight-h3:500;
  --text-body:17px; --leading-body:1.65; --tracking-body:-0.002em;
  --text-body-sm:15px; --leading-body-sm:1.6;
  --text-label:11px; --tracking-label:0.12em; --weight-label:500;
  --text-caption:13px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --space-20:80px; --space-24:96px; --space-32:128px; --space-40:160px;
  --section-padding-y:clamp(80px,10vw,140px); --section-padding-y-sm:clamp(48px,6vw,80px);
  --container-max:1200px; --container-pad:clamp(20px,5vw,80px);
  --radius-sm:6px; --radius-md:12px; --radius-lg:18px; --radius-xl:24px; --radius-full:9999px;
  --shadow-card:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.04);
  --shadow-card-hover:0 2px 8px rgba(0,0,0,.08),0 8px 32px rgba(0,0,0,.06);
  --shadow-float:0 10px 40px rgba(30,43,34,.12),0 2px 8px rgba(30,43,34,.06);
  --ease-out:cubic-bezier(0.16,1,0.3,1); --dur:.6s;
  --z-base:1; --z-mobile-cta:80; --z-nav:100; --z-progress:110; --z-backdrop:190; --z-menu:200;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ font-family:var(--font-sans); font-size:var(--text-body); line-height:var(--leading-body); letter-spacing:var(--tracking-body); color:var(--color-text-primary); background:var(--color-bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--color-ink); outline-offset:3px; border-radius:4px; }

.container{ width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--container-pad); }
.section{ padding-block:var(--section-padding-y); }
.section--tight{ padding-block:var(--section-padding-y-sm); }
.section--subtle{ background:var(--color-bg-subtle); }
.eyebrow{ font-size:var(--text-label); font-weight:var(--weight-label); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--color-text-secondary); display:block; margin-bottom:var(--space-4); }
h1,h2,h3{ text-wrap:balance; }
.h2{ font-size:var(--text-h2); line-height:var(--leading-h2); letter-spacing:var(--tracking-h2); font-weight:var(--weight-h2); }
.h3{ font-size:var(--text-h3); line-height:var(--leading-h3); letter-spacing:var(--tracking-h3); font-weight:var(--weight-h3); }
.lede{ color:var(--color-text-secondary); max-width:60ch; text-wrap:pretty; }
.section-head{ max-width:52ch; margin-bottom:var(--space-12); }
.section-head .h2{ margin-bottom:var(--space-4); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); font-size:15px; font-weight:500; letter-spacing:.01em; border-radius:var(--radius-md); cursor:pointer; white-space:nowrap; min-height:44px; transition:background .18s var(--ease-out),border-color .18s var(--ease-out),transform .25s var(--ease-out),color .18s var(--ease-out),box-shadow .25s var(--ease-out); }
.btn-primary{ background:var(--color-ink); color:var(--color-text-inverse); border:1.5px solid var(--color-ink); padding:13px 28px; }
.btn-primary:hover{ background:var(--color-ink-soft); border-color:var(--color-ink-soft); box-shadow:var(--shadow-float); }
.btn-primary:active{ transform:scale(.98); }
.btn-secondary{ background:transparent; color:var(--color-ink); border:1.5px solid var(--color-border-strong); padding:12px 27px; }
.btn-secondary:hover{ border-color:var(--color-ink); background:var(--color-bg-subtle); }
.btn-secondary:active{ transform:scale(.98); }
.btn .icon{ width:18px; height:18px; transition:transform .25s var(--ease-out); }
.btn:hover .icon-arrow{ transform:translateX(3px); }
.btn-nav{ padding:9px 18px; min-height:38px; font-size:14px; }
.icon{ display:inline-block; vertical-align:middle; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }

.progress{ position:fixed; top:0; left:0; height:2.5px; width:0; background:var(--color-ink); z-index:var(--z-progress); transform-origin:left; will-change:width; }

/* NAV */
.nav{ position:fixed; inset:0 0 auto 0; z-index:var(--z-nav); height:84px; display:flex; align-items:center; background:rgba(255,255,255,.72); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid transparent; transition:border-color .3s var(--ease-out),background .3s var(--ease-out),backdrop-filter .3s var(--ease-out); }
.nav.is-scrolled{ border-bottom-color:rgba(232,232,228,.9); background:rgba(255,255,255,.85); }
.nav .container{ max-width:none; padding-inline:clamp(20px,3vw,44px); display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); }
.logo-link{ display:flex; align-items:center; height:84px; }
.logo-link img{ height:48px; width:auto; }

/* NAV over dark hero — Blur erst ab dem ersten Scrollen */
.nav--over{ background:linear-gradient(180deg, rgba(18,26,20,.46), rgba(18,26,20,.16)); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border-bottom-color:rgba(255,255,255,.08); }
.nav--over.nav--top{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; }
.nav--over .logo-link img{ filter:brightness(0) invert(1); }
.nav--over .nav-link{ color:rgba(255,255,255,.82); }
.nav--over .nav-link:hover{ color:#fff; }
.nav--over .nav-link::after{ background:#fff; }
.nav--over .lang-toggle{ border-color:rgba(255,255,255,.45); }
.nav--over .lang-opt{ color:rgba(255,255,255,.6); }
.nav--over .lang-opt:hover{ color:#fff; }
.nav--over .lang-opt.is-active{ color:#fff; }
.nav--over .lang-sep{ color:rgba(255,255,255,.4); }
.nav--over .nav-cta{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.55); color:#fff; }
.nav--over .nav-cta:hover{ background:rgba(255,255,255,.24); border-color:#fff; box-shadow:none; }
.nav--over .nav-toggle{ color:#fff; }
.nav-links{ display:none; align-items:center; gap:var(--space-8); list-style:none; }
.nav-link{ font-size:17px; font-weight:400; color:var(--color-text-secondary); letter-spacing:-.006em; transition:color .15s var(--ease-out); position:relative; }
.nav-link:hover{ color:var(--color-ink); }
.nav-link::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1.5px; background:var(--color-ink); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease-out); }
.nav-link:hover::after{ transform:scaleX(1); }
.nav-actions{ display:flex; align-items:center; gap:var(--space-3); }
.nav-cta{ display:none; }
.nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-right:-10px; background:transparent; border:none; cursor:pointer; color:var(--color-ink); }
.nav-toggle .icon{ width:24px; height:24px; }

/* LANG TOGGLE */
.lang-toggle{ display:inline-flex; align-items:center; gap:5px; border:1px solid var(--color-border-strong); border-radius:var(--radius-full); padding:5px 11px; transition:border-color .15s var(--ease-out); }
.lang-toggle:hover{ border-color:var(--color-ink); }
.lang-opt{ background:none; border:none; cursor:pointer; font:inherit; font-size:13px; font-weight:500; letter-spacing:.03em; color:var(--color-text-tertiary); padding:0; line-height:1; transition:color .15s var(--ease-out); }
.lang-opt:hover{ color:var(--color-ink-soft); }
.lang-opt.is-active{ color:var(--color-ink); }
.lang-sep{ color:var(--color-border-strong); font-size:12px; }

.menu-backdrop{ position:fixed; inset:0; z-index:var(--z-backdrop); background:rgba(30,43,34,.32); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .3s var(--ease-out),visibility .3s; }
.menu-backdrop.is-open{ opacity:1; visibility:visible; }
.mobile-menu{ position:fixed; top:0; right:0; bottom:0; z-index:var(--z-menu); width:min(84vw,340px); background:var(--color-bg); box-shadow:-8px 0 40px rgba(0,0,0,.10); transform:translateX(100%); transition:transform .4s var(--ease-out); display:flex; flex-direction:column; padding:var(--space-5) var(--space-6) calc(var(--space-8) + env(safe-area-inset-bottom)); }
.mobile-menu.is-open{ transform:translateX(0); }
.mobile-menu__top{ display:flex; align-items:center; justify-content:space-between; height:44px; margin-bottom:var(--space-8); }
.mobile-menu__top img{ height:40px; }
.mobile-menu__close{ width:44px; height:44px; margin-right:-10px; display:inline-flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:var(--color-ink); }
.mobile-menu__close .icon{ width:24px; height:24px; }
.mobile-menu__links{ list-style:none; display:flex; flex-direction:column; }
.mobile-menu__links a{ display:flex; align-items:center; min-height:58px; font-size:19px; font-weight:400; letter-spacing:-.02em; color:var(--color-ink); padding:var(--space-2) 0; border-bottom:1px solid var(--color-border); transition:color .15s var(--ease-out); }
.mobile-menu__links li:first-child a{ border-top:1px solid var(--color-border); }
.mobile-menu__links a:active{ color:var(--color-text-secondary); }
.mobile-menu__lang{ display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-8); }
.mobile-menu__lang .cap{ font-size:var(--text-caption); color:var(--color-text-tertiary); }
.mobile-menu .btn{ margin-top:var(--space-5); width:100%; }

/* HERO (full-bleed slideshow) */
.hero{ position:relative; min-height:100svh; display:flex; overflow:hidden; color:#fff; isolation:isolate; }
.hero__slides{ position:absolute; inset:0; z-index:0; background:var(--color-ink); }
.hero__slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.05); transition:opacity 1.6s var(--ease-out), transform 7s linear; will-change:opacity,transform; }
.hero__slide.is-active{ opacity:1; transform:scale(1.12); }
.hero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(18,26,20,.55) 0%, rgba(18,26,20,.14) 12%, transparent 24%),
    linear-gradient(90deg, rgba(18,26,20,.88) 0%, rgba(18,26,20,.56) 42%, rgba(18,26,20,.14) 78%, rgba(18,26,20,.30) 100%),
    linear-gradient(0deg, rgba(18,26,20,.74) 0%, rgba(18,26,20,.10) 44%, transparent 72%); }
.hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--container-pad); padding-block:clamp(120px,20vh,220px) clamp(28px,5vh,56px); display:flex; flex-direction:column; }
.hero__copy{ max-width:min(100%,720px); }
.hero__eyebrow{ margin-bottom:var(--space-5); color:rgba(255,255,255,.72); }
.hero__title{ font-size:var(--text-display); line-height:var(--leading-display); letter-spacing:var(--tracking-display); font-weight:var(--weight-display); color:#fff; }
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero__title .line__inner{ display:block; }
.hero__sub{ margin-top:var(--space-6); font-size:clamp(17px,2.2vw,21px); line-height:1.5; color:rgba(255,255,255,.9); max-width:38ch; font-weight:300; letter-spacing:-.01em; }
.hero__actions{ margin-top:var(--space-8); display:flex; flex-wrap:wrap; gap:var(--space-3); }
.hero .btn-primary{ background:#fff; color:var(--color-ink); border-color:#fff; }
.hero .btn-primary:hover{ background:rgba(255,255,255,.9); border-color:rgba(255,255,255,.9); box-shadow:0 10px 40px rgba(0,0,0,.28); }
.hero .btn-secondary{ color:#fff; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.06); }
.hero .btn-secondary:hover{ border-color:#fff; background:rgba(255,255,255,.16); }
.hero__dots{ position:absolute; z-index:2; right:clamp(12px,2.5vw,30px); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; }
.hero__dot{ width:8px; height:8px; border-radius:50%; border:none; padding:0; cursor:pointer; background:rgba(255,255,255,.4); transition:background .25s var(--ease-out),transform .25s var(--ease-out); }
.hero__dot.is-active{ background:#fff; transform:scale(1.3); }
.hero__dot:hover{ background:rgba(255,255,255,.8); }

.availability{ margin-top:auto; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-float); padding:var(--space-3); display:grid; grid-template-columns:1fr; gap:var(--space-2); }
.hero .availability{ color:var(--color-text-primary); }
.hero .availability .btn-primary{ background:var(--color-ink); color:#fff; border-color:var(--color-ink); }
.hero .availability .btn-primary:hover{ background:var(--color-ink-soft); border-color:var(--color-ink-soft); }
.availability__field{ display:flex; flex-direction:column; gap:2px; padding:10px var(--space-4); border-radius:var(--radius-md); border:1.5px solid transparent; transition:border-color .15s var(--ease-out),background .15s var(--ease-out); cursor:pointer; }
.availability__field:hover{ background:var(--color-bg-subtle); }
.availability__field:focus-within{ border-color:var(--color-ink); background:var(--color-bg); }
.availability__field label{ font-size:var(--text-label); font-weight:var(--weight-label); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--color-text-tertiary); }
.availability__field select,.availability__field input{ font-family:inherit; font-size:15px; font-weight:500; color:var(--color-ink); border:none; background:transparent; padding:0; margin:0; width:100%; appearance:none; -webkit-appearance:none; cursor:pointer; }
.availability__field select:focus,.availability__field input:focus{ outline:none; }
.availability__field.has-caret{ position:relative; }
.availability__field.has-caret::after{ content:""; position:absolute; right:var(--space-4); bottom:16px; width:9px; height:9px; border-right:1.6px solid var(--color-text-secondary); border-bottom:1.6px solid var(--color-text-secondary); transform:rotate(45deg); pointer-events:none; }
.availability__btn{ width:100%; height:100%; min-height:52px; }

.frame{ position:relative; overflow:hidden; display:block; }
.parallax-img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.has-js .img-reveal{ clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--ease-out); }
.has-js .img-reveal.is-visible{ clip-path:inset(0 0 0 0); }

/* TRUST */
.trust{ border-top:1px solid var(--color-border); }
.trust__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-8) var(--space-4); list-style:none; }
.trust__item{ display:flex; align-items:center; gap:var(--space-4); }
.trust__item .icon{ width:26px; height:26px; color:var(--color-ink); flex:none; }
.trust__item b{ font-weight:500; font-size:var(--text-body-sm); letter-spacing:-.01em; display:block; }
.trust__item span{ font-size:var(--text-caption); color:var(--color-text-secondary); }
.count{ font-variant-numeric:tabular-nums; }

/* ROOMS */
.rooms__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-6); }
.room-card{ position:relative; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); transition:box-shadow .3s var(--ease-out),transform .3s var(--ease-out); display:flex; flex-direction:column; }
.room-card:hover{ box-shadow:var(--shadow-card-hover); }
.room-card__media{ overflow:hidden; background:var(--color-bg-subtle); }
.room-card__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .7s var(--ease-out); }
.room-card:hover .room-card__media img{ transform:scale(1.05); }
.room-card__body{ padding:var(--space-6); display:flex; flex-direction:column; flex:1; }
.room-card__name{ margin-bottom:var(--space-2); }
.room-card__desc{ color:var(--color-text-secondary); font-size:var(--text-body-sm); line-height:var(--leading-body-sm); margin-bottom:var(--space-5); }
.room-card__chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-6); }
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:var(--text-caption); color:var(--color-text-secondary); background:var(--color-bg-subtle); border:1px solid var(--color-border); padding:5px 11px; border-radius:var(--radius-full); }
.chip .icon{ width:14px; height:14px; color:var(--color-ink-soft); }
.room-card__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding-top:var(--space-5); border-top:1px solid var(--color-border); }
.room-card__price small{ display:block; font-size:var(--text-caption); color:var(--color-text-tertiary); letter-spacing:.01em; }
.room-card__price b{ font-size:22px; font-weight:500; letter-spacing:-.02em; }
.room-card__price b span{ font-size:13px; font-weight:400; color:var(--color-text-secondary); letter-spacing:0; }
.rooms__note{ margin-top:var(--space-8); font-size:var(--text-body-sm); color:var(--color-text-secondary); display:inline-flex; align-items:center; gap:var(--space-3); }
.rooms__note .icon{ width:18px; height:18px; color:var(--color-ink); flex:none; }

/* STATEMENT */
.statement{ position:relative; overflow:hidden; background:var(--color-ink); color:var(--color-text-inverse); padding-block:clamp(96px,14vw,180px); }
.statement__mark{ position:absolute; top:50%; right:clamp(20px,5vw,80px); width:min(34vw,320px); opacity:.12; transform:translateY(-50%); filter:brightness(0) invert(1); pointer-events:none; will-change:transform; }
@media (max-width:767px){ .statement__mark{ top:auto; bottom:24px; right:16px; width:44vw; opacity:.10; transform:none; } }
.statement .container{ position:relative; }
.statement__eyebrow{ color:rgba(255,255,255,.55); }
.statement__title{ font-size:clamp(30px,4.6vw,58px); line-height:1.1; letter-spacing:-.025em; font-weight:300; max-width:16ch; text-wrap:balance; }
/* Word Fade In (dillionverma/magicui) — gestaffelter Opacity-Fade pro Wort */
.statement__title .word{ display:inline-block; }
.has-js .statement__title .word{ opacity:0; transition:opacity .7s ease; }
.has-js .statement__title.is-visible .word{ opacity:1; }
.has-js .statement__title.is-visible .word:nth-child(1){ transition-delay:0s; }
.has-js .statement__title.is-visible .word:nth-child(2){ transition-delay:.15s; }
.has-js .statement__title.is-visible .word:nth-child(3){ transition-delay:.30s; }
.has-js .statement__title.is-visible .word:nth-child(4){ transition-delay:.45s; }
.has-js .statement__title.is-visible .word:nth-child(5){ transition-delay:.60s; }
.statement__text{ margin-top:var(--space-6); color:rgba(255,255,255,.72); max-width:48ch; font-weight:300; font-size:clamp(16px,1.6vw,19px); line-height:1.6; text-wrap:pretty; }

/* FEATURE */
.feature{ display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:center; }
.feature+.feature{ margin-top:var(--section-padding-y-sm); }
.feature__media{ border-radius:var(--radius-xl); box-shadow:var(--shadow-card); background:var(--color-bg-raised); }
.feature__media .parallax-img{ aspect-ratio:4/3; border-radius:var(--radius-xl); }
.feature__body .h3{ margin-bottom:var(--space-4); }
.feature__body p{ color:var(--color-text-secondary); max-width:46ch; text-wrap:pretty; }
.feature__list{ list-style:none; margin-top:var(--space-6); display:grid; gap:var(--space-3); }
.feature__list li{ display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--text-body-sm); color:var(--color-text-primary); }
.feature__list .icon{ width:20px; height:20px; color:var(--color-ink); flex:none; margin-top:1px; }

/* GALLERY */
.gallery{ overflow:hidden; }
.marquee{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.marquee__track{ display:flex; gap:var(--space-5); width:max-content; will-change:transform; animation:marquee 48s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ flex:0 0 auto; width:clamp(260px,34vw,380px); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); background:var(--color-bg-raised); }
.marquee__item img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
@keyframes marquee{ to{ transform:translateX(calc(-50% - (var(--space-5)/2))); } }

/* BENEFITS */
.benefits__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-10); }
.benefit .icon-wrap{ width:48px; height:48px; border-radius:var(--radius-md); background:var(--color-bg-subtle); border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-5); transition:transform .3s var(--ease-out); }
.benefit:hover .icon-wrap{ transform:translateY(-3px); }
.benefit .icon-wrap .icon{ width:24px; height:24px; color:var(--color-ink); }
.benefit h3{ margin-bottom:var(--space-3); }
.benefit p{ color:var(--color-text-secondary); font-size:var(--text-body-sm); line-height:var(--leading-body-sm); max-width:38ch; text-wrap:pretty; }

/* LAGE */
.location__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-10); align-items:center; }
.location__facts{ list-style:none; margin-top:var(--space-8); display:grid; gap:var(--space-5); }
.location__facts li{ display:flex; gap:var(--space-4); }
.location__facts .icon{ width:22px; height:22px; color:var(--color-ink); flex:none; margin-top:2px; }
.location__facts b{ font-weight:500; display:block; letter-spacing:-.01em; }
.location__facts span{ color:var(--color-text-secondary); font-size:var(--text-body-sm); }
.map{ position:relative; border-radius:var(--radius-xl); overflow:hidden; border:1px solid var(--color-border); background:var(--color-bg-subtle); min-height:400px; box-shadow:var(--shadow-card); }
.map__frame{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map__chip{ position:absolute; left:14px; bottom:14px; z-index:2; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.94); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:10px 14px; box-shadow:var(--shadow-card); transition:background .15s var(--ease-out); }
.map__chip:hover{ background:#fff; }
.map__chip .icon{ width:20px; height:20px; color:var(--color-ink); flex:none; }
.map__chip b{ display:block; color:var(--color-ink); font-size:var(--text-body-sm); font-weight:500; letter-spacing:-.01em; }
.map__chip .sub{ display:block; color:var(--color-text-secondary); font-size:var(--text-caption); }

/* NEARBY / DISTANCES */
.dist-grid{ display:grid; grid-template-columns:1fr; gap:0; margin-top:var(--space-4); }
.dist{ display:flex; align-items:center; gap:var(--space-4); padding:var(--space-5) 0; border-bottom:1px solid var(--color-border); }
.dist__icon{ width:42px; height:42px; border-radius:var(--radius-md); background:var(--color-bg-subtle); border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; flex:none; }
.dist__icon .icon{ width:20px; height:20px; color:var(--color-ink); }
.dist__name{ font-weight:500; letter-spacing:-.01em; }
.dist__km{ margin-left:auto; font-variant-numeric:tabular-nums; color:var(--color-text-secondary); font-size:var(--text-body-sm); white-space:nowrap; padding-left:var(--space-4); }

/* FOOTER */
.footer{ background:var(--color-ink); color:var(--color-text-inverse); padding-block:var(--space-12) calc(var(--space-8) + env(safe-area-inset-bottom)); }
.footer__top{ display:grid; grid-template-columns:1fr; justify-items:center; text-align:center; gap:var(--space-8); }
.footer__logo img{ height:52px; width:auto; filter:brightness(0) invert(1); }
.footer__tagline{ color:rgba(255,255,255,.66); font-size:var(--text-body-sm); max-width:46ch; text-wrap:pretty; }
.footer__links{ display:flex; flex-wrap:wrap; gap:var(--space-6); list-style:none; justify-content:center; }
.footer__links a{ font-size:var(--text-body-sm); color:rgba(255,255,255,.72); transition:color .15s var(--ease-out); }
.footer__links a:hover{ color:#fff; }
.footer__legal{ margin-top:var(--space-10); padding-top:var(--space-5); border-top:1px solid rgba(255,255,255,.12); font-size:var(--text-caption); color:rgba(255,255,255,.5); display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-6); justify-content:space-between; align-items:center; }
.footer__credit{ color:rgba(255,255,255,.6); transition:color .15s var(--ease-out); }
.footer__credit:hover{ color:#fff; }
.footer__credit b{ font-weight:500; color:rgba(255,255,255,.85); }

/* STICKY */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:var(--z-mobile-cta); padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); background:rgba(255,255,255,.85); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-top:1px solid var(--color-border); transform:translateY(120%); transition:transform .35s var(--ease-out); }
.sticky-cta.is-visible{ transform:translateY(0); }
.sticky-cta .btn{ width:100%; }

/* REVEAL */
.has-js .reveal{ opacity:0; transform:translateY(20px); transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out); }
.has-js .reveal.is-visible{ opacity:1; transform:none; }
.has-js .reveal[data-delay="1"]{ transition-delay:.08s; }
.has-js .reveal[data-delay="2"]{ transition-delay:.16s; }
.has-js .reveal[data-delay="3"]{ transition-delay:.24s; }
.has-js .hero__title .line__inner{ transform:translateY(115%); transition:transform 1s var(--ease-out); }
.has-js .hero__title.is-in .line__inner{ transform:translateY(0); }
.has-js .hero__title .line:nth-child(2) .line__inner{ transition-delay:.09s; }

@media (prefers-reduced-motion:reduce){
  .has-js .reveal,.has-js .hero__title .line__inner{ opacity:1 !important; transform:none !important; transition:none !important; }
  .has-js .img-reveal{ clip-path:none !important; transition:none !important; }
  .marquee__track{ animation:none !important; }
  .marquee{ overflow-x:auto; }
  .room-card:hover .room-card__media img{ transform:none; }
  .parallax-img{ transform:none !important; }
  .hero__slide{ transform:none !important; transition:opacity .8s linear !important; }
  .has-js .statement__title .word{ opacity:1 !important; transition:none !important; }
  .sticky-cta{ transition:none; }
}

/* RESPONSIVE */
@media (min-width:560px){
  .availability{ grid-template-columns:1fr 1fr; }
  .availability__btn-wrap{ grid-column:1 / -1; }
  .trust__grid{ grid-template-columns:repeat(4,1fr); }
}
@media (min-width:768px){
  .rooms__grid{ grid-template-columns:repeat(3,1fr); }
  .benefits__grid{ grid-template-columns:repeat(3,1fr); gap:var(--space-8); }
  .footer__top{ grid-template-columns:1fr auto 1fr; justify-items:stretch; text-align:left; align-items:center; }
  .footer__logo{ justify-self:start; }
  .footer__tagline{ justify-self:center; text-align:center; }
  .footer__nav{ justify-self:end; }
  .feature{ grid-template-columns:1fr 1fr; gap:var(--space-16); }
  .feature--reverse .feature__media{ order:2; }
  .location__grid{ grid-template-columns:1.05fr .95fr; gap:var(--space-16); }
  .dist-grid{ grid-template-columns:1fr 1fr; column-gap:var(--space-16); }
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
  .nav-toggle{ display:none; }
  .sticky-cta{ display:none; }
}
@media (min-width:900px){
  .availability{ grid-template-columns:1.4fr 1fr 1fr 1fr auto; align-items:stretch; gap:var(--space-1); padding:var(--space-2); }
  .availability__btn-wrap{ grid-column:auto; display:flex; }
  .availability__btn{ min-width:180px; }
}

/* MOBILE HERO — Bild-Band statt Vollbild-Overlay.
   Die Fotos sind Querformat (4:3); ein hoher Hochkant-Container würde sie links/rechts
   stark beschneiden. Darum auf dem Handy: das ganze Foto als Querformat-Band oben,
   Text + Buchungs-Card auf dunkelgrünem Grund darunter (DESIGN.md-konform). */
@media (max-width:767px){
  .hero{ display:block; min-height:0; background:var(--color-ink); }
  /* Bild aus dem Vollbild lösen → eigenes Band im 4:3-Verhältnis der Fotos = kein seitlicher Beschnitt */
  .hero__slides{ position:relative; inset:auto; width:100%; aspect-ratio:4/3; }
  .hero__slide{ transform:scale(1); }              /* kein Zoom → volles, scharfes Bild */
  .hero__slide.is-active{ transform:scale(1); }
  /* Scrim nur noch über dem Band, dezent oben für die Lesbarkeit der Navigation */
  .hero__scrim{ bottom:auto; height:75vw; background:linear-gradient(180deg,
      rgba(18,26,20,.55) 0%, rgba(18,26,20,.12) 26%, transparent 46%); }
  /* Textbereich beginnt unter dem Band, ruhiger Rhythmus, Card mit Luft */
  .hero__inner{ padding-block:var(--space-8) calc(var(--space-10) + env(safe-area-inset-bottom)); }
  .hero__actions{ margin-top:var(--space-6); }
  .availability{ margin-top:var(--space-8); padding:var(--space-4); gap:var(--space-3); }
  .availability__field{ padding:var(--space-3) var(--space-4); }
  .hero__dots{ display:none; }
}

/* ============================================================ BOOKING FLOW ====== */
.booking{ scroll-margin-top:92px; }
.booking-page{ padding-top:64px; }
.bk-flag{ display:inline-flex; align-items:center; gap:8px; font-size:var(--text-caption); font-weight:500; letter-spacing:.01em; color:var(--color-ink-soft); background:var(--color-bg-subtle); border:1px solid var(--color-border); border-radius:var(--radius-full); padding:6px 14px; margin-bottom:var(--space-6); }
.bk-flag .icon{ width:15px; height:15px; color:var(--color-ink); flex:none; }

.bk{ display:grid; grid-template-columns:1fr; gap:var(--space-8); }
@media (min-width:960px){ .bk{ grid-template-columns:minmax(0,1fr) 350px; gap:var(--space-12); align-items:start; } }
.bk__main{ min-width:0; }

/* Stepper */
.bk-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-2); list-style:none; margin-bottom:var(--space-10); }
.bk-steps__item{ display:flex; flex-direction:column; gap:10px; }
.bk-steps__bar{ height:3px; border-radius:var(--radius-full); background:var(--color-border); transition:background .3s var(--ease-out); }
.bk-steps__item.is-active .bk-steps__bar,.bk-steps__item.is-done .bk-steps__bar{ background:var(--color-ink); }
.bk-steps__meta{ display:flex; align-items:center; gap:9px; }
.bk-steps__num{ width:23px; height:23px; flex:none; border-radius:50%; border:1.5px solid var(--color-border-strong); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--color-text-tertiary); font-variant-numeric:tabular-nums; transition:background .25s var(--ease-out),border-color .25s var(--ease-out),color .25s var(--ease-out); }
.bk-steps__item.is-active .bk-steps__num{ border-color:var(--color-ink); color:var(--color-ink); }
.bk-steps__item.is-done .bk-steps__num{ background:var(--color-ink); border-color:var(--color-ink); color:#fff; }
.bk-steps__num .icon{ width:13px; height:13px; stroke-width:2.4; }
.bk-steps__label{ font-size:var(--text-caption); font-weight:500; letter-spacing:-.01em; color:var(--color-text-tertiary); }
.bk-steps__item.is-active .bk-steps__label,.bk-steps__item.is-done .bk-steps__label{ color:var(--color-ink); }
@media (max-width:540px){ .bk-steps__label{ display:none; } .bk-steps{ gap:var(--space-3); } }

/* Step transition */
.bk-step{ animation:bkFade .45s var(--ease-out); }
@keyframes bkFade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.bk-step__title{ font-size:var(--text-h3); line-height:var(--leading-h3); letter-spacing:-.01em; font-weight:500; margin-bottom:var(--space-2); }
.bk-step__hint{ color:var(--color-text-secondary); font-size:var(--text-body-sm); line-height:var(--leading-body-sm); margin-bottom:var(--space-6); max-width:52ch; }

/* Room options */
.bk-rooms{ display:grid; gap:var(--space-3); }
.bk-room{ background:var(--color-bg); border:1.5px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; transition:border-color .18s var(--ease-out),box-shadow .25s var(--ease-out); }
.bk-room:hover{ border-color:var(--color-border-strong); box-shadow:var(--shadow-card); }
.bk-room.is-selected{ border-color:var(--color-ink); box-shadow:var(--shadow-card); }
.bk-room__pick{ display:grid; grid-template-columns:96px 1fr auto; gap:var(--space-4); align-items:start; width:100%; text-align:left; background:transparent; border:none; cursor:pointer; padding:var(--space-3); font:inherit; }
.bk-room__media{ width:96px; height:84px; border-radius:var(--radius-md); object-fit:cover; background:var(--color-bg-raised); }
.bk-room__info{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.bk-room__name{ font-weight:500; letter-spacing:-.01em; text-wrap:balance; }
.bk-room__beds{ display:inline-flex; align-items:center; gap:6px; font-size:var(--text-caption); color:var(--color-text-secondary); }
.bk-room__beds .icon{ width:15px; height:15px; color:var(--color-ink-soft); flex:none; }
.bk-room__chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:1px; }
.bk-room__chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; letter-spacing:.004em; color:var(--color-text-secondary); background:var(--color-bg-subtle); border:1px solid var(--color-border); border-radius:var(--radius-full); padding:3px 9px; white-space:nowrap; }
.bk-room__chip .icon{ width:12px; height:12px; color:var(--color-ink-soft); flex:none; }
.bk-room__price{ text-align:right; white-space:nowrap; }
.bk-room__price b{ font-size:19px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.bk-room__price small{ display:block; font-size:var(--text-caption); color:var(--color-text-tertiary); }
.bk-room__sel{ display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-size:var(--text-caption); font-weight:500; color:var(--color-ink); opacity:0; transition:opacity .15s var(--ease-out); }
.bk-room__sel .icon{ width:14px; height:14px; stroke-width:2.4; }
.bk-room.is-selected .bk-room__sel{ opacity:1; }
.bk-room__more{ border-top:1px solid var(--color-border); }
.bk-room__more>summary{ list-style:none; cursor:pointer; padding:11px var(--space-4); font-size:var(--text-caption); font-weight:500; color:var(--color-ink); display:flex; align-items:center; gap:7px; user-select:none; }
.bk-room__more>summary::-webkit-details-marker{ display:none; }
.bk-room__more>summary .icon{ width:14px; height:14px; transition:transform .2s var(--ease-out); }
.bk-room__more[open]>summary .icon{ transform:rotate(180deg); }
.bk-room__am{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:7px 18px; padding:2px var(--space-4) var(--space-5); }
.bk-room__am li{ display:flex; align-items:flex-start; gap:8px; font-size:var(--text-caption); color:var(--color-text-secondary); text-wrap:pretty; }
.bk-room__am li .icon{ width:13px; height:13px; color:var(--color-ink); stroke-width:2.2; flex:none; margin-top:2px; }
.bk-room__am li.is-note{ grid-column:1 / -1; color:var(--color-text-primary); font-weight:500; }
.bk-room__am li.is-note .icon{ color:var(--color-ink-soft); }
@media (max-width:560px){ .bk-room__am{ grid-template-columns:1fr; } }
@media (max-width:430px){
  .bk-room__pick{ grid-template-columns:72px 1fr; row-gap:var(--space-2); }
  .bk-room__media{ width:72px; height:64px; }
  .bk-room__price{ grid-column:2; text-align:left; }
}

/* Calendar */
.bk-cal-wrap{ display:grid; gap:var(--space-8); }
@media (min-width:680px){ .bk-cal-wrap.is-double{ grid-template-columns:1fr 1fr; gap:var(--space-10); } }
.bk-cal__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-5); }
.bk-cal__title{ font-weight:500; letter-spacing:-.01em; font-size:var(--text-body-sm); }
.bk-cal__nav{ display:flex; gap:var(--space-2); }
.bk-navbtn{ width:38px; height:38px; border-radius:var(--radius-md); border:1.5px solid var(--color-border); background:var(--color-bg); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--color-ink); transition:border-color .15s var(--ease-out),background .15s var(--ease-out); }
.bk-navbtn:hover:not(:disabled){ border-color:var(--color-ink); background:var(--color-bg-subtle); }
.bk-navbtn:disabled{ opacity:.32; cursor:not-allowed; }
.bk-navbtn .icon{ width:18px; height:18px; }
.bk-cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.bk-cal__wd{ text-align:center; font-size:var(--text-label); letter-spacing:.05em; text-transform:uppercase; color:var(--color-text-tertiary); font-weight:500; padding-bottom:var(--space-2); }
.bk-day{ position:relative; aspect-ratio:1/1; min-height:40px; border:none; background:transparent; border-radius:var(--radius-md); font:inherit; font-size:14px; font-weight:500; color:var(--color-ink); cursor:pointer; font-variant-numeric:tabular-nums; transition:background .12s var(--ease-out),color .12s var(--ease-out); }
.bk-day.is-empty{ visibility:hidden; cursor:default; }
.bk-day:hover:not(:disabled):not(.is-start):not(.is-end):not(.is-selected){ background:var(--color-bg-raised); }
.bk-day:disabled{ cursor:not-allowed; }
.bk-day.is-past{ color:var(--color-border-strong); }
.bk-day.is-blocked{ color:var(--color-text-tertiary); text-decoration:line-through; text-decoration-thickness:1px; }
.bk-day.is-in-range{ background:var(--color-bg-subtle); border-radius:0; }
.bk-day.is-selected,.bk-day.is-start,.bk-day.is-end{ background:var(--color-ink); color:#fff; }
.bk-day.is-start{ border-radius:var(--radius-md) 0 0 var(--radius-md); }
.bk-day.is-end{ border-radius:0 var(--radius-md) var(--radius-md) 0; }
.bk-day.is-today::after{ content:""; position:absolute; left:50%; bottom:5px; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--color-ink); }
.bk-day.is-start.is-today::after,.bk-day.is-end.is-today::after,.bk-day.is-selected.is-today::after{ background:#fff; }
.bk-legend{ display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5); margin-top:var(--space-6); font-size:var(--text-caption); color:var(--color-text-secondary); }
.bk-legend span{ display:inline-flex; align-items:center; gap:7px; }
.bk-legend i{ width:13px; height:13px; border-radius:4px; flex:none; }
.bk-legend i.sw-sel{ background:var(--color-ink); }
.bk-legend i.sw-free{ background:var(--color-bg); border:1.5px solid var(--color-border-strong); }
.bk-legend i.sw-block{ background:var(--color-bg-subtle); border:1.5px solid var(--color-border); position:relative; overflow:hidden; }
.bk-legend i.sw-block::after{ content:""; position:absolute; inset:0; background:linear-gradient(135deg,transparent 44%,var(--color-text-tertiary) 44%,var(--color-text-tertiary) 56%,transparent 56%); }

/* Guests stepper */
.bk-guests{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-top:var(--space-8); padding-top:var(--space-6); border-top:1px solid var(--color-border); flex-wrap:wrap; }
.bk-guests__label b{ font-weight:500; letter-spacing:-.01em; display:block; }
.bk-guests__label span{ font-size:var(--text-caption); color:var(--color-text-secondary); }
.bk-stepper{ display:inline-flex; align-items:center; gap:var(--space-4); }
.bk-stepper button{ width:40px; height:40px; border-radius:50%; border:1.5px solid var(--color-border-strong); background:var(--color-bg); font-size:20px; color:var(--color-ink); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; line-height:1; transition:border-color .15s var(--ease-out); }
.bk-stepper button:hover:not(:disabled){ border-color:var(--color-ink); }
.bk-stepper button:disabled{ opacity:.32; cursor:not-allowed; }
.bk-stepper output{ min-width:2.2ch; text-align:center; font-weight:500; font-size:17px; font-variant-numeric:tabular-nums; }

/* Fields */
.bk-fields{ display:grid; gap:var(--space-5); }
@media (min-width:560px){ .bk-fields{ grid-template-columns:1fr 1fr; } .bk-field--full{ grid-column:1 / -1; } }
.bk-field{ display:flex; flex-direction:column; gap:7px; }
.bk-field label{ font-size:var(--text-caption); font-weight:500; color:var(--color-text-secondary); letter-spacing:-.005em; }
.bk-field label .req{ color:var(--color-ink); }
.bk-input,.bk-select,.bk-textarea{ font:inherit; font-size:15px; color:var(--color-ink); background:var(--color-bg); border:1.5px solid var(--color-border); border-radius:var(--radius-md); padding:12px 14px; width:100%; appearance:none; -webkit-appearance:none; transition:border-color .15s var(--ease-out),background .15s var(--ease-out); }
.bk-input:focus,.bk-select:focus,.bk-textarea:focus{ outline:none; border-color:var(--color-ink); }
.bk-input::placeholder,.bk-textarea::placeholder{ color:var(--color-text-tertiary); }
.bk-textarea{ resize:vertical; min-height:88px; line-height:1.5; }
.bk-selectwrap{ position:relative; }
.bk-selectwrap::after{ content:""; position:absolute; right:15px; top:50%; width:8px; height:8px; margin-top:-6px; border-right:1.6px solid var(--color-text-secondary); border-bottom:1.6px solid var(--color-text-secondary); transform:rotate(45deg); pointer-events:none; }
.bk-field.has-error .bk-input,.bk-field.has-error .bk-select,.bk-field.has-error .bk-textarea{ border-color:var(--color-ink); background:var(--color-bg-subtle); }
.bk-error{ display:none; align-items:center; gap:6px; font-size:var(--text-caption); font-weight:500; color:var(--color-ink); }
.bk-error .icon{ width:14px; height:14px; flex:none; }
.bk-field.has-error .bk-error{ display:inline-flex; }

/* Payment (demo) */
.bk-pay{ display:grid; gap:var(--space-5); }
.bk-paycard{ border:1.5px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); background:var(--color-bg); display:grid; gap:var(--space-4); }
.bk-paycard__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
.bk-lock{ display:inline-flex; align-items:center; gap:7px; font-size:var(--text-caption); color:var(--color-text-secondary); }
.bk-lock .icon{ width:15px; height:15px; color:var(--color-ink); flex:none; }
.bk-cards{ display:flex; gap:6px; }
.bk-cards svg{ width:34px; height:22px; border-radius:4px; border:1px solid var(--color-border); }
.bk-payrow{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.bk-note{ display:flex; align-items:flex-start; gap:9px; font-size:var(--text-caption); line-height:1.5; color:var(--color-text-secondary); background:var(--color-bg-subtle); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:12px 14px; }
.bk-note .icon{ width:16px; height:16px; color:var(--color-ink); flex:none; margin-top:1px; }

/* Actions */
.bk-actions{ display:flex; gap:var(--space-3); margin-top:var(--space-8); }
.bk-actions .btn{ flex:1; }
.bk-actions .bk-back{ flex:0 0 auto; }
@media (min-width:560px){ .bk-actions .btn{ flex:0 0 auto; min-width:160px; } .bk-actions .bk-next{ margin-left:auto; } }
.bk-back .icon-arrow{ transform:scaleX(-1); }
.bk-back:hover .icon-arrow{ transform:scaleX(-1) translateX(3px); }

/* Summary rail */
.bk-rail{ background:var(--color-bg-subtle); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-6); }
@media (min-width:960px){ .bk-rail{ position:sticky; top:104px; } }
.bk-rail__media{ border-radius:var(--radius-md); overflow:hidden; aspect-ratio:16/10; margin-bottom:var(--space-5); background:var(--color-bg-raised); }
.bk-rail__media img{ width:100%; height:100%; object-fit:cover; }
.bk-rail__empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-3); aspect-ratio:16/10; margin-bottom:var(--space-5); border:1.5px dashed var(--color-border-strong); border-radius:var(--radius-md); color:var(--color-text-tertiary); text-align:center; padding:var(--space-4); }
.bk-rail__empty .icon{ width:26px; height:26px; }
.bk-rail__empty span{ font-size:var(--text-caption); max-width:22ch; }
.bk-rail__name{ font-weight:500; letter-spacing:-.01em; font-size:var(--text-h3); }
.bk-rail__cat{ font-size:var(--text-caption); color:var(--color-text-secondary); margin-top:2px; }
.bk-sum{ list-style:none; display:grid; gap:var(--space-3); margin-top:var(--space-5); }
.bk-sum li{ display:flex; justify-content:space-between; gap:var(--space-4); font-size:var(--text-body-sm); color:var(--color-text-secondary); }
.bk-sum li b{ color:var(--color-ink); font-weight:500; font-variant-numeric:tabular-nums; }
.bk-sum li.is-muted{ color:var(--color-text-tertiary); }
.bk-sum__total{ margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--color-border); display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-4); }
.bk-sum__total span{ font-size:var(--text-body-sm); color:var(--color-text-secondary); }
.bk-sum__total b{ font-size:26px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--color-ink); }
.bk-rail__foot{ margin-top:var(--space-5); font-size:var(--text-caption); color:var(--color-text-tertiary); display:flex; gap:8px; line-height:1.5; }
.bk-rail__foot .icon{ width:14px; height:14px; flex:none; margin-top:1px; }

/* Confirmation */
.bk-done{ text-align:center; padding:var(--space-6) 0 var(--space-4); }
.bk-done__check{ width:66px; height:66px; margin:0 auto var(--space-6); border-radius:50%; background:var(--color-ink); display:flex; align-items:center; justify-content:center; animation:bkPop .5s var(--ease-out); }
@keyframes bkPop{ 0%{ transform:scale(.5); opacity:0; } 60%{ transform:scale(1.1); } 100%{ transform:scale(1); opacity:1; } }
.bk-done__check .icon{ width:32px; height:32px; color:#fff; stroke-width:2.4; }
.bk-done__title{ font-size:var(--text-h2); line-height:var(--leading-h2); letter-spacing:var(--tracking-h2); font-weight:400; margin-bottom:var(--space-3); }
.bk-done__text{ color:var(--color-text-secondary); max-width:44ch; margin:0 auto; text-wrap:pretty; }
.bk-done__card{ text-align:left; max-width:440px; margin:var(--space-8) auto 0; border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-6); background:var(--color-bg-subtle); }
.bk-done__row{ display:flex; justify-content:space-between; gap:var(--space-4); padding:var(--space-3) 0; font-size:var(--text-body-sm); border-bottom:1px solid var(--color-border); }
.bk-done__row:last-child{ border-bottom:none; }
.bk-done__row span{ color:var(--color-text-secondary); }
.bk-done__row b{ font-weight:500; text-align:right; }
.bk-done .bk-back{ margin-top:var(--space-8); }
@media (prefers-reduced-motion:reduce){
  .bk-step,.bk-done__check{ animation:none !important; }
}