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 2026-09-30 21:20:31 +00:00
1 parent ca9d191c3f
commit 554213f71d
40 files changed
+2388

No files matched your search

+33
View File
@@ -0,0 +1,33 @@
# Chickago Boys – Website
Statische Website für **Chickago Boys Fried Chicken & Burger**, Merkurstraße 13, 67663 Kaiserslautern.
Preview: https://chickago-boys.project.webklar.com (Deploy über den Org-Webhook bei jedem Push auf `main`).
## Aufbau
| Datei | Inhalt |
|---|---|
| `index.html` | Startseite: Hero „Knockout“, Favoriten, Wings, Buckets, Take away, Besuch/Öffnungszeiten, CTA |
| `speisekarte.html` | Komplette Karte mit Preisen (Kategorien-Navigation, Karten mit freigestellten Fotos) |
| `impressum.html`, `datenschutz.html` | **Entwürfe** mit gelb markierten Platzhaltern |
| `assets/css/style.css` | Design-System (Farben, Typo, Komponenten) |
| `assets/js/main.js` | Öffnungsstatus, Menü, Animationen (GSAP + ScrollTrigger, Lenis) |
| `assets/img/` | Logo als Vektor (`rooster.svg`, `wordmark.svg`), Food-Freisteller `cut-*.webp`, Fotos `foto-*.webp` |
| `assets/fonts/` | Anton, Titan One, Archivo – lokal eingebunden (keine Google-Verbindung) |
Kein Build-Schritt, keine Cookies, keine Tracker, keine externen Einbindungen. Karten, Instagram und Lieferando sind nur verlinkt.
## Design
Inspiration: cravburgers.shop (Konzeptseite der Agentur Anyflow). Übernommen wurden nur die Prinzipien: riesige umrandete Headlines, Farbflächen mit Wellen, Sticker, Freisteller, Wort-Pop-Animationen. Farben, Schriften und Maskottchen sind eigene: der Boxer-Hahn aus dem Chickago-Boys-Logo, Konzept „Fight Night“.
## Offen vor dem Livegang (vom Kunden bestätigen)
- Inhaber bzw. Rechtsform, E-Mail und USt-IdNr. für Impressum und Datenschutz
- Öffnungszeiten: aktuell „täglich 12–22 Uhr“ laut Google; ältere Einträge nennen einen Ruhetag am Montag
- Preise: übernommen aus der Lieferando-Karte vom 30.09.2026, im Restaurant eventuell abweichend
- Rechte an den Speisenfotos und Logo als Originaldatei (die Fotos stammen aus dem Lieferando-Eintrag)
- Allergen- und Zusatzstoffliste
- Domain: `chickagoboys.de` leitet heute auf Lieferando weiter
- `og:image` auf eine absolute URL umstellen, sobald die Domain feststeht
- Optional: englische Version für die US-Community (KMC)
+796
View File
@@ -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

+1
View File
@@ -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

+1
View File
@@ -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

+11
View File
@@ -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
+11
View File
@@ -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
View File
Whitespace-only changes.
+366
View File
@@ -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(); });
})();
+167
View File
@@ -0,0 +1,167 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, follow">
<title>Datenschutz – Chickago Boys</title>
<meta name="description" content="Datenschutzerklärung von Chickago Boys Fried Chicken & Burger in Kaiserslautern.">
<meta name="theme-color" content="#e0140e">
<link rel="icon" href="assets/img/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
<meta property="og:type" content="website">
<meta property="og:locale" content="de_DE">
<meta property="og:site_name" content="Chickago Boys">
<meta property="og:title" content="Datenschutz – Chickago Boys">
<meta property="og:description" content="Datenschutzerklärung von Chickago Boys Fried Chicken & Burger in Kaiserslautern.">
<meta property="og:image" content="assets/img/og-image.jpg">
<link rel="preload" href="assets/fonts/anton-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="assets/fonts/titan-one-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="assets/css/style.css">
<script>
(function (d) {
var h = d.documentElement; h.classList.add('js');
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) h.classList.add('anim');
setTimeout(function () { if (!window.gsap) h.classList.remove('anim'); }, 2500);
})(document);
</script>
<script src="assets/js/gsap.min.js" defer></script>
<script src="assets/js/ScrollTrigger.min.js" defer></script>
<script src="assets/js/lenis.min.js" defer></script>
<script src="assets/js/main.js" defer></script>
</head>
<body>
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
<symbol id="i-bag" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M5 8h14l-1.2 12.2a1 1 0 0 1-1 .8H7.2a1 1 0 0 1-1-.8L5 8Zm3 0V6.5a4 4 0 0 1 8 0V8"/></symbol>
<symbol id="i-phone" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M6.6 3.5h2.8l1.4 4.2-2 1.5a12 12 0 0 0 6 6l1.5-2 4.2 1.4v2.8a2 2 0 0 1-2.2 2A17 17 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2Z"/></symbol>
<symbol id="i-pin" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21Zm0-9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"/></symbol>
<symbol id="i-arrow" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M5 12h14m-6-6 6 6-6 6"/></symbol>
<symbol id="i-insta" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2.2"><rect x="3.5" y="3.5" width="17" height="17" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r=".6" fill="currentColor"/></g></symbol>
<symbol id="i-fb" viewBox="0 0 24 24"><path fill="currentColor" d="M13.5 21v-7.5h2.6l.4-3h-3V8.6c0-.9.3-1.5 1.5-1.5h1.6V4.4a21 21 0 0 0-2.3-.1c-2.3 0-3.9 1.4-3.9 4v2.2H7.8v3h2.6V21h3.1Z"/></symbol>
</svg>
<a class="skip-link" href="#main">Zum Inhalt springen</a>
<header class="nav" id="nav">
<a class="nav__brand" href="index.html" aria-label="Chickago Boys – Startseite">
<img src="assets/img/rooster.svg" alt="" width="40" height="58">
<span class="wm wm-mask" aria-hidden="true"></span>
</a>
<div class="nav__actions">
<a class="pill pill--red" href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener">
<span class="roll"><span>Jetzt bestellen</span><span aria-hidden="true">Jetzt bestellen</span></span>
</a>
<button class="pill pill--outline" id="menu-btn" type="button" aria-expanded="false" aria-controls="menu-panel">
<span class="roll"><span class="menu-label">Menü</span><span aria-hidden="true" class="menu-label">Menü</span></span>
<span class="nav__burger" aria-hidden="true"><i></i><i></i><i></i></span>
</button>
</div>
</header>
<div class="menu-overlay" id="menu-overlay"></div>
<nav class="menu-panel" id="menu-panel" aria-label="Hauptmenü">
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="speisekarte.html">Speisekarte</a></li>
<li><a href="index.html#wings">Wings</a></li>
<li><a href="index.html#buckets">Buckets</a></li>
<li><a href="index.html#bestellen">Bestellen</a></li>
<li><a href="index.html#besuch">Besuch</a></li>
</ul>
<div class="menu-panel__meta">
Merkurstraße 13 · 67663 Kaiserslautern<br>
Täglich 12–22 Uhr · <a href="tel:+496313107985">0631 3107985</a>
</div>
</nav>
<main id="main" class="legal">
<div class="wrap">
<span class="kicker">Rechtliches</span>
<h1 class="display stroke">Datenschutz</h1>
<div class="legal__body">
<p class="draft-box">Entwurf: Die gelb markierten Angaben ergänzen wir vor der Veröffentlichung. Der Text wird vor dem Livegang rechtlich geprüft.</p>
<h2>1. Verantwortlicher</h2>
<p><span class="fill">[Vor- und Nachname des Inhabers bzw. Name der Gesellschaft]</span><br>
Chickago Boys Fried Chicken &amp; Burger<br>
Merkurstraße 13, 67663 Kaiserslautern<br>
Telefon: <a href="tel:+496313107985">0631 3107985</a> · E-Mail: <span class="fill">[E-Mail-Adresse]</span></p>
<h2>2. Das Wichtigste in Kürze</h2>
<p>Diese Website setzt keine Cookies, nutzt keine Analyse- oder Tracking-Werkzeuge und lädt keine Inhalte von Drittanbietern nach. Schriften, Bilder und Skripte liegen auf unserem eigenen Webspace. Ein Cookie-Banner ist deshalb nicht nötig.</p>
<h2>3. Hosting und Server-Logfiles</h2>
<p>Beim Aufruf der Website erfasst der Server unseres Hosters automatisch technische Daten, die dein Browser übermittelt: IP-Adresse, Datum und Uhrzeit des Abrufs, aufgerufene Seite, Referrer-URL, Browsertyp und Betriebssystem. Diese Daten brauchen wir, um die Website auszuliefern und ihre Sicherheit und Stabilität zu gewährleisten. Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO. Die Logfiles werden nach <span class="fill">[Anzahl]</span> Tagen gelöscht.</p>
<p>Hoster: <span class="fill">[Name und Anschrift des Hosters]</span>. Mit dem Hoster besteht ein Vertrag zur Auftragsverarbeitung nach Art. 28 DSGVO.</p>
<h2>4. Kontakt per Telefon oder E-Mail</h2>
<p>Wenn du uns anrufst oder schreibst, verarbeiten wir deine Angaben, um deine Anfrage zu beantworten, etwa eine Reservierung oder eine Frage zu Allergenen. Rechtsgrundlage ist Art. 6 Abs. 1 lit. b DSGVO, sofern es um eine Bestellung oder Reservierung geht, sonst Art. 6 Abs. 1 lit. f DSGVO. Wir löschen die Daten, sobald die Anfrage erledigt ist und keine gesetzlichen Aufbewahrungspflichten entgegenstehen.</p>
<h2>5. Bestellungen über Lieferando und Uber Eats</h2>
<p>Online-Bestellungen laufen über die Plattformen Lieferando und Uber Eats. Für die Bestellung gelten deren Datenschutzhinweise. Von der Plattform erhalten wir nur die Daten, die wir für Zubereitung, Abholung oder Lieferung brauchen, zum Beispiel Name, Lieferadresse, Telefonnummer und Bestellinhalt. Rechtsgrundlage ist Art. 6 Abs. 1 lit. b DSGVO.</p>
<h2>6. Links zu anderen Anbietern</h2>
<p>Auf dieser Website verlinken wir auf Lieferando, Uber Eats, Google Maps, Instagram und Facebook. Das sind einfache Links: Erst wenn du darauf klickst, verlässt du unsere Website und der jeweilige Anbieter erhält Daten von dir. Dafür gelten die Datenschutzhinweise des Anbieters.</p>
<h2>7. Deine Rechte</h2>
<p>Du hast das Recht auf Auskunft (Art. 15 DSGVO), Berichtigung (Art. 16), Löschung (Art. 17), Einschränkung der Verarbeitung (Art. 18), Datenübertragbarkeit (Art. 20) und Widerspruch gegen Verarbeitungen auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO (Art. 21). Wende dich dafür einfach an die oben genannten Kontaktdaten.</p>
<p>Außerdem kannst du dich bei einer Datenschutz-Aufsichtsbehörde beschweren, zum Beispiel beim Landesbeauftragten für den Datenschutz und die Informationsfreiheit Rheinland-Pfalz, Hintere Bleiche 34, 55116 Mainz, <a href="https://www.datenschutz.rlp.de" target="_blank" rel="noopener">www.datenschutz.rlp.de</a>.</p>
<p class="note">Stand: <span class="fill">[Datum der Veröffentlichung]</span></p>
</div>
</div>
</main>
<footer class="footer on-dark" data-nav-dark>
<div class="wrap">
<div class="footer__grid">
<div class="footer__brand">
<img src="assets/img/rooster.svg" width="179" height="264" alt="">
<p>Fried Chicken, Wings &amp; Burger in Kaiserslautern. Bar &amp; Restaurant in der Merkurstraße 13.</p>
</div>
<div>
<h2>Seiten</h2>
<ul class="footer__links">
<li><a href="index.html">Start</a></li>
<li><a href="speisekarte.html">Speisekarte</a></li>
<li><a href="index.html#wings">Wings</a></li>
<li><a href="index.html#besuch">Besuch</a></li>
</ul>
</div>
<div>
<h2>Kontakt</h2>
<ul>
<li>Merkurstraße 13<br>67663 Kaiserslautern</li>
<li><a href="tel:+496313107985">0631 3107985</a></li>
<li>Täglich 12–22 Uhr</li>
</ul>
</div>
<div>
<h2>Bestellen &amp; folgen</h2>
<ul>
<li><a href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener">Lieferando</a></li>
<li><a href="https://www.ubereats.com/de/store/chickago-boys-kaiserslautern/5Yb4dNqDVJOuStkhhdC4qw" target="_blank" rel="noopener">Uber Eats</a></li>
<li><a href="https://www.instagram.com/chickago_boys/" target="_blank" rel="noopener">Instagram @chickago_boys</a></li>
<li><a href="https://www.facebook.com/p/Chickago-Boys-61554599980010/" target="_blank" rel="noopener">Facebook</a></li>
</ul>
</div>
</div>
<div class="footer__bottom">
<span>© <span data-year>2026</span> Chickago Boys · Alle Preise inkl. MwSt.</span>
<span><a href="impressum.html">Impressum</a> · <a href="datenschutz.html">Datenschutz</a> · Website von <a href="https://webklar.com" target="_blank" rel="noopener">WEBklar</a></span>
</div>
</div>
<div class="footer__giant" aria-hidden="true" data-juggle>
<div class="wm-giant"><span class="wm-mask wm-mask--block"></span></div>
<span class="juggle"><svg viewBox="0 0 120 120"><g transform="rotate(-40 60 60)" stroke="#150d0c" stroke-width="4" stroke-linejoin="round"><circle cx="52" cy="12" r="8" fill="#fff6e6"/><circle cx="68" cy="12" r="8" fill="#fff6e6"/><rect x="54" y="10" width="12" height="40" rx="5" fill="#fff6e6"/><path d="M60 40c28 0 38 30 32 50-6 20-58 20-64 0-6-20 4-50 32-50Z" fill="#d98a2b"/><path d="M42 64q6-6 12 0m8-6q6-6 12 0M50 82q6-6 12 0m8-4q6-6 12 0" fill="none" stroke="#f5b400" stroke-linecap="round"/></g></svg></span>
<span class="juggle"><svg viewBox="0 0 120 120"><g stroke="#150d0c" stroke-width="4" stroke-linejoin="round"><path d="M30 32c-10 30 10 70 65 74C70 90 55 70 52 40Z" fill="#e0140e"/><path d="M28 34c4-10 16-12 24 6" fill="#3f9b2a"/><path d="M38 22c-2-8 2-14 8-16" fill="none" stroke-linecap="round"/></g><path d="M44 54c2 16 12 30 26 38" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" opacity=".6"/></svg></span>
<span class="juggle"><svg viewBox="0 0 120 120"><g stroke="#150d0c" stroke-width="4" stroke-linejoin="round"><rect x="34" y="16" width="10" height="48" fill="#ffd21f" transform="rotate(-10 39 40)"/><rect x="48" y="8" width="10" height="56" fill="#ffd21f"/><rect x="62" y="12" width="10" height="52" fill="#ffd21f" transform="rotate(8 67 38)"/><rect x="74" y="18" width="10" height="46" fill="#ffd21f" transform="rotate(16 79 41)"/><path d="M24 48h72l-10 64H34Z" fill="#e0140e"/></g><path d="M44 72q16 12 32 0" fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"/></svg></span>
<span class="juggle"><svg viewBox="0 0 120 120"><g stroke="#150d0c" stroke-width="4" stroke-linejoin="round"><path d="M30 70C18 40 40 12 70 14s38 30 28 52c-6 14-18 18-28 16l-4 14H38l-2-16c-3-3-5-6-6-10Z" fill="#e0140e"/><path d="M36 96h32l2 16H34Z" fill="#fff6e6"/><path d="M44 44c8-8 22-8 28 2-12-2-20 2-24 10" fill="#e0140e"/></g><path d="M50 26c10-4 22-4 30 2" stroke="#fff" stroke-width="5" fill="none" stroke-linecap="round" opacity=".7"/></svg></span>
</div>
</footer>
<div class="orderbar" id="orderbar">
<a class="call" href="tel:+496313107985"><svg aria-hidden="true"><use href="#i-phone"/></svg>Anrufen</a>
<a class="order" href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener"><svg aria-hidden="true"><use href="#i-bag"/></svg>Jetzt bestellen</a>
</div>
</body>
</html>
+165
View File
@@ -0,0 +1,165 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, follow">
<title>Impressum – Chickago Boys</title>
<meta name="description" content="Impressum von Chickago Boys Fried Chicken & Burger, Merkurstraße 13, 67663 Kaiserslautern.">
<meta name="theme-color" content="#e0140e">
<link rel="icon" href="assets/img/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
<meta property="og:type" content="website">
<meta property="og:locale" content="de_DE">
<meta property="og:site_name" content="Chickago Boys">
<meta property="og:title" content="Impressum – Chickago Boys">
<meta property="og:description" content="Impressum von Chickago Boys Fried Chicken & Burger, Merkurstraße 13, 67663 Kaiserslautern.">
<meta property="og:image" content="assets/img/og-image.jpg">
<link rel="preload" href="assets/fonts/anton-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="assets/fonts/titan-one-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="assets/css/style.css">
<script>
(function (d) {
var h = d.documentElement; h.classList.add('js');
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) h.classList.add('anim');
setTimeout(function () { if (!window.gsap) h.classList.remove('anim'); }, 2500);
})(document);
</script>
<script src="assets/js/gsap.min.js" defer></script>
<script src="assets/js/ScrollTrigger.min.js" defer></script>
<script src="assets/js/lenis.min.js" defer></script>
<script src="assets/js/main.js" defer></script>
</head>
<body>
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
<symbol id="i-bag" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M5 8h14l-1.2 12.2a1 1 0 0 1-1 .8H7.2a1 1 0 0 1-1-.8L5 8Zm3 0V6.5a4 4 0 0 1 8 0V8"/></symbol>
<symbol id="i-phone" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M6.6 3.5h2.8l1.4 4.2-2 1.5a12 12 0 0 0 6 6l1.5-2 4.2 1.4v2.8a2 2 0 0 1-2.2 2A17 17 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2Z"/></symbol>
<symbol id="i-pin" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21Zm0-9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"/></symbol>
<symbol id="i-arrow" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M5 12h14m-6-6 6 6-6 6"/></symbol>
<symbol id="i-insta" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2.2"><rect x="3.5" y="3.5" width="17" height="17" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r=".6" fill="currentColor"/></g></symbol>
<symbol id="i-fb" viewBox="0 0 24 24"><path fill="currentColor" d="M13.5 21v-7.5h2.6l.4-3h-3V8.6c0-.9.3-1.5 1.5-1.5h1.6V4.4a21 21 0 0 0-2.3-.1c-2.3 0-3.9 1.4-3.9 4v2.2H7.8v3h2.6V21h3.1Z"/></symbol>
</svg>
<a class="skip-link" href="#main">Zum Inhalt springen</a>
<header class="nav" id="nav">
<a class="nav__brand" href="index.html" aria-label="Chickago Boys – Startseite">
<img src="assets/img/rooster.svg" alt="" width="40" height="58">
<span class="wm wm-mask" aria-hidden="true"></span>
</a>
<div class="nav__actions">
<a class="pill pill--red" href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener">
<span class="roll"><span>Jetzt bestellen</span><span aria-hidden="true">Jetzt bestellen</span></span>
</a>
<button class="pill pill--outline" id="menu-btn" type="button" aria-expanded="false" aria-controls="menu-panel">
<span class="roll"><span class="menu-label">Menü</span><span aria-hidden="true" class="menu-label">Menü</span></span>
<span class="nav__burger" aria-hidden="true"><i></i><i></i><i></i></span>
</button>
</div>
</header>
<div class="menu-overlay" id="menu-overlay"></div>
<nav class="menu-panel" id="menu-panel" aria-label="Hauptmenü">
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="speisekarte.html">Speisekarte</a></li>
<li><a href="index.html#wings">Wings</a></li>
<li><a href="index.html#buckets">Buckets</a></li>
<li><a href="index.html#bestellen">Bestellen</a></li>
<li><a href="index.html#besuch">Besuch</a></li>
</ul>
<div class="menu-panel__meta">
Merkurstraße 13 · 67663 Kaiserslautern<br>
Täglich 12–22 Uhr · <a href="tel:+496313107985">0631 3107985</a>
</div>
</nav>
<main id="main" class="legal">
<div class="wrap">
<span class="kicker">Rechtliches</span>
<h1 class="display stroke">Impressum</h1>
<div class="legal__body">
<p class="draft-box">Entwurf: Die gelb markierten Angaben ergänzen wir vor der Veröffentlichung mit den Daten des Betreibers.</p>
<h2>Angaben gemäß § 5 DDG</h2>
<p><span class="fill">[Vor- und Nachname des Inhabers bzw. Name der Gesellschaft mit Rechtsform]</span><br>
Chickago Boys Fried Chicken &amp; Burger<br>
Merkurstraße 13<br>
67663 Kaiserslautern</p>
<p><span class="fill">[Nur bei Gesellschaften: Vertreten durch …]</span></p>
<h2>Kontakt</h2>
<p>Telefon: <a href="tel:+496313107985">0631 3107985</a><br>
E-Mail: <span class="fill">[E-Mail-Adresse]</span></p>
<h2>Umsatzsteuer-ID</h2>
<p>Umsatzsteuer-Identifikationsnummer gemäß § 27a Umsatzsteuergesetz: <span class="fill">[falls vorhanden]</span></p>
<h2>Registereintrag</h2>
<p><span class="fill">[Nur falls vorhanden: Registergericht und Registernummer]</span></p>
<h2>Verbraucherstreitbeilegung</h2>
<p>Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.</p>
<h2>Bildnachweis</h2>
<p>Speisenfotos und Logo: Chickago Boys. <span class="fill">[Rechte bestätigen]</span></p>
<h2>Website</h2>
<p>Konzept, Gestaltung und Umsetzung: <a href="https://webklar.com" target="_blank" rel="noopener">WEBklar</a></p>
</div>
</div>
</main>
<footer class="footer on-dark" data-nav-dark>
<div class="wrap">
<div class="footer__grid">
<div class="footer__brand">
<img src="assets/img/rooster.svg" width="179" height="264" alt="">
<p>Fried Chicken, Wings &amp; Burger in Kaiserslautern. Bar &amp; Restaurant in der Merkurstraße 13.</p>
</div>
<div>
<h2>Seiten</h2>
<ul class="footer__links">
<li><a href="index.html">Start</a></li>
<li><a href="speisekarte.html">Speisekarte</a></li>
<li><a href="index.html#wings">Wings</a></li>
<li><a href="index.html#besuch">Besuch</a></li>
</ul>
</div>
<div>
<h2>Kontakt</h2>
<ul>
<li>Merkurstraße 13<br>67663 Kaiserslautern</li>
<li><a href="tel:+496313107985">0631 3107985</a></li>
<li>Täglich 12–22 Uhr</li>
</ul>
</div>
<div>
<h2>Bestellen &amp; folgen</h2>
<ul>
<li><a href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener">Lieferando</a></li>
<li><a href="https://www.ubereats.com/de/store/chickago-boys-kaiserslautern/5Yb4dNqDVJOuStkhhdC4qw" target="_blank" rel="noopener">Uber Eats</a></li>
<li><a href="https://www.instagram.com/chickago_boys/" target="_blank" rel="noopener">Instagram @chickago_boys</a></li>
<li><a href="https://www.facebook.com/p/Chickago-Boys-61554599980010/" target="_blank" rel="noopener">Facebook</a></li>
</ul>
</div>
</div>
<div class="footer__bottom">
<span>© <span data-year>2026</span> Chickago Boys · Alle Preise inkl. MwSt.</span>
<span><a href="impressum.html">Impressum</a> · <a href="datenschutz.html">Datenschutz</a> · Website von <a href="https://webklar.com" target="_blank" rel="noopener">WEBklar</a></span>
</div>
</div>
<div class="footer__giant" aria-hidden="true" data-juggle>
<div class="wm-giant"><span class="wm-mask wm-mask--block"></span></div>
<span class="juggle"><svg viewBox="0 0 120 120"><g transform="rotate(-40 60 60)" stroke="#150d0c" stroke-width="4" stroke-linejoin="round"><circle cx="52" cy="12" r="8" fill="#fff6e6"/><circle cx="68" cy="12" r="8" fill="#fff6e6"/><rect x="54" y="10" width="12" height="40" rx="5" fill="#fff6e6"/><path d="M60 40c28 0 38 30 32 50-6 20-58 20-64 0-6-20 4-50 32-50Z" fill="#d98a2b"/><path d="M42 64q6-6 12 0m8-6q6-6 12 0M50 82q6-6 12 0m8-4q6-6 12 0" fill="none" stroke="#f5b400" stroke-linecap="round"/></g></svg></span>
<span class="juggle"><svg viewBox="0 0 120 120"><g stroke="#150d0c" stroke-width="4" stroke-linejoin="round"><path d="M30 32c-10 30 10 70 65 74C70 90 55 70 52 40Z" fill="#e0140e"/><path d="M28 34c4-10 16-12 24 6" fill="#3f9b2a"/><path d="M38 22c-2-8 2-14 8-16" fill="none" stroke-linecap="round"/></g><path d="M44 54c2 16 12 30 26 38" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" opacity=".6"/></svg></span>
<span class="juggle"><svg viewBox="0 0 120 120"><g stroke="#150d0c" stroke-width="4" stroke-linejoin="round"><rect x="34" y="16" width="10" height="48" fill="#ffd21f" transform="rotate(-10 39 40)"/><rect x="48" y="8" width="10" height="56" fill="#ffd21f"/><rect x="62" y="12" width="10" height="52" fill="#ffd21f" transform="rotate(8 67 38)"/><rect x="74" y="18" width="10" height="46" fill="#ffd21f" transform="rotate(16 79 41)"/><path d="M24 48h72l-10 64H34Z" fill="#e0140e"/></g><path d="M44 72q16 12 32 0" fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"/></svg></span>
<span class="juggle"><svg viewBox="0 0 120 120"><g stroke="#150d0c" stroke-width="4" stroke-linejoin="round"><path d="M30 70C18 40 40 12 70 14s38 30 28 52c-6 14-18 18-28 16l-4 14H38l-2-16c-3-3-5-6-6-10Z" fill="#e0140e"/><path d="M36 96h32l2 16H34Z" fill="#fff6e6"/><path d="M44 44c8-8 22-8 28 2-12-2-20 2-24 10" fill="#e0140e"/></g><path d="M50 26c10-4 22-4 30 2" stroke="#fff" stroke-width="5" fill="none" stroke-linecap="round" opacity=".7"/></svg></span>
</div>
</footer>
<div class="orderbar" id="orderbar">
<a class="call" href="tel:+496313107985"><svg aria-hidden="true"><use href="#i-phone"/></svg>Anrufen</a>
<a class="order" href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener"><svg aria-hidden="true"><use href="#i-bag"/></svg>Jetzt bestellen</a>
</div>
</body>
</html>
+438
View File
@@ -0,0 +1,438 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chickago Boys – Fried Chicken &amp; Burger in Kaiserslautern</title>
<meta name="description" content="Knusprige Chicken Wings, Crispy Tenders und Burger in der Merkurstraße 13 in Kaiserslautern. Vor Ort essen, abholen oder liefern lassen. Täglich 12–22 Uhr.">
<meta name="theme-color" content="#e0140e">
<link rel="icon" href="assets/img/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
<meta property="og:type" content="restaurant">
<meta property="og:locale" content="de_DE">
<meta property="og:site_name" content="Chickago Boys">
<meta property="og:title" content="Chickago Boys – Fried Chicken &amp; Burger in Kaiserslautern">
<meta property="og:description" content="Wings, Crispy Tenders und Burger in der Merkurstraße 13. Vor Ort, zum Abholen oder geliefert.">
<meta property="og:image" content="assets/img/og-image.jpg">
<link rel="preload" href="assets/fonts/anton-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="assets/fonts/titan-one-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="assets/img/cut-us-burger.webp" as="image" type="image/webp">
<link rel="stylesheet" href="assets/css/style.css">
<script>
(function (d) {
var h = d.documentElement; h.classList.add('js');
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) h.classList.add('anim');
setTimeout(function () { if (!window.gsap) h.classList.remove('anim'); }, 2500);
})(document);
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Restaurant",
"name": "Chickago Boys Fried Chicken & Burger",
"alternateName": "Chickago Boys",
"description": "Fried Chicken, Chicken Wings, Crispy Tenders und Burger – Bar & Restaurant in Kaiserslautern.",
"servesCuisine": ["Amerikanisch", "Fried Chicken", "Burger", "Chicken Wings"],
"priceRange": "€€",
"telephone": "+49 631 3107985",
"address": {
"@type": "PostalAddress",
"streetAddress": "Merkurstraße 13",
"postalCode": "67663",
"addressLocality": "Kaiserslautern",
"addressRegion": "Rheinland-Pfalz",
"addressCountry": "DE"
},
"geo": { "@type": "GeoCoordinates", "latitude": 49.4434292, "longitude": 7.7302276 },
"openingHoursSpecification": [{
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
"opens": "12:00",
"closes": "22:00"
}],
"hasMenu": "speisekarte.html",
"sameAs": [
"https://www.instagram.com/chickago_boys/",
"https://www.facebook.com/p/Chickago-Boys-61554599980010/",
"https://www.lieferando.de/speisekarte/chickago-boys"
]
}
</script>
<script src="assets/js/gsap.min.js" defer></script>
<script src="assets/js/ScrollTrigger.min.js" defer></script>
<script src="assets/js/lenis.min.js" defer></script>
<script src="assets/js/main.js" defer></script>
</head>
<body>
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
<symbol id="i-bag" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M5 8h14l-1.2 12.2a1 1 0 0 1-1 .8H7.2a1 1 0 0 1-1-.8L5 8Zm3 0V6.5a4 4 0 0 1 8 0V8"/></symbol>
<symbol id="i-phone" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M6.6 3.5h2.8l1.4 4.2-2 1.5a12 12 0 0 0 6 6l1.5-2 4.2 1.4v2.8a2 2 0 0 1-2.2 2A17 17 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2Z"/></symbol>
<symbol id="i-pin" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21Zm0-9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"/></symbol>
<symbol id="i-arrow" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M5 12h14m-6-6 6 6-6 6"/></symbol>
<symbol id="i-insta" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2.2"><rect x="3.5" y="3.5" width="17" height="17" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r=".6" fill="currentColor"/></g></symbol>
<symbol id="i-fb" viewBox="0 0 24 24"><path fill="currentColor" d="M13.5 21v-7.5h2.6l.4-3h-3V8.6c0-.9.3-1.5 1.5-1.5h1.6V4.4a21 21 0 0 0-2.3-.1c-2.3 0-3.9 1.4-3.9 4v2.2H7.8v3h2.6V21h3.1Z"/></symbol>
</svg>
<a class="skip-link" href="#main">Zum Inhalt springen</a>
<header class="nav" id="nav">
<a class="nav__brand" href="index.html" aria-label="Chickago Boys – Startseite">
<img src="assets/img/rooster.svg" alt="" width="40" height="58">
<span class="wm wm-mask" aria-hidden="true"></span>
</a>
<div class="nav__actions">
<a class="pill pill--red" href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener">
<span class="roll"><span>Jetzt bestellen</span><span aria-hidden="true">Jetzt bestellen</span></span>
</a>
<button class="pill pill--outline" id="menu-btn" type="button" aria-expanded="false" aria-controls="menu-panel">
<span class="roll"><span class="menu-label">Menü</span><span aria-hidden="true" class="menu-label">Menü</span></span>
<span class="nav__burger" aria-hidden="true"><i></i><i></i><i></i></span>
</button>
</div>
</header>
<div class="menu-overlay" id="menu-overlay"></div>
<nav class="menu-panel" id="menu-panel" aria-label="Hauptmenü">
<ul>
<li><a href="#top">Start</a></li>
<li><a href="speisekarte.html">Speisekarte</a></li>
<li><a href="#wings">Wings</a></li>
<li><a href="#buckets">Buckets</a></li>
<li><a href="#bestellen">Bestellen</a></li>
<li><a href="#besuch">Besuch</a></li>
</ul>
<div class="menu-panel__meta">
Merkurstraße 13 · 67663 Kaiserslautern<br>
Täglich 12–22 Uhr · <a href="tel:+496313107985">0631 3107985</a>
</div>
</nav>
<main id="main">
<!-- ============ HERO ============ -->
<section class="hero bg-cream" id="top" aria-labelledby="hero-title">
<div class="hero__stage">
<h1 class="hero__title" id="hero-title">
<span class="hero__eyebrow" data-intro><span>Fried Chicken &amp; Burger</span> <span>in Kaiserslautern</span></span>
<span class="hero__big" data-hero-big><span class="part">Knock</span><span class="part">out</span></span>
</h1>
<div class="hero__burger" data-intro data-float>
<img src="assets/img/cut-us-burger.webp" width="774" height="760" alt="US Burger von Chickago Boys mit Cheddar, Spiegelei und Bacon" fetchpriority="high">
</div>
<div class="hero__wm" data-intro aria-hidden="true"><div class="wm-fill"><span class="wm-mask wm-mask--block"></span></div></div>
<span class="sticker hero__st1" data-intro data-sticker>Knusprig<br>paniert</span>
<span class="sticker sticker--red hero__st2" data-intro data-sticker>Mild oder<br>scharf?</span>
<img class="hero__rooster die-cut" src="assets/img/rooster.svg" alt="" width="179" height="264" data-intro data-sticker>
</div>
<div class="hero__bottom">
<p class="lead" data-intro>Crispy Tenders, Wings mit Punch und Burger, die dich <strong>umhauen</strong>. Frisch aus der Küche in der Merkurstraße 13 – vor Ort, zum Abholen oder geliefert.</p>
<div class="hero__cta" data-intro>
<span class="open-badge" data-open-badge>Öffnungszeiten: täglich 12–22 Uhr</span>
<a class="btn" href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener"><svg aria-hidden="true"><use href="#i-bag"/></svg>Jetzt bestellen</a>
<a class="btn btn--ghost" href="speisekarte.html">Speisekarte</a>
</div>
</div>
</section>
<div class="ticker-clip" aria-hidden="true">
<div class="ticker">
<div class="ticker__track">
<span>Chicken Wings</span><span>Crispy Tenders</span><span>Beef Burger</span><span>Chicken Burger</span><span>Wraps</span><span>Cheesy Fries</span><span>Buckets</span><span>Merkurstraße 13</span>
<span>Chicken Wings</span><span>Crispy Tenders</span><span>Beef Burger</span><span>Chicken Burger</span><span>Wraps</span><span>Cheesy Fries</span><span>Buckets</span><span>Merkurstraße 13</span>
</div>
</div>
</div>
<!-- ============ CHAMPIONS ============ -->
<section class="section bg-cream champs" aria-labelledby="champs-title">
<div class="wrap">
<span class="kicker" data-reveal>Die Favoriten</span>
<h2 class="display h2 stroke" id="champs-title" data-pop>Champions der Karte</h2>
<p class="lead" data-reveal>Knusprig, saftig, ordentlich belegt: drei Gerichte, mit denen du nichts falsch machst.</p>
<a class="btn" href="speisekarte.html" data-reveal>Ganze Karte ansehen <svg aria-hidden="true"><use href="#i-arrow"/></svg></a>
<div class="champs__cards">
<a class="photo-card" href="speisekarte.html#beef-burger" data-reveal>
<div class="photo-card__img"><img src="assets/img/foto-us-burger.webp" width="900" height="900" loading="lazy" alt="US Burger mit Cheddar, Ei, Bacon und BBQ-Soße auf einem Holzbrett"></div>
<span class="price photo-card__price">13,50 €</span>
<span class="photo-card__label"><span class="sticker">US Burger</span></span>
</a>
<a class="photo-card" href="speisekarte.html#chicken-burger" data-reveal>
<div class="photo-card__img"><img src="assets/img/foto-chicken-honey-mustard.webp" width="900" height="900" loading="lazy" alt="Chicken Burger Home Style mit Honey-Mustard-Soße und Bacon"></div>
<span class="price photo-card__price">12,50 €</span>
<span class="photo-card__label"><span class="sticker sticker--red">Honey Mustard Bacon</span></span>
</a>
<a class="photo-card" href="speisekarte.html#wraps" data-reveal>
<div class="photo-card__img"><img src="assets/img/foto-chicken-wrap.webp" width="900" height="900" loading="lazy" alt="Chicken Wrap Chickago-Boys mit zwei Crispy-Filets, aufgeschnitten"></div>
<span class="price photo-card__price">9,50 €</span>
<span class="photo-card__label"><span class="sticker">Chickago Wrap</span></span>
</a>
</div>
</div>
</section>
<!-- ============ WINGS ============ -->
<section class="section bg-red on-red wings" id="wings" aria-labelledby="wings-title">
<div class="wave wave--top" aria-hidden="true"><svg viewBox="0 0 1440 120" preserveAspectRatio="none"><path fill="currentColor" d="M0 70C160 18 330 20 520 62s380 70 560 30 280-66 360-42v72H0Z"/></svg></div>
<div class="wrap">
<div class="wings__head">
<div>
<span class="kicker kicker--yellow" data-reveal>Round 1</span>
<h2 class="display h2 stroke" id="wings-title" data-pop>Wings mit Punch</h2>
<p class="lead wings__lead" data-reveal><em>How many Wings can you handle?</em><br>Knusprig frittiert und in einer von vier Saucen geschwenkt – oder klassisch mit Sauce nach Wahl. Jede Portion gibt’s mild oder scharf.</p>
</div>
<div class="wings__hero" data-reveal>
<img src="assets/img/cut-chicken-wings.webp" width="1000" height="813" loading="lazy" alt="Ein Berg knuspriger Chicken Wings">
<span class="burst" data-sticker><span>K.O.<br>Crunch</span></span>
<img class="rooster-st die-cut" src="assets/img/rooster.svg" alt="" width="179" height="264" data-sticker>
</div>
</div>
<div class="sauce-grid">
<article class="sauce" data-reveal>
<div class="sauce__img"><img src="assets/img/cut-buffalo-wings.webp" width="800" height="784" loading="lazy" alt="Buffalo Red Hot Wings mit Dip"></div>
<h3>Buffalo Red Hot</h3>
<p>Der Klassiker mit Feuer.</p>
<span class="price">10 Stück · 14,00 €</span>
</article>
<article class="sauce" data-reveal>
<div class="sauce__img"><img src="assets/img/cut-bbq-wings.webp" width="800" height="830" loading="lazy" alt="Chipotle Honey BBQ Wings mit Dip"></div>
<h3>Chipotle Honey BBQ</h3>
<p>Rauchig, süß, klebrig gut.</p>
<span class="price">10 Stück · 14,00 €</span>
</article>
<article class="sauce" data-reveal>
<div class="sauce__img"><img src="assets/img/cut-teriyaki-wings.webp" width="800" height="789" loading="lazy" alt="Teriyaki Wings mit Dip"></div>
<h3>Teriyaki</h3>
<p>Glasiert mit Teriyaki-Sauce.</p>
<span class="price">10 Stück · 14,00 €</span>
</article>
<article class="sauce" data-reveal>
<div class="sauce__img"><img src="assets/img/cut-sweet-chili-wings.webp" width="800" height="709" loading="lazy" alt="Sweet Chili Wings mit Dip"></div>
<h3>Sweet Chili</h3>
<p>Süß-scharf geschwenkt.</p>
<span class="price">10 Stück · 14,00 €</span>
</article>
</div>
<div class="classic-wings" data-reveal>
<h3>Chicken Wings<br>Classic</h3>
<p>Knusprig, mit Sauce nach Wahl – mild oder scharf.</p>
<div class="classic-wings__prices">
<span class="price"><small>6 Stück</small>8,50 €</span>
<span class="price"><small>10 Stück</small>11,00 €</span>
<span class="price"><small>20 Stück</small>22,00 €</span>
</div>
</div>
</div>
</section>
<!-- ============ PHOTO BAND ============ -->
<div class="band" aria-hidden="true">
<div class="wave wave--top"><svg viewBox="0 0 1440 120" preserveAspectRatio="none"><path fill="currentColor" d="M0 0h1440v58c-150 40-330 62-540 30S470 20 300 44 70 96 0 80Z"/></svg></div>
<img src="assets/img/foto-menu-tenders.webp" width="1400" height="1400" loading="lazy" alt="" data-parallax>
<span class="sticker band__tag" data-sticker>Crispy Tenders<br>ab 9,50 €</span>
<div class="wave wave--bottom"><svg viewBox="0 0 1440 120" preserveAspectRatio="none"><path fill="currentColor" d="M0 0h1440v64c-170-40-360-52-560-12S430 104 250 70 60 30 0 48Z"/></svg></div>
</div>
<!-- ============ BUCKETS ============ -->
<section class="section bg-ink on-dark buckets" data-nav-dark id="buckets" aria-labelledby="buckets-title">
<div class="wrap">
<div class="buckets__head">
<div>
<span class="kicker kicker--yellow" data-reveal>Main Event</span>
<h2 class="display h2 stroke" id="buckets-title" data-pop>Fight Night? Bucket Time.</h2>
</div>
<p class="lead" data-reveal>Für Zocker-Nacht, Betze-Abend oder die ganze Crew: Wings, Filets, Pommes und Cola in einem Bucket. Wings und Filets jeweils mild oder scharf.</p>
</div>
<div class="fight-card-row">
<article class="fight-card" data-reveal>
<span class="fight-card__class">Mittelgewicht</span>
<h3>Bucket</h3>
<ul>
<li>20 Wings</li><li>5 Filets</li><li>2× Pommes</li><li>1× Coleslaw</li><li>Cola 1,0 l</li>
</ul>
<div class="fight-card__foot">
<span class="price">42,00 €</span>
<img src="assets/img/cut-chicken-wings.webp" width="1000" height="813" loading="lazy" alt="">
</div>
</article>
<span class="vs" aria-hidden="true" data-sticker>VS</span>
<article class="fight-card" data-reveal>
<span class="fight-card__class">Schwergewicht</span>
<h3>Party Bucket</h3>
<ul>
<li>20 Wings</li><li>20 Filets</li><li>4× Pommes</li><li>Cola 1,0 l</li>
</ul>
<div class="fight-card__foot">
<span class="price">68,00 €</span>
<img src="assets/img/cut-chicken-wings.webp" width="1000" height="813" loading="lazy" alt="">
</div>
</article>
</div>
<p class="buckets__note" data-reveal>Lieber einzeln? Tenders gibt’s ab 5 Stück, Menüs mit Pommes und Coleslaw – <a href="speisekarte.html#chicken">alles auf der Karte</a>.</p>
</div>
</section>
<!-- ============ TAKE AWAY ============ -->
<section class="section bg-yellow takeaway" id="bestellen" aria-labelledby="takeaway-title">
<div class="wave wave--top" aria-hidden="true"><svg viewBox="0 0 1440 120" preserveAspectRatio="none"><path fill="currentColor" d="M0 60c200-50 380-50 600-8s420 62 600 22 200-38 240-30v76H0Z"/></svg></div>
<div class="wrap">
<span class="kicker kicker--ink" data-reveal>Take away</span>
<h2 class="display h2 stroke" id="takeaway-title" data-pop>Hol’s dir. Oder lass kommen.</h2>
<p class="takeaway__lead lead" data-reveal>Drei Wege zu deinem Chicken – alle starten in der Merkurstraße 13.</p>
<div class="route" data-route>
<svg class="route__svg" aria-hidden="true" preserveAspectRatio="none"><path d=""/></svg>
<img class="route__rider die-cut" src="assets/img/rooster.svg" alt="" width="179" height="264">
<div class="stops">
<article class="stop" data-reveal>
<div class="stop__num">01</div>
<h3>Vor Ort essen</h3>
<p>Restaurant &amp; Bar mit Plätzen drinnen und draußen. Einfach vorbeikommen – mit größerer Gruppe am besten vorher anrufen.</p>
<div class="stop__links">
<a class="is-primary" href="https://www.google.com/maps/dir/?api=1&amp;destination=Merkurstra%C3%9Fe+13%2C+67663+Kaiserslautern" target="_blank" rel="noopener"><svg aria-hidden="true"><use href="#i-pin"/></svg>Route planen</a>
<a href="tel:+496313107985"><svg aria-hidden="true"><use href="#i-phone"/></svg>Anrufen</a>
</div>
</article>
<article class="stop" data-reveal>
<div class="stop__num">02</div>
<h3>Abholen</h3>
<p>Telefonisch bestellen oder bei Lieferando „Abholung“ wählen – und heiß mitnehmen.</p>
<div class="stop__links">
<a class="is-primary" href="tel:+496313107985"><svg aria-hidden="true"><use href="#i-phone"/></svg>0631 3107985</a>
<a href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener">Lieferando</a>
</div>
</article>
<article class="stop" data-reveal>
<div class="stop__num">03</div>
<h3>Liefern lassen</h3>
<p>Keine Lust rauszugehen? Bestell bequem über Lieferando oder Uber Eats und lass es dir bringen.</p>
<div class="stop__links">
<a class="is-primary" href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener"><svg aria-hidden="true"><use href="#i-bag"/></svg>Lieferando</a>
<a href="https://www.ubereats.com/de/store/chickago-boys-kaiserslautern/5Yb4dNqDVJOuStkhhdC4qw" target="_blank" rel="noopener">Uber Eats</a>
</div>
</article>
</div>
</div>
</div>
</section>
<!-- ============ VISIT ============ -->
<section class="section bg-cream visit" id="besuch" aria-labelledby="visit-title">
<div class="wave wave--top" aria-hidden="true"><svg viewBox="0 0 1440 120" preserveAspectRatio="none"><path fill="currentColor" d="M0 50c180 50 400 60 620 20s420-62 600-30 190 30 220 26v54H0Z"/></svg></div>
<div class="wrap visit__grid">
<div>
<span class="kicker" data-reveal>Ring frei</span>
<h2 class="display h2 stroke" id="visit-title" data-pop>Komm vorbei</h2>
<p class="lead" data-reveal>Bar &amp; Restaurant mitten in Kaiserslautern: Wings, Burger und kalte Drinks – drinnen oder draußen.</p>
<div class="rating" data-reveal>
<span class="rating__score">4,4</span>
<div>
<div class="rating__stars" aria-hidden="true">★★★★☆</div>
<div class="rating__meta">aus 1.620 Bewertungen auf <a href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener">Lieferando</a><br><small>Stand: 30.09.2026 · Bewertungen erhebt und prüft Lieferando.</small></div>
</div>
</div>
<div class="visit__deco" data-reveal>
<img src="assets/img/cut-cheese-burger.webp" width="900" height="656" loading="lazy" alt="Cheese Burger mit Cheddar und karamellisierten Zwiebeln">
<span class="sticker sticker--ink" data-sticker>Bar &amp;<br>Restaurant</span>
</div>
</div>
<div>
<div class="info-card" data-reveal>
<h3>Adresse</h3>
<address>Chickago Boys<br>Merkurstraße 13<br>67663 Kaiserslautern</address>
<div class="row">
<a class="btn" href="https://www.google.com/maps/dir/?api=1&amp;destination=Merkurstra%C3%9Fe+13%2C+67663+Kaiserslautern" target="_blank" rel="noopener"><svg aria-hidden="true"><use href="#i-pin"/></svg>Route</a>
<a class="btn btn--ghost" href="tel:+496313107985"><svg aria-hidden="true"><use href="#i-phone"/></svg>0631 3107985</a>
</div>
</div>
<div class="info-card" data-reveal>
<h3>Öffnungszeiten</h3>
<span class="open-badge" data-open-badge>täglich 12–22 Uhr</span>
<table class="hours" data-hours>
<caption class="sr-only">Öffnungszeiten</caption>
<tbody>
<tr data-day="1"><th scope="row">Montag</th><td>12:00 – 22:00</td></tr>
<tr data-day="2"><th scope="row">Dienstag</th><td>12:00 – 22:00</td></tr>
<tr data-day="3"><th scope="row">Mittwoch</th><td>12:00 – 22:00</td></tr>
<tr data-day="4"><th scope="row">Donnerstag</th><td>12:00 – 22:00</td></tr>
<tr data-day="5"><th scope="row">Freitag</th><td>12:00 – 22:00</td></tr>
<tr data-day="6"><th scope="row">Samstag</th><td>12:00 – 22:00</td></tr>
<tr data-day="0"><th scope="row">Sonntag</th><td>12:00 – 22:00</td></tr>
</tbody>
</table>
<p class="note">An Feiertagen können die Zeiten abweichen. Liefer- und Abholzeiten siehst du direkt bei Lieferando.</p>
</div>
</div>
</div>
</section>
<!-- ============ CTA ============ -->
<section class="section bg-red on-red cta" aria-labelledby="cta-title">
<div class="wave wave--top" aria-hidden="true"><svg viewBox="0 0 1440 120" preserveAspectRatio="none"><path fill="currentColor" d="M0 64c220-56 420-56 640-6s400 58 580 18 200-36 220-30v74H0Z"/></svg></div>
<div class="wrap">
<h2 class="display h2 stroke" id="cta-title" data-pop>Hunger?</h2>
<img class="cta__rooster die-cut" src="assets/img/rooster.svg" width="179" height="264" alt="" data-sticker>
<p class="lead" data-reveal>Dann ab in den Ring: jetzt online bestellen oder direkt bei uns anrufen.</p>
<div class="cta__buttons" data-reveal>
<a class="btn btn--yellow" href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener"><svg aria-hidden="true"><use href="#i-bag"/></svg>Jetzt bestellen</a>
<a class="btn btn--ghost" href="tel:+496313107985"><svg aria-hidden="true"><use href="#i-phone"/></svg>0631 3107985</a>
</div>
</div>
</section>
</main>
<footer class="footer on-dark" data-nav-dark>
<div class="wrap">
<div class="footer__grid">
<div class="footer__brand">
<img src="assets/img/rooster.svg" width="179" height="264" alt="">
<p>Fried Chicken, Wings &amp; Burger in Kaiserslautern. Bar &amp; Restaurant in der Merkurstraße 13.</p>
</div>
<div>
<h2>Seiten</h2>
<ul class="footer__links">
<li><a href="index.html">Start</a></li>
<li><a href="speisekarte.html">Speisekarte</a></li>
<li><a href="#wings">Wings</a></li>
<li><a href="#besuch">Besuch</a></li>
</ul>
</div>
<div>
<h2>Kontakt</h2>
<ul>
<li>Merkurstraße 13<br>67663 Kaiserslautern</li>
<li><a href="tel:+496313107985">0631 3107985</a></li>
<li>Täglich 12–22 Uhr</li>
</ul>
</div>
<div>
<h2>Bestellen &amp; folgen</h2>
<ul>
<li><a href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener">Lieferando</a></li>
<li><a href="https://www.ubereats.com/de/store/chickago-boys-kaiserslautern/5Yb4dNqDVJOuStkhhdC4qw" target="_blank" rel="noopener">Uber Eats</a></li>
<li><a href="https://www.instagram.com/chickago_boys/" target="_blank" rel="noopener">Instagram @chickago_boys</a></li>
<li><a href="https://www.facebook.com/p/Chickago-Boys-61554599980010/" target="_blank" rel="noopener">Facebook</a></li>
</ul>
</div>
</div>
<div class="footer__bottom">
<span>© <span data-year>2026</span> Chickago Boys · Alle Preise inkl. MwSt.</span>
<span><a href="impressum.html">Impressum</a> · <a href="datenschutz.html">Datenschutz</a> · Website von <a href="https://webklar.com" target="_blank" rel="noopener">WEBklar</a></span>
</div>
</div>
<div class="footer__giant" aria-hidden="true" data-juggle>
<div class="wm-giant"><span class="wm-mask wm-mask--block"></span></div>
<span class="juggle"><svg viewBox="0 0 120 120"><g transform="rotate(-40 60 60)" stroke="#150d0c" stroke-width="4" stroke-linejoin="round"><circle cx="52" cy="12" r="8" fill="#fff6e6"/><circle cx="68" cy="12" r="8" fill="#fff6e6"/><rect x="54" y="10" width="12" height="40" rx="5" fill="#fff6e6"/><path d="M60 40c28 0 38 30 32 50-6 20-58 20-64 0-6-20 4-50 32-50Z" fill="#d98a2b"/><path d="M42 64q6-6 12 0m8-6q6-6 12 0M50 82q6-6 12 0m8-4q6-6 12 0" fill="none" stroke="#f5b400" stroke-linecap="round"/></g></svg></span>
<span class="juggle"><svg viewBox="0 0 120 120"><g stroke="#150d0c" stroke-width="4" stroke-linejoin="round"><path d="M30 32c-10 30 10 70 65 74C70 90 55 70 52 40Z" fill="#e0140e"/><path d="M28 34c4-10 16-12 24 6" fill="#3f9b2a"/><path d="M38 22c-2-8 2-14 8-16" fill="none" stroke-linecap="round"/></g><path d="M44 54c2 16 12 30 26 38" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" opacity=".6"/></svg></span>
<span class="juggle"><svg viewBox="0 0 120 120"><g stroke="#150d0c" stroke-width="4" stroke-linejoin="round"><rect x="34" y="16" width="10" height="48" fill="#ffd21f" transform="rotate(-10 39 40)"/><rect x="48" y="8" width="10" height="56" fill="#ffd21f"/><rect x="62" y="12" width="10" height="52" fill="#ffd21f" transform="rotate(8 67 38)"/><rect x="74" y="18" width="10" height="46" fill="#ffd21f" transform="rotate(16 79 41)"/><path d="M24 48h72l-10 64H34Z" fill="#e0140e"/></g><path d="M44 72q16 12 32 0" fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"/></svg></span>
<span class="juggle"><svg viewBox="0 0 120 120"><g stroke="#150d0c" stroke-width="4" stroke-linejoin="round"><path d="M30 70C18 40 40 12 70 14s38 30 28 52c-6 14-18 18-28 16l-4 14H38l-2-16c-3-3-5-6-6-10Z" fill="#e0140e"/><path d="M36 96h32l2 16H34Z" fill="#fff6e6"/><path d="M44 44c8-8 22-8 28 2-12-2-20 2-24 10" fill="#e0140e"/></g><path d="M50 26c10-4 22-4 30 2" stroke="#fff" stroke-width="5" fill="none" stroke-linecap="round" opacity=".7"/></svg></span>
</div>
</footer>
<div class="orderbar" id="orderbar">
<a class="call" href="tel:+496313107985"><svg aria-hidden="true"><use href="#i-phone"/></svg>Anrufen</a>
<a class="order" href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener"><svg aria-hidden="true"><use href="#i-bag"/></svg>Jetzt bestellen</a>
</div>
</body>
</html>
+399
View File
@@ -0,0 +1,399 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Speisekarte – Chickago Boys Kaiserslautern</title>
<meta name="description" content="Die Speisekarte von Chickago Boys: Chicken Wings in vier Saucen, Crispy Tenders, Buckets, Beef & Chicken Burger, Wraps, Salate und Sides – mit Preisen.">
<meta name="theme-color" content="#e0140e">
<link rel="icon" href="assets/img/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
<meta property="og:type" content="website">
<meta property="og:locale" content="de_DE">
<meta property="og:site_name" content="Chickago Boys">
<meta property="og:title" content="Speisekarte – Chickago Boys Kaiserslautern">
<meta property="og:description" content="Die Speisekarte von Chickago Boys: Chicken Wings in vier Saucen, Crispy Tenders, Buckets, Beef & Chicken Burger, Wraps, Salate und Sides – mit Preisen.">
<meta property="og:image" content="assets/img/og-image.jpg">
<link rel="preload" href="assets/fonts/anton-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="assets/fonts/titan-one-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="assets/img/cut-steakhouse-burger.webp" as="image" type="image/webp">
<link rel="stylesheet" href="assets/css/style.css">
<script>
(function (d) {
var h = d.documentElement; h.classList.add('js');
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) h.classList.add('anim');
setTimeout(function () { if (!window.gsap) h.classList.remove('anim'); }, 2500);
})(document);
</script>
<script src="assets/js/gsap.min.js" defer></script>
<script src="assets/js/ScrollTrigger.min.js" defer></script>
<script src="assets/js/lenis.min.js" defer></script>
<script src="assets/js/main.js" defer></script>
</head>
<body>
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
<symbol id="i-bag" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M5 8h14l-1.2 12.2a1 1 0 0 1-1 .8H7.2a1 1 0 0 1-1-.8L5 8Zm3 0V6.5a4 4 0 0 1 8 0V8"/></symbol>
<symbol id="i-phone" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M6.6 3.5h2.8l1.4 4.2-2 1.5a12 12 0 0 0 6 6l1.5-2 4.2 1.4v2.8a2 2 0 0 1-2.2 2A17 17 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2Z"/></symbol>
<symbol id="i-pin" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21Zm0-9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"/></symbol>
<symbol id="i-arrow" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M5 12h14m-6-6 6 6-6 6"/></symbol>
<symbol id="i-insta" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2.2"><rect x="3.5" y="3.5" width="17" height="17" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r=".6" fill="currentColor"/></g></symbol>
<symbol id="i-fb" viewBox="0 0 24 24"><path fill="currentColor" d="M13.5 21v-7.5h2.6l.4-3h-3V8.6c0-.9.3-1.5 1.5-1.5h1.6V4.4a21 21 0 0 0-2.3-.1c-2.3 0-3.9 1.4-3.9 4v2.2H7.8v3h2.6V21h3.1Z"/></symbol>
</svg>
<a class="skip-link" href="#main">Zum Inhalt springen</a>
<header class="nav" id="nav">
<a class="nav__brand" href="index.html" aria-label="Chickago Boys – Startseite">
<img src="assets/img/rooster.svg" alt="" width="40" height="58">
<span class="wm wm-mask" aria-hidden="true"></span>
</a>
<div class="nav__actions">
<a class="pill pill--red" href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener">
<span class="roll"><span>Jetzt bestellen</span><span aria-hidden="true">Jetzt bestellen</span></span>
</a>
<button class="pill pill--outline" id="menu-btn" type="button" aria-expanded="false" aria-controls="menu-panel">
<span class="roll"><span class="menu-label">Menü</span><span aria-hidden="true" class="menu-label">Menü</span></span>
<span class="nav__burger" aria-hidden="true"><i></i><i></i><i></i></span>
</button>
</div>
</header>
<div class="menu-overlay" id="menu-overlay"></div>
<nav class="menu-panel" id="menu-panel" aria-label="Hauptmenü">
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="speisekarte.html">Speisekarte</a></li>
<li><a href="index.html#wings">Wings</a></li>
<li><a href="index.html#buckets">Buckets</a></li>
<li><a href="index.html#bestellen">Bestellen</a></li>
<li><a href="index.html#besuch">Besuch</a></li>
</ul>
<div class="menu-panel__meta">
Merkurstraße 13 · 67663 Kaiserslautern<br>
Täglich 12–22 Uhr · <a href="tel:+496313107985">0631 3107985</a>
</div>
</nav>
<main id="main">
<section class="page-hero bg-ink on-dark" data-nav-dark aria-labelledby="page-title">
<div class="wrap">
<span class="kicker kicker--yellow">Speisekarte</span>
<h1 class="display stroke" id="page-title" data-hero-big>Die Karte</h1>
<p class="lead">Wings, Tenders, Burger, Wraps und Sides – alles mild oder scharf, zum Mitnehmen, geliefert oder direkt bei uns.</p>
</div>
<div class="page-hero__img"><img src="assets/img/cut-steakhouse-burger.webp" width="900" height="669" alt="Steakhouse Burger mit Pepper-Jack-Käse und Bacon"></div>
<span class="sticker sticker--red page-hero__st" data-sticker>Mild oder<br>scharf?</span>
</section>
<nav class="cat-nav" aria-label="Kategorien der Speisekarte">
<ul>
<li><a href="#chicken">Chicken</a></li>
<li><a href="#chicken-burger">Chicken Burger</a></li>
<li><a href="#beef-burger">Beef Burger</a></li>
<li><a href="#menues">Menüs</a></li>
<li><a href="#wraps">Wraps</a></li>
<li><a href="#salate">Salate</a></li>
<li><a href="#beilagen">Beilagen</a></li>
<li><a href="#saucen">Saucen</a></li>
<li><a href="#getraenke">Getränke</a></li>
<li><a href="#dessert">Dessert</a></li>
</ul>
</nav>
<div class="wrap">
<!-- CHICKEN -->
<section class="menu-cat" id="chicken" aria-labelledby="h-chicken">
<div class="menu-cat__head">
<h2 class="display stroke" id="h-chicken" data-pop>Chicken</h2>
<p>Alle Chicken-Gerichte bekommst du im Schärfegrad deiner Wahl: <strong>mild oder scharf</strong> – ohne Aufpreis.</p>
</div>
<div class="dish-grid">
<article class="dish" data-reveal>
<div class="dish__media"><img src="assets/img/cut-chicken-wings.webp" width="1000" height="813" loading="lazy" alt="Knusprige Chicken Wings"></div>
<div class="dish__body">
<h3>Chicken Wings</h3>
<p>Knusprig, mit Sauce nach Wahl.</p>
<div class="variants"><span>6 Stück · 8,50 €</span><span>10 Stück · 11,00 €</span><span>20 Stück · 22,00 €</span></div>
</div>
</article>
<article class="dish" data-reveal>
<div class="dish__media"><img src="assets/img/cut-buffalo-wings.webp" width="800" height="784" loading="lazy" alt="Buffalo Red Hot Wings mit Dip"></div>
<div class="dish__body">
<div class="dish__row"><h3>Buffalo Red Hot Wings</h3><span class="price">14,00 €</span></div>
<p>10 Stück, in Buffalo-Red-Hot-Sauce.</p>
</div>
</article>
<article class="dish" data-reveal>
<div class="dish__media"><img src="assets/img/cut-bbq-wings.webp" width="800" height="830" loading="lazy" alt="Chipotle Honey BBQ Wings mit Dip"></div>
<div class="dish__body">
<div class="dish__row"><h3>Chipotle Honey BBQ Wings</h3><span class="price">14,00 €</span></div>
<p>10 Stück, in Chipotle-Honey-BBQ-Sauce.</p>
</div>
</article>
<article class="dish" data-reveal>
<div class="dish__media"><img src="assets/img/cut-teriyaki-wings.webp" width="800" height="789" loading="lazy" alt="Teriyaki Wings mit Dip"></div>
<div class="dish__body">
<div class="dish__row"><h3>Teriyaki Wings</h3><span class="price">14,00 €</span></div>
<p>10 Stück, in Teriyaki-Sauce.</p>
</div>
</article>
<article class="dish" data-reveal>
<div class="dish__media"><img src="assets/img/cut-sweet-chili-wings.webp" width="800" height="709" loading="lazy" alt="Sweet Chili Wings mit Dip"></div>
<div class="dish__body">
<div class="dish__row"><h3>Sweet Chili Wings</h3><span class="price">14,00 €</span></div>
<p>10 Stück, in Sweet-Chili-Sauce.</p>
</div>
</article>
<article class="dish dish--promo" data-reveal>
<span class="fight-card__class" style="color:var(--yellow)">Für die ganze Crew</span>
<h3>Buckets</h3>
<div class="promo-row"><div><strong>Bucket</strong><p>20 Wings, 5 Filets, 2× Pommes, 1× Coleslaw, Cola 1,0 l</p></div><span class="price">42,00 €</span></div>
<div class="promo-row"><div><strong>Party Bucket</strong><p>20 Wings, 20 Filets, 4× Pommes, Cola 1,0 l</p></div><span class="price">68,00 €</span></div>
</article>
</div>
<div class="dish-list">
<div class="item"><div class="item__row"><h3>Crispy-Chicken Tenders · 5 Stück</h3><span class="item__dots"></span><span class="item__price">9,50 €</span></div><p>Knusprig panierte Hähnchenfilets.</p></div>
<div class="item"><div class="item__row"><h3>Crispy-Chicken Tenders · 10 Stück</h3><span class="item__dots"></span><span class="item__price">17,00 €</span></div><p>Knusprig panierte Hähnchenfilets.</p></div>
<div class="item"><div class="item__row"><h3>Buffalo Red Hot Tenders · 5 Stück</h3><span class="item__dots"></span><span class="item__price">11,50 €</span></div><p>In Buffalo-Red-Hot-Sauce.</p></div>
<div class="item"><div class="item__row"><h3>Chipotle Honey BBQ Tenders · 5 Stück</h3><span class="item__dots"></span><span class="item__price">11,50 €</span></div><p>In Chipotle-Honey-BBQ-Sauce.</p></div>
<div class="item"><div class="item__row"><h3>Teriyaki Tenders · 5 Stück</h3><span class="item__dots"></span><span class="item__price">11,50 €</span></div><p>In Teriyaki-Sauce.</p></div>
</div>
</section>
<!-- CHICKEN BURGER -->
<section class="menu-cat" id="chicken-burger" aria-labelledby="h-cburger">
<div class="menu-cat__head">
<h2 class="display stroke" id="h-cburger" data-pop>Chicken Burger</h2>
<p>Alle Chicken Burger mit Hähnchen-Patty, Cheddar, Tomaten und Salat – im Schärfegrad deiner Wahl.</p>
</div>
<div class="cat-split">
<article class="dish" data-reveal>
<div class="dish__media"><span class="sticker dish__badge">Beliebt</span><img src="assets/img/cut-chicken-honey-mustard.webp" width="900" height="734" loading="lazy" alt="Chicken Burger Home Style mit Honey Mustard und Bacon"></div>
<div class="dish__body">
<div class="dish__row"><h3>Chicken Home Style Honey Mustard Bacon</h3><span class="price">12,50 €</span></div>
<p>Cheddar, Bacon, Tomaten, Zwiebeln, Salat, Honey-Mustard-Soße.</p>
</div>
</article>
<div>
<div class="dish-list">
<div class="item"><div class="item__row"><h3>Teriyaki Chicken Burger</h3><span class="item__dots"></span><span class="item__price">12,50 €</span></div><p>Cheddar, Tomaten, Salat, Teriyaki-Soße.</p></div>
<div class="item"><div class="item__row"><h3>Chicken Burger BBQ</h3><span class="item__dots"></span><span class="item__price">12,50 €</span></div><p>Mit Barbecuesauce.</p></div>
<div class="item"><div class="item__row"><h3>Chicken Burger</h3><span class="item__dots"></span><span class="item__price">12,50 €</span></div><p>Mit hausgemachter Sauce.</p></div>
</div>
<div class="menu-extra"><span>Extra Hähnchen-Patty +3,00 €</span></div>
</div>
</div>
</section>
<!-- BEEF BURGER -->
<section class="menu-cat" id="beef-burger" aria-labelledby="h-bburger">
<div class="menu-cat__head">
<h2 class="display stroke" id="h-bburger" data-pop>Beef Burger</h2>
<p>Alle Burger mit Rindfleisch-Patty, Cheddar, Tomaten, Salat, sauren Gurken und Zwiebeln.</p>
</div>
<div class="dish-grid dish-grid--4">
<article class="dish" data-reveal>
<div class="dish__media"><span class="sticker dish__badge">Beliebt</span><img src="assets/img/cut-us-burger.webp" width="774" height="760" loading="lazy" alt="US Burger mit Ei und Bacon"></div>
<div class="dish__body"><div class="dish__row"><h3>US Burger</h3><span class="price">13,50 €</span></div><p>Cheddar, Ei, Bacon, karamellisierte Zwiebeln, BBQ-Soße.</p></div>
</article>
<article class="dish" data-reveal>
<div class="dish__media"><img src="assets/img/cut-steakhouse-burger.webp" width="900" height="669" loading="lazy" alt="Steakhouse Burger"></div>
<div class="dish__body"><div class="dish__row"><h3>Steakhouse Burger</h3><span class="price">13,50 €</span></div><p>Pepper-Jack-Käse, Bacon, karamellisierte Zwiebeln, Steakhouse-Soße.</p></div>
</article>
<article class="dish" data-reveal>
<div class="dish__media"><span class="sticker dish__badge">Beliebt</span><img src="assets/img/cut-cheese-burger.webp" width="900" height="656" loading="lazy" alt="Cheese Burger"></div>
<div class="dish__body"><div class="dish__row"><h3>Cheese Burger</h3><span class="price">12,50 €</span></div><p>Cheddar, karamellisierte Zwiebeln, Ketchup, Mayonnaise.</p></div>
</article>
<article class="dish" data-reveal>
<div class="dish__media"><img src="assets/img/cut-hamburger.webp" width="900" height="648" loading="lazy" alt="Hamburger"></div>
<div class="dish__body"><div class="dish__row"><h3>Hamburger</h3><span class="price">11,50 €</span></div><p>Karamellisierte Zwiebeln, Ketchup, Mayonnaise.</p></div>
</article>
</div>
<div class="dish-list">
<div class="item"><div class="item__row"><h3>Teriyaki Burger</h3><span class="item__dots"></span><span class="item__price">12,50 €</span></div><p>Pepper-Jack-Käse, Bacon, karamellisierte Zwiebeln, Teriyaki-Soße.</p></div>
<div class="item"><div class="item__row"><h3>Mexico Burger</h3><span class="item__dots"></span><span class="item__price">12,50 €</span></div><p>Pepper-Jack-Käse, Jalapeños, hausgemachte Avocado-Soße.</p></div>
<div class="item"><div class="item__row"><h3>Mushroom Burger</h3><span class="item__dots"></span><span class="item__price">12,50 €</span></div><p>Champignons, hausgemachte Sauce, Cheddar, karamellisierte Zwiebeln.</p></div>
<div class="item"><div class="item__row"><h3>Chili Cheese Burger</h3><span class="item__dots"></span><span class="item__price">12,50 €</span></div><p>Cheddar, Jalapeños, Chili-Cheese-Soße.</p></div>
<div class="item"><div class="item__row"><h3>Veggie Burger</h3><span class="item__dots"></span><span class="item__price">10,50 €</span></div><p>Vegetarisches Patty statt Rindfleisch, hausgemachte Sauce.</p></div>
</div>
<div class="menu-extra"><span>Extra-Patty +3,00 €</span><span>Vegetarisches Extra-Patty +3,00 €</span></div>
</section>
<!-- MENÜS -->
<section class="menu-cat" id="menues" aria-labelledby="h-menues">
<div class="menu-cat__head">
<h2 class="display stroke" id="h-menues" data-pop>Menüs</h2>
<p>Mit Pommes und Coleslaw – mild oder scharf.</p>
</div>
<div class="dish-list">
<div class="item"><div class="item__row"><h3>Menü Crispy-Chicken Tenders · 5 Stück</h3><span class="item__dots"></span><span class="item__price">14,45 €</span></div><p>Crispy-Chicken-Filets, Pommes, Coleslaw.</p></div>
<div class="item"><div class="item__row"><h3>Menü Crispy-Chicken Tenders · 10 Stück</h3><span class="item__dots"></span><span class="item__price">21,95 €</span></div><p>Crispy-Chicken-Filets, Pommes, Coleslaw.</p></div>
<div class="item"><div class="item__row"><h3>Menü Chicken Wings · 6 Stück</h3><span class="item__dots"></span><span class="item__price">13,45 €</span></div><p>Chicken Wings, Pommes, Coleslaw.</p></div>
<div class="item"><div class="item__row"><h3>Menü Chicken Wings · 10 Stück</h3><span class="item__dots"></span><span class="item__price">15,95 €</span></div><p>Chicken Wings, Pommes, Coleslaw.</p></div>
</div>
</section>
<!-- WRAPS -->
<section class="menu-cat" id="wraps" aria-labelledby="h-wraps">
<div class="menu-cat__head">
<h2 class="display stroke" id="h-wraps" data-pop>Wraps</h2>
<p>In der Weizen-Tortilla, mit knusprigem Crispy-Filet.</p>
</div>
<div class="cat-split">
<article class="dish" data-reveal>
<div class="dish__media"><span class="sticker dish__badge">Beliebt</span><img src="assets/img/cut-chicken-wrap.webp" width="800" height="800" loading="lazy" alt="Chicken Wrap Chickago-Boys, aufgeschnitten"></div>
<div class="dish__body"><div class="dish__row"><h3>Chicken Wrap Chickago-Boys</h3><span class="price">9,50 €</span></div><p>2 knusprige Crispy-Filets, Cheddar, Tomaten, Salat, hausgemachte Sauce.</p></div>
</article>
<div class="dish-list">
<div class="item"><div class="item__row"><h3>Caesar Wrap</h3><span class="item__dots"></span><span class="item__price">9,50 €</span></div><p>Knuspriges Crispy-Filet, würziger Hartkäse, Croutons, Tomaten, Salat, Caesar-Soße.</p></div>
</div>
</div>
</section>
<!-- SALATE -->
<section class="menu-cat" id="salate" aria-labelledby="h-salate">
<div class="menu-cat__head">
<h2 class="display stroke" id="h-salate" data-pop>Salate</h2>
<p>Alle Salate mit Tomaten, Gurken und Croutons. Dressing: Caesar, Balsamico oder ohne.</p>
</div>
<div class="dish-list">
<div class="item"><div class="item__row"><h3>Caesar Chicken Salat</h3><span class="item__dots"></span><span class="item__price">10,50 €</span></div><p>Käse, Croutons, Hähnchenbrustfilet.</p></div>
<div class="item"><div class="item__row"><h3>Fitness Salat</h3><span class="item__dots"></span><span class="item__price">11,50 €</span></div><p>Hähnchenbrustfilet, Oliven, Mais, Gurken, Tomaten, Blattsalat.</p></div>
<div class="item"><div class="item__row"><h3>Gemischter Salat</h3><span class="item__dots"></span><span class="item__price">7,50 €</span></div><p>Blattsalat, Tomaten, Gurken, Mais.</p></div>
</div>
</section>
<!-- BEILAGEN -->
<section class="menu-cat" id="beilagen" aria-labelledby="h-beilagen">
<div class="menu-cat__head">
<h2 class="display stroke" id="h-beilagen" data-pop>Beilagen</h2>
<p>Der perfekte Sidekick für Wings und Burger.</p>
</div>
<div class="dish-grid dish-grid--2">
<article class="dish" data-reveal>
<div class="dish__media"><img src="assets/img/cut-chili-cheese-fries.webp" width="700" height="700" loading="lazy" alt="Jalapeños Chili Cheese Fries"></div>
<div class="dish__body"><div class="dish__row"><h3>Jalapeños Chili Cheese Fries</h3><span class="price">7,00 €</span></div><p>Pommes mit Chili-Käse-Sauce und Jalapeños.</p></div>
</article>
<article class="dish" data-reveal>
<div class="dish__media"><img src="assets/img/cut-cheesy-bacon-fries.webp" width="700" height="700" loading="lazy" alt="Cheesy Bacon Fries"></div>
<div class="dish__body"><div class="dish__row"><h3>Cheesy Bacon Fries</h3><span class="price">7,00 €</span></div><p>Pommes mit Käse und Bacon.</p></div>
</article>
</div>
<div class="dish-list">
<div class="item"><div class="item__row"><h3>Pommes frites</h3><span class="item__dots"></span><span class="item__price">4,00 €</span></div></div>
<div class="item"><div class="item__row"><h3>Süßkartoffel-Pommes <span class="tag">Beliebt</span></h3><span class="item__dots"></span><span class="item__price">5,00 €</span></div></div>
<div class="item"><div class="item__row"><h3>Onion Rings</h3><span class="item__dots"></span><span class="item__price">6,00 €</span></div></div>
<div class="item"><div class="item__row"><h3>Mozzarella Sticks</h3><span class="item__dots"></span><span class="item__price">7,00 €</span></div></div>
<div class="item"><div class="item__row"><h3>Krautsalat</h3><span class="item__dots"></span><span class="item__price">4,00 €</span></div><p>Weißkohl, Rotkohl.</p></div>
</div>
</section>
<!-- SAUCEN -->
<section class="menu-cat" id="saucen" aria-labelledby="h-saucen">
<div class="menu-cat__head">
<h2 class="display stroke" id="h-saucen" data-pop>Saucen &amp; Dips</h2>
<p>Zum Dippen, Tunken und Nachlegen.</p>
</div>
<div class="sauce-chips" data-reveal>
<span>Ranch <b>1,50 €</b></span><span>Curry Mango <b>1,50 €</b></span><span>Barbecuesauce <b>1,50 €</b></span><span>Sweet-Chilisauce <b>1,50 €</b></span><span>Cheddarsauce <b>1,50 €</b></span><span>Chili-Cheesesauce <b>1,50 €</b></span><span>Süß-Sauer-Sauce <b>1,50 €</b></span><span>Caesar Dressing <b>1,50 €</b></span><span>Balsamico Dressing <b>1,50 €</b></span><span>Ketchup <b>1,00 €</b></span><span>Mayonnaise <b>1,00 €</b></span>
</div>
</section>
<!-- GETRÄNKE -->
<section class="menu-cat" id="getraenke" aria-labelledby="h-getraenke">
<div class="menu-cat__head">
<h2 class="display stroke" id="h-getraenke" data-pop>Getränke</h2>
<p>Kalt, groß und zum Teilen. Bier, Wein und Cocktails gibt’s bei uns an der Bar.</p>
</div>
<div class="dish-list">
<div class="item"><div class="item__row"><h3>Home Made Peach Iced Tea · 1,0 l</h3><span class="item__dots"></span><span class="item__price">9,50 €</span></div></div>
<div class="item"><div class="item__row"><h3>Home Made Lemon Iced Tea · 1,0 l</h3><span class="item__dots"></span><span class="item__price">9,50 €</span></div></div>
<div class="item"><div class="item__row"><h3>Coca-Cola · 1,0 l</h3><span class="item__dots"></span><span class="item__price">4,70 €</span></div></div>
<div class="item"><div class="item__row"><h3>Coca-Cola Zero · 1,0 l</h3><span class="item__dots"></span><span class="item__price">4,70 €</span></div></div>
<div class="item"><div class="item__row"><h3>Fanta Orange · 1,0 l</h3><span class="item__dots"></span><span class="item__price">4,70 €</span></div></div>
<div class="item"><div class="item__row"><h3>Mezzo Mix · 1,0 l</h3><span class="item__dots"></span><span class="item__price">4,70 €</span></div></div>
<div class="item"><div class="item__row"><h3>Sprite · 1,0 l</h3><span class="item__dots"></span><span class="item__price">4,70 €</span></div></div>
<div class="item"><div class="item__row"><h3>Red Bull · 0,25 l</h3><span class="item__dots"></span><span class="item__price">3,50 €</span></div></div>
</div>
</section>
<!-- DESSERT -->
<section class="menu-cat" id="dessert" aria-labelledby="h-dessert">
<div class="menu-cat__head">
<h2 class="display stroke" id="h-dessert" data-pop>Dessert</h2>
<p>Für den süßen Knockout zum Schluss.</p>
</div>
<div class="dish-list">
<div class="item"><div class="item__row"><h3>New York Cheesecake</h3><span class="item__dots"></span><span class="item__price">5,00 €</span></div><p>Cremiger Käsekuchen.</p></div>
</div>
</section>
<aside class="only-here" data-reveal>
<img class="die-cut" src="assets/img/rooster.svg" width="179" height="264" alt="">
<div>
<h2>Mehr im Restaurant</h2>
<p>Vor Ort gibt’s noch mehr als online: Ribs, Steaks und Drinks von der Bar. Komm vorbei in die Merkurstraße 13.</p>
<p><a class="btn btn--yellow" href="index.html#besuch">Anfahrt &amp; Zeiten</a></p>
</div>
</aside>
<div class="legal-note" data-reveal>
<h2>Allergene &amp; Zusatzstoffe</h2>
<p>Informationen zu Allergenen und kennzeichnungspflichtigen Zusatzstoffen bekommst du jederzeit bei uns im Restaurant oder telefonisch unter <a href="tel:+496313107985">0631 3107985</a>. Alle Preise in Euro inklusive gesetzlicher Mehrwertsteuer. Stand: 09/2026.</p>
</div>
</div>
</main>
<footer class="footer on-dark" data-nav-dark>
<div class="wrap">
<div class="footer__grid">
<div class="footer__brand">
<img src="assets/img/rooster.svg" width="179" height="264" alt="">
<p>Fried Chicken, Wings &amp; Burger in Kaiserslautern. Bar &amp; Restaurant in der Merkurstraße 13.</p>
</div>
<div>
<h2>Seiten</h2>
<ul class="footer__links">
<li><a href="index.html">Start</a></li>
<li><a href="speisekarte.html">Speisekarte</a></li>
<li><a href="index.html#wings">Wings</a></li>
<li><a href="index.html#besuch">Besuch</a></li>
</ul>
</div>
<div>
<h2>Kontakt</h2>
<ul>
<li>Merkurstraße 13<br>67663 Kaiserslautern</li>
<li><a href="tel:+496313107985">0631 3107985</a></li>
<li>Täglich 12–22 Uhr</li>
</ul>
</div>
<div>
<h2>Bestellen &amp; folgen</h2>
<ul>
<li><a href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener">Lieferando</a></li>
<li><a href="https://www.ubereats.com/de/store/chickago-boys-kaiserslautern/5Yb4dNqDVJOuStkhhdC4qw" target="_blank" rel="noopener">Uber Eats</a></li>
<li><a href="https://www.instagram.com/chickago_boys/" target="_blank" rel="noopener">Instagram @chickago_boys</a></li>
<li><a href="https://www.facebook.com/p/Chickago-Boys-61554599980010/" target="_blank" rel="noopener">Facebook</a></li>
</ul>
</div>
</div>
<div class="footer__bottom">
<span>© <span data-year>2026</span> Chickago Boys · Alle Preise inkl. MwSt.</span>
<span><a href="impressum.html">Impressum</a> · <a href="datenschutz.html">Datenschutz</a> · Website von <a href="https://webklar.com" target="_blank" rel="noopener">WEBklar</a></span>
</div>
</div>
<div class="footer__giant" aria-hidden="true" data-juggle>
<div class="wm-giant"><span class="wm-mask wm-mask--block"></span></div>
<span class="juggle"><svg viewBox="0 0 120 120"><g transform="rotate(-40 60 60)" stroke="#150d0c" stroke-width="4" stroke-linejoin="round"><circle cx="52" cy="12" r="8" fill="#fff6e6"/><circle cx="68" cy="12" r="8" fill="#fff6e6"/><rect x="54" y="10" width="12" height="40" rx="5" fill="#fff6e6"/><path d="M60 40c28 0 38 30 32 50-6 20-58 20-64 0-6-20 4-50 32-50Z" fill="#d98a2b"/><path d="M42 64q6-6 12 0m8-6q6-6 12 0M50 82q6-6 12 0m8-4q6-6 12 0" fill="none" stroke="#f5b400" stroke-linecap="round"/></g></svg></span>
<span class="juggle"><svg viewBox="0 0 120 120"><g stroke="#150d0c" stroke-width="4" stroke-linejoin="round"><path d="M30 32c-10 30 10 70 65 74C70 90 55 70 52 40Z" fill="#e0140e"/><path d="M28 34c4-10 16-12 24 6" fill="#3f9b2a"/><path d="M38 22c-2-8 2-14 8-16" fill="none" stroke-linecap="round"/></g><path d="M44 54c2 16 12 30 26 38" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" opacity=".6"/></svg></span>
<span class="juggle"><svg viewBox="0 0 120 120"><g stroke="#150d0c" stroke-width="4" stroke-linejoin="round"><rect x="34" y="16" width="10" height="48" fill="#ffd21f" transform="rotate(-10 39 40)"/><rect x="48" y="8" width="10" height="56" fill="#ffd21f"/><rect x="62" y="12" width="10" height="52" fill="#ffd21f" transform="rotate(8 67 38)"/><rect x="74" y="18" width="10" height="46" fill="#ffd21f" transform="rotate(16 79 41)"/><path d="M24 48h72l-10 64H34Z" fill="#e0140e"/></g><path d="M44 72q16 12 32 0" fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"/></svg></span>
<span class="juggle"><svg viewBox="0 0 120 120"><g stroke="#150d0c" stroke-width="4" stroke-linejoin="round"><path d="M30 70C18 40 40 12 70 14s38 30 28 52c-6 14-18 18-28 16l-4 14H38l-2-16c-3-3-5-6-6-10Z" fill="#e0140e"/><path d="M36 96h32l2 16H34Z" fill="#fff6e6"/><path d="M44 44c8-8 22-8 28 2-12-2-20 2-24 10" fill="#e0140e"/></g><path d="M50 26c10-4 22-4 30 2" stroke="#fff" stroke-width="5" fill="none" stroke-linecap="round" opacity=".7"/></svg></span>
</div>
</footer>
<div class="orderbar" id="orderbar">
<a class="call" href="tel:+496313107985"><svg aria-hidden="true"><use href="#i-phone"/></svg>Anrufen</a>
<a class="order" href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener"><svg aria-hidden="true"><use href="#i-bag"/></svg>Jetzt bestellen</a>
</div>
</body>
</html>