.bg-color-blue {
    background-color: rgb(162, 181, 205);
}

.line {
    color: rgb(54, 100, 139);
    width: 70%;
    height: 3px !important;
    margin: 0 auto;
}

.line2 {
    color: rgb(0, 0, 0);
    width: 70%;
    height: 3px !important;
    margin: 0 auto;
}

.navbar a,
text-black {
    color: black !important;
}

.navbar a:hover {
    color: rgb(162, 181, 205) !important;
    text-shadow: 1px 1px darkgrey;
}

.audiogroesse {
    width: 90%
}

.pink {
    color: rgb(202, 187, 224);
}


/* mobileversion */

#banner2 {
    background-image: url("images/carousel.jpg") !important;
    background-color: rgb(162, 181, 205);
    /* Used if the image is unavailable */
    height: 700px;
    /* You must set a specified height */
    background-position: 70%;
    /* - Center the image */
    background-repeat: no-repeat;
    /* Do not repeat the image */
    background-size: cover;
    /* Resize the background image to cover the entire container */
    position: relative;
    margin-bottom: 20px;
}

.bannertext {
    color: rgb(255, 255, 255);
    background-color: rgba(31, 35, 39, 0.5);
    text-shadow: 1px 1px rgba(31, 35, 39, 0.8);
    padding: 16px;
    position: absolute;
    text-align: center;
    /* Achtung "absolute" braucht immer ein relativ im Eltern-Element */
    top: 80%;
    bottom: 0px;
}

.carousel-caption {
    color: rgb(255, 255, 255);
    background-color: rgba(31, 35, 39, 0.5);
    text-shadow: 1px 1px rgba(31, 35, 39, 0.8);
}


/** Größere Monitore **/

@media only screen and (min-width: 570px) {
    #banner2 {
        display: none;
    }
}


/** Kleinere Monitore **/

@media only screen and (max-width: 600px) {
    #banner1,
    #einleitung {
        display: none;
    }
    /* Textausrichtung in der unteren Hälfte */
    #banner2 .container span {
        background-color: rgba(0, 0, 0, 0.2);
        text-shadow: 1px 1px #000;
        padding: 5px;
        margin: -15px;
        color: rgb(0, 0, 0);
        position: absolute;
        bottom: 0;
    }
}

footer {
    padding: 20px;
    background-color: rgb(162, 181, 205);
    color: #000000 !important;
}

#backtotop_button {
    color: #fff;
}


/**Linkverhalten**/

#backtotop_button a,
#backtotop_button a:hover,
#backtotop_button a:focus {
    color: #fff;
}

.card-title {
    text-align: center;
}

.col-lg {
    margin-bottom: 20px;
}

#backtotop_button {
    background-color: rgba(0, 0, 0, 0);
    text-align: center;
    position: fixed;
    bottom: 45px;
    left: auto;
    right: 25px;
    color: #fff;
    padding: 5px;
    z-index: 99999;
    padding: 3px;
}


/**Linkverhalten**/

#backtotop_button a,
#backtotop_button a:hover,
#backtotop_button a:focus {
    color: #fff;
}


/**runder Button**/

.circle-icon {
    background: lightblue;
    padding: 10px;
    border-radius: 50%;
}