/*
 * 01-base.css — Grundlagen: Typografie, Fokus, Skip-Link, Umgebungsbanner.
 *
 * Kein Reset-Framework. WordPress bringt bereits Normalisierung mit;
 * hier steht nur, was das Designsystem tatsaechlich braucht.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/*
	 * Die Seite ist hell entworfen und hat keine dunkle Variante. Ohne diese
	 * Angabe rendern Browser bei prefers-color-scheme: dark die Scrollbalken
	 * und Formularelemente dunkel — auf einer hellen Seite.
	 */
	color-scheme: light;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Sprungziele duerfen nicht unter dem festen Kopfbereich landen. */
	scroll-padding-top: calc(var(--photon-header-height) + var(--photon-banner-height) + var(--photon-space-lg));
}

body {
	margin: 0;
	background-color: var(--photon-surface-light, #FAF8F3);
	color: var(--photon-text-on-light, #111216);
	font-family: var(--photon-font-sans);
	font-size: var(--photon-fs-body-md);
	line-height: var(--photon-lh-body);
	font-weight: 400;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	/*
	 * Deutsche Komposita sind lang: "Gewerbedachfläche" misst bei doppelter
	 * Textgroesse mehr als eine 294 px breite Spalte. Ohne diese Zeile
	 * schiebt ein einziges Wort die Seite auf. Sie greift erst, wenn eine
	 * Zeile sonst ueberliefe — normaler Satz bleibt unberuehrt.
	 */
	overflow-wrap: break-word;
}

/* --- Ueberschriften ------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--photon-font-sans);
	font-weight: 500;
	margin-block: 0;
	text-wrap: balance;
	/*
	 * Gemessen bei 320 px: "Energieprojekte." misst bei 44 px 300 px und der
	 * Inhaltsbereich 272 px. Der Hero traegt overflow: hidden — das Wort waere
	 * also nicht ueberlaufen, sondern unsichtbar abgeschnitten. WCAG 1.4.10
	 * verlangt 320 px ohne Informationsverlust.
	 *
	 * Silbentrennung ist hier die richtige Loesung und nicht nur die
	 * bequemste: Deutsche Komposita trennen sinnvoll ("Energie-projekte"),
	 * und DESIGN.md verbietet ausdruecklich Einzelwort-Umbrueche, die
	 * Bedeutung zerstoeren — nicht die Trennung selbst.
	 * hyphens: auto braucht das lang-Attribut; WordPress setzt lang="de-DE".
	 */
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
	overflow-wrap: break-word;
}

/* Ab Tablet ist genug Platz; dort wird nicht getrennt. */
@media (min-width: 30em) {
	h1, h2, h3, h4, h5, h6 {
		hyphens: manual;
	}
}

h1 {
	font-size: var(--photon-fs-display);
	line-height: var(--photon-lh-display);
	letter-spacing: var(--photon-ls-display);
}

h2 {
	font-size: var(--photon-fs-lg);
	line-height: var(--photon-lh-lg);
	letter-spacing: var(--photon-ls-lg);
}

h3 {
	font-size: var(--photon-fs-md);
	line-height: var(--photon-lh-md);
	letter-spacing: var(--photon-ls-md);
}

h4 {
	font-size: var(--photon-fs-sm);
	line-height: var(--photon-lh-sm);
	letter-spacing: var(--photon-ls-sm);
}

p {
	margin-block: 0;
	max-width: var(--photon-measure);
	text-wrap: pretty;
}

/* --- Links --------------------------------------------------------------- */

a {
	color: var(--photon-tertiary-on-light);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

a:hover {
	text-decoration-thickness: 2px;
}

/* --- Fokus ---------------------------------------------------------------
 * Doppelter Ring: der Versatz zeigt die Untergrundfarbe zwischen Element und
 * Ring. Damit liegt der Ring nie direkt an einer gleichfarbigen Flaeche an —
 * auch nicht am violetten CTA.
 */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--photon-focus-width) solid var(--photon-focus);
	outline-offset: var(--photon-focus-offset);
	border-radius: var(--photon-radius-xs);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
	outline: none;
}

/* --- Skip-Link ------------------------------------------------------------
 * Serverseitig gerendert, deutsch, ohne JavaScript vorhanden.
 */

.photon-skip-link {
	position: absolute;
	left: var(--photon-space-lg);
	top: var(--photon-space-lg);
	z-index: calc(var(--photon-z-overlay) + 10);
	transform: translateY(-200%);
	background-color: var(--photon-primary);
	color: var(--photon-text-on-dark);
	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;
	text-decoration: none;
	padding: var(--photon-space-md) var(--photon-space-lg);
	border-radius: var(--photon-radius-xs);
}

.photon-skip-link:focus {
	transform: translateY(0);
}

#photon-main:focus {
	outline: none;
}

/* --- Umgebungsbanner ------------------------------------------------------
 * Kein Zugriffsschutz, sondern eine Kennzeichnung. Er faellt auf einer
 * Produktionsinstanz von selbst weg, weil er an wp_get_environment_type()
 * haengt und nicht an einer Domain.
 */

.has-environment-banner {
	--photon-banner-height: 2.25rem;
}

.photon-environment-banner {
	position: relative;
	z-index: var(--photon-z-banner);
	background-color: var(--photon-primary);
	color: var(--photon-text-muted-dark);
	min-height: var(--photon-banner-height);
	display: flex;
	align-items: center;
	padding-inline: var(--photon-space-lg);
}

.photon-environment-banner__text {
	margin: 0;
	max-width: none;
	display: flex;
	align-items: center;
	gap: var(--photon-space-sm);
	font-family: var(--photon-font-mono);
	font-size: var(--photon-fs-label-md);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: var(--photon-lh-label);
	padding-block: var(--photon-space-xs);
}

.photon-environment-banner__marker {
	flex: 0 0 auto;
	inline-size: 1.5rem;
	block-size: 2px;
	background-color: var(--photon-cyan);
}

/* --- Bilder --------------------------------------------------------------- */

img,
video {
	max-inline-size: 100%;
	block-size: auto;
	display: block;
	border-radius: var(--photon-radius-none);
}

/* --- Nur fuer Hilfstechnik ------------------------------------------------ */

.photon-visually-hidden:not(:focus):not(:active) {
	clip-path: inset(50%);
	block-size: 1px;
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

/* --- Auswahlmarkierung ---------------------------------------------------- */

::selection {
	background-color: var(--photon-tertiary);
	color: var(--photon-text-on-dark);
}

/* --- Sprungziele -----------------------------------------------------------
 * Ein Anker verschiebt den Bildausschnitt, setzt aber je nach Browser nicht
 * den Fokus. Mit tabindex="-1" tut er es ueberall — und der Ring soll dabei
 * nicht um eine ganze Sektion laufen.
 */

.photon-section:focus {
	outline: none;
}

/* --- Windows-Kontrastmodus -------------------------------------------------
 * Dort werden alle Hintergrundfarben durch Systemfarben ersetzt. Damit
 * verschwinden genau die Elemente, die hier Zustand tragen: die optischen
 * Linien unter Navigationspunkten und Auswahlzeilen, der Pfeil am
 * Tertiaerlink und die Striche des Menue-Umschalters. WCAG 1.4.11 nimmt den
 * Kontrastmodus aus — der Funktionsverlust ist trotzdem real.
 */

@media (forced-colors: active) {
	.photon-nav__link::after,
	.photon-selector__button::after,
	.photon-selector__button::before,
	.photon-action__arrow,
	.photon-action--tertiary::after,
	.photon-environment-banner__marker {
		background-color: Highlight;
		forced-color-adjust: none;
	}

	.photon-nav-toggle__glyph span {
		background-color: ButtonText;
		forced-color-adjust: none;
	}

	.photon-rule,
	.photon-model__rail,
	.photon-model__spine::before,
	.photon-model__stage::before,
	.photon-model__node::before {
		background-color: CanvasText;
		forced-color-adjust: none;
	}

	.photon-action--primary {
		border: 2px solid ButtonText;
	}
}

/* --- Reduzierte Bewegung ---------------------------------------------------
 * Vollstaendig, kein Rueckfall auf langsamere Animation.
 */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}
}