/* Aquanatura Vorher/Nachher-Slider - self-contained, scharfe Kanten, keine Schatten.
   Die Reglerposition steckt in --aqua-ba-pos (Zahl 0-100) und steuert Breite der
   Skizzen-Schicht sowie die Position von Trennlinie und Griff. */
.aqua-ba{
    --aqua-ba-pos:50;              /* 0-100, wird von JS gesetzt */
    --aqua-ba-ratio:4/3;
    --aqua-ba-handle:#4CA139;
    --aqua-ba-line:#ffffff;
    --aqua-ba-ink:#15130f;
    --aqua-ba-text:#4a5049;
    --aqua-ba-bg:#f4f7f2;
    --aqua-ba-border:#e4e9e0;
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ---------- Buehne ---------- */
.aqua-ba__stage{
    position:relative;
    width:100%;
    aspect-ratio:var(--aqua-ba-ratio);
    min-height:180px;
    overflow:hidden;
    background:var(--aqua-ba-bg);
    border-radius:0;
    box-shadow:none;
    cursor:ew-resize;
    touch-action:pan-y;            /* vertikales Scrollen bleibt moeglich */
    -webkit-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
}

/* ---------- Bildschichten ---------- */
.aqua-ba__layer{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    overflow:hidden;
}
.aqua-ba__layer img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    border-radius:0;
    box-shadow:none;
    pointer-events:none;
    -webkit-user-drag:none;
}

/* Skizze wird per Breite beschnitten ... */
.aqua-ba__layer--before{
    width:calc(var(--aqua-ba-pos) * 1%);
    transition:width .25s cubic-bezier(.2,.6,.2,1);
    will-change:width;
}
/* ... das Kind behaelt dabei die volle Buehnenbreite (100/pos * beschnittene Breite),
   damit das Bild nicht gestaucht wird. */
.aqua-ba__layer--before > img,
.aqua-ba__layer--before > .aqua-ba__ph{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:calc(10000% / var(--aqua-ba-pos));
    max-width:none;
}

/* ---------- Trennlinie + Griff ---------- */
.aqua-ba__line{
    position:absolute;
    top:0;
    bottom:0;
    left:calc(var(--aqua-ba-pos) * 1%);
    width:2px;
    margin-left:-1px;
    background:var(--aqua-ba-line);
    transition:left .25s cubic-bezier(.2,.6,.2,1);
    will-change:left;
}
.aqua-ba__handle{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:44px;
    height:44px;
    border-radius:50%;             /* einzige runde Form: das Bedienelement */
    background:var(--aqua-ba-handle);
    border:2px solid var(--aqua-ba-line);
    color:#ffffff;
    box-sizing:border-box;
    cursor:ew-resize;
    touch-action:none;
    box-shadow:none;
}
/* Zwei kleine Pfeilspitzen im Griff */
.aqua-ba__handle::before,
.aqua-ba__handle::after{
    content:"";
    position:absolute;
    top:50%;
    width:0;
    height:0;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    transform:translateY(-50%);
}
.aqua-ba__handle::before{
    left:10px;
    border-right:7px solid currentColor;
}
.aqua-ba__handle::after{
    right:10px;
    border-left:7px solid currentColor;
}
.aqua-ba__handle:focus{
    outline:2px solid var(--aqua-ba-ink);
    outline-offset:3px;
}
.aqua-ba__handle:focus:not(:focus-visible){
    outline:none;
}

/* Waehrend des Ziehens: keine Nachlaufanimation */
.aqua-ba.is-dragging .aqua-ba__layer--before,
.aqua-ba.is-dragging .aqua-ba__line{
    transition:none;
}

/* ---------- Beschriftungen ----------
   Haus-Glas wie die Galerie-Overlays und die Johannes-Haas-Karte der Startseite:
   dunkles Blur-Panel, abgerundet. Blur-Boxen sind die ausdrueckliche Ausnahme
   von der Scharfe-Kanten-Regel (siehe aqua-gallery.css).

   Vorher standen hier weisse Kaesten mit scharfer Kante. Auf einem hellen
   Bildbereich - Himmel, heller Kies, die weisse Skizze - verschwand die
   Beschriftung darin fast vollstaendig. Das dunkle Glas traegt weisse Schrift
   auf JEDEM Untergrund, weil es den Hintergrund zusaetzlich abdunkelt. */
.aqua-ba__label{
    position:absolute;
    bottom:16px;
    padding:10px 16px;
    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);
    color:#ffffff;
    font-size:14px;
    font-weight:600;
    line-height:1;
    letter-spacing:.04em;
    text-transform:uppercase;
    border-radius:14px;
    pointer-events:none;
}
.aqua-ba__label--before{ left:16px; }
.aqua-ba__label--after{ right:16px; }

/* ---------- KI-Hinweis (oben rechts, beim fertigen Bild) ----------
   Kennzeichnet ein Bild, das nicht fotografiert, sondern erzeugt wurde.
   Sitzt oben rechts - also ueber dem "Fertig"-Etikett, das unten rechts steht.
   Bewusst etwas leiser als die beiden Etiketten: kleinere Schrift, kein
   Versalsatz. Es ist ein Hinweis, keine Bildunterschrift. */
.aqua-ba__ainote{
    position:absolute;
    top:16px;
    right:16px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 13px;
    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);
    color:#ffffff;
    font-size:12.5px;
    font-weight:500;
    line-height:1;
    letter-spacing:.01em;
    border-radius:14px;
    pointer-events:none;
}
/* Kleines Funkeln-Zeichen, rein dekorativ - der Text traegt die Aussage. */
.aqua-ba__ainote::before{
    content:"";
    width:13px;
    height:13px;
    flex:0 0 13px;
    background:currentColor;
    -webkit-mask:var(--aqua-ba-spark) center/contain no-repeat;
    mask:var(--aqua-ba-spark) center/contain no-repeat;
    opacity:.85;
}
.aqua-ba{
    --aqua-ba-spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.9 5.7L19.6 9.6l-5.7 1.9L12 17.2l-1.9-5.7L4.4 9.6l5.7-1.9L12 2z'/%3E%3Cpath d='M18.5 14.5l.85 2.55 2.55.85-2.55.85-.85 2.55-.85-2.55L15.1 17.9l2.55-.85.85-2.55z'/%3E%3C/svg%3E");
}

/* Kann der Browser kein backdrop-filter (sehr selten), waere das Glas nur ein
   blasser Schleier und die weisse Schrift schlecht lesbar. Dann traegt ein
   kraeftigerer Grund - gleiche Optik, nur ohne Unschaerfe. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .aqua-ba__label,
    .aqua-ba__ainote{ background:rgba(16,20,16,0.72); }
}

/* ---------- Platzhalter im Editor ---------- */
.aqua-ba__ph{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    box-sizing:border-box;
    border:1px dashed var(--aqua-ba-border);
    background:var(--aqua-ba-bg);
    color:var(--aqua-ba-text);
    font-size:14px;
    text-align:center;
    padding:12px;
}

/* ---------- Klein ---------- */
@media(max-width:767px){
    .aqua-ba__handle{ width:38px;height:38px; }
    .aqua-ba__handle::before{ left:8px; }
    .aqua-ba__handle::after{ right:8px; }
    .aqua-ba__label{ bottom:12px;font-size:12px;padding:8px 13px;border-radius:12px; }
    .aqua-ba__label--before{ left:12px; }
    .aqua-ba__label--after{ right:12px; }
    .aqua-ba__ainote{ top:12px;right:12px;font-size:11px;padding:7px 11px;gap:6px;border-radius:12px; }
    .aqua-ba__ainote::before{ width:11px;height:11px;flex:0 0 11px; }
}

/* ---------- Bewegung reduzieren ---------- */
@media(prefers-reduced-motion:reduce){
    .aqua-ba__layer--before,
    .aqua-ba__line{ transition:none; }
}

/* ------------------------------------------------------------
   Der Regler darf im Elementor-Flex nicht zusammengedrueckt werden
   ------------------------------------------------------------
   Gemessen am 30.07.2026 auf /leistungen/planung-gestaltung/ bei 390px:
   Die Buehne ist durch aspect-ratio 4/3 bei 360px Breite 270px hoch, die
   Elementor-Huelle des Widgets war aber nur 180px hoch. Die Buehne ragte also
   90px unter ihre eigene Layout-Box hinaus. Der folgende Inhalt wurde darunter
   gesetzt und landete dadurch AUF dem Foto: die Ueberschrift "Worauf es bei
   guter Planung ankommt" lag komplett auf dem Bild und schnitt quer durch das
   Etikett "SKIZZE".

   Ursache ist NICHT flex-shrink, das wurde geprueft: auch mit flex-shrink:0
   blieb die Huelle bei 180px. Ursache ist flex-wrap:wrap, das Elementor am
   Handy auf jeden Container setzt (--flex-wrap-mobile). In einer umbrechenden
   Flex-Spalte bekommt ein Element nicht mehr seine Inhaltshoehe, sondern nur
   den Rest der Spalte - hier 180px statt 270px.

   Im Browser gegengeprueft, drei Versuche am selben Element:
     unveraendert        Widget 180px, Container 418px
     flex-wrap:nowrap    Widget 270px, Container 508px   <- loest es
     height:auto         Widget 180px, Container 418px   <- wirkungslos

   Deshalb wird der Umbruch genau dort abgeschaltet, wo der Regler steckt.
   :has trifft nur Container mit diesem Widget, alle anderen bleiben so, wie
   Elementor sie setzt. Am Rechner aendert sich nichts, dort war die Huelle
   schon so hoch wie die Buehne (gemessen 653px zu 653px).

   flex-shrink:0 bleibt als zweite Absicherung stehen: es kostet nichts und
   verhindert ein Stauchen in anders gebauten Containern. */
.elementor-widget-aqua_ba {
    flex-shrink: 0;
}
/* Der :has-Selektor, der hier stand, ist am 30.07.2026 nach aqua-site.css
   gewandert und gilt dort fuer ALLE Widgets mit dem Praefix aqua_ - derselbe
   Fehler ist danach beim Schaugarten-Video ein zweites Mal aufgetreten. Siehe
   Abschnitt 11 in aqua-site.css. */