/*
Theme Name: Taş Fırın
Theme URI: https://tasfirin-koeln.de/
Author: amitry.agency
Description: Block-Theme für Taş Fırın – Damla Gaziantep, Köln. Papierbogen auf Anthrazit, Literata und Space Grotesk lokal eingebunden, Speisekarte, Öffnungszeiten, Vorbestellung, QR-Code und Druckkarte aus einer Datenquelle. Einrichtung unter Design → Taş Fırın.
Version: 1.0.1
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tasfirin
Tags: block-patterns, full-site-editing, one-column, custom-logo, editor-style
*/

/* ==========================================================================
   0  Grundlagen
   ========================================================================== */

:root {
	--tf-papier: var(--wp--preset--color--papier, #F3EEE5);
	--tf-papier-tief: var(--wp--preset--color--papier-tief, #E9E2D6);
	--tf-tinte: var(--wp--preset--color--tinte, #211F1C);
	--tf-grau: var(--wp--preset--color--grau, #655F56);
	--tf-linie: var(--wp--preset--color--linie, #CDC4B6);
	--tf-feldrand: var(--wp--preset--color--feldrand, #7F786D);
	--tf-glut: var(--wp--preset--color--glut, #A8371A);
	--tf-funke: var(--wp--preset--color--funke, #E0502A);
	--tf-rahmen: var(--wp--preset--color--rahmen, #262523);
	--tf-serif: var(--wp--preset--font-family--serif, Georgia, serif);
	--tf-grotesk: var(--wp--preset--font-family--grotesk, Arial, sans-serif);
	--tf-label-breite: clamp(9.5rem, 16vw, 13.5rem);
	--tf-spalt: clamp(1.5rem, 4.6vw, 5rem);
	--tf-abschnitt: clamp(2.75rem, 6.5vw, 6rem);
	--tf-oben: 1.5rem;
}

body.admin-bar { --tf-oben: calc(32px + 1.5rem); }

@media (max-width: 782px) {
	body.admin-bar { --tf-oben: 1.5rem; }
}

html { scroll-padding-top: 5rem; }

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	font-optical-sizing: auto;
	font-kerning: normal;
	font-variant-ligatures: common-ligatures;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, address { text-wrap: pretty; }
p, li { hyphens: auto; -webkit-hyphens: auto; }
[lang="tr"] { hyphens: manual; -webkit-hyphens: manual; }

::selection { background: var(--tf-tinte); color: var(--tf-papier); }

:focus-visible {
	outline: 2px solid var(--tf-funke);
	outline-offset: 3px;
}

a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

address { font-style: normal; }

.screen-reader-text:not(:focus) {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link.screen-reader-text:focus {
	position: fixed; top: 0.75rem; left: 0.75rem; z-index: 100000;
	padding: 0.75rem 1rem;
	background: var(--tf-tinte); color: var(--tf-papier);
	font: 500 0.8125rem/1 var(--tf-grotesk);
	letter-spacing: 0.12em; text-transform: uppercase;
}

/* ==========================================================================
   1  Papierbogen auf Anthrazit (nur im Frontend, Klasse kommt über body_class)
   ========================================================================== */

body.tf-boxed { background: var(--tf-rahmen); }

body.tf-boxed .wp-site-blocks {
	max-width: 1280px;
	margin: clamp(0px, 2.4vw, 32px) auto;
	min-height: calc(100vh - 2 * clamp(0px, 2.4vw, 32px));
	background: var(--tf-papier);
	display: flex;
	flex-direction: column;
}

body.tf-boxed .wp-site-blocks > main { flex: 1 0 auto; }

@media (max-width: 899px) {
	body.tf-boxed .wp-site-blocks { margin: 0; min-height: 100vh; }
}

/* ==========================================================================
   2  Typografische Bausteine
   ========================================================================== */

.tf-kicker,
.is-style-tf-etikett {
	font-family: var(--tf-grotesk);
	font-size: var(--wp--preset--font-size--etikett);
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.35;
	text-transform: uppercase;
	color: var(--tf-grau);
}

.tf-lead {
	font-size: var(--wp--preset--font-size--mittel);
	line-height: 1.45;
}

.is-layout-flow > .tf-lead { max-width: 34em; }

h1 em,
.tf-titel em {
	font-style: italic;
	color: var(--tf-glut);
}

.tf-platzhalter {
	font-style: italic;
	color: var(--tf-grau);
	text-decoration: underline dashed var(--tf-feldrand) 1px;
	text-underline-offset: 0.22em;
}

.tf-platzhalter-absatz {
	padding: 1rem 1.15rem;
	border: 1px dashed var(--tf-feldrand);
	color: var(--tf-grau);
	font-style: italic;
}

.tf-hinweis-intern {
	font: 500 0.75rem/1.4 var(--tf-grotesk);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tf-glut);
}

/* Knöpfe ------------------------------------------------------------------ */

.wp-element-button,
.wp-block-button__link { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }

.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-tf-kontur > .wp-block-button__link,
.tf-knopf--kontur {
	background: transparent;
	color: var(--tf-tinte);
	border: 1px solid var(--tf-tinte);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-tf-kontur > .wp-block-button__link:hover,
.tf-knopf--kontur:hover {
	background: transparent;
	color: var(--tf-glut);
	border-color: var(--tf-glut);
}

.tf-textlink {
	font-family: var(--tf-grotesk);
	font-size: var(--wp--preset--font-size--etikett);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.2em;
}

.tf-textlink:hover { color: var(--tf-glut); }

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

.tf-kopf { border-bottom: 1px solid var(--tf-linie); }

body .tf-kopf__zeile {
	min-height: 5.25rem;
	padding-block: 1rem;
	gap: 1.5rem;
}

.tf-marke { display: block; line-height: 0; color: var(--tf-tinte); }
.tf-marke a { display: block; color: inherit; }
.tf-marke svg { display: block; width: 100%; height: auto; }
.tf-marke img { display: block; width: 100%; height: auto; }
.tf-marke--schriftzug { width: var(--tf-marke-breite, 10.5rem); }
.tf-marke--siegel { width: var(--tf-marke-breite, 7rem); }

@media (max-width: 600px) {
	.tf-kopf .tf-marke--schriftzug { width: 8.25rem; }
}

.tf-nav .wp-block-navigation-item__content { text-decoration: none; padding-block: 0.4rem; }
.tf-nav .wp-block-navigation-item__content:hover { color: var(--tf-glut); }
.tf-nav .current-menu-item > .wp-block-navigation-item__content,
.tf-nav [aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.5em;
}

.tf-nav .tf-nav-knopf > .wp-block-navigation-item__content {
	border: 1px solid var(--tf-tinte);
	padding: 0.85em 1.25em 0.8em;
}

.tf-nav .tf-nav-knopf > .wp-block-navigation-item__content:hover {
	border-color: var(--tf-glut);
}

/* Telefon-/Tablet-Menü: unter 900 px klappt das Menü ein (Core klappt erst unter 600 px). */
@media (min-width: 600px) and (max-width: 900px) {
	.tf-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.tf-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

.tf-nav .wp-block-navigation__responsive-container-open,
.tf-nav .wp-block-navigation__responsive-container-close {
	width: 2.75rem; height: 2.75rem;
	align-items: center; justify-content: center;
}

.tf-nav .wp-block-navigation__responsive-container-open svg,
.tf-nav .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }

.tf-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(1.25rem, 5vw, 3rem);
	background: var(--tf-papier);
}

.tf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4.5rem;
	align-items: flex-start;
}

.tf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
	align-items: stretch;
}

.tf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid var(--tf-linie);
	width: 100%;
}

.tf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.9rem 0 !important;
	font-family: var(--tf-serif);
	font-size: clamp(1.75rem, 6vw, 2.5rem);
	letter-spacing: -0.01em;
	text-transform: none;
	border: 0;
}

/* ==========================================================================
   4  Seitenaufbau: Hero, Seitenkopf, redaktionelles Raster
   ========================================================================== */

body .tf-hero {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	column-gap: clamp(2rem, 5vw, 5.5rem);
	row-gap: 2.5rem;
	align-items: end;
	padding-block: clamp(3rem, 7vw, 6.5rem) clamp(2.75rem, 5.5vw, 5rem);
}

body .tf-hero > * { margin-block: 0; }

.tf-hero__text > * { margin-block: 0; }
.tf-hero__text > .tf-kicker { margin-bottom: 1.4rem; }

.tf-hero__titel {
	font-size: clamp(2.75rem, 1.2rem + 4.6vw, 5.5rem);
	line-height: 1.01;
	letter-spacing: -0.022em;
	margin-bottom: 1.6rem !important;
	max-width: 11.5em;
}

.tf-hero__text > .tf-lead { margin-bottom: 2.1rem; }

@media (max-width: 860px) {
	body .tf-hero { grid-template-columns: minmax(0, 1fr); }
	.tf-hero__bild { max-width: 34rem; }
}

body .tf-seitenkopf {
	padding-block: clamp(3rem, 6.5vw, 6rem) clamp(2rem, 4vw, 3.5rem);
}

body .tf-seitenkopf > * { margin-block: 0; }
.tf-seitenkopf .tf-kicker { margin-bottom: 1.2rem; }
.tf-seitenkopf h1 { margin-bottom: 1.25rem; }
.tf-seitenkopf.is-layout-flow h1 { max-width: 14em; }

body .tf-seitenkopf--einfach { padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
.tf-seitenkopf--einfach .wp-block-post-title { font-size: var(--wp--preset--font-size--titel); margin: 0; }
.tf-seitenkopf--einfach .wp-block-query-title { margin: 0; }

.tf-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tf-tinte); }
.tf-liste__eintrag { padding-block: 1.75rem; border-bottom: 1px solid var(--tf-linie); }
body .tf-liste__eintrag > * { margin-block: 0; }
.tf-liste__eintrag .wp-block-post-title { margin-block: 0.5rem 0.6rem; font-size: var(--wp--preset--font-size--gross); }
.tf-liste__eintrag .wp-block-post-title a { text-decoration: none; }

.tf-besuch__kontakt > * + * { margin-top: 1.5rem; }
.tf-zeiten-leer { margin: 0; }

body .tf-raster {
	display: grid;
	grid-template-columns: var(--tf-label-breite) minmax(0, 1fr);
	column-gap: var(--tf-spalt);
	row-gap: 1.25rem;
	padding-block: var(--tf-abschnitt);
	border-top: 1px solid var(--tf-linie);
}

body .tf-raster > * { margin-block: 0; }

.tf-raster__label {
	position: sticky;
	top: var(--tf-oben);
	align-self: start;
}

.tf-raster__label > * { margin-block: 0; }
.tf-raster__label .tf-kicker { color: var(--tf-tinte); }

.tf-raster__inhalt > :first-child { margin-top: 0; }
.tf-raster__inhalt > h2 { margin-bottom: 1.25rem; max-width: 18em; }
.tf-raster__inhalt > p { max-width: 36em; }

.tf-zweispaltig {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem var(--tf-spalt);
}

body .tf-zweispaltig > * { margin-block: 0; }

@media (max-width: 760px) {
	body .tf-raster { grid-template-columns: minmax(0, 1fr); }
	.tf-raster__label { position: static; }
	.tf-zweispaltig { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   5  Bilder und Bildplätze
   ========================================================================== */

.tf-bild { margin-inline: 0; margin-bottom: 0; }
.tf-bild--hoch, .tf-bild--siegel { max-width: 24rem; }

.tf-bild__rahmen {
	position: relative;
	border: 1px solid var(--tf-tinte);
	padding: clamp(0.5rem, 1.1vw, 0.875rem);
	background: var(--tf-papier);
}

.tf-bild__rahmen img,
.tf-bild__rahmen svg { display: block; width: 100%; height: auto; }

.tf-bild--zeichnung .tf-bild__rahmen {
	padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 3.4vw, 2.75rem);
	color: var(--tf-tinte);
}

.tf-bild--siegel .tf-bild__rahmen { padding: clamp(2rem, 5vw, 3.5rem); }
.tf-bild--siegel .tf-bild__rahmen img { max-width: 16rem; margin-inline: auto; }

.tf-bild__text {
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--klein);
	font-style: italic;
	color: var(--tf-grau);
}

.tf-bild__intern {
	position: absolute;
	top: 0.6rem; right: 0.6rem;
	padding: 0.35rem 0.55rem;
	background: var(--tf-papier);
	border: 1px dashed var(--tf-glut);
}

.tf-bild--leer .tf-bild__rahmen {
	aspect-ratio: 3 / 2;
	display: grid;
	place-items: center;
	border-style: dashed;
	border-color: var(--tf-feldrand);
	color: var(--tf-grau);
	text-align: center;
	padding: 1.5rem;
}

.tf-bild--hoch.tf-bild--leer .tf-bild__rahmen { aspect-ratio: 4 / 5; }

/* ==========================================================================
   6  Speisekarte
   ========================================================================== */

.tf-karte { --tf-preis-breite: 4.9rem; }

.tf-karte__sprung {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	gap: 0.25rem 1.75rem;
	overflow-x: auto;
	scrollbar-width: none;
	margin: 0;
	padding: 1rem 0 0.95rem;
	list-style: none;
	background: var(--tf-papier);
	border-top: 1px solid var(--tf-tinte);
	border-bottom: 1px solid var(--tf-linie);
}

body.admin-bar .tf-karte__sprung { top: 32px; }

@media (max-width: 782px) {
	body.admin-bar .tf-karte__sprung { top: 0; }
}

.tf-karte__sprung a {
	font-family: var(--tf-grotesk);
	font-size: var(--wp--preset--font-size--etikett);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.tf-karte__sprung a:hover { color: var(--tf-glut); }

.tf-rubrik {
	display: grid;
	grid-template-columns: var(--tf-label-breite) minmax(0, 1fr);
	column-gap: var(--tf-spalt);
	row-gap: 1.25rem;
	padding-block: clamp(2.5rem, 5.5vw, 4.75rem);
	border-bottom: 1px solid var(--tf-linie);
	scroll-margin-top: 4.5rem;
}

.tf-rubrik:last-of-type { border-bottom: 0; }

.tf-rubrik__kopf {
	position: sticky;
	top: calc(var(--tf-oben) + 3.25rem);
	align-self: start;
}

.tf-rubrik__kopf > * { margin: 0; }
.tf-rubrik__kopf .tf-kicker { color: var(--tf-tinte); margin-bottom: 0.9rem; }

.tf-rubrik__titel {
	font-size: var(--wp--preset--font-size--mittel);
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 0.75rem !important;
}

.tf-rubrik__text {
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.5;
	color: var(--tf-grau);
}

.tf-rubrik__angebot {
	margin-top: 1.1rem !important;
	padding-top: 0.85rem;
	border-top: 1px solid var(--tf-linie);
	font-family: var(--tf-grotesk);
	font-size: var(--wp--preset--font-size--etikett);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.45;
	text-transform: uppercase;
	color: var(--tf-glut);
}

.tf-spalten,
.tf-gericht {
	display: grid;
	grid-template-columns: minmax(0, 1fr) repeat(var(--tf-n, 1), var(--tf-preis-breite));
	column-gap: 0.5rem;
}

.tf-spalten {
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--tf-tinte);
	font-family: var(--tf-grotesk);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--tf-grau);
}

.tf-spalten span { text-align: right; }

.tf-gerichte { list-style: none; margin: 0; padding: 0; }

.tf-gericht {
	align-items: baseline;
	padding: 1.15rem 0 1.1rem;
	border-bottom: 1px solid var(--tf-linie);
}

.tf-gerichte--ohne-kopf .tf-gericht:first-child { border-top: 1px solid var(--tf-tinte); }

.tf-gericht > * { margin: 0; }

.tf-gericht__name {
	font-size: 1.1875rem;
	font-weight: 560;
	line-height: 1.3;
	letter-spacing: 0;
	margin: 0;
}

.tf-gericht__de {
	margin: 0.15rem 0 0;
	font-style: italic;
}

.tf-gericht__zutaten {
	margin: 0.2rem 0 0;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.5;
	color: var(--tf-grau);
}

.tf-kz {
	margin-left: 0.3em;
	font-family: var(--tf-grotesk);
	font-size: 0.6em;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 0;
	vertical-align: 0.65em;
	color: var(--tf-grau);
}

.tf-gericht__preis {
	text-align: right;
	font-size: 1.0625rem;
	color: var(--tf-glut);
	font-variant-numeric: tabular-nums lining-nums;
	white-space: nowrap;
}

.tf-gericht__groesse {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.tf-legende {
	display: grid;
	grid-template-columns: var(--tf-label-breite) minmax(0, 1fr);
	column-gap: var(--tf-spalt);
	padding-block: 2rem 0;
	border-top: 1px solid var(--tf-tinte);
	font-size: var(--wp--preset--font-size--klein);
	color: var(--tf-grau);
}

.tf-legende > * { margin: 0; }
.tf-legende dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 2rem; margin: 0; }
.tf-legende dl div { display: flex; gap: 0.6rem; }
.tf-legende dt { font-family: var(--tf-grotesk); font-weight: 500; color: var(--tf-tinte); min-width: 1.1em; }
.tf-legende dd { margin: 0; }
.tf-legende .tf-kicker { color: var(--tf-tinte); }
.tf-legende__fuss { margin-top: 1.25rem !important; }

@media (max-width: 760px) {
	.tf-rubrik, .tf-legende { grid-template-columns: minmax(0, 1fr); }
	.tf-rubrik__kopf { position: static; }
	.tf-legende__inhalt { margin-top: 1rem; }
	.tf-legende dl { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
	.tf-spalten { display: none; }
	.tf-gerichte .tf-gericht { grid-template-columns: minmax(0, 1fr); }
	.tf-gerichte--mehrere .tf-gericht:first-child { border-top: 1px solid var(--tf-tinte); }
	.tf-gericht__preise-mobil { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 0.55rem; }
	.tf-gericht__preis { text-align: left; }
	.tf-gerichte--mehrere .tf-gericht__groesse {
		position: static;
		width: auto; height: auto;
		overflow: visible;
		clip-path: none;
		margin-right: 0.35em;
		font-family: var(--tf-grotesk);
		font-size: 0.75rem;
		font-weight: 500;
		letter-spacing: 0.1em;
		color: var(--tf-grau);
	}
	.tf-gerichte--einzeln .tf-gericht { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (min-width: 561px) {
	.tf-gericht__preise-mobil { display: contents; }
}

/* Auszug auf der Startseite */

.tf-auszug { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tf-tinte); }
.tf-auszug__eintrag { border-bottom: 1px solid var(--tf-linie); }

.tf-auszug__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 1.5rem;
	align-items: baseline;
	padding: 1.5rem 0 1.4rem;
	color: inherit;
	text-decoration: none;
}

.tf-auszug__name {
	font-size: var(--wp--preset--font-size--gross);
	line-height: 1.1;
	letter-spacing: -0.012em;
}

.tf-auszug__titel { display: block; margin-top: 0.35rem; font-style: italic; }
.tf-auszug__text { display: block; margin-top: 0.3rem; font-size: var(--wp--preset--font-size--klein); color: var(--tf-grau); max-width: 36em; }

.tf-auszug__ab {
	font-family: var(--tf-grotesk);
	font-size: var(--wp--preset--font-size--etikett);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--tf-glut);
}

.tf-auszug__pfeil { display: inline-block; margin-left: 0.6em; color: var(--tf-tinte); transition: transform 0.25s ease; }
.tf-auszug__link:hover .tf-auszug__name { color: var(--tf-glut); }
.tf-auszug__link:hover .tf-auszug__pfeil { transform: translateX(4px); }

@media (max-width: 560px) {
	.tf-auszug__link { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; }
}

/* ==========================================================================
   7  Wochenend-Angebot
   ========================================================================== */

body .tf-angebot {
	display: grid;
	grid-template-columns: var(--tf-label-breite) minmax(0, 1fr);
	column-gap: var(--tf-spalt);
	row-gap: 1rem;
	align-items: center;
	padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
	border-top: 1px solid var(--tf-tinte);
	border-bottom: 1px solid var(--tf-tinte);
}

body .tf-angebot > * { margin: 0; }
.tf-angebot + .tf-raster,
.tf-angebot + .tf-karte .tf-karte__sprung { border-top: 0; }
.tf-angebot__kopf > * { margin: 0; }
.tf-angebot__kopf .tf-kicker { color: var(--tf-tinte); }
.tf-angebot__tage { margin-top: 0.3rem !important; font-style: italic; }

.tf-angebot__regeln {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1rem var(--tf-spalt);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tf-angebot__regel {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.tf-angebot__was { font-size: var(--wp--preset--font-size--mittel); }

.tf-angebot__preis {
	font-size: var(--wp--preset--font-size--gross);
	line-height: 1;
	color: var(--tf-glut);
	font-variant-numeric: lining-nums;
	white-space: nowrap;
}

.tf-angebot--kompakt { grid-template-columns: minmax(0, 1fr); }
.tf-angebot--kompakt .tf-angebot__kopf { display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
.tf-angebot--kompakt .tf-angebot__tage { margin: 0 !important; }

@media (max-width: 760px) {
	body .tf-angebot { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   8  Öffnungszeiten, Kontakt, QR-Code
   ========================================================================== */

.tf-zeiten { width: 100%; max-width: 26rem; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.tf-zeiten th, .tf-zeiten td { padding: 0.55rem 0; border-bottom: 1px solid var(--tf-linie); text-align: left; font-weight: 400; vertical-align: baseline; }
.tf-zeiten td { text-align: right; }
.tf-zeiten tr.ist-heute th, .tf-zeiten tr.ist-heute td { color: var(--tf-tinte); font-weight: 600; }
.tf-zeiten tr.ist-heute th::after { content: " · heute"; font-weight: 400; font-style: italic; color: var(--tf-grau); }
.tf-zeiten__hinweis { margin-top: 0.9rem; font-size: var(--wp--preset--font-size--klein); color: var(--tf-grau); }
.tf-zeiten__status { margin: 0 0 0.9rem; font-family: var(--tf-grotesk); font-size: var(--wp--preset--font-size--etikett); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.tf-zeiten__status[hidden] { display: none; }

.tf-zeiten-kompakt { margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums lining-nums; }
.tf-zeiten-kompakt li { display: flex; justify-content: space-between; gap: 1rem; }

.tf-kontakt > * { margin: 0; }
.tf-kontakt__adresse { font-size: var(--wp--preset--font-size--mittel); line-height: 1.4; margin-bottom: 1.5rem !important; }
.tf-kontakt__zeile { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--tf-linie); }
.tf-kontakt__zeile:first-of-type { border-top: 1px solid var(--tf-linie); }
.tf-kontakt__zeile .tf-kicker { padding-top: 0.25em; }
.tf-kontakt__aktionen { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; margin-top: 1.5rem !important; }
.tf-kontakt--kompakt .tf-kontakt__adresse { font-size: inherit; margin-bottom: 0.75rem !important; }

.tf-qr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: center; margin-inline: 0; margin-bottom: 0; }
.tf-qr__flaeche { width: var(--tf-qr-groesse, 9.5rem); padding: 0.6rem; border: 1px solid var(--tf-tinte); background: #FFFDF8; color: var(--tf-tinte); line-height: 0; }
.tf-qr__code { display: block; width: 100%; height: auto; }
.tf-qr figcaption > * { margin: 0; }
.tf-qr figcaption .tf-kicker { color: var(--tf-tinte); margin-bottom: 0.4rem; }
.tf-qr__adresse { font-size: var(--wp--preset--font-size--klein); word-break: break-word; }

/* ==========================================================================
   9  Vorbestellung
   ========================================================================== */

.tf-form { margin: 0; }

.tf-form__raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1.5rem;
}

.tf-feld { display: flex; flex-direction: column; gap: 0.45rem; margin: 0; min-width: 0; }
.tf-feld--breit { grid-column: 1 / -1; }

.tf-feld label,
.tf-feld .tf-feld__label {
	font-family: var(--tf-grotesk);
	font-size: var(--wp--preset--font-size--etikett);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tf-feld label small { font-weight: 400; letter-spacing: 0.06em; text-transform: none; color: var(--tf-grau); }

.tf-feld input,
.tf-feld select,
.tf-feld textarea {
	width: 100%;
	min-height: 3.1rem;
	padding: 0.75rem 0.9rem;
	font: inherit;
	font-size: 1.0625rem;
	color: var(--tf-tinte);
	background: #FBF8F2;
	border: 1px solid var(--tf-feldrand);
	border-radius: 0;
	appearance: none;
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
}

.tf-feld select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23211F1C' stroke-width='1.3'/%3E%3C/svg%3E");
	background-position: right 0.95rem center;
	background-size: 12px 8px;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
}

.tf-feld textarea { min-height: 8.5rem; resize: vertical; line-height: 1.5; }

.tf-feld input:focus-visible,
.tf-feld select:focus-visible,
.tf-feld textarea:focus-visible { outline: 2px solid var(--tf-funke); outline-offset: 1px; border-color: var(--tf-tinte); }

.tf-feld--check { flex-direction: row; align-items: flex-start; gap: 0.8rem; }
.tf-feld--check input { width: 1.2rem; min-height: 0; height: 1.2rem; margin-top: 0.2rem; padding: 0; appearance: auto; accent-color: var(--tf-tinte); flex: none; }
.tf-feld--check label { font-family: var(--tf-serif); font-size: var(--wp--preset--font-size--klein); font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.5; }

.tf-feld--honig { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.tf-form__senden { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.tf-form__senden button { cursor: pointer; }
.tf-form__klein { margin: 0; font-size: var(--wp--preset--font-size--klein); color: var(--tf-grau); }

.tf-meldung { margin: 0 0 1.75rem; padding: 1rem 1.2rem; border: 1px solid var(--tf-tinte); background: #FBF8F2; }
.tf-meldung > * { margin: 0; }
.tf-meldung strong { display: block; margin-bottom: 0.3rem; font-family: var(--tf-grotesk); font-size: var(--wp--preset--font-size--etikett); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.tf-meldung--fehler { border-color: var(--tf-glut); }
.tf-meldung--fehler strong { color: var(--tf-glut); }
.tf-meldung ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }

@media (max-width: 600px) {
	.tf-form__raster { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   10  Rechtliches
   ========================================================================== */

.tf-recht > * { max-width: 44rem; }
.tf-recht h2 { font-size: var(--wp--preset--font-size--mittel); font-weight: 500; letter-spacing: 0; margin: 2.75rem 0 0.75rem; }
.tf-recht h2:first-child { margin-top: 0; }
.tf-recht h3 { font-size: var(--wp--preset--font-size--normal); font-weight: 600; margin: 1.75rem 0 0.5rem; }
.tf-recht p, .tf-recht li { font-size: 1.0625rem; }
.tf-recht .tf-hinweis-vorlage { padding: 0.9rem 1rem; border: 1px dashed var(--tf-glut); font-size: var(--wp--preset--font-size--klein); }

/* ==========================================================================
   11  Fuß
   ========================================================================== */

.tf-fuss {
	margin-top: var(--tf-abschnitt);
	border-top: 1px solid var(--tf-tinte);
	font-size: var(--wp--preset--font-size--klein);
}

.tf-fuss__raster {
	display: grid;
	grid-template-columns: minmax(7rem, 9.5rem) repeat(3, minmax(0, 1fr));
	gap: 2rem var(--tf-spalt);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.tf-fuss__raster > * { margin: 0; }
.tf-fuss .tf-kicker { margin: 0 0 0.8rem; color: var(--tf-tinte); }
.tf-fuss address, .tf-fuss p { margin: 0; }
.tf-fuss ul { margin: 0; padding: 0; list-style: none; }
.tf-fuss li + li { margin-top: 0.35rem; }
.tf-fuss a { text-decoration: none; border-bottom: 1px solid var(--tf-linie); }
.tf-fuss a:hover { color: var(--tf-glut); border-color: currentColor; }
.tf-fuss .tf-marke a { border: 0; }

.tf-fuss__unten {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-block: 1.25rem 1.6rem;
	border-top: 1px solid var(--tf-linie);
	color: var(--tf-grau);
}

.tf-fuss__unten p { margin: 0; }

@media (max-width: 900px) {
	.tf-fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tf-fuss__marke { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
	.tf-fuss__raster { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   12  Bewegung: nur Deckkraft, kurzer Weg, Maske
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.tf-js .tf-zeigen > * {
		transition: opacity 0.75s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.tf-js .tf-zeigen:not(.ist-sichtbar) > * {
		opacity: 0;
		transform: translateY(14px);
	}

	.tf-js .tf-zeigen > *:nth-child(2) { transition-delay: 0.08s; }
	.tf-js .tf-zeigen > *:nth-child(3) { transition-delay: 0.16s; }
	.tf-js .tf-zeigen > *:nth-child(4) { transition-delay: 0.24s; }
	.tf-js .tf-zeigen > *:nth-child(n+5) { transition-delay: 0.3s; }

	.tf-js .tf-maske > * { transition: clip-path 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
	.tf-js .tf-maske:not(.ist-sichtbar) > * { clip-path: inset(0 0 100% 0); }
	.tf-js .tf-maske.ist-sichtbar > * { clip-path: inset(0 0 0 0); }
}

/* ==========================================================================
   13  Druck normaler Seiten
   ========================================================================== */

@media print {
	body.tf-boxed { background: #fff; }
	body.tf-boxed .wp-site-blocks { margin: 0; max-width: none; background: #fff; }
	.tf-kopf .tf-nav, .tf-karte__sprung, .tf-form, .tf-fuss__raster nav { display: none !important; }
	.tf-rubrik { break-inside: avoid-page; }
	.tf-gericht { break-inside: avoid; }
}