/*
 * traffiX – Theme-Styles. Regeln: ai/01-design-tokens.md, ai/02-komponenten.md.
 * theme.json liefert Hex-Paletten für den Editor; hier stehen die eigentlichen
 * OKLCH-Werte und alle abgeleiteten Töne (color-mix), die die Presets überschreiben.
 */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
	--color-ink: #14202B;
	--color-bg: #FFFFFF;
	--color-primary: #0B1E27;
	--color-primary: oklch(0.225 0.030 228);
	--color-accent: #006BB0;
	--color-accent: oklch(0.480 0.190 228);
	--color-accent-on-dark: #4ABCE9;
	--color-accent-on-dark: oklch(0.750 0.120 228);
	--color-success: #1E7546;
	--color-success: oklch(0.50 0.11 155);
	--color-warning: #915C08;
	--color-warning: oklch(0.52 0.11 70);
	--color-danger: #B02B27;
	--color-danger: oklch(0.50 0.17 27);

	--color-ink-80: color-mix(in oklab, var(--color-ink) 80%, var(--color-bg));
	--color-ink-60: color-mix(in oklab, var(--color-ink) 64%, var(--color-bg));
	--color-ink-45: color-mix(in oklab, var(--color-ink) 45%, var(--color-bg));
	--color-ink-20: color-mix(in oklab, var(--color-ink) 20%, transparent);
	--color-ink-10: color-mix(in oklab, var(--color-ink) 10%, transparent);
	--color-ink-06: color-mix(in oklab, var(--color-ink) 6%, var(--color-bg));
	--color-ink-04: color-mix(in oklab, var(--color-ink) 4%, var(--color-bg));
	--color-accent-08: color-mix(in oklab, var(--color-accent) 8%, var(--color-bg));
	--color-success-08: color-mix(in oklab, var(--color-success) 8%, var(--color-bg));
	--color-warning-08: color-mix(in oklab, var(--color-warning) 10%, var(--color-bg));
	--color-danger-08: color-mix(in oklab, var(--color-danger) 8%, var(--color-bg));

	--on-dark-muted: #C3CDD3;
	--on-accent-muted: #E6F1F8;
	--container: 1240px;
	--gutter: 24px;

	/* Editor-Presets auf die echten Werte umlenken. */
	--wp--preset--color--primary: var(--color-primary);
	--wp--preset--color--accent: var(--color-accent);
	--wp--preset--color--accent-on-dark: var(--color-accent-on-dark);
	--wp--preset--color--ink-04: var(--color-ink-04);
	--wp--preset--color--ink-06: var(--color-ink-06);
}

/* ── Grundlagen ─────────────────────────────────────────────────────── */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .hy {
	hyphens: auto;
	/* Nur lange Wörter trennen (Komposita, E-24), kurze wie „gefunden“ nicht. */
	hyphenate-limit-chars: 10 4 4;
	overflow-wrap: break-word;
}

/* Fließtext in ink-80, Überschriften und Hervorhebungen in Ink. Auf Flächen mit eigener
   Textfarbe (z. B. Primär) erben alle Elemente diese Farbe (Kontrast, 01 Regeln für Farbe). */
:where(.wp-block-post-content, .tz-prose, .wp-block-post-excerpt) { color: var(--color-ink-80); }
:where(.wp-block-post-content, .tz-prose) :where(h1, h2, h3, h4, h5, h6, strong, b) { color: var(--color-ink); }
:where(.wp-block-post-content, .tz-prose) .has-text-color :where(h1, h2, h3, h4, h5, h6, strong, b, p, li, dd) { color: inherit; }

/* Links: nur im Fließtext Akzent + Unterstreichung (02, Links). */
:where(.wp-block-post-content, .tz-prose) :where(p, li, dd, td) a:where(:not(.wp-element-button)) {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

.tz-container {
	box-sizing: border-box;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.screen-reader-text:not(:focus) {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.tz-skip-link {
	position: absolute;
	left: 8px; top: 8px;
	z-index: 100;
	padding: 12px 16px;
	background: var(--color-primary);
	color: #FFFFFF !important;
}

/* ── Sucher-Ecken (Hover/Fokus aller Buttons, 01 Form) ──────────────── */
.fx,
.wp-element-button,
.wp-block-button__link {
	position: relative;
	--fx-c: var(--color-primary);
}
.fx-accent,
.is-style-akzent .wp-block-button__link { --fx-c: var(--color-accent); }

.fx::after,
.wp-element-button::after,
.wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: -2px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .18s ease, inset .18s ease;
	background:
		linear-gradient(var(--fx-c), var(--fx-c)) top left / 10px 2px no-repeat,
		linear-gradient(var(--fx-c), var(--fx-c)) top left / 2px 10px no-repeat,
		linear-gradient(var(--fx-c), var(--fx-c)) top right / 10px 2px no-repeat,
		linear-gradient(var(--fx-c), var(--fx-c)) top right / 2px 10px no-repeat,
		linear-gradient(var(--fx-c), var(--fx-c)) bottom left / 10px 2px no-repeat,
		linear-gradient(var(--fx-c), var(--fx-c)) bottom left / 2px 10px no-repeat,
		linear-gradient(var(--fx-c), var(--fx-c)) bottom right / 10px 2px no-repeat,
		linear-gradient(var(--fx-c), var(--fx-c)) bottom right / 2px 10px no-repeat;
}
.fx:hover::after, .fx:focus-visible::after,
.wp-element-button:hover::after, .wp-element-button:focus-visible::after,
.wp-block-button__link:hover::after, .wp-block-button__link:focus-visible::after {
	opacity: 1;
	inset: -6px;
}
.fx:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
	.fx::after, .wp-element-button::after, .wp-block-button__link::after { transition: none; }
}

/* ── Buttons (02, Buttons) ──────────────────────────────────────────── */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	box-sizing: border-box;
	text-decoration: none;
}
.is-style-akzent .wp-block-button__link { background: var(--color-accent); color: #FFFFFF; }
.is-style-sekundaer .wp-block-button__link { background: var(--color-ink-06); color: var(--color-ink); }
.is-style-auf-dunkel .wp-block-button__link {
	background: #FFFFFF;
	color: var(--color-ink);
	--fx-c: #FFFFFF; /* Ecken auf der dunklen Fläche sichtbar (Review T-2) */
}
.is-style-ghost .wp-block-button__link {
	background: none;
	color: var(--color-ink);
	padding-inline: 4px;
	text-decoration: underline;
	text-decoration-color: var(--color-ink-20);
	text-underline-offset: 4px;
}

/* ── Typografische Elemente ─────────────────────────────────────────── */
.tz-label,
.is-style-dachzeile {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-ink);
}
.tz-label::before,
.is-style-dachzeile::before {
	content: "";
	flex: none;
	width: 8px; height: 8px;
	background: var(--color-accent);
}

.is-style-kurz-erklaert {
	background: var(--color-ink-04);
	border-left: 3px solid var(--color-accent);
	padding: 20px 24px;
}

.is-style-haekchen { list-style: none; padding-left: 0; }
.is-style-haekchen li { position: relative; padding-left: 28px; }
.is-style-haekchen li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--color-accent);
	font-weight: 700;
}

:where(p, li) code {
	background: var(--color-ink-06);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .85em;
	padding: 1px 5px;
}
kbd {
	border: 1px solid var(--color-ink-45);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .85em;
	padding: 0 5px;
}

/* ── Formulare (02, Formulare) ──────────────────────────────────────── */
input:where([type="text"], [type="email"], [type="url"], [type="tel"], [type="number"], [type="search"], [type="time"]),
select,
textarea {
	box-sizing: border-box;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--color-ink-45);
	border-radius: 0;
	background: #FFFFFF;
	color: var(--color-ink);
	font: inherit;
	font-size: 16px;
}
textarea { min-height: 110px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 0;
}

/* ── Header (02, Navigation) ────────────────────────────────────────── */
.tz-header {
	position: relative;
	z-index: 10;
	border-bottom: 1px solid var(--color-ink-10);
	background: var(--color-bg);
}
.tz-header__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 32px;
	padding-block: 14px;
}
.tz-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color-ink);
}
.tz-wordmark {
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.02em;
	white-space: nowrap;
}
.tz-wordmark b { font-weight: 800; }
.tz-wordmark i {
	display: inline-block;
	width: .24em; height: .24em;
	margin: 0 .04em 0 .05em;
	background: var(--color-ink);
	vertical-align: baseline;
}
.tz-header__bar > nav { flex: 1 1 auto; }
.tz-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 500;
}
.tz-nav a {
	display: inline-flex;
	padding: 12px 10px;
	color: var(--color-ink);
}
.tz-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tz-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--color-accent); }

.tz-cta-head {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	min-height: 52px;
	padding: 6px 22px;
	margin: 6px;
	background: var(--color-accent);
	color: #FFFFFF;
	line-height: 1.2;
}
.tz-cta-head strong { font-size: 15px; font-weight: 700; }
.tz-cta-head small { font-size: 12px; color: var(--on-accent-muted); }
.tz-cta-head .tz-corner {
	position: absolute;
	width: 10px; height: 10px;
	border: 0 solid var(--color-accent);
}
.tz-cta-head .tz-corner--tl { left: -6px; top: -6px; border-left-width: 2px; border-top-width: 2px; }
.tz-cta-head .tz-corner--tr { right: -6px; top: -6px; border-right-width: 2px; border-top-width: 2px; }
.tz-cta-head .tz-corner--bl { left: -6px; bottom: -6px; border-left-width: 2px; border-bottom-width: 2px; }
.tz-cta-head .tz-corner--br { right: -6px; bottom: -6px; border-right-width: 2px; border-bottom-width: 2px; }
.tz-cta-head:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 8px; }

.tz-menu-btn,
.tz-mobile-nav,
.tz-cta-bar { display: none; }

@media (max-width: 1080px) {
	.tz-header .tz-nav,
	.tz-cta-head { display: none; }

	.tz-menu-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin-left: auto;
		min-height: 44px;
		padding: 0 14px;
		border: 0;
		border-radius: 0;
		background: var(--color-ink-06);
		color: var(--color-ink);
		font: inherit;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
	}

	.tz-mobile-nav:not([hidden]) {
		display: block;
		border-top: 1px solid var(--color-ink-10);
		padding-block: 8px 16px;
	}
	.tz-mobile-nav .tz-nav { display: flex; flex-direction: column; font-size: 17px; }
	.tz-mobile-nav .tz-nav a { padding: 12px 0; min-height: 24px; }

	.tz-cta-bar {
		display: flex;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 20;
		padding: 10px 16px;
		background: var(--color-bg);
		border-top: 1px solid var(--color-ink-10);
	}
	.tz-cta-bar a {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 54px;
		padding: 0 20px;
		background: var(--color-accent);
		color: #FFFFFF;
		font-weight: 700;
	}
	.tz-cta-bar small { font-size: 13px; font-weight: 500; color: var(--on-accent-muted); }
	body { padding-bottom: 75px; }
	/* Fokus-Scrollen hält Abstand zur festen CTA-Leiste (Review T-2). */
	html { scroll-padding-bottom: 96px; }
}

/* ── Seitenkopf flach (02, Seitenköpfe B/C) ─────────────────────────── */
.tz-page-head {
	border-bottom: 1px solid var(--color-ink-10);
	padding-block: 40px 32px;
}
.tz-page-head h1 {
	font-size: var(--wp--preset--font-size--flach);
	line-height: 1.15;
	letter-spacing: -0.025em;
	margin: 0;
}
.tz-page-head p { margin: 10px 0 0; font-size: var(--wp--preset--font-size--lead); color: var(--color-ink-80); }
.tz-page-head--search .wp-block-search { margin-top: 20px; max-width: 520px; }
.tz-page-head .wp-block-search__inside-wrapper { gap: 8px; }
.tz-page-head .wp-block-search__input { border-color: var(--color-ink-45); }

/* ── Beitragslisten ─────────────────────────────────────────────────── */
.tz-list .wp-block-post {
	border-bottom: 1px solid var(--color-ink-10);
	padding-block: 24px;
}
.tz-list .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tz-meta { font-size: var(--wp--preset--font-size--small); color: var(--color-ink-60); align-items: baseline; }
.tz-meta :where(p, a, time) { margin: 0; color: inherit; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.tz-footer { border-top: 1px solid var(--color-ink-10); margin-top: 64px; }
.tz-footer__main {
	display: flex;
	flex-wrap: wrap;
	gap: 36px 64px;
	padding-block: 64px 40px;
	font-size: 15px;
}
.tz-footer__brand { flex: 1.5 1 260px; }
.tz-footer__brand p { margin: 12px 0 0; color: var(--color-ink-60); max-width: 26em; }
.tz-footer__brand address { margin: 16px 0 0; font-style: normal; color: var(--color-ink-60); }
.tz-footer__brand .tz-footer__kontakt { color: var(--color-ink); font-weight: 600; }
.tz-footer__brand .tz-footer__kontakt:hover { text-decoration: underline; text-underline-offset: 4px; }
.tz-footer nav { flex: 1 1 160px; display: flex; flex-direction: column; gap: 2px; }
.tz-footer h2 {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.5;
	color: var(--color-ink-60);
}
.tz-footer nav a { padding: 5px 0; }
.tz-footer nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tz-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	padding-block: 18px 30px;
	border-top: 1px solid var(--color-ink-10);
	font-size: 14px;
	color: var(--color-ink-60);
}
.tz-footer__legal span { flex: 1 1 auto; }
.tz-footer__legal a { color: var(--color-ink-60); }

/* ══ Startseite und Abschnitte (03, Startseite) ═══════════════════════ */

/* Abschnittskopf: Dachzeile + Linie bis zum Rand (02, Typografische Elemente). */
.is-style-abschnittskopf {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-ink);
}
.is-style-abschnittskopf::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--color-accent); }
.is-style-abschnittskopf::after { content: ""; flex: 1; height: 1px; background: var(--color-ink-10); }

/* Lead unter H1/H2. */
.is-style-lead { font-size: var(--wp--preset--font-size--lead); line-height: 1.55; max-width: 32em; }

/* Bild mit vier Sucher-Ecken, 2 px Ink, 10 px außerhalb (01, Form).
   Grid: Die Ecken (::after) liegen nur über der Bildzeile, nicht über der Bildunterschrift. */
.wp-block-image.is-style-sucher-ecken { display: grid; margin: 10px; }
.is-style-sucher-ecken > img { grid-area: 1 / 1; display: block; width: 100%; height: auto; }
.is-style-sucher-ecken::after {
	content: "";
	grid-area: 1 / 1;
	margin: -10px;
	pointer-events: none;
	--c: var(--color-ink);
	background:
		linear-gradient(var(--c), var(--c)) top left / 26px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) top left / 2px 26px no-repeat,
		linear-gradient(var(--c), var(--c)) top right / 26px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) top right / 2px 26px no-repeat,
		linear-gradient(var(--c), var(--c)) bottom left / 26px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) bottom left / 2px 26px no-repeat,
		linear-gradient(var(--c), var(--c)) bottom right / 26px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) bottom right / 2px 26px no-repeat;
}
.is-style-sucher-ecken > figcaption {
	grid-area: 2 / 1;
	margin: 20px 0 0;
	font-size: 15px;
	color: var(--color-ink-80);
	text-align: left;
}
.is-style-sucher-ecken figcaption strong { color: var(--color-ink); margin-right: 10px; }

/* Kennzahlen (traffix/kennzahlen): Wert groß über der Beschriftung. */
.tz-kennzahlen { display: flex; flex-wrap: wrap; gap: 24px 48px; margin: 0; font-size: 14px; }
.tz-kennzahlen > div { display: flex; flex-direction: column-reverse; }
.tz-kennzahlen dd { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: var(--color-ink); }
.tz-kennzahlen dt { color: var(--color-ink-60); }

/* Produktkarte (02, Karten): Vorschau oben, Text, Häkchen-Liste, Button-Paar unten. */
.tz-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-ink-10);
	min-width: 0;
}
.tz-card > .tz-card__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 28px; }
.tz-card__body > * { margin: 0; }
.tz-card__body .is-style-haekchen { border-top: 1px solid var(--color-ink-10); padding-top: 14px; font-size: 15px; }
.tz-card__body .wp-block-buttons { margin-top: auto; padding-top: 16px; }
.tz-card__preview { min-height: 202px; box-sizing: border-box; padding: 20px; }
.tz-card__preview > * { margin: 0; }
.tz-card__preview--dunkel { color: #FFFFFF; }
.tz-card__preview--dunkel p { color: var(--on-dark-muted); font-size: 13px; }
.tz-card__preview--dunkel .tz-card__haus { color: #FFFFFF; font-weight: 700; font-size: 18px; }
.tz-card__bildflaeche {
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in oklab, #FFFFFF 12%, var(--color-primary));
	margin-bottom: 14px !important;
}
.tz-browser { border: 1px solid var(--color-ink-10); background: #FFFFFF; }
.tz-browser > p:first-child {
	display: flex; align-items: center; gap: 5px;
	padding: 8px 10px; border-bottom: 1px solid var(--color-ink-10);
	font-size: 11px; color: var(--color-ink-60);
}
.tz-browser > p:first-child::before {
	content: ""; width: 31px; height: 7px; margin-right: 6px;
	background:
		linear-gradient(var(--color-ink-20), var(--color-ink-20)) 0 0 / 7px 7px no-repeat,
		linear-gradient(var(--color-ink-20), var(--color-ink-20)) 12px 0 / 7px 7px no-repeat,
		linear-gradient(var(--color-ink-20), var(--color-ink-20)) 24px 0 / 7px 7px no-repeat;
}
.tz-browser .is-style-haekchen { margin: 0; padding: 12px 16px; font-size: 14px; line-height: 1.75; }
.tz-bubble { background: #FFFFFF; border: 1px solid var(--color-ink-10); padding: 12px 14px; font-size: 13px; color: var(--color-ink-60); }
.tz-bubble + .tz-bubble { margin-top: 10px !important; margin-left: 28px !important; color: var(--color-ink-80); }
.tz-bubble strong { color: var(--color-accent); }

/* Zusagen „So prüfst du's“ (02, Vertrauens-Elemente). */
.tz-zusagen { border-top: 2px solid var(--color-ink); }
.tz-zusage {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 6px 32px;
	padding: 22px 0;
	border-bottom: 1px solid var(--color-ink-10);
}
.tz-zusage > * { margin: 0 !important; }
.tz-zusage h3 { font-size: 19px; line-height: 1.4; letter-spacing: 0; }
.tz-zusage p { font-size: 16px; }

/* Werdegang: Jahr + Ereignis, Kante zwischen beiden, aktuellstes Jahr in Akzent (02).
   Der Ereignistext ist ein anonymes Grid-Element; die Kante liegt als Hintergrund bei 64 + 28 px. */
.is-style-werdegang { list-style: none; margin: 0; padding: 0; }
.is-style-werdegang li {
	display: grid;
	grid-template-columns: 64px 1fr;
	column-gap: 54px;
	padding-bottom: 26px;
	background: linear-gradient(var(--color-ink-10), var(--color-ink-10)) 92px 0 / 2px 100% no-repeat;
}
.is-style-werdegang li:first-child { background-image: linear-gradient(var(--color-accent), var(--color-accent)); }
.is-style-werdegang li:last-child { padding-bottom: 0; }
.is-style-werdegang li strong { font-size: 19px; color: var(--color-ink); }

/* Ganze Karte klickbar über den Titel-Link (02, Tool-/Wiki-Karte). */
.tz-linkcard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: 1px solid var(--color-ink-10);
	padding: 28px;
	min-width: 0;
}
.tz-linkcard > * { margin: 0 !important; }
.tz-linkcard .tz-linkcard__label { font-size: 14px; font-weight: 600; color: var(--color-ink-60); }
.tz-linkcard h3 a::after { content: ""; position: absolute; inset: 0; }
.tz-linkcard:hover h3 a { text-decoration: underline; text-underline-offset: 4px; }
.tz-linkcard:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tz-linkcard h3 a:focus-visible { outline: none; }
/* Deko-Symbole der Sonderzeichen-Karte: reine CSS-Dekoration, für Screenreader stumm (alt-Text ""). */
.tz-linkcard--symbole .tz-linkcard__label::after {
	content: "→ ✓ ★ ✆ ☀";
	content: "→ ✓ ★ ✆ ☀" / "";
	display: block;
	margin-top: 12px;
	font-size: 34px;
	font-weight: 400;
	letter-spacing: .12em;
	line-height: 1.2;
	color: var(--color-accent);
}

/* Schritte: 28-px-Quadrat in Primär mit weißer Zahl (02, Listen). */
.is-style-schritte { list-style: none; margin: 0; padding: 0; counter-reset: tz-schritt; display: flex; flex-direction: column; gap: 14px; }
.is-style-schritte li { counter-increment: tz-schritt; display: flex; align-items: center; gap: 14px; color: var(--color-ink); }
.is-style-schritte li::before {
	content: counter(tz-schritt);
	flex: none;
	width: 28px; height: 28px;
	display: flex; align-items: center; justify-content: center;
	background: var(--color-primary);
	color: #FFFFFF;
	font-size: 14px; font-weight: 700;
}

/* Blog-Teaser */
.tz-teaser .wp-block-post-template { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 32px; }
.tz-teaser .wp-block-post { padding: 22px 0; }
.tz-teaser .wp-block-post-title { font-size: 21px; letter-spacing: -0.02em; line-height: 1.3; margin-top: 8px; }

/* Buttons in Karten: 15 px, 20 px Innenabstand wie im Canvas, damit das Button-Paar nebeneinander passt. */
.tz-card .wp-block-button__link { font-size: 15px; padding: 0 20px; }
.tz-card .wp-block-buttons { gap: 8px; }

/* Wissen & Tools: beliebtestes Tool doppelt breit (Canvas 2 : 1 : 1), schmal untereinander. */
.tz-tools { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (min-width: 1000px) { .tz-tools { grid-template-columns: 2fr 1fr 1fr; } }

/* Fließtextseiten (Rechtliches, Blog, Wiki): Überschriften in Artikelgröße statt Abschnittsgröße (01, Schriftgrößen). */
.tz-prose h2 { font-size: var(--wp--preset--font-size--zwischen); line-height: 1.2; letter-spacing: -0.02em; margin-top: 2em; }
.tz-prose h3 { font-size: var(--wp--preset--font-size--karte); line-height: 1.2; letter-spacing: -0.02em; margin-top: 1.6em; }

/* ══ Erstkontakt-Formular (02 Formulare, Canvas „Erstkontakt“) ═════════ */
.tz-form { background: #FFFFFF; border: 1px solid var(--color-ink-10); padding: clamp(20px, 4vw, 34px); }
.tz-form form { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.tz-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.tz-form legend { padding: 0; margin-bottom: 14px; font-size: 15px; font-weight: 600; color: var(--color-ink); }
.tz-form__felder { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--color-ink-10); padding-top: 22px; }
.tz-form__reihe { display: flex; flex-wrap: wrap; gap: 14px; }
.tz-form__reihe > .tz-feld { flex: 1 1 200px; }

.tz-themen__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tz-thema {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 100px;
	padding: 16px;
	border: 2px solid var(--color-ink-10);
	background: #FFFFFF;
	cursor: pointer;
}
.tz-thema input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tz-thema__titel { font-weight: 700; font-size: 16px; color: var(--color-ink); }
.tz-thema__text { font-size: 14px; line-height: 1.4; color: var(--color-ink-60); }
.tz-thema:has(input:checked) { border-color: var(--color-primary); background: var(--color-ink-04); }
.tz-thema:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tz-themen[aria-invalid="true"] .tz-thema { border-color: var(--color-danger); }

.tz-feld { display: flex; flex-direction: column; gap: 6px; }
.tz-feld label, .tz-auswahl label { font-size: 14px; font-weight: 600; color: var(--color-ink); }
.tz-feld__optional { font-weight: 400; color: var(--color-ink-60); }
.tz-feld :where(input, select, textarea) { width: 100%; }
.tz-feld [aria-invalid="true"] { border-color: var(--color-danger); box-shadow: inset 3px 0 0 var(--color-danger); }
.tz-feld__fehler, .tz-gruppe .tz-feld__fehler, .tz-themen .tz-feld__fehler { margin: 6px 0 0; font-size: 14px; color: var(--color-danger); }

.tz-praefix { display: flex; }
.tz-praefix > span {
	display: flex; align-items: center; padding: 0 12px;
	background: var(--color-ink-06); border: 1px solid var(--color-ink-45); border-right: 0;
	font-family: var(--wp--preset--font-family--mono); font-size: 14px; color: var(--color-ink-60);
}
.tz-praefix input { flex: 1; min-width: 0; }

.tz-auswahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 16px; }
.tz-auswahl label { display: flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 400; }
.tz-auswahl input, .tz-form input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--color-primary); }

.tz-form__absenden { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 4px; }
.tz-form__absenden .wp-block-button__link { min-height: 54px; padding: 0 30px; cursor: pointer; font: inherit; font-weight: 600; border: 0; }
.tz-form__absenden .wp-block-button__link[aria-disabled="true"] { opacity: .7; cursor: progress; }
.tz-form__hinweis { margin: 0; font-size: 14px; color: var(--color-ink-60); }
.tz-form__hinweis a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }

.tz-form__meldung { background: var(--color-danger-08); border-left: 3px solid var(--color-danger); padding: 14px 18px; }
.tz-form__meldung p { margin: 0; color: var(--color-ink); }
.tz-form__meldung ul { margin: 8px 0 0; padding-left: 20px; }
.tz-form__meldung a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.tz-form__fertig { padding: 48px 0; text-align: center; }
.tz-form__fertig-titel { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-ink); }
.tz-form__fertig p:not(.tz-form__fertig-titel) { margin: 10px 0 0; color: var(--color-ink-80); }
.tz-form--hinweis p { margin: 0; }

/* Honeypot: für Menschen und Screenreader unsichtbar. */
.tz-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Startseite, Erstkontakt: Themen als Link-Karten zur ungecachten Kontaktseite (Konzept v2, F-1). */
.tz-themenkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.tz-themenkarten .tz-linkcard { padding: 20px; min-height: 120px; }
.tz-themenkarten .tz-linkcard h3 { margin: 0; }
.tz-themenkarten .tz-linkcard p { font-size: 14px; color: var(--color-ink-60); }

/* Kein Blockabstand zwischen Header und Hauptbereich (Flächen schließen direkt an den Header an). */
.wp-site-blocks > main { margin-block-start: 0; }

/* ------------------------------------------------------------------ Wiki (Vorlage page-wiki, design/canvas/Wiki-Artikel) */
.tz-brotkrumen { padding-top: 20px; font-size: var(--wp--preset--font-size--small); color: var(--color-ink-60); }
.tz-brotkrumen a { color: var(--color-ink-60); text-decoration: none; }
.tz-brotkrumen a:hover, .tz-brotkrumen a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.tz-brotkrumen [aria-current] { color: var(--color-ink); }

.tz-wiki-kopf { max-width: 820px; padding-top: 36px; }
.tz-wiki-kopf .tz-label { margin: 0 0 14px; }
.tz-wiki-kopf__titel {
	margin: 0;
	font-size: clamp(34px, 4.4vw, 56px);
	line-height: 1.06;
	letter-spacing: -0.035em;
	text-wrap: balance;
	hyphens: auto;
}
.tz-wiki-kopf__meta {
	display: flex; flex-wrap: wrap; gap: 6px 24px;
	margin: 22px 0 0;
	font-size: 15px;
	color: var(--color-ink-60);
}
.tz-wiki-kopf__meta strong { color: var(--color-ink); }

.tz-wiki-rumpf {
	display: flex; flex-wrap: wrap; align-items: flex-start;
	gap: 40px 64px;
	padding-top: 40px;
	padding-bottom: 72px;
}
.tz-wiki-artikel { flex: 999 1 560px; min-width: 0; max-width: 760px; }
.tz-wiki-artikel > :first-child { margin-top: 0; }

.tz-inhalt {
	flex: 1 1 220px; max-width: 260px;
	border-top: 2px solid var(--color-ink);
	padding-top: 14px;
	font-size: 15px; line-height: 1.5;
}
@media (min-width: 900px) { .tz-inhalt { position: sticky; top: 24px; } }
@media (max-width: 899px) { .tz-inhalt { max-width: none; flex-basis: 100%; } }
.tz-inhalt__titel { margin: 0 0 10px; font-weight: 700; color: var(--color-ink); }
.tz-inhalt ol { list-style: none; margin: 0; padding: 0; }
.tz-inhalt a {
	display: block;
	padding: 7px 0 7px 12px;
	color: var(--color-ink-80);
	text-decoration: none;
	box-shadow: inset 1px 0 0 var(--color-ink-10);
}
.tz-inhalt a:hover, .tz-inhalt a:focus-visible { color: var(--color-ink); box-shadow: inset 2px 0 0 var(--color-accent); }

/* „Kurz erklärt“ mit sichtbarem Label (02 Typografische Elemente) */
.tz-wiki-artikel .is-style-kurz-erklaert::before {
	content: "Kurz erklärt";
	display: block;
	margin-bottom: 8px;
	font-size: 14px; font-weight: 700; letter-spacing: .02em;
	color: var(--color-ink);
}
.tz-wiki-artikel .is-style-kurz-erklaert p { margin: 0; font-size: var(--wp--preset--font-size--article); }
.tz-wiki-artikel h2 { scroll-margin-top: 24px; }

/* Wiki-Karten (02 Karten: Label → Titel → ein Satz, ganze Karte klickbar) */
.tz-wiki-weiter { padding-bottom: 88px; }
.tz-wiki-karten { margin-top: 0; }
.tz-wiki-karten__kopf {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
	border-top: 2px solid var(--color-ink);
	padding-top: 18px;
}
.tz-wiki-karten__kopf h2 { margin: 0; font-size: var(--wp--preset--font-size--karte); letter-spacing: -0.02em; }
.tz-wiki-karten__kopf a { font-weight: 600; color: var(--color-accent); }
.tz-wiki-karten__raster {
	display: grid; gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	margin-top: 22px;
}
.tz-wiki-karte {
	position: relative;
	display: flex; flex-direction: column; gap: 8px;
	padding: 22px;
	background: var(--color-ink-04);
}
.tz-wiki-karte__label { margin: 0; font-size: 14px; color: var(--color-ink-60); }
.tz-wiki-karte__titel { margin: 0; font-size: var(--wp--preset--font-size--klein-titel); line-height: 1.3; }
.tz-wiki-karte__titel a { color: var(--color-ink); text-decoration: none; }
.tz-wiki-karte__titel a::after { content: ""; position: absolute; inset: 0; }
.tz-wiki-karte:hover .tz-wiki-karte__titel a { text-decoration: underline; text-underline-offset: 3px; }
.tz-wiki-karte:has(a:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tz-wiki-karte__titel a:focus-visible { outline: none; }
.tz-wiki-karte__text { margin: 0; color: var(--color-ink-80); font-size: 16px; }
.tz-wiki-artikel .tz-wiki-karten { margin-top: 40px; }

/* Kennzahl-Rechner (Mikro-Tool, 02 Formulare) */
.tz-rechner {
	margin-top: 22px;
	padding: 24px;
	border: 1px solid var(--color-ink-10);
	box-shadow: inset 3px 0 0 var(--color-accent);
}
.tz-rechner__titel { margin: 0; font-weight: 700; color: var(--color-ink); }
.tz-rechner__felder { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-top: 14px; }
.tz-rechner__felder p { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tz-rechner label { font-size: 14px; font-weight: 600; color: var(--color-ink); }
.tz-rechner input {
	height: 48px; padding: 0 12px;
	border: 1px solid var(--color-ink-45); border-radius: 0;
	font: inherit; font-size: 16px; color: var(--color-ink); background: var(--color-bg);
}
.tz-rechner input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 0; border-color: var(--color-accent); }
.tz-rechner__formel { margin: 14px 0 0; font-family: var(--wp--preset--font-family--mono); font-size: 14px; color: var(--color-ink-60); }
.tz-rechner__ergebnis {
	display: block;
	margin-top: 12px;
	padding: 14px 16px;
	background: var(--color-accent-08);
	font-weight: 700; color: var(--color-ink);
}

/* Formelzeile (Wiki: Rechenweg) */
.tz-prose .tz-formel {
	margin-top: 14px;
	padding: 12px 16px;
	background: var(--color-ink-04);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 15px;
	color: var(--color-ink);
}

/* Übersicht „Wissen & Tools“ (Vorlage page-uebersicht, design/canvas/Wiki-Uebersicht) */
.tz-uebersicht .tz-brotkrumen { padding-top: 0; margin-bottom: 18px; }
.tz-uebersicht__inhalt { padding-top: 48px; padding-bottom: 88px; }
.tz-uebersicht__raster { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px 64px; }
.tz-uebersicht__liste { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 56px; }
.tz-uebersicht__liste > * { margin: 0; }
.tz-uebersicht__seite { flex: 1 1 280px; max-width: 360px; display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 899px) { .tz-uebersicht__seite { max-width: none; } }
.tz-uebersicht__pfad-titel { margin: 0; font-size: var(--wp--preset--font-size--klein-titel); line-height: 1.3; }
.tz-uebersicht__seite ol { margin: 0; }
.tz-kasten { padding: 24px; background: var(--color-ink-04); box-shadow: inset 3px 0 0 var(--color-accent); }
.tz-kasten > * { margin: 0; }
.tz-kasten > * + * { margin-top: 10px; }
.tz-kasten .wp-block-buttons { margin-top: 18px; }

/* Wiki: Fettungen aus dem Original in Überschriften nur als Gewicht der Überschrift (Wortlaut bleibt) */
.tz-wiki-artikel :is(h2, h3, h4) strong { font-weight: inherit; }
/* Leseliste der Übersicht: Link und Text bleiben in einer Zeile neben der Schrittnummer */
:is(.tz-uebersicht__seite, .tz-ablauf) .is-style-schritte li, .is-style-schritte.tz-ablauf li { display: block; position: relative; padding-left: 42px; min-height: 28px; }
:is(.tz-uebersicht__seite, .tz-ablauf) .is-style-schritte li::before, .is-style-schritte.tz-ablauf li::before { position: absolute; left: 0; top: 0; margin-top: 0; }
.tz-rechner__hinweis { margin: 10px 0 0; font-size: 14px; color: var(--color-ink-60); }
.tz-rechner input:disabled { background: var(--color-ink-04); color: var(--color-ink-60); cursor: not-allowed; }
.tz-rechner input[aria-invalid="true"] { border-color: var(--color-danger); box-shadow: inset 3px 0 0 var(--color-danger); }
.tz-rechner__fehler { font-size: 13px; color: var(--color-danger); }

/* Lange Inline-Codebeispiele im Fließtext umbrechen statt die Seite zu verbreitern (375 px) */
.tz-prose :where(p, li, td, dd) code { overflow-wrap: anywhere; }
/* Code-Block (02 Code): lange Zeilen scrollen im eigenen Kasten */
.wp-block-code { overflow-x: auto; line-height: 1.7; }
.wp-block-code code { white-space: pre; }

/* Befehlsliste (z. B. robots.txt): Befehl als Code, Erklärung und Beispiel darunter */
.tz-befehle { margin: 24px 0 0; border-top: 2px solid var(--color-ink); }
.tz-befehle > div { padding: 18px 0; border-bottom: 1px solid var(--color-ink-10); }
.tz-befehle dt code { font-family: var(--wp--preset--font-family--mono); font-size: 15px; font-weight: 700; color: var(--color-ink); background: var(--color-ink-06); padding: 2px 8px; }
.tz-befehle dd { margin: 10px 0 0; }
.tz-befehle dd > * { margin: 10px 0 0; }
.tz-befehle dd > :first-child { margin-top: 0; }
.tz-befehle .wp-block-code {
	background: var(--wp--preset--color--primary); color: #FFFFFF;
	font-family: var(--wp--preset--font-family--mono); font-size: 14px;
	padding: 16px 20px;
}
.wp-block-code:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Wiki-Medien: Bilder auf die Spaltenbreite begrenzen; lange URLs im Fließtext umbrechen (Codex A-1) */
.tz-prose img { max-width: 100%; height: auto; }
.tz-prose :where(p, li, dd, td, figcaption) { overflow-wrap: break-word; }
/* Medienbedarf: Screenshot fehlt, rot markiert (Pascal 2026-10-11, E-79); Pascal liefert nach media/screenshots/<slug>/ */
.tz-medienbedarf { margin: 22px 0 0; }
.tz-medienbedarf__flaeche {
	display: flex; align-items: center; justify-content: center;
	min-height: 160px; padding: 24px;
	border: 2px dashed var(--color-danger);
	background: var(--color-danger-08);
	font-family: var(--wp--preset--font-family--mono); font-size: 14px; font-weight: 700; color: var(--color-danger);
	text-align: center;
}
.tz-medienbedarf figcaption { margin-top: 10px; font-size: 14px; color: var(--color-ink-60); }

/* Schrittliste mit Startnummer (core/list start=N): Zähler fortsetzen */
ol.is-style-schritte[start="2"] { counter-reset: tz-schritt 1; }
ol.is-style-schritte[start="3"] { counter-reset: tz-schritt 2; }
ol.is-style-schritte[start="4"] { counter-reset: tz-schritt 3; }
ol.is-style-schritte[start="5"] { counter-reset: tz-schritt 4; }
ol.is-style-schritte[start="6"] { counter-reset: tz-schritt 5; }
ol.is-style-schritte[start="7"] { counter-reset: tz-schritt 6; }
ol.is-style-schritte[start="8"] { counter-reset: tz-schritt 7; }
ol.is-style-schritte[start="9"] { counter-reset: tz-schritt 8; }

/* ------------------------------------------------------------------ Produkt- und Leistungsseiten (03 Produktseite, design/canvas/Produkt-retreva) */
.tz-produkt .tz-brotkrumen { padding-top: 20px; }
.tz-hero--text > * { max-width: 860px; }
.tz-hero--text h1 { text-wrap: balance; }
.tz-abschnitt { padding-top: var(--wp--preset--spacing--90, 88px); }
.tz-abschnitt > h2 { margin-top: 18px; max-width: 760px; text-wrap: balance; }
.tz-abschnitt > .is-style-lead { max-width: 760px; }

/* Fakten-Leiste: dunkler Trenner mit drei Kernaussagen */
.tz-fakten { background: var(--color-primary); color: #FFFFFF; margin-top: var(--wp--preset--spacing--90, 88px); }
.tz-fakten__raster { display: grid; gap: 28px 48px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); padding-top: 40px; padding-bottom: 40px; }
.tz-fakten__raster > * { margin: 0; }
.tz-fakten h3 { margin: 0; font-size: var(--wp--preset--font-size--klein-titel); color: #FFFFFF; }
.tz-fakten p { margin: 6px 0 0; color: var(--on-dark-muted); font-size: 16px; }

/* Karten mit Titel und Satz (ohne Link) */
.tz-wege { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin-top: 28px; }
.tz-wege > * { margin: 0; padding: 22px; background: var(--color-ink-04); }
.tz-wege h3 { margin: 0; font-size: var(--wp--preset--font-size--klein-titel); }
.tz-wege .tz-label { margin: 0 0 10px; font-size: 14px; }
.tz-wege p { margin: 8px 0 0; font-size: 16px; color: var(--color-ink-80); }

/* Ablauf: Schrittliste mit Titel */
.tz-ablauf { margin-top: 28px; max-width: 820px; }
.tz-ablauf li { align-items: flex-start; }
.tz-ablauf li::before { margin-top: 2px; }

/* Paket + „Passt, wenn …“ */
.tz-paket { display: grid; gap: 32px 56px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-top: 28px; align-items: start; }
.tz-paket__karte { border: 2px solid var(--color-primary); padding: 28px; }
.tz-paket__karte > * { margin: 0; }
.tz-paket__karte > * + * { margin-top: 14px; }
.tz-paket__karte h3 { font-size: var(--wp--preset--font-size--karte); }
.tz-paket__preis { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-ink); }
.tz-paket__preis small { font-size: 15px; font-weight: 500; color: var(--color-ink-60); }
.tz-passt h3 { margin: 0; font-size: var(--wp--preset--font-size--klein-titel); }
.tz-passt h3 + ul { margin-top: 10px; }
.tz-passt ul + h3 { margin-top: 24px; }
.tz-passt__nicht { list-style: none; padding-left: 0; }
.tz-passt__nicht li { position: relative; padding-left: 28px; }
.tz-passt__nicht li::before { content: "–"; position: absolute; left: 0; color: var(--color-ink-60); font-weight: 700; }

/* Preistabelle: 2–4 Pakete nebeneinander, Hervorhebung nur über 2px Primär-Rahmen + Label */
.tz-preise { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: 28px; align-items: stretch; }
.tz-preise .tz-paket__karte { border: 1px solid var(--color-ink-10); display: flex; flex-direction: column; }
.tz-preise .tz-paket__karte--empfohlen { border: 2px solid var(--color-primary); }
.tz-preise .tz-paket__karte .wp-block-buttons { margin-top: auto; padding-top: 18px; }
.tz-preise__hinweis { margin-top: 14px; font-size: 14px; color: var(--color-ink-60); }

/* FAQ (02 Struktur: Akkordeon) */
.tz-faq { margin-top: 24px; border-top: 2px solid var(--color-ink); max-width: 860px; }
.tz-faq .wp-block-details { border-bottom: 1px solid var(--color-ink-10); padding: 18px 0; margin: 0; }
.tz-faq .wp-block-details summary { font-weight: 700; cursor: pointer; }
.tz-faq .wp-block-details > :not(summary) { margin-top: 8px; color: var(--color-ink-80); }

/* Abschluss-CTA: Primär-Fläche */
.tz-abschluss { background: var(--color-primary); color: #FFFFFF; margin-top: var(--wp--preset--spacing--90, 88px); }
.tz-abschluss__inhalt { padding-top: 56px; padding-bottom: 56px; }
.tz-abschluss h2 { margin: 0; color: #FFFFFF; font-size: var(--wp--preset--font-size--abschnitt); }
.tz-abschluss p { margin: 10px 0 0; color: var(--on-dark-muted); font-size: var(--wp--preset--font-size--lead); }
.tz-abschluss .wp-block-buttons { margin-top: 26px; }
.tz-hero--text { padding-top: 48px; }
.tz-preise > *, .tz-paket > * { margin: 0; }
.tz-abschnitt > :where(ul, ol, .wp-block-list, .tz-wege, .tz-faq, .tz-preise, .tz-paket) { margin-top: 24px; }

/* ------------------------------------------------------------------ Tool-Seiten und HTML-Sonderzeichen (03 Tool, design/canvas/Tool-Sonderzeichen) */
.tz-tool .tz-brotkrumen { padding-top: 0; margin-bottom: 18px; }
.tz-tool__inhalt { padding-top: 24px; padding-bottom: 88px; }
.tz-sz__leiste {
	position: sticky; top: 0; z-index: 5;
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px;
	padding: 16px 0; background: var(--color-bg); border-bottom: 1px solid var(--color-ink-10);
}
.tz-sz__suche { margin: 0; display: flex; flex-direction: column; gap: 6px; flex: 1 1 280px; max-width: 520px; }
.tz-sz__suche label, .tz-sz__titelfeld label { font-size: 14px; font-weight: 600; color: var(--color-ink); }
.tz-sz input { height: 48px; padding: 0 12px; border: 1px solid var(--color-ink-45); border-radius: 0; font: inherit; font-size: 16px; color: var(--color-ink); background: var(--color-bg); }
.tz-sz input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 0; border-color: var(--color-accent); }
.tz-sz__zahl { margin: 0; font-size: 14px; color: var(--color-ink-60); padding-bottom: 12px; }
.tz-sz__kategorien { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.tz-sz__kategorien button, .tz-zeichen__aktionen button {
	min-height: 36px; padding: 0 12px; border: 0; border-radius: 0; cursor: pointer;
	background: var(--color-ink-06); color: var(--color-ink); font: inherit; font-size: 14px; font-weight: 600;
}
.tz-sz__kategorien button[aria-pressed="true"] { background: var(--color-primary); color: #FFFFFF; }
.tz-sz button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tz-sz__kategorie { margin-top: 40px; }
.tz-sz__kategorie > h2 { margin: 0; font-size: var(--wp--preset--font-size--karte); scroll-margin-top: 140px; }
.tz-sz__kategorie > p { margin: 6px 0 0; color: var(--color-ink-60); font-size: 15px; }
.tz-sz__raster { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.tz-zeichen { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--color-ink-04); scroll-margin-top: 140px; }
.tz-zeichen[hidden] { display: none; }
.tz-zeichen__z {
	align-self: flex-start; min-width: 56px; min-height: 56px; padding: 4px 10px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 32px; line-height: 1; color: var(--color-ink); background: var(--color-bg); border: 1px solid var(--color-ink-10); cursor: pointer;
}
.tz-zeichen__name { margin: 4px 0 0; font-weight: 700; color: var(--color-ink); font-size: 15px; }
.tz-zeichen__hinweis { margin: 0; font-size: 13px; color: var(--color-ink-60); }
.tz-zeichen__codes { margin: 6px 0 0; display: grid; gap: 4px; }
.tz-zeichen__codes > div { display: flex; align-items: center; gap: 8px; }
.tz-zeichen__codes dt { width: 58px; flex: none; font-size: 12px; color: var(--color-ink-60); }
.tz-zeichen__codes dd { margin: 0; min-width: 0; }
.tz-zeichen__codes code { font-family: var(--wp--preset--font-family--mono); font-size: 13px; background: var(--color-bg); padding: 2px 6px; overflow-wrap: anywhere; }
.tz-zeichen__code { border: 0; padding: 0; background: none; cursor: pointer; text-align: left; }
.tz-zeichen__code:hover code { box-shadow: inset 0 0 0 1px var(--color-accent); }
.tz-zeichen__aktionen { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; }
.tz-zeichen__favorit { min-width: 40px; font-size: 18px !important; }
.tz-zeichen__favorit[aria-pressed="true"] { color: var(--color-danger) !important; }
.tz-sz__leer { margin-top: 32px; padding: 24px; background: var(--color-ink-04); }
.tz-sz__vorschau { margin-top: 56px; padding-top: 24px; border-top: 2px solid var(--color-ink); max-width: 760px; }
.tz-sz__vorschau h2 { margin: 0; font-size: var(--wp--preset--font-size--karte); }
.tz-sz__titelfeld { display: flex; flex-direction: column; gap: 6px; }
.tz-sz__laenge { font-size: 13px; color: var(--color-ink-60); }
.tz-sz__snippet { margin-top: 16px; padding: 18px 20px; border: 1px solid var(--color-ink-10); }
.tz-sz__snippet p { margin: 0; }
.tz-sz__snippet-url { font-size: 14px; color: var(--color-ink-60); }
.tz-sz__snippet-titel { margin-top: 4px !important; font-size: 20px; color: var(--color-accent); line-height: 1.3; }
.tz-sz__snippet-text { margin-top: 4px !important; font-size: 14px; color: var(--color-ink-80); }
.tz-sz__hinweis { font-size: 13px; color: var(--color-ink-60); }
.tz-sz__verlinken, .tz-sz__bruecke { margin-top: 32px; max-width: 760px; }
.tz-sz__verlinken .wp-block-code { margin-top: 12px; font-size: 13px; }

/* FAQ-Akkordeon (02 Struktur): Plus, das sich beim Öffnen zum × dreht */
.tz-faq .wp-block-details summary { list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.tz-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.tz-faq .wp-block-details summary::after {
	content: "+"; flex: none;
	font-size: 24px; line-height: 1; font-weight: 400; color: var(--color-ink);
	transition: transform .15s ease;
}
.tz-faq .wp-block-details[open] summary::after { transform: rotate(45deg); }
.tz-faq .wp-block-details summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tz-faq .wp-block-details summary::after { transition: none; } }

/* Fehlende Angabe (Pascal 2026-10-11, E-78): sichtbar rot, nichts erfinden. Pascal ergänzt bei der Endkontrolle. */
.tz-fehlt {
	display: inline-block; padding: 2px 8px;
	background: var(--color-danger-08); box-shadow: inset 3px 0 0 var(--color-danger);
	color: var(--color-danger); font-family: var(--wp--preset--font-family--mono); font-size: 0.8125em; font-weight: 700; line-height: 1.5;
}
/* Werdegang: Logo des früheren Blogs, klein und ohne Rahmen */
.tz-werdegang__logo { margin-top: 28px; }
.tz-werdegang__logo img { width: 305px; max-width: 100%; height: auto; }
.tz-werdegang__logo figcaption { margin-top: 8px; font-size: 14px; color: var(--color-ink-60); }

/* ------------------------------------------------------------------ schema.org-Generator (E-25, design/canvas/Tool-Schema, 02 Formulare) */
.tz-sg { --tz-sg-rand: var(--color-ink-10); }
.tz-sg__ohne-js { margin: 0 0 16px; padding: 12px 14px; background: var(--color-accent-08); box-shadow: inset 3px 0 0 var(--color-accent); font-size: 15px; }
.tz-sg__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 0 0 14px; border-bottom: 1px solid var(--tz-sg-rand); }
.tz-sg__typen, .tz-sg__segment { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 4px; border: 0; background: var(--color-ink-06); }
.tz-sg__typen label, .tz-sg__segment label { position: relative; display: inline-flex; }
.tz-sg__typen input, .tz-sg__segment input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tz-sg__typen span, .tz-sg__segment span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--color-ink-60); }
.tz-sg__segment span { min-height: 36px; }
.tz-sg__typen input:checked + span, .tz-sg__segment input:checked + span { background: var(--color-bg); color: var(--color-ink); box-shadow: 0 1px 2px rgba(20, 32, 43, .12); }
.tz-sg__typen input:focus-visible + span, .tz-sg__segment input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tz-sg__typen input:disabled { cursor: not-allowed; }
.tz-sg__alle { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--color-ink); cursor: pointer; }
.tz-sg__alle[hidden] { display: none; }
.tz-sg__schalter { position: relative; flex: none; width: 44px; height: 24px; background: var(--color-ink-20); }
.tz-sg__schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--color-bg); transition: left .15s ease; }
.tz-sg__alle[aria-checked="true"] .tz-sg__schalter { background: var(--color-primary); }
.tz-sg__alle[aria-checked="true"] .tz-sg__schalter::after { left: 23px; }
.tz-sg__flaeche { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 48px; padding-top: 8px; }
.tz-sg__formular { flex: 999 1 560px; min-width: 0; }
.tz-sg__sperre { margin: 0; padding: 0; border: 0; min-width: 0; }
.tz-sg__gruppe { padding: 18px 0; border-bottom: 1px solid var(--tz-sg-rand); }
.tz-sg__gruppe > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 18px; font-weight: 700; color: var(--color-ink); cursor: pointer; }
.tz-sg__gruppe > summary::-webkit-details-marker { display: none; }
.tz-sg__gruppe > summary::after { content: "+"; flex: none; font-size: 24px; line-height: 1; font-weight: 400; transition: transform .15s ease; }
.tz-sg__gruppe[open] > summary::after { transform: rotate(45deg); }
.tz-sg__gruppe > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tz-sg__zaehler { margin-left: 10px; padding: 2px 8px; background: var(--color-ink-06); font-family: var(--wp--preset--font-family--mono); font-size: 12px; font-weight: 500; }
.tz-sg__gruppe-inhalt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px 20px; margin-top: 16px; }
.tz-sg__feld { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tz-sg__feld[hidden] { display: none; }
.tz-sg__feld--breit, .tz-sg__gruppe-inhalt > .tz-sg__knoepfe, .tz-sg__gruppe-inhalt > .tz-sg__meldung { grid-column: 1 / -1; }
.tz-sg label, .tz-sg legend { font-size: 14px; font-weight: 600; color: var(--color-ink); }
.tz-sg__prop { font-family: var(--wp--preset--font-family--mono); font-size: 12px; font-weight: 400; color: var(--color-ink-60); }
.tz-sg__hilfe { font-size: 13px; color: var(--color-ink-60); display: flex; justify-content: space-between; gap: 12px; }
.tz-sg__laenge { font-family: var(--wp--preset--font-family--mono); }
.tz-sg__laenge--zu-lang { color: var(--color-danger); }
.tz-sg :is(input[type=text], input[type=url], input[type=email], input[type=tel], input[type=number], input[type=time], select, textarea) {
	width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 12px; border: 1px solid var(--color-ink-45); border-radius: 0;
	background: var(--color-bg); color: var(--color-ink); font: inherit; font-size: 16px;
}
.tz-sg textarea { min-height: 96px; padding: 10px 12px; resize: vertical; }
.tz-sg__mono { font-family: var(--wp--preset--font-family--mono) !important; font-size: 14px !important; }
.tz-sg select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.tz-sg :is(input, select, textarea):hover { border-color: var(--color-ink-60); }
.tz-sg :is(input, select, textarea):focus-visible { outline: 2px solid var(--color-accent); outline-offset: -1px; border-color: var(--color-accent); }
.tz-sg :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--color-danger); box-shadow: inset 3px 0 0 var(--color-danger); }
.tz-sg :is(input, select, textarea, button):disabled { background-color: var(--color-ink-04); color: var(--color-ink-60); cursor: not-allowed; }
.tz-sg__fehler { font-size: 13px; font-weight: 600; color: var(--color-danger); }
.tz-sg__wiederholt, .tz-sg__ausstattung { margin: 0; padding: 0; border: 0; min-width: 0; }
.tz-sg__wiederholt ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tz-sg__wiederholt li { display: flex; align-items: center; gap: 8px; }
.tz-sg__nr { width: 18px; flex: none; text-align: right; font-family: var(--wp--preset--font-family--mono); font-size: 12px; color: var(--color-ink-60); }
.tz-sg__entfernen { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: var(--color-ink-06); color: var(--color-ink); cursor: pointer; }
.tz-sg__ausstattung > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 16px; margin-top: 6px; }
.tz-sg__ausstattung label, .tz-sg__check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 400; }
.tz-sg__check { font-size: 14px; font-weight: 600; }
.tz-sg input[type=checkbox] { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--color-primary); }
.tz-sg__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.tz-sg__knoepfe[hidden], .tz-sg__format[hidden], .tz-sg__tabs[hidden], .tz-sg__status[hidden] { display: none; }
.tz-sg__knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 0; background: var(--color-ink-06); color: var(--color-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.tz-sg__knopf--klein { min-height: 40px; padding: 0 14px; font-size: 14px; }
.tz-sg__knopf--primaer { background: var(--color-primary); color: #FFFFFF; }
.tz-sg__knopf:disabled { background: var(--color-ink-06); color: var(--color-ink-60); }
.tz-sg button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tz-sg__wiederholt .tz-sg__knopf { margin-top: 10px; }
.tz-sg__meldung { margin: 0; font-size: 14px; color: var(--color-ink-80); }
.tz-sg__meldung:empty { display: none; }
.tz-sg__warnung { display: flex; gap: 14px; padding: 14px 16px; background: var(--color-warning-08); box-shadow: inset 3px 0 0 var(--color-warning); font-size: 15px; }
.tz-sg__warnung strong { flex: none; color: var(--color-warning); }
.tz-sg__ausgabe { flex: 1 1 400px; min-width: 0; margin-top: 18px; }
@media (min-width: 1024px) { .tz-sg__ausgabe { position: sticky; top: 16px; } }
.tz-sg__tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--tz-sg-rand); }
.tz-sg__tabs button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--color-ink-60); cursor: pointer; }
.tz-sg__tabs button[aria-selected="true"] { color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-accent); }
.tz-sg__status { margin-top: 14px; padding: 12px 14px; font-size: 15px; }
.tz-sg__status--info { background: var(--color-accent-08); box-shadow: inset 3px 0 0 var(--color-accent); }
.tz-sg__status--fehler { background: var(--color-danger-08); box-shadow: inset 3px 0 0 var(--color-danger); }
.tz-sg__status--fehler strong { color: var(--color-danger); }
.tz-sg__status--gueltig { background: var(--color-success-08); box-shadow: inset 3px 0 0 var(--color-success); }
.tz-sg__status--gueltig strong { color: var(--color-success); }
.tz-sg__status a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.tz-sg__panel { margin-top: 14px; }
.tz-sg__panel[hidden] { display: none; }
.tz-sg__format { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 10px; }
.tz-sg__beispiel { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.tz-sg__code { margin: 0; max-height: 460px; overflow: auto; padding: 16px 18px; background: var(--color-primary); color: #E6EDF1; font-family: var(--wp--preset--font-family--mono); font-size: 13px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.tz-sg__code:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tz-sg__panel > .tz-sg__knoepfe { margin-top: 10px; }
.tz-sg__panel > .tz-sg__meldung { margin-top: 8px; }
.tz-sg__hinweis { margin: 12px 0 0; font-size: 14px; color: var(--color-ink-60); }
.tz-sg__hinweis code { font-family: var(--wp--preset--font-family--mono); }
.tz-sg__serp { padding: 18px; border: 1px solid var(--tz-sg-rand); font-family: Arial, sans-serif; }
.tz-sg__serp p { margin: 0; }
.tz-sg__serp-url { font-size: 12px; color: #4D5156; }
.tz-sg__serp-titel { font-size: 19px; line-height: 1.3; color: #1A0DAB; }
.tz-sg__serp-meta, .tz-sg__serp-text { margin-top: 4px !important; font-size: 13px; line-height: 1.5; color: #4D5156; }
.tz-sg__sterne { color: #B05A00; }
.tz-sg__chat { display: flex; flex-direction: column; gap: 10px; }
.tz-sg__chat p { margin: 0; padding: 10px 14px; font-size: 15px; }
.tz-sg__frage { align-self: flex-end; max-width: 85%; background: var(--color-ink-06); }
.tz-sg__antwort { max-width: 92%; border: 1px solid var(--tz-sg-rand); color: var(--color-ink-80); }
.tz-sg__antwort strong { color: var(--color-ink); }
.tz-sg__kasten { margin-top: 56px; max-width: 760px; }
@media (prefers-reduced-motion: reduce) { .tz-sg__gruppe > summary::after, .tz-sg__schalter::after { transition: none; } }
/* Kästen auf Tool-Seiten bündig mit dem Tool, nicht mittig (constrained layout setzt margin auto). */
.tz-tool__inhalt > .tz-kasten { margin-left: max(0px, (100% - var(--container)) / 2) !important; }