/* ==========================================================================
   SK Dark Mode – sk-reg.de (Joomla 6 / Nova Pro / Gantry 5 / JL-UIkit)
   Aktiv, wenn <html data-sk-theme="dark"> gesetzt ist.
   Eigene Module/Komponenten koennen die Variablen nutzen, z.B.:
     background: var(--sk-surface, #fff); color: var(--sk-text, #3f485d);
   ========================================================================== */

:root {
	--sk-bg: #ececed;
	--sk-surface: #ffffff;
	--sk-surface-2: #f8f8f8;
	--sk-text: #3f485d;
	--sk-heading: #2a303f;
	--sk-muted: #868686;
	--sk-border: #dddddd;
	--sk-accent: #b1976b;
	--sk-accent-2: #d8c3a1;
	--sk-link: #b1976b;
}

html[data-sk-theme="dark"] {
	color-scheme: dark;

	--sk-bg: #121316;
	--sk-surface: #1c1e23;
	--sk-surface-2: #23262c;
	--sk-text: #cfd3da;
	--sk-heading: #f1f2f5;
	--sk-muted: #9097a3;
	--sk-border: #32363e;
	--sk-accent: #b1976b;
	--sk-accent-2: #d8c3a1;
	--sk-link: #d8c3a1;

	/* Bootstrap 5.3 Variablen */
	--bs-body-bg: var(--sk-bg);
	--bs-body-color: var(--sk-text);
	--bs-emphasis-color: var(--sk-heading);
	--bs-secondary-color: var(--sk-muted);
	--bs-secondary-bg: var(--sk-surface-2);
	--bs-tertiary-bg: var(--sk-surface);
	--bs-border-color: var(--sk-border);
	--bs-link-color: var(--sk-link);
	--bs-link-hover-color: #ffffff;
}

html[data-sk-theme="light"] {
	color-scheme: light;
}

/* weicher Wechsel, nur waehrend des Umschaltens */
html.sk-dm-anim,
html.sk-dm-anim *,
html.sk-dm-anim *::before,
html.sk-dm-anim *::after {
	transition: background-color .3s ease, color .3s ease, border-color .3s ease !important;
}

/* ---------- Grundflaechen ------------------------------------------------ */
html[data-sk-theme="dark"] body,
html[data-sk-theme="dark"] #g-page-surround,
html[data-sk-theme="dark"] #g-container-main {
	background: var(--sk-bg) !important;
	color: var(--sk-text);
}

html[data-sk-theme="dark"] a { color: var(--sk-link); }
html[data-sk-theme="dark"] a:hover,
html[data-sk-theme="dark"] a:focus { color: #ffffff; }

html[data-sk-theme="dark"] h1,
html[data-sk-theme="dark"] h2,
html[data-sk-theme="dark"] h3,
html[data-sk-theme="dark"] h4,
html[data-sk-theme="dark"] h5,
html[data-sk-theme="dark"] h6,
html[data-sk-theme="dark"] strong,
html[data-sk-theme="dark"] .jl-heading-small,
html[data-sk-theme="dark"] .jl-heading-medium,
html[data-sk-theme="dark"] .jl-article-title,
html[data-sk-theme="dark"] .jl-article-title a,
html[data-sk-theme="dark"] .jl-card-title,
html[data-sk-theme="dark"] .jl-card-title a {
	color: var(--sk-heading);
}

html[data-sk-theme="dark"] .jl-text-meta,
html[data-sk-theme="dark"] .jl-text-muted,
html[data-sk-theme="dark"] .text-muted,
html[data-sk-theme="dark"] small {
	color: var(--sk-muted) !important;
}

html[data-sk-theme="dark"] hr { border-color: var(--sk-border); }

html[data-sk-theme="dark"] ::selection { background: var(--sk-accent); color: #111; }

/* ---------- Header / Navigation / Footer -------------------------------- */
/* Dunkler Kopf mit Akzentlinie statt grellem Braun */
html[data-sk-theme="dark"] #g-header,
html[data-sk-theme="dark"] #g-navigation,
html[data-sk-theme="dark"] .jl-navbar-container:not(.jl-navbar-transparent) {
	background: #1b1a18 !important;
	border-bottom: 2px solid var(--sk-accent);
	color: #ffffff;
}

html[data-sk-theme="dark"] .jl-navbar-dropdown,
html[data-sk-theme="dark"] #g-header .g-main-nav .g-dropdown,
html[data-sk-theme="dark"] .jl-dropdown,
html[data-sk-theme="dark"] .dropdown-menu {
	background: #23262c !important;
	color: var(--sk-text);
	border: 1px solid var(--sk-border);
}

html[data-sk-theme="dark"] .jl-dropdown a,
html[data-sk-theme="dark"] .jl-navbar-dropdown a,
html[data-sk-theme="dark"] .dropdown-item { color: var(--sk-text); }

html[data-sk-theme="dark"] .jl-navbar-nav > li > a { color: #ffffff; }
html[data-sk-theme="dark"] .jl-navbar-nav > li:hover > a,
html[data-sk-theme="dark"] .jl-navbar-nav > li.jl-active > a { color: var(--sk-accent-2); }

html[data-sk-theme="dark"] .jl-offcanvas-bar,
html[data-sk-theme="dark"] .jl-modal-dialog {
	background: var(--sk-surface) !important;
	color: var(--sk-text);
}

html[data-sk-theme="dark"] #g-footer {
	background: #0d0d0e !important;
	color: #a9adb5;
}

html[data-sk-theme="dark"] #g-copyright {
	background: #08080a !important;
}

/* ---------- Sektionen, Karten, Boxen ------------------------------------ */
html[data-sk-theme="dark"] .jl-section-default,
html[data-sk-theme="dark"] .jl-section-muted {
	background: var(--sk-bg) !important;
	color: var(--sk-text);
}

html[data-sk-theme="dark"] .jl-card,
html[data-sk-theme="dark"] .jl-card-default,
html[data-sk-theme="dark"] .jl-card-body,
html[data-sk-theme="dark"] .jl-card-header,
html[data-sk-theme="dark"] .jl-card-footer,
html[data-sk-theme="dark"] .jl-tile-default,
html[data-sk-theme="dark"] .jl-tile-muted,
html[data-sk-theme="dark"] .jl-panel,
html[data-sk-theme="dark"] .card,
html[data-sk-theme="dark"] .list-group-item,
html[data-sk-theme="dark"] .modal-content,
html[data-sk-theme="dark"] .accordion-item,
html[data-sk-theme="dark"] .accordion-button,
html[data-sk-theme="dark"] .well,
html[data-sk-theme="dark"] .moduletable {
	background-color: var(--sk-surface) !important;
	color: var(--sk-text);
	border-color: var(--sk-border) !important;
}

html[data-sk-theme="dark"] .jl-card-default,
html[data-sk-theme="dark"] .jl-card {
	box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

/* ---------- Formulare ---------------------------------------------------- */
html[data-sk-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
html[data-sk-theme="dark"] select,
html[data-sk-theme="dark"] textarea,
html[data-sk-theme="dark"] .jl-input,
html[data-sk-theme="dark"] .jl-select,
html[data-sk-theme="dark"] .jl-textarea,
html[data-sk-theme="dark"] .form-control,
html[data-sk-theme="dark"] .form-select {
	background-color: #181a1e !important;
	color: var(--sk-text) !important;
	border: 1px solid #3a3d44 !important;
}

html[data-sk-theme="dark"] input::placeholder,
html[data-sk-theme="dark"] textarea::placeholder { color: #737a86; }

html[data-sk-theme="dark"] input:focus,
html[data-sk-theme="dark"] select:focus,
html[data-sk-theme="dark"] textarea:focus {
	border-color: var(--sk-accent) !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(177, 151, 107, .25);
}

html[data-sk-theme="dark"] .jl-button-default,
html[data-sk-theme="dark"] .btn-light,
html[data-sk-theme="dark"] .btn-secondary {
	background: var(--sk-surface-2);
	color: var(--sk-text);
	border-color: var(--sk-border);
}

/* ---------- Tabellen, Zitate, Code -------------------------------------- */
html[data-sk-theme="dark"] table,
html[data-sk-theme="dark"] .jl-table,
html[data-sk-theme="dark"] .table {
	color: var(--sk-text);
	--bs-table-color: var(--sk-text);
	--bs-table-bg: transparent;
	--bs-table-striped-bg: rgba(255, 255, 255, .04);
	--bs-table-hover-bg: rgba(255, 255, 255, .07);
	--bs-table-border-color: var(--sk-border);
}

html[data-sk-theme="dark"] th,
html[data-sk-theme="dark"] td,
html[data-sk-theme="dark"] .jl-table th,
html[data-sk-theme="dark"] .jl-table td { border-color: var(--sk-border) !important; }

html[data-sk-theme="dark"] .jl-table-striped > tr:nth-of-type(odd):not(.jl-active),
html[data-sk-theme="dark"] .jl-table-striped tbody tr:nth-of-type(odd):not(.jl-active) {
	background: rgba(255, 255, 255, .04);
}

html[data-sk-theme="dark"] blockquote {
	background: var(--sk-surface-2);
	color: var(--sk-text);
	border-color: var(--sk-accent);
}

html[data-sk-theme="dark"] pre,
html[data-sk-theme="dark"] code,
html[data-sk-theme="dark"] kbd {
	background: #15171b;
	color: #e3c9a0;
	border-color: var(--sk-border);
}

/* ---------- Joomla-Meldungen, Badges ------------------------------------ */
html[data-sk-theme="dark"] joomla-alert,
html[data-sk-theme="dark"] .alert {
	background-color: var(--sk-surface-2);
	color: var(--sk-text);
	border-color: var(--sk-border);
}

html[data-sk-theme="dark"] .jl-pagination > * > *,
html[data-sk-theme="dark"] .pagination .page-link {
	background: var(--sk-surface);
	color: var(--sk-text);
	border-color: var(--sk-border);
}

/* ---------- Bilder ------------------------------------------------------- */
html[data-sk-theme="dark"][data-sk-dim="1"] img:not([src$=".svg"]):not([src*=".svg?"]),
html[data-sk-theme="dark"][data-sk-dim="1"] video {
	filter: brightness(.9) contrast(1.02);
}

/* ---------- Inline-Weiss aus dem Editor (optional) ----------------------- */
html[data-sk-theme="dark"][data-sk-inline="1"] [style*="background:#fff"],
html[data-sk-theme="dark"][data-sk-inline="1"] [style*="background: #fff"],
html[data-sk-theme="dark"][data-sk-inline="1"] [style*="background:#ffffff"],
html[data-sk-theme="dark"][data-sk-inline="1"] [style*="background: #ffffff"],
html[data-sk-theme="dark"][data-sk-inline="1"] [style*="background-color:#fff"],
html[data-sk-theme="dark"][data-sk-inline="1"] [style*="background-color: #fff"],
html[data-sk-theme="dark"][data-sk-inline="1"] [style*="background-color:#ffffff"],
html[data-sk-theme="dark"][data-sk-inline="1"] [style*="background-color: #ffffff"],
html[data-sk-theme="dark"][data-sk-inline="1"] [style*="background:white"],
html[data-sk-theme="dark"][data-sk-inline="1"] [style*="background: white"],
html[data-sk-theme="dark"][data-sk-inline="1"] [style*="background-color:white"],
html[data-sk-theme="dark"][data-sk-inline="1"] [style*="background-color: white"],
html[data-sk-theme="dark"][data-sk-inline="1"] [style*="rgb(255, 255, 255)"] {
	background: var(--sk-surface) !important;
	color: var(--sk-text) !important;
}


/* ---------- Auto-Korrektur (vom Script markiert: data-sk-fix) ------------ */
html[data-sk-theme="dark"] [data-sk-fix~="bg1"] { background-color: var(--sk-surface) !important; }
html[data-sk-theme="dark"] [data-sk-fix~="bg2"] { background-color: var(--sk-surface-2) !important; }
html[data-sk-theme="dark"] [data-sk-fix~="t"]   { color: var(--sk-text) !important; }
html[data-sk-theme="dark"] [data-sk-fix~="th"]  { color: var(--sk-heading) !important; }
html[data-sk-theme="dark"] [data-sk-fix~="bt"]  { border-top-color: var(--sk-border) !important; }
html[data-sk-theme="dark"] [data-sk-fix~="br"]  { border-right-color: var(--sk-border) !important; }
html[data-sk-theme="dark"] [data-sk-fix~="bb"]  { border-bottom-color: var(--sk-border) !important; }
html[data-sk-theme="dark"] [data-sk-fix~="bl"]  { border-left-color: var(--sk-border) !important; }

/* ==========================================================================
   Schwebender Umschalter (SK Light Branding)
   ========================================================================== */
.sk-dm-btn {
	position: fixed;
	z-index: 99990;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(177, 151, 107, .55);
	border-radius: 50%;
	background: #ffffff;
	color: #b1976b;
	cursor: pointer;
	opacity: .72;
	box-shadow: 0 4px 16px rgba(177, 151, 107, .35);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-tap-highlight-color: transparent;
	transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease, background-color .3s ease;
}

.sk-dm-btn:hover,
.sk-dm-btn:focus-visible {
	opacity: 1;
	transform: translateY(-2px);
	box-shadow: 0 6px 22px rgba(177, 151, 107, .55);
	outline: none;
}

.sk-dm-btn:focus-visible { box-shadow: 0 0 0 3px rgba(177, 151, 107, .45), 0 6px 22px rgba(177, 151, 107, .55); }
.sk-dm-btn:active { transform: scale(.94); }

.sk-dm-btn svg { pointer-events: none; width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sk-dm-btn .sk-dm-sun { display: none; }
html[data-sk-theme="dark"] .sk-dm-btn .sk-dm-sun { display: block; }
html[data-sk-theme="dark"] .sk-dm-btn .sk-dm-moon { display: none; }

/* kleiner Punkt = folgt dem Geraet (Automatik) */
html[data-sk-mode="auto"] .sk-dm-btn::after {
	content: "";
	position: absolute;
	right: 4px;
	bottom: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, #b1976b, #d8c3a1);
	border: 1px solid #fff;
}

html[data-sk-theme="dark"] .sk-dm-btn {
	background: #23262c;
	color: #d8c3a1;
	border-color: rgba(216, 195, 161, .5);
	box-shadow: 0 4px 18px rgba(177, 151, 107, .3);
}

html[data-sk-theme="dark"][data-sk-mode="auto"] .sk-dm-btn::after { border-color: #23262c; }

.sk-dm-toast {
	position: fixed;
	z-index: 99989;
	max-width: 240px;
	padding: 8px 14px;
	border-radius: 12px;
	background: #ffffff;
	color: #3f485d;
	border: 1px solid rgba(177, 151, 107, .45);
	box-shadow: 0 4px 16px rgba(177, 151, 107, .3);
	font: 500 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}

.sk-dm-toast.sk-dm-show { opacity: 1; transform: none; }

html[data-sk-theme="dark"] .sk-dm-toast {
	background: #23262c;
	color: #e6e8ec;
	border-color: rgba(216, 195, 161, .4);
}

@media (prefers-reduced-motion: reduce) {
	.sk-dm-btn, .sk-dm-toast { transition: none; }
	html.sk-dm-anim, html.sk-dm-anim * { transition: none !important; }
}

@media print {
	.sk-dm-btn, .sk-dm-toast { display: none !important; }
}