/*
 * StreamClub - Dunkles Theme (Schwarz/Weiss/Gold), site-weit.
 * ------------------------------------------------------------------------
 * Ueberschreibt nur Farben/Optik des aktiven Site-Templates (z.B. Cassiopeia
 * Extended) - Layout, Funktionen und Bootstrap-Struktur bleiben unveraendert.
 * Wird von diesem Modul (mod_streamclubtheme) als eigenes Stylesheet auf
 * jeder Seite eingebunden, auf der das Modul veroeffentlicht ist - dadurch
 * unabhaengig davon, ob/wie das Template selbst eine "user.css"-Override
 * unterstuetzt.
 */

:root {
	--sc-bg: #000000;
	--sc-bg-elevated: #121212;
	--sc-card-bg: #161616;
	--sc-border: rgba(255, 255, 255, 0.12);
	--sc-fg: #f5f5f5;
	--sc-fg-muted: #b8b8b8;
	--sc-gold: #d4af37;
	--sc-gold-soft: #e9cf7a;
}

/* Grundfarben */
html,
body {
	background-color: var(--sc-bg) !important;
	color: var(--sc-fg) !important;
}

/* Titel/Ueberschriften in Gold */
h1, h2, h3, h4, h5, h6,
.page-header,
.com-content-category-blog__title,
.item-title,
.page-title,
.card-title {
	color: var(--sc-gold) !important;
}

/* Links */
a {
	color: var(--sc-gold-soft);
}

a:hover,
a:focus {
	color: var(--sc-gold);
}

/* Kopfbereich / Logo / Site-Titel */
#header,
.site-header,
header.site-header {
	background-color: var(--sc-bg-elevated) !important;
	border-bottom: 1px solid var(--sc-border);
}

.site-title,
.site-header .site-title a {
	color: var(--sc-gold) !important;
}

.site-description {
	color: var(--sc-fg-muted) !important;
}

/* Hauptnavigation (Bootstrap-Navbar, wie von Cassiopeia genutzt) */
.navbar,
#menu,
.site-header nav {
	background-color: transparent !important;
}

.navbar .nav-link,
#menu .nav-link,
.site-header nav .nav-link {
	color: var(--sc-fg) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .show > .nav-link,
.navbar .nav-link.active,
#menu .nav-link:hover,
#menu .nav-link.active {
	color: var(--sc-gold) !important;
}

.dropdown-menu {
	background-color: var(--sc-bg-elevated) !important;
	border: 1px solid var(--sc-border) !important;
}

.dropdown-item {
	color: var(--sc-fg) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
	background-color: rgba(212, 175, 55, 0.15) !important;
	color: var(--sc-gold) !important;
}

/* Hauptinhalt / Karten / Boxen */
main,
#content {
	background-color: var(--sc-bg) !important;
}

.card,
.item-page,
.com-content-category-blog__item,
.mod-articles-category,
.uk-card,
.offcanvas {
	background-color: var(--sc-card-bg) !important;
	border-color: var(--sc-border) !important;
	color: var(--sc-fg) !important;
}

.card-header,
.card-footer {
	background-color: var(--sc-bg-elevated) !important;
	border-color: var(--sc-border) !important;
}

/* Buttons */
.btn-primary {
	background-color: var(--sc-gold) !important;
	border-color: var(--sc-gold) !important;
	color: #000 !important;
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--sc-gold-soft) !important;
	border-color: var(--sc-gold-soft) !important;
	color: #000 !important;
}

.btn-secondary,
.btn-outline-secondary {
	background-color: transparent !important;
	border-color: var(--sc-border) !important;
	color: var(--sc-fg) !important;
}

/* Formulare (Kontakt, Suche, Login usw.) */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea,
select {
	background-color: var(--sc-bg-elevated) !important;
	border-color: var(--sc-border) !important;
	color: var(--sc-fg) !important;
}

.form-control:focus,
.form-select:focus {
	border-color: var(--sc-gold) !important;
	box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25) !important;
	color: var(--sc-fg) !important;
	background-color: var(--sc-bg-elevated) !important;
}

.form-control::placeholder {
	color: var(--sc-fg-muted) !important;
}

label,
.col-form-label {
	color: var(--sc-fg) !important;
}

/* Tabellen */
table,
.table {
	color: var(--sc-fg) !important;
	border-color: var(--sc-border) !important;
}

.table > :not(caption) > * > * {
	background-color: transparent !important;
	border-color: var(--sc-border) !important;
	color: var(--sc-fg) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
	background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Breadcrumb */
.breadcrumb {
	background-color: transparent !important;
}

.breadcrumb-item,
.breadcrumb-item a {
	color: var(--sc-fg-muted) !important;
}

.breadcrumb-item.active {
	color: var(--sc-gold) !important;
}

/* Pagination */
.pagination .page-link {
	background-color: var(--sc-bg-elevated) !important;
	border-color: var(--sc-border) !important;
	color: var(--sc-fg) !important;
}

.pagination .page-item.active .page-link {
	background-color: var(--sc-gold) !important;
	border-color: var(--sc-gold) !important;
	color: #000 !important;
}

/* Zitate */
blockquote {
	border-left: 4px solid var(--sc-gold);
	color: var(--sc-fg-muted);
}

/* Footer */
#footer,
.site-footer,
footer.site-footer {
	background-color: var(--sc-bg-elevated) !important;
	color: var(--sc-fg-muted) !important;
	border-top: 1px solid var(--sc-border);
}

#footer a,
.site-footer a {
	color: var(--sc-gold-soft) !important;
}

/* Trennlinien */
hr {
	border-color: var(--sc-border) !important;
}

/* ------------------------------------------------------------------------
 * Joomla-Systemmeldungen (<jdoc:include type="message" />)
 * ------------------------------------------------------------------------
 * Z.B. "Kauf erfolgreich! ...", Login-Fehler, Formular-Hinweise. Bootstraps
 * eigene .alert-Varianten (alert-success/-warning/-danger/-info/-message)
 * setzen zwar selbst eine Textfarbe fuer ihren jeweils hellen Hintergrund,
 * aber OHNE !important - und "body { color: ... !important }" weiter oben
 * in dieser Datei gewinnt in dem Fall trotzdem, egal wie spezifisch die
 * andere Regel ist. Ergebnis: weisser Text auf hellem Alert-Hintergrund,
 * praktisch unlesbar. Hier bekommt jede Meldung stattdessen einen zum
 * Dark-Theme passenden Hintergrund und garantiert lesbare Textfarbe - die
 * farbliche Unterscheidung (gruen=Erfolg, gelb=Warnung, rot=Fehler) bleibt
 * ueber die linke Akzentlinie erhalten.
 */
.alert {
	background-color: var(--sc-card-bg) !important;
	border: 1px solid var(--sc-border) !important;
	color: var(--sc-fg) !important;
}

.alert-heading {
	color: var(--sc-gold) !important;
}

.alert-success {
	border-left: 4px solid #2ea043 !important;
}

.alert-warning {
	border-left: 4px solid #e0b400 !important;
}

.alert-danger,
.alert-error {
	border-left: 4px solid #c62828 !important;
}

.alert-info,
.alert-message {
	border-left: 4px solid var(--sc-gold) !important;
}

.alert a {
	color: var(--sc-gold-soft) !important;
}

/* Bootstrap 5's dismiss "x" is a dark SVG background image, invisible on a
   dark alert background - inverting it makes it show up as light instead. */
.alert .btn-close {
	filter: invert(1);
}

/* Belt-and-braces catch-all: "#system-message-container" is the one part of
   Joomla's message output that stays the same ID across Joomla versions and
   templates, even when a template overrides the layout and uses different
   class names for the alert boxes themselves (the .alert-* rules above
   might then not match at all). This targets every element inside that
   container directly, regardless of what classes it actually has, so the
   text and background stay legible either way. */
#system-message-container {
	color: var(--sc-fg) !important;
}

#system-message-container * {
	color: inherit !important;
}

#system-message-container > * {
	background-color: var(--sc-card-bg) !important;
	border: 1px solid var(--sc-border) !important;
	border-radius: var(--sc-radius) !important;
	padding: 12px 16px !important;
}

/* ------------------------------------------------------------------------
 * Nachrichten-Tool (com_streammessages)
 * ------------------------------------------------------------------------
 * Die Sprechblasen (eigene/Josephine/gesperrt) haben eigene, helle
 * Hintergrundfarben (Hellblau/Rosa/Gelb), setzen selbst aber keine eigene
 * Textfarbe - sie erben dadurch die weisse Schrift von "body { color: ...
 * !important }" weiter oben in dieser Datei. Weiss auf einem hellen
 * Pastell-Hintergrund ist praktisch unlesbar. Diese Sektion gibt jeder
 * Nachrichtenart einen zum Dunkel-Theme passenden (dunkleren, transparenten)
 * Hintergrund und legt die Textfarbe explizit fest, statt sich auf die
 * geerbte body-Farbe zu verlassen - die farbliche Unterscheidung zwischen
 * "eigene Nachricht" / "von Josephine" / "gesperrt" bleibt dabei erhalten.
 */
.streammessages__login-hint {
	background-color: var(--sc-bg-elevated) !important;
	color: var(--sc-fg) !important;
}

.streammessages__error {
	background-color: rgba(198, 40, 40, 0.2) !important;
	color: #ffb4ab !important;
}

.streammessages__empty {
	color: var(--sc-fg-muted) !important;
}

.streammessages__msg--mine {
	background-color: rgba(88, 140, 255, 0.18) !important;
	color: var(--sc-fg) !important;
}

.streammessages__msg--josephine {
	background-color: rgba(233, 80, 163, 0.18) !important;
	color: var(--sc-fg) !important;
}

.streammessages__msg--locked {
	background-color: rgba(224, 180, 0, 0.14) !important;
	border-color: #e0b400 !important;
	color: var(--sc-fg) !important;
}

.streammessages__msg-meta {
	color: var(--sc-fg-muted) !important;
}

.streammessages__locked-text {
	color: var(--sc-gold-soft) !important;
}

.streammessages__textarea {
	background-color: var(--sc-bg-elevated) !important;
	border-color: var(--sc-border) !important;
	color: var(--sc-fg) !important;
}

.streammessages__file-label {
	color: var(--sc-fg-muted) !important;
}

/* ------------------------------------------------------------------------
 * Shop-Formulare (com_streamshop)
 * ------------------------------------------------------------------------
 * Gilt fuer die eigene, EIGENSTAENDIGE Seite der Komponente (z.B. ueber
 * einen Menuepunkt aufgerufen) - dort gibt es keine ".streamclub-card", die
 * das Dashboard-Widget (mod_streamshop) bereits dunkel einfaerbt. Die
 * Produktkarten haben von sich aus einen hellen/weissen Hintergrund ohne
 * eigene Textfarbe und erben dadurch die weisse Schrift von "body { color:
 * ... !important }" weiter oben - genau das gleiche Weiss-auf-Weiss-Problem
 * wie beim Nachrichten-Tool oben. Diese Sektion gibt jeder Produktkarte
 * einen zum Dunkel-Theme passenden Hintergrund und legt die Textfarbe
 * explizit fest, unabhaengig davon, ob die Seite ueber den Menuepunkt oder
 * (dort bereits separat abgedeckt) ueber das Dashboard-Widget erscheint.
 */
.streamshop__empty {
	color: var(--sc-fg-muted) !important;
}

.streamshop__product {
	background-color: var(--sc-card-bg) !important;
	border-color: var(--sc-border) !important;
	color: var(--sc-fg) !important;
}

.streamshop__title {
	color: var(--sc-fg) !important;
}

.streamshop__description {
	color: var(--sc-fg-muted) !important;
}

.streamshop__group-label {
	color: var(--sc-fg) !important;
}

.streamshop__select {
	background-color: var(--sc-bg-elevated) !important;
	border-color: var(--sc-border) !important;
	color: var(--sc-fg) !important;
}

.streamshop__choice {
	color: var(--sc-fg) !important;
}

.streamshop__sender-field {
	color: var(--sc-fg-muted) !important;
}

.streamshop__sender-label {
	color: var(--sc-fg) !important;
}

.streamshop__note-label {
	color: var(--sc-fg) !important;
}

.streamshop__note {
	background-color: var(--sc-bg-elevated) !important;
	border-color: var(--sc-border) !important;
	color: var(--sc-fg) !important;
}

.streamshop__price {
	color: var(--sc-fg) !important;
}

.streamshop__order-btn {
	background-color: var(--sc-gold) !important;
	border-color: var(--sc-gold) !important;
	color: #000 !important;
}

.streamshop__order-btn:hover:not(:disabled) {
	background-color: var(--sc-gold-soft) !important;
	border-color: var(--sc-gold-soft) !important;
}

.streamshop__login-hint {
	color: var(--sc-fg-muted) !important;
}

.streamshop__error {
	color: #ffb4ab !important;
}

.streamshop__success {
	color: #8be89a !important;
}

/* ------------------------------------------------------------------------
 * Altersverifizierung (com_streamverify) + geteiltes "Verifizieren"-Gate
 * ------------------------------------------------------------------------
 * Gleiches Weiss-auf-Weiss-Problem wie bei Shop/Nachrichten oben: die
 * eigene Seite von com_streamverify (ueber einen Menuepunkt aufgerufen) hat
 * von sich aus eine helle Karte ohne eigene Textfarbe. Zusaetzlich deckt
 * dieser Block auch ".sc-verify-gate" ab - das kleine "Bitte zuerst Alter
 * verifizieren"-Hinweisfeld, das in Goodies/Champagner/Arduino/Lovense/
 * Voting/Chat eingeblendet wird, falls eine dieser Komponenten (aktuell nur
 * als Dashboard-Widget genutzt) doch einmal ueber einen eigenen Menuepunkt
 * aufgerufen wird.
 */
.streamverify {
	background-color: var(--sc-bg-elevated) !important;
	border-color: var(--sc-border) !important;
	color: var(--sc-fg) !important;
}

.streamverify__intro,
.streamverify__field-desc,
.streamverify__upload-hint,
.streamverify__privacy-note,
.streamverify__submitted-at {
	color: var(--sc-fg-muted) !important;
}

.streamverify__status--pending,
.streamverify__login-hint {
	background-color: rgba(212, 175, 55, 0.12) !important;
}

.streamverify__status--approved {
	background-color: rgba(46, 160, 67, 0.18) !important;
}

.streamverify__status--rejected {
	background-color: rgba(179, 38, 30, 0.18) !important;
}

.streamverify__form input[type="file"] {
	background-color: var(--sc-bg) !important;
	border-color: var(--sc-border) !important;
	color: var(--sc-fg) !important;
}

.streamverify__submit {
	background-color: var(--sc-gold) !important;
	color: #000 !important;
}

.streamverify__submit:hover {
	background-color: var(--sc-gold-soft) !important;
}

.sc-verify-gate {
	background-color: rgba(212, 175, 55, 0.12) !important;
}

.sc-verify-gate__text {
	color: var(--sc-fg-muted) !important;
}

.sc-verify-gate__btn {
	background-color: var(--sc-gold) !important;
	color: #000 !important;
}

.sc-verify-gate__btn:hover {
	background-color: var(--sc-gold-soft) !important;
}

/* ------------------------------------------------------------------------
 * StreamPoints-Konto (com_userpoints) - eigene Kontoseite
 * ------------------------------------------------------------------------
 * Gleiches Weiss-auf-(fast-)Weiss-Problem wie bei Shop/Nachrichten/Verify
 * oben: com_userpoints liefert sein Tab-Layout (Profile/Medals/Latest
 * activity/Rules) mit einer eigenen, hellen Karte ohne eigene Textfarbe -
 * der Text erbt dadurch die helle Schrift von "body { color: ... !important
 * }" weiter oben in dieser Datei, was auf dem ebenfalls hellen Kartenhintergrund
 * praktisch unlesbar ist. Deckt sowohl den Tab-Container (#page-profile /
 * .tab-pane, gilt fuer alle Tabs der Kontoseite) als auch das Bootstrap-
 * Akkordeon (QR-Code / Meine Empfehlungen / Statistik / Gutscheine /
 * Bewertungen) ab. Die Bootstrap-"subtle"-Badges (z.B. der Punktestand)
 * bleiben bewusst unangetastet - deren eigene Utility-Klassen liefern
 * bereits ein zueinander passendes Hintergrund/Text-Paar mit !important und
 * bleiben dadurch unabhaengig vom Theme lesbar.
 */
body.com_userpoints .tab-content,
body.com_userpoints .tab-pane {
	background-color: var(--sc-card-bg) !important;
	border-color: var(--sc-border) !important;
	color: var(--sc-fg) !important;
}

body.com_userpoints .nav-tabs {
	border-color: var(--sc-border) !important;
}

body.com_userpoints .nav-tabs .nav-link {
	color: var(--sc-fg-muted) !important;
	background-color: transparent !important;
	border-color: transparent !important;
}

body.com_userpoints .nav-tabs .nav-link.active {
	color: var(--sc-gold) !important;
	background-color: var(--sc-card-bg) !important;
	border-color: var(--sc-border) var(--sc-border) var(--sc-card-bg) !important;
}

body.com_userpoints .accordion-item {
	background-color: var(--sc-card-bg) !important;
	border-color: var(--sc-border) !important;
}

body.com_userpoints .accordion-button {
	background-color: var(--sc-bg-elevated) !important;
	color: var(--sc-fg) !important;
	box-shadow: none !important;
}

body.com_userpoints .accordion-button:not(.collapsed) {
	background-color: var(--sc-bg-elevated) !important;
	color: var(--sc-gold) !important;
}

body.com_userpoints .accordion-button::after {
	filter: invert(1);
}

body.com_userpoints .accordion-body {
	background-color: var(--sc-card-bg) !important;
	color: var(--sc-fg) !important;
}

/* ------------------------------------------------------------------------
 * MembershipPro / OSMembership (com_osmembership)
 * ------------------------------------------------------------------------
 * Gleiches Muster wie bei den anderen Drittkomponenten oben: die Plan-Karten
 * der "columns"-Ansicht (osm-plans-list-columns) haben ihr eigenes, helles
 * Markup ohne eigene Textfarbe (.osm-item-wrapper / .osm-item-heading-box /
 * .osm-item-description sind KEIN Bootstrap ".card", die allgemeine
 * .card-Regel weiter oben greift hier also nicht) - der Text erbt dadurch
 * die helle "body { color: ... !important }"-Schrift auf ebenfalls hellem
 * Hintergrund. Titel (h2.osm-item-title) und Buttons (.btn-primary/
 * .btn-secondary) sind bereits ueber die allgemeinen Regeln weiter oben
 * abgedeckt und bleiben unveraendert.
 */
body.com_osmembership .osm-item-wrapper,
body.com_osmembership .osm-item-heading-box,
body.com_osmembership .osm-item-description,
body.com_osmembership #osm-plans-list-columns .osm-item-wrapper,
body.com_osmembership #osm-plans-list-columns .osm-item-heading-box,
body.com_osmembership #osm-plans-list-columns .osm-item-description {
	background-color: var(--sc-card-bg) !important;
	background-image: none !important;
	border-color: var(--sc-border) !important;
	color: var(--sc-fg) !important;
}

body.com_osmembership .osm-item-description-text {
	color: var(--sc-fg) !important;
}

/* ------------------------------------------------------------------------
 * eShop (com_eshop, JoomDonation) - Kategorie-Kacheln
 * ------------------------------------------------------------------------
 * Hier kein Lesbarkeits-, sondern ein reines Optik-Anliegen: der
 * Beschriftungsstreifen unter jedem Kategoriebild (.eshop-info-block, mit
 * Titel h5 + "X Produkte"-Zeile) ist von Haus aus schlicht weiss - passt
 * nicht zum dunklen Gold-Theme. Faerbt den Streifen dunkel ein und den
 * Kategorie-Titel gold, passend zum Rest der Seite.
 */
body.com_eshop .eshop-category-wrap {
	background-color: var(--sc-card-bg) !important;
	border-color: var(--sc-border) !important;
}

body.com_eshop .eshop-info-block {
	background-color: var(--sc-bg-elevated) !important;
	color: var(--sc-fg) !important;
}

body.com_eshop .eshop-info-block h5,
body.com_eshop .eshop-info-block h5 a {
	color: var(--sc-gold) !important;
}

body.com_eshop .eshop-category-count,
body.com_eshop .eshop-category-count a {
	color: var(--sc-fg-muted) !important;
}

/*
 * eShop - Produktseite (Bestellvorgang) + Produktliste
 * ------------------------------------------------------------------------
 * Echtes Lesbarkeits-Problem (nicht nur Optik): die Produktseite
 * (Menge-Feld, "Beschreibung"-Tab, Sortieren/Zeigen-Auswahlfelder in der
 * Produktliste) hat von sich aus einen hellen/weissen Hintergrund ohne
 * eigene Textfarbe - genau das gleiche Weiss-auf-Weiss-Muster wie bei den
 * anderen Drittkomponenten oben, hier aber zusaetzlich verschaerft: eshop
 * scheint fuer genau diese Elemente eine eigene, hoeher-spezifische Regel
 * (evtl. sogar mit ID) mitzubringen, gegen die weder die allgemeine
 * ".form-control/select"-Regel oben noch eine body.com_eshop-Variante
 * zuverlaessig gewinnt. Diese Sektion ist daher bewusst NICHT auf
 * body.com_eshop beschraenkt (falls dieser Body-Klassenname auf dieser
 * Seite aus irgendeinem Grund gar nicht gesetzt wird) UND verdoppelt jede
 * Regel mit einer "html body"-praefixierten Variante fuer zusaetzliches
 * Spezifitaetsgewicht - schadet nirgendwo sonst auf der Seite, da Selects/
 * Inputs/Tabs ueberall im dunklen Theme ohnehin dunkel aussehen sollen.
 */
select,
.form-select,
html body select,
html body .form-select,
body.com_eshop select,
body.com_eshop .form-select {
	background-color: var(--sc-bg-elevated) !important;
	border-color: var(--sc-border) !important;
	color: var(--sc-fg) !important;
}

input,
textarea,
.form-control,
html body input,
html body textarea,
html body .form-control,
body.com_eshop input,
body.com_eshop textarea,
body.com_eshop .form-control {
	background-color: var(--sc-bg-elevated) !important;
	border-color: var(--sc-border) !important;
	color: var(--sc-fg) !important;
}

/* Beschreibungsblock (Marke/Produktcode) auf der Produktseite - bestaetigte
   ECHTE Klassen aus dem Seitenquelltext (nicht mehr geraten):
   <div class="product-desc"> > .product-manufacturer / #product-dynamic-info .product-sku. */
.product-desc,
.product-manufacturer,
#product-dynamic-info,
.product-sku,
html body .product-desc {
	color: var(--sc-fg) !important;
}

/* "Beschreibung"-Tab: KEIN Bootstrap-Tab (die .tab-content/.tab-pane-Regeln
   von vorher trafen nie zu, es gibt diese Klassen auf der Seite gar nicht) -
   sondern Joomlas natives <joomla-tab>/<joomla-tab-element> Web-Component.
   Dieses rendert seinen sichtbaren Rahmen/Hintergrund haeufig in einem
   Shadow DOM, das normales CSS von aussen nicht erreichen kann - die
   eigentliche Korrektur dafuer passiert per JS in theme.js (das direkt in
   den Shadow Root injiziert). Diese Regel hier deckt zumindest die
   Light-DOM-Kindelemente (den eigentlichen Beschreibungstext) als
   Sofort-Darstellung ab, bevor das Skript greift. */
joomla-tab,
joomla-tab-element,
joomla-tab-element p,
joomla-tab-element span,
joomla-tab-element div {
	color: var(--sc-fg) !important;
}

/* Produktliste: "Sortiert nach" / "Zeigen"-Auswahlfelder, falls eshop dafuer
   eigene Klassen statt reinem <select> nutzt (Klassennamen fuer die
   Kategorie-Listenansicht noch nicht verifiziert - die generische
   select/.form-select-Regel oben deckt den <select> selbst in jedem Fall
   ab, unabhaengig vom Klassennamen des umgebenden Formulars). */
.eshop-sort-limit-form select,
.eshop-sort-by,
.eshop-limit {
	background-color: var(--sc-bg-elevated) !important;
	border-color: var(--sc-border) !important;
	color: var(--sc-fg) !important;
}

/* Produktbild-Rahmen - bestaetigte echte Klasse: <div class="image img-thumbnail">
   (Bootstrap-Utility-Klasse, nicht eshop-spezifisch benannt wie zuvor
   angenommen). Reiner Optik-Fix, kein Lesbarkeitsproblem. */
.image.img-thumbnail,
.img-thumbnail {
	background-color: var(--sc-card-bg) !important;
	border-color: var(--sc-border) !important;
}

/* ------------------------------------------------------------------------
 * eShop - Warenkorb-Popup (Colorbox-Lightbox)
 * ------------------------------------------------------------------------
 * Das Bestaetigungs-Popup nach "In den Warenkorb legen" wird ueber Colorbox
 * (im Seiten-Assets bestaetigt: com_eshop.colorbox) angezeigt. #colorbox /
 * #cboxWrapper / #cboxContent / #cboxLoadedContent sind feste, von der
 * Colorbox-Bibliothek selbst vergebene IDs (nicht eshop-spezifisch geraten -
 * Colorbox ist eine weitverbreitete, dokumentierte jQuery-Lightbox mit
 * stabiler eigener DOM-Struktur). Diese Regel sorgt nur fuer die
 * Sofort-Darstellung (dunkler Hintergrund statt weiss) BEVOR theme.js
 * greift - die eigentliche, verlaessliche Faerbung des dynamisch
 * nachgeladenen Inhalts sowie der Scrollbar-Fallback gegen das
 * "unten abgeschnitten"-Problem passieren per JS (siehe applyColorboxTheme()
 * in theme.js), da Colorbox seine Groesse/Position per Inline-Style aus JS
 * heraus setzt und dabei teils nach dem ersten CSS-Paint neu berechnet.
 */
#colorbox,
#cboxWrapper,
#cboxContent,
#cboxLoadedContent {
	background-color: var(--sc-card-bg) !important;
	color: var(--sc-fg) !important;
}

#cboxLoadedContent {
	overflow-y: auto !important;
}

#cboxTitle {
	color: var(--sc-fg-muted) !important;
}

#cboxLoadedContent a {
	color: var(--sc-gold-soft) !important;
}

/* Colorbox' eigenes Schliessen-Icon ist eine dunkle SVG/PNG - auf dem jetzt
   dunklen Hintergrund sonst kaum sichtbar. */
#cboxClose {
	filter: invert(1);
}

/* ------------------------------------------------------------------------
 * Event-Kalender / Live-Stream-Buchung (com_eventbooking)
 * ------------------------------------------------------------------------
 * Gleiches Weiss-auf-Weiss-Muster wie bei com_eshop - diesmal auf der
 * Event-Detailseite ("Details" im Stream-Kalender). Bestaetigte ECHTE
 * IDs/Klassen aus dem vom Nutzer eingefuegten Seitenquelltext (nicht
 * geraten): #eb-event-page (Haupt-Container), #eb-event-details /
 * .eb-description (Inhaltsbox), .eb-box-heading (Titelzeile),
 * .eb-event-property-label / .eb-event-property-value (Zellen der
 * Ereignis-Infotabelle - zusaetzlich schon durch die generische table/
 * .table-Regel oben erfasst). Die Sidebar-Boxen (".sidebar-right.card")
 * sowie die Anmelden-Buttons (".btn-primary"/".btn-secondary") sind bereits
 * ueber die allgemeinen Regeln weiter oben abgedeckt.
 */
body.com_eventbooking #eb-event-page,
body.com_eventbooking .eb-container,
body.com_eventbooking #eb-event-details,
body.com_eventbooking .eb-description,
body.com_eventbooking .eb-box-heading {
	background-color: var(--sc-card-bg) !important;
	color: var(--sc-fg) !important;
}

body.com_eventbooking .eb-page-heading,
body.com_eventbooking #eb-event-properties-heading {
	color: var(--sc-gold) !important;
}

body.com_eventbooking .eb-event-property-label,
body.com_eventbooking .eb-event-property-value,
body.com_eventbooking .eb-description-details,
body.com_eventbooking .eb-description-details p {
	background-color: transparent !important;
	color: var(--sc-fg) !important;
}

/* ------------------------------------------------------------------------
 * Video Clip Store (com_videostore)
 * ------------------------------------------------------------------------
 * Gleiches Muster wie bei streamshop__/streammessages__ oben: eigene,
 * bereits eindeutig praefixierte Klassen (BEM-Stil "videostore__..."), daher
 * ohne body-Scope. Die Karten-Infobox (.videostore__card-body) ist von Haus
 * aus hell ohne eigene Textfarbe - erbt dadurch die helle Schrift von
 * "body { color: ... !important }" weiter oben, auf ebenfalls hellem
 * Hintergrund praktisch unlesbar. Die Kauf-/Ansehen-Buttons behalten ihre
 * eigene Farbe (blau/gruen/gold) und werden hier nicht angefasst.
 */
.videostore__card {
	background-color: var(--sc-card-bg) !important;
	border-color: var(--sc-border) !important;
}

.videostore__card-body {
	background-color: var(--sc-card-bg) !important;
	color: var(--sc-fg) !important;
}

.videostore__card-title {
	color: var(--sc-gold) !important;
}

.videostore__card-desc,
.videostore__card-duration {
	color: var(--sc-fg-muted) !important;
}

.videostore__badge {
	background-color: var(--sc-bg-elevated) !important;
	border-color: var(--sc-border) !important;
	color: var(--sc-fg) !important;
}