/* ==========================================================================
   Farbschema: hell und dunkel

   Wird NACH style.css geladen und regelt ausschliesslich Farben. Am Aufbau,
   an den Abstaenden und an der Schrift aendert sich nichts.

   Drei Zustaende:
     1. Nichts gewaehlt     - die Seite folgt der Einstellung des Geraets
     2. data-theme="hell"   - ausdruecklich hell
     3. data-theme="dunkel" - ausdruecklich dunkel

   Den Zustand setzt der Schalter in der Navigation. Er merkt sich die Wahl
   im Browser des Besuchers; ein kurzes Skript im Seitenkopf traegt sie noch
   vor dem ersten Zeichnen ein, damit die Seite nicht kurz hell aufblitzt.

   Aufbau: zuerst die hellen Werte als Vorgabe, dann dieselben Namen mit
   dunklen Werten - einmal fuer "Geraet steht auf dunkel", einmal fuer die
   ausdrueckliche Wahl. Danach die Regeln, die diese Werte benutzen. Die
   Regeln stehen nur einmal da und gelten immer; welche Farbe sie ziehen,
   entscheiden die Variablen.

   Wieder loswerden: in _partials/head.php die Zeile mit css/farbschema.css
   und das kurze Skript darunter entfernen, in _partials/nav-main.php den
   Schalter. Dann greift wieder allein style.css.
   ========================================================================== */

:root {
	/* Sagt dem Browser, dass die Seite beides beherrscht. Er faerbt daraufhin
	   auch das ein, was nicht uns gehoert: Bildlaufleisten, Eingabefelder,
	   Auswahllisten, die Flaeche jenseits des Seitenendes. */
	color-scheme: light dark;

	/* --- Helle Vorgaben. Sie entsprechen genau dem, was style.css ohnehin
	       tut; im hellen Zustand aendert diese Datei also nichts. --- */
	--flaeche:              #fff;
	--flaeche-leiste:       #fff;
	--flaeche-nav:          var(--farbe-akzent);
	/* Der Untermenue-Kasten traegt ein tieferes Gruen als das Menue darueber.
	   Das hat zwei Gruende: weisse Schrift erreicht darauf 4,67:1 statt der
	   1,48:1 auf dem Markengruen, und der Kasten hebt sich von der
	   Navigationsflaeche ab (3,15:1), auf der er in der schmalen Ansicht
	   liegt. */
	--flaeche-untermenue:   #6e7b01;
	--flaeche-untermenue-aktiv: #556000;
	--linie-untermenue:     rgba(255, 255, 255, .22);
	--farbe-untermenue:     #fff;
	--flaeche-karte:        #ececec;
	--flaeche-fuss:         var(--farbe-akzent);

	--farbe-nav:            #a5b701;
	--farbe-ueberschrift:   var(--farbe-akzent-dunkel);
	/* Die grossen Ueberschriften muessen auf drei Untergruenden tragen: auf
	   der weissen Seite, auf dem hellen und auf dem dunklen Ende des gruenen
	   Bandes. Manche ragen naemlich absichtlich ueber die Bandkante hinaus
	   und liegen dann zur Haelfte auf Weiss. Dieses tiefe Oliv erreicht auf
	   allen dreien mindestens 5,5:1. */
	--farbe-ueberschrift-gross: #2b3000;
	--farbe-fuss:           var(--farbe-text);
	--farbe-fuss-verweis:   inherit;
	--farbe-linie:          #000;
	--farbe-linie-nav:      #fff;

	--verlauf-kopfbild:     linear-gradient(20deg, #414800, rgba(179, 199, 1, .3) 50%);
	--verlauf-band:         linear-gradient(35deg, var(--farbe-akzent), var(--farbe-akzent-dunkel));
	--verlauf-kachel:       linear-gradient(35deg, #e1f901, #859401);
	/* Die zweite Kachel war #a6a6a6 nach grau. Weisse Schrift darauf erreichte
	   2,43:1 und war kaum zu lesen; dieses tiefere Grau bringt sie auf 5,1:1.
	   Die Kachel dunkler zu machen war der kuerzere Weg als die Schrift
	   umzustellen - sie ist im Entwurf die dunkle der drei. */
	--verlauf-kachel-2:     linear-gradient(35deg, #6e6e6e, #525252);
	--verlauf-kachel-3:     linear-gradient(35deg, #d9d9d9, #b3b3b3);
	/* Auf der gruenen Kachel erreichte die uebliche Textfarbe #373e00 nur
	   3,37:1. Dieses sehr dunkle Oliv bringt sie auf 4,84:1. Den Verlauf
	   abzusenken haette nicht geholfen, im Gegenteil: er waere der Schrift
	   dabei naeher gekommen. */
	--farbe-kachel:         #1f2200;
	--farbe-kachel-2:       #fff;
	--farbe-kachel-3:       #262626;

	--bildfilter:           grayscale(.5);
}

/* --------------------------------------------------------------------------
   Dunkle Werte

   Die Flaechen sind neutrale Grautoene. Gruen bleibt der Seite als Akzent
   erhalten - in Ueberschriften, Verweisen, den schmalen Zierleisten und dem
   Fernwartungsknopf -, traegt aber keine grossen Flaechen mehr.

   Die Werte sind nicht frei gegriffen: jede Kombination aus Schrift und
   Grund erreicht mindestens 4,5:1 nach WCAG 2.1 AA (grosse Schrift 3:1), und
   benachbarte Flaechen unterscheiden sich um mindestens 1,2:1, damit Kanten
   als Kanten erkennbar bleiben.

   Derselbe Block steht zweimal: einmal fuer Geraete, die auf dunkel stehen
   und wo nichts anderes gewaehlt wurde, einmal fuer die ausdrueckliche Wahl.
   CSS kennt keinen Weg, eine Wertegruppe unter zwei Bedingungen zu stellen,
   ohne sie zu wiederholen. Wer hier etwas aendert, muss es an beiden Stellen
   tun.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="hell"]) {
		--flaeche:              #17191c;
		--flaeche-leiste:       #262a2f;
		--flaeche-nav:          #262a2f;
		--flaeche-untermenue:   #2e3338;
		--flaeche-untermenue-aktiv: #3a4047;
		--linie-untermenue:     rgba(255, 255, 255, .1);
		--farbe-untermenue:     #e3e5e8;
		--flaeche-karte:        #2e3338;
		--flaeche-fuss:         #262a2f;

		--farbe-nav:            #c9ced4;
		--farbe-ueberschrift:   var(--farbe-akzent);
		--farbe-ueberschrift-gross: #e3e5e8;
		--farbe-text:           #e3e5e8;
		--farbe-fuss:           #e3e5e8;
		--farbe-fuss-verweis:   var(--farbe-akzent);
		--farbe-linie:          rgba(255, 255, 255, .16);
		--farbe-linie-nav:      rgba(255, 255, 255, .14);

		--verlauf-kopfbild:     linear-gradient(20deg, #0c0e10, rgba(40, 46, 52, .55) 50%);
		--verlauf-band:         linear-gradient(35deg, #272c31, #1c2024);
		--verlauf-kachel:       linear-gradient(35deg, #353b41, #262b30);
		--verlauf-kachel-2:     linear-gradient(35deg, #424951, #2e343b);
		--verlauf-kachel-3:     linear-gradient(35deg, #4e565f, #373e45);
		--farbe-kachel:         #e3e5e8;
		--farbe-kachel-2:       #e3e5e8;
		--farbe-kachel-3:       #e3e5e8;

		--bildfilter:           grayscale(.5) brightness(.85);
	}
}

:root[data-theme="dunkel"] {
	color-scheme: dark;

	--flaeche:              #17191c;
	--flaeche-leiste:       #262a2f;
	--flaeche-nav:          #262a2f;
	--flaeche-untermenue:   #2e3338;
	--flaeche-untermenue-aktiv: #3a4047;
	--linie-untermenue:     rgba(255, 255, 255, .1);
	--farbe-untermenue:     #e3e5e8;
	--flaeche-karte:        #2e3338;
	--flaeche-fuss:         #262a2f;

	--farbe-nav:            #c9ced4;
	--farbe-ueberschrift:   var(--farbe-akzent);
	--farbe-ueberschrift-gross: #e3e5e8;
	--farbe-text:           #e3e5e8;
	--farbe-fuss:           #e3e5e8;
	--farbe-fuss-verweis:   var(--farbe-akzent);
	--farbe-linie:          rgba(255, 255, 255, .16);
	--farbe-linie-nav:      rgba(255, 255, 255, .14);

	--verlauf-kopfbild:     linear-gradient(20deg, #0c0e10, rgba(40, 46, 52, .55) 50%);
	--verlauf-band:         linear-gradient(35deg, #272c31, #1c2024);
	--verlauf-kachel:       linear-gradient(35deg, #353b41, #262b30);
	--verlauf-kachel-2:     linear-gradient(35deg, #424951, #2e343b);
	--verlauf-kachel-3:     linear-gradient(35deg, #4e565f, #373e45);
	--farbe-kachel:         #e3e5e8;
	--farbe-kachel-2:       #e3e5e8;
	--farbe-kachel-3:       #e3e5e8;

	--bildfilter:           grayscale(.5) brightness(.85);
}

/* Ausdruecklich hell gewaehlt: die Vorgabewerte ganz oben gelten ohnehin
   schon, nur der Browser muss noch erfahren, dass er seine eigenen
   Bedienelemente hell zeichnen soll. */
:root[data-theme="hell"] {
	color-scheme: light;
}

/* ==========================================================================
   Regeln, die diese Werte benutzen

   Sie stehen nur einmal da und gelten immer. Welche Farbe sie ziehen,
   entscheidet der Block oben.
   ========================================================================== */

body {
	background-color: var(--flaeche);
}

header .head {
	background-color: var(--flaeche-leiste);
}

header:before {
	background-image: var(--verlauf-kopfbild);
}

@media (min-width: 1200px) {
	.nav-main a {
		color: var(--farbe-nav);
	}
}

/* Der Untermenue-Kasten ist nach dem Vorbild des Mini-Menues gebaut:
   volle Zeilen, durch Linien getrennt, mit Schatten ueber der Seite. Vorher
   war es ein flaches Rechteck ohne Gliederung, in dem fuenf gleich
   aussehende Zeilen standen.

   Anders als das Mini-Menue traegt der Kasten ein tieferes Gruen. Dort steht
   weisse Schrift auf dem hellen Markengruen - gemessen 1,48:1 und damit
   kaum lesbar. Das war nicht zu uebernehmen. */
.nav-main .nav-sub {
	background-color: var(--flaeche-untermenue);
	min-width: 17em;
	left: 0;
	box-shadow: 0 .5em 1.2em rgba(0, 0, 0, .28);
}

/* Die Trennlinien geben dem Mini-Menue seine Gliederung - genau das fehlte
   dem Untermenue. Nicht vor dem ersten Eintrag, sonst doppelt sich die
   Linie mit der Oberkante des Kastens. */
.nav-main .nav-sub li + li {
	border-top: 1px solid var(--linie-untermenue);
}

.nav-main .nav-sub a {
	color: var(--farbe-untermenue);
	padding: .95em 1.2em;
	transition: background-color .15s ease;
}

/* Rueckmeldung beim Ueberfahren und bei Tastaturbedienung. Die gab es bisher
   gar nicht - man sah nicht, worauf man gerade zeigt. */
.nav-main .nav-sub a:hover,
.nav-main .nav-sub a:focus-visible {
	background-color: var(--flaeche-untermenue-aktiv);
}

/* Diese Abfrage muss NACH der allgemeinen Regel darueber stehen. Beide haben
   dieselbe Gewichtung, eine Abfrage erhoeht sie nicht - bei gleichem Gewicht
   gewinnt die spaetere. Stuende sie davor, bliebe sie wirkungslos. */
@media (max-width: 1199px) {
	/* Nur hier hat die Navigation eine eigene Flaeche: sie klappt als Kasten
	   ueber die Seite. Am Desktop sitzt sie ohne Hintergrund in der
	   Kopfleiste - eine unbedingte Regel malte dort einen gruenen Kasten. */
	.nav-main {
		background-color: var(--flaeche-nav);
	}

	.nav-main a,
	.nav-main .button {
		border-bottom-color: var(--farbe-linie-nav);
	}
}

.section h1,
.section h2 {
	color: var(--farbe-ueberschrift);
}

/* Die grossen Ueberschriften tragen keinen Farbverlauf mehr.

   Sie waren mit einem Verlauf gefuellt, der ueber background-clip auf den
   Text beschnitten wurde. Ein Verlauf heisst aber zwangslaeufig, dass ein
   Ende der Schrift schwach steht - gemessen bis hinunter auf 1,05:1 gegen
   das gruene Band. Dort verschwanden die Ueberschriften praktisch.

   Verschaerft wurde das dadurch, dass manche absichtlich ueber die Bandkante
   hinausragen und zur Haelfte auf Weiss liegen. Ein Verlauf kann auf zwei
   verschiedenen Untergruenden nicht gleichzeitig tragen; eine Volltonfarbe
   schon.

   background: none nimmt den Verlauf weg und setzt dabei auch den Beschnitt
   zurueck. -webkit-text-fill-color muss eigens zurueckgeholt werden, sonst
   bliebe die Schrift durchsichtig. */
.section h2.big,
.negative h2,
.negative h2.big {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--farbe-ueberschrift-gross);
}

.negative {
	background-image: var(--verlauf-band);
}

/* Die schraegen Uebergaenge zwischen den Baendern sind Ausschnitte der
   Seitenflaeche und muessen deren Farbe tragen - sonst stehen zwei helle
   Keile mitten in einer dunklen Seite. */
.negative:before,
.negative:after {
	background-color: var(--flaeche);
}

.box {
	background-image: var(--verlauf-kachel);
	color: var(--farbe-kachel);
}

/* Die Ueberschrift uebernimmt die Textfarbe ihrer Kachel. style.css setzt
   sie auf Weiss - auf der hellgruenen Kachel sind das 1,18:1 und auf der
   hellgrauen 1,41:1, beides unlesbar. */
.box h2 {
	color: inherit;
}

/* Der Farbwechsel wiederholt sich in jeder Reihe.

   Die Vorlage sprach die zweite und dritte Kachel an - damals gab es nur
   drei. Mit sechs Kacheln fiel ab der vierten alles auf das gruene
   Standardmuster zurueck: oben ein schoener Wechsel, unten drei gleiche.

   3n+2 und 3n+3 treffen jede zweite und dritte Kachel einer Dreierreihe,
   unabhaengig davon, wie viele es insgesamt sind. Eine siebte Leistung
   setzt den Rhythmus von selbst fort. */
.box:nth-child(3n+2) {
	background-image: var(--verlauf-kachel-2);
	color: var(--farbe-kachel-2);
}

.box:nth-child(3n+3) {
	background-image: var(--verlauf-kachel-3);
	color: var(--farbe-kachel-3);
}

footer {
	background-color: var(--flaeche-fuss);
	color: var(--farbe-fuss);
}

footer a {
	color: var(--farbe-fuss-verweis);
}

.stelle summary {
	background-color: var(--flaeche-karte);
	border-color: var(--farbe-linie);
}

/* Fotos in voller Helligkeit stechen aus einer dunklen Seite heraus wie
   Leuchtkaesten. Eine Spur abgedunkelt fuegen sie sich ein. */
.text-component img {
	filter: var(--bildfilter);
}

/* --------------------------------------------------------------------------
   Der Schalter in der Navigation
   -------------------------------------------------------------------------- */

.erscheinungsbild-schalter {
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	padding: .8em;
	line-height: 0;
}

.erscheinungsbild-schalter svg {
	width: 1.4em;
	height: 1.4em;
	vertical-align: middle;
	fill: currentColor;
}

/* Gezeigt wird immer das Zeichen fuer den Zustand, in den man wechseln
   wuerde: im hellen Zustand der Mond, im dunklen die Sonne. Die Umschaltung
   laeuft ueber CSS und stimmt damit schon, bevor ein Skript geladen ist. */
.erscheinungsbild-schalter .zeichen-sonne {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="hell"]) .erscheinungsbild-schalter .zeichen-mond {
		display: none;
	}

	:root:not([data-theme="hell"]) .erscheinungsbild-schalter .zeichen-sonne {
		display: inline;
	}
}

:root[data-theme="dunkel"] .erscheinungsbild-schalter .zeichen-mond {
	display: none;
}

:root[data-theme="dunkel"] .erscheinungsbild-schalter .zeichen-sonne {
	display: inline;
}

:root[data-theme="hell"] .erscheinungsbild-schalter .zeichen-mond {
	display: inline;
}

:root[data-theme="hell"] .erscheinungsbild-schalter .zeichen-sonne {
	display: none;
}