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


/* ===== Kollektion – Sticky Galerie ===== */

.gallery-sticky.kollektion-group {
  position: relative;
  margin-bottom: 80px;
  height: auto
}

.kollektion-group .sticky-canvas {
  position: static; /* Kein Sticky, da alle untereinander */
  height: auto;
  display: block;
}

.kollektion-group .piece {
  position: relative;
  display: block;
  max-width: none;
  width: min(86vw, 720px);
  width: 90vw;
  top: 10vw;
  margin: -5vh auto;
  transform: rotate(var(--rot));
  opacity: 1;
}

/* Einfache Rotationen */
.kollektion-group .piece.kol1  { --rot: -4deg; }
.kollektion-group .piece.kol2  { --rot: 5deg; }
.kollektion-group .piece.kol3  { --rot: -2deg; }
.kollektion-group .piece.kol4  { --rot: 3deg; }
.kollektion-group .piece.kol5  { --rot: -6deg; }
.kollektion-group .piece.kol6  { --rot: 2deg; }
.kollektion-group .piece.kol7  { --rot: -5deg; }
.kollektion-group .piece.kol8  { --rot: 4deg; }
.kollektion-group .piece.kol9  { --rot: -3deg; }
.kollektion-group .piece.kol10 { --rot: 6deg; }
.kollektion-group .piece.kol11 { --rot: -4deg; }
.kollektion-group .piece.kol12 { --rot: 5deg; }
.kollektion-group .piece.kol13 { --rot: -2deg; }
.kollektion-group .piece.kol14 { --rot: 3deg; }
.kollektion-group .piece.kol15 { --rot: -6deg; }
.kollektion-group .piece.kol16 { --rot: 2deg; }
.kollektion-group .piece.kol17 { --rot: -5deg; }
.kollektion-group .piece.kol18 { --rot: 4deg; }
.kollektion-group .piece.kol19 { --rot: -3deg; }
.kollektion-group .piece.kol20 { --rot: 6deg; }
.kollektion-group .piece.kol21 { --rot: -4deg; }
.kollektion-group .piece.kol22 { --rot: 5deg; }
.kollektion-group .piece.kol23 { --rot: -2deg; }
.kollektion-group .piece.kol24 { --rot: 3deg; }
.kollektion-group .piece.kol25 { --rot: -6deg; }
.kollektion-group .piece.kol26 { --rot: 2deg; }

/* ===== Mobile / kleinere Ansichten – Abstand sicherstellen ===== */
@media (max-width: 980px) {
  .kollektion-group .piece {
    width: min(86vw, 720px);
    margin: 10vh auto;  /* statt -10vh, positiver Abstand */
    left: auto;
    right: auto;
    top: auto;
  }
}

@media (min-width: 1400px) {
  .kollektion-group .piece {
    position: relative;
    left: 45%;
    margin: 0vh auto;
    transform: translateX(-50%) rotate(var(--rot));
    top: auto;
  }
}