/* Bausteine.
 *
 * Umgesetzt nach dem Redesign-Handoff vom 14.08.2026
 * (uploads/redesign/design_handoff_dari_duri_startseite/README.md).
 * Dort standen die Werte als Inline-Styles im Prototyp, hier stehen sie
 * als Theme-CSS mit Tokens.
 */

/* ======================================================================
   Kopf
   ====================================================================== */

/* Der Kopf liegt ueber dem Auftakt, nicht darueber gestapelt: dadurch
 * beginnt das Bild ganz oben und die Seite wirkt tiefer. Auf Unterseiten
 * ohne Auftaktbild bekommt er einen eigenen Grund (.kopf--fest). */
.kopf {
	position: absolute;
	inset: 0 0 auto;
	z-index: 30;
	background: linear-gradient(180deg, rgba(20, 8, 10, .72), rgba(20, 8, 10, 0));
}

.kopf--fest {
	position: sticky;
	background: var(--ink);
	border-bottom: 1px solid var(--linie);
}

.kopf__innen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	padding-block: 22px;
}

.kopf__marke {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}

.kopf__wappen,
.kopf__wappen img {
	height: 58px;
	width: auto;
	filter: drop-shadow(var(--schatten-logo));
}

.wortmarke {
	display: flex;
	flex-direction: column;
	gap: 5px;
	line-height: 1;
}

.wortmarke__name {
	display: flex;
	align-items: center;
	gap: .32em;
	font-family: var(--font-kopf);
	font-size: 22px;
	letter-spacing: var(--sperr-marke);
	text-transform: uppercase;
	color: var(--cream);
}

.wortmarke__raute {
	font-size: .5em;
	transform: translateY(-.08em);
	color: var(--gold);
}

.wortmarke__zusatz {
	font-family: var(--font-text);
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--gold-85);
}

.kopf__nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 22px;
}

.nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav a {
	font-size: var(--t-mini);
	font-weight: 400;
	letter-spacing: var(--sperr-nav);
	text-transform: uppercase;
	color: var(--cream);
	white-space: nowrap;
}

.nav a:hover,
.nav__punkt--aktiv a { color: var(--gold); }

.kopf__schalter { display: none; }

/* ======================================================================
   Knoepfe
   ====================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 17px 30px;
	border: 1px solid var(--gold-55);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--gold);
	font-family: var(--font-text);
	font-size: var(--t-mini);
	font-weight: 400;
	letter-spacing: var(--sperr-btn);
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--dauer) var(--kurve),
	            border-color var(--dauer) var(--kurve),
	            color var(--dauer) var(--kurve);
}

.btn:hover {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--wine);
}

/* Heller Umriss, fuer dunkle Bildflaechen. */
.btn--hell {
	border-color: rgba(246, 235, 216, .35);
	color: var(--cream);
	padding: 20px 34px;
	font-size: 13.5px;
}

.btn--hell:hover {
	background: rgba(246, 235, 216, .08);
	border-color: var(--cream);
	color: var(--cream);
}

.btn--gold {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--auf-gold);
}

.btn--gold:hover {
	background: var(--gold-hover);
	border-color: var(--gold-hover);
	color: var(--auf-gold);
}

/* Der Telefonknopf, zweizeilig. Es gibt kein Reservierungssystem, also
 * ist die Nummer der eigentliche Handlungsaufruf und darf gross sein. */
.btn-tel {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 20px 46px;
	border: 1px solid var(--gold);
	border-radius: var(--radius-sm);
	background: var(--gold);
	color: var(--auf-gold);
	line-height: 1;
	white-space: nowrap;
	box-shadow: var(--schatten-cta);
	transition: background-color var(--dauer) var(--kurve);
}

.btn-tel:hover {
	background: var(--gold-hover);
	color: var(--auf-gold);
}

.btn-tel__label {
	font-family: var(--font-text);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .26em;
	text-transform: uppercase;
	opacity: .72;
}

.btn-tel__nummer {
	font-family: var(--font-kopf);
	font-size: 27px;
}

.btn-tel--klein { padding: 18px 34px; }
.btn-tel--klein .btn-tel__nummer { font-size: 22px; }

/* Textlink mit Unterstrich, als leiser dritter Weg. */
.textlink {
	display: inline-block;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--gold-40);
	color: var(--gold);
	font-size: 13px;
	letter-spacing: var(--sperr-btn);
	text-transform: uppercase;
}

.textlink:hover {
	color: var(--gold-hover);
	border-bottom-color: var(--gold-hover);
}

/* ======================================================================
   Auftakt
   ====================================================================== */

.hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 760px;
	height: 100vh;
	max-height: 1000px;
	overflow: hidden;
	text-align: center;
}

.hero__grund {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--ink);
}

/* Das <picture> braucht eine eigene Hoehe, sonst ist es ein Inline-Kasten
 * ohne Mass und das height:100% des Bildes greift ins Leere. Genau das
 * war hier der Fall: das Bild stand im Seitenverhaeltnis der Breite,
 * object-fit hatte nie etwas zu beschneiden, object-position damit auch
 * keine Wirkung, und auf dem Handy blieb vom 772 Pixel hohen Auftakt ein
 * 223 Pixel hoher Bildstreifen ueber leerer Flaeche. */
.hero__grund picture,
.buehne__grund picture {
	display: block;
	width: 100%;
	height: 100%;
}

.hero__grund img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Der Teller sitzt im unteren Drittel des Bildes. */
	object-position: center 62%;
}

/* Ab hier ist das Fenster breiter, als das Bild bei voller Auftakthoehe
 * je waere (1536 mal 1,75 sind rund 1750 Pixel). Darueber zieht cover das
 * Bild immer weiter auf und zeigt vom Teller trotzdem nur einen Streifen:
 * ein einzelnes Khinkali wird so gross wie ein Kopf.
 *
 * Deshalb oberhalb dieser Grenze eine Box von 1600 Pixeln, die zu den
 * Seiten in den Grund auslaeuft. Das Gericht behaelt damit auf jedem
 * Schirm ungefaehr die Groesse, die es auf einem normalen Notebook hat,
 * statt mit der Fensterbreite immer weiter zu wachsen. */
@media (min-width: 1700px) {
	.hero__grund img {
		width: min(100%, 1600px);
		margin-inline: auto;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
		mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
	}
}

/* Zwei Scrims: der radiale nimmt die Mitte zurueck, der senkrechte
 * fuehrt oben unter den Kopf und unten in den naechsten Abschnitt. */
.hero__grund::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		/* Die Mitte ist im Handoff mit .35 angesetzt. Gemessen liegt der
		 * Eroeffnungshinweis dort bei 3,23:1, er steht in Gold auf einer
		 * hellen Stelle des Bildes. Mit .55 sind es 5,4:1, und das Bild
		 * bleibt trotzdem deutlich sichtbar. */
		radial-gradient(96% 82% at 50% 42%,
			rgba(20, 8, 10, .64) 0%,
			rgba(20, 8, 10, .68) 58%,
			rgba(20, 8, 10, .88) 100%),
		linear-gradient(180deg,
			rgba(20, 8, 10, .55) 0%,
			rgba(20, 8, 10, 0) 32%,
			rgba(20, 8, 10, .82) 100%);
}

.hero__innen {
	position: relative;
	z-index: 2;
	max-width: 860px;
	padding-top: 120px;
}

.hero__wappen {
	width: 250px;
	margin: 0 auto 34px;
	filter: drop-shadow(var(--schatten-logo-gross));
}

.hero__wappen img { width: 250px; height: auto; }

/* Kicker zwischen zwei Zierlinien. */
.kicker {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 26px;
	color: var(--gold);
	font-size: 11.5px;
	letter-spacing: .32em;
	text-transform: uppercase;
}

.kicker::before,
.kicker::after {
	content: "";
	width: 44px;
	height: 1px;
	background: rgba(232, 177, 92, .5);
}

.hero__titel {
	margin-bottom: .35em;
	text-shadow: 0 6px 30px rgba(0, 0, 0, .55);
}

.hero__lead {
	max-width: 600px;
	margin: 0 auto 44px;
}

.hero__aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px;
}

/* ======================================================================
   Die Kueche: Wortliste mit Tafel
   ====================================================================== */

.kueche { border-top: 1px solid var(--linie); }

.kueche__kopf {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 64px;
	align-items: end;
	margin-bottom: 76px;
}

.kueche__intro {
	color: var(--cream-72);
	font-size: var(--t-text);
}

.kueche__koerper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: 0 72px;
	align-items: start;
}

.wortliste {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--linie-2);
}

.wortliste__knopf {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
	padding: 26px 8px 26px 26px;
	border: 0;
	border-bottom: 1px solid var(--linie-2);
	background: transparent;
	color: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--dauer) var(--kurve);
}

.wortliste__knopf:hover { background: rgba(232, 177, 92, .06); }

/* Der goldene Balken markiert den aktiven Eintrag. */
.wortliste__knopf[aria-selected="true"]::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--gold);
}

.wortliste__zahl {
	width: 24px;
	flex: 0 0 24px;
	color: var(--gold-70);
	font-family: var(--font-text);
	font-size: var(--t-eyebrow);
	letter-spacing: .2em;
}

.wortliste__name {
	flex: 1;
	font-family: var(--font-kopf);
	font-size: clamp(26px, 2.6vw, 36px);
	color: var(--cream-hell);
	line-height: 1.2;
}

.wortliste__geo {
	font-family: var(--font-geo);
	font-size: 17px;
	color: var(--cream-55);
}

/* Die Tafel rechts. */
.tafel {
	position: relative;
	display: grid;
	align-content: center;
	min-height: 340px;
	padding: 56px 44px;
	background: var(--ink-raised);
	border: 1px solid var(--linie-2);
	border-radius: var(--radius);
	overflow: hidden;
}

.tafel[hidden] { display: none; }

/* Das Bild schimmert durch, es traegt nicht.
 *
 * Zwei Lagen darueber: ein Verlauf von links, damit die Flaeche unter der
 * Schrift ruhig bleibt, und eine gleichmaessige Abdunklung. Die Deckkraft
 * des Bildes ist bewusst niedrig: es soll Tiefe geben, nicht mit dem Text
 * konkurrieren. Gemessen nach dem Einbau, siehe docs/design.md.
 */
.tafel__grund {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
}

.tafel__grund img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .42;
}

.tafel__grund::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg,
			color-mix(in oklab, var(--ink-raised) 96%, transparent) 0%,
			color-mix(in oklab, var(--ink-raised) 82%, transparent) 45%,
			color-mix(in oklab, var(--ink-raised) 40%, transparent) 100%),
		linear-gradient(0deg,
			color-mix(in oklab, var(--ink) 38%, transparent),
			color-mix(in oklab, var(--ink) 38%, transparent));
}

/* Das georgische Wort als Praegung im Hintergrund. */
.tafel__praegung {
	position: absolute;
	right: -26px;
	bottom: -58px;
	font-family: var(--font-geo);
	z-index: 1;
	font-size: 150px;
	line-height: 1;
	color: rgba(232, 177, 92, .1);
	pointer-events: none;
	white-space: nowrap;
}

.tafel__eyebrow {
	position: relative;
	z-index: 2;
	margin-bottom: .8rem;
	color: var(--gold);
	font-size: var(--t-eyebrow);
	letter-spacing: .28em;
	text-transform: uppercase;
}

.tafel__titel {
	position: relative;
	z-index: 2;
	margin-bottom: .5em;
	font-size: 40px;
}

.tafel__text {
	position: relative;
	z-index: 2;
	max-width: 440px;
	margin: 0;
	font-size: 18px;
	line-height: 1.75;
	color: var(--cream-75);
}

.kueche__mehr { margin-top: 44px; }

/* ======================================================================
   Gerichte
   ====================================================================== */

.gerichte { background: var(--wine); }

.gerichte__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 68px;
}

.gerichte__kopf h2 { margin: 0; }

.gerichte__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gericht-karte {
	display: flex;
	flex-direction: column;
	background: var(--wine-deep);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	overflow: hidden;
}

.gericht-karte__bild {
	position: relative;
	height: 230px;
	background: var(--ink-raised);
}

.gericht-karte__bild img {
	width: 100%;
	height: 230px;
	object-fit: cover;
}

/* Ohne Foto: dunkle Flaeche mit dem Namen in Gold, statt einer leeren Box. */
.gericht-karte__leer {
	display: grid;
	place-items: center;
	height: 230px;
	padding: 20px;
	background: var(--ink-raised);
	color: var(--gold-70);
	font-family: var(--font-kopf);
	font-size: 22px;
	text-align: center;
}

.gericht-karte__text { padding: 28px 28px 32px; }

.gericht-karte__kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin-bottom: 12px;
}

.gericht-karte__name {
	margin: 0;
	font-size: 22px;
	letter-spacing: .04em;
}

.gericht-karte__beschreibung {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--cream-66);
}

/* Preise. Mehrzeilige Preise duerfen nicht mit nowrap laufen. */
.position__preis {
	font-family: var(--font-kopf);
	font-size: 20px;
	color: var(--gold);
	white-space: nowrap;
}

.position__preis--mehrfach {
	display: grid;
	justify-items: end;
	gap: 2px;
	text-align: right;
	line-height: 1.25;
	white-space: normal;
}

.position__preis--mehrfach .preis__zeile:not(:first-child) {
	font-family: var(--font-text);
	font-size: 12px;
	color: var(--cream-55);
}

.preis__zeile {
	display: inline-flex;
	align-items: baseline;
	gap: .4rem;
}

.preis__label {
	font-family: var(--font-text);
	font-size: var(--t-mini);
	color: var(--cream-55);
}

.position__preis--mehrfach .preis__zeile:not(:first-child) .preis__label {
	font-size: 12px;
}

/* ======================================================================
   Event-Buehne
   ====================================================================== */

.buehne {
	position: relative;
	display: grid;
	align-items: center;
	/* Waechst mit der Breite: bei festen 640 Pixeln steht das Band auf
	 * einem Widescreen im Verhaeltnis 4 zu 1 und zeigt vom Bild nur ein
	 * Drittel, in dem die Weinberge gar nicht vorkommen. */
	min-height: clamp(640px, 32vw, 860px);
	overflow: hidden;
}

.buehne__grund {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--ink);
}

.buehne__grund img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Die Rebzeilen stehen im unteren Drittel, die Bergkette darueber.
	 * Zentriert sieht man nur den Grat. */
	object-position: center 66%;
}

/* Dieselbe Deckelung wie im Auftakt, gleiche Grenze, gleiche Box, gleiches
 * Auslaufen zu den Seiten: die beiden Bildflaechen der Startseite sollen
 * auf einem breiten Schirm gleich gebaut sein und nicht die eine randlos
 * und die andere gefasst. */
@media (min-width: 1700px) {
	.buehne__grund img {
		width: min(100%, 1600px);
		margin-inline: auto;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
		mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
	}
}

.buehne__grund::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Deckt nur so viel ab, wie der Text braucht. Vorher lagen ueber der
	 * ganzen linken Haelfte 80 bis 93 Prozent Braunschwarz, und genau
	 * dort stehen die hellen Rebzeilen: vom Weinberg blieb der Bergkamm
	 * uebrig. Die Werte sind nachgemessen, siehe kontrast-auf-bild.py. */
	background: linear-gradient(100deg,
		rgba(20, 8, 10, .84) 0%,
		rgba(20, 8, 10, .5) 48%,
		rgba(20, 8, 10, .06) 100%);
}

.buehne__innen {
	position: relative;
	z-index: 2;
	max-width: 560px;
	padding-block: 110px;
}

.buehne__datum {
	margin-bottom: 1rem;
	font-family: var(--font-kopf);
	font-size: 21px;
	color: var(--gold);
}

.buehne__text { color: var(--cream-82); }

.buehne__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 2rem;
}

/* ======================================================================
   Besuchen Sie uns
   ====================================================================== */

.besuch__innen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 80px;
	align-items: start;
}

.besuch__adresse {
	margin: 0 0 .6rem;
	font-family: var(--font-kopf);
	font-size: 26px;
	font-style: normal;
	line-height: 1.45;
	color: var(--cream);
}

.besuch__hinweis {
	font-size: 16.5px;
	color: var(--cream-66);
}

.besuch__aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 2rem;
}

.zeiten-karte {
	padding: 44px 40px;
	background: var(--ink-raised);
	border: 1px solid var(--linie-2);
	border-radius: var(--radius);
}

.zeiten-karte h2,
.zeiten-karte h3 {
	margin-bottom: 1rem;
	font-size: var(--t-h3);
}

.zeiten-karte p { font-size: 17px; }

.zeiten-karte strong {
	font-weight: 500;
	color: var(--gold);
}

.zeiten-karte__leise {
	font-size: 16px;
	color: var(--cream-60);
}

/* Der Ruhetag steht bewusst abgesetzt unter den Zeiten, nicht als vierte
   Zeile mittendrin: sonst liest er sich wie eine weitere Öffnungszeit. */
.zeiten-ruhetag {
	margin-top: .55rem;
	font-size: 16px;
	color: var(--cream-72);
}

/* ======================================================================
   Fusszeile
   ====================================================================== */

.fuss {
	position: relative;
	isolation: isolate;
	padding-top: 80px;
	background: var(--wine);
	border-top: 1px solid var(--linie-2);
}

/* Die Silhouette von Tiflis als Abschluss der Seite.
 *
 * Dieselbe Maske wie im Fuss jedes Speisekarten-Abschnitts (siehe
 * karte.css), hier ueber die volle Fensterbreite und unten buendig: die
 * Seite endet in der Altstadt statt in einer leeren Flaeche.
 *
 * Auf Weinrot traegt Gold weniger weit als auf dem Braunschwarz der
 * Karte, deshalb hier eine Spur kraeftiger. */
.fuss::before {
	content: "";
	position: absolute;
	z-index: -1;
	/* Gedeckelt und zentriert, nicht ueber die ganze Fensterbreite: die
	 * Zeichnung ist 1400 Pixel breit, auf einem Widescreen wuerde sie auf
	 * 2560 gezogen und die Linien liefen weich auseinander. 1600 laesst
	 * ihr etwas mehr Raum als dem Inhalt (1180) und bleibt scharf. */
	inset-inline: 0;
	width: min(100%, 1600px);
	margin-inline: auto;
	bottom: 0;
	height: min(clamp(220px, 30vw, 400px), 100%);
	background: linear-gradient(to top, var(--gold) 0%, var(--gold) 20%, transparent 90%);
	opacity: .2;
	pointer-events: none;

	/* Zwei Maskenlagen, verschnitten: die Zeichnung und ein waagerechtes
	 * Ausblenden. Ohne das zweite steht die Stadt auf breiten Schirmen
	 * mit einer sauber abgeschnittenen Hauswand im Weinrot. */
	-webkit-mask-image:
		url("../img/panorama-tbilissi.webp"),
		linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
	mask-image:
		url("../img/panorama-tbilissi.webp"),
		linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
	-webkit-mask-size: 100% auto, 100% 100%;
	mask-size: 100% auto, 100% 100%;
	-webkit-mask-position: bottom center, center;
	mask-position: bottom center, center;
	-webkit-mask-repeat: no-repeat, no-repeat;
	mask-repeat: no-repeat, no-repeat;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

@media (max-width: 900px) {
	/* Wie in der Karte: auf schmalen Schirmen in die Zeichnung
	 * hineinzoomen, sonst zerfaellt sie in Grieselei. */
	.fuss::before {
		-webkit-mask-size: 230% auto;
		mask-size: 230% auto;
	}
}

.fuss__innen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 48px;
	padding-bottom: 56px;
	border-bottom: 1px solid rgba(232, 177, 92, .18);
}

.fuss__wappen img {
	width: 132px;
	height: auto;
	margin-bottom: 18px;
}

.fuss .wortmarke__name { font-size: 19px; }

.fuss__claim {
	margin-top: 6px;
	color: var(--cream-50);
	font-size: 10.5px;
	letter-spacing: .26em;
	text-transform: uppercase;
}

.fuss__titel {
	margin-bottom: 18px;
	font-family: var(--font-kopf);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: var(--sperr-nav);
	text-transform: uppercase;
	color: var(--gold);
}

.fuss__spalte p,
.fuss__adresse {
	font-size: var(--t-klein);
	font-style: normal;
	color: var(--cream-72);
}

.fuss__kontakt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin-top: 12px;
}

.fuss__liste {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--t-klein);
}

.fuss__unten {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 24px;
	padding-block: 28px 40px;
	/* .50 ergab auf dem Weinrot nur 3,48:1 und lag damit schon vor der
	 * Silhouette unter den 4,5:1 fuer Fliesstext. Der Kontrastlauf misst
	 * die Zeile erst, seit dort ein gemusterter Grund liegt. */
	color: var(--cream-72);
	font-size: var(--t-meta);
}

.fuss__unten p { margin: 0; }
/* Unterstrichen, nicht nur golden: der Link steht mitten im Fliesstext der
 * Signatur, und Farbe allein reicht als Unterscheidung nicht (WCAG 1.4.1,
 * von Lighthouse am 18.08.2026 als einziger A11y-Befund gemeldet). Die
 * uebrigen Links der Seite stehen fuer sich, dort ist es unkritisch. */
.fuss__signatur a {
	color: var(--gold);
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--gold-55);
}

.fuss__signatur a:hover { text-decoration-color: var(--gold); }

/* ======================================================================
   Hinweis an erzeugten Bildern
   ======================================================================

   Vom Kunden liegen keine Fotos vor, fast jedes Motiv ist erzeugt. Der
   Hinweis steht deshalb am Bild und nicht im Impressum: wer das Bild
   sieht, soll es wissen, ohne danach zu suchen.

   Leise, aber lesbar. Der Kasten bringt seinen eigenen Grund mit, weil er
   auf Fotos jeder Helligkeit liegt, und wird nicht mit ausgeblendet, wenn
   ein Abschnitt seine Reveal-Animation faehrt. */

.ki-hinweis {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	padding: 5px 10px;
	background: rgba(12, 5, 7, .72);
	border: 1px solid var(--linie-2);
	border-radius: 999px;
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--cream-82);
	backdrop-filter: blur(6px);
	pointer-events: none;
}

/* In den beiden vollflaechigen Baendern sitzt er am Rand des Textblocks,
   nicht am Rand des Fensters: auf einem Widescreen stuende er sonst
   allein in der Ecke, weit weg von allem anderen. */
.ki-hinweis--ecke {
	right: max(16px, calc(50vw - var(--maxw, 1180px) / 2 + 16px));
	bottom: 16px;
}

@media (max-width: 560px) {
	.ki-hinweis { right: 10px; bottom: 10px; padding: 4px 9px; font-size: 11px; }
}

/* ======================================================================
   Sticky-Leiste
   ====================================================================== */

.rufleiste {
	position: fixed;
	inset: auto 0 0;
	z-index: 60;
	display: flex;
	justify-content: center;
	padding: 0 20px 24px;
	pointer-events: none;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .2s ease-out, transform .2s ease-out;
}

.rufleiste[data-sichtbar="ja"] {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.rufleiste { transition: none; }
}

.rufleiste__pille {
	display: flex;
	gap: 2px;
	padding: 8px;
	background: rgba(28, 12, 14, .9);
	border: 1px solid var(--linie-3);
	border-radius: var(--radius-pill);
	box-shadow: var(--schatten-pille);
	backdrop-filter: blur(14px);
	pointer-events: auto;
}

.rufleiste__tel {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 14px 28px;
	border-radius: var(--radius-pill);
	background: var(--gold);
	color: var(--auf-gold);
	white-space: nowrap;
	transition: background-color var(--dauer) var(--kurve);
}

.rufleiste__tel:hover { background: var(--gold-hover); color: var(--auf-gold); }

.rufleiste__label {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	opacity: .7;
}

.rufleiste__nummer {
	font-family: var(--font-kopf);
	font-size: 19px;
}

.rufleiste__karte {
	display: flex;
	align-items: center;
	padding: 14px 26px;
	border-radius: var(--radius-pill);
	color: var(--cream);
	font-size: 12px;
	letter-spacing: var(--sperr-btn);
	text-transform: uppercase;
	transition: background-color var(--dauer) var(--kurve);
}

.rufleiste__karte:hover {
	background: rgba(246, 235, 216, .1);
	color: var(--cream);
}

/* ======================================================================
   Unterseiten
   ====================================================================== */

.seitenkopf {
	max-width: 760px;
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.seitenkopf .lead { margin-top: 1rem; }

.hinweis {
	padding: 20px 24px;
	background: var(--ink-raised);
	border-left: 2px solid var(--gold);
	border-radius: var(--radius);
	color: var(--cream-82);
}

.hinweis--grau {
	border-left-color: var(--linie-3);
	color: var(--cream-60);
}

.leerzustand {
	max-width: 54ch;
	padding: 44px 40px;
	background: var(--ink-raised);
	border: 1px solid var(--linie-2);
	border-radius: var(--radius);
}

.leerzustand__text { color: var(--cream-82); }

.leerzustand__hinweis {
	margin: 1rem 0 0;
	color: var(--cream-60);
	font-size: var(--t-klein);
}

/* Kapitel der Kuechen-Seite */
.kapitel-liste { display: grid; gap: clamp(48px, 6vw, 72px); }

.kapitel {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: clamp(16px, 3vw, 40px);
	align-items: start;
	padding-top: 32px;
	border-top: 1px solid var(--linie-2);
	scroll-margin-top: 110px;
}

.kapitel__geo {
	margin: 0 0 .4rem;
	font-family: var(--font-geo);
	font-size: 28px;
	line-height: 1;
	color: var(--gold-40);
}

.kapitel__wort { margin: 0 0 .3rem; font-size: clamp(28px, 2.6vw, 40px); }

.kapitel__unter {
	margin: 0;
	color: var(--cream-60);
	font-size: var(--t-klein);
	font-style: italic;
}

.kapitel__text { max-width: 62ch; color: var(--cream-75); }

.kapitel-abschluss {
	max-width: 62ch;
	margin-top: clamp(48px, 6vw, 72px);
	padding-top: 32px;
	border-top: 1px solid var(--linie-2);
}

/* Ankuendigung (Lieferung, Standorte) */
.ankuendigung {
	padding: 44px 40px;
	background: var(--ink-raised);
	border: 1px solid var(--linie-2);
	border-radius: var(--radius);
}

.ankuendigung__aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 2rem;
}

/* Standorte: mehrere Ankuendigungsblaecke untereinander. */
.standort { margin-bottom: clamp(24px, 3vw, 40px); }

.standort__titel { margin-bottom: 1rem; font-size: var(--t-h3); }

.standort .besuch__adresse { margin-bottom: .5rem; }

/* Partner */
.partnergruppe { margin-bottom: clamp(48px, 6vw, 72px); }

.partnergruppe__titel {
	margin-bottom: .5rem;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--linie-2);
	font-size: var(--t-h2);
}

.partnergruppe__text {
	max-width: 62ch;
	margin: 1rem 0 0;
	color: var(--cream-72);
}

.partner-liste {
	display: grid;
	/* auto-fill, nicht auto-fit: eine Gruppe mit einem einzigen Partner
	   soll eine Karte zeigen und kein Logofeld über die volle Breite. */
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 34px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}

.partner__logo {
	display: grid;
	place-items: center;
	height: 110px;
	margin-bottom: 20px;
	padding: 20px;
	background: var(--ink-raised);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
}

.partner__logo img { max-height: 64px; width: auto; object-fit: contain; }

/* Freifeld, solange ein Logo fehlt. Gestrichelt, damit es als Platzhalter
   lesbar ist und nicht als leere Karte, die kaputt aussieht. */
.partner__logo--leer {
	background: none;
	border-style: dashed;
	border-color: var(--linie-2);
}

.partner__logo--leer span {
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cream-60);
}

.partner__name { margin-bottom: .4rem; font-size: 22px; }
.partner__name a { color: var(--cream-hell); }
.partner__name a:hover { color: var(--gold); }

.partner__text { margin: 0; color: var(--cream-66); font-size: var(--t-klein); }

/* Veranstaltungen */
.events {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 34px;
}

.event {
	display: flex;
	flex-direction: column;
	background: var(--ink-raised);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	overflow: hidden;
}

.event__bild img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.event__inhalt { padding: 32px 28px; }

.event__termin {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 16px;
	margin-bottom: .6rem;
	color: var(--gold);
	font-size: var(--t-klein);
}

.event__tag { font-family: var(--font-kopf); font-size: 17px; }
.event__zeit { color: var(--cream-60); }

.event__hinweis {
	padding: 2px 10px;
	border: 1px solid var(--linie-2);
	border-radius: var(--radius-pill);
	color: var(--cream-60);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.event__titel { margin-bottom: .5rem; font-size: 26px; }
.event__titel a { color: var(--cream-hell); }
.event__titel a:hover { color: var(--gold); }

.event__text { margin: 0; color: var(--cream-66); font-size: var(--t-klein); }

/* Rueckblick: vergangene Termine, sichtbar aber zurueckgenommen. Das Raster
 * fuellt hier nicht die ganze Breite auf, sonst wird aus einer einzelnen
 * vergangenen Veranstaltung eine Karte ueber 1180 Pixel. */
.rueckblick { margin-top: clamp(56px, 7vw, 88px); }

.rueckblick__titel { margin-bottom: .5rem; font-size: var(--t-h3); }

.rueckblick__text {
	max-width: 62ch;
	margin-bottom: clamp(28px, 4vw, 40px);
	color: var(--cream-60);
	font-size: var(--t-klein);
}

.rueckblick .events { grid-template-columns: repeat(auto-fill, minmax(320px, 420px)); }

.event--vorbei { border-color: var(--linie); background: transparent; }
.event--vorbei .event__termin { color: var(--cream-60); }
.event--vorbei .event__bild img { filter: saturate(.75); opacity: .8; }

.event-einzeln__termin {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 1.5rem;
	font-family: var(--font-kopf);
	font-size: 21px;
	color: var(--gold);
}

.event-einzeln__bild {
	width: 100%;
	margin-bottom: 2rem;
	border-radius: var(--radius);
}

.event-einzeln__ort {
	margin-top: 2rem;
	color: var(--cream-66);
	font-size: var(--t-klein);
}

/* Kontaktseite */
.kontaktseite {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	gap: 80px;
	align-items: start;
	margin-bottom: clamp(48px, 6vw, 72px);
}

.kontaktseite__daten .fuss__titel { margin-top: 28px; }
.kontaktseite__daten .fuss__titel:first-child { margin-top: 0; }

.karte-bild {
	width: 100%;
	border: 1px solid var(--linie-2);
	border-radius: var(--radius);
}

.kontaktseite__quelle {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 20px;
	margin: 12px 0 0;
	color: var(--cream-50);
	font-size: var(--t-meta);
}

.kontaktseite__quelle a { color: var(--cream-60); }
.kontaktseite__quelle a:hover { color: var(--gold); }

/* Formular */
.anfrage-block { max-width: 760px; }
.anfrage-block .lead { margin-bottom: 2rem; }

.formular__form {
	padding: 40px 36px;
	background: var(--ink-raised);
	border: 1px solid var(--linie-2);
	border-radius: var(--radius);
}

.formular__reihe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 18px;
}

.feld {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 18px;
}

.feld label {
	color: var(--cream);
	font-size: var(--t-mini);
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.feld input,
.feld textarea {
	padding: 14px 16px;
	background: var(--ink);
	border: 1px solid var(--linie-2);
	border-radius: var(--radius-sm);
	color: var(--cream);
	font-family: var(--font-text);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
}

.feld input:focus,
.feld textarea:focus {
	border-color: var(--gold);
	outline: 2px solid var(--gold-40);
	outline-offset: 1px;
}

.feld input::placeholder,
.feld textarea::placeholder { color: var(--cream-50); }

.feld__hilfe { color: var(--cream-60); font-size: var(--t-mini); }

.feld--zustimmung {
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
	margin-top: 8px;
}

.feld--zustimmung input { margin-top: 4px; }

.feld--zustimmung label {
	font-size: var(--t-klein);
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cream-72);
}

.formular__honig {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.formular__form button { margin-top: 16px; }

.formular__fusszeile {
	margin: 20px 0 0;
	color: var(--cream-60);
	font-size: var(--t-meta);
}

.formular__meldung {
	margin-bottom: 24px;
	padding: 20px 24px;
	background: var(--ink-raised);
	border-left: 2px solid var(--gold);
	border-radius: var(--radius);
	color: var(--cream);
}

.formular__meldung--fehler { border-left-color: #D98A6A; }

/* Speisekarte: Bildband ueber den Bereichen */
.band { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); }

.band img { width: 100%; height: 100%; object-fit: cover; }

.band--kopf { margin-bottom: clamp(40px, 5vw, 56px); }
.band--kopf img { aspect-ratio: 21 / 8; max-height: 380px; }

.band--kapitel { margin-top: 28px; }
.band--kapitel img { aspect-ratio: 3 / 2; max-height: 320px; }

/* ======================================================================
   Schmale Fenster
   ====================================================================== */

@media (max-width: 900px) {

	.kopf__innen { padding-block: 16px; }

	.kopf__wappen,
	.kopf__wappen img { height: 46px; }

	.wortmarke__name { font-size: 18px; }
	.wortmarke__zusatz { font-size: 9px; letter-spacing: .22em; }

	.kopf__schalter {
		display: grid;
		place-items: center;
		width: 46px;
		height: 46px;
		padding: 0;
		border: 1px solid var(--gold-55);
		border-radius: var(--radius-xs);
		background: transparent;
		cursor: pointer;
	}

	.kopf__schalter-strich,
	.kopf__schalter-strich::before,
	.kopf__schalter-strich::after {
		display: block;
		width: 18px;
		height: 1px;
		background: var(--gold);
		transition: transform var(--dauer) var(--kurve);
	}

	.kopf__schalter-strich::before,
	.kopf__schalter-strich::after {
		content: "";
		position: absolute;
	}

	.kopf__schalter-strich::before { transform: translateY(-6px); }
	.kopf__schalter-strich::after  { transform: translateY(6px); }

	.kopf__schalter[aria-expanded="true"] .kopf__schalter-strich { background: transparent; }
	.kopf__schalter[aria-expanded="true"] .kopf__schalter-strich::before { transform: rotate(45deg); }
	.kopf__schalter[aria-expanded="true"] .kopf__schalter-strich::after  { transform: rotate(-45deg); }

	.kopf__nav {
		position: absolute;
		inset: 100% 0 auto;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 12px var(--rand) 28px;
		background: var(--ink);
		border-bottom: 1px solid var(--linie-2);
	}

	.kopf__nav[data-offen="ja"] { display: flex; }

	.nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.nav a {
		display: flex;
		align-items: center;
		min-height: 52px;
		border-bottom: 1px solid var(--linie);
		font-size: 14px;
	}

	.kopf__nav .btn-tel { margin-top: 20px; }

	.hero { min-height: 640px; height: auto; padding-block: 0 72px; }
	.hero__innen { padding-top: 140px; }
	.hero__wappen,
	.hero__wappen img { width: 170px; }
	.hero__wappen { margin-bottom: 24px; }
	.hero__lead { margin-bottom: 32px; }

	.kicker { font-size: 10px; letter-spacing: .24em; gap: 10px; }
	.kicker::before, .kicker::after { width: 24px; }

	.kueche__kopf { gap: 32px; margin-bottom: 48px; }
	.kueche__koerper { gap: 32px; }

	.tafel { min-height: 0; padding: 36px 28px; }
	.tafel__titel { font-size: 30px; }
	.tafel__text { font-size: 16.5px; }
	.tafel__praegung { font-size: 96px; right: -14px; bottom: -34px; }

	.wortliste__knopf { padding: 20px 8px 20px 20px; gap: 14px; }

	.buehne { min-height: 0; }
	.buehne__innen { padding-block: 80px; }
	.buehne__grund::after {
		background: linear-gradient(180deg,
			rgba(20, 8, 10, .6) 0%,
			rgba(20, 8, 10, .82) 45%,
			var(--ink) 100%);
	}

	.besuch__innen { gap: 44px; }
	.zeiten-karte { padding: 32px 28px; }

	.gerichte__kopf { gap: 20px; margin-bottom: 40px; }

	.kontaktseite { grid-template-columns: 1fr; gap: 40px; }
	.kapitel { grid-template-columns: 1fr; gap: 12px; }
	.formular__form { padding: 28px 24px; }

	.fuss { padding-top: 56px; }
	.fuss__innen { gap: 36px; padding-bottom: 40px; }

	.rufleiste { padding: 0 12px 16px; }
	.rufleiste__pille { width: 100%; }
	.rufleiste__tel { flex: 1; justify-content: center; padding: 14px 18px; }
	.rufleiste__nummer { font-size: 17px; }
	.rufleiste__karte { padding: 14px 18px; }
}

@media (max-width: 560px) {
	.rufleiste__label { display: none; }
	.btn-tel { padding: 16px 28px; }
	.btn-tel__nummer { font-size: 22px; }
	.hero__aktionen { gap: 12px; }
	.partner__logo { height: 90px; }
}

/* Kleinteile, die sonst ohne Regel dastehen. */
.besuch__mail { margin-top: 16px; }
.besuch__mail a { font-size: var(--t-klein); }
.fuss__copy { margin: 0; }
.kueche__tafeln { display: grid; gap: 24px; }

/* Antippflaechen auf dem Handy -------------------------------------------
 *
 * Gemessen ueber das DevTools-Protokoll: alles unter 44 Pixel Hoehe wird
 * auf einem Telefon zur Gluecksache. Vergroessert wird die Trefferflaeche,
 * nicht die Schrift. Links mitten im Fliesstext sind ausgenommen, die
 * liessen sich ohne zerrissenen Satz nicht aufblasen.
 */
@media (max-width: 500px) {

	.kopf__marke,
	.textlink,
	.sprungnav__link,
	.fuss__liste a,
	.fuss__kontakt a,
	.kontaktseite__quelle a,
	.leerzustand__hinweis a,
	.event__titel a,
	.partner__name a,
	.besuch__mail a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.textlink { padding-bottom: 0; align-items: flex-end; }
	.fuss__liste { gap: 0; }
	.fuss__kontakt { gap: 0; }
}