/* Aquanatura Before/After scroll reveal widget - self-contained */
.aqua-reveal{position:relative;width:100%;--p:0;--aqua-feather:7%;--aqua-edge:#4CA139}
/* Die Hoehe kommt aus der Widget-Einstellung, die das Markup als Variable
   mitgibt (--aqua-pinh). Frueher stand sie als height im style-Attribut und
   war damit durch keine Regel mehr zu erreichen. */
.aqua-reveal__pin{position:relative;top:0;left:0;width:100%;height:var(--aqua-pinh,100vh);overflow:hidden}
.aqua-reveal__stage{position:absolute;inset:0;background:#eceee9}
.aqua-reveal__layer{position:absolute;inset:0}
.aqua-reveal__layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Wisch-Effekt links -> rechts. WICHTIG fuers Tempo: der Fortschritt bewegt nur
   noch transform (Ebene nach rechts, Bild gegenlaeufig) - reines Compositing.
   Die alte Loesung hat die mask-image-Stops pro Scroll-Tick geaendert und damit
   das komplette Vollbild-Foto bei jedem Tick neu zeichnen lassen -> Ruckeln.
   Die weiche Kante ist jetzt eine STATISCHE Maske am Bild (aendert sich nie). */
/* Weiche Verlaufskante (Marcel: "in der Mitte muss so ein Verlauf sein").
   Maske in doppelter Breite mit festen Stops - nur die POSITION wandert
   (mask-position), der Verlauf selbst wird nicht neu berechnet. Bei p=0 ist
   alles verdeckt, bei p=1 alles sichtbar, die weiche Zone ist 120px breit. */
.aqua-reveal__layer--after{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(50% - 60px),transparent calc(50% + 60px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(50% - 60px),transparent calc(50% + 60px),transparent 100%);
  -webkit-mask-size:200% 100%;mask-size:200% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;mask-position:100% 0;
  will-change:mask-position}
/* Das Bild selbst steht fest - die Kante schneidet die Ebene (clip-path in
   aqua-reveal.js). Die gruene Edge-Linie zeichnet die Schnittkante nach. */
/* Die Kante ist KEINE Linie mehr, sondern ein weicher Lichtschein, der mit
   der Schnittkante mitfaehrt (Marcel: "nicht so gerade Linie sondern Verlauf").
   Nur transform bewegt sich - der Verlauf selbst ist statisch, also fluessig. */
.aqua-reveal__edge{position:absolute;top:0;bottom:0;left:0;width:110px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 100%);
  transform:translate3d(-110px,0,0);will-change:transform}
.aqua-reveal.is-start .aqua-reveal__edge,.aqua-reveal.is-end .aqua-reveal__edge{opacity:0}
.aqua-reveal__label{position:absolute;bottom:26px;z-index:3;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:.02em;color:#fff;background:rgba(21,21,28,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.aqua-reveal__label--before{left:26px}
/* right statt 26px auf 106px. Der globale Nach-oben-Knopf ist position:fixed,
   44x44px und steht ab 768px auf right:50px - er belegt also den Streifen 50 bis
   94px vom rechten Rand und lag genau ueber der Beschriftung (44px Ueberdeckung
   waagrecht, sichtbar blieb nur das "g"). 106px = 94px + 12px Luft. Waagrecht
   ausweichen und nicht senkrecht, weil der Knopf seinen Abstand zum rechten Rand
   stabil haelt, den zum unteren aber beim Einblenden aendert. */
.aqua-reveal__label--after{right:106px;background:rgba(76,161,57,.85)}
.aqua-reveal__layer--placeholder{display:flex;align-items:center;justify-content:center;color:#8a8f86;font-size:15px;border:2px dashed #c4c9c0}
@media(max-width:767px){
  /* Am Handy ist der Abschnitt NICHT gepinnt (siehe aqua-reveal.js) und darf
     deshalb frei niedriger sein: gut die halbe Bildschirmhoehe statt
     bildschirmfuellend (Marcel, 03.08. spaetabends). min() haelt die Buehne
     auf schmalen Geraeten bei etwa 1:1,05 statt turmhoch - gemessen 410px
     bei 390px Breite, vorher 844px. */
  .aqua-reveal__pin{height:min(52vh,105vw)}
  .aqua-reveal__label{bottom:16px;font-size:12px;padding:6px 12px}
  .aqua-reveal__label--before{left:14px}
  /* Unter 768px steht derselbe Knopf auf right:20px, belegt also 20 bis 64px.
     76px = 64px + 12px Luft. */
  .aqua-reveal__label--after{right:76px}
}
@media(prefers-reduced-motion:reduce){
  .aqua-reveal__layer--after{-webkit-mask-image:none!important;mask-image:none!important}
  .aqua-reveal__edge{display:none}
}

/* Kein Hover-Zoom auf den Slider-Bildern: die globale Lightbox vergroessert
   anklickbare Bilder beim Darueberfahren (img.aqua-lb-on:hover) - auf der
   Vorher/Nachher-Buehne wirkt das wie ein Fehler (Marcel, 03.08. spaetabends).
   Der Zoom gehoert hier dem Scrollen, nicht der Maus. Klick-Lightbox bleibt. */
.aqua-reveal img.aqua-lb-on:hover{transform:none!important}
.aqua-reveal img.aqua-lb-on{transition:none}