/* ------------------------------------ Variables ------------------------------------ */
:root {
  --columns: 24;
  --gutter: 20px;
  --page-padding-top: clamp(10px, 1.25vw, 20px);
  --page-padding-bottom: clamp(10px, 2.5vw, 20px);
  --page-padding-horizontal: clamp(8px, 2.5vw, 40px); 
  --bg: #000;
  --fg: #fff;
  --muted: #bdbdbd;
  --text-size: 0.95rem; 
  --line-height: 1.25;
}

/* --------------------------------------- Fonts --------------------------------------- */

@font-face {
  font-family: "HelveticaNeue";
  src: url("../fonts/HelveticaNeue-Roman.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "HelveticaNeue";
  src: url("../fonts/HelveticaNeue-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  }

/* ------------------- Reset (setzt Browser-Standard-Styles zurück) ------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "HelveticaNeue", system-ui, -apple-system, "HelveticaNeue", 'HelvticaNeue', Arial, Helvetica, sans-serif, serif;
  line-height: var(--line-height);
  font-size: 16px;
}

body { min-height: 100vh; }

/* -------------------------------------- Container -------------------------------------- */
.container {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: var(--gutter);
  width: 100%;
  padding: var(--page-padding-top) var(--page-padding-horizontal) var(--page-padding-bottom);
  align-items: start;
}

/* ---------------------------------------- Header ---------------------------------------- */
.site-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  column-gap: 0;
  row-gap: 0.75rem;
  position: sticky;
  top: 20px;
  z-index: 100;
  background: transparent;
}

.site-title {
  grid-column: 1 / 5;
  margin: 0;
  font-size: var(--text-size);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.site-bio {
  grid-column: 5 / 18;
  margin: 0;
  font-size: var(--text-size);
  max-width: 65ch;
  overflow-wrap: anywhere;
}

.site-contact {
  grid-column: 21 / 25;
  justify-self: start;
  align-self: start;
  display: inline-block;
  width: 100%;
  text-decoration: none;
  color: var(--fg);
  font-size: var(--text-size);
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: 100%;
  min-width: 0;
}
.site-contact:hover { color: var(--muted); }

/* -------------------------------------- Projekte ---------------------------------------- */
.project {
  grid-column: 1 / -1;
  /* display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: var(--gutter); */
  display: flex;
  gap: var(--gutter);
  width: 100%;
  padding: var(--page-padding-top) 0 var(--page-padding-bottom);
  align-items: start;
  flex-flow: row wrap;
}

/* -------- Abstand Projekt 1 zu Header -------- */
.project:first-of-type {
  margin-top: clamp(120px, 40vw, 380px);
}

/* -------- Abstand zwischen Projekten --------  */
.project + .project {
  margin-top: clamp(2rem, 5vw, 4rem);
}

.project-meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  column-gap: 0;
  row-gap: var(--gutter);
  align-items: start;
  width: 100%;
}

.projectnr         { grid-column: 1 / 3; font-size: var(--text-size); }
.measurement       { white-space: nowrap; text-align: left; display: block; font-size: var(--text-size); }
.projectdescription{ grid-column: 5 / 18; font-size: var(--text-size); }
.projecttitle      { font-family: "HelveticaNeue", system-ui, -apple-system, "HelveticaNeue", 'HelveticaNeue', Arial, Helvetica, sans-serif, serif;
                     font-style: italic;
                     font-weight: normal;
                    font-size: var(--text-size);}
.projectcopy       { font-size: var(--text-size); }
.projectdate       { 
    display: inline-block;
    width: 100%;
    grid-column: 21 / 25; justify-self: start; align-self: start; font-size: var(--text-size); 
}

/* ---------------  Bildraster ---------------  */
.project-images {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: var(--gutter);
}

.project-images img {
  width: 100%;
  height: auto;
  display: block;
  grid-column: span 4;
}
.lightbox-item { cursor: pointer; }

.project-images.images-6 img { grid-column: span 4; } /* 6 pro Reihe */
.project-images.images-3 img { grid-column: span 8; } /* 3 pro Reihe */

/* --------------------------------------- Footer ----------------------------------------- */
.site-footer {
  grid-column: 1 / -1;
  padding-top: 2rem;
  padding-bottom: 0;
  text-align: left;
}

/* ----------------------------------- Lightbox Overlay ----------------------------------- */
#lightbox[hidden] {
  display: none;
}
#lightbox.hidden { 
  pointer-events: none;
  opacity: 0;
}

#lightbox {
  position: fixed;
  inset: 0;
  background: rgb(0, 0, 0);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  z-index: 1000;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  padding: var(--page-padding-top) var(--page-padding-horizontal) var(--page-padding-bottom);
  box-sizing: border-box;
  transition: opacity 200ms 50ms ease-in;
}

#lightbox .swiper {
    grid-column: 1/-1;
    grid-row: 2;
    width: 100%;
    height: 100%;
    position: relative;
}

#lightbox .swiper img {
    width: 100vw;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
#lightbox .swiper .swiper-lazy-preloader {
  display: none;
}
#lightbox .swiper .swiper-button-prev {
  position: absolute;
  width: 50vw;
  height: 100vh;
  left: 0;
  top: 0;
}
#lightbox .swiper .swiper-button-next {
    position: absolute;
    width: 50vw;
    height: 100vh;
    left: 50vw;
    top: 0;
}

#lightbox .swiper .swiper-button-disabled {
    pointer-events: all !important;
}

.lb-figure {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  max-width: 90vw;
  max-height: 85vh;
  display: grid;
  align-items: center;
  justify-items: center;
  position: relative;
}
.lb-image {
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  display: block;
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}
.lb-image-next {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  pointer-events: none;
}
.lb-back {
  position: fixed;
  bottom: var(--page-padding-top);
  left: var(--page-padding-horizontal);
  z-index: 1000;

  background: transparent;
  color: var(--fg);
  border: 0;
  font-family: "HelveticeNeue", system-ui, -apple-system, "HelveticaNeue", 'HelveticaNeue', Arial, Helvetica, sans-serif, serif;
  font-size: var(--text-size);
  line-height: var(--line-height);
  cursor: pointer;
  padding: 0 0 0px 40px;
  transition: color 0.2s ease;

}
.lb-back:hover { color: var(--muted); }

/* ----------------------------------- Swiper Pagination (Site Counter) ----------------------------------- */
#lightbox .swiper-pagination {
  position: fixed;
  bottom: var(--page-padding-top);
  left: var(--page-padding-horizontal);
  z-index: 1000;

  background: transparent;
  color: var(--fg);
  border: 0;
  font-size: var(--text-size);
  line-height: var(--line-height);
  cursor: pointer;
  padding: 0 0 0px 40px;
  transition: color 0.2s ease;
}

#lightbox .swiper-pagination-fraction {
  color: var(--fg);
  font-size: var(--text-size);
  font-family: "HelveticaNeue", system-ui, "HelveticaNeue", 'HelveticaNeue', Arial, Helvetica, sans-serif, serif;
  background: rgba(0, 0, 0, 0);
  padding: 0 16px;
  border-radius: 10px;
}

#lightbox .swiper-pagination-current {
  color: var(--fg);
}


/* -------------------------------------- Responsive -------------------------------------- */

/* Tablet (<1024px) */
@media (max-width: 1024px) {
  :root { --gutter: 16px; }

  .site-title   { grid-column: 1 / 5; }
  .site-bio     { grid-column: 5 / 19; }
  .site-contact { grid-column: 20 / 25; justify-self: end; }

  .projectnr          { grid-column: 1 / 4; }
  .projectdescription { grid-column: 5 / 20; }
  .projectdate        { grid-column: 20 / 25; justify-self: end; }
}


/* Mobile (<600px) */
@media (max-width: 600px) {
  :root { --gutter: 12px; --text-size: 0.9rem; --line-height: 1.2; }
  
  /* Adjust first project spacing for mobile */
  .project:first-of-type {
    margin-top: clamp(80px, 12vw, 140px);
  }
  

  .site-header {
    grid-template-columns: 1fr auto;
    gap: 12px;
  }
  .site-title {
    grid-column: 1/2;
  }
  .site-contact { grid-column: 2; grid-row: 1; justify-self: end; }
  .site-bio     { grid-column: 1 / -1; grid-row: 2; margin-top: .25rem; }

  .project { grid-template-columns: repeat(6, 1fr); gap: 16px; }

  .project-meta { 
    width: 100%;
    gap: var(--gutter);
    display: flex; 
    flex-flow: row nowrap;
   }

  .projectnr    { grid-column: 1 / 2 !important; grid-row: 1 !important; }
  .projectdescription {
    flex-grow: 1;
  }
  .projecttitle { grid-column: 2 / 5 !important; grid-row: 1 !important; }
  .projectdate  { 
    grid-column: 6 / 7 !important; 
    grid-row: 1 !important; 
    justify-self: end !important; 
    text-align: right !important; 
    width: auto;
  }
  .projectcopy  { 
    grid-column: 1 / -1 !important; 
    grid-row: 2 !important; 
    overflow-wrap: anywhere !important; 
  }
  
  /* Hide measurements in mobile */
  .measurement { display: none !important; }

  .project-images { grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .project-images img,
  .project-images.images-3 img,
  .project-images.images-6 img { grid-column: span 3; }
}

/* Mobile klein (<480px) */
@media (max-width: 480px) {
  :root { --gutter: 8px; --text-size: 0.88rem; --line-height: 1.18; }
  
  /* Adjust first project spacing for small mobile */
  .project:first-of-type {
    margin-top: clamp(60px, 10vw, 100px);
  }

  .project { grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .project-images { grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .project-images img,
  .project-images.images-3 img,
  .project-images.images-6 img { grid-column: span 3; }

  .projectnr    { grid-column: 1 / 2 !important; grid-row: 1 !important; }
  .projecttitle { grid-column: 2 / 5 !important; grid-row: 1 !important; }
  .projectdate  { 
    grid-column: 6 / 7 !important; 
    grid-row: 1 !important; 
    justify-self: end !important; 
    text-align: right !important; 
  }
  .projectcopy  { 
    grid-column: 1 / -1 !important; 
    grid-row: 2 !important; 
    max-width: 65ch !important; 
    overflow-wrap: anywhere !important; 
  }
  
  /* Hide measurements in mobile */
  .measurement { display: none !important; }
}