/* Allgemein */

:root { 
    --color-error:#DB0606; 
    --color-error-hover:#df2525; 
    --color-error-text:#c20505; 
    --color-warning:#A37200; 
    --color-warning-hover:#8a6000; 
    --color-warning-text:#7f5900; 
    --color-success:#2d7b41; 
    --color-success-hover:#428854; 
    --color-success-text:#286c39; 
    
    --default-font-size:25px;
    --default-font-size-2:20px;
    --default-font-size-3:15px;
    --default-font-size-4:13px; 
    --animation-quick:100ms; 
    --animation-slow:300ms; 
    --border-radius:5px; 
    --border-radius-large:10px; 
    --border-radius-rounded:28px; 
    --navigation-width:300px;
    --arrow-position: calc(var(--navigation-width) - 32px);
    --navigation-width-closed: 120px;
    --arrow-position-closed: calc(var(--navigation-width-closed) - 20px);
    --sidebar-min-width:300px; 
    --sidebar-max-width:500px; 
    --list-min-width:200px; 
    --list-max-width:300px; 
    
    --color-primary-text:#ffffff; 
    --color-secondary-text:#dddddd; 
    --color-primary-hover:#8b723c; 
    --color-primary-light:#e8e9eb; 
    --color-background-plain:#382a0b;
    --color-background-plain-light: #42310d;
    --color-background-sidebar:#58451c; 
    --color-background-sidebar-active:#1a1305;
    --color-background-sidebar-active-invert: invert(100%) var(--color-background-sidebar-active);
} 

* {
    background-color: var(--color-background-plain);
    transition: all var(--animation-slow);
    margin: revert; 
    box-sizing: content-box;
}

body {
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Oxygen-Sans,Cantarell,Ubuntu,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    color: var(--color-primary-text);
    font-size: var(--default-font-size);
}

/* Nav-Bar */

ul.sidebar {
    list-style-type: none;
    margin-top: -15px;
    margin-left: -15px;
    padding: 0;
    width: var(--navigation-width-closed);
    background-color: var(--color-background-sidebar);
    position: fixed;
    height: 101%;
    overflow: auto;
  }

ul.sidebar img {
    background-color: var(--color-background-sidebar);
    position: relative;
    margin-top: 10px;
    margin-bottom: 15px;
    margin-left: 15px;
  }

ul.sidebar p {
    display: none;
  }
  
.sidebar li a {
    display: block;
    background-color: var(--color-background-sidebar);
    color: #000;
    padding-top: 18px;
    padding-bottom: 15px;
    padding-left: 15px;
    text-decoration: none;
  }
  
.sidebar li a.active {
    background-color: var(--color-background-sidebar-active);
    color: white;
  }

.sidebar li a.active img {
    filter: invert(100%);    
    background-color: var(--color-background-sidebar-active-invert);
  }

.sidebar li a.active p {
    background-color: var(--color-background-sidebar-active);
  }
  
.sidebar li a:hover:not(.active) {
    background-color: var(--color-primary-hover);
    color: white;
  }

.sidebar li a:hover:not(.active) img {
    background-color: var(--color-primary-hover);
  }

.sidebar li a:hover:not(.active) p {
    background-color: var(--color-primary-hover);
  }

.inflater {
    margin-top: 10px;
    float: left;
}

.inflater img {
    float: left;
    position: absolute;
    width: 30px;
    left: var(--arrow-position-closed);
    background-color: white;
    z-index: 10;
    padding: 10px;
    border-radius: 90px;
}

ul.sidebar-opened {
    width: var(--navigation-width);
  }

ul.sidebar-opened img {
    position: absolute;
  }

ul.sidebar-opened p {
    display: block;
    background-color: var(--color-background-sidebar);
    position: relative;
    left: 90px;
    top: -5px;
    width: 10px
  }

.inflater-opened img {
    left: var(--arrow-position);
    transform: rotate(180deg);
}

#logout {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(var(--navigation-width-closed) - 15px);
}

/* Effekt nach 1s aktivieren */
ul.sidebar-opened #logout {
    width: calc(var(--navigation-width) - 15px);
}

/* Forms */

.login {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: var(--color-background-sidebar);
    padding: 20px;
    width: 30%;
    border-radius: var(--border-radius-large);
  }

.login h1,
.login label,
.login form,
.form_box {
    background-color: var(--color-background-sidebar);
  }

  .login h1,
  .login label,
  .login form,
  .form_box,
  .newsform h1,
  .newsform label,
  .newsform form {
    background-color: var(--color-background-sidebar);
    margin-top: 10px;
    margin-bottom: 5px;
  }

  .submitbtn,
  .loginform {
    color: var(--color-primary-text);
  }

.newsform {
  position: relative;
  text-align: left;
  background-color: var(--color-background-sidebar);
  padding: 20px;
  width: 90%;
  border-radius: 10px;
  margin-top: 20px;
}

.newsform select, 
.newsform textarea,
.newsform input {
  width: 30%;
  max-width: 300px;
  color: var(--color-primary-text);
  font-size: var(--default-font-size-3);
  border-radius: var(--border-radius);
}

.newsform textarea {
  max-width: none;
  width: 90%;
}

.note {
  font-size: var(--default-font-size-4);
  color: var(--color-secondary-text);
  background-color: var(--color-background-sidebar);
}

.submitbtn {
  margin-top: 30px;
  width: 100px !important;
  height: 40px !important;
  border-radius: var(--border-radius);
}

.submitbtn:hover {
  background-color: var(--color-background-plain-light);
  cursor: pointer;
}

.data {
  display: none;
}
  

/* Main */

.main {
    margin-left: var(--navigation-width-closed);
    padding:1px 40px;
    background-color: var(--color-background-plain);
  }

.main-opened {
    margin-left: var(--navigation-width);
    padding:1px 16px;
  }

.clipboard {
  display: none;
}

.textblock p,
.textblock h2,
.textblock li{
  background: var(--sec-toggle-color);
}

.event {
  background-color: black;
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 5px;
}

.meta-news {
  background-color: black;
}