/*
Theme Name: Schichten
Theme URI: https://www.fm-berger.de/
Author: Frank Berger IT-Dienstleistungen
Author URI: https://www.fm-berger.de/
Description: Block-Theme nach dem Design System „Schichten“. Die drei Balken der Wortmarke stehen für drei Systemschichten. Ohne Zusatz-Plugins, ohne externe Ressourcen: Schriften, Stile und Skripte kommen ausschließlich vom eigenen Server.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.4.9
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: schichten
Tags: block-theme, full-site-editing, one-column, accessibility-ready, blog, portfolio

Die Schriften Fira Sans, Fira Sans Condensed und Fira Mono stehen unter der
SIL Open Font License 1.1, siehe assets/fonts/OFL.txt. Sie liegen als
woff2-Teilzeichensatz im Theme und werden von keinem fremden Server geladen.
*/

/* =========================================================================
   1. Tokens
   Uebernommen aus designsystem/tokens.css. Einzige Quelle fuer Farbwerte.
   Kommt ein Corporate Design, werden hier nur Hexwerte und Schriftnamen
   ersetzt; Layouts und Bausteine bleiben bestehen.
   ========================================================================= */

:root {
	color-scheme: light;

	/* Blau-Rampe, Anker 500 = Logo-Blau */
	--blau-100: #D6EBFF;
	--blau-200: #B2D5F7;
	--blau-300: #86BAEB;
	--blau-400: #579BD8;
	--blau-450: #3E93D0;
	--blau-500: #0065A8;
	--blau-600: #005595;
	--blau-700: #003F76;
	--blau-800: #002C59;
	--blau-900: #001B3D;

	/* Rollen, heller Grund */
	--grund:            #EAF0F5;
	--flaeche:          #FFFFFF;
	--tinte:            #0C1F2B;
	--tinte-sekundaer:  #425A66;
	--tinte-gedaempft:  #546C7B;
	--haarlinie:        #CBD9E2;
	--linie:            #B8C8D2;
	--akzent:           #0065A8;
	--akzent-still:     #D6EBFF;
	--signal:           #C4571B;
	/* Koralle aus den Druckdaten v3 (dort #EE765A). Auf hellem Grund so weit
	   abgedunkelt, dass grosse Zahlen und Grafik 3 : 1 erreichen. */
	--koralle:          #EB5B3A;

	/* Schichtbalken aus der Wortmarke. Reihenfolge ist bindend. */
	--balken-1: #86BAEB;   /* oben:  Datenschicht    */
	--balken-2: #0065A8;   /* mitte: Betriebsschicht */
	--balken-3: #6B8391;   /* unten: Edge            */
	--balken-h:   6px;
	--balken-gap: 4px;

	/* Schrift */
	--schrift-display: var(--wp--preset--font-family--display);
	--schrift-text:    var(--wp--preset--font-family--text);
	--schrift-daten:   var(--wp--preset--font-family--daten);
	--sperrung-eyebrow: 0.14em;

	/* Raster, Grundeinheit 8px */
	--e1:  8px;
	--e2: 16px;
	--e3: 24px;
	--e4: 32px;
	--e5: 40px;
	--e6: 56px;
	--e7: 72px;
	--e8: 96px;

	--radius: 3px;

	/* --- Ergaenzung fuer den Bildschirm (aus tokens-web.css) --------------
	   Die Folienskala ist auf projizierte 1280x720 ausgelegt und hier zu
	   gross. Keine Farbe wird neu definiert, nur Groessen und Abstaende. */
	--tg-web-titel:      clamp(38px, 1.8rem + 3.4vw, 58px);
	--tg-web-seite:      clamp(32px, 1.6rem + 2.2vw, 46px);
	--tg-web-abschnitt:  clamp(26px, 1.4rem + 1.1vw, 34px);
	--tg-web-zwischen:   22px;
	--tg-web-vorspann:   clamp(19px, 1.1rem + 0.4vw, 22px);
	--tg-web-text:       18px;
	--tg-web-klein:      15px;

	--seitenrand:        clamp(20px, 5vw, 72px);
	--abschnitt-abstand: clamp(56px, 7vw, 96px);
	/* Eine Satzbreite fuer alle Seiten und Artikel, seit 1.4.5 (vorher 680,
	   Artikel 760). Muss zu settings.layout.contentSize in theme.json passen. */
	--breite-text:       760px;
	--breite-breit:      1200px;
}

/* Dunkler Grund. Anders als beim Foliensatz gewollt: eine Folie wird
   projiziert und behaelt ihren Grund, eine Webseite wird gelesen, oft abends.
   Werte aus tokens.css, dort bereits auf Kontrast geprueft. */
@media (prefers-color-scheme: dark) {
	:root:where(:not([data-theme="light"])) {
		color-scheme: dark;
		--grund:            #08202F;
		--flaeche:          #0E2C3E;
		--tinte:            #EEF4F8;
		--tinte-sekundaer:  #A9C2D0;
		--tinte-gedaempft:  #7C97A6;
		--haarlinie:        #1C4054;
		--linie:            #2A566E;
		--akzent:           #579BD8;
		--akzent-still:     #12354B;
		--signal:           #E08A55;
		--koralle:          #EE765A;
		--balken-1: #579BD8;
		--balken-2: #3E93D0;
		--balken-3: #4E6E7E;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--grund:            #08202F;
	--flaeche:          #0E2C3E;
	--tinte:            #EEF4F8;
	--tinte-sekundaer:  #A9C2D0;
	--tinte-gedaempft:  #7C97A6;
	--haarlinie:        #1C4054;
	--linie:            #2A566E;
	--akzent:           #579BD8;
	--akzent-still:     #12354B;
	--signal:           #E08A55;
	--koralle:          #EE765A;
	--balken-1: #579BD8;
	--balken-2: #3E93D0;
	--balken-3: #4E6E7E;
}

/* Farben, die im Editor gewaehlt werden, an die Rollen-Tokens haengen, damit
   sie dem Dunkelmodus folgen. WordPress schreibt die Preset-Variablen auf
   `body`; `html body` hat hoehere Spezifitaet und gewinnt unabhaengig von der
   Ladereihenfolge. `blau-fest` und `weiss-fest` bleiben bewusst aussen vor:
   der blaue Block ist in beiden Modi blau mit weisser Schrift. */
html body {
	--wp--preset--color--grund:           var(--grund);
	--wp--preset--color--flaeche:         var(--flaeche);
	--wp--preset--color--tinte:           var(--tinte);
	--wp--preset--color--tinte-sekundaer: var(--tinte-sekundaer);
	--wp--preset--color--tinte-gedaempft: var(--tinte-gedaempft);
	--wp--preset--color--akzent:          var(--akzent);
	--wp--preset--color--akzent-still:    var(--akzent-still);
	--wp--preset--color--signal:          var(--signal);
	--wp--preset--color--haarlinie:       var(--haarlinie);
	--wp--preset--color--linie:           var(--linie);
	--wp--preset--color--saeule-1:        var(--balken-1);
	--wp--preset--color--saeule-2:        var(--balken-2);
	--wp--preset--color--saeule-3:        var(--balken-3);
}

/* =========================================================================
   2. Grundlagen
   ========================================================================= */

body {
	background: var(--grund);
	color: var(--tinte);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, textarea, select):focus-visible {
	outline: 2px solid var(--akzent);
	outline-offset: 2px;
}

::selection { background: var(--akzent-still); color: var(--tinte); }

img, svg, video { max-width: 100%; height: auto; }

/* Bilder ohne eigene Kontur setzen sich vom getoenten Grund selbst ab. */
.wp-block-image img { border-radius: var(--radius); }

/* =========================================================================
   3. Bausteine des Design Systems
   Uebernommen aus designsystem/folie.css, nur die auf dem Bildschirm
   gebrauchten Teile.
   ========================================================================= */

/* Rubrik: Mono, versal, gesperrt. Traegt kurze Bezeichnungen, nie den Claim. */
.eyebrow,
.wp-block-post-terms.eyebrow {
	font-family: var(--schrift-daten);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--sperrung-eyebrow);
	text-transform: uppercase;
	color: var(--akzent);
	margin: 0;
}

/* Claim-Zeile: bewusst OHNE Versalsetzung. In Grossbuchstaben wirkt der Satz
   geschrien und weicht vom Wortlaut auf Website und LinkedIn ab. */
.claim-zeile {
	font-family: var(--schrift-daten);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.05em;
	margin: 0;
}

/* Schichtenzeichen: drei Balken wie in der Wortmarke. */
.schichten {
	display: flex;
	flex-direction: column;
	gap: var(--balken-gap);
	width: 26px;
	flex: 0 0 auto;
}
.schichten > i { display: block; height: var(--balken-h); background: var(--balken-1); }
.schichten > i:nth-child(2) { background: var(--balken-2); }
.schichten > i:nth-child(3) { background: var(--balken-3); }

/* Waagerechtes Lineal in Satzbreite, als Trenner. */
.schichten-lineal {
	display: flex;
	flex-direction: column;
	gap: var(--balken-gap);
	width: 100%;
}
.schichten-lineal > i { display: block; height: 3px; background: var(--balken-1); }
.schichten-lineal > i:nth-child(2) { background: var(--balken-2); }
.schichten-lineal > i:nth-child(3) { background: var(--balken-3); }

/* Als Blockstil auf core/separator, damit er im Editor waehlbar ist.
   Drei Streifen zu 3 px mit 4 px Abstand, gezeichnet als Hintergrund: so
   braucht der Kernblock kein zusaetzliches Markup. */
.wp-block-separator.is-style-schichten-lineal {
	border: none;
	opacity: 1;
	width: 100%;
	max-width: none;
	height: 17px;
	margin-block: var(--e3);
	background:
		linear-gradient(var(--balken-1) 0 0) 0 0    / 100% 3px no-repeat,
		linear-gradient(var(--balken-2) 0 0) 0 7px  / 100% 3px no-repeat,
		linear-gradient(var(--balken-3) 0 0) 0 14px / 100% 3px no-repeat;
}

/* Aufzaehlung mit Schichtbalken statt Punkt. Blockstil auf core/list. */
.liste,
/* Kein margin-top: Den Abstand nach oben setzt der blockGap des Kerns.
   Bis 1.2.0 stand hier `margin: 0`, dadurch klebten Listen an der
   Überschrift oder dem Absatz davor. */
.wp-block-list.is-style-schichten-liste {
	list-style: none;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--e2);
}
/* Seit 1.4.9 Einrückung mit positioniertem Balken statt Raster. Im Raster
   wurde jedes Inline-Element im Text (fett, Link, `.zusammen`) zu einer
   eigenen Rasterzelle und rutschte in eine neue Zeile. */
.liste > li,
.wp-block-list.is-style-schichten-liste > li {
	position: relative;
	padding-left: calc(22px + var(--e2));
}
.liste > li::before,
.wp-block-list.is-style-schichten-liste > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 22px;
	height: 4px;
	background: var(--balken-2);
}
.liste > li:nth-child(3n+1)::before,
.wp-block-list.is-style-schichten-liste > li:nth-child(3n+1)::before { background: var(--balken-1); }
.liste > li:nth-child(3n+3)::before,
.wp-block-list.is-style-schichten-liste > li:nth-child(3n+3)::before { background: var(--balken-3); }

/* Tabelle: Kopfzeile Mono versal, Zahlen mit Tabellenziffern rechtsbuendig.
   Die Selektoren sind bewusst eine Stufe spezifischer als die Kernstile des
   Tabellenblocks (`.wp-block-table td`), weil dessen CSS je nach Einstellung
   nach diesem Stylesheet geladen wird und sonst `border: 1px solid` in
   currentColor gewinnt. */
.wp-block-table table,
.tabelle {
	width: 100%;
	border-collapse: collapse;
	font-size: 17px;
}
.wp-block-table table th,
.wp-block-table table td,
.tabelle th,
.tabelle td {
	padding: 11px var(--e2) 11px 0;
	text-align: left;
	border: none;
	border-bottom: 1px solid var(--haarlinie);
	/* Seit 1.4.7: Wörter nicht mitten im Wort trennen (vorher „Woch|en“ in
	   schmalen ersten Spalten). Die Spalte wird so breit wie ihr längstes Wort. */
	overflow-wrap: normal;
	word-break: normal;
}
/* Der Kernstil setzt `thead { border-bottom: 3px solid }` ohne Farbangabe,
   also in currentColor. Beim Zusammenfallen der Raender gewinnt die dickere
   Linie, deshalb muss thead selbst gesetzt werden, nicht nur th. */
.wp-block-table table thead,
.tabelle thead { border-bottom: 2px solid var(--linie); }
.wp-block-table table tfoot,
.tabelle tfoot { border-top: 2px solid var(--linie); }

.wp-block-table table thead th,
.tabelle thead th {
	font-family: var(--schrift-daten);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--sperrung-eyebrow);
	text-transform: uppercase;
	color: var(--tinte-gedaempft);
	border-bottom: 2px solid var(--linie);
	padding-bottom: var(--e1);
}
.wp-block-table table tbody tr:last-child td,
.tabelle tbody tr:last-child td { border-bottom: none; }
.tabelle .num,
.wp-block-table .num {
	text-align: right;
	font-family: var(--schrift-daten);
	font-variant-numeric: tabular-nums;
}
/* Breite Tabellen scrollen im eigenen Kasten, die Seite selbst nie. */
.wp-block-table { overflow-x: auto; }

/* Karte: haarfeine Kontur, kein Schatten, kaum Radius. */
.karte {
	background: var(--flaeche);
	border: 1px solid var(--haarlinie);
	border-radius: var(--radius);
	padding: var(--e3);
}
.wp-block-group.is-style-schichten-tafel {
	background: var(--flaeche);
	border: 1px solid var(--haarlinie);
	border-radius: var(--radius);
	padding: var(--e4);
}

/* =========================================================================
   4. Kopfbereich
   Seit 1.4.0 im Logo-Blau mit Codemotiv, wie die Kopfflächen von Rollups,
   Flyer und Visitenkarte. Bleibt in beiden Modi blau, genau wie der
   Startblock: es ist die Markenfläche, nicht der Seitengrund.
   ========================================================================= */

/* Der Kopfbereich selbst darf KEIN Flex-Container sein: die Blockgruppe darin
   wuerde sonst zum Flex-Element und auf Inhaltsbreite schrumpfen, und die
   auto-Raender aus dem Blocklayout wuerden sie mittig setzen statt an die
   Satzkante. Die Flex-Anordnung macht die Gruppe darin. */
.kopf {
	--kopf-text: #FFFFFF;
	--kopf-text-still: #D6ECFA;
	position: relative;
	/* Kein overflow: hidden, sonst verschwaende das Untermenue. Das
	   Codemotiv beschneidet sich selbst. z-index, damit das Untermenue ueber
	   dem Inhalt darunter liegt. */
	z-index: 20;
	background: var(--blau-500);
	color: var(--kopf-text);
}
/* Wortmarke links, Navigation rechts, beide am Seitenrand statt auf 1200 px
   eingerueckt. So steht es im Entwurf; der Fussbereich ist dagegen auf die
   Satzbreite begrenzt. `margin-block-start: 0`, weil die Zeile im
   Blocklayout hinter dem Codemotiv steht und sonst den blockGap erbt. */
.kopf > .kopf-zeile {
	position: relative;
	z-index: 1;
	max-width: none;
	min-height: 96px;
	margin-block-start: 0;
	padding-block: 14px;
}
/* Das Codemotiv liegt im Blocklayout. Breite und Raender des Kerns
   (`max-width` der Inhaltsbreite, auto-Raender mit !important) zuruecknehmen,
   sonst endet die Textur bei 1200 px. */
.kopf > .codegrund,
.kopf-start > .codegrund {
	max-width: none !important;
	margin: 0 !important;
}

/* Wortmarke wie im Druck: Name in Fira Sans, darunter die drei Balken und
   die Geschaeftsbezeichnung. Auf Blau gelten die Balkenfarben des
   Startblocks: der mittlere, weisse Balken ist der staerkste. */
.kopf-marke { gap: 6px; }
.wortmarke {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	color: var(--kopf-text);
	text-decoration: none;
	line-height: 1;
}
.wortmarke:hover { color: var(--kopf-text); text-decoration: none; }
.wortmarke:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; }
.wortmarke-name {
	font-family: var(--schrift-text);
	font-weight: 600;
	font-size: 28px;
	letter-spacing: -0.01em;
}
.wortmarke-zeile {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--schrift-text);
	font-weight: 400;
	font-size: 16px;
	color: var(--kopf-text-still);
}
.wortmarke .schichten { width: 24px; gap: 3px; }
.wortmarke .schichten > i { height: 4px; background: #8CBAD8; }
.wortmarke .schichten > i:nth-child(2) { background: #FFFFFF; }
.wortmarke .schichten > i:nth-child(3) { background: #4C93C2; }

.kopf-werkzeuge { flex: 0 1 auto; }

/* Navigation. Aktiver Punkt bekommt einen Balken unter dem Wort, nicht eine
   andere Textfarbe: Farbe allein traegt im System nie eine Bedeutung. */
.kopf .wp-block-navigation {
	font-family: var(--schrift-text);
	font-size: 16px;
	font-weight: 600;
}
.kopf .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--kopf-text);
	text-decoration: none;
	padding-bottom: 6px;
	border-bottom: 2px solid transparent;
}
.kopf .wp-block-navigation .wp-block-navigation-item__content:hover {
	border-bottom-color: rgba(255, 255, 255, 0.45);
	color: var(--kopf-text);
}
.kopf .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.kopf .wp-block-navigation .current_page_item > .wp-block-navigation-item__content,
.kopf .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	border-bottom-color: #FFFFFF;
}
.kopf .wp-block-navigation a:focus-visible,
.kopf .wp-block-navigation button:focus-visible {
	outline-color: #FFFFFF;
}
.kopf .wp-block-navigation__responsive-container-open { color: var(--kopf-text); }

/* Untermenue (seit 1.4.4, wie auf www.fm-berger.de). Oeffnet beim
   Ueberfahren und per Klick auf den Pfeil; der Menuepunkt selbst bleibt ein
   Link auf die Uebersichtsseite. Weisse Karte mit Haarlinie wie im System,
   kein Schatten. */
.kopf .wp-block-navigation .wp-block-navigation__submenu-icon {
	color: var(--kopf-text);
	margin-left: 4px;
}
.kopf .wp-block-navigation .has-child > .wp-block-navigation-item__content { padding-bottom: 6px; }
.kopf .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--flaeche);
	color: var(--tinte);
	border: 1px solid var(--haarlinie);
	border-radius: var(--radius);
	padding: var(--e1) 0;
	margin-top: 6px;
}
/* Linksbuendig unter dem Menuepunkt, Text auf der Kante von „Leistungen“.
   Der Kern setzt bei rechtsbuendiger Navigation right: 0. */
.kopf .wp-block-navigation.items-justified-right .has-child > .wp-block-navigation__submenu-container {
	left: -17px;
	right: auto;
}
/* Die Luecke von 6 px darf das Hover nicht abreissen lassen. */
.kopf .wp-block-navigation .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -8px;
	height: 8px;
}
.kopf .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--tinte);
	font-weight: 500;
	/* Kein Umbruch: der Kern setzt die Breite auf mindestens 200 px und
	   laesst laengere Namen sonst zweizeilig laufen. */
	white-space: nowrap;
	padding: 10px var(--e2) 10px calc(var(--e2) - 3px);
	border-bottom: none;
	border-left: 3px solid transparent;
}
.kopf .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--akzent-still);
	color: var(--tinte);
}
.kopf .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
.kopf .wp-block-navigation .wp-block-navigation__submenu-container .current_page_item > .wp-block-navigation-item__content {
	border-left-color: var(--akzent);
}

/* Schalter hell/dunkel. Zeigt das Ziel, nicht den Zustand: im hellen Modus
   den Mond, im dunklen die Sonne. Der Zustand selbst steht in aria-pressed. */
.farbschema-schalter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--radius);
	background: transparent;
	color: var(--kopf-text);
	cursor: pointer;
}
.farbschema-schalter[hidden] { display: none; }
.farbschema-schalter:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.7); }
.farbschema-schalter:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.farbschema-schalter .farbschema-sonne { display: none; }
.farbschema-schalter[aria-pressed="true"] .farbschema-sonne { display: block; }
.farbschema-schalter[aria-pressed="true"] .farbschema-mond { display: none; }

/* Umbruchpunkt der Navigation von 600 px auf 860 px vorziehen. Der Kernblock
   bringt die Vollflaechen-Ueberlagerung mit, nur die Schwelle passt nicht:
   Wortmarke plus vier Punkte werden darunter zu eng. Spezifitaet entspricht
   den Kernregeln, dieses Stylesheet laedt danach. */
@media (max-width: 859px) {
	.kopf .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	.kopf .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.kopf .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
		background: var(--grund);
		color: var(--tinte);
	}
	/* Die Ueberlagerung liegt auf dem Seitengrund, nicht auf Blau: dort
	   gelten wieder die Rollenfarben. */
	.kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-family: var(--schrift-display);
		font-size: 26px;
		color: var(--tinte);
		border-bottom: none;
		padding-bottom: 0;
	}
	.kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
		color: var(--akzent);
	}
	/* Vollbildmenue linksbuendig: mit offenen Unterpunkten liest sich eine
	   rechtsbuendige Liste schlecht. */
	.kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		align-items: flex-start !important;
		text-align: left;
	}
	/* Im Vollbildmenue stehen die Unterseiten offen und eingerueckt unter
	   ihrem Menuepunkt, kleiner, ohne Karte. */
	.kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		background: transparent;
		border: none;
		min-width: 0;
		margin: 0;
		padding: var(--e1) 0 0 var(--e2);
	}
	.kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-family: var(--schrift-text);
		font-size: 18px;
		font-weight: 500;
		padding: 6px 0;
		border-left: none;
		color: var(--tinte-sekundaer);
	}
	.kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { display: none; }
}

/* Startseite: Kopf wie auf allen Unterseiten (Logo-Blau mit Codemotiv).
   Der Startblock steht seit 1.4.4 auf dem Seitengrund wie die Unterseiten,
   ein Codemotiv darin wird nicht gezeigt. */
.kopf-start > .codegrund { display: none; }

/* =========================================================================
   5. Kopfblock der Startseite
   ========================================================================= */

.kopf-start {
	position: relative;
	/* Seit 1.4.4 auf dem Seitengrund, hell oder dunkel, wie der Kopfblock
	   der Unterseiten. Bis 1.4.3 Logo-Blau. */
	padding-top: var(--e7) !important;
	padding-bottom: var(--e4) !important;
	display: grid;
	background: transparent;
	color: var(--tinte);
}
/* Der Textblock steht an der linken Kante der breiten Spalte (1200 px), wie
   Kennzahlen und Abschnitte darunter. Die auto-Raender des Blocklayouts
   tragen !important und muessen so zurueckgenommen werden. */
.kopf-start > .wp-block-group {
	max-width: var(--breite-text);
	margin-inline-start: max(0px, calc((100% - var(--breite-breit)) / 2)) !important;
	margin-inline-end: auto !important;
}
.kopf-start h1 {
	font-family: var(--schrift-display);
	font-size: var(--tg-web-titel);
	line-height: 1.06;
	color: var(--tinte);
	max-width: none;
	margin: 0;
}
.kopf-start .kopf-start-vorspann {
	font-size: var(--tg-web-vorspann);
	line-height: 1.5;
	color: var(--tinte-sekundaer);
	max-width: 48ch;
}
.kopf-start .schichten { width: 44px; }

/* Drei Aussagen wie auf Rollup 1: Balken statt Punkt in den Farben der
   Wortmarke (Rollenfarben, folgen dem Dunkelmodus). */
.kopf-start .kopf-start-liste {
	list-style: none;
	padding: 0;
	margin-left: 0;
	margin-right: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.kopf-start .kopf-start-liste > li {
	position: relative;
	padding-left: calc(36px + var(--e2));
	color: var(--tinte);
	font-weight: 600;
	font-size: clamp(18px, 1rem + 0.4vw, 21px);
	line-height: 1.4;
}
.kopf-start .kopf-start-liste > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 36px;
	height: 4px;
	background: var(--balken-1);
}
.kopf-start .kopf-start-liste > li:nth-child(2)::before { background: var(--balken-2); }
.kopf-start .kopf-start-liste > li:nth-child(3)::before { background: var(--balken-3); }

/* Codemotiv: echter, lauffaehiger Code als Textur, nie als Information.
   Sehr geringer Kontrast, aria-hidden, nie unter Diagrammen oder Tabellen.
   Seit 1.4.0 wie im Druck: kleine Schrift, dicht, ueber die ganze Flaeche,
   auch hinter dem Text. Bei 8 % Deckung bleibt Weiss auf dem Blau ueber
   5 : 1, deshalb ist das Motiv jetzt auch auf schmalen Geraeten sichtbar.
   Der Text kommt aus assets/codegrund.txt, siehe schichten_codegrund().
   Lage: Der Block ist um 18 Grad gedreht und so weit nach links versetzt,
   dass auch die untere linke Ecke bis 800 px Hoehe und die rechte Kante
   bis rund 2400 px Breite bedeckt bleiben. */
.codegrund {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
	z-index: 0;
	margin: 0;
}
.codegrund pre {
	position: absolute;
	top: -40px;
	left: -460px;
	margin: 0;
	transform: rotate(-18deg);
	transform-origin: 0 0;
	font-family: var(--schrift-daten);
	font-size: 15px;
	line-height: 1.75;
	white-space: pre;
	color: rgba(255, 255, 255, 0.08);
	background: none;
	border: none;
	padding: 0;
	overflow: visible;
	max-width: none;
}

/* =========================================================================
   6. Kopfblock der Unterseiten
   ========================================================================= */

.kopf-seite {
	padding-top: var(--e6);
	padding-bottom: var(--e5);
}
.kopf-seite h1,
.kopf-seite .wp-block-post-title {
	font-family: var(--schrift-display);
	font-size: var(--tg-web-seite);
	line-height: 1.1;
	margin: 0;
}
.kopf-seite .kopf-seite-vorspann {
	font-size: var(--tg-web-vorspann);
	line-height: 1.5;
	color: var(--tinte-sekundaer);
	/* Abstand zum Titel ausdruecklich setzen. `margin: 0` allein ist
	   spezifischer als die Abstandsregel des Kerns; der Vorspann klebte
	   sonst am Seitentitel. Gleiche Ursache wie beim Artikelvorspann. */
	margin: var(--e2) 0 0;
}
/* Saeulenkennung ueber der Rubrik auf einer Leistungsseite.
   Die waagerechten Raender muessen `!important` tragen: der Kern setzt in
   `.is-layout-constrained > *` selbst `margin-left/right: auto !important`,
   und der 48 px breite Balken stuende sonst mittig ueber der Rubrik. */
.saeulenbalken {
	width: 48px;
	height: 4px;
	background: var(--balken-2);
	margin-left: 0 !important;
	margin-right: auto !important;
	margin-bottom: var(--e2);
}
.saeulenbalken--1 { background: var(--balken-1); }
.saeulenbalken--2 { background: var(--balken-2); }
.saeulenbalken--3 { background: var(--balken-3); }

/* =========================================================================
   7. Saeulenkarten
   ========================================================================= */

.saeulen .wp-block-column {
	position: relative;
	background: var(--flaeche);
	border: 1px solid var(--haarlinie);
	border-top: 4px solid var(--balken-2);
	border-radius: var(--radius);
	padding: var(--e3);
	transition: border-color 120ms linear;
}
/* Reihenfolge und Farben der drei Saeulen sind bindend. */
.saeulen .wp-block-column:nth-child(1) { border-top-color: var(--balken-1); }
.saeulen .wp-block-column:nth-child(2) { border-top-color: var(--balken-2); }
.saeulen .wp-block-column:nth-child(3) { border-top-color: var(--balken-3); }
/* Beim Ueberfahren wechselt nur die Randfarbe: keine Bewegung, kein Schatten. */
.saeulen .wp-block-column:hover { border-color: var(--linie); }
.saeulen .wp-block-column h3 {
	font-family: var(--schrift-text);
	font-size: 22px;
	line-height: 1.25;
	margin: 0;
}
.saeulen .wp-block-column p { font-size: 18px; line-height: 1.5; color: var(--tinte-sekundaer); }
/* Die ganze Karte ist anklickbar, der Textlink bleibt der eigentliche Anker. */
.saeulen .wp-block-column .karte-link { font-size: 15px; font-weight: 600; }
.saeulen .wp-block-column .karte-link a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* =========================================================================
   8. Beleg-Block, Leistungsreihe, Werdegang
   ========================================================================= */

/* Asymmetrisch 5/7, der Ersatz fuer alles, was auf Folien eine Kennzahl war. */
.beleg.wp-block-columns { gap: var(--e5); }
.beleg.wp-block-columns > .wp-block-column:first-child { flex-basis: 41.66% !important; }
.beleg.wp-block-columns > .wp-block-column:last-child  { flex-basis: 58.33% !important; }
.beleg .beleg-aussage {
	font-family: var(--schrift-display);
	font-weight: 600;
	font-size: var(--tg-web-abschnitt);
	line-height: 1.15;
	margin: 0;
}

.leistung-reihe {
	border-top: 1px solid var(--haarlinie);
	padding-top: var(--e6);
	padding-bottom: var(--e6);
}
.leistung-reihe h2 {
	border-top: 4px solid var(--balken-2);
	padding-top: var(--e2);
	margin: 0;
	font-size: var(--tg-web-abschnitt);
}
.leistung-reihe--1 h2 { border-top-color: var(--balken-1); }
.leistung-reihe--2 h2 { border-top-color: var(--balken-2); }
.leistung-reihe--3 h2 { border-top-color: var(--balken-3); }

/* Nummerierte Schritte: Ziffer in Mono, Akzentfarbe, feste Spalte. */
.schritte { display: flex; flex-direction: column; gap: var(--e3); }
.schritt {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: var(--e2);
	align-items: start;
}
.schritt-nr {
	font-family: var(--schrift-daten);
	font-weight: 600;
	color: var(--akzent);
	font-variant-numeric: tabular-nums;
}
.schritt p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--tinte-sekundaer); }

/* Werdegang: Jahreszahl in Mono, eine Zeile Text. Keine Zeitleistengrafik,
   keine Fortschrittsbalken fuer Kenntnisse. */
.werdegang { border-top: 1px solid var(--haarlinie); }
.werdegang-zeile {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: var(--e3);
	padding: var(--e2) 0;
	border-bottom: 1px solid var(--haarlinie);
}
.werdegang-jahr {
	font-family: var(--schrift-daten);
	font-weight: 600;
	color: var(--tinte);
	font-variant-numeric: tabular-nums;
}
.werdegang-text { font-size: 17px; color: var(--tinte-sekundaer); }

/* =========================================================================
   9. Beitragsliste
   Kein Vorschaubild, kein Kachelraster: der Blog hat keine Bilder, und ein
   Kachelraster ohne Bilder sieht immer nach fehlendem Inhalt aus.
   ========================================================================= */

.beitragsliste .wp-block-post-template,
.beitragsliste ul.wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--haarlinie);
	display: block;
}
.beitragsliste .wp-block-post {
	position: relative;
	padding: var(--e3) 0;
	border-bottom: 1px solid var(--haarlinie);
	margin: 0;
}
.beitragsliste .beitrag-meta {
	font-family: var(--schrift-daten);
	font-size: 14px;
	color: var(--tinte-gedaempft);
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	margin-bottom: 6px;
}
.beitragsliste .beitrag-meta a {
	color: inherit;
	text-decoration: none;
	position: relative;
	z-index: 1;
}
.beitragsliste .beitrag-meta a:hover { text-decoration: underline; }
.beitragsliste .wp-block-post-title {
	font-family: var(--schrift-display);
	font-size: 24px;
	line-height: 1.2;
	margin: 0 0 6px;
}
.beitragsliste .wp-block-post-title a {
	color: var(--tinte);
	text-decoration: none;
}
/* Ganze Zeile anklickbar ueber den gestreckten Titel-Link. */
.beitragsliste .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.beitragsliste .wp-block-post-excerpt,
.beitragsliste .wp-block-post-excerpt__excerpt {
	font-size: 17px;
	color: var(--tinte-sekundaer);
	margin: 0;
}
.beitragsliste .wp-block-post-excerpt__more-text { display: none; }
.beitragsliste .wp-block-post:hover .wp-block-post-title a { color: var(--akzent); }

/* Blaetterung seit 1.4.4 mit Seitenzahlen wie auf www.fm-berger.de:
   „← Neuere  1 2 … 14  Ältere →“. Kaestchen in Mono wie die Themen, die
   aktuelle Seite gefuellt. */
.wp-block-query-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e1);
	margin-top: var(--e4);
	font-family: var(--schrift-daten);
	font-size: 14px;
}
.wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; gap: var(--e1); margin: 0; }
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	margin: 0;
	color: var(--tinte);
	text-decoration: none;
	background: var(--flaeche);
	border: 1px solid var(--haarlinie);
	border-radius: var(--radius);
}
.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	color: var(--akzent);
	border-color: var(--akzent);
}
.wp-block-query-pagination .page-numbers.current {
	background: var(--akzent);
	border-color: var(--akzent);
	color: var(--flaeche);
	font-weight: 600;
}
.wp-block-query-pagination .page-numbers.dots {
	background: none;
	border: none;
	min-width: 0;
	padding: 0 4px;
}

/* Schlagwortzeile als Nachrang-Schaltflaechen in Mono. */
.schlagwoerter .wp-block-tag-cloud a,
.schlagwoerter a {
	font-family: var(--schrift-daten);
	font-size: 13px !important;
	letter-spacing: 0.03em;
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	padding: 6px 12px;
	color: var(--tinte);
	text-decoration: none;
	display: inline-block;
	margin: 0 var(--e1) var(--e1) 0;
}
.schlagwoerter .wp-block-tag-cloud a:hover { border-color: var(--akzent); color: var(--akzent); }
.schlagwoerter .wp-block-tag-cloud { display: flex; flex-wrap: wrap; gap: var(--e1); }
.schlagwoerter .wp-block-tag-cloud a { margin: 0; }

/* =========================================================================
   10. Artikel
   Der wichtigste Baustein: hier wird die meiste Zeit verbracht.
   ========================================================================= */

.artikel-kopf {
	padding-bottom: var(--e3);
	border-bottom: 1px solid var(--haarlinie);
}
.artikel-kopf .beitrag-meta {
	font-family: var(--schrift-daten);
	font-size: 14px;
	color: var(--tinte-gedaempft);
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
}
.artikel-kopf .beitrag-meta a { color: inherit; text-decoration: none; }

.artikel-rumpf { font-size: var(--tg-web-text); line-height: 1.65; }
/* Nur zwei Ebenen im Artikel, Abstand oben doppelt so gross wie unten. */
.artikel-rumpf h2 { font-size: 26px; margin-block: var(--e5) var(--e2); }
.artikel-rumpf h3 { font-size: var(--tg-web-zwischen); margin-block: var(--e4) var(--e2); }
.artikel-rumpf h4 { font-size: 19px; margin-block: var(--e3) var(--e1); }
.artikel-rumpf p { margin-block: var(--e3); }
.artikel-rumpf > *:first-child { margin-top: 0; }

/* Ein einzelner Codebegriff im Fliesstext: leichter Grund, keine Umrandung. */
.artikel-rumpf :not(pre) > code,
:not(pre) > code {
	font-family: var(--schrift-daten);
	font-size: 15px;
	background: var(--akzent-still);
	color: var(--tinte);
	padding: 1px 6px;
	border-radius: 2px;
}
/* Codeblock: eigener Kasten, waagerecht scrollbar, die Seite bleibt ruhig.
   Ohne Plugin gibt es keine Syntaxhervorhebung; einfarbig ist hier richtig. */
.wp-block-code,
.wp-block-preformatted {
	overflow-x: auto;
	border-radius: var(--radius);
}
.wp-block-code code {
	font-family: var(--schrift-daten);
	font-size: 15px;
	line-height: 1.6;
	white-space: pre;
	background: none;
	padding: 0;
	display: block;
}

/* Zitat: kein Anfuehrungszeichen-Ornament, linker Schichtbalken. */
.wp-block-quote {
	margin: var(--e4) 0;
	padding-left: var(--e3);
	border-left: 3px solid var(--balken-2);
	font-style: italic;
	color: var(--tinte-sekundaer);
}
.wp-block-quote p { font-size: 19px; margin-block: 0; }
.wp-block-quote cite,
.wp-block-quote .wp-block-quote__citation {
	display: block;
	margin-top: var(--e1);
	font-size: 14px;
	font-style: normal;
	color: var(--tinte-gedaempft);
}

.artikel-fuss {
	margin-top: var(--e5);
	padding-top: var(--e3);
	border-top: 1px solid var(--haarlinie);
}
/* Beim neuesten und beim aeltesten Beitrag gibt es keinen Nachbarn. Der Block
   rendert dann ein leeres div, das sonst als leere Zeile mit Trennlinie
   stehenbliebe. */
.artikel-fuss .wp-block-post-navigation-link:empty { display: none; }
.artikel-fuss .wp-block-post-navigation-link {
	display: block;
	padding: var(--e2) 0;
	border-bottom: 1px solid var(--haarlinie);
	font-family: var(--schrift-display);
	font-weight: 600;
	font-size: 19px;
}
.artikel-fuss .wp-block-post-navigation-link a { color: var(--tinte); text-decoration: none; }
.artikel-fuss .wp-block-post-navigation-link a:hover { color: var(--akzent); }
.artikel-fuss .wp-block-post-navigation-link .post-navigation-link__label {
	display: block;
	font-family: var(--schrift-daten);
	font-weight: 400;
	font-size: 13px;
	color: var(--tinte-gedaempft);
	margin-bottom: 4px;
}

/* =========================================================================
   10a. Syntaxhervorhebung (Plugin Enlighter), nur dunkler Grund
   Die Enlighter-Themes sind fuer hellen Grund gebaut: der Codebereich hat
   keinen eigenen Hintergrund, Text ist #000, Schluesselwoerter #286491.
   Auf --grund ergab das 1,3 : 1 (Text) bzw. 2,6 : 1. Hier bekommt der Block
   --flaeche als Grund und eine Palette, die dort mindestens 4,5 : 1 erreicht
   (Text 13,1; Schluesselwort 7,7; Variable 7,7; String 7,2; Kommentar 6,2;
   Zahl 8,3; Methode 8,6; Zeilennummer 4,7). Gilt fuer jedes Enlighter-Theme
   (.enlighter-default), der helle Modus bleibt unveraendert.
   Die Tokenklassen sind einzeln vergeben (span.enlighter-k0 usw.), daher
   reicht [class^=...] fuer eine ganze Familie.
   ========================================================================= */

/* Schrift fuer alle Modi. Enlighter bringt eine eigene Liste mit
   ("Source Code Pro", "Liberation Mono", "Courier New"), die je nach
   Rechner anders ausfaellt, und setzt 12 px. Hier Fira Mono aus dem Theme
   und 13 px (14 px bricht bei 760 px Satzbreite zu viele YAML-Zeilen um).
   `body` davor, weil das Enlighter-CSS nach diesem Stylesheet
   laedt und bei gleicher Spezifitaet gewinnen wuerde. */
body .enlighter-default {
	font-family: var(--schrift-daten);
	font-size: 13px;
	line-height: 1.55em;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .enlighter-default {
		background-color: var(--flaeche);
		border-color: var(--linie);
	}
	:root:not([data-theme="light"]) .enlighter-default .enlighter-raw {
		background-color: var(--flaeche);
		color: var(--tinte);
	}
	:root:not([data-theme="light"]) .enlighter-default div.enlighter > div {
		color: var(--tinte-gedaempft);
		border-color: var(--flaeche);
	}
	:root:not([data-theme="light"]) .enlighter-default.enlighter-linenumbers div.enlighter > div::before {
		background-color: var(--grund);
		border-right-color: var(--haarlinie);
		color: var(--tinte-gedaempft);
	}
	:root:not([data-theme="light"]) .enlighter-default.enlighter-hover div.enlighter > div:hover,
	:root:not([data-theme="light"]) .enlighter-default div.enlighter > div.enlighter-special {
		background-color: var(--akzent-still);
		color: var(--tinte-sekundaer);
	}
	:root:not([data-theme="light"]) .enlighter-default .enlighter-btn,
	:root:not([data-theme="light"]) .enlighter-default.enlighter-v-codegroup .enlighter-codegroup-switch,
	:root:not([data-theme="light"]) .enlighter-default.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn {
		background-color: var(--flaeche);
		border-color: var(--linie);
		color: var(--tinte-sekundaer);
	}
	:root:not([data-theme="light"]) .enlighter-default.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn.enlighter-active {
		background-color: var(--akzent-still);
		color: var(--tinte);
	}
	:root:not([data-theme="light"]) .enlighter-default.enlighter-v-inline { background-color: var(--akzent-still); }
	:root:not([data-theme="light"]) .enlighter-default .enlighter-text,
	:root:not([data-theme="light"]) .enlighter-default .enlighter-x10 { color: var(--tinte); }
	:root:not([data-theme="light"]) .enlighter-default span[class^="enlighter-k"],
	:root:not([data-theme="light"]) .enlighter-default .enlighter-x1,
	:root:not([data-theme="light"]) .enlighter-default .enlighter-x11,
	:root:not([data-theme="light"]) .enlighter-default .enlighter-x12 { color: #8EC3F0; background-color: transparent; }
	:root:not([data-theme="light"]) .enlighter-default span[class^="enlighter-e"],
	:root:not([data-theme="light"]) .enlighter-default .enlighter-t2,
	:root:not([data-theme="light"]) .enlighter-default .enlighter-x15 { color: #C9B2F2; }
	:root:not([data-theme="light"]) .enlighter-default span[class^="enlighter-s"],
	:root:not([data-theme="light"]) .enlighter-default .enlighter-t1,
	:root:not([data-theme="light"]) .enlighter-default .enlighter-t6 { color: #EBA883; }
	:root:not([data-theme="light"]) .enlighter-default span[class^="enlighter-c"] { color: #94ADBB; }
	:root:not([data-theme="light"]) .enlighter-default span[class^="enlighter-n"],
	:root:not([data-theme="light"]) .enlighter-default .enlighter-x14 { color: #7AD3C8; }
	:root:not([data-theme="light"]) .enlighter-default span[class^="enlighter-m"],
	:root:not([data-theme="light"]) .enlighter-default .enlighter-t3,
	:root:not([data-theme="light"]) .enlighter-default .enlighter-t4,
	:root:not([data-theme="light"]) .enlighter-default .enlighter-t5,
	:root:not([data-theme="light"]) .enlighter-default .enlighter-x2,
	:root:not([data-theme="light"]) .enlighter-default .enlighter-x13 { color: #8FD0EA; }
	:root:not([data-theme="light"]) .enlighter-default span[class^="enlighter-g"],
	:root:not([data-theme="light"]) .enlighter-default .enlighter-t0,
	:root:not([data-theme="light"]) .enlighter-default .enlighter-t7,
	:root:not([data-theme="light"]) .enlighter-default .enlighter-t8 { color: #A9C2D0; background-color: transparent; }
}

:root[data-theme="dark"] .enlighter-default {
	background-color: var(--flaeche);
	border-color: var(--linie);
}
:root[data-theme="dark"] .enlighter-default .enlighter-raw {
	background-color: var(--flaeche);
	color: var(--tinte);
}
:root[data-theme="dark"] .enlighter-default div.enlighter > div {
	color: var(--tinte-gedaempft);
	border-color: var(--flaeche);
}
:root[data-theme="dark"] .enlighter-default.enlighter-linenumbers div.enlighter > div::before {
	background-color: var(--grund);
	border-right-color: var(--haarlinie);
	color: var(--tinte-gedaempft);
}
:root[data-theme="dark"] .enlighter-default.enlighter-hover div.enlighter > div:hover,
:root[data-theme="dark"] .enlighter-default div.enlighter > div.enlighter-special {
	background-color: var(--akzent-still);
	color: var(--tinte-sekundaer);
}
:root[data-theme="dark"] .enlighter-default .enlighter-btn,
:root[data-theme="dark"] .enlighter-default.enlighter-v-codegroup .enlighter-codegroup-switch,
:root[data-theme="dark"] .enlighter-default.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn {
	background-color: var(--flaeche);
	border-color: var(--linie);
	color: var(--tinte-sekundaer);
}
:root[data-theme="dark"] .enlighter-default.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn.enlighter-active {
	background-color: var(--akzent-still);
	color: var(--tinte);
}
:root[data-theme="dark"] .enlighter-default.enlighter-v-inline { background-color: var(--akzent-still); }
:root[data-theme="dark"] .enlighter-default .enlighter-text,
:root[data-theme="dark"] .enlighter-default .enlighter-x10 { color: var(--tinte); }
:root[data-theme="dark"] .enlighter-default span[class^="enlighter-k"],
:root[data-theme="dark"] .enlighter-default .enlighter-x1,
:root[data-theme="dark"] .enlighter-default .enlighter-x11,
:root[data-theme="dark"] .enlighter-default .enlighter-x12 { color: #8EC3F0; background-color: transparent; }
:root[data-theme="dark"] .enlighter-default span[class^="enlighter-e"],
:root[data-theme="dark"] .enlighter-default .enlighter-t2,
:root[data-theme="dark"] .enlighter-default .enlighter-x15 { color: #C9B2F2; }
:root[data-theme="dark"] .enlighter-default span[class^="enlighter-s"],
:root[data-theme="dark"] .enlighter-default .enlighter-t1,
:root[data-theme="dark"] .enlighter-default .enlighter-t6 { color: #EBA883; }
:root[data-theme="dark"] .enlighter-default span[class^="enlighter-c"] { color: #94ADBB; }
:root[data-theme="dark"] .enlighter-default span[class^="enlighter-n"],
:root[data-theme="dark"] .enlighter-default .enlighter-x14 { color: #7AD3C8; }
:root[data-theme="dark"] .enlighter-default span[class^="enlighter-m"],
:root[data-theme="dark"] .enlighter-default .enlighter-t3,
:root[data-theme="dark"] .enlighter-default .enlighter-t4,
:root[data-theme="dark"] .enlighter-default .enlighter-t5,
:root[data-theme="dark"] .enlighter-default .enlighter-x2,
:root[data-theme="dark"] .enlighter-default .enlighter-x13 { color: #8FD0EA; }
:root[data-theme="dark"] .enlighter-default span[class^="enlighter-g"],
:root[data-theme="dark"] .enlighter-default .enlighter-t0,
:root[data-theme="dark"] .enlighter-default .enlighter-t7,
:root[data-theme="dark"] .enlighter-default .enlighter-t8 { color: #A9C2D0; background-color: transparent; }

/* =========================================================================
   11. Schaltflaechen
   Zwei Ausfuehrungen, mehr nicht. Kein Verlauf, kein Schatten, keine Versalien.
   ========================================================================= */

.wp-block-button__link { border-radius: var(--radius); }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--tinte);
	border: 1px solid var(--linie);
	padding: 11px 23px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--akzent);
	color: var(--akzent);
	background: transparent;
}
/* Auf blauem Grund kehrt sich die Vorrangschaltflaeche um. */
.abschluss .wp-block-button__link {
	background: #FFFFFF;
	color: var(--blau-500);
}
.abschluss .wp-block-button__link:hover {
	background: #D6ECFA;
	color: var(--blau-700);
}
/* Umriss auf Blau: weiße Kontur und Schrift. Muss spezifischer sein als die
   allgemeine Umrissregel oben, sonst stünde dunkle Tinte auf Logo-Blau. */
.abschluss .wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.7);
}
.abschluss .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #FFFFFF;
	border-color: #FFFFFF;
}

/* Dunkel: Die gefuellte Schaltflaeche steht auf --akzent #579BD8, weisse
   Schrift ergab dort nur 2,9 : 1. Dunkle Schrift erreicht 5,6 : 1. Beim
   Ueberfahren heller statt dunkler, sonst kippt der Kontrast. Gilt auch im
   Abschlussblock (dort weisser Knopf, dunkle Schrift passt). Seit 1.4.4. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .wp-block-button:not(.is-style-outline) > .wp-block-button__link { color: #08202F; }
	:root:not([data-theme="light"]) .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: #86BAEB; color: #08202F; }
}
:root[data-theme="dark"] .wp-block-button:not(.is-style-outline) > .wp-block-button__link { color: #08202F; }
:root[data-theme="dark"] .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: #86BAEB; color: #08202F; }

/* =========================================================================
   12. Abschlussblock
   ========================================================================= */

/* Der Vorlagenteil bringt eine eigene Huelle mit, die kein Layout-Container
   ist. Ohne diese beiden Regeln liefe der blaue Block randabfallend statt auf
   Satzbreite. */
.abschluss-huelle { padding-inline: var(--seitenrand); }
.abschluss-huelle > .abschluss {
	max-width: var(--breite-breit);
	margin-inline: auto;
}

.abschluss {
	background: var(--blau-500);
	color: #FFFFFF;
	border-radius: var(--radius);
	padding: var(--e6) var(--e4);
}
.abschluss :where(h2, p) { color: #FFFFFF; }
.abschluss .abschluss-aussage {
	font-family: var(--schrift-display);
	font-weight: 600;
	font-size: var(--tg-web-abschnitt);
	line-height: 1.15;
	max-width: 24ch;
	margin: 0;
}

/* =========================================================================
   13. Kontakt
   ========================================================================= */

.kontakt-gross {
	font-family: var(--schrift-display);
	font-weight: 600;
	font-size: 26px;
	line-height: 1.2;
	margin: 0;
}
.kontakt-gross a { text-decoration: none; }
.kontakt-gross a:hover { text-decoration: underline; }

/* =========================================================================
   14. Fussbereich
   ========================================================================= */

.fuss {
	background: var(--grund);
	padding-top: var(--e5);
	padding-bottom: var(--e4);
	font-size: var(--tg-web-klein);
	color: var(--tinte-sekundaer);
}
.fuss .fuss-raster {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--e4);
}
.fuss p { margin: 0; line-height: 1.5; }
.fuss .fuss-marke {
	font-family: var(--schrift-display);
	font-weight: 600;
	font-size: 17px;
	color: var(--tinte);
	margin-bottom: 8px;
}
.fuss a { color: var(--tinte-sekundaer); text-decoration: none; }
.fuss a:hover { color: var(--akzent); text-decoration: underline; }
.fuss .wp-block-navigation { display: block; }
.fuss .wp-block-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}
/* Untermenue im Fussbereich (seit 1.4.5): kein Aufklappen, die Unterseiten
   stehen offen und eingerueckt unter ihrem Menuepunkt. Die Kernregeln fuer
   den geschlossenen Zustand (Hoehe 0, unsichtbar, absolut) muessen mit
   !important zurueckgenommen werden. */
.fuss .wp-block-navigation .wp-block-navigation__submenu-icon { display: none; }
/* Menuepunkt und Unterseiten untereinander; der Kern legt sie als Zeile an. */
.fuss .wp-block-navigation .has-child {
	flex-direction: column;
	align-items: flex-start;
}
.fuss .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	position: static !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	overflow: visible !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 6px 0 0 var(--e2) !important;
	gap: 4px !important;
}
.fuss .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0 !important;
	font-size: 14px;
	color: var(--tinte-gedaempft);
}
.fuss .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--akzent); }

.fuss .fuss-zeile {
	font-family: var(--schrift-daten);
	font-size: 13px;
	color: var(--tinte-gedaempft);
	margin-top: var(--e4);
}

/* =========================================================================
   14a. Seit 1.2.0: Markenzeile, Kennzahlen, Vorher und nachher, Porträt
   Dieselben Bausteine wie auf Rollups, Flyer und Visitenkarte zum
   IT-Kongress 2026, damit Druck und Website dasselbe zeigen.
   ========================================================================= */

/* Markenzeile unter dem Seitentitel. Der Text kommt aus
   Einstellungen → Allgemein → Untertitel, nicht aus dem Theme. */
.kopf-marke .wp-block-site-tagline {
	font-family: var(--schrift-daten);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.3;
	/* Seit 1.4.0 auf Blau, wie die Markenzeile auf Rollup und Flyer. */
	color: var(--kopf-text-still, #D6ECFA);
	margin: 0;
	margin-top: 4px;
}
@media (max-width: 599px) {
	.kopf-marke .wp-block-site-tagline { display: none; }
}

/* Kennzahlen: drei Werte in Mono, darunter die Bezugsgröße. Nur Zahlen,
   die belegt sind; keine Zähler-Animation. */
.kennzahlen {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--e4);
	border-top: 1px solid var(--haarlinie);
	padding-top: var(--e4);
}
.kennzahlen > p { margin: 0; }
.kennzahl-wert {
	display: block;
	font-family: var(--schrift-daten);
	font-weight: 600;
	font-size: clamp(34px, 1.6rem + 1.6vw, 48px);
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--akzent);
}
/* In der Kennzahlenreihe Koralle wie auf Rollup 1. Der Festpreis auf der
   Workshop-Seite nutzt dieselbe Klasse ohne die Reihe und bleibt blau. */
.kennzahlen .kennzahl-wert { color: var(--koralle); }
.kennzahl-text {
	display: block;
	margin-top: var(--e1);
	font-size: var(--tg-web-klein);
	line-height: 1.4;
	color: var(--tinte-sekundaer);
}

/* Vorher und nachher: zwei Balken je Beispiel. Kupfer steht im System für
   Legacy und Risiko, also für den Ausgangszustand; Blau für das Ergebnis.
   Die Balken sind aria-hidden, die Werte stehen als Text daneben. */
.vorher-nachher { display: flex; flex-direction: column; gap: var(--e3); }
.vn-legende {
	display: flex;
	gap: var(--e3);
	font-size: 14px;
	color: var(--tinte-gedaempft);
}
.vn-legende span::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 10px;
	margin-right: 6px;
	background: var(--signal);
}
.vn-legende .vn-legende-nachher::before { background: var(--akzent); }
.vn-zeile { display: flex; flex-direction: column; gap: 6px; }
.vn-titel { font-weight: 600; font-size: 17px; line-height: 1.35; }
.vn-balken {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 10em;
	column-gap: var(--e2);
	row-gap: 5px;
	align-items: center;
}
.vn-balken i { display: block; height: 10px; }
.vn-balken .vn-vorher { width: 100%; background: var(--signal); }
.vn-balken .vn-nachher { min-width: 3px; background: var(--akzent); }
.vn-wert { font-size: 15px; color: var(--tinte-sekundaer); }
.vn-wert--nachher {
	font-family: var(--schrift-daten);
	font-weight: 600;
	color: var(--akzent);
}

/* Porträt: freigestelltes Bild auf getönter Fläche, Hochformat 3:4. Die
   Fläche folgt dem Dunkelmodus, das Bild selbst hat keinen Hintergrund. */
/* Seit 1.3.0 höchstens 240 px breit: Das Bild belegt, dass ein Mensch
   antwortet, es soll den Text daneben nicht überragen. Quelle ist Sarahs
   bearbeitete Fassung von der Visitenkarte (512 × 682 px, Grund hellblau). */
.wp-block-image.portraet img {
	width: 100%;
	max-width: 180px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: var(--akzent-still);
}

/* Seit 1.4.3: Steht das Porträt in einer Belegspalte (Über mich), wird die
   Spalte so schmal wie das Bild, der Text daneben bleibt bei Satzbreite, und
   beide stehen gemeinsam in der Mitte. Vorher 5/12 zu 7/12, das liess bei
   kleinerem Bild eine breite Luecke. Nur ab 720 px, darunter stapeln die
   Spalten wie gehabt. */
@media (min-width: 720px) {
	.beleg.wp-block-columns:has(.portraet) { justify-content: center; }
	.beleg.wp-block-columns:has(.portraet) > .wp-block-column:first-child {
		flex: 0 0 180px !important;
	}
	.beleg.wp-block-columns:has(.portraet) > .wp-block-column:last-child {
		flex: 0 1 var(--breite-text) !important;
	}
}

/* Werte: souverän, offen, resilient wie in der Markenzeile, links in Mono
   und Akzentfarbe, rechts die Übersetzung für die Geschäftsführung. */
.wp-block-table.werte td:first-child {
	width: 8em;
	font-family: var(--schrift-daten);
	font-weight: 500;
	color: var(--akzent);
	white-space: nowrap;
}

@media (max-width: 599px) {
	.kennzahlen { grid-template-columns: 1fr; gap: var(--e3); }
	.vn-balken { grid-template-columns: minmax(0, 1fr) 8em; }
	/* Untereinander gestellt braucht das Porträt eigenen Abstand zur Rubrik. */
	.wp-block-image.portraet { margin-bottom: var(--e3); }
}

/* =========================================================================
   14b. Seit 1.4.2: Startseite nach Rollup 1, Blog mit Themen, breitere Artikel
   ========================================================================= */

/* Kennzahlen direkt unter dem blauen Block: ohne Linie oben, die Kante
   des Blocks trennt schon. */
.kennzahlen--start {
	margin-top: var(--e5) !important;
}

/* Blog auf der Startseite: Beitraege links, Themen rechts. Spalten ohne
   eigenen blockGap oben, die Rubrik steht in beiden auf gleicher Hoehe. */
/* Auf dem Handy bleiben die drei Zahlen nebeneinander wie auf dem Rollup,
   nur kleiner. Die allgemeine Regel stellt sie unter 600 px untereinander. */
@media (max-width: 599px) {
	.kennzahlen.kennzahlen--start { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); }
	.kennzahlen--start .kennzahl-wert { font-size: 30px; }
	.kennzahlen--start .kennzahl-text { font-size: 13px; }
}

/* Volle breite Spalte, unabhaengig von der vom Kern erzeugten Containerregel. */
.blog-start > .blog-start-spalten { max-width: var(--breite-breit); }
.blog-start-spalten > .wp-block-column > * + * { margin-block-start: var(--e2); }
.blog-start-spalten .beitragsliste { margin-top: var(--e3); }

/* Themen: ausgewaehlte Schlagwoerter als Kaestchen in Mono, wie die
   Technik-Zeile der Visitenkarte. Bewusst keine automatische Wolke mit
   Schriftgroessen nach Haeufigkeit: die Groesse waere die einzige
   Information und sagt dem Leser nichts. */
.themen ul {
	list-style: none;
	margin: var(--e2) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--e1);
}
.themen a {
	display: inline-block;
	padding: 6px 12px;
	font-family: var(--schrift-daten);
	font-size: 14px;
	line-height: 1.4;
	color: var(--tinte);
	text-decoration: none;
	background: var(--flaeche);
	border: 1px solid var(--haarlinie);
	border-radius: var(--radius);
}
.themen a:hover {
	color: var(--akzent);
	border-color: var(--akzent);
}

/* Artikel: seit 1.4.5 gilt die allgemeine Satzbreite (760 px) auch hier,
   Codebloecke eingeschlossen. Die Sonderregeln aus 1.4.2 (Text 760, Code
   960 px) entfallen, Code steht buendig mit dem Text davor und danach. */

/* =========================================================================
   14c. Seit 1.4.3: Kreislauf der drei Phasen (wie Rollup 2)
   Text links, Grafik rechts. Die Grafik ist ein Inline-SVG, damit Farben und
   Schriften aus dem Theme kommen und dem Dunkelmodus folgen. Phase 1 hell,
   Phase 2 Logo-Blau, Phase 3 Koralle; der Rueckweg 3 → 1 gestrichelt.
   ========================================================================= */

/* Beginnt an der linken Textkante wie die Ueberschrift darueber und ragt
   nur nach rechts hinaus. Die Raender des Kerns tragen !important. */
.is-layout-constrained > .phasen.alignwide {
	max-width: 920px;
	margin-left: max(0px, calc((100% - var(--breite-text)) / 2)) !important;
	margin-right: 0 !important;
}
.phasen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
	gap: var(--e6);
	align-items: center;
}
.phasen-kreis {
	--pk-1: #86BAEB;
	--pk-2: var(--blau-500);
	--pk-3: var(--koralle);
	margin: 0;
}
.phasen-kreis-svg { display: block; width: 100%; height: auto; }
.phasen-kreis .pk-flaeche-1 { fill: var(--pk-1); }
.phasen-kreis .pk-flaeche-2 { fill: var(--pk-2); }
.phasen-kreis .pk-flaeche-3 { fill: var(--pk-3); }
.phasen-kreis .pk-linie-1 { stroke: var(--pk-1); }
.phasen-kreis .pk-linie-2 { stroke: var(--pk-2); }
.phasen-kreis .pk-linie-3 { stroke: var(--pk-3); }
.phasen-kreis .pk-nr {
	fill: #FFFFFF;
	font-family: var(--schrift-display);
	font-weight: 600;
	font-size: 34px;
}
.phasen-kreis .pk-team {
	fill: var(--akzent);
	font-family: var(--schrift-display);
	font-weight: 600;
	font-size: 36px;
}
.phasen-kreis .pk-satz {
	fill: var(--tinte);
	font-family: var(--schrift-daten);
	font-size: 19px;
}
/* Dunkel: Phase 2 heller als das Logo-Blau, sonst verschwindet sie im
   Grund; Phase 1 bleibt der hellste Ton. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .phasen-kreis { --pk-2: #3E93D0; }
}
:root[data-theme="dark"] .phasen-kreis { --pk-2: #3E93D0; }

@media (max-width: 719px) {
	.phasen { grid-template-columns: 1fr; gap: var(--e4); }
	.phasen-kreis { order: -1; max-width: 300px; margin-inline: auto; }
}

/* =========================================================================
   15. Umbruchpunkte
   Drei Spalten werden zu einer, nicht zu zwei: Zwischenstufen erzeugen
   ungleiche Kartenhoehen und sind es nicht wert.
   ========================================================================= */

@media (max-width: 899px) {
	.saeulen.wp-block-columns { flex-wrap: wrap !important; }
	.saeulen.wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
	.fuss .fuss-raster { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 719px) {
	.beleg.wp-block-columns { flex-wrap: wrap !important; }
	/* Gleiche Spezifität wie die 5/7-Regeln in Abschnitt 8 (mit :first-child
	   und :last-child). Ohne die Pseudoklassen gewann dort die Breitenangabe,
	   und die Spalten blieben bis 1.1.0 auf dem Handy nebeneinander. */
	.beleg.wp-block-columns > .wp-block-column:first-child,
	.beleg.wp-block-columns > .wp-block-column:last-child { flex-basis: 100% !important; }
	.fuss .fuss-raster { grid-template-columns: 1fr; }
	.werdegang-zeile { grid-template-columns: 1fr; gap: 4px; }
	.kopf-start { padding-top: var(--e6) !important; }
	.abschluss { padding: var(--e5) var(--e3); }
}

/* Bei 200 % Textzoom und auf sehr schmalen Geraeten darf die Seite selbst
   nicht waagerecht scrollen. */
html, body { overflow-x: hidden; }

/* Umbrueche (seit 1.4.9).
   `.zusammen` setzt functions.php um kurze Bindestrich-Woerter wie
   „IT-Landschaft“, damit kein einzelnes „IT-“ am Zeilenende steht.
   `balance` verteilt Ueberschriften auf gleich lange Zeilen, `pretty`
   vermeidet ein einzelnes Wort in der letzten Absatzzeile. Browser ohne
   Unterstuetzung brechen wie bisher um. */
.zusammen { white-space: nowrap; }
h1, h2, h3, h4,
.wp-block-post-title { text-wrap: balance; }
p, li, .wp-block-post-excerpt__excerpt { text-wrap: pretty; }

/* =========================================================================
   16. Druck
   Der Auftritt muss auch schwarzweiss funktionieren.
   ========================================================================= */

@media print {
	.kopf, .fuss, .abschluss, .codegrund, .schlagwoerter { display: none !important; }
	body { background: #FFFFFF; color: #000000; }
	.artikel-rumpf { font-size: 11pt; }
	.wp-block-code { border: 1px solid #999999; }
}