/* =========================================================================
   Aquanatura Hero Slider (Pro) – animated, glassmorphism styles
   Self-contained, independent of the Gerdix main.css.
   ========================================================================= */
/* Die Google-Anfrage stand hier bis 09.08.2026. Sie ist entfallen:
 * Inter kommt jetzt lokal aus aqua-schriften.css - siehe die
 * Erklaerung dort. Ein @import haette drei Schritte hintereinander
 * gebraucht, bevor ein Buchstabe steht. */

.aqua-hero2 {
    position: relative;
    overflow: hidden;
    background: #0a0a12;
    --h2-anim-dur: 0.9s;
    --h2-anim-stagger: 55ms;
    --h2-content-maxw: 1320px;
    /* shared gutter so title, nav and the right card all line up */
    --h2-gutter: max(4%, calc((100% - var(--h2-content-maxw)) / 2));
}
.aqua-hero2 *,
.aqua-hero2 *::before,
.aqua-hero2 *::after { box-sizing: border-box; }

.aqua-hero2-container { width: 92%; max-width: var(--h2-content-maxw, 1320px); margin: 0 auto; }

/* ---- Slider / background --------------------------------------------- */
.aqua-hero2-slider { position: relative; width: 100%; }
.aqua-hero2 .swiper-slide { position: relative; overflow: hidden; }

.aqua-hero2-bg { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.aqua-hero2-bg img,
.aqua-hero2-bg video { width: 100%; height: 100%; object-fit: cover; display: block; }

.aqua-hero2-overlay,
.aqua-hero2-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* Top / bottom dark edge gradients (over the whole slider) */
.aqua-hero2-edge { position: absolute; left: 0; width: 100%; z-index: 2; pointer-events: none; }
.aqua-hero2-edge--top { top: 0; }
.aqua-hero2-edge--bottom { bottom: 0; }

/* Slides carry the height; the title is a single overlay above the slider. */
.aqua-hero2 .swiper-slide { min-height: 780px; }
.aqua-hero2-inner {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    padding: 130px 0;
    pointer-events: none;
}
/* Per-slide title markup is only a data carrier for the JS title swap. */
.aqua-hero2-slide-title { display: none; }

/* ---- Title ------------------------------------------------------------ */
.aqua-hero2-title {
    margin: 0;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: -0.02em;
    font-size: clamp(46px, 9vw, 150px);
    max-width: 1100px;
    transform: translate(var(--h2-title-tx, 0px), var(--h2-title-ty, 0px));
}
.aqua-hero2-media {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 300px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* Inline-video play button overlay */
.aqua-hero2-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 64px;
    height: 64px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    cursor: pointer;
    background: rgba(20, 22, 28, 0.30);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Blur bewusst klein gehalten (11.08.2026): backdrop-filter ueber dem
       zoomenden Hero-Bild muss bei JEDEM Frame neu gerechnet werden, und der
       Aufwand waechst ueberproportional mit dem Radius. 10 -> 6 px sieht
       praktisch gleich aus und kostet einen Bruchteil. */
    -webkit-backdrop-filter: blur(6px) saturate(1.2);
    backdrop-filter: blur(6px) saturate(1.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, background 0.3s, opacity 0.3s;
    z-index: 3;
}
.aqua-hero2-play:hover { transform: scale(1.09); background: rgba(20, 22, 28, 0.46); }
.aqua-hero2-play svg { width: 38%; height: 38%; margin-left: 0; }
.aqua-hero2-media.is-playing .aqua-hero2-play { opacity: 0; pointer-events: none; }
.aqua-hero2-media.is-playing video { cursor: default; }
/* Default inline spacing lives on the inline-level element so the
   "Margin / Offset" control can override it cleanly (animated or not). */
.aqua-hero2-title .w--media,
.aqua-hero2-title > .aqua-hero2-media {
    margin: 0 0.14em;
    transform: translate(var(--im-tx, 0px), var(--im-ty, 0px)) rotate(var(--im-rot, 0deg));
}
.aqua-hero2-media img,
.aqua-hero2-media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(.16,1,.3,1); }
.aqua-hero2-media:hover img,
.aqua-hero2-media:hover video { transform: scale(1.07); }

/* ---- Entrance animation (word + media reveal) ------------------------ */
.aqua-hero2.has-anim .aqua-hero2-title .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
    /* line-height 0.92 ist enger als die Glyphen: die Punkte von Ae ragen
       ueber die Zeilenbox und wurden von der Maske gekappt. Oben genauso
       oeffnen wie unten (fuer Unterlaengen), mit Ausgleich. */
    padding-top: 0.14em;
    margin-top: -0.14em;
}
.aqua-hero2.has-anim .aqua-hero2-title .w.w--media { vertical-align: middle; }
.aqua-hero2.has-anim .aqua-hero2-title .w > span { display: inline-block; transform: translateY(115%); will-change: transform; }

/* Animation only runs when the title element carries the .play class.
   The JS adds/replays .play ONLY when the visible title actually changes,
   so sliding between slides that share a title does NOT re-animate. */
.aqua-hero2.has-anim .aqua-hero2-title.play .w > span {
    animation: heroWordUp var(--h2-anim-dur) cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(var(--i, 0) * var(--h2-anim-stagger) + 0.1s);
}
/* Ohne blur: der Weichzeichner auf 130px-Buchstaben erzwang Repaints in
   jedem Frame, das war das Ruckeln beim Reinfaden. Nur transform laeuft
   komplett auf dem Compositor. */
@keyframes heroWordUp {
    0%   { transform: translateY(115%); }
    100% { transform: translateY(0); }
}

/* ---- Ken Burns background zoom ---------------------------------------
   Driven by a CSS transition (not a keyframe) so the OUTGOING slide keeps
   its zoom and eases back slowly during the crossfade instead of snapping
   back to scale 1. The incoming slide eases in. Result: a smooth transition. */
.aqua-hero2.has-ken .aqua-hero2-bg img {
    transform: scale(1);
    transform-origin: center;
    transition: transform var(--h2-ken-dur, 12s) linear;
}
/* will-change NUR auf der Folie, die sich gerade bewegt, plus ihren beiden
   Nachbarn fuer die Ueberblendung.
   WARUM (11.08.2026): Die Eigenschaft stand vorher auf der Regel darueber,
   also dauerhaft auf ALLEN fuenf Hero-Bildern. will-change legt fuer jedes
   betroffene Element sofort eine eigene Compositing-Ebene an und behaelt sie -
   das waren fuenf bildschirmfuellende Ebenen gleichzeitig, neben der grossen
   Ebene, die ScrollSmoother ohnehin schon verschiebt. Genau daran erstickt
   der Compositor, und es ruckelt nicht nur der Hero-Zoom, sondern jeder
   andere Hover auf der Seite mit. Jetzt sind es hoechstens drei. */
.aqua-hero2.has-ken .swiper-slide-active .aqua-hero2-bg img,
.aqua-hero2.has-ken .swiper-slide-next .aqua-hero2-bg img,
.aqua-hero2.has-ken .swiper-slide-prev .aqua-hero2-bg img {
    will-change: transform;
}
.aqua-hero2.has-ken .swiper-slide-active .aqua-hero2-bg img {
    transform: scale(1.12);
}

/* ---- Fixed right-hand aside (intro + testimonial) -------------------- */
.aqua-hero2-aside {
    position: absolute;
    z-index: 4;
    right: var(--h2-gutter);
    top: 0;
    height: 100%;
    width: 300px;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 40px;
    padding: 80px 0;
    pointer-events: none;
}
.aqua-hero2-aside > * { pointer-events: auto; }
/* Right column rises in, staggered (intro first, then card). */
.aqua-hero2.has-anim .aqua-hero2-aside > * {
    animation: heroAsideRise 0.95s cubic-bezier(.16, 1, .3, 1) both;
}
.aqua-hero2.has-anim .aqua-hero2-aside > *:nth-child(1) { animation-delay: 0.45s; }
.aqua-hero2.has-anim .aqua-hero2-aside > *:nth-child(2) { animation-delay: 0.62s; }
@keyframes heroAsideRise { from { opacity: 0; transform: translateY(38px) scale(0.96); } to { opacity: 1; transform: none; } }

.aqua-hero2-intro {
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    width: 100%;
}
/* Intro style presets */
.aqua-hero2-intro--line { border-top: 1px solid rgba(255, 255, 255, 0.28); padding-top: 18px; }
.aqua-hero2-intro--boxed {
    background: rgba(255, 255, 255, 0.1);
    /* 12 -> 8 px, gleicher Grund wie oben. */
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px; padding: 18px;
}
.aqua-hero2-intro--card { background: #15151c; border-radius: 16px; padding: 18px; }
.aqua-hero2-intro--plain { /* text only */ }
.aqua-hero2-intro p { margin: 0; }
.aqua-hero2-intro .arrow { flex: 0 0 auto; color: #fff; line-height: 1; transition: transform 0.3s; }
.aqua-hero2-intro .arrow:hover { transform: translate(3px, -3px); }
.aqua-hero2-intro .arrow svg { width: 22px; height: 22px; }

/* ---- Testimonial card (glass) ---------------------------------------- */
.aqua-hero2-testi {
    border-radius: 24px;
    padding: 18px 18px 20px;
    width: 240px;
    color: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    position: relative;
    transition: transform 0.45s cubic-bezier(.16,1,.3,1), box-shadow 0.45s;
}
/* Card style presets */
.aqua-hero2-testi--glass {
    /* Slightly higher base opacity + a dark tint so that, on the first frame after
       reload (before backdrop-filter has computed), the card already looks "frosted"
       instead of fully see-through — reduces the visible blur-pop-in. */
    background: rgba(18, 20, 24, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.25);
    /* 16 -> 10 px, gleicher Grund wie oben. */
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    backdrop-filter: blur(10px) saturate(1.3);
    will-change: backdrop-filter;
}
.aqua-hero2-testi--solid-light { background: #f4f1ee; color: #15151c; }
.aqua-hero2-testi--solid-light .name,
.aqua-hero2-testi--solid-light .quote { color: #15151c; }
.aqua-hero2-testi--solid-dark { background: #15151c; border: 1px solid rgba(255, 255, 255, 0.08); }
.aqua-hero2-testi--outline {
    background: rgba(0, 0, 0, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.aqua-hero2-testi--minimal { background: transparent; box-shadow: none; padding-left: 0; padding-right: 0; }
.aqua-hero2-testi:hover { transform: translateY(-7px); box-shadow: 0 34px 70px rgba(0, 0, 0, 0.45); }
.aqua-hero2-testi-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.aqua-hero2-testi .avatars { display: flex; }
.aqua-hero2-testi .avatars img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.7); margin-left: -10px; }
.aqua-hero2-testi .avatars img:first-child { margin-left: 0; }
.aqua-hero2-testi .name { margin: 0; font: 600 15px/1.2 'Inter', sans-serif; color: #fff; }
.aqua-hero2-testi .quote { margin: 0 0 16px; font: italic 500 17px/1.35 'Inter', sans-serif; color: #fff; }
.aqua-hero2-testi .more-btn {
    display: inline-block; background: #15151c; color: #fff;
    border-radius: 30px; padding: 9px 22px; text-decoration: none;
    font: 600 14px/1 'Inter', sans-serif; transition: transform 0.3s, filter 0.3s;
}
.aqua-hero2-testi .more-btn:hover { transform: translateY(-2px); filter: brightness(1.15); }
.aqua-hero2-testi .testi-pin {
    position: absolute; left: 18px; bottom: -16px; width: 38px; height: 38px; border-radius: 50%;
    background: #fff; color: #15151c; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

/* ---- Project / Showroom teaser card --------------------------------- */
.aqua-hero2-teaser {
    display: block;
    width: 260px;
    max-width: 100%;
    padding: 12px;
    text-decoration: none;
    color: #fff;
}
.aqua-hero2-teaser .teaser-img {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    margin-bottom: 12px;
}
.aqua-hero2-teaser .teaser-img img,
.aqua-hero2-teaser .teaser-img video {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.6s cubic-bezier(.16, 1, .3, 1);
}
.aqua-hero2-teaser:hover .teaser-img img,
.aqua-hero2-teaser:hover .teaser-img video { transform: scale(1.08); }
/* Play button (opens lightbox) */
.aqua-hero2-teaser .aqua-hero2-lightbtn {
    position: absolute; inset: 0; margin: auto;
    width: 58px; height: 58px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 50%;
    background: rgba(20, 22, 28, 0.30); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, background 0.3s;
}
.aqua-hero2-teaser .aqua-hero2-lightbtn svg { width: 36%; height: 36%; margin-left: 0; }
.aqua-hero2-teaser:hover .aqua-hero2-lightbtn { transform: scale(1.08); background: rgba(20, 22, 28, 0.46); }
.aqua-hero2-teaser .teaser-body { position: relative; padding: 0 6px 6px; padding-right: 60px; }
.aqua-hero2-teaser .teaser-label { display: inline-block; font: 600 11px/1 'Inter', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; margin-bottom: 8px; color: inherit; }
.aqua-hero2-teaser .teaser-title { margin: 0; font: 700 18px/1.25 'Inter', sans-serif; color: #fff; }
.aqua-hero2-teaser .teaser-meta { display: block; margin-top: 6px; font: 500 13px/1.3 'Inter', sans-serif; opacity: 0.7; color: inherit; }
.aqua-hero2-teaser .teaser-arrow {
    position: absolute; right: 6px; bottom: 6px;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.15); color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s, background 0.3s;
}
.aqua-hero2-teaser:hover .teaser-arrow { background: rgba(255, 255, 255, 0.3); }
.aqua-hero2-teaser .teaser-arrow svg { width: 21px; height: 21px; }
/* teaser text colour on light card preset */
.aqua-hero2-testi--solid-light .teaser-label,
.aqua-hero2-testi--solid-light .teaser-title,
.aqua-hero2-testi--solid-light .teaser-meta { color: #15151c; }
.aqua-hero2-testi--solid-light .teaser-arrow { background: rgba(0, 0, 0, 0.08); color: #15151c; }

/* ---- Video lightbox -------------------------------------------------- */
.aqua-lightbox { position: fixed; inset: 0; z-index: 99999; display: none; }
.aqua-lightbox.is-open { display: block; }
.aqua-lb-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    animation: aquaLbFade 0.25s ease;
}
.aqua-lb-dialog { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 4vh 3.5vw; }
/* Stage wraps the video + close button so the X can sit at the video's corner. */
.aqua-lb-stage { position: relative; display: flex; }
.aqua-lb-inner {
    position: relative; width: min(1360px, 90vw); aspect-ratio: 16 / 9; max-height: 88vh;
    animation: aquaLbPop 0.3s cubic-bezier(.16, 1, .3, 1);
}
.aqua-lb-inner iframe,
.aqua-lb-inner video { width: 100%; height: 100%; border: 0; border-radius: 12px; background: #000; display: block; }
/* X sits just above the top-right corner of the video (relative to the stage). */
.aqua-lb-close {
    position: absolute; top: -56px; right: 0; z-index: 2;
    width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 50%;
    background: rgba(20, 22, 28, 0.45); color: #fff; cursor: pointer;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: background 0.25s, transform 0.25s;
}
.aqua-lb-close svg { width: 44%; height: 44%; display: block; }
.aqua-lb-close:hover { background: rgba(20, 22, 28, 0.75); transform: rotate(90deg); }
/* On short/small screens there's little room above the video → tuck it into
   the video's top-right corner instead. */
@media (max-height: 560px), (max-width: 600px) {
    .aqua-lb-close { top: 8px; right: 8px; width: 42px; height: 42px; }
}
body.aqua-lb-lock { overflow: hidden; }
@keyframes aquaLbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aquaLbPop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }

/* Closing: fade + scale OUT, mirroring the entrance. The JS keeps .is-open
   during .is-closing and only sets display:none after the animation (260ms). */
.aqua-lightbox.is-closing .aqua-lb-backdrop { animation: aquaLbFadeOut 0.26s ease forwards; }
.aqua-lightbox.is-closing .aqua-lb-stage { animation: aquaLbPopOut 0.26s cubic-bezier(.4, 0, .6, 1) forwards; }
@keyframes aquaLbFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes aquaLbPopOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96); } }

/* ---- Navigation (glass) ---------------------------------------------- */
.aqua-hero2-nav {
    position: absolute; z-index: 5; bottom: 34px;
    left: var(--h2-gutter);
    display: flex; gap: 10px;
}
.aqua-hero2-nav button {
    width: 50px; height: 50px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.3s, color 0.3s, transform 0.3s;
}
.aqua-hero2-nav button:hover { background: #fff; color: #15151c; transform: translateY(-3px) scale(1.06); }
.aqua-hero2-nav button:active { transform: translateY(-1px) scale(0.98); }
.aqua-hero2-nav button svg { width: 18px; height: 18px; }

/* ---- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .aqua-hero2.has-anim .aqua-hero2-title .w > span { transform: none !important; filter: none !important; animation: none !important; }
    .aqua-hero2.has-anim .aqua-hero2-aside > * { animation: none !important; opacity: 1 !important; transform: none !important; }
    .aqua-hero2.has-ken .swiper-slide-active .aqua-hero2-bg img { animation: none !important; }
}

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

/* Tablet & below: the right-hand aside (intro + card) drops BELOW the slider
   and now adds to the section height. The title overlay (.aqua-hero2-inner) is
   absolutely positioned over the WHOLE section, so we clamp its height to the
   slider height — otherwise the title would centre over the stacked card. */
@media (max-width: 991px) {
    .aqua-hero2 .swiper-slide { min-height: 560px; }
    .aqua-hero2-inner { top: 0; bottom: auto; height: 560px; padding: 70px 0; }
    .aqua-hero2-aside {
        position: static; width: 100%; max-width: 100%; height: auto;
        flex-direction: column; align-items: center; gap: 22px; padding: 28px 5% 56px;
    }
    .aqua-hero2-intro,
    .aqua-hero2-testi,
    .aqua-hero2-teaser { width: 100%; max-width: 380px; }
    .aqua-hero2-nav { position: static; margin: 22px auto 38px; justify-content: center; }
}

/* Phones */
@media (max-width: 767px) {
    .aqua-hero2 .swiper-slide { min-height: 480px; }
    .aqua-hero2-inner { height: 480px; padding: 0 0 52px; align-items: flex-end; }
    .aqua-hero2-title { font-size: clamp(32px, 8.6vw, 60px); max-width: 100%; transform: none; }
    /* Neutralise desktop title/media offsets so nothing is pushed off a narrow screen. */
    .aqua-hero2-title > .aqua-hero2-media,
    .aqua-hero2-title .w--media { transform: none; }
    .aqua-hero2-media { width: clamp(120px, 42vw, 190px); }
    .aqua-hero2-nav button { width: 44px; height: 44px; }
    .aqua-hero2-nav button svg { width: 16px; height: 16px; }
}

/* Bild IN der Ueberschrift, Handy-Breakpoint von Elementor (bis 575px).
   Der Titel lautet woertlich "Wir\n{{media}} bauen\n Gaerten." - das Bild gehoert
   also in die zweite Zeile VOR das Wort "bauen", und am Schreibtisch steht es
   auch dort. Am Handy nicht: Elementor schreibt die Bildmasse aus den
   Widget-Einstellungen OHNE Media Query heraus
   (.elementor-47206 ... .aqua-hero2-media{width:292px;height:124px}), und diese
   Regel schlaegt durch hoehere Spezifitaet den Handy-Rueckfall vier Zeilen weiter
   oben. Gemessen bei 402px: benoetigte Zeilenbreite 292 + 10 + 9 + 118 = 429px
   bei 370px verfuegbar -> "bauen" rutscht in die naechste Zeile und das Bild
   steht allein zwischen "WIR" und "BAUEN GAERTEN.".

   165px ist der groesste Wert, bei dem "BAUEN" bis hinunter zu 320px neben dem
   Bild bleibt. aspect-ratio 292/124 haelt den Bildausschnitt des Schreibtischs.
   !important ist noetig, weil die Seiten-CSS von Elementor spaeter geladen wird.

   Bewusst NICHT ueber die Elementor-Einstellung media_width_mobile geloest: der
   Schluessel existiert nicht, /elementor-set legt keine neuen Schluessel an, und
   /elementor-set-data haette den ganzen Baum der Startseite neu geschrieben. */
@media (max-width: 575px) {
    .aqua-hero2-media {
        width: clamp(120px, 42vw, 165px) !important;
        height: auto !important;
        aspect-ratio: 292 / 124 !important;
        /* Das Bild ist gut doppelt so hoch wie die Textzeile (70px gegen 33px) und
           ragte deshalb 5px in die Zeile darunter - genug, um die Umlautpunkte von
           "GAERTEN." zu verdecken, das Wort las sich wie "GARTEN.". Der Abstand
           schiebt die naechste Zeile weg; gemessen bei 402px wird aus 5px
           Ueberlappung ein Abstand von 9px.
           Kein vertical-align und keine kleinere Bildhoehe: beide aendern nichts,
           weil die Zeilenhoehe mit dem Bild mitwaechst - nachgemessen mit
           vertical-align top/middle und Bildbreiten von 148 bis 165px, die
           Ueberlappung blieb jedes Mal exakt 5px. */
        margin-bottom: 0.4em !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .aqua-hero2 .swiper-slide { min-height: 430px; }
    .aqua-hero2-inner { height: 430px; padding: 0 0 42px; }
    .aqua-hero2-title { font-size: clamp(27px, 9.6vw, 46px); }
    .aqua-hero2-aside { padding: 22px 16px 46px; }
    .aqua-hero2-intro,
    .aqua-hero2-testi,
    .aqua-hero2-teaser { max-width: 100%; }
}

/* ---- Libelle (Animated Dragonfly) -------------------------------------- */
.aquanatura-libelle-wrapper {
  position: absolute;
  z-index: 25;
  pointer-events: none; /* Blockiert keine Klicks auf den Text darunter */
  transform-style: preserve-3d;
}

/* Inline Libelle inside title (when selected as {{media}}) */
/* ---- Libelle im Hero-Titel --------------------------------------------
   Sie sitzt IM Inline-Platz und der bleibt im Textfluss: "bauen" rueckt
   nach rechts, exakt wie frueher beim Bild. Damit die Fluegel nicht
   abgeschnitten werden, wird NUR die Maske dieses einen Worts geoeffnet -
   die uebrigen Woerter behalten ihre Aufdeck-Maske. */
.aqua-hero2-title { position: relative; }
/* Die Maske dieses EINEN Worts wirklich oeffnen. Wichtig: die Masken-Regel
   des Themes (.aqua-hero2.has-anim .aqua-hero2-title .w) hat VIER Klassen -
   eine schwaechere Regel verliert den Spezifitaetskampf und die Fluegel
   bleiben abgeschnitten. Deshalb hier in gleicher Tiefe formuliert. */
.aqua-hero2.has-anim .aqua-hero2-title .w.w--media,
.aqua-hero2-title .w.w--media { overflow: visible; }
/* Und UEBER der Schrift sitzen: "Gaerten." kommt im DOM nach dem Platz und
   wuerde sich sonst ueber die Libelle malen. */
.aqua-hero2-title .w.w--media { position: relative; z-index: 31; }
/* Das Wort nach dem Platz ein Stueck heranholen (ca. 33px bei 130px
   Schrift). Nur bei der Libelle, ein Bild soll seinen Abstand behalten. */
.aqua-hero2-title .w.w--media:has(.aqua-libelle-lottie) { margin-right: -0.25em; }

.aqua-hero2-media.is-libelle {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.aqua-hero2-media.is-libelle .aqua-libelle-lottie {
  position: absolute;
  left: 50%;
  /* top 30 %: Beine knapp UNTER der Oberkante der "Gaerten."-Buchstaben,
     sie sitzt sichtbar AUF der Schrift. (50 % war mitten im G, 19 % stand
     sie Marcel zu hoch.) */
  top: 30%;
  /* Die Figur fuellt nur rund 31 % ihres Rahmens, der Rahmen muss also
     deutlich groesser sein als der Platz. 280 % ergibt beim 292er Platz
     eine Libelle von rund 255 px. */
  width: 280%;
  aspect-ratio: 1920 / 1080;
  height: auto;
  transform: translate(-50%, -50%);
  /* KEIN Einblenden: die Libelle fliegt ganz normal herein, der Fade sah
     nach Eingeblendet-Werden aus. Vor dem Laden ist der Kasten ohnehin leer. */
  /* Der Rahmen ist 2,8x groesser als die Figur - Hover feuerte schon ueber
     dem Text. Deshalb reagiert nur der Hotspot ueber der Figur (kommt per
     JS als Kind dazu). */
  pointer-events: none;
  will-change: transform;
  z-index: 30;
}
.aqua-libelle-hotspot {
  position: absolute;
  left: 30%;
  top: 18%;
  width: 40%;
  height: 62%;
  pointer-events: auto;
  cursor: pointer;
}

.aqua-hero2-media.is-libelle .aqua-libelle-lottie svg,
.aqua-hero2-media.is-libelle .aqua-libelle-lottie canvas {
  display: block;
  overflow: visible !important;
  /* Aufhellen: das satte Blau saeuft auf dunklen Gartenfotos ab. */
  /* KEIN drop-shadow: der wird auf einem animierenden SVG in jedem Frame
     neu gerechnet und liess die ganze Seite beim Einflug ruckeln. */
  filter: brightness(1.78) saturate(0.9);
}

.aquanatura-libelle-img {
  width: 100%;
  height: auto;
  display: block;
  /* Anflug-Animation + Kontinuierliche Anti-Gravity Schwebe-Animation */
  animation: 
    libelleAnflug 2.2s cubic-bezier(0.25, 1, 0.5, 1) forwards,
    libelleAntiGravity 4s ease-in-out infinite 2.2s;
}

/* Anflug-Animation: Fliegt von oben-rechts ein und landet geschmeidig */
@keyframes libelleAnflug {
  0% {
    opacity: 0;
    transform: translate3d(180px, -120px, 0) rotate(-15deg) scale(0.5);
  }
  75% {
    opacity: 1;
    transform: translate3d(-8px, 5px, 0) rotate(3deg) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

/* Anti-Gravity Schwerelosigkeits-Schweben */
@keyframes libelleAntiGravity {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  33% {
    transform: translate3d(-5px, -10px, 10px) rotate(-2.5deg);
  }
  66% {
    transform: translate3d(6px, -4px, -5px) rotate(1.8deg);
  }
}

/* Mobil-Anpassung */
@media (max-width: 768px) {
  .aquanatura-libelle-wrapper {
    max-width: 140px;
  }
}





/* =========================================================================
   Handy-Rettung: Elementor schreibt die Desktop-Slidehoehe (950px) OHNE
   Responsive-Varianten in die Seiten-CSS - sie ueberstimmt saemtliche
   Handy-Regeln weiter oben (560/480/430). Deshalb hier mit !important
   nachgezogen, gleiche Werte wie die Original-Breakpoints des Widgets.
   ========================================================================= */
@media (max-width: 991px) {
  .aqua-hero2 .swiper-slide { min-height: 560px !important; }
  .aqua-hero2-inner { min-height: 0 !important; height: 560px !important; }
}
@media (max-width: 767px) {
  .aqua-hero2 .swiper-slide { min-height: 480px !important; }
  .aqua-hero2-inner { height: 480px !important; }
}
@media (max-width: 479px) {
  .aqua-hero2 .swiper-slide { min-height: 430px !important; }
  .aqua-hero2-inner { height: 430px !important; }
}
/* Libellen-Platz in em statt Pixeln: 292x124 px bei 130 px Schrift sind
   2,25em x 0,95em. So skaliert das Gespann Schrift+Libelle auf JEDER
   Breite im selben Verhaeltnis wie am Desktop. Ueberstimmt die starre
   Elementor-Pixelbreite. */
.aqua-hero2-media.is-libelle { width: 2.25em !important; height: 0.95em !important; }

/* Handy: Schrift deutlich groesser (Verhaeltnis wie Desktop, dort belegt
   der Titel rund 40 % der Slidehoehe) und das schwarze Loch unter dem
   Slider zu - Karte und Pfeile kompakt. */
@media (max-width: 991px) {
  .aqua-hero2-aside { padding: 18px 5% 6px; gap: 16px; }
  .aqua-hero2-nav { margin: 6px 0 16px; }
}
@media (max-width: 767px) {
  .aqua-hero2-title { font-size: clamp(44px, 14vw, 70px); }
}
@media (max-width: 479px) {
  .aqua-hero2-title { font-size: clamp(40px, 14.5vw, 60px); }
}
/* Handy-Feinschliff (03.08.):
   1. Schaugarten-Karte kompakt: statt grosser Videovorschau nur ein
      Play-Knopf neben dem Text - spart rund 200px Hoehe.
   2. Titel weiter weg vom Header: weniger Boden-Abstand, der Titel ist
      unten ausgerichtet und rutscht dadurch tiefer.
   3. Hintergruende IMMER fuellend, egal was am Slide eingestellt ist
      (das !important schlaegt auch den Inline-Stil des Widgets). */
@media (max-width: 991px) {
  .aqua-hero2-bg img,
  .aqua-hero2-bg video { object-fit: cover !important; }

  .aqua-hero2-aside .aqua-hero2-teaser {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
  }
  .aqua-hero2-aside .aqua-hero2-teaser .teaser-img {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
  }
  .aqua-hero2-aside .aqua-hero2-teaser .teaser-img video { display: none; }
  .aqua-hero2-aside .aqua-hero2-teaser .teaser-img .aqua-hero2-lightbtn { width: 42px; height: 42px; }
  .aqua-hero2-aside .aqua-hero2-teaser .teaser-body { flex: 1; min-width: 0; }
  .aqua-hero2-aside .aqua-hero2-teaser .teaser-title { font-size: 17px; }
}
@media (max-width: 991px) {
  /* Titel nach unten ausrichten: er stand zentriert und klebte dadurch
     am Header. Unten ausgerichtet bekommt er oben Luft. */
  .aqua-hero2-inner { align-items: flex-end !important; }
}
@media (max-width: 767px) {
  .aqua-hero2-inner { padding-bottom: 22px !important; }
}
@media (max-width: 479px) {
  .aqua-hero2-inner { padding-bottom: 18px !important; }
}
/* Handy-Umbau (03.08., zweiter Anlauf): KEIN schwarzer Kasten mehr unter
   dem Bild. Wie am Desktop liegen Karte und Pfeile AUF dem Foto - das
   Bild fuellt das komplette Widget. Der Slide wird dafuer etwas hoeher,
   der Titel rueckt ueber die Karte. */
@media (max-width: 991px) {
  .aqua-hero2 .swiper-slide { min-height: 640px !important; }
  .aqua-hero2-inner { height: 640px !important; padding-bottom: 205px !important; }
  .aqua-hero2-aside {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 70px !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 5% !important;
    margin: 0 !important;
    gap: 12px !important;
    z-index: 5;
  }
  .aqua-hero2-nav {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 14px !important;
    margin: 0 !important;
    justify-content: center;
    z-index: 5;
  }
}
/* Handy-Feinschliff v3 (03.08.): kompakter und SYMMETRISCH.
   - Titel hoeher (weniger Luft zum Header ist falsch herum: der Titel
     rueckt nach OBEN, also mehr Boden-Polster)
   - Karte mittig ueber die volle Breite (sie hing rechts, weil das
     Desktop-align-items: flex-end weitergalt)
   - mehr Luft unter Karte und Pfeilen, alles eine Nummer kleiner
   - Zeile 1/2: der Libellen-Platz war 0,95em hoch und blaehte mit
     vertical-align:middle die zweite Zeilenbox auf - daher der zu
     grosse Abstand unter WIR. Flacherer Platz, Figur bleibt optisch
     an derselben Stelle (top angepasst) und rueckt leicht nach links. */
@media (max-width: 991px) {
  .aqua-hero2 .swiper-slide { min-height: 620px !important; }
  .aqua-hero2-inner { height: 620px !important; padding-bottom: 248px !important; }

  .aqua-hero2-aside { align-items: stretch !important; bottom: 84px !important; }
  /* Die Karte brachte Eigenbreite/Margin vom Desktop mit und hing rechts. */
  .aqua-hero2-aside .aqua-hero2-teaser { width: 100% !important; max-width: none !important; margin: 0 !important; }
  .aqua-hero2-aside .aqua-hero2-teaser { padding: 10px 12px; gap: 12px; }
  .aqua-hero2-aside .aqua-hero2-teaser .teaser-img { flex-basis: 56px; width: 56px; height: 56px; }
  .aqua-hero2-aside .aqua-hero2-teaser .teaser-img .aqua-hero2-lightbtn { width: 38px; height: 38px; }
  .aqua-hero2-aside .aqua-hero2-teaser .teaser-title { font-size: 16px; line-height: 1.25; }

  .aqua-hero2-nav { bottom: 20px !important; }
  .aqua-hero2-prev,
  .aqua-hero2-next { width: 44px !important; height: 44px !important; }

  .aqua-hero2-media.is-libelle { height: 0.7em !important; }
  .aqua-hero2-media.is-libelle .aqua-libelle-lottie {
    top: 41%;
    transform: translate(calc(-50% - 0.2em), -50%);
  }
}
/* === Anhalten-Knopf im Hero (Marcel, 10.08.2026) ======================
   Sitzt rechts neben Zurueck/Weiter und sieht genauso aus - er ist Teil
   derselben Bedienleiste, also darf er sich nicht davon abheben. Die Groesse
   erbt er von ".aqua-hero2-nav button", ebenso Farben und Hover-Verhalten;
   hier steht nur, welches der beiden Zeichen sichtbar ist.

   Warum ueberhaupt: Ein Slider, der von selbst weiterlaeuft, entzieht dem
   Leser die Kontrolle - wer langsam liest, verliert den Satz. Der Knopf gibt
   sie zurueck. (Aus demselben Grund verlangt die Barrierefreiheit fuer
   automatisch bewegte Inhalte eine Anhaltemoeglichkeit.) */
.aqua-hero2-nav .aqua-hero2-toggle[hidden] { display: none; }
.aqua-hero2-toggle .aqua-hero2-ic-play { display: none; }
.aqua-hero2-toggle.is-paused .aqua-hero2-ic-pause { display: none; }
.aqua-hero2-toggle.is-paused .aqua-hero2-ic-play { display: block; }

/* === Handy-Feinschliff (Marcel, 27.08.2026) ==========================
   Zwei Dinge, beide nur am Handy.

   1. BILDAUSSCHNITT JE FOLIE
   Am Handy ist vom Hero-Bild nur ein Ausschnitt zu sehen: bei 375px
   Fensterbreite und 620px Hoehe deckt object-fit:cover eine Bildbreite
   von 1127px ab, sichtbar sind davon 375, also ein Drittel. Ein Motiv,
   das am Schreibtisch bequem im Bild sitzt, faellt damit heraus. Genau
   das passierte mit der Frau am Teich: sie steht bei 63 bis 84 Prozent
   der Bildbreite, der eingestellte Brennpunkt von 53 Prozent zeigt aber
   nur den Bereich von 35 bis 69 Prozent. Zu sehen war ihr Kleid am
   rechten Rand, der Kopf fehlte.

   An dieser Stelle stand bis 6.11.0 schon eine Regel dafuer, die das
   Bild ueber seinen DATEINAMEN ansprach (img[src*="hero-slider4"]).
   Das Motiv wurde spaeter getauscht, seither zeigte sie ins Leere: sie
   stand noch da, wirkte aber nicht mehr, und niemand hat es gesehen.
   Deshalb jetzt ein Regler an der Folie (Elementor: "Focal Point
   Horizontal, mobile"). Der ueberlebt jeden Bildtausch, und der Kunde
   kann ihn selbst setzen.

   Das !important ist noetig, weil das Widget den Schreibtisch-Wert als
   style-Attribut direkt an das Bild schreibt (siehe bg_html) und ein
   style-Attribut jede Regel im Stylesheet schlaegt. Zwei Bloecke weiter
   oben steht aus demselben Grund dasselbe fuer object-fit.
   Ist kein Handy-Wert gesetzt, faellt die Regel auf den
   Schreibtisch-Wert zurueck: das Bild bleibt dann, wie es war.

   2. KARTE FLACHER
   Ueber "Besuche unseren Schaugarten" stand noch einmal das Woertchen
   "SCHAUGARTEN". Dasselbe zweimal, und es kostet Hoehe. Ausgeblendet
   wird die Karte von 96px auf 78px flach (gemessen bei 375px), das Foto
   darunter bekommt die 18px. Am Schreibtisch bleibt das Woertchen
   stehen: dort ist Platz und es ordnet die Karte ein.
   Auch fuer Vorleseprogramme geht nichts verloren, die Ueberschrift der
   Karte nennt den Schaugarten bereits.
   ==================================================================== */
@media (max-width: 640px) {
    .aqua-hero2-bg img,
    .aqua-hero2-bg video {
        object-position: var(--aqua-bg-x-handy, var(--aqua-bg-x)) var(--aqua-bg-y) !important;
    }
}
@media (max-width: 991px) {
    .aqua-hero2-aside .aqua-hero2-teaser .teaser-label { display: none; }
}