.body {
    text-transform: lowercase;
    scroll-behavior: smooth;
    background-color: #556B2F;
    color: #FFFFF0;
    cursor: none;
    background-color: #556B2F;
    /*  background-image: url('../media/img/backround_test2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;  /* Bild bleibt beim Scrollen fixiert 
    min-height: 100vh; /* /* Statt height: 100vh */
}

a {
    color: #FFFFF0;
    text-decoration: none;
    cursor: none;
    /* background-color: transparent; */
}

a:hover {
    color: #FFDB58;
    text-decoration: none !important;
    /* background-color: transparent; */
    cursor: pointer;
}


/* navbar */



.navbar {
    color: #FFFFF0;
    transition: all 2s;
    backface-visibility: hidden;
    padding-top: 2%;
    pointer-events: all !important;
cursor: none !important;
}

#navbarNav {
    transition: all 1.5s ease !important;
    z-index: 10 !important;
    margin-top: 15vh;

}


.navbar > .container,
.navbar > .container-fluid {
    justify-content:flex-end;
    
}


.navbar-dark .navbar-toggler span {
    display: block;
    width: 40px;
    height: 4px;
    margin: 4px auto;
    background: #FFFFF0!important;
    transition: all .8s cubic-bezier(0.250, 0.100, 0.250, 1.000);
    /* cursor: none !important; */
}



.nav-item {
    font-size: 60px;
    font-weight: 900;
    text-align: center;
    line-height: 8vh;
    width: 100%;
}


.navbar-dark .navbar-nav {
    font-size: 15px;
    color: #FFFFF0;
    background-color: transparent;
    /* padding-bottom: 100%; */
    /* max-width: 100%; */
    /* height: 100%; */
    padding-top: 5vh;
    padding-bottom: 5vh;
}

.navbar-dark .navbar-nav .nav-link {

    border: 0;
    color: #FFFFF0;
    /*    cursor: none !important;*/

}

.navbar-dark .navbar-toggler {
    color: rgb(255, 255, 255);
    border-color: #FFFFF0;
}

.navbar-dark .navbar-nav .nav-link:hover {
    border: 0;
    color: #FFDB58;
    padding-left: 5vw;
    padding-right: 5vw;
    font-family: 'Fraunces', serif;
    font-weight: 100;
   cursor: none !important;
}


.scroll-link span {
    color: #FFFFF0;
    font-weight: 200;
}



/* rotate first span */
.navbar-dark .navbar-toggler[aria-expanded="true"] span:first-of-type {
    transform: rotate(45deg) translate(6px, 6px);

}

/* hide second span */
.navbar-dark .navbar-toggler[aria-expanded="true"] span:nth-of-type(2) {
    opacity: 0;

}

/* rotate third span */
.navbar-dark .navbar-toggler[aria-expanded="true"] span:last-of-type {
    transform: rotate(-45deg) translate(5px, -5px);

}

.navbar-dark .navbar-toggler[aria-expanded="false"] span {
    transform: none;
    opacity: 1;
}




.navbar button:focus {
    outline: none;
    cursor: none;
    /*    cursor: none !important;*/
}


.navbar-dark .navbar-toggler {
    border: transparent;
    pointer-events: all !important;
    z-index: 3;
    transition: 20s;
    /*    cursor: none !important;*/

}

.navbar-collapse .collapse .show {
    transition: 1s;
    animation-duration: 1s;
    max-width: 100%;
    /*    cursor: none !important;*/

}





.panel-title {
    cursor: pointer;
}

.theory {
    margin-bottom: 10vh;
}

.hashtag {
    font-size: 12px;
    font-style: italic;

}

.panel-body {
    border-bottom: 1px solid #FFFFF0;
    margin-top: 5vh;
    padding-left: 2vw;
}




/*
.cards-intro h2:hover {
    background-color: #FFFFF0;
    color: #FFFFF0;
}

*/

.cards-intro h2 {
    font-size: 40px;
    font-weight: 800;
    padding-bottom: 1vh;
}


.karten .col {
    flex-grow: 0 !important;
}


.text-muted {
    color: #FFFFF0 !important;
}

.panel-title > a,
.panel-title > a:active {
    display: block;
    color: #FFFFF0;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 1px;
    word-spacing: 3px;
    text-decoration: none;
    padding-bottom: 10px;
    cursor: none;
}

.panel-group {
    margin-left: 8vw;
}

.card-body:hover{
    transform: none!important;
}

.card {
    border-color:#FFFFF0;
    border: 1px solid #FFFFF0 !important;
    background-color: transparent;
    margin-bottom: 2vh;
}

.karten .card {
    margin-bottom: 5vh;
    color: #FFFFF0;
    border-radius: 1.25rem;
}

.source {
    color: #FFFFF0;
    text-align: left;
    font-size: 10px;
    margin-top: 2vh;
    max-width: 80%;
}




.button {
    color: #FFFFF0;
    border-radius: 100px;
    text-decoration: none;
    transition: padding 1.1s ease;

}


.arrow {
    color: #FFFFF0;
    opacity: 0;
    transition: opacity .3s ease;
}


.arrow2 {
    color: #FFFFF0;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}


.button:hover {
    padding-right: 1.5em;

}

.button:hover .arrow {
    opacity: 1;

}


@media (min-width: 520px) {

    .cards-intro {
        max-width: 70%;
    }
}

@media (min-width: 1030px) {

    .cards-intro {
        max-width: 50%;
    }
}






/* Individualisierung Karten - aufsteigend */


/* 1  aida */
.zwei h5 {
    font-size: 100px;
    color: #FFFFF0;

}



.zwei .card-title {
    margin-bottom: -1rem;
}

.zwei h6 {
    font-size: 25px;
}

.zwei p {
    font-weight: 500;
    margin-left: 40%;
    font-size: 14px;
}

.zwei .card-text span {
    font-weight: 800;
    font-size: 15px;
}

/* 2 assure */

.eins h5 {
    font-size: 50px;
    font-family: 'Londrina Outline', cursive;
    color: #FFFFF0;
    font-weight: 700;
}

.eins h6 {
    font-size: 40px;
    font-weight: 900;
}

/* 3 four pillars of flipped learning */

.drei .card-title {
    font-size: 30px;
    letter-spacing: 0.1em;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #FFFFF0;
    text-shadow:
        8px 8px #FFFFF0,
        20px 20px #556B2F;
}

.drei .card {
    background-color: #808000;
}

.drei p {
    font-size: 16px;
    font-weight: 100;
    margin-top: 6vh;
    color: #FFFFF0
}



/* 4  arcs model */


.four h5 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 4vh;
    text-transform: uppercase;


}

.four h6 {
    font-size: 15px;
    font-weight: 200;
}

.four p {
    font-size: 13px;
    font-weight: 800;
    margin-top: 2vh;
    border-left: 3px solid #FFFFF0;
    margin-left: 10vw;
    padding-left: 1vw;
}




/* 5  addie model */




.five h5 {
    font-size: 35px;
    text-decoration: underline;
    font-weight: 700;
}

.five h6 {
    font-size: 20px;
}

.five p {
    font-size: 14px;
    text-decoration: overline 2px;
    line-height: 30px;
    margin-top: 5vh;

}


.card-text span {
    font-weight: 700;
    font-size: 18px;
}

/* 6  nine events of instruction */


.six .card {
    background-size: 20px 20px;
    background-image: repeating-linear-gradient(90deg, #556B2F, #556B2F 1px, #FFFFF0 0, #FFFFF0 20%);
    background-position: 0 0, 30px 30px;
    background-origin: padding-box;
    background-clip: border-box;
    background-size: 60px 60px;



}


.six h5 {
    font-size: 40px;
    padding: 1vw;
    font-weight: 800;
    background-color: #FFFFF0;
    color: #556B2F;
}

.six li {
    font-weight: 400;
    padding: 0.5vw;
    font-size: 15px !important;
    background-color: #FFFFF0;
    color: #556B2F;
    list-style: lower-alpha;
}

/* 7   layer cake of design </h2>
*/

.seven .card {
    border: none;
}

.seven h5 {
    text-align: right;
    font-size: 50px;
    border-top: 5px solid #FFFFF0;
    font-weight: 800;
}

.seven p {
    text-align: right;
    padding-bottom: 2vh;
    padding-left: 4vw;
    padding-top: 2vh;
    padding-bottom: 5vh;
    text-shadow: 0 1px 0 #FFFFF0;
    border-right: 5px solid #FFFFF0;
    padding-right: 2vw;
}



.cakeOne {
    background-image: linear-gradient(45deg, #FFDB58, 18%, #808000 10%);
    border-radius: 1.25rem;
}

.cakeTwo {
    background-image: linear-gradient(45deg, #FFDB58, 15%, #808000 10%);
    border-radius: 1.25rem;
}

.cakeThree {
    background-image: linear-gradient(45deg, #FFDB58, 12%, #808000 10%);
    border-radius: 1.25rem;
}

/* 8 multimedia principles */


.eight p {
    font-weight: 300;
    font-size: 16px;
    padding-top: 80%;
    padding-bottom: 5%;
    padding-left: 5vw;
    text-align: right;
}


.cover {
    color: #FFFFF0;
    width: 70%;
    margin: 0;
    padding: 0 0 0 3%;
    float: left;
    display: block;
}



.stack {
    text-transform: uppercase;
    font-size: 4em;
    line-height: 0.7em;
    font-weight: 800;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: 'Times New Roman', Times, serif;
}

/* 9 player types */

.bartel .col {
    flex-grow: 0;
}

.cardhexad {
    width: 350px;
    height: 250px;
    color: #556B2F;
    background-color: #FFFFF0;
    background: linear-gradient(rgb(244, 244, 244) rgb(244, 244, 244));
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin-bottom: 2vh;
    border: 1px solid #FFFFF0;

}

.cardhexad h2 {
    text-align: center;

}

.center h2 {
    writing-mode: vertical-lr;
    font-size: 30px;
    font-weight: bold;
    padding-top: 2vh;
    color: #FFFFF0;
}

.cardhexad .additional {
    position: absolute;
    width: 25%;
    height: 100%;
    background: linear-gradient(#808000, #808000);
    transition: width 0.4s;
    overflow: hidden;
    z-index: 2;
}

.cardhexad:hover .additional {
    width: 100%;
    border-radius: 0 5px 5px 0;
}

.cardhexad .additional .user-card {
    width: 150px;
    height: 100%;
    position: relative;
    float: left;
}

.cardhexad .additional .user-card::after {
    content: "";
    display: block;
    position: absolute;
    top: 10%;
    right: -2px;
    height: 80%;
    border-left: 2px solid rgba(0, 0, 0, 0.025);

}

.cardhexad .additional .more-info {
    color: #FFFFF0;
    width: 300px;
    float: left;
    position: absolute;
    left: 90px;
    height: 100%;
    padding-top: 2vh;
    font-size: 13px;
}

.cardhexad .additional .coords {
    margin: 0 1rem;
    padding-right: 30%;
    color: #FFFFF0;
    font-size: 16px;
}

.cardhexad .additional .coords span + span {
    float: right;

}

.cardhexad .general {
    width: 300px;
    height: 100%;
    position: absolute;
    margin: 0;
    right: 0;
    z-index: 1;
    box-sizing: border-box;
    padding: 0 1rem 1rem;
}

.cardhexad .general .more {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-size: 20px;
    font-weight: bold;
}


/* 10 east */


.ten .card-title {
    font-size: 50px;
    margin-bottom: 5vh;

}

.panel-group .quickfix {
    margin-left: 0vw;
}


.ten .card-title span {
    font-size: 90px;
    border-right: 2px solid #FFFFF0;
    padding-right: 10px;
    font-weight: 900;
}

.ten h6 {
    font-size: 18px;
    font-weight: 400;
}

/* 11 larning the term */


.eleven .card-body {
    background-color: #808000;
    border-radius: 1.25rem;
    border-radius: 1.25rem;
    background:linear-gradient(180deg, #808000 45%, #FFFFF0 0%);
    background:-webkit-linear-gradient(deg, #808000 45%, #FFFFF0 0%);
    background:-moz-linear-gradient(deg, #808000 25%, #FFFFF0 0%);

}

.youOne {
    font-size: 60px;
    color: #FFFFF0 !important;
}

.youTwo {
    font-size: 50px;
    color: #FFFFF0;
}

.youTwo span {
    line-height: 1em;
    font-weight: bold;
}


.eleven h5 {
    margin-top: 4vh;
    color: #556B2F;
}


/* 12 modern ressourcedesign */


.twelve .card-body {
    text-align: center;
    border: 1px solid #FFFFF0;
    border-radius: 1.25rem;
}

.twelve h5 {
    font-size: 60px;
    font-weight: 900;
}

.twelve h6 {
    font-size: 20px;
    margin-top: 15%;
    text-decoration: overline;
    padding-top: 2vh;

}


/* 13 five ingredients */

.thirteen .top {
    margin-bottom: 2vh;
    margin-top: 2vh;
    max-width: 50%;
}

.thirteen h5 {
    font-size: 45px;
    font-weight: 800;
}

.thirteen h6 {
    color: #FFFFF0;
    margin-top: 3vh;
    font-size: 20px;
    text-decoration: underline;
}

@media (min-width: 520px) {

    .thirteen .top {
        width: 10vw;
    }
}

@media (min-width: 1030px) {

    .thirteen .top {
        width: 7vw;
    }
}

/* 14 cognitive load */
.fourteen h6 {
    margin-top: 5vh;
    font-size: 25px;
    font-weight: 800;
    width: 80%;
}

.fourteen p {
    margin-top: 1vh;
    font-size: 15px;
    font-weight: 500;
    width: 65%;
}

.fourteen .card-title {
    font-size: 30px;
    font-weight: 900;
    padding: 1vw;
    border: 7px solid #FFFFF0;
    box-shadow: 10px 10px 0px 0px #FFFFF0;
    -webkit-box-shadow: 10px 10px 0px 0px #FFFFF0;
    -moz-box-shadow:10px 10px 0px 0px #FFFFF0;
}




/* 15 elements of blended learning */









.fifteen .card-title {
    text-align: center;
    font-size: 38px;
    font-weight: 900;
    margin-top: 20vh;
    background-color: #FFFFF0;
    color: #556B2F;
    margin-left: -1.25rem !important;
    margin-right: -1.25rem !important;
    margin-bottom: -1.25rem !important;
    border-bottom-left-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
    padding: 2vh;
    padding-top: 4vh;

}


.fifteen .card-text {
    text-align: center;
    font-weight: 300;
    font-size: 15px;
    background-color: #FFFFF0;
    color: #556B2F;
    margin-left: -1.25rem !important;
    margin-right: -1.25rem !important;
    margin-bottom: -1.25rem !important;

    border-bottom-left-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
    padding: 3vh;

}


.fifteen .card {
    background-image: url(../media/svg/Colored%20Shapes.svg);
    background-repeat: repeat;
    background-size: 250px;
    border: none;

}




/* 16 feasp model*/


.sixteen .card {
    background: #FFFFF0;
    background: linear-gradient(90deg, #808000 60%, #FFFFF0 0%);
    background: -webkit-linear-gradient(90deg, #808000 60%, #FFFFF0 0%);
    background: -moz-linear-gradient(90deg, #808000 60%, #FFFFF0 0%);
    border: none;

}

.sixteen .card-title {
    border-radius: 120px;
    width: 140px;
    margin-top: 3vh;
    height: 140px;
    text-align: center;
    font-size: 20px;
    padding-top: 15%;
    margin-left: 25%;
    background-color: #FFFFF0;
    color: #556B2F;
    font-weight: 900;
    box-shadow: inset 5px -5px 10px #8a8a8a,
        inset -5px 5px 10px #FFFFF0;
}


.sixteen h6 {
    font-size: 20px;
    font-weight: 300;
    text-align: center;
    line-height: 1.3;
    padding: 2vh;
    color: #FFFFF0 !important;

}

@media (min-width: 520px) {

    .sixteen .card-title {
        font-size: 22px;
        padding-top: 10%;
    }
}


@media (min-width: 1030px) {

    .sixteen .card-title {
        font-size: 20px;
        padding-top: 15%;
    }
}

/* 17  didactical questions*/

.seventeen span {
    font-size: 70px;
    font-family: 'Faster One', cursive;
}

.seventeen p,
h5 {
    font-weight: 100;
    font-size: 30px;

}

.seventeen .card-body {
    background-color: #808000;
    color: #FFFFF0;
    border-radius: 1.25rem;
}


/* 18 habit loop */

.eighteen .card-body {
    border-right: 100px solid #FFFFF0;
    border-radius: 1.25rem;


}

.eighteen .card {
    border: none;
}

.eighteen p {
    font-size: 25px;
    font-weight: 700;
    width: 90%;
    text-align: right;
    text-decoration: overline;
}


.eighteen h6 {
    font-size: 40px;
    font-weight: 800;
    width: 130%;
    margin-bottom: 4vh;
}

.eighteen h5 {
    display: inline-block;
    font-size: 60px;
    font-weight: 700;
    line-height: 0.9;

    /*
    background: radial-gradient(circle farthest-corner at center center,
            #FFDB58,
            #111) no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
}


/* 19 four level of evaluation */

.nineteen h6 {
    font-size: 22px;
    margin-top: 5vh;
}

.nineteen h5 {
    font-size: 40px;
    font-weight: 800;
    line-height: 8vh;
    color: #FFFFF0;
}

.nineteen span {
    background-color: #808000;
    padding: 0.5vw;
    color: #FFFFF0;
}


/*
.LvlOne h5:after {
    content: "level 1";
    position: absolute;
    left: 20px;
    top: 17px;
    color: #FFFFF0;
}

.LvlTwo h5:after {
    content: "level 2";
    position: absolute;
    left: 20px;
    top: 17px;
    color: #FFFFF0;
}

.LvlThree h5:after {
    content: "level 3";
    position: absolute;
    left: 20px;
    top: 17px;
    color: #FFFFF0;
}

.LvlFour h5:after {
    content: "level 3";
    position: absolute;
    left: 20px;
    top: 17px;
    color: #FFFFF0;
}

*/

/* 20 #FFFFF0; & #FFFFF0 hat */



.twenty h5 {
    font-size: 60px;
    font-weight: 700;
}

.twenty h6 {
    font-size: 30px;
    font-weight: bold;
    color: #FFFFF0 !important;
}

.twenty p {
    font-size: 14px;
    margin-top: 2vh;
    font-weight: 500;
}

.twenty {
    text-align: center;
}

.twenty .hat9 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: 10vh;
    margin-bottom: 3vh;
}


/* 21 left and right brain */

.twentyone {
    border: none;
}

.twentyone .left {
    background-image: url(../media/svg/rightbrain.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 0px bottom;
    text-align: right;

}

.twentyone .right {
    background-image: url(../media/svg/leftbrain.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right 0px bottom;
    text-align: left;

}

.twentyone h5 {
    font-size: 40px;
    font-weight: 900;
}



.twentyone p {
    font-size: 15px;
}

.twentyone p {
    font-size: 15px;
}




/* 22 four principles of adult learning */

.twentytwo h5 {
    font-size: 35px;
    font-weight: 800;
}

.twentytwo .hat1 {

    margin-left: auto;
    margin-right: auto;
    width: 30%;
    margin-bottom: 3vh;
}


.twentytwo .card-subtitle {
    width: 70%;
    margin-top: 2vh;

}

/* 23 four d's of learning */

.twentythree p {
    font-size: 20px;
    font-weight: 200;
    color: #FFFFF0;
    margin-bottom: 8vh;
}

.twentythree h5 {
    font-size: 40px;
    font-weight: 800;
    color: #FFFFF0;
}

.twentythree h6 {
    font-size: 20px;
    padding-top: 3vh;
    font-weight: 500;
    color: #FFFFF0;
}

.twentythree .card {
    border: 0px !important;
    margin-bottom: 5vh;
}

.twentythree .card-body {
    background-color: #808000 !important;
    border-radius: 1.25rem;

}

.twentythree .text-muted {
    color: #FFFFF0 !important;
}

/* 24 learning analytics */

.twentyfour .card-title {
    font-size: 30px;
    font-weight: 900;
    text-align: center;
    color: #FFFFF0;
}

.twentyfour h6 {
    font-size: 20px;
    font-weight: 300;
    color: #556B2F;
    padding-top: 10%;
    padding-bottom: 50%;
    border-radius: 0.5rem;
    text-align: center;
}



.twentyfour .card-body {
    background-image: url(../media/svg/);
    border-radius: 1.25rem;
    background-repeat: no-repeat;
    background-size: fit;
    background-position: center;
}

.twentyfour .card {
    background: linear-gradient(360deg, #808000 44%, #FFFFF0 0%);
    border: none;

}

/* 25 3 types of feedback / loops */

.twentyfive h1 {
    font-size: 40px;
    margin-bottom: 1vh;
    margin-top: 5vh;
    border-left: 5px solid #FFFFF0;
    padding-left: 1vw;
    color:#FFFFF0;;
    font-weight: 900;
}

.twentyfive h2 {
    border-top: 5px solid #FFFFF0;
    padding-left: 1vw;
    margin-top: 1vh;
    padding-top: 1vh;
    color:#FFFFF0;;
}


.twentyfive p {
    font-size: 15px;
    margin-top: 3vh;
    padding-left: 1vw;
    color:#FFFFF0;
    line-height: 2vh;
    font-family: 'IBM Plex Serif', serif;
    font-style: italic;

}

.twentyfive .col {
    flex-grow: 0 !important;
}

.twentyfive .card {
    text-align: left;
    border-radius: 1.25rem;
    margin-top: 3vh;
}



/* 26 learning experience design */


.twentysix h5 {
    font-size: 30px;
    font-weight: 900;
    color: #556B2F;
}

.twentysix h6 {
    font-size: 15px;
    padding-top: 5vh;
    font-weight: 300;
    color: #FFFFF0 !important;

}

.twentysix .card {
    border: 0px !important;
}

.twentysix .card-body {
    border-radius: 1.25rem;
    background: linear-gradient(0deg, #808000 40%, #FFFFF0 0%);
}

.twentysix .card-text span {
    font-weight: 200;
    font-size: 50px;
    color: #556B2F;
}


/* 27 multi store sctructural model  */



.twentyseven h5 {
    font-size: 35px;
    font-weight: 600;
    color: #FFFFF0;
}

.twentyseven h6 {
    font-size: 20px;
    padding-top: 3vh;
    font-weight: 200;
    color: #FFFFF0;
    border-left: 4px solid #FFFFF0;
    padding-left: 1vw;
    margin-top: 2vh;
    border-style: double;
    padding: 1vw;
}

.twentyseven .card {
    border: 0px !important;

}

.twentyseven .card-body {
    background-color: #808000!important;
    border-radius: 1.25rem;

}

.twentyseven .text-muted {
    color: #FFFFF0 !important;
}



/* 28 implicit and explicit nowledge */


.twentyeight h6 {
    color: #FFFFF0 !important;
    margin-top: 4vh;
    font-weight: 900;
    margin-left: 5vw;
    text-align: right;
}

.twentyeight h5 {
    font-size: 50px;
    font-weight: 900;
    line-height: 8vh;

}

.inex {
    border: 5px solid #FFFFF0;
    border-radius: 18%;
    padding-left: 1vh;
    padding-right: 1vh;
    margin-right: 0.5vw;
}

.inex2 {
    font-weight: 200;
    font-size: 50px;
    text-align: right;
}

/* 29 ccaf design model */



.twentynine h5 {
    font-size: 40px;
    font-weight: 900;
    text-align: left;
}


.twentynine h6 {
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    color: #FFFFF0 !important;
    text-align: left;
    margin-top: 15vh;
    color: #FFFFF0 !important;
    text-align: left;
}

.twentynine .card {
    border: 0px !important;
}

.twentynine .card-body {
    border-radius: 1.25rem;
    background-repeat: no-repeat;
    background-size: cover;
}



/* 30  revised taxonomy part 1   

.dot {

}*/

.thirty .card-title {
    font-size: 50px;
    font-weight: 900;
    margin-bottom: 1vh;
    font-family: 'Anton', sans-serif;

}


.dot {
    font-size: 25px;
    margin-left: 1.5vw;
    margin-top: 2vh;
    text-align: left;
    font-family: 'Anton', sans-serif;
    font-weight: 900;

}

.thirty .card {
    border: 6px solid #FFFFF0;

}

.thirty p {
    font-size: 18px;
    border-top: 6px solid #FFFFF0;
    padding-top: 2vh;
    font-weight: 500;
    margin-right: 2vw;

}



/* Octalysis OnBoarding User Journey */



.thirtyone h5 {
    font-size: 60px;
    font-weight: 900;
    line-height: .8em;
    padding: 3vh;
}


.thirtyone .card-body span {
    font-weight: 200;
    font-size: 40px;
}

.thirtyone h4 {
    text-align: center;
    transform: rotate(300grad);
}

.thirtyone h6 {
    font-size: 15px;
    font-weight: 300;
    text-align: left;
    color: #FFFFF0;
    text-align: left;
    padding-left: 2vw;
    padding-right: 2vw;
}


/* 32 SAM */

.thirtytwo h1 {
    font-size: 30px;
    margin-bottom: 1vh;
    margin-top: 2vh;
    padding-left: 1vw;
    color: #556B2F;;
    font-weight: 900;
}

.thirtytwo h2 {
    font-size: 20px;
    padding-left: 1vw;
    text-align: left;
    color: #556B2F;;
    font-family: 'IBM Plex Serif', serif;
    font-style: italic;
    font-weight: 100;
}


.thirtytwo p {
    font-size: 20px;
    padding-left: 1vw;
    margin-left: 1vw;;
    margin-top: 5vh;
    border-left: 1px solid #556B2F;
    color: #556B2F;;
}

.thirtytwo .col {
    flex-grow: 0 !important;
    
  
}

.thirtytwo .col .S {

    border-radius: 1.25rem;
    background-color: #FFFFF0;
    background-image: url(../media/img/S.jpeg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}

.thirtytwo .col .A {

    border-radius: 1.25rem;
    background-color: #FFFFF0;
    background-image: url(../media/img/A.jpeg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}

.thirtytwo .col .M {

    border-radius: 1.25rem;
    background-color: #FFFFF0;
    background-image: url(../media/img/M.jpeg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    
}


/* Achievement Badge Styles */
.achievement-badge {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  background: transparent;
  color: #FFFFF0;
  padding: 20px 25px;
  transform: translateY(150%);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  max-width: 300px;
  cursor: none; /* passend zu deinem Cursor-Design */
}

.achievement-badge.show {
  transform: translateY(0);
  opacity: 1;
}

.badge-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.badge-content p {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
}

.badge-close {
  background: transparent;
  border: none;
  color: #FFFFF0;
  font-size: 24px;
  font-weight: bold;
  cursor: none;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.badge-close:hover {
  transform: scale(1.2);
}

/* Animation für mehrere Badges gleichzeitig */
.achievement-badge:nth-child(2) {
  bottom: 110px; /* Stapelt sich nach oben */
}

.achievement-badge:nth-child(3) {
  bottom: 190px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .achievement-badge {
    bottom: 20px;
    right: 20px;
    left: 20px;
    max-width: none;
  }
  
  .badge-content p {
    font-size: 14px;
  }
}

/* ==========================================================================
   MOBILE MEDIA QUERIES
   ========================================================================== */

@media (max-width: 768px) {

    #navbarNav {
        margin-top: 0;
    }

    .navbar-collapse.show {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #556B2F;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 20;
        overflow-y: auto;
    }

    .navbar-collapse.show .navbar-nav {
        margin-left: 0 !important;
        width: 100%;
    }

    .navbar-dark .navbar-toggler {
        position: relative;
        z-index: 30;
    }

    .nav-item {
        font-size: clamp(32px, 9vw, 60px);
        line-height: 1.4;
    }

    .panel-group {
        margin-left: 4vw;
        margin-right: 4vw;
    }

    .cards-intro {
        max-width: 100% !important;
    }

    .cards-intro h2 {
        font-size: clamp(24px, 7vw, 40px);
    }

    /* cards: force every hand-tuned card to full width on mobile,
       regardless of the inline width (20rem, 25rem, 30rem, 40em, ...) */
    .card {
        width: 100% !important;
        max-width: 100%;
    }

    .col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* cap the many hand-tuned font sizes so long headlines/labels
       wrap instead of overflowing the now full-width cards */
    .card h1 {
        font-size: clamp(24px, 8vw, 40px) !important;
    }

    .card h2 {
        font-size: clamp(18px, 6vw, 28px) !important;
    }

    .card h5,
    .card .card-title {
        font-size: clamp(20px, 7vw, 34px) !important;
        line-height: 1.2 !important;
    }

    .card h5 span {
        font-size: clamp(14px, 4vw, 20px) !important;
    }

    .card h6 {
        font-size: clamp(14px, 4vw, 18px) !important;
        width: auto !important;
        margin-left: 0 !important;
    }

    .card p,
    .card li {
        font-size: clamp(13px, 3.6vw, 16px) !important;
        margin-left: 0 !important;
    }

    .eighteen .card-body {
        border-right-width: 20px;
    }

    .zwei .card-title {
        margin-bottom: 0.1em !important;
    }

    .zwei p {
        margin-left: 0 !important;
    }

    .cardhexad {
        max-width: 100%;
    }

    .stack {
        font-size: 2.4em;
    }

    .more-links {
        width: 100%;
        margin: 10vh 0;
    }

    .marquee2 {
        margin-left: 0;
        font-size: 20px;
    }
}