/*
 * Clicdesign Theme
 *
 * CD-09  Alle Designwerte stammen aus theme.json. Die --cd-* Tokens sind
 *        nur lesbare Namen fuer die Presets, die WordPress daraus erzeugt.
 * CD-11  Keine Inline-Styles.
 * CD-12  Kundenanpassungen gehoeren ins Child-Theme, nicht hierhin.
 *
 * 1  Tokens
 * 2  Grundlagen
 * 3  Hilfsklassen und Zugaenglichkeit
 * 4  Layout
 * 5  Kopf und Navigation
 * 6  Fuss
 * 7  Freigegebene Core Blocks
 * 8  Archive, Teaser, Suche
 */

/* ------------------------------------------------------------------ *
 * 1  Tokens
 * ------------------------------------------------------------------ */

:root {
	/* Schrift. Platzhalter bis Fonts und Palette festgelegt sind. */
	--cd-font-head: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--cd-font-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Abstaende - Spiegel der spacingSizes aus theme.json */
	--cd-space-xs: var(--wp--preset--spacing--xs, 12px);
	--cd-space-sm: var(--wp--preset--spacing--sm, 24px);
	--cd-space-md: var(--wp--preset--spacing--md, 48px);
	--cd-space-lg: var(--wp--preset--spacing--lg, 80px);
	--cd-space-xl: var(--wp--preset--spacing--xl, 128px);

	/* Farben - Spiegel der palette aus theme.json */
	--cd-color-primary:    var(--wp--preset--color--primary, #1a1a1a);
	--cd-color-secondary:  var(--wp--preset--color--secondary, #6b6b6b);
	--cd-color-text:       var(--wp--preset--color--text, #1a1a1a);
	--cd-color-text-muted: var(--wp--preset--color--text-muted, #6b6b6b);
	--cd-color-bg:         var(--wp--preset--color--background, #fff);
	--cd-color-surface:    var(--wp--preset--color--surface, #f4f4f2);
	--cd-color-inverse:    var(--wp--preset--color--inverse, #1a1a1a);
	--cd-color-border:     var(--wp--preset--color--border, #e0e0dd);

	/* Typografie */
	--cd-text:  var(--wp--preset--font-size--medium, clamp(17px, 1.2vw, 20px));
	--cd-lead:  var(--wp--preset--font-size--large, clamp(20px, 1.6vw, 26px));
	--cd-small: var(--wp--preset--font-size--small, clamp(15px, 1vw, 16px));

	/* Layout */
	--cd-container: 1180px;
	--cd-container-wide: 1400px;
	--cd-measure: 68ch;

	/* Kopfzeile */
	--cd-header-height: 80px;

	/* Bewegung */
	--cd-transition: 200ms ease;
}

/* ------------------------------------------------------------------ *
 * 2  Grundlagen
 * ------------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--cd-header-height) + var(--cd-space-sm));
}

body {
	margin: 0;
	font-family: var(--cd-font-text);
	font-size: var(--cd-text);
	line-height: 1.6;
	color: var(--cd-color-text);
	background-color: var(--cd-color-bg);
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--cd-font-head);
	font-weight: 600;
	line-height: 1.1;
	text-wrap: balance;
	margin-block: 0 var(--cd-space-sm);
}

p {
	margin-block: 0 var(--cd-space-sm);
}

:where(p, li) {
	text-wrap: pretty;
}

a {
	color: currentColor;
}

/* CD-19: Fokus muss immer sichtbar sein. */
:focus-visible {
	outline: 2px solid var(--cd-color-primary);
	outline-offset: 3px;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------------------------ *
 * 3  Hilfsklassen und Zugaenglichkeit
 * ------------------------------------------------------------------ */

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

.cd-skip-link:focus {
	position: fixed !important;
	top: var(--cd-space-xs);
	left: var(--cd-space-xs);
	z-index: 999;
	width: auto;
	height: auto;
	padding: var(--cd-space-xs) var(--cd-space-sm);
	clip-path: none;
	color: var(--cd-color-bg);
	background: var(--cd-color-primary);
	text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * 4  Layout
 * ------------------------------------------------------------------ */

.cd-container {
	width: 100%;
	max-width: var(--cd-container);
	margin-inline: auto;
	padding-inline: var(--cd-space-sm);
}

.cd-main {
	display: block;
	min-height: 40vh;
}

/*
 * Inhaltslayout.
 *
 * In einem klassischen Theme erzeugt WordPress um the_content() keinen
 * Layout-Container. Die Breitenbegrenzung machen wir deshalb selbst -
 * das ist die Entsprechung zu layout.contentSize aus theme.json.
 *
 * Seiten beginnen bewusst buendig unter dem Kopf: Sections bringen ihre
 * eigene vertikale Luft mit.
 */

.cd-page__content > *,
.cd-single__content > * {
	max-width: var(--cd-container);
	margin-inline: auto;
	padding-inline: var(--cd-space-sm);
}

.cd-page__content > .alignwide,
.cd-single__content > .alignwide {
	max-width: var(--cd-container-wide);
}

.cd-page__content > .alignfull,
.cd-single__content > .alignfull {
	max-width: none;
	padding-inline: 0;
}

/*
 * Fliesstext im Beitrag bekommt eine lesbare Zeilenlaenge.
 * Muss nach der Regel oben stehen, sonst gewinnt die Containerbreite.
 */
.cd-single__content > :where(p, ul, ol, h2, h3, h4, blockquote) {
	max-width: var(--cd-measure);
}

/* ------------------------------------------------------------------ *
 * 5  Kopf und Navigation
 * ------------------------------------------------------------------ */

.cd-header {
	/*
	 * Klebrig statt fest: So bleibt der Kopf im Fluss und die Seite
	 * springt beim Ein- und Ausblenden nicht. Der Versatz beruecksichtigt
	 * die Adminleiste, sonst schiebt sie sich beim Anmelden darueber.
	 */
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	border-bottom: 1px solid var(--cd-color-border);
	background: var(--cd-color-bg);
}

.cd-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cd-space-sm);
	max-width: var(--cd-container);
	min-height: var(--cd-header-height);
	margin-inline: auto;
	padding-inline: var(--cd-space-sm);
}

.cd-header__title {
	margin: 0;
	font-family: var(--cd-font-head);
	font-size: 1.25rem;
	font-weight: 600;
}

.cd-header__title a {
	text-decoration: none;
}

.cd-header__branding img,
.cd-header__branding .custom-logo {
	max-height: calc(var(--cd-header-height) - var(--cd-space-sm));
	width: auto;
}

/* Burger */

.cd-header__burger {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
}

.cd-header__burger-box {
	position: relative;
	display: block;
	width: 24px;
	height: 2px;
}

.cd-header__burger-line,
.cd-header__burger-line::before,
.cd-header__burger-line::after {
	position: absolute;
	left: 0;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform var(--cd-transition), opacity var(--cd-transition);
}

.cd-header__burger-line {
	top: 0;
}

.cd-header__burger-line::before,
.cd-header__burger-line::after {
	content: "";
}

.cd-header__burger-line::before {
	top: -7px;
}

.cd-header__burger-line::after {
	top: 7px;
}

.cd-header__burger[aria-expanded="true"] .cd-header__burger-line {
	background: transparent;
}

.cd-header__burger[aria-expanded="true"] .cd-header__burger-line::before {
	top: 0;
	transform: rotate(45deg);
}

.cd-header__burger[aria-expanded="true"] .cd-header__burger-line::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Navigation - Listen */

.cd-nav__list,
.cd-nav__submenu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cd-nav a {
	display: block;
	text-decoration: none;
	padding-block: var(--cd-space-xs);
}

.cd-nav a[aria-current] {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.cd-nav__toggle {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.cd-nav__chevron {
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--cd-transition);
}

.cd-nav__toggle[aria-expanded="true"] .cd-nav__chevron {
	transform: translateY(2px) rotate(-135deg);
}

/*
 * Der Umbruchpunkt steht bewusst hart im Stylesheet:
 * CSS-Variablen funktionieren in Media Queries nicht.
 */

/* Mobile: Panel */
@media (max-width: 899px) {

	.cd-nav {
		position: fixed;
		inset: var(--cd-header-height) 0 0 0;
		display: none;
		padding: var(--cd-space-md) var(--cd-space-sm);
		overflow-y: auto;
		background: var(--cd-color-bg);
	}

	.cd-nav.is-open {
		display: block;
	}

	.cd-nav__list > li {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		border-bottom: 1px solid var(--cd-color-border);
	}

	.cd-nav__list > li > a {
		font-family: var(--cd-font-head);
		font-size: var(--cd-lead);
		padding-block: var(--cd-space-sm);
	}

	.cd-nav__submenu {
		display: none;
		grid-column: 1 / -1;
		padding-bottom: var(--cd-space-sm);
		padding-left: var(--cd-space-sm);
	}

	.cd-nav__submenu.is-open {
		display: block;
	}

	body.cd-nav-open {
		overflow: hidden;
	}
}

/* Desktop: Zeile mit Dropdown */
@media (min-width: 900px) {

	.cd-header__burger {
		display: none;
	}

	.cd-nav__list {
		display: flex;
		align-items: center;
		gap: var(--cd-space-sm);
	}

	.cd-nav__list > li {
		position: relative;
		display: flex;
		align-items: center;
	}

	.cd-nav__submenu {
		position: absolute;
		top: 100%;
		left: calc(var(--cd-space-xs) * -1);
		z-index: 10;
		display: none;
		min-width: max-content;
		padding: var(--cd-space-xs) 0;
		border: 1px solid var(--cd-color-border);
		background: var(--cd-color-bg);
		box-shadow: 0 12px 32px rgb(22 24 28 / 8%);
	}

	/*
	 * Auf dem Desktop oeffnet das Untermenue beim Ueberfahren. Der
	 * Umschalter bleibt trotzdem bestehen — er ist der Weg fuer Tastatur
	 * und Touch, wo es kein Hover gibt (CD-19).
	 */
	.cd-nav__list > li:hover > .cd-nav__submenu,
	.cd-nav__list > li:focus-within > .cd-nav__submenu,
	.cd-nav__submenu.is-open {
		display: block;
	}

	/*
	 * Zwischen Menuepunkt und Untermenue darf keine Luecke entstehen,
	 * sonst schliesst es beim Hinunterfahren mit der Maus.
	 */
	.cd-nav__list > li::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: var(--cd-space-xs);
	}

	.cd-nav__submenu a {
		padding: 9px var(--cd-space-sm);
		white-space: nowrap;
	}

	.cd-nav__submenu a:hover {
		background: var(--cd-color-surface, #f4f4f2);
		text-decoration: none;
	}

	.cd-nav__toggle {
		width: 28px;
		height: 28px;
	}
}

/* ------------------------------------------------------------------ *
 * 6  Fuss
 * ------------------------------------------------------------------ */

.cd-footer {
	margin-top: var(--cd-space-xl);
	padding-block: var(--cd-space-md);
	border-top: 1px solid var(--cd-color-border);
	font-size: var(--cd-small);
}

.cd-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cd-space-sm);
	max-width: var(--cd-container);
	margin-inline: auto;
	padding-inline: var(--cd-space-sm);
}

.cd-footer__copyright {
	margin: 0;
	color: var(--cd-color-text-muted);
}

.cd-footer__nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cd-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------------ *
 * 7  Freigegebene Core Blocks
 *
 * 'wp-block-styles' ist bewusst nicht aktiviert. Was hier nicht
 * gestaltet ist, ist auch nicht freigegeben.
 * ------------------------------------------------------------------ */

.wp-block-button__link {
	display: inline-block;
	font-family: var(--cd-font-head);
	line-height: 1.2;
	text-decoration: none;
	transition: opacity var(--cd-transition);
}

.wp-block-button__link:hover {
	opacity: 0.85;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid currentColor;
	color: var(--cd-color-primary);
	background: transparent;
}

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cd-space-xs);
}

.wp-block-image figcaption,
.wp-block-gallery figcaption {
	margin-top: var(--cd-space-xs);
	font-size: var(--cd-small);
	color: var(--cd-color-text-muted);
}

.wp-block-quote {
	margin-inline: 0;
	padding-left: var(--cd-space-sm);
	border-left: 2px solid var(--cd-color-border);
	font-size: var(--cd-lead);
}

.wp-block-quote cite {
	display: block;
	margin-top: var(--cd-space-xs);
	font-size: var(--cd-small);
	font-style: normal;
	color: var(--cd-color-text-muted);
}

.wp-block-separator {
	height: 0;
	margin-block: var(--cd-space-md);
	border: 0;
	border-top: 1px solid var(--cd-color-border);
}

.wp-block-columns {
	gap: var(--cd-space-md);
}

/* ------------------------------------------------------------------ *
 * 8  Archive, Teaser, Suche
 * ------------------------------------------------------------------ */

.cd-archive,
.cd-single,
.cd-error {
	padding-block: var(--cd-space-lg);
}

.cd-archive__header,
.cd-single__header {
	margin-bottom: var(--cd-space-lg);
}

.cd-archive__list {
	display: grid;
	gap: var(--cd-space-md);
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

.cd-teaser__media img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.cd-teaser__title {
	margin-block: var(--cd-space-xs) var(--cd-space-xs);
	font-size: var(--cd-lead);
}

.cd-teaser__title a {
	text-decoration: none;
}

.cd-teaser__title a:hover {
	text-decoration: underline;
}

.cd-entry__date,
.cd-entry__author {
	font-size: var(--cd-small);
	color: var(--cd-color-text-muted);
}

.cd-entry__date {
	display: block;
}

/*
 * Im Einzelbeitrag stehen Autor und Datum auf einer Zeile, getrennt durch
 * einen Punkt. Der Trenner kommt aus dem CSS und nicht aus dem Markup:
 * Fehlt der Autor, faellt er mit weg, ohne dass ein einzelner Punkt
 * stehenbleibt.
 */
.cd-single__header .cd-entry__author + .cd-entry__date {
	display: inline;
}

/*
 * Das Zeichen direkt und nicht als \00b7: Ein Hex-Escape wird in CSS durch
 * ein Leerzeichen beendet, und dieses Leerzeichen gehoert dann nicht mehr
 * zum Inhalt. Der Trenner klebte dadurch am Datum.
 */
.cd-single__header .cd-entry__author + .cd-entry__date::before {
	content: " · ";
}

.cd-single__image {
	margin: var(--cd-space-md) 0;
}

.cd-search {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cd-space-xs);
	margin-top: var(--cd-space-sm);
}

.cd-search__field {
	flex: 1 1 220px;
	padding: 12px var(--cd-space-xs);
	border: 1px solid var(--cd-color-border);
	font: inherit;
	color: inherit;
	background: var(--cd-color-bg);
}

.cd-search__submit {
	padding: 12px var(--cd-space-sm);
	border: 0;
	font-family: var(--cd-font-head);
	color: var(--cd-color-bg);
	background: var(--cd-color-primary);
	cursor: pointer;
}

.wp-block-post-navigation-link,
.wp-pagenavi,
.navigation.pagination {
	margin-top: var(--cd-space-lg);
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cd-space-xs);
}

.navigation.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--cd-space-xs);
	border: 1px solid var(--cd-color-border);
	text-decoration: none;
}

.navigation.pagination .page-numbers.current {
	color: var(--cd-color-bg);
	background: var(--cd-color-primary);
	border-color: var(--cd-color-primary);
}

/* ------------------------------------------------------------------ *
 * 9  Pattern-Klassen
 *
 * Die Patterns bestehen aus Core Blocks. Ihr Aussehen steht hier —
 * damit bleibt es zentral aenderbar, auch wenn das Markup nach dem
 * Einfuegen eingefroren ist (CD-03).
 * ------------------------------------------------------------------ */

.cd-eyebrow {
	font-family: var(--sm-font-mono, var(--cd-font-text));
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cd-color-text-muted);
	margin-bottom: var(--cd-space-xs);
}

.cd-lead {
	color: var(--cd-color-text-muted);
	max-width: 56ch;
}

.cd-statement {
	font-family: var(--sm-font-slab, var(--cd-font-head));
	font-weight: 500;
	line-height: 1.4;
}

/* Seitenkopf */
.cd-seitenkopf {
	padding-block: var(--cd-space-lg) var(--cd-space-md);
}

.cd-seitenkopf h1 {
	max-width: 18ch;
}

/* Text und Bild */
.cd-textbild {
	gap: var(--cd-space-lg);
	align-items: start;
}

.cd-textbild img {
	width: 100%;
	object-fit: cover;
}

/* Aufforderungsband */
.cd-band {
	padding-block: var(--cd-space-md);
	border-block: 1px solid var(--cd-color-border);
}

/* Linienliste: Aufzaehlung ohne Punkte, mit rotem Strich und Trennlinien */
.wp-block-list.is-style-cd-linien {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--cd-color-border);
}

.wp-block-list.is-style-cd-linien > li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--cd-space-sm);
	align-items: baseline;
	padding-block: 14px;
	border-bottom: 1px solid var(--cd-color-border);
}

.wp-block-list.is-style-cd-linien > li::before {
	content: "";
	width: 16px;
	height: 1px;
	background: var(--cd-color-primary);
	transform: translateY(-5px);
}

/* Vier Gruende */
.cd-gruende .wp-block-columns {
	gap: var(--cd-space-md);
	margin-top: var(--cd-space-md);
}

.cd-gruende .wp-block-column {
	border-top: 1px solid var(--cd-color-border);
	padding-top: var(--cd-space-sm);
}

.cd-gruende h3 {
	font-size: clamp(20px, 2vw, 24px);
	margin-bottom: var(--cd-space-xs);
}

/*
 * Hero.
 *
 * Die Position des Inhalts kommt aus diesem Stylesheet, nicht aus dem
 * Block-Attribut contentPosition. Grund: Sobald ein Cover eine eigene
 * Inhaltsposition traegt, setzt WordPress dem inneren Container
 * width:auto und margin:0 mit hoeherer Spezifitaet — der Inhalt klebt
 * dann an der Bildkante statt auf der Containerkante zu sitzen.
 */
.cd-hero {
	display: flex;
	align-items: flex-end;
	padding-block: var(--cd-space-md);
}

.cd-hero > .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--cd-container);
	margin-inline: auto;
	padding-inline: var(--cd-space-sm);
}

.cd-hero .cd-eyebrow,
.cd-hero .cd-lead,
.cd-hero .cd-statement,
.cd-hero h1 {
	color: #fff;
}

.cd-hero .cd-eyebrow,
.cd-hero .cd-lead {
	color: rgba(255, 255, 255, .82);
}

.cd-hero h1 {
	margin-bottom: var(--cd-space-xs);
}

.cd-hero .wp-block-buttons {
	margin-top: var(--cd-space-sm);
}

/* Abschnitte der Patterns bekommen vertikale Luft. */
.cd-abschnitt,
.cd-textbild,
.cd-gruende,
.cd-linienliste {
	margin-block: var(--cd-space-lg);
}

.cd-band {
	margin-block: var(--cd-space-lg);
}

/*
 * Der Hero traegt die groesste Schriftstufe des Systems — nicht dieselbe
 * wie ein Seitentitel. theme.json kennt nur eine h1-Groesse, deshalb hier.
 */
.cd-hero h1 {
	font-size: clamp(38px, 6.4vw, 72px);
	line-height: 1.02;
	max-width: 16ch;
}

.cd-hero .cd-statement {
	font-family: var(--sm-font-slab, var(--cd-font-head));
	font-weight: 500;
	font-size: clamp(18px, 1.9vw, 24px);
	margin-block: var(--cd-space-sm) var(--cd-space-xs);
}

.cd-hero .cd-lead {
	max-width: 46ch;
}

/*
 * Das Constrained-Layout von WordPress zentriert jedes Element, dessen
 * max-width schmaler ist als der Container — und zwar mit !important:
 *
 *   .is-layout-constrained > :where(:not(.alignleft)...) {
 *     margin-left: auto !important; margin-right: auto !important;
 *   }
 *
 * Fuer eine Lead-Zeile unter einer linksbuendigen Ueberschrift ist das
 * falsch. Gegen ein !important hilft nur ein !important — die Alternative
 * waere, jedes Pattern um eine zusaetzliche Gruppe zu erweitern, nur damit
 * das Layout nicht zentriert. Das waere mehr Markup fuer denselben Zweck.
 *
 * Betrifft nur Elemente, die wir selbst positionieren. Alles andere
 * zentriert WordPress weiterhin.
 */
.cd-hero > .wp-block-cover__inner-container > *,
.cd-seitenkopf > *,
.cd-abschnitt > *,
.cd-dunkel > *,
.cd-band > *,
.cd-lead,
.cd-statement {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * Dunkler Abschnitt.
 *
 * Setzt sich vom Rest ab, deshalb randlos und mit mehr vertikaler Luft.
 * Die Farben kommen aus theme.json (inverse/background), nicht von hier —
 * damit funktioniert derselbe Abschnitt auf jeder Kundensite mit deren
 * Palette.
 */
.cd-dunkel {
	padding-block: var(--cd-space-lg);
	margin-block: var(--cd-space-lg);
}

/*
 * Farbtokens im dunklen Abschnitt.
 *
 * Blocks sind fuer hellen Grund gestaltet: gedaempftes Grau fuer
 * Nebentexte, Primaerrot fuer Hervorhebungen. Auf dunklem Grund ergibt
 * das Kontraste um 2:1, waehrend WCAG AA 4.5:1 fuer Fliesstext und 3:1
 * fuer Bedienelemente verlangt (CD-19). Gemessen auf garagesteiner.ch:
 * Text des Rennstands 2.13, Knopf mit Umriss 2.79.
 *
 * Statt einzelne Blocks nachzubessern werden die Tokens hier umdefiniert.
 * Jeder Block, der sie nutzt, passt sich damit von selbst an — auch
 * jeder, den es noch nicht gibt.
 *
 * Das Primaerrot wird aufgehellt statt durch einen zweiten festen Rotton
 * ersetzt: So bleibt es die Farbe der jeweiligen Kundenpalette (CD-09).
 * Bezug auf die Preset-Variable und nicht auf --cd-color-primary, weil
 * eine Variable, die sich selbst verwendet, in CSS ungueltig ist.
 */
.cd-dunkel {
	--cd-color-text: #fff;
	--cd-color-text-muted: rgba(255, 255, 255, .72);
	--cd-color-primary: color-mix(in srgb, var(--wp--preset--color--primary, #c8102e) 60%, #fff);
}

.cd-dunkel .cd-eyebrow {
	color: rgba(255, 255, 255, .6);
}

.cd-dunkel h2 {
	max-width: 20ch;
}

.cd-dunkel__raster {
	margin-top: var(--cd-space-md);
	gap: var(--cd-space-lg);
}

.cd-dunkel__raster img {
	width: 100%;
	object-fit: cover;
}

.cd-dunkel .wp-block-buttons {
	margin-top: var(--cd-space-md);
}

/* ------------------------------------------------------------------ *
 * 10  Breitenvariante
 *
 * Nicht jeder Abschnitt braucht die volle Containerbreite. Eine schmalere
 * Spalte bringt Rhythmus in die Seite — breit, schmal, breit — und kuerzt
 * lange Linien in Listen, die dem Auge sonst nichts bieten.
 *
 * Als Block Style umgesetzt, nicht als Sonderfall im Kundentheme (CD-08).
 * ------------------------------------------------------------------ */

:root {
	--cd-container-schmal: 900px;
}

.is-style-cd-schmal,
.cd-page__content > .is-style-cd-schmal,
.cd-single__content > .is-style-cd-schmal {
	max-width: var(--cd-container-schmal);
	margin-inline: auto;
}

/*
 * Die Kinder einer schmalen Gruppe muessen mit: Das Constrained-Layout von
 * WordPress setzt ihnen sonst weiter die volle Containerbreite.
 */
.is-style-cd-schmal > * {
	max-width: 100% !important;
}

/* ------------------------------------------------------------------ *
 * 11  Brotkrumen
 *
 * Die Daten liefert clicdesign-core, die Darstellung steht hier. Zurueck-
 * haltend gesetzt: Der Pfad ist Orientierung, nicht Inhalt.
 * ------------------------------------------------------------------ */

.cd-brotkrumen {
	padding-block: var(--cd-space-sm) 0;
	font-size: var(--cd-small);
}

.cd-brotkrumen ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--cd-color-text-muted);
}

.cd-brotkrumen li + li::before {
	content: "\203A";
	margin-right: 8px;
	color: var(--cd-color-border);
}

.cd-brotkrumen a {
	text-decoration: none;
	color: inherit;
}

.cd-brotkrumen a:hover {
	color: var(--cd-color-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cd-brotkrumen [aria-current] {
	color: var(--cd-color-text);
}

/* Die Startseite und der Seitenkopf folgen direkt darunter. */
.cd-brotkrumen + .cd-page .cd-seitenkopf,
.cd-brotkrumen + article .cd-seitenkopf {
	padding-top: var(--cd-space-md);
}

/* ------------------------------------------------------------------ *
 * 12  Verhalten beim Scrollen
 * ------------------------------------------------------------------ */

/*
 * Der Kopf weicht beim Hinunterscrollen und kommt beim Hochscrollen
 * zurueck — auch mitten in der Seite. Wer nach oben scrollt, sucht
 * meistens die Navigation.
 */
.cd-header {
	transition: transform 240ms ease;
	will-change: transform;
}

.cd-header--weg {
	transform: translateY(-100%);
}

/*
 * Der Kopf bekommt den Fokus nur programmgesteuert nach dem Sprung nach
 * oben. Ein Rahmen um den ganzen Kopf waere hier kein Hinweis, sondern
 * ein Schreck.
 */
.cd-header:focus {
	outline: none;
}

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

/* Zurueck nach oben */
.cd-hoch {
	position: fixed;
	right: var(--cd-space-sm);
	bottom: var(--cd-space-sm);
	z-index: 65;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	background: var(--cd-color-bg);
	border: 1px solid var(--cd-color-border);
	color: var(--cd-color-text);
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}

.cd-hoch--sichtbar {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.cd-hoch:hover {
	background: var(--cd-color-text);
	border-color: var(--cd-color-text);
	color: var(--cd-color-bg);
}

.cd-hoch__pfeil {
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-left: 2px solid currentColor;
	transform: translateY(2px) rotate(45deg);
}

/* Ueber dem mobilen Schnellzugriff, nicht darunter. */
@media (max-width: 1023px) {
	.cd-hoch {
		bottom: calc(56px + var(--cd-space-xs));
	}
}

@media (prefers-reduced-motion: reduce) {
	.cd-hoch {
		transition: opacity 200ms ease, visibility 200ms;
		transform: none;
	}
}

/* ------------------------------------------------------------------ *
 * 13  Ausklappbare Bereiche
 *
 * Dieselbe Gestaltung fuer haeufige Fragen (.cd-faq) und fuer lange
 * Listen, die niemand am Stueck lesen will (.cd-ausklapp). Der Inhalt
 * steht in beiden Faellen vollstaendig im Quelltext — er ist nur
 * zugeklappt, nicht nachgeladen.
 * ------------------------------------------------------------------ */

/*
 * Aufgebaut auf core/details. Ohne JavaScript: Auf- und Zuklappen,
 * Tastaturbedienung und die Ansage fuer Screenreader kommen vom
 * Browser (CD-01, CD-18, CD-19).
 */
.cd-faq .wp-block-details ,
.cd-ausklapp .wp-block-details {
	border-top: 1px solid var(--cd-color-border);
	padding-block: var(--cd-space-xs);
}

.cd-faq .wp-block-details:last-of-type ,
.cd-ausklapp .wp-block-details:last-of-type {
	border-bottom: 1px solid var(--cd-color-border);
}

.cd-faq summary ,
.cd-ausklapp summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cd-space-sm);
	padding-block: var(--cd-space-xs);
	font-family: var(--cd-font-head, inherit);
	font-weight: 700;
	font-size: clamp(17px, 1.5vw, 19px);
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}

/* Das voreingestellte Dreieck weg — wir zeichnen einen eigenen Pfeil. */
.cd-faq summary::-webkit-details-marker ,
.cd-ausklapp summary::-webkit-details-marker {
	display: none;
}

.cd-faq summary::after ,
.cd-ausklapp summary::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-top: 4px;
	border-right: 2px solid var(--cd-color-text-muted);
	border-bottom: 2px solid var(--cd-color-text-muted);
	transform: rotate(45deg);
	transition: transform 150ms ease;
}

.cd-faq details[open] summary::after ,
.cd-ausklapp details[open] summary::after {
	transform: rotate(-135deg);
}

.cd-faq summary:hover ,
.cd-ausklapp summary:hover {
	color: var(--cd-color-primary);
}

.cd-faq summary:focus-visible ,
.cd-ausklapp summary:focus-visible {
	outline: 2px solid var(--cd-color-primary);
	outline-offset: 4px;
}

.cd-faq .wp-block-details > :not(summary) ,
.cd-ausklapp .wp-block-details > :not(summary) {
	margin-block: 0 var(--cd-space-xs);
	max-width: 60ch;
	color: var(--cd-color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
	.cd-faq summary::after {
		transition: none;
	}
}

/* ------------------------------------------------------------------ *
 * 14  Neueste Berichte
 *
 * Hier stand eine eigene Gestaltung fuer core/latest-posts. Sie hat nie
 * gegriffen: Die Selektoren erwarteten die Klasse cd-berichte an einem
 * Element ueber der Liste, WordPress setzt sie aber an die Liste selbst.
 * Auf garagesteiner.ch standen die Beitraege deshalb untereinander statt
 * dreispaltig.
 *
 * Statt den Selektor zu reparieren ist die Gestaltung ganz entfallen.
 * Beitraege in Rasterform kann der Block clicdesign/beitragsliste bereits
 * — mit Bild, Titel, Datum und Anriss, in einer Darstellung, die auf
 * jeder Seite dieselbe ist. Zwei Gestaltungen fuer dieselbe Sache waeren
 * zwei Stellen, die auseinanderlaufen (CD-04).
 * ------------------------------------------------------------------ */

/*
 * Randlose Abschnitte: Innenabstand am Container.
 *
 * Dieselbe Ursache wie beim Hero (Theme 0.1.5): WordPress zentriert den
 * Inhalt eines alignfull-Containers nicht, weil
 * useRootPaddingAwareAlignments im klassischen Theme bewusst aus ist. Beim
 * Hero half ein innerer Container. Hier geht das nicht — die Kinder eines
 * cd-dunkel stehen absichtlich linksbuendig (margin-left: 0 !important
 * weiter oben), also bleibt nur der Innenabstand am Container selbst.
 *
 * Der Wert bringt den Text in dieselbe senkrechte Flucht wie Hero und
 * Bandabschnitte: erst auf Containerbreite einruecken, dann derselbe
 * Innenabstand wie ueberall. Ist das Fenster schmaler als der Container,
 * bleibt nur der Innenabstand.
 *
 * Ohne diese Regel begann der Text eines dunklen Abschnitts bei x=0 —
 * auf garagesteiner.ch auf Startseite und Teamseite sichtbar.
 */
.cd-dunkel.alignfull,
.cd-band.alignfull {
	padding-inline: calc(max(0px, (100% - var(--cd-container)) / 2) + var(--cd-space-sm));
}

/* ------------------------------------------------------------------ *
 * 16  Auftauchen
 *
 * Abschnitte beginnen leicht unterhalb ihrer Position und blenden ein —
 * beim Laden der Seite genauso wie beim Weiterscrollen. Einmal je
 * Element, nicht bei jedem Vorbeiscrollen.
 *
 * Die Werte sind bewusst zurueckhaltend: 28 Pixel Weg, 700 Millisekunden,
 * ein Easing, das schnell startet und weich ausklingt. Eine groessere
 * Bewegung oder eine laengere Dauer wirkt sofort nach gekauftem Template
 * und stellt sich vor den Inhalt.
 *
 * Warum die Liste hier steht und nicht nur im Skript: Wuerde erst das
 * Skript die Elemente verstecken, waere der Inhalt einen Moment lang
 * sichtbar, verschwaende und kaeme wieder — ein Flackern bei jedem
 * Seitenaufruf. Deshalb versteckt das CSS, bevor das erste Mal gezeichnet
 * wird, und das Skript blendet nur noch ein.
 *
 * Die Liste ist damit an zwei Stellen: hier und in oberflaeche.js. Wer
 * eine aendert, aendert beide.
 *
 * Alles haengt an .cd-js, einer Klasse, die nur mit JavaScript gesetzt
 * wird. Ohne JavaScript bleibt jeder Abschnitt sichtbar — eine Seite, die
 * ohne Skript leer ist, waere ein weit groesserer Fehler als eine ohne
 * Effekt.
 *
 * Die Liste steht in :where(), damit sie keine Spezifitaet beisteuert.
 * Ohne das schlaegt eine Regel wie ".cd-js .cd-fakten > .cd-fakt" mit
 * ihren drei Klassen die Zeile, die wieder einblendet — die Klasse wird
 * gesetzt, und es passiert nichts. Genau so stand die Startseite am
 * 03.09.2026 leer da, obwohl das Skript sauber lief.
 * ------------------------------------------------------------------ */

.cd-js :where(
	.cd-seitenkopf,
	.cd-hero > .wp-block-cover__inner-container,
	.cd-abschnitt,
	.cd-dunkel,
	.cd-band,
	.cd-textbild,
	.cd-gruende,
	.cd-faq,
	.cd-ausklapp,
	.cd-kontakt,
	.cd-anfrage,
	.cd-autolina,
	.cd-single__image,
	.cd-single__content > figure,
	.cd-single__content > .wp-block-gallery,
	.cd-fakten > .cd-fakt,
	.cd-leistungen > .cd-leistung,
	.cd-liste__eintraege > .cd-liste__eintrag,
	.cd-crew > .wp-block-column
) {
	opacity: 0;
	transform: translateY( var( --cd-auftauchen-weg ) );
	transition:
		opacity var( --cd-auftauchen-dauer ) cubic-bezier(.22, 1, .36, 1),
		transform var( --cd-auftauchen-dauer ) cubic-bezier(.22, 1, .36, 1);
}

.cd-js .cd-auftauchen {
	opacity: 1;
	transform: none;
}

/*
 * Nebeneinanderliegende Teile kommen leicht versetzt. Der Versatz
 * wiederholt sich alle drei Elemente, damit in einem Dreierraster jede
 * Zeile gleich laeuft und die letzte nicht sekundenlang wartet.
 */
.cd-js .cd-fakten > .cd-fakt:nth-child(3n + 2),
.cd-js .cd-leistungen > .cd-leistung:nth-child(3n + 2),
.cd-js .cd-liste__eintraege > .cd-liste__eintrag:nth-child(3n + 2),
.cd-js .cd-crew > .wp-block-column:nth-child(3n + 2) {
	transition-delay: 80ms;
}

.cd-js .cd-fakten > .cd-fakt:nth-child(3n + 3),
.cd-js .cd-leistungen > .cd-leistung:nth-child(3n + 3),
.cd-js .cd-liste__eintraege > .cd-liste__eintrag:nth-child(3n + 3),
.cd-js .cd-crew > .wp-block-column:nth-child(3n + 3) {
	transition-delay: 160ms;
}

/*
 * Weg und Dauer als Werte, nicht als Zahlen im Regelwerk. Wer Bewegung
 * abbestellt hat, bekommt sie damit an einer einzigen Stelle abgestellt —
 * ohne die ganze Liste oben ein zweites Mal zu wiederholen und ohne
 * !important, das sonst auch jeden anderen Uebergang der Seite treffen
 * wuerde.
 *
 * Eine Millisekunde statt null: Der Uebergang muss stattfinden, damit das
 * Ereignis am Ende zuverlaessig kommt — sichtbar ist er dann nicht mehr.
 */
:root {
	--cd-auftauchen-weg: 28px;
	--cd-auftauchen-dauer: 700ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--cd-auftauchen-weg: 0px;
		--cd-auftauchen-dauer: 1ms;
	}

	.cd-js .cd-fakten > .cd-fakt,
	.cd-js .cd-leistungen > .cd-leistung,
	.cd-js .cd-liste__eintraege > .cd-liste__eintrag,
	.cd-js .cd-crew > .wp-block-column {
		transition-delay: 0s;
	}
}