/*
 * Jonas Surmann, eigene Regeln.
 * Farben und Schriften kommen aus theme.json. Hier stehen nur Dinge,
 * die sich dort nicht ausdruecken lassen.
 */

:root {
	--js-linie: rgba(241, 242, 242, 0.28);
	--js-linie-stark: rgba(241, 242, 242, 0.55);
}

/* Ruhige, praezise Grundhaltung: keine runden Ecken. */
.wp-block-button__link,
.wp-block-search__button,
.wp-block-image img,
.wp-element-button {
	border-radius: 0;
}

/* Auswahlfarbe passend zum Schema. */
::selection {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

/* Sichtbarer Fokus, auch fuer Tastaturbedienung. */
:where(a, button, input, select, textarea, .wp-element-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Artikelnummer: technische Marke, einzeilig, gut kopierbar. */
.is-style-artikelnummer {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--tertiary);
	border: 1px solid var(--js-linie-stark);
	padding: 0.35rem 0.8rem;
	user-select: all;
}

/* Technische Zeile: kleine Ueberschrift ueber einem Abschnitt. */
.is-style-technisch {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.is-style-technisch::before {
	content: "";
	display: inline-block;
	width: 1.6rem;
	height: 1px;
	margin-right: 0.7rem;
	vertical-align: middle;
	background: var(--wp--preset--color--primary);
}

/* Technik-Karte: Flaeche mit Haarlinie und Eckakzent. */
.is-style-technik-karte {
	position: relative;
	background: var(--wp--preset--color--tertiary);
	border: 1px solid var(--js-linie);
	padding: clamp(1.4rem, 4vw, 2.2rem);
}

.is-style-technik-karte::before,
.is-style-technik-karte::after {
	content: "";
	position: absolute;
	width: 0.85rem;
	height: 0.85rem;
	border-color: var(--wp--preset--color--primary);
	border-style: solid;
	pointer-events: none;
}

.is-style-technik-karte::before {
	top: -1px;
	left: -1px;
	border-width: 1px 0 0 1px;
}

.is-style-technik-karte::after {
	right: -1px;
	bottom: -1px;
	border-width: 0 1px 1px 0;
}

/* Barcode-Trenner: Streifen statt Linie, sparsam eingesetzt. */
.wp-block-separator.is-style-barcode {
	height: 1.5rem;
	border: 0;
	opacity: 1;
	background-image: repeating-linear-gradient(
		90deg,
		var(--wp--preset--color--primary) 0 1px,
		transparent 1px 3px,
		var(--wp--preset--color--primary) 3px 5px,
		transparent 5px 10px,
		var(--wp--preset--color--primary) 10px 11px,
		transparent 11px 16px
	);
	mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

/* Merkmalsliste: Aufzaehlung ohne Punkte, mit technischem Marker. */
.is-style-merkmale {
	list-style: none;
	padding-left: 0;
}

.is-style-merkmale li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.5rem;
}

.is-style-merkmale li::before {
	content: "";
	position: absolute;
	top: 0.7em;
	left: 0;
	width: 0.7rem;
	height: 1px;
	background: var(--wp--preset--color--primary);
}

/* Tabellen: Haarlinien statt Rahmen, Kopfzeile technisch. */
.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	border-bottom: 1px solid var(--js-linie);
	padding: 0.7rem 0.6rem;
}

.wp-block-table th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* Fussbereich: feine Trennlinie nach oben. */
.wp-site-blocks > footer {
	border-top: 1px solid var(--js-linie);
}

/* Bewegung nur, wenn der Besucher sie zulaesst. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ──────────────────────────────────────────────
 * Einblenden beim Scrollen
 * Greift nur, wenn reveal.js laeuft. Ohne JavaScript bleibt alles sichtbar.
 * ────────────────────────────────────────────── */

.js-reveal-aktiv .js-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) var(--js-versatz, 0ms),
		transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) var(--js-versatz, 0ms);
	will-change: opacity, transform;
}

.js-reveal-aktiv .js-reveal.ist-sichtbar {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal-aktiv .js-reveal,
	.js-reveal-aktiv .js-reveal.ist-sichtbar {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ──────────────────────────────────────────────
 * Kopfzeile
 * Logo, Name und sieben Menuepunkte werden zwischen 600 und 1300 Pixeln eng.
 * Unter 600 Pixeln klappt WordPress das Menue ohnehin selbst zusammen.
 * ────────────────────────────────────────────── */

@media (min-width: 601px) and (max-width: 1300px) {
	.wp-block-navigation {
		font-size: var(--wp--preset--font-size--small);
	}

	.wp-block-navigation .wp-block-navigation__container {
		gap: 1rem;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.wp-site-blocks > header .wp-block-site-title {
		font-size: var(--wp--preset--font-size--small);
	}
}

/* Die beiden hellen Rollen sind Flaechen, keine Schriftfarben. Wer sie als
   Hintergrund setzt, bekommt automatisch dunkle Schrift darauf. */
.has-secondary-background-color,
.has-primary-background-color {
	color: var(--wp--preset--color--background);
}

.has-secondary-background-color a,
.has-primary-background-color a {
	color: var(--wp--preset--color--background);
}

/* ──────────────────────────────────────────────
 * Cookie-Richtlinie
 * Complianz bringt eigene Stile mit, die von einem hellen Hintergrund
 * ausgehen. Auf dunklem Grund stand dadurch hellgraue Schrift auf weissen
 * Tabellen. Hier wird die Ausgabe an das Schema angepasst.
 * Der zusaetzliche body-Selektor sorgt fuer Vorrang vor document.min.css.
 * ────────────────────────────────────────────── */

body #cmplz-document,
body #cmplz-cookies-overview {
	color: var(--wp--preset--color--foreground);
}

/* Aufklappbare Dienste */
body #cmplz-document .cmplz-dropdown summary,
body #cmplz-cookies-overview .cmplz-dropdown summary {
	background-color: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--foreground);
	border: 1px solid rgba(241, 242, 242, 0.22);
}

body #cmplz-document .cmplz-dropdown[open] summary,
body #cmplz-cookies-overview .cmplz-dropdown[open] summary {
	background-color: var(--wp--preset--color--tertiary);
}

body #cmplz-document .cmplz-dropdown,
body #cmplz-cookies-overview .cmplz-dropdown {
	background-color: transparent;
}

body #cmplz-document .cmplz-service-description,
body #cmplz-document .cmplz-sharing-data,
body #cmplz-cookies-overview .cmplz-service-description,
body #cmplz-cookies-overview .cmplz-sharing-data {
	color: var(--wp--preset--color--foreground);
}

/* Cookie-Tabellen: Raster aus Haarlinien statt weisser Flaechen */
body #cmplz-document .cmplz-dropdown .cookies-per-purpose,
body #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose {
	background-color: rgba(241, 242, 242, 0.22);
	border: 1px solid rgba(241, 242, 242, 0.22);
}

body #cmplz-document .cmplz-dropdown .cookies-per-purpose div,
body #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}

body #cmplz-document .cmplz-dropdown .cookies-per-purpose .name-header,
body #cmplz-document .cmplz-dropdown .cookies-per-purpose .retention-header,
body #cmplz-document .cmplz-dropdown .cookies-per-purpose .function-header,
body #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .name-header,
body #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .retention-header,
body #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .function-header {
	background-color: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Cookienamen technisch setzen, sie sind Bezeichner */
body #cmplz-document .cmplz-dropdown .cookies-per-purpose .name a,
body #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .name a {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--foreground);
}

/* Das Pfeilsymbol des Aufklappers ist ein dunkles SVG, auf dunklem Grund
   unsichtbar. Invertieren. */
body #cmplz-document .cmplz-dropdown summary::after,
body #cmplz-cookies-overview .cmplz-dropdown summary::after {
	filter: invert(1);
}

/* ──────────────────────────────────────────────
 * Cookie-Banner und Zustimmungseinstellungen
 * Complianz erzeugt diese Bereiche per JavaScript. Die Farben kommen aus
 * den Bannereinstellungen, zwei Werte stehen jedoch fest im Plugin-CSS:
 * die Flaeche der Kategoriezeilen und das Gruen fuer "Immer aktiv".
 * ────────────────────────────────────────────── */

html:root {
	/* Reines Gruen kommt auf dunklem Grund nur auf 3,2 zu 1. */
	--cmplz_category_header_always_active_color: #8FC28F;
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category,
body #cmplz-manage-consent-container .cmplz-categories .cmplz-category,
body .cmplz-manage-consent-container .cmplz-categories .cmplz-category {
	background-color: var(--wp--preset--color--tertiary);
	border: 1px solid rgba(241, 242, 242, 0.22);
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-title,
body #cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-title,
body .cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-title,
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description,
body #cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-description,
body .cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-description {
	color: var(--wp--preset--color--foreground);
}

/* Das Pfeilsymbol ist ein dunkles SVG. */
body #cmplz-manage-consent-container .cmplz-icon.cmplz-open,
body .cmplz-manage-consent-container .cmplz-icon.cmplz-open,
body .cmplz-cookiebanner .cmplz-icon.cmplz-open {
	filter: invert(1);
}

/* Platzhalter fuer blockierte Fremdinhalte.
   Erscheint erst, wenn eingebettete Inhalte dazukommen, etwa ein Video.
   Complianz setzt dort eine weisse Flaeche mit abgerundeten Ecken. */
body .cmplz-blocked-content-container,
body .cmplz-wp-video {
	background: var(--wp--preset--color--tertiary);
	border: 1px solid rgba(241, 242, 242, 0.22);
	border-radius: 0;
	box-shadow: none;
	color: var(--wp--preset--color--foreground);
}

body .cmplz-blocked-content-container .cmplz-blocked-content-notice,
body .cmplz-wp-video .cmplz-blocked-content-notice {
	background-color: var(--wp--preset--color--background);
	border: 1px solid rgba(241, 242, 242, 0.22);
	border-radius: 0;
	color: var(--wp--preset--color--foreground);
}

/* ──────────────────────────────────────────────
 * Karten aus den Extendify-Vorlagen
 * Die Vorlage `item-card-1--align-center` setzt die Flaeche ausdruecklich auf
 * `transparent !important`. Die Karten auf der Startseite hatten dadurch
 * keinen Rand und keine eigene Flaeche, sie zerflossen im Abschnitt.
 * Sie bekommen hier dieselbe Sprache wie die Karten auf Ueber mich.
 * ────────────────────────────────────────────── */

.is-style-ext-preset--group--natural-1--item-card-1--align-center {
	background-color: var(--wp--preset--color--tertiary) !important;
	border: 1px solid rgba(241, 242, 242, 0.22);
	padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1.4rem, 3vw, 2rem);
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.is-style-ext-preset--group--natural-1--item-card-1--align-center:hover {
	border-color: rgba(241, 242, 242, 0.45);
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.is-style-ext-preset--group--natural-1--item-card-1--align-center:hover {
		transform: none;
	}
}

/* ──────────────────────────────────────────────
 * Herstellerreihe auf der Startseite
 * Die 19 Logos sind schwarze Kacheln mit weisser Marke, alle 300 mal 95.
 * Ohne Rahmen verschwinden sie im dunklen Abschnitt. Sie bekommen deshalb
 * je ein Kaestchen mit Haarlinie, gleiche Breite, und die Reihe laeuft
 * zentriert um. Die Galerie stand auf `nowrap`, bei 19 Bildern zu eng.
 * ────────────────────────────────────────────── */

.wp-block-gallery.partner-logos {
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.7rem;
	width: 100%;
}

/* Der Selektor muss `has-nested-images` und `figure` mitnehmen, sonst gewinnt
   die Galerie-Regel des Kerns mit ihrem `flex-grow: 1`. Genau die hat die
   Kaestchen in der letzten Zeile breitgezogen. */
.wp-block-gallery.partner-logos.has-nested-images figure.wp-block-image {
	flex: 0 0 auto;
	width: clamp(120px, 13vw, 168px);
	max-width: none;
	aspect-ratio: 300 / 95;
	margin: 0;
	border: 1px solid rgba(241, 242, 242, 0.22);
	background-color: var(--wp--preset--color--background);
	/* Opacity und Transform muessen mit aufgezaehlt werden, sonst ersetzt
	   diese Regel die Uebergaenge des Einblendens. Die Logos sind
	   Reveal-Ziele, sie wuerden sonst hart erscheinen statt hereinzufliegen. */
	transition:
		border-color 0.3s ease,
		opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) var(--js-versatz, 0ms),
		transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) var(--js-versatz, 0ms);
	display: flex;
	align-items: center;
	justify-content: center;
}

.wp-block-gallery.partner-logos.has-nested-images figure.wp-block-image:hover {
	border-color: rgba(241, 242, 242, 0.45);
}

.wp-block-gallery.partner-logos.has-nested-images figure.wp-block-image img {
	flex: 0 0 auto;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Die beiden Karten gleich hoch und innen gleich ausgerichtet.
   Die Spalten stehen auf `stretch`, das streckt aber nur die Spalte, nicht
   die Karte darin. Und die Symbole waren unterschiedlich gross gesetzt,
   93 gegen 66 Pixel, obwohl beide Dateien 240 mal 240 sind. */

.wp-block-column > .is-style-ext-preset--group--natural-1--item-card-1--align-center {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.is-style-ext-preset--group--natural-1--item-card-1--align-center > * {
	width: 100%;
	flex: 1 1 auto;
}

.is-style-ext-preset--group--natural-1--item-card-1--align-center .wp-block-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
}

/* Symbol auf eine feste Hoehe, damit Titel und Text auf gleicher Linie
   beginnen. Die Breite ergibt sich aus dem Bild. */
.is-style-ext-preset--group--natural-1--item-card-1--align-center figure.wp-block-image {
	margin: 0;
	flex: 0 0 auto;
}

.is-style-ext-preset--group--natural-1--item-card-1--align-center figure.wp-block-image img {
	width: auto;
	height: 76px;
	object-fit: contain;
}

/* Schaltflaeche nach unten, damit sie in beiden Karten auf einer Linie sitzt. */
.is-style-ext-preset--group--natural-1--item-card-1--align-center .wp-block-buttons {
	margin-top: auto;
	flex: 0 0 auto;
	justify-content: center;
}

/* Porträt auf der Startseite.
   Bewusste Ausnahme von der Regel der rechten Winkel: Ein Bild von einem
   Menschen ist keine Bedienfläche. Der Ausschnitt sitzt etwas oberhalb der
   Mitte, sonst schneidet der Kreis die Stirn an. */
.wp-block-image.js-portraet {
	display: flex;
	justify-content: center;
}

.wp-block-image.js-portraet img {
	/* Fest quadratisch. Ohne diese Sperre kann eine Regel des Kerns oder ein
	   Flex-Elternteil die Breite kuerzen, dann wird aus dem Kreis ein Oval. */
	width: 240px !important;
	height: 240px !important;
	min-width: 240px;
	max-width: 240px;
	aspect-ratio: 1 / 1;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 15%;
}

@media (max-width: 480px) {
	.wp-block-image.js-portraet img {
		width: 180px !important;
		height: 180px !important;
		min-width: 180px;
		max-width: 180px;
	}
}

/* ──────────────────────────────────────────────
 * Konfiguratoren
 * Raster der Hersteller und der Geraetefamilien.
 * ────────────────────────────────────────────── */

/* WordPress haengt jedem Kind einer Gruppe ausser dem ersten einen oberen
   Aussenabstand an, den Blockabstand. In einem Raster schiebt das alle
   Kacheln ausser der ersten nach unten, die erste wirkt dadurch groesser.
   Deshalb hier abschalten, das Raster regelt die Abstaende selbst. */
:root .js-hersteller-raster > *,
:root .js-kategorie-raster > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	margin-top: 0 !important;
}

.js-hersteller-raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 0.8rem;
	margin-top: 2rem;
	align-items: stretch;
}

.js-hersteller-kachel {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	padding: 1.1rem 1rem 1.3rem;
	background-color: var(--wp--preset--color--tertiary);
	border: 1px solid rgba(241, 242, 242, 0.22);
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.js-hersteller-kachel:hover {
	border-color: rgba(241, 242, 242, 0.45);
	background-color: var(--wp--preset--color--background);
}

.js-hersteller-kachel .wp-block-image {
	margin: 0;
	width: 100%;
}

.js-hersteller-kachel .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.js-hersteller-name {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.js-hersteller-name a {
	text-decoration: none;
}

.js-hersteller-name a:hover {
	text-decoration: underline;
}

/* Geraetefamilien eines Herstellers */
.js-kategorie-raster {
	align-items: stretch;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 0.9rem;
	margin-top: 2rem;
	margin-bottom: 2.5rem;
}

.js-kategorie-raster .is-style-technik-karte {
	margin: 0;
}

.js-kategorie-raster h3 {
	font-size: 1.15rem;
	margin-bottom: 0.5rem;
}

.js-kategorie-raster p {
	font-size: var(--wp--preset--font-size--small);
	color: #A3AAB2;
}

.js-in-arbeit {
	margin-top: 0.8rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #A3AAB2;
	opacity: 0.75;
}



/* ──────────────────────────────────────────────
 * Untermenü der Kopfzeile
 * WordPress liefert Aufklappmenüs mit hellem Grund aus. Auf dunklem Grund
 * muss das nachgezogen werden. Bei 19 Herstellern laeuft die Liste in zwei
 * Spalten, sonst reicht sie ueber den halben Bildschirm.
 * ────────────────────────────────────────────── */

.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--tertiary);
	border: 1px solid rgba(241, 242, 242, 0.22);
	border-radius: 0;
	padding: 0.5rem;
	min-width: 420px;
	columns: 2;
	column-gap: 0.5rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container li {
	break-inside: avoid;
}

.wp-block-navigation .wp-block-navigation__submenu-container a {
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
	padding: 0.45rem 0.7rem;
	text-decoration: none;
	display: block;
}

.wp-block-navigation .wp-block-navigation__submenu-container a:hover,
.wp-block-navigation .wp-block-navigation__submenu-container a:focus-visible {
	background-color: var(--wp--preset--color--background);
	text-decoration: underline;
}

/* Auf schmalen Bildschirmen klappt WordPress das Menue ohnehin selbst ein. */
@media (max-width: 600px) {
	.wp-block-navigation .wp-block-navigation__submenu-container {
		min-width: 0;
		columns: 1;
		border: 0;
		padding-left: 0.8rem;
	}
}

/* Vertriebsstatus auf den Übersichtsseiten.
 * Rot für Auslauf, blau für Vorserie, dieselben Töne wie im Konfigurator. */
.js-status {
	margin-top: 0.8rem;
	display: inline-block;
	padding: 0.2rem 0.6rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid currentColor;
}

.js-status-end-of-sale {
	color: #D98A8A;
}

.js-status-pre-production {
	color: #7FA3C6;
}