@import "_reset.css";
/* —— Base —— */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.5; color:#fff; background:#000;
}
a,button{ color:inherit; text-decoration:none; font:inherit; }

@import "_reset.css";

/* —— Base —— */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.5; color:#fff; background:#000;
}
a,button{ color:inherit; text-decoration:none; font:inherit; }

/* ===== Inhalt unter dem Hero ===== */
.project-content{
  --container: min(1920px, 100vw);
  margin: 50px auto;
  width: var(--container);
  padding: 20px 0;
  color: #fff;
}

/* Info-Grid */
.info-grid{
  --gutter: 24px;
  display:grid;
  grid-template-columns:
    [gutter] var(--gutter)
    [c1] 1fr [c2] 1fr [c3] 1fr [c4] 1fr [c5] 1fr [c6] 1fr [c7-end];
  gap: 24px;
  margin-bottom: 64px;
  font-size:16px;
  padding-right: calc(2vw + env(safe-area-inset-right, 0px));
}
.info-label{ color:#ddd; font-weight:600; margin-bottom:8px; }
.info-value{ color:#fff; }

.info--title   { grid-column: c1 }
.info--category{ grid-column: c2 }
.info--date,
.info--dim     { grid-column: c3 }
.info--desc    { grid-column: c5 / c7; }

.info--desc .info-value{
  text-align: left;
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* ========================
   Metamorphose Galerie Setup
   ======================== */

/* Standard Galerie-Styles */
.gallery-sticky,
.gallery-phase2,
.gallery-phase3,
.gallery-phase4 {
  position: static;
  margin-bottom: 80px;
}

.sticky-canvas {
  position: static;
  height: auto;
  width: 100%;
}

/* Bild-Stil */
.piece {
  position: relative;
  display: block;
  width: min(90vw, 860px);height: auto;
  max-width: 100%;
  margin: -3vh auto;
  transform: rotate(var(--rot));
  opacity: 1;
  --rot: 0deg;
}

/* Rotationen */
.p1 { --rot: -12deg;  margin-top: 15vh; }
.p2 { --rot: 10deg; }
.p3 { --rot: 0deg; }
.p4 { --rot: -7deg; }
.p5 { --rot: 8deg; margin-bottom: 10vh }

.g2p1 { --rot: -5deg; }
.g2p2 { --rot: -5deg; }
.g2p3 { --rot: 5deg; }
.g2p4 { --rot: -6deg; }
.g2p5 { --rot: 6deg; }

.g3p1 { --rot: -5deg; }
.g3p2 { --rot: -5deg; }
.g3p3 { --rot: 5deg; }
.g3p4 { --rot: -6deg; }
.g3p5 { --rot: 6deg; }

.g4p1 { --rot: -5deg; }
.g4p2 { --rot: -5deg; }
.g4p3 { --rot: 5deg; }
.g4p4 { --rot: -6deg; }
.g4p5 { --rot: 6deg; }


.piece.g2p1,
.piece.g2p2,
.piece.g2p3,
.piece.g2p4,
.piece.g2p5{
  width: min(96vw, 1000px); /* Breite anpassen */
}

.g3p1,
.g3p2,
.g3p3,
.g3p4,
.g3p5{
  width: min(96vw, 1000px); /* Breite anpassen */
}

.g4p1,
.g4p2,
.g4p3,
.g4p4,
.g4p5{
  width: min(96vw, 1000px); /* Breite anpassen */
}

/* Responsive */
@media (max-width: 980px) {
  .info-grid{
    grid-template-columns:
      [gutter] var(--gutter)
      [c1] 1fr [c2] 1fr [c3] 1fr [c4] 1fr [c5] 1fr [c6] 1fr [c7-end];
    padding-right: calc(6vw + env(safe-area-inset-right, 0px));
  }
  .info--title   { grid-column: c1 }
  .info--category{ grid-column: c2 }
  .info--dim     { grid-column: c3 }
  .info--desc    { grid-column: c5 / c7; }

  .piece {
    width: min(95vw, 960px);
    margin: 10vh auto;
  }
}

@media (max-width: 980px) {
  .gallery-sticky .piece,
  .gallery-phase2 .piece.g2,
  .gallery-phase3 .piece.g3,
  .gallery-phase4 .piece.g4 {
    margin: 10vh auto; /* <- hier den Abstand einstellen */
  }
}

@media (max-width: 1080px) {
  .info-grid {
    grid-template-columns: [gutter] var(--gutter) [c1] 1fr;
    padding-right: calc(8vw + env(safe-area-inset-right, 0px));
  }
  .info--title,
  .info--category,
  .info--date,
  .info--dim,
  .info--desc { grid-column: c1; }
}

/* === Optional: Scroll-Fix für Rotation === */
#projectView { overflow-x: hidden; }