/*
Theme Name:   GeneratePress Child – Schalk IP Consulting
Theme URI:    https://schalk-ip.de
Description:  Child-Theme für schalk-ip.de. Enthält die selbst gehostete
              Schrift Roboto (kein Google-Fonts-Aufruf, DSGVO) sowie das
              Farbsystem aus Navy #001255 und Sand #EFE9DF.
Author:       Schalk IP Consulting
Template:     generatepress
Version:      1.0.0
Text Domain:  generatepress-child
*/

/* ==========================================================================
   1. Schrift – Roboto, selbst gehostet
   --------------------------------------------------------------------------
   Variable Schrift, Achse wght 300–700. Deckt die tatsächlich verwendeten
   Schnitte 300/400/500/600/700 in einer Datei ab. Es wird KEINE Verbindung
   zu fonts.googleapis.com oder fonts.gstatic.com aufgebaut; die Dateien
   liegen unter /wp-content/themes/generatepress-child/fonts/.
   Roboto steht unter der Apache License 2.0 (siehe fonts/LICENSE.txt).
   ========================================================================== */

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('fonts/roboto-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('fonts/roboto-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url('fonts/roboto-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url('fonts/roboto-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Schriftzuweisung
   --------------------------------------------------------------------------
   Hinweis: Vor dem Umbau lud die Seite zwölf Roboto-Schnitte von Google,
   ohne die Schrift jemals zuzuweisen – gerendert wurde in der Systemschrift.
   Hier wird Roboto erstmals wirklich verwendet.
   Buttons, Felder und Überschriften erben die Schrift nicht automatisch und
   werden deshalb ausdrücklich genannt.
   ========================================================================== */

:root {
	--font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

body,
button,
input,
select,
optgroup,
textarea,
h1, h2, h3, h4, h5, h6,
.main-navigation a,
.site-title,
.site-description,
.entry-title,
.wp-block-button__link {
	font-family: var(--font-sans);
}

/* ==========================================================================
   3. Farbsystem – abgeleitet aus Navy #001255 und Sand #EFE9DF
   --------------------------------------------------------------------------
   Alle Zwischentöne sind Mischungen der beiden Markenfarben. Einzige
   Ausnahme: --sand-50 ist Sand mit Weiß aufgehellt, damit sich Karten vom
   Seitengrund abheben – der Farbton bleibt dabei erhalten.
   Kontrastwerte nach WCAG 2.1 in Klammern, gemessen gegen --c-bg (#EFE9DF).
   ========================================================================== */

:root {
	/* --- Navy-Rampe: #001255 zunehmend mit Sand gemischt --- */
	--navy-900: #001255;   /* Marke                       14.28:1 */
	--navy-700: #303D71;   /* + 20 % Sand                  8.56:1 */
	--navy-600: #434E7C;   /* + 28 % Sand                  6.64:1 */
	--navy-500: #565F87;   /* + 36 % Sand                  5.14:1 */
	--navy-450: #6C7393;   /* + 45 % Sand                  3.86:1 */
	--navy-300: #A3A4B3;   /* + 68 % Sand                          */
	--navy-200: #BFBEC3;   /* + 80 % Sand                          */

	/* --- Sand-Rampe: #EFE9DF zunehmend mit Navy gemischt --- */
	--sand-50:  #F7F4EF;   /* Sand + 50 % Weiß                     */
	--sand-100: #EFE9DF;   /* Marke                                */
	--sand-200: #E5E0D9;   /* +  4 % Navy                          */
	--sand-400: #CECBCC;   /* + 14 % Navy                          */

	/* --- Rollen --- */
	--c-bg:             var(--sand-100);  /* Seitenhintergrund          */
	--c-surface:        var(--sand-50);   /* Flächen, Karten            */
	--c-surface-muted:  var(--sand-200);  /* gedämpfte Flächen          */
	--c-border:         var(--sand-400);  /* Rahmen, dekorativ          */
	--c-border-card:    #A7A8B6;          /* Kartenkontur (Sand+30% Navy)
	                                         Die Sand-Toene liegen in der
	                                         Helligkeit eng beieinander; Karten
	                                         werden deshalb ueber die Kontur
	                                         getrennt, nicht ueber die Flaeche.
	                                         2.15:1 gegen die Artikelflaeche. */
	--c-shadow:         rgba(0, 18, 85, 0.12); /* Schatten in Navy statt Schwarz */
	--c-border-strong:  var(--navy-450);  /* Rahmen funktional  3.86:1  */
	--c-text:           var(--navy-900);  /* Text primär       14.28:1  */
	--c-text-muted:     var(--navy-600);  /* Text sekundär      6.64:1  */
	--c-link:           var(--navy-700);  /* Links              8.56:1  */
	--c-link-hover:     var(--navy-900);  /* Hover             14.28:1  */
	--c-focus:          var(--navy-900);  /* Fokusring         14.28:1  */
	--c-focus-on-dark:  var(--sand-100);  /* Fokusring auf Navy 14.28:1 */
	--c-footer-bg:      var(--navy-900);  /* Fußzeile Grund             */
	--c-footer-text:    var(--sand-100);  /* Fußzeile Text     14.28:1  */
	--c-footer-muted:   var(--navy-200);  /* Fußzeile sekundär  9.34:1  */
	--c-signal:         #77E366;          /* Gütesiegel        10.65:1  */
	/* Die Fußzeile ist in beiden Darstellungen dunkel – hell auf Navy,
	   dunkel auf Schwarz. Sie braucht deshalb einen eigenen Akzent und
	   nicht den der Seite: #1560C1 käme auf dem Navy-Grund nur auf 2.85:1.
	   Dieser Wert gilt für beide und wird unten nicht überschrieben. */
	--c-footer-akzent:  #74AFFB;          /* auf Navy 7.61:1, auf Schwarz 8.32:1 */
	--c-akzent:         #1560C1;          /* Menü aktiv/Hover   5.51:1
	                                         Untermenü 4.60:1, und 2.85:1
	                                         gegen den Navy-Fließtext, damit
	                                         sich der Akzent davon absetzt. */

	/* --- GeneratePress-Variablen auf das Farbsystem umbiegen ---
	   Dadurch übernimmt das gesamte Theme die Markenfarben, ohne dass
	   Theme-Dateien angefasst werden müssen. --- */
	--contrast:         var(--c-text);
	--contrast-2:       var(--c-text-muted);
	--contrast-3:       var(--c-border-strong);
	--base:             var(--c-surface-muted);
	--base-2:           var(--c-bg);
	--base-3:           var(--c-surface);
	--accent:           var(--c-akzent);
	--global-color-8:   var(--c-link);
	--global-color-9:   var(--c-surface);
	--global-color-10:  var(--c-link);
}

/* ==========================================================================
   4. Rollen anwenden
   ========================================================================== */

a {
	color: var(--c-link);
}

/* Ueberall dieselbe Reaktion: Was unter dem Zeiger liegt, wird blau.
   Das gilt fuer Fliesstextlinks genauso wie fuer das Menue und die
   Schaltflaechen, damit die Seite eine einzige Hover-Sprache spricht.
   Fusszeile und Menue bringen ihre eigenen Regeln mit und gehen vor. */
a:hover,
a:focus,
a:active {
	color: var(--c-akzent);
}

/* Im Seiteninhalt setzen GeneratePress und die Inhalts-Stylesheets eigene
   Linkfarben, die spaeter im Dokument stehen. Deshalb hier eine Stufe
   spezifischer, damit der Akzent auch dort greift. */
.entry-content a:hover,
.entry-content a:focus,
.entry-content a:active,
.schalk-wrapper a:hover,
.schalk-wrapper a:focus,
.schalk-wrapper a:active,
.legal-wrapper a:hover,
.legal-wrapper a:focus,
.legal-wrapper a:active {
	color: var(--c-akzent);
}

/* Sichtbarer Fokusring für Tastaturbedienung – GeneratePress bringt keinen mit. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Auf dunklem Grund muss der Ring hell sein, sonst verschwindet er. */
.site-footer a:focus-visible,
.footer-bar a:focus-visible,
.site-info a:focus-visible {
	outline-color: var(--c-focus-on-dark);
}

/* Formularfelder brauchen einen Rahmen mit mindestens 3:1. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	border-color: var(--c-border-strong);
}

/* Fußzeile auf Navy. */
.site-footer,
.footer-bar,
.site-info {
	background-color: var(--c-footer-bg);
	color: var(--c-footer-text);
}

.site-footer a,
.footer-bar a,
.site-info a {
	color: var(--c-footer-text);
}

.site-footer a:hover,
.site-footer a:focus,
.footer-bar a:hover,
.footer-bar a:focus,
.site-info a:hover,
.site-info a:focus {
	color: var(--c-footer-akzent);
}

/* Das Gütesiegel ist ein Link. Der Zusatztext nimmt den Akzent mit auf,
   das grüne „A+“ bleibt stehen – es ist eine Aussage über die Bewertung,
   keine Schaltfläche. */
.schalk-fuss-siegel:hover .schalk-fuss-siegeltext,
.schalk-fuss-siegel:focus-visible .schalk-fuss-siegeltext {
	color: var(--c-footer-akzent);
}

/* ==========================================================================
   5. Schrift auch im Seiteninhalt durchsetzen
   --------------------------------------------------------------------------
   Die <style>-Blöcke in den Seiteninhalten setzen für .schalk-wrapper eine
   eigene Schriftliste, in der Roboto erst an vierter Stelle steht – der
   Fließtext erschiene sonst weiterhin in der Systemschrift. Diese Regel
   korrigiert das zentral, ohne den gespeicherten Seiteninhalt zu ändern.
   ========================================================================== */

body .schalk-wrapper,
body .legal-wrapper,
.schalk-wrapper h1,
.schalk-wrapper h2,
.schalk-wrapper h3,
.schalk-wrapper h4,
.schalk-wrapper p,
.schalk-wrapper li,
.schalk-wrapper a,
.legal-wrapper h1,
.legal-wrapper h2,
.legal-wrapper h3,
.legal-wrapper h4,
.legal-wrapper p,
.legal-wrapper li,
.legal-wrapper a,
.schalk-btn {
	font-family: var(--font-sans);
}

/* ==========================================================================
   6. Kopfzeile: Wortmarke allein
   --------------------------------------------------------------------------
   Die Wortmarke enthält "SCHALK" und "IP CONSULTING" bereits als Schrift.
   Titel und Slogan daneben sind deshalb abgeschaltet (GeneratePress-Option
   hide_title / hide_tagline), sonst stünde derselbe Text doppelt im Kopf.
   Seitenverhältnis 108.7 : 20.7 – auf schmalen Bildschirmen wird die Marke
   kleiner, damit sie neben dem Menüknopf Platz hat.
   ========================================================================== */

.site-logo .header-image,
.navigation-branding .header-image {
	height: 34px;
	width: auto;
	max-width: 100%;
	display: block;
}

@media (max-width: 768px) {
	.site-logo .header-image,
	.navigation-branding .header-image {
		height: 28px;
	}
}

@media (max-width: 420px) {
	.site-logo .header-image,
	.navigation-branding .header-image {
		height: 24px;
	}
}

/* ==========================================================================
   7. Dunkle Darstellung
   --------------------------------------------------------------------------
   Grundlage sind die Negativ-Vorlagen der Marke: dort steht die Wortmarke in
   reinem Weiss (#fff) auf dunklem Grund. Die Flaechen sind deshalb neutral
   schwarz bis grau gehalten und nicht navy – Navy bleibt der hellen
   Darstellung vorbehalten, wo es die Marke traegt.

   Die Wortmarke liegt inline als SVG im Markup und faerbt sich ueber
   currentColor mit. Bei --c-text: #FFFFFF ist das Ergebnis Pixel fuer Pixel
   die Datei MS-Logo_ms-schalkip_neg_rgb.svg – dieselbe Zeichnung, nur ohne
   zweite Datei im Kopf.

   Drei Zustaende: Ohne Attribut entscheidet die Einstellung des Betriebs-
   systems; data-theme="dark" bzw. "light" ueberschreibt sie, wenn der
   Besucher den Schalter benutzt hat.

   Alle Werte sind gegen den Seitengrund gerechnet, Angaben in Klammern.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		/* --- Neutrale Rampe: Schwarz zu Weiss, Unterton minimal ins Navy --- */
		--k-980: #0A0A0C;   /* Seitengrund                          */
		--k-940: #111114;   /* Karten, Fusszeile                    */
		--k-800: #232329;   /* gedaempfte Flaechen                  */
		--k-700: #2F2F37;   /* Rahmen, dekorativ                    */
		--k-600: #3E3E48;   /* Kartenkontur       1.78:1 auf Karte  */
		--k-400: #71717D;   /* Rahmen funktional  4.11:1            */
		--k-200: #C4C4CD;   /* Text sekundaer    11.42:1            */
		--k-100: #E6E6EB;   /* Links             15.90:1            */
		--k-000: #FFFFFF;   /* Text primaer      19.78:1            */

		/* Der gespeicherte Seiteninhalt verweist an einigen Stellen direkt auf
		   --navy-900 und --navy-700 (Button-Flaeche, Akzentbalken). Bliebe Navy
		   dort Navy, waeren diese Flaechen auf dunklem Grund unsichtbar. In der
		   Umkehrung uebernehmen Weiss und Hellgrau ihre Rolle. */
		--navy-900: var(--k-100);
		--navy-700: var(--k-200);

		--c-bg:             var(--k-980);
		--c-surface:        var(--k-940);
		--c-surface-muted:  var(--k-800);
		--c-border:         var(--k-700);
		--c-border-card:    var(--k-600);
		--c-border-strong:  var(--k-400);
		--c-text:           var(--k-000);
		--c-text-muted:     var(--k-200);
		--c-link:           var(--k-100);
		--c-link-hover:     var(--k-000);
		--c-focus:          var(--k-000);
		--c-focus-on-dark:  var(--k-000);
		--c-footer-bg:      var(--k-940);
		--c-footer-text:    var(--k-000);
		--c-footer-muted:   var(--k-200);
		--c-signal:         #77E366;   /* Guetesiegel 11.64:1 */
		--c-akzent:         #74AFFB;   /* Menue aktiv/Hover 8.32:1 */
		--c-shadow:         rgba(0, 0, 0, 0.55);

		--contrast:         var(--c-text);
		--contrast-2:       var(--c-text-muted);
		--contrast-3:       var(--c-border-strong);
		--base:             var(--c-surface-muted);
		--base-2:           var(--c-bg);
		--base-3:           var(--c-surface);
		--accent:           var(--c-akzent);
		--global-color-8:   var(--c-link);
		--global-color-9:   var(--c-surface);
		--global-color-10:  var(--c-link);
	}
}

:root[data-theme="dark"] {
	/* --- Neutrale Rampe: Schwarz zu Weiss, Unterton minimal ins Navy --- */
	--k-980: #0A0A0C;   /* Seitengrund                          */
	--k-940: #111114;   /* Karten, Fusszeile                    */
	--k-800: #232329;   /* gedaempfte Flaechen                  */
	--k-700: #2F2F37;   /* Rahmen, dekorativ                    */
	--k-600: #3E3E48;   /* Kartenkontur       1.78:1 auf Karte  */
	--k-400: #71717D;   /* Rahmen funktional  4.11:1            */
	--k-200: #C4C4CD;   /* Text sekundaer    11.42:1            */
	--k-100: #E6E6EB;   /* Links             15.90:1            */
	--k-000: #FFFFFF;   /* Text primaer      19.78:1            */

	/* Der gespeicherte Seiteninhalt verweist an einigen Stellen direkt auf
	   --navy-900 und --navy-700 (Button-Flaeche, Akzentbalken). Bliebe Navy
	   dort Navy, waeren diese Flaechen auf dunklem Grund unsichtbar. In der
	   Umkehrung uebernehmen zwei helle Grautoene ihre Rolle – bewusst nicht
	   reines Weiss: eine grosse weisse Schaltflaeche blendet auf schwarzem
	   Grund. Die Wortmarke bleibt davon unberuehrt, sie haengt an --c-text. */
	--navy-900: var(--k-100);
	--navy-700: var(--k-200);

	--c-bg:             var(--k-980);
	--c-surface:        var(--k-940);
	--c-surface-muted:  var(--k-800);
	--c-border:         var(--k-700);
	--c-border-card:    var(--k-600);
	--c-border-strong:  var(--k-400);
	--c-text:           var(--k-000);
	--c-text-muted:     var(--k-200);
	--c-link:           var(--k-100);
	--c-link-hover:     var(--k-000);
	--c-focus:          var(--k-000);
	--c-focus-on-dark:  var(--k-000);
	--c-footer-bg:      var(--k-940);
	--c-footer-text:    var(--k-000);
	--c-footer-muted:   var(--k-200);
	--c-signal:         #77E366;   /* Guetesiegel 11.64:1 */
	--c-akzent:         #74AFFB;   /* Menue aktiv/Hover 8.32:1 */
	--c-shadow:         rgba(0, 0, 0, 0.55);

	--contrast:         var(--c-text);
	--contrast-2:       var(--c-text-muted);
	--contrast-3:       var(--c-border-strong);
	--base:             var(--c-surface-muted);
	--base-2:           var(--c-bg);
	--base-3:           var(--c-surface);
	--accent:           var(--c-akzent);
	--global-color-8:   var(--c-link);
	--global-color-9:   var(--c-surface);
	--global-color-10:  var(--c-link);
}

/* Das Logo liegt inline im Markup und färbt sich über currentColor mit.
   Als Vektor bleibt es in jeder Größe scharf – es wird nichts skaliert,
   was vorher als Pixelbild vorlag. */
.site-logo-svg {
	height: 34px;
	width: auto;
	max-width: 100%;
	display: block;
	color: var(--c-text);
	/* Halbe Pixel an den Kanten vermeidet der Browser selbst, solange die
	   Höhe ganzzahlig bleibt. Deshalb glatte Werte statt em-Angaben. */
	shape-rendering: geometricPrecision;
}

@media (max-width: 768px) { .site-logo-svg { height: 28px; } }
@media (max-width: 420px) { .site-logo-svg { height: 24px; } }

/* ---- Schalter für die Darstellung ---- */

.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--c-border-card);
	border-radius: 3px;
	color: var(--c-text);
	cursor: pointer;
	line-height: 0;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
	background: var(--c-surface-muted);
	color: var(--c-text);
}

.theme-toggle svg { width: 19px; height: 19px; fill: currentColor; }
.theme-toggle .icon-dunkel { display: block; }
.theme-toggle .icon-hell   { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle .icon-dunkel { display: none; }
	:root:not([data-theme="light"]) .theme-toggle .icon-hell   { display: block; }
}

:root[data-theme="dark"] .theme-toggle .icon-dunkel { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-hell   { display: block; }

.menu-bar-items .theme-toggle { margin-left: 12px; }

/* ---- Profilbild ----
   Der eingebrannte weisse Rahmen des Originals ist weggeschnitten, ein
   CSS-Rand braucht es deshalb nicht mehr.

   Die Abdunklung nach aussen steckt NICHT mehr in der Bilddatei. Ein
   Vergleich auf beiden Seitengruenden hat gezeigt: auf dem hellen Sand
   wirken die abgedunkelten Ecken wie ein aufgesetzter Effekt und passen
   nicht zum warmen Grund; auf Schwarz dagegen ist die Abdunklung noetig,
   sonst steht das Foto als heller Block in der Seite. Eine Datei kann
   beides nicht leisten. Also liegt die Abdunklung als Verlauf ueber dem
   Bild und wird nur in der dunklen Darstellung eingeblendet – damit folgt
   sie auch dem Schalter, was mit zwei Bilddateien nicht ginge. */

.schalk-portrait {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.schalk-portrait::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;      /* wie das Bild selbst */
	pointer-events: none;
	opacity: 0;
	transition: opacity 200ms ease-out;
	background: radial-gradient(
		ellipse 62% 58% at 50% 40%,
		rgba(10, 10, 12, 0) 55%,
		rgba(10, 10, 12, 0.42) 80%,
		rgba(10, 10, 12, 0.62) 100%
	);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .schalk-portrait::after { opacity: 1; }
}

:root[data-theme="dark"] .schalk-portrait::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.schalk-portrait::after { transition: none; }
}

/* Die Fußzeile liegt in der dunklen Darstellung eine Stufe über dem
   Seitengrund. Eine Linie trennt sie zusätzlich, damit die Kante auch dort
   sichtbar bleibt, wo beide Flächen dicht beieinanderliegen. */
.site-footer,
.footer-bar,
.site-info {
	border-top: 1px solid transparent;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .site-info,
	:root:not([data-theme="light"]) .footer-bar {
		border-top-color: var(--c-border);
	}
}

:root[data-theme="dark"] .site-info,
:root[data-theme="dark"] .footer-bar {
	border-top-color: var(--c-border);
}

/* ==========================================================================
   8. Menü: Hover und aktueller Punkt
   --------------------------------------------------------------------------
   Akzentfarbe ist ein Blau im selben Farbton wie die Marke (214°), nur
   heller und gesättigter. Ein einziger Wert für beide Darstellungen geht
   nicht: Ein Hellblau, das auf Schwarz sitzt, kommt auf dem Sandgrund der
   hellen Fassung nur auf 2.07:1 und wäre selbst als Balken zu schwach.
   Deshalb derselbe Farbton in zwei Helligkeiten – hell #1B58A7, dunkel
   #74AFFB. Beide liegen über 4.5:1 auf Leiste und Untermenü.

   Die Farbe steht nie allein: Der aktuelle Punkt und der Punkt unter dem
   Zeiger bekommen zusätzlich einen Balken. Farbe allein wäre für
   Farbfehlsichtige keine verlässliche Kennzeichnung.
   ========================================================================== */

.main-navigation .main-nav ul li > a {
	position: relative;
}

/* Der Balken sitzt unter dem Beschriftungstext, nicht am Rand der Leiste. */
@media (min-width: 769px) {
	.main-navigation .main-nav ul li > a::after {
		content: "";
		position: absolute;
		left: 20px;
		right: 20px;
		bottom: 10px;
		height: 2px;
		background-color: var(--c-akzent);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 180ms ease-out;
	}

	.main-navigation .main-nav ul li:hover > a::after,
	.main-navigation .main-nav ul li:focus-within > a::after,
	.main-navigation .main-nav ul li[class*="current-menu-"] > a::after,
	.main-navigation .main-nav ul li.schalk-aktuell > a::after {
		transform: scaleX(1);
	}

	/* Untermenüs sind schmaler und haben weniger Innenabstand. */
	.main-navigation .main-nav ul ul li > a::after {
		left: 14px;
		right: 14px;
		bottom: 6px;
	}
}

/* Im aufgeklappten Menü am Handy ist kein Platz für einen Balken unter dem
   Text – dort steht die Marke links neben dem Eintrag. */
@media (max-width: 768px) {
	.main-navigation .main-nav ul li > a {
		border-left: 3px solid transparent;
	}

	.main-navigation .main-nav ul li:hover > a,
	.main-navigation .main-nav ul li:focus-within > a,
	.main-navigation .main-nav ul li[class*="current-menu-"] > a,
	.main-navigation .main-nav ul li.schalk-aktuell > a {
		border-left-color: var(--c-akzent);
	}
}

/* Der aktuelle Punkt bleibt auch ohne Zeiger erkennbar. */
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li.schalk-aktuell > a {
	color: var(--c-akzent);
	font-weight: 500;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus-within > a {
	color: var(--c-akzent);
}

/* Der Schalter für die Darstellung steht in derselben Leiste und folgt ihr. */
.theme-toggle:hover,
.theme-toggle:focus-visible {
	border-color: var(--c-akzent);
	color: var(--c-akzent);
}

/* Wer Bewegung abbestellt hat, bekommt den Balken ohne Auffahren. */
@media (prefers-reduced-motion: reduce) {
	.main-navigation .main-nav ul li > a::after {
		transition: none;
	}
}