:root{
  --gap: 12px;
  --colw: 420px; /* wird per JS gesetzt */
  --bg: #0b0c10;
}

*{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--bg);
  overflow-x: hidden;
}

/* Scrollbar verstecken (Kiosk-Look) */
body::-webkit-scrollbar{ width: 0; height: 0; }
body{ scrollbar-width: none; }

/* Masonry Container */
.grid{
  padding: var(--gap);
  position: relative;
  /* initially hidden to avoid left-stacked images before Masonry layout */
  opacity: 0;
  transition: opacity .25s ease;
}

/* Reveal the grid after Masonry layout is ready */
.grid.show{
  opacity: 1;
}

/* Masonry Items: variable Höhe, feste Breite */
.grid-item{
  width: var(--colw) !important;   /* Breite wird von JS passend gesetzt */
  margin-bottom: var(--gap);
  background: rgba(255,255,255,0.06);
  border-radius: 0 !important;     /* ✅ eckig */
  overflow: hidden;                /* optional: verhindert Überläufe */
  min-height: 40px;                /* Platzhalterhöhe, reduziert Layout-Shift */
  will-change: transform, opacity; /* Hint für bessere Performance */
}

/* Ensure images also hint the browser for optimal rendering */
.grid-item img{
  will-change: transform, opacity;
}

/* Keine Beschneidung: Original-Seitenverhältnis */
.grid-item img{
  display: block;
  width: 100% !important;
  height: auto !important;         /* ✅ keine Crop-Höhe */
  border-radius: 0 !important;     /* ✅ eckig (falls img gerundet wurde) */
}