/* ════════════════════════════════════════════════════════════════ ATHEN GRILL — site.css · Konzept „Glut & Ägäis" Tokens spiegeln tailwind.config (inline je Seite). Light/Dark via .dark auf . ════════════════════════════════════════════════════════════════ */ :root{ --primary:#0E5C73; --secondary:#6E7B3D; --accent:#C8512B; --gold:#E0A53B; --bg:#FBF6EC; --fg:#241B12; --muted:#8C7E6A; --surface:#FFFFFF; --line:rgba(36,27,18,.12); --shadow:0 18px 50px -22px rgba(36,27,18,.30); --focus:#0E5C73; --hd:'Fraunces',Georgia,'Times New Roman',serif; --bd:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; } html.dark{ --bg:#15110C; --fg:#F2E8D8; --muted:#B6A88F; --surface:#1F1810; --line:rgba(242,232,216,.14); --shadow:0 22px 60px -24px rgba(0,0,0,.7); --focus:#E0A53B; } *{box-sizing:border-box} html{scroll-behavior:smooth} html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-stopped{overflow:hidden} body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--bd); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .5s ease,color .5s ease; } h1,h2,h3,h4,.font-hd{font-family:var(--hd); font-weight:600; line-height:1.05; letter-spacing:-.01em} ::selection{background:var(--accent); color:#fff} :focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:3px} a{color:inherit; text-decoration:none} img{max-width:100%; display:block} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Papier-/Kalk-Textur sehr dezent */ body::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5; background-image:radial-gradient(circle at 20% 30%,rgba(224,165,59,.05),transparent 45%), radial-gradient(circle at 80% 70%,rgba(14,92,115,.06),transparent 45%); } /* Permanenter Glut/Ägäis-Canvas */ #bg-canvas{position:fixed; inset:0; z-index:-1; pointer-events:none; width:100%; height:100%} /* ── Loader ─────────────────────────────────────────── */ #loader{position:fixed; inset:0; z-index:9990; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.15rem; background:var(--bg); transition:opacity .6s ease} #loader .lo-top,#loader .lo-bot{position:absolute; left:0; right:0; height:50%; background:var(--bg); z-index:1} #loader .lo-top{top:0} #loader .lo-bot{bottom:0} #loader .lo-mark{position:relative; z-index:2; width:min(180px,42vw); color:var(--primary)} #loader .lo-text{position:relative; z-index:2; font-family:var(--hd,inherit); letter-spacing:.18em; text-transform:uppercase; font-size:.72rem; color:var(--muted); opacity:.85} #loader.done{pointer-events:none} .no-js #loader{display:none} /* ── Header / Nav ───────────────────────────────────── */ .site-header{position:fixed; top:0; left:0; right:0; z-index:80; transition:background .4s,box-shadow .4s,padding .4s,color .4s} .site-header.scrolled{background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line)} .navlink{position:relative; padding:.4rem .1rem; font-weight:500; transition:color .35s ease} .navlink::after{content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--accent); transition:width .35s cubic-bezier(.22,.61,.21,1)} .navlink:hover::after,.navlink[aria-current="page"]::after{width:100%} .navlink[aria-current="page"]{color:var(--accent)} /* Header über dunklem Hero: weiße Schrift, solange der Sticky-Header noch nicht aktiv ist */ .site-header.over-hero:not(.scrolled){color:#fff} .site-header.over-hero:not(.scrolled) .nav-brand-title{color:#fff !important} .site-header.over-hero:not(.scrolled) .nav-brand-sub{color:rgba(255,255,255,.8) !important} .site-header.over-hero:not(.scrolled) .navlink{color:#fff} .site-header.over-hero:not(.scrolled) .navlink[aria-current="page"]{color:#fff} .site-header.over-hero:not(.scrolled) .navlink:hover::after, .site-header.over-hero:not(.scrolled) .navlink[aria-current="page"]::after{background:#fff} .site-header.over-hero:not(.scrolled) [data-theme-toggle], .site-header.over-hero:not(.scrolled) [data-menu-toggle]{color:#fff; border-color:rgba(255,255,255,.45)} #mobile-menu{transition:opacity .4s ease,transform .4s ease} #mobile-menu[hidden]{display:none} /* ── Buttons ────────────────────────────────────────── */ .btn{display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.5rem; border-radius:999px; font-weight:600; font-family:var(--bd); cursor:pointer; border:1.5px solid transparent; transition:transform .3s cubic-bezier(.22,.61,.21,1),background .3s,color .3s,box-shadow .3s; will-change:transform} .btn svg{width:1.05em;height:1.05em} .btn-primary{background:var(--accent); color:#fff; box-shadow:0 12px 30px -12px rgba(200,81,43,.7)} .btn-primary:hover{transform:translateY(-2px)} .btn-ghost{background:transparent; color:var(--fg); border-color:var(--line)} .btn-ghost:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px)} .btn-gold{background:var(--gold); color:#3a2a08} .btn-gold:hover{transform:translateY(-2px)} /* ── Pebble / organische Bildmaske ──────────────────── */ .pebble{border-radius:62% 38% 44% 56%/56% 52% 48% 44%; overflow:hidden} .pebble-2{border-radius:42% 58% 56% 44%/52% 44% 56% 48%; overflow:hidden} .card{background:var(--surface); border:1px solid var(--line); border-radius:1.25rem; box-shadow:var(--shadow)} /* ── Sektions-Label / Mäander ───────────────────────── */ .eyebrow{display:inline-flex; align-items:center; gap:.6rem; font-family:var(--bd); font-weight:700; letter-spacing:.22em; text-transform:uppercase; font-size:.72rem; color:var(--accent)} .eyebrow::before{content:""; width:2.2rem; height:2px; background:currentColor; display:inline-block} .lead{font-size:clamp(1.05rem,2vw,1.3rem); color:var(--muted)} /* Glut-Chip hinter Zahlen/Icons */ .glow-dot{box-shadow:0 0 0 0 rgba(224,165,59,.6); animation:glowpulse 3.4s ease-in-out infinite} @keyframes glowpulse{0%,100%{box-shadow:0 0 18px 2px rgba(224,165,59,.35)}50%{box-shadow:0 0 30px 8px rgba(200,81,43,.5)}} /* Reveal-Fallback: NIE per CSS verstecken (GSAP übernimmt). */ .will-reveal{will-change:transform,opacity} /* Speisekarte */ .menu-item{display:flex; gap:1rem; align-items:baseline; padding:1rem 0; border-bottom:1px dashed var(--line)} .menu-item:last-child{border-bottom:0} .menu-dots{flex:1; border-bottom:2px dotted var(--line); transform:translateY(-4px); min-width:1.5rem} .menu-tag{font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.18rem .5rem; border-radius:999px; border:1px solid var(--line); color:var(--muted)} .filter-chip{padding:.5rem 1rem; border-radius:999px; border:1.5px solid var(--line); font-weight:600; font-size:.9rem; cursor:pointer; transition:all .25s; color:var(--fg); background:transparent} .filter-chip.is-active{background:var(--primary); color:#fff; border-color:var(--primary)} .menu-cat.is-hidden{display:none} /* Galerie */ .gal-item{overflow:hidden; border-radius:1rem; position:relative; cursor:pointer} .gal-item img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.21,1)} .gal-item:hover img{transform:scale(1.07)} #lightbox{position:fixed; inset:0; z-index:9995; background:rgba(15,12,8,.92); display:flex; align-items:center; justify-content:center; padding:5vw; opacity:0; pointer-events:none; transition:opacity .35s} #lightbox.open{opacity:1; pointer-events:auto} #lightbox img{max-width:100%; max-height:90vh; border-radius:.6rem; box-shadow:0 30px 80px rgba(0,0,0,.6)} /* Hitzeflimmern über Hero-Glut */ @keyframes heatwave{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-2px) scaleY(1.012)}} .heat{animation:heatwave 4.5s ease-in-out infinite; transform-origin:bottom} /* Footer */ .site-footer a.f-link{color:var(--muted); transition:color .25s} .site-footer a.f-link:hover{color:var(--accent)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} #loader{display:none!important} .heat,.glow-dot{animation:none!important} }