/*
Theme Name:   meteoCORE
Theme URI:    https://meteocore.com
Author:       meteoCORE
Author URI:   https://meteocore.com
Description:  Block-Theme für die Unternehmenswebsites von meteoCORE und meteoOBS. Werte und Bausteine kommen aus @meteocore/design-tokens, ausgeliefert als meteocore.css vom Logo-Host. Landing-Pages lassen sich als Foliensätze bedienen. Konzept: vision/04-Produkte/Website/wordpress-theme-konzept.md
Version:      0.1.0+c105d4cc
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.1
License:      UNLICENSED
Text Domain:  meteocore
*/

/* ===================================================================
   Signatur-CSS

   Hier steht NUR, was nicht im Paket stehen kann — alles andere kommt
   aus meteocore.css (Werte und Bausteine) und aus theme.json (Palette,
   Schriften, Maße). Wächst diese Datei, ist das ein Hinweis darauf,
   dass ein Baustein ins Paket gehört, nicht hierher.

   Zur Reihenfolge: Diese Datei wird NACH meteocore.css geladen (siehe
   functions.php). Umgekehrt verliert jede Regel hier gegen das Paket —
   derselbe Fehler wie DSG-30 in der Kontoverwaltung und in Nimbus am
   2026-09-08.
   =================================================================== */

/* Fangnetz (E16): Fällt meteocore.css aus, sind alle var(--…) ungültig
   und fallen auf ihren Anfangswert zurück — eine weiße Seite mit weißer
   Schrift. Drei feste Werte am Wurzelelement verhindern das. Sie stehen
   bewusst als Literale hier und sind die einzige erlaubte Ausnahme von
   „keine Werte von Hand" in diesem Repo.

   color-scheme gehört mit ins Netz, sonst stünden Scrollbalken und
   Formularfelder hell vor dem dunklen Notgrund. Sobald das Paket da ist,
   verliert diese Zeile: html hat Spezifität (0,0,1), das :root des Pakets
   (0,1,0) — sie greift also genau dann, wenn sie gebraucht wird. */
html {
	background: #010A0F;
	color: #E8F1F5;
	color-scheme: dark;
}

/* Sobald das Paket geladen ist, folgt die Wurzel dem Theme des Nutzers. */
html {
	background: var(--core-void, #010A0F);
	color: var(--text-primary, #E8F1F5);
}

/* color-scheme stand hier bis 2026-09-13 in vier Regeln und ist mit
   Paket 1.36.0 dorthin gewandert, wo auch die Werte stehen (DSG-50,
   DSG-61). Es folgt dort denselben Stellungen wie die Token, jetzt
   einschließlich data-theme="system". Hier bleibt nur die eine Zeile
   im Fangnetz oben — für den Fall, dass das Paket gar nicht kommt. */

body {
	font-family: var(--font-body);
	line-height: var(--lh-text, 1.55);
}

/* WordPress setzt kein globales border-box, die Blockeditor-Ausgabe
   rechnet aber damit. Der Fall, an dem es auffiel — .drawer war 32 px zu
   breit —, ist seit 1.15.0 im Baustein selbst geregelt; für das übrige
   Markup dieses Themes bleibt die Zeile hier richtig. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Der Seitengrund mit Foto und Glows ist ein Baustein des Pakets
   (.seitengrund, E5); die Klasse setzt functions.php. Hier steht nur,
   dass er die ganze Höhe trägt. */
body.seitengrund {
	min-height: 100vh;
}

/* ===================================================================
   Logos

   Im Fuß steht nichts mehr: Dort rendert der Block meteocore/logo den
   Baustein .logo aus dem Paket und gibt seine Breite als Attribut mit.
   Eine Größenregel hier wäre eine Kopie und keine Umsetzung (E19).

   Der Kopf ist der eine Ort, an dem das nicht reicht — dort führt die
   Höhe und nicht die Breite. Seine Regel steht beim Kopf, wo auch die
   Begründung dafür steht.
   =================================================================== */
/* ------------------------------------------------------------------
   Kopf und Schublade

   Die Website hat kein Benutzerkonto, also gibt es oben rechts genau
   einen Auslöser: den Burger. Er trägt eine Bedeutung — Navigation —
   und öffnet die Schublade des Pakets von rechts, wie in Nimbus und
   der Kontoverwaltung.
   ------------------------------------------------------------------ */

/* Der Kopf ist .seitenkopf aus dem Paket (seit 1.43.0) — Polster,
   Satzspiegel, beide Logogrößen und die schmale Fassung unterhalb von
   900 px. Hier bleibt die eine Zahl, die nur diese Seite kennt.

   BIS DAHIN STAND DER BAUSTEIN HIER VON HAND, und zwar mit Absicht: Am
   2026-09-14 wurde .kopfleiste aus dem Paket versucht und
   zurückgenommen. Jener Baustein IST die schmale Leiste, dieses Element
   ist auf dem Desktop etwas anderes — ein Polsterkasten mit zentrierter
   Innenzeile —, und ein Baustein, der Layout mitbringt (display,
   align-items, justify-content, gap), lässt sich nicht bedingt tragen:
   Mit ihm wurde die Leiste auf dem Desktop selbst ein Flex-Container,
   .mc-kopf__innen hörte als Flex-Element auf, die Breite zu füllen, und
   schrumpfte von 1200 auf 325 px.

   Die Lösung ist deshalb kein zweites Gesicht für .kopfleiste, sondern
   ein zweiter Baustein mit derselben schmalen Fassung (DSG-78). Die
   sieben Werte, die hier von Hand standen, folgen jetzt wieder dem
   Paket.

   Die Breite kommt weiter aus theme.json, nicht aus dieser Datei: Wer
   den Satzspiegel dort ändert, ändert ihn hier mit. */
.seitenkopf {
	--kopf-breite: var(--wp--style--global--wide-size, 1200px);
}

/* Zustand, Übergang, Schleier und das hidden-Attribut führt seit Paket
   1.39.0 der Baustein selbst (DSG-75). Hier standen dafür sieben Regeln:
   --mc-abstand samt Rückfallformel, --mc-kopfversatz, der geschlossene
   Transform, .is-offen, die zwei Varianten für die Einfahrt von oben,
   [hidden], der ganze .mc-schleier und ein eigener
   prefers-reduced-motion-Block.

   Geblieben sind die zwei Werte, die nur die Website kennt — und der
   Rückfall für den Fall ohne JavaScript. */
.drawer.mc-menue {
	/* Wie weit die Schublade vom rechten Rand einrückt. Sie fährt nicht
	   bis an den Bildschirmrand, sondern bis unter den Burger, und der
	   steht am Rand des Satzspiegels (E1: zwischen Auf und Zu wandert
	   nichts). Den Wert misst kopf.js am Burger; die Formel hier ist der
	   Rückfall ohne JavaScript und rechnet mit derselben Größe aus
	   theme.json. Das Paket rechnet ihn in den geschlossenen Zustand
	   hinein — ohne das blieb eine eingerückte Schublade um genau diesen
	   Betrag im Bild stehen. */
	--drawer-einzug: max(0px, calc((100vw - var(--wp--style--global--wide-size, 1200px)) / 2 - var(--space-4)));

	/* Eingeloggt steht über der Seite die Werkzeugleiste von WordPress.
	   Sie gehört nicht uns, also legt sich die Schublade nicht darüber,
	   sondern beginnt darunter — sonst lag ihr Schließen-Knopf hinter
	   der Leiste und war nicht mehr zu treffen. Den Wert misst kopf.js;
	   ohne JavaScript und für ausgeloggte Besucher ist er null, und
	   dann steht hier wie zuvor der Bildschirmrand. */
	--drawer-versatz: var(--mc-kopfversatz, 0px);
}

.mc-menue__liste {
	display: flex;
	flex-direction: column;
	gap: var(--space-hair);
}


/* Der Kicker über der Menüliste. Den Platz für den Schließen-Knopf hält
   seit Paket 1.38.0 die Schublade selbst frei — sie rechnet ihr
   Ankerpolster aus --drawer-close-abstand. Hier standen dafür 56 px als
   margin, einmal an der Liste und einmal am Kicker, und die zweite Regel
   nahm die erste 36 Zeilen später wieder zurück. Beides ist entfallen;
   mit dem Paketpolster wären es sonst rund 110 px Luft gewesen.

   Der Abstand unter dem Kicker im Fuß kommt seit 1.37.0 ebenfalls aus dem
   Paket (.drawer__fuss .kicker) — er stand hier zweimal wortgleich. */
.mc-menue__kicker {
	margin-bottom: var(--space-2);
}


/* Im Fließtext trägt der Strich die Information mit, nicht die Farbe
   allein (WCAG 1.4.1). In Menüs, Listen und Kacheln trägt die Position
   die Bedeutung — dort ist er überflüssig. */
/* Knöpfe sind ausgenommen: Der Unterstrich gehört dem Link im Satz, und
   ein Knopf trägt seine Bedeutung schon in der Fläche. */
.entry-content a:where(:not(.wp-element-button):not(.btn)),
.wp-block-post-excerpt a,
.wp-block-post-content a:where(:not(.wp-element-button):not(.btn)) {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: from-font;
}

.wp-block-navigation a,
.wp-block-social-link a,
.drawer__eintrag,
.seitenkopf__logo,
/* Die Folienfußzeile führt ihre Linkform selbst (Paket): leise wie der
   Rest der Zeile. Ohne diese Ausnahme gewinnt die Fließtextregel oben —
   sie wiegt gleich viel und steht später —, und die Marke wäre auf einer
   Folie das einzige unterstrichene Wort. */
.folienfuss a {
	text-decoration: none;
}

/* Die Schlusszeile trägt dieselbe Form wie auf den Rechtsseiten:
   Mono, tertiär, zentriert, ohne Trennzeichen — der Abstand trennt.
   Die Links dort sind Verweise auf Nebenwege und nehmen deshalb die
   Textfarbe der Zeile statt der Linkfarbe (E23 gilt dem Fließtext). */
.mc-schlusszeile {
	gap: var(--space-2) var(--space-5);
	margin-top: var(--space-5);
}

.mc-schlusszeile p {
	margin: 0;
}

.mc-schlusszeile a {
	color: inherit;
	text-decoration: none;
}

.mc-schlusszeile a:hover {
	color: var(--text-secondary);
}

/* Auf dem Telefon rückt der Social-Block in die Mitte.
   ------------------------------------------------------------------
   Untereinander gestapelt wechselt der Fuß sonst viermal die
   Ausrichtung: Logo und Kontakt zentriert, Menüs links, Social links,
   Schlusszeile zentriert. Die Icon-Reihe ist ein symmetrisches Element
   ohne Textkante und verträgt die Mitte; die beiden Menülisten bleiben
   links, weil eine gemeinsame linke Kante das Überfliegen trägt.

   Der Umbruchpunkt ist der von WordPress: Bei 781 px stapelt der
   Spaltenblock. Würde hier der CI-Breakpoint (768 px) stehen, gäbe es
   einen Streifen von 13 px, in dem die Spalten schon untereinander
   stehen, der Social-Block aber noch links sitzt. */
@media (max-width: 781px) {
	/* Gestapelt sind aus zwei Spalten zwei Abschnitte geworden, und
	   zwischen Abschnitten steht mehr Luft als zwischen Spalten. Die 24 px
	   des Spaltenabstands trennten den Kontaktknopf kaum von der ersten
	   Menüüberschrift — nebeneinander gibt es diesen Übergang gar nicht.
	   Nur die Zeilenlücke, nicht der ganze Abstand: Der gilt weiter auch
	   quer. */
	.mc-fusszeile .wp-block-columns {
		row-gap: var(--space-7);
	}

	/* Die beiden Menülisten rücken als Paar in die Mitte, bleiben aber in
	   sich links. Ihre gemeinsame linke Kante trägt das Überfliegen — die
	   braucht aber keine Kante der Seite zu sein. Am linken Rand stand das
	   Paar als einziges Element aus der Flucht, zwischen zentriertem Logo,
	   Kontakt, Social-Reihe und Schlusszeile. */
	.mc-fussmenues {
		justify-content: center;
	}

	.mc-social {
		align-items: center;
	}

	.mc-social .kicker {
		text-align: center;
	}

	.mc-social .wp-block-social-links {
		justify-content: center;
	}
}

/* ===================================================================
   Logokachel (Seite „Logos und Markenzeichen")

   Die Logos stehen auf einer Fläche und nicht frei auf dem Grund — aus
   einem Grund, den man erst sieht, wenn sie fehlt: Die Seite zeigt
   achtzehn Logos in drei Fassungen, sechs davon SCHWARZ und sechs
   WEISS. Jeder Seitengrund lässt eine der beiden verschwinden. Die
   Fläche ist also keine Verzierung, sondern die Bedingung dafür, dass
   die Seite zeigt, was sie zeigen will.

   Auf der alten Website leistete das `.black-bg` mit `#36383d` aus dem
   Kopf-Snippet eines Plugins. Der Wert stand in keiner Palette, und das
   CSS hing am Plugin statt am Theme — beim Wechsel wäre es lautlos
   verschwunden. Jetzt ist es die Fläche der CI, und die Klasse heißt
   nach ihrer Aufgabe (scripts/klassen-migrieren.php).

   Polster und Radius kommen dazu: Eine Fläche, die ein Logo trägt, ist
   eine Fläche und kein Zuschnitt — auf der alten Seite saß das Logo an
   der Kante.
   =================================================================== */
.mc-logokachel {
	/* Fest und NICHT --core-surface: Die Kachel trägt Logos, deren
	   Fassung feststeht. Eine Fläche, die dem Hell/Dunkel-Wechsel folgt,
	   wäre im Hellmodus hell — und dort verschwände die weiße Fassung.

	   Fest DUNKEL war sie bis Paket 1.33: --flaeche-dunkel-fest trägt
	   Weiß und Bunt, und die sechs schwarzen Logos standen darauf
	   nahezu unsichtbar (1.05:1). --flaeche-neutral-fest ist das
	   mittlere Grau, das alle drei Fassungen trägt: Schwarz 3.34:1,
	   Weiß 6.29:1, und gegen den Seitengrund steht es dunkel wie hell
	   über 3:1.

	   Heller geht es nicht. Die Wortmarke `meteo` trägt Himmelblau, und
	   dessen Luminanz (0.178) liegt genau dort, wo ein Grau liegt, das
	   Schwarz und Weiß gleich gut trägt — ab #686868 fällt das Wort in
	   den Grund. Der Ton ist deshalb der dunkelste, der Schwarz noch
	   3:1 lässt, und nicht die Mitte zwischen beiden.

	   Der Rückfall ist der bisherige Ton und kein kopierter Hex-Wert:
	   Bis 1.34.0 auf dem Logo-Host liegt, bleibt es beim dunklen Grund
	   statt bei gar keinem. */
	background: var(--flaeche-neutral-fest, var(--flaeche-dunkel-fest));
	border: 1px solid var(--core-border);
	border-radius: var(--radius-l);
	padding: var(--space-5);
}

.mc-logokachel img {
	display: block;
	width: 100%;
	height: auto;
}

/* ===================================================================
   Themenwolke (core/tag-cloud)

   Blocksatz statt Raster. Ein Raster gäbe allen Knöpfen dieselbe
   Breite, und die Themen heißen „IAM" und „meteoCORE USP" — die kurzen
   stünden in einer halbleeren Zelle. Hier bekommt jeder Knopf die
   Breite, die sein Wort braucht, und die Zeile verteilt den Rest auf
   die Zwischenräume: links und rechts eine Kante, dazwischen mal enger,
   mal weiter.

   Dafür braucht es text-align und kein Flexbox: `space-between` würde
   auch die letzte Zeile auseinanderziehen — bei zwei übrig gebliebenen
   Knöpfen stünde einer links und einer rechts, mit einem Loch dazwischen.
   Der Blocksatz lässt die letzte Zeile von sich aus in Ruhe.

   Die Zwischenräume sind die Leerzeichen zwischen den Verweisen, die
   WordPress ohnehin ausgibt; sie sind es, die sich dehnen. Deshalb
   steht hier kein gap, sondern ein Zeilenabstand.
   =================================================================== */
.mc-themenwolke {
	text-align: justify;
	line-height: 2.4;
}

/* Ohne diese Zeile stünde in der letzten Zeile ein einzelner Knopf
   über die volle Breite gespreizt — manche Browser justieren sie mit,
   wenn der Block nur aus einer Zeile besteht. */
.mc-themenwolke {
	text-align-last: left;
}

.mc-themenwolke a {
	/* Der Knopf ist ein Wort in einer Zeile, kein Kasten in einem
	   Stapel: inline-flex, damit Text und Zähler nebeneinander stehen
	   und der Knopf trotzdem auf der Textlinie sitzt. */
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	vertical-align: middle;

	/* Nur ein Teil der Knöpfe trägt einen Zähler, und der ist höher als
	   die Textzeile — gemessen 36 px gegen 33. Ohne diese Zeile steht in
	   jeder Reihe eine Stufe, sobald ein Thema mehr als einen Beitrag
	   hat. 36 ist dabei keine neue Zahl: Es ist die Höhe, die der
	   Monatsknopf im Archiv mit demselben Zähler ohnehin hat. */
	min-height: 36px;
}

/* Der Kern gibt jedem Verweis 5 px Rand nach rechts. Im Blocksatz ist
   das ein fester Sockel unter einem beweglichen Abstand — die Kante
   rechts stimmt dann nicht mehr. */
.mc-themenwolke a {
	margin-right: 0;
}

.mc-themenwolke .zaehler {
	/* Der Zähler des Pakets bringt seinen eigenen Rand mit; im Knopf
	   sitzt er am Text und nicht daneben. */
	margin: 0;

	/* Und er muss ein Flex-Kasten bleiben. Der Kern setzt
	   `.wp-block-tag-cloud span { display: inline-block }` und schlägt
	   damit das inline-flex des Bausteins — ohne Flex greifen dessen
	   align-items und justify-content nicht, und die Zahl klebt bei
	   11 px Zeilenhöhe in einer 18 px hohen Kugel oben statt in der
	   Mitte. Im Monatsarchiv steht derselbe Zähler richtig, weil ihn
	   dort keine Kernregel anfasst.

	   Zu sehen war das nur im Ergebnis: getComputedStyle meldet an einem
	   Flex-Kind den blockifizierten Wert, also `block` statt
	   `inline-block` — der Ursprung der Angabe verschwindet dabei. */
	display: inline-flex;
}

/* ===================================================================
   Beitragsanriss (Vorlage „Neuigkeiten — Anrisse")

   Ein Anriss ist ein abgetrenntes Objekt und kein Fließtext: Er trägt
   deshalb eine Fläche, und weil er über dem Seitengrund mit Foto liegt,
   ist es die Bühnen-Card (E4).

   Das Bild läuft bis an die Kartenkante — ein quadratischer Anschnitt
   mit 48 px Rand darum sähe aus wie ein gerahmtes Bild in einem Rahmen.
   Deshalb trägt die Karte kein eigenes Polster, sondern die Textspalte.
   =================================================================== */

.mc-teaser {
	padding: 0;
	overflow: hidden;
	margin-bottom: var(--space-6);
}

.mc-teaser__spalten {
	gap: 0;
	margin-bottom: 0;
}

/* Das Bild füllt seine Spalte, und zwar über absolute Positionierung:
   Die Kette Spalte → figure → a → img trägt sonst keine durchgehende
   Höhe, und height:100% verpufft an der ersten Stelle ohne Bezug. */
.mc-teaser__bild {
	position: relative;
	min-height: 260px;
	padding: 0;
}

.mc-teaser__bild .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.mc-teaser__bild .wp-block-post-featured-image a {
	display: block;
	height: 100%;
}

.mc-teaser__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Die Abstände stehen hier einzeln, nicht als ein Gap für alles: Der
   Kicker ist die Dachzeile des Titels und gehört eng an ihn — die
   Blockstile setzen dagegen 24 px margin-top an jede Überschrift, was
   zusammen mit dem Gap 36 px ergab. */
.mc-teaser__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: var(--space-6) var(--space-6) var(--space-5);
}

.mc-teaser__text > * {
	margin-block: 0;
}

.mc-teaser__titel {
	margin-top: var(--space-1);
}

.mc-teaser .wp-block-post-excerpt {
	margin-top: var(--space-3);
}

/* Der Titel ist eine Überschrift, kein Link im Satz — der Unterstrich
   aus E23 gilt dem Fließtext, hier trägt die Größe die Bedeutung.

   Die Regel gilt jedem Beitragstitel und nicht nur dem in unseren
   Karten: Auf den Presseseiten und der Startseite stehen Abfragen aus
   dem alten Theme, und dort standen die Titel bis zum 2026-09-11 in
   Linkfarbe und unterstrichen — 32 px große Fließtextlinks, obwohl der
   Block eine eigene Farbe trug. `color: inherit` statt eines festen
   Werts, damit genau diese Wahl auch durchkommt. */
.wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wp-block-post-title a:hover {
	color: var(--link);
}


.mc-teaser .wp-block-post-excerpt__more-text {
	display: none;
}

/* Der Weiterlesen-Knopf ist .btn aus dem Paket; hier steht nur, dass er
   nicht die Blockeinstellungen des Read-More-Blocks mitnimmt. */
.mc-teaser .wp-block-read-more {
	text-decoration: none;
	margin-top: var(--space-4);
}

/* Auf dem Telefon steht das Bild oben und behält sein Quadrat. */
@media (max-width: 781px) {
	/* Auf dem Telefon steht das Bild oben und trägt sein Quadrat selbst —
	   es gibt keine Textspalte mehr, an der es Maß nehmen könnte. */
	.mc-teaser__bild {
		position: static;
		min-height: 0;
	}

	.mc-teaser__bild .wp-block-post-featured-image {
		position: static;
	}

	.mc-teaser__bild img {
		aspect-ratio: 1;
		height: auto;
	}

	.mc-teaser__text {
		padding: var(--space-5);
	}
}

/* Die Anrisse der Startseite stehen unter dem Seiteninhalt und zeigen
   nur Angeheftetes — die Auswahl trifft die Redaktion über „oben
   halten", nicht über eine zweite Liste im Inhalt. */
.mc-startanrisse .kicker {
	margin-bottom: var(--space-4);
}

/* ===================================================================
   Monatsarchiv als Knopfreihe

   Eine Liste aus Textlinks liest sich wie ein Inhaltsverzeichnis; hier
   sind es Sprungziele, und die tragen Knöpfe. Der Zähler daneben sagt,
   wie viel dort liegt.
   =================================================================== */

.wp-block-archives-list {
	list-style: none;
	margin: var(--space-4) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.mc-archiv__eintrag {
	margin: 0;
}

/* Eine Knopfreihe ist keine Aufzählung.

   Das Archiv steht in der Lesestrecke, und dort gibt das Paket jeder
   Liste 22 px Einzug und jedem Eintrag 6 px Luft nach unten — richtig
   für eine Aufzählung im Fließtext, falsch für eine Reihe aus Knöpfen:
   Die stand damit um 22 px nach rechts versetzt unter ihrer Überschrift,
   und zu den 8 px Gap der Reihe kamen unten noch 6 px dazu
   (Nutzer-Befund 2026-09-12).

   Die beiden Regeln darüber verlieren, obwohl style.css nach dem Paket
   lädt: `.lesestrecke ul` ist ein Nachfahrenselektor und wiegt mehr als
   eine einzelne Klasse. Deshalb steht `.lesestrecke` hier mit davor —
   und nicht ein `!important`, das die nächste Regel wieder überbieten
   müsste.

   Die Ausnahme gehört ins Theme und nicht ins Paket: `.lesestrecke` ist
   ein Baustein des Pakets, `.wp-block-archives-list` gibt es dort nicht.
   Wer die Paketregel entschärfte, änderte sie für die Rechtsseiten und
   die Teaser-Domains mit. */
.lesestrecke .wp-block-archives-list {
	padding-left: 0;
}

.lesestrecke .mc-archiv__eintrag {
	margin-bottom: 0;
}

/* Alle Knöpfe gleich breit, und das Maß nimmt der längste Fall: September
   als längster Monatsname, dazu ein zweistelliger Zähler. Gemessen sind
   das 160 px — die Zeile bleibt damit ruhig, auch wenn „Mai 2026" neben
   „September 2026" steht, und ein zweistelliger Zähler sprengt nichts.
   Der Inhalt steht dabei links, nicht mittig: Sonst tanzen die
   Monatsnamen bei unterschiedlicher Länge in der Reihe. */
.mc-archiv__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-width: 160px;
	text-decoration: none;
}

/* ===================================================================
   Seitenzahlen

   Dieselbe Reihe wie im Monatsarchiv: Sprungziele tragen Knöpfe. Die
   laufende Seite trägt die gefüllte Ausprägung — sie ist kein Ziel,
   sondern der Stand.
   =================================================================== */

.wp-block-query-pagination {
	gap: var(--space-2);
	margin-top: var(--space-7);
}

.wp-block-query-pagination-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.btn {
	min-width: 40px;
	justify-content: center;
}

/* Die Auslassung ist kein Knopf: Sie steht für das, was übersprungen
   wird, und lässt sich nicht anklicken. */
.mc-blaetter__auslassung {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--space-1);
	color: var(--text-tertiary);
}

/* ===================================================================
   Suchfeld

   Feld, Beschriftung und Knopf sind Bausteine des Pakets (.feld,
   .feld-label, .btn) — hier steht nur, wie sie in der Zeile stehen.
   =================================================================== */

.wp-block-search__inside-wrapper {
	gap: var(--space-2);
	align-items: center;
}

.wp-block-search__input.feld {
	width: auto;
	min-width: 220px;
	flex: 1 1 auto;
}

.wp-block-search__button {
	height: 36px;
	white-space: nowrap;
}

/* ===================================================================
   Der Editor sieht, was herauskommt

   Im Frontend schiebt ein Filter die btn-Klassen vom Wrapper des
   Knopfblocks an das <a>, das man tatsächlich sieht (functions.php).
   Der Editor hat keinen solchen Filter — dort bleiben sie am Wrapper,
   und das Innere trägt weiter die Kernform. Ergebnis wäre ein Knopf
   im Knopf: außen die Paketform, innen die blaue Kernfläche.

   Die Antwort ist kein zweiter Satz Werte, sondern eine Leerung: Der
   Wrapper trägt hier die echte Paketform, das Innere gibt seine
   eigene ab. Damit zeigt der Editor genau das Ergebnis, ohne dass
   eine einzige CI-Angabe zweimal im Haus steht.

   Im Frontend läuft die Regel ins Leere, weil der Wrapper dort keine
   btn-Klasse mehr trägt — sie darf deshalb hier stehen und braucht
   keinen eigenen Auslieferungsweg.
   =================================================================== */

.wp-block-button.btn > .wp-block-button__link {
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	padding: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
}

/* ===================================================================
   Foliensätze im Editor

   Im Frontend nimmt der Foliensatz die volle Höhe und schnappt ein. Im
   Editor wäre beides im Weg: Man sieht dann immer nur eine Folie und
   kann nicht zwischen ihnen scrollen, ohne dass es springt.

   Die Folien behalten ihre Höhe — beim Schreiben soll man sehen, wie
   viel auf eine Folie passt —, aber sie stehen untereinander in einem
   Container, der so hoch ist wie sein Inhalt.

   Die Regel hängt an .editor-styles-wrapper und greift damit nur dort.
   =================================================================== */

.editor-styles-wrapper .folien {
	height: auto;
	overflow: visible;
	scroll-snap-type: none;
}

.editor-styles-wrapper .folie {
	/* Ohne Bezugshöhe wüsste `min-height: 100%` nicht, wovon 100 Prozent —
	   im Editor ist die Folienhöhe deshalb wieder die des Sichtfensters. */
	min-height: 100dvh;
	outline: 1px dashed var(--core-border-strong);
	outline-offset: -1px;
}

/* ===================================================================
   Eine Seite, die nur Folien trägt

   Der Foliensatz bringt sein eigenes Scrollen mit. Alles, was das
   Template zusätzlich an Höhe erzeugt — Seitenpolster, Abstände
   zwischen den Blöcken, der Innenabstand des Inhaltsbereichs —, macht
   daraus zwei Scrollbereiche übereinander: Man blättert eine Folie
   weiter und die Seite darunter rutscht mit.

   Gemessen war das Dokument 1456 px hoch bei 723 px Fenster, also
   genau eine Folienhöhe zu viel.
   =================================================================== */

/* NUR im Folienmodus, also ab 900 px.
   
   Darunter wird gelesen: Der Foliensatz gibt sein eigenes Scrollen ab
   (height auto, kein Einschnappen), und die Seite übernimmt es. Ein
   `overflow: hidden` an Rumpf und Wurzel nimmt es dann beiden — der
   Scrollbalken verschwindet und die Seite lässt sich nicht mehr
   verschieben, auf dem Telefon also unbenutzbar (Nutzer-Befund
   2026-09-10).

   Auch das Wurzelelement, nicht nur der Rumpf: WordPress schiebt die
   Seite für die Adminleiste um 32 px nach unten (`html { margin-top }`),
   und diese 32 px scrollen sonst als eigener kleiner Weg mit — sichtbar
   nur für Angemeldete, aber genau die bearbeiten die Folien. */
@media (min-width: 900px) {
	.mc-folienseite,
	html:has(> body.mc-folienseite) {
		overflow: hidden;
	}
}

.mc-folienseite .wp-site-blocks > *,
.mc-folienseite .entry-content,
.mc-folienseite main {
	margin-block: 0;
	padding: 0;
	max-width: none;
}

/* Die Adminleiste steht über der Seite und nimmt ihr Höhe weg. Ohne
   diese Zeile ist jede Folie genau um deren 32 px zu hoch — sichtbar
   als Scrollen INNERHALB einer eingerasteten Folie.

   Gesetzt wird die Eigenschaft und nicht die Höhe: Aus ihr rechnet der
   Baustein auch die Breite der Folie (16:9), und die soll dieselbe
   Grundlage haben. */
.mc-folienseite .folien {
	--folien-hoehe: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

/* ===================================================================
   Raster statt Fluss

   Das Folienraster ist ein Grid, WordPress hält es für eine gewöhnliche
   Gruppe und gibt jedem Kind ab dem zweiten einen Abstand nach oben
   (`.is-layout-flow > * + *`). Im Fluss ist das richtig, im Raster
   verschiebt es die zweite und dritte Spalte gegen die erste — auf der
   Folie „Wer heute wofür zahlt" standen die Karten um 24 px versetzt.

   Den Abstand zwischen den Spalten führt das Raster selbst.
   =================================================================== */

.folienraster > * {
	margin-block-start: 0;
}

/* Eine Spalte im Raster ist keine Lesestrecke.

   Der Editor legt jede neue Gruppe mit „Inhaltsbreite" an
   (is-layout-constrained), und das bringt zwei Dinge mit, die für den
   Seiteninhalt gedacht sind:

   1. has-global-padding — der Seitenrand von 24 px, links und rechts.
      Die Textspalte stand damit eingerückt gegen den Folientitel.
   2. Eine Höchstbreite je Kind in Inhaltsbreite (760 px), mittig
      gesetzt. Das fällt erst auf, wenn die Spalte breiter wird: Mit
      Präsentationsfaktor 2 ist sie 925 px breit, und jeder Absatz rückte
      um 82 px ein (gemessen 2026-09-16 bei 1920 × 1023). In einem
      kleineren Fenster ist die Spalte schmaler als 760, dort stimmte es
      — deshalb sah nur die Vollbildfassung falsch aus.

   Genommen wird nur, was WordPress setzt: Ein von Hand gewählter
   Innenabstand steht als style-Attribut am Element und bleibt stärker.
   Die Ränder der Kinder brauchen kein !important gegen WordPress'
   `margin: auto !important` — ohne Höchstbreite füllt das Kind die
   Spalte, und auto ergibt null. */
.folienraster > .has-global-padding {
	padding-inline: 0;
}

.folienraster > .is-layout-constrained > * {
	max-width: none;
}

/* Und dasselbe eine Ebene höher: wenn das Raster SELBST eine Gruppe mit
   Inhaltsbreite ist — eine Gruppe, der im Editor die Klasse
   `folienraster` gegeben wurde, statt den Raster-Block zu nehmen. Dann
   begrenzt WordPress nicht die Absätze, sondern die Spalten auf 760 px
   und zentriert sie in ihrer Spur. So stand es auf meteocore.com
   (Folie 01, 2026-09-16): Spuren von 856 px, Spalten von 760, die linke
   48 px rechts vom Folientitel.

   Hier braucht es das !important: Ein Rasterelement mit automatischen
   Rändern dehnt sich nicht auf seine Spur, sondern schrumpft auf seinen
   Inhalt und steht mittig — die Höchstbreite allein zu nehmen, reichte
   also nicht. WordPress setzt die Ränder selbst mit !important. */
.folienraster.has-global-padding {
	padding-inline: 0;
}

.folienraster.is-layout-constrained > * {
	max-width: none;
	margin-inline: 0 !important;
}

/* ===================================================================
   Der Präsentationsfaktor erreicht auch WordPress' Größen

   Das Paket skaliert die Folienschrift, indem `.praesentation` die
   Token --fs-* neu setzt. WordPress' eigene Größen (`has-m-font-size`
   und Geschwister) greifen aber nicht auf die Token zu, sondern auf
   `--wp--preset--font-size--m` — und die steht am :root mit dem Wert
   `var(--fs-m)`.

   Eine Custom Property wird dort aufgelöst, wo sie DEKLARIERT ist, nicht
   dort, wo sie benutzt wird. Am :root gilt der Faktor nicht, also blieb
   jede über den Editor gewählte Schriftgröße auf ihrem Grundwert
   stehen: Der Kartentext stand bei 14 px, während der Fließtext daneben
   mitwuchs (Nutzer-Befund: „Schrift in den Flächen zu klein").

   Deshalb hier noch einmal, an derselben Stelle wie der Faktor.
   =================================================================== */

.praesentation {
	--wp--preset--font-size--xs: var(--fs-xs);
	--wp--preset--font-size--s: var(--fs-s);
	--wp--preset--font-size--sm: var(--fs-sm);
	--wp--preset--font-size--m: var(--fs-m);
	--wp--preset--font-size--l: var(--fs-l);
	--wp--preset--font-size--xl: var(--fs-xl);
	--wp--preset--font-size--2xl: var(--fs-2xl);
	--wp--preset--font-size--3xl: var(--fs-3xl);
	--wp--preset--font-size--4xl: var(--fs-4xl);
	--wp--preset--font-size--5xl: var(--fs-5xl);
}

/* ===================================================================
   Auf dem Telefon ist ein Deck ein Artikel

   Ein Foliensatz im Vollbild ist eine Präsentation: Kopf und Fuß der
   Website wären dort Störung, man blättert und schaut zu.

   Im Hochformat trifft nichts davon zu. Dort wird gescrollt und
   gelesen, und eine Seite ohne Kopf und Fuß ist eine Sackgasse — kein
   Menü, kein Weg zurück, kein Impressum. Der Rahmen der Website
   erscheint deshalb, sobald der Foliensatz seine Folienmechanik
   abgibt.

   Umgekehrt formuliert, weil es der seltenere Fall ist: Ab 900 px
   verschwindet er wieder.
   =================================================================== */

@media (min-width: 900px) {
	.mc-folienseite > .wp-site-blocks > header,
	.mc-folienseite > .wp-site-blocks > footer {
		display: none;
	}
}

/* Was zur Folie gehört, aber nicht zum Artikel: die Fußzeile mit Marke
   und Seitenzahl. „3 / 8" zählt Folien — in einem durchgescrollten Text
   zählt niemand mit, und die Marke steht unten im Seitenfuß.

   Die Punkte gehen mit: Acht Schaltflächen quer über den unteren Rand
   verdecken auf einem Telefon eine Textzeile, und wer scrollt, braucht
   keine Sprungziele. Der Fortschrittsbalken oben bleibt — er nimmt
   keinen Platz und beantwortet die einzige Frage, die sich hier stellt:
   wie viel noch kommt. */
@media (max-width: 899px) {
	.mc-folienseite .folienfuss,
	.mc-folienseite .folien__punkte {
		display: none;
	}
}

/* ===================================================================
   Ein Beitrag

   Die Reihenfolge folgt der Website, wie sie heute steht: Titelbild,
   Datum, Titel, Angaben, Text, Schlagworte. Gegenüber der alten
   Vorlage tragen Bild und Schlagworte eine Form — vorher standen sie
   gar nicht da.

   Das Datum ist der Kicker, wie in der Anrissliste (E3): Wer von der
   Übersicht kommt, findet über der Überschrift dieselbe Angabe an
   derselben Stelle.
   =================================================================== */

/* Das Titelbild ist eine Bühne, keine Illustration.

   Auf Inhaltsbreite und in seinem eigenen Format sah es aus wie ein
   Bild IM Text — 760 px breit, mitten zwischen Kopf und Überschrift.
   Ein Titelbild steht vor dem Text, nicht darin.

   Die Bühne hat zwei Gestalten, und die Grenze ist nicht die Breite
   des Fensters, sondern seine Form:

   Hoch — Telefon, Tablet im Portrait — zeigt das ganze Bild von Rand
   zu Rand. Es gibt dort keine zweite Spalte, neben die etwas passen
   könnte, also ist das Bild die Seite. Kein Rahmen, kein Radius: Eine
   Fläche, die den Rand berührt, hat dort keine Ecke.

   Quer ist es ein gerahmtes Band in der weiten Breite — dieselbe
   Kante wie das Logo links und der Burger rechts, weil es derselbe
   Wert ist (wide-size). Volle Breite hatten wir, und sie kostet zu
   viel: Ein 16:9-Bild auf 1905 px, auf ein Band gedeckelt, zeigt noch
   ein Drittel seiner Höhe. Bei einem Motiv, das aus seinem Umraum
   lebt, bleibt davon keine Aussage übrig. Auf 1200 px ist es knapp
   die Hälfte — derselbe Schnitt, aber am Bild und nicht am Motiv. */
.mc-titelbild {
	/* Das Band geht bis an die Kante, der Text nicht. Zwischen beiden
	   braucht es mehr Luft als zwischen zwei Absätzen — sonst liest
	   sich das Datum wie eine Bildunterschrift. */
	margin-bottom: var(--space-7);
}

/* Hoch schließt das Bild an die Kopfzeile an, ohne Fuge.

   Die Leiste hat dort einen eigenen Grund und eine Linie darunter; sie
   ist eine Kante, keine Zeile im Fluss. Ein Bild, das von Rand zu Rand
   läuft, gehört an diese Kante — die 24 px Blockabstand dazwischen
   ließen die Leiste schweben.

   Nur wenn der Beitrag auch wirklich mit einem Titelbild anfängt:
   Steht dort Text, ist der Abstand richtig. */
@media (max-width: 899.98px) {
	main:has(> .mc-titelbild:first-child) {
		margin-top: 0;
	}
}

.mc-titelbild img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: var(--mc-bildausschnitt, center);
}

@media (min-width: 900px) {
	/* Dieselbe Mechanik wie im Kopf: außen die Seitenkante, innen die
	   weite Breite. Deshalb stehen die Kanten des Bandes genau unter dem
	   Logo und unter dem Burger — bei jeder Fensterbreite, nicht nur
	   oberhalb von 1200 px.

	   Element plus zwei Klassen, und das mit Absicht: Die negativen
	   Ränder, die das Band bis an den Fensterrand ziehen, kommen von
	   `.has-global-padding > .alignfull` — zwei Klassen. Ein einzelnes
	   .mc-titelbild verliert gegen sie, und ein Gleichstand hinge daran,
	   welches Stylesheet WordPress zuletzt ausgibt. Das `main` davor
	   bindet die Regel an die Rolle und nicht an die Vorlage: Beitrag
	   und Seite tragen dasselbe Band.

	   Die negativen Ränder bleiben also stehen; das Polster innen setzt
	   die Kante. Der Kopf polstert mit 16 px, weil der Schließen-Knopf
	   der Schublade über dem Burger liegen muss — dieselbe 16 px hier. */
	main > .alignfull.mc-titelbild {
		padding-inline: var(--space-4);
	}

	/* Rahmen und Radius sitzen am Bild, nicht am Block: Dann braucht es
	   kein overflow, und die Ecken folgen dem, was man sieht. */
	.mc-titelbild img {
		box-sizing: border-box;
		max-width: var(--wp--style--global--wide-size, 1200px);
		margin-inline: auto;
		border: 1px solid var(--core-border);
		border-radius: var(--radius-l);

		/* Der Deckel ist der eigentliche Regler, nicht das Format: Er
		   hält die Überschrift auch bei flachen Fenstern über der Kante.
		   Unter der weiten Breite greift das Format, darüber der
		   Deckel. */
		aspect-ratio: 16 / 5;
		max-height: 36dvh;
	}
}

/* Autor und Rubrik stehen in einer Zeile unter dem Titel: Sie gehören
   zum Beitrag, nicht zu seiner Überschrift — Mono und leise, wie jede
   Angabe, die man nachschlägt statt liest. */
.mc-beitrag__angaben {
	font-family: var(--font-mono);
	font-size: var(--fs-s);
	color: var(--text-tertiary);
	margin-top: var(--space-3);
}

.mc-beitrag__angaben a {
	color: inherit;
	text-decoration: none;
}

.mc-beitrag__angaben a:hover {
	color: var(--text-secondary);
}

/* Die Schlagworte sind Sprungziele in ein Archiv, genau wie die
   Monatsknöpfe darunter — und tragen deshalb dieselbe Form. Ein
   Textlinkteppich am Fuß eines Beitrags war die Darstellung, die dort
   schon einmal ersetzt wurde. */
/* Ohne Trennlinie: Der Abstand trennt genug, und eine Linie quer über
   den Satzspiegel setzt einen Schnitt, wo nur ein Nachsatz folgt. */
.mc-beitrag__schlagworte {
	margin-top: var(--space-7);
}

.mc-beitrag__schlagworte .wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.mc-beitrag__schlagworte a {
	text-decoration: none;
}

/* Der Trenner des Blocks entfällt: Zwischen zwei Knöpfen steht der
   Abstand, kein Zeichen. */
.mc-beitrag__schlagworte .wp-block-post-terms__separator {
	display: none;
}

/* ===================================================================
   Die Überschrift einer Kachel

   Auf einer Folie stimmt sie von selbst: `theme.json` führt jede
   Überschrift in der Anzeigeschrift. In einer Lesestrecke nicht — dort
   sind h3 bis h6 laut Paket Rubrikzeilen in Mono, Versalien und
   Markenton (E3). Und `.lesestrecke h4` ist ein Nachfahrenselektor, wiegt
   also mehr als jede Klasse, die der Block mitbringen könnte: Die Kachel
   trug ihren Titel als Kicker, zweizeilig umbrochen und orange.

   Die bessere Stelle wäre das Paket — dass eine Prosaüberschrift nicht in
   einen Baustein hineingreift, gilt für jede Card auf jeder Leseseite,
   nicht nur für diesen Block (`DSG-79`). Bis dahin steht die Ausnahme
   hier, an der Blockklasse, die das Paket nicht kennt — dasselbe Muster
   wie bei der Knopfreihe des Archivs weiter oben.

   Der Satz steht zweimal da, einmal mit `.lesestrecke` davor. Ohne die
   zweite Fassung verliert er genau dort, wo er gebraucht wird; ein
   `!important` müsste die nächste Regel wieder überbieten.

   Die Größe steht hier und nicht als gewählte Stufe im Block — sie ist
   die Grundgröße. Wer im Editor eine andere wählt, bekommt sie, aber auf
   einer Folie nur oberhalb von 900 px (Abschnitt darunter).
   =================================================================== */
.wp-block-meteocore-kachel {
	/* Die beiden Grundgrößen der Kachel, an einer Stelle — die Regel
	   hier und die für das Telefon darunter lesen beide davon. Der Text
	   steht auf m und nicht auf sm: In der Fläche einer Folie liest sich
	   eine Stufe darunter zu klein (dieselbe Festlegung wie in der
	   Blockvorlage, blocks/kachel/editor.js). */
	--kachel-titel: var(--fs-xl);
	--kachel-text: var(--fs-m);
}

.wp-block-meteocore-kachel :is( h1, h2, h3, h4, h5, h6 ),
.lesestrecke .wp-block-meteocore-kachel :is( h1, h2, h3, h4, h5, h6 ) {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--kachel-titel);
	line-height: var(--lh-tight);
	text-transform: none;
	letter-spacing: normal;
	color: var(--text-primary);
	margin: 0;
}

/* ===================================================================
   Auf dem Telefon hat die Kachel wieder ihre Grundgröße

   Eine im Editor kleiner gewählte Schrift ist auf einer Folie eine
   Entscheidung für die Projektion: Die Folie hat eine feste Höhe, und
   vier Kacheln mit Text sprengen sie. Unter 900 px gibt es diese Höhe
   nicht mehr — der Präsentationsfaktor fällt auf 1, die Folie wird eine
   Seite, die man scrollt (E15). Die gewählten 14/11 px standen dort
   dann wörtlich, kleiner als jeder Fließtext daneben.

   Deshalb gilt die Wahl nur, solange die Folie eine Folie ist. Das
   !important ist hier keine Bequemlichkeit: WordPress setzt jede
   gewählte Stufe selbst mit !important (`.has-m-font-size`), und
   dagegen hilft nur dasselbe mit mehr Gewicht.

   Nur in der Kachel und nur auf der Folie. Außerhalb einer Folie gibt
   es keine Höhe, die eine kleinere Schrift rechtfertigen müsste, und
   dort ist eine gewählte Größe gemeint, wie sie gewählt wurde. Eine
   Merkzeile ist bewusst nicht dabei: Ihre Größen stehen im Paket
   (.merkzeile__titel, .merkzeile__text), und eine Kopie davon hier
   wäre eine zweite Quelle.
   =================================================================== */
@media (max-width: 899.98px) {
	.folie .wp-block-meteocore-kachel :is( h1, h2, h3, h4, h5, h6 ) {
		font-size: var(--kachel-titel) !important;
	}

	.folie .wp-block-meteocore-kachel p {
		font-size: var(--kachel-text) !important;
	}
}

/* ===================================================================
   Wettersymbol
   -------------------------------------------------------------------
   Der Block gibt die Kantenlänge als Inline-Angabe mit, weil sie am
   Einsatz hängt und nicht am Zeichen. Hier steht nur, dass das SVG
   seine Hülle ausfüllt — ohne das zeichnete es in seiner eigenen
   Größe, und die Angabe im Block liefe ins Leere.

   Keine Farbe: Die Wettersymbole tragen ihre eigenen Token, die
   Meldungs- und Warngruppenzeichen erben currentColor vom Text.
   =================================================================== */
.mc-wettersymbol {
	line-height: 0;
}

/* Die Größe steht an dieser Ebene und nicht am Block: So kann der Block
   eine Fläche mit eigener Größe tragen — die Kachel der Merkzeile ist
   40 × 40, das Zeichen darin 20. */
.mc-wettersymbol__zeichen {
	display: inline-block;
	line-height: 0;
}

.mc-wettersymbol__zeichen svg {
	display: block;
	width: 100%;
	height: 100%;
}