/* ==========================================================================
   fussballkrisen.de – Theme-Grundstile
   Kopf, Fuß, Inhaltsbereiche, Listen- und Beitragsansicht, Stile für Kernblöcke.
   Farben, Schatten und Etiketten-Schrift laufen nur über die Stil-Tokens (--buehne, --flaeche,
   --fuss …). Die Werte kommen aus theme.json (Stil „Dunkel“) bzw. styles/klinisch.json (Stil
   „Klinisch“), die kurzen Namen legt grundlagen.css des Plugins an. Bedeutung und Regeln: STIL.md.
   ========================================================================== */

/* Ersatzschriften. Ist eine Webschrift zum ersten Bild nicht da (auf dem Handy bis zu 4 s), bleibt der Text
   auf dieser Seite in einer Systemschrift (font-display: optional, STIL.md). Diese ist hier auf die Breite der
   Webschrift gestellt (size-adjust), damit Titel und Absätze genauso umbrechen und die Seite fast gleich
   aussieht. Mit der früheren Ersatzschrift Arial Narrow – rund 40 % schmaler als Archivo in Titelbreite
   (112 %) – sprang der Seitenkopf der Theorie beim Schriftwechsel um 0,12 (CLS).
   Die Zeilen schreibt `node lokal/ersatzschriften.mjs` (gemessen in Chrome mit den Titeln und Texten der
   Seite); neu messen, wenn sich eine Schrift, ein Gewicht oder die Titelbreite (font-stretch) ändert.
   Arial und Georgia gibt es unter Windows, macOS und iOS, Consolas nur unter Windows; auf Android greift keine.
   Eingebunden in theme.json und styles/klinisch.json jeweils direkt hinter der Webschrift. */
@font-face { font-family: 'Archivo Ersatz'; src: local('Arial'), local('ArialMT'); font-weight: 100 549; font-stretch: 50% 106%; size-adjust: 98.56%; ascent-override: 89.09%; descent-override: 21.31%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Ersatz'; src: local('Arial'), local('ArialMT'); font-weight: 100 549; font-stretch: 107% 200%; size-adjust: 111.38%; ascent-override: 78.83%; descent-override: 18.85%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Ersatz'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 550 900; font-stretch: 50% 106%; size-adjust: 99.52%; ascent-override: 88.22%; descent-override: 21.1%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Ersatz'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 550 900; font-stretch: 107% 110.9%; size-adjust: 109.91%; ascent-override: 79.88%; descent-override: 19.11%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Ersatz'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 550 900; font-stretch: 111% 200%; size-adjust: 113.71%; ascent-override: 77.21%; descent-override: 18.47%; line-gap-override: 0%; }
@font-face { font-family: 'Source Serif 4 Ersatz'; src: local('Georgia'); font-weight: 100 549; size-adjust: 101.35%; ascent-override: 102.22%; descent-override: 33.05%; line-gap-override: 0%; }
@font-face { font-family: 'Source Serif 4 Ersatz'; src: local('Georgia Bold'), local('Georgia-Bold'); font-weight: 550 900; size-adjust: 89.74%; ascent-override: 115.45%; descent-override: 37.33%; line-gap-override: 0%; }
@font-face { font-family: 'IBM Plex Mono Ersatz'; src: local('Consolas'); font-weight: 100 549; size-adjust: 109.23%; ascent-override: 93.84%; descent-override: 25.18%; line-gap-override: 0%; }
@font-face { font-family: 'IBM Plex Mono Ersatz'; src: local('Consolas Bold'), local('Consolas-Bold'); font-weight: 550 900; size-adjust: 109.23%; ascent-override: 93.84%; descent-override: 25.18%; line-gap-override: 0%; }
@font-face { font-family: 'IBM Plex Sans Ersatz'; src: local('Arial'), local('ArialMT'); font-weight: 100 549; size-adjust: 100.57%; ascent-override: 101.91%; descent-override: 27.34%; line-gap-override: 0%; }
@font-face { font-family: 'IBM Plex Sans Ersatz'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 550 900; size-adjust: 97.54%; ascent-override: 105.09%; descent-override: 28.19%; line-gap-override: 0%; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(4.25rem + 1rem); }
/* Bildlaufleiste immer da (Windows, Desktop): Beim ersten Bild ist eine Seite oft genau fensterhoch und hat noch
   keine Leiste; kam sie mit dem Rest des HTML, rückte der mittig stehende Inhalt 7,5 px nach links (Theorie, langsames
   Netz: 0,0074). Kurze Seiten auf großen Bildschirmen zeigen dafür eine leere Leiste wie viele Seiten. Nicht
   scrollbar-gutter: Dessen freigehaltener Streifen zeigte auf solchen Seiten neben den dunklen Bändern die helle
   Seitenfarbe. Handys und überlagernde Leisten (macOS) bleiben unberührt. Weil html jetzt selbst den Überlauf regelt,
   schneidet body seitlich mit clip statt hidden ab: hidden machte body selbst zum Scrollbereich, und Kästen mit
   position: sticky (Ergebnisse im Radar, Verzeichnis der Theorie) klebten dann an ihm statt am Fenster. Mit clip
   kleben sie wie bisher (gemessen 29.10.2026). Nur auf der Seite selbst (wp-site-blocks ohne is-root-container, wie
   unten): Als Editor-Stil würde aus html sonst .editor-styles-wrapper, und der Editor bekäme eine leere Leiste. */
html:has(> body > .wp-site-blocks:not(.is-root-container)) { overflow-y: scroll; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-x: clip; hyphens: manual; }
:where(h1, h2, h3, h4) { text-wrap: balance; }
h1 { font-stretch: 112%; }
h2 { font-stretch: 110%; }
h3 { font-stretch: 104%; }
::selection { background: var(--buehne-akzent); color: var(--auf-akzent); }
/* Fokusrahmen in --akzent: ≥ 3 : 1 auf heller Fläche und auf der dunklen Bühne (Signalgrün auf Weiß wäre zu blass) */
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; height: auto; }
.skip-link.screen-reader-text:focus { background: var(--buehne-akzent); color: var(--auf-akzent); font-family: var(--wp--preset--font-family--titel); font-weight: calc(700 * var(--gewicht-mass)); }

/* ---------- Kopfzeile (liegt durchsichtig auf der Bühne jeder Seite) ---------- */
.kopf-bereich { position: relative; z-index: 50; }
.kopf {
	position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-hoehe, 4.25rem);
	display: flex; align-items: center; border-bottom: 1px solid transparent;
	transition: background .4s, backdrop-filter .4s, border-color .4s;
}
.admin-bar .kopf { top: 32px; }
@media (max-width: 782px) { .admin-bar .kopf { top: 46px; } }
.kopf.ist-gescrollt, .kopf.ist-offen {
	background: var(--kopf-glas);
	backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom-color: var(--buehne-linie);
}
/* Ohne JavaScript setzt kopf.js nie ist-gescrollt: Dann hat die Kopfzeile immer einen deckenden Grund (wie das
   Handy-Menü, ohne Glasfilter), sonst lägen Logo und Menüknopf beim Scrollen ohne Hintergrund über dem Text */
@media (scripting: none) {
	.kopf { background: var(--kopf-menue); border-bottom-color: var(--buehne-linie); }
}
/* Offenes Handy-Menü: kein Glasfilter am Kopf. Ein Vorfahr mit backdrop-filter wird zum Bezugsrahmen
   für position: fixed – das Menü bliebe sonst in der 68 px hohen Kopfzeile eingesperrt. Ohne Übergang,
   sonst bleibt es beim Öffnen aus dem gescrollten Zustand 0,4 s lang eingesperrt, bis der Filter
   ausgeblendet ist. Das Menü hat einen deckenden Grund (--kopf-menue) und braucht kein Glas. */
.kopf.ist-offen { backdrop-filter: none; -webkit-backdrop-filter: none; transition: none; }
.kopf__innen { width: min(100% - 2 * clamp(1rem, 4vw, 3rem), 90rem); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; }
.kopf .wp-block-fussballkrisen-marke { margin-right: auto; }

/* Ganze Seite: kein Block-Abstand zwischen Kopf, Inhalt und Fuß (sonst ein heller Streifen über dem dunklen Band) */
body .wp-site-blocks > * { margin-block: 0; }
/* Kurze Seiten (Impressum, 404): Inhalt wächst, die Fußzeile steht am unteren Fensterrand –
   sonst bleibt darunter ein Streifen in Seitenfarbe. Die Admin-Leiste schiebt die Seite nach unten.
   Nur auf der Seite selbst: Der Website-Editor gibt seiner Arbeitsfläche ebenfalls die Klasse
   wp-site-blocks (dort zusammen mit is-root-container), und die soll ihr Layout behalten. */
.wp-site-blocks:not(.is-root-container) { display: flex; flex-direction: column; min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)); }
.wp-site-blocks:not(.is-root-container) > .fk-main { flex: 1 0 auto; }
/* Kommt das HTML langsam, steht beim ersten Bild oft nur ein Teil der Fußzeile da; vervollständigt, wird sie höher
   und rückte unten am Fenster nach oben. Darum unsichtbar, bis das Skript direkt hinter ihr gelaufen ist
   (functions.php, Klasse fk-fuss-da) – nur mit JavaScript, sonst bliebe sie verborgen. */
.fk-js:not(.fk-fuss-da) .fuss-bereich { visibility: hidden; }
/* Vollbreite Abschnitte schließen ohne Lücke aneinander an */
.fk-main .wp-block-post-content > .alignfull { margin-block-start: 0; margin-block-end: 0; }
/* Kopfzeile: Elemente auf einer Linie (die Gruppe hätte sonst Fließ-Abstände) */
.kopf .kopf__innen > * { margin-block: 0; }

/* Hauptnavigation (Kernblock „Navigation“). Der Kernblock setzt die Linkfarbe mit hoher
   Spezifität auf „erben“, deshalb die Farbe am Navigationsblock selbst und verstärkte Selektoren. */
.kopf .kopf__nav { font-family: var(--wp--preset--font-family--titel); color: var(--buehne-text); }
.kopf__nav .wp-block-navigation__container { gap: .25rem; }
.kopf .kopf__nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	font-size: .92rem; font-weight: 560; color: var(--buehne-text); text-decoration: none;
	padding: .5rem .8rem; border-radius: 4px; position: relative; transition: color .2s;
}
.kopf .kopf__nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.kopf .kopf__nav .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.kopf .kopf__nav .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current='page'] { color: var(--buehne-titel); }
.kopf__nav .current-menu-item > .wp-block-navigation-item__content::after,
.kopf__nav .wp-block-navigation-item__content[aria-current='page']::after {
	content: ''; position: absolute; left: .8rem; right: .8rem; bottom: .2rem; height: 2px; background: var(--buehne-akzent); border-radius: 2px;
}
.kopf__nav .wp-block-navigation__responsive-container-open,
.kopf__nav .wp-block-navigation__responsive-container-close { color: var(--buehne-titel); }
/* Menüknopf nur auf schmalen Bildschirmen (der Kernblock blendet ihn ab 600 px aus, siehe unten) */
@media (max-width: 51.99rem) {
	.kopf__nav .wp-block-navigation__responsive-container-open {
		border: 1px solid var(--buehne-linie); border-radius: 4px; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
		background: var(--buehne-pille); /* wie die Datenstand-Pille: in Dunkel durchsichtig, in Klinisch weiß */
	}
}
/* Zwischen 600 px und 52rem ist es für die fünf Menüpunkte neben dem Logo zu eng: „Kontakt“ lief rechts
   aus dem Bild (gemessen 28.10.2026: die Leiste passt erst ab etwa 740 px). Seit dem Sprachumschalter (07.11.2026)
   braucht die Kopfzeile rund 815 px – bei 774 und 800 px lief sie 38 bzw. 14 px über; bei 834 px passt sie. Dort
   darum ebenfalls Menüknopf und Vollbild-Menü; der Kernblock schaltet schon ab 600 px auf die Leiste um. */
@media (min-width: 600px) and (max-width: 51.99rem) {
	.kopf .kopf__nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: grid; }
	.kopf .kopf__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.kopf__nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--kopf-menue) !important; color: var(--buehne-titel) !important;
	padding: calc(var(--header-hoehe, 4.25rem) + 1rem) clamp(1rem, 4vw, 3rem) 2rem;
}
.kopf__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0; width: 100%; align-items: stretch; }
.kopf__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--buehne-linie); }
.kopf .kopf__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content { font-size: 1.15rem; padding: .95rem 0; }
.kopf__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }
@media (min-width: 600px) and (max-width: 56rem) {
	.kopf .kopf__nav .wp-block-navigation-item__content.wp-block-navigation-item__content { font-size: .84rem; padding: .45rem .5rem; }
	.kopf__nav .current-menu-item > .wp-block-navigation-item__content::after { left: .5rem; right: .5rem; }
	.kopf__innen { gap: .75rem; }
}
@media (max-width: 64rem) { .kopf .wp-block-fussballkrisen-datenstand { display: none; } }

/* ---------- Inhaltsbereiche ---------- */
.fk-main { padding-block: 0; }
/* Blöcke ohne eigenen Abschnitt (z. B. ein Absatz direkt auf einer vollbreiten Seite) bekommen Luft */
.fk-main--voll > .wp-block-post-content > :where(:not(.alignfull)) { margin-block: 1.25rem; }
.fk-seiteninhalt { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem); }
.fk-seiteninhalt :where(p, li) { font-size: 1.08rem; line-height: 1.72; }
.fk-seiteninhalt :where(h2) { margin-top: 2.6em; margin-bottom: .6em; }
.fk-seiteninhalt :where(h3) { margin-top: 2em; margin-bottom: .5em; }
.fk-seiteninhalt a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fk-beitragsbild { margin-bottom: clamp(2rem, 4vw, 3rem); }
.fk-beitragsbild img { border-radius: 14px; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- Stile für Kernblöcke ---------- */
p.is-style-kicker {
	display: flex; align-items: center; gap: .65rem;
	font-family: var(--etikett-schrift); font-size: calc(.78rem * var(--etikett-mass)) !important; font-weight: 500;
	letter-spacing: calc(.12em * var(--sperrung)); text-transform: var(--versalien); color: var(--akzent); margin-bottom: .6rem;
}
p.is-style-kicker::before { content: var(--etikett-strich); width: 1.6rem; height: 1px; background: currentColor; }
p.is-style-einleitung { font-size: var(--wp--preset--font-size--gross) !important; line-height: 1.5; color: var(--titel); }
.wp-block-quote { background: var(--zitat-grund); border-radius: 0 8px 8px 0; margin-block: 2rem; box-shadow: var(--schatten-karte); }
.wp-block-quote p { font-family: var(--wp--preset--font-family--titel); font-weight: 560; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.35; color: var(--titel); letter-spacing: -.01em; }
.wp-block-quote cite { display: block; margin-top: .75rem; font-family: var(--etikett-schrift); font-size: calc(.72rem * var(--etikett-mass)); font-style: normal; color: var(--text-leise); }
.wp-block-quote.is-style-gross p { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); }
.wp-block-group.is-style-papier { background: var(--flaeche); padding: clamp(2rem, 5vw, 4rem); border-radius: 14px; }
.wp-block-group.is-style-dunkel { background: var(--buehne); color: var(--buehne-text); padding: clamp(2rem, 5vw, 4rem); border-radius: 14px; }
.wp-block-group.is-style-dunkel :is(h2, h3, h4) { color: var(--buehne-titel); }
.wp-block-button.is-style-signal .wp-block-button__link { background: var(--buehne-akzent); color: var(--auf-akzent); }
.wp-block-button.is-style-umriss .wp-block-button__link { background: transparent; color: var(--navy); border: 1px solid currentColor; }
.wp-block-button__link { transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s; }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--navy) 55%, transparent); }
.wp-block-separator { border: 0; border-top: 1px solid var(--linie); }
.wp-block-table table { font-family: var(--wp--preset--font-family--daten); font-size: .9rem; }

/* Suche */
.wp-block-search__input { border: 1px solid var(--feld-kante); border-radius: 4px; padding: .7rem .9rem; font-family: var(--wp--preset--font-family--titel); }
.wp-block-search__button { background: var(--navy); color: var(--weiss); border: 0; border-radius: 4px; padding: .7rem 1.1rem; font-family: var(--wp--preset--font-family--titel); font-weight: calc(650 * var(--gewicht-mass)); }

/* ---------- Listen: Analysen, Archive, Suche ---------- */
.fk-archiv { background: var(--flaeche); padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem); }
.fk-archiv__abfrage { width: min(100% - 2 * clamp(1rem, 4vw, 3rem), 78rem); margin-inline: auto; }
.fk-archiv__raster { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; list-style: none; padding: 0; margin: 0; }
/* Das Fluss-Layout gibt jeder Karte ab der zweiten einen Abstand nach oben (sonst sitzt die erste höher) */
.fk-archiv__raster > .wp-block-post { margin-block: 0; }
.fk-archiv__karte {
	height: 100%; display: flex; flex-direction: column; background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; overflow: hidden;
	box-shadow: var(--schatten-karte);
	transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s, border-color .3s;
}
.fk-archiv__karte:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--navy) 45%, transparent); border-color: var(--linie-stark); }
.fk-archiv__bild { margin: 0; background: var(--bild-grund); }
.fk-archiv__bild img { width: 100%; height: 100%; object-fit: cover; }
.fk-archiv__text { padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.fk-archiv__kat, .fk-archiv__kat a { font-family: var(--etikett-schrift); font-size: calc(.7rem * var(--etikett-mass)); letter-spacing: calc(.12em * var(--sperrung)); text-transform: var(--versalien); color: var(--akzent); text-decoration: none; }
.fk-archiv__titel { margin: 0; font-size: 1.3rem !important; line-height: 1.18; }
.fk-archiv__titel a { color: var(--titel); text-decoration: none; }
.fk-archiv__auszug { color: var(--text-leise); font-size: .98rem; margin: 0; }
.fk-archiv__auszug .wp-block-post-excerpt__more-link { display: none; }
.fk-archiv__datum { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--linie); font-family: var(--wp--preset--font-family--daten); font-size: .74rem; color: var(--text-leise); }
.fk-archiv__seiten { margin-top: 3rem; font-family: var(--wp--preset--font-family--titel); }
@media (max-width: 64rem) { .fk-archiv__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .fk-archiv__raster { grid-template-columns: 1fr; } }

/* ---------- Fußzeile (in beiden Stilen dunkel) ---------- */
.fuss-bereich { margin-top: 0; }
.fuss {
	background: var(--fuss); color: var(--fuss-text); padding: 4.5rem clamp(1rem, 4vw, 3rem) 2rem; font-size: .92rem; border-top: 1px solid var(--fuss-linie);
	/* Logo bleibt hier hell, auch wenn es in der Kopfzeile (Stil „Klinisch“) dunkel ist */
	--marke-punkt: var(--weiss); --marke-akzent: var(--fuss-akzent);
}
.fuss__raster { width: min(100%, 78rem); margin-inline: auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.fuss__raster > * { margin: 0 !important; }
.fuss__marke p { max-width: 22rem; margin-top: 1rem; }
.fuss__titel { font-family: var(--etikett-schrift) !important; font-size: calc(.7rem * var(--etikett-mass)) !important; letter-spacing: calc(.14em * var(--sperrung)); text-transform: var(--versalien); color: var(--fuss-titel) !important; font-weight: 500 !important; margin: 0 0 1rem !important; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fuss a { color: var(--fuss-link); text-decoration: none; }
.fuss a:hover { color: var(--fuss-akzent); }
/* Fokus-Kontur in der Fußzeile in deren Akzent (im Stil „Klinisch“ sonst Dunkelgrün auf Navy) */
.fuss :focus-visible { outline-color: var(--fuss-akzent); }
/* Copyright- und Datenquellen-Zeile: Kleingedrucktes, keine Zahlenwerte – daher Etikett-Schrift */
.fuss__unten { width: min(100%, 78rem); margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--fuss-linie); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--etikett-schrift); font-size: calc(.7rem * var(--etikett-mass)); letter-spacing: calc(.04em * var(--sperrung)); }
.fuss__unten p { margin: 0; }
@media (max-width: 52rem) { .fuss__raster { grid-template-columns: 1fr 1fr; } }