.dmt-dmt9c4e21-wrap {
	display: flex;
	align-items: center;
	width: 100%;
}

.dmt-dmt9c4e21-switch {
	--dmt-size: 48px;
	--dmt-track-light: #d8d4cd;
	--dmt-track-dark: #3a3f4a;
	--dmt-thumb: #ffffff;
	--dmt-sun: #e89b0c;
	--dmt-moon: #2f3b52;
	appearance: none;
	-webkit-appearance: none;
	border: none;
	background: transparent !important;
	padding: 0 !important;
	margin: 0;
	cursor: pointer;
	line-height: 0;
	border-radius: 999px;
	box-shadow: none !important;
	min-height: 0 !important;
	min-width: 0 !important;
}

.dmt-dmt9c4e21-switch:focus {
	outline: none;
}

.dmt-dmt9c4e21-switch:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.dmt-dmt9c4e21-track {
	position: relative;
	display: block;
	width: calc(var(--dmt-size) * 1.9);
	height: var(--dmt-size);
	border-radius: 999px;
	background: var(--dmt-track-light);
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
	transition: background-color 0.5s ease;
}

html[data-ctw-theme="dark"] .dmt-dmt9c4e21-track {
	background: var(--dmt-track-dark) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.dmt-dmt9c4e21-thumb {
	position: absolute;
	top: 50%;
	left: 3px;
	width: calc(var(--dmt-size) - 6px);
	height: calc(var(--dmt-size) - 6px);
	border-radius: 50%;
	background: var(--dmt-thumb) !important;
	transform: translateY(-50%) translateX(0);
	transition: transform 0.5s ease, box-shadow 0.5s ease;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

html[data-ctw-theme="dark"] .dmt-dmt9c4e21-thumb {
	/* Track 1.9s − Thumb − 6px = 0.9 × size */
	transform: translateY(-50%) translateX(calc(var(--dmt-size) * 0.9));
	background: #ffffff !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.dmt-dmt9c4e21-glyph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.dmt-dmt9c4e21-glyph svg {
	width: 72% !important;
	height: 72% !important;
	min-width: 72% !important;
	min-height: 72% !important;
	max-width: none !important;
	max-height: none !important;
	display: block !important;
	overflow: visible !important;
	flex-shrink: 0;
}

.dmt-dmt9c4e21-glyph--sun {
	color: var(--dmt-sun) !important;
	opacity: 1;
}

.dmt-dmt9c4e21-glyph--moon {
	color: var(--dmt-moon) !important;
	opacity: 0;
}

html[data-ctw-theme="dark"] .dmt-dmt9c4e21-glyph--sun {
	opacity: 0;
}

html[data-ctw-theme="dark"] .dmt-dmt9c4e21-glyph--moon {
	opacity: 1;
	color: var(--dmt-moon) !important;
}

html[data-ctw-theme="dark"] .dmt-dmt9c4e21-switch .dmt-dmt9c4e21-glyph svg,
html[data-ctw-theme="dark"] .dmt-dmt9c4e21-switch .dmt-dmt9c4e21-glyph path {
	fill: currentColor !important;
	stroke: none !important;
	background: transparent !important;
	color: inherit !important;
}

/* =========================================================
   Dark Mode – Seitenweite Overrides (Elementor-Artikel-Layouts)
   Variablen kommen aus dem Widget-Inline-Style.
   Klasse .ctw-dm-keep = Hintergrund/Farbe dieses Blocks nicht überschreiben.
   ========================================================= */
html[data-ctw-theme="dark"] {
	--ctw-dm-page-bg: #0f1115;
	--ctw-dm-surface: #1a1d24;
	--ctw-dm-text: #d8dde6;
	--ctw-dm-heading: #f3f5f8;
	--ctw-dm-muted: #9aa3b2;
	--ctw-dm-link: #8cbcff;
	--ctw-dm-border: #2c3340;
	color-scheme: dark;
}

html[data-ctw-theme="dark"] body,
html[data-ctw-theme="dark"] .site,
html[data-ctw-theme="dark"] #page,
html[data-ctw-theme="dark"] #content,
html[data-ctw-theme="dark"] .site-content,
html[data-ctw-theme="dark"] .content-area,
html[data-ctw-theme="dark"] .elementor-location-header,
html[data-ctw-theme="dark"] .elementor-location-single,
html[data-ctw-theme="dark"] .elementor-location-footer,
html[data-ctw-theme="dark"] .elementor {
	background-color: var(--ctw-dm-page-bg) !important;
	color: var(--ctw-dm-text) !important;
}

/* Container / Sections / Columns – Elementor Inline-BG überschreiben */
html[data-ctw-theme="dark"] .elementor-section:not(.ctw-dm-keep),
html[data-ctw-theme="dark"] .elementor-container:not(.ctw-dm-keep),
html[data-ctw-theme="dark"] .elementor-column:not(.ctw-dm-keep),
html[data-ctw-theme="dark"] .elementor-column-wrap:not(.ctw-dm-keep),
html[data-ctw-theme="dark"] .elementor-widget-wrap:not(.ctw-dm-keep),
html[data-ctw-theme="dark"] .e-con:not(.ctw-dm-keep),
html[data-ctw-theme="dark"] .e-con-inner:not(.ctw-dm-keep),
html[data-ctw-theme="dark"] .elementor-element[data-element_type="section"]:not(.ctw-dm-keep),
html[data-ctw-theme="dark"] .elementor-element[data-element_type="container"]:not(.ctw-dm-keep),
html[data-ctw-theme="dark"] .elementor-element[data-element_type="column"]:not(.ctw-dm-keep) {
	background-color: var(--ctw-dm-page-bg) !important;
	background-image: none;
	border-color: var(--ctw-dm-border) !important;
	color: var(--ctw-dm-text);
}

/* Verschachtelte Flächen (Karten, TOC, Kästen) etwas heller */
html[data-ctw-theme="dark"] .e-con.e-child:not(.ctw-dm-keep),
html[data-ctw-theme="dark"] .e-con.e-con-full.e-child:not(.ctw-dm-keep),
html[data-ctw-theme="dark"] .elementor-column .e-con:not(.e-parent):not(.ctw-dm-keep) {
	background-color: var(--ctw-dm-surface) !important;
}

/* Widget-Container mit eigener heller Fläche */
html[data-ctw-theme="dark"] .elementor-widget:not(.elementor-widget-image):not(.elementor-widget-video):not(.elementor-widget-dark_mode_toggle_dmt9c4e21) > .elementor-widget-container {
	background-color: transparent;
	color: var(--ctw-dm-text);
}

html[data-ctw-theme="dark"] h1,
html[data-ctw-theme="dark"] h2,
html[data-ctw-theme="dark"] h3,
html[data-ctw-theme="dark"] h4,
html[data-ctw-theme="dark"] h5,
html[data-ctw-theme="dark"] h6,
html[data-ctw-theme="dark"] .elementor-heading-title,
html[data-ctw-theme="dark"] .elementor-widget-theme-post-title h1,
html[data-ctw-theme="dark"] .elementor-widget-theme-post-title .elementor-heading-title {
	color: var(--ctw-dm-heading) !important;
}

html[data-ctw-theme="dark"] p,
html[data-ctw-theme="dark"] li,
html[data-ctw-theme="dark"] td,
html[data-ctw-theme="dark"] th,
html[data-ctw-theme="dark"] label,
html[data-ctw-theme="dark"] .elementor-widget-text-editor,
html[data-ctw-theme="dark"] .elementor-widget-theme-post-content,
html[data-ctw-theme="dark"] .elementor-post-info,
html[data-ctw-theme="dark"] .elementor-post-info span,
html[data-ctw-theme="dark"] .elementor-headline,
html[data-ctw-theme="dark"] .elementor-toc__header,
html[data-ctw-theme="dark"] .elementor-toc__body,
html[data-ctw-theme="dark"] .elementor-toc__list-item,
html[data-ctw-theme="dark"] .elementor-toc__list-item-text {
	color: var(--ctw-dm-text) !important;
}

html[data-ctw-theme="dark"] .elementor-post-info,
html[data-ctw-theme="dark"] .elementor-post-info a,
html[data-ctw-theme="dark"] .elementor-post-info span {
	color: var(--ctw-dm-muted) !important;
}

html[data-ctw-theme="dark"] a,
html[data-ctw-theme="dark"] .elementor-toc__list-item-text:hover,
html[data-ctw-theme="dark"] .elementor-post-info a:hover {
	color: var(--ctw-dm-link) !important;
}

/* Inhaltsverzeichnis / typische Boxen */
html[data-ctw-theme="dark"] .elementor-toc,
html[data-ctw-theme="dark"] .elementor-toc__header,
html[data-ctw-theme="dark"] .elementor-toc__body,
html[data-ctw-theme="dark"] .elementor-widget-table-of-contents .elementor-widget-container {
	background-color: var(--ctw-dm-surface) !important;
	border-color: var(--ctw-dm-border) !important;
	color: var(--ctw-dm-text) !important;
}

html[data-ctw-theme="dark"] .elementor-toc__header-title {
	color: var(--ctw-dm-heading) !important;
}

/* Forms / Inputs */
html[data-ctw-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-ctw-theme="dark"] textarea,
html[data-ctw-theme="dark"] select,
html[data-ctw-theme="dark"] .elementor-field-group .elementor-field {
	background-color: var(--ctw-dm-surface) !important;
	color: var(--ctw-dm-text) !important;
	border-color: var(--ctw-dm-border) !important;
}

/* Share / Social Icons */
html[data-ctw-theme="dark"] .elementor-share-btn,
html[data-ctw-theme="dark"] .elementor-social-icon,
html[data-ctw-theme="dark"] .elementor-icon {
	color: var(--ctw-dm-heading) !important;
	border-color: var(--ctw-dm-border) !important;
	background-color: transparent !important;
}

html[data-ctw-theme="dark"] .elementor-share-btn svg,
html[data-ctw-theme="dark"] .elementor-social-icon svg,
html[data-ctw-theme="dark"] .elementor-icon svg,
html[data-ctw-theme="dark"] .e-font-icon-svg {
	fill: currentColor !important;
	color: inherit !important;
}

/* Divider / Borders */
html[data-ctw-theme="dark"] .elementor-divider-separator,
html[data-ctw-theme="dark"] hr {
	border-color: var(--ctw-dm-border) !important;
	background-color: var(--ctw-dm-border) !important;
}

/* Bilder & Videos unangetastet lassen (kein Invert) */
html[data-ctw-theme="dark"] img,
html[data-ctw-theme="dark"] video,
html[data-ctw-theme="dark"] iframe,
html[data-ctw-theme="dark"] .elementor-widget-image img,
html[data-ctw-theme="dark"] .elementor-bg {
	background-color: transparent !important;
}

/* Hintergrundbilder an Sections behalten */
html[data-ctw-theme="dark"] .elementor-background-overlay {
	opacity: 0.45;
}

/*
 * Theme-Wechsel: globale Site-Transitions (oft transition: all in Theme/Elementor)
 * kurzzeitig killen, sonst lerpen Farben und man sieht Zwischenzustände.
 */
html.ctw-theme-instant,
html.ctw-theme-instant *,
html.ctw-theme-instant *::before,
html.ctw-theme-instant *::after {
	transition: none !important;
	animation: none !important;
	animation-duration: 0s !important;
	animation-delay: 0s !important;
}

/* 0,5s Crossfade zwischen zwei fertigen Seiten-Snapshots – keine Farb-Zwischenwerte */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.5s;
	animation-timing-function: ease;
	mix-blend-mode: normal;
}

::view-transition-old(root) {
	animation-name: dmt-dmt9c4e21-vt-fade-out;
}

::view-transition-new(root) {
	animation-name: dmt-dmt9c4e21-vt-fade-in;
}

@keyframes dmt-dmt9c4e21-vt-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes dmt-dmt9c4e21-vt-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none !important;
	}
}