/* =========================================================================
   Claßen Theme – main.css
   CI zentral in :root – Claßen-Rot bei Bedarf hier auf den exakten
   CI-Hexwert anpassen, alles andere zieht automatisch nach.
   ========================================================================= */

:root {
	/* Farben */
	--rot: #C8102E;            /* Claßen-Rot (Siegel/Stempel) */
	--rot-dunkel: #9C0B23;
	--schwarz: #171210;        /* Rauchschwarz */
	--anthrazit: #221B17;
	--papier: #F7F1E8;         /* Metzgerpapier */
	--papier-dunkel: #EDE4D6;
	--weiss: #FFFFFF;
	--text: #2B2420;
	--text-hell: #6E635B;
	--linie: rgba(23, 18, 16, 0.12);
	--kreide: #F2EDE4;

	/* Typo – Überschriften: DM Serif Display · Fließtext: Roboto Mono */
	--font-display: 'DM Serif Display', Georgia, serif;
	--font-body: 'Roboto Mono', 'Courier New', monospace;
	--font-kreide: 'Caveat', cursive;

	/* Layout */
	--wrap: 1200px;
	--radius: 10px;
	--schatten: 0 14px 40px rgba(23, 18, 16, 0.12);
	--uebergang: 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 0.98rem;
	line-height: 1.7;
	color: var(--text);
	background: var(--papier);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip; /* Deko-Elemente (z. B. Winker) dürfen keine Scrollbreite erzeugen */
}
html { overflow-x: clip; }

img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 400; /* DM Serif Display gibt es nur in 400 */
	line-height: 1.12;
	margin: 0 0 0.6em;
	color: var(--schwarz);
	text-wrap: balance;
}

h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: 0.01em; }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); }

p { margin: 0 0 1em; }
a { color: var(--rot); text-decoration: none; }
a:hover { color: var(--rot-dunkel); }

.skip-link {
	position: absolute; left: -999px; top: 0;
	background: var(--rot); color: var(--weiss); padding: 0.6rem 1rem; z-index: 999;
}
.skip-link:focus { left: 0; color: var(--weiss); }

:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }

/* Eyebrow-Labels */
.eyebrow {
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--rot);
	margin-bottom: 0.9rem;
}
.eyebrow--rot { color: var(--rot); }

/* Buttons */
.btn {
	display: inline-block;
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.88rem;
	font-weight: 700;
	padding: 0.9rem 1.9rem;
	border-radius: 4px;
	border: 2px solid transparent;
	transition: transform var(--uebergang), background var(--uebergang), color var(--uebergang), box-shadow var(--uebergang);
	cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--rot { background: var(--rot); color: var(--weiss); box-shadow: 0 8px 22px rgba(200, 16, 46, 0.35); }
.btn--rot:hover { background: var(--rot-dunkel); color: var(--weiss); }
.btn--ghost { border-color: currentColor; color: var(--weiss); }
.btn--ghost:hover { background: var(--weiss); color: var(--schwarz); }
.btn--voll { width: 100%; }

/* Sektionen */
section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.sektion-kopf { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.sektion-kopf--hell h2, .sektion-kopf--hell p { color: var(--weiss); }

/* Split-Layout */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--rev .split__text { order: 1; }
.split--rev .split__bild { order: 2; }
.split__bild { margin: 0; position: relative; }
.split__bild img { border-radius: var(--radius); box-shadow: var(--schatten); object-fit: cover; width: 100%; }
.split__bild--rund img { border-radius: 50%; aspect-ratio: 1; }

/* =========================================================================
   Reifegrad-Scrollbar (Gimmick #1)
   ========================================================================= */
.reifegrad {
	position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 130;
	background: rgba(23, 18, 16, 0.15);
}
.reifegrad__fill {
	display: block; height: 100%; width: 0;
	background: linear-gradient(90deg, var(--rot), var(--rot-dunkel));
	transition: width 0.1s linear;
}

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
	position: fixed; inset: 4px 0 auto 0; z-index: 120;
	background: rgba(23, 18, 16, 0.92);
	backdrop-filter: blur(10px);
	transition: box-shadow var(--uebergang), background var(--uebergang);
}
.site-header.is-fest { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); background: rgba(23, 18, 16, 0.98); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 84px; }
.site-header__logo img { width: 150px; height: auto; transition: transform var(--uebergang), width var(--uebergang); }
.site-header.is-fest .site-header__logo img { width: 120px; }
.site-header__logo:hover img { transform: rotate(-2deg) scale(1.03); }

.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav a {
	font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.1em;
	font-size: 0.9rem; font-weight: 500; color: var(--papier); position: relative;
}
.site-nav a:not(.site-nav__cta)::after {
	content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
	background: var(--rot); transition: width var(--uebergang);
}
.site-nav a:not(.site-nav__cta):hover::after { width: 100%; }
.site-nav__cta { background: var(--rot); color: var(--weiss); padding: 0.55rem 1.1rem; border-radius: 4px; }
.site-nav__cta:hover { background: var(--rot-dunkel); color: var(--weiss); }

.site-header__meta { display: flex; align-items: center; gap: 1rem; }
.site-header__tel { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--papier); font-weight: 600; font-size: 0.95rem; }
.site-header__tel:hover { color: var(--rot); }

.offen-badge {
	font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
	padding: 0.3rem 0.7rem; border-radius: 99px; font-weight: 600;
}
.offen-badge.is-offen { background: rgba(46, 160, 67, 0.18); color: #5BD778; border: 1px solid rgba(91, 215, 120, 0.4); }
.offen-badge.is-zu { background: rgba(200, 16, 46, 0.15); color: #FF7A8C; border: 1px solid rgba(255, 122, 140, 0.35); }
.offen-badge--inline.is-offen { color: #1F7A33; background: rgba(46, 160, 67, 0.12); border-color: rgba(31, 122, 51, 0.3); }
.offen-badge--inline.is-zu { color: var(--rot-dunkel); background: rgba(200, 16, 46, 0.1); border-color: rgba(156, 11, 35, 0.3); }

.nav-toggle { display: none; background: none; border: 0; padding: 0.4rem; cursor: pointer; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--papier); margin: 6px 0; transition: transform var(--uebergang), opacity var(--uebergang); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
	background: radial-gradient(1200px 600px at 80% -10%, #2E2521 0%, var(--schwarz) 55%);
	color: var(--papier);
	padding-top: clamp(8rem, 16vw, 11rem);
	position: relative; overflow: hidden;
}
.hero__glow {
	position: absolute; inset: auto -20% -40% -20%; height: 60%;
	background: radial-gradient(closest-side, rgba(200, 16, 46, 0.18), transparent 70%);
	pointer-events: none;
}
.hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; position: relative; }
.hero__title { color: var(--weiss); font-size: clamp(2.8rem, 6.4vw, 4.8rem); }
.hero__title em { font-style: italic; color: var(--rot); }
.hero__sub { font-size: 1.15rem; color: rgba(247, 241, 232, 0.85); max-width: 46ch; }
.hero__stars { color: rgba(247, 241, 232, 0.9); font-weight: 600; letter-spacing: 0.02em; font-size: 0.92rem; }
/* Schimmernde Google-Sterne: goldener Lichtstreifen wandert durch, dazu Glow-Puls */
.hero__sterne {
	display: inline-block;
	font-size: 1.25rem;
	background: linear-gradient(100deg, #C99626 20%, #FFE9A8 40%, #F5C24B 55%, #C99626 75%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: sterne-schimmer 2.8s linear infinite, sterne-glow 2.8s ease-in-out infinite;
}
@keyframes sterne-schimmer { to { background-position: -250% 0; } }
@keyframes sterne-glow {
	0%, 100% { filter: drop-shadow(0 0 2px rgba(245, 194, 75, 0.35)); }
	50% { filter: drop-shadow(0 0 10px rgba(245, 194, 75, 0.85)); }
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.4rem; }

.hero__visual { position: relative; }
.hero__bild { margin: 0; }
.hero__bild img { border-radius: var(--radius); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); object-fit: cover; aspect-ratio: 4 / 3; }

/* Stempel-Animation: knallt wie ein echter Metzgerstempel aufs Bild */
.hero__stempel {
	position: absolute; right: -1.2rem; bottom: -1.6rem; width: 130px;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
	transform: scale(3) rotate(-25deg); opacity: 0;
}
.hero__stempel.ist-gestempelt { animation: stempeln 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
@keyframes stempeln {
	0%   { transform: scale(3) rotate(-25deg); opacity: 0; }
	60%  { transform: scale(0.92) rotate(-9deg); opacity: 1; }
	80%  { transform: scale(1.05) rotate(-11deg); }
	100% { transform: scale(1) rotate(-10deg); opacity: 1; }
}

/* =========================================================================
   USPs
   ========================================================================= */
.usps { background: var(--papier); padding-block: clamp(3rem, 6vw, 4.5rem); }
.usps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.usp {
	background: var(--weiss); border-radius: var(--radius); padding: 2rem 1.8rem;
	border-top: 4px solid var(--rot); box-shadow: var(--schatten);
	transition: transform var(--uebergang);
}
.usp:hover { transform: translateY(-6px); }
.usp__icon { width: 52px; height: 52px; object-fit: contain; color: var(--rot); margin-bottom: 1rem; }
.usp p { color: var(--text-hell); margin: 0; font-size: 0.98rem; }

/* =========================================================================
   Empfehlung der Woche – Kreidetafel
   ========================================================================= */
.tafel {
	position: relative;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(120% 90% at 50% 0%, #221B17 0%, var(--schwarz) 65%);
}
.tafel::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.55); /* Vignette wie eine echte Tafel */
}
.tafel .wrap { position: relative; z-index: 1; }
.tafel__kw { color: rgba(247, 241, 232, 0.6); font-family: var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; }
.tafel__board {
	max-width: 780px; margin-inline: auto;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 60%),
		#25211E;
	border: 10px solid #4A342A; /* Holzrahmen */
	border-radius: 8px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(0, 0, 0, 0.5);
	padding: clamp(1.5rem, 4vw, 2.6rem);
}
.tafel__tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 1.6rem; }
.tafel__tab {
	font-family: var(--font-kreide); font-size: 1.35rem; font-weight: 700;
	background: none; border: 0; border-bottom: 2px dashed transparent;
	color: rgba(242, 237, 228, 0.55); cursor: pointer; padding: 0.2rem 0.7rem;
	transition: color var(--uebergang), border-color var(--uebergang), transform var(--uebergang);
}
.tafel__tab:hover { color: var(--kreide); transform: rotate(-1.5deg); }
.tafel__tab.is-active { color: var(--kreide); border-color: var(--rot); }
.tafel__liste { display: none; text-align: center; }
.tafel__liste ul { list-style: none; margin: 0; padding: 0; }
.tafel__liste.is-active { display: block; animation: kreide-rein 0.4s ease both; }
@keyframes kreide-rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tafel__liste li {
	font-family: var(--font-kreide); font-size: clamp(1.5rem, 3vw, 1.9rem); color: var(--kreide);
	padding: 0.55rem 0; border-bottom: 1px dashed rgba(242, 237, 228, 0.15);
}
.tafel__liste li:last-child { border-bottom: 0; }
/* Kreide-Schreib-Effekt: Zeilen erscheinen wie live geschrieben (alle gleichzeitig) */
.tafel__zeile { display: inline-block; }
.ist-geschrieben .tafel__zeile {
	clip-path: inset(-15% 100% -15% 0);
	animation: kreide-schreiben 1.1s cubic-bezier(0.3, 0, 0.4, 1) 0.1s forwards;
}
@keyframes kreide-schreiben {
	0%   { clip-path: inset(-15% 100% -15% 0); opacity: 0.4; filter: blur(0.6px); }
	15%  { opacity: 1; }
	85%  { filter: blur(0.3px); }
	100% { clip-path: inset(-15% -3% -15% 0); opacity: 1; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
	.ist-geschrieben .tafel__zeile { clip-path: none; animation: none; }
}
.tafel__hinweis { text-align: center; color: rgba(242, 237, 228, 0.4); font-size: 0.85rem; margin: 1.4rem 0 0; }

/* =========================================================================
   Philosophie / Wurst / Party (helle Splits)
   ========================================================================= */
.philosophie { background: var(--papier); }
.wurst { background: var(--weiss); padding-bottom: 0; }
.party { background: var(--papier); }

/* =========================================================================
   Partner & Herkunft
   ========================================================================= */
.partner { background: var(--weiss); }
.partner__gruppe {
	font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.16em;
	color: var(--rot); margin: 2.6rem 0 1.1rem; padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--linie);
}
.partner__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.1rem; }
.partner-karte {
	display: block; overflow: hidden; color: var(--text);
	background: var(--papier); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.2rem;
	border: 1px solid var(--linie); position: relative;
	transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.partner-karte:hover { transform: translateY(-4px); box-shadow: var(--schatten); color: var(--text); }
.partner-karte__inhalt { position: relative; z-index: 1; display: block; }
.partner-karte__mehr { display: inline-block; color: var(--rot); font-weight: 700; font-size: 0.9rem; transition: color var(--uebergang); }
/* Kacheln mit Beitragsbild: Bild ist permanent sichtbar, Hover zoomt sanft */
.partner-karte--bild::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background-image: var(--kachel-bild); background-size: cover; background-position: center;
	transform: scale(1);
	transition: transform 0.9s ease;
}
.partner-karte--bild::after {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(180deg, rgba(23, 18, 16, 0.5) 0%, rgba(23, 18, 16, 0.85) 100%);
}
.partner-karte--bild:hover::before { transform: scale(1.06); }
.partner-karte--bild { color: var(--papier); border-color: rgba(23, 18, 16, 0.4); }
.partner-karte--bild h4 { color: var(--weiss); }
.partner-karte--bild .partner-karte__inhalt p { color: var(--weiss); }
.partner-karte--bild .partner-karte__mehr { color: #FF8A99; }
.partner-karte--bild .partner-karte__tag { background: var(--rot); color: var(--weiss); }
.partner-karte--bild:hover { color: var(--papier); }
.partner-karte h4, .partner-karte p, .partner-karte__tag { transition: color var(--uebergang), background var(--uebergang); }
.partner-karte__tag {
	display: inline-block; font-family: var(--font-body); font-size: 0.7rem;
	letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
	color: var(--rot); background: rgba(200, 16, 46, 0.08);
	padding: 0.25rem 0.6rem; border-radius: 99px; margin-bottom: 0.7rem;
}
.partner-karte h4 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.partner-karte p { font-size: 0.92rem; color: var(--text-hell); margin-bottom: 0.7rem; }
.partner-karte a { font-weight: 600; font-size: 0.92rem; }

/* =========================================================================
   Dry Aged – dunkle Sektion mit Zählern
   ========================================================================= */
.dryaged { background: linear-gradient(160deg, var(--anthrazit), var(--schwarz)); color: rgba(247, 241, 232, 0.85); }
.dryaged h2 { color: var(--weiss); }
.fakten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0 1.8rem; }
.fakten div { border-left: 3px solid var(--rot); padding-left: 1rem; }
.fakten dt { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 400; color: var(--weiss); }
.fakten dd { margin: 0; font-size: 0.9rem; color: rgba(247, 241, 232, 0.6); }

/* =========================================================================
   Bratwurst-Ticker
   ========================================================================= */
.ticker {
	margin-top: clamp(3rem, 6vw, 4.5rem);
	background: var(--rot); color: var(--weiss);
	overflow: hidden; white-space: nowrap; padding-block: 0.9rem;
}
.ticker__spur { display: inline-flex; gap: 2.2rem; animation: ticker-lauf 45s linear infinite; will-change: transform; }
.ticker:hover .ticker__spur { animation-play-state: paused; }
.ticker__item { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.95rem; font-weight: 500; }
.ticker__item span { color: rgba(255, 255, 255, 0.5); margin-right: 0.5rem; }
@keyframes ticker-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================================================
   Grundsätze + Zähler
   ========================================================================= */
.grundsaetze { background: var(--schwarz); text-align: center; }
.grundsaetze__zaehler { margin-bottom: 2.5rem; }
.grundsaetze__zahl {
	display: block; font-family: var(--font-display); font-weight: 400;
	font-size: clamp(4rem, 12vw, 7.5rem); color: var(--rot); line-height: 1;
}
.grundsaetze__zahl::after { content: "+"; font-size: 0.5em; vertical-align: super; }
.grundsaetze__label { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.25em; color: rgba(247, 241, 232, 0.7); }
.grundsaetze__liste { list-style: none; max-width: 680px; margin: 0 auto; padding: 0; }
.grundsaetze__liste li {
	color: rgba(247, 241, 232, 0.85); font-size: 1.1rem;
	padding: 1.1rem 0; border-bottom: 1px solid rgba(247, 241, 232, 0.12);
}
.grundsaetze__liste li:last-child { border-bottom: 0; }

/* =========================================================================
   Jobs
   ========================================================================= */
.jobs { background: var(--papier); }
.jobs__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; }
.job-karte {
	display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
	background: var(--weiss); border-radius: var(--radius); padding: 1.6rem;
	border: 1px solid var(--linie); color: var(--text);
	transition: transform var(--uebergang), box-shadow var(--uebergang), border-color var(--uebergang);
}
.job-karte:hover { transform: translateY(-4px); box-shadow: var(--schatten); border-color: var(--rot); color: var(--text); }
.job-karte h3 { font-size: 1.05rem; margin: 0; }
.job-karte__aktionen { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.job-karte__bewerben {
	font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
	color: var(--rot); font-weight: 600; font-size: 0.92rem;
	transition: transform var(--uebergang);
}
.job-karte__bewerben:hover { transform: translateX(3px); }
.job-karte__bewerben:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }
.job-karte__mehr {
	color: var(--text-hell); font-weight: 600; font-size: 0.85rem;
	text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linie);
	transition: color var(--uebergang), text-decoration-color var(--uebergang);
}
.job-karte__mehr:hover { color: var(--rot); text-decoration-color: var(--rot); }

/* =========================================================================
   Presse
   ========================================================================= */
.presse { background: var(--papier); }
.presse__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; }
/* Kachel mit Bild im Hintergrund + dunklem Overlay (Rot-Schimmer beim Hover) */
.presse-karte {
	position: relative; display: flex; align-items: flex-end;
	min-height: 240px; border-radius: var(--radius); overflow: hidden;
	background-color: var(--schwarz); background-size: cover; background-position: center;
	color: var(--weiss);
	transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.presse-karte::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(23, 18, 16, 0.15) 0%, rgba(23, 18, 16, 0.88) 78%);
	transition: background var(--uebergang);
}
.presse-karte:hover { transform: translateY(-5px); box-shadow: var(--schatten); color: var(--weiss); }
.presse-karte:hover::before {
	background: linear-gradient(180deg, rgba(200, 16, 46, 0.28) 0%, rgba(23, 18, 16, 0.92) 78%);
}
.presse-karte--ohne-bild { background-image: radial-gradient(140% 120% at 20% 0%, #35291f 0%, var(--schwarz) 60%); }
.presse-karte__inhalt { position: relative; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.45rem; }
.presse-karte__medium { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; color: rgba(247, 241, 232, 0.75); }
.presse-karte h3 { font-size: 1.2rem; margin: 0; color: var(--weiss); }
.presse-karte__link { color: #FF8A99; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; }

/* =========================================================================
   Kontakt
   ========================================================================= */
/* Dunkles Finale mit rotem Glow und gestaffelten Reveals */
.kontakt {
	position: relative; overflow: hidden;
	background: radial-gradient(1100px 500px at 15% 0%, #2C2320 0%, var(--schwarz) 55%);
	color: rgba(247, 241, 232, 0.85);
}
.kontakt__glow {
	position: absolute; inset: auto -15% -45% -15%; height: 65%;
	background: radial-gradient(closest-side, rgba(200, 16, 46, 0.16), transparent 70%);
	pointer-events: none;
}
.kontakt h2 { color: var(--weiss); }
.kontakt__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.kontakt__zeiten {
	background: rgba(247, 241, 232, 0.05); border: 1px solid rgba(247, 241, 232, 0.12);
	border-radius: var(--radius); padding: 1.4rem 1.6rem; margin-bottom: 1.5rem;
	backdrop-filter: blur(4px);
	transition: border-color var(--uebergang), transform var(--uebergang);
}
.kontakt__zeiten:hover { border-color: rgba(200, 16, 46, 0.5); transform: translateY(-3px); }
.kontakt__zeiten h3 { display: flex; align-items: center; gap: 0.7rem; font-size: 1.15rem; color: var(--weiss); }
.kontakt__zeiten table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.kontakt__zeiten th { text-align: left; padding: 0.4rem 0; font-family: var(--font-body); font-weight: 700; width: 96px; color: var(--papier); }
.kontakt__zeiten td { padding: 0.4rem 0; color: rgba(247, 241, 232, 0.65); }
.kontakt__wege { list-style: none; margin: 0; padding: 0; }
.kontakt__wege li { padding: 0.35rem 0; }
.kontakt__wege a {
	display: flex; align-items: center; gap: 0.9rem;
	color: rgba(247, 241, 232, 0.85); padding: 0.55rem 0.7rem; border-radius: 8px;
	transition: background var(--uebergang), transform var(--uebergang), color var(--uebergang);
}
.kontakt__wege a:hover { background: rgba(247, 241, 232, 0.06); transform: translateX(6px); color: var(--weiss); }
.kontakt__wege strong { display: block; font-family: var(--font-body); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--rot); }
.kontakt__weg-icon {
	display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0;
	border-radius: 50%; background: rgba(200, 16, 46, 0.15); color: #FF8A99;
	transition: background var(--uebergang), color var(--uebergang), transform var(--uebergang);
}
.kontakt__wege a:hover .kontakt__weg-icon { background: var(--rot); color: var(--weiss); transform: rotate(-8deg) scale(1.06); }

/* Gestaffelte Reveal-Verzögerungen */
.reveal--d1 { transition-delay: 0.1s; }
.reveal--d2 { transition-delay: 0.2s; }
.reveal--d3 { transition-delay: 0.3s; }
.reveal--d4 { transition-delay: 0.4s; }

.kontakt__form {
	background: var(--papier); color: var(--text);
	border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.2rem);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
	border-top: 5px solid var(--rot);
}
.kontakt__form h3 { color: var(--schwarz); }
.feld--halb { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.feld--halb > div { min-width: 0; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: rgba(200, 16, 46, 0.4); }
.feld { margin-bottom: 1.1rem; }
.feld label { display: block; font-family: var(--font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.35rem; }
.feld input, .feld select, .feld textarea {
	width: 100%; padding: 0.75rem 0.9rem; font: inherit;
	border: 1px solid var(--linie); border-radius: 6px; background: var(--weiss);
	transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
	outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15);
}
.feld--hp { position: absolute; left: -9999px; }
.kontakt__status { margin: 0.9rem 0 0; font-weight: 600; min-height: 1.4em; }
.kontakt__status.is-ok { color: #1F7A33; }
.kontakt__status.is-fehler { color: var(--rot-dunkel); }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { background: var(--schwarz); color: rgba(247, 241, 232, 0.75); padding-top: clamp(3rem, 6vw, 4.5rem); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.site-footer h4 { color: var(--weiss); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.14em; }
.site-footer__marke img { margin-bottom: 1rem; }
.site-footer__marke p { font-size: 0.95rem; max-width: 40ch; }
.site-footer__social { display: flex; gap: 0.8rem; margin-top: 1rem; }
.site-footer__social a {
	display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
	background: rgba(247, 241, 232, 0.08); color: var(--papier);
	transition: background var(--uebergang), transform var(--uebergang);
}
.site-footer__social a:hover { background: var(--rot); transform: translateY(-3px); }
.site-footer__links, .site-footer__kontakt { display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer__links a, .site-footer__kontakt a { color: rgba(247, 241, 232, 0.7); }
.site-footer__links a:hover, .site-footer__kontakt a:hover { color: var(--rot); }
.site-footer__unten { border-top: 1px solid rgba(247, 241, 232, 0.1); padding-block: 1.4rem; font-size: 0.85rem; display: flex; align-items: center; gap: 0.9rem; }
.site-footer__unten p { margin: 0; }

/* Zurück-nach-oben-Haken */
.haken-top {
	position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 110;
	width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer;
	background: var(--rot); color: var(--weiss);
	display: grid; place-items: center;
	opacity: 0; transform: translateY(16px); pointer-events: none;
	transition: opacity var(--uebergang), transform var(--uebergang), background var(--uebergang);
	box-shadow: 0 10px 26px rgba(200, 16, 46, 0.4);
}
.haken-top.is-sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.haken-top:hover { background: var(--rot-dunkel); }
.haken-top:hover svg { animation: haken-baumeln 0.8s ease; }
@keyframes haken-baumeln {
	0%, 100% { transform: rotate(0); }
	30% { transform: rotate(-14deg); }
	60% { transform: rotate(10deg); }
}

/* =========================================================================
   Mobile Bottom-Bar
   ========================================================================= */
.bottom-bar {
	position: fixed; inset: auto 0 0 0; z-index: 115;
	display: none; grid-template-columns: repeat(4, 1fr);
	background: rgba(23, 18, 16, 0.97); backdrop-filter: blur(8px);
	border-top: 1px solid rgba(247, 241, 232, 0.1);
	padding-bottom: env(safe-area-inset-bottom);
}
.bottom-bar a {
	display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
	padding: 0.55rem 0 0.5rem; color: var(--papier); font-size: 0.68rem;
	font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.06em;
}
.bottom-bar a:active { color: var(--rot); }

/* =========================================================================
   Reveal-Animationen (IntersectionObserver setzt .ist-da)
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1); }
.reveal.ist-da { opacity: 1; transform: none; }

/* =========================================================================
   Easter Eggs
   ========================================================================= */

/* Stempel-Overlay (5× Logo-Klick) */
.stempel-overlay {
	position: fixed; inset: 0; z-index: 300;
	display: grid; place-items: center; gap: 0;
	background: rgba(23, 18, 16, 0.55);
	opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.stempel-overlay.is-aktiv { opacity: 1; }
.stempel-overlay img { transform: scale(4) rotate(-30deg); opacity: 0; }
.stempel-overlay.is-aktiv img { animation: stempeln 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.1s forwards; }
.stempel-overlay span {
	margin-top: 1.2rem; font-family: var(--font-body); font-weight: 700;
	letter-spacing: 0.3em; color: var(--weiss); font-size: clamp(0.9rem, 3vw, 1.4rem);
	opacity: 0; transition: opacity 0.4s ease 0.5s;
}
.stempel-overlay.is-aktiv span { opacity: 1; }

/* Bratwurst-Regen (Konami-Code) */
.egg-regen { position: fixed; inset: 0; pointer-events: none; z-index: 290; overflow: hidden; }
.egg-regen span {
	position: absolute; top: -60px; font-size: 2rem;
	animation: wurst-fall linear forwards;
}
@keyframes wurst-fall {
	to { transform: translateY(110vh) rotate(360deg); }
}

/* Wurst-Cursor-Trail (Tipp-Egg „wurst") */
.wurst-spur { position: fixed; z-index: 280; pointer-events: none; font-size: 1.3rem; animation: spur-weg 0.9s ease forwards; }
@keyframes spur-weg { to { opacity: 0; transform: translateY(-24px) scale(0.6) rotate(40deg); } }

/* Grill-Modus (Tipp-Egg „grill"): Glut am unteren Rand */
.glut-funke {
	position: fixed; bottom: -10px; z-index: 285; pointer-events: none;
	width: 6px; height: 6px; border-radius: 50%;
	background: radial-gradient(circle, #FFB347, var(--rot));
	animation: funke-steigt ease-out forwards;
}
@keyframes funke-steigt {
	to { transform: translateY(-45vh) translateX(var(--drift, 0)) scale(0.2); opacity: 0; }
}

/* =========================================================================
   Inhaltsseiten (page.php / index.php)
   ========================================================================= */
.inhalt-seite { padding-block: clamp(8rem, 14vw, 10rem) clamp(3rem, 6vw, 5rem); max-width: 820px; }
.inhalt-seite__bild img { border-radius: var(--radius); box-shadow: var(--schatten); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 960px) {
	.hero__inner, .kontakt__grid { grid-template-columns: 1fr; }
	.split, .split--rev { grid-template-columns: 1fr; }
	.split--rev .split__text { order: 2; }
	.split--rev .split__bild { order: 1; }
	.site-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
	.hero__stempel { right: 0.5rem; bottom: -1rem; width: 100px; }
}

@media (max-width: 860px) {
	.site-nav {
		position: fixed; inset: 88px 0 auto 0;
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--schwarz); padding: 0.5rem 0 1rem;
		transform: translateY(-130%); transition: transform var(--uebergang);
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
	}
	.site-nav.is-offen { transform: none; }
	.site-nav a { padding: 0.9rem clamp(1.1rem, 4vw, 2rem); }
	.site-nav__cta { margin: 0.6rem clamp(1.1rem, 4vw, 2rem) 0; text-align: center; }
	.nav-toggle { display: block; }
	.site-header__tel span { display: none; }
	.usps__grid { grid-template-columns: 1fr; }
	.fakten { grid-template-columns: repeat(3, 1fr); }
	.bottom-bar { display: grid; }
	body { padding-bottom: 64px; }
	.haken-top { bottom: 5rem; }
		.offen-badge:not(.offen-badge--inline) { display: none; }
}

/* =========================================================================
   Reduced Motion – alle Animationen respektvoll abschalten
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
	.reveal { opacity: 1; transform: none; }
	.ticker__spur { animation: none; }
	.hero__stempel { opacity: 1; transform: rotate(-10deg); }
}

/* =========================================================================
   v1.1.0 – Neue Komponenten
   ========================================================================= */

/* ---------- Preloader (per Option deaktivierbar) ---------- */
.preloader {
	position: fixed; inset: 0; z-index: 500;
	display: grid; place-items: center; align-content: center; gap: 1.2rem;
	background: var(--schwarz);
	transition: opacity 0.5s ease, visibility 0.5s ease;
	animation: preloader-failsafe 0.5s ease 3s forwards; /* Failsafe ohne JS */
}
.preloader.ist-fertig { opacity: 0; visibility: hidden; }
.preloader__siegel { position: relative; width: 130px; height: 130px; }
.preloader__siegel img {
	position: absolute; inset: 12px; width: 106px; height: 106px;
	animation: preloader-puls 1.4s ease-in-out infinite;
}
.preloader__ring { position: absolute; inset: 0; width: 130px; height: 130px; transform: rotate(-90deg); }
.preloader__ring circle {
	fill: none; stroke: var(--rot); stroke-width: 5; stroke-linecap: round;
	stroke-dasharray: 339; stroke-dashoffset: 339;
	animation: preloader-ring 1.6s ease-in-out infinite;
}
.preloader p {
	font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.25em;
	font-size: 0.72rem; color: rgba(247, 241, 232, 0.55); margin: 0;
}
@keyframes preloader-puls {
	0%, 100% { transform: scale(1) rotate(-8deg); }
	50% { transform: scale(1.08) rotate(-8deg); }
}
@keyframes preloader-ring {
	0% { stroke-dashoffset: 339; }
	60% { stroke-dashoffset: 40; }
	100% { stroke-dashoffset: 339; }
}
@keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; } }

/* ---------- Partyservice-Mosaik ---------- */
.party__mosaik {
	display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px;
	gap: 1rem; margin-bottom: 2.5rem;
}
.party__kachel {
	position: relative; margin: 0; border-radius: var(--radius); overflow: hidden;
	box-shadow: var(--schatten);
}
.party__kachel--gross { grid-row: span 2; }
.party__kachel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.party__kachel:hover img { transform: scale(1.05); }
.party__kachel figcaption {
	position: absolute; inset: auto 0 0 0; padding: 1.6rem 1rem 0.8rem;
	background: linear-gradient(180deg, transparent, rgba(23, 18, 16, 0.85));
	color: var(--weiss); font-family: var(--font-body); font-size: 0.78rem;
	text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
}
.party__unten { max-width: 780px; margin-inline: auto; text-align: center; }
.party__leistungen {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
	list-style: none; margin: 1.4rem 0 1.8rem; padding: 0;
}
.party__leistungen li {
	font-family: var(--font-body); font-size: 0.78rem; text-transform: uppercase;
	letter-spacing: 0.08em; font-weight: 600;
	background: var(--weiss); border: 1px solid var(--linie); border-radius: 99px;
	padding: 0.5rem 1rem;
	transition: border-color var(--uebergang), transform var(--uebergang), background var(--uebergang);
}
.party__leistungen li:hover { border-color: var(--rot); background: rgba(200, 16, 46, 0.06); transform: translateY(-2px); }

/* ---------- Grundsätze: Liste + Manifesto-Karte ---------- */
.grundsaetze__grid {
	display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center; max-width: 1000px; margin-inline: auto; text-align: left;
}
.grundsaetze__grid .grundsaetze__liste { margin: 0; max-width: none; }
.manifesto-karte {
	display: block; position: relative; border-radius: var(--radius); overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
	transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.manifesto-karte:hover { transform: translateY(-6px) rotate(-1deg); }
/* Logo klein & zentriert auf dunkler Karte – niedrig aufgelöste Grafiken werden nicht hochskaliert */
.manifesto-karte {
	display: grid; place-items: center; min-height: 230px;
	background: radial-gradient(120% 120% at 30% 10%, #2A211D 0%, var(--schwarz) 65%);
	padding: 2rem 1.5rem 3.4rem;
}
.manifesto-karte img {
	width: auto; height: auto; max-width: min(58%, 200px); max-height: 130px;
	object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}
.manifesto-karte span {
	position: absolute; inset: auto 0 0 0; padding: 1.8rem 1.2rem 1rem;
	background: linear-gradient(180deg, transparent, rgba(23, 18, 16, 0.9));
	color: var(--weiss); font-family: var(--font-body); font-weight: 700;
	font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em;
}

/* ---------- Modals (Express-Bewerbung + Exit-Popup) ---------- */
.modal { position: fixed; inset: 0; z-index: 350; display: grid; place-items: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal__hintergrund {
	position: absolute; inset: 0; background: rgba(23, 18, 16, 0.7);
	backdrop-filter: blur(4px); animation: modal-bg 0.25s ease;
}
.modal__box {
	position: relative; width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
	background: var(--papier); border-radius: var(--radius); border-top: 5px solid var(--rot);
	padding: clamp(1.5rem, 4vw, 2.2rem);
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
	animation: modal-rein 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.modal__box--exit { text-align: center; width: min(460px, 100%); }
.modal__siegel { margin: 0 auto 1rem; animation: preloader-puls 2s ease-in-out infinite; }
.modal__zu {
	position: absolute; top: 0.7rem; right: 0.9rem;
	background: none; border: 0; font-size: 1.8rem; line-height: 1;
	color: var(--text-hell); cursor: pointer; transition: color var(--uebergang), transform var(--uebergang);
}
.modal__zu:hover { color: var(--rot); transform: rotate(90deg); }
.modal__job { color: var(--text-hell); font-size: 0.9rem; }
.modal__job strong { color: var(--rot); }
@keyframes modal-bg { from { opacity: 0; } }
@keyframes modal-rein { from { opacity: 0; transform: translateY(30px) scale(0.96); } }

/* ---------- Footer-Siegel (Easter-Egg-Auslöser) ---------- */
.site-footer__siegel { cursor: pointer; transition: transform var(--uebergang); }
.site-footer__siegel:hover { transform: rotate(-8deg) scale(1.06); }

/* ---------- Responsive-Nachtrag v1.1.0 ---------- */
@media (max-width: 960px) {
	.grundsaetze__grid { grid-template-columns: 1fr; }
	.party__mosaik { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
}
@media (max-width: 640px) {
	.party__mosaik { grid-template-columns: 1fr; grid-auto-rows: 200px; }
	.party__kachel--gross { grid-row: span 1; }
	.feld--halb { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.hero__sterne { animation: none; }
	.preloader { display: none; }
}

/* Inline-Badge im (jetzt dunklen) Kontaktbereich: helle Varianten */
.kontakt .offen-badge--inline.is-offen { color: #5BD778; background: rgba(46, 160, 67, 0.18); border-color: rgba(91, 215, 120, 0.4); }
.kontakt .offen-badge--inline.is-zu { color: #FF7A8C; background: rgba(200, 16, 46, 0.15); border-color: rgba(255, 122, 140, 0.35); }

/* =========================================================================
   v1.2.0 – Hero-Slider, Google-Bewertungen
   ========================================================================= */

/* ---------- Hero als Banner/Slider ---------- */
.hero--slider { padding-top: 0; }
.hero-slider { position: relative; display: grid; min-height: clamp(560px, 88vh, 860px); }
.hero-slide {
	grid-area: 1 / 1; display: flex; align-items: center;
	background-color: var(--schwarz); background-size: cover; background-position: center;
	opacity: 0; visibility: hidden;
	transition: opacity 0.9s ease, visibility 0.9s ease;
}
.hero-slide.is-aktiv { opacity: 1; visibility: visible; }
.hero-slide__overlay {
	position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(23, 18, 16, 0.88) 0%, rgba(23, 18, 16, 0.55) 55%, rgba(23, 18, 16, 0.25) 100%),
		linear-gradient(180deg, rgba(23, 18, 16, 0.55) 0%, transparent 30%);
}
.hero-slide__inhalt {
	position: relative; width: 100%;
	padding-top: clamp(7rem, 14vw, 9rem); padding-bottom: clamp(4rem, 8vw, 6rem);
	max-width: var(--wrap);
}
.hero-slide__inhalt .hero__title { max-width: 16ch; }
.hero-slide__inhalt .hero__sub { text-wrap: pretty; }
/* Sanftes Einschieben der Textblöcke beim Slide-Wechsel */
.hero-slide .eyebrow, .hero-slide .hero__title, .hero-slide .hero__sub, .hero-slide .hero__cta {
	opacity: 0; transform: translateY(18px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.hero-slide.is-aktiv .eyebrow { opacity: 1; transform: none; transition-delay: 0.25s; }
.hero-slide.is-aktiv .hero__title { opacity: 1; transform: none; transition-delay: 0.35s; }
.hero-slide.is-aktiv .hero__sub { opacity: 1; transform: none; transition-delay: 0.45s; }
.hero-slide.is-aktiv .hero__cta { opacity: 1; transform: none; transition-delay: 0.55s; }

/* Stempel klebt unten LINKS am Slider und schwebt nach dem Aufstempeln dauerhaft */
.hero--slider .hero__stempel { left: clamp(1rem, 4vw, 3rem); right: auto; bottom: clamp(1rem, 4vw, 2.5rem); z-index: 5; }
.hero__stempel.ist-lebendig { animation: stempel-schweben 5s ease-in-out infinite; opacity: 1; }
@keyframes stempel-schweben {
	0%, 100% { transform: translateY(0) rotate(-10deg) scale(1); }
	35%      { transform: translateY(-9px) rotate(-7deg) scale(1.03); }
	70%      { transform: translateY(-3px) rotate(-12deg) scale(0.99); }
}

/* Pfeile */
.hero-slider__pfeil {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
	width: 48px; height: 48px; border-radius: 50%;
	border: 1px solid rgba(247, 241, 232, 0.35); background: rgba(23, 18, 16, 0.35);
	color: var(--papier); font-size: 1.6rem; line-height: 1; cursor: pointer;
	backdrop-filter: blur(3px);
	transition: background var(--uebergang), border-color var(--uebergang), transform var(--uebergang);
}
.hero-slider__pfeil:hover { background: var(--rot); border-color: var(--rot); }
.hero-slider__pfeil--zurueck { left: clamp(0.6rem, 2vw, 1.4rem); }
.hero-slider__pfeil--weiter { right: clamp(0.6rem, 2vw, 1.4rem); }

/* Punkte */
.hero-slider__punkte {
	position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
	display: flex; gap: 0.55rem; z-index: 6;
}
.hero-slider__punkt {
	width: 10px; height: 10px; border-radius: 99px; border: 0; padding: 0; cursor: pointer;
	background: rgba(247, 241, 232, 0.4);
	transition: background var(--uebergang), width 0.35s ease;
}
.hero-slider__punkt.is-aktiv { background: var(--rot); width: 26px; }

/* ---------- Google-Bewertungen ---------- */
.bewertungen { background: var(--weiss); }
.bewertungen .sektion-kopf p { color: var(--text); font-weight: 600; }
.bewertungen__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; }
.bewertung {
	margin: 0; padding: 1.5rem; border-radius: var(--radius);
	background: var(--papier); border: 1px solid var(--linie);
	display: flex; flex-direction: column; gap: 0.6rem;
	transition: transform var(--uebergang), box-shadow var(--uebergang), border-color var(--uebergang);
}
.bewertung:hover { transform: translateY(-4px); box-shadow: var(--schatten); border-color: rgba(200, 16, 46, 0.3); }
.bewertung__sterne { color: #E0A82E; letter-spacing: 0.15em; font-size: 1.05rem; }
.bewertung blockquote { margin: 0; font-style: italic; color: var(--text); }
.bewertung figcaption { color: var(--text-hell); font-size: 0.85rem; font-weight: 600; }
.bewertungen__mehr { text-align: center; margin-top: 2rem; }
.btn--ghost-dunkel { border: 2px solid var(--schwarz); color: var(--schwarz); background: transparent; }
.btn--ghost-dunkel:hover { background: var(--schwarz); color: var(--papier); }

/* ---------- Responsive + Bewegung ---------- */
@media (max-width: 640px) {
	.hero-slider { min-height: 78vh; }
	.hero-slider__pfeil { display: none; } /* Mobil: Punkte + Wischen über Tap reichen */
	.hero--slider .hero__stempel { width: 90px; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-slide { transition: none; }
	.hero-slide .eyebrow, .hero-slide .hero__title, .hero-slide .hero__sub, .hero-slide .hero__cta {
		opacity: 1; transform: none; transition: none;
	}
}

/* =========================================================================
   v1.3.0 – Karte, Jobs-Button
   ========================================================================= */
.karte {
	margin-top: clamp(2rem, 5vw, 3.5rem); border-radius: var(--radius); overflow: hidden;
	background: rgba(247, 241, 232, 0.04); border: 1px solid rgba(247, 241, 232, 0.12);
	min-height: 380px; display: grid; place-items: center;
}
.karte__platzhalter { text-align: center; padding: 2.5rem 1.5rem; color: rgba(247, 241, 232, 0.85); }
.karte__platzhalter svg { color: var(--rot); margin-inline: auto; margin-bottom: 0.8rem; }
.karte__platzhalter h3 { color: var(--weiss); }
.karte__hinweis { font-size: 0.75rem; color: rgba(247, 241, 232, 0.5); margin-top: 0.8rem; }
.karte__link { display: inline-block; margin-top: 0.4rem; color: #FF8A99; font-size: 0.85rem; font-weight: 700; }
.karte.ist-geladen { display: block; padding: 0; }
.karte__iframe { width: 100%; height: 440px; border: 0; display: block; }

.jobs__mehr { text-align: center; margin-top: 2rem; }

/* =========================================================================
   v1.4.0 – Herkunft, USP-Invers, Eyebrow im Hero, sr-only
   ========================================================================= */

/* Screenreader-only (für semantisch nötige, unsichtbare Überschriften) */
.sr-only {
	position: absolute; width: 1px; height: 1px; margin: -1px;
	padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Hero-Eyebrow: gedämpftes Weiß statt Rot (bessere Lesbarkeit auf Fotos) */
.hero-slide .eyebrow { color: rgba(247, 241, 232, 0.72); }

/* USP-Kachel invertiert: Claßen-Rot mit weißem Icon */
.usp--invers {
	background: linear-gradient(145deg, var(--rot) 0%, var(--rot-dunkel) 100%);
	border-top-color: var(--weiss); /* Streifen oben in Weiß */
	box-shadow: 0 18px 44px rgba(200, 16, 46, 0.35);
}
.usp--invers .usp__icon { color: var(--weiss); }
.usp--invers h3 { color: var(--weiss); }
.usp--invers p { color: rgba(247, 241, 232, 0.88); }
.usp--invers:hover { box-shadow: 0 24px 55px rgba(200, 16, 46, 0.45); }

/* Herkunft: Team-Foto mit Rahmen-Offset + Story mit Zitat und Ketten-Chips */
.herkunft { margin-bottom: clamp(2.5rem, 6vw, 4rem); align-items: center; }
.herkunft__bild { margin: 0; }
/* Roter Offset-Rahmen sitzt am Bild-Wrapper – die Bildunterschrift bleibt sauber darunter */
.herkunft__rahmen { position: relative; display: block; margin-right: 1.1rem; margin-bottom: 1.1rem; }
.herkunft__rahmen::before {
	content: ""; position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem;
	border: 2px solid var(--rot); border-radius: var(--radius); z-index: 0;
	transition: inset 0.45s ease;
}
.herkunft__bild:hover .herkunft__rahmen::before { inset: 0.6rem -0.6rem -0.6rem 0.6rem; }
.herkunft__rahmen img {
	position: relative; z-index: 1; border-radius: var(--radius);
	box-shadow: var(--schatten); filter: grayscale(1) contrast(1.04);
	transition: filter 0.6s ease;
}
.herkunft__bild:hover .herkunft__rahmen img { filter: grayscale(0.35) contrast(1.02); }
.herkunft__bild figcaption {
	margin-top: 1.4rem;
	font-size: 0.8rem; color: var(--text-hell); text-transform: uppercase; letter-spacing: 0.1em;
}
.herkunft__zitat {
	margin: 1.2rem 0; padding: 0.9rem 0 0.9rem 1.2rem;
	border-left: 4px solid var(--rot);
	font-family: var(--font-display); font-size: 1.25rem; font-style: italic; line-height: 1.4;
	color: var(--schwarz);
}
.herkunft__kette { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1rem 0 0; padding: 0; counter-reset: kette; }
.herkunft__kette li {
	counter-increment: kette;
	font-family: var(--font-body); font-size: 0.75rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.07em;
	background: var(--weiss); border: 1px solid var(--linie); border-radius: 99px;
	padding: 0.4rem 0.85rem;
	transition: border-color var(--uebergang), background var(--uebergang), transform var(--uebergang), color var(--uebergang);
}
.herkunft__kette li::before {
	content: counter(kette, decimal-leading-zero); color: var(--rot);
	margin-right: 0.45rem; font-weight: 700;
}
.herkunft__kette li:hover { border-color: var(--rot); background: var(--rot); color: var(--weiss); transform: translateY(-2px); }
.herkunft__kette li:hover::before { color: var(--weiss); }

@media (max-width: 960px) {
	.herkunft { grid-template-columns: 1fr; }
	.herkunft__bild { max-width: 560px; }
}

/* =========================================================================
   v1.5.0 – Philosophie-Overlay, Dry-Aged-Siegel, Winker, Mobile-Fixes
   ========================================================================= */

/* Philosophie: Logo-Overlay beim Hover */
.split__bild--philosophie { position: relative; overflow: hidden; border-radius: var(--radius); }
.split__bild--philosophie img { transition: transform 0.7s ease; }
.split__bild--philosophie:hover > img { transform: scale(1.04); }
.philosophie__overlay {
	position: absolute; inset: 0; display: grid; place-items: center;
	background: rgba(23, 18, 16, 0.72); opacity: 0;
	transition: opacity 0.45s ease;
}
.philosophie__overlay img {
	width: min(60%, 320px); height: auto;
	transform: translateY(14px) scale(0.94);
	transition: transform 0.5s ease 0.05s;
	filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
}
.split__bild--philosophie:hover .philosophie__overlay { opacity: 1; }
.split__bild--philosophie:hover .philosophie__overlay img { transform: translateY(0) scale(1); }

/* Dry Aged: Siegel klebt beim Scrollen unten rechts aufs Bild */
.split__bild--siegel { position: relative; }
.bild-stempel {
	position: absolute; right: 1rem; bottom: 1rem; width: 110px; z-index: 2;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));
	transform: scale(3) rotate(-25deg); opacity: 0;
	pointer-events: none;
}
.bild-stempel.ist-aufgeklebt { animation: stempeln 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }

/* Jobbörse-Winker: Desktop rechts neben dem Button, mobil darunter */
.jobs__winker-halter { position: relative; display: inline-block; }
.jobs__winker {
	position: absolute; left: calc(100% + 1.2rem); bottom: -0.4rem;
	width: 140px; height: auto; pointer-events: none;
	opacity: 0; transform: translateY(45%) scale(0.9);
	transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 0.4s ease;
}
.jobs__winker-btn { position: relative; z-index: 1; }
.jobs__winker.ist-da { opacity: 1; transform: translateY(0) scale(1); }
.winker__arm { transform-origin: 150px 126px; }
.jobs__winker.ist-da .winker__arm { animation: winken 1.6s ease-in-out 0.55s infinite; }
@keyframes winken {
	0%, 100% { transform: rotate(0deg); }
	20%      { transform: rotate(-16deg); }
	45%      { transform: rotate(8deg); }
	70%      { transform: rotate(-12deg); }
}
.jobs__winker .winker__figur { animation: none; }
.jobs__winker.ist-da .winker__figur { animation: winker-wippen 3.4s ease-in-out 1.2s infinite; transform-origin: 110px 190px; }
@keyframes winker-wippen {
	0%, 100% { transform: rotate(0deg); }
	50%      { transform: rotate(1.6deg); }
}

/* Mobile-Feinschliff */
@media (max-width: 640px) {
	/* Hero mobil: Inhalt oben verankern (nicht zentrieren) – der Abstand zum
	   fixen Header ist damit immer exakt das padding-top, unabhängig von der
	   Textlänge. Dazu kompaktere Typo, damit lange Slide-Titel nicht wuchern. */
	.hero-slide { align-items: flex-start; }
	.hero-slide__inhalt { padding-top: 9rem; padding-bottom: 8rem; }
	/* Hierarchie mobil: lange SEO-Zeile (Eyebrow) sehr klein, Titel „Qualität aus der Region" dafür kräftig */
	.hero-slide__inhalt .hero__title { font-size: clamp(2.4rem, 11vw, 3.1rem); line-height: 1.12; }
	.hero-slide__inhalt .hero__sub { font-size: 0.98rem; }
	.hero-slide__inhalt .eyebrow {
		font-size: 0.56rem; letter-spacing: 0.06em; line-height: 1.5;
		opacity: 0.75; max-width: 34ch; margin-bottom: 0.9rem;
	}
	.hero-slider { min-height: 100svh; }
	/* Hero-Siegel rechts statt links – verdeckt sonst die Buttons */
	.hero--slider .hero__stempel { left: auto; right: 1rem; bottom: 3.4rem; }
	/* Philosophie-Bild als flacher Banner */
	.philosophie .split__bild--philosophie img { aspect-ratio: 16 / 8; object-fit: cover; }
	.jobs__winker-halter { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
	.jobs__winker-halter .jobs__winker { position: static; width: 120px; transform: translateY(24px) scale(0.9); }
	.jobs__winker-halter .jobs__winker.ist-da { transform: translateY(0) scale(1); }
	.bild-stempel { width: 84px; right: 0.8rem; bottom: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
	.jobs__winker { transition: none; opacity: 1; transform: none; }
	.jobs__winker .winker__arm, .jobs__winker.ist-da .winker__arm,
	.jobs__winker.ist-da .winker__figur { animation: none; }
	.bild-stempel { transform: none; opacity: 1; animation: none; }
}

/* =========================================================================
   v1.6.0 – Menüs, Engagement, Wurst mobil, Hero-Winker-Egg
   ========================================================================= */

/* WordPress-Menüs im Header/Footer: Listen-Reset, gleiche Optik wie Fallback-Links */
.site-nav ul.site-nav__menu { display: flex; gap: 1.4rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.site-footer__links ul.site-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
@media (max-width: 960px) {
	.site-nav ul.site-nav__menu { flex-direction: column; align-items: stretch; gap: 0; }
}

/* Eigene Wurstproduktion: Bild mobil als flacher Banner (wie Philosophie) */
@media (max-width: 640px) {
	.wurst .split__bild img { aspect-ratio: 16 / 8; object-fit: cover; }
}

/* Unser Engagement */
.engagement { background: var(--weiss); }
.engagement__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; max-width: 900px; margin-inline: auto; }
.auszeichnung {
	position: relative; background: var(--weiss); border-radius: var(--radius);
	padding: 2.2rem 1.8rem 1.8rem; border-top: 4px solid var(--rot);
	box-shadow: var(--schatten); text-align: center;
	transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.auszeichnung:hover { transform: translateY(-6px); box-shadow: 0 24px 55px rgba(23, 18, 16, 0.16); }
.auszeichnung__icon {
	display: grid; place-items: center; width: 76px; height: 76px; margin-inline: auto;
	border-radius: 50%; background: rgba(200, 16, 46, 0.09); color: var(--rot);
	transition: background var(--uebergang), color var(--uebergang), transform var(--uebergang);
}
.auszeichnung:hover .auszeichnung__icon { background: var(--rot); color: var(--weiss); transform: rotate(-6deg) scale(1.05); }
.auszeichnung__badge {
	display: inline-block; margin: 1rem 0 0.4rem;
	font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.14em; color: var(--rot);
	background: rgba(200, 16, 46, 0.08); border-radius: 99px; padding: 0.3rem 0.85rem;
}
.auszeichnung h3 { margin-bottom: 0.5rem; }
.auszeichnung p:last-child { color: var(--text-hell); font-size: 0.94rem; margin: 0; }
.engagement__mehr { text-align: center; margin-top: 2.2rem; }

/* Hero-Winker (Easter Egg: 5× aufs Hero-Siegel klicken) */
.hero__stempel { cursor: pointer; pointer-events: auto; }
.hero__winker {
	position: absolute; left: auto; right: clamp(1rem, 5vw, 4rem); bottom: 0;
	width: clamp(120px, 16vw, 190px); z-index: 6; pointer-events: none;
	transform: translateY(100%);
	transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.12);
}
.hero__winker.ist-da { transform: translateY(8%); }
@media (max-width: 640px) {
	.hero__winker { right: auto; left: 1rem; }
}

/* =========================================================================
   v1.7.0 – Anliegen-Kacheln im Kontaktformular
   ========================================================================= */
.anliegen { border: 0; margin: 0 0 1.1rem; padding: 0; }
.anliegen legend {
	font-family: var(--font-body); font-size: 0.85rem; text-transform: uppercase;
	letter-spacing: 0.08em; margin-bottom: 0.45rem; font-weight: 700; padding: 0;
}
.anliegen__kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 0.5rem; }
.anliegen__kachel { position: relative; }
.anliegen__kachel input { position: absolute; opacity: 0; pointer-events: none; }
.anliegen__kachel span {
	display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
	padding: 0.8rem 0.35rem 0.65rem; text-align: center; cursor: pointer;
	font-family: var(--font-body); font-size: 0.68rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-hell);
	background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px;
	transition: border-color var(--uebergang), background var(--uebergang), color var(--uebergang), transform var(--uebergang), box-shadow var(--uebergang);
}
.anliegen__kachel span svg { color: var(--text-hell); transition: color var(--uebergang), transform var(--uebergang); }
.anliegen__kachel:hover span { border-color: rgba(200, 16, 46, 0.45); transform: translateY(-2px); }
.anliegen__kachel input:checked + span {
	border-color: var(--rot); color: var(--rot);
	background: rgba(200, 16, 46, 0.06);
	box-shadow: 0 6px 16px rgba(200, 16, 46, 0.14);
}
.anliegen__kachel input:checked + span svg { color: var(--rot); transform: scale(1.12); }
.anliegen__kachel input:focus-visible + span { outline: 3px solid var(--rot); outline-offset: 2px; }
@media (max-width: 420px) {
	.anliegen__kacheln { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   v1.8.0 – Reifegrad-Finale, Hero-Social, Instagram
   ========================================================================= */

/* Reifegrad-Chip: Endzustand „Dry Aged" mit gezeichnetem Haken */
 /* Bugfix: war rot auf rotem Grund */
.reifegrad__haken path {
	stroke-dasharray: 30; stroke-dashoffset: 30;
	animation: haken-zeichnen 0.55s ease 0.15s forwards;
}
@keyframes haken-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes dryaged-puls {
	0% { transform: scale(0.85); }
	60% { transform: scale(1.08); }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
		.reifegrad__haken path { animation: none; stroke-dashoffset: 0; }
}

/* Hero: dezent schwebende Social-Icons am linken Rand */
.hero__social {
	position: absolute; right: clamp(0.6rem, 2vw, 1.6rem); left: auto; bottom: 5.5rem;
	display: flex; flex-direction: column; gap: 0.7rem; z-index: 6;
}
.hero__social a {
	display: grid; place-items: center; width: 40px; height: 40px;
	border-radius: 50%; color: var(--weiss); border: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
	animation: social-schweben 4.5s ease-in-out infinite;
	transition: transform var(--uebergang), box-shadow var(--uebergang), filter var(--uebergang);
}
/* Markenfarben */
.hero__social .social--instagram { background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF 80%, #515BD4); }
.hero__social .social--facebook { background: #1877F2; }
.hero__social .social--maps { background: #EA4335; }
.hero__social a:nth-child(2) { animation-delay: 0.7s; }
.hero__social a:nth-child(3) { animation-delay: 1.4s; }
.hero__social a:hover {
	transform: translateX(-4px) scale(1.1); animation-play-state: paused;
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4); filter: brightness(1.08);
}
@keyframes social-schweben {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}
@media (max-width: 960px) {
	/* Logo mobil: kleiner und nie abgeschnitten (Burger-Ansicht) */
	.site-header__logo img { height: auto; max-height: 44px; width: auto; max-width: 58vw; object-fit: contain; }
}
@media (max-width: 640px) {
	/* Mobil: vertikal rechts, oberhalb des Siegels */
	.hero__social { right: 1rem; bottom: 8.5rem; gap: 0.55rem; }
	.hero__social a { width: 34px; height: 34px; }
	.hero__social a svg { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) {
	.hero__social a { animation: none; }
}

/* Instagram-Sektion */
.insta { background: var(--weiss); }
.insta__follower { display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; color: var(--text); font-weight: 600; }
.insta__zahl {
	font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); line-height: 1;
	background: linear-gradient(45deg, #F58529, #DD2A7B 45%, #8134AF 75%, #515BD4);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.insta__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.8rem; }
.insta__post {
	position: relative; display: block; overflow: hidden; border-radius: var(--radius);
	aspect-ratio: 1 / 1; background: var(--papier-dunkel);
}
.insta__post img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.insta__post:hover img { transform: scale(1.07); }
.insta__post-overlay {
	position: absolute; inset: 0; display: grid; place-items: center;
	background: linear-gradient(45deg, rgba(245, 133, 41, 0.75), rgba(221, 42, 123, 0.75) 45%, rgba(129, 52, 175, 0.75) 80%);
	color: var(--weiss); opacity: 0; transition: opacity 0.35s ease;
}
.insta__post:hover .insta__post-overlay { opacity: 1; }
.insta__post-overlay svg { transform: scale(0.7); transition: transform 0.35s ease; }
.insta__post:hover .insta__post-overlay svg { transform: scale(1); }
.insta__mehr { text-align: center; margin-top: 2rem; }
@media (max-width: 960px) { .insta__grid { grid-template-columns: repeat(3, 1fr); } .insta__post:nth-child(n+4) { display: none; } }
@media (max-width: 560px) { .insta__grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } .insta__post:nth-child(n+4) { display: none; } }

/* =========================================================================
   v1.9.0 – Mittagstisch-Wochentafel
   ========================================================================= */
.tafel__board { position: relative; }
.tafel__mittagstisch {
	position: fixed; inset: 0; z-index: 420; /* über Header (200), unter Preloader (500) */
	display: flex; flex-direction: column;
	overflow-y: auto; -webkit-overflow-scrolling: touch;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(120% 100% at 50% 0%, #26201B 0%, #171210 70%);
	border-radius: 0; padding: clamp(1.2rem, 3vw, 2.5rem) clamp(1rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
	animation: mt-rein 0.35s ease both;
}
.tafel__mittagstisch[hidden] { display: none; }
@keyframes mt-rein { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
.tafel__mt-grid, .tafel__mt-titel, .tafel__mittagstisch .tafel__hinweis { width: min(1240px, 100%); margin-inline: auto; }
.tafel__zurueck {
	position: sticky; top: 0; z-index: 2;
	align-self: flex-start;
	font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.1em;
	background: none; border: 1px solid rgba(242, 237, 228, 0.35); border-radius: 99px;
	color: var(--kreide); padding: 0.45rem 1rem; cursor: pointer;
	transition: background var(--uebergang), border-color var(--uebergang), color var(--uebergang), transform var(--uebergang);
}
.tafel__zurueck { background: rgba(23, 18, 16, 0.85); backdrop-filter: blur(3px); }
.tafel__zurueck:hover { background: var(--rot); border-color: var(--rot); color: var(--weiss); transform: translateX(-3px); }
.tafel__mt-titel {
	font-family: var(--font-kreide); color: var(--weiss); text-align: center;
	font-size: clamp(2.2rem, 4.5vw, 3.2rem); margin: 0.4rem 0 1.4rem;
}
.tafel__mt-grid {
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; align-content: start;
}
.tafel__mt-tag {
	border: 1px dashed rgba(242, 237, 228, 0.22); border-radius: 12px;
	padding: 1.1rem 0.8rem; text-align: center;
	display: flex; flex-direction: column;
}
.tafel__mt-tag h4 {
	font-family: var(--font-body); font-size: 0.78rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.16em; color: var(--weiss); margin: 0;
}
.tafel__mt-datum {
	font-family: var(--font-body); font-size: 0.68rem; color: rgba(242, 237, 228, 0.5);
	margin: 0.15rem 0 0.6rem; border-bottom: 1px dashed rgba(242, 237, 228, 0.2); padding-bottom: 0.5rem;
}
.tafel__mt-tag ul { list-style: none; margin: 0; padding: 0; }
.tafel__mt-tag li { padding: 0.45rem 0; }
.tafel__mt-tag li + li { border-top: 1px dashed rgba(242, 237, 228, 0.14); }
.tafel__gericht {
	display: block;
	font-family: var(--font-kreide); font-size: clamp(1.45rem, 2.3vw, 1.8rem);
	line-height: 1.3; color: var(--weiss);
}
.tafel__zusatz {
	display: block;
	font-family: var(--font-kreide); font-size: clamp(1.1rem, 1.7vw, 1.3rem);
	line-height: 1.3; color: rgba(255, 255, 255, 0.72);
}
.tafel__mt-leer { color: rgba(242, 237, 228, 0.35); font-family: var(--font-kreide); font-size: 1.3rem; margin: 0; }
.tafel__mt-tag--leer { opacity: 0.55; }
.tafel__mittagstisch .tafel__hinweis { margin-top: 0.9rem; }

@media (max-width: 1100px) {
	.tafel__mt-grid { grid-template-columns: repeat(2, 1fr); }
	.tafel__mt-tag:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.tafel__mittagstisch { padding-inline: 1rem; }
	.tafel__mt-grid { grid-template-columns: 1fr; gap: 0.8rem; }
	.tafel__mt-tag { padding: 1rem 0.9rem; }
	.tafel__mt-tag:last-child { grid-column: auto; }
	.tafel__mt-titel { margin-top: 0.8rem; }
	.tafel__zurueck { padding: 0.6rem 1.2rem; font-size: 0.78rem; } /* größeres Touch-Ziel */
}
/* Award-Logos auf den Auszeichnungs-Karten */
.auszeichnung__logo {
	width: auto; height: 88px; max-width: 200px; object-fit: contain; margin-inline: auto;
	transition: transform var(--uebergang);
}
.auszeichnung:hover .auszeichnung__logo { transform: scale(1.06) rotate(-2deg); }

/* v1.10.1: Mittagstisch als echtes Popup – ×-Knopf, Overlay hängt an <body> */
.tafel__zu {
	position: fixed; top: 0.9rem; right: 1.1rem; z-index: 3;
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(23, 18, 16, 0.85); border: 1px solid rgba(242, 237, 228, 0.35);
	color: var(--weiss); font-size: 1.7rem; line-height: 1; cursor: pointer;
	backdrop-filter: blur(3px);
	transition: background var(--uebergang), border-color var(--uebergang), transform var(--uebergang);
}
.tafel__zu:hover { background: var(--rot); border-color: var(--rot); transform: rotate(90deg); }

/* v1.12.0: Shortcode-Bereich unter dem Hero */
.hero-shortcode { background: var(--papier); padding-block: clamp(1.5rem, 3vw, 2.5rem) 0; }

/* =========================================================================
   v1.13.0 – Award-Popups
   ========================================================================= */
.auszeichnung--klick { cursor: pointer; }
.auszeichnung--klick:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }
.auszeichnung__mehr {
	display: inline-block; margin-top: 0.9rem;
	color: var(--rot); font-weight: 600; font-size: 0.88rem;
	transition: transform var(--uebergang);
}
.auszeichnung--klick:hover .auszeichnung__mehr { transform: translateX(4px); }
.modal--award .modal__dialog { max-width: 560px; text-align: center; }
.modal__award-bild {
	width: auto; height: auto; max-width: min(70%, 300px); max-height: 200px;
	object-fit: contain; margin: 0 auto 1.2rem; display: block;
}
.modal__award-text { text-align: left; }
.modal__award-text p:last-child { margin-bottom: 0; }
.modal__award-buttons {
	display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap;
	margin: 1.4rem 0 0;
}

/* v1.13.3: Zusatzinfos in den Kategorie-Listen der Tafel (Leerzeile = neuer Eintrag) */
.tafel__liste li { padding-block: 0.35rem; }
.tafel__liste-zusatz {
	display: block; font-size: 0.72em; line-height: 1.3;
	color: rgba(242, 237, 228, 0.6); margin-top: 0.1rem;
}