/* Allgemeine Stile */


body {
    font-family: Regular, serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #FAF6EF;
}

header {
    background-color: transparent;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}



h1 {
    font-family: Bold;
    font-size: 80px;
    text-transform: uppercase;
    margin-top: 0px;
    margin-bottom: 15px;
}

h2 {
    font-family: Bold;
    font-size: 50px;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 15px;
}

h3 {
    font-family: SemiBold;
    font-size: 34px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 15px;
}

h4 {
    font-family: Regular;
    font-size: 34px;
    margin-top: 10px;
    margin-bottom: 15px;
}

h5 {
    font-family: Regular;
    font-size: 22px;
    margin-top: 10px;
    margin-bottom: 15px;
}

h6 {
    font-family: Bold;
    font-size: 120px;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 15px;
}

p {
    font-family: Regular;
    font-size: 20px;
    margin-top: 0px;
}

a {
    font-family: Regular;
    font-size: 20px;
    color: inherit;
    text-decoration: none;
    margin-top: 0px;
}





nav {
    font-family: Regular;
    display: flex;
    justify-content: center;
    flex: 1;
    align-items: center;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 15px 0;
}

nav ul li {
    text-align: center;
    margin: 0 5px;
}

nav ul li a {
    display: block;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    padding: 5px 25px 10px 25px;
    color: #000;
    text-decoration: none;
    font-size: 30px;
    border-radius: 100vh;
    background-color: #fff;
    
}

nav ul li a:hover {
    background-color: black;
    color: #fff;
    box-shadow: 0px 0px 30px rgb(247, 207, 163);
}

.menu-icon {
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    padding: 15px 15px;
    margin: auto;
    border-radius: 100vh;
    display: none;
}

.bar1, .bar2, .bar3 {
    width: 50px;
    height: 3px;
    background-color: #000;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    transform: rotate(-45deg) translate(-5px, 5px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    transform: rotate(45deg) translate(-8px, -8px);
}

main {
    padding: 0;
    margin-top: 0;
    flex: 1;
}

.content-section {
    display: none;
}

.content-section.active {
    display: block;
}

.button {
    background-color: white;
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: Regular;
    transition-duration: 0.4s;
    border-radius: 100vh;
    cursor: pointer;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
  }

  .button:hover {
    background-color: black;
    color: white;
    border-radius: 0vh;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
  }

  /* Startseite */


  .startseite {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    position: relative;  /* wichtig! */
    z-index: 1;          /* über dem SVG */
    overflow: hidden;
    /*background-image: url("img/ostklang/beitrag-nov-23-3.jpg");*/
    
  }
  
  .svg-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;         /* ganz hinten */
    
  }
  
  .svg-background svg {
    width: 100%;
    height: 100%;
    display: block;
    
  }
  
  .responsive-svg {
    width: 95%;
    height: auto;
    display: block;
    z-index: 2;       /* ganz vorne */
    position: relative;
    padding: 2vh;
  }

  .titel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: black;
    text-align: center;
  }

  #blue {
    fill: black;
    transform-origin: center;
    transform-box: fill-box;
    transition: all 0.5s ease-in-out;
    transform: rotate(0deg);
}

svg:hover #blue {
  transition: all 0.5s ease-in-out;
  transform: rotate(0deg);
}

  #blue1 {
      fill: black;
      transform-origin: center;
      transform-box: fill-box;
      transition: all 0.5s ease-in-out;
      transform: rotate(0deg);
  }
  
  svg:hover #blue1 {
    transition: all 0.5s ease-in-out;
    transform: rotate(90deg);
}

#blue2 {
    fill: black;
    transform-origin: center;
    transform-box: fill-box;
    transition: all 0.5s ease-in-out;
    transform: rotate(0deg);
}

svg:hover #blue2 {
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg);
}

#blue3 {
    fill: black;
    transform-origin: center;
    transform-box: fill-box;
    transition: all 0.5s ease-in-out;
    transform: rotate(0deg);
}

svg:hover #blue3 {
  transition: all 0.5s ease-in-out;
  transform: rotate(-180deg);
}

#red {
    fill: black;
    transform-origin: center;
    transform-box: fill-box;
    transition: all 0.5s ease-in-out;
    transform: rotate(0deg);
}

svg:hover #red {
  transition: all 0.5s ease-in-out;
  transform: rotate(0deg);
}

#red1 {
    fill: black;
    transform-origin: center;
    transform-box: fill-box;
    transition: all 0.5s ease-in-out;
    transform: rotate(0deg);
}

svg:hover #red1 {
  transition: all 0.5s ease-in-out;
  transform: rotate(-180deg);
}

#red2 {
    fill: black;
    transform-origin: center;
    transform-box: fill-box;
    transition: all 0.5s ease-in-out;
    transform: rotate(0deg);
}

svg:hover #red2 {
  transition: all 0.5s ease-in-out;
  transform: rotate(90deg);
}

#red3 {
    fill: black;
    transform-origin: center;
    transform-box: fill-box;
    transition: all 0.5s ease-in-out;
    transform: rotate(0deg);
}

svg:hover #red3 {
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg);
}

#yellow {
    fill: black;
    transform-origin: center;
    transform-box: fill-box;
    transition: all 0.5s ease-in-out;
    transform: rotate(0deg);
}

svg:hover #yellow {
  transition: all 0.5s ease-in-out;
  transform: rotate(0deg);
}

#yellow1 {
    fill: black;
    transform-origin: center;
    transform-box: fill-box;
    transition: all 0.5s ease-in-out;
    transform: rotate(0deg);
}

svg:hover #yellow1 {
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg);
}

#yellow2 {
    fill: black;
    transform-origin: center;
    transform-box: fill-box;
    transition: all 0.5s ease-in-out;
    transform: rotate(0deg);
}

svg:hover #yellow2 {
  transition: all 0.5s ease-in-out;
  transform: rotate(180deg);
}

#yellow3 {
    fill: black;
    transform-origin: center;
    transform-box: fill-box;
    transition: all 0.5s ease-in-out;
    transform: rotate(0deg);
}

svg:hover #yellow3 {
  transition: all 0.5s ease-in-out;
  transform: rotate(90deg);
}

#green {
    fill: black;
    transform-origin: center;
    transform-box: fill-box;
    transition: all 0.5s ease-in-out;
    transform: rotate(0deg);
}

svg:hover #green {
  transition: all 0.5s ease-in-out;
  transform: rotate(0deg);
}

#green1 {
    fill: black;
    transform-origin: center;
    transform-box: fill-box;
    transition: all 0.5s ease-in-out;
    transform: rotate(0deg);
}

svg:hover #green1 {
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg);
}

#green2 {
    fill: black;
    transform-origin: center;
    transform-box: fill-box;
    transition: all 0.5s ease-in-out;
    transform: rotate(0deg);
}

svg:hover #green2 {
  transition: all 0.5s ease-in-out;
  transform: rotate(-180deg);
}

#green3 {
    fill: black;
    transform-origin: center;
    transform-box: fill-box;
    transition: all 0.5s ease-in-out;
    transform: rotate(0deg);
}

svg:hover #green3 {
  transition: all 0.5s ease-in-out;
  transform: rotate(90deg);
}

#red31 {
    fill: black;
    transform-origin: center;
    transform-box: fill-box;
    transition: all 0.5s ease-in-out;
    transform: rotate(0deg);
}

svg:hover #red31 {
  transition: all 0.5s ease-in-out;
  transform: rotate(90deg);
}

#yellow31 {
    fill: black;
    transform-origin: center;
    transform-box: fill-box;
    transition: all 0.5s ease-in-out;
    transform: rotate(0deg);
}

svg:hover #yellow31 {
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg);
}

#blue31,
#green21 {
    fill: black;
    transform-origin: center;
    transform-box: fill-box;
    transition: all 0.5s ease-in-out;
    transform: rotate(0deg);
}

svg:hover #blue31,
svg:hover #green21 {
  transition: all 0.5s ease-in-out;
  transform: rotate(0deg);
}