/*
 * Bewegung und Oberflaechendetails der CI "Technikzentrale".
 *
 * Grundsatz: Jede Bewegung erzaehlt etwas, Leitungen zeichnen sich, Medien
 * fliessen, Zahlen zaehlen hoch. Keine Animation laeuft laenger als 2,5s, und
 * dauerhaft bewegt sich nur der Kupferpuls im Anlagenschema.
 *
 * Farben kommen ausschliesslich aus den theme.json-Presets. Hier stehen nur
 * Bewegung, Zustand und Struktur.
 */

/* ---------- Bewegungsmuster ---------- */

@keyframes kuz-zeichnen { to   { stroke-dashoffset: 0; } }
@keyframes kuz-auf      { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes kuz-ein      { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes kuz-breite   { from { width: 0; }                                to { width: 48px; } }
@keyframes kuz-glanz    { 0%   { transform: translateX(-120%); }            100% { transform: translateX(220%); } }

/* ---------- Kopfleiste ---------- */

.kuz-kopfleiste {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--flaeche);
	transition: padding .25s ease, box-shadow .25s ease;
}

.kuz-kopfleiste.ist-geschrumpft {
	padding-top: .5rem;
	padding-bottom: .5rem;
	box-shadow: 0 1px 0 var(--wp--preset--color--akzent);
}

.kuz-kopfleiste .wp-block-site-logo img {
	transition: width .25s ease;
}

.kuz-kopfleiste.ist-geschrumpft .wp-block-site-logo img {
	width: 104px;
}

.kuz-kopfleiste__rechts {
	gap: var(--wp--preset--spacing--20);
}

/* Der Karriere-Knopf ist der einzige farbige Punkt in der Navigation. */
.kuz-knopf-signal .wp-block-button__link {
	position: relative;
	overflow: hidden;
}

.kuz-knopf-signal .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg, transparent, rgba( 255, 255, 255, .35 ), transparent );
	animation: kuz-glanz 3.6s ease-in-out infinite;
}

/* ---------- Lesbreite ---------- */

/*
 * Die Lesespalte in theme.json ist bewusst breit, damit Raster, Listen und
 * Karten die Flaeche nutzen. Reiner Fliesstext braucht trotzdem eine Grenze:
 * ueber rund 75 Zeichen findet das Auge den Zeilenanfang nicht mehr zuverlaessig.
 *
 * Begrenzt wird deshalb nur der Absatz selbst, nicht sein Container. Absaetze
 * innerhalb von Karten, Spalten und Formularen sind davon ausgenommen, weil
 * dort die Karte die Breite bestimmt.
 */
main > .wp-block-group > p,
main > .wp-block-group > .wp-block-group > p,
main section > p,
main section > .wp-block-group > p {
	max-width: 68ch;
}

/* Einleitungen in grosser Schrift laufen etwas schmaler, sonst wirken sie fett. */
main .has-gross-font-size {
	max-width: 58ch;
}

/* ---------- Mobiles Menue ---------- */

/*
 * Das Overlay des Navigationsblocks bringt eigene Farben mit, die auf hellen
 * Themes gedacht sind, auf dunklem Grund entstuende ein weisser Kasten. Hier
 * wird es auf die CI gezogen: dunkler Grund, Zinkweiss, Kupfer fuer das Kreuz.
 */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--flaeche) !important;
	color: var(--wp--preset--color--text) !important;
	padding-top: var(--wp--preset--spacing--30);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--text) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--akzent) !important;
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--akzent);
}

/* Das geoeffnete Menue traegt die Punkte gross und untereinander. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--titel);
	font-weight: 800;
	letter-spacing: -.025em;
}

/*
 * Auf schmalen Geraeten stehen Logo und Karriere-Knopf in einer Zeile, der
 * Menueknopf rechts daneben. Ohne diese Regel rutscht der Knopf unter das Logo
 * und die Kopfzeile wird doppelt so hoch.
 */
@media ( max-width: 600px ) {
	.kuz-kopfleiste__rechts {
		gap: .75rem;
	}

	.kuz-kopfleiste__karriere .wp-block-button__link {
		padding: .7rem 1.1rem;
		font-size: var(--wp--preset--font-size--klein);
	}

	.kuz-kopfleiste .wp-block-site-logo img {
		width: 118px;
	}
}

/* ---------- Scroll-Enthuellung ---------- */

[data-kuz-auf] {
	opacity: 0;
}

[data-kuz-auf].ist-sichtbar {
	animation: kuz-auf .8s cubic-bezier( .2, .7, .3, 1 ) forwards;
}

[data-kuz-auf].ist-sichtbar[data-kuz-verzug="1"] { animation-delay: .12s; }
[data-kuz-auf].ist-sichtbar[data-kuz-verzug="2"] { animation-delay: .24s; }
[data-kuz-auf].ist-sichtbar[data-kuz-verzug="3"] { animation-delay: .36s; }
[data-kuz-auf].ist-sichtbar[data-kuz-verzug="4"] { animation-delay: .48s; }

/* ---------- Anlagenschema ---------- */

.kuz-schema__leitung {
	stroke-dasharray: 1400;
	stroke-dashoffset: 1400;
}

.ist-sichtbar .kuz-schema__leitung,
.kuz-schema.ist-sichtbar .kuz-schema__leitung {
	animation: kuz-zeichnen 2.4s cubic-bezier( .4, 0, .2, 1 ) forwards;
}

.kuz-schema__knoten {
	opacity: 0;
}

.kuz-schema.ist-sichtbar .kuz-schema__knoten {
	animation: kuz-ein .5s ease forwards;
	animation-delay: 1.7s;
}

/* ---------- Kopfbereich der Startseite ---------- */

.kuz-kopf {
	position: relative;
	overflow: hidden;
}

/*
 * Das Anlagenschema liegt hinter dem Text und reicht bewusst ueber die rechte
 * Kante hinaus, es ist ein Ausschnitt, keine gerahmte Illustration.
 */
.kuz-kopf__buehne {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.kuz-kopf__buehne .kuz-schema {
	position: absolute;
	right: -4%;
	top: 50%;
	transform: translateY( -50% );
	width: min( 56%, 46rem );
	height: auto;
	opacity: .55;
}

.kuz-kopf__text {
	position: relative;
}

.kuz-kopf__titel {
	text-wrap: balance;
}

.kuz-kopf__knoepfe {
	gap: .875rem;
}

.kuz-kennzahlen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--linie);
}

.kuz-kennzahlen p {
	margin: 0;
}

/* Unter 900 px wandert das Schema hinter den Text und tritt weiter zurueck. */
@media ( max-width: 900px ) {
	.kuz-kopf__buehne .kuz-schema {
		width: 108%;
		right: -24%;
		opacity: .2;
	}
}

/* ---------- Kennzahlen ---------- */

.kuz-kennzahl {
	font-size: clamp( 2rem, 4vw, 2.75rem );
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1;
	color: var(--wp--preset--color--akzent);
	font-variant-numeric: tabular-nums;
}

.kuz-kennzahl__beschriftung {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau);
	margin-top: .4rem;
}

/* ---------- Listen in den Startseitensaeulen ---------- */

.kuz-liste {
	list-style: none;
	margin: var(--wp--preset--spacing--20) 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.kuz-liste__eintrag {
	border: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--flaeche-gedeckt);
}

.kuz-liste__link {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .75rem;
	text-decoration: none;
	color: var(--wp--preset--color--text);
}

.kuz-liste__link--text {
	padding: 1rem 1.125rem;
}

.kuz-liste__bild {
	flex: 0 0 5.5rem;
	width: 5.5rem;
	height: 4rem;
	object-fit: cover;
	display: block;
	background: var(--wp--preset--color--linie);
}

.kuz-liste__text {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	min-width: 0;
}

.kuz-liste__titel {
	font-weight: 600;
	line-height: 1.25;
}

.kuz-liste__zusatz {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: .08em;
	color: var(--wp--preset--color--akzent);
}

/* ---------- Filterleiste der Referenzen ---------- */

/*
 * Browser rendern ein unformatiertes select als hellen Kasten. Auf dunklem
 * Grund wirkt das wie ein Loch in der Seite, deshalb wird hier die native
 * Darstellung vollstaendig ersetzt: eigene Flaeche, eigener Pfeil, Kupfer im
 * Fokus. Der Pfeil steckt als data-URI im Hintergrund, damit kein zusaetzliches
 * Element noetig ist, das die Tastaturbedienung stoeren wuerde.
 */

.kuz-filter {
	background: var(--wp--preset--color--flaeche-gedeckt);
	border: 1px solid var(--wp--preset--color--linie);
	border-left: 3px solid var(--wp--preset--color--akzent);
	padding: 1.25rem 1.5rem;
	margin-block: var(--wp--preset--spacing--20);
}

.kuz-filter__legende {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--akzent);
}

.kuz-filter__felder {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 1rem;
}

.kuz-filter__feld {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	flex: 1 1 13rem;
	min-width: 0;
}

.kuz-filter label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau);
}

.kuz-filter select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	background-color: var(--wp--preset--color--flaeche);
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23D4813F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right .9rem center;
	border: 1px solid var(--wp--preset--color--linie-hell);
	border-radius: 2px;
	color: var(--wp--preset--color--text);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--klein);
	padding: .75rem 2.4rem .75rem .9rem;
	cursor: pointer;
	transition: border-color .2s ease;
}

.kuz-filter select:hover {
	border-color: var(--wp--preset--color--akzent);
}

.kuz-filter select:focus-visible {
	border-color: var(--wp--preset--color--akzent);
	outline: 2px solid var(--wp--preset--color--akzent);
	outline-offset: 2px;
}

/* Die Klappliste selbst zeichnet das Betriebssystem, Farben setzen wir mit. */
.kuz-filter select option {
	background: var(--wp--preset--color--flaeche);
	color: var(--wp--preset--color--text);
}

.kuz-filter button {
	flex: 0 0 auto;
	background: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--flaeche);
	border: 0;
	border-radius: 2px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	padding: .8rem 1.6rem;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.kuz-filter button:hover {
	background: var(--wp--preset--color--akzent-hell);
	transform: translateY( -1px );
}

@media ( max-width: 560px ) {
	.kuz-filter__feld {
		flex-basis: 100%;
	}

	.kuz-filter button {
		width: 100%;
	}
}

/* ---------- Projektraster ---------- */

.kuz-projektraster .wp-block-post-title {
	margin-block: .6rem .2rem;
	line-height: 1.2;
}

.kuz-projektraster .wp-block-post-terms {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* ---------- Leistungsseite ---------- */

.kuz-leistung__kennung {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .875rem;
	margin: var(--wp--preset--spacing--20) 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: .08em;
}

/* Die Kostengruppe ist das Zuordnungsmerkmal in jeder Ausschreibung. */
.kuz-leistung__kg {
	border: 1px solid var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent);
	padding: .3em .7em;
	font-weight: 500;
}

.kuz-leistung__untertitel {
	color: var(--wp--preset--color--grau);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: var(--wp--preset--font-size--mini);
}

.kuz-leistung__umfang {
	margin-top: var(--wp--preset--spacing--30);
}

.kuz-leistung__umfang-titel {
	font-size: var(--wp--preset--font-size--titel);
	font-weight: 800;
	letter-spacing: -.025em;
	margin: 0 0 var(--wp--preset--spacing--20);
	padding-top: .75rem;
	border-top: 3px solid var(--wp--preset--color--akzent);
}

.kuz-umfang-raster {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 17rem, 1fr ) );
	gap: 1rem;
}

.kuz-umfang {
	border: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--flaeche-gedeckt);
	padding: 1.5rem;
}

.kuz-umfang__titel {
	margin: 0 0 .75rem;
	font-size: var(--wp--preset--font-size--basis);
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--text);
}

.kuz-umfang__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.5;
	color: var(--wp--preset--color--text-gedeckt);
}

.kuz-umfang__liste li {
	padding-left: 1rem;
	position: relative;
}

.kuz-umfang__liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .6em;
	width: .5rem;
	height: 1px;
	background: var(--wp--preset--color--akzent);
}

/* Der Karriere-Abschluss jeder Leistungsseite hebt sich flaechig ab. */
.kuz-leistung__karriere {
	background: var(--wp--preset--color--flaeche-gedeckt);
}

.kuz-projektraster .wp-block-post-featured-image img {
	display: block;
	width: 100%;
}

/* ---------- Zeitstrahl ---------- */

.kuz-zeitstrahl {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0;
	padding: 0;
	position: relative;
	counter-reset: none;
}

/*
 * Die durchgehende Linie liegt hinter den Stationen. Sie ist die Konstante der
 * Firmengeschichte, der Rest haengt daran.
 */
.kuz-zeitstrahl::before {
	content: "";
	position: absolute;
	left: 7.25rem;
	top: .5rem;
	bottom: .5rem;
	width: 2px;
	background: linear-gradient(
		to bottom,
		var(--wp--preset--color--akzent) 0%,
		var(--wp--preset--color--akzent) 70%,
		var(--wp--preset--color--linie) 100%
	);
}

.kuz-zeitstrahl__station {
	position: relative;
	display: grid;
	grid-template-columns: 6rem 2.5rem 1fr;
	align-items: start;
	gap: 0;
	padding-bottom: var(--wp--preset--spacing--30);
}

.kuz-zeitstrahl__station:last-child {
	padding-bottom: 0;
}

.kuz-zeitstrahl__jahr {
	grid-column: 1;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--wp--preset--color--akzent);
	text-align: right;
	padding-top: .25rem;
	font-variant-numeric: tabular-nums;
}

/* Der Knoten sitzt genau auf der Linie. */
.kuz-zeitstrahl__knoten {
	grid-column: 2;
	justify-self: center;
	width: .875rem;
	height: .875rem;
	margin-top: .35rem;
	border-radius: 50%;
	background: var(--wp--preset--color--flaeche);
	border: 2px solid var(--wp--preset--color--akzent);
	box-shadow: 0 0 0 5px var(--wp--preset--color--flaeche);
	position: relative;
	z-index: 1;
}

.kuz-zeitstrahl__station:hover .kuz-zeitstrahl__knoten,
.kuz-zeitstrahl__station:focus-within .kuz-zeitstrahl__knoten {
	background: var(--wp--preset--color--akzent);
}

.kuz-zeitstrahl__inhalt {
	grid-column: 3;
	padding-left: .5rem;
}

.kuz-zeitstrahl__titel {
	margin: 0;
	font-size: var(--wp--preset--font-size--gross);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
}

.kuz-zeitstrahl__text {
	margin: .4rem 0 0;
	color: var(--wp--preset--color--text-gedeckt);
	max-width: 46rem;
}

/* Schmale Geraete: Jahr ueber den Titel, Linie an den linken Rand. */
@media ( max-width: 700px ) {
	.kuz-zeitstrahl::before {
		left: .4rem;
	}

	.kuz-zeitstrahl__station {
		grid-template-columns: 1.5rem 1fr;
	}

	.kuz-zeitstrahl__knoten {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	.kuz-zeitstrahl__jahr {
		grid-column: 2;
		grid-row: 1;
		text-align: left;
		padding-top: .2rem;
	}

	.kuz-zeitstrahl__inhalt {
		grid-column: 2;
		grid-row: 2;
		padding-left: 0;
		margin-top: .3rem;
	}
}

/* ---------- Chronik ---------- */

.kuz-chronik__marken {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
}

.kuz-chronik__marke {
	background: transparent;
	border: 1px solid var(--wp--preset--color--linie-hell);
	border-radius: 999px;
	color: var(--wp--preset--color--text-gedeckt);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: .06em;
	padding: .55rem 1.1rem;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.kuz-chronik__marke:hover {
	border-color: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--text);
}

.kuz-chronik__marke.ist-aktiv {
	background: var(--wp--preset--color--akzent);
	border-color: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--flaeche);
	font-weight: 500;
}

/* Beim Eingrenzen verschwinden Stationen, die Linie bleibt durchgehend. */
.kuz-zeitstrahl__station[hidden] {
	display: none;
}

.kuz-zeitstrahl__verweis {
	margin: .6rem 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: .08em;
}

.kuz-chronik__leer {
	color: var(--wp--preset--color--grau);
	font-style: italic;
}

/* ---------- Nachweise ---------- */

.kuz-nachweise {
	list-style: none;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 16rem, 1fr ) );
	gap: 1rem;
}

.kuz-nachweis {
	display: flex;
	align-items: flex-start;
	gap: .875rem;
	border: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--flaeche-gedeckt);
	padding: 1.25rem;
}

.kuz-nachweis__zeichen {
	flex: 0 0 1.5rem;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--wp--preset--color--akzent);
	margin-top: .1rem;
}

.kuz-nachweis__titel {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}

.kuz-nachweis__zusatz {
	display: block;
	margin-top: .2rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: .08em;
	color: var(--wp--preset--color--grau);
}

/* ---------- Karriere ---------- */

.kuz-karriere__wege {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: var(--wp--preset--spacing--30);
}

.kuz-knopf-gross {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	border: 1px solid var(--wp--preset--color--linie-hell);
	border-radius: 2px;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	font-weight: 600;
	padding: 1.1rem 1.75rem;
	transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.kuz-knopf-gross:hover {
	border-color: var(--wp--preset--color--akzent);
	transform: translateY( -2px );
	color: var(--wp--preset--color--text);
}

.kuz-knopf-gross svg {
	width: 1rem;
	height: 1rem;
}

/* Der Weg zur Bewerbung ist auf jeder Flaeche der einzige farbige Knopf. */
.kuz-knopf-gross--signal {
	background: var(--wp--preset--color--akzent);
	border-color: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--flaeche);
}

.kuz-knopf-gross--signal:hover {
	background: var(--wp--preset--color--akzent-hell);
	border-color: var(--wp--preset--color--akzent-hell);
	color: var(--wp--preset--color--flaeche);
}

/* ---------- Objektband ---------- */

.kuz-objektband {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 14rem, 1fr ) );
	gap: 1rem;
	margin-top: var(--wp--preset--spacing--30);
	/* Ohne start strecken sich die Kacheln auf die hoechste der Reihe. */
	align-items: start;
}

.kuz-objekt {
	position: relative;
	display: block;
	border: 1px solid var(--wp--preset--color--linie);
	text-decoration: none;
	overflow: hidden;
}

.kuz-objekt__bild {
	display: block;
	width: 100%;
	/* Feste Hoehe statt nur aspect-ratio: die Quellbilder haben sehr
	   unterschiedliche Formate und wuerden sonst die Reihe auseinanderziehen. */
	height: clamp( 9rem, 14vw, 13rem );
	aspect-ratio: auto;
	object-fit: cover;
	filter: grayscale( 1 ) contrast( 1.1 );
	transition: filter .3s ease, transform .4s ease;
}

.kuz-objekt:hover .kuz-objekt__bild {
	filter: grayscale( 0 ) contrast( 1 );
	transform: scale( 1.04 );
}

.kuz-objekt__name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2.5rem .9rem .8rem;
	background: linear-gradient( to top, rgba( 12, 18, 22, .95 ), transparent );
	color: var(--wp--preset--color--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.25;
}

/* ---------- Benefits ---------- */

.kuz-benefits {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 16rem, 1fr ) );
	gap: 1rem;
	margin-top: var(--wp--preset--spacing--30);
}

.kuz-benefit {
	border: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--flaeche-gedeckt);
	padding: 1.5rem;
}

.kuz-benefit__symbol {
	width: 2rem;
	height: 2rem;
	color: var(--wp--preset--color--akzent);
	margin-bottom: .9rem;
}

.kuz-benefit__titel {
	margin: 0 0 .4rem;
	font-size: var(--wp--preset--font-size--basis);
	font-weight: 800;
	letter-spacing: -.015em;
	line-height: 1.25;
}

.kuz-benefit__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.55;
	color: var(--wp--preset--color--text-gedeckt);
}

/* ---------- Stimmen ---------- */

.kuz-stimmen {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 19rem, 1fr ) );
	gap: 1rem;
	margin-top: var(--wp--preset--spacing--30);
}

.kuz-stimme {
	margin: 0;
	border: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--flaeche-gedeckt);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.kuz-stimme__zitat {
	margin: 0;
	font-size: var(--wp--preset--font-size--gross);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.015em;
	position: relative;
	padding-top: 1.75rem;
}

/* Das Anfuehrungszeichen als Zeichnung, nicht als Schriftzeichen. */
.kuz-stimme__zitat::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2rem;
	height: 2px;
	background: var(--wp--preset--color--akzent);
}

.kuz-stimme__person {
	display: flex;
	align-items: center;
	gap: .875rem;
	margin-top: auto;
}

.kuz-stimme__bild {
	flex: 0 0 2.75rem;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	overflow: hidden;
	background: var(--wp--preset--color--flaeche);
	border: 1px solid var(--wp--preset--color--linie-hell);
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--akzent);
}

.kuz-stimme__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kuz-stimme__bild svg {
	width: 1.5rem;
	height: 1.5rem;
}

.kuz-stimme__name {
	display: block;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--klein);
}

.kuz-stimme__rolle {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: .08em;
	color: var(--wp--preset--color--grau);
	margin-top: .15rem;
}

/* ---------- Stellenliste ---------- */

.kuz-stellenliste {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.kuz-stelle {
	border: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--flaeche-gedeckt);
}

.kuz-stelle__link {
	display: block;
	padding: 1.5rem;
	text-decoration: none;
	color: var(--wp--preset--color--text);
}

.kuz-stelle__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.kuz-stelle__titel {
	font-size: var(--wp--preset--font-size--gross);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
}

.kuz-stelle__pfeil {
	flex: 0 0 auto;
	color: var(--wp--preset--color--akzent);
	transition: transform .2s ease;
}

.kuz-stelle__pfeil svg {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}

.kuz-stelle:hover .kuz-stelle__pfeil {
	transform: translateX( 4px );
}

.kuz-stelle__daten {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .9rem;
}

.kuz-stelle__merkmal {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-gedeckt);
	border: 1px solid var(--wp--preset--color--linie-hell);
	border-radius: 999px;
	padding: .35em .85em;
}

.kuz-stellenliste__mehr {
	margin-top: var(--wp--preset--spacing--20);
}

/* ---------- Bewerbungsablauf ---------- */

.kuz-ablauf {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	gap: 1rem;
	counter-reset: none;
}

.kuz-ablauf__schritt {
	border-top: 2px solid var(--wp--preset--color--akzent);
	padding-top: 1.1rem;
}

.kuz-ablauf__nummer {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: .14em;
	color: var(--wp--preset--color--akzent);
}

.kuz-ablauf__titel {
	margin: .5rem 0 .35rem;
	font-size: var(--wp--preset--font-size--gross);
	font-weight: 800;
	letter-spacing: -.02em;
}

.kuz-ablauf__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.55;
	color: var(--wp--preset--color--text-gedeckt);
}

/* ---------- Abschlussband ---------- */

.kuz-abschluss {
	background: var(--wp--preset--color--flaeche-gedeckt);
	border-top: 1px solid var(--wp--preset--color--linie);
}

.kuz-abschluss__titel {
	margin: .9rem 0 .6rem;
	font-size: var(--wp--preset--font-size--titel);
	font-weight: 900;
	letter-spacing: -.03em;
	line-height: 1.05;
	border: 0;
	padding-top: 0;
}

.kuz-abschluss__text {
	margin: 0;
	color: var(--wp--preset--color--text-gedeckt);
	max-width: 48ch;
}

/* ---------- Bewerbungsseite ---------- */

.kuz-bewerbung {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--30);
}

.kuz-bewerbung__formular {
	flex: 999 1 26rem;
	min-width: 0;
	border: 1px solid var(--wp--preset--color--linie);
	border-left: 3px solid var(--wp--preset--color--akzent);
	background: var(--wp--preset--color--flaeche-gedeckt);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.kuz-bewerbung__direkt {
	flex: 1 1 18rem;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.kuz-bewerbung__direkt-titel {
	margin: 0 0 .25rem;
	font-size: var(--wp--preset--font-size--gross);
	font-weight: 800;
	letter-spacing: -.02em;
	border: 0;
	padding-top: 0;
}

.kuz-feld__optional {
	font-family: var(--wp--preset--font-family--grotesk);
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--grau);
	font-size: var(--wp--preset--font-size--mini);
}

.kuz-feld textarea,
.kuz-feld select {
	background: var(--wp--preset--color--flaeche);
	border: 1px solid var(--wp--preset--color--linie-hell);
	border-radius: 2px;
	color: var(--wp--preset--color--text);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--klein);
	padding: .75rem .9rem;
	transition: border-color .2s ease;
	resize: vertical;
}

.kuz-feld textarea:hover,
.kuz-feld textarea:focus-visible,
.kuz-feld select:hover,
.kuz-feld select:focus-visible {
	border-color: var(--wp--preset--color--akzent);
}

.kuz-feld input::placeholder,
.kuz-feld textarea::placeholder {
	color: var(--wp--preset--color--grau);
}

.kuz-bewerbung__formular button {
	align-self: flex-start;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--basis);
	margin-top: .3rem;
}

.kuz-bewerbung__hinweis {
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--text-gedeckt);
	line-height: 1.55;
}

.kuz-bewerbung__dummy {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: .06em;
	color: var(--wp--preset--color--grau);
}

.kuz-bewerbung__zusage {
	border: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--flaeche-gedeckt);
	padding: 1.25rem;
	margin-top: .5rem;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.6;
}

.kuz-bewerbung__zusage p {
	margin: 0 0 .6rem;
}

.kuz-bewerbung__zusage ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .4rem;
	color: var(--wp--preset--color--text-gedeckt);
}

.kuz-bewerbung__zusage li {
	padding-left: 1rem;
	position: relative;
}

.kuz-bewerbung__zusage li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .65em;
	width: .5rem;
	height: 1px;
	background: var(--wp--preset--color--akzent);
}

/* ---------- Fragen und Antworten ---------- */

.kuz-fragen {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 21rem, 1fr ) );
	gap: .75rem;
	margin-top: var(--wp--preset--spacing--30);
	align-items: start;
}

.kuz-frage {
	border: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--flaeche-gedeckt);
}

.kuz-frage summary {
	cursor: pointer;
	padding: 1.25rem 1.5rem;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--basis);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.kuz-frage summary::-webkit-details-marker {
	display: none;
}

/* Eigenes Zeichen statt des Browser-Dreiecks, damit es zur CI passt. */
.kuz-frage summary::after {
	content: "";
	flex: 0 0 .7rem;
	width: .7rem;
	height: .7rem;
	border-right: 2px solid var(--wp--preset--color--akzent);
	border-bottom: 2px solid var(--wp--preset--color--akzent);
	transform: rotate( 45deg );
	transition: transform .2s ease;
}

.kuz-frage[open] summary::after {
	transform: rotate( -135deg );
}

.kuz-frage p {
	margin: 0;
	padding: 0 1.5rem 1.4rem;
	color: var(--wp--preset--color--text-gedeckt);
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.6;
}

.kuz-stellenliste--knapp {
	margin-top: var(--wp--preset--spacing--20);
}

.kuz-ablauf--ausbildung .kuz-ablauf__nummer {
	text-transform: none;
	letter-spacing: .06em;
}

/* ---------- Kontakt ---------- */

.kuz-kontakt__direkt {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 16rem, 1fr ) );
	gap: 1rem;
	margin-top: var(--wp--preset--spacing--30);
}

.kuz-kontakt__weg {
	display: flex;
	align-items: center;
	gap: 1rem;
	border: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--flaeche-gedeckt);
	padding: 1.25rem;
	text-decoration: none;
	color: var(--wp--preset--color--text);
	transition: border-color .2s ease, transform .2s ease;
}

.kuz-kontakt__weg:hover {
	border-color: var(--wp--preset--color--akzent);
	transform: translateY( -2px );
}

.kuz-kontakt__weg svg {
	flex: 0 0 1.5rem;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--wp--preset--color--akzent);
}

.kuz-kontakt__weg-label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau);
}

.kuz-kontakt__weg-wert {
	display: block;
	font-weight: 600;
	margin-top: .2rem;
	word-break: break-word;
}

/* ---------- Anliegen als Reitergruppe ---------- */

.kuz-anliegen {
	margin-top: var(--wp--preset--spacing--20);
}

.kuz-anliegen__reiter {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	border-bottom: 1px solid var(--wp--preset--color--linie);
	margin-bottom: var(--wp--preset--spacing--30);
}

.kuz-anliegen__reiter-knopf {
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--wp--preset--color--text-gedeckt);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--basis);
	font-weight: 600;
	padding: .9rem 1.2rem;
	cursor: pointer;
	margin-bottom: -1px;
	transition: color .2s ease, border-color .2s ease;
}

.kuz-anliegen__reiter-knopf:hover {
	color: var(--wp--preset--color--text);
}

.kuz-anliegen__reiter-knopf.ist-aktiv {
	color: var(--wp--preset--color--akzent);
	border-bottom-color: var(--wp--preset--color--akzent);
}

.kuz-anliegen__spalten {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.kuz-anliegen__text {
	flex: 1 1 22rem;
	min-width: 0;
}

.kuz-anliegen__titel {
	margin: 0 0 .6rem;
	font-size: var(--wp--preset--font-size--gross);
	font-weight: 800;
	letter-spacing: -.02em;
}

.kuz-anliegen__formular {
	flex: 1 1 22rem;
	min-width: 0;
	border: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--flaeche-gedeckt);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: .9rem;
}

.kuz-feld {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.kuz-feld label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau);
}

.kuz-feld input {
	background: var(--wp--preset--color--flaeche);
	border: 1px solid var(--wp--preset--color--linie-hell);
	border-radius: 2px;
	color: var(--wp--preset--color--text);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--klein);
	padding: .75rem .9rem;
	transition: border-color .2s ease;
}

.kuz-feld input:hover,
.kuz-feld input:focus-visible {
	border-color: var(--wp--preset--color--akzent);
}

.kuz-anliegen__absenden {
	align-self: flex-start;
	background: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--flaeche);
	border: 0;
	border-radius: 2px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	padding: .85rem 1.6rem;
	cursor: pointer;
	margin-top: .3rem;
	transition: background .2s ease, transform .2s ease;
}

.kuz-anliegen__absenden:hover {
	background: var(--wp--preset--color--akzent-hell);
	transform: translateY( -1px );
}

.kuz-anliegen__hinweis {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: .06em;
	color: var(--wp--preset--color--grau);
}

/* ---------- Ansprechpartner ---------- */

.kuz-person {
	display: flex;
	align-items: center;
	gap: 1rem;
	border: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--flaeche-gedeckt);
	padding: 1.1rem;
	margin-top: var(--wp--preset--spacing--20);
}

.kuz-person__bild {
	flex: 0 0 3.25rem;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--flaeche);
	border: 1px solid var(--wp--preset--color--linie-hell);
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--akzent);
}

.kuz-person__bild svg {
	width: 1.75rem;
	height: 1.75rem;
}

.kuz-person__name {
	display: block;
	font-weight: 700;
}

.kuz-person__rolle {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau);
	margin-top: .15rem;
}

.kuz-person__wege {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1rem;
	margin-top: .4rem;
	font-size: var(--wp--preset--font-size--klein);
}

/* ---------- Anfahrt ---------- */

.kuz-anfahrt {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--20);
}

.kuz-karte-visual {
	flex: 1 1 28rem;
	min-width: 0;
	border: 1px solid var(--wp--preset--color--linie);
	overflow: hidden;
}

.kuz-karte-visual svg {
	display: block;
	width: 100%;
	height: auto;
}

.kuz-anfahrt__wege {
	flex: 1 1 18rem;
	min-width: 0;
	display: grid;
	gap: var(--wp--preset--spacing--20);
	align-content: start;
}

.kuz-anfahrt__weg h3 {
	margin: 0 0 .3rem;
	font-size: var(--wp--preset--font-size--basis);
	font-weight: 800;
	letter-spacing: -.01em;
}

.kuz-anfahrt__weg p {
	margin: 0;
	color: var(--wp--preset--color--text-gedeckt);
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.6;
}

/* ---------- Karten ---------- */

.kuz-karte {
	transition: transform .25s ease, border-color .25s ease;
}

.kuz-karte:hover,
.kuz-karte:focus-within {
	transform: translateY( -3px );
	border-color: var(--wp--preset--color--akzent) !important;
}

/* ---------- Marginalie im Stil einer technischen Zeichnung ---------- */

.kuz-marginalie {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--akzent);
	display: flex;
	align-items: center;
	gap: .875rem;
}

.kuz-marginalie::before {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	background: var(--wp--preset--color--akzent);
}

.ist-sichtbar .kuz-marginalie::before {
	animation: kuz-breite .9s cubic-bezier( .4, 0, .2, 1 ) forwards;
}

/* ---------- Barrierefreiheit ---------- */

:focus-visible {
	outline: 2px solid var(--wp--preset--color--akzent);
	outline-offset: 3px;
}


/* ---------- Fussbereich ---------- */

/* Drei Spalten. Die mittlere ist schmaler als die beiden aeusseren, damit das
   Copyright optisch in der Mitte sitzt und nicht nur rechnerisch. */
.kuz-fuss {
	font-size: var(--wp--preset--font-size--klein);
}

.kuz-fuss__raster {
	display: grid;
	grid-template-columns: 1fr minmax( 15rem, .85fr ) 1fr;
	gap: var(--wp--preset--spacing--30);
	align-items: start;
}

.kuz-fuss__spalte--links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.kuz-fuss__gruppe {
	min-width: 10rem;
}

.kuz-fuss__titel {
	margin: 0 0 .9rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau);
}

.kuz-fuss__liste,
.kuz-fuss__daten,
.kuz-fuss__recht {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kuz-fuss__liste li + li {
	margin-top: .55rem;
}

.kuz-fuss a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .18s ease, border-color .18s ease;
}

.kuz-fuss a:hover,
.kuz-fuss a:focus-visible {
	color: var(--wp--preset--color--akzent-hell);
	border-bottom-color: var(--wp--preset--color--akzent);
}

.kuz-fuss__signal {
	color: var(--wp--preset--color--akzent-hell) !important;
	font-weight: 700;
}

/* ---- Mitte: Marke und Copyright ---- */

.kuz-fuss__spalte--mitte {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
	padding-inline: var(--wp--preset--spacing--20);
	border-inline: 1px solid var(--wp--preset--color--linie);
}

/* Das Logo ist auf dunklem Grund gezeichnet und braucht keine Umfaerbung,
   nur Platz und eine ruhige Hoehe. */
.kuz-fuss__marke {
	display: block;
	margin-bottom: .6rem;
	border-bottom: 0 !important;
}

.kuz-fuss__marke img {
	display: block;
	width: auto;
	height: 3.25rem;
	transition: opacity .18s ease;
}

.kuz-fuss__marke:hover img,
.kuz-fuss__marke:focus-visible img {
	opacity: .78;
}

.kuz-fuss__firma {
	margin: 0;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.3;
}

.kuz-fuss__copyright {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mini);
	color: var(--wp--preset--color--text-gedeckt);
}

.kuz-fuss__seit {
	margin: 0;
	font-size: var(--wp--preset--font-size--mini);
	color: var(--wp--preset--color--grau);
}

.kuz-fuss__recht {
	display: flex;
	gap: 1rem;
	margin-top: .35rem;
	font-size: var(--wp--preset--font-size--mini);
}

/* ---- Rechts: Kontaktdaten ---- */

.kuz-fuss__spalte--rechts {
	justify-self: end;
	text-align: right;
	max-width: 22rem;
}

.kuz-fuss__adresse {
	font-style: normal;
	margin: 0 0 1rem;
	line-height: 1.5;
}

/* Label und Wert in einer Zeile, Label gedeckt und schmal, damit die Spalte
   rechts eine saubere Kante bekommt. */
.kuz-fuss__daten li {
	display: flex;
	justify-content: flex-end;
	gap: .75rem;
	align-items: baseline;
}

.kuz-fuss__daten li + li {
	margin-top: .5rem;
}

.kuz-fuss__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: .08em;
	color: var(--wp--preset--color--grau);
	white-space: nowrap;
}

.kuz-fuss__zeiten {
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--mini);
	color: var(--wp--preset--color--grau);
}

/* Unter 1000 px reichen drei Spalten nicht mehr: Navigation und Kontakt
   nebeneinander, das Copyright darunter ueber die ganze Breite. */
@media ( max-width: 1000px ) {
	.kuz-fuss__raster {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--30);
	}

	.kuz-fuss__spalte--mitte {
		order: 3;
		grid-column: 1 / -1;
		border-inline: 0;
		border-top: 1px solid var(--wp--preset--color--linie);
		padding-top: var(--wp--preset--spacing--30);
		padding-inline: 0;
	}
}

@media ( max-width: 640px ) {
	.kuz-fuss__raster {
		grid-template-columns: 1fr;
	}

	.kuz-fuss__spalte--rechts {
		justify-self: start;
		text-align: left;
		max-width: none;
	}

	.kuz-fuss__daten li {
		justify-content: flex-start;
		flex-direction: column;
		gap: .1rem;
	}

	.kuz-fuss__spalte--links {
		gap: var(--wp--preset--spacing--20);
	}
}

/* ---------- Stimmen auf der Startseite ---------- */

.kuz-stimmen__wege {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: var(--wp--preset--spacing--30);
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	[data-kuz-auf],
	.kuz-schema__knoten {
		opacity: 1;
	}

	.kuz-schema__leitung {
		stroke-dashoffset: 0;
	}

	.kuz-marginalie::before {
		width: 48px;
	}

	.kuz-knopf-signal .wp-block-button__link::after,
	.kuz-schema__puls {
		display: none;
	}

	.kuz-karte:hover,
	.kuz-karte:focus-within {
		transform: none;
	}
}