/* Sunflower St. Moritz — design tokens & base */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Nunito:wght@600;700;800&display=swap');

:root{
  --canvas:#EEE1C6;
  --canvas-deep:#E4D2A9;
  /* Neutral light grey used for every "alternate" band, input field and
     placeholder — the counterpart to the white --panel sections. */
  --shade:#F1F1EF;
  --shade-deep:#E7E7E3;
  --panel:#FFFFFF;
  --ink:#1B211E;
  --ink-soft:#5B655F;
  --line:#DCD5C4;
  --line-strong:#B9AF97;
  --accent:#2F6F62;
  --accent-hover:#25564B;
  --accent-muted:rgba(47,111,98,.14);
  --night:#101A17;
  --night-panel:#182420;
  --snow:#F7F5EF;
  --tshadow:0 1px 2px rgba(5,10,8,.9),0 3px 12px rgba(5,10,8,.7),0 10px 40px rgba(5,10,8,.7);
  --ease:cubic-bezier(.16,.8,.24,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --radius:14px;
  --font-display:'Nunito','Inter',ui-sans-serif,-apple-system,system-ui,sans-serif;
  --font-body:'Inter',ui-sans-serif,-apple-system,system-ui,sans-serif;
  --font-mono:'Inter',ui-sans-serif,-apple-system,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
body::after{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.035;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html{overflow-x:clip;scroll-behavior:smooth}
body{overflow-x:clip}
html,body{margin:0;padding:0;color:var(--ink);background-color:var(--shade)}
body{font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;margin:0 0 .5em;letter-spacing:-.01em}
p{margin:0 0 1em;color:var(--ink-soft)}
.mono{font-family:var(--font-mono)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--snow);padding:.8em 1.2em;border-radius:0 0 8px 0;z-index:200}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

main{display:block}

/* ---------- layout helpers ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.section{padding:clamp(56px,7vw,100px) 0;background:var(--panel)}
.section-alt{background:var(--shade);padding:calc(clamp(56px,7vw,100px) + 1.6em) 0}
.section-head{max-width:640px;margin:0 0 clamp(32px,5vw,56px)}
.kicker{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.9em}
.kicker::before{content:"";width:22px;height:1px;background:var(--accent)}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.9rem)}
.lede{font-size:clamp(1.02rem,1.4vw,1.18rem);max-width:52ch}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,5vw,48px);transition:background .4s var(--ease-soft),padding .4s var(--ease-soft),box-shadow .4s var(--ease-soft)}
.nav.solid{background:rgba(245,242,234,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding-top:12px;padding-bottom:12px}
.nav .brand{font-family:var(--font-display);font-weight:600;font-size:1.28rem;letter-spacing:.01em;text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:.5em;color:var(--snow)}
.nav.solid .brand{color:var(--ink)}
.nav .brand svg,.nav .brand img{width:26px;height:auto;flex:none}
footer .brand img{width:30px;height:auto}
.nav-links{display:flex;align-items:center;gap:clamp(2px,.6vw,6px);list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;font-size:.98rem;white-space:nowrap;color:var(--snow);opacity:.92;position:relative;padding:.5em .85em;border:1px solid transparent;border-radius:20px;transition:background .3s var(--ease-soft),border-color .3s var(--ease-soft),opacity .3s var(--ease-soft)}
.nav-links a:hover{opacity:1;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35)}
.nav-links a[aria-current="page"]{opacity:1;border-color:rgba(255,255,255,.5)}
.nav.solid .nav-links a{color:var(--ink)}
.nav.solid .nav-links a:hover{background:var(--accent-muted);border-color:var(--accent)}
.nav.solid .nav-links a[aria-current="page"]{border-color:var(--accent);background:var(--accent-muted)}
.nav-right{display:flex;align-items:center;gap:16px}
.lang-switch{position:relative}
.lang-btn{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.04em;background:rgba(255,255,255,.14);color:var(--snow);border:1px solid rgba(255,255,255,.35);border-radius:20px;padding:.45em 1em;cursor:pointer;display:flex;align-items:center;gap:.5em;transition:background .3s var(--ease-soft),color .3s var(--ease-soft),border-color .3s var(--ease-soft)}
.nav.solid .lang-btn{background:var(--panel);color:var(--ink);border-color:var(--line-strong)}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 18px 40px rgba(20,25,20,.18);display:grid;gap:2px;min-width:160px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s var(--ease-soft),transform .25s var(--ease-soft),visibility .25s}
.lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu button{display:flex;align-items:center;gap:.6em;justify-content:flex-start;width:100%;text-align:left;background:none;border:0;padding:.6em .8em;border-radius:8px;cursor:pointer;font-family:var(--font-body);font-size:.92rem;color:var(--ink)}
.lang-menu button .flag,.lang-btn .flag{width:18px;height:18px;border-radius:50%;flex:none;display:inline-block;vertical-align:middle;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.lang-btn .flag{margin-right:.35em}
.lang-menu button:hover{background:var(--accent-muted)}
.lang-menu button[aria-current="true"]{color:var(--accent);font-weight:600}
.btn-book{font-family:var(--font-body);font-weight:600;font-size:.82rem;letter-spacing:.04em;background:var(--accent);color:var(--snow);border:1px solid var(--accent);border-radius:20px;padding:.55em 1.3em;cursor:pointer;transition:background .3s var(--ease-soft),transform .3s var(--ease-soft)}
.btn-book:hover{background:var(--accent-hover);transform:translateY(-1px)}
.nav-toggle{display:none;background:none;border:0;color:var(--snow);cursor:pointer;padding:6px}
/* Nur im aufgeklappten Handy-Menü sichtbar (siehe MOBILE-Block am Dateiende). */
.nav-cta{display:none}
.nav-backdrop{display:none}
.nav.solid .nav-toggle{color:var(--ink)}

@media (max-width:880px){
  .nav-links{position:fixed;inset:0 0 0 auto;width:min(320px,84vw);height:100vh;background:var(--panel);flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:100px 28px 28px;gap:22px;transform:translateX(100%);transition:transform .4s var(--ease);box-shadow:-20px 0 50px rgba(0,0,0,.15)}
  .nav-links a{color:var(--ink);font-size:1.1rem}
  body.menu-open .nav-links{transform:translateX(0)}
  .nav-toggle{display:block}
  body.menu-open{overflow:hidden}
}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:520px;background:#0E1512}
.hero-stage{position:relative;height:100%;width:100%;overflow:hidden}
.hero .poster{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .6s var(--ease-soft)}
.hero #hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease-soft)}
.hero-stage.video-ready #hero-video{opacity:1}
.hero-stage.video-ready .poster{opacity:0}
.hero-stage.video-failed #hero-video{display:none}
/* Faellt das Video aus, muss das Standbild auf jeden Fall zurueckkommen —
   sonst bliebe nur der dunkle Hintergrund stehen. */
.hero-stage.video-failed .poster{opacity:1}
.hero .scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 40%,rgba(8,14,12,0) 30%,rgba(6,12,10,.72) 100%)}
.hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 20px;pointer-events:none}
.hero-copy .eyebrow{font-family:var(--font-mono);color:var(--snow);opacity:.85;letter-spacing:.12em;text-transform:uppercase;font-size:1rem;margin-bottom:1.1em;text-shadow:var(--tshadow);display:inline-flex;align-items:center;gap:.7em}
.hero-copy .eyebrow::before,.hero-copy .eyebrow::after{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.hero-copy h1{color:var(--snow);font-size:clamp(1.7rem,4.4vw,3.4rem);text-shadow:var(--tshadow);max-width:32ch}
.hero-copy .sub{color:var(--snow);opacity:.92;font-size:clamp(1rem,1.6vw,1.25rem);max-width:54ch;text-shadow:var(--tshadow);margin-top:.4em}
.hero-search{pointer-events:auto;margin-top:1.8em;width:100%;max-width:920px}
.hero-search .search-bar{padding:clamp(16px,2.2vw,24px) clamp(16px,2.2vw,26px);gap:14px;box-shadow:0 20px 60px rgba(6,12,10,.4)}
.hero-search .search-bar .kicker{display:none}
@media (max-width:560px){.hero-search .search-bar{grid-template-columns:1fr 1fr}.hero-search .search-bar .btn-primary{grid-column:1/-1}}
.btn{font-family:var(--font-mono);font-size:.85rem;letter-spacing:.04em;padding:.95em 1.8em;border-radius:30px;text-decoration:none;display:inline-flex;align-items:center;gap:.6em;transition:transform .3s var(--ease-soft),background .3s var(--ease-soft),box-shadow .3s var(--ease-soft);text-shadow:none}
.btn-primary{background:var(--accent);color:var(--snow);border:1px solid var(--accent);box-shadow:0 8px 26px rgba(47,111,98,.4)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 14px 34px rgba(47,111,98,.5)}
.btn-ghost{background:rgba(255,255,255,.08);color:var(--snow);border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.18);border-color:#fff;transform:translateY(-2px)}
.scroll-cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);color:var(--snow);opacity:.8;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;text-shadow:var(--tshadow)}
.scroll-cue svg{animation:cue-bob 2.2s ease-in-out infinite}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- search bar (overlaps hero/content boundary) ---------- */
.search-bar{background:var(--panel);border-radius:var(--radius);box-shadow:0 24px 60px rgba(10,16,14,.28);padding:clamp(20px,3vw,30px) clamp(20px,3vw,34px);display:grid;grid-template-columns:repeat(4,1fr) auto;gap:18px;align-items:end}
.search-bar .kicker{grid-column:1/-1;margin-bottom:-4px}
.search-field label{display:block;font-family:var(--font-body);font-size:.85rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin-bottom:.5em}
.search-field input,.search-field select{width:100%;padding:.8em .9em;border:1px solid var(--line-strong);border-radius:8px;font-family:var(--font-body);font-size:.95rem;background:var(--shade);color:var(--ink)}
.search-field select{cursor:pointer}
input[data-datepicker]{cursor:pointer;background-repeat:no-repeat;background-position:right .9em center;background-size:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B655F' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}

/* ---------- custom date picker ---------- */
.dp-panel{position:absolute;z-index:400;display:none;width:280px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px rgba(20,25,20,.22);padding:16px;font-family:var(--font-body)}
.dp-panel.open{display:block}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dp-title{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--ink)}
.dp-nav{background:none;border:1px solid var(--line);border-radius:8px;width:30px;height:30px;font-size:1.1rem;line-height:1;cursor:pointer;color:var(--ink);transition:background .2s var(--ease-soft)}
.dp-nav:hover{background:var(--accent-muted)}
.dp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:4px}
.dp-weekdays span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.03em;color:var(--ink-soft);text-transform:uppercase}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0}
.dp-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:8px;font-family:var(--font-body);font-size:.86rem;color:var(--ink);cursor:pointer;transition:background .15s var(--ease-soft)}
.dp-day:hover{background:var(--accent-muted)}
.dp-day.dp-selected{background:var(--accent);color:var(--snow);font-weight:600}
.dp-day.dp-today:not(.dp-range-start):not(.dp-range-end){box-shadow:inset 0 0 0 1px var(--accent)}
span.dp-day.dp-muted{color:var(--line-strong);cursor:default}
.dp-day.dp-in-range{background:var(--accent-muted);border-radius:0}
.dp-day.dp-range-start,.dp-day.dp-range-end{background:var(--accent);color:var(--snow);font-weight:600;border-radius:8px}
.dp-day.dp-range-start.dp-in-range,.dp-day.dp-range-end.dp-in-range{border-radius:8px}
span.dp-day.dp-disabled{color:var(--line-strong);cursor:default;opacity:.5}
.dp-day.dp-hover-range{background:var(--accent-muted);border-radius:0}
.dp-day.dp-hover-end{background:var(--accent-muted);border-radius:0 8px 8px 0}
.search-bar .btn-primary{justify-content:center;white-space:nowrap;height:calc(100% - 0px);font-size:1rem}
@media (max-width:860px){.search-bar{grid-template-columns:1fr 1fr}.search-bar .btn-primary{grid-column:1/-1}}
@media (max-width:560px){.search-bar{grid-template-columns:1fr}}

/* ---------- scroll-driven welcome zoom ---------- */
.scrollzoom{position:relative;height:160vh}
.scrollzoom-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--shade)}
.scrollzoom-center{position:absolute;top:50%;left:50%;width:30vw;height:94vh;transform:translate(-50%,-50%);background-size:cover;background-position:center;border-radius:18px;box-shadow:0 30px 80px rgba(20,25,20,.35);will-change:width,height}
.scrollzoom-col{position:absolute;top:50%;width:15vw;height:68vh;display:flex;flex-direction:column;gap:12px;transform:translateY(-50%);will-change:transform,opacity}
.scrollzoom-col--left{left:18.5vw}
.scrollzoom-col--right{right:18.5vw}
.scrollzoom-col--far{width:13vw;height:54vh}
.scrollzoom-col--far-left{left:4vw}
.scrollzoom-col--far-right{right:4vw}
.scrollzoom-cell{flex:1;border-radius:14px;background-size:cover;background-position:center;box-shadow:0 10px 26px rgba(20,25,20,.22)}
.scrollzoom-caption{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 20px;pointer-events:none;opacity:0}
.scrollzoom-caption::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(6,10,9,.55) 0%,rgba(6,10,9,0) 75%);z-index:-1}
.scrollzoom-caption .kicker{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--snow);opacity:.9;text-shadow:var(--tshadow);margin-bottom:.6em}
.scrollzoom-caption h2{color:var(--snow);text-shadow:var(--tshadow);max-width:16ch;font-size:clamp(1.8rem,4.2vw,3rem)}
.scrollzoom-caption .lede{color:rgba(247,245,239,.9);text-shadow:var(--tshadow);max-width:38ch;margin:0}
@media (max-width:760px){
  .scrollzoom{height:140vh}
  .scrollzoom-col{display:none}
}
@media (prefers-reduced-motion:reduce){
  .scrollzoom{height:auto}
  .scrollzoom-sticky{position:relative;height:70vh;min-height:420px}
  .scrollzoom-col{display:none}
  .scrollzoom-center{position:relative;top:auto;left:auto;width:100%;height:100%;transform:none !important;border-radius:18px !important}
  .scrollzoom-caption{opacity:1 !important}
}


/* ---------- advantages ---------- */
.advantage-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:1080px){.advantage-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.advantage-grid{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.advantage-grid{grid-template-columns:1fr}}
.advantage-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 18px;text-align:left}
.advantage-card .icon{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:16px;overflow:hidden;box-shadow:0 6px 16px rgba(20,25,20,.1)}
.advantage-card .icon img{width:100%;height:100%;object-fit:cover}
.advantage-card h3{font-size:1.08rem;margin-bottom:.4em}
.advantage-card p{margin:0;font-size:.92rem}

/* ---------- reviews ---------- */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:900px){.review-grid{grid-template-columns:1fr}}
.review-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;display:flex;flex-direction:column;gap:16px}
.review-card .stars{color:var(--accent);letter-spacing:.15em;font-size:.95rem}
.review-card blockquote{margin:0;font-family:var(--font-display);font-size:1.08rem;line-height:1.4;color:var(--ink);flex:1}
.review-card .who{display:flex;flex-direction:column;font-size:.85rem}
.review-card .who b{font-weight:600}
.review-card .who span{color:var(--ink-soft);font-family:var(--font-mono);font-size:.76rem}
.review-badge{display:inline-flex;align-items:center;gap:.6em;background:var(--accent-muted);color:var(--accent-hover);font-family:var(--font-mono);font-size:.78rem;padding:.5em 1em;border-radius:20px;margin-bottom:1.2em}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:2px;max-width:820px}
.faq-item{background:var(--panel);border:1px solid var(--line)}
.faq-item + .faq-item{border-top:0}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;background:none;border:0;text-align:left;font-family:var(--font-display);font-size:1.05rem;color:var(--ink);cursor:pointer}
.faq-q svg{flex:none;transition:transform .3s var(--ease-soft);color:var(--accent)}
.faq-item.open .faq-q svg{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease-soft)}
.faq-a p{padding:0 22px 20px;margin:0;font-size:.94rem}
.faq-item.open .faq-a{max-height:220px}

/* ---------- inner-page header (no scroll hero) ---------- */
.page-hero{background:linear-gradient(160deg,var(--night) 0%,#1C2E28 100%);color:var(--snow);padding:clamp(56px,7.5vw,76px) 0 clamp(22px,3vw,32px);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 80% 0%,rgba(47,111,98,.35),transparent 60%)}
.page-hero .wrap{position:relative}
.page-hero .kicker{color:#8FD9C4}
.page-hero h1{color:var(--snow);font-size:clamp(1.8rem,3.6vw,2.8rem);max-width:32ch}
.page-hero .lede{color:rgba(247,245,239,.82)}

/* ---------- generic sections ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:860px){.grid-2{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pill{display:inline-flex;align-items:center;gap:.5em;background:var(--accent-muted);color:var(--accent-hover);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;padding:.4em .9em;border-radius:20px}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}
.stagger.in .s-item{transition-delay:calc(var(--i,0) * 90ms)}
.s-item{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.stagger.in .s-item{opacity:1;transform:translateY(0)}

/* facts / stats strip */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.facts .fact{background:var(--panel);padding:clamp(20px,3vw,34px);text-align:center}
.facts .num{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.6rem);color:var(--accent)}
.facts .lbl{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-soft);text-transform:uppercase;margin-top:.4em}
@media (max-width:700px){.facts{grid-template-columns:1fr 1fr}}

/* floor plan visual */
.floor-diagram{display:grid;gap:10px}
.floor-row{display:grid;grid-template-columns:64px 1fr 1fr 1fr;gap:10px;align-items:center}
.floor-row .floor-tag{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-soft);text-align:right}
.floor-row .unit{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:.85rem}
.floor-row .unit b{display:block;font-family:var(--font-display);font-size:1rem;font-weight:600}
.floor-row .unit.medium{background:var(--accent-muted)}
@media (max-width:700px){.floor-row{grid-template-columns:1fr}.floor-row .floor-tag{text-align:left}}

/* apartments overview */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(28px,4vw,44px)}
.filter-bar button{font-family:var(--font-mono);font-size:.82rem;font-weight:500;letter-spacing:.04em;background:var(--panel);border:1.5px solid var(--line-strong);color:var(--ink);padding:.7em 1.5em;border-radius:24px;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease-soft),box-shadow .25s var(--ease-soft)}
.filter-bar button:hover{border-color:var(--accent);color:var(--accent-hover);transform:translateY(-1px)}
.filter-bar button.active{background:var(--accent);border-color:var(--accent);color:var(--snow);box-shadow:0 8px 20px rgba(47,111,98,.3)}

.apt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.apt-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(20,25,20,.05);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.apt-card:hover{transform:translateY(-6px);box-shadow:0 24px 44px rgba(20,25,20,.16)}
.apt-photo{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--shade-deep);cursor:pointer}
.apt-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.apt-card:hover .apt-photo img{transform:scale(1.06)}
.apt-photo .badge{position:absolute;top:12px;left:12px;background:rgba(16,26,23,.7);color:var(--snow);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;padding:.4em .8em;border-radius:16px;backdrop-filter:blur(4px)}
.apt-photo.placeholder{display:flex;align-items:center;justify-content:center}
.apt-photo.placeholder svg{width:40%;opacity:.5}
.apt-photo .soon{position:absolute;bottom:12px;left:12px;right:12px;font-family:var(--font-mono);font-size:.68rem;color:var(--snow);background:rgba(16,26,23,.55);padding:.4em .7em;border-radius:8px;text-align:center;letter-spacing:.04em}
.apt-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.apt-body h3{font-size:1.24rem;margin:0}
/* Two-sentence teaser: real text on the page for readers and search engines,
   with the full description one click away in the detail view. */
.apt-excerpt{margin:0;font-size:.9rem;line-height:1.5;color:var(--ink-soft);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.apt-meta{display:flex;flex-wrap:wrap;gap:.6em 1em;font-family:var(--font-mono);font-size:.76rem;color:var(--ink-soft)}
.apt-meta span{display:inline-flex;align-items:center;gap:.4em}
.apt-desc{font-size:.92rem;flex:1}
.apt-actions{display:flex;gap:10px;margin-top:auto;flex-wrap:wrap}
.apt-actions .btn{padding:.6em 1.1em;font-size:.78rem}
.apt-actions .btn-outline{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.apt-actions .btn-outline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

/* apartment detail lightbox */
.lightbox{position:fixed;inset:0;background:rgba(10,14,12,.88);z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox-inner{background:var(--panel);border-radius:var(--radius);max-width:960px;width:100%;max-height:88vh;overflow:auto;position:relative}
.lightbox-close{position:sticky;top:0;float:right;background:var(--ink);color:var(--snow);border:0;width:38px;height:38px;border-radius:50%;cursor:pointer;margin:14px 14px 0 0;font-size:1.1rem;z-index:2}
.lb-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--panel);padding:16px 16px 0}
.lb-gallery img{width:100%;height:180px;object-fit:cover;border-radius:8px;cursor:pointer;transition:opacity .2s}
.lb-gallery img:hover{opacity:.88}
.lb-gallery img[hidden]{display:none}
@media (max-width:700px){.lb-gallery{grid-template-columns:repeat(2,1fr)}}
.lb-more-btn{display:block;width:calc(100% - 32px);margin:10px 16px 0;text-align:center;background:var(--accent-muted);color:var(--accent-hover);border:0;border-radius:8px;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.03em;padding:.9em;cursor:pointer;transition:background .2s}
.lb-more-btn:hover{background:var(--accent);color:var(--snow)}
.lb-content{padding:28px clamp(20px,4vw,40px) 40px}
.lb-content .apt-actions{margin-top:1.8em;margin-bottom:.6em}
.lb-content .apt-actions .btn{padding:.95em 2em;font-size:.95rem}
.lb-section-kicker{display:block;margin:1.4em 0 .5em}
.lb-content > p{margin:0}
.lb-desc-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.lb-desc-more{display:block;background:none;border:0;padding:0;margin:.5em 0 0;color:var(--accent);font-family:var(--font-mono);font-size:.78rem;letter-spacing:.03em;text-decoration:underline;cursor:pointer}
.lb-amenities{display:flex;flex-wrap:wrap;gap:8px;margin:.5em 0 0}
.lb-amenities span{background:var(--accent-muted);color:var(--accent-hover);font-family:var(--font-mono);font-size:.74rem;padding:.4em .8em;border-radius:14px}

/* fullscreen single-photo viewer, opened from the apartment lightbox gallery */
.photo-viewer{position:fixed;inset:0;background:rgba(5,8,7,.95);z-index:400;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.photo-viewer.open{opacity:1;visibility:visible}
.pv-img{max-width:min(92vw,1100px);max-height:88vh;object-fit:contain;border-radius:4px}
.pv-close{position:fixed;top:18px;right:18px;background:rgba(255,255,255,.12);color:var(--snow);border:0;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:1.2rem}
.pv-nav{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);color:var(--snow);border:0;width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:1.6rem;line-height:1}
.pv-prev{left:18px}
.pv-next{right:18px}
.pv-nav:hover,.pv-close:hover{background:rgba(255,255,255,.24)}

/* booking modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(10,14,12,.6);backdrop-filter:blur(3px);z-index:400;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-backdrop.open{opacity:1;visibility:visible}
.modal{background:var(--panel);border-radius:var(--radius);max-width:520px;width:100%;padding:clamp(24px,4vw,40px);max-height:90vh;overflow:auto;transform:translateY(16px);transition:transform .35s var(--ease)}
.modal-backdrop.open .modal{transform:translateY(0)}
.modal-close{float:right;background:none;border:0;font-size:1.3rem;cursor:pointer;color:var(--ink-soft);line-height:1}
.modal h3{margin-top:0}
.modal .field{margin-bottom:16px}
.modal label{display:block;font-family:var(--font-body);font-size:.85rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin-bottom:.5em}
.modal input,.modal select{width:100%;padding:.75em .9em;border:1px solid var(--line-strong);border-radius:8px;font-family:var(--font-body);font-size:.95rem;background:var(--shade);color:var(--ink)}
.modal .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal .notice{background:var(--accent-muted);color:var(--accent-hover);border-radius:10px;padding:.9em 1.1em;font-size:.85rem;margin-bottom:18px}
.modal .submit-btn{width:100%;justify-content:center;margin-top:6px}
.modal .success{display:none;text-align:center;padding:20px 0}
.modal .success svg{margin:0 auto 14px}
.modal.is-success form{display:none}
.modal.is-success .success{display:block}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,60px)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.form-field{margin-bottom:18px}
.form-field label{display:block;font-family:var(--font-body);font-size:.85rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin-bottom:.5em}

/* ---------- legal pages (Impressum / Datenschutz) ---------- */
.legal-text{max-width:74ch}
.legal-text h2{font-size:clamp(1.15rem,1.9vw,1.4rem);margin:2em 0 .6em}
.legal-text h2:first-child{margin-top:0}
.legal-text p{margin:0 0 1em}
.legal-text ul{margin:0 0 1em;padding-left:1.3em;color:var(--ink-soft)}
.legal-text li{margin-bottom:.5em}
.legal-text a{color:var(--accent)}
.legal-updated{margin-top:2.5em;font-size:.88rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:1.2em}
/* Highlights the details the owner still has to supply before going live. */
.legal-todo{background:#FFF3C4;border-left:3px solid #E0A800;padding:.5em .8em;display:block;color:var(--ink)}

/* required-field marker, shared by the contact form and the booking modal */
.form-field.is-required > label::after,.field.is-required > label::after{content:" *";color:var(--accent);font-weight:700}
.required-hint{font-family:var(--font-body);font-size:.8rem;color:var(--ink-soft);margin:0 0 1em}
.form-error{margin:1em 0 0;padding:.9em 1.1em;border-radius:10px;background:#FDECEA;border-left:3px solid #B4483C;color:#7A2F26;font-size:.9rem}
.submit-btn[disabled],button[type="submit"][disabled]{opacity:.6;cursor:progress}
input:user-invalid,textarea:user-invalid{border-color:#B4483C}
.form-field input,.form-field select,.form-field textarea{width:100%;padding:.85em 1em;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);font-family:var(--font-body);font-size:.98rem;color:var(--ink)}
.form-field textarea{min-height:130px;resize:vertical}
.info-card{background:var(--shade);color:var(--ink);border-radius:var(--radius);padding:clamp(26px,4vw,38px)}
.info-card h3{color:var(--ink)}
.info-card .row{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.info-card .row:first-of-type{border-top:0}
.info-card .row svg{flex:none;margin-top:2px;color:var(--accent)}
.info-card .row a{color:var(--ink);text-decoration:none;opacity:.9}
.info-card .row a:hover{opacity:1;text-decoration:underline}
.map-embed{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin-top:20px;aspect-ratio:16/10}
.map-embed iframe{width:100%;height:100%;border:0}

/* footer */
footer{background:var(--night);color:var(--snow);padding:clamp(48px,7vw,80px) 0 28px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media (max-width:780px){.footer-grid{grid-template-columns:1fr 1fr}}
footer h4{color:var(--snow);font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1em;opacity:.75}
footer .brand{font-family:var(--font-display);font-weight:600;font-size:1.4rem;margin-bottom:.5em;display:flex;align-items:center;gap:.5em}
footer p{color:rgba(247,245,239,.65)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.7em}
footer a{color:rgba(247,245,239,.82);text-decoration:none;font-size:.92rem}
footer a:hover{color:var(--snow);text-decoration:underline}
.footer-bottom{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-family:var(--font-mono);font-size:.72rem;color:rgba(247,245,239,.5)}

/* about page specifics */
.timeline{display:grid;gap:26px}
.timeline .t-item{display:grid;grid-template-columns:90px 1fr;gap:20px}
.timeline .t-year{font-family:var(--font-mono);color:var(--accent);font-size:.9rem;padding-top:.2em}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:780px){.value-grid{grid-template-columns:1fr}}
.value-card{padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.value-card svg{color:var(--accent);margin-bottom:14px}
.value-card .icon{width:64px;height:64px;border-radius:50%;overflow:hidden;margin-bottom:14px;box-shadow:0 6px 16px rgba(20,25,20,.1)}
.value-card .icon img{width:100%;height:100%;object-fit:cover}

@media (pointer:coarse){.btn,.btn-book,.filter-bar button{min-height:44px}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.s-item{opacity:1!important;transform:none!important}
}

/* If JavaScript never runs, nothing should stay invisible (see the
   inline html.classList.add('js') script right after <body>). */
html:not(.js) .reveal,html:not(.js) .s-item{opacity:1!important;transform:none!important}

/* ============================================================
   MOBILE
   Alles unter dieser Linie betrifft nur Handy- und Tablet-
   Bildschirme. Die Desktop-Darstellung bleibt unverändert.
   ============================================================ */

/* Handy-Browser blenden ihre Adressleiste beim Scrollen ein und aus. Mit
   dem klassischen vh springt das Layout dabei jedes Mal um ~60 px. svh ist
   die Höhe *mit* eingeblendeter Leiste und bleibt darum stabil. */
@supports (height:100svh){
  .scrollzoom-sticky{height:100svh}
  /* Nur im Handy-Menü: dort ist .nav-links die eingeschobene Fläche. Auf dem
     Desktop ist es die normale Menüzeile — eine Höhe würde die Leiste dort
     über den ganzen Bildschirm aufblähen. */
  @media (max-width:880px){ .nav-links{height:100svh} }
}

/* ---------- Navigation ---------- */
@media (max-width:880px){
  /* Ein Tipp neben das Menü schliesst es wieder. Ohne diese Fläche kam man
     nur über das Burger-Symbol zurück — und das lag hinter dem Menü. */
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:1;background:rgba(10,16,13,.5);opacity:0;visibility:hidden;transition:opacity .3s var(--ease-soft),visibility .3s;cursor:pointer}
  body.menu-open .nav-backdrop{opacity:1;visibility:visible}
  /* Das Menü liegt über allen anderen Elementen der Leiste. Sonst schaute
     der Sprachknopf mitten in die weisse Fläche hinein. */
  .nav-links{z-index:2;padding-bottom:36px}
  body.menu-open .nav-right{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease-soft),visibility .2s}
  /* Das Burger-Symbol wandert bei offenem Menü nach rechts oben und dient
     dort als Schliessen-Knopf — in Dunkelgrün, weil der Hintergrund weiss ist. */
  body.menu-open .nav-toggle{position:fixed;top:14px;right:14px;z-index:3;color:var(--ink)}
}

@media (max-width:600px){
  /* Auf 375 px passten Logo, Menü, Sprache *und* Buchen-Knopf nicht
     nebeneinander — der Buchen-Knopf ragte rechts aus dem Bild. Er wandert
     darum ins aufklappbare Menü, wo er in voller Breite steht. */
  .nav{padding-left:16px;padding-right:16px}
  .nav .brand{font-size:1.06rem;gap:.42em}
  .nav .brand img,.nav .brand svg{width:22px}
  .nav-right{gap:10px}
  .lang-btn{padding:.42em .7em;font-size:.78rem}
  .nav-right > .btn-book{display:none}
  .nav-cta{display:block;width:100%;margin-top:6px}
  .nav-cta .btn{width:100%;justify-content:center;font-size:.92rem;padding:.9em 1.4em}
}

/* ---------- Startbild ---------- */
@media (max-width:600px){
  .hero-copy{padding:0 18px}
  .hero-copy .eyebrow{font-size:.72rem;letter-spacing:.1em;margin-bottom:.85em}
  .hero-copy .eyebrow::before,.hero-copy .eyebrow::after{display:none}
  .hero-copy h1{font-size:clamp(1.5rem,7.4vw,2.05rem);max-width:20ch}
  .hero-copy .sub{font-size:.95rem;max-width:34ch;margin-top:.2em}
  .hero-search{margin-top:1.25em}
  .hero-search .search-bar{padding:16px;gap:11px}
  .search-field label{font-size:.72rem;margin-bottom:.35em}
  .search-field input,.search-field select{padding:.7em .8em;font-size:.92rem}
  .search-bar .btn-primary{font-size:.94rem;padding:.85em 1.4em}
}

/* Auf niedrigen Geräten (iPhone SE & Co.) muss das Suchformular komplett
   auf den ersten Bildschirm passen — der Scroll-Hinweis weicht dafür. */
@media (max-width:600px) and (max-height:740px){
  .hero-copy .sub{display:none}
  .scroll-cue{display:none}
  .hero-copy .eyebrow{margin-bottom:.6em}
}

/* ---------- Bildergalerie mit Zoom ---------- */
@media (max-width:760px){
  /* Vorher startete das Foto als 113 px schmaler, 763 px hoher Streifen mit
     grauen Balken links und rechts. Jetzt beginnt es als ordentliche Karte
     (siehe auch die Startwerte in main.js) und der Text darauf ist lesbar. */
  .scrollzoom-center{border-radius:16px}
  .scrollzoom-caption{padding:0 26px}
  .scrollzoom-caption h2{font-size:clamp(1.65rem,7.4vw,2.3rem);max-width:14ch}
  .scrollzoom-caption .lede{font-size:.97rem;max-width:30ch}
  /* Das Foto darunter ist hell (weisse Decke, helle Wand). Ohne diese
     kräftige Abdunklung war die weisse Schrift kaum zu lesen. */
  .scrollzoom-caption::before{background:linear-gradient(180deg,rgba(6,10,9,.5) 0%,rgba(6,10,9,.62) 45%,rgba(6,10,9,.8) 100%)}
  .scrollzoom-caption .lede{line-height:1.45}
}

/* ---------- Unterseiten-Kopf ---------- */
@media (max-width:880px){
  /* Die Navigationsleiste liegt fest über der Seite; ohne diesen Abstand
     klebte die Überschrift direkt unter dem Logo. */
  .page-hero{padding-top:104px}
}

/* ---------- Detailfenster einer Wohnung ---------- */
@media (max-width:700px){
  .lightbox{padding:12px}
  .lightbox-inner{max-height:94vh}
  .lb-gallery{padding:12px 12px 0;gap:5px}
  .lb-gallery img{height:130px}
  .lb-content{padding:22px 18px 32px}
  .lb-content .apt-actions .btn{width:100%;justify-content:center}
}

/* ---------- Kleinigkeiten ---------- */
@media (max-width:600px){
  .timeline .t-item{grid-template-columns:1fr;gap:6px}
  .apt-actions .btn{font-size:.85rem;flex:1;justify-content:center}
  .faq-q{padding:18px 18px;font-size:1rem}
  .faq-a p{padding:0 18px 18px}
}

/* Auf Touchgeräten muss jede Schaltfläche mindestens 44 px hoch sein,
   damit man sie mit dem Daumen sicher trifft. */
@media (pointer:coarse){
  .lang-btn,.nav-toggle,.lang-menu button{min-height:44px}
  .faq-q{min-height:52px}
}