/* =============================================================================
   MANNufaktur — Feinschliff
   -----------------------------------------------------------------------------
   Hier steht AUSSCHLIESSLICH, was theme.json nicht ausdrücken kann:
   Fokus-Ring, Bild-Schatten und -Radien, Textauswahl, sanftes Scrollen,
   Formularfelder und die wenigen responsiven Brüche, die die Core-Blöcke
   nicht selbst lösen.

   Farben kommen immer aus den Presets der theme.json
   (var(--wp--preset--color--…)). Keine Hex-Werte in dieser Datei.
   Schriften, Größen und Abstände: siehe theme.json.
   Block-Styles (Karte, Chip, Eyebrow …): siehe assets/css/blocks.css.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Eigene Werte, die mehrfach gebraucht werden
   -----------------------------------------------------------------------------
   Der weiche Bild-Schatten der Vorlage ist bewusst ein Farbton aus der
   Palette mit Transparenz — deshalb als eigene Variable und nicht als Preset.
   -------------------------------------------------------------------------- */
:root {
	/* Weicher Schatten unter großen Bildern (Vorlage: 0 28px 60px -32px). */
	--mf-schatten-bild: 0 28px 60px -32px rgba(60, 50, 30, 0.36);
	/* Deutlich flacherer Schatten, wenn eine Karte angehoben wird. */
	--mf-schatten-hover: 0 24px 50px -28px rgba(60, 50, 30, 0.28);
	/* Radien laut Design-Kontrakt Abschnitt 5. */
	--mf-radius-bild: 18px;
	--mf-radius-button: 10px;
	/* Einheitliche Übergangszeit — ruhig, nicht hektisch. */
	--mf-uebergang: 0.35s ease;
}


/* -----------------------------------------------------------------------------
   2. Grundlagen, die theme.json nicht setzen kann
   -------------------------------------------------------------------------- */

html {
	/* Sanftes Scrollen zu Sprungmarken (z. B. „Termin vereinbaren"). */
	scroll-behavior: smooth;
	/* Sprungziele rutschen nicht unter den fixierten Header. */
	scroll-padding-top: 96px;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Überschriften brechen ausgewogen um statt mit einem einzelnen Wort
   in der letzten Zeile. Browser ohne Unterstützung ignorieren die Zeile. */
h1, h2, h3,
.wp-block-heading {
	text-wrap: balance;
}

/* Der erste Block in einem Abschnitt braucht keinen Abstand nach oben. */
.wp-block-group > :first-child,
.entry-content > :first-child {
	margin-block-start: 0;
}


/* -----------------------------------------------------------------------------
   3. Barrierefreiheit: sichtbarer Fokus (Design-Kontrakt Abschnitt 8)
   -----------------------------------------------------------------------------
   Pflicht nach BFSG/BITV. Der Ring ist bewusst waldgrün — er hebt sich sowohl
   von der Creme-Fläche als auch von den Terrakotta-Buttons deutlich ab.
   -------------------------------------------------------------------------- */

:focus-visible {
	outline: 2.5px solid var(--wp--preset--color--forest);
	outline-offset: 2px;
}

/* Mausklicks sollen keinen Ring erzeugen, Tastaturbedienung immer. */
:focus:not(:focus-visible) {
	outline: none;
}

/* Auf dunklen Sektionen (ink / forest-deep) wäre Waldgrün zu leise. */
.has-ink-background-color :focus-visible,
.has-forest-deep-background-color :focus-visible {
	outline-color: var(--wp--preset--color--accent-light);
}

/* Sprunglink „Zum Inhalt springen" von GeneratePress sichtbar machen,
   sobald er den Fokus erhält. */
.screen-reader-text:focus {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mf-radius-button);
	clip: auto !important;
	clip-path: none;
	display: block;
	font-weight: 700;
	height: auto;
	left: 16px;
	padding: 14px 22px;
	top: 16px;
	width: auto;
	z-index: 100000;
}


/* -----------------------------------------------------------------------------
   4. Textauswahl
   -------------------------------------------------------------------------- */

::selection {
	background-color: var(--wp--preset--color--accent-light);
	color: var(--wp--preset--color--ink);
}


/* -----------------------------------------------------------------------------
   5. Bilder — Radien und der weiche Schatten der Vorlage
   -----------------------------------------------------------------------------
   Alle Bilder bekommen den Karten-Radius (18px). Den weichen Schatten tragen
   nur die großen Bilder (weite und volle Breite) sowie Cover-Blöcke — genau
   wie in der Design-Vorlage.
   -------------------------------------------------------------------------- */

.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-media-text__media img {
	border-radius: var(--mf-radius-bild);
	/* Verhindert horizontales Scrollen, wenn jemand ein zu breites Bild einsetzt. */
	max-width: 100%;
	height: auto;
}

/* Runde Porträts behalten ihre Form (Block-Style „Kreis" von WordPress). */
.wp-block-image.is-style-rounded img {
	border-radius: 9999px;
}

/* Der definierte weiche Schatten — nur unter großen Bildern. */
.wp-block-image.alignwide img,
.wp-block-image.alignfull img,
.wp-block-cover.alignwide {
	box-shadow: var(--mf-schatten-bild);
}

/* Ein Bildkopf in „weiter Breite" ist eine Kachel und bekommt den Karten-Radius. */
.wp-block-cover.alignwide {
	border-radius: var(--mf-radius-bild);
	overflow: hidden;
}

/* Ein Bildkopf über die VOLLE Breite ist keine Kachel, sondern die Kante des
   Bildschirms. Gerundete Ecken waren dort sichtbar und haben den Vollbild-
   Eindruck gebrochen (gemessen: 18 px Radius an einer 1920 px breiten
   Sektion). Design-Kontrakt Abschnitt 5 vergibt Radien an Karten und Bilder,
   nicht an randlose Sektionen. Auch der Schatten entfällt: Er hätte keinen
   Rand, an dem er wirken könnte. `overflow` bleibt, damit das Cover-Bild
   innerhalb der Sektion beschnitten wird. */
.wp-block-cover.alignfull {
	border-radius: 0;
	overflow: hidden;
}

/* Galerie-Kacheln: etwas kleinerer Radius, damit das Raster ruhig bleibt. */
.wp-block-gallery .wp-block-image img {
	border-radius: 12px;
}

/* Sanfte Anhebung, wenn ein Bild verlinkt ist (also wirklich anklickbar).
   Reine Deko-Bilder bewegen sich nicht. */
.wp-block-image a:hover img,
.wp-block-image a:focus-visible img {
	transform: translateY(-3px);
	box-shadow: var(--mf-schatten-hover);
}

.wp-block-image a img {
	transition: transform var(--mf-uebergang), box-shadow var(--mf-uebergang);
}

/* Bildunterschriften nicht mit dem Schatten überlagern. */
.wp-block-image figcaption {
	margin-top: 12px;
}


/* -----------------------------------------------------------------------------
   6. Buttons — nur die Bewegung; Farben und Maße stehen in theme.json
   -------------------------------------------------------------------------- */

.wp-block-button__link {
	transition: background-color var(--mf-uebergang), border-color var(--mf-uebergang), transform var(--mf-uebergang);
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* Auf schmalen Displays sollen Buttons nicht aus dem Raster ragen. */
@media (max-width: 480px) {
	.wp-block-buttons > .wp-block-button {
		width: 100%;
	}

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


/* -----------------------------------------------------------------------------
   7. Formularfelder (Kontakt-/Buchungsformular)
   -----------------------------------------------------------------------------
   Barrierefreiheit: Der Fokus ist am Rahmen UND am Ring erkennbar,
   nicht nur an einer Farbänderung.
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mf-radius-button);
	padding: 13px 16px;
	width: 100%;
	max-width: 100%;
	transition: border-color var(--mf-uebergang);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: var(--wp--preset--color--forest);
}

::placeholder {
	color: var(--wp--preset--color--ink-faint);
	opacity: 1;
}

/* Pflichtfeld-Markierung sichtbar halten. */
label .erforderlich,
label abbr[title] {
	color: var(--wp--preset--color--accent-deep);
	text-decoration: none;
}


/* -----------------------------------------------------------------------------
   8. Breite Inhalte dürfen die Seite nie schieben
   -----------------------------------------------------------------------------
   Design-Kontrakt Abschnitt 7: bei 375px kein horizontales Scrollen.
   -------------------------------------------------------------------------- */

/* „clip" statt „hidden": hidden würde einen Scroll-Container erzeugen und
   damit jedes position:sticky im Header lahmlegen. clip tut das nicht. */
body {
	overflow-x: clip;
}

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-color: var(--wp--preset--color--line);
}

.wp-block-code,
pre {
	overflow-x: auto;
}

/* Sehr lange Wörter (z. B. E-Mail-Adressen) umbrechen statt überstehen. */
p, li, h1, h2, h3, h4 {
	overflow-wrap: break-word;
}


/* -----------------------------------------------------------------------------
   9. Responsiver Feinschliff
   -----------------------------------------------------------------------------
   Core stapelt Spalten erst unter 782px. Zwischen 782px und 960px wird ein
   Raster mit drei oder mehr Karten sehr eng — dort brechen wir auf zwei
   Spalten um. Zwei-Spalten-Layouts (Text/Bild) bleiben unangetastet,
   deshalb die :has()-Bedingung auf eine dritte Spalte.
   -------------------------------------------------------------------------- */

@media (min-width: 782px) and (max-width: 960px) {
	.wp-block-columns:has(> .wp-block-column:nth-child(3)) {
		flex-wrap: wrap;
	}

	.wp-block-columns:has(> .wp-block-column:nth-child(3)) > .wp-block-column {
		flex-basis: calc(50% - (var(--wp--style--block-gap, 26px) / 2)) !important;
		flex-grow: 0;
	}
}

/* Auf Telefonen die Sektions-Innenabstände von 104px auf 72px ziehen,
   damit die Seite nicht zur Wüste wird. Greift nur, wenn im Pattern
   der Standard-Sektionsabstand (2xl) im Block gesetzt ist. */
@media (max-width: 781px) {
	.wp-block-group[style*="padding-top:var(--wp--preset--spacing--2-xl)"],
	.wp-block-group[style*="padding-top: var(--wp--preset--spacing--2-xl)"] {
		padding-top: var(--wp--preset--spacing--xl) !important;
	}

	.wp-block-group[style*="padding-bottom:var(--wp--preset--spacing--2-xl)"],
	.wp-block-group[style*="padding-bottom: var(--wp--preset--spacing--2-xl)"] {
		padding-bottom: var(--wp--preset--spacing--xl) !important;
	}
}


/* -----------------------------------------------------------------------------
   10. Rücksicht auf Bewegungsempfindlichkeit (Barrierefreiheit)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

	.wp-block-image a:hover img,
	.wp-block-button__link:hover {
		transform: none;
	}
}


/* -----------------------------------------------------------------------------
   11. Fußleiste — Impressum und Datenschutz

   Das Menü der Position „Fußleiste" gibt das Child-Theme selbst aus
   (inc/setup.php), weil GeneratePress in der freien Version nur die
   Hauptnavigation kennt. Farben werden bewusst geerbt: So passt die Zeile zu
   der Hintergrundfarbe, die im Customizer für die Fußleiste eingestellt ist,
   und der Kontrast bleibt erhalten, egal wie sie eingestellt wird.
   -------------------------------------------------------------------------- */

.mannufaktur-fusszeile {
	margin-top: var(--wp--preset--spacing--sm);
	/* Steht unterhalb der Copyright-Zeile auf derselben dunklen Fläche
	   (siehe Abschnitt 12) und braucht denselben Abstand nach unten,
	   den GeneratePress der Copyright-Zeile nach oben gibt. */
	padding-bottom: var(--wp--preset--spacing--lg);
	text-align: center;
}

.mannufaktur-fusszeile__liste {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--sm);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
}

.mannufaktur-fusszeile__liste li {
	margin: 0;
}

/* Spezifitaet 0,1,1 — liegt knapp ueber der Link-Regel aus theme.json
   (":root :where(a...)"), damit die Fussleiste die Farbe ihres Untergrunds
   uebernimmt statt der Akzentfarbe. */
.mannufaktur-fusszeile__liste a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* GeneratePress färbt Links beim Zeigen dunkel ein (a:hover, Spezifität 0,1,1).
   Auf der dunklen Fußleiste wäre das unsichtbar. Spezifität hier 0,2,1. */
.mannufaktur-fusszeile__liste a:hover,
.mannufaktur-fusszeile__liste a:focus {
	color: var(--wp--preset--color--accent-light);
	text-decoration: none;
}


/* -----------------------------------------------------------------------------
   12. GeneratePress — die vier Stellen, die das Eltern-Theme nicht kann
   -----------------------------------------------------------------------------
   Der weit überwiegende Teil der GeneratePress-Anpassung steckt NICHT hier,
   sondern in inc/generatepress.php: Dort bekommt GeneratePress die richtigen
   Werte, und weil GeneratePress sein CSS ohnehin zuletzt ausgibt, gewinnt es
   dann mit unserem Design. Das ist der update-sichere Weg, und Redakteur:innen
   finden jede dieser Einstellungen im Customizer wieder.

   Hier steht nur, wofür GeneratePress schlicht keine Einstellung anbietet.
   Jede Regel nennt ihre Spezifität, damit nachvollziehbar bleibt, warum sie
   reicht — und warum kein !important nötig ist.
   -------------------------------------------------------------------------- */

/* 12.1 Kopfzeile: klebend, leicht durchscheinend, feine Trennlinie.
   GeneratePress (frei) kennt weder eine mitlaufende Kopfzeile noch einen
   Rahmen darunter — beides gibt es nur in der kostenpflichtigen Fassung.
   Die Cremefarbe selbst kommt aus dem Customizer (inc/generatepress.php).

   Spezifität 0,1,0 — gleichauf mit der GeneratePress-Regel `.site-header`,
   aber später im Dokument, also gewinnt diese hier.

   Zu color-mix(): Browser, die es nicht kennen, verwerfen nur diese eine
   Zeile und behalten die volle Cremefarbe aus dem Customizer. Der Ausfall
   ist damit unsichtbar statt kaputt — deshalb ohne @supports.
   Voraussetzung für das Kleben ist `overflow-x: clip` (nicht `hidden`) am
   body, siehe Abschnitt 8. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--wp--preset--color--line);
	background-color: color-mix(in srgb, var(--wp--preset--color--ground) 90%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* Untermenüs als helle Karte mit Hairline — Radius und Rahmen sind in
   GeneratePress nicht einstellbar. Farben kommen aus dem Customizer. */
.main-navigation .main-nav ul ul {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	box-shadow: var(--mf-schatten-hover);
	overflow: hidden;
}

/* Das aufgeklappte Menü auf schmalen Displays soll nicht unter der
   Kopfzeile hervorstehen. */
.main-navigation.toggled .main-nav {
	background-color: var(--wp--preset--color--ground);
}

/* 12.2 Fußleiste: die dunkle Fläche über den ganzen Fußbereich.
   GeneratePress färbt nur `.site-info` (die Copyright-Zeile) ein. Das Menü
   „Impressum / Datenschutz" gibt das Child-Theme darunter aus (inc/setup.php)
   und stünde sonst auf dem cremefarbenen Seitengrund. Die Textfarbe wird
   vererbt, damit die Zeile automatisch zur eingestellten Fußleistenfarbe passt. */
.site-footer {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--forest-light);
}

/* 12.3 Weite Blöcke: die „weite Breite" aus theme.json wiederherstellen.
   GeneratePress gleicht mit `.entry-content .alignwide` den seitlichen
   Innenabstand des Inhaltsbereichs aus (Breite = 100% + Innenabstand). Diese
   Regel greift per Nachfahren-Auswahl aber auch auf jeden weiten Block tief
   in einer Sektion und macht ihn so breit wie die Sektion — statt 1200px.
   Gemessen: 1228px statt 1200px bei 1280px Fensterbreite.

   Spezifität 0,2,0 — gleichauf mit der GeneratePress-Regel, aber später
   im Dokument. Der Wert kommt aus theme.json (settings.layout.wideSize). */
.entry-content .alignwide {
	width: auto;
	max-width: var(--wp--style--global--wide-size);
}

/* 12.4 Buttons: Innenabstand und die Umriss-Variante.

   Innenabstand — GeneratePress setzt in seiner main.css
   `.button, .wp-block-button .wp-block-button__link { padding: 10px 20px }`
   (Spezifität 0,2,0) und überholt damit die Angabe aus theme.json
   (`:root :where(...)`, nur 0,1,0). Ein Button wäre dadurch deutlich
   flacher als in der Vorlage. Der Wert wird NICHT wiederholt: er steht in
   theme.json unter settings.custom.button und kommt hier als Variable an.
   Spezifität 0,2,0, später im Dokument als main.css. */
.wp-block-button .wp-block-button__link {
	padding: var(--wp--custom--button--padding-block) var(--wp--custom--button--padding-inline);
}

/* Umriss-Variante — GeneratePress färbt jeden Block-Button ohne eigene
   Hintergrundklasse über `a.wp-block-button__link:not(.has-background)`
   (Spezifität 0,2,1) und setzt dort Fläche UND Schriftfarbe. Die Variante aus
   theme.json steht dagegen unter `:root :where(…)` und damit nur bei 0,1,0:
   Der durchsichtige Grund wurde mit Terrakotta übermalt und die dunkle
   Schrift auf Papierweiß gesetzt — der Text war praktisch unlesbar.
   Rahmen und Innenabstand bleiben in theme.json; hier kommen nur Fläche und
   Schriftfarbe zurück, beide als Preset aus theme.json.
   Spezifität 0,3,0 bzw. 0,4,0, liegt damit über der GeneratePress-Regel. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--ink);
}


/* -----------------------------------------------------------------------------
   12.5 Randloses Bild am Kopf einer Karte
   -----------------------------------------------------------------------------
   Die Personenkarten der Vorlage tragen ihr Foto randlos über die volle
   Kartenbreite. Der Bild-Block hat dafür keine Einstellung: ohne Breitenangabe
   nimmt der Browser die natürliche Bildbreite. Gemessen sah man deshalb zwei
   verschieden große Fotos (517x345 und 480x320) mit 35 px Einrückung in einer
   Karte, deren Höhen sich um 61 px unterschieden.

   Zwei Bausteine gehören zusammen und stehen deshalb hier beisammen:
   1. Die Karte selbst bekommt im Baustein ausdrücklich Innenabstand 0 —
      der Text darunter bringt seinen eigenen mit.
   2. Diese Regel zwingt das Bild auf die volle Kartenbreite. Das feste
      Seitenverhältnis kommt aus dem Block, dadurch sind beide Karten gleich
      hoch.

   Der Bildausschnitt sitzt bewusst über der Mitte (34 %): Bei Porträts liegt
   das Gesicht im oberen Drittel, mittig beschnitten wären es die Schultern.
   -------------------------------------------------------------------------- */

.mf-kartenbild {
	margin: 0;
}

.mf-kartenbild img {
	width: 100%;
	object-position: center 34%;
}

/* Beide Personenkarten gleich hoch — auch wenn in einer ein Satz mehr steht.
   In der Vorlage sitzen sie in einem CSS-Raster und werden dadurch von selbst
   gleich hoch; die Spalten des Block-Editors dehnen dagegen nur die Spalte,
   nicht die Karte darin. Gemessen: 708 px gegen 672 px. */
.wp-block-column > .mf-personenkarte {
	height: 100%;
}


/* -----------------------------------------------------------------------------
   12.6 Wortmarke in der Kopfzeile — zweizeilig und zweifarbig
   -----------------------------------------------------------------------------
   Markup: inc/kopf-fusszeile.php. GeneratePress gibt von Haus aus nur den
   einzeiligen Seitentitel aus; Schriftart, Größe und Schnitt kommen weiterhin
   aus dem Customizer (Typografie → Wortmarke).
   -------------------------------------------------------------------------- */

.mf-wortmarke a {
	display: flex;
	flex-direction: column;
	line-height: 1;
	text-decoration: none;
}

.mf-wortmarke__name {
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}

.mf-wortmarke__name strong {
	font-weight: 600;
}

.mf-wortmarke__leicht {
	font-weight: 400;
	color: var(--wp--preset--color--forest);
}

/* Die Ortszeile trägt Information („Wo arbeitet er?"), ist also kein Schmuck.
   Deshalb ink-soft (6,24:1) statt des blassen ink-faint der Vorlage (2,33:1) —
   Design-Kontrakt Abschnitt 8. */
.mf-wortmarke__zusatz {
	margin-top: 5px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}


/* -----------------------------------------------------------------------------
   12.7 Telefonnummer und Schaltfläche in der Hauptnavigation
   -----------------------------------------------------------------------------
   Beide sind ganz normale Menüeinträge (Design → Menüs), damit Jens und Qiu
   sie selbst ändern können. Erkannt werden sie an den CSS-Klassen, die im
   Menü-Editor unter „CSS-Klassen" eingetragen sind: mf-menue-telefon und
   mf-menue-cta.

   GeneratePress gibt Menülinks 74 px Zeilenhöhe. Für die Schaltfläche wird
   das zurückgenommen, sonst wäre sie so hoch wie die ganze Kopfzeile.
   -------------------------------------------------------------------------- */

.main-navigation .main-nav ul li.mf-menue-telefon > a {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.main-navigation .main-nav ul li.mf-menue-cta > a {
	display: inline-flex;
	align-items: center;
	margin: 0 0 0 6px;
	padding: 12px 16px;
	line-height: 1.2;
	font-weight: 700;
	border-radius: var(--mf-radius-button);
	background-color: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--paper);
	transition: background-color var(--mf-uebergang);
}

.main-navigation .main-nav ul li.mf-menue-cta > a:hover,
.main-navigation .main-nav ul li.mf-menue-cta > a:focus {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* Im aufgeklappten Menü auf schmalen Displays stehen die Einträge
   untereinander — dort soll die Schaltfläche nicht über die ganze Zeile
   laufen und die Nummer wieder links bündig stehen. */
.main-navigation.toggled .main-nav ul li.mf-menue-cta > a {
	margin: 8px 20px 12px;
}


/* -----------------------------------------------------------------------------
   12.8 Fußzeile — Markenblock, soziale Netzwerke, Kontaktspalte
   -----------------------------------------------------------------------------
   Markup: inc/kopf-fusszeile.php. Aufbau wie in der Vorlage: zweispaltiges
   Raster 1.6fr / 1fr, darunter die abgesetzte Copyright-Leiste (die stellt
   GeneratePress als `.site-info`, Inhalt aus dem Filter `generate_copyright`).

   Farben: auf `ink` sind laut Design-Kontrakt Abschnitt 2 nur `paper`,
   `forest-light` und `accent-light` erlaubt. Für die ruhigeren Zeilen wird
   `paper` mit dem Hintergrund gemischt statt eine sechste Farbe zu erfinden.
   -------------------------------------------------------------------------- */

.mf-fusszeile {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	padding: 64px 32px 0;
}

.mf-fusszeile__raster {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 48px;
	text-align: left;
}

.mf-fusszeile__wortmarke {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 24px;
	line-height: 1.2;
	color: var(--wp--preset--color--ground);
}

.mf-fusszeile__wortmarke strong {
	font-weight: 600;
}

.mf-fusszeile__leicht {
	color: var(--wp--preset--color--forest-light);
}

.mf-fusszeile__ort {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--forest-light);
}

.mf-fusszeile__text {
	max-width: 340px;
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
	color: var(--wp--preset--color--forest-light);
}

.mf-fusszeile__social {
	display: flex;
	gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.mf-fusszeile__social li {
	margin: 0;
}

.mf-fusszeile__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--wp--preset--color--paper) 8%, transparent);
	color: var(--wp--preset--color--forest-light);
	transition: background-color var(--mf-uebergang), color var(--mf-uebergang);
}

.mf-fusszeile__social a:hover,
.mf-fusszeile__social a:focus-visible {
	background-color: var(--wp--preset--color--forest-light);
	color: var(--wp--preset--color--ink);
}

.mf-fusszeile__supervision {
	margin: 18px 0 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

.mf-fusszeile__supervision a {
	color: var(--wp--preset--color--forest-light);
}

.mf-fusszeile__label {
	margin: 0 0 18px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--forest-light);
}

.mf-fusszeile__liste {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--wp--preset--color--paper);
}

.mf-fusszeile__liste li {
	margin: 0;
	overflow-wrap: anywhere;
}

.mf-fusszeile__liste a {
	color: var(--wp--preset--color--paper);
}

.mf-fusszeile__orte {
	color: var(--wp--preset--color--forest-light);
}

/* Copyright-Leiste: abgesetzt durch eine feine Linie, wie in der Vorlage. */
.site-info {
	max-width: var(--wp--style--global--wide-size);
	margin: 44px auto 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--paper) 14%, transparent);
}

.site-info .inside-site-info {
	padding-left: 32px;
	padding-right: 32px;
}

@media (max-width: 768px) {
	.mf-fusszeile {
		padding: 48px 24px 0;
	}

	.mf-fusszeile__raster {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.site-info .inside-site-info {
		padding-left: 24px;
		padding-right: 24px;
	}
}


/* -----------------------------------------------------------------------------
   13. Druckansicht — Beratungsangebote werden erfahrungsgemäß ausgedruckt
   -------------------------------------------------------------------------- */

@media print {
	body {
		/* Kein Hex, keine Palette: reines Papierweiss spart Toner. */
		background: white;
	}

	.wp-block-image img,
	.wp-block-cover {
		box-shadow: none;
	}
}