*
{
  font-family: 'Roboto+Slab', sans-serif;
}

body
{
  overflow-y: scroll;
  overflow-x: hidden;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  background-color: #ffffff;
  padding-top: 100px;
  padding-bottom: 20vh;
}

header
{
  min-height: 16.3vw;
  background-image: url(/images/bubbles.webp);
  background-color: rgba(255, 255, 255, 0.9);
  border-bottom: #0b1331 2px solid;
  position: fixed;
  width: 100vw;
  top: 0;
}

.asideimage
{
  display: block;
  width: 100%;
  margin: 10px 0;
  border-radius: 18px;
}

#headimage
{
  height: 12.3vw;
  left: 2vw;
  width: 96vw;
  top: 2vw;
  position: absolute;
}

@supports ( -webkit-touch-callout : none)
{
  body
  {
    background-attachment: scroll;
    background-position: center 100vh;
  }
}

a
{
  color: #0b1331;
  text-decoration: none;
}

a:hover
{
  color: #063613;
}

div#content *
{
  line-height: 1.3em;
}

.sitetext
{
  width: 600px;
  height: 300px;
}

.button
{
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  padding: 5px 10px;
  margin-bottom: 5px;

  background-color: #004CA4;
  border: 1px solid #0B1331;
  border-radius: 4px;
  font-size: 14px;

  color: #ffffff;
  text-decoration: none;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.button:hover
{
  color: #ffffff;
  background-color: #0070f0;
  border: 1px solid #0B1331;
}

#main
{
  padding-top: 15px;
  padding-top: 0vw;
  width: 100vw;
}

#mainlogo
{
  width: 60vw;
  margin: 0 auto;
  display: block;
}

#contentainer
{
  min-height: 100vh;
}

.block
{
  background: rgba(188, 176, 166, 0.93);
  border-radius: 23px;
  padding: 5px;
  margin: 40px 5px 10px 5px;
}

.block > div
{
  border-radius: 18px;
  padding: 10px;
  border: #ffffff 3px solid;
}

.block > div h3
{
  margin-top: 0;
  margin-bottom: 10px;
  color: #774e2c;
  border-bottom: #774e2c 3px solid;
  font-size: 32px;
  text-transform: uppercase;
  font-family: 'Pathway Gothic One', sans-serif;
}

.logoinline
{
  height: 14px;
  margin: 0 3px;
}

h3 .logoinline
{
  height: 32px;
  margin: 0 5px;
}

@media only screen and (min-width: 1024px)
{
  #mainlogo
  {
    width: auto;
    height: 50vh;
  }

  .asideimage
  {
    width: 500px;
    max-width: 45vw;
    margin: 0 0 20px 20px;
    float: right;
  }
}

div#content ul
{
  margin-top: 0;
}

@media only screen and (orientation: landscape) and (min-width: 1024px)
{
  #main
  {
    padding-top: 50px;
    width: 1024px;
    margin: 0 auto;
    padding-bottom: 100px;
  }

  header
  {
    min-height: 100px;
    border: 0;
    width: 100vw;
    position: absolute;
    height: 100px;
  }

  .block
  {
    margin: 40px 0 10px 0;
    border-radius: 30px;
    padding: 10px;
  }

  .block > div
  {
    border-radius: 20px;
    border: #ffffff 5px solid;
    padding: 20px;
  }

  #headimage
  {
    height: 80px;
    left: calc((100vw - 665px) / 2);
    width: 665px;
    top: 10px;
  }
}

/* ############################ globalMessages ############################ */

div#globalMessages
{
  border-radius: 0;
  background: transparent;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

div#globalMessages ul
{
  border-radius: 8px;
  display: block;
  margin: 0;
  min-height: 52px;
  padding: 6px 16px 5px 50px;
  color: #000000;
  font-size: 14px;
  margin: 0 0 10px 0;
}

div#globalMessages ul::before
{
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 32px;
  position: absolute;
  margin-left: -40px;
  margin-top: 12px;
}

div#globalMessages ul#Hinweis
{
  background: #dbecff;
}

div#globalMessages ul#Erfolg
{
  background: #d4ffcd;
}

div#globalMessages ul#Warnung
{
  background: #fefccb;
}

div#globalMessages ul#Fehler
{
  background: #ffd2d3;
}

div#globalMessages ul#Hinweis::before
{
  content: "\f05a";
  color: #2850c1;
}

div#globalMessages ul#Erfolg::before
{
  content: "\f058";
  color: #258815;
}

div#globalMessages ul#Warnung::before
{
  content: "\f06a";
  color: #878314;
}

div#globalMessages ul#Fehler::before
{
  content: "\f057";
  color: #871414;
}


div#globalMessages ul li
{
  padding: 0 0 0 3px;
  margin: 0;
  list-style: none;
  margin-bottom: 5px;
}

div#globalMessages ul li.boxtitle
{
  font-size: 20px;
  padding: 0;
}

div#globalMessages ul#Hinweis li.boxtitle
{
  color: #2850c1;
}

div#globalMessages ul#Erfolg li.boxtitle
{
  color: #258815;
}

div#globalMessages ul#Warnung li.boxtitle
{
  color: #878314;
}

div#globalMessages ul#Fehler li.boxtitle
{
  color: #871414;
}

@media only screen and (orientation: landscape) and (max-width: 1023px)
{

}