.plg_system_webauthn_login_button #Passkey {
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
}

.item-page.layout-default.no-sidebar .top-article-info {

    text-align: left;

}

/* 1. Den gesamten oberen Navigationsbalken über alle Wetterdaten anheben */
#t4-topbar.t4-sticky {
    z-index: 1050 !important;
    position: sticky !important; /* Behält die klebrige Funktion bei */
    overflow: visible !important; /* Verhindert das Abschneiden des Mega-Menüs */
}

/* 2. Sicherstellen, dass das übergeordnete T4-Wrapper-System mitspielt */
.t4-wrapper, 
.t4-content, 
.t4-content-inner {
    z-index: 1;
    position: relative;
}

/* 3. Dem tatsächlichen Mega-Menü-Dropdown die höchste Priorität geben */
#t4-megamenu-mainmenu .dropdown-menu,
#t4-megamenu-mainmenu .mega-dropdown-menu {
    z-index: 99999 !important;
    display: block; /* Verhindert Darstellungsfehler beim Hover/Klick */
    opacity: 1 !important;
    visibility: visible !important;
}

/* 4. Die Wetter-Komponente im Layer nach hinten schieben */
.com_aviationweather,
.view-weatherlistview,
#t4-main-body {
    z-index: 1 !important;
    position: relative !important;
}
/* 1. Richtet alle Elemente in der Topbar (Logo, Menü, Toggle) perfekt mittig aus */
#t4-topbar .t4-row,
#t4-topbar .navbar {
    display: flex !important;
    align-items: center !important; /* Vertikale Zentrierung */
}

/* 2. Richtet den spezifischen Theme-Toggle-Button in der Höhe aus */
.t4-theme-toggle,
.t4-wrapper .dark-theme-toggle,
#t4-topbar .theme-toggle-wrap {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 3. Falls der Toggle in einer eigenen Spalte (z. B. account-menu) liegt */
#t4-topbar .account-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end; /* Schiebt den Inhalt ganz nach rechts */
}

/* 1. Den gesamten Header-Container und seine Zeilen flach drücken */
#t4-topbar, 
#t4-topbar .t4-section-inner,
#t4-topbar .t4-row {
    height: auto !important;
    min-height: 50px !important; /* Setzt die neue, flache Mindesthöhe (Standard ist oft 80px+) */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Den Bootstrap-Navigationsbalken und seine Links flach machen */
#t4-topbar .navbar,
#t4-topbar .navbar-nav > li,
#t4-topbar .navbar-nav > li > a,
#t4-topbar .nav-link {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    height: auto !important;
    min-height: auto !important;
    line-height: 1.2 !important; /* Verhindert vertikales Aufblähen durch Schrift */
}

/* 3. WICHTIG: Das Logo darf den Header nicht wieder hochdrücken */
#t4-topbar .logo-img {
    max-height: 40px !important; /* Das Logo wird auf 40px Höhe begrenzt */
    width: auto !important;
    object-fit: contain;
}

/* 4. Den Theme-Toggle und Account-Bereich an die neue Höhe anpassen */
#t4-topbar .account-menu,
#t4-topbar .theme-toggle-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 100% !important;
}