/* ── Fotogalerie Grid ── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 2rem 0;
}

.gallery-grid figure {
  margin: 0;
}

.gallery-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  transition: opacity 0.2s;
}

.gallery-grid img:hover {
  opacity: 0.85;
}

/* ── Lightbox ── */
#lb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 8, 2, 0.92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

#lb-img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border: 3px solid #f5f0e8;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}

#lb-close {
  position: fixed;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: none;
  color: #f5f0e8;
  font-size: 1.75rem;
  cursor: pointer;
  line-height: 1;
  opacity: 0.8;
}

#lb-close:hover { opacity: 1; }

#lb-prev, #lb-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(245, 240, 232, 0.12);
  border: 1px solid rgba(245, 240, 232, 0.3);
  color: #f5f0e8;
  font-size: 1.5rem;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.8;
  transition: opacity 0.2s;
}

#lb-prev:hover, #lb-next:hover { opacity: 1; }
#lb-prev { left: 1rem; }
#lb-next { right: 1rem; }

/* ── Sepia-Farbschema ── */
:root {
  /* Hintergründe & Text (neutral scale) */
  --color-neutral:     245, 240, 232;   /* #f5f0e8 – Seitenhintergrund */
  --color-neutral-50:  242, 237, 228;
  --color-neutral-100: 237, 231, 217;   /* #ede7d9 – Oberflächen */
  --color-neutral-200: 224, 214, 196;
  --color-neutral-300: 201, 191, 170;   /* #c9bfaa – Rahmen */
  --color-neutral-400: 162, 146, 122;
  --color-neutral-500: 107,  87,  68;   /* #6b5744 – gedämpfter Text */
  --color-neutral-600:  82,  65,  50;
  --color-neutral-700:  60,  44,  30;
  --color-neutral-800:  44,  26,  14;   /* #2c1a0e – dunkler Text */
  --color-neutral-900:  30,  16,   6;
  --color-neutral-950:  15,   8,   2;

  /* Akzentfarbe (primary scale) – warmes Braun */
  --color-primary-50:  252, 245, 235;
  --color-primary-100: 248, 232, 210;
  --color-primary-200: 240, 208, 168;
  --color-primary-300: 224, 174, 116;
  --color-primary-400: 196, 130,  64;
  --color-primary-500: 160,  96,  38;
  --color-primary-600: 124,  79,  30;   /* #7c4f1e – Hauptakzent */
  --color-primary-700:  96,  58,  20;
  --color-primary-800:  70,  40,  12;
  --color-primary-900:  48,  26,   6;
  --color-primary-950:  24,  12,   2;
}

/* ── Polaroid-Rahmen ── */
.polaroid {
  background: #fff;
  padding: 10px 10px 42px 10px;
  box-shadow: 3px 5px 18px rgba(44, 26, 14, 0.22);
  transform: rotate(-2.5deg);
  display: inline-block;
  margin-bottom: 0.5rem;
}

.polaroid picture,
.polaroid img {
  display: block;
  border-radius: 0 !important;
  width: 160px;
  height: 160px;
  object-fit: cover;
}

.polaroid-label {
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: #6b5744;
  margin-top: 8px;
  margin-bottom: 0;
  line-height: 1;
}

/* ── Kontaktformular (sebastian.aschmetat.de) ── */
.kontakt-form input,
.kontakt-form textarea {
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid rgb(var(--color-neutral-300));
  padding: 0.5rem 1rem;
  font-size: 1rem;
  background-color: rgb(var(--color-neutral-100));
  color: rgb(var(--color-neutral-900));
}

.kontakt-form input::placeholder,
.kontakt-form textarea::placeholder {
  color: rgb(var(--color-neutral-400));
}

.kontakt-form input:focus,
.kontakt-form textarea:focus {
  outline: 2px solid rgb(var(--color-primary-600));
  outline-offset: 0;
}

.kontakt-form button {
  border-radius: 0.375rem;
  background-color: rgb(var(--color-primary-600));
  color: rgb(var(--color-neutral));
  padding: 0.5rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.kontakt-form button:hover {
  background-color: rgb(var(--color-primary-500));
}