/* ============================================================
   Aquanatura Bild-Lightbox
   Klickbare Inhaltsbilder oeffnen formatfuellend in einem dunklen Overlay.
   Galerie-Bilder bilden eine Gruppe (Pfeile + Zaehler), Einzelbilder oeffnen
   ohne Pfeile. Self-contained, kein Fremd-Skript.

   NAMENSKONFLIKT, am 28.07.2026 gefunden und behoben:
   Die VIDEO-Lightbox des Hero-Sliders (aqua-hero2.css) benutzt die Klasse
   `.aqua-lightbox` mit `display:none` bzw. `display:block`. Die Bild-Lightbox
   hiess frueher genauso. Auf jeder Seite mit Hero-Slider (Startseite) hat die
   Hero-Regel das `display:flex` hier ueberschrieben - das Bild sass dann in der
   linken oberen Ecke statt in der Mitte. Deshalb heisst diese hier jetzt
   `.aqua-imglb`. Die beiden Namen NICHT wieder zusammenfuehren.
   ============================================================ */

/* Eigenes Lupen-Icon als Mauszeiger (schwarze Kontur + weiße Lupe mit +,
   sichtbar auf hellen wie dunklen Bildern). Hotspot in der Linsenmitte. */
.aqua-lb-on {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='0.55' stroke-width='4.5' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='9'/%3E%3Cline x1='19.5' y1='19.5' x2='28' y2='28'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='9'/%3E%3Cline x1='19.5' y1='19.5' x2='28' y2='28'/%3E%3Cline x1='13' y1='9.5' x2='13' y2='16.5'/%3E%3Cline x1='9.5' y1='13' x2='16.5' y2='13'/%3E%3C/g%3E%3C/svg%3E") 13 13, zoom-in;
}
/* Ein Klick auf das große Bild schliesst die Lightbox ebenfalls, der Zeiger
   zeigt das mit "zoom-out" an. Wischen zum Blaettern bleibt davon unberuehrt. */
.aqua-imglb__img { cursor: zoom-out; }

/* ------------------------------------------------------------
   Rueckmeldung: dieses Bild kann man gross ansehen
   ------------------------------------------------------------
   Seit dem Umbau am 29.07.2026 sind pro Seite 8 bis 16 Bilder anklickbar
   statt einem. Der Lupen-Zeiger oben ist der einzige Hinweis darauf - und
   den sieht man erst, wenn man schon draufzeigt. Ein leichter Zoom beim
   Darueberfahren sagt es vorher.

   Bewusst KEIN Lupen-Abzeichen im Bild: das waere ein neues sichtbares
   Gestaltungselement, und am Design soll sich nichts aendern.

   1,04 ist absichtlich klein. Es geht um eine Andeutung, nicht um einen
   Effekt; bei 1,08 wirkt jedes Foto wie ein Knopf.

   Die Regel steht ABSICHTLICH niedrig in der Spezifitaet (0,2,1). Bilder,
   die schon einen eigenen Zoom haben - Teamkacheln und Zeitstrahl auf
   Ueber uns, Hero-Teaser, .aqua-imgbox - tragen ihn ueber den Elternteil
   (z.B. .ub__matefig:hover .ub__mateimg) und damit hoeher. Die gewinnen und
   es wird nichts doppelt gezoomt. */
/* ---------------------------------------------------------------------
   Das Zucken beim Ueberfahren (Marcel, 10.08.2026) - zwei Bremsen
   ---------------------------------------------------------------------
   SYMPTOM: Direkt nach dem Neuladen flackert die Lupe im Halbsekundentakt,
   das Bild zoomt dabei raus und wieder rein. Nach etwa fuenf Sekunden ist
   Ruhe.

   GEMESSEN am 10.08.2026 mit echtem Mauszeiger ueber CDP, Maus liegt still
   auf der Bildmitte, 110 Messpunkte im Abstand von 60 ms:
       hover verloren in 106 von 110 Messpunkten
       das Bild sprang dabei von top 221 auf top 613
   Der Zeiger bewegt sich also gar nicht - das BILD wandert unter ihm weg,
   solange sich die Seite noch aufbaut. Jedes Mal reisst :hover ab.

   Warum es so stark auffaellt: Der Zoom verstaerkt sich selbst. Reisst der
   Hover ab, faehrt das Bild ueber 0,6 s zurueck; kommt er wieder, faehrt es
   wieder heraus. Aus einem kurzen Aussetzer wird sichtbares Pumpen.

   BREMSE 1 - Verzoegerung beim Verlassen: Der Hinweg startet sofort, der
   Rueckweg erst nach 0,25 s. Ein Aussetzer, der kuerzer ist, wird komplett
   verschluckt; beim echten Verlassen merkt man die Verzoegerung nicht.

   BREMSE 2 - der Zoom gilt erst, wenn die Seite steht: html.aqua-lb-ruhe
   setzt aqua-lightbox.js, sobald der letzte Einsammel-Durchgang durch ist.
   In der Aufbauphase gibt es also gar keinen Zoom, der zucken koennte. Die
   Lupe bleibt die ganze Zeit sichtbar - anklicken geht immer.

   ⚠️ Das ist eine Daempfung, keine Heilung: Die eigentliche Ursache ist,
   dass sich der Inhalt beim Aufbau noch verschiebt. Dieselbe Wurzel traegt
   das Ankersprung-Problem. Wird die behoben, koennen beide Bremsen weg. */
img.aqua-lb-on {
    transition: transform .6s cubic-bezier(.22, 1, .36, 1) .25s;
}
@media (hover: hover) and (pointer: fine) {
    html.aqua-lb-ruhe img.aqua-lb-on:hover {
        transform: scale(1.04);
        transition-delay: 0s;
        transition-duration: .6s;
    }
}
/* Am Handy gibt es kein Darueberfahren. Dort bleibt es beim Antippen -
   ein Dauer-Zoom oder ein eingeblendetes Abzeichen waere nur Unruhe. */
@media (prefers-reduced-motion: reduce) {
    img.aqua-lb-on { transition: none; }
    img.aqua-lb-on:hover { transform: none; }
}

/* AUSNAHME: Aquanatura-Abschnitt der Startseite (Marcel, 24.08.2026)
   ------------------------------------------------------------------
   "bei dem linken Bild das Hover, da stimmt was nicht, das wird beim Hover
   groesser und rechts das Bild zoomt nur hinein und wird nicht groesser ...
   man soll nur noch die Lightbox oeffnen koennen."

   Beide Bilder bekommen denselben scale(1.04) von oben, aber die Rahmen
   antworten verschieden: .aqua-imgbox hat overflow:hidden, dort bleibt das
   Bild im Rahmen und wirkt wie hineingezoomt. Der Theme-Kasten
   .tp-funfact-big-img hat es nicht, dort waechst das Bild ueber seinen
   Rahmen hinaus und der ganze Kasten sieht groesser aus. Nebeneinander
   gestellt liest sich das wie zwei verschiedene Effekte.

   Statt den einen Rahmen dem anderen anzugleichen ist der Zoom hier ganz
   weg. Die Lupe und der Zeigefinger bleiben, anklicken geht unveraendert.
   Gilt NUR fuer diese Kaesten; auf den uebrigen Seiten bleibt der Zoom.

   html.aqua-lb-ruhe steht bewusst davor: die Regel weiter oben traegt es
   auch, und ohne waere diese hier um einen Punkt zu schwach und wirkungslos.
   Deshalb kein !important. */
html.aqua-lb-ruhe .aqua-imgbox img.aqua-lb-on:hover,
html.aqua-lb-ruhe .tp-funfact-big-img img.aqua-lb-on:hover,
html.aqua-lb-ruhe .teaser-img img.aqua-lb-on:hover {
    transform: none;
}

/* WICHTIG: Das Overlay haengt direkt an <body>, NICHT im Seiteninhalt.
   Das Agntix-Theme faehrt GSAP ScrollSmoother und verschiebt #smooth-content
   per transform. Ein transformierter Vorfahre wird zum Bezugsrahmen fuer
   position:fixed - ein Overlay INNERHALB des Inhalts landet dann an der
   Scrollposition statt am Bildschirm. Genau das war der Fehler der
   seiteneigenen Lightboxen: das Bild lag irgendwo weit oben oder unten. */
.aqua-imglb {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 14, 12, 0.92);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* In der Lightbox wird NIE gescrollt. */
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: none;
}
.aqua-imglb.is-open { opacity: 1; visibility: visible; }

/* Solange die Lightbox offen ist, steht die Seite dahinter still. */
html.aqua-lb-offen,
html.aqua-lb-offen body {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.aqua-imglb__img {
    max-width: 92vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Pinch-Zoom (06.08.2026) macht die Geste selbst per JS, die native
       Browser-Geste soll dabei nicht mitmischen (sonst zoomt Safari die
       ganze Seite statt nur das Bild zu skalieren). */
    touch-action: none;
    /* Bilder bleiben scharfkantig (Projektregel Marcel). */
    border-radius: 0;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
    transform: scale(0.96);
    transition: transform 0.3s cubic-bezier(.16, 1, .3, 1);
}
.aqua-imglb.is-open .aqua-imglb__img { transform: scale(1); }

.aqua-imglb__btn {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    padding: 0;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 0.15s ease, transform 0.15s ease;
}
.aqua-imglb__btn:hover { background: rgba(255, 255, 255, 0.22); }
.aqua-imglb__close { top: 22px; right: 22px; }
.aqua-imglb__prev { left: 22px; top: 50%; transform: translateY(-50%); }
.aqua-imglb__next { right: 22px; top: 50%; transform: translateY(-50%); }
.aqua-imglb__prev:hover { transform: translateY(-50%) scale(1.06); }
.aqua-imglb__next:hover { transform: translateY(-50%) scale(1.06); }

.aqua-imglb__count {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    letter-spacing: 0.3px;
    background: rgba(0, 0, 0, 0.3);
    padding: 5px 14px;
    border-radius: 999px;
}

/* Einzelbild: keine Navigation. */
.aqua-imglb--single .aqua-imglb__prev,
.aqua-imglb--single .aqua-imglb__next,
.aqua-imglb--single .aqua-imglb__count { display: none; }

@media (max-width: 600px) {
    .aqua-imglb__btn { width: 44px; height: 44px; font-size: 22px; }
    .aqua-imglb__prev { left: 10px; }
    .aqua-imglb__next { right: 10px; }
    .aqua-imglb__close { top: 12px; right: 12px; }
    .aqua-imglb__img { max-width: 96vw; }
}

@media (prefers-reduced-motion: reduce) {
    .aqua-imglb,
    .aqua-imglb__img { transition: none; }
}