/* ============================================================ HOESCHKIND — Die Fleischmanufaktur · Dortmund Premium Design System · Industrial-Luxe Steakhouse Dark · warm · gold/copper · ember fire accents ============================================================ */ /* ---- Fonts ---- */ /* Fraunces (display serif, characterful luxury) + Hanken Grotesk (body) */ /* loaded via in for performance */ /* ---- Tokens ---- */ :root{ /* warm near-blacks */ --char:#0c0a09; --char-2:#100c0a; --coal:#171210; --smoke:#1e1714; --smoke-2:#27201a; --smoke-3:#322820; /* warm text */ --cream:#f5ede1; --ash:#b6aa99; --ash-2:#8b7e6e; /* accents */ --gold:#c9a462; --gold-bright:#e7ca87; --gold-deep:#9a7a3e; --ember:#e2542a; --ember-bright:#ff6f41; --blood:#7c241c; --blood-bright:#aa342a; /* lines */ --line:rgba(201,164,98,.18); --line-soft:rgba(245,237,225,.08); --line-strong:rgba(201,164,98,.4); /* glows / shadows */ --glow-ember:rgba(226,84,42,.5); --glow-gold:rgba(201,164,98,.35); --shadow-s:0 2px 12px rgba(0,0,0,.4); --shadow-m:0 26px 60px -28px rgba(0,0,0,.85); --shadow-l:0 50px 110px -45px rgba(0,0,0,.92); --shadow-gold:0 30px 70px -30px rgba(201,164,98,.25); /* radii */ --r-s:8px; --r-m:14px; --r-l:22px; --r-xl:34px; /* motion */ --ease:cubic-bezier(.16,1,.3,1); --ease-2:cubic-bezier(.7,0,.2,1); --ease-out:cubic-bezier(.23,1,.32,1); --nav-h:80px; --maxw:1300px; --f-display:'Fraunces', Georgia, serif; --f-body:'Hanken Grotesk', system-ui, sans-serif; } /* ---- Reset ---- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 20px)} body{ font-family:var(--f-body); background:var(--char); color:var(--cream); line-height:1.65; font-size:17px; font-weight:400; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} ul{list-style:none} input,textarea,select{font-family:inherit;font-size:inherit;color:inherit} [hidden]{display:none!important} ::selection{background:var(--ember);color:#fff} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px} @media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .parallax{transform:none!important} } /* ---- Atmosphere: grain + ember glows ---- */ .grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.045;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ---- Layout helpers ---- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,52px)} .section{padding-block:clamp(72px,11vw,150px);position:relative} /* Skip rendering off-screen sections — big paint/scroll perf win, zero visual change */ .section,.menu-cat,.faq__item{content-visibility:auto;contain-intrinsic-size:auto 700px} .menu-cat{contain-intrinsic-size:auto 1200px} .faq__item{contain-intrinsic-size:auto 80px} .section--tight{padding-block:clamp(50px,7vw,96px)} .section--glow::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(60% 50% at 80% 0%,rgba(226,84,42,.1),transparent 70%)} .section>.wrap{position:relative;z-index:1} /* ---- Typography ---- */ h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.02;letter-spacing:-.015em;color:var(--cream);font-optical-sizing:auto} .display{font-size:clamp(3rem,8.5vw,7rem);font-weight:600;line-height:.95;letter-spacing:-.025em} .h-xl{font-size:clamp(2.3rem,5.2vw,4.2rem);line-height:1.02} .h-l{font-size:clamp(1.9rem,3.6vw,3rem)} .h-m{font-size:clamp(1.4rem,2.4vw,2rem)} .lead{font-size:clamp(1.08rem,1.55vw,1.32rem);color:var(--ash);max-width:60ch;line-height:1.7} .italic{font-style:italic} em.gold,.text-gold{color:var(--gold);font-style:normal} em.glow{font-style:italic;color:var(--gold-bright)} /* Eyebrow / kicker */ .kicker{display:inline-flex;align-items:center;gap:.7em;font-family:var(--f-body);font-size:.74rem; letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:600} .kicker::before{content:"";width:30px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);display:inline-block} .kicker--center::after{content:"";width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));display:inline-block} .kicker--center{justify-content:center} /* Section head */ .shead{margin-bottom:clamp(40px,5vw,72px)} .shead.center{text-align:center;max-width:760px;margin-inline:auto} .shead h2{margin-top:18px} .shead p{margin-top:20px} .shead.center p{margin-inline:auto} .shead--row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap} /* ---- Buttons ---- */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px; font-family:var(--f-body);font-weight:600;font-size:.96rem;letter-spacing:.01em; padding:16px 30px;border-radius:100px;cursor:pointer;overflow:hidden; transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease); white-space:nowrap} .btn svg{width:18px;height:18px;transition:transform .45s var(--ease)} .btn:hover svg{transform:translateX(4px)} .btn--primary{background:linear-gradient(115deg,var(--ember),#c8401b);color:#1c0e08;font-weight:700; box-shadow:0 18px 44px -16px var(--glow-ember)} .btn--primary:hover{transform:translateY(-3px);box-shadow:0 26px 60px -16px var(--glow-ember)} .btn--gold{background:linear-gradient(115deg,var(--gold-bright),var(--gold));color:#1c1208;font-weight:700; box-shadow:0 18px 44px -18px var(--glow-gold)} .btn--gold:hover{transform:translateY(-3px);box-shadow:0 26px 60px -18px var(--glow-gold)} .btn--ghost{background:rgba(245,237,225,.04);border:1.5px solid var(--line-strong);color:var(--cream);backdrop-filter:blur(8px)} .btn--ghost:hover{background:rgba(245,237,225,.1);border-color:var(--gold);transform:translateY(-3px)} .btn--light{background:var(--cream);color:#1c1208;font-weight:700} .btn--light:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)} .btn--sm{padding:11px 20px;font-size:.86rem} .btn--lg{padding:19px 38px;font-size:1.02rem} /* text link with arrow */ .tlink{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.92rem;color:var(--gold); letter-spacing:.02em;transition:gap .4s var(--ease),color .3s} .tlink svg{width:17px;height:17px;transition:transform .4s var(--ease)} .tlink:hover{color:var(--gold-bright)} .tlink:hover svg{transform:translateX(5px)} /* ---- Surfaces ---- */ .glass{background:linear-gradient(160deg,rgba(38,30,24,.7),rgba(20,15,12,.5)); backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%); border:1px solid var(--line)} /* ============================================================ NAV ============================================================ */ .nav{position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--nav-h);transition:.5s var(--ease)} .nav__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px} .nav::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:.5s var(--ease); background:rgba(12,10,9,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft)} .nav.scrolled{height:66px} .nav.scrolled::before{opacity:1} .logo{display:flex;align-items:center;gap:13px;flex-shrink:0} .logo__mark{width:50px;height:50px;border-radius:12px;overflow:hidden;flex-shrink:0;display:block; box-shadow:inset 0 0 0 1px rgba(201,164,98,.28);transition:.4s var(--ease)} .logo__mark img{width:50px;height:50px;display:block;object-fit:cover;transform:scale(2.05);transform-origin:50% 34%;transition:transform .5s var(--ease)} .logo:hover .logo__mark{box-shadow:inset 0 0 0 1px rgba(201,164,98,.55),0 0 22px -6px var(--glow-gold)} .logo:hover .logo__mark img{transform:scale(2.15)} .logo__txt{font-family:var(--f-display);font-weight:600;font-size:1.32rem;letter-spacing:.01em;line-height:1;color:var(--cream)} .logo__txt small{display:block;font-family:var(--f-body);font-weight:600;font-size:.56rem;letter-spacing:.34em; text-transform:uppercase;color:var(--gold);margin-top:4px} .nav__links{display:flex;align-items:center;gap:6px} .nav__links a{position:relative;padding:9px 14px;font-size:.92rem;font-weight:500;color:var(--ash);transition:color .3s} .nav__links a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;background:var(--gold); transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)} .nav__links a:hover,.nav__links a.active{color:var(--cream)} .nav__links a:hover::after,.nav__links a.active::after{transform:scaleX(1)} .nav__cta{display:flex;align-items:center;gap:14px;flex-shrink:0} .nav__phone{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--cream)} .nav__phone svg{width:17px;height:17px;color:var(--gold)} .nav__phone:hover{color:var(--gold)} .burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);place-items:center} .burger span,.burger span::before,.burger span::after{content:"";display:block;width:20px;height:2px;background:var(--cream);border-radius:2px;transition:.4s var(--ease)} .burger span::before{position:relative;top:-6px} .burger span::after{position:relative;top:4px} body.menu-open .burger span{background:transparent} body.menu-open .burger span::before{top:0;transform:rotate(45deg)} body.menu-open .burger span::after{top:-2px;transform:rotate(-45deg)} /* mobile drawer */ .drawer{position:fixed;inset:0;z-index:999;background:linear-gradient(160deg,var(--coal),var(--char)); padding:calc(var(--nav-h) + 30px) clamp(24px,7vw,48px) 40px;display:flex;flex-direction:column; transform:translateY(-100%);transition:transform .6s var(--ease);visibility:hidden} body.menu-open .drawer{transform:translateY(0);visibility:visible} .drawer a{display:flex;align-items:center;justify-content:space-between;padding:18px 0;font-family:var(--f-display); font-size:1.7rem;color:var(--cream);border-bottom:1px solid var(--line-soft)} .drawer a span{font-family:var(--f-body);font-size:.8rem;color:var(--gold);letter-spacing:.1em} .drawer a:hover{color:var(--gold)} .drawer__foot{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:14px} /* ============================================================ HERO ============================================================ */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--char)} .hero__bg{position:absolute;inset:0;z-index:0} .hero__bg img,.hero__bg video{width:100%;height:100%;object-fit:cover;transform:scale(1.04);will-change:transform;filter:saturate(1.05) contrast(1.02);display:block} @media (prefers-reduced-motion: reduce){.hero__bg video{display:none}.hero__bg::after{content:"";position:absolute;inset:0;background:url("../img/hero-poster.jpg") center/cover no-repeat}} .hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(180deg,rgba(12,10,9,.62) 0%,rgba(12,10,9,.1) 30%,rgba(12,10,9,.55) 68%,rgba(12,10,9,.97) 100%), radial-gradient(80% 60% at 18% 88%,rgba(226,84,42,.22),transparent 60%)} .hero__in{position:relative;z-index:3;width:100%;padding-bottom:clamp(48px,8vw,110px)} .hero__copy{max-width:870px} .hero__copy>*{opacity:0;transform:translateY(34px);animation:rise 1s var(--ease) forwards} .hero__copy>*:nth-child(1){animation-delay:.25s} .hero__copy>*:nth-child(2){animation-delay:.42s} .hero__copy>*:nth-child(3){animation-delay:.6s} .hero__copy>*:nth-child(4){animation-delay:.78s} .hero__copy>*:nth-child(5){animation-delay:.95s} .hero__title{font-size:clamp(3rem,8.5vw,7.2rem);line-height:.92;letter-spacing:-.025em;margin:22px 0 26px} .hero__title em{font-style:italic;color:var(--gold-bright)} .hero__sub{font-size:clamp(1.1rem,1.6vw,1.4rem);color:var(--cream);opacity:.92;max-width:54ch;margin-bottom:38px;line-height:1.6} .hero__actions{display:flex;gap:15px;flex-wrap:wrap;margin-bottom:46px} .hero__bar{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden; width:fit-content;max-width:100%;background:linear-gradient(160deg,rgba(38,30,24,.55),rgba(18,14,11,.45)); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} .hero__bar div{display:flex;align-items:center;gap:12px;padding:16px 24px} .hero__bar div+div{border-left:1px solid var(--line-soft)} .hero__bar svg{width:20px;height:20px;color:var(--gold);flex-shrink:0} .hero__bar b{display:block;font-family:var(--f-display);font-weight:600;font-size:1rem;line-height:1.1;color:var(--cream)} .hero__bar small{display:block;font-size:.74rem;color:var(--ash-2);letter-spacing:.04em} .scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4; font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ash);display:flex;flex-direction:column; align-items:center;gap:10px;opacity:0;animation:fadein 1s ease 1.5s forwards} .scroll-cue span{width:1px;height:46px;background:linear-gradient(180deg,var(--gold),transparent);position:relative;overflow:hidden} .scroll-cue span::after{content:"";position:absolute;top:-46px;left:0;width:1px;height:46px;background:linear-gradient(180deg,transparent,var(--cream));animation:scrolldot 2.2s var(--ease) infinite} @keyframes rise{to{opacity:1;transform:translateY(0)}} @keyframes fadein{to{opacity:1}} @keyframes scrolldot{0%{top:-46px}60%,100%{top:46px}} /* ============================================================ MARQUEE (fire strip) ============================================================ */ .marquee{overflow:hidden;border-block:1px solid var(--line-soft);padding-block:22px;background:var(--char-2); -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)} .marquee__track{display:flex;gap:46px;width:max-content;animation:marquee 38s linear infinite;align-items:center} .marquee:hover .marquee__track{animation-play-state:paused} .marquee__track span{font-family:var(--f-display);font-style:italic;font-size:1.5rem;color:var(--ash-2);white-space:nowrap;display:flex;align-items:center;gap:46px} .marquee__track span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--glow-gold)} @keyframes marquee{to{transform:translateX(-50%)}} /* ============================================================ INTRO / STORY split ============================================================ */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center} .split--reverse .split__media{order:2} .split__media{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-l)} .split__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform 1s var(--ease)} .split__media:hover img{transform:scale(1.05)} .split__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(12,10,9,.5));pointer-events:none} .split__badge{position:absolute;z-index:2;bottom:24px;left:24px;right:24px;display:flex;align-items:center;gap:14px; padding:16px 20px;border-radius:var(--r-m)} .split__badge .n{font-family:var(--f-display);font-size:2.2rem;color:var(--gold);line-height:1} .split__badge b{font-family:var(--f-display);font-size:1.05rem} .split__badge small{display:block;color:var(--ash);font-size:.8rem} /* feature list */ .feat-list{display:flex;flex-direction:column;gap:18px;margin:30px 0 36px} .feat-list li{display:flex;gap:15px;align-items:flex-start} .feat-list .ck{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center; background:rgba(201,164,98,.12);border:1px solid var(--line);color:var(--gold);margin-top:2px} .feat-list .ck svg{width:15px;height:15px} .feat-list b{display:block;font-family:var(--f-display);font-size:1.08rem;font-weight:600} .feat-list span{color:var(--ash);font-size:.94rem} /* ============================================================ SPECIALTY CARDS (bento) ============================================================ */ .spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .spec{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--smoke);border:1px solid var(--line-soft); min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate; transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .6s var(--ease)} .spec__media{position:absolute;inset:0;z-index:-2} .spec__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);filter:saturate(1.05)} .spec::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(12,10,9,.15) 0%,rgba(12,10,9,.5) 52%,rgba(12,10,9,.96) 100%)} .spec:hover{transform:translateY(-8px);box-shadow:var(--shadow-l);border-color:var(--line-strong)} .spec:hover .spec__media img{transform:scale(1.08)} .spec__body{position:relative;z-index:1;padding:clamp(24px,2.4vw,32px)} .spec__tag{font-family:var(--f-body);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:600} .spec h3{font-size:1.7rem;margin:10px 0 8px;line-height:1.05} .spec p{color:var(--ash);font-size:.94rem;margin-bottom:16px;max-width:38ch} .spec .tlink{color:var(--gold-bright)} .spec--wide{grid-column:span 2} .spec--tall{grid-row:span 2;min-height:auto} /* ============================================================ DRY-AGER FEATURE (parallax band) ============================================================ */ .feature{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:clamp(420px,55vw,560px); display:flex;align-items:center;isolation:isolate;border:1px solid var(--line)} .feature__media{position:absolute;inset:0;z-index:-2;overflow:hidden} .feature__media img{width:100%;height:120%;object-fit:cover;will-change:transform} .feature::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(100deg,rgba(12,10,9,.95) 22%,rgba(12,10,9,.6) 55%,rgba(12,10,9,.2) 100%)} .feature__body{padding:clamp(32px,5vw,72px);max-width:600px} .feature__body h2{margin:18px 0} /* ============================================================ STATS / TRUST ============================================================ */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft); border:1px solid var(--line-soft);border-radius:var(--r-l);overflow:hidden} .stat{background:var(--coal);padding:clamp(28px,3.5vw,44px) 22px;text-align:center;transition:.5s var(--ease)} .stat:hover{background:var(--smoke)} .stat b{display:block;font-family:var(--f-display);font-size:clamp(2.2rem,4vw,3.2rem);font-weight:600;line-height:1; color:var(--gold);letter-spacing:-.02em} .stat span{display:block;margin-top:10px;font-size:.86rem;color:var(--ash);letter-spacing:.02em} /* ============================================================ REVIEWS ============================================================ */ .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .review{position:relative;padding:34px 30px;border-radius:var(--r-l);background:var(--smoke); border:1px solid var(--line-soft);overflow:hidden;transition:.5s var(--ease)} .review::before{content:"\201C";position:absolute;top:6px;right:24px;font-family:var(--f-display);font-size:6rem; color:var(--line);line-height:1;pointer-events:none} .review:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:var(--shadow-m)} .review__stars{color:var(--gold);letter-spacing:3px;margin-bottom:16px;font-size:.95rem} .review p{font-size:1.02rem;color:var(--cream);opacity:.92;margin-bottom:22px;line-height:1.6;position:relative} .review__who{display:flex;align-items:center;gap:13px} .review__av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-deep)); display:grid;place-items:center;color:var(--char);font-family:var(--f-display);font-weight:600} .review__who b{display:block;font-size:.94rem;font-family:var(--f-body);font-weight:600} .review__who span{color:var(--ash-2);font-size:.78rem} /* ============================================================ CTA BAND ============================================================ */ .cta-band{position:relative;border-radius:var(--r-xl);overflow:hidden;isolation:isolate; padding:clamp(48px,7vw,90px) clamp(32px,6vw,80px);text-align:center;border:1px solid var(--line)} .cta-band__media{position:absolute;inset:0;z-index:-2} .cta-band__media img{width:100%;height:100%;object-fit:cover} .cta-band::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(12,10,9,.88),rgba(12,10,9,.82)),radial-gradient(70% 90% at 50% 120%,rgba(226,84,42,.3),transparent 60%)} .cta-band h2{font-size:clamp(2.1rem,4.6vw,3.6rem);margin-bottom:18px} .cta-band p{color:var(--ash);max-width:54ch;margin:0 auto 34px;font-size:1.1rem} .cta-band .actions{display:flex;gap:15px;justify-content:center;flex-wrap:wrap} /* ============================================================ FOOTER ============================================================ */ .foot{background:var(--char-2);border-top:1px solid var(--line-soft);padding-top:clamp(60px,7vw,90px)} .foot__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:54px} .foot__brand p{color:var(--ash);font-size:.94rem;margin:20px 0 24px;max-width:34ch} .foot__social{display:flex;gap:12px} .foot__social a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ash);transition:.4s var(--ease)} .foot__social a:hover{color:var(--char);background:var(--gold);border-color:var(--gold);transform:translateY(-3px)} .foot__social svg{width:18px;height:18px} .foot__col h5{font-family:var(--f-body);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;font-weight:600} .foot__col a,.foot__col p{display:block;color:var(--ash);font-size:.92rem;margin-bottom:12px;transition:color .3s} .foot__col a:hover{color:var(--cream)} .foot__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; padding:26px 0;border-top:1px solid var(--line-soft);font-size:.82rem;color:var(--ash-2)} .foot__bottom nav{display:flex;gap:22px;flex-wrap:wrap} .foot__bottom a:hover{color:var(--gold)} .foot__note{display:flex;align-items:center;gap:10px;justify-content:center;padding:16px; background:rgba(226,84,42,.08);border-top:1px solid var(--line-soft);color:var(--ash);font-size:.85rem;text-align:center} .foot__note svg{width:18px;height:18px;color:var(--ember);flex-shrink:0} /* ============================================================ PAGE HERO (subpages) ============================================================ */ .phero{position:relative;padding:calc(var(--nav-h) + clamp(50px,8vw,100px)) 0 clamp(50px,7vw,90px);overflow:hidden;isolation:isolate} .phero__media{position:absolute;inset:0;z-index:-2} .phero__media img{width:100%;height:100%;object-fit:cover} .phero::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(12,10,9,.78),rgba(12,10,9,.6) 40%,rgba(12,10,9,.95)), radial-gradient(70% 60% at 80% 10%,rgba(226,84,42,.16),transparent 60%)} .phero--plain{padding-top:calc(var(--nav-h) + clamp(40px,6vw,80px))} .phero--plain::after{background:radial-gradient(80% 70% at 50% -10%,rgba(226,84,42,.12),transparent 60%)} .phero__in{position:relative;z-index:1;max-width:840px} .phero h1{font-size:clamp(2.6rem,6.5vw,5.2rem);line-height:.98;margin:20px 0} .phero h1 em{font-style:italic;color:var(--gold-bright)} .phero p{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--ash);max-width:60ch;line-height:1.7} .phero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px} /* breadcrumb */ .crumbs{display:flex;align-items:center;gap:9px;font-size:.82rem;color:var(--ash-2);margin-bottom:6px} .crumbs a:hover{color:var(--gold)} .crumbs svg{width:13px;height:13px;opacity:.6} .crumbs span{color:var(--gold)} /* trust chips */ .chips{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:30px} .chips span{display:inline-flex;align-items:center;gap:9px;padding:10px 17px;border-radius:100px; background:rgba(245,237,225,.04);border:1px solid var(--line);font-size:.86rem;font-weight:500;color:var(--cream);transition:.4s var(--ease)} .chips span:hover{border-color:var(--gold);transform:translateY(-2px)} .chips svg{width:16px;height:16px;color:var(--gold);flex-shrink:0} .chips b{color:var(--gold);font-family:var(--f-display);font-weight:600} /* ============================================================ MENU (speisekarte) ============================================================ */ .menu-cat{margin-bottom:clamp(48px,6vw,80px);scroll-margin-top:120px} .menu-cat__head{display:flex;align-items:baseline;gap:18px;margin-bottom:32px;padding-bottom:18px;border-bottom:1px solid var(--line)} .menu-cat__head h2{font-size:clamp(1.8rem,3.4vw,2.6rem)} .menu-cat__head p{color:var(--ash);font-size:.92rem;margin-left:auto;max-width:40ch;text-align:right} .menu-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 48px} .menu-list--single{grid-template-columns:1fr} .mitem{display:flex;gap:14px;align-items:baseline;padding:15px 0;border-bottom:1px dashed var(--line-soft)} .mitem__main{flex:1;min-width:0} .mitem__name{font-family:var(--f-display);font-size:1.12rem;font-weight:600;color:var(--cream);display:flex;align-items:center;gap:10px} .mitem__name .badge{font-family:var(--f-body);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase; color:var(--gold);border:1px solid var(--line);border-radius:100px;padding:3px 9px;font-weight:600} .mitem__desc{color:var(--ash);font-size:.88rem;margin-top:4px;line-height:1.5} .mitem__dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-5px);min-width:14px} .mitem__price{font-family:var(--f-display);font-size:1.08rem;color:var(--gold);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums} .menu-jump{position:sticky;top:calc(var(--nav-h) - 6px);z-index:50;display:flex;gap:8px;flex-wrap:wrap;padding:14px 0; background:linear-gradient(180deg,var(--char) 60%,transparent);margin-bottom:30px} .menu-jump a{padding:9px 16px;border-radius:100px;border:1px solid var(--line);font-size:.82rem;color:var(--ash);transition:.35s var(--ease);font-weight:500} .menu-jump a:hover,.menu-jump a.active{background:var(--gold);color:var(--char);border-color:var(--gold)} /* ============================================================ FORMS ============================================================ */ .form{display:grid;gap:18px} .form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .field{display:flex;flex-direction:column;gap:8px} .field label{font-size:.84rem;font-weight:600;color:var(--cream);letter-spacing:.02em} .field label .req{color:var(--ember)} .field input,.field select,.field textarea{background:var(--smoke);border:1px solid var(--line-soft);border-radius:var(--r-s); padding:14px 16px;color:var(--cream);font-size:.96rem;transition:.3s var(--ease);width:100%} .field input::placeholder,.field textarea::placeholder{color:var(--ash-2)} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:var(--smoke-2);box-shadow:0 0 0 3px rgba(201,164,98,.12)} .field textarea{resize:vertical;min-height:120px} .field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a462' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:42px} .field small{color:var(--ash-2);font-size:.78rem} .form__note{font-size:.82rem;color:var(--ash-2)} .form-card{background:linear-gradient(165deg,var(--smoke),var(--coal));border:1px solid var(--line);border-radius:var(--r-l); padding:clamp(28px,4vw,48px);box-shadow:var(--shadow-l)} /* reservation 2-col layout (responsive) */ .res-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start} @media(max-width:860px){.res-grid{grid-template-columns:1fr}} /* OpenTable booking block */ .ot-brand{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px} .ot-badge{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;color:var(--ash);letter-spacing:.03em;padding:6px 13px;border:1px solid var(--line);border-radius:100px;white-space:nowrap} .ot-badge strong{color:var(--gold);font-family:var(--f-body);font-weight:700} .ot-badge svg{width:14px;height:14px;color:var(--ember)} .ot-pick{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:16px;margin-bottom:20px} @media(max-width:560px){.ot-pick{grid-template-columns:1fr}} /* info cards (kontakt) */ .info-card{background:var(--smoke);border:1px solid var(--line-soft);border-radius:var(--r-l);padding:28px;transition:.5s var(--ease)} .info-card:hover{border-color:var(--line);transform:translateY(-4px)} .info-card__ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:rgba(201,164,98,.1); border:1px solid var(--line);color:var(--gold);margin-bottom:18px} .info-card__ico svg{width:24px;height:24px} .info-card h3{font-size:1.2rem;margin-bottom:8px} .info-card p,.info-card a:not(.btn):not(.tlink){color:var(--ash);font-size:.95rem;line-height:1.6} .info-card a:not(.btn):not(.tlink):hover{color:var(--gold)} /* keep button label dark & readable on the gold fill even inside info cards */ .info-card a.btn--gold,.info-card a.btn--gold span{color:#1c1208} .info-card a.btn--primary,.info-card a.btn--primary span{color:#1c0e08} /* ============================================================ FAQ ============================================================ */ .faq{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:12px} .faq__item{border:1px solid var(--line-soft);border-radius:var(--r-m);background:var(--smoke);overflow:hidden;transition:.4s var(--ease)} .faq__item:hover{border-color:var(--line)} .faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px; font-family:var(--f-display);font-size:1.12rem;font-weight:600;color:var(--cream);text-align:left} .faq__ico{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);position:relative;transition:.4s var(--ease)} .faq__ico::before,.faq__ico::after{content:"";position:absolute;background:var(--gold);border-radius:2px;top:50%;left:50%;transition:.4s var(--ease)} .faq__ico::before{width:11px;height:1.5px;transform:translate(-50%,-50%)} .faq__ico::after{width:1.5px;height:11px;transform:translate(-50%,-50%)} .faq__item.open .faq__ico{background:var(--gold)} .faq__item.open .faq__ico::before,.faq__item.open .faq__ico::after{background:var(--char)} .faq__item.open .faq__ico::after{transform:translate(-50%,-50%) scaleY(0)} .faq__a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)} .faq__a p{padding:0 26px 24px;color:var(--ash);font-size:.96rem;line-height:1.65} /* jobs */ .job{display:flex;align-items:center;gap:22px;padding:26px 30px;border:1px solid var(--line-soft);border-radius:var(--r-l); background:var(--smoke);transition:.5s var(--ease)} .job:hover{border-color:var(--gold);transform:translateX(6px);background:var(--smoke-2)} .job__ico{width:54px;height:54px;border-radius:14px;background:rgba(226,84,42,.12);border:1px solid rgba(226,84,42,.25); display:grid;place-items:center;color:var(--ember);flex-shrink:0} .job__ico svg{width:26px;height:26px} .job__main{flex:1} .job__main h3{font-size:1.3rem;margin-bottom:4px} .job__main p{color:var(--ash);font-size:.92rem} .job__tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .job__tags span{font-size:.72rem;padding:4px 11px;border-radius:100px;background:rgba(201,164,98,.1);color:var(--gold);border:1px solid var(--line)} /* ============================================================ REVEAL ANIMATIONS ============================================================ */ /* Reveal is FAIL-SAFE: content is visible by default. The hidden start state is only applied once JS adds .reveal-ready to , so if JS fails to load, nothing ever disappears. */ .reveal{transition:opacity 1s var(--ease),transform 1s var(--ease)} .reveal-ready .reveal{opacity:0;transform:translateY(40px)} .reveal-ready .reveal.in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s} .reveal[data-d="4"]{transition-delay:.32s} .reveal[data-d="5"]{transition-delay:.4s} /* floating reserve button (mobile) */ .fab-reserve{position:fixed;bottom:18px;left:18px;right:18px;z-index:800;display:none; box-shadow:0 18px 44px -12px rgba(0,0,0,.7)} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1080px){ .foot__top{grid-template-columns:1fr 1fr} .spec--wide{grid-column:span 3} } @media(max-width:900px){ .nav__links,.nav__phone{display:none} .burger{display:grid} .split{grid-template-columns:1fr;gap:36px} .split--reverse .split__media{order:0} .split__media img{aspect-ratio:16/11} .spec-grid{grid-template-columns:1fr 1fr} .spec--wide,.spec--tall{grid-column:span 2;grid-row:auto;min-height:300px} .reviews{grid-template-columns:1fr} .stats{grid-template-columns:1fr 1fr} .menu-list{grid-template-columns:1fr;gap:0 0} .shead--row{align-items:flex-start} } @media(max-width:600px){ body{font-size:16px} /* Prevent hero content from overflowing above the fixed nav on small screens */ .hero{padding-top:calc(var(--nav-h) + 14px);align-items:flex-end} .hero__title{font-size:clamp(2.4rem,9.2vw,3.6rem);line-height:.97} .hero__sub{font-size:1rem;margin-bottom:24px;max-width:100%} .hero__actions{margin-bottom:28px;gap:12px} .hero__bar{margin-top:4px} .hero__bar div{padding:13px 18px} /* mobile nav: only ONE reservation CTA visible at a time. Hide nav reserve button while at top (hero/phero) and the floating FAB entirely. Once user scrolls past the hero, nav.scrolled adds the button back. */ .logo__txt small{display:none} .logo__txt{font-size:1.18rem} .nav__cta{opacity:0;visibility:hidden;transform:translateX(8px);pointer-events:none;transition:.45s var(--ease)} .nav.scrolled .nav__cta{opacity:1;visibility:visible;transform:none;pointer-events:auto} .fab-reserve{display:none!important} /* prominent gold "Menü" tab in the top-right corner */ .burger{background:linear-gradient(135deg,var(--gold-bright),var(--gold));border:none;width:50px;height:50px;border-radius:12px;box-shadow:0 10px 24px -8px var(--glow-gold),inset 0 0 0 1px rgba(255,255,255,.18)} .burger span,.burger span::before,.burger span::after{background:var(--char);width:22px;height:2.4px} body.menu-open .burger{background:var(--smoke-2);box-shadow:none} body.menu-open .burger span::before,body.menu-open .burger span::after{background:var(--gold)} .spec-grid{grid-template-columns:1fr} .spec--wide,.spec--tall{grid-column:span 1} .form__row{grid-template-columns:1fr} .foot__top{grid-template-columns:1fr;gap:32px} .hero__bar{width:100%} .hero__bar div{flex:1 1 40%} .fab-reserve{display:flex} .menu-cat__head{flex-direction:column;gap:8px} .menu-cat__head p{margin-left:0;text-align:left} .menu-jump{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:-4px;padding-inline:4px} .menu-jump::-webkit-scrollbar{display:none} .menu-jump a{flex:0 0 auto} .cta-band .actions .btn,.hero__actions .btn{flex:1 1 100%} }