/* ==========================================================================
   FARBMODUS  ·  Ticket T71  ·  mu-plugins/hac-farbmodus.php
   --------------------------------------------------------------------------
   1. Knopf Mond/Sonne und Auswahl „Darstellung“ im Footer
   2. Dunkelmodus: Sonderfaelle des eigenen Rahmens (Logo, Umschalten)
   3. Dunkelmodus: fremde Plugins (nur per CSS, nie im Plugin)

   Die Farben selbst stehen als Rollen in themes/hac/style.css. Alles in
   Teil 2 und 3 greift nur unter :root[data-hac-farbmodus="dunkel"] –
   im Hellmodus aendert diese Datei nichts.
   ========================================================================== */

/* ── 1. Knopf und Auswahl ─────────────────────────────────────────────── */

/* Ohne JavaScript gibt es kein data-hac-farbmodus – dann bleibt beides weg. */
.hac-farbschalter,
.hac-footer__farbmodus { display: none; }

html[data-hac-farbmodus] .hac-farbschalter { display: inline-flex; }
html[data-hac-farbmodus] .hac-footer__farbmodus { display: flex; }

/* „.hac-kopf“ davor: Das Elementor-Kit faerbt jeden <button> schwarz. */
.hac-kopf .hac-farbschalter,
.hac-farbschalter {
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--hac-feld-rand, #e8e8e2);
	border-radius: 50%;
	background: transparent;
	color: var(--hac-schrift, #4d504a);
	cursor: pointer;
	transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.hac-kopf .hac-farbschalter:hover,
.hac-kopf .hac-farbschalter:focus {
	border-color: var(--hac-hd-brand, #bac6ae);
	background-color: var(--hac-flaeche, #f4f6f2);
	color: var(--hac-schrift-gruen, #4d5f3b);
}
.hac-farbschalter:focus-visible {
	outline: 2px solid var(--hac-fokus, #333333);
	outline-offset: 3px;
}
body.hac-elektro .hac-kopf .hac-farbschalter:hover,
body.hac-elektro .hac-kopf .hac-farbschalter:focus {
	border-color: var(--hac-hd-blue, #1d89f6);
	color: var(--hac-schrift-blau, #0363c3);
}
.hac-farbschalter svg { display: block; pointer-events: none; }
.hac-farbschalter__sonne { display: none !important; }
:root[data-hac-farbmodus="dunkel"] .hac-farbschalter__mond { display: none !important; }
:root[data-hac-farbmodus="dunkel"] .hac-farbschalter__sonne { display: block !important; }

.hac-kopf .hac-farbschalter--desktop { margin-left: 14px; }

/* Handykopf: neben dem Menueknopf (48 px), gleiche Linie */
.hac-mobilkopf__knoepfe {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Footer: „Darstellung [Automatisch ▾]“ neben den Rechtstext-Links.
   Der Footer ist in beiden Modi dunkel – daher seine eigenen Variablen. */
.hac-footer__farbmodus {
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--hac-muted);
}
.hac-footer__farbmodus label {
	margin: 0;
	font-size: 13px;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
}
.hac-footer .hac-footer__farbmodus select {
	min-height: 44px;
	margin: 0;
	padding: 0 34px 0 12px;
	border: 1px solid #737f70; /* fest: Footer ist immer dunkel, 3,2:1 */
	border-radius: 8px;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23e7ece2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
	color: var(--hac-fg);
	font: inherit;
	font-size: 14px;
	letter-spacing: normal;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	color-scheme: dark;
}
.hac-footer .hac-footer__farbmodus select:focus-visible {
	outline: 2px solid var(--hac-accent);
	outline-offset: 2px;
}
.hac-footer .hac-footer__farbmodus option { background: #1f2620; color: #e7ece2; } /* fest: Footer */

/* ── 2. Dunkelmodus: eigener Rahmen ───────────────────────────────────── */

/* Logo: rundes Siegel auf weissem Grund ohne Transparenz. Kreisrund
   zugeschnitten steht es als Plakette auf dem dunklen Kopf, ohne weisse
   Ecken (Entscheidung Tim, 18.10.2026). */
:root[data-hac-farbmodus="dunkel"] .hac-logo__bild { border-radius: 50%; }

/* Inline-Farben in Inhalten (style-Attribute in Seiten, CF7-Formularen und
   Elementor-Texten, gezaehlt am 19.10.2026). Die Werte #020101, #000000,
   #4d504a, #222, #84847c und #666 stellt themes/hac/style.css schon um.
   Rueckfallwert = Hellwert, damit es auf gruenen Abschnitten (dort sind die
   Rollen „initial“) unveraendert bleibt. Instagram-Einbettungen bleiben hell. */
:root[data-hac-farbmodus="dunkel"] [style*="color: #333333" i]:not([style*="-color: #333333" i]),
:root[data-hac-farbmodus="dunkel"] [style*="color:#333333" i]:not([style*="-color:#333333" i]) {
	color: var(--hac-schrift, #333333) !important;
}
:root[data-hac-farbmodus="dunkel"] [style*="color: #888" i]:not([style*="-color: #888" i]):not(.instagram-media *),
:root[data-hac-farbmodus="dunkel"] [style*="color: #6b6b6b" i]:not([style*="-color: #6b6b6b" i]),
:root[data-hac-farbmodus="dunkel"] [style*="color: #54595f" i]:not([style*="-color: #54595f" i]) {
	color: var(--hac-schrift-leise, #6b6b6b) !important;
}
:root[data-hac-farbmodus="dunkel"] [style*="background-color: #fcfcfc" i],
:root[data-hac-farbmodus="dunkel"] [style*="background-color: #f5f5f5" i],
:root[data-hac-farbmodus="dunkel"] [style*="background-color: #f9f9f9" i] {
	background-color: var(--hac-flaeche, #f9f9f9) !important;
}


/* ── 3. Dunkelmodus: fremde Plugins (nur per CSS, nie im Plugin) ───────── */

/* Veranstaltungskalender (The Events Calendar): Grundvariablen umstellen,
   die abgeleiteten Werte rechnet der Kalender selbst daraus. */
:root[data-hac-farbmodus="dunkel"] {
	--tec-color-background: var(--hac-flaeche-erhoeht);
	--tec-color-background-secondary: var(--hac-flaeche);
	--tec-color-background-secondary-hover: var(--hac-linie);
	--tec-color-background-transparent: rgba(40, 48, 41, .6);
	--tec-color-border-default: var(--hac-feld-rand);
	--tec-color-border-secondary: var(--hac-linie);
	--tec-color-border-tertiary: var(--hac-feld-rand);
	--tec-color-border-hover: var(--hac-schrift-leise);
	--tec-color-border-active: var(--hac-schrift);
	--tec-color-accent-secondary: var(--hac-schrift);
	--tec-color-text-primary: var(--hac-schrift-stark);
	--tec-color-text-primary-light: var(--hac-schrift-leise);
	--tec-color-text-secondary: var(--hac-schrift-leise);
	--tec-color-icon-primary: var(--hac-schrift-leise);
	--tec-color-icon-secondary: var(--hac-schrift-leise);
	--tec-color-icon-active: var(--hac-schrift-stark);
	--tec-color-text-events-title: var(--hac-schrift-stark);
	--tec-color-text-event-title: var(--hac-schrift-stark);
	--tec-color-accent-primary: var(--hac-schrift-blau);
}

/* Kalender: Symbole ohne eigene Farbe (Listenansicht) zeichnet er schwarz */
:root[data-hac-farbmodus="dunkel"] .tribe-common .tribe-common-c-svgicon { color: var(--tec-color-icon-primary); }
:root[data-hac-farbmodus="dunkel"] .tribe-common .tribe-common-c-svgicon path:not([fill]) { fill: currentColor; }

/* Qi Addons: Grundfarben der verwendeten Bausteine (main.min.css, gelesen 19.10.2026) */
:root[data-hac-farbmodus="dunkel"] .qodef-qi-faq.qodef-style--standard .qodef-e-title-holder,
:root[data-hac-farbmodus="dunkel"] .qodef-qi-testimonials-list.qodef-item-layout--boxed .qodef-e-inner,
:root[data-hac-farbmodus="dunkel"] .qodef-addons-blog-list.qodef-item-layout--boxed .qodef-e-inner,
:root[data-hac-farbmodus="dunkel"] .qodef-qi-info-cards {
	background-color: var(--hac-flaeche-erhoeht, #f6f6f6);
}
:root[data-hac-farbmodus="dunkel"] .qodef-qi-faq.qodef-style--boxed { border-color: var(--hac-linie, #ebebeb); }
:root[data-hac-farbmodus="dunkel"] .qodef-qi-timeline .qodef-e-line,
:root[data-hac-farbmodus="dunkel"] .qodef-qi-timeline .qodef-e-point-holder::before,
:root[data-hac-farbmodus="dunkel"] .qodef-qi-timeline .qodef-e-point-holder::after { background-color: var(--hac-linie, #ebebeb); }
:root[data-hac-farbmodus="dunkel"] .qodef-qi-button.qodef-layout--filled:not(:hover):not(:focus-visible) {
	background-color: var(--hac-flaeche-erhoeht, #f4f4f4);
	color: var(--hac-schrift-stark, #111111);
}
:root[data-hac-farbmodus="dunkel"] .qodef-addons-blog-list .qodef-blog-item .qodef-e-info .qodef-e-info-item,
:root[data-hac-farbmodus="dunkel"] .qodef-qi-timeline .qodef-nav-next,
:root[data-hac-farbmodus="dunkel"] .qodef-qi-timeline .qodef-nav-prev,
:root[data-hac-farbmodus="dunkel"] .qodef-swiper-arrow-left,
:root[data-hac-farbmodus="dunkel"] .qodef-swiper-arrow-right {
	color: var(--hac-schrift, #111111);
}

/* Google-Bewertungen (beide Plugins): Karten und Grautoene auf dunklem Grund */
:root[data-hac-farbmodus="dunkel"] .wp-gr {
	--rev-color: var(--hac-flaeche-erhoeht, #f4f4f4);
	--slider-head-card-bg-color: var(--hac-flaeche-erhoeht, #f4f4f4);
}
:root[data-hac-farbmodus="dunkel"] .wp-gr,
:root[data-hac-farbmodus="dunkel"] .wp-gr .wp-google-name,
:root[data-hac-farbmodus="dunkel"] .wp-gr .wp-google-text,
:root[data-hac-farbmodus="dunkel"] .wp-gr .wp-google-based,
:root[data-hac-farbmodus="dunkel"] .wp-gr .wp-google-powered,
:root[data-hac-farbmodus="dunkel"] .wp-gr .wp-google-time {
	color: var(--hac-schrift-leise, #555555) !important;
}
:root[data-hac-farbmodus="dunkel"] .wp-gr .wp-google-name a,
:root[data-hac-farbmodus="dunkel"] .wp-gr .wp-google-text {
	color: var(--hac-schrift, #333333) !important;
}

/* Elementor: Symbole ohne eigene Farbe zeichnet Elementor schwarz */
:root[data-hac-farbmodus="dunkel"] .elementor-icon-list-icon svg:not([style*="fill"]),
:root[data-hac-farbmodus="dunkel"] .elementor-widget-icon-list .elementor-icon-list-icon svg {
	fill: currentColor;
}

/* Contact Form 7: Rueckmeldung unter dem Formular */
:root[data-hac-farbmodus="dunkel"] .wpcf7 form .wpcf7-response-output {
	color: var(--hac-schrift, #333333);
}

/* Beim Umschalten keine Uebergaenge – sonst flackert die Seite in Wellen. */
html.hac-farbwechsel *,
html.hac-farbwechsel *::before,
html.hac-farbwechsel *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
	.hac-farbschalter { transition: none; }
}

@media print {
	.hac-farbschalter,
	.hac-footer__farbmodus { display: none !important; }
}