/* Aquanatura Gallery - flexible CSS-grid mosaic, images auto-fit (object-fit) */
/* Scharfe Kanten sind Vorgabe: --radius bleibt steuerbar, Default ist 0. */
.aqua-gallery{
  --cols:4;--gap:16px;--row-h:240px;--radius:0px;--fit:cover;
  --cap-color:#ffffff;--cap-size:19px;
  --desc-color:#e6ece4;--desc-size:13.5px;
  --tile-bg:#1b1b1b;
  --cap-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  grid-auto-rows:var(--row-h);
  gap:var(--gap);
  grid-auto-flow:dense;
}
.aqua-gallery__item{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--tile-bg);grid-column:span var(--cspan,1);grid-row:span var(--rspan,1);box-shadow:none}
.aqua-gallery__link{display:block;width:100%;height:100%;text-decoration:none}
.aqua-gallery__item img{width:100%;height:100%;object-fit:var(--fit);object-position:center;display:block;border-radius:0;box-shadow:none;transition:transform .55s cubic-bezier(.2,.6,.2,1)}
.aqua-gallery--zoom .aqua-gallery__item:hover img{transform:scale(1.07)}

/* ---- Overlay: Titel + Beschreibung ----
   Haus-Glas wie die Johannes-Haas-Karte der Startseite: dunkles Blur-Panel,
   abgerundet (Blur-Boxen sind die Ausnahme von der Scharfe-Kanten-Regel). */
.aqua-gallery__cap-wrap{
  position:absolute;left:14px;right:auto;bottom:14px;max-width:calc(100% - 28px);
  display:flex;flex-direction:column;gap:5px;
  padding:14px 18px 15px;
  box-sizing:border-box;
  border-radius:14px;
  pointer-events:none;
  background:rgba(16,20,16,0.34);
  border:1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 12px 34px rgba(0,0,0,0.20);
  transition:opacity .35s ease;
}
.aqua-gallery__cap{
  display:block;
  margin:0;
  font-family:var(--cap-font);
  color:var(--cap-color);
  font-size:var(--cap-size);
  font-weight:700;
  line-height:1.22;
  letter-spacing:-.015em;
  text-wrap:balance;
  transition:transform .35s cubic-bezier(.2,.6,.2,1);
}
.aqua-gallery__desc{
  display:block;
  margin:0;
  font-family:var(--cap-font);
  color:var(--desc-color);
  font-size:var(--desc-size);
  font-weight:400;
  line-height:1.45;
  letter-spacing:0;
  transition:transform .35s cubic-bezier(.2,.6,.2,1);
}

/* ---- Variante: erst beim Hover einblenden (Titel UND Beschreibung) ---- */
.aqua-gallery--cap-hover .aqua-gallery__cap-wrap{opacity:0}
.aqua-gallery--cap-hover .aqua-gallery__cap,
.aqua-gallery--cap-hover .aqua-gallery__desc{transform:translateY(10px)}
.aqua-gallery--cap-hover .aqua-gallery__item:hover .aqua-gallery__cap-wrap,
.aqua-gallery--cap-hover .aqua-gallery__item:focus-within .aqua-gallery__cap-wrap{opacity:1}
.aqua-gallery--cap-hover .aqua-gallery__item:hover .aqua-gallery__cap,
.aqua-gallery--cap-hover .aqua-gallery__item:hover .aqua-gallery__desc,
.aqua-gallery--cap-hover .aqua-gallery__item:focus-within .aqua-gallery__cap,
.aqua-gallery--cap-hover .aqua-gallery__item:focus-within .aqua-gallery__desc{transform:none}

.aqua-gallery__ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#8a8f86;font-size:14px;border:2px dashed #3a3a3a;box-sizing:border-box}

/* on phones: stack everything into the chosen mobile column count, ignore spans */
@media(max-width:767px){
  .aqua-gallery__item{grid-column:auto;grid-row:auto}
  /* Text darf nicht abgeschnitten werden: kompakter setzen statt kuerzen */
  .aqua-gallery{--cap-size:17px;--desc-size:13px}
  .aqua-gallery__cap-wrap{left:10px;bottom:10px;max-width:calc(100% - 20px);padding:12px 14px 13px;gap:4px}
  /* Auf Touch-Geraeten gibt es kein echtes Hover - Text dauerhaft zeigen */
  .aqua-gallery--cap-hover .aqua-gallery__cap-wrap{opacity:1}
  .aqua-gallery--cap-hover .aqua-gallery__cap,
  .aqua-gallery--cap-hover .aqua-gallery__desc{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .aqua-gallery__item img,
  .aqua-gallery__cap-wrap,
  .aqua-gallery__cap,
  .aqua-gallery__desc{transition:none}
  .aqua-gallery--zoom .aqua-gallery__item:hover img{transform:none}
  .aqua-gallery--cap-hover .aqua-gallery__cap,
  .aqua-gallery--cap-hover .aqua-gallery__desc{transform:none}
}

/* ---- Volle Bildschirmbreite (04.08.2026) ----
   Marcel zum Bildband auf Wasser im Garten: "den koenntest du auf die
   komplette Bildschirmbreite ausstrecken."
   Der Ausbruch laeuft ueber 100vw plus haelftigen Gegen-Abstand. Das ist die
   uebliche Full-Bleed-Formel; ein Rest-Ueberstand durch die Bildlaufleiste
   wird von #smooth-wrapper gekappt, dort steht overflow:hidden. Deshalb
   entsteht dabei kein waagrechtes Scrollen.
   Die Kachelhoehe waechst mit, sonst wirken die Bilder auf voller Breite
   gequetscht. */
.aqua-gallery--bleed{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  /* KEINE Kachelhoehe hier. Der Regler "Kachelhoehe" des Widgets schreibt
     --row-h mit einem viel staerkeren Selektor nach post-<id>.css und wuerde
     jede Angabe an dieser Stelle ueberstimmen (zweimal erlebt). Die Hoehe
     eines randlosen Bandes wird am Widget eingestellt. */
  --gap:clamp(10px,1vw,18px);
  padding-inline:var(--gap);
}


/* 18.08.2026: Die Galerie ist randlos und bringt keinen eigenen Abstand mit.
   Auf /leistungen/pool-und-teich/ endete sie mit 0 px direkt auf dem Widget
   darunter (aqua_wg_pool, padding-top 0) - die Kacheln sassen auf dem
   naechsten Abschnitt. Marcel hat genau das im Screenshot gezeigt.
   Regel bleibt: kein Element klebt an seinem Nachbarn. */
.aqua-gallery{margin-bottom:clamp(40px,4vw,72px)}