/* Chatbot Styles - Centralized */

[v-cloak] {
	display: none !important;
}

/* Disabled button styling (reset confirmation) */
.chatbot-button-disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	background-color: #f9fafb !important;
	border-color: #e5e7eb !important;
	color: #9ca3af !important;
}

.chatbot-button-disabled:hover {
	background-color: #f9fafb !important;
	border-color: #e5e7eb !important;
}

/* Citation lists: no bullets, the [n] prefix already numbers the entries */
.chatbot-sources ul {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.chatbot-sources .source-online > ul:first-of-type {
	display: none;
}

.chatbot-sources ul li {
	padding-left: 0;
}

/* One line per source: long titles are cut off instead of wrapping.
	 The untruncated text stays reachable as the entry's title tooltip,
	 set in formatSingleCitation (chatbot-app.js). */
.chatbot-sources li {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Loading phrase fade animation */
.loading-phrase {
		animation: fadeInOut 3s ease-in-out infinite;
}

@keyframes fadeInOut {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}
	10% {
		opacity: 1;
		transform: translateY(0);
	}
	90% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(-10px);
	}
}

@media screen and (min-width: 768px) {
	.max-h-calculated {
			max-height: min(max(calc(100vh - 450px), 320px), 800px) !important;
	}
}

/* Privacy notice (initial bot message, see texts.privacyNotice in chatbot-app.js) */
.chatbot-privacy-notice {
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	background-color: #f5f5f5;
}

.chatbot-privacy-notice {
	font-size: 0.75rem;
}

.chatbot-privacy-notice .chatbot-privacy-notice-title {
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 0.25rem;
}

/* Intro messages seeded via initialMessages / privacyNotice: editorial texts, visually distinct from AI answers */
.chatbot-intro {
	font-size: 1rem;
	line-height: 1.6;
	color: #4b5563;
}

.chatbot-intro p {
	margin: 0 0 0.5rem;
}

.chatbot-intro p:last-child {
	margin-bottom: 0;
}

.chatbot-intro-heading {
	font-size: 1.25rem;
	font-weight: 700;
	color: #1f2937;
}

/* Bot-Antworten buendig am oberen Rand beginnen lassen.
	 Tailwind-Typography setzt margin-top:0 nur auf .prose > :first-child. Kommt die
	 Antwort aus dem Backend in einem Wrapper-Element, greift diese Regel fuer den
	 ersten Absatz nicht mehr: er behaelt seinen Abstand von 1,25em und die Antwort
	 startet unterhalb des sichtbaren Bereichs. Bei Antworten, die mit einer
	 Ueberschrift beginnen, faellt das nicht auf, weil <h2> optisch fuellt. */
#chatbot_answer_box .prose > :first-child,
#chatbot_answer_box .prose > :first-child > :first-child {
	margin-top: 0;
}

#chatbot_answer_box {
	overflow-x: hidden;
}

.chatbot-answer-content {
	max-width: 85%
}

.chatbot-sources {
	width: 100%;
}

/* Rubik-Loader: Lade-Animation "Antwort wird generiert" (m.pending, secondLoadingPhrase
	 in load/load_chatbot.htm). Kugelfoermiges 2x2x2-Rubik-Puzzle, das sich mit echten
	 Schichtdrehungen verdreht und wieder loest. Reines HTML + CSS, 34 Elemente.
	 Custom Properties (am Element oder an einem Vorfahren setzbar):
		 --rubik-loader-size      Durchmesser          Default 1.25em
		 --rubik-loader-color     einzige Farbe        Default #9ca3af (gray-400)
		 --rubik-loader-duration  Dauer eines Loops    Default 6.5s
	 Sticker-Geometrie und @keyframes sind per Skript generiert - Zugfolge nicht von Hand aendern. */
.rubik-loader {
	position: relative;
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	font-size: var(--rubik-loader-size, 1.25em);
	line-height: 1;
	vertical-align: middle;
}

.rubik-loader::before,
.rubik-loader::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
}

.rubik-loader::before {
	background: var(--rubik-loader-color, #9ca3af);
	opacity: .2;
}

.rubik-loader::after {
	background: radial-gradient(circle at 34% 28%, transparent 42%, var(--rubik-loader-color, #9ca3af));
	opacity: .22;
}

.rubik-loader__ball {
	position: absolute;
	left: 50%;
	top: 50%;
	transform-style: preserve-3d;
	transform: rotateX(-36deg) rotateY(45deg);
}

.rubik-loader__cubie {
	position: absolute;
	left: 0;
	top: 0;
	transform-style: preserve-3d;
	transform-origin: 0 0;
	animation: none var(--rubik-loader-duration, 6.5s) cubic-bezier(.62,0,.24,1.12) infinite;
}

.rubik-loader__sticker {
	position: absolute;
	left: 0;
	top: 0;
	width: .4594em;
	height: .5156em;
	transform-origin: 0 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	clip-path: polygon(11.7% 53.68%,10.05% 51.37%,10.05% 48.63%,11.7% 46.32%,59.63% 8.82%,62.44% 7.65%,65.52% 8.04%,67.87% 9.85%,94.95% 47.35%,95.72% 49.07%,95.72% 50.93%,94.95% 52.65%,67.87% 90.15%,65.52% 91.96%,62.44% 92.35%,59.63% 91.18%);
	background: var(--rubik-loader-color, #9ca3af);
	opacity: var(--_rubik-loader-a);
}

.rubik-loader__sticker:nth-child(1) { --_rubik-loader-a: var(--_rubik-loader-a1); transform: var(--_rubik-loader-h) translate3d(.505em,.1823em,-.1823em) matrix3d(-.47823,.62101,.62101,0,0,-.70711,.70711,0,.87824,.33816,.33816,0,0,0,0,1); }
.rubik-loader__sticker:nth-child(2) { --_rubik-loader-a: var(--_rubik-loader-a2); transform: var(--_rubik-loader-h) translate3d(-.1823em,.505em,.1823em) matrix3d(.62101,-.47823,.62101,0,.70711,0,-.70711,0,.33816,.87824,.33816,0,0,0,0,1); }
.rubik-loader__sticker:nth-child(3) { --_rubik-loader-a: var(--_rubik-loader-a3); transform: var(--_rubik-loader-h) translate3d(.1823em,-.1823em,.505em) matrix3d(.62101,.62101,-.47823,0,-.70711,.70711,0,0,.33816,.33816,.87824,0,0,0,0,1); }
.rubik-loader__cubie:nth-child(1) { --_rubik-loader-h: rotateX(180deg) rotateY(180deg); --_rubik-loader-a1: .66; --_rubik-loader-a2: .34; --_rubik-loader-a3: 1; animation-name: rubik-loader-turns1; }
.rubik-loader__cubie:nth-child(2) { --_rubik-loader-h: rotateX(180deg) rotateY(90deg); --_rubik-loader-a1: 1; --_rubik-loader-a2: .34; --_rubik-loader-a3: .5; animation-name: rubik-loader-turns2; }
.rubik-loader__cubie:nth-child(3) { --_rubik-loader-h: rotateX(180deg) rotateY(270deg); --_rubik-loader-a1: .18; --_rubik-loader-a2: .34; --_rubik-loader-a3: .66; animation-name: rubik-loader-turns3; }
.rubik-loader__cubie:nth-child(4) { --_rubik-loader-h: rotateX(180deg); --_rubik-loader-a1: .5; --_rubik-loader-a2: .34; --_rubik-loader-a3: .18; animation-name: rubik-loader-turns2; }
.rubik-loader__cubie:nth-child(5) { --_rubik-loader-h: rotateY(270deg); --_rubik-loader-a1: 1; --_rubik-loader-a2: .84; --_rubik-loader-a3: .66; animation-name: rubik-loader-turns4; }
.rubik-loader__cubie:nth-child(6) { --_rubik-loader-h: rotateX(0deg); --_rubik-loader-a1: .5; --_rubik-loader-a2: .84; --_rubik-loader-a3: 1; animation-name: rubik-loader-turns5; }
.rubik-loader__cubie:nth-child(7) { --_rubik-loader-h: rotateY(180deg); --_rubik-loader-a1: .66; --_rubik-loader-a2: .84; --_rubik-loader-a3: .18; animation-name: rubik-loader-turns6; }
.rubik-loader__cubie:nth-child(8) { --_rubik-loader-h: rotateY(90deg); --_rubik-loader-a1: .18; --_rubik-loader-a2: .84; --_rubik-loader-a3: .5; }


@keyframes rubik-loader-turns1 {
	0%, 4% { transform: rotateY(0deg) rotateZ(0deg) rotateY(0deg) rotateZ(0deg) rotateX(0deg) rotateZ(0deg) rotateY(0deg) rotateX(0deg); }
	10.154%, 11.231% { transform: rotateY(0deg) rotateZ(0deg) rotateY(0deg) rotateZ(0deg) rotateX(0deg) rotateZ(0deg) rotateY(0deg) rotateX(90deg); }
	17.385%, 18.462% { transform: rotateY(0deg) rotateZ(0deg) rotateY(0deg) rotateZ(0deg) rotateX(0deg) rotateZ(0deg) rotateY(90deg) rotateX(90deg); }
	24.615%, 32.923% { transform: rotateY(0deg) rotateZ(0deg) rotateY(0deg) rotateZ(0deg) rotateX(0deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg); }
	39.077%, 45.846% { transform: rotateY(0deg) rotateZ(0deg) rotateY(0deg) rotateZ(0deg) rotateX(90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg); }
	53.538%, 64.615% { transform: rotateY(0deg) rotateZ(0deg) rotateY(0deg) rotateZ(90deg) rotateX(90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg); }
	72.308%, 74% { transform: rotateY(0deg) rotateZ(0deg) rotateY(-90deg) rotateZ(90deg) rotateX(90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg); }
	81.692%, 83.385% { transform: rotateY(0deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg); }
	91.077%, 100% { transform: rotateY(-90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg); }
}

@keyframes rubik-loader-turns2 {
	0%, 11.231% { transform: rotateY(0deg) rotateX(0deg) rotateY(0deg); }
	17.385%, 25.692% { transform: rotateY(0deg) rotateX(0deg) rotateY(90deg); }
	31.846%, 32.923% { transform: rotateY(0deg) rotateX(0deg) rotateY(180deg); }
	39.077%, 55.231% { transform: rotateY(0deg) rotateX(90deg) rotateY(180deg); }
	62.923%, 64.615% { transform: rotateY(0deg) rotateX(0deg) rotateY(180deg); }
	72.308%, 83.385% { transform: rotateY(-90deg) rotateX(0deg) rotateY(180deg); }
	91.077%, 100% { transform: rotateY(-180deg) rotateX(0deg) rotateY(180deg); }
}

@keyframes rubik-loader-turns3 {
	0%, 4% { transform: rotateY(0deg) rotateZ(0deg) rotateX(0deg) rotateZ(0deg) rotateX(0deg); }
	10.154%, 32.923% { transform: rotateY(0deg) rotateZ(0deg) rotateX(0deg) rotateZ(0deg) rotateX(90deg); }
	39.077%, 45.846% { transform: rotateY(0deg) rotateZ(0deg) rotateX(0deg) rotateZ(0deg) rotateX(180deg); }
	53.538%, 55.231% { transform: rotateY(0deg) rotateZ(0deg) rotateX(0deg) rotateZ(90deg) rotateX(180deg); }
	62.923%, 74% { transform: rotateY(0deg) rotateZ(0deg) rotateX(-90deg) rotateZ(90deg) rotateX(180deg); }
	81.692%, 83.385% { transform: rotateY(0deg) rotateZ(90deg) rotateX(-90deg) rotateZ(90deg) rotateX(180deg); }
	91.077%, 100% { transform: rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateZ(90deg) rotateX(180deg); }
}

@keyframes rubik-loader-turns4 {
	0%, 4% { transform: rotateZ(0deg) rotateY(0deg) rotateZ(0deg) rotateY(0deg) rotateX(0deg); }
	10.154%, 11.231% { transform: rotateZ(0deg) rotateY(0deg) rotateZ(0deg) rotateY(0deg) rotateX(90deg); }
	17.385%, 18.462% { transform: rotateZ(0deg) rotateY(0deg) rotateZ(0deg) rotateY(90deg) rotateX(90deg); }
	24.615%, 25.692% { transform: rotateZ(0deg) rotateY(0deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg); }
	31.846%, 45.846% { transform: rotateZ(0deg) rotateY(90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg); }
	53.538%, 74% { transform: rotateZ(90deg) rotateY(90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg); }
	81.692%, 100% { transform: rotateZ(180deg) rotateY(90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg); }
}

@keyframes rubik-loader-turns5 {
	0%, 18.462% { transform: rotateZ(0deg) rotateY(0deg) rotateZ(0deg); }
	24.615%, 25.692% { transform: rotateZ(0deg) rotateY(0deg) rotateZ(-90deg); }
	31.846%, 64.615% { transform: rotateZ(0deg) rotateY(90deg) rotateZ(-90deg); }
	72.308%, 74% { transform: rotateZ(0deg) rotateY(0deg) rotateZ(-90deg); }
	81.692%, 100% { transform: rotateZ(90deg) rotateY(0deg) rotateZ(-90deg); }
}

@keyframes rubik-loader-turns6 {
	0%, 4% { transform: rotateX(0deg) rotateZ(0deg) rotateX(0deg); }
	10.154%, 18.462% { transform: rotateX(0deg) rotateZ(0deg) rotateX(90deg); }
	24.615%, 45.846% { transform: rotateX(0deg) rotateZ(-90deg) rotateX(90deg); }
	53.538%, 55.231% { transform: rotateX(0deg) rotateZ(0deg) rotateX(90deg); }
	62.923%, 100% { transform: rotateX(-90deg) rotateZ(0deg) rotateX(90deg); }
}

@keyframes rubik-loader-breathe {
	50% { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
	.rubik-loader .rubik-loader__cubie:nth-child(n) { animation: none; }
	.rubik-loader { animation: rubik-loader-breathe 3s ease-in-out infinite; }
}

@media (forced-colors: active) {
	.rubik-loader { forced-color-adjust: none; --rubik-loader-color: CanvasText; }
}

/* Senden-Button #chatbot_submit (load/load_chatbot.htm): Hintergrund bg-primary, Icon und
	 Spinner weiss. Hover/Disabled laufen ueber opacity statt ueber bg-primary/80 bzw. /30 -
	 diese Varianten sind in keinem WEB-CSS kompiliert, opacity passt zu jeder Primaerfarbe.
	 aria-busy="true" (:aria-busy="loading") = Anfrage laeuft: Button bleibt voll deckend,
	 statt blass-disabled, damit der Spinner lesbar ist. */
#chatbot_submit {
	transition: opacity .15s ease;
}

#chatbot_submit:hover:not(:disabled) {
	opacity: .8;
}

#chatbot_submit:disabled {
	opacity: .3;
}

#chatbot_submit[aria-busy="true"] {
	opacity: 1;
	cursor: progress;
}

/* =====================================================================
	 Loading phrase - cbp-inkchip "Ink chip" (Ink and Dots + Morphing chip)
	 Markup: span.cbp-inkchip wraps spinner + phrase span, the phrase span
	 gets the extra class cbp-inkchip-text (bindings unchanged).
	 Hook: chatbot-app.js writes style="opacity: 0;" on the phrase span for
	 300ms around every text swap -> [style*="opacity: 0"] = swap state.
	 Entering/leaving that state swaps the animation lists, so every phrase
	 replays the same choreography, timed for phaseDisplayDuration 3000
	 (~2.7s visible). Exit times count from opacity 0, enter/rest times
	 from opacity 1 (the swap, ~300ms later):
		 exit    0-280ms  pill closes to a 32px ring around the spinner, the ink
											is erased right-to-left in lockstep behind its edge
											(the phrase folds into the sphere)
		 enter  40-740ms  pill reopens to the exact width of the next phrase;
											its moving edge is the pen: the ink ends exactly at
											the edge with a short pale "wet" tail. The trailing
											"..." stays blank while the pen passes it.
		 rest  720ms-end  typing ellipsis on the trailing "...": "." ".." "..."
											250ms apart, hold 450ms, blank 250ms, again. 1.2s per
											cycle, 2 cycles; it stops on "..." (from ~2.42s), so
											the next fold always starts from the full phrase.
	 Lockstep without interpolate-size: the pill is the wrapper's ::before
	 (width 2rem <-> 100%), the ink is a background-size (.375rem <-> 100%)
	 on the phrase span, whose box is the pill minus the 1.625rem spinner
	 column. Same easing + duration -> ink end == pill edge in every browser,
	 exact width per phrase, no max-width dead time.
	 Typing dots without touching the text: a one-layer mask on the phrase
	 span that ends --cbp-inkchip-dots-w (one "...") before the end of the
	 text and grows by a third of that per step, uncovering one dot at a
	 time. Glyphs never move, text and pill width never change, and it only
	 animates mask-size, so it cannot fight the ink's background-size. (One
	 layer on purpose: two abutting mask layers leave an antialiased seam
	 that lightens the first dot.)
	 In the motion path the JS opacity fade is neutralised (opacity: 1
	 !important): the fold/write replaces it, so there is one motion at a
	 time. Reduced motion keeps the JS crossfade in a static pill.
	 ===================================================================== */

	 .cbp-inkchip {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	max-width: 100%;
	min-height: 2rem;
	padding-left: .375rem; /* 1px ring + 5px air around the 20px spinner -> 32px ring */
	vertical-align: middle;
}

.cbp-inkchip::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	/* border: 1px solid #e5e7eb; */
	border-radius: 9999px;
	/* background: #f9fafb; */
}

.cbp-inkchip > .cbp-inkchip-text {
	/* advance width of the trailing "..." at weight 300 - never wider than the
		 real dots (Source Sans .66, Segoe .667, PT Sans .62, Etica .73) */
	--cbp-inkchip-dots-w: .66em;
	display: block;
	flex: 0 1 auto;
	box-sizing: border-box;
	min-width: 0;
	padding: 0 1rem 0 .5rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	/* color: #4b5563; */
}

@media (prefers-reduced-motion: no-preference) {
	@supports ((-webkit-background-clip: text) or (background-clip: text)) {
		.cbp-inkchip::before {
			animation: cbp-inkchip-open .7s cubic-bezier(.33, 0, .2, 1) .04s both;
		}
		.cbp-inkchip:has(> .cbp-inkchip-text[style*="opacity: 0"])::before {
			animation: cbp-inkchip-close .28s cubic-bezier(.5, 0, .3, 1) both;
		}
		.cbp-inkchip > .cbp-inkchip-text {
			opacity: 1 !important;
			/* the ink: solid #4b5563 with a short wet tail at its end */
			background-image: linear-gradient(90deg, #4b5563 calc(100% - 1rem), #9ca3af calc(100% - .5rem), rgba(156, 163, 175, 0) calc(100% - .1875rem));
			background-repeat: no-repeat;
			background-origin: padding-box;
			background-size: 100% 100%;
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			/* the typing dots: a mask from the left edge; at rest it covers the
				 whole box (all dots visible), cbp-inkchip-type shortens it */
			-webkit-mask-image: linear-gradient(#000, #000);
			mask-image: linear-gradient(#000, #000);
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-origin: padding-box;
			mask-origin: padding-box;
			-webkit-mask-position: 0 0;
			mask-position: 0 0;
			-webkit-mask-size: 100% 100%;
			mask-size: 100% 100%;
			animation: cbp-inkchip-write .7s cubic-bezier(.33, 0, .2, 1) .04s both,
								 cbp-inkchip-type 1.2s step-end .47s 2 both;
		}
		.cbp-inkchip > .cbp-inkchip-text[style*="opacity: 0"] {
			animation: cbp-inkchip-fold .28s cubic-bezier(.5, 0, .3, 1) both;
		}
	}
}

@keyframes cbp-inkchip-open {
	from { width: 2rem; }
	to   { width: 100%; }
}

@keyframes cbp-inkchip-close {
	from { width: 100%; }
	to   { width: 2rem; }
}

@keyframes cbp-inkchip-write {
	from { background-size: .375rem 100%; }
	to   { background-size: 100% 100%; }
}

@keyframes cbp-inkchip-fold {
	from { background-size: 100% 100%; }
	to   { background-size: .375rem 100%; }
}

/* Typing dots, step-end = every keyframe holds until the next one.
	 Mask width in the padding box: 100% - 1rem = end of the text, minus
	 one "..." = no dot, then + a third per dot; 100% = all dots (= base).
	 0% is also held during the .47s delay (fill both), so the dots stay
	 blank while the pen writes; 100% (kept after the 2nd cycle by the
	 fill) is "...", the same state the next fold starts from. */
@keyframes cbp-inkchip-type {
	0% {
		-webkit-mask-size: calc(100% - 1rem - var(--cbp-inkchip-dots-w)) 100%;
		mask-size: calc(100% - 1rem - var(--cbp-inkchip-dots-w)) 100%;
	}

	20.8333% {
		-webkit-mask-size: calc(100% - 1rem - var(--cbp-inkchip-dots-w) * 2 / 3) 100%;
		mask-size: calc(100% - 1rem - var(--cbp-inkchip-dots-w) * 2 / 3) 100%;
	}

	41.6667% {
		-webkit-mask-size: calc(100% - 1rem - var(--cbp-inkchip-dots-w) / 3) 100%;
		mask-size: calc(100% - 1rem - var(--cbp-inkchip-dots-w) / 3) 100%;
	}

	62.5%, 100% {
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* static pill with a fixed slot, the phrase only crossfades (JS);
		 the dots are plain, static text */
	.cbp-inkchip > .cbp-inkchip-text {
		width: calc(15em + 1.5rem);
		max-width: 100%;
	}
}

@media (forced-colors: active) {
	/* static pill, plain text, the JS crossfade is restored */
	.cbp-inkchip::before { animation: none; }
	.cbp-inkchip:has(> .cbp-inkchip-text[style*="opacity: 0"])::before { animation: none; } /* separate rule: an unsupported :has() must not drop the one above */
	.cbp-inkchip > .cbp-inkchip-text,
	.cbp-inkchip > .cbp-inkchip-text[style*="opacity: 0"] {
		animation: none;
		background: none;
		/* -webkit-text-fill-color: currentColor; */
		-webkit-mask: none;
		mask: none;
	}
	.cbp-inkchip > .cbp-inkchip-text[style*="opacity: 0"] { opacity: 0 !important; }
}

/* --- Quellen-Slider (Online-Artikel) ---------------------------------------
	 Eigene Klassen statt Tailwind-Utilities: chatbot-app.js wird vom
	 Tailwind-Purge nicht erfasst (Konzept_Citations_Slider.md, 2.5 und
	 Entscheidung 7). Das Grundlayout der Bahn kommt aus glide.core.min.css,
	 hier steht nur das Aussehen der Karten.
	 Die Antwort liegt in .prose - deshalb setzen die Regeln unten die
	 Typography-Vorgaben fuer a, img und li gezielt zurueck. */

.chatbot-source-slider {
	position: relative;
}

/* .chatbot-sources li schneidet Eintraege der Quellenliste einzeilig ab.
	 Fuer die Karten muss das zurueckgenommen werden, sonst bleibt von jeder
	 Karte eine Zeile uebrig. Gleiches gilt fuer die Abstaende aus .prose. */
.chatbot-sources .chatbot-source-slider li.glide__slide {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	margin: 0;
	padding: 0;
}

.chatbot-source-card {
	display: block;
	text-decoration: none;
	color: inherit;
	font-weight: inherit;
}

.chatbot-source-card:hover .chatbot-source-card__title {
	text-decoration: underline;
}

.chatbot-source-card__image-wrapper {
	position: relative;
}

.chatbot-source-card__image-wrapper .chatbot-source-card__id {
	position: absolute;
	top: .45rem;
	left: .45rem;
	background: rgb(0 0 0 / 75%);
	color: white;
	padding: .15rem .25rem;
	font-size: .6rem;
	border-radius: 3px;
	line-height: .6rem;
}

.chatbot-source-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	margin: 0;
	background-color: #f3f4f6;
	border-radius: 3px;
}

.chatbot-source-card {
	/* padding: .75rem; */
	/* background-color: #f6f6f6; */
}

.chatbot-source-card--text {
	padding-top: .75rem;
}

.chatbot-source-card__dachzeile {
    display: block;
    font-size: .75rem;
    line-height: 1rem;
    color: #6b7280;
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

/* Titel: hoechstens zwei Zeilen, danach Ellipse */
.chatbot-source-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.25rem;
	color: #374151;
}

.chatbot-source-card__date {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.75rem;
	color: #9ca3af;
	line-height: 1rem;
}

.chatbot-source-slider .glide__slides {
	margin-top: 0 !important;
}

/* Pfeile ueber der Bildkachel. CustomNavigation blendet den ganzen
	 .glide__arrows-Block aus, wenn nicht mehr Karten als perView da sind. */
.chatbot-source-slider__arrow {
	position: absolute;
	top: 4.5rem;
	transform: translateY(-50%);
	z-index: 1;
	width: 2rem;
	height: 2rem;
	border: 0;
	/* border-radius: 9999px; */
	/* background-color: rgba(255, 255, 255, 0.9); */
	color: #374151;
	/* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); */
	cursor: pointer;
	line-height: 1;
}

.chatbot-source-slider__arrow:hover {
	background-color: #fff;
}

.chatbot-source-slider__arrow--prev {
	left: -1.75rem;
}

.chatbot-source-slider__arrow--next {
	right: -1.75rem;
}