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

/* =========================
   Floral Fantasies
   ========================= */

/* === Hero Bilder === */
.project-content[data-project="floralfantasies"] .floral-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12vh;
  margin: 8vh auto;
}

.project-content[data-project="floralfantasies"] .floral-img {
  position: relative;
  width: min(90vw, 860px);
  transform: rotate(var(--rot));
  margin: 0 auto;
}

/* === Skizzen, Renders, Finals: gestapelt === */
.floral-sketches,
.floral-renders,
.floral-final-renders {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12vh;
  margin: 8vh auto;
}

.floral-sketch,
.floral-render,
.floral-final-img {
  width: min(90vw, 860px);
  height: auto;
  transform: rotate(var(--rot));
  transition: transform 0.3s ease;
  margin: 0 auto;
  --rot: 0deg;
}

/* Rotation-Spezifisch */
.floral1 { --rot: -6deg; }
.floral2 { --rot: 4deg; }
.floral3 { --rot: -4deg; }
.floral4 { --rot: 3deg; }
.floral5 { --rot: -5deg; }
.sketch1         { --rot: -4deg; }
.sketch2         { --rot: 2deg; }
.sketch3         { --rot: -3deg; }
.render1         { --rot: -4deg; }
.render2         { --rot: 3deg; }
.render3         { --rot: -2deg; }
.floral-final1   { --rot: -4deg; }
.floral-final2   { --rot: 3deg; }
.floral-final3   { --rot: -2deg; }
.floral-final4  { --rot: 3deg; }


/* === Mobile / Tablet Anpassung === */
@media (max-width: 980px) {
  .project-content[data-project="floralfantasies"] .floral-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12vh;
    margin: 8vh auto;
  }

  @media (max-width: 980px) {
  .project-content[data-project="floralfantasies"] .floral-img.floral1,
  .project-content[data-project="floralfantasies"] .floral-img.floral2,
  .project-content[data-project="floralfantasies"] .floral-img.floral3,
  .project-content[data-project="floralfantasies"] .floral-img.floral4,
  .project-content[data-project="floralfantasies"] .floral-img.floral5 {
    margin: 5vh 0; /* 👈 hier Abstand anpassen */
  }
}

@media (max-width: 980px) {
  .project-content[data-project="floralfantasies"] .floral-img {
    position: relative;
    width: min(90vw, 860px);
    left: 45%;
    transform: translateX(-50%) rotate(var(--rot));
    margin: 10vh 0;
  }

  .floral-sketches,
  .floral-renders,
  .floral-final-renders {
    gap: 6vh;
  }

  .floral-sketch,
  .floral-render,
  .floral-final-img {
    width: 70vw;
  }
}
}