:root {
   --maincolor: #0785AB;
   --maincolor2: #044C62;
   --lightgray: #f9f9f9;
   --middlegray: #CECECD;
   --darkgray: #343A40;
 }

*, *:after, *::before{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background-color: #E8E8E8;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='428' height='428' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23D2D2D2' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23D2D2D2'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
  font-size: 16px;
  font-family: 'Open Sans';
  color: var(--darkgray);
  padding: 0em;
}

a {
  color: var(--maincolor2);
  text-decoration: none;
  outline: none;
}

a:hover {
  text-decoration: underline;
}

hr {
  height: 1px;
  border: none;
  border-top: 1px solid #949393;
  margin: 1rem 0;
  width: 100%;
}

h1 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--maincolor2);
  margin: 2em 0 1em 0;
}

h2 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--maincolor2);
  margin: 2em 0 1em 0;
  text-transform: uppercase;
}

h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--maincolor2);
  margin: 1.5em 0 0.5em 0;
}

h1:first-child,
h2:first-child {
  margin-top: 0;
}

h1+h2 {
  margin-top: 0.5em;
}

p {
  margin: 0;
  padding: 0;
}

img {
  border: 0;
}

ol,
ul {
  margin: 15px 0 20px 30px;
  padding: 0;
  font-weight: normal;
  text-align: left;
  list-style-position: outside;
}

ol {
  list-style-type: decimal-leading-zero;
}

ul {
  list-style-type: square;
}

li {
  padding: 0 0 15px 0;
}

.nobr {
  white-space: nowrap;
}

pre {
  background: #fff;
  overflow: auto;
  padding: 1rem;
  font-family: monospace;
  font-size: 1rem;
  line-height: 1rem;
}

button, .button {
  background-color: var(--maincolor);
  border: none;
  color: white;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;
}

button:hover, .button:hover {
  background-color: var(--maincolor2);
}

strong {
  font-weight: bold;
}

center, .center {
  text-align: center;
}

p#legend {
  font-size: 10px;
}

span.radio {
  float: left;
  margin: 7px 20px 0 5px;
}

span.star {
  color: red;
}

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

#login-wrap {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

#login {
  width: 500px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  background: var(--lightgray);
  box-shadow: 0px 0px 3px rgba(0,0,0,0.4);
  border-radius: 3px;
  padding: 2rem;
}


#login p.err {
  color: red;
  padding: 1em 0;
}

#login input {
  text-align: center!important;
  margin: 0 auto;
}

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

#wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem;
}

#container {
  max-width: 1200px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-grow: 1;
  font-size: 1rem;
  gap: 1rem;
  text-align: left;
  padding: 0rem;
  background: var(--lightgray);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  padding-bottom: 1rem;
}

#user {
  width: 100%;
  background: var(--maincolor);
  margin-bottom: 1rem;
  padding: 0.75rem 2rem;
  color: #fff;
  text-align: right;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

#user a {
  color: #fff;
}

#head {
  width: 100%;
  text-align: left;
  padding: 0 2rem 1rem;
}

#head h1 {
  margin: 0;
  font-size: 1.625rem;
  line-height: 1;
}

@media screen and (max-width: 650px) {
  #head {
    text-align: center;
  }
}

#navigation {
  width: 230px;
  padding-left: 1rem;
  padding-right: 0rem;  
  margin: 0;
}

#content {
  width: calc(100% - 230px - 1rem);
  min-width: 450px;
  border-left: 1px dashed var(--middlegray);
  margin: 0;
  padding: 0 1em;
}

@media screen and (max-width: 900px) {
  #navigation {
    width: 100%;
    padding: 0;
    margin: 0 1rem;
  }

  #content {
    width: 100%;
    min-width: auto;
    border-left: none;
    padding: 0;
    margin: 0 1rem;
  }
}

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

.nav {
  border-top: 1px dashed var(--middlegray);
  line-height: 2em;
  outline: none;
  cursor: pointer;
}


.nav:first-child {
  border-top: none;
}

.navsub {
  margin: 0 0 1rem;
}

.navsub_on {
  background: none;
}

.navsub_over {
  color: var(--maincolor2);
  text-decoration: underline;
}

.navsub ul,
.navsub ul li {
  margin: 0;
  padding: 0;
  list-style-type: square;
  list-style-position: inside;
}

.navsub ul li {
  font-size: 1rem;
  line-height: 1.5em;
}

.navsub ul li a {
  color: var(--maincolor2);
}

/* -------------------------------------------- */
/* tables */
.table {
  display: table;
  margin-top: 2rem;
  width: 100%;
}

.tr, .th {
  display: table-row;
}

.th > .td {
  font-weight: 600;
  background: var(--maincolor);
  color: #fff;
  padding: 1rem;
  font-weight: 600;
  display: table-cell;
  vertical-align: middle;
}



.tr.old .td {
  color: #bbb;
}

.tr.old .td a {
  color: #bbb;
}

.td {
  display: table-cell;
  vertical-align: middle;
  padding: 1rem;  
}

.tr:nth-of-type(even) .td {  background: #eee;}
.tr:nth-of-type(odd) .td {  background: #e5e5e5;}
.tr:hover .td {  background: #ccc;}

.td:first-child {
  border-left: none;
}

@media screen and (max-width: 700px) {

  .table,
  .tr,
  .th,
  .td {
    display: block;
  }

  .tr {
    margin: 0.5em 0;
  }

  .table .tr:nth-of-type(odd) .td {
    background: #e1e1e1;
  }
}

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



.formfehler {
  color: red;
}

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


img.bild {
  max-width: 200px;
  display: block;
  margin: 8px 0;
  border: 1px solid #ccc;
}

.iconbox {
  display: flex;
  flex-wrap: nowrap;
}

.iconbox a {
  padding: 0.5rem;
}

.iconbox a:hover {
  background-color: var(--maincolor);
  color: #fff;
}

.iconbox span {
  font-size: 1.5rem;
}

.highlight {
  background-color: red;
  color: #fff;
  font-weight: bold;
  padding: 1rem;
  text-align: center;
}

.help {
  line-height: 1.3;
  font-size: .9rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--maincolor);
  width: 100%;
}

#login .help {
  text-align: center;
}

#wrap .help {
  text-align: left;
}