body {
  font-size: 0.9em;
  text-align: left;
  hyphens: none;
}

@supports (hyphenate-limit-chars: 6 4 4) {
  body {
    hyphens: auto;
    hyphenate-limit-chars: 6 4 4;
  }
}

/* HEADER */

header {
  background: none;
}

#logobutton {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  padding-left: 5vw;
  padding-right: 10vw;
  height: 25vw;
  width: 100vw;
  background-color: white;
  transition: transform 0.3s ease-in-out;
}

.hidden {
  transform: translateY(-100%);
}

body.nacht #logobutton {
  background-color: rgb(40, 40, 40);
}

body.nacht #naviButton {
  color: white;
}

body.nacht header {
  background: none;
}

body.nacht .sichtbar {
  background-color: rgb(40, 40, 40);
}

#naviButton {
  display: block;
  font-size: 2.5em;
  border: none;
  background: none;
}

.logoname {
  display: flex;
  gap: 7vw;
  align-items: center;
}

.logoname div {
  font-size: 1.1em;
}

header aside .logoname a img {
  width: 10vw;
  margin: 0;
}

header nav,
#nachtansicht {
  display: none;
}

.sichtbar {
  background-color: white;
  width: 100vw;
}

.sichtbar nav {
  display: block;
  margin-top: 30vw;
  font-size: 1.2em;
  padding-left: 7vw;
}

.sichtbar .unterseite {
  max-height: 500px;
  padding-left: 4vw;
}

.sichtbar #nachtansicht {
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: 14vw;
  margin-left: 7vw;
}

.sichtbar .impressum {
  bottom: 30vw;
}

/* BODY */

main {
  padding-left: 5vw;
  padding-right: 5vw;
  margin-left: 0;
  margin-right: 0;
  margin-top: 25vw;
}

main article p,
.vita div ol p {
  margin-bottom: 3vw;
}

.homegalerie,
.projekttruhe,
.projektmaroni,
.vita,
.arbeit {
  display: block;
}

.homegalerie img,
.projekttruhe img,
.projektmaroni img,
.vita img {
  width: 90vw;
  height: auto;
  margin-bottom: 2vw;
}

/* PROJEKT */

article {
  padding-right: 0;
}

/* ABOUT */

.neu {
  margin-left: 0;
}

.vita .musterlinks {
  margin-top: 5vw;
  margin-bottom: 5vw;
  margin-left: -10vw;
  width: 120%;
  height: 60vw;
  object-position: top;
}

.arbeit {
  display: flex;
  flex-direction: column;
}

.arbeit div {
  order: 2;
  padding-left: 0;
  padding-right: 10vw;
}

.arbeit .musterrechts {
  order: 1;
}