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

html {
    height: 100%;
    font-size: 16px;
}
@font-face {
    font-family: 'NotoSans';
    src: url(font/NotoSansDisplay-VariableFont_wdth,wght.ttf);
}

body {
    background-color: black;
    height: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

li, a {
    font-family: 'NotoSans';
    text-decoration: none;
    font-weight: 200;
    font-size: 18px;
    color: white;
}

header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 2%;
    background-color: black;
    position: fixed;
    z-index: 5;
}

.logo {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto;
    transition: all 0.3s ease 0;
    font-family: 'NotoSans';
    text-decoration: none;
    font-weight: 200;
    font-size: 24px;
    color: white;
    cursor: pointer;
}

.language-switch {
    display: flex;
    gap: 10px;
}

.language-switch a {
    font-family: 'NotoSans';
    font-size: 18px;
    color: #ffffff;
    transition: color 0.3s ease;
}

.language-switch .englishmain {
    font-weight: 500;
}

.language-switch .german {
    font-weight: 200;
}

.language-switch .english {
    font-weight: 200;
}

.language-switch .germanmain {
    font-weight: 500;
}

.language-switch a:hover {
    color: #7DC0FF;
}

.logo:hover {
    color: #7DC0FF;
}

p {
    font-family: 'NotoSans';
    text-decoration: none;
    font-size: 64px;
    color: white;
}

.name {
    display: grid;
    grid-template-rows: 70px;
    grid-template-columns: auto;
    padding-top: 40vh;
    padding-bottom: 20vh;
    justify-content: center;
}

.NachN {
    position: sticky;
    font-size: 64px;
    font-weight: 500;
    transform: translate(0);
    transition: transform 0.3s ease-out;
    }

.VorN {
    font-size: 64px;
    font-weight: 200;
}

.about {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 15%;
    padding-bottom: 5%;
    row-gap: 3%;
    column-gap: 3%;
}

.wanderbild {
    max-width: 100%;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    border-radius: 10px;
}

.beschreibung {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    gap: 5px;
    margin-top: -10px;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.headline {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    color: white;
    font-family: 'NotoSans';
    font-size: 64px;
    font-weight: 200;
}

.aboutTexte {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-content: space-between;
    gap: 16px;
}

.aboutText {
    color: white;
    font-family: 'NotoSans';
    font-weight: 200;
    font-size: 18px;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.icons {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto;
    gap: 24px;
}

.aboutIcon1 {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
    height: 24px;
    width: 24px;
    margin: auto;
    transition: all 1s;
}

.aboutIcon1 :hover {
    transform: scale(1.25);
}

.aboutIcon2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: 24px;
    width: 24px;
    margin: auto;
    transition: all 1s;
}

.aboutIcon2 :hover {
    transform: scale(1.25);
}

.aboutIcon3 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    height: 20px;
    width: 20px;
    margin: auto;
    transition: all 1s;
}

.aboutIcon3 :hover {
    transform: scale(1.25);
}

.aboutIcon4 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    height: 24px;
    width: 24px;
    margin: auto;
    transition: all 1s;
}

.aboutIcon4 :hover {
    transform: scale(1.25);
}

.projekte {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto auto auto;
    grid-auto-rows: minmax(100px, auto);
    grid-auto-flow: row;
    padding: 10%;
    row-gap: 3%;
    column-gap: 3%;
}

.projektimg {
    max-width: 100%;
    filter: saturate(0);
    transition: all 1s ease 0;
    border-radius: 10px;
}

.projektimg:hover {
    filter: saturate(1);
    transform: scale(1.01);
}

/* Projektseiten */

.ProjektBody_waldbrand {
    background-image: url(img/waldbrand_titel.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.ProjektBody_container {
    background-image: url(img/container_titel_4zu3.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.ProjektBody_backwelten {
    background-image: url(img/backwelten_titel.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.ProjektBody_hut {
    background-image: url(img/hut_titel.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.ProjektBody_bitcoin {
    background-image: url(img/bit_titel.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.ProjektBody_kulturinsel {
    background-image: url(img/space_titelbild.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.ProjektBody_experience {
    background-image: url(img/experience_title.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.ProjektBody_lake {
    background-image: url(img/lake5.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.ProjektBody_leitsystem {
    background-image: url(img/leit_titel.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.ProjektBody_sketch {
    padding-top: 10vh;
    z-index: 1;
    width: 100%;
    height: auto;
    color: black;
}

.Sketchbody {
    width: 100%;
    height: auto;
    color: black;
    z-index: 1;
}

.ProjektBG {
    width: 100%;
    height: auto;
    padding-top: 80vh;
    color: black;
    z-index: 1;
}

h1 {
    color: white;
    background-color: black;
    font-family: 'NotoSans';
    font-size: 64px;
    font-weight: 500;
    padding-left: 10%;
    padding-top: 3vh; 
}

.ProjektInhalt {
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 3vh;
    background-color: black;
    columns: 35vw;
    padding-bottom: 14vh;
}

.cv {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    grid-auto-flow: row;
    row-gap: 2vw;
    column-gap: 3%;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.cv2 {
    display: grid;
    grid-template-columns: .5fr 1.5fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 5%;
    padding-bottom: 5%;
    row-gap: 2vw;
    column-gap: 3%;
}

.cv p {
    font-family: 'NotoSans';
    font-weight: 200;
    font-size: 18px;
}

.cv-title {
    padding-left: 15%;
}

.cv-bild {
    max-width: 100%;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    border-radius: 10px;
}

.cv-jahr1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.cv-event1 {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
}

.cv-jahr2 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.cv-event2 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.cv-jahr3 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.cv-event3 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

.cv-jahr4 {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}

.cv-event4 {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
}

.cv-jahr5 {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
}

.cv-event5 {
    grid-column: 2 / 3;
    grid-row: 5 / 6;
}

.cv-jahr6 {
    grid-column: 1 / 2;
    grid-row: 6 / 7;
}

.cv-event6 {
    grid-column: 2 / 3;
    grid-row: 6 / 7;
}

.cv-jahr7 {
    grid-column: 1 / 2;
    grid-row: 7 / 8;
}

.cv-event7 {
    grid-column: 2 / 3;
    grid-row: 7 / 8;
}

.cv-jahr8 {
    grid-column: 1 / 2;
    grid-row: 8 / 9;
}

.cv-event8 {
    grid-column: 2 / 3;
    grid-row: 8 / 9;
}

.cv-jahr9 {
    grid-column: 1 / 2;
    grid-row: 9 / 10;
}

.cv-event9 {
    grid-column: 2 / 3;
    grid-row: 9 / 10;
}

.SkizzenInhalt {
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 3vh;
    background-color: black;
    columns: 20vw;
    padding-bottom: 14vh;
}

.SkizzenText {
    font-family: 'NotoSans';
    font-weight: 200;
    font-size: 18px;
    width: 80vw;
    padding-left: 10%;
}

.ProjektText {
    font-family: 'NotoSans';
    font-weight: 200;
    font-size: 18px;
}

.projektgalerie {
    width: 100%;
    height: auto;
    scale: .8; opacity: 0;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range: 50px 250px;
    border-radius: 25px;
    padding: 3%;
    cursor: pointer;
}

.projektvideo {
    width: 100%;
    height: auto;
    scale: .8; opacity: 0;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range: 50px 250px;
    border-radius: 25px;
    padding: 3%;
    cursor: pointer;
}

.projektgalerie:hover {
    transform: scale(1.01);
  }

@keyframes fade-in {
    to {scale: 1; opacity: 1;}
}

iframe {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* MODAL-Overlay-Grundgerüst */
.modal {
    display: none; /* unsichtbar, bis per JS eingeblendet */
    position: fixed; /* Overlay über gesamte Seite */
    z-index: 9999; /* ganz oben anzeigen */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Scrollen, falls Bild größer als Viewport */
    background-color: rgba(0, 0, 0, 0.9); /* abgedunkelter Hintergrund */
  }
  
  /* Großes Bild im Modal */
  .modal-content {
    display: block;
    margin: auto;
    max-width: 90%; /* maximale Breite des Bildes */
    max-height: 90vh; /* maximale Höhe des Bildes */
    border-radius: 4px;
    padding-top: 10vh;
  }
  
  /* Schließen-Button (X) */
  .close {
    position: absolute;
    top: 30px;
    right: 45px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
  }
  
  /* Navigation-Pfeile links/rechts */
  .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    padding: 5px 10px;
    user-select: none; /* verhindert Textmarkierung beim Klicken */
  }
  
  /* Pfeil-Position links */
  .arrow.left {
    left: 30px;
  }
  
  /* Pfeil-Position rechts */
  .arrow.right {
    right: 30px;
  }

/* =================================
   1) Vollbild-Overlay
   ================================= */
   .introOverlay {
    position: fixed;
    inset: 0;             /* top:0; left:0; right:0; bottom:0 */
    z-index: 9999;        /* ganz oben */
    overflow: hidden; 
  }
  
  /* Linker Vorhang (50% Breite) */
  .leftCurtain {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: black;
    transform: translateX(0);
    transition: transform 2s ease; /* 2s animiert verschieben */
  }
  
  /* Rechter Vorhang */
  .rightCurtain {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: black;
    transform: translateX(0);
    transition: transform 2s ease;
  }
  
  /* =================================
     2) Zentrierter Text
     ================================= */
  .centerText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;           /* Nebeneinander */
    gap: 1rem;               /* Abstand zwischen Marco/Bonsiep */
    justify-content: center; /* falls mehr Elemente */
    align-items: center;
  }

  .centerText .bonsiep {
    font-size: 64px;      /* Textgröße anpassen nach Bedarf */
    color: #fff;
    font-family: 'NotoSans';
    font-weight: 500;
    transition: transform 2s ease; /* Bewegung dauert 2 Sekunden */
  }
  
  .centerText .marco {
    font-size: 64px;      /* Textgröße anpassen nach Bedarf */
    color: #fff;
    font-family: 'NotoSans';
    font-weight: 200;
    transition: transform 2s ease; /* Bewegung dauert 2 Sekunden */
  }

  /* ================================
     3) Klassen, die per JS hinzugefügt werden
     ================================ */
  
  /* Linker Vorhang fährt nach links raus */
  .slideLeftCurtain {
    transform: translateX(-100%);
  }
  
  /* Rechter Vorhang fährt nach rechts raus */
  .slideRightCurtain {
    transform: translateX(100%);
  }
  
  /* "Marco" fährt nach links raus */
  .slideMarco {
    transform: translateX(-600%);
  }
  
  /* "Bonsiep" fährt nach rechts raus */
  .slideBonsiep {
    transform: translateX(600%);
  }
 
  .lottieOne {
    display: flex;
    justify-content: center;
    margin: auto;
    padding-bottom: 3%;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

@media (max-width:1350px) {
    .about {
        padding-top: 15%;
        padding-bottom: 5%;
    }
    .headline {
        font-size: 60px;
    }
}

@media (max-width: 1080px) {

    .projektimg {
        filter: saturate(1);
    }
    .projektimg:hover {
        transform: scale(1);
    }
    .about {
        grid-template-columns: 1fr;
        padding-bottom: 0%;
        padding-top: 10%;
    }
    .wanderbild {
        max-width: 220px;
    }
    .lottieOne {
        padding-bottom: 8%;
      }
    .ProjektText .aboutText {
        font-size: 16px;
    }
    .cv2 {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        row-gap: 8vh;
        column-gap: 5vh;
    }
}

@media (max-width: 780px) {
    .ProjektInhalt {
        columns: auto;
    }
    .projekte {
        grid-template-columns: 1fr;
    }
    .projektgalerie:hover {
        transform: scale(1);
      }
      .lottieOne {
        padding-bottom: 12%;
      }
}

@media (max-width: 600px) {
    .about {
        padding-top: 20%;
        padding-bottom: 5%;
    }
    header {
        padding-left: 4%;
    }

}

@media (max-width: 500px) {
    .about {
        padding-top: 35%;
    }
    .lottieOne {
        padding-bottom: 15%;
      }
}