/* Wetterseite – bereinigte user.css, 25.10.2026 */

html {
    overflow-y: scroll !important;
    scrollbar-gutter: stable !important;
}


.pagenavigation {
    display: none !important;
}

/* Oberer Bannerbereich */
.container-header {
    width: 100% !important;
    max-width: 1330px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: #32809a !important;
}

/* Wetterbild */
.container-header .container-topbar,
.container-header .grid-child.container-topbar {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.container-header .container-topbar .mod-custom {
    width: 100% !important;
}

.container-header .container-topbar img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
}

/* Menüleiste */
.container-header .grid-child.container-nav {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    background-color: #32809a !important;
}

.container-header .mod-menu a {
    font-size: 20px !important;
    padding: 2px 16px;
}

.container-header .mod-menu .current > a,
.container-header .mod-menu .active > a {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    color: white !important;
    font-weight: bold !important;
}

.container-header .mod-menu li:not(.current):not(.active) > a {
    background: transparent !important;
    color: white !important;
}

.container-header .mod-menu li a,
.container-header .mod-menu li a:link,
.container-header .mod-menu li a:visited,
.container-header .mod-menu li.active a,
.container-header .mod-menu li.current a {
    color: #ffffff !important;
}

/* Hamburger-Menü für Handys */
@media (max-width: 767px) {
    .wetter-navigation .navbar-toggler {
        display: block;
    }

    .wetter-navigation .navbar-collapse:not(.show) {
        display: none;
    }

    .wetter-navigation .navbar-collapse.show {
        display: block;
    }

    .container-header,
    .container-header .container-nav,
    .container-header .mod-menu {
        background-color: #32809a !important;
    }
}

/* Footer: Breite und Ausrichtung */
.container-footer {
    width: 100% !important;
    max-width: 1330px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}

.container-footer .footer-navigation {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
}

.container-footer .footer-navigation ul,
.container-footer .footer-navigation .mod-menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 25px;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

footer.container-footer .grid-child {
    justify-content: center !important;
    padding: 6px 10px !important;
}

/* Impressum und Datenschutzerklärung nebeneinander */
footer.container-footer #mod-menu111 {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 25px !important;
    flex-wrap: wrap !important;
}

/* Copyright auf dem PC links im Footer */
footer.container-footer {
    position: relative;
}

footer.container-footer::before {
    content: "© MH 2026";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 14px;
    white-space: nowrap;
}

/* Handy: Footer kompakt, Copyright über der Navigation */
@media (max-width: 767px) {
    footer.container-footer {
        padding: 0 !important;
        min-height: 0 !important;
        text-align: center !important;
    }

    footer.container-footer .grid-child {
        padding: 0 !important;
        min-height: 0 !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px 20px !important;
    }

    footer.container-footer::before {
        position: static !important;
        display: block !important;
        transform: none !important;
        text-align: center !important;
        padding: 8px 0 2px !important;
    }
}
/* Wetterkarten – Menüleiste */
.wetterkarten nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
      justify-content: center;
}

.wetterkarten nav a {
    display: inline-block;
    padding: 10px 15px;
    background: #e8f3f7;
    color: #176b8a;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
}

.wetterkarten nav a:hover {
    background: #32809a;
    color: white;
}
/* Wetterkarten – umschaltbare Ansichten */
.wetterkarten section {
    display: none;
}

/* Standardmäßig Regenradar anzeigen */
.wetterkarten section#radar {
    display: block;
}

/* Gewählte Wetterkarte anzeigen */
.wetterkarten:has(section:target:not(#radar)) section#radar {
    display: none;
}

.wetterkarten section:target {
    display: block;
}
/* Wetterkarten – Anpassung für Smartphones */
@media (max-width: 767px) {

    .wetterkarten iframe {
        width: 100% !important;
        height: 350px !important;
        max-width: 100% !important;
    }

    .wetterkarten nav {
        justify-content: center;
        gap: 6px;
    }

    .wetterkarten nav a {
        padding: 8px 10px;
        font-size: 14px;
    }
}

html {
    scroll-padding-top: 350px;
}

/* Erde 3D beim Laden nicht vollständig ausblenden */
.wetterkarten section#erde:not(:target) {
    display: block;
    position: absolute;
    left: -9999px;
    width: 850px;
    visibility: hidden;
}

.wetterkarten section#erde:target {
    display: block;
    position: static;
    width: auto;
    visibility: visible;
}

/* Wetterkarten: Footer näher an die Karten */
body:has(.wetterkarten) {
    min-height: 0 !important;
}
/* Warnkarte auf dem Handy – oberen Abstand verkleinern */
@media (max-width: 767px) {
    .wetterkarten #warnung iframe {
        margin-top: 0 !important;
        transform: none !important;
    }
}
/* DWD-Warnkarte: eigener Bildausschnitt auf dem Handy */
@media (max-width: 767px) {
    .wetterkarten iframe {
        width: 100% !important;
        max-width: 100% !important;
    }

    .wetterkarten #warnung iframe {
        height: 45px !important;
    }
}
/* Einheitliche Joomla-Seitenüberschriften */
.page-header,
.page-header h1,
.page-header h2,
.com-content-article__header,
.com-content-article__header h1,
.com-content-article__header h2,
.com-content-article__body > h1,
.com-content-article__body > h2 {
    text-align: center !important;
    font-size: 24px !important;
    font-weight: bold !important;
    margin: 10px 0 15px !important;
}