@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/cormorant-garamond-var.woff2") format("woff2")}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-var.woff2") format("woff2")}

:root{
  --sand:#F7F2E8; --sand-warm:#FDFAF3; --lake:#123F5E; --lake-deep:#0E3350;
  /* Gold: bright for dark panels / CTA fills; darker for sand text (WCAG) */
  --gold:#C9973B; --gold-bright:#D8A94F;
  --gold-on-sand:#8C6827;      /* 4.56:1 on sand — kickers, small gold type */
  --gold-numeral-sand:#B18431; /* 3.03:1 on sand — large capacity numerals */
  --water:#8FB8CE; --water-on-dark:#B8D4E4; /* lighten for captions on navy */
  --linden:#5F7D54; --rose:#BE5A45; --ink:#182430; --muted:#4A5560;
  --font-sans:'Inter',system-ui,sans-serif; --font-display:'Cormorant Garamond',Georgia,serif;
  /* Spacing: 4/8 doctrine (A Real UIUX Sht) — supersedes Fibonacci gaps */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
  --space-9:48px; --space-10:64px; --space-11:80px; --space-12:96px;
  --content-max:1280px;
  --measure:68ch;
  --dur-micro:150ms; --dur-move:250ms; --dur-scene:600ms;
  /* Type roles (Impeccable typeset + Real UIUX hierarchy — Tegeler faces) */
  --fs-display:clamp(48px,6.5vw,76px);
  --fs-headline:clamp(32px,4.2vw,48px);
  --fs-lead:24px;
  --fs-body:18px;
  --fs-ui:16px;
  --fs-meta:12px;
  --lh-body:1.65;
  --lh-body-dark:1.75;
  --lh-display:1.02;

  --radius-arch:999px 999px 12px 12px; --ease-lake:cubic-bezier(0.33,1,0.68,1);
  --shadow-photo:0 24px 48px rgba(14,51,80,.22),0 48px 96px rgba(14,51,80,.18);
  --ring-gold:0 0 0 1px rgba(201,151,59,.35);
  --hero-still-start:url("../img/haus-winter-1600.jpg");
  --hero-still-end:url("../img/locationfotos-seeterassen-013-1600.jpg");
  --hero-start-opacity:1;
  --hero-end-opacity:0;
  --hero-pass-opacity:0;
  --hero-drift-y:0px;
  --hero-copy-opacity:0;
  --hero-copy-y:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sand);color:var(--ink);font:var(--fs-body)/var(--lh-body) var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
body.no-motion,body.no-motion *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
::selection{background:var(--gold);color:var(--ink)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.skip-link{position:fixed;left:12px;top:12px;z-index:20;transform:translateY(-80px);background:var(--gold);color:var(--ink);padding:12px 24px;font-weight:800;border-radius:8px}
.skip-link:focus{transform:none}

/* ---------- chrome ---------- */
.topbar{position:fixed;inset:0 0 auto;z-index:10;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:rgba(247,242,232,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(18,63,94,.10);transform:translateY(-80px);transition:transform .6s var(--ease-lake)}
.topbar.is-visible{transform:none}
.wordmark{font-family:var(--font-display);font-size:24px;font-weight:700;text-decoration:none;color:var(--lake);line-height:.95}
.wordmark span{display:block;font:700 8px/1.4 var(--font-sans);text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
.topbar nav{display:flex;align-items:center;gap:24px}
.topbar nav a{min-height:48px;display:inline-flex;align-items:center;text-decoration:none;font-weight:600;font-size:16px;color:var(--lake);border-bottom:2px solid transparent;transition:border-color .3s var(--ease-lake)}
.topbar nav a:hover{border-bottom-color:var(--gold)}
.topbar .cta{background:linear-gradient(170deg,var(--gold-bright),var(--gold));color:var(--ink);padding:8px 24px;border-radius:8px;font-weight:800;border-bottom:0;box-shadow:0 4px 12px rgba(201,151,59,.35);transition:transform .3s var(--ease-lake),box-shadow .3s var(--ease-lake)}
.topbar .cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,151,59,.45)}

.dot-rail{position:fixed;right:12px;top:50%;z-index:9;display:grid;gap:4px;transform:translateY(-50%)}
.dot-rail a{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;position:relative;transition:background .3s,box-shadow .3s,border-color .3s}
.dot-rail a:before{content:"";width:8px;height:8px;border:2px solid rgba(201,151,59,.55);border-radius:50%;transition:background .3s,box-shadow .3s,border-color .3s,transform .3s}
.dot-rail a.is-active:before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 12px rgba(201,151,59,.65);transform:scale(1.15)}
.dot-rail span{position:absolute;right:48px;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none;background:var(--lake-deep);color:var(--sand);padding:8px 12px;border-radius:999px;white-space:nowrap;font-size:12px;font-weight:600;transition:opacity .25s;box-shadow:0 8px 24px rgba(14,51,80,.35)}
.dot-rail a:hover span,.dot-rail a:focus-visible span{opacity:1}

/* ---------- scenes ---------- */
.scene{position:relative;overflow:hidden;padding:var(--space-12) max(var(--space-6),calc((100% - var(--content-max))/2))}
.dark{background:linear-gradient(180deg,var(--lake) 0%,var(--lake-deep) 115%);color:var(--sand)}
.dark:before{content:"";position:absolute;inset:0;background:radial-gradient(90% 55% at 20% 0%,rgba(143,184,206,.10),transparent 65%);pointer-events:none}
.dark>*{position:relative}

.kicker{margin:0 0 12px;text-transform:uppercase;font-size:var(--fs-meta);font-weight:800;letter-spacing:.22em;color:var(--gold-on-sand)}
.kicker:before{content:"";display:inline-block;width:32px;height:1px;background:currentColor;vertical-align:middle;margin-right:12px;opacity:.7}
.dark .kicker{color:var(--gold)}

.eyebrow{margin:0 0 12px;text-transform:uppercase;font-size:var(--fs-meta);font-weight:800;letter-spacing:.22em;color:var(--water)}
.dark .eyebrow,.page-hero .eyebrow{color:var(--water-on-dark)}
h1,h2{font-family:var(--font-display);font-weight:700;line-height:var(--lh-display);margin:0;letter-spacing:.002em;text-wrap:balance}
h1{font-size:var(--fs-display);max-width:14ch}
/* Macro space: more above a heading than below (doctrine / proximity) */
h2{font-size:var(--fs-headline);margin-top:8px}
.copy h2{margin-bottom:4px}
p{margin:12px 0 0;max-width:var(--measure)}
.entity{font-size:var(--fs-lead);line-height:1.55;max-width:42ch}
.trust{color:rgba(247,242,232,.86);font-size:var(--fs-ui);line-height:1.5;max-width:52ch}
.dark p,.dark .entity{line-height:var(--lh-body-dark)}
.dark .number-caption{opacity:.92;letter-spacing:.12em}

/* Hero actions — Real UIUX hero: one primary door, quiet secondaries (b5) */
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center}
.btn-primary,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 28px;border-radius:10px;font-weight:800;font-size:var(--fs-ui);text-decoration:none;transition:transform var(--dur-move) var(--ease-lake),box-shadow var(--dur-move),background var(--dur-move),border-color var(--dur-move)}
.btn-primary{background:linear-gradient(170deg,var(--gold-bright),var(--gold));color:var(--ink);box-shadow:0 8px 28px rgba(201,151,59,.45)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(201,151,59,.55)}
.btn-ghost{border:1.5px solid rgba(247,242,232,.45);color:var(--sand);background:rgba(14,51,80,.28)}
.btn-ghost:hover{border-color:var(--gold);background:rgba(201,151,59,.16)}

.gold-number{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(72px,9.5vw,112px);line-height:.85;color:var(--gold-numeral-sand);letter-spacing:-.01em}
.dark .gold-number,.capacity .gold-number,.inquiry .gold-number,.hero .gold-number{color:var(--gold)}
.number-caption{margin-top:8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;opacity:.85;color:var(--muted)}
.dark .number-caption{color:rgba(247,242,232,.85);opacity:1}

/* ---------- hero ---------- */
.hero{min-height:200svh;padding:0;overflow:visible;color:var(--sand);background:linear-gradient(172deg,var(--lake-deep) 0%,var(--lake) 44%,#2E5E7E 74%,var(--water) 108%)}
.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(120% 55% at 72% 88%,rgba(201,151,59,.14),transparent 60%),linear-gradient(180deg,rgba(14,51,80,.10),transparent 45%,rgba(14,51,80,.30));pointer-events:none}
.hero-stage{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-layer{position:absolute;inset:0;background-size:cover;background-position:center;will-change:opacity,transform}
.hero-layer-end{background-image:var(--hero-still-end);opacity:var(--hero-end-opacity);transform:scale(1.045) translateY(var(--hero-drift-y))}
.hero-layer-start{z-index:2;background-image:var(--hero-still-start);opacity:var(--hero-start-opacity)}
.hero-pass{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:var(--hero-pass-opacity);background:radial-gradient(80% 70% at 50% 38%,rgba(247,242,232,.26),rgba(247,242,232,.08) 48%,transparent 76%),linear-gradient(105deg,rgba(247,242,232,.03),rgba(247,242,232,.22) 45%,rgba(216,169,79,.11) 62%,rgba(247,242,232,.04));backdrop-filter:blur(16px) saturate(1.14);-webkit-backdrop-filter:blur(16px) saturate(1.14)}
.hero-scrim{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(14,51,80,.34) 0%,rgba(14,51,80,.10) 34%,rgba(14,51,80,.20) 62%,rgba(14,51,80,.64) 100%)}
.hero-copy{position:sticky;top:0;z-index:1;display:flex;align-items:flex-end;max-width:1360px;margin:0 auto;padding:clamp(80px,10vh,96px) 32px 80px;height:100svh;opacity:var(--hero-copy-opacity);transform:translateY(var(--hero-copy-y));will-change:opacity,transform}
.hero-text{max-width:760px;text-shadow:0 1px 20px rgba(14,51,80,.7)}
.hero-text .stat-strip{margin-top:36px}
.scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;display:grid;justify-items:center;gap:8px;color:rgba(247,242,232,.85);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;transition:opacity .5s var(--ease-lake);pointer-events:none}
.scroll-cue span{width:12px;height:12px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);animation:cue 2.4s var(--ease-lake) infinite}
@keyframes cue{0%,100%{transform:rotate(45deg) translate(0,0);opacity:1}50%{transform:rotate(45deg) translate(8px,8px);opacity:.35}}

.hero-tune-panel{position:fixed;top:64px;right:18px;z-index:40;width:min(280px,calc(100vw - 32px));padding:16px;border:1px solid rgba(201,151,59,.55);border-radius:8px;background:rgba(14,51,80,.94);color:var(--sand);box-shadow:0 18px 48px rgba(0,0,0,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hero-tune-panel label{display:grid;grid-template-columns:1fr auto;gap:8px 12px;margin-bottom:12px;font-size:12px;font-weight:800;color:var(--sand)}
.hero-tune-panel input[type=range]{grid-column:1/-1;height:32px;padding:0;border:0;background:transparent;accent-color:var(--gold)}
.hero-tune-panel output{color:var(--gold-bright);font-weight:800}
.hero-tune-readout{margin:2px 0 0;max-width:none;font-size:12px;font-weight:800;letter-spacing:.08em;color:rgba(247,242,232,.82)}

.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px;max-width:760px}
.stat-strip a{min-height:80px;padding:12px 12px 16px;border-top:2px solid var(--gold);background:rgba(14,51,80,.38);text-decoration:none;border-radius:0 0 8px 8px;transition:transform .35s var(--ease-lake),background .35s}
.stat-strip a:hover{transform:translateY(-4px);background:rgba(14,51,80,.62)}
.stat-strip strong{display:block;font-family:var(--font-display);font-size:clamp(32px,3vw,40px);line-height:1.05;color:var(--gold)}
.stat-strip span{font-size:12px;text-transform:uppercase;font-weight:800;letter-spacing:.1em;opacity:.9}

.waterline{height:32px;color:var(--lake);background:var(--sand)}
.waterline svg{display:block;width:100%;height:32px}
.video-slot{height:12px;background:linear-gradient(90deg,transparent 8%,rgba(201,151,59,.28) 50%,transparent 92%)}

/* ---------- split scenes ---------- */
.split{display:grid;grid-template-columns:minmax(320px,61.8fr) minmax(320px,38.2fr);gap:48px;align-items:center}
.split:nth-of-type(odd) .media-stack{order:2}
.media-stack{position:relative;min-height:320px}
.media-stack>picture,.media-stack>figure{margin:0}
.arch{border-radius:var(--radius-arch)}
.media-stack>picture img,.media-stack figure img{width:100%;aspect-ratio:1.45;object-fit:cover;box-shadow:var(--shadow-photo);outline:1px solid rgba(201,151,59,.35);outline-offset:-12px;transition:transform .6s var(--ease-lake)}
.dark .media-stack>picture img,.dark .media-stack figure img{box-shadow:0 32px 96px rgba(0,0,0,.45)}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.thumbs picture{display:block;min-width:0}
.thumbs img{width:100%;aspect-ratio:1.45;object-fit:cover;border-radius:8px;box-shadow:0 8px 24px rgba(14,51,94,.18);transition:transform .4s var(--ease-lake),box-shadow .4s var(--ease-lake)}
.thumbs img:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 16px 32px rgba(14,51,94,.3)}
.thumbs.portholes{grid-template-columns:repeat(3,minmax(0,96px));justify-content:start}
.thumbs.portholes img{aspect-ratio:1;border-radius:50%;border:3px solid rgba(201,151,59,.5);outline:1px solid rgba(14,51,80,.3);outline-offset:4px}
.scene:not(.hero) img:not([src*="/logo-"]):not([src*="logo-"]){cursor:zoom-in}
.copy{align-self:center}
.copy a,.text-link,.map-link{font-weight:800;text-decoration:underline;text-decoration-color:rgba(201,151,59,.7);text-decoration-thickness:2px;text-underline-offset:8px;transition:text-decoration-color .3s}
.copy a:hover,.text-link:hover,.map-link:hover{text-decoration-color:var(--gold)}
.text-link,.map-link{display:inline-flex;min-height:48px;align-items:center;margin-top:24px;margin-right:24px}

.gradient-media{position:relative;border-radius:var(--radius-arch);background:linear-gradient(165deg,var(--lake-deep) 5%,var(--lake) 48%,#3F7291 82%,var(--water) 112%);box-shadow:var(--shadow-photo);min-height:420px;overflow:hidden}
.gradient-media:before{content:"";position:absolute;inset:0;background:url("../img/locationfotos-seeterassen-028-800.webp") center/280px repeat;opacity:.10;mix-blend-mode:screen}
.gradient-media:after{content:"Foto folgt — echte Aufnahmen statt Symbolbilder";position:absolute;inset:auto 0 24px;text-align:center;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,242,232,.6)}

/* ---------- capacity ---------- */
.capacity{display:grid;grid-template-columns:minmax(320px,38.2fr) minmax(320px,61.8fr);gap:48px;color:var(--sand);background:var(--lake-deep)}
.capacity-bg{position:absolute;inset:-8% 0;max-width:none;background:linear-gradient(rgba(14,51,80,.86),rgba(14,51,80,.93)),url("../img/locationfotos-seeterassen-006-1600.jpg") center/cover;will-change:transform}
.capacity:after{content:"";position:absolute;inset:0;background:url("../img/locationfotos-seeterassen-028-1600.webp") center/cover;opacity:.07;pointer-events:none}
.capacity>*:not(.capacity-bg){position:relative;z-index:1}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.chips a{min-height:44px;display:inline-flex;align-items:center;border:1px solid rgba(247,242,232,.35);border-radius:999px;padding:8px 18px;text-decoration:none;font-weight:700;font-size:16px;transition:background .3s,border-color .3s,transform .3s var(--ease-lake)}
.chips a:hover{background:rgba(201,151,59,.2);border-color:var(--gold);transform:translateY(-2px)}

.guest-slider{margin-top:32px;background:rgba(247,242,232,.97);color:var(--ink);border-radius:16px;padding:24px;box-shadow:0 24px 48px rgba(0,0,0,.3)}
.gs-q{margin:0;font-family:var(--font-display);font-weight:600;font-size:24px;color:var(--lake)}
.gs-val{font-family:var(--font-display);font-weight:700;font-size:48px;color:var(--gold-numeral-sand);line-height:1.1;margin-top:8px}
.gs-val small{font:600 12px/1 var(--font-sans);color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.guest-slider input[type=range]{width:100%;margin:16px 0;accent-color:var(--gold);height:32px;cursor:pointer}
.gs-rec{margin:8px 0 16px;max-width:none;font-size:16px;line-height:1.45;color:var(--lake);font-weight:600}
.gs-chips{display:flex;gap:8px;flex-wrap:wrap}
.gs-chips span{border-radius:999px;padding:8px 16px;font-size:13.4px;font-weight:600;background:rgba(143,184,206,.24);color:var(--lake);transition:background .3s,color .3s}
.gs-chips span.hit{background:var(--lake);color:var(--sand)}
.gs-cta{margin-top:24px;width:100%;min-height:48px;border:0;border-radius:12px;background:linear-gradient(170deg,var(--gold-bright),var(--gold));color:var(--ink);font-weight:800;font-size:16px;cursor:pointer;box-shadow:0 8px 24px rgba(201,151,59,.4);transition:transform .3s var(--ease-lake),box-shadow .3s}
.gs-cta:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(201,151,59,.5)}

/* film teaser — mid-tour payoff, not a dead end nav item */
.film-teaser{display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,1.1fr);gap:48px;align-items:center}
.film-teaser-copy .cta-inline{display:inline-flex;min-height:48px;align-items:center;margin-top:24px;padding:8px 24px;border-radius:8px;background:linear-gradient(170deg,var(--gold-bright),var(--gold));color:var(--ink);font-weight:800;text-decoration:none;box-shadow:0 8px 24px rgba(201,151,59,.35)}
.film-teaser-copy .cta-inline:hover{transform:translateY(-2px)}
.film-teaser-card{position:relative;display:block;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-photo);outline:1px solid rgba(201,151,59,.35);outline-offset:-12px;transition:transform .4s var(--ease-lake)}
.film-teaser-card:hover{transform:translateY(-4px)}
.film-teaser-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.play-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:80px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:999px;background:rgba(14,51,80,.88);color:var(--sand);font-weight:800;letter-spacing:.04em;box-shadow:0 12px 32px rgba(0,0,0,.4)}

.inquiry-success{background:rgba(253,250,243,.97);color:var(--ink);border-radius:16px;padding:32px;box-shadow:0 24px 48px rgba(0,0,0,.3)}
.inquiry-success[hidden]{display:none!important}
.inquiry-success h3{font-family:var(--font-display);font-size:clamp(32px,3vw,40px);margin:0 0 8px;color:var(--lake)}
.inquiry-draft{margin:24px 0;padding:16px 18px;border-radius:12px;background:rgba(18,63,94,.06);border:1px solid rgba(18,63,94,.12);white-space:pre-wrap;font:16px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);max-height:240px;overflow:auto}
.inquiry-success .form-controls{margin-top:8px}
.inquiry-success .wa-btn,.inquiry-success .tel-btn,.inquiry-success .mail-btn{min-height:48px;display:inline-flex;align-items:center;padding:8px 18px;border-radius:8px;font-weight:800;text-decoration:none;border:2px solid rgba(24,36,48,.14);background:#fff;color:var(--lake)}
.inquiry-success .wa-btn{background:#25D366;border-color:#25D366;color:#fff}

.table-wrap{overflow:auto;background:rgba(253,250,243,.97);color:var(--ink);padding:24px 24px 24px;border-radius:16px;box-shadow:0 24px 48px rgba(0,0,0,.3)}
table{width:100%;border-collapse:collapse;min-width:640px}
caption{text-align:left;font-family:var(--font-display);font-size:32px;font-weight:700;color:var(--lake);margin-bottom:16px}
th,td{border-bottom:1px solid rgba(24,36,48,.12);padding:12px;text-align:left;vertical-align:top}
thead th{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);border-bottom:2px solid var(--gold)}
tbody tr:hover{background:rgba(143,184,206,.10)}
tbody th{color:var(--lake);font-family:var(--font-display);font-size:20px;font-weight:700}
td:nth-child(2){font-weight:700;color:var(--lake)}
.small{font-size:16px;color:inherit;opacity:.82}

/* ---------- inquiry ---------- */
.inquiry{display:grid;grid-template-columns:minmax(320px,38.2fr) minmax(320px,61.8fr);gap:48px;background:linear-gradient(165deg,var(--lake-deep) 5%,var(--lake) 55%,#3F7291 100%)}
.inquiry a{color:var(--sand)}
.inquiry-form{background:rgba(253,250,243,.97);color:var(--ink);border-radius:16px;padding:32px;box-shadow:0 24px 48px rgba(0,0,0,.3)}
.honeypot{position:absolute;left:-9999px}
fieldset{border:0;margin:0 0 24px;padding:0}
legend{font-family:var(--font-display);font-size:32px;font-weight:700;color:var(--lake);margin-bottom:16px}
.chip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
label{display:grid;gap:8px;font-weight:700}
.chip-grid label{min-height:48px;display:flex;align-items:center;gap:12px;border:2px solid rgba(24,36,48,.14);padding:12px 16px;border-radius:12px;cursor:pointer;transition:border-color .3s,background .3s,transform .3s var(--ease-lake)}
.chip-grid label:hover{border-color:var(--gold);background:rgba(201,151,59,.06);transform:translateY(-2px)}
.chip-grid input[type=radio]{width:24px;min-height:24px;accent-color:var(--gold);flex:none}
input,textarea,button{font:inherit}
input,textarea{width:100%;min-height:48px;border:2px solid rgba(24,36,48,.16);border-radius:8px;padding:8px 16px;background:#fff;color:var(--ink);transition:border-color .3s,box-shadow .3s}
input:focus,textarea:focus{border-color:var(--water);box-shadow:0 0 0 4px rgba(143,184,206,.25);outline:none}
button{min-height:48px;border:0;border-radius:8px;padding:8px 24px;font-weight:800;cursor:pointer}
.inquiry-form .submit{background:linear-gradient(170deg,var(--gold-bright),var(--gold));color:var(--ink);box-shadow:0 8px 24px rgba(201,151,59,.4);transition:transform .3s var(--ease-lake),box-shadow .3s}
.inquiry-form .submit:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(201,151,59,.5)}
.form-controls{display:flex;flex-wrap:wrap;gap:12px}
.form-controls button:not(.submit){background:#fff;border:2px solid rgba(24,36,48,.16)}
.form-controls button:not(.submit):hover{border-color:var(--water)}
.privacy{font-size:16px;color:var(--muted)}
.contact-fallback{display:flex;flex-wrap:wrap;gap:12px;grid-column:1/-1}
.contact-fallback a{min-height:48px;display:inline-flex;align-items:center;border:1px solid rgba(247,242,232,.34);border-radius:999px;padding:8px 24px;text-decoration:none;font-weight:700;transition:background .3s,border-color .3s}
.contact-fallback a:hover{background:rgba(201,151,59,.2);border-color:var(--gold)}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:clamp(16px,4vw,48px);background:rgba(8,22,34,.84);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .24s var(--ease-lake)}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox img{max-width:90vw;max-height:90vh;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 32px 96px rgba(0,0,0,.55);transform:scale(.975);transition:transform .24s var(--ease-lake);cursor:default}
.lightbox.is-open img{transform:scale(1)}
.lightbox-close{position:fixed;top:18px;right:18px;z-index:31;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(247,242,232,.96);color:var(--lake-deep);box-shadow:0 12px 32px rgba(0,0,0,.32);font-size:32px;line-height:1}
.lightbox-close:hover{background:var(--gold-bright)}

footer{background:var(--lake-deep);color:var(--sand);padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:32px;border-top:2px solid rgba(201,151,59,.5)}
footer>*{max-width:1280px}
address{font-style:normal}
.mobile-sticky{display:none}

/* ---------- reveal ---------- */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(32px);transition:opacity .7s var(--ease-lake),transform .7s var(--ease-lake)}
.js .reveal.is-visible{opacity:1;transform:none}
.js .reveal:nth-child(2){transition-delay:.09s}
.js .reveal:nth-child(3){transition-delay:.15s}
.js .step-panel[hidden],.js .form-controls [hidden]{display:none}

@media (max-width:899px){
  body{font-size:16px;padding-bottom:48px}
  .topbar,.dot-rail{display:none}
  .scene{padding:80px 24px}
  .hero-copy{padding:80px 24px 80px}
  .scroll-cue{bottom:80px}
  h1{font-size:clamp(32px,10vw,44px);max-width:14ch}
  h2{font-size:clamp(32px,7.5vw,40px)}
  .entity{font-size:17px;max-width:none}
  .hero-actions{margin-top:20px}
  .btn-primary,.btn-ghost{min-height:48px;padding:10px 20px;flex:1 1 auto}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .hero-tune-panel{top:12px;right:12px}
  .split,.capacity,.inquiry,.film-teaser{grid-template-columns:1fr;gap:32px}
  .split:nth-of-type(odd) .media-stack{order:0}
  .thumbs{grid-template-columns:repeat(2,1fr)}
  .thumbs.portholes{grid-template-columns:repeat(3,minmax(0,80px))}
  .chip-grid{grid-template-columns:1fr}
  .gradient-media{min-height:300px}
  footer{grid-template-columns:1fr;padding:32px 24px}
  .mobile-sticky{position:fixed;left:0;right:0;bottom:0;z-index:11;display:grid;grid-template-columns:1fr 1fr;background:var(--lake-deep);border-top:1px solid rgba(201,151,59,.4)}
  .mobile-sticky a{min-height:48px;display:flex;align-items:center;justify-content:center;color:var(--sand);font-weight:800;text-decoration:none}
  .mobile-sticky a:first-child{background:linear-gradient(170deg,var(--gold-bright),var(--gold));color:var(--ink)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.js .reveal{opacity:1;transform:none;transition:none}
  .hero-layer-start,.hero-pass{display:none}
  .hero-layer-end{opacity:1;transform:none}
  .hero-copy{opacity:1;transform:none}
  .scroll-cue span{animation:none}
  .lightbox,.lightbox img{transition:none}
}


/* ---------- form progress (doctrine: multi-step needs a finish line) ---------- */
.form-progress{display:flex;align-items:center;gap:12px;margin:0 0 24px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.form-progress strong{color:var(--lake);font-weight:800}
.form-progress .bar{flex:1;height:4px;border-radius:999px;background:rgba(24,36,48,.12);overflow:hidden}
.form-progress .bar>i{display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(var(--p,.33));background:linear-gradient(90deg,var(--gold),var(--gold-bright));transition:transform .3s var(--ease-lake)}
.chip-grid label.is-selected{border-color:var(--gold);background:rgba(201,151,59,.10);box-shadow:0 0 0 1px rgba(201,151,59,.35)}
.inquiry-form legend span{display:inline-block;margin-left:8px;font:700 12px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* scrollbar + caret themed to palette (impeccable craft-floor browser surfaces) */
html{scrollbar-color:rgba(18,63,94,.35) transparent}
input,textarea{caret-color:var(--lake)}

/* ---------- Speisekarte (staff-updated JSON) ---------- */
.sk-mount .sk-shell{max-width:var(--content-max)}
.sk-static-lead{max-width:var(--measure);color:var(--muted)}
[data-speisekarte]{margin-top:32px;display:grid;gap:32px}
.sk-season,.sk-brunch,.sk-menu{background:rgba(253,250,243,.98);color:var(--ink);border-radius:16px;padding:32px;box-shadow:var(--shadow-photo);border:1px solid rgba(201,151,59,.28)}
.dark .sk-season,.dark .sk-brunch,.dark .sk-menu{background:rgba(253,250,243,.97)}
.sk-season h2,.sk-brunch h2,.sk-menu h2{font-size:clamp(28px,3.5vw,40px);color:var(--lake);margin:0}
.sk-section{margin-top:28px}
.sk-section-title{margin:0 0 8px;font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--gold-on-sand)}
.sk-intro{margin-top:12px;max-width:var(--measure)}
.sk-dishes{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.sk-dishes li{padding:12px 0;border-top:1px solid rgba(24,36,48,.1);font-size:17px}
.sk-dishes li:first-child{border-top:0;padding-top:0}
.sk-dishes strong{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--lake)}
.sk-dish-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.sk-price{flex:0 0 auto;font-weight:800;color:var(--lake);white-space:nowrap}
@media(max-width:560px){.sk-dish-heading{align-items:flex-start;flex-direction:column;gap:5px}.sk-price{white-space:normal}}
.sk-note{color:var(--muted);font-weight:500}
.sk-brunch-line{font-family:var(--font-display);font-size:clamp(28px,3vw,40px);font-weight:700;color:var(--gold);margin:12px 0 0;line-height:1.15}
.sk-reserve{margin-top:16px;font-size:17px}
.sk-reserve a{color:var(--lake);font-weight:800}
.sk-hours{margin-top:8px;font-weight:700;color:var(--lake)}
.sk-updated,.sk-foot{font-size:14px;color:var(--muted);margin-top:8px}
.sk-chip{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:999px;background:rgba(201,151,59,.18);border:1px solid rgba(201,151,59,.45);color:var(--sand);font-weight:700;font-size:14px;letter-spacing:.02em}

/* Ananas Catering — same lake/gold world, easy scan */
.catering-scene .catering-points{margin:20px 0 0;padding:0;list-style:none;max-width:42ch}
.catering-scene .catering-points li{position:relative;padding:10px 0 10px 28px;border-top:1px solid rgba(247,242,232,.14);font-weight:600}
.catering-scene .catering-points li:first-child{border-top:0}
.catering-scene .catering-points li:before{content:"";position:absolute;left:0;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(201,151,59,.25)}
.catering-scene .btn-ghost{border-color:rgba(247,242,232,.5)}
.catering-scene a.small,
.catering-scene .small a{color:var(--gold-bright);font-weight:700}
.dark .sk-chip,.hero .sk-chip{color:var(--sand)}
.scene:not(.dark) .sk-chip{color:var(--lake);background:rgba(201,151,59,.12)}

/* ============================================================
   CINEMATIC v20 — multimillion-preview layer (deck only)
   Atmosphere, type drama, photo dominance. Same brand tokens.
   ============================================================ */
body.cinematic{
  --fs-display:clamp(52px, 9vw, 108px);
  --fs-headline:clamp(36px, 5vw, 64px);
  --fs-lead:clamp(18px, 1.6vw, 22px);
  --content-max:1400px;
  --ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-photo:0 32px 80px rgba(8,22,34,.35), 0 8px 24px rgba(8,22,34,.2);
}
body.cinematic .grain{
  pointer-events:none; position:fixed; inset:0; z-index:50; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
@media (prefers-reduced-motion:reduce){
  body.cinematic .grain{display:none}
}

/* Glass chrome */
body.cinematic .topbar{
  height:64px; padding:0 40px;
  background:rgba(14,51,80,.42);
  border-bottom:1px solid rgba(247,242,232,.08);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
}
body.cinematic .topbar .wordmark{color:var(--sand); font-size:22px; letter-spacing:.01em}
body.cinematic .topbar .wordmark span{color:rgba(247,242,232,.55); font-size:9px; letter-spacing:.2em}
body.cinematic .topbar nav a{color:rgba(247,242,232,.88); font-size:14px; font-weight:500; letter-spacing:.02em}
body.cinematic .topbar nav a:hover{border-bottom-color:var(--gold); color:var(--sand)}
body.cinematic .topbar .cta{
  border-radius:999px; padding:10px 22px; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 0 0 1px rgba(216,169,79,.4), 0 12px 40px rgba(201,151,59,.35);
}

/* Hero: cinema billboard */
body.cinematic .hero{
  min-height:220svh;
  background:#070f16;
}
body.cinematic .hero-layer-start,
body.cinematic .hero-layer-end{
  background-size:cover;
  background-position:center 40%;
  filter:saturate(1.05) contrast(1.04);
}
body.cinematic .hero-layer-end{transform:scale(1.08) translateY(var(--hero-drift-y))}
body.cinematic .hero-scrim{
  background:
    linear-gradient(105deg, rgba(7,15,22,.82) 0%, rgba(7,15,22,.35) 42%, rgba(7,15,22,.15) 68%, rgba(7,15,22,.55) 100%),
    linear-gradient(180deg, rgba(7,15,22,.25) 0%, transparent 35%, rgba(7,15,22,.75) 100%);
}
body.cinematic .hero-pass{
  background:radial-gradient(60% 50% at 70% 40%, rgba(201,151,59,.12), transparent 70%);
  backdrop-filter:none;
}
body.cinematic .hero-copy{
  max-width:none; padding:0 clamp(24px, 5vw, 80px) clamp(48px, 8vh, 96px);
  align-items:flex-end;
}
body.cinematic .hero-text{
  max-width:min(920px, 92vw);
  text-shadow:none;
}
body.cinematic .hero .eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.28em; color:rgba(247,242,232,.7);
  margin-bottom:20px;
}
body.cinematic .pulse-dot{
  width:8px; height:8px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 0 rgba(201,151,59,.55);
  animation:pulse-gold 2.4s var(--ease-out-expo) infinite;
}
@keyframes pulse-gold{
  0%{box-shadow:0 0 0 0 rgba(201,151,59,.5)}
  70%{box-shadow:0 0 0 12px rgba(201,151,59,0)}
  100%{box-shadow:0 0 0 0 rgba(201,151,59,0)}
}
body.cinematic .hero h1{
  font-size:var(--fs-display);
  font-weight:500;
  line-height:.92;
  letter-spacing:-.025em;
  max-width:12ch;
  color:var(--sand);
}
body.cinematic .hero h1 em{
  font-style:italic; font-weight:500;
  color:var(--gold-bright);
  background:linear-gradient(120deg, var(--gold-bright), #f0d78a 50%, var(--gold));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
body.cinematic .hero .entity{
  margin-top:28px; max-width:36ch;
  font-size:var(--fs-lead); font-weight:400;
  color:rgba(247,242,232,.88); line-height:1.55;
}
body.cinematic .hero .entity strong{color:var(--sand); font-weight:600}
body.cinematic .hero .trust{
  margin-top:16px; font-size:13px; letter-spacing:.04em;
  color:rgba(247,242,232,.55); max-width:48ch;
}
body.cinematic .hero-actions{margin-top:36px; gap:14px}
body.cinematic .btn-primary{
  min-height:56px; padding:14px 32px; border-radius:999px;
  font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--gold-bright);
  box-shadow:0 0 0 1px rgba(255,255,255,.15), 0 20px 50px rgba(201,151,59,.4);
  transition:transform .45s var(--ease-out-expo), box-shadow .45s var(--ease-out-expo);
}
body.cinematic .btn-primary:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 28px 60px rgba(201,151,59,.5);
}
body.cinematic .btn-ghost{
  min-height:56px; padding:14px 28px; border-radius:999px;
  font-size:14px; letter-spacing:.06em;
  border:1px solid rgba(247,242,232,.28);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(8px);
}
body.cinematic .btn-ghost:hover{
  background:rgba(255,255,255,.1); border-color:rgba(247,242,232,.5);
}

/* Stat strip as glass cards */
body.cinematic .stat-strip{
  margin-top:48px; gap:12px; max-width:720px;
  grid-template-columns:repeat(4, 1fr);
}
body.cinematic .stat-strip a{
  min-height:100px; padding:20px 16px 18px;
  border:1px solid rgba(247,242,232,.12);
  border-top:none;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(12px);
  position:relative; overflow:hidden;
}
body.cinematic .stat-strip a:before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
body.cinematic .stat-strip a:hover{
  background:rgba(255,255,255,.1); transform:translateY(-6px);
}
body.cinematic .stat-strip strong{
  font-size:clamp(28px, 3.2vw, 40px); font-weight:500; letter-spacing:-.02em;
}
body.cinematic .stat-strip span{
  font-size:10px; letter-spacing:.14em; opacity:.7; margin-top:6px; display:block;
}

/* Scenes: editorial peaks */
body.cinematic .scene{
  padding:clamp(96px, 12vh, 160px) max(24px, calc((100% - var(--content-max)) / 2));
}
body.cinematic .split{
  gap:clamp(32px, 5vw, 72px);
  align-items:center;
}
body.cinematic .media-stack>picture img,
body.cinematic .media-stack figure img{
  aspect-ratio:4/3;
  border-radius:4px 4px 28px 28px;
  outline:none;
  box-shadow:var(--shadow-photo);
  transition:transform 1.1s var(--ease-out-expo), filter .6s ease;
}
body.cinematic .media-stack:hover>picture img,
body.cinematic .media-stack:hover figure img{
  transform:scale(1.025);
  filter:saturate(1.08) contrast(1.03);
}
body.cinematic .arch{border-radius:4px 4px 28px 28px}
body.cinematic .gold-number{
  font-size:clamp(88px, 12vw, 140px);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:.8;
  color:var(--gold-numeral-sand);
  -webkit-text-fill-color:var(--gold-numeral-sand);
  background:none;
}
body.cinematic .dark .gold-number,
body.cinematic .capacity .gold-number,
body.cinematic .inquiry .gold-number,
body.cinematic .hero .gold-number{
  background:linear-gradient(165deg, #f0d78a 0%, var(--gold) 45%, #c9a04a 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 16px 48px rgba(201,151,59,.25));
}
body.cinematic .kicker{
  letter-spacing:.32em; font-size:11px; opacity:.9;
}
body.cinematic h2{
  font-weight:500; letter-spacing:-.02em; line-height:1.05;
  max-width:16ch;
}
body.cinematic .copy p{
  color:inherit; opacity:.88; font-size:17px; line-height:1.65;
}
body.cinematic .dark{background:linear-gradient(165deg, #0a1a28 0%, var(--lake-deep) 50%, #0c2233 100%)}
body.cinematic .dark:before{
  background:
    radial-gradient(80% 60% at 90% 10%, rgba(201,151,59,.08), transparent 50%),
    radial-gradient(60% 40% at 10% 80%, rgba(143,184,206,.08), transparent 55%);
}

/* Film teaser as billboard */
body.cinematic .film-teaser{
  padding-block:clamp(80px, 10vh, 120px);
  background:#070f16;
}
body.cinematic .film-teaser-card{
  border-radius:20px; outline:none;
  box-shadow:0 40px 100px rgba(0,0,0,.55);
}
body.cinematic .film-teaser-card img{aspect-ratio:16/9}
body.cinematic .play-badge{
  min-width:120px; min-height:56px; font-size:13px; letter-spacing:.12em;
  background:rgba(247,242,232,.95); color:var(--lake-deep);
  backdrop-filter:blur(8px);
}

/* Guest slider elevated */
body.cinematic .guest-slider{
  border-radius:24px; padding:32px;
  background:rgba(253,250,243,.98);
  border:1px solid rgba(201,151,59,.2);
  box-shadow:0 40px 100px rgba(0,0,0,.35);
}
body.cinematic .gs-cta{
  border-radius:999px; min-height:56px; letter-spacing:.08em; text-transform:uppercase; font-size:13px;
}

/* Catering as dark luxury card */
body.cinematic .catering-scene .catering-points li:before{
  box-shadow:0 0 0 4px rgba(201,151,59,.2), 0 0 20px rgba(201,151,59,.4);
}

/* Inquiry form — premium paper */
body.cinematic .inquiry-form{
  border-radius:24px; padding:40px;
  border:1px solid rgba(201,151,59,.15);
  box-shadow:0 40px 100px rgba(0,0,0,.35);
}
body.cinematic .inquiry-form .submit{
  border-radius:999px; min-height:56px; letter-spacing:.08em; text-transform:uppercase; font-size:13px;
}

/* Reveal: longer, more dramatic */
body.cinematic.js .reveal{
  transform:translateY(48px) scale(.985);
  filter:blur(4px);
  transition:opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo), filter .9s var(--ease-out-expo);
}
body.cinematic.js .reveal.is-visible{
  filter:blur(0); transform:none;
}

/* Waterline thinner / gold kiss */
body.cinematic .waterline{color:var(--lake-deep); height:28px}
body.cinematic .video-slot{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,151,59,.5), transparent);
  opacity:.6;
}

/* Dot rail — quieter tool */
body.cinematic .dot-rail a:before{
  width:6px; height:6px; border-color:rgba(247,242,232,.35);
}
body.cinematic .dot-rail a.is-active:before{
  background:var(--gold); border-color:var(--gold);
  box-shadow:0 0 16px rgba(201,151,59,.8);
}

@media (max-width:899px){
  body.cinematic .hero h1{font-size:clamp(42px, 12vw, 56px); max-width:10ch}
  body.cinematic .stat-strip{grid-template-columns:1fr 1fr}
  body.cinematic .topbar{display:none}
  body.cinematic .hero-copy{padding:88px 20px 100px}
  body.cinematic .btn-primary, body.cinematic .btn-ghost{min-height:48px; flex:1 1 auto}
}

/* Film teaser — live muted loop */
body.cinematic .film-teaser-card{position:relative;display:block;overflow:hidden}
.film-teaser-video{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;display:block;border-radius:inherit}
body.cinematic .film-teaser-card .play-badge{pointer-events:none}

/* ============================================================
   Night · 360 tour · soft ambience (deck)
   ============================================================ */

/* Floating gold sparkles on dark scenes (CSS-only, no images) */
.dark.ambience,
.scene.night-strip,
.tour-block{
  position:relative;
  isolation:isolate;
}
.dark.ambience::before,
.tour-block::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(216,169,79,.55), transparent),
    radial-gradient(1.5px 1.5px at 78% 18%, rgba(247,242,232,.35), transparent),
    radial-gradient(1.5px 1.5px at 42% 68%, rgba(216,169,79,.4), transparent),
    radial-gradient(1.5px 1.5px at 88% 72%, rgba(184,212,228,.35), transparent),
    radial-gradient(1.5px 1.5px at 28% 88%, rgba(216,169,79,.3), transparent),
    radial-gradient(120% 80% at 50% -10%, rgba(201,151,59,.08), transparent 55%);
  opacity:.9;
}
.dark.ambience > *,
.tour-block > *{position:relative; z-index:1}

/* Soft candle glow orbs (decorative only) */
.glow-orbs{pointer-events:none; position:absolute; inset:0; overflow:hidden; z-index:0}
.glow-orbs span{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(201,151,59,.35) 0%, rgba(201,151,59,0) 70%);
  filter:blur(2px);
  animation:orb-drift 14s var(--ease-lake) infinite alternate;
}
.glow-orbs span:nth-child(1){width:180px;height:180px;left:8%;top:20%;animation-duration:16s}
.glow-orbs span:nth-child(2){width:240px;height:240px;right:6%;bottom:10%;animation-duration:20s;animation-delay:-4s}
.glow-orbs span:nth-child(3){width:120px;height:120px;left:48%;top:8%;animation-duration:12s;animation-delay:-2s}
@keyframes orb-drift{
  from{transform:translate(0,0) scale(1); opacity:.55}
  to{transform:translate(18px,-24px) scale(1.12); opacity:.9}
}
@media (prefers-reduced-motion:reduce){
  .glow-orbs span,.dark.ambience::before,.tour-block::before{animation:none!important}
  .glow-orbs{display:none}
}

/* Night photo strip */
.night-strip{
  background:linear-gradient(180deg,#0a1620 0%, var(--lake-deep) 55%, #0a1620 100%);
  color:var(--sand);
  padding:clamp(48px,8vw,96px) 32px;
}
.night-strip .kicker{color:var(--gold)}
.night-strip h2{color:var(--sand); max-width:16ch}
.night-strip .lead-night{max-width:48ch; color:rgba(247,242,232,.82); font-size:var(--fs-lead); line-height:1.55}
.night-rail{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:32px;
  max-width:var(--content-max, 1200px);
}
.night-rail figure{
  margin:0; position:relative; overflow:hidden; border-radius:12px;
  aspect-ratio:4/3;
  box-shadow:0 20px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(201,151,59,.18);
}
.night-rail img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(1.05) contrast(1.04);
  transition:transform .8s var(--ease-lake);
}
.night-rail figure:hover img{transform:scale(1.04)}
.night-rail figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:28px 16px 14px;
  background:linear-gradient(transparent, rgba(8,13,14,.88));
  font-size:13px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(247,242,232,.9);
}
@media (max-width:720px){
  .night-rail{grid-template-columns:1fr 1fr}
  .night-rail figure:last-child{grid-column:1/-1}
}

/* IntoCities 360 — click-to-load (no third-party until user asks) */
.tour-block{
  max-width:var(--content-max, 1200px);
  margin:0 auto;
  padding:clamp(40px,6vw,72px) 0;
}
.tour-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  background:#0a1014 center/cover no-repeat;
  box-shadow:0 28px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(201,151,59,.25);
}
.tour-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  background:#000;
}
.tour-gate{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:32px; text-align:center;
  background:
    linear-gradient(180deg, rgba(10,16,20,.35), rgba(10,16,20,.72)),
    inherit;
  color:var(--sand);
}
.tour-gate p{margin:0; max-width:36ch; font-size:17px; line-height:1.5; color:rgba(247,242,232,.9)}
.tour-gate .btn-primary{cursor:pointer; border:0; font:inherit}
.tour-gate .btn-primary[disabled]{opacity:.7; cursor:progress}
/* display:flex above beats the [hidden] UA rule, so the gate stayed painted
   over the loaded viewer. Keep this next to the rule that causes it. */
.tour-gate[hidden]{display:none}

/* ── Maquette (rundgang-3d.html) ───────────────────────────────────────────
   One tall track; the canvas is sticky inside it and the copy column scrolls
   past. Scroll position drives the camera — the page never intercepts scroll,
   so the scrollbar, PageDown and screen readers all keep working. */
.maq-intro{
  max-width:var(--content-max,1200px); margin:0 auto;
  padding:clamp(96px,12vw,152px) 24px clamp(24px,4vw,40px);
}
.maq-intro h1{margin:8px 0 16px}
.maq-track{position:relative}
.maq-stage{
  position:sticky; top:0; height:100svh; z-index:0;
  background:#0d2233;
}
.maq-stage canvas{display:block; width:100%; height:100%}
.maq-poster{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, #16324a 0%, #0d2233 70%);
  transition:opacity 400ms ease;
}
.maq-poster.is-gone{opacity:0}
.maq-fallback{
  position:absolute; inset:auto 0 0; margin:0; padding:32px 24px;
  display:none; text-align:center; color:var(--sand);
}
.maq-stage[data-fallback] canvas{display:none}
.maq-stage[data-fallback] .maq-fallback{
  display:block; position:static; padding:96px 24px;
}
/* --gold on the dark fallback panel measures 3.86:1 — under the 4.5 floor.
   Sand for the text, gold kept as the underline affordance. */
.maq-fallback a{display:inline-block; margin-top:12px; color:var(--sand);
  text-decoration:none; border-bottom:1px solid var(--gold); padding-bottom:2px;
  min-height:44px}

/* Each beat is one viewport-and-a-half of scroll; the panel sits over the
   sticky canvas. Pulled up by 100svh so the copy shares the canvas's space. */
/* Copy sits on top of the model, so it needs its own ground or the sand walls
   eat the text. A one-sided gradient keeps the model readable on the right
   while the column stays legible on the left. */
.maq-stage::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  /* Ink on glass, not a navy slab — the model is the page. */
  background:linear-gradient(100deg,
    rgba(10,26,40,.72) 0%, rgba(10,26,40,.62) 22%,
    rgba(10,26,40,.24) 50%, rgba(10,26,40,0) 72%);
}
/* Vignette + film grain, in CSS rather than an EffectComposer: a second render
   target would cost a full-screen pass on every frame for an effect the
   compositor gives us free. Keeps the canvas from reading as a game viewport. */
.maq-stage::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    url("../img/grain-128.png") repeat 0 0 / 128px 128px,
    radial-gradient(75% 70% at 58% 46%, transparent 42%, rgba(8,20,32,.45) 100%);
  background-blend-mode:overlay, normal;
  opacity:.5;
}
@media (max-width:900px){
  /* the bottom scrim already grades the type; a vignette on top muddies it */
  .maq-stage::before{background-image:url("../img/grain-128.png"); opacity:.34}
}
@media (prefers-reduced-motion:reduce){ .maq-stage::before{background-image:none} }
@media (max-width:900px){
  /* Keep the top two thirds nearly clear — that is where the model lives —
     and put the ink only under the copy block. */
  .maq-stage::after{
    background:linear-gradient(180deg,
      rgba(10,26,40,0) 0%, rgba(10,26,40,.06) 44%,
      rgba(10,26,40,.72) 68%, rgba(10,26,40,.95) 100%);
  }
}
.maq-beats{position:relative; z-index:1; margin-top:-100svh; pointer-events:none}
.maq-beat{
  min-height:150svh;
  max-width:var(--content-max,1200px); margin:0 auto; padding:0 24px;
  opacity:.28; transition:opacity 300ms ease;
}
/* The article is only the scroll spacer. The copy rides in a sticky frame the
   height of the viewport, or "bottom aligned" would mean the bottom of a
   150svh box — i.e. off screen, which is exactly what it did. */
.maq-copy{
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; justify-content:center;
}
@media (max-width:900px){
  /* Bottom-anchored on a phone: the model owns the top of the frame, the copy
     the bottom, so they never fight for the same pixels. The padding clears
     the sticky Anfragen/phone bar, which otherwise eats the last line. */
  .maq-copy{justify-content:flex-end; padding-bottom:15svh}
  .maq-beat h2{font-size:clamp(1.6rem,6.4vw,2.2rem)}
  .maq-beat p{font-size:15px}
}
.maq-beat.is-live{opacity:1}
.maq-copy > *{max-width:34ch; pointer-events:auto}
.maq-beat h2{
  margin:6px 0 12px; color:var(--sand);
  font-size:clamp(1.9rem,4.2vw,3rem); line-height:1.1;
}
.maq-beat p{color:rgba(247,242,232,.86); line-height:1.6}
.maq-floor{
  margin:0; color:rgba(201,151,59,.95);
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
}
.maq-link{margin-top:20px; display:flex; flex-wrap:wrap; gap:16px}
.maq-link a{
  color:var(--sand); text-decoration:none;
  border-bottom:1px solid rgba(201,151,59,.7); padding-bottom:2px;
  min-height:44px; display:inline-flex; align-items:center;
}
.maq-link a:hover{border-bottom-color:var(--sand)}
@media (max-width:640px){
  .maq-beat{min-height:140svh}
  .maq-copy > *{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .maq-beat,.maq-poster{transition:none}
}

/* Self-hosted Rundgang (rundgang.js). Viewer fills the same frame the iframe
   used to; the room picker sits under it, grouped by floor. */
.rundgang-viewer{position:absolute; inset:0; background:#000}
.rundgang-rooms{
  display:flex; flex-direction:column; gap:12px;
  margin:20px 0 0;
}
.rundgang-floor{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.rundgang-floor-label{
  flex:0 0 auto; min-width:8.5em;
  font-size:13px; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(201,151,59,.9);
}
.rundgang-rooms button{
  cursor:pointer; font:inherit; font-size:15px;
  padding:8px 14px; border-radius:999px;
  color:var(--sand); background:rgba(247,242,232,.06);
  border:1px solid rgba(247,242,232,.18);
  transition:background .18s ease, border-color .18s ease;
}
.rundgang-rooms button:hover{background:rgba(247,242,232,.13); border-color:rgba(201,151,59,.5)}
.rundgang-rooms button[aria-current="true"]{
  background:rgba(201,151,59,.22); border-color:rgba(201,151,59,.85);
}
@media (max-width:640px){
  .rundgang-floor-label{flex:1 0 100%; min-width:0}
  .rundgang-rooms button{font-size:14px; padding:7px 12px}
}
@media (prefers-reduced-motion:reduce){
  .rundgang-rooms button{transition:none}
}
.tour-gate .tour-ext{
  color:var(--gold-bright); font-weight:700; font-size:15px;
  text-decoration:underline; text-underline-offset:3px;
}
.tour-note{margin-top:16px; font-size:14px; color:var(--muted); max-width:56ch}
.dark .tour-note{color:rgba(247,242,232,.65)}
.tour-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; align-items:center}

/* Film page extras */
.night-rail.film-night{margin-top:48px}

/* ?bare=1 — clean plate of the maquette alone, for listing-portal stills.
   Everything that is page rather than model gets out of the way. */
body.maq-bare .topbar,
body.maq-bare .mobile-sticky,
body.maq-bare footer,
body.maq-bare .maq-intro,
body.maq-bare .skip-link,
body.maq-bare main > section,
body.maq-bare .maq-stage::after,
body.maq-bare .maq-stage::before{display:none!important}
/* The beats keep their height — they are what gives the track its scroll
   length — but nothing paints. Hiding them collapsed the track and the beat
   deep-link overshot to the end of the page. */
body.maq-bare .maq-beats{visibility:hidden}
body.maq-bare{overflow:hidden}

/* Fotorundgang: gleiche sticky Bühne wie das Modell, aber der Inhalt ist ein
   Pannellum-Viewer statt eines Canvas. */
.foto-stage .foto-frame{position:absolute; inset:0}
.foto-stage .pnlm-container{width:100%; height:100%; background:#0d2233}
.foto-stage .pnlm-load-box,.foto-stage .pnlm-about-msg{display:none}
/* Die Hotspots liegen unter dem Textverlauf — sie müssen klickbar bleiben. */
.foto-stage .pnlm-hotspot-base{z-index:2}
.foto-stage[data-fallback] .foto-frame{display:none}
.foto-stage[data-fallback] .maq-fallback{display:block; position:static; padding:96px 24px}
/* Fotos tragen ihr eigenes Korn — das Filmkorn des Modells legt sich hier nur
   als Schleier darüber. Deutlich zurückgenommen, Verlauf etwas leichter. */
.foto-stage::before{opacity:.18}
.foto-stage::after{background:linear-gradient(100deg,
  rgba(10,26,40,.62) 0%, rgba(10,26,40,.5) 24%,
  rgba(10,26,40,.16) 52%, rgba(10,26,40,0) 74%)}
@media (max-width:900px){
  .foto-stage::after{background:linear-gradient(180deg,
    rgba(10,26,40,0) 0%, rgba(10,26,40,.06) 44%,
    rgba(10,26,40,.72) 68%, rgba(10,26,40,.95) 100%)}
}