/*
 * Inhalte, die die Redaktion schreibt, und Vorlagen des Themes. Gilt nur außerhalb der Sections.
 *
 * - Fließtext: Blöcke, die direkt im Inhalt stehen und keine Section sind (Absatz, Überschrift, Liste, Zitat, Bild,
 *   Galerie, Tabelle, Video, Audio, Einbettung, Buttons …), stehen in Lesebreite und bekommen Abstände.
 *   Sections (.wf-section, bx-…) bleiben unberührt; Seiten können beides mischen.
 * - Vorlagen: Beitrag (wf-post), Übersicht/Archiv/Suche (wf-archive, wf-posts, wf-card), 404 (wf-not-found).
 * - Bedienung: sichtbarer Fokus für die Tastatur.
 *
 * Gestaltet wird über Tokens; Seiten überschreiben sie in assets/site.css (z. B. --wf-content-width).
 */
:root {
	--wf-content-width: 70rem;
	--wf-content-width-wide: 110rem;
	--wf-prose-gap: var(--wf-space-s);
	--wf-content-edge: var(--wf-space-4xl);
	--wf-link-color: var(--wf-color-primary);
}

/* ---------------------------------------------------------------- Fließtext */

/* Lose Blöcke im Inhalt (im Editor: Kinder des Wurzel-Containers) */
:root :where(:is(.wp-block-post-content, .is-root-container) > :not(.wf-section, [class*="bx-"])) {
	width: min(var(--wf-content-width), 100% - 2 * var(--wf-section-space-horizontal));
	margin-inline: auto;
	line-height: 1.6;
}
:root :where(:is(.wp-block-post-content, .is-root-container) > :is(.alignwide)) { width: min(var(--wf-content-width-wide), 100% - 2 * var(--wf-section-space-horizontal)); }
:root :where(:is(.wp-block-post-content, .is-root-container) > :is(.alignfull)) { width: 100%; }

/* Abstände zwischen losen Blöcken; Überschriften mit mehr Luft davor */
:root :where(:is(.wp-block-post-content, .is-root-container) > :not(.wf-section, [class*="bx-"]) + :not(.wf-section, [class*="bx-"])) { margin-block-start: var(--wf-prose-gap); }
:root :where(:is(.wp-block-post-content, .is-root-container) > :is(h2, h3, h4, h5, h6):not(:first-child)) { margin-block-start: var(--wf-space-2xl); }
:root :where(:is(.wp-block-post-content, .is-root-container) > :is(h2, h3, h4, h5, h6) + *) { margin-block-start: var(--wf-space-xs); }
:root :where(:is(.wp-block-post-content, .is-root-container) > :is(figure, .wp-block-image, .wp-block-gallery, .wp-block-video, .wp-block-embed, .wp-block-table, .wp-block-quote, .wp-block-separator)) { margin-block: var(--wf-space-xl); }

/* Rand zu Kopf, Fuß und Sections, wenn eine Seite (page.html) mit Fließtext beginnt oder endet */
:root :where(main > .wp-block-post-content > :not(.wf-section, [class*="bx-"]):first-child, .wp-block-post-content > .wf-section + :not(.wf-section, [class*="bx-"])) { margin-block-start: var(--wf-content-edge); }
:root :where(main > .wp-block-post-content > :not(.wf-section, [class*="bx-"]):last-child, .wp-block-post-content > :not(.wf-section, [class*="bx-"]):has(+ .wf-section)) { margin-block-end: var(--wf-content-edge); }

/* Links im Text */
:root :where(:is(.wp-block-post-content, .is-root-container) > :not(.wf-section, [class*="bx-"]) a:not([class])) {
	color: var(--wf-link-color); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
:root :where(:is(.wp-block-post-content, .is-root-container) > :not(.wf-section, [class*="bx-"]) a:not([class]):hover) { text-decoration-thickness: 2px; }

/* Listen (Listen-Block; Listen in Sections sind keine wp-block-list) */
:root :where(ul.wp-block-list, ol.wp-block-list) { list-style: revert; padding-inline-start: 1.4em; }
:root :where(.wp-block-list li + li) { margin-block-start: .4em; }
:root :where(.wp-block-list .wp-block-list) { margin-block-start: .4em; }

/* Zitat */
:root :where(.wp-block-quote) { padding-inline-start: var(--wf-space-m); border-inline-start: 3px solid var(--wf-color-primary); font-size: var(--wf-text-l); line-height: 1.45; }
:root :where(.wp-block-quote > * + *) { margin-block-start: var(--wf-space-xs); }
:root :where(.wp-block-quote cite) { display: block; margin-block-start: var(--wf-space-s); font-size: var(--wf-text-s); font-style: normal; color: var(--wf-color-neutral-600); }

/* Bilder, Bildunterschriften, Ausrichtung (die Core-Stile des Bild-Blocks sind abgeschaltet, siehe inc/assets.php) */
:root :where(.wp-block-image:not(.wf-figure)) { margin-inline: auto; }
:root :where(.wp-block-image:not(.wf-figure) img) { display: block; width: 100%; border-radius: var(--wf-radius-s); }
:root :where(.wp-block-image.aligncenter) { text-align: center; }
:root :where(.wp-block-image.aligncenter img) { width: auto; margin-inline: auto; }
:root :where(figcaption, .wp-element-caption) { margin-block-start: var(--wf-space-xs); font-size: var(--wf-text-s); line-height: 1.4; color: var(--wf-color-neutral-600); }
:root :where(.wp-block-image:is(.alignleft, .alignright, .aligncenter) img) { width: auto; }
@media (min-width: 768px) {
	/* Bild am Rand der Lesebreite, Text fließt herum */
	:root :where(:is(.wp-block-post-content, .is-root-container) > .alignleft) { float: left; width: auto; max-width: min(50%, var(--wf-content-width) / 2); margin: .3em var(--wf-space-m) var(--wf-space-s) max(var(--wf-section-space-horizontal), (100% - var(--wf-content-width)) / 2); }
	:root :where(:is(.wp-block-post-content, .is-root-container) > .alignright) { float: right; width: auto; max-width: min(50%, var(--wf-content-width) / 2); margin: .3em max(var(--wf-section-space-horizontal), (100% - var(--wf-content-width)) / 2) var(--wf-space-s) var(--wf-space-m); }
}
:root :where(:is(.wp-block-post-content, .is-root-container) > :is(h2, h3, h4, h5, h6, .wp-block-separator, .wf-section)) { clear: both; }

/* Tabelle, Trenner, Medien */
:root :where(.wp-block-table table) { width: 100%; border-collapse: collapse; font-size: var(--wf-text-s); }
:root :where(.wp-block-table :is(th, td)) { padding: var(--wf-space-xs) var(--wf-space-s); border-bottom: 1px solid var(--wf-color-neutral-trans-20); text-align: start; vertical-align: top; }
:root :where(.wp-block-table th) { font-weight: 700; color: var(--wf-color-neutral-950); }
:root :where(.wp-block-separator) { border: 0; border-top: 1px solid var(--wf-color-neutral-trans-20); }
:root :where(.wp-block-video video, .wp-block-audio audio) { display: block; width: 100%; }
:root :where(.wp-block-embed iframe) { max-width: 100%; }

/* Buttons außerhalb der Sections (Sections bringen .wf-button mit) */
:root :where(.wp-block-buttons:not(.wf-buttons)) { display: flex; flex-wrap: wrap; gap: var(--wf-space-s); }
:root :where(.wp-block-button:not(.wf-button) > .wp-block-button__link) {
	display: inline-flex; align-items: center; justify-content: center; padding: var(--wf-space-s) var(--wf-space-l);
	border-radius: var(--wf-button-radius, var(--wf-radius-s)); font-size: var(--wf-text-s); font-weight: 600; line-height: 1.2; letter-spacing: .5px;
	text-decoration: none; background: var(--wf-color-neutral-950); color: #fff; border: 1px solid var(--wf-color-neutral-950); }
:root :where(.wp-block-button.is-style-outline:not(.wf-button) > .wp-block-button__link) { background: transparent; color: var(--wf-color-neutral-950); }

/* Code */
:root :where(code, kbd, pre) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
:root :where(pre) { overflow-x: auto; padding: var(--wf-space-s); border-radius: var(--wf-radius-s); background: var(--wf-color-neutral-25); }

/* ---------------------------------------------------------------- Vorlagen */

/* Beitrag (templates/single.html) */
:root :where(.wf-post) { display: flex; flex-direction: column; padding-block: var(--wf-section-space-vertical); }
:root :where(.wf-post__head, .wf-post__foot) { width: min(var(--wf-content-width), 100% - 2 * var(--wf-section-space-horizontal)); margin-inline: auto; }
:root :where(.wf-post__head) { display: flex; flex-direction: column; gap: var(--wf-space-s); }
:root :where(.wf-post__image) { width: min(var(--wf-content-width-wide), 100% - 2 * var(--wf-section-space-horizontal)); margin: var(--wf-space-2xl) auto 0; }
:root :where(.wf-post__image img) { width: 100%; aspect-ratio: var(--wf-ratio-widescreen); object-fit: cover; border-radius: var(--wf-radius-m); }
:root :where(.wf-post__content) { margin-block-start: var(--wf-space-2xl); }
:root :where(.wf-post__foot) { display: flex; flex-direction: column; gap: var(--wf-space-l); margin-block-start: var(--wf-space-3xl); padding-block-start: var(--wf-space-l); border-top: 1px solid var(--wf-color-neutral-trans-20); }
:root :where(.wf-post__nav) { display: flex; justify-content: space-between; gap: var(--wf-space-l); font-size: var(--wf-text-s); }
:root :where(.wf-post__nav a) { font-weight: 600; text-decoration: none; }
:root :where(.wf-post__next) { margin-inline-start: auto; text-align: end; }

/* Kategorien, Schlagworte, Datum */
:root :where(.wf-post__terms, .wf-post__tags, .wf-card__terms) { display: flex; flex-wrap: wrap; gap: var(--wf-space-2xs); font-size: var(--wf-text-xs); }
:root :where(:is(.wf-post__terms, .wf-post__tags, .wf-card__terms) a) { padding: .3em .8em; border: 1px solid currentColor; border-radius: var(--wf-radius-full); text-decoration: none; }
:root :where(:is(.wf-post__terms, .wf-post__tags, .wf-card__terms) .wp-block-post-terms__separator) { display: none; }
:root :where(.wf-post__date, .wf-card__date) { font-size: var(--wf-text-s); color: var(--wf-color-neutral-600); }

/* Übersicht, Archiv, Suche */
:root :where(.wf-archive__container) { gap: var(--wf-space-l); }
:root :where(.wf-archive__description) { max-width: var(--wf-content-width); }
:root :where(.wf-posts) { display: flex; flex-direction: column; gap: var(--wf-space-2xl); width: 100%; }
:root :where(.wf-posts__items) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(28rem, 100%), 1fr)); gap: var(--wf-grid-gap); margin: 0; padding: 0; list-style: none; }
:root :where(.wf-card) { display: flex; flex-direction: column; gap: var(--wf-space-xs); height: 100%; }
:root :where(.wf-card__image) { margin-block-end: var(--wf-space-xs); }
:root :where(.wf-card__image img) { width: 100%; aspect-ratio: var(--wf-ratio-classic); object-fit: cover; border-radius: var(--wf-radius-s); }
:root :where(.wf-card__title) { font-size: var(--wf-card-title-size); }
:root :where(.wf-card__title a) { text-decoration: none; }
:root :where(.wf-card__title a:hover) { text-decoration: underline; }
:root :where(.wf-card__excerpt) { font-size: var(--wf-text-s); }
:root :where(.wf-card__excerpt .wp-block-post-excerpt__more-text) { display: none; }
:root :where(.wf-pagination) { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--wf-space-xs); font-size: var(--wf-text-s); }
:root :where(.wf-pagination a, .wf-pagination .page-numbers) { padding: .4em .8em; border-radius: var(--wf-radius-s); text-decoration: none; }
:root :where(.wf-pagination .page-numbers.current) { background: var(--wf-color-neutral-950); color: #fff; }

/* Suchformular (Core-Block) */
:root :where(.wf-search-form) { width: min(60rem, 100%); }
:root :where(.wf-search-form .wp-block-search__inside-wrapper) { display: flex; gap: var(--wf-space-2xs); }
:root :where(.wf-search-form .wp-block-search__input) { flex: 1; min-width: 0; padding: var(--wf-space-xs) var(--wf-space-s); border: 1px solid var(--wf-color-neutral-trans-30); border-radius: var(--wf-radius-s); font: inherit; }
:root :where(.wf-search-form .wp-block-search__button) { margin: 0; padding: var(--wf-space-xs) var(--wf-space-m); border-radius: var(--wf-radius-s); background: var(--wf-color-neutral-950); color: #fff; font-weight: 600; }

/* 404 */
:root :where(.wf-not-found__container) { gap: var(--wf-space-m); }

/* ---------------------------------------------------------------- Bedienung */

/* Die Grundstile nehmen Buttons den Umriss; Tastaturfokus muss sichtbar bleiben */
:root :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--wf-color-primary); outline-offset: 2px; }