/* [] General Styles */


/* [] Fonts */

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/Noto_Sans/NotoSans-Regular.ttf') format('truetype') ;
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/Noto_Sans/NotoSans-BlackItalic.ttf') format('truetype') ;
    font-style: italic;
    font-weight: 900;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/Noto_Serif/NotoSerif-VariableFont_wdth,wght.ttf') format('truetype') ;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/Noto_Sans_KR/NotoSansKR-Regular.otf');
    font-style: normal;
    font-weight: 400;  
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/Noto_Sans_KR/NotoSansKR-Medium.otf');
    font-style: normal;
    font-weight: 500;  
}



@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/Noto_Sans_KR/NotoSansKR-Black.otf');
    font-style: normal;
    font-weight: 900;  
}


body {  
    display: flex;
    min-height: 100vh;
    margin: 0 auto;
    flex-direction: column;
    /*margin: 0;*/
    padding: 0;
    /*box-sizing: border-box;*/
    background-color: #fffeee;
    font-family: Noto Sans, sans-serif;
}

section {
    height: 100vh;
    min-height: 5em;
    flex: 1;
  }

  .index-background {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    object-fit: cover;
    /*background-image: url('/media/tabmedia/hanguk-bg.webp');
    background-repeat: repeat;
    background-position: 50%;*/
    z-index:-1
}


/* [] Standard HTML Elements */

h1 {
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 800;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 0.5em;
    color: #fa618d;
}

h2 {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 0.5em;
    color: #484c6e;
}

h3 {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 0.8em;
    color: #484c6e;
}

h4 {
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 800;
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 0.5em;
    color: #fb8f75;
}

h5 {
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 800;
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 0.5em;
    color: #62b2a9;
}

p {
    font-family: 'Noto Sans';
    font-size: 1em;
    margin-top: 0;
    margin-bottom: 0.5em;
    color: #484c6e;
}

hr {
    width: 100%;
    border-top: 1px dashed #484c6e;
    border-left: none;
    border-bottom: none;
    border-right: none;
    margin: 0.25em 1px 0.25em 1px;
}

span {
    color: #61b2a9;  
}

/* [] Header / Main navigation */

/************* Navbar (orig) **********************/

.navbar {
    display: flex; /*using flexbox*/
    justify-content: space-between;
    flex-wrap: wrap;
    height: 60px;
    align-items: center;
    background-color: #484c6e;
    /*color: #fdf3bb;*/
    color: #fffeef;
    position: sticky;
    top: 0;
    z-index: 10;
}


.navbar-title {
    font-size: 1.5em;
    margin: .4em;
    background-color: #484c6e;  
}

.navbar-title a{
    color: #fffeef;
    text-decoration: none;
    background-color: #484c6e; 
    padding-top: 0px;
}

.navbar-title a:hover {
    color: #fa618d;
}

.navbar-menu ul {
    margin: 0;
    padding: 0;
    display: flex;
}

.navbar-menu li {
    list-style: none;
    background-color: #484c6e; 
}

.navbar-menu li a {
    text-decoration: none;
    color: #fffeef;
    padding: 1em;
    display: block;
    background-color: #484c6e;
}

.navbar-menu li a:hover {
    color: #fa618d;
}

.navbar-hamburger {
    position: absolute;
    /*top: 1em;*/
    top: .9em;
    right: .8em;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.navbar-hamburger .ham-menu-bar {
    height: 3px;
    width: 100%;
    background-color: #fffeef;
    border-radius: 10px;
}

.navbar-logo {
        
    box-sizing: border-box;
    width: 35px;
    height: 35px;
    display: inline-flex;
    /*border: none;
    cursor: pointer;*/
    /*display: flex;
    width: 35px;
    height: 35px;
    padding-bottom: 0px;*/
    /*text-align: center;
    text-decoration: none;*/
    /*background-image: url('/static/icons/hangukberlin-logo-100x100.webp');
    background-size: cover;
    background-position: 75%;*/
    }

    .navbar-logo img {
        
    width: 35px;
    height: 35px;
    padding-top: 7px;
    /*border: none;
    cursor: pointer;*/
    /*display: flex;
    width: 35px;
    height: 35px;
    padding-bottom: 0px;*/
    /*text-align: center;
    text-decoration: none;*/
    /*background-image: url('/static/icons/hangukberlin-logo-100x100.webp');
    background-size: cover;
    background-position: 75%;*/
    }


.navbar-profile {
        
    border: none;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    cursor: pointer;
    display: inline-block;
    width: 17px;
    height: 17px;
    padding: 5px 5px 0px 5px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    text-decoration: none;
    background-image: url('/static/icons/account_circle_white.png');
    background-size: cover;
    background-position: 50%;
    }

.navbar-profile:hover {
    border: none;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    cursor: pointer;
    display: inline-block;
    width: 17px;
    height: 17px;
    padding: 5px 5px 0px 5px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    text-decoration: none;
    background-image: url('/static/icons/account_circle_red.png');
    background-size: cover;
    background-position: 50%;
    }


/* Einstellungen fuers iPhone */

@media (max-width: 600px) {

    .navbar-hamburger {
        display: flex;
    }

    .navbar-menu {
       display: none;
       width: 100%;
    }

    .navbar-menu ul {
        flex-direction: column;
        width: 100%;
        background-color: #484c6e;
    }

    .navbar-menu li {
        text-align: center;
    }

    .navbar-menu li a {
        padding: .5rem 1rem;
    }

    .navbar-menu.active {
        display: flex;
        width: 100%;
    }

}



/************* Navbar26 (Update 2026)**********************/

.navbar26 {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    height: 50px;
    background-color: #484c6e;
    color: #fffeef;
    position: sticky;
    top: 0;
    z-index: 10;
}

.navbar26-con1 {
    display: flex;
}

.navbar26-con2 {
    display: flex;
    justify-content: space-between;
}
.navbar26-logo {
    width: 45px;
    height: 45px;
    padding: 5px 6px 0px 6px;
}

.navbar26-title {
    font-size: 1.5em;
    display: inline-block;
    padding-top: 8px;
}

.navbar26-title a{
    color: #fffeef;
    text-decoration: none;
}

.navbar26-title a:hover {
    color: #fa618d;
}

.navbar26-kapitel-item-yellow {  
    border: none;
    display: inline-block;
    background-color: #fdf3bb;
    border-radius: 15px;
    color: #484c6e;
    margin: 13px 6px 0px 6px;
    height: 29px;
    width: 29px;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}

.navbar26-kapitel-item-yellow a {  
    display: inline-block;
    color: #484c6e;
    font-weight: 500;
    font-size: 1.2em;
    text-align: center;
    text-decoration: none;
}

.navbar26-kapitel-item-yellow a:hover {  
    color: #fa618d;;
}

.navbar26-uebung-item-blue {  
    border: none;
    display: inline-block;
    background-color: #95BCFF;
    border-radius: 15px;
    color: #484c6e;
    margin: 13px 6px 0px 6px;
    height: 29px;
    width: 29px;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}

.navbar26-uebung-item-blue a {  
    display: inline-block;
    color: #484c6e;
    font-weight: 500;
    font-size: 1.2em;
    text-align: center;
    text-decoration: none;
}

.navbar26-uebung-item-blue a:hover {  
    color: #fa618d;;
}

.navbar26_box_con {
    /*background-color: transparent;*/
    background-color: #95BCFF;
    border-radius: 10px;
    border: #95BCFF solid 2px;
    cursor: pointer;
    width: 110px;
    display: flex;
    flex-wrap: nowrap;
    color: #fffeef;
    font-size: 1rem;
    padding: 0px 5px 0px 5px;
    margin: 12px 5px 10px 5px;
    text-align: left;
    text-decoration: none;

}

.navbar26_box_con a{
    color: #484c6e;
    text-align: center;
    text-decoration: none;
}

.navbar26_box_con-count{  
    border: none;
    background-color: #fffeef;
    border-radius: 5px;
    color: #484c6e;
    height: auto;
    width: auto;
    margin-top: 5px;
    margin-right: 6px;
    margin-bottom: 2px;
    padding: 0px 2px 0px 2px;
    font-weight: 500;
    font-size: 0.7rem;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}

.navbar26-hamburger {
    position: absolute;
    top: 15px;
    right: 14px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.navbar26-hamburger .navbar26-bar {
    height: 3px;
    width: 100%;
    background-color: #fffeef;
    border-radius: 10px;
}

.navbar26-hamburger .navbar26-bar:hover {
    background-color: #fa618d;
}


.navbar26-menu {
    display: flex;
} 


.navbar26-menu a {
    text-decoration: none;
    color: #fffeef;
    padding: 16px 15px 0px 15px;
}

.navbar26-menu a:hover {
    color: #fa618d;
}


.navbar26-profile {
        
    border: none;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    cursor: pointer;
    display: inline-block;
    width: 17px;
    height: 17px;
    padding: 5px 5px 0px 5px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    text-decoration: none;
    background-image: url('/static/icons/account_circle_white.png');
    background-size: cover;
    background-position: 50%;
    }

.navbar26-profile:hover {
    border: none;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    cursor: pointer;
    display: inline-block;
    width: 17px;
    height: 17px;
    padding: 5px 5px 0px 5px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    text-decoration: none;
    background-image: url('/static/icons/account_circle_red.png');
    background-size: cover;
    background-position: 50%;
    }

.navbar26-kursmenu {
       display: none;  
    }

.navbar26-kursmenu.responsive {
        position: absolute;
        top: 0px;
        left: 0px;
        display: flex;
        flex-direction: row;
        padding: 5px 5px 5px 5px;
        background-color: #fdf3bb;
        opacity: 90%;
        margin-top: 55px;
        margin-left: 5px;
        width: 25%;
        border-radius: 10px;
        flex-wrap: wrap;   
    }

    .navbar26-kursmenu.responsive a {
        z-index: 11;
    }


.navbar26-kursmenu.responsive .kapitel-bar-item-blue {  
    border: 2px solid #484c6e;
    background-color: #484c6e;
    border-radius: 15px;
    color: #fdf3bb;
    height: 24px;
    width: 24px;
    font-weight: 500;
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}

.navbar26-kursmenu.responsive .kapitel-bar-item-yellow {  
    border: 2px solid #484c6e;
    background-color: #fdf3bb;
    border-radius: 15px;
    color: #484c6e;
    height: 24px;
    width: 24px;
    font-weight: 500;
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}

.navbar26-uebmenu {
       display: none;  
    }

.navbar26-uebmenu.responsive {
        position: absolute;
        top: 0px;
        left: 0px;
        display: flex;
        flex-direction: row;
        padding: 5px 5px 5px 5px;
        background-color: #95BCFF;
        opacity: 90%;
        margin-top: 55px;
        margin-left: 5px;
        width: 25%;
        border-radius: 10px;
        flex-wrap: wrap;   
    }

.navbar26-uebmenu.responsive a {
        z-index: 11;
    }


.navbar26-uebmenu.responsive .ueb-bar-item-blue {  
    border: 2px solid #a1ffda;
    background-color: #95BCFF;
    border-radius: 15px;
    color: #fdf3bb;
    height: 24px;
    width: 24px;
    font-weight: 500;
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}

.navbar26-uebmenu.responsive .ueb-bar-item-green {  
    border: 2px solid #a1ffda;
    background-color: #a1ffda;
    border-radius: 15px;
    color: #484c6e;
    height: 24px;
    width: 24px;
    font-weight: 500;
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}



/* Einstellungen fuers iPhone */

@media (max-width: 600px) {

    .navbar26-hamburger {
        display: flex;
    }

    .navbar26-menu {
       display: none;  
    }


}

@media (max-width: 600px) {


    .navbar26-menu.responsive {
        position: absolute;
        top: 0px;
        right: 0px;
        display: flex;
        flex-direction: column;
        background-color: #484c6e;
        opacity: 90%;
        margin-top: 55px;
        margin-right: 5px;
        text-align: right;
        border-radius: 10px;
        
    }

    .navbar26-menu.responsive a {
        padding: 7px 14px;
        z-index: 11;
    }



}


/************* Übung Footer 26 **********************/

.ueb_white_footer26 {
    background-color: #fffeef;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    height: 5px;
    width: 100%;
    bottom: 40px;
    position: sticky;
    z-index: 20;
  }

.ueb_footer26 {
    background-color: #95BCFF;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    bottom: 45px;
    margin-right: 5px;
    margin-left: 5px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    position: sticky;
    z-index: 20;
  }

.ueb_footer26 a{
    /*color: #484c6e;
    text-align: center;*/
    text-decoration: none;
}

.ueb_footer26-con {
    background-color: none;
    opacity: 100%;
    color: #a1ffda;
    display: flex;
    flex-direction: row;
    margin: 0px 12px 12px 12px;
    font-family: Noto Sans;
    font-size: 1.5rem; 
}

.ueb_footer26-button {
    border: none;
    background-color: #a1ffda;
    border-radius: 10px;
    /*border: #a1ffda solid 2px;*/
    cursor: pointer;
    /*width: 100%-24px;*/
    color: #fa618d;
    font-size: 1rem;
    margin: 0px 12px 12px 12px;
    padding: 5px 5px 5px 5px;
    text-align: center;
    text-decoration: none;
}

.ueb_footer26-button a{
    color: #484c6e;
    text-align: center;
    text-decoration: none;
}

.ueb_footer26-button a:hover {
    color: #484c6e;       
}

.ueb_footer26-button:hover {
    color: #484c6e; 
    background-color: #ff508d;      
}

.ueb_footer26-img1{
    
    height: 80px;
    
}
/************* Footer **********************/



footer {
    background-color: #484c6e;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    height: 40px;
    bottom: 0;
    position: sticky;
    z-index: 10;
  }

.footer-links {
    font-size: 0.8rem;
    margin: 0.4rem;
    margin-left: 10px;
    /*color: #6681af;*/
    color: #fffeef;
    background-color: #484c6e;  
}

.footer-links a{
    color: #fffeef;
    text-decoration: none;
    background-color: #484c6e; 
}

.footer-links a:hover {
    color: #fa618d;
}

.footer-print {
        
    border: none;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    cursor: pointer;
    display: inline-block;
    width: 12px;
    height: 12px;
    padding: 5px 5px 0px 5px;
    margin: 0px 10px 0px 0px;
    text-align: center;
    text-decoration: none;
    background-image: url('/static/icons/print_white.png');
    background-size: cover;
    background-position: 50%;
    }

.footer-print:hover {
    border: none;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    cursor: pointer;
    display: inline-block;
    width: 12px;
    height: 12px;
    padding: 5px 5px 0px 5px;
    margin: 0px 10px 0px 0px;
    text-align: center;
    text-decoration: none;
    background-image: url('/static/icons/print_red.png');
    background-size: cover;
    background-position: 50%;
    }

  .section-basis-1 {
    background-color: #fffeee;
  }

  .section-basis-2 {
  }

/* Einstellungen fuers iPhone */

@media (max-width: 600px) {

    .navbar-hamburger {
        display: flex;
    }

    .navbar-menu {
       display: none;
       width: 100%;
    }

    .navbar-menu ul {
        flex-direction: column;
        width: 100%;
        background-color: #484c6e;
    }

    .navbar-menu li {
        text-align: center;
    }

    .navbar-menu li a {
        padding: .5rem 1rem;
    }

    .navbar-menu.active {
        display: flex;
        width: 100%;
    }

}



/************* Ende Navbar / Footer ******************/


/* [] Button / Listen *******************************/

@keyframes button-red-anim {
    0% { background-color: #fa618d; box-shadow: 0 0 1px #484c6e; }
    50% { background-color: #fa618d; box-shadow: 0 0 2px #484c6e; }
    100% { background-color: #fa618d; box-shadow: 0 0 1px #484c6e; }
    }

.button-red-h2 {

    animation: button-red-anim 10000ms infinite;     
    border-radius: 6px;
    border: none;
    color: #fdf3bb;
    cursor: pointer;
    display: inline-block;
    height: 22px;
    width: 22px;
    margin-top: 20px;
    margin-right: 8px;
    padding-bottom: 2px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
    }

.button-red-h2 a{
    color: #fdf3bb;
    text-align: center;
    text-decoration: none;
    }

.button-red-h2 a:hover {
    color: #484c6e;
    }

h2.h2-deukor::before{
    content: attr(data-kor);
    }

/*      h2.h2-deukor::before{
        content: attr(data-kor);
      }
*/
.button-red-h2 a:hover + h2.h2-deukor::before{
            content: attr(data-deu);
          }

        

.lipunkt {
    border-radius: 6px;
    border: none;
    display: inline-block;
    height: 10px;
    width: 10px;
    margin-top: 14px;
    margin-right: 20px;
    flex-shrink: 0;
    }

.red {
    background-color: #fa618d;
    }

.blue {
    background-color: #484c6e;
    }

.button-dhan {
    display: inline-block;
    justify-content: center;
    align-items: center;
    position: relative;
    font-weight: 500;
    z-index: 2;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    margin-top: 20px;
    margin-right: 8px;
    border: none;
    background-color: #fa618d; 
    box-shadow: 0 0 1px #484c6e;
    color: #fdf3bb;
    flex-shrink: 0;
    transform-origin: center;
    transition: box-shadow 250ms, transform 250ms;
    }

.button-dhan p {
    line-height: 20px;
    text-align: center;
    color: #fdf3bb;  
    }

.button-dhan:hover p {
    color: #484c6e;  
    }
       

.tooltip {
    position: absolute;
    z-index: 2;
    display: flex;
    width: 100px;
    padding: 0.25rem 1rem;
    border-radius: 5px;
    background: #fffeee;
    opacity: 0;
    transition: opacity 500ms, transform 500ms;
    }

.tooltip p {
    color: #484c6e;   
    }

.button-dhan:hover,
.button-dhan:focus {
   box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
   transform:  scale(1.1);
   cursor: help;

}

.button-dhan:hover .tooltip,
.button-dhan:active .tooltip,
.button-dhan:focus .tooltip {
   opacity: 1;
   transform: translateY(-100px);
}
   
/* Blauer Button */ 

.button {
    background-color: #484c6e;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: none;
    color: #fdf3bb;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    padding: 0px 5px 2px 5px;
    text-align: center;
    text-decoration: none;
    }

.button a{
    color: #fdf3bb;
    text-align: center;
    text-decoration: none;
    }

.button a:hover {
    color: #fa618d;
    }
    
.button:hover {
    color: #fa618d;
    }



.vbutton {
    background-color: #484c6e;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: none;
    color: #fdf3bb;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    padding: 0px 5px 2px 5px;
    margin: 10px 10px 0px 5px;
    text-align: center;
    text-decoration: none;
    }

.vbutton a{
    color: #fdf3bb;
    text-align: center;
    text-decoration: none;
    }

.vbutton a:hover {
    color: #fa618d;
    }
    
.vbutton:hover {
    color: #fa618d;
    }


/* Roter Button */ 

.rbutton {
    background-color: #fa618d;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: none;
    color: #fdf3bb;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    padding: 0px 5px 2px 5px;
    text-align: center;
    text-decoration: none;
    }

.rbutton a{
    color: #fdf3bb;
    text-align: center;
    text-decoration: none;
    }

.rbutton a:hover {
    color: #484c6e;
    }
    
.rbutton:hover {
    color: #484c6e;
    }

.albutton {
    background-color: #fa618d;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    height: 30px;
    border: none;
    color: #fdf3bb;
    cursor: pointer;
    display: inline-block;
    font-size: 1.1rem;
    padding: 2px 5px 5px 5px;
    margin:10px 5px 5px 5px; 
    text-align: center;
    text-decoration: none;
    font-family: Noto Sans;
    font-size: 1rem;
    font-weight: 500;
    }

.albutton a{
    color: #fdf3bb;
    text-align: center;
    text-decoration: none;
    }

.albutton a:hover {
    color: #484c6e;
    }
    
.albutton:hover {
    color: #484c6e;
    }


.rsbutton {
    background-color: #fa618d;
    border-radius: 6px;
    border: none;
    color: #fdf3bb;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    margin: 5px;
    padding: 5px 5px 5px 5px;
    text-align: center;
    text-decoration: none;
    }
    
.rsbutton a{
    color: #fdf3bb;
    text-align: center;
    text-decoration: none;
    }
    
    
.rsbutton a:hover {
    color: #484c6e;
    }
        
.rsbutton:hover {
    color: #484c6e;
    }

.sel-menu {
    width: 150px;
    height: 30px;
    margin: 5px;
    border: 1px solid #fa618d;
    font-family: Noto Sans;
    font-size: 1rem;
    color: #484c6e;
    background-color: #fffde8;
    border-radius: 5px;
    /*box-shadow: 4px 4px #fffde8;*/
    outline:#fa618d;
        
      }

.sel-menu2 {
    width: 200px;
    height: 30px;
    margin: 5px;
    border: 1px solid #fa618d;
    font-family: Noto Sans;
    font-size: 1rem;
    color: #484c6e;
    background-color: #fffde8;
    border-radius: 5px;
    /*box-shadow: 4px 4px #fffde8;*/
    outline:#fa618d;
    }

/* Audio Play Pause */


    .audio_button-orange {
        
        border: none;
        border-radius: 12px;
        -webkit-border-radius: 12px;
        cursor: pointer;
        display: inline-block;
        width: 24px;
        height: 24px;
        padding: 5px 5px 5px 5px;
        margin: 0px 0px 0px 0px;
        text-align: center;
        text-decoration: none;
        background-image: url('/static/icons/play_circle_orange.png');
        background-size: cover;
        background-position: 50%;
        /*z-index:-1*/
        }
    
        .audio_button-orange.active {
        
            border: none;
            border-radius: 12px;
            -webkit-border-radius: 12px;
            cursor: pointer;
            display: inline-block;
            width: 24px;
            height: 24px;
            padding: 5px 5px 5px 5px;
            margin: 0px 0px 0px 0px;
            text-align: center;
            text-decoration: none;
            background-image: url('/static/icons/pause_circle_orange.png');
            background-size: cover;
            background-position: 50%;
            /*z-index:-1*/
            }

    .audio_button-orange a{
        color: #fdf3bb;
        text-align: center;
        text-decoration: none;
        }
    
    .audio_button-orange a:hover {
        color: #fa618d;
        }
        
    .audio_button-orange:hover {
        color: #fa618d;
        }


/* Ende Button / Listen *****************************/


/* [] Basis Container für komplette hanguk.berlin Site */


.han-con1-col {
	width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background-color: #fffeee;
    margin-top: 5px;
}


.han-con2-row {
	width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: #fffeee;

}
.han-con21-col {
	width: 60%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    /*margin-right: 5px;*/
    background-color: #fffeee;
}

.han-con22-col {
	width: 40%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background-color: #fffeee;
}


.han-con3-col {
	width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background-color: #fffeee;
    /*margin-bottom: 5px;*/
}


.han-con4-row {
	width: 100% - 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /*justify-content: space-evenly;*/
    justify-content: center;
    padding-top: 24px;
    padding-bottom: 24px;
    row-gap: 24px;
    column-gap: 24px;
    background-color:#fdf3bb;
    border-radius: 10px;
    margin: 5px;
}

.han-con4-blue-row {
	width: 100% - 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /*justify-content: space-evenly;*/
    justify-content: center;
    padding-top: 24px;
    padding-bottom: 24px;
    row-gap: 24px;
    column-gap: 24px;
    background-color:#95BCFF;
    border-radius: 10px;
    margin: 5px;
}

.han-con5-row {
	width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: #fffeee;

}

.han-con51-col {
	width: 20%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background-color: #fffeee;
}

.han-con52-col {
	width: 80%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background-color: #fffeee;
}

.han-con53-col {
	width: 50%;
    min-height:100%;
    max-height:100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background-color: #fffeee;
    overflow-y:scroll;
    overflow-x:hidden;
}

.han-con6-row {
	
    display: flex;
    width: 100% - 10px;
    height: 100% - 10px;
    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 24px;
    column-gap: 24px;
    justify-content: space-around;
    padding-top: 24px;
    padding-bottom: 24px;
    background-image: url("/media/tabmedia/hanguk-bg.webp");
    background-size: cover;
    background-position: 50%;
    /*background-color:#fdf3bb;*/
    border-radius: 10px;
    margin: 5px;
}

.han-con7-col {
	width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background-color: #fffeee;
    margin-top: 5px;
    position:fixed;
}

.han-con7-row {
	width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: #fffeee;
}

.han-con71-col {
	width: 50%;
    height: 100vh;
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background-color: #fffeee;
    overflow:auto;
}

.han-con8-row {
	width: 100% - 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /*justify-content: space-evenly;*/
    justify-content: center;
    padding-top: 12px;
    padding-bottom: 12px;
    row-gap: 24px;
    column-gap: 24px;
    margin: 5px;
}

.han-con81 {
	
    display: flex;
    flex-direction: column;
    width: 400px;
    background-color: #95bcff;
    /*max-height: 300px;*/
    
}

.han-con9 {
	width: 100% - 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 12px;
    margin: 5px;
    /*background-color: #fdf3bb; */
}
.han-con9-row {
	width: 100% - 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 24px;
    column-gap: 24px;
    padding-bottom: 24px;
}

.han-con9-col {
	
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 24px;
    column-gap: 24px;
}



@media (max-width: 1012px) {

    .han-con5-row {
        flex-direction: column;
    }

    .han-con51-col {
        width: 100%;
    }
    
    .han-con52-col {
        width: 100%;
    }
}

@media (max-width: 1012px) {

    .han-con2-row {
        flex-direction: column;
    }

    .han-con21-col {
        width: 100%;
    }
    
    .han-con22-col {
        width: 100%;
    }

    .han-con5-row {
        flex-direction: column;
    }

    .han-con51-row {
        width: 100% - 10px;
    }
    
    .han-con52-row {
        width: 100% - 10px;
    }

}


/*.section-basis-1 {background-color: #fffeee;}
.section-basis-2 {background-color:#fdf3bb;}*/

/* [] Elemente */

.wort_box-ueb {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 0;
    border-radius: 10px;
    text-align: left; 
    margin: 5px; 
    padding-top: 14px;
    padding-bottom: 7px;
    padding-left: 24px;
    padding-right: 24px;
    background-color:#fb8f75;
    
}

.wort_box-ueb h4{
    color:#fdf3bb;
}

.wort_box {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    background-color:#fdf3bb;
}

.wort_box-con1-row {
	width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.wort_box-kor {
	width: 50%;
    font-size: 1.3rem;  
}

.wort_box-deu {
	width: 50%;
    font-size: 1rem;
    padding-left: 6px;
    padding-top: 10px;
}

.wort_boxi {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 12px;
    background-color:#fdf3bb;
}

.s-wort_boxi {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 12px;
    background-color:#fdf3bb;
}

.p-wort_boxi {
    display: none;
    }

.wort_boxi-con1 {
	width: 200px;
    height: 200px;
    margin: 12px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
}
.wort_boxi-img{
    height: 140px;
    min-width: 200px;
    max-width: 200px;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.wort_boxi-audio_button {   
    border: none;
    border-radius: 12px;
    position: absolute;
    -webkit-border-radius: 12px;
    cursor: pointer;
    right: 0;
    bottom: 50px;
    width: 50px;
    height: 50px;
    margin: 10px 10px 10px 10px;
    background-image: url('/static/icons/play_circle_red.png');
    background-size: cover;
    background-position: 50%;
    z-index: 5;
    }

.wort_boxi-audio_button:hover {
    background-image: url('/static/icons/play_circle_yellow.png');
    }


.wort_boxi-iframe{
    width: 100%;
    height: 70%;
    position: absolute;
    z-index: 1;
    top: 0px;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.wort_boxi-kordeu {
	position: absolute;
    z-index: 2;
    width: 100%;
    height: 60px;
    bottom: 0px;
    background: rgba(251, 143, 117, 1);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
     
}

.wort_boxi-kor {
	position: absolute;
    z-index: 3;
    font-size: 1.3rem;
    font-weight: 300; 
    bottom: 25px;
    left: 10px; 
}

.wort_boxi-deu {
	position: absolute;
    z-index: 3;
    font-size: 1rem;
    bottom: 5px;
    left: 10px;
    color:#fdf3bb;
}

.wort_boxi2 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 12px;
    background-color:#fdf3bb;
}

.wort_boxi2-con1 {	
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 12px; 
}

.wort_boxi2-con2 {	
    position: relative;
}

.wort_boxi2-img{
    height: 240px;
    min-width: 320px;
    max-width: 320px;
    object-fit: cover;
    border-radius: 10px;   
}

.wort_boxi2-audio_button {   
    border: none;
    border-radius: 12px;
    position: absolute;
    -webkit-border-radius: 12px;
    cursor: pointer;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    margin: 12px 12px 12px 12px;
    background-image: url('/static/icons/play_circle_red.png');
    background-size: cover;
    background-position: 50%;
    z-index: 5;
    }

.wort_boxi2-audio_button:hover {
    background-image: url('/static/icons/play_circle_blue.png');
    }



.wort_boxi2-iframe{
    height: 240px;
    min-width: 320px;
    max-width: 320px;
    object-fit: cover;
    border-radius: 10px;
    margin: 0px; 
}

.wort_boxi2-kordeu {
    margin-top: auto;
    margin-left: 24px;
     
}

.wort_boxi2-kor {
	font-family: Noto Sans;
    font-size: 1.5rem;
    font-weight: 500;
    color: #484c6e;
    padding: 2px;
    padding-right: 30px; 
}

.wort_boxi2-deu {
	font-size: 1rem;
    bottom: 5px;
    left: 10px;
}

.wort_boxi2-txt_deu {
	font-size: 1rem;
    color: #62b2a9;
    bottom: 5px;
    left: 10px;
}

@media (max-width: 600px) {
    .wort_boxi2-con1 {
        flex-direction: column;      
    }

    .wort_boxi2-kordeu {
        margin-top: auto;
        margin-left: 0px;
         
    }
}

.p-tabelle_2 {
    display: none;
    }

.media_1 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    background-color:#fdf3bb;
}

.media_1-con {
    position: relative;
}

.media_1-img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    /*max-height: 320px;*/
    
}

.media_1-iframe{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    margin: 0px;
    min-height: 320px;
    /*max-height: 320px;*/ 
}

.media_1-audio_button {       
    border: none;
    border-radius: 12px;
    position: absolute;
    -webkit-border-radius: 12px;
    cursor: pointer;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    margin: 12px 12px 12px 12px;
    background-image: url('/static/icons/play_circle_red.png');
    background-size: cover;
    background-position: 50%;
    z-index: 5;
}

.media_1-audio_button:hover {
        background-image: url('/static/icons/play_circle_blue.png');
        }

.s-media_2 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    background-color:#fdf3bb;
}

.media_2-con {
    position: relative;
}

.media_2-slides-img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    max-height: 320px;
}

.media_22-slides-img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    max-height: 320px;
}

.p-media_2{
    display: none;
}

.rede_box-ueb {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 0;
    border-radius: 10px;
    text-align: left; 
    margin: 5px; 
    padding-top: 14px;
    padding-bottom: 7px;
    padding-left: 24px;
    padding-right: 24px;
    background-color:#fb8f75;
}

.rede_box-ueb h4{
    color:#fdf3bb;
}

.rede_box {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    background-color:#fdf3bb;
}

.rede_box-con1-row {
	width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.rede_box-kor {
	width: 50%;
    font-size: 1.3rem;  
}

.rede_box-deu {
	width: 50%;
    font-size: 1rem;
    padding-left: 6px;
    padding-top: 10px;
}

.uebungen-link-con {
    display: flex;
    flex-direction: row-reverse;
    border-radius: 10px;
    text-align: left; 
    margin: 5px; 
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
    padding-right: 12px;
    background-color:#95BCFF;
}

.uebungen-link-button {
    background-color: #fa618d;
    border-radius: 6px;
    border: none;
    color: #fdf3bb;
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    /*margin: 5px;*/
    padding: 4px 12px 4px 12px;
    text-align: left;
    text-decoration: none;
    }
    
.uebungen-link-button a{
    color: #fdf3bb;
    text-align: center;
    text-decoration: none;
    }
       
.uebungen-link-button a:hover {
    color: #484c6e;
    }        
.uebungen-link-button:hover {
    color: #484c6e;
}

/* start spiele_box */
.spiele_box-ueb {
    display: flex;
    flex-direction: row-reverse;
    /*flex-wrap: nowrap;
    flex-grow: 0;*/
    border-radius: 10px;
    text-align: left; 
    margin: 5px; 
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
    padding-right: 12px;
    background-color:#95BCFF;
    /*border-style: solid;
    border-width: 2px;
    border-color: #62b2a9;*/
}

.spiele_box-ueb h4{
    color:#484c6e;
    font-style: normal;
    font-weight: 500;
}

.spiele_box-ueb a{
    color: #fa618d;
    text-align: center;
    text-decoration: none;
    font-style: normal;
    font-weight: 500;
}

.spiele_box-button {
    background-color: #fa618d;
    border-radius: 6px;
    border: none;
    color: #fdf3bb;
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    /*margin: 5px;*/
    padding: 4px 12px 4px 12px;
    text-align: left;
    text-decoration: none;
    }
    
.spiele_box-button a{
    color: #fdf3bb;
    text-align: center;
    text-decoration: none;
    }
    
    
.spiele_box-button a:hover {
    color: #484c6e;
    }
        
.spiele_box-button:hover {
    color: #484c6e;
    }
/*ende spiele_box*/

.ueb_kap-ueb {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-grow: 1;
    align-items: flex-start;
    border-radius: 10px;
    text-align: left; 
    margin: 5px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 7px;
    padding-bottom: 0px;
    background-color: #61b2a9;
}

.ueb_kap-ueb h1{
    color:#fdf3bb;
    font-style: normal;
    font-weight: 500;
}

.ueb_kap-ueb-h1{
    font-family: 'Noto Sans';
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 0.5em;
    color:#fdf3bb;
    font-style: normal;
    font-weight: 500;
    align-self: flex-start;
}

.ueb_kap-ueb-item{
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    flex-grow: 1;
    align-items: end;
    margin-top: 6px;
    margin-bottom: 7px;
}


.section-ueb {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    border-radius: 10px;
    text-align: left; 
    margin: 5px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 7px;
    padding-bottom: 0px;
    background-color:#484c6e;
    color:#fdf3bb;
}

.section-ueb h4{
    color:#fdf3bb;
    font-style: normal;
    font-weight: 300;
}

.ueb_kap {
    display: grid;
    grid-template-columns: 37% 63%;
    grid-template-rows: 0.5fr 2.25fr;
    /*grid-auto-rows: minmax(0px, auto); */
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    background-color:#fdf3bb;
}


.ueb_kap-h2 {
    text-align: left;
    grid-row: 1/2;
    grid-column: 1/2; 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.ueb_kap-h2-kor {
    text-align: left;
    grid-row: 1/2;
    grid-column: 1/2; 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.ueb_kap-h2-kor>h2.h2-deu { 
    display: none;   
}

.ueb_kap-h2-kor:hover>h2.h2-deu {
    display: flex;
}

.ueb_kap-h2-kor:hover>h2.h2-kor {
    display: none;
}

.ueb_kap-h2-kor:hover>.button-red-h2 a{
    color: #fdf3bb;
    text-align: center;
    text-decoration: none;
}

.ueb_kap-h2-deu {
    text-align: left;
    grid-row: 1/2;
    grid-column: 1/2; 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
    
.ueb_kap-h2-deu>h2.h2-kor { 
    display: none;   
}
    
.ueb_kap-h2-deu:hover>h2.h2-kor {
    display: flex;
    }
    
.ueb_kap-h2-deu:hover>h2.h2-deu {
    display: none;
}
    
.ueb_kap-h2-deu:hover>.button-red-h2 a{
    color: #fdf3bb;
    text-align: center;
    text-decoration: none;
}

.ueb_kap-point{  
    border: #fdf3bb solid 2px;
    background-color: #61b2a9;
    border-radius: 15px;
    color: #fdf3bb;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin-top: 6px;
    margin-right: 10px;
    margin-bottom: -3px;
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}


.ueb_kap-con-media {
    text-align: left;
    margin-left: 24px;
    grid-row: 1/3;
    grid-column: 2/3;  
    display: flex;
    flex-direction: column;
}

.ueb_kap-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;  
}

.ueb_kap-video {
    min-width: 100%;
    min-height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 10px;
}

.ueb_kap-video-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: none;  
}


.ueb_kap-audio-img{
    height: 400px;
    width: 600px;
    object-fit: cover;
    object-position: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;  
}

.ueb_kap-audio{ 
    height: 100px;
    width: 600px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    object-fit: cover;  
}

.ueb_kap-con1-inhalt {
    text-align: left;
    grid-row: 2/3;
    grid-column: 1/2; 
}

.ueb_kap-con2-inhalt {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;  
}


.ueb_kap-con2-inhalt p {
    font-family: Noto Sans;
    font-size: 1rem;
    text-align: left; 
    color: #484c6e;
}

.ueb_kap-con2-inhalt li {
    list-style-type: none; 
    font-family: Noto Sans;
    font-size: 1.5em;
    font-weight: 500;
    text-align: left; 
    color: #484c6e;  
}



.thema_1, .s-thema_1 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    border-radius: 10px;
    text-align: left; 
    margin: 5px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 7px;
    padding-bottom: 0px;
    /*background-color:#fdf3bb;*/
    background-color:#62b2a9;
}

.p-thema_1 {
    display: none;
    }

.thema_1 h5, .s-thema_1 h5 {
    color:#fdf3bb;
    font-style: normal;
    font-weight: 500;
    
}



.thema_2 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    border-radius: 10px;
    text-align: left; 
    margin: 5px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 7px;
    padding-bottom: 0px;
    background-color:#fb8f75;
}

.thema_2 h5{
    color:#fdf3bb;
    font-style: normal;
    font-weight: 500;
}


@media (max-width: 1012px) {

    .ueb_kap {
        grid-template-columns: 100%;
        grid-template-rows: auto;
    }

    
    .ueb_kap-h2 {
        grid-row: 1/2;
        grid-column: 1/2; 
    
    }
    
    .ueb_kap-con-media {
        text-align: right;
        margin-left: 0px;
        margin-bottom: 24px;
        grid-row: 2/3;
        grid-column: 1/2;  
    }

    .ueb_kap-con1-inhalt {
        text-align: left;
        grid-row: 3/4;
        grid-column: 1/2;  
    
    }

    .ueb_kap-img{
        width: 100%;
        height: 300px;
        object-fit: cover;
        max-width: 720px;
         
    }
    
    .ueb_kap-video {
        width: 100%;
        height: 300px;
        max-width: 720px;
    }

    .ueb_kap-audio-img{
        height: 300px;
        width: 100%; 
        max-width: 720px;
    }
    
    .ueb_kap-audio{ 
        height: 100px;
        width: 100%;
        max-width: 720px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        object-fit: cover;  
    }

}

.dia_b2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 10px;
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    gap: 1em;
    background-color:#fdf3bb;
    justify-content: center;

}

.dia_b2n {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    border-radius: 10px;
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    gap: 1em;
    background-color:#fdf3bb;
    justify-content: center;

}

.dia_b2-kor {
    font-family: Noto Sans;
    font-size: 1.5rem;
    font-weight: 500;
    color: #484c6e;  
}

.dia_b2-deu {
    font-size: 1rem;
}

.dia_b2-con1-row {
    min-width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 35px;
    margin-bottom: 0.5rem;
}

.dia_b2-con1-col {
    display: flex;
    margin-bottom: 50px;
}

.dia_b2-con2-col {
    display: flex;
    margin-top: 50px;
}

.dia_b2-con-img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    max-height: 320px;
    
}

.dia_b2-con-iframe{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    margin: 0px;
    min-height: 320px;
    max-height: 320px; 
}
/*
.dia_b2-con1 {
	text-align: center;
}
*/
.dia_b2-con-media {
	text-align: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    max-height: 500px;  
}

.dia_b2-card-audio-img{
    height: 300px;
    width: 300px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-left: 10px;
}

.dia_b2-card-audio{
    
    height: 100px;
    width: 300px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    object-fit: cover;
    margin-left: 10px;
}

.dia_b2-con1:nth-child(3) {
    margin: 20px;
    margin-top: 50px;
}

.dia_b2-img {
    width: 100%;
    height: 100%;
    max-height: 300px;
    max-width: 300px;
    object-fit: cover;
    margin-left: 10px;
    border-radius: 10px;
}

.dia_b2-video {
    width: 100%;
    /*height: 100%;*/
    margin-left: 10px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

.dia_b2-bubble-left 
{
    position: relative;
    width: 250px;
    padding: 8px;
    color: #484c6e;
    border-radius: 10px;
    border: #62b2a9 solid 2px;
}

.dia_b2-bubble-left:before 
{
content: '';
position: absolute;
border-style: solid;
color: #484c6e;
border-width: 18px 0 18px 18px;
border-color: transparent #62b2a9 ;
display: block;
width: 0;
z-index: 0;
margin-top: -18px;
right: -22px;
top: 75%;
}


.dia_b2-bubble-right 
{
position: relative;
width: 250px;
padding: 8px;
color: #484c6e;
border-radius: 10px;
border: #62b2a9 solid 2px;
}

.dia_b2-bubble-right:before 
{
content: '';
position: absolute;
color: #484c6e;
border-style: solid;
border-width: 18px 18px 18px 0;
border-color: transparent #62b2a9;
display: block;
width: 0;
z-index: 0;
margin-top: -18px;
left: -22px;
top: 75%;
}

/*
@media (max-width: 1450px) {
    .dia_b2-con1:nth-child(1){
        
    }
}

@media (max-width: 1630px) {
    .dia_b2-con1:nth-child(2){
        order: 1;

    }

}
*/
@media (max-width: 1630px) {
    .dia_b2-con1:nth-child(1){order: 0;}
    .dia_b2-con1:nth-child(2){order: 2;}
    .dia_b2-con1:nth-child(3){order: 1;}

}

@media (max-width: 650px) {
    .dia_b2-con1-row {
        gap: 5px;
        flex-direction: column;
        margin-bottom: 0.5rem;
    }
    
    .dia_b2-con1-col {
        display: flex;
        margin-bottom: 0px;
        align-items: center;
    }
    
    .dia_b2-con2-col {
        display: flex;
        flex-direction: row-reverse;
        margin-top: 0px;
        margin-right: 0px;
    }

}


.text_1 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    background-color:#fdf3bb;
}

.text_1-con1-row {
	width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.text_1-con1-row p {
    
    font-size: 1rem;
    text-align: left;  
}
.text_1-point{  
    border: #fdf3bb solid 2px;
    background-color: #61b2a9;
    border-radius: 15px;
    color: #fdf3bb;
    display: inline-block;
    height: 20px;
    width: 20px;
    /*margin-top: 6px;*/
    margin-right: 10px;
    margin-bottom: -3px;
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}

.text_1-ueb {
    min-width: 50%;
    flex-grow: 1;
    font-family: Noto Sans;
    font-size: 1.5rem;
    font-weight: 500;
    color: #484c6e;
    padding-bottom: 4px;
}

.text_2 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    background-color:#fdf3bb;
}

.text_2-con1-row {
	width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.text_2-con1-row p {
    
    font-size: 1rem;
    text-align: left;  
}

.rede_tabu2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 1;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    background-color:#fdf3bb;
}

.rede_tabu2-kor {
    width: 50%;
    min-width: 50%;
    font-family: Noto Sans;
    font-size: 1.5rem;
    font-weight: 500;
    color: #484c6e;
    padding: 2px;
    /*padding-left: 30px;*/
    padding-right: 30px;  
}

.rede_tabu2-deu {
    width: 50%;
    min-width: 50%;
    font-size: 1rem;
    padding: 2px;
    /*padding-left: 30px;*/
    padding-right: 30px;
}

.rede_tabu2-con1-row {
    flex-basis: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;  
}

.rede_tabu2-con2-col{
    font-size: 1rem;
}

.rede_tabu2-con2-col-ueb{  
    /*border: #62b2a9 solid 2px;*/
    border: #fdf3bb solid 2px;
    background-color: #62b2a9;
    border-radius: 10px;
    /*border-radius: 15px;*/
    /*color: #fa618d;*/
    color: #fdf3bb;
    padding: 2px;
    padding-left: 7px;
    padding-right: 30px;
}

.rede_tabu2-con2-col p{
    font-size: 1rem;
    padding-top: 2px;
    padding-bottom: 2px;
    /*padding-left: 30px;*/
    color: #62b2a9;
}

@media (max-width: 600px) {
    .rede_tabu2 {
        flex-direction: column;      
    }
}

.dia_tab3 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    background-color:#fdf3bb;
}

.dia_tab3-con1-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 0.5rem;
}

.dia_tab3-ueb{  
    border: #fdf3bb solid 2px;
    background-color: #62b2a9;
    border-radius: 15px;
    color: #fdf3bb;
    display: inline-block;
    height: 24px;
    width: 24px;
    margin-top: 2px;
    margin-right: 6px;
    margin-bottom: 2px;
    padding-bottom: 1px;
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}


.dia_tab3-kor {
    min-width: 50%;
    flex-grow: 1;
    font-family: Noto Sans;
    font-size: 1.5rem;
    font-weight: 500;
    color: #484c6e;
}

.dia_tab3-deu {
    flex-grow: 1;
    font-size: 1rem;
    padding-left: 6px;
    padding-top: 10px;
}


.vor_boxrf {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    background-color:#fdf3bb;
}

.vor_boxrf-ueb{  
    border: #fdf3bb solid 2px;
    background-color: #fa618d;
    border-radius: 10px;
    color: #fdf3bb;
    padding: 2px;
    padding-left: 7px;
    padding-right: 30px;
}

.vor_boxrf-vtxt {
    font-size: 1rem;
    padding: 2px;
    /*padding-left: 30px;*/
    padding-right: 30px;
}

.vor_boxrf-con1-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 0.5rem;
}

.vor_boxrf-txt {
    font-family: Noto Sans;
    font-size: 1.5rem;
    font-weight: 500;
    color: #484c6e;
    padding: 2px;
    /*padding-left: 30px;*/
}

.vor_boxrf-hint {
    font-size: 1rem;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
}

.frag_box_rede {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    background-color:#fdf3bb;
}

.frag_box_rede-ueb{  
    border: #fdf3bb solid 2px;
    background-color: #62b2a9;
    border-radius: 10px;
    color: #fdf3bb;
    padding: 2px;
    padding-left: 7px;
    padding-right: 30px;
}

.frag_box_rede-ftxt {
    font-size: 1rem;
    padding: 2px;
    /*padding-left: 30px;*/
    padding-right: 30px;
}

.frag_box_rede-con1 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 0.5rem;
}

.frag_box_rede-kor {
    font-family: Noto Sans;
    font-size: 1.5rem;
    font-weight: 500;
    color: #484c6e;
    padding: 2px;
    /*padding-left: 30px;*/
    padding-right: 30px;
}

.frag_box_rede-deu {
    font-size: 1rem;
    /*padding-left: 30px;*/
    padding-right: 30px;
    padding-top: 10px;
}

@media (max-width: 600px) {
    .frag_box_rede-con1 {
        flex-direction: column;      
    }
}

.rede_tab2 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    background-color:#fdf3bb;
}

.rede_tab2-con1-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 0.5rem;
}



.rede_tab2-kor {
    width: 50%;
    flex-grow: 1;
    font-family: Noto Sans;
    font-size: 1.5rem;
    font-weight: 500;
    color: #484c6e;
    /*padding-left: 30px;*/
}

.rede_tab2-deu {
    width: 50%;
    flex-grow: 1;
    font-size: 1rem;
    padding-left: 6px;
    padding-top: 10px;
}

.dia_lang {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    background-color:#fdf3bb;
}

.dia_lang-con1-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 0.5rem;
}

.dia_lang-name-kor{  
    
    width: 60px;
    max-width: 80px;
    border: #fdf3bb solid 2px;
    /*background-color: #62b2a9;*/
    background-color: #fb8f75;
    border-radius: 10px;
    color: #fdf3bb;
    padding: 2px;
    padding-left: 7px;
    padding-right: 7px;
    margin-right: 10px;
}


.dia_lang-kor {
    min-width: 50%;
    flex-grow: 1;
    font-family: Noto Sans;
    font-size: 1.5rem;
    font-weight: 500;
    color: #484c6e;
}

.dia_lang-deu {
    flex-grow: 1;
    font-size: 1rem;
    padding-left: 6px;
    padding-top: 10px;
}

.dia_lang-name-deu {
    flex-grow: 1;
    font-size: 1rem;
    padding-left: 6px;
    padding-top: 10px;
}


.wort_tab2 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    background-color:#fdf3bb;
}

.wort_tab2-con1-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 0.5rem;
}



.wort_tab2-kor {
    width: 50%;
    flex-grow: 1;
    font-family: Noto Sans;
    font-size: 1.5rem;
    font-weight: 500;
    color: #484c6e;
    /*padding-left: 30px;*/
}

.wort_tab2-deu {
    width: 50%;
    flex-grow: 1;
    font-size: 1rem;
    padding-left: 6px;
    padding-top: 10px;
}


.tipp_box {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    background-color:#fdf3bb;
}

.tipp_box-ueb{  
    border: #fdf3bb solid 2px;
    background-color: #62b2a9;
    border-radius: 10px;
    color: #fdf3bb;
    padding: 2px;
    padding-left: 7px;
    padding-right: 30px;
}

.tipp_box_ueb2 {
    font-family: Noto Sans;
    font-size: 1.5rem;
    font-weight: 500;
    color: #484c6e;
    padding: 2px;
    padding-right: 30px;
}

.tipp_box-txt {
    font-size: 1rem;
    padding: 2px;
    padding-right: 30px;
}


.text_box {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    background-color:#fdf3bb;
}

.text_box1-ueb{  
    border: #fdf3bb solid 2px;
    background-color: #62b2a9;
    border-radius: 10px;
    color: #fdf3bb;
    padding: 2px;
    padding-left: 7px;
    padding-right: 30px;
}

.text_box2-ueb{  
    border: #fdf3bb solid 2px;
    background-color: #fb8f75;
    border-radius: 10px;
    color: #fdf3bb;
    padding: 2px;
    padding-left: 7px;
    padding-right: 30px;
}

.text_box3-ueb{  
    border: #fdf3bb solid 2px;
    background-color: #fa618d;
    border-radius: 10px;
    color: #fdf3bb;
    padding: 2px;
    padding-left: 7px;
    padding-right: 30px;
}


.text_box_ueb2 {
    font-family: Noto Sans;
    font-size: 1.5rem;
    font-weight: 500;
    color: #484c6e;
    padding: 2px;
    padding-right: 30px;
}

.text_box-txt {
    font-size: 1rem;
    padding: 2px;
    padding-right: 30px;
}



.wort_tab2 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    background-color:#fdf3bb;
}

.wort_tab2-con1-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 0.5rem;
}



.wort_tab2-kor {
    min-width: 50%;
    flex-grow: 1;
    font-family: Noto Sans;
    font-size: 1.5rem;
    font-weight: 500;
    color: #484c6e;
    /*padding-left: 30px;*/
}

.wort_tab2-deu {
    flex-grow: 1;
    font-size: 1rem;
    padding-left: 6px;
    padding-top: 10px;
}

/* homepage promocards*/



.promocard-m-green {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    min-height: 320px;
    max-height: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #fdf3bb; 
    background-color: #61b2a9;
}

.promocard-m-yellow {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    min-height: 320px;
    max-height: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    background-color: #fdf3bb;
}

.promocard-m-trred {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    min-height: 320px;
    max-height: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #fdf3bb;
    background-color: #ff508d;
}

.promocard-m-yellow {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    min-height: 320px;
    max-height: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    background-color: #fdf3bb;
}

.promocard-m-darkblue {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    min-height: 320px;
    max-height: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #fdf3bb; 
    background-color: #484c6e;
}

.promocard-m-trblue {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    min-height: 320px;
    max-height: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    background-color: #95BCFF;
}

.promocard-m-trgreen {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    min-height: 320px;
    max-height: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    background-color: #7fffcd;
}

.promocard-m-orange {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    min-height: 320px;
    max-height: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    background-color: #fb8f75;
}

.promocard-l-column-yellow {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    min-height: 664px;
    max-height: 664px;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    background-color: #fdf3bb;
}

.promocard-l-row-yellow {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 664px;
    max-width: 664px;
    min-height: 320px;
    max-height: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    background-color: #fdf3bb;
}

.promocard-xxl-row-trgreen {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 1008px;
    max-width: 1008px;
    min-height: 50px;
    max-height: 50px;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    background-color: #7fffcd;
}

.promocard-xxl-row-img{
    width: 1008px;
    height: 50px;
    border-radius: 10px;
    /*position: fixed;
    left: 0;
    top: 0;*/
    object-fit: cover;
    /*z-index:-1*/
}


.promocard-space{
    margin-bottom: 12px; 
}

.promocard-img{
    height: 213px;
    max-width: 100%;
    min-width: 100%;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.promocard-m-iframe{
    height: 213px;
    max-width: 100%;
    min-width: 100%;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.promocard-l-iframe{
    min-height: 100%;
    height: 100%;
    min-width: 100%;
    width: 100%;
    display: flex;
    border-radius: 10px;
}

.promocard-ueb {
    font-family: Noto Sans;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left; 
    margin-right: 24px;
    margin-left: 24px; 
}

.promocard-ueb2 {
    font-family: Noto Sans;
    font-weight: 700;
    font-style: italic;
    font-size: 0.8rem;
    text-align: left;
    margin-right: 24px;
    margin-left: 24px;

}


.promocard-inhalt {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    margin-top: 14px; 
    margin-left: 24px; 
    margin-right: 24px; 
    margin-bottom: 24px; 
    font-family: Noto Sans;
    font-size: 1rem;
    text-align: left;
}


.promocard-button {
    
    border-radius: 10px;
    background-color: #ff508d;
    border: #ff508d solid 2px;
    color: #fdf3bb; 
    cursor: pointer;
    /*display: inline-block;*/
    font-size: 1rem;
    padding: 0px 5px 2px 5px;
    text-align: center;
    text-decoration: none;
    margin-left: 24px; 
    margin-right: 24px; 

}

.promocard-button a{
    color: #fdf3bb;
    text-align: center;
    text-decoration: none;
}


.promocard-button a:hover {
    color: #484c6e;
        
}


@media (max-width: 1012px) {

    .promocard-l-row-yellow {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        min-width: 320px;
        max-width: 320px;
        min-height: 320px;
        max-height: 320px;
        border-radius: 10px;
        text-align: left; 
        color: #484c6e; 
        background-color: #fdf3bb;
    }

    .promocard-l-iframe{
        height: 213px;
        object-fit: contain;
        width: 100%;
        border-radius: 10px;
    }
}

/* kurs_index */

.kurs_index-ueb {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 0;
    border-radius: 10px;
    /*border-style: solid;
    border-width: 2px;
    border-color: #484c6e;*/
    text-align: center; 
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 2.5px;
    margin-bottom: 2.5px; 
    padding-top: 14px;
    padding-bottom: 7px;
    padding-left: 24px;
    padding-right: 24px;
    background-color:#62b2a9;
    
}

.kurs_index-ueb h5{
    color:#fdf3bb;
    font-size: 1.3rem;
}

.kurs_index-kurs-ueb{  
    border: #fdf3bb solid 2px;
    background-color: #fa618d;
    border-radius: 10px;
    color: #fdf3bb;
    text-align: left; 
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 2.5px;
    margin-bottom: 2.5px; 
    padding: 2px;
    padding-left: 7px;
    padding-right: 30px;
}
.kurs_index-con1 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 0;
    border-radius: 10px;
    /*border-style: solid;
    border-width: 2px;
    border-color: #484c6e;*/
    text-align: center; 
    margin: 5px;
    padding-top: 14px;
    padding-bottom: 7px;
    padding-left: 24px;
    padding-right: 24px;
    background-color:#fdf3bb;
    /*row-gap: 24px;
    column-gap: 24px;*/
    
}


.kurs_index-card-green {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #fdf3bb; 
    padding-bottom: 24px;
    background-color: #61b2a9;
    justify-content: space-between;
}

.kurs_index-card-red {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #fdf3bb; 
    padding-bottom: 24px;
    background-color:#fa618d;
    justify-content: space-between;
}

.kurs_index-card-orange {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #fdf3bb; 
    padding-bottom: 24px;
    background-color:#fb8f75;
    justify-content: space-between;
}


.kurs_index-card-img{
    height: 240px;
    max-width: 100%;
    min-width: 100%;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 24px;  
}

.kurs_index-card-iframe{
    height: 240px;
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 24px;  
}

.kurs_index-card-ueb {
    font-family: Noto Sans;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left; 
    margin-right: 24px;
    margin-left: 24px; 
}

.kurs_index-card-ueb2 {
    font-family: Noto Sans;
    font-weight: 700;
    font-style: italic;
    font-size: 0.8rem;
    text-align: left;
    margin-right: 24px;
    margin-left: 24px;

}


.kurs_index-card-inhalt {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    margin-top: 14px; 
    margin-left: 24px; 
    margin-right: 24px; 
    margin-bottom: 24px; 
    font-family: Noto Sans;
    font-size: 1rem;
    text-align: left;
}


.kurs_index-card-button {
    /*background-color: #62b2a9;*/
    border-radius: 10px;
    /*border: #484c6e solid 2px;*/
    border: #fdf3bb solid 2px;
    cursor: pointer;
    /*display: inline-block;*/
    font-size: 1rem;
    padding: 0px 5px 2px 5px;
    text-align: center;
    text-decoration: none;
    margin-left: 24px; 
    margin-right: 24px; 

}

.kurs_index-card-button a{
    color: #fdf3bb;
    text-align: center;
    text-decoration: none;
}


.kurs_index-card-button a:hover {
    color: #484c6e;
        
}

/* kap_index */

.kap_index-ueb {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 0;
    border-radius: 10px;
    /*border-style: solid;
    border-width: 2px;
    border-color: #484c6e;*/
    text-align: center; 
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 2.5px;
    margin-bottom: 2.5px; 
    padding-top: 14px;
    padding-bottom: 7px;
    padding-left: 24px;
    padding-right: 24px;
    background-color:#62b2a9;
    
}

.kap_index-ueb h5{
    color:#fdf3bb;
    font-size: 1.3rem;
}

.kap_index-kap-ueb{  
    border: #fdf3bb solid 2px;
    background-color: #fa618d;
    border-radius: 10px;
    color: #fdf3bb;
    text-align: left; 
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 2.5px;
    margin-bottom: 2.5px; 
    padding: 2px;
    padding-left: 7px;
    padding-right: 30px;
}
.kap_index-con1 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 0;
    border-radius: 10px;
    /*border-style: solid;
    border-width: 2px;
    border-color: #484c6e;*/
    text-align: center; 
    margin: 5px;
    padding-top: 14px;
    padding-bottom: 7px;
    padding-left: 24px;
    padding-right: 24px;
    background-color:#fdf3bb;
    /*row-gap: 24px;
    column-gap: 24px;*/
    
}
/*
.kap_index-bg {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;*/
    /*background-image: url('images/korea-bg.jpg');*/
    /*background-size: cover;
    background-position: 50%;
    z-index:-1;
}
*/
.kap_index-card {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /*flex-grow: 0;*/
    /*width: 320px;*/
    /*width: 291px;*/
    min-width: 320px;
    max-width: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #fdf3bb; 
    /*margin: 29px;*/ 
    padding-bottom: 24px;
    /*background-color:#a1ffda;*/
    /*box-shadow: 5px 10px 18px #fdf3bb;*/
    justify-content: space-between;
}

.kap_index-card-green {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #fdf3bb; 
    padding-bottom: 24px;
    background-color: #61b2a9;
    justify-content: space-between;
}

.kap_index-card-red {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #fdf3bb; 
    padding-bottom: 24px;
    background-color:#fa618d;
    justify-content: space-between;
}

.kap_index-card-orange {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #fdf3bb; 
    padding-bottom: 24px;
    background-color:#fb8f75;
    justify-content: space-between;
}

.kap_index-card:nth-child(3n+1) {
    background-color: #61b2a9;
    /*color: #fffeef; */
}
.kap_index-card:nth-child(3n+2) {
    /*background-color:#ff508d;*/
    background-color:#fb8f75;
    color: #fdf3bb;
}

.kap_index-card:nth-child(3n+2) a{
    /*background-color:#ff508d;*/
    background-color:#fb8f75;
    color: #fdf3bb;
}

.kap_index-card:nth-child(3n+2) a:hover{
    /*background-color:#ff508d;*/
    color: #484c6e;
}


.kap_index-card:nth-child(3n+2) .kap_index-card-button{
    /*background-color:#ff508d;*/
    background-color:#fb8f75;
    border: #fdf3bb solid 2px;
}

.kap_index-card:nth-child(3n) {
    background-color:#fa618d;
    /*background-color:#7fffcd;*/
    /*color: #fffeef; */
}


/*.kap_index-card img{
    width: 0;
    min-width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 24px;  
}*/

.kap_index-card-img{
    height: 240px;
    max-width: 100%;
    min-width: 100%;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 24px;  
}

.kap_index-card-iframe{
    height: 240px;
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 24px;  
}

.kap_index-card-ueb {
    font-family: Noto Sans;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left; 
    margin-right: 24px;
    margin-left: 24px; 
}

.kap_index-card-ueb2 {
    font-family: Noto Sans;
    font-weight: 700;
    font-style: italic;
    font-size: 0.8rem;
    text-align: left;
    margin-right: 24px;
    margin-left: 24px;

}

/*.kap_index-card-img img{
    /*width: 339px;
    margin: -24px;
    height: auto;*/
    /*border-top-left-radius: 10px;
    border-top-right-radius: 10px; 
}*/

.kap_index-card-inhalt {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    margin-top: 14px; 
    margin-left: 24px; 
    margin-right: 24px; 
    margin-bottom: 24px; 
    font-family: Noto Sans;
    font-size: 1rem;
    text-align: left;
}


.kap_index-card-button {
    /*background-color: #62b2a9;*/
    border-radius: 10px;
    /*border: #484c6e solid 2px;*/
    border: #fdf3bb solid 2px;
    cursor: pointer;
    /*display: inline-block;*/
    font-size: 1rem;
    padding: 0px 5px 2px 5px;
    text-align: center;
    text-decoration: none;
    margin-left: 24px; 
    margin-right: 24px; 

}

.kap_index-card-button a{
    color: #fdf3bb;
    text-align: center;
    text-decoration: none;
}


.kap_index-card-button a:hover {
    color: #484c6e;
        
}

/* trainer_index */

.trainer_index-card {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /*flex-grow: 0;*/
    /*width: 320px;*/
    /*width: 291px;*/
    min-width: 320px;
    max-width: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    /*margin: 29px;*/ 
    padding-bottom: 24px;
    /*background-color:#a1ffda;*/
    /*box-shadow: 5px 10px 18px #fdf3bb;*/
}


.trainer_index-card:nth-child(5n+1) {
    /*background-color:#a1ffda;*/
    background-color:#95bcff;
}

.trainer_index-card:nth-child(5n+1) li{
    color: #484c6e;
}
.trainer_index-card:nth-child(5n+2) {
    background-color:#ffd87e;
}
.trainer_index-card:nth-child(5n+2) li{
    color: #484c6e;
}

.trainer_index-card:nth-child(5n+3) {
    background-color: #ff8566;
    /*color: #fffeef; */
}
.trainer_index-card:nth-child(5n+4) {
    /*background-color:#ff508d;*/
    background-color:#d73884;
    color: #fdf3bb;
}

.trainer_index-card:nth-child(5n+4) a{
    /*background-color:#ff508d;*/
    background-color:#d73884;
    color: #fdf3bb;
}

.trainer_index-card:nth-child(5n+4) a:hover{
    /*background-color:#ff508d;*/
    color: #484c6e;
}


.trainer_index-card:nth-child(5n+4) .trainer_index-card-button{
    /*background-color:#ff508d;*/
    background-color:#d73884;
    border: #fdf3bb solid 2px;
}

.trainer_index-card:nth-child(5n) {
    background-color:#a1ffda;
    /*background-color:#7fffcd;*/
    /*color: #fffeef; */
}



.trainer_index-card-green {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    padding-bottom: 24px;
    background-color:#a1ffda;
}

.trainer_index-card-green .trainer_index-card-ueb2{
    background-color:#ff8566;
    color:#a1ffda;
}


.trainer_index-card-green .trainer_index-card-ueb3{
    color:#484c6e;
}


.trainer_index-card-green .trainer_index-card-inhalt{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.trainer_index-card-green .trainer_index-card-button {
    background-color: #ff508d;
    border: #ff508d solid 2px;
    color: #fdf3bb;  
}

.trainer_index-card-green .trainer_index-card-button a{
    color: #fdf3bb;  
}

.trainer_index-card-green .trainer_index-card-button:hover {
    color: #fdf3bb; 
    background-color: transparent;      
}

.trainer_index-card-green .trainer-select-menu {
    border: 2px solid #484c6e; 
    color: #484c6e;
    background-color: transparent;     
}

    

.trainer_index-card-yellow {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    padding-bottom: 24px;
    background-color:#ffd87e;
}

.trainer_index-card-yellow .trainer_index-card-button {
    background-color: #95bcff;
    border: #95bcff solid 2px;
    color: #484c6e;  
}

.trainer_index-card-yellow .trainer_index-card-button:hover {
    color: #484c6e; 
    background-color: transparent;      
}

.trainer_index-card-orange {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e;  
    padding-bottom: 24px;
    background-color: #ff8566;
}

.trainer_index-card-orange .trainer_index-card-ueb3{
    color:#484c6e;
}

.trainer_index-card-orange .trainer-select-menu {
    border: 2px solid #484c6e; 
    color: #484c6e;
    background-color: transparent;      
}

.trainer_index-card-orange .trainer_index-card-inhalt{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.trainer_index-card-orange .trainer_index-card-button {
    background-color: #ffd87e;
    border: #ffd87e solid 2px;
    color: #484c6e;  
}

.trainer_index-card-orange .trainer_index-card-button a{
    color: #484c6e;  
}

.trainer_index-card-orange .trainer_index-card-button:hover {
    color: #484c6e; 
    background-color: transparent;      
}

.trainer_index-card-red {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #fdf3bb;
    padding-bottom: 24px;
    background-color:#d73884;
}

.trainer_index-card-red .trainer_index-card-ueb3{
    color:#fdf3bb;
}

.trainer_index-card-red .trainer-select-menu {
    border: 1px solid #fdf3bb; 
    color: #fdf3bb;
    background-color: transparent;       
}

.trainer_index-card-red .trainer_index-card-inhalt{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.trainer_index-card-red .trainer_index-card-button {
    
    border: #fdf3bb solid 2px;
    color: #fdf3bb;  
}

.trainer_index-card-red .trainer_index-card-button a{
    color: #fdf3bb;  
}

.trainer_index-card-red .trainer_index-card-button a:hover{   
    background-color: #fdf3bb; 
    color: #484c6e; 
}

.trainer_index-card-red .trainer_index-card-button:hover { 
    background-color: #fdf3bb;
    color: #484c6e;   
}

.trainer_index-card-blue {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 320px;
    max-width: 320px;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    padding-bottom: 24px;
    background-color:#95bcff;
}

.trainer_index-card-blue .trainer_index-card-button {
    background-color: #ffd87e;
    border: #ffd87e solid 2px;
    color: #484c6e;  
}

.trainer_index-card-blue .trainer_index-card-button:hover {
    color: #484c6e; 
    background-color: transparent;      
}



.trainer_index-card-inhalt h4{
    color: #ff8566;

}

.trainer_index-card img{
    width: 0;
    min-width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 24px;  
}

.trainer_index-card-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /*margin-bottom: 24px; */ 
}

.trainer_index-card-iframe {
    width: 0;
    min-width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /*margin-bottom: 24px; */ 
}

.trainer_index-card-ueb {
    font-family: Noto Sans;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left; 
    margin-right: 24px;
    margin-left: 24px; 
    margin-top: 24px;
}

.trainer_index-card-ueb2 {
    font-family: Noto Sans;
    font-weight: 500;
    /*font-style: italic;*/
    font-size: 1rem;
    text-align: left;
    margin-left: 24px;
    margin-right: 24px;
    margin-top: 24px;
    margin-bottom: 12px;
    color: #fdf3bb;
    background-color: #ff508d;
    border-radius: 10px;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.trainer_index-card-ueb3 {
    font-family: Noto Sans;
    font-weight: 300;
    /*font-style: italic;*/
    font-size: 0.8rem;
    text-align: left;
    margin-left: 24px;
    margin-right: 24px;
    margin-top: 12px;
    margin-bottom: 12px;
    color: #fdf3bb;
}
/*
.trainer_index-card-img img{

    object-fit: contain;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

}
*/
.trainer_index-card-img2{
    /*object-fit: contain;
    width: 320px;
    height: 180px;*/
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
     
}

.trainer_index-card-inhalt {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    margin-top: 12px; 
    margin-left: 24px; 
    margin-right: 24px; 
    margin-bottom: 12px; 
    font-family: Noto Sans;
    font-size: 1rem;
    text-align: left;
}


.trainer_index-card-button {
    /*background-color: transparent;*/
    background-color: #d73884;
    border-radius: 10px;
    border: #d73884 solid 2px;
    cursor: pointer;
    /*display: inline-block;*/
    color: #fdf3bb;
    font-size: 1rem;
    padding: 5px 5px 5px 5px;
    text-align: left;
    text-decoration: none;
    margin-left: 24px; 
    margin-right: 24px; 
    margin-top: 12px;
    margin-bottom: 12px;

}

.trainer_index-card-button a{
    color: #484c6e;
    text-align: center;
    text-decoration: none;
}


.trainer_index-card-button a:hover {
    color: #484c6e;       
}

.trainer_index-card-button:hover {
    color: #484c6e; 
    background-color: #a1ffda;      
}

.trainer_index-card-2boxcon {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 12px 24px 12px 24px;
}

.trainer_index-card-box {
    /*background-color: transparent;*/
    background-color: #95BCFF;
    border-radius: 10px;
    border: #95BCFF solid 2px;
    cursor: pointer;
    width: 110px;
    display: flex;
    flex-wrap: nowrap;
    color: #fffeef;
    font-size: 1rem;
    padding: 5px 5px 5px 5px;
    text-align: left;
    text-decoration: none;

}

.trainer_index-card-box a{
    color: #484c6e;
    text-align: center;
    text-decoration: none;
}


.trainer_index-card-box a:hover {
    color: #484c6e;       
}

.trainer_index-card-box:hover {
    color: #484c6e; 
    background-color: #a1ffda;      
}

.trainer-select-menu {
    height: 30px;
    margin: 5px;
    font-family: Noto Sans;
    font-size: 1rem;
    color: #484c6e;
    border-radius: 10px;
    background-color: #a1ffda;
    border: 2px solid #ff508d; 
    
  }


.uebungen-index-con1 {
	width: 100% - 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    border-radius: 10px;
    margin: 5px;
    color: #484c6e;
    background-color:#a1ffda; 
}

.uebungen-index-con11 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    max-height: 500px;
    /*max-width: fit-content;*/
    /*border-top-right-radius: 10px;*/ 
}

.uebungen-index-con-img{
    
    height: 500px;
    width: 533px;
    border-radius: 10px;
    object-fit: cover;
}


.uebungen-index-con12 {
    
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;  
}

.uebungen-index-con-title {
    
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;  
    font-family: Noto Sans;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left;
    margin: 5px; 
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
    padding-right: 12px;
}

.uebungen-index-con-progress-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    border-radius: 10px;
    text-align: left; 
    margin: 5px; 
    margin-left: 12px;
    margin-right: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
    padding-right: 12px;
    background-color:#95BCFF;
    /*border-style: solid;
    border-width: 2px;
    border-color: #62b2a9;*/
}

.uebungen-index-con-progress-bar .progress-bar-item-blue { margin-top: 2px; }
.uebungen-index-con-progress-bar .progress-bar-item-green { margin-top: 2px; }
.uebungen-index-con-progress-bar .progress-bar-item-yellow { margin-top: 2px; }
.uebungen-index-con-progress-bar .progress-bar-item-red { margin-top: 2px; }
.uebungen-index-con-progress-bar .progress-bar-item-active { margin-top: 2px; }

.uebungen-index-con-progress-bar-button {
    border: 2px solid #fa618d;
    background-color: #fa618d;
    border-radius: 6px;
    height: 24px;
    color: #fdf3bb;
    cursor: pointer;
    display: flex;
    font-size: 1rem;   
    margin-top: 2px;
    margin-right: 6px;
    margin-bottom: 2px;
    padding-bottom: 1px;
    padding-left: 12px;
    padding-right: 12px;
    text-align: left;
    text-decoration: none;
    }
    
.uebungen-index-con-progress-bar-button a{
    color: #fdf3bb;
    text-align: center;
    text-decoration: none;
    }
    
    
.uebungen-index-con-progress-bar-button a:hover {
    color: #484c6e;
    }
        
.uebungen-index-con-progress-bar-button:hover {
    color: #484c6e;
    }




@media (max-width: 1100px) {

    .uebungen-index-con1 { flex-direction: column;}
 
    .uebungen-index-con-img {
    
        width: 100%;
        height: 220px;
        object-fit: cover;
    }
}

/* uebungskarten */
.trainer-card-green {
	width: 100% - 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    border-radius: 10px;
    margin: 5px;
    color: #484c6e;
    background-color:#a1ffda; 
}

.trainer-card-green .trainer-card-name-kor{   
    color: #484c6e;
    background-color: #a1ffda;
    border: 1px solid #484c6e; 
}

.trainer-card-green .trainer-select-menu {
    color: #484c6e;
    background-color: #a1ffda;
    border: 2px solid #ff508d; 
}

.trainer-card-green .trainer-card-ueb2 {
    color: #ff508d;
}

.trainer-card-orange {
	width: 100% - 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color:#fdf3bb;
    border-radius: 10px;
    margin: 5px;
    color: #484c6e;
    background-color: #ff8566; 
}

.trainer-card-orange .trainer-card-name-kor{   
    color: #484c6e;
    background-color: #ff8566;
    border: 1px solid #484c6e; 
}

.trainer-card-orange .trainer-select-menu {
    color: #484c6e;
    background-color: #ff8566;
    border: 2px solid #ffd87e; 
}

.trainer-card-orange .trainer-card-button {
    background-color: #ffd87e;
    border: #ffd87e solid 2px;
    color: #484c6e;  
}

.trainer-card-orange .trainer-card-button a{
    color: #484c6e;  
}

.trainer-card-orange .trainer-card-button:hover {
    color: #484c6e; 
    background-color: transparent;      
}

.trainer-card-orange span {
    color: #ffd87e;  
}

.trainer-card-red {
	width: 100% - 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color:#fdf3bb;
    border-radius: 10px;
    margin: 5px;
    color: #fdf3bb;
    background-color:#d73884; 
}

.trainer-card-red .trainer-card-kor{  
    
    color: #fdf3bb;
}

.trainer-card-red .trainer-card-name-kor{   
    color: #fdf3bb;
    background-color: #d73884;
    border: 1px solid #fdf3bb; 
}

.trainer-card-red .trainer-select-menu {
    color: #fdf3bb;
    background-color: #d73884;
    border: 2px solid #a1ffda; 
}

.trainer-card-red .trainer-card-button {
    background-color: #a1ffda;
    border: #a1ffda solid 2px;
    color: #484c6e;  
}

.trainer-card-red .trainer-card-button a{
    color: #484c6e;  
}

.trainer-card-red .trainer-card-button:hover {
    color: #484c6e; 
    background-color: transparent;      
}

.trainer-card-red span {
    color: #a1ffda;  
}

.trainer-card-yellow {
	width: 100% - 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; 
    border-radius: 10px;
    margin: 5px;
    color: #484c6e;
    background-color:#ffd87e; 
}

.trainer-card-yellow .trainer-card-name-kor{   
    color: #484c6e;
    background-color: #95BCFF;
    border: 1px solid #484c6e; 
}

.trainer-card-yellow .trainer-select-menu {
    color: #484c6e;
    background-color: #95BCFF;
    border: 2px solid #ffd87e; 
}

.trainer-card-yellow .trainer-card-button {
    background-color: #95BCFF;
    /*border: #95BCFF solid 2px;*/
    border: none;
    color: #fa618d;  
}

.trainer-card-yellow .trainer-card-button a{
    color: #fa618d;   
}

.trainer-card-yellow .trainer-card-button:hover {
    color: #95BCFF; 
    background-color: #fa618d;      
}



.trainer-card-yellow .trainer-card-button-red {
    background-color: #fa618d;
    /*border: #95BCFF solid 2px;*/
    border: none;
    color: #484c6e;  
}

.trainer-card-yellow .trainer-card-button-red a{
    color: #484c6e;
    text-decoration: none;  
}

.trainer-card-yellow .trainer-card-button-red:hover {
    color: #95BCFF;     
}

/* 2026 */

.uebung-card26-blue {
	width: 100% - 10px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap; 
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: 10px 5px 0px 5px;
    color: #484c6e;
    background-color:#95BCFF; 
}

.uebung-card26-blue span {
    color: #A1FFDA;  
}

.uebung-card26-con-row {
	
    display: flex;
    flex-direction: row;
}

.uebung-card26-con-col {	
    display: flex;
    flex-direction: column;
}

.uebung-card26-ueb {   
    padding: 24px;
    font-family: Noto Sans;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left;  
}

.uebung-card26-txt {   
    padding: 0px 24px 0px 24px;
    font-family: Noto Sans;
    font-size: 1.2em;
    font-weight: 500;
    text-align: left;  
}

.uebung-card26-txt2 {   
    padding: 0px 24px 0px 24px;
    font-family: Noto Sans;
    font-size: 1em;
    font-weight: 300;
    text-align: left;  
}

.uebung-card26-img1{
    
    border-radius: 20%;
    height: 300px;
    padding: 0px 24px 24px 24px;
    object-fit: cover;
    
}

.uebung-card26-img2{
    
    border-radius: 20%;
    height: 200px;
    padding: 0px 24px 24px 24px;
    object-fit: cover;
    
}

.uebung-card26-audio_button1 {   
    border: none;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    align-self: center;
    cursor: pointer;
    width: 100px;
    height: 100px;
    background-image: url('/static/icons/play_circle_tred.png');
    background-size: cover;
    background-position: 50%;
    z-index: 5;
    }

.uebung-card26-audio_button1:hover {
    background-image: url('/static/icons/play_circle_tgreen.png');
    }

.uebung-wortcard26 {
    width: 100% - 10px;
    max-width: 500px;
    border-radius: 10px;
    margin: 12px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.uebung-wortcard26-img1{
    
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.uebung-wortcard26-kordeu {
	
    width: 100%;
    height: 60px;
    bottom: 0px;
    position: relative;
    background: #a1ffda;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;   
}

.uebung-wortcard26-kor {
    font-size: 1.5em;
    padding-left: 5px;
}

.uebung-wortcard26-deu {
    font-size: 1em;
    padding-left: 5px;
    color:#95BCFF;
}

.uebung-wortcard26-audio_button1 {   
    
    border: none;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    align-self: center;
    cursor: pointer;
    width: 100px;
    height: 100px;
    background-image: url('/static/icons/play_circle_tred.png');
    background-size: cover;
    background-position: 50%;
    z-index: 5;
    }

.uebung-wortcard26-audio_button1:hover {
    background-image: url('/static/icons/play_circle_tblue.png');
    }

    .uebung-wortcard26-audio_button2 {   
    
    border: none;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    position: absolute;
    top: -110px;
    right: 10px;
    cursor: pointer;
    width: 100px;
    height: 100px;
    background-image: url('/static/icons/play_circle_tred.png');
    background-size: cover;
    background-position: 50%;
    z-index: 6;
    }

.uebung-wortcard26-audio_button2:hover {
    background-image: url('/static/icons/play_circle_tgreen.png');
    }

.uebung-redecard26 {
    width: 100% - 10px;
    max-width: 500px;
    border-radius: 10px;
    margin: 12px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background: #a1ffda;
}

.uebung-redecard26 span {
    color: #484c63;
}

.uebung-redecard26-kor {
    font-size: 1.5em;
    padding-left: 5px;
    
    margin: 12px;
}

.uebung-redecard26-deu {
    font-size: 1em;
    padding-left: 5px;
    color:#95BCFF;
    margin: 12px;
}

.uebung-redecard26-audio_button1 {   
    border: none;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    align-self: center;
    cursor: pointer;
    width: 100px;
    height: 100px;
    background-image: url('/static/icons/play_circle_tred.png');
    background-size: cover;
    background-position: 50%;
    z-index: 5;
    }

.uebung-redecard26-audio_button1:hover {
    background-image: url('/static/icons/play_circle_tblue.png');
    }


.uebung-wort34card26-grid {
    align-self: flex-start;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    max-height: 500px;
    margin:10px;

}

.wort3card26-con {
	width: 170px;
    height: 170px;
    border-radius: 10px;
    margin: 6px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
}


.wort3card26-img{
    height: 140px;
    min-width: 170px;
    max-width: 170px;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.wort3card26-kordeu {
	position: absolute;
    z-index: 2;
    width: 100%;
    height: 60px;
    bottom: 0px;
    background: #a1ffda;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
     
}

.wort3card26-frage {
	position: absolute;
    z-index: 3;
    font-size: 1rem;
    bottom: 5px;
    left: 10px;
    color:#fa618d;
}




.wort3card26-audio_button1 {   
    border: none;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    align-self: center;
    margin-left: 20%;
    cursor: pointer;
    width: 100px;
    height: 100px;
    background-image: url('/static/icons/play_circle_tred.png');
    background-size: cover;
    background-position: 50%;
    z-index: 5;
    }

.wort3card26-audio_button1:hover {
    background-image: url('/static/icons/play_circle_tgreen.png');
    }


.wort4card26-con {
	width: 170px;
    height: 170px;
    border-radius: 10px;
    margin: 6px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    position: relative;
}

.wort4card26-audio_button {   
    border: none;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    align-self: center;
    cursor: pointer;
    width: 100px;
    height: 100px;
    background-image: url('/static/icons/play_circle_tred.png');
    background-size: cover;
    background-position: 50%;
    z-index: 5;
    }

.wort4card26-audio_button:hover {
    background-image: url('/static/icons/play_circle_tgreen.png');
    }

.wort4card26-kor {
	position: absolute;
    z-index: 3;
    font-size: 1.3em;
    font-weight: 300; 
    bottom: 25px;
    left: 10px; 
    color:#fa618d;
}


.ltxt_card26-blue {  
    border: 2px solid #a1ffda;
    display: inline-block;
    border-radius: 20px;
    color: #484c6e;
    margin: 10px 10px 10px 10px;
    font-size: 1.3rem;
    height: 35px;
    width: 35px; 
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}

@media (max-width: 1100px) {


    .uebung-wort34card26-grid {
        align-self: center;

}
 
    .trainer-card-con-media img {
    
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

    .trainer-card-yellow-con-media img {
        height: 200px;
        width: 300px;
        border-radius: 10px;
        object-fit: fill;
        align-self: center;
    }

    .trainer-card-video {
    
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

    .trainer-card-audio{
        height: 100px;
        max-width: 767px;
        width: 100%;
        object-fit: cover;
    }
    
    
    .trainer-card-audio-img{
        height: 220px;
        max-width: 767px;
        width: 100%;
        object-fit: cover;
        
    }

    .trainer-card-con-media form{
        height: 320px;
        max-width: 767px;
        width: 100%;
        object-fit: cover;
    }

}


/* ---- */

.trainer-card-button-green a{
    color: #484c6e; 
    text-decoration: none; 
}

.trainer-card-button-green:hover {
    background-color: #fa618d;
    color: #fa618d;      
}

.trainer-card-yellow span {
    color: #fa618d;  
}

.trainer-card-con-media {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    max-height: 500px;
    /*max-width: fit-content;*/
    /*border-top-right-radius: 10px;*/ 
}

.trainer-card-con-media form{
    height: 500px;
    width: 533px;
}

.trainer-card-con-media4 {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    max-height: 500px;
    padding:6px;
    /*max-width: fit-content;*/
    /*border-top-right-radius: 10px;*/ 
}

.media4-con1 {
	width: 170px;
    height: 170px;
    border-radius: 10px;
    margin: 6px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
}

.media4-con2 {
	width: 340px;
    height: 340px;
    border-radius: 10px;
    margin: 6px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
}

.media4-img{
    height: 140px;
    min-width: 170px;
    max-width: 170px;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.media4-img2{
    height: 280px;
    min-width: 340px;
    max-width: 340px;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.media4-kordeu {
	position: absolute;
    z-index: 2;
    width: 100%;
    height: 60px;
    bottom: 0px;
    background: #95BCFF;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
     
}


.media4-frage {
	position: absolute;
    z-index: 3;
    font-size: 1rem;
    bottom: 5px;
    left: 10px;
    color:#fa618d;
}

.trainer-card-audio-img{
    height: 400px;
    width: 533px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.trainer-card-img{
    
    height: 500px;
    width: 533px;
    border-radius: 10px;
    object-fit: cover;
}
/*
.trainer-card-con-media img{
    
    height: 500px;
    width: 533px;
    border-radius: 10px;
    object-fit: cover;
}*/

.trainer-card-audio{
    
    height: 100px;
    width: 533px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    object-fit: cover;
}


.trainer-card-yellow_audio_button {   
    border: none;  
    display: flex;
    flex-direction: column-reverse;
    cursor: pointer;
    /*margin: 0px 0px 0px 150px;*/    
    }

.play_circle_red {   
    align-self: center; 
    }

.trainer-card-yellow-ueb {
    font-family: Noto Sans;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: center;
}

.trainer-card-yellow-ueb3 {
    font-family: Noto Sans;
    font-weight: 300;
    font-size: 0.8rem;
    text-align: left;
    margin-top: 6px;
    margin-bottom: 6px;
    text-align: center;
}

.trainer-card-yellow-con-media {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    max-height: 500px;
    /*max-width: fit-content;*/
    /*border-top-right-radius: 10px;*/ 
}

.trainer-card-yellow-img{
    
    height: 500px;
    width: 533px;
    border-radius: 10px;
    object-fit: fill;
    align-self: center;
}
.trainer-card-video{
    
    height: 500px;
    width: 533px;
    border-radius: 10px;
    object-fit: cover;
}

.trainer-card-con-text {
    
    display: flex;
    flex-direction: column;
    /*min-width: 600px;*/
    padding: 24px;
    flex-wrap: wrap;  
}


.trainer-card-ueb {
    font-family: Noto Sans;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left;
}

.trainer-card-ueb2 {
    font-family: Noto Sans;
    font-weight: 500;
    font-size: 1.5rem;
    text-align: left;
    margin-top: 6px;
    margin-bottom: 6px;
    color: #a1ffda;
    border-radius: 10px;
}

.trainer-card-ueb3 {
    font-family: Noto Sans;
    font-weight: 300;
    font-size: 0.8rem;
    text-align: left;
    margin-top: 6px;
    margin-bottom: 6px;
}

.trainer-card-inhalt {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; 
    margin-top: 12px; 
    margin-bottom: 12px; 
    font-family: Noto Sans;
    font-size: 1.1rem;
    text-align: left;
}

.trainer-card-kor {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    /*min-width: 50%;
    flex-grow: 1;*/
    font-family: Noto Sans;
    font-size: 1.3rem;
    font-weight: 500;
    color: #484c6e;
    margin-top: 6px; 
    margin-bottom: 6px;
    
}

.trainer-card-kor .trainer-select-menu {
    height: 30px;
    margin: 5px;
    font-family: Noto Sans;
    font-size: 1.1rem;
    border-radius: 10px;  
  }

  .trainer-card-name-kor{  
    
    width: 40px;
    min-width: 40px;
    border-radius: 10px;
    background-color: #fdf3bb;
    color: #484c6e; 
    font-size: 1.1rem;
    font-weight: 300;
    padding: 7px;
    padding-left: 7px;
    padding-right: 7px;
    margin-right: 10px;
}


.trainer-card-button {
    /*background-color: transparent;*/
    background-color: #ff508d;
    border-radius: 10px;
    border: #ff508d solid 2px;
    cursor: pointer;
    width: 100%;
    color: #fdf3bb;
    font-size: 1rem;
    padding: 5px 5px 5px 5px;
    text-align: center;
    text-decoration: none;

}

.trainer-card-button-red {
    /*background-color: transparent;*/
    background-color: #ff508d;
    border-radius: 10px;
    border: #ff508d solid 2px;
    cursor: pointer;
    width: 100%;
    color: #fdf3bb;
    font-size: 1rem;
    padding: 5px 5px 5px 5px;
    text-align: center;
    text-decoration: none;

}

.trainer-card-button-green {
    background-color: #a1ffda;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    width: 100%;
    color: #95bcff;
    font-size: 1rem;
    padding: 5px 5px 5px 5px;
    text-align: center;
    text-decoration: none;

}

.trainer-card-button a{
    color: #484c6e;
    text-align: center;
    text-decoration: none;
}

.trainer-card-button a:hover {
    color: #484c6e;       
}

.trainer-card-button:hover {
    color: #484c6e; 
    background-color: #a1ffda;      
}

/*kapitel-bar*/

.kapitel-bar{
    
    background-color: #61b2a9;
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    border-radius: 10px;
    text-align: left;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 5px;
    padding-top: 5px;
    margin: 5px;
    flex-wrap: wrap;
}

.kapitel-bar-right {    
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    text-align: right; 
}

.kapitel-bar-left {    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left; 
}

.kapitel-bar-item-green{  
    border: none;
    background-color: #61b2a9;
    border-radius: 15px;
    color: #fdf3bb;
    height: 24px;
    width: 24px;
    margin-top: 7px;
    margin-right: 6px;
    margin-bottom: 2px;
    padding-bottom: 1px;
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}

.kapitel-bar-item-green a{  
    text-decoration: none;
    color: #484c6e;
}

.kapitel-bar-item-green a:hover {
    color: #fa618d;
    }


.kapitel-bar-item-yellow{  
    border: none;
    background-color: #fdf3bb;
    border-radius: 15px;
    color: #484c6e;
    height: 24px;
    width: 24px;
    margin-top: 7px;
    margin-right: 6px;
    margin-bottom: 2px;
    padding-bottom: 1px;
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}

.kapitel-bar-item-yellow a{  
    text-decoration: none;
    color: #484c6e;
}
.kapitel-bar-item-yellow a:hover {
    color: #ff508d;
    }
    
.kapitel-bar-item-blue{  
    border: none;
    background-color: #484c6e;
    border-radius: 15px;
    color: #fdf3bb;
    height: 24px;
    width: 24px;
    margin-top: 7px;
    margin-right: 6px;
    margin-bottom: 2px;
    padding-bottom: 1px;
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}

.kapitel-bar-item-blue a{  
    text-decoration: none;
    color: #fdf3bb;
}
.kapitel-bar-item-blue a:hover {
    color: #ff508d;
    }

.kapitel-bar-item{
    height: 24px;
    margin-top: 0px;
    margin-right: 6px;
    margin-bottom: 0.5em;
    padding-bottom: 1px;
    font-weight: 500;
    font-size: 1.5em;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
    color: #fdf3bb;
}

.kapitel-bar-button {
    background-color: #484c6e;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: none;
    color: #fdf3bb;
    cursor: pointer;
    font-size: 1rem;
    height: 24px;
    margin-top: 7px;
    margin-bottom: 2px;
    padding-bottom: 1px;
    padding-right: 4px;
    padding-left: 4px;
    text-align: center;
    text-decoration: none;
    }
    
.kapitel-bar-button a{
    color: #fdf3bb;
    text-align: center;
    text-decoration: none;
    }
    
.kapitel-bar-button a:hover {
    color: #fa618d;
    }

.kapitel-bar-button:hover {
    color: #fa618d;
    }
    

.kapitel-bar-box {
    background-color: #a1ffda;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: none;
    color: #fdf3bb;
    cursor: pointer;
    font-size: 1rem;
    height: 24px;
    margin-top: 2px;
    margin-right: 6px;
    margin-bottom: 2px;
    padding-bottom: 1px;
    padding-right: 4px;
    padding-left: 4px;
    text-align: center;
    text-decoration: none;
    display: flex;
    }
        
.kapitel-bar-box a{
    color: #484c6e;
    text-align: center;
    text-decoration: none;
    }
        
.kapitel-bar-box a:hover {
    color: #fa618d;
    }

.kapitel-bar-box-item{  
    border: none;
    background-color: #fdf3bb;
    border-radius: 5px;
    color: #484c6e;
    height: auto;
    width: auto;
    margin-top: 5px;
    margin-right: 6px;
    margin-bottom: 2px;
    padding: 0px 2px 0px 2px;
    font-weight: 500;
    font-size: 0.7rem;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}


/*progress-bar26*/


.progress-bar26{
    
    
    display: flex;
    height: 10px;
    width: 100%;
    background-color: #95BCFF;
    position: fixed;
    top: 50px;
    z-index: 10;
    
}



.progress-bar26-bar{  
    margin-top: 2px;  
    background-color: #a1ffda;  
    height: 6px;
    z-index: 10;


}

/*progress-bar*/


.progress-bar{
    
    background-color: #95BCFF;
    display: flex;
    flex-direction: row; 
    border-radius: 10px;
    text-align: left;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 5px;
    padding-top: 5px;
    margin: 5px;
    flex-wrap: nowrap;
    overflow-x: scroll; 
}

.progress-bar::-webkit-scrollbar {
  display: none;
}


.progress-bar-item-green{  
    border: 2px solid #a1ffda;
    background-color: #a1ffda;
    border-radius: 15px;
    color: #484c6e;
    height: 24px;
    width: 24px;
    margin-top: 2px;
    margin-right: 6px;
    margin-bottom: 2px;
    padding-bottom: 1px;
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;


}

.progress-bar-item-green a{  
    text-decoration: none;
    color: #484c6e;
}

.progress-bar-item-green a:hover {
    color: #fa618d;
    }

.progress-bar-item-red{  
    border: 2px solid #ff508d;
    background-color: #ff508d;
    border-radius: 15px;
    color: #fdf3bb;
    height: 24px;
    width: 24px;
    margin-top: 2px;
    margin-right: 6px;
    margin-bottom: 2px;
    padding-bottom: 1px;
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}

.progress-bar-item-red a{  
    text-decoration: none;
    color: #484c6e;
}
.progress-bar-item-red a:hover {
    color: #fdf3bb;
    }

@keyframes active-item {
    0% { border-color: #fa618d;  }
    50% { border-color: #95BCFF;  }
    100% { border-color: #fa618d;  }
    }
    

.progress-bar-item-active{  
    animation: active-item 3000ms infinite;
    border: 2px solid #fa618d;
    background-color: #95BCFF;
    border-radius: 15px;
    color: #484c6e;
    height: 24px;
    width: 24px;
    margin-top: 2px;
    margin-right: 6px;
    margin-bottom: 2px;
    padding-bottom: 1px;
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
    }
    
.progress-bar-item-active a{  
    text-decoration: none;
    color: #484c6e;
    }
.progress-bar-item-active a:hover {
    color: #fdf3bb;
    }

.progress-bar-item-blue{  
    border: 2px solid #a1ffda;
    background-color: #95BCFF;
    border-radius: 15px;
    color: #484c6e;
    height: 24px;
    width: 24px;
    margin-top: 2px;
    margin-right: 6px;
    margin-bottom: 2px;
    padding-bottom: 1px;
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
    }
    
.progress-bar-item-blue a{  
    text-decoration: none;
    color: #484c6e;
    }
.progress-bar-item-blue a:hover {
    color: #fdf3bb;
    }

.progress-bar-item-yellow{  
    border: 2px solid #fdf3bb;
    background-color: #fdf3bb;
    border-radius: 15px;
    color: #484c6e;
    height: 24px;
    width: 24px;
    margin-top: 2px;
    margin-right: 6px;
    margin-bottom: 2px;
    padding-bottom: 1px;
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}

.progress-bar-item-yellow a{  
    text-decoration: none;
    color: #484c6e;
}
.progress-bar-item-yellow a:hover {
    color: #ff508d;
    }
    

.progress-bar-item{
    height: 24px;
    margin-top: 2px;
    margin-right: 6px;
    margin-bottom: 2px;
    padding-top: 2px;
    padding-bottom: 1px;
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
    color: #484c6e;
}

.progress-bar-button {
    background-color: #484c6e;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: none;
    color: #fdf3bb;
    cursor: pointer;
    font-size: 1rem;
    height: 24px;
    margin-top: 2px;
    margin-right: 6px;
    margin-bottom: 2px;
    padding-bottom: 1px;
    padding-right: 4px;
    padding-left: 4px;
    text-align: center;
    text-decoration: none;
    }
    
.progress-bar-button a{
    color: #fdf3bb;
    text-align: center;
    text-decoration: none;
    }
    
.progress-bar-button a:hover {
    color: #fa618d;
    }

.progress-bar-box {
    background-color: #a1ffda;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: none;
    color: #fdf3bb;
    cursor: pointer;
    font-size: 1rem;
    height: 24px;
    margin-top: 2px;
    margin-right: 6px;
    margin-bottom: 2px;
    padding-bottom: 1px;
    padding-right: 4px;
    padding-left: 4px;
    text-align: center;
    text-decoration: none;
    display: flex;
    }
        
.progress-bar-box a{
    color: #484c6e;
    text-align: center;
    text-decoration: none;
    }
        
.progress-bar-box a:hover {
    color: #fa618d;
    }

.progress-bar-box-item{  
    border: none;
    background-color: #fffeef;
    border-radius: 5px;
    color: #484c6e;
    height: auto;
    width: auto;
    margin-top: 5px;
    margin-right: 6px;
    margin-bottom: 2px;
    padding: 0px 2px 0px 2px;
    font-weight: 500;
    font-size: 0.7rem;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}

@media (max-width: 1100px) {

    .trainer-card-green { flex-direction: column;}
    .trainer-card-red { flex-direction: column;}
    .trainer-card-orange { flex-direction: column;}
    .trainer-card-yellow { flex-direction: column;}
 
    .trainer-card-con-media img {
    
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

    .trainer-card-yellow-con-media img {
        height: 200px;
        width: 300px;
        border-radius: 10px;
        object-fit: fill;
        align-self: center;
    }

    .trainer-card-video {
    
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

    .trainer-card-audio{
        height: 100px;
        max-width: 767px;
        width: 100%;
        object-fit: cover;
    }
    
    
    .trainer-card-audio-img{
        height: 220px;
        max-width: 767px;
        width: 100%;
        object-fit: cover;
        
    }

    .trainer-card-con-media form{
        height: 320px;
        max-width: 767px;
        width: 100%;
        object-fit: cover;
    }

}

.eingabe-box {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    height: 100%;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 12px 24px 12px 24px;
    background-color:#fdf3bb;
}

.eingabe-box-green {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    height: 100%;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 12px 24px 12px 24px;
    background-color:#87d6b7;

}

.eingabe-box-ueb {  
    font-family: Noto Sans;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left;
}

.eingabe-box-label {  
    font-family: Noto Sans;
    font-size: 1.3rem;
    font-weight: 500;
    text-align: left;
}

.eingabe-box-con-inhalt {    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left; 
    padding-bottom: 3px;     
}

.eingabe-box-con2-inhalt {    
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    text-align: left; 
    padding: 12px;
    margin: 0px -12px 12px -12px;
    border-radius: 10px;
    border: #484c6e dashed 1px;
}

.eingabe-box-con21-inhalt {    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left; 
}

.eingabe-box-inhalt {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left; 
    padding-top: 7px;
    font-size: 1.3rem;
    flex-grow: 1;
}

.eingabe-box-inhalt-1 {
    padding-top: 7px;
    font-size: 1rem;
    flex-grow: 1;
}

.eingabe-box-form {
    font-size: 1.1rem;
    
}

.eingabe-box-sel-menu {
    font-size: 1.1rem;
    margin-left: -5px; 
}

.eingabe-box-textform {
    display: flex;
    font-size: 1.1rem;
    margin-top: 5px;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left; 
    padding-bottom: 24px; 
}

.eingabe-card-ueb {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-grow: 1;
    border-radius: 10px;
    text-align: left; 
    margin: 5px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: #62b2a9;
    color:#fdf3bb;
}

.eingabe-card-ueb h4{
    color:#fdf3bb;
    font-style: normal;
    font-weight: 300;
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 5px;
}


.eingabe-card-ueb-button {
    background-color: #484c6e;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: none;
    color: #fdf3bb;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    height: 20px;
    padding: 0px 5px 5px 5px;
    margin: 7px 0px 7px 0px;
    text-align: center;
    text-decoration: none;
    }
    
.eingabe-card-ueb-button a{
    color: #fdf3bb;
    text-align: center;
    text-decoration: none;
    }
    
.eingabe-card-ueb-button a:hover {
    color: #fa618d;
    }
        
.eingabe-card-ueb-button:hover {
    color: #fa618d;
    }


.eingabe-card {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    border-radius: 10px;
    margin: 5px;
    padding: 24px;
    color: #484c6e;
    background-color:#fdf3bb; 
}

.eingabe-card-con-inhalt {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left; 
    padding-bottom: 24px;
}

.eingabe-card-con2-inhalt {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-align: left; 
    padding-bottom: 24px;
}

.eingabe-card-con3-inhalt {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-align: left; 
    padding-bottom: 0px;
}

.eingabe-card-con31-inhalt {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-align: left; 
    padding: 9px 10px 5px 5px;
}

.eingabe-card-plus a{
    color: #62b2a9;
    text-decoration: none;
    padding-right: 32px;
    padding-left: 0px;
    padding-bottom: 10px;
    font-size: 2rem;
    font-weight: bold; 
     }

.eingabe-card-plus a:hover {
    color: #fa618d;
    } 

.eingabe-card-inhalt {
    padding-left: 10px;
    padding-top: 5px;
    font-size: 1.3rem;
    flex-grow: 1;
    flex-basis: 150px;
    display: flex;
}

.eingabe-card-label {  
    font-family: Noto Sans;
    font-size: 1.3rem;
    font-weight: 500;
    text-align: left;
    padding-top: 5px;
    margin-right: 5px;
}

.eingabe-card-label2 {  
    font-family: Noto Sans;
    font-size: 1.3rem;
    font-weight: 500;
    text-align: left;
    padding: 9px 10px 5px 5px;
}

/* Customize the label (the container) */
.check-box-con {
    display: flex;
    position: relative;
    /*position: absolute;
    padding-left: 35px;
    margin-bottom: 12px;*/
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default checkbox */
.check-box-con input {
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
.check-box-neu-label {  
    font-family: Noto Sans;
    font-size: 1.3rem;
    font-weight: 500;
    text-align: left;
}

.check-box-neu-con {  
    font-family: Noto Sans;
    font-size: 1.3rem;
    font-weight: 500;
    text-align: left;
}


  /* Create a custom checkbox */
.check-box-neu {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    margin: 4px;
    margin-left: 10px;
    border-radius: 6px;
    background-color: #62b2a9;
    border-style: solid;
    border-width: 2px;
    border-color: #484c6e;
  }
  
  /* On mouse-over, background color */
.check-box-con:hover input ~ .check-box-neu {
    background-color: #484c6e;
  }
  
  /* When the checkbox is checked, background */
.check-box-con input:checked ~ .check-box-neu {
    background-color: #fa618d;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
.check-box-neu:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
.check-box-con input:checked ~ .check-box-neu:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
.check-box-con .check-box-neu:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

.table1-con{
	display: table;
    /*width: 100%;*/
	border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    margin: 5px; 
    padding: 24px;
    background-color:#fdf3bb;
}

.table1-row {
	display: table-row;
      
}

.table1-cellhead {
	border: #62b2a9 solid 1px;
    color: #fa618d;
	display: table-cell;
	padding: 3px 10px;
    border-radius: 10px;  
}

.table1-cell {
	border: #62b2a9 solid 1px;
	display: table-cell;
	padding: 3px 10px;
    border-radius: 10px;
    word-break: break-all;
    word-wrap: break-word;
}

.table1-cello {
	border: none;
	display: table-cell;
	padding: 3px 10px;
    border-radius: 10px;
}

.searchbar{
    /*width: 100%;*/
    background-color: #484c6e;
    display: flex;
    flex-direction: row; 
    border-radius: 10px;
    text-align: left;
    padding-left: 40px;
    padding-right: 50px;
    padding-bottom: 5px;
    padding-top: 5px;
    margin: 5px;
}

.searchbar-green{
    /*width: 100%;*/
    background-color: #87d6b7;
    display: flex;
    flex-direction: row; 
    flex-wrap: wrap;
    border-radius: 10px;
    text-align: left;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 5px;
    padding-top: 5px;
    margin: 5px;
}

.searchbar-item{
    margin: 10px;
    align-items:center;
}

.eingabe_bar-green{
    /*width: 100%;*/
    background-color: #87d6b7;
    color:#484c6e;
    display: flex;
    flex-direction: row; 
    border-radius: 10px;
    text-align: left;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 5px;
    padding-top: 5px;
    margin: 0px 5px 5px 5px;
}

.eingabe_bar-yellow{
    /*width: 100%;*/
    background-color: #fdf3bb;
    color:#484c6e;
    display: flex;
    flex-direction: row; 
    border-radius: 10px;
    text-align: left;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 5px;
    padding-top: 5px;
    margin: 0px 5px 0px 5px;
}

.eingabe_bar-con1 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-grow: 1;
    margin-right: 10px;
}

.eingabe_bar-con2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 8;
    border-radius: 10px;
    border: #484c6e dashed 1px;
}

.eingabe_bar-con3 {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    flex-grow: 1;
    margin-left: 10px;
}



.eingabe_bar-item1{
    margin: 5px 5px 5px 0px;
    align-items: flex-start;
}

.eingabe_bar-item2{
    margin: 5px;
    align-items: flex-start;
}

.eingabe_bar-item3{
    margin: 5px 0px 5px 5px;
    align-items: flex-end;
}


.eingabe_bar-label {  
    font-family: Noto Sans;
    font-size: 1.3rem;
    font-weight: 500;
    text-align: left;
    margin: 5px;
}

.eingabe_bar-label-red {  
    font-family: Noto Sans;
    font-size: 1.3rem;
    font-weight: 500;
    text-align: left;
    margin: 5px;
    color: #fa618d;
}


.iframe{

    background-color: #95bcff;
}

.medien-list-img{
    
    height: 100px;
    width: 100px;
    border-radius: 10px;
    object-fit: cover;
}

.medien-list-iframe{
    
    height: 100px;
    width: 100px;
    border-radius: 10px;
    object-fit: cover;
}

.eingabe-card-medien {
    display: grid;
    grid-template-columns: 30% 35% 35%;
    grid-template-rows: auto auto auto;
    border-radius: 10px;
    margin: 5px;
    /*padding: 12px;*/
    color: #484c6e;
    background-color:#fdf3bb; 
}

.eingabe-card-medien-con1 {
    text-align: left;
    grid-row: 1/4;
    grid-column: 1/2; 
    display: flex;
    margin: 12px;
    padding: 12px;
    flex-direction: column;
    flex-wrap: nowrap;
    border-radius: 10px;
    border: #484c6e dashed 1px;
}

.eingabe-card-medien-con2 {
    text-align: left;
    grid-row: 1/3;
    grid-column: 2/3; 
    display: flex;
    margin: 12px;
    padding: 12px;
    flex-direction: column;
    flex-wrap: nowrap;
    border-radius: 10px;
    border: #484c6e dashed 1px;
}

.eingabe-card-medien-con3 {
    text-align: left;
    grid-row: 1/3;
    grid-column: 3/4; 
    display: flex;
    margin: 12px;
    padding: 12px;
    flex-direction: column;
    flex-wrap: nowrap;
    border-radius: 10px;
    border: #484c6e dashed 1px;
}

.eingabe-card-medien-con4 {
    text-align: left;
    grid-row: 3/4;
    grid-column: 2/4; 
    display: flex;
    margin: 12px;
    padding: 12px;
    flex-direction: row;
    flex-wrap: nowrap;
    border-radius: 10px;
    border: #484c6e dashed 1px;
}

@media (max-width: 1012px) {

    .eingabe-card-medien {
        grid-template-columns: 100%;
    }

    
    .eingabe-card-medien-con1 {
        grid-row: 1/2;
        grid-column: 1/2; 
    }

    .eingabe-card-medien-con2 {
        grid-row: 2/3;
        grid-column: 1/2; 
    }

    .eingabe-card-medien-con3 {
        grid-row: 3/4;
        grid-column: 1/2; 
    }

    .eingabe-card-medien-con4 {
        grid-row: 4/5;
        grid-column: 1/2; 
    }
}

.eingabe-card-medien-con5 {    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-align: left; 
    padding-bottom: 24px;     
}

.eingabe-card-medien-zuordnen {
    display: flex;
    border-radius: 10px;
    margin: 5px;
    /*padding: 12px;*/
    color: #484c6e;
    background-color:#fdf3bb; 
}

.eingabe-card-medien-zuordnen-con1 {    
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    text-align: left; 
    margin: 12px;
    padding: 12px;
    border-radius: 10px;
    border: #484c6e dashed 1px;   
}

.eingabe-card-deukor-zuordnen {
    display: flex;
    border-radius: 10px;
    margin: 5px;
    /*padding: 12px;*/
    color: #484c6e;
    background-color:#fdf3bb; 
}

.eingabe-card-deukor-zuordnen-con1 {    
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    text-align: left; 
    margin: 12px;
    padding: 12px;
    border-radius: 10px;
    border: #484c6e dashed 1px;   
}

.eingabe-card-deukor-info-con1 {    
    display: flex;
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    text-align: left; 
    margin: 12px;
    padding: 12px;
    border-radius: 10px;
    border: #484c6e dashed 1px;   
}

.eingabe-card-audio-con1 {    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-align: left; 
    padding-bottom: 2px;     
}

.eingabe-card-audio_button {   
    border: none;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    cursor: pointer;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
    margin: 2px 2px 2px 2px;
    background-image: url('/static/icons/play_circle_red.png');
    background-size: cover;
    background-position: 50%;
    z-index: 5;
    }

.eingabe-card-audio_button:hover {
    background-image: url('/static/icons/play_circle_blue.png');
    }




.text-label-form1 {  
    font-family: Noto Sans;
    font-size: 1.3rem;
    font-weight: 500;
    text-align: left;
}

.text-form1 {
    margin-right: 24px;
    margin-left: 5px;
    min-width: 50px;
    font-family: Noto Sans;
    font-size: 1rem;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 5px;
    color: #484c6e;
    border: none;
    border-radius: 6px;
    display: flex;
}

.text-form2 {
    font-family: Noto Sans;
    font-size: 1rem;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    min-width: 50px;
    max-width: 100px;
    margin-top: 5px;
    color: #484c6e;
    border: none;
    border-radius: 6px;
    display: flex;
    background-color: #fffde8;
}

.text-form3 {
    font-family: Noto Sans;
    font-size: 1rem;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 5px;
    min-width: 50px;
    max-width: 50px;
    margin-top: 5px;
    margin-right: 5px;
    color: #484c6e;
    border: none;
    border-radius: 6px;
    display: flex;
}

.text-form4 {
    font-family: Noto Sans;
    font-size: 1rem;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 5px;
    min-width: 80px;
    max-width: 80px;
    margin-top: 5px;
    margin-right: 5px;
    color: #484c6e;
    border: none;
    border-radius: 6px;
    display: flex;
}

.textarea-form1 {
    font-family: Noto Sans;
    font-size: 1rem;
    text-align: start; 
    color: #484c6e;
    min-width: 50px;
    border: none;
    border-radius: 6px;
    padding-left: 5px;
    margin-right: 24px;
}

.eingabe-card-medien-img{    
    height: 100px;
    width: 150px;
    /*width: 100%;*/
    border-radius: 10px;
    object-fit: cover;
}

.eingabe-card-medien-iframe{  
    height: 100px;
    /*width: 533px;*/
    border-radius: 10px;
    object-fit: cover;
}


.summary-medien {
    display: flex;
    position: relative;  
    }

.summary-medien-label {
         
    text-align: left; 
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 800;
    font-size: 1.5em;
    padding-left: 48px;
    padding-right: 24px;
    color: #62b2a9;
}

.summary-medien::marker, .summary-medien::-webkit-details-marker {
color: transparent;
 }
 
.summary-medien::after {
    content:  "+"; 
    position: absolute;
    color: #62b2a9;
    font-size: 2em;
    font-weight: bold; 
    left: 10px;
    top: -8px;
    transition: all 0.5s;

 } 
 
 .details-medien[open] .summary-medien::after {
  color: #fa618d;
  transform: translate(5px,0) rotate(45deg);
 }


 .summary-deukor {
    display: flex;
    position: relative;  
    }


.summary-div{
    text-align: left; 
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 800;
    font-size: 1.5em;
    color: #62b2a9; 
        }

.summary-div a{
    color: #62b2a9;
    text-decoration: none;
    padding-right: 30px;
    padding-left: 12px;
    font-size: 2rem;
    font-weight: bold; 
     }

.summary-div a:hover {
    color: #fa618d;
    } 


.summary-deukor-label {
         
    text-align: left; 
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 800;
    font-size: 1.5em;
    padding-left: 48px;
    padding-right: 24px;
    color: #62b2a9;
}

.summary-deukor::marker, .summary-deukor::-webkit-details-marker {
color: transparent;
 }
 
.summary-deukor::after {
    content:  "+"; 
    position: absolute;
    color: #62b2a9;
    font-size: 2em;
    font-weight: bold; 
    left: 10px;
    top: -8px;
    transition: all 0.5s;

 } 
 
 .details-deukor[open] .summary-deukor::after {
  color: #fa618d;
  transform: translate(5px,0) rotate(45deg);
 }


 .deukor-list-img{
    
    height: 100px;
    width: 100px;
    border-radius: 10px;
    object-fit: cover;
}

.deukor-list-iframe{
    
    height: 100px;
    width: 100px;
    border-radius: 10px;
    object-fit: cover;
}

/* Usekkonfig Styles */

.userpro_konfig-text-form {
    font-family: Noto Sans;
    font-size: 1rem;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    min-width: 50px;
    max-width: 200px;
    margin: 5px;
    color: #484c6e;
    border: none;
    border-radius: 6px;
    align-self: center;
    background-color: #fffde8;
}

 .userpro_konfig-card {
    display: flex;
    z-index: 1;
    flex-direction: column;
    flex-wrap: wrap;
    max-width: 500px;
    border-radius: 10px;
    text-align: left; 
    color: #484c6e; 
    padding-bottom: 24px;
    background-color: #fdf3bb;
}

.userpro_konfig-card-ueb {
    font-family: Noto Sans;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left; 
    padding-bottom: 12px;
    padding-right: 24px;
    padding-left: 24px; 
    padding-top: 12px;
}


.userpro_konfig-card-inhalt {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    margin: 24px 12px 12px 12px; 
    font-family: Noto Sans;
    font-size: 1rem;
    text-align: left;
     
}


.userpro_konfig-card-button {
    background-color: #95bcff;
    border-radius: 10px;
    border: #484c6e solid 2px;
    cursor: pointer;
    color: #484c6e;
    font-size: 1rem;
    padding: 5px 5px 5px 5px;
    text-align: left;
    text-decoration: none;
    margin-left: 24px; 
    margin-right: 24px; 
    margin-top: 12px;
    margin-bottom: 12px;
}

.userpro_konfig-card-button a{
    color: #484c6e;
    text-align: center;
    text-decoration: none;
}

.userpro_konfig-card-button a:hover {
    color: #484c6e;       
}

.userpro_konfig-card-button:hover {
    color: #484c6e; 
    background-color: #ffd87e;     
}

.userpro_konfig-card-rbutton {
    border: 2px solid #fa618d;
    background-color: #fa618d;
    border-radius: 6px;
    font-family: Noto Sans;
    font-size: 1em;
    
    color: #fdf3bb;
    cursor: pointer; 
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 12px;
    padding-right: 12px;
    text-decoration: none;
    height: 30px;
    }
    
.userpro_konfig-card-rbutton a{
    color: #fdf3bb;
    text-align: center;
    text-decoration: none;
    }
     
.userpro_konfig-card-rbutton a:hover {
    color: #484c6e;
    }
        
.userpro_konfig-card-rbutton:hover {
    color: #484c6e;
    }

.userpro_konfig-card-bar{
    /*width: 100%;*/
    background-color: #95bcff;
    display: flex;
    flex-direction: row; 
    border-radius: 10px;
    text-align: left;
    padding-bottom: 5px;
    padding-top: 5px;
    margin: 5px;
}

.userpro_konfig-card-bar-item{
    margin-top: 10px;
    align-items:center;
    margin: 5px;
}


.userpro_konfig-card-bar2{
    
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
    border-radius: 10px;
    text-align: left;
    padding-bottom: 5px;
    padding-top: 5px;
    margin: 5px;
}

.userpro_konfig-card-bar2-item{
    margin-top: 10px;
    align-items:center;
}


.userpro_konfig-card-bar3 {
    /*width: 100%;*/
    background-color: #61b2a9;
    display: flex;
    flex-direction: column; 
    justify-content: center;
    border-radius: 10px;
    text-align: left;
    padding-bottom: 5px;
    padding-top: 5px;
    margin: 5px;
    }

.userpro_konfig-card-bar3-text1 {
    font-family: Noto Sans;
    font-size: 1.2em;
    font-weight: 500;
    text-align: center; 
    padding-bottom: 12px;
    padding-right: 24px;
    padding-left: 24px; 
    padding-top: 12px;
    color: #fdf3bb;
    }

.userpro_konfig-card-bar3-item{
    margin-top: 10px;
    align-self: center;
    color: #fdf3bb;
    }
    

.userpro_konfig-card-bar4 {
   
    background-color: #95bcff;
    display: flex;
    flex-direction: column; 
    justify-content: center;
    border-radius: 10px;
    text-align: left;
    padding-bottom: 5px;
    padding-top: 5px;
    margin: 5px;
    }

.userpro_konfig-card-bar4 .userpro_konfig-card-rbutton{
    padding: 0px 6px 0px 6px;
    margin: 6px;
}

.userpro_konfig-card-bar4-item{
    margin: 12px 24px 12px 24px;
    align-self: center;
    justify-content: space-between;
    color: #484c6e;
    }

.userpro_konfig-card-bar4-con{
    margin: 12px 24px 12px 24px;
    display: flex;
    flex-direction: row; 
    align-self: center;
    justify-content: space-between;
    color: #484c6e;
    }

.userpro_konfig-card-bar4-con .progress-bar-box{
    padding: 3px 6px 4px 6px;
}

.userpro_konfig-card-bar4-con .userpro_konfig-card-rbutton{
    padding: 0px 6px 0px 6px;
    margin: 6px;
}

/* aus alter css datei */

input::file-selector-button {
    background-color: #484c6e;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: none;
    color: #fdf3bb;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    padding: 5px 5px 5px 5px;
    /*padding: 0px 5px 2px 5px;*/
    text-align: center;
    text-decoration: none;
    }

input[type='file']{
    margin: 5px;
    font-size: 1rem;
    
}

textarea.textarea-wort-eingabe {
    font-family: Noto Sans;
    font-size: 1rem;
    display: flex;
    width: 90%;
    text-align: left; 
    color: #484c6e;
    border: #484c6e solid 4px;
    border-radius: 10px;
    margin: 5px;
    background-color: #fffef0; 
    padding-left: 3px;
}


input.input_tab-nr-eingabe1 {
    margin: 5px;
    font-size: 1rem;
    padding: 5px;
    max-width: 50px;
    border: #484c6e solid 4px;
    border-radius: 10px;
    display: flex;
}

input.input_tab-nr-eingabe2 {
    margin: 5px;
    font-size: 1rem;
    padding: 5px;
    max-width: 200px;
    border: #484c6e solid 4px;
    border-radius: 10px;
    
}

.input_text1 {
   font-size: 1rem;
   padding: 5px;
   margin: 5px;
   color: #484c6e;
   background-color: #fffde8;
   max-width: 50px;
   height: 20px;
   border: 1px solid #fa618d;
   border-radius: 5px;
}