/* ===============================
    Mobile Anpassungen
   =============================== */

@media (max-width: 900px) {

    :root {

        /* Kopfbereich bleibt auch auf Tablets kompakt */
        --header-height: 170px;
    }


    .logo {

        top: 10px;
        left: 16px;
        width: 120px;
    }


    .top-navigation {

        top: 120px;
        left: 0;

        width: 100%;
        height: 50px;

        justify-content: flex-start;
        gap: 10px;

        padding: 0 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }


    .top-navigation::-webkit-scrollbar {

        display: none;
    }


    .nav-button {

        flex: 0 0 auto;
        padding: 9px 14px;
        font-size: 15px;
        white-space: nowrap;
    }


    .focus-container {

        /* Karten auf kleineren Bildschirmen stapeln */
        grid-template-columns: 1fr;
    }


    .info-section {

        /* etwas weniger Seitenabstand auf kleinen Bildschirmen */
        width: calc(100% - 40px);

        gap: 20px;
    }


    .info-content {

        /* weniger Innenabstand auf kleinen Bildschirmen */
        padding: 30px 24px;
    }
}


/* ===============================
    Smartphones
   =============================== */

@media (max-width: 600px) {

    :root {
        --header-height: 84px;
    }

    .header-background {
        height: var(--header-height);
    }

    .logo {
        top: 10px;
        left: 50%;
        width: 112px;
        transform: translateX(-50%);
    }

    .top-navigation {
        display: none;
    }

    .mobile-menu-toggle {
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 1402;
        display: flex;
        width: 46px;
        height: 46px;
        padding: 10px;
        box-sizing: border-box;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        border: 1px solid rgba(7, 97, 42, .28);
        border-radius: 10px;
        background: #f2f2f2;
        cursor: pointer;
    }

    .mobile-menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background: var(--primary-color);
    }

    .mobile-menu-toggle:focus-visible,
    .mobile-navigation a:focus-visible {
        outline: 3px solid #111;
        outline-offset: 3px;
    }

    .mobile-navigation-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1400;
        background: rgba(0, 0, 0, .38);
    }

    .mobile-navigation-backdrop[hidden] {
        display: none;
    }

    .mobile-navigation {
        position: fixed;
        z-index: 1401;
        top: 0;
        right: 0;
        display: flex;
        width: min(320px, 86vw);
        height: 100vh;
        height: 100dvh;
        box-sizing: border-box;
        padding: 88px 20px 24px;
        flex-direction: column;
        gap: 12px;
        overflow-y: auto;
        background: var(--primary-light);
        box-shadow: -8px 0 28px rgba(0, 0, 0, .2);
        transform: translateX(105%);
        transition: transform .25s ease;
        visibility: hidden;
    }

    .mobile-navigation.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .mobile-navigation .nav-button {
        display: block;
        padding: 14px 16px;
        white-space: normal;
        font-size: 16px;
    }

    .mobile-navigation .nav-button:hover {
        transform: none;
    }

    .mobile-menu-toggle,
    .mobile-navigation-backdrop,
    .mobile-navigation {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .mobile-navigation-backdrop:not([hidden]),
    .mobile-navigation.is-open {
        display: flex;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    :root {

        /* Kompakter Kopfbereich: Logo und Navigation bleiben vollständig sichtbar */
        --header-height: 153px;
    }


    .header-background {

        /* Verhindert einen kleinen horizontalen Überstand */
        width: 100vw;
    }


    .logo {

        top: 8px;
        left: 12px;
        width: 110px;
        border-radius: 8px;
    }


    .top-navigation {

        top: 103px;
        left: 0;

        width: 100%;
        height: 50px;

        justify-content: flex-start;
        gap: 8px;

        padding: 0 12px;
        overflow-x: auto;
        scrollbar-width: none;
    }


    .top-navigation::-webkit-scrollbar {

        display: none;
    }


    .nav-button {

        flex: 0 0 auto;
        padding: 9px 12px;
        font-size: 14px;
        white-space: nowrap;
    }


    .container {

        padding: 16px 0 24px;
    }


    .hero-slider {

        display: grid;
        grid-template-columns: repeat(2, auto);
        grid-template-areas:
            "slider slider"
            "previous next";
        justify-content: center;
        gap: 12px 28px;
        margin: 16px auto;
    }


    .slider-container {

        grid-area: slider;
        width: calc(100vw - 32px);
        height: 230px;
    }


    .slider-image-center {

        width: 100%;
        height: 100%;
        border-radius: 12px;
    }


    .slider-button {

        width: 46px;
        height: 46px;
        font-size: 24px;
    }


    .slider-button-left {

        grid-area: previous;
        margin: 0;
    }


    .slider-button-right {

        grid-area: next;
        margin: 0;
    }


    .info-section {

        width: calc(100% - 32px);
        min-height: 0;
        margin: 24px auto;
        gap: 0;
    }


    .green-column {

        display: none;
    }


    .info-content {

        width: 100%;
        box-sizing: border-box;
        padding: 24px 20px;
    }


    .info-content h2 {

        margin-top: 0;
        font-size: 26px;
        line-height: 1.2;
    }


    .info-content p {

        font-size: 16px;
        line-height: 1.55;
    }


    .focus-container {

        gap: 14px;
        margin-top: 20px;
    }


    .focus-box {

        min-height: 0;
        padding: 18px;
    }


    .focus-box h3 {

        font-size: 20px;
    }


    .contact-banner {

        margin-top: 48px;
        padding: 36px 20px;
    }


    .contact-banner-container {

        gap: 28px;
    }


    .contact-card h2 {

        margin: 0 0 14px;
        font-size: 1.3rem;
    }

    /* Mobile Kopfbereich mit mittigem Logo und Menü-Schaltfläche */
    :root {
        --header-height: 84px;
    }

    .header-background {
        height: var(--header-height);
    }

    .logo {
        top: 8px;
        left: 50%;
        width: auto;
        height: auto;
        max-width: calc(100vw - 100px);
        max-height: calc(var(--header-height) - 16px);
        border-radius: 8px;
        transform: translateX(-50%);
    }

    .top-navigation {
        display: none;
    }
}


/* Sehr niedrige Smartphone-Ansicht, beispielsweise im Querformat */
@media (max-width: 600px) and (max-height: 500px) {

    :root {

        --header-height: 118px;
    }


    .logo {

        top: 6px;
        left: 10px;
        width: 76px;
    }


    .top-navigation {

        top: 75px;
        height: 43px;
    }


    .nav-button {

        padding: 6px 10px;
        font-size: 13px;
    }
}