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

/* =========================
   OAKW – Collage (Desktop sticky, Mobile stacked)
   ========================= */

/* ===== Inhalt unter dem Hero ===== */

.project-content[data-project="ohneangstkeinwille"] .oakw-gallery .sticky-canvas{
  position: relative;
  margin-bottom: 80px;
  height: auto;               /* genug Platz für alle Bilder */

}

/* Grundlook + Rotations-Variable */
.project-content[data-project="ohneangstkeinwille"] .oakw-gallery .piece{
  position: absolute;
  display: block;
  max-width: none;
  transform: rotate(var(--rot)) !important;
  --rot: 0deg;
}


/* Rotationen (gelten für Desktop und Mobile) */
.project-content[data-project="ohneangstkeinwille"] 
.oakw-gallery .ok1{ --rot:-6deg; }

.project-content[data-project="ohneangstkeinwille"] 
.oakw-gallery .ok2{ --rot: 3deg; }

.project-content[data-project="ohneangstkeinwille"] 
.oakw-gallery .ok3{ --rot:-4deg; }

.project-content[data-project="ohneangstkeinwille"] 
.oakw-gallery .ok4{ --rot: 4deg; }

.project-content[data-project="ohneangstkeinwille"] 
.oakw-gallery .ok5{ --rot:-4deg; }

.project-content[data-project="ohneangstkeinwille"] 
.oakw-gallery .ok6{ --rot: 4deg; }

.project-content[data-project="ohneangstkeinwille"] 
.oakw-gallery .ok7{ --rot:-6deg; }

.project-content[data-project="ohneangstkeinwille"] 
.oakw-gallery .ok8{ --rot: 8deg; }

.project-content[data-project="ohneangstkeinwille"] 
.oakw-gallery .ok9{ --rot:-6deg; }

/* Desktop-Layout: nur Größe/Position */
@media (min-width:981px){
  .project-content[data-project="ohneangstkeinwille"] 
  .oakw-gallery .ok1{ width:80vw; left: 5vw; top: 6vw;  z-index:1; }

  .project-content[data-project="ohneangstkeinwille"] 
  .oakw-gallery .ok2{ width:80vw; right:10vw; top: 65vw;  z-index:2; }

  .project-content[data-project="ohneangstkeinwille"] 
  .oakw-gallery .ok3{ width:80vw; left: 5vw; top:120vw;  z-index:3; }

  .project-content[data-project="ohneangstkeinwille"] 
  .oakw-gallery .ok4{ width:80vw; right:10vw; top:178vw;  z-index:4; }

  .project-content[data-project="ohneangstkeinwille"] 
  .oakw-gallery .ok5{ width:80vw; left: 5vw; top:235vw;  z-index:5; }

  .project-content[data-project="ohneangstkeinwille"] 
  .oakw-gallery .ok6{ width:80vw; right:10vw; top:293vw;  z-index:6; }

  .project-content[data-project="ohneangstkeinwille"] 
  .oakw-gallery .ok7{ width:80vw; left: 5vw; top:350vw;  z-index:6; }

  .project-content[data-project="ohneangstkeinwille"] 
  .oakw-gallery .ok8{ width:80vw; right:10vw; top:410vw;  z-index:7; }

  .project-content[data-project="ohneangstkeinwille"] 
  .oakw-gallery .ok9{ width:80vw; left: 5vw; top:470vw;  z-index:8; }

}

/* Mobile/Tablet: untereinander, Rotation bleibt dank Regel oben */
@media (max-width: 980px){
  .project-content[data-project="ohneangstkeinwille"] .oakw-gallery .sticky-canvas{
    position: static;
    height: auto;
    display: block;        /* oder flex; egal – wichtig ist das Stück selbst */
    overflow: visible;     /* keine abgeschnittenen Ecken */
  }
  .project-content[data-project="ohneangstkeinwille"] .oakw-gallery .piece{
    position: relative;
    left: 5%;                      /* Mittelpunkt aufs Viewport-Lineal */
    right: auto;
    top: auto;
    transform: translateX(-50%) rotate(var(--rot));  /* …und exakt zentrieren */
    width: min(90vw, 860px);
    margin: 10vh 0;        
}
}