* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 
***************
Import fonts
***************
*/

@font-face {
  font-family: "SCHRIFT1";
  src: url("fonts/ABCMonumentGroteskSemi-Mono-Regular-Trial.woff") format("woff");
}

@font-face {
  font-family: "SCHRIFT2";
  src: url("fonts/ABCMonumentGroteskSemi-Mono-Medium-Trial.woff") format("woff");
}

/* 
***************
General
***************
*/

body,
html {
  overflow-x: hidden;
  background-color: rgb(255, 255, 255);
  scroll-behavior: smooth;
  scroll-padding: 96px;
  cursor: crosshair;
}

img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--border-radius);
  position: relative;
  background-color: var(--common-color);
  transition: background-color 700ms ease;
  padding: 19px;
  outline: 1px solid black;
  outline-offset: -0.5px;
}

img:hover {
  background-color: var(--hover-color);
  cursor: crosshair;
}


.flex-beschrieb {
  opacity: 0;
  transition: 700ms all ease-in-out;
}

/* 
***************
Navigation
***************
*/
.email-link {
  font-family: "SCHRIFT1";
  color: black;
  transition: font-family 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition */
}

.email-link:hover {
  font-family: "SCHRIFT2";
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: var(--common-color);
  padding-bottom: 10px;
  border-top: 1px solid black;
  font-family: "SCHRIFT1";
  font-size: 16px;
  text-transform: uppercase;
  transition: background-color 1s ease;
}

.footer-left {
  flex: 1;
  text-align: left;
  padding-left: 5px;
  padding-bottom: 5px;
  padding-top: 5px;
}

.footer-center {
  flex: 1;
  text-align: center;
  padding-bottom: 5px;
  padding-top: 5px;
}

.footer-right {
  flex: 1;
  text-align: right;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-top: 5px;
}

.footer-center,
.footer-right {
  transition: font-family 0.3s ease-in-out;
  cursor: pointer;
}

.footer-center:hover,
.footer-right:hover {
  font-family: "SCHRIFT2";
}


/* 
***************
Typography
***************
*/


.flex-bild-1 {
  display: flex;
  flex: 0 0 calc(100% / var(--columns) * 3 - (var(--gap) * (var(--columns) - 3) / var(--columns)));
  transition: all 500ms ease-in-out;
  position: relative;
}

.flex-bild-2 {
  display: flex;
  flex: 0 0 calc(100% / var(--columns) * 6 - (var(--gap) * (var(--columns) - 6) / var(--columns)));
  transition: all 500ms ease-in-out;
}

.flex-bild-3 {
  display: flex;
  flex: 0 0 calc(100% / var(--columns) * 9 - (var(--gap) * (var(--columns) - 9) / var(--columns)));
  transition: all 500ms ease-in-out;
}

.projektbeschrieb {
  display: flex;
  flex: 0 0 calc(100% / var(--columns) * 3 - (var(--gap) * (var(--columns) - 3) / var(--columns)));
  background-color: var(--projektbeschrieb-color);
  padding: 5px;
  font-size: 16px;
  font-family: "SCHRIFT1";
  color: black;
  text-transform: uppercase;
  flex-direction: column;
  transition: background-color 1s ease;
  outline: 1px solid black;
  outline-offset: -0.5px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0px 0;
}

.label {
  flex: 1; 
}

.value {
  flex: 1; 
  text-align: left; 
}

.about-beschrieb {
  display: flex;
  background-color: rgb(82, 255, 82);
  outline: 1px solid black;
  outline-offset: -0.5px;
  padding: 5px;
  font-size: 16px;
  font-family: "SCHRIFT1";
  color: black;
  width: 100vw;
  flex: 0 0 calc(100% / var(--columns) * 3 - (var(--gap) * (var(--columns) - 3) / var(--columns)));
}

.contact-beschrieb {
  display: flex;
  background-color: rgb(82, 255, 82);
  outline: 1px solid black;
  outline-offset: -0.5px;
  padding: 5px;
  font-size: 16px;
  font-family: "SCHRIFT1";
  color: black;
  width: 100vw;
  flex: 0 0 calc(100% / var(--columns) * 3 - (var(--gap) * (var(--columns) - 3) / var(--columns)));
  flex-direction: column;
}

.projektkasten {
  display: flex;
  font-family: "SCHRIFT1";
  text-align: left;
  color: rgb(0, 0, 0);
  font-size: 16px;
}

#dynamic-content-container {
  margin-top: 0px;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
  /*wrap reverse da ausgewähltes projekt zuoberst sein soll */
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  will-change: transform;
}


/* Standardzustand für den dynamischen Inhalt */
.dynamic-content {
  position: relative;
  opacity: 1;
  /* Unsichtbar zu Beginn */
  transform: translateY(-100%);
  /* Startposition über dem Container */
  transition: opacity 2s ease, transform 1s ease;
  /* Übergänge für Opazität und Position */
}

/* Klasse zum Einblenden: Slide-in von oben */
.dynamic-content.show {
  opacity: 1;
  transform: translateY(0);
  /* Endzustand: an der korrekten Position */
}


#content-001 {
  display: flex;
  flex-wrap: wrap;
}

#content-002 {
  display: flex;
  flex-wrap: wrap;
}

#content-003 {
  display: flex;
  flex-wrap: wrap;
}

#content-004 {
  display: flex;
  flex-wrap: wrap;
}

#content-005 {
  display: flex;
  flex-wrap: wrap;
}

#content-006 {
  display: flex;
  flex-wrap: wrap;
}

#content-007 {
  display: flex;
  flex-wrap: wrap;
}

#content-008 {
  display: flex;
  flex-wrap: wrap;
}

#content-009 {
  display: flex;
  flex-wrap: wrap;
}

#content-010 {
  display: flex;
  flex-wrap: wrap;
}

#content-011 {
  display: flex;
  flex-wrap: wrap;
}

.content {
  margin-top: 96px;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  color: rgb(0, 0, 0);
  font-family: "SCHRIFT2";
}

.col-3:hover {
  background-color: var(--hover-color);
}

.reset-mobile {
  display: none;
}

/* 
***************
Grid
***************
*/
:root {
  --columns: 12;
  --gap: 0px;
  --common-color: #D9D9D9;
  --hover-color: #F4EF00;
  --projektbeschrieb-color: #009CEB;
}

* {
  box-sizing: border-box;
}

.flex-beschrieb {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
  margin-top: 0px;
  padding: 0;
  align-items: start;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
  margin-top: 0px;
  padding: 0;
}

.nav {
  position: fixed;
  z-index: 100;
}

.col {
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--common-color);
  outline: 1px solid black;
  outline-offset: -0.5px;
  padding: 19px;
  transition: all 500ms ease-in-out;
  cursor: crosshair;
}



.video-container video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius);
}

.video-container:hover {
  background-color: var(--hover-color);
}

.video-container.flex-bild-2 {
  flex: 0 0 calc(100% / var(--columns) * 6 - (var(--gap) * (var(--columns) - 6) / var(--columns)));
}







/* Correctly calculated column widths considering the gap */
.col-1 {
  flex: 0 0 calc(100% / var(--columns) * 1 - (var(--gap) * (var(--columns) - 1) / var(--columns)));
}

.col-2 {
  flex: 0 0 calc(100% / var(--columns) * 2 - (var(--gap) * (var(--columns) - 2) / var(--columns)));
}

.col-3 {
  flex: 0 0 calc(100% / var(--columns) * 3 - (var(--gap) * (var(--columns) - 3) / var(--columns)));
  background-color: var(--common-color);
  transition: background-color 700ms ease;
  outline: 1px solid black;
  outline-offset: -0.5px;
  padding: 5px;
  font-size: 16px;
  font-family: "SCHRIFT1";
  color: rgb(0, 0, 0);
}
.col-6 {
  flex: 0 0 calc(100% / var(--columns) * 6 - (var(--gap) * (var(--columns) - 6) / var(--columns)));
  background-color: var(--common-color);
  border-bottom: 1px solid black;
}

.col-12 {
  flex: 0 0 calc(100% / var(--columns) * 12 - (var(--gap) * (var(--columns) - 12) / var(--columns)));
  background-color: rgb(255, 255, 255);
  padding: 5px;
  font-size: 16px;
  font-family: "SCHRIFT1";
  color: rgb(0, 0, 0);
  height: 700px
}

@media (max-width: 1009px) {
  .content {
    margin-top: 96px;
  }
}

@media (max-width: 1001px) {
  .content {
    margin-top: 0px;

  }
  .reset-mobile {
    display: flex;
  }
  .reset-desktop {
    display: none;
  }
}



@media (max-width: 1001px) {

  .col-1,
  .col-2,
  .col-3,
  /* vilicht wegneh – und nur nummere zeige */
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12,
  .projektbeschrieb,
  .flex-bild-1,
  .flex-bild-2,
  .about-beschrieb,
  .contact-beschrieb,
  .video-container,
  .video-container.flex-bild-2{
    flex: 0 0 calc(100%);
  }

  .nav {
    position: relative;
  }

  body,
  html {
    scroll-padding: 0px;
  }

  
}