/* Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
 padding: 0;
 margin: 0;
}
*, ::before, ::after {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
img { /* jedes Bild ist max. gleich breit wie das umgebende div */
  max-width: 100%;
  height: auto;
}
video { /* jedes Bild ist max. gleich breit wie das umgebende div */
  max-width: 100%;
  height: auto;
}
.textspalte {
  width: 32%;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  padding: 1px;
  text-align: right;
}


.bildspalte{
  padding: 20px;
  width: 66%;
  background-color: ;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.2fr 0.3fr;
  gap: 18px 18px;
  grid-auto-flow: row;
  grid-template-areas:
    "gross gross"
    "klein1 klein2"
    "klein3 klein4"
    "klein5 klein6";
}
.bildspalte img,
.bildspalte video{
  width: 100%;
}
.bildspalte {
  position: relative;
  width: 66%;
  padding: 20px;
}
.gross { grid-area: gross; }

.klein2 { grid-area: klein2; }

.klein1 { grid-area: klein1; }

.klein3 { grid-area: klein3; }

.klein4 { grid-area: klein4; }

.klein5 { grid-area: klein3; }

.klein6 { grid-area: klein4; }

.textspalte{
  position: fixed;
  width: 32%;
  top: 0;
  right: 0;
  height: 100%;
  background-color: ;
}
.titel_vertikal {
  position: absolute;
  top: 0;
  right: 110%;
  width: 100vh;
  white-space: nowrap;
  transform: rotate(270deg);
  transform-origin: right top;
  text-align: right;
  padding: 20px;
}
.oben{
  padding: 20px;
}
.unten{
  padding: 20px;
  position: absolute;
  bottom: 0;
}

@font-face {
  src: url(fonts/SuisseWorks-Regular-WebXL.ttf);
  font-family: suissework;
}

p {
 color: black;
 font-family: suissework, Helvetica, Futura, Helvetica, Arial, sans-serif;
 font-size: 20px;
 font-weight: normal;
 hyphens: auto;
 text-align: left;
}

.navigation,
.navigation ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #fff;
  z-index: 999;
}


.text_vertikal_links {
  position: fixed;
  top: 0;
  right: 100%;
  width: 100vh;
  white-space: nowrap;
  transform: rotate(270deg);
  transform-origin: right top;
}

a {
 color: black;
 font-family: 'Proxima Nova',Helvetica, Futura, Helvetica, Arial, sans-serif;
 font-size: 27px;
 font-weight: bold;
 hyphens: auto;
 text-decoration: none;
 list-style: none;
}
a.mail-link {
  color: black;
  font-family: suissework, Helvetica, Futura, Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: normal;
  hyphens: auto;
  text-align: left;
}
li{
  list-style: none;
}
.vertikal_menu {
  position: absolute;
  top: 20px;
  right: 100%;
  width: 100vh;
  display: flex;
  justify-content: flex-end;
  white-space: nowrap;
  transform: rotate(270deg);
  transform-origin: right top;
}
.bildgross {
  position: absolute;
  top: 20px;
  left: 20px;
  transition: 0.3s opacity ease-in-out;
  opacity: 0;
}
.bildgross.show {
  opacity: 1;
}