/* Basis */
*,
*::before,
*::after { box-sizing: border-box; }

:root {
  --gap: 0.5rem;           /* Abstand zwischen Kacheln */
  --page-pad: 1.25rem;     /* Seitenrand auf kleinen Screens */
}

body {
  margin: 0;
  background: #f7ddb0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Seite */
#gallery {
  padding: var(--page-pad);
}

/* Masonry-Layout über CSS Columns – wie im Screenshot mit viel Weißraum */
.gallery-grid {
  column-count: 3;           /* Desktop */
  column-gap: var(--gap);
  max-width: 1400px;
  margin: 0 auto;
}

/* Einzelne Kachel */
.tile {
  break-inside: avoid;
  margin: 0 0 var(--gap);
  position: relative;
  transform: translateZ(0); /* bessere Performance */
}

.tile img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
  will-change: transform;
}

/* Dezentes Hover-Feedback */
.tile a:hover img,
.tile a:focus img {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  opacity: .98;
}

/* LIGHTBOX (CSS-only via :target) */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  z-index: 9999;
}

.lightbox:target {
  display: flex;
}

.lightbox .backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(2px);
}

/* Großes Bild */
.lightbox img {
  position: relative;
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 6px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

/* --- Responsive Breakpoints --- */

/* Smartphones */
@media screen and (max-width: 578px) {
  :root {
    --gap: 0rem;
    --page-pad: 0.rem;
  }

  .gallery-grid {
    column-count: 1;         /* eine Spalte */
  }

  .tile img {
    border-radius: 3px;
  }

  .lightbox img {
    max-width: 96vw;
    max-height: 86vh;
  }
}

/* Tablets / mittlere Screens */
@media screen and (min-width: 579px) and (max-width: 1070px) {
  :root {
    --gap: 0.5rem;
    --page-pad: 0.5rem;
  }

  .gallery-grid {
    column-count: 2;         /* zwei Spalten */
  }

  .lightbox img {
    max-width: 94vw;
    max-height: 90vh;
  }
}

/* Javascript Zusatz */

/* Standard: sichtbar */
.lightbox {
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* Fade-Out Zustand */
.lightbox.fade-out {
  opacity: 0;
}