/*Buttons*/
        body {
            background-color: #EDFBFF;
        }

        .switch {
            color:rgb(0, 0, 0);
            width: calc(90px + 5vw);
            height: 100px;
            border: 2px solid #000000; /* Border-Style hinzugefügt */
            border-radius: 10px;
            font-size: 150%;
        }

        @media screen and (max-width: 600px) {
            .switch {
                font-size: 120%; /* Ändere die Schriftgröße für schmalere Bildschirme */
                height: 75px;
            }
        }

        .ThemenMenuButton {
            position: relative;
            color: rgb(0, 0, 0);
            width: calc(150px + 3vw);
            height: 200px;
            background-color: #ffffff; /* Weiß */
            border-radius: 10px;
            font-size: 150%;
            display: inline-flex; /* Ändern Sie von "block" auf "inline-flex" */
            flex-direction: column; /* Anordnung der Elemente in einer Spalte */
            align-items: center; /* Zentriere die Elemente horizontal */
            justify-content: flex-end; /* Platzieren Sie die Elemente am unteren Rand */
            margin-right: 20px; /* Horizontaler Abstand zwischen den Buttons */
            margin-top: 10px; /* Abstand vom oberen Rand */
            margin-bottom: 10px; /* Vertikaler Abstand zwischen den Buttons */
            border: 2px solid #858585; /* Hinzufügen einer dünnen grauen Umrandung */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Übergangseffekt */
        }

        @media screen and (max-width: 600px) {
            .ThemenMenuButton {
                font-size: 100%; /* Ändere die Schriftgröße für schmalere Bildschirme */
                height: 120px;
                width: 98px;
            }
        }

        .ThemenMenuButton:hover {
            transform: translateY(-10px); /* Heben Sie den Button beim Hover-Effekt leicht an */
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten */
        }

        .ThemenMenuButton .button-text {
            font-family: Arial, sans-serif;
            text-align: center; /* Zentriere den Text horizontal */
            position: absolute; /* Absolute Positionierung für den Text */
            top: 30px; /* Abstand vom oberen Rand */
            left: 0; /* Zentriere horizontal */
            right: 0; /* Zentriere horizontal */
        }

        @media screen and (max-width: 600px) {
            .ThemenMenuButton .button-text{
                top: 15px;

            }
        }

        .ThemenMenuButton img {
            max-width: 100%;
            max-height: 50%; /* Verringern Sie die Höhe des Bildes, um Platz für den Text oben zu machen */
            position: absolute; /* Absolute Positionierung für das Bild */
            bottom: 0; /* Platzieren Sie das Bild am unteren Rand */
            left: 0; /* Zentriere horizontal */
            right: 0; /* Zentriere horizontal */
            margin: auto; /* Zentriere vertikal */
            bottom: 20px;
        }

        @media screen and (max-width: 600px) {
            .ThemenMenuButton img{
                bottom: 10px;
            }
        }

        .SchulstufenMenuButton {
            position: relative;
            color: rgb(0, 0, 0);
            width: calc(150px + 3vw);
            height: 200px;
            background-color: #ffffff; /* Weiß */
            border-radius: 10px;
            font-size: 150%;
            display: inline-flex; /* Ändern Sie von "block" auf "inline-flex" */
            flex-direction: column; /* Anordnung der Elemente in einer Spalte */
            align-items: center; /* Zentriere die Elemente horizontal */
            justify-content: flex-end; /* Platzieren Sie die Elemente am unteren Rand */
            margin-right: 20px; /* Horizontaler Abstand zwischen den Buttons */
            margin-top: 10px; /* Abstand vom oberen Rand */
            margin-bottom: 10px; /* Vertikaler Abstand zwischen den Buttons */
            border: 2px solid #858585; /* Hinzufügen einer dünnen grauen Umrandung */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Übergangseffekt */
        }

        @media screen and (max-width: 600px) {
            .SchulstufenMenuButton {
                font-size: 100%; /* Ändere die Schriftgröße für schmalere Bildschirme */
                height: 120px;
                width: 98px;
            }
        }

        .SchulstufenMenuButton:hover {
            transform: translateY(-10px); /* Heben Sie den Button beim Hover-Effekt leicht an */
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten */
        }

        
        .SchulstufenMenuButton .button-text {
            font-family: Arial, sans-serif;
            text-align: center; /* Zentriere den Text horizontal */
            position: absolute; /* Absolute Positionierung für den Text */
            top: 30px; /* Abstand vom oberen Rand */
            left: 0; /* Zentriere horizontal */
            right: 0; /* Zentriere horizontal */
        }

        @media screen and (max-width: 600px) {
            .SchulstufenMenuButton .button-text{
                top: 15px;

            }
        }

        .SchulstufenMenuButton img {
            max-width: 100%;
            max-height: 50%; /* Verringern Sie die Höhe des Bildes, um Platz für den Text oben zu machen */
            position: absolute; /* Absolute Positionierung für das Bild */
            bottom: 0; /* Platzieren Sie das Bild am unteren Rand */
            left: 0; /* Zentriere horizontal */
            right: 0; /* Zentriere horizontal */
            margin: auto; /* Zentriere vertikal */
            bottom: 20px;
        }

        @media screen and (max-width: 600px) {
            .SchulstufenMenuButton img{
                bottom: 10px;
            }
        } 














        .container {
            margin-left: calc(70px + 14vw); /* Achten Sie darauf, die Maßeinheit korrekt zu schreiben */
            margin-top: 50px; /* Keine Abstand vom oberen Rand */
            padding: 0px;
            position: relative; /* Ändern Sie die Position auf relativ */
            z-index: 1; /* Z-Index erhöhen, um unter dem linken Balken zu liegen */
            padding-top: 150px; /* Berücksichtigen Sie die Höhe der Kopfzeile */
            display: flex;
            flex-wrap: wrap; /* Hinzufügen von flex-wrap, damit die Buttons bei Bedarf umbrechen können */
            z-index: 2;
        }
        


        .container2 {
            margin-left: calc(45px + 14vw); /* Achten Sie darauf, die Maßeinheit korrekt zu schreiben */
            margin-top: -225px; /* Keine Abstand vom oberen Rand */
            padding: 25px;
            position: absolute; /* Ändern Sie die Position auf absolut */
            padding-top: 225px; /* Berücksichtigen Sie die Höhe der Kopfzeile */
            display: flex;
            flex-direction: column; /* Anordnung der Elemente in einer Spalte */
            z-index: 1;
        }

        .container3 {
            margin-left: 25px; /* Achten Sie darauf, die Maßeinheit korrekt zu schreiben */
            margin-top: 150px; /* Keine Abstand vom oberen Rand */
            padding: 0px;
            position: absolute; /* Ändern Sie die Position auf absolut */
            z-index: 1; /* Z-Index erhöhen, um unter dem linken Balken zu liegen */
            padding-top: 150px; /* Berücksichtigen Sie die Höhe der Kopfzeile */
            display: flex;
            flex-direction: column; /* Anordnung der Elemente in einer Spalte */
            z-index: 5;
            align-items: center;
        }
        
        .MenuAnzeige {
            position: absolute;
            top: 150px;
            left: calc(90px + 14vw);
            padding: 10px; /* Abstand zwischen Text und Umrandung */
            background-color: white;
            border-radius: 10px; /* Anpassen der abgerundeten Ecken */
            border: 3px solid #ccc; /* Umrandung */
            z-index: 2;
            font-size: 15px;
            font-family: Arial, sans-serif;
            color: #000000; /* Dunkle Schriftfarbe für bessere Lesbarkeit */
        }

        @media screen and (max-width: 600px) {
            .MenuAnzeige {
                font-size: 8px; /* Ändere die Schriftgröße für schmalere Bildschirme */
            }
        }

        .ZurückZumMainMenu{
            color: rgb(0, 0, 0);
            width: 100px;
            height: 50px;
            background-color: white;
            border-radius: 10px;
            font-size: 24px;
            display: none; /* Ändern Sie von "block" auf "inline-block" */
            margin-right: 20px; /* Horizontaler Abstand zwischen den Buttons */
            margin-top: 10px; /* Abstand vom oberen Rand */
            margin-bottom: 10px; /* Vertikaler Abstand zwischen den Buttons */
            border: 2px solid #858585; /* Hinzufügen einer dünnen grauen Umrandung */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Übergangseffekt */
            position: fixed;
        }   

        .ZurückZumMainMenu:hover {
            transform: translateY(-5px); /* Heben Sie den Button beim Hover-Effekt leicht an */
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten */
        }

        .UnterMenuButton {
            color: rgb(0, 0, 0);
            width: calc(175px + 15vw);
            height: 75px;
            background-color: rgb(255, 255, 255);
            border-radius: 10px;
            font-size: 150%;
            display: none; /* Ändern Sie von "block" auf "inline-block" */
            margin-right: 20px; /* Horizontaler Abstand zwischen den Buttons */
            margin-top: 10px; /* Abstand vom oberen Rand */
            margin-bottom: 10px; /* Vertikaler Abstand zwischen den Buttons */
            border: 2px solid #858585; /* Hinzufügen einer dünnen grauen Umrandung */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Übergangseffekt */
        }

        @media screen and (max-width: 600px) {
            .UnterMenuButton {
                font-size: 100%; /* Ändere die Schriftgröße für schmalere Bildschirme */
                height: 50px;
            }
        }

        .UnterMenuButton:hover {
            transform: translateX(20px); /* Heben Sie den Button beim Hover-Effekt leicht an */
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten */
        }

        .ZurückZumAlgebraMenu{
            color: rgb(0, 0, 0);
            width: 100px;
            height: 50px;
            background-color: white;
            border-radius: 10px;
            font-size: 24px;
            display: none; /* Ändern Sie von "block" auf "inline-block" */
            margin-right: 20px; /* Horizontaler Abstand zwischen den Buttons */
            margin-top: 10px; /* Abstand vom oberen Rand */
            margin-bottom: 10px; /* Vertikaler Abstand zwischen den Buttons */
            border: 2px solid #858585; /* Hinzufügen einer dünnen grauen Umrandung */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Übergangseffekt */
            position: fixed;
        }   

        .ZurückZumAlgebraMenu:hover {
            transform: translateY(-5px); /* Heben Sie den Button beim Hover-Effekt leicht an */
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten */
        }

        .ZurückZumGeometrieMenu{
            color: rgb(0, 0, 0);
            width: 100px;
            height: 50px;
            background-color: white;
            border-radius: 10px;
            font-size: 24px;
            display: none; /* Ändern Sie von "block" auf "inline-block" */
            margin-right: 20px; /* Horizontaler Abstand zwischen den Buttons */
            margin-top: 10px; /* Abstand vom oberen Rand */
            margin-bottom: 10px; /* Vertikaler Abstand zwischen den Buttons */
            border: 2px solid #858585; /* Hinzufügen einer dünnen grauen Umrandung */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Übergangseffekt */
            position: fixed;
        }   

        .ZurückZumGeometrieMainMenu:hover {
            transform: translateY(-5px); /* Heben Sie den Button beim Hover-Effekt leicht an */
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten */
        }

        .ZurückZumKörperMenu{
            color: rgb(0, 0, 0);
            width: 100px;
            height: 50px;
            background-color: white;
            border-radius: 10px;
            font-size: 24px;
            display: none; /* Ändern Sie von "block" auf "inline-block" */
            margin-right: 20px; /* Horizontaler Abstand zwischen den Buttons */
            margin-top: 10px; /* Abstand vom oberen Rand */
            margin-bottom: 10px; /* Vertikaler Abstand zwischen den Buttons */
            border: 2px solid #858585; /* Hinzufügen einer dünnen grauen Umrandung */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Übergangseffekt */
            position: fixed;
        }   

        .ZurückZumKörperMenu:hover {
            transform: translateY(-5px); /* Heben Sie den Button beim Hover-Effekt leicht an */
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten */
        }

        .Dropdown {
            color: rgb(0, 0, 0);
            width: calc(175px + 15vw);
            height: 75px;
            background-color: white;
            border-radius: 10px;
            font-size: 150%;
            display: none; /* Ändern Sie von "block" auf "inline-block" */
            margin-right: 20px; /* Horizontaler Abstand zwischen den Buttons */
            margin-top: 10px; /* Abstand vom oberen Rand */
            margin-bottom: 10px; /* Vertikaler Abstand zwischen den Buttons */
            border: 2px solid #858585; /* Hinzufügen einer dünnen grauen Umrandung */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Übergangseffekt */
        }

        @media screen and (max-width: 600px) {
            .Dropdown {
                font-size: 100%; /* Ändere die Schriftgröße für schmalere Bildschirme */
                height: 50px;
            }
        } 

        .Dropdown:hover {
            transform: translateX(20px); /* Heben Sie den Button beim Hover-Effekt leicht an */
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten */
        }

        .DropdownContent{
            width: 50px;
            left: 0px;
            display: none;
        }

        .ZurückZumUnterstufeMenu{
            color: rgb(0, 0, 0);
            width: 100px;
            height: 50px;
            background-color: white;
            border-radius: 10px;
            font-size: 24px;
            display: none; /* Ändern Sie von "block" auf "inline-block" */
            margin-right: 20px; /* Horizontaler Abstand zwischen den Buttons */
            margin-top: 10px; /* Abstand vom oberen Rand */
            margin-bottom: 10px; /* Vertikaler Abstand zwischen den Buttons */
            border: 2px solid #858585; /* Hinzufügen einer dünnen grauen Umrandung */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Übergangseffekt */
            position: fixed;
        }   

        .ZurückZumUnterstufeMenu:hover {
            transform: translateY(-5px); /* Heben Sie den Button beim Hover-Effekt leicht an */
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten */
        }

        .ZurückZumOberstufeMenu{
            color: rgb(0, 0, 0);
            width: 100px;
            height: 50px;
            background-color: white;
            border-radius: 10px;
            font-size: 24px;
            display: none; /* Ändern Sie von "block" auf "inline-block" */
            margin-right: 20px; /* Horizontaler Abstand zwischen den Buttons */
            margin-top: 10px; /* Abstand vom oberen Rand */
            margin-bottom: 10px; /* Vertikaler Abstand zwischen den Buttons */
            border: 2px solid #858585; /* Hinzufügen einer dünnen grauen Umrandung */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Übergangseffekt */
            position: fixed;
        }   

        .ZurückZumOberstufeMenu:hover {
            transform: translateY(-5px); /* Heben Sie den Button beim Hover-Effekt leicht an */
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten */
        }

        /*Left-bar*/

        .left-bar {
            background-color: #2c3e50; /* Dunkelblau */
            width: calc(15px + 14vw);
            position: fixed; /* Positioniert den Balken fest */
            top: 140px; /* Abstand vom oberen Rand (Höhe der Kopfzeile) */
            bottom: 0; /* Abstand vom unteren Rand */
            left: 0; /* Abstand vom linken Rand */
            border-right: 5px solid #16657A; /* Dünner schwarzer Strich am rechten Rand */
            border-top: 5px solid #16657A; /* Dünner schwarzer Strich oben */
            border-radius: 0 10px 0px 0; /* Abgerundete Ecken (nur links unten) */
            padding: 20px;
            z-index: 3; /* Z-Index erhöhen, um über dem Hintergrund zu liegen */
            display: flex; /* Flexbox-Layout verwenden */
            flex-direction: column; /* Anordnung der Elemente in einer Spalte */
            justify-content: flex-start; /* Zentrieren der Elemente vertikal am Anfang */
            align-items: center; /* Zentrieren der Elemente horizontal */
            color: #ffffff; /* Weißer Text */
            font-family: Arial, sans-serif; /* Verwende eine Standardschriftart */
        }

        /* Kopfzeile */
        header {
            
            background-color: #2c3e50; /* Dunkelblau */
            color: #ffffff; /* Weiß */
            padding: 10px; /* Innenabstand oben/unten 10px, seitlich 10px */
            display: flex; /* Flexbox-Layout verwenden */
            justify-content: space-between; /* Platzierung der Elemente an den Seiten */
            align-items: center; /* Vertikale Ausrichtung in der Mitte */
            border-bottom: 5px solid #16657A; /* Blau */
            position: fixed; /* Kopfzeile bleibt beim Scrollen oben */
            width: 100%; /* Vollständige Breite */
            top: 0; /* Abstand vom oberen Rand */
            left: 0; /* Abstand vom linken Rand */
            z-index: 3; /* Z-Index erhöhen, um über dem Hintergrund zu liegen */
        }

        header img {
            width: 100px; /* Breite des Bildes */
            height: auto; /* Automatische Höhe, um das Seitenverhältnis beizubehalten */
        }

        .header-title {
            font-family: 'Times New Roman', Times, serif, sans-serif;
            font-size: 24px; /* Schriftgröße */
            margin-left: 20px; /* Linken Abstand auf 'auto' setzen, um rechtsbündig zu sein */
            margin-right: auto; /* Rechten Abstand auf 'auto' setzen, um linksbündig zu sein */
        }


        #searchInput {
            width: calc(60px + 10vw);
            padding: 10px; /* Innenabstand für das Suchfeld */
            margin-bottom: 20px; /* Abstand zum nächsten Element */
            border: 2px solid #000; /* Schwarzer Rahmen um das Suchfeld */
            border-radius: 10px; /* Abrundung der Ecken */
            font-size: 18px; /* Schriftgröße im Suchfeld */
            box-sizing: border-box; /* Berücksichtige den Rahmen in der Breite */
        }

        .btn-container {
            margin-left: auto; /* Linken Abstand auf 'auto' setzen, um rechtsbündig zu sein */
            margin-right: auto; /* Rechten Abstand auf 'auto' setzen, um linksbündig zu sein */
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

        }

        .btn {
            font-family: Arial, sans-serif;
            padding: 10px 20px;
            background-color: #007D51; /* Hellblau */
            color: #ffffff; /* Weiß */
            border: none;
            border-radius: 10px;
            text-decoration: none; /* Keine Textdekoration */
            transition: background-color 0.3s ease;
            cursor: pointer; /* Zeiger beim Hover-Effekt */
            font-size: 16px; /* Schriftgröße */
            font-weight: bold; /* Fettschrift */
            margin: 5px; /* Ändere den Abstand zwischen den Buttons nach Bedarf */
        }

        .btn:hover {
            background-color: #008F92; /* Dunkleres Blau bei Hover */
        }

        /* Stile für Aufgabenblätter */
        .Links-Aufgaben {
            width: 300px; /* Gemeinsame Breite für beide Buttons */
            height: 50px;
            color: white;
            background-color: #25B382; /* Dunkleres Blau */
            border: 2px solid #007D51; /* Helleres Blau */
            border-radius: 5px;
            margin-bottom: -10px; /* Abstand zwischen den Blättern */
            font-size: 18px;
        }

        @media screen and (max-width: 600px) {
            .Links-Aufgaben {
                font-size: 80%; /* Ändere die Schriftgröße für schmalere Bildschirme */
                width: 200px;
                height: 40px;
            }
        } 

        /* Stile für Lösungsblätter */
        .Links_Lösung {
            width: 300px; /* Gemeinsame Breite für beide Buttons */
            height: 50px;
            color: black;
            background-color: #6AEBB7; /* Dunkleres Blau */
            border: 2px solid #25B382; /* Helleres Blau */
            border-radius: 5px;
            margin-bottom: 5px; /* Abstand zwischen den Blättern */
            font-size: 18px;
        }

        @media screen and (max-width: 600px) {
            .Links_Lösung {
                font-size: 80%; /* Ändere die Schriftgröße für schmalere Bildschirme */
                width: 200px;
                height: 40px;
            }
        }