/*
 * Ergaenzungen, die nach dem Relaunch dazugekommen sind - neue Sektionen
 * und Zustaende bestehender Bausteine.
 *
 * itego.css ist das unveraenderte Design-System aus dem Entwurf und bleibt
 * unangetastet; wp-overrides.css ist fuer WordPress-Eigenheiten gedacht.
 * Neue gestalterische Bausteine landen deshalb hier.
 */

/* ============================================================ Referenzen
 * Endlos laufendes Logo-Band.
 *
 * Die Farben stammen aus einem eigenstaendigen Entwurf und sind hier auf die
 * Theme-Tokens uebersetzt: #0B2239 -> --navy-800, #17A3DE -> --cyan-400,
 * #5D6E80 -> --ink-soft, #E3EAF1 -> --line. Die Schrift kommt ueber --font
 * (Inter), nicht Manrope wie im Entwurf.
 */

.referenzen {
	--ref-bg: var(--surface);
	--ref-head: var(--navy-800);
	--ref-sub: var(--ink-soft);
	background: var(--ref-bg);
	/* Kein eigenes Padding: .section gibt den vertikalen Rhythmus der Seite
	   vor. Der Entwurf brachte 96/104px mit, kannte das Theme aber nicht -
	   die Sektion waere damit flacher als jede Nachbarsektion. */
	overflow: hidden;
}

.referenzen[data-bg="dark"] {
	--ref-bg: var(--navy-900);
	--ref-head: #fff;
	--ref-sub: rgba(255, 255, 255, .62);
	background:
		radial-gradient(900px 420px at 78% 12%, rgba(0, 200, 224, .16), transparent 62%),
		var(--ref-bg);
}

.referenzen .section-head h2 { color: var(--ref-head); }
.referenzen .section-head p  { color: var(--ref-sub); }

/* Auf dunklem Grund traegt das Blau des Eyebrows nicht - dort Cyan. */
.referenzen[data-bg="dark"] .eyebrow          { color: var(--cyan-400); }
.referenzen[data-bg="dark"] .eyebrow::before  { background: var(--cyan-400); }

/* -------------------------------------------------------------- Laufband */

.ref-marquee {
	margin-top: clamp(36px, 4.5vw, 54px);
	position: relative;
	/* Weiche Kanten links und rechts, damit die Logos nicht abgeschnitten
	   wirken, sondern aus dem Nichts kommen. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ref-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: ref-slide var(--ref-speed, 46s) linear infinite;
}

/* Die Liste steht zweimal im Markup; -50 % ist deshalb exakt ein Durchlauf. */
@keyframes ref-slide {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Anhalten, solange jemand hinsieht oder per Tastatur drin ist. */
.ref-marquee:hover .ref-track,
.ref-marquee:focus-within .ref-track { animation-play-state: paused; }

/* --------------------------------------------------------------- Logos */

.ref-logo {
	flex: 0 0 auto;
	padding: 0 clamp(26px, 3vw, 40px);
	min-height: 68px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ref-logo img {
	display: block;
	height: var(--ref-h, 32px);
	width: auto;
	filter: grayscale(1);
	opacity: .62;
	transition: filter .35s var(--ease), opacity .35s var(--ease);
}

.referenzen[data-style="color"] .ref-logo img            { filter: none; opacity: .92; }
.referenzen[data-bg="dark"] .ref-logo img                { filter: brightness(0) invert(1); opacity: .72; }
.referenzen[data-bg="dark"][data-style="color"] .ref-logo img { filter: none; opacity: .95; }
.ref-logo:hover img                                      { filter: none; opacity: 1; }

/* --------------------------------------------------------------- Namen */

.ref-name {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 36px;
	min-height: 68px;
	padding-left: 36px;
	font-size: clamp(17px, 1.6vw, 21px);
	font-weight: 600;
	letter-spacing: -.012em;
	color: var(--ref-head);
	opacity: .78;
	white-space: nowrap;
}

/* Trennpunkt zwischen den Namen. */
.ref-name::after {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	opacity: .32;
}

/* ------------------------------------------------- Bewegung reduzieren
 * Ein dauerhaft laufendes Band ueber die volle Breite ist fuer Menschen mit
 * vestibulaeren Stoerungen unangenehm. Bei entsprechender Systemeinstellung
 * steht es still und wird umbrechend gesetzt, bleibt also vollstaendig
 * lesbar statt nur angehalten.
 */
@media (prefers-reduced-motion: reduce) {
	.ref-marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.ref-track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
		max-width: var(--shell);
		margin-inline: auto;
		padding-inline: var(--gutter);
	}

	/* Der Klon waere hier eine sichtbare Dopplung. */
	.ref-track > [aria-hidden="true"] { display: none; }
}


/* ======================================================= Header ueber Dunkel
 * Die Leiste war ueber dunklen Sektionen (Hero, Kontakt, Footer, Unterseiten-
 * Hero) durchsichtig und wurde erst weiss, sobald helle Inhalte sie
 * erreichten. Jetzt bekommt sie dort einen navyfarbenen Hintergrund - aber
 * erst, sobald gescrollt wird. Ganz oben bleibt sie durchsichtig, damit der
 * Hero beim Laden offen wirkt. Die Klasse setzt itego.js (v4).
 *
 * Bewusst halbdurchlaessig statt deckend: Hinter dem Hero liegt die animierte
 * Netzgrafik (#hero-canvas). Ein deckendes Navy wuerde sie im Bereich der
 * Leiste abschneiden - sichtbar als toter Balken.
 */

body.nav-dark .site-header {
	background: rgba(6, 20, 43, .78);
	backdrop-filter: saturate(160%) blur(12px);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	border-bottom-color: rgba(255, 255, 255, .10);
	/* Gleiche Hoehe wie der weisse Zustand, damit der Uebergang vom Hero in
	   helle Inhalte nicht zusaetzlich springt. */
	height: 72px;
}