/* A1. MOBILE: HOCHFORMAT (bis 1024px) */
@media screen and (max-width: 1024px) and (orientation: portrait) {
    .header-center{
        display: none;
    }
    .titel-mobil {
        display: block;
    }

    .side-menu {
        top: 10vh;
        /* Wir nutzen eine Höhe, die den Platz bis zum Footer lässt, 
           da der Footer jetzt im Fluss ist */
        height: 90vh; /* 100vh - 10vh Header - 2.5vh Abstand */
        width: 100vw; /* Beispiel für Portrait, damit man noch etwas vom Inhalt sieht */
    }

    .main-content {
        width: 95vw; /* Etwas luftiger als 90vw */
        padding: 2.5vw; /* Optional: Auch das Padding leicht reduzieren, um Platz zu gewinnen */
        margin-bottom: 0;
    }

    .email-adresse{
        display: none;
    }
    .email-copy-hint {
        display: inline-flex;
    }

    .main-footer {
    position: relative;
    margin-top: 0.25vh;
    }

    /*

.main-content {
    margin-bottom: 0;
}

/* Der Footer bestimmt den Abstand zum darüberliegenden Content 
.main-footer {
    position: relative;
    margin-top: 0.25vh;
}

    */
    .services-grid {
        flex-direction: column; /* Sorgt dafür, dass die Karten untereinander stehen */
        gap: 2.5vw;             /* Optional: Etwas Abstand zwischen den Karten */
        margin-bottom: 0;
        margin-top: 0;
    }
    
    .hero-section {
        margin-bottom: 2.5vw;
    }
    
    .service-card {
        width: 100%;           /* Karten sollen die volle Breite nutzen */
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* A2. MOBILE: QUERFORMAT (bis 1024px) */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    .main-header {
        height: 15vh;
    }

    header.main-header div.subtitle {
        display: none;
    }

    .nav-links-container {
        height: 20vh;
    }

    .side-menu {
        top: 15vh;
        /* Wir nutzen eine Höhe, die den Platz bis zum Footer lässt, 
           da der Footer jetzt im Fluss ist */
        height: 85vh; /* 100vh - 10vh Header - 2.5vh Abstand */
        width: 33vw; /* Beispiel für Portrait, damit man noch etwas vom Inhalt sieht */
    }

    .main-content {
        width: calc(100vw - 5vh); /* Etwas luftiger als 90vw */
        padding: 2.5vh; /* Optional: Auch das Padding leicht reduzieren, um Platz zu gewinnen */
        margin-top: 15.25vh;
        margin-bottom: 0;
    }

    .main-footer {
        position: relative;
        margin-top: 0.25vh;
    }

    .services-grid {
        flex-direction: row; /* Sorgt dafür, dass die Karten untereinander stehen */
        gap: 2.5vh;             /* Optional: Etwas Abstand zwischen den Karten */
        margin-bottom: 0;
        margin-top: 0;
    }
    
    .hero-section {
        margin-bottom: 2.5vh;
    }
    
    .service-card {
        width: 100%;           /* Karten sollen die volle Breite nutzen */
        margin-top: 0;
        margin-bottom: 0;
    }
    /* Button-Anpassung auf 10vh */
    .menu-toggle {
        height: 10vh;
        width: 10vh;
        top: 2.5vh;
        right: 2.5vh;
    }

    /* Balken-Geometrie für den 10vh Button */
    .menu-toggle .bar {
        width: 6vh;
        height: 0.8vh;
        border-radius: 0.4vh;
    }

    /* Angepasste Keyframes für die 10vh-Größe zur perfekten Zentrierung */
    @keyframes open-top-landscape {
        0% { transform: translateY(0vh) rotate(0deg); }
        50% { transform: translateY(2.2vh) rotate(0deg); }
        100% { transform: translateY(2.2vh) rotate(405deg); }
    }
    @keyframes open-bottom-landscape {
        0% { transform: translateY(0vh) rotate(0deg); }
        50% { transform: translateY(-2.2vh) rotate(0deg); }
        100% { transform: translateY(-2.2vh) rotate(-405deg); }
    }
    
    /* Zuweisung der angepassten Animationen für Landscape */
    .menu-toggle.is-active #bar-top { animation: open-top-landscape 0.5s ease-in-out forwards; }
    .menu-toggle.is-active #bar-bottom { animation: open-bottom-landscape 0.5s ease-in-out forwards; }
}

/* B. 4:3 MONITORE (ab 1024px) */
@media screen and (min-width: 1024px) and (max-aspect-ratio: 4/3) {
    header.main-header div.subtitle{
        display: block;
    }
}