Website Chickago Boys: Startseite, Speisekarte, Impressum/Datenschutz-Entwurf
Statische One-Page-Website im Stil von cravburgers.shop, aber mit eigenem "Fight Night"-Konzept rund um den Boxer-Hahn aus dem Logo: - Startseite mit Knockout-Hero, Favoriten, Wings, Buckets, Take away, Öffnungszeiten mit Live-Status und Bestell-CTAs (Lieferando, Uber Eats, Telefon) - Speisekarte mit allen Gerichten und Preisen (Stand Lieferando 30.09.2026) - Logo als Vektor nachgezeichnet, Speisenfotos freigestellt und als WebP optimiert - Schriften, GSAP und Lenis lokal eingebunden: keine Cookies, kein Tracking - Impressum und Datenschutz als Entwurf mit markierten Platzhaltern Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Opus 5.5 committed
1 parent
ca9d191c3f
commit
554213f71d
40 files changed
+2388
No files matched your search
@@ -0,0 +1,796 @@
|
||||
@font-face {
|
||||
font-family: 'Anton';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(../fonts/anton-latin.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Archivo';
|
||||
font-style: normal;
|
||||
font-weight: 400 800;
|
||||
font-stretch: 100%;
|
||||
font-display: swap;
|
||||
src: url(../fonts/archivo-latin.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Titan One';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(../fonts/titan-one-latin.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* ============ Tokens ============ */
|
||||
:root {
|
||||
--cream: #f7ebd9;
|
||||
--cream-2: #efdcc0;
|
||||
--red: #e0140e;
|
||||
--red-deep: #b30d0a;
|
||||
--comb: #8e0a0c;
|
||||
--yellow: #ffd21f;
|
||||
--yellow-2: #f5b400;
|
||||
--skin: #f7d7b7;
|
||||
--ink: #150d0c;
|
||||
--ink-2: #2a1d1b;
|
||||
--white: #fff;
|
||||
|
||||
--f-display: "Anton", "Impact", "Arial Narrow", sans-serif;
|
||||
--f-sticker: "Titan One", "Arial Black", sans-serif;
|
||||
--f-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
|
||||
--gutter: clamp(1rem, 3.2vw, 3rem);
|
||||
--radius: clamp(18px, 2vw, 30px);
|
||||
--shadow: 0 18px 40px rgba(21, 13, 12, .18);
|
||||
--ease-pop: cubic-bezier(.34, 1.56, .64, 1);
|
||||
--nav-h: 76px;
|
||||
}
|
||||
|
||||
/* ============ Base ============ */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
|
||||
html.lenis, html.lenis body { height: auto; }
|
||||
.lenis.lenis-smooth { scroll-behavior: auto !important; }
|
||||
html, body { overflow-x: clip; }
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--cream);
|
||||
color: var(--ink);
|
||||
font-family: var(--f-body);
|
||||
font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
|
||||
line-height: 1.55;
|
||||
overflow-x: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
img, svg { display: block; max-width: 100%; height: auto; }
|
||||
a { color: inherit; }
|
||||
button { font: inherit; color: inherit; }
|
||||
p { margin: 0 0 1em; }
|
||||
p:last-child { margin-bottom: 0; }
|
||||
::selection { background: var(--yellow); color: var(--ink); }
|
||||
|
||||
:focus-visible {
|
||||
outline: 3px solid var(--ink);
|
||||
outline-offset: 3px;
|
||||
box-shadow: 0 0 0 6px var(--white);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.on-dark :focus-visible, .on-red :focus-visible { outline-color: var(--yellow); box-shadow: 0 0 0 6px var(--ink); }
|
||||
|
||||
.sr-only {
|
||||
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
|
||||
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
|
||||
}
|
||||
.skip-link {
|
||||
position: fixed; left: 1rem; top: -100px; z-index: 2000;
|
||||
background: var(--ink); color: var(--cream); padding: .75rem 1.1rem; border-radius: 999px;
|
||||
font-weight: 700; text-decoration: none; transition: top .2s;
|
||||
}
|
||||
.skip-link:focus { top: 1rem; }
|
||||
|
||||
/* ============ Typography ============ */
|
||||
.display {
|
||||
font-family: var(--f-display);
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
line-height: .86;
|
||||
letter-spacing: .004em;
|
||||
margin: 0;
|
||||
}
|
||||
.stroke { -webkit-text-stroke: var(--sw, .075em) var(--stroke-c, var(--white)); paint-order: stroke fill; }
|
||||
.stroke--ink { --stroke-c: var(--ink); }
|
||||
.stroke--red { --stroke-c: var(--red); }
|
||||
|
||||
.h2 { font-size: clamp(3.4rem, 11.5vw, 11rem); color: var(--red); }
|
||||
.display.h2 { margin-bottom: .22em; }
|
||||
.h2--sm { font-size: clamp(3rem, 8.5vw, 8rem); }
|
||||
.lead { font-size: clamp(1.08rem, 1rem + .45vw, 1.35rem); max-width: 36ch; }
|
||||
.lead strong { font-weight: 800; }
|
||||
|
||||
.kicker {
|
||||
display: inline-block;
|
||||
font-family: var(--f-sticker);
|
||||
font-size: clamp(1rem, .8rem + 1vw, 1.7rem);
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
color: var(--red);
|
||||
-webkit-text-stroke: .22em var(--white);
|
||||
paint-order: stroke fill;
|
||||
transform: rotate(-5deg);
|
||||
margin-bottom: .55em;
|
||||
letter-spacing: .01em;
|
||||
}
|
||||
.kicker--yellow { color: var(--yellow); -webkit-text-stroke-color: var(--ink); }
|
||||
.kicker--ink { color: var(--ink); -webkit-text-stroke-color: var(--yellow); }
|
||||
|
||||
/* ============ Buttons ============ */
|
||||
.btn {
|
||||
--bg: var(--red); --fg: var(--white); --bd: var(--white);
|
||||
position: relative;
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: .55em;
|
||||
font-family: var(--f-sticker);
|
||||
text-transform: uppercase;
|
||||
font-size: clamp(1rem, .9rem + .5vw, 1.35rem);
|
||||
line-height: 1;
|
||||
letter-spacing: .02em;
|
||||
color: var(--fg);
|
||||
background: var(--bg);
|
||||
border: 4px solid var(--bd);
|
||||
padding: 1em 1.7em 1.05em;
|
||||
border-radius: 58% 42% 55% 45% / 55% 48% 52% 45%;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 22px rgba(21, 13, 12, .22);
|
||||
transition: border-radius .5s var(--ease-pop), transform .35s var(--ease-pop), background-color .2s, color .2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn:hover { border-radius: 42% 58% 45% 55% / 48% 55% 45% 52%; transform: rotate(-2deg) scale(1.05); }
|
||||
.btn:active { transform: scale(.97); }
|
||||
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
|
||||
.btn--yellow { --bg: var(--yellow); --fg: var(--ink); --bd: var(--ink); }
|
||||
.btn--ink { --bg: var(--ink); --fg: var(--cream); --bd: var(--cream); }
|
||||
.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--ink); box-shadow: none; }
|
||||
.on-dark .btn--ghost, .on-red .btn--ghost { --fg: var(--cream); --bd: var(--cream); }
|
||||
|
||||
.pill {
|
||||
display: inline-flex; align-items: center; gap: .5em;
|
||||
height: 46px; padding: 0 1.15em;
|
||||
border-radius: 999px;
|
||||
font-family: var(--f-sticker);
|
||||
font-size: 1rem; text-transform: uppercase; letter-spacing: .02em;
|
||||
text-decoration: none; cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
transition: transform .3s var(--ease-pop), background-color .2s, color .2s, border-color .2s;
|
||||
overflow: hidden;
|
||||
}
|
||||
.pill:hover { transform: scale(1.05); }
|
||||
.pill--red { background: var(--red); color: var(--white); }
|
||||
.pill--red:hover { background: var(--ink); }
|
||||
.pill--outline { background: rgba(247, 235, 217, .7); border-color: rgba(21, 13, 12, .25); color: var(--ink); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
|
||||
.pill--outline:hover { border-color: var(--ink); }
|
||||
.roll { display: inline-grid; height: 1.1em; overflow: hidden; line-height: 1.1; }
|
||||
.roll > span { grid-area: 1 / 1; transition: transform .3s cubic-bezier(.5, 0, .2, 1); }
|
||||
.roll > span + span { transform: translateY(110%); }
|
||||
.pill:hover .roll > span:first-child, .btn:hover .roll > span:first-child { transform: translateY(-110%); }
|
||||
.pill:hover .roll > span + span, .btn:hover .roll > span + span { transform: translateY(0); }
|
||||
|
||||
/* ============ Stickers ============ */
|
||||
.sticker {
|
||||
display: inline-block;
|
||||
font-family: var(--f-sticker);
|
||||
text-transform: uppercase;
|
||||
line-height: .95;
|
||||
text-align: center;
|
||||
padding: .55em .8em .6em;
|
||||
border-radius: 999px;
|
||||
background: var(--yellow);
|
||||
color: var(--ink);
|
||||
border: 4px solid var(--white);
|
||||
box-shadow: 0 8px 18px rgba(21, 13, 12, .25);
|
||||
font-size: clamp(.85rem, .7rem + .8vw, 1.45rem);
|
||||
transform: rotate(var(--r, -8deg));
|
||||
}
|
||||
.sticker--red { background: var(--red); color: var(--white); }
|
||||
.sticker--ink { background: var(--ink); color: var(--yellow); }
|
||||
.die-cut {
|
||||
filter:
|
||||
drop-shadow(3px 0 0 var(--white)) drop-shadow(-3px 0 0 var(--white))
|
||||
drop-shadow(0 3px 0 var(--white)) drop-shadow(0 -3px 0 var(--white))
|
||||
drop-shadow(0 12px 14px rgba(21, 13, 12, .28));
|
||||
}
|
||||
.burst {
|
||||
display: grid; place-items: center;
|
||||
width: clamp(92px, 11vw, 160px); aspect-ratio: 1;
|
||||
font-family: var(--f-sticker); text-transform: uppercase; text-align: center; line-height: .95;
|
||||
font-size: clamp(1rem, .8rem + 1vw, 1.7rem);
|
||||
color: var(--ink);
|
||||
background: var(--yellow);
|
||||
clip-path: polygon(50% 0, 61% 14%, 79% 7%, 80% 25%, 98% 28%, 88% 44%, 100% 58%, 83% 66%, 88% 85%, 69% 83%, 59% 100%, 47% 87%, 30% 97%, 26% 79%, 7% 77%, 14% 60%, 0 46%, 15% 36%, 9% 18%, 28% 17%, 36% 1%);
|
||||
transform: rotate(var(--r, 10deg));
|
||||
}
|
||||
.burst span { transform: translateY(2%); padding: 0 12%; }
|
||||
|
||||
/* ============ Layout helpers ============ */
|
||||
.wrap { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 var(--gutter); }
|
||||
.section { position: relative; padding: clamp(5rem, 11vw, 10rem) 0; }
|
||||
.bg-cream { background: var(--cream); }
|
||||
.bg-red { background: var(--red); color: var(--cream); }
|
||||
.bg-yellow { background: var(--yellow); color: var(--ink); }
|
||||
.bg-ink { background: var(--ink); color: var(--cream); }
|
||||
|
||||
.wave {
|
||||
position: absolute; left: 0; right: 0; height: clamp(40px, 7vw, 110px);
|
||||
pointer-events: none; z-index: 3; color: inherit;
|
||||
}
|
||||
.wave svg { width: 100%; height: 100%; }
|
||||
.wave--top { top: 1px; transform: translateY(-100%); }
|
||||
.wave--bottom { bottom: 1px; transform: translateY(100%) scaleY(-1); }
|
||||
.bg-red .wave { color: var(--red); }
|
||||
.bg-yellow .wave { color: var(--yellow); }
|
||||
.bg-ink .wave { color: var(--ink); }
|
||||
.bg-cream .wave { color: var(--cream); }
|
||||
|
||||
/* ============ Header / Nav ============ */
|
||||
.nav {
|
||||
position: fixed; inset: 0 0 auto 0; z-index: 900;
|
||||
height: var(--nav-h);
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0 var(--gutter);
|
||||
transition: transform .35s cubic-bezier(.2, .8, .2, 1);
|
||||
}
|
||||
.nav.is-hidden { transform: translateY(calc(-100% - 12px)); }
|
||||
.nav__brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
|
||||
.nav__brand img { height: 58px; width: auto; }
|
||||
.nav__brand .wm { width: 150px; height: auto; color: var(--ink); }
|
||||
.nav__actions { display: flex; align-items: center; gap: .6rem; }
|
||||
.nav.is-dark .nav__brand .wm { color: var(--cream); }
|
||||
.nav.is-dark .pill--outline { background: rgba(21, 13, 12, .55); border-color: rgba(247, 235, 217, .35); color: var(--cream); }
|
||||
.nav.is-dark .pill--outline:hover { border-color: var(--cream); }
|
||||
.nav__brand .wm { transition: color .3s; }
|
||||
.nav__burger { display: inline-grid; gap: 4px; width: 18px; }
|
||||
.nav__burger i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s, opacity .2s; }
|
||||
.nav__burger i:nth-child(2) { width: 70%; margin-left: auto; }
|
||||
.nav.is-open .nav__burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
|
||||
.nav.is-open .nav__burger i:nth-child(2) { opacity: 0; }
|
||||
.nav.is-open .nav__burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
|
||||
|
||||
.menu-overlay {
|
||||
position: fixed; inset: 0; z-index: 880;
|
||||
background: rgba(224, 20, 14, .28);
|
||||
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
|
||||
opacity: 0; visibility: hidden; transition: opacity .28s, visibility .28s;
|
||||
}
|
||||
.menu-panel {
|
||||
position: fixed; z-index: 890;
|
||||
top: calc(var(--nav-h) + 4px); right: var(--gutter);
|
||||
width: min(360px, calc(100vw - 2 * var(--gutter)));
|
||||
background: var(--red); color: var(--cream);
|
||||
border-radius: 26px; border: 4px solid var(--white);
|
||||
padding: 1.4rem 1.6rem 1.5rem;
|
||||
box-shadow: 0 24px 60px rgba(21, 13, 12, .35);
|
||||
transform-origin: top right;
|
||||
transform: scale(.3); opacity: 0; visibility: hidden;
|
||||
transition: transform .5s var(--ease-pop), opacity .25s, visibility .5s;
|
||||
}
|
||||
body.menu-open .menu-overlay { opacity: 1; visibility: visible; }
|
||||
body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visible; }
|
||||
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
|
||||
.menu-panel li a {
|
||||
display: block; padding: .18em 0;
|
||||
font-family: var(--f-sticker); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); line-height: 1.1;
|
||||
text-transform: uppercase; text-decoration: none; color: var(--cream);
|
||||
transition: color .2s, transform .3s var(--ease-pop);
|
||||
transform-origin: left center;
|
||||
}
|
||||
.menu-panel li a:hover { color: var(--yellow); transform: scale(1.05) rotate(-2deg); }
|
||||
.menu-panel .menu-panel__meta { margin-top: 1rem; padding-top: 1rem; border-top: 2px solid rgba(247, 235, 217, .3); font-size: .95rem; line-height: 1.45; }
|
||||
.menu-panel__meta a { color: var(--yellow); font-weight: 700; text-decoration: none; }
|
||||
|
||||
/* ============ Hero ============ */
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: 100svh;
|
||||
padding: calc(var(--nav-h) + 1rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem);
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero__stage { position: relative; display: grid; place-items: center; }
|
||||
.hero__title { position: relative; z-index: 1; text-align: left; margin: 0; }
|
||||
.hero__eyebrow {
|
||||
display: block;
|
||||
font-family: var(--f-sticker); text-transform: uppercase; line-height: 1.1;
|
||||
font-size: clamp(.95rem, .7rem + 1.1vw, 1.7rem);
|
||||
color: var(--ink); letter-spacing: .02em;
|
||||
margin: 0 0 1.1em .35em;
|
||||
}
|
||||
.hero__eyebrow > span { display: block; }
|
||||
.hero__big {
|
||||
display: block;
|
||||
font-family: var(--f-display); text-transform: uppercase;
|
||||
font-size: clamp(6rem, 22.5vw, 26rem);
|
||||
line-height: .82; color: var(--red);
|
||||
-webkit-text-stroke: .055em var(--white); paint-order: stroke fill;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.hero__big .part { display: inline-block; letter-spacing: .02em; }
|
||||
.hero__burger {
|
||||
position: absolute; z-index: 2;
|
||||
left: 50%; top: 57%;
|
||||
width: clamp(250px, 33vw, 600px);
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero__burger img { width: 100%; height: auto; filter: drop-shadow(0 30px 30px rgba(21, 13, 12, .3)); }
|
||||
.hero__wm {
|
||||
position: absolute; z-index: 3;
|
||||
left: 50%; top: 82%;
|
||||
width: clamp(240px, 34vw, 600px);
|
||||
transform: translate(-50%, -50%) rotate(-6deg);
|
||||
color: var(--red);
|
||||
}
|
||||
.hero__wm svg, .hero__wm img { width: 100%; height: auto; }
|
||||
.hero__wm .wm-fill { filter: drop-shadow(4px 0 0 var(--white)) drop-shadow(-4px 0 0 var(--white)) drop-shadow(0 4px 0 var(--white)) drop-shadow(0 -4px 0 var(--white)) drop-shadow(0 10px 12px rgba(21, 13, 12, .25)); }
|
||||
.hero__st1 { position: absolute; z-index: 4; left: 3%; top: 70%; --r: -12deg; }
|
||||
.hero__st2 { position: absolute; z-index: 4; right: 4%; top: 68%; --r: 9deg; }
|
||||
.hero__rooster { position: absolute; z-index: 4; right: 9%; top: 2%; width: clamp(80px, 9vw, 150px); transform: rotate(12deg); }
|
||||
.hero__bottom {
|
||||
position: relative; z-index: 5;
|
||||
display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.5rem 3rem;
|
||||
margin-top: clamp(1rem, 2vw, 2rem);
|
||||
}
|
||||
.hero__bottom .lead { max-width: 34ch; font-weight: 500; }
|
||||
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: flex-end; align-items: center; }
|
||||
|
||||
.open-badge {
|
||||
display: inline-flex; align-items: center; gap: .55em;
|
||||
font-weight: 700; font-size: .95rem;
|
||||
padding: .45em .9em; border-radius: 999px;
|
||||
background: var(--white); color: var(--ink);
|
||||
box-shadow: 0 4px 12px rgba(21, 13, 12, .12);
|
||||
}
|
||||
.open-badge::before {
|
||||
content: ""; width: .7em; height: .7em; border-radius: 50%;
|
||||
background: #9c9c9c;
|
||||
}
|
||||
.open-badge.is-open::before { background: #1fa83a; box-shadow: 0 0 0 0 rgba(31, 168, 58, .6); animation: ping 1.8s infinite; }
|
||||
.open-badge.is-closed::before { background: var(--red); }
|
||||
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(31, 168, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 168, 58, 0); } }
|
||||
|
||||
/* ============ Ticker ============ */
|
||||
.ticker-clip { position: relative; z-index: 6; overflow: clip; padding: 1.6rem 0; margin: -1.6rem 0; }
|
||||
.ticker {
|
||||
position: relative; z-index: 6;
|
||||
background: var(--ink); color: var(--yellow);
|
||||
overflow: hidden; white-space: nowrap;
|
||||
transform: rotate(-2deg); margin: -1.2rem -2vw 0; padding: .9rem 0;
|
||||
border-block: 4px solid var(--white);
|
||||
}
|
||||
.ticker__track { display: inline-flex; gap: 2.2rem; animation: ticker 32s linear infinite; }
|
||||
.ticker__track span { font-family: var(--f-display); font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.8rem); text-transform: uppercase; line-height: 1; display: inline-flex; align-items: center; gap: 2.2rem; }
|
||||
.ticker__track span::after { content: "✦"; color: var(--red); font-size: .7em; }
|
||||
@keyframes ticker { to { transform: translateX(-50%); } }
|
||||
|
||||
/* ============ Champions ============ */
|
||||
.champs { text-align: center; overflow-x: clip; }
|
||||
.champs .h2 { max-width: 12ch; margin: 0 auto .3em; }
|
||||
.champs .lead { margin: 0 auto 2.2rem; }
|
||||
.champs__cards {
|
||||
display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 3rem);
|
||||
margin-top: clamp(3rem, 6vw, 5rem);
|
||||
perspective: 1200px;
|
||||
}
|
||||
.photo-card {
|
||||
position: relative; display: block; text-decoration: none; color: var(--ink);
|
||||
transform: rotate(var(--r, 0deg));
|
||||
transition: transform .6s var(--ease-pop);
|
||||
}
|
||||
.photo-card:nth-child(1) { --r: -5deg; }
|
||||
.photo-card:nth-child(2) { --r: 3deg; margin-top: 3rem; }
|
||||
.photo-card:nth-child(3) { --r: -3deg; }
|
||||
.photo-card:hover { transform: rotate(0deg) translateY(-8px) scale(1.02); }
|
||||
.photo-card__img { border-radius: var(--radius); overflow: hidden; border: 6px solid var(--white); box-shadow: var(--shadow); aspect-ratio: 4 / 5; background: #ececec; }
|
||||
.photo-card__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
|
||||
.photo-card:hover .photo-card__img img { transform: scale(1.14); }
|
||||
.photo-card__label { position: absolute; left: 50%; bottom: -1.2rem; transform: translateX(-50%) rotate(-3deg); width: max-content; max-width: 92%; }
|
||||
.photo-card__label .sticker { transform: none; font-size: clamp(.95rem, .8rem + .6vw, 1.3rem); }
|
||||
.photo-card__price { position: absolute; top: -1rem; right: -0.6rem; }
|
||||
|
||||
/* ============ Wings ============ */
|
||||
.wings { overflow-x: clip; }
|
||||
.wings__head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: end; }
|
||||
.wings .h2 { color: var(--cream); --stroke-c: var(--comb); }
|
||||
.wings__hero { position: relative; }
|
||||
.wings__hero img { width: 100%; max-width: 640px; margin-left: auto; }
|
||||
.wings__hero .burst { position: absolute; left: 0; top: 4%; --r: -12deg; }
|
||||
.wings__hero .rooster-st { position: absolute; right: 2%; bottom: -4%; width: clamp(90px, 10vw, 150px); transform: rotate(10deg); }
|
||||
.wings__lead { color: var(--cream); margin-top: 1.4rem; }
|
||||
.wings__lead em { font-family: var(--f-sticker); font-style: normal; color: var(--yellow); text-transform: uppercase; font-size: 1.1em; }
|
||||
|
||||
.sauce-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.8rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
|
||||
.sauce {
|
||||
position: relative;
|
||||
background: var(--cream); color: var(--ink);
|
||||
border-radius: var(--radius); border: 4px solid var(--white);
|
||||
padding: 1.1rem 1.1rem 1.3rem;
|
||||
text-align: center;
|
||||
box-shadow: 0 14px 30px rgba(80, 0, 0, .3);
|
||||
transition: transform .45s var(--ease-pop);
|
||||
}
|
||||
.sauce:nth-child(odd) { transform: rotate(-2deg); }
|
||||
.sauce:nth-child(even) { transform: rotate(2deg); }
|
||||
.sauce:hover { transform: rotate(0) translateY(-6px); }
|
||||
.sauce__img { aspect-ratio: 1; display: grid; place-items: center; margin: -2.6rem auto .4rem; width: 88%; }
|
||||
.sauce__img { position: relative; }
|
||||
.sauce__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease-pop); }
|
||||
.sauce:hover .sauce__img img { transform: scale(1.07) rotate(-4deg); }
|
||||
.sauce h3 { font-family: var(--f-display); text-transform: uppercase; font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); line-height: .95; margin: 0 0 .35rem; color: var(--red-deep); }
|
||||
.sauce p { font-size: .95rem; margin: 0; }
|
||||
.sauce .price { display: inline-block; margin-top: .7rem; }
|
||||
|
||||
.price {
|
||||
font-family: var(--f-sticker); font-size: 1.05rem; line-height: 1;
|
||||
background: var(--ink); color: var(--yellow);
|
||||
padding: .5em .8em .55em; border-radius: 999px; white-space: nowrap;
|
||||
}
|
||||
.price--light { background: var(--yellow); color: var(--ink); }
|
||||
|
||||
.classic-wings {
|
||||
margin-top: clamp(2.5rem, 5vw, 4rem);
|
||||
display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem 2rem; align-items: center;
|
||||
background: var(--ink); color: var(--cream);
|
||||
border: 4px solid var(--white); border-radius: calc(var(--radius) + 6px);
|
||||
padding: clamp(1.2rem, 2.5vw, 2rem) clamp(1.2rem, 3vw, 2.6rem);
|
||||
}
|
||||
.classic-wings h3 { margin: 0; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 1.4rem + 2vw, 3.4rem); line-height: .9; color: var(--yellow); }
|
||||
.classic-wings p { margin: 0; opacity: .9; }
|
||||
.classic-wings__prices { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
|
||||
.classic-wings__prices .price { background: var(--red); color: var(--white); }
|
||||
.classic-wings__prices .price small { font-family: var(--f-body); font-weight: 700; font-size: .8em; opacity: .9; margin-right: .3em; }
|
||||
|
||||
/* ============ Photo band ============ */
|
||||
.band { position: relative; height: clamp(360px, 70vw, 900px); overflow: hidden; background: #d9c8b2; }
|
||||
.band img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; }
|
||||
.band .wave { color: var(--red); }
|
||||
.band .wave--top { top: -1px; transform: none; }
|
||||
.band .wave--bottom { bottom: -1px; transform: scaleY(-1); }
|
||||
.band .wave--bottom { color: var(--ink); }
|
||||
.band__tag { position: absolute; z-index: 4; right: 6%; bottom: 16%; --r: 7deg; font-size: clamp(1rem, .7rem + 1.4vw, 2rem); }
|
||||
|
||||
/* ============ Buckets ============ */
|
||||
.buckets { overflow-x: clip; }
|
||||
.buckets .h2 { color: var(--yellow); --stroke-c: var(--red); font-size: clamp(3.4rem, 9.5vw, 9.5rem); }
|
||||
.buckets__head { display: grid; grid-template-columns: 1.4fr .6fr; gap: 2rem; align-items: end; }
|
||||
.buckets__head .lead { color: var(--cream); opacity: .92; }
|
||||
.fight-card-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; margin-top: clamp(3rem, 6vw, 5rem); }
|
||||
.vs { font-family: var(--f-display); font-size: clamp(3rem, 7vw, 7rem); color: var(--red); -webkit-text-stroke: .05em var(--cream); paint-order: stroke fill; line-height: 1; transform: rotate(-8deg); }
|
||||
.fight-card {
|
||||
position: relative;
|
||||
background: var(--cream); color: var(--ink);
|
||||
border: 5px solid var(--yellow);
|
||||
border-radius: calc(var(--radius) + 4px);
|
||||
padding: clamp(1.4rem, 3vw, 2.4rem);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 0 5px var(--ink), 0 0 0 9px var(--red), 0 30px 60px rgba(0, 0, 0, .45);
|
||||
}
|
||||
.fight-card::before {
|
||||
content: ""; position: absolute; inset: auto 0 0 0; height: 64px;
|
||||
background-color: #fff;
|
||||
background-image: linear-gradient(90deg, rgba(224, 20, 14, .55) 50%, transparent 50%), linear-gradient(rgba(224, 20, 14, .55) 50%, transparent 50%);
|
||||
background-size: 32px 32px;
|
||||
opacity: .9;
|
||||
}
|
||||
.fight-card__class { font-family: var(--f-sticker); text-transform: uppercase; color: var(--red-deep); font-size: 1rem; letter-spacing: .08em; }
|
||||
.fight-card h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; margin: .15em 0 .3em; font-size: clamp(2.8rem, 2rem + 3vw, 5rem); line-height: .86; color: var(--red); -webkit-text-stroke: .06em var(--white); paint-order: stroke fill; }
|
||||
.fight-card ul { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
|
||||
.fight-card li { background: var(--white); border: 2px solid var(--ink); border-radius: 999px; padding: .25em .7em; font-weight: 700; font-size: .92rem; }
|
||||
.fight-card__foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding-bottom: 38px; }
|
||||
.fight-card__foot .price { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
|
||||
.fight-card__foot img { width: clamp(120px, 13vw, 200px); margin: -4rem -1rem -2.4rem 0; }
|
||||
.buckets__note { margin-top: 2.5rem; text-align: center; opacity: .8; font-size: .95rem; }
|
||||
|
||||
/* ============ Take away (route) ============ */
|
||||
.takeaway { overflow-x: clip; }
|
||||
.takeaway .h2 { color: var(--white); --stroke-c: var(--ink); --sw: .045em; max-width: 13ch; }
|
||||
.takeaway__lead { max-width: 40ch; margin-top: 1.4rem; font-weight: 500; }
|
||||
.route { position: relative; margin-top: clamp(6rem, 10vw, 9rem); }
|
||||
.route__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
|
||||
.route__svg path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 10 12; stroke-linecap: round; opacity: .55; }
|
||||
.route__rider { position: absolute; left: 0; top: 0; width: clamp(64px, 7vw, 100px); z-index: 3; will-change: transform; pointer-events: none; }
|
||||
.stops { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 3rem); }
|
||||
.stop {
|
||||
background: var(--white); border: 4px solid var(--ink); border-radius: var(--radius);
|
||||
padding: clamp(1.3rem, 2.4vw, 2rem);
|
||||
box-shadow: 8px 8px 0 var(--ink);
|
||||
transition: transform .45s var(--ease-pop), box-shadow .3s;
|
||||
}
|
||||
.stop:nth-child(2) { margin-top: clamp(2rem, 6vw, 6rem); }
|
||||
.stop:nth-child(3) { margin-top: clamp(4rem, 12vw, 12rem); }
|
||||
.stop:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 12px 12px 0 var(--red); }
|
||||
.stop__num { font-family: var(--f-display); font-size: 3.6rem; line-height: .8; color: var(--red); -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; }
|
||||
.stop h3 { font-family: var(--f-sticker); text-transform: uppercase; font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1; margin: .5rem 0 .6rem; }
|
||||
.stop p { font-size: 1rem; }
|
||||
.stop__links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
|
||||
.stop__links a {
|
||||
display: inline-flex; align-items: center; gap: .4em;
|
||||
font-weight: 800; font-size: .95rem; text-decoration: none;
|
||||
padding: .55em .95em; border-radius: 999px; border: 2px solid var(--ink);
|
||||
transition: background-color .2s, color .2s;
|
||||
}
|
||||
.stop__links a:hover { background: var(--ink); color: var(--yellow); }
|
||||
.stop__links a.is-primary { background: var(--red); border-color: var(--red); color: var(--white); }
|
||||
.stop__links a.is-primary:hover { background: var(--ink); border-color: var(--ink); }
|
||||
.stop__links svg { width: 1em; height: 1em; }
|
||||
|
||||
/* ============ Visit ============ */
|
||||
.visit__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
|
||||
.visit .h2 { max-width: 10ch; }
|
||||
.info-card {
|
||||
background: var(--white); border-radius: calc(var(--radius) + 6px);
|
||||
border: 4px solid var(--ink);
|
||||
padding: clamp(1.4rem, 3vw, 2.4rem);
|
||||
box-shadow: 10px 10px 0 var(--red);
|
||||
}
|
||||
.info-card h3 { font-family: var(--f-sticker); text-transform: uppercase; font-weight: 400; margin: 0 0 .6rem; font-size: 1.25rem; color: var(--red-deep); }
|
||||
.info-card + .info-card { margin-top: 1.6rem; }
|
||||
.info-card address { font-style: normal; font-size: 1.2rem; font-weight: 600; line-height: 1.4; }
|
||||
.hours { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
|
||||
.hours th, .hours td { padding: .42rem 0; border-bottom: 2px dashed rgba(21, 13, 12, .15); text-align: left; }
|
||||
.hours td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
|
||||
.hours tr.is-today th, .hours tr.is-today td { color: var(--red-deep); }
|
||||
.hours tr.is-today th::after { content: " · heute"; font-weight: 700; }
|
||||
.info-card .row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
|
||||
.note { font-size: .88rem; opacity: .75; margin-top: .9rem; }
|
||||
.rating { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
|
||||
.rating__score { font-family: var(--f-display); font-size: clamp(3.4rem, 2.6rem + 3vw, 5.6rem); line-height: .8; color: var(--red); -webkit-text-stroke: .05em var(--white); paint-order: stroke fill; }
|
||||
.rating__stars { color: var(--yellow-2); font-size: 1.4rem; letter-spacing: .1em; line-height: 1; -webkit-text-stroke: 1px var(--ink); }
|
||||
.rating__meta { font-size: .95rem; line-height: 1.35; }
|
||||
.rating__meta a { font-weight: 700; }
|
||||
.visit__deco { position: relative; margin-top: 2.2rem; }
|
||||
.visit__deco img { width: min(460px, 90%); }
|
||||
.visit__deco .sticker { position: absolute; right: 6%; top: 8%; --r: 8deg; }
|
||||
|
||||
/* ============ Final CTA ============ */
|
||||
.cta { text-align: center; overflow-x: clip; }
|
||||
.cta .h2 { font-size: clamp(5rem, 20vw, 20rem); color: var(--yellow); --stroke-c: var(--ink); --sw: .045em; }
|
||||
.cta__rooster { width: clamp(160px, 22vw, 340px); margin: -2rem auto 0; transform: rotate(-8deg); }
|
||||
.cta .lead { margin: 1.2rem auto 2rem; color: var(--white); max-width: 30ch; }
|
||||
.cta__buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
|
||||
|
||||
/* ============ Footer ============ */
|
||||
.footer { position: relative; background: var(--ink); color: var(--cream); padding: clamp(4rem, 8vw, 6rem) 0 0; overflow: hidden; }
|
||||
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; }
|
||||
.footer h2 { font-family: var(--f-sticker); font-weight: 400; text-transform: uppercase; font-size: 1.05rem; color: var(--yellow); margin: 0 0 .9rem; letter-spacing: .04em; }
|
||||
.footer ul { list-style: none; margin: 0; padding: 0; }
|
||||
.footer li { margin: .35rem 0; }
|
||||
.footer a { text-decoration: none; transition: color .2s; }
|
||||
.footer a:hover { color: var(--yellow); }
|
||||
.footer__brand p { max-width: 30ch; opacity: .85; }
|
||||
.footer__brand img { width: 84px; margin-bottom: 1rem; }
|
||||
.footer__links a { font-family: var(--f-display); text-transform: uppercase; font-size: 1.45rem; letter-spacing: .02em; }
|
||||
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.2rem; border-top: 2px solid rgba(247, 235, 217, .18); font-size: .9rem; opacity: .85; }
|
||||
.footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }
|
||||
.footer__giant { position: relative; margin-top: clamp(2.5rem, 6vw, 5rem); height: calc(94vw / 4.714 + 3vw); }
|
||||
.footer__giant .wm-giant { position: absolute; left: 50%; bottom: 2vw; width: 94vw; transform: translateX(-50%); color: var(--red); }
|
||||
.footer__giant .wm-giant svg { width: 100%; height: auto; filter: drop-shadow(0 0 0 var(--cream)); }
|
||||
.juggle { position: absolute; bottom: 12%; width: clamp(48px, 6vw, 92px); z-index: 2; will-change: transform; }
|
||||
.juggle svg { width: 100%; height: auto; }
|
||||
|
||||
/* ============ Mobile order bar ============ */
|
||||
.orderbar {
|
||||
position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 850;
|
||||
display: none; gap: .6rem;
|
||||
transform: translateY(140%); transition: transform .45s var(--ease-pop);
|
||||
}
|
||||
.orderbar.is-visible { transform: translateY(0); }
|
||||
.orderbar a {
|
||||
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
|
||||
height: 56px; border-radius: 999px; text-decoration: none;
|
||||
font-family: var(--f-sticker); text-transform: uppercase; font-size: 1rem;
|
||||
border: 3px solid var(--white); box-shadow: 0 10px 24px rgba(21, 13, 12, .3);
|
||||
}
|
||||
.orderbar svg { width: 1.2em; height: 1.2em; }
|
||||
.orderbar .call { background: var(--ink); color: var(--cream); flex: .8; }
|
||||
.orderbar .order { background: var(--red); color: var(--white); }
|
||||
|
||||
/* ============ Speisekarte ============ */
|
||||
.page-hero { position: relative; padding: calc(var(--nav-h) + clamp(3rem, 7vw, 6rem)) 0 clamp(5rem, 9vw, 8rem); overflow: hidden; }
|
||||
.page-hero .display { font-size: clamp(5rem, 16vw, 16rem); color: var(--red); --stroke-c: var(--cream); --sw: .05em; }
|
||||
.page-hero .lead { color: var(--cream); margin-top: 1.4rem; }
|
||||
.page-hero__img { position: absolute; right: -3%; bottom: 6%; width: clamp(220px, 33vw, 560px); z-index: 1; }
|
||||
.page-hero__st { position: absolute; right: 30%; top: 26%; z-index: 2; --r: -10deg; }
|
||||
|
||||
.cat-nav {
|
||||
position: sticky; top: 0; z-index: 800;
|
||||
background: rgba(247, 235, 217, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
|
||||
border-bottom: 2px solid rgba(21, 13, 12, .1);
|
||||
transition: top .35s cubic-bezier(.2, .8, .2, 1);
|
||||
}
|
||||
body.nav-visible .cat-nav { top: var(--nav-h); }
|
||||
.cat-nav ul { display: flex; gap: .5rem; overflow-x: auto; list-style: none; margin: 0; padding: .75rem var(--gutter); scrollbar-width: none; }
|
||||
.cat-nav ul::-webkit-scrollbar { display: none; }
|
||||
.cat-nav a {
|
||||
display: inline-block; white-space: nowrap;
|
||||
padding: .5em 1em; border-radius: 999px; border: 2px solid var(--ink);
|
||||
font-family: var(--f-sticker); text-transform: uppercase; font-size: .92rem; text-decoration: none;
|
||||
transition: background-color .2s, color .2s, transform .3s var(--ease-pop);
|
||||
}
|
||||
.cat-nav a:hover { transform: scale(1.05); }
|
||||
.cat-nav a.is-active { background: var(--red); border-color: var(--red); color: var(--white); }
|
||||
|
||||
.menu-cat { padding: clamp(3.5rem, 7vw, 6rem) 0 0; scroll-margin-top: calc(var(--nav-h) + 70px); }
|
||||
.menu-cat__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
|
||||
.menu-cat__head .display { font-size: clamp(3.4rem, 9vw, 8rem); color: var(--red); }
|
||||
.menu-cat__head p { max-width: 46ch; margin: 0; font-weight: 500; }
|
||||
|
||||
.dish-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.8rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
|
||||
.dish {
|
||||
position: relative; display: flex; flex-direction: column;
|
||||
background: var(--white); border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 26px rgba(21, 13, 12, .08);
|
||||
transition: transform .45s var(--ease-pop), box-shadow .3s;
|
||||
}
|
||||
.dish:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(21, 13, 12, .16); }
|
||||
.dish__media { position: relative; height: clamp(220px, 22vw, 300px); display: grid; place-items: center; }
|
||||
.dish__media::before {
|
||||
content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 88px; transform: translateY(-20%);
|
||||
background-color: #fff;
|
||||
background-image: linear-gradient(90deg, rgba(224, 20, 14, .6) 50%, transparent 50%), linear-gradient(rgba(224, 20, 14, .6) 50%, transparent 50%);
|
||||
background-size: 44px 44px;
|
||||
transition: background-position .6s cubic-bezier(.4, 1.6, .7, .95);
|
||||
}
|
||||
.dish:hover .dish__media::before { background-position: 22px 0; }
|
||||
.dish__media img { position: absolute; z-index: 1; left: 11%; top: 6%; width: 78%; height: 88%; object-fit: contain; filter: drop-shadow(0 16px 16px rgba(21, 13, 12, .25)); transition: transform .7s var(--ease-pop); }
|
||||
.dish:hover .dish__media img { transform: scale(1.06) rotate(-2deg); }
|
||||
.dish__badge { position: absolute; z-index: 2; left: 1rem; top: 1rem; font-size: .85rem; --r: -6deg; border-width: 3px; }
|
||||
.dish__body { padding: 1rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
|
||||
.dish__row { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
|
||||
.dish h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); line-height: .95; margin: 0; color: var(--red-deep); }
|
||||
.dish p { font-size: .95rem; margin: 0; opacity: .85; }
|
||||
.dish .variants { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .6rem; }
|
||||
.dish .variants span { font-weight: 700; font-size: .88rem; border: 2px solid var(--ink); border-radius: 999px; padding: .15em .6em; }
|
||||
|
||||
.dish-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4.5rem); }
|
||||
.item { padding: 1.05rem 0; border-bottom: 2px dashed rgba(21, 13, 12, .18); }
|
||||
.item__row { display: flex; align-items: baseline; gap: .6rem; }
|
||||
.item h3 { font-family: var(--f-body); font-weight: 800; font-size: 1.12rem; margin: 0; }
|
||||
.item__dots { flex: 1; border-bottom: 3px dotted rgba(21, 13, 12, .35); transform: translateY(-4px); min-width: 1rem; }
|
||||
.item__price { font-family: var(--f-sticker); font-size: 1.05rem; white-space: nowrap; color: var(--red-deep); }
|
||||
.item p { margin: .25rem 0 0; font-size: .95rem; opacity: .8; }
|
||||
.item .tag { display: inline-block; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: var(--yellow); border-radius: 999px; padding: .15em .55em; margin-left: .4rem; vertical-align: .15em; }
|
||||
|
||||
.menu-extra {
|
||||
margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
|
||||
font-size: .95rem; font-weight: 600;
|
||||
}
|
||||
.menu-extra span { background: var(--cream-2); border-radius: 999px; padding: .35em .85em; }
|
||||
|
||||
.only-here {
|
||||
margin: clamp(4rem, 8vw, 7rem) 0 0;
|
||||
display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center;
|
||||
background: var(--ink); color: var(--cream); border-radius: calc(var(--radius) + 8px);
|
||||
padding: clamp(1.6rem, 4vw, 3rem);
|
||||
border: 4px solid var(--yellow);
|
||||
}
|
||||
.only-here img { width: clamp(100px, 12vw, 170px); transform: rotate(-8deg); }
|
||||
.only-here h2 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.4rem, 1.6rem + 3vw, 4.4rem); line-height: .9; margin: 0 0 .5rem; color: var(--yellow); }
|
||||
|
||||
.legal-note { margin-top: clamp(3rem, 6vw, 5rem); padding: 1.4rem 1.6rem; border-radius: 20px; background: var(--cream-2); font-size: .95rem; }
|
||||
.legal-note h2 { font-family: var(--f-sticker); font-weight: 400; text-transform: uppercase; font-size: 1.1rem; margin: 0 0 .5rem; }
|
||||
|
||||
/* ============ Legal pages ============ */
|
||||
.legal { padding: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(4rem, 8vw, 7rem); }
|
||||
.legal .display { font-size: clamp(3.6rem, 11vw, 9rem); color: var(--red); margin-bottom: 2rem; }
|
||||
.legal__body { max-width: 760px; }
|
||||
.legal__body h2 { font-family: var(--f-sticker); font-weight: 400; text-transform: uppercase; font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); margin: 2.4rem 0 .7rem; color: var(--red-deep); }
|
||||
.legal__body h3 { font-size: 1.1rem; margin: 1.6rem 0 .4rem; }
|
||||
.legal__body ul { padding-left: 1.2rem; }
|
||||
.draft-box {
|
||||
background: var(--yellow); border: 3px solid var(--ink); border-radius: 18px;
|
||||
padding: 1rem 1.2rem; font-weight: 600; margin-bottom: 2rem; box-shadow: 6px 6px 0 var(--ink);
|
||||
}
|
||||
.fill { background: #fff3b0; border-bottom: 2px solid var(--yellow-2); padding: 0 .2em; font-weight: 700; }
|
||||
|
||||
/* ============ Wortmarke (Maske, beliebig einfärbbar) ============ */
|
||||
.wm-mask {
|
||||
display: inline-block;
|
||||
background: currentColor;
|
||||
-webkit-mask: url(../img/wordmark.svg) center / contain no-repeat;
|
||||
mask: url(../img/wordmark.svg) center / contain no-repeat;
|
||||
aspect-ratio: 374.8 / 79.5;
|
||||
}
|
||||
.wm-mask--block { display: block; width: 100%; }
|
||||
.footer__giant .wm-giant { filter: drop-shadow(0 -4px 0 var(--cream)) drop-shadow(0 4px 0 var(--cream)) drop-shadow(4px 0 0 var(--cream)) drop-shadow(-4px 0 0 var(--cream)); }
|
||||
|
||||
/* ============ Speisekarte: Varianten ============ */
|
||||
.dish-grid--4 { grid-template-columns: repeat(4, 1fr); }
|
||||
.dish-grid--2 { grid-template-columns: repeat(2, 1fr); }
|
||||
.cat-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
|
||||
.cat-split .dish-list { grid-template-columns: 1fr; }
|
||||
.dish--promo { background: var(--ink); color: var(--cream); border: 4px solid var(--yellow); justify-content: center; padding: clamp(1.4rem, 2.5vw, 2rem); gap: 1rem; }
|
||||
.dish--promo h3 { color: var(--yellow); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); }
|
||||
.dish--promo p { opacity: .9; }
|
||||
.dish--promo .promo-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 2px dashed rgba(247, 235, 217, .25); }
|
||||
.dish--promo .promo-row strong { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 1.7rem; line-height: 1; }
|
||||
.dish--promo .price { background: var(--red); color: var(--white); }
|
||||
.sauce-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
|
||||
.sauce-chips span { display: inline-flex; gap: .6em; align-items: center; background: var(--white); border: 2px solid var(--ink); border-radius: 999px; padding: .45em .95em; font-weight: 700; }
|
||||
.sauce-chips b { font-family: var(--f-sticker); font-weight: 400; color: var(--red-deep); }
|
||||
|
||||
/* ============ Motion setup ============ */
|
||||
html.js [data-pop] .pw { display: inline-block; will-change: transform; }
|
||||
html.js.anim [data-pop] .pw { opacity: 0; }
|
||||
html.js.anim [data-reveal] { opacity: 0; translate: 0 var(--ry, 40px); }
|
||||
[data-sticker] { scale: var(--s, 1); }
|
||||
html.js.anim [data-sticker] { --s: 0; }
|
||||
html.js.anim .hero [data-intro] { opacity: 0; }
|
||||
.hero__big .pl, .page-hero .pl { will-change: transform; }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
|
||||
html.js.anim [data-pop] .pw, html.js.anim [data-reveal], html.js.anim .hero [data-intro] { opacity: 1 !important; translate: none !important; }
|
||||
html.js.anim [data-sticker] { --s: 1 !important; }
|
||||
.ticker__track { animation: none; }
|
||||
}
|
||||
|
||||
/* ============ Responsive ============ */
|
||||
@media (max-width: 1100px) {
|
||||
.sauce-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3.5rem; }
|
||||
.footer__grid { grid-template-columns: 1fr 1fr; }
|
||||
.dish-grid, .dish-grid--4 { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
:root { --nav-h: 66px; }
|
||||
.nav__brand img { height: 48px; }
|
||||
.nav__brand .wm { width: 118px; }
|
||||
.nav .pill--red { display: none; }
|
||||
.hero { min-height: auto; padding-top: calc(var(--nav-h) + 1.5rem); }
|
||||
.hero__stage { padding-bottom: 60vw; place-items: start center; }
|
||||
.hero__eyebrow { margin: 0 0 .9em .2em; font-size: .9rem; }
|
||||
.hero__eyebrow > span { display: inline; }
|
||||
.hero__big { font-size: 30vw; line-height: .8; }
|
||||
.hero__big .part { display: block; }
|
||||
.hero__burger { top: auto; bottom: 8vw; transform: translateX(-50%); width: 56vw; }
|
||||
.hero__wm { top: auto; bottom: 0; width: 72vw; transform: translate(-50%, 0) rotate(-6deg); }
|
||||
.hero__st1 { left: 0; top: auto; bottom: 38vw; }
|
||||
.hero__st2 { right: 0; top: auto; bottom: 26vw; }
|
||||
.hero__rooster { right: 6vw; top: 30vw; width: 24vw; }
|
||||
.hero__bottom { grid-template-columns: 1fr; margin-top: 2.2rem; }
|
||||
.hero__cta { justify-content: flex-start; }
|
||||
.champs__cards { grid-template-columns: 1fr; gap: 3.2rem; max-width: 420px; margin-inline: auto; }
|
||||
.photo-card:nth-child(2) { margin-top: 0; }
|
||||
.wings__head, .buckets__head, .visit__grid { grid-template-columns: 1fr; }
|
||||
.wings__hero img { margin: 0 auto; }
|
||||
.classic-wings { grid-template-columns: 1fr; text-align: left; }
|
||||
.classic-wings__prices { justify-content: flex-start; }
|
||||
.fight-card-row { grid-template-columns: 1fr; }
|
||||
.vs { justify-self: center; margin: -.5rem 0; }
|
||||
.stops { grid-template-columns: 1fr; }
|
||||
.stop:nth-child(2), .stop:nth-child(3) { margin-top: 0; }
|
||||
.route__svg, .route__rider { display: none; }
|
||||
.orderbar { display: flex; }
|
||||
.cta__rooster { width: 46vw; margin-top: -.5rem; }
|
||||
.footer { padding-bottom: 5.5rem; }
|
||||
.dish-list { grid-template-columns: 1fr; }
|
||||
.cat-split { grid-template-columns: 1fr; }
|
||||
.only-here { grid-template-columns: 1fr; }
|
||||
.page-hero__img { position: relative; right: auto; bottom: auto; width: 80vw; margin: 1.5rem auto -3rem; }
|
||||
.page-hero__st { right: 8%; top: auto; bottom: 30%; }
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.sauce-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem .8rem; }
|
||||
.sauce { padding: .8rem .6rem 1rem; }
|
||||
.sauce p { display: none; }
|
||||
.sauce h3 { font-size: 1.45rem; overflow-wrap: anywhere; }
|
||||
.sauce .price { font-size: .82rem; white-space: normal; }
|
||||
.dish-grid, .dish-grid--4, .dish-grid--2 { grid-template-columns: 1fr; }
|
||||
.footer__grid { grid-template-columns: 1fr; }
|
||||
.btn { font-size: 1rem; padding: .95em 1.4em 1em; }
|
||||
.hero__cta .btn { flex: 1 1 auto; }
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="96.9 0.0 179.0 264.1"><path fill="#0e0808" d="M180.5 261.9C174.8 259.1 167 251.3 158.9 240.5C156.6 237.2 156.1 236.6 154.4 234.1C147.9 224.4 141.6 212.5 137.5 202.1C137.2 201.4 136.7 200.4 136.5 199.8C136.2 199.2 136 198.6 136 198.4C136 197.7 135.2 196.5 134.8 196.5C134.5 196.5 134.1 197 133.6 197.9C133.2 198.7 132.3 200.4 131.5 201.8C128.9 206.4 127.4 209.3 125.7 213C125.3 213.9 124.7 215.1 124.5 215.6C123.6 217.4 122 221.8 122 222.1C122 224 120.2 225.4 118.8 224.6C117.2 223.8 112.1 214.9 108.5 206.9C108.3 206.3 107.8 205.3 107.5 204.7C107.2 204 107 203.3 107 203.1C107 202.9 106.8 202.3 106.5 201.7C105.9 200.2 105.3 198.3 104.9 196.8C104.7 196 104.4 195 104.3 194.6C103.9 193.5 103.3 190.5 102.9 188.1C102.7 186.9 102.4 185.3 102.3 184.6C101.9 182.5 101.7 173.8 102 169.8C102.4 163.6 103.6 157.2 105.3 152.1C105.4 151.7 105.7 150.9 105.9 150.2C106.3 149.1 107.2 146.6 107.9 144.8C108.8 142.5 107.3 142.8 102.8 145.5C101.6 146.3 99.3 146.4 98.5 145.8C97.9 145.3 97.9 145.3 98.3 144.5C98.6 144 99.7 141.8 100.9 139.6C103.6 134.4 105.7 130.3 107 127.9C108.5 125 109.9 122.5 111 120.3C111.6 119.3 112.7 117.3 113.5 115.9C114.3 114.4 115 113.2 115 113.1C115 112.1 129.3 88.9 134.1 82.2C134.9 81 136 79.5 136.4 78.9C136.8 78.4 137.8 77.1 138.5 76.1C141 73 141 73.2 139.4 70.1C137.6 66.5 137.1 64.7 136.8 61C136.6 59.3 136.4 56.9 136.2 55.8C136.1 54.7 136 53.3 136.1 52.8C136.2 52.3 136.3 51.3 136.4 50.5C136.5 48.3 137.2 43.7 137.6 42.6C137.8 42.1 138 41.4 138 41.1C138 40.8 138.2 40.1 138.5 39.5C138.8 38.9 139 38.1 139 37.9C139 37 140.4 35.3 145.2 30.3C147.7 27.7 150.4 24.8 151.3 23.8C155.4 18.9 159 15.7 166.8 9.8C168.2 8.7 171.7 7.1 173 6.9C173.7 6.8 174.6 6.6 175 6.4C175.5 6.2 176.2 5.9 176.7 5.8C178.8 5 179.2 4.9 180.3 4.5C183.3 3.3 184 3 185.1 2.7C189.3 1.2 191 1 195.2 1L199.3 1 203.2 2.9C206.8 4.6 207.8 5.1 210.9 6.5C211.4 6.8 213 7.4 214.4 8C215.8 8.6 217.3 9.3 217.9 9.5C218.4 9.8 220.6 10.7 222.6 11.6C235 17 236.8 18.6 236 23.9C235.8 25.2 235.8 26 236 26.7C236.5 28.7 241.1 32.8 245.9 35.5C251 38.3 253.5 40.4 255.1 43.1C256.1 44.9 256.1 44.9 256.1 47.6C256.1 52.4 254.1 56.2 248.7 62.2C245.6 65.6 245 66.9 245.7 69.3C246.3 71.3 247.8 73.8 249.7 76.1C250.3 76.8 250.4 78.2 249.9 78.7C248.6 80 241.7 76 236.5 71C231.3 66 230.5 65.8 227.9 69.3C226.2 71.6 226.2 72.1 228.3 74C230.3 75.8 230.7 78.2 229.5 81.2C229.1 82.1 229.6 83 230.5 83C230.8 83 231.4 83.2 231.9 83.4C232.5 83.6 233.4 83.9 234 84.1C235.3 84.5 236.4 84.9 238 85.5C238.6 85.8 240.4 86.5 242 87.1C249.4 90 256.7 94.3 261.6 98.4C264.2 100.7 270 108.7 270 110C270 110.1 270.2 110.7 270.5 111.2C271.2 112.7 273 117.9 273 118.6C273 118.9 273.2 119.8 273.4 120.6C273.8 122.1 274.3 126.9 274.7 131.6C274.9 135.1 274.9 138.8 274.6 142.8C274.4 144.7 274.1 147.9 274 149.8C273.7 153.5 273.4 154.6 272.4 155.1C271.2 155.6 271 155.2 268 147.4C265.4 140.5 264.8 139.9 260.9 139.1C258.7 138.7 257.6 138.3 253.2 136.6C247.7 134.4 245 134.4 246.5 136.5C247 137.2 250.7 144.8 252.5 148.9C253.8 151.7 254.1 152.4 254.5 153.4C254.8 154 255.2 155 255.5 155.6C255.9 156.6 256.4 157.8 257.5 160.5C258.1 162 258.8 163.8 260.4 168.4C260.6 169.1 260.9 170 261 170.4C261.1 170.8 261.3 171.4 261.5 171.7C261.6 172 261.9 172.9 262 173.7C262.2 174.5 262.5 175.4 262.6 175.8C262.8 176.2 263 176.7 263 177.1C263 177.7 263.8 180.5 264.5 182.3C265.4 184.6 266 186 266.5 187.2C266.8 187.8 267.1 188.8 267.1 189.2C267.2 189.7 267.4 190.4 267.6 190.8C267.8 191.1 268 192 268.1 192.8C268.2 193.6 268.4 194.9 268.6 195.8C269.5 199.2 268.9 206.5 267.4 210.8C264.1 220.1 255.3 227.6 243.8 231.1C243.1 231.3 242.3 231.6 241.9 231.7C240.6 232.2 237.2 233 235.5 233.2C234.6 233.4 233.3 233.6 232.6 233.8C231 234.2 215.4 234.1 213.5 233.8C212.7 233.6 211.3 233.4 210.2 233.2C208.3 233 206.4 232.7 202.9 232.1C200.6 231.8 197.5 231.1 196.4 230.7C196 230.6 195.1 230.3 194.5 230.1C188.6 228.4 183.5 225.3 177.7 220.1C176.7 219.2 175.8 218.5 175.7 218.6C175.4 218.7 175.3 220.1 175.6 223C175.7 223.9 175.8 226.3 176 228.3C176.3 233.1 177.7 242.5 178.7 247.1C180.3 253.9 180.9 256.2 181.5 257.8C181.8 258.4 182 259.2 182 259.4C182 259.7 182.2 260.3 182.4 260.9C183.2 262.9 182.8 263.1 180.5 261.9Z"/><path fill="#f7d7b7" d="M169.7 245.1C166.8 241.4 164 237.2 164 236.4C164 236.2 163.8 235.5 163.5 234.9C163 233.8 162.2 231.9 161.5 230C161.1 228.9 160.8 228.1 160.2 226.4C160.1 226 159.7 225.2 159.5 224.7C159.2 224.2 159 223.5 159 223.3C159 223 158.8 222.3 158.5 221.7C158.3 221.1 157.9 220.3 157.8 219.8C157.6 219.4 157.4 218.6 157.2 218.2C157.1 217.7 156.7 216.9 156.5 216.3C156.2 215.7 156 215 156 214.8C156 214.6 155.8 214 155.5 213.6C155.2 213.2 155 212.5 155 212.1C155 211.7 154.8 211 154.5 210.6C154.2 210.2 154 209.6 154 209.3C154 209 153.8 208.3 153.5 207.8C153.2 207.2 153 206.5 153 206.2C153 206 152.8 205.3 152.5 204.8C152.2 204.2 152 203.5 152 203.2C152 203 151.8 202.3 151.5 201.8C151.2 201.2 151 200.5 151 200.2C151 200 150.8 199.3 150.5 198.8C150.2 198.2 150 197.5 150 197.1C150 196.7 149.8 196 149.Line truncated
|
||||
|
After Width: | Height: | Size: 106 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1.0 238.2 374.8 79.5"><path fill="#0e0808" d="M160 316.4C158.4 315.8 156 314.5 155.2 313.8C154.2 313 154.7 311.9 156.4 310.4C157 310 159 308.3 160.9 306.6C165.6 302.6 165.1 302.8 167.4 304C168.5 304.5 170.1 305.1 171.1 305.4C174.1 306.2 176.5 305 181.3 300.3C184.8 296.7 187.3 293.1 186.7 292.4C186.5 292 186.3 292.1 185.6 292.5C184.9 292.9 184.2 293.1 182.2 293.2C178.4 293.4 178 293.2 175.1 289.6C174.5 289 174.5 289 173.9 289.4C171.5 290.9 166.8 293 165.5 293.2C163.5 293.4 162.9 293.2 161.2 291.6C159.7 290.2 159.7 290.2 159.1 290.6C157.8 291.5 155.1 292.8 154 293.1C151.5 293.9 150 293.4 147.2 290.8C146.2 289.8 145.2 289 145.1 289C145 289 144.3 289.4 143.5 290C139.8 292.5 138.5 293.1 136.3 293.2C135.2 293.3 133.9 293.2 133.4 293.1C132.4 292.9 130.3 291.1 128.6 288.9C127.4 287.4 127.4 287.4 127 288C126.7 288.3 126.4 289 126.2 289.5C125.3 292.7 121.3 294.4 117.7 293.3C116.1 292.9 115.9 292.5 116.3 291.6C117 290.3 116.4 290.1 114.5 291.1C110.6 293.1 110.6 293.1 106 293.1C101.9 293.1 101.9 293.1 100.4 292.3C99.5 291.8 98.2 290.8 97.4 290C96.5 289.2 95.7 288.5 95.5 288.5C95.3 288.5 94.4 289 93.5 289.6C90.2 291.8 87.6 293 85.7 293.2C83.4 293.4 82.9 293.2 81 291.3C79.2 289.6 79 289.6 77.8 290.6C77.5 290.8 76.5 291.4 75.4 292C73.4 293.1 73.4 293.1 70.3 293.1C67.6 293.1 67.2 293.1 66.6 292.6C64.8 291.3 64.3 289.6 64.9 286.7C65.2 285 65.5 284 67 280.2C68.2 277.2 68.3 276.9 68 276.3C67.2 274.5 64 276.2 62.9 279.1C62.7 279.7 62.3 280.7 62 281.5C60.8 284.6 59.2 288.7 59 289.6C58.6 291.4 57.4 292.8 56.1 293.2C55.3 293.4 50.8 293.4 49.5 293.1C48.9 293 48.9 292.3 49.6 290.1C49.9 289.4 50.3 288.3 50.5 287.6C51.4 285.1 51.6 284.6 52 283.5C52.2 282.9 52.6 282 52.8 281.5C53.1 280.5 53.6 279.3 54.9 276.1C55.4 274.9 55.9 273.5 56 273.1C56.1 272.7 56.4 272 56.6 271.5C57.3 269.9 58.8 266.1 59.2 264.8C59.4 264.3 59.8 263.3 60 262.6C61 260.1 61.8 258.1 62 257.4C62.1 256.9 62.6 256.1 63.1 255.6C63.9 254.6 63.9 254.6 68.2 254.5C70.6 254.4 72.5 254.4 72.7 254.6C73.1 254.9 73.1 255.9 72.5 257C72 257.9 71.2 259.6 70.5 261.4C70 262.6 69.3 264 68.2 266.5C66.9 269.2 67.2 269.4 70.8 268.5C74.9 267.4 77.3 268.1 78.6 270.7C79.3 272.1 79 273.8 77.5 277.8C77.2 278.4 76.8 279.6 76.5 280.4C76.2 281.2 75.7 282.4 75.5 282.9C75 284.1 74.8 285.4 75.2 285.6C76 286.1 80 282.7 81.7 280.2C82.8 278.4 85 274 85 273.4C85 272 87.2 268.8 88.7 268C89.4 267.6 96.4 267.9 96.8 268.4C96.9 268.6 96.5 269.7 95.3 272.1C92.3 277.9 91.1 280.3 90.6 281.6C90.3 282.3 89.9 283.4 89.6 283.9C89 285.4 89.3 285.7 90.9 285.1C92.7 284.4 94.5 282.5 95.4 280.2C96.8 276.7 98.8 273.6 100.8 271.8C102.3 270.6 104.6 269 105.1 269C105.2 269 105.7 268.8 106 268.6C106.3 268.4 107.4 268 108.3 267.8C109.3 267.7 110.6 267.4 111.2 267.3C111.9 267.1 113 267 113.7 267C115 267 116.2 266.3 118.2 264.2C118.7 263.7 119.3 263.2 119.5 263.2C120 263.2 124 267.3 124 267.9C124 268.1 123 269.4 121.7 270.7C118.6 273.9 117.9 275.1 117.3 277.5C117.1 278.6 116.5 279 115.2 279C113.8 279 113.1 278.5 112.9 277.1C112.6 275.9 112.1 274.8 111.6 274.6C111.5 274.5 110.7 274.7 110 274.9C107.4 275.7 105 279.1 105 281.8C105 286.9 114 286.5 118.9 281.2C120 280 122 276.8 122 276.2C122 275.9 122.2 275.3 122.5 274.7C122.9 273.7 123.2 273.1 124.5 269.8C124.8 269.1 125.2 268 125.5 267.3C125.7 266.7 126.2 265.4 126.5 264.6C126.8 263.8 127.2 262.6 127.5 262C128.8 258.7 129 258.3 129 258C129 257.8 129.4 257.1 129.8 256.4C130.8 254.7 132.2 254.1 134.2 254.5C136 254.8 137.8 254.8 138.6 254.5C139.3 254.1 140 254.5 140 255.2C140 255.6 137 262.7 135.2 266.4C134 268.9 134.2 269 137.2 268C140 267 141.2 266.9 142.9 267.9C144.9 268.9 146 270.7 146 272.7C146 276 142.3 281.1 138 283.9C135.7 285.3 138.2 286.8 140.7 285.5C143.8 283.9 145.6 282.1 147.4 278.6C149.4 274.8 152.3 271.5 155.5 269.6C157.4 268.4 161.5 268.3 163.5 269.4C164.6 269.9 165.3 269.8 166.1 269C167.2 267.9 168 267.7 172 267.8C176.2 268 176.4 268.1 175.5 269.6C175.2 270 175 270.6 175 270.7C175 270.9 174.5 272 174 273.2C171.6 278.2 171.3 279 170.9 279.9C170.7 280.4 170.3 281.5 170 282.2C169.7 283 169.4 283.9 169.3 284.1C169.2 284.8 169.8 285.3 170.6 285.2C171.6 284.9 175.4 280.3 177.7 276.5C178.4 275.5 179.9 273.6 181.1 272.3C185.1 268.2 189.1 267 193 268.6C194.8 269.4 195.1 269.4 196.2 268.7C197.5 267.9 198.6 267.7 201.8 267.9C204 268 204.8 268.2 204.9 268.4C205 268.6 204.6 269.8 204 271.1C203.5 272.3 203 273.5 203 273.6C203 273.7 202.8 274.1 202.5 274.5C202 275.2 202 276 202.5 276C202.6 276 202.8 275.7 202.9 275.4C203.2 274.5 205 272.3 206.5 271C209.3 268.7 213.6 267.1 216.2 267.5C219.1 267.9 220.3 268.4 223 270.7C224 271.5 224.9 272 225.3 272C225.7 272 226.9 271.1 228.9 269.4C230.5 267.9 232 266.8 232.2 266.8C232.5 266.7 236.1 269.6 237.1 270.7C237.8 271.4 237.8 271.4 237.2 272.7C235.9 275.1 232.5 277.7 230 278.1C227.6 278.5 226.6 279.4 225.6 281.9C224 286 222.8 288.1 221 289.9C218.9 291.8 216.9 292.9 214.9 293.1C214 293.2 213.1 293.4 212.8 293.5C212 293.8 208.2 293.1 206.7 292.4C204.8 291.4 203.1 289.6 202.1 287.5C201.1 285.Line truncated
|
||||
|
After Width: | Height: | Size: 14 KiB |
Vendored
+11
@@ -0,0 +1,11 @@
|
||||
/*!
|
||||
* ScrollTrigger 3.13.0
|
||||
* https://gsap.com
|
||||
*
|
||||
* @license Copyright 2025, GreenSock. All rights reserved.
|
||||
* Subject to the terms at https://gsap.com/standard-license.
|
||||
* @author: Jack Doyle, jack@greensock.com
|
||||
*/
|
||||
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _defineProperties(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function r(){return Se||"undefined"!=typeof window&&(Se=window.gsap)&&Se.registerPlugin&&Se}function z(e,t){return~Ye.indexOf(e)&&Ye[Ye.indexOf(e)+1][t]}function A(e){return!!~t.indexOf(e)}function B(e,t,r,n,i){return e.addEventListener(t,r,{passive:!1!==n,capture:!!i})}function C(e,t,r,n){return e.removeEventListener(t,r,!!n)}function F(){return Re&&Re.isPressed||ze.cache++}function G(r,n){function ed(e){if(e||0===e){i&&(Te.history.scrollRestoration="manual");var t=Re&&Re.isPressed;e=ed.v=Math.round(e)||(Re&&Re.iOS?1:0),r(e),ed.cacheID=ze.cache,t&&o("ss",e)}else(n||ze.cache!==ed.cacheID||o("ref"))&&(ed.cacheID=ze.cache,ed.v=r());return ed.v+ed.offset}return ed.offset=0,r&&ed}function J(e,t){return(t&&t._ctx&&t._ctx.selector||Se.utils.toArray)(e)[0]||("string"==typeof e&&!1!==Se.config().nullTargetWarn?console.warn("Element not found:",e):null)}function L(t,e){var r=e.s,n=e.sc;A(t)&&(t=Ce.scrollingElement||Me);var i=ze.indexOf(t),o=n===qe.sc?1:2;~i||(i=ze.push(t)-1),ze[i+o]||B(t,"scroll",F);var a=ze[i+o],s=a||(ze[i+o]=G(z(t,r),!0)||(A(t)?n:G(function(e){return arguments.length?t[r]=e:t[r]})));return s.target=t,a||(s.smooth="smooth"===Se.getProperty(t,"scrollBehavior")),s}function M(e,t,i){function Gd(e,t){var r=Le();t||n<r-s?(a=o,o=e,l=s,s=r):i?o+=e:o=a+(e-a)/(r-l)*(s-l)}var o=e,a=e,s=Le(),l=s,n=t||50,c=Math.max(500,3*n);return{update:Gd,reset:function reset(){a=o=i?0:o,l=s=0},getVelocity:function getVelocity(e){var t=l,r=a,n=Le();return!e&&0!==e||e===o||Gd(e),s===l||c<n-l?0:(o+(i?r:-r))/((i?n:s)-t)*1e3}}}function N(e,t){return t&&!e._gsapAllow&&e.preventDefault(),e.changedTouches?e.changedTouches[0]:e}function O(e){var t=Math.max.apply(Math,e),r=Math.min.apply(Math,e);return Math.abs(t)>=Math.abs(r)?t:r}function P(){(Ae=Se.core.globals().ScrollTrigger)&&Ae.core&&function _integrate(){var e=Ae.core,r=e.bridge||{},t=e._scrollers,n=e._proxies;t.push.apply(t,ze),n.push.apply(n,Ye),ze=t,Ye=n,o=function _bridge(e,t){return r[e](t)}}()}function Q(e){return Se=e||r(),!ke&&Se&&"undefined"!=typeof document&&document.body&&(Te=window,Me=(Ce=document).documentElement,Ee=Ce.body,t=[Te,Ce,Me,Ee],Se.utils.clamp,Be=Se.core.context||function(){},Oe="onpointerenter"in Ee?"pointer":"mouse",Pe=E.isTouch=Te.matchMedia&&Te.matchMedia("(hover: none), (pointer: coarse)").matches?1:"ontouchstart"in Te||0<navigator.maxTouchPoints||0<navigator.msMaxTouchPoints?2:0,De=E.eventTypes=("ontouchstart"in Me?"touchstart,touchmove,touchcancel,touchend":"onpointerdown"in Me?"pointerdown,pointermove,pointercancel,pointerup":"mousedown,mousemove,mouseup,mouseup").split(","),setTimeout(function(){return i=0},500),P(),ke=1),ke}var Se,ke,Te,Ce,Me,Ee,Pe,Oe,Ae,t,Re,De,Be,i=1,Ie=[],ze=[],Ye=[],Le=Date.now,o=function _bridge(e,t){return t},n="scrollLeft",a="scrollTop",He={s:n,p:"left",p2:"Left",os:"right",os2:"Right",d:"width",d2:"Width",a:"x",sc:G(function(e){return arguments.length?Te.scrollTo(e,qe.sc()):Te.pageXOffset||Ce[n]||Me[n]||Ee[n]||0})},qe={s:a,p:"top",p2:"Top",os:"bottom",os2:"Bottom",d:"height",d2:"Height",a:"y",op:He,sc:G(function(e){return arguments.length?Te.scrollTo(He.sc(),e):Te.pageYOffset||Ce[a]||Me[a]||Ee[a]||0})};He.op=qe,ze.cache=0;var E=(Observer.prototype.init=function init(e){ke||Q(Se)||console.warn("Please gsap.registerPlugin(Observer)"),Ae||P();var i=e.tolerance,a=e.dragMinimum,t=e.type,o=e.target,r=e.lineHeight,n=e.debounce,s=e.preventDefault,l=e.onStop,c=e.onStopDelay,u=e.ignore,f=e.wheelSpeed,d=e.event,p=e.onDragStart,g=e.onDragEnd,h=e.onDrag,v=e.onPress,b=e.onRelease,m=e.onRight,y=e.onLeft,x=e.onUp,_=e.onDown,w=e.onChangeX,S=e.onChangeY,k=e.onChange,T=e.onToggleX,E=e.onToggleY,R=e.onHover,D=e.onHoverEnd,I=e.onMove,z=e.ignoreCheck,Y=e.isNormalizer,H=e.onGestureStart,q=e.onGestureEnd,X=e.onWheel,U=e.onEnable,W=e.onDisable,G=e.onClick,V=e.scrollSpeed,K=e.capture,j=e.allowClicks,Z=e.lockAxis,$=e.onLockAxis;function gf(){return xe=Le()}function hf(e,t){return(se.event=e)&&u&&function _isWithin(e,t){for(var r=t.length;r--;)if(t[r]===e||t[r].contains(e))return!0;return!1}(e.target,u)||t&&he&&"touch"!==e.pointerType||z&&z(e,t)}function kf(){var e=se.deltaX=O(me),t=se.deltaY=O(ye),r=Math.abs(e)>=i,n=Math.abs(t)>=i;k&&(r||n)&&k(se,e,t,me,ye),r&&(m&&0<se.deltaX&&m(se),y&&se.deltaX<0&&y(se),w&&w(se),T&&se.deltaX<0!=le<0&&T(se),le=se.deltaX,me[0]=me[1]=me[2]=0),n&&(_&&0<se.deltaY&&_(se),x&&se.deltaY<0&&x(se),S&&S(se),E&&se.deltaY<0!=ce<0&&E(se),ce=se.deltaY,ye[0]=ye[1]=ye[2]=0),(ne||re)&&(I&&I(se),re&&(p&&1===re&&p(se),h&&h(se),re=0),ne=!1),oe&&!(oe=!1)&&$&&$(se),ie&&(X(se),ie=!1),ee=0}function lf(e,t,r){me[r]+=e,ye[r]+=t,se._vx.update(e),se._vy.updateLine truncated
|
||||
|
||||
Vendored
+11
@@ -0,0 +1,11 @@
|
||||
/*!
|
||||
* GSAP 3.13.0
|
||||
* https://gsap.com
|
||||
*
|
||||
* @license Copyright 2025, GreenSock. All rights reserved.
|
||||
* Subject to the terms at https://gsap.com/standard-license.
|
||||
* @author: Jack Doyle, jack@greensock.com
|
||||
*/
|
||||
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function r(t){return"string"==typeof t}function s(t){return"function"==typeof t}function t(t){return"number"==typeof t}function u(t){return void 0===t}function v(t){return"object"==typeof t}function w(t){return!1!==t}function x(){return"undefined"!=typeof window}function y(t){return s(t)||r(t)}function P(t){return(i=yt(t,ot))&&ze}function Q(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")}function R(t,e){return!e&&console.warn(t)}function S(t,e){return t&&(ot[t]=e)&&i&&(i[t]=e)||ot}function T(){return 0}function ea(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=gt.length;r--&&!gt[r].targetTest(i););e=gt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Zt(t[r],e)))||t.splice(r,1);return t}function fa(t){return t._gsap||ea(Ot(t))[0]._gsap}function ga(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ha(t,e){return(t=t.split(",")).forEach(e)||t}function ia(t){return Math.round(1e5*t)/1e5||0}function ja(t){return Math.round(1e7*t)/1e7||0}function ka(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),"+"===r?t+i:"-"===r?t-i:"*"===r?t*i:t/i}function la(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function ma(){var t,e,r=dt.length,i=dt.slice(0);for(ct={},t=dt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function na(t){return!!(t._initted||t._startAt||t.add)}function oa(t,e,r,i){dt.length&&!L&&ma(),t.render(e,r,i||!!(L&&e<0&&na(t))),dt.length&&!L&&ma()}function pa(t){var e=parseFloat(t);return(e||0===e)&&(t+"").match(at).length<2?e:r(t)?t.trim():t}function qa(t){return t}function ra(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function ua(t,e){for(var r in e)"__proto__"!==r&&"constructor"!==r&&"prototype"!==r&&(t[r]=v(e[r])?ua(t[r]||(t[r]={}),e[r]):e[r]);return t}function va(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function wa(t){var e=t.parent||I,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||"duration"===r&&i||"ease"===r||(t[r]=e[r])}}($(t.keyframes)):ra;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function ya(t,e,r,i,n){void 0===r&&(r="_first"),void 0===i&&(i="_last");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function za(t,e,r,i){void 0===r&&(r="_first"),void 0===i&&(i="_last");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Aa(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Ba(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Da(t,e,r,i){return t._startAt&&(L?t._startAt.revert(ht):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Fa(t){return t._repeat?Tt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ha(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ia(t){return t._end=ja(t._start+(t._tDur/Math.abs(t._ts||t._rts||U)||0))}function Ja(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=ja(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ia(t),r._dirty||Ba(r,t)),t}function Ka(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ha(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>U)&&e.render(r,!0)),Ba(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-U}}function La(e,r,i,n){return r.parent&&Aa(r),r._start=ja((t(i)?i:i||e!==I?xt(e,i,r):e._time)+r._delay),r._end=ja(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),ya(e,r,"_first","_last",e._sort?"_start":0),bt(r)||(e._recent=r),n||Ka(e,r),e._ts<0&&Ja(e,e._tTime),e}function Ma(t,e){return(ot.ScrollTrigger||Q("scrollTrigger",e))&&ot.ScrollTrigger.create(e,t)}function Na(t,e,r,i,n){return Wt(t,e,n),t._initted?!r&&t._pt&&!L&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==Rt.frame?(dt.push(t),t._lazy=[n,i],1):void 0:1}function Sa(t,e,r,i){var n=t._repeat,a=ja(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:ja(a*(n+1)+t._rDelay*n):a,0<s&&!i&&Ja(t,t._tTime=t._tDur*s),t.parent&&Ia(t),r||Ba(t.parent,t),t}function Ta(t){return t instanceof Qt?Ba(t)Line truncated
|
||||
|
||||
Vendored
Whitespace-only changes.
@@ -0,0 +1,366 @@
|
||||
/* Chickago Boys – Interaktion & Animation */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var root = document.documentElement;
|
||||
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
var hasGsap = !!(window.gsap && window.ScrollTrigger);
|
||||
var $ = function (s, r) { return (r || document).querySelector(s); };
|
||||
var $$ = function (s, r) { return Array.prototype.slice.call((r || document).querySelectorAll(s)); };
|
||||
|
||||
if (!hasGsap) root.classList.remove('anim');
|
||||
|
||||
/* ---------- Jahr ---------- */
|
||||
$$('[data-year]').forEach(function (el) { el.textContent = new Date().getFullYear(); });
|
||||
|
||||
/* ---------- Öffnungszeiten (täglich 12–22 Uhr, Zeitzone Berlin) ---------- */
|
||||
var OPEN = 12 * 60, CLOSE = 22 * 60;
|
||||
function berlinNow() {
|
||||
var parts = new Intl.DateTimeFormat('en-US', {
|
||||
timeZone: 'Europe/Berlin', weekday: 'short', hour: '2-digit', minute: '2-digit', hourCycle: 'h23'
|
||||
}).formatToParts(new Date());
|
||||
var map = {};
|
||||
parts.forEach(function (p) { map[p.type] = p.value; });
|
||||
var days = { Sun: 0, Mon: 1, Tue: 2, Wed: 3, Thu: 4, Fri: 5, Sat: 6 };
|
||||
return { day: days[map.weekday], minutes: parseInt(map.hour, 10) * 60 + parseInt(map.minute, 10) };
|
||||
}
|
||||
function updateOpenState() {
|
||||
var now = berlinNow();
|
||||
var isOpen = now.minutes >= OPEN && now.minutes < CLOSE;
|
||||
var text = isOpen ? 'Jetzt geöffnet · bis 22 Uhr'
|
||||
: now.minutes < OPEN ? 'Geschlossen · öffnet heute um 12 Uhr'
|
||||
: 'Geschlossen · öffnet morgen um 12 Uhr';
|
||||
$$('[data-open-badge]').forEach(function (el) {
|
||||
el.textContent = text;
|
||||
el.classList.toggle('is-open', isOpen);
|
||||
el.classList.toggle('is-closed', !isOpen);
|
||||
});
|
||||
$$('[data-hours] tr').forEach(function (tr) {
|
||||
tr.classList.toggle('is-today', parseInt(tr.getAttribute('data-day'), 10) === now.day);
|
||||
});
|
||||
}
|
||||
updateOpenState();
|
||||
setInterval(updateOpenState, 60000);
|
||||
|
||||
/* ---------- Smooth Scroll (Lenis) ---------- */
|
||||
var lenis = null;
|
||||
if (!reduce && window.Lenis) {
|
||||
lenis = new window.Lenis({ duration: 1.1, smoothWheel: true });
|
||||
if (hasGsap) {
|
||||
lenis.on('scroll', window.ScrollTrigger.update);
|
||||
window.gsap.ticker.add(function (t) { lenis.raf(t * 1000); });
|
||||
window.gsap.ticker.lagSmoothing(0);
|
||||
} else {
|
||||
var raf = function (t) { lenis.raf(t); requestAnimationFrame(raf); };
|
||||
requestAnimationFrame(raf);
|
||||
}
|
||||
}
|
||||
function navOffset() { return -(($('#nav') || {}).offsetHeight || 0) - 12; }
|
||||
function scrollToTarget(target) {
|
||||
if (lenis) lenis.scrollTo(target, { offset: navOffset(), duration: 1.1 });
|
||||
else target.scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block: 'start' });
|
||||
}
|
||||
document.addEventListener('click', function (e) {
|
||||
var a = e.target.closest && e.target.closest('a[href*="#"]');
|
||||
if (!a) return;
|
||||
var url = new URL(a.href, location.href);
|
||||
if (url.pathname !== location.pathname || !url.hash) return;
|
||||
var target = url.hash === '#top' ? document.body : document.getElementById(decodeURIComponent(url.hash.slice(1)));
|
||||
if (!target) return;
|
||||
e.preventDefault();
|
||||
closeMenu(false);
|
||||
if (url.hash === '#top') { lenis ? lenis.scrollTo(0) : window.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' }); }
|
||||
else scrollToTarget(target);
|
||||
history.replaceState(null, '', url.hash);
|
||||
});
|
||||
|
||||
/* ---------- Navigation ein-/ausblenden ---------- */
|
||||
var nav = $('#nav');
|
||||
var lastY = window.scrollY;
|
||||
function onScroll() {
|
||||
var y = window.scrollY;
|
||||
if (!nav) return;
|
||||
if (document.body.classList.contains('menu-open')) { lastY = y; return; }
|
||||
if (y > 140 && y - lastY > 6) nav.classList.add('is-hidden');
|
||||
else if (lastY - y > 6 || y < 140) nav.classList.remove('is-hidden');
|
||||
document.body.classList.toggle('nav-visible', !nav.classList.contains('is-hidden') && y > 10);
|
||||
lastY = y;
|
||||
}
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
/* ---------- Menü ---------- */
|
||||
var btn = $('#menu-btn'), panel = $('#menu-panel'), overlay = $('#menu-overlay');
|
||||
function setLabel(txt) { $$('.menu-label', btn).forEach(function (s) { s.textContent = txt; }); }
|
||||
function openMenu() {
|
||||
document.body.classList.add('menu-open');
|
||||
nav.classList.add('is-open');
|
||||
btn.setAttribute('aria-expanded', 'true');
|
||||
setLabel('Schließen');
|
||||
if (lenis) lenis.stop();
|
||||
if (hasGsap && !reduce) {
|
||||
window.gsap.fromTo($$('li', panel), { y: 18, opacity: 0 }, { y: 0, opacity: 1, duration: .38, stagger: .06, ease: 'power3.out', delay: .14 });
|
||||
}
|
||||
var first = $('a', panel);
|
||||
if (first) setTimeout(function () { first.focus({ preventScroll: true }); }, 60);
|
||||
}
|
||||
function closeMenu(returnFocus) {
|
||||
if (!document.body.classList.contains('menu-open')) return;
|
||||
document.body.classList.remove('menu-open');
|
||||
nav.classList.remove('is-open');
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
setLabel('Menü');
|
||||
if (lenis) lenis.start();
|
||||
if (returnFocus !== false) btn.focus({ preventScroll: true });
|
||||
}
|
||||
if (btn && panel) {
|
||||
btn.addEventListener('click', function () {
|
||||
document.body.classList.contains('menu-open') ? closeMenu() : openMenu();
|
||||
});
|
||||
overlay && overlay.addEventListener('click', function () { closeMenu(); });
|
||||
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeMenu(); });
|
||||
$$('a', panel).forEach(function (a) { a.addEventListener('click', function () { closeMenu(false); }); });
|
||||
}
|
||||
|
||||
/* ---------- Navigation auf dunklen Flächen hell einfärben ---------- */
|
||||
var darkEls = $$('[data-nav-dark]');
|
||||
if (nav && darkEls.length) {
|
||||
var checkDark = function () {
|
||||
var probe = (nav.offsetHeight || 70) / 2;
|
||||
nav.classList.toggle('is-dark', darkEls.some(function (el) {
|
||||
var r = el.getBoundingClientRect(); return r.top <= probe && r.bottom >= probe;
|
||||
}));
|
||||
};
|
||||
window.addEventListener('scroll', checkDark, { passive: true });
|
||||
window.addEventListener('resize', checkDark);
|
||||
checkDark();
|
||||
}
|
||||
|
||||
/* ---------- Mobile Bestell-Leiste ---------- */
|
||||
var orderbar = $('#orderbar');
|
||||
var heroEl = $('.hero') || $('.page-hero');
|
||||
if (orderbar && heroEl && 'IntersectionObserver' in window) {
|
||||
new IntersectionObserver(function (entries) {
|
||||
orderbar.classList.toggle('is-visible', !entries[0].isIntersecting);
|
||||
}, { threshold: 0 }).observe(heroEl);
|
||||
}
|
||||
|
||||
/* ---------- Speisekarte: aktive Kategorie ---------- */
|
||||
var catNav = $('.cat-nav');
|
||||
if (catNav && 'IntersectionObserver' in window) {
|
||||
var links = $$('a', catNav);
|
||||
var list = $('ul', catNav);
|
||||
var setActive = function (id) {
|
||||
links.forEach(function (l) {
|
||||
var on = l.getAttribute('href') === '#' + id;
|
||||
l.classList.toggle('is-active', on);
|
||||
if (on) {
|
||||
l.setAttribute('aria-current', 'true');
|
||||
list.scrollTo({ left: l.offsetLeft - list.clientWidth / 2 + l.offsetWidth / 2, behavior: reduce ? 'auto' : 'smooth' });
|
||||
} else l.removeAttribute('aria-current');
|
||||
});
|
||||
};
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (en) { if (en.isIntersecting) setActive(en.target.id); });
|
||||
}, { rootMargin: '-35% 0px -60% 0px' });
|
||||
var cats = $$('.menu-cat');
|
||||
cats.forEach(function (s) { io.observe(s); });
|
||||
window.addEventListener('scroll', function () {
|
||||
if (cats[0] && cats[0].getBoundingClientRect().top > window.innerHeight * .4) {
|
||||
links.forEach(function (l) { l.classList.remove('is-active'); l.removeAttribute('aria-current'); });
|
||||
}
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
/* ---------- Route (Take away) ---------- */
|
||||
var route = $('[data-route]');
|
||||
var routeState = null;
|
||||
function buildRoute() {
|
||||
if (!route) return null;
|
||||
var svg = $('.route__svg', route), path = $('path', svg), stops = $$('.stop', route);
|
||||
if (!stops.length || window.getComputedStyle(svg).display === 'none') return null;
|
||||
var box = route.getBoundingClientRect();
|
||||
var pts = stops.map(function (s) {
|
||||
var r = s.getBoundingClientRect();
|
||||
return { x: r.left - box.left + r.width * .5, y: r.top - box.top - 34 };
|
||||
});
|
||||
var start = { x: Math.max(40, pts[0].x - box.width * .2), y: pts[0].y + 6 };
|
||||
var d = 'M' + start.x + ' ' + start.y;
|
||||
var prev = start;
|
||||
pts.forEach(function (p, i) {
|
||||
var dx = p.x - prev.x;
|
||||
var lift = i % 2 ? 90 : -70;
|
||||
d += ' C' + (prev.x + dx * .45) + ' ' + (prev.y + lift) + ' ' + (p.x - dx * .45) + ' ' + (p.y - lift) + ' ' + p.x + ' ' + p.y;
|
||||
prev = p;
|
||||
});
|
||||
path.setAttribute('d', d);
|
||||
return { path: path, len: path.getTotalLength(), rider: $('.route__rider', route) };
|
||||
}
|
||||
function placeRider(progress) {
|
||||
if (!routeState) return;
|
||||
var pt = routeState.path.getPointAtLength(routeState.len * progress);
|
||||
var ahead = routeState.path.getPointAtLength(Math.min(routeState.len, routeState.len * progress + 4));
|
||||
var angle = Math.atan2(ahead.y - pt.y, ahead.x - pt.x) * 180 / Math.PI;
|
||||
var w = routeState.rider.offsetWidth, h = routeState.rider.offsetHeight;
|
||||
routeState.rider.style.transform = 'translate(' + (pt.x - w / 2) + 'px,' + (pt.y - h / 2) + 'px) rotate(' + (angle * .25) + 'deg)';
|
||||
}
|
||||
|
||||
/* ---------- Ohne GSAP: fertig ---------- */
|
||||
if (!hasGsap) {
|
||||
routeState = buildRoute();
|
||||
placeRider(1);
|
||||
return;
|
||||
}
|
||||
|
||||
var gsap = window.gsap, ST = window.ScrollTrigger;
|
||||
gsap.registerPlugin(ST);
|
||||
var rand = gsap.utils.random;
|
||||
|
||||
function splitWords(el) {
|
||||
(function walk(node) {
|
||||
Array.prototype.slice.call(node.childNodes).forEach(function (ch) {
|
||||
if (ch.nodeType === 3) {
|
||||
var frag = document.createDocumentFragment();
|
||||
ch.textContent.split(/(\s+)/).forEach(function (p) {
|
||||
if (!p) return;
|
||||
if (/^\s+$/.test(p)) frag.appendChild(document.createTextNode(p));
|
||||
else { var s = document.createElement('span'); s.className = 'pw'; s.textContent = p; frag.appendChild(s); }
|
||||
});
|
||||
ch.parentNode.replaceChild(frag, ch);
|
||||
} else if (ch.nodeType === 1 && ch.tagName !== 'BR') walk(ch);
|
||||
});
|
||||
})(el);
|
||||
return $$('.pw', el);
|
||||
}
|
||||
function splitChars(el) {
|
||||
var txt = el.textContent; el.textContent = '';
|
||||
var sr = document.createElement('span'); sr.className = 'sr-only'; sr.textContent = txt; el.appendChild(sr);
|
||||
return txt.split('').map(function (c) {
|
||||
var s = document.createElement('span'); s.className = 'pl'; s.textContent = c === ' ' ? '\u00a0' : c;
|
||||
s.setAttribute('aria-hidden', 'true'); s.style.display = 'inline-block';
|
||||
el.appendChild(s); return s;
|
||||
});
|
||||
}
|
||||
|
||||
if (reduce) {
|
||||
routeState = buildRoute();
|
||||
placeRider(1);
|
||||
return;
|
||||
}
|
||||
|
||||
/* ---- Hero-Intro ---- */
|
||||
var hero = $('.hero');
|
||||
if (hero) {
|
||||
var chars = [];
|
||||
$$('[data-hero-big] .part', hero).forEach(function (p) { chars = chars.concat(splitChars(p)); });
|
||||
var burgerImg = $('.hero__burger img', hero);
|
||||
var tl = gsap.timeline({ delay: .05 });
|
||||
tl.set($$('[data-intro]', hero), { opacity: 1 })
|
||||
.fromTo('.hero__eyebrow', { y: 24, opacity: 0 }, { y: 0, opacity: 1, duration: .5, ease: 'power3.out' }, 0)
|
||||
.fromTo(chars, { scale: 0, opacity: 0, y: function () { return rand(40, 100); }, rotation: function () { return rand(-18, 18); }, transformOrigin: '50% 90%' },
|
||||
{ scale: 1, opacity: 1, y: 0, rotation: 0, duration: .75, stagger: .045, ease: 'back.out(2.2)' }, .05)
|
||||
.fromTo(burgerImg, { scale: .45, y: 140, rotation: -12, opacity: 0 }, { scale: 1, y: 0, rotation: 0, opacity: 1, duration: 1.1, ease: 'back.out(1.5)' }, .3)
|
||||
.fromTo('.hero__wm .wm-fill', { xPercent: -30, opacity: 0, rotation: -8 }, { xPercent: 0, opacity: 1, rotation: 0, duration: .8, ease: 'back.out(1.8)' }, .75)
|
||||
.fromTo($$('[data-sticker]', hero), { '--s': 0 }, { '--s': 1, duration: .6, stagger: .12, ease: 'back.out(3)' }, .9)
|
||||
.fromTo(['.hero__bottom .lead', '.hero__cta'], { y: 30, opacity: 0 }, { y: 0, opacity: 1, duration: .7, stagger: .1, ease: 'power3.out' }, .8)
|
||||
.add(function () {
|
||||
gsap.to(burgerImg, { y: -14, duration: 2.4, yoyo: true, repeat: -1, ease: 'sine.inOut' });
|
||||
});
|
||||
|
||||
if (window.matchMedia('(pointer: fine)').matches) {
|
||||
var qx = gsap.quickTo(burgerImg, 'x', { duration: .8, ease: 'power3.out' });
|
||||
var qr = gsap.quickTo(burgerImg, 'rotation', { duration: .8, ease: 'power3.out' });
|
||||
hero.addEventListener('mousemove', function (e) {
|
||||
var r = hero.getBoundingClientRect();
|
||||
var nx = (e.clientX - r.left) / r.width - .5;
|
||||
qx(nx * 40); qr(nx * 6);
|
||||
});
|
||||
}
|
||||
|
||||
var mm = gsap.matchMedia();
|
||||
mm.add('(min-width: 821px)', function () {
|
||||
var parts = $$('[data-hero-big] .part', hero);
|
||||
gsap.to(parts[0], { xPercent: -10, ease: 'none', scrollTrigger: { trigger: hero, start: 'top top', end: 'bottom top', scrub: true } });
|
||||
gsap.to(parts[1], { xPercent: 12, ease: 'none', scrollTrigger: { trigger: hero, start: 'top top', end: 'bottom top', scrub: true } });
|
||||
gsap.to('.hero__burger', { yPercent: -12, ease: 'none', scrollTrigger: { trigger: hero, start: 'top top', end: 'bottom top', scrub: true } });
|
||||
});
|
||||
}
|
||||
|
||||
/* ---- Seiten-Hero (Unterseiten) ---- */
|
||||
var pageHero = $('.page-hero');
|
||||
if (pageHero) {
|
||||
var ph = $('[data-hero-big]', pageHero);
|
||||
if (ph) {
|
||||
var pchars = splitChars(ph);
|
||||
gsap.fromTo(pchars, { scale: 0, opacity: 0, y: function () { return rand(40, 90); }, rotation: function () { return rand(-16, 16); }, transformOrigin: '50% 90%' },
|
||||
{ scale: 1, opacity: 1, y: 0, rotation: 0, duration: .75, stagger: .05, ease: 'back.out(2.2)', delay: .05 });
|
||||
}
|
||||
var phImg = $('.page-hero__img img', pageHero);
|
||||
if (phImg) {
|
||||
gsap.fromTo(phImg, { scale: .5, y: 120, rotation: 10, opacity: 0 }, { scale: 1, y: 0, rotation: 0, opacity: 1, duration: 1.1, ease: 'back.out(1.5)', delay: .25 });
|
||||
gsap.to(phImg, { y: -12, duration: 2.4, yoyo: true, repeat: -1, ease: 'sine.inOut', delay: 1.4 });
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Wort-Pop für Headlines ---- */
|
||||
$$('[data-pop]').forEach(function (el) {
|
||||
var words = splitWords(el);
|
||||
gsap.fromTo(words,
|
||||
{ opacity: 0, scale: 0, y: function () { return rand(18, 40); }, rotation: function () { return rand(-14, 14); }, transformOrigin: '50% 90%' },
|
||||
{ opacity: 1, scale: 1, y: 0, rotation: 0, duration: .72, stagger: .06, ease: 'back.out(2.35)',
|
||||
scrollTrigger: { trigger: el, start: 'top 88%', once: true } });
|
||||
});
|
||||
|
||||
/* ---- Reveal (nutzt translate/opacity, damit CSS-Rotationen bleiben) ---- */
|
||||
var reveals = $$('[data-reveal]').filter(function (el) { return !el.closest('.hero'); });
|
||||
ST.batch(reveals, {
|
||||
start: 'top 90%', once: true,
|
||||
onEnter: function (batch) {
|
||||
gsap.fromTo(batch, { opacity: 0, '--ry': '40px' }, { opacity: 1, '--ry': '0px', duration: .9, stagger: .1, ease: 'power3.out' });
|
||||
}
|
||||
});
|
||||
|
||||
/* ---- Sticker "aufkleben" ---- */
|
||||
$$('[data-sticker]').filter(function (el) { return !el.closest('.hero'); }).forEach(function (el) {
|
||||
gsap.fromTo(el, { '--s': 0 }, { '--s': 1, duration: .7, ease: 'back.out(3)', scrollTrigger: { trigger: el, start: 'top 88%', once: true } });
|
||||
});
|
||||
|
||||
/* ---- Parallax Fotoband ---- */
|
||||
$$('[data-parallax]').forEach(function (img) {
|
||||
gsap.fromTo(img, { yPercent: -7 }, { yPercent: 7, ease: 'none', scrollTrigger: { trigger: img.parentNode, start: 'top bottom', end: 'bottom top', scrub: true } });
|
||||
});
|
||||
|
||||
/* ---- Route ---- */
|
||||
if (route) {
|
||||
routeState = buildRoute();
|
||||
ST.create({
|
||||
trigger: route, start: 'top 75%', end: 'bottom 55%', scrub: .6,
|
||||
onUpdate: function (self) { placeRider(self.progress); },
|
||||
onRefresh: function (self) { routeState = buildRoute(); placeRider(self.progress); }
|
||||
});
|
||||
placeRider(0);
|
||||
}
|
||||
|
||||
/* ---- Footer: jonglierende Zutaten ---- */
|
||||
var jug = $('[data-juggle]');
|
||||
if (jug) {
|
||||
var spots = [9, 33, 60, 84];
|
||||
var tls = $$('.juggle', jug).map(function (el, i) {
|
||||
el.style.left = spots[i % spots.length] + '%';
|
||||
var apex = function () { return -Math.min(320, window.innerWidth * rand(.12, .22)); };
|
||||
var t = gsap.timeline({ repeat: -1, repeatRefresh: true, delay: i * .35, paused: true });
|
||||
t.to(el, { y: apex, rotation: function () { return '+=' + rand(180, 520); }, x: function () { return rand(-30, 30); }, duration: function () { return rand(.8, 1.1); }, ease: 'power2.out' })
|
||||
.to(el, { y: 0, duration: function () { return rand(.7, .95); }, ease: 'power2.in' })
|
||||
.to(el, { duration: function () { return rand(.15, .7); } });
|
||||
return t;
|
||||
});
|
||||
ST.create({
|
||||
trigger: jug, start: 'top bottom', end: 'bottom top',
|
||||
onToggle: function (self) { tls.forEach(function (t) { self.isActive ? t.play() : t.pause(); }); }
|
||||
});
|
||||
document.addEventListener('visibilitychange', function () {
|
||||
tls.forEach(function (t) { document.hidden ? t.pause() : (ST.isInViewport(jug) && t.play()); });
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('load', function () { ST.refresh(); });
|
||||
})();
|
||||
Reference in new issue
Block a user