@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; }

/* -------------------
   Position & Rotation für „Die Frauen hinter den Hits“
   ------------------- */

.project-content[data-project="diefrauenhinterdenhits"] .grid {
  position: relative;
  margin-bottom: 80px;
}

.project-content[data-project="diefrauenhinterdenhits"] .grid .dfh {
  position: absolute;
  display: block;
  max-width: none;
  filter: -shadow(0 18px 30px rgba(0,0,0,.35));
  transform: rotate(var(--rot)) !important;
  --rot: 0deg;
}

/* Gilt ab 1024px Breite */
@media screen and (min-width:700px) {
  .grid {
    display: flex;
    flex-direction: column; /* wichtig: nicht row */
    align-items: center;
    gap: 2rem;
    margin-bottom: 6rem;
  }

  .grid img {
    width: min(90vw, 1000px);
    height: auto;
    display: block;
  }
}

.project-content[data-project="diefrauenhinterdenhits"] .grid .dfh1 {
  --rot: -6deg;
  width: 80vw;
  left: 5vw;
  top: 6vw;
  z-index: 1;
}
.project-content[data-project="diefrauenhinterdenhits"] .grid .dfh2 {
  --rot: 3deg;
  width: 80vw;
  right: 5vw;
  top: 63vw;
  z-index: 2;
}
.project-content[data-project="diefrauenhinterdenhits"] .grid .dfh3 {
  --rot: -4deg;
  width: 80vw;
  left: 8vw;
  top: 118vw;
  z-index: 3;
}
.project-content[data-project="diefrauenhinterdenhits"] .grid .dfh4 {
  --rot: 4deg;
  width: 80vw;
  right: 5vw;
  top: 175vw;
  z-index: 4;
}
.project-content[data-project="diefrauenhinterdenhits"] .grid .dfh5 {
  --rot: -4deg;
  width: 80vw;
  left: 7vw;
  top: 230vw;
  z-index: 5;
}
.project-content[data-project="diefrauenhinterdenhits"] .grid .dfh6 {
  --rot: 4deg;
  width: 80vw;
  right: 5vw;
  top: 285vw;
  z-index: 6;
}
.project-content[data-project="diefrauenhinterdenhits"] .grid .dfh7 {
  --rot: -6deg;
  width: 80vw;
  left: 8vw;
  top: 340vw;
  z-index: 7;
}
.project-content[data-project="diefrauenhinterdenhits"] .grid .dfh8 {
  --rot: 8deg;
  width: 80vw;
  right: 5vw;
  top: 400vw;
  z-index: 8;
}
.project-content[data-project="diefrauenhinterdenhits"] .grid .dfh9 {
  --rot: -6deg;
  width: 80vw;
  left: 5vw;
  top: 455vw;
  z-index: 9;
}
.project-content[data-project="diefrauenhinterdenhits"] .grid .dfh10 {
  --rot: 3deg;
  width: 80vw;
  right: 5vw;
  top: 510vw;
  z-index: 10;
}
.project-content[data-project="diefrauenhinterdenhits"] .grid .dfh11 {
  --rot: -4deg;
  width: 80vw;
  left: 8vw;
  top: 565vw;
  z-index: 11;
}
.project-content[data-project="diefrauenhinterdenhits"] .grid .dfh12 {
  --rot: 4deg;
  width: 80vw;
  right: 5vw;
  top: 620vw;
  z-index: 12;
}
.project-content[data-project="diefrauenhinterdenhits"] .grid .dfh13 {
  --rot: -4deg;
  width: 80vw;
  left: 7vw;
  top: 675vw;
  z-index: 13;
}

/* Mobile / Tablet — untereinander, zentriert */
@media (max-width: 980px) {
  .project-content[data-project="diefrauenhinterdenhits"] .grid .dfh {
    position: relative;
    left: 5%;
    right: auto;
    top: auto;
    transform: translateX(-50%) rotate(var(--rot));
    width: min(90vw, 860px);
    margin: 10vh 0;
  }
}