/* RESET & VARIABLEN */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #0a0a0a;
  --secondary-color: #ffffff;
  --overlay-color: rgba(0, 0, 0, 0.4);
  --hover-color: #ff69b4;
  --transition: 0.3s ease;
  --cursor-color: #cdb4db;
  --cursor-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='10' fill='%23cdb4db'/%3E%3C/svg%3E") 16 16, auto;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Archivo', sans-serif;
  background: var(--secondary-color);
  color: var(--primary-color);
  text-transform: lowercase;
  letter-spacing: -1.2px;
  cursor: var(--cursor-img);
}

.me-mobile{
  display: none;
}

a{
  text-decoration: none;
}

a:hover{
  color:#ff69b4;
}

/* Cursor */
.custom-cursor-hover, .project-row, .blog-row, .grid-item {
  cursor: var(--cursor-img);
}

/* Hover Effekt */
.text-hover-effect {
  display: inline-block;
  transition: transform var(--transition);
}
.text-hover-effect:hover {
  transform: translateY(-4px) rotate(-2deg);
}


#home{
  background-image: url(img/04-1920.jpg);
}

span.constant-tilt-shake {
  animation: tilt-shaking 2s ease-in infinite;

}

@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}


.arrow-down {
  width: 32px;
  height: 32px;
  border-left: 6px solid currentColor;
  border-bottom: 6px solid currentColor;
  transform: rotate(-45deg);
  margin-top: 5rem;
  margin-right: 5rem;
  animation: arrow-bounce 1.5s infinite;
  cursor: pointer;
  color:#ff69b4;
}

@keyframes arrow-bounce {
  0%, 100% {
    transform: translateY(0) rotate(-45deg);
  }
  50% {
    transform: translateY(8px) rotate(-45deg);
  }
}

/* ====================
   LOADING SCREEN
==================== */

.loader-screen {
  position: fixed;
  inset: 0;
  background: #000;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeOut 1s ease 1 forwards;
  animation-delay: 0.5s;
  z-index: 9999;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.main-content {
  opacity: 0;
  animation: showUp 0.5s ease 1 forwards;
  animation-delay: 1s;
}

@keyframes showUp {
  to {
    opacity: 1;
  }
}

.loader {
  width: 48px;
  height: 48px;
  position: relative;
}
.loader::before , .loader::after{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50% , -50%);
  width: 48em;
  height: 48em;
  background-image:
    radial-gradient(circle 10px, #ff69b4 100%, transparent 0),
    radial-gradient(circle 10px, #ff69b4 100%, transparent 0),
    radial-gradient(circle 10px, #ff69b4 100%, transparent 0),
    radial-gradient(circle 10px, #ff69b4 100%, transparent 0),
    radial-gradient(circle 10px, #ff69b4 100%, transparent 0),
    radial-gradient(circle 10px, #ff69b4 100%, transparent 0),
    radial-gradient(circle 10px, #ff69b4 100%, transparent 0),
    radial-gradient(circle 10px, #ff69b4 100%, transparent 0);
  background-position: 0em -18em, 0em 18em, 18em 0em, -18em 0em,
                       13em -13em, -13em -13em, 13em 13em, -13em 13em;
    background-repeat: no-repeat;
  font-size: 0.5px;
  border-radius: 50%;
  animation: blast 1.5s ease-in ;
}
.loader::after {
  font-size: 1px;
  background: #cdb4db;
  animation: bounce 2s ease-in;
}

@keyframes bounce {
  0% , 100%{ font-size: 0.75px }
  50% { font-size: 1.5px }
}
@keyframes blast {
  0% , 40% {
    font-size: 0.5px;
  }
  70% {
    opacity: 1;
    font-size: 4px;
  }
   100% {
     font-size: 6px;
    opacity: 0;
  }
}


/* ====================
   NAVIGATION – DESKTOP
==================== */
.menu-responsive {
  display: flex;
  justify-content: space-between;
  background: #fff;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  color: black;
}

.menu-responsive-black {
  display: flex;
  justify-content: space-between;
  background: black;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  color: white;
}


.menu-column-01, .menu-column-03 {
  width: 25%;
}
.menu-column-02 {
  width: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
  color: var(--primary-color);
  font-weight: 400;
}

.menu-column-02 a{
  color: var(--primary-color);
}

.menu-column-02 a:hover{
  color:#ff69b4;
}

.menu-column-02-black {
  width: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
  color: white;
  font-weight: 400;
}


.menu-column-02-black a{
  color: white;
}

.menu-column-02-black a:hover{
  color:#ff69b4;
}

.menu-column-03{
  text-align: end;
}


.logo-font-01, .logo-font-02 {
  font-size: 80px;
  font-weight: 600;
  padding: 1%;
  text-transform: uppercase;
  line-height: 0.8;
  color: var(--primary-color);
  text-decoration: none;
}
.logo-font-02 {
  text-align: right;
}

.logo-font-01-black, .logo-font-02-black {
  font-size: 80px;
  font-weight: 600;
  padding: 1%;
  text-transform: uppercase;
  line-height: 0.8;
  color: white;
  text-decoration: none;
}
.logo-font-02-black {
  text-align: right;
}


/* ====================
   NAVIGATION – MOBILE
==================== */
.menu-mobile {
  display: none;
}

.mobile-logo {
  display: flex;
  flex-direction: column;
  font-family: 'Archivo', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--primary-color);
  text-transform: uppercase;
  padding: 2%;
}

.menu-toggle {
  display: none;
}

.menu-btn {
  position: absolute;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.menu-btn span {
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--primary-color);
  transition: var(--transition);
  transform-origin: center;
}

.menu-btn span:nth-child(1) {
  transform: translateY(-4px);
}

.menu-btn span:nth-child(2) {
  transform: translateY(4px);
}

.menu-toggle:checked ~ .menu-btn span:nth-child(1) {
  transform: rotate(45deg);
}

.menu-toggle:checked ~ .menu-btn span:nth-child(2) {
  transform: rotate(-45deg);
}

.menu-overlay {
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background:rgba(205, 180, 219, 0.8);
  backdrop-filter: blur(4px);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-toggle:checked ~ .menu-overlay {
  right: 0;
}

.menu-nav {
  list-style: none;
  text-align: center;
}

.menu-nav li {
  margin: 2rem 0;
}

.menu-nav a {
  color: var(--primary-color);
  text-decoration: none;
  font-size: 2.5rem;
  font-weight: 100;
  letter-spacing: 0.1em;
  line-height: 1.5;
  transition: var(--transition);
}

.menu-nav a:hover {
  opacity: 0.6;
}

/* ====================
   HERO SECTION
==================== */
.hero {
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.video-container, .background-video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

/* ====================
   PROJECTS SECTION
==================== */

.date-project{
  color:#cdb4db;
  font-weight: 100;
  font-size: 1.5rem!important;
}

.project {
  display: flex;
  height: 100vh;
  width: 100%;
}

/* Linke Seite: Textbereich */
.project-info {
  width: 40%;
  background: #000;
  color: white;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.project-info-content {
  margin-top: 4rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.nav-btns {
  display: flex;
  justify-content: space-between;
  font-size: 1.2rem;
}
.nav-blog{
  color:#ff69b4;
  font-weight: 600;

}

.back-btn {
  display: flex;
  justify-content: space-between;
  font-size: 1.2rem;
  width: 50%;
}



.nav {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.project-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  justify-content: start;
  margin-top: 4rem;
}

.project-text h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.project-text p {
  font-size: 1.3rem;
  line-height: 1.6;
}

/* Rechte Seite: Bildbereich */
.project-pictures {
  flex: 1;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  position: relative; /* für den Pfeil */
  padding-right: 4px;
  padding-left: 4px;
}

.pics-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}


.pics-container .two-row {
 display: flex;
 flex-direction: row;
}

.two-row-01, .two-row-02{
  width: 50%;
}
.two-row-01{
  padding-right: 2px;
}

.two-row-02{
  padding-left: 2px;
}

/* Pfeil unten rechts im Bildbereich */
.arrow-down-fixed {
  width: 32px;
  height: 32px;
  border-left: 6px solid currentColor;
  border-bottom: 6px solid currentColor;
  transform: rotate(-45deg);
  animation: arrow-bounce 1.5s infinite;
  cursor: pointer;
  color: #ff69b4;
  position: fixed;
  right: 55%;
  top: 6rem;
  z-index: 10;
}

@keyframes arrow-bounce {
  0%, 100% {
    transform: translateY(0) rotate(-45deg);
  }
  50% {
    transform: translateY(8px) rotate(-45deg);
  }
}


.mobile-project-image{
  display: none;
}





.article-container{
  margin-top: 4rem;
  padding-right: 2rem;
  padding-left: 2rem;
}

.projects-list-section, .blog-list-section {
  padding: 8rem 5vw;
  background: var(--secondary-color);
}

.projects-list-section a{
  font-weight: 100;
}


.section-title {
  font-size: 2rem;
  margin-bottom: 2rem;
  font-weight: 900;
}
.project-row {
  position: relative;
  display: block;
  padding: 2rem 4rem 2rem 7rem;
  font-size: 2rem;
  text-decoration: none;
  color: var(--primary-color);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.project-row:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.project-row::before {
  content: attr(data-year);
  position: absolute;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%) translateX(-20px);
  opacity: 0;
  font-size: 1.2rem;
  transition: var(--transition);
}

.project-row::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20rem;
  width: 400px;
  height: 500px;
  background-image: var(--preview-img);
  background-size: cover;
  background-position: center;
  opacity: 0;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(-50%) translateX(20px);
  transition: var(--transition);
}

.project-row:hover {
  color: var(--hover-color);
}
.project-row:hover::before,
.project-row:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.project-row:hover::before {
  color: #cdb4db; /* Lila-Farbton */
}

.blog-row:hover::before {
  color: #cdb4db; /* Lila-Farbton */
}

/* ====================
   BLOG SECTION
==================== */
.blog-article {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-bottom: 2rem;
}

.blog-image-article {
  width: 50%;
  background: #000;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
}



.blog-info{
  background: white;
  color: black
}


.blog-info-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}

.blog-text{
  font-size: 1.3rem;
  line-height: 1.5;
}

.blog-text h2{
 font-size: 1.5rem;
 margin-top: 3rem;
}

.blog-text p{
 margin-top: 1rem;
}

.colored{
  color:#ff69b4;
}



.overview {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-bottom: 8rem;
}


.blog-overview {
  display: flex;
  width: 100%;
  margin-bottom: 2rem;
  padding-left: 2rem;
}

.blog-entry {
  margin-bottom: 4rem;
}

.blog-entry a{
  font-weight: 100;
}

.blog-row {
  position: relative;
  display: block;
  padding: 2rem 4rem 2rem 7rem;
  font-size: 2rem;
  text-decoration: none;
  color: var(--primary-color);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.blog-row:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.blog-row::before {
  content: attr(data-year);
  position: absolute;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%) translateX(-20px);
  opacity: 0;
  font-size: 1.2rem;
  transition: var(--transition);
}
.blog-row:hover {
  color: var(--hover-color);
}
.blog-row:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.blog-image {
  width: 100%;
  height: 200px;
  margin-top: 1rem;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  transition: transform 0.5s ease;
}
.blog-row:hover + .blog-image {
  transform: scale(1.05);

}


/* ====================
  ABOUT
==================== */
.about-section{
background-color: black;
height: 100vh; /* Volle Höhe des Viewports */

}

.centered-sentence {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  color: white;
  padding-top: 20rem;
  padding-bottom: 8rem;
}

.centered-sentence p {
  font-size: 2.5rem;
  font-weight: 100;
  max-width: 80rem;
}
.large-font{
    text-transform: uppercase;
    font-weight: 600;
    line-height: 0.8;
    font-size: 4rem;
    --preview-img: url(img/me.webp);
}



.preview-image {
  position: relative;
}

.preview-image:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.preview-image::after {
  content: "";
  position: absolute;
  top: 5rem;
  right: -40rem;
  width: 500px;
  height: 400px;
  background-image: var(--preview-img);
  background-size: cover;
  background-position: center;
  opacity: 0;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(-50%) translateX(20px);
  transition: var(--transition);
}

.preview-image:hover {
  color: var(--hover-color);
}
.preview-image:hover::before,
.preview-image:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.preview-image:hover::before {
  color: #cdb4db; /* Lila-Farbton */
}


/* ====================
   PLAYGROUND
==================== */
/*
.grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 16px;
      padding: 6rem 2rem;
    }

    .grid-item {
      position: relative;
      display: block;
      overflow: hidden;
      border-radius: 8px;
    }

    .grid-item img {
      transition: transform 0.5s ease;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 8px;
    }

.grid-item:hover img {
  transform: scale(1.1);
}
    .grid-item.wide {
      grid-column: span 2;
    }

    .grid-item.tall {
      grid-row: span 2;
    }

    .lightbox {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.95);
      justify-content: center;
      align-items: center;
      z-index: 10000;
    }

    .lightbox:target {
      display: flex;
    }

    .lightbox img {
      max-width: 70vw;
      max-height: 95vh;
      border-radius: 8px;
    }

    .lightbox a {
      position: absolute;
      top: 1rem;
      right: 2rem;
      font-size: 4rem;
      color: white;
      text-decoration: none;
    }

    .lightbox a:hover{
      color: #ff69b4;
      transform: rotate(45deg);
       transition: transform 0.5s ease;
    }
*/

/* ====================
   FOOTER
==================== */
.footer-wrapper{
  position: absolute;
  bottom: 0;
  width: 100%;
}

.site-footer {
  background: #000;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 1rem;
  padding-bottom: 3rem;
}

.project-footer {
  background: white;
  color: black;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 1rem;
}



.site-footer h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  font-weight: 900;
}

.project-footer h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  font-weight: 900;
}

.site-footer a {
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
}

.project-footer a {
  color: black;
  text-decoration: none;
  font-size: 1.5rem;
}



.site-footer a:hover {
  color:#ff69b4;
}

.project-footer a:hover {
  color:#ff69b4;
}

.site-footer, .project-footer p {
  font-size: 1.5rem;
  margin: 0.4rem 0;
}
.footer-column-left,
.footer-column-right {
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.footer-column-right {
  text-align: right;
}

.footer-column-right p{
  line-height: 1;
  font-size: 1rem;
}

.project-footer .footer-column-right p{
  line-height: 0.3;
  font-size: 1rem;
}

.project-footer .footer-column-right{
 margin-top: 1rem;
}

/* ====================
   RESPONSIVE
==================== */
@media (max-width: 1400px) {
.project-row::after{
  right: 2rem;
   width: 320px;
  height: 400px;
}
.project-text p{
  font-size: 1.1rem;
}

.preview-image::after{
  right: -20rem;
}
.none{
  display: none;
}

.overview {
  margin-bottom: 6rem;
}

}

@media (max-width: 1200px) {
.menu-column-01, .menu-column-03{
  width: 40%;
  margin-right: 0.5rem;
}

.project-text p{
  font-size: 1rem;
} 


.blog-image-article{
  width: 70%;
}

.back-btn{
  width: 70%;
}

.overview {
  margin-bottom: 4rem;
}


.centered-sentence p{
  font-size: 2rem;
}



}



@media (max-width: 900px) {

.centered-sentence p{
  font-size: 1.5rem;
}
.project-text p{
  font-size: 1.3rem;
} 

.mobile-project-image{
  display: block;
  height:20vh;
  margin-top: 6rem;
  object-fit: cover;
}


.centered-sentence{
  padding-bottom: 1rem;
  padding-top: 10rem;
}

.about-section{
  height: auto;
}

.overview {
  margin-bottom: 1rem;
}

.me-mobile{
  display: block;
  width: 100%;
  padding: 1rem;
  border-radius: 24px;
  padding-bottom: 4rem;
}

.projects-list-section, .blog-list-section{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.back-btn{
  width: 95%;
}


.blog-image-article{
  width: 95%;
  margin-top: 6rem;
}

  .menu-responsive {
    display: none;
  }
  .menu-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    background: white;
    z-index: 1000;
  }
  .project-row, .blog-row {
    padding: 2rem;
    font-size: 1.6rem;
  }
  .project-row::after {
    display: none;
  }

  .project {
    flex-direction: column;
    height: auto;
  }

  .project-info {
    width: 100%;
    height: auto;
    position: relative;
    border-right: none;
    border-bottom: 4px solid white;
    overflow: visible;
  }

  .project-info-content {
    height: auto;
    margin-top: 0;
  }

  .project-text {
    margin-top: 2rem;
  }

  .project-pictures {
    width: 100%;
    height: auto;
    overflow-y: visible;
    display: flex;
    justify-content: center;
  }

.pics-container{
  width: 95%;
}


  .pics-container img {
    height: auto;
  }

  .arrow-down-fixed {
    display: none; 
  }

 .arrow-down{
    display: none;
  }
  .project-footer{
    padding-bottom: 4rem;
  }


  .preview-image::after{
    display: none;
  }

  .project-row::before{
    left: 20rem;
    display: block;
  }

 .blog-row::before{
      left: 20rem;
    display: block;
 }

}

@media (max-width: 768px) {
  .site-footer {
    flex-direction: column;
    gap: 3rem;
  }
  .footer-column-right {
    text-align: left;
  }

  .logo-font-01{
    font-size: 50px;
  }

 .project-info-content {
    height: auto;
    margin-top: 0rem;
  }

}



/* ====================
   FONTS
==================== */

/* archivo-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100;
  src: url('../font/archivo-v24-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300;
  src: url('../font/archivo-v24-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  src: url('../font/archivo-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  src: url('../font/archivo-v24-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* archivo-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  src: url('../font/archivo-v24-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}