/* ════════════════════════════════════════════════════════════ GLUT — Feuerküche · Showcase-One-Pager (fiktive Marke) Konzept: CONCEPT.md — „Vom Tag zur Glut" (Seite dunkelt beim Scrollen) Typo: Playfair Display (Display) · Inter Tight (Body) · JetBrains Mono (Daten) ════════════════════════════════════════════════════════════ */ /* [CRITICAL:START tokens+reset+fonts] */ @font-face { font-family: 'Playfair Display'; src: url('/public/fonts/PlayfairDisplay-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('/public/fonts/PlayfairDisplay-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('/public/fonts/PlayfairDisplay-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter Tight'; src: url('/public/fonts/InterTight.woff2') format('woff2-variations'); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/public/fonts/JetBrainsMono.woff2') format('woff2-variations'); font-weight: 200 800; font-style: normal; font-display: swap; } :root { --display: 'Playfair Display', 'Iowan Old Style', Georgia, serif; --body: 'Inter Tight', 'Segoe UI', system-ui, sans-serif; --mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace; /* Abend (Default — der Hero beginnt in der Glut) */ --bg: #100C0A; --surface: #1B1410; --text: #F4EDE4; --text-muted: rgba(244, 237, 228, .62); --ember: #FF6B2B; --ember-deep: #C2451E; --line: rgba(244, 237, 228, .10); /* Tag-Werte (werden per [data-theme="light"] aktiv) — Peak bewusst gedämpft, volles Creme #F2E9DC wirkte als zu greller Sprung */ --day-bg: #E6D9C4; --day-surface: #EFE5D3; --day-text: #1C140E; --day-text-muted: rgba(28, 20, 14, .64); --day-ember: #C2451E; --day-line: rgba(28, 20, 14, .12); --maxw: 1240px; --gutter: clamp(1.25rem, 4.5vw, 3.5rem); --section: clamp(5.5rem, 12vw, 11rem); --ease-warm: cubic-bezier(.45, 0, .15, 1); --d-reveal: .85s; } *, *::before, *::after { box-sizing: border-box; } /* KEIN scroll-behavior:smooth — kollidiert mit Lenis (Browser animiert jeden Lenis-Frame nochmal → Scrollen kriecht/steht; live erlebt 2026-06-11). Sanfte Anchor-Sprünge macht Lenis selbst (app.js); ohne Lenis: nativer Sprung. */ html { -webkit-text-size-adjust: 100%; } /* Lenis-Pflicht-CSS (offizielle Empfehlung) */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { margin: 0; font-family: var(--body); font-size: clamp(1rem, .97rem + .2vw, 1.08rem); line-height: 1.65; color: var(--text); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* weicher Tag/Nacht-Übergang (1.7s — .9s wirkte als harter Sprung) */ transition: background-color 1.7s var(--ease-warm), color 1.7s var(--ease-warm); } /* Tag-Modus: Sektionen melden ihr Theme, app.js setzt es auf */ body[data-theme="light"] { --bg: var(--day-bg); --surface: var(--day-surface); --text: var(--day-text); --text-muted: var(--day-text-muted); --ember: var(--day-ember); --line: var(--day-line); } /* feines Glut-Korn über allem — Atmosphäre statt Flachware */ body::before { content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .5; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); } h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.02; letter-spacing: -.015em; margin: 0; } p { margin: 0; } a { color: inherit; } img { max-width: 100%; display: block; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .mono { font-family: var(--mono); font-weight: 500; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ember); } :focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; border-radius: 4px; } /* ── Nav ── */ .nav { position: fixed; inset-inline: 0; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem var(--gutter); transition: background-color .4s var(--ease-warm), backdrop-filter .4s; } .nav.scrolled { background: color-mix(in oklab, var(--bg) 78%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); } .nav-brand { font-family: var(--display); font-weight: 600; font-size: 1.45rem; text-decoration: none; letter-spacing: .01em; } .nav-brand em { font-style: normal; color: var(--ember); } .nav-cta { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: .72rem 1.15rem; border: 1px solid var(--line); border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; gap: .5rem; transition: border-color .3s, color .3s, background .3s; } .nav-cta:hover { border-color: var(--ember); color: var(--ember); } .nav-links { display: flex; gap: .2rem; position: absolute; left: 50%; transform: translateX(-50%); } .nav-links a { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: .55rem .8rem; border-radius: 999px; position: relative; color: var(--text-muted); transition: color .25s; } .nav-links a::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .3rem; height: 1.5px; background: var(--ember); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-warm); } .nav-links a:hover, .nav-links a.active { color: var(--text); } .nav-links a.active::after, .nav-links a:hover::after { transform: scaleX(1); } @media (max-width: 1023px) { .nav-links { display: none; } } .nav-right { display: flex; align-items: center; gap: .7rem; } .nav-burger { width: 46px; height: 46px; border-radius: 50%; cursor: pointer; border: 1px solid var(--line); background: transparent; display: grid; place-items: center; gap: 0; padding: 0; transition: border-color .25s; } .nav-burger span { display: block; width: 18px; height: 1.8px; background: var(--text); border-radius: 2px; transition: transform .35s var(--ease-warm); margin: 2.5px 0; } .nav-burger:hover { border-color: var(--ember); } .nav-burger.open span:first-child { transform: translateY(3.6px) rotate(45deg); } .nav-burger.open span:last-child { transform: translateY(-3.6px) rotate(-45deg); } .nav-progress { position: absolute; left: 0; top: 0; height: 2.5px; width: 100%; background: linear-gradient(90deg, var(--ember), #FFB347); transform: scaleX(0); transform-origin: left; pointer-events: none; box-shadow: 0 0 12px rgba(255, 107, 43, .55); } /* ── Hero ── */ .hero { position: relative; min-height: 100svh; display: grid; align-content: end; padding: 7rem var(--gutter) clamp(2.5rem, 7vh, 5rem); overflow: hidden; isolation: isolate; /* Der Glut-Hero ist IMMER Abend — immun gegen den Body-Theme-Wechsel (sonst erscheint er beim schnellen Rückscrollen kurz hell = Stimmungsbruch) */ background: #100C0A; color: #F4EDE4; --text-muted: rgba(244, 237, 228, .62); --ember: #FF6B2B; --line: rgba(244, 237, 228, .10); } /* Hero-Foto (LCP, preloaded) — unterste Ebene */ .hero-bg { position: absolute; inset: 0; z-index: -3; margin: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; } /* Overlay über dem Foto: Lesbarkeit der Typo + Glut-Schimmer (auch CSS-Fallback) */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(to bottom, rgba(16, 12, 10, .42), rgba(16, 12, 10, .18) 38%, rgba(16, 12, 10, .82) 82%), radial-gradient(120% 75% at 50% 108%, rgba(255, 107, 43, .30), rgba(194, 69, 30, .10) 42%, transparent 70%); } /* CSS-Funken (Fallback-Schönheit; pausiert bei reduced-motion) */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(2px 2px at 18% 92%, rgba(255, 156, 84, .9), transparent 60%), radial-gradient(1.6px 1.6px at 38% 96%, rgba(255, 120, 50, .8), transparent 60%), radial-gradient(2.2px 2.2px at 61% 94%, rgba(255, 190, 120, .85), transparent 60%), radial-gradient(1.4px 1.4px at 79% 97%, rgba(255, 140, 60, .8), transparent 60%), radial-gradient(1.8px 1.8px at 90% 93%, rgba(255, 170, 90, .75), transparent 60%); background-repeat: no-repeat; animation: emberRise 7s linear infinite; opacity: .8; } @keyframes emberRise { 0% { transform: translateY(0); opacity: .85; } 78% { opacity: .5; } 100% { transform: translateY(-58vh); opacity: 0; } } .hero canvas { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 1.1s var(--ease-warm); } .hero.webgl-on canvas { opacity: 1; } .hero.webgl-on::after { display: none; } /* echte Partikel ersetzen die CSS-Funken */ .hero-kicker { display: flex; gap: 1.1rem; align-items: center; margin-bottom: 1.4rem; } .hero-kicker .rule { width: 42px; height: 1px; background: var(--ember); } .hero-title { font-size: clamp(4.5rem, 23vw, 16.5rem); letter-spacing: .015em; display: flex; position: relative; z-index: 1; } .hero-title span { display: inline-block; } /* Buchstaben-Reveal-Ziele */ /* Kursives Outline-Echo hinter dem Titel — atmet langsam (Typo-Drama) */ .hero-echo { position: absolute; left: calc(var(--gutter) + .12em); bottom: clamp(8.2rem, 22vh, 13rem); font-family: var(--display); font-style: italic; font-weight: 600; font-size: clamp(4.5rem, 23vw, 16.5rem); line-height: 1.02; letter-spacing: .015em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 107, 43, .28); pointer-events: none; user-select: none; z-index: 0; transform: translate(.05em, -.14em); } html[data-anim] .hero-echo { animation: echoBreathe 7s var(--ease-warm) infinite alternate; } @keyframes echoBreathe { from { transform: translate(.05em, -.14em) scale(1); opacity: .75; } to { transform: translate(.07em, -.17em) scale(1.012); opacity: 1; } } @media (max-width: 760px) { .hero-echo { display: none; } } /* mobil: Titel wirkt allein */ /* Scroll-Hint: Mono + wachsende Glut-Linie */ .hero-scrollhint { position: absolute; right: var(--gutter); bottom: clamp(2.5rem, 7vh, 5rem); display: flex; flex-direction: column; align-items: center; gap: .7rem; color: rgba(244, 237, 228, .55); letter-spacing: .26em; } .hero-scrollhint span { writing-mode: vertical-rl; } .hero-scrollhint::after { content: ""; width: 1.5px; height: 52px; background: linear-gradient(to bottom, var(--ember), transparent); } html[data-anim] .hero-scrollhint::after { animation: hintFlow 2.2s var(--ease-warm) infinite; } @keyframes hintFlow { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } @media (max-width: 760px) { .hero-scrollhint { display: none; } } .hero-sub { max-width: 34rem; margin-top: 1.6rem; font-size: clamp(1.06rem, 1rem + .35vw, 1.3rem); line-height: 1.55; color: var(--text-muted); } .hero-row { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; margin-top: 2.2rem; } .btn-ember { position: relative; display: inline-flex; align-items: center; gap: .65rem; min-height: 52px; padding: .95rem 1.7rem; border-radius: 999px; background: var(--ember); color: #16100B; font-family: var(--body); font-weight: 650; font-size: 1.02rem; text-decoration: none; transition: transform .3s var(--ease-warm), box-shadow .3s var(--ease-warm); box-shadow: 0 6px 28px rgba(255, 107, 43, .28); } .btn-ember:hover { transform: translateY(-3px); box-shadow: 0 10px 40px rgba(255, 107, 43, .42); } .btn-ghost { display: inline-flex; align-items: center; min-height: 52px; padding: .95rem 1.5rem; border-radius: 999px; border: 1.5px solid var(--line); color: var(--text); font-weight: 600; font-size: 1rem; text-decoration: none; transition: border-color .3s, transform .3s var(--ease-warm); } .btn-ghost:hover { border-color: var(--ember); transform: translateY(-3px); } /* Mobile Sticky-Bar */ .sticky-bar { position: fixed; inset-inline: .75rem; bottom: .75rem; z-index: 70; display: none; gap: .6rem; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .45s var(--ease-warm), transform .45s var(--ease-warm); padding: .55rem; border-radius: 999px; background: rgba(20, 14, 10, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 107, 43, .25); box-shadow: 0 10px 36px rgba(0, 0, 0, .45); } .sticky-bar a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; border-radius: 999px; text-decoration: none; font-weight: 650; font-size: .95rem; } .sticky-bar .call { background: var(--ember); color: #16100B; } .sticky-bar .route { color: #F4EDE4; border: 1px solid rgba(244, 237, 228, .18); } .sticky-bar.visible { opacity: 1; transform: none; pointer-events: auto; } @media (max-width: 760px) { .sticky-bar { display: flex; } } @media (max-width: 760px) { .hero { padding-top: 5.5rem; } .hero-row .btn-ghost { display: none; } } /* [CRITICAL:END] */ /* ════════ Below the fold (lädt async) ════════ */ section { position: relative; } .section { padding-block: var(--section); overflow: hidden; } /* ── Fullscreen-Menü ── */ .menu-overlay { position: fixed; inset: 0; z-index: 55; /* UNTER der Nav (60): Burger-X bleibt klickbar */ background: radial-gradient(90% 70% at 50% 115%, rgba(255, 107, 43, .16), transparent 60%), #0D0A08; opacity: 0; transition: opacity .4s var(--ease-warm); } .menu-overlay[hidden] { display: none; } /* Pflicht: display-Regel vs. hidden-Attribut */ .menu-overlay.open { opacity: 1; } .menu-inner { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 5.5rem var(--gutter) 2.5rem; max-width: var(--maxw); margin-inline: auto; width: 100%; outline: none; } .menu-list-big { list-style: none; margin: 0; padding: 0; } .menu-list-big a { display: flex; align-items: baseline; gap: 1.1rem; font-family: var(--display); font-weight: 600; font-size: clamp(2.2rem, 7.5vh, 4.6rem); line-height: 1.16; color: #F4EDE4; text-decoration: none; padding: .12em 0; opacity: 0; transform: translateY(26px); transition: opacity .5s var(--ease-warm), transform .5s var(--ease-warm), color .3s, font-style .3s; } .menu-overlay.open .menu-list-big a { opacity: 1; transform: none; } .menu-list-big li:nth-child(1) a { transition-delay: .08s; } .menu-list-big li:nth-child(2) a { transition-delay: .15s; } .menu-list-big li:nth-child(3) a { transition-delay: .22s; } .menu-list-big li:nth-child(4) a { transition-delay: .29s; } .menu-list-big li:nth-child(5) a { transition-delay: .36s; } .menu-list-big a .mono { font-size: .8rem; color: rgba(244, 237, 228, .4); min-width: 2ch; } .menu-list-big a:hover { color: #FF6B2B; font-style: italic; } .menu-list-big a:hover .mono { color: #FF6B2B; } .menu-meta { display: flex; flex-wrap: wrap; gap: .7rem 2.2rem; margin-top: clamp(1.8rem, 6vh, 3.5rem); padding-top: 1.4rem; border-top: 1px solid rgba(244, 237, 228, .12); } .menu-meta .mono { color: rgba(244, 237, 228, .55); text-decoration: none; } .menu-meta a.mono:hover { color: #FF6B2B; } /* ── Atmosphäre: Glow-Felder, Ghost-Typo, Funken ── */ .glow { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(60px); opacity: .7; z-index: 0; } .glow-ember { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; background: radial-gradient(circle, rgba(255, 107, 43, .22), rgba(194, 69, 30, .07) 55%, transparent 75%); } .glow-left { left: -16vw; bottom: -8vw; } .glow-right { right: -16vw; top: -6vw; } .glow-sun { width: 52vw; height: 52vw; max-width: 700px; max-height: 700px; right: -18vw; top: -18vw; background: radial-gradient(circle, rgba(255, 196, 110, .34), rgba(255, 214, 140, .10) 55%, transparent 75%); } html[data-anim] .glow { animation: glowDrift 11s ease-in-out infinite alternate; } @keyframes glowDrift { from { transform: translate3d(0, 0, 0) scale(1); opacity: .5; } to { transform: translate3d(4.5vw, -3vw, 0) scale(1.18); opacity: .85; } } /* ── Glut-Cursor (nur Pointer-Geräte + volle Motion; JS lerpt träge) ── */ .cursor { display: none; } @media (hover: hover) and (pointer: fine) { html[data-anim] .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 200; width: 12px; height: 12px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 14px rgba(255, 107, 43, .8); pointer-events: none; transform: translate(-100px, -100px); transition: width .3s var(--ease-warm), height .3s var(--ease-warm), opacity .3s, background .3s; margin: -6px 0 0 -6px; mix-blend-mode: screen; } html[data-anim] .cursor.is-link { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: rgba(255, 107, 43, .16); box-shadow: inset 0 0 0 1.5px var(--ember), 0 0 24px rgba(255, 107, 43, .5); } html[data-anim] .cursor.is-down { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; } } .ghost-word { position: absolute; right: -1.5rem; top: .5rem; z-index: 0; font-family: var(--display); font-style: italic; font-weight: 600; font-size: clamp(7rem, 24vw, 19rem); line-height: 1; pointer-events: none; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 107, 43, .14); user-select: none; } .ghost-center { right: auto; left: 50%; top: 44%; transform: translate(-50%, -50%); } /* CTA-Kino: Steakhouse-Feuer-Video, weich in die Sektion maskiert. Funken (::before, z1) tanzen ÜBER dem Video; Glow (::after) verstärkt den Merge. */ .cta-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; pointer-events: none; transition: opacity 1.6s var(--ease-warm); mask-image: linear-gradient(to bottom, transparent, black 24%, black 72%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 24%, black 72%, transparent); filter: saturate(1.08) brightness(.92); } .cta-video.playing { opacity: .48; } @media (max-width: 760px) { .cta-video.playing { opacity: .38; } } /* mobil dezenter */ /* Reserve: aufsteigende Funken (Hero-Pattern wiederverwendet) */ .embers::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: radial-gradient(2px 2px at 14% 94%, rgba(255, 156, 84, .9), transparent 60%), radial-gradient(1.6px 1.6px at 33% 97%, rgba(255, 120, 50, .8), transparent 60%), radial-gradient(2.2px 2.2px at 56% 95%, rgba(255, 190, 120, .85), transparent 60%), radial-gradient(1.5px 1.5px at 74% 98%, rgba(255, 140, 60, .8), transparent 60%), radial-gradient(1.9px 1.9px at 88% 94%, rgba(255, 170, 90, .75), transparent 60%); background-repeat: no-repeat; } html[data-anim] .embers::before { animation: emberRise 8s linear infinite; } .embers::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(95% 55% at 50% 112%, rgba(255, 107, 43, .26), rgba(194, 69, 30, .08) 45%, transparent 72%); } .reserve .wrap { position: relative; z-index: 1; } /* ── Marquee ── */ .marquee { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--line); padding-block: 1.05rem; } .marquee-track { display: inline-flex; } .marquee-track span { font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 2.6vw, 1.8rem); letter-spacing: .02em; padding-right: .35em; } .marquee-track em { font-style: normal; color: var(--ember); padding-inline: .35em; } html[data-anim] .marquee-track { animation: marquee 26s linear infinite; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Reveal-Grundzustand NUR bei voller Motion (CSS-Safety: ohne JS bleibt alles sichtbar) */ html[data-anim] [data-reveal] { opacity: 0; transform: translateY(16px); } html[data-anim] .revealed { opacity: 1; transform: none; transition: opacity var(--d-reveal) var(--ease-warm), transform var(--d-reveal) var(--ease-warm); } /* ── Manifest (Tag) ── */ .manifest .wrap { max-width: 1080px; } .manifest-line { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 4.6vw, 3.9rem); line-height: 1.18; letter-spacing: -.01em; margin-bottom: .35em; } .manifest-line em { font-style: italic; color: var(--ember); } .manifest .mono { display: block; margin-bottom: 2.2rem; } /* ── Scroll-Story „Vom Markt zur Glut" ── */ .story { padding-block: var(--section); } .story-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; } .story-rail { position: sticky; top: clamp(4.5rem, 14vh, 8rem); } .story-rail h2 { font-size: clamp(2.3rem, 5vw, 4.2rem); margin-bottom: 1.2rem; } .story-rail h2 em { font-style: italic; color: var(--ember); } .story-count { font-family: var(--mono); font-size: .78rem; letter-spacing: .2em; color: var(--text-muted); } .story-count b { color: var(--ember); font-weight: 600; } .chapter { margin-bottom: clamp(3rem, 8vh, 6rem); } .chapter:last-child { margin-bottom: 0; } .chapter-visual { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10.5; isolation: isolate; } .chapter-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Komponierte Glut-Panels — tragen auch OHNE Foto (Asset-Slots, siehe CONCEPT) */ .chapter-visual.ph-markt { background: linear-gradient(135deg, #E9D9BF, #F4E8D3 45%, #DCC49C); } .chapter-visual.ph-feuer { background: linear-gradient(150deg, #2A1A10, #160E09 55%, #3A1C0D); } .chapter-visual.ph-abend { background: linear-gradient(160deg, #1B1310, #100C0A 60%, #241310); } .chapter-visual .ph-num { position: absolute; right: 1.6rem; bottom: .4rem; z-index: 2; font-family: var(--display); font-weight: 600; font-style: italic; font-size: clamp(5rem, 11vw, 9rem); line-height: 1; opacity: .16; } .chapter-visual .ph-glow { position: absolute; inset: 0; background: radial-gradient(85% 60% at 30% 100%, rgba(255, 107, 43, .35), transparent 65%); } .chapter-visual.ph-markt .ph-glow { background: radial-gradient(85% 70% at 70% 0%, rgba(255, 214, 140, .55), transparent 65%); } .chapter-body { padding: 1.4rem .35rem 0; max-width: 32rem; } .chapter-body .mono { display: block; margin-bottom: .6rem; } .chapter-body h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: .55rem; } .chapter-body p { color: var(--text-muted); } @media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; } .story-rail { position: static; margin-bottom: 2.5rem; } } /* Ambient-Fire: seitenweiter Funken-Layer — fixed HINTER dem Content (z -1 liegt über dem Body-Grund, unter allen Sektions-Inhalten). */ .ambient-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease-warm); } .ambient-canvas.on { opacity: 1; } .story .wrap { position: relative; z-index: 1; } /* Manifest: zartes Konturlinien-Feld (Topo-Pattern) füllt die helle Leere */ .manifest::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600' viewBox='0 0 900 600' fill='none'%3E%3Cg stroke='%23C2451E' stroke-opacity='0.10' stroke-width='1.2'%3E%3Cpath d='M-50 120 C 150 60, 300 180, 480 130 S 800 80, 950 150'/%3E%3Cpath d='M-50 170 C 160 110, 310 230, 490 180 S 810 130, 950 200'/%3E%3Cpath d='M-50 225 C 170 165, 320 285, 500 235 S 820 185, 950 255'/%3E%3Cpath d='M-50 360 C 130 420, 330 300, 520 370 S 790 440, 950 380'/%3E%3Cpath d='M-50 415 C 140 475, 340 355, 530 425 S 800 495, 950 435'/%3E%3Cpath d='M-50 472 C 150 532, 350 412, 540 482 S 810 552, 950 492'/%3E%3C/g%3E%3C/svg%3E"); background-size: clamp(700px, 90vw, 1100px) auto; background-position: center; } .manifest .wrap { position: relative; z-index: 1; } /* ── Speisekarte (editoriale Liste + Pass-Bild) ── */ .menu .wrap { max-width: 1180px; } .menu-grid { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 14fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: start; } .menu-visual { position: sticky; top: clamp(4.5rem, 12vh, 7rem); margin: 0; border-radius: 18px; overflow: hidden; } .menu-visual img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .menu-visual figcaption { position: absolute; left: 1.1rem; bottom: .9rem; color: rgba(244, 237, 228, .85); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); } .menu-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16, 12, 10, .45), transparent 38%); } /* Gericht-Hover: Pass-Bild blendet zum gehoverten Gericht (app.js setzt data-show, nur hover-fähige Geräte) */ .menu-visual .dish-layer { position: absolute; inset: 0; height: 100%; opacity: 0; } html[data-anim] .menu-visual .dish-layer { transition: opacity .55s var(--ease-warm); } .menu-visual[data-show="lauch"] [data-dish-img="lauch"], .menu-visual[data-show="dessert"] [data-dish-img="dessert"] { opacity: 1; } @media (max-width: 900px) { .menu-grid { grid-template-columns: 1fr; } .menu-visual { position: static; } .menu-visual img { aspect-ratio: 16 / 10; } } .menu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 3rem; } .menu-head h2 { font-size: clamp(2.3rem, 5vw, 4.2rem); } .menu-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .menu-item { border-bottom: 1px solid var(--line); } .menu-row { display: grid; grid-template-columns: 1fr auto; gap: .3rem 2rem; align-items: baseline; padding: 1.5rem .25rem; position: relative; cursor: default; } .menu-row::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--ember); transition: width .5s var(--ease-warm); } .menu-row:hover::after { width: 100%; } .menu-name { font-family: var(--display); font-weight: 600; font-size: clamp(1.35rem, 2.4vw, 1.9rem); display: inline-flex; align-items: baseline; transition: color .35s var(--ease-warm); } /* Glut-Pfeil schiebt sich beim Hover vor den Namen (transform = kein Reflow) */ .menu-name::before { content: "→"; color: var(--ember); font-family: var(--body); font-weight: 600; display: inline-block; width: 0; overflow: visible; opacity: 0; transform: translateX(-14px); transition: opacity .35s var(--ease-warm), transform .35s var(--ease-warm); } .menu-row:hover .menu-name { color: var(--ember); font-style: italic; } .menu-row:hover .menu-name::before { opacity: 1; transform: translateX(-2px); padding-right: .45em; } .menu-desc { grid-column: 1; color: var(--text-muted); font-size: .98rem; max-width: 36rem; } .menu-price { font-family: var(--mono); font-weight: 500; font-size: 1rem; color: var(--ember); white-space: nowrap; } .menu-note { margin-top: 1.6rem; font-size: .9rem; color: var(--text-muted); } /* ── Raum (horizontaler Streifen) ── */ .raum-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(72%, 1fr); gap: 1.2rem; overflow-x: auto; padding: 0 var(--gutter) 1rem; scroll-snap-type: x mandatory; scrollbar-width: none; } .raum-track::-webkit-scrollbar { display: none; } @media (min-width: 900px) { .raum-track { grid-auto-columns: minmax(44%, 1fr); } } .raum-card { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; scroll-snap-align: center; isolation: isolate; transition: transform .55s var(--ease-warm); } /* wie von Hand gelegt — Hover richtet sie auf */ .raum-card:nth-child(1) { transform: rotate(-1.2deg); } .raum-card:nth-child(2) { transform: rotate(.9deg) translateY(.6rem); } .raum-card:nth-child(3) { transform: rotate(-.7deg); } .raum-card:hover { transform: rotate(0) translateY(0) scale(1.015); } .raum-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .raum-card.ph-1 { background: linear-gradient(140deg, #20150F, #100C0A 55%, #2E1810); } .raum-card.ph-2 { background: linear-gradient(200deg, #1A1009, #140D09 50%, #30190E); } .raum-card.ph-3 { background: linear-gradient(120deg, #241510, #0F0B09 60%, #1F120C); } .raum-card .ph-glow { position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 110%, rgba(255, 107, 43, .3), transparent 70%); } .raum-card figcaption { position: absolute; left: 1.2rem; bottom: 1rem; z-index: 2; font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 237, 228, .85); } /* ── Stimmen ── */ .quotes .wrap { max-width: 980px; } .quote { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 3.6vw, 2.9rem); line-height: 1.3; margin-bottom: 2.6rem; } .quote .mono { display: block; font-style: normal; margin-top: 1.1rem; } /* ── Reservieren ── */ .reserve { text-align: center; } .reserve h2 { font-size: clamp(2.6rem, 7vw, 5.6rem); margin-bottom: 1.2rem; } .reserve h2 em { font-style: italic; color: var(--ember); } .reserve-sub { color: var(--text-muted); max-width: 30rem; margin-inline: auto; } .reserve-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; margin-top: 2.4rem; } .reserve-meta { display: grid; gap: .4rem; margin-top: 3.4rem; font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; color: var(--text-muted); } .reserve-meta b { color: var(--text); font-weight: 500; } /* ── Footer ── */ .footer { border-top: 1px solid var(--line); padding: 2.2rem var(--gutter) calc(2.2rem + 64px); /* Platz für Sticky-Bar */ display: flex; flex-wrap: wrap; gap: .8rem 2rem; align-items: center; justify-content: space-between; font-size: .88rem; color: var(--text-muted); } .footer a { color: var(--ember); text-decoration: none; } .footer a:hover { text-decoration: underline; } @media (min-width: 761px) { .footer { padding-bottom: 2.2rem; } } /* ── Glut-Puls auf primärem CTA (nur volle Motion) ── */ html[data-anim] .btn-ember { animation: emberPulse 4.2s var(--ease-warm) infinite; } @keyframes emberPulse { 0%, 100% { box-shadow: 0 6px 28px rgba(255, 107, 43, .26); } 50% { box-shadow: 0 8px 44px rgba(255, 107, 43, .5); } } /* ── Reservierungs-Modal (Demo) ── */ .bk-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgba(10, 7, 5, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .28s var(--ease-warm); } /* PFLICHT: display-Regel schlägt sonst das hidden-Attribut → unsichtbares Overlay fängt ALLE Klicks der Seite (live erlebt 2026-06-11) */ .bk-overlay[hidden] { display: none; } .bk-overlay.open { opacity: 1; } .bk-card { position: relative; width: min(34rem, 100%); max-height: calc(100svh - 2rem); overflow-y: auto; background: #1B1410; color: #F4EDE4; border: 1px solid rgba(255, 107, 43, .22); border-radius: 22px; padding: clamp(1.4rem, 4vw, 2.2rem); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(255, 107, 43, .08); transform: translateY(14px) scale(.985); transition: transform .28s var(--ease-warm); outline: none; } .bk-overlay.open .bk-card { transform: none; } .bk-card h3 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); margin: .35rem 0 1.4rem; } .bk-card h3 em { font-style: italic; color: #FF6B2B; } .bk-x { position: absolute; top: 1rem; right: 1rem; width: 42px; height: 42px; display: grid; place-items: center; background: transparent; color: #F4EDE4; border: 1px solid rgba(244, 237, 228, .16); border-radius: 50%; cursor: pointer; transition: border-color .25s, color .25s; } .bk-x:hover { border-color: #FF6B2B; color: #FF6B2B; } .bk-label { font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #FF6B2B; margin: 1.1rem 0 .5rem; display: block; } .bk-label-sub { color: rgba(244, 237, 228, .5); text-transform: none; letter-spacing: .04em; margin-left: .4rem; } .bk-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); gap: .45rem; overflow-x: auto; padding-bottom: .35rem; scrollbar-width: thin; } .bk-day { display: grid; gap: .1rem; justify-items: center; padding: .55rem .3rem; background: rgba(244, 237, 228, .04); color: #F4EDE4; border: 1px solid rgba(244, 237, 228, .12); border-radius: 12px; cursor: pointer; font-family: var(--mono); transition: border-color .2s, background .2s; } .bk-day span { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(244, 237, 228, .55); } .bk-day strong { font-size: .82rem; font-weight: 600; } .bk-day:hover:not(:disabled) { border-color: rgba(255, 107, 43, .55); } .bk-day.sel { background: rgba(255, 107, 43, .14); border-color: #FF6B2B; } .bk-day:disabled { opacity: .32; cursor: not-allowed; } .bk-slots { display: flex; flex-wrap: wrap; gap: .45rem; min-height: 44px; } .bk-slot { min-height: 44px; padding: .5rem .95rem; border-radius: 999px; background: rgba(244, 237, 228, .04); color: #F4EDE4; border: 1px solid rgba(244, 237, 228, .12); cursor: pointer; font-family: var(--mono); font-size: .82rem; transition: border-color .2s, background .2s; } .bk-slot:hover { border-color: rgba(255, 107, 43, .55); } .bk-slot.sel { background: rgba(255, 107, 43, .16); border-color: #FF6B2B; } .bk-row { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: start; margin-top: .4rem; } .bk-stepper { display: inline-flex; align-items: center; gap: .15rem; border: 1px solid rgba(244, 237, 228, .14); border-radius: 999px; padding: .2rem; } .bk-stepper button { width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; background: transparent; color: #F4EDE4; font-size: 1.25rem; line-height: 1; transition: background .2s; } .bk-stepper button:hover { background: rgba(255, 107, 43, .15); } .bk-stepper output { min-width: 2ch; text-align: center; font-family: var(--mono); font-weight: 600; font-size: 1.05rem; } .bk-fields { display: grid; gap: .15rem; } .bk-fields input { width: 100%; min-height: 46px; padding: .6rem .85rem; background: rgba(244, 237, 228, .05); color: #F4EDE4; border: 1px solid rgba(244, 237, 228, .14); border-radius: 10px; font-family: var(--body); font-size: .98rem; transition: border-color .2s; } .bk-fields input:focus { outline: none; border-color: #FF6B2B; } .bk-fields input::placeholder { color: rgba(244, 237, 228, .35); } .bk-error { min-height: 1.3em; margin: .7rem 0 0; color: #FF9C6B; font-size: .9rem; } .bk-submit { width: 100%; justify-content: center; margin-top: .4rem; border: 0; cursor: pointer; } .bk-alt { margin-top: 1rem; text-align: center; font-size: .88rem; color: rgba(244, 237, 228, .55); } .bk-alt a { color: #FF6B2B; text-decoration: none; } .bk-demo { display: block; margin-top: 1.3rem; text-align: center; font-size: .6rem; color: rgba(244, 237, 228, .35); } [data-bk-done] { text-align: center; padding: 1.2rem 0 .4rem; } [data-bk-done] h3 { margin-bottom: .8rem; } .bk-summary { font-size: 1.05rem; line-height: 1.6; } .bk-note { margin-top: .6rem; color: rgba(244, 237, 228, .6); } .bk-close-done { margin-top: 1.5rem; border-color: rgba(244, 237, 228, .28); color: #F4EDE4; } .bk-check { width: 64px; height: 64px; margin: 0 auto 1rem; } .bk-check svg { width: 100%; height: 100%; stroke: #FF6B2B; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } html[data-anim] .bk-check circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: bkDraw .7s var(--ease-warm) forwards; } html[data-anim] .bk-check path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: bkDraw .45s var(--ease-warm) .55s forwards; } @keyframes bkDraw { to { stroke-dashoffset: 0; } } /* ── Reduced Motion: alles steht, nichts fehlt ── */ @media (prefers-reduced-motion: reduce) { html:not([data-force-motion]) .hero::after { animation: none; opacity: .55; } html:not([data-force-motion]) .btn-ember { animation: none; } html:not([data-force-motion]) * { transition-duration: .01ms !important; } }