/* =========================================================================
   Glaubwürdig – Design «Marginalie»

   Leitidee: Der Quellenapparat wird sichtbar. 31 von 44 Inhalten haben
   Fussnoten, bis zu 20 pro Artikel – bisher verschwinden sie am Seitenende.
   Hier stehen sie am rechten Rand, auf Höhe ihrer Textstelle. Das nutzt die
   leere Fläche eines breiten Bildschirms und macht aus dem Belegapparat ein
   sichtbares Merkmal statt einer Fussnote im Wortsinn.

   Zwei Schriftstimmen: Grotesk für Überschriften und Apparat (die prüfende
   Stimme), Serif für den Lesetext (die erzählende). Das ist der Gegensatz,
   von dem das Magazin handelt.
   ========================================================================= */

@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
	font-family: "Source Serif 4";
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	src: url("fonts/source-serif-4-latin-wght-italic.woff2") format("woff2-variations");
}

:root {
	--gw-paper:     #FBF8F3;
	--gw-paper-2:   #F4EFE4;
	--gw-ink:       #1B1917;
	--gw-ink-soft:  #6B6355;
	--gw-rule:      #D8CFBC;
	--gw-rule-firm: #B8AC93;
	--gw-blue:      #254B8E;
	--gw-blue-dark: #1B3A6B;

	/*
	 * Eine Schrift fuer die ganze Seite. Vorher stand hier Inter als
	 * Ueberschriftenschrift - geladen wurde sie aber nie, es gibt nur
	 * @font-face-Regeln fuer Source Serif. Auf Windows erschienen alle
	 * Ueberschriften deshalb in Segoe UI, der Systemschrift. Statt eine
	 * zweite Schriftdatei nachzuladen, tragen jetzt Groesse und Gewicht den
	 * Unterschied.
	 *
	 * Die beiden Namen bleiben getrennt, obwohl sie dasselbe enthalten: Sie
	 * markieren, welche Regel eine Ueberschrift meint und welche den
	 * Lesetext. Ein spaeterer Wechsel zu zwei Schriften ist damit eine
	 * einzige Zeile.
	 */
	--gw-serif:   "Source Serif 4", Charter, Georgia, "Times New Roman", serif;
	--gw-display: var(--gw-serif);

	/* Abgerundete Ecken: ein Wert fuer alles Bedienbare. */
	--gw-radius:     8px;
	--gw-radius-sm:  5px;

	--gw-text-col:   600px;
	--gw-note-col:   240px;
	--gw-note-gap:   56px;

	/* Theme-Presets: Helligkeit jeder Rolle bleibt erhalten. */
	--wp--preset--color--base:       #FBF8F3;
	--wp--preset--color--base-2:     #FFFFFF;
	--wp--preset--color--contrast:   #1B1917;
	--wp--preset--color--contrast-2: #6B6355;
	--wp--preset--color--contrast-3: #EDE6D8;
	--wp--preset--color--accent:     #F1EADC;
	--wp--preset--color--accent-2:   #C9B79A;
	--wp--preset--color--accent-3:   #254B8E;
	--wp--preset--color--accent-4:   #2F5D50;
	--wp--preset--color--accent-5:   #254B8E;

	--wp--preset--font-family--body:    var(--gw-serif);
	--wp--preset--font-family--heading: var(--gw-display);

	--wp--preset--font-size--small:    1rem;
	--wp--preset--font-size--medium:   1.1875rem;
	--wp--preset--font-size--large:    1.5rem;
	--wp--preset--font-size--x-large:  2rem;
	--wp--preset--font-size--xx-large: clamp(2.25rem, 1.4rem + 3.2vw, 3.375rem);

	--wp--style--global--wide-size: 940px;

	/*
	 * Abstandsskala.
	 *
	 * Twenty Twenty-Four ist grosszuegig: Stufe 50 ist min(6.5rem, 8vw), auf
	 * einem 1440er Bildschirm also 104 px. Diese Stufe steckt in den
	 * Abstandshaltern ueber jedem Seitentitel und in den Innenabstaenden der
	 * Fusszeile - dort gleich dreimal hintereinander. Gemessen auf /kontakt:
	 * 174 px Leere zwischen Kopfzeile und Titel, 384 px reiner Innenabstand in
	 * einer Fusszeile mit vier Zeilen Text.
	 *
	 * Die Skala behaelt ihre Abstufung, die grossen Stufen sind gedeckelt.
	 * Die Werte stehen an einer Stelle, statt an jedem Block einzeln - so
	 * bleiben die Abstaende untereinander im Verhaeltnis.
	 */
	--wp--preset--spacing--20: min(1.25rem, 2vw);
	--wp--preset--spacing--30: min(2rem, 3vw);
	--wp--preset--spacing--40: min(3rem, 4vw);
	--wp--preset--spacing--50: min(4rem, 5vw);
	--wp--preset--spacing--60: min(5.5rem, 7vw);
	--wp--preset--spacing--70: 2.5rem;
	--wp--preset--spacing--80: 3.5rem;
}

body {
	background-color: var(--gw-paper);
	color: var(--gw-ink);
	font-family: var(--gw-serif);
	font-size: 1.1875rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

.wp-site-blocks { background-color: var(--gw-paper); }

/* -------------------------------------------------------------------------
   Kopfzeile – eine echte, mit Linie und Ordnung statt drei loser Teile
   ------------------------------------------------------------------------- */

.wp-site-blocks > header {
	border-block-end: 1px solid var(--gw-rule);
	padding-block: 1.25rem 1.25rem;
	margin-block-end: 4rem;
	background: var(--gw-paper);
}

/*
 * Das Menue stand auf 0.9375rem (15 px) neben 19 px Fliesstext - ein zu
 * grosser Sprung, es wirkte wie Kleingedrucktes. 17 px ordnet sich dem
 * Lesetext weiterhin unter, ohne beilaeufig zu wirken. In der Fusszeile
 * bleibt das Menue klein; dort ist es Verzeichnis, nicht Wegweiser.
 */
.wp-block-navigation {
	font-family: var(--gw-display);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: 0.005em;
	gap: 1.75rem;
}

.wp-site-blocks > footer .wp-block-navigation {
	font-size: 0.9375rem;
}

.wp-block-navigation a { text-decoration: none; color: var(--gw-ink); }

.wp-block-navigation a:hover {
	color: var(--gw-blue);
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-thickness: 1px;
}

/* -------------------------------------------------------------------------
   Artikelkopf – der Titel dominiert, alles andere ordnet sich unter
   ------------------------------------------------------------------------- */

/*
 * Nur der Titel des Einzelbeitrags ist gross. In Uebersichten ist
 * .wp-block-post-title dieselbe Klasse - ohne diese Einschraenkung wurden
 * auch die Kacheltitel auf der Startseite riesig.
 */
h1.wp-block-post-title {
	font-family: var(--gw-display) !important;
	font-size: var(--wp--preset--font-size--xx-large) !important;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.028em;
	color: var(--gw-ink);
	text-wrap: balance;
	margin-block: 0.4em 0.5rem;
}

.wp-block-post-terms.taxonomy-category,
.wp-block-post-terms.taxonomy-category a {
	font-family: var(--gw-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gw-blue);
	text-decoration: none;
}

.wp-block-post-date,
.wp-block-post-author-name,
.wp-block-post-author {
	font-family: var(--gw-display);
	font-size: 0.875rem;
	color: var(--gw-ink-soft);
}

.wp-block-post-date a,
.wp-block-post-author-name a { color: inherit; text-decoration: none; }

/* -------------------------------------------------------------------------
   Überschriften – Grotesk, damit sie als eigene Stimme lesbar sind
   ------------------------------------------------------------------------- */

/*
 * Die Beitraege setzen Abschnitte teils als h2, teils als h3 - der
 * Ebenensprung aus dem Funktions-Inventar. Beide werden gleich behandelt,
 * damit die Gestaltung nicht davon abhaengt, welche Ebene jemand gewaehlt hat.
 */
.wp-block-post-content > h2,
.entry-content > h2,
.wp-block-post-content > h3,
.entry-content > h3 {
	font-family: var(--gw-display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: -0.018em;
	margin-block: 2.4em 0.7em;
	padding-block-start: 0.9rem;
	border-block-start: 2px solid var(--gw-blue);
	text-wrap: balance;
}

/* h4 bleibt die kleinere Stufe. */
.wp-block-post-content > h4,
.entry-content > h4 {
	font-family: var(--gw-display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.012em;
	margin-block: 1.8em 0.5em;
	border: 0;
	padding: 0;
}

.wp-block-post-content p,
.entry-content p { margin-block: 0 0.85em; }

.wp-block-post-content > .wp-block-spacer { height: 0 !important; min-height: 0 !important; }

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

.wp-block-post-content a:where(:not(.wp-element-button)),
.entry-content a:where(:not(.wp-element-button)),
.wp-block-post-excerpt a {
	color: var(--gw-blue);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 0.06em;
}

.wp-block-post-content a:hover, .entry-content a:hover { color: var(--gw-blue-dark); }

.wp-block-post-title a { color: inherit; text-decoration: none; }
.wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 0.12em; }

/* -------------------------------------------------------------------------
   Randnotizen – der Kern dieser Variante

   Ein kleines Skript kopiert jede Fussnote neben ihre Textstelle. Die
   ursprüngliche Liste bleibt im Markup und wird hier nur ausgeblendet;
   fällt das Skript aus, ist alles wie zuvor.
   ------------------------------------------------------------------------- */

sup.fn a,
.wp-block-post-content sup a,
.entry-content sup a {
	font-family: var(--gw-display);
	font-weight: 600;
	font-size: 0.7em;
	color: var(--gw-blue);
	text-decoration: none;
	padding-inline: 0.12em;
	scroll-margin-top: 2rem;
}

.gw-note {
	font-family: var(--gw-display);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--gw-ink-soft);
}

.gw-note b {
	color: var(--gw-blue);
	font-weight: 600;
	margin-inline-end: 0.35em;
}

.gw-note a { color: var(--gw-blue); }

@media (min-width: 1180px) {
	/*
	 * Der Textkörper rutscht nach links, damit die Randspalte Platz hat und
	 * der Lesetext trotzdem optisch mittig bleibt.
	 */
	.gw-has-notes .wp-block-post-content,
	.gw-has-notes .entry-content {
		position: relative;
	}

	/* Linke Kante und Breite setzt variant-1.js, gemessen am Textkoerper. */
	.gw-notes-rail {
		position: absolute;
		inset-block-start: 0;
		width: var(--gw-note-col);
		height: 100%;
		pointer-events: none;
	}

	.gw-notes-rail .gw-note {
		position: absolute;
		width: var(--gw-note-col);
		pointer-events: auto;
		padding-inline-start: 0.85rem;
		border-inline-start: 2px solid var(--gw-rule-firm);
		transition: border-color 0.15s ease;
	}

	.gw-notes-rail .gw-note:hover { border-inline-start-color: var(--gw-blue); }

	/* Die Liste am Ende wird überflüssig, sobald die Randnotizen stehen. */
	.gw-has-notes .wp-block-footnotes,
	.gw-has-notes .gw-footnotes-title { display: none; }
}

/* Schmalere Bildschirme: Apparat am Ende, wie gehabt, aber gestaltet. */
.gw-footnotes-title {
	font-family: var(--gw-display);
	font-size: 1.25rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	margin-block: 3rem 0.8rem;
	padding-block-start: 1rem;
	border-block-start: 2px solid var(--gw-blue);
}

.wp-block-footnotes {
	font-family: var(--gw-display);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--gw-ink-soft);
}

.wp-block-footnotes li { margin-block-end: 0.5em; scroll-margin-top: 2rem; }
.wp-block-footnotes li::marker { color: var(--gw-blue); font-weight: 600; }
.wp-block-footnotes a { color: var(--gw-blue); }

/* -------------------------------------------------------------------------
   Bilder, Zitate
   ------------------------------------------------------------------------- */

.wp-block-image { margin-block: 2.5rem; }
/*
 * Inhaltsbilder tragen dieselbe Rundung wie Knoepfe und Eingabefelder.
 * Vorher stand hier `border-radius: 0` und nahm den Bildern die Rundung,
 * die die Seite vorher schon hatte.
 *
 * `height: auto` gehoert zwingend dazu: Die Bilder tragen im HTML feste
 * width- und height-Attribute. Setzt eine Regel nur die Breite, zieht das
 * height-Attribut das Bild in die Laenge - genau daran litten die Portraets
 * auf /autoren und die Bilder auf /artikel.
 */
.wp-block-image img {
	border-radius: var(--gw-radius);
	height: auto;
}

/*
 * Die runde Bildvariante des Themes ergibt echte Kreise.
 *
 * `border-radius: 9999px` allein macht aus einem Querformat eine Ellipse und
 * aus einem fast quadratischen Portrait ein Ei - das waren die
 * «langgezogenen» Bilder auf der Startseite und unter /autoren. Erst ein
 * erzwungenes Seitenverhaeltnis von 1:1 mit `cover` schneidet mittig zu,
 * statt den Bildinhalt zu verzerren.
 */
.wp-block-image.is-style-rounded img,
.wp-block-image.is-style-rounded > a > img,
.wp-block-columns .wp-block-image.is-style-rounded img,
.wp-block-column .wp-block-image.is-style-rounded img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
	width: 100%;
	/*
	 * Ueber die volle Spaltenbreite wirkt der Kreis erschlagend und zieht
	 * mehr Aufmerksamkeit auf sich als der Text daneben. Gedeckelt bleibt er
	 * ein Blickfang, ohne den Abschnitt zu dominieren.
	 */
	max-width: 260px;
	height: auto;
	border-radius: 9999px;
}

/* Der gedeckelte Kreis steht mittig in seiner Spalte. */
.wp-block-image.is-style-rounded {
	display: flex;
	justify-content: center;
}

.wp-block-image figcaption {
	font-family: var(--gw-display);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--gw-ink-soft);
	text-align: start;
	margin-block-start: 0.6rem;
	padding-inline-start: 0.75rem;
	border-inline-start: 2px solid var(--gw-rule-firm);
}

.wp-block-quote {
	border: 0;
	border-block: 1px solid var(--gw-rule);
	padding-block: 1.5rem;
	margin-block: 2.5rem;
	font-size: 1.3125rem;
	line-height: 1.5;
	font-style: normal;
	color: var(--gw-ink);
}

.wp-block-quote cite {
	display: block;
	margin-block-start: 0.75rem;
	font-family: var(--gw-display);
	font-style: normal;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gw-ink-soft);
}

/* -------------------------------------------------------------------------
   Suchfeld und Schaltflächen
   ------------------------------------------------------------------------- */

.gw-searchform {
	display: flex;
	align-items: stretch;
	/*
	 * Darf schrumpfen, aber nicht wachsen: So bleibt das Feld neben dem
	 * Menue auf derselben Zeile, statt darunter zu klappen. Den Abstand zum
	 * Menue setzt der `gap` der Elterngruppe - ein zusaetzlicher margin
	 * addierte sich vorher dazu und machte die Zeile unnoetig breit.
	 */
	flex: 0 1 14rem;
	min-width: 9rem;
	border: 1px solid var(--gw-rule-firm);
	border-radius: var(--gw-radius);
	background: #FFFFFF;
	overflow: hidden;
}

.gw-searchform:focus-within {
	border-color: var(--gw-blue);
	box-shadow: 0 0 0 3px rgba(37, 75, 142, 0.15);
}

.gw-searchform .wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--gw-display);
	font-size: 1rem;
	border: 0;
	background: transparent;
	color: var(--gw-ink);
	padding: 0.5em 0.7em;
}

/*
 * Fokus: Der Rahmen des Suchfelds zeigt ihn, nicht die Teile darin.
 *
 * Der globale Fokusrahmen (3 px blau, weiter unten) legte sich zusaetzlich um
 * das Eingabefeld. Weil `.gw-searchform` `overflow: hidden` traegt, wurde er
 * abgeschnitten und blieb nur als blauer Strich am rechten Rand stehen. Der
 * Fokus ist weiterhin deutlich zu sehen - am Rahmen und am Schein darum,
 * die `:focus-within` oben setzt.
 */
.gw-searchform .wp-block-search__input:focus,
.gw-searchform .wp-block-search__input:focus-visible,
.gw-searchform button:focus,
.gw-searchform button:focus-visible {
	outline: none !important;
}

/* Die Schaltflaeche zeigt ihren eigenen Fokus durch die Flaeche. */
.gw-searchform button:focus-visible {
	background: var(--gw-blue);
	color: #FFFFFF;
}
.gw-searchform .wp-block-search__input::placeholder { color: var(--gw-ink-soft); opacity: 1; }

/* Die Schaltflaeche traegt jetzt eine Lupe statt des Wortes «Suchen». */
.gw-searchform button {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--gw-ink-soft);
	padding: 0.5em 0.7em;
	cursor: pointer;
}

.gw-searchform button:hover { background: var(--gw-blue); color: #FFFFFF; }

.wp-element-button,
.wp-block-button__link {
	background-color: var(--gw-blue);
	color: #FFFFFF;
	border: 1px solid var(--gw-blue);
	border-radius: var(--gw-radius);
	font-family: var(--gw-display);
	font-size: 0.9375rem;
	font-weight: 550;
	padding: 0.65em 1.4em;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	background-color: var(--gw-ink);
	border-color: var(--gw-ink);
}

/* -------------------------------------------------------------------------
   Flächen, Barrierefreiheit
   ------------------------------------------------------------------------- */

.has-contrast-3-color:not(.has-background) { color: var(--gw-ink-soft) !important; }

.has-accent-background-color,
.has-contrast-3-background-color { color: var(--gw-ink); }

.wp-site-blocks a:focus-visible,
.wp-site-blocks button:focus-visible,
.wp-site-blocks input:focus-visible,
.wp-site-blocks [tabindex]:focus-visible {
	outline: 3px solid var(--gw-blue) !important;
	outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/*
 * Tabellen duerfen auf schmalen Bildschirmen scrollen.
 *
 * Gemessen bei 390 px: Die Tabelle im Beitrag «Ist die Bibel irrtumslos?»
 * war 415 px breit und ragte damit aus dem Bild. Eine Tabelle laesst sich
 * nicht sinnvoll umbrechen; sie bekommt deshalb einen eigenen Scrollbereich,
 * statt die ganze Seite breiter zu machen.
 */
.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wp-block-table table {
	min-width: 100%;
}

@media (max-width: 780px) {
	body { font-size: 1.125rem; }

	.wp-block-query .wp-block-post-title { font-size: 1.25rem !important; line-height: 1.3; }
}

/* -------------------------------------------------------------------------
   Übersichten: Kacheln, Listen, Archive

   Die Titel in Übersichten tragen dieselbe Klasse wie der Artikeltitel.
   Ohne eigene Regeln erben sie dessen Grösse – auf der Startseite standen
   die Beitragstitel dadurch so gross wie eine Artikelüberschrift.
   ------------------------------------------------------------------------- */

.wp-block-query .wp-block-post-title,
.wp-block-post-template .wp-block-post-title {
	font-family: var(--gw-display);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.012em;
	margin-block: 0 0.4rem;
	text-wrap: balance;
}

.wp-block-query .wp-block-post-title a,
.wp-block-post-template .wp-block-post-title a {
	color: var(--gw-ink);
	text-decoration: none;
}

.wp-block-query .wp-block-post-title a:hover,
.wp-block-post-template .wp-block-post-title a:hover {
	color: var(--gw-blue);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.wp-block-query .wp-block-post-excerpt,
.wp-block-post-template .wp-block-post-excerpt {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--gw-ink-soft);
}

.wp-block-query .wp-block-post-date,
.wp-block-post-template .wp-block-post-date {
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

/*
 * Überschriften innerhalb von Spalten und Gruppen – etwa die Kategoriekacheln
 * auf der Themen-Seite. Sie sind Wegweiser, keine Kapitelmarken: also ohne
 * blaue Zäsur und eine Stufe kleiner.
 */
/*
 * `.wp-block-group h2/h3` stand hier ebenfalls und war ein stiller Fehler:
 * Das <main>-Element traegt selbst die Klasse `wp-block-group`. Die Regel
 * traf damit *jede* Ueberschrift der Seite - auch die Abschnitts-
 * ueberschriften im Artikeltext, die dadurch ihre blaue Zaesur und ihren
 * Abstand verloren. Sichtbar wurde es auf /lernen, wo die beiden
 * Abschnitte ohne Trennung aneinanderklebten.
 *
 * Gemeint waren immer nur Ueberschriften in Kacheln - die stehen in
 * Spalten, und `.wp-block-column` deckt sie ab.
 */
.wp-block-columns h2,
.wp-block-columns h3,
.wp-block-column h2,
.wp-block-column h3 {
	font-family: var(--gw-display);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.014em;
	margin-block: 0 0.6rem;
	padding-block-start: 0;
	border-block-start: 0;
	text-wrap: balance;
}

.wp-block-columns h2 a,
.wp-block-columns h3 a,
.wp-block-column h2 a,
.wp-block-column h3 a {
	color: var(--gw-ink);
	text-decoration: none;
}

.wp-block-columns h2 a:hover,
.wp-block-columns h3 a:hover,
.wp-block-column h2 a:hover,
.wp-block-column h3 a:hover {
	color: var(--gw-blue);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* -------------------------------------------------------------------------
   Fusszeile
   ------------------------------------------------------------------------- */

/*
 * Die Fusszeile brachte drei Innenabstaende der Stufe 50 uebereinander mit -
 * ihren eigenen, den der inneren Gruppe und den der Schlusszeile. Gemessen:
 * 384 px Luft um vier Zeilen Text. Der eigene Innenabstand ist deshalb klein;
 * der Abstand nach oben kommt weiterhin von hier, damit die Trennlinie nicht
 * am Inhalt klebt.
 */
.wp-site-blocks > footer {
	margin-block-start: 4rem;
	padding-block: 0.5rem;
	border-block-start: 1px solid var(--gw-rule);
	font-family: var(--gw-display);
	font-size: 0.9375rem;
}

/*
 * Die Schlusszeile mit dem Copyright braucht keinen eigenen Grossabstand.
 *
 * Der Pfad steht ausdruecklich mit `>` bis nach unten: Eine erste Fassung
 * schrieb `footer .wp-block-group > .wp-block-group:last-child` und traf
 * damit auch die letzte Spalte im Fusszeilenraster - «Social» rutschte
 * gegenueber «Ueber» und «Rechtliches» nach unten.
 */
.wp-site-blocks > footer > .wp-block-group > .wp-block-group:last-child {
	padding-block-start: 1.5rem;
}

.wp-site-blocks > footer h2,
.wp-site-blocks > footer h3 {
	font-family: var(--gw-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gw-ink-soft);
	margin-block: 0 0.75rem;
	border: 0;
	padding: 0;
}

.wp-site-blocks > footer a {
	color: var(--gw-ink);
	text-decoration: none;
}

.wp-site-blocks > footer a:hover {
	color: var(--gw-blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Der Namenszug in der Fusszeile bleibt in der Lesestimme. */
.wp-site-blocks > footer .wp-block-site-title,
.wp-site-blocks > footer .wp-block-site-title a {
	font-family: var(--gw-serif);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--gw-ink);
}

/*
 * WordPress liefert die Klasse .has-body-font-family mit !important aus. In
 * der Fusszeile tragen die Spaltenüberschriften diese Klasse und blieben
 * deshalb in der Serifenschrift, obwohl sie Beschriftungen sind.
 */
.wp-site-blocks > footer h2.has-body-font-family,
.wp-site-blocks > footer h3.has-body-font-family {
	font-family: var(--gw-display) !important;
	font-size: 0.75rem !important;
	color: var(--gw-ink-soft);
}

/*
 * Zu viel Leere über den Seitentiteln: Das Theme setzt hier grosszügige
 * Abstände, die zusammen mit dem Abstand unter der Kopfzeile addiert werden.
 */
.wp-site-blocks > header + * > .wp-block-group:first-child,
.wp-site-blocks > main > .wp-block-group:first-child {
	padding-block-start: 0;
}

/*
 * Der Abstandshalter unmittelbar vor dem Seitentitel.
 *
 * Im Template steht dort ein `core/spacer` der Stufe 50. Zusammen mit dem
 * Abstand unter der Kopfzeile ergab das auf /kontakt 174 px Leere, bevor das
 * erste Wort kam. Die Kopfzeile bringt ihren Abstand selbst mit; der
 * Abstandshalter verdoppelt ihn nur.
 *
 * Bewusst nur der erste: Abstandshalter weiter unten trennen Abschnitte
 * voneinander und behalten ihre Wirkung, jetzt auf der engeren Skala.
 */
.wp-site-blocks > main > .wp-block-group:first-child > .wp-block-spacer:first-child {
	height: 0 !important;
	min-height: 0 !important;
}

/* -------------------------------------------------------------------------
   Eine Überschriftenstimme

   Das Theme setzt Cardo für Überschriften, der Lesetext läuft in Source Serif.
   Zwei ähnliche Serifenschriften nebeneinander lesen sich unentschieden – die
   Überschrift wirkt dann wie etwas grösserer Fliesstext. Alle Überschriften
   laufen deshalb in der Groteske, der Lesetext bleibt Serif. Das ist der
   Gegensatz, den das Magazin selbst behandelt.

   WordPress liefert .has-heading-font-family und .has-body-font-family mit
   !important aus, deshalb hier ebenfalls.
   ------------------------------------------------------------------------- */

.wp-site-blocks h1:not(.wp-block-site-title),
.wp-site-blocks h2:not(.wp-block-site-title),
.wp-site-blocks h3:not(.wp-block-site-title),
.wp-site-blocks h4,
.wp-site-blocks h5,
.wp-site-blocks h6 {
	font-family: var(--gw-display) !important;
	letter-spacing: -0.015em;
}

/* -------------------------------------------------------------------------
   Suchergebnisse

   Ohne Bilder, dafür mit Textausschnitt: Man soll auf einen Blick sehen,
   warum ein Artikel getroffen wurde – nicht, wie er bebildert ist.
   ------------------------------------------------------------------------- */

.search-results .wp-block-post-featured-image,
.search-no-results .wp-block-post-featured-image,
.search-results .wp-block-post-template figure.wp-block-post-featured-image {
	display: none !important;
}

.search-results .wp-block-post-template > li,
.search-results .wp-block-post-template .wp-block-post {
	padding-block: 1.5rem;
	border-block-end: 1px solid var(--gw-rule);
}

.search-results .wp-block-post-title {
	font-size: 1.375rem !important;
	font-weight: 650;
	line-height: 1.25;
	margin-block: 0 0.35rem;
}

.search-results .wp-block-post-title a {
	color: var(--gw-blue);
	text-decoration: none;
}

.search-results .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.search-results .wp-block-post-excerpt__excerpt,
.search-results .wp-block-post-excerpt {
	font-family: var(--gw-serif);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--gw-ink);
	margin-block: 0.35rem 0;
}

.search-results .wp-block-post-date {
	font-family: var(--gw-display);
	font-size: 0.8125rem;
	color: var(--gw-ink-soft);
}

/* Das gefundene Wort im Ausschnitt. */
.relevanssi-query-term {
	background: #F3E4C8;
	color: var(--gw-ink);
	font-weight: 600;
	padding: 0 0.15em;
	border-radius: var(--gw-radius-sm);
}

/*
 * Die Zeile «weshalb dieser Treffer».
 *
 * Steht unter dem Ausschnitt und nennt Suchwort, Anzahl der Fundstellen
 * und wo sie liegen. Bewusst leise gesetzt: Sie soll auf Nachfrage
 * Auskunft geben, nicht mit dem Anriss um Aufmerksamkeit ringen.
 */
.gw-hit-info {
	font-family: var(--gw-display);
	font-size: 0.75rem;
	color: var(--gw-ink-soft);
	margin-block: 0.5rem 0 !important;
	letter-spacing: 0.01em;
}

/* Hinweis, wo der Treffer herkommt – etwa aus einer Fussnote. */
.gw-match-source {
	display: inline-block;
	font-family: var(--gw-display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gw-blue);
	border: 1px solid var(--gw-rule-firm);
	border-radius: var(--gw-radius-sm);
	padding: 0.15em 0.5em;
	margin-inline-start: 0.5rem;
	vertical-align: 0.15em;
}

/* -------------------------------------------------------------------------
   Abgerundete Ecken für Eingabefelder und Flächen
   ------------------------------------------------------------------------- */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
textarea,
select,
.wp-block-search__input,
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
	border-radius: var(--gw-radius);
}

.gw-searchform .wp-block-search__input,
.gw-searchform button {
	border-radius: 0;
}

/* -------------------------------------------------------------------------
   Kontaktformular (WPForms)

   Das Formular kam in seiner eigenen Stilwelt: 3-px-Ecken, graue Rahmen und
   ein Knopf in WPForms-Blau (#066aab) neben dem Seitenblau (#254B8E). Auf
   /kontakt war es das einzige Element, das nicht zum Rest passte.

   WPForms liefert seine Darstellung im Modus «modern» ueber eigene
   CSS-Variablen aus. Sie zu setzen ist der vorgesehene Weg - so bleiben
   Fehlermeldungen, Pflichtfeld-Markierungen und Zustaende unberuehrt, statt
   dass einzelne Regeln mit !important ueberschrieben werden muessten.
   ------------------------------------------------------------------------- */

.wpforms-container {
	--wpforms-field-border-radius: var(--gw-radius);
	--wpforms-field-border-color: var(--gw-rule-firm);
	--wpforms-field-border-color-spare: var(--gw-rule-firm);
	--wpforms-field-background-color: #FFFFFF;
	--wpforms-field-text-color: var(--gw-ink);
	--wpforms-field-size-font-size: 17px;
	--wpforms-field-size-input-height: 46px;

	--wpforms-label-color: var(--gw-ink);
	--wpforms-label-sublabel-color: var(--gw-ink-soft);
	--wpforms-label-size-font-size: 15px;

	--wpforms-button-background-color: var(--gw-blue);
	--wpforms-button-border-color: var(--gw-blue);
	--wpforms-button-border-radius: var(--gw-radius);
	--wpforms-button-text-color: #FFFFFF;
	--wpforms-button-size-font-size: 15px;
	--wpforms-button-size-height: 46px;
	--wpforms-button-size-padding-h: 22px;
}

/* Feldbeschriftungen sind Beschriftungen, keine Ueberschriften: 600 statt 700. */
.wpforms-container .wpforms-field-label {
	font-family: var(--gw-display);
	font-weight: 600;
	letter-spacing: -0.005em;
}

.wpforms-container .wpforms-field-sublabel {
	font-family: var(--gw-display);
}

/* Derselbe Wechsel wie bei jeder anderen Schaltflaeche der Seite. */
.wpforms-container .wpforms-submit:hover,
.wpforms-container .wpforms-submit:focus {
	background-color: var(--gw-ink);
	border-color: var(--gw-ink);
}

.wpforms-container .wpforms-submit {
	font-family: var(--gw-display);
	font-weight: 550;
}

/* -------------------------------------------------------------------------
   Kopfzeile in einer Zeile

   Im Template liegen Logo und Navigation in zwei getrennten Gruppen
   untereinander. Das Logo bekam dadurch eine eigene Zeile, daneben nichts –
   die Kopfzeile war doppelt so hoch wie nötig. Hier werden die beiden
   Gruppen zu einer Zeile zusammengezogen, ohne das Template zu ändern.
   ------------------------------------------------------------------------- */

.wp-site-blocks > header > .wp-block-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: 2.5rem;
	row-gap: 0.75rem;
}

.wp-site-blocks > header > .wp-block-group > * {
	margin-block: 0 !important;
	margin-inline: 0 !important;
	flex: 0 1 auto;
}

/* Die Gruppe mit Navigation und Suchfeld nimmt den verbleibenden Platz. */
.wp-site-blocks > header > .wp-block-group > .wp-block-group:last-child {
	flex: 1 1 auto;
	justify-content: flex-end;
}

/* Das Logo etwas kleiner – es muss die Zeile nicht mehr allein füllen. */
.wp-site-blocks > header .wp-block-image img {
	max-width: 170px;
	height: auto;
}

.wp-site-blocks > header {
	padding-block: 0.9rem;
	margin-block-end: 3rem;
}

@media (max-width: 900px) {
	.wp-site-blocks > header > .wp-block-group {
		column-gap: 1.5rem;
	}

	.wp-site-blocks > header .wp-block-image img {
		max-width: 140px;
	}
}

/* -------------------------------------------------------------------------
   Übersichts- und Kategorieseiten

   Die Aufmacherbilder beanspruchten fast die ganze Bildschirmhöhe, und die
   Abstände zwischen den Kacheln waren ungleich – mal eng, mal weit, je
   nachdem wie lang ein Titel war.
   ------------------------------------------------------------------------- */

/*
 * Nur Beitragsbilder in Uebersichten werden auf ein einheitliches Format
 * gebracht. Ein frueherer Versuch erfasste jedes Bild in Spalten - dadurch
 * wurden auch die Autorenportraets beschnitten und verzerrt.
 */
.wp-block-query .wp-block-post-featured-image img,
.wp-block-post-template .wp-block-post-featured-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: var(--gw-radius);
}

/*
 * Bildausschnitt in den runden Startseitenbildern verschieben.
 *
 * Die Bilder sind Kreise; beschnitten wird das Quadrat aus der Mitte. Beim
 * «Lernen»-Foto (Laptop links, Notizbuch in der Mitte, Kaffee rechts) blieb
 * davon vor allem der leere Notizblock uebrig. Der Ausschnitt wandert
 * deshalb nach links, bis der Laptop mit im Bild ist.
 *
 * Die Klasse steht im Markup der Startseiten-Vorlage am Bildblock, nicht
 * an einer Medien-ID: Beim Uebertragen auf die Live-Seite bekommt das Foto
 * eine andere ID, die Klasse bleibt.
 *
 * ACHTUNG beim Einfuegen neuer Regeln an dieser Stelle: Die Regel darueber
 * hat eine *zweizeilige Selektorliste*. Genau hier wurde diese Regel schon
 * einmal versehentlich zwischen die beiden Selektoren gesetzt - der erste
 * Selektor haengte sich damit an `object-position` und alle Kartenbilder
 * bekamen den verschobenen Ausschnitt.
 */
/*
 * Der lange Selektor ist noetig: `.wp-block-image.is-style-rounded img`
 * (0,2,1) setzt weiter unten `object-position: center` und schlug die
 * kurze Fassung `.gw-focus-left img` (0,1,1).
 */
.wp-block-image.is-style-rounded.gw-focus-left img {
	object-position: 22% center;
}

/*
 * Hochformatige Beitragsbilder oben ansetzen.
 *
 * In den Uebersichten wird jedes Beitragsbild auf Querformat beschnitten.
 * Von einem hochformatigen Original bleibt dabei nur ein waagrechter
 * Streifen - aus der Mitte genommen, schneidet er Koepfe ab. Gemessen an
 * der Zeichnung von Blaise Pascal (1069 x 1280): sichtbar war die Bildhoehe
 * von 22 % bis 78 %, der Kopf lag darueber.
 *
 * Die Klasse setzt gw_design_mark_portrait_images() beim Ausliefern, sobald
 * ein Bild hoeher als breit ist. Landschaftsbilder bleiben unberuehrt.
 */
.wp-block-post-featured-image img.gw-hochformat {
	object-position: center 22%;
}

/*
 * Portraets und andere Inhaltsbilder behalten ihr eigenes Seitenverhaeltnis.
 *
 * `object-fit: initial` stand hier vorher und bedeutet `fill` - also
 * ausdruecklich verzerren. Zusammen mit den festen height-Attributen im
 * HTML wurden daraus Ovale statt Kreise. `contain` verzerrt nie.
 *
 * `aspect-ratio: auto` stand hier ebenfalls und ist entfernt. Es loeschte das
 * Seitenverhaeltnis, das der Browser aus den width- und height-Attributen im
 * HTML bildet. Ohne dieses Verhaeltnis nahm `height: auto` die Ersatzhoehe,
 * die WordPress 6.7 fuer Lazy-Bilder mitliefert
 * (`contain-intrinsic-size: 3000px 1500px`) - auf /artikel wurden daraus
 * Bilder von 292 x 1500 px.
 *
 * Zwischendurch stand hier eine Regel, die diese Ersatzgroesse auf `none`
 * setzte. Das war der falsche Hebel: Bei `sizes="auto"` misst der Browser die
 * Layoutbreite, und ohne Ersatzgroesse ist sie 0 - die Bilder wurden gar
 * nicht mehr geladen. Die Ursache liegt eine Ebene tiefer und ist jetzt dort
 * behoben: gw-performance.php entfernt das `auto` aus dem sizes-Attribut.
 */
.wp-block-columns .wp-block-image img,
.wp-block-column .wp-block-image img {
	object-fit: contain;
	height: auto;
}

/*
 * Titel und Bild einer Kachel stehen immer gleich weit auseinander.
 *
 * Auf /artikel liegt der Titel in fünf von sechs Spalten in einer inneren
 * Gruppe, bei «Wissenschaft» dagegen direkt in der Spalte. Damit galt dort
 * der Spaltenabstand (12 px) statt Gruppenabstand plus Titelmarge (28 px) -
 * das Bild sass 16 px höher als seine beiden Nachbarn.
 *
 * Statt den Inhalt zu korrigieren, richtet sich der Abstand nach dem
 * Spaltenabstand, egal wie tief der Titel liegt. Der Inhalt darf uneinheitlich
 * sein, ohne dass man es sieht.
 */
.entry-content .wp-block-column > .wp-block-group.is-vertical {
	gap: 0.75rem;
}

.entry-content .wp-block-column > .wp-block-group.is-vertical > h2,
.entry-content .wp-block-column > .wp-block-group.is-vertical > h3,
.entry-content .wp-block-column > .wp-block-group.is-vertical > h4 {
	margin-block-end: 0;
}

/* Gleichmässige Abstände im Raster, unabhängig von der Titellänge. */
.wp-block-columns {
	gap: 2rem !important;
	align-items: flex-start;
}

.wp-block-column {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.wp-block-column > * {
	margin-block: 0 !important;
}

.wp-block-query .wp-block-post-template {
	gap: 2.5rem 2rem !important;
}

.wp-block-query .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.wp-block-query .wp-block-post-template > li > * {
	margin-block: 0 !important;
}

/* -------------------------------------------------------------------------
   Lesevorschläge statt Blätternavigation
   ------------------------------------------------------------------------- */

/*
 * Der Block haengt als Geschwister hinter `.wp-block-post-content`. Ob er
 * dessen Breite erbt, haengt davon ab, wie der Elterncontainer im Template
 * ausgelegt ist - bei einem Flow-Container erbt er sie nicht und lief
 * ueber die volle Breite, waehrend der Artikeltext schmal blieb. Genau das
 * liess ihn verschoben wirken. Breite und Zentrierung stehen deshalb
 * ausdruecklich hier.
 */
.gw-related {
	box-sizing: border-box;
	max-width: var(--wp--style--global--content-size, 620px);
	margin-inline: auto;
	margin-block: 4rem 0;
	padding-block-start: 1.5rem;
	border-block-start: 2px solid var(--gw-blue);
}

.gw-related__title {
	font-family: var(--gw-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gw-ink-soft);
	margin-block: 0 1rem;
}

.gw-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.gw-related__item {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.gw-related__link {
	font-family: var(--gw-display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--gw-ink);
	text-decoration: none;
	text-wrap: balance;
}

.gw-related__link:hover {
	color: var(--gw-blue);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.gw-related__meta {
	font-family: var(--gw-display);
	font-size: 0.8125rem;
	color: var(--gw-ink-soft);
}

.gw-related__all {
	display: inline-block;
	margin-block-start: 1.25rem;
	font-family: var(--gw-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--gw-blue);
	text-decoration: none;
}

.gw-related__all::after {
	content: " →";
}

.gw-related__all:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* -------------------------------------------------------------------------
   Kopfzeile: Logo und Menü auf gemeinsamer Mittellinie
   ------------------------------------------------------------------------- */

.wp-site-blocks > header figure.wp-block-image {
	margin: 0;
	display: flex;
	align-items: center;
}

.wp-site-blocks > header .wp-block-image img {
	display: block;
}

/* Die inneren Gruppen sollen die Höhe nicht künstlich strecken. */
.wp-site-blocks > header .wp-block-group {
	align-items: center;
}

.wp-site-blocks > header .wp-block-navigation,
.wp-site-blocks > header .wp-block-navigation__container {
	align-items: center;
}

/*
 * Die Zeile, die Logo und Menue traegt.
 *
 * Die frueheren Regeln hier zielten eine Ebene zu flach: Der aeussere
 * Gruppen-Container hat nur ein einziges Kind, also trafen `:first-child`
 * und `:last-child` beide dasselbe Element - das Logo wurde nie erreicht.
 * Die echte Verschachtelung ist:
 *
 *   header > .wp-block-group            aeusserer Rahmen
 *     > .wp-block-group                 diese Zeile
 *       > .wp-block-group:first-child   Logo
 *       > .wp-block-group:last-child    Menue und Suchfeld
 *
 * `flex-wrap: nowrap` ist der zweite Teil der Reparatur. WordPress legt
 * Flex-Gruppen umbrechend an; seit das Suchfeld dazukam, passte die Zeile
 * nicht mehr in die Breite und das Menue klappte unter das Logo.
 */
.wp-site-blocks > header > .wp-block-group > .wp-block-group {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 2.5rem;
	/*
	 * Die Zeile traegt `alignwide` und war damit auf 940 px begrenzt - und
	 * zwar linksbuendig, weshalb rechts ein breiter Streifen frei blieb und
	 * das Menue nicht an der Kante stand. Die Kopfzeile soll die volle
	 * Breite des Rahmens nutzen; die Raender kommen aus dessen Innenabstand.
	 */
	max-width: none;
	width: 100%;
}

/*
 * Logo ganz links, Rest ganz rechts.
 *
 * `margin-inline-end: auto` am Logo ist der zuverlaessige Weg: Es schiebt
 * allen restlichen Inhalt an die rechte Kante, unabhaengig davon, welches
 * `justify-content` das Template der Zeile sonst noch mitgibt.
 */
.wp-site-blocks > header > .wp-block-group > .wp-block-group > .wp-block-group:first-child {
	flex: 0 0 auto;
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/*
 * Menue und Suchfeld bilden eine Einheit rechts - auf einer Zeile.
 * Ohne `nowrap` klappt das Suchfeld unter die Menuepunkte, sobald beides
 * zusammen breiter wird als der verbleibende Platz neben dem Logo.
 */
.wp-site-blocks > header > .wp-block-group > .wp-block-group > .wp-block-group:last-child {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 1.5rem;
	margin-inline-start: auto !important;
}

/*
 * Kopfzeile und Menue auf dem Handy.
 *
 * Vorgeschichte: Gemessen bei 390 px brauchten Logo (140 px) und die
 * Gruppe aus Menuknopf und Suchfeld (304 px) zusammen mehr Platz als die
 * Zeile hat - das Logo wurde 113 px aus dem Bild geschoben. Als
 * Zwischenschritt brach die Suche in eine eigene Zeile unter der
 * Kopfzeile um; das sah dort aber verloren aus.
 *
 * Jetzt setzt gw-search.php das Feld *in* die Navigation. Damit wandert es
 * beim Aufklappen von selbst ins Menue, und die Kopfzeile traegt nur noch
 * Logo und Menuknopf - das passt bequem in eine Zeile.
 *
 * Hier bleibt die Gestaltung der aufgeklappten Ueberlagerung.
 */
@media (max-width: 780px) {
	/*
	 * Die Ueberlagerung kam weiss; die Seite ist warmes Papierweiss.
	 *
	 * `!important` ausnahmsweise: Die Hintergrundfarbe der Ueberlagerung
	 * steht als style-Attribut direkt am Element (das Theme setzt sie aus
	 * den Navigationseinstellungen). Dagegen kommt kein Selektor an.
	 */
	.wp-block-navigation__responsive-container.is-menu-open {
		background-color: var(--gw-paper) !important;
		padding: 1.5rem;
	}

	/*
	 * Alles linksbuendig. Die Kopfzeile traegt `items-justified-right`;
	 * im aufgeklappten Menue rutschten Menuepunkte und Suchfeld dadurch an
	 * den rechten Rand, waehrend die ganze uebrige Seite links beginnt.
	 *
	 * Der lange Selektor ist Absicht: Er zeichnet den Pfad nach, den auch
	 * die Regel aus der Navigation des Kerns benutzt
	 * (`… .is-menu-open:where(…) … .wp-block-navigation__container`, Gewicht
	 * 0,4,0). Ein kuerzerer Selektor verliert dagegen.
	 */
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
		align-items: stretch;
	}

	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation__container {
		align-items: flex-start;
		gap: 0.4rem;
	}

	.wp-block-navigation__responsive-container.is-menu-open .gw-searchform {
		width: 100%;
		flex: 0 0 auto;
		margin-block-start: 1.75rem;
	}
}
/* Das Menue braucht seinen Platz nicht zu teilen. */
.wp-site-blocks > header nav.wp-block-navigation {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   Beitragsliste «Neueste Beiträge»

   Im Template steht jeder Beitrag als zweispaltige Gruppe: Titel links,
   Autor und Datum rechts. Nebeneinander gelesen wirkt das wie eine Tabelle,
   und der Titel bekommt nur die halbe Breite. Hier wird daraus eine Liste:
   Titel in Zeile eins, Autor und Datum darunter.
   ------------------------------------------------------------------------- */

.wp-block-post-template > li > .wp-block-columns {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 0.3rem !important;
	margin-block: 0 !important;
}

.wp-block-post-template > li > .wp-block-columns > .wp-block-column {
	flex: 0 0 auto !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Autor und Datum bilden gemeinsam die zweite Zeile. */
.wp-block-post-template > li > .wp-block-columns > .wp-block-column:last-child {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.9rem;
	row-gap: 0.15rem;
}

.wp-block-post-template > li > .wp-block-columns > .wp-block-column:last-child > * {
	margin: 0 !important;
}

/*
 * Der Titel trägt eine inline gesetzte clamp()-Grösse, die auf schmalen
 * Bildschirmen unter die Fliesstextgrösse fiel. Inline-Stile lassen sich nur
 * mit !important überschreiben.
 */
.wp-block-post-template > li > .wp-block-columns h2 {
	font-family: var(--gw-display) !important;
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.014em;
	margin: 0 !important;
	text-wrap: balance;
}

.wp-block-post-template > li > .wp-block-columns h2 a {
	color: var(--gw-ink);
	text-decoration: none;
}

.wp-block-post-template > li > .wp-block-columns h2 a:hover {
	color: var(--gw-blue);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.wp-block-post-template > li > .wp-block-columns .wp-block-post-author-name,
.wp-block-post-template > li > .wp-block-columns .wp-block-post-date {
	font-family: var(--gw-display);
	font-size: 0.875rem;
	color: var(--gw-ink-soft);
}

/*
 * Eine feine Linie trennt die Eintraege - aber nur in der Liste.
 *
 * In der Liste (Startseite, ein Beitrag pro Zeile) trennt die Linie
 * tatsaechlich zwei Eintraege; beim letzten faellt sie weg, weil danach
 * nichts mehr kommt.
 *
 * Im Raster war dieselbe Ausnahme ein Fehler: Dort trennt die Linie nicht,
 * sondern schliesst jede Karte nach unten ab. Der letzten Karte fehlte sie,
 * obwohl neben ihr nur leerer Platz stand - das sah nach Versehen aus.
 * Entschieden wurde, im Raster ganz darauf zu verzichten: Bild und
 * Weissraum trennen die Kacheln dort bereits.
 */
.wp-block-post-template > li {
	padding-block: 1.1rem;
	border-block-end: 1px solid var(--gw-rule);
}

.wp-block-post-template > li:last-child,
.wp-block-post-template-is-layout-grid > li {
	border-block-end: 0;
}

/* -------------------------------------------------------------------------
   Autorenseite

   Jeder Autor stand als vollbreite Zeile: links eine 50 % breite Spalte mit
   einem `core/cover`-Block, der inline `min-height: 600px` traegt, darin ein
   268 px grosses Portrait. Vier Autoren ergaben so mindestens 2400 px Hoehe,
   unabhaengig davon, wie lang die Texte sind - und links stand neben dem
   Portrait fast nur Leere.

   Hier wird daraus eine Karte: Portrait in fester Groesse links, Text
   daneben. Der Inhalt bleibt unveraendert; die Seite wird knapp halb so lang.
   ------------------------------------------------------------------------- */

/*
 * Erkannt wird die Zeile an ihrem Aufbau, nicht an einer Seiten-ID: eine
 * vollbreite Spaltenzeile, deren erste Spalte einen Cover-Block enthaelt.
 * Kommt spaeter ein Autor dazu, ist er automatisch mitgestaltet.
 */
.entry-content > .wp-block-columns.alignfull:has(> .wp-block-column > .wp-block-cover) {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	align-items: center;
	gap: 2.5rem !important;
	padding-block: 1.75rem;
	/*
	 * Die Trennlinie sitzt oben, nicht unten.
	 *
	 * Unten gesetzt stand sie auch unter dem letzten Autor - direkt ueber der
	 * Trennlinie der Fusszeile, also zwei Linien dicht uebereinander. Oben
	 * gesetzt und beim ersten Autor unterdrueckt, trennt sie nur zwischen den
	 * Autoren, unabhaengig davon wie viele es sind.
	 */
	border-block-start: 1px solid var(--gw-rule);
}

/* Die Portraitspalte braucht die Breite eines Portraits, nicht die halbe Seite. */
.entry-content > .wp-block-columns.alignfull:has(> .wp-block-column > .wp-block-cover) > .wp-block-column:first-child {
	flex: 0 0 200px !important;
	max-width: 200px;
	min-width: 0;
}

/* Der Cover-Block traegt `min-height: 600px` inline - daher !important. */
.entry-content > .wp-block-columns.alignfull > .wp-block-column > .wp-block-cover {
	min-height: 200px !important;
	width: 200px;
	padding: 0 !important;
	border-radius: var(--gw-radius);
	overflow: hidden;
}

.entry-content > .wp-block-columns.alignfull > .wp-block-column > .wp-block-cover img {
	width: 168px;
	height: auto;
	max-width: 100%;
}

/* Die Textspalte nimmt den Rest und braucht ihren Innenabstand nicht mehr. */
.entry-content > .wp-block-columns.alignfull:has(> .wp-block-column > .wp-block-cover) > .wp-block-column:last-child {
	flex: 1 1 auto !important;
	padding: 0 !important;
}

/*
 * Im Inneren steckt eine zweite Spaltenzeile mit einer auf 320 px
 * festgenagelten Spalte. Sie hielt den Text schmal, waehrend rechts daneben
 * Platz frei blieb.
 */
.entry-content > .wp-block-columns.alignfull .wp-block-columns > .wp-block-column[style*="flex-basis:320px"] {
	flex-basis: auto !important;
	width: 100%;
}

/* Der Abstandshalter zwischen den Autoren wird von der Trennlinie ersetzt. */
.entry-content > .wp-block-columns.alignfull:has(> .wp-block-column > .wp-block-cover) + .wp-block-spacer {
	height: 0 !important;
	min-height: 0 !important;
}

/*
 * Auf dem Handy steht das Portraet mittig ueber dem Text.
 *
 * Sobald die beiden Spalten untereinander rutschen, behaelt die
 * Portraetspalte ihre 200 px Breite und klebte damit am linken Rand -
 * gemessen bei 390 px: Bild 40-207 in einem Textbereich von 20-371. Das
 * sah nach einem Fehler aus, war aber nur die uebrig gebliebene
 * Spaltenbreite.
 */
@media (max-width: 780px) {
	.entry-content > .wp-block-columns.alignfull > .wp-block-column:has(> .wp-block-cover) {
		margin-inline: auto;
	}
}

/* Der getoente Kasten hinter dem Portrait wirkt in Kachelgroesse wie ein
 * Versehen - im urspruenglichen, 600 px hohen Band war er ein Farbfeld. */
.entry-content > .wp-block-columns.alignfull > .wp-block-column > .wp-block-cover > .wp-block-cover__background {
	display: none;
}

/* -------------------------------------------------------------------------
   Kategorie- und Archivseiten

   Drei Dinge machten die Uebersicht unruhig:
   1. Die Beitragsbilder standen im Hochformat 3:4 - bei drei Spalten fuellte
      eine einzige Zeile fast den Bildschirm.
   2. Die Titel waren zwischen einer und vier Zeilen lang. Datum und
      Anrisstext begannen dadurch in jeder Kachel auf anderer Hoehe.
   3. Der Archivtitel stand linksbuendig, waehrend jeder Seitentitel mittig
      steht.

   Die Vorlage setzt das Seitenverhaeltnis als Inline-Stil am Bild
   (`aspectRatio: "3/4"`), deshalb steht hier !important. Der Weg ueber das
   CSS ist bewusst gewaehlt: Er wird per FTP mit ausgeliefert, waehrend eine
   Aenderung an der Vorlage von Hand im Backend nachgezogen werden muesste.
   ------------------------------------------------------------------------- */

.wp-block-query .wp-block-post-featured-image img,
.wp-block-post-template .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2 !important;
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: var(--gw-radius);
}

.wp-block-query .wp-block-post-title {
	font-size: 1.1875rem !important;
	line-height: 1.35;
}

/*
 * Nur im Raster: Der Titel bekommt die Hoehe von zwei Zeilen, unabhaengig
 * davon, ob er eine oder vier braucht. Damit beginnt in jeder Kachel einer
 * Reihe alles Weitere auf derselben Hoehe. Laengere Titel enden mit
 * Auslassungspunkten; der volle Titel steht auf der Beitragsseite.
 *
 * Auf der Startseite steht dagegen ein Beitrag pro Zeile
 * (`is-layout-flow`). Dort gibt es nichts auszurichten - die reservierte
 * zweite Zeile hinterliess unter einzeiligen Titeln nur ein 26 px hohes
 * Loch, sichtbar als zu grosser Abstand zwischen Titel und Autorenzeile.
 * Und ein Titel darf hier ruhig ueber drei Zeilen laufen: Platz ist da.
 */
.wp-block-post-template-is-layout-grid .wp-block-post-title {
	min-height: calc(2 * 1.35em);
}

.wp-block-post-template-is-layout-grid .wp-block-post-title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Derselbe Gedanke fuer den Anrisstext: drei Zeilen, dann Schluss. */
.wp-block-query .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Der Archivtitel tritt auf wie jeder Seitentitel. */
.wp-block-query-title {
	font-family: var(--gw-display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.028em;
	text-align: center;
	text-wrap: balance;
	margin-block: 0 2.5rem;
	padding-block-start: 0 !important;
}

/* Ueber dem ersten Autor steht der Seitentitel - dort braucht es keine Linie. */
.entry-content > .wp-block-columns.alignfull:has(> .wp-block-column > .wp-block-cover):first-of-type {
	border-block-start: 0;
}

/*
 * Markenzeichen im Fliesstext - etwa das Gravoice-Logo auf /lernen.
 *
 * Ohne eigene Regel greift die Bildregel des Inhalts mit ihren 2.5 rem
 * Aussenabstand; das Zeichen stuende dann wie ein Inhaltsbild allein auf
 * weiter Flur. Es gehoert eng an die Ueberschrift darueber.
 */
.entry-content .gw-brandmark {
	margin-block: 0.25rem 1.25rem;
}

.entry-content .gw-brandmark img {
	border-radius: var(--gw-radius);
	height: auto;
}

/* -------------------------------------------------------------------------
   Themenkacheln auf /artikel

   Bild oben im Querformat, Titel darunter, dazu die Zahl der Beiträge –
   dieselbe Karte wie auf den Kategorieseiten dahinter. Vorher stand der
   Titel über einem quadratischen Bild; wer klickte, landete auf einer Seite,
   die ganz anders aussah.

   Die Klasse `gw-topics` setzt gw_design_topic_tiles() beim Ausliefern.
   Ohne sie müssten die Regeln auf `.wp-block-column .wp-block-image` zielen
   und träfen damit auch die Autorenporträts.
   ------------------------------------------------------------------------- */

.gw-topics {
	align-items: stretch;
}

.gw-topics > .wp-block-column {
	position: relative;
	gap: 0;
}

/*
 * Bild nach oben.
 *
 * Zwei Regeln, weil der Inhalt nicht einheitlich ist: In fünf von sechs
 * Spalten liegen Titel und Bild zusammen in einer Gruppe, bei
 * «Wissenschaft» steht der Titel direkt in der Spalte. Die erste Regel ordnet
 * innerhalb der Gruppe, die zweite die Gruppe gegenüber dem losen Titel.
 */
.gw-topics .wp-block-group { display: flex; flex-direction: column; }
.gw-topics .wp-block-image { order: -1; }
.gw-topics > .wp-block-column > .wp-block-group:has(.wp-block-image) { order: -1; }

/*
 * Das Bild füllt die Kachelbreite im Querformat 3:2.
 *
 * Im Markup steht `style="width:300px"` inline am Bild, dazu ein
 * `border-radius: 25px` – beides muss überschrieben werden, damit alle
 * Kacheln gleich breit sind und dieselbe Rundung tragen wie im Archiv.
 */
.gw-topics .wp-block-image img {
	width: 100% !important;
	max-width: none !important;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
	border-radius: var(--gw-radius) !important;
	transition: transform 0.25s ease;
}

.gw-topics .wp-block-image {
	overflow: hidden;
	border-radius: var(--gw-radius);
	margin-block: 0 0.85rem;
	display: block;
}

.gw-topics h2,
.gw-topics h3 {
	text-align: start;
	margin-block: 0 0.15rem;
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.35;
}

/*
 * Zwei Kachelreihen, ein Abstand.
 *
 * Die sechs Kacheln stehen in zwei Spalten-Bloecken. Innerhalb eines
 * Blocks trennt sie der Spaltenabstand (2rem), zwischen den Bloecken lag
 * dagegen nur der Blockabstand von 19 px. Auf dem Handy, wo alle sechs
 * untereinander stehen, war der Sprung deutlich zu sehen: 32, 32, 19,
 * 32, 32.
 *
 * `~` statt `+`: Zwischen den beiden Bloecken steht ein `core/spacer`. Er ist
 * weiter oben bewusst auf Hoehe 0 gesetzt, bleibt aber im Markup stehen - ein
 * Nachbar-Selektor mit `+` greift deshalb nie.
 */
.entry-content .gw-topics ~ .gw-topics {
	margin-block-start: 2rem;
}

.gw-topic-count {
	font-family: var(--gw-display);
	font-size: 0.875rem;
	color: var(--gw-ink-soft);
	margin-block: 0 !important;
}

/*
 * Die ganze Kachel ist anklickbar.
 *
 * Der Titel ist bereits verlinkt; sein ::after wird über die Spalte gelegt.
 * Das erspart eine Änderung am Inhalt und lässt den Link dort, wo er auch
 * für Screenreader hingehört – der Bildlink darunter zeigt aufs selbe Ziel.
 */
.gw-topics h2 a::after,
.gw-topics h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.gw-topics > .wp-block-column:hover .wp-block-image img {
	transform: scale(1.03);
}

.gw-topics > .wp-block-column:hover h2 a,
.gw-topics > .wp-block-column:hover h3 a {
	color: var(--gw-blue);
}

/*
 * Ausrichtung und Abstand unabhaengig von der Verschachtelung.
 *
 * Die Kachel «Wissenschaft» hat ihren Titel direkt in der Spalte, alle
 * anderen in der inneren Gruppe. Zwei Unterschiede wurden dadurch sichtbar:
 *
 * - Die Gruppe zentriert ihre Kinder (`align-items: center` aus dem Theme),
 *   die Spalte nicht. «3 Beitraege» stand deshalb als einziges links.
 * - Die Gruppe bringt einen eigenen Zeilenabstand mit; der Titel sass dort
 *   12 px tiefer als bei «Wissenschaft».
 *
 * Beides wird hier festgelegt: Alles linksbuendig ueber die volle
 * Kachelbreite, kein Zeilenabstand - den Abstand setzt der Aussenabstand des
 * Bildes. `.entry-content` steht davor, damit die Regel die Theme-Regeln
 * sicher ueberschreibt.
 */
/*
 * Die Klasse `.is-vertical` steht hier bewusst mit im Selektor.
 *
 * Weiter oben deckelt `.entry-content .wp-block-column >
 * .wp-block-group.is-vertical` den Abstand auf 0.75rem. Dieser Selektor
 * wiegt 0,4,0 und schlug die frühere Fassung dieser Regel (0,3,0) - die
 * Kacheln behielten ihre 12 px, obwohl hier `gap: 0` stand. Mit gleichem
 * Gewicht und späterer Position gewinnt jetzt diese Regel.
 */
.entry-content .gw-topics .wp-block-group.is-vertical,
.entry-content .gw-topics > .wp-block-column > .wp-block-group,
.entry-content .gw-topics > .wp-block-column {
	align-items: stretch;
	gap: 0;
}

/*
 * Titelabstand gleich, egal ob der Titel in der Gruppe liegt.
 *
 * `!important` ist hier nötig und nicht Bequemlichkeit: Weiter oben setzt
 * `.wp-block-column > * { margin-block: 0 !important }` alle Abstände im
 * Raster auf null, weil die Spalte den Abstand sonst doppelt vergibt. Bei
 * «Wissenschaft» steht der Titel direkt in der Spalte und wurde deshalb
 * als einziger von dieser Regel getroffen - «12 Beiträge» sass 2 px höher.
 */
.entry-content .gw-topics h2,
.entry-content .gw-topics h3,
.entry-content .gw-topics .wp-block-group.is-vertical > h2,
.entry-content .gw-topics .wp-block-group.is-vertical > h3,
.entry-content .gw-topics > .wp-block-column > h2,
.entry-content .gw-topics > .wp-block-column > h3 {
	margin-block: 0 0.15rem !important;
}

.entry-content .gw-topics h2,
.entry-content .gw-topics h3,
.entry-content .gw-topics .gw-topic-count {
	text-align: left;
	width: 100%;
}