/*
 * Hell/Dunkel-Umschalter und Dunkles Design (inc/theme-switch.php, js/theme-switch.js), wie auf
 * saasweb.agency (saasweb-reconcept, _dark-agency.scss). Die dunklen Farben greifen nur mit
 * <html data-theme="dark">; das helle Design bleibt unverändert.
 *
 * Eigene Datei, nach style.css geladen: WP Rocket "Remove unused CSS" würde die Regeln sonst
 * entfernen (data-theme setzt erst das Skript im Browser), die Datei steht deshalb ganz in der
 * Safelist (functions.php saasweb_rucss_safelist).
 */

/* ---- Umschalter (beide Modi) ---- */
#site-header .theme-switch,
.modal-menu .theme-switch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(23, 64, 75, 0.25);
	border-radius: 999px;
	background: transparent;
	color: var(--sw-green-dark);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#site-header .theme-switch:hover,
#site-header .theme-switch:focus-visible,
.modal-menu .theme-switch:hover,
.modal-menu .theme-switch:focus-visible {
	background: rgba(23, 64, 75, 0.08);
	border-color: var(--sw-green-dark);
	text-decoration: none;
}

.theme-switch:focus-visible {
	outline: 2px solid var(--sw-green-light);
	outline-offset: 2px;
}

.theme-switch .theme-switch__icon--sun {
	display: none;
}

/* im Hauptmenü mittig zur Textzeile */
#site-header .primary-menu .menu-item-theme-switch {
	display: flex;
	align-items: center;
}

/* mobiles Menü: breiter Knopf mit Text */
.modal-menu .theme-switch--mobile {
	width: auto;
	height: auto;
	margin: 1.2rem 2rem;
	padding: 0.85rem 1.25rem;
	border-radius: 8px;
	font-family: var(--sw-font-heading);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

/* ---- Dunkle Farben ---- */
html[data-theme="dark"] {
	--dk-bg: #0d1a1e;          /* Seite */
	--dk-surface: #13252a;     /* Karten, Header, Footer */
	--dk-surface-2: #1a3137;   /* hervorgehobene Flächen, Felder */
	--dk-line: rgba(255, 255, 255, 0.1);
	--dk-text: #cfdcdf;        /* Fließtext */
	--dk-muted: #93a9af;       /* Nebentext */
	--dk-head: #f1f6f7;        /* Überschriften */
	--dk-accent: #b2c300;
	--dk-on-accent: #0b242b;   /* Schrift auf Hellgrün */

	color-scheme: dark;
	background: var(--dk-bg);
}

/* Umschalter im dunklen Modus: Sonne zeigen, hell umrandet */
html[data-theme="dark"] #site-header .theme-switch,
html[data-theme="dark"] .modal-menu .theme-switch {
	border-color: var(--dk-line);
	color: var(--dk-head);
}

html[data-theme="dark"] #site-header .theme-switch:hover,
html[data-theme="dark"] #site-header .theme-switch:focus-visible,
html[data-theme="dark"] .modal-menu .theme-switch:hover,
html[data-theme="dark"] .modal-menu .theme-switch:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--dk-head);
}

html[data-theme="dark"] .theme-switch .theme-switch__icon--moon {
	display: none;
}

html[data-theme="dark"] .theme-switch .theme-switch__icon--sun {
	display: block;
	color: var(--dk-accent);
}

/* ---- Grundfarben, Typografie ---- */
html[data-theme="dark"] body,
html[data-theme="dark"] body.custom-background {
	background-color: var(--dk-bg) !important; /* Customizer: cremefarben mit !important */
	color: var(--dk-text);
}

html[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6) {
	color: var(--dk-head);
}

html[data-theme="dark"] .entry-content,
html[data-theme="dark"] .entry-content :is(p, li, td, th, dd, dt, figcaption) {
	color: var(--dk-text);
}

html[data-theme="dark"] .entry-content :is(h2, h3, h4, h5, h6),
html[data-theme="dark"] .entry-content strong {
	color: var(--dk-head);
}

html[data-theme="dark"] .entry-content a:not(.wp-block-button__link):not(.sw-tile):not(.sw-product):not(.sw-cloud-teaser-button):not(.sw-home-cta-secondary) {
	color: var(--dk-accent);
}

html[data-theme="dark"] :is(hr, .wp-block-separator) {
	border-color: var(--dk-line);
	color: var(--dk-line);
}

html[data-theme="dark"] .wp-block-button__link,
html[data-theme="dark"] .entry-content .button {
	background-color: var(--dk-accent);
	color: var(--dk-on-accent);
}

/* Seitenkopf mit H1 (weißes Band), H1-Kasten bleibt petrol */
html[data-theme="dark"] .singular .entry-header,
html[data-theme="dark"] .entry-header {
	background-color: var(--dk-surface);
}

/* Beitragsbild (Produktlogo) unter dem Seitenkopf: Band dunkel, Logo auf hellem Feld */
html[data-theme="dark"] .singular .featured-media::before {
	background-color: var(--dk-surface);
}

html[data-theme="dark"] .singular .featured-media img {
	padding: 1.2rem 2rem;
	border-radius: 12px;
	background: #fff;
}

html[data-theme="dark"] body h1 .sw-h1-sub {
	color: var(--dk-text);
}

/* ---- Header und Menü ---- */
html[data-theme="dark"] #site-header,
html[data-theme="dark"] #site-footer,
html[data-theme="dark"] .header-footer-group {
	background-color: var(--dk-surface);
	color: var(--dk-text);
}

html[data-theme="dark"] #site-header {
	box-shadow: 0 1px 0 var(--dk-line);
}

html[data-theme="dark"] .custom-logo-link .logo-schrift {
	fill: var(--dk-head);
}

html[data-theme="dark"] header span.site-name,
html[data-theme="dark"] .site-description {
	color: var(--dk-muted);
}

html[data-theme="dark"] header span.site-name {
	color: var(--dk-head);
}

html[data-theme="dark"] body:not(.overlay-header) .primary-menu > li > a,
html[data-theme="dark"] body:not(.overlay-header) .primary-menu > li > .icon,
html[data-theme="dark"] .modal-menu a,
html[data-theme="dark"] .header-footer-group .toggle,
html[data-theme="dark"] .footer-menu a,
html[data-theme="dark"] .footer-widgets a,
html[data-theme="dark"] #site-footer a {
	color: var(--dk-head);
}

html[data-theme="dark"] #site-header .primary-menu ul {
	background-color: var(--dk-surface);
	color: var(--dk-head);
	border-color: var(--dk-line);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] #site-header .primary-menu > li > ul::after {
	border-bottom-color: var(--dk-surface);
}

html[data-theme="dark"] #site-header .primary-menu ul ul::after {
	border-left-color: var(--dk-surface);
}

html[data-theme="dark"] #site-header .primary-menu ul a {
	color: var(--dk-head);
}

/* mobiles Menü */
html[data-theme="dark"] .menu-modal,
html[data-theme="dark"] .menu-modal-inner,
html[data-theme="dark"] .modal-inner {
	background-color: var(--dk-bg);
}

html[data-theme="dark"] .modal-menu,
html[data-theme="dark"] .modal-menu li,
html[data-theme="dark"] .modal-menu .ancestor-wrapper,
html[data-theme="dark"] .modal-menu .sub-menu-toggle,
html[data-theme="dark"] .menu-modal .menu-bottom {
	border-color: var(--dk-line);
}

html[data-theme="dark"] .menu-modal .toggle {
	color: var(--dk-head);
}

/* Menüpunkt zum Bestellformular: hellgrüner Button statt petrol */
html[data-theme="dark"] #site-header .primary-menu > li > a[href$="/bestellen/"],
html[data-theme="dark"] .modal-menu a[href$="/bestellen/"] {
	background-color: var(--dk-accent);
	color: var(--dk-on-accent);
}

html[data-theme="dark"] #site-header .primary-menu > li > a[href$="/bestellen/"]:hover,
html[data-theme="dark"] #site-header .primary-menu > li > a[href$="/bestellen/"]:focus,
html[data-theme="dark"] .modal-menu a[href$="/bestellen/"]:hover,
html[data-theme="dark"] .modal-menu a[href$="/bestellen/"]:focus {
	background-color: var(--dk-head);
	color: var(--dk-on-accent);
}

/* ---- Footer ---- */
html[data-theme="dark"] #site-footer,
html[data-theme="dark"] .footer-nav-widgets-wrapper,
html[data-theme="dark"] .footer-top,
html[data-theme="dark"] .footer-widgets-outer-wrapper {
	border-color: var(--dk-line);
}

html[data-theme="dark"] .footer-credits,
html[data-theme="dark"] .powered-by-wordpress a,
html[data-theme="dark"] .to-the-top {
	color: var(--dk-muted);
}

/* ---- Startseite: Kacheln, Erklärtext ---- */
html[data-theme="dark"] .entry-content .sw-tiles .sw-tile,
html[data-theme="dark"] .sw-home-app,
html[data-theme="dark"] .sw-home-compare,
html[data-theme="dark"] .entry-content .sw-features,
html[data-theme="dark"] .entry-content .sw-products .sw-product {
	background: var(--dk-surface);
	border-color: var(--dk-line);
	color: var(--dk-head);
	box-shadow: none;
}

html[data-theme="dark"] .entry-content .sw-tiles .sw-tile:hover,
html[data-theme="dark"] .entry-content .sw-tiles .sw-tile:focus,
html[data-theme="dark"] .entry-content .sw-products .sw-product:hover,
html[data-theme="dark"] .entry-content .sw-products .sw-product:focus {
	border-color: var(--dk-accent);
	box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] :is(.sw-tile-title, .sw-tile-more, .sw-product-title),
html[data-theme="dark"] .sw-home .sw-home-link {
	color: var(--dk-head);
}

html[data-theme="dark"] .sw-home,
html[data-theme="dark"] .entry-content .sw-home-start {
	color: var(--dk-text);
}

html[data-theme="dark"] :is(.sw-tile-text, .sw-product-slogan),
html[data-theme="dark"] .sw-home .sw-home-app p {
	color: var(--dk-text);
}

/* Logos mit dunkler Schrift (OpenProject, Rocket.Chat …) auf hellem Feld */
html[data-theme="dark"] .sw-product-logo {
	align-self: flex-start;
	width: fit-content;
	padding: 0.8rem 1.2rem;
	border-radius: 8px;
	background: #fff;
}

html[data-theme="dark"] .entry-content .sw-product-logo img {
	max-height: 4.8rem;
}

html[data-theme="dark"] .sw-product-function {
	color: var(--dk-muted);
}

html[data-theme="dark"] .sw-home-kicker {
	color: var(--dk-accent);
}

html[data-theme="dark"] .sw-home-compare-row {
	border-color: var(--dk-line);
}

html[data-theme="dark"] .sw-home-compare-row > span:nth-child(2) {
	color: var(--dk-muted);
}

html[data-theme="dark"] .sw-home-compare-row > span:nth-child(3) {
	background: rgba(178, 195, 0, 0.08);
	color: var(--dk-head);
}

html[data-theme="dark"] .sw-home-compare-head > span:nth-child(3) {
	background: var(--dk-surface-2);
}

html[data-theme="dark"] .sw-home-steps li {
	background: var(--dk-surface);
}

html[data-theme="dark"] .sw-home .sw-home-steps p {
	color: var(--dk-text);
}

html[data-theme="dark"] :is(.sw-home-faq-item, .sw-home-faq-item:last-child) {
	border-color: var(--dk-line);
}

/* petrolfarbene Flächen heben sich vom dunklen Grund durch eine feine Kante ab */
html[data-theme="dark"] .sw-cloud-teaser,
html[data-theme="dark"] #price-info {
	box-shadow: inset 0 0 0 1px var(--dk-line);
}

/* Funktionsliste der Softwareseiten */
html[data-theme="dark"] .entry-content .sw-features-list li {
	border-color: var(--dk-line);
}

/* ---- Bestellformular: Gravity Forms Orbital über seine Farbvariablen (wie bei den hellen
   Farben spezifischer als die Inline-Regel #gform_wrapper_1[data-form-index="0"].gform-theme) ---- */
html[data-theme="dark"] body #gform_wrapper_1.gform-theme--orbital[data-form-index] {
	--gf-color-primary: #b2c300;
	--gf-color-primary-rgb: 178, 195, 0;
	--gf-color-primary-contrast: #0b242b;
	--gf-color-primary-contrast-rgb: 11, 36, 43;
	--gf-color-primary-darker: #8f9d00;
	--gf-color-primary-lighter: #c8d64a;
	--gf-color-secondary: #1a3137;
	--gf-color-secondary-rgb: 26, 49, 55;
	--gf-color-secondary-contrast: #f1f6f7;
	--gf-color-secondary-contrast-rgb: 241, 246, 247;
	--gf-color-secondary-darker: #13252a;
	--gf-color-secondary-lighter: #22404a;
	--gf-color-out-ctrl-light: rgba(255, 255, 255, 0.1);
	--gf-color-out-ctrl-light-rgb: 255, 255, 255;
	--gf-color-out-ctrl-light-darker: rgba(255, 255, 255, 0.25);
	--gf-color-out-ctrl-light-lighter: #13252a;
	--gf-color-out-ctrl-dark: #93a9af;
	--gf-color-out-ctrl-dark-rgb: 147, 169, 175;
	--gf-color-out-ctrl-dark-darker: #f1f6f7;
	--gf-color-out-ctrl-dark-lighter: rgba(255, 255, 255, 0.65);
	--gf-color-in-ctrl: #1a3137;
	--gf-color-in-ctrl-rgb: 26, 49, 55;
	--gf-color-in-ctrl-contrast: #f1f6f7;
	--gf-color-in-ctrl-contrast-rgb: 241, 246, 247;
	--gf-color-in-ctrl-darker: #13252a;
	--gf-color-in-ctrl-lighter: #22404a;
	--gf-color-in-ctrl-primary: #b2c300;
	--gf-color-in-ctrl-primary-rgb: 178, 195, 0;
	--gf-color-in-ctrl-primary-contrast: #0b242b;
	--gf-color-in-ctrl-primary-contrast-rgb: 11, 36, 43;
	--gf-color-in-ctrl-primary-darker: #8f9d00;
	--gf-color-in-ctrl-primary-lighter: #c8d64a;
	--gf-color-in-ctrl-light: rgba(255, 255, 255, 0.1);
	--gf-color-in-ctrl-light-rgb: 255, 255, 255;
	--gf-color-in-ctrl-light-darker: rgba(255, 255, 255, 0.25);
	--gf-color-in-ctrl-light-lighter: #13252a;
	--gf-color-in-ctrl-dark: #93a9af;
	--gf-color-in-ctrl-dark-rgb: 147, 169, 175;
	--gf-color-in-ctrl-dark-darker: #f1f6f7;
	--gf-color-in-ctrl-dark-lighter: rgba(255, 255, 255, 0.65);
	--gf-ctrl-border-color: rgba(255, 255, 255, 0.25);
	--gf-ctrl-label-color-primary: #f1f6f7;
	--gf-ctrl-label-color-secondary: #cfdcdf;
	--gf-ctrl-btn-border-color-secondary: rgba(255, 255, 255, 0.25);
	--gf-ctrl-btn-bg-color-hover-tertiary: #22404a;
	--gf-field-pg-steps-number-color: #cfdcdf;
}

/* Auswahlkarten der Anwendungen und Upgrades */
html[data-theme="dark"] #gform_fields_1 .gfield_checkbox .gchoice,
html[data-theme="dark"] #gform_fields_1_3 .gfield_checkbox .gchoice {
	background-color: var(--dk-surface);
	border-color: var(--dk-line);
}

html[data-theme="dark"] #gform_fields_1 .gfield_checkbox .gchoice:hover,
html[data-theme="dark"] #gform_fields_1_3 .gfield_checkbox .gchoice:hover {
	border-color: var(--dk-accent);
	box-shadow: none;
}

html[data-theme="dark"] #gform_fields_1 .gfield_checkbox .gchoice.checked-product,
html[data-theme="dark"] #gform_fields_1_3 .gfield_checkbox .gchoice.checked-product {
	border-color: var(--dk-accent);
	background-color: rgba(178, 195, 0, 0.08);
}

html[data-theme="dark"] #gform_fields_1 .gfield_checkbox .gchoice label,
html[data-theme="dark"] #gform_fields_1_3 .gfield_checkbox .gchoice label {
	color: var(--dk-head);
}

html[data-theme="dark"] .product-short-description,
html[data-theme="dark"] .sw-website-tariff .sw-tariff-features,
html[data-theme="dark"] .sw-wp-package-price {
	color: var(--dk-muted);
}

/* eigene Bausteine im Formular */
html[data-theme="dark"] .gform_wrapper .gform-theme__disable input:is([type="checkbox"], [type="radio"]) {
	accent-color: var(--dk-accent);
}

html[data-theme="dark"] :is(.sw-website-tariff label, .sw-wp-packages label, .sw-wp-packages-title, .sw-wp-packages legend) {
	color: var(--dk-head);
}

html[data-theme="dark"] .sw-website-tariff {
	border-color: var(--dk-line);
}

html[data-theme="dark"] .sw-wp-packages {
	background: var(--dk-surface);
	border-color: var(--dk-line);
}

html[data-theme="dark"] .sw-special-settings label.sw-unavailable,
html[data-theme="dark"] form .gform_body input[type='radio'][disabled] + label {
	color: rgba(255, 255, 255, 0.35);
}

html[data-theme="dark"] :is(.sw-user-warning, .sw-sso-info, .sw-server-hint) {
	background: rgba(219, 166, 23, 0.12);
	color: var(--dk-text);
}

/* Schritte des Bestellformulars */
html[data-theme="dark"] .sw-step + .sw-step::before {
	background: var(--dk-line);
}

html[data-theme="dark"] .sw-step-done + .sw-step::before,
html[data-theme="dark"] .sw-step-done + .sw-step-current::before {
	background: var(--dk-accent);
}

html[data-theme="dark"] .sw-step button {
	color: var(--dk-muted);
}

html[data-theme="dark"] :is(.sw-step-current, .sw-step-done) button {
	color: var(--dk-head);
}

html[data-theme="dark"] .sw-step-number {
	border-color: var(--dk-line);
	background: var(--dk-surface);
}

html[data-theme="dark"] .sw-step-current .sw-step-number {
	border-color: var(--dk-accent);
	background: var(--sw-green-dark);
	color: #fff;
}

html[data-theme="dark"] .sw-step-done .sw-step-number {
	border-color: var(--dk-accent);
	background: var(--dk-accent);
}

html[data-theme="dark"] .gform_wrapper .sw-next-hint {
	color: var(--dk-muted);
}

/* Beschreibung der WordPress-Pakete: Formular (Kurzsatz, Info-Knopf, Details) und Produktseite */
html[data-theme="dark"] .sw-wp-package-summary,
html[data-theme="dark"] .entry-content .sw-packages-intro {
	color: var(--dk-muted);
}

html[data-theme="dark"] .gform_wrapper .sw-info {
	color: var(--dk-head);
}

html[data-theme="dark"] .gform_wrapper .sw-info:hover,
html[data-theme="dark"] .gform_wrapper .sw-info:focus-visible,
html[data-theme="dark"] .gform_wrapper .sw-info[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .sw-wp-package-details {
	background: var(--dk-surface-2);
	color: var(--dk-text);
}

html[data-theme="dark"] .entry-content .sw-packages {
	background: var(--dk-surface);
	border-color: var(--dk-line);
	color: var(--dk-text);
	box-shadow: none;
}

html[data-theme="dark"] .entry-content .sw-tariffs {
	background: var(--dk-surface);
	border-color: var(--dk-line);
	color: var(--dk-text);
	box-shadow: none;
}

html[data-theme="dark"] .entry-content .sw-tab-list,
html[data-theme="dark"] .entry-content .sw-tariff-table th,
html[data-theme="dark"] .entry-content .sw-tariff-table td {
	border-color: var(--dk-line);
}

html[data-theme="dark"] .entry-content .sw-tab {
	color: var(--dk-muted);
}

html[data-theme="dark"] .entry-content .sw-tab:hover,
html[data-theme="dark"] .sw-tab-input:nth-of-type(1):checked ~ .sw-tab-list .sw-tab:nth-child(1),
html[data-theme="dark"] .sw-tab-input:nth-of-type(2):checked ~ .sw-tab-list .sw-tab:nth-child(2),
html[data-theme="dark"] .sw-tab-input:nth-of-type(3):checked ~ .sw-tab-list .sw-tab:nth-child(3),
html[data-theme="dark"] .sw-tab-input:nth-of-type(4):checked ~ .sw-tab-list .sw-tab:nth-child(4) {
	color: var(--dk-head);
}

html[data-theme="dark"] .entry-content .sw-tariff-table th[scope="row"] {
	color: var(--dk-head);
}

html[data-theme="dark"] .entry-content .sw-tariff-table .sw-tariff-section th {
	color: var(--dk-accent);
}

html[data-theme="dark"] .sw-tariff-no {
	background: rgba(255, 255, 255, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfdcdf' stroke-opacity='0.7' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 1rem no-repeat;
}

html[data-theme="dark"] .entry-content .sw-package {
	border-color: var(--dk-line);
}

html[data-theme="dark"] .entry-content .sw-package-meta {
	color: var(--dk-accent);
}

html[data-theme="dark"] .gform_wrapper .sw-wp-package-details li:has(br),
html[data-theme="dark"] .entry-content .sw-package-details li:has(br) {
	color: var(--dk-muted);
}

html[data-theme="dark"] .gform_wrapper .sw-wp-package-details li:has(br)::first-line,
html[data-theme="dark"] .entry-content .sw-package-details li:has(br)::first-line {
	color: var(--dk-head);
}

/* Menü-Knopf im Kopf (mobil): Twenty Twenty setzt die Farbe über #site-header */
html[data-theme="dark"] body:not(.overlay-header) #site-header .toggle {
	color: var(--dk-head);
}

html[data-theme="dark"] body:not(.overlay-header) .toggle-inner .toggle-text {
	color: var(--dk-muted);
}