/* ============================================================
   Kopf + Fuß aller Seiten (Vorlage: build/partials/)
   ============================================================ */
:root { --k-ink: #111827; }
html.dark { --k-ink: #f0f1f3; }

/* ---- Kopf ---- */
.kopf-marke {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    text-decoration: none !important;
    color: var(--k-ink);
}
.kopf-marke__logo {
    flex: none;
    display: block;
    background: #fff;
    border-radius: 0.5rem;
    padding: 2px 4px;
}
.kopf-marke__logo img { display: block; height: 48px; width: auto; }
.kopf-marke__name {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.1;
    color: var(--k-ink);
}
@media (max-width: 420px) {
    .kopf-marke { gap: 0.5rem; }
    .kopf-marke__logo img { height: 40px; }
    .kopf-marke__name { font-size: 1.0625rem; max-width: 6.5em; }
}
.kopf-menue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 0.75rem;
    font-size: 1.375rem;
    color: var(--k-ink);
}
.kopf-menue:focus-visible { outline: 3px solid #ff6600; outline-offset: 2px; }
#mobileMenu a, #mobileMenu button { min-height: 44px; font-size: 1.0625rem; }

/* ---- Notdienst-Knopf im Handy-Kopf ---- */
.kopf-notdienst {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
    padding: 0 0.875rem;
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #b42318;
    border: 2px solid #f4c7c3;
    background: #fff;
    text-decoration: none;
}
html.dark .kopf-notdienst { color: #ff9a8f; background: transparent; border-color: #5a2a26; }

.kopf-farbe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
}
html.dark .kopf-farbe { background: #1e293b; color: #e2e8f0; }
.kopf-farbe:focus-visible { outline: 3px solid #ff6600; outline-offset: 2px; }

/* Sprunglink: nur bei Tastaturfokus sichtbar */
.skip-navigation a {
    position: absolute;
    left: -10000px;
    top: 0;
    z-index: 999999;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    background: #1565c0;
    color: #fff !important;
    font-weight: 700;
    font-size: 1.125rem;
}
.skip-navigation a:focus {
    position: fixed;
    left: 50%;
    top: 1.25rem;
    transform: translateX(-50%);
    outline: 3px solid #ff6600;
    outline-offset: 3px;
}

/* Hell/Dunkel-Umschalter: eigene Klassen, weil Font Awesome Tailwinds .hidden überschreibt */
.nur-dunkel { display: none !important; }
html.dark .nur-hell { display: none !important; }
html.dark .nur-dunkel { display: inline-flex !important; align-items: center; gap: 0.5rem; }
.nur-hell { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Navigation: beim Überfahren nur eine Linie (Rahmen unten), keine zusätzliche Textunterstreichung */
header nav .nav-link,
header nav .nav-link:hover,
header nav .nav-link:focus-visible { text-decoration: none !important; }

/* Notdienst im Menü rot (header-nav-smaller.css färbt alle Menülinks
   mit !important ein, deshalb hier mit höherer Spezifität). */
header nav a.nav-rot, header a.nav-rot, #mobileMenu a.nav-rot { color: #b42318 !important; }
html.dark header nav a.nav-rot, html.dark header a.nav-rot, html.dark #mobileMenu a.nav-rot { color: #ff9a8f !important; }
header nav a.nav-rot:hover, header nav a.nav-rot:focus-visible { border-color: #b42318; }