/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;	vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
}
/*fonts in index.php*/
@font-face {
  font-family: leetTxt;
  src: url(fonts/OpenSans-Regular.ttf);
}
@font-face {
  font-family: leetHead;
  src: url(fonts/OpenSans-Bold.ttf);
}
@font-face {
  font-family: leetThin;
  src: url(fonts/OpenSans-Light.ttf);
}
@font-face {
  font-family: leetLogoFont;
  src: url(fonts/OpenSans-Bold.ttf);
}
/* variables - use like this: var(--main-acc-color) */
:root {
  --main-bg-color: #242424;
  --sec-bg-color: #474747;
  --main-txt-color: #ffffff;
  /* --main-a-color: #dcff02; #5300d7*/
  --main-a-color: #ffffff;
  --main-acc-color: #408ac7;
  --sec-acc-color: #1d5a8c;
  --main-acc-act-color: #b175ff;
  --sec-acc-act-color: #a27dd1;
  --glitch-color: #ffffff;

  --main-code-color: #b5b5b5;
  --main-font: 'leetTxt'; /* var(--main-font) */
  --h-font: 'leetHead';  /* var(--h-font) */
  --hb-font: 'leetHeadBold'; /* var(--hb-font) */

  /*slider*/
  --swiper-theme-color: #dcff02;
  --swiper-navigation-size: 30px;
  --main-slider-overlay-einzeln-color: #dcff02;
}

/* ------------------------------------------------- */
body {
  color: var(--main-txt-color);
  background-color: var(--main-bg-color);
  background:
radial-gradient(circle at right 35%, rgb(0 255 197 / 35%) 0%,rgb(35 48 122) 32%, rgb(0 122 72 / 48%) 55%, rgb(0 0 0 / 64%) 100%),
radial-gradient(circle at top center, rgb(12 25 114) 0%, rgb(11 0 70) 65%, rgb(0 0 0) 100%),
linear-gradient(61deg, rgba(2,0,36,1) 0%, rgba(66,66,66,1) 35%, rgba(33,33,33,1) 100%);
  font-size: .96em;
  font-weight: 400;
  /* letter-spacing: .01em; */
  line-height: 1.5;
  text-align: justify;
  letter-spacing: 1px;
  font-family: 'leetTxt', 'NotoSansJP-Thin', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}
/* grid layout 4 content */
.grid {
  display:grid;
  grid-template-rows: 1fr auto;
  min-height: 90vh;
}
.header{
		z-index: 100;

}
/* Mobile First Media Queries 640 < 1280 < 1920 */
/* Base style */
  .page{
		background-color: var(--main-bg-color);
		padding: 0;
		margin: 0;
		overflow-x: hidden;
	}
  .wrapper{
		max-width:95vw;
        width:90%;
		margin: 0 auto;
		text-align: left;
        background-color: rgb(24 24 24 / 56%);
        border-radius: 0.3em;
        box-shadow: black 2px 2px 10px;
         min-height: 85vh;
  }
  .wrapperhead{
		max-width:90vw;
		margin: 0 auto;
		text-align: left;
  }

/* Larger than mobile screen */
@media (min-width: 40.0rem) {
  .wrapper{
		max-width: 1024px;
		text-align: left;
		width: 90vw;
        background-color: rgb(24 24 24 / 56%);
        border-radius: 0.3em;
        box-shadow: black 2px 2px 10px;
        min-height: 85vh;
  }
  .wrapperhead{
		max-width: 1024px;
		text-align: left;
		width: 90vw;
  }
}

/* Larger than tablet scr een */
@media (min-width: 80.0rem) {
  .wrapper{max-width:1024px;}
  .wrapperhead{max-width:1024px;}
}
/* Larger than desktop screen */
@media (min-width: 120.0rem) {

}
/* TYPO */
.hiddenz{display:none;}
.left{text-align:left;}
.center{text-align: center;}
.right{text-align:right;}
.smallimg{
    max-width: 360px;
    width: 100%;
    /*margin: 0px auto;*/
}
.flexcentered{
  display:flex !important;
  align-items: center;
  justify-content: center;
  padding: 1em;
  height: 100%;
  min-height: 400px;
}
.banner{
  min-height:300px;
  height:300px;
  background:linear-gradient(359deg, black 0%, transparent 30%), url("/imgs/kursplan-banner-1-1024x379.png");
  background-size: cover;
  background-position: center;
  display:flex !important;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  align-items: flex-end;
  justify-content: center;
  padding: 1em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: .5em 0;
}

h1 {
  font-family: leetLogoFont;
  font-size:calc(0.899vw + 20.0515px);
  line-height: 1.2;
}
.formdiv{
	z-index:3;
}
h2 {
  font-family: leetLogoFont;
  font-size:calc(0.7vw + 25px);
  line-height: 1.25;
  font-weight: 600;
  padding: 0em 0 0 0;
}
h2.brand2 {
    font-family: leetLogoFont;
    font-size:calc(0.7vw + 20px);
    margin-bottom: 0;
    z-index: 1;
}

.skew90{
	transform: rotate(0deg) translate(0%, 0vw);
	font-family: leetThin;
	text-transform:uppercase;
}
/* Larger than mobile screen */
@media (min-width: 40.0rem) {
  .skew90{
	transform: rotate(270deg) translate(-10%, -10vw);
    width: 200px;
	}
}
h3 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
}
h4 {
  font-family: leetLogoFont;
  font-size: 1em;
  line-height: 1.1;
}

h5 {
  font-size: 1.8rem;
  letter-spacing: -.05rem;
  line-height: 1.5;
}

h6 {
  font-size: 1.6rem;
  letter-spacing: 0;
  line-height: 1.4;
}
.footerlink{display:block;}
.code{
	font-family: monospace, monospace;
	padding: .77em;
	margin: 0.5em 0;
	background-color: var(--sec-bg-color);
	font-size: .8em;
}
/* profile */
/* Container for skill bars */
  .progress {
    width: 100%; /* Full width */
    background-color: #2b335299; /* Grey background */
    border-radius: 3px;
  }

  .skills {
    text-align: right; /* Right-align text */
    padding-top: 10px; /* Add top padding */
    padding-bottom: 10px; /* Add bottom padding */
    color: white; /* White text color */
  }
/* NAV */
img.logo {
    width: 236px;
    max-width: 100%;
    margin: 0.4em;
}
.menuicon{width:20px;position: relative;top: 5px;}
.loginnav{background-color:#c7c7c7;}
.menunav{background-color:#9292a5;}
.navbar{display:flex;align-content:space-around;}
#navbar {
  position: fixed; /* Make it stick/fixed */
  top: 0; /* Stay on top */
  width: 100%; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
.logo,.menu,.logindiv,.toggle{display:inline-block;}
.logo{max-width: 40%;}
.logindiv{
  display: flex;
    flex-direction: row-reverse;
    justify-content:space-between;
}
.topdiv{
  width: 44%;
    height: 100%;
    z-index: 999;
    position: absolute;
    /* text-align: right; */
    right: 0;
}
#login label{display:inline-block;}
#login input[type='text']{display:inline-block;width:120px;padding: 0.2em;margin-bottom: 1em;}
#login input[type='password']{display:inline-block;width:120px;padding: 0.2em;margin-bottom: 1em;}
#login input[type='submit']{
    border-radius: 0.3em;
    padding: 0.1em  0.3em 0.3em 0.3em;
    box-shadow: black 2px 2px 10px;
    color: #fff;
    background: rgb(157,0,0);
    background: linear-gradient(180deg, rgba(157,0,0,1) 0%, rgba(208,0,0,1) 27%, rgba(79,0,0,1) 73%, rgba(79,0,0,1) 100%);
    max-width: 172px;
    margin: 1em auto;
    cursor: pointer;
}
ul.menu{float: right;}
ul.menu li{display:inline-block;}
.menu__item{padding: 0;font-size: 10px;}
@media (min-width: 40.0rem) {
  .menu__item{padding: 1em 1em; font-size: 1em;}
}
/* */
.brandwrap{z-index:2;}
label{text-transform: uppercase;}
#editor{height:50vh;}
/* dashboard */
.category{padding: 0.2em 0.4em; margin: 0 0.1em; background-color: var(--main-acc-act-color); border-radius: 5px;}
.inlinesubmit{
    padding: 0 !important;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    font-family: leetLogoFont;
    font-size: 1.4em;
}
.section_users{padding: 1em 0 2em 0;}
.section_articles{border-top: 1px solid var(--main-txt-color);padding: 1em 0 2em 0;}
.section_categories{border-top: 1px solid var(--main-txt-color); padding: 1em 0 2em 0;}
th {
    font-weight:700;
}
.index_row{
      display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
}
.index_article{
    display: block;
    flex: 1 1 auto;
    margin-left: 0;
    max-width: 100%;
    width: 100%;
    min-width:280px;
    width:30%;
}
.footer{
  padding-top:2em;
}
.iconpic{max-width:111px;margin: 0px 1em;}
.abstand{padding:2em 0;}
.abstand-top{padding-top:3.5em;}
.course_bar{background-color: var(--main-bg-color);
  padding:.5em;
  border-radius: .3em;
  box-shadow: black 2px 2px 10px;
}
.zeit_insgesamt{color: var(--main-bg-color);
}
.zeit_insgesamt, .zeit_heute{color: var(--main-bg-color);
    max-height: 5px;
    border-radius: 3px;
}
.small{font-size:80%;text-align: center;}
.hidden{display:none;}
.kursweiter {
  background-color: red;
  border-radius: 0.3em;
    padding: 0.3em 0.3em 0.3em 0.5em;
    box-shadow: black 2px 2px 10px;
    color: #fff;
    background: rgb(157,0,0);
    background: linear-gradient(180deg, rgba(157,0,0,1) 0%, rgba(208,0,0,1) 27%, rgba(79,0,0,1) 73%, rgba(79,0,0,1) 100%);
    max-width: 172px;
    margin: 1em auto;
}
.kursweiter a{
  color: #fff;
}
.coursetab{
    background-color: #0f1318ba;
    margin: 1em 0;
    border-radius: 6px;
    text-align: center;
}
.nobg{background-color:transparent; box-shadow: transparent 0px 0px 0px;}
#stammdatendiv.stammdatendiv.opendiv {
    display: block;
    padding: 1em;
}
#stammdatendiv.stammdatendiv {
    display: none;
}
.nice{
  padding: 0 .8em;
}
.photogal{display:flex;width:100%;}
.mobcolumn{
  padding:1%;
}
.stammdatendiv img {max-width:250px;}
/* lightbox */
.lightbox-modal{position:fixed;top:0;left:0;width:100%;height:100vh;background-color:rgba(0,0,0,.9);display:block;z-index:1000000000;animation:fade-in .4s}
.lightbox-modal video{max-width:80vw;max-height:94%;width:auto;height:auto}
.lightbox-modal figure{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);max-width:80vw;max-height:80vh}
.lightbox-modal img{max-width:80vw;max-height:80vh}
.lightbox-modal figcaption{margin-top:8px;color:#eee;font-style:italic;font-size:1.2rem;text-align:center}
.lightbox-modal button{position:absolute;top:20px;right:20px;display:block;width:30px;height:30px;display:flex;justify-content:center;align-items:center;background:transparent;border:none;z-index:10000000;cursor:pointer;padding: 0;}
.lightbox-modal button svg{display:block;fill:#eee;padding: 0;}
.video-wrapper{width:100%;height:100%;display:flex;justify-content:center;align-items:center}@keyframes fade-in{from{opacity:0}to{opacity:1}}
.parent{width:100%;padding:5px 0;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;background:radial-gradient(circle, rgb(19 114 18 / 63%) 0%, rgba(0,32,36,0.458420868347339) 100%);}
.parent::before { content: "KURSFOTOS"; }
.ib_jsbutton{
    background-color: red;
    border-radius: 0.3em;
    padding: 0.3em 0.3em 0.3em 0.5em;
    box-shadow: black 2px 2px 10px;
    color: #fff;
    background: rgb(157,0,0);
    background: linear-gradient(180deg, rgba(157,0,0,1) 0%, rgba(208,0,0,1) 27%, rgba(79,0,0,1) 73%, rgba(79,0,0,1) 100%);
    max-width: 172px;
    margin: 1em auto;
    cursor: pointer;
}
.fertigstellen{
  background-color: red;
    border-radius: 0.3em;
    padding: 0.3em 0.3em 0.3em 0.5em;
    box-shadow: black 2px 2px 10px;
    color: #fff !important;
    background: rgb(157,0,0);
    background: linear-gradient(180deg, rgba(157,0,0,1) 0%, rgba(208,0,0,1) 27%, rgba(79,0,0,1) 73%, rgba(79,0,0,1) 100%);
    max-width: 172px;
    margin: 1em auto;
    padding: 0 0.4em !important;
    cursor: pointer;
}
.fertigstellen:hover{
  background-color: grey;
    border-radius: 0.3em;
    padding: 0.3em 0.3em 0.3em 0.5em;
    box-shadow: black 2px 2px 10px;
    color: #8dff80 !important;
    background: rgb(157,0,0);
    background: linear-gradient(180deg, rgb(24 24 24) 0%, rgb(66 66 66) 27%, rgb(56 56 56) 73%, rgb(0 0 0) 100%);
    max-width: 172px;
    margin: 1em auto;
    padding: 0 0.4em !important;
}
@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
/* PIE */
.pie {
  --p: 20;
  --b: 7px;
  --c: darkred;
  --w: 220px;

  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  margin: 5px;
  place-content: center;
  font-size: .8em;
  font-weight: bold;
}
.pie:before,
.pie:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.pie:before {
  inset: 0;
  background:
  /*radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,conic-gradient(var(--c) calc(var(--p) * 1%), #0000 0);*/
    radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,conic-gradient(var(--c) calc(var(--p) * 1%),#b5535359 0);
  -webkit-mask: radial-gradient(
    farthest-side,
    #0000 calc(99% - var(--b)),
    #000 calc(100% - var(--b))
  );
  mask: radial-gradient(
    farthest-side,
    #0000 calc(99% - var(--b)),
    #000 calc(100% - var(--b))
  );
}
.pie:after {
  inset: calc(50% - var(--b) / 2);
  background: var(--c);
  transform: rotate(calc(var(--p) * 3.6deg))
    translateY(calc(50% - var(--w) / 2));
}
.animate {
  animation: p 1s 0.5s both;
}
.no-round:before {
  background-size: 0 0, auto;
}
.no-round:after {
  content: none;
}
@keyframes p {
  from {
    --p: 0;
  }
}