/* ================================================================= ROMANTICA · Düsseldorf Editorial / cinematic restaurant site ----------------------------------------------------------------- Sections 00 Tokens & reset 01 Typography & utilities 02 Buttons, eyebrows, reveals 03 Navigation (+ mobile) 04 Hero (5-layer parallax) 05 Awards & reviews 06 Oven transition (pinned) + About 07 Locations 08 Speisekarte (menu) 09 Social 10 Footer 11 Responsive 12 Reduced motion ================================================================= */ /* ============================ 00 · TOKENS & RESET ================ */ :root{ /* Brand palette (strict) */ --c-bg:#13130C; /* primary dark background */ --c-bg-2:#2C3229; /* secondary dark green */ --c-cream:#F4EFE6; /* warm cream (text / light) */ --c-red:#600C13; /* deep red accent */ --c-olive:#90A655; /* olive green accent */ /* Cream tints (on dark) */ --cream-90:rgba(244,239,230,.90); --cream-70:rgba(244,239,230,.70); --cream-55:rgba(244,239,230,.55); --cream-40:rgba(244,239,230,.52); --cream-15:rgba(244,239,230,.15); --cream-08:rgba(244,239,230,.08); /* Ink tints (on cream) */ --ink:#13130C; --ink-70:rgba(19,19,12,.70); --ink-50:rgba(19,19,12,.60); --ink-15:rgba(19,19,12,.14); --ink-08:rgba(19,19,12,.08); --red-bright:#7c121c; --olive-bright:#a4bb68; /* Type */ --ff-serif:'Playfair Display', Georgia, 'Times New Roman', serif; --ff-serif-2:'Cormorant Garamond', Georgia, serif; --ff-sans:'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Layout */ --container:1240px; --pad:clamp(1.25rem, 5vw, 4rem); --radius:18px; --nav-h:74px; --shadow-soft:0 34px 60px -34px rgba(0,0,0,.55), 0 10px 26px -16px rgba(0,0,0,.4); --shadow-card:0 40px 80px -40px rgba(0,0,0,.6), 0 12px 30px -18px rgba(0,0,0,.45); --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); /* Warm material */ --cream-50:rgba(244,239,230,.50); --shadow-warm:0 44px 80px -42px rgba(38,12,7,.6), 0 14px 34px -20px rgba(20,8,4,.5); --paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); } *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); } /* NOTE: intentionally NOT setting overflow-x on — it would break the sticky-pinned oven scene. Horizontal overflow is contained on below. (On real devices there is no scrollbar-gutter overflow; the only place it appeared was the mobile *emulator's* 29px classic scrollbar.) */ body{ margin:0; background:var(--c-bg); color:var(--c-cream); font-family:var(--ff-sans); font-weight:400; font-size:clamp(1rem,.97rem + .15vw,1.06rem); line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; /* contains horizontal overflow OHNE Scroll-Container → bricht position:sticky nicht (iOS-Safari-Fix); ersetzt hidden */ } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit} h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.08} p{margin:0} ::selection{background:var(--c-red);color:var(--c-cream)} .skip-link{ position:fixed;top:.6rem;left:.6rem;z-index:200; background:var(--c-cream);color:var(--c-bg); padding:.7rem 1.1rem;border-radius:8px;font-weight:600; transform:translateY(-160%);transition:transform .25s var(--ease); } .skip-link:focus{transform:none} :focus-visible{outline:2px solid var(--c-olive);outline-offset:3px;border-radius:4px} /* Warm material: global film grain + Fraunces optical character */ body{font-optical-sizing:auto} .grain{ position:fixed;inset:0;z-index:45;pointer-events:none; opacity:.05;mix-blend-mode:overlay; 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='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:170px 170px; } /* (display serif is Playfair — no variable axes needed) */ /* ============================ 01 · TYPOGRAPHY & UTIL ============= */ .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)} .section-head{max-width:760px;margin-inline:auto;text-align:center;padding-inline:var(--pad)} .section-title{ font-family:var(--ff-serif); font-weight:600; font-size:clamp(2.2rem,1.4rem + 3.4vw,4.1rem); line-height:1.04; letter-spacing:-.01em; } .section-title em{font-style:italic;color:var(--c-olive)} .section-sub{ color:var(--cream-55); margin:1.4rem auto 0; max-width:54ch; font-size:1.05rem; } /* ============================ 02 · BUTTONS / EYEBROWS / REVEAL === */ .btn{ --bd:transparent; display:inline-flex;align-items:center;justify-content:center;gap:.55em; font-family:var(--ff-sans);font-weight:600;font-size:.8rem; letter-spacing:.12em;text-transform:uppercase;line-height:1; padding:1.05em 1.7em;border-radius:100px;cursor:pointer; border:1px solid var(--bd); transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .btn--solid{background:var(--c-red);color:var(--c-cream)} .btn--solid:hover{background:var(--red-bright);transform:translateY(-2px)} .btn--ghost{--bd:var(--cream-40);color:var(--c-cream)} .btn--ghost:hover{background:var(--c-cream);color:var(--c-bg);--bd:var(--c-cream)} .btn--line{--bd:var(--ink-15);color:var(--ink)} .btn--line:hover{background:var(--ink);color:var(--c-cream);--bd:var(--ink)} .eyebrow{ display:flex;align-items:center;gap:.85em; margin:0 0 1.2rem; font-family:var(--ff-sans);font-weight:600;font-size:.74rem; letter-spacing:.26em;text-transform:uppercase;color:var(--c-olive); } .eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.55} .eyebrow--center{justify-content:center} .eyebrow--center::after{content:"";width:34px;height:1px;background:currentColor;opacity:.55} /* Scroll reveal */ .reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)} .reveal.is-in{opacity:1;transform:none} /* stagger children that share a parent */ .reveal.is-in{transition-delay:var(--d,0s)} /* ============================ 03 · NAVIGATION =================== */ .nav{ position:fixed;inset:0 0 auto 0;z-index:50; transition:background .45s var(--ease), backdrop-filter .45s var(--ease), border-color .45s; border-bottom:1px solid transparent; } /* hero scrim — lets the white wordmark + links read on the light sky; fades out once scrolled */ .nav::before{ content:"";position:absolute;inset:0 0 auto 0;height:170px;z-index:-1;pointer-events:none; background:linear-gradient(180deg, rgba(19,19,12,.55) 0%, rgba(19,19,12,.22) 45%, rgba(19,19,12,0) 100%); opacity:1;transition:opacity .45s var(--ease); } .nav__inner{ max-width:1440px;margin-inline:auto; padding:1.1rem var(--pad); display:flex;align-items:center;justify-content:space-between;gap:1.5rem; transition:padding .45s var(--ease); } .nav__brand{position:relative;display:block;width:150px;height:30px;flex:none} .nav__logo{position:absolute;left:0;top:50%;transform:translateY(-50%);width:150px;height:auto;transition:opacity .4s var(--ease)} /* over the hero scrim the wordmark is WHITE — the big centre logo stays the only red */ .nav__logo--color{opacity:0} .nav__logo--white{opacity:1} .nav__links{display:flex;gap:2.2rem} .nav__links a{ position:relative;font-size:.8rem;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--cream-70);padding:.3rem 0;transition:color .3s; } .nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:currentColor;transition:width .35s var(--ease)} .nav__links a:hover{color:var(--c-cream)} .nav__links a:hover::after{width:100%} .nav__cta{padding:.7em 1.3em} .nav .btn--ghost{--bd:var(--cream-40);color:var(--c-cream)} .nav .btn--ghost:hover{background:var(--c-cream);color:var(--c-bg);--bd:var(--c-cream)} /* scrolled state → solid CREAM bar: brand red returns (red wordmark + dark text) */ .nav.is-scrolled{ background:rgba(244,239,230,.94); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--ink-15); box-shadow:0 14px 34px -26px rgba(19,19,12,.55); } .nav.is-scrolled::before{opacity:0} .nav.is-scrolled .nav__inner{padding-top:.7rem;padding-bottom:.7rem} .nav.is-scrolled .nav__logo--white{opacity:0} .nav.is-scrolled .nav__logo--color{opacity:1} .nav.is-scrolled .nav__links a{color:var(--ink-70)} .nav.is-scrolled .nav__links a:hover{color:var(--ink)} .nav.is-scrolled .btn--ghost{--bd:var(--ink-15);color:var(--ink)} .nav.is-scrolled .btn--ghost:hover{background:var(--ink);color:var(--c-cream);--bd:var(--ink)} .nav.is-scrolled .nav__toggle span{background:var(--ink)} /* mobile menu open → transparent bar + white logo on the dark overlay (beats the cream scrolled state) */ body.nav-open .nav{background:transparent;border-bottom-color:transparent;box-shadow:none} body.nav-open .nav::before{opacity:0} body.nav-open .nav .nav__logo--color{opacity:0} body.nav-open .nav .nav__logo--white{opacity:1} body.nav-open .nav .nav__toggle span{background:var(--c-cream)} /* hamburger */ .nav__toggle{ display:none;width:44px;height:44px;border:0;background:none;cursor:pointer; flex-direction:column;justify-content:center;gap:5px;padding:10px; } .nav__toggle span{display:block;height:2px;width:100%;background:var(--c-cream);border-radius:2px;transition:transform .35s var(--ease), opacity .25s, background .3s} .nav__toggle.is-x span{background:var(--c-cream)} .nav__toggle.is-x span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav__toggle.is-x span:nth-child(2){opacity:0} .nav__toggle.is-x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* mobile fullscreen menu */ .navmobile{ position:fixed;inset:0;z-index:49; background:var(--c-bg); display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.4rem; padding:6rem var(--pad) 3rem; visibility:hidden; transform:translateY(-100%); transition:transform .55s var(--ease), visibility 0s linear .55s; } .navmobile.is-open{visibility:visible;transform:none;transition:transform .55s var(--ease)} .navmobile__links{display:flex;flex-direction:column;gap:.4rem;text-align:center;width:100%;max-width:420px} .navmobile__links a{ font-family:var(--ff-serif);font-size:clamp(2rem,9vw,3rem);color:var(--c-cream); display:flex;align-items:baseline;gap:1rem;justify-content:center;padding:.4rem 0; border-bottom:1px solid var(--cream-08); } .navmobile__links a span{font-family:var(--ff-sans);font-size:.8rem;color:var(--c-olive);letter-spacing:.1em} .navmobile__cta{margin-top:1.4rem} .navmobile__meta{margin-top:1.2rem;color:var(--cream-40);font-family:var(--ff-serif-2);font-style:italic;font-size:1.05rem} /* ============================ 04 · HERO — Palermo parallax ===== */ .hero{ position:relative;height:100svh;min-height:600px;overflow:hidden;isolation:isolate; /* fallback blends with the sky so any sub-pixel edge stays invisible */ background:linear-gradient(180deg,#cdd4dc 0%,#e7d4b6 48%,#d8c09c 100%); } .hero__track{height:100%} .hero__scene{position:absolute;inset:0;z-index:0} /* leichter Creme-Schleier (~10 %) über allen Parallax-Ebenen — hellt den Hero auf */ .hero__scene::after{content:"";position:absolute;inset:0;z-index:7;background:#ECE7D8;opacity:.1;pointer-events:none} /* The five identical 1920×1500 artboards use the SAME box, object-fit and a UNIFORM base scale → perfectly aligned, seamless panorama at rest. JS adds the per-layer travel + scale on scroll (transform only). */ .hlayer{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:50% 30%; /* frame toward the top → generous sky */ transform:scale(1.06);transform-origin:50% 50%; will-change:transform;backface-visibility:hidden; } .hlayer--sky {z-index:1} .hlayer--clouds{z-index:2} /* mountains/haze now BEHIND the logo */ .hlayer--logo {z-index:3} /* logo between mountains and city */ .hlayer--city {z-index:4} /* city stays in FRONT → occludes the logo on scroll */ .hlayer--land {z-index:5} .hlayer--plants{z-index:6;filter:blur(clamp(2.5px,0.4vw,5.5px))} /* Vordergrund leicht unscharf → Tiefenschärfe */ /* z2 · logo lives INSIDE the landscape (between sky and clouds), not in the UI */ .hlayer--logo{ object-fit:unset;display:flex;align-items:flex-start;justify-content:center; margin:0;line-height:1;pointer-events:none;transform:scale(1); } .hero__logo{ width:min(60vw,700px);height:auto;margin-top:15vh; /* mid-mountains (per reference) */ filter:drop-shadow(0 14px 34px rgba(40,12,8,.32)); animation:logoReveal 2.6s cubic-bezier(.19,1,.22,1) both .5s; } /* luxurious entrance: slow, smooth rise + settle + fade (no cheap blur) */ @keyframes logoReveal{ 0% {opacity:0; transform:translateY(12px) scale(1.07)} 100%{opacity:1; transform:translateY(0) scale(1)} } /* gentle blend into the next section + masks the lowest edge of the plants */ .hero::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:22%;z-index:10;pointer-events:none; background:linear-gradient(to top,var(--c-bg) 1%,rgba(19,19,12,0) 100%); } /* UI layer (z20) — never moves with the landscape */ .hero__scroll{ position:absolute;left:50%;bottom:1.8rem;transform:translateX(-50%);z-index:20; display:flex;flex-direction:column;align-items:center;gap:.55rem; color:var(--cream-70);text-shadow:0 2px 12px rgba(19,19,12,.6); animation:heroWordIn 1.4s var(--ease-out) both .8s; } .hero__scroll-word{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600} .hero__scroll-line{width:1px;height:50px;background:linear-gradient(to bottom,var(--cream-70),transparent);position:relative;overflow:hidden} .hero__scroll-line::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--c-cream);animation:scrollDot 2.2s var(--ease) infinite} @keyframes heroWordIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}} @keyframes scrollDot{0%{top:-50%}60%,100%{top:100%}} /* distinct tablet / mobile compositions (not just a shrunk desktop) */ @media (max-width:1024px){ .hero__logo{width:min(66vw,540px);margin-top:14vh} .hlayer{object-position:50% 40%} } @media (max-width:640px){ .hero{min-height:88svh} .hero__logo{width:min(78vw,400px);margin-top:20vh} .hlayer{object-position:50% 50%} /* tall viewport already shows full height */ } /* ============================ 05 · AWARDS ====================== */ .awards{ background:var(--c-bg); padding:clamp(1.3rem,3.2vh,2.2rem) var(--pad); border-block:1px solid var(--cream-08); } .awards__bar{ max-width:var(--container);margin-inline:auto; display:flex;align-items:center;justify-content:center;flex-wrap:wrap; gap:clamp(.7rem,2.4vw,1.7rem); color:var(--cream-70);font-size:.95rem; } .awards__stars{position:relative;display:inline-block;font-size:1.05rem;letter-spacing:.14em;line-height:1} .stars__base{color:var(--cream-15)} .stars__fill{position:absolute;top:0;left:0;white-space:nowrap;overflow:hidden;width:var(--rating,96%);color:var(--c-cream)} .awards__score{color:var(--cream-55);letter-spacing:.02em} .awards__score strong{color:var(--c-cream);font-weight:700;font-size:1.05rem} .awards__count{color:var(--cream-55)} .awards__count .num{color:var(--c-cream);font-weight:600} .awards__src{color:var(--cream-50);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase} .awards__dot{width:4px;height:4px;border-radius:50%;background:var(--cream-15);flex:none} @media (max-width:560px){ .awards{padding:clamp(1.6rem,5vh,2.4rem) var(--pad)} .awards__dot{display:none} .awards__bar{gap:.5rem 1.1rem;line-height:1.5} } /* ============================ 06 · OVEN + ABOUT ================ */ /* Unsere Geschichte — scroll-driven light→dark theme transition + arch crossfade */ .story{background:var(--c-bg)} .story__track{position:relative;height:210vh} .story__pin{ position:sticky;top:0;min-height:100vh;overflow:hidden;display:flex;align-items:center; /* theme vars — JS interpolates on scroll; defaults = dark end-state (also reduced-motion) */ --story-bg:var(--c-bg); --fg:var(--c-cream); --fg-accent:var(--c-olive); --fg-dim:var(--cream-70); background:var(--story-bg); } .story__grid{ width:100%;max-width:var(--container);margin-inline:auto;padding:clamp(2rem,5vh,4rem) var(--pad); display:grid;grid-template-columns:1fr auto 1fr; gap:clamp(1.6rem,3.5vw,4rem);align-items:center; } /* left — title hugs the arch */ .story__intro{text-align:right} .story__intro .eyebrow{justify-content:flex-end;color:var(--fg-accent)} .story__title{ font-family:var(--ff-serif);font-weight:600;letter-spacing:-.01em;color:var(--fg); font-size:clamp(1.9rem,1.3rem + 2.2vw,3.2rem);line-height:1.05;margin:1rem 0 0; } .story__title em{font-style:italic;color:var(--fg-accent)} .story__tagline{ margin:1.25rem 0 0 auto;max-width:28ch; font-family:var(--ff-serif-2);font-style:italic;font-size:1.1rem;color:var(--fg-accent); } /* right — story copy */ .story__text{max-width:42ch} .story__text p{color:var(--fg-dim);margin:0 0 1.3rem;font-size:1.04rem} .story__text strong{color:var(--fg);font-weight:600} .story__quote{ font-family:var(--ff-serif);font-style:italic;font-weight:500;color:var(--fg); font-size:clamp(1.25rem,1.05rem + .8vw,1.65rem);line-height:1.3; border-right:2px solid var(--c-red);padding-right:1.3rem;margin:1.9rem 0 0 auto;max-width:22ch; } /* center — clean modern arch (Palermo → Düsseldorf crossfade) */ .story__archwrap{display:flex;justify-content:center} .arch{ position:relative;width:min(32vw,360px);aspect-ratio:3/4; border-radius:50% 50% 14px 14px / 38% 38% 3% 3%; overflow:hidden; box-shadow:0 50px 100px -45px rgba(0,0,0,.8), 0 0 0 1px var(--cream-08); } .arch__img{position:absolute;inset:0;background-size:cover;background-position:center} .arch__img--from{background-image:url(../assets/img/palermo.jpg)} .arch__img--to{background-image:url(../assets/img/duesseldorf.jpg);opacity:var(--cross,0)} /* soft, purposeful legibility veil — no harsh/weird shading */ .arch__veil{ position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(80% 40% at 50% 52%, rgba(19,19,12,.46), transparent 72%), linear-gradient(180deg, rgba(19,19,12,.10), transparent 30%, transparent 70%, rgba(19,19,12,.22)); } .arch__title{ position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:2;margin:0; text-align:center;padding-inline:.8rem; font-family:var(--ff-serif);font-weight:500;font-style:italic; font-size:clamp(1.2rem,.95rem + 1vw,1.7rem);line-height:1.18;color:var(--c-cream); text-shadow:0 6px 30px rgba(0,0,0,.6); } .arch__title span{display:block} @media (max-width:960px){ /* mobile: no pin/transition — show the static dark end-state, stacked */ .story__track{height:auto} .story__pin{position:static;min-height:0} .story__grid{grid-template-columns:1fr;justify-items:center;max-width:600px;gap:clamp(1.8rem,5vh,2.8rem);padding-block:clamp(3.5rem,9vh,6rem)} .story__intro{order:1;text-align:center} .story__intro .eyebrow{justify-content:center} .story__tagline{margin-inline:auto} .story__quote{margin:1.4rem auto 0;border-right:0;padding-right:0;text-align:center;max-width:32ch} .story__archwrap{order:2} .story__text{order:3;text-align:left} .arch{width:min(66vw,330px)} } /* ============================ 07 · LOCATIONS — green → Sicily scroll theme ===== */ .locations{background:var(--c-bg-2)} .locations__track{position:relative} .locations__pin{ min-height:100vh;display:flex;align-items:center;overflow:hidden; padding-block:clamp(3.5rem,9vh,7rem); /* theme vars — JS interpolates on scroll: green/light start → Sicily/dark end */ --loc-fg:rgb(244,239,230); --loc-accent:rgb(144,166,85); --loc-dim:rgb(206,201,189); --loc-line:rgb(74,78,69); --loc-bg-op:0; } .locations__bg{ position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--loc-bg-op); background:linear-gradient(rgba(236,231,216,.72),rgba(236,231,216,.72)),url(../assets/img/background-sicily.jpg); background-size:cover;background-position:center; } .locations__inner{position:relative;z-index:1;width:100%} .locations__grid{ max-width:var(--container);margin:clamp(2.6rem,5vh,4rem) auto 0;padding-inline:var(--pad); display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(7,auto); column-gap:clamp(2.2rem,5vw,4.5rem);row-gap:0; } .loc{display:grid;grid-template-rows:subgrid;grid-row:1 / -1;position:relative;isolation:isolate} /* each card sits in its own frame — a stronger cream veil that fades in with the theme */ .loc::before{content:"";position:absolute;inset:-1.5rem -1.1rem;z-index:-1;border-radius:22px; background:rgb(244 239 230 / calc(.92 * var(--loc-bg-op))); box-shadow:0 45px 80px -50px rgb(19 19 12 / calc(.55 * var(--loc-bg-op)));} .loc:nth-child(1){grid-column:1} .loc:nth-child(2){grid-column:2} /* framed editorial landscape — soft-rounded (a whisper of the Geschichte arch) */ .loc__media{ position:relative;aspect-ratio:3/2;overflow:hidden;margin:0 0 clamp(1.5rem,2.2vw,2.1rem); border-radius:20px 20px 14px 14px; box-shadow:0 0 0 1px var(--loc-line); transition:box-shadow .4s var(--ease); } .loc:hover .loc__media{box-shadow:0 0 0 1px rgba(144,166,85,.55)} .loc__img{position:absolute;top:-10%;left:0;width:100%;height:120%;object-fit:cover; scale:1.03;filter:saturate(.9) contrast(1.03) brightness(.99); transition:scale .9s var(--ease), filter .6s var(--ease); will-change:translate,scale,filter} .loc:hover .loc__img{scale:1.09;filter:saturate(1.06) contrast(1.05) brightness(1.02)} .loc__media::after{content:"";position:absolute;inset:0;pointer-events:none; transition:opacity .6s var(--ease); background:linear-gradient(180deg,transparent 56%,rgba(19,19,12,.34))} .loc:hover .loc__media::after{opacity:.5} .loc__index{display:flex;align-items:baseline;gap:.7rem;margin:0 0 .7rem; font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--loc-accent)} .loc__index b{font-family:var(--ff-serif-2);font-style:italic;font-weight:500; font-size:1.25rem;letter-spacing:0;color:var(--loc-dim)} .loc__name{font-family:var(--ff-serif);font-weight:600;letter-spacing:-.01em;color:var(--loc-fg); font-size:clamp(1.7rem,1.2rem + 1.6vw,2.5rem);line-height:1.04;margin:0 0 .7rem} .loc__name em{font-style:italic} .loc__tagline{font-family:var(--ff-serif-2);font-style:italic;font-size:1.2rem;line-height:1.4; color:var(--loc-dim);margin:0 0 1.8rem;max-width:42ch} /* meta spans 3 bands; nested subgrid → Adresse/Öffnungszeiten/Telefon align across both cards */ .loc__meta{grid-row:span 3;display:grid;grid-template-rows:subgrid; margin:0 0 1.9rem;border-top:1px solid var(--loc-line)} .loc__row{display:flex;justify-content:space-between;gap:1.6rem;align-items:start; padding:.95rem 0;border-bottom:1px solid var(--loc-line)} .loc__row dt{flex:none;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase; color:var(--loc-dim);font-weight:600;padding-top:.2rem} .loc__row dd{margin:0;text-align:right;color:var(--loc-fg);font-weight:500;font-size:.95rem;line-height:1.55} .loc__row a{transition:color .25s} .loc__row a:hover{color:var(--loc-accent)} .loc__rest{color:var(--loc-accent);font-weight:600} .loc__actions{display:flex;gap:.7rem;flex-wrap:wrap;align-items:start} .loc__actions .btn{font-size:.74rem;padding:1em 1.5em} .locations .btn--ghost{--bd:var(--loc-accent);color:var(--loc-accent)} .locations .btn--ghost:hover{background:var(--loc-accent);color:var(--c-cream);--bd:var(--loc-accent)} .locations .eyebrow{color:var(--loc-accent)} .locations .section-head{max-width:var(--container)} .locations .section-title{color:var(--loc-fg);font-weight:500;line-height:1.5; font-size:clamp(1.3rem,.55rem + 1.35vw,2rem);max-width:none;margin:.35rem auto 0} .locations .section-title em{color:var(--loc-accent)} .locations .section-sub{color:var(--loc-dim)} /* graceful fallback where subgrid is unavailable */ @supports not (grid-template-rows: subgrid){ .locations__grid{grid-template-rows:none} .loc{grid-row:auto;display:flex;flex-direction:column} .loc__meta{display:block} .loc__actions{margin-top:auto} } /* ============================ 08 · SPEISEKARTE ================= */ /* ============================ 07b · AWARDS BAND — thin strip ============== */ .awardsband{background:var(--c-bg-2);padding:clamp(2.2rem,5.5vh,3.8rem) var(--pad)} .awardsband__logos{ max-width:var(--container);margin-inline:auto; display:flex;align-items:center;justify-content:center;flex-wrap:wrap; gap:clamp(1.6rem,5vw,4.5rem); } .awardsband__logo{ width:clamp(96px,11vw,150px);height:auto;flex:none;opacity:0; transition:scale .35s var(--ease);will-change:opacity,translate; } .awardsband__logo:hover{scale:1.07} @media (max-width:560px){ .awardsband{padding:clamp(2.2rem,6vh,3rem) var(--pad)} /* vier Logos in EINER Reihe nebeneinander */ .awardsband__logos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,2.5vw,1rem);align-items:center;justify-items:center} .awardsband__logo{width:100%;max-width:86px;height:auto} } /* ============================ 08 · SPEISEKARTE ================= */ .menu{background:var(--menu-bg,var(--c-bg));padding:clamp(5rem,12vh,9rem) 0} .menu .section-title{font-size:clamp(1.5rem,1.1rem + 1.3vw,2.2rem);font-weight:500;line-height:1.4} .menu__filter{ max-width:var(--container);margin:clamp(2rem,5vh,3rem) auto 0;padding-inline:var(--pad); display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center; } .chip{ font-family:var(--ff-sans);font-weight:600;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase; color:var(--cream-70);background:transparent;border:1px solid var(--cream-15); padding:.7em 1.35em;min-height:44px;border-radius:100px;cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .chip:hover{border-color:var(--cream-40);color:var(--c-cream)} .chip.is-active{background:var(--c-cream);color:var(--c-bg);border-color:var(--c-cream)} .menu__legend{ max-width:var(--container);margin:1.4rem auto 0;padding-inline:var(--pad); display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;list-style:none; color:var(--cream-55);font-size:.78rem; } .menu__legend li{display:flex;align-items:center;gap:.5rem} .diet{width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;flex:none} .diet svg{width:13px;height:13px} .diet--veg{background:rgba(144,166,85,.16)} .diet--veg svg{fill:var(--c-olive)} .diet--fish{background:rgba(96,12,19,.14)} .diet--fish svg{fill:var(--c-red)} .diet--spicy{background:rgba(96,12,19,.14)} .diet--spicy svg{fill:var(--c-red)} .menu__layout{ max-width:var(--container);margin:clamp(2.6rem,6vh,4rem) auto 0;padding-inline:var(--pad); display:flex;flex-direction:column;gap:clamp(1.4rem,3.4vh,2.6rem); } .mblock{display:grid;grid-template-columns:7fr 3fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:stretch} .mblock--flip{grid-template-columns:3fr 7fr} .mblock--flip .mblock__media{order:-1} .mblock__panel{ background:var(--c-cream);color:var(--ink);border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.9rem);box-shadow:var(--shadow-card); } .mblock__title{ font-family:var(--ff-serif);font-weight:600;color:var(--ink); font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);margin-bottom:1.2rem; display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap; } .mblock__title:has(+ .mblock__subtitle){margin-bottom:.25rem} .mblock__subtitle{font-family:var(--ff-sans);font-size:.95rem;font-weight:500;color:var(--ink-50);letter-spacing:.03em;margin-bottom:1.3rem} .mgroup__sub{ font-family:var(--ff-sans);font-weight:700;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase; color:var(--ink-50);margin:1.6rem 0 .7rem;padding-bottom:.4rem;border-bottom:1px solid var(--ink-08); } .mgroup:first-of-type .mgroup__sub{margin-top:0} .dish{display:grid;grid-template-columns:1fr auto;column-gap:1.2rem;align-items:baseline;padding:.78rem 0;border-bottom:1px solid var(--ink-08)} .dish:last-child{border-bottom:0;padding-bottom:0} .dish__name{grid-column:1;font-family:var(--ff-serif-2);font-weight:600;font-size:1.22rem;line-height:1.25;color:var(--ink)} .dish__price{grid-column:2;grid-row:1;justify-self:end;font-family:var(--ff-sans);font-weight:600;font-size:.98rem;color:var(--c-red);white-space:nowrap} .dish__desc{grid-column:1;color:var(--ink-70);font-size:.89rem;line-height:1.45;margin-top:.15rem;max-width:52ch} .dish__diet{grid-column:2;grid-row:2;justify-self:end;align-self:start;display:inline-flex;gap:.4rem;margin-top:.3rem} .diet-img{width:25px;height:25px;display:inline-block;vertical-align:middle} .mblock__media{position:relative;border-radius:var(--radius);overflow:hidden;min-height:300px;box-shadow:var(--shadow-card)} .mblock__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .mblock:hover .mblock__media img{transform:scale(1.05)} .mblock__tag{ position:absolute;left:1rem;bottom:1rem;z-index:2; background:rgba(19,19,12,.55);backdrop-filter:blur(6px);color:var(--c-cream); font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600; padding:.5em .9em;border-radius:100px; } /* filter animation */ .mblock.is-hidden{display:none} .mblock.is-enter{animation:blockIn .5s var(--ease-out) both} @keyframes blockIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} /* ============================ 08c · GALERIE (Expand-Strip) ===== */ /* Rechteckige Bilder in einer Reihe (linde-rotkreuz-Effekt): Mitte breit und hell, Nachbarn als schmale, gedimmte Streifen. Beim Wechsel wachsen bzw. schrumpfen die Spalten weich (animiertes flex-grow). Pfeile liegen halbtransparent über den Bildern. */ /* Strip sitzt als Grid-Item IM Instagram-Raster (Zeile 2, volle Breite) → gleiche Lücken wie zwischen den Kacheln, bündige Kanten, aus einem Guss. */ .agal{ grid-column:1 / -1;order:2;overflow:hidden; --sgap:clamp(.5rem,1.4vw,1rem); --col:calc((100% - 4 * var(--sgap)) / 4); --center:calc(2 * var(--col) + var(--sgap)); } .social__tile:nth-child(-n+4){order:1} .social__tile:nth-child(n+5){order:3} .agal__frame{position:relative;width:100%} .agal__stage{ display:flex;align-items:stretch; height:clamp(280px,48vw,580px); margin-inline:calc(var(--sgap) / -2); touch-action:pan-y;user-select:none;-webkit-user-select:none; } .agal__card{ flex:0 0 0px;min-width:0;margin:0;opacity:0;pointer-events:none; border-radius:12px;overflow:hidden; transition:flex-basis 1.05s cubic-bezier(.22,1,.36,1),flex-grow 1.05s cubic-bezier(.22,1,.36,1),margin 1.05s cubic-bezier(.22,1,.36,1),opacity .55s var(--ease); will-change:flex-basis,flex-grow; } .agal__card img{ width:100%;height:100%;object-fit:cover;display:block;pointer-events:none; filter:brightness(.52) saturate(.9); transition:filter 1.05s cubic-bezier(.22,1,.36,1); } /* Sichtreihenfolge unabhängig von der DOM-Reihenfolge — Mitte bleibt mittig */ .agal__card.is-offl{order:0} .agal__card.is-l2{order:1} .agal__card.is-l1{order:2} .agal__card.is-c{order:3} .agal__card.is-r1{order:4} .agal__card.is-r2{order:5} .agal__card.is-offr{order:6} /* Mitte = exakt quadratisch (Breite == Striphöhe) → volles Bild, kein Crop-Zoom. Die Seitenspalten füllen den Rest der Grid-Breite (l1 doppelt so breit wie l2), Lückenmaß = Gap des Instagram-Grids → bündige Außenkanten, aus einem Guss. */ .agal__card.is-c{flex:0 0 var(--center);opacity:1;margin-inline:calc(var(--sgap) / 2)} .agal__card.is-c img{filter:none} .agal__card.is-l1,.agal__card.is-r1{flex:0 0 var(--col);opacity:1;margin-inline:calc(var(--sgap) / 2);pointer-events:auto;cursor:pointer} .agal__card.is-l1 img,.agal__card.is-r1 img{filter:brightness(.68) saturate(.95)} .agal__card.is-l2,.agal__card.is-r2{flex:0 0 0px;opacity:0;margin:0;pointer-events:none} .agal__nav{ position:absolute;top:50%;translate:0 -50%;z-index:6; width:52px;height:52px;border-radius:50%;border:0;cursor:pointer; display:grid;place-items:center;color:var(--c-cream); background:rgba(19,19,12,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); opacity:.78;transition:opacity .3s var(--ease),background .3s var(--ease); } .agal__nav:hover{opacity:1;background:rgba(19,19,12,.5)} .agal__nav:focus-visible{outline:2px solid var(--c-olive);outline-offset:3px;opacity:1} .agal__nav svg{width:30px;height:auto;display:block} .agal__nav--prev{left:clamp(.9rem,2.2vw,1.8rem)} .agal__nav--next{right:clamp(.9rem,2.2vw,1.8rem)} @media (max-width:640px){ /* Mobile: echter Coverflow statt Expand-Strip — eine große aktive Bogenkarte mittig, Nachbarn kleiner skaliert, dunkler und seitlich angeschnitten. sizeToGrid() in js/main.js setzt mobil bewusst KEINE Inline-Maße mehr. */ .agal__stage{display:grid;place-items:center;height:clamp(300px,80vw,400px);margin-inline:0} .agal__card{ grid-area:1/1;width:66%;max-width:300px;height:90%;margin:0; opacity:0;pointer-events:none; transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .55s var(--ease); } .agal__card img{transition:filter .8s cubic-bezier(.22,1,.36,1)} .agal__card.is-c{transform:translateX(0) scale(1);opacity:1;z-index:5; border-radius:48% 48% 18px 18px / 33% 33% 7% 7%} .agal__card.is-c img{filter:none} .agal__card.is-l1,.agal__card.is-r1{opacity:1;z-index:4;pointer-events:auto;cursor:pointer; border-radius:46% 46% 16px 16px / 30% 30% 6% 6%} .agal__card.is-l1{transform:translateX(-66%) scale(.74)} .agal__card.is-r1{transform:translateX(66%) scale(.74)} .agal__card.is-l1 img,.agal__card.is-r1 img{filter:brightness(.46) saturate(.85)} .agal__card.is-l2{transform:translateX(-112%) scale(.55);opacity:.5;z-index:3} .agal__card.is-r2{transform:translateX(112%) scale(.55);opacity:.5;z-index:3} .agal__card.is-l2 img,.agal__card.is-r2 img{filter:brightness(.36) saturate(.8)} .agal__card.is-offl,.agal__card.is-offr{transform:scale(.45);opacity:0;pointer-events:none} .agal__nav{width:44px;height:44px} } @media (prefers-reduced-motion:reduce){ .agal__card,.agal__card img,.agal__nav{transition:none} } /* ============================ 08d · PRESSE — Pressestimmen-Banner = */ /* Schmaler Banner im helleren Grün (wie der Auszeichnungs-Balken). Eine Stimme sichtbar; Wechsel als ruhiger Slide/Fade — keine Nachbarn. */ .press{background:var(--c-bg-2);color:var(--c-cream);overflow:hidden} .press__inner{max-width:var(--container);margin-inline:auto;padding:clamp(1.7rem,3.6vh,2.6rem) var(--pad)} .press__head{text-align:center;margin:0 auto clamp(.7rem,1.8vh,1.2rem)} .press__head .eyebrow{color:var(--c-olive)} .press__viewport{position:relative;width:100%;display:flex;align-items:center;justify-content:center} .press__stage{position:relative;display:grid;width:100%;place-items:center; touch-action:pan-y;user-select:none;-webkit-user-select:none} .press__stage:focus-visible{outline:2px solid var(--c-olive);outline-offset:6px;border-radius:6px} .press__card{ grid-area:1/1;width:100%;max-width:820px;justify-self:center;align-self:stretch; display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center; gap:clamp(.5rem,1.3vh,.85rem);padding-inline:clamp(.5rem,4vw,2.5rem); opacity:0;transform:translateY(10px) scale(.965);pointer-events:none;z-index:1; transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1); will-change:opacity,transform; } .press__card.is-active{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;z-index:2} .press__card.is-pre-right,.press__card.is-pre-left{opacity:0;transform:translateY(10px) scale(.965);transition:none} .press__card.is-exit-left,.press__card.is-exit-right{opacity:0;transform:translateY(-10px) scale(1.015)} .press__title{font-family:var(--ff-serif);font-weight:700;font-style:italic;color:var(--c-cream);font-size:clamp(1.22rem,1rem + .95vw,1.7rem);line-height:1.28;letter-spacing:-.005em;margin:0} .press__quote{font-family:var(--ff-serif-2);font-weight:500;color:var(--cream-90);font-size:clamp(1.02rem,1rem + .45vw,1.22rem);line-height:1.5;margin:0;white-space:pre-line;max-width:66ch} .press__source{font-family:var(--ff-sans);font-weight:700;color:var(--c-olive);letter-spacing:.08em;font-size:.9rem;margin:.15rem 0 0} .press__nav{ position:absolute;top:50%;translate:0 -50%;z-index:10; background:transparent;border:0;cursor:pointer;color:var(--cream-55); width:clamp(38px,5vw,60px);height:52px;display:grid;place-items:center; transition:color .3s var(--ease); } .press__nav svg{width:100%;height:auto;display:block} .press__nav:hover{color:var(--c-cream)} .press__nav--prev{left:clamp(.2rem,2vw,1.6rem)} .press__nav--next{right:clamp(.2rem,2vw,1.6rem)} .press__nav:focus-visible{outline:2px solid var(--c-olive);outline-offset:4px;border-radius:4px;color:var(--c-cream)} .press__meta{ max-width:340px;margin:clamp(1.2rem,2.8vh,1.8rem) auto 0;padding-inline:var(--pad); display:flex;flex-direction:column;align-items:center;gap:.8rem; } .press__counter{font-family:var(--ff-sans);font-weight:600;color:var(--cream-55);letter-spacing:.18em;font-size:.82rem;font-variant-numeric:tabular-nums} .press__progress{display:block;width:min(220px,62vw);height:1px;background:var(--cream-15);overflow:hidden} .press__progress-bar{display:block;height:100%;width:100%;background:var(--c-red);transform-origin:left center;transform:scaleX(.1);transition:transform .8s cubic-bezier(.22,1,.36,1)} @media (max-width:760px){ .press__inner{padding:clamp(1.5rem,4vh,2.2rem) var(--pad)} .press__card{max-width:100%;padding-inline:clamp(1.4rem,7vw,2.2rem)} .press__title{font-size:clamp(1.16rem,1rem + 1.6vw,1.5rem)} .press__nav--prev{left:-.3rem} .press__nav--next{right:-.3rem} } @media (prefers-reduced-motion:reduce){ .press__card{transition:opacity .25s linear} .press__card.is-pre-right,.press__card.is-pre-left, .press__card.is-exit-left,.press__card.is-exit-right{transform:none} .press__progress-bar{transition:none} .press__nav{transition:color .2s linear} } /* ============================ 09 · SOCIAL ====================== */ .social{background:var(--c-bg);padding:clamp(5rem,12vh,9rem) 0 clamp(3.5rem,8vh,5.5rem)} .social .section-title{font-size:clamp(1.5rem,1.1rem + 1.3vw,2.2rem);font-weight:500;line-height:1.4} .social .section-head .btn{margin-top:1.8rem} .social__grid{ max-width:var(--container);margin:clamp(2.6rem,6vh,4rem) auto 0;padding-inline:var(--pad); display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,1.4vw,1rem); } .social__tile{position:relative;aspect-ratio:1;overflow:hidden;border-radius:12px;display:block;background:var(--c-bg-2); border:0;padding:0;width:100%;cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent} .social__tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .social__tile::before{content:"";position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .35s var(--ease); background:linear-gradient(to top,rgba(19,19,12,.6),rgba(19,19,12,.05) 60%)} .social__badge{position:absolute;inset:0;z-index:2;display:grid;place-items:center;opacity:0;transform:scale(.85);transition:opacity .35s var(--ease), transform .35s var(--ease)} .social__badge::after{content:"";width:30px;height:30px;background:var(--c-cream); -webkit-mask:var(--badge-mask) center/contain no-repeat;mask:var(--badge-mask) center/contain no-repeat} .social__badge--ig{--badge-mask:var(--ig-mask)} .social__badge--zoom{--badge-mask:var(--zoom-mask)} .social__tile:hover img,.social__tile:focus-visible img{transform:scale(1.08)} .social__tile:hover::before,.social__tile:focus-visible::before{opacity:1} .social__tile:hover .social__badge,.social__tile:focus-visible .social__badge{opacity:1;transform:none} :root{--ig-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.43.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s0 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.43.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58 0-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.43-.36-1.06-.41-2.23C2.21 15.58 2.2 15.2 2.2 12s0-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.43-.16 1.06-.36 2.23-.41C8.42 2.21 8.8 2.2 12 2.2Zm0 1.8c-3.15 0-3.5 0-4.74.07-.9.04-1.38.19-1.71.32-.43.17-.74.37-1.06.69-.32.32-.52.63-.69 1.06-.13.33-.28.81-.32 1.71C3.4 8.5 3.4 8.85 3.4 12s0 3.5.07 4.74c.04.9.19 1.38.32 1.71.17.43.37.74.69 1.06.32.32.63.52 1.06.69.33.13.81.28 1.71.32 1.24.07 1.59.07 4.74.07s3.5 0 4.74-.07c.9-.04 1.38-.19 1.71-.32.43-.17.74-.37 1.06-.69.32-.32.52-.63.69-1.06.13-.33.28-.81.32-1.71.07-1.24.07-1.59.07-4.74s0-3.5-.07-4.74c-.04-.9-.19-1.38-.32-1.71a2.85 2.85 0 0 0-.69-1.06 2.85 2.85 0 0 0-1.06-.69c-.33-.13-.81-.28-1.71-.32C15.5 4 15.15 4 12 4Zm0 3.06A4.94 4.94 0 1 1 12 16.94 4.94 4.94 0 0 1 12 7.06Zm0 1.8a3.14 3.14 0 1 0 0 6.28 3.14 3.14 0 0 0 0-6.28Zm5.15-3.2a1.15 1.15 0 1 1 0 2.3 1.15 1.15 0 0 1 0-2.3Z'/%3E%3C/svg%3E")} /* ----- Galerie-Lightbox (Speisen-Bilder groß) ----- */ :root{--zoom-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 9V4h5v2H6v3H4zm11-5h5v5h-2V6h-3V4zM6 15v3h3v2H4v-5h2zm12 0h2v5h-5v-2h3v-3z'/%3E%3C/svg%3E")} .lightbox{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem); background:rgba(10,10,7,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); opacity:0;transition:opacity .35s var(--ease)} .lightbox[hidden]{display:none} .lightbox.is-open{opacity:1} .lightbox__figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.9rem; max-width:min(1100px,92vw);transform:scale(.96);transition:transform .35s var(--ease)} .lightbox.is-open .lightbox__figure{transform:none} .lightbox__figure img{display:block;max-width:100%;max-height:80svh;width:auto;height:auto;object-fit:contain; border-radius:10px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)} .lightbox__cap{font-family:var(--ff-serif-2);font-style:italic;color:var(--cream-70);font-size:1.05rem;text-align:center;max-width:60ch} .lightbox__close{position:absolute;top:clamp(.7rem,3vw,1.5rem);right:clamp(.7rem,3vw,1.5rem); width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center; background:rgba(244,239,230,.1);color:var(--c-cream);transition:background .25s var(--ease)} .lightbox__close:hover{background:rgba(244,239,230,.22)} .lightbox__close svg{width:22px;height:22px} .lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;background:transparent; color:var(--cream-55);cursor:pointer;display:grid;place-items:center;transition:color .25s var(--ease)} .lightbox__nav:hover{color:var(--c-cream)} .lightbox__nav svg{width:30px;height:30px} .lightbox__nav--prev{left:clamp(.3rem,2vw,1.6rem)} .lightbox__nav--next{right:clamp(.3rem,2vw,1.6rem)} .lightbox button:focus-visible{outline:2px solid var(--c-olive);outline-offset:3px;border-radius:8px} body.lightbox-open{overflow:hidden} @media (prefers-reduced-motion:reduce){ .lightbox,.lightbox__figure{transition:opacity .2s linear} .lightbox__figure{transform:none} } /* ===== Veranstaltungen: kompaktes, zentriertes Accordion (Seiten-Stil) ===== */ .events{background:var(--c-cream);color:var(--ink)} .events__box{max-width:var(--container);margin-inline:auto} .events__header{display:block;width:100%;background:none;border:0;padding:clamp(3.5rem,8vh,5.5rem) var(--pad) clamp(1.4rem,3.5vh,2rem); cursor:pointer;position:relative;font:inherit;color:inherit;text-align:center} .events__head{margin-bottom:0} .events .eyebrow{color:var(--c-red)} .events__title{color:var(--ink);font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem)} .events__title em{color:var(--c-red)} .events__subtitle{color:var(--ink-70);font-size:.98rem} .events__toggle{position:relative;margin:clamp(1.6rem,3.5vh,2.2rem) auto 0; width:46px;height:46px;border-radius:50%;border:1px solid var(--ink-15);background:var(--c-cream); display:grid;place-items:center;transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .25s var(--ease),background .25s var(--ease)} .events__header:hover .events__toggle{border-color:var(--c-red);background:var(--c-red)} .events__header:hover .events__toggle-icon{color:var(--c-cream)} .events__header:focus-visible{outline:2px solid var(--c-red);outline-offset:-4px} .events__toggle-icon{width:18px;height:18px;stroke-width:2.5;color:var(--ink);transition:color .25s var(--ease)} .events__box.is-expanded .events__toggle{transform:rotate(180deg)} /* Accordion: Höhe UND Fade animieren — Inhalt gleitet sanft ein statt nur aufzuklappen */ .events__content{max-height:0;overflow:hidden;opacity:0; transition:max-height .6s cubic-bezier(.22,1,.36,1),opacity .4s ease} .events__box.is-expanded .events__content{opacity:1;transition:max-height .6s cubic-bezier(.22,1,.36,1),opacity .5s ease .12s} .events__inner{max-width:var(--container);margin-inline:auto;padding:0 var(--pad) clamp(3rem,7vh,4.5rem); display:grid;grid-template-columns:.85fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center; transform:translateY(10px);transition:transform .5s cubic-bezier(.22,1,.36,1)} .events__box.is-expanded .events__inner{transform:translateY(0)} /* Großes editoriales Zitat — mirrors .story__quote, spiegelverkehrt (Linie links) */ .events__quote-col{display:flex;justify-content:center} .events__quote{ font-family:var(--ff-serif);font-weight:600;color:var(--ink); font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem);line-height:1.14;letter-spacing:-.01em; border-left:2px solid var(--c-red);padding-left:clamp(1.3rem,2.5vw,2rem);margin:0; } .events__quote em{font-family:var(--ff-serif-2);font-style:italic;font-weight:500;color:var(--c-red)} .events__copy{text-align:left} .events__copy::before{content:"";display:block;width:44px;height:1px;background:var(--c-red);opacity:.45;margin:0 0 clamp(1.6rem,4vh,2.2rem)} .events__list{list-style:none;counter-reset:evt;padding:0;margin:0 0 clamp(1.8rem,4vh,2.4rem);display:grid;gap:.75rem} .events__list li{counter-increment:evt;display:flex;align-items:baseline;gap:1rem; font-family:var(--ff-serif-2);font-weight:600;font-size:1.15rem;line-height:1.4;color:var(--ink)} .events__list li::before{content:counter(evt,decimal-leading-zero);flex-shrink:0;width:1.5rem; font-family:var(--ff-serif-2);font-style:italic;font-weight:500;font-size:1rem;color:var(--c-red)} .events__details{display:flex;gap:2.4rem;margin:0 0 clamp(1.8rem,4vh,2.4rem);padding-top:clamp(1.6rem,4vh,2.2rem); border-top:1px solid var(--ink-15)} .events__detail-item{flex:1;min-width:0} .events__detail-item dt{font-family:var(--ff-sans);font-size:.68rem;font-weight:600;color:var(--c-red); text-transform:uppercase;letter-spacing:.16em;margin-bottom:.5rem} .events__detail-item dd{font-family:var(--ff-serif-2);font-size:1.02rem;line-height:1.5;color:var(--ink-70);margin:0} .events__closing{font-family:var(--ff-serif-2);font-style:italic;font-size:1.08rem;color:var(--ink-50);margin:0 0 1.8rem} @media (max-width:820px){ .events__inner{grid-template-columns:1fr;text-align:center;gap:0} /* Grid-Row-Gap raus — Abstände werden unten exakt gesetzt */ .events__quote-col{margin:0 0 1.8rem} .events__quote{border:0;padding:0;font-family:var(--ff-serif);font-size:1.5rem;line-height:1.35; font-weight:600;color:var(--ink);max-width:26ch;margin-inline:auto} .events__quote em{font-family:inherit;font-weight:inherit;font-size:inherit;font-style:italic;color:var(--c-red)} .events__quote-br{display:none} /* poetische Zeilenumbrüche nur Desktop — mobil fließt der Satz natürlich in 1–2 Zeilen */ .events__copy{text-align:center} .events__copy::before{margin:0 auto 1.8rem} .events__list li{justify-content:center} .events__details{text-align:left} } @media (prefers-reduced-motion:reduce){ .events__content,.events__toggle,.events__inner{transition:none} } /* ============================ 10 · FOOTER ===================== */ .footer{background:var(--c-bg);border-top:1px solid var(--cream-08);padding:clamp(4rem,9vh,6.5rem) var(--pad) 2rem} .footer__top{max-width:var(--container);margin-inline:auto;display:grid;grid-template-columns:1.7fr 1fr 1.2fr 1.2fr;gap:clamp(2rem,5vw,4rem)} .footer__logo{width:190px;height:auto;margin-bottom:1.1rem} .footer__tag{color:var(--cream-55);font-family:var(--ff-serif-2);font-style:italic;font-size:1.12rem} .footer__mail{display:inline-block;margin-top:1rem;color:var(--cream-70);font-size:.92rem;border-bottom:1px solid var(--cream-15);padding-bottom:2px;transition:color .25s,border-color .25s} .footer__mail:hover{color:var(--c-cream);border-color:var(--c-cream)} .footer__social{display:flex;gap:.8rem;margin-top:1.5rem} .footer__social a{width:42px;height:42px;border:1px solid var(--cream-15);border-radius:50%;display:grid;place-items:center;transition:background .25s,border-color .25s} .footer__social svg{width:18px;height:18px;fill:var(--cream-70);transition:fill .25s} .footer__social a:hover{background:var(--c-cream);border-color:var(--c-cream)} .footer__social a:hover svg{fill:var(--c-bg)} .footer h4{font-family:var(--ff-sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-olive);margin-bottom:1.2rem} .footer__nav{display:flex;flex-direction:column;gap:.7rem} .footer__nav a,.footer__loc a{color:var(--cream-70);transition:color .25s} .footer__nav a:hover,.footer__loc a:hover{color:var(--c-cream)} .footer__loc p{color:var(--cream-55);margin-bottom:.85rem;font-size:.95rem} .footer__hours{font-size:.85rem;color:var(--cream-40)!important} .footer__bar{ max-width:var(--container);margin:clamp(3rem,6vh,5rem) auto 0;padding-top:1.6rem; border-top:1px solid var(--cream-08); display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap; color:var(--cream-40);font-size:.8rem; } .footer__legal{display:flex;gap:1.4rem} .footer__legal a{transition:color .25s} .footer__legal a:hover{color:var(--c-cream)} /* ============================ 11 · RESPONSIVE ================= */ @media (max-width:960px){ .nav__links,.nav__cta{display:none} .nav__toggle{display:flex} .locations__grid{display:flex;flex-direction:column;gap:clamp(4rem,10vw,5rem);max-width:560px} .loc{display:flex;flex-direction:column} .loc__meta{display:block} .mblock{grid-template-columns:1fr} /* min-height + aspect-ratio zusammen triggert auf iOS Safari ein Überbreiten der Box (Breite aus Höhe×Ratio). Höhe NUR über aspect-ratio → Breite bleibt an die Spalte gebunden, nie breiter als das Panel. */ .mblock__media{min-height:0;aspect-ratio:16/10;width:100%} .mblock--flip .mblock__media{order:0} .footer__top{grid-template-columns:1fr 1fr} .footer__brand{grid-column:1 / -1} } @media (max-width:640px){ .social__grid{grid-template-columns:repeat(2,1fr)} .footer__top{grid-template-columns:1fr;gap:clamp(2.2rem,8vw,3rem)} .footer__bar{flex-direction:column;align-items:flex-start;gap:.9rem} /* phone numbers as comfortable ≥44px tap targets */ .loc__row dd a[href^="tel:"],.footer__loc a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px} } @media (max-width:400px){ .loc__actions .btn{width:100%} } /* nav open state locks scroll via body class */ body.nav-open{overflow:hidden} /* ---- Legal pages (Impressum / Datenschutz) ---- */ .legal{max-width:780px;margin-inline:auto;padding:calc(var(--nav-h) + 4rem) var(--pad) 5rem} .legal__back{display:inline-flex;align-items:center;gap:.5rem;color:var(--cream-55);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:2.6rem;transition:color .25s} .legal__back:hover{color:var(--c-cream)} .legal h1{font-family:var(--ff-serif);font-weight:600;font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1.8rem;line-height:1.05} .legal h2{font-family:var(--ff-serif);font-weight:600;font-size:1.45rem;margin:2.6rem 0 .8rem;color:var(--c-cream)} .legal p,.legal li{color:var(--cream-70);margin-bottom:1rem;max-width:62ch} .legal ul{padding-left:1.2rem} .legal a{color:var(--c-olive)} .legal a:hover{text-decoration:underline} .legal .ph{color:var(--c-olive);background:rgba(144,166,85,.08);border:1px dashed rgba(144,166,85,.45);padding:.05em .5em;border-radius:6px} .legal__note{margin-top:3rem;padding:1.1rem 1.4rem;border-left:2px solid var(--c-red);background:var(--cream-08);color:var(--cream-70);font-size:.9rem;border-radius:0 10px 10px 0} /* When body marked loaded we could gate animations; hero uses CSS anim directly */ /* ============================ 12 · REDUCED MOTION ============= */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } html{scroll-behavior:auto} .reveal{opacity:1!important;transform:none!important} .awardsband__logo{opacity:1!important;transform:none!important} .hlayer{transform:scale(1.06)} /* keep the aligned static composite */ .hlayer--logo{transform:scale(1)} .hero__scroll{animation:none!important;opacity:1!important;transform:translateX(-50%)!important} /* Geschichte becomes a static dark still (Düsseldorf end-state) */ .story__track{height:auto} .story__pin{position:static;min-height:auto} .arch__img--to{opacity:1} } /* ===== Top of page (desktop, motion-OK): the Geschichte runs cream→dark, so the Awards bar is cream to read as one surface with it, sitting as a soft panel below the hero (no dark gap band). On mobile / reduced-motion the Geschichte is a dark still, so the Awards stay dark there (base styles). ===== */ @media (min-width:961px) and (prefers-reduced-motion:no-preference){ /* Hero pins via its own runway (.hero__track), exactly like the Geschichte pin */ .hero{height:auto;overflow:visible;z-index:0} .hero__track{position:relative;height:200svh} .hero__scene{position:sticky;inset:auto;top:0;height:100svh;overflow:hidden} .hero::after{display:none} /* no mask needed — the rising curtain covers the bottom */ /* Awards + Geschichte = cream curtain that rises over the pinned hero from the start */ .awards{ background:#ECE7D8;position:relative;z-index:1;margin-top:-100svh; padding:clamp(1.9rem,4vh,2.8rem) var(--pad) clamp(1.3rem,3.2vh,2.2rem); border-block:0;border-radius:34px 34px 0 0; box-shadow:0 -36px 80px -20px rgba(19,19,12,.5), inset 0 1px 0 rgba(255,255,255,.45); } .awards__bar{color:var(--ink-70)} .stars__base{color:var(--ink-15)} .stars__fill{color:var(--c-red)} .awards__score{color:var(--ink-50)} .awards__score strong{color:var(--ink)} .awards__count{color:var(--ink-50)} .awards__count .num{color:var(--ink)} .awards__src{color:var(--ink-50)} .awards__dot{background:var(--ink-15)} /* Geschichte stays pinned + acts as the runway for the Locations curtain */ .story{position:relative;z-index:1} .story__track{height:300vh} /* Locations: rises over the Geschichte (curtain) AND pins for its own green→Sicily theme */ .locations{ position:relative;z-index:2;margin-top:-100vh; border-radius:34px 34px 0 0; box-shadow:0 -36px 80px -20px rgba(0,0,0,.6); } .locations__track{height:300vh} .locations__pin{position:sticky;top:0;border-radius:34px 34px 0 0; padding-block:clamp(2rem,4.5vh,3.2rem)} /* compact the pinned layout so the whole section fits one screen */ .loc__media{aspect-ratio:16/9;margin-bottom:.75rem} .loc__tagline{font-size:1rem;line-height:1.32;margin-bottom:.7rem} .loc__name{margin-bottom:.3rem} .loc__meta{margin-bottom:.85rem} .loc__row{padding:.5rem 0} .loc__row dd{line-height:1.42} .locations__grid{margin-top:clamp(2rem,4.5vh,2.8rem)} /* Thin awards band rises over the held Standorte (after its fade completes), runs along — no pin. Flat top (no radius) so the light Standorte can't peek through rounded corners. */ .awardsband{position:relative;z-index:3;margin-top:-30vh; box-shadow:0 -30px 70px -25px rgba(0,0,0,.55)} /* Speisekarte follows the band (margin 0 so it never swallows the thin banner). Flat top (no radius) so nothing light peeks through rounded corners. */ .menu{position:relative;z-index:4;margin-top:0; box-shadow:0 -36px 80px -20px rgba(0,0,0,.6)} /* Speisekarte hält am Ende fest (Sticky-Pin mit negativem top, weil die Sektion höher als der Viewport ist; top berechnet js/main.js) — der Instagram-Bereich (inkl. Galerie-Strip) schiebt sich mit runden Ecken darüber. */ .menu{padding-bottom:60vh} .menu__pin{position:sticky;padding-bottom:clamp(5rem,12vh,9rem)} /* Presse = schmaler Pressestimmen-Banner: schiebt sich über die gehaltene Speisekarte (wie der Auszeichnungs-Balken), ohne selbst zu pinnen. */ .press{position:relative;z-index:5;margin-top:-60vh;border-radius:34px 34px 0 0; box-shadow:0 -36px 80px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(244,239,230,.10)} /* Social folgt bündig (flache Kante, kein Eckspalt über dem Grün). */ .social{position:relative;z-index:6;margin-top:0; box-shadow:0 -30px 70px -22px rgba(0,0,0,.5), inset 0 1px 0 rgba(244,239,230,.10)} } /* ===== Mobile/Tablet (≤960, Motion-OK): die Creme-Bewertungsleiste fährt von unten über den gepinnten Hero (gleicher Mechanismus wie Desktop); die Geschichte morpht danach scroll-gekoppelt hell→dunkel inkl. Arch-Crossfade (JS). Bei reduced-motion bleibt alles statisch (Basis-Styles). ===== */ @media (max-width:960px) and (prefers-reduced-motion:no-preference){ .hero{height:auto;overflow:visible;z-index:0} .hero__track{position:relative;height:200svh} .hero__scene{position:sticky;inset:auto;top:0;height:100svh;overflow:hidden} .hero::after{display:none} .awards{ background:#ECE7D8;position:relative;z-index:2;margin-top:-100svh; padding:clamp(1.7rem,5vh,2.5rem) var(--pad); border-block:0;border-radius:28px 28px 0 0; box-shadow:0 -34px 70px -22px rgba(19,19,12,.5), inset 0 1px 0 rgba(255,255,255,.45); } .awards__bar{color:var(--ink-70)} .stars__base{color:var(--ink-15)} .stars__fill{color:var(--c-red)} .awards__score{color:var(--ink-50)} .awards__score strong{color:var(--ink)} .awards__count{color:var(--ink-50)} .awards__count .num{color:var(--ink)} .awards__src{color:var(--ink-50)} .awards__dot{background:var(--ink-15)} /* Geschichte schließt cremefarben an die Leiste an und liegt über dem Hero */ .story{position:relative;z-index:2} /* Geschichte hält am Ende fest: JS gibt dem Track eine EXPLIZITE Höhe (Inhalt + 60svh) — exakt wie der funktionierende Hero-Track; reines padding-bottom liefert auf iOS Safari keinen Sticky-Travel. */ .story__pin{position:sticky} .locations{position:relative;z-index:3;margin-top:-60svh;overflow:hidden; border-radius:30px 30px 0 0;box-shadow:0 -30px 64px -22px rgba(0,0,0,.55)} } /* ============================ 13 · FEINSCHLIFF ================= */ ::selection{background:var(--c-red);color:var(--c-cream)} html{scrollbar-color:var(--c-bg-2) var(--c-bg)} ::-webkit-scrollbar{width:12px} ::-webkit-scrollbar-track{background:var(--c-bg)} ::-webkit-scrollbar-thumb{background:var(--c-bg-2);border-radius:8px;border:3px solid var(--c-bg)} .section-title{text-wrap:balance} a[href^="tel:"]{display:inline-block;padding:.4em .15em;margin:-.4em -.15em}