/*
 * VERNETZT.DIGITAL – Farben im dunklen Modus.
 * Getauscht werden nur die Divi-Farbvariablen; alle Presets nutzen diese Variablen
 * und wechseln dadurch mit. Werte aus dem freigegebenen Mockup (soll\mockup-onepager.html).
 *
 * Divi-ID                  Name               hell      dunkel
 * --gcid-primary-color     Primärfarbe        #002D64   #3B82F6
 * --gcid-secondary-color   Sekundärfarbe      #3B82F6   #7FB0FF
 * --gcid-heading-color     Überschrift        #002D64   #E6E6E6
 * --gcid-body-color        Fließtext          #292929   #D6D6D6
 * --gcid-link-color        Link               #002D64   #7FB0FF
 * --gcid-ydj74q3j00        VD Weiß            #FEFEFE   #0B1220  (Fläche; Text auf Primärfarbe)
 * --gcid-25juuo1ayp        VD Linie           #E2E6EC   #22314F
 * --gcid-zuxgbnxvik        VD Fläche hell     #F4F6F9   #101A2E
 * --gcid-b6vqnw3d1s        VD Text gedämpft   #5B6470   #9AA6B8
 */

html[data-theme="dark"] {
	color-scheme: dark;
	--gcid-primary-color: #3b82f6;
	--gcid-secondary-color: #7fb0ff;
	--gcid-heading-color: #e6e6e6;
	--gcid-body-color: #d6d6d6;
	--gcid-link-color: #7fb0ff;
	--gcid-ydj74q3j00: #0b1220;
	--gcid-25juuo1ayp: #22314f;
	--gcid-zuxgbnxvik: #101a2e;
	--gcid-b6vqnw3d1s: #9aa6b8;
}

html[data-theme="dark"] body,
html[data-theme="dark"] #page-container,
html[data-theme="dark"] #main-content,
html[data-theme="dark"] #et-main-area {
	background-color: #0b1220;
	color: #d6d6d6;
}

/* Kästchen-Symbol: fester Hintergrund #DBE2E9 im hellen Modus. */
html[data-theme="dark"] .preset--module--divi-icon--s9kja8h861 {
	background-color: rgba(59, 130, 246, 0.18) !important;
}

/* Übergangslösung bis zum SVG-Logo: PNG-Logo im dunklen Modus aufhellen. */
html[data-theme="dark"] .et_pb_menu__logo img[src$=".png"] {
	filter: invert(1) hue-rotate(180deg) brightness(1.1);
}

/* Schalter-Knopf */
.vd-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--gcid-25juuo1ayp, #e2e6ec);
	border-radius: 999px;
	background: transparent;
	color: var(--gcid-body-color, #292929);
	cursor: pointer;
	line-height: 0;
}

.vd-theme-toggle:hover {
	color: var(--gcid-primary-color, #002d64);
	border-color: currentColor;
}

.vd-theme-toggle:focus-visible {
	outline: 2px solid var(--gcid-primary-color, #002d64);
	outline-offset: 2px;
}

.vd-theme-toggle__sun { display: none; }
html[data-theme="dark"] .vd-theme-toggle__sun { display: block; }
html[data-theme="dark"] .vd-theme-toggle__moon { display: none; }

@media (prefers-reduced-motion: no-preference) {
	html[data-theme] body { transition: background-color .2s ease, color .2s ease; }
}

/* Abschnitte ohne eigene Hintergrundfarbe: Divi setzt fest Weiß (#fff), das im dunklen Modus
   als heller Block stehen bleibt. Hier folgen sie der Variable „VD Weiß“ (hell #FEFEFE, dunkel #0B1220).
   Gleiche Spezifität wie die Divi-Vorgabe, aber später geladen; Presets und eigene Abschnittsfarben
   (spezifischer bzw. !important) und transparente Abschnitte bleiben unberührt. */
.et_pb_section {
	background-color: var(--gcid-ydj74q3j00, #fefefe);
}

/* „Nach oben“-Knopf aus Divi → Theme-Optionen → Integration (#vd-scroll-top).
   Dort steht nur das HTML; Gestaltung hier, Farben folgen hell/dunkel.
   Sichtbar erst nach 400px Scrollen (Klasse „visible“ setzt das Skript dort). */
#vd-scroll-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99990;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gcid-primary-color, #002d64);
	color: var(--gcid-ydj74q3j00, #fefefe);
	box-shadow: 0 4px 14px rgba(5, 10, 20, .25);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
#vd-scroll-top.visible { opacity: 1; visibility: visible; transform: none; }
#vd-scroll-top:hover { background: var(--gcid-secondary-color, #3b82f6); }
#vd-scroll-top:focus-visible { outline: 3px solid var(--gcid-secondary-color, #3b82f6); outline-offset: 2px; }
#vd-scroll-top svg { width: 22px; height: 22px; fill: currentColor; }
@media (max-width: 480px) { #vd-scroll-top { right: 12px; bottom: 12px; } }
@media (prefers-reduced-motion: reduce) { #vd-scroll-top { transition: none; } }

/* ── Inhalte der Seiten (nur Inhaltsbereich, Kopf und Fuß bleiben unberührt) ──
   Schriftgrößen nach dem Design-System (divi-presets.md): H1 54px (Handy 32px), H2 36px (Handy 26px),
   H3 20px, Fließtext 16px. Presets (Dachzeile, Einleitung) haben Vorrang, weil Divi sie später lädt. */
.et-l--post h1 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.12; }
.et-l--post h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.2; }
.et-l--post h3 { font-size: 20px; line-height: 1.3; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.et-l--post .et_pb_text { font-size: 16px; }
.et-l--post .et_pb_text p, .et-l--post .et_pb_text li { line-height: 1.6; }
.et-l--post .et_pb_text h1, .et-l--post .et_pb_text h2, .et-l--post .et_pb_text h3 { padding-bottom: .35em; }
.et-l--post .et_pb_text small { font-size: 14px; color: var(--gcid-b6vqnw3d1s, #5b6470); }

/* Häufige Fragen (Divi-Akkordeon): Flächen und Texte folgen hell/dunkel statt festem Weiß/Grau. */
.et-l--post .et_pb_toggle {
	background-color: var(--gcid-ydj74q3j00, #fefefe);
	border: 1px solid var(--gcid-25juuo1ayp, #e2e6ec);
	border-radius: 12px;
}
.et-l--post .et_pb_toggle .et_pb_toggle_title,
.et-l--post .et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title { color: var(--gcid-heading-color, #002d64); font-size: 17px; line-height: 1.4; }
.et-l--post .et_pb_toggle .et_pb_toggle_content { color: var(--gcid-body-color, #292929); font-size: 16px; }
.et-l--post .et_pb_toggle .et_pb_toggle_title::before { color: var(--gcid-primary-color, #002d64); }

/* Hilfsklassen für Divi-Bausteine (Erweitert → CSS-Klasse), seit 0.7.2:
   vd-gleich-hoch  – Baustein füllt die Höhe seiner Spalte (gleich hohe Karten in einer Zeile)
   vd-ueberstand   – Inhalte dürfen über den Rand ragen (z. B. Kennzeichen „Empfohlen“ auf dem Rahmen) */
.et_pb_column > .vd-gleich-hoch { flex: 1 1 auto !important; align-self: stretch; }
.vd-ueberstand { overflow: visible !important; }

/* vd-faq-zu – FAQ-Akkordeons im Abschnitt: anfangs alle Fragen geschlossen, immer nur eine offen (assets/faq.js) */
.vd-faq-zu .et_pb_toggle_title { cursor: pointer; }
.vd-faq-zu .et_pb_toggle_title:focus-visible { outline: 3px solid var(--gcid-secondary-color, #3b82f6); outline-offset: 3px; }
html:not(.vd-faq-bereit) .vd-faq-zu .et_pb_toggle_content { display: none; }