/*
Theme Name: Squadeno
Theme URI: https://squadeno.com/squadeno-theme/
Author: Thomas Schiffler
Author URI: https://squadeno.com/
Description: A fast, accessible classic theme for sports clubs. Works on its own, and pairs with the free Club Sports Manager plugin.
Version: 1.3.4
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: squadeno
Domain Path: /languages
Tags: blog, news, one-column, two-columns, right-sidebar, block-patterns, block-styles, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, wide-blocks
*/

/* --------------------------------------------------------------------------
 * Inhalt
 *   1. Design-Tokens
 *   2. Reset und Grundlagen
 *   3. Typografie
 *   4. Layout
 *   5. Kopfbereich und Navigation
 *   5b. Hero und Slider
 *   6. Karten (Container-Queries)
 *   7. Inhalte, Kommentare, Formulare
 *   8. Fußbereich
 *   9. Pflichtklassen von WordPress
 *
 * Genau eine Datei, kein @import: das Performance-Budget aus D9 erlaubt
 * insgesamt sechs HTTP-Requests und null Fremd-Requests.
 * ----------------------------------------------------------------------- */

/* 1. Design-Tokens ------------------------------------------------------- */

:root {
	/*
	 * Nur Hell-Modus in v1 (D5). Zusammen mit <meta name="color-scheme">
	 * unterdrückt das den „Force Dark“-Modus von Browser und Betriebssystem
	 * zuverlässig — sonst entsteht der bekannte Schwarz-auf-Schwarz-Fehler.
	 */
	color-scheme: light;

	/* Farben. Vom Customizer überschrieben (AP5, Single Source of Truth). */
	--squadeno-brand: #12513f;
	--squadeno-brand-dark: #0c3a2d;
	--squadeno-accent: #f2b705;
	--squadeno-ink: #1c1c1e;
	--squadeno-button-text: #0c3a2d;

	/*
	 * Die abgeleiteten Töne sind neutral, nicht grün eingefärbt (D27). Vorher
	 * hatten Hintergrund, Linien und Sekundärtext alle einen Grünstich — auf
	 * einer Seite, deren Text ohnehin grün war, ergab das eine einzige Fläche
	 * ohne Halt. Neutral gehalten tragen sie außerdem jede Vereinsfarbe, nicht
	 * nur unsere.
	 */
	--squadeno-muted: #5d5a5c;
	--squadeno-surface: #fff;
	--squadeno-bg: #f7f7f6;
	--squadeno-line: #e6e5e4;

	/* Schrift: reiner Systemstapel, damit null Fremd-Requests entstehen. */
	--squadeno-font: system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
	--squadeno-font-mono: ui-monospace, sfmono-regular, menlo, consolas, monospace;

	/*
	 * Fluid Type. Durchgehend clamp(), keine festen px-Größen und keine
	 * Breakpoint-Kaskade — die Größen wachsen stufenlos mit dem Viewport.
	 */
	--squadeno-text-sm: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
	--squadeno-text-base: clamp(1rem, 0.98rem + 0.1vw, 1.05rem);
	--squadeno-text-lg: clamp(1.05rem, 1rem + 0.25vw, 1.15rem);
	--squadeno-text-xl: clamp(1.35rem, 1.15rem + 0.9vw, 1.9rem);
	--squadeno-text-2xl: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);

	/* Abstände, ebenfalls fluid. */
	--squadeno-space-xs: clamp(0.4rem, 0.35rem + 0.25vw, 0.6rem);
	--squadeno-space-sm: clamp(0.75rem, 0.6rem + 0.6vw, 1rem);
	--squadeno-space-md: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
	--squadeno-space-lg: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
	--squadeno-space-xl: clamp(3rem, 2rem + 4vw, 5.5rem);

	/*
	 * Transparente Abstufungen der dunklen Markenfarbe. An einer Stelle
	 * abgeleitet statt an fünf als Hex-Literal wiederholt — sonst bleiben
	 * Verlauf, Schatten und Slider-Pfeile grün, wenn im Customizer eine andere
	 * Markenfarbe eingestellt wird.
	 */
	--squadeno-shade-6: color-mix(in srgb, var(--squadeno-brand-dark) 6%, transparent);
	--squadeno-shade-8: color-mix(in srgb, var(--squadeno-brand-dark) 8%, transparent);
	--squadeno-shade-22: color-mix(in srgb, var(--squadeno-brand-dark) 22%, transparent);
	--squadeno-shade-32: color-mix(in srgb, var(--squadeno-brand-dark) 32%, transparent);
	--squadeno-shade-40: color-mix(in srgb, var(--squadeno-brand-dark) 40%, transparent);
	--squadeno-shade-65: color-mix(in srgb, var(--squadeno-brand-dark) 65%, transparent);

	/*
	 * Die beiden Verläufe des Kopfbereichs. Hier stehen die Voreinstellungen;
	 * `inc/hero-gradient.php` überschreibt dieselben Variablen im <head>, sobald
	 * im Customizer etwas eingestellt ist (D22). Ohne Einstellung folgen sie
	 * weiter den Markenfarben.
	 */

	/*
	 * Höhe des Kopfbereichs. Voreinstellung „mittel“; `inc/hero-gradient.php`
	 * überschreibt sie im <head>, sobald im Customizer etwas gewählt ist (D31).
	 */
	--squadeno-hero-height: clamp(15rem, 30vw, 26rem);
	--squadeno-hero-gradient: linear-gradient(135deg, var(--squadeno-brand-dark), var(--squadeno-brand));
	--squadeno-hero-veil: linear-gradient(to top, color-mix(in srgb, var(--squadeno-brand-dark) 78%, transparent), color-mix(in srgb, var(--squadeno-brand-dark) 10%, transparent));

	/* Maße */
	--squadeno-content: 44rem;

	/*
	 * 72rem abzüglich des Innenabstands der Hülle ergeben 1088px nutzbare
	 * Breite — dieselbe Größenordnung wie die Vorlage (1120px). Mit den
	 * vorherigen 68rem blieben nur 1024px, und in die passte die Kopfzeile aus
	 * Logo, fünf Menüpunkten und Lupe nicht (D28).
	 */
	--squadeno-wide: 72rem;

	/* Breite der Porträtspalte auf Personen- und Ortsseiten (D38). */
	--squadeno-portrait: 15rem;
	--squadeno-radius: 0.875rem;
	--squadeno-tap: 2.75rem; /* 44px — Mindestgröße für Touch-Ziele. */

	/*
	 * Abstand der Slider-Bedienelemente zur Bildkante. Wächst mit dem Viewport:
	 * auf dem Handy darf der Pfeil dicht am Rand kleben, auf dem Desktop sähe
	 * das gedrängt aus.
	 */
	--squadeno-slider-inset: clamp(0.5rem, 2vw, 1.25rem);

	/*
	 * Zwei Stufen: die ruhende Karte liegt flach auf, die überfahrene schwebt.
	 * Der große Radius mit negativer Ausbreitung ist der Unterschied zwischen
	 * „hat einen Schatten“ und „sieht aus wie gedruckt“ — vorher war die zweite
	 * Stufe mit 6 % so schwach, dass sie niemand gesehen hat.
	 */
	--squadeno-shadow: 0 1px 2px var(--squadeno-shade-6), 0 8px 24px -12px var(--squadeno-shade-22);
	--squadeno-shadow-lifted: 0 2px 4px var(--squadeno-shade-8), 0 16px 34px -14px var(--squadeno-shade-32);

	/* Das Band am Fuß der Startseite. Flach wirkte es wie ein Fehler. */
	--squadeno-cta-gradient: linear-gradient(135deg, var(--squadeno-brand), var(--squadeno-brand-dark));
}

/* 2. Reset und Grundlagen ------------------------------------------------ */

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

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	background-color: var(--squadeno-bg);
	color: var(--squadeno-ink);
	font-family: var(--squadeno-font);
	font-size: var(--squadeno-text-base);
	line-height: 1.65;
	min-height: 100vh;

	/*
	 * Ohne diese Regel sprengt ein einziges langes Wort das Layout — die
	 * offiziellen Theme Unit Test Data enthalten dafür eigens einen Beitrag
	 * („antidisestablishmentarianism“), und genau daran fällt es sonst erst
	 * beim Review auf.
	 */
	overflow-wrap: break-word;
}

/* Überschriften und Tabellenzellen brauchen es einzeln. */
h1,
h2,
h3,
h4,
h5,
h6,
th,
td,
dt,
dd,
li,
figcaption {
	overflow-wrap: break-word;
}

img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	height: auto;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

/* Fokus muss sichtbar sein — Tastaturbedienung ist keine Option. */
:focus-visible {
	outline: 3px solid var(--squadeno-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	/*
	 * Die Dauer auf null zu setzen reicht hier nicht: die Karte würde beim
	 * Überfahren springen statt zu gleiten, und Springen ist nicht weniger
	 * Bewegung. Der Schatten bleibt — er bewegt nichts.
	 */
	.squadeno-card:hover,
	.squadeno-card:focus-within {
		transform: none !important;
	}

	.squadeno-card:hover .squadeno-card__media img {
		transform: none !important;
	}
}

/* 3. Typografie ---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	/*
	 * Ink, nicht die Marke. Die Markenfarbe hebt nur hervor, solange sie die
	 * Ausnahme ist — war jede Überschrift grün, stach nichts mehr heraus (D27).
	 */
	color: var(--squadeno-ink);
	font-weight: 700;
	line-height: 1.2;
	margin-block-end: var(--squadeno-space-sm);
	text-wrap: balance;
}

h1 {
	font-size: var(--squadeno-text-2xl);
}

h2 {
	font-size: var(--squadeno-text-xl);
}

h3 {
	font-size: var(--squadeno-text-lg);
}

h4,
h5,
h6 {
	font-size: var(--squadeno-text-base);
}

p,
ul,
ol,
dl,
table,
figure,
blockquote,
pre {
	margin-block-end: var(--squadeno-space-sm);
}

a {
	color: var(--squadeno-brand);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover,
a:focus {
	color: var(--squadeno-brand-dark);
}

blockquote {
	border-inline-start: 4px solid var(--squadeno-accent);
	padding-inline-start: var(--squadeno-space-sm);
}

code,
kbd,
pre {
	font-family: var(--squadeno-font-mono);
	font-size: 0.9em;
}

/* Pre-Blöcke scrollen lieber, als umzubrechen — Code soll lesbar bleiben. */
pre {
	background-color: var(--squadeno-surface);
	border-radius: var(--squadeno-radius);
	overflow-wrap: normal;
	overflow-x: auto;
	padding: var(--squadeno-space-sm);
}

address {
	font-style: normal;
}

hr {
	border: 0;
	border-block-start: 1px solid var(--squadeno-line);
	margin-block: var(--squadeno-space-lg);
}

table {
	border-collapse: collapse;
	width: 100%;
}

th,
td {
	border-block-end: 1px solid var(--squadeno-line);
	padding: var(--squadeno-space-xs) var(--squadeno-space-sm);
	text-align: start;
}

/* 4. Layout -------------------------------------------------------------- */

.squadeno-shell {
	margin-inline: auto;
	max-width: var(--squadeno-wide);
	padding-inline: var(--squadeno-space-md);
	width: 100%;
}

.squadeno-main {
	padding-block: var(--squadeno-space-lg);
}

.squadeno-layout {
	display: grid;
	gap: var(--squadeno-space-lg);
	grid-template-columns: 1fr;
}

@media (width >= 60rem) {

	.squadeno-layout--with-sidebar {
		grid-template-columns: minmax(0, 1fr) 18rem;
	}
}

/*
 * Der Beitrag nimmt die volle Spalte; die Lesebreite gilt nur für Prosa
 * (Regel weiter unten). Vorher klemmte diese Zeile alles auf 44rem — auch die
 * Ausgabe von Shortcodes, weshalb ein Kalender in einer Spalte steckte, die
 * für Fließtext gedacht ist (D28).
 */
.squadeno-entry {
	margin-inline: auto;
	max-width: var(--squadeno-wide);
}

.squadeno-grid {
	display: grid;
	gap: var(--squadeno-space-md);

	/*
	 * 13,75rem = 220px. Vier Kacheln plus drei Lücken passen damit in die
	 * Inhaltsbreite; mit den vorherigen 17rem waren es nur drei, und die
	 * wurden so breit, dass zwei Wörter Text darin verloren aussahen.
	 */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.75rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 5. Kopfbereich und Navigation ------------------------------------------ */

.squadeno-header {
	background-color: var(--squadeno-surface);
	border-block-end: 1px solid var(--squadeno-line);
}

/*
 * Wählbar im Customizer, Voreinstellung an (D26). Der z-index liegt über den
 * Slider-Bedienelementen, damit die Kopfleiste nicht hinter dem Hero
 * durchscrollt.
 */
.squadeno-header--sticky {
	inset-block-start: 0;
	position: sticky;
	z-index: 100;
}

/* Suche in der Kopfleiste --------------------------------------------- */

/*
 * Kein Bezugsrahmen: das Feld richtet sich an der Kopfzeile aus, nicht am
 * 44 px breiten Schalter. Mit `position: relative` hier wuchs es von dessen
 * rechter Kante nach links über den Fensterrand hinaus (D40).
 */
.squadeno-header__search {
	flex: 0 0 auto;
}

.squadeno-search-toggle {
	background-color: transparent;
	border: 1px solid var(--squadeno-line);
	border-radius: 50%;
	color: var(--squadeno-brand-dark);
	display: grid;
	min-block-size: var(--squadeno-tap);
	min-inline-size: var(--squadeno-tap);
	padding: 0;
	place-items: center;
}

.squadeno-search-toggle:hover {
	background-color: color-mix(in srgb, var(--squadeno-brand) 12%, var(--squadeno-surface));
	color: var(--squadeno-brand-dark);
}

.squadeno-search-toggle[aria-expanded="true"] {
	background-color: var(--squadeno-brand);
	border-color: var(--squadeno-brand);
	color: var(--squadeno-surface);
}

/*
 * Über dem Inhalt statt im Fluss: läge das Feld in der Leiste, spränge beim
 * Aufklappen die ganze Seite nach unten — genau der Layout-Sprung, den das
 * CLS-Budget verbietet (D9).
 */
.squadeno-search-panel {
	background-color: var(--squadeno-surface);
	border: 1px solid var(--squadeno-line);
	border-radius: var(--squadeno-radius);
	box-shadow: var(--squadeno-shadow);
	inset-block-start: calc(100% + 0.5rem);

	/*
	 * Bündig mit der Lupe: der Innenabstand der Kopfzeile gehört zu ihr, mit
	 * `0` endete das Feld 32 px weiter rechts als alles darüber (D40).
	 */
	inset-inline-end: var(--squadeno-space-md);
	padding: var(--squadeno-space-xs);
	position: absolute;
	width: min(90vw, 22rem);
	z-index: 120;
}

.squadeno-search-panel[hidden] {
	display: none;
}

.squadeno-search-panel input[type="search"] {
	min-inline-size: 0;
	width: 100%;
}

/*
 * Bezugsrahmen des aufgeklappten Suchfelds — siehe .squadeno-header__search.
 *
 * Umbrechen darf sie nur auf schmalen Viewports — dort klappt das Menü in den
 * Fluss auf und braucht eine eigene Zeile. Ab 48rem ist sie einzeilig, weil
 * Flexbox sonst umbricht, **bevor** es ein Element verkleinert, und die
 * Menüleiste als Ganzes in eine zweite Zeile schöbe (D40, D42).
 */
.squadeno-header__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--squadeno-space-sm);
	justify-content: space-between;
	padding-block: var(--squadeno-space-sm);
	position: relative;
}

/*
 * `flex: 1 1 0` statt der Voreinstellung `0 1 auto`, dazu `min-inline-size: 0`.
 *
 * Beides zusammen nimmt den Namen aus der Umbruch-Rechnung: Flexbox bricht um,
 * bevor es ein Element verkleinert, aber nur, wenn die **hypothetischen**
 * Größen der Zeile zu breit sind — mit Basis 0 ist der Name unbeteiligt.
 * Schalter und Lupe behalten so ihren Platz in der ersten Zeile, der Name füllt
 * den Rest und bricht bei Bedarf in sich um. Mit Basis `auto` verdrängte ein
 * langer Name die Lupe in eine eigene Zeile (D40); mit `nowrap` auf allen
 * Breiten wurde er vom aufgeklappten Menü zerquetscht (D42).
 */
.squadeno-branding {
	align-items: center;
	display: flex;
	flex: 1 1 0;
	gap: var(--squadeno-space-xs);
	min-inline-size: 0;
}

.squadeno-branding__title {
	color: var(--squadeno-ink);
	overflow-wrap: anywhere;

	/* Fester Wert statt Token: der Vereinsname ist der Anker der Kopfleiste
	   und soll nicht mit dem Fließtext mitwachsen. */
	font-size: 1.25rem;
	letter-spacing: -0.01em;
	font-weight: 700;
	margin: 0;
}

.squadeno-branding__title a {
	color: inherit;
	text-decoration: none;
}

.squadeno-branding__description {
	color: var(--squadeno-muted);
	font-size: var(--squadeno-text-sm);
	margin: 0;
}

.custom-logo {
	max-height: 3.5rem;
	width: auto;
}

.squadeno-nav-toggle {
	align-items: center;
	background-color: transparent;

	/* Nachgeben soll der Vereinsname, nicht der Schalter: bei 320 px saß der
	   Rahmen sonst auf der Beschriftung. */
	flex: 0 0 auto;
	border: 1px solid var(--squadeno-line);
	border-radius: var(--squadeno-radius);
	color: var(--squadeno-brand-dark);
	cursor: pointer;
	display: inline-flex;
	gap: var(--squadeno-space-xs);
	min-block-size: var(--squadeno-tap);
	min-inline-size: var(--squadeno-tap);
	justify-content: center;
	padding-inline: var(--squadeno-space-sm);
}

@media (width >= 48rem) {

	.squadeno-nav-toggle {
		display: none;
	}

	/*
	 * Navigation nach rechts. `justify-content: space-between` verteilt drei
	 * Elemente gleichmäßig und setzt die Navigation damit genau in die Mitte
	 * zwischen Vereinsname und Lupe. Der automatische Startabstand schiebt sie
	 * und alles danach an den rechten Rand — ohne die Verteilung anzufassen,
	 * die auf schmalen Viewports gebraucht wird (D33).
	 *
	 * Umbrechen darf dabei die Liste, nicht die Navigation: mit
	 * `min-inline-size: 0` schrumpft das Element unter die Breite seines
	 * Inhalts, die Punkte darin brechen um, und die Lupe bleibt daneben (D40).
	 */
	.squadeno-nav {
		flex: 0 1 auto;
		margin-inline-start: auto;
		min-inline-size: 0;
	}

	.squadeno-header__inner {
		flex-wrap: nowrap;
	}

	/* Den Platzmangel trägt das Menü, nicht der Name: es kann seine Punkte
	   umbrechen, er ist der Anker der Kopfleiste (D40). */
	.squadeno-branding {
		flex: 0 0 auto;
	}
}

.squadeno-nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--squadeno-space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Menüpunkte sind Pillen: schwarzer Text im Ruhezustand, beim Überfahren eine
 * blasse Fläche in der Markenfarbe. Vorher stand hier ein gelber Unterstrich
 * unter einem grünen Wort — beides zog Aufmerksamkeit, ohne etwas zu sagen.
 */
.squadeno-nav__list a {
	align-items: center;
	border-radius: 999px;
	color: var(--squadeno-ink);
	display: flex;
	font-weight: 600;
	min-block-size: var(--squadeno-tap);
	padding-inline: 0.85em;
	text-decoration: none;
}

.squadeno-nav__list a:hover,
.squadeno-nav__list a:focus-visible,
.squadeno-nav__list .current-menu-item > a {
	background-color: color-mix(in srgb, var(--squadeno-brand) 14%, transparent);
	color: var(--squadeno-brand-dark);
}

/*
 * Eingeklappt ist der Ausgangszustand; das Attribut liefert bereits das Markup
 * (header.php). Das ist keine Kosmetik: solange es allein das Skript setzte,
 * malte der Browser die Kopfleiste erst zweizeilig und klappte sie danach
 * zusammen — ein CLS von 0,3713 gegen ein Budget von 0,02.
 */
.squadeno-nav[data-collapsed="true"] .squadeno-nav__list {
	display: none;
}

/*
 * Auf dem Telefon klappt das Menü **unter** der Kopfleiste auf, nicht in ihr.
 *
 * Als gewöhnliches Flex-Kind verformte die Navigation die Kopfzeile beim
 * Aufklappen: Vereinsname, Schalter, Menüliste und Lupe standen als vier
 * Spalten nebeneinander, und vom Namen blieb eine Buchstabensäule übrig.
 * Absolut positioniert beansprucht sie keinen Platz in der Zeile mehr — Name,
 * Schalter und Lupe stehen unverändert, ob das Menü offen ist oder nicht. Damit
 * bewegt sich beim Öffnen auch nichts unterhalb der Kopfzeile (D42, wie D9).
 *
 * Bezugsrahmen ist `.squadeno-header__inner`; dieselbe Ebene benutzt das
 * Suchfeld, das eine Stufe darüber liegt (120), damit es das Menü überlagert
 * und nicht umgekehrt.
 */
@media (width < 48rem) {

	.squadeno-nav {
		background-color: var(--squadeno-surface);
		border-block-start: 1px solid var(--squadeno-line);
		box-shadow: var(--squadeno-shadow);
		inset-block-start: 100%;
		inset-inline: 0;
		max-block-size: 70vh;
		overflow-y: auto;
		padding-block: var(--squadeno-space-sm);
		padding-inline: var(--squadeno-space-md);
		position: absolute;
		z-index: 110;
	}

	/* Sonst bliebe ein leerer Streifen mit Rand und Schatten stehen. */
	.squadeno-nav[data-collapsed="true"] {
		display: none;
	}

	/*
	 * Die Ebene wird sichtbar, nicht nur eingerückt: eine Linie in der
	 * Markenfarbe an der Innenkante. Eine Einrückung allein liest sich bei
	 * mehreren offenen Zweigen wie eine Aufzählung mit ungleichen Abständen.
	 */
	.squadeno-nav .sub-menu {
		border-inline-start: 2px solid color-mix(in srgb, var(--squadeno-brand) 25%, transparent);
		margin-inline-start: 0.35rem;
	}
}

/*
 * Ohne JavaScript gibt es nichts, was das Menü wieder aufklappt — dort bleibt
 * es sichtbar (Progressive Enhancement). `scripting: none` ist genau dafür
 * gemacht und kostet, anders als ein Inline-Skript im <head>, keinen Verstoß
 * gegen die eigene Regel, kein Inline-JS auszuliefern.
 *
 * Muss vor dem 48rem-Block stehen: dort wird dieselbe Auswahl mit gleicher
 * Spezifität wieder auf `flex` gesetzt, und bei Gleichstand gewinnt die
 * spätere Regel.
 */
@media (scripting: none) {

	.squadeno-nav[data-collapsed="true"] .squadeno-nav__list {
		display: block;
	}

	/*
	 * Ohne Schalter ist der Fokus der einzige Weg, ein Untermenü per Tastatur
	 * zu öffnen. Mit Schalter wäre dieselbe Regel schädlich — siehe den
	 * Desktop-Block.
	 */
	.squadeno-nav li:focus-within > .sub-menu {
		display: block;
	}

	/*
	 * Zurück in den Fluss: das Panel liegt über dem Inhalt und wird von
	 * `navigation.js` geschlossen. Ohne das Skript gibt es nichts, was es
	 * wieder zuklappt — es verdeckte dann dauerhaft den Anfang der Seite.
	 */
	.squadeno-nav,
	.squadeno-nav[data-collapsed="true"] {
		box-shadow: none;
		display: block;
		max-block-size: none;
		overflow-y: visible;
		position: static;
	}

	/*
	 * Dasselbe Argument eine Ebene tiefer: den Pfeil-Schalter erzeugt
	 * `navigation.js`. Ohne das Skript gibt es nichts, was ein zugeklapptes
	 * Untermenü öffnen könnte — seine Einträge wären unerreichbar.
	 */
	.squadeno-nav .sub-menu {
		display: block;
	}
}

@media (width >= 48rem) {
	/*
	 * Der Abstand zwischen Menüpunkten steckt im Innenabstand der Pille, nicht
	 * zusätzlich in der Lücke. Beides zusammen — 16px Lücke plus 16px Padding —
	 * machte das Menü 65px breiter als nötig und schob es auf einer Seite mit
	 * Logo in die zweite Zeile (D28).
	 */
	.squadeno-nav__list,
	.squadeno-nav[data-collapsed="true"] .squadeno-nav__list {
		align-items: center;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.25rem;
		justify-content: flex-end;
	}

	/*
	 * Ein volles Menü bricht um, statt aus dem Fenster zu laufen (D40).
	 * `nowrap` wandert dabei vom Kasten auf den Punkt: einer über zwei Zeilen
	 * liest sich wie zwei, und seine Pille wäre ein Kreis. `flex-end` hält die
	 * umgebrochene Zeile rechts, wo die Navigation steht (D33).
	 */
	.squadeno-nav__list > li > a {
		white-space: nowrap;
	}
}

/*
 * Menüpunkt und Aufklapp-Schalter stehen nebeneinander. Ohne diese Regel nicht
 * selbstverständlich: `.squadeno-nav__list a` ist `display: flex` und damit
 * blockartig — der Schalter landete in einer zweiten Zeile unter dem Punkt.
 */
.squadeno-nav .menu-item-has-children {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}

/*
 * Auf schmalen Viewports steht das Untermenü im Fluss und wäre sonst ein
 * dritter Nachbar neben Link und Schalter. Auf breiten liegt es absolut und
 * die Angabe läuft ins Leere.
 */
.squadeno-nav .menu-item-has-children > .sub-menu {
	flex-basis: 100%;
}

/*
 * Im Fluss ist der Elternpunkt ein Grid, kein umbrechender Flex-Container:
 * `max-content` antwortet bei `flex-wrap: wrap` mit der **Summe** der Kinder —
 * über zehn Ebenen ein 740 px breiter Kasten für 150 px Inhalt. Ein Grid nimmt
 * je Spalte das Maximum, die Breite ist damit die tiefste Einrückung plus ihr
 * Text (D42). In der Kaskade ist das nicht mehr nötig (D45).
 */
.squadeno-nav .sub-menu .menu-item-has-children {
	display: grid;
	grid-template-columns: 1fr auto;
}

.squadeno-nav .sub-menu .menu-item-has-children > .sub-menu {
	grid-column: 1 / -1;
}

/*
 * Der Schalter wird von navigation.js erzeugt und taucht in keinem Template
 * auf. Ohne eigene Regel erbt er die generische `button`-Vorlage und erscheint
 * als gefüllte Schaltfläche in der Markenfarbe. Er soll ein Pfeil sein, mehr
 * nicht — aber ein Pfeil, den man mit dem Daumen trifft (44px, D10).
 */

/*
 * Die Pille sitzt auf dem Listeneintrag, nicht auf dem Link: nur so umfasst sie
 * auch den Pfeil (D30). Nur auf breiten Viewports und nur auf der **obersten**
 * Ebene — überall sonst steht das Untermenü im Fluss desselben `li`, und die
 * Fläche umfasste es mit: eine geschachtelte Ellipse, mit jeder Ebene dunkler,
 * weil `:hover` auf allen Vorfahren gleichzeitig greift (D42).
 */
@media (width >= 48rem) {

	.squadeno-nav__list > li.menu-item-has-children {
		border-radius: 999px;
	}

	.squadeno-nav__list > li.menu-item-has-children:hover,
	.squadeno-nav__list > li.menu-item-has-children:focus-within,
	.squadeno-nav__list > li.menu-item-has-children.current-menu-item,
	.squadeno-nav__list > li.menu-item-has-children.current-menu-ancestor {
		background-color: color-mix(in srgb, var(--squadeno-brand) 14%, transparent);
		color: var(--squadeno-brand-dark);
	}

	/* Sonst läge die Fläche doppelt übereinander und wirkte dunkler. */
	.squadeno-nav__list > li.menu-item-has-children > a:hover,
	.squadeno-nav__list > li.menu-item-has-children > a:focus-visible,
	.squadeno-nav__list > li.menu-item-has-children.current-menu-item > a {
		background-color: transparent;
	}

	/* Der Link rückt an den Pfeil heran, beide bilden eine Einheit. */
	.squadeno-nav__list > li.menu-item-has-children > a {
		padding-inline-end: 0.2rem;
	}
}

/*
 * 44px sind Pflicht für den Daumen (D10) — für die Maus nicht. Zwei Schalter
 * à 44px machten das Menü so breit, dass es auf einer Seite mit Logo in die
 * zweite Zeile rutschte. Auf feinen Zeigern reicht die Breite des Pfeils; bei
 * `pointer: coarse` kommt die volle Größe zurück (D28).
 */
.squadeno-nav__submenu-toggle {
	align-items: center;
	background-color: transparent;
	color: inherit;
	display: inline-flex;
	justify-content: center;
	line-height: 1;
	min-block-size: 1.6rem;
	min-inline-size: 1.6rem;
	padding-inline: 0 0.6rem;
}

/*
 * Gezeichnetes Dreieck statt ▾: das Schriftzeichen fehlt in vielen
 * Schriftstapeln und ist dort, wo es existiert, kaum zu erkennen. Sechs Pixel
 * Rand sind auf jedem Gerät gleich groß und gleich scharf.
 */
.squadeno-nav__caret {
	block-size: 0;
	border-block-start: 5px solid currentcolor;
	border-inline: 4px solid transparent;
	display: block;
	inline-size: 0;
	transition: transform 0.15s;
}

@media (pointer: coarse) {

	.squadeno-nav__submenu-toggle {
		min-block-size: var(--squadeno-tap);
		min-inline-size: var(--squadeno-tap);
	}
}

.squadeno-nav__submenu-toggle:hover {
	background-color: transparent;
	color: var(--squadeno-brand);
}

/* Der Pfeil zeigt, wohin es geht: nach unten zu, nach oben auf. */
.squadeno-nav__submenu-toggle[aria-expanded="true"] .squadeno-nav__caret {
	transform: rotate(180deg);
}

/*
 * Zugeklappt auf **jeder** Breite. Vorher stand `display: none` nur im
 * Desktop-Block: auf dem Telefon war deshalb jede Ebene sofort offen, sobald
 * man „Menu“ antippte — bei einem mehrstufigen Menü eine Wand aus Links statt
 * einer Navigation. Der Pfeil-Schalter setzte dort `aria-expanded` und bewegte
 * nichts; er war funktionslos und gab Screenreadern zugleich falsche Auskunft
 * (D42).
 */
.squadeno-nav .sub-menu {
	display: none;
	list-style: none;
	margin: 0;
	padding-inline-start: var(--squadeno-space-sm);
}

/*
 * Der Schalter wirkt auf jeder Breite — auf dem Telefon ist er der einzige Weg
 * ins Untermenü, denn ein Hover, das man dort haben möchte, gibt es nicht. Auf
 * breiten Viewports kommen `:hover` und `:focus-within` hinzu (weiter unten).
 */
.squadeno-nav [aria-expanded="true"] + .sub-menu {
	display: block;
}

/* Untermenüpunkte ordnen sich dem Hauptpunkt unter — auch in der Größe. */
.squadeno-nav .sub-menu a {
	font-size: var(--squadeno-text-sm);
	min-block-size: 2.25rem;
}

@media (width >= 48rem) {

	.squadeno-nav li {
		position: relative;
	}

	/*
	 * Die Breite kommt vom längsten Eintrag, nicht vom Menüpunkt darüber: Ein
	 * absoluter Kasten rechnet gegen sein `li`, und mit `min-inline-size` allein
	 * war das Klappmenü so schmal wie der Punkt darüber. `max-content` misst am
	 * Inhalt; die Obergrenze ist die Notbremse gegen einen Kasten breiter als
	 * das Fenster (D42).
	 */
	.squadeno-nav .sub-menu {
		background-color: var(--squadeno-surface);
		border: 1px solid var(--squadeno-line);
		border-radius: var(--squadeno-radius);
		box-shadow: var(--squadeno-shadow);
		inline-size: max-content;
		inset-block-start: 100%;
		inset-inline-start: 0;
		max-inline-size: calc(100vw - 2rem);

		/*
		 * Notbremse gegen ein tiefes Menü, keine Tiefengrenze: seit alle Ebenen
		 * dargestellt werden (D42), kann der Kasten höher werden als das Fenster
		 * — beim zehnstufigen „Testing Menu“ der Testdaten deutlich. Was darüber
		 * hinausgeht, bleibt scrollbar statt unerreichbar.
		 */
		max-block-size: min(70vh, 32rem);
		min-inline-size: 12rem;
		overflow-y: auto;
		padding: var(--squadeno-space-xs);
		position: absolute;
		z-index: 20;
	}

	/*
	 * Ab der dritten Ebene im Fluss, eingerückt — der Rückfall.
	 *
	 * Als weiterer absoluter Kasten läge sie gegen dasselbe `li` positioniert
	 * **über** dem Klappmenü, aus dem sie kommt (D42). Seit D45 klappt sie
	 * seitlich auf, wo ein Skript das nachmessen kann; hier steht, was ohne
	 * Messung gilt. Der zweite Selektor ist derselbe Fall, nur gemessen: kein
	 * Platz auf beiden Seiten.
	 */

	/*
	 * Der Menüpunkt, in dessen Fluss eine Ebene zurückgeht, ist ein Flex-Kasten
	 * mit `flex-wrap` — und dessen max-content-Breite ist die **Summe** der
	 * Beiträge aller Kinder, auch der umbrechenden. Die eingerückte Ebene wurde
	 * damit neben den Link gerechnet statt unter ihn: Bei 1024 px wuchs ein
	 * Kasten von 192 auf 399 px und ragte 152 px aus dem Fenster.
	 *
	 * Ein Grid verteilt den Beitrag eines Elements, das alle Spalten überspannt,
	 * auf diese Spalten — die Breite ist dann das Maximum aus Link-Zeile und
	 * Ebene, nicht ihre Summe. Zwei `max-content`-Spalten halten den Pfeil dabei
	 * neben seinem Wort; der Einwand aus D42 galt einem Grid mit `1fr`, das ihn
	 * an die Kastenkante schob (D45).
	 */
	.squadeno-nav .sub-menu li[data-squadeno-flip="stack"] {
		align-items: center;
		display: grid;
		grid-template-columns: max-content max-content;
	}

	.squadeno-nav .sub-menu li[data-squadeno-flip="stack"] > .sub-menu {
		grid-column: 1 / -1;
	}

	.squadeno-nav .sub-menu .sub-menu,
	.squadeno-nav .sub-menu li[data-squadeno-flip="stack"] > .sub-menu {
		background-color: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		inline-size: auto;
		inset: auto;
		max-block-size: none;
		max-inline-size: none;
		min-inline-size: 0;
		overflow-y: visible;
		padding: 0;
		padding-inline-start: var(--squadeno-space-sm);
		position: static;
	}

	/*
	 * Die Navigation steht am rechten Ende der Kopfzeile (D33). Beim letzten
	 * Punkt wächst ein linksbündiger Kasten aus dem Fenster heraus — dort klappt
	 * er deshalb an seiner rechten Kante auf.
	 */
	.squadeno-nav__list > li:last-child > .sub-menu {
		inset-inline-end: 0;
		inset-inline-start: auto;
	}

	/*
	 * Einzeilig: Der Kasten richtet sich nach dem längsten Eintrag, statt den
	 * Eintrag nach dem Kasten zu brechen.
	 */
	.squadeno-nav .sub-menu a {
		white-space: nowrap;
	}

	/*
	 * Nur Hover, zusätzlich zum Schalter (dessen Regel für jede Breite oben
	 * steht). `:focus-within` gehört ausdrücklich **nicht** hierher: nach einem
	 * Klick liegt der Fokus auf dem Schalter, `li:focus-within` ist damit wahr
	 * und hielte das Untermenü offen, ganz gleich was `aria-expanded` sagt — der
	 * Schalter könnte nie zuklappen, und das Menü stand fest, bis der Fokus
	 * irgendwohin sonst wanderte. Für die Tastatur ist der Schalter der Weg,
	 * solange es ihn gibt; fehlt das Skript, greift `scripting: none` (D42).
	 */
	.squadeno-nav li:hover > .sub-menu {
		display: block;
	}
}

/*
 * Ab der dritten Ebene ein eigener Kasten, seitlich neben dem Elternpunkt.
 *
 * Im Fluss eingerückt war die Ebene von ihrer Elternebene nicht zu
 * unterscheiden und las sich wie ein verrutschter Geschwisterpunkt — Befund des
 * Reviews zu 1.3.1 (D45).
 *
 * `scripting: enabled` ist keine Förmlichkeit: Der Einwand aus D42 gegen die
 * Kaskade — bei jeder Ebene weiter zur Seite und irgendwann aus dem Fenster —
 * bleibt richtig. Sie ist nur sicher, wenn jemand nachmisst, und das tut
 * `navigation.js`. Ohne Skript bleibt es beim Fluss.
 */
@media (width >= 48rem) and (scripting: enabled) {
	/*
	 * Der Menüpunkt im Klappmenü trägt zweierlei für seine Kaskade.
	 *
	 * Die beiden Maße sind der Versatz der nächsten Ebene: nach rechts **und**
	 * ein Stück nach unten, und dabei überlappt sie die Ebene, aus der sie
	 * kommt. Voll daneben gestellt sprang jede Ebene um eine ganze Kastenbreite
	 * zur Seite; ein achtstufiges Menü zog sich damit quer über den Schirm, und
	 * welcher Kasten zu welchem gehörte, war nicht mehr zu sehen. Versetzt
	 * gestapelt bleibt der Zusammenhang sichtbar — Rand und Schatten zeichnen
	 * die Treppe —, und der Weg der Maus führt über die Überlappung hinüber,
	 * ganz ohne Lücke.
	 *
	 * `display: flex` nimmt das Grid aus D42 zurück. Es schob den Pfeil an die
	 * rechte Kastenkante, bei kurzen Einträgen über hundert Pixel vom Wort weg
	 * — nötig war es nur, solange das Untermenü im Fluss zur Breite beitrug.
	 */
	.squadeno-nav .sub-menu .menu-item-has-children {
		--squadeno-cascade-inline: 4rem;
		--squadeno-cascade-block: 1rem;

		display: flex;
	}

	/*
	 * `100%` ist die Kante des Menüpunkts; die Überlappung zieht den Kasten von
	 * dort wieder nach innen. Dass er dabei über dem Elternkasten liegt, ist
	 * erwünscht: nur so bleibt der Sprung klein genug, um der Kette mit den
	 * Augen zu folgen.
	 */
	.squadeno-nav .sub-menu .sub-menu {
		background-color: var(--squadeno-surface);
		border: 1px solid var(--squadeno-line);

		/*
		 * Die Randfarbe der Grundgestaltung ist auf eine Fläche vor hellem
		 * Grund gerechnet. Liegen drei Kästen versetzt übereinander,
		 * verschwimmen sie damit zu einer — die Kante trägt hier die ganze
		 * Trennung und braucht etwas mehr Gewicht. Getönt statt gesetzt, damit
		 * sie jeder Farbwahl aus dem Customizer folgt (D20).
		 */
		border-color: color-mix(in srgb, var(--squadeno-brand) 30%, var(--squadeno-line));
		border-radius: var(--squadeno-radius);
		box-shadow: var(--squadeno-shadow);
		inline-size: max-content;
		inset-block-start: var(--squadeno-cascade-block);
		inset-inline-start: calc(100% - var(--squadeno-cascade-inline));
		max-block-size: min(70vh, 32rem);
		max-inline-size: calc(100vw - 2rem);
		min-inline-size: 12rem;
		overflow-y: auto;
		padding: var(--squadeno-space-xs);
		position: absolute;
	}

	/*
	 * `overflow-y: auto` aus D42 erzeugt einen Clipping-Kontext und schnitte die
	 * seitlich herausragende Kaskade ab. Wo eine herausragt, gilt es nicht.
	 */
	.squadeno-nav .sub-menu:has(.sub-menu) {
		max-block-size: none;
		overflow: visible;
	}
}

/*
 * Die Brücke unter dem Menüpunkt, solange sein Zweig offen ist.
 *
 * Der Kasten sitzt versetzt nach rechts **und** nach unten. Wer diagonal auf
 * seinen ersten Eintrag zielt, verlässt den Menüpunkt deshalb nach unten,
 * bevor er den Kasten rechts erreicht — und verliert dort `:hover`, worauf der
 * Zweig zuklappt. Gemessen: 24 von 101 Punkten der Geraden lagen daneben.
 *
 * Der Streifen unter dem Menüpunkt gehört zu ihm und schließt genau diese
 * Lücke. Er steht nur, solange der Zweig offen ist — sonst fielen die obersten
 * Millimeter des nächsten Eintrags dauerhaft unter ihn.
 */
.squadeno-nav .sub-menu .menu-item-has-children:hover,
.squadeno-nav .sub-menu .menu-item-has-children:has(> [aria-expanded="true"]) {
	/*
	 * Der offene Zweig kommt nach vorn. Alle `li` sind positioniert, und unter
	 * Gleichen gewinnt das spätere im Dokument: Brücke und Kasten lagen sonst
	 * **unter** dem nächsten Eintrag derselben Ebene — gemessen als Abriss
	 * genau dort, wo der Nachbar anfängt.
	 */
	z-index: 1;
}

.squadeno-nav .sub-menu .menu-item-has-children:hover::after,
.squadeno-nav .sub-menu .menu-item-has-children:has(> [aria-expanded="true"])::after {
	block-size: var(--squadeno-cascade-block);
	content: "";
	inset-block-start: 100%;
	inset-inline: 0;
	position: absolute;
}

/* Im Fluss sitzt der Kasten selbst dort — die Brücke fienge seine Klicks ab. */
.squadeno-nav .sub-menu li[data-squadeno-flip="stack"]:hover::after,
.squadeno-nav .sub-menu li[data-squadeno-flip="stack"]:has(> [aria-expanded="true"])::after {
	content: none;
}

/*
 * Der offene Zweig ist am ganzen Weg dorthin zu erkennen.
 *
 * Von einer Ebene, über der zwei weitere liegen, sieht man nur noch einen
 * Streifen — welcher Eintrag sie aufgemacht hat, war daraus nicht abzulesen.
 * `:hover` greift auf **allen** Vorfahren gleichzeitig, eine Regel markiert
 * deshalb den ganzen Pfad. `:has()` deckt die Bedienung per Klick ab: dort
 * liegt der Zeiger woanders, und offen ist, was der Schalter sagt (D45).
 */
.squadeno-nav .sub-menu .menu-item-has-children:hover > a,
.squadeno-nav .sub-menu .menu-item-has-children:has(> [aria-expanded="true"]) > a {
	background-color: color-mix(in srgb, var(--squadeno-brand) 14%, transparent);
	color: var(--squadeno-brand-dark);
}

/*
 * Kein Platz nach rechts — der Kasten klappt zur anderen Seite auf. Auf der
 * obersten Ebene rät `:last-child` das noch; eine Kaskade kann es nicht raten,
 * weil ihre Lage erst zur Laufzeit feststeht (D45).
 */
.squadeno-nav__list > li[data-squadeno-flip="start"] > .sub-menu {
	inset-inline-end: 0;
	inset-inline-start: auto;
}

.squadeno-nav .sub-menu li[data-squadeno-flip="start"] > .sub-menu {
	inset-inline-end: calc(100% - var(--squadeno-cascade-inline));
	inset-inline-start: auto;
}

/* 5b. Hero und Slider ---------------------------------------------------- */

/*
 * Der Hero deckt drei Fälle ab (D4): Slider ab zwei Slides, Standbild bei
 * einem, Farbverlauf bei keinem. Der Verlauf ist kein Notbehelf — ohne ihn
 * sähe eine frisch installierte Seite kaputt aus.
 */
.squadeno-hero {
	background: var(--squadeno-hero-gradient);
	color: var(--squadeno-surface);
	min-block-size: var(--squadeno-hero-height);
	display: grid;
	isolation: isolate;
	position: relative;
}

.squadeno-hero > * {
	grid-area: 1 / 1;
}

/*
 * Feste Höhe statt Bildfluss: sonst springt das Layout beim Nachladen des
 * Hero-Bildes und ruiniert den CLS-Wert (D9). Vorher hielt `aspect-ratio` den
 * Platz frei — seit die Höhe wählbar ist, tut es dieselbe Variable, die auch
 * der Hero benutzt. Zwei Angaben nebeneinander wären widersprüchlich (D31).
 */
.squadeno-hero__image {
	block-size: var(--squadeno-hero-height);
	inline-size: 100%;
	object-fit: cover;
}

.squadeno-hero__overlay {
	align-items: end;
	background: var(--squadeno-hero-veil);
	display: grid;
	padding-block: var(--squadeno-space-lg);
	z-index: 1;
}

.squadeno-hero--gradient .squadeno-hero__overlay,
.squadeno-hero--gradient > .squadeno-shell {
	background: none;
	padding-block: var(--squadeno-space-xl);
}

.squadeno-hero--gradient {
	place-items: center;
	text-align: center;
}

.squadeno-hero__title {
	color: var(--squadeno-surface);
	font-size: var(--squadeno-text-2xl);
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
}

.squadeno-hero__text {
	margin-block: var(--squadeno-space-xs) 0;
	max-inline-size: 40rem;
}

.squadeno-hero__overlay .squadeno-button {
	background-color: var(--squadeno-accent);
	color: var(--squadeno-button-text);
	margin-block-start: var(--squadeno-space-sm);
}

/*
 * Jeder Slide überlagert Bild und Text selbst. Die Regel weiter oben greift nur
 * für direkte Kinder des Heros — im Slider liegen Bild und Overlay aber eine
 * Ebene tiefer, im Slide. Ohne diese Regel steht der Text UNTER dem Bild statt
 * darauf.
 */
.squadeno-slider__slide {
	display: grid;
	isolation: isolate;
}

.squadeno-slider__slide > * {
	grid-area: 1 / 1;
}

/* Ohne JavaScript bleiben alle Slides sichtbar und untereinander lesbar. */
.squadeno-slider__slide[hidden] {
	display: none;
}

.squadeno-slider__track > * {
	grid-area: 1 / 1;
}

.squadeno-slider__track {
	display: grid;
}

/*
 * Eine Ebene über dem ganzen Bild, in der die vier Bedienelemente frei
 * platziert werden. Sie darf keine Klicks abfangen — sonst wäre jeder Klick
 * auf einen verlinkten Slide ein Klick ins Leere.
 */
.squadeno-slider__controls {
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

.squadeno-slider__controls > * {
	pointer-events: auto;
}

/*
 * Der helle Rand ist nicht Zierde: auf einem dunklen Motiv — etwa dem
 * Grundverlauf ohne Bild — verschwände der halbtransparente Kreis sonst
 * vollständig. Er hält den Knopf auf jedem Hintergrund auffindbar.
 */
.squadeno-slider__button {
	background-color: var(--squadeno-shade-40);
	border: 1px solid rgb(255 255 255 / 35%);
	border-radius: 50%;
	color: var(--squadeno-surface);
	display: grid;
	min-block-size: var(--squadeno-tap);
	min-inline-size: var(--squadeno-tap);
	padding: 0;
	place-items: center;
	position: absolute;
	transition: background-color 0.2s;
}

.squadeno-slider__button:hover {
	background-color: var(--squadeno-shade-65);
	color: var(--squadeno-surface);
}

.squadeno-slider__button--prev,
.squadeno-slider__button--next {
	font-size: var(--squadeno-text-xl);
	inset-block-start: 50%;
	line-height: 1;
	transform: translateY(-50%);
}

.squadeno-slider__button--prev {
	inset-inline-start: var(--squadeno-slider-inset);
}

.squadeno-slider__button--next {
	inset-inline-end: var(--squadeno-slider-inset);
}

.squadeno-slider__button--play {
	inset-block-end: var(--squadeno-slider-inset);
	inset-inline-end: var(--squadeno-slider-inset);
}

/*
 * Seitliche Pfeile kreuzen die Überschrift, solange der Text keinen Außenrand
 * hat, in dem sie Platz fänden. Sie wandern dort in die untere Leiste; sie
 * auszublenden nähme sie auch aus der Tastaturreihenfolge (D32).
 *
 * Die Grenze ist eine Rechnung, keine gewählte Zahl:
 * `--squadeno-wide + 2 × (slider-inset + tap − space-md)`
 * = 72rem + 2 × (1.25 + 2.75 − 2) = 76rem. Bei 48rem galt sie nur fürs
 * Telefon, dazwischen lag der Pfeil weiter auf dem ersten Wort (D40).
 */
@media (width < 76rem) {

	.squadeno-slider__button--prev,
	.squadeno-slider__button--next {
		inset-block-end: var(--squadeno-slider-inset);
		inset-block-start: auto;
		transform: none;
	}

	.squadeno-slider__button--next {
		inset-inline-end: auto;
		inset-inline-start: calc(var(--squadeno-slider-inset) + var(--squadeno-tap) + 0.4rem);
	}

	/* Platz für die Leiste, damit sie nicht auf dem Text liegt. */
	.squadeno-hero__overlay {
		padding-block-end: calc(var(--squadeno-tap) + var(--squadeno-space-sm));
	}
}

/*
 * Play und Pause werden gezeichnet, nicht getippt: die üblichen Symbolzeichen
 * fehlen in vielen Schriftstapeln und erscheinen dann als leeres Kästchen.
 * Beim ersten Blick auf die laufende Seite war genau das zu sehen.
 * Die Beschriftung für Screenreader liegt daneben im .screen-reader-text.
 */
.squadeno-slider__icon {
	display: block;
	block-size: 0.85rem;
	inline-size: 0.75rem;
	border-inline: 0.24rem solid currentcolor;
}

.squadeno-slider__button--play[aria-pressed="true"] .squadeno-slider__icon {
	block-size: 0;
	border-block: 0.45rem solid transparent;
	border-inline: 0;
	border-inline-start: 0.72rem solid currentcolor;
	inline-size: 0;
}

.squadeno-slider__dots {
	display: flex;
	gap: var(--squadeno-space-xs);
	inset-block-end: 0;
	inset-inline: 0;
	justify-content: center;
	position: absolute;

	/*
	 * Das Touch-Ziel eines Punktes ist absichtlich größer als seine sichtbare
	 * Fläche — 12px wären zwar hübsch, aber nicht treffbar.
	 */
	padding-block: var(--squadeno-space-sm);
}

/*
 * Ring statt Scheibe: auf einem hellen Bild verschwand die halbtransparente
 * weiße Scheibe. Der Rand hält den Punkt auf jedem Motiv sichtbar, gefüllt
 * wird nur der aktive.
 */
.squadeno-slider__dot {
	background-color: transparent;
	border: 2px solid rgb(255 255 255 / 85%);
	border-radius: 50%;
	block-size: 0.85rem;
	inline-size: 0.85rem;
	min-block-size: 0;
	min-inline-size: 0;
	padding: 0;
	transition: background-color 0.2s;
}

.squadeno-slider__dot[aria-current="true"] {
	background-color: var(--squadeno-accent);
	border-color: var(--squadeno-accent);
}

.squadeno-slider__dot::before {
	content: "";
	display: block;
	block-size: var(--squadeno-tap);
	inline-size: var(--squadeno-tap);
	margin: calc(var(--squadeno-tap) / -2 + 0.375rem);
}

/* 6. Karten — Container-Queries ------------------------------------------ */

/*
 * Karten reagieren auf ihren Slot, nicht auf den Viewport. Dieselbe Karte
 * funktioniert dadurch in der Sidebar, im 3er-Grid und über die volle Breite,
 * ohne dass dafür eine Breakpoint-Kaskade nötig wäre (AP2b).
 */
.squadeno-card {
	background-color: var(--squadeno-surface);
	border: 1px solid var(--squadeno-line);
	border-radius: var(--squadeno-radius);
	box-shadow: var(--squadeno-shadow);
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	/* Bezugsrahmen für den gestreckten Titel-Link weiter unten. */
	position: relative;
	transition: transform 0.15s, box-shadow 0.15s;
}

.squadeno-card:hover,
.squadeno-card:focus-within {
	box-shadow: var(--squadeno-shadow-lifted);
	transform: translateY(-3px);
}

/*
 * Die ganze Karte ist anklickbar — aber über **einen** Link, nicht über
 * mehrere. Der gestreckte Titel-Link deckt die Karte ab; Bild und Pfeil sind
 * reine Optik. Zwei Links auf dasselbe Ziel wären für Screenreader eine
 * Dopplung, ein <div onclick> wäre gar kein Link.
 */
.squadeno-card__title a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.squadeno-card__media {
	overflow: hidden;
}

.squadeno-card__media img {
	aspect-ratio: 3 / 2;
	display: block;
	object-fit: cover;
	transition: transform 0.3s;
	width: 100%;
}

.squadeno-card:hover .squadeno-card__media img {
	transform: scale(1.04);
}

.squadeno-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--squadeno-space-xs);
	padding: var(--squadeno-space-sm);
}

.squadeno-card__title {
	font-size: var(--squadeno-text-lg);
	font-weight: 800;
	margin: 0;

	/*
	 * `pretty` statt des geerbten `balance`: in einer schmalen Karte reißt
	 * Ausbalancieren „Squadeno test content“ nach dem ersten Wort um und lässt
	 * die zweite Zeile länger aussehen als die erste. `pretty` vermeidet nur
	 * Schusterjungen und lässt die Zeilen sonst voll laufen.
	 */
	text-wrap: pretty;
}

.squadeno-card__title a {
	color: var(--squadeno-ink);
	text-decoration: none;
}

.squadeno-card__title a:hover {
	color: var(--squadeno-brand);
}

.squadeno-card__meta {
	color: var(--squadeno-muted);
	font-size: var(--squadeno-text-sm);
	margin: 0;
}

/*
 * Kleiner als der Titel darüber. Auf gleicher Größe konkurrierten beide um
 * dieselbe Aufmerksamkeit, und die Kachel las sich wie ein Absatz mit fetter
 * erster Zeile statt wie eine Kachel.
 */
.squadeno-card__excerpt {
	color: var(--squadeno-muted);
	font-size: var(--squadeno-text-sm);
	margin: 0;
}

/*
 * Der Pfeil ist reine Optik (aria-hidden) und deshalb kein Link: die Karte hat
 * schon einen. In der Markenfarbe, nicht im Akzent — Gelb auf Weiß hat rund
 * 1,9:1 und wäre als Zeichen unsichtbar. Die Vorlage kommt damit durch, weil
 * ihre Marke rot ist.
 */
.squadeno-card__arrow {
	color: var(--squadeno-brand);
	font-weight: 700;
	margin-block-start: auto;
	padding-block-start: var(--squadeno-space-xs);
}

/* Die Kachel führt den Akzent als Balken oben — dort stört Gelb nicht. */
.squadeno-card--tile {
	border-block-start: 3px solid var(--squadeno-accent);
}

@container (width >= 30rem) {

	.squadeno-card {
		flex-direction: row;
	}

	.squadeno-card__media {
		flex: 0 0 40%;
	}

	.squadeno-card__media img {
		block-size: 100%;
	}
}

/* 7. Inhalte, Kommentare, Formulare -------------------------------------- */

/*
 * Brotkrumen sind reine Navigations-Semantik (D10): ein <nav> mit aria-label
 * und eine geordnete Liste. Kein schema.org — das liefert das Plugin.
 */
.squadeno-breadcrumbs {
	font-size: var(--squadeno-text-sm);
	margin-block-end: var(--squadeno-space-sm);
}

.squadeno-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--squadeno-space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.squadeno-breadcrumbs__item + .squadeno-breadcrumbs__item::before {
	color: var(--squadeno-muted);
	content: "/";
	margin-inline-end: var(--squadeno-space-xs);
}

.squadeno-breadcrumbs [aria-current="page"] {
	color: var(--squadeno-muted);
}

.squadeno-address {
	font-style: normal;
	margin-block-end: var(--squadeno-space-md);
}

.squadeno-entry__meta {
	color: var(--squadeno-muted);
	font-size: var(--squadeno-text-sm);
	margin-block-end: var(--squadeno-space-sm);
}

.squadeno-entry__content > * {
	margin-block-end: var(--squadeno-space-sm);
}

/*
 * Gefloatete Inhalte enden mit ihrem Inhaltsbereich.
 *
 * Ein Float trägt nichts zur Höhe seines Elternteils bei. Steht ein `alignleft`
 * gesetztes Bild als letztes im Text — der Fall der Testseite „Clearing Floats“
 * —, ragt es ohne diese Regel unten heraus und in den Fußbereich hinein. Der
 * Kommentartext braucht dieselbe Regel: `wp_kses_post()` lässt `alignleft` auch
 * dort zu, und der nächste Kommentar rückte daneben (D45).
 */
.squadeno-entry__content::after,
.comment-content::after {
	clear: both;
	content: "";
	display: block;
}

/*
 * Lesebreite für Prosa. Aufgezählt wird, was Prosa **ist** — nicht, welche
 * Fremdklassen breit sein dürfen. Die Vorlage macht das Gegenteil und listet
 * sieben `.csmgr-*`-Klassen auf; das wäre hier ein Reject-Grund (D6). Die
 * Umkehrung kommt ohne fremden Namensraum aus und wirkt für jedes Plugin:
 * was kein Textblock ist, bekommt die volle Spalte.
 *
 * `h1` und `address` fehlten hier: die Überschrift des Beitrags läuft über die
 * Regel darüber, und an eine `h1` **im** Text hatte niemand gedacht. Beides
 * stand ausgerückt vor der Textspalte (D40). Tabellen, Bilder und `<pre>`
 * bleiben draußen — sie brauchen die ganze Spalte.
 */
.squadeno-entry > h1,
.squadeno-entry > .squadeno-entry__meta,
.squadeno-entry__content > p,
.squadeno-entry__content > address,
.squadeno-entry__content > h1,
.squadeno-entry__content > h2,
.squadeno-entry__content > h3,
.squadeno-entry__content > h4,
.squadeno-entry__content > h5,
.squadeno-entry__content > h6,
.squadeno-entry__content > ul,
.squadeno-entry__content > ol,
.squadeno-entry__content > dl,
.squadeno-entry__content > blockquote {
	margin-inline: auto;
	max-width: var(--squadeno-content);
}

/*
 * Begriff und Erklärung müssen unterscheidbar sein. Der Reset setzt `dd` auf
 * `margin: 0`; beide standen dadurch auf derselben Linie, und die Liste las
 * sich als Folge kurzer Absätze (D40).
 */
.squadeno-entry__content dt {
	font-weight: 600;
}

.squadeno-entry__content dd {
	margin-block-end: var(--squadeno-space-xs);
	margin-inline-start: var(--squadeno-space-sm);
}

/*
 * Personen- und Ortsseiten: das Beitragsbild steht neben den Angaben, nicht im
 * Kopfbereich (D38). Der Kopfbereich schneidet auf 2000×760 zu und macht aus
 * einem Hochformat einen Streifen.
 *
 * Zwei Spalten erst, wenn Lesebreite und Bild nebeneinander passen; darunter
 * steht das Bild über den Angaben — dafür steht es im Markup schon vor ihnen,
 * und die Spaltenzuweisung dreht die Reihenfolge nur auf breiten Schirmen.
 */
.squadeno-entry__body--with-portrait {
	display: grid;
	gap: var(--squadeno-space-md);
}

.squadeno-entry__portrait {
	margin: 0;
	max-width: var(--squadeno-portrait);
}

.squadeno-entry__portrait img {
	border-radius: var(--squadeno-radius);
	display: block;
	height: auto;
	width: 100%;
}

@media (width >= 60rem) {

	.squadeno-entry__body--with-portrait {
		align-items: start;
		grid-template-columns: minmax(0, var(--squadeno-content)) var(--squadeno-portrait);
		margin-inline: auto;
		max-width: calc(var(--squadeno-content) + var(--squadeno-portrait) + var(--squadeno-space-md));
	}

	.squadeno-entry__body--with-portrait > .squadeno-entry__content {
		grid-area: 1 / 1;
	}

	.squadeno-entry__body--with-portrait > .squadeno-entry__portrait {
		grid-area: 1 / 2;
	}
}

/*
 * Die Nachbarnavigation von WordPress hatte nie eine Regel und stand deshalb
 * als zwei nackte Links links unter dem Beitrag.
 */
.post-navigation {
	border-block-start: 1px solid var(--squadeno-line);
	margin-block-start: var(--squadeno-space-lg);
	padding-block-start: var(--squadeno-space-sm);
}

.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--squadeno-space-sm);
	justify-content: space-between;
}

.post-navigation .nav-next {
	margin-inline-start: auto;
	text-align: end;
}

.post-navigation a {
	font-weight: 600;
	text-decoration: none;
}

.post-navigation a:hover {
	text-decoration: underline;
}

.squadeno-pagination {
	margin-block-start: var(--squadeno-space-lg);
}

/*
 * Die Seitenlinks eines mehrseitigen Beitrags — eigenes Markup, eigene Regel.
 *
 * `wp_link_pages()` vergibt `.post-page-numbers`, `paginate_links()` dagegen
 * `.page-numbers`. Beide liefen bis 1.3.1 unter `.squadeno-pagination`, und von
 * dessen Gestaltung kam hier nichts an außer dem Hintergrund der aktuellen
 * Seite: ein zeichenbreiter grüner Klotz vor der nächsten Zahl.
 *
 * `clear` ist die zweite Hälfte des Float-Befunds (D45). Der Clearfix oben
 * schließt das Bild in den Inhaltsbereich ein, hindert die Links aber nicht
 * daran, sich **daneben** zu setzen — und genau das zeigte der Reviewer.
 */
.squadeno-page-links {
	align-items: center;
	clear: both;
	display: flex;
	flex-wrap: wrap;
	gap: var(--squadeno-space-xs);
	margin-block-start: var(--squadeno-space-lg);

	/*
	 * Und in der Textspalte, nicht davor. Die Lesebreite oben zählt auf, was
	 * Prosa **ist**; eine `<nav>` ist es nicht, stand deshalb ausgerückt links
	 * vor dem Text — derselbe Fehler wie bei `h1` und `address` in D40.
	 */
	margin-inline: auto;
	max-width: var(--squadeno-content);
}

.squadeno-page-links__label {
	color: var(--squadeno-muted);
	font-size: var(--squadeno-text-sm);
}

.squadeno-page-links .post-page-numbers {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-block-size: var(--squadeno-tap);
	min-inline-size: var(--squadeno-tap);
	text-decoration: none;
}

.squadeno-page-links .current {
	background-color: var(--squadeno-brand);
	border-radius: var(--squadeno-radius);
	color: var(--squadeno-surface);
}

.squadeno-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--squadeno-tap);
	min-inline-size: var(--squadeno-tap);
	text-decoration: none;
}

.squadeno-pagination .current {
	background-color: var(--squadeno-brand);
	border-radius: var(--squadeno-radius);
	color: var(--squadeno-surface);
}

.squadeno-comments {
	margin-block-start: var(--squadeno-space-xl);
}

.comment-list,
.comment-list .children {
	list-style: none;
	padding-inline-start: 0;
}

.comment-list .children {
	border-inline-start: 2px solid var(--squadeno-line);
	margin-inline-start: var(--squadeno-space-sm);
	padding-inline-start: var(--squadeno-space-sm);
}

.comment-body {
	border-block-end: 1px solid var(--squadeno-line);
	padding-block: var(--squadeno-space-sm);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
	background-color: var(--squadeno-surface);
	border: 1px solid var(--squadeno-line);
	border-radius: var(--squadeno-radius);
	color: inherit;
	max-width: 100%;
	min-block-size: var(--squadeno-tap);
	padding: var(--squadeno-space-xs) var(--squadeno-space-sm);
}

/*
 * Volle Breite nur für Felder ohne natürliche Breite. Eine Auswahlliste hat
 * eine — sie ist so breit wie ihr längster Eintrag. Sie zu überschreiben ist
 * Anmaßung gegenüber jedem Formular, das man nicht selbst gebaut hat: zwei
 * nebeneinander gedachte Filter standen dadurch untereinander (D28).
 */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea {
	width: 100%;
}

button,
input[type="submit"],
.squadeno-button {
	background-color: var(--squadeno-brand);
	border: 0;
	border-radius: var(--squadeno-radius);
	color: var(--squadeno-surface);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--squadeno-tap);
	padding-inline: var(--squadeno-space-md);
	text-decoration: none;
}

button:hover,
input[type="submit"]:hover,
.squadeno-button:hover {
	background-color: var(--squadeno-brand-dark);
	color: var(--squadeno-surface);
}

/*
 * „Knopf in der Akzentfarbe“ ist ein Bauteil, das an drei Stellen auftaucht:
 * im Hero, im Aufruf zum Mitmachen und als Block-Style im Editor. Der
 * Ruhezustand steht jeweils bei seinem Bauteil, der Überfahr-Zustand hier an
 * einer Stelle — sonst laufen die drei auseinander, wie schon geschehen.
 *
 * Beim Überfahren tauschen Fläche und Schrift die Rollen. Das ist keine
 * Spielerei, sondern der einzige Wechsel, der den Kontrast garantiert hält:
 * er ist zwischen zwei Farben symmetrisch. Vorher wechselte die Fläche auf
 * Weiß und die Schrift blieb `--squadeno-button-text` — wer die auf Weiß
 * stellte, bekam weiß auf weiß.
 *
 * Der Ring in der Akzentfarbe zeichnet die Kontur nach. Ohne ihn verschwände
 * der Knopf im Aufruf zum Mitmachen fast in der Fläche dahinter, weil beide
 * dunkel sind.
 */
.squadeno-hero__overlay .squadeno-button:hover,
.squadeno-cta .squadeno-button:hover,
.is-style-squadeno-accent .wp-block-button__link:hover,
.wp-block-button.is-style-squadeno-accent .wp-block-button__link:hover {
	background-color: var(--squadeno-button-text);
	box-shadow: inset 0 0 0 2px var(--squadeno-accent);
	color: var(--squadeno-accent);
}

.squadeno-search__form {
	display: flex;
	gap: var(--squadeno-space-xs);
}

/* 7b. Startseiten-Bausteine ---------------------------------------------- */

/*
 * Überschrift links, weiterführender Link rechts. Der Link steht bewusst im
 * Kopf des Abschnitts und nicht darunter: dort findet ihn, wer die Karten
 * überflogen hat und mehr will.
 */
.squadeno-section__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--squadeno-space-xs) var(--squadeno-space-sm);
	justify-content: space-between;
}

.squadeno-section__head h2 {
	margin-block-end: 0;
}

.squadeno-section__link {
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.squadeno-section__link:hover {
	text-decoration: underline;
}

/*
 * Der einleitende Text der Startseite bekommt eine eigene Fläche. Frei auf dem
 * Hintergrund sah er aus wie vergessen.
 */
.squadeno-intro {
	background-color: var(--squadeno-surface);
	border: 1px solid var(--squadeno-line);
	border-radius: var(--squadeno-radius);
	box-shadow: var(--squadeno-shadow);
	padding: var(--squadeno-space-md);
}

.squadeno-main > section,
.squadeno-tiles,
.squadeno-cta {
	margin-block-start: var(--squadeno-space-lg);
}

/*
 * Nur da, wenn der Verein eine Überschrift eingetragen hat. Ohne Eingabe
 * trägt dasselbe <h2> die Klasse .screen-reader-text und bleibt unsichtbar —
 * in der Gliederung steht es trotzdem (D23).
 */
.squadeno-tiles__title {
	font-size: var(--squadeno-text-xl);
	margin-block: 0 var(--squadeno-space-sm);
}

/*
 * Text links, Knopf rechts. Zentriert wirkte das Band wie ein Platzhalter;
 * die Aufteilung gibt dem Knopf den Platz, der ihm als Ziel des Abschnitts
 * zusteht. Unter der Umbruchgrenze stapelt `flex-wrap` beides.
 */
.squadeno-cta {
	align-items: center;
	background: var(--squadeno-cta-gradient);
	border-radius: var(--squadeno-radius);
	color: var(--squadeno-surface);
	display: flex;
	flex-wrap: wrap;
	gap: var(--squadeno-space-sm) var(--squadeno-space-md);
	justify-content: space-between;
	padding: var(--squadeno-space-lg);
}

.squadeno-cta__body {
	flex: 1 1 20rem;
}

.squadeno-cta h2 {
	color: var(--squadeno-surface);
	margin-block: 0 var(--squadeno-space-xs);
}

.squadeno-cta p {
	margin: 0;
}

.squadeno-cta .squadeno-button {
	background-color: var(--squadeno-accent);
	color: var(--squadeno-button-text);
	flex: 0 0 auto;
}

/* 7c. Block-Styles ------------------------------------------------------- */

/*
 * Überschriften in farbigen Blöcken erben die Textfarbe ihres Containers.
 *
 * Ohne diese Regel gewinnt die Vorgabe aus theme.json (`elements.heading`) und
 * färbt jede Überschrift markendunkel — auch die in einer dunkelgrünen Gruppe.
 * Das Ergebnis war Dunkelgrün auf Dunkelgrün: im Markup korrekt, praktisch
 * unlesbar. Aufgefallen ist es erst beim Ansehen des gerenderten Patterns.
 *
 * `:is()` hebt die Spezifität gerade so weit an, dass sie das `:where()` aus
 * theme.json schlägt, ohne alles Weitere zu übertönen.
 */
.has-text-color :is(h1, h2, h3, h4, h5, h6),
.squadeno-cta :is(h1, h2, h3, h4, h5, h6),
.squadeno-hero :is(h1, h2, h3, h4, h5, h6),
.squadeno-footer :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

/*
 * Die im Editor auswählbaren Varianten (inc/blocks.php). Ein Block-Style ohne
 * passende Regel wäre eine leere Zusage: auswählbar, aber wirkungslos — genau
 * das prüft verify-blocks.php gegen.
 */
.is-style-squadeno-accent.wp-block-quote {
	border-inline-start: 4px solid var(--squadeno-accent);
	padding-inline-start: var(--squadeno-space-sm);
}

.is-style-squadeno-accent .wp-block-button__link,
.wp-block-button.is-style-squadeno-accent .wp-block-button__link {
	background-color: var(--squadeno-accent);
	color: var(--squadeno-button-text);
}

.is-style-squadeno-card {
	background-color: var(--squadeno-surface);
	border: 1px solid var(--squadeno-line);
	border-radius: var(--squadeno-radius);
	padding: var(--squadeno-space-md);
}

/* 8. Fußbereich ---------------------------------------------------------- */

.squadeno-footer {
	background-color: var(--squadeno-brand-dark);
	color: var(--squadeno-surface);
	margin-block-start: var(--squadeno-space-xl);
	padding-block: var(--squadeno-space-lg);
}

.squadeno-footer a {
	color: var(--squadeno-surface);
}

.squadeno-footer__widgets {
	display: grid;
	gap: var(--squadeno-space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin-block-end: var(--squadeno-space-md);
}

.squadeno-footer__legal {
	border-block-start: 1px solid rgb(255 255 255 / 20%);
	display: flex;
	flex-wrap: wrap;
	gap: var(--squadeno-space-sm);
	justify-content: space-between;
	padding-block-start: var(--squadeno-space-sm);
}

/*
 * Den Abstand in der Rechtszeile macht `gap`, nicht die Kinder. Ohne diesen
 * Riegel addierte sich das `margin-block-end` aus der Grundtypografie zur
 * Zeilenlücke, und der Credit-Link stand eine Leerzeile unter dem Copyright
 * statt eine Zeile darunter.
 */
.squadeno-footer__legal > * {
	margin: 0;
}

/*
 * 24px Mindesthöhe: die Ausnahme für Fließtext-Links greift bei einer Liste
 * von Links nicht sauber, und WCAG 2.5.8 verlangt für Bedienelemente 24×24
 * CSS-Pixel. Zwei Zeilen Innenabstand kosten hier nichts (D32). Gilt für jeden
 * Link der Rechtszeile — der Credit-Link steht allein und ist genauso ein Ziel.
 */
.squadeno-footer__legal a {
	display: inline-block;
	min-block-size: 1.5rem;
	padding-block: 0.15rem;
}

/*
 * Der Credit-Link (D44) hängt an der Copyright-Zeile, statt eine eigene
 * aufzuspannen. Der Trenner kommt wie bei den Brotkrumen aus dem Stylesheet:
 * ein Satzzeichen im Markup wäre Text, den ein Screenreader mitliest, und
 * „Mittelpunkt" sagt niemandem etwas.
 */
.squadeno-footer__credit::before {
	content: "·";
	margin-inline: var(--squadeno-space-xs);
}

.squadeno-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--squadeno-space-sm);
	list-style: none;
	padding: 0;
}

.squadeno-widget__title {
	font-size: var(--squadeno-text-base);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.squadeno-footer .squadeno-widget__title {
	color: var(--squadeno-accent);
}

/* 9. Pflichtklassen von WordPress ---------------------------------------- */

/*
 * Theme-Check meldet die folgenden Klassen als REQUIRED. Im Vorgänger-Theme
 * fehlten sie vollständig — einer der vier historischen Blocker. Sie werden
 * von den offiziellen Theme Unit Test Data sichtbar aufgedeckt.
 */

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

/*
 * Kein Rahmen am Sprungziel. Es ist nur wegen `tabindex="-1"` fokussierbar,
 * damit der Skip-Link den Fokus wirklich verschiebt und nicht bloß die Ansicht
 * scrollt (D43). Ein Ring um den halben Bildschirm läse sich wie ein Fehler —
 * die Rückmeldung ist der Sprung selbst. Die Attributauswahl bindet die Regel
 * an genau diesen Fall, damit sie die Fokus-Sichtbarkeit sonst nirgends
 * aushebelt.
 */
#squadeno-content[tabindex="-1"]:focus {
	outline: 0;
}

/*
 * Der Skip-Link muss beim Fokus sichtbar werden — sonst nützt er nichts.
 *
 * Der z-index liegt über **jeder** anderen Ebene: vorher standen Link und
 * Kopfleiste auf 100, und bei Gleichstand gewinnt die spätere im Dokument —
 * der fokussierte Link war nie zu sehen (D40).
 */
.screen-reader-text:focus {
	background-color: var(--squadeno-surface);
	clip-path: none;
	color: var(--squadeno-brand-dark);
	height: auto;
	inset-block-start: var(--squadeno-space-xs);
	inset-inline-start: var(--squadeno-space-xs);
	padding: var(--squadeno-space-xs) var(--squadeno-space-sm);
	text-decoration: underline;
	width: auto;
	z-index: 200;
}

/*
 * Versatz unter der Admin-Bar (D47).
 *
 * Die Leiste liegt auf `z-index: 99999` — dagegen hilft kein z-index, wer oben
 * klebt, muss ausweichen. Verdeckt wird sie nie. Die Höhe setzt WordPress
 * selbst (`--wp-admin--admin-bar--height`, 32 px / 46 px); eigene Zahlen wären
 * eine Kopie, die beim nächsten Core-Release still veraltet.
 */
.admin-bar .screen-reader-text:focus {
	inset-block-start: calc(var(--squadeno-space-xs) + var(--wp-admin--admin-bar--height, 32px));
}

.admin-bar .squadeno-header--sticky {
	inset-block-start: var(--wp-admin--admin-bar--height, 32px);
}

/*
 * Bis 600 px scrollt die Bar mit der Seite fort; die Kopfleiste hielte sonst um
 * ihre Höhe zu tief an. Der Skip-Link behält seinen Versatz — er erscheint am
 * Seitenanfang, wo die Bar auch dort noch steht.
 */
@media (width <= 600px) {

	.admin-bar .squadeno-header--sticky {
		inset-block-start: 0;
	}
}

.sticky {
	border-inline-start: 4px solid var(--squadeno-accent);
	padding-inline-start: var(--squadeno-space-sm);
}

.bypostauthor > .comment-body {
	border-inline-start: 4px solid var(--squadeno-brand);
	padding-inline-start: var(--squadeno-space-sm);
}

.alignleft {
	display: inline;
	float: left;
	margin-inline-end: var(--squadeno-space-sm);
	margin-block-end: var(--squadeno-space-xs);
}

.alignright {
	display: inline;
	float: right;
	margin-inline-start: var(--squadeno-space-sm);
	margin-block-end: var(--squadeno-space-xs);
}

.aligncenter {
	clear: both;
	display: block;
	margin-inline: auto;
}

.alignwide {
	margin-inline: auto;
	max-width: var(--squadeno-wide);
	width: 100%;
}

.alignfull {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.wp-caption {
	margin-block-end: var(--squadeno-space-sm);
	max-width: 100%;
}

.wp-caption img {
	display: block;
}

.wp-caption-text,
.gallery-caption {
	color: var(--squadeno-muted);
	font-size: var(--squadeno-text-sm);
	margin-block-start: var(--squadeno-space-xs);
	text-align: center;
}

.wp-block-image figcaption {
	color: var(--squadeno-muted);
	font-size: var(--squadeno-text-sm);
}

/* Beitragsbilder und eingebettete Medien sollen nicht überlaufen. */
.wp-block-embed iframe,
.wp-block-video video {
	max-width: 100%;
}