/*
Theme Name: Werkstatt
Theme URI: https://github.com/erikfreutel-cmyk/eriksblog-theme
Author: Erik Freutel
Author URI: https://eriks.blog/
Description: Block-Theme für eriks.blog. Eine Spalte, 720 px, linksbündig. Kein Page Builder, kein Framework, kein Build-Step.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.2
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: werkstatt
Tags: blog, one-column, block-patterns, full-site-editing
*/

/* ==========================================================================
   1. Basis
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

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

/* Ist die Seite kuerzer als das Fenster, endete der Seitenwrapper mitten
   im Bild und darunter stand der weisse Koerper. Der Wrapper fuellt jetzt
   mindestens die Fensterhoehe, der Fussbereich wird nach unten gedrueckt. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Der Inhalt nimmt den freien Platz auf, dadurch rutscht der
   Fussbereich nach unten und behaelt zugleich seinen Abstand von 72 px.
   Der Fussbereich selbst laesst sich nicht ueber den Kindkombinator
   ansprechen: im DOM haengt er unter dem Wrapper des Vorlagenteils, den
   display: contents nur aus dem Layout nimmt, nicht aus dem Baum. */
.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Fokus immer sichtbar, 3 px Rot. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--red);
	outline-offset: 3px;
	border-radius: 2px;
}

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

/* Sprungmarke für Tastatur. */
.eb-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 18px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-weight: 600;
	font-style: normal;
	border-radius: 0 0 var(--wp--custom--radius-button) 0;
}

.eb-skip-link:focus {
	left: 0;
}

/* ==========================================================================
   2. Kopfbereich
   ========================================================================== */

/* WordPress wickelt jeden Vorlagenteil in ein eigenes div. Dieses div ist
   genauso hoch wie der Kopfbereich, und ein sticky-Element kann sich nur
   innerhalb seines Elternkastens bewegen. Mit display: contents faellt der
   Wrapper aus dem Layout, der Kopfbereich haengt direkt unter
   .wp-site-blocks und bekommt seinen Spielraum. */
.wp-block-template-part {
	display: contents;
}

.eb-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--paper);
	/* Die Linie kommt erst, wenn die Seite nicht mehr ganz oben steht.
	   Ohne JavaScript bleibt sie dauerhaft sichtbar. */
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease-out;
}

.eb-nav.is-stuck {
	border-bottom-color: var(--wp--preset--color--line);
}

.js-aus .eb-nav,
.eb-nav:not(.is-stuck):focus-within {
	border-bottom-color: var(--wp--preset--color--line);
}

.eb-nav .eb-nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	height: 56px;
}

@media (min-width: 641px) {
	.eb-nav .eb-nav-inner {
		height: 64px;
	}
}

/* --- Hamburger und Menü-Overlay ------------------------------------- */

/* Der Hamburger erscheint erst, wenn die Zeile zu eng wird. */
.eb-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	margin-left: 4px;
	border: 0;
	border-radius: var(--wp--custom--radius-button);
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	flex-shrink: 0;
}

.eb-menu-toggle:hover {
	color: var(--wp--preset--color--red);
}

.eb-mobile-nav {
	display: none;
}

/* Solange das Overlay steht, scrollt die Seite dahinter nicht. */
html.eb-menu-offen,
html.eb-menu-offen body {
	overflow: hidden;
}

@media (max-width: 640px) {
	.eb-menu-toggle {
		display: inline-flex;
	}

	/* Die Zeile im Kopf entfällt, das Menü steckt im Overlay. Die
	   Spezifität ist bewusst höher, weil weiter unten eine gleich
	   gewichtete Regel .eb-menu ul auf flex steht. */
	.eb-nav .eb-menu > ul {
		display: none;
	}

	.eb-mobile-nav {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 100;
		background: var(--wp--preset--color--paper);
		padding: 24px;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.eb-mobile-nav[hidden] {
		display: none;
	}

	.eb-mobile-nav-close {
		position: absolute;
		top: 12px;
		right: 16px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--wp--preset--color--ink);
		cursor: pointer;
	}

	.eb-mobile-nav-close:hover {
		color: var(--wp--preset--color--red);
	}

	.eb-mobile-nav ul {
		list-style: none;
		margin: 72px 0 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.eb-mobile-nav a {
		font-family: var(--wp--preset--font-family--display);
		font-weight: 700;
		font-size: 28px;
		letter-spacing: -0.02em;
		line-height: 1.1;
		font-style: normal;
		color: var(--wp--preset--color--ink);
		text-decoration: none;
	}

	.eb-mobile-nav .current-menu-item > a,
	.eb-mobile-nav .current-menu-ancestor > a,
	.eb-mobile-nav .current_page_item > a {
		color: var(--wp--preset--color--red);
	}

	/* Im Overlay sind alle Punkte sichtbar, auch die sonst versteckten. */
	.eb-mobile-nav .eb-nav-hide {
		display: block;
	}
}

/* --- Suche --------------------------------------------------------- */

.eb-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	margin-left: 4px;
	border: 0;
	border-radius: var(--wp--custom--radius-button);
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	flex-shrink: 0;
}

.eb-search-toggle:hover,
.eb-search-toggle.is-open {
	color: var(--wp--preset--color--red);
}

.eb-menu {
	display: flex;
	align-items: center;
	gap: 12px;
}

.eb-search {
	border-top: var(--wp--custom--rule);
	background: var(--wp--preset--color--paper);
}

.eb-search-form {
	display: flex;
	gap: 8px;
	max-width: var(--wp--style--global--content-size);
	margin: 0 auto;
	padding: 14px 0;
}

.eb-search-form input[type="search"] {
	flex: 1;
	font: inherit;
	font-size: var(--wp--preset--font-size--meta);
	padding: 12px 14px;
	border: var(--wp--custom--rule);
	border-radius: var(--wp--custom--radius-button);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	min-width: 0;
}

.eb-search-form button {
	font: inherit;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--meta);
	padding: 12px 18px;
	border: 0;
	border-radius: var(--wp--custom--radius-button);
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--paper);
	cursor: pointer;
}

.eb-search-form button:hover {
	opacity: 0.85;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.eb-nav {
		transition: none;
	}
}

.eb-brand,
.eb-brand a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	font-style: normal;
	text-decoration: none;
	margin: 0;
}

.eb-brand .eb-dot {
	color: var(--wp--preset--color--red);
}

.eb-menu ul,
.eb-menu .wp-block-navigation__container {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 22px;
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
}

.eb-menu a,
.eb-menu .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	font-style: normal;
	font-weight: 500;
	text-decoration: none;
}

.eb-menu a:hover,
.eb-menu .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Rot markiert die Seite, auf der man gerade ist. */
.eb-menu .current-menu-item > a,
.eb-menu .current-menu-ancestor > a,
.eb-menu .current_page_item > a,
.eb-menu .current_page_ancestor > a,
.eb-menu .current-menu-item .wp-block-navigation-item__content,
.eb-menu .current-menu-ancestor .wp-block-navigation-item__content {
	color: var(--wp--preset--color--red);
}

@media (max-width: 640px) {
	.eb-nav .eb-nav-inner {
		gap: 12px;
	}

	.eb-brand,
	.eb-brand a {
		font-size: 20px;
	}

	.eb-menu {
		gap: 8px;
		min-width: 0;
	}

	.eb-menu ul,
	.eb-menu .wp-block-navigation__container {
		gap: 12px;
		font-size: var(--wp--preset--font-size--tiny);
		min-width: 0;
		/* Sollten die Beschriftungen laenger werden, scrollt das Menue in
		   sich, statt die Seite breiter zu machen. */
		overflow-x: auto;
		scrollbar-width: none;
	}

	.eb-menu ul::-webkit-scrollbar {
		display: none;
	}

	.eb-menu li {
		flex-shrink: 0;
	}

	.eb-search-toggle {
		margin-left: 0;
		width: 28px;
		height: 28px;
	}

	/* Ratgeber und Über mich mobil ausblenden. */
	.eb-menu .eb-nav-hide {
		display: none;
	}
}

/* Direkte Kinder eines Constrained-Layouts zentriert WordPress per
   "margin: auto !important". Das ist die Spaltenzentrierung und muss
   bleiben. Eine schmalere max-width wuerde die Box verkleinern und die
   Box mittig setzen, das Ergebnis waere ein eingerueckter Absatz.
   Deshalb bleibt die Box spaltenbreit, und die Zeilenlaenge entsteht
   ueber den rechten Innenabstand. */
.eb-post h1,
.eb-post .wp-block-post-title,
.eb-post .eb-intro,
.eb-proj .eb-intro,
.eb-lead {
	max-width: var(--wp--style--global--content-size);
}

.eb-post .eb-intro,
.eb-lead {
	padding-right: max(0px, calc(var(--wp--style--global--content-size) - 56ch));
}

.eb-proj .eb-intro {
	padding-right: max(0px, calc(var(--wp--style--global--content-size) - 52ch));
}

/* ==========================================================================
   3. Hero
   ========================================================================== */

.eb-hero {
	padding-top: 72px;
	padding-bottom: 40px;
	background-image: radial-gradient(var(--wp--preset--color--line) 1.2px, transparent 1.2px);
	background-size: 22px 22px;
	background-position: 0 0;
}

/* Der Inhaltsstreifen deckt das Punktraster ab, wie im Mockup. */
.eb-hero > .eb-hero-inner {
	background: var(--wp--preset--color--paper);
	padding-top: 8px;
	padding-bottom: 8px;
}

.eb-hero h1 {
	max-width: min(16ch, 100%);
	margin: 0;
}

.eb-hero .eb-hero-text {
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--muted);
	max-width: 52ch;
	margin: 24px 0 0;
}

.eb-hero .eb-hero-text b,
.eb-hero .eb-hero-text strong {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* ==========================================================================
   4. Werkstatt-Log
   ========================================================================== */

.eb-log {
	margin-top: 48px;
	border-top: var(--wp--custom--rule-strong);
}

.eb-log .eb-log-title {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: 0;
	line-height: 1.4;
	padding: 14px 0 6px;
	margin: 0;
	color: var(--wp--preset--color--ink);
}

.eb-log ol,
.eb-log ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eb-log li {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 16px;
	padding: 10px 0;
	border-top: var(--wp--custom--rule);
}

.eb-log time,
.eb-log .eb-log-date {
	color: var(--wp--preset--color--red);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.eb-log li p {
	margin: 0;
}

.eb-log .eb-log-more {
	padding: 12px 0 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   5. Abschnitte
   ========================================================================== */

.eb-section {
	padding-top: 56px;
}

.eb-section > h2 {
	margin: 0 0 8px;
}

.eb-lead {
	color: var(--wp--preset--color--muted);
	margin: 0 0 28px;
}

/* Steht kein Einleitungssatz da, muss die Überschrift selbst den
   Abstand halten. */
.eb-section > h2 {
	margin-bottom: 28px;
}

.eb-section > h2 + .eb-lead {
	margin-top: -20px;
}

/* --- „Fang hier an" ------------------------------------------------------ */

.eb-start {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Erste Spalte 24 px, das Zeichen sitzt links darin. Bei 10 px Breite
   bleiben 14 px bis zum Text. Dieselbe Spalte nutzt die Projektliste,
   damit beide bündig stehen. */
.eb-start li {
	display: grid;
	grid-template-columns: 24px 1fr;
	column-gap: 0;
	padding: 18px 0;
	border-top: var(--wp--custom--rule);
}

/* Die erste Linie kräftiger, wie beim Werkstatt-Log. */
.eb-start li:first-child {
	border-top: var(--wp--custom--rule-strong);
}

.eb-start li:last-child {
	border-bottom: var(--wp--custom--rule);
}

/* Gefülltes Quadrat, mittig zur ersten Zeile des Titels. Die
   Titelzeile ist 22 px bei Zeilenhöhe 1.15, also rund 25 px hoch. */
.eb-start li::before {
	content: "";
	grid-row: 1 / span 2;
	align-self: start;
	width: 10px;
	height: 10px;
	margin-top: 8px;
	background: var(--wp--preset--color--red);
}

.eb-start h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--card);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.eb-start h3 a {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	font-style: normal;
	text-decoration: none;
}

.eb-start h3 a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.eb-start p {
	margin: 6px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--list);
}

/* --- „Woran ich baue" ---------------------------------------------------- */

.eb-projects {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eb-projects li {
	display: grid;
	grid-template-columns: 24px 1fr auto;
	column-gap: 0;
	row-gap: 12px;
	align-items: baseline;
	padding: 16px 0;
	border-top: var(--wp--custom--rule);
}

.eb-projects .eb-status {
	margin-left: 12px;
}

/* Erste Linie kräftiger, wie beim Werkstatt-Log. */
.eb-projects li:first-child {
	border-top: var(--wp--custom--rule-strong);
}

.eb-projects li:last-child {
	border-bottom: var(--wp--custom--rule);
}

.eb-projects li::before {
	content: "→";
	font-weight: 600;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.2;
	color: var(--wp--preset--color--red);
}

.eb-projects h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--card);
}

.eb-projects h3 a {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	font-style: normal;
	text-decoration: none;
}

.eb-projects h3 a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.eb-projects p {
	margin: 4px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--list);
}

/* Status-Pille: grau als Default, rot nur bei eb_status_hot. */
.eb-status {
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	background: var(--wp--custom--shade);
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.eb-status.is-hot {
	color: var(--wp--preset--color--red);
	background: var(--wp--preset--color--red-soft);
}

@media (max-width: 520px) {
	.eb-projects li {
		grid-template-columns: 24px 1fr;
	}

	.eb-projects .eb-status {
		grid-column: 2;
		justify-self: start;
	}
}

/* ==========================================================================
   6. Funkspruch
   ========================================================================== */

.eb-funk {
	margin-top: 64px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding-top: 48px;
	padding-bottom: 48px;
}

.eb-funk h2 {
	font-size: var(--wp--preset--font-size--funk);
	color: var(--wp--preset--color--paper);
	margin: 0;
}

.eb-funk p {
	margin: 12px 0 0;
	max-width: 52ch;
	color: var(--wp--custom--funk-text);
}

.eb-funk .eb-funk-topics {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--paper);
}

.eb-funk .eb-funk-topics li::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--red);
	margin-right: 8px;
	vertical-align: middle;
}

.eb-funk small,
.eb-funk .eb-funk-note {
	display: block;
	margin-top: 12px;
	color: var(--wp--custom--funk-dim);
	font-size: var(--wp--preset--font-size--tiny);
}

/* Nur das Platzhalter-Formular. Kit bringt eine eigene Struktur mit und
   wuerde als Flex-Container in sich zusammenfallen. */
.eb-funk .eb-form {
	display: flex;
	gap: 8px;
	margin-top: 28px;
	max-width: 460px;
}

.eb-funk input[type="email"],
.eb-funk input[type="text"] {
	flex: 1;
	font: inherit;
	font-size: var(--wp--preset--font-size--list);
	padding: 14px 16px;
	border: 1px solid var(--wp--custom--funk-field-border);
	border-radius: var(--wp--custom--radius-button);
	background: var(--wp--custom--funk-field);
	color: var(--wp--preset--color--paper);
}

.eb-funk input::placeholder {
	color: var(--wp--custom--funk-dim);
	opacity: 1;
}

.eb-funk button[type="submit"],
.eb-funk input[type="submit"] {
	font: inherit;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--list);
	padding: 14px 20px;
	border: 0;
	border-radius: var(--wp--custom--radius-button);
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--paper);
	cursor: pointer;
}

.eb-funk button[type="submit"]:hover,
.eb-funk input[type="submit"]:hover {
	opacity: 0.85;
}

/* --- Kit-Einbettung im Funkspruch ------------------------------------
   Kit liefert eigenes CSS mit. Damit das Formular aussieht wie im
   Mockup, werden Feld und Schaltflaeche hier ueberschrieben. Die
   Auswahl greift bewusst breit, weil Kit die Klassennamen zwischen
   Formularvarianten wechselt. */

.eb-funk .formkit-form {
	display: block !important;
	margin: 28px 0 0 !important;
	max-width: 460px !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* data-style="clean" ist Kits Hauptcontainer, nicht ein Beiwerk.
   Ausgeblendet wird nur, was wirklich Beiwerk ist. */
.eb-funk .formkit-form .formkit-background,
.eb-funk .formkit-form .formkit-header,
.eb-funk .formkit-form .formkit-subheader,
.eb-funk .formkit-form .formkit-guarantee,
.eb-funk .formkit-form .formkit-powered-by-convertkit-container {
	display: none !important;
}

.eb-funk .formkit-form .formkit-fields {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
	margin: 0 !important;
}

/* Das Feld waechst, die Schaltflaeche bleibt fest. */
.eb-funk .formkit-form .formkit-field {
	flex: 1 1 auto !important;
	margin: 0 !important;
	min-width: 0 !important;
}

/* Kit bringt eigenes Innenabstand und eigene Zeilenhoehe mit. Beides
   wird ersetzt, damit Feld und Schaltflaeche exakt gleich hoch sind. */
.eb-funk .formkit-form .formkit-input {
	box-sizing: border-box !important;
	width: 100% !important;
	height: 52px !important;
	min-height: 52px !important;
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--text) !important;
	font-size: var(--wp--preset--font-size--list) !important;
	line-height: 1.2 !important;
	padding: 0 16px !important;
	border: 1px solid var(--wp--custom--funk-field-border) !important;
	border-radius: var(--wp--custom--radius-button) !important;
	background: var(--wp--custom--funk-field) !important;
	color: var(--wp--preset--color--paper) !important;
	box-shadow: none !important;
}

.eb-funk .formkit-form .formkit-input::placeholder {
	color: var(--wp--custom--funk-dim) !important;
	opacity: 1 !important;
}

.eb-funk .formkit-form .formkit-submit {
	box-sizing: border-box !important;
	flex: 0 0 140px !important;
	width: 140px !important;
	height: 52px !important;
	min-height: 52px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 0 !important;
	border-radius: var(--wp--custom--radius-button) !important;
	background: var(--wp--preset--color--red) !important;
	box-shadow: none !important;
}

.eb-funk .formkit-form .formkit-submit > span {
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	line-height: 1.2 !important;
}

.eb-funk .formkit-form .formkit-submit,
.eb-funk .formkit-form .formkit-submit > span {
	font-family: var(--wp--preset--font-family--text) !important;
	font-weight: 600 !important;
	font-size: var(--wp--preset--font-size--list) !important;
	color: var(--wp--preset--color--paper) !important;
}

/* Nur auf der Schaltflaeche, sonst dimmt der Span ein zweites Mal. */
.eb-funk .formkit-form .formkit-submit:hover {
	opacity: 0.85;
}

.eb-funk .formkit-form .formkit-alert {
	margin: 10px 0 0 !important;
	font-size: var(--wp--preset--font-size--small) !important;
	color: var(--wp--custom--funk-text) !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}

/* --- Borlabs-Platzhalter im Funkspruch -------------------------------
   Solange keine Zustimmung vorliegt, steht hier der Blocker. Er soll
   nicht wie ein Fremdkoerper wirken. */

.eb-funk .brlbs-cmpnt-content-blocker {
	margin: 28px 0 0;
	max-width: 460px;
}

.eb-funk .brlbs-cmpnt-content-blocker,
.eb-funk .brlbs-cmpnt-cb-main,
.eb-funk .brlbs-cmpnt-cb-preset-a,
.eb-funk .brlbs-cmpnt-cb-preset-b,
.eb-funk .brlbs-cmpnt-cb-preset-c {
	background: var(--wp--custom--funk-field) !important;
	border: 1px solid var(--wp--custom--funk-field-border) !important;
	border-radius: var(--wp--custom--radius) !important;
	color: var(--wp--custom--funk-text) !important;
}

.eb-funk .brlbs-cmpnt-cb-description,
.eb-funk .brlbs-cmpnt-cb-content p {
	color: var(--wp--custom--funk-text) !important;
	font-size: var(--wp--preset--font-size--meta) !important;
}

.eb-funk .brlbs-cmpnt-cb-btn,
.eb-funk .brlbs-cmpnt-cb-buttons button,
.eb-funk .brlbs-cmpnt-cb-buttons a {
	font-family: var(--wp--preset--font-family--text) !important;
	font-weight: 600 !important;
	font-size: var(--wp--preset--font-size--meta) !important;
	padding: 12px 18px !important;
	border: 0 !important;
	border-radius: var(--wp--custom--radius-button) !important;
	background: var(--wp--preset--color--red) !important;
	color: var(--wp--preset--color--paper) !important;
}

.eb-funk .brlbs-cmpnt-cb-btn:hover,
.eb-funk .brlbs-cmpnt-cb-buttons button:hover {
	opacity: 0.85;
}

.eb-funk .brlbs-cmpnt-cb-provider-toggle {
	color: var(--wp--custom--funk-dim) !important;
	font-size: var(--wp--preset--font-size--tiny) !important;
}

@media (max-width: 520px) {
	.eb-funk .eb-form,
	.eb-funk .formkit-form .formkit-fields {
		flex-direction: column !important;
	}

	/* In der Spaltenrichtung wirkt flex nicht auf die Breite, deshalb
	   ausdruecklich strecken. */
	.eb-funk .formkit-form .formkit-fields {
		align-items: stretch !important;
	}

	.eb-funk .formkit-form .formkit-field {
		width: 100% !important;
	}

	.eb-funk .formkit-form .formkit-submit {
		flex: 0 0 auto !important;
		width: 100% !important;
	}
}

/* ==========================================================================
   7. Kurz zu mir
   ========================================================================== */

.eb-about .eb-about-inner {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 28px;
	align-items: start;
}

.eb-about .eb-about-photo img {
	width: 120px;
	height: 120px;
	border-radius: var(--wp--custom--radius);
	object-fit: cover;
	display: block;
}

.eb-about h2 {
	margin: 0;
}

.eb-about p {
	margin: 10px 0 0;
}

@media (max-width: 520px) {
	.eb-about .eb-about-inner {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   8. Fußbereich
   ========================================================================== */

.eb-footer {
	margin-top: 72px;
	padding-top: 32px;
	padding-bottom: 32px;
	border-top: 0;
	background: var(--wp--preset--color--ink);
	color: var(--wp--custom--funk-text);
	font-size: var(--wp--preset--font-size--tiny);
}

.eb-footer .eb-footer-inner {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.eb-footer p {
	margin: 0;
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--custom--funk-text);
	max-width: none;
}

.eb-footer a {
	color: var(--wp--preset--color--paper);
	font-weight: 400;
	font-style: normal;
	text-decoration: none;
}

.eb-footer a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Mobil darf die zweite Zeile umbrechen, die Trennpunkte bleiben stehen. */
.eb-footer .eb-footer-recht {
	line-height: 1.7;
}

/* ==========================================================================
   9. Artikel
   ========================================================================== */

.eb-post {
	padding-top: 56px;
}

.eb-post-meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin: 0 0 14px;
}

.eb-post-meta b,
.eb-post-meta strong,
.eb-post-meta a {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	font-style: normal;
	text-decoration: none;
}

.eb-post-meta a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.eb-post h1,
.eb-post .wp-block-post-title {
	margin: 0;
}

.eb-post .eb-intro {
	font-size: var(--wp--preset--font-size--intro);
	color: var(--wp--preset--color--muted);
	margin: 22px 0 0;
}

/* --- Autorbox ------------------------------------------------------------ */

.eb-author {
	display: flex;
	gap: 14px;
	align-items: center;
	margin: 28px 0 0;
	padding: 16px 0;
	border-top: var(--wp--custom--rule);
	border-bottom: var(--wp--custom--rule);
	font-size: var(--wp--preset--font-size--meta);
}

.eb-author img,
.eb-author .avatar {
	width: 48px;
	height: 48px;
	min-width: 48px;
	border-radius: var(--wp--custom--radius);
	object-fit: cover;
	display: block;
}

.eb-author .eb-avatar {
	border-radius: var(--wp--custom--radius);
}

.eb-author p {
	margin: 0;
}

.eb-author .eb-author-name {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.eb-author .eb-author-bio {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* --- Inhaltsverzeichnis (TOC+, per JS in <details> umgebaut) -------------- */

/* Sicherheitsnetz gegen TOC+. Das Plugin setzt der Liste ein inline
   style="display:none". Ein !important im Stylesheet schlaegt ein
   Inline-Style ohne !important, damit klappt das Verzeichnis auch dann
   auf, wenn das Plugin nach unserem Skript noch einmal zugreift. */
details#toc_container[open] > ul,
details#toc_container[open] > ol {
	display: block !important;
}

.eb-toc,
#toc_container {
	margin: 28px 0 0;
	padding: 16px 20px;
	background: var(--wp--custom--shade-soft);
	border: 0;
	border-radius: var(--wp--custom--radius);
	font-size: var(--wp--preset--font-size--meta);
	width: 100%;
	float: none;
}

.eb-toc > summary,
#toc_container > summary,
#toc_container .toc_title {
	cursor: pointer;
	font-weight: 600;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--ink);
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
}

/* Kein Pfeil-Symbol, weder vom Browser noch vom Plugin. */
.eb-toc > summary::-webkit-details-marker,
#toc_container > summary::-webkit-details-marker {
	display: none;
}

.eb-toc > summary::marker,
#toc_container > summary::marker {
	content: "";
}

#toc_container .toc_toggle {
	display: none;
}

.eb-toc ol,
.eb-toc ul,
#toc_container ol,
#toc_container ul {
	margin: 10px 0 0;
	padding-left: 20px;
	color: var(--wp--preset--color--muted);
	list-style-position: outside;
}

#toc_container ul {
	list-style: decimal;
}

.eb-toc li,
#toc_container li {
	margin: 0 0 4px;
	line-height: 1.5;
}

/* Das alte „➥" des Plugins fällt weg. */
#toc_container ul li::before {
	content: none;
}

#toc_container ul ul {
	padding-left: 1.4em;
	margin-top: 4px;
}

.eb-toc a,
#toc_container a {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
	font-style: normal;
	text-decoration: none;
}

.eb-toc a:hover,
#toc_container a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   10. Beitragsinhalt
   ========================================================================== */

/* wp-block-post-content bringt ein eigenes max-width: 100% mit und
   entkommt damit der Inhaltsspalte. Auf Seiten faellt das auf, weil der
   Inhalt dort ohne Blockhuelle kommt. */
.eb-page > .eb-content,
.eb-post > .eb-content,
.eb-proj > .eb-content {
	max-width: var(--wp--style--global--content-size);
	margin-left: auto;
	margin-right: auto;
}

.eb-content {
	margin-top: 36px;
}

.eb-content > * {
	margin-top: 0;
	margin-bottom: 18px;
}

.eb-content p {
	margin: 0 0 18px;
	max-width: 62ch;
}

.eb-content h2 {
	font-size: var(--wp--preset--font-size--subhead);
	margin: 44px 0 12px;
}

.eb-content h3 {
	font-size: var(--wp--preset--font-size--card);
	margin: 28px 0 8px;
}

.eb-content h4 {
	margin: 24px 0 8px;
}

.eb-content ul,
.eb-content ol {
	margin: 0 0 18px;
	padding-left: 22px;
	max-width: 62ch;
}

.eb-content li {
	margin: 0 0 6px;
}

/* Die Bloecke des Themes bringen ihr eigenes Raster mit. Stehen sie im
   Seiteninhalt, wuerden die allgemeinen Listen- und
   Ueberschriftenregeln es verschieben: der Einzug schoebe die Liste
   nach rechts, der Abstand ueber der h3 das rote Quadrat aus der
   ersten Titelzeile. */
.eb-content .eb-start,
.eb-content .eb-projects,
.eb-content .eb-log {
	padding-left: 0;
	max-width: none;
}

.eb-content .eb-start li,
.eb-content .eb-projects li,
.eb-content .eb-log li {
	margin: 0;
}

.eb-content .eb-start h3 {
	margin: 0;
}

.eb-content a {
	color: var(--wp--preset--color--red);
	font-weight: 600;
	font-style: italic;
	text-decoration: none;
}

.eb-content a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Auszeichnungen in Links erben die Linkfarbe. */
.eb-content a strong,
.eb-content a b,
.eb-content a em {
	color: inherit;
}

.eb-content strong,
.eb-content b {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.eb-content blockquote {
	margin: 24px 0;
	padding: 0 0 0 20px;
	border-left: 3px solid var(--wp--preset--color--red);
	color: var(--wp--preset--color--muted);
	font-style: normal;
}

.eb-content blockquote p:last-child {
	margin-bottom: 0;
}

.eb-content hr,
.eb-content .wp-block-separator {
	border: 0;
	border-top: var(--wp--custom--rule);
	margin: 36px 0;
	height: 0;
	opacity: 1;
}

/* --- Tabellen ------------------------------------------------------------ */

.eb-content table,
.eb-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--meta);
	margin: 8px 0 24px;
}

.eb-content th,
.eb-content td {
	text-align: left;
	padding: 10px 8px;
	/* Die Kernstile der Tabellenbloecke rahmen jede Zelle rundum ein.
	   Im Mockup gibt es nur die Unterlinie. */
	border: 0;
	border-bottom: var(--wp--custom--rule);
	vertical-align: top;
}

.eb-content th {
	font-weight: 600;
	border: 0;
	border-bottom: var(--wp--custom--rule-strong);
}

/* Testsieger-Zelle. */
.eb-content td.win,
.eb-content th.win {
	color: var(--wp--preset--color--red);
	font-weight: 600;
}

/* Breite Tabellen scrollen in sich selbst, statt die Seite zu sprengen.
   wp-block-table bringt den Wrapper mit, nackte <table> bekommen ihn per
   the_content-Filter als .eb-table-scroll nachgeruestet. */
.eb-content .wp-block-table,
.eb-content .eb-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 8px 0 24px;
	max-width: 100%;
}

.eb-content .eb-table-scroll > table {
	margin: 0;
}

/* Kurze Werte, Preise und Zahlen duerfen nie umbrechen. Die Klasse setzt
   der the_content-Filter je Zelle, Textspalten bleiben unangetastet. */
.eb-content th.eb-nowrap,
.eb-content td.eb-nowrap {
	white-space: nowrap;
}

@media (max-width: 640px) {
	/* Genug Mindestbreite, damit neben den nicht umbrechenden Werten auch
	   die Textspalten lesbar bleiben. Darunter wird horizontal gescrollt. */
	.eb-content .wp-block-table > table,
	.eb-content .eb-table-scroll > table {
		min-width: 480px;
	}
}

/* --- Bilder -------------------------------------------------------------- */

.eb-content figure,
.eb-content .wp-block-image {
	margin: 24px 0;
}

/* Bild im Seitenformat 16:9 über die volle Spaltenbreite. */
.eb-content .eb-shot img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	/* Das Foto ist hochkant. Mittig beschnitten faellt der Kopf weg,
	   deshalb der Ausschnitt weiter oben. */
	object-position: 50% 22%;
	border-radius: var(--wp--custom--radius);
}

.eb-content figure img,
.eb-content .wp-block-image img {
	border-radius: var(--wp--custom--radius);
	display: block;
}

.eb-content figcaption,
.eb-content .wp-element-caption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin-top: 8px;
	text-align: left;
}

/* --- Buttons im Inhalt --------------------------------------------------- */

.eb-content .wp-block-button__link {
	font-style: normal;
	text-decoration: none;
}

/* ==========================================================================
   11. Affiliate-Kennzeichnung
   ========================================================================== */

/* Das Sternchen kommt per CSS, damit der Beitragstext unangetastet bleibt.
   Links, die das „*" schon im Text tragen, bekommen keins dazu. */
.eb-affiliate:not(.eb-affiliate--hasstar)::after {
	content: "*";
}

/* Sitzt in der Inhaltsspalte, nicht ueber die volle Breite. Als direktes
   Kind eines Constrained-Layouts kommt die Zeilenlaenge aus dem
   Innenabstand, sonst wuerde WordPress den Absatz zentrieren. */
.eb-disclose {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	border-top: var(--wp--custom--rule);
	padding-top: 16px;
	margin-top: 40px;
	max-width: var(--wp--style--global--content-size);
	padding-right: max(0px, calc(var(--wp--style--global--content-size) - 62ch));
}

/* ==========================================================================
   12. FAQ
   ========================================================================== */

/* H3/P-Paare bleiben stehen, damit das FAQPage-Schema stabil bleibt. */
.eb-content .eb-faq h3,
.eb-content h2#haeufig-gestellte-fragen ~ h3 {
	border-top: var(--wp--custom--rule);
	padding-top: 14px;
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.5;
}

.eb-content .eb-faq h3 + p,
.eb-content h2#haeufig-gestellte-fragen ~ h3 + p {
	margin: 0 0 14px;
	color: var(--wp--preset--color--muted);
}

/* Falls doch <details> im Inhalt steht. */
.eb-content details {
	border-top: var(--wp--custom--rule);
	padding: 14px 0;
}

.eb-content details summary {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--base);
	cursor: pointer;
}

.eb-content details p {
	margin: 8px 0 0;
	color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   13. Weiterlesen
   ========================================================================== */

.eb-next {
	margin-top: 56px;
	padding-top: 20px;
	border-top: var(--wp--custom--rule-strong);
}

.eb-next h2 {
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: 0;
}

.eb-next a {
	display: block;
	padding: 12px 0;
	border-top: var(--wp--custom--rule);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	font-style: normal;
	text-decoration: none;
}

.eb-next a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   14. Projekt
   ========================================================================== */

.eb-proj {
	padding-top: 56px;
}

.eb-proj .eb-kicker {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin: 0 0 12px;
}

.eb-proj .eb-kicker a {
	color: var(--wp--preset--color--muted);
	font-weight: 500;
	font-style: normal;
	text-decoration: none;
}

.eb-proj .eb-kicker a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Überschriften, die verlinken, sehen aus wie Überschriften. */
.eb-section > h2 > a,
.eb-section > h2 a {
	color: inherit;
	font-weight: inherit;
	font-style: normal;
	text-decoration: none;
}

.eb-section > h2 a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.eb-proj h1,
.eb-proj .wp-block-post-title {
	font-size: clamp(38px, 7vw, 60px);
	margin: 0;
}

.eb-proj .eb-intro {
	font-size: var(--wp--preset--font-size--intro);
	color: var(--wp--preset--color--muted);
	margin: 18px 0 0;
}

.eb-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 32px 0 0;
	padding: 20px 0;
	border-top: var(--wp--custom--rule-strong);
	border-bottom: var(--wp--custom--rule);
}

.eb-facts div {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.eb-facts strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 28px;
	line-height: 1.1;
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.02em;
	font-weight: 700;
}

.eb-facts strong.is-hot {
	color: var(--wp--preset--color--red);
}

@media (max-width: 520px) {
	.eb-facts {
		grid-template-columns: 1fr 1fr;
	}
}

.eb-proj .eb-shot {
	margin: 32px 0 0;
}

.eb-proj .eb-shot img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	border-radius: var(--wp--custom--radius);
	display: block;
}

.eb-proj h2 {
	font-size: var(--wp--preset--font-size--subhead);
	margin: 48px 0 12px;
}

/* Im Projekt folgt der Inhalt direkt auf seine Überschrift. */
.eb-proj .eb-content {
	margin-top: 0;
}

/* Die Überschrift steckt im Log-Block selbst. */
.eb-proj .eb-log {
	margin-top: 0;
	border-top: 0;
}

.eb-proj .eb-log > h2 {
	font-size: var(--wp--preset--font-size--subhead);
	margin: 48px 0 12px;
}

.eb-proj .eb-log > ol {
	border-top: var(--wp--custom--rule-strong);
}

.eb-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.eb-links li {
	padding: 12px 0;
	border-top: var(--wp--custom--rule);
}

.eb-links a {
	color: var(--wp--preset--color--red);
	font-weight: 600;
	font-style: italic;
	text-decoration: none;
}

.eb-links a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.eb-links span {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--meta);
}

/* ==========================================================================
   15. Übersichten
   ========================================================================== */

.eb-archive-head {
	padding-top: 56px;
}

.eb-archive-head h1 {
	font-size: var(--wp--preset--font-size--title);
	margin: 0;
}

.eb-archive-head .eb-lead {
	margin-top: 16px;
}

.eb-archive {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}

.eb-archive li,
.eb-archive .wp-block-post {
	padding: 18px 0;
	border-top: var(--wp--custom--rule);
}

.eb-archive li:last-child,
.eb-archive .wp-block-post:last-child {
	border-bottom: var(--wp--custom--rule);
}

.eb-archive h2,
.eb-archive h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--card);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.eb-archive h2 a,
.eb-archive h3 a {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	font-style: normal;
	text-decoration: none;
}

.eb-archive h2 a:hover,
.eb-archive h3 a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.eb-archive p,
.eb-archive .wp-block-post-excerpt__excerpt {
	margin: 6px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--list);
}

.eb-archive .eb-item-meta {
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.eb-pagination {
	margin-top: 32px;
	padding-top: 20px;
	border-top: var(--wp--custom--rule);
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--meta);
}

.eb-pagination a,
.eb-pagination .page-numbers {
	color: var(--wp--preset--color--muted);
	font-style: normal;
	font-weight: 500;
	text-decoration: none;
}

.eb-pagination a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.eb-pagination .current {
	color: var(--wp--preset--color--red);
	font-weight: 600;
}

/* ==========================================================================
   Zeitleiste, Block eb/timeline
   ========================================================================== */

.eb-timeline {
	margin: 40px 0;
}

.eb-timeline .eb-tl-zeile {
	display: grid;
	grid-template-columns: 110px 20px 1fr;
	column-gap: 16px;
}

.eb-timeline .eb-tl-jahr {
	margin: 0;
	padding-top: 2px;
	text-align: right;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.4;
}

.eb-timeline .eb-tl-linie {
	position: relative;
	justify-self: center;
	width: 2px;
	background: var(--wp--preset--color--line);
}

.eb-timeline .eb-tl-zeile:first-child .eb-tl-linie {
	background: linear-gradient(to bottom, transparent 8px, var(--wp--preset--color--line) 8px);
}

.eb-timeline .eb-tl-zeile:last-child .eb-tl-linie {
	background: linear-gradient(to bottom, var(--wp--preset--color--line) 20px, transparent 20px);
}

.eb-timeline .eb-tl-punkt {
	position: absolute;
	top: 6px;
	left: 50%;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	border-radius: 50%;
	background: var(--wp--preset--color--red);
}

.eb-timeline .eb-tl-punkt.is-stark {
	width: 14px;
	height: 14px;
	margin-left: -7px;
	box-shadow: 0 0 0 4px var(--wp--preset--color--red-soft);
}

.eb-timeline .eb-tl-inhalt {
	padding: 0 0 28px;
	min-width: 0;
}

.eb-timeline .eb-tl-titel {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lead);
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

.eb-timeline .eb-tl-text {
	margin: 0;
	font-size: var(--wp--preset--font-size--list);
	max-width: none;
}

.eb-timeline .eb-tl-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 0;
}

.eb-timeline .eb-tl-tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--wp--custom--shade);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 500;
}

.eb-timeline .eb-tl-zitat {
	margin: 14px 0 0;
	padding: 0 0 0 16px;
	border-left: 3px solid var(--wp--preset--color--red);
	color: var(--wp--preset--color--muted);
	font-style: normal;
}

.eb-timeline .eb-tl-zitat p {
	margin: 0;
	font-size: var(--wp--preset--font-size--list);
	max-width: none;
}

.eb-timeline .eb-tl-fotos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 16px 0 0;
}

.eb-timeline .eb-tl-fotos img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius-button);
	display: block;
}

@media (max-width: 520px) {
	.eb-timeline .eb-tl-zeile {
		grid-template-columns: 74px 16px 1fr;
		column-gap: 12px;
	}

	.eb-timeline .eb-tl-fotos {
		grid-template-columns: 1fr 1fr;
	}
}

/* ==========================================================================
   Chip-Zeile über den Listen
   ========================================================================== */

.eb-chips {
	display: flex;
	gap: 8px;
	margin: 20px 0 0;
	padding-bottom: 4px;
	/* Mobil scrollt die Zeile in sich, statt umzubrechen. */
	overflow-x: auto;
	scrollbar-width: none;
}

.eb-chips::-webkit-scrollbar {
	display: none;
}

.eb-chip {
	flex-shrink: 0;
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	font-style: normal;
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--paper);
	text-decoration: none;
	white-space: nowrap;
}

.eb-chip:hover {
	border-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--red);
	text-decoration: none;
}

.eb-chip.is-aktiv {
	background: var(--wp--preset--color--red);
	border-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--paper);
}

/* Suchformular im Inhalt, ohne Beschriftung, direkt unter der H1. */
.eb-search-inline {
	margin: 20px 0 0;
}

.eb-search-inline .wp-block-search__inside-wrapper {
	gap: 8px;
}

.eb-search-inline .wp-block-search__input {
	font: inherit;
	font-size: var(--wp--preset--font-size--meta);
	padding: 12px 14px;
	border: var(--wp--custom--rule);
	border-radius: var(--wp--custom--radius-button);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.eb-search-inline .wp-block-search__button {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--meta);
	padding: 12px 18px;
	border: 0;
	border-radius: var(--wp--custom--radius-button);
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--paper);
	margin-left: 0;
}

/* ==========================================================================
   16. Kommentare
   ========================================================================== */

.eb-comments {
	margin-top: 56px;
	padding-top: 20px;
	border-top: var(--wp--custom--rule-strong);
}

.eb-comments h2,
.eb-comments .wp-block-comments-title {
	font-size: var(--wp--preset--font-size--section);
	margin: 0 0 20px;
}

.eb-comments .wp-block-comment-template li {
	padding: 20px 0;
	border-top: var(--wp--custom--rule);
	list-style: none;
}

/* Avatar links, Textblock rechts, 14 px dazwischen. Der Avatar steht
   oben und damit auf Höhe der Namenszeile. */
.eb-comments .eb-comment {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.eb-comments .eb-comment > .wp-block-avatar {
	flex-shrink: 0;
	margin: 0;
	line-height: 0;
}

.eb-comments .eb-comment-body {
	flex: 1;
	min-width: 0;
}

/* Name und Datum untereinander, 2 px Abstand. */
.eb-comments .eb-comment-head {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 10px;
}

.eb-comments .eb-comment-head > * {
	margin: 0;
}

.eb-comments .wp-block-comment-author-name {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.3;
}

.eb-comments .wp-block-comment-author-name a {
	color: var(--wp--preset--color--ink);
	font-style: normal;
}

.eb-comments .wp-block-comment-date {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.3;
}

.eb-comments .wp-block-comment-date a {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
	font-style: normal;
}

.eb-comments .wp-block-comment-content {
	margin: 0;
}

.eb-comments .wp-block-comment-content p:last-child {
	margin-bottom: 0;
}

/* Im Kommentarbereich sind alle Avatare gleich: 40 px, rund. Damit
   passt das Foto zum Platzhalter der anderen Kommentierenden. */
.eb-comments .wp-block-avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* Lokaler Platzhalter statt Gravatar: Kreis mit der Initiale. */
.eb-avatar {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--red-soft);
	color: var(--wp--preset--color--red);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1;
	user-select: none;
}

.eb-avatar--gross {
	width: 48px;
	height: 48px;
	font-size: var(--wp--preset--font-size--lead);
}

/* Im Kommentarkopf sitzt der Platzhalter wie das Bild. */
.eb-comments .eb-comment > .eb-avatar,
.eb-comments .wp-block-avatar > .eb-avatar {
	margin: 0;
}

/* Antworten des Autors: roter Rand links. */
.eb-comments li.bypostauthor > .eb-comment,
.eb-comments .bypostauthor > article {
	border-left: 3px solid var(--wp--preset--color--red);
	padding-left: 16px;
}

/* Antworten bleiben eingerückt. */
.eb-comments .wp-block-comment-template ol {
	margin: 20px 0 0;
	padding-left: 28px;
	list-style: none;
}

.eb-comments .wp-block-comment-template ol li:last-child {
	padding-bottom: 0;
}

.eb-comments .wp-block-comment-reply-link a,
.eb-comments .comment-reply-link {
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
}

.eb-comments input[type="text"],
.eb-comments input[type="email"],
.eb-comments input[type="url"],
.eb-comments textarea {
	width: 100%;
	font: inherit;
	font-size: var(--wp--preset--font-size--meta);
	padding: 12px 14px;
	border: var(--wp--custom--rule);
	border-radius: var(--wp--custom--radius-button);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.eb-comments label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	margin: 14px 0 6px;
}

/* ==========================================================================
   17. Bestehende Inhaltsklassen aus den Beiträgen
   Vorkommen per REST-API geprüft, siehe ABWEICHUNGEN.md.
   ========================================================================== */

/* --- Lead-Absatz (9 Beiträge) -------------------------------------------- */

.eb-content .eb-article-lead {
	font-size: var(--wp--preset--font-size--intro);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	margin: 0 0 40px;
	padding-bottom: 40px;
	border-bottom: var(--wp--custom--rule);
	max-width: 56ch;
}

/* --- Zahlenreihe (9 Beiträge) -------------------------------------------- */

.eb-content .eb-article-nums {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 32px 0;
}

.eb-content .eb-article-num {
	background: var(--wp--custom--shade-soft);
	border: var(--wp--custom--rule);
	border-radius: var(--wp--custom--radius-button);
	padding: 20px 16px;
	text-align: left;
}

.eb-content .eb-article-num-val {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--red);
	margin: 0 0 6px;
}

.eb-content .eb-article-num-lbl {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.4;
	margin: 0;
}

@media (max-width: 520px) {
	.eb-content .eb-article-nums {
		grid-template-columns: 1fr 1fr;
	}
}

/* --- Hinweiskästen (9 Beiträge) ------------------------------------------ */

.eb-content .eb-box,
.eb-content .eb-box-dark {
	border-radius: var(--wp--custom--radius);
	padding: 22px 24px;
	margin: 32px 0;
	max-width: none;
}

.eb-content .eb-box {
	background: var(--wp--custom--shade-soft);
	border: var(--wp--custom--rule);
}

.eb-content .eb-box-dark {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border: 0;
}

.eb-content .eb-box-dark strong,
.eb-content .eb-box-dark b {
	color: var(--wp--preset--color--paper);
}

.eb-content .eb-box-label {
	display: block;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
	margin: 0 0 10px;
}

.eb-content .eb-box p:last-child,
.eb-content .eb-box-dark p:last-child {
	margin-bottom: 0;
}

/* --- Szenario- / Fehlerkästen (9 Beiträge) ------------------------------- */

.eb-content .eb-fehler {
	border: var(--wp--custom--rule);
	border-left: 3px solid var(--wp--preset--color--red);
	border-radius: var(--wp--custom--radius);
	padding: 22px 24px;
	margin: 32px 0;
	max-width: none;
}

.eb-content .eb-fehler-num {
	display: block;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
	margin: 0 0 10px;
}

.eb-content .eb-fehler h3 {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--card);
}

.eb-content .eb-fehler-verdict {
	display: block;
	margin-top: 14px;
	padding-top: 14px;
	border-top: var(--wp--custom--rule);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.eb-content .eb-fehler p:last-of-type {
	margin-bottom: 0;
}

/* --- Nummerierte Listen: Strategie und Maßnahmen (8 bzw. 7 Beiträge) ----- */

.eb-content .eb-strategie,
.eb-content .eb-massnahmen {
	margin: 32px 0;
}

.eb-content .eb-strategie-item,
.eb-content .eb-massnahme {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 16px;
	align-items: start;
	padding: 18px 0;
	border-top: var(--wp--custom--rule);
	max-width: none;
}

.eb-content .eb-strategie-item:last-child,
.eb-content .eb-massnahme:last-child {
	border-bottom: var(--wp--custom--rule);
}

.eb-content .eb-strategie-num,
.eb-content .eb-massnahme-num {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--red-soft);
	color: var(--wp--preset--color--red);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--list);
	display: grid;
	place-items: center;
	line-height: 1;
}

.eb-content .eb-strategie-title,
.eb-content .eb-massnahme-title {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lead);
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
	margin: 0 0 6px;
}

.eb-content .eb-strategie-text,
.eb-content .eb-massnahme-text {
	display: block;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--list);
}

.eb-content .eb-strategie-wann,
.eb-content .eb-massnahme-aufwand {
	display: block;
	margin-top: 10px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--red);
}

/* Die Beitragsmarkierung enthält an dieser Stelle verirrte </p> aus wpautop.
   Deshalb greifen die Regeln auch, wenn der Zeilenumbruch anders liegt. */
.eb-content .eb-strategie-item br,
.eb-content .eb-massnahme br {
	display: none;
}

@media (max-width: 520px) {
	.eb-content .eb-strategie-item,
	.eb-content .eb-massnahme {
		grid-template-columns: 32px 1fr;
		gap: 12px;
	}

	.eb-content .eb-strategie-num,
	.eb-content .eb-massnahme-num {
		width: 32px;
		height: 32px;
		font-size: var(--wp--preset--font-size--meta);
	}
}

/* --- Ampel-Karten (6 Beiträge) ------------------------------------------- */

.eb-content .eb-ampel-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 32px 0;
}

.eb-content .eb-ampel-card {
	border: var(--wp--custom--rule);
	border-radius: var(--wp--custom--radius);
	padding: 20px 22px;
	max-width: none;
}

.eb-content .eb-ampel-card.rot {
	background: var(--wp--preset--color--red-soft);
	border-color: var(--wp--preset--color--red);
}

.eb-content .eb-ampel-card.gruen {
	background: var(--wp--custom--green-soft);
	border-color: var(--wp--custom--green);
}

.eb-content .eb-ampel-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
}

.eb-content .eb-ampel-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.eb-content .eb-ampel-card.rot .eb-ampel-dot {
	background: var(--wp--preset--color--red);
}

.eb-content .eb-ampel-card.gruen .eb-ampel-dot {
	background: var(--wp--custom--green);
}

.eb-content .eb-ampel-status {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--list);
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}

.eb-content .eb-ampel-card ul {
	margin: 0;
	padding-left: 20px;
	font-size: var(--wp--preset--font-size--meta);
}

.eb-content .eb-ampel-card li {
	margin: 0 0 8px;
}

.eb-content .eb-ampel-card li:last-child {
	margin-bottom: 0;
}

@media (max-width: 520px) {
	.eb-content .eb-ampel-grid {
		grid-template-columns: 1fr;
	}
}

/* --- E-E-A-T-Kacheln (2 Beiträge) ---------------------------------------- */

.eb-content .eb-eeat-badge {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 32px 0;
}

.eb-content .eb-eeat-item {
	background: var(--wp--custom--shade-soft);
	border: var(--wp--custom--rule);
	border-radius: var(--wp--custom--radius-button);
	padding: 16px 12px;
	text-align: center;
}

.eb-content .eb-eeat-letter {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--card);
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--red);
	margin: 0 0 4px;
}

.eb-content .eb-eeat-word {
	display: block;
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--muted);
	line-height: 1.3;
}

@media (max-width: 520px) {
	.eb-content .eb-eeat-badge {
		grid-template-columns: 1fr 1fr;
	}
}

/* --- Pfeil-Checkliste ---------------------------------------------------- */

.eb-content .eb-checklist {
	list-style: none;
	padding: 0;
	margin: 24px 0;
}

.eb-content .eb-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	margin: 0;
	border-bottom: var(--wp--custom--rule);
	font-size: var(--wp--preset--font-size--list);
}

.eb-content .eb-checklist li:last-child {
	border-bottom: 0;
}

.eb-content .eb-checklist li::before {
	content: "→";
	color: var(--wp--preset--color--red);
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 2px;
}

/* --- Grauer Merkkasten --------------------------------------------------- */

.eb-content .eb-article-box {
	background: var(--wp--custom--shade-soft);
	border: var(--wp--custom--rule);
	border-radius: var(--wp--custom--radius);
	padding: 22px 24px;
	margin: 32px 0;
	max-width: none;
}

.eb-content .eb-article-box p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   18. CTA-Box im Beitragsinhalt
   Markup steht als HTML im Beitrag. Die zwei bestehenden Vorkommen tragen
   das alte Rot #e8443a als Inline-Style, deshalb hier bewusst überschrieben.
   ========================================================================== */

.eb-content .eb-cta-box,
.eb-cta-box {
	border: 2px solid var(--wp--preset--color--red) !important;
	border-radius: var(--wp--custom--radius) !important;
	padding: 22px 24px !important;
	margin: 36px 0;
	background: var(--wp--preset--color--paper) !important;
	max-width: none;
}

.eb-cta-box h3 {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--card);
}

.eb-cta-box p {
	margin: 0 0 14px;
	color: var(--wp--preset--color--muted);
	max-width: none;
}

.eb-cta-box > p:first-child strong {
	color: var(--wp--preset--color--ink);
}

.eb-cta-box .wp-block-buttons {
	margin: 0 0 10px;
}

.eb-cta-box a.btn,
.eb-cta-box .wp-block-button__link {
	display: inline-block;
	background: var(--wp--preset--color--red) !important;
	color: var(--wp--preset--color--paper) !important;
	font-weight: 600;
	font-style: normal;
	padding: 12px 18px;
	border-radius: var(--wp--custom--radius-button);
	text-decoration: none;
}

.eb-cta-box a.btn:hover,
.eb-cta-box .wp-block-button__link:hover {
	opacity: 0.85;
	text-decoration: none;
}

.eb-cta-box .has-small-font-size,
.eb-cta-box small {
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* ==========================================================================
   19. Block eb/auto-cta
   ========================================================================== */

.eb-auto-cta {
	border: 2px solid var(--wp--preset--color--red);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--paper);
	padding: 26px 28px;
	margin: 48px 0 0;
}

.eb-auto-cta .eb-auto-cta-label {
	display: block;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
	margin: 0 0 10px;
}

.eb-auto-cta h3 {
	margin: 0 0 10px;
	font-size: var(--wp--preset--font-size--card);
}

.eb-auto-cta p {
	margin: 0 0 14px;
	color: var(--wp--preset--color--muted);
}

.eb-auto-cta ul {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.eb-auto-cta li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 6px 0;
	font-size: var(--wp--preset--font-size--list);
}

.eb-auto-cta li::before {
	content: "→";
	color: var(--wp--preset--color--red);
	font-weight: 700;
	flex-shrink: 0;
}

.eb-auto-cta .eb-auto-cta-btn {
	display: inline-block;
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--paper);
	font-weight: 600;
	font-style: normal;
	padding: 12px 18px;
	border-radius: var(--wp--custom--radius-button);
	text-decoration: none;
}

.eb-auto-cta .eb-auto-cta-btn:hover {
	opacity: 0.85;
	text-decoration: none;
}

.eb-auto-cta .eb-auto-cta-note {
	display: block;
	margin-top: 12px;
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   20. Block eb/calendly
   ========================================================================== */

.eb-calendly {
	margin: 36px 0;
}

.eb-calendly .eb-calendly-btn {
	display: inline-block;
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--paper);
	font-weight: 600;
	font-style: normal;
	padding: 12px 18px;
	border-radius: var(--wp--custom--radius-button);
	text-decoration: none;
}

.eb-calendly .eb-calendly-btn:hover {
	opacity: 0.85;
	text-decoration: none;
}

.eb-calendly .eb-calendly-hinweis {
	margin: 8px 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	max-width: none;
}

.eb-calendly-placeholder {
	padding: 40px 24px;
	text-align: center;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--meta);
}

/* ==========================================================================
   21. Seiten
   ========================================================================== */

.eb-page {
	padding-top: 56px;
}

.eb-page h1,
.eb-page .wp-block-post-title {
	font-size: var(--wp--preset--font-size--title);
	margin: 0 0 28px;
}

/* ==========================================================================
   Klassen für Seiteninhalte, etwa /mit-mir-arbeiten/
   Werden im Editor von Hand auf Core-Blöcke gesetzt.
   ========================================================================== */

/* Einleitungsabsatz im Seiteninhalt, in Schwarz. Der Auszug unter der
   H1 von Artikeln und Projekten bleibt grau, siehe .eb-post .eb-intro.
   Steht der Absatz im
   Beitragsinhalt, greift die einfache max-width; als direktes Kind eines
   Constrained-Layouts kommt die Zeilenlänge aus dem Innenabstand. */
.eb-content .eb-intro {
	font-size: var(--wp--preset--font-size--intro);
	color: var(--wp--preset--color--ink);
	margin: 0 0 28px;
	max-width: 56ch;
}

.eb-page > .eb-intro {
	font-size: var(--wp--preset--font-size--intro);
	color: var(--wp--preset--color--ink);
	margin: 0 0 28px;
	max-width: var(--wp--style--global--content-size);
	padding-right: max(0px, calc(var(--wp--style--global--content-size) - 56ch));
}

/* Preiszeile unter einem Angebot. */
.eb-content .eb-preis,
.eb-preis {
	margin: 4px 0 32px;
	font-size: var(--wp--preset--font-size--list);
	font-weight: 700;
	color: var(--wp--preset--color--red);
	max-width: none;
}

/* ==========================================================================
   22. Bewegung
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.eb-hero h1,
	.eb-hero .eb-hero-text,
	.eb-hero .eb-log {
		animation: eb-rise 0.5s ease-out both;
	}

	.eb-hero .eb-hero-text {
		animation-delay: 0.08s;
	}

	.eb-hero .eb-log {
		animation-delay: 0.16s;
	}

	@keyframes eb-rise {
		from {
			opacity: 0;
			transform: translateY(8px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}
}

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