/**
 * FO-E DigitalLab – Sonderfall.
 *
 * Das DigitalLab bringt eine eigene, kräftigere Farbwelt mit (Türkis, Limette,
 * Violett), die mit der Hausfarbpalette nichts zu tun hat. Elf Farben, die
 * sonst nirgends auf der Seite vorkommen.
 *
 * Diese Datei wird ausschliesslich auf den DigitalLab-Seiten geladen
 * (siehe foe_ist_digitallab() in functions.php) und ist zusätzlich unter
 * .foe-digitallab eingezäunt. Zwei Schlösser an derselben Tür, mit Absicht:
 * das Laden hält die Bytes von den anderen Seiten fern, der Selektor hält die
 * Regeln davon ab, über den Rand zu greifen, falls die Datei doch einmal
 * global eingebunden wird.
 *
 * Die Farben stehen bewusst NICHT in theme.json. Sonst stünden sie in der
 * Farbauswahl jeder einzelnen Seite und die Hauspalette hätte 21 statt
 * 10 Einträge.
 */

.foe-digitallab {
	/* Flächen */
	--dl-dunkel: #1d212d;
	--dl-hell: #fff4f4;

	/* Akzente */
	--dl-tuerkis: #00bcdd;
	--dl-limette: #cbd137;
	--dl-violett: #6a32cf;
	--dl-violett-grell: #7e00fc;
	--dl-violett-hell: #b388f5;

	/* Flächen in Violett */
	--dl-flieder: #d9d8fe;
	--dl-flieder-grau: #bbb2dd;
}

/* ---------------------------------------------------------------------------
   Lesbarkeit auf der dunklen Fläche

   #1d212d ist dunkler als das Hausnavy und trägt die Schriftfarbe #0a0a0a
   nicht – das ergibt einen Kontrast von 1,3 : 1. Auf dieser Fläche gilt
   deshalb helle Schrift, unabhängig davon, was im Inhalt steht.
--------------------------------------------------------------------------- */

.foe-digitallab .dl-dunkel,
.foe-digitallab [style*="#1d212d"] {
	background-color: var(--dl-dunkel);
	color: var(--wp--preset--color--creme);
}

.foe-digitallab .dl-dunkel :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--weiss);
}

.foe-digitallab .dl-dunkel a:not(.wp-element-button) {
	color: var(--dl-tuerkis);
}

.foe-digitallab .dl-dunkel a:not(.wp-element-button):hover {
	color: var(--dl-limette);
}

/* ---------------------------------------------------------------------------
   Hilfsklassen

   Damit sich die DigitalLab-Farben im Editor benutzen lassen, ohne sie in die
   Hauspalette aufzunehmen: als zusätzliche CSS-Klasse am Block eintragen
   (Block-Einstellungen → Erweitert → Zusätzliche CSS-Klasse).
--------------------------------------------------------------------------- */

.foe-digitallab .dl-hell { background-color: var(--dl-hell); }
.foe-digitallab .dl-flieder { background-color: var(--dl-flieder); }
.foe-digitallab .dl-flieder-grau { background-color: var(--dl-flieder-grau); }

.foe-digitallab .dl-text-tuerkis { color: var(--dl-tuerkis); }
.foe-digitallab .dl-text-limette { color: var(--dl-limette); }
.foe-digitallab .dl-text-violett { color: var(--dl-violett); }

.foe-digitallab .dl-akzent-tuerkis { border-color: var(--dl-tuerkis); }
.foe-digitallab .dl-akzent-limette { border-color: var(--dl-limette); }
.foe-digitallab .dl-akzent-violett { border-color: var(--dl-violett); }

/* ---------------------------------------------------------------------------
   Wellen in DigitalLab-Farben

   Die Wellenübergänge selbst kommen aus foe.css; hier wird nur die Farbe
   umgestellt, damit eine Welle zwischen zwei DigitalLab-Flächen passt.
--------------------------------------------------------------------------- */

.foe-digitallab .has-welle-dl-dunkel { --foe-welle-farbe: var(--dl-dunkel); }
.foe-digitallab .has-welle-dl-hell { --foe-welle-farbe: var(--dl-hell); }
.foe-digitallab .has-welle-dl-flieder { --foe-welle-farbe: var(--dl-flieder); }

/* ---------------------------------------------------------------------------
   Buttons

   Der Hausbutton ist creme auf navy. Im DigitalLab trägt er die Akzentfarbe;
   der Hover bleibt beim Hausmuster (dunkle Fläche, helle Schrift).
--------------------------------------------------------------------------- */

.foe-digitallab .dl-button .wp-element-button,
.foe-digitallab .dl-button.wp-element-button {
	background-color: var(--dl-tuerkis);
	color: var(--dl-dunkel);
	border-color: transparent;
}

.foe-digitallab .dl-button .wp-element-button:hover,
.foe-digitallab .dl-button.wp-element-button:hover {
	background-color: var(--dl-dunkel);
	color: var(--dl-tuerkis);
	border-color: var(--dl-tuerkis);
}