@charset "UTF-8";

@font-face {
    font-family: "Titillium Web";
    src: url('https://you-du.de/kurse/img/TitilliumWeb-Regular.ttf') format('truetype');
	src: url('https://you-du.de/kurse/img/TitilliumWeb-Regular.woff2') format('woff2');
    font-style: normal;
	font-display: swap
}
@font-face {
    font-family: "Titillium Web";
    src: url('https://you-du.de/kurse/img/TitilliumWeb-Bold.ttf') format('truetype');
	src: url('https://you-du.de/kurse/img/TitilliumWeb-Bold.woff2') format('woff2');
    font-weight: bold;
	font-display: swap
}
@font-face {
    font-family: "Titillium Web";
    src: url('https://you-du.de/kurse/img/TitilliumWeb-Italic.ttf') format('truetype');
	src: url('https://you-du.de/kurse/img/TitilliumWeb-Italic.woff2') format('woff2');
    font-style: italic;
	font-display: swap
}


:root {
  --c_1: #8489A7; 
  --c_2: #7387FF; 
  --c_3: #FF00F5;
  --c_4: #DA88EF;
  --c_5: #D6DBFF;
  --c_6: #6a6d82;
  --e_h: 2em;
}


#wrp { position: relative; height: 100svh; width: 100vw; top: 0; left: 0; z-index: 1; font-family: 'Titillium Web', sans-serif; letter-spacing: .02em; font-size: 1.8vh; transition: opacity .3s; opacity: 0; }
#wrp.loaded  { opacity: 1;}

#wrp * { box-sizing:border-box; outline: none; user-select: none; align-self: center; touch-action: manipulation; }
#wrp input, #wrp textarea { -webkit-user-select: auto !important; border: none; border-radius: .1em; height: var(--e_h); line-height: var(--e_h); padding: 0 .5em; display: block; margin-bottom: .5em; width: 100%; font-family: 'Titillium Web', sans-serif; font-size: 1em; }
#wrp textarea { height: 5em; line-height: 1.2em; overflow-y: auto; padding: .5em; margin-bottom: 0; resize: vertical; }
#wrp .dpick { cursor: pointer !important; }
#wrp input[type="submit"] { background-color: red; color: white; text-align: center; width: 100%; }
#wrp input[type="text"]:hover { background-color: rgb(250,250,250); }
#wrp input[type="text"]:focus, #wrp .uz_active > p, #wrp textarea:focus, #wrp #m_i_l_input_wrapp #verschoben:focus::placeholder { background-color: #FFFAC1 !important; color: black !important; }

body #wrp .disabled:not(.s_l_w) { background-color: #bbb; }
#wrp input:disabled, #wrp textarea:disabled, html body #wrp e-u.disabled { background-color: #eee !important; }
body #wrp .disabled.s_l_w p:last-child { background-color: rgb(208, 16, 16); }
#wrp p { margin: 0; }
#wrp h1, #wrp h2, #wrp h3, #wrp h4, #wrp h5, #wrp h6 { margin: 1em 0 .5em 0; font-size: 1.4em; color: #666; }
#wrp h1 { margin: 0; font-size: 1.8em; color: black; margin-bottom: 20px; }

#wrp #content { margin-top: 0; padding-top: 2em; position: relative; z-index: 1; }
#wrp #content:after { clear: both; display: table; content: ""; }
#wrp #content > .left { width: calc(50% + .3em); position: relative; float: left; z-index: 0; }
#wrp #content > .right { position: relative; float: left; z-index: 0; }
#wrp #content > .left > div { width: 37em; position: relative; margin: 0 0 0 auto; padding: 0 .8em 0 2em; }
#wrp #content > .right > div { width: 35em; position: relative; padding-right: .8em; }

#wrp .scroll_element { overflow: scroll; height: calc(100svh - 5.3em); padding-right: .9em; -moz-scrollbar-color: transparent transparent; }
#wrp .scroll_element::-webkit-scrollbar { -webkit-appearance: none; background-color: transparent; width: 0; }
#wrp .scroll_element::-webkit-scrollbar-thumb { background-color: transparent; width: 0; -webkit-appearance: none; }
#wrp .scroll_element:after { height: 80vh; content: ""; display: block; }

#wrp #content .right { margin-left: 1.1em; }
#wrp #content .list > div { background-color: #CAD0F5; margin-bottom: .5em; position: relative; border-radius: .2em; }
#wrp #content .list > div.not_block { animation-name: not_block_blink; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; }

@keyframes not_block_blink {
    0% { background-color: #C2C6E3; }
    49% { background-color: #C2C6E3; }
    50% { background-color: #E3E6F6; }
    100% { background-color: #E3E6F6; }
}

#wrp #content .list > div > div { padding: 1.1em .5em; }
#wrp #content .list > div > div:first-child { cursor: pointer; }
#wrp #content .right .list > div > div { padding: .5em; }
#wrp #content .list > div p:first-of-type { color: #555; }
#wrp #content .list > div p { height: 1.5em; line-height: 1.5em; font-weight: bold; color: var(--c_6); }
#wrp #content .list > div.active { box-shadow: inset 0 0 .1em 0 rgba(251, 255, 145, 0.9); }
#wrp #content .list > div.active ~ div, #wrp #content .list > div:has(~ .active) { filter: grayscale(1); opacity: .4; background-color: #bbb; }
#wrp #content .list s-s { color: #787878; }
#wrp #content .right .list > div:after { display: table; clear: both; content: ""; }
#wrp #content .right .list > div > div { float: left; }
#wrp #content .right .list > div > div:nth-child(1) { width: 80%; }
#wrp #content .right .list > div > div:nth-child(2) { width: 20%; }
#wrp #content .right .list > div > div:nth-child(2) > * { margin: 0 0 0 auto; text-align: right; }
#wrp #content .right .list div.flx { display: flex; justify-content: end; height: 1.5em; }
#wrp #content .right .list div.flx i-i { display: block; height: 1em; line-height: 1em; background-color: var(--c_2); color: white; width: calc(var(--e_h) * 1.2); text-align: center; border-radius: .2em 0 0 .2em; font-size: .75em; }
#wrp #content .right .list div.flx i-i:last-child { background-color: var(--c_4); border-radius: 0 .2em .2em 0; }
#wrp #content .right .list div.flx i-i.red { background-color: rgb(215, 0, 0); }
#wrp #content .right .list div.flx i-i.low { color: rgba(255,255,255,.7); }
#wrp #content .right .list div.flx i-i.medium_low { color: rgba(255,255,255,.9); }
#wrp #content .right .list div.flx i-i.green { color: rgb(77, 255, 0); font-weight: bold; }

#wrp *.eve_x { color: red !important; width: fit-content; margin-left: 1.3em; font-family: Arial; cursor: pointer; opacity: .3; font-size: .9em; }
#wrp p.dublicate_btn { width: 1em; background-image: url(img/dublicate.svg); background-size: auto 100%; background-position: center; background-repeat: no-repeat; cursor: pointer; }
#wrp #content .right .list div.flx:first-child > * { height: 1.5em; line-height: 1.5em; }

#wrp g-samt { margin-left: .2em; width: calc(100% - .2em); display: block; font-size: 1.8em; border-bottom: dashed .08em var(--c_3); margin-bottom: .7em; margin-top: 1.45em; text-transform: uppercase; color: #999; }
#wrp #list_left g-samt:first-child { margin-top: -.5em; }

#wrp .scroll_thumb { width: .6em; position: absolute; top: 0; right: 0; background-color: #399BD5; cursor: pointer; min-height: 6em; max-height: 6em; border-radius: .1em; }
#wrp .scroll_element .details { width: 100%; margin: auto; background-color: #CAD0F5; padding: .5em; margin-bottom: 1em; display: none; border-radius: .2em; position: relative; z-index: 0; }
body.left_type_eve #wrp .left .scroll_element .details { display: block; }
body.left_type_eve #wrp .left .scroll_element .list { display: none; }

#wrp .l_i_t_wrapp { height: 7.2em; position: relative; }
#wrp .l_i_t_wrapp h2 { margin-top: 0; }
#wrp .l_i_t_wrapp h2, #wrp .l_i_t_wrapp input { width: calc(50% - .25em); }
#wrp .l_i_t_wrapp .bg_img_wrapp { position: absolute; height: 100%; width: calc(50% - .25em); top: 0; right: 0; background-color: rgba(255,255,255,.25); background-size: auto 50%; background-repeat: no-repeat; background-position: center; }
#wrp .l_i_t_wrapp .bg_img_wrapp img { position: absolute; width: calc(100% - 1em); height: calc(100% - 1em); top: .5em; left: .5em; object-fit: contain; object-position: top center; }

#wrp .las_list_img_wrapp { position: absolute; width: 6.5em; height: calc(100% - 2.3em); right: .5em; top: 0; bottom: 0; margin: auto; background-repeat: no-repeat; background-position: center; cursor: pointer; }
#wrp .las_list_img_wrapp > div { position: absolute; left: 0; top: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; text-transform: uppercase; text-align: center; font-size: .9em; line-height: 1.2; color: white; font-weight: bold; border-radius: .2em; }
#wrp .dein_kurs { background-color: var(--c_2); }
#wrp .in_planung { background-color: #aaa; }
#wrp .kurs_buchen { background-color: var(--c_4); }

#wrp .bearb_btn { position: absolute; height: 1.4em; width: 1.4em; border-radius: 50em; top: -.4em; left: -.7em; margin: auto; cursor: pointer; background-image: url(img/bearbeiten.svg); background-position: center; background-repeat: no-repeat; background-size: 85% auto; z-index: 2; background-color: #CAD0F5; }
#wrp .active .bearb_btn { background-color: #FFFAC1 !important; }
#wrp .las_list_img_wrapp img { position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; margin: auto; object-fit: cover; border-radius: .2em; filter: grayscale(.7) contrast(1.3); object-position: center; z-index: 1; border-radius: .2em; }
#wrp .left_type_member .las_list_img_wrapp img { object-position: top; }
#wrp .member .las_list_img_wrapp img { object-position: top center; }

#wrp #info { position: fixed; width: 100%; text-align: center; background: white; color: white; padding: .5em; margin: auto; bottom: 50%; left: 0; z-index: 99999999999999999; display: none; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); transform: translateY(-50%); font-size: 1.1em; text-transform: uppercase; font-weight: bold; }
#wrp #info > div { display: flex; align-items: center; width: fit-content; margin: auto; }
#wrp #info > div > div { height: var(--e_h); line-height: var(--e_h); text-align: center; padding: 0 1em; min-width: 4em; background-color: black; color: white; margin: .5em auto .4em auto; font-size: .95em; cursor: pointer; margin-right: 1em; }
#wrp #info > div > div:last-child { margin-right: 0; background-color: var(--c_3) !important; }
#wrp inf-black { color: black; }
#wrp inf-green { color: greenyellow; }


@media screen and (max-aspect-ratio: 100 / 56) {
#wrp { font-size: 1.2vw;}


}

@media screen and (max-aspect-ratio: 30 / 40) {
    #wrp { font-size: 4vw;}
  #wrp #content > div { width: 100%; }
  #wrp #content > div.right { position: absolute; top: 0; left: 100%; display: none; }
  #wrp #content > .left, #wrp #content > .right { width: 100%; }
  #wrp #content > .left > div, #wrp #content > .right > div { padding: 1.5em .5em; width: 100%; }
  #wrp .scroll_element { padding: 0; overflow: unset; display: inline; }
  #wrp .scroll_thumb { display: none; }
  #wrp { position: static; height: unset; }
  #wrp .scroll_element:after { display: none; }
}

@media screen and (min-aspect-ratio: 16 / 8) {
    #wrp { font-size: 1.1vw;}
}