/*
 * Exostruct – Grundlagen
 *
 * Kein globales `*`-Reset: Regeln auf `*` lassen sich von Web Components und
 * niedrigeren Kaskadenschichten nicht mehr überschreiben. Stattdessen gezielt
 * die Elemente, die es betrifft.
 */

:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) {
	margin: 0;
}

:where(ul[role="list"], ol[role="list"]) {
	list-style: none;
	padding-inline-start: 0;
}

:where(img, picture, video, canvas, svg) {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
}

/*
 * `hidden` bleibt versteckt - auch bei Bildern.
 *
 * Die Regel darüber steht in `:where()` und hat damit keine Spezifität, aber
 * sie ist eine Autorenregel: Sie schlägt `[hidden] { display: none }` aus dem
 * Browser-Stylesheet trotzdem, denn Autorenregeln gehen vor. Ein `<img hidden>`
 * war dadurch sichtbar.
 *
 * Aufgefallen in der Warenkorb-Seitenleiste: WooCommerce legt dort **zwei**
 * Vorschaubilder je Zeile an - eines mit Verweis auf das Produkt, eines ohne,
 * für Artikel, die nicht im Katalog stehen - und blendet das jeweils
 * unpassende mit `hidden` aus. Beide blieben sichtbar, das Bild erschien
 * doppelt (gemeldet am 2026-08-18). Auf der Warenkorb-Seite selbst fiel es
 * nicht auf, weil dort dieselbe Zelle in einer Tabellenspalte mit fester Höhe
 * sitzt.
 *
 * Die Regel steht hier und nicht bei WooCommerce: `hidden` ist eine Aussage
 * des Dokuments, kein Merkmal eines Shops.
 */
[hidden] {
	display: none;
}

/* Formularelemente erben Typografie nicht von allein. */
:where(input, button, textarea, select) {
	font: inherit;
	color: inherit;
}

:where(textarea) {
	resize: vertical;
}

:where(html) {
	box-sizing: border-box;
	scroll-behavior: smooth;
	/* Ankerziele verschwinden sonst hinter dem Kopfbereich. */
	scroll-padding-block-start: 6rem;
	-webkit-text-size-adjust: 100%;
}

:where(*, *::before, *::after) {
	box-sizing: inherit;
}

:where(body) {
	background-color: var(--color-surface);
	color: var(--color-text);
	line-height: var(--line-height-body);
	min-block-size: 100dvh;
	text-rendering: optimizespeed;
	-webkit-font-smoothing: antialiased;
}

/* --- Typografie --------------------------------------------------- */
:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

:where(p, li, dd, blockquote) {
	text-wrap: pretty;
	/* Lange URLs und Werkstoffbezeichnungen sprengen sonst das Layout. */
	overflow-wrap: break-word;
}

/* Fließtext bleibt lesbar breit. Brand Identity §11.7: 65–72ch. */
:where(.entry-content, .wp-block-post-content) > :where(p, ul, ol, blockquote, dl) {
	max-inline-size: 68ch;
}

:where(strong, b) {
	font-weight: 600;
}

:where(small) {
	font-size: var(--wp--preset--font-size--sm);
}

/* Technische Werte: Ziffern gleicher Breite, damit Tabellen ruhig wirken. */
:where(table, .exo-numeric) {
	font-variant-numeric: tabular-nums;
}

/* --- Links -------------------------------------------------------- */
:where(a) {
	color: var(--color-link);
	text-underline-offset: 0.2em;
	text-decoration-thickness: max(0.06em, 1px);
}

:where(a):hover {
	color: var(--color-text);
}

/* --- Fokus --------------------------------------------------------
 * Nur :focus-visible, damit Mausklicks keinen Ring hinterlassen.
 * outline statt box-shadow, damit es im Kontrastmodus erhalten bleibt.
 */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- Bedienbare Flächen -------------------------------------------- */
:where(button, [type="button"], [type="submit"], [type="reset"], summary) {
	min-block-size: var(--touch-target);
	cursor: pointer;
}

@media (pointer: coarse) {
	:where(a, button, summary, [type="button"], [type="submit"]) {
		min-block-size: 3rem;
	}
}

/* --- Medien -------------------------------------------------------- */
/*
 * Bewusst keine Platzhalterfarbe auf img: Sie liegt hinter jedem
 * transparenten Bild und erzeugte im Fußbereich einen hellen Kasten hinter
 * der weißen Wortmarke. Layoutstabilität kommt über width/height und
 * aspect-ratio, nicht über eine Hintergrundfarbe.
 */
:where(figure) img {
	border-radius: var(--radius-md);
}

/* --- Auswahl und Bildlauf ------------------------------------------ */
::selection {
	background-color: var(--color-brand);
	color: var(--color-text-on-brand);
}

/* --- Kontrastmodus -------------------------------------------------
 * Im erzwungenen Farbmodus entfallen Hintergründe und Schatten. Wo sie
 * Bedeutung tragen, wird sie durch einen Rahmen ersetzt.
 */
@media (forced-colors: active) {
	:where(a, button, summary, [tabindex]):focus-visible {
		outline-color: Highlight;
	}

	:where(.wp-block-button__link) {
		border: 1px solid ButtonText;
	}
}