/* ============================================================================
   MANNufaktur — Block-Style-Varianten
   Gehoert zu inc/block-styles.php. Wird im Frontend UND im Block-Editor
   geladen (Hook "enqueue_block_assets"), damit beides identisch aussieht.

   Grundregeln dieser Datei:
   - Keine Hex-Werte. Farben ausschliesslich ueber die Presets aus theme.json
     (var(--wp--preset--color--...)), Schriftgroessen und Abstaende ebenso.
   - Farb-Zuweisungen stehen in :where(...) — dadurch haben sie die
     Spezifitaet 0. Wenn eine Redakteurin im Editor doch einmal bewusst eine
     andere Farbe waehlt (Klasse has-...-color), gewinnt ihre Wahl.
     Struktur (Rahmen, Radius, Schrift, Abstand) steht dagegen fest.
   - Jede Variante funktioniert auch auf dunklem Grund: dafuer sorgen die
     lokalen --mf-*-Variablen weiter unten, nicht der einzelne Baustein.
   ========================================================================= */


/* ----------------------------------------------------------------------------
   1) Lokale Variablen — Standardfall: heller Grund (ground / tint / surface)

   Alle Bausteine lesen ihre Farben aus diesen --mf-*-Variablen. Umgeschaltet
   wird dann nur an einer einzigen Stelle (Abschnitt 2), nicht in jedem Baustein.
   Deklariert auf body bzw. .editor-styles-wrapper, weil dort die
   theme.json-Presets sicher zur Verfuegung stehen — im Frontend wie im Editor.
   -------------------------------------------------------------------------- */
body,
.editor-styles-wrapper {

	/* Radien laut Design-Kontrakt Abschnitt 5 (dafuer gibt es keine Presets). */
	--mf-radius-card: 18px;
	--mf-radius-chip: 100px;

	/* Karten-Innenabstand: knapp ueber dem Standard-Grid-Gap (26px) — wie in der Vorlage. */
	--mf-card-padding: calc(var(--wp--preset--spacing--md) * 1.3);

	/* Farben der Bausteine auf hellem Grund. */
	--mf-heading-color: var(--wp--preset--color--ink);
	--mf-eyebrow-color: var(--wp--preset--color--accent);
	--mf-number-color: var(--wp--preset--color--ink-faint);
	--mf-chip-bg: var(--wp--preset--color--tint);
	--mf-chip-color: var(--wp--preset--color--forest-deep);
	--mf-stat-value-color: var(--wp--preset--color--forest);

	/* Beschriftung unter der Kennzahl.
	   Bewusst "ink-soft" und nicht das blassere "ink-faint" aus der Vorlage:
	   ink-faint auf dem cremefarbenen Grund ergibt gemessen 2,33:1 — nicht
	   einmal die Haelfte der 4,5:1 aus Design-Kontrakt Abschnitt 8. Und die
	   Beschriftung traegt Bedeutung ("Beratungen", "Jahre"), ist also kein
	   Schmuck. ink-soft liegt bei 6,24:1. */
	--mf-stat-label-color: var(--wp--preset--color--ink-soft);
	--mf-quote-color: var(--wp--preset--color--ink);
	--mf-quote-cite-color: var(--wp--preset--color--accent-deep);

	/* Schatten: ohne color-mix bleibt es transparent, also schlicht ohne Schatten. */
	--mf-shadow-soft: transparent;
	--mf-shadow-lift: transparent;
}

/* Aus Palettenfarben abgeleitete Toene.
   Der Kontrakt nennt fuer die Zaehlnummer einen Ton zwischen "ink-faint" und
   "line". Da im Markup und im CSS keine Hex-Werte erlaubt sind, wird er aus
   genau diesen beiden Preset-Farben gemischt. Gleiches Prinzip fuer die
   Schattenfarben — sie sind transparentes "ink", kein eigener Farbwert. */
@supports (color: color-mix(in srgb, red, blue)) {
	body,
	.editor-styles-wrapper {
		--mf-number-color: color-mix(in srgb, var(--wp--preset--color--ink-faint) 50%, var(--wp--preset--color--line));
		--mf-shadow-soft: color-mix(in srgb, var(--wp--preset--color--ink) 4%, transparent);
		--mf-shadow-lift: color-mix(in srgb, var(--wp--preset--color--ink) 26%, transparent);
	}
}


/* ----------------------------------------------------------------------------
   2) Dunkler Grund — automatische Umschaltung

   Sobald ein Baustein in einem Abschnitt mit "ink", "forest-deep" oder
   "forest" als Hintergrund sitzt (oder in einem Cover-Block, der in diesem
   Theme immer ein dunkel abgedunkeltes Bild ist), schalten die Variablen auf
   die hellen Gegenstuecke um: accent-light, paper, forest-light.

   Der Trick: Die Klasse wird auch dann erkannt, wenn sie am Baustein selbst
   haengt, weil CSS-Variablen am eigenen Element ebenso gelten wie vererbt.
   Redakteur:innen muessen also nichts umstellen — es genuegt, dem Abschnitt
   im Editor die dunkle Hintergrundfarbe zu geben.

   Hinweis fuer den Sonderfall: Ein Cover-Block mit hellem Bild/heller
   Abdunklung braucht innen eine Gruppe mit heller Hintergrundfarbe
   (siehe Abschnitt 3), sonst rechnet dieses Regelwerk mit dunklem Grund.
   -------------------------------------------------------------------------- */
.has-ink-background-color,
.has-forest-deep-background-color,
.has-forest-background-color,
.wp-block-cover {
	--mf-heading-color: var(--wp--preset--color--paper);
	--mf-eyebrow-color: var(--wp--preset--color--accent-light);
	--mf-number-color: var(--wp--preset--color--forest-light);
	--mf-chip-bg: var(--wp--preset--color--forest);
	--mf-chip-color: var(--wp--preset--color--paper);
	--mf-stat-value-color: var(--wp--preset--color--accent-light);
	--mf-stat-label-color: var(--wp--preset--color--paper);
	--mf-quote-color: var(--wp--preset--color--paper);
	--mf-quote-cite-color: var(--wp--preset--color--accent-light);
}

/* Sonderfall: Auf "forest" waere ein Chip in "forest" unsichtbar —
   dort daher die dunklere Stufe als Pillen-Hintergrund. */
.has-forest-background-color {
	--mf-chip-bg: var(--wp--preset--color--forest-deep);
}


/* ----------------------------------------------------------------------------
   3) Helle Inseln im dunklen Abschnitt — Rueckschaltung

   Eine Karte bleibt laut Vorlage auch in einer dunklen Sektion hell (z. B. die
   Terminkarten auf dunkelgruenem Grund). Damit ein Eyebrow oder eine Kennzahl
   in so einer Karte nicht faelschlich die hellen Farben erbt, werden hier die
   Standardwerte wiederhergestellt. Gleiches gilt fuer Gruppen, denen im Editor
   ausdruecklich eine helle Hintergrundfarbe gegeben wurde.
   -------------------------------------------------------------------------- */
.has-ground-background-color,
.has-tint-background-color,
.has-surface-background-color,
.has-paper-background-color,
.is-style-card,
.is-style-card-hover {
	--mf-heading-color: var(--wp--preset--color--ink);
	--mf-eyebrow-color: var(--wp--preset--color--accent);
	--mf-chip-bg: var(--wp--preset--color--tint);
	--mf-chip-color: var(--wp--preset--color--forest-deep);
	--mf-stat-value-color: var(--wp--preset--color--forest);
	--mf-stat-label-color: var(--wp--preset--color--ink-soft);
	--mf-quote-color: var(--wp--preset--color--ink);
	--mf-quote-cite-color: var(--wp--preset--color--accent-deep);
}

.has-ground-background-color,
.has-tint-background-color,
.has-surface-background-color,
.has-paper-background-color,
.is-style-card,
.is-style-card-hover {
	--mf-number-color: var(--wp--preset--color--ink-faint);
}

@supports (color: color-mix(in srgb, red, blue)) {
	.has-ground-background-color,
	.has-tint-background-color,
	.has-surface-background-color,
	.has-paper-background-color,
	.is-style-card,
	.is-style-card-hover {
		--mf-number-color: color-mix(in srgb, var(--wp--preset--color--ink-faint) 50%, var(--wp--preset--color--line));
	}
}


/* ----------------------------------------------------------------------------
   3a) Ueberschriften folgen dem Grund automatisch

   theme.json weist h1-h6 fest die Farbe "ink" zu. In einem dunklen Abschnitt
   (ink, forest-deep, forest, Cover) ergibt das rund 1,4:1 Kontrast — die
   Ueberschrift waere praktisch unsichtbar. Bisher haben die Patterns das nur
   umgangen, indem sie an JEDER Ueberschrift textColor:"paper" mitgeschrieben
   haben; fuegt eine Redakteurin dort eine neue Ueberschrift ein, fehlt das.

   Deshalb lesen Ueberschriften ihre Farbe hier aus derselben --mf-*-Variablen-
   Umschaltung wie alle anderen Bausteine (Abschnitt 2 und 3). Das wirkt auch
   bei Verschachtelung in beide Richtungen korrekt, weil CSS-Variablen vererbt
   werden — eine helle Karte in einer dunklen Sektion bekommt wieder "ink".

   Zur Spezifitaet (an WordPress 7.0 nachgeprueft): theme.json-Elementstile
   landen als schlichtes "h1{...}" im Stylesheet, Spezifitaet 0,0,1. ":root h1"
   liegt mit 0,1,1 darueber und gewinnt. Eine bewusste Farbwahl im Editor
   gewinnt weiterhin, denn die Preset-Klassen (.has-paper-color) erzeugt
   WordPress mit "!important".
   -------------------------------------------------------------------------- */
:root h1,
:root h2,
:root h3,
:root h4,
:root h5,
:root h6 {
	color: var(--mf-heading-color);
}

/* Im Editor haengt der Inhalt nicht unter :root im selben Sinne — dort sorgt
   .editor-styles-wrapper fuer dieselbe Spezifitaet. */
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
	color: var(--mf-heading-color);
}


/* ----------------------------------------------------------------------------
   4) Eyebrow — "Kleines Label (Eyebrow)" (core/paragraph)

   Das kleine Uppercase-Label ueber einer Ueberschrift.
   Bewusst ohne eigenen Aussenabstand: Der Abstand zur Ueberschrift kommt aus
   dem Blockabstand der umgebenden Gruppe, damit Patterns ihn steuern koennen.
   -------------------------------------------------------------------------- */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

:where(.is-style-eyebrow) {
	color: var(--mf-eyebrow-color);
}


/* ----------------------------------------------------------------------------
   5) Karte — "Karte" und "Karte (klickbar)" (core/group)

   Heller Kartenhintergrund, 1px Haarlinie, Radius 18px, sehr flacher Schatten.
   Die Textfarbe wird bewusst mitgesetzt: Steht die Karte in einem dunklen
   Abschnitt, dessen Text auf "paper" steht, wuerde sie sonst hellen Text auf
   hellem Grund erben. Eigene Farben an den Blocks in der Karte bleiben davon
   unberuehrt — eine direkte Angabe schlaegt immer die Vererbung.

   Der Innenabstand ist nur eine Vorgabe: Wird im Editor unter "Abstand" ein
   eigener Wert gesetzt, gewinnt dieser (WordPress schreibt ihn inline).
   -------------------------------------------------------------------------- */
.is-style-card,
.is-style-card-hover {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mf-radius-card);
	padding: var(--mf-card-padding);
	box-shadow: 0 2px 4px var(--mf-shadow-soft);
}

:where(.is-style-card, .is-style-card-hover) {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-soft);
}

/* Klickbare Karte: sanftes Anheben plus weicher Schatten.
   Bewusst auch bei :focus-within — wer per Tastatur durch die Seite geht,
   sieht dieselbe Reaktion wie mit der Maus (Design-Kontrakt Abschnitt 8).
   Kein cursor:pointer: Anklickbar ist der Link in der Karte, nicht die
   ganze Flaeche — alles andere waere ein falsches Versprechen. */
.is-style-card-hover {
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.is-style-card-hover:hover,
.is-style-card-hover:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 24px 50px -28px var(--mf-shadow-lift);
}

/* Wer Bewegung im Betriebssystem abgeschaltet hat, bekommt keine.
   Der Schatten bleibt — er ist Rueckmeldung, keine Animation. */
@media (prefers-reduced-motion: reduce) {

	.is-style-card-hover {
		transition: none;
	}

	.is-style-card-hover:hover,
	.is-style-card-hover:focus-within {
		transform: none;
	}
}


/* ----------------------------------------------------------------------------
   6) Grosses Zitat — "Großes Zitat" (core/quote)

   Serif, kursiv, gross. Ohne den Standard-Balken links, ohne Ornament.
   Die Quellenangabe des Zitat-Blocks wird zur kleinen Uppercase-Zeile.
   -------------------------------------------------------------------------- */
.wp-block-quote.is-style-quote-serif {
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xl);
	font-style: italic;
	font-weight: 400;
	line-height: 1.45;
}

/* Moegliches Anfuehrungs-Ornament aus dem Elterntheme abschalten. */
.wp-block-quote.is-style-quote-serif::before,
.wp-block-quote.is-style-quote-serif::after {
	content: none;
}

/* Die Absaetze im Zitat uebernehmen die Zitat-Typografie. */
.wp-block-quote.is-style-quote-serif p {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	line-height: inherit;
}

:where(.wp-block-quote.is-style-quote-serif) {
	color: var(--mf-quote-color);
}

/* Quellenangabe: wieder Sans, aufrecht, klein, gesperrt, Grossbuchstaben. */
.wp-block-quote.is-style-quote-serif cite,
.wp-block-quote.is-style-quote-serif .wp-block-quote__citation {
	display: block;
	margin-top: var(--wp--preset--spacing--sm);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-style: normal;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

:where(.wp-block-quote.is-style-quote-serif cite),
:where(.wp-block-quote.is-style-quote-serif .wp-block-quote__citation) {
	color: var(--mf-quote-cite-color);
}


/* ----------------------------------------------------------------------------
   7) Zaehlnummer — "Nummer 01/02/03" (core/paragraph)

   Grosse, zurueckhaltende Serif-Zahl am Kopf einer Karte. Rein dekorativ:
   Sie ersetzt keine Ueberschrift und traegt deshalb auch keine Textbedeutung.
   -------------------------------------------------------------------------- */
.is-style-number-badge {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

:where(.is-style-number-badge) {
	color: var(--mf-number-color);
}


/* ----------------------------------------------------------------------------
   8) Pill / Chip — "Pill / Chip" (core/paragraph)

   Kleines rundes Etikett fuer Termine, Orte, Schlagworte.
   inline-block sorgt dafuer, dass die Pille nur so breit ist wie ihr Text —
   auch wenn sie als eigener Absatz-Block eingefuegt wird. Liegen mehrere Chips
   in einer Gruppe mit Zeilen-Ausrichtung, stehen sie automatisch nebeneinander
   und brechen bei schmalen Bildschirmen sauber um.
   -------------------------------------------------------------------------- */
.is-style-chip {
	display: inline-block;
	width: auto;
	max-width: 100%;
	padding: var(--wp--preset--spacing--xs) calc(var(--wp--preset--spacing--xs) * 1.6);
	border-radius: var(--mf-radius-chip);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-align: center;
	overflow-wrap: anywhere;
}

:where(.is-style-chip) {
	background-color: var(--mf-chip-bg);
	color: var(--mf-chip-color);
}


/* ----------------------------------------------------------------------------
   9) Kennzahl — "Kennzahl" (core/group)

   Erwartet zwei Absaetze in der Gruppe: zuerst die Zahl ("2000+"),
   darunter die Beschriftung ("Beratungen").
   Das erste Kind wird zur grossen Serif-Zahl, alles Weitere zur kleinen
   Uppercase-Zeile. Deshalb funktioniert die Variante auch, wenn jemand eine
   dritte Zeile ergaenzt. Die Ausrichtung der Gruppe (Spalte/Zeile) bleibt
   unangetastet — sie gehoert den Redakteur:innen.
   -------------------------------------------------------------------------- */
.is-style-stat > :first-child {
	margin-block: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--2-xl);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
}

:where(.is-style-stat > :first-child) {
	color: var(--mf-stat-value-color);
}

/* Beschriftung(en) unter der Zahl.
   .block-list-appender ist der "Block hinzufuegen"-Platzhalter des Editors —
   der soll die Label-Optik natuerlich nicht bekommen. */
.is-style-stat > :not(:first-child):not(.block-list-appender) {
	margin-block-start: calc(var(--wp--preset--spacing--xs) * 0.75);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

:where(.is-style-stat > :not(:first-child):not(.block-list-appender)) {
	color: var(--mf-stat-label-color);
}