body{
  margin: 0;
}

html {
    height: 100%;
    font-family: 'Montserrat' sans-serif;

    display: grid;
    align-items: center;
    justify-items: center;


/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/

    --bg: #333333;
    --bg-panel: #434343;
    --color-headings: #3694FF;
    --color-text: #ffffff;

}


html[data-theme='dark'] {
    --bg: #FCFCFC;
    --bg-panel: #EBEBEB;
    --color-headings: #0077FF;
    --color-text: #333333;
}

nav{
  position: fixed;
  display: flex;
  justify-content: space-around;
  align-items: right;
  min-height: 8vh;
  background-color: var(--bg-panel);
  width: 40%;
  top: -15px;
  right: -15px;
  float: right;
  z-index: 1;
  border-radius: 15px;
}

.nav-links{
  display: flex;
  justify-content: space-around;
  width: 90%;
  float: right;
  margin-top: 4vh;
  margin-right: 5%;
}

.nav-links a:hover{
  text-decoration: underline;
}

.bruger div{
  width: 30px;
  height: 5px;
  background-color: var(--color-text);
  margin: 5px;
}

.nav10{
  margin-left: 5vh;
}

/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/

a{text-transform: uppercase; text-decoration: none; font-weight: bold; font-size: 1.1em; font-family: 'Montserrat', sans-serif;}
hr{width: 10%; height: 4px; background: var(--color-headings); border: 0; margin: 0;}
h1, h2, h3, p, a, ul li{font-family: 'Montserrat', sans-serif; color: var(--color-text)}
img {transition: all 300ms; -webkit-transition: all 300ms; -moz-transition:all 300ms; -o-transition: all 300ms}
header{position: fixed; float: left; margin: 0; padding: 0; border: 0}
body{background-color: var(--bg);}
ul li{list-style-type: none;}
h2{text-align: center}
.container {background-color: var(--bg-panel); margin: 5em; padding: 5em; border-radius: 15px;}

/*---------------------------------------------------------------------------*/
/*              Landing
/*---------------------------------------------------------------------------*/

#Landing h1{
  font-size: 4em;
  margin: 0;
  padding: 0;
  margin-top: 5%;
  margin-right: 5%;
}

#Landing h2{
  font-size: 1.5em;
  float: left;
  margin-top: 0%;
  margin-bottom: 5%;
  margin-right: 5%;
  width: 100%;
  text-align:  left;
}

#Landing p{
  margin-top: 0;
  float: right;
  width: 50%;
  text-align: right;
  font-size: 1.1em;
  margin-bottom: 0;
}

#Landing{
  width: 100%;
  height: auto;
  margin-bottom: -10%;
}

#Landing #Info{
  float: left;
  font-style: italic;
  font-size: 0.8em;
  margin-bottom: 5%;
  float: left;
  text-align: left;
}



/*---------------------------------------------------------------------------*/
/*              Überschriften
/*---------------------------------------------------------------------------*/

#header h1{
  width: 50%;
  text-align: center;
  border-top: 4px solid #3694FF;
  margin: 20px auto -20px;
  font-size: 2.4em;
}

#header h1 span{
  position: relative;
  top: -20px;
  padding: 0px 20px;
  display: inline-block;
  background: var(--bg);
}

#header h2{
  text-align: center;
}

#header {
  margin-top: 7%;
  margin-bottom: 3%;
}

#None{
  background: var(--bg);
  width: 100%;
  color: var(--bg)
}
/*---------------------------------------------------------------------------*/
/*  Funktionen
/*---------------------------------------------------------------------------*/


.infos ul{
  margin: 0;
  padding: 0;
  border: 0;
  margin-bottom: 5%;
}

.infos{
  margin-top: 5%;
}

#box{
  background-color: var(--bg-panel);
  margin: 0;
  width: 20.5%;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  border-radius: 15px;
  padding: 1%;
  padding-left: 1.5%;
  height: 50%;
}

#box ul li{list-style-type: square; margin-top: 1.1%}

.A1, .A2, .A3, .A4{
  min-height: 30em;
  margin-bottom: 30%;
}

/*----------------------------------------------------------------------------*/
/* Download
/*----------------------------------------------------------------------------*/


.Download ul{
  margin: 0;
  padding: 0;
  border: 0;
  margin-bottom: 5%;
}

.Download{
  margin-top: 5%;
}

#box2{
  background-color: var(--bg-panel);
  margin: 0;
  width: 45.5%;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  border-radius: 15px;
  padding: 1%;
  padding-left: 1.5%;
  height: 50%;
}

#box2 ul li{list-style-type: square; margin-top: 1.1%}

.B1, .B2{
  min-height: 15em;
  margin-bottom: 15%;
}

#X10{
  text-align: right;
  font-style: italic;
}

#Download hr{
  width: 100%;
  background: var(--bg);
  margin-top: 5%;
  margin-bottom:5%;
}

/*---------------------------------------------------------------------------*/
/*              Datenschutz und Impressum
/*---------------------------------------------------------------------------*/


#datenschutz p{
  margin-left: 4%;
  margin-right: 4%;
  margin-bottom: 10%;
}

#Impressum p{
  margin-left: 4%;
  margin-right: 4%;
}

/*---------------------------------------------------------------------------*/
/*              Hilfe
/*---------------------------------------------------------------------------*/


.hilfe ul{
  margin: 0;
  padding: 0;
  border: 0;
  margin-bottom: 5%;
}

.hilfe{
  margin-top: 5%;
}

#box6{
  background-color: var(--bg-panel);
  margin: 0;
  width: 20%;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  border-radius: 15px;
  padding: 1%;
  padding-left: 1.5%;
  height: 15vh;
}

#box6 ul li{list-style-type: square; margin-top: 1.1%;}

.E1, .E2, .E3, .E4{
  min-height: 12vh;
}

/*---------------------------------------------------------------------------*/
/*              Footer
/*---------------------------------------------------------------------------*/


.Footer ul{
  margin: 0;
  padding: 0;
  border: 0;
  margin-bottom: 5%;
  padding-left: 0;
  display: flex;
  justify-content: space-around;
}

Footer{
  margin-top: 5%;
}

#Footer hr{
  width: 100%;
  background: #848484;
}
#box4, #box3{
  margin: 0;
  width: auto;
  float: left;
  margin-left: 2%;
  margin-right: 2%;
  padding: 1%;
  padding-left: 2.5%;
  padding-right: 0%;
  margin-top: 10px;
}

#box3{
  margin-left: 0;
  padding-left: 0;
}

#box5{
  margin: 0;
  width: auto;
  float: left;
  margin-bottom: 3%;
}

.toggle-container{
  margin: 0;
  width: 52px;
  height: 27px;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  padding: 1%;
  padding-left: 1.5%;
}

#box4 ul li, #box3 ul li{list-style-type: square; margin-top: 1.1%;}
#box4 a, #box3 a{font-size: 1em; text-decoration: underline; text-decoration-style:  solid; text-transform: none; font-style: normal; font-weight: normal;}
#box4 p, #box3 p{font-size: 1em; text-decoration: none;; text-transform: none; font-style: normal; font-weight: normal; margin: 0}

.C1{
  margin-left: 0;
  padding-left: 0;
}


/*---------------------------------------------------------------------------*/
/*              Dark/Lightmode
/*---------------------------------------------------------------------------*/

input[type=checkbox]{
	height: 0;
	width: 0;
	visibility: hidden;
}

label {
	cursor: pointer;
	text-indent: -9999px;
	width: 52px;
	height: 27px;
	background: grey;
	float: right;
	border-radius: 100px;
	position: relative;
}

label:after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 90px;
	transition: 0.3s;
}

input:checked + label {
	background: var(--color-headings);
}

input:checked + label:after {
	left: calc(100% - 5px);
	transform: translateX(-100%);
}

label:active:after {
	width: 45px;
}

html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
  transition: all 750ms !important;
  transition-delay: 0 !important;
}