Compare commits
13
Commits
08f687822f
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
 rootandClaude Opus 5.5
|
b7b52958c3 | ||
|
rootandClaude Opus 5.5
|
e791d0312d | ||
|
rootandClaude Opus 5.5
|
0364ddc793 | ||
|
rootandClaude Opus 5.5
|
0805824e8b | ||
|
rootandClaude Opus 5.5
|
706854a9a7 | ||
|
rootandClaude Opus 5.5
|
002dfa21f1 | ||
|
rootandClaude Opus 5.5
|
e77f081b44 | ||
|
rootandClaude Opus 5.5
|
2d10461da9 | ||
|
rootandClaude Opus 5.5
|
d532a3fd1f | ||
|
rootandClaude Opus 5.5
|
98de44410e | ||
|
rootandClaude Opus 5.5
|
2acd62009b | ||
|
KNSO
|
8d4512d9b4 | ||
|
rootandClaude Opus 5.5
|
455d60a846 |
No files matched your search
+202
-67
@@ -278,9 +278,12 @@ p:last-child { margin-bottom: 0; }
|
||||
left: 50%; top: var(--swirl-y, 50%); width: var(--swirl-size, min(1500px, 115vw)); aspect-ratio: 1;
|
||||
translate: -50% -50%;
|
||||
background: var(--swirl, rgba(90, 0, 0, .42));
|
||||
-webkit-mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat;
|
||||
mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat;
|
||||
-webkit-mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat, radial-gradient(closest-side, #000 62%, transparent 98%);
|
||||
-webkit-mask-composite: source-in;
|
||||
mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat, radial-gradient(closest-side, #000 62%, transparent 98%);
|
||||
mask-composite: intersect;
|
||||
}
|
||||
@media (max-width: 820px) { .fx > .fx__swirl, .cat-bg .fx__swirl { --swirl-size: 175vw; } }
|
||||
.fx__spot { inset: 0; background: radial-gradient(var(--spot-size, 60% 55%) at var(--spot-x, 50%) var(--spot-y, 45%), var(--spot, rgba(255, 90, 40, .55)), transparent 70%); }
|
||||
.fx__vignette { inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, var(--vignette, rgba(40, 0, 0, .45))); }
|
||||
.fx__grain { inset: 0; background: var(--grain) 0 0 / 240px; opacity: var(--grain-o, .22); mix-blend-mode: var(--grain-mode, overlay); }
|
||||
@@ -297,10 +300,9 @@ p:last-child { margin-bottom: 0; }
|
||||
.paper {
|
||||
background-color: #fdf4e3;
|
||||
background-image:
|
||||
linear-gradient(90deg, transparent calc(50% - 1px), rgba(120, 70, 20, .05) calc(50% - 1px), rgba(255, 255, 255, .5) calc(50% + 1px), transparent calc(50% + 2px)),
|
||||
radial-gradient(130% 100% at 50% 35%, transparent 45%, rgba(170, 100, 30, .16)),
|
||||
var(--grain-soft);
|
||||
background-size: 100% 100%, 100% 100%, 240px;
|
||||
background-size: 100% 100%, 240px;
|
||||
}
|
||||
|
||||
/* ============ Flammen-Übergänge ============
|
||||
@@ -588,7 +590,9 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl
|
||||
}
|
||||
.wings__stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "kick kick" "big big" "info hero"; align-items: start; }
|
||||
.wings__stage .kicker { grid-area: kick; justify-self: start; }
|
||||
.wings .classic-wings, .wings .sauce { color: var(--ink); }
|
||||
.wings .sauce { color: var(--ink); }
|
||||
.wings .classic-wings { color: var(--cream); }
|
||||
.classic-wings::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain) 0 0 / 240px; opacity: .3; mix-blend-mode: overlay; pointer-events: none; }
|
||||
.wings__big {
|
||||
grid-area: big; position: relative; z-index: 1;
|
||||
font-size: clamp(4.6rem, 15vw, 15.5rem); color: var(--cream); margin: 0;
|
||||
@@ -639,7 +643,8 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl
|
||||
.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: radial-gradient(70% 140% at 0% 50%, #4a1106, transparent 60%), var(--grain) 0 0 / 240px, var(--ink); background-blend-mode: normal, soft-light, normal; color: var(--cream);
|
||||
position: relative; isolation: isolate; overflow: hidden;
|
||||
background: radial-gradient(70% 140% at 0% 50%, #4a1106, transparent 60%), var(--ink); color: var(--cream);
|
||||
border: 3px solid var(--yellow); border-radius: calc(var(--radius) + 6px);
|
||||
box-shadow: 0 8px 0 #000, 0 30px 50px -10px rgba(60, 10, 0, .6);
|
||||
padding: clamp(1.2rem, 2.5vw, 2rem) clamp(1.2rem, 3vw, 2.6rem);
|
||||
@@ -687,59 +692,129 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl
|
||||
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 14px 0 9px #5a0604, 0 40px 70px rgba(0, 0, 0, .6), 0 0 80px rgba(255, 80, 20, .25);
|
||||
box-shadow: 0 0 0 5px var(--ink), 0 0 0 9px var(--red), 0 40px 70px rgba(0, 0, 0, .6), 0 0 80px rgba(255, 80, 20, .25);
|
||||
}
|
||||
.fight-card::before {
|
||||
content: ""; position: absolute; inset: auto 0 0 0; height: 64px;
|
||||
background-color: #fff;
|
||||
background-image: linear-gradient(90deg, rgba(229, 19, 11, .8) 50%, transparent 50%), linear-gradient(rgba(229, 19, 11, .8) 50%, transparent 50%);
|
||||
background-size: 32px 32px;
|
||||
opacity: .9;
|
||||
.fight-card > :not(.fight-card__rays) { position: relative; z-index: 2; }
|
||||
/* Gewichtsklasse als Banderole */
|
||||
.fight-card__class {
|
||||
display: inline-block; font-family: var(--f-sticker); text-transform: uppercase; font-size: .9rem; letter-spacing: .1em; line-height: 1;
|
||||
color: var(--yellow); background: linear-gradient(var(--red), var(--red-deep));
|
||||
padding: .5em 1.6em .5em .9em; margin-left: calc(-1 * clamp(1.4rem, 3vw, 2.4rem));
|
||||
clip-path: polygon(0 0, 100% 0, calc(100% - .8em) 50%, 100% 100%, 0 100%);
|
||||
box-shadow: 0 4px 0 var(--oxblood);
|
||||
}
|
||||
.fight-card__class { font-family: var(--f-sticker); text-transform: uppercase; color: var(--red-deep); font-size: 1rem; letter-spacing: .08em; }
|
||||
/* Strahlenkranz: füllt die ganze Karte, Zentrum hinter dem Essen */
|
||||
.fight-card__rays {
|
||||
position: absolute; z-index: 0; left: 72%; top: 70%; width: 260%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
|
||||
background:
|
||||
radial-gradient(closest-side, rgba(255, 196, 60, .75), rgba(255, 140, 40, .35) 22%, transparent 42%),
|
||||
repeating-conic-gradient(from 3deg, rgba(229, 19, 11, .26) 0 6deg, rgba(255, 200, 28, .14) 6deg 8deg, transparent 8deg 15deg);
|
||||
-webkit-mask: radial-gradient(closest-side, #000 25%, rgba(0, 0, 0, .35) 60%, transparent 85%);
|
||||
mask: radial-gradient(closest-side, #000 25%, rgba(0, 0, 0, .35) 60%, transparent 85%);
|
||||
animation: rays-spin 60s linear infinite;
|
||||
}
|
||||
@keyframes rays-spin { to { rotate: 360deg; } }
|
||||
.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); --ext: var(--oxblood); text-shadow: 1px 1px 0 var(--ext), 2px 2px 0 var(--ext), 3px 3px 0 var(--ext), 4px 4px 0 var(--ext), 5px 5px 0 var(--ext), 8px 10px 14px rgba(0, 0, 0, .2); }
|
||||
.fight-card ul { list-style: none; margin: 0 0 1.2rem; padding: 0 clamp(0px, 9vw, 150px) 0 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 { position: relative; z-index: 2; width: clamp(150px, 18vw, 280px); margin: -7rem -1.5rem -2.6rem 0; filter: drop-shadow(0 14px 12px rgba(0, 0, 0, .35)); transition: transform .6s var(--ease-pop); }
|
||||
.fight-card__foot { display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
|
||||
.fight-card__foot .price { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); background: linear-gradient(var(--yellow-hot), var(--yellow)); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink), 0 14px 22px rgba(0, 0, 0, .35); }
|
||||
.fight-card__foot img { position: relative; z-index: 2; width: clamp(170px, 21vw, 320px); margin: -8rem -1rem -1rem 0; filter: drop-shadow(0 16px 14px rgba(60, 0, 0, .45)); transition: transform .6s var(--ease-pop); }
|
||||
.fight-card:hover .fight-card__foot img { transform: scale(1.08) rotate(-5deg); }
|
||||
.buckets__note { margin-top: 2.5rem; text-align: center; opacity: .8; font-size: .95rem; }
|
||||
|
||||
/* ============ Take away (route) ============ */
|
||||
.takeaway { overflow-x: clip; background: var(--yellow); color: var(--ink); --spot: rgba(255, 255, 220, .5); --spot-x: 25%; --spot-y: 25%; --dot: rgba(229, 19, 11, .85); --dots-o: .16; --dots-mask: linear-gradient(200deg, #000, transparent 50%); --mottle-o: .06; --grain-o: .1; }
|
||||
.takeaway .torn { color: var(--yellow); }
|
||||
.takeaway__burst { right: -12%; top: -8%; width: min(900px, 70vw); aspect-ratio: 1; background: repeating-conic-gradient(rgba(229, 19, 11, .14) 0 6deg, transparent 6deg 15deg); -webkit-mask: radial-gradient(closest-side, #000 25%, transparent); mask: radial-gradient(closest-side, #000 25%, transparent); }
|
||||
.takeaway .h2 { color: var(--white); --stroke-c: var(--ink); --sw: .04em; --ext: var(--ink); max-width: 13ch; }
|
||||
.takeaway { overflow: clip; background: var(--yellow); color: var(--ink); --spot: rgba(255, 255, 220, .5); --spot-x: 25%; --spot-y: 25%; --dot: rgba(229, 19, 11, .85); --dots-o: .16; --dots-mask: linear-gradient(200deg, #000, transparent 50%); --mottle-o: .06; --grain-o: .1; }
|
||||
.takeaway .h2 { color: var(--white); --stroke-c: var(--ink); --sw: .04em; --ext: var(--ink); max-width: 13ch; position: relative; z-index: 3; }
|
||||
.takeaway .kicker, .takeaway__lead { position: relative; z-index: 3; }
|
||||
.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); align-items: start; }
|
||||
.stop {
|
||||
border: 3px solid var(--ink); border-radius: var(--radius);
|
||||
padding: clamp(1.3rem, 2.4vw, 2rem);
|
||||
box-shadow: 8px 8px 0 var(--ink), 14px 24px 34px rgba(90, 50, 0, .3);
|
||||
transition: transform .45s var(--ease-pop), box-shadow .3s;
|
||||
|
||||
/* Bühne: Karte rechts (läuft aus dem Bild), roter Pin am Restaurant, Weg nach links zum Zuhause */
|
||||
.tstage {
|
||||
--mw: clamp(1050px, 88vw, 1500px); /* Breite der Karte; Restaurant liegt bei 40 % / 62 % */
|
||||
--pin-x: 70%; --pin-y: 50%; /* Restaurant auf der Bühne */
|
||||
--home-x: 6%; --home-y: 84%;
|
||||
/* Bühne zieht sich rechts neben die Überschrift hoch, links bleibt der Text frei */
|
||||
position: relative; height: clamp(600px, 50vw, 760px); margin-top: clamp(-320px, calc(-40vw + 260px), -120px);
|
||||
}
|
||||
.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), 20px 30px 40px rgba(90, 50, 0, .3); }
|
||||
.stop__num { font-family: var(--f-display); font-size: 3.6rem; line-height: .8; color: var(--red); --ext: var(--oxblood); text-shadow: 1px 1px 0 var(--ext), 2px 2px 0 var(--ext), 3px 3px 0 var(--ext), 4px 4px 0 var(--ext); }
|
||||
.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 {
|
||||
.tmap {
|
||||
position: absolute; z-index: 0; pointer-events: none;
|
||||
width: var(--mw); aspect-ratio: 1400 / 1080;
|
||||
left: calc(var(--pin-x) - .4 * var(--mw)); top: calc(var(--pin-y) - .4783 * var(--mw));
|
||||
}
|
||||
.tmap__img {
|
||||
width: 100%; height: 100%;
|
||||
/* weich ausblenden: an allen vier Kanten auf 0, dazu ein runder Verlauf, damit es nicht nach Rechteck aussieht */
|
||||
-webkit-mask: radial-gradient(ellipse 62% 70% at 50% 58%, #000 40%, transparent 100%), linear-gradient(90deg, transparent, #000 24%, #000 88%, transparent), linear-gradient(transparent, #000 30%, #000 76%, transparent);
|
||||
-webkit-mask-composite: source-in, source-in;
|
||||
mask: radial-gradient(ellipse 62% 70% at 50% 58%, #000 40%, transparent 100%), linear-gradient(90deg, transparent, #000 24%, #000 88%, transparent), linear-gradient(transparent, #000 30%, #000 76%, transparent);
|
||||
mask-composite: intersect;
|
||||
}
|
||||
.tmap__credit { position: absolute; z-index: 2; right: 0; bottom: 0; padding: .4rem .2rem; font-size: .72rem; color: rgba(23, 11, 9, .85); text-decoration: none; }
|
||||
.tmap__credit:hover { text-decoration: underline; }
|
||||
.troute { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
|
||||
.troute path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.troute__glow { stroke: rgba(255, 255, 255, .55); stroke-width: 14; }
|
||||
.troute__line { stroke: var(--red); stroke-width: 6; stroke-dasharray: .1 14; }
|
||||
.troute__reveal { stroke: #fff; stroke-width: 30; }
|
||||
.troute__rider { position: absolute; left: 0; top: 0; z-index: 3; visibility: hidden; width: clamp(42px, 3.6vw, 56px); pointer-events: none; will-change: transform; }
|
||||
|
||||
.tspot { position: absolute; z-index: 2; width: 0; height: 0; }
|
||||
.tspot--shop { left: var(--pin-x); top: var(--pin-y); }
|
||||
.tspot--home { left: var(--home-x); top: var(--home-y); }
|
||||
.tspot__minimap { display: none; }
|
||||
|
||||
/* Pin: Tropfen mit Hahn, darunter ein pulsierender Punkt */
|
||||
.tpin { position: absolute; left: 0; top: 0; }
|
||||
.tpin__dot { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--red); border: 4px solid #fff; box-shadow: 0 3px 8px rgba(80, 0, 0, .4); }
|
||||
.tpin__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: rgba(229, 19, 11, .45); animation: pin-pulse 2s ease-out infinite; z-index: -1; }
|
||||
@keyframes pin-pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(4.2); opacity: 0; } }
|
||||
.tpin__head {
|
||||
position: absolute; left: -32px; top: -86px; width: 64px; height: 64px;
|
||||
border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
|
||||
background: linear-gradient(135deg, var(--red-hot), var(--red-deep));
|
||||
border: 4px solid #fff; box-shadow: -6px 10px 18px rgba(80, 0, 0, .4);
|
||||
display: grid; place-items: center;
|
||||
}
|
||||
.tpin__head img { width: 64%; height: auto; transform: rotate(45deg) translateY(-1px); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
|
||||
|
||||
/* App-Symbol "Zuhause" */
|
||||
.tapp { position: absolute; left: -40px; top: -40px; width: 80px; display: flex; flex-direction: column; align-items: center; gap: .45rem; }
|
||||
.tapp__icon {
|
||||
width: 80px; height: 80px; border-radius: 24px; display: grid; place-items: center; color: #fff;
|
||||
background: linear-gradient(160deg, #ff4b26, var(--red) 45%, var(--red-deep));
|
||||
box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .15), 0 14px 26px rgba(120, 40, 0, .35), 0 0 0 4px #fff;
|
||||
}
|
||||
.tapp__icon svg { width: 44px; height: 44px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
|
||||
.tapp__label { font-weight: 700; font-size: .85rem; color: var(--ink); background: rgba(255, 255, 255, .7); border-radius: 999px; padding: .1em .6em; }
|
||||
|
||||
/* Info-Karten über Pin und Zuhause */
|
||||
.tcard {
|
||||
position: absolute; bottom: 106px; width: min(360px, 30vw);
|
||||
border: 3px solid var(--ink); border-radius: var(--radius);
|
||||
padding: clamp(1.1rem, 2vw, 1.6rem);
|
||||
box-shadow: 8px 8px 0 var(--ink), 14px 24px 34px rgba(90, 50, 0, .3);
|
||||
}
|
||||
.tspot--shop .tcard { left: -64px; } /* Karte rechts über dem Pin: links bleibt Platz für die Überschrift */
|
||||
.tspot--home .tcard { left: 62px; bottom: auto; top: -96px; } /* rechts neben dem Zuhause-Symbol */
|
||||
.tcard::after { content: ""; position: absolute; bottom: -14px; width: 22px; height: 22px; background: inherit; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg); background-color: #fdf4e3; }
|
||||
.tspot--shop .tcard::after { left: 53px; }
|
||||
.tspot--home .tcard::after { left: -14px; bottom: auto; top: 84px; transform: rotate(135deg); }
|
||||
.tcard__kicker { display: inline-flex; align-items: center; gap: .4em; font-family: var(--f-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--red-deep); }
|
||||
.tcard__kicker svg { width: 1.1em; height: 1.1em; }
|
||||
.tcard h3 { font-family: var(--f-sticker); text-transform: uppercase; font-weight: 400; font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); line-height: 1; margin: .45rem 0 .5rem; }
|
||||
.tcard p { font-size: .95rem; }
|
||||
.tcard__links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
|
||||
.tcard__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; }
|
||||
.tcard__links a:hover { background: var(--ink); color: var(--yellow); }
|
||||
.tcard__links a.is-primary { background: var(--red); border-color: var(--red); color: var(--white); }
|
||||
.tcard__links a.is-primary:hover { background: var(--ink); border-color: var(--ink); }
|
||||
.tcard__links svg { width: 1em; height: 1em; }
|
||||
|
||||
/* ============ Visit ============ */
|
||||
.visit { --mottle-o: .12; --grain-o: .16; }
|
||||
@@ -846,15 +921,21 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl
|
||||
.page-hero__st { position: absolute; right: 32%; top: 28%; z-index: 5; --r: -10deg; }
|
||||
.page-hero .flames { z-index: 4; --fh: clamp(60px, 8vw, 130px); }
|
||||
|
||||
.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);
|
||||
/* Kategorien: in Ruhe alle sichtbar (umbrechend), beim Scrollen als kompakte Leiste oben angeheftet.
|
||||
.cat-nav hält dabei ihre Höhe (per JS), damit der Inhalt nicht springt. */
|
||||
.cat-nav { position: relative; z-index: 800; background: var(--cream); border-bottom: 2px solid rgba(21, 13, 12, .1); }
|
||||
.cat-nav ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: .9rem var(--gutter); }
|
||||
.cat-nav.is-stuck ul {
|
||||
position: fixed; left: 0; right: 0; top: 0; z-index: 800;
|
||||
flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: .6rem;
|
||||
background: rgba(251, 238, 214, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
|
||||
border-bottom: 2px solid rgba(21, 13, 12, .1); box-shadow: 0 8px 20px rgba(21, 13, 12, .1);
|
||||
transition: top .35s cubic-bezier(.2, .8, .2, 1);
|
||||
animation: bar-in .3s 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; }
|
||||
body.nav-visible .cat-nav.is-stuck ul { top: var(--nav-h); }
|
||||
.cat-nav ul::-webkit-scrollbar { display: none; }
|
||||
@keyframes bar-in { from { transform: translateY(-100%); } }
|
||||
.cat-nav a {
|
||||
display: inline-block; white-space: nowrap;
|
||||
padding: .5em 1em; border-radius: 999px; border: 2px solid var(--ink);
|
||||
@@ -869,7 +950,7 @@ body.nav-visible .cat-nav { top: var(--nav-h); }
|
||||
.cat-bg { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0; background: var(--cat-bg); }
|
||||
.cat-bg .flames { --fh: clamp(60px, 8vw, 130px); }
|
||||
.cat-bg .fx { overflow: hidden; }
|
||||
.cat-bg .torn--in { color: var(--cream); }
|
||||
.cat-bg .torn--in { color: var(--cream); background-image: var(--grain-soft); background-size: 240px; }
|
||||
.menu-cat--red { --cat-bg: var(--red); --spot: rgba(255, 140, 50, .45); --spot-y: 60%; --swirl: rgba(100, 3, 1, .4); --dot: rgba(70, 0, 0, .9); --dots-o: .16; --grain-o: .3; color: var(--cream); }
|
||||
.menu-cat--yellow { --cat-bg: var(--yellow); --spot: rgba(255, 255, 220, .5); --dot: rgba(229, 19, 11, .8); --dots-o: .12; --grain-o: .2; }
|
||||
.menu-cat--ink { --cat-bg: var(--ink); --spot: rgba(255, 80, 20, .3); --spot-y: 100%; --spot-size: 90% 70%; --swirl: rgba(150, 25, 5, .28); --grain-o: .35; color: var(--cream); }
|
||||
@@ -882,8 +963,8 @@ body.nav-visible .cat-nav { top: var(--nav-h); }
|
||||
.menu-cat--red .item, .menu-cat--ink .item { border-color: rgba(251, 238, 214, .2); }
|
||||
.menu-cat--red .item p, .menu-cat--ink .item p { opacity: .9; }
|
||||
.menu-cat--red .menu-extra span, .menu-cat--ink .menu-extra span { background: rgba(0, 0, 0, .22); }
|
||||
.menu-cat--red .dish--special { box-shadow: 0 6px 0 var(--oxblood), 0 0 0 3px var(--cream), 0 26px 40px -8px rgba(60, 0, 0, .55); }
|
||||
.menu-cat--yellow .dish { box-shadow: 0 6px 0 #c98c00, 0 22px 36px -8px rgba(120, 70, 0, .35); }
|
||||
.menu-cat--red .dish--special, .menu-cat--red .dish--special:hover { box-shadow: 0 26px 40px -10px rgba(60, 0, 0, .55); outline: 3px solid var(--cream); outline-offset: -3px; }
|
||||
.menu-cat--yellow .dish { box-shadow: 0 2px 6px rgba(120, 70, 0, .15), 0 22px 36px -10px rgba(120, 70, 0, .38); }
|
||||
.page-end { position: relative; height: clamp(26px, 3vw, 44px); margin-top: clamp(3rem, 6vw, 5rem); }
|
||||
.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(3rem, 8.6vw, 8rem); color: var(--red); --ext: var(--oxblood); }
|
||||
@@ -906,13 +987,13 @@ body.nav-visible .cat-nav { top: var(--nav-h); }
|
||||
var(--white);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 6px 0 #e3cfae, 0 22px 36px -8px rgba(110, 50, 10, .3);
|
||||
box-shadow: 0 2px 6px rgba(110, 50, 10, .1), 0 22px 36px -10px rgba(110, 50, 10, .32);
|
||||
--tx: 0deg; --ty: 0deg;
|
||||
transform: perspective(1000px) rotateX(var(--tx)) rotateY(var(--ty));
|
||||
transition: transform .45s var(--ease-pop), box-shadow .3s, background-position .6s cubic-bezier(.4, 1.6, .7, .95);
|
||||
}
|
||||
.dish.is-tilting { transition: transform .15s ease-out, box-shadow .3s, background-position .6s cubic-bezier(.4, 1.6, .7, .95); }
|
||||
.dish:hover { transform: perspective(1000px) translateY(-6px) rotateX(var(--tx)) rotateY(var(--ty)); box-shadow: 0 6px 0 #e3cfae, 0 34px 50px -10px rgba(110, 50, 10, .4); background-position: var(--sq) 0, calc(var(--sq) * -1) 100%, 0 0; }
|
||||
.dish:hover { transform: perspective(1000px) translateY(-6px) rotateX(var(--tx)) rotateY(var(--ty)); box-shadow: 0 2px 6px rgba(110, 50, 10, .1), 0 34px 50px -12px rgba(110, 50, 10, .4); background-position: var(--sq) 0, calc(var(--sq) * -1) 100%, 0 0; }
|
||||
.dish__name {
|
||||
font-family: var(--f-wide); font-weight: 900; text-transform: uppercase;
|
||||
font-size: clamp(1.2rem, 8cqi, 2.5rem); line-height: .95; letter-spacing: -.01em;
|
||||
@@ -947,8 +1028,8 @@ body.nav-visible .cat-nav { top: var(--nav-h); }
|
||||
radial-gradient(120% 90% at 50% 40%, #cc160d 0%, var(--bg) 50%, #9a0604 100%);
|
||||
box-shadow: 0 14px 32px rgba(140, 10, 6, .28);
|
||||
}
|
||||
.dish--special:hover { box-shadow: 0 6px 0 var(--oxblood), 0 34px 50px -10px rgba(140, 10, 6, .45); background-position: 0 0, 0 0; }
|
||||
.dish--special { box-shadow: 0 6px 0 var(--oxblood), 0 22px 36px -8px rgba(140, 10, 6, .4); }
|
||||
.dish--special { box-shadow: 0 2px 6px rgba(140, 10, 6, .2), 0 22px 36px -10px rgba(140, 10, 6, .42); }
|
||||
.dish--special:hover { box-shadow: 0 2px 6px rgba(140, 10, 6, .2), 0 34px 50px -12px rgba(140, 10, 6, .5); background-position: 0 0, 0 0; }
|
||||
.dish--special::before { content: ""; position: absolute; left: 50%; top: 55%; width: 260%; aspect-ratio: 1; translate: -50% -50%; background: rgba(100, 3, 1, .4); -webkit-mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat; mask: url(../img/fx/flame-swirl.svg) center / contain no-repeat; pointer-events: none; }
|
||||
.dish--special::after { content: ""; position: absolute; left: 50%; top: 52%; width: 90%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 150, 50, .45), transparent); pointer-events: none; }
|
||||
.dish--special > * { position: relative; z-index: 1; }
|
||||
@@ -971,7 +1052,7 @@ body.nav-visible .cat-nav { top: var(--nav-h); }
|
||||
}
|
||||
.dish--special .price { background: var(--cream); color: var(--red-deep); }
|
||||
|
||||
.dish--promo { justify-content: center; gap: 1.1rem; grid-column: span 2; }
|
||||
.dish--promo { justify-content: center; gap: 1.1rem; grid-column: 1 / -1; }
|
||||
.dish__kicker { letter-spacing: .32em; }
|
||||
.dish--promo .promo-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 0 0; border-top: 1px solid rgba(247, 235, 217, .35); text-align: left; }
|
||||
.dish--promo .promo-row strong { font-family: var(--f-wide); font-weight: 900; text-transform: uppercase; font-size: 1.15rem; line-height: 1; letter-spacing: -.01em; }
|
||||
@@ -1044,18 +1125,42 @@ body.nav-visible .cat-nav { top: var(--nav-h); }
|
||||
.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; }
|
||||
.sauce-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
|
||||
.sauce-chips span { display: inline-flex; gap: .7em; align-items: center; background: var(--white); border: 2px solid var(--red); border-radius: 999px; padding: .5em 1em; font-family: var(--f-wide); font-weight: 900; font-size: .82rem; text-transform: uppercase; color: var(--red); }
|
||||
.sauce-chips b { font-family: var(--f-mono); font-weight: 400; color: var(--ink); }
|
||||
/* Buckets als breite Karte über die ganze Zeile, beide Buckets nebeneinander mit Foto */
|
||||
.dish--wide { grid-column: 1 / -1; }
|
||||
.promo-duo { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); }
|
||||
.promo-item { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
|
||||
.promo-item img { width: min(100%, 380px); height: clamp(180px, 22vw, 270px); object-fit: contain; filter: drop-shadow(0 18px 18px rgba(60, 0, 0, .35)); }
|
||||
@container (max-width: 560px) {
|
||||
.promo-duo { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* Saucen und Getränke: kleine Papier-Karten mit Foto, Name und Preis */
|
||||
.dip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: clamp(.8rem, 1.6vw, 1.2rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
|
||||
.dip {
|
||||
display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; color: var(--ink);
|
||||
background: var(--grain-soft) 0 0 / 240px, #fff; border-radius: var(--radius); padding: .9rem .8rem 1.1rem;
|
||||
box-shadow: 0 2px 6px rgba(110, 50, 10, .1), 0 18px 30px -10px rgba(110, 50, 10, .3);
|
||||
transition: transform .45s var(--ease-pop), box-shadow .3s;
|
||||
}
|
||||
.dip:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 2px 6px rgba(110, 50, 10, .1), 0 28px 40px -12px rgba(110, 50, 10, .4); }
|
||||
.dip img { width: 100%; height: 110px; object-fit: contain; margin-bottom: .3rem; transition: transform .5s var(--ease-pop); }
|
||||
.dip:hover img { transform: scale(1.08) rotate(-3deg); }
|
||||
.dip h3 { font-family: var(--f-wide); font-weight: 900; text-transform: uppercase; font-size: .82rem; line-height: 1.15; margin: 0; color: var(--red); text-wrap: balance; hyphens: manual; max-width: 100%; }
|
||||
.dip span { font-family: var(--f-mono); font-size: .78rem; opacity: .75; }
|
||||
.dip b { font-family: var(--f-wide); font-weight: 900; font-size: .8rem; color: var(--white); background: var(--red); border-radius: 999px; padding: .35em .8em; margin-top: .3rem; }
|
||||
.dip-grid--drinks .dip img { height: 170px; }
|
||||
.menu-cat--ink .dip { box-shadow: 0 0 0 2px rgba(255, 200, 28, .35), 0 24px 40px -12px rgba(0, 0, 0, .7); }
|
||||
|
||||
/* ============ Fliegende Zutaten ============ */
|
||||
.blast__bits { position: absolute; inset: 0; pointer-events: none; }
|
||||
.bit { position: absolute; z-index: 3; }
|
||||
.bit { position: absolute; z-index: 3; transform-origin: 0 0; } /* Mittelpunkt der Zutat liegt auf left/top: so drehen und wachsen sie um sich selbst */
|
||||
.bit__c { display: block; translate: -50% -50%; }
|
||||
.bit__in, .bit__fl { display: block; }
|
||||
.bit img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 10px rgba(40, 0, 0, .35)); }
|
||||
.bit--b { z-index: 1; }
|
||||
.bit--b img { filter: blur(1.2px) brightness(.88) drop-shadow(0 8px 8px rgba(40, 0, 0, .3)); }
|
||||
.bit--n { z-index: 5; }
|
||||
.bit--n img { filter: blur(4px) drop-shadow(0 24px 22px rgba(40, 0, 0, .35)); }
|
||||
.hero__burger .blast__bits, .visit__deco .blast__bits, .wings__hero .blast__bits { z-index: auto; }
|
||||
.champ__food .bit--f { z-index: 3; }
|
||||
@media (max-width: 820px) { .bit--b img { filter: brightness(.9) drop-shadow(0 6px 6px rgba(40, 0, 0, .3)); } }
|
||||
@@ -1085,6 +1190,29 @@ html.js.anim .juggle { visibility: hidden; }
|
||||
}
|
||||
|
||||
/* ============ Responsive ============ */
|
||||
/* Take-away: bis 1000 px untereinander (Kartenausschnitt mit Pin, darunter die beiden Karten) */
|
||||
@media (max-width: 1000px) {
|
||||
.tstage { height: auto; display: flex; flex-direction: column; gap: 2.4rem; margin-top: 1.5rem; }
|
||||
.tmap, .troute, .troute__rider { display: none; }
|
||||
.tspot { position: relative; left: auto; top: auto; width: auto; height: auto; }
|
||||
.tspot__minimap {
|
||||
display: block; position: relative; height: 300px; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden;
|
||||
-webkit-mask: radial-gradient(ellipse 70% 50% at 50% 50%, #000 40%, transparent 100%); mask: radial-gradient(ellipse 70% 50% at 50% 50%, #000 40%, transparent 100%);
|
||||
}
|
||||
.tspot__minimap img { position: absolute; width: 900px; max-width: none; left: calc(50% - 360px); top: calc(50% - 430px); }
|
||||
.tspot--shop .tpin { left: 50%; top: 150px; }
|
||||
.tcard, .tspot--shop .tcard, .tspot--home .tcard { position: relative; left: auto; bottom: auto; width: auto; translate: none; }
|
||||
.tspot--shop .tcard { margin-top: -2.2rem; }
|
||||
.tcard::after, .tspot--shop .tcard::after, .tspot--home .tcard::after { bottom: auto; top: -14px; left: calc(50% - 11px); transform: rotate(-135deg); }
|
||||
.tspot--home { display: flex; flex-direction: column; align-items: center; }
|
||||
.tspot--home::before { content: ""; height: 70px; border-left: 6px dotted var(--red); margin: -1rem 0 1.2rem; }
|
||||
.tapp { position: relative; left: auto; top: auto; }
|
||||
.tspot--home .tcard { margin-top: 1.6rem; align-self: stretch; top: auto; }
|
||||
.tspot--shop, .tspot--home { align-self: center; width: min(100%, 560px); }
|
||||
.tspot--shop .tcard { left: auto; }
|
||||
.tmap__credit { position: static; order: 9; align-self: flex-end; margin-top: -1rem; }
|
||||
}
|
||||
|
||||
@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; }
|
||||
@@ -1126,16 +1254,13 @@ html.js.anim .juggle { visibility: hidden; }
|
||||
.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__img { position: relative; right: auto; bottom: auto; width: 76vw; margin: 4.5rem auto -3rem; }
|
||||
.page-hero__st { right: 8%; top: auto; bottom: 30%; }
|
||||
}
|
||||
|
||||
@@ -1145,8 +1270,18 @@ html.js.anim .juggle { visibility: hidden; }
|
||||
.sauce p { display: none; }
|
||||
.sauce h3 { font-size: 1.45rem; overflow-wrap: anywhere; }
|
||||
.sauce .price { font-size: .74rem; padding: .5em .6em; }
|
||||
.dish-grid, .dish-grid--4, .dish-grid--2 { grid-template-columns: 1fr; }
|
||||
.dish--promo { grid-column: auto; }
|
||||
.dish-grid, .dish-grid--4, .dish-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
|
||||
.dish--special, .dish--promo { grid-column: 1 / -1; }
|
||||
.dish:not(.dish--special) { --sq: 8px; --pad-x: .65rem; --media-h: clamp(110px, 34vw, 170px); padding-top: calc(var(--sq) * 2 + .9rem); padding-bottom: calc(var(--sq) * 2 + .9rem); }
|
||||
.dish:not(.dish--special) .dish__name { font-size: clamp(.82rem, 10.5cqi, 1.3rem); }
|
||||
.dish:not(.dish--special) .dish__media { margin-block: .2rem 0; }
|
||||
.dish:not(.dish--special) .dish__body { gap: .5rem; }
|
||||
.dish:not(.dish--special) p { font-size: .8rem; line-height: 1.35; }
|
||||
.dish:not(.dish--special) .variants span { font-size: .68rem; padding: .2em .5em; }
|
||||
.dish:not(.dish--special) .price { font-size: .8rem; }
|
||||
.dish:not(.dish--special) .dish__badge { font-size: .65rem; border-width: 2px; top: 6%; }
|
||||
.cat-nav ul { gap: .4rem; }
|
||||
.cat-nav a { font-size: .78rem; padding: .45em .8em; }
|
||||
.footer__grid { grid-template-columns: 1fr; }
|
||||
.btn { font-size: 1rem; padding: .95em 1.4em 1em; }
|
||||
.hero__cta .btn { flex: 1 1 auto; }
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1080" fill="none" stroke-linecap="round" stroke-linejoin="round"><defs><path id="s0" d="M580 644L595 632 737 496 746 491"/><path id="s2" d="M1119 892L1162 987 1167 991 1175 991 1241 980 1297 965"/><path id="s5" d="M832 928L900 916 909 924 928 926 1109 896 1119 892"/></defs><path fill="#ffd654" stroke="none" d="M118 167L112 168 102 182 107 190 141 191 177 149 142 122 118 167Z M737 787L759 839 730 852 763 923 768 922 769 925 745 928 635 910 585 905 574 901 565 894 505 893 505 901 377 892 327 891 327 887 260 886 261 880 307 870 307 859 424 847 550 830 605 808 731 765 741 783 737 787Z M371 466L334 509 338 527 384 518 382 508 543 476 535 449 442 436 405 449 371 466Z M1406 486L1485 446 1516 501 1433 545 1406 486Z M932 185L876 218 868 226 932 225 932 185Z M1026 254L933 252 934 184 1011 141 1011 171 1015 171 1029 171 1026 254Z M1423 635L1394 643 1391 650 1407 701 1414 705 1445 695 1448 686 1430 639 1423 635Z M1214 91L1177 118 1190 139 1226 106 1214 91Z M782 1162L787 1164 785 1171 741 1178 719 1179 703 1182 690 1187 506 1215 505 1210 522 1208 537 1202 782 1162Z M803 1169L881 1156 922 1144 1030 1124 1054 1114 1007 1104 1003 1114 994 1118 935 1129 905 1123 885 1136 858 1141 845 1149 815 1155 798 1153 797 1159 803 1169Z M492 1212L493 1218 283 1250 282 1245 492 1212Z M1046 1133L1104 1108 1118 1105 1136 1105 1146 1108 1096 1123 1046 1133Z M821 1154L824 1130 856 1125 857 1112 905 1123 885 1136 858 1141 845 1149 821 1154Z M940 709L994 684 1031 762 977 787 940 709Z M992 797L1043 774 1082 861 1031 884 992 797Z M940 773L985 867 931 893 886 798 940 773Z M385 1214L395 1201 401 1204 403 1216 385 1219 385 1214Z M734 1059L768 1054 771 1069 737 1075 734 1072 732 1063 734 1059Z M776 1106L780 1132 791 1130 796 1091 759 1097 761 1107 776 1106Z M476 1187L403 1199 400 1176 471 1083 529 1034 571 1002 581 1014 568 1025 579 1042 559 1054 562 1057 557 1060 564 1076 562 1076 567 1085 565 1086 567 1090 557 1095 507 1134 468 1141 476 1187Z M709 1035L746 1027 774 1024 758 991 770 988 761 974 754 969 717 963 686 964 683 967 690 1006 643 1021 636 965 593 985 602 1001 590 1007 603 1036 584 1045 577 1055 577 1068 583 1084 629 1059 709 1035Z M1069 1099L1064 1070 1062 1069 995 1079 998 1069 983 1064 982 1066 973 1063 974 1061 934 1049 931 1058 915 1054 917 1049 900 1045 900 1047 837 1034 841 1007 871 1014 879 982 921 994 1040 1035 1149 1083 1069 1099Z M857 1112L935 1129 943 1105 922 1100 920 1109 886 1101 889 1091 861 1085 857 1112Z M279 1219L298 1194 400 1176 471 1083 529 1034 571 1002 581 1014 584 1010 602 1001 593 985 636 965 636 945 577 959 579 982 528 1018 482 1059 435 1105 410 1138 388 1159 365 1168 340 1173 335 1157 272 1169 279 1219Z M649 1003L645 989 674 979 679 993 649 1003Z M636 965L643 1021 690 1006 683 967 636 965Z M1048 1010L1113 1001 1113 995 1133 995 1130 1030 1156 1032 1176 1076 1049 1019 1048 1010Z M852 951L892 945 891 940 923 935 927 957 954 953 956 962 1018 951 1016 941 1087 929 1093 968 1100 967 1102 983 1112 982 1113 1001 1048 1010 1049 1019 974 989 917 969 852 951Z M1052 1011L1100 1005 1100 1029 1052 1016 1052 1011Z M1321 964L1326 978 1380 958 1377 951 1418 935 1428 926 1321 964Z M793 349L781 349 781 353 779 353 778 381 758 387 729 387 731 376 744 358 864 228 886 228 886 242 873 242 873 247 871 247 871 274 851 280 838 280 838 287 836 287 838 311 836 311 835 350 793 349Z M1097 119L1073 101 1106 72 1117 74 1111 103 1116 117 1157 125 1168 117 1175 75 1199 79 1204 53 1198 52 1206 8 1224 11 1221 27 1263 35 1251 92 1226 106 1190 139 1172 158 1096 157 1097 119Z M1306 115L1327 128 1338 119 1348 108 1350 114 1348 125 1341 134 1331 141 1302 119 1306 115Z M1296 279L1284 271 1269 287 1250 302 1261 315 1296 279Z M1340 508L1375 493 1380 508 1362 507 1342 511 1340 508Z M1085 634L1023 663 1020 668 1043 717 1110 683 1085 634Z M833 908L840 906 843 916 836 918 833 908Z M879 918L833 925 814 907 813 886 804 876 782 826 788 824 773 788 804 775 836 754 853 786 805 810 808 823 804 825 820 876 834 873 839 886 835 887 839 905 843 903 847 918 864 914 861 906 871 903 879 918Z M798 1084L727 1095 717 1087 714 1077 652 1095 613 1114 576 1137 534 1170 522 1190 544 1186 544 1175 615 1164 612 1125 631 1121 639 1165 659 1161 653 1118 671 1115 679 1163 700 1159 693 1111 713 1109 720 1159 732 1157 732 1151 740 1149 733 1104 750 1101 761 1158 790 1154 798 1084Z M808 1074L861 1082 926 1100 924 1119 852 1103 847 1096 807 1105 808 1074Z M912 929L899 919 832 931 819 916 801 917 793 922 773 926 850 948 889 943 889 939 913 935 912 929Z M924 922L905 910 885 912 915 904 924 922Z M698 945L787 963 798 984 785 999 763 969 703 953 698 945Z M773 1067L779 1067 782 1063 783 1049 770 1049 729 1055 730 1059 771 1053 773 1067Z M1152 642L1172 684 1188 676 1170 635 1152 642Z M-963 3113L-1005 3135 -921 3127 -846 3117 -797 3107 -750 3090 -635 3032 -446 2928 -361 2899 -282 2882 -246 2867 -225 2856 53 2582 131 2511 227 2461 416 2384 557 2320 591 2301 642 2265 664 2246 788 2102 830 2066 892 2027 991 1984 1019 1969 1096 1916 1342 17Line truncated
|
||||
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
+198
-68
@@ -145,8 +145,29 @@
|
||||
}, { threshold: 0 }).observe(heroEl);
|
||||
}
|
||||
|
||||
/* ---------- Speisekarte: aktive Kategorie ---------- */
|
||||
/* ---------- Speisekarte: Kategorien anheften ---------- */
|
||||
var catNav = $('.cat-nav');
|
||||
if (catNav) {
|
||||
var stuck = false;
|
||||
var checkStuck = function () {
|
||||
var navH = document.body.classList.contains('nav-visible') ? ((nav && nav.offsetHeight) || 0) : 0;
|
||||
var top = catNav.getBoundingClientRect().top;
|
||||
var shouldStick = top < navH;
|
||||
if (shouldStick === stuck) return;
|
||||
stuck = shouldStick;
|
||||
if (stuck) catNav.style.height = catNav.offsetHeight + 'px';
|
||||
else catNav.style.height = '';
|
||||
catNav.classList.toggle('is-stuck', stuck);
|
||||
};
|
||||
window.addEventListener('scroll', checkStuck, { passive: true });
|
||||
window.addEventListener('resize', function () {
|
||||
if (stuck) { stuck = false; catNav.classList.remove('is-stuck'); catNav.style.height = ''; }
|
||||
checkStuck();
|
||||
});
|
||||
checkStuck();
|
||||
}
|
||||
|
||||
/* ---------- Speisekarte: aktive Kategorie ---------- */
|
||||
if (catNav && 'IntersectionObserver' in window) {
|
||||
var links = $$('a', catNav);
|
||||
var list = $('ul', catNav);
|
||||
@@ -174,44 +195,121 @@
|
||||
|
||||
/* ---------- Zutaten rund ums Essen (Explosion beim Scrollen) ----------
|
||||
Jede Zutat: [Datei, x %, y % (relativ zur Essens-Box), Größe % der Box, Drehung, Ebene, auch mobil, gespiegelt]
|
||||
Ebenen: b = hinter dem Essen (leicht unscharf), f = davor */
|
||||
Ebenen: b = hinter dem Essen (leicht unscharf), f = davor, n = ganz nah an der Kamera (groß, unscharf) */
|
||||
var BITS = 'assets/img/bits/';
|
||||
var PRESETS = {
|
||||
/* Natürliche Streuung statt fester Positionen (fester Seed, damit es bei jedem Laden gleich aussieht).
|
||||
- food: Umriss des Essens im Bild [Mitte x, Mitte y, Halbbreite, Halbhöhe] in % der Box (abgerundetes Rechteck)
|
||||
- Die Zutaten fliegen in 2–3 Schüben aus dem Essen heraus: dicht am Rand, nach außen immer weniger
|
||||
- Teile vor dem Essen berühren es höchstens am Rand, Teile dahinter schauen nur halb hervor
|
||||
- left/right/top/bottom: erlaubter Bereich (% der Box), z. B. damit nichts über Text oder aus der Karte ragt
|
||||
items: [Datei, Grundgröße in % der Box-Breite, auch mobil] */
|
||||
var SCATTER = {
|
||||
burger: [
|
||||
['lettuce-2', 114, 30, 20, 40, 'b', 0], ['tomato', -10, 40, 16, -12, 'b', 1], ['onion-2', 106, 88, 14, 0, 'b', 0],
|
||||
['jalapeno-1', 8, -8, 11, 30, 'b', 1], ['bacon', 24, -16, 20, -30, 'b', 0, 1], ['sesame-2', 64, -14, 4, 40, 'b', 0],
|
||||
['lettuce-1', -14, 70, 24, -25, 'f', 1], ['tomato', 110, 60, 20, 18, 'f', 1, 1], ['bacon', 100, 8, 24, 22, 'f', 1],
|
||||
['onion-1', -12, 12, 18, -16, 'f', 1], ['pickle', 22, 104, 13, 8, 'f', 0], ['jalapeno-2', 82, 106, 12, -24, 'f', 1],
|
||||
['sesame-1', 36, -8, 3.5, 0, 'f', 0], ['sesame-1', 50, -20, 3, 80, 'f', 0, 1]
|
||||
['lettuce-3', 70, -37, 21, 24, 'b', 0, 0],
|
||||
['onion-2', 27, -43, 13, 30, 'b', 0, 0],
|
||||
['lettuce-2', 47, -27, 26, 12, 'f', 1, 0],
|
||||
['onion-1', 14, -21, 24, -15, 'f', 1, 0],
|
||||
['tomato', 81, 6, 27, 20, 'f', 1, 0],
|
||||
['lettuce-1', -9, 19, 25, -30, 'f', 1, 0],
|
||||
['lettuce-1', 94, 38, 27, 42, 'f', 1, 1],
|
||||
['tomato', -20, 50, 20, -34, 'f', 0, 1],
|
||||
['onionring', 103, 62, 23, 15, 'f', 0, 0],
|
||||
['bacon', -31, 68, 26, -12, 'f', 0, 1],
|
||||
['bacon', 110, 84, 24, 12, 'f', 0, 0],
|
||||
['jalapeno-1', 6, 107, 16, 20, 'f', 0, 0],
|
||||
['pickle', 73, 101, 16, -14, 'f', 0, 0],
|
||||
['sesame-1', 33, -6, 6.5, 25, 'f', 1, 0],
|
||||
['sesame-1', 39, -15, 6, -35, 'f', 0, 1],
|
||||
['sesame-2', 62, -17, 8, -20, 'f', 0, 0],
|
||||
['sesame-1', 58, -5, 5.5, 10, 'f', 1, 1]
|
||||
],
|
||||
'burger-sm': [
|
||||
['onion-2', 6, 10, 15, -14, 'b', 1], ['bacon', 94, 6, 20, 24, 'b', 1],
|
||||
['lettuce-1', -4, 70, 20, -20, 'f', 1], ['tomato', 102, 64, 17, 18, 'f', 1], ['sesame-1', 30, -4, 3, 0, 'f', 0]
|
||||
],
|
||||
'chicken-sm': [
|
||||
['bacon', 98, 10, 20, 24, 'b', 1, 1], ['crumb-1', 6, 4, 10, 0, 'b', 0], ['crumb-2', 88, -4, 9, 30, 'b', 0],
|
||||
['lettuce-2', -6, 70, 20, -24, 'f', 1], ['tomato', 104, 64, 15, 18, 'f', 1]
|
||||
],
|
||||
'wrap-sm': [
|
||||
['jalapeno-2', 6, 6, 11, -20, 'b', 1], ['onion-2', 96, 6, 13, 20, 'b', 1],
|
||||
['lettuce-3', -8, 70, 20, -18, 'f', 1], ['tomato', 104, 64, 15, 22, 'f', 1]
|
||||
],
|
||||
tenders: [
|
||||
['crumb-6', 2, 20, 11, 0, 'b', 1], ['crumb-7', 98, 14, 10, 40, 'b', 0], ['chili', 104, 78, 20, 20, 'b', 1],
|
||||
['crumb-1', 14, -6, 12, 10, 'f', 1], ['crumb-3', 64, -14, 11, 90, 'f', 1], ['crumb-4', 90, 8, 11, 120, 'f', 0],
|
||||
['crumb-8', -4, 84, 12, 70, 'f', 1], ['jalapeno-1', 40, 108, 11, -10, 'f', 0], ['crumb-5', 78, 106, 10, 30, 'f', 0]
|
||||
],
|
||||
wings: [
|
||||
['crumb-6', 2, 34, 11, 0, 'b', 0], ['crumb-7', 98, 22, 10, 40, 'b', 1], ['chili', 102, 74, 20, 20, 'b', 0], ['jalapeno-1', -6, 66, 12, -30, 'b', 1],
|
||||
['crumb-1', 14, 10, 12, 10, 'f', 1], ['crumb-3', 60, 8, 11, 90, 'f', 1], ['crumb-4', 88, 12, 11, 120, 'f', 1],
|
||||
['crumb-5', 104, 46, 10, 0, 'f', 0], ['crumb-8', -2, 92, 11, 70, 'f', 0], ['jalapeno-2', 86, 104, 12, -10, 'f', 1], ['crumb-2', 48, 106, 9, 30, 'f', 0, 1]
|
||||
]
|
||||
'burger-visit': { seed: 8, food: [38, 49, 37, 47], hw: .63, reach: 26, bursts: 2, behind: .3, top: 6, bottom: 112, left: -12, items: [
|
||||
['lettuce-2', 20, 1], ['tomato', 16, 1], ['bacon', 22, 1], ['onion-1', 14, 1], ['jalapeno-1', 11, 1], ['lettuce-1', 20, 0],
|
||||
['pickle', 10, 0], ['tomato', 12, 0], ['sesame-1', 3.4, 0], ['sesame-2', 3.8, 0]
|
||||
] },
|
||||
'burger-page': { seed: 6, food: [38, 49, 37, 47], hw: .63, reach: 30, bursts: 3, behind: .3, top: -34, bottom: 112, items: [
|
||||
['lettuce-2', 21, 1], ['tomato', 16, 1], ['bacon', 22, 1], ['onion-1', 14, 1], ['jalapeno-1', 11, 1], ['lettuce-1', 22, 0],
|
||||
['pickle', 10, 0], ['tomato', 12, 0], ['jalapeno-2', 10, 0], ['sesame-1', 3.4, 0], ['sesame-2', 3.8, 0], ['sesame-1', 3, 0]
|
||||
] },
|
||||
'burger-sm': { seed: 5, fly: .4, food: [39, 49, 38, 47], hw: .72, reach: 10, bursts: 2, behind: .5, top: 8, bottom: 96, left: 5, right: 95, items: [
|
||||
['lettuce-1', 17, 1], ['tomato', 13, 1], ['bacon', 17, 1], ['onion-2', 11, 0], ['sesame-1', 2.6, 0]
|
||||
] },
|
||||
'chicken-sm': { seed: 7, fly: .4, food: [41, 48, 40, 47], hw: .73, reach: 10, bursts: 2, behind: .5, top: 8, bottom: 96, left: 5, right: 95, items: [
|
||||
['bacon', 17, 1], ['lettuce-2', 17, 1], ['tomato', 13, 1], ['crumb-1', 7, 0], ['crumb-3', 6, 0]
|
||||
] },
|
||||
'wrap-sm': { seed: 3, fly: .4, food: [43, 48, 42, 47], hw: .67, reach: 10, bursts: 2, behind: .5, top: 8, bottom: 96, left: 5, right: 95, items: [
|
||||
['lettuce-3', 17, 1], ['tomato', 13, 1], ['jalapeno-2', 11, 1], ['onion-2', 11, 0]
|
||||
] },
|
||||
wings: { seed: 21, food: [50, 50, 49, 49], hw: .71, reach: 26, bursts: 3, behind: .3, top: 2, bottom: 116, items: [
|
||||
['crumb-1', 10, 1], ['chili', 17, 1], ['crumb-3', 9, 1], ['jalapeno-1', 10, 1], ['crumb-6', 9, 1], ['crumb-8', 9, 1],
|
||||
['crumb-4', 8, 0], ['jalapeno-2', 9, 0], ['crumb-7', 7, 0], ['crumb-2', 6, 0], ['crumb-5', 6, 0], ['crumb-2', 4.5, 0]
|
||||
] },
|
||||
tenders: { seed: 12, food: [47, 42, 46, 41], hw: .59, reach: 26, bursts: 3, behind: .3, top: -34, bottom: 124, left: 0, items: [
|
||||
['crumb-6', 9, 1], ['chili', 16, 1], ['crumb-1', 9, 1], ['jalapeno-1', 9, 1], ['crumb-3', 8, 1],
|
||||
['crumb-8', 8, 0], ['crumb-4', 7, 0], ['crumb-7', 6, 0], ['crumb-5', 5, 0]
|
||||
] }
|
||||
};
|
||||
function seeded(a) {
|
||||
return function () {
|
||||
a = a + 0x6D2B79F5 | 0;
|
||||
var t = Math.imul(a ^ a >>> 15, 1 | a);
|
||||
t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
|
||||
return ((t ^ t >>> 14) >>> 0) / 4294967296;
|
||||
};
|
||||
}
|
||||
function scatter(spec) {
|
||||
var r = seeded(spec.seed), placed = [], out = [];
|
||||
var gauss = function () { return (r() + r() + r() - 1.5) / 1.5; };
|
||||
var f = spec.food, hw = spec.hw;
|
||||
// Rechnen in "Box-Breite"-Einheiten, damit Abstände in x und y vergleichbar sind
|
||||
var cx = f[0], cy = f[1] * hw, rx = f[2], ry = f[3] * hw;
|
||||
var bursts = [];
|
||||
for (var j = 0; j < spec.bursts; j++) bursts.push(r() * Math.PI * 2);
|
||||
// Abstand Mitte -> Rand des Essens in Richtung a (abgerundetes Rechteck)
|
||||
var edgeAt = function (a) {
|
||||
var c = Math.abs(Math.cos(a)), sn = Math.abs(Math.sin(a));
|
||||
var k = 1 / Math.pow(Math.pow(c, 3) + Math.pow(sn, 3), 1 / 3);
|
||||
return { x: rx * k * Math.cos(a), y: ry * k * Math.sin(a) };
|
||||
};
|
||||
// Abstand eines Punktes zum Umriss (negativ = innen)
|
||||
var outside = function (x, y) {
|
||||
var dx = x - cx, dy = y - cy, a = Math.atan2(dy / ry, dx / rx);
|
||||
var e = edgeAt(a), le = Math.sqrt(e.x * e.x + e.y * e.y), lp = Math.sqrt(dx * dx + dy * dy);
|
||||
return lp - le;
|
||||
};
|
||||
spec.items.forEach(function (it) {
|
||||
for (var k = 0; k < 240; k++) {
|
||||
var a = r() < .75 ? bursts[Math.floor(r() * bursts.length)] + gauss() * .7 : r() * Math.PI * 2;
|
||||
var size = it[1] * (.75 + r() * .5);
|
||||
var behind = r() < spec.behind && size > 5;
|
||||
var e = edgeAt(a), le = Math.sqrt(e.x * e.x + e.y * e.y);
|
||||
// hinter dem Essen: halb versteckt; davor: frei, dicht am Rand häufiger als weit außen
|
||||
var gap = behind ? size * (r() * .25 - .1) : size * .38 + Math.pow(r(), 1.7) * spec.reach;
|
||||
var x = cx + e.x / le * (le + gap), y = cy + e.y / le * (le + gap);
|
||||
var yp = y / hw;
|
||||
// hohe Teile (Salatblatt) ragen weiter nach oben/unten: halbe Höhe großzügig mit 0,75 × Größe ansetzen
|
||||
if ((y - size * .75) / hw < spec.top || (y + size * .75) / hw > spec.bottom || x - size / 2 < (spec.left != null ? spec.left : -70) || x + size / 2 > (spec.right != null ? spec.right : 170)) continue;
|
||||
if (!behind && outside(x, y) < size * .3) continue;
|
||||
var free = placed.every(function (p) {
|
||||
var dx = p.x - x, dy = p.y - y;
|
||||
return Math.sqrt(dx * dx + dy * dy) > (p.s + size) * .48;
|
||||
});
|
||||
if (!free) continue;
|
||||
placed.push({ x: x, y: y, s: size });
|
||||
// weiter außen etwas kleiner
|
||||
out.push([it[0], +x.toFixed(1), +yp.toFixed(1), +size.toFixed(1), Math.round(gauss() * 70), behind ? 'b' : 'f', it[2], r() < .5 ? 1 : 0]);
|
||||
return;
|
||||
}
|
||||
});
|
||||
return out;
|
||||
}
|
||||
var mobileBits = window.matchMedia('(max-width: 820px)').matches;
|
||||
var bitScale = mobileBits ? 1.35 : 1;
|
||||
var blasts = $$('[data-blast]').map(function (box) {
|
||||
var set = PRESETS[box.getAttribute('data-blast')];
|
||||
if (!set) return null;
|
||||
var spec = SCATTER[box.getAttribute('data-blast')];
|
||||
if (!spec) return null;
|
||||
// Array = von Hand gesetzte Komposition, Objekt = berechnete Streuung
|
||||
var set = Array.isArray(spec) ? spec : scatter(spec);
|
||||
var lazy = box.getAttribute('data-blast-mode') !== 'hero';
|
||||
var holder = document.createElement('span');
|
||||
holder.className = 'blast__bits';
|
||||
@@ -221,7 +319,8 @@
|
||||
if (mobileBits && !b[6]) return;
|
||||
// Verschachtelt, damit sich nichts in die Quere kommt:
|
||||
// .bit (Scroll-Explosion) > .bit__c (CSS-Zentrierung) > .bit__in (Intro) > .bit__fl (Schweben) > img (feste Drehung)
|
||||
var size = b[3] * bitScale;
|
||||
// Hero: Handy etwas weniger vergrößert (1,2 statt 1,35), damit die Fontäne den Burger nur berührt und nicht überdeckt
|
||||
var size = b[3] * (mobileBits && !lazy ? 1.2 : bitScale);
|
||||
var el = document.createElement('span');
|
||||
el.className = 'bit bit--' + b[5];
|
||||
el.style.left = b[1] + '%'; el.style.top = b[2] + '%'; el.style.width = size + '%';
|
||||
@@ -244,7 +343,7 @@
|
||||
bits.push({ el: el, inner: inner, fl: fl, x: b[1], y: b[2], layer: b[5] });
|
||||
});
|
||||
box.appendChild(holder);
|
||||
return { box: box, bits: bits, hero: !lazy };
|
||||
return { box: box, bits: bits, hero: !lazy, fly: spec.fly || 1 };
|
||||
}).filter(Boolean);
|
||||
|
||||
/* ---------- Flammen nur animieren, solange sie sichtbar sind ---------- */
|
||||
@@ -293,43 +392,53 @@
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------- Route (Take away) ---------- */
|
||||
var route = $('[data-route]');
|
||||
/* ---------- Lieferweg (Take away): vom Pin die Merkurstraße entlang, dann zum Zuhause ---------- */
|
||||
// Merkurstraße ab dem Restaurant nach Westen, in % der Karte (aus OpenStreetMap, siehe map-kaiserslautern.svg)
|
||||
var STREET = [[40, 62.04], [39.64, 60.93], [35.86, 62.41], [32.14, 63.33], [24.29, 65.37], [18.79, 66.85], [10.07, 68.98]];
|
||||
var route = $('[data-delivery]');
|
||||
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) };
|
||||
var map = $('.tmap', route), svg = $('.troute', route);
|
||||
var home = $('.tspot--home', route);
|
||||
if (!map || window.getComputedStyle(map).display === 'none') return null;
|
||||
var mx = map.offsetLeft, my = map.offsetTop, mw = map.offsetWidth, mh = map.offsetHeight;
|
||||
var pts = STREET.map(function (p) { return [mx + p[0] / 100 * mw, my + p[1] / 100 * mh]; });
|
||||
// Ziel: Oberkante des Zuhause-Symbols; die Liefer-Karte sitzt rechts daneben, der Weg kommt von oben
|
||||
var end = [home.offsetLeft, home.offsetTop - 46], last = pts[pts.length - 1];
|
||||
var d = 'M' + pts.map(function (p) { return p[0].toFixed(1) + ' ' + p[1].toFixed(1); }).join(' L');
|
||||
// Bogen nach links über der Liefer-Karte, dann von oben auf das Zuhause
|
||||
var card = $('.tcard', home), cardTop = home.offsetTop + card.offsetTop;
|
||||
var c1y = Math.min(last[1] + 20, cardTop - 60);
|
||||
d += ' C' + (last[0] - (last[0] - end[0]) * .5).toFixed(1) + ' ' + c1y.toFixed(1) + ' ' +
|
||||
end[0].toFixed(1) + ' ' + Math.min(c1y, end[1] - 120).toFixed(1) + ' ' + end[0].toFixed(1) + ' ' + end[1].toFixed(1);
|
||||
$$('path', svg).forEach(function (p) { p.setAttribute('d', d); });
|
||||
var line = $('.troute__line', svg), reveal = $('.troute__reveal', svg);
|
||||
var len = line.getTotalLength();
|
||||
reveal.style.strokeDasharray = len + ' ' + len;
|
||||
return { path: line, reveal: reveal, len: len, rider: $('.troute__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));
|
||||
routeState.reveal.style.strokeDashoffset = routeState.len * (1 - progress);
|
||||
var at = Math.max(.02, Math.min(.98, progress));
|
||||
var pt = routeState.path.getPointAtLength(routeState.len * at);
|
||||
var ahead = routeState.path.getPointAtLength(Math.min(routeState.len, routeState.len * at + 4));
|
||||
var angle = Math.atan2(ahead.y - pt.y, ahead.x - pt.x) * 180 / Math.PI;
|
||||
if (angle < 0) angle += 360; // nach links = 180°, ohne Sprung bei ±180°
|
||||
var tilt = Math.max(-25, Math.min(25, (angle - 180) * -.25));
|
||||
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)';
|
||||
// Hahn schaut in Fahrtrichtung (nach links), am Start und kurz vor dem Ziel blendet er weich ein und aus
|
||||
routeState.rider.style.transform = 'translate(' + (pt.x - w / 2) + 'px,' + (pt.y - h * .85) + 'px) scaleX(-1) rotate(' + tilt + 'deg)';
|
||||
routeState.rider.style.opacity = Math.max(0, Math.min(1, (progress - .03) / .06, (.94 - progress) / .06));
|
||||
routeState.rider.style.visibility = 'visible';
|
||||
}
|
||||
|
||||
/* ---------- Ohne GSAP: fertig ---------- */
|
||||
if (!hasGsap) {
|
||||
routeState = buildRoute();
|
||||
placeRider(1);
|
||||
var rebuildStatic = function () { routeState = buildRoute(); placeRider(1); if (routeState) routeState.rider.style.visibility = 'hidden'; };
|
||||
rebuildStatic();
|
||||
var rt; window.addEventListener('resize', function () { clearTimeout(rt); rt = setTimeout(rebuildStatic, 250); });
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -364,8 +473,9 @@
|
||||
}
|
||||
|
||||
if (reduce) {
|
||||
routeState = buildRoute();
|
||||
placeRider(1);
|
||||
var rebuildStatic = function () { routeState = buildRoute(); placeRider(1); if (routeState) routeState.rider.style.visibility = 'hidden'; };
|
||||
rebuildStatic();
|
||||
var rt; window.addEventListener('resize', function () { clearTimeout(rt); rt = setTimeout(rebuildStatic, 250); });
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -402,7 +512,8 @@
|
||||
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 } });
|
||||
// CSS zentriert mit translate(-50%, -50%), GSAP liest das als yPercent -50: also -62 = 12 % nach oben
|
||||
gsap.to('.hero__burger', { yPercent: -62, ease: 'none', scrollTrigger: { trigger: hero, start: 'top top', end: 'bottom top', scrub: true } });
|
||||
});
|
||||
}
|
||||
|
||||
@@ -453,6 +564,7 @@
|
||||
};
|
||||
// Explosionsziel: kräftig nach außen, mit Drall zur Seite und nach oben
|
||||
var away = function (b, k) {
|
||||
k *= bl.fly;
|
||||
var v = vec(b), len = Math.sqrt(v.x * v.x + v.y * v.y) || 1;
|
||||
var side = b.side;
|
||||
return {
|
||||
@@ -460,17 +572,35 @@
|
||||
y: v.y * .3 + (v.y / len) * W() * k * .55 - W() * .45 * k
|
||||
};
|
||||
};
|
||||
// Hero = Fontäne: Der Burger wurde von unten getroffen. Alles schießt aus der Burger-Mitte nach oben,
|
||||
// fächert zur Seite auf (Spin dreht nach außen) und die Scroll-Explosion setzt diese Bewegung fort.
|
||||
var FX = .39, FY = .45; // Ausbruchspunkt in Box-Anteilen (Mitte des Burgers)
|
||||
var spread = function (b) { // Abstand Ausbruchspunkt -> Endposition in px
|
||||
return { x: (b.x / 100 - FX) * W(), y: (b.y / 100 - FY) * bl.box.offsetHeight };
|
||||
};
|
||||
var launch = function (b, k) { // Scroll-Ziel: weiter nach oben + nach außen fächern
|
||||
var d = spread(b), sp = b.layer === 'n' ? 1.5 : b.layer === 'b' ? .7 : 1;
|
||||
return { x: d.x * 1.1 * sp * k, y: -(W() * .55 + Math.max(0, -d.y) * .4) * sp * k };
|
||||
};
|
||||
var floats = [];
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
bl.bits.forEach(function (b, i) {
|
||||
b.side = i % 2 ? 1 : -1;
|
||||
b.side = bl.hero ? (b.x < FX * 100 ? -1 : 1) : (i % 2 ? 1 : -1);
|
||||
floats.push(gsap.to(b.fl, { y: '+=' + rand(-16, -8), rotation: '+=' + rand(-8, 8), duration: rand(1.8, 3.2), yoyo: true, repeat: -1, ease: 'sine.inOut', delay: rand(0, 1.5), paused: true }));
|
||||
var spin = rand(160, 340) * b.side;
|
||||
var grow = b.layer === 'b' ? 1.15 : 1.9;
|
||||
var spin = (bl.hero ? rand(70, 210) : rand(160, 340)) * b.side;
|
||||
var grow = b.layer === 'b' ? 1.15 : b.layer === 'n' ? 2.6 : bl.hero ? 1.6 : 1.9;
|
||||
if (bl.hero) {
|
||||
gsap.from(b.inner, { x: function () { return -vec(b).x; }, y: function () { return -vec(b).y; }, scale: .2, opacity: 0, rotation: -spin / 3, duration: 1.2, ease: 'back.out(1.3)', delay: .55 + i * .035 });
|
||||
tl.to(b.el, { x: function () { return away(b, 1).x; }, y: function () { return away(b, 1).y; }, rotation: spin, scale: grow, duration: 1, ease: 'power2.in' }, 0)
|
||||
.to(b.el, { opacity: 0, duration: .25, ease: 'none' }, .75);
|
||||
// Intro: aus der Burger-Mitte nach oben; x gleitet, y schießt über das Ziel hinaus und fällt zurück
|
||||
var dist = Math.sqrt(Math.pow(b.x / 100 - FX, 2) + Math.pow((b.y / 100 - FY) * .72, 2));
|
||||
var t0 = .5 + (i % 5) * .03, dur = .95 + dist * .8;
|
||||
gsap.from(b.inner, { x: function () { return -spread(b).x; }, duration: dur, ease: 'power3.out', delay: t0 });
|
||||
gsap.from(b.inner, { y: function () { return -spread(b).y; }, duration: dur + .35, ease: 'back.out(2.1)', delay: t0 });
|
||||
gsap.from(b.inner, { scale: .2, opacity: 0, rotation: -spin / 2, duration: dur, ease: 'back.out(1.4)', delay: t0 });
|
||||
// Scroll: Position schießt zuerst schnell hoch und läuft dann aus (Fontäne), Spin/Größe wachsen gleichmäßig mit
|
||||
var st = b.layer === 'n' ? 0 : b.layer === 'f' ? .04 + (i % 4) * .02 : .12;
|
||||
tl.to(b.el, { x: function () { return launch(b, 1).x; }, y: function () { return launch(b, 1).y; }, duration: 1 - st, ease: 'power1.out' }, st)
|
||||
.to(b.el, { rotation: spin, scale: grow, duration: 1 - st, ease: 'none' }, st)
|
||||
.to(b.el, { opacity: 0, duration: .3, ease: 'none' }, .6);
|
||||
} else {
|
||||
tl.fromTo(b.el, { x: function () { return -vec(b).x * .6; }, y: function () { return -vec(b).y * .6; }, scale: .4, opacity: 0, rotation: -spin / 3 },
|
||||
{ x: 0, y: 0, scale: 1, opacity: 1, rotation: 0, duration: .4, ease: 'power2.out' }, 0)
|
||||
|
||||
@@ -113,6 +113,7 @@
|
||||
<li>Gurke: Sir Beluga, <a href="https://commons.wikimedia.org/wiki/File:Sliced-pickle.jpg" target="_blank" rel="noopener">„Sliced-pickle“</a>, CC0; Panade-Stücke: Evan-Amos, <a href="https://commons.wikimedia.org/wiki/File:Fried-Chicken-Set.jpg" target="_blank" rel="noopener">„Fried-Chicken-Set“</a>, CC0</li>
|
||||
</ul>
|
||||
<p>Die bearbeiteten Zutaten-Bilder stehen unter derselben Lizenz wie das jeweilige Original.</p>
|
||||
<p>Kartengrafik auf der Startseite: eigene Darstellung auf Basis von Kartendaten © <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap-Mitwirkende</a>, verfügbar unter der Open Database License (ODbL).</p>
|
||||
|
||||
<h2>Website</h2>
|
||||
<p>Konzept, Gestaltung und Umsetzung: <a href="https://webklar.com" target="_blank" rel="noopener">WEBklar</a></p>
|
||||
|
||||
+35
-30
@@ -274,6 +274,7 @@
|
||||
|
||||
<div class="fight-card-row">
|
||||
<article class="fight-card paper" data-reveal data-tilt>
|
||||
<span class="fight-card__rays" aria-hidden="true"></span>
|
||||
<span class="fight-card__class">Mittelgewicht</span>
|
||||
<h3>Bucket</h3>
|
||||
<ul>
|
||||
@@ -281,11 +282,12 @@
|
||||
</ul>
|
||||
<div class="fight-card__foot">
|
||||
<span class="price">42,00 €</span>
|
||||
<img src="assets/img/cut-chicken-wings.webp" width="891" height="631" loading="lazy" alt="">
|
||||
<img class="shot" src="assets/img/menu/bucket.webp" width="902" height="815" loading="lazy" alt="">
|
||||
</div>
|
||||
</article>
|
||||
<span class="vs" aria-hidden="true" data-sticker>VS</span>
|
||||
<article class="fight-card paper" data-reveal data-tilt>
|
||||
<span class="fight-card__rays" aria-hidden="true"></span>
|
||||
<span class="fight-card__class">Schwergewicht</span>
|
||||
<h3>Party Bucket</h3>
|
||||
<ul>
|
||||
@@ -293,55 +295,58 @@
|
||||
</ul>
|
||||
<div class="fight-card__foot">
|
||||
<span class="price">68,00 €</span>
|
||||
<img src="assets/img/cut-chicken-wings.webp" width="891" height="631" loading="lazy" alt="">
|
||||
<img class="shot" src="assets/img/menu/party-bucket.webp" width="916" height="738" 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>
|
||||
<div class="torn torn--in" aria-hidden="true" style="color: var(--yellow)"></div>
|
||||
</section>
|
||||
|
||||
<!-- ============ TAKE AWAY ============ -->
|
||||
<section class="section bg-yellow takeaway" id="bestellen" aria-labelledby="takeaway-title">
|
||||
<div class="torn" aria-hidden="true"></div>
|
||||
<div class="fx" aria-hidden="true"><div class="fx__spot"></div><div class="takeaway__burst"></div><div class="fx__dots"></div><div class="fx__mottle"></div><div class="fx__grain"></div></div>
|
||||
<div class="fx" aria-hidden="true"><div class="fx__spot"></div><div class="fx__dots"></div><div class="fx__mottle"></div><div class="fx__grain"></div></div>
|
||||
<div class="wrap">
|
||||
<span class="kicker kicker--ink" data-reveal>Take away</span>
|
||||
<h2 class="display h2 stroke x3d" 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>
|
||||
<h2 class="display h2 h2--sm stroke x3d" id="takeaway-title" data-pop>Hol’s dir. Oder lass kommen.</h2>
|
||||
<p class="takeaway__lead lead" data-reveal>Zwei Wege zu deinem Chicken: vorbeikommen in der Merkurstraße 13 – oder liefern lassen, direkt bis vor deine Tür.</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 paper" data-reveal>
|
||||
<div class="stop__num">01</div>
|
||||
<h3>Vor Ort essen</h3>
|
||||
<p>Restaurant & Bar mit Plätzen drinnen und draußen. Einfach vorbeikommen – mit größerer Gruppe am besten vorher anrufen.</p>
|
||||
<div class="stop__links">
|
||||
<div class="tstage" data-delivery>
|
||||
<div class="tmap" aria-hidden="true">
|
||||
<img class="tmap__img" src="assets/img/map-kaiserslautern.svg" width="1400" height="1080" alt="" loading="lazy" decoding="async">
|
||||
</div>
|
||||
<svg class="troute" aria-hidden="true"><defs><mask id="troute-mask" maskUnits="userSpaceOnUse"><path class="troute__reveal"/></mask></defs><g mask="url(#troute-mask)"><path class="troute__glow"/><path class="troute__line"/></g></svg>
|
||||
<img class="troute__rider die-cut" src="assets/img/rooster.svg" alt="" aria-hidden="true" width="179" height="264">
|
||||
<div class="tspot tspot--shop">
|
||||
<div class="tspot__minimap" aria-hidden="true"><img src="assets/img/map-kaiserslautern.svg" width="1400" height="1080" alt="" loading="lazy" decoding="async"></div>
|
||||
<span class="tpin" aria-hidden="true" data-route-start><span class="tpin__head"><img src="assets/img/rooster.svg" alt="" width="179" height="264"></span><span class="tpin__dot"></span></span>
|
||||
<article class="tcard paper" data-reveal>
|
||||
<span class="tcard__kicker"><svg aria-hidden="true"><use href="#i-pin"/></svg>Merkurstraße 13 · 12–22 Uhr</span>
|
||||
<h3>Vor Ort essen oder abholen</h3>
|
||||
<p>Restaurant & Bar mit Plätzen drinnen und draußen. Oder telefonisch bestellen und heiß mitnehmen.</p>
|
||||
<div class="tcard__links">
|
||||
<a class="is-primary" href="https://www.google.com/maps/dir/?api=1&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 paper" 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 paper" 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">
|
||||
</div>
|
||||
<div class="tspot tspot--home">
|
||||
<span class="tapp" aria-hidden="true" data-route-end>
|
||||
<span class="tapp__icon"><svg viewBox="0 0 24 24"><path d="M3.5 11.2 12 4l8.5 7.2V20a1 1 0 0 1-1 1h-5v-6h-5v6h-5a1 1 0 0 1-1-1v-8.8Z" fill="currentColor"/></svg></span>
|
||||
<span class="tapp__label">Zuhause</span>
|
||||
</span>
|
||||
<article class="tcard paper" data-reveal>
|
||||
<span class="tcard__kicker"><svg aria-hidden="true"><use href="#i-bag"/></svg>Lass kommen</span>
|
||||
<h3>Nach Hause liefern</h3>
|
||||
<p>Keine Lust rauszugehen? Bestell bequem über Lieferando oder Uber Eats.</p>
|
||||
<div class="tcard__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>
|
||||
<a class="tmap__credit" href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">Kartendaten © OpenStreetMap-Mitwirkende</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -362,7 +367,7 @@
|
||||
<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 blast" data-reveal data-blast="burger">
|
||||
<div class="visit__deco blast" data-reveal data-blast="burger-visit">
|
||||
<img class="blast__food" src="assets/img/menu/steakhouse-burger.webp" width="834" height="526" loading="lazy" alt="Steakhouse Burger mit Pepper-Jack-Käse, Bacon und karamellisierten Zwiebeln">
|
||||
<span class="sticker sticker--ink" data-sticker>Bar &<br>Restaurant</span>
|
||||
</div>
|
||||
|
||||
+141
-52
@@ -80,7 +80,7 @@
|
||||
<h1 class="display x3d" 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 blast" data-blast="burger" data-blast-mode="hero"><span class="hero__glow" aria-hidden="true"></span><img class="shot blast__food" src="assets/img/menu/steakhouse-burger.webp" width="834" height="526" alt="Steakhouse Burger mit Pepper-Jack-Käse und Bacon"></div>
|
||||
<div class="page-hero__img blast" data-blast="burger-page" data-blast-mode="hero"><span class="hero__glow" aria-hidden="true"></span><img class="shot blast__food" src="assets/img/menu/steakhouse-burger.webp" width="834" height="526" alt="Steakhouse Burger mit Pepper-Jack-Käse und Bacon"></div>
|
||||
<span class="sticker sticker--ink page-hero__st" data-sticker>Mild oder<br>scharf?</span>
|
||||
<div class="flames flames--in" aria-hidden="true" style="--flame-front: var(--cream)"><i></i><i></i><i></i></div>
|
||||
</section>
|
||||
@@ -107,7 +107,7 @@
|
||||
<h2 class="display x3d" 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 dish-grid--4">
|
||||
<div class="dish-grid">
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Chicken Wings</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/chicken-wings.webp" width="916" height="366" loading="lazy" alt="Zehn knusprige Chicken Wings"></div>
|
||||
@@ -138,18 +138,30 @@
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/crispy-chicken-tenders-5-stueck.webp" width="911" height="378" loading="lazy" alt="Fünf knusprig panierte Crispy-Chicken Tenders"></div>
|
||||
<div class="dish__body"><p>Knusprig panierte Hähnchenfilets.</p><div class="variants"><span>5 Stück · 9,50 €</span><span>10 Stück · 17,00 €</span></div></div>
|
||||
</article>
|
||||
<article class="dish dish--special dish--promo" data-reveal>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Buffalo Red Hot Tenders</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/buffalo-red-hot-tenders.webp" width="916" height="534" loading="lazy" alt="Buffalo Red Hot Tenders in der Steingutschale"></div>
|
||||
<div class="dish__body"><p>5 Stück, in Buffalo-Red-Hot-Sauce.</p><span class="price">11,50 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Chipotle Honey BBQ Tenders</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/chipotle-honey-bbq-tenders.webp" width="913" height="567" loading="lazy" alt="Chipotle Honey BBQ Tenders in der Steingutschale"></div>
|
||||
<div class="dish__body"><p>5 Stück, in Chipotle-Honey-BBQ-Sauce.</p><span class="price">11,50 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Teriyaki Tenders</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/teriyaki-tenders.webp" width="916" height="555" loading="lazy" alt="Teriyaki Tenders in der Steingutschale"></div>
|
||||
<div class="dish__body"><p>5 Stück, in Teriyaki-Sauce.</p><span class="price">11,50 €</span></div>
|
||||
</article>
|
||||
<article class="dish dish--special dish--promo dish--wide" data-reveal data-tilt>
|
||||
<span class="dish__kicker">Für die ganze Crew</span>
|
||||
<h3 class="dish__name"><span class="dish__script dish__script--the" aria-hidden="true">The</span> 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>
|
||||
<div class="promo-duo">
|
||||
<div class="promo-item"><img class="shot" src="assets/img/menu/bucket.webp" width="902" height="815" loading="lazy" alt="Bucket mit Wings, Filets, zwei Portionen Pommes, Coleslaw und Cola"><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>
|
||||
<div class="promo-item"><img class="shot" src="assets/img/menu/party-bucket.webp" width="916" height="738" loading="lazy" alt="Party Bucket mit Wings, Filets, vier Portionen Pommes und Cola"><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></div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="dish-list">
|
||||
<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 -->
|
||||
@@ -158,21 +170,29 @@
|
||||
<h2 class="display x3d" 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">
|
||||
<div class="dish-grid dish-grid--4">
|
||||
<article class="dish dish--special" data-reveal data-tilt>
|
||||
<h3 class="dish__name"><span class="dish__script dish__script--long">Chicken Home Style</span> Honey Mustard Bacon</h3>
|
||||
<div class="dish__media"><span class="sticker dish__badge">Beliebt</span><img class="shot" src="assets/img/menu/chicken-home-style-honey-mustard-bacon.webp" width="874" height="637" loading="lazy" alt="Chicken Burger Home Style mit Honey Mustard und Bacon"></div>
|
||||
<div class="dish__body"><p>Cheddar, Bacon, Tomaten, Zwiebeln, Salat, Honey-Mustard-Soße.</p><span class="price">12,50 €</span></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>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Teriyaki Chicken Burger</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/teriyaki-chicken-burger.webp" width="865" height="558" loading="lazy" alt="Teriyaki Chicken Burger mit Cheddar, Tomate und Salat"></div>
|
||||
<div class="dish__body"><p>Cheddar, Tomaten, Salat, Teriyaki-Soße.</p><span class="price">12,50 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Chicken Burger BBQ</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/chicken-burger-bbq.webp" width="807" height="525" loading="lazy" alt="Chicken Burger mit Barbecuesauce"></div>
|
||||
<div class="dish__body"><p>Mit Barbecuesauce.</p><span class="price">12,50 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Chicken Burger</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/chicken-burger.webp" width="824" height="589" loading="lazy" alt="Chicken Burger mit hausgemachter Sauce"></div>
|
||||
<div class="dish__body"><p>Mit hausgemachter Sauce.</p><span class="price">12,50 €</span></div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="menu-extra"><span>Extra Hähnchen-Patty +3,00 €</span></div>
|
||||
</section>
|
||||
|
||||
<!-- BEEF BURGER -->
|
||||
@@ -182,7 +202,7 @@
|
||||
<h2 class="display x3d" 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">
|
||||
<div class="dish-grid">
|
||||
<article class="dish dish--special" data-reveal data-tilt>
|
||||
<h3 class="dish__name"><span class="dish__script dish__script--the" aria-hidden="true">The</span> US Burger</h3>
|
||||
<div class="dish__media"><span class="sticker dish__badge">Beliebt</span><img class="shot" src="assets/img/menu/us-burger.webp" width="853" height="616" loading="lazy" alt="US Burger mit Ei und Bacon"></div>
|
||||
@@ -195,7 +215,7 @@
|
||||
</article>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Cheese Burger</h3>
|
||||
<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__media"><span class="sticker dish__badge">Beliebt</span><img class="shot" src="assets/img/menu/cheese-burger.webp" width="895" height="602" loading="lazy" alt="Cheese Burger mit Cheddar und karamellisierten Zwiebeln"></div>
|
||||
<div class="dish__body"><p>Cheddar, karamellisierte Zwiebeln, Ketchup, Mayonnaise.</p><span class="price">12,50 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
@@ -203,13 +223,31 @@
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/hamburger.webp" width="824" height="499" loading="lazy" alt="Hamburger"></div>
|
||||
<div class="dish__body"><p>Karamellisierte Zwiebeln, Ketchup, Mayonnaise.</p><span class="price">11,50 €</span></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>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Teriyaki Burger</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/teriyaki-burger.webp" width="817" height="624" loading="lazy" alt="Teriyaki Burger mit Pepper-Jack-Käse und Bacon"></div>
|
||||
<div class="dish__body"><p>Pepper-Jack-Käse, Bacon, karamellisierte Zwiebeln, Teriyaki-Soße.</p><span class="price">12,50 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Mexico Burger</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/mexico-burger.webp" width="828" height="520" loading="lazy" alt="Mexico Burger mit Jalapeños und Avocado-Soße"></div>
|
||||
<div class="dish__body"><p>Pepper-Jack-Käse, Jalapeños, hausgemachte Avocado-Soße.</p><span class="price">12,50 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Mushroom Burger</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/mushroom-burger.webp" width="890" height="639" loading="lazy" alt="Mushroom Burger mit Champignons und Cheddar"></div>
|
||||
<div class="dish__body"><p>Champignons, hausgemachte Sauce, Cheddar, karamellisierte Zwiebeln.</p><span class="price">12,50 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Chili Cheese Burger</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/chili-cheese-burger.webp" width="855" height="529" loading="lazy" alt="Chili Cheese Burger mit Jalapeños und Chili-Cheese-Soße"></div>
|
||||
<div class="dish__body"><p>Cheddar, Jalapeños, Chili-Cheese-Soße.</p><span class="price">12,50 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Veggie Burger</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/veggie-burger.webp" width="879" height="617" loading="lazy" alt="Veggie Burger mit vegetarischem Patty"></div>
|
||||
<div class="dish__body"><p>Vegetarisches Patty statt Rindfleisch, hausgemachte Sauce.</p><span class="price">10,50 €</span></div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="menu-extra"><span>Extra-Patty +3,00 €</span><span>Vegetarisches Extra-Patty +3,00 €</span></div>
|
||||
</section>
|
||||
@@ -220,11 +258,27 @@
|
||||
<h2 class="display x3d" 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 class="dish-grid dish-grid--4">
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Menü Tenders 5 Stück</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/menue-crispy-chicken-tenders-5-stueck.webp" width="906" height="550" loading="lazy" alt="Menü mit fünf Crispy-Chicken Tenders, Pommes und Coleslaw"></div>
|
||||
<div class="dish__body"><p>Crispy-Chicken-Filets, Pommes, Coleslaw.</p><span class="price">14,45 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Menü Tenders 10 Stück</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/menue-crispy-chicken-tenders-10-stueck.webp" width="916" height="557" loading="lazy" alt="Menü mit zehn Crispy-Chicken Tenders, Pommes und Coleslaw"></div>
|
||||
<div class="dish__body"><p>Crispy-Chicken-Filets, Pommes, Coleslaw.</p><span class="price">21,95 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Menü Wings 6 Stück</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/menue-chicken-wings-6-stueck.webp" width="916" height="583" loading="lazy" alt="Menü mit sechs Chicken Wings, Pommes und Coleslaw"></div>
|
||||
<div class="dish__body"><p>Chicken Wings, Pommes, Coleslaw.</p><span class="price">13,45 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Menü Wings 10 Stück</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/menue-chicken-wings-10-stueck.webp" width="915" height="568" loading="lazy" alt="Menü mit zehn Chicken Wings, Pommes und Coleslaw"></div>
|
||||
<div class="dish__body"><p>Chicken Wings, Pommes, Coleslaw.</p><span class="price">15,95 €</span></div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -232,17 +286,24 @@
|
||||
<section class="menu-cat" id="wraps" aria-labelledby="h-wraps">
|
||||
<div class="menu-cat__head">
|
||||
<h2 class="display x3d" id="h-wraps" data-pop>Wraps</h2>
|
||||
<p>In der Weizen-Tortilla, mit knusprigem Crispy-Filet.</p>
|
||||
<p>In der Weizen-Tortilla – knusprig mit Crispy-Filet oder kalt mit Taco-Rindfleisch.</p>
|
||||
</div>
|
||||
<div class="cat-split">
|
||||
<div class="dish-grid">
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Chicken Wrap Chickago-Boys</h3>
|
||||
<div class="dish__media"><span class="sticker dish__badge">Beliebt</span><img class="shot" src="assets/img/menu/chicken-wrap-chickago-boys.webp" width="812" height="546" loading="lazy" alt="Chicken Wrap Chickago-Boys, aufgeschnitten"></div>
|
||||
<div class="dish__body"><p>2 knusprige Crispy-Filets, Cheddar, Tomaten, Salat, hausgemachte Sauce.</p><span class="price">9,50 €</span></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>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Caesar Wrap</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/caesar-wrap.webp" width="832" height="515" loading="lazy" alt="Caesar Wrap mit Crispy-Filet, Hartkäse und Croutons, aufgeschnitten"></div>
|
||||
<div class="dish__body"><p>Knuspriges Crispy-Filet, würziger Hartkäse, Croutons, Tomaten, Salat, Caesar-Soße.</p><span class="price">9,50 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Supreme Wrap</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/supreme-wrap.webp" width="829" height="565" loading="lazy" alt="Supreme Wrap mit Taco-Rindfleisch, Guacamole und Sour Cream, aufgeschnitten"></div>
|
||||
<div class="dish__body"><p>Kalt serviert: Taco-Rindfleisch, Tomaten, Salat, Gouda, Koriander, Guacamole, Sour Cream.</p><span class="price">13,00 €</span></div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -252,10 +313,22 @@
|
||||
<h2 class="display x3d" 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 class="dish-grid">
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Caesar Chicken Salat</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/caesar-chicken-salat.webp" width="916" height="687" loading="lazy" alt="Caesar Chicken Salat mit Hähnchenbrust, Croutons und Caesar-Dressing"></div>
|
||||
<div class="dish__body"><p>Käse, Croutons, Hähnchenbrustfilet.</p><span class="price">10,50 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Fitness Salat</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/fitness-salat.webp" width="916" height="611" loading="lazy" alt="Fitness Salat mit Hähnchenbrust, Oliven und Mais"></div>
|
||||
<div class="dish__body"><p>Hähnchenbrustfilet, Oliven, Mais, Gurken, Tomaten, Blattsalat.</p><span class="price">11,50 €</span></div>
|
||||
</article>
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">Gemischter Salat</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/gemischter-salat.webp" width="916" height="686" loading="lazy" alt="Gemischter Salat mit Tomaten, Gurken und Mais"></div>
|
||||
<div class="dish__body"><p>Blattsalat, Tomaten, Gurken, Mais.</p><span class="price">7,50 €</span></div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -311,8 +384,18 @@
|
||||
<h2 class="display x3d" id="h-saucen" data-pop>Saucen & 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 class="dip-grid" data-reveal>
|
||||
<div class="dip"><img class="shot" src="assets/img/menu/ranch.webp" width="860" height="576" loading="lazy" alt="Ranch im Dip-Schälchen"><h3>Ranch</h3><b>1,50 €</b></div>
|
||||
<div class="dip"><img class="shot" src="assets/img/menu/curry-mango.webp" width="835" height="554" loading="lazy" alt="Curry Mango im Dip-Schälchen"><h3>Curry Mango</h3><b>1,50 €</b></div>
|
||||
<div class="dip"><img class="shot" src="assets/img/menu/barbecuesauce.webp" width="836" height="507" loading="lazy" alt="Barbecuesauce im Dip-Schälchen"><h3>Barbecue­sauce</h3><b>1,50 €</b></div>
|
||||
<div class="dip"><img class="shot" src="assets/img/menu/sweet-chilisauce.webp" width="862" height="647" loading="lazy" alt="Sweet-Chilisauce im Dip-Schälchen"><h3>Sweet-Chili­sauce</h3><b>1,50 €</b></div>
|
||||
<div class="dip"><img class="shot" src="assets/img/menu/cheddarsauce.webp" width="862" height="572" loading="lazy" alt="Cheddarsauce im Dip-Schälchen"><h3>Cheddar­sauce</h3><b>1,50 €</b></div>
|
||||
<div class="dip"><img class="shot" src="assets/img/menu/chili-cheesesauce.webp" width="868" height="670" loading="lazy" alt="Chili-Cheesesauce im Dip-Schälchen"><h3>Chili-Cheese­sauce</h3><b>1,50 €</b></div>
|
||||
<div class="dip"><img class="shot" src="assets/img/menu/suess-sauer-sauce.webp" width="824" height="512" loading="lazy" alt="Süß-Sauer-Sauce im Dip-Schälchen"><h3>Süß-Sauer-Sauce</h3><b>1,50 €</b></div>
|
||||
<div class="dip"><img class="shot" src="assets/img/menu/caesar-dressing.webp" width="856" height="618" loading="lazy" alt="Caesar Dressing im Dip-Schälchen"><h3>Caesar Dressing</h3><b>1,50 €</b></div>
|
||||
<div class="dip"><img class="shot" src="assets/img/menu/balsamico-dressing.webp" width="749" height="568" loading="lazy" alt="Balsamico Dressing im Dip-Schälchen"><h3>Balsamico Dressing</h3><b>1,50 €</b></div>
|
||||
<div class="dip"><img class="shot" src="assets/img/menu/ketchup.webp" width="831" height="563" loading="lazy" alt="Ketchup im Dip-Schälchen"><h3>Ketchup</h3><b>1,00 €</b></div>
|
||||
<div class="dip"><img class="shot" src="assets/img/menu/mayonnaise.webp" width="769" height="524" loading="lazy" alt="Mayonnaise im Dip-Schälchen"><h3>Mayonnaise</h3><b>1,00 €</b></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -323,15 +406,17 @@
|
||||
<h2 class="display x3d" 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="dip-grid dip-grid--drinks" data-reveal>
|
||||
<div class="dip"><img class="shot" src="assets/img/menu/coca-cola.webp" width="610" height="799" loading="lazy" alt="Coca-Cola 1,0 l"><h3>Coca‑Cola</h3><span>1,0 l</span><b>4,70 €</b></div>
|
||||
<div class="dip"><img class="shot" src="assets/img/menu/coca-cola-zero.webp" width="267" height="863" loading="lazy" alt="Coca-Cola Zero 1,0 l"><h3>Coca‑Cola Zero</h3><span>1,0 l</span><b>4,70 €</b></div>
|
||||
<div class="dip"><img class="shot" src="assets/img/menu/fanta-orange.webp" width="528" height="793" loading="lazy" alt="Fanta Orange 1,0 l"><h3>Fanta Orange</h3><span>1,0 l</span><b>4,70 €</b></div>
|
||||
<div class="dip"><img class="shot" src="assets/img/menu/mezzo-mix.webp" width="433" height="780" loading="lazy" alt="Mezzo Mix 1,0 l"><h3>Mezzo Mix</h3><span>1,0 l</span><b>4,70 €</b></div>
|
||||
<div class="dip"><img class="shot" src="assets/img/menu/sprite.webp" width="408" height="735" loading="lazy" alt="Sprite 1,0 l"><h3>Sprite</h3><span>1,0 l</span><b>4,70 €</b></div>
|
||||
<div class="dip"><img class="shot" src="assets/img/menu/red-bull.webp" width="547" height="693" loading="lazy" alt="Red Bull 0,25 l"><h3>Red Bull</h3><span>0,25 l</span><b>3,50 €</b></div>
|
||||
</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>
|
||||
|
||||
@@ -341,8 +426,12 @@
|
||||
<h2 class="display x3d" 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 class="dish-grid dish-grid--4">
|
||||
<article class="dish" data-reveal data-tilt>
|
||||
<h3 class="dish__name">New York Cheesecake</h3>
|
||||
<div class="dish__media"><img class="shot" src="assets/img/menu/new-york-cheesecake.webp" width="704" height="438" loading="lazy" alt="Ein Stück New York Cheesecake"></div>
|
||||
<div class="dish__body"><p>Cremiger Käsekuchen.</p><span class="price">5,00 €</span></div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in new issue
Block a user