@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/caveat-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --cream: #f6ecdc;
  --paper: #fbf5ea;
  --espresso: #2a1a12;
  --ink: #2a1a12;
  --terra: #d9542b;
  --saffron: #f2a93b;
  --leaf: #3f5a3a;
  --night: #171b2e;
  --muted: rgba(42, 26, 18, .62);
  --line: rgba(42, 26, 18, .16);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter Tight", system-ui, sans-serif;
  --hand: "Caveat", cursive;
  --gutter: clamp(16px, 4vw, 56px);
  --radius: clamp(16px, 2vw, 28px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}
body.is-loading { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
em { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
::selection { background: var(--saffron); color: var(--espresso); }

.eyebrow {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600;
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }

.big-title {
  font-family: var(--serif);
  font-size: clamp(44px, 7.4vw, 128px);
  line-height: .95; letter-spacing: -.035em; font-weight: 380;
  font-variation-settings: "opsz" 144;
}
.big-title em { color: var(--terra); font-weight: 340; }

/* Aufteilung für Buchstaben-Animation */
.split { display: inline-block; }
.char { display: inline-block; will-change: transform; }
.word { display: inline-block; white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--espresso); --fg: var(--cream);
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 30px; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 15px; letter-spacing: .01em;
  background: var(--bg); color: var(--fg); overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--terra); transform: translateY(101%); transition: transform .55s var(--ease);
}
.btn:hover::after { transform: translateY(0); }
.btn--light { --bg: var(--cream); --fg: var(--espresso); }
.btn--light:hover { color: var(--cream); }
.btn--ghost { --bg: transparent; --fg: var(--cream); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.btn--dark { --bg: var(--espresso); --fg: var(--cream); }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100; background: var(--espresso); color: var(--cream);
  display: grid; place-items: center;
}
.loader__inner { display: grid; justify-items: center; gap: 4px; }
.loader__script { font-family: var(--hand); font-size: clamp(26px, 3vw, 40px); color: var(--saffron); }
.loader__word { font-family: var(--serif); font-size: clamp(44px, 9vw, 120px); letter-spacing: -.04em; line-height: 1; font-style: italic; font-weight: 340; }
.loader__count { font-size: 12px; letter-spacing: .3em; margin-top: 18px; opacity: .6; }

.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(4) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--gutter); color: var(--cream);
  transition: transform .5s var(--ease), color .4s, background .4s;
}
.nav.is-solid { color: var(--espresso); background: rgba(246,236,220,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-top: 12px; padding-bottom: 12px; }
.nav.is-night { color: var(--cream); background: rgba(23,27,46,.7); }
.nav.is-hidden { transform: translateY(-110%); }
.nav__brand { text-decoration: none; line-height: 1; display: grid; }
.nav__small { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; opacity: .75; }
.nav__name { font-family: var(--serif); font-style: italic; font-size: 24px; letter-spacing: -.02em; }
.nav__links { display: flex; gap: 30px; font-size: 14px; }
.nav__links a { text-decoration: none; position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__call {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 14px;
  padding: 11px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; white-space: nowrap;
}
.nav__dot { width: 8px; height: 8px; border-radius: 50%; background: #5bd17a; box-shadow: 0 0 0 0 rgba(91,209,122,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(91,209,122,0); } 100% { box-shadow: 0 0 0 0 rgba(91,209,122,0); } }
@media (max-width: 860px) { .nav__links { display: none; } .nav__call { font-size: 13px; padding: 10px 14px; } }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 620px; color: var(--cream); overflow: hidden; }
.hero__media { position: absolute; inset: 0; will-change: clip-path, transform; }
.hero__video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.hero__shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(20,12,8,.55) 0%, rgba(20,12,8,.05) 35%, rgba(20,12,8,.15) 60%, rgba(20,12,8,.78) 100%); }
.hero__content {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--gutter) clamp(28px, 5vh, 56px);
}
.hero__kicker { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; opacity: .9; }
.hero__title {
  font-family: var(--serif); font-weight: 340; letter-spacing: -.055em; line-height: .82;
  font-size: clamp(76px, 17.5vw, 310px); font-variation-settings: "opsz" 144;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line--indent { padding-left: 12vw; }
.hero__title em { color: var(--saffron); }
.hero__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-top: 26px; flex-wrap: wrap; }
.hero__lead { max-width: 440px; font-size: clamp(16px, 1.25vw, 19px); opacity: .92; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__scroll { position: absolute; right: var(--gutter); top: 50%; z-index: 2; display: grid; justify-items: center; gap: 10px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; writing-mode: vertical-rl; }
.hero__scroll i { width: 1px; height: 64px; background: rgba(255,255,255,.35); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: drip 1.8s var(--ease) infinite; }
@keyframes drip { to { top: 100%; } }
.hero__badge {
  position: absolute; z-index: 3; right: clamp(20px, 8vw, 160px); top: clamp(96px, 18vh, 200px);
  width: clamp(110px, 11vw, 170px); aspect-ratio: 1; display: grid; place-items: center; color: var(--espresso);
}
.hero__badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.hero__badge svg text { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; fill: var(--cream); font-weight: 600; }
.hero__badge span {
  width: 62%; aspect-ratio: 1; border-radius: 50%; background: var(--saffron);
  display: grid; place-content: center; text-align: center; line-height: 1; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.hero__badge b { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -.03em; text-transform: none; display: block; margin: 3px 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
  .hero__scroll { display: none; }
  .hero__title .line--indent { padding-left: 8vw; }
  .hero__badge { top: 92px; right: 16px; width: 104px; }
  .hero__ctas .btn { padding: 15px 22px; }
}

/* ---------- Marquee ---------- */
.marquee { background: var(--espresso); color: var(--cream); overflow: hidden; padding: 26px 0; transform: rotate(-2deg) scale(1.04); margin: -1px 0 0; position: relative; z-index: 3; }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__row { display: flex; align-items: center; gap: 36px; padding-right: 36px; flex-shrink: 0; }
.marquee__row span { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 56px); letter-spacing: -.02em; white-space: nowrap; font-style: italic; font-weight: 340; }
.marquee__row i { font-style: normal; color: var(--saffron); font-size: clamp(22px, 2.4vw, 36px); }

/* ---------- Intro ---------- */
.intro { position: relative; padding: clamp(120px, 20vh, 240px) var(--gutter) clamp(140px, 24vh, 280px); }
.intro__label { font-family: var(--hand); font-size: clamp(26px, 2.6vw, 38px); color: var(--terra); margin-bottom: 18px; }
.intro__text {
  position: relative; z-index: 2; max-width: 1180px;
  font-family: var(--serif); font-size: clamp(30px, 4.3vw, 72px); line-height: 1.08; letter-spacing: -.025em; font-weight: 360;
}
.intro__text .word { opacity: .14; transition: none; }
.intro__floats { position: absolute; inset: 0; pointer-events: none; }
.float { position: absolute; border-radius: var(--radius); object-fit: cover; box-shadow: 0 30px 60px -20px rgba(42,26,18,.35); }
.float--1 { width: clamp(140px, 16vw, 260px); aspect-ratio: 3/4; right: 6vw; top: 8%; transform: rotate(4deg); }
.float--2 { width: clamp(160px, 19vw, 300px); aspect-ratio: 4/3; right: 22vw; bottom: 4%; transform: rotate(-5deg); z-index: 3; }
.float--3 { width: clamp(110px, 12vw, 190px); aspect-ratio: 1; left: 4vw; bottom: 8%; transform: rotate(-3deg); }
@media (max-width: 700px) {
  .float--1 { top: 2%; right: 16px; width: 110px; }
  .float--2 { right: auto; left: 16px; bottom: 2%; width: 150px; }
  .float--3 { left: auto; right: 16px; bottom: 5%; width: 100px; }
}

/* ---------- Ein Tag ---------- */
.day { position: relative; min-height: 100vh; overflow: hidden; color: var(--espresso); }
.day__sky { position: absolute; inset: 0; pointer-events: none; }
.day__sun {
  position: absolute; width: clamp(120px, 14vw, 220px); aspect-ratio: 1; border-radius: 50%;
  left: 36%; top: 64%;
  background: radial-gradient(circle at 35% 35%, #fff6d8, var(--saffron) 55%, #e8742f);
  box-shadow: 0 0 120px 40px rgba(242,169,59,.35);
}
.day__stars { position: absolute; inset: 0; opacity: 0;
  background-image: radial-gradient(1.5px 1.5px at 12% 20%, #fff 50%, transparent), radial-gradient(1px 1px at 30% 12%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 48% 26%, #fff 50%, transparent), radial-gradient(1px 1px at 66% 8%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 82% 18%, #fff 50%, transparent), radial-gradient(1px 1px at 92% 34%, #fff 50%, transparent), radial-gradient(1px 1px at 22% 38%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 58% 40%, #fff 50%, transparent);
}
.day__head { flex-shrink: 0; width: min(40vw, 560px); align-self: center; }
.day__hint { margin-top: 28px; font-family: var(--hand); font-size: 28px; color: var(--terra); }
.day__title { font-family: var(--serif); font-size: clamp(40px, 5.4vw, 92px); line-height: .95; letter-spacing: -.035em; font-weight: 380; }
.day__title em { color: var(--terra); }
.day__track { position: relative; z-index: 2; display: flex; align-items: center; width: max-content; min-height: 100vh; padding: 70px var(--gutter) 40px; gap: 6vw; }
.panel {
  width: min(86vw, 1180px); flex-shrink: 0; display: grid; grid-template-columns: 1fr 1.15fr; gap: 3vw 4vw; align-items: center;
  min-height: 62vh;
}
.panel__time {
  grid-column: 1 / -1; font-family: var(--hand); font-size: clamp(40px, 4.6vw, 76px); line-height: 1; color: var(--terra);
}
.panel__text h3 { font-family: var(--serif); font-size: clamp(36px, 4.4vw, 76px); line-height: .98; letter-spacing: -.03em; font-weight: 380; margin-bottom: 22px; }
.panel__text p { max-width: 430px; font-size: clamp(16px, 1.2vw, 19px); opacity: .85; }
.panel__stack { position: relative; height: clamp(300px, 52vh, 560px); }
.panel__stack img {
  position: absolute; object-fit: cover; border-radius: var(--radius);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.45);
}
.panel__stack img:nth-child(1) { width: 68%; aspect-ratio: 3/2; left: 0; top: 4%; transform: rotate(-4deg); z-index: 2; }
.panel__stack img:nth-child(2) { width: 50%; aspect-ratio: 4/3; right: 0; top: 0; transform: rotate(5deg); }
.panel__stack img:nth-child(3) { width: 52%; aspect-ratio: 3/2; right: 6%; bottom: 0; transform: rotate(-2deg); z-index: 3; }
.day__progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 34px; height: 2px; background: color-mix(in srgb, currentColor 18%, transparent); z-index: 2; }
.day__progress i { position: absolute; inset: 0; background: currentColor; transform-origin: left; transform: scaleX(0); }

@media (max-width: 860px) {
  .day__track { flex-direction: column; align-items: stretch; width: auto; gap: 90px; padding-top: 110px; padding-bottom: 110px; min-height: 0; }
  .day__head { width: auto; align-self: stretch; }
  .day__hint { display: none; }
  .panel { width: auto; grid-template-columns: 1fr; min-height: 0; }
  .panel__stack { height: 84vw; max-height: 460px; }
  .day__progress { display: none; }
  .day__sun { left: auto; right: -40px; top: 120px; }
}

/* ---------- Zimmer ---------- */
.rooms { background: var(--paper); padding: clamp(110px, 18vh, 200px) 0 clamp(90px, 14vh, 160px); position: relative; z-index: 2; border-radius: 40px 40px 0 0; margin-top: -40px; }
.rooms__intro { padding: 0 var(--gutter); max-width: 1400px; }
.rooms__lead { max-width: 520px; margin-top: 32px; font-size: clamp(17px, 1.3vw, 20px); color: var(--muted); }
.rooms__gallery {
  margin: clamp(60px, 10vh, 110px) auto 0; padding: 0 var(--gutter); max-width: 1240px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 22px); grid-auto-flow: dense;
}
.room-card { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/2; position: relative; background: #e9dcc6; }
.room-card--tall { grid-row: span 2; aspect-ratio: auto; }
.room-card:nth-child(4) { grid-column: span 2; aspect-ratio: auto; }
.room-card img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: filter .5s; }
.room-card:hover img { filter: saturate(1.15) brightness(1.03); }
@media (max-width: 860px) {
  .rooms__gallery { grid-template-columns: repeat(2, 1fr); }
  .room-card:nth-child(4) { grid-column: span 2; aspect-ratio: 16/9; }
}

.menu {
  margin: clamp(80px, 14vh, 150px) auto 0; width: min(100% - 2 * var(--gutter), 980px);
  background: var(--espresso); color: var(--cream); border-radius: calc(var(--radius) * 1.3);
  padding: clamp(28px, 5vw, 72px); position: relative; overflow: hidden;
}
.menu::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; right: -160px; top: -200px; background: radial-gradient(circle, rgba(242,169,59,.35), transparent 70%); }
.menu__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; position: relative; }
.menu__script { font-family: var(--hand); font-size: clamp(40px, 5vw, 68px); color: var(--saffron); line-height: 1; }
.menu__note { font-size: 13px; letter-spacing: .06em; opacity: .7; }
.menu__list { list-style: none; margin: 0; padding: 0; position: relative; }
.menu__row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: baseline; gap: 14px;
  padding: 20px 0; border-bottom: 1px solid rgba(246,236,220,.14);
}
.menu__name { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 38px); letter-spacing: -.02em; }
.menu__name small { display: block; font-family: var(--sans); font-size: 13px; opacity: .65; letter-spacing: 0; margin-top: 2px; }
.menu__dots { border-bottom: 1px dotted rgba(246,236,220,.35); transform: translateY(-6px); transform-origin: left; }
.menu__meta { font-size: 13px; opacity: .65; white-space: nowrap; }
.menu__price { font-family: var(--serif); font-size: clamp(26px, 3vw, 44px); color: var(--saffron); white-space: nowrap; min-width: 3.4ch; text-align: right; }
.menu__extra { margin: 26px 0 34px; font-size: 14px; opacity: .8; position: relative; }
.menu .btn--dark { --bg: var(--cream); --fg: var(--espresso); }
.menu .btn--dark:hover { color: var(--cream); }
@media (max-width: 600px) {
  .menu__row { grid-template-columns: 1fr auto; row-gap: 2px; }
  .menu__dots { display: none; }
  .menu__meta { grid-column: 1; grid-row: 2; }
  .menu__price { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* ---------- Für wen (Stapelkarten) ---------- */
.guests { background: var(--paper); padding: clamp(60px, 10vh, 120px) var(--gutter) clamp(100px, 16vh, 180px); position: relative; z-index: 2; }
.guests__head { margin-bottom: clamp(50px, 8vh, 90px); }
.stack { display: grid; gap: 24px; }
.card {
  position: sticky; top: calc(96px + var(--i, 0) * 22px);
  display: grid; grid-template-columns: auto 1fr minmax(0, 42%); gap: clamp(18px, 3vw, 48px); align-items: center;
  min-height: clamp(300px, 48vh, 460px); padding: clamp(24px, 3.4vw, 52px);
  border-radius: calc(var(--radius) * 1.3); transform-origin: 50% 0;
  box-shadow: 0 -10px 40px -20px rgba(42,26,18,.25);
}
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #2a1a12; opacity: var(--dim, 0); pointer-events: none; }
.card--1 { --i: 0; background: #e6d3b3; }
.card--2 { --i: 1; background: #f0b27a; }
.card--3 { --i: 2; background: #cfe0cf; }
.card--4 { --i: 3; background: #cfe7ea; }
.card--5 { --i: 4; background: #2a1a12; color: var(--cream); }
.card__num { font-family: var(--serif); font-style: italic; font-size: clamp(48px, 6vw, 110px); line-height: .8; letter-spacing: -.04em; opacity: .9; align-self: start; }
.card h3 { font-family: var(--serif); font-size: clamp(32px, 3.6vw, 62px); letter-spacing: -.03em; line-height: 1; margin-bottom: 18px; hyphens: manual; }
.card p { max-width: 460px; font-size: clamp(16px, 1.15vw, 18px); opacity: .85; }
.card img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 860px) {
  .card { grid-template-columns: 1fr; top: calc(76px + var(--i, 0) * 14px); gap: 16px; min-height: 0; }
  .card img { max-height: 200px; aspect-ratio: 16/9; }
  .card__num { font-size: 44px; }
}

/* ---------- Restaurant ---------- */
.resto { background: var(--terra); color: var(--cream); padding: clamp(100px, 16vh, 180px) var(--gutter); position: relative; z-index: 2; overflow: hidden; }
.resto .big-title em { color: var(--espresso); }
.resto__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.resto__copy > p { max-width: 460px; margin: 26px 0 36px; opacity: .92; }
.resto__stat { display: flex; align-items: center; gap: 22px; margin-top: 40px; }
.resto__stat b { font-family: var(--serif); font-size: clamp(90px, 11vw, 190px); line-height: .8; letter-spacing: -.05em; font-weight: 340; color: var(--saffron); }
.resto__stat span { max-width: 240px; font-size: 15px; }
.resto .btn--dark:hover { color: var(--espresso); }
.resto .btn--dark::after { background: var(--saffron); }
.resto__mosaic { position: relative; height: clamp(420px, 70vh, 720px); }
.m { position: absolute; object-fit: cover; border-radius: var(--radius); box-shadow: 0 40px 80px -30px rgba(0,0,0,.45); }
.m--1 { width: 64%; aspect-ratio: 3/2; left: 0; top: 0; }
.m--2 { width: 48%; aspect-ratio: 3/2; right: 0; top: 22%; z-index: 2; }
.m--3 { width: 44%; aspect-ratio: 3/2; left: 8%; bottom: 4%; z-index: 3; }
.m--4 { width: 36%; aspect-ratio: 1; right: 6%; bottom: -2%; }
@media (max-width: 860px) { .resto__grid { grid-template-columns: 1fr; } .resto__mosaic { height: 110vw; max-height: 560px; } }

/* ---------- Lage ---------- */
.where { padding: clamp(110px, 18vh, 200px) var(--gutter); position: relative; z-index: 2; background: var(--cream); overflow: hidden; }
.where__body { display: grid; grid-template-columns: 90px 1fr 1fr; gap: clamp(20px, 4vw, 70px); margin-top: clamp(50px, 8vh, 90px); }
.river { width: 90px; height: 100%; min-height: 520px; overflow: visible; }
.river path { fill: none; stroke-linecap: round; }
.river__bg { stroke: rgba(42,26,18,.08); stroke-width: 22; }
.river__line { stroke: #6fa8c0; stroke-width: 8; }
.stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.stops li { display: flex; align-items: baseline; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.stops b { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 58px); letter-spacing: -.03em; font-weight: 400; min-width: 4.2ch; color: var(--terra); }
.stops span { font-size: clamp(16px, 1.2vw, 19px); }
.where__info { display: grid; gap: 30px; align-content: start; }
.info { padding: 28px; border-radius: var(--radius); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.info h3 { font-family: var(--serif); font-size: 28px; margin-bottom: 10px; letter-spacing: -.02em; }
.info p { color: var(--muted); }
.where__info .btn { justify-self: start; }
@media (max-width: 960px) {
  .where__body { grid-template-columns: 40px 1fr; }
  .river { width: 40px; }
  .where__info { grid-column: 1 / -1; }
}

/* ---------- FAQ ---------- */
.faq { padding: 0 var(--gutter) clamp(110px, 18vh, 200px); background: var(--cream); position: relative; z-index: 2; }
.faq__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 24px); }
.faq__item { background: var(--espresso); color: var(--cream); border-radius: var(--radius); padding: 30px 26px 34px; min-height: 240px; display: flex; flex-direction: column; }
.faq__icon { width: 46px; height: 46px; border-radius: 50%; background: var(--saffron); color: var(--espresso); display: grid; place-items: center; font-weight: 700; margin-bottom: auto; }
.faq__item h3 { font-family: var(--serif); font-size: 30px; margin: 40px 0 8px; letter-spacing: -.02em; }
.faq__item p { opacity: .78; font-size: 15px; }
@media (max-width: 960px) { .faq__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .faq__grid { grid-template-columns: 1fr; } .faq__item { min-height: 0; } .faq__item h3 { margin-top: 24px; } }

/* ---------- Finale ---------- */
.finale { position: relative; min-height: 100vh; display: grid; place-items: center; text-align: center; color: var(--cream); background: var(--night); overflow: hidden; padding: 120px var(--gutter); }
.finale__bg { position: absolute; inset: 0; will-change: clip-path; clip-path: circle(0% at 50% 50%); }
.finale__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(3px) brightness(.45) saturate(1.2); transform: scale(1.1); }
.finale__inner { position: relative; z-index: 2; display: grid; justify-items: center; }
.finale__script { font-family: var(--hand); font-size: clamp(30px, 3.4vw, 52px); color: var(--saffron); }
.finale__title { font-family: var(--serif); font-size: clamp(56px, 10vw, 180px); line-height: .9; letter-spacing: -.045em; font-weight: 340; margin: 10px 0 40px; }
.finale__title em { color: var(--saffron); }
.finale__phone {
  display: inline-block; text-decoration: none; font-family: var(--serif); font-size: clamp(30px, 5vw, 80px); letter-spacing: -.02em;
  padding: .28em .8em; border-radius: 999px; background: var(--cream); color: var(--espresso);
  transition: background .4s, color .4s;
}
.finale__phone:hover { background: var(--saffron); }
.finale__alt { display: flex; gap: 28px; margin-top: 30px; flex-wrap: wrap; justify-content: center; font-size: 15px; }
.finale__alt a { opacity: .8; text-underline-offset: 4px; }
.finale__alt a:hover { opacity: 1; }

/* ---------- Footer ---------- */
.footer { background: var(--night); color: rgba(246,236,220,.7); padding: 50px var(--gutter) 40px; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 24px; font-size: 14px; border-top: 1px solid rgba(246,236,220,.1); }
.footer__brand { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; }
.footer__brand b { font-family: var(--serif); font-size: 26px; letter-spacing: -.02em; text-transform: none; font-style: italic; font-weight: 400; color: var(--cream); }
.footer address { font-style: normal; }
@media (max-width: 760px) { .footer { grid-template-columns: 1fr 1fr; } }

/* ---------- Entwurfshinweis ---------- */
.draft-note {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 60;
  padding: 8px 16px; border-radius: 999px; background: rgba(42,26,18,.88); color: var(--cream);
  font-size: 12px; letter-spacing: .04em; white-space: nowrap; pointer-events: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 420px) { .draft-note { font-size: 11px; padding: 7px 12px; } }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .grain, .hero__badge svg, .nav__dot, .hero__scroll i::after { animation: none; }
  .intro__text .word { opacity: 1; }
  .finale__bg { clip-path: none; }
  .day__track { flex-direction: column; align-items: stretch; width: auto; min-height: 0; }
  .day__head { width: auto; }
  .panel { width: auto; }
  .day__progress, .day__hint { display: none; }
}