/*
Theme Name: Fototage
Description: Kind-Theme von Ollie für die Dauner & Wittlicher Fototage (fototage.de).
Template: ollie
Version: 0.1.0
Requires at least: 7.1
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ft-theme
*/

/* ==========================================================================
   Grundlage (Etappe 2b): kantig, ohne Schatten, Fotos mit radius-bild.
   Werte kommen aus theme.json und docs/design-system/tokens.json.
   ========================================================================== */

/* Zeilenumbruch global: Überschriften ausgewogen, Lesetext ohne einzelne Wörter in der letzten Zeile.
   Ersetzt die Ollie-Pro-Erweiterung „Text Wrap“ (die im Editor ausgeschaltet werden kann). */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title { text-wrap: balance; }
p, li, blockquote, figcaption { text-wrap: pretty; }

/* Ollies Rundungen und Schatten zurücknehmen (Marke ist kantig, Fotos ausgenommen) */
.wp-block-table table,
.is-style-media-boxed,
.is-style-rounded-cover img { border-radius: 0; }
.is-style-column-box-shadow,
.is-style-media-boxed img { box-shadow: none; }

/* ===== 1. Schriftkürzel: Archivo statt Mona Sans =====
   Ursache: In den zusammengeführten Theme-Daten stehen die Kürzel primary, expanded, condensed, narrow doppelt,
   zuerst unsere Archivo-Fassung, dahinter Ollies Mona Sans (seit WooCommerce aktiv ist, das Inter/Cardo
   ergänzt und dabei Ollies Schriftliste wieder anhängt). Die spätere Fassung gewinnt in den globalen Stilen.
   Die Variablen am body überschreiben den Wert von :root für alle Elemente. */
body {
	--wp--preset--font-family--primary: "Archivo", "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;
	--wp--preset--font-family--expanded: "Archivo Expanded", sans-serif;
	--wp--preset--font-family--condensed: "Archivo Condensed", sans-serif;
	--wp--preset--font-family--narrow: "Archivo Narrow", sans-serif;
}

/* Überschriften mit Link (Programmübersicht, Ticketliste): Farbe der Überschrift (grau), ohne Unterstreichung.
   Hover und Fokus wie bei Links: Unterstreichung in der Saisonfarbe. */
:where(h1, h2, h3, h4, h5, h6).wp-block-heading a,
.wp-block-post-title a { color: inherit; text-decoration: none; }
:where(h1, h2, h3, h4, h5, h6).wp-block-heading a:hover,
:where(h1, h2, h3, h4, h5, h6).wp-block-heading a:focus-visible,
.wp-block-post-title a:hover,
.wp-block-post-title a:focus-visible {
	text-decoration: underline; text-decoration-color: var(--akzent);
	text-decoration-thickness: 2px; text-underline-offset: 0.12em;
}
.wp-block-image.is-style-rounded img,
.wp-block-image .is-style-rounded img { border-radius: var(--wp--custom--radius-bild); }

/* Tabelle „Termine“: Linien aus grau-linie, keine Flächen, Tabellenziffern kommen aus dem Blockstil */
.wp-block-table.is-style-ft-termine table { width: 100%; border: 0; border-collapse: collapse; background: transparent; font-size: inherit; }
.wp-block-table.is-style-ft-termine th,
.wp-block-table.is-style-ft-termine td { border: 0; border-bottom: 1px solid var(--wp--preset--color--border-light); background: transparent; text-align: left; padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium) var(--wp--preset--spacing--small) 0; }
.wp-block-table.is-style-ft-termine th { color: var(--wp--preset--color--primary); font-weight: 600; }

/* Termintabelle mit Stern statt Text (.ft-sterne): Der Zelltext bleibt für Screenreader im <mark>,
   sichtbar ist der Stern aus der Bildmarke in der Jahresfarbe. Kontrast als Grafik: akzent 2027 auf papier 3,2:1 (≥ 3:1). */
.wp-block-table.ft-sterne mark {
	background: none;
	font-size: 0;
}
.wp-block-table.ft-sterne mark::before {
	content: "";
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	vertical-align: middle;
	background-color: var(--akzent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14 0 58 55'%3E%3Cpath d='M 42.88 0.13 L 49.46 10.59 L 61.39 6.7 L 59.53 18.82 L 71.24 23.32 L 61.82 31.44 L 67.82 42.21 L 55.24 42.54 L 52.73 54.55 L 42.88 46.92 L 33.03 54.55 L 30.52 42.54 L 17.94 42.21 L 23.95 31.44 L 14.52 23.32 L 26.23 18.82 L 24.37 6.7 L 36.3 10.59 Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14 0 58 55'%3E%3Cpath d='M 42.88 0.13 L 49.46 10.59 L 61.39 6.7 L 59.53 18.82 L 71.24 23.32 L 61.82 31.44 L 67.82 42.21 L 55.24 42.54 L 52.73 54.55 L 42.88 46.92 L 33.03 54.55 L 30.52 42.54 L 17.94 42.21 L 23.95 31.44 L 14.52 23.32 L 26.23 18.82 L 24.37 6.7 L 36.3 10.59 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Logos als Inline-SVG: Stern in der Jahresfarbe, Kamera und Lettering in grau */
.ft-logo { margin: 0; }
.ft-logo svg { display: block; height: var(--ft-logo-hoehe, 140px); width: auto; max-width: 100%; }
.ft-logo .kamera,
.ft-logo .lettering { fill: var(--wp--preset--color--primary); }
.ft-logo .stern { fill: var(--akzent); }
/* Paarung: Daun zuerst, gleiche Höhe, Abstand deutlich größer als die Sternhöhe */
.ft-logo-paar { gap: var(--wp--preset--spacing--x-large); flex-wrap: nowrap; }
.ft-logo-stapel { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--large); --ft-logo-hoehe: 120px; }
@media (max-width: 600px) { .ft-logo-paar { --ft-logo-hoehe: 110px; gap: var(--wp--preset--spacing--large); } }

/* Fotoplatzhalter: graue Fläche, radius-bild; randabfallend ohne Rundung */
.ft-foto { display: flex; align-items: center; justify-content: center; border-radius: var(--wp--custom--radius-bild); overflow: hidden; }
.ft-foto > p { margin: 0; }
.ft-foto--voll { border-radius: 0; }
.ft-foto--3-2 { aspect-ratio: 3 / 2; }
.ft-foto--16-9 { aspect-ratio: 16 / 9; }
.ft-foto--21-9 { aspect-ratio: 21 / 9; min-height: 200px; }
.ft-foto--3-4 { aspect-ratio: 3 / 4; }

/* Flächen und Kästen: papier-ton, kantig */
.ft-box { padding: var(--wp--preset--spacing--large); }
.ft-box > :first-child { margin-block-start: 0; }

/* Partner: „Präsentiert von“ mit freigestelltem Logo */
.ft-partner > p { margin: 0; }
.ft-partnerlogo { display: flex; align-items: center; justify-content: center; width: 160px; height: 48px; margin-block-start: var(--wp--preset--spacing--small); }
.ft-partnerlogo > p { margin: 0; }

/* Knopfreihe: zwei Ticketknöpfe nebeneinander, bei Platzmangel untereinander */
.ft-knopfreihe { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--medium); }

/* Enge Paare: Dachzeile gehört zur folgenden Überschrift bzw. Tabelle (halbe Grundlinie) */
.is-style-ft-dachzeile + .wp-block-heading,
.is-style-ft-dachzeile + .wp-block-table { margin-block-start: var(--wp--preset--spacing--small); }

/* Rhythmus der Varianten: Abstand zwischen Blöcken im Seitenraster */
.ft-seite { --wp--style--block-gap: var(--wp--preset--spacing--x-large); }
.ft-seite--mittel { --wp--style--block-gap: var(--wp--preset--spacing--large); }
.ft-seite--dicht { --wp--style--block-gap: var(--wp--preset--spacing--medium); }
.ft-orte,
.ft-vortrag { align-items: flex-start; }

/* ==========================================================================
   Etappe 2b, zweite Runde: Hero, Menü-Entwurf, Programm, Brief
   ========================================================================== */

/* Nur für Screenreader: die Wortmarke trägt die Seite sichtbar, die Überschrift 1 bleibt als Text */
.ft-nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Hero: Video (Start) und Bild (alle anderen Seiten), randabfallend, ohne Rundung; Titel stehen darunter. Die Videoregeln gelten nur für Videoblöcke
   der Entwürfe D bis F, nicht für das Video im Cover-Block (.wp-block-cover__video-background): dessen Maße setzt der Kernblock. */
.ft-hero { margin-block: 0; }
.ft-hero video:not(.wp-block-cover__video-background) { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 0; }
.ft-hero--16-9 video:not(.wp-block-cover__video-background) { aspect-ratio: 16 / 9; }
.ft-hero--3-1 video:not(.wp-block-cover__video-background) { aspect-ratio: 3 / 1; }
.ft-foto--3-1 { aspect-ratio: 3 / 1; min-height: 140px; }
.ft-foto--4-5 { aspect-ratio: 4 / 5; }

/* Menü-Entwurf: nur Platzhalter oben auf der Seite, noch kein Kopfteil */
.ft-menue { align-items: center; padding-block: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium); border-bottom: 1px solid var(--wp--preset--color--border-light); }
.ft-menue > p { margin: 0; }

/* Brief: Porträt mit Namen darunter */
.ft-portraet > p { margin-block-start: var(--wp--preset--spacing--small); }

/* Filter nach Ort: einfache Links, Knöpfe oder Liste */
.ft-filter { gap: var(--wp--preset--spacing--large); }
.ft-filter > p { margin: 0; }
.ft-filter a { color: var(--wp--preset--color--main); font-family: var(--wp--preset--font-family--primary); font-weight: 600; font-stretch: 95%; }
.ft-liste { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--x-large); }
.ft-abschnitt { margin: 0; }

/* Termintabelle mit Ticketknopf in der letzten Spalte: Link sieht aus wie der Primär-Button */
.wp-block-table.ft-tickets td:last-child,
.wp-block-table.ft-tickets th:last-child { text-align: right; padding-right: 0; }
.wp-block-table.ft-tickets td:last-child a {
	display: inline-block; white-space: nowrap; text-decoration: none; border-radius: 0;
	padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
	background: var(--wp--preset--color--base); color: var(--wp--preset--color--primary); border: 2px solid var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--primary); font-size: var(--wp--preset--font-size--small); font-weight: 600; font-stretch: 95%; line-height: 1.3333;
}
.wp-block-table.ft-tickets td:last-child a:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); }
/* Schmale Bildschirme: Tabellen dürfen seitlich scrollen statt zu brechen */
.wp-block-table { overflow-x: auto; }

/* ==========================================================================
   Startseiten-Entwürfe D, E, F: Logos als Bild, Hero-Video mit Pause-Knopf
   ========================================================================== */

.ft-hero { position: relative; }

/* Hero: Verlauf nur hinter dem Titel statt flächiger Abdunklung */
.ft-hero .wp-block-cover__background {
	opacity: 1 !important; /* überschreibt has-background-dim-0 */
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--wp--preset--color--main) 60%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--main) 25%, transparent) 35%,
		transparent 60%
	) !important;
}

/* Bildband: innerer Bereich volle Breite, damit der Titel an der breiten Spalte steht. Der Kern setzt bei has-custom-content-position den Container
   auf width: auto, mit der Spezifität von fünf Klassen (.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-…
   .wp-block-cover__inner-container); eine einfache Regel würde verlieren, deshalb !important. */
.ft-hero--band .wp-block-cover__inner-container {
	width: 100% !important;
}

/* Hero-Video: Pause-Knopf oben rechts (vom Skript hero-video.js eingefügt; Farben aus den Tokens main und base) */
.ft-video-knopf {
	position: absolute;
	top: var(--wp--preset--spacing--medium);
	right: var(--wp--preset--spacing--medium);
	z-index: 2;
	width: 40px;
	height: 40px;
	padding: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--main) 45%, transparent);
	cursor: pointer;
}
.ft-video-knopf::before {
	content: "";
	display: block;
}
/* Pause-Symbol: zwei Balken */
.ft-video-knopf[data-zustand="laeuft"]::before {
	width: 10px;
	height: 12px;
	border-left: 3px solid var(--wp--preset--color--base);
	border-right: 3px solid var(--wp--preset--color--base);
	box-sizing: border-box;
}
/* Play-Symbol: Dreieck */
.ft-video-knopf[data-zustand="pausiert"]::before {
	width: 0;
	height: 0;
	margin-left: 3px;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 11px solid var(--wp--preset--color--base);
}
.ft-video-knopf:hover {
	background: color-mix(in srgb, var(--wp--preset--color--main) 65%, transparent);
}
.ft-video-knopf:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 2px;
}

/* Logos als <img>: beide Logos haben dieselbe Gesamthöhe (Paarungsregel seit 14.10.2026: identische Höhe, Oberkante Stern bis
   Unterkante Wortmarke = Zeichenfläche beider SVGs). Der Abstand beträgt eine Sternhöhe = 31,9 % der Logohöhe (--ft-logo-h). */
.ft-logo-bild { margin: 0; }
.ft-logo-bild img { display: block; width: auto; max-width: none; border-radius: 0; }
.ft-logo-daun img,
.ft-logo-wittlich img { height: var(--ft-logo-h, 130px); }
.ft-logo-klein { --ft-logo-h: 64px; }
.wp-block-group.ft-logos { --ft-logo-h: 130px; display: flex; flex-wrap: nowrap; align-items: flex-end; justify-content: center; gap: calc(var(--ft-logo-h) * 0.319); }
.wp-block-group.ft-logos--buehne { --ft-logo-h: clamp(140px, 21.5vw, 323px); }
.wp-block-group.ft-logos--kino { --ft-logo-h: clamp(75px, 9.7vw, 151px); }
.wp-block-group.ft-logos--plakat { --ft-logo-h: calc(min(1260px, 100vw - 36px) / 2.462); }
/* Schmale Bildschirme: Logos untereinander, damit jedes breiter als etwa 40 % der Bildschirmbreite bleibt */
@media (max-width: 600px) {
	.wp-block-group.ft-logos { flex-direction: column; align-items: center; }
	.wp-block-group.ft-logos--buehne { --ft-logo-h: 48.5vw; }
	.wp-block-group.ft-logos--kino,
	.wp-block-group.ft-logos--plakat { --ft-logo-h: 53.9vw; }
}

/* D „Bühne“: Video über die ganze Höhe, Negativlogos mittig, dunkler Verlauf für den Kontrast */
.ft-buehne { position: relative; height: 100svh; min-height: 480px; overflow: hidden; background: var(--wp--preset--color--main); }
.ft-buehne .ft-hero { position: absolute; inset: 0; margin: 0; }
.ft-buehne .ft-hero video:not(.wp-block-cover__video-background) { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.ft-buehne__logos {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
	background: linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--main) 60%, transparent), color-mix(in srgb, var(--wp--preset--color--main) 80%, transparent));
}
.ft-streifen { border-top: 1px solid var(--wp--preset--color--border-light); }
.ft-ort-kopf > .ft-logo-bild { margin-block-end: var(--wp--preset--spacing--medium); }

/* E „Kino“: Video 21:9 auf Schwarz, Negativlogos im unteren Balken wie ein Filmtitel */
.ft-kino { background: var(--wp--preset--color--main); }
.ft-kino .ft-hero { margin-block: 0; }
.ft-kino__balken { display: flex; justify-content: center; padding: var(--wp--preset--spacing--large) var(--wp--preset--spacing--medium); }

/* F „Plakat“: farbige Logos über die volle Inhaltsbreite, Video direkt darunter */
.ft-plakat { display: flex; justify-content: center; }
.ft-plakat + .ft-hero { margin-block-start: 0; }
.ft-menue + .ft-buehne,
.ft-menue + .ft-kino { margin-block-start: 0; }

/* ==========================================================================
   Startseiten-Entwürfe G und H: zurückhaltend, typografische Programmliste
   ========================================================================== */

/* Hero-Video: G etwa 70 % der Bildschirmhöhe, H bildschirmhoch abzüglich der schmalen Navigation */
.ft-hero--70 video:not(.wp-block-cover__video-background) { aspect-ratio: auto; height: 70svh; min-height: 320px; }
.ft-hero--nav video:not(.wp-block-cover__video-background) { aspect-ratio: auto; height: calc(100svh - 4.5rem); min-height: 320px; }
.ft-menue + .ft-hero { margin-block-start: 0; }
.ft-kopf + .ft-hero { margin-block-start: 0; }
.ft-hero + .ft-fuss { margin-block-start: 0; }

/* Große Logos: Daun links, Wittlich rechts, volle Inhaltsbreite; mobil untereinander, jeweils über die volle Breite */
.wp-block-group.ft-logos--gross { --ft-logo-h: calc(min(1260px, 100vw - 36px) / 2.432); }
@media (max-width: 600px) {
	.wp-block-group.ft-logos--gross { --ft-logo-h: calc((100vw - 36px) / 0.9655); }
}

/* Programmliste: Hairline je Zeile in grau-linie, die ganze Zeile ist der Link (Link-Fläche über ::after) */
.ft-programmliste { border-top: 1px solid var(--wp--preset--color--border-light); }
.ft-programmliste > .ft-zeile { margin-block-start: 0; }
.ft-zeile { position: relative; border-bottom: 1px solid var(--wp--preset--color--border-light); padding-block: var(--wp--preset--spacing--large); }
.ft-zeile .ft-zeile-titel { margin: 0; font-size: var(--wp--preset--font-size--x-large); font-weight: 800; line-height: 1.1; font-stretch: 85%; }
.ft-zeile-titel a { color: var(--wp--preset--color--primary); text-decoration: none; }
.ft-zeile-titel a::after { content: ""; position: absolute; inset: 0; }
.ft-zeile-titel a:hover { color: var(--wp--preset--color--main); text-decoration: underline; text-decoration-color: var(--wp--preset--color--primary); text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.ft-zeile-titel a:focus-visible { outline: none; }
.ft-zeile-titel a:focus-visible::after { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }

/* ==========================================================================
   Kopf (Template-Teil header-ft): feste Kopfleiste und Logo-Kasten, der ins Hero ragt
   Kopfleiste: papier, klebend, Desktop 72 px, schmal 56 px. Keine Linie unten: im gescrollten Zustand liegt ein leiser
   Schatten (schatten-leiste) darunter.
   Logo-Kasten: papier, oben bündig, absolut (nimmt keinen Platz im Seitenfluss). Innenabstand eine Sternhöhe.
   Desktop (ab 831 px): Kasten links, Navigation und Warenkorb rechts.
   Schmal (bis 830 px, ab hier ist die Navigation der Menü-Knopf): Menü-Knopf links, Kasten horizontal mittig, Warenkorb rechts.

   Alle Maße hängen an einer Zahl: --ft-logo-gross-n, der Logohöhe in der Ausgangsgröße (px, ohne Einheit). Sie kommt aus der
   Fensterbreite und wird von kopf.js gesetzt (und vor dem ersten Rendern vom Inline-Skript im <head>); ohne JavaScript gilt
   der Fallback (Desktop 96, schmal 64). Es gibt keine Stufen mit festen Logohöhen, nur den Umschaltpunkt bei 830 px.
     Desktop: (Fensterbreite − 608) ÷ 3,4, mindestens 40, höchstens 200 px (erreicht bei 1288 px Breite). 608 = Navigation 560 +
     2 × 24 Rand; 3,4 statt 3,179 (Kasten 2,86 + Sternhöhe 0,319, je × Höhe) als Reserve: bei 831 px ist der Kasten 65,6 px hoch,
     Sperre + Navigation + Rand brauchen 768 von 783 px.
     Schmal: so groß, dass der mittige Kasten zu Menü-Knopf und Warenkorb mindestens eine Sternhöhe Abstand hält, höchstens 72 px
     (375 px Breite: rund 63 px). Rechnung in kopf.js.
   Der Kasten schrumpft stufenlos mit dem Scrollweg (--ft-schrumpf von 0 bis 1) bis er bündig in der Kopfleiste steht:
   Logos Desktop 56 px, schmal 40 px.

   Das Verkleinern kostet keine Layout-Arbeit: Layout und Größe des Kastens bleiben in der Ausgangsgröße stehen, verkleinert wird
   nur per transform (Logos: scale und translateY; weiße Fläche: ::before mit scale in x und y). Desktop skaliert alles um die
   obere linke Ecke des Kastens, schmal um die obere Mitte (der Kasten bleibt mittig). Beide Logos stehen in einem Link und
   haben damit in jeder Stufe dieselbe Höhe; der Abstand ist mitskaliert und bleibt eine Sternhöhe (31,9 % der Logohöhe).

   Desktop: Navigation und Warenkorb behalten links einen Mindestabstand: Kastenbreite (2,86 × Logohöhe) plus eine Sternhöhe,
   gerechnet aus der Ausgangsgröße; das gilt dann auch im geschrumpften Zustand.
   ========================================================================== */
:root {
	--ft-logo-gross-n: 96; /* Fallback ohne JavaScript */
	--ft-logo-klein-n: 56;
	--ft-kopf-n: 72;
	--ft-pad-start-n: calc(var(--ft-logo-gross-n) * 0.319);                              /* Sternhöhe */
	--ft-box-gross-n: calc(var(--ft-logo-gross-n) + 2 * var(--ft-pad-start-n));          /* Höhe des Kastens in der Ausgangsgröße */
	--ft-box-ende-n: var(--ft-kopf-n);                                                   /* am Ende bündig mit der Kopfleiste */
	--ft-pad-ende-n: calc((var(--ft-box-ende-n) - var(--ft-logo-klein-n)) / 2);
	/* dieselben Maße als Längen */
	--ft-kopf-hoehe: calc(var(--ft-kopf-n) * 1px);
	--ft-logo-h-gross: calc(var(--ft-logo-gross-n) * 1px);
	--ft-stern-gross: calc(var(--ft-logo-gross-n) * 0.319px);
	--ft-ueberstand: calc((var(--ft-box-gross-n) - var(--ft-kopf-n)) * 1px);              /* so weit ragt der Kasten über die Kopfleiste */
	--ft-kasten-breite: calc(var(--ft-logo-gross-n) * 2.86px);
	--ft-nav-sperre: calc(var(--ft-kasten-breite) + var(--ft-stern-gross));               /* Mindestabstand links von Navigation und Warenkorb */
}
@media (max-width: 830px) {
	:root { --ft-logo-gross-n: 64; --ft-logo-klein-n: 40; --ft-kopf-n: 56; }
}

/* Klebend: das Element, das den Kopf umschließt (Template-Teil), bleibt oben stehen */
.wp-block-template-part:has(> .ft-kopfzeile) { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100; }
/* Sprungmarken und fokussierte Elemente verschwinden nicht unter der Kopfleiste (nur bei den klebenden Köpfen; der klassische Kopf klebt nicht) */
html:has(.ft-kopfzeile) { scroll-padding-top: calc(var(--ft-kopf-hoehe) + var(--wp-admin--admin-bar--height, 0px)); }
/* Unter 600 px steht die Adminleiste nicht fest, sie scrollt weg: kein Abstand für sie, sonst bleibt beim Scrollen eine Lücke über dem Kopf */
@media (max-width: 599px) {
	.wp-block-template-part:has(> .ft-kopfzeile) { top: 0; }
	html:has(.ft-kopfzeile) { scroll-padding-top: var(--ft-kopf-hoehe); }
}

/* Kopfleiste. Schatten unter der Leiste (::after, nur außerhalb sichtbar): blendet mit --ft-schrumpf ein, gegenläufig zum Kastenschatten,
   per opacity statt per box-shadow-Übergang, am Desktop und schmal gleich. */
.ft-kopfzeile { position: relative; box-sizing: border-box; height: var(--ft-kopf-hoehe); background: var(--wp--preset--color--base); }
.ft-kopfzeile::after { content: ""; position: absolute; inset: 0; box-shadow: var(--wp--custom--schatten-leiste); opacity: var(--ft-schrumpf, 0); pointer-events: none; will-change: opacity; }

/* Zeile: links bleibt Platz für den Kasten (Weiche vor dem ersten Eintrag), rechts Navigation und Warenkorb */
.wp-block-group.ft-kopfzeile__reihe { position: relative; height: 100%; align-items: center; justify-content: flex-end; gap: 0; }
.wp-block-group.ft-kopfzeile__reihe::before { content: ""; flex: 0 0 var(--ft-nav-sperre); }
.wp-block-group.ft-kopfzeile__rechts { flex: 0 0 auto; margin: 0 0 0 auto; padding-right: 18px; align-items: center; gap: 36px; }

/* Navigation: Abstand der Menüpunkte und Innenabstand festgelegt (Punkte stehen nebeneinander, brechen nicht um), damit
   die Breite berechenbar ist; kleinste Breite siehe Umschaltpunkt unten. */
.ft-kopfzeile .wp-block-navigation .wp-block-navigation__container { column-gap: 36px; flex-wrap: nowrap; }
.ft-kopfzeile .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item__content { padding-inline: 0; white-space: nowrap; }

/* Umschaltpunkt: bis 830 px Breite zeigt die Navigation den Menü-Knopf (WordPress schaltet erst unter 600 px um). Gilt nur für die
   Responsive-Klassen des Navigationsblocks; die Liste bleibt dieselbe, es gibt keine zweite Navigation. 830 px ergeben sich aus:
   Zeilenbreite (Fensterbreite − 2 × Seitenrand, Seitenrand bis 24 px angenommen) − Sperre (3,179 × Logohöhe = 0,265 × Breite) ≥
   Navigation samt Warenkorb und 18 px Rand rechts (gemessen 519 px am Screenshot bei 1295 px Breite, mit Reserve 560 px).
   Rechnung: (560 + 2 × 24) ÷ (1 − 0,265) = 827 px. */
/* Seit 15.10.2026 nur noch für den alten Kopf (header-ft, Löschliste): Kopf Mitte schaltet bei 600 px um, wie WordPress selbst. */
@media (min-width: 600px) and (max-width: 830px) {
	.ft-kopfzeile:not(.ft-kopf--mitte) .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.ft-kopfzeile:not(.ft-kopf--mitte) .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* Logo-Kasten */
.wp-block-group.ft-logokasten {
	/* Maßstab der Logos und der Fläche in x (--ft-k) und y (--ft-sy): 1 in der Ausgangsgröße, kleiner mit --ft-schrumpf */
	--ft-k: calc(1 - (1 - var(--ft-logo-klein-n) / var(--ft-logo-gross-n)) * var(--ft-schrumpf, 0));
	--ft-sy: calc(1 - (1 - var(--ft-box-ende-n) / var(--ft-box-gross-n)) * var(--ft-schrumpf, 0));
	/* Die Logos rücken senkrecht in die Mitte der Kopfleiste (Innenabstand oben wandert von pad-start auf pad-ende, skaliert) */
	--ft-versatz-y: calc((var(--ft-pad-ende-n) - var(--ft-pad-start-n) * var(--ft-logo-klein-n) / var(--ft-logo-gross-n)) * var(--ft-schrumpf, 0) * 1px);
	/* Endwerte bei --ft-schrumpf = 1 (gleiche Rechnung wie oben), für die scroll-gesteuerte Animation unten */
	--ft-k-ende: calc(var(--ft-logo-klein-n) / var(--ft-logo-gross-n));
	--ft-sy-ende: calc(var(--ft-box-ende-n) / var(--ft-box-gross-n));
	--ft-versatz-ende: calc((var(--ft-pad-ende-n) - var(--ft-pad-start-n) * var(--ft-logo-klein-n) / var(--ft-logo-gross-n)) * 1px);
	position: absolute; top: 0; left: 0; z-index: 1; margin: 0;
	box-sizing: border-box;
	/* Layout bleibt in der Ausgangsgröße; der leere Rest soll keine Klicks auf das Hero abfangen */
	padding: calc(var(--ft-pad-start-n) * 1px) var(--ft-stern-gross);
	pointer-events: none;
	border-radius: 0;
}
/* Weiße Fläche (::before) und ihr Schatten (::after, nur außerhalb der Fläche sichtbar, blendet mit --ft-schrumpf aus) */
.wp-block-group.ft-logokasten::before,
.wp-block-group.ft-logokasten::after {
	content: ""; position: absolute; inset: 0;
	/* Ecken mit radius-bild (4 px). Weil die Fläche ungleich skaliert wird (scale(k, sy)), wird der Radius gegengerechnet: waagerecht
	   radius ÷ k, senkrecht radius ÷ sy; nach der Skalierung bleiben die Ecken rund mit 4 px. */
	border-radius: calc(var(--wp--custom--radius-bild) / var(--ft-k)) / calc(var(--wp--custom--radius-bild) / var(--ft-sy));
	transform-origin: 0 0;
	transform: scale(var(--ft-k), var(--ft-sy));
	will-change: transform;
}
.wp-block-group.ft-logokasten::before { z-index: -1; background: var(--wp--preset--color--base); pointer-events: auto; }
.wp-block-group.ft-logokasten::after { z-index: -2; box-shadow: var(--wp--custom--schatten-kasten); opacity: calc(1 - var(--ft-schrumpf, 0)); pointer-events: none; will-change: opacity; }
/* Logos: ein Link, Ausgangsgröße im Layout, Verkleinerung nur per transform um die Ecke des Kastens */
.ft-kopf-logos {
	display: flex; align-items: flex-end; gap: var(--ft-stern-gross); text-decoration: none;
	pointer-events: auto;
	transform-origin: calc(var(--ft-stern-gross) * -1) calc(var(--ft-pad-start-n) * -1px);
	transform: translateY(var(--ft-versatz-y)) scale(var(--ft-k));
	will-change: transform; /* Logos als eigene Ebene: sonst werden die SVG bei jeder Skalierung neu gerastert (Ruckeln auf dem iPhone) */
}
/* Fokusring bleibt 2 px stark und 2 px abgesetzt, auch wenn der Link verkleinert ist */
.ft-kopf-logos:focus-visible { outline-width: calc(2px / var(--ft-k)); outline-offset: calc(2px / var(--ft-k)); }
.ft-kopf-logos img { display: block; width: auto; max-width: none; border-radius: 0; }
.ft-kopf-daun,
.ft-kopf-wittlich { height: var(--ft-logo-h-gross); }

/* Schmaler Kopf (bis 830 px): Menü-Knopf links, Kasten mittig, Warenkorb rechts. Die rechte Gruppe löst sich auf (display: contents),
   Navigation und Warenkorb werden Einträge der Zeile; seitlicher Abstand 18 px zusätzlich zum Seitenrand. */
@media (max-width: 830px) {
	.wp-block-group.ft-kopfzeile__reihe { box-sizing: border-box; justify-content: space-between; padding-inline: 18px; }
	.wp-block-group.ft-kopfzeile__reihe::before { display: none; }
	.wp-block-group.ft-kopfzeile__rechts { display: contents; }
	.wp-block-group.ft-logokasten { left: 50%; translate: -50% 0; }
	.wp-block-group.ft-logokasten::before,
	.wp-block-group.ft-logokasten::after { transform-origin: 50% 0; }
	.ft-kopf-logos { transform-origin: 50% calc(var(--ft-pad-start-n) * -1px); }
}

/* ==========================================================================
   Kopf Mitte (Standard seit 15.10.2026; Template-Teil header-ft-mitte, Klasse .ft-kopf--mitte auf der Kopfzeile)
   Der bisherige Kopf (header-ft) ist ersetzt und steht auf der Löschliste (siehe Bauhandbuch). Der Kasten steht in jeder Breite mittig (Logik wie der schmale
   Kopf: Ursprung oben Mitte, Kopfleiste 56 px, Logos am Ende 40 px). Links „Programm 2027“ (Menü
   „Hauptmenü links“, ID 92), rechts „Tickets“ (Menü „Hauptmenü rechts“, ID 93) und der Warenkorb. Eigene Klassen (.ft-kopf-m__…) für
   die Zeile und die beiden Gruppen, damit die Regeln des bisherigen Kopfs (.ft-kopfzeile__reihe, __rechts) nicht greifen.
   Geteilt mit dem bisherigen Kopf: Kopfleiste, Schatten, Kasten und Logos (.ft-logokasten, .ft-kopf-logos), Schrumpf-Animation,
   Schrift und Abstand der Menüpunkte (Selektoren .ft-kopfzeile …).

   Umschaltpunkt 600 px: ab 600 px stehen die beiden Navigationen neben dem Kasten, darunter der Menü-Knopf (das ist die Schwelle von
   WordPress selbst, es braucht keine eigene Regel; kopf.js und das Inline-Skript führen sie als UMSCHALT = 599).
   Logohöhe über dem Umschaltpunkt: h = max(40, min(160, (Fensterbreite − 384) ÷ 3,6, 0,18 × Fensterhöhe)) (kopf.js, Inline-Skript,
   dieser Kommentar; kopf.js rechnet bei Änderung von Breite oder Höhe neu, auf Touchgeräten nur bei neuer Breite, weil sich die Höhe
   beim Ein- und Ausblenden der Browserleiste ändert). 160 px sind die obere Grenze (erreicht ab 960 px Breite, wenn das Fenster
   mindestens 890 px hoch ist); die Fensterhöhe verhindert, dass der Kasten bei niedrigen Fenstern zu viel vom Bild verdeckt.
   Rechnung: Jede Seite braucht von der Bildschirmkante bis zum Kasten: Rand 24 + Innenabstand 18 + Navigation mit Reserve 150 = 192 px
   (links „Programm 2027“ rund 119 px, rechts „Tickets“, Abstand 36 und Warenkorb rund 129 px, mit 16 % Reserve), dazu halber Kasten
   (1,43 × Höhe) und eine Sternhöhe (0,319 × Höhe) = 1,749 × Höhe. Also: Breite ÷ 2 ≥ 192 + 1,749 × Höhe, das ergibt Höhe ≤
   (Breite − 384) ÷ 3,498; 3,6 lässt zusätzlich etwas Reserve. Bei 600 px ist das Logo 60 px hoch, 40 px (Mindesthöhe) gäbe es erst
   bei 528 px. Die Breiten der Menüpunkte sind aus der Messung des früheren Kopfs (519 px für fünf Punkte und Warenkorb) und den
   Schriftproportionen hochgerechnet, nicht im Browser gemessen.
   Unter dem Umschaltpunkt: Menü-Knopf links (öffnet das Overlay overlay-ft mit Menü 5), Kasten mittig, Warenkorb rechts; die rechte
   Navigation („Tickets“) ist ausgeblendet, Tickets steht im Overlay.
   ========================================================================== */
html:has(.ft-kopf--mitte) { --ft-logo-klein-n: 40; --ft-kopf-n: 56; }
.wp-block-group.ft-kopf-m__reihe { position: relative; box-sizing: border-box; height: 100%; align-items: center; justify-content: space-between; gap: 0; padding-inline: 18px; }
.ft-kopf--mitte .wp-block-group.ft-kopf-m__links,
.ft-kopf--mitte .wp-block-group.ft-kopf-m__rechts { flex: 0 0 auto; margin: 0; align-items: center; gap: 36px; }
.ft-kopf--mitte .wp-block-group.ft-logokasten { left: 50%; translate: -50% 0; }
.ft-kopf--mitte .wp-block-group.ft-logokasten::before,
.ft-kopf--mitte .wp-block-group.ft-logokasten::after { transform-origin: 50% 0; }
.ft-kopf--mitte .ft-kopf-logos { transform-origin: 50% calc(var(--ft-pad-start-n) * -1px); }
@media (max-width: 599px) {
	.ft-kopf--mitte .ft-kopf-m__rechts .wp-block-navigation { display: none; }
}

/* ==========================================================================
   Kopf klassisch (Standard seit 15.10.2026; Template-Teil header-klassisch, Klasse .ft-kopf-klassisch)
   Weiß, nicht klebend, kein Kasten und keine Schrumpf-Animation: das Logopaar mittig (Daun zuerst, gleiche Höhe, Abstand eine
   Sternhöhe), darunter die Navigation mit den sechs Punkten zentriert, der Warenkorb oben rechts. Die älteren Köpfe (header-ft,
   header-ft-mitte) mit ihren Regeln (.ft-kopfzeile, .ft-logokasten, .ft-kopf--mitte, Schrumpf-Animation, kopf.js) bleiben erhalten.
   Maße: Logohöhe clamp(80px, 26vw, 152px), Abstand der Logos 0,319 × Logohöhe (eine Sternhöhe). Abstände aus der Skala (Markup):
   oben und unten xx-large, Logos zu Navigation x-large, zwischen den Menüpunkten large.
   Umschaltpunkt 600 px (Schwelle von WordPress, keine eigene Regel): darunter der Menü-Knopf mit dem Overlay overlay-ft. Die sechs
   Punkte brauchen bei 17 px Schrift rund 331 px (hochgerechnet aus der Messung des früheren Kopfs, nicht im Browser gemessen) plus
   fünf Abstände large (bei 600 px je 25,6 px); mit 15 % Reserve und 2 × 24 px Rand sind das 557 px, also passt die Zeile bei 600 px
   (rund 43 px Luft). Rechnerisch ginge es bis etwa 500 bis 555 px. Die Menüpunkte brechen nie um (nowrap).
   ========================================================================== */
.ft-kopf-klassisch { position: relative; --ft-klassisch-h: clamp(80px, 26vw, 152px); }
.ft-klassisch-logos { display: flex; justify-content: center; align-items: flex-end; gap: calc(var(--ft-klassisch-h) * 0.319); text-decoration: none; }
.ft-klassisch-logos img { display: block; height: var(--ft-klassisch-h); width: auto; max-width: none; border-radius: 0; }
/* Navigation: so breit wie der Kopf (nicht auf die Lesebreite begrenzt), Punkte in einer Zeile. Nur für die Hauptnavigation im Kopf: das Overlay
   (overlay-ft) sitzt im Markup des Navigationsblocks und wird mit :not(.ft-overlay *) ausgenommen. */
.ft-kopf-klassisch .wp-block-navigation:not(.ft-overlay *) { max-width: none; }
.ft-kopf-klassisch .wp-block-navigation__container:not(.ft-overlay *) { flex-wrap: nowrap; }
.ft-kopf-klassisch .wp-block-navigation-item__content:not(.ft-overlay *) { white-space: nowrap; }
/* Warenkorb oben rechts, auf Höhe der Oberkante der Logos (bei 375 px bleiben links und rechts neben dem Logopaar rund 79 px) */
.ft-kopf-klassisch .ft-klassisch-warenkorb { position: absolute; top: var(--wp--preset--spacing--xx-large); right: var(--wp--preset--spacing--large); margin: 0; }
/* Warenkorb im klassischen Kopf: Block woocommerce/mini-cart (Symbol und Zahl, auch bei 0, ohne Preis; Klick öffnet das Ausklappfenster,
   der Block bietet in WooCommerce 11.2.1 keine Weiterleitung zur Warenkorbseite). Der Menüpunkt „Warenkorb“ steht im Hauptmenü (Navigation 102).
   Farbe primary, Schrift wie das Menü (base, 500). */
.ft-klassisch-warenkorb { align-items: center; color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--primary); font-size: var(--wp--preset--font-size--base); font-weight: 500; line-height: 1.2; }
.ft-klassisch-warenkorb .wc-block-mini-cart__button { padding: 0.25em; }

/* Trennlinie unter dem Kopf, nur auf Seiten ohne Hero (die Startseite hat das Bild). .site-header ist die Klasse des Template-Teils in den Templates. */
body:not(:has(.ft-hero)) .site-header {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

/* Desktop-Untermenü im Kopf: 1-px-Linie in border-light und Innenabstand small, damit es sich vom Bildband abhebt. Das Untermenü im Overlay
   (sitzt im Markup des Kopf-Menüs) ist mit :not(.ft-overlay *) ausgenommen und hat oben seine eigenen Regeln. */
.site-header .wp-block-navigation:not(.is-vertical) .wp-block-navigation__submenu-container:not(.ft-overlay *) {
	border: 1px solid var(--wp--preset--color--border-light) !important;
	padding: var(--wp--preset--spacing--small) !important;
}

/* Querformat und niedrige Ansichten: Kopf kompakt, damit das Hero sichtbar bleibt (Ziel bei 667 × 375: höchstens 150 px Kopfhöhe).
   Die Logohöhe läuft über --ft-klassisch-h (die clamp-Regel oben bleibt unverändert); so schrumpft der Abstand der Logos im gleichen
   Verhältnis mit (0,319 × Höhe, Paarungsregel). Innenabstand oben und unten und Abstand zwischen Logos und Menü verkleinert; !important
   nur beim Innenabstand, weil er als Inline-Stil im Block steht. Das Menü selbst bleibt unverändert. */
@media (max-height: 500px) {
	.ft-kopf-klassisch { --ft-klassisch-h: 64px; }
	.wp-block-group.ft-kopf-klassisch { padding-top: var(--wp--preset--spacing--small) !important; padding-bottom: var(--wp--preset--spacing--small) !important; }
	.wp-block-group.ft-kopf-klassisch > * + *:not(.ft-klassisch-warenkorb) { margin-block-start: var(--wp--preset--spacing--medium); }
	.ft-kopf-klassisch .ft-klassisch-warenkorb { top: var(--wp--preset--spacing--small); }
}

/* Schrumpfen als scroll-gesteuerte CSS-Animation (Safari scrollt asynchron, ein Skript käme zu spät und der Kasten ruckelt).
   Der Browser koppelt die Animation an den Scrollweg der Seite: 0 bis 120 px, linear, dieselbe Gestaltung wie das Schrumpfen über
   --ft-schrumpf (das bleibt als Rückfall für Browser ohne animation-timeline und bei „Bewegung reduzieren“). Die Keyframes animieren
   transform und opacity direkt, nicht die Variable (Variablen laufen nicht im Compositor); die Endwerte kommen aus --ft-k-ende,
   --ft-sy-ende und --ft-versatz-ende. Der Ursprung (transform-origin) bleibt wie oben, am Desktop die Ecke, schmal die Mitte.
   kopf.js setzt in diesem Fall --ft-schrumpf nicht mehr (WEG = 120 px muss mit animation-range übereinstimmen). */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes ft-kasten-flaeche { from { transform: scale(1, 1); } to { transform: scale(var(--ft-k-ende), var(--ft-sy-ende)); } }
		@keyframes ft-kasten-schatten { from { opacity: 1; } to { opacity: 0; } }
		/* Ecken des Kastens: der Radius wird gegen die ungleiche Skalierung gerechnet (4 px ÷ Maßstab). Eigene Animation, weil border-radius
		   nicht im Compositor läuft; in derselben Animation wie transform würde auch die Skalierung im Hauptthread laufen und nachhinken. */
		@keyframes ft-kasten-ecken {
			from { border-radius: var(--wp--custom--radius-bild); }
			to { border-radius: calc(var(--wp--custom--radius-bild) / var(--ft-k-ende)) / calc(var(--wp--custom--radius-bild) / var(--ft-sy-ende)); }
		}
		@keyframes ft-logos-schrumpfen { from { transform: translateY(0) scale(1); } to { transform: translateY(var(--ft-versatz-ende)) scale(var(--ft-k-ende)); } }
		@keyframes ft-leiste-schatten { from { opacity: 0; } to { opacity: 1; } }
		@keyframes ft-logos-fokusring { from { outline-width: 2px; outline-offset: 2px; } to { outline-width: calc(2px / var(--ft-k-ende)); outline-offset: calc(2px / var(--ft-k-ende)); } }

		.wp-block-group.ft-logokasten::before {
			animation: ft-kasten-flaeche linear both, ft-kasten-ecken linear both;
			animation-timeline: scroll(root), scroll(root);
			animation-range: 0 120px, 0 120px;
		}
		.wp-block-group.ft-logokasten::after {
			animation: ft-kasten-flaeche linear both, ft-kasten-schatten linear both, ft-kasten-ecken linear both;
			animation-timeline: scroll(root), scroll(root), scroll(root);
			animation-range: 0 120px, 0 120px, 0 120px;
		}
		.ft-kopf-logos {
			animation: ft-logos-schrumpfen linear both;
			animation-timeline: scroll(root);
			animation-range: 0 120px;
		}
		.ft-kopfzeile::after {
			animation: ft-leiste-schatten linear both;
			animation-timeline: scroll(root);
			animation-range: 0 120px;
		}
		/* Fokusring des Logo-Links bleibt 2 px stark und 2 px abgesetzt (Design System, 40-web.md), obwohl der Link mit --ft-k skaliert:
		   zusätzliche Animation auf derselben Timeline, Breite und Versatz wachsen von 2 px auf 2 px / k am Ende (--ft-k bleibt im
		   CSS-Modus 1, daher nicht wie im Rückfall 2px / --ft-k). Läuft nur, solange der Link den Fokus zeigt. */
		.ft-kopf-logos:focus-visible {
			animation: ft-logos-schrumpfen linear both, ft-logos-fokusring linear both;
			animation-timeline: scroll(root), scroll(root);
			animation-range: 0 120px, 0 120px;
		}
	}
}

/* ==========================================================================
   Menü-Overlay (Template-Teil overlay-ft, Bereich navigation-overlay): vollflächig, papier, alles mittig
   Oben die Kopfleiste in Höhe des schmalen Kopfs: Schließen-Knopf links an der Stelle des Menü-Knopfs, Logos mittig (40 px, wie
   der geschrumpfte Kasten). Darunter die Menüpunkte des Hauptmenüs (ohne Zusatzlinks).
   Fokusfalle, Esc, Fokus zurück auf den Knopf, role="dialog" und aria-modal liefert der Navigationsblock von WordPress.
   ========================================================================== */
.wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--base); }
/* Seite dahinter scrollt nicht (auch auf iOS) */
html:has(.wp-block-navigation__responsive-container.is-menu-open) { overflow: hidden; overscroll-behavior: none; }

/* Behälter des Overlays ohne Innenabstand: Ollie setzt auf .is-menu-open.has-modal-open padding: medium (core-navigation.css, Zeile 57),
   das Overlay bringt eigene Abstände mit; sonst sitzt es um den Abstand zu tief und scrollt. */
.wp-block-navigation__responsive-container.is-menu-open.has-modal-open:has(.ft-overlay) { padding: 0; }
.wp-block-group.ft-overlay {
	--ft-overlay-leiste: 56px; /* Höhe der Leiste mit Schließen-Knopf und Logos, wie der schmale Kopf (unabhängig vom Kopf) */
	--ft-overlay-rand: calc(var(--wp--style--root--padding-left, var(--wp--preset--spacing--medium)) + 18px); /* wie der Kopf: Seitenrand + 18 px (fest) */
	box-sizing: border-box; width: 100%; min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)); /* Admin-Leiste abziehen, sonst scrollt das Overlay für angemeldete Nutzer */
	justify-content: flex-start; align-items: stretch; gap: 0; text-align: center;
}
.wp-block-group.ft-overlay__leiste {
	position: relative; box-sizing: border-box; width: 100%; height: var(--ft-overlay-leiste); flex: 0 0 auto;
	display: flex; align-items: center; justify-content: flex-start; padding-inline: var(--ft-overlay-rand); margin: 0;
}
/* Schließen-Knopf: nur das Symbol in Grau, dieselbe Größe und Stelle wie der Menü-Knopf */
.ft-overlay .wp-block-navigation-overlay-close {
	padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
	color: var(--wp--preset--color--primary); cursor: pointer; line-height: 0;
}
.ft-overlay .wp-block-navigation-overlay-close:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.ft-overlay-logos { position: absolute; left: 50%; top: calc((var(--ft-overlay-leiste) - 40px) / 2); translate: -50% 0; display: flex; align-items: flex-end; gap: calc(40px * 0.319); text-decoration: none; }
/* Selektor mit .ft-overlay-logos verstärkt: auf Shop-Seiten (Body-Klasse woocommerce-page) setzt woocommerce-layout.css
   „.woocommerce img, .woocommerce-page img { height: auto; max-width: 100% }“ und schlug die einfache Klasse (Logos erschienen dort in Originalgröße). */
.ft-overlay-logos .ft-overlay-daun,
.ft-overlay-logos .ft-overlay-wittlich { display: block; height: 40px; width: auto; max-width: none; border-radius: 0; }

/* Menüpunkte: Archivo, eine Stufe größer als im Kopf (large, 24 px), enger gesetzt, als ein Block */
.wp-block-group.ft-overlay__mitte { flex: 1 1 auto; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--x-large); padding-block: var(--wp--preset--spacing--large); margin: 0; }
.ft-overlay__mitte .wp-block-navigation { font-family: var(--wp--preset--font-family--primary); font-size: var(--wp--preset--font-size--large); font-weight: 700; font-stretch: 90%; line-height: 1.1; text-align: center; }
.ft-overlay__mitte .wp-block-navigation .wp-block-navigation__container { gap: 0; align-items: center; }
.ft-overlay__mitte .wp-block-navigation .wp-block-navigation-item__content { padding: 0.18em 0; }
/* Overlay: drei Menüpunkte groß, in der Schrift des Hero-Titels (Variante A, Freigabe Sven 16.10.2026). Die Größe setzt die Präfixregel
   weiter unten (Ollies Linkregeln im offenen Overlay), die Kleinpunkte (.ft-menue-klein) bleiben ausgenommen. */
.ft-overlay__mitte .wp-block-navigation-item:not(.ft-menue-klein) .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 900;
	font-stretch: 92%;
	letter-spacing: -0.01em;
	line-height: 1.1;
}
/* Kleinere Punkte unter den beiden Hauptpunkten (Menü 5, Klasse ft-menue-klein an den Menüpunkten): (klein, unterstrichen) */
.ft-overlay__mitte .wp-block-navigation .wp-block-navigation-item:not(.ft-menue-klein) + .ft-menue-klein { margin-top: var(--wp--preset--spacing--medium); }
.ft-overlay__mitte .wp-block-navigation .ft-menue-klein .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--small); font-weight: 450; line-height: 1.4;
	text-decoration: underline; text-decoration-color: var(--wp--preset--color--primary); text-underline-offset: 0.15em;
}


/* Overlay: Ollies Regeln für die Links des mobilen Menüs (core-navigation.css, „Mobile menu links“ und Listenregeln) greifen auch im Overlay,
   weil es im Markup des Navigationsblocks sitzt: Link mit width 100 %, Schrift base, Innenabstand 15/60/15/15 (außermittig), Radius 5 px,
   Hover-Fläche, Listenpunkte mit width 100 % und gap 5px !important. Hier zurückgenommen, damit die Menüpunkte exakt mittig stehen und die
   Größen aus unseren Regeln gelten. Stand wie vor dem nowrap-Fix: Menüpunkte in Schrift base (17 px), Schnitt aus der Navigation (fett,
   schmal), ohne Unterstreichung, Abstand der Punkte large; unterstrichen sind nur die kleinen Punkte (Klasse ft-menue-klein).
   Präfix für die nötige Spezifität. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .ft-overlay .ft-overlay__mitte .wp-block-navigation__container { width: auto; gap: var(--wp--preset--spacing--large) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .ft-overlay .wp-block-navigation__container li:not(.wp-social-link) { width: auto; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .ft-overlay .wp-block-navigation-item__content {
	width: auto; border-radius: 0; background: transparent; font-size: inherit; white-space: normal; text-decoration: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .ft-overlay .wp-block-navigation-item__content:hover { background: transparent; text-decoration: underline; text-decoration-color: var(--akzent); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .ft-overlay .ft-overlay__mitte .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--x-large); padding: 0.18em 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .ft-overlay .ft-overlay__mitte .ft-menue-klein .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--small); font-weight: 450; line-height: 1.4;
	text-decoration: underline; text-decoration-color: var(--wp--preset--color--primary); text-underline-offset: 0.15em;
}

/* Overlay: Untermenü „Programm 2027“ immer sichtbar, klein unter dem Hauptpunkt (Vorgabe Sven, 16.10.2026). Der Hauptpunkt bleibt ein Link auf
   /programm/; der Pfeil-Schalter entfällt, die Liste ist ohnehin offen. Ollies Regeln, die hier überschrieben werden (docs/ollie-reibung.md):
   `.wp-block-navigation .has-child .wp-block-navigation__submenu-container { display: none }`, die Mobilregel für Untermenüs
   (Innenabstand 5 px 0 0 20 px, ausgerichtet links, Breite 100 %) und der Pfeil-Schalter (`display: block`, absolut, 60 px breit). Das Untermenü
   steht ohne Spezifitätsstreit gegen Kern und Ollie, daher der Präfix wie bei den Regeln oben und `!important` nur bei den Eigenschaften, die
   das Aufklappen des Kerns steuern. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .ft-overlay .ft-overlay__mitte .wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 100%;
	gap: var(--wp--preset--spacing--small);
	position: static !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	width: auto !important;
	min-width: 0 !important;
	overflow: visible !important;
	border: 0 !important;
	border-radius: 0;
	background: none !important;
	margin: 0;
	padding: var(--wp--preset--spacing--small) 0 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .ft-overlay .ft-overlay__mitte .has-child { flex-direction: column; align-items: center; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .ft-overlay .ft-overlay__mitte .wp-block-navigation__submenu-icon { display: none; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .ft-overlay .ft-overlay__mitte .wp-block-navigation__submenu-container .wp-block-navigation-item { justify-content: center; align-items: center; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .ft-overlay .ft-overlay__mitte .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	font-stretch: 100%;
	letter-spacing: 0;
	line-height: 1.3;
	text-align: center;
	padding: 0;
}

/* Niedrige Ansicht (iPhone SE: 667 px, mit Admin-Leiste weniger): Abstände straffen, damit das Overlay ohne Scrollen passt */
@media (max-height: 720px) {
	.wp-block-group.ft-overlay__mitte { gap: var(--wp--preset--spacing--medium); padding-block: var(--wp--preset--spacing--medium); }
}

/* Niedrige Ansichten (Querformat, kleine Handys): Abstand der Menüpunkte medium statt large (!important wie in der Regel oben, gegen Ollies gap) */
@media (max-height: 700px) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .ft-overlay .ft-overlay__mitte .wp-block-navigation__container { gap: var(--wp--preset--spacing--medium) !important; }
}

/* Bewegung reduzieren: das Overlay erscheint ohne Animation */
@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open,
	.wp-block-navigation__overlay-container { animation: none; transition: none; }
}

/* Seiten ohne Hero: Inhalt beginnt unter dem Überstand des Kastens */
body:has(.ft-kopfzeile) .wp-block-post-content:not(:has(> .ft-hero)) { padding-top: var(--ft-ueberstand); } /* nur bei den Köpfen mit Kasten; der klassische Kopf hat keinen Überstand */

.ft-nur-vorlesen + .ft-hero { margin-block-start: 0; }
.ft-nur-vorlesen + .ft-hero { margin-block-start: 0; }
.wp-block-cover.ft-hero--schirm {
	padding: 0; min-height: 240px;
	/* erster Bildschirm unter dem Kopf; 4 rem bleiben für den Anschnitt des nächsten Abschnitts (Kopfhöhe = Höhe der Kopfleiste) */
	min-height: calc(100svh - var(--ft-kopf-hoehe) - 4rem - var(--wp-admin--admin-bar--height, 0px)); }
.ft-hero--schirm .wp-block-cover__image-background { border-radius: 0; }

/* Ortsbilder unter der Programmliste: volle Inhaltsbreite, ohne Radius */
.ft-ort-bildblock { margin: 0; }
.ft-ort-bildblock > .wp-block-image { margin: 0; }
.ft-ort-bild img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.ft-ort-bildblock > p { margin-block-start: var(--wp--preset--spacing--small); }


/* Navigation im Kopf: ui-Stufe 18 px, Gewicht 500 */
.ft-kopfzeile .wp-block-navigation { font-size: 1.125rem; font-weight: 500; line-height: 1.2; }
.ft-kopfzeile .wp-block-navigation .wp-block-navigation-item__content { font-weight: 500; }

/* Warenkorb: Symbol mit Anzahl, Text nur für Screenreader */
.ft-warenkorb { display: inline-flex; align-items: baseline; gap: 6px; color: var(--wp--preset--color--primary); text-decoration: none; font-family: var(--wp--preset--font-family--primary); font-size: 1.125rem; font-weight: 500; font-stretch: 95%; line-height: 1.2; }
.ft-warenkorb__symbol { align-self: flex-end; width: 24px; height: 24px; flex: none; }
.ft-warenkorb:hover .ft-warenkorb__zahl { text-decoration: underline; text-decoration-color: var(--akzent); text-underline-offset: 0.15em; }
.ft-warenkorb-block { color: var(--wp--preset--color--primary); }

/* ==========================================================================
   Startseite: Einstieg, Orte, Brief, Partner, Fuß
   ========================================================================== */
.ft-einstieg-text { max-width: 36em; }
.ft-einstieg-text > p { margin-block-start: var(--wp--preset--spacing--large); }
.is-style-ft-einstieg { max-width: 22em; }

/* Orte nebeneinander, mobil untereinander (Spalten stapeln unter 782 px); kein Kasten */
.ft-orte--start { align-items: flex-start; }
.ft-ort-bild--3-2 img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--wp--custom--radius-bild); }
.ft-orte--start .wp-block-image { margin: 0; }

/* Partner: eine ruhige Zeile mit Platzhaltern */
.ft-partnerzeile { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--large); align-items: center; }
.ft-partnerzeile > .ft-partnerlogo { margin: 0; }

/* Fuß: Textlinks, eine Hairline oben, kein Kasten */
.ft-fusszeile { padding: var(--wp--preset--spacing--x-large) var(--ft-stern, 30px); background: var(--wp--preset--color--base); border-top: 1px solid var(--wp--preset--color--border-light); }
.ft-fuss-spalten { align-items: flex-start; }
.ft-fusszeile .wp-block-navigation { font-size: var(--wp--preset--font-size--small); line-height: 1.4; }
.ft-fusszeile .wp-block-navigation .wp-block-navigation-item__content { padding-block: var(--wp--preset--spacing--small) 0; text-decoration: underline; text-decoration-color: var(--wp--preset--color--primary); text-underline-offset: 0.15em; }

/* Menü-Knopf (mobil): ohne Fläche, nur das Symbol in Grau; Fokusring wie im Design-System (2 px grau, Versatz 2 px).
   Überschreibt Ollies Kachel (core-navigation.css: tertiary-Fläche, Radius 3 px, Innenabstand 4 px). */
.ft-kopfzeile .wp-block-navigation__responsive-container-open,
.ft-kopfzeile .wp-block-navigation__responsive-container-open:has(svg),
.ft-kopf-klassisch .wp-block-navigation__responsive-container-open,
.ft-kopf-klassisch .wp-block-navigation__responsive-container-open:has(svg),
.wp-block-navigation__responsive-container-close:has(svg) {
	background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none;
	color: var(--wp--preset--color--primary);
}
.ft-kopfzeile .wp-block-navigation__responsive-container-open:focus-visible,
.ft-kopf-klassisch .wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }

/* ==========================================================================
   Fuß (Template-Teil footer-ft, seit 15.10.2026 neu; der bisherige Fuß liegt als footer-ft-alt vor)
   Fläche papier-ton (tertiary), drei Spalten mit Kopf im Stil Dachzeile (Fototage, Tickets, Rechtliches), darunter Trennlinie
   in grau-linie und die Zeile „© [JAHR] [ANBIETER]“ (Platzhalter). Rechts daneben ist Platz für einen späteren Knopf „Vertrag
   widerrufen“ (noch nicht eingebaut). Mobil stehen die Spalten untereinander (Kernblock „Spalten“ stapelt unter 782 px).
   ========================================================================== */
.ft-fuss { padding-block: var(--wp--preset--spacing--xx-large); }
.ft-fuss .ft-fuss-spalten { align-items: flex-start; }
.ft-fuss .is-style-ft-dachzeile { margin-block: 0 var(--wp--preset--spacing--small); }
.ft-fuss .wp-block-navigation { font-size: var(--wp--preset--font-size--small); line-height: 1.4; }
.ft-fuss .wp-block-navigation .wp-block-navigation-item__content { padding-block: var(--wp--preset--spacing--small) 0; text-decoration: underline; text-decoration-color: var(--wp--preset--color--primary); text-underline-offset: 0.15em; }
.ft-fuss .ft-fuss__unten { margin-block-start: var(--wp--preset--spacing--x-large); padding-block-start: var(--wp--preset--spacing--medium); border-top: 1px solid var(--wp--preset--color--border-light); }
/* Kontaktzeilen: Schrift der Oberfläche (Archivo) statt Lesetext, Größe small, Zeilenabstand 1,5; Links darin unterstrichen */
.ft-fuss .ft-fuss__unten p { margin: 0; font-family: var(--wp--preset--font-family--primary); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.ft-fuss .ft-fuss__unten p a { text-decoration: underline; text-decoration-color: var(--wp--preset--color--primary); text-underline-offset: 0.15em; }
/* Der Knopf „Vertrag widerrufen“ steht per Kurzcode in einem <p> und würde sonst die Unterstreichung der Kontaktlinks erben; er bleibt ein Knopf ohne Unterstreichung. */
.ft-fuss .ft-fuss__unten p a.german-market-withdrawal-button { text-decoration: none; }
/* Rechtslinks unten (Impressum, AGB, Datenschutz, Cookie-Einstellungen): ohne Unterstreichung, Unterstreichung nur bei Hover und Fokus.
   Die oberen Navigationen (Programm und Tickets, Service) bleiben unterstrichen (Regel oben). */
.ft-fuss .ft-fuss__unten .wp-block-navigation .wp-block-navigation-item__content { text-decoration: none; }
.ft-fuss .ft-fuss__unten .wp-block-navigation .wp-block-navigation-item__content:hover,
.ft-fuss .ft-fuss__unten .wp-block-navigation .wp-block-navigation-item__content:focus-visible { text-decoration: underline; text-decoration-color: var(--wp--preset--color--primary); text-underline-offset: 0.15em; }
/* Zentrierter Fuß: die Abstände zwischen Logopaar, Navigationen und Social Icons kommen aus dem Block (blockGap large); der Innenabstand der
   Navigationspunkte (Regel oben, small) bläht sie nur auf und entfällt. Nicht im Kassenfuß (.ft-fuss--kasse). */
.ft-fuss:not(.ft-fuss--kasse) .wp-block-navigation .wp-block-navigation-item__content { padding-block: 0; }
/* Social Icons: 24 px, Farbe aus dem Block (iconColorValue, Token primary), Tippfläche 44 × 44 px (24 px Symbol, 10 px Innenabstand), sichtbarer Hover
   (Deckkraft) und Fokusring 2 px primary mit Versatz 2 px */
.ft-fuss-social { font-size: 24px; }
.ft-fuss-social .wp-social-link a { padding: 10px; }
.ft-fuss-social .wp-social-link a:hover { opacity: 0.65; }
.ft-fuss-social .wp-social-link a:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
/* Knopf „Vertrag widerrufen“ (German Market, Kurzcode [gm_withdrawal_button_link]) in einer eigenen Zeile unter den Rechtslinks (zentriert), auch im Kassenfuß (.ft-fuss--kasse):
   Stil „Sekundär“ wie styles/blocks/button/ft-sekundaer.json (Fläche base, Schrift und 2-px-Rahmen primary, Radius 0; Hover Fläche primary, Schrift base),
   bleibt ein Knopf und ist kein Textlink; ohne Unterstreichung. */
.ft-fuss .german-market-withdrawal-button,
.ft-fuss--kasse .german-market-withdrawal-button {
	display: inline-block;
	text-decoration: none;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 0;
}
.ft-fuss .german-market-withdrawal-button:hover,
.ft-fuss .german-market-withdrawal-button:focus-visible,
.ft-fuss--kasse .german-market-withdrawal-button:hover,
.ft-fuss--kasse .german-market-withdrawal-button:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Fuß: drei Spalten ab 600 px (der Kernblock Spalten stapelt sonst erst unter 782 px); darunter stehen sie untereinander mit dem Abstand x-large */
@media (min-width: 600px) and (max-width: 781px) {
	.ft-fuss .ft-fuss-spalten:not(.is-not-stacked-on-mobile) { flex-wrap: nowrap !important; }
	.ft-fuss .ft-fuss-spalten:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 0 !important; flex-grow: 1; min-width: 0; }
}
@media (max-width: 599px) {
	.ft-fuss .ft-fuss-spalten { row-gap: var(--wp--preset--spacing--x-large); }
}

/* Partnerleiste, die den Hero überlappt (Klasse ft-ueberlappt, ab 600 px; darunter ohne Überlappung) */
@media (min-width: 600px) {
	.ft-ueberlappt { position: relative; z-index: 1; margin-block-start: calc(-1 * var(--wp--preset--spacing--xx-large)); }
}
/* Hero direkt vor der Überlappung: der untere Innenabstand des Hero-Textes wächst um die Überlappung (xx-large), damit Titel und Knopf
   nicht unter die Partnerleiste rutschen. !important, weil der Abstand als Inline-Stil im Block steht; ab 600 px, darunter unverändert. */
@media (min-width: 600px) {
	.ft-hero:has(+ .ft-ueberlappt) .ft-hero-text { padding-bottom: calc(var(--wp--preset--spacing--xxx-large) + var(--wp--preset--spacing--xx-large)) !important; }
}
/* Partnerleiste mobil (unter 600 px): die Logos umbrechen in Reihen, mittig; zwei je Reihe (Zellen zu halber Reihenbreite); die Breiten kommen fließend als clamp() aus dem Block, kein zoom.
   Ab 600 px gilt die Einstellung aus dem Block. */
@media (max-width: 599px) {
	.wp-block-group.ft-partnerleiste { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: var(--wp--preset--spacing--medium); row-gap: var(--wp--preset--spacing--large); }
	/* Zwei Logos je Reihe: die Zelle ist halb so breit wie die Reihe (abzüglich halbem Spaltenabstand), das Bild behält seine Breite */
	.ft-partnerleiste .wp-block-image { flex: 0 0 calc(50% - var(--wp--preset--spacing--medium) / 2); display: flex; justify-content: center; margin: 0; }
}
/* Logos laufen nie über ihre Spalte hinaus; die Breiten kommen als clamp() aus dem Block (z. B. width: clamp(88px, 10.16vw, 130px)). */
.ft-partnerleiste .wp-block-image img { max-width: 100%; height: auto; }
/* Partnerleiste nach Orten (.ft-partnerort): ab 600 px Logos links bündig und vertikal mittig in ihren Zellen; die Spalten (vier) kommen aus dem
   Block. Unter 600 px bleibt die Regel oben (flex, zentriert). Selektor mit .wp-block-group, damit er die Layout-Klasse des Blocks sicher schlägt. */
@media (min-width: 600px) {
	.ft-partnerort .wp-block-group.ft-partnerleiste { align-items: center; justify-items: start; }
	.ft-partnerort .ft-partnerleiste .wp-block-image { margin: 0; }
}

/* Brief klassisch (.ft-brief-klassisch, .ft-brief-text, .ft-brief-portraet): Lesetext höchstens 52 rem breit, mittig; das Porträt steht ab
   600 px rechts neben dem Text (38 %, Abstand links und unten large), darunter in voller Breite über dem Text. Die Unterschrift
   (letzter Absatz) räumt den Float. */
.ft-brief-klassisch .ft-brief-text { max-width: 52rem; margin-inline: auto; }
.ft-brief-klassisch .ft-brief-text .wp-block-image.ft-brief-portraet { float: none; width: 100%; margin-inline: 0; margin-block: 0 var(--wp--preset--spacing--large); }
.ft-brief-klassisch .ft-brief-text .ft-brief-portraet img { display: block; width: 100%; height: auto; }
@media (min-width: 600px) {
	.ft-brief-klassisch .ft-brief-text .wp-block-image.ft-brief-portraet { float: right; width: 38%; margin-inline: var(--wp--preset--spacing--large) 0; }
}
.ft-brief-klassisch .ft-brief-text > p:last-child { clear: both; }

/* Startseite: Raster aus Brief und Newsletter (.ft-brief-raster, Kern-Gruppe mit Grid-Layout, drei Spalten, Auftrag 18.10.2026).
   Das Grid hat im Block keine Mindestbreite (mit Mindestbreite zerfällt es am Desktop), daher hier unter 782 px (Umbruch der Kern-Spalten)
   einspaltig: alle Kinder über die volle Breite (der Spaltenspan der Blöcke wird aufgehoben) in der Reihenfolge Anrede, Brief,
   „Newsletter“, Kasten, damit die Überschrift „Newsletter“ direkt über dem Kasten steht. Doppelte Klasse, weil WordPress die
   Grid-Spalten und die Spans mit einer einfachen Klasse im Kopf der Seite ausgibt. */
@media (max-width: 781px) {
	.wp-block-group.ft-brief-raster { grid-template-columns: minmax(0, 1fr); }
	.wp-block-group.ft-brief-raster > * { grid-column: 1 / -1; min-width: 0; }
	.wp-block-group.ft-brief-raster > .ft-brief-anrede { order: 1; }
	.wp-block-group.ft-brief-raster > .ft-brief-text { order: 2; }
	.wp-block-group.ft-brief-raster > .ft-newsletter-titel { order: 3; }
	.wp-block-group.ft-brief-raster > .ft-newsletter-kasten { order: 4; }
}
/* Ab 782 px (drei Spalten): „Newsletter“ unten in der ersten Zeile, damit die Überschrift auf der Grundlinie der zweiten Anredezeile steht;
   der Abstand zum Kasten ist wie der von Anrede zu Brief der Zeilenabstand des Rasters (Grid-Kinder haben keinen eigenen Außenabstand).
   Der Kasten beginnt oben bündig mit dem Brief und damit mit dem Porträt; seine Höhe richtet sich nach dem Inhalt, nicht nach dem Bild. */
@media (min-width: 782px) {
	.wp-block-group.ft-brief-raster > .ft-newsletter-titel { align-self: end; }
	.wp-block-group.ft-brief-raster > .ft-newsletter-kasten { align-self: start; }
}

/* Preisbox „Junior“ auf /tickets/ (Klasse ft-preis-junior steht noch in der Datenbankvorlage archive-product): Absatz ohne Außenabstand.
   Die Regeln für .ft-preis-live (Preis live aus WooCommerce) sind entfernt, die Klasse kommt in keiner Vorlage mehr vor. */
.ft-preis-junior p { margin: 0; }

/* ===== 3. Ticketliste: Kaufbereich nicht mehr je nach Textlänge umbrechen =====
   .ft-ticket-zeile-links hatte flex-grow 1 mit flex-basis auto, die Textlänge entschied über den Umbruch. */
@media (min-width: 782px) {
	.ft-ticket-zeile { flex-wrap: nowrap !important; }
	.ft-ticket-zeile-links { flex: 1 1 0 !important; min-width: 0; }
	.ft-ticket-zeile-kauf { flex: none !important; }
}
@media (max-width: 781px) {
	.ft-ticket-zeile { flex-wrap: wrap !important; }
	.ft-ticket-zeile-links, .ft-ticket-zeile-kauf { flex: 1 1 100% !important; }
	.ft-ticket-zeile-kauf { justify-content: flex-start !important; }
}
/* Unter 600 px: Bild über dem Text, volle Breite, 4:3 (Variante A, Sven 17.10.2026) */
@media (max-width: 599px) {
	.ft-ticket-zeile-links { flex-direction: column !important; align-items: stretch !important; flex-wrap: wrap !important; }
	.ft-ticket-zeile-bildrahmen { width: 100% !important; flex: 0 0 auto !important; max-width: none !important; }
	.ft-ticket-zeile-bild, .ft-ticket-zeile-bild a { display: block; width: 100% !important; }
	.ft-ticket-zeile-bild img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; }
}

/* Ticketliste: Texte der Produktsammlung in Lesetextgröße (Ollie und WooCommerce setzen small) */
.ft-tickets .wp-block-woocommerce-product-collection {
	--wp--preset--font-size--small: var(--wp--preset--font-size--base);
}
/* Ticketliste: Bild schrumpft nicht mehr bei langen Titeln (z. B. Norwegen) */
.ft-ticket-zeile-bildrahmen { flex-shrink: 0 !important; }

/* Produktseite (Template single-product): German Market gibt Preisspanne, MwSt., Versand und Lieferzeit
   automatisch nach dem Titel aus. Wo die German-Market-Blöcke unter dem Preis stehen, wird diese
   Doppelung ausgeblendet; der Preisblock darüber zeigt den Preis der gewählten Ticketart. */
.ft-ticket-kauf:has(.wp-block-german-market) .legacy-itemprop-offers { display: none; }
.ft-ticket-preis .wp-block-german-market .wgm-info { font-size: var(--wp--preset--font-size--small); margin: 0; }
.ft-ticket-preis .wp-block-german-market + .wp-block-german-market { margin-top: 0.25em; }

/* Produktseite: „von und mit“ nicht kräftiger als die Namen (WooCommerce/Ollie setzen das Präfix auf 600) */
.ft-ticket-referent .wp-block-post-terms__prefix { font-weight: 400; }

/* Terminzeilen (Programm, Vortragsseiten): ab 600 px bleibt der Knopf „Tickets“ immer rechts,
   lange Ortsangaben (Kinopalast Eifel|Mosel|Hunsrück, Wittlich) brechen innerhalb der Angaben um.
   Darunter bleibt das Umbrechen der Blockeinstellung (Knopf unter dem Text). */
@media (min-width: 600px) {
	.ft-termin-zeile { flex-wrap: nowrap !important; }
	.ft-termin-zeile > .ft-termin-angaben { flex: 1 1 auto; min-width: 0; }
	.ft-termin-zeile > .wp-block-buttons { flex: none; }
}

/* Banderole „Ausverkauft“ auf Ticketbildern (Variante B, Entscheidung Sven 30.10.2026; ersetzt den runden Sticker, Variante A vom 17.10.2026). Nur CSS, kein Text im Markup.
   Wann: WooCommerce setzt outofstock bei „Nicht vorrätig“ (bei variablen Produkten erst, wenn alle Varianten nicht vorrätig sind).
   Wo ankommt die Klasse: in der Ticketliste am li.wc-block-product (Bild: .ft-ticket-zeile-bild); auf der Ticketseite am body (kein Container
   um die Galerie), deshalb body.single-product.outofstock. Nur das große Bild der Galerie, nicht die Vorschaubilder.
   Größe: --ft-sticker in cqw (Container Query Units, Bezug: Bildbreite); die Schrift der Banderole wächst mit (15 % davon), die Breite ergibt sich aus dem Text.
   Ausnahme von der Akzent-Regel (Fläche): ausdrücklich so entschieden. Schrift text-auf-akzent (Schwarz auf Akzent), Schatten aus dem Token. */
.wc-block-product.outofstock .ft-ticket-zeile-bild,
body.single-product.outofstock .ft-ticket-galerie .wc-block-product-gallery-large-image {
	position: relative;
	container-type: inline-size;
}
.wc-block-product.outofstock .ft-ticket-zeile-bild { --ft-sticker: 50cqw; }
body.single-product.outofstock .ft-ticket-galerie .wc-block-product-gallery-large-image { --ft-sticker: 32cqw; }
.wc-block-product.outofstock .ft-ticket-zeile-bild::after,
body.single-product.outofstock .ft-ticket-galerie .wc-block-product-gallery-large-image::after {
	content: "Ausverkauft";
	white-space: nowrap;
	position: absolute;
	top: 8%;
	right: 5%;
	z-index: 3;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: auto;
	aspect-ratio: auto;
	padding: .45em .9em;
	border-radius: 999px;
	background: var(--akzent);
	color: var(--text-auf-akzent);
	font-family: var(--wp--preset--font-family--primary);
	font-size: calc(var(--ft-sticker) * 0.15);
	font-weight: 900;
	font-stretch: 92%;
	line-height: 1;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
	transform: rotate(-8deg);
	box-shadow: var(--wp--custom--schatten-leiste);
	pointer-events: none;
}

/* Ticketseite: großes Bild im Format 3:2 statt 1:1 (Programmfotos sind 3:2); WooCommerce setzt den Rahmen des großen Bilds per Inline-Variable auf 1:1, das Foto
   stand darin mit object-fit: contain mittig und unter ihm blieb eine Lücke bis zu den Vorschaubildern. Pfeile und Vorschaubilder rücken an das Foto.
   Festival- und Kombiticket haben 4:3-Bilder: im 3:2-Rahmen schmale Ränder links und rechts, akzeptiert (Auftrag 19.10.2026). */
.ft-ticket-galerie .wc-block-product-gallery-large-image__wrapper { aspect-ratio: 3 / 2; }
/* Ab zwei Spalten (Umbruch der Kern-Spalten bei 782 px): die Bildspalte rückt um die Logohöhe (56 px, steht im Template als Höhe des Orts-Logos, in
   single-product wie in ft-ticket-wittlich) plus Abstand small nach unten, damit das Bild an der Oberkante der Überschrift beginnt. Darunter, gestapelt, unverändert. */
@media (min-width: 782px) {
	.ft-ticket .wp-block-columns > .wp-block-column:first-child { padding-top: calc(56px + var(--wp--preset--spacing--small)); }
}

/* MwSt.-Zeile von German Market („Enthält 19% MwSt.“) im Warenkorb und in der Bestellübersicht der Kasse unter 500 px: Ollies woocommerce.css setzt
   .wc-block-components-product-price auf display: flex mit Umbruch (in @container max-width 500px, Zeile 1462 ff.) und im Warenkorb die Schrift x-small
   (Zeile 1020 ff.); Preis und MwSt.-Zeile standen dadurch nebeneinander und die Spalte brach um. Hier: Spalte der Summe 7,5 em, Preisblock als Block
   (Preis oben, MwSt.-Zeile darunter) in x-small, der Preiswert selbst in small. Eintrag in docs/ollie-reibung.md. */
@media (max-width: 500px) {
	.wc-block-cart-item__total { width: 6.5em; }
	.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price { width: 6.5em; margin-left: 0; }
	.wc-block-cart .wc-block-components-product-price,
	.wc-block-components-order-summary .wc-block-components-product-price {
		display: block;
		font-size: var(--wp--preset--font-size--x-small);
		white-space: normal;
	}
	/* Preiswert als eigene Zeile: German Market hängt den Steuerhinweis („Enthält … € MwSt. (19 %)“) als reinen Textknoten hinter den Preiswert
	   (kein Element, keine Klasse); steht der Preiswert inline-block, beginnt der Text in derselben Zeile („65,00 € Enthält“). Als Block steht der
	   Hinweis darunter und darf umbrechen. Spalte der Summe 6,5 em statt 7,5 em (Prüfung Sven 19.10.2026, 375 px, Auftrag Nachbesserung). */
	.wc-block-cart .wc-block-components-product-price .wc-block-components-product-price__value,
	.wc-block-components-order-summary .wc-block-components-product-price .wc-block-components-product-price__value {
		display: block;
		font-size: var(--wp--preset--font-size--small);
		white-space: normal;
	}
	/* Warenkorb: dieselbe Regel mit der Spezifität von WooCommerce (blocks/cart.css setzt den Preiswert in der Tabelle mit
	   `table.wc-block-cart-items … __value` auf inline-block, Spezifität 0,5,1; die kürzere Regel oben verliert dagegen). Die Kasse braucht das nicht
	   (Prüfung Sven 19.10.2026, 375 px: Kasse in Ordnung, Warenkorb nicht). */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price .wc-block-components-product-price__value {
		display: block;
	}
}

/* Mini-Warenkorb (Schublade), Variante A (Entscheidung Sven 18.10.2026, Auftrag css-mini-warenkorb): Spalte „Gesamt“ aus.
   German Market hängt den Steuerhinweis ohne Umbruch an den Zeilenpreis; das Raster rechnete sich dadurch auf vier Spalten, der Name wurde
   gequetscht, Preis und Abzeichen liefen über den Rand. Der Stückpreis (mit Streichpreis) steht unter dem Namen, die Summe im Fuß.
   Nur die Schublade: Warenkorbseite und Kasse brauchen die Gesamtspalte. Doppelte Klasse für mehr Spezifität gegen WooCommerces Raster. */
.wc-block-mini-cart__drawer.wc-block-mini-cart__drawer .wc-block-cart-items__row { grid-template-columns: 80px 1fr; }
.wc-block-mini-cart__drawer .wc-block-cart-item__total { display: none; }
/* Mini-Warenkorb: Hinweissatz auch unter 480 px zeigen (WooCommerce blendet ihn mobil aus). Hinweissatz „Alle Preise inkl. MwSt. Versand kostenfrei.“
   (Filter in ft-core). Selektor wie bei WooCommerce, mit .wc-block-mini-cart__drawer davor, damit die Regel ohne !important gewinnt. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description { display: block; }
/* Mengenwahl überall (Startseite, Warenkorb, Schublade): Fokusring an „+“ und „−“ eckig, 2 px primary mit Versatz 2 px (zuvor runde schwarze Ecken, Prüfung Sven 18.10.2026) */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { border-radius: 0; }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus-visible { border-radius: 0; box-shadow: none; outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
/* Mengenwahl als ein Kasten, eckig, Linie in Textfarbe */
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector { border: 1px solid currentColor; border-radius: 0; }
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector input { border: 0; box-shadow: none; }

/* ===== 4. Zeitleiste (Seite „Über uns“) =====
   Mobil: Linie links, Karten rechts daneben. Ab 782 px: Linie in der Mitte, Karten abwechselnd links und rechts,
   Jahresmarke auf der Linie, kleines Quadrat in der Saisonfarbe als Marker, Pfeil vom Kartenkopf zur Linie. */
.ft-zeitleiste { position: relative; --ft-zl-x: 9px; overflow-x: clip; } /* clip: einfliegende Karten erzeugen keine waagrechte Scrollleiste */
.ft-zeitleiste::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: var(--ft-zl-x); width: 2px;
	background: var(--wp--preset--color--border-light); transform-origin: top;
}
.ft-zeitleiste__station { position: relative; padding-left: calc(var(--ft-zl-x) * 2 + var(--wp--preset--spacing--large)); }
.ft-zeitleiste__station::before {
	content: ""; position: absolute; z-index: 1; left: calc(var(--ft-zl-x) - 6px); top: 2.6rem;
	width: 14px; height: 14px; background: var(--akzent);
}
.ft-zeitleiste__marke { display: none; }
.ft-zeitleiste__karte { position: relative; overflow: visible; }
.ft-zeitleiste__kopf { border-radius: var(--wp--custom--radius-bild) var(--wp--custom--radius-bild) 0 0; }
.ft-zeitleiste__kopf h3, .ft-zeitleiste__kopf p { margin: 0; }
.ft-zeitleiste__karte::before {
	content: ""; position: absolute; top: 2.3rem; left: -10px;
	border: 10px solid transparent; border-left: 0; border-right-color: var(--wp--preset--color--primary);
}
@media (min-width: 782px) {
	.ft-zeitleiste { --ft-zl-x: 50%; }
	.ft-zeitleiste::before { left: calc(50% - 1px); }
	.ft-zeitleiste__station { width: 50%; padding-left: 0; padding-top: 3rem; }
	.ft-zeitleiste__station:nth-child(odd) { padding-right: var(--wp--preset--spacing--xx-large); }
	.ft-zeitleiste__station:nth-child(even) { margin-left: 50%; padding-left: var(--wp--preset--spacing--xx-large); }
	.ft-zeitleiste__station + .ft-zeitleiste__station { margin-top: calc(var(--wp--preset--spacing--xx-large) * -1); }
	.ft-zeitleiste__marke {
		display: block; position: absolute; z-index: 2; top: 0; margin: 0; padding: 0.35em 0.75em;
		font-weight: 600; letter-spacing: 0.06em; line-height: 1.2; white-space: nowrap; transform: translateX(-50%);
	}
	.ft-zeitleiste__station:nth-child(odd) .ft-zeitleiste__marke { left: 100%; }
	.ft-zeitleiste__station:nth-child(even) .ft-zeitleiste__marke { left: 0; }
	.ft-zeitleiste__station::before { top: calc(3rem + 2.6rem); }
	.ft-zeitleiste__station:nth-child(odd)::before { left: auto; right: -7px; }
	.ft-zeitleiste__station:nth-child(even)::before { left: -7px; }
	.ft-zeitleiste__station:nth-child(odd) .ft-zeitleiste__karte::before {
		left: auto; right: -10px; border-left: 10px solid var(--wp--preset--color--primary);
		border-right: 0;
	}
}
/* Einblenden beim Scrollen: nur mit Unterstützung für scroll-gebundene Animationen (Chrome, Safari 26)
   und nur, wenn keine reduzierte Bewegung gewünscht ist. Ohne Unterstützung steht alles sofort da. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.ft-zeitleiste::before { animation: ft-zl-linie linear both; animation-timeline: view(); animation-range: entry 35% cover 80%; }
		.ft-zeitleiste__karte { --ft-zl-von: 32px; animation: ft-zl-ein linear both; animation-timeline: view(); animation-range: cover 10% cover 35%; }
		.ft-zeitleiste__station::before, .ft-zeitleiste__marke { animation: ft-zl-marke linear both; animation-timeline: view(); animation-range: cover 12% cover 30%; }
	}
	@media (min-width: 782px) {
		.ft-zeitleiste__station:nth-child(odd) .ft-zeitleiste__karte { --ft-zl-von: -32px; }
	}
}
@keyframes ft-zl-linie { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ft-zl-ein { from { opacity: 0; translate: var(--ft-zl-von) 0; } to { opacity: 1; translate: 0 0; } }
@keyframes ft-zl-marke { from { opacity: 0; scale: 0.4; } to { opacity: 1; scale: 1; } }

/* Schriftgrößen in Warenkorb, Kasse und Mini-Warenkorb wie im Lesetext der übrigen Seiten (Vorgabe Sven 17.10.2026):
   Die WooCommerce-Blöcke setzen fast alles auf var(--wp--preset--font-size--small) bzw. x-small.
   Hier werden die beiden Kürzel innerhalb der Blöcke eine Stufe höher belegt (small = base 17 px, x-small = 15 px). */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-mini-cart-contents {
	--wp--preset--font-size--small: var(--wp--preset--font-size--base);
	--wp--preset--font-size--x-small: 0.9375rem; /* Wert von small (15 px) */
}

/* Kopf der Kasse: „Zurück zum Warenkorb“ als Oberflächentext in Archivo, ohne Umbruch (bricht sonst bei 375 px) */
.wp-block-woocommerce-cart-link { font-family: var(--wp--preset--font-family--primary); white-space: nowrap; flex-shrink: 0; }

/* Kasse und Warenkorb in mittlerer Breite (WooCommerce stellt die Spalten untereinander):
   keine Trennlinie und keine Innenabstände der zweispaltigen Ansicht */
.wc-block-components-sidebar-layout.is-medium .wc-block-components-main { padding-right: 0; border-right: 0; }
.wc-block-components-sidebar-layout.is-medium .wc-block-components-sidebar { padding-left: 0; }

/* Kasse: Überschrift „Zusätzliche Informationen zur Bestellung“ ausblenden.
   Der Block enthält nur das Newsletter-Häkchen von Brevo, das direkt unter dem AGB-Häkchen stehen soll.
   Die Legende (screen-reader-text) bleibt für Screenreader erhalten. */
.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkout-step__heading-container { display: none; }
.wp-block-woocommerce-checkout-additional-information-block { margin-top: var(--wp--preset--spacing--small) !important; }

/* Kasse: Abstand zwischen den Häkchen und dem Bestellknopf */
.wp-block-woocommerce-checkout-actions-block { margin-top: var(--wp--preset--spacing--large) !important; }

/* Warenkorb: Hinweis „Sparen Sie …“ (WooCommerce-Angebot) ohne Grün, neutral grau.
   Doppelte Klasse, weil Ollies woocommerce.css gleich spezifisch ist und später lädt. */
.wc-block-components-product-badge.wc-block-components-sale-badge {
	color: var(--wp--preset--color--primary); background: transparent;
	border: 1px solid var(--wp--preset--color--border-light);
}

/* Knopf „Sekundär“ (Blockstil ft-sekundaer) auch als <button>, nicht nur als Link (Auftrag 18.10.2026):
   Der Stil kommt aus styles/blocks/button/ft-sekundaer.json; als <button class="wp-block-button__link"> (Newsletter-Formular)
   setzt sich sonst der Primärknopf aus styles.elements.button (Saisonfarbe) durch. Werte wie in der Stildatei. */
.wp-block-button.is-style-ft-sekundaer > button.wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 0;
	cursor: pointer;
}
.wp-block-button.is-style-ft-sekundaer > button.wp-block-button__link:hover,
.wp-block-button.is-style-ft-sekundaer > button.wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.wp-block-button.is-style-ft-sekundaer > button.wp-block-button__link:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }

/* Knöpfe einheitlich (Auftrag 18.10.2026, Entscheidung Sven: nur noch zwei Knopfarten, Design System Version 29).
   Primär (höchstens einer pro Ansicht): Fläche base, Schrift primary, 2-px-Rahmen akzent, Radius 0; Hover: Schrift und Rahmen main.
   Sekundär: Fläche base, Schrift und 2-px-Rahmen primary; Hover: Fläche primary, Schrift base.
   Farben, Rahmenbreite und Hover kommen aus den Stilen in der Datenbank (elements.button = primär, Blockstil woocommerce/product-button
   und Variation outline von core/button = sekundär). Hier nur, was WooCommerce den globalen Stilen entzieht. */

/* Sekundär als Link: Hover und Fokus wie beim <button> oben (die globalen Stile liefern :hover, :focus-visible fehlt dort) */
.wp-block-button.is-style-ft-sekundaer > a.wp-block-button__link:hover,
.wp-block-button.is-style-ft-sekundaer > a.wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.wp-block-button.is-style-ft-sekundaer > a.wp-block-button__link:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }

/* Produktknöpfe in der Ticketliste („Ausführung wählen“, „Tickets beim Kinopalast“): WooCommerce setzt border-style: none und schlägt damit
   die globalen Stile (:where). Nur die Linienart zurückholen; Breite und Farbe (sekundär) kommen aus den Stilen. Doppelte Klasse für Spezifität. */
.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button.wc-block-components-product-button__button {
	border-style: solid;
}

/* Produktseite „In den Warenkorb“ (Formularblock): Hauptaktion, primär. Fläche und Schrift kommen aus elements.button. Der Knopf trägt auch die
   Klasse des Produktknopf-Blocks; dessen Blockstil (woocommerce/product-button = sekundär, Rahmen primary, für /tickets/) färbte den Rahmen grau.
   Hier gilt für die Produktseite der Rahmen akzent, mit Klasse single_add_to_cart_button zusätzlich gedoppelt für Spezifität. Der ausgegraute
   Zustand vor der Auswahl einer Variante (.disabled, WooCommerce setzt die Deckkraft) bleibt, jetzt mit Rahmen. */
.single_add_to_cart_button.single_add_to_cart_button.wc-block-components-product-button__button,
.wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button.single_add_to_cart_button {
	border: 2px solid var(--akzent);
	border-radius: 0;
}
.single_add_to_cart_button.single_add_to_cart_button.wc-block-components-product-button__button:hover:not(.disabled),
.single_add_to_cart_button.single_add_to_cart_button.wc-block-components-product-button__button:focus-visible,
.wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button.single_add_to_cart_button:hover:not(.disabled),
.wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button.single_add_to_cart_button:focus-visible {
	border-color: var(--wp--preset--color--main);
	color: var(--wp--preset--color--main);
}
.single_add_to_cart_button:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }

/* Mini-Warenkorb „Warenkorb anzeigen“ (Variante outline): WooCommerce macht ihn transparent mit currentcolor und zeichnet die Linie als
   box-shadow; dazu kam der Rahmen akzent aus elements.button. Soll sekundär sein: Fläche base, Schrift und 2-px-Rahmen primary, kein box-shadow.
   „Zur Kasse gehen“ ist primär und bleibt unberührt. box-shadow mit !important, weil WooCommerce die Linie in mehreren Zuständen setzt. */
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart.wc-block-mini-cart__footer-cart {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 0;
	box-shadow: none !important;
}
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart.wc-block-mini-cart__footer-cart:hover,
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart.wc-block-mini-cart__footer-cart:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }

/* Newsletter-Formular (synchronisiertes Muster „Newsletter-Formular“, wp_block 381, Auftrag 18.10.2026).
   Aufbau liegt in der Datenbank: form.ft-newsletter > .ft-newsletter__felder > 3 × p.ft-newsletter__feld (Vorname, Nachname, E-Mail),
   darunter Knöpfe, Hinweis, Honeypot. Felder: Archivo (Oberfläche), Rahmen 1 px grau (Kontrast 6,7:1 auf papier), Radius 0,
   Fokusring 2 px grau mit Versatz 2 px (40-web.md). Schriftgröße 17 px verhindert das Hineinzoomen auf iOS. */
.ft-newsletter { max-width: 32rem; }
.ft-newsletter__felder { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--medium); }
.ft-newsletter__feld { margin: 0; }
.ft-newsletter__feld label {
	display: block;
	margin-block-end: calc(var(--wp--preset--spacing--small) / 2);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	font-stretch: 95%;
	line-height: 1.3333;
	color: var(--wp--preset--color--main);
}
.ft-newsletter__optional { font-weight: 400; color: var(--wp--preset--color--primary); }
.ft-newsletter__feld input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	font-stretch: 95%;
	line-height: 1.5;
	color: var(--wp--preset--color--main);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 0;
}
.ft-newsletter__feld input:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.ft-newsletter .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--medium); }
.ft-newsletter__hinweis { max-width: 36em; margin-block: var(--wp--preset--spacing--medium) 0; font-size: var(--wp--preset--font-size--small); line-height: 1.4; color: var(--wp--preset--color--primary); }
/* Honeypot: außerhalb des Bildes statt display:none (manche Bots überspringen ausgeblendete Felder); zusätzlich per Inline-Stil im Muster */
.ft-newsletter__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
/* Ab 768 px Vor- und Nachname nebeneinander, E-Mail darunter in voller Breite */
@media (min-width: 768px) {
	.ft-newsletter { max-width: 40rem; }
	.ft-newsletter__felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ft-newsletter__feld:last-child { grid-column: 1 / -1; }
}