/*
 * Exostruct – Hilfsklassen
 *
 * Bewusst wenige. Eine Hilfsklasse entsteht erst, wenn dieselbe Anforderung
 * an mindestens drei Stellen auftritt und keine Komponente dafür passt.
 */

/* Nur für Screenreader – nicht `display: none`, das würde auch dort verbergen. */
.screen-reader-text,
.exo-visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Introtext, schmaler gesetzt als Fließtext. Brand Identity §11.7. */
/*
 * WordPress zentriert Kinder eines eingeschränkten Layouts mit
 * `margin-left: auto !important; margin-right: auto !important`. Gegen ein
 * `!important` hilft keine Spezifität – nur ein eigenes `!important` auf
 * höherer Spezifität. Das ist hier bewusst gesetzt und die einzige Stelle im
 * Theme, an der `!important` steht.
 */
p.exo-lead,
/*
 * Der Auszugsblock trägt die Klasse an seinem Rahmen, den Text aber in einem
 * eigenen Absatz darin. Ohne diesen zweiten Selektor bliebe ein als Lead
 * gekennzeichneter Auszug auf Fließtextgröße – die Auszeichnung im Template
 * wäre wirkungslos.
 */
div.exo-lead > .wp-block-post-excerpt__excerpt {
	font-size: var(--wp--preset--font-size--lg);
	color: var(--color-text-secondary);
	max-inline-size: 56ch;

	/*
	 * Der Startrand ist nicht schlicht `0`, sondern der Abstand, den ein
	 * eingeschränktes Layout ohnehin vor seinen Container legt.
	 *
	 * Mit `0` begann der Lead an der Polsterkante der Seite und damit sichtbar
	 * weiter links als jede Überschrift daneben, die auf der Containerkante
	 * sitzt. Die Rechnung ergibt genau diesen Versatz und wird zu `0`, sobald
	 * das Elternelement schmaler als der Container ist – also überall dort, wo
	 * der Lead im Fließlayout oder in einer Rasterspalte steht.
	 */
	margin-inline: max(0px, (100% - min(var(--container-default), 100%)) / 2) auto !important;
}

/*
 * Überzeile. Der einzige Ort, an dem Versalien zulässig sind.
 *
 * Gesetzt in der technischen Schrift, nicht im Fließtextschnitt: Die Website
 * unterscheidet durchgehend zwei Stimmen – Fließtext für alles, was jemand
 * sagt, tabellarische Schrift für alles, was sich messen oder bezeichnen
 * lässt. Eine Abschnittsmarke bezeichnet, sie formuliert nicht. Dieselbe
 * Unterscheidung trägt Bauräume, Materialkürzel, Schrittzahlen und Kennwerte.
 */
.exo-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: var(--line-height-ui);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

/* Lange Archive: nicht sichtbarer Inhalt wird erst bei Bedarf gerendert. */
.exo-defer-render {
	content-visibility: auto;
	contain-intrinsic-size: auto 24rem;
}

/* Markiert Demo-Inhalte, solange fachliche Freigaben fehlen (AGENTS.md §9.6). */
/*
 * Demo-Inhalte bleiben erkennbar, sehen aber nicht aus wie ein Eingabefeld.
 * Ein umlaufender Rahmen wurde beim ersten Entwurf als Formularfeld gelesen.
 */
[data-placeholder="content"] {
	border-inline-start: 2px dashed var(--color-border-strong);
	padding-inline-start: var(--wp--preset--spacing--30);
}

[data-placeholder="image"] {
	outline: 1px dashed var(--color-border-strong);
	outline-offset: 2px;
}

.wp-admin [data-placeholder]::before {
	content: "Demo";
	display: inline-block;
	margin-inline-end: 0.5em;
	padding-inline: 0.4em;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	background-color: var(--wp--preset--color--brand-100);
	color: var(--color-text);
	border-radius: var(--radius-sm);
}