/* ============================================================ Geschmackssache — Layout: horizontal scroll, nav, footer ------------------------------------------------------------ Three scroll modes, toggled by a class on : (default / no JS) → native sideways scroll-snap (works everywhere) .mode-pin → GSAP scroll-jacked horizontal (desktop) .mode-stack → vertical stack (reduced motion) ============================================================ */ /* ---- Horizontal scroll shell ---- */ .hscroll { position: relative; height: 100dvh; overflow: hidden; z-index: 2; } .hscroll__track { display: flex; height: 100%; overflow-x: auto; overflow-y: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .hscroll__track::-webkit-scrollbar { display: none; } /* Track sits above any sticky background sequence layer */ .hscroll__track { position: relative; z-index: 1; } .panel { flex: 0 0 100vw; height: 100%; scroll-snap-align: start; position: relative; /* Panel selbst scrollt NICHT mehr — der Hintergrund (.bg-atmos) und die Nummer (.panel__no) bleiben dadurch fixiert. Nur der innere .panel__scroll-Container scrollt vertikal. */ overflow: hidden; } /* Innerer Scroll-Container: trägt den eigentlichen Text/Karten-Inhalt. Wird per JS (scroll-nav.js) erzeugt; bg-atmos und panel__no bleiben außerhalb. */ .panel__scroll { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: safe center; /* safe = kein abgeschnittener, unerreichbarer Top bei Overflow */ padding: var(--panel-pad); /* Mindestens ~48px Luft zwischen Nav-Logo und Panel-Inhalt (Überschrift). */ padding-top: max(var(--panel-pad), calc(var(--nav-h) + var(--space-12))); padding-bottom: clamp(35px, 3rem + 4vw, 50px); padding-right: clamp(2.25rem, 4vw, 3.5rem); /* Platz für die Scrollbar rechts */ overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .panel__scroll::-webkit-scrollbar { display: none; } /* Footer wird nicht in einen .panel__scroll verpackt (eigenes Grid). Da .panel sein Flex-Layout + Padding an .panel__scroll abgegeben hat, bekommt das Footer-Panel beides direkt zurück und darf selbst scrollen. */ .panel.footer { display: flex; flex-direction: column; padding: var(--panel-pad); padding-top: max(var(--panel-pad), calc(var(--nav-h) + var(--space-12))); padding-bottom: clamp(35px, 3rem + 4vw, 50px); overflow-y: auto; overflow-x: hidden; } /* Wider editorial panels for content-heavy sections. Inhalt oben ausrichten, damit dichte Karten-Panels (Menü/Getränke) ihre Überschriften konsistent direkt unter dem Logo zeigen statt zentriert nach oben zu drücken. */ .panel--wide { flex-basis: clamp(100vw, 100vw, 140vw); } .panel--wide .panel__scroll { justify-content: flex-start; padding-bottom: clamp(60px, 4rem + 8vw, 120px); } @media (min-width: 1024px) { .panel--wide { flex-basis: 120vw; } } @media (max-width: 1024px) { .panel--wide { flex-basis: 100vw; } } /* ---- Mode: GSAP pinned horizontal (desktop) ---- */ .mode-pin .hscroll__track { overflow: visible; scroll-snap-type: none; width: max-content; } /* ---- Mode: vertical stack (reduced motion / opt-out) ---- */ .mode-stack .hscroll { height: auto; overflow: visible; } .mode-stack .hscroll__track { flex-direction: column; overflow: visible; scroll-snap-type: none; width: auto; } .mode-stack .panel { flex-basis: auto; min-height: auto; height: auto; width: 100%; overflow: visible; } /* Stack-Modus: kein eigener Scroll-Container — Inhalt fließt mit der Seite. */ .mode-stack .panel__scroll { position: static; inset: auto; height: auto; overflow: visible; justify-content: flex-start; padding-bottom: clamp(50px, 3rem + 6vw, 100px); } .mode-stack .scroll-nav { display: none !important; } /* ---- Tablet / small desktop responsive adjustments ---- */ @media (max-width: 1024px) { .panel__scroll { padding: max(var(--space-8), calc(var(--nav-h) + var(--space-8))) clamp(2.25rem, 5vw, 3rem) clamp(2.5rem, 3rem + 3vw, 5rem) clamp(1rem, 4vw, 2rem); } .panel--wide .panel__scroll { padding-bottom: clamp(80px, 5rem + 10vw, 150px); } } @media (max-width: 900px) { .panel__scroll { padding: max(var(--space-6), calc(var(--nav-h) + var(--space-6))) clamp(2rem, 7vw, 2.5rem) clamp(2rem, 2.5rem + 3vw, 4rem) clamp(0.75rem, 3vw, 1.5rem); } .panel--wide .panel__scroll { padding-bottom: clamp(100px, 6rem + 12vw, 180px); } } /* ============================================================ Top navigation ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gutter); } /* Brand logo — two files, swapped by theme (white on dark, black on light) */ .nav__brand { display: inline-flex; align-items: center; line-height: 0; } .nav__logo { height: clamp(4rem, 2.6rem + 3.6vw, 6.4rem); width: auto; transition: opacity var(--dur-fast); } .nav__logo--dark { display: none; } .nav--on-light .nav__logo--light { display: none; } .nav--on-light .nav__logo--dark { display: block; } .nav__right { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); } .nav__reserve { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,0.5); padding: 0.7em 1.2em; border-radius: var(--radius); transition: background var(--dur-fast), color var(--dur-fast); } .nav__reserve svg { width: 1.05em; height: 1.05em; flex-shrink: 0; } .nav__reserve:hover { background: #fff; color: #000; } @media (max-width: 640px) { .nav__reserve { display: none; } } .nav__toggle { display: flex; flex-direction: column; gap: 5px; width: 30px; padding: 6px 0; color: #fff; } /* Light-background theme: dark logo + dark controls */ .nav--on-light .nav__reserve { color: var(--color-bg-deep); border-color: rgba(0,0,0,0.45); } .nav--on-light .nav__reserve:hover { background: #000; color: #fff; } .nav--on-light .nav__toggle { color: var(--color-bg-deep); } .nav__toggle span { display: block; height: 1.5px; width: 100%; background: currentColor; transition: transform var(--dur-normal) var(--ease-out-expo), opacity var(--dur-fast); } .nav-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-open .nav__toggle span:nth-child(2) { opacity: 0; } .nav-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Menu open → overlay is dark, force white logo + light controls */ .nav-open .nav__logo--light { display: block; } .nav-open .nav__logo--dark { display: none; } .nav-open .nav__toggle { color: #fff; } .nav-open .nav__reserve { color: #fff; border-color: rgba(255,255,255,0.5); } /* ============================================================ Fullscreen menu overlay ============================================================ */ .menu-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--color-bg-deep); display: grid; grid-template-rows: 1fr auto; padding: calc(var(--nav-h) + var(--space-8)) var(--gutter) var(--space-12); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path var(--dur-slow) var(--ease-out-expo), visibility 0s linear var(--dur-slow); } .nav-open .menu-overlay { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path var(--dur-slow) var(--ease-out-expo); } /* Explicit close (X) inside the overlay, top-right */ .menu-overlay__close { position: absolute; top: clamp(1rem, var(--nav-h) * 0.32, 2rem); right: var(--gutter); display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.35); color: #fff; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); } .menu-overlay__close svg { width: 1.25rem; height: 1.25rem; } .menu-overlay__close:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg-deep); transform: rotate(90deg); } .menu-overlay__nav { display: flex; flex-direction: column; justify-content: center; gap: clamp(0.2rem, 1vw, 0.6rem); } .menu-overlay__link { font-family: var(--font-display); font-size: clamp(2.4rem, 1.5rem + 6vw, 6rem); font-weight: 500; line-height: 1.05; color: var(--color-text); width: max-content; max-width: 100%; position: relative; transition: color var(--dur-normal), letter-spacing var(--dur-normal) var(--ease-out-expo); } .menu-overlay__link .idx { font-family: var(--font-sans); font-size: 0.85rem; vertical-align: super; color: var(--color-accent); margin-right: 0.5em; font-weight: 400; } .menu-overlay__link:hover, .menu-overlay__link[aria-current="page"] { color: var(--color-accent); letter-spacing: 0.01em; } .menu-overlay__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-6); padding-top: var(--space-8); border-top: 1px solid var(--color-line); color: var(--color-text-dim); font-size: var(--text-sm); } .menu-overlay__foot a:hover { color: var(--color-accent); } .menu-overlay__legal { display: flex; gap: var(--space-6); flex-wrap: wrap; } /* ============================================================ Footer panel (last panel of every page) ============================================================ */ .footer { background: var(--color-bg-deep); justify-content: flex-end; gap: var(--space-8); } .footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-12); } .footer__mark { display: inline-block; line-height: 0; } .footer__mark img { width: clamp(8.5rem, 6rem + 11vw, 15rem); height: auto; } .footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-8); width: min(38rem, 100%); } .footer__col h4 { font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-3); font-weight: 400; } .footer__col li { margin-bottom: 0.4em; } .footer__col a, .footer__col p { color: var(--color-text-dim); font-size: var(--text-sm); } .footer__col a:hover { color: var(--color-text); } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--color-line); font-size: var(--text-xs); color: var(--color-text-faint); letter-spacing: 0.04em; } .footer__bottom > span { white-space: nowrap; } .footer__bottom a:hover { color: var(--color-accent); } /* Build credit */ .footer__credit { margin-top: var(--space-4); text-align: center; font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-text-faint); } .footer__credit-heart { width: 1em; height: 1em; margin: 0 0.1em; vertical-align: -0.12em; color: var(--color-accent); } .footer__credit a { color: var(--color-accent); transition: color var(--dur-fast); } .footer__credit a:hover { color: var(--color-accent-soft); text-decoration: underline; } .footer__admin { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 0.85em; opacity: 0.7; color: var(--color-text-faint); transition: color var(--dur-fast), opacity var(--dur-fast), transform var(--dur-normal) var(--ease-out-expo); } .footer__admin svg { display: block; } .footer__admin:hover { color: var(--color-accent); opacity: 1; transform: rotate(60deg); } /* Generic content container for inner-page panels */ .measure { max-width: var(--maxw); } .stack > * + * { margin-top: var(--space-6); } /* ============================================================ Scrollbar: verstecken ============================================================ */ .panel { scrollbar-width: none; } .panel::-webkit-scrollbar { display: none; } /* ============================================================ Slider-Navigation: oben/unten Pfeile + Scrollbar-Track ============================================================ */ .scroll-nav { /* Pro Panel eingebunden (absolut im Panel), vertikal mittig am rechten Rand. Fährt dadurch mit dem Panel mit und scrollt nicht mit dem Inhalt. */ position: absolute; right: clamp(0.5rem, 1.4vw, 1.25rem); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.75rem; z-index: 6; transition: opacity var(--dur-fast); } .scroll-nav__btn { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--color-accent); background: transparent; color: var(--color-accent); border-radius: var(--radius); cursor: pointer; transition: all var(--dur-fast); font-size: 1.2rem; } .scroll-nav__btn:hover:not(:disabled) { background: var(--color-accent); color: var(--color-bg-deep); } .scroll-nav__btn:disabled { opacity: 0.3; cursor: not-allowed; } /* Scrollbar track (500px) */ .scroll-nav__track { width: 2px; height: clamp(180px, 40vh, 500px); background: color-mix(in oklch, var(--color-accent) 18%, transparent); border: none; border-radius: 1px; position: relative; cursor: pointer; } .scroll-nav__thumb { position: absolute; width: 100%; height: 24px; background: var(--color-accent); border-radius: 1px; top: 0; cursor: grab; transition: background var(--dur-fast); } .scroll-nav__thumb:hover { background: var(--color-accent-soft); } .scroll-nav__thumb:active { cursor: grabbing; }