/* ============================================================
   JiGs Burger – Design-System 3.0
   Vorbild: jigs-food.de (1:1 im Aufbau) – nur cleaner,
   ruhiger und mit deutlich flüssigeren Effekten.
   ============================================================ */

:root {
	--jb-gelb: #F6E96B;
	--jb-gelb-tief: #efdc3f;
	--jb-rot: #EE5D48;
	--jb-rot-tief: #d94b38;
	--jb-schwarz: #111111;
	--jb-text: #1b1b1b;
	--jb-grau: #6b6b6b;
	--jb-hell: #f8f7f3;
	--jb-linie: #e9e7e0;
	--jb-weiss: #ffffff;
	--jb-radius: 22px;
	--jb-schatten: 0 18px 50px rgba(20, 16, 0, .10);
	--jb-schatten-hover: 0 28px 70px rgba(20, 16, 0, .16);
	/* Abstands-Rhythmus: Handy ~60px, Desktop ~100px, fließend */
	--jb-abstand: clamp(60px, 9vw, 104px);
	/* Bewegungs-Kurven: weich & flüssig (expo-out / smooth-out) */
	--jb-ease: cubic-bezier(.16, 1, .3, 1);
	--jb-ease-soft: cubic-bezier(.33, 1, .68, 1);
	--jb-kopfhoehe: 76px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--jb-kopfhoehe) + 16px);
}
body {
	background: var(--jb-weiss);
	color: var(--jb-text);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	line-height: 1.68;
	letter-spacing: -.011em;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--jb-text); text-decoration: none; }

h1, h2, h3, h4 { overflow-wrap: break-word; }
h1, h2 { hyphens: auto; -webkit-hyphens: auto; }
p, li, td { overflow-wrap: break-word; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.035em; line-height: 1.04; color: var(--jb-schwarz); }
h1 { font-size: clamp(2rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.75rem, 4.6vw, 3.4rem); text-transform: uppercase; letter-spacing: -.02em; }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); letter-spacing: -.022em; }
h4 { font-size: 1.02rem; font-weight: 700; }

.jb-gelb { color: #a8912a; } /* dunkleres Gold – auf Weiß lesbar */
.jb-rot { color: var(--jb-rot); }
.jb-mitte { text-align: center; }

/* --- Gepanzerte Sektionen --- */
.jb-sec { padding: var(--jb-abstand) 0; width: 100%; position: relative; }
.jb-wrap {
	max-width: 1200px;
	width: 92%;
	margin-left: auto !important;
	margin-right: auto !important;
}
.jb-schmal { max-width: 780px; }
.jb-sec-hell { background: var(--jb-hell); }
.jb-sec-dunkel { background: var(--jb-schwarz); color: #f2f2f2; }
.jb-sec-dunkel h2, .jb-sec-dunkel h3 { color: #fff; }
.jb-sec-gelb { background: var(--jb-gelb); color: #111; }
.jb-kopf { padding-top: calc(var(--jb-kopfhoehe) + clamp(44px, 7vw, 78px)); padding-bottom: clamp(24px, 4vw, 44px); }

.jb-kicker {
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--jb-rot);
	margin-bottom: .8rem;
}
.jb-lead { color: var(--jb-grau); font-size: clamp(1.05rem, 1.7vw, 1.25rem); max-width: 640px; margin: 1.1rem auto 1.7rem; }
.jb-text { color: var(--jb-grau); margin: .9rem 0 1.5rem; font-size: 1.03rem; }
.jb-sec-dunkel .jb-text, .jb-sec-dunkel .jb-lead { color: #a9a9a9; }
.jb-sec-gelb .jb-text, .jb-sec-gelb .jb-lead { color: #4b431a; }

/* --- Buttons: schwarze Pill wie im Original, weicher Hover --- */
.jb-btn {
	display: inline-block;
	padding: 1rem 2.3rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .02em;
	border: none;
	cursor: pointer;
	font-family: inherit;
	text-align: center;
	position: relative;
	overflow: hidden;
	transform: translateZ(0);
	transition: transform .45s var(--jb-ease), box-shadow .45s var(--jb-ease), background-color .3s var(--jb-ease-soft), color .3s var(--jb-ease-soft);
}
.jb-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	opacity: 0;
	transition: opacity .35s var(--jb-ease-soft);
}
.jb-btn:hover { transform: translateY(-3px); }
.jb-btn:hover::after { opacity: .07; }
.jb-btn:active { transform: translateY(-1px) scale(.985); transition-duration: .12s; }
.jb-btn-dunkel { background: var(--jb-schwarz); color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.14); }
.jb-btn-dunkel:hover { box-shadow: 0 18px 40px rgba(0,0,0,.24); }
.jb-btn-gelb { background: var(--jb-gelb); color: #111; box-shadow: 0 8px 22px rgba(214, 195, 40, .3); }
.jb-btn-gelb:hover { background: var(--jb-gelb-tief); box-shadow: 0 18px 40px rgba(214, 195, 40, .42); }
.jb-btn-rot { background: var(--jb-rot); color: #fff; box-shadow: 0 8px 22px rgba(238, 93, 72, .3); }
.jb-btn-rot:hover { background: var(--jb-rot-tief); box-shadow: 0 18px 40px rgba(238, 93, 72, .4); }
.jb-btn-linie { background: transparent; color: var(--jb-text); border: 1.5px solid #d5d2c8; }
.jb-btn-linie:hover { border-color: var(--jb-schwarz); }
.jb-btn-linie-hell { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.jb-btn-linie-hell:hover { background: #fff; color: #111; }
.jb-btn-hell { background: #fff; color: #111; border: 1px solid #d5d2c8; }
.jb-btn-klein { padding: .7rem 1.5rem; font-size: .86rem; }
@media (max-width: 640px) {
	.jb-btn { width: 100%; }
	.jb-btn-klein { width: auto; }
}

/* --- Header: gelbe Leiste wie im Original, schrumpft beim Scrollen --- */
.jb-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 900;
	background: rgba(246, 233, 107, .96);
	-webkit-backdrop-filter: saturate(170%) blur(14px);
	backdrop-filter: saturate(170%) blur(14px);
	transition: box-shadow .5s var(--jb-ease), background-color .5s var(--jb-ease);
}
.jb-header.jb-fest { box-shadow: 0 6px 30px rgba(0, 0, 0, .10); background: rgba(246, 233, 107, .99); }
.jb-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--jb-kopfhoehe);
	transition: height .5s var(--jb-ease);
}
.jb-header.jb-fest .jb-nav { height: 62px; }
.jb-logo { display: flex; align-items: center; }
.jb-logo-img { max-height: 52px; width: auto; transition: max-height .5s var(--jb-ease), transform .5s var(--jb-ease); }
.jb-header.jb-fest .jb-logo-img { max-height: 42px; }
.jb-logo:hover .jb-logo-img { transform: scale(1.05); }
.jb-logo-txt { font-weight: 800; font-size: 1.2rem; letter-spacing: -.03em; color: var(--jb-schwarz); white-space: nowrap; }
.jb-logo-txt b { color: var(--jb-rot); }
.jb-logo-txt em { font-style: normal; }
.jb-links { display: flex; gap: 1.45rem; align-items: center; }
.jb-links a {
	color: rgba(17, 17, 17, .78);
	font-weight: 600;
	font-size: .85rem;
	white-space: nowrap;
	padding: .3rem 0;
	position: relative;
	transition: color .3s var(--jb-ease-soft);
}
.jb-links a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: #111;
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .45s var(--jb-ease);
}
.jb-links a:hover { color: #111; }
.jb-links a:hover::after, .jb-links a.aktiv::after { transform: scaleX(1); transform-origin: left; }
.jb-links a.aktiv { color: #111; }
.jb-nav-cta {
	background: #111;
	color: #fff !important;
	padding: .58rem 1.25rem !important;
	border-radius: 999px;
	font-weight: 700 !important;
	transition: transform .4s var(--jb-ease), box-shadow .4s var(--jb-ease) !important;
}
.jb-nav-cta::after { display: none !important; }
.jb-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .25); }
.jb-burger { display: none; background: none; border: none; cursor: pointer; width: 44px; height: 44px; z-index: 1001; }
.jb-burger span {
	display: block; width: 24px; height: 2.5px; background: #111; margin: 5px auto; border-radius: 3px;
	transition: transform .45s var(--jb-ease), opacity .3s var(--jb-ease-soft);
}
.jb-burger.offen span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.jb-burger.offen span:nth-child(2) { opacity: 0; }
.jb-burger.offen span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
@media (max-width: 1080px) {
	.jb-burger { display: block; }
	.jb-links {
		position: fixed;
		inset: var(--jb-kopfhoehe) 0 auto 0;
		background: rgba(246, 233, 107, .99);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
		flex-direction: column;
		align-items: flex-start;
		padding: 1.5rem 6% 2.2rem;
		gap: 1.05rem;
		max-height: calc(100vh - var(--jb-kopfhoehe));
		overflow: auto;
		clip-path: inset(0 0 100% 0);
		pointer-events: none;
		transition: clip-path .6s var(--jb-ease);
	}
	.jb-links.offen { clip-path: inset(0 0 0 0); pointer-events: auto; }
	.jb-links a {
		font-size: 1.15rem;
		opacity: 0;
		transform: translateY(-10px);
		transition: opacity .45s var(--jb-ease) var(--jb-verzug, 0ms), transform .45s var(--jb-ease) var(--jb-verzug, 0ms), color .3s;
	}
	.jb-links.offen a { opacity: 1; transform: none; }
	.jb-nav-cta { margin-top: .3rem; }
}

/* --- Sektions-Grundlayout: Bild / Text im Wechsel (wie Original) --- */
.jb-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5.5vw, 5.5rem);
	align-items: center;
}
@media (max-width: 900px) {
	.jb-split { grid-template-columns: 1fr; gap: 2rem; }
	.jb-split-rev > .jb-media { order: -1; }
}
.jb-media {
	border-radius: var(--jb-radius);
	overflow: hidden;
	background: var(--jb-hell);
	box-shadow: var(--jb-schatten);
	transition: box-shadow .6s var(--jb-ease), transform .6s var(--jb-ease);
	will-change: transform;
}
.jb-media img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	transform: scale(1.02);
	transition: transform 1.1s var(--jb-ease);
	will-change: transform;
}
.jb-media:hover { box-shadow: var(--jb-schatten-hover); transform: translateY(-4px); }
.jb-media:hover img { transform: scale(1.07); }
.jb-media-breit { max-width: 1000px; margin: 0 auto clamp(2rem, 5vw, 3.5rem); }
.jb-media-breit img { aspect-ratio: 16 / 9; }

/* --- Karten --- */
.jb-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.jb-drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 900px) { .jb-duo, .jb-drei { grid-template-columns: 1fr; } }
.jb-karte {
	background: var(--jb-weiss);
	border: 1px solid var(--jb-linie);
	border-radius: var(--jb-radius);
	padding: 2.1rem;
	transition: transform .55s var(--jb-ease), box-shadow .55s var(--jb-ease), border-color .55s var(--jb-ease);
	will-change: transform;
}
.jb-karte:hover { transform: translateY(-6px); box-shadow: var(--jb-schatten); border-color: transparent; }
.jb-karte h3 { margin: .35rem 0 .5rem; }
.jb-karte-gold { background: var(--jb-hell); }
.jb-karte-media { border-radius: 16px; overflow: hidden; margin-bottom: 1.3rem; background: var(--jb-hell); }
.jb-karte-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.1s var(--jb-ease); }
.jb-karte:hover .jb-karte-media img { transform: scale(1.05); }
.jb-ico { font-size: 1.8rem; display: block; margin-bottom: .8rem; }
.jb-sec-hell .jb-karte { border-color: transparent; box-shadow: 0 6px 20px rgba(0,0,0,.04); }

/* --- Kennzahlen (Endwerte fest im HTML) --- */
.jb-zahlen { display: flex; flex-wrap: wrap; gap: 2rem 2.8rem; margin: 1.8rem 0; }
.jb-zahl b {
	display: block;
	font-weight: 800;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	letter-spacing: -.035em;
	color: var(--jb-schwarz);
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}
.jb-zahl > span { display: block; color: var(--jb-grau); font-size: .88rem; margin-top: .2rem; }
.jb-zahl b .jb-counter { font-size: inherit; color: inherit; }
.jb-sec-dunkel .jb-zahl b { color: var(--jb-gelb); }
.jb-sec-dunkel .jb-zahl > span { color: #a9a9a9; }

/* --- Standort-Karten --- */
.jb-loc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2.6rem; }
@media (max-width: 1080px) { .jb-loc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .jb-loc-grid { grid-template-columns: 1fr; } }
.jb-loc {
	background: var(--jb-weiss);
	border: 1px solid var(--jb-linie);
	border-radius: var(--jb-radius);
	padding: 1.9rem 1.6rem;
	display: flex;
	flex-direction: column;
	transition: transform .55s var(--jb-ease), box-shadow .55s var(--jb-ease), border-color .55s var(--jb-ease);
	will-change: transform;
}
.jb-loc:hover { transform: translateY(-7px); box-shadow: var(--jb-schatten); border-color: transparent; }
.jb-loc h3 { color: var(--jb-schwarz); margin: .2rem 0 .55rem; font-size: 1.24rem; }
.jb-loc-nr { font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--jb-rot); }
.jb-loc-adr { color: var(--jb-text); font-size: .93rem; font-weight: 600; margin-bottom: .7rem; }
.jb-loc-zeit { color: var(--jb-grau); font-size: .88rem; line-height: 1.95; margin-bottom: 1.3rem; }
.jb-loc-zeit strong { color: var(--jb-text); font-weight: 600; display: block; }
.jb-loc .jb-btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 640px) { .jb-loc .jb-btn { align-self: stretch; } }
.jb-neu {
	display: inline-block;
	background: var(--jb-rot);
	color: #fff;
	border-radius: 999px;
	padding: .14em .72em;
	font-size: .64rem;
	letter-spacing: .08em;
	margin-left: .4em;
	vertical-align: middle;
}
.jb-sec-hell .jb-loc { border-color: transparent; box-shadow: 0 6px 20px rgba(0,0,0,.04); }

/* --- Standorte-Detailseite --- */
.jb-loc-detail {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: clamp(2rem, 4.5vw, 4.5rem);
	align-items: center;
	margin-bottom: clamp(3rem, 7vw, 5.5rem);
}
.jb-loc-detail-rev { grid-template-columns: 1.1fr .9fr; }
.jb-loc-detail-rev .jb-loc-media { order: 2; }
@media (max-width: 900px) {
	.jb-loc-detail, .jb-loc-detail-rev { grid-template-columns: 1fr; }
	.jb-loc-detail-rev .jb-loc-media { order: 0; }
}
.jb-loc-media {
	border-radius: var(--jb-radius);
	overflow: hidden;
	background: var(--jb-hell);
	box-shadow: var(--jb-schatten);
}
.jb-loc-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.1s var(--jb-ease); }
.jb-loc-media:hover img { transform: scale(1.05); }
.jb-loc-detail .jb-loc-adr { color: var(--jb-rot); font-weight: 700; font-size: 1rem; }
.jb-loc-detail .jb-loc-zeit strong { display: inline-block; min-width: 190px; }
.jb-foodtruck-band {
	background: var(--jb-hell);
	border-radius: var(--jb-radius);
	padding: 1.6rem 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	align-items: center;
	justify-content: space-between;
}

/* --- Karriere-Box (wie Original: gelbe Box, Person überlappt) --- */
.jb-karriere {
	display: grid;
	grid-template-columns: clamp(260px, 34vw, 480px) 1fr;
	align-items: end;
	gap: 0;
}
@media (max-width: 820px) { .jb-karriere { grid-template-columns: 1fr; justify-items: center; } }
.jb-karriere-person {
	align-self: end;
	position: relative;
	z-index: 2;
	/* leichter Übergriff auf die gelbe Box – wie im Original */
	margin-right: clamp(-60px, -3.5vw, -34px);
	margin-bottom: clamp(-40px, -2.6vw, -18px);
	filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .22));
	pointer-events: none;
}
.jb-karriere-person img { width: 100%; height: auto; border-radius: 0; }
@media (max-width: 820px) {
	.jb-karriere-person {
		margin: 0 0 -48px 0;
		width: min(300px, 70%);
	}
}
.jb-karriere-box {
	background: var(--jb-gelb);
	border-radius: var(--jb-radius);
	/* links mehr Luft, damit der Text nie unter die Person rutscht */
	padding: clamp(2.2rem, 4.5vw, 3.4rem) clamp(1.6rem, 4vw, 3.4rem) clamp(2.2rem, 4.5vw, 3.4rem) clamp(2.4rem, 5.5vw, 5rem);
	position: relative;
	z-index: 1;
}
.jb-karriere-box h2 { margin-bottom: 1.3rem; }
.jb-karriere-box .jb-rot { color: var(--jb-rot); }

/* --- Newsletter-Sektion --- */
.jb-news { text-align: center; }
.jb-news h2 { color: var(--jb-rot); margin-bottom: 1.3rem; }

/* --- Speisekarte --- */
.jb-menu-cat { margin: 3rem 0 .5rem; color: var(--jb-schwarz); font-size: 1.55rem; }
.jb-menu-item {
	display: flex;
	justify-content: space-between;
	gap: 1.2rem;
	padding: 1.2rem 0;
	border-bottom: 1px solid var(--jb-linie);
	transition: padding-left .4s var(--jb-ease);
}
.jb-menu-item:hover { padding-left: .5rem; }
.jb-menu-item:last-of-type { border-bottom: none; }
.jb-menu-item p { color: var(--jb-grau); font-size: .9rem; margin-top: .12rem; }
.jb-preis { font-weight: 700; color: var(--jb-text); font-size: 1.02rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jb-hinweis {
	background: var(--jb-hell);
	border-radius: 14px;
	padding: 1rem 1.4rem;
	color: var(--jb-grau);
	font-size: .9rem;
	margin-bottom: 1.8rem;
	text-align: center;
}

/* --- CTA-Bänder --- */
.jb-cta-band {
	background: var(--jb-schwarz);
	color: #fff;
	border-radius: 26px;
	padding: clamp(2.4rem, 5vw, 3.8rem);
	text-align: center;
}
.jb-cta-band h2 { color: #fff; }
.jb-cta-band p { color: #a9a9a9; margin: .9rem auto 1.7rem; max-width: 520px; }
.jb-cta-band-gelb { background: var(--jb-gelb); color: #111; margin-top: 2.6rem; }
.jb-cta-band-gelb h2 { color: #111; }
.jb-cta-band-gelb p { color: #4b431a; }

/* --- Formular --- */
.jb-form { display: grid; gap: 1.15rem; }
.jb-form label { font-weight: 600; font-size: .88rem; display: block; margin-bottom: .38rem; }
.jb-form input, .jb-form select, .jb-form textarea {
	width: 100%;
	background: var(--jb-hell);
	border: 1.5px solid transparent;
	border-radius: 14px;
	padding: .98rem 1.15rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--jb-text);
	transition: border-color .35s var(--jb-ease-soft), background-color .35s var(--jb-ease-soft), box-shadow .35s var(--jb-ease-soft);
}
.jb-form input:focus, .jb-form select:focus, .jb-form textarea:focus {
	outline: none;
	border-color: var(--jb-schwarz);
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}
.jb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 640px) { .jb-form-row { grid-template-columns: 1fr; } }
.jb-form-ds { color: var(--jb-grau); font-size: .82rem; }
.jb-form-ds a { text-decoration: underline; }
.jb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.jb-ok { background: #edf8f0; color: #1d7a3d; border-radius: 14px; padding: 1.1rem 1.3rem; margin-bottom: 1.5rem; }
.jb-warn { background: #fdeeec; color: #b03b28; border-radius: 14px; padding: 1.1rem 1.3rem; margin-bottom: 1.5rem; }

/* --- Rechtstexte --- */
.jb-recht h2 { font-size: 1.28rem; margin: 2.5rem 0 .6rem; text-transform: none; letter-spacing: -.02em; }
.jb-recht h3 { font-size: 1.05rem; margin: 1.6rem 0 .4rem; }
.jb-recht p, .jb-recht li { color: var(--jb-grau); margin-bottom: .8rem; }
.jb-recht ul { padding-left: 1.3rem; }
.jb-recht a { text-decoration: underline; }
.jb-recht code { background: var(--jb-hell); border-radius: 6px; padding: .06em .45em; }

/* --- Footer (Aufbau wie Original) --- */
/* Unten kommt zur normalen Polsterung der Platz dazu, den der Cookie-Banner
   gerade braucht (--jb-bannerplatz wird von main.js gesetzt, solange er
   sichtbar ist). Ohne das läge der schwebende Banner auf der letzten Zeile
   der Fußzeile – und genau dort steht die Urheberzeile. */
.jb-footer { background: var(--jb-hell); border-top: 1px solid var(--jb-linie); padding: clamp(2.8rem, 6vw, 4rem) 0 calc(1.8rem + var(--jb-bannerplatz, 0px)); font-size: .9rem; color: var(--jb-grau); }
/* Bewusst OHNE weiche Überblendung: Der Platz muss sofort da sein. Wächst er
   erst über eine halbe Sekunde, rutscht die Fußzeile in dieser Zeit unter den
   Banner – und genau das soll die Regel ja verhindern. */
.jb-foot-grid { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 2.4rem; align-items: start; }
@media (max-width: 880px) { .jb-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .jb-foot-grid { grid-template-columns: 1fr; } }
.jb-footer h4 { color: var(--jb-rot); font-size: .95rem; font-weight: 800; margin-bottom: .9rem; letter-spacing: .01em; }
.jb-footer a { display: block; color: var(--jb-grau); margin: .42rem 0; transition: color .3s var(--jb-ease-soft), transform .3s var(--jb-ease); }
.jb-footer a:hover { color: var(--jb-schwarz); transform: translateX(3px); }
.jb-footer .jb-logo { display: inline-flex; margin-bottom: 1rem; }
.jb-footer .jb-logo-img { max-height: 68px; }
.jb-foot-claim { font-size: .92rem; max-width: 420px; }
.jb-foot-bottom {
	border-top: 1px solid var(--jb-linie);
	margin-top: 2.4rem;
	padding-top: 1.4rem;
	display: flex;
	flex-wrap: wrap;
	gap: .7rem 1.6rem;
	justify-content: space-between;
	font-size: .8rem;
	color: #9a9a95;
}
.jb-foot-legal { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.jb-foot-legal a { display: inline; margin: 0; }

/* --- Urheberzeile der Agentur: eigene Zeile, immer sichtbar --- */
.jb-foot-urheber {
	margin-top: 1.2rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--jb-linie);
	text-align: center;
	font-size: .8rem;
	color: #9a9a95;
}
.jb-foot-urheber a {
	display: inline;
	margin: 0;
	color: var(--jb-schwarz);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.jb-foot-urheber a:hover { color: var(--jb-rot); transform: none; }

/* --- Cookie-Banner --- */
.jb-cookie {
	position: fixed;
	left: 50%;
	bottom: 1.2rem;
	width: min(620px, 94%);
	background: rgba(255, 255, 255, .97);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border: 1px solid var(--jb-linie);
	border-radius: 22px;
	padding: 1.6rem;
	z-index: 1200;
	box-shadow: 0 28px 70px rgba(0, 0, 0, .2);
	transform: translate(-50%, 0);
	transition: transform .7s var(--jb-ease), opacity .5s var(--jb-ease-soft);
}
.jb-cookie[hidden] { display: block !important; opacity: 0; transform: translate(-50%, 130%); pointer-events: none; }
.jb-cookie h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.jb-cookie p { color: var(--jb-grau); font-size: .86rem; margin-bottom: 1.1rem; }
.jb-cookie p a { text-decoration: underline; }
.jb-cookie-btns { display: flex; gap: .7rem; flex-wrap: wrap; }
.jb-cookie-btns .jb-btn { flex: 1 1 180px; padding: .85rem 1.2rem; font-size: .9rem; min-height: 48px; }

/* --- Platzhalter --- */
.jb-ph { opacity: .92; }

/* ============================================================
   BEWEGUNG: flüssige Scroll-Effekte
   Nur aktiv, wenn JS läuft (html.jigs-js).
   Sicherheitsnetz: html.jigs-showall zeigt IMMER alles.
   ============================================================ */
html.jigs-js .jb-reveal {
	opacity: 0;
	transform: translate3d(0, 34px, 0);
	transition:
		opacity .95s var(--jb-ease) var(--jb-verzug, 0ms),
		transform 1.05s var(--jb-ease) var(--jb-verzug, 0ms);
	will-change: opacity, transform;
}
html.jigs-js .jb-reveal.jb-sichtbar,
html.jigs-js.jigs-showall .jb-reveal {
	opacity: 1;
	transform: none;
	will-change: auto;
}
/* Bilder blenden zusätzlich sanft auf (Maske + Zoom) */
html.jigs-js .jb-media.jb-reveal img,
html.jigs-js .jb-loc-media.jb-reveal img { transform: scale(1.1); }
html.jigs-js .jb-media.jb-reveal.jb-sichtbar img,
html.jigs-js .jb-loc-media.jb-reveal.jb-sichtbar img,
html.jigs-js.jigs-showall .jb-media.jb-reveal img { transform: scale(1.02); }

/* Sanftes Parallax (JS setzt --jb-par) */
html.jigs-js .jb-par img { transform: translate3d(0, var(--jb-par, 0px), 0) scale(1.08); }
html.jigs-js .jb-par:hover img { transform: translate3d(0, var(--jb-par, 0px), 0) scale(1.12); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	html.jigs-js .jb-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	html.jigs-js .jb-media img, html.jigs-js .jb-par img { transform: none !important; transition: none !important; }
	.jb-btn, .jb-karte, .jb-loc, .jb-header, .jb-nav, .jb-links { transition: none !important; }
	.jb-cookie { transition: none !important; }
}

/* --- Button-Reihen (auch auf den Unterseiten) --- */
.jb-hero-ctas, .jb-btn-reihe { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; margin-top: 1.4rem; }
.jb-mitte .jb-hero-ctas, .jb-mitte .jb-btn-reihe { justify-content: center; }

/* --- Cookie-Banner sauber ausblenden (auch für Screenreader) --- */
.jb-cookie[hidden] { visibility: hidden; }

/* --- News-Kanal-Button (WhatsApp-Community) --- */
.jb-btn-news {
	background: #25D366;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	box-shadow: 0 8px 22px rgba(37, 211, 102, .3);
}
.jb-btn-news:hover { background: #1eb857; box-shadow: 0 18px 40px rgba(37, 211, 102, .4); }
.jb-btn-news .jb-wa { width: 1.15em; height: 1.15em; flex: none; }
.jb-news-hinweis { color: var(--jb-grau); font-size: .88rem; margin-top: .8rem; }
.jb-footer .jb-btn-news { display: inline-flex; margin-top: .9rem; padding: .7rem 1.4rem; font-size: .86rem; }
.jb-footer .jb-btn-news:hover { transform: translateY(-2px); }


/* --- Standort-Karte „Coming Soon“ --- */
.jb-loc-soon {
	background: linear-gradient(180deg, #fffdf0 0%, #ffffff 60%);
	border-color: rgba(246, 233, 107, .9);
}
.jb-loc-soon .jb-loc-zeit { color: var(--jb-grau); }
.jb-neu {
	background: var(--jb-rot);
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 800;
}

/* --- Ablauf in Schritten (Catering) --- */
.jb-ablauf { display: grid; gap: 1.4rem; margin-top: 2.2rem; }
.jb-schritt { display: grid; grid-template-columns: 56px 1fr; gap: 1.2rem; align-items: start; }
.jb-schritt b {
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--jb-gelb);
	color: #111;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.3rem; font-weight: 800;
}
.jb-schritt h3 { margin-bottom: .2rem; }
.jb-schritt .jb-text { margin: 0; }

/* --- FAQ (Catering) --- */
.jb-faq {
	background: var(--jb-weiss);
	border-radius: 16px;
	margin-bottom: .8rem;
	overflow: hidden;
	transition: box-shadow .45s var(--jb-ease);
}
.jb-faq[open] { box-shadow: var(--jb-schatten); }
.jb-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 1.15rem 3rem 1.15rem 1.4rem;
	font-weight: 700;
	position: relative;
	color: var(--jb-schwarz);
}
.jb-faq summary::-webkit-details-marker { display: none; }
.jb-faq summary::after {
	content: "";
	position: absolute;
	right: 1.4rem; top: 50%;
	width: 10px; height: 10px;
	border-right: 2.5px solid var(--jb-schwarz);
	border-bottom: 2.5px solid var(--jb-schwarz);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .45s var(--jb-ease);
}
.jb-faq[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.jb-faq p { padding: 0 1.4rem 1.3rem; color: var(--jb-grau); margin: 0; }

/* --- Markenclaim (Wer Wir Sind) --- */
.jb-claim {
	font-weight: 800;
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
	letter-spacing: -.03em;
	line-height: 1.2;
	color: var(--jb-schwarz);
	margin-top: 1.6rem;
}

/* --- Karten (erst nach Einwilligung) --- */
.jb-map {
	border-radius: var(--jb-radius);
	overflow: hidden;
	background: var(--jb-hell);
	min-height: 260px;
	display: flex;
	position: relative;
}
.jb-map-platz {
	padding: 1.8rem;
	text-align: center;
	margin: auto;
	max-width: 420px;
}
.jb-map-titel { font-weight: 700; color: var(--jb-schwarz); margin-bottom: .5rem; }
.jb-map-info { color: var(--jb-grau); font-size: .82rem; margin: .7rem 0 0; line-height: 1.6; }
.jb-map-info a { text-decoration: underline; }
.jb-map iframe { width: 100%; min-height: 300px; border: 0; display: block; }
.jb-map[data-geladen="1"] { background: none; display: block; }

/* --- Button „bald verfügbar“ --- */
.jb-btn-soon {
	background: #e7e5dd;
	color: #8d8a80;
	cursor: not-allowed;
	box-shadow: none;
	pointer-events: none;
}
.jb-btn-soon:hover { transform: none; box-shadow: none; }

/* --- Allergen-/Produkt-Tabelle --- */
.jb-tabelle-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--jb-linie); margin-bottom: 1.6rem; }
.jb-tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 520px; background: #fff; }
.jb-tabelle th {
	text-align: left;
	font-size: .74rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--jb-grau);
	font-weight: 700;
	padding: .95rem 1.1rem;
	background: var(--jb-hell);
	border-bottom: 1px solid var(--jb-linie);
	white-space: nowrap;
}
.jb-tabelle td { padding: 1rem 1.1rem; border-bottom: 1px solid var(--jb-linie); vertical-align: top; }
.jb-tabelle tr:last-child td { border-bottom: none; }
.jb-tabelle tbody tr { transition: background-color .3s var(--jb-ease-soft); }
.jb-tabelle tbody tr:hover { background: #fcfbf7; }
.jb-tab-preis { display: inline-block; margin-left: .6rem; color: var(--jb-grau); font-weight: 600; font-variant-numeric: tabular-nums; }
.jb-tab-beschr { display: block; color: var(--jb-grau); font-size: .88rem; margin-top: .15rem; }
.jb-tab-leer { color: #b6b4ac; }
.jb-tab-merkmale { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.jb-merkmal {
	background: var(--jb-hell);
	border-radius: 999px;
	padding: .1rem .65rem;
	font-size: .74rem;
	font-weight: 600;
	color: var(--jb-grau);
}
.jb-kenn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 .4rem;
	margin: .12rem .22rem .12rem 0;
	border-radius: 8px;
	background: var(--jb-gelb);
	color: #111;
	font-size: .78rem;
	font-weight: 800;
	text-decoration: none;
	border: none;
	cursor: help;
}
.jb-kenn-zahl { background: var(--jb-hell); border: 1px solid var(--jb-linie); color: var(--jb-grau); }

/* --- Stellenanzeigen --- */
.jb-jobs { display: grid; gap: 1.4rem; margin-top: 2.4rem; }
@media (min-width: 900px) { .jb-jobs { grid-template-columns: repeat(2, 1fr); } }
.jb-job {
	background: var(--jb-weiss);
	border: 1px solid var(--jb-linie);
	border-radius: var(--jb-radius);
	padding: 2rem;
	transition: transform .55s var(--jb-ease), box-shadow .55s var(--jb-ease);
}
.jb-job:hover { transform: translateY(-5px); box-shadow: var(--jb-schatten); }
.jb-job-kopf { border-bottom: 1px solid var(--jb-linie); padding-bottom: 1rem; margin-bottom: 1rem; }
.jb-job-orte { color: var(--jb-rot); font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: .35rem; }
.jb-job-titel { font-weight: 700; font-size: .95rem; margin: 1.1rem 0 .4rem; color: var(--jb-schwarz); }
.jb-job-liste { list-style: none; margin: 0 0 .4rem; padding: 0; }
.jb-job-liste li { position: relative; padding-left: 1.4rem; margin: .35rem 0; color: var(--jb-grau); font-size: .95rem; }
.jb-job-liste li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--jb-gelb); }

/* --- Städte-Liste (Catering) --- */
.jb-staedte { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 2.2rem; }
.jb-stadt {
	background: #fff;
	border: 1px solid var(--jb-linie);
	border-radius: 999px;
	padding: .6rem 1.3rem;
	font-size: .92rem;
	font-weight: 600;
	color: var(--jb-text);
	transition: transform .35s var(--jb-ease), border-color .35s var(--jb-ease), background-color .35s var(--jb-ease);
}
.jb-stadt:hover { transform: translateY(-2px); border-color: var(--jb-schwarz); }
.jb-stadt-aktiv { background: var(--jb-gelb); border-color: transparent; }

/* --- Download-Karte (Affiliate) --- */
.jb-download {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border: 1px solid var(--jb-linie);
	border-radius: var(--jb-radius);
	padding: 1.6rem 1.9rem;
	margin-top: 2.4rem;
}
.jb-download-titel { font-weight: 700; color: var(--jb-schwarz); }

/* ===========================================================
   Interner Schichtplan (nur für Mitarbeiter)
   =========================================================== */
.jb-schicht-form {
	max-width: 380px;
	margin: 2rem auto 0;
	text-align: left;
}
.jb-schicht-form input[type="password"] {
	font-size: 1.05rem;
	letter-spacing: .06em;
}
.jb-schicht-form button { width: 100%; justify-content: center; }
.jb-mini {
	font-size: .86rem;
	color: var(--jb-grau);
	margin-top: 1.4rem;
}
.jb-schicht-kopf {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.jb-schicht-kopf h1 { margin: 0; }
.jb-schicht-inhalt {
	background: #fff;
	border: 1px solid var(--jb-linie, #e6e3d9);
	border-radius: var(--jb-radius);
	padding: clamp(1.4rem, 3vw, 2.4rem);
	overflow-x: auto;
}
.jb-schicht-inhalt table {
	width: 100%;
	border-collapse: collapse;
	min-width: 560px;
}
.jb-schicht-inhalt th,
.jb-schicht-inhalt td {
	padding: .7rem .9rem;
	border-bottom: 1px solid #ecebe4;
	text-align: left;
	vertical-align: top;
	font-size: .95rem;
}
.jb-schicht-inhalt th {
	background: var(--jb-hell);
	font-weight: 700;
	white-space: nowrap;
}
.jb-schicht-inhalt tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
	.jb-schicht-kopf { align-items: flex-start; }
}
.jb-schicht-leer { text-align: center; padding: clamp(2rem, 6vw, 3.4rem); }
.jb-schicht-inhalt h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 1.6rem 0 .8rem; text-transform: none; }
.jb-schicht-inhalt h2:first-child { margin-top: 0; }
.jb-schicht-inhalt h3 { margin: 1.3rem 0 .6rem; }
.jb-schicht-inhalt ul,
.jb-schicht-inhalt ol { margin: .8rem 0 1.2rem 1.3rem; }
.jb-schicht-inhalt li { margin-bottom: .3rem; }
.jb-schicht-inhalt p { margin: .7rem 0; }

/* --- Eingebettetes Schichtplan-System --- */
.jb-schicht-rahmen {
	border: 1px solid var(--jb-linie);
	border-radius: var(--jb-radius);
	overflow: hidden;
	background: #fff;
	margin-top: 1.2rem;
}
.jb-schicht-rahmen iframe {
	display: block;
	width: 100%;
	height: var(--jb-rahmenhoehe, 1400px);
	border: 0;
}
@media (max-width: 640px) {
	/* Auf dem Handy braucht der Plan mehr Höhe, weil er umbricht. */
	.jb-schicht-rahmen iframe { height: calc(var(--jb-rahmenhoehe, 1400px) + 400px); }
}
.jb-hinweis-box {
	margin-top: 1.4rem;
	background: #fffdf0;
	border: 1px solid #efe3a8;
	border-left: 4px solid var(--jb-gelb);
	border-radius: 12px;
	padding: .9rem 1.2rem;
	font-size: .92rem;
	color: #6b6248;
}
.jb-hinweis-box p { margin: 0; }
.jb-hinweis-box a { text-decoration: underline; font-weight: 600; }
.jb-danke-haken { display: flex; justify-content: center; margin-bottom: 1.4rem; }
.jb-danke-haken svg { display: block; }