/* Anfang: Goerdes-Design: heller Header mit dekorativem Hintergrundbild

   Zweck:
   Diese Datei gestaltet den oberen Seitenbereich der Website.

   Der Header soll freundlich, hell, ruhig und einladend wirken.
   Er soll nicht düster oder schwer erscheinen.

   Das Headerbild ist rein dekorativ.
   Es soll Atmosphäre geben, aber keine wichtigen Informationen enthalten.

   Barrierefreiheit:
   Wichtige Inhalte dürfen nicht nur im Bild stehen.
   Der Website-Titel, die Website-Beschreibung und die Navigation bleiben echte Textelemente.

   Technischer Aufbau:
   Das Hintergrundbild liegt auf .site-header.
   Darüber liegt eine halbtransparente weiße Farbschicht.
   Diese Schicht wird über linear-gradient() erzeugt.

   Warum eine helle Überlagerung?
   Das Bild kann unruhige Stellen, Farbverläufe oder helle und dunkle Bereiche enthalten.
   Die halbtransparente weiße Schicht beruhigt das Bild.
   Dadurch wirkt der Header heller und freundlicher.
   Gleichzeitig bleibt Text besser lesbar.

   Wichtig zur Navigation:
   Die Hauptnavigation liegt nicht unter dem Bild.
   Sie liegt auch nicht hinter dem Bild.

   Die Reihenfolge ist optisch so:
   1. Ganz hinten liegt die Header-Grundfarbe.
   2. Darüber liegt das dekorative Headerbild.
   3. Darüber liegt die helle halbtransparente Überlagerung.
   4. Davor liegen Website-Titel, Website-Beschreibung und Navigation.

   Die Navigation bekommt zusätzlich eine eigene helle Fläche.
   Dadurch liegen die Menülinks nicht direkt auf dem Bild.
   Das verbessert die Lesbarkeit und macht die Navigation ruhiger.

   Farbsteuerung:
   Die Farben kommen aus:
   /wp-content/themes/goerdes-design/assets/css/colors.css

   Dort sind die Farbrollen mit HEX-Werten und Farbbeschreibungen dokumentiert.

   Bildpfad:
   Die Datei header-hintergrund.jpg muss hier liegen:
   /wp-content/themes/goerdes-design/assets/images/header-hintergrund.jpg

   Wichtig zum relativen Pfad:
   Diese CSS-Datei liegt hier:
   /wp-content/themes/goerdes-design/assets/css/header.css

   Deshalb muss der Bildpfad in dieser Datei so lauten:
   ../images/header-hintergrund.jpg

   Ende der allgemeinen Erklärung.
*/


/* Anfang: Heller Header mit dekorativem Hintergrundbild

   .site-header ist der obere sichtbare Seitenbereich.

   background-color:
   Nutzt ein sehr helles, freundliches Blaugrau.
   Diese Farbe ist sichtbar, falls das Bild nicht geladen wird.

   background-image:
   Besteht aus zwei Ebenen.

   Erste Ebene:
   Ein linear-gradient mit halbtransparentem Weiß.
   Diese Ebene liegt über dem Bild und hellt es auf.

   Zweite Ebene:
   Das eigentliche dekorative Headerbild.

   background-position:
   Das Bild wird mittig ausgerichtet.

   background-size:
   cover sorgt dafür, dass das Bild den Headerbereich vollständig füllt.

   color:
   Der normale Headertext wird dunkel gesetzt, weil der Header jetzt hell ist.
*/

.site-header {
	background-color: var(--goerdes-color-header-background);
	background-image:
		linear-gradient(
			var(--goerdes-color-header-overlay),
			var(--goerdes-color-header-overlay)
		),
		url("../images/header-hintergrund.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--goerdes-color-header-text);
	padding-top: 2rem;
	padding-bottom: 2rem;
}

/* Ende: Heller Header mit dekorativem Hintergrundbild */


/* Anfang: Website-Titel im Header

   Der Website-Titel muss auf dem helleren Header dunkel dargestellt werden.
   Weiß wäre hier falsch, weil es auf hellen Bildstellen oder auf der hellen Überlagerung zu wenig Kontrast hätte.

   Verwendete Farbe:
   --goerdes-color-header-text
   Das ist fast schwarzes, sehr dunkles Blaugrau.
*/

.site-header .site-title,
.site-header .site-title a {
	color: var(--goerdes-color-header-text);
}

/* Ende: Website-Titel im Header */


/* Anfang: Website-Beschreibung im Header

   Die Website-Beschreibung darf etwas zurückhaltender wirken als der Titel.
   Sie bleibt aber dunkel genug, damit sie auf dem hellen Header lesbar ist.

   Verwendete Farbe:
   --goerdes-color-header-text-muted
   Das ist dunkles Schiefergrau.
*/

.site-header .site-description {
	color: var(--goerdes-color-header-text-muted);
}

/* Ende: Website-Beschreibung im Header */


/* Anfang: Hauptnavigation vom Headerbild absetzen

   Die Navigation bekommt eine eigene helle Fläche.
   Dadurch hängen die Menülinks optisch nicht vom Hintergrundbild ab.

   Das ist wichtig, weil ein Bild immer ungleichmäßig sein kann.
   Es kann helle, dunkle oder unruhige Stellen enthalten.
   Menülinks direkt auf einem solchen Bild wären schlechter lesbar.

   Hintergrund der Navigation:
Hintergrund der Navigation:
--goerdes-color-header-navigation-background
Diese Farbe entspricht derzeit der Header-Grundfarbe.
Aktuell ist das sehr helles, freundliches Blaugrau: #EAF3F8.
Dadurch wirken Header und Navigation optisch ruhiger und stärker zusammengehörig.

   Linkfarbe:
   --goerdes-color-header-navigation-link
   Das ist kräftiges, dunkles Blau.

   Rahmen:
   --goerdes-color-header-border
   Das ist helles Blaugrau.

Ergebnis:
Die Navigation wirkt hell, freundlich und klar.
Da sie dieselbe Grundfarbe wie der Header verwendet,
erscheint der obere Seitenbereich ruhiger und weniger in getrennte Blöcke aufgeteilt.
*/

.primary-navigation {
	background-color: var(--goerdes-color-header-navigation-background);
	border-top: 1px solid var(--goerdes-color-header-border);
	border-bottom: 1px solid var(--goerdes-color-header-border);
	color: var(--goerdes-color-header-navigation-link);
}

/* Ende: Hauptnavigation vom Headerbild absetzen */


/* Anfang: Normale Menülinks

   Die Menülinks verwenden kräftiges, dunkles Blau.
   Das passt zur allgemeinen Farbrolle des Themes:
   Blau bedeutet Orientierung, Navigation und Link.

   text-decoration-thickness:
   Macht die Unterstreichung etwas klarer.

   text-underline-offset:
   Setzt die Unterstreichung etwas vom Text ab.
   Dadurch ist sie besser erkennbar und wirkt ruhiger.
*/

.primary-navigation a,
.primary-navigation .primary-menu-container > ul > .menu-item > a {
	color: var(--goerdes-color-header-navigation-link);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

/* Ende: Normale Menülinks */


/* Anfang: Hover-Zustand für sehende Mausnutzer

   Hover bedeutet:
   Ein sehender Nutzer fährt mit der Maus über einen Menülink.

   Die Farbe wechselt zu kräftigem Rostorange.
   Das ist ein warmer Akzent und macht die Bedienreaktion sichtbar.

   Wichtig:
   Orange wird hier nicht als große Fläche verwendet.
   Es bleibt ein gezielter Hinweis- und Bedienakzent.
*/

.primary-navigation a:hover,
.primary-navigation .primary-menu-container > ul > .menu-item > a:hover {
	color: var(--goerdes-color-header-navigation-link-hover);
	text-decoration: underline;
}

/* Ende: Hover-Zustand für sehende Mausnutzer */


/* Anfang: Sichtbarer Tastaturfokus

   Dieser Abschnitt ist besonders wichtig für Barrierefreiheit.

   Wenn ein Nutzer mit der Tabulatortaste durch das Menü geht,
   muss jederzeit klar sichtbar sein, welcher Link oder Button gerade aktiv ist.

   outline:
   Der Fokusrahmen ist kräftiges Rostorange.

   outline-offset:
   Der Fokusrahmen sitzt mit etwas Abstand um das Element.
   Dadurch wird er nicht vom Text oder vom Link selbst verschluckt.

   background-color:
   Der Fokus bekommt einen sehr hellen cremeorangefarbenen Hintergrund.

   color:
   Der Text wird auf die normale dunkle Textfarbe gesetzt.
   So bleibt der fokussierte Menüpunkt gut lesbar.
*/

.primary-navigation a:focus,
.primary-navigation a:focus-visible,
.primary-navigation button:focus,
.primary-navigation button:focus-visible {
	outline: 3px solid var(--goerdes-color-focus);
	outline-offset: 4px;
	background-color: var(--goerdes-color-focus-background);
	color: var(--goerdes-color-text);
}

/* Ende: Sichtbarer Tastaturfokus */


/* Ende: Goerdes-Design: heller Header mit dekorativem Hintergrundbild */