/* Grundlayout: Karte soll maximal 70% Breite bei großen Screens haben,
           aber auf kleineren Bildschirmen automatisch verkleinern. */
.full-height {
    height: calc(100vh - 183px);
}

.bq-responsive-card {
    width: 65%;
    max-width: 3800px;
    /*background-color: #00FFC2;*/
    background-color: transparent;
    color: floralwhite;
    border:none;
    box-shadow:none;
}

/* Basiswerte für große Desktops */
.title-text {
    font-size: 13.3rem;
    text-align: center;
    text-shadow: 1px 1px 2px gray, 2px 2px 4px black;
}

.subtitle-text {
    font-size: 2rem;
    text-align: center;
    text-shadow: 1px 1px 2px gray, 2px 2px 4px black;
}

.learn-button {
    font-size: 3.4rem;
    width: 600px;
    height: 170px;
    text-transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: floralwhite;
    background-color: teal;
}

    .learn-button:hover {
        color: floralwhite;
        background-color: black;
    }

.responsive-icon-button .mud-icon-root {
    font-size: 4.5rem;
}

/* Desktop */
@media (max-width: 2560px) {
    .title-text {
        font-size: 11rem;
    }

    .subtitle-text {
        font-size: 1.5rem;
    }

    .learn-button {
        font-size: 3rem;
        width: 550px;
        height: 150px;
    }

    .responsive-icon-button .mud-icon-root {
        font-size: 5rem;
    }

    .bq-responsive-card {
        width: 80%;
    }
}

/* Desktop */
@media (max-width: 1920px) {
    .title-text {
        font-size: 8.4rem;
    }

    .subtitle-text {
        font-size: 1.9rem;
    }

    .learn-button {
        font-size: 2.5rem;
        width: 450px;
        height: 130px;
    }

    .responsive-icon-button .mud-icon-root {
        font-size: 3.5rem;
    }

    .bq-responsive-card {
        width: 95%;
    }
}

/* Desktop */
@media (max-width: 1279px) {
    .title-text {
        font-size: 6.6rem;
    }

    .subtitle-text {
        font-size: 1.4rem;
    }

    .learn-button {
        font-size: 2rem;
        width: 420px;
        height: 120px;
    }

    .responsive-icon-button .mud-icon-root {
        font-size: 3.3rem;
    }

    .bq-responsive-card {
        width: 95%;
    }
}
/* Desktop */
@media (max-width: 960px) {
    .title-text {
        font-size: 4.0rem;
    }

    .subtitle-text {
        font-size: 1.5rem;
    }

    .learn-button {
        font-size: 2rem;
        width: 350px;
        height: 100px;
    }

    .responsive-icon-button .mud-icon-root {
        font-size: 3rem;
    }

    .bq-responsive-card {
        width: 98%;
    }
}

/* Tablet / mittlere Viewports */
@media (max-width: 768px) {
    .title-text {
        font-size: 3.2rem;
    }

    .subtitle-text {
        font-size: 1.5rem;
    }

    .learn-button {
        font-size: 1.2rem;
        width: 250px;
        height: 80px;
    }

    .responsive-icon-button .mud-icon-root {
        font-size: 3rem;
    }

    .responsive-card {
        width: 95%;
    }
}

/* Mobile / kleine Viewports */
@media (max-width: 480px) {
    .title-text {
        font-size: 3.2em;
    }

    .subtitle-text {
        font-size: 1.2rem;
    }

    .learn-button {
        font-size: 0.9rem;
        width: 180px;
        height: 50px;
    }

    .responsive-icon-button .mud-icon-root {
        font-size: 1.9rem;
    }

    .responsive-card {
        width: 98%;
    }
}