/*
Theme Name:        tbs Theme
Theme URI:         https://tbs.de
Author:            tbs
Description:       Individuell entwickeltes, klassisches PHP-WordPress-Theme fuer tbs.de (Praxissoftware/IT-Dienstleister fuer Arztpraxen und MVZ). Kein Page-Builder, komponentenbasierter Aufbau. Siehe referenz/TBS-Knowledge-Base-und-Leitfaden.md.
Version:           0.4.162
Requires at least: 6.4
Requires PHP:      8.0
License:           Proprietaer
Text Domain:       tbs-theme
*/

:root {
	/* Corporate Design, Teil 2.5 der Knowledge Base: Violett-Abstufungen und Neutraltöne, siehe tbs-styleguide.html */
	--violet-900: #391544;
	--violet-800: #552364;
	--violet-600: #7A418B;
	--violet-300: #C59FD0;
	--violet-150: #ECDDF0;
	--violet-100: #F5EDF8;
	--violet-050: #FAF6FB;
	--ink-900: #211C24;
	--ink-700: #4A424E;
	--ink-500: #726B76;
	--ink-300: #B8B1BC;
	--line: #E7E1E9;
	--line-soft: #F0ECF1;
	--paper: #FFFFFF;
	--canvas: #FAF8FA;

	/*
	 * Status-Farben (gedaempft, kein Ampel-Rot/-Gruen). --ok deckt sich mit
	 * dem bereits an anderer Stelle im Theme verwendeten Fallback-Wert
	 * "var(--ok, #2F7A4F)" sowie dem Styleguide-Referenzwert - war bisher
	 * nie tatsaechlich in :root definiert. --error ist neu (Nachbesserung
	 * 08.09.2026, Haekchen/Kreuz-Einfaerbung in der Wartungsvertrags-
	 * Vergleichstabelle), in Saettigung/Helligkeit bewusst an --ok
	 * angeglichen statt eines grellen Warnrots.
	 */
	--ok: #2F7A4F;
	--error: #B3413A;
	/* TI-Status-Karte/-Dashboard (Teil 3.8): Wartungs-/Unbekannt-Zustand,
	   gleiche Saettigung/Helligkeit wie --ok/--error statt grellem Gelb. */
	--warn: #B3862F;
	/* --warn nur fuer Flaechen, Rahmen und Icons. Fuer TEXT in Warn-Gelb
	   --warn-text: dunkler, mind. 4,5 : 1 auf Weiss, Canvas, Hinweisflaechen
	   (#FBF3E7, #FBF1E4) und dem Stornierungs-Tint (Kontrastkorrektur
	   30.09.2026). */
	--warn-text: #8A6410;
	--unknown: #8A8290;

	/* Typografie, Teil 2.7 der Knowledge Base */
	--font-head: 'Manrope', sans-serif;
	--font-body: 'Inter', sans-serif;

	/* Abstands-Skala, Teil 3.4 der Knowledge Base */
	--space-4: 4px;
	--space-8: 8px;
	--space-12: 12px;
	--space-16: 16px;
	--space-24: 24px;
	--space-32: 32px;
	--space-48: 48px;
	--space-64: 64px;
	--space-96: 96px;

	/* Breakpoints, Teil 3.4 der Knowledge Base (als Referenz, @media benoetigt feste Werte) */
	--wrap-max: 1160px;

	/*
	 * Radius-/Schatten-Tokens aus tbs-styleguide.html (Nachbesserung
	 * 11.09.2026): waren dort seit Beginn definiert, aber nie ins Theme
	 * uebernommen worden. Dadurch griff die einzige bisherige Verwendung
	 * (Erreichbarkeit-Box auf "Kontakt", var(--radius-l)) nie tatsaechlich -
	 * ohne Definition ist der Wert ungueltig, border-radius wurde
	 * stillschweigend auf 0 zurueckgesetzt. Hier nachgezogen, Werte 1:1 aus
	 * dem Styleguide.
	 */
	--radius-s: 8px;
	--radius-m: 14px;
	--radius-l: 22px;
	--shadow-1: 0 1px 2px rgba(33, 28, 36, .06), 0 1px 1px rgba(33, 28, 36, .04);
	--shadow-2: 0 8px 24px rgba(57, 21, 68, .10), 0 2px 6px rgba(57, 21, 68, .06);
}

/* Lokal gehostete Schriftarten, Teil 2.7 der Knowledge Base (DSGVO- und performancerelevant, kein Google-Fonts-CDN) */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/manrope-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('assets/fonts/manrope-800.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/inter-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/inter-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/inter-600.woff2') format('woff2');
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: #211C24;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-head);
	font-weight: 800;
	margin: 0;
}

/* H1/H2 in Corporate-Violett; H3-H6 und Ueberschriften auf dunklen Flaechen behalten ihre eigenen Regeln */
h1, h2 {
	color: var(--violet-800);
}

a {
	color: inherit;
}

/* Layout-Grundgeruest, Teil 3.4 der Knowledge Base */
.tbs-wrap {
	max-width: var(--wrap-max);
	margin: 0 auto;
	padding: 0 var(--space-24);
}

/* Sprung-Link fuer Tastaturbedienung, Teil 3.6 der Knowledge Base */
.tbs-skip-link {
	position: absolute;
	top: -48px;
	left: var(--space-16);
	z-index: 100;
	background: var(--violet-900);
	color: #fff;
	padding: var(--space-12) var(--space-16);
	border-radius: 8px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: top 0.15s ease;
}

.tbs-skip-link:focus {
	top: var(--space-16);
}

/* Buttons, Teil 2.5 der Knowledge Base */
.tbs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13.5px;
	border-radius: 100px;
	border: none;
	cursor: pointer;
	padding: 10px 20px;
	text-decoration: none;
}

.tbs-btn-primary {
	background: var(--violet-800);
	color: #fff;
}

.tbs-btn-primary:hover {
	background: var(--violet-900);
}

.tbs-btn-secondary {
	background: var(--paper);
	color: var(--violet-800);
	border: 1px solid var(--line);
}

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

/* Pagination (Template-Funktion tbs_pagination(), siehe inc/helpers.php) */
.tbs-pagination ul {
	list-style: none;
	margin: var(--space-32) 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 6px;
}

.tbs-pagination a,
.tbs-pagination span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 10px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13.5px;
	color: var(--ink-700);
	text-decoration: none;
}

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

.tbs-pagination span.current {
	background: var(--violet-800);
	color: #fff;
}

/*
 * Artikel-Vorlage (single.php), Bauplan-Baustein 4.
 * Nur reine Fliesstext-Elemente (Absaetze, Listen, Zwischenueberschriften)
 * bekommen eine angenehme Lesebreite. ACF-Bloecke (z. B. Hero, Karten)
 * bleiben unangetastet und behalten ihre eigene volle Breite samt
 * Vollbild-Hintergruenden, da sie keine dieser Selektoren treffen.
 */
.tbs-article-header {
	/*
	 * War frueher selbst das .tbs-wrap-Element - dadurch konnte ein
	 * Hintergrund hier nur innerhalb der 1160px-Wrap-Breite gemalt werden,
	 * nicht ueber die volle Bildschirmbreite wie der Hero-Verlauf auf
	 * Kontakt/Beratung anfordern (siehe .tbs-block-hero unten). Jetzt
	 * eigenstaendiges, volles Element mit einem .tbs-wrap-Kind fuer die H1 -
	 * derselbe Aufbau wie bei .tbs-block-hero.
	 */
	background: linear-gradient(180deg, var(--violet-050) 0%, var(--paper) 78%);
	padding-top: var(--space-48);
}

.tbs-article-header h1 {
	max-width: 760px;
	font-size: clamp(26px, 4vw, 38px);
	line-height: 1.2;
}

/*
 * ---------- Job-Detailseiten (jobs/single-jobs.php) ----------
 * Fund: Die Vorlage hatte - wie zuvor single.php - nie einen eigenen
 * Kopfbereich mit Hintergrund vorgesehen; Breadcrumb und Titel sassen
 * direkt auf weissem Grund. Fix: dieselbe .tbs-article-header-Komponente
 * wiederverwendet (siehe oben), nicht neu gebaut. Betrifft die Vorlage
 * selbst, nicht einzelne Job-Beitraege - greift automatisch bei allen
 * ueber das Job-Postings-Plugin verwalteten Stellenanzeigen, auch bei aus
 * dem Papierkorb wiederhergestellten oder neu angelegten.
 *
 * Eigener Abstand unten nur fuer den Job-Kontext (per Body-Klasse
 * "single-jobs", von WordPress fuer den Custom-Post-Type automatisch
 * vergeben - keine .tbs-article-thumb mit eigenem margin-top wie bei
 * Artikeln, die hier fehlende Distanz zum zweispaltigen Plugin-Inhalt
 * sonst zu knapp).
 */
.single-jobs .tbs-article-header {
	padding-bottom: var(--space-32);
}

/*
 * Das Plugin rendert den Titel zusaetzlich selbst als normales Formularfeld
 * ("Stellenbezeichnung") innerhalb seiner eigenen Feldausgabe - bewusst
 * nicht die Plugin-Ausgabe selbst angepasst (Near-Miss-Risiko fuer die
 * Bewerbungslogik, siehe jobs/single-jobs.php), sondern die dadurch
 * entstehende doppelte Titel-Anzeige hier ausgeblendet, da oben bereits
 * ein echtes H1 ausgegeben wird. Rein optisch - das JSON-LD-Schema liest
 * den Titel direkt aus den Postmeta-Daten, nicht aus diesem Feld.
 */
.tbs-job-single .position_title {
	display: none;
}

/*
 * Feldlabels der Stellenanzeige (Job-Postings-Plugin, 28.09.2026): statt
 * fettem 16px-Label mit grauem Unterstrich (Plugin-Standard) eine kleine
 * Ueberschrift im Stil der Hero-Eyebrow - 12,5px, fett, Markenviolett, ohne
 * Pillen-Hintergrund. Selektoren bewusst auf die Label-/Zeilenklassen der
 * Stellenanzeige (.jobs-row / .jobs-row-label) begrenzt: das Bewerbungs-
 * Fenster liegt zwar im selben Container, nutzt aber eigene Klassen
 * (.input-label, .jobs-modal-form) und wird nicht mitgestylt. Die
 * Spezifitaet (4 Klassen) uebertrifft die des Plugin-CSS
 * (.job-post .jobs-row .jobs-row-label), unabhaengig von der Ladereihenfolge.
 * Mehr Luft nur im Hauptbereich (.job-content); die Seitenleiste behaelt
 * die Plugin-Abstaende.
 */
.tbs-job-single .job-post .jobs-row .jobs-row-label {
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--violet-800);
	margin-bottom: var(--space-8);
}

.tbs-job-single .job-post .jobs-row .jobs-row-label span {
	border-bottom: 0;
	padding-bottom: 0;
}

.tbs-job-single .job-post .job-content .jobs-row {
	margin: var(--space-24) 0 var(--space-32);
}

.tbs-article-thumb {
	margin-top: var(--space-32);
	/*
	 * Symmetrisch zum margin-top: fehlte bisher komplett, wodurch
	 * .tbs-article-layout (TOC-Grid) und .tbs-article-content (einspaltig,
	 * ohne TOC) beide direkt am Bild klebten - live an 4 Artikeln
	 * unterschiedlicher Laenge und mit/ohne TOC bestaetigt (0px in allen
	 * Faellen). Ein margin-bottom hier statt margin-top auf beiden
	 * moeglichen Folge-Elementen greift automatisch fuer beide Layout-
	 * Varianten, keine Sonderregel pro Fall noetig.
	 */
	margin-bottom: var(--space-32);
}

.tbs-article-thumb img {
	/*
	 * Nachbesserung 30.09.2026: war "width: 100%" - ein kleines Beitragsbild
	 * (z. B. Logo 289x100 bei "medatixx buendelt Praxissoftware ...") wurde
	 * dadurch auf die volle Containerbreite (1112px) gezogen, 3,85-fach
	 * vergroessert und pixelig. Jetzt keine width-Vorgabe mehr: es gilt das
	 * HTML-width-Attribut des Bildes (= Pixelbreite der Datei), grosse Bilder
	 * fuellen weiterhin die volle Breite (max-width:100%). Bewusst NICHT
	 * "width:auto": das ueberschreibt das Attribut, ein noch nicht geladenes
	 * (lazy) Bild wuerde kurz die volle Breite belegen und dann springen. Schmalere Bilder stehen
	 * linksbuendig - gleiche Kante wie H1 und Fliesstext im Artikel.
	 */
	max-width: 100%;
	/*
	 * War aspect-ratio:1659/948 (bzw. davor 21/9): jede feste Ziel-Ratio
	 * beschnitt Bilder mit abweichendem Format (z. B. das 2048x683-Bild bei
	 * "ePA-Erstbefuellung", Ratio 3,0 statt 1,75/1659x948). Jetzt komplett
	 * ohne aspect-ratio/object-fit - das Bild behaelt sein eigenes,
	 * natuerliches Seitenverhaeltnis, nichts wird mehr beschnitten. Das
	 * fruehere height:auto-Problem (WordPress' width/height-HTML-Attribute
	 * gewinnen sonst gegen CSS) bleibt trotzdem relevant, deshalb explizit
	 * gesetzt.
	 */
	height: auto;
	border-radius: 12px;
	display: block;
}

.tbs-article-thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1659 / 948;
	border-radius: 12px;
	background: var(--violet-100);
	color: var(--violet-300);
}

/*
 * Zweispaltiger Sidebar-Wrapper fuer Artikel MIT automatischem
 * Sticky-Inhaltsverzeichnis (siehe single.php, Teil 3.4-Regel). Bisher
 * fehlte dieser Grid-Container komplett: .tbs-block-toc (width:260px,
 * align-self:start) war fuer genau so ein Layout gebaut, landete aber
 * ohne ihn einfach inline im einspaltigen Fliesstext bei left:0 - optisch
 * losgeloest von der eingerueckten Lesespalte, was wie eine leere Luecke
 * in Toc-Hoehe wirkte. Nur aktiv, wenn ueberhaupt ein TOC gerendert wird -
 * Artikel ohne TOC behalten das bisherige einspaltige .tbs-article-content
 * (inkl. der Faehigkeit, volle ACF-Bloecke im Text zu zeigen).
 */
.tbs-article-layout {
	display: grid;
	/* minmax(0, 1fr): die Inhaltsspalte darf schrumpfen. Mit "1fr" (= minmax(auto, 1fr)) weitete der Mindestinhalt (Bild mit festem Breitenattribut, lange Inhaltsverzeichnis-Zeilen) die Spalte über das Fenster hinaus (Überlauf BF-17 bis BF-19, 02.10.2026). */
	grid-template-columns: 250px minmax(0, 1fr);
	gap: var(--space-32);
	/*
	 * War "align-items: start": das schrumpft JEDE Grid-Spalte (auch die
	 * TOC-Spalte) auf ihre eigene Inhaltshoehe statt sie ueber die volle
	 * Zeilenhoehe zu strecken - live bestaetigt per getComputedStyle:
	 * .tbs-article-toc-col war dadurch nur 414px hoch (= reine TOC-Hoehe)
	 * statt der 8597px der Grid-Zeile. Der sticky-Bezugsrahmen eines
	 * position:sticky-Elements ist die Box seines eigenen Elternelements -
	 * bei einer nur 414px hohen Aside-Box hatte das TOC schlicht keinen
	 * Platz, um beim Scrollen "mitzulaufen": es blieb kurz stehen und
	 * verschwand dann mit der viel zu kurzen Spalte. Grid-Standard
	 * (align-items:stretch) laesst die Aside-Box die volle Zeilenhoehe
	 * einnehmen - das TOC bekommt dadurch echten Sticky-Spielraum bis zum
	 * Ende der Spalte/des Artikels.
	 */
}

.tbs-article-toc-col {
	min-width: 0;
}

.tbs-article-layout .tbs-block-toc {
	width: 100%;
}

/* Innerhalb des Grids uebernimmt die Spalte selbst die Breiten-/
   Positionslogik - die sonst noetige Viewport-Calc-Verschiebung (siehe
   Regel unten) wuerde hier gegen die schmalere Grid-Spalte statt gegen
   den Viewport rechnen und zu falschen Ergebnissen fuehren. */
.tbs-article-layout .tbs-article-content p,
.tbs-article-layout .tbs-article-content ul,
.tbs-article-layout .tbs-article-content ol,
.tbs-article-layout .tbs-article-content h2,
.tbs-article-layout .tbs-article-content h3,
.tbs-article-layout .tbs-article-content h4,
.tbs-article-layout .tbs-article-content blockquote,
.tbs-article-layout .tbs-article-content table,
.tbs-article-layout .tbs-article-content figure {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

@media (max-width: 900px) {
	.tbs-article-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.tbs-article-layout .tbs-block-toc {
		position: static;
	}
}

/*
 * Site-weiter Abstand vor dem Footer: auf #main-content statt pro Template
 * (Teil 3.x-Prinzip - generalisierte Loesung statt Einzelfall-Flicken).
 * #main-content existiert identisch in page.php, single.php und
 * jobs/single-jobs.php. Vorher hatte nur .tbs-article-content (single.php)
 * ein eigenes padding-bottom - page.php/Startseite/FAQ-Hub/Jobs hatten
 * keins, wodurch vollbreite ACF-Bloecke (Hero, Kontakt-CTA, Karten-Grid)
 * am Seitenende direkt am Footer klebten (0px, live an 6 Templates
 * gemessen). Wert uebernommen von der bisherigen .tbs-article-content-
 * Regel, keine neue Zahl.
 */
#main-content {
	padding-bottom: var(--space-48);
}

.tbs-article-content p,
.tbs-article-content ul,
.tbs-article-content ol,
.tbs-article-content h2,
.tbs-article-content h3,
.tbs-article-content h4,
.tbs-article-content blockquote,
.tbs-article-content table,
.tbs-article-content figure {
	/*
	 * War ">"  (nur direkte Kinder): Beim alten Bootstrap-Import
	 * uebernommene "Karten" (areoi/card -> <div class="card-header">/
	 * <div class="card-body">, siehe z. B. "tbs PraxisGuide") liegen eine
	 * Ebene tiefer als .tbs-article-content - der Direct-Child-Selektor
	 * erreichte sie nicht, sie liefen dadurch ueber die volle Breite statt
	 * der Lesebreite. Absichtlich weiterhin nur die Textbreite fixiert,
	 * nicht das alte Card-Styling (Rahmen/Hintergrund) selbst - das bleibt
	 * Teil der noch ausstehenden vollstaendigen Bootstrap-Markup-Bereinigung
	 * (Teil 3.1/8, vollstaendige Artikel-Migration).
	 */
	max-width: 760px;
	/*
	 * Gleiche linke Kante wie .tbs-wrap (Header, Beitragsbild, H1) statt
	 * unabhaengiger Zentrierung im vollen (unbeschraenkten) .tbs-article-
	 * content – sonst driftet der Fliesstext auf breiten Viewports sichtbar
	 * nach rechts weg von Logo/Bild/H1. .tbs-article-content selbst bleibt
	 * bewusst ohne max-width, damit ACF-Vollbild-Bloecke (Hero, Karten) im
	 * Beitragstext weiterhin ihre volle Breite behalten (siehe Kommentar
	 * oben). Faellt auf schmalen Viewports automatisch auf space-24 zurueck.
	 */
	margin-left: max(var(--space-24), calc((100% - var(--wrap-max)) / 2 + var(--space-24)));
	margin-right: var(--space-24);
}

.tbs-article-content p,
.tbs-article-content ul,
.tbs-article-content ol {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.75;
	color: var(--ink-700);
	margin-top: 0;
	margin-bottom: var(--space-24);
}

.tbs-article-content h2,
.tbs-article-content h3,
.tbs-article-content h4 {
	margin-top: var(--space-32);
	margin-bottom: var(--space-16);
}

/*
 * Einzelne Artikel (z. B. "Cybercrime in Arztpraxen") nutzten wp:heading
 * level:1 als optisches Stilmittel fuer Zwischenueberschriften - semantisch
 * falsch (mehrere H1 pro Seite). Nachtraeglich auf H2 korrigiert, diese
 * Klasse haelt bewusst die bisherige H1-Optik (32px, ohne Absatzabstand -
 * die Abschnitte sind bereits durch wp:separator getrennt) unveraendert bei.
 */
.tbs-article-content h2.tbs-h1-size {
	font-size: 32px;
	margin-top: 0;
	margin-bottom: 0;
}

.tbs-article-content figure img {
	/*
	 * Bleibt width:100% (Bilder im Text tragen als HTML-width-Attribut die
	 * gewaehlte Anzeigegroesse, nicht die Dateibreite - ein 1280px-Bild mit
	 * Attribut 503 wuerde sonst kleiner als bisher). Die Begrenzung auf die
	 * ORIGINALbreite kommt als Inline-Stil pro Bild aus
	 * tbs_article_image_cap_width() (inc/helpers.php): kleine Bilder werden
	 * nicht mehr ueber ihre Dateibreite hinaus gezogen.
	 */
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}

/*
 * Imagify verpackt Bilder in <picture> und verschiebt dabei class und style
 * (z. B. "width:500px" aus dem Bild-Block und den max-width-Deckel aus
 * tbs_article_image_cap_width()) vom <img> auf das <picture>-Element. Ein
 * <picture> ist standardmaessig inline - Breitenangaben wirkten dort nicht,
 * das Bild wurde auf die volle Textspalte gezogen (z. B. 505px-Bilder in
 * "tbs PraxisGuide" auf 830px). Als Block greifen sie; vom Autor als
 * "zentriert" gesetzte Bilder (figure.aligncenter) stehen mittig.
 */
.tbs-article-content figure picture {
	display: block;
}

.tbs-article-content figure.aligncenter picture {
	margin-left: auto;
	margin-right: auto;
}

/*
 * Bilder OHNE <figure>-Wrapper (z. B. direkt aus altem Bootstrap-Markup,
 * teils zusaetzlich in einem <div class="wp-block-image"> verschachtelt,
 * das auch die figure-Regel oben nicht erreicht) haben von WordPress
 * gesetzte width/height-HTML-Attribute (echte Bild-Pixelmasse). Ohne
 * max-width/height:auto gewinnen diese Attribute gegen jede Container-
 * Breite - identischer Mechanismus wie beim Beitragsbild-Bug
 * (.tbs-article-thumb img), hier verallgemeinert auf alle Bilder im
 * Fliesstext.
 */

.tbs-article-content img {
	max-width: 100%;
	height: auto;
}

/*
 * Zentrierte Figuren: WordPress setzt figure.aligncenter auf display:table,
 * deren Breite aus dem width-Attribut des Bildes kommt und max-width ignoriert
 * (Bilder mit 500-1536 px liefen ueber den Rand, Seite scrollte seitlich).
 * Als Block mit fit-content bleibt die Figur so breit wie das Bild und wird
 * von den bestehenden max-width-Regeln (Lesebreite bzw. Artikel-Spalte)
 * begrenzt; Zentrierung (margin auto) bleibt erhalten.
 */
.tbs-article-content figure.aligncenter {
	display: block;
	width: fit-content;
}

/*
 * ---------- Native Bild-Bloecke direkt in page.php (nicht areoi-Reste) ----------
 * Fund auf "medatixx für Facharztpraxen": ein bewusst als natives
 * Gutenberg-Bild eingebundenes Diagramm (kein ACF-Block noetig, kein
 * areoi-Rest) blieb von der obigen Regel unberuehrt, da es keine
 * "areoi-element"-Klasse traegt - dadurch unbegrenzt breit (volle
 * #main-content-Breite statt .tbs-wrap). Bewusst NICHT auf die 760px-
 * Lesebreite begrenzt wie areoi-Fliesstext: ein natives Bild in einer
 * ACF-Block-Seite ist naeher an einem Artikel-Beitragsbild (Teil 5.8,
 * .tbs-article-thumb: bewusst .tbs-wrap-breit, nicht auf 760px eingerueckt)
 * als an einer Fliesstext-Bootstrap-Karte - besonders bei einem
 * detailreichen Diagramm waere 760px kaum noch lesbar.
 *
 * Direktes-Kind-Selektor (">"), damit NUR eigenstaendige, oberste
 * Bild-Bloecke getroffen werden - nicht Bilder innerhalb von ACF-Bloecken
 * (die haben eigene Breitenlogik, z. B. .tbs-karte-image) und nicht das
 * Bild im wiederverwendeten Kontaktformular-Block (ref:1815, liegt
 * innerhalb eines .tbs-wrap-Divs, ist also kein direktes Kind).
 *
 * Zwei tatsaechlich vorkommende Markup-Varianten noetig, live per
 * Server-Rohantwort (nicht nur DOM-Inspektion, die durch verzoegerte
 * JS-Mutationen in die Irre fuehren kann) an zwei Beispielbildern
 * bestaetigt: Ein "align":"center"-Bild-Block wird von WordPress beim
 * Ausliefern in ein zusaetzliches "<div class="wp-block-image">" um die
 * "<figure>" gewrappt (dabei wandert die Klasse "wp-block-image" vom
 * figure auf den neuen div) - ein Bild-Block ohne align-Attribut bleibt
 * dagegen ein einfaches "<figure class="wp-block-image ...">" als
 * direktes Kind. Beide Varianten werden deshalb bewusst gleichzeitig
 * angesprochen (Klassen-Selektor fuer den Wrapper-Fall, Element-Selektor
 * "figure" als Fallback fuer den direkten Fall).
 */
/*
 * Nachbesserung 14.09.2026: Seit der automatisierten Hintergrund-
 * Alternation (inc/bg-alternation.php) stecken frei stehende Bild-Bloecke
 * auf Produkt-/Fachrichtungs-/TI-Seiten teils eine Ebene tiefer, in einer
 * "tbs-bg-paper"/"tbs-bg-canvas"-Huelle statt direkt in ".tbs-page-content"
 * - der reine Direktkind-Selektor griff dort nicht mehr (Regression live
 * gefunden, z. B. "Managed Firewall"). Deshalb zusaetzlich der Huellen-Fall
 * gezielt mitgenommen, statt auf einen generischen Nachfahren-Selektor
 * umzustellen - Letzterer wuerde auch das absichtlich ausgenommene Bild im
 * wiederverwendeten Kontaktformular-Block (ref:1815, eigene .tbs-wrap-
 * Breitenlogik) und Bilder innerhalb anderer ACF-Bloecke treffen.
 */
.tbs-page-content > figure,
.tbs-page-content > div.wp-block-image,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > figure,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > div.wp-block-image {
	width: 100%;
	max-width: var(--wrap-max);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--space-24);
	box-sizing: border-box;
}

.tbs-page-content > figure img,
.tbs-page-content > div.wp-block-image img,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > figure img,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > div.wp-block-image img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*
 * ---------- Native Fliesstext-Bloecke direkt in page.php (Absatz, Liste,
 * Tabelle) ---------- Fund auf "Hardware kaufen & mieten": eine
 * Vergleichstabelle (wp:table) und eine Aufzaehlung mit Links (wp:list)
 * lassen sich nicht verlustfrei in ACF-Komponenten uebernehmen (Karten-
 * Textfeld ist reiner Klartext ohne Links, Intro-Textfeld steckt in einem
 * einzelnen <p> und vertraegt kein <ul> darin) - deshalb bewusst wie
 * native Bilder oben als natives Gutenberg-Markup belassen. Bisher hatte
 * keine migrierte Seite rohe <p>/<ul>/<table> direkt in #main-content,
 * daher erstmals hier generische Typografie/Breitenbegrenzung noetig.
 * "> figure" oben deckt den Tabellen-Wrapper ("<figure class=
 * wp-block-table>") bereits fuer Breite/Zentrierung ab (kein Klassen-
 * filter dort) - unten nur die Tabellen-eigene Typografie ergaenzt.
 */
/*
 * Fund auf "Aktuelle TI-Stoerungen" (08.09.2026): eine native Ueberschrift
 * ("Telematik-Infrastruktur Status") direkt in page.php hatte bislang
 * keine Breitenbegrenzung/Zentrierung - anders als "> figure" oben nutzt
 * sie bewusst die volle Wrap-Breite (var(--wrap-max)) statt der
 * schmaleren 70ch-Lesebreite unten, da eine Sektions-Ueberschrift wie
 * diese sich am Dashboard/den Kartenbloecken darunter orientieren soll,
 * nicht am Fliesstext-Mass. h3/h4 vorsorglich mit abgedeckt (gleiches
 * "native Content"-System wie p/ul/ol/figure).
 */
/*
 * Nachbesserung 14.09.2026 (gleicher Grund wie beim Bild-/Embed-Fix oben):
 * alle folgenden "native Content"-Regeln (Ueberschriften, Absatz/Liste,
 * Tabellen-Innentypografie, generisches Embed) bekommen zusaetzlich zum
 * bestehenden Direktkind-Fall (".tbs-page-content > X") den Huellen-Fall
 * (".tbs-page-content > .wp-block-group[tbs-bg-*] > ...inner-container > X")
 * - live gefunden auf 5 weiteren Seiten (Hardware kaufen & mieten,
 * Versorgungsforschung x.panel, DocMedico, Terminvergabe x.webtermin,
 * Patientenakte ePA), nicht nur dem urspruenglich gemeldeten Einzelfall.
 */
.tbs-page-content > h2,
.tbs-page-content > h3,
.tbs-page-content > h4,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > h2,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > h3,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > h4 {
	max-width: var(--wrap-max);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--space-24);
	box-sizing: border-box;
}

/*
 * Natives Suchfeld (core/search) als eigenstaendiges, rohes Formular direkt
 * in page.php - bisher gab es dafuer keine Breiten-/Abstandsregel (Fund
 * beim Umbau der Suchseite #357, 29.09.2026: das native wp:search-Feld
 * stand zuvor nur wegen des jetzt entfernten Areoi-Container/Row/Column-
 * Wrappers korrekt eingerueckt). Gleiches Muster wie h2-h4 daneben.
 */
.tbs-page-content > form,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > form {
	max-width: var(--wrap-max);
	margin-left: auto;
	margin-right: auto;
	padding: var(--space-32) var(--space-24) var(--space-64);
	box-sizing: border-box;
}

/*
 * Roher Button-Link (a.tbs-btn) als eigenstaendiger Block in page.php -
 * Fund bei der Bildkontrolle aller Seiten (29./30.09.2026) auf
 * "Terminvergabe x.webtermin": der bei der Areoi-Ablösung (Etappe 2) als
 * Freiform-HTML eingesetzte "Online-Terminkalender einfach ausprobieren"-
 * Button stand ohne jede Breiten-/Randregel direkt im Alternation-Band,
 * klebte am linken Bildschirmrand (x=0) und das Band war nur so hoch wie
 * der Button selbst. Anders als bei p/ul/h2-h4 daneben braucht ein
 * Button keine Zentrierung, sondern die linke Kante der Inhaltsspalte:
 * margin-left nutzt dieselbe Rechnung wie max-width:var(--wrap-max) +
 * auto-Raender + 24px Innenabstand (bei schmalen Fenstern greift das
 * 24px-Minimum). Das vertikale Polster (48px wie bei acf/intro) sitzt am
 * Inner-Container, nicht am Button, damit die Raender nicht aus dem Band
 * herauskollabieren - und nur, wenn der Button das einzige Kind ist; steht
 * er hinter anderem Inhalt, liefert dessen eigenes Polster den Abstand.
 */
.tbs-page-content > a.tbs-btn,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > a.tbs-btn {
	display: block;
	width: fit-content;
	max-width: calc(100% - 2 * var(--space-24));
	margin-left: max(var(--space-24), calc((100% - var(--wrap-max)) / 2 + var(--space-24)));
	margin-right: var(--space-24);
	box-sizing: border-box;
}

/*
 * Band-Polster fuer rohe Bloecke (Bildkontrolle aller 82 Seiten,
 * 30.09.2026). ACF-Komponenten tragen ihr 64px-Polster selbst, rohe native
 * Bloecke nicht - die Regeln oben geben nur Ueberschrift/Absatz am
 * Bandanfang Abstand. Steht ein anderer Blocktyp am Bandanfang oder
 * -ende, klebte er an der Bandkante: live gemessen bei Tabellen ("Hardware
 * kaufen & mieten", "Wartungsvertraege & Monitoring", "Versorgungs-
 * forschung x.panel": Band = Tabellenhoehe, 0px Rand), Listen am Bandende
 * (Nuetzliche Links, Kunden empfehlen Kunden, Fernwartung), dem eingebetteten
 * Formular (Kunden empfehlen Kunden), dem Button-Band ("x.webtermin") und
 * der letzten Spalte von "Update Honorar+Plus". Bewusst je Blocktyp statt
 * pauschal fuer jedes "Band ohne Komponente": Startseiten-Baender mit
 * eigenem Polster (verschachtelte Gruppen), Bild-Baender und unsichtbare
 * 0px-Baender (Markup-Reste) duerfen sich nicht veraendern - vorab per
 * Hoehenvergleich aller 363 Baender gegengeprueft. Padding statt Margin am
 * Inner-Container, damit die Raender nicht aus dem Band herauskollabieren.
 * Leere Absaetze (p:empty) zaehlen nicht als Bandende. Eine Spalte
 * "tbs-2col-b" zaehlt nur als native Gruppe (".wp-block-group.tbs-2col-b"):
 * ACF-Bloecke tragen ihr Polster selbst, sonst waere jedes Paar um 64px
 * hoeher geworden (Fund beim Bildvergleich vorher/nachher, 02.10.2026).
 *
 * Folgeauftrag 164 (21.10.2026): Eingebettete Videos (figure.wp-block-embed, zum Beispiel YouTube) zaehlen ebenfalls. Ohne Polster kollabierte
 * der Rand des Videos aus dem Band heraus, das Video (bzw. der Complianz-Platzhalter ohne Einwilligung) stand buendig an der Bandkante
 * (Wächter-Verstoss "band-klebt-unten" auf "psyx fuer Psychotherapeuten"). Jetzt 64 px wie bei den ACF-Komponenten, mit und ohne Einwilligung.
 */
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container:has(> :is(ul, ol, figure.wp-block-table, figure.wp-block-embed, form, a.tbs-btn):first-child),
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container:has(> .wpforms-container) {
	padding-top: var(--space-64);
}

.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container:has(> :is(p:not(:empty), ul, ol, figure.wp-block-table, figure.wp-block-embed, form, a.tbs-btn, .wp-block-group.tbs-2col-b):last-child),
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container:has(> .wpforms-container) {
	padding-bottom: var(--space-64);
}

/* Der Standard-Rand des ersten/letzten Blocks kollabierte vorher aus dem
 * Band heraus und liegt jetzt innerhalb des Polsters - auf 0, damit das
 * Polster exakt 64px betraegt wie bei den ACF-Komponenten. */
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container:has(> :is(ul, ol, figure.wp-block-table, figure.wp-block-embed, form, a.tbs-btn):first-child) > :first-child {
	margin-top: 0;
}

.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container:has(> :is(p:not(:empty), ul, ol, figure.wp-block-table, figure.wp-block-embed, form, a.tbs-btn, .wp-block-group.tbs-2col-b):last-child) > :last-child {
	margin-bottom: 0;
}

/*
 * Trustindex-Widget als einziger Inhalt eines Bandes (Folgeauftrag 167, 21.10.2026; Seite "Das Unternehmen tbs"). Das Widget (Platzhalter ohne
 * Einwilligung oder geladenes Widget, Klasse ".ti-widget") steht im Band zwischen Hilfselementen, die das Plugin ausgibt (ein <link> davor, ein
 * verstecktes "pre.ti-hidden-markup" danach); es ist deshalb weder erstes noch letztes Kind, und die Regeln oben greifen nicht. Das Band bestand nur aus dem
 * Widget (Polster 0): Platzhalter und Bewertungskarten klebten oben am dunklen Band davor und unten am naechsten Band. Jetzt 64 px oben und unten wie
 * bei den ACF-Komponenten. Gilt allgemein fuer jedes Band, dessen sichtbarer Inhalt nur das Widget ist (kein Seitenname). Rand des Widgets auf 0:
 * Der Platzhalter traegt einen Rand unten mit "!important" (Abschnitt "Trustindex-Widget im blockierten Zustand"), der sonst zum Polster addiert wuerde.
 */
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container:has(> .ti-widget):not(:has(> :not(link, style, script, .ti-widget, .ti-hidden-markup))) {
	padding-top: var(--space-64);
	padding-bottom: var(--space-64);
}

.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container:has(> .ti-widget):not(:has(> :not(link, style, script, .ti-widget, .ti-hidden-markup))) > .ti-widget {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/*
 * Natives WPForms-Formular als eigener Block: WPForms begrenzt es auf
 * 640px, laesst aber unterhalb davon 0px Seitenrand (Fund: "Kunden
 * empfehlen Kunden", Felder und Button klebten bei 375px am Rand).
 */
.tbs-page-content > .wpforms-container,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > .wpforms-container {
	width: calc(100% - 2 * var(--space-24));
	box-sizing: border-box;
}

/*
 * Lange Woerter/URLs duerfen nie ueber den Rand laufen (Funde auf 375px:
 * "Interne Schwangerschaftsdokumentation" in einer Ueberschrift auf
 * "medatixx fuer Frauenarztpraxen", lange mein.medatixx-Links im FAQ-
 * Antworttext). break-word (nicht anywhere), damit die Mindestbreite von
 * Tabellenzellen unveraendert bleibt.
 */
#main-content :is(h1, h2, h3, h4) {
	overflow-wrap: break-word;
}

@media (max-width: 480px) {
	#main-content :is(h1, h2, h3, h4) {
		hyphens: auto;
	}
}

#main-content a:not(.tbs-btn) {
	overflow-wrap: break-word;
}

/*
 * Aufeinanderfolgende Ueberschriften und Ueberschrift + Bild/Tabelle
 * hatten 0px Abstand (Funde: h2 direkt ueber h3 in Cookie-Richtlinie/
 * Datenschutzerklaerung, h2 direkt auf dem Bild in "Sponsoring").
 */
.tbs-page-content :is(h2, h3) + :is(h3, h4) {
	margin-top: var(--space-12);
}

.tbs-page-content :is(h2, h3, h4) + :is(figure, .wp-block-image) {
	margin-top: var(--space-24);
}

/*
 * "Update Honorar+Plus" unterhalb von 960px (kein Grid): Die beiden nativen
 * Spalten-Gruppen liegen dann untereinander, tragen aber - anders als
 * Ueberschriften/Listen als Direktkinder - keinen Seitenrand und keinen
 * Abstand zueinander (Ueberschrift "Update-Datei herunterladen" und Liste
 * klebten bei 375/768px am Rand, "Installation durchfuehren" direkt unter
 * Schritt 3).
 */
@media (max-width: 959px) {
	/* Nur native Gruppen-Spalten (core/group, z. B. Update Honorar+Plus): ACF-Blöcke bringen ihren eigenen Seitenrand mit (tbs-wrap) und würden sonst doppelt eingerückt. */
	.tbs-page-content .wp-block-group.tbs-2col-a,
	.tbs-page-content .wp-block-group.tbs-2col-b {
		padding-left: var(--space-24);
		padding-right: var(--space-24);
		box-sizing: border-box;
	}

	.tbs-page-content .wp-block-group.tbs-2col-a {
		margin-bottom: var(--space-32);
	}
}

/*
 * Oberer Sektionsabstand fuer Label-Bloecke (Regel vom 15.09.2026, am 02.10.2026
 * wiederhergestellt): Ist ein Label-Block (core/heading, core/paragraph) das ERSTE
 * Kind eines Alternation-Bandes, hat er selbst kein Polster; ACF-Komponenten tragen
 * ihre 64 px im Komponenten-CSS (blocks.css). Ohne diese Regel klebt das Label an
 * der Bandkante. Sie war beim Umbau auf die Spaltenmarkierung (c4f9843) versehentlich
 * mit entfallen; betroffen waren rund 16 Seiten (Hardware, Wartungsvertraege,
 * Das Unternehmen, Partner, Impressum, Geschaeftsbedingungen, Update Honorar+Plus u. a.).
 * Gilt nur fuer "padding-top", Breite/Seitenrand kommen aus den Regeln darunter.
 * Leere Absaetze (<p></p>, Markup-Reste wie auf "Ihre Ansprechpartner") zaehlen nicht: sie
 * bekommen kein Polster und erzeugen keinen leeren 64-px-Streifen.
 * Ohne Seitennamen; ":first-child" bezieht sich auf den Inhalt des Bandes, nicht auf
 * die Position des Bandes auf der Seite.
 */
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > h2:first-child,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > h3:first-child,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > h4:first-child,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > p:not(:empty):first-child {
	padding-top: var(--space-64);
}

/*
 * Spaltenlayout per Markierung (02.10.2026), global und ohne Seitenname.
 * Siehe inc/spaltenlayout.php. Klassen: tbs-2col-a (links), tbs-2col-b
 * (rechts), tbs-2col-full (volle Breite im Zweispalter). Das Raster steht
 * auf dem Container, der "a" UND "b" als direkte Kinder hat (ab 960 px,
 * darunter einspaltig); alle übrigen Kinder (Überschrift, Absatz, "full")
 * laufen über beide Spalten. Ohne Gegenseite greift nichts.
 */
@media (min-width: 960px) {
	.tbs-page-content .wp-block-group__inner-container:has(> .tbs-2col-a):has(> .tbs-2col-b) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-32);
		max-width: var(--wrap-max);
		margin-left: auto;
		margin-right: auto;
	}

	.tbs-page-content .wp-block-group__inner-container:has(> .tbs-2col-a):has(> .tbs-2col-b) > * {
		grid-column: 1 / -1;
	}

	.tbs-page-content .wp-block-group__inner-container:has(> .tbs-2col-a):has(> .tbs-2col-b) > .tbs-2col-a {
		grid-column: 1;
	}

	.tbs-page-content .wp-block-group__inner-container:has(> .tbs-2col-a):has(> .tbs-2col-b) > .tbs-2col-b {
		grid-column: 2;
	}
}

/*
 * Komponentenregeln für native Spalteninhalte (02.10.2026): Liste, Absatz und Bild in einer
 * nativen Gruppe, die als Spalte "tbs-2col-a/-b" direkt im Abschnitt steht (Beispiel: Online-
 * Rezeption DocMedico, Text links, Bild rechts). Dort greifen die allgemeinen Regeln für
 * Direktkinder eine Ebene zu flach; diese Regeln geben den Spalteninhalten dieselben Werte
 * (Schrift 16 px, Rand 24 px, Linkfarbe, Listenabstand, Bildformat). Sie ersetzen die früheren
 * Seitenregeln mit nth-child. Absatz und Liste wirken bewusst nur als Direktkinder der Spalte: ein
 * Intro-Block in der Spalte bringt seinen Rand selbst mit (sonst stand sein Text 24 px weiter rechts
 * als seine Überschrift, Fund auf DocMedico, 02.10.2026). Den Seitenrand von 24 px bekommt nur das
 * Direktkind (Bild-Block bzw. Figur), nicht die Figur darin: vorher hatte das Smartphone-Bild auf
 * DocMedico den Rand doppelt (468 statt 516 px). Spalten innerhalb von ".tbs-bg-section"
 * (Update Honorar+Plus) sind bewusst nicht betroffen. Unter 960 px bringen die Spalten keinen eigenen Rand mit
 * (ACF-Blöcke haben ihren eigenen Seitenrand).
 */
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > .wp-block-group:is(.tbs-2col-a, .tbs-2col-b) > .wp-block-group__inner-container > :is(ul, p) {
	padding: 0 var(--space-24);
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink-700);
	line-height: 1.7;
}

.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > .wp-block-group:is(.tbs-2col-a, .tbs-2col-b) > .wp-block-group__inner-container > ul {
	padding-left: calc(var(--space-24) + 1.2em);
}

.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > .wp-block-group:is(.tbs-2col-a, .tbs-2col-b) > .wp-block-group__inner-container > ul > li {
	margin-bottom: var(--space-8);
}

.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > .wp-block-group:is(.tbs-2col-a, .tbs-2col-b) > .wp-block-group__inner-container > :is(ul, p) a {
	color: var(--violet-800);
}

.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > .wp-block-group:is(.tbs-2col-a, .tbs-2col-b) :is(figure, div.wp-block-image) {
	width: 100%;
	box-sizing: border-box;
}

/* Seitenrand nur am Direktkind der Spalte; die Figur im Bild-Block (div.wp-block-image > figure) bekommt keinen zweiten Rand. */
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > .wp-block-group:is(.tbs-2col-a, .tbs-2col-b) > .wp-block-group__inner-container > :is(figure, div.wp-block-image) {
	padding: 0 var(--space-24);
}

.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > .wp-block-group:is(.tbs-2col-a, .tbs-2col-b) img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 959px) {
	.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > .wp-block-group:is(.tbs-2col-a, .tbs-2col-b) {
		padding-left: 0;
		padding-right: 0;
	}
}

/*
 * Paar über zwei Bänder (ab 960 px): Steht "a" als einziger Block in einem
 * Band und "b" als einziger Block im unmittelbar folgenden Band (zwei Blöcke
 * verschiedenen Typs, z. B. Prozess-Stepper und Kontakt auf "Beratung
 * anfordern"), stehen die beiden Bänder nebeneinander. Die Bänder und ihre
 * Farben (Paper/Canvas) bleiben unverändert, die Alternation wird nicht
 * berührt. ":has()" darf nicht verschachtelt werden; deshalb prüft der
 * Rahmen flach auf ":only-child" (ein Block mit Überschrift-Etikett im Band
 * gilt als Paar im Band, nicht über Bänder). Spaltenbreite wie der
 * Inhaltsrahmen: (--wrap-max - Lücke) / 2.
 */
@media (min-width: 960px) {
	.tbs-page-content:has(> .wp-block-group > .wp-block-group__inner-container > .tbs-2col-a:only-child):has(> .wp-block-group > .wp-block-group__inner-container > .tbs-2col-b:only-child) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, calc((var(--wrap-max) - var(--space-32)) / 2)) minmax(0, calc((var(--wrap-max) - var(--space-32)) / 2)) minmax(0, 1fr);
		column-gap: var(--space-32);
	}

	.tbs-page-content:has(> .wp-block-group > .wp-block-group__inner-container > .tbs-2col-a:only-child):has(> .wp-block-group > .wp-block-group__inner-container > .tbs-2col-b:only-child) > * {
		grid-column: 1 / -1;
	}

	.tbs-page-content:has(> .wp-block-group > .wp-block-group__inner-container > .tbs-2col-a:only-child):has(> .wp-block-group > .wp-block-group__inner-container > .tbs-2col-b:only-child) > .wp-block-group:has(> .wp-block-group__inner-container > .tbs-2col-a:only-child):has(+ .wp-block-group > .wp-block-group__inner-container > .tbs-2col-b:only-child) {
		grid-column: 2;
	}

	.tbs-page-content:has(> .wp-block-group > .wp-block-group__inner-container > .tbs-2col-a:only-child):has(> .wp-block-group > .wp-block-group__inner-container > .tbs-2col-b:only-child) > .wp-block-group:has(> .wp-block-group__inner-container > .tbs-2col-a:only-child) + .wp-block-group:has(> .wp-block-group__inner-container > .tbs-2col-b:only-child) {
		grid-column: 3;
	}
}

/*
 * Nachbesserung 15.09.2026 (Fund auf "Sponsoring"): Die Marker-Klasse
 * ".tbs-bg-section" (siehe inc/bg-alternation.php, Cluster-Trennung
 * zweier core/group-Abschnitte) ist ein bisher unbekannter Content-Typ
 * fuer dieses Huellen-System - jeder Typ (h2/h3/h4, p/ul/ol, figure,
 * Tabellen, Embed) bekommt hier einzeln seine eigene Breiten-/Abstands-
 * Regel, da der Inner-Container selbst absichtlich vollbreit bleibt
 * (Grund: haette sonst auch fuer die Zweispalten-Grid-Faelle oben
 * gegolten). Beim Einfuehren der neuen Klasse wurde exakt dieser Schritt
 * vergessen - ohne eigene Regel lief der Inhalt ueber die volle
 * Bandbreite, randlos. Gleiche Werte wie bei Ueberschrift/Absatz oben.
 *
 * Nachbesserung 15.09.2026, zweiter Fund auf "Sponsoring" (derselbe Tag):
 * Die Breitenregel oben hatte bewusst nur horizontales Padding, wie bei
 * h2/h3/h4 daneben. ".tbs-bg-section" ist aber - anders als h2/h3/h4 -
 * keine native Ueberschrift mit eigenem Browser-Rand, sondern ein
 * selbstgebauter Wrapper um rohe native Bloecke (Heading/Bild/Absaetze)
 * ohne jeden eigenen Sektionsabstand. Jede echte ACF-Komponente traegt
 * ihren vertikalen Sektionsabstand (Teil 3.4: verbindlich 64px) fest im
 * eigenen Komponenten-CSS (".tbs-block-*{padding: var(--space-64) 0}",
 * siehe blocks.css) - dieser Wrapper ist keine ACF-Komponente und hatte
 * dadurch keine Quelle fuer diesen Abstand. Live gemessen: Inhalt sass
 * randlos (0px) oben UND unten am eigenen Paper-/Canvas-Farbband, auf
 * beiden Sponsoring-Abschnitten gleichermassen. Vertikalen Abstand nach
 * demselben Wert wie jede andere Komponente ergaenzt.
 */
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > .tbs-bg-section {
	max-width: var(--wrap-max);
	margin-left: auto;
	margin-right: auto;
	padding: var(--space-64) var(--space-24);
	box-sizing: border-box;
}

/*
 * Nachbesserung 15.09.2026, dritter Fund auf "Sponsoring" (derselbe
 * Bereich): Die Breite der Bilder in den beiden ".tbs-bg-section"-
 * Abschnitten ist bereits korrekt (das Bild erbt die Lesebreite ganz
 * ohne eigene Regel vom umschliessenden ".tbs-bg-section", da es dort
 * einfach ganz normal im Blockfluss steht) - es fehlt nur die
 * Eckenrundung. Die bestehende generische Bild-Rundungsregel weiter
 * oben (".tbs-page-content > ... > figure img") greift eine
 * Verschachtelungsebene zu flach, da das Bild hier zusaetzlich im
 * ".tbs-bg-section"-Wrapper steckt - dieselbe Ursache wie bei den
 * beiden vorherigen Funden in diesem Bereich. Bewusst "var(--radius-l)"
 * statt des hartcodierten "12px" der bestehenden generischen Regel:
 * entspricht der neueren, bereits etablierten Konvention fuer Hero-/
 * Bild-Text-Bilder (siehe blocks.css), nicht dem aelteren Wert.
 */
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > .tbs-bg-section img {
	border-radius: var(--radius-l);
}

.tbs-page-content > p,
.tbs-page-content > ul,
.tbs-page-content > ol,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > p,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > ul,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > ol {
	max-width: 70ch;
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--space-24);
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink-700);
	line-height: 1.7;
}

.tbs-page-content > ul,
.tbs-page-content > ol,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > ul,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > ol {
	padding-left: calc(var(--space-24) + 1.2em);
}

.tbs-page-content > ul li,
.tbs-page-content > ol li,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > ul li,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > ol li {
	margin-bottom: var(--space-8);
}

.tbs-page-content > ul a,
.tbs-page-content > ol a,
.tbs-page-content > p a,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > ul a,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > ol a,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > p a {
	color: var(--violet-800);
}

/*
 * Aufzaehlungen: violettes "+" statt Standard-Punkt (Folgeauftrag 81).
 * Gilt fuer ungeordnete Listen im Inhaltsbereich (main): Redaktionstext (Seiten, Ratgeber, Kurs- und Stellenseiten),
 * FAQ-Antworten und Listen in Bloecken ohne eigene Klasse. Nummerierte Listen (ol) bleiben unveraendert.
 * Ausgenommen: Formulare, Tabellen, Navigation (inkl. Breadcrumb), Inhaltsverzeichnis, Seitenzaehlung und jede Liste mit
 * eigener tbs-Klasse (eigene Zeichen wie Haekchen, Punkte, Icons).
 * Technik: list-style-type mit Zeichenkette statt list-style: none. Die Liste bleibt eine Liste fuer Screenreader, Einrueckung
 * (padding der ul) und Zeilenumbruch aendern sich nicht. Selektor in :where() = Spezifitaet 0: jede Klassenregel mit eigenem
 * list-style gewinnt weiterhin. Farbe: --violet-800 auf hellen Flaechen (ueber 10 : 1), --violet-300 auf dunklen (ueber 5 : 1).
 */
:where(main, #main-content) ul:where(:not(form ul, table ul, nav ul, .wpforms-container ul, [class*="tbs-"])) {
	list-style-type: "+\00a0\00a0";
}

:where(main, #main-content) ul:where(:not(form ul, table ul, nav ul, .wpforms-container ul, [class*="tbs-"])) > li::marker {
	color: var(--violet-800);
	font-weight: 700;
}

/* Stellenanzeige: Das Stellen-Plugin setzt "list-style: disc" mit hoeherer Spezifitaet (.job-post .jobs-row .jobs-row-input ul). */
.tbs-job-single .job-post .jobs-row .jobs-row-input ul {
	list-style-type: "+\00a0\00a0";
}

/* Dunkle Flaeche: Kapitel-Zusammenfassung (Text --violet-150 auf --violet-800). */
.tbs-block-kapitel-zusammenfassung ul > li::marker {
	color: var(--violet-300);
}

.tbs-page-content > figure.wp-block-table,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > figure.wp-block-table {
	overflow-x: auto;
}

.tbs-page-content > figure.wp-block-table table,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > figure.wp-block-table table {
	width: 100%;
	/*
	 * table-layout:auto ueberschreibt bewusst die Gutenberg-Klasse
	 * "has-fixed-layout" (erzwingt sonst gleich breite Spalten). Fund auf
	 * "Wartungsvertraege & Monitoring": bei einer Merkmal-Spalte mit langen
	 * Bezeichnungen ("Serverraum-Temperatur (Sensor kostenpflichtig)")
	 * neben mehreren kurzen Haekchen-Spalten erzwang die feste, gleiche
	 * Spaltenbreite auf schmalen Bildschirmen sehr schmale, dadurch extrem
	 * hohe/gestauchte Zellen (233px hoch bei 375px Breite, live gemessen) -
	 * betraf nachtraeglich auch die bereits migrierte Tabelle auf
	 * "Hardware kaufen & mieten" (210px hohe Zeilen, dort bislang nur
	 * unbemerkt). table-layout:auto laesst den Browser die Spaltenbreite
	 * am tatsaechlichen Inhalt ausrichten - schmale Spalten bleiben schmal,
	 * die Label-Spalte bekommt den Platz, den sie braucht.
	 */
	table-layout: auto;
	border-collapse: collapse;
	font-family: var(--font-body);
	font-size: 14.5px;
	color: var(--ink-700);
}

.tbs-page-content > figure.wp-block-table th,
.tbs-page-content > figure.wp-block-table td,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > figure.wp-block-table th,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > figure.wp-block-table td {
	border: 1px solid var(--line);
	padding: var(--space-12) var(--space-16);
	text-align: left;
	vertical-align: top;
}

.tbs-page-content > figure.wp-block-table th,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > figure.wp-block-table th {
	background: var(--violet-050);
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--ink-900);
}

.tbs-page-content > figure.wp-block-table a,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > figure.wp-block-table a {
	color: var(--violet-800);
}

/*
 * Haekchen/Kreuz-Einfaerbung in Vergleichstabellen (Nachbesserung
 * 08.09.2026, Fund auf "Wartungsvertraege & Monitoring"). Bewusst nur auf
 * eigene Spans um die Symbole selbst (im Tabellen-Markup gezielt gesetzt),
 * nicht auf die ganze Zelle/Zeile - Zellenfarbe/-hintergrund bleiben
 * neutral. Gedaempfte Toene (--ok/--error) statt greller Ampelfarben.
 */
.tbs-page-content > figure.wp-block-table .tbs-table-check,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > figure.wp-block-table .tbs-table-check {
	color: var(--ok);
	font-weight: 700;
}

/*
 * ---------- Native Video-Einbettung (wp:embed) direkt in page.php ----------
 * Fund auf "psyx fuer Psychotherapeuten": ein eingebettetes YouTube-Video
 * (natives Gutenberg-"wp:embed", keine ACF-Komponente dafuer vorgesehen).
 * Das Theme laedt bewusst keine WordPress-Core-Blockbibliothek
 * ("wp-block-library.css", siehe add_theme_support in theme-setup.php),
 * daher fehlen die Standard-Responsive-Klassen ("wp-embed-aspect-16-9" /
 * "wp-has-aspect-ratio") komplett - ohne eigene Regel wuerde das
 * eingebettete Video in der von YouTube gelieferten festen Rohgroesse
 * (typischerweise sehr klein) erscheinen statt die Wrap-Breite zu nutzen.
 */
.tbs-page-content > figure.wp-block-embed,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > figure.wp-block-embed {
	max-width: var(--wrap-max);
	margin: var(--space-32) auto;
	padding: 0 var(--space-24);
	box-sizing: border-box;
}

/*
 * padding-bottom-Trick statt aspect-ratio: Das Consent-Plugin Complianz
 * (blockiert externe Embeds bis zur Cookie-Einwilligung, siehe
 * ".cmplz-blocked-content-container" - korrektes, gewolltes Verhalten,
 * nicht deaktivieren) setzt auf denselben Wrapper "height:inherit". Ohne
 * eigene Hoehe am umschliessenden <figure> loeste das einen Kollaps auf
 * 0x0px aus (live bestaetigt: "aspect-ratio:16/9" wurde von
 * "height:inherit" faktisch aufgehoben, da damit "height" explizit
 * gesetzt ist statt fehlend). "height:0 + padding-bottom" erzeugt die
 * Hoehe stattdessen ueber die eigene Breite des Wrappers - unabhaengig
 * von der Ahnen-Kette, funktioniert deshalb zuverlaessig auch mit
 * Complianz' Platzhalter.
 */
.tbs-page-content > figure.wp-block-embed .wp-block-embed__wrapper,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > figure.wp-block-embed .wp-block-embed__wrapper {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
	border-radius: 12px;
}

.tbs-page-content > figure.wp-block-embed iframe,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > figure.wp-block-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.tbs-page-content > figure.wp-block-table .tbs-table-cross,
.tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > figure.wp-block-table .tbs-table-cross {
	color: var(--error);
	font-weight: 700;
}

/*
 * Tabellen: Woerter brechen nie mitten im Wort (Auftrag 119, 14.10.2026).
 * Ursache: Der von WordPress eingebettete Block-Stil setzt auf
 * ".wp-block-table .has-fixed-layout td/th" "word-break: break-word"; damit
 * zaehlt auch das laengste Wort nicht mehr zur Mindestbreite der Spalte, und
 * der Browser bricht "Anfangsinvestition" mitten im Wort um (Fund auf
 * "Hardware kaufen & mieten", bei allen Breiten; auf 375 px zusaetzlich auf
 * "Wartungsvertraege & Monitoring" und in Beitraegen). Die Regel gilt fuer
 * jede Tabelle im Block-Editor-Markup (Seiten, Beitraege): normale
 * Umbruchregeln (nur an Leerzeichen und Bindestrichen), automatische
 * Spaltenbreite statt gleich breiter Spalten, und die Tabelle scrollt auf
 * schmalen Bildschirmen waagerecht, statt Woerter zu zerreissen.
 */
figure.wp-block-table {
	overflow-x: auto;
}

figure.wp-block-table table.has-fixed-layout {
	table-layout: auto;
}

figure.wp-block-table table :is(th, td),
figure.wp-block-table table.has-fixed-layout :is(th, td) {
	word-break: normal;
	overflow-wrap: normal;
	hyphens: manual;
}

/*
 * Seiten-Vergleichstabelle mit Bezeichnungsspalte und zwei Datenspalten
 * (z. B. "Hardware kaufen / Hardware mieten"): die beiden Datenspalten teilen
 * sich den Rest gleich, die erste Spalte bekommt den uebrigen Platz, mindestens
 * aber die Breite ihres laengsten Wortes.
 */
:is(.tbs-page-content > figure.wp-block-table, .tbs-page-content > .wp-block-group[class*="tbs-bg-"] > .wp-block-group__inner-container > figure.wp-block-table) table tr:has(> :nth-child(3):last-child) > :not(:first-child) {
	width: 40%;
}

/*
 * Scroll-Hinweis fuer ueberlaufende Tabellen (Auftrag 134, 15.10.2026).
 * Die Klassen und die Hinweiszeile setzt assets/js/table-scroll-hint.js, und
 * nur dann, wenn eine Tabelle auf einem Bildschirm bis 767 px breiter ist als
 * ihr Container. (a) Weicher Verlauf an der Seite, an der noch Inhalt liegt:
 * eine Maske blendet den Rand der Tabelle in den Hintergrund des Bands aus
 * (keine Farbe noetig, passt auf Papier, Canvas und Weiss); ganz am Ende
 * bzw. am Anfang verschwindet der jeweilige Verlauf. (b) Die Zeile unter der
 * Tabelle bleibt sichtbar, solange die Tabelle ueberlaeuft; keine Animation.
 */
figure.wp-block-table:focus-visible {
	outline: 2px solid var(--violet-600);
	outline-offset: 2px;
}

figure.wp-block-table.tbs-table--fade-r {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

figure.wp-block-table.tbs-table--fade-l {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
	mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
}

figure.wp-block-table.tbs-table--fade-l.tbs-table--fade-r {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}

figure.wp-block-table + p.tbs-table-hinweis {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0 0;
	font-family: var(--font-body);
	font-size: 12.5px !important; /* schlaegt die Absatzregeln der Seitenbaender */
	line-height: 1.4 !important;
	color: var(--ink-700);
}

figure.wp-block-table + p.tbs-table-hinweis svg {
	flex: none;
}

@media (min-width: 768px) {
	figure.wp-block-table + p.tbs-table-hinweis {
		display: none;
	}
}

/*
 * ---------- Seitenspezifische Layout-Anpassungen (Baustein 5) ----------
 * Seit 02.10.2026 gibt es hier keine Regeln mehr, die an Seitenname und
 * Position haengen: Zweispalter laufen ueber die Markierung (tbs-2col-a/-b/
 * -full), Sonderfaelle ueber eigene Klassen (tbs-lesebreite, tbs-form-schmal)
 * oder relationale Regeln. Der Layout-Waechter (tools/layout-waechter,
 * statisch-pruefen.js) meldet jede Regel mit ".page-slug-" und Positions-
 * selektor als Verstoss.
 */

/*
 * Startseite: abwechselnde Sektions-Hintergruende (Nachbesserung
 * 11.09.2026, Redesign-Entwurf beispielseite-startseite.html). Hero,
 * Proof-Leiste, TI-Status-Karte und die finale CTA bleiben bewusst eigene,
 * visuell abgesetzte Baender ausserhalb dieser Alternation (jeweils eigene
 * Hintergrundfarbe schon in ihrer Komponenten-CSS). Die uebrigen Bloecke
 * werden in core/group-Baender mit Paper/Canvas im Wechsel gruppiert -
 * kein bestehender Block wird dabei farblich zerschnitten.
 */
.tbs-bg-paper {
	background: var(--paper);
}

.tbs-bg-canvas {
	background: var(--canvas);
}

.tbs-bg-cta-close {
	background: var(--violet-050);
}

/*
 * Startseite: TI-Status-Feld + Bild #7627 als EIN gemeinsamer, umrahmter
 * Block (Nachbesserung 08.09.2026, 4. Runde) - gleiches Muster wie
 * .tbs-testimonial-featured (Rahmen, 20px Radius, Hintergrund, Innenab-
 * stand um das gesamte Paar). Kein nth-child noetig, da TI-Status-Feld und
 * Bild hier direkte Kinder desselben Blocks sind statt unabhaengiger
 * Geschwister auf Seitenebene.
 *
 * Nachbesserung 14.09.2026 (Health-Check): Die frueher hier zusaetzlich
 * bestehende "Seit ueber 35 Jahren..."-Zweispalten-Regel (Text+Bild auf
 * Seitenebene per nth-child(2)/(3)) wurde entfernt - live geprueft traf sie
 * bereits auf 0 Elemente, da der urspruengliche Intro+Bild-Inhalt bei einer
 * spaeteren Feinschliff-Runde (10.09.2026) durch eine Karten-Komponente
 * ersetzt wurde, ohne die zugehoerige CSS-Regel nachzuziehen - totes,
 * verwirrendes Selektor-Gewicht ohne sichtbare Wirkung.
 */
.tbs-ti-status-pair {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-32);
	align-items: start;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: var(--violet-050);
	padding: 30px var(--space-48) 0 var(--space-48);
	margin: var(--space-32) 0;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s;
}

.tbs-ti-status-pair:hover {
	border-color: var(--violet-300);
}

@media (min-width: 780px) {
	.tbs-ti-status-pair {
		grid-template-columns: 1.1fr 0.9fr;
	}
}

/*
 * Unter 375 px (Folgeauftrag 190, 320-px-Handys): Die Spalte war nur "1fr" (= mindestens so breit wie der Inhalt), die TI-Karte mit ihren
 * Zeilen brauchte rund 270 px und ragte bei 320 px 52 px ueber den Rand. Jetzt darf die Spalte schmaler werden (minmax(0, 1fr)), das
 * Seitenpolster der Kachel sinkt von 48 auf 24 px; die Zeilen der Karte brechen um (siehe blocks.css). Ab 375 px unveraendert.
 */
@media (max-width: 374px) {
	.tbs-ti-status-pair {
		grid-template-columns: minmax(0, 1fr);
		padding-left: var(--space-24);
		padding-right: var(--space-24);
	}
}

.tbs-ti-status-pair-status {
	display: block;
	align-self: center;
}

/*
 * Bild am unteren Rand der Kachel ausrichten (Nachbesserung 11.09.2026):
 * die TI-Status-Karte ist i. d. R. hoeher als das Bild, dadurch wirkte das
 * Bild mittig "schwebend". align-self: end schiebt es an den unteren Rand -
 * passt zur bestehenden Eckenrundung (12px 12px 19px 12px), die bereits fuer
 * einen buendigen Abschluss mit dem Kachel-Rand ausgelegt ist.
 */
.tbs-ti-status-pair-image {
	align-self: end;
}

.tbs-ti-status-pair-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px 12px 19px 19px;
}

@media (min-width: 780px) {
	.tbs-ti-status-pair-image img {
		border-radius: 12px 12px 19px 12px;
	}
}

/*
 * Native Spalten in einem Abschnitt ".tbs-bg-section" (Update Honorar+Plus, 02.10.2026):
 * Das Raster kommt aus der globalen Markierungsregel (tbs-2col-a/-b, siehe oben). Hier steht
 * nur, was für Spalten in einem solchen Abschnitt gilt: Unter 960 px bringt der Abschnitt
 * bereits 24 px Seitenrand mit, das allgemeine Spaltenpadding (siehe oben) würde sich sonst
 * verdoppeln. ".tbs-bg-section" mit Spalten kommt nur auf dieser Seite vor (Sponsoring hat
 * Abschnitte ohne Spalten, dort greift die Regel nicht).
 */
@media (max-width: 959px) {
	.tbs-bg-section > .wp-block-group__inner-container > .wp-block-group:is(.tbs-2col-a, .tbs-2col-b) {
		padding-left: 0;
		padding-right: 0;
	}
}

/*
 * Lesebreite per Markierung "tbs-lesebreite" (02.10.2026): Überschrift und Absätze eines
 * Abschnitts ".tbs-bg-section" stehen in Lesebreite (44rem, entspricht 70ch der
 * Fließtextschrift) mittig. Eigene Markierung statt allgemeiner Regel für ".tbs-bg-section",
 * damit der Abschnitt auf "Sponsoring" unverändert bleibt. Gesetzt im Inhalt von
 * "Update Honorar+Plus" (Abschnitt "Voraussetzungen für die Installation").
 */
.tbs-bg-section.tbs-lesebreite > .wp-block-group__inner-container > :is(h3, p) {
	max-width: 44rem;
	margin-left: auto;
	margin-right: auto;
}

/*
 * Schmales Formular per Markierung "tbs-form-schmal" (02.10.2026): Das eigene WPForms-
 * Formular der Empfehlungsaktion (WPForms #9529, Seite "Kunden empfehlen Kunden") liegt in
 * rohem areoi-Markup ohne die 640-px-Begrenzung des Kontakt-Blocks (".tbs-kontakt-inner")
 * und lief über die volle Seitenbreite. Die Klasse steht in den Formular-Einstellungen
 * (WPForms, "CSS-Klasse des Formulars") und landet am Container; andere Formulare
 * (Kontakt, Beratung anfordern, Seminar) tragen sie nicht und bleiben unverändert.
 */
.wpforms-container.tbs-form-schmal {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 var(--space-24);
}
/*
 * ---------------------------------------------------------------------------
 * Support-Button (Floating Action Button), Komponente 41 - 11.09.2026
 * ---------------------------------------------------------------------------
 * Markup siehe inc/support-fab.php (wp_footer-Hook), Einblendlogik siehe
 * assets/js/support-fab.js.
 *
 * Bewusst hier in style.css und nicht in blocks.css: blocks.css laedt nur bei
 * is_singular()/is_search()/is_404() (siehe inc/enqueue.php), der Button soll
 * aber auf jeder Seite erscheinen.
 *
 * Formsprache uebernommen von der Toast-Benachrichtigung aus
 * referenz/tbs-styleguide.html (Pill-Form, --shadow-2, Einblenden ueber
 * opacity + translateY); Flaeche/Hover entsprechen .tbs-btn-primary, damit
 * der Button nicht als Fremdkoerper wirkt.
 *
 * z-index 150: oberhalb von Sticky-Header (40) und Mega-Menue (50),
 * unterhalb von Mobile-Overlay (200) und Such-Overlay (300) - der Button
 * darf nicht ueber einem geoeffneten Dialog schweben.
 */
.tbs-support-fab {
	position: fixed;
	right: var(--space-24);
	bottom: var(--space-24);
	z-index: 150;
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1;
	color: #fff;
	background: var(--violet-800);
	text-decoration: none;
	padding: 12px 20px;
	border-radius: 100px;
	box-shadow: var(--shadow-2);
	/* Ausgangszustand: unsichtbar und nicht fokussierbar, bis die
	   Cookie-Consent-Entscheidung gefallen ist. */
	opacity: 0;
	transform: translateY(20px);
	visibility: hidden;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s, background 0.15s ease, box-shadow 0.25s ease;
}

.tbs-support-fab.is-visible {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s, background 0.15s ease, box-shadow 0.25s ease;
}

.tbs-support-fab:hover {
	background: var(--violet-900);
	box-shadow: 0 12px 28px rgba(57, 21, 68, 0.22), 0 3px 8px rgba(57, 21, 68, 0.12);
}

.tbs-support-fab.is-visible:hover {
	transform: translateY(-2px);
}

.tbs-support-fab:focus-visible {
	outline: 3px solid var(--violet-300);
	outline-offset: 3px;
}

.tbs-support-fab svg {
	flex: none;
	display: block;
}

/*
 * Unter 640px (Breakpoint-Skala Teil 3.4) vollstaendig ausgeblendet -
 * nicht verkleinert, nicht auf das Icon reduziert. display:none nimmt das
 * Element auch aus der Tab-Reihenfolge, es bleibt dort also nicht unsichtbar
 * fokussierbar zurueck.
 */
@media (max-width: 639px) {
	.tbs-support-fab {
		display: none;
	}
}

/*
 * Teil 2.8 (Animationen unterstuetzen die Bedienung, nicht die
 * Selbstdarstellung): Wer Systembewegung reduziert hat, bekommt denselben
 * Button ohne Einfahrbewegung - nur noch das Erscheinen selbst.
 */
@media (prefers-reduced-motion: reduce) {
	.tbs-support-fab,
	.tbs-support-fab.is-visible,
	.tbs-support-fab.is-visible:hover {
		transform: none;
		transition: opacity 0.01ms linear, visibility 0s linear, background 0.15s ease;
	}
}

/*
 * ---------------------------------------------------------------------------
 * Google-Rezensionen (Trustindex-Widget) - Breiten-Fix, 11.09.2026
 * ---------------------------------------------------------------------------
 * Fund auf "/das_unternehmen-tbs/": Das Widget des Plugins "Widgets for
 * Google Reviews" (Trustindex) wird per Shortcode als direktes Kind von
 * ".tbs-page-content" ausgegeben und bringt - anders als jeder Theme-Block -
 * keinen ".tbs-wrap" mit. Es lief dadurch ueber die volle Fensterbreite
 * (bei 1425px Viewport gemessen: 1425px statt der 1160px, die alle
 * Nachbarbloecke einhalten). Gleiche Fehlerklasse wie die frueheren
 * Vollbreite-Faelle (Erreichbarkeit-Box, WPForms auf "Kunden empfehlen
 * Kunden", Bild-Bloecke) und deshalb bewusst nach demselben Muster
 * geloest wie "> figure" und "> h2/h3/h4" weiter oben.
 *
 * Bewusst im Theme und nicht in der Plugin-CSS: Die Datei
 * "wp-content/uploads/trustindex-google-widget.css" wird vom Plugin bei
 * jeder Widget-Aenderung neu generiert - eine Anpassung dort waere beim
 * naechsten Speichern weg (gleicher Mechanismus wie beim
 * Complianz-Banner-CSS, siehe Teil 10).
 *
 * Zwei Selektoren, weil das Markup zwei Zustaende durchlaeuft: Der Server
 * liefert "<pre class="ti-widget">" (Trustindex' Schutz davor, dass
 * wpautop das Widget-HTML zerlegt), der CDN-Loader ersetzt das nach dem
 * Laden durch "<div class="ti-widget ...">". Ohne die pre-Variante blitzte
 * das Widget bis zum Loader-Lauf in voller Breite auf.
 */
.tbs-page-content > pre.ti-widget,
.tbs-page-content > div.ti-widget {
	max-width: var(--wrap-max);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--space-24);
	box-sizing: border-box;
}

/*
 * Trustindex-Widget im blockierten Zustand (Consent), 11.09.2026.
 *
 * Das Widget kommt serverseitig mit inline
 * "opacity:0; height:0 !important; overflow:hidden !important" - der
 * CDN-Loader entfernt das normalerweise nach dem Laden. Ist der Loader
 * mangels Einwilligung blockiert, bleibt das Element auf Hoehe 0 stehen
 * und der Complianz-Platzhalter waere unsichtbar: Der Besucher saehe an
 * dieser Stelle gar nichts und haette keine Moeglichkeit, die Rezensionen
 * per Klick nachzuladen.
 *
 * Komplement zum Script-Center-Eintrag (placeholder_class "ti-widget") und
 * zum Bild-Filter in inc/consent.php. Greift nur, solange Complianz die
 * Platzhalter-Klasse gesetzt hat - nach der Einwilligung entfernt
 * Complianz sie, der Loader raeumt das Inline-Style ab und die Regeln
 * unten greifen nicht mehr.
 *
 * Die "!important" sind hier nicht Bequemlichkeit, sondern noetig: Sie
 * ueberschreiben ein Inline-Style, das selbst "!important" traegt.
 */
.tbs-page-content pre.ti-widget.cmplz-blocked-content-container {
	opacity: 1 !important;
	height: auto !important;
	margin: 0 0 14px !important; /* gleicht den Abstand des geladenen Widgets (div) nach unten aus, gemessen 08.10.2026 */
	min-height: 246px !important; /* = Höhe des geladenen Widgets (gemessen 08.10.2026), kein Layoutsprung bei der Freigabe */
	overflow: hidden !important;

	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--violet-050) !important;
	border: 1.5px dashed var(--violet-300) !important;
	border-radius: var(--radius-m);
	cursor: pointer;
	font-family: var(--font-body);
	transition: background 0.15s ease, border-color 0.15s ease;
}

/* Schmale Ansicht: Das geladene Widget ist bis etwa 440 px Breite höher (einspaltig, Texte brechen öfter um), gemessen 293 px. */
@media (max-width: 440px) {
	.tbs-page-content pre.ti-widget.cmplz-blocked-content-container {
		min-height: 293px !important;
		margin-bottom: 16px !important;
	}
}

.tbs-page-content pre.ti-widget.cmplz-blocked-content-container:hover,
.tbs-page-content pre.ti-widget.cmplz-blocked-content-container:focus-visible {
	background: var(--violet-100);
	border-color: var(--violet-600);
}

.tbs-page-content pre.ti-widget.cmplz-blocked-content-container:focus-visible {
	outline: 3px solid var(--violet-300);
	outline-offset: 3px;
}

/*
 * Der Hinweistext kommt aus dem CSS, nicht aus dem Markup: Das Widget-HTML
 * stammt von Trustindex und wird bei jeder Aktualisierung neu erzeugt - was
 * wir dort hineinschreiben, waere beim naechsten Abgleich weg.
 */
.tbs-page-content pre.ti-widget.cmplz-blocked-content-container::after {
	content: 'Google-Rezensionen anzeigen \A Dabei werden Daten an Trustindex übertragen. Klicken Sie hier, um Marketing-Cookies zu akzeptieren.';
	white-space: pre-line;
	display: block;
	max-width: 46ch;
	padding: var(--space-24);
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-700);
}

/*
 * Das Markup ist im blockierten Zustand doppelt verschachtelt: Aussen das
 * "<pre class='ti-widget'>", das Complianz zum Platzhalter-Container macht,
 * innen das eigentliche Widget-"<div class='ti-widget'>" mit dem
 * Inline-Kollaps.
 *
 * Das innere Element wird hier ganz ausgeblendet. Grund (live gemessen):
 * Complianz versieht zusaetzlich jedes der 30 blockierten Sterne-/
 * Icon-Bilder mit einem eigenen Platzhalter samt eigenem
 * "Klicke hier"-Hinweis. Alle 30 stecken im kollabierten inneren Widget,
 * werden auf Breite/Hoehe 0 gequetscht und ergeben nur Unrat im DOM -
 * gewollt ist ein einziger Platzhalter auf dem Container. Zusaetzlicher
 * Effekt: Der Widget-Inhalt selbst bleibt im blockierten Zustand verdeckt,
 * statt mit grauen Ersatzbildern halb aufgedeckt zu werden.
 */
.tbs-page-content pre.ti-widget.cmplz-blocked-content-container > .ti-widget {
	display: none !important;
}

/*
 * Nachwirkung der Bild-Blockierung, gefunden beim Live-Test nach der
 * Einwilligung (11.09.2026): Complianz wickelt jedes blockierte Bild in ein
 * "<div class='cmplz-placeholder-parent'>". Dieser Wrapper bleibt auch
 * nach der Freigabe im DOM stehen - und weil ein <div> ein Blockelement
 * ist, stand danach jeder der fuenf Sterne einer Rezension in einer eigenen
 * Zeile statt nebeneinander.
 *
 * "display: contents" nimmt den Wrapper aus dem Layout heraus, ohne ihn zu
 * entfernen: Die Bilder ordnen sich wieder so an, wie das Trustindex-CSS
 * es vorsieht, und Complianz' Freigabe-Mechanik (die den Wrapper braucht)
 * bleibt unangetastet.
 */
.ti-widget .cmplz-placeholder-parent {
	display: contents;
}