/* Art of Silly — Redesign
   Basis-Styles, Hover-/Fokus-Zustände und responsive Regeln.
   Farbwelt: Sand #F8F3EB · Dunkelbraun #3B2A1F · Terracotta #A65A3A */

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #F8F3EB;
  color: #3B2A1F;
  font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: #A65A3A; }
a:hover { color: #7E3F25; }
img { display: block; max-width: 100%; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); }
input, select, textarea, button { font: inherit; }
:focus-visible { outline: 2px solid #A65A3A; outline-offset: 3px; }

/* ---------- Skip-Link ---------- */
.skip { position: absolute; left: -9999px; top: 8px; background: #3B2A1F; color: #F8F3EB; padding: 12px 16px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- Hover-Zustände ---------- */
.hv-link:hover { color: #A65A3A; }
.hv-primary:hover { background: #8C4A2E; color: #FFFFFF; }
.hv-outline:hover { border-color: #3B2A1F; color: #3B2A1F; }
.hv-dark:hover { background: #A65A3A; color: #FFFFFF; }
.hv-sand:hover { background: #F3ECE1; color: #2E211A; }
.hv-border:hover { border-color: #A65A3A; }
.hv-lift:hover { transform: translateY(-4px); }

/* ---------- Kopfzeile: Desktop / Mobil ---------- */
.nav-desktop { display: flex; align-items: center; gap: 34px; }
.nav-mobile { display: none; align-items: center; gap: 10px; }
#mobile-menu { display: none; }
#mobile-menu.is-open { display: flex; }
@media (max-width: 979px) {
  .nav-desktop { display: none; }
  .nav-mobile { display: flex; }
}

/* ---------- Galerie (Masonry über CSS-Spalten) ---------- */
.gallery-grid { columns: 3; column-gap: clamp(20px, 3vw, 44px); }
@media (max-width: 999px) { .gallery-grid { columns: 2; } }
@media (max-width: 619px)  { .gallery-grid { columns: 1; } }

/* ---------- Scroll-Reveal ---------- */
[data-reveal].reveal-init { opacity: 0; transform: translateY(20px); transition: opacity 1s ease, transform 1s ease; }
[data-reveal].reveal-in { opacity: 1; transform: none; }

/* ---------- Lightbox ---------- */
#lightbox { display: none; }
#lightbox.is-open { display: flex; }
body.no-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}