/*
 * KONTRAST-PFLICHT (gilt fuer ALLE compendion-*.css Dateien):
 * - Hintergrundfarbe immer ueber die Theme-Tokens `--wp--preset--color--*`
 *   (base, contrast, surface, line, primary, secondary, muted, accent) bzw.
 *   die Site-Palette-Variablen `--compendion-podcast-*`. Diese Tokens werden
 *   pro Site umgefaerbt – hardcodierte Hex/rgb-Werte brechen das.
 * - Textfarbe IMMER explizit setzen, wenn ein Element einen Hintergrund setzt.
 *   Niemals `background` ohne `color` auf demselben Element.
 * - Text auf einer eingefaerbten Flaeche IMMER ueber das passende Companion-
 *   Token `--compendion-color-on-<flaeche>` setzen, mit dem Theme-Token als
 *   Fallback. Diese on-Tokens emittiert die Site-Palette per-Site WCAG-geprueft
 *   (includes/palette/site-palette.php). `base`/`contrast`/`muted` sind je nach
 *   Palette NICHT zuverlaessig hell bzw. dunkel – auf Compendion ist `base` gelb
 *   und `surface`/`contrast`/`muted` sind alle dunkel. Wer `contrast` als
 *   "Text auf surface" hartkodiert, baut dunkel-auf-dunkel.
 *     auf surface  -> `var(--compendion-color-on-surface,  var(--wp--preset--color--contrast))`
 *     auf base     -> `var(--compendion-color-on-base,     var(--wp--preset--color--contrast))`
 *     auf primary  -> `var(--compendion-color-on-primary,  var(--wp--preset--color--base))`
 *     auf accent   -> `var(--compendion-color-on-accent,   var(--wp--preset--color--base))`
 * - Karten: `background: var(--wp--preset--color--surface);
 *   color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));`
 * - Buttons/CTAs: `background: var(--wp--preset--color--primary);
 *   color: var(--compendion-color-on-primary, var(--wp--preset--color--base));`
 * - Sekundaertext auf surface: gedaempftes on-surface
 *   `color-mix(in srgb, var(--compendion-color-on-surface, …) 65%, transparent)`,
 *   nicht `muted` (auf manchen Paletten selbst dunkel → unleserlich auf surface).
 * - Hardcodierte Farben nur fuer (a) Schatten-/Overlay-Alphas via color-mix
 *   und (b) bewusst markengetreue Akzente (z.B. Plattform-Brand-Farben auf
 *   den Monogramm-Icons), wo die Markenfarbe der Inhalt ist.
 */

/*
 * Compendion Unterstuetzungs-Seite (`/unterstuetzung/`).
 *
 * Eigenstaendig, nur Theme-Tokens (`--wp--preset--*`) – keine Abhaengigkeit von
 * compendion-cardlist.css. Geladen via functions.php → `compendion-support`,
 * nur auf der Seite mit Slug `unterstuetzung`.
 *
 * Aufbau:
 *   .compendion-support            Wrapper (vom Block gerendert)
 *   .compendion-support-hero       Person-Card (Arne) + Begleittext
 *   .compendion-support__bar       Pillen-Filter (Kategorie + Frequenz)
 *   .compendion-support__cards     Grid groesserer Support-Karten
 *   .compendion-support-card       Einzelne Karte (money | reach)
 */

.compendion-support {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 4vw, 2.75rem);
}

/* === Hero ============================================================== */

.compendion-support-hero {
	display: flex;
	align-items: flex-start;
}

/* Kein Card-Wrapper mehr – nur das Bild, zentriert. */
.compendion-support-hero__person {
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.compendion-support-hero__avatar {
	width: clamp(7.5rem, 14vw, 10rem);
	height: clamp(7.5rem, 14vw, 10rem);
	aspect-ratio: 1 / 1;
	/* Personen-Avatar: cover (fuellt die 1:1-Box). no-crop gilt nur fuer Cover. */
	object-fit: cover;
	border-radius: 0.5rem;
	border: 3px solid var(--wp--preset--color--accent, currentColor);
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 8%, transparent);
}

.compendion-support-hero__avatar--empty {
	display: block;
}

.compendion-support-hero__text {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.compendion-support-hero__title {
	margin: 0;
	font-size: clamp(1.6rem, 4.5vw, 2.4rem);
	line-height: 1.15;
	color: var(--wp--preset--color--contrast, inherit);
}

.compendion-support-hero__text p:not(.compendion-kicker) {
	margin: 0;
	font-size: clamp(1rem, 2vw, 1.15rem);
	line-height: 1.6;
	max-width: 60ch;
	color: var(--wp--preset--color--contrast, inherit);
}

/* CTA „Ich möchte helfen!" – scrollt zur Pillen-Bar. <a> statt <button>.
   WICHTIG: <a> braucht die Marker-Klasse `.compendion-cta` (im PHP gesetzt),
   sonst zieht der Dark-Mode-Link-Recolor in compendion-dark.css den Text auf
   einen hellen Brand-Ton → hell-auf-hell-primary, unleserlich. Siehe dort. */
.compendion-support-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	border-radius: 0.65rem;
	/* CTA-Token statt rohem primary: auf der Dachmarke ist primary == base (gelb
	 * auf gelb → unsichtbar, wie die Startseiten-Buttons). cta-on-base ist WCAG-
	 * sichtbar gegen base und fällt auf Sub-Sites mit sichtbarem primary auf
	 * genau dieses zurück (site-palette.php) → kein optischer Bruch dort. */
	background: var(--c-button-bg, var(--wp--preset--color--primary));
	color: var(--c-button-text, var(--wp--preset--color--base));
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
	align-self: flex-start; /* kein full-width stretch */
	margin-top: 0.5rem;
}

.compendion-support-hero__cta:hover,
.compendion-support-hero__cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 0.6rem 1.4rem color-mix(in srgb, var(--c-button-bg, var(--wp--preset--color--primary)) 50%, transparent);
	filter: brightness(0.94);
}

/* Dark Mode: CTA-Dark-Token (System-Pref + manueller Toggle). */
@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .compendion-support-hero__cta {
		background: var(--c-button-bg-dark, var(--wp--preset--color--primary));
		color: var(--c-button-text-dark, var(--wp--preset--color--base));
	}
}

html[data-color-scheme="dark"] .compendion-support-hero__cta {
	background: var(--c-button-bg-dark, var(--wp--preset--color--primary));
	color: var(--c-button-text-dark, var(--wp--preset--color--base));
}

/* Fundus-Teaser unter dem CTA – dezenter Textlink „Was macht Arne alles?". */
.compendion-support-hero__fundus {
	margin-top: 0.75rem;
	font-size: clamp(0.95rem, 1.8vw, 1.05rem);
	color: var(--c-on-base-muted);
}

.compendion-support-hero__fundus-link {
	font-weight: 600;
	/* on-base-accent: WCAG-garantierter Akzent auf base. Rohes accent kippt auf
	   satter base (GHU rot, WGJC navy); in Light greift die Dark-Umfaerbung nicht. */
	color: var(--c-on-base-accent, var(--wp--preset--color--accent, currentColor));
	text-decoration: underline;
	text-underline-offset: 0.15em;
	white-space: nowrap;
}

.compendion-support-hero__fundus-link:hover,
.compendion-support-hero__fundus-link:focus-visible {
	color: color-mix(in srgb, var(--c-on-base-accent) 70%, var(--wp--preset--color--contrast));
	text-decoration: none;
}

/* Mitwirkenden-Hinweis: zweite Teaser-Zeile, eng an den Fundus-Teaser gerückt. */
.compendion-support-hero__contributors {
	margin-top: 0.25rem;
}

/* === Post-Content-Layout: Avatar links / Text rechts ================== */
/*
 * .wp-block-post-content wird zum 2-Spalten-Grid: Avatar-Shortcode in Spalte 1,
 * .compendion-support-intro (wp:group mit allen 4 Absätzen) in Spalte 2,
 * [compendion-unterstuetzung]-Karten über volle Breite.
 * position: sticky am Avatar haelt ihn beim Scrollen neben dem Text sichtbar.
 */

.compendion-support-page .wp-block-post-content {
	display: grid;
	grid-template-columns: minmax(200px, 260px) 1fr;
	column-gap: clamp(1.25rem, 4vw, 2.5rem);
	row-gap: 0.6rem;
	align-items: start;
}

.compendion-support-page .wp-block-post-content > .compendion-support-hero {
	grid-column: 1;
	position: sticky;
	top: clamp(1rem, 3vw, 2rem);
	align-self: start;
}

.compendion-support-page .wp-block-post-content > .compendion-support-intro {
	grid-column: 2;
	align-self: start;
}

.compendion-support-intro > p {
	max-width: 850px;
	margin-block: 0;
}

.compendion-support-intro > p + p {
	margin-top: 0.6rem;
}

.compendion-support-page .wp-block-post-content > .compendion-support {
	grid-column: 1 / -1;
	margin-top: clamp(1.5rem, 4vw, 2.75rem);
}

@media (max-width: 720px) {
	.compendion-support-page .wp-block-post-content {
		grid-template-columns: 1fr;
	}

	.compendion-support-page .wp-block-post-content > .compendion-support-hero {
		position: static;
		justify-self: center;
	}

	.compendion-support-page .wp-block-post-content > .compendion-support-intro,
	.compendion-support-page .wp-block-post-content > .compendion-support {
		grid-column: 1;
	}
}

/* === Maezenatentum-Darstellung ======================================== */
/*
 * Ersetzt den Einleitungsblock (page-maezenatentum.php), behaelt aber die
 * Klasse .compendion-support-intro und damit die Grid-Spalte. Text steht auf
 * der Seiten-Base -> on-base-Token; die Code-Zeilen sitzen auf surface-panel
 * mit dessen eigenem on-Token (Kontrast-Konvention).
 */

.compendion-maezen {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	max-width: 850px;
	color: var(--c-on-base, var(--wp--preset--color--contrast, inherit));
}

.compendion-maezen p {
	margin: 0;
	max-width: 850px;
}

.compendion-maezen > p + p {
	margin-top: -0.5rem;
}

.compendion-maezen__title {
	margin: 0;
	font-size: clamp(1.6rem, 4.5vw, 2.4rem);
	line-height: 1.15;
	color: var(--c-on-base, var(--wp--preset--color--contrast, inherit));
}

.compendion-maezen__heading {
	margin: 0 0 0.4rem;
	font-size: clamp(1.15rem, 2.5vw, 1.35rem);
	line-height: 1.25;
	color: var(--c-on-base, var(--wp--preset--color--contrast, inherit));
}

.compendion-maezen__section {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--c-page-border, color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent));
}

.compendion-maezen__section > .compendion-maezen__heading {
	margin-bottom: 0;
}

.compendion-maezen__examples {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.compendion-maezen__examples code {
	display: block;
	padding: 0.55rem 0.8rem;
	border-radius: 0.5rem;
	font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
	font-size: 0.92rem;
	line-height: 1.45;
	white-space: normal;
	overflow-wrap: anywhere;
	background: var(--compendion-color-surface-panel, color-mix(in srgb, var(--wp--preset--color--surface) 94%, var(--wp--preset--color--base)));
	color: var(--compendion-color-on-surface-panel, var(--compendion-color-on-surface, var(--wp--preset--color--contrast, inherit)));
}

/* Stufen-Kaesten (Nennung, Widmung): dieselbe Flaeche wie die Code-Zeilen und
   die Zahlwege-Karten, damit die Stufen sichtbar zu den Karten gehoeren.
   Desktop nebeneinander, unter 720px untereinander. */
.compendion-maezen__tiers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.8rem;
	margin: 0.2rem 0;
}

.compendion-maezen__tier {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 1rem 1.1rem 1.05rem;
	border-radius: 0.75rem;
	background: var(--compendion-color-surface-panel, color-mix(in srgb, var(--wp--preset--color--surface) 94%, var(--wp--preset--color--base)));
	color: var(--compendion-color-on-surface-panel, var(--compendion-color-on-surface, var(--wp--preset--color--contrast, inherit)));
}

.compendion-maezen .compendion-maezen__tier-amount {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.45rem;
	margin: 0;
	font-size: clamp(1.7rem, 4vw, 2.2rem);
	font-weight: 700;
	line-height: 1.1;
}

.compendion-maezen__tier-unit {
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.3;
	color: color-mix(in srgb, currentColor 78%, transparent);
}

.compendion-maezen .compendion-maezen__tier-text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
}

/* Knopf unter den Kaesten: springt zu den Karten. Farbe = `glow`, die
   Komplementaer-Kontrastfarbe der Site (site-palette.php: oklch, Farbton von
   primary + 180, feste Helligkeit 0.62; dieselbe Farbe wie der Dreieck-Hover
   an Header und Footer). Arne 2026-10-13: „die krasseste des Themes“. Text
   dunkel: bei L 0.62 rund 6,5:1 gegen Schwarz, nur rund 3:1 gegen Weiss.
   Gleiche Farbe hell und dunkel, weil glow gegen beide Hintergruende steht.
   WCAG-Audit: Paar `glow-button-text` in site-palette.php (Text = Konstante
   COMPENDION_GLOW_BUTTON_TEXT, muss mit `color` hier uebereinstimmen),
   Test tests/GlowButtonContrastTest.php (alle Farbtoene >= 4,5:1).
   NICHT primary: auf der Hauptseite ist primary = Seitenfarbe (Befund). */
.compendion-maezen .compendion-maezen__cta {
	margin: 0.1rem 0 0.2rem;
}

.compendion-maezen__cta-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.3rem;
	border-radius: 0.65rem;
	/* Kontrastrahmen in der Textfarbe der Seite (on-base: dunkel auf hell, hell
	   auf dunkel), damit das Glow nicht nackt auf der Flaeche steht (Arne
	   2026-10-13: „sonst zu krass“). Nur dieser Knopf. */
	border: 2px solid var(--c-on-base, var(--wp--preset--color--contrast, #111111));
	background: var(--wp--preset--color--glow, #7c3aed);
	color: #111111;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.compendion-maezen__cta-link:hover,
.compendion-maezen__cta-link:focus-visible {
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow: 0 0 14px color-mix(in srgb, var(--wp--preset--color--glow, #7c3aed) 60%, transparent);
}

.compendion-maezen__cta-link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* Sprungziel mit Luft nach oben, damit die Ueberschrift nicht am Rand klebt. */
#so-kannst-du-geben {
	scroll-margin-top: 1.5rem;
}

@media (max-width: 720px) {
	.compendion-maezen__tiers {
		grid-template-columns: 1fr;
	}
	.compendion-maezen__cta-link {
		width: 100%;
	}
}

.compendion-maezen__codes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.compendion-maezen__code {
	margin: 0;
	padding: 0.25rem 0.65rem;
	border: 1px solid var(--c-page-border, color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent));
	border-radius: 999px;
	font-size: 0.92rem;
	line-height: 1.4;
}

/* Hervorhebung: nicht nur Farbe – fetter Rahmen und Unterstreichung des Kuerzels. */
.compendion-maezen__code.is-current {
	border-width: 2px;
	border-color: currentColor;
	font-weight: 700;
}

.compendion-maezen__code.is-current strong {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Tafel: dunkle Flaeche wie die Kaesten, Namen gross, Groesse nach Anzahl.
   Schlicht (kein Signalrahmen, keine Adresse): Dank, keine Leistung. */
.compendion-maezen__tafel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	margin: 0.3rem 0 0.2rem;
	padding: 1.4rem 1.2rem 1.5rem;
	border-radius: 0.9rem;
	text-align: center;
	background: var(--compendion-color-surface-panel, color-mix(in srgb, var(--wp--preset--color--surface) 94%, var(--wp--preset--color--base)));
	color: var(--compendion-color-on-surface-panel, var(--compendion-color-on-surface, var(--wp--preset--color--contrast, inherit)));
}

/* Kopf der Tafel: Logo der Hauptseite + Wortmarke in der Display-Schrift,
   darunter ein Haarstrich – die Tafel soll ohne Seite drumherum lesbar sein. */
.compendion-maezen .compendion-maezen__tafel-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	margin: 0 0 0.55rem;
	padding-bottom: 0.8rem;
	border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
}

.compendion-maezen__tafel-logo {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.6rem;
	object-fit: cover;
	flex: 0 0 auto;
}

.compendion-maezen .compendion-maezen__tafel-label {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: color-mix(in srgb, currentColor 80%, transparent);
}

.compendion-maezen .compendion-maezen__tafel-month {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	font-weight: 600;
}

.compendion-maezen__names {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.compendion-maezen__tafel--few .compendion-maezen__names {
	font-size: clamp(1.9rem, 6vw, 2.8rem);
}

.compendion-maezen__tafel--some .compendion-maezen__names {
	font-size: clamp(1.3rem, 4vw, 1.8rem);
}

.compendion-maezen__tafel--mid .compendion-maezen__names {
	gap: 0.3rem 1rem;
	font-size: 1.15rem;
}

/* Ab 31 Namen: Fliesstext in Lesegroesse, Namen durch Punkte getrennt – das
   skaliert bis in die Hunderte, ohne dass die Tafel zur Wand wird. */
.compendion-maezen__tafel--many .compendion-maezen__names {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.6;
	text-align: center;
}

.compendion-maezen__tafel--many .compendion-maezen__names li {
	display: inline;
}

.compendion-maezen__tafel--many .compendion-maezen__names li + li::before {
	content: " \00b7 ";
	font-weight: 400;
	opacity: 0.6;
}

/* Namen als Knoepfe im Link-Stil (gepunktet unterstrichen): da passiert was. */
.compendion-maezen .compendion-maezen__name {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-decoration: underline dotted;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.18em;
}

.compendion-maezen .compendion-maezen__name:hover,
.compendion-maezen .compendion-maezen__name:focus-visible {
	text-decoration-style: solid;
}

.compendion-maezen .compendion-maezen__name:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 0.2rem;
}

/* Danke-Karte: kleines Fenster in Tafel-Optik, fuer den Screenshot gebaut. */
.compendion-maezen-card {
	position: relative;
	width: min(92vw, 24rem);
	margin: auto;
	padding: 1.6rem 1.4rem 1.4rem;
	border: 0;
	border-radius: 1rem;
	text-align: center;
	background: var(--compendion-color-surface-panel, color-mix(in srgb, var(--wp--preset--color--surface) 94%, var(--wp--preset--color--base)));
	color: var(--compendion-color-on-surface-panel, var(--compendion-color-on-surface, var(--wp--preset--color--contrast, inherit)));
	box-shadow: 0 2rem 4rem color-mix(in srgb, var(--wp--preset--color--contrast, #000) 30%, transparent);
}

.compendion-maezen-card::backdrop {
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 55%, transparent);
	backdrop-filter: blur(4px);
}

.compendion-maezen-card[open] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
}

.compendion-maezen-card p {
	margin: 0;
}

.compendion-maezen-card .compendion-maezen__tafel-brand {
	margin-bottom: 0.55rem;
	padding-bottom: 0.8rem;
	border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.compendion-maezen-card .compendion-maezen__tafel-label {
	font-size: 0.78rem;
}

.compendion-maezen-card__claim {
	margin-top: 0.4rem;
	font-size: 1.1rem;
	font-weight: 600;
}

.compendion-maezen-card__name {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(2.2rem, 9vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	overflow-wrap: anywhere;
}

.compendion-maezen-card__note {
	margin-top: 0.4rem;
	font-size: 0.95rem;
}

.compendion-maezen-card__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.9rem;
}

.compendion-maezen-card__action {
	appearance: none;
	padding: 0.45rem 0.9rem;
	border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
	border-radius: 999px;
	background: none;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
}

.compendion-maezen-card__action:hover,
.compendion-maezen-card__action:focus-visible {
	border-color: currentColor;
}

.compendion-maezen-card__close {
	position: absolute;
	top: 0.5rem;
	right: 0.6rem;
	width: 2rem;
	height: 2rem;
	appearance: none;
	border: 0;
	border-radius: 50%;
	background: none;
	font-size: 1.4rem;
	line-height: 1;
	color: inherit;
	cursor: pointer;
}

/* Fruehere Monate: klein, eingeklappt, unter der Tafel. */
.compendion-maezen__archive {
	margin: -0.1rem 0 0.2rem;
	font-size: 0.9rem;
}

.compendion-maezen__archive summary {
	cursor: pointer;
	font-weight: 600;
	color: color-mix(in srgb, currentColor 80%, transparent);
}

.compendion-maezen .compendion-maezen__archive-list {
	margin: 0.4rem 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.compendion-maezen__complete,
.compendion-maezen__preview {
	padding: 0.5rem 0.8rem;
	border: 1px dashed currentColor;
	border-radius: 0.5rem;
	font-size: 0.92rem;
}

/* Schlusssatz: steht als eigener Block hinter den Zahlwegen (page-unterstuetzung.php),
   Seitentext auf base -> on-base-Token. */
.compendion-maezen__closing {
	max-width: 850px;
	padding-top: 0.9rem;
	border-top: 1px solid var(--c-page-border, color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent));
	color: var(--c-on-base, var(--wp--preset--color--contrast, inherit));
	font-size: 1.05rem;
	line-height: 1.6;
}

.compendion-maezen__closing p {
	margin: 0;
}

/* Bei aktiver Maezenatentum-Darstellung ist das Bild eine Signatur, kein
   Aufmacher: Spalte schmaler (nur im Zweispalten-Layout, sonst schlaegt die
   Regel die 1fr-Spalte der 720px-Query), mobil klein und linksbuendig direkt
   ueber dem Titel. Grid-Kinder floaten nicht, deshalb kein Umfluss. */
@media (min-width: 721px) {
	.has-maezen .compendion-support-page .wp-block-post-content {
		grid-template-columns: minmax(140px, 180px) 1fr;
	}
}

@media (max-width: 720px) {
	.has-maezen .compendion-support-page .wp-block-post-content > .compendion-support-hero,
	.has-maezen .compendion-support-page .compendion-network-content__body > .compendion-support-hero {
		justify-self: start;
		width: 5rem;
		margin-bottom: 0.25rem;
	}

	.has-maezen .compendion-support-page .compendion-support-hero__person {
		max-width: 5rem;
	}
}

/* Weitersagen: schmale Zeile statt Kartenwand – kleine Kacheln, nur Icon und
   Name; Teaser und der Teilen-/Kopieren-Knopf (::after) entfallen, die ganze
   Kachel ist der Knopf (role=button bleibt). */
.compendion-support__section--reach-compact .compendion-support__cards {
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: 0.6rem;
}

.compendion-support__section--reach-compact .compendion-support-card--reach {
	flex-direction: row;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.8rem;
	min-height: 0;
}

.compendion-support__section--reach-compact .compendion-support-card--reach::after {
	display: none;
}

.compendion-support__section--reach-compact .compendion-support-card__head {
	margin: 0;
	flex: 0 0 auto;
}

.compendion-support__section--reach-compact .compendion-support-card__icon {
	width: 2rem;
	height: 2rem;
	font-size: 0.85rem;
}

.compendion-support__section--reach-compact .compendion-support-card__title {
	font-size: 0.95rem;
	margin: 0;
	overflow-wrap: normal;
	word-break: keep-all;
}

.compendion-support__section--reach-compact .compendion-support-card__teaser {
	display: none;
}

/* === Pillen-Filter ===================================================== */

.compendion-support__bar {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.compendion-support__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.compendion-support__pills--frequency {
	margin-top: 0.25rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--c-page-border);
}

.compendion-support__pills[hidden] {
	display: none;
}

/* Pillen – visuell konsistent mit .ccl-pill, aber token-basiert + eigenstaendig. */
.compendion-support .ccl-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 1rem;
	border: 1px solid var(--c-page-border);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 4%, transparent);
	color: var(--wp--preset--color--contrast, inherit);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.compendion-support .ccl-pill--sub {
	font-size: 0.82rem;
	padding: 0.35rem 0.85rem;
}

.compendion-support .ccl-pill:hover,
.compendion-support .ccl-pill:focus-visible {
	border-color: var(--wp--preset--color--accent, currentColor);
	outline: none;
}

.compendion-support .ccl-pill:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, currentColor);
	outline-offset: 2px;
}

.compendion-support .ccl-pill.is-active {
	background: var(--wp--preset--color--contrast, #1a1a1a);
	color: var(--wp--preset--color--base, #fff);
	border-color: var(--wp--preset--color--contrast, #1a1a1a);
}

/* === Sektionen ======================================================== */

.compendion-support__section {
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2.5vw, 1.5rem);
}

.compendion-support__section[hidden] {
	display: none;
}

.compendion-support__section-title {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: clamp(1.3rem, 3vw, 1.6rem);
	line-height: 1.2;
	/* P3: Page-Text auf base -> on-base-Token (contrast als Fallback fuer
	   palettenlose Sites). Robust gegen satte base (GHU rot / WGJC navy). */
	color: var(--c-on-base, var(--wp--preset--color--contrast, inherit));
}

/* P3: feine Trennlinie rechts neben der Ueberschrift fuer Rhythmus (palettenfest). */
.compendion-support__section-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--c-page-border, color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent));
}

/* === Karten-Grid ====================================================== */

.compendion-support__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(1rem, 2.5vw, 1.5rem);
	/* Kein align-items: start – Karten einer Zeile strecken auf gleiche Höhe
	   (Grid-Default stretch). Das ist der Master-Schalter: solange der Container
	   start erzwingt, bliebe ein align-self an der Karte wirkungslos. */
}

/* Eine ausgeblendete Karte nimmt keinen Grid-Platz ein. */
.compendion-support-card[hidden] {
	display: none;
}

.compendion-support-card {
	--support-accent: var(--wp--preset--color--primary, currentColor);
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	min-width: 0;
	/* Kein align-self: start – die Karten sollen in einer Grid-Zeile auf gleiche
	   Höhe strecken (Grid-default stretch). Der frühere min-height:100%-Bug aus
	   components.css ist gefixt, daher ist stretch jetzt unbedenklich. */
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--compendion-podcast-surface, var(--wp--preset--color--surface));
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast, inherit));
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1rem;
	/* Karte ist jetzt nur noch Einstiegspunkt (Icon + Titel + Teaser) und oeffnet
	   ein Modal – komplett klickbar. (StopTheMadness Pro setzt den Cursor lokal
	   trotzdem zurueck; Author-!important schlaegt das nicht, ist nur Arnes
	   Client-Sicht, echte Besucher sehen den Pointer. Siehe
	   [[reference_stopthemadness_cursor]].) */
	cursor: pointer;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.compendion-support-card:hover {
	/* Kein transform: translateY() – transforms auf grid-items triggern in
	   Safari/WebKit grid-reflow und lassen benachbarte Karten wachsen.
	   Nur layout-neutrale Eigenschaften (box-shadow, border-color). */
	box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--wp--preset--color--contrast, #000) 14%, transparent);
	border-color: var(--wp--preset--color--accent, currentColor);
}

/* Karte ist role="button" – Tastatur-Fokus sichtbar machen. */
.compendion-support-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, currentColor);
	outline-offset: 2px;
}

/* Hervorgehobene Karte (IBAN / Dauerauftrag). */
.compendion-support-card.is-featured {
	border-color: var(--wp--preset--color--accent, currentColor);
	border-width: 2px;
	box-shadow: 0 0.75rem 2.25rem color-mix(in srgb, var(--wp--preset--color--accent, #000) 18%, transparent);
}

/* Featured-Karte trägt schon statisch Border+Schatten (gleiche Spezifität wie
   `:hover`, aber später im Quelltext → maskierte den Hover-Schatten, die Karte
   reagierte als einzige NICHT auf Hover). Eigene `:hover`-Regel (0-3-0, schlägt
   beide) gibt ihr eine sichtbare Anhebung wie den übrigen Karten. */
.compendion-support-card.is-featured:hover {
	box-shadow: 0 1rem 2.75rem color-mix(in srgb, var(--wp--preset--color--accent, #000) 26%, transparent);
}

/* === Geld vs. Reichweite ===============================================
   Zwei Sorten, optisch getrennt. Der --support-accent-Override ist primaer
   ein dokumentierter Hook + Icon-Fallback (die Icons setzen --support-accent
   per Karte inline mit ihrer Brand-Farbe, ueberdecken den Karten-Wert also).
   Die SICHTBARE Trennung kommt aus dem Layout: Geld = klassische Karte mit
   Modal, Reichweite = flacher, accent-getoenter „Button" mit „Teilen →". */
.compendion-support-card--money {
	--support-accent: var(--wp--preset--color--primary, currentColor);
	/* Geld-Gruppe traegt einen feinen primary-Tint + primary-getoente Border, damit
	   sie sich klar von den accent-getoenten Reichweite-Karten absetzt (3a). Tint
	   mischt nur in die Surface, der on-surface-Text-Kontrast bleibt damit gueltig.
	   Gleiche Kartengroesse (nur Farbe, kein Box-Wachstum). */
	background: color-mix(in srgb, var(--wp--preset--color--primary, currentColor) 6%, var(--compendion-podcast-surface, var(--wp--preset--color--surface)));
	border-color: color-mix(in srgb, var(--wp--preset--color--primary, currentColor) 30%, var(--wp--preset--color--line));
}

/* Beschriftung je Karte (Maezen-Darstellung, Markup statt Pseudoelement). */
.compendion-support-card__more {
	margin-top: auto;
	align-self: flex-start;
	padding-top: 0.4rem;
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	font-size: 0.9rem;
	font-weight: 600;
}

.compendion-support--maezen .compendion-support-card--money::after {
	content: none;
}

/* Kompakte Geld-Karten in der Maezen-Darstellung (Arne 2026-10-13: „zu gross“).
   Die Karte ist nur Einstieg ins Modal: Icon links, daneben Titel, Untertitel,
   Teaser und Fusszeile. `display: contents` loest den Kopf-Wrapper auf, damit
   Icon und Badge eigene Grid-Zellen bekommen. Unter 720px zwei Spalten, Teaser
   weg (wie die Weitersagen-Kacheln), Titel und Fusszeile bleiben. */
.compendion-support--maezen [data-support-section="geld"] .compendion-support__cards {
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0.75rem;
}

.compendion-support--maezen .compendion-support-card--money {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"icon title"
		"icon subtitle"
		"icon teaser"
		"icon more";
	align-content: start;
	column-gap: 0.8rem;
	row-gap: 0.25rem;
	padding: 0.9rem 1rem;
}

.compendion-support--maezen .compendion-support-card--money .compendion-support-card__head {
	display: contents;
}

.compendion-support--maezen .compendion-support-card--money .compendion-support-card__icon {
	grid-area: icon;
	align-self: start;
	width: 2.4rem;
	height: 2.4rem;
	font-size: 0.9rem;
	border-radius: 0.7rem;
}

/* „Ohne Abzug“ nicht als Pill neben dem Titel (quetscht ihn, haengt in der
   Luft; Arne 2026-10-13), sondern als Zeile unter dem Titel im Stil des
   Untertitels „Geschenk statt Geld“. */
.compendion-support--maezen .compendion-support-card--money .compendion-support-card__badge {
	grid-area: subtitle;
	justify-self: start;
	margin: -0.2rem 0 0;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--c-on-surface-accent, var(--wp--preset--color--accent, currentColor));
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.compendion-support--maezen .compendion-support-card--money .compendion-support-card__title {
	grid-area: title;
	align-self: center;
	font-size: 1.05rem;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.compendion-support--maezen .compendion-support-card--money .compendion-support-card__subtitle {
	grid-area: subtitle;
	margin: 0;
}

.compendion-support--maezen .compendion-support-card--money .compendion-support-card__teaser {
	grid-area: teaser;
	font-size: 0.9rem;
	line-height: 1.45;
}

.compendion-support--maezen .compendion-support-card--money .compendion-support-card__more {
	grid-area: more;
	margin-top: 0.15rem;
	padding-top: 0;
}

@media (max-width: 720px) {
	.compendion-support--maezen [data-support-section="geld"] .compendion-support__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.6rem;
	}

	.compendion-support--maezen .compendion-support-card--money {
		grid-template-areas:
			"icon title"
			"icon subtitle"
			"icon more";
		column-gap: 0.6rem;
		padding: 0.75rem 0.8rem;
	}

	.compendion-support--maezen .compendion-support-card--money .compendion-support-card__icon {
		width: 2rem;
		height: 2rem;
		font-size: 0.8rem;
	}

	.compendion-support--maezen .compendion-support-card--money .compendion-support-card__title {
		font-size: 0.95rem;
	}

	.compendion-support--maezen .compendion-support-card--money .compendion-support-card__teaser {
		display: none;
	}

	.compendion-support--maezen .compendion-support-card--money .compendion-support-card__more {
		font-size: 0.82rem;
	}

}

/* P1: „Mehr erfahren"-Affordanz unten an der Geld-Karte. Fuellt die Leere unter dem
   Teaser und signalisiert, dass die Karte ein Detail-Modal oeffnet (role=button).
   Dezenter Textlink-Stil (kein Fuell-Button wie bei Reichweite). */
.compendion-support-card--money::after {
	content: "Mehr erfahren \2192";
	margin-top: auto;
	align-self: flex-start;
	padding-top: 0.4rem;
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	font-size: 0.9rem;
	font-weight: 600;
}

.compendion-support-card--reach {
	--support-accent: var(--wp--preset--color--accent, currentColor);
	/* Direkt-Link statt Modal → flacher und als anklickbarer Block lesbar:
	   accent-getoente Surface, dezent abgesetzt von den Geld-Karten. */
	background: color-mix(in srgb, var(--wp--preset--color--accent, currentColor) 7%, var(--compendion-podcast-surface, var(--wp--preset--color--surface)));
}

/* „Teilen →"-Affordanz am Kartenfuss – macht die Reichweite-Karte als Button
   erkennbar, ohne Extra-Markup. margin-top:auto schiebt sie ans untere Ende,
   damit alle Karten in der Grid-Zeile gleich hoch bleiben. */
.compendion-support-card--reach[data-copy-url]::after {
	content: "Kopieren";
}

.compendion-support-card--reach[data-copy-url].is-copied::after {
	content: "Kopiert!";
	background: var(--compendion-color-primary-fill, var(--wp--preset--color--primary, currentColor));
	color: var(--compendion-color-on-primary, var(--wp--preset--color--base, #fff));
}

.compendion-support-card--reach::after {
	content: "Teilen \2192";
	margin-top: auto;
	align-self: flex-start;
	padding: 0.45rem 0.9rem;
	border-radius: 0.6rem;
	background: var(--compendion-color-accent-fill, var(--wp--preset--color--accent, currentColor));
	color: var(--compendion-color-on-accent, var(--wp--preset--color--base, #fff));
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* P2: Reichweite-Karten kompakter — kleinere Kacheln/Icons, dichteres Grid, damit
   die wichtigeren Geld-Optionen klar die Hauptsache sind. Nur im Reichweite-Grid. */
[data-support-section="reichweite"] .compendion-support__cards {
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: clamp(0.75rem, 1.8vw, 1rem);
}

.compendion-support-card--reach {
	padding: clamp(0.9rem, 2vw, 1.15rem);
	gap: 0.5rem;
}

.compendion-support-card--reach .compendion-support-card__icon {
	width: 2.4rem;
	height: 2.4rem;
	font-size: 1rem;
	border-radius: 0.7rem;
}

.compendion-support-card--reach .compendion-support-card__title {
	font-size: 1.05rem;
}

.compendion-support-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.compendion-support-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	flex-shrink: 0;
	border-radius: 0.85rem;
	/* Light (A): vivide Brand-Vollflaeche; Buchstabe = berechneter Kontrast-Ink
	   (--support-ink, PHP-luminanz-basiert) -> garantiert lesbar auf jeder Brand. */
	background: var(--support-accent);
	color: var(--support-ink, var(--wp--preset--color--base));
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1;
	letter-spacing: 0.01em;
}

/* Dark (B): dezent brandfarben-getoent (ShowGuide-Muster) + neutraler on-surface-
   Ink. Brand-Hue bleibt ueber Tint + Rand erkennbar, Kontrast ist garantiert; der
   Rand mischt accent mit line -> auch schwarze Brands (Patreon/X/Threads) bekommen
   eine sichtbare Kante. Gilt fuer Karten- UND Modal-Icon (System-Pref + Toggle). */
@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .compendion-support-card__icon,
	html:not([data-color-scheme="light"]) .compendion-support-modal__icon {
		background: color-mix(in srgb, var(--support-accent) 20%, var(--wp--preset--color--surface));
		color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--support-accent) 50%, var(--wp--preset--color--line));
		text-shadow: none;
	}
}

html[data-color-scheme="dark"] .compendion-support-card__icon,
html[data-color-scheme="dark"] .compendion-support-modal__icon {
	background: color-mix(in srgb, var(--support-accent) 20%, var(--wp--preset--color--surface));
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--support-accent) 50%, var(--wp--preset--color--line));
	text-shadow: none;
}

.compendion-support-card__badge {
	display: inline-block;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: var(--compendion-color-accent-fill, var(--wp--preset--color--accent, currentColor));
	color: var(--compendion-color-on-accent, var(--wp--preset--color--base, #fff));
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.compendion-support-card__title {
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.25;
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast, inherit));
}

/* Dark-Mode: das globale Heading-Recolor (h1-h3 -> on-base-accent in compendion-
   dark.css) faerbt auch Karten-/Modal-Titel, die aber auf surface sitzen (nicht
   base) -> on-base-accent bricht dort den Kontrast (4,0-4,3:1). Explizit auf
   on-surface zuruecksetzen; gleiches Ausnahme-Muster wie der Breadcrumb-Fix. */
@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .compendion-support-card__title,
	html:not([data-color-scheme="light"]) .compendion-support-modal__title {
		color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	}
}

html[data-color-scheme="dark"] .compendion-support-card__title,
html[data-color-scheme="dark"] .compendion-support-modal__title {
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
}

.compendion-support-card__subtitle {
	margin: -0.2rem 0 0;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	/* accent-Ink auf surface (WCAG >=4.8:1 per site-palette); rohes accent als Text
	   kippt auf getoenter/satter surface (vgl. Hero-Link-Fall). */
	color: var(--c-on-surface-accent, var(--wp--preset--color--accent, currentColor));
}

/* Kompakter Teaser auf der Karte (zwei Zeilen). Volltext liegt im Modal. */
.compendion-support-card__teaser {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--c-on-surface-muted);
	/* Auf zwei Zeilen kuerzen, falls ein Teaser zu lang wird. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	max-height: calc(2 * 1.55em + 0.05em);
}

.compendion-support-card__note {
	margin: 0;
	font-size: 0.9rem;
	font-style: italic;
	/* Sekundaertext auf der dunklen Surface: gedaempftes on-surface statt `muted`
	   (muted ist auf dieser Palette selbst dunkel → unleserlich auf surface). */
	color: var(--c-on-surface-muted);
}

/* CTA-Button: full-width, Primaerfarbe. Sitzt unten (margin-top:auto).
   <a> braucht `.compendion-cta` (PHP) – sonst Dark-Mode-Link-Recolor, s. Hero-CTA. */
.compendion-support-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1.1rem;
	border-radius: 0.65rem;
	background: var(--wp--preset--color--primary, var(--wp--preset--color--contrast));
	color: var(--compendion-color-on-primary, var(--wp--preset--color--base, #fff));
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.compendion-support-card__cta:hover,
.compendion-support-card__cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 0.6rem 1.4rem color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent);
	filter: brightness(0.94);
	outline: none;
}

.compendion-support-card__cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, currentColor);
	outline-offset: 2px;
}

/* === IBAN-Block ======================================================== */

.compendion-support-iban {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.85rem 1rem;
	border-radius: 0.75rem;
	/* Leicht abgesetzte Panel-Flaeche auf der Card-Surface. surface-panel ist
	   per-Site WCAG-gerechnet; Fallback mischt surface Richtung base. */
	background: var(--compendion-color-surface-panel, color-mix(in srgb, var(--wp--preset--color--surface) 94%, var(--wp--preset--color--base)));
}

.compendion-support-iban__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem 0.6rem;
}

.compendion-support-iban__label {
	flex: 0 0 3.5rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-on-surface-muted);
}

.compendion-support-iban__value {
	font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	color: var(--compendion-color-on-surface-panel, var(--compendion-color-on-surface, var(--wp--preset--color--contrast, inherit)));
	word-break: break-all;
}

.compendion-support-iban__copy {
	margin-left: auto;
	padding: 0.3rem 0.75rem;
	border: 1px solid var(--c-card-border);
	border-radius: 999px;
	background: transparent;
	color: var(--compendion-color-on-surface-panel, var(--compendion-color-on-surface, var(--wp--preset--color--contrast, inherit)));
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.compendion-support-iban__copy:hover,
.compendion-support-iban__copy:focus-visible {
	border-color: var(--wp--preset--color--accent, currentColor);
	background: color-mix(in srgb, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)) 8%, transparent);
	outline: none;
}

.compendion-support-iban__copy.is-copied {
	border-color: var(--wp--preset--color--accent, currentColor);
	/* IBAN-Block ist surface-panel -> panel-accent-Ink statt rohem accent. */
	color: var(--c-on-surface-panel-accent, var(--wp--preset--color--accent, inherit));
}

/* GiroCode-QR: weisser Kasten (scanbar auf jeder Palette), zentriert. */
.compendion-support-iban__qr-wrap {
	margin: 0.85rem 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
}

.compendion-support-iban__qr {
	width: 200px;
	max-width: 70%;
	padding: 0.5rem;
	border-radius: 0.5rem;
	background: #fff;
}

.compendion-support-iban__qr svg {
	display: block;
	width: 100%;
	height: auto;
}

.compendion-support-iban__qr-caption {
	font-size: 0.82rem;
	color: var(--c-on-surface-muted);
	text-align: center;
}

/* === Modal (natives <dialog>) ========================================= */

/* Container nur fuer die gebuendelten Dialoge – selbst layoutlos. */
.compendion-support__modals {
	display: contents;
}

.compendion-support-modal {
	/* Natives <dialog>: zentriert per UA, hier nur Optik. */
	border: none;
	border-radius: 1rem;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	max-width: min(90vw, 520px);
	max-height: 90dvh;
	overflow-y: auto;
	background: var(--compendion-podcast-surface, var(--wp--preset--color--surface));
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast, inherit));
	box-shadow: 0 2rem 4rem color-mix(in srgb, var(--wp--preset--color--contrast, #000) 25%, transparent);
}

.compendion-support-modal::backdrop {
	/* Scrim MUSS transluzent bleiben: ein ::backdrop dunkelt die Seite ab und
	 * laesst sie durchscheinen. Opakes base wuerde den Modal-Hintergrund
	 * vollflaechig decken (Dim-Effekt weg). Bewusste Ausnahme der
	 * transparent->base-Migration, wie box-shadow. */
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 50%, transparent);
	backdrop-filter: blur(4px);
}

/* Inhalt als Flex-Spalte, damit Volltext/IBAN/CTA gleichmaessig stapeln. */
.compendion-support-modal[open] {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.compendion-support-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 999px;
	background: color-mix(in srgb, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)) 8%, transparent);
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast, inherit));
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.compendion-support-modal__close:hover,
.compendion-support-modal__close:focus-visible {
	background: color-mix(in srgb, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)) 16%, transparent);
	outline: none;
}

.compendion-support-modal__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, currentColor);
	outline-offset: 2px;
}

.compendion-support-modal__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	/* Platz fuer den absolut positionierten Schliessen-Button. */
	padding-right: 2.5rem;
}

/* Groesseres Monogramm-Icon im Modal (64px). Akzentfarbe via --support-accent
   aus dem Inline-Style (gleiches Markenfarben-Muster wie auf der Karte). */
.compendion-support-modal__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	flex-shrink: 0;
	border-radius: 1rem;
	background: var(--support-accent, var(--wp--preset--color--primary, currentColor));
	color: var(--support-ink, var(--wp--preset--color--base));
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1;
	letter-spacing: 0.01em;
}

.compendion-support-modal__title {
	margin: 0;
	font-size: clamp(1.3rem, 3vw, 1.6rem);
	line-height: 1.2;
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast, inherit));
}

.compendion-support-modal__subtitle {
	margin: -0.3rem 0 0;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	/* accent-Ink auf surface (siehe Card-Subtitle). */
	color: var(--c-on-surface-accent, var(--wp--preset--color--accent, currentColor));
}

.compendion-support-modal__body {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast, inherit));
}

/* === Responsive ======================================================= */

/* Modal mobil: kein Vollbild – randabstaendig zentriert mit abgerundeten Ecken. */
@media (max-width: 480px) {
	.compendion-support-modal {
		width: calc(100% - 20px);
		max-width: calc(100% - 20px);
		max-height: calc(100dvh - 20px);
		/* zentriert per margin (dialog ist via UA bereits position:fixed). */
		margin: 10px;
		border-radius: 0.75rem;
	}
}

@media (max-width: 720px) {
	.compendion-support-hero {
		justify-content: center;
	}
	.compendion-support-hero__person {
		max-width: 22rem;
	}
}

/* === Danke-Toast ====================================================== */

.compendion-support-toast {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	max-width: 360px;
	padding: 1.25rem 1.5rem;
	border-radius: 1rem;
	background: var(--compendion-color-primary-fill, var(--wp--preset--color--primary, #2c7a4b));
	color: var(--compendion-color-on-primary, var(--wp--preset--color--base, #fff));
	box-shadow: 0 1rem 3rem color-mix(in srgb, var(--wp--preset--color--contrast, #000) 25%, transparent);
	cursor: pointer;
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 10000;
}

.compendion-support-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.compendion-support-toast__title {
	margin: 0 0 0.3rem;
	font-size: 1.2rem;
	font-weight: 700;
}

.compendion-support-toast__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
}

@media (max-width: 480px) {
	.compendion-support-toast {
		left: 1rem;
		right: 1rem;
		bottom: 1rem;
		max-width: none;
	}
}

/* === Post-Spende-Share-Toast =========================================== */

/* Erbt den Basis-Toast (Position, Animation, primary-BG, on-primary-Text) und
   ergaenzt einen Schliessen-Button + Share-Buttons. Anders als der Danke-Toast
   ist er NICHT als Ganzes klickbar (cursor:default) – die Buttons darin sind
   interaktiv, dismiss nur ueber × oder Auto-Timeout (JS). */
.compendion-support-toast--share {
	cursor: default;
	padding-right: 2.75rem;
}

.compendion-support-toast__close {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	width: 1.9rem;
	height: 1.9rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 999px;
	background: color-mix(in srgb, var(--compendion-color-on-primary, var(--wp--preset--color--base, #fff)) 16%, transparent);
	color: var(--compendion-color-on-primary, var(--wp--preset--color--base, #fff));
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.compendion-support-toast__close:hover,
.compendion-support-toast__close:focus-visible {
	background: color-mix(in srgb, var(--compendion-color-on-primary, var(--wp--preset--color--base, #fff)) 30%, transparent);
	outline: none;
}

.compendion-support-toast__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.85rem;
}

/* Share-Chip: Outline-Pille auf der primary-Flaeche, fuellt sich im Hover.
   Farbe/Border ueber on-primary, damit es auf jeder Site-Palette lesbar bleibt. */
.compendion-support-toast__share {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid color-mix(in srgb, var(--compendion-color-on-primary, var(--wp--preset--color--base, #fff)) 45%, transparent);
	border-radius: 999px;
	background: transparent;
	color: var(--compendion-color-on-primary, var(--wp--preset--color--base, #fff));
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.compendion-support-toast__share:hover,
.compendion-support-toast__share:focus-visible {
	background: color-mix(in srgb, var(--compendion-color-on-primary, var(--wp--preset--color--base, #fff)) 16%, transparent);
	border-color: var(--compendion-color-on-primary, var(--wp--preset--color--base, #fff));
	outline: none;
}

/* === Subsites: Inhalt in der network-content-Hülle ======================
 * Auf den Sub-Sites steht der Seiteninhalt nicht direkt im Post-Content,
 * sondern in `.compendion-network-content > .compendion-network-content__body`.
 * Die Kindselektoren oben (`.wp-block-post-content > .compendion-support-*`)
 * greifen dort nicht: die Hülle landete als einziges Grid-Kind in der
 * schmalen Avatar-Spalte. Hülle und Body werden daher aufgelöst
 * (display: contents) und die drei Layout-Regeln für die Body-Kinder
 * wiederholt. Der Hüllen-Titel bleibt für Screenreader erhalten, ist aber
 * optisch ausgeblendet (die Dachmarke zeigt ebenfalls keinen Seitentitel). */

.compendion-support-page .wp-block-post-content > .compendion-network-content,
.compendion-support-page .wp-block-post-content > .compendion-network-content > .compendion-network-content__body {
	display: contents;
}

.compendion-support-page .compendion-network-content > .compendion-network-content__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.compendion-support-page .compendion-network-content__body > .compendion-support-hero {
	grid-column: 1;
	position: sticky;
	top: clamp(1rem, 3vw, 2rem);
	align-self: start;
}

.compendion-support-page .compendion-network-content__body > .compendion-support-intro {
	grid-column: 2;
	align-self: start;
}

.compendion-support-page .compendion-network-content__body > .compendion-support {
	grid-column: 1 / -1;
	margin-top: clamp(1.5rem, 4vw, 2.75rem);
}

@media (max-width: 720px) {
	.compendion-support-page .compendion-network-content__body > .compendion-support-hero {
		position: static;
		justify-self: center;
	}

	.compendion-support-page .compendion-network-content__body > .compendion-support-intro,
	.compendion-support-page .compendion-network-content__body > .compendion-support {
		grid-column: 1;
	}
}