* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Edu Monument Grotesk Variable;
  font-size: 11pt;
  line-height: 13pt;
  scroll-behavior: smooth;

}

.home-body {
  overflow: hidden;
}

.home-body svg {
  cursor: grab;
}

.home-body svg:active {
  cursor: grabbing;
}

.hoverable {

}

.red{
  color: red;
}

.purple{
  color: #5b2d87;
}

@font-face {
  font-family: 'Edu Monument Grotesk Variable';
  src: url('../fonts/EduMonumentGroteskVariable-Regular.woff2') format('woff2'),
    url('../fonts/EduMonumentGroteskVariable-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Arthemys Display Bitmap';
  src: url('../fonts/ArthemysDisplay-Bitmap.woff2') format('woff2'),
    url('../fonts/ArthemysDisplay-Bitmap.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

nav {
  z-index: 999;
  width: 100%;
  padding: .5rem;
  position: fixed;
  background-color: white;
}

a {
  text-decoration: none;
}

.nav-link-list {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.nav-link-list>li {
  list-style: none;
}

.bildunterschrift{
  font-size: 8pt;
  line-height: 10pt;
}


.nav-red{
  border-bottom: 1.5px solid red;
}
.nav-red a {
  color: red;
}
.red a {
  color: red;
}
.nav-red .nav-active {
  color: white;
  background: red;
}
.red mark{
  background-color: red;
  color: white;
}


.nav-purple{
  border-bottom: 1.5px solid #5b2d87;
}
.nav-purple a {
  color: #5b2d87;
}
.purple a {
  color: #5b2d87;
}
.nav-purple .nav-active {
  color: white;
  background: #5b2d87;
}
.purple mark{
  background-color: #5b2d87;
  color: white;
}


.hover-text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: red;
  color: white;
}
.hidden {
  display: none;
}
.overflow-hidden {
  overflow-x: hidden;
}
.hoverable {
  transition: transform .3s ease;
  transform-box: fill-box;
  transform-origin: center;
  cursor: crosshair;
}
.active {
  transform: scale(1.2);
}

#plakat {
  height: 99svh;
  padding-top: 4svh;

}

h1 {
  font-family: 'Arthemys Display Bitmap';
  font-size: 4rem;
  line-height: 4rem;
  padding-top: 4rem;
  font-style: normal;
  font-weight: 100;
}

h2 {
  font-family: 'Arthemys Display Bitmap';
  font-size: 2rem;
  line-height: 2rem;
  font-style: normal;
  font-weight: 100;
}

.grid {

  padding-left: 10px;
  padding-right: 10px;

  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(17, 1);
  grid-column-gap: 10px;
  grid-row-gap: 10px;

}

/*
.grid-item {
  background-color: greenyellow
}
*/

img {
  width: 100%;
}

.grid-item-1 {
  grid-area: 1 / 5 / 2 / 11;
}

.grid-item-2 {
  grid-area: 2 / 6 / 3 / 11;
}

.grid-item-3 {
  grid-area: 3 / 5 / 4 / 11;
}

.grid-item-4 {
  grid-area: 4 / 6 / 5 / 11;
}

.grid-item-5 {
  grid-area: 5 / 5 / 6 / 11;
}

.grid-item-6 {
  grid-area: 6 / 6 / 7 / 11;
}

.grid-item-7 {
  grid-area: 7 / 5 / 8 / 11;
}

.grid-item-8 {
  grid-area: 8 / 6 / 9 / 11;
}

.grid-item-9 {
  grid-area: 9 / 5 / 10 / 11;
}

.grid-item-10 {
  grid-area: 10 / 6 / 11 / 11;
}

.grid-item-11 {
  grid-area: 11 / 5 / 12 / 11;
}

.grid-item-12 {
  grid-area: 12 / 6 / 13 / 11;
}

.grid-item-13 {
  grid-area: 13 / 5 / 14 / 11;
}

.grid-item-14 {
  grid-area: 14 / 6 / 15 / 11;
}

.grid-item-15 {
  grid-area: 15 / 5 / 16 / 11;
}

.grid-item-16 {
  grid-area: 16 / 6 / 17 / 11;
}

.grid-item-17 {
  grid-area: 17 / 5 / 18 / 11;
}


.nav-grid {
  
  display: grid;
  grid-template-columns: repeat(14, 1fr);
}

nav .grid-item-1 {
  grid-area: 1 / 1 / 2 / 2;
}

nav .grid-item-2 {
  grid-area: 1 / 5 / 2 / 11;
}

nav .grid-item-3 {
  grid-area: 1 / 14 / 2 / 15;
text-align: right;
}


.foto-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.foto-grid .grid-item-1 {
  grid-area: 1 / 1 / 2 / 2;
}

.foto-grid .grid-item-2 {
  grid-area: 1 / 2 / 2 / 3;
}

.foto-grid .grid-item-3 {
  grid-area: 2 / 1 / 3 / 2;
}

.foto-grid .grid-item-4 {
  grid-area: 2 / 2 / 3 / 3;
}

.foto-grid .grid-item-5 {
  grid-area: 3 / 1 / 4 / 2;
}

.foto-grid .grid-item-6 {
  grid-area: 3 / 2 / 4 / 3;
}

.foto-grid .grid-item-7 {
  grid-area: 4 / 1 / 5 / 2;
}

.foto-grid .grid-item-8 {
  grid-area: 4 / 2 / 5 / 3;
}

.foto-grid .grid-item-9 {
  grid-area: 5 / 1 / 6 / 2;
}

.foto-grid .grid-item-10 {
  grid-area: 5 / 2 / 6 / 3;
}

.foto-grid .grid-item-11 {
  grid-area: 6 / 1 / 7 / 2;
}

.foto-grid .grid-item-12 {
  grid-area: 6 / 2 / 7 / 3;
}

.foto-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.foto-grid-2 .grid-item-1 {
  grid-area: 1 / 1 / 2 / 2;
}

.foto-grid-2 .grid-item-2 {
  grid-area: 1 / 2 / 2 / 3;
}

.foto-grid-2 .grid-item-3 {
  grid-area: 2 / 1 / 3 / 2;
}

.foto-grid-2 .grid-item-4 {
  grid-area: 2 / 2 / 3 / 3;
}

.foto-grid-2 .grid-item-5 {
  grid-area: 3 / 1 / 4 / 2;
}

.foto-grid-2 .grid-item-6 {
  grid-area: 3 / 2 / 4 / 3;
}