/*
 * 04-sections.css — die fuenf Sektionen des ersten zusammenhaengenden
 * Startseitenausschnitts.
 *
 * Bewegung: ausschliesslich transform und opacity, nichts laeuft unendlich,
 * jede Bewegung endet nach einem Durchlauf (NO-5). Inhalt ist zu jedem
 * Zeitpunkt vollstaendig lesbar — animiert werden nur Linien, nie Text.
 */

/* ==========================================================================
   Bewegung — gemeinsame Grundlage
   ========================================================================== */

@keyframes photon-align-x {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes photon-align-y {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

/*
 * Ueber dem Falz laeuft die Ausrichtung ohne JavaScript. Faellt das
 * Stylesheet aus, faellt auch die Animation aus — es gibt keinen Zustand,
 * in dem Inhalt unsichtbar bleibt.
 */
.photon-anim-x {
	transform-origin: left center;
	animation: photon-align-x var(--photon-dur-signature) var(--photon-ease-align) both;
}

/*
 * Unterhalb des Falzes wartet die Ausrichtung auf den Eintritt in den
 * Viewport. Ohne JavaScript fehlt .photon-js und der Endzustand steht sofort.
 */
.photon-js .photon-observe .photon-anim-x {
	animation: none;
	transform: scaleX(1);
	transition: transform var(--photon-dur-signature) var(--photon-ease-align);
}

.photon-js .photon-observe:not(.is-aligned) .photon-anim-x {
	transform: scaleX(0);
}

/* ==========================================================================
   01 — Hero
   ========================================================================== */

.photon-hero {
	padding-block: var(--photon-space-2xl) var(--photon-space-3xl);
	/* Rueckfall zuerst: Browser ohne svh ignorieren sonst die ganze Zeile. */
	min-block-size: calc(100vh - var(--photon-header-height) - var(--photon-banner-height));
	min-block-size: calc(100svh - var(--photon-header-height) - var(--photon-banner-height));
	display: flex;
	align-items: center;
	overflow: hidden;
}

.photon-hero__grid {
	inline-size: 100%;
	row-gap: var(--photon-space-xl);
}

.photon-hero__eyebrow {
	position: relative;
	padding-inline-start: calc(var(--photon-space-2xl) + var(--photon-space-md));
	color: var(--photon-text-muted-light);
}

.photon-hero__eyebrow::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.55em;
	inline-size: var(--photon-space-2xl);
	block-size: var(--photon-hairline);
	background-color: var(--photon-tertiary);
	transform-origin: left center;
	animation: photon-align-x var(--photon-dur-reveal) var(--photon-ease-align) both;
}

/*
 * Die rechte Marke der oberen Bahn. Sie begrenzt den Leerraum neben der
 * Ueberschrift, statt ihn offen enden zu lassen.
 */
.photon-hero__stamp {
	display: flex;
	flex-wrap: wrap;
	gap: var(--photon-space-xs) var(--photon-space-md);
	color: var(--photon-text-muted-light);
}

/*
 * Der Freigabehinweis hebt sich ueber den Tonwert ab, nicht ueber den
 * Markenakzent. Violett bleibt der Interaktion vorbehalten — ein
 * nichtklickbares Label in der Aktionsfarbe ist genau die Verwaesserung,
 * die DESIGN.md mit "single interactive brand accent" ausschliesst.
 */
.photon-hero__stamp-note {
	color: var(--photon-text-on-light);
}

.photon-hero__headline {
	margin: 0;
	max-inline-size: 15ch;
}

.photon-hero__rule {
	animation-delay: 120ms;
	animation-duration: 700ms;
}

.photon-hero__lead {
	display: grid;
	gap: var(--photon-space-xl);
	justify-items: start;
	align-content: start;
}

.photon-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--photon-space-lg) var(--photon-space-xl);
}

.photon-hero__plate {
	max-inline-size: 588px;
}

.photon-hero .photon-plate {
	max-inline-size: 588px;
}

/*
 * Der optische Marker sitzt an der echten Bildkante, nicht daneben.
 * DESIGN_FREEZE.md § 3 laesst den 2-px-Akzent ausdruecklich als Reflexion an
 * einer echten Fase zu — eine frei schwebende Linie 24 px neben dem Bild
 * markiert dagegen nichts.
 */
.photon-plate--marked .photon-plate__frame {
	position: relative;
	border-inline-start: 0;
}

.photon-plate--marked .photon-plate__frame::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 0;
	inline-size: 2px;
	background-color: var(--photon-tertiary);
	transform-origin: top center;
	animation: photon-align-y 500ms var(--photon-ease-align) 400ms both;
	z-index: 1;
}

@media (min-width: 64em) {
	.photon-hero__grid { row-gap: var(--photon-space-lg); }
	.photon-hero__eyebrow { grid-column: 1 / span 6; grid-row: 1; }
	.photon-hero__stamp { grid-column: 8 / span 5; grid-row: 1; }
	.photon-hero__headline { grid-column: 1 / span 9; grid-row: 2; margin-block-start: var(--photon-space-2xl); }
	.photon-hero__rule { grid-column: 1 / span 12; grid-row: 3; margin-block-start: var(--photon-space-2xl); }
	.photon-hero__lead { grid-column: 1 / span 5; grid-row: 4; margin-block-start: var(--photon-space-lg); }
	.photon-hero__plate { grid-column: 8 / span 5; grid-row: 4; margin-block-start: var(--photon-space-lg); }
}

/* ==========================================================================
   02 — Positionierung / Uebergang
   Die Form dieser Sektion ist eine Aussage, keine Aufzaehlung.
   ========================================================================== */

.photon-position__statement {
	display: grid;
	gap: var(--photon-space-xl);
	align-content: start;
}

.photon-position__lede {
	font-size: var(--photon-fs-lg);
	line-height: var(--photon-lh-lg);
	letter-spacing: var(--photon-ls-lg);
	font-weight: 500;
	max-inline-size: 26ch;
	margin: 0;
	text-wrap: balance;
}

.photon-position__body {
	display: grid;
	gap: var(--photon-space-lg);
	max-inline-size: var(--photon-measure);
}

/*
 * Kuerzer als die Nachbarsektionen. Drei fast gleich lange Baender in Folge
 * sind ein Metronom, kein Rhythmus — gemessen 872 / 910 / 1102 px.
 */
.photon-position {
	padding-block: calc(var(--photon-space-section) * 0.72);
}

@media (min-width: 64em) {
	.photon-position__statement { grid-column: 3 / span 8; }
}

/* ==========================================================================
   03 — Selected Project
   Dunkles Kapitel innerhalb der hellen Seite. Kein Karten-Grid.
   ========================================================================== */

.photon-project {
	overflow: hidden;
}

.photon-project__grid {
	row-gap: var(--photon-space-3xl);
	align-items: start;
}

.photon-project .photon-plate {
	max-inline-size: 640px;
}

.photon-project__body {
	display: grid;
	gap: var(--photon-space-xl);
	align-content: start;
}

.photon-project__headline {
	margin: 0;
	max-inline-size: 16ch;
}

.photon-project__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--photon-space-md) var(--photon-space-xl);
	align-items: center;
}

.photon-project__index {
	font-family: var(--photon-font-mono);
	font-size: var(--photon-fs-label-lg);
	font-weight: 500;
	letter-spacing: var(--photon-ls-label-lg);
	text-transform: uppercase;
	color: var(--photon-tertiary-on-dark);
}

@media (min-width: 64em) {
	/*
	 * Die Platte ist kurz, die Textspalte lang. Oben ausgerichtet blieben
	 * darunter rund 820 px leeres Graphit stehen — keine aktive Flaeche,
	 * sondern eine Zelle, die man unten nicht geschlossen hat.
	 */
	.photon-project__grid { align-items: center; }
	.photon-project__plate { grid-column: 1 / span 7; }
	.photon-project__body { grid-column: 9 / span 4; }
}

/* ==========================================================================
   04 — Photon Model
   Ein technisches Registrierschema, keine Prozess-Infografik.
   ========================================================================== */

.photon-model__head {
	display: grid;
	gap: var(--photon-space-lg);
	margin-block-end: var(--photon-space-4xl);
}

.photon-model__headline {
	margin: 0;
	max-inline-size: 18ch;
}

@media (min-width: 64em) {
	.photon-model__head { grid-column: 1 / span 8; }
	.photon-model__figure { grid-column: 1 / span 12; }
}

.photon-model__figure {
	margin: 0;
	position: relative;
}

/* --- Eingangsgroessen ---------------------------------------------------- */

/*
 * Eine Registerzeile, kein Spaltenraster. Die Begriffe sitzen als Marken auf
 * der Sammelschiene, die direkt darunter laeuft.
 */
.photon-model__inputs {
	list-style: none;
	margin: 0 0 var(--photon-space-md);
	padding: 0 0 var(--photon-space-md);
	display: flex;
	flex-wrap: wrap;
	gap: var(--photon-space-md) var(--photon-space-2xl);
}

/*
 * Ohne eigenen Abgriff und ohne Einrueckung. Die Sammelschiene direkt
 * darunter registriert die Begriffe bereits; ein zusaetzlicher Tick haette
 * eine dritte linke Kante erzeugt. In einem System, dessen These
 * "Ausrichtung" ist, gibt es genau zwei: die Sektionskante und die
 * Registerkante.
 */
.photon-model__input {
	position: relative;
	font-family: var(--photon-font-mono);
	font-size: var(--photon-fs-label-lg);
	font-weight: 500;
	letter-spacing: var(--photon-ls-label-lg);
	text-transform: uppercase;
	line-height: var(--photon-lh-label);
	color: var(--photon-text-on-light);
}



/* --- Sammelschiene -------------------------------------------------------- */

.photon-model__rail {
	block-size: var(--photon-hairline);
	inline-size: 100%;
	background-color: var(--photon-border-light-decor);
	transform-origin: left center;
}

/* --- Knoten und Ausgaenge -------------------------------------------------
 * Alles haengt an einer Kante links. Das ist die Ausrichtung, um die es geht.
 */

.photon-model__spine {
	position: relative;
	/*
	 * Die Einrueckung waechst bei reinem Textzoom mit — 3 rem sind bei
	 * 32 px Wurzelgroesse 96 px, und bei 390 px Viewport bleibt dann zu
	 * wenig fuer den Text. Auf schmalen Schirmen deshalb eine Stufe kleiner.
	 */
	padding-inline-start: var(--photon-space-lg);
	padding-block-start: var(--photon-space-2xl);
}

@media (min-width: 48em) {
	.photon-model__spine {
		--photon-model-indent: var(--photon-space-2xl);
		padding-inline-start: var(--photon-space-2xl);
	}
}

.photon-model__spine::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 0 var(--photon-space-3xl);
	inline-size: var(--photon-hairline);
	background-color: var(--photon-border-light-decor);
	transform-origin: top center;
	transition: transform var(--photon-dur-signature) var(--photon-ease-align);
}

/*
 * Die eigentliche Signaturbewegung dieser Sektion: die Kante, an der alles
 * haengt, zieht sich beim Eintritt herunter, die Abgriffe folgen nach rechts.
 * Pseudo-Elemente koennen keine Klasse tragen — deshalb steht der
 * Vorzustand hier und nicht ueber .photon-anim-y.
 */
.photon-js .photon-observe:not(.is-aligned) .photon-model__spine::before {
	transform: scaleY(0);
}

.photon-model__stage::before,
.photon-model__node::before {
	transition: transform var(--photon-dur-reveal) var(--photon-ease-align);
}

.photon-js .photon-observe:not(.is-aligned) .photon-model__stage::before,
.photon-js .photon-observe:not(.is-aligned) .photon-model__node::before {
	transform: scaleX(0);
}

/* Gestaffelt, damit die Abgriffe der Reihe nach ankommen statt gleichzeitig. */
.photon-model__stage:nth-child(1)::before { transition-delay: 240ms; }
.photon-model__stage:nth-child(2)::before { transition-delay: 320ms; }
.photon-model__stage:nth-child(3)::before { transition-delay: 400ms; }
.photon-model__stage:nth-child(4)::before { transition-delay: 480ms; }
.photon-model__stage:nth-child(5)::before { transition-delay: 560ms; }

/*
 * Der Knoten ist ein Label im Schema, keine zweite Ueberschrift. Er stand
 * auf 72 px, die Sektionsueberschrift 400 px darueber auf 48 px — mit
 * demselben Wort. Eine Hierarchie-Inversion, gemessen und behoben.
 */
.photon-model__node {
	margin: 0 0 var(--photon-space-2xl);
	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);
	color: var(--photon-text-on-light);
	position: relative;
	max-inline-size: none;
}

.photon-model__node::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(var(--photon-model-indent, var(--photon-space-lg)) * -1);
	inset-block-start: 0.55em;
	inline-size: var(--photon-model-indent, var(--photon-space-lg));
	block-size: 2px;
	background-color: var(--photon-tertiary);
	transform-origin: left center;
}

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

.photon-model__stage {
	position: relative;
	display: grid;
	gap: var(--photon-space-xs) var(--photon-gutter);
	padding-block: var(--photon-space-lg);
	border-block-end: var(--photon-hairline) solid var(--photon-border-light-decor);
}

.photon-model__stage::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(var(--photon-model-indent, var(--photon-space-lg)) * -1);
	inset-block-start: calc(var(--photon-space-lg) + 0.6em);
	inline-size: var(--photon-model-indent, var(--photon-space-lg));
	block-size: var(--photon-hairline);
	background-color: var(--photon-border-light-decor);
	transform-origin: left center;
}

@media (min-width: 64em) {
	.photon-model__stage {
		grid-template-columns: 3rem 12rem minmax(0, 1fr);
		align-items: baseline;
	}
}

.photon-model__stage-no {
	font-family: var(--photon-font-mono);
	font-size: var(--photon-fs-label-md);
	font-weight: 400;
	letter-spacing: var(--photon-ls-label-md);
	color: var(--photon-text-muted-light);
	font-variant-numeric: tabular-nums;
}

.photon-model__stage-term {
	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: 1.4;
	text-transform: uppercase;
	color: var(--photon-text-on-light);
	/* "KOORDINATION" in Mono-Versalien misst bei Textzoom mehr als die Spur. */
	overflow-wrap: anywhere;
}

.photon-model__stage-text {
	margin: 0;
	font-size: var(--photon-fs-body-md);
	line-height: var(--photon-lh-body);
	color: var(--photon-text-muted-light);
	/*
	 * 58ch liess bei 1440 px jede der fuenf Zeilen exakt zweizeilig brechen.
	 * Fuenf gleich lange Bloecke mit gleichem Anfang untereinander sind das
	 * visuelle Signal fuer ausgefuelltes Schema — unabhaengig vom Inhalt.
	 */
	max-inline-size: 74ch;
}

.photon-model__exit {
	margin-block-start: var(--photon-space-xl);
	max-inline-size: none;
}

.photon-model__note {
	margin-block-start: var(--photon-space-2xl);
	max-inline-size: var(--photon-measure);
	color: var(--photon-text-muted-light);
	font-size: var(--photon-fs-body-sm);
}

/* ==========================================================================
   05 — Abschluss und Aktion
   ========================================================================== */

.photon-cta__head {
	display: grid;
	gap: var(--photon-space-lg);
	margin-block-end: var(--photon-space-3xl);
}

.photon-cta__headline {
	margin: 0;
	font-size: var(--photon-fs-xl);
	line-height: var(--photon-lh-xl);
	letter-spacing: var(--photon-ls-xl);
	max-inline-size: 18ch;
}

@media (min-width: 64em) {
	.photon-cta__head { grid-column: 1 / span 8; }
	.photon-cta__selector { grid-column: 1 / span 7; }
	.photon-cta__action { grid-column: 9 / span 4; }
}

/* --- Der ausgerichtete Index, kein Karten-Grid ----------------------------- */

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

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

.photon-selector__button {
	inline-size: 100%;
	min-block-size: 3.5rem;
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	align-items: baseline;
	gap: var(--photon-space-md);
	padding-block: var(--photon-space-lg);
	padding-inline: 0;
	background: transparent;
	border: 0;
	border-radius: var(--photon-radius-xs);
	text-align: start;
	cursor: pointer;
	color: var(--photon-text-on-light);
	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);
	position: relative;
	transition: color var(--photon-dur-state) var(--photon-ease-align);
}

.photon-selector__no {
	font-family: var(--photon-font-mono);
	font-size: var(--photon-fs-label-md);
	font-weight: 500;
	letter-spacing: var(--photon-ls-label-md);
	/*
	 * Der Selektor ist das einzige echte Bedienelement der Seite und trug im
	 * Ruhezustand kein Interaktionssignal — vier Zeilen mit Haarlinien sehen
	 * aus wie eine Liste, nicht wie eine Auswahl. Die Ziffer traegt jetzt den
	 * Akzent, und unten steht eine kurze Ruhelinie, die sich bei Auswahl
	 * ueber die volle Zeilenbreite streckt.
	 */
	color: var(--photon-tertiary-on-light);
	font-variant-numeric: tabular-nums;
}

/* Der ausgewaehlte Eintrag wird durch eine optische Linie markiert,
   nicht durch eine Flaeche. */
.photon-selector__button::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: calc(var(--photon-hairline) * -1);
	block-size: 2px;
	background-color: var(--photon-tertiary);
	transform: scaleX(0.06);
	transform-origin: left center;
	transition: transform var(--photon-dur-state) var(--photon-ease-align);
}

.photon-selector__button:hover::after,
.photon-selector__button:focus-visible::after,
.photon-selector__button[aria-pressed="true"]::after {
	transform: scaleX(1);
}

/*
 * Die gewaehlte Zeile bekommt eine Marke ueber ihre volle Hoehe. Eine
 * 2-px-Unterlinie allein war zu leise: Vor dem Klick las sich die Liste wie
 * ein Inhaltsverzeichnis, nach dem Klick wie eine Liste, in der sich nichts
 * veraendert hat.
 */
.photon-selector__button::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(var(--photon-space-lg) * -1);
	inset-block: var(--photon-space-sm);
	inline-size: 2px;
	background-color: var(--photon-tertiary);
	transform: scaleY(0);
	transform-origin: center;
	transition: transform var(--photon-dur-state) var(--photon-ease-align);
}

.photon-selector__button[aria-pressed="true"]::before {
	transform: scaleY(1);
}

.photon-selector__item {
	padding-inline-start: var(--photon-space-lg);
}

.photon-cta__action {
	/*
	 * Der Sprung nach der Auswahl setzte den naechsten Schritt exakt auf die
	 * Unterkante des Bildschirms. Der Rand haelt ihn davon ab.
	 */
	scroll-margin-block: 6rem 2rem;
	display: grid;
	gap: var(--photon-space-lg);
	align-content: start;
	justify-items: start;
	padding-block-start: var(--photon-space-lg);
}

/*
 * Der Antworttext ist die Belohnung der Interaktion und stand schwaecher als
 * die Optionslabels darueber. Er traegt jetzt die primaere Textfarbe und die
 * groessere Stufe. Die reservierte Mindesthoehe gilt nur auf Desktop — auf
 * schmalen Schirmen schob sie den naechsten Schritt aus dem Bild.
 */
.photon-cta__response {
	margin: 0;
	font-size: var(--photon-fs-body-lg);
	line-height: 1.5;
	color: var(--photon-text-on-light);
	max-inline-size: 34ch;
}

@media (min-width: 64em) {
	.photon-cta__response {
		min-block-size: 6em;
	}
}

/* ==========================================================================
   Druck
   ========================================================================== */

@media print {
	.photon-header,
	.photon-nav-toggle,
	.photon-mobile-nav,
	.photon-environment-banner {
		display: none;
	}
}