/* ═══════════════════════════════════════════════════════════════ RIVARO — Ristorante · Lounge · Bar · Berlin-Spandau No framework, no build step. Fonts are local woff2. ═══════════════════════════════════════════════════════════════ */ @font-face{font-family:Bodoni;src:url(fonts/bodoni-moda-400-normal-latin.woff2)format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Bodoni;src:url(fonts/bodoni-moda-400-normal-latin-ext.woff2)format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:Cormorant;src:url(fonts/cormorant-garamond-300-italic-latin.woff2)format("woff2");font-weight:300;font-style:italic;font-display:swap} @font-face{font-family:Cormorant;src:url(fonts/cormorant-garamond-300-normal-latin.woff2)format("woff2");font-weight:300;font-display:swap} @font-face{font-family:Mono;src:url(fonts/dm-mono-400-normal-latin.woff2)format("woff2");font-weight:400;font-display:swap} @font-face{font-family:Mono;src:url(fonts/dm-mono-300-normal-latin.woff2)format("woff2");font-weight:300;font-display:swap} :root{ --ink: oklch(0.965 0.008 200); --ink-dim: oklch(0.72 0.015 210); --ink-faint:oklch(0.52 0.020 215); --bg: oklch(0.155 0.028 232); --bg-deep: oklch(0.105 0.024 235); --bg-lift: oklch(0.215 0.034 230); --aqua: oklch(0.815 0.115 190); /* the turquoise the house already wears */ --aqua-dim: oklch(0.660 0.095 191); --aqua-wash:color-mix(in oklab, var(--aqua) 12%, transparent); --candle: oklch(0.845 0.105 78); --line: color-mix(in oklab, var(--ink) 14%, transparent); --line-soft:color-mix(in oklab, var(--ink) 7%, transparent); --sans: "Helvetica Neue", Inter, system-ui, sans-serif; --serif: Bodoni, "Didot", "Times New Roman", serif; --script: Cormorant, Garamond, serif; --mono: Mono, ui-monospace, "SF Mono", monospace; --pad: clamp(1.25rem, 5vw, 6rem); --marq-h: clamp(56px, 5vw, 88px); /* the marquee strip, subtracted from the hero so it shows on the first screen */ --ease: cubic-bezier(.22,1,.36,1); --nav-clear: 76px; /* what a scroll stop leaves for the fixed bar; sections size to fit under it */ } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--sans);font-size:clamp(15px,.42vw + 14px,17px);line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} ::selection{background:var(--aqua);color:var(--bg-deep)} :focus-visible{outline:2px solid var(--aqua);outline-offset:3px;border-radius:2px} .skip{position:fixed;top:-100px;left:1rem;z-index:99;background:var(--aqua);color:#000;padding:.6rem 1rem} .skip:focus{top:1rem} /* ── film grain + scroll progress ─────────────────────────────── */ .grain{ position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045; background-image:url("data:image/svg+xml;utf8,"); } .progress{ position:fixed;top:0;left:0;height:2px;z-index:70;width:100%;transform-origin:0 50%;transform:scaleX(0); background:linear-gradient(90deg,var(--aqua),var(--candle)); } @supports (animation-timeline:scroll()){ .progress{animation:grow linear;animation-timeline:scroll(root block)} @keyframes grow{to{transform:scaleX(1)}} } /* ── nav ──────────────────────────────────────────────────────── */ .nav{ position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:2rem; padding:1.4rem var(--pad);transition:padding .5s var(--ease),background .5s,backdrop-filter .5s; } .nav::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--line-soft);opacity:0;transition:opacity .5s} /* A gradient the height of the bar, not of the picture: the menu sits over whatever the frame happens to show, and over bright sky or brick it disappears. It fades out well above the wordmark, so the photograph itself is untouched. */ .nav::before{content:"";position:absolute;inset:-1px 0 auto;height:220%;z-index:-1;pointer-events:none; background:linear-gradient(to bottom,color-mix(in oklab,var(--bg-deep) 62%,transparent),transparent); transition:opacity .5s} .nav.is-stuck::before{opacity:0} .nav.is-stuck{padding:.7rem var(--pad);background:color-mix(in oklab,var(--bg-deep) 78%,transparent);backdrop-filter:blur(18px) saturate(1.3)} .nav.is-stuck::after{opacity:1} .nav__mark{font-family:var(--serif);font-size:1.25rem;letter-spacing:.34em;padding-left:.34em} .nav__links{display:flex;gap:1.7rem;margin-inline:auto;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)} .nav__links a{position:relative;padding:.2rem 0;transition:color .3s} .nav__links a::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--aqua);transform:scaleX(0);transform-origin:0;transition:transform .45s var(--ease)} .nav__links a:hover{color:var(--ink)} .nav__links a:hover::after{transform:scaleX(1)} .nav__end{display:flex;align-items:center;gap:1rem} @media (max-width:940px){.nav__links{display:none}.nav__mark{margin-right:auto}} .lang{display:flex;align-items:center;gap:.4rem;background:none;border:0;cursor:pointer;color:var(--ink-faint); font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;padding:.3rem} .lang i{width:26px;height:14px;border:1px solid var(--line);border-radius:99px;position:relative;transition:border-color .3s} .lang i::after{content:"";position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:99px;background:var(--aqua);transition:transform .4s var(--ease)} html[data-lang="en"] .lang i::after{transform:translateX(12px)} html[data-lang="de"] .lang span:first-child,html[data-lang="en"] .lang span:last-child{color:var(--ink)} /* ── buttons ──────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.6rem;border:1px solid var(--line); border-radius:99px;font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase; color:var(--ink);background:transparent;cursor:pointer;position:relative;overflow:hidden; transition:color .4s,border-color .4s,transform .4s var(--ease); } .btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1} .btn:hover{color:var(--bg-deep);border-color:var(--ink)} .btn:hover::before{transform:translateY(0)} .btn span,.btn{isolation:isolate} .btn--solid{background:var(--ink);color:var(--bg-deep);border-color:var(--ink)} .btn--solid::before{background:var(--aqua)} .btn--solid:hover{color:var(--bg-deep);border-color:var(--aqua)} .btn--sm{padding:.6rem 1.1rem;font-size:.68rem} .btn--lg{padding:1.15rem 2.4rem;font-size:.9rem;letter-spacing:.2em} /* ── typography atoms ─────────────────────────────────────────── */ .eyebrow,.kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--aqua-dim);margin:0} .h2{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.01em; font-size:clamp(2.2rem,6.5vw,5rem);margin:.6em 0 .5em;text-wrap:balance} .h2--xl{font-size:clamp(2rem,5.2vw,4.4rem);letter-spacing:-.02em;line-height:1.06;text-wrap:balance} .h2 em{font-family:var(--script);font-style:italic;color:var(--aqua)} .lead{font-size:clamp(1rem,.5vw + .95rem,1.22rem);color:var(--ink-dim);max-width:42ch;text-wrap:pretty;margin:0 0 2rem} .lead--center{margin-inline:auto;text-align:center;max-width:56ch} .note{text-align:center;color:var(--ink-faint);font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;margin:clamp(.6rem,1.2svh,1.1rem) 0 0} .note a{color:var(--aqua);border-bottom:1px solid color-mix(in oklab,var(--aqua) 40%,transparent)} /* ── reveal ───────────────────────────────────────────────────── */ .rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)} .rv.in{opacity:1;transform:none} /* ═══ HERO ════════════════════════════════════════════════════ */ .hero{position:relative;min-height:calc(100svh - var(--marq-h) - 2px);display:grid;place-items:center;overflow:hidden;isolation:isolate} .hero__stage{position:absolute;inset:0;z-index:-3} .hero__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0; filter:saturate(1.1) contrast(1.04)} /* the cycle itself is generated in app.js */ /* The slides stack on one another and each one places itself; the hero is the frame they sit in, sized so a slide never touches the bar above or the rail below. */ .hero__inner{position:relative;z-index:1;width:100%;max-width:1500px; min-height:min(560px,58svh);padding:0 var(--pad);margin-inline:auto} .hero__slide{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0; padding:0 var(--pad)} /* The full-frame veil is gone — the photograph is shown as shot. What replaces it is a halo on the letters themselves, not a box behind them: an ellipse never lands where the type actually is (measured — it moved the bar frame's bright ground only from 16.6% to 12.7%), while a shadow follows every glyph exactly. Three of the five frames need it: under the text box, 16.6% of the bar frame is brighter than 120 and 8.7% brighter than 200, and near-white type vanishes into that. The picture itself keeps all of its light. */ .hero__slide .hero__claim, .hero__slide .hero__sub, .hero__slide .eyebrow, .hero__slide .wordmark__sub{ text-shadow:0 1px 2px color-mix(in oklab,var(--bg-deep) 78%,transparent), 0 2px 18px color-mix(in oklab,var(--bg-deep) 88%,transparent), 0 0 44px color-mix(in oklab,var(--bg-deep) 72%,transparent)} /* The bar, the rail and the dashes were legible on the veil and are not on a bright frame. They get the same halo, and it costs nothing over the dark sections further down. */ .nav:not(.is-stuck) .nav__mark, .nav:not(.is-stuck) .nav__links a, .nav:not(.is-stuck) .lang, .hero__rail{text-shadow:0 1px 2px var(--bg-deep), 0 1px 10px color-mix(in oklab,var(--bg-deep) 92%,transparent), 0 0 26px color-mix(in oklab,var(--bg-deep) 80%,transparent)} .nav:not(.is-stuck) .nav__end .btn, .hero__cta .btn:not(.btn--solid){box-shadow:0 2px 22px color-mix(in oklab,var(--bg-deep) 60%,transparent)} .hero__dot::after{box-shadow:0 1px 3px var(--bg-deep),0 1px 12px color-mix(in oklab,var(--bg-deep) 78%,transparent)} .hero__slide .wordmark em{ filter:drop-shadow(0 2px 24px color-mix(in oklab,var(--bg-deep) 82%,transparent)) drop-shadow(0 1px 3px color-mix(in oklab,var(--bg-deep) 68%,transparent))} .hero__slide.is-first{position:relative;opacity:1} .hero__slide--center{align-items:center;justify-content:center;text-align:center} .hero__slide--center .hero__cta{justify-content:center} .hero__slide--bottom-left{align-items:flex-start;justify-content:flex-end;text-align:left} .hero__slide--bottom-center{align-items:center;justify-content:flex-end;text-align:center} .hero__slide--bottom-center .hero__cta{justify-content:center} .hero__slide--bottom-right{align-items:flex-end;justify-content:flex-end;text-align:right} .hero__slide--middle-left{align-items:flex-start;justify-content:center;text-align:left} .hero__slide--middle-right{align-items:flex-end;justify-content:center;text-align:right} .hero__slide--top-left{align-items:flex-start;justify-content:flex-start;text-align:left} .hero__slide--top-right{align-items:flex-end;justify-content:flex-start;text-align:right} /* 34ch broke "Daily from 12:00 to 23:00" across three lines; 40ch holds it in two with the time range unbroken, and still keeps the block off the middle of the photograph. */ .hero__slide:not(.hero__slide--center) .hero__claim, .hero__slide:not(.hero__slide--center) .hero__sub{max-width:40ch} .hero__slide:not(.hero__slide--center) .hero__sub{margin-inline:0} /* the lighter veil let the photograph through behind this line — aqua-dim measured 3.5:1 there */ .hero .eyebrow{color:var(--aqua)} .wordmark{margin:1.6rem 0 .5rem;display:grid;justify-items:center;gap:clamp(.5rem,1.4vw,1.1rem)} .wordmark::before,.wordmark::after{content:"";width:clamp(64px,11vw,170px);height:1px; background:color-mix(in oklab,var(--ink) 45%,transparent);animation:ruleIn 1.6s var(--ease) both .55s} .wordmark em{ font-family:var(--serif);font-style:normal;font-weight:400; font-size:clamp(3.2rem,15vw,11rem);line-height:.9;letter-spacing:.16em;padding-left:.16em; background:linear-gradient(180deg,var(--ink),color-mix(in oklab,var(--ink) 52%,var(--aqua))); -webkit-background-clip:text;background-clip:text;color:transparent; animation:markIn 1.6s var(--ease) both .15s; } @keyframes markIn{from{opacity:0;letter-spacing:.42em;filter:blur(9px)}to{opacity:1;filter:blur(0)}} @keyframes ruleIn{from{width:0;opacity:0}} .wordmark__sub{font-family:var(--mono);font-size:clamp(.6rem,1.5vw,.82rem);letter-spacing:.5em;text-transform:uppercase; color:var(--ink-dim);margin:0 0 2rem;padding-left:.5em;animation:fade 1.4s var(--ease) both .9s} .hero__claim em{font-style:italic;color:var(--aqua)} .hero__claim{font-family:var(--script);font-style:italic;font-size:clamp(1.3rem,3.4vw,2.2rem); color:var(--ink);margin:0;text-wrap:balance;animation:fade 1.4s var(--ease) both 1.05s} .hero__sub{font-family:var(--sans);font-size:clamp(.88rem,1.4vw,1.02rem);color:var(--ink-dim); margin:.7rem auto 0;max-width:52ch;text-wrap:pretty;line-height:1.65} .hero__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:clamp(1.4rem,3svh,2.2rem); animation:fade 1.4s var(--ease) both 1.2s} @keyframes fade{from{opacity:0;transform:translateY(14px)}} .eyebrow{animation:fade 1.4s var(--ease) both} /* the frame picker: dashes rather than dots, so they read as a strip of film */ .hero__dots{position:absolute;left:0;right:0;bottom:5.2rem;z-index:2; display:flex;gap:.5rem;justify-content:center;align-items:center; animation:fade 1.6s var(--ease) both 1.6s} .hero__dot{width:34px;height:24px;padding:0;border:0;background:none;cursor:pointer;position:relative} .hero__dot::after{content:"";position:absolute;inset:11px 0;border-radius:99px; background:color-mix(in oklab,var(--ink) 58%,transparent);transition:background .4s,inset .4s} .hero__dot:hover::after{background:color-mix(in oklab,var(--ink) 62%,transparent)} .hero__dot[aria-selected="true"]::after{background:var(--aqua);inset:10px 0} @media (max-width:640px){.hero__dots{bottom:6.4rem}.hero__dot{width:26px}} .hero__rail{position:absolute;bottom:2.2rem;left:0;right:0;z-index:1;display:flex;gap:1rem;justify-content:center; align-items:center;flex-wrap:wrap;padding:0 var(--pad); font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim); animation:fade 1.6s var(--ease) both 1.5s} .hero__rail a:hover{color:var(--aqua)} .dot{width:3px;height:3px;border-radius:99px;background:var(--aqua-dim)} @media (max-width:640px){.hero__rail .dot{display:none}.hero__rail{flex-direction:column;gap:.35rem;bottom:1.4rem}} /* water shimmer along the foot of the hero */ /* ═══ MARQUEE ═════════════════════════════════════════════════ */ .marquee{height:var(--marq-h);display:flex;align-items:center;overflow:hidden; border-block:1px solid var(--line-soft);background:var(--bg-deep)} .marquee__row{display:flex;width:max-content;animation:slide 46s linear infinite} /* the copy count and the duration are set in app.js — two copies leave a gap on a wide screen */ .marquee__row span{font-family:var(--serif);font-size:clamp(1.1rem,3vw,2rem);letter-spacing:.1em;white-space:nowrap; padding-right:1.5rem;color:color-mix(in oklab,var(--ink) 55%,transparent)} .marquee__row i{font-style:normal;color:var(--aqua);font-size:.55em;vertical-align:middle;padding:0 .4em} @keyframes slide{to{transform:translateX(-50%)}} .marquee:hover .marquee__row{animation-play-state:paused} /* ═══ CHAPTER (sticky image + text) ═══════════════════════════ */ .chapter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:start; max-width:1400px;margin-inline:auto} .chapter--flip .chapter__sticky{order:2} /* The panel is sized to the photograph, not to the viewport. It used to be a 100svh box with object-fit: cover, cycling frames of different orientation — portraits lost their top and bottom, landscapes lost their sides. `contain` in a box the photograph can fit inside shows every frame whole; the air that leaves under a landscape frame carries the caption. */ .chapter__sticky{position:sticky;top:var(--nav-clear);min-height:calc(100svh - var(--nav-clear));display:grid;place-items:center end; padding:clamp(1rem,4svh,4rem) clamp(1.5rem,3vw,3rem) clamp(1rem,4svh,4rem) 0} .chapter--flip .chapter__sticky{place-items:center start; padding-left:clamp(1.5rem,3vw,3rem);padding-right:0} .chapter__fig{margin:0;position:relative; aspect-ratio:var(--fig-ratio,4/5);height:min(72svh,860px);width:auto;max-width:100%; border-radius:2px} .chapter__fig--tall{--fig-ratio:2/3} /* The house and the team as one view: two rows that mirror each other, photograph then words, words then photograph, with a rule between them. Sized from the window's height because both rows and the rule have to share one screen. */ /* box-sizing:border-box is already global, but min-height on a flex column still lets the ROWS overflow it: the two rows plus the rule measured 12-32px more than the stop leaves, at every size. So the section is sized by min-height AND the rows are told they may not exceed it — the frames inside are svh-based, so they simply come down a little. */ .pair{padding:clamp(1rem,2.4svh,2.6rem) var(--pad);max-width:1500px;margin-inline:auto; display:flex;flex-direction:column;justify-content:center;gap:clamp(.6rem,1.6svh,1.6rem); min-height:calc(100svh - var(--nav-clear));max-height:calc(100svh - var(--nav-clear))} .pair__row{min-height:0} /* Equal halves, and both the photograph and the words pull toward the shared middle: left aligned inside its own column the text sat glued to the photograph with the right half empty, and centred it drifted 300px away from it. This keeps one gutter and mirrors cleanly. */ .pair__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,5.5rem);align-items:center} /* Both photographs sit at the LEFT edge of their own column, the words at the left edge of theirs — so the first row reads photograph-then-text and the second text-then-photograph, with the same rhythm rather than two pictures crowding the middle. */ /* Everything starts at the left edge of whichever column it is in — both rows, both kinds of content. The flipped row used to push its text to the column's END, so the photograph above began at x66 and the text below at x192: one column with two different left edges, which is why the photograph read as floating loose. */ .pair__row > *{justify-self:start} .pair__row--flip .pair__fig{order:2} /* max-width matters as much as the height here: a height-driven box with an aspect-ratio derives a width, and on a tablet the 3/2 frame derived 415px inside a 326px column and pushed the page 50px wider than the window. */ /* 46/38svh, not 32/27: the old clamps left 186px of the screen budget unused at 1024x768 and 318px at 1920x1080 — the photographs take that slack now and the section still fits the viewport minus the bar at every measured size (tightest: 673/692 at 1366x768). */ .pair__fig{margin:0;position:relative;aspect-ratio:2/3;height:min(46svh,500px); width:auto;max-width:100%;border-radius:2px} .pair__fig--wide{aspect-ratio:3/2;height:min(38svh,420px)} .pair__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1; border-radius:2px;filter:saturate(1.05)} .pair__fig::after{content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none; box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--aqua) 22%,transparent), 0 18px 50px -24px color-mix(in oklab,var(--aqua) 30%,transparent)} .pair__text{max-width:46ch} .pair .kicker{display:flex;align-items:center;gap:.8rem;margin:0 0 clamp(.5rem,1.4svh,1rem)} .pair .kicker .rule{width:clamp(24px,3vw,44px);height:1px;background:var(--aqua-dim);flex:0 0 auto} .pair .quote{margin:0 0 clamp(.6rem,1.6svh,1.2rem);border:0;padding:0 0 0 clamp(.9rem,1.6vw,1.4rem); font-size:clamp(1.3rem,3svh,2.1rem);line-height:1.24;position:relative} .pair .quote::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:2px; background:linear-gradient(to bottom,var(--aqua),color-mix(in oklab,var(--aqua) 25%,transparent))} .pair .lead{margin:0;font-size:clamp(.86rem,1.6svh,1rem);max-width:46ch} .pair__link{display:inline-flex;align-items:center;gap:.6em;margin-top:clamp(.7rem,1.8svh,1.3rem); font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase; color:var(--aqua);transition:gap .35s var(--ease)} .pair__link:hover{gap:1em} .pair__link i{font-style:normal} .pair__sep{display:flex;align-items:center;gap:1rem;color:var(--aqua-dim)} .pair__sep span{flex:1 1 auto;height:1px;background:var(--line-soft)} .pair__sep i{font-style:normal;font-size:.7rem;color:var(--aqua)} @media (max-width:679px){ /* two mirrored rows hold down to 680px, then the chessboard stacks */ .pair{min-height:auto;gap:clamp(1.5rem,4svh,2.5rem)} .pair__row,.pair__row--flip{grid-template-columns:minmax(0,1fr);gap:1.2rem} .pair__row .pair__fig,.pair__row .pair__text, .pair__row--flip .pair__fig,.pair__row--flip .pair__text{justify-self:stretch} .pair__row--flip .pair__fig{order:0} /* Width-driven when stacked, but the portrait's own 2/3 then makes it 1.5x the column — 525px tall in a 350px column — and object-fit:cover threw away the head. Keep each frame's aspect ratio and let the width follow, so nothing is cropped. */ .pair__fig{height:auto;width:100%;max-width:min(340px,100%);aspect-ratio:2/3} .pair__fig--wide{height:auto;width:100%;max-width:100%;aspect-ratio:3/2} /* the swap figures (see index.html) hand the phone a landscape frame — the frame has to follow, or object-fit:cover would crop the wide photograph into a portrait hole */ .pair__fig--swap{max-width:100%;aspect-ratio:3/2} } .chapter__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0; filter:saturate(1.05)} /* a panel holding one frame has no cycle to fade it in */ .chapter__fig img:only-child{opacity:1} .chapter__cap{position:absolute;top:calc(100% + 1rem);left:0;right:0;opacity:0; font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-faint);text-align:center} .chapter__text .h2{font-size:clamp(1.9rem,3.2vw,3rem);margin:0 0 .45em;text-wrap:balance} .chapter__text{padding:clamp(1.6rem,6.4svh,5rem) var(--pad);display:flex;flex-direction:column; justify-content:space-between;gap:clamp(1.5rem,4svh,3rem);min-height:calc(100svh - var(--nav-clear))} .chapter__text > *{max-width:48ch} .chapter--flip .chapter__text{align-items:flex-end} .chapter--flip .chapter__text > *{width:100%;max-width:48ch} .chapter__body{display:flex;flex-direction:column} .chapter__num{font-variant-numeric:tabular-nums;color:var(--aqua-dim); padding-right:.7em;margin-right:.2em;border-right:1px solid var(--line)} @media (max-width:900px){ .chapter{grid-template-columns:minmax(0,1fr)} .chapter__sticky,.chapter--flip .chapter__sticky{place-items:center;padding-inline:var(--pad)} /* width-driven on a phone: a height-driven box derives a width the column cannot hold */ .chapter__fig{height:auto;width:100%;max-height:62svh} .chapter--flip .chapter__sticky{order:0} .chapter__sticky{position:relative;height:70svh;top:auto} .chapter__text{min-height:auto;padding-block:clamp(2.5rem,8vw,5rem)} } .facts{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,auto)); gap:clamp(.8rem,2vw,2.2rem);justify-content:start; border-top:1px solid var(--line-soft);padding-top:clamp(.9rem,2svh,1.5rem)} .facts li{display:flex;flex-direction:column;gap:.3rem} .facts b{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,3vw,2rem); letter-spacing:.02em;color:color-mix(in oklab,var(--ink) 72%,var(--aqua))} .facts span{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);text-wrap:balance} .quote{margin:0 0 1.4rem;font-family:var(--script);font-style:italic;font-size:clamp(1.5rem,3.6vw,2.6rem); line-height:1.25;color:var(--ink);text-wrap:pretty;border-left:1px solid var(--aqua);padding-left:1.4rem} /* ═══ SECTIONS ════════════════════════════════════════════════ */ .section{padding:clamp(4.5rem,11vw,10rem) var(--pad);position:relative} .section--karten{background:var(--bg-deep);padding-block:clamp(1rem,2.2svh,2.5rem); display:flex;flex-direction:column; min-height:calc(100svh - var(--nav-clear));max-height:calc(100svh - var(--nav-clear))} /* sized from the window's height like Die Karten and Das Team: at 1655x991 this section stood 1359px against the 915 a stop leaves under the bar, so its cards fell off the screen. A flex column the height of one screen: whatever the header and the CTA don't use, .spaces takes (flex:1), so the three photographs grow to exactly what the one-screen rule allows — at 1920x1080 that is ~600px of card against the 454px the old 42svh clamp gave. */ .section--feiern{background:var(--bg-deep);padding-block:clamp(1.4rem,3svh,3rem); display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - var(--nav-clear))} .section--feiern .spaces{flex:1} .section--feiern .section__head{margin-bottom:clamp(.7rem,1.6svh,1.4rem)} /* 56ch broke this intro over three lines; 76ch holds it in two and buys the cards 31px */ .section--feiern .lead{max-width:76ch} .section--feiern .h2{font-size:clamp(1.6rem,3.6svh,2.7rem);margin:.25em 0 .3em} .section__head{text-align:center;max-width:900px;margin:0 auto clamp(2.5rem,6vw,5rem)} .section__head .h2{margin-top:.4em} /* menu cards — rebuilt as rows; rules live in the DIE KARTEN block at the end of the file */ /* a band stands on its own, not as the tail of a section it could never fit inside */ /* horizontal photo band — rides by itself, seamlessly */ /* a band inside a section reaches past its padding; one in a bandsection is already full width */ .band{--gap:.7rem;overflow:hidden;padding:0} .section .band{margin-inline:calc(var(--pad) * -1);padding-top:clamp(.8rem,1.9svh,1.8rem)} .band__track{display:flex;gap:var(--gap);width:max-content; animation:bandride 120s linear infinite;will-change:transform} .band__row{display:flex;gap:var(--gap)} /* two identical rows sit in the track, so one row's width is half the track plus half a gap */ @keyframes bandride{to{transform:translateX(calc(-50% - var(--gap) / 2))}} .band:hover .band__track{animation-play-state:paused} .band img{flex:0 0 auto;height:clamp(130px,15svh,270px);width:auto;border-radius:2px; cursor:zoom-in;filter:saturate(.94);transition:filter .6s,transform .6s var(--ease)} .band img:hover{filter:saturate(1.12);transform:translateY(-5px)} .band--tall img{height:clamp(260px,34svh,460px)} /* no motion: give the scrollbar back rather than freezing on the first few frames */ @media (prefers-reduced-motion:reduce){ .band{overflow-x:auto;overscroll-behavior-x:contain} .band__track{width:auto} } /* private-event spaces */ /* min(300px,100%): a bare 300px minimum cannot fit a 320px content box, and auto-fit then lays three tracks side by side — measured 946px of grid inside a 360px window. */ .spaces{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:clamp(.8rem,2vw,1.6rem);max-width:1400px;margin:0 auto} /* exactly three tracks for the three rooms: auto-fit dealt a fourth, empty track from 1440 up (cards shoved left) and wrapped to 2+1 between 768 and 1366 (section 1007px vs 692) */ @media (min-width:680px){.spaces{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}} /* Photograph on top, words underneath on the section's own ground. The cards used to be a photograph with the type laid over it behind a scrim — which meant every card was darkened to keep the text readable, and the photograph could never be seen properly. Now nothing is dimmed and nothing overlaps. */ .space{display:flex;flex-direction:column;background:transparent} .space__fig{margin:0;position:relative;aspect-ratio:3/2;max-height:min(27svh,260px); overflow:hidden;border-radius:2px;background:var(--bg-lift)} .space__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1; transition:transform 1.4s var(--ease)} .space:hover .space__fig img{transform:scale(1.05)} .space__body{padding:clamp(.9rem,2svh,1.4rem) 0 0} .space__body h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.4svh,1.9rem); margin:.2rem 0 .6rem} .space__body p{margin:0;color:var(--ink-dim);font-size:.92rem;max-width:44ch} .space__tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--aqua);margin:0} .feiern__cta{display:flex;gap:1.5rem;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:clamp(1rem,2.4svh,2rem); font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--ink-dim)} .feiern__cta b{color:var(--ink)} /* ═══ GALLERY ════════════════════════════════════════════════ */ /* Not CSS multi-column. The browser balances columns by filling them in order, which on this set left the last column 685px shorter than the tallest at 1860px — a wall with a torn hem. app.js deals each frame into whichever column is currently shortest instead, so the columns come out level, and the frames get room to breathe rather than butting together. */ .grid{--gal-gap:clamp(.5rem,.8vw,.9rem);--gal-cols:3;display:flex;gap:var(--gal-gap);align-items:flex-start} .grid__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--gal-gap)} @media (min-width:680px){.grid{--gal-cols:4}} @media (min-width:1024px){.grid{--gal-cols:5}} @media (min-width:1400px){.grid{--gal-cols:6}} @media (min-width:1700px){.grid{--gal-cols:7}} @media (min-width:2300px){.grid{--gal-cols:8}} .grid figure{margin:0;position:relative;overflow:hidden;border-radius:2px;background:var(--bg-lift)} .grid img{display:block;width:100%;height:auto;cursor:zoom-in; transition:transform 1.1s var(--ease),filter .6s;filter:saturate(.92) brightness(.94)} .grid figure:hover img{transform:scale(1.045);filter:saturate(1.08) brightness(1.02)} .grid figure::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0; box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--aqua) 45%,transparent);transition:opacity .5s} .grid figure:hover::after{opacity:1} /* ═══ RESERVE ═════════════════════════════════════════════════ */ .section--galerie{padding-block:clamp(1.5rem,4svh,3rem)} /* display:none by default, so the button cannot reach a desktop even if the script does something unexpected; display:flex (not inline-flex) so margin-inline:auto centres it. */ .gal__more{display:none} @media (max-width:679px){ .gal__more{display:flex;width:fit-content;margin:clamp(.9rem,2.6svh,1.5rem) auto 0} } /* The room itself behind the invitation — a table already laid, JUL_6682. Two scrims over it: one flat so the type never crosses a bright napkin, one from the edges so the photograph does not end in a hard line against the sections either side. */ /* The words sit in the top half and the photograph keeps its subject: the laid table, the railing and the water below them stay clear. The section is a fixed screen so the split holds — text above, table below — instead of drifting with the content's own height. */ .section--reserve{position:relative;isolation:isolate;background:var(--bg-deep); min-height:calc(100svh - var(--nav-clear));display:flex;flex-direction:column; justify-content:flex-start;padding-top:clamp(1.2rem,3svh,2.6rem);padding-bottom:0} .reserve__bg{position:absolute;inset:0;z-index:-1;overflow:hidden} .reserve__bg::before{content:"";position:absolute;inset:0; background:url("photos/p180921.webp") center 50% / cover no-repeat; filter:saturate(1.04) brightness(1.02)} /* No scrim at all — the photograph as shot. What keeps the type readable is its own halo (below) plus two narrow feathers, top and bottom, that only stop the picture ending in a hard line against the sections either side. Neither touches the middle of the frame. */ .reserve__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(to bottom, var(--bg-deep), transparent 14%, transparent 86%, var(--bg-deep))} .reserve{text-align:center;max-width:960px;margin:0 auto;width:100%} /* The same halo the hero uses, and nothing else — no contour. A stroke read as heavy against a bright photograph, which is the opposite of what this section is for. */ .reserve .h2,.reserve .lead,.reserve .kicker{ text-shadow:0 1px 2px color-mix(in oklab,var(--bg-deep) 78%,transparent), 0 2px 18px color-mix(in oklab,var(--bg-deep) 88%,transparent), 0 0 44px color-mix(in oklab,var(--bg-deep) 72%,transparent)} .reserve .h2--xl{margin:.2em 0 .3em} /* The paragraph is --ink-dim everywhere else on the page, which is right on a dark ground and wrong here: it lands on open water rendering at luminance 192–211, and dim ink is 196 — the text was measured at 0.9:1, literally the same brightness as the water. Full ink plus a heavier halo, sized to small type, carries it. */ .reserve .lead{color:var(--ink); text-shadow:0 1px 2px color-mix(in oklab,var(--bg-deep) 92%,transparent), 0 1px 6px var(--bg-deep), 0 2px 16px color-mix(in oklab,var(--bg-deep) 92%,transparent), 0 0 34px color-mix(in oklab,var(--bg-deep) 80%,transparent)} /* The frame has exactly two calm places: the water band across the top, and the dark quay stone along the bottom. Everything between is the laid table — cloth, napkins, glasses, the railing — and the button was landing right on the glasses (40–52% of the section at 1024x768, 1280x800, 1440x900, 1690x848). So the type takes the water and the button takes the stone: the block splits, text at the top, call to action pinned to the foot. */ .reserve{flex:1;display:flex;flex-direction:column} /* The aqua eyebrow is 13px of letter-spaced mono, and on the far bank — trees and bright water — it measured 3.4:1 on its glyph cores. It keeps the brand aqua and gets a tight, opaque halo instead: a small dense ring darkens only the millimetre around each letter. */ .reserve .kicker{margin-bottom:.2rem; -webkit-text-stroke:1.5px var(--bg-deep);paint-order:stroke fill; text-shadow:0 0 3px var(--bg-deep),0 0 7px var(--bg-deep), 0 0 14px color-mix(in oklab,var(--bg-deep) 92%,transparent), 0 1px 22px color-mix(in oklab,var(--bg-deep) 80%,transparent)} .reserve .lead{margin:0 auto clamp(.8rem,1.8svh,1.4rem);max-width:52ch} .reserve .btn--lg{padding:.95rem 2rem;font-size:.84rem} /* The pair travels to the foot of the frame together — the phone number and, under it, the way to write instead. Before, margin-top:auto sat on the button itself; a second child would have been pushed below the fold. */ .reserve__act{margin-top:auto;margin-bottom:clamp(1.1rem,3.2svh,2.4rem); display:flex;flex-direction:column;align-items:center;gap:.75rem} .reserve__alt{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase; color:var(--ink);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--ink) 45%,transparent); padding-bottom:.15rem;transition:color .3s,border-color .3s; text-shadow:0 0 3px var(--bg-deep),0 0 8px var(--bg-deep),0 1px 16px var(--bg-deep)} .reserve__alt:hover{color:var(--aqua);border-color:var(--aqua)} /* ═══ FOOT ════════════════════════════════════════════════════ */ /* The address, hours and contact live in the footer now. In the reservation section they sat over the photograph's brightest part — the laid tablecloth — where they could not be read, and they crossed the subject of the picture. Here the ground is solid. */ .foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)); gap:1.6rem clamp(1.5rem,4vw,3.5rem);width:100%;max-width:960px;text-align:left; padding-bottom:2.2rem;margin-bottom:.6rem;border-bottom:1px solid var(--line-soft)} .foot__cols h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase; color:var(--aqua-dim);margin:0 0 .7rem;font-weight:400} .foot__cols p{margin:0;color:var(--ink-dim);font-size:.88rem;line-height:1.75; letter-spacing:0;text-transform:none} .foot__cols a{border-bottom:1px solid transparent;transition:border-color .3s,color .3s} .foot__cols a:hover{color:var(--ink);border-color:var(--aqua)} .foot{display:flex;flex-direction:column;align-items:center;gap:.9rem;padding:3.5rem var(--pad) 3rem; border-top:1px solid var(--line-soft);text-align:center;color:var(--ink-faint); font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase} .foot__mark{font-family:var(--serif);font-size:1.5rem;letter-spacing:.35em;padding-left:.35em;color:var(--ink)} .foot p{margin:0} .foot nav{display:flex;gap:1.5rem} .foot nav a:hover{color:var(--aqua)} /* ═══ LIGHTBOX ════════════════════════════════════════════════ */ .lb{border:0;padding:0;margin:0;position:fixed;inset:0;width:auto;height:auto;max-width:none;max-height:none; background:color-mix(in oklab,var(--bg-deep) 96%,transparent);color:var(--ink); display:grid;place-items:center;overscroll-behavior:contain} .lb::backdrop{background:color-mix(in oklab,var(--bg-deep) 92%,transparent);backdrop-filter:blur(14px)} .lb:not([open]){display:none} .lb__img{max-width:min(94vw,1600px);max-height:86svh;object-fit:contain;border-radius:2px; animation:lbIn .5s var(--ease)} @keyframes lbIn{from{opacity:0;transform:scale(.97)}} .lb__x{position:absolute;z-index:2;top:1.1rem;right:1.2rem;width:44px;height:44px;border-radius:99px; background:color-mix(in oklab,var(--ink) 10%,transparent);border:0;color:var(--ink);font-size:1rem;cursor:pointer; transition:background .3s} .lb__x:hover{background:var(--aqua);color:var(--bg-deep)} .lb__nav{position:absolute;z-index:1;top:0;bottom:0;width:22%;min-width:70px;border:0;background:transparent;color:var(--ink); font-size:2.6rem;cursor:pointer;opacity:.35;transition:opacity .3s;font-family:var(--serif)} .lb__nav:hover{opacity:1} .lb__nav--prev{left:0} .lb__nav--next{right:0} .lb__count{position:absolute;bottom:1.4rem;left:0;right:0;text-align:center;margin:0; font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--ink-faint)} @media (max-width:640px){.lb__nav{font-size:1.8rem;width:26%}} /* No hover to reveal them with: on a touch screen the chevrons have to be visible on their own, next to the swipe. */ @media (hover:none){.lb__nav{opacity:.7}} /* language visibility (JS swaps textContent; nothing to do here) */ /* ── small screens: the nav CTA collapses to a phone glyph ─────── */ @media (max-width:600px){ .nav{gap:.75rem} .nav__mark{font-size:1.05rem;letter-spacing:.26em;padding-left:.26em} .nav__end{gap:.6rem} .nav__end .btn{font-size:0;padding:.55rem .8rem;letter-spacing:0} .nav__end .btn::after{content:"TEL";font-size:.68rem;letter-spacing:.14em} .lang{font-size:.62rem;gap:.3rem} .eyebrow{letter-spacing:.22em} .hero__slide{align-items:center!important;justify-content:center!important;text-align:center!important} .hero__slide .hero__cta{justify-content:center} .hero__slide:not(.hero__slide--center) .hero__claim, .hero__slide:not(.hero__slide--center) .hero__sub{max-width:none} } /* ═══ DIE KARTE — the menu page ═══════════════════════════════ */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .karte-page{background:var(--bg-deep)} #karte{max-width:1100px;margin:0 auto;padding:clamp(6rem,14svh,9rem) var(--pad) 4rem} .karte-head{text-align:center;margin-bottom:clamp(2rem,5svh,3.5rem)} .karte-head .h2{font-size:clamp(2rem,5vw,3.4rem);margin:.35em 0 .5em} .karte-head .lead a{color:var(--aqua);border-bottom:1px solid color-mix(in oklab,var(--aqua) 40%,transparent)} .karte-find{display:flex;flex-direction:column;align-items:center;gap:.7rem; margin:clamp(1.5rem,4svh,2.5rem) 0 clamp(1rem,3svh,2rem)} .karte-search{width:min(520px,100%);position:relative;display:block} .karte-search::before{content:"⌕";position:absolute;left:1.1rem;top:50%;transform:translateY(-52%); color:var(--ink-faint);font-size:1.1rem;pointer-events:none} .karte-search input{width:100%;padding:.95rem 1.2rem .95rem 2.7rem;border-radius:99px; border:1px solid var(--line);background:color-mix(in oklab,var(--ink) 4%,transparent); color:var(--ink);font-family:var(--sans);font-size:.95rem; transition:border-color .4s,background .4s} .karte-search input::placeholder{color:var(--ink-faint)} .karte-search input:focus{outline:none;border-color:var(--aqua); background:color-mix(in oklab,var(--ink) 7%,transparent)} .karte-search input::-webkit-search-cancel-button{filter:invert(1);opacity:.4} .karte-count{margin:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-faint)} .karte-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem} .chip{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; padding:.5rem 1rem;border-radius:99px;border:1px solid var(--line-soft);color:var(--ink-dim); transition:color .35s,border-color .35s,background .35s} .chip:hover{color:var(--bg-deep);background:var(--aqua);border-color:var(--aqua)} .karte-group{margin-top:clamp(2.5rem,6svh,4rem);scroll-margin-top:6rem} .karte-group__title{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.4rem); margin:0 0 1.4rem;padding-bottom:.6rem;letter-spacing:.01em; border-bottom:1px solid color-mix(in oklab,var(--aqua) 28%,transparent)} .karte-part{margin-top:2rem} .karte-part__title{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase; color:var(--aqua-dim);margin:0 0 1rem;font-weight:400} .karte-items{list-style:none;padding:0;margin:0;display:grid;gap:1.1rem} @media (min-width:820px){.karte-items{grid-template-columns:1fr 1fr;gap:1.1rem 3rem}} /* the price is pinned right and the name reaches for it — the classic card line */ /* the leader line is drawn 100vw wide and clipped by the row — otherwise it runs past the price and into the next column */ .karte-item{display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;align-items:baseline; overflow:hidden} .karte-item__name{justify-self:start;font-size:1rem;color:var(--ink);position:relative;padding-right:.4rem} .karte-item__name::after{content:"";position:absolute;bottom:.28em;left:calc(100% + .1rem); width:100vw;border-bottom:1px dotted color-mix(in oklab,var(--ink) 20%,transparent)} .karte-item__price{font-family:var(--mono);font-size:.86rem;color:var(--aqua); white-space:nowrap;position:relative;z-index:1;background:var(--bg-deep);padding-left:.5rem} .karte-item__desc{grid-column:1 / -1;margin:.15rem 0 0;font-size:.86rem;color:var(--ink-dim); line-height:1.55;max-width:52ch} .karte-empty{text-align:center;color:var(--ink-dim);margin:3rem 0;font-size:1rem} .karte-foot{margin-top:clamp(3rem,8svh,5rem);padding-top:2rem;border-top:1px solid var(--line-soft); text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem} .karte-foot p{margin:0;color:var(--ink-faint);font-size:.84rem;max-width:60ch} .karte-group__note{margin:-.6rem 0 1.4rem;color:var(--ink-dim);font-size:.9rem;max-width:64ch} /* The search said "4 von 138" and still painted 23 rows. `[hidden]` is a User-Agent rule, and ANY author `display` beats the UA origin no matter how weak the selector — so `.karte-item{display:grid}` a few lines up quietly un-hid every row the filter had hidden. The parts and groups collapsed (they set no `display`), which is why it looked like the search narrowed the card but never the dishes. One author-origin rule, scoped to this page so index.html keeps its own behaviour, covers items, parts, groups and chips at once. */ .karte-page [hidden]{display:none!important} /* Velaro moves you to the card when you ask for it; here the results start 1134px down a 390px phone, so the first keystroke changed nothing above the fold. karte.js scrolls the field up on the first search — this is the room it lands in, clear of the fixed nav. */ .karte-find{scroll-margin-top:5rem} /* the count is the proof that the search did something, so while a term is in it stops being grey furniture */ .karte-count[data-filtered]{color:var(--aqua)} /* ═══ DIE KARTEN — rebuilt: the real black menu photographed in the room, the three menus as rows of type with a dish still each, instead of three identical studio shots of a closed folder. The section is a flex column pinned to exactly one scroll stop (min AND max height, like .pair); the .menus grid takes the whole budget (flex:1) so the photograph carries any spare height on tall screens while the text column centers itself. ═══ */ .menus{flex:1;min-height:0;width:100%;max-width:1280px;margin:0 auto; display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:clamp(1.6rem,4vw,4.5rem);align-items:stretch} /* the photograph is shown WHOLE — intrinsic 1467x2200 ratio, shrunk to fit its cell, never cropped; the frame rides on the image itself, not the cell */ .menus__fig{margin:0;min-height:0;display:flex;align-items:center;justify-content:center} .menus__fig picture{display:contents} /* the stays the flex item, not the wrapper */ .menus__fig img{width:auto;height:auto;max-width:100%;max-height:100%;border-radius:2px;filter:saturate(1.05); box-shadow:0 0 0 1px color-mix(in oklab,var(--aqua) 22%,transparent), 0 18px 50px -24px color-mix(in oklab,var(--aqua) 30%,transparent)} .menus__text{display:flex;flex-direction:column;justify-content:center;min-height:0} .menus .section__head{text-align:left;max-width:none;margin:0 0 clamp(.9rem,2.6svh,2rem)} .menus .h2{font-size:clamp(1.6rem,3.9svh,2.9rem);margin:.3em 0 .3em} .menus .lead{margin:0;max-width:52ch;font-size:clamp(.86rem,1.7svh,1.02rem)} .cards{display:flex;flex-direction:column;min-height:0} .card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center; gap:clamp(.9rem,1.8vw,1.6rem);padding-block:clamp(.6rem,1.7svh,1.15rem); border-top:1px solid var(--line-soft)} .card:last-of-type{border-bottom:1px solid var(--line-soft)} .card__dish{width:clamp(96px,16svh,150px);aspect-ratio:3/2;height:auto;object-fit:cover; border-radius:2px;filter:saturate(1.05);transition:transform .6s var(--ease)} .card:hover .card__dish{transform:scale(1.04)} .card__body h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,2.6svh,1.55rem); margin:0 0 .2rem;letter-spacing:.01em;transition:color .35s} .card:hover .card__body h3{color:var(--aqua)} .card__body p{margin:0;color:var(--ink-dim);font-size:clamp(.8rem,1.55svh,.92rem);line-height:1.45;max-width:52ch} .card__open{display:inline-flex;align-items:center;gap:.6em;margin-top:clamp(.3rem,.9svh,.55rem); font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase; color:var(--aqua);transition:gap .35s var(--ease)} .card:hover .card__open{gap:1em} .card__open i{font-style:normal} @media (max-width:679px){ /* phones: the photograph closes the section under the rows */ .menus{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(90px,1fr); gap:clamp(1rem,2.6svh,1.8rem)} .menus__fig{order:2;min-height:90px} .card__dish{width:clamp(76px,11svh,120px)} } @media (max-width:679px){ /* phones: the row itself is the link — the label goes, the banner keeps its room */ .card__open{display:none} .card{padding-block:clamp(.4rem,1.2svh,.9rem)} .menus .lead{font-size:clamp(.8rem,1.5svh,.95rem)} .menus .section__head{margin-bottom:clamp(.6rem,1.6svh,1.2rem)} } /* ═══ SHORT WINDOWS ══════════════════════════════════════════ Das Haus and Die Karten are capped to one screen so their two-column layouts hold their shape. Below about 700px of viewport height the content genuinely cannot fit that cap, and a max-height then CLIPS it: measured 18px lost from Das Haus and 98px from Die Karten at 1024x559, and still 3px and 18px at 1690x650. Releasing the cap lets those sections grow and scroll instead of hiding their last line. Gated on height alone, so it applies to a short desktop window as readily as to a phone in landscape — which is the point; the bug was never about width. Standard laptop and desktop heights (848, 900, 1080, 1440) are all above the threshold and see none of this. */ @media (max-height: 700px) { .pair, .section--karten { max-height: none; } /* The remaining 12px: .menus and .menus__text carry min-height:0 so the two columns can shrink inside the one-screen cap. With the cap gone that permission is what lets the rows spill past the section's padding — so on short windows they may claim their content's height instead. */ /* .menus carries flex:1 1 0% so it fills the one-screen budget and hands any spare height to the photograph. flex-basis:0 means its CONTENT never counts toward the section's own intrinsic height — so with the cap gone the section measured 593px while its content needed 605, and the last card hung 12px out. On a short window it takes its content's height instead and the section grows to hold it. */ .menus { flex: 0 0 auto; } .menus, .menus__text { min-height: auto; } /* .menus__text is a flex column, so its head and rows shrink by default — measured 589px of content squeezed into 561px, and the last card hung out the bottom. Nothing in that column may shrink on a short window; the section grows instead. */ .menus__text > * { flex-shrink: 0; } .section--karten .cards { gap: .6rem; } } /* Feiern on a short laptop window: the band ran 16–32px past the fold at 1024x768, 1280x800 and 1366x768, so its own scroll stop left a sliver hanging. The three photographs stay the size they are — what gives is the whitespace around them. */ @media (min-width:680px) and (max-height:860px){ .section--feiern{padding-block:clamp(.6rem,1.4svh,1.2rem)} .section--feiern .section__head{margin-bottom:clamp(.4rem,1svh,.9rem)} .section--feiern .feiern__cta{margin-top:clamp(.5rem,1.2svh,1rem)} } /* ── Anfrage ────────────────────────────────────────────────────────────── The form. Two columns on a desk — fields left, the two direct ways right — one column from 900px down, where a form beside a card leaves neither enough room. The fields themselves are a grid of their own so a date and a time sit side by side instead of each taking a full row. Everything is the house's own furniture: mono labels, a hairline under each field, aqua on focus. No boxes, because a page this dark turns a bordered input into a bright rectangle. */ .section--anfrage{background:var(--bg-deep)} .anfrage{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:clamp(1.6rem,3.5vw,3.5rem);max-width:1180px;margin:0 auto;align-items:start} @media (max-width:899px){.anfrage{grid-template-columns:minmax(0,1fr)}} .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1.4rem;margin:0} @media (max-width:559px){.form{grid-template-columns:minmax(0,1fr);gap:1.3rem}} .form__f{display:flex;flex-direction:column;gap:.45rem;min-width:0} .form__f--wide{grid-column:1/-1} .form__f > span{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-faint);transition:color .3s} .form__f:focus-within > span{color:var(--aqua)} .form input,.form select,.form textarea{ font-family:var(--sans);font-size:1rem;color:var(--ink);background:transparent; border:0;border-bottom:1px solid var(--line);border-radius:0; padding:.5rem 0;width:100%;min-width:0; transition:border-color .3s,box-shadow .3s; /* Safari paints its own rounded well over a transparent background, and on iOS it also shrinks the text — 16px is the threshold under which it zooms the page on focus. */ -webkit-appearance:none;appearance:none} .form textarea{resize:none;line-height:1.5;overflow:hidden} .form input:focus,.form select:focus,.form textarea:focus{ outline:0;border-color:var(--aqua);box-shadow:0 1px 0 0 var(--aqua)} .form input::placeholder,.form textarea::placeholder{color:var(--ink-faint);opacity:1} /* A select needs its own arrow once appearance is off, and a date field's native glyph is nearly black on this ground — inverting it is the only way to see it at all. */ .form select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%), linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%); background-position:right 8px center,right 3px center;background-size:5px 5px,5px 5px; background-repeat:no-repeat;padding-right:1.4rem;cursor:pointer} .form select:focus{background-image:linear-gradient(45deg,transparent 50%,var(--aqua) 50%), linear-gradient(135deg,var(--aqua) 50%,transparent 50%)} .form option{background:var(--bg-deep);color:var(--ink)} .form input[type=date]{cursor:pointer} .form input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.45;cursor:pointer} .form input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:.9} /* An empty date reads "tt.mm.jjjj" in full-strength ink, which shouted louder than the fields a guest has actually filled in. app.js writes data-filled, because no selector can see it. */ .form input[type=date]:not([data-filled]){color:var(--ink-faint)} /* Marked by the server's 400, cleared the moment the guest types in the field again. */ .form .is-wrong{border-color:var(--candle);box-shadow:0 1px 0 0 var(--candle)} .form .is-wrong + span,.form__f:has(.is-wrong) > span{color:var(--candle)} .form.is-sending{opacity:.65;pointer-events:none} .form__hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .form__foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between; gap:1.2rem;flex-wrap:wrap;margin-top:.4rem} .form__status{margin:0;font-size:.9rem;color:var(--ink-dim);flex:1 1 16ch;min-width:0;text-wrap:pretty} .form__status.is-ok{color:var(--aqua)} .form__status.is-error{color:var(--candle)} .form__status a{color:inherit;text-decoration:underline;text-underline-offset:3px} .form__foot .btn{flex:0 0 auto} .form__foot .btn:disabled{opacity:.5;cursor:default} .anfrage__side{display:flex;flex-direction:column;gap:1.1rem} .anfrage__card{border:1px solid var(--line-soft);border-radius:2px;padding:clamp(1.1rem,2vw,1.6rem); background:color-mix(in oklab,var(--bg-lift) 34%,transparent);display:flex;flex-direction:column;gap:.5rem} .anfrage__big{font-family:var(--mono);font-size:clamp(1.05rem,2vw,1.35rem);letter-spacing:.06em; color:var(--ink);text-decoration:none;transition:color .3s} .anfrage__mail{font-family:var(--mono);font-size:clamp(.82rem,1.3vw,.95rem);letter-spacing:.02em; color:var(--ink);text-decoration:none;word-break:break-word;transition:color .3s} .anfrage__big:hover,.anfrage__mail:hover{color:var(--aqua)} .anfrage__note{margin:0;font-size:.86rem;color:var(--ink-dim);text-wrap:pretty} /* ── the legal pages ────────────────────────────────────────────────────── Impressum and Datenschutz. They live in style.css rather than in a