/* JH 03.10.2026: ## Format der Kommentare: Beschreibung | Quelle. Buehler = Buehler/Schlaich/Sinner (2017), HTML5 und CSS3, Springer Vieweg, Zahl = Seite im Buch; * = Seite nur aus dem Inhaltsverzeichnis ## */
/* JH 03.10.2026: ## Ursprung: KI-gestuetzt entwickelt (Uebergabe-Datei), Eigenanteil des Autors offen ## */
/* JH 03.10.2026: ## Kopfzeile: weißer Hintergrund, grüne Linie unten, Logo und Menü nebeneinander | Quelle: Bühler S. 58, 71 ## */
body > header {
  background: white;                 /* weißer Hintergrund. Quelle: Bühler S. 64 */
  border-bottom: 2px solid #00A86B;  /* grüne Linie unten. Quelle: Bühler S. 62 */
  padding: 1rem 2rem;                /* Innenabstand. Quelle: Bühler S. 62, 66 */
  display: flex;                     /* Logo links, Navigation rechts. Quelle: Bühler S. 71 */
  justify-content: space-between;    /* maximaler Abstand dazwischen. Quelle: Bühler S. 71 */
  align-items: center;               /* vertikal mittig. Quelle: Bühler S. 71 */
  position: sticky;                  /* bleibt beim Scrollen oben. Quelle: w3schools.com/howto/howto_css_sticky_header.asp */
  top: 0;                            /* klebt am oberen Rand. Quelle: Bühler S. 68 */
  z-index: 100;                      /* liegt über dem Inhalt. Quelle: Bühler S. 68 */
  box-sizing: border-box;            /* Padding zählt zur Höhe. Quelle: Bühler S. 66 */
  margin: 0;                         /* kein Außenabstand. Quelle: Bühler S. 62, 66 */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;  /* gleiche Schrift wie base.html. Quelle: Bühler S. 60-61 */
  line-height: 1.6;                  /* gleiche Zeilenhöhe. Quelle: Bühler S. 61 */
}
/* JH 03.10.2026: ## Logo-Link: Bild und Text nebeneinander, ohne Unterstreichung | Quelle: Bühler S. 71 ## */
body > header .logo-header { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }   /* Logo-Link. Quelle: Bühler S. 71 */
body > header .logo-header img { height: 48px; width: auto; object-fit: contain; display: block; }        /* Logo überall 48 px hoch. Quelle: keine in den erlaubten Quellen (Bilder) */
.user-badge { font-size: 0.9rem; color: #6C757D; font-weight: 600; }        /* Name des Nutzers. Quelle: Bühler S. 60-61 */
@media print { body > header { display: none; } }             /* Beim Drucken keinen Header. Quelle: Bühler S. 76-78 */

/* JH 07.10.2026: vgl. https://www.w3schools.com/css/css3_flexbox.asp - Startseite-Navigation, auf allen Bildschirmgrößen sichtbar (kein display:none im Handy-Bereich) */
.nav-startseite { display: flex; align-items: center; }
/* JH 08.10.2026: vgl. https://www.w3schools.com/css/css3_flexbox_container.asp - mehrere Links mit Abstand; bei schmalem Bildschirm Umbruch statt Überlaufen */
.nav-startseite { flex-wrap: wrap; gap: 1rem; }
/* JH 08.10.2026: vgl. https://www.w3schools.com/css/css_link.asp - Menü-Links dunkelblau ohne Unterstreichung, Hover grün */
.nav-startseite a { color: #2C3E50; text-decoration: none; font-size: 0.9rem; }
.nav-startseite a:hover { color: #00A86B; }