/* VAR */
:root{
    --transition_langsam: 0.3s;
    --transition_schnell: 0.15s;
}


/* general */
html, body{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: 0;
}

body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: var(--transition_langsam);
}

img{
    display: block;
}

*:focus {
    outline: none;
}

a{
    text-decoration: none;
    transition: var(--transition_schnell);
}
a:hover, a:focus{
    cursor: pointer;
}

#error{
    color:red;
    margin:0.2em;
}


/* header */
header{
    position: sticky;
    left:0;
    right:0;
    top:0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap:1em;
    padding:0.8em;
    transition: var(--transition_langsam);
}

header .header_area{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:2em;
}

header .logo_area{
    color:#808080;
}
header #logo{
    height:3em;
    margin:1em;
    transition: var(--transition_langsam);
}
header #logo:hover,
header #logo-link:focus > header #logo{
    height:4em;
    margin:0.5em;
}

header .headline{
    font-size:1.6em;
}


header .menu{
    margin-left:1em;
    margin-right:1em;
}

header .menu svg {
    width: 2em;
    height: 2em;
    cursor: pointer;
    transition: 0.2s;
    fill: #444;
    margin-left:1em;
}

header .menu svg:hover, header .menu a:hover > svg {
    fill: #bbb; /* Farbe beim Hover */
}

header .menu .active svg {
    fill: #ccc;
    cursor:default;
}
header .menu .active {
    cursor:default;
}


/* phone_menu */
.phone_menu{
    display:flex;
    flex-direction: column;
    gap:2em;
}
.phone_menu a{
    display:flex;
    flex-direction: row;
    align-items: center;
    gap:1em;
    color: #bbb;
    font-size: 1.3em;
}
.phone_menu a:hover, .phone_menu label:hover{
    color: #444; /* Farbe beim Hover */
    text-shadow: none;
    cursor: pointer;
}
.phone_menu svg {
    width: 2em;
    height: 2em;
    cursor: pointer;
    transition: 0.2s;
    fill: #bbb;
    margin-left:1em;
}
.phone_menu svg:hover, .phone_menu a:hover > svg {
    fill: #444; /* Farbe beim Hover */
}


/* main */
main {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left:10%;
    margin-right:10%;
}


/* dashboard message */
#dashboard_message {
    font-size: 1.1em;
    background-color: #444;
    padding:1em;
    border-left:0.3em solid red;
    border-radius:0.3em;
    color:#fff;
}


/* screen */
.screen {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 65vh;
}


/* footer */
footer{
    margin-top: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap:1.5em;
    padding:1.8em;
    transition: var(--transition_langsam);
}

footer .left{
    display: flex;
    flex-direction: column-reverse;
    gap:1em;
}
footer .right{
    display: flex;
    flex-direction: row;
    gap:1em;
}
footer .center{
    text-align: center;
}


/* elements */
.fade-in-element {
    opacity: 0;
    transform: translateY(20px); 
    transition: opacity 0.4s ease, transform 0.5s ease;
}


/* form */
input{
    margin:0.5em;
    padding:0.3em;
    border-radius: 0.3em;
    font-size:1.05em;
}
input[type=submit]:hover{
    cursor:pointer;
}


/* login */

#login{
    display: flex;
    flex-direction: column;
    gap:0.3em;
    width: 15em;
}

#login input{
    padding:0.3em;
    font-size: 1em;
    border-radius: 2px;
    transition: var(--transition_langsam);
}

#login input:focus {
    outline: none; 
    animation: spinBorder 4s infinite linear;
}

@keyframes spinBorder {
    0% {
        border-color: rgb(0, 131, 39);
    }
    50% {
        border-color: rgb(150, 204, 3);
    }
    100% {
        border-color: rgb(0, 131, 39);
    }
}

#login input[type='submit']:hover{
    cursor: pointer;
}



/* Darkmode */


.theme-checkbox-wrapper .switch{
    margin:1em;
    border-radius: 30px;
  }


.theme-checkbox-wrapper input[type="checkbox"] {
    visibility: hidden;
    display: none;
  }

  .theme-checkbox-wrapper *,
  .theme-checkbox-wrapper ::after,
  .theme-checkbox-wrapper ::before {
    box-sizing: border-box;
  }

  /* The switch - the box around the slider */
  .theme-checkbox-wrapper .switch {
    --width-of-switch: 3.5em;
    --height-of-switch: 2em;
    /* size of sliding icon -- sun and moon */
    --size-of-icon: 1.4em;
    /* it is like a inline-padding of switch */
    --slider-offset: 0.3em;
    position: relative;
    width: var(--width-of-switch);
    height: var(--height-of-switch);
    display: inline-block;
  }

  /* The slider */
  .theme-checkbox-wrapper .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f4f4f5;
    transition: .4s;
    border-radius: 30px;
  }

  .theme-checkbox-wrapper .slider:before {
    position: absolute;
    content: "";
    height: var(--size-of-icon,1.4em);
    width: var(--size-of-icon,1.4em);
    border-radius: 20px;
    left: var(--slider-offset,0.3em);
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(40deg,#ff0080,#ff8c00 70%);
    ;
   transition: .4s;
  }

  .theme-checkbox-wrapper input:checked + .slider {
    background-color: #303136;
  }

  .theme-checkbox-wrapper input:checked + .slider:before {
    left: calc(100% - (var(--size-of-icon,1.4em) + var(--slider-offset,0.3em)));
    background: #303136;
    /* change the value of second inset in box-shadow to change the angle and direction of the moon  */
    box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
  }





  noscript{
    text-align: center;
    color: rgb(138, 138, 138);
    font-weight: bold;
    padding:2em;
    display:block;
}
.js-only{
    display: none;
}



/* Media */
@media (min-width: 1000px){/*DESKTOP---------------------------------*/
	.phone{
		display:none;
	}
	footer{
		flex-direction: row;
	}
}
@media (max-width: 1000px){/*PHONE---------------------------------*/
	.desktop{
		display:none;
	}
	footer{
		flex-direction: column;
	}
    footer .left{
        text-align: center;
    }
    input{
        font-size: 1.3em;
    }
    form{
        gap:0.4em;
    }
}
@media (max-height: 500px){/*PHONE---------------------------------*/
	.screen{
		min-height:0vh;
	}
}