/*
Theme Name: GFO
Theme URI: https://gfo.ch
Author: nekosys
Description: Block Theme für GFO Unternehmensberatung AG.
Version: 3.16.0
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 8.2
License: proprietär
Text Domain: gfo
*/

/* --- Basisschicht ---------------------------------------------
   Fuenf Dinge, die WordPress nicht mitbringt und die jede Seite
   braucht. Die erste ist keine Kosmetik: der Kopf steht sticky,
   ohne diese Angabe verschwindet jedes Sprungziel unter ihm. */
/* Die Vorlage setzt border-box global; WordPress tut das nur fuer
   seine eigenen Bloecke. 163 Elemente der Seite standen auf
   content-box, acht davon mit Polster — beim Kontaktknopf ergab das
   44px Mindesthoehe plus zweimal 14px Polster: 72 statt 45. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 5.5rem;
}

/* Die Vorlage setzt "* { margin: 0 }" und regelt jeden Abstand selbst.
   Global uebernehmen laesst sich das nicht: WordPress stellt die
   Abstaende zwischen seinen Bloecken ueber margin-block-start her, und
   ein pauschaler Reset nimmt sie mit.

   Betroffen ist genau, was in rohen HTML-Bloecken steht — Register,
   Gruppen, Grafiken, der Hero. Diese Elemente tragen keine
   wp-block-Klasse, WordPress' Layoutabstand greift bei ihnen nicht,
   und ohne Reset bleibt der Browserstandard stehen: der Hero-Titel
   trug 41px oben und unten, die Einleitung darunter begann 69 statt
   28 Pixel unter ihm. */
/* :where() statt eines Elementselektors: die Regel bekommt damit die
   Spezifitaet 0-1-0 — gleich wie .hero__lead und die uebrigen
   Bausteinregeln, die weiter unten stehen und darum gewinnen. Mit
   "main :is(...)" waere sie spezifischer gewesen und haette auch die
   gewollten Abstaende der Vorlage geloescht: Titel und Lead klebten
   dann aneinander. */
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote):not([class*="wp-"]) {
	margin-block: 0;
}

/* Dieselbe Nullung fuer Bausteine, die als Core-Bloecke im Editor
   stehen: sie tragen wp-block-heading oder wp-block-paragraph und
   fallen darum aus der Regel oben. Ihre Abstaende bestimmt der
   Baustein, in dem sie sitzen — im Registereintrag sind das die
   22 Pixel Polster des <li>, nicht zusaetzlich 23 Pixel Aussenabstand
   der Ueberschrift. Ohne das mass ein Eintrag 179 statt 129 Pixel. */
:where(.register, .schritte, .reihe, .gruppe, .unterlage, .publikationen,
	.netzwerk, .partner, .person, .nutzen__liste, .weiter__register)
	:is(h2, h3, h4, p, ul, ol, dl) {
	margin-block: 0;
}

/* Zeilenhoehe der Einzeiler.
   WordPress setzt eine globale Zeilenhoehe von 1.6, die Vorlage nicht —
   sie gibt sie nur dort, wo Text in Absaetzen laeuft. Alles andere
   erbte sie hier und wurde vier bis fuenf Pixel hoeher als vorgesehen:
   ein Name, ein Kuerzel, eine Beschriftung, eine Dossiernummer. Bei der
   Angabenliste summierte sich das auf dem Telefon auf 21 Pixel je
   Person, weil dort jede Beschriftung eine eigene Zeile bekommt.

   Nur Elemente, die eine Zeile lang sind. Fliesstext steht ausdruecklich
   nicht in dieser Liste — dort ist die geerbte Hoehe die richtige. */
.person__name,
.person__rolle,
.person__kontakt,
.person__angaben dt,
.publikationen__nr,
.partner__name,
.partner__link,
.unterlage__art,
.unterlage__titel,
.register__nr,
.weiter__nr,
.weiter__titel,
.weiter__pfeil,
.kontakt__knopf,
.knopf,
.mehr,
.haltung__cta,
.reihen .p {
	line-height: normal;
}

/* Das Logo steht in einer <figure>, die das Bild als Inline-Inhalt
   fuehrt und darum den Zeilenraum ihrer Umgebung dazubekommt — der
   Kopf mass 79 statt 73 Pixel. Flex nimmt das Bild aus dem Zeilenfluss,
   und der Kasten ist wieder so hoch wie das, was drinsteht. */
.kopf__logo,
.fuss__logo {
	display: flex;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

::selection {
	background: var(--wp--preset--color--akzent);
	color: #fff;
}

/* Sprunglink: WordPress setzt ihn in Block-Themes selbst an den
   Dokumentanfang und laesst ihn auf das erste <main> zeigen — hier
   also auf #inhalt. Ein zweiter eigener waere eine Tabulatorstation
   mehr fuer dieselbe Sache. Darum nur die Gestaltung, die WordPress
   mit hellgrauem Grund und Systemschrift sonst danebensetzt. */
.skip-link.screen-reader-text:focus {
	left: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
	top: 0.5rem;
	background: var(--wp--preset--color--tinte);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	line-height: 1.4;
	z-index: 99;
}

/* Nur fuer Vorlesesoftware sichtbar. */
.vh {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Wer Bewegung abbestellt hat, bekommt keine. Das Theme animiert
   sonst Umrandungen, Verschiebungen und aufklappende Menues ungebremst. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* --- Flaechen stossen aneinander --------------------------------
   WordPress setzt zwischen Bloecke im constrained-Layout 24 Pixel
   Abstand (--wp--style--block-gap). Zwischen den Flaechen ist das
   falsch: sie sollen ohne Fuge aneinanderstossen, der Farbwechsel
   selbst ist die Gliederung. Mit der Luecke dazwischen sah der
   Papierstreifen aus wie ein weiterer, leerer Abschnitt — und die
   Trennlinie ueber dem hellen Block schwebte darin.

   Die Sektionen sind der Inhalt der Seite; die Regel gilt darum fuer
   direkte Kinder von main und des Inhaltsrahmens, nicht pauschal. */
/* :root davor, weil WordPress' Regel ":root :where(.is-layout-
   constrained) > *" die Spezifitaet 0-1-0 hat und "main > section"
   nur 0-0-2. Ohne den Zusatz griff die Regel nur beim ersten Kind —
   das WordPress ohnehin ausnimmt — und die letzten beiden Flaechen
   behielten ihre Fuge. */
:root main > section,
:root main > .entry-content > section,
:root main > .entry-content,
/* Kopf und Fuss ebenso: die Akzentflaeche beginnt direkt unter der
   Kopfzeile, das dunkle Band endet an der Fusszeile. Ein
   Papierstreifen dazwischen laesst beide wie abgeschnitten aussehen. */
:root .wp-site-blocks > main,
:root .wp-site-blocks > footer {
	margin-block-start: 0;
}

/* --- Flaechen -------------------------------------------------
   Drei Gruende statt einem. Sie wechseln nicht der Abwechslung
   wegen, sondern markieren den Rang: die Akzentflaeche sagt "hier
   bist du", der gedeckte Grund traegt den Kern der Seite, der
   dunkle schliesst sie ab.

   Jede Flaeche setzt ihre eigenen Werte als lokale Variablen. Wer
   stattdessen Ausnahmen aufzaehlt (.kontakt .marke, .nutzen .marke,
   ...), vergisst beim naechsten Grund eine. In der Vorlage war das
   zweimal derselbe Fehler: der Fokusring stand fest auf --akzent und
   wurde auf elf Seiten unsichtbar, als der Seitenkopf die
   Akzentflaeche bekam; der Strich des Randlabels haette es ihm
   gleichgetan. Beide messen dann 1.00:1. */
:root {
	/* Zeilenlaenge des Fliesstexts. 66 Zeichen ist die Mitte des
	   Bereichs, in dem das Auge die naechste Zeile noch sicher
	   findet — die Vorlage nennt denselben Wert. Ohne diese Angabe
	   fiel jede max-width-Regel aus, die sie benutzt, und der Text
	   lief ueber die volle Bahnbreite: .satz__text mass 1179 statt
	   627 Pixel. */
	--mass: 66ch;

	--flaeche: var(--wp--preset--color--papier);
	--auf-flaeche: var(--wp--preset--color--tinte);
	--label-lokal: var(--wp--preset--color--label);
	--linie-lokal: var(--wp--preset--color--linie);
	--marke-strich: var(--wp--preset--color--akzent);
	--fokus: var(--wp--preset--color--akzent);
	--link-lokal: var(--wp--preset--color--akzent);
	--link-hover-lokal: var(--wp--preset--color--tinte);
}

.is-style-flaeche-gedeckt {
	--flaeche: var(--wp--preset--color--flaeche-gedeckt);
	--label-lokal: var(--wp--preset--color--label-auf-gedeckt);
	--linie-lokal: var(--wp--preset--color--linie-auf-gedeckt);
	background: var(--flaeche);
}

.is-style-flaeche-akzent {
	--flaeche: var(--wp--preset--color--akzent);
	--auf-flaeche: #fff;
	--label-lokal: var(--wp--preset--color--label-auf-akzent);
	--linie-lokal: var(--wp--preset--color--linie-auf-akzent);
	--marke-strich: var(--wp--preset--color--auf-dunkel-akzent);
	--fokus: var(--wp--preset--color--auf-dunkel-akzent);
	/* Nicht --auf-dunkel-akzent wie der Ring: der misst hier 4.47:1 und
	   haelt damit die 3:1 fuer Linien, aber nicht die 4.5:1 fuer Schrift. */
	--link-lokal: var(--wp--preset--color--text-auf-akzent);
	--link-hover-lokal: #fff;
	background: var(--flaeche);
	color: var(--auf-flaeche);
}

.is-style-flaeche-dunkel {
	--flaeche: var(--wp--preset--color--tinte);
	--auf-flaeche: var(--wp--preset--color--auf-dunkel);
	--label-lokal: var(--wp--preset--color--auf-dunkel-2);
	--linie-lokal: var(--wp--preset--color--linie-auf-akzent);
	--marke-strich: var(--wp--preset--color--auf-dunkel-akzent);
	--fokus: var(--wp--preset--color--auf-dunkel-akzent);
	--link-lokal: var(--wp--preset--color--auf-dunkel-akzent);
	--link-hover-lokal: #fff;
	background: var(--flaeche);
	color: var(--auf-flaeche);
}

/* --- Palettenklassen auf farbigen Flaechen --------------------
   WordPress haengt an jeden Block mit gesetzter Farbe eine Klasse
   wie .has-label-color und setzt darin einen festen Wert mit
   !important. Auf farbigem Grund ist dieser Wert falsch: --label
   misst auf der gedeckten Flaeche 4.28:1 und verfehlt die 4.5:1
   fuer Text dieser Groesse.

   Das ist derselbe Fehler wie beim Fokusring, beim Randlabelstrich
   und bei den Links — nur kommt er hier aus dem Inhalt statt aus dem
   Theme. Die Redaktion soll eine Textfarbe waehlen duerfen, ohne
   wissen zu muessen, auf welchem Grund der Block spaeter landet.

   Nur die beiden gedeckten Grauwerte werden umgebogen; wer im Editor
   ausdruecklich Akzent oder Weiss waehlt, meint das auch so. */
.is-style-flaeche-gedeckt :is(.has-label-color, .has-fliesstext-color),
.is-style-flaeche-akzent  :is(.has-label-color, .has-fliesstext-color),
.is-style-flaeche-dunkel  :is(.has-label-color, .has-fliesstext-color) {
	color: var(--label-lokal) !important;
}

/* Fliesstext braucht mehr Kontrast als ein Label: auf Akzent- und
   Dunkelflaeche traegt er den helleren Ton der Flaeche. */
.is-style-flaeche-akzent .has-fliesstext-color,
.is-style-flaeche-dunkel .has-fliesstext-color {
	color: var(--auf-flaeche) !important;
}

/* --- Tastaturbedienung ----------------------------------------
   Der Ring nimmt seine Farbe von der Flaeche, auf der er liegt. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--fokus);
	outline-offset: 3px;
	border-radius: 1px;
}

/* --- Textspalten an die linke Rahmenkante ----------------------
   WordPress zentriert in einem "constrained"-Layout jedes Kind, das
   schmäler ist als die Inhaltsbreite, über eine !important-Regel in
   den globalen Styles (.is-layout-constrained > :where(…){margin-
   left/right:auto!important}). Für den Inhaltsrahmen selbst ist das
   richtig — er soll auf breiten Schirmen in der Mitte stehen. Für
   Textblöcke mit eigener Zeilenbreite ist es falsch: dieses Theme ist
   linksbündig angelegt, und ein auf 26 Zeichen begrenzter Satz
   rutschte sonst in die Mitte statt an die linke Kante.

   Ein blosses margin-left:0 genügt hier nicht. Diese Blöcke sitzen
   teils direkt in einem vollflächigen Band, das über die ganze
   Fensterbreite läuft — sie klebten dann am Fensterrand statt an der
   Rahmenkante. Die Rechnung unten liefert genau den Abstand, den
   WordPress auch für die zentrierten Geschwister verwendet: die halbe
   Differenz zwischen Elternbreite und Inhaltsbreite. Ist das
   Elternelement schmaler als der Rahmen, wird die Differenz negativ
   und max() setzt sie auf null — auf schmalen Schirmen bleibt also
   alles unverändert linksbündig. */
/* Die Liste ist aus dem Stylesheet abgeleitet, nicht von Hand
   gefuehrt: betroffen ist genau, was eine eigene max-width traegt.
   Eine handgepflegte Aufzaehlung hing der zweiten Designfassung
   hinterher — sie nannte .abschnitt__lead und .seitenkopf__lead aus
   der ersten Fassung, waehrend .satz__text, .block__text und
   .kopfbereich__lead fehlten und darum eingerueckt standen. */
.abschnitt__lead,
.abschnitt__titel,
.block__text,
.block__titel,
.haltung__text,
.hero__lead,
.kontakt__frage,
.kontakt__text,
.kontakt__titel,
.kopfbereich__lead,
.partner__text,
.platzhalter-hinweis,
.satz__text,
.seitenkopf__lead,
.reihen .d,
.entry-content > p {
	margin-left: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important;
	margin-right: auto !important;
}

/* Dieselbe Rechnung fuer alles, was in einem unserer Abschnitte steht
   und eine eigene Zeilenbreite traegt. Die Liste oben nennt die
   Bausteinklassen; sie erreicht nicht, was allein WordPress-Klassen
   traegt — auf Impressum und Datenschutz stand ein Absatz mit
   has-fliesstext-color 143 Pixel eingerueckt, weil ihn niemand aus der
   Zentrierung nahm.

   Nur direkte Kinder des Inhaltstraegers: tiefer verschachtelte
   Elemente sitzen in Rasterzellen, deren Lage das Raster bestimmt und
   nicht der Aussenabstand. */
:is(.satz, .block, .nutzen, .kontakt, .weiter, .kopfbereich, .leistungen) > :is(p, h2, h3, ul, ol, dl),
:is(.satz, .block, .nutzen, .kontakt, .weiter, .kopfbereich, .leistungen) .is-style-randlabel > * > :is(p, h2, h3, ul, ol, dl) {
	margin-left: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important;
	margin-right: auto !important;
}

/* --- Tastaturbedienung: sichtbare Fokusmarke -------------------
   Ohne eigene Regel bliebe der Doppelring des Browsers stehen: er
   trägt auf hellem Grund, verschwindet aber auf den dunklen Bändern
   (Kontakt, Ihr Nutzen) fast vollständig und gehört gestalterisch
   nirgendwo hin. Der Akzentton macht die Marke zum Teil des Systems.

   :focus-visible statt :focus — sonst umrandet jeder Mausklick die
   angeklickte Schaltfläche, was Zeigergeräte-Nutzer nur irritiert.
   Der Abstand hält den Ring von der Schrift fern; das minimale
   border-radius verhindert, dass er an schmalen Buchstaben klebt. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--akzent);
	outline-offset: 3px;
	border-radius: 1px;
}
.kontakt :focus-visible,
.nutzen :focus-visible {
	outline-color: var(--wp--preset--color--auf-dunkel-akzent);
}

/* --- Antippbare Flächen auf dem Smartphone ---------------------
   Diese Links waren nur 22 Pixel hoch, also unter den 24, die für ein
   Bedienelement als Mindestmass gelten — die Leistungsnamen in den
   Registern, die Mailadressen und Nummern der Teamkarten sowie die
   Netzwerkverweise. Auf einem Berührungsbildschirm trifft man daneben,
   besonders bei den eng untereinander stehenden Zeilen. Das Polster
   hebt die Fläche über das Mass, ohne die Zeilenabstände sichtbar zu
   verändern. Fliesstextlinks bleiben aussen vor: sie sind Teil eines
   Satzes und von der Regel ausdrücklich ausgenommen. */
@media (max-width: 820px) {
	.reihen .t a,
	.schwer__t a {
		display: inline-block;
		padding-block: 0.25rem;
	}
}

/* --- Kopf: sticky ---------------------------------------------
   position/z-index lassen sich nicht über theme.json abbilden;
   Hintergrund, Rand und Abstand sitzen bereits im Block-Markup.

   Sticky muss am Template-Teil haengen, nicht an .kopf: ein
   klebendes Element bewegt sich nur innerhalb seines Elternkastens,
   und WordPress legt um jeden Template-Teil ein <header>, das genau
   so hoch ist wie sein Inhalt. Auf .kopf gesetzt scrollte der Kopf
   nach 1500px auf -1398px mit — auf dem Smartphone war das Menue
   damit nur ganz oben erreichbar. */
header.wp-block-template-part:has(> .kopf),
.kopf {
	position: sticky;
	top: 0;
	z-index: 50;
}

/* --- Menuetaster: Trefferflaeche --------------------------------
   WordPress liefert den Taster als 24x24-Symbol. Das erfuellt die
   Mindestgroesse aus WCAG 2.5.8 gerade eben, ist aber fuer das
   Hauptmenue eines Smartphones zu klein — es ist die einzige
   Bedienung, ueber die dort ueberhaupt navigiert wird.

   Die Flaeche waechst ueber Innenabstand statt ueber die Symbolgroesse:
   das Symbol bleibt so gross wie gezeichnet, der Griff wird groesser.
   Der negative Aussenabstand haelt die Kopfzeile auf ihrer Hoehe. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: 10px;
	margin: -10px;
}

/* --- Kopf: Handlungsaufruf je nach Platz ------------------------
   Auf breiten Schirmen steht der Knopf "Erstgespräch vereinbaren"
   neben der Navigation. Darunter reicht die Zeile nicht mehr für
   Logo, Navigation und Knopf: der Knopf rutschte auf eine zweite
   Zeile und blähte den Kopf auf mehr als das Doppelte auf. Statt
   ihn zu verkleinern, übernimmt unterhalb der Schwelle der
   Menüpunkt "Kontakt" seine Aufgabe — im ausgeklappten Menü
   ebenso wie im Überlagerungsmenü des Smartphones. */
@media (max-width: 819px) {
	.kopf .wp-block-buttons {
		display: none;
	}
}

/* --- Hero: Bild-Seitenverhältnis -------------------------------
   Werte aus der Designvorlage (assets/dirigentin.jpg, 1575×1026). */
.gfo-hero-bild img {
	width: 100%;
	height: auto;
	aspect-ratio: 1575 / 1026;
	object-fit: cover;
}

/* --- Kopf/Fuss: Logo als Theme-Asset ----------------------------
   wp:site-logo funktioniert nicht (SVG-Uploads blockiert, Media
   Library leer), daher an beiden Stellen ein verlinktes Bild auf
   das Theme-Asset statt des Site-Logo-Blocks. */
.kopf__logo img {
	/* Mitwachsend wie in der Vorlage. Fest auf 40 Pixel stand die Marke
	   am Rechner neun Pixel zu hoch und schob den ganzen Kopf mit. */
	height: clamp(30px, 2.4vw, 40px);
	width: auto;
}
.fuss__logo img {
	height: 36px;
	width: auto;
}

/* --- Hängendes Randlabel: Label links, Inhalt rechts -----------
   Block-Style "is-style-randlabel" auf einer Group. Werte aus der
   Designvorlage (.haengend). */
.is-style-randlabel {
	display: grid;
	grid-template-columns: 9.5rem minmax(0, 1fr);
	gap: 0 clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}
.marke {
	margin: 0;
	padding-top: 0.4rem;
	font-size: var(--wp--preset--font-size--mini);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--label-lokal);
	/* Die Spalte ist 152px breit, "Vergleichsgrundlagen" braucht in
	   Versalien 180. Elf von 31 Randlabels der Website tragen ein Wort
	   ab 13 Zeichen — bei deutschen Komposita ist das die Regel, nicht
	   der Ausnahmefall. Trennung nach Sprachwoerterbuch (lang="de-CH"
	   steht am html-Element), mit hartem Umbruch als Rueckfall, falls
	   der Browser kein Woerterbuch hat. */
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Der Strich nimmt seine Farbe von der Flaeche. Fest auf --akzent
   gesetzt verschwindet er auf der Akzentflaeche spurlos: 1.00:1. */
.marke::before {
	content: "";
	display: block;
	width: 1.5rem;
	height: 2px;
	margin-bottom: 0.7rem;
	background: var(--marke-strich);
}
@media (max-width: 820px) {
	.is-style-randlabel {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}
	.marke {
		padding-top: 0;
	}
}

/* --- "Mehr"-Link: wiederverwendbare Pfeil-Mikrokomponente ------
   Genutzt in den Schwerpunkt-Karten (Leistungen) und im Haltung-CTA. */
.mehr {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4375rem;
	width: fit-content;
	padding-bottom: 2px;
	border-bottom: 1px solid currentColor;
	color: var(--wp--preset--color--akzent);
	font-size: var(--wp--preset--font-size--klein);
	text-decoration: none;
}
.mehr:hover {
	color: var(--wp--preset--color--tinte);
}
/* Der Pfeil steht im Markup als <span>, wie in der Vorlage. Eine
   ::after-Regel setzte ihn zusaetzlich — er stand doppelt. Dritter
   Fall dieser Art nach der Schrittnummer und dem Nutzenhaken: das
   Theme erzeugte per CSS, was das Markup mitbringt. */

/* --- Leistungen: Abschnittstitel/-lead, mehrfach verwendet ------ */
.abschnitt__titel {
	max-width: 22ch;
	text-wrap: balance;
}
.abschnitt__lead {
	margin-top: 1.125rem;
	max-width: 66ch;
	line-height: 1.7;
}

/* --- Leistungen: zwei Schwerpunkte ------------------------------
   Query Loop erzwingt <ul><li>; display:contents auf dem <ul> löst
   die <li> als echte Grid-Kinder auf, damit grid-template-columns
   auf .schwer direkt greift. */
.schwer {
	margin-top: var(--wp--preset--spacing--eng);
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--wp--preset--color--linie-stark);
}
.schwer .wp-block-post-template {
	display: contents;
}
.schwer li.wp-block-post {
	list-style: none;
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem) 0;
	padding-right: clamp(1.5rem, 1rem + 2vw, 3rem);
	border-bottom: 1px solid var(--wp--preset--color--linie);
	transition: border-color 0.2s;
}
.schwer li.wp-block-post + li.wp-block-post {
	padding-left: clamp(1.5rem, 1rem + 2vw, 3rem);
	border-left: 1px solid var(--wp--preset--color--linie);
}
.schwer li.wp-block-post:hover {
	border-bottom-color: var(--wp--preset--color--akzent);
}
.schwer__n {
	margin: 0;
	line-height: 1;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.schwer__t {
	margin-top: 0.75rem;
}
.schwer__t a {
	color: inherit;
	text-decoration: none;
}
.schwer__d {
	margin-top: 0.625rem;
	margin-bottom: 1.5rem;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.65;
	color: var(--wp--preset--color--fliesstext);
}
.schwer .mehr {
	margin-top: auto;
	align-self: flex-start;
}
@media (max-width: 820px) {
	.schwer {
		grid-template-columns: 1fr;
	}
	.schwer li.wp-block-post + li.wp-block-post {
		padding-left: 0;
		border-left: 0;
	}
	.schwer li.wp-block-post {
		padding-right: 0;
	}
}

/* --- Leistungen: vier weitere als Hairline-Zeilen --------------- */
.reihen .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}
.reihen li.wp-block-post {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) 1.25rem;
	gap: 0 clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
	align-items: baseline;
	padding: 1.375rem 0;
	border-bottom: 1px solid var(--wp--preset--color--linie);
	/* Ueber transform, nicht ueber padding-left: einen Innenabstand zu
	   animieren zwingt den Browser bei jedem Einzelbild zu einem neuen
	   Layout, eine Verschiebung nicht. */
	transition: transform 0.2s ease, border-color 0.2s;
}
.reihen li.wp-block-post:hover {
	transform: translateX(0.625rem);
	border-bottom-color: var(--wp--preset--color--akzent);
}
.reihen .n {
	margin: 0;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.reihen__mitte {
	margin: 0;
}
.reihen .t a {
	color: inherit;
	text-decoration: none;
}
.reihen .d {
	display: block;
	margin-top: 0.3125rem;
	max-width: 60ch;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.6;
	color: var(--wp--preset--color--fliesstext);
}
.reihen .p {
	display: inline-block;
	justify-self: end;
	align-self: center;
	color: var(--wp--preset--color--akzent);
	text-decoration: none;
	transition: transform 0.2s ease;
}
.reihen li.wp-block-post:hover .p {
	transform: translateX(4px);
}
@media (max-width: 820px) {
	.reihen li.wp-block-post {
		grid-template-columns: 2.25rem minmax(0, 1fr);
	}
	.reihen .p {
		display: none;
	}
}

/* --- Haltung ----------------------------------------------------*/
.haltung__satz {
	/* Keine eigene Zeilenbreite: der Leitsatz laeuft ueber die volle
	   Spalte, wie in der Vorlage. Auf 26ch begrenzt brach er dreimal
	   mehr um und der Abschnitt wurde 94 Pixel hoeher. */
	line-height: 1.22;
	font-weight: 500;
	letter-spacing: -0.012em;
	text-wrap: pretty;
}
.gfo-haltung-bild img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 30%;
}
/* Die drei Grundsaetze standen als Register untereinander, Titel
   links, Text rechts. Als Karten nebeneinander liest man sie als drei
   gleichrangige Aussagen statt als Liste. Feste Dreierteilung, kein
   auto-fit: das haette dazwischen zwei Karten nebeneinander und die
   dritte allein darunter gestellt.
   Das Raster spannt ueber beide Spalten des haengenden Rands — drei
   Karten brauchen die volle Bahn, und links schliessen sie damit an
   das Randlabel an.
   Es sind Flaechen, keine Kaertchen: kein Radius, kein Schatten, kein
   Anheben beim Ueberfahren. */
.grundsaetze {
	margin-top: calc(var(--wp--preset--spacing--normal) - 1.5rem);
	padding-left: 0;
	list-style: none;
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 0.9rem + 1.4vw, 1.75rem);
}
.grundsatz {
	background: var(--wp--preset--color--flaeche-gedeckt);
	padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
}
.grundsatz h3 {
	margin: 0;
	text-wrap: balance;
}
.grundsatz p {
	margin-top: 0.875rem;
	margin-bottom: 0;
	line-height: 1.7;
}
@media (max-width: 820px) {
	/* Auf dem Telefon untereinander, in Quelltextreihenfolge. */
	.grundsaetze {
		grid-template-columns: 1fr;
	}
}

/* --- Referenzen: Logoraster --------------------------------------
   Feste Zellhöhe statt aspect-ratio: intrinsisch hohe Logos würden
   sonst einzelne Zellen dehnen und die Rasterlinien aufreissen. */
.wp-block-gallery.is-style-logoraster {
	margin-top: var(--wp--preset--spacing--eng);
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--wp--preset--color--linie);
	border-left: 1px solid var(--wp--preset--color--linie);
}
/*
 * Die Zelle soll ihre Grösse vom Raster beziehen, nicht vom Logo — sonst
 * kollabiert das ganze Raster auf wenige Pixel, solange ein Bild noch nicht
 * geladen ist. Der Galerie-Block bemisst jede verschachtelte Figur aber an
 * ihrem Bild und schützt diese Regel mit Spezifität, die aus dem Theme nicht
 * ohne Weiteres zu schlagen ist:
 *   .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)
 *     { width: calc(50% - …) }
 *   figure.wp-block-image img { max-width: 100% !important; width: auto }
 * Das :not(#…) hebt die Regel auf ID-Niveau, und die Bildbreite trägt bereits
 * ein !important. Beides lässt sich nur mit !important sauber überstimmen —
 * eine erfundene Phantom-ID im eigenen Selektor wäre schwerer zu lesen als
 * diese drei markierten Zeilen.
 */
.wp-block-gallery.is-style-logoraster .wp-block-image {
	margin: 0;
	width: 100% !important;
	min-width: 0;
	height: clamp(5rem, 4rem + 3vw, 6.25rem);
	display: grid;
	place-items: center;
	padding: 0.875rem;
	border-right: 1px solid var(--wp--preset--color--linie);
	border-bottom: 1px solid var(--wp--preset--color--linie);
}
.wp-block-gallery.is-style-logoraster .wp-block-image img {
	width: 100% !important;
	height: 100%;
	max-width: min(8.5rem, 72%) !important;
	max-height: 2.25rem;
	object-fit: contain;
	filter: grayscale(1) contrast(0.88) opacity(0.66);
	/*
	 * Ein Teil der Referenzlogos liegt als JPG vor und bringt darum eine
	 * weisse Fläche mit, die sich auf dem Papierton als heller Kasten
	 * abzeichnet. multiply lässt Weiss im Untergrund aufgehen, ohne die
	 * Dateien anzutasten. Sobald der Kunde die Logos als SVG liefert,
	 * kann die Zeile ersatzlos weg.
	 */
	mix-blend-mode: multiply;
}
@media (max-width: 820px) {
	.wp-block-gallery.is-style-logoraster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --- Leistungs-Seitenkopf ---------------------------------------- */
.brotkrume {
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--label);
}
.brotkrume a {
	color: var(--wp--preset--color--akzent);
	text-decoration: none;
}
.brotkrume a:hover {
	color: var(--wp--preset--color--tinte);
}
.seitenkopf__nr {
	margin-top: 1.5rem;
	font-weight: 600;
}
.seitenkopf .wp-block-post-title {
	margin-top: 0.75rem;
	/* Keine engere Begrenzung als der Rahmen: Leistungsnamen sind teils
	   ein einzelnes langes Wort ohne Sollbruchstelle (z.B.
	   "Kompetenzmanagement"), und jede knappere Breite erzwingt dort
	   irgendwann einen hässlichen Wortumbruch. Die Rahmenbreite reicht
	   für alle sechs Namen bei jeder Fenstergrösse.

	   Nicht 100% verwenden: das hebt die Begrenzung des Rahmens auf,
	   und der Titel liefe auf breiten Schirmen über die ganze
	   Fensterbreite statt bündig mit den Zeilen darunter zu beginnen. */
	max-width: var(--wp--style--global--content-size);
}
.seitenkopf__lead {
	margin-top: 1.25rem;
	max-width: 50ch;
	line-height: 1.5;
}

/* --- Leistungsseiten-Inhalt: wiederkehrende Bausteine ------------
   Genutzt innerhalb von wp:post-content auf page-leistung.html, um
   die Fliesstext-Abschnitte jeder Leistungsseite (Kompetenzmodell,
   Module, Vorgehen usw.) einheitlich zu gliedern. */
.leistung-block {
	border-top: 1px solid var(--wp--preset--color--linie);
	padding-block: var(--wp--preset--spacing--normal);
}
.leistung-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--akzent);
}
.leistung-eyebrow::before {
	content: "";
	width: 1.5rem;
	height: 2px;
	background: currentColor;
}

/* Die Schrittfolge nummeriert im Markup, nicht per CSS-Counter: der
   Generator schreibt <span class="schritte__nr"> wie die Vorlage. Die
   fruehere Counter-Regel setzte zusaetzlich ein ::before mit derselben
   Zahl — die Nummern standen doppelt und die Zeilen wurden 113 statt
   59 Pixel hoch. */

/* --- Nutzen: Akzentfläche mit Häkchen-Liste -----------------------
   Einzige Fläche in Akzentfarbe ausserhalb des Kontakt-Abschnitts;
   markiert "Ihr Nutzen" bewusst als Zäsur zwischen den Inhalts-
   abschnitten einer Leistungsseite. */
.nutzen .marke {
	color: var(--wp--preset--color--label-auf-akzent);
}
.nutzen .marke::before {
	background: var(--wp--preset--color--auf-dunkel-akzent);
}
.nutzen__liste {
	/* margin-top statt margin:0 — die Kurzform loeschte den Abstand
	   zum Titel darueber, den die Vorlage mit 62 Pixeln setzt. */
	margin-top: var(--wp--preset--spacing--eng);
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}
/* Das Haekchen steht im Markup als <span class="nutzen__haken">, wie
   in der Vorlage. Die fruehere Regel setzte zusaetzlich ein ::before
   mit demselben Zeichen — es stand doppelt. Die Trennlinien kommen
   aus der uebertragenen Vorlagenregel weiter unten. */
@media (max-width: 820px) {
	.nutzen .wp-block-columns {
		flex-wrap: wrap;
	}
	.nutzen .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* --- Kontakt: Contact-Form-7-Formular -----------------------------
   Markup kommt direkt von CF7 (patterns/kontakt.php rendert den
   Shortcode serverseitig); die Klassen .feld/.feld--breit/
   .einwilligung/.hinweis/.pflicht stammen aus dem CF7-Formular-Feld
   selbst (siehe Formular "Anfrage"), kein eigener Wrapper nötig.
   Zwei-Spalten-Raster ohne extra Container: alle Formularkinder
   spannen standardmässig beide Spalten, nur die schmalen .feld
   (Name/Unternehmen) sitzen nebeneinander.

   Kontrast auf der dunklen Kontakt-Fläche (Hintergrund: tinte,
   #181A1D) geprüft: auf-dunkel-2 für Label, Platzhalter und
   Feldrand = 7,35:1 (Text ≥ 4.5:1, Rand ≥ 3:1 nach WCAG 1.4.3 /
   1.4.11 klar erfüllt); auf-dunkel-akzent für Hover/Fokus = 8,27:1. */
.formular form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.125rem clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
}
.formular form > * {
	grid-column: 1 / -1;
}
.formular .feld:not(.feld--breit) {
	grid-column: span 1;
}
.formular .feld {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
}
.formular .feld br {
	display: none;
}
.formular .feld label {
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--auf-dunkel-2);
}
.formular .pflicht {
	color: var(--wp--preset--color--auf-dunkel-akzent);
}
.formular .feld input,
.formular .feld textarea {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--auf-dunkel-2);
	color: var(--wp--preset--color--weiss);
	padding: 0.625rem 0;
	font: inherit;
	font-size: var(--wp--preset--font-size--klein);
	min-height: 44px;
	transition: border-color 0.18s;
}
.formular .feld textarea {
	resize: vertical;
	min-height: 5rem;
}
.formular .feld input::placeholder,
.formular .feld textarea::placeholder {
	color: var(--wp--preset--color--auf-dunkel-2);
	opacity: 1;
}
.formular .feld input:hover,
.formular .feld textarea:hover {
	border-bottom-color: var(--wp--preset--color--auf-dunkel);
}
/* Die gefärbte Unterkante ist die gestalterische Antwort auf den Fokus.
   Sie allein genügt aber nicht: ein blosser Farbwechsel ist für Menschen
   mit Farbsehschwäche kein verlässliches Signal, und wer das Formular
   mit der Tastatur durchgeht, muss das aktive Feld sicher erkennen.
   Der Ring aus der Regel weiter oben bleibt darum stehen. */
.formular .feld input:focus,
.formular .feld textarea:focus {
	border-bottom-color: var(--wp--preset--color--auf-dunkel-akzent);
}
.formular .einwilligung {
	margin: 0;
	font-size: var(--wp--preset--font-size--mini);
	line-height: 1.6;
	color: var(--wp--preset--color--auf-dunkel-2);
}
.formular .einwilligung label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.625rem;
	align-items: start;
}
.formular .einwilligung input {
	width: 1.0625rem;
	height: 1.0625rem;
	margin-top: 0.125rem;
	accent-color: var(--wp--preset--color--auf-dunkel-akzent);
}
.formular .einwilligung a {
	color: var(--wp--preset--color--weiss);
}
.formular .wpcf7-submit {
	margin-top: 0.5rem;
	width: 100%;
	padding: 0.875rem 1.5rem;
	border: 0;
	background: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--weiss);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.18s, color 0.18s;
}
.formular .wpcf7-submit:hover {
	background: var(--wp--preset--color--auf-dunkel-akzent);
	color: var(--wp--preset--color--tinte);
}
.formular .hinweis {
	margin: 0;
	font-size: var(--wp--preset--font-size--mini);
	line-height: 1.6;
	color: var(--wp--preset--color--auf-dunkel-2);
}
.formular .wpcf7-not-valid-tip {
	/* CF7-Standardfarbe (#dc3232) erreicht auf Tinte nur ~3.8:1;
	   Weiss + Fettschrift statt eines nicht vorhandenen Fehler-Tokens. */
	margin-top: 0.375rem;
	color: var(--wp--preset--color--weiss);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--mini);
}
.formular .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 0;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--auf-dunkel);
}
@media (max-width: 560px) {
	.formular form {
		grid-template-columns: 1fr;
	}
	.formular .feld:not(.feld--breit) {
		grid-column: 1 / -1;
	}
}

/* --- Über uns: Geschäftsleitung -----------------------------------
   Ein Profil pro Person, hairline-getrennt, keine Fotos/Kästen. */
.person {
	padding-block: var(--wp--preset--spacing--eng);
}
.person__name {
	margin: 0;
}
.person__rolle {
	margin: 0.25rem 0 0;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--label);
}
.person__kontakt {
	margin: 0.625rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	font-size: var(--wp--preset--font-size--klein);
}
.person__kontakt a {
	color: var(--wp--preset--color--akzent);
	text-decoration: none;
}
.person__kontakt a:hover {
	color: var(--wp--preset--color--tinte);
}
/* Trefferflaeche ohne Layoutfolgen.
   Telefonnummer und Mailadresse sind 105x17 und 87x17 gross — unter
   den 24 Pixeln, die WCAG 2.5.8 fuer ein eigenstaendiges Ziel fordert.
   Ein padding am Verweis wuerde sie erreichen, aber die Zeile mit
   auseinanderziehen und die Person acht Pixel hoeher machen als in der
   Vorlage. Das ::after liegt ueber dem Text hinaus und erweitert nur,
   was anklickbar ist: 25 Pixel hoch, ohne dass sich etwas verschiebt.
   Waagerecht null, damit sich Nummer und Adresse nicht ueberlappen. */
.person__kontakt a,
.partner__link {
	position: relative;
}
.person__kontakt a::after,
.partner__link::after {
	content: "";
	position: absolute;
	inset: -0.25rem 0;
}
.person__angaben {
	margin-top: 1.5rem;
	margin-bottom: 0;
	/* Beschreibungsliste als zweispaltiges Raster: Begriff links,
	   Erlaeuterung rechts. Das Theme setzte das Raster frueher an
	   .person__zeile — ein div-Konstrukt, das die Beziehung zwischen
	   Begriff und Wert nicht ausdrueckte und darum dl/dt/dd gewichen
	   ist. */
	display: grid;
	grid-template-columns: 9.5rem minmax(0, 1fr);
	gap: 0.75rem clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}

/* --- Über uns: Beratungsnetzwerk -----------------------------------
   Name + Qualifikation, hairline-getrennt statt Kacheln. */
.netzwerk {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--linie);
}
.netzwerk li {
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--linie-lokal);
	font-size: var(--wp--preset--font-size--text);
	line-height: 1.5;
}
.netzwerk__name {
	font-weight: 600;
	color: var(--wp--preset--color--tinte);
}
.netzwerk__grad {
	/* Fliesstext, nicht Labelton: der Grad steht in derselben Zeile wie
	   der Name und gehoert zur Angabe, nicht zu ihrer Beschriftung. */
	color: var(--wp--preset--color--fliesstext);
	font-size: var(--wp--preset--font-size--klein);
}

/* --- Über uns: Partnerunternehmen ----------------------------------
   Titel/Text/Link je Zeile, hairline statt Kästen mit Schatten. */
.partner {
	margin: var(--wp--preset--spacing--eng) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--linie-stark);
}
.partner li {
	padding: 1.375rem 0;
	border-bottom: 1px solid var(--wp--preset--color--linie);
}
.partner__titel {
	margin: 0;
	font-weight: 600;
}
.partner__text {
	margin-top: 0.5rem;
	max-width: 60ch;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.65;
	color: var(--wp--preset--color--fliesstext);
}
.partner__link {
	display: inline-flex;
	margin-top: 0.75rem;
	padding-bottom: 2px;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--akzent);
	text-decoration: none;
}
.partner__link:hover {
	color: var(--wp--preset--color--tinte);
}

/* --- Über uns: Fachliteratur ----------------------------------------
   Dossier-Nummer + Titel, hairline-Liste statt Umschlagbilder
   (keine echten Coverdateien vorhanden). */
.publikationen {
	margin: var(--wp--preset--spacing--eng) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--linie-stark);
}
.publikationen li {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--wp--preset--color--linie);
}
.publikationen__nr {
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--akzent);
}
.publikationen__titel {
	margin: 0;
	max-width: 60ch;
}

/* --- Rechtsseiten: Platzhalter-Hinweis -----------------------------
   Impressum/Datenschutz sind bewusst noch nicht final; dieser Hinweis
   markiert das eindeutig. Linker Akzentrand statt Kasten mit Schatten. */
.platzhalter-hinweis {
	margin: 1.5rem 0 0;
	padding: 1rem 1.25rem;
	max-width: 60ch;
	border-left: 2px solid var(--wp--preset--color--akzent);
	background: var(--wp--preset--color--flaeche-gedeckt);
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.65;
	color: var(--wp--preset--color--fliesstext);
}
.platzhalter-hinweis strong {
	color: var(--wp--preset--color--tinte);
}
.rechts-angaben {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--linie);
}
.rechts-angaben li {
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--wp--preset--color--linie);
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.6;
}
.rechts-angaben .label {
	display: inline-block;
	min-width: 9rem;
	color: var(--wp--preset--color--label);
}

/* --- Seitenkopf: die Akzentflaeche -----------------------------
   Der Seitenkopf beantwortet beim ersten Blick, wo man gelandet
   ist. Dafuer steht die Nummer gross neben dem Titel statt klein
   darueber: sie ist die Positionsangabe im Sechserprogramm.

   Diese Regeln fehlten bis hierher ganz. Beim Uebertragen aus der
   Vorlage schloss ein Filter Kopf, Menue und Fuss aus, weil
   WordPress dafuer eigene Bausteine hat — und sein Muster ".kopf"
   fing ".kopfbereich" gleich mit. Ohne die Regeln rendert die
   grosse Nummer in Grundschrift: 16px statt 52, 15 statt 62 Pixel
   breit. */
.kopfbereich {
	padding-block: var(--wp--preset--spacing--eng) var(--wp--preset--spacing--normal);
}

.kopfbereich .zurueck {
	color: var(--wp--preset--color--label-auf-akzent);
}

.kopfbereich .zurueck:hover {
	color: #fff;
}

.kopfbereich__kopfzeile {
	display: flex;
	align-items: baseline;
	gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
	margin-top: 1.5rem;
}

.kopfbereich__nr {
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	font-weight: 600;
	color: var(--wp--preset--color--nr-auf-akzent);
	/* Tabellenziffern: 01 und 06 sind dann gleich breit und die
	   Titel daneben beginnen auf allen sechs Seiten an derselben
	   Stelle. */
	font-variant-numeric: tabular-nums;
	line-height: 1;
	flex: none;
}

.kopfbereich h1 {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--titel-gross);
	color: #fff;
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.01em;
}

.kopfbereich__lead {
	margin-top: 1.5rem;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--wp--preset--color--text-auf-akzent);
	max-width: 50ch;
}

@media (max-width: 560px) {
	.kopfbereich__kopfzeile {
		flex-direction: column;
		gap: 0.5rem;
	}
}

/* === Bausteine der zweiten Designfassung ======================
   Aus design/assets/seite.css uebernommen. Die Farb- und
   Abstandsvariablen der Vorlage sind dabei auf die Tokens aus
   theme.json abgebildet; --label und --linie zeigen bewusst auf
   die flaechenabhaengigen --label-lokal und --linie-lokal. */

/* Auf dunklem Grund trägt der Labelton nicht: #666B72 auf #181A1D
   ergibt 3.2:1 und bleibt damit unter den geforderten 4.5:1 für
   Text dieser Grösse. Der hellere Ton kommt auf 7.35:1. */
.kontakt .marke {color:var(--wp--preset--color--auf-dunkel-2)}

.kontakt .marke::before {background:var(--wp--preset--color--auf-dunkel-akzent)}

/* Die Mindesthoehe gehoert an das anklickbare Element. In der Vorlage
   trug der Verweis selbst die Klasse; im Pattern steht sie am Absatz
   und der Verweis darin blieb 22px hoch — halb so hoch wie das Ziel,
   das er sein sollte. Beide Faelle sind darum abgedeckt. */
/* Der Absatz bleibt Block. Als inline-flex verliert er die
   Blockpositionierung — margin-left:auto wird bei inline-level
   Elementen zu null, und der Zurueck-Link stand auf allen elf Seiten
   43 statt 93 Pixel von links, also fuenfzig Pixel neben der Kante,
   an der Titel und Lead darunter beginnen.

   Die Trefferflaeche sitzt am Verweis darin: min-height am Absatz
   liesse den Link bei seinen 22 Pixeln. */
.zurueck {
	font-size: var(--wp--preset--font-size--klein);
}

.zurueck a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	text-decoration: none;
}

/* --- Fliesstext ---------------------------------------------- */
.satz {padding-block:var(--wp--preset--spacing--normal)}

.satz p {font-size:var(--wp--preset--font-size--text);line-height:1.75;color:var(--wp--preset--color--fliesstext);max-width:var(--mass)}

.satz p+p {margin-top:1.25rem}

/* --- Abschnitt ----------------------------------------------- */
/* Der Kern der Seite bekommt den gedeckten Grund. Bei sieben Modulen
   ist das der Abschnitt, dessentwegen jemand die Seite ueberhaupt
   aufschlaegt; die Flaeche fasst ihn zusammen, ohne dass jede Zeile
   eine eigene Karte braucht.
   Auf diesem Grund verschwindet die normale Haarlinie fast (1.11:1),
   darum der etwas kraeftigere Ton fuer die Zeilentrenner. */
/* Nur die Polsterung. Den Grund malt is-style-flaeche-gedeckt, und
   mit ihm kommen Label-, Linien- und Fokusfarbe als Variablen. Wer
   den Grund hier zusaetzlich setzt, bekommt eine Flaeche ohne die
   zugehoerigen Werte — und damit die Kontrastfehler zurueck, die das
   Flaechensystem loest. */
.block {padding-block:var(--wp--preset--spacing--normal)}

.block .unterlage {border-top-color:var(--wp--preset--color--linie-stark)}

.block__titel {font-family:var(--wp--preset--font-family--serif);font-size:var(--wp--preset--font-size--titel);font-weight:600;
  line-height:1.12;letter-spacing:-.015em;max-width:22ch;text-wrap:balance}

.block__text {margin-top:1.125rem;font-size:var(--wp--preset--font-size--text);line-height:1.7;
  color:var(--wp--preset--color--fliesstext);max-width:var(--mass)}

/* 22ch, nicht 20: bei 20 bricht als einziger von sieben Modulnamen
   "Nutzbare Erfahrung" auf zwei Zeilen um — ein einzelner Umbruch in
   einer sonst gleichmässigen Reihe liest sich wie ein Versehen. */
/* --- Listen der Bausteine --------------------------------------
   Die Vorlage setzt "* { margin:0; padding:0 }" und braucht darum an
   den einzelnen Listen nichts weiter. WordPress bringt stattdessen
   den Browsereinzug mit: 40px links am Register und, schlimmer, die
   Standardnummerierung eines <ol> — die Ziffern standen doppelt, die
   gestaltete Nummer und die des Browsers daneben. */
.register,
.reihe,
.schritte,
.nutzen__liste,
.weiter__register,
.publikationen,
.person__angaben {
	/* Dieselbe Rechnung wie bei den Textspalten weiter oben, nicht
	   margin-inline:0. Der Unterschied faellt auf, sobald eine Liste
	   direkt in einem vollflaechigen Band steht statt in einem
	   Container, der schon an der Rahmenkante sitzt: mit 0 klebte sie
	   am Rand der Bahn — 43 statt 93 Pixel, 50 Pixel links vom Titel
	   darueber. Die Rechnung liefert in beiden Faellen den richtigen
	   Wert, weil sie null ergibt, wenn das Elternelement ohnehin
	   schmaler ist als der Rahmen. */
	margin-left: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important;
	margin-right: auto !important;
	padding-inline: 0;
	list-style: none;
}

.register {
	margin-top: var(--wp--preset--spacing--eng);
	border-top: 1px solid var(--wp--preset--color--linie-stark);
}

.reihe {
	margin-top: 1.5rem;
	border-top: 1px solid var(--linie-lokal);
}

/* Die Aufzaehlung mit Punkten ist die Ausnahme: sie braucht ihren
   Einzug, damit die Punkte neben dem Text stehen und nicht darunter. */
.reihe--punkte {
	list-style: disc;
	margin-block: 1.25rem;
	padding-left: 1.25rem;
	border-top: 0;
}

/* Die drei Regeln fuer die Bestandteile eines Registereintrags.
   Sie fehlten: beim Uebertragen aus der Vorlage galten sie als
   "bereits vorhanden", weil das alte Theme eigene Fassungen hatte —
   und die sind beim Aufraeumen der doppelten Rasterregeln gegangen.
   Ohne sie standen die Nummern schwarz statt blau und in
   Grundgewicht, und die Beschreibungen trugen Tinte statt
   Fliesstextgrau. */
.register__nr {
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 500;
	color: var(--wp--preset--color--akzent);
	/* Tabellenziffern: 01 und 06 werden gleich breit, die Titel
	   daneben beginnen dadurch auf einer Linie. */
	font-variant-numeric: tabular-nums;
}

.register__titel {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--titel-klein);
	font-weight: 500;
	line-height: 1.22;
	color: var(--wp--preset--color--tinte);
}

/* Ohne Mass laufen die Beschreibungen auf breiten Schirmen auf 94
   Zeichen je Zeile — weit ueber dem, was sich noch fluessig liest.
   Die Spalte darf breiter sein, der Satz darin nicht. */
.register__text {
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.65;
	color: var(--wp--preset--color--fliesstext);
	max-width: 62ch;
}

.register li {display:grid;grid-template-columns:3rem minmax(0,22ch) minmax(0,1fr);
  gap:0 clamp(1rem,.6rem + 1.4vw,1.75rem);align-items:baseline;
  padding:1.375rem 0;border-bottom:1px solid var(--linie-lokal)}

@media (max-width:820px) {
	.register li {grid-template-columns:2.5rem minmax(0,1fr);row-gap:.375rem}
	/* Der Text gehoert in die zweite Spalte, sonst faellt er in die
	   naechste Rasterzeile — also unter die Nummer, auf 40px Breite,
	   und laeuft dort ueber. Ich hatte diese Zeile beim Aufraeumen der
	   doppelten Registerregeln fuer verwaist gehalten. */
	.register__text {grid-column:2}
}

/* --- Reihe: Aufzählung ohne Titel ---------------------------
   Für Satzfolgen ohne eigene Überschrift. Kein Häkchen, keine
   Aufzählungspunkte — die Linie genügt als Gliederung.          */
.reihe {list-style:none;margin-top:1.5rem;border-top:1px solid var(--linie-lokal)}

.reihe li {padding:.875rem 0;border-bottom:1px solid var(--linie-lokal);
  font-size:var(--wp--preset--font-size--text);line-height:1.6;color:var(--wp--preset--color--fliesstext);max-width:var(--mass)}

/* --- Reihe mit Punkten --------------------------------------
   Wo die Aufzaehlung mitten im Fliesstext steht und der Satz
   davor mit einem Doppelpunkt auf sie zeigt, gliedern Linien
   zu schwer: sie schneiden die Liste vom Satz ab, zu dem sie
   gehoert. Dort tragen Punkte. Die Farbe kommt ueber ::marker,
   damit der Punkt den Akzent traegt und der Text seinen eigenen
   Ton behaelt. */
/* margin-block statt margin-top: ohne Linie und ohne Polsterung an
   den Eintraegen stiesse der Satz nach der Liste sonst direkt an
   den letzten Punkt. 1.25rem ist der Abstand, den auch zwei
   aufeinanderfolgende Absaetze halten. */
.reihe--punkte {list-style:disc;margin-block:1.25rem;padding-left:1.25rem;border-top:0}

.reihe--punkte li {padding:0;border-bottom:0}

.reihe--punkte li+li {margin-top:.5rem}

.reihe--punkte li::marker {color:var(--wp--preset--color--akzent)}

/* --- Reihe in zwei Spalten ----------------------------------
   Fuer lange Aufzaehlungen kurzer Eintraege. Der Zeilenabstand kommt
   hier aus row-gap statt aus dem Abstand der Eintraege untereinander:
   im Raster truege sonst der erste Eintrag der zweiten Spalte einen
   Abstand, den der erste der ersten Spalte nicht hat — die beiden
   Spalten stuenden versetzt. */
.reihe--zwei {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.5rem,1rem + 2.5vw,3.5rem);row-gap:.5rem}

.reihe--zwei li+li {margin-top:0}

@media (max-width:820px) {
	.reihe--zwei {grid-template-columns:1fr}
}

/* --- Unterlagen ---------------------------------------------
   Im Original ein Kasten mit Symbol, Radius und Schatten. Hier
   eine Zeile mit Dateiformat als Randangabe.                    */
.unterlage {margin-top:var(--wp--preset--spacing--eng);padding-top:1.5rem;border-top:1px solid var(--wp--preset--color--linie-stark);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem 1.25rem}

.unterlage__art {font-size:var(--wp--preset--font-size--mini);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--label-lokal)}

.unterlage__titel {font-family:var(--wp--preset--font-family--serif);font-size:var(--wp--preset--font-size--titel-klein);font-weight:500}

.unterlage__link {margin-left:auto;display:inline-flex;align-items:baseline;gap:.4375rem;
  min-height:44px;align-self:center;
  font-size:var(--wp--preset--font-size--klein);color:var(--wp--preset--color--akzent);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px}

.unterlage__link:hover {color:var(--wp--preset--color--tinte)}

/* Zwischentitel unmittelbar ueber der Unterlagenzeile. Die Linie
   gehoert zur Zeile, nicht zum Titel — der Titel steht darueber und
   nimmt ihr den grossen Abstand nach oben ab, sonst klafft zwischen
   Titel und der Linie, die zu ihm gehoert, mehr Luft als zwischen
   Titel und der Liste darueber. */
.unterlage__ueberschrift {margin-top:2.25rem}

.unterlage__ueberschrift+.unterlage {margin-top:.875rem}

@media (max-width:560px) {
	.unterlage__link {margin-left:0}
}

/* --- Weitere Leistungen -------------------------------------- */
.weiter {padding-block:var(--wp--preset--spacing--normal) var(--wp--preset--spacing--weit)}

.weiter__register {list-style:none;margin-top:var(--wp--preset--spacing--eng);
  border-top:1px solid var(--wp--preset--color--linie-stark)}

.weiter__register li {border-bottom:1px solid var(--linie-lokal)}

/* Die Zeile rückt beim Überfahren ein Stück nach rechts. Über transform,
   nicht über padding-left: ein Innenabstand zu animieren zwingt den
   Browser bei jedem Einzelbild zu einem neuen Layout, eine Verschiebung
   nicht. */
.weiter__register a {display:grid;grid-template-columns:3rem minmax(0,1fr) 1.25rem;
  gap:0 clamp(1rem,.6rem + 1.4vw,1.75rem);align-items:baseline;
  padding:1.25rem 0;text-decoration:none;color:inherit;
  transition:transform .2s ease}

.weiter__register a:hover {transform:translateX(.625rem)}

.weiter__register li:hover {border-bottom-color:var(--wp--preset--color--akzent)}

.weiter__nr {font-size:var(--wp--preset--font-size--klein);font-weight:500;color:var(--wp--preset--color--akzent);
  font-variant-numeric:tabular-nums}

.weiter__titel {font-family:var(--wp--preset--font-family--serif);font-size:var(--wp--preset--font-size--titel-klein);font-weight:500}

.weiter__pfeil {color:var(--wp--preset--color--akzent);justify-self:end}

.weiter__alle {display:inline-flex;align-items:baseline;gap:.4375rem;margin-top:1.75rem;
  min-height:44px;font-size:var(--wp--preset--font-size--klein);color:var(--wp--preset--color--akzent);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;width:fit-content}

.weiter__alle:hover {color:var(--wp--preset--color--tinte)}

/* --- Kontaktabschluss ---------------------------------------
   Die Frage ist seitenspezifisch und stammt wörtlich aus dem
   Original. Sie trägt den Abschluss, darum steht sie im Satz
   der Überschriften und nicht als Fliesstext.                   */
.kontakt {background:var(--wp--preset--color--tinte);color:var(--wp--preset--color--auf-dunkel);padding-block:var(--wp--preset--spacing--normal)}

.kontakt__frage {font-family:var(--wp--preset--font-family--serif);font-size:var(--wp--preset--font-size--titel);font-weight:600;
  line-height:1.12;letter-spacing:-.015em;color:#fff;max-width:20ch;text-wrap:balance}

.kontakt__knopf {display:inline-flex;align-items:center;min-height:44px;margin-top:2rem;
  padding:.875rem 1.625rem;background:var(--wp--preset--color--auf-dunkel-akzent);color:var(--wp--preset--color--tinte);
  font-size:var(--wp--preset--font-size--klein);font-weight:600;text-decoration:none}

.kontakt__knopf:hover {background:#fff}

/* --- Kontaktabschluss zweispaltig ---------------------------
   Frage links, Knopf rechts daneben statt darunter. Die Spalten
   stehen als 3fr zu 2fr, nicht als 60% zu 40%: mit Prozentwerten
   zaehlt der Spaltenabstand doppelt und die Reihe liefe an breiten
   Schirmen ueber die Bahn hinaus.
   Der Knopf bringt sein margin-top aus der gestapelten Fassung mit —
   das muss hier weg, sonst sitzt er trotz align-items:center tiefer
   als die Frage. */
.kontakt__reihe {display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:clamp(1.5rem,1rem + 2.5vw,3.5rem);align-items:center}

.kontakt__reihe .kontakt__frage {max-width:none}

/* Als Rasterzelle wird der Knopf blockartig und fuellt sonst die
   ganze Spalte — vier Zentimeter Flaeche fuer drei Worte. Er behaelt
   seine Breite aus dem Inhalt und sitzt am rechten Rand der Bahn. */
.kontakt__reihe .kontakt__knopf {margin-top:0;justify-self:end}

@media (max-width:820px) {
	.kontakt__reihe {grid-template-columns:1fr;align-items:start}
	/* Gestapelt gibt es keine zweite Spalte mehr, an deren Rand der
	     Knopf sitzen koennte — er reiht sich unter die Frage. */
	.kontakt__reihe .kontakt__knopf {margin-top:2rem;justify-self:start}
	/* Der harte Umbruch nach "Kompetenzmodell" passt nur in die breite
	     Spalte; auf dem Telefon bricht die Zeile ohnehin frueher. */
	.kontakt__reihe .kontakt__frage br {display:none}
}

/* --- Marken der Aufzaehlungen ---------------------------------
   Schrittnummer und Haken stehen im CSS, nicht im Markup. Als <span>
   im HTML waren sie Text, den der Kundenanteil im Editor loeschen
   oder umnummerieren konnte, ohne dass die Gestaltung es merkt. Die
   Zahl entsteht jetzt aus der Position — Umsortieren nummeriert neu.

   Frueher stand beides doppelt: die CSS-Marke und die des Markups.
   Darum die Regel: eine Marke, eine Quelle. */
.schritte {counter-reset:gfo-schritt}

.schritte__nr,
.schritte li::before {font-size:var(--wp--preset--font-size--klein);font-weight:500;
  color:var(--wp--preset--color--akzent);font-variant-numeric:tabular-nums}

.schritte li::before {counter-increment:gfo-schritt;content:counter(gfo-schritt)}

/* --- Gruppe: Aufzaehlung mit Zwischentitel -------------------
   "Beruecksichtigte Aspekte", "Doppelter Nutzen" — der Export
   fuehrt sie als eigene Ueberschrift ueber einer kurzen Liste. */
.gruppe {margin-top:var(--wp--preset--spacing--eng)}

.gruppe+.gruppe {margin-top:var(--wp--preset--spacing--eng)}

/* Keine Versalien: "Doppelter Nutzen des Gehaltsvergleichs" sind 38
   Zeichen, und in Grossbuchstaben faellt ab etwa der Haelfte davon die
   Wortkontur weg, an der man beim Lesen entlanggeht. Die Auszeichnung
   uebernehmen Schriftschnitt und Farbe. */
.gruppe__titel {font-family:var(--wp--preset--font-family--sans);font-size:var(--wp--preset--font-size--klein);font-weight:600;
  letter-spacing:.01em;color:var(--wp--preset--color--tinte)}

.gruppe .reihe {margin-top:.75rem}

/* Zwei Gruppen nebeneinander, wo sie einander gegenueberstehen.
   Nur column-gap, kein row-gap: den senkrechten Abstand tragen die
   Gruppen selbst (margin-top), sonst zaehlt er gestapelt doppelt.
   Beide Gruppen haben dasselbe margin-top, darum fluchten ihre Titel
   ohne weiteres Zutun. */
.gruppen-reihe {margin-top:var(--wp--preset--spacing--eng);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.5rem,1rem + 2.5vw,3.5rem);align-items:start}

@media (max-width:820px) {
	.gruppen-reihe {grid-template-columns:1fr}
}

.nutzen__haken,
.nutzen__liste li::before {color:var(--wp--preset--color--nr-auf-akzent);font-weight:600}

/* Der leere Alternativtext nach dem Schraegstrich haelt den Haken aus
   der Vorlesesoftware — er ist Schmuck, kein Wort. Browser ohne diese
   Schreibweise ueberspringen die ganze Deklaration, darum steht die
   einfache Fassung davor. */
.nutzen__liste li::before {content:"\2713"}
.nutzen__liste li::before {content:"\2713" / ""}

/* --- Nutzenabschnitt: Akzentflaeche --------------------------
   Zweite farbige Zaesur der Seite, diesmal als Zusammenfassung.
   Sie steht nur dort, wo der Export einen Nutzen-Abschnitt
   fuehrt (Kompetenzmanagement). */
.nutzen {background:var(--wp--preset--color--akzent);color:#fff;padding-block:var(--wp--preset--spacing--normal)}

.nutzen .block__titel {color:#fff}

/* Der Strich gehoert zur ersten Person, nicht zur Ueberschrift —
   ohne Abstand streift die Unterlaenge des g in "Geschaeftsleitung"
   die Linie. Die Zeilenhoehe deckt die Unterlaenge nicht ab. */
.person:first-of-type {margin-top:.5rem;border-top:2px solid var(--wp--preset--color--tinte)}

/* Portraet links, Name und Kontakt rechts daneben; die Angabenliste
   bleibt darunter ueber die volle Breite, damit ihre beiden Spalten
   weiter mit dem haengenden Rand der Seite fluchten.
   Die Bildbreite ist die des Randlabels (9.5rem) — dieselbe Spalte,
   auf die die Seite ohnehin aufgebaut ist. */
.person__kopf {display:flex;align-items:flex-start;
  gap:clamp(1.5rem,1rem + 2.5vw,3.5rem)}

/* Breite und Abstand sind nicht frei gewaehlt, sondern von der
   Angabenliste darunter abgeschrieben: 9.5rem Spalte, derselbe
   Spaltenabstand. Damit beginnt der Name auf derselben Senkrechten wie
   der Text der Liste — Portraet und Kuerzel stehen in einer Spalte,
   Name und Angaben in der anderen. */
.person__bild {flex:none;width:9.5rem;
  aspect-ratio:4/5;object-fit:cover;background:var(--wp--preset--color--flaeche-gedeckt)}

.person__angaben dt {font-size:var(--wp--preset--font-size--mini);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--label-lokal);padding-top:.2rem}

/* Telefonnummer und Mailadresse sind auf dem Smartphone die
   wichtigsten Ziele der ganzen Seite und waren 17px hoch. Die
   Trefferflaeche waechst ueber Innenabstand, der negative
   Aussenabstand haelt den Zeilenfall. */
.person__angaben dd a {
	display: inline-block;
	padding-block: .7rem;
	margin-block: -.7rem;
}

.person__angaben dd {margin-inline-start:0;font-size:var(--wp--preset--font-size--klein);line-height:1.65;color:var(--wp--preset--color--fliesstext);
  max-width:60ch}

@media (max-width:820px) {
	.person__angaben dd {margin-bottom:.75rem}
	/* Die Liste steht hier einspaltig, es gibt also keine Flucht mehr
	     zu halten. Das Bild darf zurueck auf die schmalere Breite, sonst
	     bleibt fuer die Funktionsbezeichnung daneben zu wenig uebrig. */
	.person__kopf {gap:1.25rem}
	.person__bild {width:7rem}
}

.partner__name {font-family:var(--wp--preset--font-family--serif);font-size:var(--wp--preset--font-size--titel-klein);font-weight:500}

/* --- Abschnitt ohne Flaeche ----------------------------------
   Wechselt mit dem gedeckten Grund ab, sodass zwei Sachabschnitte
   nicht ineinanderlaufen. Die Linie oben markiert die Naht. */
.block--hell {background:transparent;border-top:1px solid var(--linie-lokal)}

.block--hell .marke {color:var(--label-lokal)}

/* --- Einleitung ---------------------------------------------- */
.satz__text {font-size:var(--wp--preset--font-size--text);line-height:1.75;color:var(--wp--preset--color--fliesstext);max-width:var(--mass)}

.satz__text+.satz__text {margin-top:1.25rem}

.satz .reihe {max-width:var(--mass)}


.kontakt__text {margin-top:1.25rem;font-size:var(--wp--preset--font-size--text);line-height:1.7;
  color:var(--wp--preset--color--auf-dunkel-2);max-width:50ch}

.platzhalter-hinweis+* {margin-top:var(--wp--preset--spacing--eng)}

/* ============================================================
   KONTAKTSEITE
   Die Unterseiten schliessen bisher mit der kurzen Kontaktfrage
   und einem Knopf zur Startseite ab. Die Kontaktseite traegt das
   Formular selbst — dieselben Bausteine wie der Kontaktabschnitt
   der Startseite, damit beide Formulare nicht auseinanderlaufen.
   Die Regeln sind darum aus der Startseite uebernommen, nicht neu
   erfunden; wer eines von beiden aendert, aendert das andere mit.
   ============================================================ */
/* --- Schaltflaechen ------------------------------------------ */
.knopf {display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:.875rem 1.625rem;font-family:inherit;font-size:var(--wp--preset--font-size--klein);
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color .18s,color .18s,border-color .18s}

.knopf--akzent {background:var(--wp--preset--color--akzent);color:#fff}

.knopf--akzent:hover {background:var(--wp--preset--color--tinte)}

/* --- Modellgrafik -------------------------------------------
   Die Grafik steht neben der Kriterienliste, nicht darunter: sie
   zeigt dieselben fuenf Kriterien, und nebeneinander liest man das
   als eine Aussage statt als zwei. Die Breite der Bildspalte ergibt
   sich daraus, was die Liste daneben noch braucht — das Rad ist
   quadratisch und wuerde sonst die Seite dominieren.
   Diese eine Sektion traegt darum kein haengendes Randlabel: die
   Spalte, die es besetzen wuerde, geht an die Grafik. */
.modell-reihe {margin-top:var(--wp--preset--spacing--eng);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.6fr);
  gap:clamp(1.5rem,1rem + 2.5vw,3.5rem);align-items:start}

.modell-reihe .register {margin-top:0}

.modell-reihe .modell {margin-top:0}

.modell img {width:100%;max-width:36rem}

/* Die Beschriftung steht mittig unter dem Bild, nicht linksbuendig:
   sie gehoert zur Abbildung, nicht zur Textspalte daneben. Das Mass
   ist dasselbe wie beim Bild, sonst zentriert sie sich auf eine
   andere Breite als die, unter der sie steht. */
.modell figcaption {margin-top:.875rem;font-size:var(--wp--preset--font-size--mini);line-height:1.6;
  color:var(--label-lokal);max-width:36rem;text-align:center}

@media (max-width:820px) {
	.modell-reihe {grid-template-columns:1fr}
	.modell-reihe .modell {margin-top:var(--wp--preset--spacing--eng)}
}

/* --- Standortkarte -------------------------------------------
   Ein Bild, keine Einbettung: die Kachel eines Kartendienstes
   laedt bei jedem Aufruf von fremden Servern und gibt dabei die
   IP der Besucherin weiter — das zieht eine Einwilligung nach
   sich, die eine Adressangabe nicht braucht.
   Die Hairline steht, weil der helle Kartengrund sonst in den
   gedeckten Grund des Abschnitts ausfranst. */
.karte {margin-top:var(--wp--preset--spacing--eng)}

.karte img {width:100%;height:auto;border:1px solid var(--wp--preset--color--linie-stark)}

.karte figcaption {margin-top:.75rem;font-size:var(--wp--preset--font-size--mini);line-height:1.6;
  color:var(--label-lokal)}

.karte figcaption a {color:var(--wp--preset--color--akzent);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:1px}

.karte figcaption a:hover {color:var(--wp--preset--color--tinte)}

/* --- Kontaktabschnitt mit Formular ---------------------------
   Zwei Spalten: links die Ansprache und der direkte Draht, rechts
   das Formular. Beide oben buendig (align-items:start), damit der
   erste Feldtitel auf der Hoehe der Ueberschrift beginnt. */
.kontakt__titel {font-family:var(--wp--preset--font-family--serif);font-optical-sizing:auto;
  font-weight:600;font-size:var(--wp--preset--font-size--titel);line-height:1.14;letter-spacing:-.015em;color:#fff;
  max-width:18ch;text-wrap:balance}

.kontakt__unten {display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(2.5rem,1.5rem + 4vw,4.5rem);align-items:start}

.kontakt__direkt {margin-top:2.25rem;display:flex;flex-direction:column;gap:.25rem}

.kontakt__direkt a {font-family:var(--wp--preset--font-family--serif);font-optical-sizing:auto;font-weight:500;
  font-size:1.3125rem;color:#fff;text-decoration:none;width:fit-content}

.kontakt__direkt a:hover {color:var(--wp--preset--color--auf-dunkel-akzent)}

/* --- Formular ------------------------------------------------ */
.formular {border-top:1px solid var(--wp--preset--color--feldrand);padding-top:1.75rem}

/* minmax(0,1fr) statt 1fr: eine nackte 1fr-Spur wird nie schmaler als
   ihr Inhalt. Zwischen 821 und rund 900 Pixeln schob das Formular das
   Dokument dadurch ueber die Fensterbreite hinaus. */
.feldreihe {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.125rem}

.feld {display:flex;flex-direction:column;gap:.375rem}

.feld--breit {grid-column:1/-1}

.feld label {font-size:var(--wp--preset--font-size--mini);letter-spacing:.1em;text-transform:uppercase;
  color:var(--wp--preset--color--auf-dunkel-2)}

.feld .pflicht {color:var(--wp--preset--color--text-akzent-dunkel)}

.feld input,.feld textarea {background:transparent;border:0;border-bottom:1px solid var(--wp--preset--color--feldrand);
  color:#fff;padding:.625rem 0;font:inherit;font-size:var(--wp--preset--font-size--klein);min-height:44px;
  transition:border-color .18s}

.feld textarea {resize:vertical;min-height:5rem}

.feld input::placeholder,.feld textarea::placeholder {color:#8A847C}

.feld input:hover,.feld textarea:hover {border-bottom-color:var(--wp--preset--color--auf-dunkel-2)}

.feld input:focus,.feld textarea:focus {border-bottom-color:var(--wp--preset--color--auf-dunkel-akzent)}

/* :user-invalid statt :invalid — sonst faerbt sich jedes Pflichtfeld
   rot, bevor jemand ueberhaupt hineingetippt hat. */
.feld input:user-invalid,.feld textarea:user-invalid {border-bottom-color:#E8927A}

.einwilligung {grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:.625rem;
  align-items:start;font-size:var(--wp--preset--font-size--mini);line-height:1.6;color:var(--wp--preset--color--auf-dunkel-2)}

.einwilligung input {width:1.0625rem;height:1.0625rem;margin-top:.125rem;accent-color:var(--wp--preset--color--auf-dunkel-akzent)}

.einwilligung a {color:#fff}

.formular button {margin-top:1.75rem;width:100%}

.hinweis {margin-top:.875rem;font-size:var(--wp--preset--font-size--mini);line-height:1.6;color:var(--wp--preset--color--auf-dunkel-2)}

.hinweis--ok {color:var(--wp--preset--color--auf-dunkel-akzent);font-weight:600}

@media (max-width:820px) {
	.kontakt__unten {grid-template-columns:1fr}
	.feldreihe {grid-template-columns:1fr}
}

.knopf--voll {background:var(--wp--preset--color--tinte);color:var(--wp--preset--color--papier)}

.knopf--voll:hover {background:var(--wp--preset--color--akzent)}

.knopf--leer {background:transparent;color:var(--wp--preset--color--tinte);border-color:var(--wp--preset--color--rahmen-knopf)}

.knopf--leer:hover {border-color:var(--wp--preset--color--tinte)}

.mehr span {transition:transform .18s ease;display:inline-block}

.mehr:hover span {transform:translateX(3px)}

/* --- Hero: Zweispalter, grosses Bild als Blickfang -----------
   Inhalt links vertikal zentriert, Foto rechts ueber die volle
   Hero-Hoehe. Loest die fruehere tote Bodenzone auf. */
.hero {display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(1.5rem,.5rem + 3vw,3rem);align-items:stretch;
  min-height:clamp(30rem,72vh,42rem);
  padding-top:var(--wp--preset--spacing--normal);padding-bottom:var(--wp--preset--spacing--normal)}

.hero__inhalt {display:flex;flex-direction:column;justify-content:center}

/* Keine Hero-Eyebrow: das Muster ist ein AI-Tell und widerspricht
   B's Konzept (Eyebrow → haengende Randlabels). Der Hero traegt
   sich ueber Titel und Bild. */
/* hyphens:manual — die Auto-Trennung brach "Kompeten-zmanagement"
   falsch; jetzt nur an der &shy;-Stelle (Kompetenz-management). */
.hero__titel {font-family:var(--wp--preset--font-family--serif);font-weight:600;font-optical-sizing:auto;
  font-size:var(--wp--preset--font-size--titel-gross);line-height:1.04;letter-spacing:-.01em;
  color:var(--wp--preset--color--tinte);text-wrap:balance;hyphens:manual}

.hero__lead {margin-top:1.75rem;font-size:var(--wp--preset--font-size--lead);line-height:1.5;
  color:var(--wp--preset--color--fliesstext);max-width:32ch}

.hero__akt {margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:.75rem}

.hero__bild {overflow:hidden;border-left:1px solid var(--linie-lokal)}

.hero__bild img {width:100%;height:100%;object-fit:cover;object-position:center 22%}

@media (max-width:820px) {
	.hero {grid-template-columns:1fr;min-height:auto;padding-bottom:var(--wp--preset--spacing--eng)}
	.hero__bild {border-left:0;height:clamp(240px,44vh,360px);margin-top:var(--wp--preset--spacing--eng)}
}

/* --- Leistungen ---------------------------------------------- */
.leistungen {padding-bottom:var(--wp--preset--spacing--normal)}

.schwer a {display:flex;flex-direction:column;padding:clamp(1.5rem,1.1rem + 1.6vw,2.25rem) 0;
  padding-right:clamp(1.5rem,1rem + 2vw,3rem);text-decoration:none;color:inherit;
  border-bottom:1px solid var(--linie-lokal);transition:border-color .2s}

.schwer a+a {padding-left:clamp(1.5rem,1rem + 2vw,3rem);border-left:1px solid var(--linie-lokal)}

.schwer a:hover {border-bottom-color:var(--wp--preset--color--akzent)}

/* Uebrige vier: Hairline-Zeilen, Nummer im haengenden Rand */
.reihen {list-style:none}

.reihen a {display:grid;grid-template-columns:3rem minmax(0,1fr) 1.25rem;
  gap:0 clamp(1rem,.6rem + 1.4vw,1.75rem);align-items:baseline;
  padding:1.375rem 0;border-bottom:1px solid var(--linie-lokal);
  text-decoration:none;color:inherit;transition:transform .2s ease,border-color .2s}

.reihen a:hover {transform:translateX(.625rem);border-bottom-color:var(--wp--preset--color--akzent)}

.reihen .t {display:block;font-family:var(--wp--preset--font-family--serif);font-optical-sizing:auto;
  font-weight:500;font-size:var(--wp--preset--font-size--titel-klein);line-height:1.2;color:var(--wp--preset--color--tinte)}

.reihen a:hover .p {transform:translateX(4px)}

@media (max-width:820px) {
	.schwer a+a {padding-left:0;border-left:0}
	.schwer a {padding-right:0}
	.reihen a {grid-template-columns:2.25rem minmax(0,1fr)}
}

/* --- Haltung -------------------------------------------------- */
/* Unten 1.5rem weniger als oben: die Karten schliessen die Sektion
   ab, und ihre Flaeche traegt bereits Polsterung — der Abstand zur
   naechsten Sektion wirkt sonst groesser als er gemessen ist. */
.haltung {padding-block:var(--wp--preset--spacing--weit) calc(var(--wp--preset--spacing--weit) - 1.5rem);
  border-top:1px solid var(--linie-lokal)}

.haltung__unten {margin-top:var(--wp--preset--spacing--eng);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(2rem,1rem + 4vw,4rem);align-items:start}

.haltung__text {font-size:var(--wp--preset--font-size--text);line-height:1.75;color:var(--wp--preset--color--fliesstext);max-width:var(--mass)}

.haltung__cta {margin-top:1.5rem}

.haltung__bild img {width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%}

.haltung__bild figcaption {margin-top:.625rem;font-size:var(--wp--preset--font-size--mini);color:var(--label-lokal)}

@media (max-width:820px) {
	.haltung__unten {grid-template-columns:1fr}
}

/* --- Referenzen: ruhiges Raster, kein Laufband ---------------- */
.referenzen {padding-block:var(--wp--preset--spacing--normal);border-top:1px solid var(--linie-lokal)}

.logos {margin-top:var(--wp--preset--spacing--eng);display:grid;
  /* minmax(0,…): mit blossem 1fr schrumpfen die Zellen nicht unter
     die Min-Content-Breite der Logos und sprengen das Raster. */
  grid-template-columns:repeat(6,minmax(0,1fr));
  border-top:1px solid var(--linie-lokal);border-left:1px solid var(--linie-lokal)}

.logos div {border-right:1px solid var(--linie-lokal);border-bottom:1px solid var(--linie-lokal);
  /* feste Zellhoehe statt aspect-ratio: intrinsisch hohe Logos dehnten
     einzelne Zellen und rissen die Rasterlinien auf. */
  height:clamp(5rem,4rem + 3vw,6.25rem);display:grid;place-items:center;padding:.875rem}

.logos img {max-width:min(8.5rem,72%);max-height:2.25rem;width:auto;object-fit:contain;
  filter:grayscale(1) contrast(.88) opacity(.66)}

.logos__note {margin-top:1.125rem;font-size:var(--wp--preset--font-size--mini);color:var(--label-lokal)}

@media (max-width:820px) {
	.logos {grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --- Unterlagenzeile ohne Datei -------------------------------
   Die Whitepaper stehen im Kundenexport, die PDF liegen aber noch
   nicht vor. Bis dahin ist der Hinweis kein Link: ein Verweis, der
   auf den eigenen Container zeigt, aendert beim Klick nur die
   Adresszeile — fuer die Bedienung mit Tastatur oder Vorlesesoftware
   eine Station, die nichts tut. Der Text bleibt sichtbar, damit die
   Vorlage zeigt, was dort einmal steht. Sobald die Dateien da sind,
   wird wieder ein <a> daraus, mit vollem Namen (»Whitepaper
   Kompetenzmodell herunterladen«) statt blossem »Herunterladen«. */
.unterlage__link--offen {
  border-bottom-style:dotted;
  color:var(--label-lokal);
  cursor:default}

/* === Nachtrag: Eigenschaften, die beim Uebertragen ausfielen =====
   Der Uebertragungsfilter uebersprang eine Regel der Vorlage, sobald
   ihr Selektor im Theme schon vorkam — auch dann, wenn das Theme dort
   ganz andere Eigenschaften setzte. So verlor .nutzen__liste ihr
   zweispaltiges Raster und .schritte li ihre Rasterzellen: die
   Nummern standen als inline-Text von 8 statt 48 Pixeln Breite.

   Uebernommen ist nur, was im Theme fehlt — vorhandene Werte bleiben
   unangetastet. */

.abschnitt__lead {
	font-size:var(--wp--preset--font-size--text);
	color:var(--wp--preset--color--fliesstext);
}

.abschnitt__titel {
	font-weight:600;
	font-size:var(--wp--preset--font-size--titel);
	line-height:1.12;
	color:var(--wp--preset--color--tinte);
}

.grundsatz h3 {
	font-weight:500;
	font-size:var(--wp--preset--font-size--titel-klein);
	line-height:1.22;
	color:var(--wp--preset--color--tinte);
}

.grundsatz p {
	font-size:var(--wp--preset--font-size--klein);
	color:var(--wp--preset--color--fliesstext);
}

.haltung__satz {
	font-size:var(--wp--preset--font-size--titel);
	color:var(--wp--preset--color--tinte);
}

.netzwerk li {
	line-height:1.5;
}

.netzwerk__grad {
	font-size:var(--wp--preset--font-size--klein);
}

.nutzen__liste {
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	column-gap:clamp(1.5rem,1rem + 2.5vw,3.5rem);
}

.nutzen__liste li {
	display:grid;
	grid-template-columns:1.75rem minmax(0,1fr);
	gap:.5rem;
	align-items:baseline;
	color:#fff;
}

.partner__link {
	align-items:baseline;
	gap:.4375rem;
	border-bottom:1px solid currentColor;
}

.person {
	border-top:1px solid var(--linie-lokal);
}

.person__name {
	font-size:var(--wp--preset--font-size--titel-klein);
	font-weight:600;
}

.person__rolle {
	max-width:62ch;
}

.publikationen li {
	display:grid;
	grid-template-columns:10rem minmax(0,1fr);
	gap:0 clamp(1rem,.6rem + 1.4vw,1.75rem);
	align-items:baseline;
}

.publikationen__titel {
	/* Serif wie in der Vorlage. Die Schriftart aendert hier auch die
	   Breite: max-width steht in ch, und ein ch ist die Nullbreite der
	   jeweiligen Schrift — mit Karla mass der Titel 563 statt 692px. */
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--titel-klein);
	font-weight: 500;
	line-height: 1.3;
}

.reihen .n {
	font-size:var(--wp--preset--font-size--klein);
	color:var(--wp--preset--color--akzent);
}

.schritte {
	border-top:1px solid var(--linie-lokal);
}

.schritte li {
	display:grid;
	grid-template-columns:3rem minmax(0,1fr);
	gap:0 clamp(1rem,.6rem + 1.4vw,1.75rem);
	align-items:baseline;
	padding:1rem 0;
	border-bottom:1px solid var(--linie-lokal);
	font-size:var(--wp--preset--font-size--text);
	line-height:1.6;
	color:var(--wp--preset--color--fliesstext);
}

.schwer__n {
	font-size:clamp(2.25rem,1.5rem + 3vw,3.75rem);
	color:var(--wp--preset--color--akzent);
}

.schwer__t {
	font-weight:500;
	font-size:var(--wp--preset--font-size--titel-klein);
	line-height:1.2;
	color:var(--wp--preset--color--tinte);
}

/* Unter 820px bleibt fuer zwei Spalten zu wenig: der Begriff steht
   dann ueber seiner Erlaeuterung. Die Regel fehlte als einzige der
   stapelnden Bausteine — die Angabenliste haette auf dem Smartphone
   152 Pixel fuer den Begriff behalten und 238 fuer den Wert. */
@media (max-width: 820px) {
	.person__angaben {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.person__angaben dd {
		margin-bottom: 0.75rem;
	}
}

/* Unter 820px bleibt fuer zwei Spalten zu wenig Platz. Beide Regeln
   fehlten: die Nutzenliste quetschte ihre Eintraege auf 162 Pixel bei
   197 Pixel Inhalt, und die Publikationen behielten ihre 10rem-Spalte
   fuer die Nummer. */
@media (max-width: 820px) {
	.nutzen__liste {
		grid-template-columns: 1fr;
	}

	.publikationen li {
		grid-template-columns: 1fr;
		row-gap: 0.25rem;
	}
}


/* === Zweiter Nachtrag: was beim Aufraeumen verlorenging ==========
   Beim Entfernen der doppelten Regeln sind Eigenschaften mitgegangen,
   die nur dort standen. Am deutlichsten sichtbar: mehreren Titeln
   fehlte font-family — sie standen in Karla statt Source Serif und
   wirkten dadurch schwerer als in der Vorlage. Dazu font-optical-
   sizing, das die Strichstaerke der Schriftgroesse folgen laesst.

   Uebernommen ist, was die Vorlage setzt und das Theme nicht. Zwei
   Abweichungen bleiben bewusst: .block malt seinen Grund nicht mehr
   selbst (das tut is-style-flaeche-gedeckt), und die Hover-Bewegung
   der Reihen laeuft ueber transform statt padding-left. */

.abschnitt__titel {
	font-family: var(--wp--preset--font-family--serif);
	font-optical-sizing: auto;
	letter-spacing: -.015em;
}

.grundsatz h3 {
	font-family: var(--wp--preset--font-family--serif);
	font-optical-sizing: auto;
}

.haltung__satz {
	font-family: var(--wp--preset--font-family--serif);
	font-optical-sizing: auto;
}

.marke {
	font-family: var(--wp--preset--font-family--sans);
}

.nutzen__liste li {
	padding: .875rem 0;
	font-size: var(--wp--preset--font-size--text);
	line-height: 1.5;
}

.partner__link {
	padding-bottom: 2px;
}

.person__name {
	font-family: var(--wp--preset--font-family--serif);
}

.publikationen__nr {
	font-variant-numeric: tabular-nums;
}

.register {
	list-style: none;
}

.reihen .n {
	font-family: var(--wp--preset--font-family--serif);
	font-optical-sizing: auto;
}

.schritte {
	list-style: none;
	margin-top: 1.5rem;
}

.schwer__n {
	font-family: var(--wp--preset--font-family--serif);
	font-optical-sizing: auto;
}

.schwer__t {
	font-family: var(--wp--preset--font-family--serif);
	font-optical-sizing: auto;
}

.zurueck {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	text-decoration: none;
}

/* --- Karten -------------------------------------------------
   Aufzaehlungen, deren Eintraege gleichrangig sind und keine
   Reihenfolge haben: nebeneinander gelesen sind es drei Haltungen
   oder vier Disziplinen, untereinander liest sich dieselbe Liste wie
   eine Rangfolge.

   Der Baustein setzt auf .register und .partner auf und raeumt deren
   Zeilenform ab — Raster im Eintrag, Polsterung, Trennlinie. Er steht
   darum am Ende der Datei: bei gleicher Spezifitaet entscheidet die
   Reihenfolge, und beide Bausteine kommen weiter oben mehrfach vor.

   Es sind Flaechen, keine Kaertchen: kein Radius, kein Schatten, kein
   Anheben beim Ueberfahren. Die Spaltenzahl steht als eigener Wert,
   damit eine Zusatzklasse genuegt statt einer zweiten Rasterregel.

   grid-column greift nur, wo die Liste als Zelle im haengenden Rand
   steht — dort spannt sie ueber beide Spalten und schliesst links an
   das Randlabel an; in einer gewoehnlichen Bahn ist die Angabe
   wirkungslos. */
.karten {
	--karten-spalten: 2;
	list-style: none;
	margin-top: var(--wp--preset--spacing--eng);
	margin-bottom: 0;
	padding-left: 0;
	border-top: 0;
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(var(--karten-spalten), minmax(0, 1fr));
	gap: clamp(1.25rem, 0.9rem + 1.4vw, 1.75rem);
}

.karten--drei {
	--karten-spalten: 3;
}

.karten > li {
	display: block;
	border: 0;
	padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
	background: var(--wp--preset--color--flaeche-gedeckt);
}

.karten .register__text {
	margin-top: 0.875rem;
	max-width: none;
}

/* Steht die Liste selbst auf dem gedeckten Grund, waere die Karte in
   derselben Farbe unsichtbar. Dort traegt sie den Papierton — ohne
   Kontur: der Tonwechsel allein grenzt sie ab, wie die uebrigen
   Flaechen der Seite auch. Der helle Abschnitt (block--hell) ist
   ausgenommen, dort ist die Karte die gedeckte Flaeche. */
.block:not(.block--hell) .karten > li {
	background: var(--wp--preset--color--papier);
}

@media (max-width: 820px) {
	.karten {
		grid-template-columns: 1fr;
	}
}

/* --- Fussbereich: Verweise ------------------------------------
   Die Spaltenverweise tragen keine Unterstreichung und den Ton des
   Fliesstexts, nicht den Akzent: sie stehen als Liste untereinander,
   jeder Absatz ist genau ein Verweis. Was sie voneinander abhebt, ist
   ihre Stellung, nicht ihre Farbe — eine Unterstreichung je Zeile
   ergaebe ein Streifenmuster ohne Zusatznutzen.

   Die Leiste unten macht es umgekehrt: dort stehen «Impressum» und
   «Datenschutz» in einer Zeile neben einem Zeichen und dem
   Jahresvermerk. Wo Verweise im Fliess einer Zeile stehen, bleibt die
   Unterstreichung — ohne sie waere allein die Farbe der Unterschied,
   und das genuegt nicht (WCAG 1.4.1). Die Farbe erbt der Verweis vom
   Absatz, damit die Zeile einen Ton hat. */
.fuss__spalte a {
	color: var(--wp--preset--color--fliesstext);
	text-decoration: none;
}

.fuss__spalte a:hover {
	color: var(--wp--preset--color--tinte);
}

.fuss__leiste a {
	color: inherit;
}

/* Das Logo ist ein Bild in einem Verweis — eine Unterstreichung haengt
   dort unter dem Bild und gehoert zu nichts. */
.kopf__logo a,
.fuss__logo a {
	text-decoration: none;
}

/* --- Menü und Untermenü ---------------------------------------
   Der Navigationsblock von WordPress bringt seine eigene Gestaltung
   mit: weisser Grund, ein Rand aus 15% Schwarz, keine Trennlinien,
   Verweise ohne Mindesthoehe. Die Vorlage macht daraus eine Flaeche
   der Seite — Papierton, kraeftige Kontur, Haarlinien dazwischen.

   min-height am Hauptmenue-Verweis loest zweierlei auf einmal: die
   Verweise waren 17 Pixel hoch und damit weit unter den 24, die WCAG
   2.5.8 fuer ein eigenstaendiges Ziel fordert; und das Untermenue
   haengt an top:100% seines Elternteils, sass darum neun Pixel zu
   hoch und beruehrte den Menuepunkt fast. */
.wp-block-navigation .wp-block-navigation-item__content {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--fliesstext);
	font-size: var(--wp--preset--font-size--klein);
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content[aria-current] {
	color: var(--wp--preset--color--tinte);
}

/* Derselbe Selektor wie WordPress, nicht ein kuerzerer: der Kern setzt
   Grund und Rand ueber
   `.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container`
   und gewinnt gegen eine einzelne Klasse. Gleich spezifisch heisst hier
   gleich stark — und dieses Stylesheet laedt spaeter. */
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	min-width: 260px;
	background: var(--wp--preset--color--papier);
	border: 1px solid var(--wp--preset--color--linie-stark);
}

.wp-block-navigation__submenu-container li + li {
	border-top: 1px solid var(--wp--preset--color--linie);
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	gap: 0.75rem;
	width: 100%;
	padding: 0.5rem 0.875rem;
	min-height: 44px;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--papier-2);
	color: var(--wp--preset--color--tinte);
}

/* Die Nummern der Leistungen entstehen aus der Position, nicht aus dem
   Markup: der Navigationsblock laesst in einem Verweistext kein
   eigenes Element zu, in das sich eine Zahl setzen liesse. Sie sind
   ohnehin eine Positionsangabe — 01 bis 06 ist die Reihenfolge der
   Leistungen, keine Angabe ueber die einzelne.

   Nur an dem Untermenue, das die Klasse traegt. Ein zweites Untermenue
   (in der Vorlage «Ueber uns») fuehrt Sprungziele einer Seite und hat
   keine Reihenfolge, die eine Zahl behaupten duerfte. */
.menu--nummeriert .wp-block-navigation__submenu-container {
	counter-reset: gfo-leistung;
}

.menu--nummeriert .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	counter-increment: gfo-leistung;
	content: counter(gfo-leistung, decimal-leading-zero);
	color: var(--wp--preset--color--akzent);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 980px) {
	/* Aufgeklappt steht das Untermenü im Fluss, nicht als Kasten
	   darüber — Rand und Grund gehören dann zum Menü darum herum. */
	.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
		min-width: 0;
		border: 0;
		background: transparent;
	}
}