/**
==== Container ====
 */

.stack-container-root {
    padding-top: 100px;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stack-container {
    display: block;
    width: 95%;
    height: auto;
    position: relative;
    min-height: 500px;

}

.stack-container > * {
    grid-area: 1 / 1;
}

/**
==== Karten Struktur ====
 */

.card, .card-long {
    grid-area: 1 / 1;
    width: 100%;
    border-radius: 24pX;
    height: auto;
    background-color: var(--background_card);
    position: relative;
}


.card-1, .card-2, .card-3, .card-4,
.card-5, .card-6, .card-7, .card-8,
.card-9, .card-10, .card-11, .card-12,
.card-13, .card-14 {
    position: absolute;
    will-change: transform;

    width: 100%;
}

.card-1 {
    z-index: 1;
}

.card-2 {
    z-index: 2;
}

.card-3 {
    z-index: 3;
}

.card-4 {
    z-index: 4;
}

.card-5 {
    z-index: 5;
}

.card-6 {
    z-index: 6;
}

.card-7 {
    z-index: 7;
}

.card-8 {
    z-index: 8;
}

.card-9 {
    z-index: 9;
}

.card-10 {
    z-index: 10;
}

.card-11 {
    z-index: 11;
}

.card-12 {
    z-index: 12;
}

.card-13 {
    z-index: 13;
}

.card-14 {
    z-index: 14;
}

.card-1, .card-2, .card-3, .card-4,
.card-5, .card-6, .card-7, .card-8,
.card-9, .card-10, .card-11, .card-12,
.card-13, .card-14 {
    scroll-margin-top: 80px;
}

.card-header {
    height: 4vh;
    display: grid;
    grid-template-columns: 2fr 1fr;
    width: 100%;
    border-top-left-radius: 2vh;
    border-top-right-radius: 2vh;
    color: white;

    background-color: var(--blue_card_opac);
    font-family: "Bellota";
}


.card-header .left_name {
    width: 100%;
    height: 100%;
    color: white;
    font-size: 1.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    border-top-left-radius: 2vh;
}

.card-header .right_role {

    background-color: var(--gray4);
    color: white;
    font-size: 1.3vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    border-top-right-radius: 2vh;
}

span svg {
    width: 2vh !important;
    height: 2vh !important;
}

/**
    ================Karten spezifisch===================
*/

.card-content-row {
    background-color: var(--background_card);
    height: auto;
    border-bottom-left-radius: 2vh;
    border-bottom-right-radius: 2vh;
}

.card-content .absatz_head {
    display: flex;
    font-size: medium;
    padding: 1rem;
    justify-content: center;
    align-items: center;
}

.absatz_head .heading {
    font-family: "Bellota";
    font-size: large
}

.card-content.card_span h4 {
    align-items: center;
    justify-content: center;
    display: flex;
}

.card_span {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.card_span p{
    margin: auto; 

}
.card_alg{
    padding: 8vh;
}

.card-content ul {
    padding-left: 7vh;
    list-style: lower-roman;
    border-bottom-left-radius: 2vh;
}

.card-content ul li {
    justify-content: flex-start;
    font-size: 0.85rem;
    font-family: "Nunito";
    padding: 0.4rem;
    list-style: lower-roman;
}

.card-content .absatz {
    font-size: 0.85rem;
    padding: 0.4rem;

}

.card-content .absatz_head u {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signature {
    padding: 2vh;
    text-align: center;
    font-family: "Bellota";
}

.signature u {
    font-family: var(--font-secondary), sans-serif;
    font-size: 1.0rem;

}
.card-content-map{
     height: 70vh; /* Oder eine feste Höhe wie 500px */
    display: flex;
    flex-direction: column;
}
.card-content-map #my-google-map {
     width: 100%;
     height: 100%; 
    border: none;
}



.team .img-team {
    display: flex;
    justify-content: center;
    align-items: center;
}

.team {
    padding: 0.5rem;

}

.team img {
    border-radius: 12.5vh;
    width: 20vh;
    height: 20vh;
    object-fit: cover;
    border: 0.25em solid var(--gray_card_opac);
}

.greet {
    text-align: center;
    font-size: larger;
}

.notf{
    display:flex; 
    font-size:1rem;
    justify-content:center;
    align-items: stretch; 
    height: 5rem;


    box-sizing: border-box;
}
.notfl{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
    text-align: center;
    flex: 1;   
    color: white;
     background-color: var(--blue_card_opac);
    }
.notfr{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex: 1;
    padding: 1rem;
    text-align: center;
    background-color: var(--gray4);


}
.appl {
    font-size: larger;
    text-align: center;
    font-family: var(--font-primary), serif;
    padding: 0.5rem;
    font-size: 0.9rem;
}

.navn {
    font-size: medium;
    padding: 1rem;
}

.high {
    font-family: "Bellota";
    font-size: 1.4rem;
    text-align: center;
}


.team .signature {
    text-align: center;
    font-family: "Bellota";
    font-size: larger;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team .signature2 {
    text-align: center;
    font-family: "Bellota";
    font-size: medium;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}




.ser {
    width: 100%;
    justify-content: center;
    display: flex;
}

/**
    ========Desktoo========
 */

@media (min-width: 768px) {
    .stack-container {
        position: relative;
        width: 90%;
        margin: 0 auto;
        overflow: visible;
    }

    .stack-container > div {
        position: absolute;
        width: calc(45% - 15px);
        box-sizing: border-box;
        will-change: transform;
    }


    .card-1, .card-3, .card-5, .card-7,
    .card-9, .card-11, .card-13 {
        left: 0;
    }
    #my-google-map{
        min-height: 30vh;
        border-radius: 0 0 25px 25px;
    }

    .card-2, .card-4, .card-6, .card-8,
    .card-10, .card-12, .card-14 {
        left: calc(45% + 15px);
    }

    .card-1, .card-2 {
        z-index: 10;
    }

    .card-3, .card-4 {
        z-index: 20;
    }

    .card-5, .card-6 {
        z-index: 30;
    }

    .card-7, .card-8 {
        z-index: 40;
    }

    .card-9, .card-10 {
        z-index: 50;
    }

    .card-11, .card-12 {
        z-index: 60;
    }

    .card-13, .card-14 {
        z-index: 70;
    }

    .card-header {
        display: grid;
        grid-template-columns: 2fr 1fr;
        width: 100%;
    }

    .team img {
        width: 18vh;
        height: 18vh;
    }

    .card-content .absatz,
    .card-content .signature {
        font-size: 0.9rem;
    }
}


#actualtime {
    font-size: 2vh
}
.time-vacc{
    background-color: var(--blue_card_opac);
    color: white;
    font-size: larger;
    padding: 1rem;
    text-align: center;
}
.head-vacc {
    font-family: 'Bellota';


    text-align: center;
}

.head-vacc div {
    padding: 1vh;
    font-family: 'Bellota';
        text-align: center;
}

.card-4 {
    transition: height 0.3s ease-out;
    overflow: hidden;
}


#btn-vacc {
    background: var(--gray1);
    border: none;
    color: var(--gray4);
    font-family: Bellota; 
    animation: blinken-color 5.5s linear infinite;}


#btn-vacc:hover {
    background: var(--blue_card_opac);
    border: none;
    color: white;
}

.info-opens div {
    font-family: "Nunito";
}

.info-urlaub div {
    font-family:"Nunito";
    color: var(--gray4);

}





.spacer-line img {
    height: 3vh;
    width: 3vh;
}

.spacer-line h1 {

    text-align: center;
    font-family: Bellota;
    color: var(--blue_card_opac);
}