* {
    margin:0;
    padding:0;
  }

  html {
    height:100%;
  }

  body {
    background-image: url('../images/page.gif');
    background-repeat:repeat-y;
    font-size: 16px; 
    min-height:100%;
    background-attachment:fixed;
    }  
  
  .header {
    grid-area: hd;
    z-index:2;  
  }
  
  #logo {
    z-index:4;
    width:6em;
    position:fixed;
    top:5px;
    margin-left:15px;
    float:right;
  }
  
  #mister-bien {
    margin-top:35px;
    object-fit: cover; 
    width:100%;
  }
  
  .white {
    grid-area:top;
    position:fixed;
    list-style-type: none;
    width:60em;
    z-index:3;
    top: 0;
    margin:0 auto;
    height:50px;
    background-color:rgb(255, 255, 255);
    box-shadow: 0 5px 15px rgb(200, 200, 200);
  } 

  #impressum {
    font-weight: 400;
    line-height: 1em;
    text-decoration: none;
    color:#1d4f71;
  }

  .white ul {
    position:relative;
    text-align:right;
    top:.2em;
  }
  
  .white li {
    display:inline-block;
    list-style-type: none;
    color:black;
    font-size:1.5rem;
    font-stretch: 30%;
    font-family:var(--bs-font-sans-serif);
    padding-left:1em;
  }

  .white li a {
    text-decoration: none;
    padding-right:2em;
    color:#1d4f71;
  }

  .white li a:hover {
    color:#ffffff;
  }


 
/*Anfang Stern-Animation (dreht sich)*/
#stern {
  position:absolute;
  height:17em;
  width:17em;
  z-index:3;

  right:-2.5em;
  text-align:center;
  color:white;
}
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}
/*Ende Stern-Animation (dreht sich)*/

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)  rotate(337deg);
  width:12em;
}

.center a {
  text-decoration:none;
  color:rgb(255, 255, 255);
}

.center a:hover {
  color:rgb(255, 234, 0);
}

#stern img {
  max-width:100%;
  object-fit:contain;
  -webkit-animation:spin 88s linear infinite;
  -moz-animation:spin 88s linear infinite;
  animation:spin 88s linear infinite;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.4));
}

.footer {
  grid-area: ft;
}

.content {
  grid-area: main;
  padding:10px 15px 10px 10px;
  z-index:1;
}

.content img {
  object-fit: cover; 
  width:100%;
  margin-top: 0.85em;
  box-sizing: border-box;
  border-top: 14px solid rgb(149, 149, 149);
  border-left: 14px solid rgb(199, 199, 199);
  border-right: 14px solid rgb(224, 224, 224);
  border-bottom: 14px solid rgba(255, 255, 255);
  box-shadow: -1px -1px 1px rgba(0,0,0,.3),
    1px 1px 2px rgba(255,255,255,.7);
}



.sidebar {
  grid-area: sd;
  max-width:18em;
  margin-top:30px;
}

.wrapper {
  max-width: 60em;
  font-size:1em ;
  position:relative;
  padding-bottom:10vh;
  height: 100% !important;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.4) 0px 6px 6px;

  margin:0 auto;
  background-color:#f0eeee;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "hd"
    "top"
    "sd"
    "main"
    "ft";
}

.footer {
  position:fixed;
  bottom:0;
  margin:0 auto;
  width: 100%;
  height: 70px;
  text-align:center;
  background-image: url('../images/mr-bien-footer.png');
  background-repeat:repeat-x;
  z-index: 2;
}

li span {
  color:red !important;
}

#enger {
  margin-top:.19em;
  line-height:1.2em;
}

/* Anfang Media-Query für Mobile View */
@media (max-width: 39.99em) {
  .wrapper {
    grid-template-columns: repeat(9, 1fr);
    grid-template-areas:
      "hd hd hd hd hd hd hd hd hd"
      "top top top top top top top top top"
      "sd sd sd sd sd sd sd sd sd"
      "main main main main main main main main main"
      "ft ft ft ft ft ft ft ft ft";
      /*background-image: url('../images/page-hellgrau.png');
      background-repeat:repeat-y;
      overflow: hidden;*/
      overflow:hidden;
      background-attachment:fixed;
    }

  .wrapper::before {
    content: "";
    position: absolute;
    width: 500%;
    height: 550%;
    top: -220%;
    left: -215%;
    z-index:0;
    background: url('../images/page-hellgrau.png') repeat-y center; /* No-repeat background */
    background-color: #ddd; /* Fallback background color */
    transform: rotate(-24deg); /* css rotate background image, css background rotate */
  }

  html, body {
    background-image: none;
    font-size: 16px;
    overflow-x:hidden; 
    }

  .sidebar {
    max-width:100%;
    z-index:1; /*für den schräge Higru wichtig*/
  }

  #stern {
    height:13em;
    width:13em;
    top:120px;
    overflow:hidden;
  } 
  
  .center h3 {
    font-size:1.15rem;
  }

  .white {
    height:35px;
    background-color:rgb(253, 160, 0);
    box-shadow: 0 5px 15px rgb(162, 162, 162);
    background-image: linear-gradient(to right, rgb(253, 181, 0),rgb(253, 173, 0));
  }

  #mister-bien {
    margin-top:30px;
  }

  .content p {
    text-align:justify;
  }

  .white ul {
    position:relative;
    text-align:left;
    top:.3em;
    margin-left:4.1em;
  }
  
  .white li {
    display:inherit;
    list-style-type: none;
    color:rgb(255, 255, 255);
    font-size:0.9rem;
    font-weight:600;
    font-stretch: 30%;
    line-height:.95em;
    font-family:var(--bs-font-sans-serif);
    padding-left:2em;
  }

  .white li:first-child{
    padding-left:1.4em;
  }

  .white li:nth-child(2) {
    padding-left:1.4em;
  }

#impressum {
  position:absolute;
  top: 0.33em;
  font-size: 1em;
  letter-spacing: -.05em;

  text-transform:uppercase;
  left:9.2em;
}


         /* Works on Firefox */
* {
  scrollbar-width: none;
  scrollbar-color:white;
  }

/* Works on Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 0;
  }

  *::-webkit-scrollbar-track {
    background: none;
  }

  *::-webkit-scrollbar-thumb {
    background:none;
    border-radius: 20px;
    border: none;
  }

  .footer {
    height: 50px;
    object-fit:contain;
  }

  .footer p {
    margin-top:25px !important;
  }
}
/* Ende Media-Query für Mobile View */


@media (min-width: 40em) and (max-width:60em) {
  .wrapper {
    grid-template-columns: repeat(9, 1fr);
    grid-template-areas:
      "hd hd hd hd hd hd hd hd hd"
      "top top top top top top top top top"
      "sd sd sd main main main main main main"
      "ft ft ft ft ft ft ft ft ft";
      overflow: hidden;
  }

  .wrapper::before {
    content: "";
    position: absolute;
    width: 420%;
    height: 330%;
    top: -115%;
    left: -110%;
    z-index:0;
    background: url('../images/page-hellgrau.png') repeat-y center; /* No-repeat background */
    background-color: #ddd; /* Fallback background color */
    transform: rotate(45deg); /* css rotate background image, css background rotate */
  }

  nav {
    position: sticky;
    font-size: 1.35em;
    top:70px;
  }

  #logo {
    width:6em;
  }

  #stern {
    height:13em;
    width:13em;
    top:120px;
  }

  .center h3 {
    font-size:1rem;
  }

  .white {
    height:35px;
    width:100%;
    background-color:rgb(253, 160, 0);
    background-image: linear-gradient(to right, rgb(255, 181, 0),rgb(255, 167, 0));
    box-shadow: 0 5px 15px rgb(162, 162, 162);
  }

  #impressum {
    font-weight: 600;
    text-transform:uppercase;
    line-height: 1em;
    text-decoration: none;
    color:#1d4f71;
  }

  .white ul {
    position:relative;
    text-align:right;
    top:0.2em;
  }
  
  .white li {
    display:inline-block;
    list-style-type: none;
    color:white;
    font-weight:600;
    font-size:1.2rem;
    font-stretch: 30%;
    font-family:var(--bs-font-sans-serif);
    padding-left:1em;
  }

  .white li a {
    text-decoration: none;
    padding-right:1.5em;
    color:#1d4f71;
  }

}

@media (min-width: 60.01em) {
  .wrapper {
    grid-template-columns: repeat(9, 1fr);
    grid-template-areas:
      "hd hd hd hd hd hd hd hd hd"
      "top top top top top top top top top"
      "sd sd sd main main main main main main"
      "ft ft ft ft ft ft ft ft ft";
  }

  #logo {
    width:10em;
  }

  #stern {
    height:17em;
    width:17em;
    top:170px;
  }

  .center h3 {
    font-family: 'emerbienmedium', Verdana, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-size:1.4rem;
    line-height:1.4em;
    margin: 0 auto;
  }

  .white li a {
  font-size:0.9em;
  }

  .white li a:hover {
    color:#ff9100;
  }
  
  #impressum {
    font-weight: 600;
    text-transform:uppercase;
    line-height: 1em;
    text-decoration: none;
    color:#1d4f71;
  }
}

nav {
  position: sticky;
  font-size: 1.35em;
  top:70px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li a {
  display: block;
  padding: 5px 15px 5px 25px;
  color:#1d4f71;
  text-decoration: none;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.2s linear;
  -o-transition: 0.2s linear;
  transition: 0.2s linear;
}


nav ul li a:hover {
  background: #1d4f71;
  border-bottom: 1px solid white;
  color:rgb(255, 135, 16);

}
nav ul li a .fa {
  width: 16px;
  text-align: center;
  margin-right: 5px;
  float:right;

}
nav ul ul {
  background: rgba(0, 0, 0, 0.3);
  padding-left: 0;
}
nav ul li ul li a {
  color: white;
  border-left: 10px solid transparent;

  padding: 0 5px 0 15px;
}
nav ul li ul li a:hover {
    border-left: 10px solid rgb(255, 135, 16);
    border-bottom: 0;
}
hr.navlinie {
  border: 1px solid #ff0000;
  width:100%;
  margin:15px 0;
}


.unterstrichen {
  text-decoration:underline;
}

.fett {
  font-weight: 600;
}

    /* Works on Firefox */
* {
  scrollbar-width: medium;
  scrollbar-color:rgb(30 80 110) rgb(240 238 238);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: rgb(240 238 238);
}

*::-webkit-scrollbar-thumb {
  background-color: rgb(240 238 238);
  border-radius: 20px;
  border: 3px solid orange;
}