/* =============================================================================
   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;
	/* Hörer-Symbol für die Telefonnummer in der Kopfzeile (Abschnitt 12.7).
	   Als Maske eingesetzt, damit es die Textfarbe übernimmt. */
	--mf-symbol-telefon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}


/* -----------------------------------------------------------------------------
   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);
}

/* Kopfzeile auf dieselbe Kante wie der Seiteninhalt bringen.
   -----------------------------------------------------------------------------
   Ausgangslage: GeneratePress gibt `.inside-header` eine max-width von 1200px
   UND zusätzlich 32px Innenabstand. Die Wortmarke begann dadurch bei 72px,
   während Überschriften und Absätze bei 40px anfangen — die Kopfzeile stand
   sichtbar weiter innen als alles darunter (gemessen bei 1280px Fensterbreite).

   Lösung: Der Innenabstand wird auf die max-width aufgeschlagen statt von ihr
   abgezogen. Der Inhalt der Kopfzeile ist dann exakt so breit wie die „weite
   Breite" aus theme.json und beginnt an derselben Kante wie der Seiteninhalt.
   Auf schmalen Displays greift die max-width nicht; dort sorgt der Rand für
   denselben Abstand, den die Sektionen darunter haben (26px). */
.inside-header {
	--mf-header-rand: 26px;

	max-width: calc(var(--wp--style--global--wide-size, 1200px) + 2 * var(--mf-header-rand));
	padding-left: var(--mf-header-rand);
	padding-right: var(--mf-header-rand);
}

@media (min-width: 769px) {
	/* Ab Tablet ergibt sich der Rand allein aus der Zentrierung — genau wie
	   beim Seiteninhalt, der dort ebenfalls ohne Innenabstand auskommt. */
	.inside-header {
		--mf-header-rand: 0px;
	}

	/* Navigation an den rechten Rand ziehen und vom Schriftzug abrücken.
	   GeneratePress verteilt sonst nur mit `space-between`, wodurch das Menü
	   je nach Textlänge unruhig wandert. */
	.site-header .main-navigation {
		margin-left: auto;
	}

	.site-header .main-navigation .main-nav > ul {
		justify-content: flex-end;
	}

	/* Luft zwischen Wortmarke und erstem Menüpunkt. */
	.site-header .site-branding-container,
	.site-header .site-logo,
	.site-header .mf-wortmarke {
		margin-right: var(--wp--preset--spacing--lg, 44px);
	}
}

/* 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. */
/* Die Ortszeile schließt bündig mit dem Schriftzug darüber ab.
   -----------------------------------------------------------------------------
   Vorher stand sie über: „MANNufaktur" war 154px breit, die Ortszeile 203px.
   Zwei Zeilen, die unterschiedlich weit reichen, lesen sich nicht als eine
   Marke.

   Warum die Werte in em stehen und nicht in Pixeln: GeneratePress skaliert die
   Wortmarke je nach Fensterbreite (gemessen 21px bis 25px). Ein fester
   Pixelwert für die Ortszeile würde deshalb nur bei genau einer Fensterbreite
   passen — bei allen anderen stünde sie wieder über oder zurück. In em
   skaliert sie mit.

   Die Werte stammen aus einer Messung im laufenden Browser, nicht aus einer
   Schätzung: Bei 0,36em Größe ist die Ortszeile ohne Sperrung das 14,348-fache
   ihrer Schriftgröße breit, der Schriftzug das 6,226-fache seiner. Die
   verbleibende Lücke verteilt auf die 24 Zwischenräume ergibt 0,11em.

   Ändert sich der Text der Ortszeile (etwa ein vierter Standort), stimmt die
   Rechnung nicht mehr. Die Formel steht in setup/logo-erzeugen.py,
   Funktion laufweite_fuer_breite. */
.mf-wortmarke__zusatz {
	margin-top: 0.3em;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.36em;
	font-weight: 700;
	letter-spacing: 0.11em;
	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);
}

/* Ab Tablet zeigt die Nummer nur noch ein Hörer-Symbol.
   -----------------------------------------------------------------------------
   Grund: Die ausgeschriebene Nummer belegt oben rund 125px, die in der
   Kopfzeile für die Menüpunkte fehlen. Das Symbol braucht 44px.

   Wichtig für die Bedienbarkeit: Der Text wird NICHT entfernt, sondern nur
   optisch versteckt (font-size 0 am Link, Textfarbe transparent). Screenreader
   lesen die Nummer weiterhin vor, die Zwischenablage bekommt sie beim Kopieren,
   und der tel:-Link funktioniert unverändert. `title` zeigt sie beim
   Darüberfahren mit der Maus (gesetzt in inc/kopf-fusszeile.php).

   Das Symbol ist ein Inline-SVG als Maske — dadurch übernimmt es automatisch
   die Textfarbe und bleibt bei Hover und Tastaturfokus konsistent. */
@media (min-width: 769px) {
	.main-navigation .main-nav ul li.mf-menue-telefon > a {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		min-width: 44px;
		padding-left: 0;
		padding-right: 0;
		font-size: 0;
		color: transparent;
	}

	.main-navigation .main-nav ul li.mf-menue-telefon > a::before {
		content: "";
		width: 19px;
		height: 19px;
		background-color: var(--wp--preset--color--ink);
		transition: background-color var(--mf-uebergang);
		-webkit-mask: var(--mf-symbol-telefon) center / contain no-repeat;
		mask: var(--mf-symbol-telefon) center / contain no-repeat;
	}

	.main-navigation .main-nav ul li.mf-menue-telefon > a:hover::before,
	.main-navigation .main-nav ul li.mf-menue-telefon > a:focus::before {
		background-color: var(--wp--preset--color--accent-deep);
	}
}

.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;
	}
}


/* ----------------------------------------------------------------------------
   Hero auf schmalen Schirmen: das Bild wandert unter die Ueberschrift

   Der Hero besteht aus zwei Spalten — links Text, rechts das Foto. Auf dem
   Telefon stapelt WordPress sie: erst die komplette linke Spalte, dann das
   Bild. Bis dorthin sind es rund 800 Pixel Text; das Foto von Jens sieht
   niemand, der nicht scrollt. Fuer eine Beratungsseite ist das die falsche
   Reihenfolge — das Gesicht schafft das Vertrauen, nicht der dritte Absatz.

   Geloest ueber `display: contents` auf den beiden Spalten: dadurch fallen
   ihre Kaesten weg und alle Bausteine werden zu direkten Rasterzellen der
   Spaltengruppe. Erst dann laesst sich mit `order` ueber die Spaltengrenze
   hinweg sortieren — mit reinem Umstellen der Spalten ginge nur "Bild ganz
   oben", und dann stuende die Ueberschrift nicht mehr zuerst.

   Reihenfolge auf dem Telefon: Augenbraue, Ueberschrift, Foto, Namensschild,
   danach der uebrige Text und die Knoepfe.

   Die Klasse mf-hero steht im Block "Spalten" unter "Erweitert → Zusaetzliche
   CSS-Klasse". Wird sie entfernt, faellt das Layout auf das Verhalten von
   WordPress zurueck — es geht nichts kaputt, das Bild rutscht nur wieder nach
   unten.
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {
	.wp-block-columns.mf-hero {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
	}

	.wp-block-columns.mf-hero > .wp-block-column {
		display: contents;
	}

	/* Grundstellung: alles ans Ende. Danach werden drei Bausteine vorgeholt. */
	.wp-block-columns.mf-hero > .wp-block-column > * {
		order: 4;
	}

	.wp-block-columns.mf-hero > .wp-block-column:first-child > .is-style-eyebrow {
		order: 1;
	}

	.wp-block-columns.mf-hero > .wp-block-column:first-child > h1 {
		order: 2;
	}

	/* Foto und Namensschild in der Reihenfolge, in der sie im Block stehen. */
	.wp-block-columns.mf-hero > .wp-block-column:last-child > * {
		order: 3;
	}

	/* Das Foto ist in seiner Spalte das erste Element und hat deshalb keinen
	   oberen Abstand. Nach dem Umsortieren schliesst es an die Ueberschrift an
	   und braucht einen. */
	.wp-block-columns.mf-hero > .wp-block-column:last-child > :first-child {
		margin-block-start: var(--wp--preset--spacing--md);
	}
}