/* =================================================================
   KOPFZEILE (07.09.2026)
   -----------------------------------------------------------------
   Startseite und Funktionsseiten teilen sich dieselbe Kopfzeile:
   gleiches Markup, gleiche Klassen. Diese Datei enthält nur, was
   Tailwind nicht abdeckt — und den Platz am Handy, wo Wortmarke,
   Hell/Dunkel-Schalter und Menü-Knopf sonst übereinander liegen.
   ================================================================= */

.header { transition: background-color .4s ease; }
.header.scrolled {
    background: rgba(5, 5, 7, .9);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* Handy: die 36-px-Wortmarke passt neben Schalter und Menü-Knopf nicht mehr. */
@media (max-width: 560px) {
    #main-header .font-heading { font-size: 26px; letter-spacing: -.045em; }
    #main-header a.group { gap: 10px; }
    #main-header a.group svg { width: 40px; height: 40px; }
}
@media (max-width: 400px) {
    #main-header .font-heading { font-size: 23px; }
    #main-header a.group svg { width: 36px; height: 36px; }
    #main-header .md\:hidden.flex.items-center.gap-3 { gap: 6px; }
}