/* Qigong Academy — „Still & Weit"
 *
 * ERZEUGT von bin/build_css.py aus assets/css/ — nicht hier bearbeiten,
 * Änderungen gehen beim nächsten Bauen verloren.
 *
 * Alles, was theme.json nicht ausdrücken kann. Jede Farbe, Größe und jeder
 * Abstand kommt aus den Presets; hier stehen die Verhältnisse, die
 * Core-Blöcke nicht kennen.
 *
 * Bruchstellen: 1024 px (Lektionszeilen), 900 px (Kopfzeile ordnet sich
 * um), 781/782 px (WordPress stapelt Spalten). Mehr gibt es nicht.
 *
 * Bausteine
 *   01-base.css
 *   02-layout.css
 *   03-typography.css
 *   04-buttons.css
 *   05-cards.css
 *   06-media.css
 *   07-rows.css
 *   08-faq.css
 *   09-form.css
 *   10-header.css
 *   11-mega-menu.css
 *   12-footer.css
 *   13-hero.css
 *   14-trust.css
 *   15-about.css
 *   16-documents.css
 *   17-blog.css
 *   18-books.css
 *   19-podcast.css
 *   20-currency.css
 *   21-video.css
 *   22-motion.css
 *   23-person.css
 *   24-steps.css
 *   25-rules.css
 *   26-week.css
 *   27-buy.css
 *   28-toc.css
 *   29-dates.css
 *   30-breadcrumbs.css
 */

/* ==== 01-base.css ======================================================= */

/* Grundlagen: Kantenglättung, Fokus, Sprungmarke, Anker, Zielgrößen. */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
}

:where(a, button, summary, input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--main);
	outline-offset: 3px;
}

/* Anker im Inhalt dürfen nicht unter der Kopfzeile verschwinden. */
:target {
	scroll-margin-top: 112px;
}

/*
 * Die Sprungmarke kommt von WordPress selbst (the_block_template_skip_link).
 * Sie ist versteckt, bis sie den Fokus bekommt — dann muss sie lesbar sein.
 * Ohne eigene Fläche stünde sie in Salbei auf dem Grund, der gerade unter ihr
 * liegt, und das ist am oberen Seitenrand die dunkle Kopfzeile.
 *
 * Größe und Zuschnitt von .screen-reader-text hebt WordPress im Fokus selbst
 * auf. Was es nicht zurücknimmt, ist margin: -1px aus der Grundregel —
 * deshalb saß die Marke im Fokus einen Pixel außerhalb des Bildes.
 */
.skip-link.screen-reader-text:focus {
	margin: 0;
	top: 0;
	left: 0;
	white-space: nowrap;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--body);
	padding: 12px 20px;
	border-radius: 0 0 12px;
	box-shadow: 0 6px 24px rgb(26 32 44 / 18%);
	text-decoration: none;
	z-index: 100000;
}

@media (max-width: 781px) {
	:target {
		scroll-margin-top: var(--qa-header-height, 72px);
	}
}

/* Auf Fingerbedienung nichts unter 44 px anfassbar machen. */
@media (pointer: coarse) {
	.qa-tlink a,
	.qa-login,
	.wp-block-navigation-item__content {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* ==== 02-layout.css ===================================================== */

/* Seitengerüst: Abschnittsrhythmus, Fuß am Fensterrand, Raster und Spalten. */

/* Abschnitte stoßen aneinander und tragen ihre Polsterung selbst.
 * WordPress setzt sonst blockGap zwischen die obersten Blöcke — 24 px, die im
 * Entwurf nicht vorgesehen sind und sich über acht Abschnitte auf fast 200 px
 * summieren. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.wp-block-post-content > .alignfull + .alignfull,
.wp-block-post-content > .alignfull:first-child {
	margin-block-start: 0;
}

/* Kurze Seiten: der Fuss steht am unteren Fensterrand statt mitten im Bild,
 * darunter blieb sonst ein heller Streifen. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

@media (max-width: 781px) {
	/* Core stapelt Spalten von selbst; Raster brauchen den Hinweis. */
	.qa-grid-2,
	.qa-grid-3,
	.qa-grid-4 {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Gestapelte Spalten brauchen einen eigenen, kleineren Abstand — der
	 * waagerechte von 48 px wirkt senkrecht als Loch. */
	.wp-block-columns.is-not-stacked-on-mobile,
	.wp-block-columns {
		gap: var(--wp--preset--spacing--60);
	}
}

/* ==== 03-typography.css ================================================= */

/* Textbausteine: Augenbraue, Lead, Kleintext, Textlink, Zahlen, Zitate,
 * Satzbreiten. */

h1, h2, h3, h4 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Die Augenbraue steht meist als Absatz über einer Überschrift; als <h6>
 * trägt sie theme.json bereits, als Absatz braucht sie diese Klasse. */
.qa-eyebrow {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--body);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-alt-accent);
}

.qa-lead {
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--line-height--relaxed);
	color: var(--wp--preset--color--secondary);
	/* Kein einzelnes Wort allein in der letzten Zeile. */
	text-wrap: pretty;
}

.qa-small {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: var(--wp--custom--line-height--relaxed);
	color: var(--wp--preset--color--secondary);
}

/* Die Augenbraue steht sonst in Sage Deep. Auf der mittleren Salbeifläche
 * ergibt das 4,35:1 — knapp unter dem, was WCAG für Fließtext verlangt.
 * Eine Stufe dunkler bringt 5,84:1, und das Auge merkt den Unterschied kaum.
 * Gemessen mit bin/check_type.py, nicht geschätzt. */
.has-primary-alt-background-color .qa-eyebrow {
	color: var(--wp--preset--color--primary-deep);
}

/* Auf dunklen Flächen erbt jeder Text die Flächenfarbe, statt seine eigene
 * mitzubringen.
 *
 * Die vier Flächen stehen bewusst in EINER Liste. Vorher gab es zwei Listen,
 * eine für Überschriften und eine für Hilfstexte, und in der zweiten fehlte
 * primary-alt-accent — ausgerechnet die Fläche des Schlussaufrufs. Der
 * Fließtext dort stand in dunklem Salbei auf dunklem Grün und war nicht zu
 * lesen. Wer eine Fläche ergänzt, ergänzt sie damit für alles. */
.has-main-background-color :where(h1, h2, h3, h4, h5, .qa-eyebrow, .qa-lead, .qa-small),
.has-primary-background-color :where(h1, h2, h3, h4, h5, .qa-eyebrow, .qa-lead, .qa-small),
.has-primary-alt-accent-background-color :where(h1, h2, h3, h4, h5, .qa-eyebrow, .qa-lead, .qa-small),
.has-primary-deep-background-color :where(h1, h2, h3, h4, h5, .qa-eyebrow, .qa-lead, .qa-small) {
	color: inherit;
}

/* Hilfstexte treten auf dunklem Grund leicht zurück — aber nur so weit, dass
 * sie den Kontrastwert noch halten. */
.has-main-background-color :where(.qa-lead, .qa-small),
.has-primary-background-color :where(.qa-lead, .qa-small),
.has-primary-alt-accent-background-color :where(.qa-lead, .qa-small),
.has-primary-deep-background-color :where(.qa-lead, .qa-small) {
	opacity: 0.88;
}

.qa-eyebrow--light {
	color: var(--wp--preset--color--border-dark);
}

/* Textlink mit tiefgesetzter, heller Unterlänge. */
.qa-tlink {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary-alt-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	text-decoration-color: var(--wp--preset--color--border-dark);
	transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

/* Beim Überfahren blendet der Verweis sanft von Grün zu Tinte über, die
 * Unterlänge färbt sich mit. Eine Linie, nicht zwei: die blasse bleibt
 * immer sichtbar, sonst wäre der Verweis nicht als Verweis zu erkennen. */
.qa-tlink a {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary-alt-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	text-decoration-color: var(--wp--preset--color--border-dark);
	cursor: pointer;
	transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

/*
 * Textlinks beim Drüberfahren: weiße Schrift auf dunklem Grün. Unübersehbar
 * auch für alle, die schlecht sehen oder die Brille gerade nicht aufhaben —
 * ein bloßer Farbwechsel von Grün zu Dunkelgrün geht da unter.
 *
 * Gilt für Links im Fließtext (Absätze, Listen) im Inhalt, im Teamfenster,
 * in den Brotkrumen und im Fuß; nicht für Knöpfe, Menüs und Bildlinks.
 */
:where(main, .qa-person, .qa-crumbs, footer) :where(p, li, dd, figcaption) a:not(.wp-element-button, .wp-block-button__link, :has(img)) {
	border-radius: 4px;
	transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, text-decoration-color 0.3s ease;
}

:where(main, .qa-person, .qa-crumbs, footer) :where(p, li, dd, figcaption) a:not(.wp-element-button, .wp-block-button__link, :has(img)):is(:hover, :focus-visible) {
	color: var(--wp--preset--color--base);
	text-decoration-color: transparent;
	background-color: var(--wp--preset--color--primary-alt-accent);
	box-shadow: 0 0 0 4px var(--wp--preset--color--primary-alt-accent);
}

/* Die großen Ordnungszahlen in „Deine erste Woche" und in der Lektionsliste. */
.qa-num {
	font-family: var(--wp--preset--font-family--expanded);
	font-weight: var(--wp--custom--font-weight--extra-light);
	font-size: var(--wp--preset--font-size--xxxx-large);
	line-height: var(--wp--custom--line-height--display);
	color: var(--wp--preset--color--primary);
}

.qa-price {
	font-family: var(--wp--preset--font-family--expanded);
	font-weight: var(--wp--custom--font-weight--light);
	font-size: var(--wp--preset--font-size--xxx-large);
	line-height: var(--wp--custom--line-height--display);
	color: var(--wp--preset--color--main);
}

.qa-price--small {
	font-size: var(--wp--preset--font-size--x-large);
}

.qa-price__unit {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--secondary);
}

/* Auf dunklen Flächen nimmt der Preis die Flächenfarbe an. */
.has-main-background-color .qa-price,
.has-primary-background-color .qa-price,
.has-primary-alt-accent-background-color .qa-price,
.has-primary-deep-background-color .qa-price {
	color: inherit;
}

.qa-fact {
	font-family: var(--wp--preset--font-family--expanded);
	font-weight: var(--wp--custom--font-weight--light);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--display);
	color: var(--wp--preset--color--main);
}

/* Zitat mit senkrechter Marke. */
.qa-quote {
	border-left: 2px solid var(--wp--preset--color--border-dark);
	padding-left: var(--wp--preset--spacing--80);
	margin: 0;
}

/* Nur der erste Absatz ist das Zitat. Ohne die Einschränkung erbt auch die
 * Quellenangabe Größe und Zeilenhöhe des Zitats — dann steht der Name so groß
 * da wie die Aussage, und die Karte wirkt in sich gleichförmig. */
.qa-quote > p:first-of-type {
	font-family: var(--wp--preset--font-family--expanded);
	font-weight: var(--wp--custom--font-weight--light);
	/* So groß wie der Fließtext: lange Stimmen werden sonst zur Textwand. */
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--main);
}

.qa-pull__source {
	opacity: 0.72;
}

/* Foto neben dem Namen unter einem Zitat. */
.qa-cite {
	align-items: center;
}

/* Der Name trägt die Aussage, die Herkunft ordnet sie ein — zwei Ebenen,
 * nicht eine Zeile aus Trennpunkten. */
.qa-cite__name {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--main);
}

.qa-cite__meta {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--secondary);
	margin-top: var(--wp--preset--spacing--10);
}

/* Ein Zitat über die ganze Breite, sehr leicht gesetzt. */
.qa-pull {
	max-width: 860px;
	margin-inline: auto;
	font-family: var(--wp--preset--font-family--expanded);
	font-weight: var(--wp--custom--font-weight--extra-light);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: var(--wp--custom--line-height--snug);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
}

/* Satzbreiten.
 *
 * Blockmarkup darf keine Inline-Stile enthalten, die der Block nicht selbst
 * erzeugt: der Editor meldet sie als ungültigen Inhalt, und die
 * Wiederherstellung wirft sie weg. Zeilenlängen kommen deshalb aus Klassen.
 * Mittig gesetzte Fließtexte bringen ihre Zentrierung gleich mit. */
.qa-measure--hero {
	max-width: 530px;
}

.qa-measure--title {
	max-width: 520px;
}

.qa-measure--note {
	max-width: 300px;
}

.qa-measure--lead {
	max-width: 620px;
	margin-inline: auto;
}

.qa-measure--lead-wide {
	max-width: 720px;
	margin-inline: auto;
}

.qa-measure--lead-left {
	max-width: 620px;
}

.qa-measure--tight {
	max-width: 560px;
	margin-inline: auto;
}

.qa-measure--tight-left {
	max-width: 560px;
}

.qa-measure--reading {
	max-width: var(--wp--custom--width--reading);
}

/* Zielgrößen: WCAG 2.2 verlangt für Bedienelemente mindestens 24 × 24 px.
 * Die Kategorie- und Schlagwortverweise unter einem Beitrag waren 16 bis
 * 18 px hoch. Die Polsterung vergrößert die Fläche, ohne dass der Text
 * größer wird — über die Zeilenhöhe ginge es nur auf Kosten der Lesbarkeit.
 * Gemessen: 13-px-Text mit Zeilenhöhe 1,5 ergibt 19,5 px, mit 4 px oben und
 * unten 27,5 px. */
.wp-block-post-terms a,
.qa-crumbs a {
	display: inline-block;
	padding-block: 4px;
	line-height: var(--wp--custom--line-height--body);
}

.wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

.qa-crumbs a {
	color: var(--wp--preset--color--primary-alt-accent);
}

/* Die Augenbraue über einer Karte ist meist selbst ein Verweis auf die
 * Kategorie. Sie darf durch die Polsterung nicht auseinanderrutschen. */
.qa-eyebrow.wp-block-post-terms {
	line-height: var(--wp--custom--line-height--body);
}

/* Ausgeschriebene Adressen im Fließtext umbrechen lassen. Der ARA-Beitrag
 * nennt drei lange Konferenz-URLs als Linktext; auf dem Telefon schoben sie
 * die Seite auf 518 px Breite. */
.wp-block-post-content p a,
.wp-block-post-content li a {
	overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
	.qa-tlink a {
		transition: none;
	}
}

/* Links in weiß gesetztem Text — etwa über Bildern im Hero — übernehmen die
 * Textfarbe. In der Akzentfarbe wären sie auf dunklem Grund kaum lesbar;
 * die Unterstreichung zeigt weiter, dass es ein Link ist. */
.has-base-color a:not(.wp-element-button) {
	color: inherit;
	text-decoration-color: currentcolor;
}

/* Ein Satz des Gründers direkt über dem Preis: groß, leicht, ohne Rahmen. */
.qa-founder__quote {
	max-width: 760px;
	margin-inline: auto;
	font-family: var(--wp--preset--font-family--expanded);
	font-weight: var(--wp--custom--font-weight--light);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--main);
	text-wrap: balance;
}

/* ==== 04-buttons.css ==================================================== */

/* Schaltflächen: gefüllt (Core), Umriss (Core) und hell (qa-light). */

/*
 * Rückmeldung, keine Show. Eine Schaltfläche soll unter dem Zeiger reagieren
 * und beim Drücken nachgeben — das ist die Erwartung an ein Ding, das man
 * anfasst. Zwei Pixel reichen dafür.
 *
 * Beim Überfahren erscheint ein Verlauf von Salbei nach Tinte — die beiden
 * Enden der Farbskala der Marke. Er liegt als eigene Schicht (::before)
 * hinter der Beschriftung, nicht als background-image auf dem Knopf selbst:
 * ein Hintergrundbild lässt sich nicht weich überblenden, es springt. Eine
 * Schicht mit wechselnder Deckkraft blendet weich.
 *
 * z-index: -1 auf der Schicht und isolation: isolate auf dem Knopf halten
 * sie zwischen Knopffläche und Text. Ohne isolation stiege sie in einen
 * darüberliegenden Stapelkontext auf und legte sich über den Text.
 *
 * Das Absenden des Kontaktformulars ist kein Block-Button, sieht aber so aus
 * und teilt sich deshalb diese Regeln.
 */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 56px;
	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease,
		transform 0.18s var(--qa-anim-easing),
		box-shadow 0.24s var(--qa-anim-easing);
}

.wp-block-button__link,
.qa-form__submit {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.wp-block-button__link::before,
.qa-form__submit::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(
		112deg,
		var(--wp--preset--color--primary-alt-accent) 0%,
		var(--wp--preset--color--primary-deep) 42%,
		var(--wp--preset--color--main) 100%
	);
	opacity: 0;
	transition: opacity 0.3s var(--qa-anim-easing, ease-out);
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgb(74 87 48 / 22%);
}

/* Beim Drücken zurück auf die Fläche: die Bewegung folgt dem Finger. */
.wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgb(74 87 48 / 18%);
	transition-duration: 0.06s;
}

.wp-block-button__link:hover::before,
.wp-block-button__link:focus-visible::before,
.qa-form__submit:hover::before,
.qa-form__submit:focus-visible::before {
	opacity: 1;
}

/* Auf dem Verlauf steht die Schrift weiß — bei jeder Knopfart. */
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.qa-form__submit:hover,
.qa-form__submit:focus-visible {
	color: var(--wp--preset--color--base);
}

/* Umriss: leer, füllt sich beim Überfahren mit dem Verlauf. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary-alt-accent);
	border-color: var(--wp--preset--color--primary-alt-accent);
}

/* Die Varianten setzen ihre dunkle Schrift über .wp-block-button.is-style-…
 * und gewinnen damit gegen die allgemeine Regel aus zwei Klassen. Ohne die
 * gleichrangige Wiederholung bliebe die Schrift auf dem Verlauf dunkel und
 * verschwände darin — genau das war zu sehen. */
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: transparent;
	color: var(--wp--preset--color--base);
	border-color: transparent;
}

.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--base);
}

/* Hell: für dunkle Flächen und Bilder. Beim Überfahren behält er seine weiße
 * Grundfläche, sichtbar wird der Verlauf. Ein dunkler Schatten wäre auf
 * dunklem Grund unsichtbar — er bekommt einen tieferen. */
.wp-block-button.is-style-qa-light > .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-deep);
	border-color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-qa-light > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary-accent);
	box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
}

.wp-block-button.is-style-qa-light > .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--base);
}

/* Auf dunklem Grund ohne Füllung: nur Rand. */
.has-main-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-primary-alt-accent-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-primary-deep-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border-color: rgb(255 255 255 / 40%);
}

/* Beim Überfahren füllt er sich weiß statt mit dem Verlauf: der dunkle
 * Verlauf auf dunklem Grund wirkt trüb, und die Schrift ginge darin unter. */
.has-main-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-main-background-color .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible,
.has-primary-alt-accent-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-primary-alt-accent-background-color .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible,
.has-primary-deep-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-primary-deep-background-color .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-deep);
	border-color: var(--wp--preset--color--base);
	box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
}

.has-main-background-color .wp-block-button.is-style-outline > .wp-block-button__link::before,
.has-primary-alt-accent-background-color .wp-block-button.is-style-outline > .wp-block-button__link::before,
.has-primary-deep-background-color .wp-block-button.is-style-outline > .wp-block-button__link::before {
	content: none;
}

.qa-btn-block .wp-block-button__link {
	justify-content: center;
	width: 100%;
}

@media (max-width: 781px) {
	.wp-block-buttons .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons .wp-block-button__link {
		justify-content: center;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link:hover,
	.wp-block-button__link:active {
		transform: none;
	}

	.wp-block-button__link::before,
	.qa-form__submit::before {
		transition: none;
	}
}

/* ==== 05-cards.css ====================================================== */

/* Flächen: Karte, Verweiskarte, Bildtafel, Merker, Häkchenliste, Chips,
 * Seitenkasten, Produkt. */

.qa-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--preset--border-radius--sm);
	overflow: hidden;
}

.qa-card--marked {
	border-color: var(--wp--preset--color--primary-alt-accent);
	border-width: 1.5px;
}

/*
 * Die Karte mit der Fahne darf nicht clippen. .qa-card trägt
 * overflow: hidden, damit Bilder in der Rundung bleiben — die Fahne ragt aber
 * 13 px über die Oberkante hinaus und wurde dort abgeschnitten. Diese Karte
 * hat kein Bild, sie kann den Überstand zeigen. Gemessen, nicht geraten.
 */
.qa-card--flagged {
	overflow: visible;
}

/* Kartenbilder auf gleiche Höhe: sonst bestimmt das Seitenverhältnis der
 * Datei die Kartenhöhe, und eine Reihe steht ungleich. */
.qa-card__image {
	margin: 0;
}

.qa-card__image img {
	width: 100%;
	height: 210px;
	object-fit: cover;
	border-radius: 0;
}

.qa-card__image--short img {
	height: 240px;
}

/* Kurscover aus Circle: Titel steht im Bild, also ganz zeigen, nie beschneiden. */
/* Kein eigenes aspect-ratio: das Seitenverhältnis kommt aus width/height des
 * Bildes. Ein „auto" hier ließe die Platzhaltergröße von WordPress (3000 × 1500
 * für träge geladene Bilder) gewinnen, und das Cover würde riesig. */
.qa-card__image--cover img {
	height: auto;
}

/* Termine haben Fotos statt Cover: alle im selben 16:9-Ausschnitt, damit die
 * Karten einer Reihe gleich hoch beginnen. Gesichter sitzen meist oben. */
.qa-eventcards .qa-card__image--cover img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: 50% 30%;
}

/* Karte als Ganzes anklickbar: der Link im Titel legt sich über die Karte,
 * damit kein zweiter, leerer Link im Baum steht. Karten einer Reihe füllen
 * die Spaltenhöhe, damit die Unterkanten fluchten.
 *
 * Beim Überfahren hebt die Karte etwas an, und ihr Bild rückt sacht nach —
 * zwei Bewegungen, die dasselbe sagen, aber unterschiedlich schnell sind.
 * Das liest sich als Tiefe, nicht als Effekt. */
.qa-linkcard {
	position: relative;
	height: 100%;
	transition:
		border-color 0.18s ease,
		transform 0.24s var(--qa-anim-easing),
		box-shadow 0.28s var(--qa-anim-easing);
}

.qa-linkcard:hover {
	border-color: var(--wp--preset--color--border-dark);
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgb(26 32 44 / 10%);
}

/* Der Titel ist der Link auf die ganze Karte — als Überschrift gesetzt,
 * nicht als Link ausgezeichnet. */
.qa-linkcard__title a {
	color: inherit;
	text-decoration: none;
}

.qa-linkcard__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.qa-linkcard:hover .qa-linkcard__title a {
	color: var(--wp--preset--color--primary-alt-accent);
}

.qa-linkcard .qa-card__image,
.qa-linkcard .qa-book-cover {
	overflow: hidden;
}

.qa-linkcard .qa-card__image img,
.qa-linkcard .qa-book-cover img {
	transition: transform 0.5s var(--qa-anim-easing);
}

.qa-linkcard:hover .qa-card__image img,
.qa-linkcard:hover .qa-book-cover img {
	transform: scale(1.035);
}

/* Bildtafel mit Verlauf — die beiden Wege auf der Startseite. Dieselbe
 * Bewegung wie die Karten, eine Spur langsamer, weil sie größer sind:
 * große Flächen dürfen sich nicht schnell bewegen. */
.qa-panel {
	border-radius: var(--wp--preset--border-radius--sm);
	overflow: hidden;
	transition:
		transform 0.32s var(--qa-anim-easing),
		box-shadow 0.32s var(--qa-anim-easing);
}

.qa-panel:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgb(26 32 44 / 16%);
}

.qa-panel > .wp-block-cover__inner-container {
	align-self: flex-end;
	width: 100%;
}

.qa-panel img {
	transition: transform 0.7s var(--qa-anim-easing);
}

.qa-panel:hover img {
	transform: scale(1.04);
}

.qa-panel__title {
	font-family: var(--wp--preset--font-family--expanded);
	font-weight: var(--wp--custom--font-weight--light);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--letter-spacing--display);
	color: var(--wp--preset--color--base);
}

.qa-panel__link a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--10);
	border-bottom: 1px solid rgb(255 255 255 / 50%);
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: border-color 0.18s ease;
}

.qa-panel__link a:hover {
	border-bottom-color: var(--wp--preset--color--base);
}

/* Pfeil hinter dem Tafel-Link — aus Rändern gebaut, damit er die Textfarbe erbt. */
.qa-panel__link a::after {
	content: "";
	width: 7px;
	height: 7px;
	border-top: 1.4px solid currentcolor;
	border-right: 1.4px solid currentcolor;
	transform: rotate(45deg);
	transition: transform 0.18s ease;
}

.qa-panel__link a:hover::after {
	transform: rotate(45deg) translate(2px, -2px);
}

.qa-rule {
	height: 1px;
	background: var(--wp--preset--color--border-light);
	border: 0;
	margin: 0;
}

/* Merker auf der hervorgehobenen Preiskarte. */
.qa-flag {
	position: absolute;
	top: -14px;
	left: var(--wp--preset--spacing--90);
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 var(--wp--preset--spacing--40);
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--primary-alt-accent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--xx-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Merkmalslisten mit Häkchen — ohne Aufzählungspunkte. */
.qa-ticks {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	/* Der ganze Abstand zwischen den Punkten, an einer Stelle: Ollie setzt
	 * zusätzlich einen Rand unter jeden Listenpunkt, der hier entfällt. */
	gap: var(--wp--preset--spacing--70);
}

.qa-ticks li {
	margin-bottom: 0;
	position: relative;
	padding-left: var(--wp--preset--spacing--80);
	font-size: var(--wp--preset--font-size--small);
}

/* Abstandsstufen aus den Listen-Stilen (inc/blocks.php). Standard ohne
 * Auswahl: 28 px. Die Haken-Liste setzt den Abstand per gap; jede andere
 * Liste über den Rand unter dem Punkt, den Ollie sonst auf 16 px setzt. */
.qa-ticks.is-style-qa-tight {
	gap: var(--wp--preset--spacing--10);
}

.qa-ticks.is-style-qa-compact {
	gap: var(--wp--preset--spacing--30);
}

.qa-ticks.is-style-qa-airy {
	gap: var(--wp--preset--spacing--90);
}

.qa-ticks.is-style-qa-spacious {
	gap: var(--wp--preset--spacing--100);
}

.wp-block-list.is-style-qa-tight:not(.qa-ticks) > li {
	margin-bottom: var(--wp--preset--spacing--10);
}

.wp-block-list.is-style-qa-compact:not(.qa-ticks) > li {
	margin-bottom: var(--wp--preset--spacing--30);
}

.wp-block-list.is-style-qa-airy:not(.qa-ticks) > li {
	margin-bottom: var(--wp--preset--spacing--90);
}

.wp-block-list.is-style-qa-spacious:not(.qa-ticks) > li {
	margin-bottom: var(--wp--preset--spacing--100);
}

.qa-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 16px;
	height: 9px;
	border-left: 1.6px solid var(--wp--preset--color--primary-alt-accent);
	border-bottom: 1.6px solid var(--wp--preset--color--primary-alt-accent);
	transform: rotate(-45deg);
}

/* Gegenstück zur Haken-Liste: „nicht das Richtige, wenn …“. Ein leises
 * Kreuz statt eines Hakens, sonst gleich gesetzt — so stehen beide Listen
 * nebeneinander auf einer Linie. */
.qa-ticks--cross li::before {
	top: 0.35em;
	width: 12px;
	height: 12px;
	border: 0;
	transform: none;
	background:
		linear-gradient(45deg, transparent 45%, var(--wp--preset--color--secondary) 45% 55%, transparent 55%),
		linear-gradient(-45deg, transparent 45%, var(--wp--preset--color--secondary) 45% 55%, transparent 55%);
}

/* Spalten als Karten: auf getönter Fläche heben sich kurze Textblöcke so
 * voneinander ab, statt als Fließtext nebeneinander zu stehen. */
/* Karten einer Reihe gleich hoch, auch wenn die Spalten oben ausgerichtet
 * sind — sonst endet jede Karte mit ihrem Text. */
.qa-cols-cards > .wp-block-column {
	align-self: stretch;
	padding: var(--wp--preset--spacing--80);
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--preset--border-radius--sm);
}

.qa-cols-cards > .wp-block-column > :first-child {
	margin-top: 0;
}

/* Titel über dem Video (Modulkarten der Teacher Training): der Titel sagt,
 * worum es geht, das Video zeigt es. */
.qa-card > .wp-block-heading + .qa-card__media {
	margin-top: var(--wp--preset--spacing--50);
}

.qa-aside {
	border-radius: var(--wp--preset--border-radius--sm);
}

.qa-aside--dark .qa-small {
	color: rgb(255 255 255 / 70%);
}

.qa-product__image img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--wp--preset--color--primary-accent);
}

.qa-product__price {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--primary-alt-accent);
	white-space: nowrap;
}

.qa-detail {
	overflow: hidden;
}

.qa-detail__image img {
	width: 100%;
	height: 100%;
	min-height: 440px;
	object-fit: cover;
	background: var(--wp--preset--color--base);
	border-radius: 0;
}

@media (max-width: 781px) {
	.qa-panel {
		min-height: 300px;
	}

	.qa-flag {
		left: var(--wp--preset--spacing--60);
	}

	.qa-detail__image img {
		min-height: 280px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qa-linkcard:hover,
	.qa-panel:hover,
	.qa-linkcard:hover .qa-card__image img,
	.qa-linkcard:hover .qa-book-cover img,
	.qa-panel:hover img {
		transform: none;
	}
}

/* Kurskarte der Übersicht: Text oben, Knopf unten bündig über alle Karten
 * einer Reihe. Der Knopf liegt über dem Flächen-Link der Karte. */
.qa-coursecard {
	display: flex;
	flex-direction: column;
}

.qa-coursecard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80) var(--wp--preset--spacing--80);
}

.qa-coursecard__action {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--70);
}

/* YouTube-Zeichen vor einem Knopf, als Maske: die Farbe folgt der Schrift. */
.qa-btn-youtube .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	margin-right: 0.5em;
	vertical-align: -0.25em;
	background-color: currentcolor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==== 06-media.css ====================================================== */

/* Bilder, Videos im Inhalt und Zeichen. */

/* Bild neben einer Textspalte: feste Höhe, damit beide Spalten gleich hoch
 * enden — sonst bestimmt das Seitenverhältnis der Datei den Abschnitt. */
.qa-image--tall img {
	width: 100%;
	height: 520px;
	object-fit: cover;
}

/* Bild neben Text, das sein Format behalten darf (Bildschirmfotos). */
.qa-image--soft img {
	width: 100%;
	height: auto;
}

.qa-image--band img {
	width: 100%;
	height: 520px;
	object-fit: cover;
}

/* In schmalen Spalten (drei und mehr nebeneinander) wird aus dem Band ein
 * Hochkant-Streifen: das Bild wird stark vergrößert und unscharf. Dort gilt
 * ein ruhiges Querformat, wie es auch der Editor zeigt. */
.wp-block-columns:has(> .wp-block-column:nth-child(3)) .qa-image--band img {
	height: auto;
	aspect-ratio: 3 / 2;
}

/* Nebeneinander im Wechsel klein, groß, klein, groß: die Reihe bekommt einen
 * ruhigen Rhythmus statt einer starren Linie. Gestapelt (Handy) bleibt es
 * einheitlich. */
@media (min-width: 782px) {
	.wp-block-columns:has(> .wp-block-column:nth-child(3)) > .wp-block-column:nth-child(even) .qa-image--band img {
		aspect-ratio: 1;
	}
}

/* Bild über einer Karte: einheitliches Querformat, damit die Überschriften
 * einer Reihe auf einer Linie beginnen — die Dateien von Circle haben jedes
 * ein anderes Format. */
.qa-image--card {
	margin: 0 0 var(--wp--preset--spacing--50);
}

.qa-image--card img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Video: Querformat, schwarzer Grund hinter dem Standbild. */
.qa-clip {
	margin: 0;
}

.qa-clip video {
	display: block;
	border-radius: var(--wp--preset--border-radius--sm);
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--main);
	object-fit: cover;
}

/* Video oben in einer Karte. Steht nach .qa-clip, damit der Abstand nach
 * unten gegen dessen margin: 0 gewinnt. */
.qa-card__media {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* Im Fluss eines Abschnitts nicht breiter als der Lesetext; zentriert wird
 * es vom constrained-Layout des Abschnitts. */
section > .qa-clip {
	max-width: 52rem;
	/* .qa-clip nimmt den Abstand des Abschnitts weg; vom Text darüber 32 px. */
	margin-block-start: var(--wp--preset--spacing--80);
}

/* Hochformat (Handyaufnahme) im Hero: so hoch wie die Bilder daneben. */
.qa-clip--portrait video {
	aspect-ratio: 9 / 16;
	height: 520px;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
}

/* Foto neben dem Namen unter einem Zitat. */
.qa-cite__avatar {
	flex: none;
	margin: 0;
}

.qa-cite__avatar img {
	width: 56px;
	height: 56px;
	border-radius: var(--wp--preset--border-radius--full);
	object-fit: cover;
}

/* Anfangsbuchstabe statt Foto: so groß wie das Foto, in der Grundfarbe. */
.qa-cite__initial {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0;
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1;
}

/* Icons als Maske statt als Bild: die Form steckt im data-URI, die Farbe
 * kommt aus den Presets. So bleibt ein Icon umfärbbar, ohne dass für jede
 * Farbvariante eine zweite Datei in der Mediathek liegt — und die Mediathek
 * muss keine SVG annehmen, was auf verwalteten Hostern oft gesperrt ist. */
.qa-icon {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.qa-icon--live {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10.2 8.6 15.4 12l-5.2 3.4z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10.2 8.6 15.4 12l-5.2 3.4z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

.qa-icon--replay {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.4-5.7'/%3E%3Cpath d='M20 3.5V7h-3.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.4-5.7'/%3E%3Cpath d='M20 3.5V7h-3.5'/%3E%3C/svg%3E");
}

.qa-icon--course {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h6a2.5 2.5 0 0 1 2 1 2.5 2.5 0 0 1 2-1h6v13h-6a2.5 2.5 0 0 0-2 1 2.5 2.5 0 0 0-2-1H4z'/%3E%3Cpath d='M12 6.5v12'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h6a2.5 2.5 0 0 1 2 1 2.5 2.5 0 0 1 2-1h6v13h-6a2.5 2.5 0 0 0-2 1 2.5 2.5 0 0 0-2-1H4z'/%3E%3Cpath d='M12 6.5v12'/%3E%3C/svg%3E");
}

.qa-icon--community {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='3.2'/%3E%3Cpath d='M3.4 19a5.8 5.8 0 0 1 11.2 0'/%3E%3Cpath d='M16 6.2a3.2 3.2 0 0 1 0 5.6M17.6 19a5.8 5.8 0 0 0-1.6-4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='3.2'/%3E%3Cpath d='M3.4 19a5.8 5.8 0 0 1 11.2 0'/%3E%3Cpath d='M16 6.2a3.2 3.2 0 0 1 0 5.6M17.6 19a5.8 5.8 0 0 0-1.6-4'/%3E%3C/svg%3E");
}

@media (max-width: 781px) {
	.qa-image--tall img {
		height: 320px;
	}

	.qa-image--band img {
		height: 300px;
	}

	.qa-clip--portrait video {
		height: 420px;
	}

	.qa-icon {
		width: 24px;
		height: 24px;
	}
}

/* Hochkant-Video neben einem Textblock: so hoch wie der Text, oben und unten
 * bündig mit ihm. Die Spalte muss dafür gestreckt sein (verticalAlignment
 * stretch); das Video liegt absolut darin, damit seine eigene Höhe die Zeile
 * nicht aufbläht. Gestapelt auf dem Telefon gilt wieder eine feste Höhe. */
.wp-block-column:has(> .qa-clip--fill) {
	position: relative;
}

.qa-clip--fill {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: flex-end;
}

.qa-clip--fill video {
	width: auto;
	max-width: 100%;
	height: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
}

@media (max-width: 781px) {
	.qa-clip--fill {
		position: static;
		justify-content: center;
	}

	.qa-clip--fill video {
		height: 560px;
	}
}

/* ==== 07-rows.css ======================================================= */

/* Zeilenlisten: Lektionen, Episoden, Wochenplan. */

/* Lektions- und Episodenzeilen: ein Raster, kein Fließtext — Nummer, Inhalt,
 * Dauer. */
.qa-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--60) 0;
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.qa-row:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.qa-row__number {
	font-family: var(--wp--preset--font-family--expanded);
	font-weight: var(--wp--custom--font-weight--extra-light);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--primary-alt-accent);
	min-width: 34px;
}

.qa-row__title {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--main);
}

.qa-row__meta {
	white-space: nowrap;
}

/* Im Wochenplan steht links ein Tagesname statt einer zweistelligen Nummer.
 * „Every weekday" ist dreimal so breit wie „Friday" — bei automatischer
 * Spaltenbreite beginnt jede Zeile woanders und nichts steht in der Flucht.
 * Eine feste erste Spalte richtet alles aneinander aus. */
.qa-rows--days .qa-row {
	grid-template-columns: 168px minmax(0, 1fr) auto;
	align-items: baseline;
}

.qa-rows--days .qa-row__number {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: var(--wp--custom--font-weight--medium);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-alt-accent);
	min-width: 0;
}

/* Kursmodule mit Inhalt: Punkte, Einführungsvideo oder Zeichnungen der
 * Bewegungen stehen unter der Beschreibung. Nummer und Dauer bleiben oben auf
 * Höhe des Titels, statt in die Mitte eines hohen Moduls zu rutschen. */
.qa-row--module {
	align-items: start;
	padding-block: var(--wp--preset--spacing--80);
}

.qa-row--module .qa-row__number,
.qa-row--module .qa-row__meta {
	line-height: var(--wp--custom--line-height--snug);
}

.qa-row__points {
	margin-top: var(--wp--preset--spacing--60);
}

.qa-row__media {
	margin-top: var(--wp--preset--spacing--70);
	margin-bottom: 0;
}

/* Fotos zum Modul: ein ruhiges Querformat, gleich bei jedem Kurs. */
.qa-row__media--photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--wp--preset--border-radius--sm);
}

/* Strichzeichnungen auf Weiß: eine helle Fläche mit Rand, damit sie nicht
 * im Seitenhintergrund schwimmen. */
.qa-row__media--drawing img {
	width: 100%;
	height: auto;
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--preset--border-radius--sm);
}

@media (max-width: 1024px) {
	.qa-row {
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--20);
	}

	.qa-row > :last-child {
		grid-column: 2;
	}
}

@media (max-width: 781px) {
	.qa-rows--days .qa-row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--20);
	}

	/* Wochenplan auf dem Telefon: die Regel für schmale Geräte schiebt das letzte
	 * Kind jeder Zeile in Spalte 2 — der Wochenplan hat dort aber nur eine
	 * Spalte. Tag und Kurstitel landeten übereinander und waren unlesbar. */
	.qa-rows--days .qa-row > :last-child {
		grid-column: 1;
	}
}

/* ==== 08-faq.css ======================================================== */

/* Aufklapper der Fragenseite und Suchfeld. Der Pfeil dreht sich, statt
 * ausgetauscht zu werden. */
.wp-block-details {
	border-top: 1px solid var(--wp--preset--color--border-light);
	padding: var(--wp--preset--spacing--70) 0;
}

.wp-block-details:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.wp-block-details summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--80);
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--expanded);
	font-weight: var(--wp--custom--font-weight--light);
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--main);
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	border-right: 1.6px solid var(--wp--preset--color--primary-alt-accent);
	border-bottom: 1.6px solid var(--wp--preset--color--primary-alt-accent);
	transform: rotate(45deg) translate(-3px, -3px);
	transition: transform 0.28s var(--qa-anim-easing);
}

.wp-block-details[open] summary::after {
	transform: rotate(225deg) translate(-3px, -3px);
}

.wp-block-details > :not(summary) {
	margin-top: var(--wp--preset--spacing--50);
	max-width: var(--wp--custom--width--reading);
}

/* Suchfeld: dieselbe Pille wie die Schaltflächen, damit es nicht wie ein
 * Fremdkörper aus dem Backend aussieht. */
.qa-search .wp-block-search__inside-wrapper {
	max-width: 560px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--10) var(--wp--preset--spacing--10) var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--base);
}

/* Drei Klassen tief, weil Ollies style.css jedem Feld Rahmen, Radius und
 * Schatten gibt — über `input:not([type="submit"]):not([type="radio"])`, und
 * das wiegt mehr als zwei Klassen. Sonst steckt ein Kasten in der Pille. */
.qa-search .wp-block-search__inside-wrapper .wp-block-search__input {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	font-size: var(--wp--preset--font-size--small);
}

/* Der Fokus wandert auf die Pille: das Feld selbst hat keinen Rahmen mehr,
 * eine Anzeige, wo man gerade tippt, braucht es trotzdem. */
.qa-search .wp-block-search__inside-wrapper .wp-block-search__input:focus {
	outline: none;
}

.qa-search .wp-block-search__inside-wrapper:has(.wp-block-search__input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary-alt-accent);
	outline-offset: 2px;
}

.qa-search .wp-block-search__button {
	margin-left: var(--wp--preset--spacing--30);
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--primary-alt-accent);
	color: var(--wp--preset--color--base);
	border: 0;
	min-height: 46px;
	padding-inline: var(--wp--preset--spacing--60);
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--x-small);
}

.qa-answers .wp-block-details:first-of-type {
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.qa-answers summary::after {
	transition: transform 0.28s var(--qa-anim-easing);
}

/* ==== 09-form.css ======================================================= */

/* Formulare: Felder, Kontaktformular, Rückmeldungen. */

/* Formularfelder. Echte <input> und <textarea>: der Entwurf zeigte hier leere
 * Kästen, die wie Felder aussahen — für eine Tastatur war die Seite leer. */
.qa-field {
	display: block;
	width: 100%;
	min-height: 58px;
	padding: 0 var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--field-border);
	border-radius: var(--wp--preset--border-radius--sm);
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--main);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.qa-field:hover {
	border-color: var(--wp--preset--color--border-dark);
}

/* Der Fokus muss deutlich sein, nicht dezent: er ist für manche Leute die
 * einzige Anzeige, wo sie gerade sind. */
.qa-field:focus,
.qa-field:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-alt-accent);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--primary-alt-accent);
}

.qa-field--large {
	min-height: 168px;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	resize: vertical;
}

/* Formular — im Entwurf ohne Verarbeitung, aber mit den richtigen Maßen. */
.qa-form {
	max-width: 560px;
}

.qa-form__label {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--secondary);
}

.qa-form__form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--70);
	max-width: 560px;
}

.qa-form__row {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.qa-form__row--checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--50);
}

/* Das Kästchen ist ein Ziel für einen Finger, nicht für eine Nadel:
 * WCAG 2.2 verlangt mindestens 24 px. Mit width allein blieb es 13 px breit —
 * der Browser bringt für ein Kontrollkästchen eine eigene Breite mit, gegen
 * die sich nur min-width durchsetzt. */
.qa-check {
	width: 24px;
	min-width: 24px;
	height: 24px;
	min-height: 24px;
	flex: 0 0 24px;
	margin: 2px 0 0;
	accent-color: var(--wp--preset--color--primary-alt-accent);
}

.qa-check:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-alt-accent);
	outline-offset: 3px;
}

.qa-form__required {
	color: var(--wp--preset--color--primary-alt-accent);
	margin-left: 2px;
}

.qa-form__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--70);
}

.qa-form__submit {
	border: 0;
	cursor: pointer;
	transition:
		background-color 0.18s ease,
		transform 0.18s var(--qa-anim-easing),
		box-shadow 0.24s var(--qa-anim-easing);
}

.qa-form__submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgb(74 87 48 / 22%);
}

.qa-form__submit:active {
	transform: translateY(0);
	transition-duration: 0.06s;
}

/* Rückmeldungen stehen über dem Formular, nicht darunter: wer nach dem
 * Absenden zurückkommt, landet oben und soll dort erfahren, was passiert ist. */
.qa-form__notice {
	border-radius: var(--wp--preset--border-radius--sm);
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
	margin-bottom: var(--wp--preset--spacing--80);
	max-width: 560px;
}

.qa-form__notice p {
	margin: 0;
}

.qa-form__notice p + p,
.qa-form__notice ul {
	margin-top: var(--wp--preset--spacing--30);
}

.qa-form__notice ul {
	margin-bottom: 0;
	padding-left: 1.15em;
}

.qa-form__notice--success {
	background-color: var(--wp--preset--color--primary-accent);
	box-shadow: inset 3px 0 0 var(--wp--preset--color--primary-alt-accent);
}

/* Rot allein wäre eine Aussage, die manche nicht sehen. Deshalb trägt der
 * Kasten zusätzlich eine Kante und der Text sagt selbst, was los ist. */
.qa-form__notice--error {
	background-color: #fdf3ef;
	box-shadow: inset 3px 0 0 #a8442a;
	color: #6b2415;
}

.qa-form__notice--error a {
	color: inherit;
}

/* Der Honigtopf: für Augen und Screenreader nicht da, für ein Skript schon. */
.qa-form__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.qa-form__submit:hover {
		transform: none;
	}
}

/* ==== 10-header.css ===================================================== */

/* Kopfzeile: Rahmen, Marke, Navigation, Anmeldung, Aufruf und das mobile
 * Menü.
 *
 * Auf Innenseiten klebt sie oben und trägt von Anfang an ihren Grund. Über dem
 * Hero liegt sie im Bild und ist durchsichtig — bis gescrollt wird; dann
 * bekommt sie denselben Grund, damit weiße Schrift nicht auf hellem Inhalt
 * steht. Den Wechsel meldet assets/header.js über .is-stuck.
 *
 * Warum eigenes CSS und nicht die Position-Unterstützung des Cores: die greift
 * an Blöcken, nicht am Rahmen eines Template-Parts, und sie kennt nur
 * „sticky". Der Zustand über dem Hero braucht „fixed" plus einen Wechsel der
 * Farben, den kein Blockattribut ausdrückt. */

.qa-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--tertiary);
	transition: background-color 0.22s ease, box-shadow 0.22s ease;
}

.qa-site-header.is-stuck {
	box-shadow: 0 1px 0 var(--wp--preset--color--border-light), 0 10px 26px rgb(26 32 44 / 6%);
}

/* Über dem Bild nimmt die Kopfzeile keinen Platz ein, der Hero beginnt oben. */
.qa-site-header--over {
	position: fixed;
	inset: 0 0 auto;
	background: transparent;
	box-shadow: none;
}

.qa-site-header--over.is-stuck {
	background: var(--wp--preset--color--tertiary);
}

.qa-header__sentinel {
	position: absolute;
	top: 0;
	height: 1px;
	width: 1px;
	pointer-events: none;
}

/* Die innere Gruppe trägt nur die Polsterung — Position, Grund und Zustand
 * sitzen am Rahmen .qa-site-header, den das Template setzt. */
.qa-header {
	position: relative;
}

/*
 * Drei Bereiche: Wege links, Marke in der Mitte, Handlung rechts.
 *
 * Als Raster mit 1fr auto 1fr, nicht als Flex mit space-between: nur so steht
 * die Marke wirklich mittig im Fenster. Bei space-between hinge ihre Lage von
 * der Breite der beiden Seiten ab, und die ändert sich mit jeder Übersetzung.
 */
.qa-header__row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
}

/* Kein Blockabstand in der Kopfzeile: WordPress gibt Elementen nach dem
 * ersten einen Abstand oben, der den Aufruf aus der Mitte schiebt. */
.qa-header__row > * {
	margin-block: 0;
}

.qa-header__nav {
	justify-self: start;
	min-width: 0;
}

.qa-header__actions {
	justify-self: end;
}

/* Marke. Sie wächst beim Überfahren eine Spur: es soll sich anfassbar
 * anfühlen, nicht hüpfen. */
.qa-brand {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	text-decoration: none;
}

.qa-header .qa-brand {
	display: inline-block;
	justify-self: center;
	margin: 0;
	transition: transform 0.28s var(--qa-anim-easing, ease-out);
	transform-origin: center;
	will-change: auto;
}

.qa-header .qa-brand a {
	display: inline-block;
	transition: transform 0.28s var(--qa-anim-easing, ease-out);
	transform-origin: center;
	will-change: auto;
}

.qa-header .qa-brand:hover,
.qa-header .qa-brand a:hover {
	transform: scale(1.04);
}

.qa-header .qa-brand img {
	width: 150px;
	height: auto;
	display: block;
}

/*
 * Der Anmeldeverweis. Gefärbt wird das <a>, nicht sein Absatz: der Verweis
 * holt seine Farbe aus den Verweisregeln und übersteuert das Geerbte —
 * deshalb stand „Log in" einmal grün auf dem Foto, kaum lesbar.
 *
 * Beim Überfahren wächst die Unterlänge ein — dieselbe Bewegung wie in der
 * Navigation, damit beides als dieselbe Art Verweis zu erkennen ist.
 */
.qa-login {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.qa-login a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentcolor, currentcolor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size 0.28s var(--qa-anim-easing, ease-out), color 0.18s ease;
}

.qa-login a:hover {
	color: var(--wp--preset--color--primary-alt-accent);
}

.qa-login a:hover,
.qa-login a:focus-visible {
	background-size: 100% 1px;
}

.qa-site-header:not(.qa-site-header--over) .qa-login a {
	color: var(--wp--preset--color--body);
}

/* Der Aufruf. Die Kopfzeile ist 96 px hoch: 24 Polsterung, 48 Schaltfläche,
 * 24 Polsterung. Der allgemeine Mindestwert von 56 px gilt für Schaltflächen
 * im Inhalt. */
.qa-header .wp-block-button__link {
	min-height: 48px;
}

/*
 * Über dem Bild ist alles hell.
 *
 * Weiße Navigationsschrift gilt nur außerhalb des geöffneten Overlays, das
 * einen hellen Grund hat — sonst stünde Weiß auf Weiß und das Menü wirkte
 * leer. Die Klasse is-menu-open sitzt am Container des Blocks, nicht am Block
 * selbst; am falschen Element abgefragt greift die Ausnahme nie.
 *
 * Die Marke ist einfarbig; über dem Bild wird sie umgekehrt, statt eine
 * zweite Datei zu pflegen.
 */
.qa-site-header--over .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content,
.qa-site-header--over .qa-login {
	color: var(--wp--preset--color--base);
}

.qa-site-header--over .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary-alt);
}

.qa-site-header--over:not(.is-stuck) .wp-block-site-logo img {
	filter: brightness(0) invert(1);
}

.qa-site-header--over:not(.is-stuck) .qa-login a {
	color: var(--wp--preset--color--base);
}

.qa-site-header--over .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-deep);
	border-color: var(--wp--preset--color--base);
}

.qa-site-header--over .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-accent);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary-accent);
}

.qa-site-header--over .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--base);
}

/* Im geklebten Zustand über dem Bild gelten wieder die dunklen Farben. */
.qa-site-header--over.is-stuck .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
	color: var(--wp--preset--color--body);
}

.qa-site-header--over.is-stuck .qa-login {
	color: var(--wp--preset--color--secondary);
}

.qa-site-header--over.is-stuck .qa-login a {
	color: var(--wp--preset--color--body);
}

.qa-site-header--over.is-stuck .wp-block-site-logo img {
	filter: none;
}

.qa-site-header--over.is-stuck .wp-block-button__link {
	background-color: var(--wp--preset--color--primary-alt-accent);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary-alt-accent);
}

/*
 * Das mobile Menü.
 *
 * Das Overlay ist eine eigene Ansicht, keine ausgeklappte Leiste: oben die
 * Marke und das Schließen auf derselben Höhe wie in der Kopfzeile, darunter
 * die Bereiche, unten der eine Aufruf. Anmeldung und Aufruf stehen nur hier —
 * auf breiten Geräten sind sie schon rechts oben.
 */
.wp-block-navigation-item.qa-nav-login,
.wp-block-navigation-item.qa-nav-cta {
	display: none;
}

.qa-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--tertiary);
	animation: qa-overlay-in 0.22s ease-out;
}

/* Die Marke oben links, auf der Flucht der Einträge. Als Maske, damit sie die
 * Tintenfarbe aus den Presets nimmt und keine zweite Datei braucht. */
.qa-header .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: absolute;
	top: var(--wp--preset--spacing--60);
	left: var(--wp--preset--spacing--60);
	width: 26px;
	height: 30px;
	background-color: var(--wp--preset--color--main);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='4.4' r='2.7'/%3E%3Crect x='5' y='9.2' width='14' height='4.4' rx='2.2'/%3E%3Crect x='2.5' y='15.4' width='19' height='5' rx='2.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='4.4' r='2.7'/%3E%3Crect x='5' y='9.2' width='14' height='4.4' rx='2.2'/%3E%3Crect x='2.5' y='15.4' width='19' height='5' rx='2.5'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Das Schließen auf Augenhöhe mit der Marke, mit einer Trefferfläche, die man
 * auch trifft. Bezugsrahmen ist der bereits gepolsterte Dialog — die 24 px
 * des Overlays stecken also schon drin. */
.qa-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0;
	right: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: var(--wp--preset--border-radius--full);
	color: var(--wp--preset--color--main);
	transition: background-color 0.18s ease;
}

.qa-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
	background: var(--wp--preset--color--primary-accent);
}

/* Platz unter der Marke, damit der erste Eintrag nicht daran klebt. */
.qa-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--130);
	gap: var(--wp--preset--spacing--10);
	align-items: stretch;
}

/* Im Overlay ist die Schrift wieder dunkel und die Einträge groß genug zum
 * Tippen. Ohne padding-left: 0 startete der Text 16 px weiter rechts als die
 * Marke darüber. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--main);
	font-size: var(--wp--preset--font-size--medium);
	min-height: 44px;
	padding-left: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	padding-left: 0;
}

/* Mit .qa-header davor, weil Ollie die Größe auf dieser Ebene selbst setzt. */
.qa-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--font-weight--light);
	color: var(--wp--preset--color--main);
	min-height: 52px;
	display: flex;
	align-items: center;
}

.qa-header .wp-block-navigation__responsive-container.is-menu-open .qa-nav-login .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--secondary);
}

/* Der Aufruf sieht auch im Menü aus wie ein Aufruf. */
.qa-header .wp-block-navigation__responsive-container.is-menu-open .qa-nav-cta .wp-block-navigation-item__content {
	justify-content: center;
	margin-top: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--80);
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--primary-alt-accent);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	min-height: 56px;
}

/* Aufbau von unten, leicht versetzt — ein Zug, keine Zappelei. */
@keyframes qa-overlay-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes qa-menu-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation-item {
	animation: qa-menu-in 0.34s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation-item:nth-child(1) { animation-delay: 0.04s; }
.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation-item:nth-child(2) { animation-delay: 0.08s; }
.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation-item:nth-child(3) { animation-delay: 0.12s; }
.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation-item:nth-child(4) { animation-delay: 0.16s; }
.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation-item:nth-child(5) { animation-delay: 0.20s; }
.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation-item:nth-child(6) { animation-delay: 0.24s; }

/*
 * Bis 1024 px trägt die Kopfzeile nur Marke, Aufruf und Menütaste — auch
 * ein Telefon quer (852 px) und ein Tablet hochkant. Die volle Leiste passt
 * dort nicht, und ihre Aufklapper reagieren auf Berührung nicht. Die Marke
 * rückt nach links: mittig zwischen zwei ungleich breiten Seiten wirkt sie
 * verrutscht, und der Platz reicht ohnehin nicht.
 */
@media (max-width: 1024px) {
	.qa-header__row {
		grid-template-columns: auto 1fr auto;
		gap: var(--wp--preset--spacing--50);
	}

	/*
	 * Alle drei ausdrücklich in dieselbe Zeile. Ohne grid-row: 1 setzt das
	 * Raster sie auf drei Zeilen: die DOM-Reihenfolge ist Navigation, Marke,
	 * Handlung, die gewünschte Spaltenfolge aber Marke, Handlung,
	 * Navigation. Widersprechen sich beide, legt der Browser für jedes
	 * Element eine neue Zeile an.
	 */
	.qa-header .qa-brand {
		grid-row: 1;
		grid-column: 1;
		justify-self: start;
	}

	.qa-header__actions {
		grid-row: 1;
		grid-column: 2;
		justify-self: end;
	}

	/* Die Menütaste ganz nach außen, hinter den Aufruf. */
	.qa-header__nav {
		grid-row: 1;
		grid-column: 3;
		justify-self: end;
	}

	.qa-header .qa-brand img {
		width: 104px;
	}

	/* Der Anmeldeverweis steht im geöffneten Menü, nicht in der Zeile. */
	.qa-header__actions .qa-login {
		display: none;
	}
}

@media (max-width: 1024px) {
	/* Die Kopfzeile liegt über dem Bild und darf deshalb nicht umbrechen:
	 * jede zweite Zeile schiebt sich sonst über die Überschrift. Die
	 * Anmeldung steht mobil im geöffneten Menü. */
	.qa-header .qa-login {
		display: none;
	}

	.qa-header {
		padding-top: var(--wp--preset--spacing--30);
		padding-bottom: var(--wp--preset--spacing--30);
	}

	/* Beide Ebenen dürfen nicht umbrechen — die äußere trägt Marke und
	 * Navigationsgruppe, die innere Menütaste und Aufruf. */
	.qa-header > .wp-block-group,
	.qa-header > .wp-block-group > .wp-block-group {
		flex-wrap: nowrap;
		min-width: 0;
	}

	/* Auf 390 px ist der Platz knapp: der Aufruf wird eine Stufe kleiner,
	 * damit alles nebeneinander bleibt. */
	.qa-header .wp-block-button__link {
		min-height: 44px;
		padding-left: var(--wp--preset--spacing--40);
		padding-right: var(--wp--preset--spacing--40);
		font-size: var(--wp--preset--font-size--x-small);
		white-space: nowrap;
	}

	.qa-site-header.is-stuck {
		box-shadow: 0 1px 0 var(--wp--preset--color--border-light), 0 6px 16px rgb(26 32 44 / 8%);
	}

	/*
	 * Die Menütaste: keine Fläche, kein Rahmen, nur das Zeichen. Die
	 * Trefffläche ist 44 px — WCAG verlangt 24, ein Daumen mehr. Sie wächst
	 * über negative Ränder, damit die Kopfzeile dadurch nicht höher wird.
	 */
	.qa-header .wp-block-navigation__responsive-container-open {
		width: 44px;
		height: 44px;
		margin: -10px;
		padding: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: 0;
		border-radius: 999px;
		color: inherit;
		transition: background-color 0.18s ease;
	}

	.qa-header .wp-block-navigation__responsive-container-open svg {
		width: 26px;
		height: 26px;
		fill: currentcolor;
	}

	.qa-header .wp-block-navigation__responsive-container-open:hover,
	.qa-header .wp-block-navigation__responsive-container-open:focus-visible {
		background-color: rgb(128 128 128 / 16%);
	}

	/* Über dem Foto hell, sobald die Kopfzeile klebt und ihre Fläche zurück
	 * ist, wieder dunkel. */
	.qa-site-header--over:not(.is-stuck) .qa-header .wp-block-navigation__responsive-container-open {
		color: var(--wp--preset--color--base);
	}

	.qa-site-header--over.is-stuck .qa-header .wp-block-navigation__responsive-container-open {
		color: var(--wp--preset--color--main);
	}

	.wp-block-navigation-item.qa-nav-login,
	.wp-block-navigation-item.qa-nav-cta {
		display: block;
	}

	/* Das geöffnete Menü liegt über der Kopfzeile, nicht darunter. */
	.wp-block-navigation__responsive-container.is-menu-open {
		z-index: 100;
	}
}

/*
 * WordPress schaltet ab 600 px fest auf die volle Leiste: Menütaste und
 * Schließtaste verschwinden, die Leiste steht offen. Bis 1024 px gilt hier
 * stattdessen das Overlay.
 */
@media (min-width: 600px) and (max-width: 1024px) {
	.qa-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex;
	}

	.qa-header .wp-block-navigation__responsive-container:not(.hidden-by-default, .is-menu-open) {
		display: none;
	}

	.qa-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: flex;
	}
}

/* Bei Fingerbedienung ohne Zeigegerät bleibt die Kopfzeile über dem Hero
 * ebenfalls stehen — iOS behandelt position: fixed in manchen Fällen
 * eigenwillig, sticky nicht. */
@media (hover: none) {
	.qa-site-header--over {
		position: sticky;
		top: 0;
		margin-bottom: calc(var(--qa-header-height, 96px) * -1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.qa-header .qa-brand:hover,
	.qa-header .qa-brand a:hover {
		transform: none;
	}

	.qa-login a {
		background-size: 100% 1px;
	}
}

/* ==== 11-mega-menu.css ================================================== */

/* Mega-Menü.
 *
 * Drei Panels über die volle Breite: Practice, Teach, Explore. Jede Spalte
 * trägt einen Titel in Augenbrauen-Schrift und darunter Einträge aus Name und
 * einem Satz. */

.qa-mega {
	border-top: 1px solid var(--wp--preset--color--border-light);
	box-shadow: 0 24px 48px rgb(26 32 44 / 10%);
}

.qa-mega__col--tinted {
	background: var(--wp--preset--color--primary-accent);
	border-radius: var(--wp--preset--border-radius--sm);
	padding: var(--wp--preset--spacing--90);
}

/* Der ganze Eintrag ist die Trefferfläche, nicht nur die Zeile mit dem Namen. */
.qa-mega__item {
	position: relative;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin-left: calc(var(--wp--preset--spacing--40) * -1);
	border-radius: var(--wp--preset--border-radius--sm);
	transition: background-color 0.18s ease;
}

.qa-mega__item:hover {
	background: var(--wp--preset--color--tertiary);
}

.qa-mega__col--tinted .qa-mega__item:hover {
	background: rgb(255 255 255 / 60%);
}

.qa-mega__label {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--main);
}

.qa-mega__label a {
	color: inherit;
	text-decoration: none;
}

.qa-mega__label a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.qa-mega__item:hover .qa-mega__label {
	color: var(--wp--preset--color--primary-alt-accent);
}

/* Der Verweis auf die Übersicht schließt die Kursliste ab: kleiner und in
 * Grün, damit er nicht wie ein weiterer Kurs aussieht. */
.qa-mega__item--all {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.qa-mega__item--all .qa-mega__label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary-alt-accent);
}

/* Über dem Hero ist die Kopfzeile durchsichtig — das Panel darf es nicht sein. */
.qa-site-header--over .qa-mega {
	background: var(--wp--preset--color--base);
}

/* Dieselben Spalten dienen als Mega-Panel und als Bereichsseite. Als Panel
 * schweben sie über der Seite und brauchen Kante und Schatten; im Seiteninhalt
 * wären beide nur Unruhe. */
.wp-block-post-content .qa-mega {
	border-top: 0;
	box-shadow: none;
}

@media (max-width: 1024px) {
	/* Im Overlay stehen die Panels untereinander statt nebeneinander;
	 * Schatten und Rahmen wären dort nur Unruhe. */
	.qa-mega {
		border-top: 0;
		box-shadow: none;
		padding-top: var(--wp--preset--spacing--50);
		padding-bottom: var(--wp--preset--spacing--50);
	}

	.qa-mega__col--tinted {
		padding: var(--wp--preset--spacing--60);
	}

	.qa-mega__label {
		font-size: var(--wp--preset--font-size--base);
	}
}

/* Im geöffneten Overlay immer untereinander, auch wo der Bildschirm breiter
 * als 781 px ist und der Spaltenblock von sich aus nebeneinander stünde. */
.is-menu-open .qa-mega .wp-block-columns {
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
}

.is-menu-open .qa-mega .wp-block-column {
	flex-basis: auto !important; /* gegen die Breite, die der Spaltenblock inline setzt */
}

/* ==== 12-footer.css ===================================================== */

/* Fußzeile auf dunklem Grund. */

.qa-footer a {
	color: rgb(255 255 255 / 78%);
	text-decoration: none;
	transition: color 0.18s ease;
}

.qa-footer a:hover {
	color: var(--wp--preset--color--base);
}

/* Die Marke ist einfarbig; auf dunklem Grund wird sie umgekehrt, statt eine
 * zweite Datei zu pflegen. */
.qa-footer .wp-block-site-logo img {
	filter: brightness(0) invert(1);
}

.qa-footer .qa-small {
	color: rgb(255 255 255 / 60%);
}

.qa-footer__head {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: var(--wp--custom--font-weight--medium);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--border-dark);
}

.qa-footer__list {
	list-style: none;
	padding-left: 0;
}

.qa-footer__list li + li {
	margin-top: var(--wp--preset--spacing--30);
}

/* Die Trennlinie ist eine Gruppe ohne Inhalt — als eigenes Element hätte sie
 * im Blockbaum keinen Platz, an dem sie sich bearbeiten ließe. */
.qa-footer__rule {
	height: 1px;
	min-height: 1px;
	background: rgb(255 255 255 / 12%);
	border: 0;
}

/* ==== 13-hero.css ======================================================= */

/* Hero: Vollbild-Cover mit Video, Verlauf und Abspielverweis. */

/* Der Hero trägt die Kopfzeile mit; ohne diesen Platz läge der Text darunter.
 *
 * Die zweite Klasse am Cover ist kein Zierrat: WordPress setzt für
 * .has-custom-content-position den Behälter auf width:auto — bei gleicher
 * Spezifität. Er schrumpft dann auf die Textbreite, der Hero-Text rutscht an
 * den Bildrand, und Logo und Überschrift stehen nicht mehr in einer Flucht. */
.wp-block-cover.qa-hero > .wp-block-cover__inner-container {
	padding-top: var(--wp--preset--spacing--130);
}

/*
 * Das Video liegt zwischen Foto und Verlauf. Das Foto bleibt darunter stehen
 * und trägt, solange nichts läuft — beim Laden, bei reduzierter Bewegung, bei
 * Datensparen, und wenn die Wiedergabe scheitert.
 */
.qa-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Derselbe Ausschnitt wie das Standbild darunter. Weicht er ab, sieht
	 * man beim Start des Videos einen Sprung — das ist das „Aufblitzen“. */
	object-position: 50% 50%;
	/* Erst sichtbar, wenn wirklich Bilder kommen — sonst blitzt ein
	 * schwarzer Rahmen zwischen Foto und Video auf. */
	opacity: 0;
	transition: opacity 0.7s var(--qa-anim-easing, ease-out);
	pointer-events: none;
	z-index: 0;
}

.qa-hero--video .qa-hero__video {
	opacity: 1;
}

/* Das Foto darunter bleibt liegen: es ist der Grund, auf den das Video
 * einblendet, und der Stand, wenn kein Video läuft. */
.qa-hero .wp-block-cover__image-background {
	z-index: 0;
}

/* Der Schleier und der Text liegen darüber. */
.qa-hero .wp-block-cover__gradient-background,
.qa-hero .wp-block-cover__background {
	z-index: 1;
}

.qa-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/*
 * Der Hero füllt das Fenster — auf jedem Gerät. Die Mindesthöhe steht als
 * Inline-Stil im Block; anders als mit !important ist sie nicht zu
 * übersteuern.
 *
 * Zur Einheit: 100vh ist auf dem Telefon das GRÖSSTE Fenster — das mit
 * eingeklappter Browserleiste. Beim Laden, solange die Leiste noch da ist,
 * ragt der Hero darunter und der unterste Verweis liegt hinter der
 * Adresszeile. 100dvh folgt dem, was gerade wirklich sichtbar ist. vh bleibt
 * als Rückfall für Browser ohne dvh.
 */
.wp-block-cover.qa-hero {
	min-height: 100vh !important;
	min-height: 100dvh !important;
}

/* Der Abspielverweis „See a morning practice“ öffnet das Video im Fenster.
 * Der Kreis mit dem Dreieck davor sagt, dass hier etwas abgespielt wird und
 * nicht geblättert. */
.qa-play a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	cursor: pointer;
}

/*
 * Er soll sich verhalten wie der Rest der Seite:
 * der Text bekommt dieselbe einwachsende Unterlänge wie die Einträge in
 * der Kopfzeile, der Ring füllt sich wie ein Aufruf-Knopf mit dem Verlauf.
 *
 * Die Unterlänge sitzt an der eigenen Hülle um den Text, nicht am <a>.
 * Das <a> ist ein inline-flex-Behälter, in dem der Ring ein eigenes
 * Flex-Element ist — eine Unterlänge am <a> liefe unter dem Ring mit
 * durch und sähe aus wie ein durchgestrichener Knopf.
 */
.qa-play__text {
	background-image: linear-gradient(currentcolor, currentcolor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size 0.28s var(--qa-anim-easing, ease-out);
}

.qa-play a:hover .qa-play__text,
.qa-play a:focus-visible .qa-play__text {
	background-size: 100% 1px;
}

/*
 * Der Ring bekommt eine eigene Hülle im Markup statt eines Pseudo-Elements
 * am Verweis. Der Grund ist nicht Ordnungsliebe, sondern ein Fehlbild:
 *
 * Zuerst wuchs der Verlauf über background-size von 0 auf volle Größe.
 * Gemessen stimmte alles — border-radius 50 Prozent, keine Maske, kein
 * clip-path — gerendert kam ein abgerundetes Viereck heraus. Chrome
 * beschneidet einen in der Größe animierten Hintergrund nicht sauber an
 * der runden Kante. Mit background-size: cover ist es sofort ein Kreis.
 *
 * Also derselbe Weg wie beim Aufruf-Knopf: der Verlauf liegt in voller
 * Größe bereit und wird über die Deckkraft eingeblendet. Dafür braucht es
 * ein Element mit zwei Pseudo-Elementen — eines für die Füllung, eines
 * für das Dreieck.
 */
.qa-play__icon {
	position: relative;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border: 1.2px solid currentcolor;
	border-radius: 50%;
	transition: border-color 0.24s ease;
}

.qa-play__icon::before {
	content: "";
	position: absolute;
	/* Eine Spur über den Rand hinaus, damit beim Füllen keine helle Naht
	 * zwischen Rand und Fläche stehen bleibt. */
	inset: -1.2px;
	border-radius: 50%;
	background-image: linear-gradient(
		112deg,
		var(--wp--preset--color--primary-alt-accent) 0%,
		var(--wp--preset--color--primary-deep) 42%,
		var(--wp--preset--color--main) 100%
	);
	background-size: cover;
	opacity: 0;
	transition: opacity 0.3s var(--qa-anim-easing, ease-out);
}

/* Das Dreieck liegt über der Füllung. */
.qa-play__icon::after {
	content: "";
	position: absolute;
	left: 13px;
	top: 50%;
	width: 0;
	height: 0;
	transform: translateY(-50%);
	border-left: 9px solid currentcolor;
	border-top: 5.5px solid transparent;
	border-bottom: 5.5px solid transparent;
}

.qa-play a:hover .qa-play__icon,
.qa-play a:focus-visible .qa-play__icon {
	border-color: transparent;
}

.qa-play a:hover .qa-play__icon::before,
.qa-play a:focus-visible .qa-play__icon::before {
	opacity: 1;
}

@media (min-width: 782px) {
	/* Auf breiten Bildschirmen steht der Text mittig in der Fläche. Die Polsterung
	 * oben hält ihn von der schwebenden Kopfzeile frei, wenn er bei großer Schrift
	 * wächst. */
	.wp-block-cover.qa-hero > .wp-block-cover__inner-container {
		padding-top: calc(var(--qa-header-height, 97px) + var(--wp--preset--spacing--80));
		padding-bottom: var(--wp--preset--spacing--110);
	}
}

@media (max-width: 781px) {
	/* Im Entwurf steht der Hero-Text mobil unten im Bild, nicht mittig:
	 * so bleibt das Motiv oben sichtbar und der Text liegt auf der dunklen
	 * Kante des Verlaufs.
	 *
	 * Die Abstände standen vorher auf null. Der letzte Verweis endete damit
	 * auf der Unterkante des Hero, ohne einen Millimeter Luft — gemessen:
	 * Unterkante Text 600, Unterkante Hero 600. Oben schützt die Polsterung
	 * davor, dass der Text unter die schwebende Kopfzeile rutscht, wenn er
	 * bei großer Schrift wächst. */
	.wp-block-cover.qa-hero > .wp-block-cover__inner-container {
		align-self: flex-end;
		padding-top: calc(var(--qa-header-height, 97px) + var(--wp--preset--spacing--80));
		padding-bottom: var(--wp--preset--spacing--120);
	}

	/* Hochkant ein anderer Ausschnitt des Standbilds. !important, weil der
	 * Cover-Block den Fokuspunkt als Inline-Stil (object-position) setzt. */
	.qa-hero .wp-block-cover__image-background {
		object-position: 58% 40% !important;
	}

	/*
	 * Der Verlauf des Hero lief von links nach rechts (100deg). Auf einem
	 * hochkant stehenden Bildschirm ist das die falsche Achse: die rechte
	 * Seite bleibt hell, und genau dort endet jede Textzeile. Hochkant muss
	 * er von unten kommen — dort steht der Text — und oben eine leichte
	 * Kante behalten, damit die helle Kopfzeile über dem hellen Zelt lesbar
	 * bleibt. !important, weil die Verlaufsklasse des Blocks
	 * (has-…-gradient-background) ihren Wert selbst mit !important setzt.
	 */
	.qa-hero .wp-block-cover__gradient-background {
		background-image: linear-gradient(
			to top,
			rgb(18 24 16 / 92%) 0%,
			rgb(18 24 16 / 80%) 30%,
			rgb(18 24 16 / 42%) 58%,
			rgb(18 24 16 / 26%) 78%,
			rgb(18 24 16 / 44%) 100%
		) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qa-hero__video {
		display: none;
	}

	/* Wer Bewegung reduziert haben will, bekommt den Zustand ohne das Wachsen. */
	.qa-play__text,
	.qa-play__icon,
	.qa-play__icon::before {
		transition: none;
	}
}

/* ==== 14-trust.css ====================================================== */

/*
 * Die Beleg-Leiste unter dem Hero.
 *
 * Vorher standen hier drei Sätze nebeneinander — Behauptungen über uns
 * selbst. Jetzt stehen acht Einrichtungen mit ihrer Rolle: Oxford, der NHS,
 * zwei Hochschulen, drei Fachgesellschaften, zwei Konferenzen. Ein Beleg ist
 * überzeugender als eine Beteuerung, und er lässt sich nachprüfen.
 */
.qa-trust__title {
	max-width: 44ch;
	margin-inline: auto;
	color: var(--wp--preset--color--main);
	text-wrap: balance;
}

/*
 * Vier Spalten, aber über auto-fit statt über eine feste Zahl: die Kacheln
 * ordnen sich selbst um, wenn der Platz enger wird, und es braucht keine
 * eigene Regel je Bildschirmbreite.
 *
 * Die 260 px sind gerechnet, nicht geraten: bei 1290 px Inhaltsbreite und
 * 24 px Abstand passen vier Kacheln (4×260 + 3×24 = 1112), fünf nicht
 * (5×260 + 4×24 = 1396). Mit 190 px waren es sechs — acht Belege standen
 * dann als Sechserreihe mit zwei Nachzüglern da, was unfertig aussieht.
 * Zwei volle Reihen zu vier lesen sich als eine Ordnung.
 */
.qa-trust__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--50);
	align-items: stretch;
}

/*
 * WordPress gibt jedem Kind einer Gruppe ausser dem ersten einen oberen
 * Aussenabstand — so entsteht sonst der Blockabstand. In einem Raster ist
 * das falsch: dort macht gap den Abstand, und der Aussenabstand schiebt
 * jede Kachel ausser der ersten um 24 px nach unten.
 *
 * Sichtbar wurde es erst zweispaltig auf dem Telefon: die rechte Kachel
 * stand tiefer als die linke, und weil das Raster die Reihe an der
 * hoechsten Kachel ausrichtet, wuchs die linke um genau diese 24 px mit.
 * Die Ursache sass also nicht dort, wo der Fehler zu sehen war.
 */
.qa-trust__grid > * {
	margin-block: 0;
}

.qa-trust__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Mittig, nicht auseinandergezogen. Mit space-between hing die Rolle am
	 * unteren Rand — eine zweizeilige Rolle begann dann eine Zeile höher als
	 * eine einzeilige daneben, und die Leiste sah ungeordnet aus, obwohl die
	 * Kacheln gleich hoch waren.
	 *
	 * Mittig geht nur, weil Logofeld und Rolle feste Höhen haben: der Block
	 * ist in jeder Kachel gleich hoch und steht deshalb überall auf
	 * derselben Linie. Ohne die festen Höhen wäre Zentrieren genau der
	 * Fehler, den flex-start vorher vermieden hat. */
	justify-content: center;
	min-height: 200px;
}

/*
 * Die Logos kommen aus acht Quellen und haben acht Seitenverhältnisse —
 * ein 1024 px breiter Schriftzug neben einem runden Siegel von 58 px.
 *
 * Deshalb bekommt nicht das Bild eine Grenze, sondern sein Feld eine feste
 * Höhe. Vorher wuchs die Kachel mit dem Bild: die Oxford-Kachel wurde
 * 176 px hoch, die anderen blieben bei 152, und in einer zweispaltigen
 * Reihe stand die Nachbarin versetzt daneben. Ein gleich hohes Feld für
 * alle nimmt die Ursache weg, statt die Folge auszugleichen.
 */
.qa-trust__logo {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 68px;
	flex-shrink: 0;
}

.qa-trust__logo img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

.qa-trust__role {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--body);
	/* Platz für zwei Zeilen, auch wenn nur eine kommt: „Speaker" und
	 * „Keynote Speaker" stehen sonst nebeneinander auf verschiedenen
	 * Höhen. Zwei Zeilen mal Zeilenhöhe 1.5 sind 3em. */
	min-height: 3em;
}

@media (max-width: 781px) {
	/* Die Polsterung steht als Inline-Stil im Block; nur mit !important lässt
	 * sie sich auf dem Telefon verringern. */
	.qa-trust {
		padding-top: var(--wp--preset--spacing--90) !important;
		padding-bottom: var(--wp--preset--spacing--90) !important;
	}

	/* Auf dem Telefon zwei nebeneinander: eine einzelne Spalte machte aus
	 * acht Belegen eine acht Bildschirme lange Liste, durch die niemand
	 * blättert. */
	.qa-trust__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--preset--spacing--40);
	}

	.qa-trust__tile {
		min-height: 148px;
	}

	.qa-trust__logo {
		height: 52px;
	}
}

/* ==== 15-about.css ====================================================== */

/* Über uns und Personenseiten: Porträts, Landkarte, Team. */

.qa-hanzi {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary-alt-accent);
}

/* Legende der Landkarte: der Punkt trägt die Bedeutung, nicht ein Aufzählungszeichen. */
:root {
	/* Drei Gruppen auf Karte und Legende, gut unterscheidbar: Grün für Tutors
	 * und Team, CI-Blau (Ink) für akkreditierte, das helle Schieferblau der
	 * bisherigen Website für angeschlossene Lehrende. */
	--qa-blau-ci: var(--wp--preset--color--main);
	--qa-blau-hell: #718096;
}

.qa-legend {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.qa-legend__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

.qa-legend__item::before {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: var(--wp--preset--border-radius--full);
	flex-shrink: 0;
}

.qa-legend__item--tutor::before {
	background: var(--wp--preset--color--primary-alt-accent);
}

.qa-legend__item--accredited::before {
	background: var(--qa-blau-ci);
}

.qa-legend__item--affiliated::before {
	background: var(--qa-blau-hell);
}

/* Die Landkarte ist im Entwurf ein Platzhalter und sagt das auch. */
.qa-map {
	/* Punktfarben wie in der Legende (.qa-legend__item--…). */
	--qa-map-pin-tutor: var(--wp--preset--color--primary-alt-accent);
	--qa-map-pin-accredited: var(--qa-blau-ci);
	--qa-map-pin-affiliated: var(--qa-blau-hell);

	position: relative;
	overflow: hidden;
	min-height: 420px;
	border: 1px solid var(--wp--preset--color--border-dark);
	border-radius: var(--wp--preset--border-radius--sm);
	background-color: var(--wp--preset--color--primary-accent);
	background-image:
		radial-gradient(circle at 32% 44%, var(--wp--preset--color--primary-alt-accent) 0 5px, transparent 6px),
		radial-gradient(circle at 46% 34%, var(--wp--preset--color--primary) 0 4px, transparent 5px),
		radial-gradient(circle at 26% 54%, var(--wp--preset--color--primary) 0 4px, transparent 5px),
		radial-gradient(circle at 58% 52%, var(--wp--preset--color--border-dark) 0 4px, transparent 5px),
		radial-gradient(circle at 66% 38%, var(--wp--preset--color--border-dark) 0 4px, transparent 5px),
		radial-gradient(circle at 40% 64%, var(--wp--preset--color--border-dark) 0 4px, transparent 5px);
}

/* Vor dem Klick: Knopf und Hinweis mittig auf der Zierfläche. */
.qa-map__start {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--60);
	text-align: center;
}

.qa-map__hint {
	max-width: 32ch;
	margin: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border-radius: var(--wp--preset--border-radius--sm);
	background: rgb(255 255 255 / 75%);
}

/* Nach dem Klick: Leaflet füllt die Fläche, die Zierpunkte verschwinden. */
.qa-map--live {
	background-image: none;
}

.qa-map .leaflet-popup-content {
	font-family: var(--wp--preset--font-family--base);
	font-size: var(--wp--preset--font-size--x-small);
}

.qa-map__filter {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 0;
	border-radius: var(--wp--preset--border-radius--sm);
	background: var(--wp--preset--color--base);
	box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
	font-family: var(--wp--preset--font-family--base);
	font-size: var(--wp--preset--font-size--x-small);
}

.qa-map__filter legend {
	float: left;
	margin-bottom: var(--wp--preset--spacing--10);
	font-weight: 700;
}

.qa-map__filter label {
	clear: both;
	cursor: pointer;
}

.qa-map__name {
	font-weight: 700;
	color: var(--wp--preset--color--main);
}

.qa-map__note {
	position: absolute;
	left: var(--wp--preset--spacing--50);
	bottom: var(--wp--preset--spacing--40);
	margin: 0;
}

.qa-avatar img {
	width: 86px;
	height: 86px;
	border-radius: var(--wp--preset--border-radius--full);
	object-fit: cover;
}

/* Porträt auf einer Personenseite: hochformatig, nicht rund. */
.qa-portrait img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 8px;
}

/* Block „Team": Spaltenzahl setzt der Block nach Anzahl der Karten. */
.wp-block-qa-team {
	display: grid;
	grid-template-columns: repeat(var(--qa-team-cols, 4), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--80);
}

@media (max-width: 781px) {
	/* Zwei Spalten statt vier. */
	.qa-team {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.qa-map {
		min-height: 260px;
	}
}

/* Gruppe mit eigener Überschrift im Block „Team" (etwa: wichtige Menschen
 * der Academy). Abstand wie zwischen den anderen Gruppen. */
.qa-team-gruppe {
	display: grid;
	gap: var(--wp--preset--spacing--110);
	margin-top: var(--wp--preset--spacing--150);
}

.qa-team-kopf > * {
	margin-block: 0;
}

.qa-team-kopf > * + * {
	margin-top: var(--wp--preset--spacing--50);
}

/* ==== 16-documents.css ================================================== */

/* Lange Textseiten: Inhaltsverzeichnis und Rechtstexte. */

/* Das Inhaltsverzeichnis läuft mit: bei einer zwölf Bildschirme langen Seite
 * ist der Weg zurück nach oben sonst der einzige Weg zum nächsten Abschnitt. */
.qa-toc {
	position: sticky;
	top: var(--wp--preset--spacing--110);
	align-self: flex-start;
}

.qa-toc__list {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.qa-toc__list li {
	margin: 0;
}

.qa-toc__list a {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
	border-left: 2px solid var(--wp--preset--color--border-light);
	padding-left: var(--wp--preset--spacing--50);
	display: block;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.qa-toc__list a:hover {
	color: var(--wp--preset--color--main);
	border-left-color: var(--wp--preset--color--primary-alt-accent);
}

/* Der erste Abschnitt braucht keinen Abstand nach oben — darüber steht nichts.
 * !important, weil jede Abschnittsüberschrift ihren Abstand als Inline-Stil
 * trägt. */
.qa-document > :first-child {
	margin-top: 0 !important;
}

.qa-document h2 {
	scroll-margin-top: var(--wp--preset--spacing--120);
}

/* Aufzählungen in Rechtstexten sind Listen, keine Häkchen. */
.qa-ticks--plain {
	list-style: disc;
	padding-left: 1.15em;
}

.qa-ticks--plain li {
	padding-left: 0.25em;
}

.qa-ticks--plain li::before {
	display: none;
}

@media (max-width: 781px) {
	.qa-toc {
		position: static;
	}
}

/* ==== 17-blog.css ======================================================= */

/* Blog und Archive: Beitragskarten, Aufmacher, Kategoriefilter, Seitenzahlen. */

.wp-block-image img {
	display: block;
}

/* Das Autorenbild kommt aus der Mediathek, nicht quadratisch wie bei Gravatar. */
.wp-block-avatar img {
	object-fit: cover;
}

/* Der Aufmacher: Bild links, Text rechts, alles auf heller Fläche. */
.qa-featured .qa-featured__inner {
	background: var(--wp--preset--color--primary-accent);
	border-radius: var(--wp--preset--border-radius--sm);
	overflow: hidden;
}

.qa-featured__image img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	border-radius: 0;
}

.qa-featured .wp-block-post-title a,
.wp-block-post-template .wp-block-post-title a {
	color: var(--wp--preset--color--main);
	text-decoration: none;
	transition: color 0.18s ease;
}

.qa-featured .wp-block-post-title a:hover,
.wp-block-post-template .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary-alt-accent);
}

/* Seitenzahlen ruhig halten. */
.wp-block-query-pagination {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--small);
	gap: var(--wp--preset--spacing--40);
}

.wp-block-query-pagination a {
	text-decoration: none;
}

.wp-block-query-pagination .current {
	color: var(--wp--preset--color--main);
}

/* Viele Beitragsbilder sind Motive auf Weiß. Ohne Fläche dahinter verschwinden
 * sie in der Seite und die Karte sieht aus, als fehle das Bild. */
.wp-block-post-featured-image {
	background: var(--wp--preset--color--primary-accent);
	border-radius: var(--wp--preset--border-radius--sm);
	overflow: hidden;
	margin-bottom: 0;
}

.wp-block-post-featured-image img {
	display: block;
	border-radius: var(--wp--preset--border-radius--sm);
	object-fit: cover;
}

/* Der Kategoriefilter bleibt beim Blättern oben stehen: er ist der Ort, an
 * dem man die Auswahl ändert, und ihn zu suchen bedeutet, wieder
 * hochzuscrollen.
 *
 * Das Kleben sitzt am Behälter (.qa-filterbar), nicht an der Zeile selbst:
 * position: sticky klebt nur innerhalb des eigenen Elternelements und
 * braucht einen Vorfahren ohne overflow. Solange die Zeile im Kopfabschnitt
 * stand, verschwand sie mit dessen Unterkante. */
.qa-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-block: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--base);
}

.qa-filterbar {
	position: sticky;
	top: 0;
	z-index: 20;
	background-color: var(--wp--preset--color--base);
}

/* Bei angehefteter Kopfzeile darf der Filter nicht darunter verschwinden. */
body:has(.qa-site-header.is-stuck) .qa-filterbar {
	top: var(--qa-header-height, 72px);
}

.qa-filter__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border-light);
	padding: 8px 16px;
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--body);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--body);
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.qa-filter__item:hover {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border-dark);
	background-color: var(--wp--preset--color--tertiary);
}

.qa-filter__item.is-active {
	background-color: var(--wp--preset--color--primary-alt-accent);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary-alt-accent);
	color: var(--wp--preset--color--base);
}

/* Die Zahl tritt zurück, aber nicht unter den Kontrastwert. Bei Deckkraft
 * 0,62 ergab sie 3,81:1 auf Weiß — zu wenig für Fließtext. 0,75 ergibt
 * 5,52:1 und sieht kaum anders aus. Gemessen, nicht geschätzt. */
.qa-filter__count {
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
	letter-spacing: 0;
}

/* Im aktiven Reiter steht die Zahl auf Grün — dort ist Weiß der Grund. */
.qa-filter__item.is-active .qa-filter__count {
	opacity: 0.85;
}

/* Während geladen wird, tritt die Zeile leicht zurück — genug, um zu zeigen,
 * dass etwas passiert, zu wenig, um zu flackern. */
.qa-filterbar.is-loading,
.qa-filter.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

.qa-blog-results {
	scroll-margin-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
	.qa-filter,
	.qa-filter__item {
		transition: none;
	}
}

/* ==== 18-books.css ====================================================== */

/* Bücher: Regal, Umschläge, Platzhalter-Einband. */

/* Buchrücken stehen im Regal, nicht in Kacheln: das Bild behält sein Format
 * und bekommt einen Schatten, damit es auf dem hellen Grund nicht schwebt.
 *
 * Alle Umschläge tragen dasselbe Format. Zweiundzwanzig der Bücher haben kein
 * Bild, und ohne festes Format wäre jede Rasterzeile so hoch wie ihr größtes
 * Element — die Seite sähe kaputt aus, weil ein Bild fehlt. */
.qa-book-cover {
	margin: 0;
}

.qa-book-cover a {
	display: block;
	text-decoration: none;
}

.qa-book-cover img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 4px;
	box-shadow: 0 10px 30px rgb(26 32 44 / 14%);
}

/* Der Platzhalter sieht aus wie ein schlichter Einband, nicht wie ein Loch. */
.qa-book-cover__placeholder {
	display: flex;
	align-items: flex-end;
	width: 100%;
	aspect-ratio: 2 / 3;
	border-radius: 4px;
	background-color: var(--wp--preset--color--primary-accent);
	background-image: linear-gradient(
		100deg,
		var(--wp--preset--color--primary-alt) 0%,
		var(--wp--preset--color--primary-accent) 62%
	);
	padding: var(--wp--preset--spacing--70);
	box-shadow: 0 10px 30px rgb(26 32 44 / 10%), inset 4px 0 0 rgb(74 87 48 / 28%);
}

.qa-book-cover__placeholder-title {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--primary-deep);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
}

/*
 * Mehrere Rubriken je Buch sind die Regel — als drei Zeilen Großbuchstaben
 * über dem Titel erschlagen sie ihn. In der Übersicht steht deshalb nur die
 * erste; die vollständige Einordnung zeigt die Seite des Buchs.
 *
 * Ein erster Versuch beschnitt die Zeile mit -webkit-line-clamp und
 * overflow: hidden. Damit blieben der zweite und dritte Verweis im Baum:
 * anklickbar über die Tabulatortaste, vorgelesen vom Screenreader, und für
 * Augen nicht vorhanden. display: none nimmt sie ganz heraus — aus dem Bild
 * und aus der Bedienung.
 */
.qa-books .wp-block-post-terms a:not(:first-of-type),
.qa-books .wp-block-post-terms .wp-block-post-terms__separator {
	display: none;
}

/* Buchumschläge im Regal: sie heben an, als zöge man sie ein Stück heraus. */
.qa-books .qa-book-cover img,
.qa-books .qa-book-cover__placeholder {
	transition: transform 0.34s var(--qa-anim-easing), box-shadow 0.34s var(--qa-anim-easing);
}

.qa-books .qa-book-cover a:hover img,
.qa-books .qa-book-cover a:hover .qa-book-cover__placeholder {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgb(26 32 44 / 20%);
}

/* Buchumschläge werden nicht beschnitten. Umschläge haben kein einheitliches
 * Format; "cover" schnitt Titel an (Anatomie-Buch, Suchtreffer).
 * !important, weil der Beitragsbild-Block object-fit als Inline-Style setzt,
 * sobald er eine feste Höhe hat. */
.qa-books .wp-block-post-featured-image img,
.type-book .wp-block-post-featured-image img {
	object-fit: contain !important;
	background-color: var(--wp--preset--color--tertiary);
}

@media (max-width: 781px) {
	/* Bücher stehen auch auf dem Telefon zu zweit nebeneinander. Zweiunddreißig
	 * Umschläge in einer Spalte ergeben eine Seite von neunzehn Bildschirmhöhen —
	 * niemand blättert bis zum Ende. !important, weil Core die Beitragsvorlage
	 * unter 600 px mit einem vierfach wiederholten Klassenselektor auf eine
	 * Spalte setzt. */
	.qa-books .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.qa-books .wp-block-post-excerpt {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qa-books .qa-book-cover a:hover img,
	.qa-books .qa-book-cover a:hover .qa-book-cover__placeholder {
		transform: none;
	}
}

/* ==== 19-podcast.css ==================================================== */

/* Podcast-Folgen.
 *
 * Die Folgen kommen aus dem Podigee-Feed und werden auf dem Server
 * gerendert. Der Ton läuft über ein natives <audio>: das kann jeder Browser,
 * es braucht kein Skript, und es funktioniert mit Tastatur und Screenreader
 * von allein. */
.qa-episodes {
	display: flex;
	flex-direction: column;
}

.qa-episode {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--90);
	border-top: 1px solid var(--wp--preset--color--border-light);
}

/* Mit Folgenbild: Bild links, Text rechts; auf dem Telefon klein daneben. */
.qa-episode--bild {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	align-items: start;
	column-gap: var(--wp--preset--spacing--80);
}

.qa-episode__bild {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--preset--border-radius--sm);
}

.qa-episode__inhalt {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
}

@media (max-width: 781px) {
	.qa-episode--bild {
		grid-template-columns: 96px minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--50);
	}
}

.qa-episode:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.qa-episode__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.qa-episode__title {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--font-weight--light);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--main);
	margin: 0;
}

.qa-episode__text {
	max-width: var(--wp--custom--width--reading);
	margin: 0;
	color: var(--wp--preset--color--secondary);
	line-height: var(--wp--custom--line-height--relaxed);
}

.qa-episode__audio {
	width: 100%;
	max-width: 560px;
	margin-top: var(--wp--preset--spacing--30);
}

/* Die neueste Folge im dunklen Kopf: eine Karte statt einer Zeile. */
.qa-episodes--hero .qa-episode {
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--80);
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: 20px;
	background-color: rgb(255 255 255 / 5%);
}

/* In der schmalen Karte oben: Bild über dem Text statt daneben. */
.qa-episodes--hero .qa-episode--bild {
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--wp--preset--spacing--60);
}

.qa-episodes--hero .qa-episode:last-child {
	border-bottom: 1px solid rgb(255 255 255 / 16%);
}

.qa-episodes--hero .qa-episode__title,
.qa-episodes--hero .qa-episode__text,
.qa-episodes--hero .qa-episode__meta {
	color: inherit;
}

.qa-episodes--hero .qa-episode__audio {
	max-width: 100%;
}

/* ==== 20-currency.css =================================================== */

/* Währungsumschalter.
 *
 * Ohne JavaScript stehen alle drei Währungen untereinander — vollständig
 * bedienbar, nur länger. Erst wenn waehrung.js die Reiterzeile eingehängt hat,
 * setzt es .qa-cur--ready, und ab da zeigt der Kasten eine Währung. */
.qa-cur {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--80);
	align-items: flex-start;
}

.qa-cur--ready {
	gap: var(--wp--preset--spacing--60);
}

.qa-cur__tabs {
	display: inline-flex;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border-dark);
	padding: 3px;
}

.qa-cur__tab {
	appearance: none;
	border: 0;
	background: transparent;
	border-radius: 999px;
	padding: 8px 18px;
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--body);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	color: var(--wp--preset--color--body);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.qa-cur__tab:hover {
	background-color: rgb(117 134 80 / 12%);
}

.qa-cur__tab[aria-selected="true"] {
	background-color: var(--wp--preset--color--primary-alt-accent);
	color: var(--wp--preset--color--base);
}

/* Reiterzeile auf dunkler Fläche (Seitenende der Membership-Seite). */
.has-primary-alt-accent-background-color .qa-cur__tabs {
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 45%);
}

.has-primary-alt-accent-background-color .qa-cur__tab {
	color: var(--wp--preset--color--base);
}

.has-primary-alt-accent-background-color .qa-cur__tab:hover {
	background-color: rgb(255 255 255 / 14%);
}

.has-primary-alt-accent-background-color .qa-cur__tab[aria-selected="true"] {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-alt-accent);
}

.qa-cur__opt[hidden] {
	display: none;
}

/* Der Umschalter steht in einem mittigen Flex-Behälter — der Kasten selbst
 * richtet seine Kinder linksbündig aus, mittig wirkt der Preis wie ein
 * Aushang statt wie eine Angabe. */
.qa-cur-center .qa-cur {
	align-items: center;
	text-align: center;
}

/* Den Kaufknopf im mittigen Kasten auch mittig stellen. */
.qa-cur-center .qa-cur__opt .wp-block-buttons {
	justify-content: center;
}

/* Die Reiterzeile steht als eigene Leiste über den Karten und schaltet beide
 * zugleich. Ohne JavaScript ist sie leer und nimmt keinen Platz ein. */
.qa-cur-switcher {
	margin-bottom: var(--wp--preset--spacing--100);
}

.qa-cur-switcher:not(.qa-cur-switcher--ready) {
	display: none;
}

/* Ein Teil-Kasten ist kein eigenständiger Preisblock: er sitzt mitten in
 * einer Karte und darf weder Abstand noch Ausrichtung mitbringen. */
.qa-cur--inline {
	display: block;
}

.qa-cur--inline .qa-cur__opt {
	display: block;
}

.qa-cur--inline .qa-cur__opt[hidden] {
	display: none;
}

/* Ohne Skript stehen alle drei Währungen untereinander. Damit das nicht wie
 * ein Fehler aussieht, bekommen sie einen Abstand. */
.qa-cur--inline:not(.qa-cur--ready) .qa-cur__opt + .qa-cur__opt {
	margin-top: var(--wp--preset--spacing--50);
}

/* Der Abstand zur Häkchenliste hing vorher am Absatz; jetzt trägt ihn der
 * Kasten, damit er unabhängig von der Währung gleich bleibt. */
.qa-card .qa-cur--inline + .wp-block-list {
	margin-top: var(--wp--preset--spacing--80);
}

.qa-card .wp-block-list + .qa-cur--inline {
	margin-top: var(--wp--preset--spacing--90);
}

@media (max-width: 781px) {
	/* Die Reiterzeile ist Bedienung, kein Text: unter dem Finger etwas größer. */
	.qa-cur__tab {
		padding: 10px 20px;
	}

	/* Der Kasten richtet linksbündig aus und ließ den Kaufknopf auf
	 * Inhaltsbreite schrumpfen. Auf dem Telefon volle Breite wie alle
	 * übrigen Knöpfe. */
	.qa-cur__opt {
		align-self: stretch;
	}
}

/* ==== 21-video.css ====================================================== */

/* Video im Fenster: Vorschaukarten, Vorschaubild im Beitrag und der Dialog. */

.qa-videocard .qa-card__image {
	position: relative;
}

/* Der Abspiel-Ring über dem Vorschaubild. */
.qa-videocard .qa-card__image::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 52px;
	height: 52px;
	transform: translate(-50%, -50%);
	background-color: var(--wp--preset--color--base);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52' fill='none'%3E%3Ccircle cx='26' cy='26' r='25' stroke='%23000' stroke-opacity='0.85' stroke-width='1.2'/%3E%3Cpath d='M22 17 35 26l-13 9z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52' fill='none'%3E%3Ccircle cx='26' cy='26' r='25' stroke='%23000' stroke-opacity='0.85' stroke-width='1.2'/%3E%3Cpath d='M22 17 35 26l-13 9z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
}

/* Video im Beitrag: Vorschaubild aus der eigenen Mediathek, verlinkt auf
 * YouTube bzw. Vimeo. video.js öffnet es beim Klick im Fenster — vorher geht
 * keine einzige Anfrage an den Videodienst. Ohne JavaScript bleibt es ein
 * Verweis. */
.qa-video-poster a {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--sm);
}

.qa-video-poster img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.qa-video-poster a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgb(26 32 44 / 28%);
	transition: background-color 0.2s ease;
}

.qa-video-poster a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 72px;
	height: 72px;
	transform: translate(-50%, -50%);
	background-color: var(--wp--preset--color--base);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52' fill='none'%3E%3Ccircle cx='26' cy='26' r='25' stroke='%23000' stroke-opacity='0.85' stroke-width='1.2'/%3E%3Cpath d='M22 17 35 26l-13 9z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52' fill='none'%3E%3Ccircle cx='26' cy='26' r='25' stroke='%23000' stroke-opacity='0.85' stroke-width='1.2'/%3E%3Cpath d='M22 17 35 26l-13 9z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
}

.qa-video-poster a:hover::before,
.qa-video-poster a:focus-visible::before {
	background-color: rgb(26 32 44 / 12%);
}

.qa-video-poster a:hover img {
	transform: scale(1.02);
}

.qa-video-poster figcaption {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
}

/*
 * Ein natives <dialog>. Der Browser bringt Fokusfalle, Escape und den
 * Hintergrund mit; hier steht nur, wie es aussieht.
 */
.qa-video {
	width: min(1100px, calc(100vw - 32px));
	max-width: none;
	max-height: none;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
	/* Bezugspunkt für die Schließtaste. Sie sitzt außerhalb des Rahmens,
	 * weil der clippt. */
	position: relative;
}

.qa-video::backdrop {
	background-color: rgb(12 16 11 / 82%);
	backdrop-filter: blur(3px);
}

.qa-video__frame {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgb(0 0 0 / 50%);
	background: #000;
}

/* Das Seitenverhältnis steht am Behälter, nicht am Rahmen: so entsteht die
 * Fläche schon vor dem Laden, und beim Erscheinen des Videos springt nichts. */
.qa-video__stage {
	aspect-ratio: 16 / 9;
	width: 100%;
	display: block;
}

.qa-video__stage iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

/* Die Schließtaste sitzt über dem Rand, nicht im Bild — sonst verdeckt sie
 * die Bedienleiste von YouTube. Auf schmalen Bildschirmen rückt sie hinein,
 * weil darüber kein Platz ist. */
.qa-video__close {
	position: absolute;
	top: -46px;
	right: 0;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	/* Deutlich sichtbar, nicht dezent. Das Video startet von selbst; wer es
	 * stoppen will, soll den Knopf nicht suchen müssen. Bei 14 % Weiß auf
	 * fast schwarzem Grund war er praktisch unsichtbar. */
	background: rgb(255 255 255 / 24%);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 40%);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.qa-video__close:hover {
	background: rgb(255 255 255 / 42%);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 70%);
}

.qa-video__close:focus-visible {
	background: rgb(255 255 255 / 42%);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 70%);
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Der Auftritt: kurz und ruhig, und für alle aus, die weniger Bewegung
 * eingestellt haben. */
.qa-video[open] .qa-video__frame {
	animation: qa-video-auf 0.28s var(--qa-anim-easing, ease-out);
}

@keyframes qa-video-auf {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.985);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 781px) {
	.qa-video__close {
		top: 8px;
		right: 8px;
		background: rgb(0 0 0 / 62%);
		box-shadow: inset 0 0 0 1px rgb(255 255 255 / 45%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.qa-video-poster img,
	.qa-video-poster a::before {
		transition: none;
	}

	.qa-video-poster a:hover img {
		transform: none;
	}

	.qa-video[open] .qa-video__frame {
		animation: none;
	}
}

/* ==== 22-motion.css ===================================================== */

/*
 * Bewegung beim Scrollen.
 *
 * Alles in dieser Datei hängt an .qa-anim auf dem <html>-Element, und die
 * Klasse setzt assets/animation.js — erst, wenn feststeht, dass es laufen
 * kann. Ohne JavaScript, mit einem Browser ohne IntersectionObserver oder bei
 * eingestellter Bewegungsreduktion greift keine einzige dieser Regeln, und die
 * Seite steht vollständig da.
 *
 * Bewegt werden ausschließlich opacity und transform. Beides läuft im
 * Compositor, kostet kein Layout und verschiebt nichts, was schon steht — ein
 * eingeblendeter Abschnitt darf den Text darunter nicht springen lassen.
 *
 * Die Wege sind kurz und die Kurven ruhig. Die Richtung heißt „Still & Weit";
 * ein Abschnitt, der hereinfliegt, wäre eine andere Seite.
 */
:root {
	--qa-anim-distance: 18px;
	--qa-anim-duration: 0.72s;
	--qa-anim-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.qa-anim [data-qa-anim] {
	opacity: 0;
	transform: translate3d(0, var(--qa-anim-distance), 0);
	transition:
		opacity var(--qa-anim-duration) var(--qa-anim-easing),
		transform var(--qa-anim-duration) var(--qa-anim-easing);
}

.qa-anim [data-qa-anim].is-visible {
	opacity: 1;
	transform: none;
}

/* Der Auftakt am Seitenkopf kommt aus geringerer Tiefe und etwas schneller:
 * er ist keine Entdeckung beim Scrollen, sondern der Anfang. */
.qa-anim [data-qa-anim="intro"] {
	--qa-anim-distance: 12px;
	--qa-anim-duration: 0.62s;
}

/* Kinder innerhalb eines Abschnitts rücken kürzer nach. Der Versatz zwischen
 * ihnen kommt aus dem Skript, nicht aus einer Kette von :nth-child-Regeln —
 * die müsste für jede mögliche Anzahl gepflegt werden. */
.qa-anim [data-qa-anim="child"] {
	--qa-anim-distance: 14px;
	--qa-anim-duration: 0.66s;
}

/* Ein Abschnitt, dessen Kinder eigene Versätze haben, blendet selbst ohne
 * Versatz ein — sonst addieren sich beide und das Letzte kommt zu spät. */
.qa-anim [data-qa-anim="section"]:has([data-qa-anim="child"]) {
	transition-delay: 0s;
}

/* Wer weniger Bewegung eingestellt hat, bekommt keine. Die allgemeine Regel
 * kürzt jede Dauer auf 0,01 ms — mit !important, weil sie auch Übergänge in
 * Inline-Stilen und fremdem CSS treffen muss. Die Startzustände werden
 * zusätzlich aufgehoben, damit nichts unsichtbar bleibt. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.qa-anim [data-qa-anim] {
		opacity: 1;
		transform: none;
	}
}

/* Beim Drucken ist nichts zu animieren, und unsichtbar darf nichts sein. */
@media print {
	.qa-anim [data-qa-anim] {
		opacity: 1;
		transform: none;
	}
}

/* ==== 23-person.css ===================================================== */

/* Teamfenster: Porträt links, Rolle, Name, Kurztext und Biografie rechts —
 * die Personenseite in kompakt. Das Verhalten steht in assets/team.js. */

/* Karten: Bild und Name sind der Verweis. */
.qa-team__member .qa-portrait a {
	display: block;
	overflow: hidden;
	border-radius: 8px;
}

.qa-team__member .qa-portrait img {
	transition: transform 0.4s ease;
}

.qa-team__member .qa-portrait a:hover img,
.qa-team__member .qa-portrait a:focus-visible img {
	transform: scale(1.02);
}

.qa-team__member h3 a {
	color: inherit;
	text-decoration: none;
}

.qa-team__member h3 a:hover,
.qa-team__member h3 a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Das Fenster. */
.qa-person {
	/* Breit statt hoch: so passt das Porträt neben den Text, ohne dass das
	 * Fenster den ganzen Bildschirm hinunterreicht. */
	--qa-person-h: min(820px, calc(100dvh - 64px));

	width: min(1200px, calc(100vw - 64px));
	max-width: none;
	/* Oben und unten je mindestens 32 px Luft zum Bildschirmrand. */
	max-height: var(--qa-person-h);
	margin-block: auto;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
	box-shadow: 0 30px 80px rgb(0 0 0 / 35%);
	/* Auf großen Schirmen scrollt nur die Textspalte (siehe unten); auf dem
	 * Telefon scrollt wieder das ganze Fenster. */
	overflow: hidden;
}

.qa-person::backdrop {
	background-color: rgb(12 16 11 / 72%);
	backdrop-filter: blur(3px);
}

/* Die Schließtaste bleibt beim Scrollen oben stehen: eine klebende Leiste
 * ohne Höhe, die Taste darin absolut. */
.qa-person__bar {
	position: sticky;
	top: 0;
	z-index: 1;
	height: 0;
}

.qa-person__inner {
	display: grid;
	/* 30/70: der Text bekommt die Breite, damit sich auch eine lange
	 * Biografie ohne viel Scrollen lesen lässt. */
	grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
	gap: var(--wp--preset--spacing--100);
	align-items: start;
	padding: var(--wp--preset--spacing--100);
}

.qa-person__aside {
	position: sticky;
	top: var(--wp--preset--spacing--100);
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

.qa-person__media {
	margin: 0;
}

/* Ort, Website, E-Mail unter dem Porträt. */
.qa-person__facts {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--secondary);
	overflow-wrap: anywhere;
}

.qa-person__facts li {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
}

.qa-person__role {
	color: var(--wp--preset--color--main);
	font-weight: 700;
}

.qa-person__icon {
	flex: none;
	margin-top: 0.15em;
	color: var(--wp--preset--color--primary);
}

.qa-person__facts a {
	color: var(--wp--preset--color--main);
	text-decoration-color: var(--wp--preset--color--primary);
	text-underline-offset: 3px;
}

.qa-person__media img {
	display: block;
	width: 100%;
	max-height: calc(var(--qa-person-h) - 2 * var(--wp--preset--spacing--100));
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 8px;
}

/* Die Textspalte scrollt für sich und läuft unten weich aus. Der Abstand
 * unten ist so groß wie der Verlauf, damit der letzte Satz ganz sichtbar
 * wird, wenn man bis zum Ende scrollt. */
.qa-person__body {
	max-height: calc(var(--qa-person-h) - 2 * var(--wp--preset--spacing--100));
	padding-right: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--120);
	overflow-y: auto;
	overscroll-behavior: contain;
	mask-image: linear-gradient(to bottom, #000 calc(100% - var(--wp--preset--spacing--120)), transparent);
}

.qa-person__body > * {
	margin-top: 0;
	margin-bottom: 0;
}

.qa-person__body > * + * {
	margin-top: var(--wp--preset--spacing--50);
}

.qa-person__name {
	font-size: var(--wp--preset--font-size--xx-large);
}

.qa-person__lead {
	color: var(--wp--preset--color--secondary);
}

.qa-person__close {
	position: absolute;
	top: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--wp--preset--color--primary-accent);
	color: var(--wp--preset--color--main);
	font-size: 26px;
	line-height: 1;
	text-decoration: none;
}

.qa-person__close:hover,
.qa-person__close:focus-visible {
	background: var(--wp--preset--color--primary-alt);
}

.qa-person__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--main);
	outline-offset: 3px;
}

/* Kein Scrollen der Seite hinter dem offenen Fenster. */
html:has(.qa-person[open]) {
	overflow: hidden;
}

.qa-person[open] .qa-person__inner {
	animation: qa-person-auf 0.24s var(--qa-anim-easing, ease-out);
}

@keyframes qa-person-auf {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Ohne JavaScript: der Sprung auf #person-… zeigt das Fenster im Fluss der Seite. */
.qa-person:target:not([open]) {
	display: block;
	position: static;
	margin: var(--wp--preset--spacing--100) auto;
}

@media (max-width: 781px) {
	.qa-person {
		width: calc(100vw - 32px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.qa-person__body {
		max-height: none;
		padding-right: 0;
		padding-bottom: 0;
		overflow: visible;
		mask-image: none;
	}

	.qa-person__inner {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--70);
		padding: var(--wp--preset--spacing--70);
	}

	/* Auf dem Telefon kompakt: ein Bildstreifen statt eines ganzen Porträts. */
	.qa-person__aside {
		position: static;
	}

	.qa-person__media img {
		aspect-ratio: 4 / 3;
		max-height: 260px;
	}

	.qa-person__name {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

@media (prefers-reduced-motion: reduce) {
	.qa-team__member .qa-portrait img {
		transition: none;
	}

	.qa-person[open] .qa-person__inner {
		animation: none;
	}
}

/* Gastgeber auf einer Veranstaltungsseite: rundes Foto, daneben Name und Rolle. */
.qa-host__photo {
	flex: none;
	margin: 0;
}

.qa-host__photo img {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: var(--wp--preset--border-radius--full);
	object-fit: cover;
}

.qa-host__name {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--line-height--snug);
}

.qa-host__role {
	margin-top: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: var(--wp--custom--line-height--body);
	opacity: 0.85;
}

/* Name und Rolle auf der Karte eng beieinander: die Überschrift bringt sonst
 * ihren eigenen Abstand nach unten mit. */
.qa-team__member .wp-block-heading {
	margin-bottom: 0;
}

/* ==== 24-steps.css ====================================================== */

/* Drei Schritte auf dunklem Grund: große Ziffern im Kreis auf je einer
 * Karte. Auf dem Telefon untereinander. */
.qa-steps__eyebrow {
	color: var(--wp--preset--color--primary-alt);
}

.qa-steps__item {
	position: relative;
	padding: var(--wp--preset--spacing--80);
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: 14px;
	background: rgb(255 255 255 / 6%);
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.qa-steps__item:hover {
	background: rgb(255 255 255 / 10%);
	transform: translateY(-4px);
}

.qa-steps__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-deep);
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
}

.qa-steps__title {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-large);
}

.qa-steps__text {
	color: rgb(255 255 255 / 82%);
}

@media (prefers-reduced-motion: reduce) {
	.qa-steps__item {
		transition: none;
	}

	.qa-steps__item:hover {
		transform: none;
	}
}

/* Telefon: eine Spalte. Doppelte Klasse, damit die Regel gegen die
 * Rasterspalten aus dem Layout des Blocks gewinnt. */
@media (max-width: 781px) {
	.qa-steps__list.qa-steps__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.qa-steps__item {
		padding: var(--wp--preset--spacing--70);
	}

	.qa-steps__number {
		width: 52px;
		height: 52px;
		font-size: var(--wp--preset--font-size--large);
	}
}

/* ==== 25-rules.css ====================================================== */

/* Gemeinschaftsregeln: Video links, das beim Lesen stehen bleibt; rechts
 * die Regeln als nummerierte Liste mit großen Ziffern. */
.qa-rules__media {
	position: sticky;
	top: var(--wp--preset--spacing--130);
}

.qa-rules__item {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	align-items: center;
	column-gap: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--80);
	border-top: 1px solid var(--wp--preset--color--border-dark);
}

.qa-rules__item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border-dark);
}

.qa-rules__number {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--xxx-large);
	font-weight: var(--wp--custom--font-weight--light);
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

.qa-rules__title {
	font-size: var(--wp--preset--font-size--large);
}

@media (max-width: 781px) {
	.qa-rules__media {
		position: static;
	}

	.qa-rules__item {
		grid-template-columns: 3rem minmax(0, 1fr);
	}

	.qa-rules__number {
		font-size: var(--wp--preset--font-size--xx-large);
	}
}

/* ==== 26-week.css ======================================================= */

/* Eine Woche in der Gemeinschaft: sieben Tagesspalten, jede Stunde ein
 * kleines Kärtchen. Unter 1000 px zwei Spalten, auf dem Telefon eine. */
.qa-week__days {
	align-items: start;
}

.qa-week__name {
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--main);
}

.qa-week__session {
	padding: var(--wp--preset--spacing--40);
	border-radius: 8px;
	background: var(--wp--preset--color--primary-accent);
}

.qa-week__time {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--xx-small);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-alt-accent);
}

.qa-week__title {
	margin-top: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--main);
}

.qa-week__teacher {
	font-size: var(--wp--preset--font-size--xx-small);
	color: var(--wp--preset--color--secondary);
}

@media (max-width: 1000px) {
	.qa-week__days.qa-week__days {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.qa-week__days.qa-week__days {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--60);
	}

	/* Telefon: Tag links, seine Stunden rechts daneben — halb so lang wie
	 * sieben gestapelte Spalten. */
	.qa-week__day {
		display: grid;
		grid-template-columns: 3.25rem minmax(0, 1fr);
		gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
		align-items: start;
	}

	.qa-week__day > * {
		grid-column: 2;
		margin-top: 0;
	}

	.qa-week__day > .qa-week__name {
		grid-column: 1;
		grid-row: 1;
		padding-top: var(--wp--preset--spacing--30);
		padding-bottom: 0;
		border-bottom: 0;
		font-size: var(--wp--preset--font-size--small);
	}

	.qa-week__session {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}
}

/* ==== 27-buy.css ======================================================== */

/* Kaufkarte auf Kursseiten: ein Währungsumschalter
 * und zwei Wege nebeneinander — den Kurs kaufen oder die Gemeinschaft
 * ausprobieren. Beide Knöpfe führen direkt zur Kasse. */
.qa-buy {
	overflow: hidden;
}

.qa-buy__body {
	padding: var(--wp--preset--spacing--80);
}

.qa-buy__options.qa-buy__options {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(4, auto);
	align-items: stretch;
	margin-top: var(--wp--preset--spacing--70);
}

/* Beide Wege teilen sich ein Raster aus vier Zeilen (Augenbraue, Preis,
 * Satz, Knopf). So stehen die Knöpfe auf einer Linie, und bricht eine
 * Beschriftung um, werden beide Knöpfe gleich hoch statt nur einer. */
.qa-buy__option {
	display: grid;
	grid-row: span 4;
	grid-template-rows: subgrid;
	row-gap: 0;
}

.qa-buy__option > .wp-block-buttons {
	align-items: stretch;
	padding-top: var(--wp--preset--spacing--60);
}

.qa-buy__option .wp-block-button {
	display: flex;
}

.qa-buy__option .wp-block-button__link {
	flex: 1 1 auto;
	padding-inline: var(--wp--preset--spacing--40);
}

.qa-buy__note {
	color: var(--wp--preset--color--secondary);
}

@media (max-width: 480px) {
	.qa-buy__options.qa-buy__options {
		grid-template-columns: minmax(0, 1fr);
	}

	.qa-buy__body {
		padding: var(--wp--preset--spacing--70);
	}
}

/* ==== 28-toc.css ======================================================== */

/* Inhaltsverzeichnis in Blogartikeln. Breit: links neben dem Text, stehend.
 * Schmal: ein aufklappbarer Kasten über dem Text. */
.qa-withtoc {
	max-width: 760px;
	margin-inline: auto;
}

.qa-article-toc {
	margin-bottom: var(--wp--preset--spacing--100);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	border-radius: var(--wp--preset--border-radius--sm);
	background: var(--wp--preset--color--primary-accent);
}

.qa-article-toc__title {
	cursor: pointer;
	list-style: none;
	margin: 0;
}

.qa-article-toc__title::-webkit-details-marker {
	display: none;
}

.qa-article-toc__title::after {
	content: " ▾";
}

.qa-article-toc__box[open] .qa-article-toc__title::after {
	content: " ▴";
}

.qa-article-toc__list {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding-left: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: var(--wp--custom--line-height--snug);
}

.qa-article-toc__list a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.qa-article-toc__list a:hover,
.qa-article-toc__list a:focus-visible,
.qa-article-toc__list a.is-current {
	color: var(--wp--preset--color--main);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.qa-article-toc__list a.is-current {
	font-weight: var(--wp--custom--font-weight--bold);
}

/* Sprungziele nicht unter der klebenden Kopfzeile verstecken. */
.qa-withtoc h2[id] {
	scroll-margin-top: calc(var(--qa-header-height, 96px) + var(--wp--preset--spacing--60));
}

@media (min-width: 1280px) {
	.qa-withtoc {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 760px) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--100);
		max-width: none;
	}

	.qa-withtoc__main {
		grid-column: 2;
	}

	.qa-article-toc {
		grid-column: 1;
		grid-row: 1;
		place-self: start end;
		position: sticky;
		top: calc(var(--qa-header-height, 96px) + var(--wp--preset--spacing--70));
		width: min(260px, 100%);
		max-height: calc(100vh - var(--qa-header-height, 96px) - var(--wp--preset--spacing--120));
		overflow-y: auto;
		margin-bottom: 0;
		padding: 0;
		background: transparent;
	}

	/* Breit gibt es nichts aufzuklappen. */
	.qa-article-toc__title {
		pointer-events: none;
	}

	.qa-article-toc__title::after,
	.qa-article-toc__box[open] .qa-article-toc__title::after {
		content: none;
	}
}

/* ==== 29-dates.css ====================================================== */

/* Termine der Short Teacher Training (inc/dates.php, Shortcode [qa_dates]).
 * Das Markup kommt aus PHP, nicht aus Blöcken — Abstände und Raster, die
 * sonst das Block-Layout setzt, stehen deshalb hier. */

/* Block „Short training dates": Kopf und Karten mit dem Abstand der Sektion. */
.wp-block-qa-dates {
	display: grid;
	gap: var(--wp--preset--spacing--110);
}

.qa-dates__head > * {
	margin-block: 0;
}

.qa-dates__head > * + * {
	margin-top: var(--wp--preset--spacing--50);
}

.qa-dates__head .qa-lead {
	margin-inline: auto;
}

/* Drei Termine füllen die breite Spalte. Bei weniger behält jede Karte die
 * Breite eines Drittels und die Reihe steht mittig, statt sich zu dehnen. */
.qa-dates__grid {
	--qa-dates-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--qa-dates-cols), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--90);
	max-width: calc((var(--wp--style--global--wide-size) - 2 * var(--wp--preset--spacing--90)) / 3 * var(--qa-dates-cols) + (var(--qa-dates-cols) - 1) * var(--wp--preset--spacing--90));
	margin-inline: auto;
}

.qa-dates__grid--1 {
	--qa-dates-cols: 1;
}

.qa-dates__grid--2 {
	--qa-dates-cols: 2;
}

.qa-dates__card {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--90);
}

.qa-dates__card > * {
	margin-block: 0;
}

.qa-dates__place {
	margin-top: var(--wp--preset--spacing--40);
}

.qa-dates__venue {
	margin-top: var(--wp--preset--spacing--20);
}

.qa-dates__facts {
	margin-top: var(--wp--preset--spacing--60);
}

/* Knöpfe einer Reihe auf einer Linie, auch bei ungleich langen Karten. */
.qa-dates__card .qa-dates__action {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--70);
}

/* Lange Partnernamen brechen um, aber nie mitten im Wort; der Pfeil bleibt
 * am letzten Wort (geschütztes Leerzeichen in inc/dates.php). */
.qa-dates__card .wp-block-button__link {
	text-wrap: balance;
}

.qa-dates__head .qa-dates__action {
	justify-content: center;
}

@media (max-width: 781px) {
	.qa-dates__grid {
		--qa-dates-cols: 1;
	}
}

/* ==== 30-breadcrumbs.css ================================================ */

/* Brotkrumen unter der Kopfzeile (inc/breadcrumbs.php). Leise: klein, gedämpft,
 * auf der Breite des Inhalts. */
.qa-crumbs {
	/* Die Seitenhülle ist eine Flex-Spalte: ohne volle Breite schrumpfte die
	 * Leiste auf ihren Inhalt und stünde mittig. */
	align-self: stretch;
	width: 100%;
	max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-left, 24px) + var(--wp--style--root--padding-right, 24px));
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50) var(--wp--style--root--padding-right, 24px) 0 var(--wp--style--root--padding-left, 24px);
	box-sizing: border-box;
	font-size: var(--wp--preset--font-size--xx-small);
	color: var(--wp--preset--color--secondary);
}

.qa-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.qa-crumbs li + li::before {
	content: "›";
	margin-right: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--border-dark);
}

.qa-crumbs a {
	color: inherit;
	text-decoration: none;
}

/* Hover wie alle Textlinks: 03-typography.css. */
.qa-crumbs [aria-current] {
	color: var(--wp--preset--color--main);
}