/* =====================================================================
   Spiel und Kleid — Ergaenzung zu theme.json

   Hier steht nur, was theme.json nicht ausdruecken kann. Farben und
   Schriftgroessen kommen aus theme.json, nie von hier.

   FARBREGEL, gemessen:
   #ff6600 auf Weiss    2.94:1  -> reicht nicht einmal fuer grosse Schrift
   Weiss auf #ff6600    2.94:1  -> dito
   #33241a auf #ff6600  5.08:1  -> Schrift auf orangen Flaechen
   #b8410a auf Creme    5.24:1  -> Links und Knoepfe
   Orange ist Flaeche, nie Schrift.
   ===================================================================== */

/* --- Eine Breite fuer alles -------------------------------------------
   contentSize und wideSize sind beide 1100 px. Text, Kacheln und
   Galerien beginnen damit an derselben Kante.

   Fliesstext ueber 1100 px waere unlesbar — rund 150 Zeichen pro Zeile.
   Deshalb sitzen Textbloecke in einer .suk-abschnitt-Huelle (align:wide
   mit layout:default) und bekommen dort eine Lesebreite.

   Kein margin-inline-Eingriff: Ein Versuch, die automatische Zentrierung
   des Constrained-Layouts per !important zu ueberschreiben, schiebt den
   Text an den Seitenrand statt an die Kachelkante. Die Huelle loest es
   ohne Gewalt.

   Die Lesebreite ist je Ebene verschieden, weil ch an die jeweilige
   Schriftgroesse gekoppelt ist: 62ch an einer 2rem-Ueberschrift waeren
   ueber 1200 px.
   -------------------------------------------------------------------- */
.suk-abschnitt > :is(p, ul, ol, .wp-block-quote) {
	max-width: 62ch;
}

/* --- Text und Bild nebeneinander -------------------------------------
   Stand das Bild unter dem Text, blieben rechts gemessene 453 von
   1100 px leer und dazwischen eine grosse Luecke. Zweispaltig fuellt
   der Abschnitt die Flaeche.
   -------------------------------------------------------------------- */
.suk-duo {
	gap: var(--wp--preset--spacing--60);
}

.suk-duo > .wp-block-column > :is(p, ul, ol) {
	max-width: 52ch;
}

.suk-duo__bild img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--border-radius--karte);
	display: block;
}

/* Der Aufmacher darf hochformatig sein, das traegt die Seite besser. */
.suk-duo:first-child .suk-duo__bild img {
	aspect-ratio: 5 / 4;
}

.suk-duo .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--40);
}

/* --- Logowand der Hersteller ------------------------------------------
   Loest die frueheren Textpillen ab. Die waren nicht anklickbar und
   boten damit nichts, was eine Aufzaehlung nicht auch geleistet haette.
   Ein Logo dagegen wird wiedererkannt.

   Alle Dateien stammen aus der Mediathek der alten Seite, wo sie schon
   bisher gezeigt wurden.

   Umgesetzt als Gruppenlayout vom Typ "grid", nicht als Galerie: Die
   Galerie-Stilvorlage des Kerns legt die Bildunterschrift absolut ueber
   das Bild und laesst die Kacheln unterschiedlich hoch werden.
   -------------------------------------------------------------------- */
.suk-logowand {
	margin-top: var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--30);
}

.suk-logo-kachel {
	background: var(--wp--preset--color--weiss);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--border-radius--klein);
	padding: var(--wp--preset--spacing--30);
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
}

/* Die Logodateien reichen von 500x125 bis 3000x3000. Eine feste Hoehe
   plus contain bringt sie auf eine gemeinsame Grundlinie, ohne eines zu
   verzerren. */
.suk-logo-kachel img {
	height: 46px;
	width: 100%;
	object-fit: contain;
	border-radius: 0;
	display: block;
}

.suk-logo-kachel figcaption {
	font-size: 0.8125rem;
	line-height: 1.3;
	color: var(--wp--preset--color--muted);
	text-align: center;
	margin: 0;
}

.suk-weitere {
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

/* Abstand zwischen Ueberschrift und dem, was darunter folgt. Die
   Beschriftungen sassen vorher direkt an der Ueberschrift. */
.suk-abschnitt > h2 + *,
.suk-abschnitt > h3 + * {
	margin-top: var(--wp--preset--spacing--30);
}

.suk-abschnitt > .wp-block-buttons {
	max-width: 62ch;
}

.suk-abschnitt > h1 { max-width: 16ch; }
.suk-abschnitt > h2 { max-width: 22ch; }
.suk-abschnitt > h3 { max-width: 30ch; }

/* --- Kopfbereich ------------------------------------------------------
   Logo und Menue stehen gestapelt und mittig. Das Menue wiederholt das
   Logo in Worten, deshalb gehoert es darunter und nicht daneben.

   Unter 600 px klappt der Kern das Menue zum Burger — dort waere ein
   Stapel falsch, weil der Burger sonst unter dem Logo saesse. Genau bei
   600 px, weil der Kern dort umschaltet
   (`.wp-block-navigation__responsive-container-open`).
   -------------------------------------------------------------------- */
.suk-kopf .suk-kopf__reihe {
	gap: var(--wp--preset--spacing--20);
}

/* Menue und Instagram-Zeichen stehen in einer eigenen Zeile unter dem
   Logo. Das Zeichen ist bewusst KEIN Kind des Navigationsblocks: Alles,
   was darin liegt, klappt unter 600 px mit ins Burgermenue — es soll
   dort aber sichtbar neben dem Burger stehen bleiben. */
.suk-kopf__navizeile {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Derselbe Abstand wie zwischen den Menuepunkten, sonst klebt das
	   Zeichen naeher an "Unsere Laeden" als die Woerter aneinander. */
	gap: 1.75rem;
	/* Traegt die Menuegroesse fuer beide Kinder. Das Zeichen liegt
	   ausserhalb der Navigation und wuerde sonst die Schriftgroesse des
	   Kopfes erben statt der des Menues — seine em-Masse waeren dann
	   auf den falschen Wert gerechnet. */
	font-size: var(--suk-navi-groesse);
}

@media (max-width: 599px) {
	.suk-kopf .suk-kopf__reihe {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--30);
	}

	/* Zeichen links vom Burger. Im Quelltext steht es dahinter, weil auf
	   dem Desktop die umgekehrte Reihenfolge gilt. */
	.suk-kopf__navizeile {
		gap: var(--wp--preset--spacing--30);
	}

	.suk-kopf__navizeile .suk-kopf__sozial {
		order: -1;
	}
}

/* --- Instagram als Zeichen -------------------------------------------
   Als Wort war "Instagram" gleich gross wie die Seitennamen und wog
   damit schwerer als das Sortiment. Als Zeichen ordnet es sich unter.

   Die Groesse laesst sich NICHT ueber `--wp--social-icon-size` steuern:
   der Kern schreibt width und height als Attribute direkt ins SVG.
   Am 08.09.2026 nachgemessen — die Variable war gesetzt und blieb
   wirkungslos. Deshalb weiter unten das SVG selbst.
   -------------------------------------------------------------------- */
.suk-kopf__sozial {
	gap: 0;
	align-items: center;
	/* Der Kern setzt am Sozialblock feste `font-size: 24px`. Ein `em`
	   weiter unten rechnete dadurch gegen 24 px statt gegen die
	   Menueschrift — das Zeichen wurde kleiner statt groesser.
	   Am 09.09.2026 nachgemessen: 18.7 px statt der erwarteten 26. */
	font-size: inherit;
}

.suk-kopf__sozial .wp-social-link {
	margin: 0;
}

/* Tippflaeche 44 px. Sie faellt bewusst groesser aus als das Zeichen:
   WCAG 2.5.8 nennt 24 px als Minimum — genau so gross zu sein reicht
   knapp. Der Innenabstand traegt die Flaeche, ohne sichtbar zu werden;
   der Kernstil "logos-only" hat keinen Hintergrund. */
.suk-kopf__sozial .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
}

/* Groesse in em — die Menueschrift waechst mit der Fensterbreite, ein
   festes Zeichen bliebe dabei zurueck.

   1em, nicht die Versalhoehe von 0.88em: Die Instagram-Grafik fuellt
   ihre eigene Flaeche nicht aus, rundherum liegt Rand. Bei vierfacher
   Vergroesserung nachgemessen sind nur 84 % der Boxhoehe sichtbar. Mit
   0.88em wirkte das Zeichen deutlich kleiner als die Buchstaben.

   Ergebnis mit 1em, bei 33.5 px Schrift ausgelesen:

     Versalband        153.3 – 183.3   (30.0 px)
     sichtbare Marke   155.3 – 183.5   (28.1 px)

   Die Marke steht damit auf derselben Grundlinie wie die Buchstaben
   und erreicht 94 % ihrer Hoehe.

   Zur Hoehenlage, am 09.09.2026 im Browser ausgelesen (33.5 px):
   Kastenmitte 168.77, Versalmitte 168.27 — 0.5 px auseinander. Rechnerisch
   sitzt ein zentriertes Zeichen also schon richtig. Optisch wirkte es
   trotzdem eine Spur hoch; die 0.06em unten sind Fabians Korrektur nach
   Augenschein, rund 2 px bei 33.5 px Schrift.

   `position: relative` statt Aussenabstand: so verschiebt sich nur das
   Zeichen, nicht die 44 px grosse Tippflaeche darum herum. */
.suk-kopf__sozial .wp-social-link svg {
	width: 1em;
	height: 1em;
	position: relative;
	top: 0.06em;
}

/* MUSS hinter der Regel darueber stehen, nicht oben bei den anderen
   Mobilregeln: gleiche Spezifitaet, also entscheidet die Reihenfolge.
   Am 09.09.2026 genau so danebengegangen — die Regel stand vorher weiter
   oben und blieb wirkungslos, gemessen 20 px statt 28.

   Unter 600 px steht das Zeichen nicht neben Schrift, sondern neben dem
   Burger, und der ist 34 px gross. Die Menuegroesse von 20 px waere
   daneben zu klein. Feste px sind hier richtig: unter 600 px aendert
   sich an der Umgebung nichts mehr. Der Ausgleich von 0.06em faellt weg,
   es gibt keine Grundlinie, auf die er sich beziehen koennte. */
@media (max-width: 599px) {
	.suk-kopf__sozial .wp-social-link svg {
		width: 28px;
		height: 28px;
		top: 0;
	}
}

/* Die Menuepunkte bekommen beim Hovern den Pinselstrich. Hinter einem
   Zeichen saehe der aus wie ein Fehler — hier stattdessen der
   Farbwechsel auf Roestorange, den auch die Links im Text machen. */
.suk-kopf__sozial .wp-social-link a:hover,
.suk-kopf__sozial .wp-social-link a:focus-visible {
	color: var(--wp--preset--color--primary-dark);
}

/* Das Logo-PNG hat nur 220x190 Pixel und einen deckend weissen
   Hintergrund. multiply blendet das Weiss aus; die kleinere Anzeige
   haelt es so scharf wie moeglich. Eine hochaufloesende Fassung
   existiert nicht — dafuer braucht es die Originaldatei von Naturata. */
.wp-block-site-logo img {
	mix-blend-mode: multiply;
	max-width: 150px;
	height: auto;
}

/* Auf dem Handy bleibt es bei 130 px. Dort steht das Logo in einer
   Zeile mit Instagram-Zeichen und Burger, und jeder Pixel Hoehe schiebt
   den Seiteninhalt nach unten. 150 px auf dem Desktop auf Wunsch von
   Lutz, 18.09.2026. */
@media (max-width: 599px) {
	.wp-block-site-logo img {
		max-width: 130px;
	}
}

/* --- Navigation -------------------------------------------------------
   Displayschrift wie im Logo, mittig darunter.

   Die Schaukel stand hier bis zum 03.09.2026 als Trennzeichen zwischen
   den Woertern. Sie ist wieder raus — sie steht im Logo direkt
   darueber schon einmal, und zweimal dasselbe Zeichen auf 200 Pixel
   Hoehe liest sich als Versehen, nicht als Wiedererkennung.
   -------------------------------------------------------------------- */
/* Mitwachsend statt fest. Seit dem 08.09.2026 stehen mehrere Punkte im
   Menue; mit festen 2rem brach es zwischen 600 und 780 px in zwei
   Zeilen um — und genau dort greift der Burger noch nicht, der Kern
   schaltet erst unter 600 px um. Gemessen bei 640 px: 592 px breites
   Menue in zwei Zeilen.

   Untergrenze 1.25rem. Die Obergrenze ist die Themestufe `xl`, die
   selbst schon mitwaechst (clamp 1.625rem bis 2.25rem) — nachgemessen
   36 px bei 1400 px Fenster. Verschachtelte clamp() sind zulaessig;
   der Vorteil ist, dass das Menue der Typoskala folgt, falls die
   spaeter nachjustiert wird.

   Als Variable, weil das Instagram-Zeichen dieselbe Groesse braucht,
   aber ausserhalb des Navigationsblocks steht. Eine Quelle, zwei
   Verwender. */
.suk-kopf {
	--suk-navi-groesse: clamp(1.25rem, 0.55rem + 1.9vw, var(--wp--preset--font-size--xl));
}

.suk-navi {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--suk-navi-groesse);
}

.suk-navi .wp-block-navigation__container {
	align-items: center;
	/* Ohne Trennzeichen dazwischen traegt allein der Abstand die
	   Trennung. 0.85rem waren mit der Schaukel richtig und sind ohne
	   sie zu wenig. Der Zeilenabstand ist knapper als der Spaltenabstand:
	   falls das Menue doch einmal umbricht, sitzen die Zeilen dann nicht
	   wie zwei getrennte Bloecke uebereinander. */
	column-gap: 1.75rem;
	row-gap: 0.4rem;
}

/* display: inline ist hier kein Schoenheitsfehler, sondern Absicht.
   Der Menuelink ist von Haus aus ein Block; sein Hintergrundkasten ist
   damit 1.95 em hoch statt 1.44 em wie bei einem Inline-Element. Der
   Pinselstrich saesse dadurch 0.18 em zu tief und liesse die
   Buchstabenoberkanten herausschauen — nachgemessen am 22.08.2026.
   Inline gestellt gilt dieselbe Regel wie ueberall sonst. */
/* Der Kern macht jeden Menuepunkt zum Flex-Container. Kinder eines
   Flex-Containers werden von CSS zwangsweise auf display:block gesetzt
   — `display: inline` am Link allein bleibt deshalb wirkungslos, egal
   wie spezifisch die Regel ist. Erst muss der Menuepunkt aufhoeren,
   Flex zu sein. */
.suk-navi .wp-block-navigation-item {
	display: block;
}

.suk-navi .wp-block-navigation-item .wp-block-navigation-item__content {
	display: inline;
}

.suk-navi a {
	text-decoration: none;
	letter-spacing: 0.01em;
	/* Dasselbe padding-inline wie beim Pinselstrich weiter unten, und
	   zwar IMMER — nicht erst beim Hovern. Sonst waechst der Link im
	   Moment des Hoverns um 0.24em, und alles dahinter springt zur
	   Seite. */
	padding-inline: 0.12em;
	/* Kein padding-block: Bei einem Inline-Element vergroessert es die
	   Hintergrundflaeche mit, und der Pinselstrich saesse wieder
	   daneben. Die Klickflaeche traegt der Menuepunkt darum herum. */
	padding-block: 0;
}

/* Tippziel am Menuepunkt statt am Link — dort stoert der Abstand die
   Hintergrundflaeche nicht. */
.suk-navi .wp-block-navigation-item {
	padding-block: 0.5rem;
}

/* Die aktuelle Seite bekommt den Pinselstrich — dieselbe Auszeichnung
   wie im Aufmacher, nur kleiner. Die Werte stehen bei .suk-strich und
   sind dort begruendet. */
.suk-navi .current-menu-item > a,
.suk-navi .current-menu-ancestor > a,
.suk-navi a:hover {
	color: var(--wp--preset--color--contrast);
}

/* --- Mobile Navigation ------------------------------------------------
   Das Menuezeichen ist von Haus aus rund 24 px klein. WCAG 2.5.8 nennt
   24 px als Minimum, nicht als Zielgroesse — fuer eine Seite, die viel
   auf dem Handy aufgerufen wird, ist das zu knapp.
   -------------------------------------------------------------------- */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 52px;
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

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

/* Die Farbe des Overlays steht NICHT hier, sondern als
   `overlayBackgroundColor` am Navigationsblock in parts/header.html.
   Der Kern faerbt sonst mit
   `.wp-block-navigation:not(.has-background) ... .is-menu-open`
   weiss, und diese Regel schlaegt jede Themeregel gleicher
   Spezifitaet. Ueber das Blockattribut faellt `:not(.has-background)`
   weg — und ein Redakteur kann die Farbe selbst aendern. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

/* Ausrichtung im Overlay. Der Kern leitet sie aus der Desktop-Stellung
   der Navigation ab; die ist inzwischen mittig, das Overlay saesse
   also mittig. Die Menuepunkte sollen aber unter dem Burger stehen,
   der oben rechts sitzt — sonst wandert der Blick quer. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	align-items: flex-end;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--50);
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
}

/* Im Overlay setzt der Kern die Menuepunkte ueber
   `.wp-block-navigation__responsive-container.is-menu-open:where(...)
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation-item`
   erneut auf Flex — vier Klassen, also mehr als die Desktop-Regel
   `.suk-navi .wp-block-navigation-item`. Damit waere der Link wieder
   ein Block, sein Hintergrundkasten nur zeilenhoch, und der
   Pinselstrich schnitte die Unterlaengen ab. Der Selektor muss den
   des Kerns deshalb ueberbieten. */
.suk-navi
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation-item {
	display: block;
}

.suk-navi
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation-item
	.wp-block-navigation-item__content {
	display: inline;
}

.wp-block-navigation__responsive-container.is-menu-open a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	line-height: 1.3;
	/* Kein padding-block am Link — es vergroessert die
	   Hintergrundflaeche mit, und der Pinselstrich rutscht aus den
	   Buchstaben heraus. Der Abstand sitzt am Menuepunkt darum
	   herum; dieselbe Begruendung wie beim Desktop-Menue. */
	padding-block: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	padding-block: 0.4rem;
}

/* --- Pinselstrich ---------------------------------------------------
   Ein Textmarker muss die Buchstaben VOLLSTAENDIG hinterlegen, sonst
   liest er sich als Durchstreicher.

   Die Hintergrundflaeche eines INLINE-Elements ist nicht zeilenhoch,
   sondern so hoch wie der Schriftkegel. Am 21.08.2026 im Browser
   nachgemessen (Sans Culottes, 60 px):

     Spanhoehe      87.2 px = 1.450 em   (Zeilenhoehe waere 67.2 px)
     Oberlaenge             = 1.167 em
     Unterlaenge            = 0.283 em
     Versalhoehe    52 px   = 0.867 em

   Versalien liegen zwischen 0.30 em und 1.167 em unter der Oberkante.
   Das Band deckt 0.22 em bis 1.24 em ab — oben wie unten 0.077 em Luft.
   Immer em, nie Prozent.
   ------------------------------------------------------------------- */
.suk-strich,
.suk-navi .current-menu-item > a,
.suk-navi .current-menu-ancestor > a,
.suk-navi a:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M2 8c30-5 60-6 96-4 34 2 68 1 100-2v30c-32 4-66 5-100 3-36-2-66-1-96 3z' fill='%23ff6600'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 1.02em;
	background-position: left calc(100% - 0.21em);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding-inline: 0.12em;
}

.suk-vorzeile {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
	margin-bottom: 0.75rem;
}

/* --- Aussageband ------------------------------------------------------
   Gerade, nicht gekippt. Dokumentierte Vorgabe aus dem Naturata-Projekt:
   gerade Linien als Grundordnung, schraeg bleiben nur einzelne Elemente.
   Damit entfaellt auch die overflow-Huelle, die eine Kippung braucht.
   -------------------------------------------------------------------- */
.suk-band {
	background: var(--wp--preset--color--primary);
	padding-block: var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--auf-orange);
}

.suk-band h2,
.suk-band p {
	color: var(--wp--preset--color--auf-orange);
	max-width: 40ch;
}

.suk-band p {
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--lg);
}

/* Auf dem Handy linksbuendig wie der uebrige Text. Zentrierte
   Fliesszeilen auf schmalem Schirm erzeugen ausgefranste Kanten und
   lesen sich schlechter. Ab Tabletbreite steht das Band mittig. */
@media (min-width: 782px) {
	.suk-band {
		text-align: center;
	}

	.suk-band h2,
	.suk-band p {
		margin-inline: auto !important;
	}
}

/* --- Galerie ----------------------------------------------------------
   Kernblock statt Schieberegler: kein JavaScript, alle Bilder
   gleichzeitig sichtbar, mit der Tastatur bedienbar.
   -------------------------------------------------------------------- */
.suk-galerie.wp-block-gallery {
	gap: var(--wp--preset--spacing--30);
}

.suk-galerie.wp-block-gallery .wp-block-image img {
	border-radius: var(--wp--custom--border-radius--klein);
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
}

/* --- Sortimentskarten -------------------------------------------------
   Feste Bildhoehe, sonst stehen die Ueberschriften bei drei
   verschiedenen Seitenverhaeltnissen auf drei Hoehen.
   -------------------------------------------------------------------- */
.suk-karte {
	background: var(--wp--preset--color--weiss);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--border-radius--karte);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0 0 var(--wp--preset--spacing--40);
}

.suk-karte > .wp-block-image {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.suk-karte > .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

.suk-karte > :not(.wp-block-image, .wp-block-post-featured-image) {
	padding-inline: var(--wp--preset--spacing--40);
	max-width: none;
}

.suk-karte h3 {
	margin-bottom: 0.35rem;
}

.suk-karte__link {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
	font-weight: 600;
}

.suk-karte__link a::after {
	content: " →";
}

/* --- Aktuelles ---------------------------------------------------------
   Die Beitraege stehen als Karten wie die Sortimentskacheln der
   Startseite.

   Die ganze Karte ist anklickbar, enthaelt aber nur EINEN Link: den
   Titel. Seine Flaeche wird per ::after ueber die Karte gezogen. Bild,
   Titel und "Weiterlesen" je einzeln verlinkt hiesse dreimal dasselbe
   Ziel fuer jeden, der mit Tastatur oder Vorleseprogramm unterwegs ist.
   -------------------------------------------------------------------- */
.suk-aktuell__liste.wp-block-post-template {
	gap: var(--wp--preset--spacing--50);
}

.suk-karte--aktuell {
	position: relative;
	height: 100%;
}

.suk-karte > .wp-block-post-featured-image {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.suk-karte > .wp-block-post-featured-image img {
	border-radius: 0;
	display: block;
	width: 100%;
}

/* Ohne Beitragsbild kaeme der Text sonst direkt an die Oberkante, weil
   die Karte oben keinen Innenabstand hat. Den traegt sonst das Bild. */
.suk-karte--aktuell:not(:has(> .wp-block-post-featured-image)) {
	padding-top: var(--wp--preset--spacing--40);
}

.suk-karte__datum {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* Titel in der Groesse der Kartenueberschriften auf der Startseite.
   Es ist trotzdem eine H2: Unter der H1 "Aktuelles" sind die Beitraege
   die naechste Ebene, eine H3 ohne H2 davor waere ein Sprung. */
.suk-karte--aktuell .suk-karte__titel {
	font-size: var(--wp--preset--font-size--lg);
	margin: 0.3rem 0 0.5rem;
}

.suk-karte--aktuell .suk-karte__titel a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.suk-karte--aktuell .suk-karte__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.suk-karte--aktuell:hover .suk-karte__titel a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Der Fokusrahmen gehoert um die Karte, nicht nur um die Titelzeile:
   anklickbar ist ja die ganze Flaeche. */
.suk-karte--aktuell:has(.suk-karte__titel a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 3px;
}

.suk-karte--aktuell .suk-karte__titel a:focus-visible {
	outline: none;
}

.suk-karte--aktuell .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Einzelner Beitrag */
.suk-beitrag__zurueck {
	margin-bottom: var(--wp--preset--spacing--40);
}

.suk-beitrag__zurueck a::before {
	content: "← ";
}

.suk-beitrag__datum {
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.25rem;
}

.suk-beitrag__bild img {
	border-radius: var(--wp--custom--border-radius--karte);
}

/* --- Bildausschnitt steuern -------------------------------------------
   Die Bilder liegen in festen Seitenverhaeltnissen (4:3, 5:4, 1:1) und
   werden mit `object-fit: cover` gefuellt. Standardmaessig zeigt das die
   Mitte — bei Hochformat schneidet das Koepfe an.

   Bis zum 08.09.2026 standen hier feste Werte je Kachel
   (`.suk-karte:nth-child(2) { object-position: 50% 22% }`). Die waren
   auf bestimmte Fotos gerechnet und wurden falsch, sobald die Redaktion
   ein Bild austauscht — was sie 4- bis 6-mal im Jahr tut.

   Stattdessen jetzt Klassen, die im Editor unter
   "Block -> Erweitert -> Zusaetzliche CSS-Klasse" eingetragen werden.
   Der Ausschnitt gehoert damit zum Bild und nicht zur Position in der
   Reihe.
   -------------------------------------------------------------------- */
.wp-block-image.fokus-oben img   { object-position: 50% 0; }
.wp-block-image.fokus-unten img  { object-position: 50% 100%; }
.wp-block-image.fokus-links img  { object-position: 0 50%; }
.wp-block-image.fokus-rechts img { object-position: 100% 50%; }

/* Zwischenstufen fuer Portraits: das Gesicht sitzt meist im oberen
   Drittel, aber nicht ganz oben. */
.wp-block-image.fokus-oben-mitte img  { object-position: 50% 25%; }
.wp-block-image.fokus-unten-mitte img { object-position: 50% 75%; }

.suk-mehr {
	font-weight: 600;
}

/* --- Filialblock ------------------------------------------------------ */
.suk-filiale {
	/* Ohne border-box schlaegt der Innenabstand aussen auf: gemessen
	   1182 px statt 1100, die Karte stand damit 40 px weiter links als
	   alle anderen Abschnitte. */
	box-sizing: border-box;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	background: var(--wp--preset--color--weiss);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--border-radius--karte);
	padding: var(--wp--preset--spacing--50);
	position: relative;
	overflow: hidden;
}

.suk-filiale::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: var(--wp--preset--color--primary);
}

.suk-filiale__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	margin: 0 0 0.5rem;
}

.suk-filiale__zwischentitel {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	margin: 0 0 0.75rem;
}

.suk-filiale__anfahrt {
	color: var(--wp--preset--color--muted);
}

.suk-knopf {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	border-radius: var(--wp--custom--border-radius--pille);
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--weiss);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
}

.suk-knopf:hover {
	background: var(--wp--preset--color--primary-deep);
	color: var(--wp--preset--color--weiss);
}

/* Kurzfassung im Fussbereich: kein Kasten, kein Schema. */
.suk-filiale--kurz {
	display: block;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	overflow: visible;
}

.suk-filiale--kurz::before {
	display: none;
}

/* --- Oeffnungszeiten -------------------------------------------------- */
.suk-zeiten__tabelle {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
}

.suk-zeiten__tabelle th,
.suk-zeiten__tabelle td {
	text-align: left;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--wp--preset--color--sand);
	font-weight: 400;
}

.suk-zeiten__tabelle th {
	color: var(--wp--preset--color--muted);
	width: 6.5rem;
}

.suk-zeiten__tabelle td {
	font-variant-numeric: tabular-nums;
}

.suk-zeiten__tabelle tr:last-child th,
.suk-zeiten__tabelle tr:last-child td {
	border-bottom: 0;
}

.suk-zeiten__status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: var(--wp--custom--border-radius--pille);
	padding: 0.4rem 0.9rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin: 0 0 1rem;
}

.suk-zeiten__status::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

/* Gemessen: 8.34:1 und 7.36:1 */
.suk-zeiten__status.is-offen {
	background: var(--wp--preset--color--gruen-sanft);
	color: #2f4a2a;
}

.suk-zeiten__status.is-zu {
	background: var(--wp--preset--color--orange-sanft);
	color: #7a3a10;
}

/* --- Fussbereich ------------------------------------------------------
   Heller Sandgrund statt dunklem Block: Die Seite laeuft auf Creme, ein
   fast schwarzer Riegel am Ende wirkt wie ein Fremdkoerper. Die orange
   Oberkante stellt den Markenbezug her, ohne dass Orange Text tragen
   muss.
   -------------------------------------------------------------------- */
.suk-fuss {
	border-top: 5px solid var(--wp--preset--color--primary);
}

.suk-fuss__spalten {
	gap: var(--wp--preset--spacing--50);
}

.suk-fuss h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--lg);
	margin: 0 0 0.6rem;
}

.suk-fuss p,
.suk-fuss li {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.7;
}

.suk-fuss__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}

/* Die Zeile unter den Naturata-Links: sagt, was sich hinter dem Namen
   verbirgt, ist aber selbst kein Link und soll nicht wie einer wirken. */
.suk-fuss__zusatz {
	color: var(--wp--preset--color--muted);
}

.suk-fuss__verbund .suk-fuss__liste {
	gap: 0.8rem;
}

.suk-fuss__verbund li {
	line-height: 1.45;
}

/* WCAG 2.5.8: mindestens 24x24 CSS-Pixel fuer alles, was angetippt
   wird. Gilt auch fuer Telefon- und E-Mail-Links im Fussbereich —
   gemessen kamen die auf 21 px. */
.suk-fuss a {
	display: inline-block;
	min-height: 24px;
	padding-block: 0.15rem;
}

.suk-fuss__unten {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--sand);
	color: var(--wp--preset--color--muted);
}

.suk-fuss__unten p {
	margin-bottom: 0;
}

.suk-fuss__marke {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.suk-fuss__signet {
	width: 26px;
	height: 34px;
	flex: none;
	background: url("../bilder/schaukel-orange.svg") no-repeat center / contain;
}

/* --- Feinheiten ------------------------------------------------------ */
h1, h2, h3 {
	text-wrap: balance;
}

:where(a, button, input, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Breite Inhalte scrollen in sich selbst, nie die Seite. */
.wp-block-table,
.wp-block-code {
	overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* --- Handy ------------------------------------------------------------ */
@media (max-width: 781px) {
	/* Zwei statt drei Spalten: bei drei Spalten auf 390 px waere jedes
	   Bild nur rund 110 px breit und zeigte nichts mehr.
	   flex-grow: 0 ist noetig, weil der Kernblock sonst das letzte Bild
	   einer unvollstaendigen Reihe auf die volle Breite streckt —
	   gemessen 342 px neben zwei mal 164 px. */
	.suk-galerie.wp-block-gallery .wp-block-image {
		width: calc(50% - var(--wp--preset--spacing--30) / 2) !important;
		flex-grow: 0 !important;
	}

	/* Aller Text linksbuendig. Zentrierte Zeilen fransen auf schmalem
	   Schirm aus. */
	.suk-abschnitt,
	.suk-band,
	.suk-duo,
	.suk-fuss {
		text-align: left;
	}

	/* Gestapelte Spalten brauchen weniger Luft als nebeneinander
	   stehende — sonst reisst der Abstand die Seite auseinander. */
	.suk-duo {
		gap: var(--wp--preset--spacing--40);
	}

	.suk-duo > .wp-block-column > :is(p, ul, ol) {
		max-width: none;
	}

	/* --- Fussbereich -------------------------------------------------
	   Untereinander gestapelt wurde der Fussbereich sehr lang. Die
	   beiden Filialen stehen deshalb nebeneinander; ihre Zeilen sind
	   kurz genug dafuer. Die Seitenliste bekommt darunter die volle
	   Breite und laeuft zweispaltig.
	   ---------------------------------------------------------------- */
	.suk-fuss__spalten {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--40);
	}

	.suk-fuss__spalten > .wp-block-column {
		flex-basis: auto !important;
	}

	/* Seitenliste und Naturata-Links laufen je ueber die volle Breite,
	   ihre Listen darin zweispaltig. In halber Breite waeren die zwei
	   Naturata-Namen samt Zusatzzeile zu eng umgebrochen. */
	.suk-fuss__seiten,
	.suk-fuss__verbund {
		grid-column: 1 / -1;
		padding-top: var(--wp--preset--spacing--30);
		border-top: 1px solid var(--wp--preset--color--sand);
	}

	/* Enger setzen. Gestapelt wurde der Fussbereich sonst laenger als
	   ein ganzer Bildschirm, nur fuer zwei Adressen. */
	.suk-fuss p,
	.suk-fuss li {
		line-height: 1.5;
	}

	.suk-fuss p {
		margin-bottom: 0.6rem;
	}

	.suk-fuss h2 {
		font-size: var(--wp--preset--font-size--md);
		margin-bottom: 0.4rem;
	}

	/* 6rem Abstand ueber dem Fussbereich sind auf dem Handy eine leere
	   halbe Bildschirmhoehe. */
	.suk-fuss {
		margin-top: var(--wp--preset--spacing--60) !important;
		padding-top: var(--wp--preset--spacing--50);
	}

	/* --- Abstand zwischen Kopfbereich und Inhalt ----------------------
	   Gemessen lagen 64 px zwischen Kopfunterkante und Ueberschrift,
	   plus 24 px Innenabstand im Kopf selbst — zusammen 88 px leere
	   Flaeche, bevor die Seite anfaengt. Auf 390 px ist das ein Zehntel
	   der Bildschirmhoehe.

	   Das !important ist noetig, weil die Vorlage den oberen
	   Innenabstand als Inline-Stil am main-Element setzt.
	   ---------------------------------------------------------------- */
	.suk-kopf {
		padding-top: var(--wp--preset--spacing--30) !important;
		padding-bottom: var(--wp--preset--spacing--30) !important;
	}

	main.wp-block-group {
		padding-top: var(--wp--preset--spacing--30) !important;
	}

	/* Auch die Abstaende zwischen den Abschnitten enger: 4rem wirken
	   auf 390 px doppelt so gross wie auf dem Schreibtisch. */
	.wp-block-spacer {
		height: var(--wp--preset--spacing--50) !important;
	}

	/* Knoepfe auf volle Breite. Zwei unterschiedlich breite Pillen
	   untereinander wirken wie ein Versehen; volle Breite ist zugleich
	   das groessere Tippziel. */
	.wp-block-buttons {
		gap: var(--wp--preset--spacing--30);
	}

	.wp-block-buttons > .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons > .wp-block-button .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}

	.suk-fuss__liste {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--wp--preset--spacing--40);
	}

	.suk-fuss__unten {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--30);
	}

	/* Drei Logos je Reihe statt sechs. Bei sechs waeren sie auf 390 px
	   nur rund 45 px breit und damit unlesbar.

	   minmax(0, 1fr), nicht 1fr: Das schlichte 1fr heisst
	   minmax(auto, 1fr), und dieses auto ist die Mindestbreite des
	   Inhalts. In den Kacheln stehen Namen wie "Koelner Lernspiel
	   Verlag", die nicht umbrechen; die Spalte kann deshalb nicht
	   schmaler werden als das laengste Wort, und das Raster wird
	   breiter als der Bildschirm. Genau das war am 24.09.2026 der
	   Grund, warum sich /spielwaren/ unter 400 px quer schieben
	   liess. */
	.suk-logowand {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.suk-logo-kachel {
		padding: var(--wp--preset--spacing--20);
	}

	.suk-logo-kachel img {
		height: 34px;
	}

	.suk-logo-kachel figcaption {
		font-size: 0.6875rem;
		overflow-wrap: anywhere;
		hyphens: auto;
	}
}

/* Unter 400 px nur noch zwei Logos je Reihe. Drei waeren dann je
   rund 90 px breit, und darunter leidet vor allem die Beschriftung. */
@media (max-width: 400px) {
	.suk-logowand {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* Sehr schmale Geraete: die beiden Filialen doch untereinander.
   Die Grenze ist gemessen, nicht geschaetzt: bei 390 px stehen je
   Spalte 159 px zur Verfuegung, die laengste Zeile
   ("info@spielundkleid.de") braucht 152 px. Darunter wird es eng. */
@media (max-width: 340px) {
	.suk-fuss__spalten {
		grid-template-columns: 1fr;
	}

	.suk-fuss__liste {
		grid-template-columns: 1fr;
	}
}

/* --- Nur fuer Vorleseprogramme ----------------------------------------
   Traegt den Zusatz "(oeffnet in neuem Tab)" an externen Links, siehe
   inc/externe-links.php. Der Kern bringt dieselbe Klasse mit, aber nur
   zusammen mit bestimmten Bloecken. Hier steht sie eigenstaendig, damit
   der Hinweis auch dann unsichtbar bleibt, wenn auf einer Seite kein
   einziger Kernblock mit dieser Regel vorkommt.

   clip-path statt display:none: Was versteckt ist, liest kein
   Vorleseprogramm vor. Der Text muss also da sein, nur ohne Flaeche.
   -------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}