@charset "utf-8";
/* CSS Document */

        /* Grid Container */
        .grid-hero {
            display: grid;
            grid-template-columns: auto;
            grid-template-rows: auto;
            justify-items: center;
            align-items: center;
            gap: 0px;
            width: 100%;
        }

            .grid-hero > div {
                text-align: center;
                font-size: 1em;
            }

        /* Media Queries für verschiedene Bildschirmgrößen */

        /* Mobile Ansicht */
        @media (min-width : 330px ){
            .grid-hero {
                grid-template-columns: repeat(1, 1fr);
                gap: 1rem;
                padding: 0;
            }
        }

        /* Tablet Ansicht (klein) */
        @media (min-width: 700px) {
            .grid-hero {
                grid-template-columns: repeat(1, 1fr);
                padding: 2em;
            }
        }

        /* Tablet Ansicht (mittel) */
        @media (min-width: 900px) {
            .grid-hero {
                grid-template-columns: repeat(1, 1fr);
                padding: 3em;
            }
        }

        /* Desktops und größere Bildschirme */
        @media (min-width: 1100px) {
            .grid-hero {
                grid-template-columns: repeat(1, 1fr);
                gap: 2rem;
                padding: 3em;
            }
        }

        /* Große Desktops */
        @media (min-width: 1150px) {
            .grid-hero {
                grid-template-columns: repeat(1, 1fr);
                gap: 2rem;
                padding: 4em;
            }
        }

        /* Sehr große Desktops */
        @media (min-width: 1300px) {
            .grid-hero {
                grid-template-columns: repeat(1, 1fr);
                gap: 2rem;
                padding: 4em;
            }
        }

        /* Box innerhalb der Karten zentrieren */
        .grid-card-hero {
            background-color: rgba(120, 120, 120, 0.0);
            color: black;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.0);
            display: flex;
            justify-content: center; /* Zentriert horizontal */
            align-items: center; /* Zentriert vertikal */
            width: 100%;
            max-width: auto; /* Maximale Breite für größere Bildschirme */
            height: auto;
        }



            /* Zusätzliche Stile für die Kartenbox */
            .grid-card-hero .box {
                padding: 20px;
                background-color: rgba(255, 255, 255, 0.074);
                border: 1px solid rgba(255, 255, 255, 0.222);
                -webkit-backdrop-filter: blur(20px);
                backdrop-filter: blur(20px);
                border-radius: 0.7rem;
                width: 100%; /* Box passt sich der Breite der Karte an */
            }

                /* Hover-Effekt für Karten */
                .grid-card-hero .box:hover {
                    box-shadow: 0px 0px 20px 1px #0078b4;
                    border: 1px solid rgba(255, 255, 255, 0.454);
                }

                /* Anpassungen für den Text innerhalb der Box */
                .grid-card-hero .box h1 {
                    font-size: 1.5rem;
                    line-height: 1.6;
                }

                /* Titel innerhalb der Box */
                .grid-card-hero .box .title {
                    font-size: 2.5rem;
                    font-weight: 500;
                    letter-spacing: 0.1em;
                }

                .grid-card-hero .box div strong {
                    display: block;
                    margin-bottom: 0.5rem;
                }

                .grid-card-hero .box div p {
                    margin: 0;
                    font-size: 1.5rem;
                    font-weight: 300;
                    letter-spacing: 0.1em;
                }

                .grid-card-hero .box div span {
                    font-size: 1.5rem;
                    font-weight: 300;
                }

                    .grid-card-hero .box div span:nth-child(3) {
                        font-weight: 500;
                        margin-right: 0.2rem;
                    }