/* Ressourcen-Detailseite (MKT-976) – Feinheiten, die kein Bricks-Control/ACSS abdeckt.
   Selektoren auf die festen Bricks-Element-IDs des Single-Templates "Single – Ressource". */

/* Beitragsbild im Kopf */
#brxe-simg01,
#brxe-simg01 img { width: 100%; display: block; }
#brxe-simg01 img { height: 230px; object-fit: cover; border-radius: 16px; }

/* Kategorie-Label: roter Link auf hellrotem Pill (Box-Stil kommt aus den Bricks-Settings) */
#brxe-mtax01,
#brxe-mtax01 a { color: #db1f3e; text-decoration: none; }

/* Vorlese-Button: animiertes Lautsprecher-SVG (3 Wellen "kommen" laufend aus dem Lautsprecher).
   Das Inline-SVG ersetzt zur Laufzeit das FontAwesome-Icon (siehe tts-button.js) – ohne Eingriff ins Bricks-Template. */
.td-tts-btn.is-loading { opacity: 0.65; pointer-events: none; }
.td-tts-btn .td-tts-wave {
	width: 1.15em;
	height: 1.15em;
	display: inline-block;
	vertical-align: -0.15em;
	flex: 0 0 auto;
}
.td-tts-btn .td-tts-wave .w {
	transform-box: fill-box;
	transform-origin: left center;
}
/* Wellen animieren NUR während des Vorlesens – .is-playing setzt der Player (tts-button.js).
   Im Ruhezustand bleibt der Lautsprecher mit den 3 Wellen statisch sichtbar. */
.td-tts-btn.is-playing .td-tts-wave .w  { animation: tdWaveEmit 1.2s ease-in-out infinite; }
.td-tts-btn.is-playing .td-tts-wave .w2 { animation-delay: 0.22s; }
.td-tts-btn.is-playing .td-tts-wave .w3 { animation-delay: 0.44s; }
@keyframes tdWaveEmit {
	0%   { opacity: 0; transform: translateX(-2px) scale(0.85); }
	35%  { opacity: 1; }
	65%  { opacity: 1; }
	100% { opacity: 0; transform: translateX(2px) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
	.td-tts-btn .td-tts-wave .w { animation: none; opacity: 1; transform: none; }
}

/* Inhaltsverzeichnis-Card: links mitscrollend (sticky) */
#brxe-tocwrp {
	align-self: start;
	position: sticky;
	top: 160px;
	box-shadow: var(--shadow-card);
}

.brxe-post-content h2:first-of-type { 
	margin-top: 10px;
}

/* Responsiv */
@media (max-width: 991px) {
	#brxe-glay01 { grid-template-columns: 1fr; }
	#brxe-tocwrp { position: static; }
}
@media (max-width: 767px) {
	#brxe-hdrow { grid-template-columns: 1fr; gap: 20px; }
	#brxe-simg01 img { height: 200px; }
	/* Meta-Zeile (Thema · Lesezeit) bei wenig Platz umbrechen statt überlaufen */
	#brxe-mmeta { flex-wrap: wrap; row-gap: 6px; }
}

/* ------------------------------------------------------------------
   Eingebettete Medien im Beitragsinhalt (z. B. Podcast-/Video-Ressourcen).
   Borlabs' Content-Blocker erbt height:100% aus einem gestreckten Kontext
   und wird sonst absurd hoch — auf Inhaltshöhe bzw. 16:9 deckeln.
   Nach dem Entsperren: YouTube responsiv, Spotify behält seine 352px.
   ------------------------------------------------------------------ */
.brxe-post-content .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker { height: auto !important; }
.brxe-post-content .brlbs-cmpnt-cb-preset-c { height: auto !important; aspect-ratio: 16 / 9; }
.brxe-post-content .brlbs-cmpnt-cb-preset-a,
.brxe-post-content .brlbs-cmpnt-cb-preset-b { height: auto !important; }
.brxe-post-content .brlbs-cmpnt-cb-main { height: auto !important; }
.brxe-post-content iframe[src*="youtube.com"],
.brxe-post-content iframe[src*="youtube-nocookie.com"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	display: block;
}
.brxe-post-content iframe[src*="open.spotify.com"] {
	width: 100%;
	border-radius: 12px;
	display: block;
}

/* ------------------------------------------------------------------
   Inhaltsverzeichnis (sticky TOC, tocbot): Hover und aktiver Eintrag
   (Scrollspy setzt .is-active-link) im tomedo Dark Red (Brand #ad153d)
   — die ACSS-Shades passen nicht („--primary-dark" zu dunkel,
   „--primary-hover" heller als primary).
   ------------------------------------------------------------------ */
#brxe-toc001 .toc-list .toc-link:hover,
#brxe-toc001 .toc-list .toc-link.is-active-link {
	color: #ad153d !important;
	font-weight: 600;
}

/* ------------------------------------------------------------------
   Lesbarkeit im Beitragstext (Feedback Mathias, 2026-08-20)
   1) Linie über dem Titel: Rest der aus dem Template entfernten
      Breadcrumbs — der Wrapper enthält nur noch einen Divider.
   2) Zwischenüberschriften: das <strong> aus dem Editor überschreibt
      das schlanke h2-Gewicht (400) mit 700 → neutralisieren.
   3) Mehr Luft zwischen Absätzen und vor Zwischenüberschriften.
   ------------------------------------------------------------------ */

/* 1) Breadcrumb-Überrest (Desktop + Mobile-Variante) */
#brxe-ejallr,
#brxe-qlnqjp,
#brxe-imspgj,
#brxe-dpfnnl {
	display: none !important;
}
/* Wrapper mit — sofern keine Breadcrumbs mehr drinstecken — leerem
   Inhalt komplett weg, sonst bleibt dessen Leerraum über dem Titel. */
#brxe-tggodg:not(:has(.brxe-breadcrumbs)),
#brxe-vqrvxl:not(:has(.brxe-breadcrumbs)) {
	display: none !important;
}

/* 2) Überschriften behalten ihr eigenes Gewicht */
.brxe-post-content :is(h2, h3, h4) strong {
	font-weight: inherit;
}

/* 3) Absatz- und Überschriftenabstände */
.brxe-post-content > p {
	margin-top: 0;
	margin-bottom: 1.45em;
}
.brxe-post-content > :is(h2, h3) {
	margin-top: 2em;
	margin-bottom: 0.5em;
}
/* Blockelemente auf denselben Rhythmus wie die Absätze */
.brxe-post-content > :is(figure, blockquote, ul, ol, table, .wp-block-media-text) {
	margin-top: 1.45em;
	margin-bottom: 1.45em;
}

/* ------------------------------------------------------------------
   Zitate und Personen-Box (Feedback Mathias, 2026-08-20)
   - Zitat in Fließtextgröße und kursiv (Serif bleibt), Quellenangabe
     etwas kleiner und aufrecht.
   - Porträt in der Media-Text-Box rund und kleiner.
   ------------------------------------------------------------------ */

.brxe-post-content > blockquote {
	font-size: 1em;
	line-height: 1.42;
}
.brxe-post-content > blockquote p {
	font-size: 1em;
	font-style: italic;
	line-height: 1.42;
}
.brxe-post-content > blockquote cite {
	font-size: 0.9em;
	font-style: normal;
}

/* Personen-Box: rundes, kleineres Porträt */
.brxe-post-content .wp-block-media-text__media img {
	width: 150px;
	height: 150px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}
/* Spaltenbreite nur oberhalb des Stacking-Breakpoints anpassen,
   damit die gestapelte Mobilansicht unberührt bleibt. */
@media (min-width: 601px) {
	.brxe-post-content .wp-block-media-text {
		grid-template-columns: 150px auto !important;
		align-items: center;
	}
}

/* ------------------------------------------------------------------
   Bildreihe im Beitrag (Sylvias Feedback zu MKT-928): drei Fotos in
   einer Reihe wie auf dem Onepager statt großer Einzelbilder.
   Die Core-Galerie-Styles (figure als Flex-Item, figcaption als
   Overlay) werden hier bewusst überschrieben — deshalb überall
   figure.wp-block-image mitschreiben, sonst gewinnt Core.
   ------------------------------------------------------------------ */

.brxe-post-content .wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	align-items: start;
}
/* Core setzt die Breite der Galerie-Kinder mit dem Spezifitaets-Hack
   `:not(#individual-image)` (zaehlt wie eine ID) — daher !important. */
.brxe-post-content .wp-block-gallery.has-nested-images > figure.wp-block-image {
	display: block;
	position: relative;
	width: 100% !important;
	max-width: none !important;
	flex: none !important;
	margin: 0 !important;
}
.brxe-post-content .wp-block-gallery.has-nested-images figure.wp-block-image > img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 10px;
}
.brxe-post-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	max-width: none;
	margin: 8px 0 0;
	padding: 0;
	background: none;
	color: inherit;
	font-size: 0.8em;
	line-height: 1.35;
	text-align: left;
	text-shadow: none;
}
@media (max-width: 767px) {
	.brxe-post-content .wp-block-gallery.has-nested-images {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* HubSpot-Embed v4 (cross-origin iframe): Das Formular bringt ~40px
   Innen-Padding mit, das sich von aussen nicht ueberschreiben laesst.
   Negativ-Margin auf dem Embed-Container kompensiert es optisch.
   Achtung: Wert haengt am Form-Style in HubSpot — aendert das Marketing
   dort das Hintergrund-Padding, diesen Wert mit anpassen. */
.brxe-post-content .hs-form-frame {
	margin: -40px;
}
@media (max-width: 767px) {
	/* seitlich nicht kompensieren — der iframe wuerde sonst breiter
	   als die Spalte und erzeugt horizontales Scrollen */
	.brxe-post-content .hs-form-frame {
		margin: -40px 0;
	}
}

/* ---- Download-Variante (Bricks-Template "Single – Ressource Download") ----
   Intershop-artiges Layout: links Titel/Intro/Inhalt/Cover, rechts sticky
   Formular-Karte. Grid-Plaetze explizit, damit mobil die Reihenfolge
   Titel -> Formular -> Inhalt entsteht (Quellreihenfolge im Baum). */
.td-dl-grid {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	gap: 24px 56px;
	align-items: start;
}
.td-dl-head { grid-column: 1; grid-row: 1; min-width: 0; }
.td-dl-body { grid-column: 1; grid-row: 2; min-width: 0; }
.td-dl-form {
	grid-column: 2;
	grid-row: 1 / span 2;
	position: sticky;
	top: 160px;
	background: #fff;
	border-radius: var(--radius-l, 16px);
	box-shadow: var(--shadow-card, 0 12px 32px rgba(0, 0, 0, 0.08));
	padding: 40px;
}
/* HubSpot-iframe-Innen-Padding (~40px, s. o.) gegen das Karten-Padding
   verrechnen — Felder fluchten dann mit der 40px-Kante der Karte. */
.td-dl-form .hs-form-frame { margin: -40px; }
/* Textkoerper: Intro volle Breite; ab dem H2 ("Das erwartet Sie")
   Cover links, Text rechts. display:contents promotet die Gutenberg-
   Kinder zu Grid-Items; die Row-Indizes haengen an der Content-Struktur
   (p, p, h2, ul, p) — bei Content-Umbau mit anpassen. */
.td-dl-body {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	column-gap: 48px;
	align-items: start;
}
.td-dl-body .brxe-post-content { display: contents; }
.td-dl-body .brxe-post-content > * { grid-column: 1 / -1; }
.td-dl-body .brxe-post-content > h2,
.td-dl-body .brxe-post-content > h2 ~ * { grid-column: 2; }
.td-dl-cover {
	grid-column: 1;
	grid-row: 3 / span 3;
	align-self: start;
	margin-top: 3px;
	/* Buendig mit dem Textblock: Mini-Fixhoehe haelt die Zeilenhoehen
	   textgetrieben, min-height streckt das Bild exakt aufs Grid-Areal. */
	height: 10px;
	min-height: calc(100% - 3px);
}
.td-dl-body .brxe-post-content > :last-child { margin-bottom: 0; }
@media (max-width: 640px) {
	.td-dl-body { display: block; }
	.td-dl-body .brxe-post-content { display: block; }
	.td-dl-cover { margin-top: 24px; height: auto; min-height: 0; }
}
.td-dl-cover,
.td-dl-cover img {
	width: 100%;
	border-radius: 12px;
	box-shadow: var(--shadow-card, 0 12px 32px rgba(0, 0, 0, 0.1));
	object-fit: cover;
	object-position: center;
}
@media (max-width: 991px) {
	.td-dl-grid { grid-template-columns: 1fr; }
	.td-dl-head, .td-dl-body, .td-dl-form { grid-column: 1; grid-row: auto; }
	.td-dl-form { position: static; padding: 28px; }
	.td-dl-form .hs-form-frame { margin: -40px -28px; }
}