/*
 * EXT:t3s_pillar_pages - Stile fuer die Pillar-Templates.
 *
 * Eingebunden wird die Datei vom Partial T3sb/PillarStyles.html ueber
 * <f:asset.css>. Dadurch landet sie einmal pro Seite im <head> statt als
 * <style>-Block mitten im Markup - auch dann, wenn mehrere Pillar-Plugins
 * auf einer Seite stehen. Der Browser kann sie ausserdem cachen.
 *
 * Kurz-Infos der Cluster-Links erscheinen bei Hover bzw. Tastaturfokus -
 * reines CSS, kein JavaScript. Auf Touch-Geraeten (kein Hover) bleiben sie
 * aus, dort fuehrt der Tap direkt zur Seite. Farben kommen aus den
 * Bootstrap-CSS-Variablen, damit Light und Dark Mode passen.
 */

/* Abstand, den die Seite beim Sprung auf einen Anker oberhalb frei laesst.
   Muss mindestens so hoch sein wie eine feststehende Navbar.
   Einziger Stellwert: --t3sb-pillar-scroll-offset. */
.t3sb-pillar { --t3sb-pillar-scroll-offset: 6rem; }
.t3sb-pillar [id^="t3sbPillar"] {
	scroll-margin-top: var(--t3sb-pillar-scroll-offset, 6rem);
}

/* Farben aus den Bootstrap-Variablen, damit das Verzeichnis dem Farbschema
   folgt. Welches Schema gilt, entscheidet das data-bs-theme, das die
   Templates aus der Einstellung "Farbschema des Inhaltsverzeichnisses"
   setzen - ab Werk "dark", also der dunkle Kasten wie bisher. */
.t3sb-pillar-toc {
	background-color: var(--bs-secondary-bg);
	color: var(--bs-body-color);
}
.t3sb-pillar-toc .card-body { color: inherit; }
/* Nummer als eigenes Element statt ::marker, damit sie zusammen mit dem
   Linktext ueber align-items:start ausgerichtet werden kann. Beide
   bekommen line-height:1, sonst sitzt die Ziffer tiefer. */
/* Das Inhaltsverzeichnis fuellt spaltenweise, nicht zeilenweise: bei zwei
   Spalten stehen 1-2-3 untereinander in der linken und 4-5-6 in der
   rechten. Das Bootstrap-Raster kann das nicht - es ordnet immer
   zeilenweise an (1-2 / 3-4 / 5-6). CSS-Mehrspaltensatz schon, und die
   Reihenfolge im Quelltext bleibt dabei 1..n, was fuer Screenreader und
   die Nummerierung wichtig ist. */
.t3sb-pillar-toc[data-t3sb-toc] .t3sb-pillar-toc-list {
	counter-reset: t3sb-pillar-toc;
}
.t3sb-pillar-toc-list {
	columns: 1;
	column-gap: 1.5rem;
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
@media (min-width: 768px) {
	.t3sb-pillar-toc-list { columns: 2; }
}
.t3sb-pillar-toc-list > li {
	/* Ein Eintrag darf nicht zwischen zwei Spalten zerrissen werden */
	break-inside: avoid;
	margin-bottom: .75rem;
}
.t3sb-pillar-toc-list > li:last-child { margin-bottom: 0; }
/* Nur die filterbare Uebersicht (T3sPillarPageCards) zaehlt per Counter.
   T3sPillarPage bringt seine Nummer weiterhin als .t3sb-pillar-toc-num
   mit - ohne diese Einschraenkung stuende dort zweimal eine Zahl. */
.t3sb-pillar-toc[data-t3sb-toc] .t3sb-pillar-toc-list > li::before {
	counter-increment: t3sb-pillar-toc;
	content: counter(t3sb-pillar-toc) ".";
	line-height: 1;
	opacity: .65;
	font-variant-numeric: tabular-nums;
}
/* display:none muss !important tragen: die Eintraege sind d-flex, und
   Bootstraps Utilities setzen ihr display selbst mit !important. */
.t3sb-pillar-toc-list > li[hidden] { display: none !important; }
.t3sb-pillar-toc-num {
	line-height: 1;
	opacity: .65;
	font-variant-numeric: tabular-nums;
}
.t3sb-pillar-toc-title {
	padding-bottom: .75rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--bs-border-color-translucent);
}

.t3sb-pillar-toc a {
	line-height: 1;
	color: inherit;
	text-decoration: none;
}
.t3sb-pillar-toc a:hover,
.t3sb-pillar-toc a:focus-visible {
	color: inherit;
	text-decoration: underline;
}

/* Kein Rahmen, die Karte traegt sich ueber den Schatten.

   Der Schatten ist bewusst schwarz und kippt NICHT mit dem Farbschema:
   mit --bs-body-color-rgb wurde daraus im Dark Mode ein weisser Schein um
   jede Karte - ein Leuchten, kein Schatten. Auf dunklem Grund tritt der
   schwarze Schatten von selbst zurueck, und genau das ist gewollt. */
.t3sb-pillar-card {
	border: 0;
	box-shadow:
		0 .125rem .25rem rgba(0, 0, 0, .12),
		0 .5rem 1.25rem rgba(0, 0, 0, .24);
}

/* Schaltet die Seite per Umschalter auf dunkel, faellt der Schatten ganz
   weg. Fuer ein Theme, das ohne data-bs-theme von Haus aus dunkel ist,
   erledigt das schon die schwarze Farbe oben. */
[data-bs-theme="dark"] .t3sb-pillar-card {
	box-shadow: none;
}

/* Anker ist der einzelne Chip: die Kurz-Info sitzt direkt unter dem
   Link, zu dem sie gehoert - auch wenn die Chips auf mehrere Zeilen
   umbrechen. An der Liste verankert stand sie sonst immer unter der
   ganzen Karte, weit weg vom eigentlichen Link.

   Dass sie dabei seitlich ueber die Karte hinausragen darf, ist
   gewollt: die Zelle wird bei Hover per z-index nach vorn geholt, und
   das Raster schneidet seit overflow: visible nichts mehr ab.
   max-width haelt sie auf schmalen Schirmen im Bild. */
.t3sb-pillar-cluster-item { position: relative; }
.t3sb-pillar-cluster-info {
	position: absolute;
	left: 0;
	top: calc(100% + .4rem);
	z-index: 5;
	width: max-content;
	max-width: min(22rem, calc(100vw - 2rem));
	padding: .75rem .9rem;
	font-size: .875rem;
	line-height: 1.45;
	text-align: left;
	white-space: normal;
	color: var(--bs-body-color);
	background-color: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease-in-out;
}
/* Der letzte Chip einer Zeile steht am weitesten rechts - dort nach
   links oeffnen, sonst schiebt die Kurz-Info die Seite auf. */
.t3sb-pillar-cluster-item:last-child .t3sb-pillar-cluster-info {
	left: auto;
	right: 0;
}
.t3sb-pillar-cluster-item:hover .t3sb-pillar-cluster-info,
.t3sb-pillar-cluster-item:focus-within .t3sb-pillar-cluster-info {
	opacity: 1;
	visibility: visible;
}
@media (hover: none) {
	.t3sb-pillar-cluster-info { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.t3sb-pillar-cluster-info { transition: none; }
}
/* --- Nur wirksam, wenn Shuffle.js geladen wurde -------------------
   Shuffle positioniert die Karten absolut und rechnet die
   Spaltenbreite aus dem Messelement .js-shuffle-sizer. Dafuer muss der
   Container ein normaler Block mit position:relative sein - das
   Flexbox-Verhalten der Bootstrap-Zeile wuerde dazwischenfunken. Die
   Breiten aus row-cols-* bleiben erhalten, weil Bootstrap dort eine
   echte width setzt und nicht nur flex-basis.

   Die Klasse is-shuffled setzt das JavaScript erst, wenn der Import
   geklappt hat. Ohne Shuffle - oder wenn das Modul nicht laedt -
   bleibt das Raster also unveraendert. */
.t3sb-pillar-grid.is-shuffled {
	display: block;
	position: relative;
	/* Bootstrap zieht die Zeile um die Rinne nach oben; das gleicht
	   sonst nichts mehr aus, weil die Karten keine margin mehr haben. */
	margin-top: 0;
}
.t3sb-pillar-grid.is-shuffled > * {
	/* .row > * hat margin-top: var(--bs-gutter-y) - das wuerde jede
	   absolut gesetzte Karte um eine Rinne nach unten verschieben. */
	margin: 0;
	/* Den senkrechten Abstand muss das padding uebernehmen: .row > *
	   bringt von Haus aus NUR ein waagerechtes padding mit
	   (--bs-gutter-x), nach unten gar keins. Ohne diese Zeile stossen
	   die Karten im Shuffle-Betrieb aneinander. Shuffle misst die
	   Hoehe inklusive padding, die Luecke bleibt also beim Umsortieren
	   erhalten. Wert kommt aus g-4 bzw. gy-* am Grid. */
	padding-bottom: var(--bs-gutter-y, 1.5rem);
}
/* Das Messelement darf NIE eine Gitterzelle belegen, sonst rutschen
   ohne Shuffle alle Karten um eine Position weiter. Absolut gesetzt
   ist es aus dem Fluss, behaelt aber die Breite aus row-cols-* -
   Bootstrap setzt dort eine echte width, keine flex-basis. Genau die
   liest Shuffle als Spaltenbreite ab. */
.t3sb-pillar-grid .js-shuffle-sizer {
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	visibility: hidden;
}
.t3sb-pillar-grid { position: relative; }

/* Shuffle zwingt dem Container in #validateStyles() ein
   overflow: hidden per Inline-Style auf, damit ein- und ausblendende
   Karten keine Scrollbalken erzeugen. Zusammen mit der Hoehe, die es
   exakt auf die Karten rechnet, schneidet das jede Kurz-Info ab, die
   unten aus dem Raster ragt - also genau die der letzten Reihe.
   Inline-Style laesst sich nur mit !important ueberschreiben. Die
   Karten bewegen sich ohnehin nur innerhalb des Rasters, ein
   Scrollbalken entsteht dadurch nicht. */
.t3sb-pillar-grid.is-shuffled { overflow: visible !important; }

/* Gleich hohe Reihen im Shuffle-Betrieb steuert das JavaScript: es
   setzt je Reihe eine min-height direkt an den Karten (Inline-Style).
   Hier gibt es dafuer nichts zu tun - der Hinweis steht nur, damit
   beim Suchen nach der Regel klar ist, wo sie herkommt.
   Ohne Shuffle erledigt Bootstrap das von selbst: die Zellen einer
   Zeile werden auf gleiche Hoehe gestreckt, .card h-100 fuellt sie
   aus. */

/* Die Kurz-Info eines Cluster-Links ragt unten aus der Karte heraus.
   Ohne Shuffle regelt das der Dokumentfluss. Mit Shuffle bekommt jede
   Zelle durch das transform einen eigenen Stapelkontext - der
   z-index der Kurz-Info gilt dann nur INNERHALB ihrer Zelle, und jede
   im Quelltext spaetere Karte liegt darueber. Angehoben werden muss
   deshalb die ganze Zelle, nicht die Kurz-Info.

   Gilt bewusst auch ohne .is-shuffled: dort schadet es nicht und das
   Verhalten bleibt in beiden Betriebsarten gleich. */
.t3sb-pillar-grid > * {
	position: relative;
	z-index: 0;
}
.t3sb-pillar-grid > *:hover,
.t3sb-pillar-grid > *:focus-within {
	z-index: 20;
}
/* Die Karte darf die Kurz-Info nicht abschneiden. */
.t3sb-pillar-grid .t3sb-pillar-card { overflow: visible; }
@media (prefers-reduced-motion: reduce) {
	.t3sb-pillar-grid.is-shuffled .shuffle-item { transition: none !important; }
}

/* --------------------------------------------------------------------
   Guide: Inhaltsverzeichnis als Auswahlfeld
   --------------------------------------------------------------------
   Ausbaustufe 1 des Guide-Templates. Das Feld bleibt eine Zeile hoch,
   egal wie viele Kapitel folgen - der Grund, warum lange Guides ihre
   Kapitelauswahl so bauen.
   Die Breite ist begrenzt: ueber die volle Spaltenbreite gezogen sieht
   ein Auswahlfeld nach Formular aus, nicht nach Navigation. */
.t3sb-pillar-guide .t3sb-pillar-toc-select {
	max-width: 32rem;
}
.t3sb-pillar-guide .t3sb-pillar-toc-select .form-label {
	font-size: 1.125rem;
}
/* Im Kopfbereich steht das Feld in seiner eigenen Spalte - dort darf es
   die volle Breite nehmen. */
.t3sb-guide-head .t3sb-pillar-toc-select {
	max-width: none;
}

/* --------------------------------------------------------------------
   Guide: Inhaltsverzeichnis, ruhend und angeheftet
   --------------------------------------------------------------------
   Ruhend steht das Verzeichnis in seiner Spalte, die Einleitung daneben.
   Angeheftet loest es sich heraus und spannt sich ueber die gesamte
   Breite - der Inhalt laeuft dahinter durch.

   Den Wechsel setzt PillarToc.js ueber die Klasse is-stuck. Mit
   position:sticky allein ginge das nicht: ein sticky-Element behaelt
   seine Breite.

   Zwei Stellwerte:

     --t3sb-toc-sticky-top   Abstand nach oben, Standard 6rem.
                             Mindestens so hoch wie eine feststehende
                             Navbar, sonst verschwindet die Leiste
                             darunter. Je Ausgabe setzbar ueber
                             plugin.tx_t3spillarpages.settings.tocStickyTop,
                             das Template schreibt den Wert als
                             Inline-Variable.

     --t3sb-toc-z-index      Standard 1020 - derselbe Wert, den Bootstrap
                             fuer sticky vergibt. Hoeher setzen, wenn eine
                             eigene Navbar darueber liegt. */
.t3sb-guide-toc-sentinel {
	height: 1px;
	margin-bottom: -1px;
}

/* Haelt die Spalte offen, waehrend das Panel herausgeloest ist - sonst
   klappt die Zeile beim Anheften zusammen. Die Hoehe traegt das Skript
   ein. */
.t3sb-guide-toc.is-stuck {
	min-height: var(--t3sb-toc-height, 0);
}
.t3sb-guide-toc.is-stuck > .t3sb-pillar-toc-panel {
	position: fixed;
	inset-inline: 0;
	top: var(--t3sb-toc-sticky-top, 6rem);
	z-index: var(--t3sb-toc-z-index, 1020);
	border-inline: 0;
}
/* Ueber die volle Breite sieht ein senkrechter Rand falsch aus. */
.t3sb-guide-toc.is-stuck > .t3sb-pillar-toc-panel > .collapse,
.t3sb-guide-toc.is-stuck > .t3sb-pillar-toc-panel > .collapsing {
	inset-inline: 0;
	border-inline: 0;
}

/* --------------------------------------------------------------------
   Guide: Inhaltsverzeichnis als Panel
   --------------------------------------------------------------------
   Aufbau der Vorlage: Kapitel untereinander, Unterthemen aufklappbar,
   das gerade gelesene Kapitel mit einem Balken am linken Rand.

   Farben kommen aus den Bootstrap-CSS-Variablen, damit Light und Dark
   Mode ohne zweiten Regelsatz passen. */
.t3sb-pillar-toc-panel {
	position: relative;
	/* Die aufgeklappte Liste haengt absolut unter der Kopfzeile und ragt
	   damit ueber das, was im Dokument danach kommt. Ohne z-index gewinnt
	   dort die Dokumentreihenfolge - das erste Kapitel mit randlosem Bild
	   legte sich ueber die Liste. Der angeheftete Zustand setzt weiter
	   unten seinen eigenen, hoeheren Wert. */
	z-index: var(--t3sb-toc-panel-z-index, 10);
	border: 1px solid var(--bs-border-color);
	/* Eckig, wie in der Vorlage. Eine gerundete Huelle ginge hier auch
	   nicht ohne Weiteres: overflow:hidden wuerde die absolut liegende
	   Liste abschneiden, und die eckige Kopfzeile ragte in die Rundung. */
	border-radius: 0;
	background-color: var(--bs-body-bg);
}

/* Die Liste haengt unter der Kopfzeile statt in ihr: so schiebt das
   Aufklappen den Seiteninhalt nicht nach unten, sondern legt sich
   darueber - wie in der Vorlage. Nur die AEUSSERE Liste, die
   Unterthemen bleiben im Fluss (deshalb der Kindselektor).
   .collapsing braucht dieselben Regeln, sonst springt die Liste
   waehrend der Animation an ihren alten Platz. */
.t3sb-pillar-toc-panel > .collapse,
.t3sb-pillar-toc-panel > .collapsing {
	position: absolute;
	inset-inline: -1px;
	top: 100%;
	max-height: min(70vh, 32rem);
	overflow-y: auto;
	border: 1px solid var(--bs-border-color);
	border-top: 0;
	background-color: var(--bs-body-bg);
	box-shadow: 0 .5rem 1rem rgba(var(--bs-body-color-rgb), .15);
}
.t3sb-pillar-toc-panel .t3sb-toc-title {
	margin: 0;
	font-size: 1rem;
}
/* Die Kopfzeile ist ein Schalter, soll aber nicht wie eine Schaltflaeche
   aussehen: volle Breite, Chevron links, sonst wie eine Ueberschrift. */
.t3sb-pillar-toc-panel .t3sb-toc-head {
	display: block;
	width: 100%;
	padding: .875rem 1.25rem;
	border: 0;
	border-bottom: 1px solid var(--bs-border-color);
	background-color: var(--bs-tertiary-bg);
	border-radius: 0;
	color: inherit;
	font-weight: 600;
	text-align: start;
}
.t3sb-pillar-toc-panel .t3sb-toc-head svg {
	flex: 0 0 auto;
	transition: transform .2s ease-in-out;
}
.t3sb-pillar-toc-panel .t3sb-toc-head.collapsed svg {
	transform: rotate(-90deg);
}
/* Zugeklappt braucht die Kopfzeile keine Trennlinie nach unten. */
.t3sb-pillar-toc-panel .t3sb-toc-head.collapsed {
	border-bottom-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
	.t3sb-pillar-toc-panel .t3sb-toc-head svg {
		transition: none;
	}
}
.t3sb-pillar-toc-panel .t3sb-toc-list,
.t3sb-pillar-toc-panel .t3sb-toc-sub {
	margin: 0;
	padding: 0;
	list-style: none;
}
.t3sb-pillar-toc-panel .t3sb-toc-item + .t3sb-toc-item {
	border-top: 1px solid var(--bs-border-color-translucent);
}

/* Die Zeile traegt den Balken und die Flaeche, nicht der Link - sonst
   sitzt der Balken bei mehrzeiligen Titeln nur neben der ersten Zeile,
   und angeheftet endete die Flaeche am Containerrand. Die Zeile laeuft
   deshalb immer ueber die volle Breite des Panels; das Nebeneinander von
   Link und Aufklapp-Knopf macht die Klammer darin. */
.t3sb-pillar-toc-panel .t3sb-toc-row {
	border-inline-start: 3px solid transparent;
}
.t3sb-pillar-toc-panel .t3sb-toc-row-inner {
	display: flex;
	align-items: stretch;
	gap: .5rem;
}

/* Die Kopfzeile genauso: der Knopf ist die Flaeche, die Klammer darin
   ordnet Chevron und Beschriftung nebeneinander. */
.t3sb-pillar-toc-panel .t3sb-toc-head-inner {
	display: flex;
	align-items: center;
	gap: .75rem;
}
.t3sb-pillar-toc-panel .t3sb-toc-link {
	flex: 1 1 auto;
	padding: .75rem 1.25rem;
	color: inherit;
	text-decoration: none;
}
.t3sb-pillar-toc-panel .t3sb-toc-link:hover,
.t3sb-pillar-toc-panel .t3sb-toc-link:focus-visible {
	text-decoration: underline;
}

/* Aufklapp-Knopf: nur der Chevron, keine Schaltflaechen-Optik. */
.t3sb-pillar-toc-panel .t3sb-toc-toggle {
	flex: 0 0 auto;
	padding: 0 1rem;
	border: 0;
	background: none;
	color: inherit;
	line-height: 1;
}
.t3sb-pillar-toc-panel .t3sb-toc-toggle svg {
	transition: transform .2s ease-in-out;
}
.t3sb-pillar-toc-panel .t3sb-toc-toggle.collapsed svg {
	transform: rotate(-90deg);
}
@media (prefers-reduced-motion: reduce) {
	.t3sb-pillar-toc-panel .t3sb-toc-toggle svg {
		transition: none;
	}
}

/* Unterthemen: eingerueckt, etwas kleiner, ohne Trennlinien.
   Die Zeilen stehen luftiger als zuvor, aber knapp enger als die Kapitel
   darueber (.75rem) - der Rang bleibt am Abstand ablesbar, ohne dass die
   Liste gedraengt wirkt. */
.t3sb-pillar-toc-panel .t3sb-toc-sub .t3sb-toc-link {
	padding-block: .6875rem;
	padding-inline-start: 2.25rem;
	font-size: .9375rem;
}

/* Das gerade gelesene Kapitel - setzt PillarToc.js. */
.t3sb-pillar-toc-panel .t3sb-toc-current > .t3sb-toc-row {
	border-inline-start-color: var(--bs-primary);
	background-color: var(--bs-secondary-bg);
}
.t3sb-pillar-toc-panel .t3sb-toc-current > .t3sb-toc-row .t3sb-toc-link {
	font-weight: 600;
}
/* Die Einleitung ist das erste Kapitel, nicht ein Kasten neben der
   Auswahl: etwas groesserer Fliesstext, kein eigener Rahmen. */
.t3sb-guide-intro > .t3s-pillar-intro {
	font-size: 1.0625rem;
}
.t3sb-guide-intro > .t3s-pillar-intro > :last-child {
	margin-bottom: 0;
}

/* ----------------------------------------------------------------------
   Guide: Kapitel, das selbst eine Pillar-Seite ist (T3sb/GuideHeroSection)
   ----------------------------------------------------------------------
   Das Bild laeuft ueber die gesamte Seitenbreite, Titel und Untertitel
   liegen als Overlay darauf. Voraussetzung ist, dass die Ausgabe selbst in
   keinem Container steckt - auf doktype 145 ist "Container (fuer die ganze
   Seite)" genau deshalb auf "kein Container" festgelegt. Der Container aus dem Seitenfeld "Container der Ausgabe"
   greift nur innerhalb des Overlays und unterhalb des Bildes.

   Seitenverhaeltnis und Ueberlagerung sind ueber Custom Properties
   einstellbar, z. B. im eigenen Stylesheet:
     .t3sb-guide-hero { --t3sb-guide-hero-ratio: 16 / 9; }
*/
.t3sb-guide-hero-media {
	position: relative;
	overflow: hidden;
}

/* aspect-ratio + object-fit statt fester Crop-Masse: ein Bild im Hochformat
   wird so zugeschnitten statt die Seite auseinanderzuziehen, und der
   Bildprozessor muss nur eine Variante erzeugen. */
.t3sb-guide-hero-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--t3sb-guide-hero-ratio, 21 / 9);
	object-fit: cover;
	object-position: var(--t3sb-guide-hero-position, center);
}
@media (max-width: 767.98px) {
	.t3sb-guide-hero-img {
		aspect-ratio: var(--t3sb-guide-hero-ratio-sm, 4 / 3);
	}
}

/* Das Kopfvideo teilt sich alle Masse mit dem Bild - es traegt dieselbe
   Klasse. Nur der Grund gehoert ihm allein: bis der erste Frame steht,
   scheint sonst die Seitenfarbe durch, und bei einem dunklen Video sieht man
   das als Aufblitzen. */
.t3sb-guide-hero-video {
	background-color: var(--t3sb-guide-hero-video-bg, #0b1622);
}

/* Der Verlauf traegt die Lesbarkeit, nicht ein flaechiger Schleier: das
   Bild bleibt oben unangetastet. */
.t3sb-guide-hero-overlay {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding-block: clamp(1rem, 4vw, 2.5rem);
	color: #fff;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, var(--t3sb-guide-hero-shade, .72)),
		rgba(0, 0, 0, calc(var(--t3sb-guide-hero-shade, .72) * .45)) 55%,
		rgba(0, 0, 0, 0)
	);
}

/* Ohne Container liegt der Text sonst an der Fensterkante. Gilt fuer beide
   Abschnittsarten des Guide-Templates: die randlose Kapitelseite und den
   gewoehnlichen Abschnitt. */
.t3sb-pillar-gutter {
	padding-inline: var(--t3sb-pillar-gutter, 1rem);
}

.t3sb-guide-hero-title {
	margin-bottom: .25rem;
	font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	font-weight: 700;
	line-height: 1.15;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.t3sb-guide-hero-title a {
	color: inherit;
	text-decoration: none;
}
.t3sb-guide-hero-title a:hover,
.t3sb-guide-hero-title a:focus-visible {
	text-decoration: underline;
}

.t3sb-guide-hero-subtitle {
	margin-bottom: 0;
	font-size: clamp(1rem, .9rem + .5vw, 1.375rem);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.t3sb-guide-hero-body {
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

/* Sehr schmale Anzeigen: das Overlay wuerde ueber dem Bild mehr als die
   halbe Hoehe einnehmen. Dort steht der Titel unter dem Bild. */
@media (max-width: 575.98px) {
	.t3sb-guide-hero-overlay {
		position: static;
		color: inherit;
		background: none;
		padding-top: 1rem;
		padding-bottom: 0;
	}
	.t3sb-guide-hero-title,
	.t3sb-guide-hero-subtitle {
		text-shadow: none;
	}
	.t3sb-guide-hero-body {
		padding-top: 1rem;
	}
}

/* ----------------------------------------------------------------------
   Weiterfuehrende Artikel, Listenform (T3sb/PillarCluster, variant="list")
   ----------------------------------------------------------------------
   Das Guide-Template loest die Hover-Chips auf: im Kapitel steht der
   Kurztext direkt unter dem Titel. Aufbau wie die Unterthemen im
   Inhaltsverzeichnis - eingerueckt, mit Trennlinien, Titel in normaler
   Textfarbe. Auf Touchgeraeten gibt es keinen Hover; dort war die Kurz-Info
   der Chips ohnehin nie zu sehen. */
/* Trennlinien, Hover-Flaeche und Kurztext kommen aus currentColor, nicht
   aus --bs-border-color / --bs-secondary-bg / --bs-secondary-color. Jene
   sind feste Farben aus dem data-bs-theme des Dokuments; die Liste steht
   aber oft in einem Abschnitt mit eigener Hintergrundfarbe, und dann passt
   das Farbschema nicht zu dem, was man sieht - heller Hover-Grund unter
   hellem Text, unsichtbare Trennlinien. currentColor ist die Textfarbe,
   die dort tatsaechlich gilt, und liegt damit immer richtig herum.

   Jeweils zwei Deklarationen: die erste ist die Rueckfallebene fuer
   Browser ohne color-mix(), die zweite gewinnt, wo es unterstuetzt wird. */
.t3sb-pillar-cluster-list {
	border-block-start: 1px solid var(--bs-border-color-translucent);
	border-block-start-color: color-mix(in srgb, currentColor 25%, transparent);
}
.t3sb-pillar-cluster-entry {
	padding-block: .75rem;
	padding-inline-start: 1rem;
	border-block-end: 1px solid var(--bs-border-color-translucent);
	border-block-end-color: color-mix(in srgb, currentColor 25%, transparent);
	border-inline-start: 3px solid transparent;
}
.t3sb-pillar-cluster-entry:hover,
.t3sb-pillar-cluster-entry:focus-within {
	border-inline-start-color: var(--bs-primary);
	background-color: var(--bs-secondary-bg);
	background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.t3sb-pillar-cluster-title {
	display: block;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}
.t3sb-pillar-cluster-title:hover,
.t3sb-pillar-cluster-title:focus-visible {
	text-decoration: underline;
}

/* currentColor im color-Wert ist der geerbte Wert, nicht der eigene -
   die Regel ist also nicht zirkulaer. */
.t3sb-pillar-cluster-text {
	margin: .25rem 0 0;
	color: var(--bs-secondary-color);
	color: color-mix(in srgb, currentColor 75%, transparent);
	font-size: .9375rem;
}

/* ----------------------------------------------------------------------
   Abschnitt als Media Object (T3sb/PillarSection, layout="media")
   ----------------------------------------------------------------------
   Ein kleines Bild links, der Text daneben. Die Breite steht hier und
   nicht als Utility-Klasse am Markup, damit sie sich an einer Stelle
   aendern laesst - und weil sie unterhalb von sm ohnehin nicht gilt: dort
   stehen Bild und Text untereinander, das Bild ueber die volle Breite.

   Ohne Bild traegt die Textspalte kein ms-*, es bleibt also kein leerer
   Streifen links stehen. */
.t3sb-pillar-media-figure {
	width: 100%;
}
@media (min-width: 576px) {
	.t3sb-pillar-media-figure {
		width: var(--t3sb-pillar-media-width, 14rem);
	}
}
.t3sb-pillar-media-img {
	width: 100%;
	height: auto;
}

/* ----------------------------------------------------------------------
   Ausrichtung der angehefteten Kapitelleiste
   ----------------------------------------------------------------------
   Angeheftet loest sich das Panel aus seiner Spalte und spannt sich ueber
   die volle Fensterbreite (position: fixed). Kopfzeile und Liste liegen
   deshalb je in einem Bootstrap-Container, damit ihr Text buendig zum
   uebrigen Seiteninhalt steht statt an der Fensterkante.

   Ruhend steckt das Panel ohnehin schon in einer Spalte des Containers -
   ein zweiter Container darin waere eine doppelte Polsterung und eine
   Breitenbegrenzung in einer ohnehin schmalen Spalte. Hier wird er deshalb
   zurueckgenommen. Ohne JavaScript gibt es kein .is-stuck, dann gilt
   dauerhaft dieser Fall - und das ist richtig so. */
.t3sb-guide-toc:not(.is-stuck) .t3sb-toc-align {
	max-width: none;
	width: auto;
	padding-inline: 0;
	margin-inline: 0;
}

/* Angeheftet fluchtet der Text mit dem Containerrand. Die Flaechen selbst -
   Kopfzeile, Zeilen, Trennlinien - laufen ohne Zutun bis an die
   Fensterkante, weil der Container INNERHALB von ihnen liegt.

   Die eigene waagerechte Innenpolsterung von Link und Aufklapp-Knopf faellt
   dabei weg, sie wuerde den Text um ihren Betrag weiter nach innen
   schieben. Senkrecht bleibt sie, die Zeilenhoehen aendern sich also
   nicht. */
.t3sb-guide-toc.is-stuck .t3sb-toc-head,
.t3sb-guide-toc.is-stuck .t3sb-toc-link,
.t3sb-guide-toc.is-stuck .t3sb-toc-toggle {
	padding-inline: 0;
}
.t3sb-guide-toc.is-stuck .t3sb-toc-sub .t3sb-toc-link {
	padding-inline-start: 1rem;
}

/* ----------------------------------------------------------------------
   Seitensymbole aus EXT:iconpack
   ----------------------------------------------------------------------
   Ohne die Extension oder ohne gesetztes Symbol entsteht das span gar
   nicht erst - diese Regeln laufen dann ins Leere.

   Die Groesse kommt aus der Schrift (1em), damit das Symbol in der
   Ueberschrift mitwaechst und im Verzeichnis klein bleibt. Die feste
   Breite haelt die Titel untereinander buendig, auch wenn ein Symbol
   schmaler ist als das andere. */
.t3sb-pillar-icon,
.t3sb-toc-icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 1.25em;
	margin-inline-end: .5em;
	text-align: center;
	line-height: inherit;
}
.t3sb-pillar-icon svg,
.t3sb-toc-icon svg {
	width: 1em;
	height: 1em;
	vertical-align: -.125em;
}
/* Im Verzeichnis etwas zurueckgenommen: das Symbol ordnet, es soll den
   Titel nicht ueberstrahlen. */
.t3sb-toc-icon {
	color: var(--bs-secondary-color);
}
.t3sb-toc-current > .t3sb-toc-row .t3sb-toc-icon {
	color: var(--bs-primary);
}

/* Fuss des Media Objects: er steht unter dem Bild, nicht neben ihm, und
   braucht deshalb einen eigenen Abstand nach oben. */
.t3sb-pillar-media-footer {
	margin-top: 1rem;
}

/* ----------------------------------------------------------------------
   Kategorien und Tags (T3sb/PillarBadges)
   ----------------------------------------------------------------------
   Die Trennlinie steht zwischen Teasertext und Beschriftungen. Bootstraps
   border-top traegt dafuer zu dick auf: --bs-border-color ist eine Flaechen-
   farbe, auf der dunklen Karte wird daraus ein deutlicher Strich.

   Die Farbe kommt deshalb aus currentColor und nicht aus einer Variablen:
   ein dunkles Theme, das --bs-body-bg und --bs-body-color setzt, ohne ein
   data-bs-theme zu tragen, laesst --bs-emphasis-color-rgb und
   --bs-body-color-rgb auf ihren hellen Ausgangswerten stehen - die Linie
   bliebe dunkel auf dunklem Grund. currentColor ist die tatsaechliche
   Textfarbe der Karte und folgt jedem Theme, mit Attribut oder ohne.

   Als Pseudoelement, weil sich die Deckkraft eines border-top nicht
   getrennt vom Inhalt regeln laesst. */
.t3sb-pillar-badges {
	position: relative;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
	padding-top: 1.5rem;
}

.t3sb-pillar-badges::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background-color: currentColor;
	opacity: .25;
}

/* Gleicher Abstand ueber und unter der Linie. Der Absatz davor bringt seine
   eigene margin-bottom mit; ohne diese Regel addiert sie sich auf den
   Abstand oben, und die Linie steht naeher an den Badges als am Text.
   Ohne :has()-Unterstuetzung bleibt es beim bisherigen Bild - mehr Luft
   oben als unten, nicht kaputt. */
:where(p, ul, ol, div):has(+ .t3sb-pillar-badges) {
	margin-bottom: 0;
}

/* Trennlinie auf einer Hoehe, ueber eine Kartenreihe hinweg.
   ----------------------------------------------------------------------
   Die Hoehe rechnet PillarFilter.js aus (arrangeRows -> alignHeads), und das
   aus gutem Grund: entscheidend ist nicht der Text ueber der Linie, sondern
   alles darunter - Beschriftungen, Schaltflaeche und der Fuss mit seinen
   Artikel-Chips. Wie viele Zeilen die umbrechen, weiss erst der Browser.

   Was CSS beisteuert, ist nur eine Untergrenze fuer den Fall, dass das
   Skript nicht laeuft. Das Skript setzt seinen Wert inline und gewinnt
   damit gegen diese Regel - auch wenn er kleiner ist. */
.t3sb-pillar-card .t3sb-pillar-head {
	--t3sb-head-lines: 6;

	min-height: calc(var(--t3sb-head-lines) * 1.5rem);
}