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


/* =========================
   Symbols and Signs (Desktop, Mobile)
   ========================= */

.project-content[data-project="symbolsandsigns"] .symbols-gallery {
  position: relative;
  margin-bottom: 80px;
  height: auto;
}

.project-content[data-project="symbolsandsigns"] .symbols-gallery .piece {
  position: absolute;
  display: block;
  max-width: none;
  transform: rotate(var(--rot)) !important;
  --rot: 0deg;
}

/* Positionen & Rotationen wie OAKW */
.project-content[data-project="symbolsandsigns"] .symbols-gallery .sym1 
{ --rot:-6deg; width:80vw; left: 5vw; top:  6vw;  z-index:1; }

.project-content[data-project="symbolsandsigns"] .symbols-gallery .sym2 
{ --rot: 3deg; width:80vw; right:10vw; top:63vw;  z-index:2; }

.project-content[data-project="symbolsandsigns"] .symbols-gallery .sym3 
{ --rot:-4deg; width:80vw; left: 5vw; top:118vw;  z-index:3; }

.project-content[data-project="symbolsandsigns"] .symbols-gallery .sym4 
{ --rot: 4deg; width:80vw; right:10vw; top:175vw;  z-index:4; }

.project-content[data-project="symbolsandsigns"] .symbols-gallery .sym5 
{ --rot:-4deg; width:80vw; left: 5vw; top:230vw;  z-index:5; }

.project-content[data-project="symbolsandsigns"] .symbols-gallery .sym6 
{ --rot: 4deg; width:80vw; right:10vw; top:285vw;  z-index:6; }

/* Mobile/Tablet */
@media (max-width: 980px) {
  .project-content[data-project="symbolsandsigns"] .symbols-gallery .sticky-canvas {
    position: static;
    height: auto;
  }

  .project-content[data-project="symbolsandsigns"] .symbols-gallery .piece {
  position: relative;
  left: 5%;
  right: auto; 
  top: auto;
  transform: translateX(-50%) rotate(var(--rot));
  width: min(90vw, 860px);
  margin: 10vh 0;
  }
}