/* ===== Projektunterseiten Vertikal Styles ===== */


header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  border-style: none;

  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  width: 100%;
  height: 17vh;
  padding: 0 5vh 0 7vh;

  background: var(--color-background);
  /* border-bottom: 1.4px solid var(--color-primary);  */

  font-size: 0.8rem;
  transition: transform 0.4s ease;
  will-change: transform;
}

/* kleines Logo für Header */
.logo-klein {
  display: flex;
  align-items: center; /* Oder flex-start für oberen Rand */
  padding-bottom: 4vh; /* 5.1vh; */
  font-family: var(--font-geist-bold);
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  color: var(--color-primary);
  align-items: flex-start;
  pointer-events: auto;
}

/* Wackel Link für alle horizontalen Texte */
.title-link {
  display: inline-block;
  text-decoration: none;
  transform-origin: center;
  z-index: 500;
}


/* Body für vertikal Seiten */
body {
  /* Für vertikale Seiten brauchst du meist kein spezielles overflow */
  overflow-y: auto;
  overflow-x: hidden;
  width: auto;  /* Standard */
}

.hero-section {
  position: relative;
  width: 100vw;
  height: auto; /* Höher: mehr Platz für Inhalt */

  margin-top: 45vh; /* Text weiter nach unten */
  margin-bottom: 10vh;

  padding-right: 9vw;
  padding-left: 9vw;

 
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* oben anfangen, Padding regelt Abstand */
  z-index: 3;
}

/* .hero-section.daten{
 padding-left: 12vw;
} */

.hero-only-h1 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-family: var(--font-geist-semibold);
  /* margin-bottom: 3.4vh; */
  text-align: left;
  max-width: 45ch;   
  padding-bottom: 1.8rem;
}

.hero-description h1 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-family: var(--font-geist-semibold);
  /* margin-bottom: 3.4vh; */
  text-align: left;
  max-width: 45ch;   
}

.hero-description h2{
  padding-top: 0.4rem;
  padding-bottom: 1.8rem;
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  font-family: var(--font-geist-regular);
  text-align: left;
  max-width: 60ch;
  /* margin-bottom: 3.4vh; */
}

.hero-description p {
  padding-bottom: 0.8rem;
  font-family: var(--font-geist-light);
  font-size: clamp(0.8rem, 2.5vw, 1rem); /* responsiv skalierend */
  letter-spacing: normal;
  line-height: 1.5;
  max-width: 66ch;   
  text-align: left;
   word-wrap: break-word;
  hyphens: none;
  word-break: normal;   /* Silbentrennung  aber Sprache muss in html sein*/
}


.hero-designtype{
  padding-top: 3rem;
  font-size: clamp(0.4rem, 2vw, 0.8rem);
  letter-spacing: 0.02rem;
  text-align: left; 
  font-family: var(--font-geist-regular);
  color: var(--color-secondary);
  /* font-size: 2vw !important; */
}

  .link-daten{
  font-family: var(--font-geist-semibold);
  }

  .link-daten:hover{
  text-decoration: underline;
  }



/* ============== Text-Section =========== */

.text-section {
  position: relative;
  width: 100vw;
  height: auto; /* Höher: mehr Platz für Inhalt */

  margin-top: 20vh; 
  margin-bottom: 8vh;

  /* padding-top: 10vh;
  padding-right: 9vw;
  padding-left: 9vw; */
  padding-right: 9vw;
  padding-left: 9vw;
  /* padding: 10vw 4vw 1vw 9vw; */
  /* padding: 3rem 2rem 3rem 2rem; oben rechts unten links */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* oben anfangen, Padding regelt Abstand */
  z-index: 3;
}


.text-description h2{
  font-size: clamp(1.4rem, 2.5vw, 1.5rem);
  font-family: var(--font-geist-semibold);
  /* margin-bottom: 3.4vh; */
  text-align: left;
  max-width: 60ch;
  padding-bottom: 1.5rem;
}


.text-description p {
  padding-bottom: 0.8rem;
  font-family: var(--font-geist-light);
  font-size: clamp(0.8rem, 2.5vw, 1rem); /* responsiv skalierend */
  /* font-size: 2.5vw;  */
  line-height: 1.5;
  max-width: 66ch;
  text-align: left;
  word-wrap: break-word;
  hyphens: none;
  word-break: normal;
  /* hyphens: auto;         Silbentrennung  aber Sprache muss in html sein  */
}



/* für Impressum und Datenschutz Seite */
.text-section.daten{
   padding: 1vw 9vw 3vw 9vw; /* oben rechts unten links */
}

.text-description.daten {
   padding: 0rem 2rem 3rem 2rem; 
}

.text-description.daten h2{
  font-size: clamp(1.0rem, 2.5vw, 1.2rem);
  /* max-width: 53ch; */
}

.text-description.daten p{
   padding-bottom: 3rem; /* oben rechts unten links */
}

/* Abstand Zeilenumbruch */
.klein-break {
  line-height: 0.5;
  margin: 0;
  padding: 0;
  display: block;
  content: "";
}

.zitat{
  /* margin: 16vh 9vw 4vh;  oben ist schon 8vh + 0.8rem und unten 20vh also 12vh unterschied  */
  margin-top: 22vh;
  margin-bottom: 6vh;
  margin-right: 9vw;
  margin-left: auto;
  font-family: var(--font-geist-semibold);
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  line-height: 1.5;
  max-width: 42ch;                /* 38ch Optional, für bessere Lesbarkeit */
  text-align: right;
  
  border: 1.4px solid var(--color-primary); 
  /* background-color: var(--color-primary-opacity); */
  border-radius: 1.5rem;
  padding: 7rem 3rem;           /* Innenabstand, damit Text nicht am Rand klebt */
  box-sizing: border-box;         /* Padding wird zur Gesamtgröße dazugerechnet */
  
  color: var(--color-primary);                    /* Textfarbe anpassen, falls Hintergrund dunkel */
  /* box-shadow: 0 4px 10px rgba(0,0,0,0.1);  */
}




/* ============ Nexster wrapper Video Grids ============= */

.content-wrapper-insta {
  display: flex;
  gap: 2vw; /* Abstand zwischen Video und Bild-Galerie */
  justify-content: space-between;
  /* align-items: flex-start; */
  align-items: stretch; /* ← Wichtig für gleiche Höhe */
  flex-wrap: wrap;  /* wichtig für mobile Responsivität */
  margin: 4vw;
  box-sizing: border-box;
}


/* Bento-Box versuch */
 .video-grid-eins-story {
  /* width: 30%; */
  flex: 1 1 30%;
  max-width: 100%; /* damit es responsive bei mobil ist */
  /* max-width: 30%;  */
  height: auto; 
  /* margin: 10vh auto; */
  /* margin: 3vw; */
  background-color: var(--color-primary-opacity);
  border-radius: 1.5rem;
  /* border: 1.4px solid var(--color-primary); */
  display: grid;
  /* align-items: center; */
  box-sizing: border-box;  /* wichtig für korrektes Padding */
  padding: clamp(2rem, 2vw, 3rem) clamp(1rem, 2vw, 2rem);
 }

.grid-image-und-text{
  flex: 1 1 65%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* ! wichtig */
  gap: 2vw;
}

 /* grid wrapper für image grid */
.image-grid-wrapper {
  flex: 0 0 auto;
  /* padding: 2rem 2rem 3rem 2rem; */
  padding: clamp(2rem, 2vw, 3rem) clamp(1rem, 2vw, 2rem);
  box-sizing: border-box;
  background-color: var(--color-primary-opacity);
  border-radius: 1.5rem;
  /* margin: 3vw auto; */
}
 
 .nexster-textbox{    
  flex: 1 1 auto; /* wächst mit */
  display: flex;
  align-items: flex-end;       /* Text nach unten innerhalb der Box */
  justify-content: flex-end;   /* Text rechts */
  padding: clamp(1.5rem, 5vw, 3rem);
  box-sizing: border-box;


  /* background-color: var(--color-primary-opacity); */
  border-radius: 1.5rem;
  border: 1.7px solid var(--color-primary); 
  /* padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 2.5rem); */
  color: var(--color-primary);

  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-family: var(--font-geist-semibold);
  line-height: 1.5;
  text-align: right;
}

/* Für Story-Beitrag */
.image-grid-drei-square {
  width: 100%;
  height: auto; 
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 1rem;
}

/* ============ Video Grids ============= */

.video-grid-eins {
  width: auto;
  /* height: 90vh;  auto; */
  height: auto; 
  /* margin: 10vh auto; */
  margin: 4vw;
  background-color: var(--color-primary-opacity);
  border-radius: 1.5rem;
  /* border: 1.4px solid var(--color-primary); */
  display: grid;
  /* align-items: center; */
  box-sizing: border-box;  /* wichtig für korrektes Padding */
    /* Hybrid-Padding: oben/unten & rechts/links */
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 2.5vw, 2rem);
}


.video-grid-zwei {
  /* height: 45vh; */
  width: auto;
  height: auto; 
  margin: 4vw;
  background-color: var(--color-primary-opacity);
  border-radius: 1.5rem;
  /* border: 1.4px solid var(--color-primary); */
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  /* flex-wrap: wrap; Für bessere Responsivität
  align-items: center; */
  gap: 2rem; /* Abstand zwischen Sektionen */
  box-sizing: border-box;  /* wichtig für korrektes Padding */
  padding: 3rem 2rem 3rem 2rem; /* oben rechts unten links*/
  /* position: relative; */
}

/* für alle Videos und Bilder */
.video-grid-drei {
  /* width: 94vw;  */
  /* height: 45vh;  */
  width: auto;
  height: auto; 
  margin: 4vw;
  background-color: var(--color-primary-opacity);
  border-radius: 1.5rem;
  /* border: 1.4px solid var(--color-primary); */
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  /* flex-wrap: wrap; Für bessere Responsivität*/
  /* align-items: center; */
  gap: 2rem; /* Abstand zwischen Sektionen */
  box-sizing: border-box;  /* wichtig für korrektes Padding */
  padding: 3rem 2rem 3rem 2rem;
  /* position: relative; */
}


/* für alle Videos und Bilder */
.section-vertical {
  width: 100%; /* Jetzt vollständig durch Grid geregelt */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex: 1 1 22%; Videos nebeneinander mit etwas Abstand */
  /* flex: 1 1 45%;
  max-width: 48%;
  min-width: 300px; */
  /* gap: 0.8rem; */
}

.section-content-vertical {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ============== Video Container & Textcontainer für alle Videos =========== */
.video-container-project {
  width: 100%; /* Video kleiner als Bereich */
  aspect-ratio: 16/9; 
  border-radius: inherit; /* Bild übernimmt die gleiche Rundung */
  overflow: hidden;
  background-color: black; /* fallback für Transparenz im Video */
  border-radius: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* Wichtig für absolute positionierte Kinder */
  box-shadow: 1px 12px 8px -2px rgba(0, 0, 0, 0.2);
}

/* Das Video selbst für alle Videos */
.video-project {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Textcontainer unter dem Video klein */
.section-text-info {
  width: 100%;
  max-width: 100%;
  padding-top: 2rem;
  /* padding-left: 0.4rem; */
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  /* box-sizing: border-box; */
  grid-column: 1 / -1; /* Spannweite über alle Spalten von erster bis letzter */
}


 /* container video-grid-eins Dummy */
 .video-container-project.dummygr {
  width: 90%; 
}

/* Text video-grid-eins Dummy */
.section-text-info.dummygr {
  width: 90%;
  }

/* container video-grid-eins Klimaklick & Leafchange */
 .video-container-project.mainfocus {
  width: 90%; 
}

/* Text video-grid-eins Klimaklick & Leafchange */
.section-text-info.mainfocus {
  width: 90%;
  }

/* container video-grid-eins ba */
.video-container-project.ba{
  width: 80%; 
  aspect-ratio: 16/10; /* je nach Videogröße 16/9 */
}

/* text video-grid-eins ba */
.section-text-info.ba {
  width: 80%;
}

/* Bento Box Versuch container video story nexster */
.video-container-project.story{
  /* width: 33%;  */
  width: 100%; 
  aspect-ratio: 9/16; 
}


/* Video & Image Main Title */
.main-title-video {
  margin: 0;
  font-family: var(--font-geist-semibold);
  font-size: 1rem;
  letter-spacing: 0.01rem;
  text-transform: uppercase;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Video & Image  Subtitle */
.section-subtitle-klein {
  margin: 0;
  padding-top: 0.5rem;
  font-family: var(--font-geist-light);
  font-size: 0.8rem;
  letter-spacing: normal;
  line-height: 1.5; /* Bessere Lesbarkeit */
  color: var(--color-primary);
  /*width: 70ch; ca. 60 Zeichen pro Zeile */
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: none; /* verhindert Silbentrennung mit Bindestrich */
}


/* =========== mixed Grid ========== */

/* noch ein div mehr */
.mixed-section{
  height: auto;
  width: auto;
  background-color: var(--color-primary-opacity);
  border-radius: 1.5rem;
  /* border: 1.4px solid var(--color-primary); */
  margin-right: 4vw;
  margin-left: 4vw;
  margin-bottom: 10vh; 
  box-sizing: border-box;  /* wichtig für korrektes Padding */
} 

/* Großes Video Mixed Dummy */
.video-grid-eins.mixed {
  background-color: transparent;
  margin: 0;
}  

/* zwei videos dummy */
.video-grid-zwei.mixed {
  margin: 0;
  background-color: transparent; 
  box-sizing: border-box;  /* wichtig für korrektes Padding */
  padding: 1rem 2rem 3rem 2rem; /* oben rechts unten links */
}

/* =============== IMAGE GRIDS ================ */


.big-image-section {
  width: auto;
  height: auto; 
  margin: 4vw;
  /* margin: 10vh auto; */
  background-color: var(--color-primary-opacity);
  border-radius: 1.5rem;
  /* border: 1.4px solid var(--color-primary); */
  display: grid;
  padding: 3rem 2rem 3rem 2rem;  
  box-sizing: border-box;  /* wichtig für korrektes Padding */
}

.image-grid-zwei {
  width: auto;
  height: auto; 
  margin: 4vw;
  background-color: var(--color-primary-opacity);
  border-radius: 1.5rem;
  /* border: 1.4px solid var(--color-primary); */
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  /* flex-wrap: wrap; Für bessere Responsivität
  align-items: center; */
  gap: 2rem; /* Abstand zwischen Sektionen */
  padding: 3rem 2rem 3rem 2rem; /* oben rechts unten links*/
  box-sizing: border-box;  /* wichtig für korrektes Padding */
}


/* Für Story-Beitrag */
/* .image-grid-drei {
  width: auto;
  height: auto; 
  margin: 3vw;
  background-color: var(--color-primary-opacity);
  border-radius: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 1rem Abstand zwischen Sektionen
  padding: 3rem 12rem 3rem 12rem; oben rechts unten links
  position: relative;
  box-sizing: border-box;  wichtig für korrektes Padding
} */

/* .image-grid-drei.square {
  width: 70%;
   } */


/* für alle Bilder */
.image-section-vertical {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* für alle Bilder */
.image-section-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
} 


/* =============== IMAGE CONTAINER & Textcontainer ================ */

/* Container für alle */
.image-container {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 0.8rem;
  /* border-radius: inherit; Bild übernimmt die gleiche Rundung */
  overflow: hidden;
  /* background-color: black; */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; 
  box-shadow: 1px 12px 8px -2px rgba(0, 0, 0, 0.2);
}

/* Das Bild selbst für alle*/
.image-all {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Textcontainer für alle Image im Grid */
.image-text {
  width: 100%;
  padding-top: 2rem;
  /* padding-left: 0.4rem; */
  box-sizing: border-box;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  padding-bottom: 0;
  grid-column: 1 / -1; /* Spannweite über alle 3 Spalten */
}

/* Container Horizontal Big Image Graue Hintergründe */
.image-container.grau {
  width: 80%;
  aspect-ratio: 9/5;
}

/* Text Horizontal Big Image Graue Hintergründe */
.image-text.grau{
  width: 80%;
} 

/* Container Image mit 5:9 Seitenverhältnis Vertikal Poster Matisse */
.image-container.tall {
  width: 40%;
  aspect-ratio: 1241 / 1749; /* korrektes Verhältnis */
}

/* Text Image mit 5:9 Seitenverhältnis Vertikal Poster Matisse */
.image-text.tall{
  width: 40%;
} 

/* container image Für Vertikale sehr lange Bilder Dummy */
.image-container.lang {
  aspect-ratio: 1915/6685; 
}

/* container image Story-Beitrag Square Nexster */
.image-container.square {
  width: 100%; 
  aspect-ratio: 1 / 1;
  /* max-width: 350px;  */
  /* overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; 
  border-radius: 0.8rem;
  box-shadow: 1px 12px 8px -2px rgba(0, 0, 0, 0.2); */
}


/* Container Image Website Nexster */
.image-container.web {
  width: 80%; 
  aspect-ratio: 2880/1748;
}

/* Text Image Website Nexster */
.image-text.web{
  width: 80%; 
}


/* Container Image Poster Nexter */
.image-container.poster{
  width: 60%;
  aspect-ratio: 7913 / 9921;
}

/* Text Image Poster Nexter */
.image-text.poster{
  width: 60%;
}







/* ======================= BUTTON hover Video ==================== */
.cursor-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-geist-regular);
  font-size: 0.8rem;
  letter-spacing: 0.01rem;
  padding: 8px 16px;
  background-color: var(--color-background);
  border: 1.4px solid var(--color-primary);
  border-radius: 9999px;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: none; /* entfernt link unterstrich */
  transition: color 0.3s ease, transform 0.3s ease;
}
.cursor-button.active {
  background-color: var(--color-button-active);
  border: 1.7px solid var(--color-primary);
  color: var(--color-primary);
} 

/* Control Button (Play/Pause) */
.cursor-button.control-button {
  background-color: var(--color-button-play-bg);
  border: 1.4px solid var(--color-button-play);
  color: var(--color-button-play);
}

.cursor-button.control-button.active {
  background-color: var(--color-button-play-active);
  border: 1.7px solid var(--color-button-play);
  color: var(--color-button-play);
}

/* --Css für funktionale unmute button video-- */

/* .unmute-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-geist-light);
  font-size: 0.8rem;
  padding: 8px 16px;
  background-color: var(--color-background);
  border: 1.4px solid var(--color-primary);
  border-radius: 9999px;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: none; entfernt link unterstrich
  transition: color 0.3s ease, transform 0.3s ease;
}

.unmute-button.active {
  background-color: var(--color-button-hover);
  color: var(--color-primary);
}  */


/* Custom Cursor in Video-Containern ausblenden */
.video-container-project.hide-custom-cursor ~ .custom-cursor,
.hide-custom-cursor .custom-cursor {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Zusätzlich: Standardcursor auch ausblenden für den Video-Container */
.video-container-project.hide-custom-cursor,
.video-container-project.hide-custom-cursor * {
    cursor: none !important;
}


/* ----------------- START JungleHub Site ------------- */

/* .polaroid-image-section{
  width: 70vw;
  height: auto; 
  margin: 10vh auto;
  background-color: var(--color-background-second);
  border-radius: 1.5rem;
  display: grid;
  padding: 3rem 2rem 3rem 2rem;  oben rechts unten links
} */


/* .image-container-polaroid {
  width: 100%; 
  max-width: 350px; 
  aspect-ratio: 1444 / 2048;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; 
  border-radius: 0.8rem;
  box-shadow: 1px 12px 8px -2px rgba(0, 0, 0, 0.2);
} */


.polaroid-image-section {
  width: 94vw;
  height: 90vh;
  margin: 20vh auto;
  background-color: var(--color-background-second);
  border-radius: 1.5rem;
  /* padding: 3rem 2rem; */
  padding: none;
  position: relative;
  overflow: hidden; 
}

.image-container-polaroid {
  height: 25vw;
  aspect-ratio: 1444 / 2048;
  background: #FEFEFE;
  border-radius: 0.1rem;
  padding: 0.9rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
  position: absolute;
  transition: box-shadow 0.2s ease, z-index 0s;
  z-index: 3;
  transform-origin: center center;
  cursor: grab;
}

.image-container-polaroid:active {
  z-index: 1000;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  cursor: grabbing;
}

.image-container-polaroid:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  z-index: 100;
}

.img-polaroid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

/* Individuelle Positionen und Rotationen für natürliches Aussehen */
.image-container-polaroid:nth-child(1) {
  top: 130px;
  left: 110px;
  transform: rotate(-8deg);
  z-index: 5;
}

.image-container-polaroid:nth-child(2) {
  top: 100px;
  left: 300px;
  transform: rotate(12deg);
  z-index: 3;
}

.image-container-polaroid:nth-child(3) {
  top: 200px;
  left: 440px;
  transform: rotate(-8deg);
  z-index: 7;
}

.image-container-polaroid:nth-child(4) {
  top: 60px;
  left: 600px;
  transform: rotate(18deg);
  z-index: 2;
}

.image-container-polaroid:nth-child(5) {
  top: 180px;
  left: 750px;
  transform: rotate(10deg);
  z-index: 6;
}

.image-container-polaroid:nth-child(6) {
  top: 290px;
  left: 260px;
  transform: rotate(7deg);
  z-index: 4;
}

.image-container-polaroid:nth-child(7) {
  top: 250px;
  left: 850px;
  transform: rotate(-15deg);
  z-index: 8;
}

.image-container-polaroid:nth-child(8) {
  top: 270px;
  left: 550px;
  transform: rotate(-8deg);
  z-index: 1;
}

.image-container-polaroid:nth-child(9) {
  top: 70px;
  left: 970px;
  transform: rotate(-3deg);
  z-index: 9;
}

/* Responsive Anpassungen */
@media (max-width: 1200px) {
  .polaroid-image-section {
      width: 95vw;
  }
  
  .image-container-polaroid {
      width: 140px;
      height: 170px;
      padding: 10px 10px 10px 10px;
  }
  
  .img-polaroid {
      height: 120px;
  }
}

@media (max-width: 768px) {
  .image-container-polaroid {
      width: 120px;
      height: 150px;
      padding: 8px 8px 8px 8px;
  }
  
  .img-polaroid {
      height: 105px;
  }
}  



/* Anfang Img-Trail Animation */
/* .items {
	position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vw;
  z-index: 100;
} */

/* .item {
  position: absolute;
  width: 150px;  
  height: 200px;  
  overflow: hidden;
}

.item img {
  width: 100%;  
  height: 100%;  
  object-fit: cover;
} */

/* 3D-Container */
#container3D canvas{
  /* width: 100vw !important;
  height: 100vh !important; */
  position: fixed;
  z-index: 300;
  inset: 0;
  /* background-color: red; */
  pointer-events: none;  /* verhindert jede Interaktion mit dem Canvas! */
 }

/* alter Code *"
/*
.content {
	height: 300px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.content__img {
	position: absolute;  Diese Positionierung ist notwendig, damit GSAP sie verschieben kann 
  width: 15vw;  Breite der Bilder 
  height: 20vw;  Höhe der Bilder 
  transform: translate(-50%, -50%);  Damit die Bilder zentriert werden 
  pointer-events: none;  Verhindert, dass die Bilder mit der Maus interagieren 
 }
 */
/*
.content__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
  

@media screen and (min-width: 100em) {
	body {
		overflow: hidden;
	}
	.content {
		height: 100vh;
		overflow: hidden;
	}
}
*/
/* Ende Img-Trail Animation */
/* ============== END JUNGLE HUB SITE =============== */



/* ======= START GANADITO Site ========= */
.klappe-section {
  position: relative;
  max-width: 100%; 
  margin: 10vw 4vw;
  padding: 5vw;
  transform-origin: center; /* Skaliert von der Mitte aus */
}

.klappe-text {
  grid-area: text;
  text-align: center;
  /* background: var(--color-footer-bg); */
  color: var(--color-primary);
  padding: 5vw 10vw;
  border-radius: 10px;
  font-size: 2.5rem;
  z-index: 1;
}

.klappe {
  position: absolute;
  width: 24vw;
  height: auto;
  transform-origin: center;
  transition: transform 0.4s ease-in-out;
  transform: rotate(var(--rotate-angle)) scaleX(var(--scaleX, 1)); 
}


/* Manuell festgelegte Position, Rotation und Spiegelung */
.klappe1 { top: 0vw; left: -3vw; --rotate-angle: -20deg;  --x-move: -3vw; --y-move: -3vw; }
.klappe2 { top: 2.5vw; left: 9vw; --rotate-angle: 30deg;  --x-move: 0vw; --y-move: -3vw; }
.klappe3 { top: 0vw; left: 20vw; --rotate-angle: 10deg; --x-move: 3vw; --y-move: -3vw; }
.klappe4 { top: 1.5vw; left: 30vw; --rotate-angle: 0deg; --x-move: 3vw; --y-move: -3vw; }
.klappe5 { top: 0vw; right: 26vw; --rotate-angle: 25deg;  --x-move: 3vw; --y-move: -3vw; }
.klappe6 { top: 1vw; right: 15vw; --rotate-angle: 6deg; --x-move: 3vw; --y-move: -3vw; }
.klappe7 { top: 0vw; right: 7vw; --rotate-angle: -15deg; --x-move: 3vw; --y-move: -3vw; }

.klappe8 { top: 1.5vw; right: -1.5vw; --rotate-angle: -20deg;  --x-move: 3vw; --y-move: -3vw; }
.klappe9 { top: 9vw; right: -2vw; --rotate-angle: -25deg; --x-move: 3vw; --y-move: -3vw; }
.klappe11 { top: 18vw; right: -4.5vw; --rotate-angle: -65deg; --x-move: 3vw; --y-move: -3vw; }
.klappe24 { top: 20vw; right: .5vw; --rotate-angle: 45deg; --x-move: 3vw; --y-move: -3vw; }
.klappe25 { bottom: 4vw; right: -1.5vw; --rotate-angle: 25deg; --x-move: 3vw; --y-move: 3vw; }
.klappe10 { bottom: 7vw; right: 3vw; --rotate-angle: -15deg; --x-move: 3vw; --y-move: 3vw; }

.klappe12 { bottom: -2vw; right: -2vw; --rotate-angle: -10deg; --x-move: 3vw; --y-move: 3vw; }
.klappe13 { bottom: -2vw; right: 12vw; --rotate-angle: -40deg; --x-move: 3vw; --y-move: 3vw; }
.klappe14 { bottom: -2vw; right: 20vw; --rotate-angle: 35deg;  --x-move: 3vw; --y-move: 3vw; }
.klappe26 { bottom: -1vw; right: 30vw; --rotate-angle: 25deg; --x-move: 3vw; --y-move: 3vw; }
.klappe15 { bottom: -1vw; left: 30vw; --rotate-angle: 10deg; --x-move: 3vw; --y-move: 3vw; }
.klappe16 { bottom: -2vw; left: 18vw; --rotate-angle: 15deg; --x-move: 3vw; --y-move: 3vw; }
.klappe17 { bottom: -1vw; left: 10vw; --rotate-angle: 20deg; --x-move: 3vw; --y-move: 3vw; }

/*Ecke und Linie links*/
.klappe18 { bottom: 0vw; left: -0.5vw; --rotate-angle: -15deg; --x-move: -2vw; --y-move: 3vw; }
.klappe19 { bottom: 6vw; left: -3vw; --rotate-angle: -5deg; --x-move: -2vw; --y-move: -2vw; }
.klappe20 { bottom: 7vw; left: 5.5vw; --rotate-angle: 60deg; --x-move: -2vw; --y-move: 2vw; }
.klappe21 { top: 17vw; left: -4vw; --rotate-angle: 40deg; --x-move: -2vw; --y-move: -2vw; }
.klappe22 { top: 12vw; left: 1.5vw; --rotate-angle: -35deg; --x-move: -2vw; --y-move: -2vw; }
.klappe23 { top: 5vw; left: 0vw; --rotate-angle: -5deg; --x-move: -2vw; --y-move: -2vw; }

/* ======= END GANADITO Site ========= */




/* ========== Moving-Mail Animation ========= */

/* Call to Action vor Mail */

.mail-ad-text {
  margin-top: 14vw;
  padding: 10vw 4vw 4vw 4vw;
  border-radius: 1.5rem 1.5rem 0rem 0rem;
  background: var(--color-footer-bg);
}

.mail-ad-text-inner {
  display: flex;
  flex-direction: row;
  align-items: flex-end; /* damit Textblöcke am unteren Rand ausgerichtet werden */
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1vw;
}

.mail-ad-text-content {
  flex: 1;
  min-width: 250px;
}

.textwork-big {
  font-family: var(--font-geist-semibold);
  font-size: clamp(0.8rem, 2.5vw, 1.3rem);
  letter-spacing: 0.03rem;
  line-height: 2.4; 
}

.textwork {
  color: var(--color-footer-text);
  font-family: var(--font-geist-light);
  font-size: clamp(0.8rem, 2.5vw, 0.9rem);
  letter-spacing: normal;
  
}

.download-cv {
  align-self: flex-end;
}

.cv-link {
  display: flex;
  align-items: flex-end; /* vertikal unten zentriert */
  gap: 0.5rem;
  text-decoration: none;
  font-family: var(--font-geist-light);
  color: var(--color-footer-text);
  font-size: clamp(0.8rem, 2vw, 0.9rem);
  transition: color 0.3s ease;
}

/* .cv-link:hover {
  font-family: var(--font-geist-semibold);
} */

.cv-icon {
  transform: rotate(-90deg); /* Dreht |← vertikal */
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  /* margin-bottom: -0.1em; leicht nach unten versetzt */
}



/* Start Banner Email */
.tag-list {
  margin: 0;
  padding-inline: 0;
  list-style: none;
}

.movingmail {
  font-family: var(--font-unique-bold);
  letter-spacing: +3rem;
  width: 100%;
  /* background: var(--color-secondary); dunkles lila #593F62    */
  box-sizing: border-box;
  border-top: 1.4px solid var(--color-primary); 
  overflow: hidden;
}


.mail-click-area {
    position: absolute;
    inset: 0;
    z-index: 6;
    cursor: pointer;
}

.movingmail_inner {
  padding-block: 1rem; 
  display: flex;
  flex-wrap: wrap;
 }

.tag-list li {
  color: var(--color-primary);
  font-size: 6rem;
  line-height: 6rem;
  margin-right: 4rem;
  margin-top: 1rem;
  letter-spacing: +0.4rem;
  text-transform: none;
}

 
.movingmail[data-animated="true"] {
  overflow-wrap: hidden;
 /*
  -webkit-mask: linear-gradient(
      transparent,
      white 20%,
      white 80%,
      transparent
   );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%);
*/
}

.movingmail[data-animated="true"] .movingmail_inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: 
      scroll var(--_animation-duration, 50s) 
      var(--_animation-direction, forwards) linear infinite;
}

.movingmail[data-direction="right"] {
  --_animation-direction: reverse;
}

.movingmail[data-direction="left"] {
  --_animation-direction: forwards;
}

.movingmail[data-speed="fast"] {
  --_animation-duration: 20s;
}

.movingmail[data-speed="middle"] {
  --_animation-duration: 70s;
}

.movingmail[data-speed="slow"] {
  --_animation-duration: 120s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 1rem));
  }
}
 /* End Moving Banner */

/* --------------- footer ------- */
 footer {
  position: relative;
  z-index: 80;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4vw;
  /* height: 75px; */
  display: flex;  /* Der Container muss display: flex haben*/
  justify-content: space-between; /* Verteilung der Elemente mit Abstand */
  align-items: center;  /* Vertikale Ausrichtung der Elemente */
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 4vw;
  padding-right: 4vw;
  background: var(--color-footer-bg);
  /* background-color: var(--color-footer-bg); #009640 grün #7B6D8D lila Hintergrundfarbe des Footers */
  font-size: 0.9rem;
  font-family: var(--font-geist-regular);
  color: var(--color-footer-text); /* #c98bb9 */
  border-top: 1.4px solid var(--color-primary); 
}

footer .date{
  flex: 1.1; /* Elemente teilen den Platz mit Wert 4, nimmt es viermal so wie Platz ein wie die anderen */
  text-align: left;
  /* margin-left: 3vw;  Text links ausrichten mit Abstand */
  font-size: 0.7rem;
  letter-spacing: 0.03rem;
}

footer .nice-day {
  flex: 1.5; /* Jedes div nimmt gleich viel Platz ein */
  text-align: left;
  text-wrap: nowrap;
  font-size: 0.7rem;
  letter-spacing: 0.03rem;
}

footer .datenschutz{
  flex: 1.5; 
  text-align: right;
  text-wrap: nowrap;
  font-size: 0.7rem;
  letter-spacing: 0.03rem;
}

footer .impressum{
  flex: 0.4; /* Elemente teilen den Platz mit Wert 4, nimmt es viermal so wie Platz ein wie die anderen */
  text-align: right;
  text-wrap: nowrap;
  font-size: 0.7rem;
  letter-spacing: 0.03rem;
}


/* Titel Verlinkung von main-title */
.title-link.footer {
  font-family: var(--font-geist-regular);
}

.title-link.footer:hover {
  font-family: var(--font-geist-semibold);
}