/*
 * 03-components.css — Bausteine.
 *
 * Karten sind Ausnahmen (DESIGN.md, "Cards"). Deshalb gibt es hier keine
 * Kartenklasse. Was aussieht wie eine Sammlung von Objekten, ist ein
 * Register: Haarlinien, Zahlen, Ausrichtung — kein Behaelter.
 */

/* --- Label ----------------------------------------------------------------
 * IBM Plex Mono, Versalien. Nur fuer Bezeichner, Koordinaten, Kennungen und
 * Navigationsmetadaten — nie fuer Fliesstext.
 */

.photon-label {
	display: block;
	font-family: var(--photon-font-mono);
	font-size: var(--photon-fs-label-md);
	font-weight: 500;
	/* Versalien mit weiter Laufweite brauchen mehr Durchschuss als 1,25. */
	line-height: 1.4;
	letter-spacing: var(--photon-ls-label-md);
	text-transform: uppercase;
	color: var(--photon-text-muted, var(--photon-text-muted-light));
	margin: 0;
	max-inline-size: none;
}

.photon-label--lg {
	font-size: var(--photon-fs-label-lg);
	letter-spacing: var(--photon-ls-label-lg);
}

.photon-label--accent {
	color: var(--photon-accent-text, var(--photon-tertiary-on-light));
}

.photon-label--strong {
	color: var(--photon-text, var(--photon-text-on-light));
}

/* --- Fliesstext ------------------------------------------------------------ */

.photon-body-lg {
	font-size: var(--photon-fs-body-lg);
	line-height: 1.5;
	color: var(--photon-text, var(--photon-text-on-light));
}

.photon-body {
	font-size: var(--photon-fs-body-md);
	line-height: var(--photon-lh-body);
	color: var(--photon-text, var(--photon-text-on-light));
}

.photon-body--muted {
	color: var(--photon-text-muted, var(--photon-text-muted-light));
}

/* --- Aktionen --------------------------------------------------------------
 * Genau eine dominante Aktion je Viewport. Primaer ist eine Flaeche,
 * tertiaer ist eine Linie. Es gibt bewusst keine dritte Fuellfarbe.
 */

.photon-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--photon-space-sm);
	min-block-size: 3.25rem;
	padding: var(--photon-space-md) var(--photon-space-xl);
	font-family: var(--photon-font-mono);
	font-size: var(--photon-fs-label-lg);
	font-weight: 500;
	letter-spacing: var(--photon-ls-label-lg);
	line-height: var(--photon-lh-label);
	text-transform: uppercase;
	text-decoration: none;
	border: var(--photon-hairline) solid transparent;
	border-radius: var(--photon-radius-sm);
	cursor: pointer;
	transition:
		background-color var(--photon-dur-state) var(--photon-ease-align),
		border-color var(--photon-dur-state) var(--photon-ease-align),
		color var(--photon-dur-state) var(--photon-ease-align);
}

.photon-action--primary {
	background-color: var(--photon-tertiary);
	border-color: var(--photon-tertiary);
	color: var(--photon-text-on-dark);
}

.photon-action--primary:hover {
	background-color: var(--photon-tertiary-hover);
	border-color: var(--photon-tertiary-hover);
	color: var(--photon-text-on-dark);
}

.photon-action--primary:active {
	background-color: var(--photon-tertiary-active);
	border-color: var(--photon-tertiary-active);
}

.photon-action--secondary {
	background-color: transparent;
	border-color: var(--photon-rule-control, var(--photon-border-light-control));
	color: var(--photon-text, var(--photon-text-on-light));
}

.photon-action--secondary:hover {
	border-color: var(--photon-text, var(--photon-text-on-light));
}

/*
 * Tertiaer: Textlink mit gerichteter Linie. Die Linie ist der Zustand —
 * sie waechst bei Hover und Fokus, die Farbe bleibt.
 */
.photon-action--tertiary {
	min-block-size: 2.75rem;
	padding: var(--photon-space-xs) 0;
	background-color: transparent;
	border: 0;
	border-radius: var(--photon-radius-none);
	color: var(--photon-accent-text, var(--photon-tertiary-on-light));
	position: relative;
}

.photon-action--tertiary::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: var(--photon-space-xxs);
	block-size: var(--photon-hairline);
	background-color: currentColor;
	transform: scaleX(1);
	transform-origin: left center;
	transition: block-size var(--photon-dur-micro) var(--photon-ease-align);
}

.photon-action--tertiary:hover::after,
.photon-action--tertiary:focus-visible::after {
	block-size: 2px;
}

.photon-action__arrow {
	inline-size: 1.5rem;
	block-size: var(--photon-hairline);
	background-color: currentColor;
	flex: 0 0 auto;
	transition: inline-size var(--photon-dur-micro) var(--photon-ease-align);
}

.photon-action:hover .photon-action__arrow {
	inline-size: 2rem;
}

/* --- Kopfbereich -----------------------------------------------------------
 * Eine praezise horizontale Schiene. Der aktive Zustand entsteht ueber
 * Position, Typografie und eine kurze optische Linie — nie ueber eine
 * gerundete Pille. Kein backdrop-filter (NO-7).
 */

/*
 * Der Kopfbereich klebte nicht — gemessen: bei scrollY 3000 lag er bei
 * top = -2964.
 *
 * Ursache war nicht die sticky-Regel, sondern ihr Container: WordPress
 * umschliesst jeden Template-Part mit einem <div>, und sticky wirkt nur
 * innerhalb des naechsten Blockcontainers. Dieses div war 104 px hoch —
 * der Klebebereich also 104 px gross.
 *
 * Die Folge war messbar: zwischen dem Hero-CTA und der ersten Selektorzeile
 * lagen 4 273 px ohne Navigation, ohne CTA, ohne einen einzigen Link —
 * und zwar genau ueber den drei Sektionen, die die Positionierung tragen.
 *
 * display: contents loest die Huelle auf; Kopfbereich und Sentinel werden
 * direkte Kinder von .wp-site-blocks.
 */
.photon-header-shell {
	display: contents;
}

.photon-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--photon-z-header);
	background-color: transparent;
	transition:
		background-color var(--photon-dur-state) var(--photon-ease-align),
		border-color var(--photon-dur-state) var(--photon-ease-align);
	border-block-end: var(--photon-hairline) solid transparent;
}

.photon-header.is-lifted {
	background-color: var(--photon-surface-light);
	border-block-end-color: var(--photon-border-light-decor);
}

.photon-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Bei starkem Textzoom muss die Schiene umbrechen duerfen. */
	flex-wrap: wrap;
	gap: var(--photon-space-sm) var(--photon-space-lg);
	min-block-size: var(--photon-header-height);
}

.photon-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--photon-space-sm);
	text-decoration: none;
	color: var(--photon-text-on-light);
	padding-block: var(--photon-space-xs);
}

.photon-brand__mark {
	/*
	 * Die Wortmarke ist ein gestapeltes Lockup mit viel Luft: 4834 x 2277,
	 * also 2,12:1. Unter etwa 150 px Breite faellt die Versalhoehe von
	 * "PHOTON" unter 9 px und die Haarlinien des Atomzeichens verschwinden.
	 * Deshalb ist der Kopfbereich hoeher als die 72 px des nav-shell-Tokens.
	 * E-6 haelt das Logo fuer V1 unveraendert — ein horizontales Lockup
	 * waere eine Logoueberarbeitung und damit ein eigenes Projekt.
	 */
	inline-size: 152px;
	block-size: auto;
}

@media (min-width: 64em) {
	.photon-brand__mark {
		inline-size: 184px;
	}
}

/* --- Navigation ------------------------------------------------------------
 * Ohne JavaScript bleibt die Liste sichtbar und laeuft mobil um. Erst der
 * Marker .photon-js klappt sie in den Vollbildindex ein — sonst waere die
 * Navigation ohne Skript unerreichbar.
 */

.photon-nav {
	display: flex;
	align-items: center;
	gap: var(--photon-space-lg);
	flex-wrap: wrap;
	justify-content: flex-end;
}

.photon-nav__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--photon-space-md) var(--photon-space-lg);
	list-style: none;
	margin: 0;
	padding: 0;
}

.photon-nav__item {
	margin: 0;
}

.photon-nav__link,
.photon-nav__pending {
	position: relative;
	display: inline-block;
	font-family: var(--photon-font-mono);
	font-size: var(--photon-fs-label-md);
	font-weight: 500;
	letter-spacing: var(--photon-ls-label-md);
	line-height: var(--photon-lh-label);
	text-transform: uppercase;
	text-decoration: none;
	padding-block: var(--photon-space-sm);
}

.photon-nav__link {
	color: var(--photon-text-on-light);
}

/*
 * Punkte ohne Ziel sind keine Links. Sie zeigen die geplante
 * Informationsarchitektur, ohne einen Klick zu versprechen, der auf
 * eine 404 fuehrt.
 */
.photon-nav__pending {
	color: var(--photon-text-muted-light);
	cursor: default;
}

.photon-nav__link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 2px;
	background-color: var(--photon-tertiary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--photon-dur-state) var(--photon-ease-align);
}

.photon-nav__link:hover::after,
.photon-nav__link:focus-visible::after,
.photon-nav__link[aria-current="page"]::after {
	transform: scaleX(1);
}

@media (min-width: 64em) {
	.photon-nav {
		gap: var(--photon-space-xl);
	}

	.photon-nav__list {
		gap: var(--photon-space-xl);
	}
}

@media (max-width: 63.99em) {
	.photon-js .photon-nav {
		display: none;
	}
}

/* --- Navigation Mobil ------------------------------------------------------
 * Ein redaktioneller Vollbildindex, keine Sammlung gerundeter Pillen.
 */

.photon-nav-toggle {
	display: none;
	align-items: center;
	gap: var(--photon-space-sm);
	min-block-size: 2.75rem;
	min-inline-size: 2.75rem;
	padding: var(--photon-space-xs) var(--photon-space-sm);
	margin-inline-end: calc(var(--photon-space-sm) * -1);
	background: transparent;
	border: 0;
	border-radius: var(--photon-radius-xs);
	color: var(--photon-text-on-light);
	font-family: var(--photon-font-mono);
	font-size: var(--photon-fs-label-md);
	font-weight: 500;
	letter-spacing: var(--photon-ls-label-md);
	text-transform: uppercase;
	cursor: pointer;
}

.photon-nav-toggle__glyph {
	display: grid;
	gap: 5px;
	inline-size: 1.25rem;
}

.photon-nav-toggle__glyph span {
	display: block;
	block-size: var(--photon-hairline);
	background-color: currentColor;
	transition: transform var(--photon-dur-state) var(--photon-ease-align);
	transform-origin: right center;
}

.photon-nav-toggle[aria-expanded="true"] .photon-nav-toggle__glyph span:first-child {
	transform: scaleX(0.55);
}

@media (max-width: 63.99em) {
	.photon-js .photon-nav-toggle {
		display: inline-flex;
	}
}

/* Der Schliessen-Knopf lebt im Panel und folgt nicht der Breakpoint-Regel. */
.photon-mobile-nav__close {
	display: inline-flex;
}

.photon-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: var(--photon-z-overlay);
	background-color: var(--photon-surface-light);
	color: var(--photon-text-on-light);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-block: var(--photon-space-lg) var(--photon-space-3xl);
	display: none;
}

.photon-mobile-nav.is-open {
	display: block;
}

@media (min-width: 64em) {
	.photon-mobile-nav,
	.photon-mobile-nav.is-open {
		display: none;
	}
}

.photon-mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-block-size: var(--photon-header-height);
	margin-block-end: var(--photon-space-xl);
}

.photon-mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-block-start: var(--photon-hairline) solid var(--photon-border-light-decor);
}

.photon-mobile-nav__item {
	border-block-end: var(--photon-hairline) solid var(--photon-border-light-decor);
}

.photon-mobile-nav__link,
.photon-mobile-nav__pending {
	display: grid;
	gap: var(--photon-space-xxs);
	padding-block: var(--photon-space-lg);
	min-block-size: 3.5rem;
	text-decoration: none;
	font-family: var(--photon-font-sans);
	font-size: var(--photon-fs-md);
	font-weight: 500;
	line-height: var(--photon-lh-md);
	letter-spacing: var(--photon-ls-md);
}

.photon-mobile-nav__link {
	color: var(--photon-text-on-light);
}

.photon-mobile-nav__pending {
	color: var(--photon-text-muted-light);
}

/*
 * Der Hinweis ist ein ganzer Halbsatz, kein Bezeichner. Versalien mit
 * 0,12 em Laufweite sind dafuer die falsche Form — Mono-Uppercase ist im
 * Designsystem fuer Kennungen und Labels reserviert, nicht fuer Text.
 */
.photon-mobile-nav__hint {
	font-family: var(--photon-font-mono);
	font-size: var(--photon-fs-body-sm);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
	color: var(--photon-text-muted-light);
}

.photon-mobile-nav__foot {
	margin-block-start: var(--photon-space-2xl);
	display: grid;
	gap: var(--photon-space-lg);
	justify-items: start;
}

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

/* --- Die Platte ------------------------------------------------------------
 * Kein Rasterbild wird jemals oberhalb seiner nativen Pixelbreite
 * dargestellt (DESIGN_FREEZE.md § 4). Daraus folgt diese Komponente:
 * Bilder erscheinen bei oder unter nativer Groesse, gerahmt, 0 px Radius,
 * mit einer Mono-Bildunterschrift — wie Tafeln in einer Architekturmonografie.
 *
 * max-inline-size wird je Bild gesetzt, nie geraten.
 */

.photon-plate {
	margin: 0;
	display: grid;
	gap: var(--photon-space-sm);
	justify-items: start;
}

.photon-plate__frame {
	position: relative;
	display: block;
	inline-size: 100%;
	border: var(--photon-hairline) solid var(--photon-rule, var(--photon-border-light-decor));
	background-color: var(--photon-surface-light-muted);
}

.photon-section--dark .photon-plate__frame {
	background-color: var(--photon-surface-dark-raised);
}

.photon-plate__frame img {
	inline-size: 100%;
	block-size: auto;
}

.photon-plate__caption {
	display: flex;
	flex-wrap: wrap;
	gap: var(--photon-space-xs) var(--photon-space-md);
	font-family: var(--photon-font-mono);
	font-size: var(--photon-fs-label-md);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: var(--photon-lh-label);
	color: var(--photon-text-muted, var(--photon-text-muted-light));
	max-inline-size: none;
}

.photon-plate__caption b {
	font-weight: 500;
	color: var(--photon-text, var(--photon-text-on-light));
}

/* --- Datenregister ---------------------------------------------------------
 * Beweis, keine Dekoration. Zahlen in Mono, tabellarisch, mit Haarlinie.
 * Es gibt keinen Platzhalterwert: fehlt eine Zahl, fehlt die Zeile.
 */

.photon-data {
	display: grid;
	gap: 0;
	margin: 0;
	/*
	 * Wert und Bezeichner stehen an den beiden Enden derselben Zeile. Ohne
	 * Obergrenze reisst die Zeile auf breiten Flaechen so weit auf, dass der
	 * Zusammenhang zwischen "Bayern" und "STANDORT" nicht mehr zu sehen ist.
	 */
	max-inline-size: 34rem;
	border-block-start: var(--photon-hairline) solid var(--photon-rule);
}

/*
 * Wert oben, Bezeichner darunter — immer, nicht erst ab einer Breite.
 *
 * Die nebeneinander gesetzte Fassung war fragil: In der Textspalte der
 * Projektsektion (313 px bei 1024, 420 px bei 1440) kollidierte ein
 * 48-px-Mono-Wert regelmaessig mit seinem Bezeichner, und bei 1440 passte er
 * nur mit rund 25 px Rest — also zufaellig. Ein Messwert, der von seiner
 * Einheit getrennt umbricht, ist der schlechteste denkbare Fehler an der
 * einzigen belegten Zahl der Seite.
 *
 * Im Markup steht dt vor dd (HTML-Inhaltsmodell und bessere
 * Vorlesereihenfolge). Sichtbar steht der Wert oben; das Raster dreht die
 * Reihenfolge, nicht das Markup.
 */
.photon-data__row {
	display: grid;
	gap: var(--photon-space-xxs);
	padding-block: var(--photon-space-lg);
	border-block-end: var(--photon-hairline) solid var(--photon-rule);
}

.photon-data__row .photon-data__value {
	grid-row: 1;
}

.photon-data__row .photon-data__key {
	grid-row: 2;
}

/*
 * Nur ein Messwert bekommt die 48-px-Mono-Stufe. Eine Rubrik ist keine
 * Messung — die Stufe daran zu verschenken schwaecht die einzige belegte
 * Zahl der Seite und liess sie bei 1024 und 1280 px zweizeilig umbrechen,
 * getrennt von ihrer Einheit.
 */
.photon-data__value {
	font-family: var(--photon-font-mono);
	font-size: var(--photon-fs-data-md);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: var(--photon-ls-data);
	font-variant-numeric: tabular-nums;
	color: var(--photon-text, var(--photon-text-on-light));
	margin: 0;
	text-wrap: nowrap;
}

.photon-data__value--measure {
	font-size: var(--photon-fs-data-xl);
	line-height: 1;
}

/*
 * Ein fehlender Wert wird nicht durch einen plausiblen ersetzt und auch
 * nicht durch eine leere Zeile verschwiegen. Er steht da, in derselben
 * Zeile wie ein echter Wert, und sagt was fehlt.
 */
.photon-data__value--pending {
	font-size: var(--photon-fs-label-lg);
	letter-spacing: var(--photon-ls-label-lg);
	text-transform: uppercase;
	color: var(--photon-text-muted, var(--photon-text-muted-light));
	padding: var(--photon-space-xs) var(--photon-space-sm);
	border: var(--photon-hairline) dashed var(--photon-rule-control, var(--photon-border-light-control));
	border-radius: var(--photon-radius-xs);
	justify-self: start;
	text-wrap: wrap;
}

.photon-data__key {
	font-family: var(--photon-font-mono);
	font-size: var(--photon-fs-label-md);
	font-weight: 500;
	letter-spacing: var(--photon-ls-label-md);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--photon-text-muted, var(--photon-text-muted-light));
	margin: 0;
	max-inline-size: none;
	overflow-wrap: break-word;
}

/* --- Sichtbarer Platzhalter -------------------------------------------------
 * Nicht Belegtes erscheint ausschliesslich als sichtbar gekennzeichneter
 * Platzhalter (SOURCE_OF_TRUTH.md). Diese Klasse ist die einzige zulaessige
 * Form dafuer — sie darf nicht dekorativ aussehen.
 */

.photon-pending {
	display: inline-flex;
	align-items: center;
	gap: var(--photon-space-sm);
	font-family: var(--photon-font-mono);
	font-size: var(--photon-fs-label-md);
	font-weight: 500;
	letter-spacing: var(--photon-ls-label-md);
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--photon-text-muted, var(--photon-text-muted-light));
	padding: var(--photon-space-xs) var(--photon-space-sm);
	border: var(--photon-hairline) dashed var(--photon-rule-control, var(--photon-border-light-control));
	border-radius: var(--photon-radius-xs);
	max-inline-size: none;
}

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

.photon-footer {
	background-color: var(--photon-surface-dark);
	color: var(--photon-text-on-dark);
	--photon-text: var(--photon-text-on-dark);
	--photon-text-muted: var(--photon-text-muted-dark);
	--photon-rule: var(--photon-border-dark-decor);
	--photon-rule-control: var(--photon-border-dark-control);
	--photon-accent-text: var(--photon-tertiary-on-dark);
	padding-block: var(--photon-space-3xl) var(--photon-space-2xl);
}

.photon-footer__grid {
	row-gap: var(--photon-space-2xl);
}

.photon-footer__claim {
	margin-block-start: var(--photon-space-md);
	max-inline-size: 30ch;
	color: var(--photon-text-muted-dark);
}

.photon-footer__groups {
	display: grid;
	gap: var(--photon-space-xl) var(--photon-gutter);
}

@media (min-width: 30em) {
	.photon-footer__groups {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.photon-footer__brand { grid-column: 1 / span 4; }
	.photon-footer__groups { grid-column: 6 / span 7; }
}

.photon-footer__list {
	list-style: none;
	margin: var(--photon-space-md) 0 0;
	padding: 0;
	display: grid;
	gap: var(--photon-space-sm);
}

.photon-footer__list li {
	font-size: var(--photon-fs-body-sm);
	color: var(--photon-text-muted-dark);
	/* "Unternehmensstandort" ist laenger als eine Drittelspalte bei 480 px. */
	overflow-wrap: break-word;
	hyphens: auto;
}

.photon-footer__bottom {
	margin-block-start: var(--photon-space-2xl);
	padding-block-start: var(--photon-space-lg);
	border-block-start: var(--photon-hairline) solid var(--photon-border-dark-decor);
	display: flex;
	flex-wrap: wrap;
	gap: var(--photon-space-md) var(--photon-space-xl);
	justify-content: space-between;
}