/*
 * ACF-Block-Komponenten (Bauplan-Baustein 3).
 * Wird im Frontend ueber inc/enqueue.php geladen und im Block-Editor ueber
 * add_editor_style() (inc/theme-setup.php, zusammen mit style.css und
 * assets/css/editor.css), damit die Redaktion beim Bearbeiten das echte
 * Layout sieht (Teil 3.3 der Knowledge Base). Das fruehere ACF-
 * "enqueue_style" ist bewusst entfernt (siehe inc/blocks.php) und war nie
 * der Ladeweg fuer den Editor.
 */

/* ---------- Hero ---------- */
.tbs-block-hero {
	padding: var(--space-64) 0;
	background: linear-gradient(180deg, var(--violet-050) 0%, var(--paper) 78%);
}

.tbs-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-32);
	align-items: start;
}

@media (min-width: 820px) {
	.tbs-hero-grid {
		grid-template-columns: 1.1fr 1fr;
	}
}

.tbs-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--violet-800);
	background: var(--violet-100);
	border: 1px solid var(--violet-150);
	padding: 6px 14px;
	border-radius: 100px;
	margin-bottom: var(--space-16);
}

/*
 * Optionales Icon neben dem Kicker (bewusst dosiert, "eyebrow_icon"-Feld) -
 * funktioniert auch ohne gesetzten Kicker-Text (dann nur das Icon in der
 * Pille), z. B. auf "Fernwartung" fuer ic-remote neben der H1.
 */
/* + img: Imagify-Picture-Wrapper-Fix, siehe Begruendung bei .tbs-partner-logo */
.tbs-hero-eyebrow-icon,
.tbs-hero-eyebrow-icon img {
	flex-shrink: 0;
}

.tbs-block-hero h1 {
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.15;
}

.tbs-hero-lede {
	margin: var(--space-16) 0 0;
	font-family: var(--font-body);
	font-size: 17px;
	color: var(--ink-700);
	max-width: 56ch;
}

.tbs-hero-actions {
	margin-top: var(--space-24);
	display: flex;
	gap: var(--space-12);
	flex-wrap: wrap;
}

.tbs-hero-visual img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-l);
	display: block;
}

/*
 * Hero mit "Bild fuellt die Zeilenhoehe" (Marker .tbs-hero-visual-fill, auf der Startseite gesetzt): Ab 820 px (dem
 * Umbruchpunkt von .tbs-hero-grid) ist die Bildspalte so hoch wie der Textblock, die Bildunterkante schliesst damit
 * buendig mit der Unterkante des letzten Elements (Button) ab; die Oberkante bleibt. Das Bild liegt absolut in der
 * Spalte und traegt nicht zur Zeilenhoehe bei (die Hoehe bestimmt allein der Text). object-position 100 % 50 %: Das
 * Tablet mit den Symbolen sitzt im rechten Bildteil; zwischen 820 und ca. 1130 px wird links beschnitten (bei 820 px
 * bleiben die rechten ca. 58 % sichtbar), ab ca. 1180 px (Spalte 514 px) ist das Bild fast ganz zu sehen. Darunter
 * (unter 820 px) gilt unveraendert Breite 100 %, Hoehe automatisch.
 */
@media (min-width: 820px) {
	.tbs-hero-visual-fill {
		align-self: stretch;
		position: relative;
	}

	.tbs-hero-visual-fill img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 100% 50%;
	}
}

/* Rechte Spalte als kompakte TI-Status-Karte (Kontaktseite): Satz darueber, Karte darunter */
.tbs-hero-ti-text {
	margin: 0 0 var(--space-12);
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--ink-700);
}

/* ---------- CTA ---------- */
.tbs-block-cta {
	padding: var(--space-64) 0;
}

.tbs-cta-inner {
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}

.tbs-block-cta h2 {
	font-size: 26px;
}

.tbs-block-cta p {
	margin: var(--space-12) 0 0;
	font-family: var(--font-body);
	color: var(--ink-700);
	font-size: 16px;
}

.tbs-block-cta .tbs-btn {
	margin-top: var(--space-24);
}

/*
 * CTA mit Bild (optionales Bildfeld): Zwei-Spalten-Layout, Text und Button
 * mittig in der linken Spalte, Bild rechts. Das Bild ist ca. 10 % kleiner als seine Spalte
 * (width 90 %, rechtsbuendig zur Container-Kante); unter 780px einspaltig, Bild
 * dann volle Breite. Ohne Bild bleibt der zentrierte CTA (.tbs-cta-inner) unveraendert.
 */
.tbs-cta-bild {
	display: grid;
	grid-template-columns: minmax(0, 480px) 1fr;
	gap: var(--space-32);
	align-items: center;
}

/* Text und Button stehen mittig in der linken Spalte (horizontal wie vertikal). */
.tbs-cta-bild-text {
	min-width: 0;
	text-align: center;
}

.tbs-cta-bild-visual {
	min-width: 0;
}

.tbs-cta-bild-visual img {
	display: block;
	width: 90%;
	height: auto;
	margin-left: auto;
	border-radius: 14px;
}

@media (max-width: 780px) {
	.tbs-cta-bild {
		grid-template-columns: 1fr;
	}

	.tbs-cta-bild-visual img {
		width: 100%;
	}
}

/* ---------- FAQ ---------- */
.tbs-block-faq {
	padding: var(--space-64) 0;
}

.tbs-faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	margin-top: var(--space-24);
}

.tbs-faq-item {
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: var(--space-16) var(--space-24);
}

.tbs-faq-item summary {
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 15.5px;
	color: var(--ink-900);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-16);
}

/*
 * Fund auf "Aktuelle TI-Stoerungen" (08.09.2026): eine Frage enthaelt ein
 * einzelnes, sehr langes Wort ("Versichertenstammdatenmanagement", 33
 * Zeichen). Der Fragetext war bislang ein reiner Textknoten direkt im
 * Flex-Container "summary" - als anonymes Flexbox-Item bekommt er ein
 * implizites min-width:auto und verweigert das Umbrechen, selbst mit
 * overflow-wrap auf "summary" selbst (Browser wenden das bei anonymen
 * Text-Flexitems inkonsistent an). Fuehrte zu minimalem horizontalem
 * Ueberlauf (378px bei 375px Viewport, live auf Mobile gemessen).
 * Fix: Fragetext in ein echtes <span> gefasst (render.php), das explizit
 * schrumpfen darf.
 */
.tbs-faq-question-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
}

.tbs-faq-item summary::-webkit-details-marker {
	display: none;
}

.tbs-faq-item summary::after {
	content: '+';
	font-size: 20px;
	font-weight: 700;
	color: var(--violet-600);
	flex: none;
}

.tbs-faq-item[open] summary::after {
	content: '\2212';
}

.tbs-faq-answer {
	margin-top: var(--space-12);
	font-family: var(--font-body);
	color: var(--ink-700);
	font-size: 14.5px;
	line-height: 1.6;
}

/*
 * Auftrag 127: FAQ-Antworten gegliedert lesbar. Absatzabstand 0,75 em,
 * Lesebreite hoechstens ca. 70 Zeichen (Text, Absaetze, Listen), Listen mit
 * Abstand zu den Absaetzen. Das Listenzeichen bleibt das globale "+" in
 * Violett (Styleguide, Abschnitt Listen).
 */
.tbs-faq-answer > * {
	max-width: 70ch;
}

.tbs-faq-answer p {
	margin: 0 0 0.75em;
}

.tbs-faq-answer ul,
.tbs-faq-answer ol {
	margin: 0 0 0.75em;
}

.tbs-faq-answer li {
	margin-bottom: 0.25em;
}

.tbs-faq-answer > :last-child {
	margin-bottom: 0;
}

/* ---------- Intro ---------- */
.tbs-block-intro {
	padding: var(--space-48) 0;
}

.tbs-intro-inner {
	max-width: 70ch;
}

.tbs-block-intro h2 {
	font-size: 22px;
	margin-bottom: var(--space-12);
}

.tbs-block-intro p {
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink-700);
	line-height: 1.7;
}

/*
 * Intro -> direkt folgender Karten-/Grid-Block: Gesamtabstand auf den im
 * Styleguide dokumentierten Wert vereinheitlichen (Nachbesserung
 * 14.09.2026, siehe Abstands-Skala "48px - Zwischen groesseren
 * Content-Bloecken (z. B. Intro -> Icon-Grid)", tbs-styleguide.html).
 * Ohne diese Regel summieren sich Intros eigenes unteres Padding (48px)
 * und das obere Padding des Folge-Blocks (64px, Standard-Sektionsabstand)
 * zu 112-152px statt der dokumentierten 48px. Betrifft dieses Muster
 * ueberall im Theme (Startseite, Jobs, Praxisnetz, Honorar+Plus, alle
 * medatixx-Fachrichtungsseiten, ...), nicht nur einzelne Seiten. Ansatz:
 * Intros eigenes Padding bleibt unveraendert (normales Verhalten in allen
 * anderen Kontexten, z. B. vor CTA/FAQ/Bild-Text), stattdessen wird nur
 * das obere Padding des unmittelbar folgenden Grid-Blocks auf 0 gesetzt -
 * Ergebnis: 48px (Intro) + 0px (Folge-Block) = 48px Gesamtabstand.
 */
.tbs-block-intro + .tbs-block-karten,
.tbs-block-intro + .tbs-block-icon-grid,
.tbs-block-intro + .tbs-block-news-teaser,
.tbs-block-intro + .tbs-block-job-karte,
.tbs-block-intro + .tbs-block-standort-karte,
.tbs-block-intro + .tbs-block-stepper {
	padding-top: 0;
}

/*
 * Bild-Text -> direkt folgender "Kurse nach Kategorie"-Block: identisches
 * Verdopplungsmuster wie oben (23.09.2026), nur mit dem Standard-Sektions-
 * abstand von 64px statt 48px, da beide Bloecke hier den vollen "padding:
 * var(--space-64) 0" tragen (nicht Intros reduziertes 48px-Padding) - ohne
 * diese Regel 128px statt 64px. Live gefunden auf der Schulungsuebersicht
 * (#684, direkte Geschwister, keine Hintergrund-Alternation dazwischen);
 * betrifft nachweislich auch Honorar+Plus (#170, identische Bloecke direkt
 * hintereinander), dort bisher unbemerkt, weil ein Hintergrundfarbwechsel
 * die zusaetzlichen 64px wie einen bewussten Abschnittswechsel wirken
 * liess. Bewusst generisch (kein Seiten-Praefix), da dieselbe Ursache -
 * faelschlicherweise nur auf #684 zu beschraenken wuerde den identischen
 * Fehler auf Honorar+Plus unkorrigiert lassen.
 *
 * Nur fuer DIREKTE Geschwister im selben Band (gleicher Hintergrund). Eine zweite Regel fuer den
 * Huellen-Fall (Kurse-Block als erstes Kind des FOLGENDEN Bandes, nach einem Band mit Bild-Text am Ende)
 * entfiel am 06.10.2026: Zwischen zwei Baendern wechselt die Hintergrundfarbe, dort ist das volle Polster
 * oben richtig (der Abschnittswechsel ist sichtbar). Sie hatte der Ueberschrift "Unser Kursangebot" auf
 * Schulungsuebersicht und Honorar+Plus Abrechnungsberatung das Polster oben genommen (BF-20, BF-21).
 */
.tbs-block-bild-text + .tbs-block-kurse-nach-kategorie {
	padding-top: 0;
}

/* ---------- Ansprechpartner ---------- */
.tbs-block-ansprechpartner {
	padding: var(--space-64) 0;
}

.tbs-person-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-24);
	margin-top: var(--space-24);
}

@media (min-width: 640px) {
	.tbs-person-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 820px) {
	.tbs-person-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.tbs-person-card {
	display: flex;
	align-items: flex-start;
	gap: var(--space-16);
	padding: var(--space-16);
	border: 1px solid var(--line);
	border-radius: 14px;
}

/* + img: Imagify-Picture-Wrapper-Fix, siehe Begruendung bei .tbs-partner-logo */
.tbs-person-photo,
.tbs-person-photo img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.tbs-person-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--violet-100);
	color: var(--violet-800);
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.tbs-person-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.tbs-person-name {
	font-family: var(--font-head);
	font-size: 15px;
}

.tbs-person-role {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--ink-500);
}

.tbs-person-contact {
	margin-top: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
}

.tbs-person-contact a {
	color: var(--violet-800);
	text-decoration: none;
}

.tbs-person-contact a:hover {
	text-decoration: underline;
}

/* ---------- Icon-Grid ---------- */
.tbs-block-icon-grid {
	padding: var(--space-64) 0;
}

.tbs-icon-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-24);
	margin-top: var(--space-24);
}

@media (min-width: 640px) {
	.tbs-icon-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 820px) {
	.tbs-icon-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.tbs-icon-grid-item {
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: var(--space-24);
	box-shadow: 0 1px 3px rgba(33, 28, 36, 0.06);
}

/* + img: Imagify-Picture-Wrapper-Fix, siehe Begruendung bei .tbs-partner-logo */
.tbs-icon-grid-icon,
.tbs-icon-grid-icon img {
	width: 32px;
	height: 32px;
	margin-bottom: var(--space-12);
}

.tbs-icon-grid-item h3 {
	font-size: 16px;
	margin-bottom: var(--space-8);
}

.tbs-icon-grid-item p {
	font-family: var(--font-body);
	font-size: 14.5px;
	color: var(--ink-700);
	line-height: 1.6;
}

/*
 * Darstellung "Kompakt" (Feld darstellung, 02.10.2026): nur unter 640 px.
 * Statt grosser Kacheln flache Zeilen mit Icon links und Titel/Text rechts.
 * Ab 640 px identisch zu Standard.
 */
@media (max-width: 639px) {
	.tbs-block-icon-grid--kompakt {
		padding: var(--space-48) 0;
	}

	.tbs-block-icon-grid--kompakt .tbs-icon-grid {
		gap: var(--space-12);
		margin-top: var(--space-16);
	}

	.tbs-block-icon-grid--kompakt .tbs-icon-grid-item {
		display: grid;
		grid-template-columns: 24px 1fr;
		column-gap: var(--space-12);
		align-items: start;
		padding: var(--space-12) var(--space-16);
		border-radius: 12px;
	}

	.tbs-block-icon-grid--kompakt .tbs-icon-grid-icon,
	.tbs-block-icon-grid--kompakt .tbs-icon-grid-icon img {
		width: 24px;
		height: 24px;
		margin: 0;
	}

	.tbs-block-icon-grid--kompakt .tbs-icon-grid-icon {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.tbs-block-icon-grid--kompakt .tbs-icon-grid-item h3 {
		grid-column: 2;
		font-size: 15px;
		line-height: 1.35;
		margin: 0 0 4px;
	}

	.tbs-block-icon-grid--kompakt .tbs-icon-grid-item--ohne-icon {
		grid-template-columns: 1fr;
	}

	.tbs-block-icon-grid--kompakt .tbs-icon-grid-item.tbs-icon-grid-item--ohne-icon h3,
	.tbs-block-icon-grid--kompakt .tbs-icon-grid-item.tbs-icon-grid-item--ohne-icon p {
		grid-column: 1;
	}

	.tbs-block-icon-grid--kompakt .tbs-icon-grid-item p {
		grid-column: 2;
		font-size: 14px;
		line-height: 1.5;
		margin: 0;
	}
}

/* ---------- Karten ---------- */
.tbs-block-karten {
	padding: var(--space-64) 0;
}

/*
 * Icon neben der Zwischenueberschrift (optional, "heading_icon"-Feld) -
 * gedacht fuer Kategorie-Uebersichten (z. B. "Alle Loesungen"), damit dort
 * nicht 20+ Einzelkarten willkuerlich ikonisiert werden muessen. Nur
 * aktiv, wenn das Feld gesetzt ist - die einfache "<h2>" ohne Wrapper
 * bleibt fuer alle anderen Karten-Bloecke unveraendert.
 */
.tbs-karten-heading {
	display: flex;
	align-items: center;
	gap: var(--space-12);
}

.tbs-karten-heading h2 {
	margin: 0;
}

/* + img: Imagify-Picture-Wrapper-Fix, siehe Begruendung bei .tbs-partner-logo */
.tbs-karten-heading-icon,
.tbs-karten-heading-icon img {
	flex-shrink: 0;
}

.tbs-karten-intro {
	margin: var(--space-8) 0 0;
	max-width: 70ch;
	color: var(--ink-700);
	font-size: 16px;
	line-height: 1.6;
}

/* Text unter den Karten (Feld "nachtext", Folgeauftrag 88): gleiche Lesebreite, Schrift und Farbe wie der Einleitungstext oben. */
.tbs-karten-nachtext {
	margin: var(--space-24) 0 0;
	max-width: 70ch;
	color: var(--ink-700);
	font-size: 16px;
	line-height: 1.6;
}

.tbs-karten-grid {
	/*
	 * Flexbox statt CSS-Grid, bewusst nach einem Zwischenschritt mit
	 * "grid-template-columns: repeat(auto-fit, minmax(...))" (gleiches
	 * Muster wie beim .tbs-testimonial-grid-Fix) verworfen: Die feste
	 * "repeat(3, 1fr)" liess Bloecke mit weniger Karten als Spalten
	 * linksbuendig mit grossem Leerraum stehen (live bestaetigt auf
	 * mehreren Seiten) - auto-fit loeste das fuer den GESAMTEN Block,
	 * aber bei krummer Kartenzahl (z. B. 4 Karten -> 3+1) blieb die
	 * unvollstaendige LETZTE Zeile trotzdem linksbuendig, weil CSS-Grids
	 * justify-content nur das gesamte Spalten-Set im Container zentriert,
	 * nicht jede Zeile einzeln (live an einem 4-Karten-Block bestaetigt:
	 * 3er-Zeile korrekt zentriert, die uebrig bleibende 4. Karte nicht).
	 * Flexbox mit flex-wrap zentriert dagegen jede umgebrochene Zeile
	 * ("Flex-Line") unabhaengig - loest beide Faelle mit einer Regel.
	 */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-24);
	margin-top: var(--space-24);
}

.tbs-karte {
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	/* Breite/Umbruch-Verhalten fuer das Flexbox-Grid oben: waechst von
	   280px bis maximal 350px (nah am bisherigen Dreispalten-Mass bei
	   voller .tbs-wrap-Breite), schrumpft bei wenig Platz weiter. */
	flex: 1 1 280px;
	max-width: 350px;
	/* Falls als <a> gerendert (Link gesetzt, siehe render.php): kein
	   Browser-Standard-Link-Stil auf der ganzen Kachel. */
	color: inherit;
	text-decoration: none;
}

/* Hover-Konsistenz mit .tbs-news-card/.tbs-job-card/.tbs-wegweiser-tile/
   .tbs-search-result-card (siehe Kommentar dort) - greift nur, wenn die
   Kachel tatsaechlich ein <a> ist (Link-Feld optional, siehe render.php);
   ein reines <div> ohne Link bekommt hier bewusst kein Hover vorgegaukelt. */
a.tbs-karte:hover {
	border-color: var(--violet-300);
	background: var(--violet-050);
}

/* + img: Imagify-Picture-Wrapper-Fix, siehe Begruendung bei .tbs-partner-logo.
   Betrifft auch blocks/cross-sell/render.php (gleiche Klasse). */
.tbs-karte-image,
.tbs-karte-image img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	display: block;
}

/* Logos/Grafiken (Seitenverhaeltnis weit ausserhalb der ~2,2:1-Box, siehe
   tbs_karte_image_fit_class() in inc/helpers.php) vollstaendig statt
   zugeschnitten anzeigen. Der Innenabstand sitzt am <img> selbst (auch im
   Imagify-<picture>-Fall), damit object-fit die verkleinerte Inhaltsbox
   nutzt und die Kachel gleich hoch bleibt. */
img.tbs-karte-image--contain,
.tbs-karte-image--contain img {
	object-fit: contain;
	padding: var(--space-16) var(--space-24);
	box-sizing: border-box;
	background: var(--paper);
}

.tbs-karte-body {
	padding: var(--space-24);
}

/* Piktogramm vor dem Titel (optional, Nachbesserung 14.09.2026) - gleiches
   Mass wie .tbs-icon-grid-icon, damit beide Kachel-Komponenten optisch
   konsistent wirken, unabhaengig vom Foto-Feld .tbs-karte-image oben. */
/* + img: Imagify-Picture-Wrapper-Fix, siehe Begruendung bei .tbs-partner-logo */
.tbs-karte-icon,
.tbs-karte-icon img {
	width: 32px;
	height: 32px;
	margin-bottom: var(--space-12);
}

.tbs-karte-body h3 {
	font-size: 16px;
	margin-bottom: var(--space-8);
}

.tbs-karte-body p {
	font-family: var(--font-body);
	font-size: 14.5px;
	color: var(--ink-700);
	line-height: 1.6;
}

.tbs-karte-link {
	/* Jetzt ein <span> statt <a> (ganze Kachel ist der Link, siehe
	   render.php) - kein eigenes Hover mehr noetig, das uebernimmt
	   a.tbs-karte:hover oben. */
	display: inline-block;
	margin-top: var(--space-12);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13.5px;
	color: var(--violet-800);
}

/* ---------- Breadcrumb ---------- */
.tbs-breadcrumb-wrap {
	padding: var(--space-16) 0;
	border-bottom: 1px solid var(--line-soft);
}

.tbs-breadcrumb {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--ink-500);
}

.tbs-breadcrumb a {
	color: var(--ink-500);
	text-decoration: none;
}

.tbs-breadcrumb a:hover {
	color: var(--violet-800);
	text-decoration: underline;
}

.tbs-breadcrumb .separator {
	margin: 0 6px;
	color: var(--ink-500);
}

/* Sichtbares "Zuletzt aktualisiert" (inc/geo.php): rechts neben der Breadcrumb, auf schmalen Fenstern darunter. */
.tbs-breadcrumb-wrap > .tbs-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 24px;
}

.tbs-page-updated {
	margin: 0;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--ink-500);
}

/* ---------- Vergleich ---------- */
.tbs-block-vergleich {
	padding: var(--space-64) 0;
}

.tbs-vergleich-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-24);
	margin-top: var(--space-24);
}

@media (min-width: 640px) {
	.tbs-vergleich-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.tbs-vergleich-col {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: var(--space-24);
}

.tbs-vergleich-col.is-highlighted {
	border-color: var(--violet-300);
	box-shadow: 0 8px 24px rgba(57, 21, 68, 0.1);
}

.tbs-vergleich-col h3 {
	font-size: 16px;
	margin-bottom: var(--space-16);
}

.tbs-vergleich-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.tbs-vergleich-col li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-8);
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--ink-700);
}

.tbs-vergleich-check {
	color: var(--violet-600);
	font-weight: 700;
	flex: none;
}

/* ---------- Downloads ---------- */
.tbs-block-downloads {
	padding: var(--space-64) 0;
}

.tbs-downloads-list {
	list-style: none;
	margin: var(--space-24) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.tbs-download-item a {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	padding: var(--space-16);
	border: 1px solid var(--line);
	border-radius: 12px;
	text-decoration: none;
	color: var(--ink-900);
	font-family: var(--font-body);
}

.tbs-download-item a:hover {
	background: var(--violet-050);
	border-color: var(--violet-300);
}

.tbs-download-icon {
	color: var(--violet-600);
	flex: none;
}

.tbs-download-label {
	font-weight: 700;
	font-size: 14.5px;
}

.tbs-download-size {
	color: var(--ink-500);
	font-size: 13px;
}

/* ---------- Kontakt ---------- */
.tbs-block-kontakt {
	padding: var(--space-64) 0;
}

.tbs-kontakt-inner {
	max-width: 640px;
}

.tbs-kontakt-inner p {
	margin-top: var(--space-12);
	font-family: var(--font-body);
	color: var(--ink-700);
}

/*
 * ---------- Kontakt-Formular + Bild nebeneinander (Wiederverwendbarer
 * Block #1815, Formular #2727) ----------
 * Alter Bootstrap-Zweispalter (Formular-Shortcode + Bild je in einer
 * areoi/column) - ohne Bootstrap-CSS stapeln beide Spalten sonst nur
 * untereinander. Bewusst eigene, auf diesen einen Block beschraenkte
 * Klasse (keine globale ".row.areoi-element"-Regel), damit andere alte
 * Bootstrap-Grid-Inhalte anderswo auf der Website unangetastet bleiben.
 * Breiter als die sonst fuer reine Formulare genutzte ".tbs-kontakt-inner"
 * (640px), da hier zusaetzlich Platz fuer das Bild gebraucht wird.
 */
.tbs-kontakt-form-image .areoi-element.row {
	display: grid;
	grid-template-columns: minmax(0, 480px) 1fr;
	gap: var(--space-32);
	align-items: start;
}

.tbs-kontakt-form-image .areoi-element.row > .areoi-element.col {
	min-width: 0;
	/*
	 * Das areoi/column-Original-Attribut "margin_top_xs" erzeugt ueber das
	 * (weiterhin aktive) Bootstrap-Blocks-Plugin eine eigene, per Block-ID
	 * generierte CSS-Regel mit margin-top (hier 38.4px) - das verschob das
	 * Bild sichtbar tiefer als das Formular. !important noetig, da diese
	 * generierte Regel sonst je nach Lade-Reihenfolge gewinnen kann.
	 */
	margin-top: 0 !important;
}

.tbs-kontakt-form-image .areoi-element.row figure {
	max-width: none;
	margin: 0;
}

.tbs-kontakt-form-image .areoi-element.row img {
	border-radius: 14px;
}

.tbs-kontakt-form-image .wpforms-container {
	margin-top: 0 !important;
}

@media (max-width: 780px) {
	.tbs-kontakt-form-image .areoi-element.row {
		grid-template-columns: 1fr;
	}
}

/*
 * ---------- Kontakt-Formular + Bild nebeneinander, nativ (Health-Check
 * Areoi-Abloesung, 15.09.2026) ----------
 * Natives Gegenstueck zur obigen Areoi-Regel - selbe Breiten-/Abstands-
 * Werte (Formular max. 480px, Bild flexibel, 32px Gap, 780px-Stapel-
 * Breakpoint, 14px Bild-Eckenradius), damit der Umbau optisch nichts
 * verschlechtert. Aktiv, sobald das optionale "image"-Feld des
 * acf/kontakt-Blocks gesetzt ist (siehe blocks/kontakt/render.php) - ohne
 * Bild bleibt der Block einspaltig (.tbs-kontakt-inner, 640px) wie bisher.
 * Ersetzt langfristig die Areoi-Variante oben, sobald keine Seite mehr auf
 * den alten Reusable Block (#1815) verweist.
 */
.tbs-kontakt-form-image h2,
.tbs-kontakt-form-image > p {
	margin-bottom: var(--space-24);
}

.tbs-kontakt-form-image-row {
	display: grid;
	grid-template-columns: minmax(0, 480px) 1fr;
	gap: var(--space-32);
	align-items: start;
}

.tbs-kontakt-form-image-form {
	min-width: 0;
}

.tbs-kontakt-form-image-visual {
	min-width: 0;
}

.tbs-kontakt-form-image-visual img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}

@media (max-width: 780px) {
	.tbs-kontakt-form-image-row {
		grid-template-columns: 1fr;
	}
}

/* ---------- Logos ---------- */
.tbs-block-logos {
	padding: var(--space-48) 0;
}

.tbs-logos-row {
	margin-top: var(--space-24);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-32);
}

.tbs-logos-item img {
	max-height: 40px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.15s ease, opacity 0.15s ease;
}

.tbs-logos-item img:hover {
	filter: none;
	opacity: 1;
}

/* ---------- News-Teaser ---------- */
.tbs-block-news-teaser {
	padding: var(--space-64) 0;
}

.tbs-news-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-24);
	margin-top: var(--space-24);
}

@media (min-width: 640px) {
	.tbs-news-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.tbs-news-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
}

/* Gleicher Hover wie bei den uebrigen Karten-Komponenten im Theme
   (.tbs-job-card, .tbs-wegweiser-tile, .tbs-cross-sell-card,
   .tbs-search-result-card) - border-color:violet-300 (+ background bei
   den "volleren" Varianten wie .tbs-job-card) ist das durchgaengig
   genutzte Hover-Muster, keine der bestehenden Karten nutzt aktuell einen
   Schatten. */
.tbs-news-card:hover {
	border-color: var(--violet-300);
	background: var(--violet-050);
}

/*
 * Vorschaubild (Ratgeber-Archiv und News-Teaser): Der Rahmen hat ein festes
 * Seitenverhaeltnis 1112:530 (= empfohlene Vorlagengroesse, siehe inc/featured-
 * image-hint.php) statt fester Hoehe - ein Bild in genau diesem Format fuellt
 * ihn auf jeder Breite ohne Beschnitt und ohne Streifen (aspect-ratio rechnet mit
 * gebrochenen Pixelwerten, Bild und Rahmen haben dasselbe Verhaeltnis). Fuer
 * aeltere Bilder in anderen Formaten bleibt die "fit-width"-Regel als Rueckfall
 * (Entscheidung 30.09.2026): Breite immer voll fuellen, nie seitlich
 * beschneiden; der Rahmen ist hell (--paper), das Bild liegt darin mit width:100%
 * und natuerlicher Hoehe:
 * - zu breite Bilder (Ratio ueber 2,098 = Rahmenverhaeltnis, z. B. Logo, ePA-/M365-Banner) sind
 *   niedriger als der Rahmen und stehen vertikal mittig, oben/unten bleibt
 *   heller Rand statt Beschnitt oder Streckung;
 * - hoehere Bilder (Fotos, quadratisch, hochkant) sind hoeher als der Rahmen:
 *   sie beginnen oben, unten wird beschnitten (overflow:hidden). Die
 *   Auto-Raender wirken nur bei freiem Platz (Flex), bei Ueberlauf werden sie
 *   0 - dadurch braucht es weder object-fit noch eine Klasse je Seiten-
 *   verhaeltnis, und es passt sich jeder Rahmenbreite (353px, mobil 325px) an.
 */
.tbs-news-thumb {
	display: flex;
	aspect-ratio: 1112 / 530;
	overflow: hidden;
	background: var(--paper);
}

.tbs-news-thumb picture,
.tbs-news-thumb > img {
	flex: none;
	width: 100%;
	margin-block: auto;
}

.tbs-news-thumb img {
	width: 100%;
	height: auto;
	display: block;
}

.tbs-news-thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--violet-100);
	color: var(--violet-300);
}

.tbs-news-body {
	padding: var(--space-16) var(--space-24) var(--space-24);
}

.tbs-news-body h3 {
	font-size: 15.5px;
	margin-bottom: var(--space-8);
}

.tbs-news-body p {
	font-family: var(--font-body);
	font-size: 13.5px;
	color: var(--ink-700);
	line-height: 1.6;
}

/* "Alle Ratgeber-Beiträge ansehen"-Link unter dem Karten-Raster (Teil 5.8) -
   gleiches optisches Muster wie .tbs-panel-footer-link im Mega-Menue
   (navigation.css), hier ohne die Grid-spezifischen Eigenschaften, da der
   News-Teaser kein Mega-Menue-Panel ist. */
.tbs-news-teaser-viewall {
	margin-top: var(--space-32);
	text-align: center;
}

.tbs-news-teaser-viewall a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--violet-800);
	text-decoration: none;
}

.tbs-news-teaser-viewall a:hover {
	text-decoration: underline;
}

/*
 * ---------- TI-Status-Platzhalter (Startseite) ----------
 * Nachbesserung 08.09.2026: Das TI-Status-iFrame (gematik, siehe Teil 3.8)
 * stand bisher direkt nach dem Hero als grosse, unstyled Box - wirkte zu
 * dominant fuer einen reinen Platzhalter (die echte gematik-API-Anbindung
 * ist ein eigenes, noch blockiertes Arbeitspaket). Jetzt als schmale,
 * dezente Statusleiste mit Rahmen/Radius wie andere Komponenten (Karten,
 * Callout) - rein optisch, das iframe selbst ist unveraendert dasselbe
 * Embed, nur kleiner skaliert (320x140 statt 380x200).
 */
.tbs-ti-status-bar {
	/*
	 * display:flex (nicht inline-flex) + max-width:100%: die Leiste darf nie
	 * breiter werden als ihr Container - ein inline-flex-Element richtet
	 * sich sonst nach der Breite seines Inhalts (hier: 320px-iframe +
	 * Label + Abstaende = ueber 400px) und sprengt damit auf schmalen
	 * Mobilgeraeten den Viewport, was den gesamten Seiten-Layout-Viewport
	 * verzerrt hatte (live bestaetigt: 465px statt 375px window.innerWidth).
	 * flex-wrap bleibt bewusst "nowrap": mit "wrap" berechnet fit-content
	 * die Breite eines mehrzeiligen Flex-Containers uneindeutig (Rundungs-
	 * differenz von Sub-Pixeln reicht, damit die Leiste trotz ausreichend
	 * Platz umbricht - live beobachtet bei einer 460px-Spalte trotz nur
	 * ca. 441px benoetigter Breite). "nowrap" macht die fit-content-Breite
	 * eindeutig; erst bei echtem Platzmangel (siehe Media-Query unten)
	 * wird umgebrochen.
	 */
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-16);
	max-width: 100%;
	width: fit-content;
	box-sizing: border-box;
	margin: var(--space-32) 0;
	padding: var(--space-12) var(--space-16);
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--paper);
}

@media (max-width: 480px) {
	.tbs-ti-status-bar {
		flex-wrap: wrap;
	}
}

.tbs-ti-status-label {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--violet-600);
	white-space: nowrap;
}

.tbs-ti-status-bar iframe {
	display: block;
	max-width: 100%;
	border-radius: 8px;
}

/* ---------- Bild/Text-Kombination ---------- */
.tbs-block-bild-text {
	padding: var(--space-64) 0;
}

.tbs-bild-text-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-32);
	align-items: center;
}

@media (min-width: 820px) {
	.tbs-bild-text-grid {
		grid-template-columns: 1fr 1fr;
	}
	.tbs-bild-text-rechts .tbs-bild-text-visual {
		order: 2;
	}
}

.tbs-bild-text-visual img {
	width: 100%;
	height: auto;
	/*
	 * Ohne Deckel skaliert ein Bild bei width:100% auf die volle Hoehe
	 * seines Seitenverhaeltnisses, egal wie kurz der Text daneben ist -
	 * bei hochformatigen Bildern (z. B. Honorar+Plus "Ampelprinzip",
	 * Verhaeltnis 0.869) wirkt das deutlich unausgewogen gegenueber der
	 * Textspalte. max-height + object-fit:contain deckelt das bei jedem
	 * Bildformat, ohne zu beschneiden (Querformat-Bilder bleiben praktisch
	 * unveraendert, da sie die 480px bei ueblichen Spaltenbreiten meist gar
	 * nicht erreichen).
	 */
	max-height: 480px;
	object-fit: contain;
	border-radius: var(--radius-l);
	display: block;
}

/*
 * Nachbesserung 14.09.2026: Der erste Bild-Text-Block direkt nach dem Hero
 * (z. B. "Mehr Zeit für Ihre Patienten...") soll wie der Hero selbst oben
 * buendig statt vertikal zentriert stehen - alle SPAETEREN Bild-Text-
 * Vorkommen auf derselben Seite bleiben bewusst bei "align-items: center"
 * (Standard der Komponente, siehe .tbs-bild-text-grid oben). Zwei Faelle
 * noetig, live geprueft: Auf den 40 Seiten mit aktiver Hintergrund-
 * Alternation (inc/bg-alternation.php) steckt der Bild-Text-Block nicht
 * mehr als direktes Geschwister des Hero im DOM, sondern eine Ebene
 * tiefer in einer "tbs-bg-*"-Huelle (der einfache Geschwister-Selektor
 * allein wuerde daher nicht mehr greifen - gleiches Strukturrisiko wie bei
 * den beiden vorherigen Funden). Der Huellen-Fall grenzt zusaetzlich auf
 * ":first-child" ein, damit bei mehreren Bild-Text-Bloecken in derselben
 * Huelle (aufeinanderfolgende gleiche Typen werden von der Alternation zu
 * einer Gruppe zusammengefasst) nur der erste betroffen ist.
 */
.tbs-block-hero + .tbs-block-bild-text .tbs-bild-text-grid,
.tbs-block-hero + .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > .tbs-block-bild-text:first-child .tbs-bild-text-grid {
	align-items: start;
}

/*
 * Bildzuschnitt im ersten Bild-Text nach dem Hero (14.09.2026, global seit 02.10.2026):
 * Quadratische Bilder (Fotos 1254x1254 px der "medatixx fuer ..."-Serie, Icon-Grafiken
 * 500x500 px) blieben bei "object-fit: contain" (Standard oben) wegen des 480-px-Deckels
 * auf 480x480 px stehen und wurden mit Leerraum links/rechts in der breiteren Box
 * zentriert; der Eckenradius traf nur den leeren Rand und wirkte wie "gar kein Radius".
 * "object-fit: cover" fuellt die Box, der Radius sitzt am sichtbaren Bildrand. Frueher
 * stand die Regel mit Seitennamen fuer 8 Seiten; jetzt gilt sie relational fuer jeden
 * Bild-Text-Block, der direkt auf den Hero folgt (auch in der Huelle der Hintergrund-
 * Alternation), und braucht keinen Seitennamen mehr. Geprueft an allen 49 Seiten mit
 * Hero -> Bild-Text: ausser den 8 bisherigen Seiten aendert sich nur "medatixx fuer
 * Orthopaeden" (Bild 1254x1254 px, ca. 11 % Zuschnitt, keine Gesichter).
 */
.tbs-block-hero + .tbs-block-bild-text img,
.tbs-block-hero + .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > .tbs-block-bild-text:first-child img {
	object-fit: cover;
}

.tbs-bild-text-content h2 {
	font-size: 26px;
}

.tbs-bild-text-content p {
	margin-top: var(--space-16);
	font-family: var(--font-body);
	color: var(--ink-700);
	font-size: 16px;
	line-height: 1.7;
}

.tbs-bild-text-content .tbs-btn {
	margin-top: var(--space-24);
}

/* ---------- Problem → Lösung-Paar ---------- */
.tbs-block-problem-loesung {
	padding: var(--space-64) 0;
}

.tbs-pl-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	margin-top: var(--space-24);
}

.tbs-pl-pair {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-16);
	align-items: center;
}

@media (min-width: 640px) {
	.tbs-pl-pair {
		grid-template-columns: 1fr auto 1fr;
	}
}

.tbs-pl-box {
	padding: var(--space-24);
	border-radius: 14px;
	border: 1px solid var(--line);
}

.tbs-pl-solution {
	background: var(--violet-050);
	border-color: var(--violet-150);
}

.tbs-pl-label {
	display: block;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--violet-600);
	margin-bottom: var(--space-8);
}

.tbs-pl-box p {
	font-family: var(--font-body);
	font-size: 14.5px;
	color: var(--ink-700);
	line-height: 1.6;
}

.tbs-pl-arrow {
	display: none;
	color: var(--violet-600);
	font-size: 20px;
	justify-self: center;
}

@media (min-width: 640px) {
	.tbs-pl-arrow {
		display: block;
	}
}

.tbs-pl-link {
	display: inline-block;
	margin-top: var(--space-12);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13.5px;
	color: var(--violet-800);
	text-decoration: none;
}

.tbs-pl-link:hover {
	text-decoration: underline;
}

/* ---------- Tipp-/Hinweis-Callout ---------- */
.tbs-block-callout {
	padding: var(--space-24) 0;
}

.tbs-callout-box {
	background: linear-gradient(135deg, var(--violet-900) 0%, var(--violet-800) 100%);
	border-radius: 16px;
	padding: var(--space-24);
	color: #fff;
}

.tbs-callout-label {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--violet-300);
	margin-bottom: var(--space-8);
}

/* ic-info site-weit fest hinterlegt (Styleguide-Bedeutung "Hinweis"), kein Icon-Feld noetig - siehe render.php. */
.tbs-callout-icon {
	flex-shrink: 0;
}

.tbs-callout-box p {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	color: #fff;
}

/* ---------- Prozess-Stepper ---------- */
.tbs-block-stepper {
	padding: var(--space-64) 0;
}

.tbs-stepper {
	list-style: none;
	margin: var(--space-24) 0 0;
	padding: 0;
}

.tbs-stepper-vertical {
	display: flex;
	flex-direction: column;
}

.tbs-stepper-vertical .tbs-stepper-item {
	display: flex;
	gap: var(--space-16);
	padding-bottom: var(--space-32);
	position: relative;
}

.tbs-stepper-vertical .tbs-stepper-item:last-child {
	padding-bottom: 0;
}

.tbs-stepper-vertical .tbs-stepper-item:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 15px;
	top: 32px;
	bottom: 0;
	width: 1px;
	background: var(--line);
}

.tbs-stepper-horizontal {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-24);
}

@media (min-width: 820px) {
	.tbs-stepper-horizontal {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}
}

.tbs-stepper-horizontal .tbs-stepper-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.tbs-stepper-num {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--violet-800);
	color: #fff;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tbs-stepper-body h3 {
	font-size: 15.5px;
	margin-bottom: 4px;
}

.tbs-stepper-body p {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--ink-700);
	line-height: 1.6;
}

/*
 * ---------- Native nummerierte Liste ("tbs-numbered-list") ----------
 * Nachbesserung 09.09.2026 ("Update Honorar+Plus"): Anleitungsschritte ohne
 * natuerlichen Kurztitel (reine Anweisungssaetze, kein Titel-Text-Paar wie
 * beim Prozess-Stepper) - Komponente wuerde einen erfundenen Titel
 * brauchen (Teil 4.2 verletzt), bleibt deshalb natives <ol>. Rein CSS-
 * getriebene Nummerierung (::before mit counter()) im selben visuellen
 * Muster wie der Prozess-Stepper (violette Nummern-Kreise, verbindende
 * Linie), aber ohne Titel/Text-Struktur - fuer jede Seite mit aehnlichen
 * "nur Anweisungssaetze"-Listen wiederverwendbar.
 */
.tbs-numbered-list {
	list-style: none;
	margin: var(--space-16) 0 0;
	padding: 0;
	counter-reset: tbs-num;
}

.tbs-numbered-list > li {
	position: relative;
	counter-increment: tbs-num;
	padding: 0 0 var(--space-16) 48px;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--ink-700);
	line-height: 1.6;
}

.tbs-numbered-list > li:last-child {
	padding-bottom: 0;
}

.tbs-numbered-list > li::before {
	content: counter(tbs-num);
	position: absolute;
	left: 0;
	top: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--violet-800);
	color: #fff;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tbs-numbered-list > li:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 15px;
	top: 32px;
	bottom: 0;
	width: 1px;
	background: var(--line);
}

/*
 * ---------- Standort-Karte-Paar (Anfahrtsplan, 09.09.2026) ----------
 * Drei Standorte, je eine echte interaktive Google-Maps-Einbettung (kein
 * statisches Bild) + Anfahrtsbeschreibung nebeneinander - passt weder in
 * Bild-Text (kein ACF-Bild, sondern ein natives <iframe>) noch in die
 * bestehende Standort-Karte-Komponente (die ist fuer eine kompakte
 * Mehrfach-Standort-Uebersicht mit Adresse/Öffnungszeiten/Telefon gedacht,
 * nicht fuer ausfuehrliche Wegbeschreibungs-Fliesstexte - Feld dafuer
 * fehlt, Inhalt waere verlustbehaftet). Deshalb eigene, lokal (nicht
 * seiten-Slug-gebunden) wirkende Gruppen-Klasse - dreimal auf derselben
 * Seite ohne Positions-/Slug-Abhaengigkeit wiederverwendbar.
 */
/*
 * Nicht ".tbs-standort-pair" selbst als Grid, sondern dessen
 * "__inner-container" - das native Gruppen-Block-Markup packt den Inhalt
 * immer in diesen zusaetzlichen Wrapper (".wp-block-group__inner-container"),
 * wodurch die Gruppe selbst nur ein einziges Kind hat und ein Grid auf ihr
 * wirkungslos bliebe (live bestaetigt: beide Spalten blieben einspaltig
 * gestapelt, da die zweite Grid-Spalte nie ein zweites Kind bekam).
 */
/*
 * Nachbesserung 09.09.2026: Die Gruppe selbst hat (anders als die
 * ACF-Bloecke, die ihr eigenes ".tbs-wrap" im Template mitbringen) keinen
 * Breiten-Container - lief dadurch ueber die volle Bildschirmbreite statt
 * sich an die uebliche Inhaltsbreite der restlichen Bloecke zu halten.
 * Gleiche Breitenlogik wie ".tbs-wrap" (style.css) direkt hier uebernommen.
 */
.tbs-standort-pair {
	max-width: var(--wrap-max);
	margin: 0 auto;
	padding: 0 var(--space-24);
}

/*
 * Standort-Gruppe als erstes Kind eines Hintergrundbands (Anfahrtsplan): Die Gruppe bringt, anders als
 * die ACF-Komponenten, kein oberes Polster mit; der Rand des Innenbehaelters (32 px) kollabiert aus dem
 * Band, die Ueberschrift klebte an der Bandkante (BF-22). Gleicher Wert wie jede Komponente: 64 px;
 * der obere Rand des Innenbehaelters entfaellt dann (sonst 96 px). Relational, ohne Seitenname.
 */
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > .tbs-standort-pair:first-child {
	padding-top: var(--space-64);
}

.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > .tbs-standort-pair:first-child > .wp-block-group__inner-container {
	margin-top: 0;
}

/*
 * Spiegelbild am Bandende (06.10.2026): Als letztes Kind eines Hintergrundbands bekommt die Standort-Gruppe
 * 64 px Polster unten und der untere Rand des Innenbehaelters (32 px) entfaellt. Vorher endete die Karte
 * auf Anfahrtsplan bei 1280 px direkt an der Bandunterkante (Wuechter: band-klebt-unten). Relational, ohne
 * Seitenname.
 */
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > .tbs-standort-pair:last-child {
	padding-bottom: var(--space-64);
}

.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > .tbs-standort-pair:last-child > .wp-block-group__inner-container {
	margin-bottom: 0;
}

.tbs-standort-pair > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-24);
	margin: var(--space-32) 0;
	align-items: start;
}

@media (min-width: 780px) {
	.tbs-standort-pair > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

.tbs-standort-pair .ratio {
	position: relative;
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
}

@media (min-width: 780px) {
	/*
	 * Karte, Ueberschrift und Absatz sind drei gleichrangige Kinder des
	 * Grids (kein gemeinsamer Text-Wrapper) - ohne explizite Zeilen-
	 * Zuweisung wandert der Absatz sonst per Auto-Flow in eine neue,
	 * volle Zeile unter die Karte statt neben ihr in Spalte 2 zu bleiben.
	 * Die Karte spannt deshalb explizit beide Zeilen (Ueberschrift +
	 * Absatz), damit Spalte 2 fuer beide Text-Elemente frei bleibt.
	 */
	.tbs-standort-pair .ratio {
		grid-row: 1 / span 2;
	}
}

.tbs-standort-pair .ratio-16x9 {
	aspect-ratio: 16 / 9;
}

.tbs-standort-pair .ratio iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.tbs-standort-pair h2 {
	font-size: 22px;
	margin-bottom: var(--space-12);
}

.tbs-standort-pair p {
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--ink-700);
	line-height: 1.7;
}

/* ---------- Proof-/Kennzahlen-Leiste ---------- */
.tbs-block-proof {
	padding: var(--space-48) 0;
	background: var(--violet-900);
	color: #fff;
}

.tbs-block-proof h2 {
	color: #fff;
}

/*
 * Eyebrow-Label statt grosser H2 (nur im Zweispalten-Modus mit Text, siehe
 * unten) - angeglichen an .sec-label aus beispielseite-startseite.html.
 */
.tbs-proof-eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--violet-300);
	margin-bottom: var(--space-12);
}

/*
 * Zweispalten-Modus (Nachbesserung 11.09.2026, Startseiten-Redesign):
 * nur aktiv, wenn das optionale "text"-Feld befuellt ist (render.php
 * setzt dann die Wrapper-Klasse). Kennzahlen-Raster links, Fliesstext
 * rechts, analog zu .proof-section/.proof-grid im Entwurf.
 */
.tbs-proof-columns {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: var(--space-32);
}

@media (min-width: 820px) {
	.tbs-proof-columns {
		grid-template-columns: 1fr 1fr;
	}
}

.tbs-proof-columns .tbs-proof-grid {
	grid-template-columns: repeat(3, 1fr);
	text-align: left;
	margin-top: 0;
}

.tbs-proof-text p {
	font-family: var(--font-body);
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 var(--space-12);
}

.tbs-proof-text p:last-child {
	margin-bottom: 0;
}

.tbs-proof-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-24);
	margin-top: var(--space-24);
	text-align: center;
}

@media (min-width: 640px) {
	.tbs-proof-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/*
 * Genau zwei Kennzahlen (Zusatzklasse aus render.php, 01.10.2026): ab 640 px
 * zentriert nebeneinander statt in zwei von vier Spalten links. Mobil
 * bleibt das normale Zweierraster.
 */
@media (min-width: 640px) {
	.tbs-block-proof--zwei .tbs-proof-grid {
		grid-template-columns: repeat(2, minmax(0, 280px));
		justify-content: center;
		column-gap: var(--space-64);
	}
}

/*
 * Genau drei Kennzahlen ohne Fliesstext (Zusatzklasse aus render.php,
 * 02.10.2026): ab 640 px drei Spalten zentriert statt drei von vier Spalten
 * links. Mobil bleibt das normale Zweierraster. Leisten mit Fliesstext
 * (Startseite, Unternehmen mit Text) bekommen die Klasse nicht.
 */
@media (min-width: 640px) {
	.tbs-block-proof--drei .tbs-proof-grid {
		grid-template-columns: repeat(3, minmax(0, 240px));
		justify-content: center;
		column-gap: var(--space-48);
	}
}

/*
 * Kennzahlen neben Fliesstext (Startseite) unter 375 px untereinander (Folgeauftrag 190): Die drei Spalten brauchten zusammen 348 px
 * (Inhalt: "Suedbayern" in 28 px), bei 320 px stehen 272 px zur Verfuegung. Ab 375 px unveraendert.
 */
@media (max-width: 374px) {
	.tbs-proof-columns .tbs-proof-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.tbs-proof-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tbs-proof-value {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 28px;
	color: #fff;
}

.tbs-proof-label {
	font-family: var(--font-body);
	font-size: 12.5px;
	color: var(--violet-300);
}

/* ---------- Zertifizierungs-/Partner-Badge-Leiste ---------- */
.tbs-block-badge-leiste {
	padding: var(--space-48) 0;
}

.tbs-badge-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-32);
	margin-top: var(--space-24);
}

.tbs-badge-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	max-width: 120px;
}

.tbs-badge-ring {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 2px solid var(--violet-150);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--violet-050);
}

.tbs-badge-label {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	color: var(--ink-900);
}

.tbs-badge-sublabel {
	font-family: var(--font-body);
	font-size: 11.5px;
	color: var(--ink-500);
}

/* ---------- Ansprechpartner: Kontakt-Icons-Modus ---------- */
.tbs-person-contact-icons {
	flex-direction: row;
	gap: var(--space-12);
	margin-top: var(--space-8);
}

.tbs-person-contact-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--violet-050);
	color: var(--violet-800);
}

.tbs-person-contact-icons a:hover {
	background: var(--violet-100);
}

/* ---------- Ansprechpartner: Kontakt "Icon + Text kombiniert"-Modus ---------- */
.tbs-person-contact-combined {
	gap: 4px;
	margin-top: var(--space-8);
}

.tbs-person-contact-combined a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.tbs-person-contact-combined a svg {
	flex: none;
	color: var(--violet-800);
}

/* ---------- Beispielszenario / Case-Study ---------- */
.tbs-block-case-study {
	padding: var(--space-64) 0;
}

.tbs-case-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-32);
	align-items: start;
}

@media (min-width: 820px) {
	.tbs-case-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.tbs-case-visual img {
	width: 100%;
	height: auto;
	border-radius: 16px;
	display: block;
}

.tbs-case-body h2 {
	font-size: 24px;
}

.tbs-case-body p {
	margin-top: var(--space-12);
	font-family: var(--font-body);
	color: var(--ink-700);
	font-size: 15.5px;
	line-height: 1.6;
}

.tbs-case-results {
	list-style: none;
	margin: var(--space-16) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.tbs-case-results li {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	font-family: var(--font-body);
	font-size: 14.5px;
	color: var(--ink-900);
	font-weight: 600;
}

.tbs-case-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--violet-600);
	flex: none;
}

.tbs-case-disclaimer {
	margin-top: var(--space-24);
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--ink-500);
	font-style: italic;
}

/* ---------- Job-Karte ---------- */
.tbs-block-job-karte {
	padding: var(--space-64) 0;
}

.tbs-job-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-16);
	margin-top: var(--space-24);
}

@media (min-width: 640px) {
	.tbs-job-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.tbs-job-card {
	display: block;
	padding: var(--space-24);
	border: 1px solid var(--line);
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
}

.tbs-job-card:hover {
	border-color: var(--violet-300);
	background: var(--violet-050);
}

.tbs-job-card h3 {
	font-size: 16px;
}

.tbs-job-tags {
	margin-top: var(--space-8);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tbs-job-tag {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	color: var(--violet-800);
	background: var(--violet-100);
	padding: 3px 10px;
	border-radius: 100px;
}

.tbs-job-cta {
	display: inline-block;
	margin-top: var(--space-16);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	color: var(--violet-800);
}

/* ---------- Referenten-Karte ---------- */
.tbs-block-referenten {
	padding: var(--space-48) 0;
}

/* ---------- Agenda-Checkliste ---------- */
.tbs-block-agenda {
	padding: var(--space-48) 0;
}

.tbs-agenda-list {
	list-style: none;
	margin: var(--space-24) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.tbs-agenda-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-12);
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--ink-900);
}

.tbs-agenda-check {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--violet-800);
	color: #fff;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Standort-Karte ---------- */
.tbs-block-standort-karte {
	padding: var(--space-64) 0;
}

.tbs-standort-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-24);
	margin-top: var(--space-24);
}

@media (min-width: 640px) {
	.tbs-standort-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.tbs-standort-card {
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
}

/* + img: Imagify-Picture-Wrapper-Fix, siehe Begruendung bei .tbs-partner-logo */
.tbs-standort-map,
.tbs-standort-map img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	display: block;
}

.tbs-standort-body {
	padding: var(--space-24);
}

.tbs-standort-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	flex-wrap: wrap;
}

.tbs-standort-head h3 {
	font-size: 16px;
}

.tbs-standort-tag {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	color: var(--violet-800);
	background: var(--violet-100);
	padding: 3px 10px;
	border-radius: 100px;
}

.tbs-standort-address {
	margin-top: var(--space-12);
	font-family: var(--font-body);
	font-size: 13.5px;
	color: var(--ink-700);
	line-height: 1.6;
}

.tbs-standort-hours {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--space-12);
	font-family: var(--font-body);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--violet-800);
	line-height: 1.6;
}

.tbs-standort-hours svg {
	flex: none;
}

.tbs-standort-phone,
.tbs-standort-maps-link {
	display: block;
	margin-top: var(--space-12);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13.5px;
	color: var(--violet-800);
	text-decoration: none;
}

.tbs-standort-phone:hover,
.tbs-standort-maps-link:hover {
	text-decoration: underline;
}

/* ---------- Notfall-Hinweis-Box ---------- */
.tbs-block-notfall {
	padding: var(--space-24) 0;
}

.tbs-notfall-box {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	background: #FBF1E4;
	border: 1px solid #E9C68A;
	border-radius: 14px;
	padding: var(--space-16) var(--space-24);
	flex-wrap: wrap;
}

.tbs-notfall-icon {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--warn-text);
	color: #fff;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tbs-notfall-body {
	flex: 1;
	min-width: 200px;
}

.tbs-notfall-label {
	display: block;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--warn-text);
}

.tbs-notfall-body p {
	margin-top: 4px;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--ink-900);
}

.tbs-notfall-phone {
	flex: none;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 18px;
	color: var(--ink-900);
	text-decoration: none;
}

/* ---------- Akronym-/Markenprinzip-Erklärung ---------- */
.tbs-block-akronym {
	padding: var(--space-48) 0;
}

.tbs-akronym-intro {
	font-family: var(--font-body);
	color: var(--ink-700);
	margin-bottom: var(--space-24);
}

.tbs-akronym-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-24);
}

.tbs-akronym-item {
	display: flex;
	align-items: center;
	gap: var(--space-12);
}

.tbs-akronym-letter {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--violet-800);
	color: #fff;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.tbs-akronym-word {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14.5px;
	color: var(--ink-900);
}

/* ---------- Vertrauens-Chip ---------- */
.tbs-block-vertrauens-chip {
	padding: var(--space-8) 0;
}

.tbs-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.tbs-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #E7F3EC;
	color: var(--ok, #2F7A4F);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 100px;
}

/* ---------- Vertrauens-Chip, Darstellung "Vertrauensband" ----------
 * Flaechiges CI-Violett ueber die volle Breite wie Hero und CTA, weisse Chips,
 * gruene Haekchen im weissen Chip (direkt auf dem Violett nur 2,22 : 1).
 * Alle Regeln haengen an --band, damit Beratung anfordern, Das Unternehmen
 * tbs und Jobs (Standard) unveraendert bleiben. Die Kurs-Chip-Regel
 * (.tbs-chip, weiter unten) wird hier bewusst nicht angefasst, sondern mit
 * hoeherer Spezifitaet uebersteuert.
 * Kontraste: Text --violet-900 auf Weiss 15,39 : 1, Haekchen --ok auf Weiss
 * 5,23 : 1, Chip auf Band --violet-800 11,60 : 1.
 */
.tbs-block-vertrauens-chip--band {
	background: var(--violet-800);
	padding: var(--space-32) 0;
}

.tbs-block-vertrauens-chip--band .tbs-chip-row {
	gap: var(--space-8);
}

.tbs-block-vertrauens-chip--band .tbs-chip {
	background: #fff;
	color: var(--violet-900);
	border: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	padding: var(--space-8) var(--space-16);
	gap: var(--space-8);
	border-radius: 100px;
}

.tbs-block-vertrauens-chip--band .tbs-chip svg {
	color: var(--ok);
	width: 14px;
	height: 14px;
	flex: none;
}

/* Handy: kompakter, damit das Band mit sechs Chips nicht mehr als einen halben Bildschirm fuellt (bei 375 px vorher 364 px hoch). */
@media (max-width: 639px) {
	.tbs-block-vertrauens-chip--band {
		padding: var(--space-24) 0;
	}

	.tbs-block-vertrauens-chip--band .tbs-chip-row {
		gap: 6px;
	}

	.tbs-block-vertrauens-chip--band .tbs-chip {
		font-size: 12px;
		padding: 6px 12px;
		gap: 6px;
	}

	.tbs-block-vertrauens-chip--band .tbs-chip svg {
		width: 12px;
		height: 12px;
	}
}

@media (min-width: 640px) {
	.tbs-block-vertrauens-chip--band {
		padding: var(--space-48) 0;
	}
}

/* ---------- Telefon-Karte ---------- */
.tbs-block-telefon-karte {
	background: var(--violet-900);
	border-radius: 14px;
	padding: var(--space-16) var(--space-24);
	text-align: center;
}

.tbs-telefon-label {
	display: block;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--violet-300);
	margin-bottom: var(--space-8);
}

.tbs-telefon-number {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 20px;
	color: #fff;
	text-decoration: none;
}

/* ---------- Erreichbarkeit-Box ---------- */
.tbs-block-erreichbarkeit {
	padding: var(--space-48) 0;
}

.tbs-erreichbarkeit-box {
	background: var(--violet-050);
	border: 1.5px solid var(--violet-150);
	border-radius: var(--radius-l);
	padding: var(--space-24);
}

.tbs-erreichbarkeit-box h2 {
	font-size: 22px;
	margin-bottom: var(--space-12);
}

.tbs-erreichbarkeit-zeiten {
	margin: 0 0 var(--space-12);
	padding-bottom: var(--space-12);
	border-bottom: 1px solid var(--violet-150);
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink-700);
	line-height: 1.7;
}

/*
 * Prominentere Variante (Nachbesserung 14.09.2026): groesser, halbfett,
 * mit Uhr-Icon auf eigener Zeile - gleiches Icon/Farbe wie bereits bei den
 * Standort-Oeffnungszeiten (.tbs-standort-hours), hier nur groesser
 * skaliert. Ueber das optionale Feld "zeiten_icon" je Instanz aktivierbar,
 * damit andere Nutzungen dieser Komponente (z. B. reiner Text-Teaser ohne
 * Uhrzeiten-Bezug) unveraendert bleiben.
 */
.tbs-erreichbarkeit-zeiten-icon {
	display: flex;
	align-items: flex-start;
	gap: var(--space-8);
	font-size: 18px;
	font-weight: 600;
	color: var(--violet-800);
}

.tbs-erreichbarkeit-zeiten-icon svg {
	flex: none;
	margin-top: 3px;
}

.tbs-erreichbarkeit-notfall {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	color: var(--violet-900);
}

.tbs-erreichbarkeit-notfall a {
	font-weight: 700;
	color: var(--violet-800);
	text-decoration: none;
}

.tbs-erreichbarkeit-notfall a:hover {
	text-decoration: underline;
}

/* ---------- Artikel-Meta-Leiste ---------- */
.tbs-block-artikel-meta {
	padding: var(--space-16) 0;
	border-bottom: 1px solid var(--line-soft);
}

.tbs-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-16);
}

.tbs-meta-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--ink-500);
}

/* ---------- Inline-Hinweisbox ---------- */
.tbs-block-inline-hinweis {
	background: var(--violet-050);
	border-left: 3px solid var(--violet-600);
	border-radius: 0 10px 10px 0;
	padding: var(--space-12) var(--space-16);
	margin: var(--space-16) 0;
}

.tbs-block-inline-hinweis p {
	margin: 0;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--ink-900);
	line-height: 1.6;
}

/* ---------- Kapitel-Zusammenfassung-Box ---------- */
.tbs-block-kapitel-zusammenfassung {
	background: var(--violet-900);
	border-radius: 14px;
	padding: var(--space-24);
	margin: var(--space-24) 0;
	color: #fff;
}

.tbs-kapsum-heading {
	display: block;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 14px;
	margin-bottom: var(--space-12);
}

.tbs-block-kapitel-zusammenfassung ul {
	margin: 0;
	padding-left: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tbs-block-kapitel-zusammenfassung li {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--violet-150);
	line-height: 1.5;
}

/* ---------- Content-Tabelle ---------- */
.tbs-block-content-tabelle {
	padding: var(--space-24) 0;
}

.tbs-block-content-tabelle h3 {
	font-size: 18px;
	margin-bottom: var(--space-12);
}

.tbs-tabelle-scroll {
	overflow-x: auto;
}

.tbs-tabelle {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-body);
	font-size: 13.5px;
}

.tbs-tabelle th,
.tbs-tabelle td {
	text-align: left;
	padding: var(--space-12) var(--space-16);
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}

.tbs-tabelle th {
	background: var(--violet-050);
	font-weight: 800;
	color: var(--violet-900);
}

.tbs-tabelle tr:last-child td {
	border-bottom: none;
}

/* ---------- Autoren-Box ---------- */
.tbs-block-autoren-box {
	display: flex;
	gap: var(--space-16);
	padding: var(--space-24);
	border-top: 1px solid var(--line);
	margin-top: var(--space-32);
}

/* + img: Imagify-Picture-Wrapper-Fix, siehe Begruendung bei .tbs-partner-logo */
.tbs-autor-photo,
.tbs-autor-photo img,
.tbs-autor-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	flex: none;
}

.tbs-autor-photo,
.tbs-autor-photo img {
	object-fit: cover;
}

.tbs-autor-avatar {
	background: var(--violet-100);
	color: var(--violet-800);
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tbs-autor-name {
	display: block;
	font-family: var(--font-head);
	font-size: 15px;
}

.tbs-autor-role {
	display: block;
	font-family: var(--font-body);
	font-size: 12.5px;
	color: var(--ink-500);
	margin-top: 2px;
}

.tbs-autor-bio {
	margin: var(--space-8) 0 0;
	font-family: var(--font-body);
	font-size: 13.5px;
	color: var(--ink-700);
	line-height: 1.6;
}

/* ---------- Referenzen (Testimonial-Karten) ---------- */
.tbs-block-referenzen {
	padding: var(--space-64) 0;
}

.tbs-testimonial-grid {
	display: grid;
	/*
	 * auto-fit statt fester Spaltenzahl: bei weniger Karten als Spalten
	 * (z.B. nur 1 Testimonial) kollabieren die leeren Spalten automatisch,
	 * justify-content zentriert die verbleibende(n) Karte(n) - vorher liess
	 * eine feste "repeat(3, 1fr)" eine einzelne Karte einspaltig links mit
	 * viel Leerraum daneben stehen (live bestaetigt).
	 */
	grid-template-columns: repeat(auto-fit, minmax(300px, 440px));
	justify-content: center;
	gap: var(--space-24);
	margin-top: var(--space-24);
}

.tbs-testimonial-card {
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: var(--space-24);
	display: flex;
	flex-direction: column;
}

/* Karten-Modus: die Zitat-Spalte wächst, damit der Foto/Name-Fuss immer
   unten in der Karte sitzt, unabhaengig von der Zitatlaenge. */
.tbs-testimonial-card > .tbs-testimonial-quote-col {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.tbs-testimonial-mark {
	font-family: var(--font-head);
	font-size: 32px;
	font-weight: 800;
	color: var(--violet-300);
	line-height: 1;
}

.tbs-testimonial-quote {
	margin: var(--space-8) 0 0;
	font-family: var(--font-body);
	font-size: 14.5px;
	color: var(--ink-900);
	line-height: 1.6;
}

.tbs-testimonial-card .tbs-testimonial-quote {
	flex: 1;
}

/*
 * Schliessendes Anführungszeichen bewusst als eigener Absatz NACH dem
 * Zitat (nicht mehr inline im letzten Satz) - inline im Fliesstext
 * vergroesserte sonst den Zeilenabstand genau dieser einen Zeile
 * (live bestaetigt). Rechtsbuendig, eigene Zeile, gleiche Optik wie das
 * oeffnende Zeichen.
 */
.tbs-testimonial-mark-close-line {
	margin: var(--space-4) 0 var(--space-16);
	text-align: right;
	line-height: 1;
}

.tbs-testimonial-foot {
	display: flex;
	align-items: center;
	gap: var(--space-12);
}

/* + img: Imagify-Picture-Wrapper-Fix, siehe Begruendung bei .tbs-partner-logo */
.tbs-testimonial-photo,
.tbs-testimonial-photo img,
.tbs-testimonial-avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	flex: none;
}

.tbs-testimonial-photo,
.tbs-testimonial-photo img {
	object-fit: cover;
}

.tbs-testimonial-avatar {
	background: var(--violet-100);
	color: var(--violet-800);
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tbs-testimonial-meta {
	display: flex;
	flex-direction: column;
	font-family: var(--font-body);
	font-size: 12.5px;
}

.tbs-testimonial-meta strong {
	font-size: 13.5px;
}

.tbs-testimonial-meta span {
	color: var(--ink-500);
}

.tbs-testimonial-link {
	display: inline-block;
	margin-top: var(--space-16);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12.5px;
	color: var(--violet-800);
	text-decoration: none;
}

.tbs-testimonial-link:hover {
	text-decoration: underline;
}

/* ---------- Referenzen: "featured"-Darstellung (volle Breite, zweispaltig) ----------
 * Fuer ein einzelnes hervorgehobenes Testimonial statt eines Karten-Rasters
 * (z. B. medatixx-Seite). Mehrere Testimonials in diesem Modus stapeln sich
 * als eigene volle Zeilen untereinander. */
.tbs-testimonial-featured-list {
	margin-top: var(--space-32);
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
}

.tbs-testimonial-featured {
	display: grid;
	/*
	 * 58/42 statt einer festen px-Breite fuer die Bildspalte: bei fester
	 * Breite balancierte sich das Verhaeltnis nur fuer die eine damalige
	 * Zitatlaenge - fr-Anteile bleiben unabhaengig von der Container-
	 * breite immer bei 58/42. Das hochformatige Foto (siehe unten) gleicht
	 * unterschiedliche Zitatlaengen zusaetzlich von selbst aus, da es mehr
	 * vertikalen Raum beansprucht als ein quadratisches Bild.
	 */
	grid-template-columns: 58fr 42fr;
	gap: var(--space-48);
	/*
	 * center statt start (29.09.2026, Stephans Vorgabe): bei laengerem
	 * Zitat ist die Foto-Spalte niedriger als die Zitat-Spalte - "start"
	 * ließ das Foto dadurch oben haengen statt mittig zum Zitat zu sitzen.
	 * "center" zentriert die Foto-Spalte lediglich innerhalb der Zeile,
	 * ohne sie zu strecken - keine Verzerrung, da die Fotogroesse weiterhin
	 * ausschliesslich durch Breite + aspect-ratio bestimmt wird.
	 */
	align-items: center;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: var(--violet-050);
	padding: var(--space-48);
}

@media (max-width: 780px) {
	.tbs-testimonial-featured {
		grid-template-columns: 1fr;
		padding: var(--space-24);
	}
}

.tbs-testimonial-featured .tbs-testimonial-quote {
	font-family: var(--font-head);
	font-size: clamp(19px, 2.4vw, 24px);
	font-weight: 700;
	line-height: 1.45;
	color: var(--ink-900);
}

.tbs-testimonial-featured .tbs-testimonial-mark {
	font-size: 48px;
}

.tbs-testimonial-featured .tbs-testimonial-mark-close-line {
	margin-bottom: 0;
}

.tbs-testimonial-featured .tbs-testimonial-mark-close {
	font-size: 48px;
}

.tbs-testimonial-featured-media {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* + img: Imagify-Picture-Wrapper-Fix, siehe Begruendung bei .tbs-partner-logo */
.tbs-testimonial-featured-photo,
.tbs-testimonial-featured-photo img {
	width: 100%;
	max-width: 320px;
	/* Hochformat (4:5, z. B. 320x400) statt quadratisch: gleicht sich mit
	   mehrzeiligem Zitat-Text von Natur aus besser aus als ein Quadrat,
	   unabhaengig von der genauen Zeilenzahl des Zitats. */
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 16px;
	flex: none;
}

.tbs-testimonial-featured-avatar {
	width: 100%;
	max-width: 220px;
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	flex: none;
}

.tbs-testimonial-featured-avatar {
	background: var(--violet-100);
	color: var(--violet-800);
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tbs-testimonial-featured-media .tbs-testimonial-meta {
	margin-top: var(--space-16);
	font-size: 13.5px;
}

.tbs-testimonial-featured-media .tbs-testimonial-meta strong {
	font-size: 15px;
}

/* ---------- Partner-Profil-Karte ---------- */
.tbs-block-partner-profil {
	padding: var(--space-64) 0;
}

.tbs-partner-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-24);
	margin-top: var(--space-24);
}

@media (min-width: 640px) {
	.tbs-partner-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	/*
	 * Nachbesserung 09.09.2026: Von 3 auf 2 Spalten reduziert - haengt mit
	 * der Logo-Vergroesserung unten zusammen (mehr Kartenbreite fuer die
	 * jetzt bis zu 200px breiten Logos, weniger gedraengt bei zweizeiligen
	 * Partnernamen wie "medatixx / x.isynet").
	 */
	.tbs-partner-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.tbs-partner-card {
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: var(--space-24);
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Hover-Konsistenz mit .tbs-news-card/.tbs-job-card/.tbs-karte (siehe
   dortiger Kommentar) - nur wirksam, wenn die Karte ein <a> ist (Link-Feld
   optional, siehe render.php). */
a.tbs-partner-card:hover {
	border-color: var(--violet-300);
	background: var(--violet-050);
}

.tbs-partner-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-12);
}

/*
 * Nachbesserung 09.09.2026: 44x44px war ein zu klein gewaehltes, hartes
 * Quadrat, unabhaengig von Kartenhoehe/Titelzeilenzahl (Diagnose auf
 * Stephans Nachfrage bestaetigt: "flex: none" verhinderte jede Skalierung,
 * die Spaltenanzahl haette daran nichts geaendert). Auf der echten
 * Original-Seite waren die Logos deutlich groesser als die 44px hier.
 *
 * Bewusst eine FESTE Box (200x90px) statt nur "width:200px; height:auto"
 * (wie zunaechst besprochen): Live an allen 20 Partnern geprueft, die
 * Logo-Seitenverhaeltnisse schwanken stark (SonicWall 6:1 breit bis indicda
 * exakt 1:1 quadratisch). Bei reinem "width:200px; height:auto" waere
 * indicda dadurch 200px HOCH geworden - deutlich groesser/dominanter als
 * alle anderen Kartenkoepfe, die bei 200px Breite nur 19-89px hoch sind.
 * Ein zusaetzliches "max-height" allein haette bei gleichzeitig fest
 * gesetzter Breite zu Verzerrung neigen koennen (kein Spielraum fuer die
 * Breite, sich anzupassen) - "object-fit:contain" auf einer festen Box
 * loest das robust: jedes Logo wird unverzerrt in die 200x90px-Flaeche
 * eingepasst, breite Logos nutzen die volle Breite aus, quadratische/hohe
 * Logos werden seitlich schmaler statt die Zeile zu dominieren.
 */
/*
 * Nachbesserung 16.09.2026: Imagify wandelt Bilder, sobald eine WebP-Version
 * existiert, von <img class="tbs-partner-logo"> in <picture
 * class="tbs-partner-logo"><source><img (ohne Klasse)></picture> um - die
 * Klasse wandert auf den unsichtbaren Wrapper, das eigentlich sichtbare
 * <img> bleibt unbegrenzt und rendert in voller Originalgroesse (live an
 * "Unsere Partner" reproduziert: 10 von 20 Logos ueberlappten dadurch Text).
 * Zweiter Selektor faengt genau diesen Fall ab, unabhaengig davon, ob/wann
 * Imagify ein bestimmtes Bild konvertiert.
 */
.tbs-partner-logo,
.tbs-partner-logo img {
	width: 200px;
	height: 90px;
	object-fit: contain;
	object-position: left center;
	flex: none;
}

.tbs-partner-eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--violet-600);
	margin-bottom: 2px;
}

.tbs-partner-name {
	font-family: var(--font-head);
	font-size: 14.5px;
}

.tbs-partner-description {
	margin: var(--space-12) 0 0;
	font-family: var(--font-body);
	font-size: 13.5px;
	color: var(--ink-700);
	line-height: 1.6;
}

.tbs-partner-link {
	/* Jetzt ein <span> statt <a> (ganze Karte ist der Link, siehe
	   render.php) - kein eigenes Hover mehr noetig, das uebernimmt
	   a.tbs-partner-card:hover oben. */
	display: inline-block;
	margin-top: var(--space-12);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12.5px;
	color: var(--violet-800);
}

/* ---------- Sticky-Inhaltsverzeichnis mit Lesefortschritt ---------- */
.tbs-block-toc {
	position: sticky;
	top: 88px;
	align-self: start;
	width: 260px;
	max-width: 100%;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: var(--space-16);
}

.tbs-toc-heading {
	display: block;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 13px;
	margin-bottom: var(--space-12);
}

.tbs-toc-progress {
	height: 3px;
	background: var(--line-soft);
	border-radius: 100px;
	margin-bottom: var(--space-12);
	overflow: hidden;
}

.tbs-toc-progress-fill {
	height: 100%;
	width: 0%;
	background: var(--violet-800);
	transition: width 0.1s linear;
}

.tbs-block-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tbs-block-toc a {
	overflow-wrap: anywhere; /* lange Wörter und Adressen im Inhaltsverzeichnis dürfen umbrechen statt die Spalte zu weiten */
	display: block;
	padding: 6px 8px;
	border-radius: 8px;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--ink-700);
	text-decoration: none;
	border-left: 2px solid transparent;
}

.tbs-block-toc a:hover {
	background: var(--violet-050);
}

.tbs-block-toc a.is-active {
	color: var(--violet-800);
	font-weight: 700;
	border-left-color: var(--violet-800);
	background: var(--violet-050);
}

/* ---------- Wegweiser-Grid ---------- */
.tbs-block-wegweiser {
	padding: var(--space-48) 0;
}

.tbs-wegweiser-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-16);
	margin-top: var(--space-24);
}

@media (min-width: 640px) {
	.tbs-wegweiser-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.tbs-wegweiser-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-24) var(--space-16);
	border: 1px solid var(--line);
	border-radius: 14px;
	text-decoration: none;
	color: var(--ink-900);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13.5px;
	text-align: center;
}

.tbs-wegweiser-tile:hover {
	border-color: var(--violet-300);
	background: var(--violet-050);
}

/* ---------- Ergänzende Lösungen (Cross-Sell) ---------- */
.tbs-block-cross-sell {
	padding: var(--space-64) 0;
}

.tbs-cross-sell-intro {
	margin-top: var(--space-8);
	font-family: var(--font-body);
	color: var(--ink-700);
	font-size: 14.5px;
}

.tbs-cross-sell-card {
	text-decoration: none;
	color: inherit;
	display: block;
}

.tbs-cross-sell-card:hover {
	border-color: var(--violet-300);
}

/* ---------- Prämien-/Options-Auswahlkarten ---------- */
.tbs-block-auswahlkarten {
	border: none;
	padding: 0;
	margin: var(--space-16) 0;
}

.tbs-block-auswahlkarten legend {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 15px;
	margin-bottom: var(--space-12);
	padding: 0;
}

.tbs-auswahlkarten-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-12);
}

@media (min-width: 640px) {
	.tbs-auswahlkarten-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.tbs-auswahlkarte {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-16);
	border: 1.5px solid var(--line);
	border-radius: 12px;
	cursor: pointer;
	text-align: center;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	color: var(--ink-900);
}

.tbs-auswahlkarte input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.tbs-auswahlkarte:has(input:checked) {
	border-color: var(--violet-800);
	background: var(--violet-050);
	color: var(--violet-800);
}

.tbs-auswahlkarte:has(input:focus-visible) {
	outline: 2px solid var(--violet-600);
	outline-offset: 2px;
}

/* ---------- Kombinierte Such-/Filter-Leiste ---------- */
.tbs-block-such-filter {
	padding: var(--space-24) 0;
}

.tbs-such-filter-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-16);
}

.tbs-such-form {
	flex: 1;
	min-width: 220px;
	display: flex;
	align-items: center;
	gap: var(--space-8);
	border: 1px solid var(--line);
	border-radius: 100px;
	padding: 10px 16px;
	color: var(--ink-500);
}

.tbs-such-form input {
	flex: 1;
	border: none;
	outline: none;
	font-family: var(--font-body);
	font-size: 14px;
	background: transparent;
	color: var(--ink-900);
}

.tbs-such-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tbs-such-filter-chip {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	color: var(--ink-700);
	background: var(--violet-050);
	padding: 8px 16px;
	border-radius: 100px;
	text-decoration: none;
}

.tbs-such-filter-chip:hover {
	background: var(--violet-100);
	color: var(--violet-800);
}

/* ---------- Mehrstufiges Formular mit Fortschritt ----------
 * Kein eigener Block: WPForms bringt die Seitenumbruch-/
 * Fortschrittsanzeige nativ mit (Page-Break-Feature). Diese Regeln
 * ueberschreiben nur die Optik der WPForms-eigenen Klassen auf unser
 * Corporate Design. Selektoren nach WPForms-Standardkonventionen; bei
 * abweichender Ausgabe der installierten Version einmal gegen ein
 * echtes mehrseitiges Formular pruefen. */
/*
 * Bewusst auf ".wpforms-container" statt nur ".tbs-block-kontakt" bezogen:
 * WPForms-Formulare tauchen im Theme nicht nur ueber den neuen ACF-Kontakt-
 * Block auf, sondern auch ueber alte, direkt eingebettete Shortcodes in
 * Wiederverwendbaren Bloecken (z. B. Formular #2727 auf vielen Produkt-
 * seiten) - deren Wrapper hat nicht die ".tbs-block-kontakt"-Klasse, wird
 * durch das WPForms-eigene ".wpforms-container" aber trotzdem sicher
 * getroffen (live bestaetigt: Button blieb blau, bis der Selektor
 * generalisiert wurde).
 */
.wpforms-container .wpforms-page-indicator-page-number,
.wpforms-container .wpforms-page-indicator-page-triangle {
	background: var(--violet-800) !important;
	border-color: var(--violet-800) !important;
}

.wpforms-container .wpforms-page-indicator-page-active .wpforms-page-indicator-page-number {
	background: var(--violet-900) !important;
}

.wpforms-container .wpforms-progress-bar-fill {
	background: var(--violet-800) !important;
}

.wpforms-container .wpforms-page-button {
	border-radius: 100px !important;
	font-family: var(--font-body) !important;
	font-weight: 700 !important;
}

.wpforms-container .wpforms-page-next {
	background: var(--violet-800) !important;
	border-color: var(--violet-800) !important;
}

/*
 * "Anliegen"-Dropdown (Choices.js "modern select"): WPForms leitet den
 * Fokus-Rahmen UND die Hervorhebungsfarbe der geoeffneten Optionsliste
 * ebenfalls von --wpforms-button-background-color ab (inline im <head>
 * auf ":root" mit dem WPForms-Blau #066aab gesetzt). Statt jede der drei
 * betroffenen Regeln einzeln zu ueberschreiben, wird hier die Variable
 * selbst fuer das gesamte Formular auf das Corporate-Design-Violett
 * umgebogen - behebt Fokus-Rahmen, Box-Shadow und Options-Highlight in
 * einem Schritt und faengt automatisch jede weitere WPForms-Komponente
 * ab, die dieselbe Variable nutzt. */
.wpforms-container {
	--wpforms-button-background-color: var(--violet-800) !important;
}

/* Absende-Button: WPForms setzt seine eigene Standardfarbe (Blau) ueber
 * eine :root-CSS-Variable (--wpforms-button-background-color), die staerker
 * wirkt als eine reine Klassen-Zuweisung im Formular selbst – deshalb hier
 * per !important auf das Corporate-Design-Violett angeglichen, analog zu
 * den WPForms-Overrides oben (Teil 2.5 der Knowledge Base). */
.wpforms-container .wpforms-submit {
	background: var(--violet-800) !important;
	border-color: var(--violet-800) !important;
	border-radius: 100px !important;
	font-family: var(--font-body) !important;
	font-weight: 700 !important;
}

.wpforms-container .wpforms-submit:hover {
	background: var(--violet-900) !important;
	border-color: var(--violet-900) !important;
}

/* ---------- Seitenvorlagen: Ratgeber-Archiv & Suchergebnisseite (Baustein 4) ---------- */
.tbs-page-head {
	padding: var(--space-48) 0 var(--space-24);
}

.tbs-page-head h1 {
	font-size: clamp(26px, 4vw, 36px);
}

.tbs-page-head-lede {
	margin-top: var(--space-12);
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink-700);
	max-width: 65ch;
}

.tbs-search-page-form {
	margin-top: var(--space-24);
	max-width: 480px;
}

.tbs-such-filter-chip {
	text-decoration: none;
	border: none;
}

.tbs-such-filter-chip.is-active {
	background: var(--violet-800);
	color: #fff;
}

.tbs-search-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: var(--space-24) 0 var(--space-16);
}

.tbs-search-count {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--ink-500);
	margin-bottom: var(--space-16);
}

.tbs-search-result-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin-bottom: var(--space-32);
}

.tbs-search-no-results-block {
	padding: var(--space-48) 0;
	max-width: 60ch;
}

.tbs-search-no-results-block h2 {
	font-size: 20px;
	margin-bottom: var(--space-12);
}

.tbs-search-no-results-block p {
	font-family: var(--font-body);
	font-size: 14.5px;
	color: var(--ink-700);
	line-height: 1.6;
}

.tbs-search-no-results-block a {
	color: var(--violet-800);
	font-weight: 700;
	text-decoration: underline;
}

.tbs-archive-empty {
	padding: var(--space-48) 0;
	font-family: var(--font-body);
	color: var(--ink-500);
}

/* ---------- 404-Fehlerseite ---------- */
.tbs-404-head {
	padding-bottom: var(--space-64);
}

.tbs-404-eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--violet-800);
	background: var(--violet-100);
	border: 1px solid var(--violet-150);
	padding: 6px 14px;
	border-radius: 100px;
	margin-bottom: var(--space-16);
}

.tbs-404-links {
	margin-top: var(--space-24);
	display: flex;
	gap: var(--space-12);
	flex-wrap: wrap;
}

/*
 * TI-Status-Karte + TI-Status-Dashboard (Teil 3.8). Datenquelle: eigener
 * REST-Endpunkt vor der gematik-API "api-tilage", siehe inc/ti-status.php
 * fuer Caching/Fallback-Logik. Farbzustaende: ok=gruen, warn=Wartung
 * (amber), error=Stoerung (rot), unknown=kein Datenstand (grau).
 */
.tbs-ti-status-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--unknown);
}

/* "color" steht hier zusaetzlich zu "background", damit Elemente, die
   ueber diese Zustandsklassen eingefaerbt werden, "currentColor" nutzen
   koennen (z. B. der Live-Pulsring der TI-Status-Karte, siehe unten). */
.tbs-ti-status-dot-ok {
	background: var(--ok);
	color: var(--ok);
}

.tbs-ti-status-dot-warn {
	background: var(--warn);
	color: var(--warn);
}

.tbs-ti-status-dot-error {
	background: var(--error);
	color: var(--error);
}

.tbs-ti-status-dot-unknown {
	background: var(--unknown);
	color: var(--unknown);
}

/* "n. a." (Dashboard-Detailansicht): kein aktiver Anbieter fuer diese
   Komponente in der Produktivumgebung - visuell identisch zu "unknown",
   aber semantisch eine andere Ursache (siehe inc/ti-status.php). */
.tbs-ti-status-dot-na {
	background: var(--unknown);
	color: var(--unknown);
}

/*
 * TI-Status-Karte, Kachel-Optik (Nachbesserung 11.09.2026): ersetzt das
 * bisherige einzeilige Kompakt-Widget, angeglichen an den Redesign-Entwurf
 * beispielseite-startseite.html (.ti-card). Zeigt eine Zeile je V2-
 * Anwendungsgruppe (echte Daten aus tbs_ti_status_get_data(), Teil 3.8) -
 * keine neue Detailtiefe, nur die bereits vorhandenen 7 Gruppen sichtbar
 * statt in einer einzelnen Sammelzeile zusammengefasst. Sitzt in der Praxis
 * innerhalb von .tbs-ti-status-pair (ganze Karte bereits verlinkt) - daher
 * bewusst kein eigener Link in der Fusszeile.
 */
.tbs-ti-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-2);
	overflow: hidden;
}

.tbs-ti-card-head {
	background: var(--violet-900);
	padding: var(--space-16) var(--space-16) var(--space-16) var(--space-24);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12);
}

.tbs-ti-card-title {
	color: #fff;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: var(--space-8);
}

.tbs-ti-card-live {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	color: var(--violet-150);
	flex: none;
}

.tbs-ti-card-live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	position: relative;
}

.tbs-ti-card-live-dot::after {
	content: '';
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	animation: tbs-ti-card-pulse 2.2s ease-out infinite;
}

@keyframes tbs-ti-card-pulse {
	0% {
		transform: scale(.5);
		opacity: .9;
	}
	100% {
		transform: scale(2);
		opacity: 0;
	}
}

.tbs-ti-card-body {
	padding: var(--space-16) var(--space-24);
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.tbs-ti-card-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12);
	padding: 9px var(--space-12);
	background: var(--canvas);
	border-radius: var(--radius-s);
}

/* Unter 375 px (Folgeauftrag 190): schmaleres Seitenpolster im Koerper, lange Namen schieben den Status in eine zweite Zeile statt die Karte zu weiten. */
@media (max-width: 374px) {
	.tbs-ti-card-body {
		padding-left: var(--space-16);
		padding-right: var(--space-16);
	}

	.tbs-ti-card-row {
		flex-wrap: wrap;
		gap: 2px var(--space-12);
	}
}

.tbs-ti-card-row-name {
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-900);
}

.tbs-ti-card-row-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
}

.tbs-ti-card-row-status-ok {
	color: var(--ok);
}

.tbs-ti-card-row-status-warn {
	color: var(--warn-text);
}

.tbs-ti-card-row-status-error {
	color: var(--error);
}

.tbs-ti-card-row-status-unknown {
	color: var(--ink-500);
}

.tbs-ti-card-empty {
	margin: 0;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--ink-500);
	text-align: center;
}

.tbs-ti-card-foot {
	padding: var(--space-12) var(--space-16) var(--space-12) var(--space-24);
	border-top: 1px solid var(--line-soft);
	font-family: var(--font-body);
	font-size: 11.5px;
	color: var(--ink-500);
	text-align: center;
}

/* Kompakte Variante (Hero der Kontaktseite): eine gruene Zeile, wenn alles verfuegbar ist; Link in der Fusszeile */
.tbs-ti-card-kompakt-ok {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--space-8);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--ok);
}

.tbs-ti-card-link {
	color: var(--violet-800);
	font-weight: 700;
	text-decoration: none;
}

.tbs-ti-card-link:hover {
	text-decoration: underline;
}

/*
 * Detailansicht auf "Aktuelle TI-Störungen". Fund (08.09.2026, Screenshot-
 * Beleg): ohne eigene Breitenbegrenzung lief das Dashboard ueber die volle
 * Bildschirmbreite statt sich wie der Rest der Seite auf die uebliche
 * .tbs-wrap-Innenbreite zu beschraenken - die ACF-Bloecke (Karten, FAQ
 * etc.) bringen ihre max-width/margin ueblicherweise ueber ein eigenes
 * .tbs-wrap-Kind mit, das Dashboard hatte keins. Hier direkt auf dem
 * Wurzel-Element nachgezogen, da es ohnehin bereits eigenes Padding als
 * Rahmen-Abstand hat.
 */
.tbs-ti-dashboard {
	max-width: var(--wrap-max);
	margin: 0 auto;
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: var(--space-32);
	background: #fff;
}

.tbs-ti-dashboard-overall {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	font-family: var(--font-head);
	font-size: 20px;
	font-weight: 700;
	margin-bottom: var(--space-24);
}

.tbs-ti-dashboard-notice {
	font-family: var(--font-body);
	font-size: 14.5px;
	color: var(--ink-500);
	background: var(--violet-050);
	border-radius: 10px;
	padding: var(--space-16);
	margin: 0 0 var(--space-24);
}

.tbs-ti-dashboard-notice-stale {
	color: var(--warn-text);
	background: #FBF3E7;
}

/*
 * Gruppen-Wrapper (9 Gruppen, ca. 30 Komponenten - Detailtiefe-
 * Nachbesserung 08.09.2026, V1-API statt V2). Eigener Rahmen je Gruppe
 * (Nachbesserung, Screenshot-Beleg): macht die Gruppierung optisch
 * klarer, gleiches Grundmuster (var(--line)-Rahmen, Radius) wie die
 * uebrigen Karten-Container im Theme. Letzte Gruppe ohne unteren
 * Trennabstand.
 */
.tbs-ti-dashboard-group {
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: var(--space-24);
	margin-bottom: var(--space-24);
}

.tbs-ti-dashboard-group:last-of-type {
	margin-bottom: 0;
}

/*
 * Gruppe mit Stoerung: roter Rahmen (2 px statt 1 px, das Innenpolster schrumpft um 1 px, die Gruppe wird nicht groesser) und roter
 * Rahmen um die betroffenen Dienste. Rot = --error (5,6 : 1 auf Weiss); steht in der Seite oben (Sortierung in inc/ti-status.php).
 */
.tbs-ti-dashboard-group--stoerung {
	border: 2px solid var(--error);
	padding: calc(var(--space-24) - 1px);
}

.tbs-ti-dashboard-item--stoerung {
	border-color: var(--error);
}

.tbs-ti-dashboard-item--stoerung .tbs-ti-dashboard-item-state {
	color: var(--error);
	font-weight: 700;
}

.tbs-ti-dashboard-group-title {
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 700;
	color: var(--violet-800);
	margin: 0 0 var(--space-12);
}

.tbs-ti-dashboard-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-12);
}

@media (min-width: 640px) {
	.tbs-ti-dashboard-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.tbs-ti-dashboard-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.tbs-ti-dashboard-item {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: var(--space-12) var(--space-16);
}

.tbs-ti-dashboard-item-label {
	font-family: var(--font-body);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink-900);
	flex: 1;
}

/*
 * Dezenter Hinweis auf die Hover-Legende (Nachbesserung 08.09.2026): nur
 * bei bestaetigter Langform (siehe inc/ti-status.php-Katalog) - Punkte
 * ohne gesicherte Langform (PoPP, OCSP-Proxy) bleiben optisch neutral,
 * ihr title-Attribut sagt "Langform noch zu klären" statt etwas vorzu-
 * taeuschen, das es (noch) nicht gibt.
 */
.tbs-ti-dashboard-item-label-has-long {
	border-bottom: 1px dotted var(--ink-300);
	cursor: help;
}

.tbs-ti-dashboard-item-state {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--ink-500);
}

.tbs-ti-dashboard-meta {
	margin: var(--space-24) 0 0;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--ink-500);
}

/*
 * ---------- Kurskachel + Kurs-Leiste (Analyse-Runde 17.09.2026) ----------
 * Ersetzt die vorherige einheitliche "Kurs-Karte" (max-width: 420px), die
 * auf einer Produktseite (Honorar+Plus) viel ungenutzten Leerraum neben
 * sich stehen liess (Stephans Vergleichs-Screenshot mit der alten, volle
 * Breite nutzenden atregocms-Einbettung). Zwei bewusst unterschiedliche
 * Komponenten fuer zwei unterschiedliche Kontexte statt einer einzigen,
 * die fuer beide kompromisst:
 * - ".tbs-kurskachel": Vorschau-Kachel fuer MEHRERE Kurse nebeneinander
 *   (Startseiten-Widget, Seminarübersicht) - siehe tbs_kurskachel_html().
 * - ".tbs-kurs-leiste": schmales Band ueber die volle Breite fuer GENAU
 *   EINEN Kurs auf einer Produktseite - siehe tbs_kurskarte_leiste_html().
 * ".tbs-kurs-karte-termin" (Text-Stil fuer "keine Termine") bleibt
 * bestehen - wird unabhaengig davon auch auf der Kurs-Detailseite und der
 * Anmeldeseite fuer denselben Hinweistext wiederverwendet.
 */
.tbs-kurs-karte-termin {
	font-family: var(--font-body);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-900);
	margin: var(--space-8) 0 0;
}

/* ---------- Chips (Zielgruppe/Format/Dauer) ----------
 * Basis-Optik an ".tbs-kurs-header-chip" angelehnt (heller Rand statt
 * satter Flaeche), Format-Chip zusaetzlich farblich unterschieden -
 * Gruen/Amber wiederverwenden bewusst bereits vorhandene Status-Toene
 * ("--ok" vom "Buchbar"-Badge, "--warn" von der TI-Status-Warnstufe)
 * statt neuer Farben.
 */
.tbs-chip {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	color: var(--violet-900);
	background: var(--paper);
	border: 1px solid var(--violet-150);
	padding: 5px 12px;
	border-radius: 100px;
}

.tbs-chip-format-online {
	color: var(--ok);
	background: #E7F3EC;
	border-color: transparent;
}

.tbs-chip-format-praesenz {
	color: var(--warn-text);
	background: #FBF3E7;
	border-color: transparent;
}

/* ---------- Kurskachel ---------- */
.tbs-kurskacheln-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-24);
	margin-top: var(--space-24);
}

@media (min-width: 640px) {
	.tbs-kurskacheln-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.tbs-kurskachel {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding: var(--space-24);
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--paper);
}

.tbs-kurskachel-titel {
	font-family: var(--font-head);
	font-size: 18px;
	color: var(--ink-900);
	margin: 0;
}

.tbs-kurskachel-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
}

.tbs-kurskachel-termine {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.tbs-kurskachel-termin-row {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	padding: var(--space-8) 0;
	border-top: 1px solid var(--line-soft);
	font-family: var(--font-body);
	font-size: 13.5px;
}

.tbs-kurskachel-termin-datum {
	font-weight: 700;
	color: var(--ink-900);
	flex: 1;
}

.tbs-kurskachel-termin-preis {
	color: var(--ink-500);
}

.tbs-kurskachel-termin-cta {
	font-weight: 700;
	color: var(--violet-800);
	text-decoration: none;
	white-space: nowrap;
}

.tbs-kurskachel-termin-cta:hover {
	text-decoration: underline;
}

/* ---------- Naechste Kurstermine (Startseiten-Widget) ---------- */
.tbs-block-naechste-kurstermine {
	padding: var(--space-64) 0;
}

/*
 * ---------- Kurse nach Kategorie (Produktseiten-Kachel-Grid) ----------
 * Root Cause des am 21.09.2026 gemeldeten Abstands-Bugs (medatixx-Seite,
 * letzte Kachel klebt an der Kante): render.php gibt lediglich
 * "<section class='tbs-block-kurse-nach-kategorie'><div class='tbs-wrap'>"
 * aus, .tbs-wrap selbst hat aber nur horizontales Padding/Margin (siehe
 * style.css), keine eigene vertikale Polsterung - der Block brachte anders
 * als .tbs-block-naechste-kurstermine (direkt oben) keine eigene vertikale
 * Polsterung mit. Zentral hier im Block-CSS statt seitenspezifisch
 * behoben, da derselbe Block auf mehreren Produktseiten eingebettet wird
 * (medatixx, DocMedico, Honorar+Plus) und der Bug dort sonst identisch
 * aufgetreten waere. Gleicher Wert wie beim strukturell identischen
 * Startseiten-Widget direkt oben, fuer einheitlichen vertikalen Rhythmus.
 */
.tbs-block-kurse-nach-kategorie {
	padding: var(--space-64) 0;
}

/*
 * Kurs-Karte (Kurs-Leiste auf Produkt- und Informationsseiten, z. B. tbs-Individualschulungen): gleicher Fehler wie oben - render.php gab nur
 * <div class="tbs-wrap"> aus, die Leiste klebte oben an der FAQ-Fläche und unten am CTA. Zentral wie .tbs-block-kurse-nach-kategorie behoben
 * (Standard-Sektionsabstand 64 px, Styleguide Abstände), Folgeauftrag 152.
 */
.tbs-block-kurs-karte {
	padding: var(--space-64) 0;
}

.tbs-kurstermine-viewall {
	margin-top: var(--space-24);
}

.tbs-kurstermine-viewall a {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	color: var(--violet-800);
	text-decoration: none;
}

/* ---------- Seminarübersicht ---------- */
.tbs-seminare-gruppe {
	margin: var(--space-48) 0;
}

.tbs-seminare-gruppe-titel {
	font-family: var(--font-head);
	font-size: 24px;
	color: var(--ink-900);
	margin: 0 0 var(--space-24);
	padding-bottom: var(--space-8);
	border-bottom: 1px solid var(--line);
}

/* ---------- Kurs-Leiste (Produktseiten-Einbettung, z. B. Honorar+Plus) ----------
 * Bewusst KEIN "max-width" - soll die volle Inhaltsbreite (".tbs-wrap",
 * ca. 1160px) ausfuellen, dabei aber flach/schmal bleiben (Spalten statt
 * gestapelter Kartenoptik), wie die alte atregocms-Tabelle es tat.
 */
.tbs-kurs-leiste {
	padding: var(--space-24);
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--paper);
}

.tbs-kurs-leiste-titel {
	font-family: var(--font-head);
	font-size: 18px;
	color: var(--ink-900);
	margin: 0 0 var(--space-16);
}

/*
 * Flexbox statt Grid mit fester Spaltenzahl: Zielgruppe/Format/Dauer/Kosten
 * sind alle bedingt (nicht jeder Kurs hat z. B. eine Zielgruppe zugewiesen)
 * - eine feste Spaltenzahl wuerde bei fehlenden Feldern zu Luecken bzw.
 * einer verrutschten CTA-Spalte fuehren. Flexbox ordnet nur die tatsaechlich
 * vorhandenen Spalten an, die CTA wird per "margin-left:auto" ans Ende
 * gedrueckt, unabhaengig davon, wie viele Spalten davor stehen.
 */
.tbs-kurs-leiste-spalten {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--space-16) var(--space-24);
}

.tbs-kurs-leiste-spalte {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.tbs-kurs-leiste-label {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--violet-600);
}

.tbs-kurs-leiste-wert {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-900);
}

.tbs-kurs-leiste-spalte-cta {
	margin-left: auto;
}

.tbs-kurs-leiste-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--violet-800);
	color: #fff;
	padding: 10px 20px;
	border-radius: 100px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: none;
	white-space: nowrap;
}

.tbs-kurs-leiste-cta:hover {
	background: var(--violet-900);
}

/* ---------- Kurs-Detailseite (single-tbs_kurs.php) ----------
 * Layout-Ideen aus referenz/beispielseite-kursdetails-anmeldung.html
 * uebernommen (Kurzfakten-Sidebar, Termine-Liste mit Status), eigene
 * "tbs-*"-Klassen statt der Mockup-Klassennamen (Teil 12, Bootstrap-
 * Rueckkehr-Check gilt weiterhin).
 */
.tbs-kurs-header {
	background: linear-gradient(180deg, var(--violet-050) 0%, var(--paper) 78%);
	padding: var(--space-48) 0;
}

/*
 * Kurs-Logo (optionales ACF-Feld "bild", Teil 12.2, bisher nirgends
 * angezeigt - 21.09.2026 ergaenzt). Bewusst klein/dezent (wie ein
 * Marken-Badge vor Eyebrow/Titel), nicht als grosses Hero-Bild - das
 * Logo ist eine Zusatzinfo (welcher Software-Anbieter), nicht der
 * visuelle Hauptfokus der Seite.
 *
 * Live entdeckt: Ein Bildoptimierungs-Plugin (Imagify, laut
 * active_plugins) wandelt das von uns ausgegebene rohe "<img>" serverseitig
 * in "<picture><source type=webp>...<img></picture>" um und verschiebt
 * dabei die Klasse "tbs-kurs-logo" auf das neue AEUSSERE "<picture>" -
 * das eigentliche "<img>" darin blieb dadurch ungestylt und renderte in
 * Originalgroesse (bei medatixx.jpg deutlich zu breit/gross). Deshalb
 * hier auf BEIDE moeglichen Traeger der Klasse angewendet (Selektor fuer
 * die Klasse selbst UND fuer ein "img" darin) - funktioniert dadurch
 * unabhaengig davon, ob die Bildoptimierung greift oder nicht.
 */
.tbs-kurs-logo,
.tbs-kurs-logo img {
	display: block;
	max-height: 40px;
	max-width: 100%;
	width: auto;
	margin-bottom: var(--space-12);
	object-fit: contain;
}

.tbs-kurs-header-eyebrow {
	display: inline-flex;
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--violet-800);
	background: var(--violet-100);
	border: 1px solid var(--violet-150);
	padding: 6px 14px;
	border-radius: 100px;
	margin-bottom: var(--space-16);
}

.tbs-kurs-header h1 {
	font-family: var(--font-head);
	font-size: clamp(26px, 4vw, 36px);
	font-weight: 800;
	line-height: 1.15;
	max-width: 32ch;
	margin: 0 0 var(--space-16);
}

.tbs-kurs-header-lede {
	font-size: 15.5px;
	color: var(--ink-700);
	max-width: 60ch;
}

.tbs-sec-label {
	display: block;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--violet-600);
	margin: var(--space-48) 0 var(--space-16);
}

.tbs-kurs-detail-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-32);
	align-items: start;
	padding-bottom: var(--space-64);
}

/*
 * Layout Option (A) (21.09.2026, ersetzt den vorherigen margin-top-Versatz
 * vollstaendig): Die Sidebar ("Auf einen Blick") soll exakt auf Hoehe des
 * Beschreibungsbeginns stehen, unabhaengig von der Beschreibungslaenge.
 * Der vorherige Ansatz (Beschreibung im separaten ".tbs-kurs-header"-Band,
 * Sidebar per geschaetztem margin-top nachgezogen) konnte das grundsaetzlich
 * nicht robust leisten, weil der Beschreibungsbeginn selbst zwar konstant
 * ist, die Distanz dorthin von der SIDEBAR aus aber mit der
 * Beschreibungslaenge wuchs (belegt: 387px bei kurzer, ~2910px bei sehr
 * langer Beschreibung). Robuste Loesung: Die Beschreibung
 * (".tbs-kurs-header-lede", jetzt zusaetzlich ".tbs-kurs-detail-lede")
 * ist aus dem farbigen Header-Band herausgeloest und bildet jetzt die
 * ERSTE Zeile in genau diesem Grid, direkt neben der Sidebar - dieselbe
 * bereits bewaehrte Zeilen-Technik wie beim "Termine"-Ankerpunkt (siehe
 * Kommentar an .tbs-kurs-detail-label unten), nur eine Ebene hoeher:
 *
 *   Zeile 1: Beschreibung (Spalte 1)      | Sidebar (Spalte 2)
 *   Zeile 2: "Termine"-Label (Spalte 1)   | (leer)
 *   Zeile 3: Termine-Inhalt (Spalte 1)    | (leer)
 *
 * Die Sidebar beginnt dadurch garantiert exakt auf Hoehe von Zeile 1,
 * unabhaengig davon, wie lang die Beschreibung ist - kein geschaetzter
 * Wert mehr noetig. Bewusster Nebeneffekt: Ist die Sidebar hoeher als die
 * Beschreibung (kurze Beschreibung + normal gefuellte Sidebar), waechst
 * Zeile 1 auf die Sidebar-Hoehe, "Termine" beginnt dann entsprechend
 * spaeter als bisher - akzeptiert, da die Alternative (Ueberlappung) klar
 * schlechter waere; live verifiziert an allen 3 Testfaellen. Nur ab der
 * Zwei-Spalten-Breite relevant - bei 1 Spalte (mobil) bleibt die normale
 * Dokumentenreihenfolge (Beschreibung, Label, Termine, Sidebar)
 * unveraendert bestehen (siehe Reihenfolge in single-tbs_kurs.php).
 */
@media (min-width: 960px) {
	.tbs-kurs-detail-grid {
		grid-template-columns: 1.5fr 1fr;
	}
	.tbs-sec-label {
		margin-top: 0;
	}
	.tbs-kurs-detail-lede {
		grid-column: 1;
		grid-row: 1;
	}
	.tbs-kurs-detail-label {
		grid-column: 1;
		grid-row: 2;
	}
	.tbs-kurs-detail-termine {
		grid-column: 1;
		grid-row: 3;
	}
	.tbs-kurs-detail-grid > .tbs-sidebar-stack {
		grid-column: 2;
		grid-row: 1;
	}
}

.tbs-kurstermin-liste {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.tbs-kurstermin-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-16);
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: 14px;
	padding: var(--space-16) var(--space-16);
}

.tbs-kurstermin-row.is-ausgebucht {
	opacity: 0.6;
}

.tbs-kurstermin-row-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}

.tbs-kurstermin-row-datum {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 15px;
	color: var(--ink-900);
}

.tbs-kurstermin-row-sub {
	font-family: var(--font-body);
	font-size: 12.5px;
	color: var(--ink-500);
}

.tbs-kurstermin-status {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 100px;
	white-space: nowrap;
}

.tbs-kurstermin-status-buchbar {
	background: #E7F3EC;
	color: var(--ok);
}

.tbs-kurstermin-status-ausgebucht {
	background: var(--line-soft);
	color: var(--ink-500);
}

.tbs-kurstermin-row-cta {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	color: #fff;
	background: var(--violet-800);
	/* Beruehrungsflaeche mindestens 44 px hoch (Folgeauftrag 187), vorher 37 px */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 18px;
	border-radius: 100px;
	text-decoration: none;
	white-space: nowrap;
}

.tbs-kurstermin-row-cta:hover {
	background: var(--violet-900);
}

.tbs-sidebar-stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.tbs-kurs-facts {
	background: var(--canvas);
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: var(--space-24);
}

.tbs-kurs-facts h4 {
	font-family: var(--font-head);
	font-size: 13.5px;
	font-weight: 700;
	margin: 0 0 var(--space-16);
}

.tbs-fact-row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-16);
	font-family: var(--font-body);
	font-size: 13px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line-soft);
}

.tbs-fact-row:last-child {
	border-bottom: none;
}

.tbs-fact-row .k {
	color: var(--ink-500);
}

.tbs-fact-row .v {
	font-weight: 700;
	text-align: right;
}

/*
 * Meta-Chip-Reihe im Kurs-Header + Seminarkontingent-Box (17.09.2026,
 * Optik-Angleichung an referenz/beispielseite-kursdetails-anmeldung.html
 * auf Stephans Vergleichs-Screenshot hin) - eigene "tbs-*"-Klassen,
 * Kartenoptik/Farben passend zu den bereits etablierten Tokens.
 */
.tbs-kurs-header-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin-top: var(--space-16);
}

.tbs-kurs-header-chip {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--violet-900);
	background: var(--paper);
	border: 1px solid var(--violet-150);
	padding: 7px 14px;
	border-radius: 100px;
}

.tbs-kontingent-box {
	background: var(--violet-900);
	border-radius: 22px;
	padding: var(--space-24);
	color: #fff;
}

/*
 * "Termine ansehen"-Sprung-Button (21.09.2026) - ".tbs-btn" ist
 * "inline-flex" (intrinsische Breite), im Flex-Column-Kontext der Sidebar
 * hier aber bewusst auf volle Breite gezogen, damit er sich optisch wie
 * die beiden Boxen darueber (Auf einen Blick / Seminarkontingent)
 * einreiht statt schmal und mittig zu wirken.
 */
.tbs-sidebar-termine-link {
	width: 100%;
}

.tbs-kontingent-box h4 {
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 700;
	color: var(--violet-150);
	margin: 0 0 var(--space-8);
}

.tbs-kontingent-box p {
	font-family: var(--font-body);
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
	line-height: 1.6;
}

/* ---------- Selbstbedienungs-Stornierung (21.09.2026, Kopfband 22.09.2026) ----------
 * Verlaufs-Band identisch zu ".tbs-anmeldung-header"/".tbs-kurs-header" -
 * damit diese Seite trotz fehlenden Hero-Blocks denselben Seitenanfang wie
 * jede andere Seite zeigt (Design-Parität, siehe tbs_stornierung_header_html()).
 */
.tbs-stornierung-header {
	background: linear-gradient(180deg, var(--violet-050) 0%, var(--paper) 78%);
	padding: var(--space-48) 0 var(--space-32);
}

.tbs-stornierung-header h1 {
	font-family: var(--font-head);
	font-size: 28px;
	color: var(--violet-800);
	margin: var(--space-4) 0 0;
}

.tbs-stornierung {
	padding: var(--space-32) 0 var(--space-64);
	max-width: 640px;
}

/*
 * Kurs/Termin/Teilnehmer als strukturierte Label-Wert-Liste statt loser
 * <p><strong>-Zeilen (22.09.2026 nachgeschaerft) - konsistent mit der
 * Detail-Zeilen-Optik anderswo im Projekt (z. B. Kurstermin-Liste).
 */
.tbs-stornierung-meta {
	display: grid;
	gap: 0;
	margin: 0 0 var(--space-24);
}

.tbs-stornierung-meta > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-16);
	padding: var(--space-8) 0;
	border-bottom: 1px solid var(--line);
}

.tbs-stornierung-meta dt {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-500);
}

.tbs-stornierung-meta dd {
	margin: 0;
	font-family: var(--font-body);
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ink-900);
	text-align: right;
}

.tbs-stornierung-meldung {
	border-radius: 14px;
	padding: var(--space-24);
	border: 1px solid var(--line);
}

.tbs-stornierung-meldung p {
	margin: 0;
	font-family: var(--font-body);
	font-size: 14.5px;
	line-height: 1.6;
}

.tbs-stornierung-meldung.is-erfolg {
	background: rgba(47, 122, 79, 0.08);
	border-color: var(--ok);
	color: var(--ok);
}

.tbs-stornierung-meldung.is-hinweis {
	background: var(--violet-050);
	border-color: var(--violet-300, var(--line));
	color: var(--violet-800);
}

.tbs-stornierung-meldung.is-fehler {
	background: rgba(179, 65, 58, 0.08);
	border-color: var(--error);
	color: var(--error);
}

.tbs-stornierung-box {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: var(--space-32);
}

.tbs-stornierung-box h2 {
	font-family: var(--font-head);
	font-size: 20px;
	margin: 0 0 var(--space-16);
}

.tbs-stornierung-box p {
	font-family: var(--font-body);
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0 0 var(--space-8);
}

.tbs-stornierung-hinweis {
	background: rgba(179, 134, 47, 0.1);
	border-radius: 10px;
	padding: var(--space-16);
	color: var(--warn-text);
	margin-top: var(--space-16) !important;
}

.tbs-stornierung-aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-16);
	margin-top: var(--space-24);
}

.tbs-stornierung-form {
	margin: 0;
}

/*
 * "Angaben bearbeiten"-Ansicht (23.09.2026) - dieselbe Box/Meta-Optik wie
 * oben, ergaenzt um native Formularfelder (erste native <input>-Styles auf
 * dieser Seite - vorher gab es hier nur Buttons). Farb-/Abstands-Werte
 * konsequent aus den bereits etablierten Design-Tokens, keine neuen Werte.
 */
.tbs-bearbeiten-zurueck {
	margin: 0 0 var(--space-16) !important;
}

.tbs-bearbeiten-zurueck a {
	color: var(--violet-800);
	font-size: 14px;
	text-decoration: none;
}

.tbs-bearbeiten-zurueck a:hover {
	text-decoration: underline;
}

.tbs-bearbeiten-abschnitt {
	font-family: var(--font-head);
	font-size: 16px;
	color: var(--ink-900);
	margin: var(--space-24) 0 var(--space-12);
}

.tbs-bearbeiten-feldgruppe {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-16);
}

.tbs-bearbeiten-feld {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	flex: 1 1 200px;
}

.tbs-bearbeiten-feld span {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-500);
}

.tbs-bearbeiten-feld input,
.tbs-bearbeiten-feld select {
	font-family: var(--font-body);
	font-size: 14.5px;
	color: var(--ink-900);
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	padding: var(--space-8) var(--space-12);
	background: #fff;
}

.tbs-bearbeiten-feld input:focus,
.tbs-bearbeiten-feld select:focus {
	outline: 2px solid var(--violet-300, var(--violet-800));
	outline-offset: 1px;
}

.tbs-teilnehmer-bearbeiten-liste {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.tbs-teilnehmer-bearbeiten-zeile {
	padding-bottom: var(--space-16);
	border-bottom: 1px solid var(--line);
}

.tbs-teilnehmer-bearbeiten-zeile:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.tbs-teilnehmer-entfernen-form {
	margin: var(--space-8) 0 0;
}

.tbs-teilnehmer-entfernen-btn {
	font-size: 13px;
	padding: var(--space-4) var(--space-12);
}

.tbs-bearbeiten-speichern-btn {
	margin-top: var(--space-24);
}

/* ---------------------------------------------------------------------
 * KI-Kennzeichnung (29.09.2026, EU-KI-Verordnung Artikel 50)
 * Ausgabe zentral ueber tbs_ki_kennzeichnung_html(), siehe
 * inc/ki-kennzeichnung.php. Zwei Varianten je nach Layoutrisiko der
 * jeweiligen Bildstelle (Bestandsaufnahme Runde 1):
 * A = eigene Zeile unter dem Bild, in normaler Textfarbe - fuer Stellen
 *     mit Freiraum (Hero, CTA, Bild-Text, Case-Study, Cross-Sell, das
 *     grosse "featured"-Referenzbild).
 * B = solider, dezenter Chip in der Bildecke, unabhaengig von der
 *     Bildhelligkeit garantiert lesbar (dunkler Chip, keine Transparenz)
 *     - fuer Karten-Thumbnails, runde Portraits und die Standort-Karte,
 *     wo eine echte Bildunterschrift das Karten-/Rasterraster verzerren
 *     wuerde. Positionierung ueber :has() auf dem jeweiligen Karten-
 *     Wrapper (keine zusaetzliche Markup-Aenderung an den Bloecken noetig
 *     ausser dem Einzeiler direkt nach dem <img>).
 * ------------------------------------------------------------------- */

.tbs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tbs-ki-hinweis-a {
	display: block;
	margin-top: var(--space-8);
	font-family: var(--font-body);
	font-size: 12.5px;
	color: var(--ink-500);
}

.tbs-ki-hinweis-b {
	position: absolute;
	top: var(--space-8);
	right: var(--space-8);
	display: inline-block;
	padding: 2px var(--space-8);
	background: var(--ink-900);
	color: var(--paper);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	border-radius: 999px;
	pointer-events: none;
}

/* Positionierungs-Kontext je Karten-/Portrait-Wrapper - siehe Kommentar
   oben. Nur "position: relative", kein visueller Effekt sonst. */
.tbs-karte:has(.tbs-ki-hinweis-b),
.tbs-standort-card:has(.tbs-ki-hinweis-b) {
	position: relative;
}

.tbs-person-card:has(.tbs-ki-hinweis-b) {
	position: relative;
}

/* Runde Portraits (72px, .tbs-person-card hat eigenes Padding): der Chip
   sitzt oben links auf dem Foto statt oben rechts am Kartenrand - bei
   72px Fotogroesse ist rechts kein Platz neben dem folgenden Namenstext. */
.tbs-person-card > .tbs-ki-hinweis-b {
	top: var(--space-16);
	left: var(--space-16);
	right: auto;
	font-size: 9px;
	padding: 1px 6px;
}

/* Referenzen-Block, "cards"-Layout (kleines rundes Testimonial-Foto,
   100px) - .tbs-testimonial-foot ist der direkte, padding-lose
   Flex-Eltern des Fotos (das Padding sitzt aussen an .tbs-testimonial-card). */
.tbs-testimonial-foot:has(.tbs-ki-hinweis-b) {
	position: relative;
}

.tbs-testimonial-foot > .tbs-ki-hinweis-b {
	top: 0;
	left: 0;
	right: auto;
	font-size: 9px;
	padding: 1px 6px;
}

/* Autoren-Box (rundes Foto, 56px, eigenes Padding var(--space-24) direkt
   am Flex-Container .tbs-block-autoren-box - gleiches Prinzip wie
   .tbs-person-card oben, nur andere Padding-Groesse). */
.tbs-block-autoren-box:has(.tbs-ki-hinweis-b) {
	position: relative;
}

.tbs-block-autoren-box > .tbs-ki-hinweis-b {
	top: var(--space-24);
	left: var(--space-24);
	right: auto;
	font-size: 9px;
	padding: 1px 6px;
}

/*
 * ---------- Ablauf-Schaubild (Folgeauftrag 92) ----------
 * Nummerierte Liste (<ol role="list">) aus 3 bis 5 Karten mit Pfeilen dazwischen. Nur Werte aus dem Styleguide (--space-*,
 * --radius-m, --shadow-2, Violett- und Ink-Variablen) und die Breakpoints 640 und 1160 px:
 *   unter 640 px   einspaltig, Pfeil nach unten zwischen den Karten
 *   ab 640 px      zweispaltig, ohne Pfeile (die Reihenfolge steht in der nummerierten Liste)
 *   ab 1160 px     alle Schritte in einer Reihe, Pfeil waagerecht in der Luecke
 * Bei 1160 px (Inhaltsbreite 1112 px) ist eine Karte rund 197 px breit (Text 157 px): laengstes Wort "Strukturierung" passt,
 * der Text hat hoechstens fuenf Zeilen. Karten einer Reihe gleich hoch (Grid, stretch). Die Karten sind keine Links.
 */
.tbs-block-ablauf {
	padding: var(--space-64) 0;
}

.tbs-ablauf {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-32);
}

.tbs-ablauf-schritt {
	position: relative;
	display: flex;
	margin: 0;
}

.tbs-ablauf-karte {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 20px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-m);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.tbs-ablauf-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--space-16);
	border-radius: 50%;
	background: var(--violet-100);
	color: var(--violet-800);
	transition: background-color 180ms ease, color 180ms ease;
}

.tbs-ablauf-icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

.tbs-ablauf-karte h3 {
	margin: 0 0 var(--space-8);
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 16.5px;
	line-height: 1.3;
	color: var(--ink-900);
	text-wrap: balance;
}

.tbs-ablauf-karte p {
	margin: 0;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 19px;
	color: var(--ink-700);
}

/* Hervorgehobene Karte */
.tbs-ablauf-schritt--aktiv .tbs-ablauf-karte {
	background: var(--violet-800);
	border-color: var(--violet-800);
}

.tbs-ablauf-schritt--aktiv .tbs-ablauf-icon {
	background: var(--violet-600);
	color: #fff;
}

.tbs-ablauf-schritt--aktiv .tbs-ablauf-karte h3 {
	color: #fff;
}

.tbs-ablauf-schritt--aktiv .tbs-ablauf-karte p {
	color: var(--violet-150);
}

/* Pfeile: rein dekorativ, Linie mit Spitze in --violet-300, 2 px (im SVG); einspaltig nach unten, mittig in der Luecke */
.tbs-ablauf-pfeil {
	position: absolute;
	left: 50%;
	bottom: calc(-1 * var(--space-32));
	width: var(--space-32);
	height: var(--space-32);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--violet-300);
	transform: translateX(-50%) rotate(90deg);
	pointer-events: none;
}

@media (min-width: 640px) {
	.tbs-ablauf {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-24);
	}

	.tbs-ablauf-pfeil {
		display: none;
	}
}

@media (min-width: 1160px) {
	.tbs-ablauf {
		gap: var(--space-32);
	}

	.tbs-ablauf--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tbs-ablauf--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.tbs-ablauf--5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.tbs-ablauf-pfeil {
		display: flex;
		top: 50%;
		bottom: auto;
		left: auto;
		right: calc(-1 * var(--space-32));
		transform: translateY(-50%);
	}
}

/* Hover nur bei Geraeten mit Maus: 4 px nach oben, Schatten, Icon-Kreis dunkel. Karten sind keine Links (kein Fokus). */
@media (hover: hover) {
	.tbs-ablauf-karte:hover {
		transform: translateY(-4px);
		box-shadow: var(--shadow-2);
	}

	.tbs-ablauf-karte:hover .tbs-ablauf-icon {
		background: var(--violet-800);
		color: #fff;
	}

	.tbs-ablauf-schritt--aktiv .tbs-ablauf-karte:hover .tbs-ablauf-icon {
		background: var(--violet-900);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tbs-ablauf-karte {
		transition: box-shadow 180ms ease;
	}

	.tbs-ablauf-karte:hover {
		transform: none;
	}
}

/*
 * ---------- Nutzenband (Icon-Grid) und Fazit-Band (Intro), Folgeauftrag 93 ----------
 * Beide haengen in der Hintergrundfolge am vorigen Block (inc/bg-alternation.php, tbs_bg_attaches_to_previous): derselbe Abschnitt,
 * 32 px Abstand zum Block davor, kein Farbwechsel. Das Polster des Blocks davor entfaellt nach unten, der angehaengte Block
 * bringt oben 32 px mit; der letzte Block des Abschnitts behaelt unten den normalen Abschnittsabstand.
 */
section:has(+ .tbs-block-icon-grid--nutzenband),
section:has(+ .tbs-block-icon-grid--soc),
section:has(+ .tbs-block-intro--fazit) {
	padding-bottom: 0;
}

section + .tbs-block-icon-grid--nutzenband,
section + .tbs-block-icon-grid--soc,
section + .tbs-block-intro--fazit {
	padding-top: var(--space-32);
}

.tbs-block-icon-grid--nutzenband:has(+ .tbs-block-intro--fazit),
.tbs-block-icon-grid--soc:has(+ .tbs-block-intro--fazit) {
	padding-bottom: 0;
}

/* Nutzenband: Band violett getoent, Eintraege ohne Karte. Unter 640 px eine Spalte, bis 1159 px zwei Spalten (waagerechte Linien), ab 1160 px eine Reihe mit senkrechten Linien. */
.tbs-nutzen {
	padding: 8px 28px;
	background: var(--violet-050);
	border: 1px solid var(--violet-150);
	border-radius: var(--radius-l);
}

.tbs-block-icon-grid--nutzenband .tbs-icon-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin-top: 0;
	padding: 0;
}

.tbs-block-icon-grid--nutzenband .tbs-icon-grid-item {
	position: relative;
	padding: var(--space-16) 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.tbs-block-icon-grid--nutzenband .tbs-icon-grid-item + .tbs-icon-grid-item {
	border-top: 1px solid var(--violet-150);
}

.tbs-block-icon-grid--nutzenband .tbs-icon-grid-icon--svg {
	display: flex;
	width: 28px;
	height: 28px;
	margin: 0 0 var(--space-12);
	color: var(--violet-800);
}

.tbs-block-icon-grid--nutzenband .tbs-icon-grid-icon--svg svg {
	width: 28px;
	height: 28px;
	display: block;
}

.tbs-block-icon-grid--nutzenband .tbs-icon-grid-item h3 {
	margin: 0 0 var(--space-8);
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 15px;
	line-height: 1.3;
	color: var(--ink-900);
}

.tbs-block-icon-grid--nutzenband .tbs-icon-grid-item p {
	margin: 0;
	font-family: var(--font-body);
	font-size: 12.5px;
	line-height: 18px;
	color: var(--ink-700);
}

@media (min-width: 640px) {
	.tbs-block-icon-grid--nutzenband .tbs-icon-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-32);
	}

	.tbs-block-icon-grid--nutzenband .tbs-icon-grid-item:nth-child(-n + 2) {
		border-top: 0;
	}
}

@media (min-width: 1160px) {
	.tbs-block-icon-grid--nutzenband .tbs-icon-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		column-gap: 0;
	}

	.tbs-block-icon-grid--nutzenband .tbs-icon-grid-item {
		padding: var(--space-16) 20px;
	}

	.tbs-block-icon-grid--nutzenband .tbs-icon-grid-item + .tbs-icon-grid-item {
		border-top: 0;
	}

	.tbs-block-icon-grid--nutzenband .tbs-icon-grid-item + .tbs-icon-grid-item::before {
		content: "";
		position: absolute;
		top: 2px;
		bottom: 2px;
		left: 0;
		width: 1px;
		background: var(--violet-150);
	}
}

/* Fazit-Band: dunkles Band ueber die Inhaltsbreite, Icon im Kreis links, Ueberschrift und Text daneben, Inhalt vertikal mittig */
.tbs-fazit {
	display: flex;
	align-items: center;
	gap: var(--space-24);
	min-height: 84px;
	padding: 22px 32px;
	background: var(--violet-900);
	border-radius: var(--radius-l);
}

.tbs-fazit-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--violet-800);
	color: #fff;
}

.tbs-fazit-icon svg {
	width: 26px;
	height: 26px;
	display: block;
}

.tbs-fazit-text {
	min-width: 0;
}

.tbs-block-intro--fazit .tbs-fazit-text h2 {
	margin: 0 0 var(--space-4);
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 19.5px;
	line-height: 1.25;
	color: #fff;
}

.tbs-block-intro--fazit .tbs-fazit-text p {
	margin: 0;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.5;
	color: var(--violet-150);
}

@media (max-width: 639px) {
	.tbs-fazit {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-16);
		padding: 22px var(--space-24);
	}
}

/*
 * ---------- Folgeauftrag 94: Kicker im Nutzenband, SOC-Band, Ablauf-Schaubild mit sechs Schritten ----------
 */

/* Kicker (optional): kleiner Text oben links im Nutzenband */
.tbs-nutzen-kicker {
	margin: var(--space-16) 0 0;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--violet-600);
}

/* Nutzenband in einer Reihe: Titel, Text und Icon der Eintraege stehen auf gleicher Hoehe (Subgrid), auch wenn eine Ueberschrift zweizeilig ist */
@media (min-width: 1160px) {
	.tbs-block-icon-grid--nutzenband .tbs-icon-grid {
		grid-template-rows: auto auto auto;
	}

	.tbs-block-icon-grid--nutzenband .tbs-icon-grid-item {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
		align-content: start;
	}

	.tbs-block-icon-grid--nutzenband .tbs-icon-grid-icon--svg {
		grid-row: 1;
	}

	.tbs-block-icon-grid--nutzenband .tbs-icon-grid-item h3 {
		grid-row: 2;
	}

	.tbs-block-icon-grid--nutzenband .tbs-icon-grid-item p {
		grid-row: 3;
	}
}

/*
 * SOC-Band: Kopfzeile (violetter Balken, oben abgerundet) ueber einem weissen Feld (unten abgerundet), darin die Eintraege mit Icon
 * links (32 px) und Titel/Text rechts. Ab 1160 px eine Reihe mit senkrechten Linien (bei 1160 px braucht der Text hoechstens 5 Zeilen);
 * 640 bis 1159 px zwei Spalten, darunter eine Spalte, ohne Linien. Kein Hover, keine Links. Haengt am vorigen Block.
 */
.tbs-soc-kopf {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: var(--space-12) var(--space-24);
	background: var(--violet-800);
	border-radius: var(--radius-l) var(--radius-l) 0 0;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 16px;
	line-height: 1.3;
	text-align: center;
	color: #fff;
}

.tbs-block-icon-grid--soc .tbs-icon-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-24);
	margin-top: 0;
	padding: var(--space-24);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
}

.tbs-soc-kopf + .tbs-icon-grid {
	border-top: 0;
	border-radius: 0 0 var(--radius-l) var(--radius-l);
}

.tbs-block-icon-grid--soc .tbs-icon-grid-item {
	position: relative;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	column-gap: var(--space-12);
	align-items: start;
	align-content: start;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.tbs-block-icon-grid--soc .tbs-icon-grid-icon--svg {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: flex;
	width: 32px;
	height: 32px;
	margin: 0;
	color: var(--violet-800);
}

.tbs-block-icon-grid--soc .tbs-icon-grid-icon--svg svg {
	width: 32px;
	height: 32px;
	display: block;
}

.tbs-block-icon-grid--soc .tbs-icon-grid-item h3 {
	grid-column: 2;
	grid-row: 1;
	margin: 0 0 var(--space-8);
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 14px;
	line-height: 1.3;
	color: var(--ink-900);
}

.tbs-block-icon-grid--soc .tbs-icon-grid-item p {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	font-family: var(--font-body);
	font-size: 12.5px;
	line-height: 18px;
	color: var(--ink-700);
	hyphens: auto;
}

@media (min-width: 640px) {
	.tbs-block-icon-grid--soc .tbs-icon-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-32);
	}

	/* Platz fuer zwei Titelzeilen: Textbeginn aller Eintraege auf gleicher Hoehe */
	.tbs-block-icon-grid--soc .tbs-icon-grid-item h3 {
		min-height: calc(2 * 1.3em);
	}
}

@media (min-width: 1160px) {
	.tbs-block-icon-grid--soc .tbs-icon-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		column-gap: 0;
		gap: 0;
		padding: var(--space-24) 0;
	}

	.tbs-block-icon-grid--soc .tbs-icon-grid-item {
		padding: 0 var(--space-8) 0 20px;
	}

	.tbs-block-icon-grid--soc .tbs-icon-grid-item + .tbs-icon-grid-item::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 1px;
		background: var(--violet-150);
	}
}

/*
 * Ablauf-Schaubild mit sechs Schritten (nur --6; die Darstellung mit bis zu fuenf Schritten bleibt unveraendert):
 * ab 640 px zwei Spalten, ab 960 px drei Spalten (Text hoechstens 6 Zeilen), ab 1160 px eine Reihe mit kleineren Karten (Innenabstand
 * 14 px, Ueberschrift 14,5 px, Text 12,5 px/18 px) und schmalen Pfeilen. Ab 640 px zwei Zeilen Platz fuer die Ueberschrift, damit der
 * Textbeginn aller Karten einer Reihe auf gleicher Hoehe steht.
 */
@media (min-width: 640px) {
	.tbs-ablauf--6 .tbs-ablauf-karte h3 {
		min-height: calc(2 * 1.3em);
	}
}

@media (min-width: 960px) {
	.tbs-ablauf--6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1160px) {
	.tbs-ablauf--6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: var(--space-16);
	}

	.tbs-ablauf--6 .tbs-ablauf-karte {
		padding: 14px;
	}

	.tbs-ablauf--6 .tbs-ablauf-karte h3 {
		font-size: 14.5px;
	}

	.tbs-ablauf--6 .tbs-ablauf-karte p {
		font-size: 12.5px;
		line-height: 18px;
	}

	.tbs-ablauf--6 .tbs-ablauf-pfeil {
		right: calc(-1 * var(--space-16));
		width: var(--space-16);
	}

	.tbs-ablauf--6 .tbs-ablauf-pfeil svg {
		width: 14px;
		height: auto;
	}
}

/*
 * ---------- Folgeauftrag 97: Fazit-Band mit Kennzahlen und Fussnote ----------
 * Nur wenn der Intro-Block im Fazit-Band Kennzahlen hat (.tbs-fazit--kennzahlen); ohne Kennzahlen bleibt das Fazit-Band unveraendert.
 * Ab 1160 px: Icon, Text und rechts die Kennzahlen (je 160 px, durch senkrechte Linien getrennt), die Fussnote unten rechts.
 * 640 bis 1159 px: Icon und Text, darunter die Kennzahlen in einer Reihe (gleich breit, Linien), darunter die Fussnote (rechtsbuendig).
 * Unter 640 px: alles untereinander, linksbuendig, ohne senkrechte Linien.
 */
.tbs-fazit-kennzahlen {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tbs-fazit-zahl {
	display: block;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 26px;
	line-height: 1.2;
	color: #fff;
}

.tbs-fazit-label {
	display: block;
	margin-top: var(--space-4);
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 15px;
	color: var(--violet-150);
}

.tbs-block-intro--fazit .tbs-fazit-fussnote {
	width: 100%;
	margin: calc(-1 * var(--space-4)) 0 0;
	font-family: var(--font-body);
	font-size: 10.5px;
	line-height: 1.4;
	color: var(--violet-300);
}

@media (min-width: 640px) {
	.tbs-fazit--kennzahlen {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr);
		column-gap: var(--space-24);
		row-gap: var(--space-16);
		align-items: center;
	}

	.tbs-fazit--ohne-icon {
		grid-template-columns: minmax(0, 1fr);
	}

	.tbs-fazit--kennzahlen .tbs-fazit-kennzahlen {
		grid-column: 1 / -1;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 0;
	}

	.tbs-fazit-kennzahlen li {
		padding: 0 var(--space-12);
		text-align: center;
	}

	.tbs-fazit-kennzahlen li + li {
		border-left: 1px solid var(--violet-600);
	}

	.tbs-fazit--kennzahlen .tbs-fazit-fussnote {
		grid-column: 1 / -1;
		text-align: right;
	}
}

@media (min-width: 1160px) {
	.tbs-fazit--kennzahlen {
		grid-template-columns: 44px minmax(0, 1fr) auto;
		row-gap: var(--space-8);
	}

	.tbs-fazit--ohne-icon {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.tbs-fazit--kennzahlen .tbs-fazit-kennzahlen {
		grid-column: auto;
		grid-auto-columns: 160px;
		width: auto;
		margin-left: var(--space-24);
	}
}

/*
 * ---------- Folgeauftrag 106: Intro "Kopfband" und Karten "Bereichskarte" (Schaubild der Startseite) ----------
 * Kopfband: dunkles Band (Violett 800, wie der Balken im SOC-Band; bis Folgeauftrag 106 Violett 900) mit weissem Icon links (28 px, ohne Kreis) und einer Ueberschrift (Manrope 800, 17 px, weiss),
 * Mindesthoehe 64 px. Die Bereichskarten haengen mit 32 px Abstand am Kopfband (derselbe Abschnitt, siehe tbs_bg_attaches_to_previous()).
 * Bereichskarte: weisse Karte mit Rand 1 px --line und Radius 14 px, Innenabstand 20 px. Kopfzeile mit Icon im Kreis (44 px, --violet-100,
 * Icon --violet-800, 24 px) neben dem Titel, darunter die Unterzeile und die Haken-Liste (Haken 15 px, --violet-600). Unterzeile und Liste
 * beginnen in einer Reihe auf gleicher Hoehe (Subgrid). Ab 1160 px vier Karten je Reihe (bei sieben Karten 4 + 3), ab 640 px zwei, darunter eine.
 */
section:has(+ .tbs-block-karten--bereich) {
	padding-bottom: 0;
}

section + .tbs-block-karten--bereich,
.tbs-block-intro--kopfband + .tbs-block-karten--bereich {
	padding-top: var(--space-32);
}

.tbs-kopfband {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	min-height: 64px;
	padding: var(--space-16) 28px;
	background: var(--violet-800);
	border-radius: var(--radius-l);
}

.tbs-kopfband-icon {
	flex: none;
	display: flex;
	color: #fff;
}

.tbs-kopfband-icon svg {
	width: 28px;
	height: 28px;
	display: block;
}

.tbs-block-intro--kopfband .tbs-kopfband-titel {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 17px;
	line-height: 1.3;
	color: #fff;
}

.tbs-karten-grid--bereich {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-content: stretch;
	gap: var(--space-24);
	margin-top: 0;
}

.tbs-block-karten--bereich h2 {
	margin-bottom: var(--space-24);
}

.tbs-karte--bereich {
	max-width: none;
	flex: none;
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
	row-gap: 0;
	align-content: start;
	padding: 20px;
	background: var(--paper);
}

.tbs-karte-kopf {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: var(--space-16);
}

.tbs-karte-kreis {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--violet-100);
	color: var(--violet-800);
}

.tbs-karte-kreis svg {
	width: 24px;
	height: 24px;
	display: block;
}

.tbs-karte--bereich h3 {
	margin: 0;
	min-width: 0;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 15.5px;
	line-height: 1.25;
	color: var(--ink-900);
	hyphens: manual;
	overflow-wrap: anywhere;
}

.tbs-karte-unterzeile {
	display: block;
	margin: 0 0 var(--space-12);
	font-family: var(--font-body);
	font-size: 12.5px;
	line-height: 18px;
	color: var(--ink-700);
}

.tbs-karte-haken {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tbs-karte-haken li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-family: var(--font-body);
	font-size: 12.5px;
	line-height: 18px;
	color: var(--ink-900);
}

.tbs-karte-haken-icon {
	flex: none;
	width: 15px;
	height: 15px;
	margin-top: 1.5px;
	color: var(--violet-600);
}

@media (min-width: 640px) {
	.tbs-karten-grid--bereich {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1160px) {
	.tbs-karten-grid--bereich {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.tbs-karten-grid--bereich .tbs-karte--bereich {
		grid-column: span 3;
	}

	.tbs-karten-grid--n7 .tbs-karte--bereich:nth-child(n + 5) {
		grid-column: span 4;
	}
}

/* Folgeauftrag 108: Fazit-Band ohne Kennzahlen mit Fussnote = eine Merkmal-Zeile unter dem Text (Inter 12,5 px, 600, --violet-300) */
.tbs-block-intro--fazit .tbs-fazit-text p.tbs-fazit-zeile {
	margin: var(--space-12) 0 0;
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--violet-300);
}

/*
 * ---------- Auftrag 121: Schaubild-Bloecke im Beitragstext ----------
 * Die Spalte des Beitragstextes ist ab 1160 px nur rund 830 px breit (Inhaltsverzeichnis links); die Reihen-Darstellungen, die ab 1160 px
 * des Fensters gelten, sind darin zu eng (Woerter wuerden mitten im Wort brechen). Deshalb im Beitrag:
 * - Ablauf-Schaubild mit fuenf Schritten: drei Spalten (3 + 2) ohne Pfeile, wie in der mittleren Breite.
 * - Nutzenband mit fuenf oder sechs Eintraegen: drei Spalten in zwei Reihen mit waagerechter Linie, statt einer Reihe.
 * Ablauf mit drei oder vier Schritten und Nutzenband mit bis zu vier Eintraegen bleiben unveraendert.
 */
@media (min-width: 1160px) {
	.tbs-article-content .tbs-ablauf--5 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-24);
	}

	.tbs-article-content .tbs-ablauf--5 .tbs-ablauf-pfeil {
		display: none;
	}

	.tbs-article-content .tbs-block-icon-grid--nutzenband .tbs-icon-grid:has(> :nth-child(5)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-flow: row;
		grid-auto-columns: auto;
		column-gap: var(--space-32);
	}

	.tbs-article-content .tbs-block-icon-grid--nutzenband .tbs-icon-grid:has(> :nth-child(5)) .tbs-icon-grid-item {
		display: block;
		grid-row: auto;
		padding: var(--space-16) 0;
		border-top: 1px solid var(--violet-150);
	}

	.tbs-article-content .tbs-block-icon-grid--nutzenband .tbs-icon-grid:has(> :nth-child(5)) .tbs-icon-grid-item:nth-child(-n + 3) {
		border-top: 0;
	}

	.tbs-article-content .tbs-block-icon-grid--nutzenband .tbs-icon-grid:has(> :nth-child(5)) .tbs-icon-grid-item + .tbs-icon-grid-item::before {
		content: none;
	}

	.tbs-article-content .tbs-block-icon-grid--nutzenband .tbs-icon-grid:has(> :nth-child(5)) :is(.tbs-icon-grid-icon--svg, h3, p) {
		grid-row: auto;
	}
}

/*
 * ---------- Auftrag 122: Hero mit ruhiger Bewegung (Option "Bewegung", Klasse .tbs-hero--bewegung) ----------
 * Nur CSS, kein Skript. Das Bild liegt in .tbs-hero-visual (overflow hidden, Radius 22 px); nur das Bild darin zoomt sehr langsam
 * und driftet (14 s, ease-in-out, hin und zurueck, endlos), nur ab 768 px. transform veraendert das Layout nicht (kein Versatz),
 * das Bild bleibt das erste sichtbare Bild und wird normal geladen. Die Ueberschrift blendet nur ueber die Deckkraft ein (ohne Bewegung,
 * Auftrag 158); Unterzeile und Button blenden einmal ein (1,05 s, 10 px von unten) und bleiben danach sichtbar.
 * Ohne Animationsunterstuetzung sind alle drei sofort sichtbar. Bei "Bewegung reduzieren" (prefers-reduced-motion) gibt es keine Animation.
 *
 * Auftrag 153 (20.10.2026): Einblendung ruhiger, Dauer und Staffelung auf das 1,5-Fache (vorher 0,7 s und 0,3 s Abstand; Start nach 0,3 s
 * unveraendert). Die Zeitwerte stehen in den Variablen unten und lassen sich dort an einer Stelle drehen.
 *
 * Auftrag 158 (20.10.2026): Auch die Ueberschrift (H1) blendet ein, nur Deckkraft, keine Bewegung. Reihenfolge: Ueberschrift ab 0 s, Unterzeile
 * nach einer Staffel (0,45 s), Button nach zwei Staffeln (0,9 s); alles voll sichtbar nach 1,95 s. --hero-anim-start ist jetzt der Start der
 * ganzen Folge (= Start der Ueberschrift; vorher 0,3 s Verzoegerung bis zur Unterzeile). Die Ueberschrift behaelt im Normalzustand Deckkraft 1
 * (Fuellmodus "backwards": nach dem Ende gilt der normale Wert, sie bleibt nie unsichtbar).
 */
.tbs-hero--bewegung {
	--hero-anim-dauer: 1.05s; /* Dauer der Einblendung je Element (vorher 0,7 s) */
	--hero-anim-start: 0s; /* Start der Folge = Start der Ueberschrift (vorher 0,3 s bis zur Unterzeile) */
	--hero-anim-staffel: 0.45s; /* Abstand zwischen Ueberschrift, Unterzeile und Button (vorher 0,3 s zwischen Unterzeile und Button) */
	--hero-anim-funktion: ease-out; /* Zeitfunktion (unveraendert) */
	--hero-anim-weg: 10px; /* Strecke von unten (unveraendert) */
	--hero-drift-dauer: 14s; /* Zoom und Drift des Bildes, ab 768 px (unveraendert) */
}

.tbs-hero--bewegung .tbs-hero-visual {
	overflow: hidden;
	border-radius: var(--radius-l);
}

.tbs-hero--bewegung .tbs-hero-visual img {
	border-radius: 0;
}

@keyframes tbs-hero-ein {
	from {
		opacity: 0;
		transform: translateY(var(--hero-anim-weg, 10px));
	}

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

@keyframes tbs-hero-blende {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes tbs-hero-drift {
	from {
		transform: scale(1) translate(0, 0);
	}

	to {
		transform: scale(1.07) translate(-1.5%, 1%);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.tbs-hero--bewegung .tbs-hero-text h1 {
		animation: tbs-hero-blende var(--hero-anim-dauer, 1.05s) var(--hero-anim-funktion, ease-out) var(--hero-anim-start, 0s) backwards;
	}

	.tbs-hero--bewegung .tbs-hero-lede {
		animation: tbs-hero-ein var(--hero-anim-dauer, 1.05s) var(--hero-anim-funktion, ease-out) calc(var(--hero-anim-start, 0s) + var(--hero-anim-staffel, 0.45s)) both;
	}

	.tbs-hero--bewegung .tbs-hero-actions {
		animation: tbs-hero-ein var(--hero-anim-dauer, 1.05s) var(--hero-anim-funktion, ease-out) calc(var(--hero-anim-start, 0s) + 2 * var(--hero-anim-staffel, 0.45s)) both;
	}
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
	.tbs-hero--bewegung .tbs-hero-visual img {
		transform-origin: 60% 50%;
		animation: tbs-hero-drift var(--hero-drift-dauer, 14s) ease-in-out infinite alternate;
		will-change: transform;
	}
}

/*
 * ---------- Auftrag 128: Ablauf-Schaubild mit sechs Schritten im Beitragstext ----------
 * Wie bei fuenf Schritten (Auftrag 121): Die Beitragsspalte ist ab 1160 px nur rund 830 px breit, sechs Karten in einer Reihe waeren zu eng.
 * Im Beitrag stehen sechs Schritte deshalb in drei Spalten (3 + 3), ohne Pfeile, mit den normalen Kartenmassen (Innenabstand 20 px,
 * Ueberschrift 16,5 px, Text 13 px/19 px).
 */
@media (min-width: 1160px) {
	.tbs-article-content .tbs-ablauf--6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-24);
	}

	.tbs-article-content .tbs-ablauf--6 .tbs-ablauf-karte {
		padding: 20px;
	}

	.tbs-article-content .tbs-ablauf--6 .tbs-ablauf-karte h3 {
		font-size: 16.5px;
	}

	.tbs-article-content .tbs-ablauf--6 .tbs-ablauf-karte p {
		font-size: 13px;
		line-height: 19px;
	}

	.tbs-article-content .tbs-ablauf--6 .tbs-ablauf-pfeil {
		display: none;
	}
}

/*
 * ---------- Auftrag 132: Nutzenband mit sechs oder mehr Eintraegen auf Seiten (nicht im Beitrag) ----------
 * Ab 1160 px steht das Nutzenband sonst in einer Reihe; bei sechs bis zehn Eintraegen werden die Spalten in der Inhaltsbreite der Seite
 * (rund 1110 px) zu schmal, Woerter laufen ineinander (Fund: Frauenarztpraxen, sieben Lebensphasen und acht Funktionen). Deshalb bei sechs oder
 * mehr Eintraegen vier Spalten in mehreren Reihen, mit waagerechter Linie zwischen den Reihen, wie die drei Spalten im Beitrag.
 * Bis vier bzw. fuenf Eintraege und der Beitrag (eigene Regel oben) bleiben unveraendert.
 */
@media (min-width: 1160px) {
	.tbs-block-icon-grid--nutzenband .tbs-icon-grid:has(> :nth-child(6)) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-flow: row;
		grid-auto-columns: auto;
		column-gap: var(--space-32);
	}

	.tbs-block-icon-grid--nutzenband .tbs-icon-grid:has(> :nth-child(6)) .tbs-icon-grid-item {
		padding: var(--space-16) 0;
		border-top: 1px solid var(--violet-150);
	}

	.tbs-block-icon-grid--nutzenband .tbs-icon-grid:has(> :nth-child(6)) .tbs-icon-grid-item:nth-child(-n + 4) {
		border-top: 0;
	}

	.tbs-block-icon-grid--nutzenband .tbs-icon-grid:has(> :nth-child(6)) .tbs-icon-grid-item + .tbs-icon-grid-item::before {
		content: none;
	}
}

/*
 * ---------- Auftrag 138: Karten in zwei Spalten (Feld "Spalten" = "Zwei Spalten") ----------
 * Vier Karten stehen sonst ab ca. 1100 px als 3 + 1 (Flex-Zeilen, Karten bis 350 px). Mit der Option halten zwei Karten je Zeile
 * (2 x 350 px plus Abstand), die Reihe bleibt mittig; ab 768 px zwei Spalten, darunter eine.
 */
.tbs-karten-grid--zwei {
	max-width: calc(2 * 350px + var(--space-24));
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Veranstalter-Kennzeichen und Akademie-Standort (Folgeauftrag 191) ----------
 * Textabzeichen "Veranstalter: tbs" bzw. "Veranstalter: medatixx-akademie" (inc/seminarverwaltung-veranstalter.php). Farben und Abstaende aus
 * den vorhandenen Werten (Chip-Optik wie .tbs-chip / .tbs-kurs-header-chip, Flaeche --violet-050, Rand --violet-300). Mit Logo (Optionsseite):
 * Beschriftung, Logo mit fester Hoehe 20 px (nicht gestreckt) und Name. "max-width: 100%" und Umbruch verhindern Ueberlauf auf schmalen Handys.
 */
.tbs-veranstalter {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px 6px;
	max-width: 100%;
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--violet-900);
	background: var(--violet-050);
	border: 1px solid var(--violet-300);
	padding: 5px 12px;
	border-radius: 100px;
}

.tbs-veranstalter-label {
	color: var(--ink-700);
}

.tbs-veranstalter-name {
	font-weight: 700;
	overflow-wrap: anywhere;
}

.tbs-veranstalter-logo {
	display: block;
	height: 20px;
	width: auto;
	max-width: 120px;
	object-fit: contain;
}

/* Kursdetail: wie die Chips im Kopf (.tbs-kurs-header-chip) */
.tbs-veranstalter-kopf {
	font-size: 12.5px;
	padding: 7px 14px;
}

/* Anmeldeseite: eine Zeile unter dem Kurstitel */
.tbs-anmeldung-veranstalter {
	margin-top: var(--space-8);
}

/* Schulungsuebersicht: Hinweis mit Akademie-Standort-Logo unter der Einleitung (nur mit Logo) */
.tbs-akademie-standort {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-8) var(--space-12);
	margin-top: var(--space-16);
	font-family: var(--font-body);
	font-size: 13.5px;
	color: var(--ink-700);
}

.tbs-akademie-standort-logo {
	display: block;
	height: 32px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
}