/*
 * Ratgeber (BetterDocs) — Dunkelmodus.
 *
 * Die 113 Artikel unter /ratgeber/ kommen aus BetterDocs und bringen eigene
 * Vorlagen und rund fuenfzehn eigene Stylesheets mit. Das Theme hat fuer `docs`
 * keine Vorlage; entsprechend blieben diese Seiten weisse Flaechen im dunklen
 * Layout, waehrend Kopf und Fuss dem Modus folgten.
 *
 * HANDGESCHRIEBEN UND AUSSERHALB DES TAILWIND-LAUFS, aus demselben Grund wie
 * listing.css und artikel.css: Der Lauf liest seine Klassenliste aus den
 * Quelldateien, und die Klassen hier stammen aus einem Plugin, das er nie
 * sieht.
 *
 * ## Warum hier `!important` steht, und nur hier
 *
 * BetterDocs erzeugt aus seinen Customizer-Einstellungen ein INLINE-Stylesheet
 * im Kopf der Seite, mit Selektoren wie
 *
 *     .betterdocs-single-wrapper.betterdocs-single-layout-4
 *     .docs-single-title .betterdocs-entry-title
 *
 * — vier Klassen, also (0,4,0). Zwei Anlaeufe ohne `!important` sind daran
 * gescheitert: erst (0,1,1), dann (0,2,1). Die naechste Stufe waere gewesen,
 * die Layout-Klassen mitzuschreiben — aber die haengen an den Einstellungen und
 * wechseln, sobald jemand im Customizer ein anderes Layout waehlt. Eine Regel,
 * die dann still nicht mehr greift, ist schlechter als ein `!important` mit
 * Begruendung.
 *
 * Der Eingriff ist eng begrenzt: nur im Dunkelmodus, nur innerhalb von
 * `.betterdocs-wrapper`, nur Farben. Im Hellmodus bleibt BetterDocs
 * vollstaendig unangetastet.
 *
 * ## Aufbau
 *
 * Die Farben stehen als `--docs-*`-Token an einer Stelle, die Zuweisungen
 * zweimal: einmal fuer `html.dark` (die Klasse, die header.php vor dem ersten
 * Anstrich setzt) und einmal fuer `prefers-color-scheme`, damit der Modus auch
 * ohne JavaScript greift. **Beide Bloecke muessen gleich bleiben.**
 */

/* -------------------------------------------------------- Token im Dunkeln */

@media (prefers-color-scheme: dark) {
	:where(html:not(.light)) .betterdocs-wrapper {
		--docs-grund: transparent;
		--docs-flaeche: var(--wpb24-bg);
		--docs-karte: var(--wpb24-bg-soft);
		--docs-linie: var(--wpb24-line);
		--docs-text: var(--wpb24-text);
		--docs-titel: var(--wpb24-text);
		--docs-gedaempft: var(--wpb24-muted);
		--docs-akzent: var(--wpb24-brand-ink);
	}
}

html.dark .betterdocs-wrapper {
	--docs-grund: transparent;
	--docs-flaeche: var(--wpb24-bg);
	--docs-karte: var(--wpb24-bg-soft);
	--docs-linie: var(--wpb24-line);
	--docs-text: var(--wpb24-text);
	--docs-titel: var(--wpb24-text);
	--docs-gedaempft: var(--wpb24-muted);
	--docs-akzent: var(--wpb24-brand-ink);
}

/* ------------------------------------------------- Zuweisungen, Fassung 1/2 */

html.dark .betterdocs-wrapper {
	background: var(--docs-grund) !important;
	color: var(--docs-text) !important;
}

/* Flaechen: Inhalt, Seitenleisten, Suchfeld. */
html.dark .betterdocs-wrapper .betterdocs-content-inner-area,
html.dark .betterdocs-wrapper .betterdocs-content-area,
html.dark .betterdocs-wrapper .betterdocs-sidebar-content,
html.dark .betterdocs-wrapper .betterdocs-body,
html.dark .betterdocs-wrapper .betterdocs-category-grid-wrapper,
html.dark .betterdocs-wrapper .betterdocs-article-reactions,
html.dark .betterdocs-wrapper .betterdocs-toc,
html.dark .betterdocs-wrapper .search-bar,
html.dark .betterdocs-wrapper .search-input-wrapper {
	background-color: var(--docs-flaeche) !important;
}

/* Karten und Knoepfe stehen eine Stufe abgesetzt. */
html.dark .betterdocs-wrapper .betterdocs-single-category-inner,
html.dark .betterdocs-wrapper .betterdocs-mobile-nav-icon-svg,
html.dark .betterdocs-wrapper .betterdocs-category-items,
html.dark .betterdocs-wrapper .docs-cat-link-btn {
	background-color: var(--docs-karte) !important;
}

/* Das Suchband traegt ein Hintergrundbild; nur die Flaeche darunter wechselt. */
html.dark .betterdocs-wrapper .betterdocs-search-layout-1 {
	background-color: var(--docs-grund) !important;
}

html.dark .betterdocs-wrapper .search-bar,
html.dark .betterdocs-wrapper .docs-cat-link-btn,
html.dark .betterdocs-wrapper .betterdocs-single-category-inner,
html.dark .betterdocs-wrapper .betterdocs-toc,
html.dark .betterdocs-wrapper .betterdocs-sidebar-content {
	border-color: var(--docs-linie) !important;
}

html.dark .betterdocs-wrapper .betterdocs-entry-title,
html.dark .betterdocs-wrapper .betterdocs-content-heading,
html.dark .betterdocs-wrapper .betterdocs-category-title,
html.dark .betterdocs-wrapper .betterdocs-category-header,
html.dark .betterdocs-wrapper .betterdocs-single-category-title,
html.dark .betterdocs-wrapper .betterdocs-toc-title {
	color: var(--docs-titel) !important;
}

/*
 * Fliesstext. Ueberschriften und Listen IM Inhalt erben ihre Farbe von
 * `.betterdocs-content` und stehen hier nur, weil BetterDocs sie teilweise
 * einzeln setzt.
 */
html.dark .betterdocs-wrapper .betterdocs-content,
html.dark .betterdocs-wrapper .betterdocs-content p,
html.dark .betterdocs-wrapper .betterdocs-content li,
html.dark .betterdocs-wrapper .betterdocs-content h1,
html.dark .betterdocs-wrapper .betterdocs-content h2,
html.dark .betterdocs-wrapper .betterdocs-content h3,
html.dark .betterdocs-wrapper .betterdocs-content h4,
html.dark .betterdocs-wrapper .betterdocs-content strong,
html.dark .betterdocs-wrapper .betterdocs-content blockquote {
	color: var(--docs-text) !important;
}

/* Beiwerk: Brotkrumen, Zaehler, Datumsangaben, Platzhalter. */
html.dark .betterdocs-wrapper .betterdocs-breadcrumb-item,
html.dark .betterdocs-wrapper .betterdocs-reactions-title-tag,
html.dark .betterdocs-wrapper .betterdocs-single-category-count,
html.dark .betterdocs-wrapper .betterdocs-updated-date,
html.dark .betterdocs-wrapper .search-input,
html.dark .betterdocs-wrapper .betterdocs-category-items-count,
html.dark .betterdocs-wrapper .betterdocs-breadcrumb-item .bread-link,
html.dark .betterdocs-wrapper .betterdocs-single-category-inner a {
	color: var(--docs-gedaempft) !important;
}

html.dark .betterdocs-wrapper .betterdocs-content a,
html.dark .betterdocs-wrapper .betterdocs-toc a,
html.dark .betterdocs-wrapper .betterdocs-sidebar-content a,
html.dark .betterdocs-wrapper .betterdocs-category-items a,
html.dark .betterdocs-wrapper .betterdocs-tags a,
html.dark .betterdocs-wrapper .docs-cat-link-btn {
	color: var(--docs-akzent) !important;
}

html.dark .betterdocs-wrapper input[type="search"],
html.dark .betterdocs-wrapper input[type="text"],
html.dark .betterdocs-wrapper input[type="email"],
html.dark .betterdocs-wrapper textarea {
	background-color: var(--docs-flaeche) !important;
	color: var(--docs-text) !important;
	border-color: var(--docs-linie) !important;
}

html.dark .betterdocs-wrapper ::-moz-placeholder {
	color: var(--docs-gedaempft) !important;
}

html.dark .betterdocs-wrapper ::placeholder {
	color: var(--docs-gedaempft) !important;
}

/* ------------------------------------------------- Zuweisungen, Fassung 2/2 */

/*
 * Wortgleich zu oben, nur mit `prefers-color-scheme` statt der Klasse — fuer
 * Besucher ohne JavaScript, bei denen header.php `html.dark` nie setzt. Wer
 * oben etwas aendert, aendert es hier mit.
 */

@media (prefers-color-scheme: dark) {
	:where(html:not(.light)) .betterdocs-wrapper {
		background: var(--docs-grund) !important;
		color: var(--docs-text) !important;
	}

	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-content-inner-area,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-content-area,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-sidebar-content,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-body,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-category-grid-wrapper,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-article-reactions,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-toc,
	:where(html:not(.light)) .betterdocs-wrapper .search-bar,
	:where(html:not(.light)) .betterdocs-wrapper .search-input-wrapper {
		background-color: var(--docs-flaeche) !important;
	}

	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-single-category-inner,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-mobile-nav-icon-svg,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-category-items,
	:where(html:not(.light)) .betterdocs-wrapper .docs-cat-link-btn {
		background-color: var(--docs-karte) !important;
	}

	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-search-layout-1 {
		background-color: var(--docs-grund) !important;
	}

	:where(html:not(.light)) .betterdocs-wrapper .search-bar,
	:where(html:not(.light)) .betterdocs-wrapper .docs-cat-link-btn,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-single-category-inner,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-toc,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-sidebar-content {
		border-color: var(--docs-linie) !important;
	}

	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-entry-title,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-content-heading,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-category-title,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-category-header,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-single-category-title,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-toc-title {
		color: var(--docs-titel) !important;
	}

	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-content,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-content p,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-content li,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-content h1,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-content h2,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-content h3,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-content h4,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-content strong,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-content blockquote {
		color: var(--docs-text) !important;
	}

	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-breadcrumb-item,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-reactions-title-tag,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-single-category-count,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-updated-date,
	:where(html:not(.light)) .betterdocs-wrapper .search-input,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-category-items-count,
:where(html:not(.light)) .betterdocs-wrapper .betterdocs-breadcrumb-item .bread-link,
:where(html:not(.light)) .betterdocs-wrapper .betterdocs-single-category-inner a {
		color: var(--docs-gedaempft) !important;
	}

	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-content a,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-toc a,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-sidebar-content a,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-category-items a,
	:where(html:not(.light)) .betterdocs-wrapper .betterdocs-tags a,
:where(html:not(.light)) .betterdocs-wrapper .docs-cat-link-btn {
		color: var(--docs-akzent) !important;
	}

	:where(html:not(.light)) .betterdocs-wrapper input[type="search"],
	:where(html:not(.light)) .betterdocs-wrapper input[type="text"],
	:where(html:not(.light)) .betterdocs-wrapper input[type="email"],
	:where(html:not(.light)) .betterdocs-wrapper textarea {
		background-color: var(--docs-flaeche) !important;
		color: var(--docs-text) !important;
		border-color: var(--docs-linie) !important;
	}

	:where(html:not(.light)) .betterdocs-wrapper ::-moz-placeholder {
		color: var(--docs-gedaempft) !important;
	}

	:where(html:not(.light)) .betterdocs-wrapper ::placeholder {
		color: var(--docs-gedaempft) !important;
	}
}