/* ---------------------------------------------------------------------------
GIZ-Nord – projektspezifisches Theme über PicoCSS v2
Grundstimmung: medizinisch-vertrauensvoll (Teal) + türkiser Notruf-/
Achtungs-Akzent. Wird NACH pico.min.css geladen und koppelt Picos
--pico-*-Variablen an projektweite --giz-*-Design-Tokens (gleicher Selektor
wie Pico → später gewinnt). Dark-Mode-Mechanik unverändert: data-theme auf
(siehe base.html), localStorage "theme".
--------------------------------------------------------------------------- */
/* Schema-neutrale Marken-Tokens (Teal/Türkis bleiben in Hell und Dunkel gleich) */
:root {
--giz-teal: #119ab5;
--giz-teal-strong: #0f8aa3;
--giz-emerg: #06a6c4; /* türkiser Notruf-/Achtungs-Akzent */
--giz-emerg-hover: #0f8aa3;
--giz-emerg-contrast: #ffffff; /* Türkis trägt weißen Text (Kontrast) */
--giz-radius-card: 13px;
--giz-radius-btn: 10px;
}
/* Light-Scheme: Flächen/Text/Rahmen + Kopplung der Pico-Variablen
(gleicher Selektor wie Pico → unsere spätere Definition gewinnt). */
:root:not([data-theme="dark"]),
[data-theme="light"] {
--giz-page: #fbfcfd;
--giz-surface: #ffffff;
--giz-surface-2: #f6f8fa;
--giz-nav: #0e3a5a;
--giz-nav-active: #15527c;
--giz-text: #2b3a47;
--giz-muted: #69757f;
--giz-border: #e4e9ed;
--pico-background-color: var(--giz-page);
--pico-color: var(--giz-text);
--pico-muted-color: var(--giz-muted);
--pico-muted-border-color: var(--giz-border);
--pico-card-background-color: var(--giz-surface);
--pico-card-border-color: var(--giz-border);
--pico-card-sectioning-background-color: var(--giz-surface-2);
--pico-primary: var(--giz-teal);
--pico-primary-background: var(--giz-teal);
--pico-primary-border: var(--giz-teal);
--pico-primary-hover: var(--giz-teal-strong);
--pico-primary-hover-background: var(--giz-teal-strong);
--pico-primary-hover-border: var(--giz-teal-strong);
--pico-primary-focus: rgba(17, 154, 181, 0.25);
--pico-primary-inverse: #fff;
--pico-primary-underline: rgba(17, 154, 181, 0.5);
--pico-primary-hover-underline: rgba(17, 154, 181, 0.7);
}
/* Dark-Scheme: dunklere Flächen + etwas helleres Teal für Lesbarkeit */
[data-theme="dark"] {
--giz-page: #0f1820;
--giz-surface: #1a242c;
--giz-surface-2: #16212a;
--giz-nav: #0d3858;
--giz-nav-active: #16527c;
--giz-text: #e7edf1;
--giz-muted: #97a4af;
--giz-border: #28333d;
--pico-background-color: var(--giz-page);
--pico-color: var(--giz-text);
--pico-muted-color: var(--giz-muted);
--pico-muted-border-color: var(--giz-border);
--pico-card-background-color: var(--giz-surface);
--pico-card-border-color: var(--giz-border);
--pico-card-sectioning-background-color: var(--giz-surface-2);
--pico-primary: #2bb6cc;
--pico-primary-background: var(--giz-teal);
--pico-primary-border: var(--giz-teal);
--pico-primary-hover: #38c3d9;
--pico-primary-hover-background: var(--giz-teal-strong);
--pico-primary-hover-border: var(--giz-teal-strong);
--pico-primary-focus: rgba(43, 182, 204, 0.25);
--pico-primary-inverse: #fff;
--pico-primary-underline: rgba(43, 182, 204, 0.5);
--pico-primary-hover-underline: rgba(43, 182, 204, 0.7);
}
/* --- Typografische Skala bändigen -----------------------------------------
Pico vergrößert die Root-Schrift auf breiten Bildschirmen recht stark
(bis 131,25 % ≈ 21 px) – auf großen Monitoren wirkt das überdimensioniert.
Wir deckeln die Skalierung auf eine ruhigere Spanne (16–17 px). Da Pico die
Größe via :where(:root) (Spezifität 0) setzt, genügen einfache :root-Regeln.
Aufsteigend sortiert, damit pro Breite der größte passende Wert greift. */
/* Flache, kompaktere Grundgröße statt Picos Hochskalierung (näher am Entwurf). */
:root { --pico-font-size: 93.75%; } /* ~15px */
/* Überschriften kompakter – Picos Default-Skala ist deutlich größer als der Entwurf.
Picos Heading-Regeln haben Spezifität <= (0,0,1) -> unsere späteren Regeln gewinnen. */
h1 { font-size: 1.85rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
/* --- Layout-Feinschliff --- */
main.container {
padding-block: 2rem;
min-height: 70vh;
}
.hero {
padding-block: 1rem 0.5rem;
}
.hero h1 {
font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.9rem);
margin-bottom: 0.35rem;
}
.hero hgroup > p {
font-size: 1rem;
margin-bottom: 0;
}
footer.container {
margin-top: 3rem;
padding-block: 1.5rem 2rem;
}
/* --- Footer: kompakte, möglichst einzeilige Leiste ---
Identität/Adresse links, Notruf mittig, Copyright rechts. Per flex-wrap
bricht die Leiste auf schmalen Viewports sauber in mehrere Zeilen um. */
.site-footer__bar {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.4rem 2rem;
padding-top: 1.1rem;
border-top: 1px solid var(--pico-muted-border-color);
}
.site-footer__bar p {
margin: 0;
}
.site-footer__org,
.site-footer__contact {
font-size: 0.9rem;
}
.site-footer__copy {
font-size: 0.85rem;
color: var(--pico-muted-color);
}
.site-footer__legal { display: flex; gap: 1rem; }
.site-footer__legal a { font-weight: 600; color: var(--giz-teal); text-decoration: none; }
.site-footer__legal a:hover { text-decoration: underline; }
.site-footer__contact strong { color: var(--giz-emerg); }
.site-footer__contact a { color: var(--giz-emerg); text-decoration: none; }
.site-footer__contact a:hover { text-decoration: underline; }
/* --- Hinweis-Boxen (callout-Block) --- */
.callout {
border-left: 4px solid var(--pico-primary);
padding-inline-start: 1rem;
}
.callout-emergency {
border-left-color: var(--giz-emerg);
}
/* Titel der Hinweis-Box ohne Pico-Sektionsfläche (grauer Kasten) darstellen,
damit die Überschrift wie die übrigen Überschriften der Seite wirkt. */
.callout > header {
margin: 0 0 0.25rem;
padding: 0;
background: transparent;
border-bottom: 0;
border-radius: 0;
}
/* --- Notruf-/Achtungs-CTA (für späteren Einsatz vorbereitet) ---
Verwendung z. B.:
Notruf 0551 19240 */
.emergency,
a.emergency,
button.emergency,
[role="button"].emergency {
--pico-background-color: var(--giz-emerg);
--pico-border-color: var(--giz-emerg);
--pico-color: var(--giz-emerg-contrast);
background-color: var(--giz-emerg);
border-color: var(--giz-emerg);
color: var(--giz-emerg-contrast);
font-weight: 700;
}
.emergency:hover,
a.emergency:hover,
button.emergency:hover,
[role="button"].emergency:hover {
--pico-background-color: var(--giz-emerg-hover);
--pico-border-color: var(--giz-emerg-hover);
background-color: var(--giz-emerg-hover);
border-color: var(--giz-emerg-hover);
color: var(--giz-emerg-contrast);
}
/* === Notfall-Chip (Logoleiste) =========================================== */
.giz-emerg-chip {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.4rem 0.95rem 0.4rem 0.45rem;
background: var(--giz-emerg);
color: var(--giz-emerg-contrast);
border-radius: 12px;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 2px 10px rgba(6, 166, 196, 0.35);
}
.giz-emerg-chip:hover { background: var(--giz-emerg-hover); color: var(--giz-emerg-contrast); }
.giz-emerg-chip:focus-visible { outline: 2px solid var(--giz-emerg); outline-offset: 2px; }
.giz-emerg-chip__icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.1rem;
height: 2.1rem;
flex: 0 0 auto;
border-radius: 50%;
background: rgba(255, 255, 255, 0.22);
}
.giz-emerg-chip__icon svg { position: relative; width: 1rem; height: 1rem; display: block; }
.giz-emerg-chip__icon::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
animation: giz-pulse 2.2s ease-out infinite;
}
.giz-emerg-chip__text { display: flex; flex-direction: column; line-height: 1.15; }
.giz-emerg-chip__label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.92; }
.giz-emerg-chip__num { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; }
@keyframes giz-pulse {
0% { transform: scale(1); opacity: 0.55; }
70% { transform: scale(1.9); opacity: 0; }
100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.giz-emerg-chip__icon::after { animation: none; }
}
/* === Anmelden/Abmelden (Logoleiste, rechts) ============================== */
.giz-login-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin: 0;
padding: 0.5rem 0.95rem;
border: 1px solid var(--giz-border);
border-radius: var(--giz-radius-btn);
background: var(--giz-surface);
color: var(--giz-text);
font-size: 0.9rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.giz-login-btn:hover { border-color: var(--giz-teal); color: var(--giz-teal); background: var(--giz-surface); }
.giz-login-btn svg { width: 1rem; height: 1rem; display: block; }
button.giz-login-btn { width: auto; font-family: inherit; }
.site-logos__right .logout-form { display: inline-flex; margin: 0; }
/* === Karten ============================================================== */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
align-items: stretch;
margin-bottom: 1.25rem;
}
@media (max-width: 700px) {
.card-grid { grid-template-columns: 1fr; }
}
.card {
background: var(--giz-surface);
border: 1px solid var(--giz-border);
border-radius: var(--giz-radius-card);
box-shadow: 0 1px 3px rgba(20, 40, 60, 0.07);
padding: 1.4rem 1.6rem;
margin-bottom: 1.25rem;
}
.card-grid > .card { margin-bottom: 0; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card > header {
margin: 0 0 0.8rem;
padding: 0;
background: transparent; /* Picos graues Sektions-Header-Band entfernen */
border-bottom: 0;
}
.card > header h1 { font-size: 1.15rem; } /* Karten-/Seitentitel kompakt, wie „Aktuelles" */
.card h1 { margin-bottom: 0.4rem; }
.card--emerg { border-left: 5px solid var(--giz-emerg); }
.card--emerg__head { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.6rem; }
.card--emerg__head svg { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; color: var(--giz-emerg); }
.card--emerg__head a { color: var(--giz-emerg); text-decoration: none; }
.card--emerg__head a:hover { text-decoration: underline; }
/* === Inhalts-/Textseiten (.prose): Impressum, Datenschutz, Kontakt, Beiträge =
Lange Fließtext-Seiten mit mehreren Abschnitten. Der Seitentitel bleibt im
kompakten Karten-Stil (wie bei den Veröffentlichungen); die Abschnitts-
überschriften ordnen sich klar darunter ein, statt – wie Picos Default-H2 –
größer als der Titel zu wirken. */
.prose h2 {
font-size: 1.05rem;
font-weight: 700;
margin-top: 1.7rem;
margin-bottom: 0.45rem;
padding-bottom: 0.3rem;
border-bottom: 1px solid var(--giz-border);
}
.prose h3 {
font-size: 0.95rem;
font-weight: 700;
margin-top: 1.15rem;
margin-bottom: 0.3rem;
}
/* Direkt auf eine Überschrift folgender Absatz/Liste rückt enger heran. */
.prose :is(h2, h3) + * { margin-top: 0.3rem; }
/* === Aktuelles-Liste ===================================================== */
.aktuelles-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.4rem;
padding-bottom: 0.85rem;
border-bottom: 1px solid var(--giz-border);
}
.aktuelles-head h2 {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
font-size: 1.15rem; /* dezenter als die globale H2 */
font-weight: 700;
}
.aktuelles-head h2 svg {
flex: 0 0 auto;
width: 1.15rem;
height: 1.15rem;
color: var(--giz-teal);
}
.aktuelles-all { font-weight: 600; color: var(--giz-teal); text-decoration: none; white-space: nowrap; }
.aktuelles-all:hover { text-decoration: underline; }
.aktuelles-list { list-style: none; padding: 0; margin: 0; }
.aktuelles-item { padding: 0.9rem 0; border-bottom: 1px solid var(--giz-border); }
.aktuelles-item:last-child { border-bottom: 0; padding-bottom: 0; }
.aktuelles-meta { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.3rem; font-size: 0.82rem; color: var(--giz-muted); }
.aktuelles-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.aktuelles-title a { color: var(--giz-text); text-decoration: none; }
.aktuelles-title a:hover { color: var(--giz-teal); }
.aktuelles-excerpt { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--giz-muted); }
/* Kategorie-Badge (nicht klickbar) – Variante der Presse-Badge ohne Hover-Invert */
.badge--cat { cursor: default; background: var(--giz-surface-2); }
a.badge--cat { cursor: pointer; }
.badge--cat:hover { background: var(--giz-surface-2); color: var(--giz-teal); }
/* --- Dark-/Light-Mode-Umschalter (Sonne/Mond, oben rechts) --- */
.theme-toggle {
--pico-background-color: transparent;
--pico-border-color: transparent;
background: transparent;
border: none;
margin: 0;
padding: 0.4rem;
width: auto;
color: var(--pico-color);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
border-radius: var(--pico-border-radius);
}
.theme-toggle:hover {
background: rgba(127, 127, 127, 0.14);
color: var(--pico-primary);
}
.theme-toggle:focus-visible {
outline: 2px solid var(--pico-primary);
outline-offset: 2px;
}
.theme-toggle svg {
width: 1.25rem;
height: 1.25rem;
display: block;
}
/* hell → Mond (Ziel: dunkel), dunkel → Sonne (Ziel: hell) */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* --- Presse-Liste: Badges für Online/PDF/Scan --- */
.badge {
display: inline-block;
padding: 0.1rem 0.55rem;
margin: 0 0.2rem 0.2rem 0;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.5;
border: 1px solid var(--pico-primary);
border-radius: 1rem;
color: var(--pico-primary);
text-decoration: none;
white-space: nowrap;
}
.badge:hover {
background: var(--pico-primary);
color: var(--pico-primary-inverse);
}
/* ===========================================================================
Kopfbereich: Logo-Leiste (GIZ-Nord links, UMG rechts) + navy Navigations-
Band darunter – angelehnt an die bisherige Seite (giz-nord.de).
Markenblau stammt aus dem Logo. Die Logo-Leiste bleibt in beiden Themes
hell, damit die offiziellen Logos immer gut lesbar sind.
=========================================================================== */
:root {
--giz-navy: var(--giz-nav); /* Alias: Navigationsband nutzt jetzt das Nav-Token */
--giz-navy-hover: var(--giz-nav-active);
}
/* Pico gibt body > header einen Block-Innenabstand – hier nicht erwünscht */
body > header.site-header {
padding-block: 0;
}
.site-header {
margin: 0;
}
/* --- Logo-Leiste (Flex: Logo+Notfall-Chip links · Suche mittig · Anmelden+UMG rechts) --- */
.site-logos {
background: var(--giz-surface);
border-bottom: 1px solid var(--giz-border);
}
.site-logos__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem 1.25rem;
/* knapper Innenabstand: größere Logos bei gleich hohem Band */
padding-block: 0.5rem;
}
.site-logos__left {
display: flex;
align-items: center;
gap: 1rem;
flex: 0 0 auto;
}
.site-logos__right {
display: flex;
align-items: center;
gap: 1.25rem;
flex: 0 0 auto;
}
.site-logo {
display: inline-flex;
align-items: center;
}
/* --- Suche in der Logo-Leiste ---
input + button sind direkte Kinder des role=search-Formulars, damit Picos
Pillen-Logik (Border-Merge, Eckenradien, Fokus-Ring) korrekt greift. Die
Pille selbst wird über auto-Ränder zwischen Logo- und Anmelden-Gruppe zentriert
(kein innerer Wrapper → kein doppeltes Feld / kein freistehender Button). */
.site-search {
display: flex;
align-items: stretch;
flex: 0 1 13rem; /* ~50% der vorherigen Breite */
min-width: 8rem;
margin: 0 auto; /* zentriert die Pille zwischen Logo- und Anmelden-Gruppe */
}
.site-search__input {
flex: 1 1 auto;
min-width: 0;
height: 2.5rem;
margin: 0;
padding: 0 0.75rem;
border: 1px solid var(--pico-form-element-border-color);
border-right: 0;
background: var(--pico-form-element-background-color);
background-image: none; /* Picos eingebautes Such-Icon abschalten (eigener Button rechts) */
color: var(--pico-color);
font-size: 0.95rem;
}
.site-search__input:focus {
outline: none;
border-color: var(--pico-primary);
box-shadow: inset 0 0 0 1px var(--pico-primary);
}
.site-search__btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.8rem;
height: 2.5rem;
margin: 0;
padding: 0;
border: 1px solid var(--pico-primary);
background: var(--pico-primary);
color: var(--pico-primary-inverse);
cursor: pointer;
}
.site-search__btn:hover {
background: var(--pico-primary-hover);
border-color: var(--pico-primary-hover);
}
.site-search__btn svg { width: 1rem; height: 1rem; display: block; }
/* Eckenradien gegen Picos [role="search"]-Pillen-Styling durchsetzen: dessen
(0,2,0)-Selektoren erzwingen sonst 5rem-Rundungen → „abgebrochener" Kreis-
Button. Mit (0,2,1) gewinnen wir unabhängig von der Quellreihenfolge und
formen Feld + Button zu einem sauber zusammenhängenden Rechteck. */
.site-search input.site-search__input {
height: 2.1rem; /* ~80% der vorherigen Höhe; Picos input:not()-Padding überstimmen */
padding-block: 0;
font-size: 0.9rem;
border-radius: 999px 0 0 999px;
}
.site-search button.site-search__btn {
flex: 0 0 auto; /* überstimmt Picos [role=search] > * { flex: 1 1 auto } */
width: 2.3rem; /* überstimmt Picos [role=search] button { width: auto } */
height: 2.1rem; /* exakt gleiche Höhe wie das Eingabefeld */
border-radius: 0 999px 999px 0;
}
.site-logo img {
display: block;
width: auto;
}
.site-logo--giz img { height: 72px; }
.site-logo--umg img { height: 30px; }
.site-logo:focus-visible {
outline: 2px solid var(--giz-navy);
outline-offset: 3px;
border-radius: 2px;
}
/* --- Navigations-Band (navy) --- */
.site-nav-band {
background: var(--giz-navy);
}
/* Pico-eigene nav-Defaults im Band neutralisieren */
.mainnav {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: flex-start;
gap: 0;
padding-block: 0;
overflow: visible;
}
/* Reset für ALLE Listen/Einträge im Band (Pico setzt hier Paddings, Ränder
und einen Zero-Width-Space vor jedem , die wir nicht wollen). */
.mainnav ul { padding: 0; list-style: none; }
.mainnav li { margin: 0; padding: 0; }
.mainnav li::before { content: none; }
/* Nur die beiden obersten Listen sind die waagerechten Flex-Reihen.
Klassenselektoren (0,2,0) überschreiben Picos nav ul:first/last-of-type-
Negativränder – sonst säße das Band leicht nach links versetzt. */
.mainnav > .nav-menu,
.mainnav > .nav-actions {
display: flex;
align-items: stretch;
gap: 0;
margin: 0;
}
.mainnav > .nav-menu { flex-wrap: wrap; }
.mainnav > .nav-actions { margin-left: auto; align-items: center; }
/* Deren direkte Einträge dehnen sich über die Bandhöhe */
.mainnav > ul > li { display: flex; align-items: stretch; }
/* Top-Level-Einträge */
.nav-item { position: relative; }
.nav-item > a {
display: flex;
align-items: center;
margin: 0;
padding: 0.9rem 1rem;
color: #fff;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
border-radius: 0;
transition: background-color 0.15s ease;
}
.nav-item > a:hover,
.nav-item:focus-within > a {
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
.nav-item > a[aria-current="page"] {
background: var(--giz-nav-active);
box-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.85);
}
/* Home als Haus-Icon (ersetzt das frühere Text-Label „Start") */
.nav-item--home > a svg { width: 1.3rem; height: 1.3rem; display: block; }
/* Aufklapp-Indikator (Pfeil) */
.has-submenu > a::after {
content: "";
display: inline-block;
width: 0.45em;
height: 0.45em;
margin-left: 0.5em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-0.15em) rotate(45deg);
}
/* Untermenü-Toggle-Button (nur mobil sichtbar) */
.submenu-toggle {
display: none;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 3.25rem;
margin: 0;
padding: 0;
background: transparent;
border: none;
color: #fff;
cursor: pointer;
}
.submenu-toggle svg {
width: 1.1rem;
height: 1.1rem;
transition: transform 0.15s ease;
}
/* Untermenü – Grundzustand. Spezifität .nav-item .submenu (0,2,0) übertrifft
sowohl den Listen-Reset als auch Picos nav-ul-Regeln, damit display:none und
margin:0 zuverlässig greifen (sonst ist das Dropdown dauerhaft offen bzw.
nach links versetzt). */
.nav-item .submenu {
display: none;
flex-direction: column;
align-items: stretch;
margin: 0;
padding: 0;
list-style: none;
}
.nav-item .submenu li { display: block; }
.nav-item .submenu a {
display: block;
margin: 0;
text-decoration: none;
white-space: nowrap;
}
/* Aktionen rechts (Suche + Theme-Umschalter) */
.nav-icon {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0.9rem 0.8rem;
color: #fff;
}
.nav-icon:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.nav-icon svg { display: block; width: 1.2rem; height: 1.2rem; }
.site-nav-band .theme-toggle {
padding: 0.9rem 0.8rem;
color: #fff;
border-radius: 0;
}
.site-nav-band .theme-toggle:hover {
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
/* Anmelden/Abmelden im Aktionsbereich (als Icon, wie Suche/Theme) */
.nav-auth { display: flex; align-items: center; }
.nav-auth .logout-form { display: flex; margin: 0; }
/* Abmelden ist ein