/* === Header-Banner === */

#header-banner {
    width: 100%;
    height: 0;
    padding-top: 20.84%;
    background: url(../img/hintergrund-leistungen.png) no-repeat;
    background-size: contain;
    border-top: 3px solid var(--hell-grau);
    border-bottom: 3px solid var(--hell-grau);
}

/* === Terminbuchung-Bereich === */

#terminbuchung-bereich {
    padding-bottom: 4rem;
}

#terminbuchung-bereich .btn-termin-buchen {
    margin-top: 5rem;
}

#terminbuchung-bereich .angebotsinhalt {
    background-color: var(--hell-blau);
    color: var(--weiß);
    box-shadow: 0 0 10px var(--hell-blau);
}

#terminbuchung-bereich .erfahre-mehr > summary {
    background-color: var(--hell-blau);
    color: var(--weiß);
    box-shadow: 0 0 5px var(--hell-blau);
}

#terminbuchung-bereich .erfahre-mehr[open] {
    background-color: var(--hell-grau);
    color: var(--schwarz);
    border: 1px solid var(--schwarz);
}

/* === Chatbot-Bereich === */

#chatbot-bereich {
    background-color: var(--hell-blau);
    color: var(--weiß);
}

#chatbot-bereich .angebotsinhalt {
    background-color: var(--weiß);
    color: var(--schwarz);
    box-shadow: 0 0 10px var(--weiß);
}

#chatbot-bereich .erfahre-mehr > summary {
    background-color: var(--weiß);
    color: var(--schwarz);
    box-shadow: 0 0 5px var(--weiß);
}

#chatbot-bereich .erfahre-mehr[open] {
    background-color: var(--dunkel-blau);
    color: var(--weiß);
    border: 1px solid var(--weiß);
}

/* === Generelles === */

.angebotsinhalt {
    border-radius: 15px;
    padding-top: .1rem;
    width: 85%;
    margin-right: auto;
    margin-left: auto;
}

.angebotsinhalt > h1 {
    font-size: 1.6rem;
    text-decoration: underline;
    position: relative;
    margin-bottom: .8rem;
    right: 1.3rem;
}

.angebotsinhalt > li {
    line-height: 200%;
    font-size: 1.4rem;
    font-weight: bold;
    padding-bottom: .6rem;
}

.erfahre-mehr {
    width: 20%;
    margin-right: auto;
    margin-left: auto;
    cursor: pointer;
    margin-top: 1.5rem;
}

.erfahre-mehr > summary {
    padding: 0.75rem;
    font-weight: bold;
    font-size: 1.2rem;
    position: relative;
    text-align: center;
}

.erfahre-mehr > p {
    text-align: center;
    padding: .5rem;
    line-height: 150%;
    font-size: 1.2rem;
}

.erfahre-mehr[open] {
    width: 85%;
    border-radius: 15px;
}

.erfahre-mehr[open] > summary {
    border-radius: 15px 15px 0 0;
}

.erfahre-mehr > summary:focus {
    box-shadow: none;
}

.erfahre-mehr > summary::marker {
    content: none;
}

.erfahre-mehr > summary::-webkit-details-marker {
    display: none;
}

.erfahre-mehr > summary::before,
.erfahre-mehr > summary::after {
    content: "";
    width: .7em;
    height: 0;
    border: .125rem solid;
    position: absolute;
    top: calc(50%);
    right: .7rem;
    transform: translateY(-10%);
}

.erfahre-mehr > summary::after {
    transform: rotate(90deg);
}

.erfahre-mehr[open] > summary::after {
    transform: rotate(0deg);
}

#grafik-automatische-terminbuchung, #grafik-chatbot {
    display: block;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    top: 1rem;
    transition: height 0.5s;
    border-radius: 15px;
}

#grafik-automatische-terminbuchung {
    box-shadow: 0 0 10px var(--dunkel-blau);
}

#grafik-chatbot {
    box-shadow: 0 0 10px var(--weiß);
}

.btn-termin-buchen {
    width: 45%;
    padding: 1rem;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    display: block;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 0 0 20px var(--gold);
    margin-top: 4rem;
}

.btn-termin-buchen:hover {
    text-decoration: underline;
}

#mobile-br {
    display: none;
}

#chatbot-bereich .row:nth-of-type(2) {
    display: flex;
    flex-direction: row;
}

#chatbot-bereich .col-2 {
    order: 2;
}

#chatbot-bereich .col-4 {
    order: 1;
}

@media (max-width: 1440px)  {

    .angebotsinhalt {
        width: 95%;
    }

    .erfahre-mehr {
        width: 30%;
    }

    .erfahre-mehr[open] {
        width: 95%;
    }

    .btn-termin-buchen {
        width: 55%;
        margin-top: 3rem;
    }

    #terminbuchung-bereich .btn-termin-buchen {
        margin-top: 3rem;
    }

}

@media (max-width: 1024px)  {

    #terminbuchung-bereich .col-4, #terminbuchung-bereich .col-2 {
        width: 100%;
    }

    #chatbot-bereich .col-4, #chatbot-bereich .col-2 {
        width: 100%;
    }

    #chatbot-bereich .row:nth-of-type(2) {
        display: flex;
        flex-direction: column;
    }

    #chatbot-bereich .col-2 {
        order: 1;
    }

    #chatbot-bereich .col-4 {
        order: 2;
    }

    .angebotsinhalt {
        width: 75%;
    }

    .erfahre-mehr {
        width: 25%;
    }

    .erfahre-mehr[open] {
        width: 75%;
    }

    .btn-termin-buchen {
        width: 45%;
        margin-top: 3rem;
    }

    #chatbot-bereich {
        padding-bottom: 4rem;
    }

}

@media (max-width: 768px) {

    .angebotsinhalt {
        width: 90%;
    }

    .erfahre-mehr {
        width: 35%;
    }

    .erfahre-mehr[open] {
        width: 90%;
    }

    .btn-termin-buchen {
        width: 65%;
    }

}

@media (max-width: 480px) {

    .angebotsinhalt {
        width: 100%;
    }

    .erfahre-mehr {
        width: 60%;
    }

    .erfahre-mehr[open] {
        width: 100%;
    }

    .btn-termin-buchen {
        width: 100%;
    }

    #mobile-br {
        display: block;
    }

    #terminbuchung-bereich .intro-container p, #terminbuchung-bereich .intro-container p {
        margin-bottom: 0;
    }

    #chatbot-bereich {
        padding-bottom: 2rem;
    }

}