/*
 * Kontrast-Korrekturen (WCAG 2.1 AA, mind. 4,5:1 für Text).
 * Überschreibt die Blocksy-Customizer-Farben aus uploads/blocksy/css/global.css.
 *
 * #fca311 (Marken-Orange) hat auf Weiß nur 2,0:1 und bleibt deshalb nur als
 * Flächenfarbe (Buttons, Deko-Linien). Für Text auf hellem Grund:
 *   #9a5a00  Link          5,5:1 auf #fff, 4,9:1 auf #f1f1f1
 *   #7a4600  Link-Hover    7,8:1 auf #fff
 *   #111111  Text auf Orange  9,3:1 auf #fca311
 */

:root {
	--theme-link-initial-color: #9a5a00;
	--theme-link-hover-color: #7a4600;

	/* Buttons: Orange bleibt, Schrift dunkel statt weiß */
	--theme-button-text-initial-color: #111111;
	--theme-button-text-hover-color: #9a5a00;

	/* Fließtext fluid statt fest 16px: 16px bei 400px Breite → 19px ab 2560px.
	   Grenzen in rem, damit die Schriftgröße im Browser weiter greift. */
	--theme-font-size: clamp(1rem, 0.9653rem + 0.1389vw, 1.1875rem);
}

/* Tastatur-Fokus: Orange-Rahmen war auf Weiß kaum sichtbar (2,0:1) */
:is(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline-color: #9a5a00;
}

/* Header: Hauptmenü-Hover auf #fafafa */
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a {
	--theme-link-hover-color: #9a5a00;
}

/* Header: Untermenü (dunkler Grund #707070), Hover in Weiß mit Unterstreichung */
[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu .ct-menu-link {
	--theme-link-hover-color: #ffffff;
}
[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu .ct-menu-link:hover {
	text-decoration: underline;
}

/* Header-Button: Hover-Fläche #fdc300, Schrift dunkel */
[data-header*="type-1"] .ct-header [data-id="button"] .ct-button-ghost {
	--theme-button-text-hover-color: #111111;
}

/* Beitragsliste: Titel- und Meta-Hover, "Weiterlesen"-Button */
[data-prefix="blog"] .entry-card .entry-title,
[data-prefix="blog"] .entry-card .entry-meta {
	--theme-link-hover-color: #9a5a00;
}
[data-prefix="blog"] .entry-button.ct-button-ghost {
	--theme-button-text-initial-color: #9a5a00;
	--theme-button-text-hover-color: #111111;
}

/* Seitennummerierung */
[data-prefix="blog"] [data-pagination="simple"],
[data-prefix="categories"] [data-pagination="simple"],
[data-prefix="author"] [data-pagination="simple"],
[data-prefix="search"] [data-pagination="simple"],
[data-pagination="next_prev"] {
	--theme-link-hover-color: #9a5a00;
}

/* Seitenleiste */
.ct-sidebar {
	--theme-link-hover-color: #9a5a00;
}

/*
 * Werbepartner-Slider (Custom-HTML-Widgets). Das Zusatz-CSS im Customizer
 * (Datenbank, lädt nach dieser Datei, daher .ct-sidebar davor) setzt den Text
 * fest auf 0.9rem und die Slider auf feste Mindesthöhen mit overflow: hidden.
 * Text hier relativ zum fluiden Fließtext; die Slides liegen per Grid
 * übereinander, damit der Slider so hoch wird wie seine längste Slide und
 * größerer Text nicht abgeschnitten wird.
 */
.ct-sidebar .custom-widget-slider {
	display: grid;
	min-height: 0;
}
.ct-sidebar .custom-widget-slider .slide {
	grid-area: 1 / 1;
	position: relative;
}
.ct-sidebar .custom-widget-slider :is(p, ul) {
	font-size: 0.9em;
}
.ct-sidebar .custom-widget-slider li {
	font-size: inherit;
}

/* VGA-Widget: Slogan darf bei größerer Schrift umbrechen statt überzulaufen */
.ct-sidebar .vga-cta {
	white-space: normal;
	text-wrap: balance;
}

/* Footer: Widget-Links auf #f1f1f1 */
[data-footer*="type-1"] .ct-footer [data-row*="middle"] .ct-widget {
	--theme-link-initial-color: #9a5a00;
}
[data-footer*="type-1"] .ct-footer [data-column="widget-area-1"] .ct-widget {
	--theme-link-hover-color: #7a4600;
}

/* Footer unten (Grund #4a4a4a): Copyright war 3,9:1, Menü-Hover 4,4:1 */
[data-footer*="type-1"] [data-id="copyright"] {
	--theme-text-color: #d0d0d0;
}
[data-footer*="type-1"] .ct-footer [data-id="menu"] > ul > li > a {
	--theme-link-hover-color: #fdc300;
}

/*
 * Footer unten: Social-Labels (FACEBOOK, X, YOUTUBE) standen in #191919 auf
 * #4a4a4a (1,9:1). Jetzt wie das Copyright #d0d0d0 (5,8:1), Hover #fdc300.
 */
[data-footer*="type-1"] [data-id="socials"].ct-footer-socials a {
	--theme-link-initial-color: #d0d0d0;
	--theme-link-hover-color: #fdc300;
}
[data-footer*="type-1"] [data-id="socials"].ct-footer-socials [data-color="custom"] {
	--theme-icon-color: #d0d0d0;
	--theme-icon-hover-color: #fdc300;
}

/*
 * Umschalter in der orangen Leiste oben (#fdc300): Icon dunkel, auch beim
 * Hover (Blocksy-Standard wäre Elfenbein, 1,3:1).
 */
[data-header*="type-1"] .ct-header [data-row*="top"] .ct-color-switch {
	--theme-icon-color: #111111;
	--theme-icon-hover-color: #111111;
}

/* ------------------------------------------------------------------
 * Dunkelmodus (Anthrazit). Aktiv, wenn data-color-mode am <html> "dark"
 * enthält: "dark" (Besucher hat umgeschaltet) oder "os-default:dark"
 * (Systemeinstellung, gesetzt in functions.php). Legt die Palette hier fest, damit
 * die Customizer-Einstellung "Dunkelmodus-Farbpalette" keine Rolle spielt.
 * Kontraste (WCAG AA):
 *   #e0e0e0  Text            9,2:1 auf #363636, 10,7:1 auf #2b2b2b
 *   #fca311  Link            6,0:1 auf #363636,  7,7:1 auf #242424
 *   #fdc300  Link-Hover      7,5:1 auf #363636
 *   #ffffff  Untermenü       9,3:1 auf #474747
 * Die Kartenfarbe #363636 steckt auch im Logo-Filter (functions.php).
 * ------------------------------------------------------------------ */

:root[data-color-mode*="dark"] {
	color-scheme: dark;

	--theme-palette-color-1: #fca311;
	--theme-palette-color-2: #fffff0;
	--theme-palette-color-3: #474747;
	--theme-palette-color-4: #f0f0f0;
	--theme-palette-color-5: #555555;
	--theme-palette-color-6: #242424;
	--theme-palette-color-7: #2b2b2b;
	--theme-palette-color-8: #363636;

	--theme-text-color: #e0e0e0;
	--theme-link-initial-color: #fca311;
	--theme-link-hover-color: #fdc300;
	--theme-button-text-initial-color: #111111;
	--theme-button-text-hover-color: #111111;
	--theme-selection-text-color: #111111;
	--theme-selection-background-color: #fca311;
}

[data-color-mode*="dark"] :is(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline-color: #fdc300;
}

/*
 * Header-Logo und BVfB-Logo: Varianten mit heller Schrift, jeweils direkt
 * vor dem Original ausgegeben (functions.php)
 */
.btd-dunkel-variante {
	display: none;
}
[data-color-mode*="dark"] .btd-dunkel-variante {
	display: initial;
}
[data-color-mode*="dark"] .btd-dunkel-variante + img {
	display: none;
}

/* Header: obere Leiste bleibt orange, Icons dunkel */
[data-color-mode*="dark"] [data-header*="type-1"] .ct-header [data-row*="top"] {
	--theme-icon-color: #111111;
	--theme-icon-hover-color: #111111;
}

/* Header: Menü */
[data-color-mode*="dark"] [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a {
	--theme-link-hover-color: #fdc300;
}
[data-color-mode*="dark"] [data-header*="type-1"] .ct-header [data-id="menu"] {
	--dropdown-background-color: #474747;
}

/* Menü-Icons: schwarze Kreise, auf Anthrazit mit hellem Rand abgesetzt */
[data-color-mode*="dark"] img.ikons {
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

/* Beitragsliste */
[data-color-mode*="dark"] [data-prefix="blog"] .entry-card .entry-title,
[data-color-mode*="dark"] [data-prefix="blog"] .entry-card .entry-meta {
	--theme-link-hover-color: #fdc300;
}
[data-color-mode*="dark"] [data-prefix="blog"] .entry-button.ct-button-ghost {
	--theme-button-text-initial-color: #fca311;
	--theme-button-text-hover-color: #111111;
}

/* Seitennummerierung */
[data-color-mode*="dark"] [data-prefix="blog"] [data-pagination="simple"],
[data-color-mode*="dark"] [data-prefix="categories"] [data-pagination="simple"],
[data-color-mode*="dark"] [data-prefix="author"] [data-pagination="simple"],
[data-color-mode*="dark"] [data-prefix="search"] [data-pagination="simple"],
[data-color-mode*="dark"] [data-pagination="next_prev"] {
	--theme-link-hover-color: #fdc300;
}

/*
 * VGA-Widget: Das Zusatz-CSS im Customizer (Datenbank) gibt #custom_html-10
 * einen festen hellen Grund (#fffff0) und einen hellgrauen Schatten. Im
 * Dunkelmodus Kartenfarbe wie die übrigen Widgets; Rahmen und Drehung bleiben.
 */
[data-color-mode*="dark"] #custom_html-10 {
	background: var(--theme-palette-color-8);
	box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.5);
}

/* Seitenleiste; Links im VGA-Widget haben eine feste Farbe im Widget-HTML */
[data-color-mode*="dark"] .ct-sidebar {
	--theme-link-hover-color: #fdc300;
}
[data-color-mode*="dark"] .ct-sidebar .vga-link {
	color: #fca311;
}
[data-color-mode*="dark"] .ct-sidebar .vga-link:hover {
	color: #fdc300;
}

/*
 * Links in den Partner-Slidern: Das Zusatz-CSS im Customizer setzt
 * .custom-widget-slider a auf #0073aa (2,5:1 auf #363636).
 */
[data-color-mode*="dark"] .custom-widget-slider a {
	color: #fca311;
}
[data-color-mode*="dark"] .custom-widget-slider a:hover {
	color: #fdc300;
}

/*
 * Kategorien-Widget: Das Zusatz-CSS setzt feste Farben mit !important
 * (Überschrift #111, Unterkategorien auf #f1f1f1, Links #d78703 = 4,2:1).
 */
[data-color-mode*="dark"] :is(.widget_wp_categories_widget, .widget_wpcategorieswidget) h2 {
	color: var(--theme-headings-color) !important;
}
[data-color-mode*="dark"] .cat-have-child ul.children {
	background: var(--theme-palette-color-7) !important;
}
[data-color-mode*="dark"] :is(.widget_wp_categories_widget, .widget_wpcategorieswidget) ul li a {
	color: #fca311 !important;
}
[data-color-mode*="dark"] :is(.widget_wp_categories_widget, .widget_wpcategorieswidget) ul li a:hover {
	color: #fdc300 !important;
}

/*
 * Partner-Logos in der Seitenleiste (Bilder aus den Widgets in der
 * Datenbank, daher per Dateiname): dunkle Schrift auf transparentem oder
 * weißem Grund. Der SVG-Filter #btd-logo-hell (functions.php) kehrt die
 * Helligkeit um, behält den Farbton ungefähr bei und setzt Weiß auf die
 * Kartenfarbe #363636, sodass die Logos ohne Kasten erscheinen. Fotos und
 * farbige Grafiken (VGA-Banner, butler, HK-BUR, Walhalla) bleiben, wie sie
 * sind. Ein neues Logo mit dunkler Schrift hier ergänzen.
 */
[data-color-mode*="dark"] .ct-sidebar :is(
	img[src*="VGA_Logo_blau"],
	img[src*="bt-pro2023.jpg"],
	img[src*="Akademie-HELP"],
	img[src*="wings-fernstudium"],
	img[src*="Weinsberg-Forum-Logo"],
	img[src*="Betreuer-Weiterbildung_Logo"],
	img[src*="fbb-logo"]
) {
	filter: url(#btd-logo-hell);
}

/*
 * Bilder in Beiträgen: transparente PNGs mit dunkler Schrift bleiben auf
 * weißem Grund lesbar; Fotos betrifft das nicht. SVGs ausgenommen: Die
 * Rubrik-Icons (runde Grafiken) bekämen sonst weiße Ecken.
 */
[data-color-mode*="dark"] .entry-content img:not(.emoji, .wp-smiley, [src*=".svg"]) {
	background-color: #ffffff;
}

/* Footer */
[data-color-mode*="dark"] [data-footer*="type-1"] .ct-footer [data-row*="middle"] {
	background-color: #242424;
}
[data-color-mode*="dark"] [data-footer*="type-1"] .ct-footer [data-row*="middle"] .ct-widget {
	--theme-link-initial-color: #fca311;
}
[data-color-mode*="dark"] [data-footer*="type-1"] .ct-footer [data-column="widget-area-1"] .ct-widget {
	--theme-link-hover-color: #fdc300;
}
[data-color-mode*="dark"] [data-footer*="type-1"] .ct-footer [data-row*="bottom"] {
	background-color: #1c1c1c;
}
[data-color-mode*="dark"] [data-footer*="type-1"] .ct-footer [data-id="menu"] > ul > li > a {
	--theme-link-initial-color: #d0d0d0;
}

/* Nach-oben-Button: Hover-Fläche wäre sonst hell (#f0f0f0) unter orangem Icon */
[data-color-mode*="dark"] .ct-back-to-top {
	--top-button-background-hover-color: #111111;
}