/*
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“. Drei Balken = drei Leistungssäulen = 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.0.0
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;

	/* 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);
	--breite-text:       680px;
	--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;
		--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;
	--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,
.wp-block-list.is-style-schichten-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--e2);
}
.liste > li,
.wp-block-list.is-style-schichten-liste > li {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: var(--e2);
	align-items: start;
}
.liste > li::before,
.wp-block-list.is-style-schichten-liste > li::before {
	content: "";
	display: block;
	height: 4px;
	margin-top: 12px;
	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);
}
/* 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
   ========================================================================= */

/* 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 {
	background: var(--grund);
	border-bottom: 1px solid var(--haarlinie);
	/* Kein klebender Kopfbereich: er scrollt mit und kommt nicht zurueck. */
	position: static;
}
/* 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. */
.kopf > .wp-block-group {
	max-width: none;
	min-height: 72px;
}

.kopf-marke {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}
.kopf-marke .schichten { width: 26px; }

/* 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(--tinte);
	text-decoration: none;
	padding-bottom: 8px;
	border-bottom: 2px solid transparent;
}
.kopf .wp-block-navigation .wp-block-navigation-item__content:hover {
	border-bottom-color: var(--haarlinie);
	color: var(--tinte);
}
.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: var(--akzent);
}

/* 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);
	}
	.kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-family: var(--schrift-display);
		font-size: 26px;
		border-bottom: none;
		padding-bottom: 0;
	}
}

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

.kopf-start {
	position: relative;
	overflow: hidden;
	/* Nie volle Fensterhoehe: der naechste Abschnitt muss angeschnitten
	   sichtbar sein. */
	min-height: min(72vh, 640px);
	/* Raster statt Flex: das Textfeld bleibt ein Block voller Breite und
	   behaelt seine eigene Begrenzung, statt auf Inhaltsbreite zu schrumpfen. */
	display: grid;
	align-content: center;
	background: var(--blau-500);
	color: #FFFFFF;
}
.kopf-start > * { position: relative; z-index: 1; }
/* Der Textblock steht an der linken Satzkante, nicht mittig. Die auto-Raender
   des Blocklayouts sind mit !important gesetzt und muessen so zurueckgenommen
   werden. */
.kopf-start > .wp-block-group {
	max-width: 620px;
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}
.kopf-start :where(h1, h2, p) { color: #FFFFFF; }
.kopf-start .claim-zeile,
.kopf-start .kopf-start-vorspann { color: #D6ECFA; }
.kopf-start h1 {
	font-family: var(--schrift-display);
	font-size: var(--tg-web-titel);
	line-height: 1.06;
	max-width: 11ch;
	margin: 0;
}
.kopf-start .kopf-start-vorspann {
	font-size: var(--tg-web-vorspann);
	line-height: 1.5;
	max-width: 48ch;
}
/* Das Schichtenzeichen auf dem Blau: mittlerer Balken ist der staerkste. */
.kopf-start .schichten { width: 44px; }
.kopf-start .schichten > i:nth-child(1) { background: #8CBAD8; }
.kopf-start .schichten > i:nth-child(2) { background: #FFFFFF; }
.kopf-start .schichten > i:nth-child(3) { background: #4C93C2; }

/* Codemotiv: echter, lauffaehiger Code als Textur, nie als Information.
   Sehr geringer Kontrast, aria-hidden, nie unter Diagrammen oder Tabellen. */
.codegrund {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
	z-index: 0;
	margin: 0;
}
.codegrund pre {
	position: absolute;
	top: -25%;
	left: 40%;
	margin: 0;
	transform: rotate(-14deg);
	transform-origin: 0 0;
	font-family: var(--schrift-daten);
	font-size: 18px;
	line-height: 1.9;
	white-space: pre;
	color: rgba(255, 255, 255, 0.14);
	background: none;
	border: none;
	padding: 0;
}
@media (max-width: 719px) {
	/* Auf schmalen Geraeten laege das Motiv unter dem Text statt daneben. */
	.codegrund { display: 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);
	margin: 0;
}
/* Saeulenkennung ueber der Rubrik auf einer Leistungsseite. */
.saeulenbalken { width: 48px; height: 4px; background: var(--balken-2); }
.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 als zwei Textlinks, nicht als Zifferngitter. */
.wp-block-query-pagination {
	display: flex;
	justify-content: space-between;
	font-weight: 600;
	margin-top: var(--e4);
}
.wp-block-query-pagination > .wp-block-query-pagination-next { margin-left: auto; }

/* 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-kopf .artikel-vorspann {
	font-size: var(--tg-web-vorspann);
	line-height: 1.5;
	color: var(--tinte-sekundaer);
	/* Abstand zum Titel ausdruecklich setzen: ein `margin: 0` wuerde den
	   Blockabstand loeschen, und der Vorspann klebte am Titel. */
	margin: var(--e2) 0 0;
}

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

/* =========================================================================
   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. */
.kopf-start .wp-block-button__link,
.abschluss .wp-block-button__link {
	background: #FFFFFF;
	color: var(--blau-500);
}
.kopf-start .wp-block-button__link:hover,
.abschluss .wp-block-button__link:hover {
	background: #D6ECFA;
	color: var(--blau-700);
}

/* =========================================================================
   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;
}
.fuss .fuss-zeile {
	font-family: var(--schrift-daten);
	font-size: 13px;
	color: var(--tinte-gedaempft);
	margin-top: var(--e4);
}

/* =========================================================================
   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; }
	.beleg.wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
	.fuss .fuss-raster { grid-template-columns: 1fr; }
	.werdegang-zeile { grid-template-columns: 1fr; gap: 4px; }
	.kopf-start { min-height: auto; padding-top: var(--e7); padding-bottom: var(--e7); }
	.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; }

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