:root{
  --bg:#07070a;
  --text:#fff;
  --muted:rgba(255,255,255,.86);

  /* Grid-Parameter (werden per JS gesetzt) */
  --cols: 8;
  --tile: 140px;
  --gap: 10px;
  --pad: 10px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
  overflow-y:auto; /* vertikal scroll erlaubt */
}

a{color:inherit}

/* Collage (scrollt normal) */
.collage{
  width:100%;
  min-height:100vh;
}

.collage-grid{
  width:100%;
  min-height:100vh;           /* wichtig: mind. Viewport-Höhe */
  display:grid;

  padding: var(--pad);
  gap: var(--gap);

  /* JS setzt cols & tile so, dass Breite ohne “Randverlust” aufgeht */
  grid-template-columns: repeat(var(--cols), var(--tile));
  grid-auto-rows: var(--tile);

  justify-content: start;      /* Breite wird ohnehin exakt gefüllt */
  align-content: start;
}

/* Quadratische Tiles */
.tile{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:0;
  margin:0;
  background: rgba(255,255,255,.02);
  overflow:hidden;
  border-radius:0;
  cursor:pointer;
}

.tile img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform: scale(1.03);
  transition: transform .35s ease;
}
.tile:hover img{ transform: scale(1.10); }

/* Vignette: Mitte dunkler, außen transparenter */
.vignette{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:5;
  background:
    radial-gradient(720px 520px at 50% 50%,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.44) 35%,
      rgba(0,0,0,.14) 60%,
      rgba(0,0,0,0) 80%);
}

/* Headline/Mail fixed mittig, keine Box */
.center-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 0 14px;
  pointer-events:none;
  z-index:6;
}

.center-content{ pointer-events:auto; }

.mail{
  display:inline-block;
  text-decoration:none;
  color: var(--muted);
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing:.2px;
  margin-bottom: 10px;
  text-shadow: 0 18px 70px rgba(0,0,0,.85), 0 4px 18px rgba(0,0,0,.65);
}
.mail:hover{color: var(--text);}

.headline{
  margin:0;
  font-weight:900;
  letter-spacing:.2px;
  line-height:1.02;
  font-size: clamp(38px, 6.2vw, 86px);
  text-shadow: 0 18px 70px rgba(0,0,0,.88), 0 4px 18px rgba(0,0,0,.70);
}

.subinfo{
  max-width: 60ch;
  margin: 12px auto 0;
  color: var(--muted);
  font-size: clamp(12px, 1.2vw, 15px);
  line-height:1.4;
  letter-spacing:.2px;
  text-shadow: 0 18px 70px rgba(0,0,0,.85), 0 4px 18px rgba(0,0,0,.65);
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background: rgba(0,0,0,.88);
  z-index:50;
}
.lightbox.open{display:flex;}

.lb-img{
  max-width:min(1600px, 96vw);
  max-height:88vh;
  border-radius:0;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}

.lb-close{
  position:absolute;
  top:12px;
  right:12px;
  width:46px;
  height:46px;
  border-radius:0;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(18,18,26,.70);
  color:#fff;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}

/* Responsive Default-Werte (JS rechnet trotzdem exakt) */
@media (max-width: 980px){
  :root{ --gap: 8px; --pad: 8px; }
}
@media (max-width: 520px){
  :root{ --gap: 7px; --pad: 7px; }
}